primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-14 23:12:03 +03:00
Code Issues Projects Releases Wiki Activity

Update box-shadow + borders

Browse Source
This commit is contained in:
simurai 2020-02-26 17:54:07 +09:00
parent 0dbb09ab4c
commit 089cf5197d
8 changed files with 19 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/autocomplete/autocomplete.scss
View File

@ -11,7 +11,7 @@
background: $bg-white; background: $bg-white;
border-radius: $border-radius; border-radius: $border-radius;
// stylelint-disable-next-line primer/box-shadow // stylelint-disable-next-line primer/box-shadow
box-shadow: 0 0 5px $black-fade-30; box-shadow: inset 0 0 0 1px $border-color, $box-shadow-medium;
} }
// One of the items that appears within an autocomplete group // One of the items that appears within an autocomplete group

4
src/autocomplete/suggester.scss
View File

@ -19,8 +19,8 @@
li { li {
display: block; display: block;
padding: $spacer-1 $spacer-2; padding: $spacer-1 $spacer-2;
font-weight: $font-weight-bold; font-weight: $font-weight-semibold;
border-bottom: $border; border-bottom: $border-width $border-style $border-gray-light;
small { small {
font-weight: $font-weight-normal; font-weight: $font-weight-normal;

7
src/buttons/button.scss
View File

@ -69,8 +69,7 @@
color: $text-gray-dark; color: $text-gray-dark;
background-color: $bg-gray-light; background-color: $bg-gray-light;
border-color: $border-color-button; border-color: $border-color-button;
// stylelint-disable-next-line primer/box-shadow box-shadow: $box-shadow, $box-shadow-highlight;
box-shadow: 0 1px 0 rgba($gray-400, 0.1), inset 0 1px 0 rgba($white, 0.25);
&:focus, &:focus,
&.focus { &.focus {
@ -108,7 +107,7 @@
$bg: #159739; // custom green $bg: #159739; // custom green
$border-color: $green-600; $border-color: $green-600;
$shadow: $green-900; $shadow: $green-900;
$box-shadow: 0 1px 0 rgba($shadow, 0.1), inset 0 1px 0 rgba($white, 0.03); $box-shadow: $box-shadow, inset 0 1px 0 rgba($white, 0.03);
$bg-hover: #138934; // custom green $bg-hover: #138934; // custom green
$border-hover: $green-700; $border-hover: $green-700;
@ -213,7 +212,7 @@
color: rgba($color, 0.5); color: rgba($color, 0.5);
background-color: #f3f4f6; background-color: #f3f4f6;
border-color: $border-color-button; border-color: $border-color-button;
box-shadow: 0 1px 0 rgba($gray-400, 0.1), inset 0 1px 0 rgba($white, 0.25); box-shadow: $box-shadow, $box-shadow-highlight;
} }
.Counter { .Counter {

3
src/buttons/misc.scss
View File

@ -77,8 +77,7 @@
border-left: 0; border-left: 0;
border-top-right-radius: $border-radius; border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius; border-bottom-right-radius: $border-radius;
// stylelint-disable-next-line primer/box-shadow box-shadow: $box-shadow, $box-shadow-highlight;
box-shadow: 0 1px 0 rgba($gray-400, 0.1), inset 0 1px 0 rgba($white, 0.25);
&:hover, &:hover,
&:active { &:active {

5
src/dropdown/dropdown.scss
View File

@ -31,9 +31,8 @@
list-style: none; list-style: none;
background-color: $bg-white; background-color: $bg-white;
background-clip: padding-box; background-clip: padding-box;
border: $border-width $border-style $border-black-fade; border: $border;
// stylelint-disable-next-line primer/borders border-radius: $border-radius;
border-radius: $spacer-1;
box-shadow: $box-shadow-large; box-shadow: $box-shadow-large;
&::before, &::before,

6
src/select-menu/select-menu.scss
View File

@ -73,7 +73,7 @@ $SelectMenu-max-height: 480px !default;
// stylelint-disable-next-line primer/borders // stylelint-disable-next-line primer/borders
border-radius: $border-radius * 2; border-radius: $border-radius * 2;
// stylelint-disable-next-line primer/box-shadow // stylelint-disable-next-line primer/box-shadow
box-shadow: 0 0 18px rgba(0, 0, 0, 0.4); box-shadow: 0 0 18px rgba($black, 0.4);
animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards; animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
@keyframes SelectMenu-modal-animation { @keyframes SelectMenu-modal-animation {
@ -96,9 +96,9 @@ $SelectMenu-max-height: 480px !default;
max-height: $SelectMenu-max-height; max-height: $SelectMenu-max-height;
margin: $spacer-1 0 $spacer-3 0; margin: $spacer-1 0 $spacer-3 0;
font-size: $font-size-small; font-size: $font-size-small;
border: $border-width $border-style $border-gray-dark; border: $border;
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: $box-shadow-medium; box-shadow: $box-shadow-large;
animation-name: SelectMenu-modal-animation--sm; animation-name: SelectMenu-modal-animation--sm;
} }
} }

10
src/support/variables/misc.scss
View File

@ -8,10 +8,12 @@ $border: $border-width $border-color $border-style !default;
$border-radius: 6px !default; $border-radius: 6px !default;
// Box shadow // Box shadow
$box-shadow: 0 1px 1px rgba($black, 0.1) !default; $box-shadow: 0 1px 0 rgba($gray-400, 0.1) !default;
$box-shadow-medium: 0 1px 5px $black-fade-15 !default; $box-shadow-medium: 0 3px 6px rgba($gray-400, 0.15) !default;
$box-shadow-large: 0 1px 15px $black-fade-15 !default; $box-shadow-large: 0 8px 24px rgba($gray-400, 0.2) !default;
$box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default; $box-shadow-extra-large: 0 12px 48px rgba($gray-400, 0.3) !default;
$box-shadow-highlight: inset 0 1px 0 rgba($white, 0.25) !default;
// Focus shadow // Focus shadow
$focus-shadow: 0 0 0 3px rgba($border-blue, 0.3) !default; $focus-shadow: 0 0 0 3px rgba($border-blue, 0.3) !default;

2
src/toasts/toasts.scss
View File

@ -7,7 +7,7 @@
background-color: $bg-white; background-color: $bg-white;
border-radius: $border-radius; border-radius: $border-radius;
// stylelint-disable-next-line primer/box-shadow // stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 0 0 1px $border-gray-dark, $box-shadow-medium; box-shadow: inset 0 0 0 1px $border-color, $box-shadow-large;
@include breakpoint(sm) { @include breakpoint(sm) {
width: max-content; width: max-content;