diff options
Diffstat (limited to 'xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_mixins.scss')
| -rw-r--r-- | xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_mixins.scss | 530 |
1 files changed, 530 insertions, 0 deletions
diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_mixins.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_mixins.scss new file mode 100644 index 0000000..1731051 --- /dev/null +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_mixins.scss @@ -0,0 +1,530 @@ +// 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; +} |