flipper-ui 0.17.2 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (147) hide show
  1. checksums.yaml +4 -4
  2. data/docs/ui/README.md +15 -5
  3. data/examples/ui/basic.ru +19 -0
  4. data/flipper-ui.gemspec +1 -2
  5. data/lib/flipper/ui.rb +0 -3
  6. data/lib/flipper/ui/action.rb +2 -1
  7. data/lib/flipper/ui/actions/feature.rb +5 -2
  8. data/lib/flipper/ui/actions/features.rb +1 -0
  9. data/lib/flipper/ui/actions/file.rb +1 -1
  10. data/lib/flipper/ui/assets/javascripts/application.coffee +5 -3
  11. data/lib/flipper/ui/configuration.rb +14 -10
  12. data/lib/flipper/ui/decorators/feature.rb +39 -13
  13. data/lib/flipper/ui/public/css/application.css +20 -6493
  14. data/lib/flipper/ui/public/js/application.js +5 -5
  15. data/lib/flipper/ui/util.rb +40 -0
  16. data/lib/flipper/ui/views/add_actor.erb +1 -1
  17. data/lib/flipper/ui/views/add_feature.erb +1 -1
  18. data/lib/flipper/ui/views/add_group.erb +1 -1
  19. data/lib/flipper/ui/views/feature.erb +198 -179
  20. data/lib/flipper/ui/views/features.erb +42 -36
  21. data/lib/flipper/ui/views/layout.erb +4 -14
  22. data/lib/flipper/version.rb +1 -1
  23. data/spec/flipper/ui/actions/actors_gate_spec.rb +0 -4
  24. data/spec/flipper/ui/actions/feature_spec.rb +14 -16
  25. data/spec/flipper/ui/actions/features_spec.rb +1 -5
  26. data/spec/flipper/ui/actions/file_spec.rb +0 -10
  27. data/spec/flipper/ui/actions/groups_gate_spec.rb +0 -6
  28. data/spec/flipper/ui/actions/percentage_of_actors_gate_spec.rb +0 -2
  29. data/spec/flipper/ui/actions/percentage_of_time_gate_spec.rb +0 -2
  30. data/spec/flipper/ui/configuration_spec.rb +21 -34
  31. data/spec/flipper/ui/decorators/feature_spec.rb +0 -30
  32. metadata +5 -121
  33. data/lib/flipper/ui/assets/stylesheets/.DS_Store +0 -0
  34. data/lib/flipper/ui/assets/stylesheets/application.scss +0 -19
  35. data/lib/flipper/ui/assets/stylesheets/bootstrap/_alert.scss +0 -51
  36. data/lib/flipper/ui/assets/stylesheets/bootstrap/_badge.scss +0 -47
  37. data/lib/flipper/ui/assets/stylesheets/bootstrap/_breadcrumb.scss +0 -38
  38. data/lib/flipper/ui/assets/stylesheets/bootstrap/_button-group.scss +0 -166
  39. data/lib/flipper/ui/assets/stylesheets/bootstrap/_buttons.scss +0 -143
  40. data/lib/flipper/ui/assets/stylesheets/bootstrap/_card.scss +0 -270
  41. data/lib/flipper/ui/assets/stylesheets/bootstrap/_carousel.scss +0 -191
  42. data/lib/flipper/ui/assets/stylesheets/bootstrap/_close.scss +0 -34
  43. data/lib/flipper/ui/assets/stylesheets/bootstrap/_code.scss +0 -56
  44. data/lib/flipper/ui/assets/stylesheets/bootstrap/_custom-forms.scss +0 -297
  45. data/lib/flipper/ui/assets/stylesheets/bootstrap/_dropdown.scss +0 -131
  46. data/lib/flipper/ui/assets/stylesheets/bootstrap/_forms.scss +0 -333
  47. data/lib/flipper/ui/assets/stylesheets/bootstrap/_functions.scss +0 -86
  48. data/lib/flipper/ui/assets/stylesheets/bootstrap/_grid.scss +0 -52
  49. data/lib/flipper/ui/assets/stylesheets/bootstrap/_images.scss +0 -42
  50. data/lib/flipper/ui/assets/stylesheets/bootstrap/_input-group.scss +0 -159
  51. data/lib/flipper/ui/assets/stylesheets/bootstrap/_jumbotron.scss +0 -16
  52. data/lib/flipper/ui/assets/stylesheets/bootstrap/_list-group.scss +0 -115
  53. data/lib/flipper/ui/assets/stylesheets/bootstrap/_media.scss +0 -8
  54. data/lib/flipper/ui/assets/stylesheets/bootstrap/_mixins.scss +0 -42
  55. data/lib/flipper/ui/assets/stylesheets/bootstrap/_modal.scss +0 -168
  56. data/lib/flipper/ui/assets/stylesheets/bootstrap/_nav.scss +0 -118
  57. data/lib/flipper/ui/assets/stylesheets/bootstrap/_navbar.scss +0 -311
  58. data/lib/flipper/ui/assets/stylesheets/bootstrap/_pagination.scss +0 -77
  59. data/lib/flipper/ui/assets/stylesheets/bootstrap/_popover.scss +0 -183
  60. data/lib/flipper/ui/assets/stylesheets/bootstrap/_print.scss +0 -124
  61. data/lib/flipper/ui/assets/stylesheets/bootstrap/_progress.scss +0 -33
  62. data/lib/flipper/ui/assets/stylesheets/bootstrap/_reboot.scss +0 -482
  63. data/lib/flipper/ui/assets/stylesheets/bootstrap/_root.scss +0 -19
  64. data/lib/flipper/ui/assets/stylesheets/bootstrap/_tables.scss +0 -180
  65. data/lib/flipper/ui/assets/stylesheets/bootstrap/_tooltip.scss +0 -115
  66. data/lib/flipper/ui/assets/stylesheets/bootstrap/_transitions.scss +0 -36
  67. data/lib/flipper/ui/assets/stylesheets/bootstrap/_type.scss +0 -125
  68. data/lib/flipper/ui/assets/stylesheets/bootstrap/_utilities.scss +0 -14
  69. data/lib/flipper/ui/assets/stylesheets/bootstrap/_variables.scss +0 -894
  70. data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap-grid.scss +0 -32
  71. data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap-reboot.scss +0 -12
  72. data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap.scss +0 -42
  73. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_alert.scss +0 -13
  74. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -21
  75. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_badge.scss +0 -12
  76. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_border-radius.scss +0 -35
  77. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +0 -5
  78. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +0 -123
  79. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_buttons.scss +0 -109
  80. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_caret.scss +0 -65
  81. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_clearfix.scss +0 -7
  82. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_float.scss +0 -11
  83. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_forms.scss +0 -137
  84. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_gradients.scss +0 -45
  85. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -67
  86. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_grid.scss +0 -52
  87. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_hover.scss +0 -39
  88. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_image.scss +0 -36
  89. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_list-group.scss +0 -21
  90. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_lists.scss +0 -7
  91. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -10
  92. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_navbar-align.scss +0 -10
  93. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_pagination.scss +0 -22
  94. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_reset-text.scss +0 -17
  95. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_resize.scss +0 -6
  96. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +0 -35
  97. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_size.scss +0 -6
  98. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -30
  99. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -14
  100. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-hide.scss +0 -9
  101. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-truncate.scss +0 -8
  102. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_transition.scss +0 -9
  103. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_visibility.scss +0 -7
  104. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_align.scss +0 -8
  105. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_background.scss +0 -19
  106. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_borders.scss +0 -59
  107. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_clearfix.scss +0 -3
  108. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_display.scss +0 -38
  109. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_embed.scss +0 -52
  110. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_flex.scss +0 -46
  111. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_float.scss +0 -9
  112. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_position.scss +0 -36
  113. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +0 -11
  114. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_sizing.scss +0 -12
  115. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_spacing.scss +0 -51
  116. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_text.scss +0 -52
  117. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_visibility.scss +0 -11
  118. data/lib/flipper/ui/assets/stylesheets/primer/.scss-lint.yml +0 -446
  119. data/lib/flipper/ui/assets/stylesheets/primer/_alerts.scss +0 -106
  120. data/lib/flipper/ui/assets/stylesheets/primer/_avatars.scss +0 -36
  121. data/lib/flipper/ui/assets/stylesheets/primer/_base.scss +0 -40
  122. data/lib/flipper/ui/assets/stylesheets/primer/_blankslate.scss +0 -96
  123. data/lib/flipper/ui/assets/stylesheets/primer/_buttons.scss +0 -404
  124. data/lib/flipper/ui/assets/stylesheets/primer/_counter.scss +0 -10
  125. data/lib/flipper/ui/assets/stylesheets/primer/_filter-list.scss +0 -68
  126. data/lib/flipper/ui/assets/stylesheets/primer/_flex-table.scss +0 -20
  127. data/lib/flipper/ui/assets/stylesheets/primer/_forms.scss +0 -756
  128. data/lib/flipper/ui/assets/stylesheets/primer/_layout.scss +0 -69
  129. data/lib/flipper/ui/assets/stylesheets/primer/_menu.scss +0 -113
  130. data/lib/flipper/ui/assets/stylesheets/primer/_mixins.scss +0 -53
  131. data/lib/flipper/ui/assets/stylesheets/primer/_normalize.scss +0 -425
  132. data/lib/flipper/ui/assets/stylesheets/primer/_states.scss +0 -32
  133. data/lib/flipper/ui/assets/stylesheets/primer/_tabnav.scss +0 -65
  134. data/lib/flipper/ui/assets/stylesheets/primer/_tooltips.scss +0 -255
  135. data/lib/flipper/ui/assets/stylesheets/primer/_truncate.scss +0 -27
  136. data/lib/flipper/ui/assets/stylesheets/primer/_type.scss +0 -92
  137. data/lib/flipper/ui/assets/stylesheets/primer/_utility.scss +0 -73
  138. data/lib/flipper/ui/assets/stylesheets/primer/_variables.scss +0 -34
  139. data/lib/flipper/ui/assets/stylesheets/primer/primer.scss +0 -39
  140. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.eot +0 -0
  141. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.svg +0 -288
  142. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.ttf +0 -0
  143. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.woff +0 -0
  144. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.woff2 +0 -0
  145. data/lib/flipper/ui/public/images/remove.png +0 -0
  146. data/lib/flipper/ui/public/octicons/octicons.less +0 -235
  147. data/lib/flipper/ui/public/octicons/sprockets-octicons.scss +0 -232
@@ -1,270 +0,0 @@
1
- //
2
- // Base styles
3
- //
4
-
5
- .card {
6
- position: relative;
7
- display: flex;
8
- flex-direction: column;
9
- min-width: 0;
10
- word-wrap: break-word;
11
- background-color: $card-bg;
12
- background-clip: border-box;
13
- border: $card-border-width solid $card-border-color;
14
- @include border-radius($card-border-radius);
15
-
16
- > hr {
17
- margin-right: 0;
18
- margin-left: 0;
19
- }
20
-
21
- > .list-group:first-child {
22
- .list-group-item:first-child {
23
- @include border-top-radius($card-border-radius);
24
- }
25
- }
26
-
27
- > .list-group:last-child {
28
- .list-group-item:last-child {
29
- @include border-bottom-radius($card-border-radius);
30
- }
31
- }
32
- }
33
-
34
- .card-body {
35
- // Enable `flex-grow: 1` for decks and groups so that card blocks take up
36
- // as much space as possible, ensuring footers are aligned to the bottom.
37
- flex: 1 1 auto;
38
- padding: $card-spacer-x;
39
- }
40
-
41
- .card-title {
42
- margin-bottom: $card-spacer-y;
43
- }
44
-
45
- .card-subtitle {
46
- margin-top: -($card-spacer-y / 2);
47
- margin-bottom: 0;
48
- }
49
-
50
- .card-text:last-child {
51
- margin-bottom: 0;
52
- }
53
-
54
- .card-link {
55
- @include hover {
56
- text-decoration: none;
57
- }
58
-
59
- + .card-link {
60
- margin-left: $card-spacer-x;
61
- }
62
- }
63
-
64
- //
65
- // Optional textual caps
66
- //
67
-
68
- .card-header {
69
- padding: $card-spacer-y $card-spacer-x;
70
- margin-bottom: 0; // Removes the default margin-bottom of <hN>
71
- background-color: $card-cap-bg;
72
- border-bottom: $card-border-width solid $card-border-color;
73
-
74
- &:first-child {
75
- @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
76
- }
77
-
78
- + .list-group {
79
- .list-group-item:first-child {
80
- border-top: 0;
81
- }
82
- }
83
- }
84
-
85
- .card-footer {
86
- padding: $card-spacer-y $card-spacer-x;
87
- background-color: $card-cap-bg;
88
- border-top: $card-border-width solid $card-border-color;
89
-
90
- &:last-child {
91
- @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
92
- }
93
- }
94
-
95
-
96
- //
97
- // Header navs
98
- //
99
-
100
- .card-header-tabs {
101
- margin-right: -($card-spacer-x / 2);
102
- margin-bottom: -$card-spacer-y;
103
- margin-left: -($card-spacer-x / 2);
104
- border-bottom: 0;
105
- }
106
-
107
- .card-header-pills {
108
- margin-right: -($card-spacer-x / 2);
109
- margin-left: -($card-spacer-x / 2);
110
- }
111
-
112
- // Card image
113
- .card-img-overlay {
114
- position: absolute;
115
- top: 0;
116
- right: 0;
117
- bottom: 0;
118
- left: 0;
119
- padding: $card-img-overlay-padding;
120
- }
121
-
122
- .card-img {
123
- width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
124
- @include border-radius($card-inner-border-radius);
125
- }
126
-
127
- // Card image caps
128
- .card-img-top {
129
- width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
130
- @include border-top-radius($card-inner-border-radius);
131
- }
132
-
133
- .card-img-bottom {
134
- width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
135
- @include border-bottom-radius($card-inner-border-radius);
136
- }
137
-
138
-
139
- // Card deck
140
-
141
- .card-deck {
142
- display: flex;
143
- flex-direction: column;
144
-
145
- .card {
146
- margin-bottom: $card-deck-margin;
147
- }
148
-
149
- @include media-breakpoint-up(sm) {
150
- flex-flow: row wrap;
151
- margin-right: -$card-deck-margin;
152
- margin-left: -$card-deck-margin;
153
-
154
- .card {
155
- display: flex;
156
- // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
157
- flex: 1 0 0%;
158
- flex-direction: column;
159
- margin-right: $card-deck-margin;
160
- margin-bottom: 0; // Override the default
161
- margin-left: $card-deck-margin;
162
- }
163
- }
164
- }
165
-
166
-
167
- //
168
- // Card groups
169
- //
170
-
171
- .card-group {
172
- display: flex;
173
- flex-direction: column;
174
-
175
- // The child selector allows nested `.card` within `.card-group`
176
- // to display properly.
177
- > .card {
178
- margin-bottom: $card-group-margin;
179
- }
180
-
181
- @include media-breakpoint-up(sm) {
182
- flex-flow: row wrap;
183
- // The child selector allows nested `.card` within `.card-group`
184
- // to display properly.
185
- > .card {
186
- // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
187
- flex: 1 0 0%;
188
- margin-bottom: 0;
189
-
190
- + .card {
191
- margin-left: 0;
192
- border-left: 0;
193
- }
194
-
195
- // Handle rounded corners
196
- @if $enable-rounded {
197
- &:first-child {
198
- @include border-right-radius(0);
199
-
200
- .card-img-top,
201
- .card-header {
202
- border-top-right-radius: 0;
203
- }
204
- .card-img-bottom,
205
- .card-footer {
206
- border-bottom-right-radius: 0;
207
- }
208
- }
209
-
210
- &:last-child {
211
- @include border-left-radius(0);
212
-
213
- .card-img-top,
214
- .card-header {
215
- border-top-left-radius: 0;
216
- }
217
- .card-img-bottom,
218
- .card-footer {
219
- border-bottom-left-radius: 0;
220
- }
221
- }
222
-
223
- &:only-child {
224
- @include border-radius($card-border-radius);
225
-
226
- .card-img-top,
227
- .card-header {
228
- @include border-top-radius($card-border-radius);
229
- }
230
- .card-img-bottom,
231
- .card-footer {
232
- @include border-bottom-radius($card-border-radius);
233
- }
234
- }
235
-
236
- &:not(:first-child):not(:last-child):not(:only-child) {
237
- @include border-radius(0);
238
-
239
- .card-img-top,
240
- .card-img-bottom,
241
- .card-header,
242
- .card-footer {
243
- @include border-radius(0);
244
- }
245
- }
246
- }
247
- }
248
- }
249
- }
250
-
251
-
252
- //
253
- // Columns
254
- //
255
-
256
- .card-columns {
257
- .card {
258
- margin-bottom: $card-columns-margin;
259
- }
260
-
261
- @include media-breakpoint-up(sm) {
262
- column-count: $card-columns-count;
263
- column-gap: $card-columns-gap;
264
-
265
- .card {
266
- display: inline-block; // Don't let them vertically span multiple columns
267
- width: 100%; // Don't let their width change
268
- }
269
- }
270
- }
@@ -1,191 +0,0 @@
1
- // Wrapper for the slide container and indicators
2
- .carousel {
3
- position: relative;
4
- }
5
-
6
- .carousel-inner {
7
- position: relative;
8
- width: 100%;
9
- overflow: hidden;
10
- }
11
-
12
- .carousel-item {
13
- position: relative;
14
- display: none;
15
- align-items: center;
16
- width: 100%;
17
- @include transition($carousel-transition);
18
- backface-visibility: hidden;
19
- perspective: 1000px;
20
- }
21
-
22
- .carousel-item.active,
23
- .carousel-item-next,
24
- .carousel-item-prev {
25
- display: block;
26
- }
27
-
28
- .carousel-item-next,
29
- .carousel-item-prev {
30
- position: absolute;
31
- top: 0;
32
- }
33
-
34
- // CSS3 transforms when supported by the browser
35
- .carousel-item-next.carousel-item-left,
36
- .carousel-item-prev.carousel-item-right {
37
- transform: translateX(0);
38
-
39
- @supports (transform-style: preserve-3d) {
40
- transform: translate3d(0, 0, 0);
41
- }
42
- }
43
-
44
- .carousel-item-next,
45
- .active.carousel-item-right {
46
- transform: translateX(100%);
47
-
48
- @supports (transform-style: preserve-3d) {
49
- transform: translate3d(100%, 0, 0);
50
- }
51
- }
52
-
53
- .carousel-item-prev,
54
- .active.carousel-item-left {
55
- transform: translateX(-100%);
56
-
57
- @supports (transform-style: preserve-3d) {
58
- transform: translate3d(-100%, 0, 0);
59
- }
60
- }
61
-
62
-
63
- //
64
- // Left/right controls for nav
65
- //
66
-
67
- .carousel-control-prev,
68
- .carousel-control-next {
69
- position: absolute;
70
- top: 0;
71
- bottom: 0;
72
- // Use flex for alignment (1-3)
73
- display: flex; // 1. allow flex styles
74
- align-items: center; // 2. vertically center contents
75
- justify-content: center; // 3. horizontally center contents
76
- width: $carousel-control-width;
77
- color: $carousel-control-color;
78
- text-align: center;
79
- opacity: $carousel-control-opacity;
80
- // We can't have a transition here because WebKit cancels the carousel
81
- // animation if you trip this while in the middle of another animation.
82
-
83
- // Hover/focus state
84
- @include hover-focus {
85
- color: $carousel-control-color;
86
- text-decoration: none;
87
- outline: 0;
88
- opacity: .9;
89
- }
90
- }
91
- .carousel-control-prev {
92
- left: 0;
93
- @if $enable-gradients {
94
- background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
95
- }
96
- }
97
- .carousel-control-next {
98
- right: 0;
99
- @if $enable-gradients {
100
- background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
101
- }
102
- }
103
-
104
- // Icons for within
105
- .carousel-control-prev-icon,
106
- .carousel-control-next-icon {
107
- display: inline-block;
108
- width: $carousel-control-icon-width;
109
- height: $carousel-control-icon-width;
110
- background: transparent no-repeat center center;
111
- background-size: 100% 100%;
112
- }
113
- .carousel-control-prev-icon {
114
- background-image: $carousel-control-prev-icon-bg;
115
- }
116
- .carousel-control-next-icon {
117
- background-image: $carousel-control-next-icon-bg;
118
- }
119
-
120
-
121
- // Optional indicator pips
122
- //
123
- // Add an ordered list with the following class and add a list item for each
124
- // slide your carousel holds.
125
-
126
- .carousel-indicators {
127
- position: absolute;
128
- right: 0;
129
- bottom: 10px;
130
- left: 0;
131
- z-index: 15;
132
- display: flex;
133
- justify-content: center;
134
- padding-left: 0; // override <ol> default
135
- // Use the .carousel-control's width as margin so we don't overlay those
136
- margin-right: $carousel-control-width;
137
- margin-left: $carousel-control-width;
138
- list-style: none;
139
-
140
- li {
141
- position: relative;
142
- flex: 0 1 auto;
143
- width: $carousel-indicator-width;
144
- height: $carousel-indicator-height;
145
- margin-right: $carousel-indicator-spacer;
146
- margin-left: $carousel-indicator-spacer;
147
- text-indent: -999px;
148
- background-color: rgba($carousel-indicator-active-bg, .5);
149
-
150
- // Use pseudo classes to increase the hit area by 10px on top and bottom.
151
- &::before {
152
- position: absolute;
153
- top: -10px;
154
- left: 0;
155
- display: inline-block;
156
- width: 100%;
157
- height: 10px;
158
- content: "";
159
- }
160
- &::after {
161
- position: absolute;
162
- bottom: -10px;
163
- left: 0;
164
- display: inline-block;
165
- width: 100%;
166
- height: 10px;
167
- content: "";
168
- }
169
- }
170
-
171
- .active {
172
- background-color: $carousel-indicator-active-bg;
173
- }
174
- }
175
-
176
-
177
- // Optional captions
178
- //
179
- //
180
-
181
- .carousel-caption {
182
- position: absolute;
183
- right: ((100% - $carousel-caption-width) / 2);
184
- bottom: 20px;
185
- left: ((100% - $carousel-caption-width) / 2);
186
- z-index: 10;
187
- padding-top: 20px;
188
- padding-bottom: 20px;
189
- color: $carousel-caption-color;
190
- text-align: center;
191
- }