Mixins
hidden-element
This is the coupled pair of mixins allows to manipulate properties that affects the element visibility.
hidden-element
Visually hides the element. It still present in the document flow.
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| $z-index | ?number | null | The value of z-index property. |
Example
@use 'more-sass' as more;
.element-one {
@include more.hidden-element;
}
.element-two {
@include more.hidden-element(10);
}
.element-one {
visibility: hidden;
opacity: 0;
}
.element-two {
z-index: 10;
visibility: hidden;
opacity: 0;
}
hidden-element-active
Shows the hidden element. Resets the hidden-element mixin usage.
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| $z-index | ?number | null | The value of z-index property. |
Example
@use 'more-sass' as more;
.element {
@include more.hidden-element-active;
}
.element {
visibility: visible;
opacity: 1;
}