ifttt-gdash 0.0.4 → 0.0.5

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,217 +0,0 @@
1
- /* Mixins.less
2
- * Snippets of reusable CSS to develop faster and keep code readable
3
- * ----------------------------------------------------------------- */
4
-
5
-
6
- // Clearfix for clearing floats like a boss h5bp.com/q
7
- .clearfix() {
8
- zoom: 1;
9
- &:before,
10
- &:after {
11
- display: table;
12
- content: "";
13
- zoom: 1;
14
- *display: inline;
15
- }
16
- &:after {
17
- clear: both;
18
- }
19
- }
20
-
21
- // Center-align a block level element
22
- .center-block() {
23
- display: block;
24
- margin-left: auto;
25
- margin-right: auto;
26
- }
27
-
28
- // Sizing shortcuts
29
- .size(@height: 5px, @width: 5px) {
30
- height: @height;
31
- width: @width;
32
- }
33
- .square(@size: 5px) {
34
- .size(@size, @size);
35
- }
36
-
37
- // Input placeholder text
38
- .placeholder(@color: @grayLight) {
39
- :-moz-placeholder {
40
- color: @color;
41
- }
42
- ::-webkit-input-placeholder {
43
- color: @color;
44
- }
45
- }
46
-
47
- // Font Stacks
48
- #font {
49
- .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
50
- font-size: @size;
51
- font-weight: @weight;
52
- line-height: @lineHeight;
53
- }
54
- .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
55
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
56
- font-size: @size;
57
- font-weight: @weight;
58
- line-height: @lineHeight;
59
- }
60
- .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
61
- font-family: "Georgia", Times New Roman, Times, serif;
62
- font-size: @size;
63
- font-weight: @weight;
64
- line-height: @lineHeight;
65
- }
66
- .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
67
- font-family: "Monaco", Courier New, monospace;
68
- font-size: @size;
69
- font-weight: @weight;
70
- line-height: @lineHeight;
71
- }
72
- }
73
-
74
- // Grid System
75
- .fixed-container() {
76
- width: @siteWidth;
77
- margin-left: auto;
78
- margin-right: auto;
79
- .clearfix();
80
- }
81
- .columns(@columnSpan: 1) {
82
- width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
83
- }
84
- .offset(@columnOffset: 1) {
85
- margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
86
- }
87
- // Necessary grid styles for every column to make them appear next to each other horizontally
88
- .gridColumn() {
89
- display: inline;
90
- float: left;
91
- margin-left: @gridGutterWidth;
92
- }
93
- // makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
94
- .makeColumn(@columnSpan: 1) {
95
- .gridColumn();
96
- .columns(@columnSpan);
97
- }
98
-
99
- // Border Radius
100
- .border-radius(@radius: 5px) {
101
- -webkit-border-radius: @radius;
102
- -moz-border-radius: @radius;
103
- border-radius: @radius;
104
- }
105
-
106
- // Drop shadows
107
- .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
108
- -webkit-box-shadow: @shadow;
109
- -moz-box-shadow: @shadow;
110
- box-shadow: @shadow;
111
- }
112
-
113
- // Transitions
114
- .transition(@transition) {
115
- -webkit-transition: @transition;
116
- -moz-transition: @transition;
117
- -ms-transition: @transition;
118
- -o-transition: @transition;
119
- transition: @transition;
120
- }
121
-
122
- // Background clipping
123
- .background-clip(@clip) {
124
- -webkit-background-clip: @clip;
125
- -moz-background-clip: @clip;
126
- background-clip: @clip;
127
- }
128
-
129
- // CSS3 Content Columns
130
- .content-columns(@columnCount, @columnGap: 20px) {
131
- -webkit-column-count: @columnCount;
132
- -moz-column-count: @columnCount;
133
- column-count: @columnCount;
134
- -webkit-column-gap: @columnGap;
135
- -moz-column-gap: @columnGap;
136
- column-gap: @columnGap;
137
- }
138
-
139
- // Add an alphatransparency value to any background or border color (via Elyse Holladay)
140
- #translucent {
141
- .background(@color: @white, @alpha: 1) {
142
- background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
143
- }
144
- .border(@color: @white, @alpha: 1) {
145
- border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
146
- background-clip: padding-box;
147
- }
148
- }
149
-
150
- // Gradient Bar Colors for buttons and allerts
151
- .gradientBar(@primaryColor, @secondaryColor) {
152
- #gradient > .vertical(@primaryColor, @secondaryColor);
153
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
154
- border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
155
- border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
156
- }
157
-
158
- // Gradients
159
- #gradient {
160
- .horizontal (@startColor: #555, @endColor: #333) {
161
- background-color: @endColor;
162
- background-repeat: repeat-x;
163
- background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
164
- background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
165
- background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
166
- background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
167
- background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
168
- background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
169
- background-image: linear-gradient(left, @startColor, @endColor); // Le standard
170
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
171
- }
172
- .vertical (@startColor: #555, @endColor: #333) {
173
- background-color: @endColor;
174
- background-repeat: repeat-x;
175
- background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
176
- background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
177
- background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
178
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
179
- background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
180
- background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
181
- background-image: linear-gradient(top, @startColor, @endColor); // The standard
182
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
183
- }
184
- .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
185
- background-color: @endColor;
186
- background-repeat: repeat-x;
187
- background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
188
- background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
189
- background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
190
- background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
191
- background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
192
- }
193
- .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
194
- background-color: @endColor;
195
- background-repeat: no-repeat;
196
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
197
- background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
198
- background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
199
- background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
200
- background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
201
- background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
202
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
203
- }
204
- }
205
-
206
- // Reset filters for IE
207
- .reset-filter() {
208
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
209
- }
210
-
211
- // Opacity
212
- .opacity(@opacity: 100) {
213
- filter: e(%("alpha(opacity=%d)", @opacity));
214
- -khtml-opacity: @opacity / 100;
215
- -moz-opacity: @opacity / 100;
216
- opacity: @opacity / 100;
217
- }
@@ -1,1006 +0,0 @@
1
- /* Patterns.less
2
- * Repeatable UI elements outside the base styles provided from the scaffolding
3
- * ---------------------------------------------------------------------------- */
4
-
5
-
6
- // TOPBAR
7
- // ------
8
-
9
- // Topbar for Branding and Nav
10
- .topbar {
11
- height: 40px;
12
- position: fixed;
13
- top: 0;
14
- left: 0;
15
- right: 0;
16
- z-index: 10000;
17
- overflow: visible;
18
-
19
- // Links get text shadow
20
- a {
21
- color: @grayLight;
22
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
23
- }
24
-
25
- // Hover and active states
26
- // h3 for backwards compatibility
27
- h3 a:hover,
28
- .brand a:hover,
29
- ul .active > a {
30
- background-color: #333;
31
- background-color: rgba(255,255,255,.05);
32
- color: @white;
33
- text-decoration: none;
34
- }
35
-
36
- // Website name
37
- // h3 left for backwards compatibility
38
- h3 {
39
- position: relative;
40
- }
41
- h3 a,
42
- .brand {
43
- float: left;
44
- display: block;
45
- padding: 8px 20px 12px;
46
- margin-left: -20px; // negative indent to left-align the text down the page
47
- color: @white;
48
- font-size: 20px;
49
- font-weight: 200;
50
- line-height: 1;
51
- }
52
-
53
- // Plain text in topbar
54
- p {
55
- margin: 0;
56
- line-height: 40px;
57
- a:hover {
58
- background-color: transparent;
59
- color: @white;
60
- }
61
- }
62
-
63
- // Search Form
64
- form {
65
- float: left;
66
- margin: 5px 0 0 0;
67
- position: relative;
68
- .opacity(100);
69
- }
70
- // Todo: remove from v2.0 when ready, added for legacy
71
- form.pull-right {
72
- float: right;
73
- }
74
- input {
75
- background-color: #444;
76
- background-color: rgba(255,255,255,.3);
77
- #font > .sans-serif(13px, normal, 1);
78
- padding: 4px 9px;
79
- color: @white;
80
- color: rgba(255,255,255,.75);
81
- border: 1px solid #111;
82
- .border-radius(4px);
83
- @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
84
- .box-shadow(@shadow);
85
- .transition(none);
86
-
87
- // Placeholder text gets special styles; can't be bundled together though for some reason
88
- &:-moz-placeholder {
89
- color: @grayLighter;
90
- }
91
- &::-webkit-input-placeholder {
92
- color: @grayLighter;
93
- }
94
- // Hover states
95
- &:hover {
96
- background-color: @grayLight;
97
- background-color: rgba(255,255,255,.5);
98
- color: @white;
99
- }
100
- // Focus states (we use .focused since IE8 and down doesn't support :focus)
101
- &:focus,
102
- &.focused {
103
- outline: 0;
104
- background-color: @white;
105
- color: @grayDark;
106
- text-shadow: 0 1px 0 @white;
107
- border: 0;
108
- padding: 5px 10px;
109
- .box-shadow(0 0 3px rgba(0,0,0,.15));
110
- }
111
- }
112
- }
113
-
114
- // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
115
- // For backwards compatibility, include .topbar .fill
116
- .topbar-inner,
117
- .topbar .fill {
118
- background-color: #222;
119
- #gradient > .vertical(#333, #222);
120
- @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
121
- .box-shadow(@shadow);
122
- }
123
-
124
-
125
- // NAVIGATION
126
- // ----------
127
-
128
- // Topbar Nav
129
- // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
130
- // For backwards compatibility, leave in .topbar div > ul
131
- .topbar div > ul,
132
- .nav {
133
- display: block;
134
- float: left;
135
- margin: 0 10px 0 0;
136
- position: relative;
137
- left: 0;
138
- > li {
139
- display: block;
140
- float: left;
141
- }
142
- a {
143
- display: block;
144
- float: none;
145
- padding: 10px 10px 11px;
146
- line-height: 19px;
147
- text-decoration: none;
148
- &:hover {
149
- color: @white;
150
- text-decoration: none;
151
- }
152
- }
153
- .active > a {
154
- background-color: #222;
155
- background-color: rgba(0,0,0,.5);
156
- }
157
-
158
- // Secondary (floated right) nav in topbar
159
- &.secondary-nav {
160
- float: right;
161
- margin-left: 10px;
162
- margin-right: 0;
163
- // backwards compatibility
164
- .menu-dropdown,
165
- .dropdown-menu {
166
- right: 0;
167
- border: 0;
168
- }
169
- }
170
- // Dropdowns within the .nav
171
- // a.menu:hover and li.open .menu for backwards compatibility
172
- a.menu:hover,
173
- li.open .menu,
174
- .dropdown-toggle:hover,
175
- .dropdown.open .dropdown-toggle {
176
- background: #444;
177
- background: rgba(255,255,255,.05);
178
- }
179
- // .menu-dropdown for backwards compatibility
180
- .menu-dropdown,
181
- .dropdown-menu {
182
- background-color: #333;
183
- // a.menu for backwards compatibility
184
- a.menu,
185
- .dropdown-toggle {
186
- color: @white;
187
- &.open {
188
- background: #444;
189
- background: rgba(255,255,255,.05);
190
- }
191
- }
192
- li a {
193
- color: #999;
194
- text-shadow: 0 1px 0 rgba(0,0,0,.5);
195
- &:hover {
196
- #gradient > .vertical(#292929,#191919);
197
- color: @white;
198
- }
199
- }
200
- .active a {
201
- color: @white;
202
- }
203
- .divider {
204
- background-color: #222;
205
- border-color: #444;
206
- }
207
- }
208
- }
209
-
210
- // For backwards compatibility with new dropdowns, redeclare dropdown link padding
211
- .topbar ul .menu-dropdown li a,
212
- .topbar ul .dropdown-menu li a {
213
- padding: 4px 15px;
214
- }
215
-
216
- // Dropdown Menus
217
- // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
218
- // li.menu for backwards compatibility
219
- li.menu,
220
- .dropdown {
221
- position: relative;
222
- }
223
- // The link that is clicked to toggle the dropdown
224
- // a.menu for backwards compatibility
225
- a.menu:after,
226
- .dropdown-toggle:after {
227
- width: 0;
228
- height: 0;
229
- display: inline-block;
230
- content: "&darr;";
231
- text-indent: -99999px;
232
- vertical-align: top;
233
- margin-top: 8px;
234
- margin-left: 4px;
235
- border-left: 4px solid transparent;
236
- border-right: 4px solid transparent;
237
- border-top: 4px solid @white;
238
- .opacity(50);
239
- }
240
- // The dropdown menu (ul)
241
- // .menu-dropdown for backwards compatibility
242
- .menu-dropdown,
243
- .dropdown-menu {
244
- background-color: @white;
245
- float: left;
246
- display: none; // None by default, but block on "open" of the menu
247
- position: absolute;
248
- top: 40px;
249
- z-index: 900;
250
- min-width: 160px;
251
- max-width: 220px;
252
- _width: 160px;
253
- margin-left: 0; // override default ul styles
254
- margin-right: 0;
255
- padding: 6px 0;
256
- zoom: 1; // do we need this?
257
- border-color: #999;
258
- border-color: rgba(0,0,0,.2);
259
- border-style: solid;
260
- border-width: 0 1px 1px;
261
- .border-radius(0 0 6px 6px);
262
- .box-shadow(0 2px 4px rgba(0,0,0,.2));
263
- .background-clip(padding-box);
264
-
265
- // Unfloat any li's to make them stack
266
- li {
267
- float: none;
268
- display: block;
269
- background-color: none;
270
- }
271
- // Dividers (basically an hr) within the dropdown
272
- .divider {
273
- height: 1px;
274
- margin: 5px 0;
275
- overflow: hidden;
276
- background-color: #eee;
277
- border-bottom: 1px solid @white;
278
- }
279
- }
280
-
281
- .topbar .dropdown-menu, .dropdown-menu {
282
- // Links within the dropdown menu
283
- a {
284
- display: block;
285
- padding: 4px 15px;
286
- clear: both;
287
- font-weight: normal;
288
- line-height: 18px;
289
- color: @gray;
290
- text-shadow: 0 1px 0 @white;
291
- // Hover state
292
- &:hover {
293
- #gradient > .vertical(#eeeeee, #dddddd);
294
- color: @grayDark;
295
- text-decoration: none;
296
- @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
297
- .box-shadow(@shadow);
298
- }
299
- }
300
- }
301
-
302
- // Open state for the dropdown
303
- // .open for backwards compatibility
304
- .open,
305
- .dropdown.open {
306
- // .menu for backwards compatibility
307
- .menu,
308
- .dropdown-toggle {
309
- color: @white;
310
- background: #ccc;
311
- background: rgba(0,0,0,.3);
312
- }
313
- // .menu-dropdown for backwards compatibility
314
- .menu-dropdown,
315
- .dropdown-menu {
316
- display: block;
317
- }
318
- }
319
-
320
-
321
- // Tabs and Pills
322
- .tabs,
323
- .pills {
324
- margin: 0 0 20px;
325
- padding: 0;
326
- list-style: none;
327
- .clearfix();
328
- > li {
329
- float: left;
330
- > a {
331
- display: block;
332
- }
333
- }
334
- }
335
-
336
- // Basic Tabs
337
- .tabs {
338
- float: left;
339
- width: 100%;
340
- border-bottom: 1px solid #ddd;
341
- > li {
342
- position: relative; // For the dropdowns mostly
343
- top: 1px;
344
- > a {
345
- padding: 0 15px;
346
- margin-right: 2px;
347
- line-height: @baseline * 2;
348
- border: 1px solid transparent;
349
- .border-radius(4px 4px 0 0);
350
- &:hover {
351
- text-decoration: none;
352
- background-color: #eee;
353
- border-color: #eee #eee #ddd;
354
- }
355
- }
356
- &.active > a {
357
- color: @gray;
358
- background-color: @white;
359
- border: 1px solid #ddd;
360
- border-bottom-color: transparent;
361
- }
362
- }
363
- // first one for backwards compatibility
364
- .menu-dropdown,
365
- .dropdown-menu {
366
- top: 35px;
367
- border-width: 1px;
368
- .border-radius(0 6px 6px 6px);
369
- }
370
- // first one for backwards compatibility
371
- a.menu:after,
372
- .dropdown-toggle:after {
373
- border-top-color: #999;
374
- margin-top: 15px;
375
- margin-left: 5px;
376
- }
377
- // first one for backwards compatibility
378
- li.open.menu .menu,
379
- .open.dropdown .dropdown-toggle {
380
- border-color: #999;
381
- }
382
- // first one for backwards compatibility
383
- li.open a.menu:after,
384
- .dropdown.open .dropdown-toggle:after {
385
- border-top-color: #555;
386
- }
387
- }
388
- .tab-content {
389
- clear: both;
390
- }
391
-
392
- // Basic pill nav
393
- .pills {
394
- a {
395
- margin: 5px 3px 5px 0;
396
- padding: 0 15px;
397
- text-shadow: 0 1px 1px @white;
398
- line-height: 30px;
399
- .border-radius(15px);
400
- &:hover {
401
- background: @linkColorHover;
402
- color: @white;
403
- text-decoration: none;
404
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
405
- }
406
- }
407
- .active a {
408
- background: @linkColor;
409
- color: @white;
410
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
411
- }
412
- }
413
-
414
- .tab-content > *,
415
- .pill-content > * {
416
- display: none;
417
- }
418
-
419
- .tab-content > .active,
420
- .pill-content > .active {
421
- display:block;
422
- }
423
-
424
-
425
- // BREADCRUMBS
426
- // -----------
427
-
428
- .breadcrumb {
429
- margin: 0 0 @baseline;
430
- padding: 7px 14px;
431
- #gradient > .vertical(#ffffff, #f5f5f5);
432
- border: 1px solid #ddd;
433
- .border-radius(3px);
434
- .box-shadow(inset 0 1px 0 @white);
435
- li {
436
- display: inline;
437
- text-shadow: 0 1px 0 @white;
438
- }
439
- .divider {
440
- padding: 0 5px;
441
- color: @grayLight;
442
- }
443
- a {
444
- }
445
- .active a {
446
- color: @grayDark;
447
- }
448
- }
449
-
450
-
451
- // PAGE HEADERS
452
- // ------------
453
-
454
- .hero-unit {
455
- background-color: #f5f5f5;
456
- margin-bottom: 30px;
457
- padding: 60px;
458
- .border-radius(6px);
459
- h1 {
460
- margin-bottom: 0;
461
- font-size: 60px;
462
- line-height: 1;
463
- letter-spacing: -1px;
464
- }
465
- p {
466
- font-size: 18px;
467
- font-weight: 200;
468
- line-height: @baseline * 1.5;
469
- }
470
- }
471
- footer {
472
- margin-top: @baseline - 1;
473
- padding-top: @baseline - 1;
474
- border-top: 1px solid #eee;
475
- }
476
-
477
-
478
- // PAGE HEADERS
479
- // ------------
480
-
481
- .page-header {
482
- margin-bottom: @baseline - 1;
483
- border-bottom: 1px solid #ddd;
484
- .box-shadow(0 1px 0 rgba(255,255,255,.5));
485
- h1 {
486
- margin-bottom: (@baseline / 2) - 1px;
487
- }
488
- }
489
-
490
-
491
- // BUTTON STYLES
492
- // -------------
493
-
494
- // Shared colors for buttons and alerts
495
- .btn,
496
- .alert-message {
497
- // Set text color
498
- &.danger,
499
- &.danger:hover,
500
- &.error,
501
- &.error:hover,
502
- &.success,
503
- &.success:hover,
504
- &.info,
505
- &.info:hover {
506
- color: @white
507
- }
508
- // Danger and error appear as red
509
- &.danger,
510
- &.error {
511
- .gradientBar(#ee5f5b, #c43c35);
512
- }
513
- // Success appears as green
514
- &.success {
515
- .gradientBar(#62c462, #57a957);
516
- }
517
- // Info appears as a neutral blue
518
- &.info {
519
- .gradientBar(#5bc0de, #339bb9);
520
- }
521
- }
522
-
523
- // Base .btn styles
524
- .btn {
525
- // Button Base
526
- cursor: pointer;
527
- display: inline-block;
528
- #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
529
- padding: 5px 14px 6px;
530
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
531
- color: #333;
532
- font-size: @basefont;
533
- line-height: normal;
534
- border: 1px solid #ccc;
535
- border-bottom-color: #bbb;
536
- .border-radius(4px);
537
- @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
538
- .box-shadow(@shadow);
539
-
540
- &:hover {
541
- background-position: 0 -15px;
542
- color: #333;
543
- text-decoration: none;
544
- }
545
-
546
- // Focus state for keyboard and accessibility
547
- &:focus {
548
- outline: 1px dotted #666;
549
- }
550
-
551
- // Primary Button Type
552
- &.primary {
553
- color: @white;
554
- .gradientBar(@blue, @blueDark)
555
- }
556
-
557
- // Transitions
558
- .transition(.1s linear all);
559
-
560
- // Active and Disabled states
561
- &:active {
562
- @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
563
- .box-shadow(@shadow);
564
- }
565
- &.disabled {
566
- cursor: default;
567
- background-image: none;
568
- .reset-filter();
569
- .opacity(65);
570
- .box-shadow(none);
571
- }
572
- &[disabled] {
573
- // disabled pseudo can't be included with .disabled
574
- // def because IE8 and below will drop it ;_;
575
- cursor: default;
576
- background-image: none;
577
- .reset-filter();
578
- .opacity(65);
579
- .box-shadow(none);
580
- }
581
-
582
- // Button Sizes
583
- &.large {
584
- font-size: @basefont + 2px;
585
- line-height: normal;
586
- padding: 9px 14px 9px;
587
- .border-radius(6px);
588
- }
589
- &.small {
590
- padding: 7px 9px 7px;
591
- font-size: @basefont - 2px;
592
- }
593
- }
594
- // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
595
- :root .alert-message,
596
- :root .btn {
597
- border-radius: 0 \0;
598
- }
599
-
600
- // Help Firefox not be a jerk about adding extra padding to buttons
601
- button.btn,
602
- input[type=submit].btn {
603
- &::-moz-focus-inner {
604
- padding: 0;
605
- border: 0;
606
- }
607
- }
608
-
609
-
610
- // CLOSE ICONS
611
- // -----------
612
- .close {
613
- float: right;
614
- color: @black;
615
- font-size: 20px;
616
- font-weight: bold;
617
- line-height: @baseline * .75;
618
- text-shadow: 0 1px 0 rgba(255,255,255,1);
619
- .opacity(20);
620
- &:hover {
621
- color: @black;
622
- text-decoration: none;
623
- .opacity(40);
624
- }
625
- }
626
-
627
-
628
- // ERROR STYLES
629
- // ------------
630
-
631
- // Base alert styles
632
- .alert-message {
633
- position: relative;
634
- padding: 7px 15px;
635
- margin-bottom: @baseline;
636
- color: @grayDark;
637
- .gradientBar(#fceec1, #eedc94); // warning by default
638
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
639
- border-width: 1px;
640
- border-style: solid;
641
- .border-radius(4px);
642
- .box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
643
-
644
- // Adjust close icon
645
- .close {
646
- *margin-top: 3px; /* IE7 spacing */
647
- }
648
-
649
- // Remove extra margin from content
650
- h5 {
651
- line-height: @baseline;
652
- }
653
- p {
654
- margin-bottom: 0;
655
- }
656
- div {
657
- margin-top: 5px;
658
- margin-bottom: 2px;
659
- line-height: 28px;
660
- }
661
- .btn {
662
- // Provide actions with buttons
663
- .box-shadow(0 1px 0 rgba(255,255,255,.25));
664
- }
665
-
666
- &.block-message {
667
- background-image: none;
668
- background-color: lighten(#fceec1, 5%);
669
- .reset-filter();
670
- padding: 14px;
671
- border-color: #fceec1;
672
- .box-shadow(none);
673
- ul, p {
674
- margin-right: 30px;
675
- }
676
- ul {
677
- margin-bottom: 0;
678
- }
679
- li {
680
- color: @grayDark;
681
- }
682
- .alert-actions {
683
- margin-top: 5px;
684
- }
685
- &.error,
686
- &.success,
687
- &.info {
688
- color: @grayDark;
689
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
690
- }
691
- &.error {
692
- background-color: lighten(#f56a66, 25%);
693
- border-color: lighten(#f56a66, 20%);
694
- }
695
- &.success {
696
- background-color: lighten(#62c462, 30%);
697
- border-color: lighten(#62c462, 25%);
698
- }
699
- &.info {
700
- background-color: lighten(#6bd0ee, 25%);
701
- border-color: lighten(#6bd0ee, 20%);
702
- }
703
- }
704
- }
705
-
706
-
707
- // PAGINATION
708
- // ----------
709
-
710
- .pagination {
711
- height: @baseline * 2;
712
- margin: @baseline 0;
713
- ul {
714
- float: left;
715
- margin: 0;
716
- border: 1px solid #ddd;
717
- border: 1px solid rgba(0,0,0,.15);
718
- .border-radius(3px);
719
- .box-shadow(0 1px 2px rgba(0,0,0,.05));
720
- }
721
- li {
722
- display: inline;
723
- }
724
- a {
725
- float: left;
726
- padding: 0 14px;
727
- line-height: (@baseline * 2) - 2;
728
- border-right: 1px solid;
729
- border-right-color: #ddd;
730
- border-right-color: rgba(0,0,0,.15);
731
- *border-right-color: #ddd; /* IE6-7 */
732
- text-decoration: none;
733
- }
734
- a:hover,
735
- .active a {
736
- background-color: lighten(@blue, 45%);
737
- }
738
- .disabled a,
739
- .disabled a:hover {
740
- background-color: transparent;
741
- color: @grayLight;
742
- }
743
- .next a {
744
- border: 0;
745
- }
746
- }
747
-
748
-
749
- // WELLS
750
- // -----
751
-
752
- .well {
753
- background-color: #f5f5f5;
754
- margin-bottom: 20px;
755
- padding: 19px;
756
- min-height: 20px;
757
- border: 1px solid #eee;
758
- border: 1px solid rgba(0,0,0,.05);
759
- .border-radius(4px);
760
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
761
- blockquote {
762
- border-color: #ddd;
763
- border-color: rgba(0,0,0,.15);
764
- }
765
- }
766
-
767
-
768
- // MODALS
769
- // ------
770
-
771
- .modal-backdrop {
772
- background-color: @black;
773
- position: fixed;
774
- top: 0;
775
- left: 0;
776
- right: 0;
777
- bottom: 0;
778
- z-index: 10000;
779
- // Fade for backdrop
780
- &.fade { opacity: 0; }
781
- }
782
-
783
- .modal-backdrop, .modal-backdrop.fade.in {
784
- .opacity(80);
785
- }
786
-
787
- .modal {
788
- position: fixed;
789
- top: 50%;
790
- left: 50%;
791
- z-index: 11000;
792
- width: 560px;
793
- margin: -250px 0 0 -250px;
794
- background-color: @white;
795
- border: 1px solid #999;
796
- border: 1px solid rgba(0,0,0,.3);
797
- *border: 1px solid #999; /* IE6-7 */
798
- .border-radius(6px);
799
- .box-shadow(0 3px 7px rgba(0,0,0,0.3));
800
- .background-clip(padding-box);
801
- .close { margin-top: 7px; }
802
- &.fade {
803
- .transition(e('opacity .3s linear, top .3s ease-out'));
804
- top: -25%;
805
- }
806
- &.fade.in { top: 50%; }
807
- }
808
- .modal-header {
809
- border-bottom: 1px solid #eee;
810
- padding: 5px 15px;
811
- }
812
- .modal-body {
813
- padding: 15px;
814
- }
815
- .modal-footer {
816
- background-color: #f5f5f5;
817
- padding: 14px 15px 15px;
818
- border-top: 1px solid #ddd;
819
- .border-radius(0 0 6px 6px);
820
- .box-shadow(inset 0 1px 0 @white);
821
- .clearfix();
822
- margin-bottom: 0;
823
- .btn {
824
- float: right;
825
- margin-left: 5px;
826
- }
827
- }
828
-
829
-
830
- // POPOVER ARROWS
831
- // --------------
832
-
833
- #popoverArrow {
834
- .above(@arrowWidth: 5px) {
835
- bottom: 0;
836
- left: 50%;
837
- margin-left: -@arrowWidth;
838
- border-left: @arrowWidth solid transparent;
839
- border-right: @arrowWidth solid transparent;
840
- border-top: @arrowWidth solid @black;
841
- }
842
- .left(@arrowWidth: 5px) {
843
- top: 50%;
844
- right: 0;
845
- margin-top: -@arrowWidth;
846
- border-top: @arrowWidth solid transparent;
847
- border-bottom: @arrowWidth solid transparent;
848
- border-left: @arrowWidth solid @black;
849
- }
850
- .below(@arrowWidth: 5px) {
851
- top: 0;
852
- left: 50%;
853
- margin-left: -@arrowWidth;
854
- border-left: @arrowWidth solid transparent;
855
- border-right: @arrowWidth solid transparent;
856
- border-bottom: @arrowWidth solid @black;
857
- }
858
- .right(@arrowWidth: 5px) {
859
- top: 50%;
860
- left: 0;
861
- margin-top: -@arrowWidth;
862
- border-top: @arrowWidth solid transparent;
863
- border-bottom: @arrowWidth solid transparent;
864
- border-right: @arrowWidth solid @black;
865
- }
866
- }
867
-
868
- // TWIPSY
869
- // ------
870
-
871
- .twipsy {
872
- display: block;
873
- position: absolute;
874
- visibility: visible;
875
- padding: 5px;
876
- font-size: 11px;
877
- z-index: 1000;
878
- .opacity(80);
879
- &.fade.in {
880
- .opacity(80);
881
- }
882
- &.above .twipsy-arrow { #popoverArrow > .above(); }
883
- &.left .twipsy-arrow { #popoverArrow > .left(); }
884
- &.below .twipsy-arrow { #popoverArrow > .below(); }
885
- &.right .twipsy-arrow { #popoverArrow > .right(); }
886
- }
887
- .twipsy-inner {
888
- padding: 3px 8px;
889
- background-color: @black;
890
- color: white;
891
- text-align: center;
892
- max-width: 200px;
893
- text-decoration: none;
894
- .border-radius(4px);
895
- }
896
- .twipsy-arrow {
897
- position: absolute;
898
- width: 0;
899
- height: 0;
900
- }
901
-
902
-
903
- // POPOVERS
904
- // --------
905
-
906
- .popover {
907
- position: absolute;
908
- top: 0;
909
- left: 0;
910
- z-index: 1000;
911
- padding: 5px;
912
- display: none;
913
- &.above .arrow { #popoverArrow > .above(); }
914
- &.right .arrow { #popoverArrow > .right(); }
915
- &.below .arrow { #popoverArrow > .below(); }
916
- &.left .arrow { #popoverArrow > .left(); }
917
- .arrow {
918
- position: absolute;
919
- width: 0;
920
- height: 0;
921
- }
922
- .inner {
923
- background-color: @black;
924
- background-color: rgba(0,0,0,.8);
925
- padding: 3px;
926
- overflow: hidden;
927
- width: 280px;
928
- .border-radius(6px);
929
- .box-shadow(0 3px 7px rgba(0,0,0,0.3));
930
- }
931
- .title {
932
- background-color: #f5f5f5;
933
- padding: 9px 15px;
934
- line-height: 1;
935
- .border-radius(3px 3px 0 0);
936
- border-bottom:1px solid #eee;
937
- }
938
- .content {
939
- background-color: @white;
940
- padding: 14px;
941
- .border-radius(0 0 3px 3px);
942
- .background-clip(padding-box);
943
- p, ul, ol {
944
- margin-bottom: 0;
945
- }
946
- }
947
- }
948
-
949
-
950
- // PATTERN ANIMATIONS
951
- // ------------------
952
-
953
- .fade {
954
- .transition(opacity .15s linear);
955
- opacity: 0;
956
- &.in {
957
- opacity: 1;
958
- }
959
- }
960
-
961
-
962
- // LABELS
963
- // ------
964
-
965
- .label {
966
- padding: 1px 3px 2px;
967
- background-color: @grayLight;
968
- font-size: @basefont * .75;
969
- font-weight: bold;
970
- color: @white;
971
- text-transform: uppercase;
972
- white-space: nowrap;
973
- .border-radius(3px);
974
- &.important { background-color: #c43c35; }
975
- &.warning { background-color: @orange; }
976
- &.success { background-color: @green; }
977
- &.notice { background-color: lighten(@blue, 25%); }
978
- }
979
-
980
-
981
- // MEDIA GRIDS
982
- // -----------
983
-
984
- .media-grid {
985
- margin-left: -20px;
986
- margin-bottom: 0;
987
- .clearfix();
988
- li {
989
- display: inline;
990
- }
991
- a {
992
- float: left;
993
- padding: 4px;
994
- margin: 0 0 20px 20px;
995
- border: 1px solid #ddd;
996
- .border-radius(4px);
997
- .box-shadow(0 1px 1px rgba(0,0,0,.075));
998
- img {
999
- display: block;
1000
- }
1001
- &:hover {
1002
- border-color: @linkColor;
1003
- .box-shadow(0 1px 4px rgba(0,105,214,.25));
1004
- }
1005
- }
1006
- }