Autumn-Less/css3.less at master · Autumn-Seven/Autumn-Less · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

/*
	Developed by anthonyvscode.com
	This solution is to be used in less css and less js: http://lesscss.org/
*/

/*Border Radius Functions*/
.border_radius(@radius: 10px)
{
  .border_radius(@radius, @radius);
}

.border_radius(@radius_top, @radius_bottom)
{
  .border_radius(@radius_top, @radius_top, @radius_bottom, @radius_bottom);
}

.border_radius(@radius_top_left, @radius_top_right, @radius_bottom_right, @radius_bottom_left)
{
  -webkit-border-radius:@radius_top_left @radius_top_right @radius_bottom_right @radius_bottom_left;
  -moz-border-radius:@radius_top_left @radius_top_right @radius_bottom_right @radius_bottom_left;
  border-radius:@radius_top_left @radius_top_right @radius_bottom_right @radius_bottom_left;
}

/*Shadows*/
.box_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_color:#888)
{
  box-shadow: @shadow_x @shadow_y @shadow_rad @shadow_color;
  -webkit-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_color;
  -moz-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_color;
}

.text_shadow(@shadow_color:#fff)
{
  text-shadow:0 1px 0 @shadow_color;
}

.opacity(@op:100)
{
  filter:alpha(opacity=@op);
  -moz-opacity:@op/100;
  -khtml-opacity:@op/100;
  opacity:@op/100;
}

.background_gradient(@from:#000, @to:#EEE)
{
  background: @from; /* Old browsers */
  background: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); /* Chrome, Safari4+ */
  background: -moz-linear-gradient(top, @from, @to); /* FF3.6+ */
  background: -webkit-linear-gradient(top, @from, @to); /* Chrome10+, Safari5.1+ */
  background: -o-linear-gradient(top, @from, @to); /* Opera11.10+ */
  background: -ms-linear-gradient(top, @from, @to); /* IE10+ */
  filter: formatstring("progid:DXImageTransform.Microsoft.gradient(startColorstr='{0}', endColorstr='{1}')", @from, @to); /* IE6,IE7 */
  -ms-filter: formatstring("{2}progid:DXImageTransform.Microsoft.gradient(startColorStr='{0}', EndColorStr='{1}'){2}", @from, @to, '"'); /* IE8 */
  background: linear-gradient(top, @from, @to); /* W3C */
}

.transition(@range: all, @time: 1s, @ease: ease-in-out)
{
  -moz-transition: @range @time @ease;
  -webkit-transition: @range @time @ease;
  -o-transition: @range @time @ease;
  transition: @range @time @ease;
}

/*Transformations*/
.skew(@angle_x:35, @angle_y:0)
{
  -webkit-transform: skew(formatstring("{0}deg", @angle_x), formatstring("{0}deg", @angle_y));
  -moz-transform: skew(formatstring("{0}deg", @angle_x), formatstring("{0}deg", @angle_y));
  -o-transform: skew(formatstring("{0}deg", @angle_x), formatstring("{0}deg", @angle_y));
  -ms-transform: skew(formatstring("{0}deg", @angle_x), formatstring("{0}deg", @angle_y));
  transform: skew(formatstring("{0}deg", @angle_x), formatstring("{0}deg", @angle_y));
}

.scale(@scale_x: 1)
{
  -webkit-transform: scale(@scale_x);
  -moz-transform: scale(@scale_x);
  -o-transform: scale(@scale_x);
  -ms-transform: scale(@scale_x);
  transform: scale(@scale_x);
}

.rotate(@angle:35)
{
  -webkit-transform: rotate(formatstring("{0}deg", @deg));
  -moz-transform: rotate(formatstring("{0}deg", @deg));
  -o-transform: rotate(formatstring("{0}deg", @deg));
  -ms-transform: rotate(formatstring("{0}deg", @deg));
  transform: rotate(formatstring("{0}deg", @deg));
}

.translate(@move_x: 10px, @move_y: 10px)
{
  -webkit-transform: translate(@move_x, @move_y);
  -moz-transform: translate(@move_x, @move_y);
  -o-transform: translate(@move_x, @move_y);
  -ms-transform:translate(@move_x, @move_y);
  transform: translate(@move_x, @move_y);
}