Skip to content

Instantly share code, notes, and snippets.

@Eomerx

Eomerx/lessmixins.less

Created August 15, 2014 12:45
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Eomerx/2f570f0d3c06c203bc33 to your computer and use it in GitHub Desktop.
Save Eomerx/2f570f0d3c06c203bc33 to your computer and use it in GitHub Desktop.
Download ZIP
less mixins
Raw
lessmixins.less
//---------------------------------------------------
// LESS Prefixer
//---------------------------------------------------
//
// All of the CSS3 fun, none of the prefixes!
//
// As a rule, you can use the CSS properties you
// would expect just by adding a '.':
//
// box-shadow => .box-shadow(@args)
//
// Also, when shorthand is available, arguments are
// not parameterized. Learn CSS, not LESS Prefixer.
//
// -------------------------------------------------
// TABLE OF CONTENTS
// (*) denotes a syntax-sugar helper
// -------------------------------------------------
//
// .animation(@args)
// .animation-delay(@delay)
// .animation-direction(@direction)
// .animation-duration(@duration)
// .animation-fill-mode(@mode)
// .animation-iteration-count(@count)
// .animation-name(@name)
// .animation-play-state(@state)
// .animation-timing-function(@function)
// .background-size(@args)
// .border-radius(@args)
// .box-shadow(@args)
// .inner-shadow(@args) *
// .box-sizing(@args)
// .border-box() *
// .content-box() *
// .columns(@args)
// .column-count(@count)
// .column-gap(@gap)
// .column-rule(@args)
// .column-width(@width)
// .gradient(@default,@start,@stop) *
// .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
// .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
// .opacity(@factor)
// .transform(@args)
// .transform-origin(@args)
// .transform-style(@style)
// .rotate(@deg)
// .scale(@factor)
// .translate(@x,@y)
// .translate3d(@x,@y,@z)
// .translateHardware(@x,@y) *
// .text-shadow(@args)
// .transition(@args)
// .transition-delay(@delay)
// .transition-duration(@duration)
// .transition-property(@property)
// .transition-timing-function(@function)
//
//
//
// Credit to LESS Elements for the motivation and
// to CSS3Please.com for implementation.
//
// Copyright (c) 2012 Joel Sutherland
// MIT Licensed:
// http://www.opensource.org/licenses/mit-license.php
//
//---------------------------------------------------
// Animation
.animation(@args) {
-webkit-animation: @args;
-moz-animation: @args;
-ms-animation: @args;
-o-animation: @args;
animation: @args;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
-moz-animation-delay: @delay;
-ms-animation-delay: @delay;
-o-animation-delay: @delay;
animation-delay: @delay;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
-moz-animation-direction: @direction;
-ms-animation-direction: @direction;
-o-animation-direction: @direction;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
-moz-animation-duration: @duration;
-ms-animation-duration: @duration;
-o-animation-duration: @duration;
}
.animation-fill-mode(@mode) {
-webkit-animation-fill-mode: @mode;
-moz-animation-fill-mode: @mode;
-ms-animation-fill-mode: @mode;
-o-animation-fill-mode: @mode;
animation-fill-mode: @mode;
}
.animation-iteration-count(@count) {
-webkit-animation-iteration-count: @count;
-moz-animation-iteration-count: @count;
-ms-animation-iteration-count: @count;
-o-animation-iteration-count: @count;
animation-iteration-count: @count;
}
.animation-name(@name) {
-webkit-animation-name: @name;
-moz-animation-name: @name;
-ms-animation-name: @name;
-o-animation-name: @name;
animation-name: @name;
}
.animation-play-state(@state) {
-webkit-animation-play-state: @state;
-moz-animation-play-state: @state;
-ms-animation-play-state: @state;
-o-animation-play-state: @state;
animation-play-state: @state;
}
.animation-timing-function(@function) {
-webkit-animation-timing-function: @function;
-moz-animation-timing-function: @function;
-ms-animation-timing-function: @function;
-o-animation-timing-function: @function;
animation-timing-function: @function;
}
// Background Size
.background-size(@args) {
-webkit-background-size: @args;
background-size: @args;
}
// Border Radius
.border-radius(@args) {
-webkit-border-radius: @args;
border-radius: @args;
background-clip: padding-box;
}
// Box Shadows
.box-shadow(@args) {
-webkit-box-shadow: @args;
box-shadow: @args;
}
.inner-shadow(@args) {
.box-shadow(inset @args);
}
// Box Sizing
.box-sizing(@args) {
-webkit-box-sizing: @args;
-moz-box-sizing: @args;
box-sizing: @args;
}
.border-box(){
.box-sizing(border-box);
}
.content-box(){
.box-sizing(content-box);
}
// Columns
.columns(@args) {
-webkit-columns: @args;
-moz-columns: @args;
columns: @args;
}
.column-count(@count) {
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
}
.column-gap(@gap) {
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
.column-width(@width) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
}
.column-rule(@args) {
-webkit-column-rule: @args;
-moz-column-rule: @args;
column-rule: @args;
}
// Gradients
.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
.linear-gradient-top(@default,@start,0%,@stop,100%);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
// Opacity
.opacity(@factor) {
@iefactor: @factor*100;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=@{iefactor})";
filter: ~"alpha(opacity=(@{iefactor}))";
opacity: @factor;
}
// Text Shadow
.text-shadow(@args) {
text-shadow: @args;
}
// Transforms
.transform(@args) {
-webkit-transform: @args;
-moz-transform: @args;
-ms-transform: @args;
-o-transform: @args;
transform: @args;
}
.transform-origin(@args) {
-webkit-transform-origin: @args;
-moz-transform-origin: @args;
-ms-transform-origin: @args;
-o-transform-origin: @args;
transform-origin: @args;
}
.transform-style(@style) {
-webkit-transform-style: @style;
-moz-transform-style: @style;
-ms-transform-style: @style;
-o-transform-style: @style;
transform-style: @style;
}
.rotate(@deg:45deg){
.transform(rotate(@deg));
}
.scale(@factor:.5){
.transform(scale(@factor));
}
.translate(@x,@y){
.transform(translate(@x,@y));
}
.translate3d(@x,@y,@z) {
.transform(translate3d(@x,@y,@z));
}
.translateHardware(@x,@y) {
.translate(@x,@y);
-webkit-transform: translate3d(@x,@y,0);
-moz-transform: translate3d(@x,@y,0);
-o-transform: translate3d(@x,@y,0);
-ms-transform: translate3d(@x,@y,0);
transform: translate3d(@x,@y,0);
}
// Transitions
.transition(@args:200ms) {
-webkit-transition: @args;
-moz-transition: @args;
-o-transition: @args;
-ms-transition: @args;
transition: @args;
}
.transition-delay(@delay:0) {
-webkit-transition-delay: @delay;
-moz-transition-delay: @delay;
-o-transition-delay: @delay;
-ms-transition-delay: @delay;
transition-delay: @delay;
}
.transition-duration(@duration:200ms) {
-webkit-transition-duration: @duration;
-moz-transition-duration: @duration;
-o-transition-duration: @duration;
-ms-transition-duration: @duration;
transition-duration: @duration;
}
.transition-property(@property:all) {
-webkit-transition-property: @property;
-moz-transition-property: @property;
-o-transition-property: @property;
-ms-transition-property: @property;
transition-property: @property;
}
.transition-timing-function(@function:ease) {
-webkit-transition-timing-function: @function;
-moz-transition-timing-function: @function;
-o-transition-timing-function: @function;
-ms-transition-timing-function: @function;
transition-timing-function: @function;
}
///**
// * 3L was made for YOU to help you create awesome websites
// * and fill the Internet with excessive amount of Love! ♥
// *
// * Made by Mateusz Kocz -> http://radiatingstar.com
// *
// * Watch 3L on Github: -> https://github.com/mateuszkocz/3l
// * Submit an issue: -> https://github.com/mateuszkocz/3l/issues?state=open
// *
// * Download the newest version at http://mateuszkocz.github.com/3l
// *
// * MIT Licensed
// * Includes normalize.css, reset.css and some code from HTML5 Boilerplate.
// * For the licencess refer to the LICENCES.md.
// *
// * Version: 1.4.4 (2013.06.02)
// *
// * To compile all of the code you need to use a compiler
// * that supports JavaScript code and guarder mixins.
// *
// * Recommended compilers:
// * * Winless http://winless.org/
// * * Prepross http://alphapixels.com/prepros/
// * * Codekit http://incident57.com/codekit/
// **/
///**
// * SEO & HTML Debugging
// *
// * A useful supporting class that will help you a bit with your SEO
// * and usability of your website.
// *
// * @ABOUT
// * Creating a website is a serious business, but sometimes you may
// * forget about some important details. This class will help you.
// * It will let you know if you haven't put an alt attribute on an image
// * or kept that attribute empty, when you haven't typed an URL in an anchor or when
// * an anchor link has rel=nofollow attribute. It will also show you an alert
// * message if you don't have a <title> tag and description or left them empty(*).
// *
// * If any of those errors happens, an element will get a red outline
// * border drawing your attention and asking for some love
// * or you will get a message with the same purpose.
// *
// * (*) The <title> reminder can alert you even if you have a <title> tag.
// * This happens if you have a <link> tag (usually used for style sheets)
// * before <title> in your HTML. Just change the order of <link> and
// * <title> and you're cool.
// *
// * @USAGE
// * Just place .seo-helper() class in the stylesheet.
// *
// * @EXAMPLE
// * .seo-helper()
// *
// * That way every element on your page will be affected
// * by this rule. You can also place it in any other container
// * class element in your code (body, div.wrapper, article and so on)
// * if you don't want for some reasons to check for bugs on whole page
// * but in a single area.
// *
// * Caution! It's only a developement support. Do not forget to delete
// * this class before finishing yourproject and deploying to production,
// * unless you want to keep it in continuous project (like blog)
// * and debug every new content on your site. But then you might consider
// * restyling this class to be a bit more eye-pleasing.
// *
// * This may not work in every browser, but since you are a web
// * developer/designer you're probably already using a bleeding
// * edge nightly alpha back-door version of browser, so no problem!
// * It's probably the only class you don't need to care about how
// * your visitors will see it!
// *
// * @BROSERS SUPPORT
// * (unknown / not important)
// *
// * @LINKS
// * * http://radiatingstar.com/how-to-improve-seo-with-css
// *
// * @ASIDE
// * Why img:not([alt]), img[alt=""] and img[alt^=" "]?
// * First targets images that don't have an alt attribute, second targets
// * ones that have this attribute but it's left empty (probably left by
// * automatic completion of html editor), third is just in case - it
// * might have been left by html editor or manually "to do it later" (clearly
// * a space at the beginning of an alt can't be anything good).
// *
// * Why a[href=""]?
// * If you write an anchor text and leave href to copyPaste URL later,
// * it will reminding you about that.
// *
// * Why a[rel="nofollow"]?
// * For some reasons links on your site may have this attribute and this
// * may generate a huge SEO problem. Better fix it ASAP. (On the other hand
// * nofollow links might be useful in some situations. See here:
// * -> http://en.wikipedia.org/wiki/Nofollow#Control_internal_PageRank_flow)
// *
// * Why div:empty, span:empty, li:empty, p:empty, td:empty, th:empty?
// * It'll just check if you have some redundancy (empty elements) in you code.
// *
// **/
.seo-helper() {
img:not([alt]), img[alt=""], img[alt^=" "],
a[href=""], a[href^=" "], a[href="#"], a[rel*="nofollow"],
div:empty, span:empty, li:empty, p:empty, td:empty, th:empty,
*[title=""], *[class=""], *[id=""] {
outline: 2px solid red !important;
outline-offset: 3px !important;
}
head, title:empty, link, meta {display: block;}
title:empty:before {content: "You've left the <title> empty!"}
link:before {content: "You don't have a <title>!"}
title ~ link {display: none;}
meta[name="description"][content=""]:before, meta[name="description"][content=" "]:before {content: "You've left description empty!";}
}
///**
// * Normalize or reset CSS
// *
// * @USAGE
// * Just write chosen method in your stylesheet.
// *
// * @EXAMLPES
// * /* In CSS */
// * .normalize()
// **/
.normalize(){article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}}
.reset() {html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}}
///**
// * HTML5 Boiler Plate's default stylesheets.
// *
// * @USAGE
// * Just write chosen method in your CSS.
// *
// * @EXAMLPES
// * /* In CSS */
// * .h5bp()
// **/
.h5bp() {html,button,input,select,textarea{color:#222}body{font-size:1em;line-height:1.4}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}img{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.chromeframe{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}}
.h5bp-print() {@media print{*{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important;} a,a:visited{text-decoration:underline;} a[href]:after{content:" (" attr(href) ")";} abbr[title]:after{content:" (" attr(title) ")";} .ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:"";} pre,blockquote{border:1px solid #999;page-break-inside:avoid;} thead{display:table-header-group;} tr,img{page-break-inside:avoid;} img{max-width:100% !important;} @page {margin:0.5cm;}p,h2,h3{orphans:3;widows:3;} h2,h3{page-break-after:avoid;}}.przerwa{color:#ff0000;}}
///**
// * Helper classes from HTML5 Boilerplate
// *
// * Classes below help you create a better user experience for both users
// * of browsers and screen readers. Oh, and there's also a clearfix!
// *
// * @ABOUT
// * All the classes comes from HTML5 Boilerplate (-> html5boilerplate.com). Here though,
// * they're changed so that they can be easily used in The LESS Way.
// * They're called "non-semantic" in H5B, but here they become semantic if used well.
// * (Actually they can't be used in any way than good in 3L.)
// * (Actually II they can be semantic in H5B as well, but it's a bit pain to do that.)
// *
// * @USAGE
// * Just put them in your classes, id's or elements.
// *
// * @EXAMPLE
// * .class-selector {
// * .ir();
// * .clearfix();
// * }
// **/
// Image replacement.
.ir() {border: 0; overflow: hidden; background-color: transparent; *text-indent: -9999px; &:before {content: ""; display: block; width: 0; height: 100%;}}
// Hide from both screenreaders and browsers: h5bp.com/u
.hidden() {display: none !important; visibility: hidden;}
// Hide only visually, but have it available for screenreaders: h5bp.com/v
.visuallyhidden() {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
// Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p
// CAUTION! The .visuallyhidden class is included! If you want your object to be both
// .visuallyhidden and .focusabe use only .focusable class.
.focusable() {.visuallyhidden;&:active,&:focus{clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;}}
// Hide visually and from screenreaders, but maintain layout.
.invisible() {visibility: hidden;}
// Contain floats: h5bp.com/q
.clearfix() {*zoom:1;&:before,&:after{content:" ";display:table;}&:after{clear:both;}}
///**
// * Some other helper classes.
// **/
.incomplete() {outline: 3px dotted green}
.fixme() {outline: 3px dotted yellow}
.todo() {outline: 3px dotted blue}
.xxx() {outline: 3px dotted red}
///**
// * Font-face
// *
// * Easily include fonts on you website.
// *
// * @USAGE
// * Put the .font-face() mixin in your CSS. Provide at least two arguments:
// * -- font's name (string),
// * -- font's filename (without filetype),
// * -- font's path / URL (string) [don't forget to put the fonts in all formats in the folder].
// *
// * Optionally you can provide the font's weight and style. By default they're normal.
// *
// * Font's formats you need to use: EOT, WOFF, TTF and SVG.
// **/
.font-face(@name, @filename, @path, @weight:normal, @style:normal) {
@font-face {
font-family: @name;
src: url('@{path}@{filename}.eot');
src: local('☺'), url('@{path}@{filename}.woff') format('woff'), url('@{path}@{filename}.ttf') format('truetype'), url('@{path}@{filename}.svg') format('svg');
font-weight: @weight;
font-style: @style;
}
}
///**
// * Box-sizing
// *
// * Change the basic box-model to the one you want.
// *
// * @ABOUT
// * Basic box-model defines the width and height of an object only as a size of
// * object's content area. In order to know exactly how big is the object you need
// * to add its padding and borders. This may result in many unwanted behaviours.
// * That's why you can define how you want the browser to calculate the width/height:
// * with or without padding, with or without borders.
// *
// * @USAGE
// * To use this feature just put a value you want:
// * -- content-box ("content" works too) - it's default value from basic model.
// * -- padding-box (also "padding") - width and height declarations will include paddings.
// * -- border-box (and "border") - border and padding included.
// *
// * 1. .box-sizing(content-box), .box-sizing(content) and .content-box-sizing for box-sizing: content-box.
// * 2. .box-sizing(padding-box), .box-sizing(padding) and .padding-box-sizing for box-sizing: padding-box.
// * 3. .box-sizing(border-box), .box-sizing(padding) and .border.box-sizing for box-sizing: border-box.
// *
// * @BROWSERS SUPPORS
// * IE8+ and every other.
// * Only Firefox supports padding-box.
// *
// * @LINKS
// * * http://paulirish.com/2012/box-sizing-border-box-ftw/
// * * https://developer.mozilla.org/en-US/docs/CSS/box-sizing
// * * http://caniuse.com/#feat=css3-boxsizing
// **/
.content-box-sizing(){-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
.padding-box-sizing(){-moz-box-sizing:padding-box;}
.border-box-sizing(){-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.box-sizing (padding){.padding-box-sizing;}
.box-sizing (padding-box){.padding-box-sizing;}
.box-sizing (border){.border-box-sizing;}
.box-sizing (border-box){.border-box-sizing;}
.box-sizing (content){.content-box-sizing;}
.box-sizing (content-box){.content-box-sizing;}
///**
// * Background-clip
// *
// * Clips the object's background to the desired box according to the box-model.
// *
// * @USAGE
// * To use this class simply put into an object a .background-clip(box) class,
// * where box means the desired box (see below). You can also use a shorter class
// * .bg-clip or class that corresponds to the clipping you want to get (.content-clip,
// * .padding-clip, .border-clip).
// *
// * Arguments that comes into (box) are:
// * -- content-box or content for content clip,
// * -- padding-box or padding for padding clip,
// * -- border-box or border for border clip.
// * *** You can use values either with or without "-box" suffix.
// *
// * @BROWSERS SUPPORT
// * IE9+ and every other.
// *
// * @LINKS
// * * https://developer.mozilla.org/en-US/docs/CSS/background-clip
// * * http://caniuse.com/#feat=background-img-opts
// **/
.content-box(){-moz-background-clip:content;background-clip:content-box;}
.padding-box(){-moz-background-clip:padding;background-clip:padding-box;}
.border-box(){-moz-background-clip:border;background-clip:border-box;}
.background-clip (padding){.padding-box;}
.background-clip (padding-box){.padding-box;}
.background-clip (border){.border-box;}
.background-clip (border-box){.border-box;}
.background-clip (content){.content-box;}
.background-clip (content-box){.content-box;}
.bg-clip(@arguments){.background-clip(@arguments);}
///**
// * Box-shadow
// *
// * Create a shadow behind or inside the element.
// *
// * @USAGE
// * In .box-shadow() brackets put arguments for every single shadow. Separate
// * each shadow's arguments with comma.
// *
// * Box-shadow property takes following arguments:
// *
// * 1. inset [optional].
// * 2. x-offset [required].
// * 3. y-offset [required].
// * 4. blur [optional].
// * 5. spread [optional].
// * 6. color [optional/required].
// *
// * @EXAMPLES
// * Two box-shadows: one is 1px offset, black, second one is green with 30% opacity, inset,
// * with 5px offsets, 3px of blur and 1px spread.
// *
// * .box-shadow(1px 1px black, inset 5px 5px 3px 1px fade(green,30%))
// *
// * @BROWSERS SUPPORT
// * IE9, Fx3.5 and every other.
// *
// * @LINKS
// * * hhtp://developer.mozilla.org/en/CSS/box-shadow
// * * http://caniuse.com/#feat=css-boxshadow
// * * http://www.toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/
// **/
.box-shadow(@shadow1, @shadow2:X, ...){
@shadows: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-webkit-box-shadow: @shadows;
-moz-box-shadow: @shadows;
box-shadow: @shadows;
}
///**
// * Border-radius
// *
// * Round the element's corners.
// *
// * @USAGE
// * Border-radius property takes one to four arguments with px, em and %
// * values and round the element's corners accordingly. You can make
// * ellipticaly rounded corners putting two sets of values separated with
// * comma using .elliptical-border-radius class. In order to round a single
// * corner use .round-corner class. This class takes two sets of arguments.
// * First one is a declaration of corner you want to round (top-left, top-right,
// * bottom-right, bottom-left), second one (separated from the first with comma),
// * is a set of values in px, em or % that round chosen corner. Second
// * declaration can have one (for circle rounding) or two values (for
// * elliptical rounding).
// *
// * @EXAMPLES
// * 1. Round every corner of the element with 10px radius.
// * .border-radius(10px)
// * 2. Round top-left and bottom-right corners by 10px, top-right
// * and bottom-left corners by 20px.
// * .border-radius(10px 20px)
// * 3 Exemplary use of the .elliptical-border-radius class.
// * .elliptical-border-radius(10px 20px 30px, 40px 50px 60px 70px)
// * 4. Round top-right corner by 10px and 20px (elliptical).
// * .round-corner(top-right, 10px 20px)
// * .border-top-right-radius(10px 20px) // Alternate method.
// * 5. Round similar corners.
// * .border-top-radius(20px 10px); // top-left + top-right (elliptical)
// * .border-left-radius(5px); // top-left + bottom-left
// *
// * @BROWSERS SUPPORT
// * IE9, Fx3.5 and every other
// *
// * @LINKS
// * * http://developer.mozilla.org/en/CSS/border-radius
// * * http://caniuse.com/#feat=border-radius
// **/
// If your rounded corners looks bad with borders, add this class to your rounded element.
// * http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
.border-radius-fix(){.background-clip(padding-box);}
.border-radius (@radius:5px, ...) {
-webkit-border-radius: @arguments;
-moz-border-radius: @arguments;
border-radius: @arguments;
}
// Alternate name for .border-radius.
.round-corners (@radius:5px, ...) {.border-radius(@arguments);}
.elliptical-border-radius (@radius1, @radius2) {
-webkit-border-radius: @radius1 ~"/" @radius2;
-moz-border-radius: @radius1 ~"/" @radius2;
border-radius: @radius1 ~"/" @radius2;
}
.round-corner (top-left, @radius...){
-webkit-border-top-left-radius: @radius;
-moz-border-top-left-radius: @radius;
border-top-left-radius: @radius;
}
.round-corner (top-right, @radius...){
-webkit-border-top-right-radius: @radius;
-moz-border-top-right-radius: @radius;
border-top-right-radius: @radius;
}
.round-corner (bottom-right, @radius...) {
-webkit-border-bottom-right-radius: @radius;
-moz-border-bottom-right-radius: @radius;
border-bottom-right-radius: @radius;
}
.round-corner (bottom-left, @radius...) {
-webkit-border-bottom-left-radius: @radius;
-moz-border-bottom-left-radius: @radius;
border-bottom-left-radius: @radius;
}
// Another methods to use corner radius.
.border-top-left-radius (...) {.round-corner(top-left,@arguments);}
.border-top-right-radius (...) {.round-corner(top-right,@arguments);}
.border-bottom-right-radius (...) {.round-corner(bottom-right,@arguments);}
.border-bottom-left-radius (...) {.round-corner(bottom-left,@arguments);}
// Round similar corners.
.border-top-radius (...) {.round-corner(top-left,@arguments);.round-corner(top-right,@arguments);}
.border-bottom-radius (...) {.round-corner(bottom-left,@arguments);.round-corner(bottom-right,@arguments);}
.border-left-radius (...) {.round-corner(top-left,@arguments);.round-corner(bottom-left,@arguments);}
.border-right-radius (...) {.round-corner(top-right,@arguments);.round-corner(bottom-right,@arguments);}
// Another classes for the same purpose as above.
.round-top-corners (...) {.border-top-radius(@arguments);}
.round-bottom-corners (...) {.border-bottom-radius(@arguments);}
.round-left-corners (...) {.border-left-radius(@arguments);}
.round-right-corners (...) {.border-right-radius(@arguments);}
///**
// * Opacity
// *
// * Make an object transparent.
// *
// * @ABOUT
// * Opacity takes values between 0.0 (invisible) to 1.0 (default - full
// * visibility) but 3L lets you also use percentages and values from >1 to 100.
// *
// * @USAGE
// * If you want an element with transparency 1, .5 or 0, use these classes:
// * .not-transparent., .half-transparent, .transparent.
// *
// * @BROWSERS SUPPORT
// * full (IE6+)
// *
// * @LINKS
// * * https://developer.mozilla.org/en-US/docs/CSS/opacity
// * * http://caniuse.com/#feat=css-opacity
// *
// * @ASIDE
// * Do we need the ability to set opacity in numbers from 1 to 100
// * and in percentages? I think we do, because:
// * 1. You need to use integer numbers in filter property for IE,
// * so there is a possibility that someone will type this kind
// * of value, instead of [0,1].
// * 2. LESS has a fade() function that uses percentages to makes
// * colours (semi)transparent, so using percentages here will
// * result in more consistent code (same unit in similar situation).
// * 3. Percentages are more intuitive when it comes to transparency and
// * opacity since graphic editors like Photoshop and GIMP use them.
// *
// **/
.transparent() {.opacity(0);}
.non-transparent() {.opacity(1);}
.half-transparent() {.opacity(.5);}
.opacity() {.non-transparent();}
.opacity (@value) when (isnumber(@value)) and (@value =< 1){
opacity: @value;
filter: ~"alpha(opacity="@value*100~")";
}
.opacity (@value) when (isnumber(@value)) and (@value > 1) and not (ispercentage(@value)){
// INFO: for the explanation of rule "and not (ispercentage(@value))" refer to the class below.
opacity: @value/100;
filter: ~"alpha(opacity="@value~")";
}
.opacity (@value) when (ispercentage(@value)) {
// Change the @value from percentage to integer (XX% => XX)
@integerValue: `parseInt('@{value}')`;
// Actually the @value should be a number now... but it isn't.
// LESS think of it as a string so we can't do math here.
// We'll use a feature of LESS that automatically makes
// a second value's unit in a sum to be the same as the first one.
// In our case we need a number so we can divide it by 100.
opacity: (0 + @integerValue) /100;
// We don't need a math in filter so no trick.
filter: ~"alpha(opacity="@integerValue~")";
// BUG: WinLESS compile this with doubled properties unless the rule
// "and not (ispercentage(@value))" is added in the class above.
// In Firebug (through the LESS native compiler) those properties
// aren't doubled, though.
}
///**
// * Gradient
// *
// * Create a beautiful gradient without images.
// *
// * @USAGE
// * Pick a type of a gradient you want to have and put colours as arguments.
// * You can put either two or three colours. In the first case
// * you type only the gradient's colours. Three arguments gradient mixins
// * will use the third colour as background-color.
// *
// * The default class - .gradient - is the same as .vertical-gradient.
// *
// * You can choose from four types of gradients:
// * 1. Vertical - colour will change from top to bottom.
// * 2. Horizontal - change is from left to right.
// * 3. Diagonal - from top-left to bottom-right.
// * 4. Radial - from the centre of an element to its borders.
// *
// * @BROWSERS SUPPORT
// * IE10 and every other except Opera Mini.
// * Some gradients can be achieved in older IE by using non-standard properties.
// *
// * @LINKS
// * * http://www.colorzilla.com/gradient-editor/ -- gradient generator with broad browsers support and some advanced options
// * * http://lea.verou.me/css3patterns/ -- gradient is a powerful tool - you can generate shapes as a background!
// * * https://developer.mozilla.org/en-US/docs/CSS/gradient
// * * http://caniuse.com/#feat=css-gradients
// *
// **/
.gradient (@color1, @color2){
background-image: -moz-linear-gradient(top, @color1 0%, @color2 100%);
background-image: -webkit-linear-gradient(top, @color1 0%,@color2 100%);
background-image: linear-gradient(to bottom, @color1 0%,@color2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{color1}', endColorstr='@{color2}',GradientType=0 );
}
.gradient (@color1, @color2, @color3){
background-color: @color3;
background-image: -moz-linear-gradient(top, @color1 0%, @color2 100%);
background-image: -webkit-linear-gradient(top, @color1 0%,@color2 100%);
background-image: linear-gradient(to bottom, @color1 0%,@color2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{color1}', endColorstr='@{color2}',GradientType=0 );
}
// .vertical-gradient = .gradient
.vertical-gradient (@color1,@color2) {.gradient(@color1,@color2)}
.vertical-gradient (@color1,@color2,@color3) {.gradient(@color1,@color2,@color3)}
.horizontal-gradient (@color1, @color2) {
background-image: -moz-linear-gradient(left, @color1 0%, @color2 100%);
background-image: -webkit-linear-gradient(left, @color1 0%,@color2 100%);
background-image: linear-gradient(to right, @color1 0%,@color2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{color1}', endColorstr='@{color2}',GradientType=1 );
}
.horizontal-gradient (@color1, @color2, @color3) {
background-color: @color3;
background-image: -moz-linear-gradient(left, @color1 0%, @color2 100%);
background-image: -webkit-linear-gradient(left, @color1 0%,@color2 100%);
background-image: linear-gradient(to right, @color1 0%,@color2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{color1}', endColorstr='@{color2}',GradientType=1 );
}
.diagonal-gradient (@color1, @color2) {
background-image: -moz-linear-gradient(-45deg, @color1 0%, @color2 100%);
background-image: -webkit-linear-gradient(-45deg, @color1 0%,@color2 100%);
background-image: linear-gradient(135deg, @color1 0%,@color2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{color1}', endColorstr='@{color2}',GradientType=1 );
}
.diagonal-gradient (@color1, @color2, @color3) {
background-color: @color3;
background-image: -moz-linear-gradient(-45deg, @color1 0%, @color2 100%);
background-image: -webkit-linear-gradient(-45deg, @color1 0%,@color2 100%);
background-image: linear-gradient(135deg, @color1 0%,@color2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{color1}', endColorstr='@{color2}',GradientType=1 );
}
.radial-gradient (@color1, @color2) {
background-image: -moz-radial-gradient(center, @color1 0%, @color2 100%);
background-image: -webkit-radial-gradient(center, @color1 0%,@color2 100%);
background-image: radial-gradient(at center, @color1 0%,@color2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{color1}', endColorstr='@{color2}',GradientType=1 );
}
.radial-gradient (@color1, @color2, @color3) {
background-color: @color3;
background-image: -moz-radial-gradient(center, @color1 0%, @color2 100%);
background-image: -webkit-radial-gradient(center, @color1 0%,@color2 100%);
background-image: radial-gradient(at center, @color1 0%,@color2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{color1}', endColorstr='@{color2}',GradientType=1 );
}
// !! WARNING !!
// MULTIPLE ARGUMENTS GRADIENT MIXINS IS IN DEVELOPEMENT AND PROBABLY WON'T WORK.
//
// * TODO: test if the beta-gradient is reverse-compatible with the old gradient.
// * FIXME: you don't need to provide the @direction value since default is "to bottom". How to make it works?
// * FIXME: simple radial-gradient should work, but what if you provide some more advanced values?
// * FIXME: does it work with "to top left" and similar or with angles?
// .gradient(@gradientType, @direction, @rest...) {
// @valuesProcessed: ~`"@{rest}".replace(/[\[\]]/g, '')`;
// @directionProcessedOld: ~`"@{direction}".replace(/[\[\]]|\,/g,'').replace("to ","").replace("top","bottom").replace("bottom","top").replace("right","left").replace("left","right").replace("at ","").replace("cover", "farthest-corner")`;
// @directionProcessedNew: ~`"@{direction}".replace(/[\[\]]|\,/g,'')`;
//
// @webkit1: `"-webkit-" + "@{gradientType}" + "-gradient(" + "@{directionProcessedOld}," + "@{valuesProcessed}" + ")"`;
// @webkit2: ~`'@{webkit1}'.replace(/\"/g, '')`;
// background-image: @webkit2;
//
// @moz1: `"-moz-" + "@{gradientType}" + "-gradient(" + "@{directionProcessedOld}," + "@{valuesProcessed}" + ")"`;
// @moz2: ~`'@{moz1}'.replace(/\"/g, '')`;
// background-image: @moz2;
//
// @w3c1: `"@{gradientType}" + "-gradient(" + "@{directionProcessedNew}," + "@{valuesProcessed}" + ")"`;
// @w3c2: ~`'@{w3c1}'.replace(/\"/g, '')`;
// background-image: @w3c2;
// }
///**
// * Background-size
// *
// * Scale (or not) your background image.
// *
// * @ABOUT
// * This property takes following values:
// * -- auto [default] - it does nothing when used alone; when used with a value
// * it makes sure that image will keep its aspect ratio while being stretched
// * to the required size. (See: examples 3. and 4.)
// * -- contain - scale image to the first border it meets;
// * it may leave some area uncovered but keeps image's aspect ratio,
// * -- cover - scale image to the second border it meets;
// * cover all area but part of an image may not be shown. The image keeps its aspect ratio.
// * -- px, em, % - scale image according to declared value;
// * you can declare one value (x-size) or two values for each size.
// * Using (100%, 100%) stretch the image to cover full area but may not
// * keep its aspect ratio. When you use percentages keep in mind that XX%
// * means XX% of the element size, not XX% of the background image.
// *
// * Consider adding background-repeat property to avoid unwanted repetition of background.
// *
// * @EXAMPLES
// * 1. .background-size(contain);
// * 2. .background-size(cover);
// * 3. .background-size(70%); // = (70% auto). Image is scaled to take 70% of width
// * // of the element and it keeps its own aspect ratio.
// * 4. .background-size(auto, 70%) // Image is scaled to take 70% of element's
// * // height and keeps aspect ratio.
// * 5. background-size(70px 7em); // Size of the background image is now 70px (width) x 7em (height).
// * 6. background-size(70px,7em); // Same as above. Comma is fine too.
// *
// * @BROWSERS SUPPORT
// * IE9+, Fx3.6+ and every other.
// *
// * @LINKS
// * * https://developer.mozilla.org/en-US/docs/CSS/background-size
// * * http://caniuse.com/#search=background-size
// **/
.background-size (...) {
-moz-background-size: @arguments;
background-size: @arguments;
}
// A shorthand class.
.bg-size (...) {.background-size(@arguments)}
///**
// * Columns layout
// *
// * Divide a block of text into columns as seen in newspapers.
// *
// * @USAGE
// * Use .columns() class providing arguments in the brackets.
// * None of those arguments are required, but unless you provide one, columns
// * layout won't work. Available arguments:
// * -- [integer] - declare a column-count. Unless declared, their width will
// * equal to division of the block's width minus column-gaps and declared integer.
// * Default value is "auto" which means that width of columns will be determined
// * by column-width value.
// * -- [width] - declare every column width in px, em and % (of containing block).
// * Default value is "auto" - column width will be equal to division of the
// * block's width and declared column-count
// *
// * Usage of supporting classes:
// * You can declare the gaps between columns by .column-gap() class that takes
// * width type argument. Default value is "normal" and equals to 1em.
// *
// * Declare a vertical rule between columns using .column-rule(). It's the same
// * type of declaration as in borders, that is width, style and colour. By default
// * there is no rule.
// *
// * @EXAMPLES
// * 1. .column(2, 20px) // Two columns with 20px width.
// * 2. .column(5) // Five columns layout.
// * 3. element {
// * .column(100px); // A 100px width columns
// * .column-gap(10px); // with 10px gap between
// * .column-rule(1px solid black); // and 1px thick, solid, black vertical rule.
// * }
// *
// * @BROWSERS SUPPORT
// * IE10+ and every other (except for Opera Mini)
// *
// * @LINKS
// * * https://developer.mozilla.org/en-US/docs/CSS/columns
// * * http://caniuse.com/#feat=multicolumn
// **/
.columns (...) {
-webkit-columns: @arguments;
-moz-columns: @arguments;
columns: @arguments;
}
.column-gap (@gap) {
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
.columns-gap (@gap) {.column-gap(@gap);}
.column-rule (...) {
-webkit-column-rule: @arguments;
-moz-column-rule: @arguments;
column-rule: @arguments;
}
.columns-rule (...) {.column-rule(@arguments);}
.column-fill (@fill) {
-webkit-column-fill: @fill;
-moz-column-fill: @fill;
column-fill: @fill;
}
.columns-fill (@fill) {.column-fill(@fill);}
///**
// * Transforms
// *
// * 2D and 3D transformation of an object.
// *
// * @ABOUT
// * Transforms don't affect an object's place in a document and its environment
// * so there's no risk of crashing a layout.
// *
// * Transformations characteristics:
// * -- Rotate takes one argument and rotate object clockwise by specified angle (in deg).
// * -- Scale takes one or two arguments (x,y). If y is not specified it is assumed that x = y.
// * Arguments in interval (0,1) shrink the object. Arguments >1 makes it bigger.
// * -- Skew takes one or two arguments (x,y). If y is not specified it is assumed that y = 0 (no y-skew).
// * Arguments must be in deg.
// * -- Translate takes one or two arguments (w,y). If y is not specified it is assumed y = 0 (no y-translate).
// * Arguments are in px or em. Translate moves the object by specified value.
// *
// * Sometimes you might want to control the point that is the relative base of transformations.
// * For that reason use .transform-origin class. That class takes one or two values.
// * First value defines horizontal position of that point, second refers to vertical position.
// * In case you provide only the first value, the second is set to 50%. Default value is (50% 50%).
// * You can use three types of values:
// * -- pixels that place origin point in position according to the top-left corner of an element
// * to its bottom-right corner. Negative values allowed - in that case position goes to the left
// * and top from the top-left corner,
// * -- percentages that are relative to object's width and height. As in px, the original position
// * is top-left corner (0% 0%), and goes to bottom-right (100% 100%). Negative values does the
// * same as in px.
// * -- keywords: left / center / right for x-axis and top / center / bottom for y-axis.
// *
// * For 3D transformations you can set a perspective using .perspective() class and putting
// * value in brackets .
// *
// * @USAGE
// * You can use classes dedicated to specifics transformation, but if you plan
// * to use multiple transformation on an object, use general classes .transform
// * or .transform3d instead. Otherwise the latter transform will override the former.
// * If you want to use some of the 3D transformations, use .transform3d class. It
// * has a 3D specific property transform-style included. You can put both 3D and 2D
// * transformations in .transform3D.
// *
// * @EXAMPLES
// * 1. .scale(2,.5) // Stretch an object two times and shrink in height by half.
// * 2. .rotate(180deg) // Rotate an object by 180deg.
// * 3. .transform(scale(2,.5) rotate(180deg)) // Does the combined transformation from examples above.
// * 4. .transform-origin(20% top) // Place the transformation origin at the top, 20% of the object's
// * // width to the right from the top-left corner.
// *
// * @BROWSERS SUPPORT
// * IE9 (2D), IE10+ (3D), Fx3.5 (2D) and every other (except for Opera Mini)
// *
// * @LINKS
// * * https://developer.mozilla.org/en-US/docs/CSS/transform
// * * http://caniuse.com/#feat=transforms2d
// * * http://caniuse.com/#feat=transforms3d
// **/
.transform-origin (...) {
-webkit-transform-origin: @arguments;
-moz-transform-origin: @arguments;
-ms-transform-origin: @arguments;
transform-origin: @arguments;
}
.transform-style(@style) {
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.perspective (@perspective) {
-webkit-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin (...) {
-webkit-perspective-origin: @arguments;
perspective-origin: @arguments;
}
.backface-visibility(@visibility){
-webkit-backface-visibility: @visibility;
backface-visibility: @visibility;
}
.transform (...) {
-webkit-transform: @arguments;
-moz-transform: @arguments;
-ms-transform: @arguments;
transform: @arguments;
}
.transform3d (...) {
-webkit-transform: @arguments;
transform: @arguments;
}
.transform-perspective (@perspective) {
-webkit-transform: perspective(@perspective);
transform: perspective(@perspective);
}
.rotate (@rotate) {
-webkit-transform: rotate(@rotate);
-moz-transform: rotate(@rotate);
-ms-transform: rotate(@rotate);
transform: rotate(@rotate);
}
.rotate3d (@deg1, @deg2:0, @deg3:0){
-webkit-transform: rotateX(@deg1) rotateY(@deg2) rotateZ(@deg3);
transform: rotateX(@deg1) rotateY(@deg2) rotateZ(@deg3);
}
.scale (@scale) {
-webkit-transform: scale(@scale);
-moz-transform: scale(@scale);
-ms-transform: scale(@scale);
transform: scale(@scale);
}
.scale (@scale1,@scale2) {
-webkit-transform: scale(@scale1,@scale2);
-moz-transform: scale(@scale1,@scale2);
-ms-transform: scale(@scale1,@scale2);
transform: scale(@scale1,@scale2);
}
.scaleX (@scale) {
-webkit-transform: scaleX(@scale);
-moz-transform: scaleX(@scale);
-ms-transform: scaleX(@scale);
transform: scaleX(@scale);
}
.scaleY (@scale) {
-webkit-transform: scaleY(@scale);
-moz-transform: scaleY(@scale);
-ms-transform: scaleY(@scale);
transform: scaleY(@scale);
}
.skew (@skew) {
.skewX(@skew);
}
.skew (@skew1, @skew2) {
-webkit-transform: skewX(@skew1) skewY(@skew2);
-moz-transform: skewX(@skew1) skewY(@skew2);
-ms-transform: skewX(@skew1) skewY(@skew2);
transform: skewX(@skew1) skewY(@skew2);
}
.skewX (@skew) {
-webkit-transform: skewX(@skew);
-moz-transform: skewX(@skew);
-ms-transform: skewX(@skew);
transform: skewX(@skew);
}
.skewY (@skew) {
-webkit-transform: skewY(@skew);
-moz-transform: skewY(@skew);
-ms-transform: skewY(@skew);
transform: skewY(@skew);
}
.translate (@translate) {
-webkit-transform: translate(@translate);
-moz-transform: translate(@translate);
-ms-transform: translate(@translate);
transform: translate(@translate);
}
.translate (@translate1, @translate2) {
-webkit-transform: translate(@translate1, @translate2);
-moz-transform: translate(@translate1, @translate2);
-ms-transform: translate(@translate1, @translate2);
transform: translate(@translate1, @translate2);
}
.translateX (@translate) {
-webkit-transform: translateX(@translate);
-moz-transform: translateX(@translate);
-ms-transform: translateX(@translate);
transform: translateX(@translate);
}
.translateY (@translate) {
-webkit-transform: translateY(@translate);
-moz-transform: translateY(@translate);
-ms-transform: translateY(@translate);
transform: translateY(@translate);
}
///**
// * Transition
// *
// * Animate a change between different object states.
// *
// * @ABOUT
// * You can use this class to animate change of up to 5 different properties.
// * If you need more that that (wow!) it's easy to add more of these classes.
// *
// * Transition takes 4 values:
// * -- transition-property - choose a property you want to animate (margin, colour etc.).
// * Default value is "all" which will animate every change that might happen. It's a good
// * idea to explicitly write this value if you want to animate everything, though. We can't
// * be sure if in the future default state won't change to "none", which will break the whole transition.
// * -- transition-duration - specifies how long transition animation will have to take
// * until animation is finished. Put values in s (seconds) or ms (milliseconds).
// * Required value, since default state is 0s (no animation occurs).
// * -- transition-timing-function - this value describe an acceleration function. It can
// * really affect overall experience, so it's good idea to pay attention to that.
// * Timing function takes 4 number values of keywords: linear, ease, ease-in,
// * ease-in-out, ease-out. For further explanation refer to ->developer.mozilla.org/en/CSS/timing-function
// * Default value is "ease".
// * -- transition-delay - in seconds or millisecond describes how long transition will wait
// * until it occurs after a triggering requirement was met. Default value is 0 - instant animation.
// *
// * In case you want to put a transformation property into transition effect, use
// * the .transition-transform class. This class is prepared to automatically add
// * many browsers prefixes required in that case. It is also a bit future friendly,
// * but all at all using transitions on transform is very risky.
// * -> http://radiatingstar.com/transition-with-transform-cant-be-future-proof
// *
// * @USAGE
// * For .transition class, put in brackets at least a time value. If you want to animate more than one
// * property or animate everything with different functions, put up to 5 declarations separated with
// * commas. If one of the property you want to animate is "transform" _and_ you want to animate every
// * other properties (or at least not with the same functions), use .transition-transform. As a first
// * value put a time duration for transform property. Do not write this property though. It's auto-added
// * for the first set of values. Add other properties after commas. Refer to the example 3.
// *
// * @EXAMPLES
// * 1. .transition (all 1s); // Animate all properties for 1 second.
// * 2. .transition (background-color 5s, margin 1s linear 5s) // Animate change of background-color for 5s
// * // and after 5s animate margin change for 1s.
// * 3. .transition-transform (2s linear, padding 3s) // Animate change of transform property (no "transform" declared!)
// * // and padding property.
// *
// * @BROWSERS SUPPORT
// * IE10+ and every other (except for Opera Mini)
// *
// * @LINKS
// * * https://developer.mozilla.org/en-US/docs/CSS/transition
// * * http://caniuse.com/#feat=css-transitions
// **/
.transition(@transition1, @transition2:X, ...){
@transitions: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-webkit-transition: @transitions;
transition: @transitions;
}
.transition-transform (@transformArguments1, @transformArguments2:X, ...) {
@transformArguments: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-webkit-transition: -webkit-transform @transformArguments;
transition: transform @transformArguments;
}
.transition-property(@property1, @property2:X, ...) {
@properties: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-webkit-transition-property: @properties;
transition-property: @@properties;
}
.transition-duration(@property1, @property2:X, ...) {
@properties: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-webkit-transition-duration: @properties;
transition-duration: @properties;
}
.transition-timing-function(@property1, @property2:X, ...) {
@properties: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-webkit-transition-timing-function: @properties;
transition-timing-function: @properties;
}
.transition-delay(@property1, @property2:X, ...) {
@properties: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-webkit-transition-delay: @properties;
transition-delay: @properties;
}
///**
// * Animations
// *
// * Create an awesome animation!
// *
// * @ABOUT
// * This class takes from two to five properties:
// * -- animation-name [required] - declare your @keyframes animation name. See below
// * for an easy way to make @keyframes!
// * -- animation-duration [required] - declare how long will it take for an animation
// * to reach end. Value in seconds (s) or milliseconds (ms).
// * -- timing-function - it's the same property as in transition. Refer to
// * that topic for further explanation.
// * -- iteration-count - how many times an animation will repeat. It takes integer
// * or "infinite" keyword (for infinite repetition). Default value is 1.
// * -- direction - indicates whether the animation should play in reverse on
// * alternate cycles. Refer to ->developer.mozilla.org/en/CSS/animation-direction
// * for better explanation. To declare a direction use normal [default value],
// * alternate, reverse or alternate-reverse keyword.
// *
// * @USAGE
// * Creating @keyframes
// * Write in your .less file:
// * *** @import 'animationX.less';
// * where X stands for a number between 1 and 5. Then create a class
// * *** .animationX() {}
// * and in {} write declarations you normally write in @keyframes.
// * Then just put an .animation(animationX [other animation properties]) class in your element.
// * That's all!
// *
// * @EXAMPLES
// * .toBeAnimated {
// * // Animation with every possible value declared. //
// * .animation(animation1 5s linear 3s infinite alternate);
// * }
// * // Importing prefixed @keyframes for animation1.
// * @import '3L/assets/animations/animation1';
// *
// * // Declaring @keyframes for animation. Only once!
// * .animation1() {
// * from {margin-top: 3px;}
// * to {margin-top: 333px;}
// * }
// *
// * @BROWSERS SUPPORT
// * IE10+ and every other (except for Opera Mini)
// *
// * @LINKS
// * * http://developer.mozilla.org/en/CSS/animation
// * * http://caniuse.com/#feat=css-animation
// **/
.animation (...) {
-webkit-animation: @arguments;
animation: @arguments;
}
.animate (...) {.animation(@arguments);}
.anime (...) {.animation(@arguments);}
.animation-name(...) {
-webkit-animation-name: @arguments;
animation-name: @arguments;
}
.animation-duration(...) {
-webkit-animation-duration: @arguments;
animation-duration: @arguments;
}
.animation-timing-function(...) {
-webkit-animation-timing-function: @arguments;
animation-timing-function: @arguments;
}
.animation-delay(...) {
-webkit-animation-delay: @arguments;
animation-delay: @arguments;
}
.animation-iteration-count(...) {
-webkit-animation-iteration-count: @arguments;
animation-iteration-count: @arguments;
}
.animation-direction(...) {
-webkit-animation-direction: @arguments;
animation-direction: @arguments;
}
.animation-fill-mode(...) {
-webkit-animation-fill-mode: @arguments;
animation-fill-mode: @arguments;
}
///**
// * User-select
// *
// * Controls the selection model of an element.
// *
// * @ABOUT
// * This property takes following values:
// * -- none - none of the element's content can be selected.
// * -- text [default] - the element's contents follow a standard text content selection model.
// * -- toggle - the element's contents follow a standard toggling content model.
// * -- element - one element at a time may be selected.
// * -- elements - one or more elements at a time may be selected.
// * -- all - Only the entire contents as a whole can be selected.
// *
// * @BROWSERS SUPPORT
// * IE10+, Firefox, Chrome, Safari (not Opera)
// *
// * @LINKS
// * * https://developer.mozilla.org/en-US/docs/CSS/user-select
// * * http://caniuse.com/#search=user-select
// **/
.user-select (...) {
-webkit-user-select: @arguments;
-moz-user-select: @arguments;
-ms-user-select: @arguments;
user-select: @arguments;
}
///**
// * Filter
// *
// * Advanced image manipulation in your CSS!
// *
// * @NOTE
// * The filter property currently works only in Webkit browsers. You might want to
// * just use the -webkit-filter property without the help of .filter() mixins to
// * avoid generating useless code.
// *
// * @BROWSERS SUPPORT
// * Newest Webkit browsers.
// *
// * @LINKS
// * * https://developer.mozilla.org/en-US/docs/CSS/filter
// * * http://www.html5rocks.com/en/tutorials/filters/understanding-css/
// **/
.filter(@filter1, @filter2:X, ...) {
@filters: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-webkit-filter: @filters;
-moz-filter: @filters;
-ms-filter: @filters;
filter: @filters;
}
.grayscale(@amount) {
-webkit-filter: grayscale(@arguments);
-moz-filter: grayscale(@arguments);
-ms-filter: grayscale(@arguments);
filter: grayscale(@arguments);
}
.sepia(@amount) {
-webkit-filter: sepia(@arguments);
-moz-filter: sepia(@arguments);
-ms-filter: sepia(@arguments);
filter: sepia(@arguments);
}
.saturate(@amount) {
-webkit-filter: saturate(@arguments);
-moz-filter: saturate(@arguments);
-ms-filter: saturate(@arguments);
filter: saturate(@arguments);
}
.hue-rotate(@angle) {
-webkit-filter: hue-rotate(@arguments);
-moz-filter: hue-rotate(@arguments);
-ms-filter: hue-rotate(@arguments);
filter: hue-rotate(@arguments);
}
.invert(@amount) {
-webkit-filter: invert(@arguments);
-moz-filter: invert(@arguments);
-ms-filter: invert(@arguments);
filter: invert(@arguments);
}
// .opacity() already taken, hence the -filter suffix.
.opacity-filter(@amount) {
-webkit-filter: opacity(@arguments);
-moz-filter: opacity(@arguments);
-ms-filter: opacity(@arguments);
filter: opacity(@arguments);
}
.brightness(@amount) {
-webkit-filter: brightness(@arguments);
-moz-filter: brightness(@arguments);
-ms-filter: brightness(@arguments);
filter: brightness(@arguments);
}
.contrast(@amount) {
-webkit-filter: contrast(@arguments);
-moz-filter: contrast(@arguments);
-ms-filter: contrast(@arguments);
filter: contrast(@arguments);
}
.blur(@radius) {
-webkit-filter: blur(@arguments);
-moz-filter: blur(@arguments);
-ms-filter: blur(@arguments);
filter: blur(@arguments);
}
.drop-shadow(@shadow) {
-webkit-filter: drop-shadow(@arguments);
-moz-filter: drop-shadow(@arguments);
-ms-filter: drop-shadow(@arguments);
filter: drop-shadow(@arguments);
}
.url(@url) {
-webkit-filter: (@arguments);
-moz-filter: (@arguments);
-ms-filter: (@arguments);
filter: @arguments;
}
///**
// * Border image
// *
// * Use images as your borders.
// *
// * @ABOUT
// * Border image lets you use an image as borders for an element. It takes at least 3 arguments:
// * -- an URL of an imge that will be used as a border,
// * -- image-slice (number) that tells the browser how to cut the image,
// * -- image-repeat (keywords: repeat, round or stretch)
// * and optionally:
// * -- image-width for defining an offset of border parts in an image provided in url,
// * -- offset that the border-image will extend beyond a box.
// *
// * A layout of a page isn't affected by border-image. It's calculated only based
// * on border-width property. That means you can use even a very wide image and
// * still the surrounding content won't move a pixel.
// *
// * @USAGE
// * In .border-image() provide at least required arguments with the first being the URL path (without "url()").
// *
// * @BROWSERS SUPPORT
// * All except IE
// *
// * @LINKS
// * * https://developer.mozilla.org/pl/docs/CSS/border-image
// * * http://caniuse.com/#feat=border-image
// * * http://dev.w3.org/csswg/css-backgrounds/#border-image
// **/
.border-image(@url, @rest...) {
-webkit-border-image:url(@url) @rest;
-moz-border-image:url(@url) @rest;
-o-border-image:url(@url) @rest;
border-image:url(@url) @rest;
}
.border-image-source(@url) {
-webkit-border-image-source: url(@url);
-moz-border-image-source: url(@url);
-o-border-image-source: url(@url);
border-image-source: url(@url);
}
.border-image-slice(@slice) {
-webkit-border-image-slice: @slice;
-moz-border-image-slice: @slice;
-o-border-image-slice: @slice;
border-image-slice: @slice;
}
.border-image-width(@width) {
-webkit-border-image-width: @width;
-moz-border-image-width: @width;
-o-border-image-width: @width;
border-image-width: @width;
}
.border-image-outset(@outset) {
-webkit-border-image-outset: @outset;
-moz-border-image-outset: @outset;
-o-border-image-outset: @outset;
border-image-outset: @outset;
}
.border-image-repeat(@repeat) {
-webkit-border-image-repeat: @repeat;
-moz-border-image-repeat: @repeat;
-o-border-image-repeat: @repeat;
border-image-repeat: @repeat;
}
///**
// * Flexible Box Model
// *
// * @BROWSERS SUPPORT
// * Firefox 22+, Chrome, Opera
// *
// * @LINKS
// * * https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_flexible_boxes
// * * http://caniuse.com/#search=flex
// **/
.display-flex() {
display: -webkit-flex;
display: flex;
}
.display-inline-flex(){
display: -webkit-inline-flex;
display: inline-flex;
}
.flex-direction(@direction) {
-webkit-flex-direction: @direction;
flex-direction: @direction;
}
.justify-content(@alignment) {
-webkit-justify-content: @alignment;
justify-content: @alignment;
}
.align-content(@alignment) {
-webkit-align-content: @alignment;
align-content: @alignment;
}
.align-items(@alignment) {
-webkit-align-items: @alignment;
align-items: @alignment;
}
.align-self(@alignment) {
-webkit-align-self: @alignment;
align-self: @alignment;
}
.flex(@arguments){
-webkit-flex: @arguments;
flex: @arguments;
}
.flex-basis(@basis) {
-webkit-flex-basis: @basis;
flex-basis: @basis;
}
.flex-grow(@grow) {
-webkit-flex-grow: @grow;
flex-grow: @grow;
}
.flex-shrink(@shrink) {
-webkit-flex-shrink: @shrink;
flex-shrink: @shrink;
}
.flex-flow(@arguments) {
-webkit-flex-flow: @arguments;
flex-flow: @arguments;
}
.flex-direction(@direction) {
-webkit-flex-direction: @direction;
flex-direction: @direction;
}
.flex-wrap(@wrap) {
-webkit-flex-wrap: @wrap;
flex-wrap: @wrap;
}
.order(@order) {
-webkit-order: @order;
order: @order;
}
///**
// * Appearance
// *
// * @LINKS
// * * https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance
// **/
.appearance (@appearance) {
-webkit-appearance: @appearance;
-moz-appearance: @appearance;
}
///**
// * Selection
// *
// * Style a visual representtion of selecting elements and objects.
// *
// * @USAGE
// * You can use it on the root of your CSS to make the selection style global
// * or inside a specyfic element. Provide two arguments: font color and background-color.
// *
// * @EXAMPLES
// * 1. .selection(red, blue);
// * 2. p {
// * .selection(red, blue)
// * }
// **/
.selection(@text-color, @background-color) {
&::-moz-selection {color: @text-color; background-color: @background-color;}
&::selection {color: @text-color; background-color: @background-color;}
}
///**
// * hasLayout
// *
// * A hack for IE.
// *
// * @LINKS
// * * http://reference.sitepoint.com/css/haslayout
// **/
.hasLayout() {*zoom: 1;}
.ninja() {
color: black;
visibility: hidden;
}
/*
LESS DSS (dynamic stylesheet) 1.8.5 (for less.js 1.3+)
MORE INFO: http://cl.ly/Dqnr
LESS mixins by Chris Krupski
*/
/* Backgrounds Group
========================== */
.gradient-h (@startColor: #EEE, @endColor: #FFF) {
background-color: @endColor;
background-image: -webkit-gradient(linear, left center, right center, from(@startColor),to(@endColor));
background-image: -webkit-linear-gradient(left, @startColor, @endColor);
background-image: -moz-linear-gradient(left, @startColor, @endColor);
background-image: -o-linear-gradient(left, @startColor, @endColor);
background-image: linear-gradient(left, @startColor, @endColor);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=1, StartColorStr='%d', EndColorStr='%d')", @startColor, @endColor));
}
/* @group gradient-veritical() */
.gradient-v (@startColor: #EEE, @endColor: #FFF) {
background-color: mix(@startColor, @endColor, 60%);
background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
background-image: -webkit-linear-gradient(top, @startColor, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @endColor);
background-image: -o-linear-gradient(top, @startColor, @endColor);
background-image: linear-gradient(top, @startColor, @endColor);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='%d', EndColorStr='%d')", @startColor, @endColor));
}
.gradient-vline (@startColor: #B0BAC5, @middleColor1: #9DA7B2, @middleColor2: #919CA8, @endColor: #7E8A98) {
background: mix(@middleColor1, @middleColor2, 50%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(50%, @middleColor1), color-stop(51%, @middleColor2), color-stop(100%, @endColor));
background-image: -webkit-linear-gradient(top, @startColor 0%, @middleColor1 50%, @middleColor2 51%, @endColor 100%);
background-image: -moz-linear-gradient(top, @startColor 0%, @middleColor1 50%, @middleColor2 51%, @endColor 100%);
background-image: -o-linear-gradient(top, @startColor 0%, @middleColor1 50%, @middleColor2 51%, @endColor 100%);
background-image: linear-gradient(top, @startColor 0%, @middleColor1 50%, @middleColor2 51%, @endColor 100%);
}
.gradient-v3colors (@startColor: #00b3ee, @middleColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
background-color: mix(@middleColor, @endColor, 80%);
background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), color-stop(@colorStop, @middleColor), to(@endColor));
background-image: -webkit-linear-gradient(@startColor, @middleColor @colorStop, @endColor);
background-image: -moz-linear-gradient(top, @startColor, @middleColor @colorStop, @endColor);
background-image: -o-linear-gradient(@startColor, @middleColor @colorStop, @endColor);
background-image: linear-gradient(@startColor, @middleColor @colorStop, @endColor);
filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='%d', endColorstr='%d')", @startColor, @endColor));
}
/* @end */
.gradient-radial (@innerColor: #EEE, @outerColor: #FFF) {
background-color: @outerColor;
background-image: -webkit-gradient(radial, 50% 50%, 200, 50% 50%, 20, from(@outerColor), to(@innerColor));
background-image: -webkit-radial-gradient(50% 50%, @innerColor, @outerColor);
background-image: -moz-radial-gradient(50% 50%, @innerColor, @outerColor);
background-image: -o-radial-gradient(50% 50%, @innerColor, @outerColor);
background-image: radial-gradient(50% 50%, @innerColor, @outerColor);
}
.gradient-direction (@startColor: #555, @endColor: #333, @degrees: 45) {
background: @endColor;
background-image: -webkit-gradient(linear, ~"@{degrees}deg", from(@startColor), to(@endColor));
background-image: -webkit-linear-gradient(~"@{degrees}deg", @startColor, @endColor);
background-image: -moz-linear-gradient(~"@{degrees}deg", @startColor, @endColor);
background-image: -o-linear-gradient(~"@{degrees}deg", @startColor, @endColor);
background-image: linear-gradient(~"@{degrees}deg", @startColor, @endColor);
}
/* @group background-clip() */
.bg-clip (@type: border-box) when (@type = border-box), (@type = padding-box), (@type = content-box) { /* ( border-box | padding-box | content-box ) */
-webkit-background-clip: @type;
background-clip: @type;
}
.bg-clip (@type: border) when not (@type = border-box) and not (@type = padding-box) and not (@type = content-box) { /* ( border-box | padding-box | content-box ) */
-webkit-background-clip: ~"@{type}-box";
-moz-background-clip: @type;
background-clip: ~"@{type}-box";
}
/* @end */
.bg-size (@value) {
-webkit-background-size: @value;
background-size: @value;
}
/* Box Group
========================== */
/* @option: box-display() */
.box-display() {
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
}
/* @end */
.box-align (@value) { /* ( start | end | center | baseline | stretch ) */
-webkit-box-align: @value;
-moz-box-align: @value;
-ms-box-align: @value;
box-align: @value;
.box-display;
}
.box-direction (@value) { /* ( normal | reverse | inherit ) */
-webkit-box-align: @value;
-moz-box-align: @value;
-ms-box-align: @value;
box-align: @value;
.box-display;
}
.box-orient (@value) { /* ( horizontal | vertical | inline-axis | block-axis | inherit ) */
-webkit-box-align: @value;
-moz-box-align: @value;
-ms-box-align: @value;
box-align: @value;
.box-display;
}
.box-pack (@value) { /* ( start | end | center | justify ) */
-webkit-box-align: @value;
-moz-box-align: @value;
-ms-box-align: @value;
box-align: @value;
.box-display;
}
.box-sizing (@type: border-box) { /* ( content-box | border-box | inherit ) */
-webkit-box-sizing: @type;
-moz-box-sizing: @type;
box-sizing: @type;
}
/* @group box-shadow() */
.box-shadow-init (@all) {
-webkit-box-shadow: @all;
box-shadow: @all;
}
.box-shadow (@values: "1px 1px 2px #000, 0 0 4px #fff, inset 1px 3px 2px #000") { /* for multi values */
-webkit-box-shadow: e(@values);
box-shadow: e(@values);
}
.box-shadow (@option, @values) when (@option = in) {
.box-shadow-init(inset @values);
}
.box-shadow (@option, @values) when (@option = out) {
.box-shadow-init(@values);
}
.box-shadow (@parameters, @color, @alpha) when (isnumber(@alpha)) {
.box-shadow-init(@parameters fade(@color, @alpha));
}
/* @end */
/* Border Group
========================== */
.border-image (@source: none, @values: 30 30 repeat) { /* ( source | slice | width | outset | repeat ) */
-webkit-border-image: e(%("url('%d')", ~"@{source}")) @values;
-moz-border-image: e(%("url('%d')", ~"@{source}")) @values;
-o-border-image: e(%("url('%d')", ~"@{source}")) @values;
border-image: e(%("url('%d')", ~"@{source}")) @values;
}
/* @group rounded() */
.rounded (@radius: 2px) {
-webkit-border-radius: @radius;
border-radius: @radius;
}
.rounded (top, @value: 4) {
-webkit-border-top-left-radius: @value * 1px;
border-top-left-radius: @value * 1px;
-webkit-border-top-right-radius: @value * 1px;
border-top-right-radius: @value * 1px;
}
.rounded (right, @value: 4) {
-webkit-border-top-right-radius: @value * 1px;
border-top-right-radius: @value * 1px;
-webkit-border-bottom-right-radius: @value * 1px;
border-bottom-right-radius: @value * 1px;
}
.rounded (bottom, @value: 4) {
-webkit-border-bottom-right-radius: @value * 1px;
border-bottom-right-radius: @value * 1px;
-webkit-border-bottom-left-radius: @value * 1px;
border-bottom-left-radius: @value * 1px;
}
.rounded (left, @value: 4) {
-webkit-border-top-left-radius: @value * 1px;
border-top-left-radius: @value * 1px;
-webkit-border-bottom-left-radius: @value * 1px;
border-bottom-left-radius: @value * 1px;
}
/* @end */
/* Transform Group
========================== */
.transform (@options) { /* clear transform function */
-webkit-transform: @options;
-moz-transform: @options;
-ms-transform: @options;
-o-transform: @options;
transform: @options;
}
/* @group matrix() */
.matrix (@rotate: 0.86, @scale: 0.5, @translate: -0.5, @skew: 0.86, @x: 0, @y: 0) {
-webkit-transform: matrix(@rotate, @scale, @translate, @skew, @x, @y);
-moz-transform: matrix(@rotate, @scale, @translate, @skew, @x, @y);
-ms-transform: matrix(@rotate, @scale, @translate, @skew, @x, @y);
-o-transform: matrix(@rotate, @scale, @translate, @skew, @x, @y);
transform: matrix(@rotate, @scale, @translate, @skew, @x, @y);
filter: e(%("progid:DXImageTransform.Microsoft.Matrix(M11=%d, M12=%d, M21=%d, M22=%d, sizingMethod='auto expand')", @rotate, @scale, @translate, @skew));
}
.matrix3d (@values: "1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1") {
-webkit-transform: matrix3d(e(@values));
-moz-transform: matrix3d(e(@values));
-ms-transform: matrix3d(e(@values));
-o-transform: matrix3d(e(@values));
transform: matrix3d(e(@values));
}
/* @end */
/* @group rotate() */
.rotate (@degrees: 5) {
-webkit-transform: rotate(~"@{degrees}deg");
-moz-transform: rotate(~"@{degrees}deg");
-ms-transform: rotate(~"@{degrees}deg");
-o-transform: rotate(~"@{degrees}deg");
transform: rotate(~"@{degrees}deg");
}
.rotate3d (@x: 0, @y: 0, @z: 0, @degrees: 120) {
-webkit-transform: rotate3d(@x, @y, @z, ~"@{degrees}deg");
-moz-transform: rotate3d(@x, @y, @z, ~"@{degrees}deg");
-ms-transform: rotate3d(@x, @y, @z, ~"@{degrees}deg");
-o-transform: rotate3d(@x, @y, @z, ~"@{degrees}deg");
transform: rotate3d(@x, @y, @z, ~"@{degrees}deg");
}
.rotate (@axis, @degrees: 120) when (@axis = x) {
-webkit-transform: e(%('rotateX(%d)', ~"@{degrees}deg"));
-moz-transform: e(%('rotateX(%d)', ~"@{degrees}deg"));
-ms-transform: e(%('rotateX(%d)', ~"@{degrees}deg"));
-o-transform: e(%('rotateX(%d)', ~"@{degrees}deg"));
transform: e(%('rotateX(%d)', ~"@{degrees}deg"));
}
.rotate (@axis, @degrees: 10) when (@axis = y) {
-webkit-transform: e(%('rotateY(%d)', ~"@{degrees}deg"));
-moz-transform: e(%('rotateY(%d)', ~"@{degrees}deg"));
-ms-transform: e(%('rotateY(%d)', ~"@{degrees}deg"));
-o-transform: e(%('rotateY(%d)', ~"@{degrees}deg"));
transform: e(%('rotateY(%d)', ~"@{degrees}deg"));
}
.rotate (@axis, @degrees: 10) when (@axis = z) {
-webkit-transform: e(%('rotateZ(%d)', ~"@{degrees}deg"));
-moz-transform: e(%('rotateZ(%d)', ~"@{degrees}deg"));
-ms-transform: e(%('rotateZ(%d)', ~"@{degrees}deg"));
-o-transform: e(%('rotateZ(%d)', ~"@{degrees}deg"));
transform: e(%('rotateZ(%d)', ~"@{degrees}deg"));
}
/* @end */
/* @group scale() */
.scale (@ratio: 1) {
-webkit-transform: scale(@ratio);
-moz-transform: scale(@ratio);
-ms-transform: scale(@ratio);
-o-transform: scale(@ratio);
transform: scale(@ratio);
}
.scale3d (@x: 1, @y: 1, @z: 1) {
-webkit-transform: scale3d(@x, @y, @z);
-moz-transform: scale3d(@x, @y, @z);
-ms-transform: scale3d(@x, @y, @z);
transform: scale3d(@x, @y, @z);
}
.scale (@axis, @value: 1) when (@axis = x) {
-webkit-transform: e(%('scaleX(%d)', @value));
-moz-transform: e(%('scaleX(%d)', @value));
-ms-transform: e(%('scaleX(%d)', @value));
-o-transform: e(%('scaleX(%d)', @value));
transform: e(%('scaleX(%d)', @value));
}
.scale (@axis, @value: 1) when (@axis = y) {
-webkit-transform: e(%('scaleY(%d)', @value));
-moz-transform: e(%('scaleY(%d)', @value));
-ms-transform: e(%('scaleY(%d)', @value));
-o-transform: e(%('scaleY(%d)', @value));
transform: e(%('scaleY(%d)', @value));
}
.scale (@axis, @value: 1) when (@axis = z) {
-webkit-transform: e(%('scaleZ(%d)', @value));
-moz-transform: e(%('scaleZ(%d)', @value));
-ms-transform: e(%('scaleZ(%d)', @value));
-o-transform: e(%('scaleZ(%d)', @value));
transform: e(%('scaleZ(%d)', @value));
}
/* @end */
/* @group translate() */
.translate (@x: 0, @y: 0) when not (@x = x) and not (@x = y) and not (@x = z) {
-webkit-transform: translate(@x * 1px, @y * 1px);
-moz-transform: translate(@x * 1px, @y * 1px);
-ms-transform: translate(@x * 1px, @y * 1px);
-o-transform: translate(@x * 1px, @y * 1px);
transform: translate(@x * 1px, @y * 1px);
}
.translate3d (@x: 0, @y: 0, @z: 0) {
-webkit-transform: translate3d(@x * 1px, @y * 1px, @z * 1px);
-moz-transform: translate3d(@x * 1px, @y * 1px, @z * 1px);
-ms-transform: translate3d(@x * 1px, @y * 1px, @z * 1px);
-o-transform: translate3d(@x * 1px, @y * 1px, @z * 1px);
transform: translate3d(@x * 1px, @y * 1px, @z * 1px);
}
.translate (@axis, @x: 0) when (@axis = x) {
-webkit-transform: e(%('translateX(%d)', @x * 1px));
-moz-transform: e(%('translateX(%d)', @x * 1px));
-ms-transform: e(%('translateX(%d)', @x * 1px));
-o-transform: e(%('translateX(%d)', @x * 1px));
transform: e(%('translateX(%d)', @x * 1px));
}
.translate (@axis, @y: 0) when (@axis = y) {
-webkit-transform: e(%('translateY(%d)', @y * 1px));
-moz-transform: e(%('translateY(%d)', @y * 1px));
-ms-transform: e(%('translateY(%d)', @y * 1px));
-o-transform: e(%('translateY(%d)', @y * 1px));
transform: e(%('translateY(%d)', @y * 1px));
}
.translate (@axis, @z: 0) when (@axis = z) {
-webkit-transform: e(%('translateZ(%d)', @z * 1px));
-moz-transform: e(%('translateZ(%d)', @z * 1px));
-ms-transform: e(%('translateZ(%d)', @z * 1px));
-o-transform: e(%('translateZ(%d)', @z * 1px));
transform: e(%('translateZ(%d)', @z * 1px));
}
/* @end */
/* @group skew() */
.skew (@degrees-x: 20, @degrees-y: 20) when not (@degrees-x = x) and not (@degrees-x = y) {
-webkit-transform: skew(~"@{degrees-x}deg", ~"@{degrees-y}deg");
-moz-transform: skew(~"@{degrees-x}deg", ~"@{degrees-y}deg");
-ms-transform: skew(~"@{degrees-x}deg", ~"@{degrees-y}deg");
-o-transform: skew(~"@{degrees-x}deg", ~"@{degrees-y}deg");
transform: skew(~"@{degrees-x}deg", ~"@{degrees-y}deg");
}
.skew (@axis, @degrees-x: 20) when (@axis = x) {
-webkit-transform: e(%('skewX(%d)', ~"@{degrees-x}deg"));
-moz-transform: e(%('skewX(%d)', ~"@{degrees-x}deg"));
-ms-transform: e(%('skewX(%d)', ~"@{degrees-x}deg"));
-o-transform: e(%('skewX(%d)', ~"@{degrees-x}deg"));
transform: e(%('skewX(%d)', ~"@{degrees-x}deg"));
}
.skew (@axis, @degrees-y: 20) when (@axis = y) {
-webkit-transform: e(%('skewY(%d)', ~"@{degrees-y}deg"));
-moz-transform: e(%('skewY(%d)', ~"@{degrees-y}deg"));
-ms-transform: e(%('skewY(%d)', ~"@{degrees-y}deg"));
-o-transform: e(%('skewY(%d)', ~"@{degrees-y}deg"));
transform: e(%('skewy(%d)', ~"@{degrees-y}deg"));
}
/* @end */
.perspective (@value: none, @unit: px) {
-webkit-perspective: @value;
-moz-perspective: ~"@{value}@{unit}";
-ms-perspective: @value; /* IE 10+ */
perspective: @value;
}
.perspective-origin (@values: 50% 50%) {
-webkit-perspective-origin: @values;
-moz-perspective-origin: @values;
-ms-perspective-origin: @values; /* IE 10+ */
perspective-origin: @values;
}
.transform-origin (@x: 50%, @y: 50%, @z: 0) {
-webkit-transform-origin: @arguments;
-moz-transform-origin: @arguments;
-ms-transform-origin: @arguments; /* IE 10+ */
-o-transform-origin: @arguments;
transform-origin: @arguments;
}
.transform-style (@value: flat) { /* ( flat | preserve-3d ) */
-webkit-transform-style: @value;
-moz-transform-style: @value; /* FF 10+ */
-ms-transform-style: @value; /* IE 10+ */
transform-style: @value;
}
/* Transition
========================== */
.transition (@property: property, @duration: 0.2s, @timing: ease-out, @delay: 0) {
-webkit-transition: @arguments;
-moz-transition: @property @duration @timing ~"@{delay}s";
-o-transition: @arguments; /* Opera 10.5+ */
transition: @arguments;
}
/* Animation Group
========================== */
.animate (@name: none, @duration: 2s, @timing: ease, @delay: 0, @iteration-count: 1, @direction: normal) {
-webkit-animation: @name @duration @timing @delay @iteration-count @direction; /* Saf5, Chrome */
-moz-animation: @name @duration @timing ~"@{delay}s" @iteration-count @direction; /* FF5+ */
-o-animation: @name @duration @timing @delay @iteration-count @direction; /* Opera 12+ */
}
.animation-state (@state: running) { /* ( paused | running ) */
-webkit-animation-play-state: @state;
-moz-animation-play-state: @state;
animation-play-state: @state;
}
/* Column
========================== */
.columns (@columnCount: auto, @columnGap: normal) {
-webkit-columns: @columnCount;
-moz-columns: @columnCount;
-ms-columns: @columnCount;
columns: @columnCount;
-webkit-column-gap: @columnGap;
-moz-column-gap: @columnGap;
-ms-column-gap: @columnGap;
column-gap: @columnGap;
}
/* Misc Group
========================== */
.opacity (@opacity: 0.5) when (isnumber(@opacity)) and not (@opacity < 0) and not (@opacity > 1) {
zoom: 1;
opacity: @opacity;
filter: e(%("alpha(opacity=%d)", @opacity*100));
}
.font (@style: normal, @variant: normal, @weight: normal, @size: medium, @line-height: normal, @family: "'Lucida Grande', Helvetica, Arial, Verdana, sans-serif") {
font-style: @style;
font-variant: @variant;
font-weight: @weight;
font-size: @size;
line-height: @line-height;
font-family: e(@family);
}
.font-face (@name: Helvetca Neue, @url: "/assets/font/helvetica/helvetca-neue") {
@font-face {
font-family: %('%d', @name);
src: e(%("url('%d.eot?#') format('eot')", ~"@{url}")),
e(%("url('%d.woff') format('woff')", ~"@{url}")),
e(%("url('%d.ttf') format('truetype')", ~"@{url}"));
}
}
.size (@width: 400, @height: 200) {
width: @width * 1px;
height: @height * 1px;
}
.square (@value: 100) {
.size(@value, @value);
}
.resizable (@direction: both) { /* ( horizontal | vertical | both ) */
resize: @direction;
overflow: auto;
}
.hide-text() {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
.clearfix() {
*zoom: 1;
&:before, &:after {
content: "";
display: table;
}
&:after {
clear: both;
}
}
.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
text-shadow: @string;
}
.box-shadow (@string) {
-webkit-box-shadow: @string;
-moz-box-shadow: @string;
box-shadow: @string;
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
-webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
-moz-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
-webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
-moz-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.box-sizing (@type: border-box) {
-webkit-box-sizing: @type;
-moz-box-sizing: @type;
box-sizing: @type;
}
.border-radius (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.border-radiuses (@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;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.opacity (@opacity: 0.5) {
-webkit-opacity: @opacity;
-moz-opacity: @opacity;
opacity: @opacity;
}
.gradient (@startColor: #eee, @endColor: white) {
background-color: @startColor;
background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
background: -webkit-linear-gradient(top, @startColor, @endColor);
background: -moz-linear-gradient(top, @startColor, @endColor);
background: -ms-linear-gradient(top, @startColor, @endColor);
background: -o-linear-gradient(top, @startColor, @endColor);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
background-color: @startColor;
background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
background-image: -webkit-linear-gradient(left, @startColor, @endColor);
background-image: -moz-linear-gradient(left, @startColor, @endColor);
background-image: -ms-linear-gradient(left, @startColor, @endColor);
background-image: -o-linear-gradient(left, @startColor, @endColor);
}
.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;
}
.transition (@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
}
.transform(@string){
-webkit-transform: @string;
-moz-transform: @string;
-ms-transform: @string;
-o-transform: @string;
}
.scale (@factor) {
-webkit-transform: scale(@factor);
-moz-transform: scale(@factor);
-ms-transform: scale(@factor);
-o-transform: scale(@factor);
}
.rotate (@deg) {
-webkit-transform: rotate(@deg);
-moz-transform: rotate(@deg);
-ms-transform: rotate(@deg);
-o-transform: rotate(@deg);
}
.skew (@deg, @deg2) {
-webkit-transform: skew(@deg, @deg2);
-moz-transform: skew(@deg, @deg2);
-ms-transform: skew(@deg, @deg2);
-o-transform: skew(@deg, @deg2);
}
.translate (@x, @y:0) {
-webkit-transform: translate(@x, @y);
-moz-transform: translate(@x, @y);
-ms-transform: translate(@x, @y);
-o-transform: translate(@x, @y);
}
.translate3d (@x, @y: 0, @z: 0) {
-webkit-transform: translate3d(@x, @y, @z);
-moz-transform: translate3d(@x, @y, @z);
-ms-transform: translate3d(@x, @y, @z);
-o-transform: translate3d(@x, @y, @z);
}
.perspective (@value: 1000) {
-webkit-perspective: @value;
-moz-perspective: @value;
-ms-perspective: @value;
perspective: @value;
}
.transform-origin (@x:center, @y:center) {
-webkit-transform-origin: @x @y;
-moz-transform-origin: @x @y;
-ms-transform-origin: @x @y;
-o-transform-origin: @x @y;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment