bootstrap-sass 1.4.4 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.

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
-