refactor(styles): improve css-triangle/breakpoint mixins and implement pseudo-element mixin
This commit is contained in:
parent
8ce5cfca52
commit
cf9cdb0fe1
@ -24,34 +24,74 @@
|
|||||||
visibility: visible #{$important};
|
visibility: visible #{$important};
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
|
@mixin pseudo-element(
|
||||||
content: '';
|
$element,
|
||||||
display: block;
|
$el-height: 0,
|
||||||
width: 0;
|
$el-width: 0,
|
||||||
height: 0;
|
$isCentered: false,
|
||||||
border-style: solid;
|
$el-background: transparent,
|
||||||
border-width: $triangle-size;
|
$el-rotation: 0deg,
|
||||||
|
$el-transition: none,
|
||||||
|
$isVisible: true
|
||||||
|
) {
|
||||||
|
@if $element == 'before' or $element == 'after' {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
@if $triangle-direction == down {
|
&:#{$element} {
|
||||||
border-bottom-width: 0;
|
@extend %content;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin breakpoint($query, $no-query: false) {
|
width: #{$el-width};
|
||||||
@include breakpoints.breakpoint($query, $no-query) {
|
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;
|
@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)}.";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user