Merge pull request #76 from oruga-ui/add-z-index-classes

feat(utility): add z index classes

Author: mlmoravek

src/assets/scss/bootstrap.scss

@@ -2,10 +2,10 @@
 *   Oruga Theme Boostrap 
 ***************************/
 
-// Globals, helpers and functions
+// Globals, utility and functions
 @import "utils/animations";
 @import "utils/functions";
-@import "utils/helpers";
+@import "utils/utility";
 @import "utils/root";
 
 // Oruga components

src/assets/scss/utils/_all.scss

@@ -1,6 +1,6 @@
 @import "functions";
 @import "variables";
 @import "maps";
-@import "helpers";
+@import "utility";
 @import "animations";
 @import "root";

src/assets/scss/utils/_helpers.scss src/assets/scss/utils/_utility.scsssrc/assets/scss/utils/_helpers.scss renamed to src/assets/scss/utils/_utility.scss

@@ -2,6 +2,22 @@
 *   Global utility classes
 *****************************/
 
+// btn-close overrides
+
+.btn-close > .icon,
+.btn-close.icon > i,
+.btn-close.icon > svg {
+  visibility: hidden;
+}
+
+@each $name, $pair in $theme-colors {
+  .variant-#{$name} > .btn-close {
+    @extend .btn-close-white;
+  }
+}
+
+// Utlity classes
+
 .clickable {
   cursor: pointer;
 }
@@ -32,6 +48,8 @@
   height: unset;
 }
 
+// Utility classes for text
+
 .text-right {
   text-align: right;
 }
@@ -56,15 +74,44 @@
   white-space: break-spaces;
 }
 
-// btn-close overrides
-.btn-close > .icon,
-.btn-close.icon > i,
-.btn-close.icon > svg {
-  visibility: hidden;
+// Utitlity classes for z-index sass variables (see https://getbootstrap.com/docs/5.3/layout/z-index/)
+
+.z-dropdown {
+  z-index: $zindex-dropdown;
 }
 
-@each $name, $pair in $theme-colors {
-  .variant-#{$name} > .btn-close {
-    @extend .btn-close-white;
-  }
+.z-sticky {
+  z-index: $zindex-sticky;
+}
+
+.z-fixed {
+  z-index: $zindex-fixed;
+}
+
+.z-offcanvas-backdrop {
+  z-index: $zindex-offcanvas-backdrop;
+}
+
+.z-offcanvas {
+  z-index: $zindex-offcanvas;
+}
+
+.z-modal-backdrop {
+  z-index: $zindex-modal-backdrop;
+}
+
+.z-modal {
+  z-index: $zindex-modal;
+}
+
+.z-popover {
+  z-index: $zindex-popover;
+}
+
+.z-tooltip {
+  z-index: $zindex-tooltip;
+}
+
+.z-toast {
+  z-index: $zindex-toast;
 }