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.
Files changed (66) hide show
  1. data/lib/sass/twitter/bootstrap/version.rb +1 -1
  2. data/vendor/assets/images/glyphicons-halflings-white.png +0 -0
  3. data/vendor/assets/images/glyphicons-halflings.png +0 -0
  4. data/vendor/assets/javascripts/twitter/bootstrap-affix.js +104 -0
  5. data/vendor/assets/javascripts/twitter/bootstrap-alert.js +28 -32
  6. data/vendor/assets/javascripts/twitter/bootstrap-button.js +29 -33
  7. data/vendor/assets/javascripts/twitter/bootstrap-carousel.js +43 -24
  8. data/vendor/assets/javascripts/twitter/bootstrap-collapse.js +50 -28
  9. data/vendor/assets/javascripts/twitter/bootstrap-dropdown.js +77 -19
  10. data/vendor/assets/javascripts/twitter/bootstrap-modal.js +113 -84
  11. data/vendor/assets/javascripts/twitter/bootstrap-popover.js +19 -11
  12. data/vendor/assets/javascripts/twitter/bootstrap-scrollspy.js +50 -24
  13. data/vendor/assets/javascripts/twitter/bootstrap-tab.js +13 -8
  14. data/vendor/assets/javascripts/twitter/bootstrap-tooltip.js +44 -39
  15. data/vendor/assets/javascripts/twitter/bootstrap-transition.js +29 -20
  16. data/vendor/assets/javascripts/twitter/bootstrap-typeahead.js +73 -44
  17. data/vendor/assets/javascripts/twitter/bootstrap.js +12 -0
  18. data/vendor/assets/stylesheets/tests/css-tests.css +1 -12
  19. data/vendor/assets/stylesheets/tests/css-tests.html +22 -125
  20. data/vendor/assets/stylesheets/tests/navbar.html +39 -38
  21. data/vendor/assets/stylesheets/twitter/_accordion.scss +8 -2
  22. data/vendor/assets/stylesheets/twitter/_alerts.scss +16 -21
  23. data/vendor/assets/stylesheets/twitter/_breadcrumbs.scss +12 -10
  24. data/vendor/assets/stylesheets/twitter/_button-groups.scss +137 -39
  25. data/vendor/assets/stylesheets/twitter/_buttons.scss +129 -81
  26. data/vendor/assets/stylesheets/twitter/_carousel.scss +13 -3
  27. data/vendor/assets/stylesheets/twitter/_close.scss +16 -3
  28. data/vendor/assets/stylesheets/twitter/_code.scss +11 -10
  29. data/vendor/assets/stylesheets/twitter/_component-animations.scss +12 -8
  30. data/vendor/assets/stylesheets/twitter/_dropdowns.scss +133 -53
  31. data/vendor/assets/stylesheets/twitter/_forms.scss +298 -170
  32. data/vendor/assets/stylesheets/twitter/_grid.scss +17 -4
  33. data/vendor/assets/stylesheets/twitter/_hero-unit.scss +7 -3
  34. data/vendor/assets/stylesheets/twitter/_labels-badges.scss +69 -0
  35. data/vendor/assets/stylesheets/twitter/_layouts.scss +2 -3
  36. data/vendor/assets/stylesheets/twitter/_mixins.scss +359 -258
  37. data/vendor/assets/stylesheets/twitter/_modals.scss +26 -12
  38. data/vendor/assets/stylesheets/twitter/_navbar.scss +318 -143
  39. data/vendor/assets/stylesheets/twitter/_navs.scss +87 -56
  40. data/vendor/assets/stylesheets/twitter/_pager.scss +16 -6
  41. data/vendor/assets/stylesheets/twitter/_pagination.scss +23 -14
  42. data/vendor/assets/stylesheets/twitter/_popovers.scss +101 -33
  43. data/vendor/assets/stylesheets/twitter/_progress-bars.scss +43 -16
  44. data/vendor/assets/stylesheets/twitter/_reset.scss +16 -6
  45. data/vendor/assets/stylesheets/twitter/_responsive-1200px-min.scss +28 -0
  46. data/vendor/assets/stylesheets/twitter/_responsive-767px-max.scss +174 -0
  47. data/vendor/assets/stylesheets/twitter/_responsive-768px-979px.scss +19 -0
  48. data/vendor/assets/stylesheets/twitter/_responsive-navbar.scss +177 -0
  49. data/vendor/assets/stylesheets/twitter/_responsive-utilities.scss +58 -0
  50. data/vendor/assets/stylesheets/twitter/_scaffolding.scss +32 -11
  51. data/vendor/assets/stylesheets/twitter/_sprites.scss +49 -14
  52. data/vendor/assets/stylesheets/twitter/_tables.scss +115 -42
  53. data/vendor/assets/stylesheets/twitter/_thumbnails.scss +23 -6
  54. data/vendor/assets/stylesheets/twitter/_tooltip.scss +47 -12
  55. data/vendor/assets/stylesheets/twitter/_type.scss +96 -93
  56. data/vendor/assets/stylesheets/twitter/_utilities.scss +24 -2
  57. data/vendor/assets/stylesheets/twitter/_variables.scss +202 -31
  58. data/vendor/assets/stylesheets/twitter/_wells.scss +17 -5
  59. data/vendor/assets/stylesheets/twitter/bootstrap.scss +3 -7
  60. data/vendor/assets/stylesheets/twitter/responsive.scss +15 -301
  61. metadata +10 -7
  62. data/vendor/assets/stylesheets/tests/buttons.html +0 -139
  63. data/vendor/assets/stylesheets/tests/forms-responsive.html +0 -71
  64. data/vendor/assets/stylesheets/tests/navbar-fixed-top.html +0 -104
  65. data/vendor/assets/stylesheets/tests/navbar-static-top.html +0 -107
  66. data/vendor/assets/stylesheets/twitter/_labels.scss +0 -32
@@ -1,6 +1,6 @@
1
- // NAVIGATIONS
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 .nav-header {
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: 14px;
46
- padding-right: 14px;
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: 9px;
106
- padding-bottom: 9px;
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 4px 0 0);
174
+ @include border-top-radius(4px);
165
175
  }
166
176
  .nav-tabs.nav-stacked > li:last-child > a {
167
- @include border-radius(0 0 4px 4px);
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
- // Position the menu
188
- .nav-tabs .dropdown-menu,
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(4px);
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-tabs .dropdown-toggle .caret,
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-tabs .dropdown-toggle:hover .caret,
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-tabs .active .dropdown-toggle .caret,
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: hidden; // prevent content from running below tabs
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
- // PAGER
2
- // -----
1
+ //
2
+ // Pager pagination
3
+ // --------------------------------------------------
4
+
3
5
 
4
6
  .pager {
5
- margin-left: 0;
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
- // PAGINATION
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
- display: inline;
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
- border: 1px solid #ddd;
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 a,
36
- .pagination .disabled a:hover {
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
- // POPOVERS
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
- padding: 5px;
11
- &.top { margin-top: -5px; }
12
- &.right { margin-left: 5px; }
13
- &.bottom { margin-top: 5px; }
14
- &.left { margin-left: -5px; }
15
- &.top .arrow { @include popoverArrow-top(); }
16
- &.right .arrow { @include popoverArrow-right(); }
17
- &.bottom .arrow { @include popoverArrow-bottom(); }
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 3px 7px rgba(0,0,0,0.3));
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
- padding: 9px 15px;
36
- line-height: 1;
37
- background-color: #f5f5f5;
38
- border-bottom:1px solid #eee;
39
- @include border-radius(3px 3px 0 0);
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
+ }