compass_twitter_bootstrap 0.1.8 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (96) hide show
  1. data/CHANGELOG.md +6 -0
  2. data/README.md +14 -8
  3. data/build/convert.rb +58 -33
  4. data/lib/compass_twitter_bootstrap.rb +1 -1
  5. data/lib/compass_twitter_bootstrap/version.rb +1 -1
  6. data/stylesheets/_compass_twitter_bootstrap.scss +45 -7
  7. data/stylesheets/_compass_twitter_bootstrap_responsive.scss +322 -0
  8. data/stylesheets/compass_twitter_bootstrap/_accordion.scss +28 -0
  9. data/stylesheets/compass_twitter_bootstrap/_alerts.scss +70 -0
  10. data/stylesheets/compass_twitter_bootstrap/_breadcrumbs.scss +22 -0
  11. data/stylesheets/compass_twitter_bootstrap/_button-groups.scss +147 -0
  12. data/stylesheets/compass_twitter_bootstrap/_buttons.scss +165 -0
  13. data/stylesheets/compass_twitter_bootstrap/_carousel.scss +121 -0
  14. data/stylesheets/compass_twitter_bootstrap/_close.scss +18 -0
  15. data/stylesheets/compass_twitter_bootstrap/_code.scss +44 -0
  16. data/stylesheets/compass_twitter_bootstrap/_component-animations.scss +18 -0
  17. data/stylesheets/compass_twitter_bootstrap/_dropdowns.scss +131 -0
  18. data/stylesheets/compass_twitter_bootstrap/_forms.scss +335 -299
  19. data/stylesheets/compass_twitter_bootstrap/_grid.scss +8 -0
  20. data/stylesheets/compass_twitter_bootstrap/_hero-unit.scss +20 -0
  21. data/stylesheets/compass_twitter_bootstrap/_labels.scss +16 -0
  22. data/stylesheets/compass_twitter_bootstrap/_layouts.scss +17 -0
  23. data/stylesheets/compass_twitter_bootstrap/_mixins.scss +409 -68
  24. data/stylesheets/compass_twitter_bootstrap/_modals.scss +72 -0
  25. data/stylesheets/compass_twitter_bootstrap/_navbar.scss +292 -0
  26. data/stylesheets/compass_twitter_bootstrap/_navs.scss +344 -0
  27. data/stylesheets/compass_twitter_bootstrap/_pager.scss +30 -0
  28. data/stylesheets/compass_twitter_bootstrap/_pagination.scss +55 -0
  29. data/stylesheets/compass_twitter_bootstrap/_popovers.scss +49 -0
  30. data/stylesheets/compass_twitter_bootstrap/_progress-bars.scss +95 -0
  31. data/stylesheets/compass_twitter_bootstrap/_reset.scss +37 -52
  32. data/stylesheets/compass_twitter_bootstrap/_scaffolding.scss +13 -123
  33. data/stylesheets/compass_twitter_bootstrap/_sprites.scss +156 -0
  34. data/stylesheets/compass_twitter_bootstrap/_tables.scss +75 -160
  35. data/stylesheets/compass_twitter_bootstrap/_thumbnails.scss +35 -0
  36. data/stylesheets/compass_twitter_bootstrap/_tooltip.scss +35 -0
  37. data/stylesheets/compass_twitter_bootstrap/_type.scss +100 -70
  38. data/stylesheets/compass_twitter_bootstrap/_utilities.scss +23 -0
  39. data/stylesheets/compass_twitter_bootstrap/_variables.scss +94 -55
  40. data/stylesheets/compass_twitter_bootstrap/_wells.scss +17 -0
  41. data/stylesheets_sass/_compass_twitter_bootstrap.sass +49 -6
  42. data/stylesheets_sass/_compass_twitter_bootstrap_responsive.sass +252 -0
  43. data/stylesheets_sass/compass_twitter_bootstrap/_accordion.sass +24 -0
  44. data/stylesheets_sass/compass_twitter_bootstrap/_alerts.sass +65 -0
  45. data/stylesheets_sass/compass_twitter_bootstrap/_breadcrumbs.sass +18 -0
  46. data/stylesheets_sass/compass_twitter_bootstrap/_button-groups.sass +129 -0
  47. data/stylesheets_sass/compass_twitter_bootstrap/_buttons.sass +150 -0
  48. data/stylesheets_sass/compass_twitter_bootstrap/_carousel.sass +95 -0
  49. data/stylesheets_sass/compass_twitter_bootstrap/_close.sass +16 -0
  50. data/stylesheets_sass/compass_twitter_bootstrap/_code.sass +41 -0
  51. data/stylesheets_sass/compass_twitter_bootstrap/_component-animations.sass +16 -0
  52. data/stylesheets_sass/compass_twitter_bootstrap/_dropdowns.sass +121 -0
  53. data/stylesheets_sass/compass_twitter_bootstrap/_forms.sass +327 -306
  54. data/stylesheets_sass/compass_twitter_bootstrap/_grid.sass +8 -0
  55. data/stylesheets_sass/compass_twitter_bootstrap/_hero-unit.sass +17 -0
  56. data/stylesheets_sass/compass_twitter_bootstrap/_labels.sass +23 -0
  57. data/stylesheets_sass/compass_twitter_bootstrap/_layouts.sass +14 -0
  58. data/stylesheets_sass/compass_twitter_bootstrap/_mixins.sass +425 -57
  59. data/stylesheets_sass/compass_twitter_bootstrap/_modals.sass +75 -0
  60. data/stylesheets_sass/compass_twitter_bootstrap/_navbar.sass +258 -0
  61. data/stylesheets_sass/compass_twitter_bootstrap/_navs.sass +316 -0
  62. data/stylesheets_sass/compass_twitter_bootstrap/_pager.sass +29 -0
  63. data/stylesheets_sass/compass_twitter_bootstrap/_pagination.sass +53 -0
  64. data/stylesheets_sass/compass_twitter_bootstrap/_popovers.sass +55 -0
  65. data/stylesheets_sass/compass_twitter_bootstrap/_progress-bars.sass +89 -0
  66. data/stylesheets_sass/compass_twitter_bootstrap/_reset.sass +33 -67
  67. data/stylesheets_sass/compass_twitter_bootstrap/_scaffolding.sass +13 -175
  68. data/stylesheets_sass/compass_twitter_bootstrap/_sprites.sass +392 -0
  69. data/stylesheets_sass/compass_twitter_bootstrap/_tables.sass +67 -139
  70. data/stylesheets_sass/compass_twitter_bootstrap/_thumbnails.sass +34 -0
  71. data/stylesheets_sass/compass_twitter_bootstrap/_tooltip.sass +43 -0
  72. data/stylesheets_sass/compass_twitter_bootstrap/_type.sass +95 -65
  73. data/stylesheets_sass/compass_twitter_bootstrap/_utilities.sass +20 -0
  74. data/stylesheets_sass/compass_twitter_bootstrap/_variables.sass +67 -45
  75. data/stylesheets_sass/compass_twitter_bootstrap/_wells.sass +15 -0
  76. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  77. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  78. data/vendor/assets/javascripts/bootstrap-alert.js +91 -0
  79. data/vendor/assets/javascripts/bootstrap-button.js +98 -0
  80. data/vendor/assets/javascripts/bootstrap-carousel.js +154 -0
  81. data/vendor/assets/javascripts/bootstrap-collapse.js +136 -0
  82. data/vendor/assets/javascripts/bootstrap-dropdown.js +58 -21
  83. data/vendor/assets/javascripts/bootstrap-modal.js +63 -114
  84. data/vendor/assets/javascripts/bootstrap-popover.js +38 -33
  85. data/vendor/assets/javascripts/bootstrap-scrollspy.js +62 -44
  86. data/vendor/assets/javascripts/bootstrap-tab.js +130 -0
  87. data/vendor/assets/javascripts/bootstrap-tooltip.js +270 -0
  88. data/vendor/assets/javascripts/bootstrap-transition.js +51 -0
  89. data/vendor/assets/javascripts/bootstrap-typeahead.js +271 -0
  90. metadata +69 -17
  91. data/stylesheets/compass_twitter_bootstrap/_patterns.scss +0 -1058
  92. data/stylesheets_sass/compass_twitter_bootstrap/_patterns.sass +0 -923
  93. data/vendor/assets/javascripts/bootstrap-alerts.js +0 -124
  94. data/vendor/assets/javascripts/bootstrap-buttons.js +0 -64
  95. data/vendor/assets/javascripts/bootstrap-tabs.js +0 -80
  96. data/vendor/assets/javascripts/bootstrap-twipsy.js +0 -321
@@ -1,1058 +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: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
- @include opacity(1.0);
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
- @include 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
- @include border-radius(4px);
83
- $shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
84
- @include box-shadow($shadow);
85
- @include 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
- @include 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
- @include gradient-vertical(#333, #222);
120
- $shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
121
- @include 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
- @include 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
- @include opacity(0.5);
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
- @include border-radius(0 0 6px 6px);
262
- @include box-shadow(0 2px 4px rgba(0,0,0,.2));
263
- @include 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,
282
- .dropdown-menu {
283
- // Links within the dropdown menu
284
- a {
285
- display: block;
286
- padding: 4px 15px;
287
- clear: both;
288
- font-weight: normal;
289
- line-height: 18px;
290
- color: $gray;
291
- text-shadow: 0 1px 0 $white;
292
- // Hover state
293
- &:hover,
294
- &.hover {
295
- @include gradient-vertical(#eeeeee, #dddddd);
296
- color: $grayDark;
297
- text-decoration: none;
298
- $shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
299
- @include box-shadow($shadow);
300
- }
301
- }
302
- }
303
-
304
- // Open state for the dropdown
305
- // .open for backwards compatibility
306
- .open,
307
- .dropdown.open {
308
- // .menu for backwards compatibility
309
- .menu,
310
- .dropdown-toggle {
311
- color: $white;
312
- background: #ccc;
313
- background: rgba(0,0,0,.3);
314
- }
315
- // .menu-dropdown for backwards compatibility
316
- .menu-dropdown,
317
- .dropdown-menu {
318
- display: block;
319
- }
320
- }
321
-
322
-
323
- // TABS AND PILLS
324
- // --------------
325
-
326
- // Common styles
327
- .tabs,
328
- .pills {
329
- margin: 0 0 $baseline;
330
- padding: 0;
331
- list-style: none;
332
- @include clearfix();
333
- > li {
334
- float: left;
335
- > a {
336
- display: block;
337
- }
338
- }
339
- }
340
-
341
- // Tabs
342
- .tabs {
343
- border-color: #ddd;
344
- border-style: solid;
345
- border-width: 0 0 1px;
346
- > li {
347
- position: relative; // For the dropdowns mostly
348
- margin-bottom: -1px;
349
- > a {
350
- padding: 0 15px;
351
- margin-right: 2px;
352
- line-height: ($baseline * 2) - 2;
353
- border: 1px solid transparent;
354
- @include border-radius(4px 4px 0 0);
355
- &:hover {
356
- text-decoration: none;
357
- background-color: #eee;
358
- border-color: #eee #eee #ddd;
359
- }
360
- }
361
- }
362
- // Active state, and it's :hover to override normal :hover
363
- .active > a,
364
- .active > a:hover {
365
- color: $gray;
366
- background-color: $white;
367
- border: 1px solid #ddd;
368
- border-bottom-color: transparent;
369
- cursor: default;
370
- }
371
- }
372
-
373
- // Dropdowns in tabs
374
- .tabs {
375
- // first one for backwards compatibility
376
- .menu-dropdown,
377
- .dropdown-menu {
378
- top: 35px;
379
- border-width: 1px;
380
- @include border-radius(0 6px 6px 6px);
381
- }
382
- // first one for backwards compatibility
383
- a.menu:after,
384
- .dropdown-toggle:after {
385
- border-top-color: #999;
386
- margin-top: 15px;
387
- margin-left: 5px;
388
- }
389
- // first one for backwards compatibility
390
- li.open.menu .menu,
391
- .open.dropdown .dropdown-toggle {
392
- border-color: #999;
393
- }
394
- // first one for backwards compatibility
395
- li.open a.menu:after,
396
- .dropdown.open .dropdown-toggle:after {
397
- border-top-color: #555;
398
- }
399
- }
400
-
401
- // Pills
402
- .pills {
403
- a {
404
- margin: 5px 3px 5px 0;
405
- padding: 0 15px;
406
- line-height: 30px;
407
- text-shadow: 0 1px 1px $white;
408
- @include border-radius(15px);
409
- &:hover {
410
- color: $white;
411
- text-decoration: none;
412
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
413
- background-color: $linkColorHover;
414
- }
415
- }
416
- .active a {
417
- color: $white;
418
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
419
- background-color: $linkColor;
420
- }
421
- }
422
-
423
- // Stacked pills
424
- .pills-vertical > li {
425
- float: none;
426
- }
427
-
428
- // Tabbable areas
429
- .tab-content,
430
- .pill-content {
431
- }
432
- .tab-content > .tab-pane,
433
- .pill-content > .pill-pane,
434
- .tab-content > div,
435
- .pill-content > div {
436
- display: none;
437
- }
438
- .tab-content > .active,
439
- .pill-content > .active {
440
- display: block;
441
- }
442
-
443
-
444
- // BREADCRUMBS
445
- // -----------
446
-
447
- .breadcrumb {
448
- padding: 7px 14px;
449
- margin: 0 0 $baseline;
450
- @include gradient-vertical(#ffffff, #f5f5f5);
451
- border: 1px solid #ddd;
452
- @include border-radius(3px);
453
- @include box-shadow(inset 0 1px 0 $white);
454
- li {
455
- display: inline;
456
- text-shadow: 0 1px 0 $white;
457
- }
458
- .divider {
459
- padding: 0 5px;
460
- color: $grayLight;
461
- }
462
- .active a {
463
- color: $grayDark;
464
- }
465
- }
466
-
467
-
468
- // PAGE HEADERS
469
- // ------------
470
-
471
- .hero-unit {
472
- background-color: #f5f5f5;
473
- margin-bottom: 30px;
474
- padding: 60px;
475
- @include border-radius(6px);
476
- h1 {
477
- margin-bottom: 0;
478
- font-size: 60px;
479
- line-height: 1;
480
- letter-spacing: -1px;
481
- }
482
- p {
483
- font-size: 18px;
484
- font-weight: 200;
485
- line-height: $baseline * 1.5;
486
- }
487
- }
488
- footer {
489
- margin-top: $baseline - 1;
490
- padding-top: $baseline - 1;
491
- border-top: 1px solid #eee;
492
- }
493
-
494
-
495
- // PAGE HEADERS
496
- // ------------
497
-
498
- .page-header {
499
- margin-bottom: $baseline - 1;
500
- border-bottom: 1px solid #ddd;
501
- @include box-shadow(0 1px 0 rgba(255,255,255,.5));
502
- h1 {
503
- margin-bottom: ($baseline / 2) - 1px;
504
- }
505
- }
506
-
507
-
508
- // BUTTON STYLES
509
- // -------------
510
-
511
- // Shared colors for buttons and alerts
512
- .btn,
513
- .alert-message {
514
- // Set text color
515
- &.danger,
516
- &.danger:hover,
517
- &.error,
518
- &.error:hover,
519
- &.success,
520
- &.success:hover,
521
- &.info,
522
- &.info:hover {
523
- color: $white
524
- }
525
- // Sets the close button to the middle of message
526
- .close{
527
- font-family: Arial, sans-serif;
528
- line-height: 18px;
529
- }
530
- // Danger and error appear as red
531
- &.danger,
532
- &.error {
533
- @include gradientBar(#ee5f5b, #c43c35);
534
- }
535
- // Success appears as green
536
- &.success {
537
- @include gradientBar(#62c462, #57a957);
538
- }
539
- // Info appears as a neutral blue
540
- &.info {
541
- @include gradientBar(#5bc0de, #339bb9);
542
- }
543
- }
544
-
545
- // Base .btn styles
546
- .btn {
547
- // Button Base
548
- cursor: pointer;
549
- display: inline-block;
550
- @include gradient-vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use @include gradientbar(); here since it does a three-color gradient
551
- padding: 5px 14px 6px;
552
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
553
- color: #333;
554
- font-size: $basefont;
555
- line-height: normal;
556
- border: 1px solid #ccc;
557
- border-bottom-color: #bbb;
558
- @include border-radius(4px);
559
- $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
560
- @include box-shadow($shadow);
561
-
562
- &:hover {
563
- background-position: 0 -15px;
564
- color: #333;
565
- text-decoration: none;
566
- }
567
-
568
- // Focus state for keyboard and accessibility
569
- &:focus {
570
- outline: 1px dotted #666;
571
- }
572
-
573
- // Primary Button Type
574
- &.primary {
575
- color: $white;
576
- @include gradientBar($blue, $blueDark);
577
- }
578
-
579
- // Transitions
580
- @include transition(.1s linear all);
581
-
582
- // Active and Disabled states
583
- &.active,
584
- &:active {
585
- $shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
586
- @include box-shadow($shadow);
587
- }
588
- &.disabled {
589
- cursor: default;
590
- background-image: none;
591
- @include reset-filter();
592
- @include opacity(0.65);
593
- @include box-shadow(none);
594
- }
595
- &[disabled] {
596
- // disabled pseudo can't be included with .disabled
597
- // def because IE8 and below will drop it ;_;
598
- cursor: default;
599
- background-image: none;
600
- @include reset-filter();
601
- @include opacity(0.65);
602
- @include box-shadow(none);
603
- }
604
-
605
- // Button Sizes
606
- &.large {
607
- font-size: $basefont + 2px;
608
- line-height: normal;
609
- padding: 9px 14px 9px;
610
- @include border-radius(6px);
611
- }
612
- &.small {
613
- padding: 7px 9px 7px;
614
- font-size: $basefont - 2px;
615
- }
616
- }
617
- // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
618
- :root .alert-message,
619
- :root .btn {
620
- border-radius: 0 \0;
621
- }
622
-
623
- // Help Firefox not be a jerk about adding extra padding to buttons
624
- button.btn,
625
- input[type=submit].btn {
626
- &::-moz-focus-inner {
627
- padding: 0;
628
- border: 0;
629
- }
630
- }
631
-
632
-
633
- // CLOSE ICONS
634
- // -----------
635
- .close {
636
- float: right;
637
- color: $black;
638
- font-size: 20px;
639
- font-weight: bold;
640
- line-height: $baseline * .75;
641
- text-shadow: 0 1px 0 rgba(255,255,255,1);
642
- @include opacity(0.25);
643
- &:hover {
644
- color: $black;
645
- text-decoration: none;
646
- @include opacity(0.4);
647
- }
648
- }
649
-
650
-
651
- // ERROR STYLES
652
- // ------------
653
-
654
- // Base alert styles
655
- .alert-message {
656
- position: relative;
657
- padding: 7px 15px;
658
- margin-bottom: $baseline;
659
- color: $grayDark;
660
- @include gradientBar(#fceec1, #eedc94); // warning by default
661
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
662
- border-width: 1px;
663
- border-style: solid;
664
- @include border-radius(4px);
665
- @include box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
666
-
667
- // Adjust close icon
668
- .close {
669
- margin-top: 1px;
670
- *margin-top: 0; // For IE7
671
- }
672
-
673
- // Make links same color as text and stand out more
674
- a {
675
- font-weight: bold;
676
- color: $grayDark;
677
- }
678
- &.danger p a,
679
- &.error p a,
680
- &.success p a,
681
- &.info p a {
682
- color: $white;
683
- }
684
-
685
- // Remove extra margin from content
686
- h5 {
687
- line-height: $baseline;
688
- }
689
- p {
690
- margin-bottom: 0;
691
- }
692
- div {
693
- margin-top: 5px;
694
- margin-bottom: 2px;
695
- line-height: 28px;
696
- }
697
- .btn {
698
- // Provide actions with buttons
699
- @include box-shadow(0 1px 0 rgba(255,255,255,.25));
700
- }
701
-
702
- &.block-message {
703
- background-image: none;
704
- background-color: lighten(#fceec1, 5%);
705
- @include reset-filter();
706
- padding: 14px;
707
- border-color: #fceec1;
708
- @include box-shadow(none);
709
- ul, p {
710
- margin-right: 30px;
711
- }
712
- ul {
713
- margin-bottom: 0;
714
- }
715
- li {
716
- color: $grayDark;
717
- }
718
- .alert-actions {
719
- margin-top: 5px;
720
- }
721
- &.error,
722
- &.success,
723
- &.info {
724
- color: $grayDark;
725
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
726
- }
727
- &.error {
728
- background-color: lighten(#f56a66, 25%);
729
- border-color: lighten(#f56a66, 20%);
730
- }
731
- &.success {
732
- background-color: lighten(#62c462, 30%);
733
- border-color: lighten(#62c462, 25%);
734
- }
735
- &.info {
736
- background-color: lighten(#6bd0ee, 25%);
737
- border-color: lighten(#6bd0ee, 20%);
738
- }
739
- // Change link color back
740
- &.danger p a,
741
- &.error p a,
742
- &.success p a,
743
- &.info p a {
744
- color: $grayDark;
745
- }
746
-
747
- }
748
- }
749
-
750
-
751
- // PAGINATION
752
- // ----------
753
-
754
- .pagination {
755
- height: $baseline * 2;
756
- margin: $baseline 0;
757
- ul {
758
- float: left;
759
- margin: 0;
760
- border: 1px solid #ddd;
761
- border: 1px solid rgba(0,0,0,.15);
762
- @include border-radius(3px);
763
- @include box-shadow(0 1px 2px rgba(0,0,0,.05));
764
- }
765
- li {
766
- display: inline;
767
- }
768
- a {
769
- float: left;
770
- padding: 0 14px;
771
- line-height: ($baseline * 2) - 2;
772
- border-right: 1px solid;
773
- border-right-color: #ddd;
774
- border-right-color: rgba(0,0,0,.15);
775
- *border-right-color: #ddd; /* IE6-7 */
776
- text-decoration: none;
777
- }
778
- a:hover,
779
- .active a {
780
- background-color: lighten($blue, 45%);
781
- }
782
- .disabled a,
783
- .disabled a:hover {
784
- background-color: transparent;
785
- color: $grayLight;
786
- }
787
- .next a {
788
- border: 0;
789
- }
790
- }
791
-
792
-
793
- // WELLS
794
- // -----
795
-
796
- .well {
797
- background-color: #f5f5f5;
798
- margin-bottom: 20px;
799
- padding: 19px;
800
- min-height: 20px;
801
- border: 1px solid #eee;
802
- border: 1px solid rgba(0,0,0,.05);
803
- @include border-radius(4px);
804
- @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
805
- blockquote {
806
- border-color: #ddd;
807
- border-color: rgba(0,0,0,.15);
808
- }
809
- }
810
-
811
-
812
- // MODALS
813
- // ------
814
-
815
- .modal-backdrop {
816
- background-color: $black;
817
- position: fixed;
818
- top: 0;
819
- left: 0;
820
- right: 0;
821
- bottom: 0;
822
- z-index: 10000;
823
- // Fade for backdrop
824
- &.fade { opacity: 0; }
825
- }
826
-
827
- .modal-backdrop,
828
- .modal-backdrop.fade.in {
829
- @include opacity(0.8);
830
- }
831
-
832
- .modal {
833
- position: fixed;
834
- top: 50%;
835
- left: 50%;
836
- z-index: 11000;
837
- width: 560px;
838
- margin: -250px 0 0 -280px;
839
- background-color: $white;
840
- border: 1px solid #999;
841
- border: 1px solid rgba(0,0,0,.3);
842
- *border: 1px solid #999; /* IE6-7 */
843
- @include border-radius(6px);
844
- @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
845
- @include background-clip(padding-box);
846
- .close { margin-top: 7px; }
847
- &.fade {
848
- @include transition(unquote('opacity .3s linear, top .3s ease-out'));
849
- top: -25%;
850
- }
851
- &.fade.in { top: 50%; }
852
- }
853
- .modal-header {
854
- border-bottom: 1px solid #eee;
855
- padding: 5px 15px;
856
- }
857
- .modal-body {
858
- padding: 15px;
859
- }
860
- .modal-body form {
861
- margin-bottom: 0;
862
- }
863
- .modal-footer {
864
- background-color: #f5f5f5;
865
- padding: 14px 15px 15px;
866
- border-top: 1px solid #ddd;
867
- @include border-radius(0 0 6px 6px);
868
- @include box-shadow(inset 0 1px 0 $white);
869
- @include clearfix();
870
- margin-bottom: 0;
871
- .btn {
872
- float: right;
873
- margin-left: 5px;
874
- }
875
- }
876
-
877
- // Fix the stacking of these components when in modals
878
- .modal .popover,
879
- .modal .twipsy {
880
- z-index: 12000;
881
- }
882
-
883
-
884
- // POPOVER ARROWS
885
- // --------------
886
-
887
- @mixin popover-arrow-above($arrowWidth: 5px) {
888
- bottom: 0;
889
- left: 50%;
890
- margin-left: -$arrowWidth;
891
- border-left: $arrowWidth solid transparent;
892
- border-right: $arrowWidth solid transparent;
893
- border-top: $arrowWidth solid #000;
894
- }
895
- @mixin popover-arrow-left($arrowWidth: 5px) {
896
- top: 50%;
897
- right: 0;
898
- margin-top: -$arrowWidth;
899
- border-top: $arrowWidth solid transparent;
900
- border-bottom: $arrowWidth solid transparent;
901
- border-left: $arrowWidth solid #000;
902
- }
903
- @mixin popover-arrow-below($arrowWidth: 5px) {
904
- top: 0;
905
- left: 50%;
906
- margin-left: -$arrowWidth;
907
- border-left: $arrowWidth solid transparent;
908
- border-right: $arrowWidth solid transparent;
909
- border-bottom: $arrowWidth solid #000;
910
- }
911
- @mixin popover-arrow-right($arrowWidth: 5px) {
912
- top: 50%;
913
- left: 0;
914
- margin-top: -$arrowWidth;
915
- border-top: $arrowWidth solid transparent;
916
- border-bottom: $arrowWidth solid transparent;
917
- border-right: $arrowWidth solid #000;
918
- }
919
-
920
- // TWIPSY
921
- // ------
922
-
923
- .twipsy {
924
- display: block;
925
- position: absolute;
926
- visibility: visible;
927
- padding: 5px;
928
- font-size: 11px;
929
- z-index: 1000;
930
- @include opacity(0.8);
931
- &.fade.in {
932
- @include opacity(0.8);
933
- }
934
- &.above .twipsy-arrow { @include popover-arrow-above(); }
935
- &.left .twipsy-arrow { @include popover-arrow-left(); }
936
- &.below .twipsy-arrow { @include popover-arrow-below(); }
937
- &.right .twipsy-arrow { @include popover-arrow-right(); }
938
- }
939
- .twipsy-inner {
940
- padding: 3px 8px;
941
- background-color: $black;
942
- color: white;
943
- text-align: center;
944
- max-width: 200px;
945
- text-decoration: none;
946
- @include border-radius(4px);
947
- }
948
- .twipsy-arrow {
949
- position: absolute;
950
- width: 0;
951
- height: 0;
952
- }
953
-
954
-
955
- // POPOVERS
956
- // --------
957
-
958
- .popover {
959
- position: absolute;
960
- top: 0;
961
- left: 0;
962
- z-index: 1000;
963
- padding: 5px;
964
- display: none;
965
- &.above .arrow { @include popover-arrow-above(); }
966
- &.right .arrow { @include popover-arrow-right(); }
967
- &.below .arrow { @include popover-arrow-below(); }
968
- &.left .arrow { @include popover-arrow-left(); }
969
- .arrow {
970
- position: absolute;
971
- width: 0;
972
- height: 0;
973
- }
974
- .inner {
975
- background: $black;
976
- background: rgba(0,0,0,.8);
977
- padding: 3px;
978
- overflow: hidden;
979
- width: 280px;
980
- @include border-radius(6px);
981
- @include box-shadow(0 3px 7px rgba(0,0,0,0.3));
982
- }
983
- .title {
984
- background-color: #f5f5f5;
985
- padding: 9px 15px;
986
- line-height: 1;
987
- @include border-radius(3px 3px 0 0);
988
- border-bottom:1px solid #eee;
989
- }
990
- .content {
991
- background-color: $white;
992
- padding: 14px;
993
- @include border-radius(0 0 3px 3px);
994
- @include background-clip(padding-box);
995
- p, ul, ol {
996
- margin-bottom: 0;
997
- }
998
- }
999
- }
1000
-
1001
-
1002
- // PATTERN ANIMATIONS
1003
- // ------------------
1004
-
1005
- .fade {
1006
- @include transition(opacity .15s linear);
1007
- opacity: 0;
1008
- &.in {
1009
- opacity: 1;
1010
- }
1011
- }
1012
-
1013
-
1014
- // LABELS
1015
- // ------
1016
-
1017
- .label {
1018
- padding: 1px 3px 2px;
1019
- font-size: $basefont * .75;
1020
- font-weight: bold;
1021
- color: $white;
1022
- text-transform: uppercase;
1023
- white-space: nowrap;
1024
- background-color: $grayLight;
1025
- @include border-radius(3px);
1026
- &.important { background-color: #c43c35; }
1027
- &.warning { background-color: $orange; }
1028
- &.success { background-color: $green; }
1029
- &.notice { background-color: lighten($blue, 25%); }
1030
- }
1031
-
1032
-
1033
- // MEDIA GRIDS
1034
- // -----------
1035
-
1036
- .media-grid {
1037
- margin-left: -$gridGutterWidth;
1038
- margin-bottom: 0;
1039
- @include clearfix();
1040
- li {
1041
- display: inline;
1042
- }
1043
- a {
1044
- float: left;
1045
- padding: 4px;
1046
- margin: 0 0 $baseline $gridGutterWidth;
1047
- border: 1px solid #ddd;
1048
- @include border-radius(4px);
1049
- @include box-shadow(0 1px 1px rgba(0,0,0,.075));
1050
- img {
1051
- display: block;
1052
- }
1053
- &:hover {
1054
- border-color: $linkColor;
1055
- @include box-shadow(0 1px 4px rgba(0,105,214,.25));
1056
- }
1057
- }
1058
- }