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

Merge pull request #1040 from primer/next-overlays

Browse Source 
Refresh box-shadow and borders
This commit is contained in:
simurai 2020-02-27 10:06:58 +09:00 committed by GitHub
commit e5f3767fa8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 29 additions and 36 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;

26
src/box/box.scss
View File

@ -3,7 +3,7 @@
.Box {
background-color: $bg-white;
border: $border-width $border-style $border-gray-dark;
border: $border;
border-radius: $border-radius;
}
@ -75,7 +75,7 @@
// stylelint-disable-next-line primer/spacing
margin: (-$border-width) (-$border-width) 0;
background-color: $bg-gray;
border-color: $border-gray-dark;
border-color: $border-color;
border-style: $border-style;
border-width: $border-width;
border-top-left-radius: $border-radius;
@ -95,10 +95,8 @@
&:last-of-type {
// stylelint-disable-next-line primer/spacing
margin-bottom: -$border-width;
// stylelint-disable-next-line primer/borders
border-bottom-right-radius: 2px;
// stylelint-disable-next-line primer/borders
border-bottom-left-radius: 2px;
border-bottom-right-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
}
@ -108,21 +106,17 @@
// stylelint-disable-next-line primer/spacing
margin-top: -1px;
list-style-type: none; // To account for applying Box component to a list
border-top: $border-width $border-style $border-gray;
border-top: $border;
&:first-of-type {
border-top-color: transparent;
// stylelint-disable-next-line primer/borders
border-top-left-radius: 2px;
// stylelint-disable-next-line primer/borders
border-top-right-radius: 2px;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
}
&:last-of-type {
// stylelint-disable-next-line primer/borders
border-bottom-right-radius: 2px;
// stylelint-disable-next-line primer/borders
border-bottom-left-radius: 2px;
border-bottom-right-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
// Adds a blue vertical line to the left of the row
@ -216,7 +210,7 @@
padding: $spacer-3;
// stylelint-disable-next-line primer/spacing
margin-top: -1px; // prevents double border when used with .Box-body
border-top: $border-width $border-style $border-gray;
border-top: $border;
}
// Option for a box with scrolling content

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;