@mixin banner-bg ($img, $aspect){
background: { image: url("#{$p-img}#{$img}"); size: cover; repeat: no-repeat; position: center; } width: 100%; height: 100vw/$aspect; position: absolute;
} @mixin picture-bg ($height: auto){
width: 100%; height: $height; background: { size: cover; position: center; repeat: no-repeat; }
} @mixin circle-image ($size, $url:“not-provided”){
background: { size: 100% auto; repeat: no-repeat; @if $url != "not-provided" { image: url("#{$p-img}#{$url}"); } } width: $size; height: $size; border-radius: 100%; display: inline-block;
}
@mixin transition($property:all, $duration:1s, $timinng:ease, $delay:0s){
-webkit-transition: $property $duration $timinng $delay; -moz-transition: $property $duration $timinng $delay; -o-transition: $property $duration $timinng $delay; transition: $property $duration $timinng $delay;
} @mixin animation($name, $duration:1s, $timinng:ease, $delay:0s){
-webkit-animation: $name $duration $timinng $delay normal 1 forwards running; -moz-animation: $name $duration $timinng $delay normal 1 forwards running; -o-animation: $name $duration $timinng $delay normal 1 forwards running; animation: $name $duration $timinng $delay normal 1 forwards running;
} @mixin play-animation(){
-webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running;
} @mixin filter($values){
-webkit-filter: $values; filter: $values;
} @mixin transform($value){
-webkit-transform: $value; -moz-transform: $value; -o-transform: $value; transform: $value;
} @mixin boxshadow($value: 0px 0px 3px rgba(0, 0, 0, 0.2)){
box-shadow: $value;
} @mixin icon-image($size: 2rem){
width: $size; height: $size; display: block; margin: 0 auto; background-repeat: no-repeat!important;
} @mixin ddd(){
text-overflow: ellipsis; overflow: hidden;
} @mixin max-lines($lines: 3, $line-height: 1.3){
display: -webkit-box; max-height: #{$lines*$line-height}rem; line-height: $line-height; -webkit-line-clamp: $lines; -webkit-box-orient: vertical; @include ddd;
} // ============================================================================= // Font Face // ============================================================================= @mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
$src: null; $extmods: ( eot: "?", svg: "#" + str-replace($name, " ", "_") ); $formats: ( otf: "opentype", ttf: "truetype" ); @each $ext in $exts { $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext); $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext); $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma); } @font-face { font-family: quote($name); font-style: $style; font-weight: $weight; src: $src; }
}