// Clearfix // Source: nicolasgallagher.com/micro-clearfix-hack/ // // For modern browsers // 1. The space content is one way to avoid an Opera bug when the // contenteditable attribute is included anywhere else in the document. // Otherwise it causes space to appear at the top and bottom of elements // that are clearfixed. // 2. The use of `table` rather than `block` is only necessary if using // `:before` to contain the top-margins of child elements. @mixin clearfix {
&:before, &:after { content: ' '; // 1 display: table; // 2 } &:after { clear: both; }
}
@mixin vendor-prefix($name, $argument) {
-webkit-#{$name}: #{$argument}; -ms-#{$name}: #{$argument}; -moz-#{$name}: #{$argument}; -o-#{$name}: #{$argument}; #{$name}: #{$argument};
}
@mixin margin-top-bu ($bu, $font-size: $font-size-regular, $line-height: $line-height-ratio) {
margin-top: capline-bu($bu, $font-size, $line-height);
}
@mixin margin-bottom-bu ($bu, $font-size: $font-size-regular, $line-height: $line-height-ratio) {
margin-bottom: baseline-bu($bu, $font-size, $line-height);
}
@mixin padding-top-bu ($bu, $font-size: $font-size-regular, $line-height: $line-height-ratio) {
padding-top: capline-bu($bu, $font-size, $line-height);
}
@mixin padding-bottom-bu ($bu, $font-size: $font-size-regular, $line-height: $line-height-ratio) {
padding-bottom: baseline-bu($bu, $font-size, $line-height);
}
@mixin box-shadow($shadow) {
-webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 box-shadow: $shadow;
}
@mixin font-face($font-family, $svg-font-id, $filepath, $weight: normal, $style: normal) {
@font-face { font-family: $font-family; font-style: $style; font-weight: $weight; src: url('#{$filepath}.eot'); src: url('#{$filepath}.eot?#iefix') format('embedded-opentype'), // alternative replace this line with: src: local('\263A'), // for smileyface syntax url('#{$filepath}.woff') format('woff'), url('#{$filepath}.ttf') format('truetype'), url('#{$filepath}.svg##{$svg-font-id}') format('svg'); }
}
@mixin linear-gradient($color1, $color2) {
background: $color1; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, $color1), color-stop(1, $color2)); background: -webkit-linear-gradient(top, $color1, $color2); background: -moz-linear-gradient(top, $color1, $color2); background: -o-linear-gradient(top, $color1, $color2); background: -ms-linear-gradient(top, $color1, $color2); background: linear-gradient(top, $color1, $color2); filter: unquote('"progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$color1}", endColorstr="#{$color2}",GradientType=0)"');
}
@mixin headline-variant($size) {
font-size: $size; margin-top: $heading-margin-top - capline-pixels($size, $line-height-regular); padding-bottom: $heading-margin-bottom - baseline-pixels($size, $line-height-regular); &.underline, &.cluster { margin-top: 55px - capline-pixels($size, $line-height-regular); }
}
@mixin price-variant($size) {
font-size: $size; $font-size-cent: ceil($size * $price-cent-factor); > sup { font-size: $font-size-cent; top: floor(capline-pixels($size, $line-height-regular)) - ceil(capline-pixels($font-size-cent, $line-height-regular)); }
}
@mixin emphasis-variant($color, $inactive: false) {
color: $color; mark { color: $color-bright; background-color: $color; }
}
@mixin table-row-variant($variant, $color, $color-background, $theme-background-color) {
.table { > thead, > tbody, > tfoot { > tr { &.#{$variant} > th, &.#{$variant} > td, > th.#{$variant}, > td.#{$variant} { @if $variant == 'brand' or $variant == 'inactive' { background: $color-background; } @else { background: fallback-rgba($color-background, $table-bgr-color-alpha, $theme-background-color); } color: $color; } } } } @if $variant != 'inactive' { .table-hover { > tbody > tr:hover { &.#{$variant} > th, &.#{$variant} > td, > th.#{$variant}, > td.#{$variant} { color: hsv-darken($color, 7%, true); @if $variant == 'brand' { background-color: hsv-darken($color-background, 7%, true); } @else { background-color: fallback-rgba($color-background, $table-bgr-color-hover-alpha, $theme-background-color); } } } } }
}
@mixin table-striped-variant($color-odd, $color-odd-bg) {
> tbody > tr:nth-child(odd), > tbody > tr.odd { > th, > td { background-color: $color-odd-bg; color: $color-odd; } } &.table-hover { > tbody > tr:nth-child(odd):hover { > th, > td { background-color: hsv-darken($color-odd-bg, 7%, true); color: hsv-darken($color-odd, 7%, true); } } }
}
@mixin box-sizing($box-model) {
-webkit-box-sizing: $box-model; -moz-box-sizing: $box-model; box-sizing: $box-model;
}
@mixin border-top-radius($radius) {
border-top-left-radius: $radius; border-top-right-radius: $radius;
}
@mixin border-right-radius($radius) {
border-top-right-radius: $radius; border-bottom-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
border-bottom-left-radius: $radius; border-bottom-right-radius: $radius;
}
@mixin border-left-radius($radius) {
border-top-left-radius: $radius; border-bottom-left-radius: $radius;
}
@mixin button-variant($color-text, $color-background, $color-border) {
color: $color-text; background-color: $color-background; border-color: $color-border; &.focus, &:focus { color: $color-text; } &.hover, &:hover { color: $color-text; background-color: hsv-darken($color-background, 7%, true); border-color: hsv-darken($color-border, 7%, true); } &.active, &:active { color: $color-text; background-color: hsv-darken($color-background, 13.75%, true); border-color: hsv-darken($color-border, 15%, true); } &.disabled, &[disabled] { &, &.focus, &:focus, &.hover, &:hover { color: hsv-lighten($font-color-regular, 50%, true); background: hsv-lighten($color-element-background, 5%, true); border-color: hsv-lighten($color-element-border, 14%, true); } }
}
@mixin badge-variant($color, $font-color: null) {
background-color: $color; color: $font-color;
}
@mixin opacity($value) {
-moz-opacity: $value; -khtml-opacity: $value; opacity: $value; $opacity-ie: ($opacity * 100); -ms-filter: unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity-ie})'); filter: unquote('alpha(opacity=#{$opacity-ie})');
}
@mixin input-decoration-variant($background-color, $border-color, $theme-background-color) {
$calculated-border-color: hsv-darken($border-color, 15%, true); .form-input { background-color: fallback-rgba($background-color, .05, $theme-background-color); border-color: $calculated-border-color; &.hover, &:hover { background-color: fallback-rgba($background-color, .1, $theme-background-color); border-color: hsv-darken($calculated-border-color, 7%, true); } &.focus, &:focus { background-color: $color-bright; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten($calculated-border-color, 20%); } &.active, &:active { background-color: fallback-rgba($background-color, .15, $theme-background-color); border-color: hsv-darken($calculated-border-color, 15%, true); } }
}
@mixin placeholder($color) {
&::-webkit-input-placeholder { color: $color; } // Safari, Chrome, Opera 15+ &:-moz-placeholder { color: $color; } // FF 4-18 &::-moz-placeholder { color: $color; } // FF 19+ &:-ms-input-placeholder { color: $color; } // IE10+
}
@mixin transition($transition, $type: '') {
-webkit-transition#{$type}: $transition; -moz-transition#{$type}: $transition; -ms-transition#{$type}: $transition; -o-transition#{$type}: $transition; transition#{$type}: $transition;
}
@mixin user-select($value) {
-webkit-user-select: $value; -khtml-user-select: $value; -moz-user-select: $value; -o-user-select: $value; user-select: $value;
}
@mixin pagination-variant($width, $height, $gutter) {
> li { > a, > span { width: $width; height: $height; margin: 0 ($gutter / 2); } }
}
@mixin notification-variant($background-color, $border-color, $font-color: $font-color-regular) {
$calculated-border-color: hsv-darken($border-color, 15%, true); $calculated-bgr-color: fallback-rgba($background-color, .05, $background-color-regular); background-color: $calculated-bgr-color; // background-color: rgba($background-color, .05); since alpha is to low border-color: $calculated-border-color; color: $font-color; > .notification-badge { background-color: $font-color; color: $calculated-bgr-color; } > .close { &.focus, &:focus { color: hsv-darken($font-color, 21%, true); // -21% } &.hover, &:hover { color: hsv-darken($font-color, 7%, true); // -7% } &.active, &:active { color: hsv-darken($font-color, 15%, true); // -15% } }
}
@mixin ellipsis() {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@mixin content-list-item-variant($name, $font-color, $background-color) {
.content-list-item-#{$name} { color: $font-color; background-color: $background-color; } a.content-list-item-#{$name} { color: $font-color; // focus = browser default - so not defined &.hover, &:hover { background-color: hsv-darken($background-color, 7%, true); } &.active, &:active { background-color: hsv-darken($background-color, 15%, true); } }
}
@mixin tab-focus() {
// Default outline: thin dotted; // WebKit outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;
}
@mixin form-control-focus($bgr-color, $color: $input-border-color-focus) {
$color-rgba: rgba(red($color), green($color), blue($color), .6); &.focus, &:focus { background-color: $bgr-color; border-color: $color; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px $color-rgba; }
}
@mixin color-variant($name, $color, $saturation: false) {
.bg-#{$name} { background-color: $color; } @if ($saturation) { .bg-#{$name}-25 { background-color: fallback-rgba($color, .25, $background-color-regular); } .bg-#{$name}-50 { background-color: fallback-rgba($color, .5, $background-color-regular); } .bg-#{$name}-75 { background-color: fallback-rgba($color, .75, $background-color-regular); } }
}
@mixin container-fixed($offset: 0) {
// default @if $grid-large-container-width { @media screen and (min-width: #{$grid-large-min}px) and (max-width: #{$grid-large-max}px) { width: (($grid-large-container-width + 1) * 1px) + $offset; } } // down-sizing @if $grid-medium-container-width { @media screen and (max-width: #{$grid-medium-max}px) { width: (($grid-medium-container-width + 1) * 1px) + $offset; } } @if $grid-small-container-width { @media screen and (max-width: #{$grid-small-max}px) { width: (($grid-small-container-width + 1) * 1px) + $offset; } } @if $grid-extra-small-container-width { @media screen and (max-width: #{$grid-extra-small-max}px) { width: (($grid-extra-small-container-width + 1) * 1px) + $offset; } } // up-sizing @if $grid-extra-large-container-width { @media screen and (min-width: #{$grid-extra-large-min}px) { width: (($grid-extra-large-container-width + 1) * 1px) + $offset; } }
}