sass-twitter-bootstrap 2.0.1 → 2.1.1
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
+
}
|