flipper-ui 0.17.2 → 0.18.0

Sign up to get free protection for your applications and to get access to all the features.
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
- }