bootstrap-sass 1.4.4 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.


This version of bootstrap-sass might be problematic. Click here for more details.

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