mindy 0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/ABOUT.mdown +3 -0
- data/lib/mindy.rb +9 -0
- data/stylesheets/mindy/_mindy.scss +15 -0
- data/stylesheets/mindy/css3/_animate.scss +2557 -0
- data/stylesheets/mindy/css3/_buttons.scss +453 -0
- data/stylesheets/mindy/css3/_buttons_refactor.scss +110 -0
- data/stylesheets/mindy/css3/_font-family.scss +8 -0
- data/stylesheets/mindy/css3/_formalize.scss +270 -0
- data/stylesheets/mindy/css3/_multi_line_buttons.sass +53 -0
- data/stylesheets/mindy/css3/_shadow.scss +38 -0
- data/stylesheets/mindy/grid/_grid.scss +102 -0
- data/stylesheets/mindy/grid/_respond.scss +34 -0
- data/stylesheets/mindy/utils/_deprecated.scss +1 -0
- data/stylesheets/mindy/utils/_mixins.scss +94 -0
- data/stylesheets/mindy/utils/_reset.scss +229 -0
- data/stylesheets/mindy/utils/_variables.scss +2 -0
- metadata +91 -0
|
@@ -0,0 +1,453 @@
|
|
|
1
|
+
@import "compass/css3";
|
|
2
|
+
|
|
3
|
+
$buttonGroupMarginLeft: 15px;
|
|
4
|
+
|
|
5
|
+
$base-color: #f6f6f6;
|
|
6
|
+
$background-color: #fff;
|
|
7
|
+
$shadow-color: #f6f6f6;
|
|
8
|
+
|
|
9
|
+
$buttonBorderRadius: 2px;
|
|
10
|
+
|
|
11
|
+
// button
|
|
12
|
+
@mixin button($button: true) {
|
|
13
|
+
@include border-radius($buttonBorderRadius);
|
|
14
|
+
border: 1px solid #000;
|
|
15
|
+
display: inline-block;
|
|
16
|
+
padding: 6px 14px 4px 14px;
|
|
17
|
+
|
|
18
|
+
@if $button == true {
|
|
19
|
+
line-height: 18px;
|
|
20
|
+
} @else {
|
|
21
|
+
line-height: 17px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@include generateMainButton($base-color, $background-color);
|
|
25
|
+
|
|
26
|
+
text-align: center;
|
|
27
|
+
text-decoration: none;
|
|
28
|
+
outline: 0;
|
|
29
|
+
overflow: visible;
|
|
30
|
+
margin: 0;
|
|
31
|
+
vertical-align: top;
|
|
32
|
+
*padding-top: 2px;
|
|
33
|
+
*padding-bottom: 0;
|
|
34
|
+
|
|
35
|
+
font-family: inherit;
|
|
36
|
+
font-size: inherit;
|
|
37
|
+
|
|
38
|
+
&::-moz-focus-inner {
|
|
39
|
+
padding: 0;
|
|
40
|
+
border: 0;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&:hover {
|
|
44
|
+
text-decoration: none;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
//&.checked {
|
|
48
|
+
// color: #333;
|
|
49
|
+
// text-shadow: none;
|
|
50
|
+
// border: 1px solid #ccc;
|
|
51
|
+
//}
|
|
52
|
+
|
|
53
|
+
&.pill {
|
|
54
|
+
@include border-radius(20px);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&.sm {
|
|
58
|
+
font-size: 11px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&[disabled], &.disabled {
|
|
62
|
+
color: #B8B8B8;
|
|
63
|
+
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
64
|
+
background-color: #fff;
|
|
65
|
+
cursor: default;
|
|
66
|
+
|
|
67
|
+
&:hover, &:active {
|
|
68
|
+
color: #b8b8b8;
|
|
69
|
+
text-shadow: none;
|
|
70
|
+
background-color: #fff;
|
|
71
|
+
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
72
|
+
@include single-box-shadow(none);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&.disabled2 {
|
|
77
|
+
color: #b8b8b8;
|
|
78
|
+
cursor: default;
|
|
79
|
+
border: 1px solid #dcdcdc;
|
|
80
|
+
|
|
81
|
+
&:hover {
|
|
82
|
+
border: 1px solid #dcdcdc;
|
|
83
|
+
@include single-box-shadow(none);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
& [class^="icon-"], & [class*=" icon-"] {
|
|
88
|
+
height: 18px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&.mini {
|
|
92
|
+
height: 14px;
|
|
93
|
+
font-size: 11px;
|
|
94
|
+
font-weight: bold;
|
|
95
|
+
line-height: 13px;
|
|
96
|
+
padding: 4px 10px;
|
|
97
|
+
|
|
98
|
+
& [class^="icon-"], & [class*=" icon-"] {
|
|
99
|
+
height: 14px;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&.dropdown-toggle {
|
|
104
|
+
min-width: 5px;
|
|
105
|
+
//height: 12px;
|
|
106
|
+
//padding: 8px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.caret {
|
|
110
|
+
margin-left: 0;
|
|
111
|
+
margin-top: 6px;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&:hover .caret {
|
|
115
|
+
opacity: 1;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.no-text {
|
|
119
|
+
min-width: 14px;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.xs-no-text {
|
|
123
|
+
height: 9px;
|
|
124
|
+
width: 18px;
|
|
125
|
+
font-size: 10px;
|
|
126
|
+
font-weight: bold;
|
|
127
|
+
line-height: 10px;
|
|
128
|
+
padding: 4px 2px;
|
|
129
|
+
min-width: 5px;
|
|
130
|
+
@include border-radius($buttonBorderRadius);
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
@mixin generateMainButton($base-color, $background-color)
|
|
135
|
+
{
|
|
136
|
+
$button-dark-color: shade($base-color, 15%);
|
|
137
|
+
|
|
138
|
+
$button-border-color: shade($base-color, 10%);
|
|
139
|
+
$button-dark-border-color: shade($base-color, 16%);
|
|
140
|
+
$button-light-border-color: lighten($base-color, 8%);
|
|
141
|
+
|
|
142
|
+
$button-light-color: desaturate(tint($shadow-color, 60%), 5%);
|
|
143
|
+
|
|
144
|
+
$text-color: saturate(shade($base-color, 60%), 5%);
|
|
145
|
+
$light-text-shadow: desaturate(tint($base-color, 25%), 5%);
|
|
146
|
+
$dark-text-shadow: saturate(shade($base-color, 20%), 5%);
|
|
147
|
+
|
|
148
|
+
background-color: $base-color;
|
|
149
|
+
border-color: $button-border-color;
|
|
150
|
+
border-bottom-color: $button-dark-border-color;
|
|
151
|
+
color: $text-color;
|
|
152
|
+
|
|
153
|
+
//@include text-shadow(#fff 0 1px 0);
|
|
154
|
+
@include background-image(linear-gradient(color-stops($button-light-color, $base-color)));
|
|
155
|
+
//@include box-shadow($button-shadow-color 0 -1px 1px 0 inset, $button-highlight-color 0 1px 3px 0 inset);
|
|
156
|
+
//@include text-shadow($light-text-shadow 0 1px 0);
|
|
157
|
+
@include text-shadow(#fff 0 1px 0);
|
|
158
|
+
|
|
159
|
+
$button-highlight-color: transparentize(desaturate(tint(desaturate(tint($shadow-color, 60%), 5%), 15%), 5%), 0%);
|
|
160
|
+
$button-shadow-color: saturate(shade($shadow-color, 2%), 5%);
|
|
161
|
+
$dark-background-color: shade(#fff, 15%);
|
|
162
|
+
@include box-shadow(#fff 0 2px 1px 0 inset);
|
|
163
|
+
|
|
164
|
+
&:hover {
|
|
165
|
+
@include transition();
|
|
166
|
+
@include transition-duration(0.2s);
|
|
167
|
+
background-color: tint($base-color, 5%);
|
|
168
|
+
@include background-image(linear-gradient(color-stops(lighten(tint($button-light-color, 3%), 1%), tint($base-color, 3%))));
|
|
169
|
+
@include box-shadow(
|
|
170
|
+
$dark-background-color 0 1px 1px 0,
|
|
171
|
+
tint($button-shadow-color, 1%) 0 -2px 2px 0 inset,
|
|
172
|
+
tint($button-highlight-color, 3%) 0 2px 3px 0 inset
|
|
173
|
+
);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
&:active, &.active, &.checked {
|
|
177
|
+
@include transition();
|
|
178
|
+
@include transition-duration(0.5s);
|
|
179
|
+
background-color: $base-color;
|
|
180
|
+
border-top-color: $button-dark-border-color;
|
|
181
|
+
border-bottom-color: $button-border-color;
|
|
182
|
+
|
|
183
|
+
@include background-image(linear-gradient(color-stops($button-light-color, $base-color)));
|
|
184
|
+
@include box-shadow(shade($shadow-color, 10%) 0 1px 8px 0 inset);
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
@mixin generateButton($base-color,$textColor)
|
|
189
|
+
{
|
|
190
|
+
$background-color: darken($base-color, 20%);
|
|
191
|
+
|
|
192
|
+
$button-dark-color: shade($base-color, 15%);
|
|
193
|
+
$button-light-color: desaturate(tint($base-color, 12%), 5%);
|
|
194
|
+
|
|
195
|
+
$button-border-color: shade($base-color, 10%);
|
|
196
|
+
$button-dark-border-color: shade($base-color, 16%);
|
|
197
|
+
$button-light-border-color: lighten($base-color, 8%);
|
|
198
|
+
|
|
199
|
+
$button-highlight-color: transparentize(desaturate(tint($button-light-color, 15%), 5%), 0%);
|
|
200
|
+
$button-shadow-color: saturate(shade($base-color, 2%), 5%);
|
|
201
|
+
|
|
202
|
+
$text-color: saturate(shade($base-color, 20%), 5%);
|
|
203
|
+
$light-text-shadow: desaturate(tint($base-color, 25%), 5%);
|
|
204
|
+
$dark-text-shadow: saturate(shade($base-color, 20%), 5%);
|
|
205
|
+
|
|
206
|
+
$dark-background-color: shade($background-color, 35%);
|
|
207
|
+
|
|
208
|
+
background-color: $base-color;
|
|
209
|
+
border-color: $button-border-color;
|
|
210
|
+
border-bottom-color: $button-dark-border-color;
|
|
211
|
+
color: $textColor;
|
|
212
|
+
|
|
213
|
+
@include box-shadow($button-shadow-color 0 -1px 1px 0 inset, $button-highlight-color 0 1px 3px 0 inset);
|
|
214
|
+
@include background-image(linear-gradient(color-stops($button-light-color, $base-color)));
|
|
215
|
+
@include text-shadow($dark-text-shadow 0 1px 0);
|
|
216
|
+
|
|
217
|
+
&:hover {
|
|
218
|
+
@include transition();
|
|
219
|
+
@include transition-duration(0.2s);
|
|
220
|
+
background: tint($base-color, 5%);
|
|
221
|
+
//color: #f6f6f6;
|
|
222
|
+
|
|
223
|
+
@include background-image(linear-gradient(color-stops(lighten(tint($button-light-color, 3%), 1%), tint($base-color, 3%))));
|
|
224
|
+
@include box-shadow(
|
|
225
|
+
lighten($dark-background-color,15%) 0 1px 1px 0,
|
|
226
|
+
tint($button-shadow-color, 1%) 0 -2px 2px 0 inset,
|
|
227
|
+
tint($button-highlight-color, 3%) 0 2px 3px 0 inset
|
|
228
|
+
);
|
|
229
|
+
//@include text-shadow($dark-text-shadow 0 -1px 0);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
&:active, &.active, &.checked {
|
|
233
|
+
@include transition();
|
|
234
|
+
@include transition-duration(0.5s);
|
|
235
|
+
background: ($base-color);
|
|
236
|
+
border-top-color: $button-dark-border-color;
|
|
237
|
+
border-bottom-color: $button-border-color;
|
|
238
|
+
|
|
239
|
+
@include background-image(linear-gradient(color-stops($button-light-color, $base-color)));
|
|
240
|
+
@include box-shadow(shade($base-color, 10%) 0 1px 8px 0 inset);
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
/* -------------------------------------------------------- BUTTON CONTAINER */
|
|
245
|
+
/* For mixing buttons and button groups, e.g., in a navigation bar */
|
|
246
|
+
.button-container {
|
|
247
|
+
&.open {
|
|
248
|
+
*z-index: 1000;
|
|
249
|
+
|
|
250
|
+
.dropdown-menu {
|
|
251
|
+
display: block;
|
|
252
|
+
margin-top: 1px;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.dropdown-toggle {
|
|
256
|
+
background-image: none;
|
|
257
|
+
@include single-box-shadow(0, 1px, 6px, rgba(0, 0, 0, 0.15), inset);
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.button, .button-group {
|
|
262
|
+
vertical-align: top;
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.button + .button,
|
|
267
|
+
.button + .button-group,
|
|
268
|
+
.button-group + .button,
|
|
269
|
+
.button-group + .button-group {
|
|
270
|
+
margin-left: $buttonGroupMarginLeft;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.button-group {
|
|
274
|
+
position: relative;
|
|
275
|
+
display: inline-block;
|
|
276
|
+
list-style: none;
|
|
277
|
+
padding: 0;
|
|
278
|
+
margin: 0;
|
|
279
|
+
|
|
280
|
+
/* IE hacks */
|
|
281
|
+
zoom: 1;
|
|
282
|
+
*display: inline;
|
|
283
|
+
|
|
284
|
+
.button {
|
|
285
|
+
position: relative;
|
|
286
|
+
float: left;
|
|
287
|
+
margin-left: -1px;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.button, .button + .button {
|
|
291
|
+
@include border-radius(0);
|
|
292
|
+
|
|
293
|
+
&:first-child, &.dropdown-toggle {
|
|
294
|
+
margin-left: 0;
|
|
295
|
+
@include border-radius($buttonBorderRadius 0 0 $buttonBorderRadius);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
&:last-child, &.dropdown-toggle {
|
|
299
|
+
@include border-radius(0 $buttonBorderRadius $buttonBorderRadius 0);
|
|
300
|
+
}
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.dropdown {
|
|
305
|
+
position: relative;
|
|
306
|
+
}
|
|
307
|
+
.dropdown-toggle {
|
|
308
|
+
*margin-bottom: -3px;
|
|
309
|
+
}
|
|
310
|
+
.dropdown-toggle:active, .open .dropdown-toggle {
|
|
311
|
+
outline: 0;
|
|
312
|
+
}
|
|
313
|
+
.caret {
|
|
314
|
+
display: inline-block;
|
|
315
|
+
width: 0;
|
|
316
|
+
height: 0;
|
|
317
|
+
text-indent: -99999px;
|
|
318
|
+
*text-indent: 0;
|
|
319
|
+
vertical-align: top;
|
|
320
|
+
border-left: 4px solid transparent;
|
|
321
|
+
border-right: 4px solid transparent;
|
|
322
|
+
border-top: 4px solid black;
|
|
323
|
+
opacity: 0.5;
|
|
324
|
+
filter: alpha(opacity=50);
|
|
325
|
+
content: "\2193";
|
|
326
|
+
}
|
|
327
|
+
.dropdown .caret {
|
|
328
|
+
margin-top: 8px;
|
|
329
|
+
margin-left: 2px;
|
|
330
|
+
}
|
|
331
|
+
.dropdown:hover .caret, .open.dropdown .caret {
|
|
332
|
+
opacity: 1;
|
|
333
|
+
filter: alpha(opacity=100);
|
|
334
|
+
}
|
|
335
|
+
.dropdown-menu {
|
|
336
|
+
position: absolute;
|
|
337
|
+
top: 100%;
|
|
338
|
+
left: 0;
|
|
339
|
+
z-index: 1000;
|
|
340
|
+
float: left;
|
|
341
|
+
display: none;
|
|
342
|
+
min-width: 245px;
|
|
343
|
+
max-width: 245px;
|
|
344
|
+
padding: 0;
|
|
345
|
+
margin: 2px 0 0 0;
|
|
346
|
+
list-style: none;
|
|
347
|
+
background-color: #fff;
|
|
348
|
+
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
349
|
+
@include box-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
|
|
350
|
+
|
|
351
|
+
&.bottom {
|
|
352
|
+
top: auto;
|
|
353
|
+
bottom: 100%;
|
|
354
|
+
margin-bottom: 2px;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
&.right {
|
|
358
|
+
right: 0;
|
|
359
|
+
top: 100%;
|
|
360
|
+
left: auto;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
&.left {
|
|
364
|
+
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.divider {
|
|
368
|
+
border-top: 1px solid #ebebeb;
|
|
369
|
+
margin-top: 9px;
|
|
370
|
+
margin-bottom: 10px;
|
|
371
|
+
padding: 0;
|
|
372
|
+
cursor: default;
|
|
373
|
+
/* height: 1px;
|
|
374
|
+
margin: 5px 1px;
|
|
375
|
+
overflow: hidden;
|
|
376
|
+
background-color: #e5e5e5;
|
|
377
|
+
border-bottom: 1px solid white;
|
|
378
|
+
|
|
379
|
+
// IE7 needs a set width since we gave a height. Restricting just
|
|
380
|
+
// to IE7 to keep the 1px left/right space in other browsers.
|
|
381
|
+
// It is unclear where IE is getting the extra space that we need
|
|
382
|
+
// to negative-margin away, but so it goes.
|
|
383
|
+
*width: 100%;
|
|
384
|
+
*margin: -5px 0 5px;*/
|
|
385
|
+
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.dropdown-menu a {
|
|
390
|
+
position: relative;
|
|
391
|
+
padding: 6px 0 6px 30px;
|
|
392
|
+
color: #333;
|
|
393
|
+
text-decoration: none;
|
|
394
|
+
display: block;
|
|
395
|
+
clear: both;
|
|
396
|
+
font-weight: normal;
|
|
397
|
+
line-height: 18px;
|
|
398
|
+
white-space: nowrap;
|
|
399
|
+
|
|
400
|
+
[class^="icon-"] {
|
|
401
|
+
position: absolute;
|
|
402
|
+
left: 7px;
|
|
403
|
+
top: 6px;
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover {
|
|
408
|
+
text-decoration: none;
|
|
409
|
+
background-color: #eee;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.dropdown {
|
|
413
|
+
&.open {
|
|
414
|
+
*z-index: 1000;
|
|
415
|
+
|
|
416
|
+
.dropdown-toggle {
|
|
417
|
+
//@TODO: ruby pre && compass pre required !optional refactor me
|
|
418
|
+
//@extend .button.checked;
|
|
419
|
+
|
|
420
|
+
//color: #08c;
|
|
421
|
+
//background: #ccc;
|
|
422
|
+
//background: rgba(0, 0, 0, 0.3);
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
.dropdown-menu {
|
|
426
|
+
display: block;
|
|
427
|
+
}
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
/* -------------------------------------------------------- BUTTON CONTAINER */
|
|
432
|
+
/* For mixing buttons and button groups, e.g., in a navigation bar */
|
|
433
|
+
.button-container .button, .button-container .button-group {
|
|
434
|
+
vertical-align: top;
|
|
435
|
+
}
|
|
436
|
+
.button-group{
|
|
437
|
+
.open {
|
|
438
|
+
*z-index: 1000;
|
|
439
|
+
|
|
440
|
+
.dropdown-menu {
|
|
441
|
+
display: block;
|
|
442
|
+
margin-top: 1px;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.dropdown-toggle {
|
|
446
|
+
background-image: none;
|
|
447
|
+
@include box-shadow(0 1px 6px rgba(0, 0, 0, 0.15) inset);
|
|
448
|
+
//-webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15);
|
|
449
|
+
//-moz-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15);
|
|
450
|
+
//box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15);
|
|
451
|
+
}
|
|
452
|
+
}
|
|
453
|
+
}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
/* Imports Compass CSS3 Functions and Creates Custom Functions and Mixins
|
|
2
|
+
|
|
3
|
+
1. Functions
|
|
4
|
+
2. Typography
|
|
5
|
+
3. Layout
|
|
6
|
+
4. Mixins
|
|
7
|
+
-----------------------------------------------------------*/
|
|
8
|
+
|
|
9
|
+
/* 1. Functions
|
|
10
|
+
-----------------------------------------------------------*/
|
|
11
|
+
|
|
12
|
+
// Imports Compass CSS3 Functions
|
|
13
|
+
@import "compass/css3";
|
|
14
|
+
|
|
15
|
+
// Add percentage of white to a color
|
|
16
|
+
@function tint($color, $percent){
|
|
17
|
+
@return mix(white, $color, $percent);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// Add percentage of black to a color
|
|
21
|
+
@function shade($color, $percent){
|
|
22
|
+
@return mix(black, $color, $percent);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
// Convert px to em
|
|
26
|
+
@function pxtoem($target, $context){
|
|
27
|
+
@return ($target/$context)+0em;
|
|
28
|
+
}
|
|
29
|
+
// Convert em to px
|
|
30
|
+
@function emtopx($target, $context){
|
|
31
|
+
@return ($target*$context)+0px;
|
|
32
|
+
}
|
|
33
|
+
/* 2. Type
|
|
34
|
+
-----------------------------------------------------------*/
|
|
35
|
+
|
|
36
|
+
$baseline: 1em;
|
|
37
|
+
|
|
38
|
+
// button
|
|
39
|
+
@mixin button($background-color, $color, $style: 'light', $button: false)
|
|
40
|
+
{
|
|
41
|
+
@include border-radius(3px);
|
|
42
|
+
display: inline-block;
|
|
43
|
+
padding: 6px 18px;
|
|
44
|
+
|
|
45
|
+
@if $button == true {
|
|
46
|
+
height: 31px;
|
|
47
|
+
line-height: 18px;
|
|
48
|
+
} @else {
|
|
49
|
+
line-height: 17px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
text-align: center;
|
|
53
|
+
text-decoration: none;
|
|
54
|
+
outline: 0;
|
|
55
|
+
overflow: visible;
|
|
56
|
+
margin: 0;
|
|
57
|
+
vertical-align: top;
|
|
58
|
+
width: auto;
|
|
59
|
+
*padding-top: 2px;
|
|
60
|
+
*padding-bottom: 0;
|
|
61
|
+
|
|
62
|
+
@include button-colors($background-color, $color);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@mixin button-colors($background-color, $color){
|
|
66
|
+
|
|
67
|
+
$base-color: lighten($background-color, 1%);
|
|
68
|
+
$button-dark-color: shade($base-color, 15%);
|
|
69
|
+
$button-light-color: desaturate(tint($base-color, 60%), 5%);
|
|
70
|
+
|
|
71
|
+
$button-border-color: shade($base-color, 10%);
|
|
72
|
+
$button-dark-border-color: shade($base-color, 16%);
|
|
73
|
+
$button-light-border-color: lighten($base-color, 8%);
|
|
74
|
+
|
|
75
|
+
$button-highlight-color: transparentize(desaturate(tint($button_light-color, 15%), 5%), 0%);
|
|
76
|
+
$button-shadow-color: saturate(shade($base-color, 2%), 5%);
|
|
77
|
+
|
|
78
|
+
$text-color: saturate(shade($base-color, 60%), 5%);
|
|
79
|
+
$light-text-shadow: desaturate(tint($base-color, 25%), 5%);
|
|
80
|
+
$dark-text-shadow: saturate(shade($base-color, 20%), 5%);
|
|
81
|
+
|
|
82
|
+
$dark-background-color: shade($background-color, 15%);
|
|
83
|
+
|
|
84
|
+
background-color: $background-color;
|
|
85
|
+
border-color: $button-border-color;
|
|
86
|
+
border-bottom-color: $button-dark-border-color;
|
|
87
|
+
color: $text-color;
|
|
88
|
+
|
|
89
|
+
@include background-image(linear-gradient(color-stops($button-light-color, $background-color)));
|
|
90
|
+
//@include box-shadow($button-shadow-color 0 -1px 1px 0 inset, $button-highlight-color 0 1px 3px 0 inset);
|
|
91
|
+
@include text-shadow($light-text-shadow 0 1px 0);
|
|
92
|
+
|
|
93
|
+
&:hover {
|
|
94
|
+
background: tint($background-color, 5%);
|
|
95
|
+
color: #999;
|
|
96
|
+
|
|
97
|
+
@include background-image(linear-gradient(color-stops(tint($button-light-color, 3%), tint($background-color, 3%))));
|
|
98
|
+
//@include box-shadow($dark-background-color 0 1px 4px 0, tint($button-shadow-color, 3%) 0 -2px 2px 0 inset, tint($button-highlight-color, 3%) 0 2px 3px 0 inset);
|
|
99
|
+
@include text-shadow(#fff 0 1px 0);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&:active {
|
|
103
|
+
background: ($background-color);
|
|
104
|
+
border-top-color: $button-dark-border-color;
|
|
105
|
+
border-bottom-color: $button-border-color;
|
|
106
|
+
|
|
107
|
+
@include background-image(linear-gradient(color-stops($button-light-color, $background-color)));
|
|
108
|
+
@include box-shadow(shade($background-color, 10%) 0 1px 8px 0 inset);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
|
|
2
|
+
$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
3
|
+
$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
|
|
4
|
+
$tahoma: Tahoma, Verdana, Arial, sans-serif;
|
|
5
|
+
$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
|
|
6
|
+
$verdana: Verdana, Geneva, sans-serif;
|
|
7
|
+
$opensans: 'Open Sans', $helvetica;
|
|
8
|
+
$opensans-light: 'Open Sans Light', $helvetica;
|