sass-twitter-bootstrap 2.0.1 → 2.1.1
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.
- data/lib/sass/twitter/bootstrap/version.rb +1 -1
- data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
- data/vendor/assets/images/glyphicons-halflings.png +0 -0
- data/vendor/assets/javascripts/twitter/bootstrap-affix.js +104 -0
- data/vendor/assets/javascripts/twitter/bootstrap-alert.js +28 -32
- data/vendor/assets/javascripts/twitter/bootstrap-button.js +29 -33
- data/vendor/assets/javascripts/twitter/bootstrap-carousel.js +43 -24
- data/vendor/assets/javascripts/twitter/bootstrap-collapse.js +50 -28
- data/vendor/assets/javascripts/twitter/bootstrap-dropdown.js +77 -19
- data/vendor/assets/javascripts/twitter/bootstrap-modal.js +113 -84
- data/vendor/assets/javascripts/twitter/bootstrap-popover.js +19 -11
- data/vendor/assets/javascripts/twitter/bootstrap-scrollspy.js +50 -24
- data/vendor/assets/javascripts/twitter/bootstrap-tab.js +13 -8
- data/vendor/assets/javascripts/twitter/bootstrap-tooltip.js +44 -39
- data/vendor/assets/javascripts/twitter/bootstrap-transition.js +29 -20
- data/vendor/assets/javascripts/twitter/bootstrap-typeahead.js +73 -44
- data/vendor/assets/javascripts/twitter/bootstrap.js +12 -0
- data/vendor/assets/stylesheets/tests/css-tests.css +1 -12
- data/vendor/assets/stylesheets/tests/css-tests.html +22 -125
- data/vendor/assets/stylesheets/tests/navbar.html +39 -38
- data/vendor/assets/stylesheets/twitter/_accordion.scss +8 -2
- data/vendor/assets/stylesheets/twitter/_alerts.scss +16 -21
- data/vendor/assets/stylesheets/twitter/_breadcrumbs.scss +12 -10
- data/vendor/assets/stylesheets/twitter/_button-groups.scss +137 -39
- data/vendor/assets/stylesheets/twitter/_buttons.scss +129 -81
- data/vendor/assets/stylesheets/twitter/_carousel.scss +13 -3
- data/vendor/assets/stylesheets/twitter/_close.scss +16 -3
- data/vendor/assets/stylesheets/twitter/_code.scss +11 -10
- data/vendor/assets/stylesheets/twitter/_component-animations.scss +12 -8
- data/vendor/assets/stylesheets/twitter/_dropdowns.scss +133 -53
- data/vendor/assets/stylesheets/twitter/_forms.scss +298 -170
- data/vendor/assets/stylesheets/twitter/_grid.scss +17 -4
- data/vendor/assets/stylesheets/twitter/_hero-unit.scss +7 -3
- data/vendor/assets/stylesheets/twitter/_labels-badges.scss +69 -0
- data/vendor/assets/stylesheets/twitter/_layouts.scss +2 -3
- data/vendor/assets/stylesheets/twitter/_mixins.scss +359 -258
- data/vendor/assets/stylesheets/twitter/_modals.scss +26 -12
- data/vendor/assets/stylesheets/twitter/_navbar.scss +318 -143
- data/vendor/assets/stylesheets/twitter/_navs.scss +87 -56
- data/vendor/assets/stylesheets/twitter/_pager.scss +16 -6
- data/vendor/assets/stylesheets/twitter/_pagination.scss +23 -14
- data/vendor/assets/stylesheets/twitter/_popovers.scss +101 -33
- data/vendor/assets/stylesheets/twitter/_progress-bars.scss +43 -16
- data/vendor/assets/stylesheets/twitter/_reset.scss +16 -6
- data/vendor/assets/stylesheets/twitter/_responsive-1200px-min.scss +28 -0
- data/vendor/assets/stylesheets/twitter/_responsive-767px-max.scss +174 -0
- data/vendor/assets/stylesheets/twitter/_responsive-768px-979px.scss +19 -0
- data/vendor/assets/stylesheets/twitter/_responsive-navbar.scss +177 -0
- data/vendor/assets/stylesheets/twitter/_responsive-utilities.scss +58 -0
- data/vendor/assets/stylesheets/twitter/_scaffolding.scss +32 -11
- data/vendor/assets/stylesheets/twitter/_sprites.scss +49 -14
- data/vendor/assets/stylesheets/twitter/_tables.scss +115 -42
- data/vendor/assets/stylesheets/twitter/_thumbnails.scss +23 -6
- data/vendor/assets/stylesheets/twitter/_tooltip.scss +47 -12
- data/vendor/assets/stylesheets/twitter/_type.scss +96 -93
- data/vendor/assets/stylesheets/twitter/_utilities.scss +24 -2
- data/vendor/assets/stylesheets/twitter/_variables.scss +202 -31
- data/vendor/assets/stylesheets/twitter/_wells.scss +17 -5
- data/vendor/assets/stylesheets/twitter/bootstrap.scss +3 -7
- data/vendor/assets/stylesheets/twitter/responsive.scss +15 -301
- metadata +10 -7
- data/vendor/assets/stylesheets/tests/buttons.html +0 -139
- data/vendor/assets/stylesheets/tests/forms-responsive.html +0 -71
- data/vendor/assets/stylesheets/tests/navbar-fixed-top.html +0 -104
- data/vendor/assets/stylesheets/tests/navbar-static-top.html +0 -107
- data/vendor/assets/stylesheets/twitter/_labels.scss +0 -32
@@ -1,6 +1,6 @@
|
|
1
|
-
//
|
2
|
-
//
|
3
|
-
|
1
|
+
//
|
2
|
+
// Navs
|
3
|
+
// --------------------------------------------------
|
4
4
|
|
5
5
|
|
6
6
|
// BASE CLASS
|
@@ -21,8 +21,13 @@
|
|
21
21
|
background-color: $grayLighter;
|
22
22
|
}
|
23
23
|
|
24
|
+
// Redeclare pull classes because of specifity
|
25
|
+
.nav > .pull-right {
|
26
|
+
float: right;
|
27
|
+
}
|
28
|
+
|
24
29
|
// Nav headers (for dropdowns and lists)
|
25
|
-
.nav
|
30
|
+
.nav-header {
|
26
31
|
display: block;
|
27
32
|
padding: 3px 15px;
|
28
33
|
font-size: 11px;
|
@@ -38,12 +43,13 @@
|
|
38
43
|
}
|
39
44
|
|
40
45
|
|
46
|
+
|
41
47
|
// NAV LIST
|
42
48
|
// --------
|
43
49
|
|
44
50
|
.nav-list {
|
45
|
-
padding-left:
|
46
|
-
padding-right:
|
51
|
+
padding-left: 15px;
|
52
|
+
padding-right: 15px;
|
47
53
|
margin-bottom: 0;
|
48
54
|
}
|
49
55
|
.nav-list > li > a,
|
@@ -55,8 +61,8 @@
|
|
55
61
|
.nav-list > li > a {
|
56
62
|
padding: 3px 15px;
|
57
63
|
}
|
58
|
-
.nav-list .active > a,
|
59
|
-
.nav-list .active > a:hover {
|
64
|
+
.nav-list > .active > a,
|
65
|
+
.nav-list > .active > a:hover {
|
60
66
|
color: $white;
|
61
67
|
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
|
62
68
|
background-color: $linkColor;
|
@@ -64,6 +70,10 @@
|
|
64
70
|
.nav-list [class^="icon-"] {
|
65
71
|
margin-right: 2px;
|
66
72
|
}
|
73
|
+
// Dividers (basically an hr) within the dropdown
|
74
|
+
.nav-list .divider {
|
75
|
+
@include nav-divider();
|
76
|
+
}
|
67
77
|
|
68
78
|
|
69
79
|
|
@@ -94,16 +104,15 @@
|
|
94
104
|
.nav-tabs {
|
95
105
|
border-bottom: 1px solid #ddd;
|
96
106
|
}
|
97
|
-
|
98
107
|
// Make the list-items overlay the bottom border
|
99
108
|
.nav-tabs > li {
|
100
109
|
margin-bottom: -1px;
|
101
110
|
}
|
102
|
-
|
103
111
|
// Actual tabs (as links)
|
104
112
|
.nav-tabs > li > a {
|
105
|
-
padding-top:
|
106
|
-
padding-bottom:
|
113
|
+
padding-top: 8px;
|
114
|
+
padding-bottom: 8px;
|
115
|
+
line-height: $baseLineHeight;
|
107
116
|
border: 1px solid transparent;
|
108
117
|
@include border-radius(4px 4px 0 0);
|
109
118
|
&:hover {
|
@@ -120,6 +129,7 @@
|
|
120
129
|
cursor: default;
|
121
130
|
}
|
122
131
|
|
132
|
+
|
123
133
|
// PILLS
|
124
134
|
// -----
|
125
135
|
|
@@ -133,8 +143,8 @@
|
|
133
143
|
}
|
134
144
|
|
135
145
|
// Active state
|
136
|
-
.nav-pills .active > a,
|
137
|
-
.nav-pills .active > a:hover {
|
146
|
+
.nav-pills > .active > a,
|
147
|
+
.nav-pills > .active > a:hover {
|
138
148
|
color: $white;
|
139
149
|
background-color: $linkColor;
|
140
150
|
}
|
@@ -161,10 +171,10 @@
|
|
161
171
|
@include border-radius(0);
|
162
172
|
}
|
163
173
|
.nav-tabs.nav-stacked > li:first-child > a {
|
164
|
-
@include border-radius(4px
|
174
|
+
@include border-top-radius(4px);
|
165
175
|
}
|
166
176
|
.nav-tabs.nav-stacked > li:last-child > a {
|
167
|
-
@include border-radius(
|
177
|
+
@include border-bottom-radius(4px);
|
168
178
|
}
|
169
179
|
.nav-tabs.nav-stacked > li > a:hover {
|
170
180
|
border-color: #ddd;
|
@@ -184,40 +194,44 @@
|
|
184
194
|
// DROPDOWNS
|
185
195
|
// ---------
|
186
196
|
|
187
|
-
|
188
|
-
|
189
|
-
.nav-pills .dropdown-menu {
|
190
|
-
margin-top: 1px;
|
191
|
-
border-width: 1px;
|
197
|
+
.nav-tabs .dropdown-menu {
|
198
|
+
@include border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu
|
192
199
|
}
|
193
200
|
.nav-pills .dropdown-menu {
|
194
|
-
@include border-radius(
|
201
|
+
@include border-radius(6px); // make rounded corners match the pills
|
195
202
|
}
|
196
203
|
|
197
204
|
// Default dropdown links
|
198
205
|
// -------------------------
|
199
206
|
// Make carets use linkColor to start
|
200
|
-
.nav
|
201
|
-
.nav-pills .dropdown-toggle .caret {
|
207
|
+
.nav .dropdown-toggle .caret {
|
202
208
|
border-top-color: $linkColor;
|
209
|
+
border-bottom-color: $linkColor;
|
203
210
|
margin-top: 6px;
|
204
211
|
}
|
205
|
-
.nav
|
206
|
-
.nav-pills .dropdown-toggle:hover .caret {
|
212
|
+
.nav .dropdown-toggle:hover .caret {
|
207
213
|
border-top-color: $linkColorHover;
|
214
|
+
border-bottom-color: $linkColorHover;
|
215
|
+
}
|
216
|
+
/* move down carets for tabs */
|
217
|
+
.nav-tabs .dropdown-toggle .caret {
|
218
|
+
margin-top: 8px;
|
208
219
|
}
|
209
220
|
|
210
221
|
// Active dropdown links
|
211
222
|
// -------------------------
|
212
|
-
.nav
|
213
|
-
.nav-pills .active .dropdown-toggle .caret {
|
223
|
+
.nav .active .dropdown-toggle .caret {
|
214
224
|
border-top-color: $grayDark;
|
225
|
+
border-bottom-color: $grayDark;
|
226
|
+
}
|
227
|
+
.nav-tabs .active .dropdown-toggle .caret {
|
228
|
+
border-top-color: $gray;
|
229
|
+
border-bottom-color: $gray;
|
215
230
|
}
|
216
231
|
|
217
232
|
// Active:hover dropdown links
|
218
233
|
// -------------------------
|
219
234
|
.nav > .dropdown.active > a:hover {
|
220
|
-
color: $black;
|
221
235
|
cursor: pointer;
|
222
236
|
}
|
223
237
|
|
@@ -225,15 +239,16 @@
|
|
225
239
|
// -------------------------
|
226
240
|
.nav-tabs .open .dropdown-toggle,
|
227
241
|
.nav-pills .open .dropdown-toggle,
|
228
|
-
.nav > .open.active > a:hover {
|
242
|
+
.nav > li.dropdown.open.active > a:hover {
|
229
243
|
color: $white;
|
230
244
|
background-color: $grayLight;
|
231
245
|
border-color: $grayLight;
|
232
246
|
}
|
233
|
-
.nav .open .caret,
|
234
|
-
.nav .open.active .caret,
|
235
|
-
.nav .open a:hover .caret {
|
247
|
+
.nav li.dropdown.open .caret,
|
248
|
+
.nav li.dropdown.open.active .caret,
|
249
|
+
.nav li.dropdown.open a:hover .caret {
|
236
250
|
border-top-color: $white;
|
251
|
+
border-bottom-color: $white;
|
237
252
|
@include opacity(100);
|
238
253
|
}
|
239
254
|
|
@@ -256,13 +271,13 @@
|
|
256
271
|
@include clearfix();
|
257
272
|
}
|
258
273
|
.tab-content {
|
259
|
-
overflow:
|
274
|
+
overflow: auto; // prevent content from running below tabs
|
260
275
|
}
|
261
276
|
|
262
277
|
// Remove border on bottom, left, right
|
263
|
-
.tabs-below .nav-tabs,
|
264
|
-
.tabs-right .nav-tabs,
|
265
|
-
.tabs-left .nav-tabs {
|
278
|
+
.tabs-below > .nav-tabs,
|
279
|
+
.tabs-right > .nav-tabs,
|
280
|
+
.tabs-left > .nav-tabs {
|
266
281
|
border-bottom: 0;
|
267
282
|
}
|
268
283
|
|
@@ -280,22 +295,22 @@
|
|
280
295
|
// BOTTOM
|
281
296
|
// ------
|
282
297
|
|
283
|
-
.tabs-below .nav-tabs {
|
298
|
+
.tabs-below > .nav-tabs {
|
284
299
|
border-top: 1px solid #ddd;
|
285
300
|
}
|
286
|
-
.tabs-below .nav-tabs > li {
|
301
|
+
.tabs-below > .nav-tabs > li {
|
287
302
|
margin-top: -1px;
|
288
303
|
margin-bottom: 0;
|
289
304
|
}
|
290
|
-
.tabs-below .nav-tabs > li > a {
|
305
|
+
.tabs-below > .nav-tabs > li > a {
|
291
306
|
@include border-radius(0 0 4px 4px);
|
292
307
|
&:hover {
|
293
308
|
border-bottom-color: transparent;
|
294
309
|
border-top-color: #ddd;
|
295
310
|
}
|
296
311
|
}
|
297
|
-
.tabs-below .nav-tabs .active > a,
|
298
|
-
.tabs-below .nav-tabs .active > a:hover {
|
312
|
+
.tabs-below > .nav-tabs > .active > a,
|
313
|
+
.tabs-below > .nav-tabs > .active > a:hover {
|
299
314
|
border-color: transparent #ddd #ddd #ddd;
|
300
315
|
}
|
301
316
|
|
@@ -303,51 +318,67 @@
|
|
303
318
|
// ------------
|
304
319
|
|
305
320
|
// Common styles
|
306
|
-
.tabs-left .nav-tabs > li,
|
307
|
-
.tabs-right .nav-tabs > li {
|
321
|
+
.tabs-left > .nav-tabs > li,
|
322
|
+
.tabs-right > .nav-tabs > li {
|
308
323
|
float: none;
|
309
324
|
}
|
310
|
-
.tabs-left .nav-tabs > li > a,
|
311
|
-
.tabs-right .nav-tabs > li > a {
|
325
|
+
.tabs-left > .nav-tabs > li > a,
|
326
|
+
.tabs-right > .nav-tabs > li > a {
|
312
327
|
min-width: 74px;
|
313
328
|
margin-right: 0;
|
314
329
|
margin-bottom: 3px;
|
315
330
|
}
|
316
331
|
|
317
332
|
// Tabs on the left
|
318
|
-
.tabs-left .nav-tabs {
|
333
|
+
.tabs-left > .nav-tabs {
|
319
334
|
float: left;
|
320
335
|
margin-right: 19px;
|
321
336
|
border-right: 1px solid #ddd;
|
322
337
|
}
|
323
|
-
.tabs-left .nav-tabs > li > a {
|
338
|
+
.tabs-left > .nav-tabs > li > a {
|
324
339
|
margin-right: -1px;
|
325
340
|
@include border-radius(4px 0 0 4px);
|
326
341
|
}
|
327
|
-
.tabs-left .nav-tabs > li > a:hover {
|
342
|
+
.tabs-left > .nav-tabs > li > a:hover {
|
328
343
|
border-color: $grayLighter #ddd $grayLighter $grayLighter;
|
329
344
|
}
|
330
|
-
.tabs-left .nav-tabs .active > a,
|
331
|
-
.tabs-left .nav-tabs .active > a:hover {
|
345
|
+
.tabs-left > .nav-tabs .active > a,
|
346
|
+
.tabs-left > .nav-tabs .active > a:hover {
|
332
347
|
border-color: #ddd transparent #ddd #ddd;
|
333
348
|
*border-right-color: $white;
|
334
349
|
}
|
335
350
|
|
336
351
|
// Tabs on the right
|
337
|
-
.tabs-right .nav-tabs {
|
352
|
+
.tabs-right > .nav-tabs {
|
338
353
|
float: right;
|
339
354
|
margin-left: 19px;
|
340
355
|
border-left: 1px solid #ddd;
|
341
356
|
}
|
342
|
-
.tabs-right .nav-tabs > li > a {
|
357
|
+
.tabs-right > .nav-tabs > li > a {
|
343
358
|
margin-left: -1px;
|
344
359
|
@include border-radius(0 4px 4px 0);
|
345
360
|
}
|
346
|
-
.tabs-right .nav-tabs > li > a:hover {
|
361
|
+
.tabs-right > .nav-tabs > li > a:hover {
|
347
362
|
border-color: $grayLighter $grayLighter $grayLighter #ddd;
|
348
363
|
}
|
349
|
-
.tabs-right .nav-tabs .active > a,
|
350
|
-
.tabs-right .nav-tabs .active > a:hover {
|
364
|
+
.tabs-right > .nav-tabs .active > a,
|
365
|
+
.tabs-right > .nav-tabs .active > a:hover {
|
351
366
|
border-color: #ddd #ddd #ddd transparent;
|
352
367
|
*border-left-color: $white;
|
353
368
|
}
|
369
|
+
|
370
|
+
|
371
|
+
|
372
|
+
// DISABLED STATES
|
373
|
+
// ---------------
|
374
|
+
|
375
|
+
// Gray out text
|
376
|
+
.nav > .disabled > a {
|
377
|
+
color: $grayLight;
|
378
|
+
}
|
379
|
+
// Nuke hover effects
|
380
|
+
.nav > .disabled > a:hover {
|
381
|
+
text-decoration: none;
|
382
|
+
background-color: transparent;
|
383
|
+
cursor: default;
|
384
|
+
}
|
@@ -1,9 +1,10 @@
|
|
1
|
-
//
|
2
|
-
//
|
1
|
+
//
|
2
|
+
// Pager pagination
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
3
5
|
|
4
6
|
.pager {
|
5
|
-
margin
|
6
|
-
margin-bottom: $baseLineHeight;
|
7
|
+
margin: $baseLineHeight 0;
|
7
8
|
list-style: none;
|
8
9
|
text-align: center;
|
9
10
|
@include clearfix();
|
@@ -11,7 +12,8 @@
|
|
11
12
|
.pager li {
|
12
13
|
display: inline;
|
13
14
|
}
|
14
|
-
.pager a
|
15
|
+
.pager a,
|
16
|
+
.pager span {
|
15
17
|
display: inline-block;
|
16
18
|
padding: 5px 14px;
|
17
19
|
background-color: #fff;
|
@@ -22,9 +24,17 @@
|
|
22
24
|
text-decoration: none;
|
23
25
|
background-color: #f5f5f5;
|
24
26
|
}
|
25
|
-
.pager .next a
|
27
|
+
.pager .next a,
|
28
|
+
.pager .next span {
|
26
29
|
float: right;
|
27
30
|
}
|
28
31
|
.pager .previous a {
|
29
32
|
float: left;
|
30
33
|
}
|
34
|
+
.pager .disabled a,
|
35
|
+
.pager .disabled a:hover,
|
36
|
+
.pager .disabled span {
|
37
|
+
color: $grayLight;
|
38
|
+
background-color: #fff;
|
39
|
+
cursor: default;
|
40
|
+
}
|
@@ -1,5 +1,7 @@
|
|
1
|
-
//
|
2
|
-
//
|
1
|
+
//
|
2
|
+
// Pagination (multiple pages)
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
3
5
|
|
4
6
|
.pagination {
|
5
7
|
height: $baseLineHeight * 2;
|
@@ -13,36 +15,43 @@
|
|
13
15
|
@include border-radius(3px);
|
14
16
|
@include box-shadow(0 1px 2px rgba(0,0,0,.05));
|
15
17
|
}
|
16
|
-
.pagination li {
|
17
|
-
|
18
|
-
|
19
|
-
.pagination a
|
18
|
+
.pagination ul > li {
|
19
|
+
display: inline;
|
20
|
+
}
|
21
|
+
.pagination ul > li > a,
|
22
|
+
.pagination ul > li > span {
|
20
23
|
float: left;
|
21
24
|
padding: 0 14px;
|
22
25
|
line-height: ($baseLineHeight * 2) - 2;
|
23
26
|
text-decoration: none;
|
24
|
-
|
27
|
+
background-color: $paginationBackground;
|
28
|
+
border: 1px solid $paginationBorder;
|
25
29
|
border-left-width: 0;
|
26
30
|
}
|
27
|
-
.pagination a:hover,
|
28
|
-
.pagination .active a
|
31
|
+
.pagination ul > li > a:hover,
|
32
|
+
.pagination ul > .active > a,
|
33
|
+
.pagination ul > .active > span {
|
29
34
|
background-color: #f5f5f5;
|
30
35
|
}
|
31
|
-
.pagination .active a
|
36
|
+
.pagination ul > .active > a,
|
37
|
+
.pagination ul > .active > span {
|
32
38
|
color: $grayLight;
|
33
39
|
cursor: default;
|
34
40
|
}
|
35
|
-
.pagination .disabled
|
36
|
-
.pagination .disabled a
|
41
|
+
.pagination ul > .disabled > span,
|
42
|
+
.pagination ul > .disabled > a,
|
43
|
+
.pagination ul > .disabled > a:hover {
|
37
44
|
color: $grayLight;
|
38
45
|
background-color: transparent;
|
39
46
|
cursor: default;
|
40
47
|
}
|
41
|
-
.pagination li:first-child a
|
48
|
+
.pagination ul > li:first-child > a,
|
49
|
+
.pagination ul > li:first-child > span {
|
42
50
|
border-left-width: 1px;
|
43
51
|
@include border-radius(3px 0 0 3px);
|
44
52
|
}
|
45
|
-
.pagination li:last-child a
|
53
|
+
.pagination ul > li:last-child > a,
|
54
|
+
.pagination ul > li:last-child > span {
|
46
55
|
@include border-radius(0 3px 3px 0);
|
47
56
|
}
|
48
57
|
|
@@ -1,5 +1,7 @@
|
|
1
|
-
//
|
2
|
-
//
|
1
|
+
//
|
2
|
+
// Popovers
|
3
|
+
// --------------------------------------------------
|
4
|
+
|
3
5
|
|
4
6
|
.popover {
|
5
7
|
position: absolute;
|
@@ -7,43 +9,109 @@
|
|
7
9
|
left: 0;
|
8
10
|
z-index: $zindexPopover;
|
9
11
|
display: none;
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
&.left .arrow { @include popoverArrow-left(); }
|
19
|
-
.arrow {
|
20
|
-
position: absolute;
|
21
|
-
width: 0;
|
22
|
-
height: 0;
|
23
|
-
}
|
24
|
-
}
|
25
|
-
.popover-inner {
|
26
|
-
padding: 3px;
|
27
|
-
width: 280px;
|
28
|
-
overflow: hidden;
|
29
|
-
background: $black; // has to be full background declaration for IE fallback
|
30
|
-
background: rgba(0,0,0,.8);
|
12
|
+
width: 236px;
|
13
|
+
padding: 1px;
|
14
|
+
background-color: $popoverBackground;
|
15
|
+
-webkit-background-clip: padding-box;
|
16
|
+
-moz-background-clip: padding;
|
17
|
+
background-clip: padding-box;
|
18
|
+
border: 1px solid #ccc;
|
19
|
+
border: 1px solid rgba(0,0,0,.2);
|
31
20
|
@include border-radius(6px);
|
32
|
-
@include box-shadow(0
|
21
|
+
@include box-shadow(0 5px 10px rgba(0,0,0,.2));
|
22
|
+
|
23
|
+
// Offset the popover to account for the popover arrow
|
24
|
+
&.top { margin-bottom: 10px; }
|
25
|
+
&.right { margin-left: 10px; }
|
26
|
+
&.bottom { margin-top: 10px; }
|
27
|
+
&.left { margin-right: 10px; }
|
28
|
+
|
33
29
|
}
|
30
|
+
|
34
31
|
.popover-title {
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
32
|
+
margin: 0; // reset heading margin
|
33
|
+
padding: 8px 14px;
|
34
|
+
font-size: 14px;
|
35
|
+
font-weight: normal;
|
36
|
+
line-height: 18px;
|
37
|
+
background-color: $popoverTitleBackground;
|
38
|
+
border-bottom: 1px solid darken($popoverTitleBackground, 5%);
|
39
|
+
@include border-radius(5px 5px 0 0);
|
40
40
|
}
|
41
|
+
|
41
42
|
.popover-content {
|
42
|
-
padding: 14px;
|
43
|
-
background-color: $white;
|
44
|
-
@include border-radius(0 0 3px 3px);
|
45
|
-
@include background-clip(padding-box);
|
43
|
+
padding: 9px 14px;
|
46
44
|
p, ul, ol {
|
47
45
|
margin-bottom: 0;
|
48
46
|
}
|
49
47
|
}
|
48
|
+
|
49
|
+
// Arrows
|
50
|
+
.popover .arrow,
|
51
|
+
.popover .arrow:after {
|
52
|
+
position: absolute;
|
53
|
+
display: inline-block;
|
54
|
+
width: 0;
|
55
|
+
height: 0;
|
56
|
+
border-color: transparent;
|
57
|
+
border-style: solid;
|
58
|
+
}
|
59
|
+
.popover .arrow:after {
|
60
|
+
content: "";
|
61
|
+
z-index: -1;
|
62
|
+
}
|
63
|
+
|
64
|
+
.popover {
|
65
|
+
&.top .arrow {
|
66
|
+
bottom: -$popoverArrowWidth;
|
67
|
+
left: 50%;
|
68
|
+
margin-left: -$popoverArrowWidth;
|
69
|
+
border-width: $popoverArrowWidth $popoverArrowWidth 0;
|
70
|
+
border-top-color: $popoverArrowColor;
|
71
|
+
&:after {
|
72
|
+
border-width: $popoverArrowOuterWidth $popoverArrowOuterWidth 0;
|
73
|
+
border-top-color: $popoverArrowOuterColor;
|
74
|
+
bottom: -1px;
|
75
|
+
left: -$popoverArrowOuterWidth;
|
76
|
+
}
|
77
|
+
}
|
78
|
+
&.right .arrow {
|
79
|
+
top: 50%;
|
80
|
+
left: -$popoverArrowWidth;
|
81
|
+
margin-top: -$popoverArrowWidth;
|
82
|
+
border-width: $popoverArrowWidth $popoverArrowWidth $popoverArrowWidth 0;
|
83
|
+
border-right-color: $popoverArrowColor;
|
84
|
+
&:after {
|
85
|
+
border-width: $popoverArrowOuterWidth $popoverArrowOuterWidth $popoverArrowOuterWidth 0;
|
86
|
+
border-right-color: $popoverArrowOuterColor;
|
87
|
+
bottom: -$popoverArrowOuterWidth;
|
88
|
+
left: -1px;
|
89
|
+
}
|
90
|
+
}
|
91
|
+
&.bottom .arrow {
|
92
|
+
top: -$popoverArrowWidth;
|
93
|
+
left: 50%;
|
94
|
+
margin-left: -$popoverArrowWidth;
|
95
|
+
border-width: 0 $popoverArrowWidth $popoverArrowWidth;
|
96
|
+
border-bottom-color: $popoverArrowColor;
|
97
|
+
&:after {
|
98
|
+
border-width: 0 $popoverArrowOuterWidth $popoverArrowOuterWidth;
|
99
|
+
border-bottom-color: $popoverArrowOuterColor;
|
100
|
+
top: -1px;
|
101
|
+
left: -$popoverArrowOuterWidth;
|
102
|
+
}
|
103
|
+
}
|
104
|
+
&.left .arrow {
|
105
|
+
top: 50%;
|
106
|
+
right: -$popoverArrowWidth;
|
107
|
+
margin-top: -$popoverArrowWidth;
|
108
|
+
border-width: $popoverArrowWidth 0 $popoverArrowWidth $popoverArrowWidth;
|
109
|
+
border-left-color: $popoverArrowColor;
|
110
|
+
&:after {
|
111
|
+
border-width: $popoverArrowOuterWidth 0 $popoverArrowOuterWidth $popoverArrowOuterWidth;
|
112
|
+
border-left-color: $popoverArrowOuterColor;
|
113
|
+
bottom: -$popoverArrowOuterWidth;
|
114
|
+
right: -1px;
|
115
|
+
}
|
116
|
+
}
|
117
|
+
}
|