forked from jasonrr/more-with-less
-
Notifications
You must be signed in to change notification settings - Fork 0
/
more-with-less.less
executable file
·150 lines (128 loc) · 6.53 KB
/
more-with-less.less
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
/* More With Less
A simple LESS library.
Copyright Jason Rosoff 2011 - http://shipordie.com
*/
#mwl {
@css-pie: "/css/PIE/PIE.htc";
// Basic Functions
.rounded-corners (@radius: 2em) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.rounded-corners-left (@radius: 2em) {
-moz-border-radius-topleft: @radius;
-moz-border-radius-bottomleft: @radius;
-webkit-border-top-left-radius: @radius;
-webkit-border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
border-bottom-left-radius: @radius;
}
.rounded-corners-right (@radius: 2em) {
-moz-border-radius-topright: @radius;
-moz-border-radius-bottomright: @radius;
-webkit-border-top-right-radius: @radius;
-webkit-border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
border-bottom-right-radius: @radius;
}
.top-bottom-gradient (@start, @stop) {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, @start), color-stop(1, @stop));
background: -webkit-linear-gradient(top, @start, @stop);
background: -moz-linear-gradient(top, @start, @stop);
background: -ms-linear-gradient(top @start, @stop);
background: -o-linear-gradient(top, @start, @stop);
background: linear-gradient(top, @start, @stop);
-pie-background: linear-gradient(@start, @stop);
}
.box-shadow (@x: 0, @y: 0, @blur: 0, @color: #000) {
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
// Button Styles
#buttons {
.button-shadow(inset, @shadow-color) { .box-shadow(0, 1px, 0, @shadow-color); }
.button-shadow(raised, @shadow-color) { .box-shadow(0, 1px, 3px, rgba(0,0,0, .3)); }
.button-colors(dark, @base-color, @type) {
color: lighten(@base-color, 60%);
text-shadow: 0 -1px 0 darken(@base-color, 50%);
border: 1px solid darken(@base-color, 20%);
.top-bottom-gradient(lighten(@base-color, 7%), lighten(@base-color, 3%));
.button-shadow(@type, lighten(@base-color, 10%));
&:after { border-top: 1px solid lighten(@base-color, 15%); border-bottom: 1px solid darken(@base-color, 5%); }
&:hover { .top-bottom-gradient(lighten(@base-color, 10%), lighten(@base-color, 5%)); behavior: ~"url(@{css-pie})"; }
&:active { .top-bottom-gradient(lighten(@base-color, 5%), lighten(@base-color, 10%)); behavior: ~"url(@{css-pie})"; }
}
.button-colors(light, @base-color, @type) {
color: darken(@base-color, 60%);
text-shadow: 0 1px 0 lighten(@base-color, 15%);
border: 1px solid darken(@base-color, 40%);
border-bottom-color: darken(@base-color, 55%);
.top-bottom-gradient(darken(@base-color, 1%), darken(@base-color, 5%));
.button-shadow(@type, lighten(@base-color, 15%));
&:after { border-top: 1px solid lighten(@base-color, 25%); border-bottom: 1px solid darken(@base-color, 15%); }
&:hover { .top-bottom-gradient(darken(@base-color, 3%), darken(@base-color, 8%)); behavior: ~"url(@{css-pie})"; }
&:active { .top-bottom-gradient(darken(@base-color, 8%), lighten(@base-color, 3%)); behavior: ~"url(@{css-pie})"; }
}
// Create a button that appears to be inset into the background. Using all defaults will create a pill-shaped button.
// Adjusting border-radius, and padding will give you any shape you like.
.base_button (@base-color: #666, @border-radius: 2em, @top-btm-padding: 1em, @left-rt-padding: 2em, @type) {
cursor: pointer;
display: inline-block;
padding: @top-btm-padding @left-rt-padding;
position: relative;
text-decoration: none;
.rounded-corners(@border-radius);
&:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: " ";
.rounded-corners(@border-radius);
behavior: ~"url(@{css-pie})";
}
&:before
{
background: transparent;
float: left;
text-align: center;
padding: @top-btm-padding 1em @top-btm-padding 1.2em;
margin: -@top-btm-padding 1em -@top-btm-padding -@left-rt-padding;
-moz-box-shadow: 1px 0 0 darken(@base-color, 35%), 2px 0 0 lighten(@base-color, 20%);
-webkit-box-shadow: 1px 0 0 darken(@base-color, 35%), 2px 0 0 lighten(@base-color, 20%);
box-shadow: 1px 0 0 darken(@base-color, 35%), 2px 0 0 lighten(@base-color, 20%);
.rounded-corners-left(@border-radius);
}
// Calculate the lightness of the background color and use that to sest the rest
// of the button colors. Perceived luminances is a bit of a fudge because it doesn't
// properly weight the differences in how humans see RGB light, but it's close.
@theLight: lightness(@base-color);
@perceived-luminance: ~`parseInt('@{theLight}') > 65 ? 'light' : 'dark'`;
.button-colors(@perceived-luminance, @base-color, @type);
behavior: ~"url(@{css-pie})";
}
.raised-button (@base-color: #666, @border-radius: 2em, @top-btm-padding: 1em, @left-rt-padding: 2em) {
@type: ~`'raised'`;
.base_button(@base-color, @border-radius, @top-btm-padding, @left-rt-padding, @type);
}
.inset-button (@base-color: #666, @border-radius: 2em, @top-btm-padding: 1em, @left-rt-padding: 2em) {
@type: ~`'inset'`;
.base_button(@base-color, @border-radius, @top-btm-padding, @left-rt-padding, @type);
}
}
}
.icons {
&.add:before { content: "\271A"; }
&.edit:before { content: "\270E"; }
&.delete:before { content: "\2718"; }
&.save:before { content: "\2714"; }
&.email:before { content: "\2709"; }
&.like:before { content: "\2764"; }
&.next:before { content: "\279C"; }
&.star:before { content: "\2605"; }
&.spark:before { content: "\2737"; }
&.play:before { content: "\25B6"; }
}