next-app-boilerplate/styles/abstracts/_mixins.scss

99 lines
2.4 KiB
SCSS

@import 'variables';
@import 'helpers';
@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 %no-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 (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
} @else {
@error "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+ "Available breakpoints are: #{map-keys($breakpoints)}.";
}
}