| // ---- | |
| // Sass (v3.4.21) | |
| // Compass (v1.0.3) | |
| // ---- | |
| // ---- | |
| // Sass mixins for various CSS properties and styles. | |
| // | |
| // Thanks to http://demo.dsheiko.com/ccss/ for | |
| // cross-browser tricks | |
| // and to http://www.sassmeister.com/ used for testing | |
| // the sass | |
| // ---- | |
| // **** | |
| // mixin definitions WITH arguments | |
| // **** | |
| // translate2d | |
| // @param | |
| // $x - along x-axis | |
| // $y - along y-axis | |
| // @usage | |
| // @include translate2d(20px,0); | |
| @mixin translate2d($x:50%, $y:50%) { | |
| -webkit-transform: translate($x, $y); | |
| -moz-transform: translate($x, $y); | |
| -ms-transform: translate($x, $y); | |
| -o-transform: translate($x, $y); | |
| transform: translate($x, $y); | |
| } | |
| // opacity | |
| // @param $level - takes 0 to 1 | |
| // @usage | |
| // @include opacity(0.5); | |
| @mixin opacity($level) { | |
| -khtml-opacity: $level; | |
| -moz-opacity: $level; | |
| opacity: $level; | |
| filter: alpha(opacity=$level * 100); | |
| -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $level * 100 + ")"; | |
| } | |
| // border-radius | |
| // @param $radius - radius value - defaults to 5px | |
| // @usage | |
| // @include border-radius(15px); | |
| @mixin border-radius($radius:5px) { | |
| -webkit-border-radius: $radius; | |
| -moz-border-radius: $radius; | |
| -ms-border-radius: $radius; | |
| -o-border-radius: $radius; | |
| border-radius: $radius; | |
| } | |
| // box-shadow | |
| // @param $value - css box shadow values | |
| // @usage | |
| // @include box-shadow(10px 10px 5px #888888); | |
| @mixin box-shadow($value) { | |
| -webkit-box-shadow: $value; | |
| -moz-box-shadow: $value; | |
| box-shadow: $value; | |
| } | |
| // box-sizing | |
| // applies box sizing depending upon the value passed | |
| // @param | |
| // $sizing - can take the following values: | |
| // - border - applies border-box | |
| // - content - applies content-box | |
| // - initial | |
| // - inherit | |
| // @usage | |
| // @include box-sizing(border); | |
| @mixin box-sizing($sizing) { | |
| @if $sizing == border { | |
| $sizing: border-box; | |
| } @else if $sizing == content { | |
| $sizing: content-box; | |
| } | |
| -webkit-box-sizing: $sizing; | |
| -moz-box-sizing: $sizing; | |
| -ms-box-sizing: $sizing; | |
| box-sizing: $sizing; | |
| } | |
| // **** | |
| // mixin definitions WITHOUT arguments | |
| // **** | |
| // absolute-center | |
| // centers the element w.r.t a relative positioned parent element | |
| // using absolute positioning | |
| // height and width can be customized | |
| // @usage | |
| // @include absolute-center; | |
| @mixin absolute-center { | |
| width: 50%; | |
| height: 50%; | |
| overflow: auto; | |
| margin: auto; | |
| position: absolute; | |
| top: 0; left: 0; bottom: 0; right: 0; | |
| } | |
| // translate-center | |
| // centers the element w.r.t a relative positioned parent element | |
| // using translate | |
| // @usage | |
| // @include translate-center; | |
| @mixin translate-center { | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| @include translate2d(-50%,-50%); | |
| } |
Contains general SASS mixins for most used cross-browser CSS styles.