diff options
Diffstat (limited to 'assets/less/mixins.less')
| -rw-r--r-- | assets/less/mixins.less | 305 |
1 files changed, 0 insertions, 305 deletions
diff --git a/assets/less/mixins.less b/assets/less/mixins.less deleted file mode 100644 index a408b7d..0000000 --- a/assets/less/mixins.less +++ /dev/null @@ -1,305 +0,0 @@ -// UTILITY MIXINS -// -------------------------------------------------- - -// Clearfix -// -------------------- -// For clearing floats like a boss h5bp.com/q -.clearfix { - *zoom: 1; - &:before, - &:after { - display: table; - content: ""; - // Fixes Opera/contenteditable bug: - // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 - line-height: 0; - } - &:after { - clear: both; - } -} - -// Webkit-style focus -// -------------------- -.tab-focus() { - // Default - outline: thin dotted #333; - // Webkit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - -// Center-align a block level element -// ---------------------------------- -.center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} - -// TYPOGRAPHY -// -------------------------------------------------- - -// Full-fat vertical rhythm -// ------------------------ -.font-size(@size) { - font-size: 0px + @size; - font-size: 0rem + @size / @doc-font-size; - line-height: 0 + round(@doc-line-height / @size*10000) / 10000; - margin-bottom: 0px + @doc-line-height; - margin-bottom: 0rem + (@doc-line-height / @doc-font-size); -} - -// Just the REMs -// ------------- -.font-rem(@size) { - font-size: 0px + @size; - font-size: 0rem + @size / @doc-font-size; -} - -// Just font-size and line-height -// ------------------------------ -.font(@size) { - font-size: 0px + @size; - font-size: 0rem + @size / @doc-font-size; - line-height: 0 + round(@doc-line-height / @size*10000) / 10000; -} - -.text-overflow() { -overflow: hidden; -text-overflow: ellipsis; -white-space: nowrap; } - -// GRADIENTS -// -------------------------------------------------- - -.horizontal(@startColor : @white, @endColor : @lightergrey) { -background-color: @endColor; -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 : -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ -background-image : -ms-linear-gradient(left, @startColor, @endColor); // IE10 -background-image : -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 -background-image : linear-gradient(left, @startColor, @endColor); // W3C -background-repeat : repeat-x; } - -.vertical(@startColor : @white, @endColor: @lightergrey) { -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-color : @endColor; -background-image : -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ -background-image : -ms-linear-gradient(top, @startColor, @endColor); // IE10 -background-image : -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 -background-image : linear-gradient(top, @startColor, @endColor); // W3C -background-repeat : repeat-x; } - -.directional(@startColor : @white, @endColor : @lightergrey, @deg : 45deg) { -background-color : @endColor; -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); // W3C -background-repeat : repeat-x; } - -// .bordered(COLOR, COLOR, COLOR, COLOR); -.bordered(@top-color: #eee, @right-color: #eee, @bottom-color: #eee, @left-color: #eee) { -border-top : solid 1px @top-color; -border-left : solid 1px @left-color; -border-right : solid 1px @right-color; -border-bottom : solid 1px @bottom-color; } - -// ROUND CORNERS -// -------------------------------------------------- - -// .rounded(VALUE); -.rounded(@radius:4px) { --webkit-border-radius : @radius; --moz-border-radius : @radius; -border-radius : @radius; } - -// .border-radius(VALUE,VALUE,VALUE,VALUE); -.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) { --webkit-border-top-right-radius : @topright; --webkit-border-bottom-right-radius : @bottomright; --webkit-border-bottom-left-radius : @bottomleft; --webkit-border-top-left-radius : @topleft; --moz-border-radius-topright : @topright; --moz-border-radius-bottomright : @bottomright; --moz-border-radius-bottomleft : @bottomleft; --moz-border-radius-topleft : @topleft; -border-top-right-radius : @topright; -border-bottom-right-radius : @bottomright; -border-bottom-left-radius : @bottomleft; -border-top-left-radius : @topleft; --webkit-background-clip : padding-box; --moz-background-clip : padding; -background-clip : padding-box; } - -// .box-shadow(HORIZONTAL VERTICAL BLUR COLOR)) -.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { --webkit-box-shadow : @shadow; --moz-box-shadow : @shadow; -box-shadow : @shadow; } - -// .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA); -.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) { --webkit-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); --moz-box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); -box-shadow : @x-axis @y-axis @blur rgba(0, 0, 0, @alpha); } - -// .text-shadow(); -.text-shadow(@shadow: 0 2px 3px rgba(0,0,0,.25)) { -text-shadow : @shadow; } - -// .opacity(VALUE); -.opacity(@opacity : .5) { --webkit-opacity : @opacity; --moz-opacity : @opacity; -opacity : @opacity; } - -// TRANSFORMATIONS -// -------------------------------------------------- - -// .rotate(VALUEdeg); -.rotate(@deg) { --webkit-transform : rotate(@deg); --moz-transform : rotate(@deg); --ms-transform : rotate(@deg); --o-transform : rotate(@deg); -transform : rotate(@deg); } - -// .scale(VALUE); -.scale(@ratio) { --webkit-transform : scale(@ratio); --moz-transform : scale(@ratio); --ms-transform : scale(@ratio); --o-transform : scale(@ratio); -transform : scale(@ratio); } - -// .skew(VALUE, VALUE); -.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); } - -// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION); -.transition(@transition) { --webkit-transition : @transition; --moz-transition : @transition; --ms-transition : @transition; --o-transition : @transition; -transition : @transition; } - -// .translate(VALUE, VALUE) -.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); } - -.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); } - -.animation(@name, @duration: 300ms, @delay: 0, @ease: ease) { - -webkit-animation: @name @duration @delay @ease; - -moz-animation: @name @duration @delay @ease; - -ms-animation: @name @duration @delay @ease; -} - -// BACKGROUND -// -------------------------------------------------- - -// .background-alpha(VALUE VALUE); -.background-alpha(@color: @white, @alpha: 1) { -background-color : hsla(hue(@color), saturation(@color), lightness(@color), @alpha); } - -// .background-size(VALUE VALUE); -.background-size(@size){ --webkit-background-size : @size; --moz-background-size : @size; --o-background-size : @size; -background-size : @size; } - -// .background-clip(VALUE); (border-box, padding-box, content-box) -.background-clip(@clip) { --webkit-background-clip : @clip; --moz-background-clip : @clip; -background-clip : @clip; } - -// .box-sizing(VALUE); (border-box, padding-box, content-box) -.box-sizing(@boxsize: border-box) { --webkit-box-sizing : @boxsize; --moz-box-sizing : @boxsize; --ms-box-sizing : @boxsize; -box-sizing : @boxsize; } - -// For image replacement -.hide-text() { -text-indent : 100%; -white-space : nowrap; -overflow : hidden; } - -// Hide from visual and speaking browsers -.hidden() { -display : none !important; -visibility : hidden; } -.hidden { - display: none; - visibility: hidden; -} - -// Hide but maintain layout -.invisible() { -visibility : hidden; } - -// .resize(VALUE) (none, both, horizontal, vertical, inherit) -.resize(@direction: both) { -resize : @direction; -overflow : auto; } - -// .userselect(VALUE) (all, element, none, text) -.user-select(@select) { --webkit-user-select : @select; --moz-user-select : @select; --o-user-select : @select; -user-select : @select; } - -// Hidden but available to speaking browsers -.visuallyhidden() { -overflow : hidden; -position : absolute; -clip : rect(0 0 0 0); -height : 1px; -width : 1px; -margin : -1px; -padding : 0; -border : 0; } - -// Make visuallyhidden focusable with a keyboard -.visuallyhidden.focusable:active, -.visuallyhidden.focusable:focus { -position : static; -clip : auto; -height : auto; -width : auto; -margin : 0; -overflow: visible; } - -// MEDIA QUERIES -// -------------------------------------------------- - -@small: ~"only screen and (min-width: 30em)"; -@medium: ~"only screen and (min-width: 48em)"; -@large: ~"only screen and (min-width: 62.5em)"; -@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)", - ~"only screen and (-o-min-device-pixel-ratio: 3/2)", - ~"only screen and (min-resolution: 144dpi)", - ~"only screen and (min-resolution: 1.5dppx)";
\ No newline at end of file |