compass_twitter_bootstrap 0.1.7 → 0.1.8

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