// Border Radius @mixin border-radius($radius: 5px) {
-webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;
}
// Drop shadows @mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: $shadow; -moz-box-shadow: $shadow; box-shadow: $shadow;
}
@mixin no-box-shadow {
box-shadow: 0 0 0; -moz-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0;
}
// Clearfix for clearing floats like a boss h5bp.com/q @mixin clearfix {
zoom: 1; &:before, &:after { display: table; content: ""; zoom: 1; *display: inline; } &:after { clear: both; }
} .clearfix { @include clearfix; }
// Gradients @mixin horizontal-gradient ($startColor: #555, $endColor: #333) {
background-color: $endColor; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)); // Konqueror background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+ background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10 background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10 background-image: linear-gradient(left, $startColor, $endColor); // Le standard filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1); // IE9 and down
}
@mixin vertical-gradient ($startColor: #555, $endColor: #333) {
background-color: $endColor; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+ background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10 background-image: linear-gradient(top, $startColor, $endColor); // The standard filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0); // IE9 and down
}
// Transitions @mixin transition($transition) {
-webkit-transition: $transition; -moz-transition: $transition; -ms-transition: $transition; -o-transition: $transition; transition: $transition;
}
// Opacity @mixin opacity($opacity: 100) {
filter: alpha(opacity=$opacity); -khtml-opacity: $opacity / 100; -moz-opacity: $opacity / 100; opacity: $opacity / 100;
}
// Box sizing @mixin box-sizing($boxmodel) {
-webkit-box-sizing: $boxmodel; -moz-box-sizing: $boxmodel; -ms-box-sizing: $boxmodel; box-sizing: $boxmodel;
}
// Background clipping (from bootstrap-sass) // Heads up: FF 3.6 and under need “padding” instead of “padding-box” @mixin background-clip($clip) {
-webkit-background-clip: $clip; -moz-background-clip: $clip; background-clip: $clip;
}
// Font Stacks @mixin shorthand-font($weight: normal, $size: 14px, $lineHeight: 20px) {
font-size: $size; font-weight: $weight; line-height: $lineHeight;
} @mixin sans-serif-font($weight: normal, $size: 14px, $lineHeight: 20px) {
font-family: $sans-body; font-size: $size; font-weight: $weight; line-height: $lineHeight;
} @mixin serif-font($weight: normal, $size: 14px, $lineHeight: 20px) {
font-family: "Georgia", Times New Roman, Times, serif; font-size: $size; font-weight: $weight; line-height: $lineHeight;
} @mixin monospace-font($weight: normal, $size: 12px, $lineHeight: 20px) {
font-family: "Monaco", Courier New, monospace; font-size: $size; font-weight: $weight; line-height: $lineHeight;
}
// form fields
@mixin input-block-level() {
display: block; width: 100%; min-height: 28px; // Make inputs at least the height of their button counterpart @include box-sizing(border-box); // Makes inputs behave like true block-level elements
}
// Horizontal dividers // ——————- // Dividers (basically an hr) within dropdowns and nav lists @mixin nav-divider($top: e5e5e5, $bottom: $white) {
// IE7 needs a set width since we gave a height. Restricting just // to IE7 to keep the 1px left/right space in other browsers. // It is unclear where IE is getting the extra space that we need // to negative-margin away, but so it goes. *width: 100%; height: 1px; margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px *margin: -5px 0 5px; overflow: hidden; background-color: $top; border-bottom: 1px solid $bottom;
}
// IE7 inline-block // —————- @mixin ie7-inline-block() {
*display: inline; /* IE7 inline-block hack */ *zoom: 1;
}
// IE7 likes to collapse whitespace on either side of the inline-block elements. // Ems because we’re attempting to match the width of a space character. Left // version is for form buttons, which typically come after other elements, and // right version is for icons, which come before. Applying both is ok, but it will // mean that space between those elements will be .6em (~2 space characters) in IE7, // instead of the 1 space in other browsers. @mixin ie7-restore-left-whitespace() {
*margin-left: .3em; &:first-child { *margin-left: 0; }
}
@mixin ie7-restore-right-whitespace() {
*margin-right: .3em; &:last-child { *margin-left: 0; }
}
@mixin at2x($image_name, $w: auto, $h: auto, $extention: ‘.png’) {
background-image: image_url($image_name + $extention); $x2img : $image_name + '@2x' + $extention; @media all and (-webkit-min-device-pixel-ratio : 1.5) { background-image: image_url($x2img); background-size: $w $h; }
}
// The Grid @mixin gridCore($columnWidth, $gutterWidth) {
.row { margin-left: $gutterWidth * -1; @include clearfix(); } [class*="span"] { float: left; margin-left: $gutterWidth; } // Set the container width, and override it for fixed navbars in media queries .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { @include gridCoreSpan($gridColumns, $columnWidth, $gutterWidth); } @include gridCoreSpanX($gridColumns, $columnWidth, $gutterWidth); @include gridCoreOffsetX($gridColumns, $columnWidth, $gutterWidth);
} @mixin gridCoreSpanX($cols, $columnWidth, $gutterWidth) {
@for $i from 1 through $cols { .span#{$i} { @include gridCoreSpan($i, $columnWidth, $gutterWidth) }; }
} @mixin gridCoreSpan($columns, $columnWidth, $gutterWidth) {
width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
} @mixin gridCoreOffsetX($cols, $columnWidth, $gutterWidth) {
@for $i from 1 through $cols { .offset#{$i} { @include gridCoreOffset($i, $columnWidth, $gutterWidth); }; }
} @mixin gridCoreOffset($columns, $columnWidth, $gutterWidth) {
margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns + 1));
}
// responsive grid
@mixin gridFluid($columnWidth, $gutterWidth) {
.row-fluid { width: 100%; @include clearfix(); [class*="span"] { @include input-block-level(); float: left; margin-left: $gutterWidth; *margin-left: $gutterWidth - (.5 / ($gridRowWidth/1px) * 100 * 1%); } [class*="span"]:first-child { margin-left: 0; } // generate .spanX @include gridFluidSpanX($gridColumns, $columnWidth, $gutterWidth); }
} @mixin gridFluidSpanX($cols, $columnWidth, $gutterWidth) {
@for $i from 1 through $cols { .span#{$i} { @include gridFluidSpan($i, $columnWidth, $gutterWidth) }; }
} @mixin gridFluidSpan($columns, $columnWidth, $gutterWidth) {
width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)); *width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) - (.5 / ($gridRowWidth/1px) * 100 * 1%);
}
@mixin gridInput($columnWidth, $gutterWidth) {
input, textarea, .uneditable-input { margin-left: 0; // override margin-left from core grid system } // generate .spanX @include gridInputSpanX($gridColumns, $columnWidth, $gutterWidth);
} @mixin gridInputSpanX($cols, $columnWidth, $gutterWidth) {
@for $i from 1 through $cols { input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i} { @include gridInputSpan($i, $columnWidth, $gutterWidth); } }
} @mixin gridInputSpan($columns, $columnWidth, $gutterWidth) {
width: (($columnWidth) * $columns) + ($gutterWidth * ($columns - 1)) - 10;
}
@mixin makeFluidColumn($columns, $columnWidth, $gutterWidth) {
// This isn't perfect, but it's better than nothing. float: left; margin-left: $gutterWidth; @include gridFluidSpan($columns, $columnWidth, $gutterWidth);
}