Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
130 lines (116 sloc) 6.29 KB
// This file can ONLY contain macros!! Do not add styles here!
/*.linear-gradient(@orientation, @bandOneColor, @bandOneSize, @bandTwoColor, @bandTwoSize){
linear-gradient(@orientation, @bandOneColor, @bandOneSize, @bandTwoColor, @bandTwoSize);
-moz-linear-gradient(@orientation, @bandOneColor, @bandOneSize, @bandTwoColor, @bandTwoSize);
-webkit-linear-gradient(@orientation, @bandOneColor, @bandOneSize, @bandTwoColor, @bandTwoSize)
}*/
.blueprint-texture(@size:1px, @bgColor:#269, @fgColor:white, @tint:rgba(255,255,255,.3)){
background-color:@bgColor;
@doubleSize : 2 * @size;
@ndoubleSize : -1 * @doubleSize;
@nsize : -1 * @size;
background-image: linear-gradient(@fgColor @doubleSize, transparent @doubleSize),
linear-gradient(90deg, @fgColor @doubleSize, transparent @doubleSize),
linear-gradient(@tint @size, transparent @size),
linear-gradient(90deg, @tint @size, transparent @size);
background-image: -webkit-linear-gradient(@fgColor @doubleSize, transparent @doubleSize),
-webkit-linear-gradient(0deg, @fgColor @doubleSize, transparent @doubleSize),
-webkit-linear-gradient(@tint @size, transparent @size),
-webkit-linear-gradient(0deg, @tint @size, transparent @size);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:@ndoubleSize @ndoubleSize, @ndoubleSize @ndoubleSize, @nsize @nsize, @nsize @nsize;
}
.simpleGradient(@origin: left, @alpha: 0.2) {
background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
background-color: @start;
background-image: -webkit-linear-gradient(@origin, @start, @stop);
background-image: -moz-linear-gradient(@origin, @start, @stop);
background-image: -o-linear-gradient(@origin, @start, @stop);
background-image: -ms-linear-gradient(@origin, @start, @stop);
background-image: linear-gradient(@origin, @start, @stop);
}
// BOX MODEL
.sprite(@position, @image, @width:20px, @height:20px, @columns:1){
display:block;
display:inline-block;
background-image:url(@image);
width:@width;
height:@height;
@posCol : floor(@position/@columns);
background-position:-(@width * (@position - @columns*@posCol)) -(@height * @posCol);
}
.spriteIcon(@position, @image, @size, @width:10){
.sprite(@position, @image, @size, @size, @width);
content: '';
height:@size;
width:@size;
vertical-align: middle;
margin-top: -5px;
display:inline-block;
padding-right: 5px;
}
.inset(@blur, @color){
box-shadow:inset 0px 4px @blur @color;
-moz-box-shadow:inset 0px 4px @blur @color;
-webkit-box-shadow:inset 0px 4px @blur @color;
}
.striped(@width, @color, @angle:45deg){
background: -webkit-repeating-linear-gradient(@angle, rgba(0,0,0,0.1), rgba(0,0,0,0.1) @width, rgba(255,255,255,0.1) @width, rgba(255,255,255,0.1) (2*@width)), @color;
}
.shadowed(@zHeight, @opacity){ /* todo make shadow work in angle & incline */
-webkit-box-shadow : @zHeight @zHeight (3 * @zHeight) rgba(0,0,0, @opacity);
-moz-box-shadow : @zHeight @zHeight (3 * @zHeight) rgba(0,0,0, @opacity);
box-shadow : @zHeight @zHeight (3 * @zHeight) rgba(0,0,0, @opacity);
}
.beveled(@depth){
-webkit-box-shadow: (-1 * @depth) (-1 * @depth) (2 * @depth) rgba(0,0,0,0.4) inset,
(@depth) (@depth) (2 * @depth) rgba(255,255,255,0.4) inset;
-moz-box-shadow: (-1 * @depth) (-1 * @depth) (2 * @depth) rgba(0,0,0,0.4) inset,
(@depth) (@depth) (2 * @depth) rgba(255,255,255,0.4) inset;
box-shadow: (-1 * @depth) (-1 * @depth) (2 * @depth) rgba(0,0,0,0.4) inset,
(@depth) (@depth) (2 * @depth) rgba(255,255,255,0.4) inset;
}
.beveledAndDepressed(@depth){
-webkit-box-shadow: (-1 * @depth) (-1 * @depth) (2 * @depth) rgba(255,255,255,0.4) inset,
(@depth) (@depth) (2 * @depth) rgba(0,0,0,0.4) inset;
-moz-box-shadow: (-1 * @depth) (-1 * @depth) (2 * @depth) rgba(255,255,255,0.4) inset,
(@depth) (@depth) (2 * @depth) rgba(0,0,0,0.4) inset;
box-shadow: (-1 * @depth) (-1 * @depth) (2 * @depth) rgba(255,255,255,0.4) inset,
(@depth) (@depth) (2 * @depth) rgba(0,0,0,0.4) inset;
}
.beveledAndShadowed(@depth){
-webkit-box-shadow: (-1 * @depth) (-1 * @depth) (2 * @depth) rgba(0,0,0,0.4) inset,
(@depth) (@depth) (2 * @depth) rgba(255,255,255,0.4) inset,
(@depth) (@depth) (2 * @depth) rgba(0,0,0,0.4),
(@depth/5) (@depth/5) (@depth/2) rgba(0,0,0,0.6),
(@depth/5 *-1) (@depth/5 * -1) (@depth/2) rgba(0,0,0,0.6);
-moz-box-shadow: (-1 * @depth) (-1 * @depth) (2 * @depth) rgba(0,0,0,0.4) inset,
(@depth) (@depth) (2 * @depth) rgba(255,255,255,0.4) inset,
(@depth) (@depth) (2 * @depth) rgba(0,0,0,0.4),
(@depth/5) (@depth/5) (@depth/2) rgba(0,0,0,0.6),
(@depth/5 *-1) (@depth/5 * -1) (@depth/2) rgba(0,0,0,0.6);
box-shadow: (-1 * @depth) (-1 * @depth) (2 * @depth) rgba(0,0,0,0.4) inset,
(@depth) (@depth) (2 * @depth) rgba(255,255,255,0.4) inset,
(@depth) (@depth) (2 * @depth) rgba(0,0,0,0.4),
(@depth/5) (@depth/5) (@depth/2) rgba(0,0,0,0.6),
(@depth/5 *-1) (@depth/5 * -1) (@depth/2) rgba(0,0,0,0.6);
}
.cover(@image){
background-image: url(@image);
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@image', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@image', sizingMethod='scale')";
}