1
0
Fork 0
mirror of https://github.com/lidarr/Lidarr synced 2024-12-25 17:17:02 +00:00
Lidarr/UI/Content/prefixer.less
2013-06-25 22:42:44 -07:00

336 lines
11 KiB
Text

//---------------------------------------------------
// 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-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)
// .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-delay(@delay) {
-webkit-animation-delay: @delay;
-moz-animation-delay: @delay;
-ms-animation-delay: @delay;
-o-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-iteration-count(@count) {
-webkit-animation-iteration-count: @count;
-moz-animation-iteration-count: @count;
-ms-animation-iteration-count: @count;
-o-animation-iteration-count: @count;
}
.animation-name(@name) {
-webkit-animation-name: @name;
-moz-animation-name: @name;
-ms-animation-name: @name;
-o-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-timing-function(@function) {
-webkit-animation-timing-function: @function;
-moz-animation-timing-function: @function;
-ms-animation-timing-function: @function;
-o-animation-timing-function: @function;
}
// Background Size
.background-size(@args) {
-webkit-background-size: @args;
-moz-background-size: @args;
background-size: @args;
}
// Border Radius
.border-radius(@args) {
-webkit-border-radius: @args;
-moz-border-radius: @args;
border-radius: @args;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
// Box Shadows
.box-shadow(@args) {
-webkit-box-shadow: @args;
-moz-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: @rule;
-moz-column-rule: @rule;
column-rule: @rule;
}
// 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){
opacity: @factor;
@iefactor: @factor*100;
filter: alpha(opacity=@iefactor);
}
// 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;
}
.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);
}
// Transitions
.transition(@args:200ms) {
-webkit-transition: @args;
-moz-transition: @args;
-o-transition: @args;
transition: @args;
}
.transition-delay(@delay:0) {
-webkit-transition-delay: @delay;
-moz-transition-delay: @delay;
-o-transition-delay: @delay;
transition-delay: @delay;
}
.transition-duration(@duration:200ms) {
-webkit-transition-duration: @duration;
-moz-transition-duration: @duration;
-o-transition-duration: @duration;
transition-duration: @duration;
}
.transition-property(@property:all) {
-webkit-transition-property: @property;
-moz-transition-property: @property;
-o-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;
transition-timing-function: @function;
}