bootstrap-sass 1.2.1 → 1.3.0
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.
Potentially problematic release.
This version of bootstrap-sass might be problematic. Click here for more details.
- data/README.md +22 -3
- data/vendor/assets/javascripts/bootstrap-alerts.js +105 -0
- data/vendor/assets/javascripts/bootstrap-dropdown.js +51 -0
- data/vendor/assets/javascripts/bootstrap-modal.js +232 -0
- data/vendor/assets/javascripts/bootstrap-popover.js +78 -0
- data/vendor/assets/javascripts/bootstrap-scrollspy.js +106 -0
- data/vendor/assets/javascripts/bootstrap-tabs.js +63 -0
- data/vendor/assets/javascripts/bootstrap-twipsy.js +308 -0
- data/vendor/assets/javascripts/bootstrap.js +8 -0
- data/vendor/assets/stylesheets/bootstrap.css.scss +8 -7
- data/vendor/assets/stylesheets/bootstrap/forms.css.scss +101 -54
- data/vendor/assets/stylesheets/bootstrap/{preboot.css.scss → mixins.css.scss} +43 -96
- data/vendor/assets/stylesheets/bootstrap/patterns.css.scss +271 -87
- data/vendor/assets/stylesheets/bootstrap/reset.css.scss +6 -1
- data/vendor/assets/stylesheets/bootstrap/scaffolding.css.scss +89 -61
- data/vendor/assets/stylesheets/bootstrap/tables.css.scss +32 -7
- data/vendor/assets/stylesheets/bootstrap/type.css.scss +4 -6
- data/vendor/assets/stylesheets/bootstrap/variables.css.scss +51 -0
- metadata +16 -7
@@ -1,7 +1,8 @@
|
|
1
|
-
/*
|
1
|
+
/* patters.css.scss
|
2
2
|
* Repeatable UI elements outside the base styles provided from the scaffolding
|
3
3
|
* ---------------------------------------------------------------------------- */
|
4
4
|
|
5
|
+
|
5
6
|
// TOPBAR
|
6
7
|
// ------
|
7
8
|
|
@@ -22,8 +23,8 @@
|
|
22
23
|
}
|
23
24
|
|
24
25
|
// Hover and active states
|
25
|
-
|
26
|
-
ul .active a {
|
26
|
+
// h3 for backwards compatibility
|
27
|
+
h3 a:hover, .brand a:hover, ul .active > a {
|
27
28
|
background-color: #333;
|
28
29
|
background-color: rgba(255,255,255,.05);
|
29
30
|
color: $white;
|
@@ -31,17 +32,28 @@
|
|
31
32
|
}
|
32
33
|
|
33
34
|
// Website name
|
35
|
+
// h3 left for backwards compatibility
|
34
36
|
h3 {
|
35
37
|
position: relative;
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
38
|
+
}
|
39
|
+
h3 a, .brand {
|
40
|
+
float: left;
|
41
|
+
display: block;
|
42
|
+
padding: 8px 20px 12px;
|
43
|
+
margin-left: -20px; // negative indent to left-align the text down the page
|
44
|
+
color: $white;
|
45
|
+
font-size: 20px;
|
46
|
+
font-weight: 200;
|
47
|
+
line-height: 1;
|
48
|
+
}
|
49
|
+
|
50
|
+
// Plain text in topbar
|
51
|
+
p {
|
52
|
+
margin: 0;
|
53
|
+
line-height: 40px;
|
54
|
+
a:hover {
|
55
|
+
background-color: transparent;
|
41
56
|
color: $white;
|
42
|
-
font-size: 20px;
|
43
|
-
font-weight: 200;
|
44
|
-
line-height: 1;
|
45
57
|
}
|
46
58
|
}
|
47
59
|
|
@@ -52,12 +64,16 @@
|
|
52
64
|
position: relative;
|
53
65
|
@include opacity(100);
|
54
66
|
}
|
67
|
+
// Todo: remove from v2.0 when ready, added for legacy
|
68
|
+
form.pull-right {
|
69
|
+
float: right;
|
70
|
+
}
|
55
71
|
input {
|
56
72
|
background-color: #444;
|
57
73
|
background-color: rgba(255,255,255,.3);
|
58
74
|
@include sans-serif-font(13px, normal, 1);
|
59
75
|
padding: 4px 9px;
|
60
|
-
color:
|
76
|
+
color: $white;
|
61
77
|
color: rgba(255,255,255,.75);
|
62
78
|
border: 1px solid #111;
|
63
79
|
@include border-radius(4px);
|
@@ -76,14 +92,14 @@
|
|
76
92
|
&:hover {
|
77
93
|
background-color: $grayLight;
|
78
94
|
background-color: rgba(255,255,255,.5);
|
79
|
-
color:
|
95
|
+
color: $white;
|
80
96
|
}
|
81
97
|
// Focus states (we use .focused since IE8 and down doesn't support :focus)
|
82
98
|
&:focus, &.focused {
|
83
|
-
outline:
|
84
|
-
background-color:
|
99
|
+
outline: 0;
|
100
|
+
background-color: $white;
|
85
101
|
color: $grayDark;
|
86
|
-
text-shadow: 0 1px 0
|
102
|
+
text-shadow: 0 1px 0 $white;
|
87
103
|
border: 0;
|
88
104
|
padding: 5px 10px;
|
89
105
|
@include box-shadow(0 0 3px rgba(0,0,0,.15));
|
@@ -92,7 +108,7 @@
|
|
92
108
|
}
|
93
109
|
|
94
110
|
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
|
95
|
-
// For backwards
|
111
|
+
// For backwards compatibility, include .topbar .fill
|
96
112
|
.topbar-inner, .topbar .fill {
|
97
113
|
background-color: #222;
|
98
114
|
@include vertical-gradient(#333, #222);
|
@@ -123,11 +139,11 @@
|
|
123
139
|
line-height: 19px;
|
124
140
|
text-decoration: none;
|
125
141
|
&:hover {
|
126
|
-
color:
|
142
|
+
color: $white;
|
127
143
|
text-decoration: none;
|
128
144
|
}
|
129
145
|
}
|
130
|
-
.active a {
|
146
|
+
.active > a {
|
131
147
|
background-color: #222;
|
132
148
|
background-color: rgba(0,0,0,.5);
|
133
149
|
}
|
@@ -140,6 +156,7 @@
|
|
140
156
|
// backwards compatibility
|
141
157
|
.menu-dropdown, .dropdown-menu {
|
142
158
|
right: 0;
|
159
|
+
border: 0;
|
143
160
|
}
|
144
161
|
}
|
145
162
|
// Dropdowns within the .nav
|
@@ -153,7 +170,7 @@
|
|
153
170
|
background-color: #333;
|
154
171
|
// a.menu for backwards compatibility
|
155
172
|
a.menu, .dropdown-toggle {
|
156
|
-
color:
|
173
|
+
color: $white;
|
157
174
|
&.open {
|
158
175
|
background: #444;
|
159
176
|
background: rgba(255,255,255,.05);
|
@@ -164,9 +181,12 @@
|
|
164
181
|
text-shadow: 0 1px 0 rgba(0,0,0,.5);
|
165
182
|
&:hover {
|
166
183
|
@include vertical-gradient(#292929,#191919);
|
167
|
-
color:
|
184
|
+
color: $white;
|
168
185
|
}
|
169
186
|
}
|
187
|
+
.active a {
|
188
|
+
color: $white;
|
189
|
+
}
|
170
190
|
.divider {
|
171
191
|
background-color: #222;
|
172
192
|
border-color: #444;
|
@@ -174,7 +194,7 @@
|
|
174
194
|
}
|
175
195
|
}
|
176
196
|
|
177
|
-
// For backwards
|
197
|
+
// For backwards compatibility with new dropdowns, redeclare dropdown link padding
|
178
198
|
.topbar ul .menu-dropdown li a, .topbar ul .dropdown-menu li a {
|
179
199
|
padding: 4px 15px;
|
180
200
|
}
|
@@ -198,17 +218,18 @@ a.menu:after, .dropdown-toggle:after {
|
|
198
218
|
margin-left: 4px;
|
199
219
|
border-left: 4px solid transparent;
|
200
220
|
border-right: 4px solid transparent;
|
201
|
-
border-top: 4px solid
|
221
|
+
border-top: 4px solid $white;
|
202
222
|
@include opacity(50);
|
203
223
|
}
|
204
224
|
// The dropdown menu (ul)
|
205
225
|
// .menu-dropdown for backwards compatibility
|
206
226
|
.menu-dropdown, .dropdown-menu {
|
207
|
-
background-color:
|
227
|
+
background-color: $white;
|
208
228
|
float: left;
|
209
229
|
display: none; // None by default, but block on "open" of the menu
|
210
230
|
position: absolute;
|
211
231
|
top: 40px;
|
232
|
+
z-index: 900;
|
212
233
|
min-width: 160px;
|
213
234
|
max-width: 220px;
|
214
235
|
_width: 160px;
|
@@ -236,7 +257,7 @@ a.menu:after, .dropdown-toggle:after {
|
|
236
257
|
margin: 5px 0;
|
237
258
|
overflow: hidden;
|
238
259
|
background-color: #eee;
|
239
|
-
border-bottom: 1px solid
|
260
|
+
border-bottom: 1px solid $white;
|
240
261
|
}
|
241
262
|
}
|
242
263
|
|
@@ -249,10 +270,10 @@ a.menu:after, .dropdown-toggle:after {
|
|
249
270
|
font-weight: normal;
|
250
271
|
line-height: 18px;
|
251
272
|
color: $gray;
|
252
|
-
text-shadow: 0 1px 0
|
273
|
+
text-shadow: 0 1px 0 $white;
|
253
274
|
// Hover state
|
254
275
|
&:hover {
|
255
|
-
@include vertical-gradient(#
|
276
|
+
@include vertical-gradient(#eeeeee, #dddddd);
|
256
277
|
color: $grayDark;
|
257
278
|
text-decoration: none;
|
258
279
|
$shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
|
@@ -266,7 +287,7 @@ a.menu:after, .dropdown-toggle:after {
|
|
266
287
|
.open, .dropdown.open {
|
267
288
|
// .menu for backwards compatibility
|
268
289
|
.menu, .dropdown-toggle {
|
269
|
-
color:
|
290
|
+
color: $white;
|
270
291
|
background: #ccc;
|
271
292
|
background: rgba(0,0,0,.3);
|
272
293
|
}
|
@@ -292,28 +313,29 @@ a.menu:after, .dropdown-toggle:after {
|
|
292
313
|
|
293
314
|
// Basic Tabs
|
294
315
|
.tabs {
|
316
|
+
float: left;
|
295
317
|
width: 100%;
|
296
318
|
border-bottom: 1px solid #ddd;
|
297
319
|
> li {
|
298
320
|
position: relative; // For the dropdowns mostly
|
299
321
|
top: 1px;
|
300
322
|
> a {
|
301
|
-
margin-right: 2px;
|
302
323
|
padding: 0 15px;
|
303
|
-
|
324
|
+
margin-right: 2px;
|
325
|
+
line-height: $baseline * 2;
|
326
|
+
border: 1px solid transparent;
|
304
327
|
@include border-radius(4px 4px 0 0);
|
305
328
|
&:hover {
|
306
|
-
background-color: #eee;
|
307
|
-
border-bottom: 1px solid #ddd;
|
308
329
|
text-decoration: none;
|
330
|
+
background-color: #eee;
|
331
|
+
border-color: #eee #eee #ddd;
|
309
332
|
}
|
310
333
|
}
|
311
334
|
&.active > a {
|
312
|
-
background-color: #fff;
|
313
|
-
padding: 0 14px;
|
314
|
-
border: 1px solid #ddd;
|
315
|
-
border-bottom: 0;
|
316
335
|
color: $gray;
|
336
|
+
background-color: $white;
|
337
|
+
border: 1px solid #ddd;
|
338
|
+
border-bottom-color: transparent;
|
317
339
|
}
|
318
340
|
}
|
319
341
|
// first one for backwards compatibility
|
@@ -329,40 +351,79 @@ a.menu:after, .dropdown-toggle:after {
|
|
329
351
|
margin-left: 5px;
|
330
352
|
}
|
331
353
|
// first one for backwards compatibility
|
354
|
+
li.open.menu .menu, .open.dropdown .dropdown-toggle {
|
355
|
+
border-color: #999;
|
356
|
+
}
|
357
|
+
// first one for backwards compatibility
|
332
358
|
li.open a.menu:after, .dropdown.open .dropdown-toggle:after {
|
333
359
|
border-top-color: #555;
|
334
360
|
}
|
335
361
|
}
|
362
|
+
.tab-content {
|
363
|
+
clear: both;
|
364
|
+
}
|
336
365
|
|
337
366
|
// Basic pill nav
|
338
367
|
.pills {
|
339
368
|
a {
|
340
|
-
|
369
|
+
margin: 5px 3px 5px 0;
|
341
370
|
padding: 0 15px;
|
342
|
-
text-shadow: 0 1px 1px
|
371
|
+
text-shadow: 0 1px 1px $white;
|
343
372
|
line-height: 30px;
|
344
373
|
@include border-radius(15px);
|
345
374
|
&:hover {
|
346
375
|
background: $linkColorHover;
|
347
|
-
color:
|
376
|
+
color: $white;
|
348
377
|
text-decoration: none;
|
349
378
|
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
350
379
|
}
|
351
380
|
}
|
352
381
|
.active a {
|
353
382
|
background: $linkColor;
|
354
|
-
color:
|
383
|
+
color: $white;
|
355
384
|
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
356
385
|
}
|
357
386
|
}
|
358
387
|
|
388
|
+
.tab-content > *, .pill-content > * {
|
389
|
+
display: none;
|
390
|
+
}
|
391
|
+
|
392
|
+
.tab-content > .active, .pill-content > .active {
|
393
|
+
display:block;
|
394
|
+
}
|
395
|
+
|
396
|
+
// BREADCRUMBS
|
397
|
+
// -----------
|
398
|
+
|
399
|
+
.breadcrumb {
|
400
|
+
margin: 0 0 $baseline;
|
401
|
+
padding: 7px 14px;
|
402
|
+
@include vertical-gradient(#ffffff, #f5f5f5);
|
403
|
+
border: 1px solid #ddd;
|
404
|
+
@include border-radius(3px);
|
405
|
+
@include box-shadow(inset 0 1px 0 $white);
|
406
|
+
li {
|
407
|
+
display: inline;
|
408
|
+
text-shadow: 0 1px 0 $white;
|
409
|
+
}
|
410
|
+
.divider {
|
411
|
+
padding: 0 5px;
|
412
|
+
color: $grayLight;
|
413
|
+
}
|
414
|
+
a {
|
415
|
+
}
|
416
|
+
.active a {
|
417
|
+
color: $grayDark;
|
418
|
+
}
|
419
|
+
}
|
420
|
+
|
359
421
|
|
360
422
|
// PAGE HEADERS
|
361
423
|
// ------------
|
362
424
|
|
363
425
|
.hero-unit {
|
364
426
|
background-color: #f5f5f5;
|
365
|
-
margin-top: 60px;
|
366
427
|
margin-bottom: 30px;
|
367
428
|
padding: 60px;
|
368
429
|
@include border-radius(6px);
|
@@ -401,6 +462,26 @@ footer {
|
|
401
462
|
// BUTTON STYLES
|
402
463
|
// -------------
|
403
464
|
|
465
|
+
// Shared colors for buttons and alerts
|
466
|
+
.btn, .alert-message {
|
467
|
+
// Set text color
|
468
|
+
&.danger, &.danger:hover, &.error, &.error:hover, &.success, &.success:hover, &.info, &.info:hover {
|
469
|
+
color: $white
|
470
|
+
}
|
471
|
+
// Danger and error appear as red
|
472
|
+
&.danger, &.error {
|
473
|
+
@include gradientBar(#ee5f5b, #c43c35);
|
474
|
+
}
|
475
|
+
// Success appears as green
|
476
|
+
&.success {
|
477
|
+
@include gradientBar(#62c462, #57a957);
|
478
|
+
}
|
479
|
+
// Info appears as a neutral blue
|
480
|
+
&.info {
|
481
|
+
@include gradientBar(#5bc0de, #339bb9);
|
482
|
+
}
|
483
|
+
}
|
484
|
+
|
404
485
|
// Base .btn styles
|
405
486
|
.btn {
|
406
487
|
// Button Base
|
@@ -410,7 +491,7 @@ footer {
|
|
410
491
|
padding: 5px 14px 6px;
|
411
492
|
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
412
493
|
color: #333;
|
413
|
-
font-size:
|
494
|
+
font-size: $basefont;
|
414
495
|
line-height: normal;
|
415
496
|
border: 1px solid #ccc;
|
416
497
|
border-bottom-color: #bbb;
|
@@ -424,9 +505,14 @@ footer {
|
|
424
505
|
text-decoration: none;
|
425
506
|
}
|
426
507
|
|
508
|
+
// Focus state for keyboard and accessibility
|
509
|
+
&:focus {
|
510
|
+
outline: 1px dotted #666;
|
511
|
+
}
|
512
|
+
|
427
513
|
// Primary Button Type
|
428
514
|
&.primary {
|
429
|
-
color
|
515
|
+
color: $white;
|
430
516
|
@include gradientBar($blue, $blueDark)
|
431
517
|
}
|
432
518
|
|
@@ -441,6 +527,7 @@ footer {
|
|
441
527
|
&.disabled {
|
442
528
|
cursor: default;
|
443
529
|
background-image: none;
|
530
|
+
@include reset-filter();
|
444
531
|
@include opacity(65);
|
445
532
|
@include box-shadow(none);
|
446
533
|
}
|
@@ -449,20 +536,21 @@ footer {
|
|
449
536
|
// def because IE8 and below will drop it ;_;
|
450
537
|
cursor: default;
|
451
538
|
background-image: none;
|
539
|
+
@include reset-filter();
|
452
540
|
@include opacity(65);
|
453
541
|
@include box-shadow(none);
|
454
542
|
}
|
455
543
|
|
456
544
|
// Button Sizes
|
457
545
|
&.large {
|
458
|
-
font-size:
|
546
|
+
font-size: $basefont + 2px;
|
459
547
|
line-height: normal;
|
460
548
|
padding: 9px 14px 9px;
|
461
549
|
@include border-radius(6px);
|
462
550
|
}
|
463
551
|
&.small {
|
464
552
|
padding: 7px 9px 7px;
|
465
|
-
font-size:
|
553
|
+
font-size: $basefont - 2px;
|
466
554
|
}
|
467
555
|
}
|
468
556
|
// Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
|
@@ -478,21 +566,46 @@ button.btn, input[type=submit].btn {
|
|
478
566
|
}
|
479
567
|
}
|
480
568
|
|
569
|
+
|
570
|
+
// CLOSE ICONS
|
571
|
+
// -----------
|
572
|
+
.close {
|
573
|
+
float: right;
|
574
|
+
color: $black;
|
575
|
+
font-size: 20px;
|
576
|
+
font-weight: bold;
|
577
|
+
line-height: $baseline * .75;
|
578
|
+
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
579
|
+
@include opacity(20);
|
580
|
+
&:hover {
|
581
|
+
color: $black;
|
582
|
+
text-decoration: none;
|
583
|
+
@include opacity(40);
|
584
|
+
}
|
585
|
+
}
|
586
|
+
|
587
|
+
|
481
588
|
// ERROR STYLES
|
482
589
|
// ------------
|
483
590
|
|
484
591
|
// Base alert styles
|
485
592
|
.alert-message {
|
486
|
-
|
593
|
+
position: relative;
|
594
|
+
padding: 7px 15px;
|
487
595
|
margin-bottom: $baseline;
|
488
|
-
padding: 7px 14px;
|
489
596
|
color: $grayDark;
|
597
|
+
@include gradientBar(#fceec1, #eedc94); // warning by default
|
490
598
|
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
491
599
|
border-width: 1px;
|
492
600
|
border-style: solid;
|
493
601
|
@include border-radius(4px);
|
494
602
|
@include box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
|
495
603
|
|
604
|
+
// Adjust close icon
|
605
|
+
.close {
|
606
|
+
*margin-top: 3px; /* IE7 spacing */
|
607
|
+
}
|
608
|
+
|
496
609
|
// Remove extra margin from content
|
497
610
|
h5 {
|
498
611
|
line-height: $baseline;
|
@@ -509,31 +622,23 @@ button.btn, input[type=submit].btn {
|
|
509
622
|
// Provide actions with buttons
|
510
623
|
@include box-shadow(0 1px 0 rgba(255,255,255,.25));
|
511
624
|
}
|
512
|
-
.close {
|
513
|
-
float: right;
|
514
|
-
margin-top: -2px;
|
515
|
-
color: $black;
|
516
|
-
font-size: 20px;
|
517
|
-
font-weight: bold;
|
518
|
-
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
519
|
-
@include opacity(20);
|
520
|
-
&:hover {
|
521
|
-
color: $black;
|
522
|
-
text-decoration: none;
|
523
|
-
@include opacity(40);
|
524
|
-
}
|
525
|
-
}
|
526
625
|
|
527
626
|
&.block-message {
|
528
627
|
background-image: none;
|
529
628
|
background-color: lighten(#fceec1, 5%);
|
629
|
+
@include reset-filter();
|
530
630
|
padding: 14px;
|
531
631
|
border-color: #fceec1;
|
532
632
|
@include box-shadow(none);
|
533
|
-
|
534
|
-
p {
|
633
|
+
ul, p {
|
535
634
|
margin-right: 30px;
|
536
635
|
}
|
636
|
+
ul {
|
637
|
+
margin-bottom: 0;
|
638
|
+
}
|
639
|
+
li {
|
640
|
+
color: $grayDark;
|
641
|
+
}
|
537
642
|
.alert-actions {
|
538
643
|
margin-top: 5px;
|
539
644
|
}
|
@@ -596,8 +701,10 @@ button.btn, input[type=submit].btn {
|
|
596
701
|
}
|
597
702
|
}
|
598
703
|
|
704
|
+
|
599
705
|
// WELLS
|
600
706
|
// -----
|
707
|
+
|
601
708
|
.well {
|
602
709
|
background-color: #f5f5f5;
|
603
710
|
margin-bottom: 20px;
|
@@ -607,26 +714,39 @@ button.btn, input[type=submit].btn {
|
|
607
714
|
border: 1px solid rgba(0,0,0,.05);
|
608
715
|
@include border-radius(4px);
|
609
716
|
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
|
717
|
+
blockquote {
|
718
|
+
border-color: #ddd;
|
719
|
+
border-color: rgba(0,0,0,.15);
|
720
|
+
}
|
610
721
|
}
|
611
722
|
|
723
|
+
|
612
724
|
// MODALS
|
613
725
|
// ------
|
726
|
+
|
614
727
|
.modal-backdrop {
|
615
|
-
background-color:
|
728
|
+
background-color: $black;
|
616
729
|
position: fixed;
|
617
730
|
top: 0;
|
618
731
|
left: 0;
|
619
732
|
right: 0;
|
620
733
|
bottom: 0;
|
621
|
-
z-index:
|
734
|
+
z-index: 10000;
|
735
|
+
// Fade for backdrop
|
736
|
+
&.fade { opacity: 0; }
|
622
737
|
}
|
738
|
+
|
739
|
+
.modal-backdrop, .modal-backdrop.fade.in {
|
740
|
+
@include opacity(80);
|
741
|
+
}
|
742
|
+
|
623
743
|
.modal {
|
624
744
|
position: fixed;
|
625
745
|
top: 50%;
|
626
746
|
left: 50%;
|
627
|
-
z-index:
|
747
|
+
z-index: 11000;
|
628
748
|
width: 560px;
|
629
|
-
margin: -
|
749
|
+
margin: -250px 0 0 -250px;
|
630
750
|
background-color: $white;
|
631
751
|
border: 1px solid #999;
|
632
752
|
border: 1px solid rgba(0,0,0,.3);
|
@@ -634,45 +754,46 @@ button.btn, input[type=submit].btn {
|
|
634
754
|
@include border-radius(6px);
|
635
755
|
@include box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
636
756
|
@include background-clip(padding-box);
|
757
|
+
.close { margin-top: 7px; }
|
758
|
+
&.fade {
|
759
|
+
$trans: opacity .3s linear, top .3s ease-out;
|
760
|
+
@include transition($trans);
|
761
|
+
top: -25%;
|
762
|
+
}
|
763
|
+
&.fade.in { top: 50%; }
|
637
764
|
}
|
638
765
|
.modal-header {
|
639
766
|
border-bottom: 1px solid #eee;
|
640
|
-
padding: 5px
|
641
|
-
.close {
|
642
|
-
position: absolute;
|
643
|
-
right: 10px;
|
644
|
-
top: 10px;
|
645
|
-
color: #999;
|
646
|
-
line-height:10px;
|
647
|
-
font-size: 18px;
|
648
|
-
}
|
767
|
+
padding: 5px 15px;
|
649
768
|
}
|
650
769
|
.modal-body {
|
651
|
-
padding:
|
770
|
+
padding: 15px;
|
652
771
|
}
|
653
772
|
.modal-footer {
|
654
773
|
background-color: #f5f5f5;
|
655
|
-
padding: 14px
|
774
|
+
padding: 14px 15px 15px;
|
656
775
|
border-top: 1px solid #ddd;
|
657
776
|
@include border-radius(0 0 6px 6px);
|
658
|
-
@include box-shadow(inset 0 1px 0
|
777
|
+
@include box-shadow(inset 0 1px 0 $white);
|
659
778
|
@include clearfix();
|
660
779
|
margin-bottom: 0;
|
661
780
|
.btn {
|
662
781
|
float: right;
|
663
|
-
margin-left:
|
782
|
+
margin-left: 5px;
|
664
783
|
}
|
665
784
|
}
|
666
785
|
|
786
|
+
|
667
787
|
// POPOVER ARROWS
|
668
788
|
// --------------
|
789
|
+
|
669
790
|
@mixin above-arrow($arrowWidth: 5px) {
|
670
791
|
bottom: 0;
|
671
792
|
left: 50%;
|
672
793
|
margin-left: -$arrowWidth;
|
673
794
|
border-left: $arrowWidth solid transparent;
|
674
795
|
border-right: $arrowWidth solid transparent;
|
675
|
-
border-top: $arrowWidth solid
|
796
|
+
border-top: $arrowWidth solid $black;
|
676
797
|
}
|
677
798
|
@mixin left-arrow($arrowWidth: 5px) {
|
678
799
|
top: 50%;
|
@@ -680,7 +801,7 @@ button.btn, input[type=submit].btn {
|
|
680
801
|
margin-top: -$arrowWidth;
|
681
802
|
border-top: $arrowWidth solid transparent;
|
682
803
|
border-bottom: $arrowWidth solid transparent;
|
683
|
-
border-left: $arrowWidth solid
|
804
|
+
border-left: $arrowWidth solid $black;
|
684
805
|
}
|
685
806
|
@mixin below-arrow($arrowWidth: 5px) {
|
686
807
|
top: 0;
|
@@ -688,7 +809,7 @@ button.btn, input[type=submit].btn {
|
|
688
809
|
margin-left: -$arrowWidth;
|
689
810
|
border-left: $arrowWidth solid transparent;
|
690
811
|
border-right: $arrowWidth solid transparent;
|
691
|
-
border-bottom: $arrowWidth solid
|
812
|
+
border-bottom: $arrowWidth solid $black;
|
692
813
|
}
|
693
814
|
@mixin right-arrow($arrowWidth: 5px) {
|
694
815
|
top: 50%;
|
@@ -696,11 +817,12 @@ button.btn, input[type=submit].btn {
|
|
696
817
|
margin-top: -$arrowWidth;
|
697
818
|
border-top: $arrowWidth solid transparent;
|
698
819
|
border-bottom: $arrowWidth solid transparent;
|
699
|
-
border-right: $arrowWidth solid
|
820
|
+
border-right: $arrowWidth solid $black;
|
700
821
|
}
|
701
822
|
|
702
823
|
// TWIPSY
|
703
824
|
// ------
|
825
|
+
|
704
826
|
.twipsy {
|
705
827
|
display: block;
|
706
828
|
position: absolute;
|
@@ -709,6 +831,9 @@ button.btn, input[type=submit].btn {
|
|
709
831
|
font-size: 11px;
|
710
832
|
z-index: 1000;
|
711
833
|
@include opacity(80);
|
834
|
+
&.fade.in {
|
835
|
+
@include opacity(80);
|
836
|
+
}
|
712
837
|
&.above .twipsy-arrow { @include above-arrow(); }
|
713
838
|
&.left .twipsy-arrow { @include left-arrow(); }
|
714
839
|
&.below .twipsy-arrow { @include below-arrow(); }
|
@@ -716,7 +841,7 @@ button.btn, input[type=submit].btn {
|
|
716
841
|
}
|
717
842
|
.twipsy-inner {
|
718
843
|
padding: 3px 8px;
|
719
|
-
background-color:
|
844
|
+
background-color: $black;
|
720
845
|
color: white;
|
721
846
|
text-align: center;
|
722
847
|
max-width: 200px;
|
@@ -729,8 +854,10 @@ button.btn, input[type=submit].btn {
|
|
729
854
|
height: 0;
|
730
855
|
}
|
731
856
|
|
857
|
+
|
732
858
|
// POPOVERS
|
733
859
|
// --------
|
860
|
+
|
734
861
|
.popover {
|
735
862
|
position: absolute;
|
736
863
|
top: 0;
|
@@ -748,8 +875,8 @@ button.btn, input[type=submit].btn {
|
|
748
875
|
height: 0;
|
749
876
|
}
|
750
877
|
.inner {
|
751
|
-
background:
|
752
|
-
background: rgba(0,0,0,.8);
|
878
|
+
background-color: $black;
|
879
|
+
background-color: rgba(0,0,0,.8);
|
753
880
|
padding: 3px;
|
754
881
|
overflow: hidden;
|
755
882
|
width: 280px;
|
@@ -774,3 +901,60 @@ button.btn, input[type=submit].btn {
|
|
774
901
|
}
|
775
902
|
}
|
776
903
|
|
904
|
+
|
905
|
+
// PATTERN ANIMATIONS
|
906
|
+
// ------------------
|
907
|
+
|
908
|
+
.fade {
|
909
|
+
@include transition(opacity .15s linear);
|
910
|
+
opacity: 0;
|
911
|
+
&.in {
|
912
|
+
opacity: 1;
|
913
|
+
}
|
914
|
+
}
|
915
|
+
|
916
|
+
// LABELS
|
917
|
+
// ------
|
918
|
+
|
919
|
+
.label {
|
920
|
+
padding: 1px 3px 2px;
|
921
|
+
background-color: $grayLight;
|
922
|
+
font-size: $basefont * .75;
|
923
|
+
font-weight: bold;
|
924
|
+
color: $white;
|
925
|
+
text-transform: uppercase;
|
926
|
+
@include border-radius(3px);
|
927
|
+
&.important { background-color: #c43c35; }
|
928
|
+
&.warning { background-color: $orange; }
|
929
|
+
&.success { background-color: $green; }
|
930
|
+
&.notice { background-color: lighten($blue, 25%); }
|
931
|
+
}
|
932
|
+
|
933
|
+
|
934
|
+
// MEDIA GRIDS
|
935
|
+
// -----------
|
936
|
+
|
937
|
+
.media-grid {
|
938
|
+
margin-left: -20px;
|
939
|
+
margin-bottom: 0;
|
940
|
+
@include clearfix();
|
941
|
+
li {
|
942
|
+
display: inline;
|
943
|
+
}
|
944
|
+
a {
|
945
|
+
float: left;
|
946
|
+
padding: 4px;
|
947
|
+
margin: 0 0 20px 20px;
|
948
|
+
border: 1px solid #ddd;
|
949
|
+
@include border-radius(4px);
|
950
|
+
@include box-shadow(0 1px 1px rgba(0,0,0,.075));
|
951
|
+
img {
|
952
|
+
display: block;
|
953
|
+
}
|
954
|
+
&:hover {
|
955
|
+
border-color: $linkColor;
|
956
|
+
@include box-shadow(0 1px 4px rgba(0,105,214,.25));
|
957
|
+
}
|
958
|
+
}
|
959
|
+
}
|
960
|
+
|