From df1c3c0ce8888f930a641e7fe2316b1d8f5502d0 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 15 Jul 2019 00:29:13 -0700
Subject: [PATCH] v5: Reuse box-shadow variables (#29023)
* Remove default kbd element shadow, simplify selector while here
* Add new -shadow-inset variable so our shadows match on .form-control's, .form-select's, and .progress's
* Reuse box-shadow variables for .dropdown's, .popover's, .toast's, .modal's, and .img-thumbnail's
---
scss/_code.scss | 5 ++---
scss/_variables.scss | 22 +++++++++++-----------
2 files changed, 13 insertions(+), 14 deletions(-)
diff --git a/scss/_code.scss b/scss/_code.scss
index 74b6e1c89b..f12fa01bf3 100644
--- a/scss/_code.scss
+++ b/scss/_code.scss
@@ -17,13 +17,12 @@ kbd {
color: $kbd-color;
background-color: $kbd-bg;
@include border-radius($border-radius-sm);
- @include box-shadow($kbd-box-shadow);
- kbd {
+ // stylelint-disable-next-line no-duplicate-selectors
+ & {
padding: 0;
@include font-size(100%);
font-weight: $nested-kbd-font-weight;
- @include box-shadow(none);
}
}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 56bd143dbf..0b1191fe70 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -234,6 +234,7 @@ $rounded-pill: 50rem !default;
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
+$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
$component-active-color: $white !default;
$component-active-bg: theme-color("primary") !default;
@@ -337,7 +338,6 @@ $mark-padding: .2em !default;
$dt-font-weight: $font-weight-bold !default;
-$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default;
$nested-kbd-font-weight: $font-weight-bold !default;
$list-inline-padding: .5rem !default;
@@ -480,7 +480,7 @@ $input-disabled-bg: $gray-200 !default;
$input-color: $gray-700 !default;
$input-border-color: $gray-400 !default;
$input-border-width: $input-btn-border-width !default;
-$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default;
+$input-box-shadow: $box-shadow-inset !default;
$input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default;
@@ -594,7 +594,7 @@ $form-select-feedback-icon-size: $input-height-inner-half $input-height
$form-select-border-width: $input-border-width !default;
$form-select-border-color: $input-border-color !default;
$form-select-border-radius: $border-radius !default;
-$form-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default;
+$form-select-box-shadow: $box-shadow-inset !default;
$form-select-focus-border-color: $input-focus-border-color !default;
$form-select-focus-width: $input-focus-width !default;
@@ -615,7 +615,7 @@ $form-range-track-height: .5rem !default;
$form-range-track-cursor: pointer !default;
$form-range-track-bg: $gray-300 !default;
$form-range-track-border-radius: 1rem !default;
-$form-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;
+$form-range-track-box-shadow: $box-shadow-inset !default;
$form-range-thumb-width: 1rem !default;
$form-range-thumb-height: $form-range-thumb-width !default;
@@ -766,7 +766,7 @@ $dropdown-border-width: $border-width !default;
$dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
$dropdown-divider-bg: $gray-200 !default;
$dropdown-divider-margin-y: $nav-divider-margin-y !default;
-$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
+$dropdown-box-shadow: $box-shadow !default;
$dropdown-link-color: $gray-900 !default;
$dropdown-link-hover-color: darken($gray-900, 5%) !default;
@@ -871,7 +871,7 @@ $popover-border-width: $border-width !default;
$popover-border-color: rgba($black, .2) !default;
$popover-border-radius: $border-radius-lg !default;
$popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default;
-$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
+$popover-box-shadow: $box-shadow !default;
$popover-header-bg: darken($popover-bg, 3%) !default;
$popover-header-color: $headings-color !default;
@@ -900,7 +900,7 @@ $toast-background-color: rgba($white, .85) !default;
$toast-border-width: 1px !default;
$toast-border-color: rgba(0, 0, 0, .1) !default;
$toast-border-radius: $border-radius !default;
-$toast-box-shadow: 0 .25rem .75rem rgba($black, .1) !default;
+$toast-box-shadow: $box-shadow !default;
$toast-header-color: $gray-600 !default;
$toast-header-background-color: rgba($white, .85) !default;
@@ -933,8 +933,8 @@ $modal-content-border-color: rgba($black, .2) !default;
$modal-content-border-width: $border-width !default;
$modal-content-border-radius: $border-radius-lg !default;
$modal-content-inner-border-radius: calc(#{$modal-content-border-radius} - #{$modal-content-border-width}) !default;
-$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
-$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
+$modal-content-box-shadow-xs: $box-shadow-sm !default;
+$modal-content-box-shadow-sm-up: $box-shadow !default;
$modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default;
@@ -978,7 +978,7 @@ $progress-height: 1rem !default;
$progress-font-size: $font-size-base * .75 !default;
$progress-bg: $gray-200 !default;
$progress-border-radius: $border-radius !default;
-$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;
+$progress-box-shadow: $box-shadow-inset !default;
$progress-bar-color: $white !default;
$progress-bar-bg: theme-color("primary") !default;
$progress-bar-animation-timing: 1s linear infinite !default;
@@ -1018,7 +1018,7 @@ $thumbnail-bg: $body-bg !default;
$thumbnail-border-width: $border-width !default;
$thumbnail-border-color: $gray-300 !default;
$thumbnail-border-radius: $border-radius !default;
-$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;
+$thumbnail-box-shadow: $box-shadow-sm !default;
// Figures
--
GitLab