531 lines
18 KiB
SCSS
531 lines
18 KiB
SCSS
// Mixins.less
|
|
// Snippets of reusable CSS to develop faster and keep code readable
|
|
// -----------------------------------------------------------------
|
|
|
|
|
|
// UTILITY MIXINS
|
|
// --------------------------------------------------
|
|
|
|
// Clearfix
|
|
// --------
|
|
// For clearing floats like a boss h5bp.com/q
|
|
@mixin clearfix() {
|
|
*zoom: 1;
|
|
&:before,
|
|
&:after {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
&:after {
|
|
clear: both;
|
|
}
|
|
}
|
|
.clearfix { @include clearfix(); }
|
|
|
|
// Webkit-style focus
|
|
// ------------------
|
|
@mixin tab-focus() {
|
|
// Default
|
|
outline: thin dotted #333;
|
|
// Webkit
|
|
outline: 5px auto -webkit-focus-ring-color;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
// Center-align a block level element
|
|
// ----------------------------------
|
|
@mixin center-block() {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
// Sizing shortcuts
|
|
// -------------------------
|
|
@mixin size($height: 5px, $width: 5px) {
|
|
width: $width;
|
|
height: $height;
|
|
}
|
|
@mixin square($size: 5px) {
|
|
@include size($size, $size);
|
|
}
|
|
|
|
// Placeholder text
|
|
// -------------------------
|
|
@mixin placeholder($color: $placeholderText) {
|
|
:-moz-placeholder {
|
|
color: $color;
|
|
}
|
|
::-webkit-input-placeholder {
|
|
color: $color;
|
|
}
|
|
}
|
|
|
|
// Text overflow
|
|
// ------------------------
|
|
@mixin text-overflow() {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
// FONTS
|
|
// --------------------------------------------------
|
|
@mixin font-family-serif() {
|
|
font-family: Georgia, "Times New Roman", Times, serif;
|
|
}
|
|
@mixin font-family-sans-serif() {
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
}
|
|
@mixin font-family-monospace() {
|
|
font-family: Menlo, Monaco, "Courier New", monospace;
|
|
}
|
|
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
|
font-size: $size;
|
|
font-weight: $weight;
|
|
line-height: $lineHeight;
|
|
}
|
|
@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
|
@include font-family-serif();
|
|
@include font-shorthand($size, $weight, $lineHeight);
|
|
}
|
|
@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
|
@include font-family-sans-serif();
|
|
@include font-shorthand($size, $weight, $lineHeight);
|
|
}
|
|
@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
|
@include font-family-monospace();
|
|
@include font-shorthand($size, $weight, $lineHeight);
|
|
}
|
|
|
|
|
|
|
|
// GRID SYSTEM
|
|
// --------------------------------------------------
|
|
|
|
// Site container
|
|
// -------------------------
|
|
@mixin container-fixed() {
|
|
width: $gridRowWidth;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
@include clearfix();
|
|
}
|
|
|
|
// Le grid system
|
|
// -------------------------
|
|
|
|
// Setup the mixins to be used
|
|
@mixin gridSystemColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
|
|
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
|
}
|
|
@mixin gridSystemOffset($gridColumnWidth, $gridGutterWidth, $columns) {
|
|
margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
|
|
}
|
|
@mixin gridSystemGridColumn($gridGutterWidth) {
|
|
float: left;
|
|
margin-left: $gridGutterWidth;
|
|
}
|
|
// Take these values and mixins, and make 'em do their thang
|
|
@mixin gridSystemGenerate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
|
// Row surrounds the columns
|
|
.row {
|
|
margin-left: $gridGutterWidth * -1;
|
|
@include clearfix();
|
|
}
|
|
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
|
|
[class*="span"] {
|
|
@include gridSystemGridColumn($gridGutterWidth);
|
|
}
|
|
// Default columns
|
|
@for $i from 1 through $gridColumns {
|
|
.span#{$i} { @include gridSystemColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i) }
|
|
}
|
|
.container { @include gridSystemColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $gridColumns) }
|
|
|
|
// Offset column options
|
|
@for $i from 1 through $gridColumns - 1 {
|
|
.offset#{$i} { @include gridSystemOffset($gridColumnWidth, $gridGutterWidth, $i) }
|
|
}
|
|
}
|
|
|
|
// Fluid grid system
|
|
// -------------------------
|
|
@mixin fluidGridSystemColumns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) {
|
|
width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
|
|
}
|
|
@mixin fluidGridSystemGridColumn($fluidGridGutterWidth) {
|
|
float: left;
|
|
margin-left: $fluidGridGutterWidth;
|
|
}
|
|
// Take these values and mixins, and make 'em do their thang
|
|
@mixin fluidGridSystemGenerate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
|
// Row surrounds the columns
|
|
.row-fluid {
|
|
width: 100%;
|
|
@include clearfix();
|
|
|
|
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
|
|
> [class*="span"] {
|
|
@include fluidGridSystemGridColumn($fluidGridGutterWidth);
|
|
}
|
|
> [class*="span"]:first-child {
|
|
margin-left: 0;
|
|
}
|
|
// Default columns
|
|
@for $i from 1 through $gridColumns {
|
|
> .span#{$i} { @include fluidGridSystemColumns($fluidGridGutterWidth, $fluidGridColumnWidth, $i); }
|
|
}
|
|
}
|
|
}
|
|
|
|
// Input grid system
|
|
// -------------------------
|
|
@mixin inputGridSystemInputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
|
|
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
|
|
}
|
|
@mixin inputGridSystemGenerate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
|
input, textarea, .uneditable-input {
|
|
@for $i from 1 through $gridColumns {
|
|
&.span#{$i} { @include inputGridSystemInputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $i); }
|
|
}
|
|
}
|
|
}
|
|
|
|
// Make a grid
|
|
// -------------------------
|
|
// Use makeRow() and makeColumn() to assign semantic layouts grid system behaviour
|
|
@mixin makeRow() {
|
|
margin-left: $gridGutterWidth * -1;
|
|
@include clearfix();
|
|
}
|
|
@mixin makeColumn($columns: 1) {
|
|
float: left;
|
|
margin-left: $gridGutterWidth;
|
|
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
|
}
|
|
|
|
|
|
// Form field states (used in forms.less)
|
|
// --------------------------------------------------
|
|
|
|
// Mixin for form field states
|
|
@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
|
|
// Set the text color
|
|
> label, .help-block, .help-inline {
|
|
color: $textColor;
|
|
}
|
|
// Style inputs accordingly
|
|
input, select, textarea {
|
|
color: $textColor;
|
|
border-color: $borderColor;
|
|
&:focus {
|
|
border-color: darken($borderColor, 10%);
|
|
@include box-shadow(0 0 6px lighten($borderColor, 20%));
|
|
}
|
|
}
|
|
// Give a small background color for input-prepend/-append
|
|
.input-prepend .add-on, .input-append .add-on {
|
|
color: $textColor;
|
|
background-color: $backgroundColor;
|
|
border-color: $textColor;
|
|
}
|
|
}
|
|
|
|
|
|
// CSS3 PROPERTIES
|
|
// --------------------------------------------------
|
|
|
|
// 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;
|
|
}
|
|
|
|
// Transitions
|
|
@mixin transition($transition) {
|
|
-webkit-transition: $transition;
|
|
-moz-transition: $transition;
|
|
-ms-transition: $transition;
|
|
-o-transition: $transition;
|
|
transition: $transition;
|
|
}
|
|
|
|
// Transformations
|
|
@mixin rotate($degrees) {
|
|
-webkit-transform: rotate($degrees);
|
|
-moz-transform: rotate($degrees);
|
|
-ms-transform: rotate($degrees);
|
|
-o-transform: rotate($degrees);
|
|
transform: rotate($degrees);
|
|
}
|
|
@mixin scale($ratio) {
|
|
-webkit-transform: scale($ratio);
|
|
-moz-transform: scale($ratio);
|
|
-ms-transform: scale($ratio);
|
|
-o-transform: scale($ratio);
|
|
transform: scale($ratio);
|
|
}
|
|
@mixin translate($x: 0, $y: 0) {
|
|
-webkit-transform: translate($x, $y);
|
|
-moz-transform: translate($x, $y);
|
|
-ms-transform: translate($x, $y);
|
|
-o-transform: translate($x, $y);
|
|
transform: translate($x, $y);
|
|
}
|
|
|
|
@mixin skew($x: 0, $y: 0) {
|
|
-webkit-transform: skew($x, $y);
|
|
-moz-transform: skew($x, $y);
|
|
-ms-transform: skew($x, $y);
|
|
-o-transform: skew($x, $y);
|
|
transform: skew($x, $y);
|
|
}
|
|
|
|
@mixin translate3d($x: 0, $y: 0, $z: 0) {
|
|
-webkit-transform: translate($x, $y, $z);
|
|
-moz-transform: translate($x, $y, $z);
|
|
-ms-transform: translate($x, $y, $z);
|
|
-o-transform: translate($x, $y, $z);
|
|
transform: translate($x, $y, $z);
|
|
}
|
|
|
|
// Background clipping
|
|
// 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;
|
|
}
|
|
|
|
// Background sizing
|
|
@mixin background-size($size){
|
|
-webkit-background-size: $size;
|
|
-moz-background-size: $size;
|
|
-o-background-size: $size;
|
|
background-size: $size;
|
|
}
|
|
|
|
|
|
// Box sizing
|
|
@mixin box-sizing($boxmodel) {
|
|
-webkit-box-sizing: $boxmodel;
|
|
-moz-box-sizing: $boxmodel;
|
|
box-sizing: $boxmodel;
|
|
}
|
|
|
|
// User select
|
|
// For selecting text on the page
|
|
@mixin user-select($select) {
|
|
-webkit-user-select: $select;
|
|
-moz-user-select: $select;
|
|
-o-user-select: $select;
|
|
user-select: $select;
|
|
}
|
|
|
|
// Resize anything
|
|
@mixin resizable($direction: both) {
|
|
resize: $direction; // Options: horizontal, vertical, both
|
|
overflow: auto; // Safari fix
|
|
}
|
|
|
|
// CSS3 Content Columns
|
|
@mixin content-columns($columnCount, $columnGap: $gridColumnGutter) {
|
|
-webkit-column-count: $columnCount;
|
|
-moz-column-count: $columnCount;
|
|
column-count: $columnCount;
|
|
-webkit-column-gap: $columnGap;
|
|
-moz-column-gap: $columnGap;
|
|
column-gap: $columnGap;
|
|
}
|
|
|
|
// Opacity
|
|
@mixin opacity($opacity: 1) {
|
|
opacity: $opacity;
|
|
filter: alpha(opacity=$opacity * 100);
|
|
}
|
|
|
|
|
|
|
|
// BACKGROUNDS
|
|
// --------------------------------------------------
|
|
|
|
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
|
@mixin translucent-background($color: $white, $alpha: 1) {
|
|
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
|
}
|
|
@mixin translucent-border($color: $white, $alpha: 1) {
|
|
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
|
@include background-clip(padding-box);
|
|
}
|
|
|
|
// Gradient Bar Colors for buttons and alerts
|
|
@mixin gradientBar($primaryColor, $secondaryColor) {
|
|
@include gradient-vertical($primaryColor, $secondaryColor);
|
|
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
|
|
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
|
}
|
|
|
|
// Gradients
|
|
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
|
|
background-color: $endColor;
|
|
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, 0 0, 100% 0, from($startColor), to($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
|
|
background-repeat: repeat-x;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1); // IE9 and down
|
|
}
|
|
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
|
|
background-color: mix($startColor, $endColor, 60%);
|
|
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, 0 0, 0 100%, from($startColor), to($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
|
|
background-repeat: repeat-x;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down
|
|
}
|
|
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
|
|
background-color: $endColor;
|
|
background-repeat: repeat-x;
|
|
background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
|
|
background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
|
|
background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
|
background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
|
|
background-image: linear-gradient($deg, $startColor, $endColor); // The standard
|
|
}
|
|
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
|
background-color: mix($midColor, $endColor, 80%);
|
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
|
|
background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
|
background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
|
|
background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
|
background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
|
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
|
|
background-repeat: no-repeat;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
|
|
}
|
|
@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
|
|
background-color: $outerColor;
|
|
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
|
|
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
|
|
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
|
|
background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
|
|
background-repeat: no-repeat;
|
|
// Opera cannot do radial gradients yet
|
|
}
|
|
@mixin gradient-striped($color, $angle: -45deg) {
|
|
background-color: $color;
|
|
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
|
|
background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
|
background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
|
background-image: -ms-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
|
background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
|
background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0));
|
|
}
|
|
// Reset filters for IE
|
|
@mixin reset-filter() {
|
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
|
}
|
|
|
|
|
|
// Mixin for generating button backgrounds
|
|
// ---------------------------------------
|
|
@mixin buttonBackground($startColor, $endColor) {
|
|
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
|
@include gradientBar($startColor, $endColor);
|
|
@include reset-filter();
|
|
|
|
// in these cases the gradient won't cover the background, so we override
|
|
&:hover, &:active, &.active, &.disabled, &[disabled] {
|
|
background-color: $endColor;
|
|
}
|
|
|
|
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
|
|
&:active, &.active {
|
|
background-color: darken($endColor, 10%) \9;
|
|
}
|
|
}
|
|
|
|
|
|
// COMPONENT MIXINS
|
|
// --------------------------------------------------
|
|
|
|
// POPOVER ARROWS
|
|
// -------------------------
|
|
// For tipsies and popovers
|
|
@mixin popoverArrowTop($arrowWidth: 5px) {
|
|
bottom: 0;
|
|
left: 50%;
|
|
margin-left: -$arrowWidth;
|
|
border-left: $arrowWidth solid transparent;
|
|
border-right: $arrowWidth solid transparent;
|
|
border-top: $arrowWidth solid $black;
|
|
}
|
|
@mixin popoverArrowLeft($arrowWidth: 5px) {
|
|
top: 50%;
|
|
right: 0;
|
|
margin-top: -$arrowWidth;
|
|
border-top: $arrowWidth solid transparent;
|
|
border-bottom: $arrowWidth solid transparent;
|
|
border-left: $arrowWidth solid $black;
|
|
}
|
|
@mixin popoverArrowBottom($arrowWidth: 5px) {
|
|
top: 0;
|
|
left: 50%;
|
|
margin-left: -$arrowWidth;
|
|
border-left: $arrowWidth solid transparent;
|
|
border-right: $arrowWidth solid transparent;
|
|
border-bottom: $arrowWidth solid $black;
|
|
}
|
|
@mixin popoverArrowRight($arrowWidth: 5px) {
|
|
top: 50%;
|
|
left: 0;
|
|
margin-top: -$arrowWidth;
|
|
border-top: $arrowWidth solid transparent;
|
|
border-bottom: $arrowWidth solid transparent;
|
|
border-right: $arrowWidth solid $black;
|
|
}
|