142 lines
4.4 KiB
SCSS
142 lines
4.4 KiB
SCSS
/*
|
|
Mixins for borders and gradients
|
|
*/
|
|
|
|
@mixin box-shadow($shadow) {
|
|
-webkit-box-shadow: $shadow;
|
|
-moz-box-shadow: $shadow;
|
|
box-shadow: $shadow;
|
|
}
|
|
|
|
@mixin border-radius($radius) {
|
|
-webkit-border-radius: $radius;
|
|
-moz-border-radius: $radius;
|
|
border-radius: $radius;
|
|
}
|
|
|
|
@mixin linear-gradient($fromColor, $toColor) {
|
|
background-color: $fromColor; /* Fallback Color */
|
|
background-image: -webkit-gradient(linear, left, right, from($fromColor), to($toColor)); /* Saf4+, Chrome */
|
|
background-image: -webkit-linear-gradient(left, $fromColor, $toColor); /* Chrome 10+, Saf5.1+, iOS 5+ */
|
|
background-image: -moz-linear-gradient(left, $fromColor, $toColor); /* FF3.6 */
|
|
background-image: -ms-linear-gradient(left, $fromColor, $toColor); /* IE10 */
|
|
background-image: -o-linear-gradient(left, $fromColor, $toColor); /* Opera 11.10+ */
|
|
background-image: linear-gradient(left, $fromColor, $toColor);
|
|
}
|
|
@mixin linear-gradient-fromtop($fromColor, $toColor) {
|
|
background-color: $fromColor; /* Fallback Color */
|
|
background-image: -webkit-gradient(linear, top, bottom, from($fromColor), to($toColor)); /* Saf4+, Chrome */
|
|
background-image: -webkit-linear-gradient(top, $fromColor, $toColor); /* Chrome 10+, Saf5.1+, iOS 5+ */
|
|
background-image: -moz-linear-gradient(top, $fromColor, $toColor); /* FF3.6 */
|
|
background-image: -ms-linear-gradient(top, $fromColor, $toColor); /* IE10 */
|
|
background-image: -o-linear-gradient(top, $fromColor, $toColor); /* Opera 11.10+ */
|
|
background-image: linear-gradient(top, $fromColor, $toColor);
|
|
}
|
|
|
|
|
|
@mixin radial-gradient($color2, $color1) {
|
|
background: $color2;
|
|
background: -moz-radial-gradient(center, ellipse cover, $color1 0%, $color2 100%);
|
|
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$color1), color-stop(100%,$color2));
|
|
background: -webkit-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%);
|
|
background: -o-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%);
|
|
background: -ms-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%);
|
|
background: radial-gradient(ellipse at center, $color1 0%,$color2 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=1 );
|
|
}
|
|
|
|
@mixin radial-gradient-image($color2, $color1, $image) {
|
|
background: $image, $color2;
|
|
background: $image, -moz-radial-gradient(center, ellipse cover, $color1 0%, $color2 100%);
|
|
background: $image, -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$color1), color-stop(100%,$color2));
|
|
background: $image, -webkit-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%);
|
|
background: $image, -o-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%);
|
|
background: $image, -ms-radial-gradient(center, ellipse cover, $color1 0%,$color2 100%);
|
|
background: $image, radial-gradient(ellipse at center, $color1 0%,$color2 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color1', endColorstr='$color2',GradientType=1 );
|
|
}
|
|
|
|
@mixin transition($duration, $params) {
|
|
-webkit-transition: $duration $params;
|
|
-moz-transition: $duration $params;
|
|
-ms-transition: $duration $params;
|
|
transition: $duration $params;
|
|
}
|
|
|
|
@mixin hyphens($value) {
|
|
-moz-hyphens: $value;
|
|
-o-hyphens: $value;
|
|
-webkit-hyphens: $value;
|
|
-ms-hyphens: $value;
|
|
hyphens: $value;
|
|
}
|
|
|
|
@mixin placeholder($color) {
|
|
::-webkit-input-placeholder {
|
|
color: $color;
|
|
}
|
|
:-moz-placeholder {
|
|
color: $color;
|
|
}
|
|
::-moz-placeholder {
|
|
color: $color;
|
|
}
|
|
:-ms-input-placeholder {
|
|
color: $color;
|
|
}
|
|
}
|
|
|
|
@mixin no-list() {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: none;
|
|
|
|
&:before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@mixin inline-block() {
|
|
display: inline-block;
|
|
*display:inline;
|
|
*zoom:1;
|
|
}
|
|
|
|
@mixin no-margins() {
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
|
|
|
|
@mixin line-height($sizeValue: 14) {
|
|
line-height: floor(($sizeValue * $line-height-base));
|
|
}
|
|
|
|
|
|
// Center block
|
|
@mixin center-block {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
// Clear after (not all clearfix need this also)
|
|
@mixin clearfix-after() {
|
|
clear: both;
|
|
}
|
|
|
|
|
|
@function px2rem($font-size, $base-font-size: 16) {
|
|
@return $font-size / $base-font-size + rem;
|
|
}
|
|
|
|
@mixin px2rem($font-size, $base-font-size: 16, $line: $font-size * 1.4) {
|
|
font-size: $font-size + px; // für den IE8
|
|
line-height: ($line) + px;
|
|
font-size: px2rem($font-size, $base-font-size);
|
|
line-height: ($line / $base-font-size) + rem;
|
|
}
|
|
|