primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-14 06:44:38 +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;
border-radius: $border-radius;
// 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

4
src/autocomplete/suggester.scss
View File

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

7
src/buttons/button.scss
View File

@ -69,8 +69,7 @@
color: $text-gray-dark;
background-color: $bg-gray-light;
border-color: $border-color-button;
// stylelint-disable-next-line primer/box-shadow
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;
&:focus,
&.focus {
@ -108,7 +107,7 @@
$bg: #159739; // custom green
$border-color: $green-600;
$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
$border-hover: $green-700;
@ -213,7 +212,7 @@
color: rgba($color, 0.5);
background-color: #f3f4f6;
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 {

3
src/buttons/misc.scss
View File

@ -77,8 +77,7 @@
border-left: 0;
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
// stylelint-disable-next-line primer/box-shadow
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;
&:hover,
&:active {

5
src/dropdown/dropdown.scss
View File

@ -31,9 +31,8 @@
list-style: none;
background-color: $bg-white;
background-clip: padding-box;
border: $border-width $border-style $border-black-fade;
// stylelint-disable-next-line primer/borders
border-radius: $spacer-1;
border: $border;
border-radius: $border-radius;
box-shadow: $box-shadow-large;
&::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
border-radius: $border-radius * 2;
// 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;
@keyframes SelectMenu-modal-animation {
@ -96,9 +96,9 @@ $SelectMenu-max-height: 480px !default;
max-height: $SelectMenu-max-height;
margin: $spacer-1 0 $spacer-3 0;
font-size: $font-size-small;
border: $border-width $border-style $border-gray-dark;
border: $border;
border-radius: $border-radius;
box-shadow: $box-shadow-medium;
box-shadow: $box-shadow-large;
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;
// Box shadow
$box-shadow: 0 1px 1px rgba($black, 0.1) !default;
$box-shadow-medium: 0 1px 5px $black-fade-15 !default;
$box-shadow-large: 0 1px 15px $black-fade-15 !default;
$box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default;
$box-shadow: 0 1px 0 rgba($gray-400, 0.1) !default;
$box-shadow-medium: 0 3px 6px rgba($gray-400, 0.15) !default;
$box-shadow-large: 0 8px 24px rgba($gray-400, 0.2) !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: 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;
border-radius: $border-radius;
// 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) {
width: max-content;