270 lines
9.0 KiB
SCSS
270 lines
9.0 KiB
SCSS
// ---- CSS3 SASS MIXINS ----
|
|
// https://github.com/madr/css3-sass-mixins
|
|
//
|
|
// Copyright (C) 2011 by Anders Ytterström
|
|
//
|
|
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
// of this software and associated documentation files (the "Software"), to deal
|
|
// in the Software without restriction, including without limitation the rights
|
|
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
// copies of the Software, and to permit persons to whom the Software is
|
|
// furnished to do so, subject to the following conditions:
|
|
//
|
|
// The above copyright notice and this permission notice shall be included in
|
|
// all copies or substantial portions of the Software.
|
|
//
|
|
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
// THE SOFTWARE.
|
|
//
|
|
|
|
// ---- LEGACY IE SUPPORT USING FILTERS ----
|
|
// Should IE filters be used or not?
|
|
// PROS: gradients, drop shadows etc will be handled by css.
|
|
// CONS: will harm the site performance badly,
|
|
// especially on sites with heavy rendering and scripting.
|
|
$useIEFilters: 0;
|
|
// might be 0 or 1. disabled by default.
|
|
// ---- /LEGACY IE SUPPORT USING FILTERS ----
|
|
|
|
|
|
@mixin background-size ($value) {
|
|
-webkit-background-size: $value;
|
|
background-size: $value;
|
|
}
|
|
|
|
@mixin border-image ($path, $offsets, $repeats) {
|
|
-moz-border-image: $path $offsets $repeats;
|
|
-o-border-image: $path $offsets $repeats;
|
|
-webkit-border-image: $path $offsets $repeats;
|
|
border-image: $path $offsets $repeats;
|
|
}
|
|
|
|
@mixin border-radius ($values...) {
|
|
-moz-border-radius: $values;
|
|
-webkit-border-radius: $values;
|
|
border-radius: $values;
|
|
/*-moz-background-clip: padding;
|
|
-webkit-background-clip: padding-box;
|
|
background-clip: padding-box;*/
|
|
}
|
|
|
|
@mixin box-shadow ($values...) {
|
|
-moz-box-shadow: $values;
|
|
-webkit-box-shadow: $values;
|
|
box-shadow: $values;
|
|
}
|
|
|
|
//@mixin box-shadow ($x, $y, $offset, $hex, $ie: $useIEFilters, $inset: null, $spread:null) {
|
|
// -moz-box-shadow: $x $y $offset $spread $hex $inset;
|
|
// -webkit-box-shadow: $x $y $offset $spread $hex $inset;
|
|
// box-shadow: $x $y $offset $spread $hex $inset;
|
|
//
|
|
// @if $ie == 1 {
|
|
// $iecolor: '#' + red($hex) + green($hex) + blue($hex);
|
|
// filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$iecolor}');
|
|
// -ms-filter: quote(progid:DXImageTransform.Microsoft.dropshadow(OffX=#{$x}, OffY=#{$y}, Color='#{$iecolor}'));
|
|
// }
|
|
//}
|
|
|
|
@mixin box-sizing($value) {
|
|
-moz-box-sizing: $value;
|
|
-webkit-box-sizing: $value;
|
|
box-sizing: $value;
|
|
}
|
|
|
|
// requires sass 3.2
|
|
@mixin keyframes($name){
|
|
@-moz-keyframes #{$name} { @content; }
|
|
@-ms-keyframes #{$name} { @content; }
|
|
@-o-keyframes #{$name} { @content; }
|
|
@-webkit-keyframes #{$name} { @content; }
|
|
@keyframes #{$name} { @content; }
|
|
}
|
|
|
|
@mixin linear-gradient($from, $to, $ie: $useIEFilters) {
|
|
@if $ie != 1 { background-color: $to; }
|
|
|
|
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, $from),color-stop(1, $to));
|
|
background-image: -webkit-linear-gradient(top, $from, $to);
|
|
background-image: -moz-linear-gradient(top, $from, $to);
|
|
background-image: -ms-linear-gradient(top, $from, $to);
|
|
background-image: -o-linear-gradient(top, $from, $to);
|
|
background-image: linear-gradient(top, bottom, $from, $to);
|
|
|
|
@if $ie == 1 {
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
|
|
}
|
|
}
|
|
|
|
@mixin horizontal-gradient($startColor: #555, $endColor: #333, $ie: $useIEFilters) {
|
|
@if $ie != 1 { background-color: $endColor; }
|
|
|
|
background-color: $endColor;
|
|
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
|
background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
|
background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
|
|
background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
|
|
background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10
|
|
background-repeat: repeat-x;
|
|
@if $ie == 1 {
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1);
|
|
}
|
|
}
|
|
|
|
@mixin radial-gradient($from, $to, $ie: $useIEFilters) {
|
|
@if $ie != 1 { background-color: $to; }
|
|
|
|
background: -moz-radial-gradient(center, circle cover, $from 0%, $to 100%);
|
|
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, $from), color-stop(100%, $to));
|
|
background: -webkit-radial-gradient(center, circle cover, $from 0%, $to 100%);
|
|
background: -o-radial-gradient(center, circle cover, $from 0%, $to 100%);
|
|
background: -ms-radial-gradient(center, circle cover, $from 0%, $to 100%);
|
|
background: radial-gradient(center, circle cover, $from 0%, $to 100%);
|
|
background-color: $from;
|
|
|
|
@if $ie == 1 {
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}', GradientType=1); /* IE6-9 fallback on horizontal gradient */
|
|
}
|
|
}
|
|
|
|
@mixin perspective($perspective) {
|
|
-moz-perspective: $perspective;
|
|
-ms-perspective: $perspective;
|
|
-webkit-perspective: $perspective;
|
|
perspective: $perspective;
|
|
-moz-transform-style: preserve-3d;
|
|
-ms-transform-style: preserve-3d;
|
|
-webkit-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
@mixin transform ($transforms) {
|
|
-moz-transform: $transforms;
|
|
-o-transform: $transforms;
|
|
-ms-transform: $transforms;
|
|
-webkit-transform: $transforms;
|
|
transform: $transforms;
|
|
}
|
|
|
|
@mixin matrix ($a, $b, $c, $d, $e, $f) {
|
|
-moz-transform: matrix($a, $b, $c, $d, #{$e}px, #{$f}px);
|
|
-o-transform: matrix($a, $b, $c, $d, $e, $f);
|
|
-ms-transform: matrix($a, $b, $c, $d, $e, $f);
|
|
-webkit-transform: matrix($a, $b, $c, $d, $e, $f);
|
|
transform: matrix($a, $b, $c, $d, $e, $f);
|
|
}
|
|
|
|
@mixin rotate ($deg) {
|
|
@include transform(rotate(#{$deg}deg));
|
|
}
|
|
|
|
@mixin scale ($size) {
|
|
@include transform(scale(#{$size}));
|
|
}
|
|
|
|
@mixin translate ($x, $y) {
|
|
@include transform(translate($x, $y));
|
|
}
|
|
|
|
@mixin transition ($value...) {
|
|
-moz-transition: $value;
|
|
-o-transition: $value;
|
|
-ms-transition: $value;
|
|
-webkit-transition: $value;
|
|
transition: $value;
|
|
}
|
|
|
|
@mixin animation($str) {
|
|
-webkit-animation: #{$str};
|
|
-moz-animation: #{$str};
|
|
-ms-animation: #{$str};
|
|
-o-animation: #{$str};
|
|
animation: #{$str};
|
|
}
|
|
|
|
@mixin animation-name($str) {
|
|
-webkit-animation-name: #{$str};
|
|
-moz-animation-name: #{$str};
|
|
-ms-animation-name: #{$str};
|
|
-o-animation-name: #{$str};
|
|
animation-name: #{$str};
|
|
}
|
|
|
|
@mixin animation-duration($str) {
|
|
-webkit-animation-duration: #{$str};
|
|
-moz-animation-duration: #{$str};
|
|
-ms-animation-duration: #{$str};
|
|
-o-animation-duration: #{$str};
|
|
animation-duration: #{$str};
|
|
}
|
|
|
|
@mixin animation-direction($str) {
|
|
-webkit-animation-direction: #{$str};
|
|
-moz-animation-direction: #{$str};
|
|
-ms-animation-direction: #{$str};
|
|
-o-animation-direction: #{$str};
|
|
animation-direction: #{$str};
|
|
}
|
|
|
|
@mixin animation-delay($str) {
|
|
animation-delay:#{$str};
|
|
-o-animation-delay:#{$str};
|
|
-ms-animation-delay:#{$str};
|
|
-webkit-animation-delay:#{$str};
|
|
-moz-animation-delay:#{$str};
|
|
}
|
|
|
|
@mixin animation-iteration-count($str) {
|
|
animation-iteration-count:#{$str};
|
|
-o-animation-iteration-count:#{$str};
|
|
-ms-animation-iteration-count:#{$str};
|
|
-webkit-animation-iteration-count:#{$str};
|
|
-moz-animation-iteration-count:#{$str};
|
|
}
|
|
|
|
@mixin animation-timing-function($str) {
|
|
-webkit-animation-timing-function: #{$str};
|
|
-moz-animation-timing-function: #{$str};
|
|
-ms-animation-timing-function: #{$str};
|
|
-o-animation-timing-function: #{$str};
|
|
animation-timing-function: #{$str};
|
|
}
|
|
|
|
// ==== /CSS3 SASS MIXINS ====
|
|
|
|
@mixin opacity($opacity) {
|
|
opacity: $opacity;
|
|
$opacity-ie: $opacity * 100;
|
|
filter: alpha(opacity=$opacity-ie); //IE8
|
|
}
|
|
|
|
@mixin size($width, $height: $width)
|
|
{
|
|
width: $width;
|
|
height: $height;
|
|
}
|
|
|
|
@mixin clearfix
|
|
{
|
|
&:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
// Placeholder text
|
|
@mixin placeholder($color: $input-color-placeholder) {
|
|
// Firefox
|
|
&::-moz-placeholder {
|
|
color: $color;
|
|
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
|
|
}
|
|
&:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
|
|
&::-webkit-input-placeholder { color: $color; } // Safari and Chrome
|
|
} |