98 lines
2.4 KiB
SCSS
98 lines
2.4 KiB
SCSS
@import 'variables';
|
|
|
|
@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);
|
|
|
|
max-height: 0 #{$important};
|
|
opacity: 0 #{$important};
|
|
visibility: hidden #{$important};
|
|
transition: $default-transition;
|
|
}
|
|
|
|
@mixin element-invisible-off($value-visibility: 100px, $enforce: true) {
|
|
$important: if($enforce, '!important', null);
|
|
|
|
max-height: #{$value-visibility} #{$important};
|
|
opacity: 1 #{$important};
|
|
visibility: visible #{$important};
|
|
}
|
|
|
|
@mixin pseudo-element(
|
|
$element,
|
|
$el-height: 0,
|
|
$el-width: 0,
|
|
$isCentered: false,
|
|
$el-background: transparent,
|
|
$el-rotation: 0deg,
|
|
$el-transition: none,
|
|
$isVisible: true
|
|
) {
|
|
@if $element == 'before' or $element == 'after' {
|
|
position: relative;
|
|
|
|
&:#{$element} {
|
|
@extend %content;
|
|
|
|
width: #{$el-width};
|
|
height: #{$el-height};
|
|
background: #{$el-background};
|
|
transition: #{$el-transition};
|
|
@content;
|
|
|
|
@if $isVisible {
|
|
@include element-invisible-off;
|
|
} @else {
|
|
@include element-invisible;
|
|
}
|
|
|
|
@if $isCentered {
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(#{$el-rotation});
|
|
} @else {
|
|
transform: rotate(#{$el-rotation});
|
|
@content;
|
|
}
|
|
}
|
|
} @else {
|
|
@warn "`#{$el}` isn't a valid pseudo element";
|
|
}
|
|
}
|
|
|
|
@mixin css-triangle(
|
|
$pseudo,
|
|
$triangle-size,
|
|
$triangle-color,
|
|
$triangle-direction
|
|
) {
|
|
@include pseudo-element(#{$pseudo}) {
|
|
border-style: solid;
|
|
border-width: $triangle-size;
|
|
@content;
|
|
|
|
border-#{$triangle-direction}-width: 0;
|
|
border-color: if($triangle-direction == down, $triangle-color, transparent)
|
|
if($triangle-direction == left, $triangle-color, transparent)
|
|
if($triangle-direction == up, $triangle-color, transparent)
|
|
if($triangle-direction == right, $triangle-color, transparent);
|
|
}
|
|
}
|
|
|
|
@mixin respond-to($breakpoint) {
|
|
@if map-has-key($breakpoints, $breakpoint) {
|
|
@media (max-width: map-get($breakpoints, $breakpoint)) {
|
|
@content;
|
|
}
|
|
} @else {
|
|
@error "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
|
+ "Available breakpoints are: #{map-keys($breakpoints)}.";
|
|
}
|
|
}
|