mirror of
https://github.com/primer/css.git
synced 2024-10-26 17:34:39 +03:00
Update borders, states and more
Follows the changes from https://github.com/primer/primitives/pull/21/files
This commit is contained in:
parent
cc7f219534
commit
805cfbd7c8
6
package-lock.json
generated
6
package-lock.json
generated
@ -2680,9 +2680,9 @@
|
||||
}
|
||||
},
|
||||
"@primer/primitives": {
|
||||
"version": "0.0.0-e66591e",
|
||||
"resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-e66591e.tgz",
|
||||
"integrity": "sha512-HBRA0WnUDY56L3cjStiq4dC1elei/7b1WfB2yOeFlbi924UxJJkV+R0eLgWshkUo4+Mr+q/1qLHf/O3Pb4AcWw=="
|
||||
"version": "0.0.0-4813158",
|
||||
"resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-0.0.0-4813158.tgz",
|
||||
"integrity": "sha512-GTIs1uOeukZY0L+cjvDy4iVkcYHL7iSSvYN1FGm+O5UPP0Use7lI7F8Oca5O0kxxc/ASmRIR/Ls7XJlrkWtAjw=="
|
||||
},
|
||||
"@reach/router": {
|
||||
"version": "1.3.3",
|
||||
|
@ -41,7 +41,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@primer/octicons": "^9.1.1",
|
||||
"@primer/primitives": "0.0.0-e66591e"
|
||||
"@primer/primitives": "0.0.0-4813158"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@octokit/rest": "^16.34.0",
|
||||
|
@ -38,7 +38,7 @@
|
||||
&.navigation-focus {
|
||||
color: var(--color-text-inverse);
|
||||
text-decoration: none;
|
||||
background-color: var(--color-bg-selected);
|
||||
background-color: var(--color-state-selected-primary-bg);
|
||||
|
||||
// Inherit color on all child elements to ensure enough contrast
|
||||
* {
|
||||
|
@ -20,7 +20,7 @@
|
||||
display: block;
|
||||
padding: $spacer-1 $spacer-2;
|
||||
font-weight: $font-weight-semibold;
|
||||
border-bottom: $border-width $border-style var(--color-border-primary-light);
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
|
||||
small {
|
||||
font-weight: $font-weight-normal;
|
||||
@ -43,7 +43,7 @@
|
||||
&.navigation-focus {
|
||||
color: var(--color-text-inverse);
|
||||
text-decoration: none;
|
||||
background: var(--color-bg-selected);
|
||||
background: var(--color-state-selected-primary-bg);
|
||||
|
||||
small {
|
||||
color: var(--color-text-inverse);
|
||||
|
@ -45,7 +45,7 @@ hr,
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
border-bottom: $border-width $border-style var(--color-border-tertiary);
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
|
@ -13,9 +13,9 @@ kbd {
|
||||
vertical-align: middle;
|
||||
background-color: var(--color-bg-tertiary);
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border: $border-style $border-width var(--color-border-secondary);
|
||||
border-bottom-color: var(--color-border-secondary);
|
||||
border: $border-style $border-width var(--color-border-tertiary);
|
||||
border-bottom-color: var(--color-border-tertiary);
|
||||
border-radius: $border-radius;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 -1px 0 var(--color-border-secondary);
|
||||
box-shadow: inset 0 -1px 0 var(--color-border-tertiary);
|
||||
}
|
||||
|
@ -9,7 +9,7 @@
|
||||
padding: 2px 5px 3px;
|
||||
font-size: $h5-size;
|
||||
background: var(--color-bg-canvas);
|
||||
border: $border-width $border-style var(--color-border-tertiary);
|
||||
border: $border-width $border-style var(--color-auto-gray-0);
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
|
@ -39,7 +39,7 @@
|
||||
padding-bottom: 0.3em;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 2em;
|
||||
border-bottom: $border-width $border-style var(--color-border-primary-light);
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@ -47,7 +47,7 @@
|
||||
padding-bottom: 0.3em;
|
||||
// stylelint-disable-next-line primer/typography
|
||||
font-size: 1.5em;
|
||||
border-bottom: $border-width $border-style var(--color-border-primary-light);
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
@ -15,7 +15,7 @@
|
||||
display: block;
|
||||
padding: $spacer-2 $spacer-3;
|
||||
color: var(--color-text-primary);
|
||||
border-bottom: $border-width $border-style var(--color-border-primary-light);
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
@ -100,7 +100,7 @@
|
||||
font-size: inherit;
|
||||
font-weight: $font-weight-bold;
|
||||
color: var(--color-text-primary);
|
||||
border-bottom: $border-width $border-style var(--color-border-primary-light);
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
@ -16,7 +16,7 @@
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-top: $border-width $border-style var(--color-border-primary-light);
|
||||
border-top: $border-width $border-style var(--color-border-secondary);
|
||||
|
||||
&:first-child {
|
||||
border-top: 0;
|
||||
|
@ -10,7 +10,7 @@
|
||||
.subnav-bordered {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
padding-bottom: 20px;
|
||||
border-bottom: $border-width $border-style var(--color-border-primary-light);
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
}
|
||||
|
||||
.subnav-flush {
|
||||
|
@ -28,7 +28,7 @@
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
border-bottom-color: var(--color-border-secondary);
|
||||
border-bottom-color: var(--color-border-tertiary);
|
||||
outline: 1px dotted transparent; // Support Firfox custom colors
|
||||
outline-offset: -1px;
|
||||
transition-timing-function: ease-out;
|
||||
@ -45,7 +45,7 @@
|
||||
outline-offset: -1px;
|
||||
|
||||
.UnderlineNav-octicon {
|
||||
color: var(--color-text-secondary);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -30,7 +30,7 @@
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: var(--color-border-primary-light);
|
||||
border-color: var(--color-border-secondary);
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
@ -103,7 +103,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
padding: $spacer-3;
|
||||
flex: none; // fixes header from getting squeezed in Safari iOS
|
||||
align-items: center;
|
||||
border-bottom: $border-width $border-style var(--color-border-primary-light);
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
|
||||
@include breakpoint(sm) {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
@ -144,7 +144,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
.SelectMenu-filter {
|
||||
padding: $spacer-3;
|
||||
margin: 0;
|
||||
border-bottom: $border-width $border-style var(--color-border-primary-light);
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
|
||||
@include breakpoint(sm) {
|
||||
padding: $spacer-2;
|
||||
@ -192,7 +192,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
cursor: pointer;
|
||||
background-color: var(--color-bg-primary);
|
||||
border: 0;
|
||||
border-bottom: $border-width $border-style var(--color-border-primary-light);
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
|
||||
@include breakpoint(sm) {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
@ -234,7 +234,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 -1px 0 var(--color-border-primary-light);
|
||||
box-shadow: inset 0 -1px 0 var(--color-border-secondary);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// Hide scrollbar so it doesn't cover the text
|
||||
@ -257,7 +257,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: inset 0 -1px 0 var(--color-border-primary-light);
|
||||
box-shadow: inset 0 -1px 0 var(--color-border-secondary);
|
||||
|
||||
@include breakpoint(sm) {
|
||||
flex: none;
|
||||
@ -274,10 +274,10 @@ $SelectMenu-max-height: 480px !default;
|
||||
cursor: default;
|
||||
background-color: var(--color-bg-primary);
|
||||
// stylelint-disable-next-line primer/box-shadow
|
||||
box-shadow: 0 0 0 1px var(--color-border-primary-light);
|
||||
box-shadow: 0 0 0 1px var(--color-border-secondary);
|
||||
|
||||
@include breakpoint(sm) {
|
||||
border-color: var(--color-border-primary-light);
|
||||
border-color: var(--color-border-secondary);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@ -292,7 +292,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
padding: 7px $spacer-3;
|
||||
text-align: center;
|
||||
background-color: var(--color-bg-primary);
|
||||
border-bottom: $border-width $border-style var(--color-border-primary-light);
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
}
|
||||
|
||||
// Blankslate and Loading
|
||||
@ -317,11 +317,11 @@ $SelectMenu-max-height: 480px !default;
|
||||
font-weight: $font-weight-semibold;
|
||||
color: var(--color-text-tertiary);
|
||||
background-color: var(--color-bg-secondary);
|
||||
border-bottom: $border-width $border-style var(--color-border-primary-light);
|
||||
border-bottom: $border-width $border-style var(--color-border-secondary);
|
||||
|
||||
// Borderless
|
||||
.SelectMenu-list--borderless & {
|
||||
border-top: $border-width $border-style var(--color-border-primary-light);
|
||||
border-top: $border-width $border-style var(--color-border-secondary);
|
||||
|
||||
&:empty {
|
||||
padding: 0;
|
||||
@ -340,7 +340,7 @@ $SelectMenu-max-height: 480px !default;
|
||||
font-size: $font-size-small;
|
||||
color: var(--color-text-tertiary);
|
||||
text-align: center;
|
||||
border-top: $border-width $border-style var(--color-border-primary-light);
|
||||
border-top: $border-width $border-style var(--color-border-secondary);
|
||||
|
||||
@include breakpoint(sm) {
|
||||
// stylelint-disable-next-line primer/spacing
|
||||
|
@ -13,7 +13,7 @@ $border-black-fade: $black-fade-15 !default;
|
||||
$border-white-fade: $white-fade-15 !default;
|
||||
$border-gray-dark: $gray-300 !default;
|
||||
$border-gray-darker: $gray-700 !default;
|
||||
$border-gray-light: var(--color-border-primary-light) !default; // lighten($gray-200, 3%)
|
||||
$border-gray-light: var(--color-border-secondary) !default; // lighten($gray-200, 3%)
|
||||
$border-gray: $gray-200 !default;
|
||||
$border-blue: $blue-500 !default;
|
||||
$border-blue-light: $blue-200 !default;
|
||||
|
@ -25,7 +25,6 @@
|
||||
|
||||
// Border colors
|
||||
.border-primary { border-color: var(--color-border-primary) !important; }
|
||||
.border-primary-light { border-color: var(--color-border-primary-light) !important; }
|
||||
.border-secondary { border-color: var(--color-border-secondary) !important; }
|
||||
.border-tertiary { border-color: var(--color-border-tertiary) !important; }
|
||||
.border-inverse { border-color: var(--color-border-inverse) !important; }
|
||||
@ -41,7 +40,6 @@
|
||||
.bg-secondary { background-color: var(--color-bg-secondary) !important; }
|
||||
.bg-tertiary { background-color: var(--color-bg-tertiary) !important; }
|
||||
.bg-overlay { background-color: var(--color-bg-overlay) !important; }
|
||||
.bg-selected { background-color: var(--color-bg-selected) !important; }
|
||||
.bg-info { background-color: var(--color-bg-info) !important; }
|
||||
.bg-info-inverse { background-color: var(--color-bg-info-inverse) !important; }
|
||||
.bg-danger { background-color: var(--color-bg-danger) !important; }
|
||||
|
Loading…
Reference in New Issue
Block a user