CHIEFSOFT\ameye
103 lines
4.0 KiB
SCSS
103 lines
4.0 KiB
SCSS
@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
|
|
@if $inset {
|
|
-webkit-box-shadow:inset $top $left $blur $color;
|
|
-moz-box-shadow:inset $top $left $blur $color;
|
|
box-shadow:inset $top $left $blur $color;
|
|
} @else {
|
|
-webkit-box-shadow: $top $left $blur $color;
|
|
-moz-box-shadow: $top $left $blur $color;
|
|
box-shadow: $top $left $blur $color;
|
|
}
|
|
}
|
|
@mixin button-shadow($top, $left, $bottom, $blur, $hexcolor, $opacity) {
|
|
-webkit-box-shadow: $top $left $bottom $blur rgba($hexcolor, $opacity);
|
|
-moz-box-shadow: $top $left $bottom $blur rgba($hexcolor, $opacity);
|
|
box-shadow: $top $left $bottom $blur rgba($hexcolor, $opacity);
|
|
}
|
|
@mixin hex-rgba($hexcolor, $opacity) {
|
|
background: $hexcolor; /* The Fallback */
|
|
background: rgba($hexcolor, $opacity) !important;
|
|
}
|
|
@mixin multi-hex-rgba($hexcolor1, $hexcolor2, $opacity) {
|
|
background: $hexcolor1; /* The Fallback */
|
|
background: rgba($hexcolor1,$hexcolor2, $opacity) !important;
|
|
}
|
|
@mixin linear-gradient($left, $right){
|
|
background: $left; /* Old browsers */
|
|
background: -moz-linear-gradient(left, $left 0%, $right 100%) !important; /* FF3.6+ */
|
|
background: -webkit-gradient(linear, left, right, color-stop(0%,$left), color-stop(100%,$right)) !important; /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(left, $left 0%,$right 100%) !important; /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(left, $left 0%,$right 100%) !important; /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(left, $left 0%,$right 100%) !important; /* IE10+ */
|
|
background: linear-gradient(to right, $left 0%,$right 100%) !important; /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 ) !important; /* IE6-9 */
|
|
}
|
|
@mixin linear-gradient-opacity($left, $right, $opacity) {
|
|
background: -moz-linear-gradient(top, rgba($left, $opacity) 0%, rgba($right, $opacity) 100%); /* FF3.6-15 */
|
|
background: -webkit-linear-gradient(top, rgba($left, $opacity) 0%, rgba($right, $opacity) 100%); /* Chrome10-25,Safari5.1-6 */
|
|
background: linear-gradient(to bottom, rgba($left, $opacity) 0%, rgba($right, $opacity) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba($left, $opacity)', endColorstr='rgba($left, $opacity)',GradientType=0 ); /* IE6-9 */
|
|
}
|
|
@mixin desktop-lg {
|
|
@media (min-width: #{$desktop-lg}) {
|
|
@content;
|
|
}
|
|
}
|
|
@mixin desktop {
|
|
@media screen and (min-width: #{$desktop}) and (max-width: #{$desktop-lg - 1px}) {
|
|
@content;
|
|
}
|
|
}
|
|
@mixin laptop {
|
|
@media screen and (min-width: #{$laptop}) and (max-width: #{$desktop - 1px}) {
|
|
@content;
|
|
}
|
|
}
|
|
@mixin tablet-landscape {
|
|
@media screen and (min-width: #{$tablet-landscape}) and (max-width: #{$laptop - 1px}) {
|
|
@content;
|
|
}
|
|
}
|
|
@mixin tablet-portrait {
|
|
@media screen and (min-width: #{$tablet-portrait}) and (max-width: #{$tablet-landscape - 1px}) {
|
|
@content;
|
|
}
|
|
}
|
|
@mixin mobile-landscape {
|
|
@media screen and (min-width: #{$mobile-landscape}) and (max-width: #{$tablet-portrait - 1px}) {
|
|
@content;
|
|
}
|
|
}
|
|
@mixin mobile-portrait-lg {
|
|
@media screen and (min-width: #{$mobile-portrait}) and (max-width: #{$mobile-landscape - 1px}) {
|
|
@content;
|
|
}
|
|
}
|
|
@mixin mobile-portrait-sm {
|
|
@media screen and (min-width: #{$mobile-portrait-sm}) and (max-width: #{$mobile-landscape - 1px}) {
|
|
@content;
|
|
}
|
|
}
|
|
@mixin mobile-portrait-xs {
|
|
@media screen and (max-width: #{$mobile-portrait-sm}) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin transition($what: all, $time: 0.3s, $how: ease) {
|
|
-webkit-transition: $what $time $how;
|
|
-moz-transition: $what $time $how;
|
|
-ms-transition: $what $time $how;
|
|
-o-transition: $what $time $how;
|
|
transition: $what $time $how;
|
|
}
|
|
|
|
@mixin padding($direction, $value) {
|
|
padding-#{$direction}: $value;
|
|
}
|
|
@mixin margin($direction, $value) {
|
|
margin-#{$direction}: $value;
|
|
}
|
|
@mixin border($direction, $width, $style, $color) {
|
|
border-#{$direction}: $width $style $color !important;
|
|
} |