// // Mixins // -------------------------------------------------- // Clearfix // Source: http://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. .clearfix() { &:before, &:after { content: " "; // 1 display: table; // 2 } &:after { clear: both; } } // Center-align a block level element .center-block() { display: block; margin-left: auto; margin-right: auto; } // Sizing shortcuts .size(@width; @height) { width: @width; height: @height; } .square(@size) { .size(@size; @size); } // CSS3 PROPERTIES // -------------------------------------------------- // Single side border-radius .border-top-radius(@radius) { border-top-right-radius: @radius; border-top-left-radius: @radius; } .border-right-radius(@radius) { border-bottom-right-radius: @radius; border-top-right-radius: @radius; } .border-bottom-radius(@radius) { border-bottom-right-radius: @radius; border-bottom-left-radius: @radius; } .border-left-radius(@radius) { border-bottom-left-radius: @radius; border-top-left-radius: @radius; } // Drop shadows // // Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's // supported browsers that have box shadow capabilities now support the // standard `box-shadow` property. .box-shadow(@shadow) { -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 box-shadow: @shadow; } // Transitions .transition(@transition) { -webkit-transition: @transition; transition: @transition; } .transition-property(@transition-property) { -webkit-transition-property: @transition-property; transition-property: @transition-property; } .transition-delay(@transition-delay) { -webkit-transition-delay: @transition-delay; transition-delay: @transition-delay; } .transition-duration(@transition-duration) { -webkit-transition-duration: @transition-duration; transition-duration: @transition-duration; } .transition-transform(@transition) { -webkit-transition: -webkit-transform @transition; -moz-transition: -moz-transform @transition; -o-transition: -o-transform @transition; transition: transform @transition; } // Transformations .rotate(@degrees) { -webkit-transform: rotate(@degrees); -ms-transform: rotate(@degrees); // IE9 only transform: rotate(@degrees); } .scale(@ratio; @ratio-y...) { -webkit-transform: scale(@ratio, @ratio-y); -ms-transform: scale(@ratio, @ratio-y); // IE9 only transform: scale(@ratio, @ratio-y); } .translate(@x; @y) { -webkit-transform: translate(@x, @y); -ms-transform: translate(@x, @y); // IE9 only transform: translate(@x, @y); } .skew(@x; @y) { -webkit-transform: skew(@x, @y); -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ transform: skew(@x, @y); } .translate3d(@x; @y; @z) { -webkit-transform: translate3d(@x, @y, @z); transform: translate3d(@x, @y, @z); } .rotateX(@degrees) { -webkit-transform: rotateX(@degrees); -ms-transform: rotateX(@degrees); // IE9 only transform: rotateX(@degrees); } .rotateY(@degrees) { -webkit-transform: rotateY(@degrees); -ms-transform: rotateY(@degrees); // IE9 only transform: rotateY(@degrees); } .perspective(@perspective) { -webkit-perspective: @perspective; -moz-perspective: @perspective; perspective: @perspective; } .perspective-origin(@perspective) { -webkit-perspective-origin: @perspective; -moz-perspective-origin: @perspective; perspective-origin: @perspective; } .transform-origin(@origin) { -webkit-transform-origin: @origin; -moz-transform-origin: @origin; -ms-transform-origin: @origin; // IE9 only transform-origin: @origin; } // Animations .animation(@animation) { -webkit-animation: @animation; animation: @animation; } .animation-name(@name) { -webkit-animation-name: @name; animation-name: @name; } .animation-duration(@duration) { -webkit-animation-duration: @duration; animation-duration: @duration; } .animation-timing-function(@timing-function) { -webkit-animation-timing-function: @timing-function; animation-timing-function: @timing-function; } .animation-delay(@delay) { -webkit-animation-delay: @delay; animation-delay: @delay; } .animation-iteration-count(@iteration-count) { -webkit-animation-iteration-count: @iteration-count; animation-iteration-count: @iteration-count; } .animation-direction(@direction) { -webkit-animation-direction: @direction; animation-direction: @direction; } // Backface visibility // Prevent browsers from flickering when using CSS 3D transforms. // Default value is `visible`, but can be changed to `hidden` .backface-visibility(@visibility){ -webkit-backface-visibility: @visibility; -moz-backface-visibility: @visibility; backface-visibility: @visibility; } // Box sizing .box-sizing(@boxmodel) { -webkit-box-sizing: @boxmodel; -moz-box-sizing: @boxmodel; box-sizing: @boxmodel; } // User select // For selecting text on the page .user-select(@select) { -webkit-user-select: @select; -moz-user-select: @select; -ms-user-select: @select; // IE10+ -o-user-select: @select; user-select: @select; } // Opacity .opacity(@opacity) { opacity: @opacity; // IE8 filter @opacity-ie: (@opacity * 100); filter: ~"alpha(opacity=@{opacity-ie})"; } // GRADIENTS // -------------------------------------------------- #gradient { // Horizontal gradient, from left to right // // Creates two color stops, start and end, by specifying a color and position for each color stop. // Color stops are not available in IE9 and below. .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1-6, Chrome 10+ background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ background-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down } // Vertical gradient, from top to bottom // // Creates two color stops, start and end, by specifying a color and position for each color stop. // Color stops are not available in IE9 and below. .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ background-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down } .directional(@start-color: #555; @end-color: #333; @deg: 45deg) { background-repeat: repeat-x; background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+ background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ } .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color); background-repeat: no-repeat; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback } .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color); background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color); background-repeat: no-repeat; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback } .radial(@inner-color: #555; @outer-color: #333) { background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color); background-image: radial-gradient(circle, @inner-color, @outer-color); background-repeat: no-repeat; } .striped(@color: rgba(255,255,255,.15); @angle: 45deg) { background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); } } // Reset filters for IE // // When you need to remove a gradient background, do not forget to use this to reset // the IE filter for IE9 and below. .reset-filter() { filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); } // Retina images // // Short retina mixin for setting background-image and -size .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { background-image: url("@{file-1x}"); @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { background-image: url("@{file-2x}"); background-size: @width-1x @height-1x; } }