// Apply a gradient to text
// https://css-tricks.com/snippets/css/gradient-text/
@mixin text-gradient($direction, $color, $colors...) {
// Fix display property
display: inline-block;
// Define default color
color: $color;
// Modernizr
.backgroundcliptext & {
// Define gradient based on params
background: linear-gradient($direction, $colors);
// Clip background to text
-webkit-background-clip: text;
// Fill text with transparent white
// This prevents some issues on Safari with transparent colors
-webkit-text-fill-color: rgba(255, 255, 255, 0);
//-webkit-text-fill-color: hsla(0,0%,100%,0);
}
}
// This mixin can be used to set the object-fit:
// @include object-fit(contain);
// or object-fit and object-position:
// @include object-fit(cover, top);
@mixin object-fit($fit: fill, $position: null) {
-o-object-fit: $fit;
object-fit: $fit;
@if $position {
-o-object-position: $position;
object-position: $position;
font-family: 'object-fit: #{$fit}; object-position: #{$position}';
} @else {
font-family: 'object-fit: #{$fit}';
}
}
@mixin aspect-ratio($width, $height) {
position: relative;
&:before {
display: block;
content: "";
width: 100%;
padding-top: ($height / $width) * 100%;
}
> iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
@mixin line($time: 0.3s){
transform: scaleX(0);
transform-origin: 100% 0;
transition: transform $time $custom-easing-1;
}
@mixin line-hover(){
transform: scaleX(1);
transform-origin: 0 0;
}
@mixin line-left($time: 0.3s){
transform: scaleX(0);
transform-origin: 0 100%;
transition: transform $time $custom-easing-1;
}
@mixin line-left-hover(){
transform: scaleX(1);
transform-origin: 0 100%;
}