57 lines
1.5 KiB
SCSS
57 lines
1.5 KiB
SCSS
@mixin display-flex($content: center, $items: center, $direction: row) {
|
|
display: flex;
|
|
justify-content: #{$content};
|
|
align-items: #{$items};
|
|
flex-direction: #{$direction};
|
|
}
|
|
|
|
@mixin element-invisible($enforce: true) {
|
|
$important: if($enforce, "!important", null);
|
|
|
|
position: absolute #{$important};
|
|
width: 1px #{$important};
|
|
height: 1px #{$important};
|
|
padding: 0 #{$important};
|
|
overflow: hidden #{$important};
|
|
clip: rect(0, 0, 0, 0) #{$important};
|
|
white-space: nowrap #{$important};
|
|
border: 0 #{$important};
|
|
}
|
|
|
|
@mixin element-invisible-off($enforce: true) {
|
|
$important: if($enforce, "!important", null);
|
|
|
|
position: static #{$important};
|
|
width: auto #{$important};
|
|
height: auto #{$important};
|
|
overflow: visible #{$important};
|
|
clip: auto #{$important};
|
|
white-space: normal #{$important};
|
|
}
|
|
|
|
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
|
|
content: "";
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-width: $triangle-size;
|
|
|
|
@if $triangle-direction == down {
|
|
border-bottom-width: 0;
|
|
border-color: $triangle-color transparent transparent;
|
|
}
|
|
@if $triangle-direction == up {
|
|
border-top-width: 0;
|
|
border-color: transparent transparent $triangle-color;
|
|
}
|
|
@if $triangle-direction == right {
|
|
border-right-width: 0;
|
|
border-color: transparent transparent transparent $triangle-color;
|
|
}
|
|
@if $triangle-direction == left {
|
|
border-left-width: 0;
|
|
border-color: transparent $triangle-color transparent transparent;
|
|
}
|
|
}
|