refactor: revert elevation system

coreui · Nov 14, 2023 · e005ebd · e005ebd
1 parent 11c9fe8
commit e005ebd
Show file tree

Hide file tree

Showing 26 changed files with 40 additions and 13 deletions.
diff --git a/dist/css/coreui-grid.css.map b/dist/css/coreui-grid.css.map
diff --git a/dist/css/coreui-grid.rtl.css.map b/dist/css/coreui-grid.rtl.css.map
diff --git a/dist/css/coreui-grid.rtl.min.css.map b/dist/css/coreui-grid.rtl.min.css.map
diff --git a/dist/css/coreui-reboot.css.map b/dist/css/coreui-reboot.css.map
diff --git a/dist/css/coreui-reboot.rtl.css.map b/dist/css/coreui-reboot.rtl.css.map
diff --git a/dist/css/coreui-reboot.rtl.min.css.map b/dist/css/coreui-reboot.rtl.min.css.map
diff --git a/dist/css/coreui-utilities.css.map b/dist/css/coreui-utilities.css.map
diff --git a/dist/css/coreui-utilities.rtl.css.map b/dist/css/coreui-utilities.rtl.css.map
diff --git a/dist/css/coreui-utilities.rtl.min.css.map b/dist/css/coreui-utilities.rtl.min.css.map
diff --git a/dist/css/coreui.css.map b/dist/css/coreui.css.map
diff --git a/dist/css/coreui.min.css.map b/dist/css/coreui.min.css.map
diff --git a/dist/css/coreui.rtl.css.map b/dist/css/coreui.rtl.css.map
diff --git a/dist/css/coreui.rtl.min.css.map b/dist/css/coreui.rtl.min.css.map
diff --git a/scss/_card.scss b/scss/_card.scss
@@ -37,6 +37,7 @@
   border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
   @include border-radius(var(--#{$prefix}card-border-radius));
   @include box-shadow(var(--#{$prefix}card-box-shadow));
+  @include elevation(1);
 
   > hr {
     margin-right: 0;

diff --git a/scss/_date-picker.scss b/scss/_date-picker.scss
@@ -195,6 +195,7 @@
   background-clip: padding-box;
   border: var(--#{$prefix}date-picker-dropdown-border-width) solid var(--#{$prefix}date-picker-dropdown-border-color);
   @include border-radius(var(--#{$prefix}date-picker-dropdown-border-radius));
+  @include elevation(4);
 
   .date-picker.show & {
     display: block;

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
@@ -61,6 +61,7 @@
   border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
   @include border-radius(var(--#{$prefix}dropdown-border-radius));
   @include box-shadow(var(--#{$prefix}dropdown-box-shadow));
+  @include elevation(4);
 
   &[data-coreui-popper] {
     top: 100%;

diff --git a/scss/_footer.scss b/scss/_footer.scss
@@ -24,4 +24,5 @@
   position: sticky;
   bottom: 0;
   z-index: $zindex-fixed;
+  @include elevation(2, "top");
 }
diff --git a/scss/_header.scss b/scss/_header.scss
@@ -64,6 +64,7 @@
     position: sticky;
     top: 0;
     z-index: $zindex-sticky;
+    @include elevation(2);
   }
 }
 

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
@@ -39,6 +39,7 @@
 // Skins
 @import "mixins/border-radius";
 @import "mixins/box-shadow";
+@import "mixins/elevation";
 @import "mixins/gradients";
 @import "mixins/transition";
 

diff --git a/scss/_modal.scss b/scss/_modal.scss
@@ -47,6 +47,7 @@
   // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
   // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
   // See also https://github.com/twbs/bootstrap/issues/17695
+  @include elevation(24);
 }
 
 // Shell div to position the modal with bottom padding

diff --git a/scss/_time-picker.scss b/scss/_time-picker.scss
@@ -185,6 +185,7 @@
   background-clip: padding-box;
   border: var(--#{$prefix}time-picker-dropdown-border-width) solid var(--#{$prefix}time-picker-dropdown-border-color);
   @include border-radius(var(--#{$prefix}time-picker-dropdown-border-radius));
+  @include elevation(4);
 
   .time-picker.show & {
     display: block;

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -85,11 +85,13 @@ $utilities: map-merge(
       )
     ),
     // scss-docs-end utils-shadow
+    // scss-docs-start utils-elevation
     "elevation": (
       property: box-shadow,
       class: elevation,
       values: $elevations
     ),
+    // scss-docs-end utils-elevation
     // scss-docs-start utils-focus-ring
     "focus-ring": (
       css-var: true,

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -449,6 +449,7 @@ $enable-validation-icons:     true !default;
 $enable-negative-margins:     false !default;
 $enable-deprecation-messages: true !default;
 $enable-important-utilities:  true !default;
+$enable-elevations:           false !default;
 $enable-ltr:                  true !default;
 $enable-rtl:                  false !default;
 

diff --git a/scss/forms/_form-multi-select.scss b/scss/forms/_form-multi-select.scss
@@ -322,6 +322,7 @@ select.form-multi-select {
   background-clip: padding-box;
   border: var(--#{$prefix}form-multi-select-dropdown-border-width) solid var(--#{$prefix}form-multi-select-dropdown-border-color);
   @include border-radius(var(--#{$prefix}form-multi-select-dropdown-border-radius));
+  @include elevation(4);
 
   .form-multi-select.show & {
     display: block;

diff --git a/scss/mixins/_elevation.scss b/scss/mixins/_elevation.scss
@@ -0,0 +1,13 @@
+@mixin elevation($value, $exclude: null) {
+  @if $enable-elevations {
+    box-shadow: map-get($elevations, $value);
+
+    @if $enable-dark-mode {
+      [data-coreui-theme]:not([data-coreui-theme="dark"]) & {
+        &:not([class*="border"]) {
+          border: 0;
+        }
+      }
+    }
+  }
+}
diff --git a/scss/sidebar/_sidebar.scss b/scss/sidebar/_sidebar.scss
@@ -86,6 +86,7 @@
       position: fixed;
       top: 0;
       bottom: 0;
+      @include elevation(2);
 
       &:not(.sidebar-end) {
         @include ltr-rtl("left", 0);
@@ -132,6 +133,7 @@
 
     &.show {
       box-shadow: var(--#{$prefix}sidebar-overlaid-box-shadow);
+      @include elevation(3);
 
       &:not(.sidebar-end) {
         @include ltr-rtl("margin-left", 0);
-Original file line number
+Diff line change
@@ Expand Up / @@ -64,6 +64,7 @@ @@
         position: sticky;
         top: 0;
         z-index: $zindex-sticky;
+        @include elevation(2);
       }
     }
@@ Expand Down @@