bootstrap-sass-rails 1.4.0.3 → 2.0.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (87) hide show
  1. data/lib/bootstrap/sass/rails/version.rb +1 -1
  2. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings-white.png +0 -0
  3. data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
  4. data/vendor/assets/javascripts/twitter/bootstrap.js +12 -8
  5. data/vendor/assets/javascripts/twitter/bootstrap/alert.js +91 -0
  6. data/vendor/assets/javascripts/twitter/bootstrap/button.js +98 -0
  7. data/vendor/assets/javascripts/twitter/bootstrap/carousel.js +154 -0
  8. data/vendor/assets/javascripts/twitter/bootstrap/collapse.js +136 -0
  9. data/vendor/assets/javascripts/twitter/bootstrap/dropdown.js +58 -21
  10. data/vendor/assets/javascripts/twitter/bootstrap/modal.js +63 -114
  11. data/vendor/assets/javascripts/twitter/bootstrap/popover.js +38 -33
  12. data/vendor/assets/javascripts/twitter/bootstrap/scrollspy.js +62 -44
  13. data/vendor/assets/javascripts/twitter/bootstrap/tab.js +130 -0
  14. data/vendor/assets/javascripts/twitter/bootstrap/tooltip.js +270 -0
  15. data/vendor/assets/javascripts/twitter/bootstrap/transition.js +51 -0
  16. data/vendor/assets/javascripts/twitter/bootstrap/typeahead.js +271 -0
  17. data/vendor/assets/stylesheets/twitter/bootstrap.css.scss +50 -14
  18. data/vendor/assets/stylesheets/twitter/bootstrap/_accordion.scss +28 -0
  19. data/vendor/assets/stylesheets/twitter/bootstrap/_alerts.scss +70 -0
  20. data/vendor/assets/stylesheets/twitter/bootstrap/_breadcrumbs.scss +22 -0
  21. data/vendor/assets/stylesheets/twitter/bootstrap/_button-groups.scss +147 -0
  22. data/vendor/assets/stylesheets/twitter/bootstrap/_buttons.scss +165 -0
  23. data/vendor/assets/stylesheets/twitter/bootstrap/_carousel.scss +121 -0
  24. data/vendor/assets/stylesheets/twitter/bootstrap/_close.scss +18 -0
  25. data/vendor/assets/stylesheets/twitter/bootstrap/_code.scss +44 -0
  26. data/vendor/assets/stylesheets/twitter/bootstrap/_component-animations.scss +18 -0
  27. data/vendor/assets/stylesheets/twitter/bootstrap/_dropdowns.scss +131 -0
  28. data/vendor/assets/stylesheets/twitter/bootstrap/_forms.scss +335 -299
  29. data/vendor/assets/stylesheets/twitter/bootstrap/_grid.scss +8 -0
  30. data/vendor/assets/stylesheets/twitter/bootstrap/_hero-unit.scss +20 -0
  31. data/vendor/assets/stylesheets/twitter/bootstrap/_labels.scss +16 -0
  32. data/vendor/assets/stylesheets/twitter/bootstrap/_layouts.scss +17 -0
  33. data/vendor/assets/stylesheets/twitter/bootstrap/_mixins.scss +429 -124
  34. data/vendor/assets/stylesheets/twitter/bootstrap/_modals.scss +72 -0
  35. data/vendor/assets/stylesheets/twitter/bootstrap/_navbar.scss +292 -0
  36. data/vendor/assets/stylesheets/twitter/bootstrap/_navs.scss +343 -0
  37. data/vendor/assets/stylesheets/twitter/bootstrap/_pager.scss +30 -0
  38. data/vendor/assets/stylesheets/twitter/bootstrap/_pagination.scss +55 -0
  39. data/vendor/assets/stylesheets/twitter/bootstrap/_patterns.scss +5 -1051
  40. data/vendor/assets/stylesheets/twitter/bootstrap/_popovers.scss +49 -0
  41. data/vendor/assets/stylesheets/twitter/bootstrap/_print.scss +18 -0
  42. data/vendor/assets/stylesheets/twitter/bootstrap/_progress-bars.scss +95 -0
  43. data/vendor/assets/stylesheets/twitter/bootstrap/_reset.scss +36 -51
  44. data/vendor/assets/stylesheets/twitter/bootstrap/_responsive.scss +323 -0
  45. data/vendor/assets/stylesheets/twitter/bootstrap/_scaffolding.scss +13 -123
  46. data/vendor/assets/stylesheets/twitter/bootstrap/_sprites.scss +156 -0
  47. data/vendor/assets/stylesheets/twitter/bootstrap/_tables.scss +75 -160
  48. data/vendor/assets/stylesheets/twitter/bootstrap/_thumbnails.scss +35 -0
  49. data/vendor/assets/stylesheets/twitter/bootstrap/_tooltip.scss +35 -0
  50. data/vendor/assets/stylesheets/twitter/bootstrap/_type.scss +100 -70
  51. data/vendor/assets/stylesheets/twitter/bootstrap/_utilities.scss +23 -0
  52. data/vendor/assets/stylesheets/twitter/bootstrap/_variables.scss +94 -55
  53. data/vendor/assets/stylesheets/twitter/bootstrap/_wells.scss +17 -0
  54. metadata +51 -75
  55. data/test/dummy/log/test.log +0 -462
  56. data/test/dummy/tmp/cache/assets/C29/E80/sprockets%2F8f076727207424919c7170c7157bbe37 +0 -1102
  57. data/test/dummy/tmp/cache/assets/D3F/FA0/sprockets%2F22c8366fdbaaa2872b202dfe7376629f +0 -0
  58. data/test/dummy/tmp/cache/assets/E5F/300/sprockets%2F243a2fff0dbb8aeec3dd579b4ff7c81b +0 -1048
  59. data/test/dummy/tmp/cache/sass/367107abe8cc7204b7df467455e0644864892d9f/_forms.scssc +0 -0
  60. data/test/dummy/tmp/cache/sass/367107abe8cc7204b7df467455e0644864892d9f/_mixins.scssc +0 -0
  61. data/test/dummy/tmp/cache/sass/367107abe8cc7204b7df467455e0644864892d9f/_patterns.scssc +0 -0
  62. data/test/dummy/tmp/cache/sass/367107abe8cc7204b7df467455e0644864892d9f/_reset.scssc +0 -0
  63. data/test/dummy/tmp/cache/sass/367107abe8cc7204b7df467455e0644864892d9f/_scaffolding.scssc +0 -0
  64. data/test/dummy/tmp/cache/sass/367107abe8cc7204b7df467455e0644864892d9f/_tables.scssc +0 -0
  65. data/test/dummy/tmp/cache/sass/367107abe8cc7204b7df467455e0644864892d9f/_type.scssc +0 -0
  66. data/test/dummy/tmp/cache/sass/367107abe8cc7204b7df467455e0644864892d9f/_variables.scssc +0 -0
  67. data/test/dummy/tmp/cache/sass/766526f7d87ffdf0401dde0ec8d49f976470392d/_bootstrap.scssc +0 -0
  68. data/test/dummy/tmp/cache/sass/766526f7d87ffdf0401dde0ec8d49f976470392d/bootstrap.css.scssc +0 -0
  69. data/test/dummy/tmp/cache/sass/766526f7d87ffdf0401dde0ec8d49f976470392d/bootstrap.cssc +0 -0
  70. data/test/dummy/tmp/cache/sass/8f44dddc3cc4868f43c2a4153ce3876663527256/_bootstrap.scssc +0 -0
  71. data/test/dummy/tmp/cache/sass/8f44dddc3cc4868f43c2a4153ce3876663527256/bootstrap.css.scssc +0 -0
  72. data/test/dummy/tmp/cache/sass/95eca8acb76bbb914a4c6988012b73e61e9bcc23/application.css.scssc +0 -0
  73. data/test/dummy/tmp/cache/sass/95eca8acb76bbb914a4c6988012b73e61e9bcc23/individual.css.scssc +0 -0
  74. data/test/dummy/tmp/cache/sass/cd2e949d41af4ab87fc8c5c6e94e4e802032bd18/_forms.scssc +0 -0
  75. data/test/dummy/tmp/cache/sass/cd2e949d41af4ab87fc8c5c6e94e4e802032bd18/_mixins.scssc +0 -0
  76. data/test/dummy/tmp/cache/sass/cd2e949d41af4ab87fc8c5c6e94e4e802032bd18/_patterns.scssc +0 -0
  77. data/test/dummy/tmp/cache/sass/cd2e949d41af4ab87fc8c5c6e94e4e802032bd18/_reset.scssc +0 -0
  78. data/test/dummy/tmp/cache/sass/cd2e949d41af4ab87fc8c5c6e94e4e802032bd18/_scaffolding.scssc +0 -0
  79. data/test/dummy/tmp/cache/sass/cd2e949d41af4ab87fc8c5c6e94e4e802032bd18/_tables.scssc +0 -0
  80. data/test/dummy/tmp/cache/sass/cd2e949d41af4ab87fc8c5c6e94e4e802032bd18/_type.scssc +0 -0
  81. data/test/dummy/tmp/cache/sass/cd2e949d41af4ab87fc8c5c6e94e4e802032bd18/_variables.scssc +0 -0
  82. data/test/dummy/tmp/cache/sass/cd2e949d41af4ab87fc8c5c6e94e4e802032bd18/mixins.scssc +0 -0
  83. data/test/dummy/tmp/cache/sass/cd2e949d41af4ab87fc8c5c6e94e4e802032bd18/variables.css.scssc +0 -0
  84. data/vendor/assets/javascripts/twitter/bootstrap/alerts.js +0 -124
  85. data/vendor/assets/javascripts/twitter/bootstrap/buttons.js +0 -64
  86. data/vendor/assets/javascripts/twitter/bootstrap/tabs.js +0 -80
  87. data/vendor/assets/javascripts/twitter/bootstrap/twipsy.js +0 -321
@@ -0,0 +1,30 @@
1
+ // PAGER
2
+ // -----
3
+
4
+ .pager {
5
+ margin-left: 0;
6
+ margin-bottom: $baseLineHeight;
7
+ list-style: none;
8
+ text-align: center;
9
+ @include clearfix();
10
+ }
11
+ .pager li {
12
+ display: inline;
13
+ }
14
+ .pager a {
15
+ display: inline-block;
16
+ padding: 5px 14px;
17
+ background-color: #fff;
18
+ border: 1px solid #ddd;
19
+ @include border-radius(15px);
20
+ }
21
+ .pager a:hover {
22
+ text-decoration: none;
23
+ background-color: #f5f5f5;
24
+ }
25
+ .pager .next a {
26
+ float: right;
27
+ }
28
+ .pager .previous a {
29
+ float: left;
30
+ }
@@ -0,0 +1,55 @@
1
+ // PAGINATION
2
+ // ----------
3
+
4
+ .pagination {
5
+ height: $baseLineHeight * 2;
6
+ margin: $baseLineHeight 0;
7
+ }
8
+ .pagination ul {
9
+ display: inline-block;
10
+ @include ie7-inline-block();
11
+ margin-left: 0;
12
+ margin-bottom: 0;
13
+ @include border-radius(3px);
14
+ @include box-shadow(0 1px 2px rgba(0,0,0,.05));
15
+ }
16
+ .pagination li {
17
+ display: inline;
18
+ }
19
+ .pagination a {
20
+ float: left;
21
+ padding: 0 14px;
22
+ line-height: ($baseLineHeight * 2) - 2;
23
+ text-decoration: none;
24
+ border: 1px solid #ddd;
25
+ border-left-width: 0;
26
+ }
27
+ .pagination a:hover,
28
+ .pagination .active a {
29
+ background-color: #f5f5f5;
30
+ }
31
+ .pagination .active a {
32
+ color: $grayLight;
33
+ cursor: default;
34
+ }
35
+ .pagination .disabled a,
36
+ .pagination .disabled a:hover {
37
+ color: $grayLight;
38
+ background-color: transparent;
39
+ cursor: default;
40
+ }
41
+ .pagination li:first-child a {
42
+ border-left-width: 1px;
43
+ @include border-radius(3px 0 0 3px);
44
+ }
45
+ .pagination li:last-child a {
46
+ @include border-radius(0 3px 3px 0);
47
+ }
48
+
49
+ // Centered
50
+ .pagination-centered {
51
+ text-align: center;
52
+ }
53
+ .pagination-right {
54
+ text-align: right;
55
+ }
@@ -1,1059 +1,13 @@
1
- /* Patterns.scss
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(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
- @include sans-serif-font(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 vertical-gradient(#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 vertical-gradient(#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(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
- @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 vertical-gradient(#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
- display: none;
435
- }
436
- .tab-content > .active,
437
- .pill-content > .active {
438
- display: block;
439
- }
440
-
441
-
442
- // BREADCRUMBS
443
- // -----------
444
-
445
- .breadcrumb {
446
- padding: 7px 14px;
447
- margin: 0 0 $baseline;
448
- @include vertical-gradient(#ffffff, #f5f5f5);
449
- border: 1px solid #ddd;
450
- @include border-radius(3px);
451
- @include box-shadow(inset 0 1px 0 $white);
452
- li {
453
- display: inline;
454
- text-shadow: 0 1px 0 $white;
455
- }
456
- .divider {
457
- padding: 0 5px;
458
- color: $grayLight;
459
- }
460
- .active a {
461
- color: $grayDark;
462
- }
463
- }
1
+ // Patterns.less
2
+ // Repeatable UI elements outside the base styles provided from the scaffolding
3
+ // ----------------------------------------------------------------------------
464
4
 
465
5
 
466
6
  // PAGE HEADERS
467
7
  // ------------
468
8
 
469
- .hero-unit {
470
- background-color: #f5f5f5;
471
- margin-bottom: 30px;
472
- padding: 60px;
473
- @include border-radius(6px);
474
- h1 {
475
- margin-bottom: 0;
476
- font-size: 60px;
477
- line-height: 1;
478
- letter-spacing: -1px;
479
- }
480
- p {
481
- font-size: 18px;
482
- font-weight: 200;
483
- line-height: $baseline * 1.5;
484
- }
485
- }
486
9
  footer {
487
- margin-top: $baseline - 1;
488
- padding-top: $baseline - 1;
10
+ padding-top: $baseLineHeight - 1;
11
+ margin-top: $baseLineHeight - 1;
489
12
  border-top: 1px solid #eee;
490
13
  }
491
-
492
-
493
- // PAGE HEADERS
494
- // ------------
495
-
496
- .page-header {
497
- margin-bottom: $baseline - 1;
498
- border-bottom: 1px solid #ddd;
499
- @include box-shadow(0 1px 0 rgba(255,255,255,.5));
500
- h1 {
501
- margin-bottom: ($baseline / 2) - 1px;
502
- }
503
- }
504
-
505
-
506
- // BUTTON STYLES
507
- // -------------
508
-
509
- // Shared colors for buttons and alerts
510
- .btn,
511
- .alert-message {
512
- // Set text color
513
- &.danger,
514
- &.danger:hover,
515
- &.error,
516
- &.error:hover,
517
- &.success,
518
- &.success:hover,
519
- &.info,
520
- &.info:hover {
521
- color: $white
522
- }
523
- // Sets the close button to the middle of message
524
- .close{
525
- font-family: Arial, sans-serif;
526
- line-height: 18px;
527
- }
528
- // Danger and error appear as red
529
- &.danger,
530
- &.error {
531
- @include gradientBar(#ee5f5b, #c43c35);
532
- }
533
- // Success appears as green
534
- &.success {
535
- @include gradientBar(#62c462, #57a957);
536
- }
537
- // Info appears as a neutral blue
538
- &.info {
539
- @include gradientBar(#5bc0de, #339bb9);
540
- }
541
- }
542
-
543
- // Base .btn styles
544
- .btn {
545
- // Button Base
546
- cursor: pointer;
547
- display: inline-block;
548
- @include vertical-three-colors-gradient(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
549
- padding: 5px 14px 6px;
550
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
551
- color: #333;
552
- font-size: $basefont;
553
- line-height: normal;
554
- border: 1px solid #ccc;
555
- border-bottom-color: #bbb;
556
- @include border-radius(4px);
557
- $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
558
- @include box-shadow($shadow);
559
-
560
- &:hover {
561
- background-position: 0 -15px;
562
- color: #333;
563
- text-decoration: none;
564
- }
565
-
566
- // Focus state for keyboard and accessibility
567
- &:focus {
568
- outline: 1px dotted #666;
569
- }
570
-
571
- // Primary Button Type
572
- &.primary {
573
- color: $white;
574
- @include gradientBar($blue, $blueDark)
575
- }
576
-
577
- // Transitions
578
- @include transition(.1s linear all);
579
-
580
- // Active and Disabled states
581
- &.active,
582
- &:active {
583
- $shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
584
- @include box-shadow($shadow);
585
- }
586
- &.disabled {
587
- cursor: default;
588
- background-image: none;
589
- @include reset-filter();
590
- @include opacity(65);
591
- @include box-shadow(none);
592
- }
593
- &[disabled] {
594
- // disabled pseudo can't be included with .disabled
595
- // def because IE8 and below will drop it ;_;
596
- cursor: default;
597
- background-image: none;
598
- @include reset-filter();
599
- @include opacity(65);
600
- @include box-shadow(none);
601
- }
602
-
603
- // Button Sizes
604
- &.large {
605
- font-size: $basefont + 2px;
606
- line-height: normal;
607
- padding: 9px 14px 9px;
608
- @include border-radius(6px);
609
- }
610
- &.small {
611
- padding: 7px 9px 7px;
612
- font-size: $basefont - 2px;
613
- }
614
- }
615
- // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
616
- :root .alert-message,
617
- :root .btn {
618
- border-radius: 0 \0;
619
- }
620
-
621
- // Help Firefox not be a jerk about adding extra padding to buttons
622
- button.btn,
623
- input[type=submit].btn {
624
- &::-moz-focus-inner {
625
- padding: 0;
626
- border: 0;
627
- }
628
- }
629
-
630
-
631
- // CLOSE ICONS
632
- // -----------
633
- .close {
634
- float: right;
635
- color: $black;
636
- font-size: 20px;
637
- font-weight: bold;
638
- line-height: $baseline * .75;
639
- text-shadow: 0 1px 0 rgba(255,255,255,1);
640
- @include opacity(25);
641
- &:hover {
642
- color: $black;
643
- text-decoration: none;
644
- @include opacity(40);
645
- }
646
- }
647
-
648
-
649
- // ERROR STYLES
650
- // ------------
651
-
652
- // Base alert styles
653
- .alert-message {
654
- position: relative;
655
- padding: 7px 15px;
656
- margin-bottom: $baseline;
657
- color: $grayDark;
658
- @include gradientBar(#fceec1, #eedc94); // warning by default
659
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
660
- border-width: 1px;
661
- border-style: solid;
662
- @include border-radius(4px);
663
- @include box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
664
-
665
- // Adjust close icon
666
- .close {
667
- margin-top: 1px;
668
- *margin-top: 0; // For IE7
669
- }
670
-
671
- // Make links same color as text and stand out more
672
- a {
673
- font-weight: bold;
674
- color: $grayDark;
675
- }
676
- &.danger p a,
677
- &.error p a,
678
- &.success p a,
679
- &.info p a {
680
- color: $white;
681
- }
682
-
683
- // Remove extra margin from content
684
- h5 {
685
- line-height: $baseline;
686
- }
687
- p {
688
- margin-bottom: 0;
689
- }
690
- div {
691
- margin-top: 5px;
692
- margin-bottom: 2px;
693
- line-height: 28px;
694
- }
695
- .btn {
696
- // Provide actions with buttons
697
- @include box-shadow(0 1px 0 rgba(255,255,255,.25));
698
- }
699
-
700
- &.block-message {
701
- background-image: none;
702
- background-color: lighten(#fceec1, 5%);
703
- @include reset-filter();
704
- padding: 14px;
705
- border-color: #fceec1;
706
- @include box-shadow(none);
707
- ul, p {
708
- margin-right: 30px;
709
- }
710
- ul {
711
- margin-bottom: 0;
712
- }
713
- li {
714
- color: $grayDark;
715
- }
716
- .alert-actions {
717
- margin-top: 5px;
718
- }
719
- &.error,
720
- &.success,
721
- &.info {
722
- color: $grayDark;
723
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
724
- }
725
- &.error {
726
- background-color: lighten(#f56a66, 25%);
727
- border-color: lighten(#f56a66, 20%);
728
- }
729
- &.success {
730
- background-color: lighten(#62c462, 30%);
731
- border-color: lighten(#62c462, 25%);
732
- }
733
- &.info {
734
- background-color: lighten(#6bd0ee, 25%);
735
- border-color: lighten(#6bd0ee, 20%);
736
- }
737
- // Change link color back
738
- &.danger p a,
739
- &.error p a,
740
- &.success p a,
741
- &.info p a {
742
- color: $grayDark;
743
- }
744
-
745
- }
746
- }
747
-
748
-
749
- // PAGINATION
750
- // ----------
751
-
752
- .pagination {
753
- height: $baseline * 2;
754
- margin: $baseline 0;
755
- ul {
756
- float: left;
757
- margin: 0;
758
- border: 1px solid #ddd;
759
- border: 1px solid rgba(0,0,0,.15);
760
- @include border-radius(3px);
761
- @include box-shadow(0 1px 2px rgba(0,0,0,.05));
762
- }
763
- li {
764
- display: inline;
765
- }
766
- a {
767
- float: left;
768
- padding: 0 14px;
769
- line-height: ($baseline * 2) - 2;
770
- border-right: 1px solid;
771
- border-right-color: #ddd;
772
- border-right-color: rgba(0,0,0,.15);
773
- *border-right-color: #ddd; /* IE6-7 */
774
- text-decoration: none;
775
- }
776
- a:hover,
777
- .active a {
778
- background-color: lighten($blue, 45%);
779
- }
780
- .disabled a,
781
- .disabled a:hover {
782
- background-color: transparent;
783
- color: $grayLight;
784
- }
785
- .next a {
786
- border: 0;
787
- }
788
- }
789
-
790
-
791
- // WELLS
792
- // -----
793
-
794
- .well {
795
- background-color: #f5f5f5;
796
- margin-bottom: 20px;
797
- padding: 19px;
798
- min-height: 20px;
799
- border: 1px solid #eee;
800
- border: 1px solid rgba(0,0,0,.05);
801
- @include border-radius(4px);
802
- @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
803
- blockquote {
804
- border-color: #ddd;
805
- border-color: rgba(0,0,0,.15);
806
- }
807
- }
808
-
809
-
810
- // MODALS
811
- // ------
812
-
813
- .modal-backdrop {
814
- background-color: $black;
815
- position: fixed;
816
- top: 0;
817
- left: 0;
818
- right: 0;
819
- bottom: 0;
820
- z-index: 10000;
821
- // Fade for backdrop
822
- &.fade { opacity: 0; }
823
- }
824
-
825
- .modal-backdrop,
826
- .modal-backdrop.fade.in {
827
- @include opacity(80);
828
- }
829
-
830
- .modal {
831
- position: fixed;
832
- top: 50%;
833
- left: 50%;
834
- z-index: 11000;
835
- max-height: 500px;
836
- overflow: auto;
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('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 above-popoverArrow($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 $black;
894
- }
895
- @mixin left-popoverArrow($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 $black;
902
- }
903
- @mixin below-popoverArrow($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 $black;
910
- }
911
- @mixin right-popoverArrow($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 $black;
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(80);
931
- &.fade.in {
932
- @include opacity(80);
933
- }
934
- &.above .twipsy-arrow { @include above-popoverArrow(); }
935
- &.left .twipsy-arrow { @include left-popoverArrow(); }
936
- &.below .twipsy-arrow { @include below-popoverArrow(); }
937
- &.right .twipsy-arrow { @include right-popoverArrow(); }
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 above-popoverArrow(); }
966
- &.right .arrow { @include right-popoverArrow(); }
967
- &.below .arrow { @include below-popoverArrow(); }
968
- &.left .arrow { @include left-popoverArrow(); }
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
- text-shadow: none;
1027
- &.important { background-color: #c43c35; }
1028
- &.warning { background-color: $orange; }
1029
- &.success { background-color: $green; }
1030
- &.notice { background-color: lighten($blue, 25%); }
1031
- }
1032
-
1033
-
1034
- // MEDIA GRIDS
1035
- // -----------
1036
-
1037
- .media-grid {
1038
- margin-left: -$gridGutterWidth;
1039
- margin-bottom: 0;
1040
- @include clearfix();
1041
- li {
1042
- display: inline;
1043
- }
1044
- a {
1045
- float: left;
1046
- padding: 4px;
1047
- margin: 0 0 $baseline $gridGutterWidth;
1048
- border: 1px solid #ddd;
1049
- @include border-radius(4px);
1050
- @include box-shadow(0 1px 1px rgba(0,0,0,.075));
1051
- img {
1052
- display: block;
1053
- }
1054
- &:hover {
1055
- border-color: $linkColor;
1056
- @include box-shadow(0 1px 4px rgba(0,105,214,.25));
1057
- }
1058
- }
1059
- }