Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Tree: c17098015a
Fetching contributors…

Cannot retrieve contributors at this time

82 lines (67 sloc) 2.772 kB
// Border Radius. The background-clip property prevents "leaking the color outside the box"
@mixin border-radius($value: 0) {
border-radius: $value;
background-clip: padding-box;
// Specify columns in the content
@mixin column-count($cols: 1, $gap: 5) {
-webkit-column-count: $cols; -webkit-column-gap: $gap;
-moz-column-count: $cols; -moz-column-gap: $gap;
column-count: $cols; column-gap: $gap;
// Box shadow. To specify no shadow, simply pass in none as the only argument
// Argument should be of x offset, y offset, blur size, color format
@mixin box-shadow($values) {
-webkit-box-shadow: $values;
box-shadow: $values;
// Background gradients. Simple top to bottom gradients only
@mixin background-gradient($from, $to, $start:true) {
@if $start == true { background-color: $from; }
background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($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, $from, $to);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#{$from}", EndColorStr="#{$to}");
// Rotate element. Include 'deg' with no spacing in the argument, ie box-rotate(90deg);
@mixin box-rotate($deg: '0deg') {
-webkit-transform: rotate($deg);
-moz-transform: rotate($deg);
-ms-transform: rotate($deg);
-o-transform: rotate($deg);
transform: rotate($deg);
zoom: 1;
// Box Sizing. Change the default box-model
@mixin box-sizing($value:border-box) {
-webkit-box-sizing: $value; /* safari13+ */
-khtml-box-sizing: $value; /* konqueror */
-moz-box-sizing: $value; /* ff2+ */
-ms-box-sizing: $value; /* ie8+ */
box-sizing: $value; /* css3 reccomendation */
// Make text (un)selectable. Valid values are: none | text | toggle | element | elements | all | inherit
@mixin user-select($value: none) {
-webkit-user-select: $value;
-khtml-user-select: $value;
-moz-user-select: $value;
-o-user-select: $value;
user-select: $value;
// Opacity
@mixin opacity($opacity) {
opacity: $opacity;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity * 100})";
filter: alpha(opacity=$opacity * 100);
// Text Selection override. Defaults to no-element to add the property to the document
@mixin selection($bg: white, $color: black, $shadow: none, $ele: '') {
#{$ele}::-moz-selection, #{$ele}::selection {
background: $bg;
color: $color;
text-shadow: $shadow;
Jump to Line
Something went wrong with that request. Please try again.