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

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

Example

@use 'more-sass' as more;

.element {
    @include more.hidden-element-active;
}

.element {
    visibility: visible;
    opacity: 1;
}