// // Mixins & Functions //
// // Rem Calculator // @function rem($size) {
$rem: $size / 16; @return #{$rem}rem;
}
@function px($size) {
$px: strip-units($size) * 16; @return #{$px}px;
}
// removing “px” or “rem” from variable @function strip-units($number) {
@return $number / ($number * 0 + 1);
}
// // vendor prefixes // @mixin prefix($property, $value, $prefixes: ()) {
@each $prefix in $prefixes { #{'-' + $prefix + '-' + $property}: $value; } // Output standard non-prefixed declaration #{$property}: $value;
}
// // Font Size // $font-size-list: ( 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 50, 60, 70, 80, 90, 100 ); @each $size in $font-size-list {
.fs-#{$size} { font-size: rem($size)!important; line-height: 1.4em; }
}
// Helpers @mixin text-shadow($size: 25px) {
text-shadow: 0px 0px $size rgba($canalplus, 0.4);
}
@mixin translate($vertical, $horizontal) {
@include prefix(transform, translate($vertical, $horizontal), webkit moz);
}
@mixin transition($time: 0.2s, $type: all, $delay: 0s) {
@include prefix(transition, $type $time, webkit moz); @include prefix(transition-delay, $delay, webkit moz);
}
@mixin selection($type) {
@include prefix(user-select, $type, webkit moz ms);
}
@mixin shadow($size: 10px, $size-2: 0px, $color: rgba($canalplus,0.05)) {
@include prefix(box-shadow , 0px 0px $size $size-2 $color, webkit moz);
}
@mixin scale($ratio: 1.05) {
@include prefix(transform , scale($ratio), webkit moz);
}
@mixin rotate($grade: 90deg) {
@include prefix(transform , rotate($grade), webkit moz);
}
// remove ? @mixin no-shadow() {
@include prefix(box-shadow , none!important, webkit moz);
}
@mixin animation($duration, $mode) {
@include prefix(animation-duration , $duration, webkit moz); @include prefix(animation-fill-mode , $mode, webkit moz);
}
// Placeholder @mixin placeholder {
&::-webkit-input-placeholder {@content} &:-moz-placeholder {@content} &::-moz-placeholder {@content} &:-ms-input-placeholder {@content}
}
@mixin input-hover {
&:hover, &:focus, &:active {@content}
}