mirror of
https://github.com/primer/css.git
synced 2024-09-11 16:36:07 +03:00
Importing more styles from Primer View Components (#2326)
* Importing labels css from pvc * Fixing blankslate change so we're not deleting a file * Importing truncate * Adding breadcrumb styles * Adding toggle_switch * Adding subhead * Adding timeline_item * Adding popover * Adding dropdown * Adding flash * Adding avatar and avatar stack * Adding autocomplete * Adding border box * Adding navigation styles * Updating version to canary * Fixing popover import * Adding progress bar * Adding to docs * Update version * Fix lock file * reset lock * Rebuild lockfile * Fixing imports
This commit is contained in:
Jon Rohan
GitHub
parent
8cf13e984c
commit
cb1ca79344
@ -16,6 +16,7 @@
|
||||
"@primer/octicons": "17.0.0",
|
||||
"@primer/octicons-react": "17.0.0",
|
||||
"@primer/primitives": "7.8.3",
|
||||
"@primer/view-components": "^0.0.112",
|
||||
"@svgr/webpack": "5.5.0",
|
||||
"autoprefixer": "10.4.2",
|
||||
"babel-preset-gatsby": "^2.14.0",
|
||||
|
||||
@ -1506,6 +1506,53 @@
|
||||
resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210"
|
||||
integrity sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw==
|
||||
|
||||
"@github/auto-complete-element@^3.3.4":
|
||||
version "3.3.4"
|
||||
resolved "https://registry.yarnpkg.com/@github/auto-complete-element/-/auto-complete-element-3.3.4.tgz#b762f13342b8ea5e03609f75b5a8d417080355eb"
|
||||
integrity sha512-b9SBCLIQGfCI3G0pGYE8rBSUDON5iFKUgHXgAtVdgZii0dnLFxNl5tn1R/RaBEFdzBQPDl9vqu41TF/Hs3w8FA==
|
||||
dependencies:
|
||||
"@github/combobox-nav" "^2.0.2"
|
||||
|
||||
"@github/catalyst@^1.6.0":
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/@github/catalyst/-/catalyst-1.6.0.tgz#378734d1d2b6a85af169d7e66c1a2a604bf1e82c"
|
||||
integrity sha512-u8A+DameixqpeyHzvnJWTGj+wfiskQOYHzSiJscCWVfMkIT3rxnbHMtGh3lMthaRY21nbUOK71WcsCnCrXhBJQ==
|
||||
|
||||
"@github/clipboard-copy-element@^1.1.2":
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@github/clipboard-copy-element/-/clipboard-copy-element-1.1.2.tgz#7a6e8042749471504d4e7cfcc47097a781db2bdb"
|
||||
integrity sha512-L6CMrcA5we0udafvoSuRCE/Ci/3xrLWKYRGup2IlhxF771bQYsQ2EB1of182pI8ZWM4oxgwzu37+igMeoZjN/A==
|
||||
|
||||
"@github/combobox-nav@^2.0.2":
|
||||
version "2.1.5"
|
||||
resolved "https://registry.yarnpkg.com/@github/combobox-nav/-/combobox-nav-2.1.5.tgz#905598cc681e016eddfcd8adcb39e4d81c907577"
|
||||
integrity sha512-dmG1PuppNKHnBBEcfylWDwj9SSxd/E/qd8mC1G/klQC3s7ps5q6JZ034mwkkG0LKfI+Y+UgEua/ROD776N400w==
|
||||
|
||||
"@github/details-menu-element@^1.0.12":
|
||||
version "1.0.13"
|
||||
resolved "https://registry.yarnpkg.com/@github/details-menu-element/-/details-menu-element-1.0.13.tgz#d62263077b16bc7edc386e7b23f0ce41af1301b4"
|
||||
integrity sha512-gMkii86w/oUP5dq8yOWZn1sgbgtFj3AYETxxtpsqRggZktgd8te4+npAn4Hm+936c/lxmEzXqfjARL/CzGR4+w==
|
||||
|
||||
"@github/image-crop-element@^5.0.0":
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@github/image-crop-element/-/image-crop-element-5.0.0.tgz#6ae2c31f1e7dc355c41c3140554fb76ca7a71ef7"
|
||||
integrity sha512-Vgm2OwWAs1ESoib/t5sjxsAYo6YTOxxAjWDRxswX7qrqoyCejTZ3hshdo4Ep5e+Mz/GVTZC3rdMtg06dk/eT4g==
|
||||
|
||||
"@github/mini-throttle@^2.1.0":
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@github/mini-throttle/-/mini-throttle-2.1.0.tgz#583a1d5e383caa21a1c067a649f15f7ab575dccf"
|
||||
integrity sha512-iEeR2OdVCPkdIPUszL8gJnKNu4MR8ANh7y0u/LPyaatYezgaWxUZEzhFntloqQq+HE6MZkFy+cl+xzCNuljOdw==
|
||||
|
||||
"@github/tab-container-element@^3.1.2":
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@github/tab-container-element/-/tab-container-element-3.2.0.tgz#d2d33da09ee3d7f4245a9f77479fe4969b137ae5"
|
||||
integrity sha512-to5ZJuywKK3KX53X1ifOcWjvUTQcBGdQ6Qkhm8L97xQ3ovICag1048M3YMpc+QSdr8xWeCBMnLeMnENqotB0Og==
|
||||
|
||||
"@github/time-elements@^3.1.2":
|
||||
version "3.6.0"
|
||||
resolved "https://registry.yarnpkg.com/@github/time-elements/-/time-elements-3.6.0.tgz#c61cbab56e9defd3faa3f24bd87afac00deeccd4"
|
||||
integrity sha512-MRt9TJztej6idLMvmuZbWc75TJrpl+1kgxWPFzCti4Md7kFtOFTRjXSGKmpc4vFT1NR3SgjHqTfI2Cnr9dJ7Wg==
|
||||
|
||||
"@graphql-tools/batch-execute@^7.1.2":
|
||||
version "7.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@graphql-tools/batch-execute/-/batch-execute-7.1.2.tgz#35ba09a1e0f80f34f1ce111d23c40f039d4403a0"
|
||||
@ -2159,6 +2206,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@primer/behaviors/-/behaviors-1.1.3.tgz#4945f79c39f8b4495ec868b053264830f687c7bc"
|
||||
integrity sha512-WpCcjAkXG7Lv3ZbaCUgASWKHnCi/pmuSEiyTmHHb6f5xhwk1mliixNL5ZZHtDN6RCcT3VnXUsyek4GopG2lbZQ==
|
||||
|
||||
"@primer/behaviors@^1.2.0":
|
||||
version "1.3.1"
|
||||
resolved "https://registry.yarnpkg.com/@primer/behaviors/-/behaviors-1.3.1.tgz#febae28e5f7824f1fa547389b3ff8563e171da58"
|
||||
integrity sha512-aMRDUQ350lk0FxtL5gJWPFHHOSSzDbJ6uNJVIt8XSqiGe1pxuW5mVVfrEp1uvzZ0pCHkCdm9fycjnfOeMeIrOQ==
|
||||
|
||||
"@primer/component-metadata@^0.5.1":
|
||||
version "0.5.1"
|
||||
resolved "https://registry.yarnpkg.com/@primer/component-metadata/-/component-metadata-0.5.1.tgz#2f41dcc0ff9fcc9ad16c9241a20abdf86ba8468b"
|
||||
@ -2309,6 +2361,21 @@
|
||||
history "^5.0.0"
|
||||
styled-system "^5.1.5"
|
||||
|
||||
"@primer/view-components@^0.0.112":
|
||||
version "0.0.112"
|
||||
resolved "https://registry.yarnpkg.com/@primer/view-components/-/view-components-0.0.112.tgz#fe469883c8e2d4da3aba8e17002890b081ab6cd7"
|
||||
integrity sha512-YWvZkEy6pQSfA3kcY5NVYGxR/mFmrbhufLhp/XYuXkf1Uoj1AEa4FESfiPqJhkIomZh5o2B4XAwBCqPsJie9nA==
|
||||
dependencies:
|
||||
"@github/auto-complete-element" "^3.3.4"
|
||||
"@github/catalyst" "^1.6.0"
|
||||
"@github/clipboard-copy-element" "^1.1.2"
|
||||
"@github/details-menu-element" "^1.0.12"
|
||||
"@github/image-crop-element" "^5.0.0"
|
||||
"@github/mini-throttle" "^2.1.0"
|
||||
"@github/tab-container-element" "^3.1.2"
|
||||
"@github/time-elements" "^3.1.2"
|
||||
"@primer/behaviors" "^1.2.0"
|
||||
|
||||
"@radix-ui/react-polymorphic@0.0.14", "@radix-ui/react-polymorphic@^0.0.14":
|
||||
version "0.0.14"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz#fc6cefee6686db8c5a7ff14c8c1b9b5abdee325b"
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@primer/primitives": "^7.9.0",
|
||||
"@primer/view-components": "^0.0.111"
|
||||
"@primer/view-components": "^0.0.112"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@changesets/changelog-github": "0.4.6",
|
||||
|
||||
@ -1,155 +1 @@
|
||||
// stylelint-disable selector-max-type, no-duplicate-selectors
|
||||
|
||||
// Default flash
|
||||
.flash:not(.Banner) {
|
||||
position: relative;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 20px $spacer-3;
|
||||
border-style: $border-style;
|
||||
border-width: $border-width;
|
||||
border-radius: $border-radius;
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.octicon {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Contain the flash messages
|
||||
.flash-messages {
|
||||
margin-bottom: $spacer-4;
|
||||
}
|
||||
|
||||
// Close button
|
||||
.flash-close:not(.Banner-close) {
|
||||
float: right;
|
||||
padding: $spacer-3;
|
||||
margin: -$spacer-3;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
// Undo `<button>` styles
|
||||
background: none;
|
||||
border: 0;
|
||||
appearance: none;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.octicon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Action button
|
||||
.flash-action:not(.Banner-actions) {
|
||||
float: right;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -3px;
|
||||
margin-left: $spacer-4;
|
||||
background-clip: padding-box;
|
||||
|
||||
&.btn .octicon {
|
||||
margin-right: $spacer-1;
|
||||
color: var(--color-fg-muted);
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
background-clip: border-box;
|
||||
|
||||
.octicon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Color variations
|
||||
//
|
||||
|
||||
.flash:not(.Banner) {
|
||||
color: var(--color-fg-default);
|
||||
background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
|
||||
border-color: var(--color-accent-muted);
|
||||
|
||||
.octicon {
|
||||
color: var(--color-accent-fg);
|
||||
}
|
||||
}
|
||||
|
||||
.flash-warn:not(.Banner) {
|
||||
color: var(--color-fg-default);
|
||||
background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
|
||||
border-color: var(--color-attention-muted);
|
||||
|
||||
.octicon {
|
||||
color: var(--color-attention-fg);
|
||||
}
|
||||
}
|
||||
|
||||
.flash-error:not(.Banner) {
|
||||
color: var(--color-fg-default);
|
||||
background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
|
||||
border-color: var(--color-danger-muted);
|
||||
|
||||
.octicon {
|
||||
color: var(--color-danger-fg);
|
||||
}
|
||||
}
|
||||
|
||||
.flash-success:not(.Banner) {
|
||||
color: var(--color-fg-default);
|
||||
background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
|
||||
border-color: var(--color-success-muted);
|
||||
|
||||
.octicon {
|
||||
color: var(--color-success-fg);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Layout variations
|
||||
//
|
||||
|
||||
.flash-full:not(.Banner) {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -1px;
|
||||
border-width: $border-width 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// A banner rendered at the top of the page.
|
||||
.flash-banner {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 90;
|
||||
width: 100%;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Makes sure the background is opaque to cover any content underneath
|
||||
.flash-full,
|
||||
.flash-banner {
|
||||
background-color: var(--color-canvas-default);
|
||||
}
|
||||
|
||||
// FIXME deprecate this
|
||||
.warning {
|
||||
padding: $em-spacer-5;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 0.8em;
|
||||
font-weight: $font-weight-bold;
|
||||
background-color: var(--color-attention-subtle);
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/beta/flash';
|
||||
|
||||
@ -1,118 +1 @@
|
||||
// This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796
|
||||
// AutoComplete relies on FormControl, Overlay and ActionList CSS
|
||||
|
||||
// Stacked label (default)
|
||||
.autocomplete-label-stacked {
|
||||
display: block;
|
||||
margin-bottom: $spacer-2 * 0.75;
|
||||
}
|
||||
|
||||
// Inline label (non-default)
|
||||
.autocomplete-label-inline {
|
||||
display: inline;
|
||||
margin-right: $spacer-2 * 0.75;
|
||||
}
|
||||
|
||||
// Switch to stacked at smaller viewport
|
||||
@media (max-width: $width-sm) {
|
||||
.autocomplete-label-inline {
|
||||
display: block;
|
||||
margin-bottom: $spacer-2 * 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for the input and result elements to ensure alignment
|
||||
.autocomplete-body {
|
||||
position: relative;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
// Wrapper and conditional styles for when an icon is added
|
||||
.autocomplete-embedded-icon-wrap {
|
||||
display: inline-flex;
|
||||
padding: $spacer-1 $spacer-2;
|
||||
align-items: center;
|
||||
|
||||
&:focus-within {
|
||||
border-color: var(--color-accent-fg);
|
||||
|
||||
@include focusBoxShadowInset;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
padding: 0;
|
||||
margin-left: $spacer-2;
|
||||
// stylelint-disable-next-line
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// A pop up list of items used to show autocompleted results
|
||||
.autocomplete-results {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
width: max-content;
|
||||
min-width: 100%;
|
||||
max-height: 20em;
|
||||
overflow-y: auto;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 13px;
|
||||
list-style: none;
|
||||
background: var(--color-canvas-overlay);
|
||||
border: $border-width $border-style var(--color-border-default);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: var(--color-shadow-medium);
|
||||
}
|
||||
|
||||
// One of the items that appears within an autocomplete group
|
||||
// Bold black text on white background
|
||||
|
||||
.autocomplete-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $spacer-1 $spacer-2;
|
||||
overflow: hidden;
|
||||
font-weight: $font-weight-bold;
|
||||
color: var(--color-fg-default);
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background-color: var(--color-canvas-overlay);
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-fg-on-emphasis);
|
||||
text-decoration: none;
|
||||
background-color: var(--color-accent-emphasis);
|
||||
|
||||
// Inherit color on all child elements to ensure enough contrast
|
||||
* {
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&[aria-selected='true'],
|
||||
&.navigation-focus {
|
||||
color: var(--color-fg-on-emphasis);
|
||||
text-decoration: none;
|
||||
background-color: var(--color-accent-emphasis);
|
||||
|
||||
// Inherit color on all child elements to ensure enough contrast
|
||||
* {
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/alpha/auto_complete';
|
||||
|
||||
@ -1,149 +1 @@
|
||||
// Stacked avatars can be used to show who is participating in thread when
|
||||
// there is limited space available.
|
||||
|
||||
.AvatarStack {
|
||||
position: relative;
|
||||
min-width: 26px;
|
||||
height: 20px;
|
||||
|
||||
.AvatarStack-body {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&.AvatarStack--two {
|
||||
min-width: 36px;
|
||||
}
|
||||
|
||||
&.AvatarStack--three-plus {
|
||||
min-width: 46px;
|
||||
}
|
||||
}
|
||||
|
||||
.AvatarStack-body {
|
||||
display: flex;
|
||||
background: var(--color-canvas-default);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 100px;
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
box-sizing: content-box;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: -11px;
|
||||
background-color: var(--color-canvas-default);
|
||||
border-right: $border-width $border-style var(--color-canvas-default);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: $border-radius-1;
|
||||
box-shadow: none;
|
||||
transition: margin 0.1s ease-in-out;
|
||||
|
||||
&:first-child {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
z-index: 1;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
// stylelint-disable selector-max-type
|
||||
img {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: $border-radius-1;
|
||||
}
|
||||
// stylelint-enable selector-max-type
|
||||
|
||||
// Account for 4+ avatars
|
||||
&:nth-child(n + 4) {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.avatar {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.avatar:nth-child(n + 4) {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.avatar-more {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar.avatar-more {
|
||||
z-index: 1;
|
||||
margin-right: 0;
|
||||
background: var(--color-canvas-subtle);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 20px;
|
||||
content: '';
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2px;
|
||||
outline: $border-width $border-style var(--color-canvas-default);
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 17px;
|
||||
background: var(--color-avatar-stack-fade-more);
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 14px;
|
||||
background: var(--color-avatar-stack-fade);
|
||||
}
|
||||
}
|
||||
|
||||
// Right aligned variation
|
||||
|
||||
.AvatarStack--right {
|
||||
.AvatarStack-body {
|
||||
right: 0;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
&:hover .avatar {
|
||||
margin-right: 0;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.avatar:not(:last-child) {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar.avatar-more {
|
||||
background: var(--color-avatar-stack-fade);
|
||||
|
||||
&::before {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
width: 2px;
|
||||
background: var(--color-canvas-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-right: 0;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: -11px;
|
||||
border-right: 0;
|
||||
border-left: $border-width $border-style var(--color-canvas-default);
|
||||
}
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/beta/avatar_stack';
|
||||
|
||||
@ -1,48 +1 @@
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
overflow: hidden; // Ensure page layout in Firefox should images fail to load
|
||||
line-height: $lh-condensed-ultra;
|
||||
vertical-align: middle;
|
||||
background-color: var(--color-avatar-bg); // adds opaque bg to transparent avatars
|
||||
border-radius: $border-radius;
|
||||
flex-shrink: 0;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 1px var(--color-avatar-border);
|
||||
}
|
||||
|
||||
.avatar-link {
|
||||
float: left;
|
||||
line-height: $lh-condensed-ultra;
|
||||
}
|
||||
|
||||
// User for example on /stars and /user for grids of avatars
|
||||
.avatar-group-item {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
// Border radius
|
||||
|
||||
.avatar-1,
|
||||
.avatar-2,
|
||||
.avatar-small {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: $border-radius-1;
|
||||
}
|
||||
|
||||
// Sizes
|
||||
|
||||
@mixin avatar-size( $size ) {
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
.avatar-1 { @include avatar-size( $size-1 ); }
|
||||
.avatar-2 { @include avatar-size( $size-2 ); }
|
||||
.avatar-3 { @include avatar-size( $size-3 ); }
|
||||
.avatar-4 { @include avatar-size( $size-4 ); }
|
||||
.avatar-5 { @include avatar-size( $size-5 ); }
|
||||
.avatar-6 { @include avatar-size( $size-6 ); }
|
||||
.avatar-7 { @include avatar-size( $size-7 ); }
|
||||
.avatar-8 { @include avatar-size( $size-8 ); }
|
||||
@import '@primer/view-components/app/components/primer/beta/avatar';
|
||||
|
||||
1
src/blankslate/blankslate.scss
Normal file
1
src/blankslate/blankslate.scss
Normal file
@ -0,0 +1 @@
|
||||
@import '@primer/view-components/app/components/primer/beta/blankslate';
|
||||
@ -1 +1,2 @@
|
||||
@import '@primer/view-components/app/components/primer/beta/blankslate';
|
||||
@import '../support/index.scss';
|
||||
@import './blankslate.scss';
|
||||
|
||||
290
src/box/box.scss
290
src/box/box.scss
@ -1,289 +1 @@
|
||||
// Box
|
||||
// Intended to replace simple-box, boxed-group, and table-list
|
||||
|
||||
.Box {
|
||||
background-color: var(--color-canvas-default);
|
||||
border-color: var(--color-border-default);
|
||||
border-style: $border-style;
|
||||
border-width: $border-width;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
// Box padding density options
|
||||
.Box--condensed {
|
||||
line-height: $lh-condensed;
|
||||
|
||||
.Box-header {
|
||||
padding: $spacer-2 $spacer-3;
|
||||
}
|
||||
|
||||
.Box-body {
|
||||
padding: $spacer-2 $spacer-3;
|
||||
}
|
||||
|
||||
.Box-footer {
|
||||
padding: $spacer-2 $spacer-3;
|
||||
}
|
||||
|
||||
.Box-btn-octicon {
|
||||
&.btn-octicon {
|
||||
padding: $spacer-2 $spacer-3;
|
||||
margin: (-$spacer-2) (-$spacer-3);
|
||||
line-height: $lh-condensed;
|
||||
}
|
||||
}
|
||||
|
||||
.Box-row {
|
||||
padding: $spacer-2 $spacer-3;
|
||||
}
|
||||
}
|
||||
|
||||
.Box--spacious {
|
||||
.Box-header {
|
||||
padding: $spacer-4;
|
||||
line-height: $lh-condensed;
|
||||
}
|
||||
|
||||
.Box-title {
|
||||
font-size: $h3-size;
|
||||
}
|
||||
|
||||
.Box-body {
|
||||
padding: $spacer-4;
|
||||
}
|
||||
|
||||
.Box-footer {
|
||||
padding: $spacer-4;
|
||||
}
|
||||
|
||||
.Box-btn-octicon {
|
||||
&.btn-octicon {
|
||||
padding: $spacer-4;
|
||||
margin: (-$spacer-4) (-$spacer-4);
|
||||
}
|
||||
}
|
||||
|
||||
.Box-row {
|
||||
padding: $spacer-4;
|
||||
}
|
||||
}
|
||||
|
||||
.Box-header {
|
||||
padding: $spacer-3;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin: (-$border-width) (-$border-width) 0;
|
||||
background-color: var(--color-canvas-subtle);
|
||||
border-color: var(--color-border-default);
|
||||
border-style: $border-style;
|
||||
border-width: $border-width;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
.Box-title {
|
||||
font-size: $body-font-size;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.Box-body {
|
||||
padding: $spacer-3;
|
||||
border-bottom: $border-width $border-style var(--color-border-default);
|
||||
|
||||
// Ensures bottom-border doesn't poke out when .Box-body used without box-footer
|
||||
&:last-of-type {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: -$border-width;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
// Box rows
|
||||
.Box-row {
|
||||
padding: $spacer-3;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -1px;
|
||||
list-style-type: none; // To account for applying Box component to a list
|
||||
border-top-color: var(--color-border-muted);
|
||||
border-top-style: $border-style;
|
||||
border-top-width: $border-width;
|
||||
|
||||
&:first-of-type {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
|
||||
// Adds a blue vertical line to the left of the row
|
||||
// For indicating a row item is unread
|
||||
&.Box-row--unread,
|
||||
// .unread to be deprecated with .Box-row-unread
|
||||
&.unread {
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 2px 0 0 var(--color-accent-emphasis);
|
||||
}
|
||||
|
||||
&.navigation-focus {
|
||||
// Focus styles for when drag icon
|
||||
.Box-row--drag-button {
|
||||
color: var(--color-accent-fg);
|
||||
cursor: grab;
|
||||
opacity: 100;
|
||||
}
|
||||
|
||||
// Grabbing while row is dragged
|
||||
&.is-dragging .Box-row--drag-button {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
// Row dragging styles
|
||||
&.sortable-chosen {
|
||||
background-color: var(--color-canvas-subtle);
|
||||
}
|
||||
|
||||
// Makes dragging row background gray
|
||||
&.sortable-ghost {
|
||||
background-color: var(--color-canvas-subtle);
|
||||
|
||||
// Hides contents of row while dragging so row looks solid gray
|
||||
.Box-row--drag-hide {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Box-row--focus-gray {
|
||||
&.navigation-focus {
|
||||
background-color: var(--color-canvas-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
.Box-row--focus-blue {
|
||||
&.navigation-focus {
|
||||
background-color: var(--color-accent-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
.Box-row--hover-gray {
|
||||
&:hover {
|
||||
background-color: var(--color-canvas-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
.Box-row--hover-blue {
|
||||
&:hover {
|
||||
background-color: var(--color-accent-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
// Optional link style
|
||||
// Makes links on mobile blue since they don't have hover state,
|
||||
// and links are dark-gray with blue hover on desktop.
|
||||
.Box-row-link {
|
||||
@include breakpoint(md) {
|
||||
color: var(--color-fg-default);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-accent-fg);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Optional drag icon styles for reordering items
|
||||
// Focus styles included in .Box-row above
|
||||
.Box-row--drag-button {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.Box-footer {
|
||||
padding: $spacer-3;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: -1px; // prevents double border when used with .Box-body
|
||||
border-top-color: var(--color-border-default);
|
||||
border-top-style: $border-style;
|
||||
border-top-width: $border-width;
|
||||
border-radius: 0 0 $border-radius $border-radius;
|
||||
}
|
||||
|
||||
// Option for a box with scrolling content
|
||||
.Box--scrollable {
|
||||
max-height: 324px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
// Box themes
|
||||
|
||||
.Box--blue {
|
||||
border-color: var(--color-accent-muted);
|
||||
|
||||
.Box-header {
|
||||
background-color: var(--color-accent-subtle);
|
||||
border-color: var(--color-accent-muted);
|
||||
}
|
||||
|
||||
.Box-body {
|
||||
border-color: var(--color-accent-muted);
|
||||
}
|
||||
|
||||
.Box-row {
|
||||
border-color: var(--color-accent-muted);
|
||||
}
|
||||
|
||||
.Box-footer {
|
||||
border-color: var(--color-accent-muted);
|
||||
}
|
||||
}
|
||||
|
||||
// Applies and red border to the outside of the box,
|
||||
// but not to the border separating rows.
|
||||
.Box--danger {
|
||||
border-color: var(--color-danger-emphasis);
|
||||
|
||||
.Box-row {
|
||||
&:first-of-type {
|
||||
border-color: var(--color-danger-emphasis);
|
||||
}
|
||||
}
|
||||
|
||||
.Box-body {
|
||||
&:last-of-type {
|
||||
border-color: var(--color-danger-emphasis);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Box-header--blue {
|
||||
background-color: var(--color-accent-subtle);
|
||||
border-color: var(--color-accent-muted);
|
||||
}
|
||||
|
||||
// Box row highlight themes
|
||||
|
||||
.Box-row--yellow {
|
||||
background-color: var(--color-attention-subtle);
|
||||
}
|
||||
|
||||
.Box-row--blue {
|
||||
background-color: var(--color-accent-subtle);
|
||||
}
|
||||
|
||||
.Box-row--gray {
|
||||
background-color: var(--color-canvas-subtle);
|
||||
}
|
||||
|
||||
//Box with btn-octicon
|
||||
.Box-btn-octicon {
|
||||
// Increase specificity when btn-octicon is used because comes after .Box in the cascade
|
||||
&.btn-octicon {
|
||||
padding: $spacer-3 $spacer-3;
|
||||
margin: (-$spacer-3) (-$spacer-3);
|
||||
line-height: $lh-default; // override btn-octicon line-height
|
||||
}
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/beta/border_box';
|
||||
|
||||
@ -1,33 +1 @@
|
||||
.breadcrumb-item {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: -0.35em;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
height: 0.8em;
|
||||
margin: 0 $em-spacer-5;
|
||||
content: '';
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-right: 0.1em $border-style var(--color-fg-muted);
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-item-selected,
|
||||
.breadcrumb-item[aria-current]:not([aria-current='false']) {
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable selector-max-type
|
||||
.breadcrumb-item-selected a {
|
||||
color: var(--color-fg-default);
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/beta/breadcrumbs';
|
||||
|
||||
@ -1,270 +1 @@
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-caret {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
content: '';
|
||||
border-style: $border-style;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-width: $spacer-1 $spacer-1 0;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
// Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which
|
||||
// way the menu should render from the element triggering it.
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
width: 160px;
|
||||
padding-top: $spacer-1;
|
||||
padding-bottom: $spacer-1;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-top: 2px;
|
||||
list-style: none;
|
||||
background-color: var(--color-canvas-overlay);
|
||||
background-clip: padding-box;
|
||||
border: $border-width $border-style var(--color-border-default);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: var(--color-shadow-large);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
content: '';
|
||||
}
|
||||
|
||||
// caret border
|
||||
&::before {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $spacer-2 $border-style transparent;
|
||||
border-bottom-color: var(--color-border-default);
|
||||
}
|
||||
|
||||
// caret background (should match dropdown background)
|
||||
&::after {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: 7px $border-style transparent;
|
||||
border-bottom-color: var(--color-canvas-overlay);
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line selector-max-type
|
||||
> ul {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-no-overflow {
|
||||
width: auto;
|
||||
|
||||
.dropdown-item {
|
||||
padding: $spacer-1 $spacer-3;
|
||||
overflow: visible;
|
||||
text-overflow: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown items (can be links or buttons)
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
padding: $spacer-1 $spacer-2 $spacer-1 $spacer-3;
|
||||
overflow: hidden;
|
||||
color: var(--color-fg-default);
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-fg-on-emphasis);
|
||||
text-decoration: none;
|
||||
background-color: var(--color-accent-emphasis);
|
||||
|
||||
> .octicon {
|
||||
color: inherit;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[class*='color-fg-'] {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
> .Label {
|
||||
color: inherit !important;
|
||||
border-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-link {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-signout {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
display: block;
|
||||
height: 0;
|
||||
margin: $spacer-2 0;
|
||||
border-top: $border-width $border-style var(--color-border-default);
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
padding: $spacer-1 $spacer-3;
|
||||
font-size: $h6-size;
|
||||
color: var(--color-fg-muted);
|
||||
}
|
||||
|
||||
.dropdown-item[aria-checked='false'] .octicon-check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Directional classes
|
||||
//
|
||||
// Move the menu and the caret attached to it. Requires at least one of these on
|
||||
// the `.dropdown-menu` element.
|
||||
|
||||
.dropdown-menu-w {
|
||||
top: 0;
|
||||
right: 100%;
|
||||
left: auto;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
margin-right: $spacer-2;
|
||||
|
||||
&::before {
|
||||
top: 10px;
|
||||
right: -$spacer-3;
|
||||
left: auto;
|
||||
border-color: transparent;
|
||||
border-left-color: var(--color-border-default);
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 11px;
|
||||
right: -14px;
|
||||
left: auto;
|
||||
border-color: transparent;
|
||||
border-left-color: var(--color-canvas-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-e {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
margin-left: $spacer-2;
|
||||
|
||||
&::before {
|
||||
top: 10px;
|
||||
left: -$spacer-3;
|
||||
border-color: transparent;
|
||||
border-right-color: var(--color-border-default);
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 11px;
|
||||
left: -14px;
|
||||
border-color: transparent;
|
||||
border-right-color: var(--color-canvas-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-ne {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: 3px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
top: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: -$spacer-2;
|
||||
left: 9px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top: $spacer-2 $border-style var(--color-border-default);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-right: $spacer-2 $border-style transparent;
|
||||
border-bottom: 0;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-left: $spacer-2 $border-style transparent;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -7px;
|
||||
left: 10px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top: 7px $border-style var(--color-canvas-overlay);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-right: 7px $border-style transparent;
|
||||
border-bottom: 0;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-left: 7px $border-style transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-s {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
transform: translateX(50%);
|
||||
|
||||
&::before {
|
||||
top: -$spacer-3;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: -14px;
|
||||
right: 50%;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-sw {
|
||||
right: 0;
|
||||
left: auto;
|
||||
|
||||
&::before {
|
||||
top: -$spacer-3;
|
||||
right: 9px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: -14px;
|
||||
right: 10px;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-se {
|
||||
&::before {
|
||||
top: -$spacer-3;
|
||||
left: 9px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: -14px;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/alpha/dropdown';
|
||||
|
||||
@ -1,36 +1 @@
|
||||
// Counters are rounded-corner badges for numbers
|
||||
.Counter {
|
||||
display: inline-block;
|
||||
min-width: $size-2; // makes sure it's a circle with just one digit
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 0 6px;
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-semibold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: $size-2 - 2px; // remove borders
|
||||
color: var(--color-fg-default);
|
||||
text-align: center;
|
||||
background-color: var(--color-neutral-muted);
|
||||
border: $border-width $border-style var(--color-counter-border);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2em;
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.octicon {
|
||||
vertical-align: text-top;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.Counter--primary {
|
||||
color: var(--color-fg-on-emphasis);
|
||||
background-color: var(--color-neutral-emphasis);
|
||||
}
|
||||
|
||||
.Counter--secondary {
|
||||
color: var(--color-fg-muted);
|
||||
background-color: var(--color-neutral-subtle);
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/beta/counter';
|
||||
|
||||
@ -1,92 +1 @@
|
||||
// Labels
|
||||
|
||||
// Provide a wrapper to ensure labels stick together
|
||||
.labels {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Default label
|
||||
|
||||
.label, // TODO: Deprecate
|
||||
.Label {
|
||||
@include labels-base;
|
||||
|
||||
border-color: var(--color-border-default);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Large
|
||||
|
||||
.Label--large {
|
||||
@include labels-large;
|
||||
}
|
||||
|
||||
// Inline
|
||||
|
||||
.Label--inline {
|
||||
@include labels--inline;
|
||||
}
|
||||
|
||||
// Contrast
|
||||
|
||||
.Label--primary {
|
||||
color: var(--color-fg-default);
|
||||
border-color: var(--color-neutral-emphasis);
|
||||
}
|
||||
|
||||
.Label--secondary {
|
||||
color: var(--color-fg-muted);
|
||||
border-color: var(--color-border-default);
|
||||
}
|
||||
|
||||
// Colors
|
||||
|
||||
.Label--info, // TODO: deprecate
|
||||
.Label--accent {
|
||||
color: var(--color-accent-fg);
|
||||
border-color: var(--color-accent-emphasis);
|
||||
}
|
||||
|
||||
.Label--success {
|
||||
color: var(--color-success-fg);
|
||||
border-color: var(--color-success-emphasis);
|
||||
}
|
||||
|
||||
.Label--warning, // TODO: deprecate
|
||||
.Label--attention {
|
||||
color: var(--color-attention-fg);
|
||||
border-color: var(--color-attention-emphasis);
|
||||
}
|
||||
|
||||
.Label--severe {
|
||||
color: var(--color-severe-fg);
|
||||
border-color: var(--color-severe-emphasis);
|
||||
}
|
||||
|
||||
.Label--danger {
|
||||
color: var(--color-danger-fg);
|
||||
border-color: var(--color-danger-emphasis);
|
||||
}
|
||||
|
||||
.Label--open {
|
||||
color: var(--color-open-fg);
|
||||
border-color: var(--color-open-emphasis);
|
||||
}
|
||||
|
||||
.Label--closed {
|
||||
color: var(--color-closed-fg);
|
||||
border-color: var(--color-closed-emphasis);
|
||||
}
|
||||
|
||||
.Label--done {
|
||||
color: var(--color-done-fg);
|
||||
border-color: var(--color-done-emphasis);
|
||||
}
|
||||
|
||||
.Label--sponsors {
|
||||
color: var(--color-sponsors-fg);
|
||||
border-color: var(--color-sponsors-emphasis);
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/beta/label';
|
||||
|
||||
@ -1,56 +1 @@
|
||||
// A rounded corner box containing a label "open" or "closed"
|
||||
|
||||
// Default 32px
|
||||
// Small 24px
|
||||
|
||||
.state, // TODO: Deprecate
|
||||
.State {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 5px 12px;
|
||||
font-size: $body-font-size;
|
||||
font-weight: $font-weight-semibold;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
.state, // TODO: Deprecate
|
||||
.State,
|
||||
.State--draft {
|
||||
color: var(--color-fg-on-emphasis);
|
||||
background-color: var(--color-neutral-emphasis);
|
||||
border: $border-width $border-style transparent;
|
||||
}
|
||||
|
||||
.State--open {
|
||||
color: var(--color-fg-on-emphasis);
|
||||
background-color: var(--color-open-emphasis);
|
||||
}
|
||||
|
||||
.State--merged {
|
||||
color: var(--color-fg-on-emphasis);
|
||||
background-color: var(--color-done-emphasis);
|
||||
}
|
||||
|
||||
.State--closed {
|
||||
color: var(--color-fg-on-emphasis);
|
||||
background-color: var(--color-closed-emphasis);
|
||||
}
|
||||
|
||||
// Small
|
||||
|
||||
.State--small {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding: 0 10px;
|
||||
font-size: $font-size-small;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: $size-3;
|
||||
|
||||
.octicon {
|
||||
width: 1em; // Ensures different icons don't change State indicator width
|
||||
}
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/state_component';
|
||||
|
||||
@ -1,119 +1 @@
|
||||
// Side menu
|
||||
//
|
||||
// A menu on the side of a page, defaults to left side. e.g. github.com/about
|
||||
|
||||
.menu {
|
||||
margin-bottom: $spacer-3;
|
||||
list-style: none;
|
||||
background-color: var(--color-canvas-default);
|
||||
border: $border-width $border-style var(--color-border-default);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: $spacer-2 $spacer-3;
|
||||
color: var(--color-fg-default);
|
||||
border-bottom: $border-width $border-style var(--color-border-muted);
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
|
||||
&::before {
|
||||
border-top-left-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
|
||||
&::before {
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: var(--color-neutral-subtle);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--color-canvas-subtle);
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&[aria-selected='true'],
|
||||
&[aria-current]:not([aria-current='false']) {
|
||||
cursor: default;
|
||||
background-color: var(--color-menu-bg-active);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
content: '';
|
||||
background-color: var(--color-primer-border-active);
|
||||
}
|
||||
}
|
||||
|
||||
.octicon {
|
||||
width: 16px;
|
||||
margin-right: $spacer-2;
|
||||
color: var(--color-fg-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.Counter {
|
||||
float: right;
|
||||
margin-left: $spacer-1;
|
||||
}
|
||||
|
||||
.menu-warning {
|
||||
float: right;
|
||||
color: var(--color-attention-fg);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
float: left;
|
||||
margin-right: $spacer-1;
|
||||
}
|
||||
|
||||
&.alert {
|
||||
.Counter {
|
||||
color: var(--color-danger-fg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-heading {
|
||||
display: block;
|
||||
padding: $spacer-2 $spacer-3;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: inherit;
|
||||
font-weight: $font-weight-bold;
|
||||
color: var(--color-fg-default);
|
||||
border-bottom: $border-width $border-style var(--color-border-muted);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-bottom-left-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/menu_component';
|
||||
|
||||
@ -1,104 +1 @@
|
||||
// Outer wrapper
|
||||
// stylelint-disable selector-max-type
|
||||
.tabnav {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer-3;
|
||||
border-bottom: $border-width $border-style var(--color-border-default);
|
||||
}
|
||||
|
||||
.tabnav-tabs {
|
||||
display: flex;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-bottom: -1px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.tabnav-tab {
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
padding: $spacer-2 $spacer-3;
|
||||
font-size: $h5-size;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 23px;
|
||||
color: var(--color-fg-muted);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
border: $border-width $border-style transparent;
|
||||
border-bottom: 0;
|
||||
transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
|
||||
|
||||
&.selected,
|
||||
&[aria-selected='true'],
|
||||
&[aria-current]:not([aria-current='false']) {
|
||||
color: var(--color-fg-default);
|
||||
background-color: var(--color-canvas-default); // cover bottom border
|
||||
border-color: var(--color-border-default);
|
||||
border-radius: $border-radius $border-radius 0 0;
|
||||
|
||||
.octicon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-fg-default);
|
||||
text-decoration: none;
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
border-radius: $border-radius $border-radius 0 0 !important;
|
||||
outline-offset: -6px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--color-fg-muted);
|
||||
}
|
||||
|
||||
.octicon {
|
||||
margin-right: $spacer-1;
|
||||
color: var(--color-fg-muted);
|
||||
}
|
||||
|
||||
.Counter {
|
||||
margin-left: $spacer-1;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// Tabnav extras
|
||||
//
|
||||
// Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
|
||||
// inline text or links.
|
||||
|
||||
.tabnav-extra {
|
||||
display: inline-block;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-top: 10px;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 10px;
|
||||
font-size: $font-size-small;
|
||||
color: var(--color-fg-muted);
|
||||
|
||||
> .octicon {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// When tabnav-extra are anchors
|
||||
// stylelint-disable-next-line selector-no-qualifying-type
|
||||
a.tabnav-extra:hover {
|
||||
color: var(--color-accent-fg);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Tabnav buttons
|
||||
//
|
||||
// For when there are multiple buttons, space them out appropriately. Requires
|
||||
// the buttons to be floated or inline-block.
|
||||
|
||||
.tabnav-btn {
|
||||
margin-left: $spacer-2;
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/alpha/tab_nav';
|
||||
|
||||
@ -1,136 +1 @@
|
||||
$nav-height: $spacer-3 * 3 !default; // 48px
|
||||
|
||||
.UnderlineNav {
|
||||
display: flex;
|
||||
min-height: $nav-height;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 -1px 0 var(--color-border-muted);
|
||||
-webkit-overflow-scrolling: auto;
|
||||
justify-content: space-between;
|
||||
|
||||
.Counter {
|
||||
margin-left: $spacer-2;
|
||||
color: var(--color-fg-default);
|
||||
background-color: var(--color-neutral-muted);
|
||||
|
||||
&--primary {
|
||||
color: var(--color-fg-on-emphasis);
|
||||
background-color: var(--color-neutral-emphasis);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.UnderlineNav-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacer-2;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.UnderlineNav-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 0 $spacer-2;
|
||||
font-size: $body-font-size;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
line-height: 30px;
|
||||
color: var(--color-fg-default);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-radius: $border-radius;
|
||||
align-items: center;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
color: var(--color-fg-default);
|
||||
text-decoration: none;
|
||||
border-bottom-color: var(--color-neutral-muted);
|
||||
outline-offset: -2px;
|
||||
transition: border-bottom-color 0.12s ease-out;
|
||||
}
|
||||
|
||||
// renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected
|
||||
[data-content]::before {
|
||||
display: block;
|
||||
height: 0;
|
||||
font-weight: $font-weight-bold;
|
||||
visibility: hidden;
|
||||
content: attr(data-content);
|
||||
}
|
||||
|
||||
// increase touch target area
|
||||
&::before {
|
||||
@include minTouchTarget($min-height: $nav-height);
|
||||
}
|
||||
|
||||
// hover state was "sticking" on mobile after click
|
||||
@media (pointer: fine) {
|
||||
&:hover {
|
||||
color: var(--color-fg-default);
|
||||
text-decoration: none;
|
||||
background: var(--color-action-list-item-default-hover-bg);
|
||||
transition: background 0.12s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&[role='tab'][aria-selected='true'],
|
||||
&[aria-current]:not([aria-current='false']) {
|
||||
font-weight: $font-weight-bold;
|
||||
color: var(--color-fg-default);
|
||||
border-bottom-color: var(--color-primer-border-active);
|
||||
|
||||
// current/selected underline
|
||||
&::after {
|
||||
position: absolute;
|
||||
right: 50%;
|
||||
// 48px total height / 2 (24px) + 1px
|
||||
bottom: calc(50% - 25px);
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
content: '';
|
||||
background: var(--color-primer-border-active);
|
||||
border-radius: $border-radius;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.UnderlineNav--right {
|
||||
justify-content: flex-end;
|
||||
|
||||
.UnderlineNav-actions {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.UnderlineNav-actions {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.UnderlineNav--full {
|
||||
display: block;
|
||||
|
||||
// required for underline to align with additional wrapper element
|
||||
.UnderlineNav-body {
|
||||
min-height: $nav-height;
|
||||
}
|
||||
}
|
||||
|
||||
.UnderlineNav-octicon {
|
||||
display: inline !important;
|
||||
margin-right: $spacer-2;
|
||||
color: var(--color-fg-muted);
|
||||
fill: var(--color-fg-muted);
|
||||
}
|
||||
|
||||
.UnderlineNav-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/alpha/underline_nav';
|
||||
|
||||
@ -1,226 +1 @@
|
||||
.Popover {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.Popover-message {
|
||||
position: relative;
|
||||
width: 232px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
background-color: var(--color-canvas-overlay);
|
||||
border: $border-width $border-style var(--color-border-default);
|
||||
border-radius: $border-radius;
|
||||
|
||||
// Carets
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
display: inline-block;
|
||||
content: '';
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: -$spacer-3;
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: -9px;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $spacer-2 $border-style transparent;
|
||||
border-bottom-color: var(--color-border-default);
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: -14px;
|
||||
margin-left: -$spacer-2;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: 7px $border-style transparent;
|
||||
border-bottom-color: var(--color-canvas-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
// No caret
|
||||
.Popover-message--no-caret {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Bottom-oriented carets
|
||||
.Popover-message--bottom,
|
||||
.Popover-message--bottom-right,
|
||||
.Popover-message--bottom-left {
|
||||
&::before,
|
||||
&::after {
|
||||
top: auto;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: -$spacer-3;
|
||||
border-top-color: var(--color-border-default);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: -14px;
|
||||
border-top-color: var(--color-canvas-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
// Top & Bottom: Right-oriented carets
|
||||
.Popover-message--top-right,
|
||||
.Popover-message--bottom-right {
|
||||
right: -9px;
|
||||
margin-right: 0;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
left: auto;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
// Top & Bottom: Left-oriented carets
|
||||
.Popover-message--top-left,
|
||||
.Popover-message--bottom-left {
|
||||
left: -9px;
|
||||
margin-left: 0;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
left: $spacer-4;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: $spacer-4 + 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Right- & Left-oriented carets
|
||||
.Popover-message--right,
|
||||
.Popover-message--right-top,
|
||||
.Popover-message--right-bottom,
|
||||
.Popover-message--left,
|
||||
.Popover-message--left-top,
|
||||
.Popover-message--left-bottom {
|
||||
&::before,
|
||||
&::after {
|
||||
top: 50%;
|
||||
left: auto;
|
||||
margin-left: 0;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-top: -($spacer-2 + 1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
margin-top: -$spacer-2;
|
||||
}
|
||||
}
|
||||
|
||||
// Right-oriented carets
|
||||
.Popover-message--right,
|
||||
.Popover-message--right-top,
|
||||
.Popover-message--right-bottom {
|
||||
&::before {
|
||||
right: -$spacer-3;
|
||||
border-left-color: var(--color-border-default);
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: -14px;
|
||||
border-left-color: var(--color-canvas-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
// Left-oriented carets
|
||||
.Popover-message--left,
|
||||
.Popover-message--left-top,
|
||||
.Popover-message--left-bottom {
|
||||
&::before {
|
||||
left: -$spacer-3;
|
||||
border-right-color: var(--color-border-default);
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: -14px;
|
||||
border-right-color: var(--color-canvas-overlay);
|
||||
}
|
||||
}
|
||||
|
||||
// Right & Left: Top-oriented carets
|
||||
.Popover-message--right-top,
|
||||
.Popover-message--left-top {
|
||||
&::before,
|
||||
&::after {
|
||||
top: $spacer-4;
|
||||
}
|
||||
}
|
||||
|
||||
// Right & Left: Bottom-oriented carets
|
||||
.Popover-message--right-bottom,
|
||||
.Popover-message--left-bottom {
|
||||
&::before,
|
||||
&::after {
|
||||
top: auto;
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: $spacer-3;
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: $spacer-3 + 1;
|
||||
}
|
||||
}
|
||||
|
||||
.Popover-message--large {
|
||||
@include breakpoint(sm) {
|
||||
min-width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive Popover
|
||||
// For < md it will show full-width anchored to the bottom
|
||||
|
||||
@media (max-width: ($width-md - 0.02px)) {
|
||||
.Popover {
|
||||
position: fixed;
|
||||
top: auto !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
.Popover-message {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
width: auto !important;
|
||||
margin: $spacer-2;
|
||||
}
|
||||
|
||||
// Increase tap area for touch input
|
||||
.Popover-message > .btn-octicon {
|
||||
padding: $spacer-2 + $spacer-1 !important;
|
||||
}
|
||||
|
||||
// Remove caret
|
||||
.Popover-message::after,
|
||||
.Popover-message::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/beta/popover';
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/base/size/size.css';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography.css';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/border.css';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints.css';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse.css';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine.css';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size.css';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport.css';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography.css';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/base/size/size';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/border';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport';
|
||||
@import '@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography';
|
||||
@import './temp-typography-tokens.scss';
|
||||
|
||||
@ -1,27 +1 @@
|
||||
// Progress
|
||||
|
||||
.Progress {
|
||||
display: flex;
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
background-color: var(--color-neutral-muted);
|
||||
border-radius: $border-radius;
|
||||
outline: 1px solid transparent; // Support Firefox custom colors
|
||||
}
|
||||
|
||||
.Progress--large {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.Progress--small {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.Progress-item {
|
||||
outline: 2px solid transparent; // Support Firefox custom colors
|
||||
}
|
||||
|
||||
.Progress-item + .Progress-item {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
margin-left: 2px;
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/beta/progress_bar';
|
||||
|
||||
@ -1,48 +1 @@
|
||||
// Subhead styles
|
||||
.Subhead {
|
||||
display: flex;
|
||||
padding-bottom: $spacer-2;
|
||||
margin-bottom: $spacer-3;
|
||||
border-bottom: $border-width $border-style var(--color-border-muted);
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-end; // Keep actions right aligned.
|
||||
}
|
||||
|
||||
// Modifier class to give a lot of breathing room between sections of content.
|
||||
.Subhead--spacious {
|
||||
margin-top: $spacer-6;
|
||||
}
|
||||
|
||||
// <h2> sized heading with normal font weight
|
||||
.Subhead-heading {
|
||||
font-size: $h2-size;
|
||||
font-weight: $font-weight-normal;
|
||||
flex: 1 1 auto;
|
||||
order: 0;
|
||||
}
|
||||
|
||||
// Make the text bold and red for dangerous content
|
||||
.Subhead-heading--danger {
|
||||
font-weight: $font-weight-bold;
|
||||
color: var(--color-danger-fg);
|
||||
}
|
||||
|
||||
// One-liner of supporting text
|
||||
.Subhead-description {
|
||||
font-size: $body-font-size;
|
||||
color: var(--color-fg-muted);
|
||||
flex: 1 100%;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
// Add 1 or 2 buttons to the right of the heading
|
||||
.Subhead-actions {
|
||||
margin: $spacer-1 0 $spacer-1 $spacer-1;
|
||||
align-self: center;
|
||||
justify-content: flex-end;
|
||||
order: 1;
|
||||
|
||||
+ .Subhead-description {
|
||||
margin-top: $spacer-1;
|
||||
}
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/subhead_component';
|
||||
|
||||
@ -1,94 +1 @@
|
||||
.TimelineItem {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: $spacer-3 0;
|
||||
margin-left: $spacer-3;
|
||||
|
||||
// The Timeline
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 2px;
|
||||
content: '';
|
||||
background-color: var(--color-border-muted);
|
||||
}
|
||||
|
||||
&:target .TimelineItem-badge {
|
||||
border-color: var(--color-accent-emphasis);
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0.2em var(--color-accent-muted);
|
||||
}
|
||||
}
|
||||
|
||||
.TimelineItem-badge {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: $spacer-5;
|
||||
height: $spacer-5;
|
||||
margin-right: $spacer-2;
|
||||
margin-left: -$spacer-3 + 1;
|
||||
color: var(--color-fg-muted);
|
||||
align-items: center;
|
||||
background-color: var(--color-timeline-badge-bg);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: 2px $border-style var(--color-canvas-default);
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--success {
|
||||
color: var(--color-fg-on-emphasis);
|
||||
background-color: var(--color-success-emphasis);
|
||||
border: $border-width $border-style transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.TimelineItem-body {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
margin-top: $spacer-1;
|
||||
color: var(--color-fg-muted);
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.TimelineItem-avatar {
|
||||
position: absolute;
|
||||
left: -($spacer-6 + $spacer-5);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.TimelineItem-break {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: $spacer-4;
|
||||
margin: 0;
|
||||
margin-bottom: -$spacer-3;
|
||||
margin-left: -($spacer-6 + $spacer-3);
|
||||
background-color: var(--color-canvas-default);
|
||||
border: 0;
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-top: 4px $border-style var(--color-border-default);
|
||||
}
|
||||
|
||||
.TimelineItem--condensed {
|
||||
padding-top: $spacer-1;
|
||||
padding-bottom: 0;
|
||||
|
||||
// TimelineItem--condensed is often grouped. (commits)
|
||||
&:last-child {
|
||||
padding-bottom: $spacer-3;
|
||||
}
|
||||
|
||||
.TimelineItem-badge {
|
||||
height: $spacer-3;
|
||||
margin-top: $spacer-2;
|
||||
margin-bottom: $spacer-2;
|
||||
color: var(--color-fg-muted);
|
||||
background-color: var(--color-canvas-default);
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/timeline_item_component';
|
||||
|
||||
@ -1,243 +1 @@
|
||||
// Catalyst in dotcom applies a display: block to all web component elements. This
|
||||
// rule overrides it so the status label and toggle switch are laid out correctly.
|
||||
.ToggleSwitch.ToggleSwitch {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.ToggleSwitch {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
gap: $spacer-2;
|
||||
|
||||
&:hover {
|
||||
.ToggleSwitch-knob {
|
||||
background-color: var(--color-btn-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.ToggleSwitch-knob {
|
||||
background-color: var(--color-btn-active-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ToggleSwitch--checked {
|
||||
.ToggleSwitch-statusOn {
|
||||
height: auto;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ToggleSwitch-statusOff {
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.ToggleSwitch-track {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: $spacer-8;
|
||||
height: $spacer-5;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: var(--color-switch-track-bg);
|
||||
border: $border-width $border-style var(--color-switch-track-border);
|
||||
border-radius: $border-radius;
|
||||
transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
|
||||
transition-duration: 80ms;
|
||||
transition-property: background-color, border-color;
|
||||
appearance: none;
|
||||
|
||||
&:focus,
|
||||
&:focus-visible {
|
||||
outline-offset: 0;
|
||||
}
|
||||
|
||||
@media (pointer: coarse) {
|
||||
&::before {
|
||||
@include minTouchTarget(calc($spacer-6 + $spacer-1));
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
transition: none;
|
||||
|
||||
* {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ToggleSwitch-track[aria-checked='true'][aria-disabled='true'] {
|
||||
background-color: var(--color-canvas-subtle);
|
||||
border-color: var(--color-border-subtle);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: var(--color-canvas-subtle);
|
||||
|
||||
// This is the most straightforward way of setting the knob's styles when the
|
||||
// switch is both checked and disabled.
|
||||
|
||||
// stylelint-disable-next-line selector-max-specificity
|
||||
.ToggleSwitch-knob {
|
||||
background-color: var(--color-switch-knob-checked-disabled-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.ToggleSwitch-knob {
|
||||
background-color: var(--color-switch-knob-checked-disabled-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.ToggleSwitch-track[aria-checked='true'] {
|
||||
background-color: var(--color-switch-track-checked-bg);
|
||||
border-color: var(--color-switch-track-checked-border);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-switch-track-checked-hover-bg);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--color-switch-track-checked-active-bg);
|
||||
}
|
||||
|
||||
.ToggleSwitch-knob {
|
||||
background-color: var(--color-switch-knob-checked-bg);
|
||||
border: 0;
|
||||
transform: translateX(calc(100% + 1px));
|
||||
}
|
||||
|
||||
.ToggleSwitch-lineIcon {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
.ToggleSwitch-circleIcon {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.ToggleSwitch-track[aria-disabled='true'] {
|
||||
cursor: not-allowed;
|
||||
background-color: var(--color-canvas-subtle);
|
||||
border-color: var(--color-border-subtle);
|
||||
transition-property: none;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
.ToggleSwitch-knob {
|
||||
background-color: var(--color-btn-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.ToggleSwitch-knob {
|
||||
border-color: var(--color-border-default);
|
||||
box-shadow: none;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: var(--color-btn-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.ToggleSwitch-lineIcon {
|
||||
color: var(--color-fg-subtle);
|
||||
}
|
||||
|
||||
.ToggleSwitch-circleIcon {
|
||||
color: var(--color-fg-subtle);
|
||||
}
|
||||
}
|
||||
|
||||
.ToggleSwitch-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ToggleSwitch-lineIcon {
|
||||
line-height: 0;
|
||||
color: var(--color-accent-fg);
|
||||
transition-duration: 80ms;
|
||||
transition-property: transform;
|
||||
transform: translateX(-100%);
|
||||
flex: 1 0 50%;
|
||||
}
|
||||
|
||||
.ToggleSwitch-circleIcon {
|
||||
line-height: 0;
|
||||
color: var(--color-fg-default);
|
||||
transition-duration: 80ms;
|
||||
transition-property: transform;
|
||||
transform: translateX(0);
|
||||
flex: 1 0 50%;
|
||||
}
|
||||
|
||||
.ToggleSwitch-knob {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
bottom: -1px;
|
||||
z-index: 1;
|
||||
width: 50%;
|
||||
background-color: var(--color-btn-bg);
|
||||
border: $border-width $border-style var(--color-switch-track-border);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);
|
||||
transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
|
||||
transition-duration: 80ms;
|
||||
transition-property: transform;
|
||||
transform: translateX(-1px);
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ToggleSwitch-status {
|
||||
position: relative;
|
||||
font-size: $body-font-size;
|
||||
line-height: $body-line-height;
|
||||
color: var(--color-fg-default);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ToggleSwitch--small {
|
||||
.ToggleSwitch-status {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
.ToggleSwitch-track {
|
||||
width: $spacer-7;
|
||||
height: $spacer-4;
|
||||
}
|
||||
}
|
||||
|
||||
.ToggleSwitch--disabled {
|
||||
.ToggleSwitch-status {
|
||||
color: var(--color-fg-muted);
|
||||
}
|
||||
}
|
||||
|
||||
.ToggleSwitch-statusOn {
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.ToggleSwitch-statusOff {
|
||||
height: auto;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.ToggleSwitch--statusAtEnd {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.ToggleSwitch-status {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/alpha/toggle_switch';
|
||||
|
||||
@ -1,61 +1,2 @@
|
||||
// Truncate
|
||||
//
|
||||
// css-truncate will shorten text with an ellipsis.
|
||||
|
||||
.css-truncate {
|
||||
|
||||
// css-truncate-auto will shorten text with an ellipsis when overflowing
|
||||
&.css-truncate-overflow,
|
||||
.css-truncate-overflow,
|
||||
&.css-truncate-target,
|
||||
.css-truncate-target {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// css-truncate-target will shorten text with an ellipsis and a max width
|
||||
&.css-truncate-target,
|
||||
.css-truncate-target {
|
||||
display: inline-block;
|
||||
max-width: 125px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.expandable.zeroclipboard-is-hover .css-truncate-target,
|
||||
&.expandable.zeroclipboard-is-hover.css-truncate-target,
|
||||
&.expandable:hover .css-truncate-target,
|
||||
&.expandable:hover.css-truncate-target {
|
||||
max-width: 10000px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.Truncate {
|
||||
display: inline-flex;
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
|
||||
> .Truncate-text {
|
||||
min-width: 1ch;
|
||||
max-width: fit-content;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
+ .Truncate-text {
|
||||
margin-left: $spacer-1;
|
||||
}
|
||||
|
||||
&.Truncate-text--primary {
|
||||
flex-basis: 200%;
|
||||
}
|
||||
|
||||
&.Truncate-text--expandable:hover,
|
||||
&.Truncate-text--expandable:focus,
|
||||
&.Truncate-text--expandable:active {
|
||||
max-width: 100% !important;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import '@primer/view-components/app/components/primer/truncate';
|
||||
@import '@primer/view-components/app/components/primer/beta/truncate';
|
||||
|
||||
@ -1198,10 +1198,10 @@
|
||||
stylelint-scss "^4.0.0"
|
||||
tap-map "^1.0.0"
|
||||
|
||||
"@primer/view-components@^0.0.111":
|
||||
version "0.0.111"
|
||||
resolved "https://registry.yarnpkg.com/@primer/view-components/-/view-components-0.0.111.tgz#99753e40523983c1964a0cbbc264fc2d5df303d8"
|
||||
integrity sha512-C2M7sKXeOd4lH6NXsQgPHlwoV1zRJOGateLjTaRRIvw6mOFe75m4Y6sqMazvTyu+mj+ibzqHEW21rWE9irWQqA==
|
||||
"@primer/view-components@^0.0.112":
|
||||
version "0.0.112"
|
||||
resolved "https://registry.yarnpkg.com/@primer/view-components/-/view-components-0.0.112.tgz#fe469883c8e2d4da3aba8e17002890b081ab6cd7"
|
||||
integrity sha512-YWvZkEy6pQSfA3kcY5NVYGxR/mFmrbhufLhp/XYuXkf1Uoj1AEa4FESfiPqJhkIomZh5o2B4XAwBCqPsJie9nA==
|
||||
dependencies:
|
||||
"@github/auto-complete-element" "^3.3.4"
|
||||
"@github/catalyst" "^1.6.0"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user