Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 6944f0c884
Fetching contributors…

Cannot retrieve contributors at this time

1048 lines (1009 sloc) 45.745 kb
/*
* 3L was made for YOU to help you create awesome websites
* and fill the Internet with excessive amount of Love! ♥
*
* Keep up your good work!
*
* Yours faithfully,
* Mateusz ★ Kocz -> http://radiatingstar.com
*
* 3L: -> http://mateuszkocz.github.com/3l
*
* Watch 3L on Github: -> https://github.com/mateuszkocz/3l
*
* Submit a bug issue: -> https://github.com/mateuszkocz/3l/issues?state=open
*
*
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Version: 1.3.3 (2012.08.28)
*
*/
/*
* To compile all of the code you need to use a compiler
* that supports JavaScript code and guarder mixins.
* WinLess meets those requirements. You can find it on winless.org
*
* If you're on a Mac and your compiler meets the requirements,
* please, let me know via Twitter or GitHub!
*
*/
/* ACTIVATE SUPPORTING CLASSES */
/* Uncomment ones you want to use or put them in html or body elements in your style sheet. */
/* For the explanation what those classes do, read further. */
//html { // If you want to use those classes, uncomment also the html element.
//.seo-helper;
//.box-sizing() // Put in the brackets box-model you want to use.
//} // CAUTION! If you're using any of those supporting classes, uncomment that bracket!
/*
* SEO & HTML Debugging
*
* A useful supporting class that will help a bit with your SEO
* and usability of your website.
*
* 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 when you haven't put an alt attribute on image
* or kept that attribute empty, when you haven't typed a URL in anchor or when
* 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 the errors described above happens, according 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.
*
* How to:
* Place the .seo-helper class in html element. That's it!
*
* *** Example: html {.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 single area.
*
* Caution! Do not forget to delete this class before finishing your
* project, 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!
*
* *** Aside - How it works:
* *** Section only for people who don't know yet what attribute
* *** selectors and negation pseudo-class are.
* ***
* *** Using negation pseudo-class is like saying "target every element x
* *** that doesn't have attribute y" or "target every element exept (but 'not') z".
* *** You can read more about that here ->www.w3.org/TR/selectors/#negation.
* ***
* *** Attribute selectors are rules that target elements that have
* *** some specified attributes (rel, alt, href etc.) and/or specified
* *** value of this attributes. Read more on this topic here
* *** ->www.w3.org/TR/selectors/#selectors.
*
* For a further explanation and a demo, refer to:
* -> http://radiatingstar.com/how-to-improve-seo-with-css
*
* 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!";}
}
/*
* 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!
*
* 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:
* .YOUR-AWESOME-CLASS-NAME {
* // some rules
* .clearfix;
* }
*
*/
// For image replacement.
.ir () {display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; br {display: none;}}
// 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 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;}}
/*
* Box-sizing
*
* Change the basic box-model to the one you want.
*
* 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.
*
* 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.
*
* Usage:
* 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.
*
* * Beware not to use those properties without -sizing suffix thus suffixless classes are for background-clip (see this class below).
*
* Resources:
* -- http://paulirish.com/2012/box-sizing-border-box-ftw/
*
* Browsers support: IE8+ and every other.
* Notable lack of support: IE7-
*
*/
.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;-webkit-box-sizing:padding-box;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.
*
* 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.
* Notable lack of support: IE8-
*
*/
.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 shadows' arguments with comma. You can put up to five shadows
* by default but feel free to add a class with as many as you want.
* Just check how it is done.
*
* You can use a default box-shadow which will create a shadow with
* 0px x and 1px y offsets, 3px of blur and in black colour with 25% transparency.
* Just place a .box-shadow class without any arguments.
*
* 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].
*
* Resources:
* -- developer.mozilla.org/en/CSS/box-shadow
*
* Browsers support: IE9, Fx3.5, Chrome, Opera, Safari, Opera Mobile, Android Browser
* Notable lack of support: IE8-, Opera Mini
*
* Example:
* 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%)) // fade(colour,XX%) is a LESS native function
* // that adds alpha channel to colour. Instead of fade()
* // you can also use rgba or hsla colours declaration.
*
*/
// One shadow:
.box-shadow (@shadow: 0 1px 3px fade(#000,25%)){
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
// Two shadows:
.box-shadow (@shadow1, @shadow2){
-webkit-box-shadow: @shadow1, @shadow2;
-moz-box-shadow: @shadow1, @shadow2;
box-shadow: @shadow1, @shadow2;
}
// Three shadows:
.box-shadow (@shadow1, @shadow2, @shadow3){
-webkit-box-shadow: @shadow1, @shadow2, @shadow3;
-moz-box-shadow: @shadow1, @shadow2, @shadow3;
box-shadow: @shadow1, @shadow2, @shadow3;
}
// Four shadows:
.box-shadow (@shadow1, @shadow2, @shadow3, @shadow4){
-webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
-moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
box-shadow: @shadow1, @shadow2, @shadow3, @shadow4;
}
// Five shadows:
.box-shadow (@shadow1, @shadow2, @shadow3, @shadow4, @shadow5){
-webkit-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
-moz-box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
box-shadow: @shadow1, @shadow2, @shadow3, @shadow4, @shadow5;
}
/*
* 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 roundeded 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 choosen corner. Second
* declaration can have one (for circle rounding) or two values (for
* elliptical rounding).
*
* For further explanation of the border-radius property, refer to the
* resources section above.
*
* Resources:
* -- developer.mozilla.org/en/CSS/border-radius
*
* Browsers support: IE9, Fx3.5, Chrome, Opera, Safari, Opera Mobile, Android Browser
* Notable lack of support: IE8-, Opera Mini
*
* Example:
* 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
*
*/
// 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.
*
* 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.
*
* If you want an element with transparency 1, .5 or 0, use these classes:
* .not-transparent., .half-transparent, .transparent.
*
* Browsers support: full (IE6+)
* Caution! According to -> caniuse.com/#search=opacity, transparency doesn't
* work well with PNG images that are itself transparent (use alpha channel) in IE8-.
*
* 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.
*
* Pick a type of a gradient you want to have and put colours in
* brackets. You can put either two or three colours. In the first case
* the default colour for old browsers will be the same as the first colour provided.
* In the second case you can set that colour as a third argument.
*
* 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.
*
* Gradients tend to be tricky. There's no support for this property
* in older IE, but "filter" comes to the rescue. It can generate
* only horizontal and vertical gradients, though. Also IE9 has some
* strange behaviour -> css3wizardry.com/2010/10/29/css-gradients-for-ie9/.
* To provide the best experience for your visitors you should use
* gradient generator (refer to resources above) with "IE9 Support" option checked.
*
* Resources:
* -- gradient generator with broad browsers support and some advanced options:
* -> www.colorzilla.com/gradient-editor/
* -- gradient is a powerful tool - you can generate shapes as a background!
* -> lea.verou.me/css3patterns/
*
* Browsers support: almost full
* Notable lack of support: Opera mini
* Caution! IE6 - IE8 use filter property that can generate only vertical and
* horizontal gradients. For the best experience in IE9 use gradient generator
* mentioned above in the resources.
*
*/
.gradient (@color1, @color2){
background: @color1;
background-image: -moz-linear-gradient(top, @color1 0%, @color2 100%);
background-image: -webkit-linear-gradient(top, @color1 0%,@color2 100%);
background-image: -o-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: @color3;
background-image: -moz-linear-gradient(top, @color1 0%, @color2 100%);
background-image: -webkit-linear-gradient(top, @color1 0%,@color2 100%);
background-image: -o-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: @color1;
background-image: -moz-linear-gradient(left, @color1 0%, @color2 100%);
background-image: -webkit-linear-gradient(left, @color1 0%,@color2 100%);
background-image: -o-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: @color3;
background-image: -moz-linear-gradient(left, @color1 0%, @color2 100%);
background-image: -webkit-linear-gradient(left, @color1 0%,@color2 100%);
background-image: -o-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: @color1;
background-image: -moz-linear-gradient(-45deg, @color1 0%, @color2 100%);
background-image: -webkit-linear-gradient(-45deg, @color1 0%,@color2 100%);
background-image: -o-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: @color3;
background-image: -moz-linear-gradient(-45deg, @color1 0%, @color2 100%);
background-image: -webkit-linear-gradient(-45deg, @color1 0%,@color2 100%);
background-image: -o-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: @color1;
background-image: -moz-radial-gradient(center, @color1 0%, @color2 100%);
background-image: -webkit-radial-gradient(center, @color1 0%,@color2 100%);
background-image: -o-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: @color3;
background-image: -moz-radial-gradient(center, @color1 0%, @color2 100%);
background-image: -webkit-radial-gradient(center, @color1 0%,@color2 100%);
background-image: -o-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 );
}
/*
* Background-size
* Scale (or not) your background image.
*
* 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.
*
* Browsers support: IE9+, Fx3.6+, Chrome, Safari, Opera, Opera Mini, Opera Mobile, Android Browser
* Notable lack of support: IE8-
*
* 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.
*
*/
.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.
*
* Basic usage:
* Use .columns() class providing in brackets arguments for columns.
* Non 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.
*
* Browsers support: IE10+, Fx, Chrome, Safari, Opera, Opera Mobile, Android Browser
* Notable lack of support: IE9-, Opera Mini
*
* Example:
* 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.
* }
*
*/
.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);}
/*
* Transform
* 2D and 3D transformation of an object.
*
* 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.
*
* 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 .
*
* Browsers support: IE9+, Fx3,5+, Chrome, Safari, Opera, Opera Mobile, Android Browser
* Notable lack of support: IE8-*, Opera Mini
* * You can use some of the transformation in older IE through filter property.
* To generate that property refer to -> css3please.com.
* You can also emulate scale property with zoom property.
*
* 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.
*/
.transform-origin (...) {
-webkit-transform-origin: @arguments;
-moz-transform-origin: @arguments;
-ms-transform-origin: @arguments;
-o-transform-origin: @arguments;
transform-origin: @arguments;
}
.perspective (...) {
-webkit-perspective: @arguments;
-moz-perspective: @arguments;
-o-perspective: @arguments;
perspective: @arguments;
}
.transform (...) {
-webkit-transform: @arguments;
-moz-transform: @arguments;
-ms-transform: @arguments;
-o-transform: @arguments;
transform: @arguments;
}
.transform3d (...) {
-webkit-transform: @arguments;
-webkit-transform-style: preserve-3d;
-moz-transform: @arguments;
-moz-transform-style: preserve-3d;
-o-transform: @arguments;
-o-transform-style: preserve-3d;
transform: @arguments;
transform-style: preserve-3d;
}
.rotate (@rotate) {
-webkit-transform: rotate(@rotate);
-moz-transform: rotate(@rotate);
-ms-transform: rotate(@rotate);
-o-transform: rotate(@rotate);
transform: rotate(@rotate);
}
.rotate3d (@deg1, @deg2:0, @deg3:0){
-webkit-transform: rotateX(@deg1) rotateY(@deg2) rotateZ(@deg3);
-webkit-transform-style: preserve-3d;
-moz-transform: rotateX(@deg1) rotateY(@deg2) rotateZ(@deg3);
-moz-transform-style: preserve-3d;
-o-transform: rotateX(@deg1) rotateY(@deg2) rotateZ(@deg3);
-o-transform-style: preserve-3d;
transform: rotateX(@deg1) rotateY(@deg2) rotateZ(@deg3);
transform-style: preserve-3d;
}
.scale (@scale) {
-webkit-transform: scale(@scale);
-moz-transform: scale(@scale);
-ms-transform: scale(@scale);
-o-transform: scale(@scale);
transform: scale(@scale);
}
.scale (@scale1,@scale2) {
-webkit-transform: scale(@scale1,@scale2);
-moz-transform: scale(@scale1,@scale2);
-ms-transform: scale(@scale1,@scale2);
-o-transform: scale(@scale1,@scale2);
transform: scale(@scale1,@scale2);
}
.scaleX (@scale) {
-webkit-transform: scaleX(@scale);
-moz-transform: scaleX(@scale);
-ms-transform: scaleX(@scale);
-o-transform: scaleX(@scale);
transform: scaleX(@scale);
}
.scaleY (@scale) {
-webkit-transform: scaleY(@scale);
-moz-transform: scaleY(@scale);
-ms-transform: scaleY(@scale);
-o-transform: scaleY(@scale);
transform: scaleY(@scale);
}
.skew (@skew) {
-webkit-transform: skew(@skew);
-moz-transform: skew(@skew);
-ms-transform: skew(@skew);
-o-transform: skew(@skew);
transform: skew(@skew);
}
.skew (@skew1, @skew2) {
-webkit-transform: skew(@skew1, @skew2);
-moz-transform: skew(@skew1, @skew2);
-ms-transform: skew(@skew1, @skew2);
-o-transform: skew(@skew1, @skew2);
transform: skew(@skew1, @skew2);
}
.skewX (@skew) {
-webkit-transform: skewX(@skew);
-moz-transform: skewX(@skew);
-ms-transform: skewX(@skew);
-o-transform: skewX(@skew);
transform: skewX(@skew);
}
.skewY (@skew) {
-webkit-transform: skewY(@skew);
-moz-transform: skewY(@skew);
-ms-transform: skewY(@skew);
-o-transform: skewY(@skew);
transform: skewY(@skew);
}
.translate (@translate) {
-webkit-transform: translate(@translate);
-moz-transform: translate(@translate);
-ms-transform: translate(@translate);
-o-transform: translate(@translate);
transform: translate(@translate);
}
.translate (@translate1, @translate2) {
-webkit-transform: translate(@translate1, @translate2);
-moz-transform: translate(@translate1, @translate2);
-ms-transform: translate(@translate1, @translate2);
-o-transform: translate(@translate1, @translate2);
transform: translate(@translate1, @translate2);
}
.translateX (@translate) {
-webkit-transform: translateX(@translate);
-moz-transform: translateX(@translate);
-ms-transform: translateX(@translate);
-o-transform: translateX(@translate);
transform: translateX(@translate);
}
.translateY (@translate) {
-webkit-transform: translateY(@translate);
-moz-transform: translateY(@translate);
-ms-transform: translateY(@translate);
-o-transform: translateY(@translate);
transform: translateY(@translate);
}
/*
* Transition
* Animate a change between different object states.
*
* 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.
*
* Browsers support: IE10+, Fx4+, Chrome, Opera, Safari, Opera Mobile, Android Browser
* Notable lack of support: IE9-, Fx3.6-, Opera Mini
* *** Transition provides only a visual effects between states. It's perfectly
* *** safe to use. Users with older browser just won't see a phase of changing.
*
* 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.
*/
.transition (@transition1) {
-webkit-transition: @transition1;
-moz-transition: @transition1;
-o-transition: @transition1;
transition: @transition1;
}
.transition (@transition1, @transition2) {
-webkit-transition: @transition1, @transition2;
-moz-transition: @transition1, @transition2;
-o-transition: @transition1, @transition2;
transition: @transition1, @transition2;
}
.transition (@transition1, @transition2, @transition3) {
-webkit-transition: @transition1, @transition2, @transition3;
-moz-transition: @transition1, @transition2, @transition3;
-o-transition: @transition1, @transition2, @transition3;
transition: @transition1, @transition2, @transition3;
}
.transition (@transition1, @transition2, @transition3, @transition4) {
-webkit-transition: @transition1, @transition2, @transition3, @transition4;
-moz-transition: @transition1, @transition2, @transition3, @transition4;
-o-transition: @transition1, @transition2, @transition3, @transition4;
transition: @transition1, @transition2, @transition3, @transition4;
}
.transition (@transition1, @transition2, @transition3, @transition4, @transition5) {
-webkit-transition: @transition1, @transition2, @transition3, @transition4, @transition5;
-moz-transition: @transition1, @transition2, @transition3, @transition4, @transition5;
-o-transition: @transition1, @transition2, @transition3, @transition4, @transition5;
transition: @transition1, @transition2, @transition3, @transition4, @transition5;
}
.transition-transform (@transformArguments) {
-webkit-transition: -webkit-transform @transformArguments;
-moz-transition: -moz-transform @transformArguments;
-o-transition: -o-transform @transformArguments;
transition: transform @transformArguments;
}
.transition-transform (@transformArguments, @transition1) {
-webkit-transition: -webkit-transform @transformArguments, @transition1;
-moz-transition: -moz-transform @transformArguments, @transition1;
-o-transition: -o-transform @transformArguments, @transition1;
transition: transform @transformArguments, @transition1;
}
.transition-transform (@transformArguments, @transition1, @transition2) {
-webkit-transition: -webkit-transform @transformArguments, @transition1, @transition2;
-moz-transition: -moz-transform @transformArguments, @transition1, @transition2;
-o-transition: -o-transform @transformArguments, @transition1, @transition2;
transition: transform @transformArguments, @transition1, @transition2;
}
.transition-transform (@transformArguments, @transition1, @transition2, @transition3) {
-webkit-transition: -webkit-transform @transformArguments, @transition1, @transition2, @transition3;
-moz-transition: -moz-transform @transformArguments, @transition1, @transition2, @transition3;
-o-transition: -o-transform @transformArguments, @transition1, @transition2, @transition3;
transition: transform @transformArguments, @transition1, @transition2, @transition3;
}
.transition-transform (@transformArguments, @transition1, @transition2, @transition3, @transition4) {
-webkit-transition: -webkit-transform @transformArguments, @transition1, @transition2, @transition3, @transition4;
-moz-transition: -moz-transform @transformArguments, @transition1, @transition2, @transition3, @transition4;
-o-transition: -o-transform @transformArguments, @transition1, @transition2, @transition3, @transition4;
transition: transform @transformArguments, @transition1, @transition2, @transition3, @transition4;
}
.transition-transform (@transformArguments, @transition1, @transition2, @transition3, @transition4, @transition5) {
-webkit-transition: -webkit-transform @transformArguments, @transition1, @transition2, @transition3, @transition4, @transition5;
-moz-transition: -moz-transform @transformArguments, @transition1, @transition2, @transition3, @transition4, @transition5;
-o-transition: -o-transform @transformArguments, @transition1, @transition2, @transition3, @transition4, @transition5;
transition: transform @transformArguments, @transition1, @transition2, @transition3, @transition4, @transition5;
}
/*
* Animations
*
* Create an awesome animation!
*
* 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.
*
* Resources:
* -- developer.mozilla.org/en/CSS/animation
*
* 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!
*
* Example:
* .toBeAnimated {
* // Animation with every possible value declared. //
* .animation(animation1 5s linear 3s infinite alternate);
* }
* // Importing prefixed @keyframes for animation1.
* @import 'animation1';
*
* // Declaring @keyframes for animation. Only once!
* .animation1() {
* from {margin-top: 3px;}
* to {margin-top: 333px;}
* }
*
*/
.animation (...) {
-webkit-animation: @arguments;
-moz-animation: @arguments;
-o-animation: @arguments;
animation: @arguments;
}
.animate (...) {.animation(@arguments);}
.anime (...) {.animation(@arguments);}
Jump to Line
Something went wrong with that request. Please try again.