116 lines
2.6 KiB
SCSS
116 lines
2.6 KiB
SCSS
//
|
|
// Convert px to rem
|
|
//
|
|
|
|
// Function for converting a px based font-size to rem.
|
|
@function parseInt($n) {
|
|
@if ($n == !important) {
|
|
@return !important
|
|
} @else {
|
|
$rem-size: $n / 14px;
|
|
@return #{$rem-size}rem;
|
|
}
|
|
}
|
|
|
|
// e.g. @include px-to-rem(padding, 8px 20px);
|
|
@mixin px-to-rem($property, $values) {
|
|
$rem: ();
|
|
@each $value in $values {
|
|
@if index((0, 0px), $value) or $value == auto {
|
|
$rem: append($rem, $value);
|
|
}
|
|
@else {
|
|
$rem: append($rem, parseInt($value));
|
|
}
|
|
}
|
|
#{$property}: $rem;
|
|
}
|
|
@mixin transition($args...) {
|
|
-webkit-transition: $args;
|
|
-moz-transition: $args;
|
|
-ms-transition: $args;
|
|
-o-transition: $args;
|
|
transition: $args;
|
|
}
|
|
@mixin transform($transforms) {
|
|
-moz-transform: $transforms;
|
|
-o-transform: $transforms;
|
|
-ms-transform: $transforms;
|
|
-webkit-transform: $transforms;
|
|
transform: $transforms;
|
|
}
|
|
@mixin border-radius($radius: 4px) {
|
|
-webkit-border-radius: $radius;
|
|
-moz-border-radius: $radius;
|
|
border-radius: $radius;
|
|
}
|
|
// e.g. @include add-border(3px, $m-color-light, all);
|
|
@mixin add-border($size, $color, $position){
|
|
@if $position == 'all'{
|
|
border:$size solid $color;
|
|
} @else if $position == 'top'{
|
|
border-top:$size solid $color;
|
|
} @else if $position == 'bottom'{
|
|
border-bottom:$size solid $color;
|
|
} @else if $position == 'right'{
|
|
border-right:$size solid $color;
|
|
} @else if $position == 'left'{
|
|
border-left:$size solid $color;
|
|
} @else if $position == 'top-bottom'{
|
|
border-top:$size solid $color;
|
|
border-bottom:$size solid $color;
|
|
} @else if $position == 'right-left'{
|
|
border-left:$size solid $color;
|
|
border-right:$size solid $color;
|
|
} @else if $position == 'top-left'{
|
|
border-left:$size solid $color;
|
|
border-right:$size solid $color;
|
|
} @else if $position == 'top-right'{
|
|
border-left:$size solid $color;
|
|
border-right:$size solid $color;
|
|
} @else if $position == 'bottom-left'{
|
|
border-left:$size solid $color;
|
|
border-right:$size solid $color;
|
|
} @else if $position == 'bottom-right'{
|
|
border-left:$size solid $color;
|
|
border-right:$size solid $color;
|
|
}
|
|
}
|
|
|
|
@mixin transition($args...) {
|
|
-webkit-transition: $args;
|
|
-moz-transition: $args;
|
|
-ms-transition: $args;
|
|
-o-transition: $args;
|
|
transition: $args;
|
|
}
|
|
|
|
|
|
//
|
|
// MEDIA QUERY
|
|
//
|
|
@mixin mobile-xs{
|
|
@media(max-width:479px){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin mobile{
|
|
@media(min-width:480px){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin tablet{
|
|
@media(min-width:768px){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin desktops{
|
|
@media(min-width:992px){
|
|
@content;
|
|
}
|
|
}
|
|
@mixin large-desktops{
|
|
@media(min-width:1200px){
|
|
@content;
|
|
}
|
|
} |