fix: remove $enable-shadows SCSS flag (#2423)

* refactor: fixed spacing calculations and box-shadows * refactor: removed flag to switch shadows
openedx · Aug 4, 2024 · ac1829a · ac1829a
1 parent 292818b
commit ac1829a
Show file tree

Hide file tree

Showing 16 changed files with 68 additions and 98 deletions.
diff --git a/src/Button/button-group.scss b/src/Button/button-group.scss
@@ -78,10 +78,10 @@
 }
 
 .btn-group.show .dropdown-toggle {
-  @include box-shadow(var(--pgn-elevation-btn-box-shadow-active));
+  box-shadow: var(--pgn-elevation-btn-box-shadow-active);
 
   &.btn-link {
-    @include box-shadow(none);
+    box-shadow: none;
   }
 }
 

diff --git a/src/Code/index.scss b/src/Code/index.scss
@@ -13,17 +13,17 @@ kbd {
   padding: var(--pgn-spacing-code-kbd-padding-y) var(--pgn-spacing-code-kbd-padding-x);
   color: var(--pgn-color-code-kbd-base);
   background-color: var(--pgn-color-code-kbd-bg);
+  box-shadow: var(--pgn-elevation-code-kbd-box-shadow);
 
   @include font-size(var(--pgn-typography-code-kbd-font-size));
   @include border-radius(var(--pgn-size-border-radius-sm));
-  @include box-shadow(var(--pgn-elevation-code-kbd-box-shadow));
 
   kbd {
     padding: 0;
     font-weight: var(--pgn-typography-code-kbd-nested-font-weight);
+    box-shadow: none;
 
     @include font-size(100%);
-    @include box-shadow(none);
   }
 }
 

diff --git a/src/Dropdown/dropdown-bootstrap.scss b/src/Dropdown/dropdown-bootstrap.scss
@@ -27,10 +27,10 @@
   background-color: var(--pgn-color-dropdown-bg);
   background-clip: padding-box;
   border: var(--pgn-size-dropdown-border-width) solid var(--pgn-color-dropdown-border);
+  box-shadow: var(--pgn-elevation-dropdown-box-shadow);
 
   @include font-size(var(--pgn-typography-dropdown-font-size));
   @include border-radius(var(--pgn-size-dropdown-border-radius-base));
-  @include box-shadow(var(--pgn-elevation-dropdown-box-shadow));
 
   &[x-placement^="top"],
   &[x-placement^="right"],

diff --git a/src/Form/_bootstrap-custom-forms.scss b/src/Form/_bootstrap-custom-forms.scss
@@ -33,20 +33,13 @@
   &:checked ~ .custom-control-label::before {
     color: var(--pgn-color-form-control-indicator-checked-base);
     border-color: var(--pgn-color-form-control-indicator-checked-border-base);
+    box-shadow: var(--pgn-elevation-form-control-indicator-checked-base);
 
     @include gradient-bg(var(--pgn-color-form-control-indicator-checked-bg-base));
-    @include box-shadow(var(--pgn-elevation-form-control-indicator-checked-base));
   }
 
   &:focus ~ .custom-control-label::before {
-    // the mixin is not used here to make sure there is feedback
-    @if $enable-shadows {
-      box-shadow: var(--pgn-elevation-form-input-base), var(--pgn-elevation-form-control-indicator-checked-focus);
-    }
-
-    @else {
-      box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus);
-    }
+    box-shadow: var(--pgn-elevation-form-control-indicator-checked-focus);
   }
 
   &:focus:not(:checked) ~ .custom-control-label::before {
@@ -57,8 +50,7 @@
     color: var(--pgn-color-form-control-indicator-active-base);
     background-color: var(--pgn-color-form-control-indicator-active-bg);
     border-color: var(--pgn-color-form-control-indicator-active-border);
-
-    @include box-shadow(var(--pgn-elevation-form-control-indicator-active));
+    box-shadow: var(--pgn-elevation-form-control-indicator-active);
   }
 
   // Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
@@ -98,8 +90,7 @@
     pointer-events: none;
     background-color: var(--pgn-color-form-control-indicator-bg-base);
     border: var(--pgn-size-form-control-indicator-border-width) solid var(--pgn-color-form-control-indicator-border);
-
-    @include box-shadow(var(--pgn-elevation-form-control-indicator-base));
+    box-shadow: var(--pgn-elevation-form-control-indicator-base);
   }
 
   // Foreground (icon)
@@ -135,9 +126,9 @@
   .custom-control-input:indeterminate ~ .custom-control-label {
     &::before {
       border-color: var(--pgn-color-form-control-checkbox-indicator-indeterminate-border);
+      box-shadow: var(--pgn-elevation-form-control-checkbox-indicator-indeterminate);
 
       @include gradient-bg(var(--pgn-color-form-control-checkbox-indicator-indeterminate-bg));
-      @include box-shadow(var(--pgn-elevation-form-control-checkbox-indicator-indeterminate));
     }
 
     &::after {
@@ -250,26 +241,15 @@
   background: var(--pgn-color-form-control-select-bg-base) var(--pgn-other-content-form-control-select-bg);
   border: var(--pgn-size-form-control-select-border-width-base) solid var(--pgn-color-form-control-select-border-base);
   appearance: none;
+  box-shadow: var(--pgn-elevation-form-control-select-border-base);
 
   @include font-size(var(--pgn-typography-form-control-select-font-size-base));
   @include border-radius(var(--pgn-size-form-control-select-border-radius),0);
-  @include box-shadow(var(--pgn-elevation-form-control-select-border-base));
 
   &:focus {
     border-color: var(--pgn-color-form-control-select-border-focus);
     outline: 0;
-
-    @if $enable-shadows {
-      @include box-shadow(
-        var(--pgn-elevation-form-control-select-border-base),
-        var(--pgn-elevation-form-control-select-border-focus)
-      );
-    }
-
-    @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: var(--pgn-elevation-form-control-select-border-focus);
-    }
+    box-shadow: var(--pgn-elevation-form-control-select-border-focus);
 
     &::-ms-value {
       // For visual consistency with other platforms/browsers,
@@ -381,9 +361,9 @@
   color: var(--pgn-color-form-control-file-base);
   background-color: var(--pgn-color-form-control-file-bg-base);
   border: var(--pgn-size-form-control-file-width) solid var(--pgn-color-form-control-file-border-base);
+  box-shadow: var(--pgn-elevation-form-control-file-base);
 
   @include border-radius(var(--pgn-size-form-control-file-border-radius));
-  @include box-shadow(var(--pgn-elevation-form-control-file-base));
 
   &::after {
     content: "Browse";
@@ -448,10 +428,10 @@
     border: var(--pgn-size-form-control-range-thumb-border-base);
     appearance: none;
     transition: var(--pgn-transition-form-control);
+    box-shadow: var(--pgn-elevation-form-control-range-thumb-base);
 
     @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-base));
     @include border-radius(var(--pgn-size-form-control-range-thumb-border-radius));
-    @include box-shadow(var(--pgn-elevation-form-control-range-thumb-base));
 
     &:active {
       @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-active));
@@ -465,9 +445,9 @@
     cursor: var(--pgn-other-form-control-range-track-cursor);
     background-color: var(--pgn-color-form-control-range-track-bg);
     border-color: transparent;
+    box-shadow: var(--pgn-elevation-form-control-range-track);
 
     @include border-radius(var(--pgn-size-form-control-range-track-border-radius));
-    @include box-shadow(var(--pgn-elevation-form-control-range-track));
   }
 
   &::-moz-range-thumb {
@@ -476,10 +456,10 @@
     border: var(--pgn-size-form-control-range-thumb-border-base);
     appearance: none;
     transition: var(--pgn-transition-form-control);
+    box-shadow: var(--pgn-elevation-form-control-range-thumb-base);
 
     @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-base));
     @include border-radius(var(--pgn-size-form-control-range-thumb-border-radius));
-    @include box-shadow(var(--pgn-elevation-form-control-range-thumb-base));
 
     &:active {
       @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-active));
@@ -493,9 +473,9 @@
     cursor: var(--pgn-other-form-control-range-track-cursor);
     background-color: var(--pgn-color-form-control-range-track-bg);
     border-color: transparent; // Firefox specific?
+    box-shadow: var(--pgn-elevation-form-control-range-track);
 
     @include border-radius(var(--pgn-size-form-control-range-track-border-radius));
-    @include box-shadow(var(--pgn-elevation-form-control-range-track));
   }
 
   &::-ms-thumb {
@@ -507,10 +487,10 @@
     border: var(--pgn-size-form-control-range-thumb-border-base);
     appearance: none;
     transition: var(--pgn-transition-form-control);
+    box-shadow: var(--pgn-elevation-form-control-range-thumb-base);
 
     @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-base));
     @include border-radius(var(--pgn-size-form-control-range-thumb-border-radius));
-    @include box-shadow(var(--pgn-elevation-form-control-range-thumb-base));
 
     &:active {
       @include gradient-bg(var(--pgn-color-form-control-range-thumb-bg-active));
@@ -525,8 +505,7 @@
     background-color: transparent;
     border-color: transparent;
     border-width: calc(var(--pgn-size-form-control-range-thumb-height) * .5);
-
-    @include box-shadow(var(--pgn-elevation-form-control-range-track));
+    box-shadow: var(--pgn-elevation-form-control-range-track);
   }
 
   &::-ms-fill-lower {

diff --git a/src/Form/_bootstrap-forms.scss b/src/Form/_bootstrap-forms.scss
@@ -21,10 +21,10 @@
   background-clip: padding-box;
   border: var(--pgn-size-form-input-width-border) solid var(--pgn-color-form-input-border);
   transition: var(--pgn-transition-form-input);
+  box-shadow: var(--pgn-elevation-form-input-base);
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius(var(--pgn-size-form-input-radius-border-base), 0);
-  @include box-shadow(var(--pgn-elevation-form-input-base));
 
   // Unstyle the caret on `<select>`s in IE10+.
   &::-ms-expand {

diff --git a/src/Form/_mixins.scss b/src/Form/_mixins.scss
@@ -50,15 +50,7 @@
     background-color: var(--pgn-color-form-input-focus-bg);
     border-color: var(--pgn-color-form-input-focus-border);
     outline: 0;
-
-    @if $enable-shadows {
-      @include box-shadow(var(--pgn-elevation-form-input-base), var(--pgn-elevation-form-input-focus));
-    }
-
-    @else {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: var(--pgn-elevation-form-input-focus);
-    }
+    box-shadow: var(--pgn-elevation-form-input-focus);
   }
 
   @include deprecate("The `form-control-focus()` mixin", "v4.4.0", "v5", $ignore-warning);

diff --git a/src/Image/index.scss b/src/Image/index.scss
@@ -23,9 +23,9 @@
   padding: var(--pgn-spacing-image-thumbnail-padding);
   background-color: var(--pgn-color-image-thumbnail-bg);
   border: var(--pgn-size-image-thumbnail-border-width) solid var(--pgn-color-image-thumbnail-border);
+  box-shadow: var(--pgn-elevation-image-thumbnail-box-shadow);
 
   @include border-radius(var(--pgn-size-image-thumbnail-border-radius));
-  @include box-shadow(var(--pgn-elevation-image-thumbnail-box-shadow));
 
   // Keep them at most 100% wide
   @include img-fluid();

diff --git a/src/Popover/popover-bootstrap.scss b/src/Popover/popover-bootstrap.scss
@@ -13,9 +13,9 @@
   background-color: var(--pgn-color-popover-bg);
   background-clip: padding-box;
   border: var(--pgn-size-popover-border-width) solid var(--pgn-color-popover-border);
+  box-shadow: var(--pgn-elevation-popover-box-shadow);
 
   @include border-radius(var(--pgn-size-popover-border-radius));
-  @include box-shadow(var(--pgn-elevation-popover-box-shadow));
 
   .arrow {
     position: absolute;

diff --git a/src/ProgressBar/bootstrap-progress.scss b/src/ProgressBar/bootstrap-progress.scss
@@ -11,10 +11,10 @@
   overflow: hidden;
   line-height: 0;
   background-color: var(--pgn-color-progress-bar-bg);
+  box-shadow: var(--pgn-elevation-progress-bar-box-shadow);
 
   @include font-size(var(--pgn-typography-progress-bar-font-size));
   @include border-radius(var(--pgn-size-progress-bar-border-radius));
-  @include box-shadow(var(--pgn-elevation-progress-bar-box-shadow));
 }
 
 .progress-bar {