Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

341 lines (302 sloc) 8.753 kb
@mixin experimental-property($vendors, $property, $value) {
@each $vendor in $vendors {
#{$vendor}-#{$property}: $value;
}
#{$property}: $value;
}
@function scale($original_width, $original_height, $new_width) {
@return ($original_height / $original_width) * $new_width;
}
/* Support (No IE 8) */
@mixin background-scale($original_width, $original_height, $new_width) {
background-size: $new_width, scale($original_height, $original_width, $new_width);
}
@mixin selection($backgroundColor, $textColor, $opacity: 0.8) {
::-moz-selection {
background: rgba($backgroundColor, $opacity);
color: $textColor;
}
::-webkit-selection {
background: rgba($backgroundColor, $opacity);
color: $textColor;
}
::selection {
background: rgba($backgroundColor, $opacity);
color: $textColor;
}
}
@mixin position($top: false, $left: false, $bottom: false, $right: false, $zindex: false) {
position: absolute;
@if type_of($top) == number {
top: $top;
}
@if type_of($left) == number {
left: $left;
}
@if type_of($bottom) == number {
bottom: $bottom;
}
@if type_of($right) == number {
right: $right;
}
@if type_of($zindex) == number {
z-index: $zindex;
}
}
@mixin size($width: false, $height: false) {
content: '';
@if type_of($width) == number {
width: $width;
}
@if type_of($height) == number {
height: $height;
}
}
/* Did compatability check on May 25th, 2012, removed -moz and -webkit */
@mixin box-shadow($x: 0, $y: 0, $blur: 0, $color: transparent, $inset: false) {
@if type-of($x) != list {
@if $inset {
@include experimental-property(-ms, box-shadow, inset $x $y $blur $color);
}
@else {
@include experimental-property(-ms, box-shadow, $x $y $blur $color);
}
}
@else {
@include experimental-property(-ms, box-shadow, $x);
}
}
@mixin box-sizing($value) {
-moz-box-sizing: $value;
box-sizing: $value;
}
@mixin border-radius($radius: false, $topleft: false, $topright: false, $bottomright: false, $bottomleft: false) {
@if type_of($radius) == number {
border-radius: $radius;
}
@if type_of($topleft) == number {
border-top-left-radius: $topleft;
}
@if type_of($topright) == number {
border-top-right-radius: $topright;
}
@if type_of($bottomright) == number {
border-bottom-right-radius: $bottomright;
}
@if type_of($bottomleft) == number {
border-bottom-left-radius: $bottomleft;
}
}
@mixin transition($property: false, $time: 1s, $ease: linear) {
@if $property == none {
@include experimental-property(-webkit -moz -o, transition, none);
}
@else {
@include experimental-property(-webkit -moz -o, transition, $property $time $ease);
}
}
@mixin hires-graphic($file, $type, $width, $height) {
$file_name: $file + '.' + $type;
$retina_name: $file + '_2x.' + $type;
background-image: url('../images/' + $file_name);
@media (-webkit-min-device-pixel-ratio: 2) {
background-image: url('../images/' + $retina_name) !important;
@include experimental-property(-webkit, background-size, $width $height);
}
@media (-moz-min-device-pixel-ratio: 2) {
background-image: url('../images/' + $retina_name) !important;
@include experimental-property(-webkit, background-size, $width $height);
}
@media (-o-min-device-pixel-ratio: 2) {
background-image: url('../images/' + $retina_name) !important;
@include experimental-property(-webkit, background-size, $width $height);
}
@media (min-device-pixel-ratio: 2) {
background-image: url('../images/' + $retina_name) !important;
@include experimental-property(-webkit, background-size, $width $height);
}
}
@mixin sprite($file, $type, $row:1, $col:1, $width: 16px, $height: 16px, $retina: false, $sprite_width: '', $sprite_height: '')
{
width: $width;
height: $height;
background-position: $row * $width $col*$height;
@if $retina AND type_of($sprite_width) == 'number' AND type_of($sprite_height) == 'number' {
@include hires-graphic($file, $type, $sprite_width, $sprite_height);
}
@else {
background-image: url('../images/' + $file + '.' + $type);
}
}
@mixin background-clip($clip)
{
@include experimental-property(-webkit -moz -o, background-clip, $clip);
}
@mixin radial-gradient($firstStopColor, $secondStopColor, $origin: center, $firstStopPosition: 0%, $secondStopPosition: 100%, $shape: ellipse, $size: cover)
{
$kind: $shape $size;
$firstStop: $firstStopColor $firstStopPosition;
$secondStop: $secondStopColor $secondStopPosition;
background-color: $firstStopColor;
background-image: -moz-radial-gradient($origin, $kind, $firstStop, $secondStop);
background-image: -webkit-radial-gradient($origin, $kind, $firstStop, $secondStop);
background-image: -o-radial-gradient($origin, $kind, $firstStop, $secondStop);
background-image: -ms-radial-gradient($origin, $kind, $firstStop, $secondStop);
background-image: radial-gradient($origin, $kind, $firstStop, $secondStop)
}
@mixin linear-gradient($colors, $stops, $direction: top) {
@if type-of($colors) != list {
$first: $colors;
$last: $stops;
background-color: $first; /* Old browsers */
background-image: -moz-linear-gradient(top, $first 0%, $last 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$first), color-stop(100%,$last)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, $first 0%,$last 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, $first 0%,$last 100%); /* Opera11.10+ */
background-image: -ms-linear-gradient(top, $first 0%,$last 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$first}', endColorstr='#{$last}',GradientType=0); /*IE6-9 */
background-image: linear-gradient(top, $first 0%,$last 100%); /* W3C */
}
@else {
$firstColor: '';
$lastColor: '';
$ci: 1;
$list: 0;
@each $color in $colors {
@if $ci == 1 {
$firstColor: $color;
}
@if $ci + 1 == length($colors) {
$lastColor: $color;
}
$list_item: join($color, nth($stops, $ci), space);
@if $list == 0 {
$list: $list_item;
}
@else {
$list: $list, $list_item;
}
$ci: $ci + 1;
}
background-color: $firstColor; /* Old browsers */
background-image: -moz-linear-gradient($direction, $list); /* FF3.6+ */
background-image: -webkit-linear-gradient($direction, $list); /* Chrome10+,Safari5.1+ */
background-image: -ms-linear-gradient($direction, $list); /* Opera11.10+ */
background-image: -o-linear-gradient($direction, $list); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$firstColor}', endColorstr='#{$lastColor}',GradientType=0); /*IE6-9 */
background-image: linear-gradient($direction, $list); /* W3C */
}
}
@function columns($count: 1, $padding: 0) {
$column-width: 60px !default;
$value: $count * $column-width - $padding;
@return $value;
}
@mixin clearfix()
{
&:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
}
@mixin user-select($value) {
@include experimental-property(-webkit -moz -o, user-select, $value);
}
@mixin transform($scaleX: false, $scaleY: false, $scaleZ: false, $translateX: false, $translateY: false, $translateZ: false, $skewX: false, $skewY: false, $skewZ: false, $rotate: false) {
$list: 0;
@if $scaleX {
$list_item: scaleX($scaleX);
@if $list == 0 {
$list: $list_item;
}
@else {
$list: $list $list_item;
}
}
@if $scaleY {
$list_item: scaleY($scaleY);
@if $list == 0 {
$list: $list_item;
}
@else {
$list: $list $list_item;
}
}
@if $scaleZ {
$list_item: scaleZ($scaleZ);
@if $list == 0 {
$list: $list_item;
}
@else {
$list: $list $list_item;
}
}
@if $translateX {
$list_item: translateX($translateX);
@if $list == 0 {
$list: $list_item;
}
@else {
$list: $list $list_item;
}
}
@if $translateY {
$list_item: translateY($translateY);
@if $list == 0 {
$list: $list_item;
}
@else {
$list: $list $list_item;
}
}
@if $translateZ {
$list_item: translateZ($translateZ);
@if $list == 0 {
$list: $list_item;
}
@else {
$list: $list $list_item;
}
}
@if $skewX {
$list_item: skewX($skewX);
@if $list == 0 {
$list: $list_item;
}
@else {
$list: $list $list_item;
}
}
@if $skewY {
$list_item: skewY($skewY);
@if $list == 0 {
$list: $list_item;
}
@else {
$list: $list $list_item;
}
}
@if $skewZ {
$list_item: skewZ($skewZ);
@if $list == 0 {
$list: $list_item;
}
@else {
$list: $list $list_item;
}
}
@if $rotate {
$list_item: rotate($rotate);
@if $list == 0 {
$list: $list_item;
}
@else {
$list: $list $list_item;
}
}
@include experimental-property(-moz -webkit -o, transform, $list);
}
Jump to Line
Something went wrong with that request. Please try again.