primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-05 21:22:57 +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; 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;

26
src/box/box.scss
View File

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

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;