Z-index utilities
Use the following classes to quickly set a z-index:
- ecl-u-z-auto: Default z-index (auto)
- ecl-u-z-zero: No z-index (0)
- ecl-u-z-highlight: Used for more important elements (1)
- ecl-u-z-navigation: Used for navigation elements (10)
- ecl-u-z-dropdown: Used for dropdown elements (15)
- ecl-u-z-modal: Used for modal elements (20)
- ecl-u-z-max: Very high z-index (9999)
<style>
.example {
border: 2px solid #000;
box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
box-sizing: border-box;
margin-top: -1.2rem;
padding: 2rem;
position: relative;
width: 60%;
}
.example:first-child {
margin-top: 0;
}
.example:nth-child(even) {
background-color: #404040;
color: #fff;
float: left;
margin-left: 10%;
text-align: right;
}
.example:nth-child(odd) {
background-color: #ebebeb;
color: #404040;
float: right;
margin-right: 10%;
text-align: left;
}
</style>
<div>
<div class="example ecl-u-z-auto">ecl-u-z-auto</div>
<div class="example ecl-u-z-zero">ecl-u-z-zero</div>
<div class="example ecl-u-z-highlight">ecl-u-z-highlight</div>
<div class="example ecl-u-z-navigation">ecl-u-z-navigation</div>
<div class="example ecl-u-z-dropdown">ecl-u-z-dropdown</div>
<div class="example ecl-u-z-modal">ecl-u-z-modal</div>
<div class="example ecl-u-z-max">ecl-u-z-max</div>
</div>
/* No context defined for this component. */
<style>
.example {
border: 2px solid #000;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
box-sizing: border-box;
margin-top: -1.2rem;
padding: 2rem;
position: relative;
width: 60%;
}
.example:first-child {
margin-top: 0;
}
.example:nth-child(even) {
background-color: #404040;
color: #fff;
float: left;
margin-left: 10%;
text-align: right;
}
.example:nth-child(odd) {
background-color: #ebebeb;
color: #404040;
float: right;
margin-right: 10%;
text-align: left;
}
</style>
<div>
<div class="example ecl-u-z-auto">ecl-u-z-auto</div>
<div class="example ecl-u-z-zero">ecl-u-z-zero</div>
<div class="example ecl-u-z-highlight">ecl-u-z-highlight</div>
<div class="example ecl-u-z-navigation">ecl-u-z-navigation</div>
<div class="example ecl-u-z-dropdown">ecl-u-z-dropdown</div>
<div class="example ecl-u-z-modal">ecl-u-z-modal</div>
<div class="example ecl-u-z-max">ecl-u-z-max</div>
</div>
-
Content:
/** * Z-index utilities */ // Import base and generic @import '@ecl/eu-base/eu-base'; @import '@ecl/generic-utility-z-index/generic-utility-z-index'; // Use generic mixin @include exports('eu-utility-z-index') { @include ecl-utility-z-index(); }
- URL: /components/raw/eu-utility-z-index/eu-utility-z-index.scss
- Filesystem Path: ../../src/systems/eu/eu-utility/eu-utility-z-index/eu-utility-z-index.scss
- Size: 252 Bytes
- Handle: @ecl/eu-utility-z-index
- Preview:
- Filesystem Path: ../../src/systems/eu/eu-utility/eu-utility-z-index/eu-utility-z-index.twig