tabler_ui_rails 0.3.0 → 0.3.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (143) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +15 -3
  3. data/assets/javascripts/tabler_ui.js +0 -1
  4. data/assets/javascripts/vendors/bootstrap.bundle.min.js +7 -0
  5. data/assets/javascripts/vendors/chart.bundle.min.js +10 -0
  6. data/assets/javascripts/vendors/circle-progress.min.js +10 -0
  7. data/assets/javascripts/vendors/jquery-3.2.1.min.js +4 -0
  8. data/assets/javascripts/vendors/jquery-3.2.1.slim.min.js +4 -0
  9. data/assets/javascripts/vendors/jquery-jvectormap-2.0.3.min.js +2 -0
  10. data/assets/javascripts/vendors/jquery-jvectormap-de-merc.js +1 -0
  11. data/assets/javascripts/vendors/jquery-jvectormap-world-mill.js +1 -0
  12. data/assets/javascripts/vendors/jquery.sparkline.min.js +2 -0
  13. data/assets/javascripts/vendors/jquery.tablesorter.min.js +4 -0
  14. data/assets/javascripts/vendors/selectize.min.js +3829 -0
  15. data/assets/plugins/charts-c3/js/c3.min.js +1 -0
  16. data/assets/plugins/charts-c3/js/d3.v3.min.js +5 -0
  17. data/assets/plugins/charts-c3/plugin.js +10 -0
  18. data/assets/plugins/charts-c3/plugin.scss +2 -0
  19. data/assets/plugins/charts-c3/scss/_c3.scss +244 -0
  20. data/assets/plugins/fullcalendar/js/fullcalendar.min.js +7 -0
  21. data/assets/plugins/fullcalendar/js/moment.min.js +1 -0
  22. data/assets/plugins/fullcalendar/plugin.js +9 -0
  23. data/assets/plugins/fullcalendar/plugin.scss +2 -0
  24. data/assets/plugins/fullcalendar/scss/_fullcalendar.scss +1118 -0
  25. data/assets/plugins/iconfonts/fonts/materialdesignicons/materialdesignicons-webfont.eot +0 -0
  26. data/assets/plugins/iconfonts/fonts/materialdesignicons/materialdesignicons-webfont.svg +6150 -0
  27. data/assets/plugins/iconfonts/fonts/materialdesignicons/materialdesignicons-webfont.ttf +0 -0
  28. data/assets/plugins/iconfonts/fonts/materialdesignicons/materialdesignicons-webfont.woff +0 -0
  29. data/assets/plugins/iconfonts/fonts/materialdesignicons/materialdesignicons-webfont.woff2 +0 -0
  30. data/assets/plugins/iconfonts/fonts/simple-line-icons/Simple-Line-Icons.eot +0 -0
  31. data/assets/plugins/iconfonts/fonts/simple-line-icons/Simple-Line-Icons.svg +1 -0
  32. data/assets/plugins/iconfonts/fonts/simple-line-icons/Simple-Line-Icons.ttf +0 -0
  33. data/assets/plugins/iconfonts/fonts/simple-line-icons/Simple-Line-Icons.woff +0 -0
  34. data/assets/plugins/iconfonts/fonts/simple-line-icons/Simple-Line-Icons.woff2 +0 -0
  35. data/assets/plugins/iconfonts/fonts/themify/themify.eot +0 -0
  36. data/assets/plugins/iconfonts/fonts/themify/themify.svg +362 -0
  37. data/assets/plugins/iconfonts/fonts/themify/themify.ttf +0 -0
  38. data/assets/plugins/iconfonts/fonts/themify/themify.woff +0 -0
  39. data/assets/plugins/iconfonts/fonts/weathericons/weathericons-regular-webfont.eot +0 -0
  40. data/assets/plugins/iconfonts/fonts/weathericons/weathericons-regular-webfont.svg +1 -0
  41. data/assets/plugins/iconfonts/fonts/weathericons/weathericons-regular-webfont.ttf +0 -0
  42. data/assets/plugins/iconfonts/fonts/weathericons/weathericons-regular-webfont.woff +0 -0
  43. data/assets/plugins/iconfonts/fonts/weathericons/weathericons-regular-webfont.woff2 +0 -0
  44. data/assets/plugins/iconfonts/plugin.scss +4 -0
  45. data/assets/plugins/iconfonts/scss/_materialdesignicons.scss +8445 -0
  46. data/assets/plugins/iconfonts/scss/_simple-line-icons.scss +779 -0
  47. data/assets/plugins/iconfonts/scss/_themify.scss +1081 -0
  48. data/assets/plugins/iconfonts/scss/_weathericons.scss +1823 -0
  49. data/assets/plugins/input-mask/js/jquery.mask.min.js +19 -0
  50. data/assets/plugins/input-mask/plugin.js +8 -0
  51. data/assets/plugins/maps-google/plugin.js +0 -0
  52. data/assets/plugins/maps-google/plugin.scss +0 -0
  53. data/assets/plugins/prismjs/js/prism.pack.js +30 -0
  54. data/assets/plugins/prismjs/plugin.js +18 -0
  55. data/assets/plugins/prismjs/plugin.scss +227 -0
  56. data/assets/stylesheets/dashboard/_progress.scss +2 -2
  57. data/assets/stylesheets/dashboard/forms/_custom-selectgroup.scss +2 -3
  58. data/lib/tabler_ui_rails/engine.rb +1 -1
  59. data/lib/tabler_ui_rails/version.rb +2 -2
  60. metadata +72 -89
  61. data/assets/stylesheets/dashboard/bootstrap/_alert.scss +0 -51
  62. data/assets/stylesheets/dashboard/bootstrap/_badge.scss +0 -47
  63. data/assets/stylesheets/dashboard/bootstrap/_breadcrumb.scss +0 -38
  64. data/assets/stylesheets/dashboard/bootstrap/_button-group.scss +0 -166
  65. data/assets/stylesheets/dashboard/bootstrap/_buttons.scss +0 -143
  66. data/assets/stylesheets/dashboard/bootstrap/_card.scss +0 -299
  67. data/assets/stylesheets/dashboard/bootstrap/_carousel.scss +0 -235
  68. data/assets/stylesheets/dashboard/bootstrap/_close.scss +0 -34
  69. data/assets/stylesheets/dashboard/bootstrap/_code.scss +0 -56
  70. data/assets/stylesheets/dashboard/bootstrap/_custom-forms.scss +0 -420
  71. data/assets/stylesheets/dashboard/bootstrap/_dropdown.scss +0 -138
  72. data/assets/stylesheets/dashboard/bootstrap/_forms.scss +0 -335
  73. data/assets/stylesheets/dashboard/bootstrap/_functions.scss +0 -86
  74. data/assets/stylesheets/dashboard/bootstrap/_grid.scss +0 -52
  75. data/assets/stylesheets/dashboard/bootstrap/_images.scss +0 -42
  76. data/assets/stylesheets/dashboard/bootstrap/_input-group.scss +0 -159
  77. data/assets/stylesheets/dashboard/bootstrap/_jumbotron.scss +0 -16
  78. data/assets/stylesheets/dashboard/bootstrap/_list-group.scss +0 -115
  79. data/assets/stylesheets/dashboard/bootstrap/_media.scss +0 -8
  80. data/assets/stylesheets/dashboard/bootstrap/_mixins.scss +0 -42
  81. data/assets/stylesheets/dashboard/bootstrap/_modal.scss +0 -168
  82. data/assets/stylesheets/dashboard/bootstrap/_nav.scss +0 -118
  83. data/assets/stylesheets/dashboard/bootstrap/_navbar.scss +0 -311
  84. data/assets/stylesheets/dashboard/bootstrap/_pagination.scss +0 -78
  85. data/assets/stylesheets/dashboard/bootstrap/_popover.scss +0 -183
  86. data/assets/stylesheets/dashboard/bootstrap/_print.scss +0 -124
  87. data/assets/stylesheets/dashboard/bootstrap/_progress.scss +0 -34
  88. data/assets/stylesheets/dashboard/bootstrap/_reboot.scss +0 -482
  89. data/assets/stylesheets/dashboard/bootstrap/_root.scss +0 -19
  90. data/assets/stylesheets/dashboard/bootstrap/_tables.scss +0 -188
  91. data/assets/stylesheets/dashboard/bootstrap/_tooltip.scss +0 -115
  92. data/assets/stylesheets/dashboard/bootstrap/_transitions.scss +0 -36
  93. data/assets/stylesheets/dashboard/bootstrap/_type.scss +0 -125
  94. data/assets/stylesheets/dashboard/bootstrap/_utilities.scss +0 -14
  95. data/assets/stylesheets/dashboard/bootstrap/_variables.scss +0 -919
  96. data/assets/stylesheets/dashboard/bootstrap/bootstrap-grid.scss +0 -32
  97. data/assets/stylesheets/dashboard/bootstrap/bootstrap-reboot.scss +0 -12
  98. data/assets/stylesheets/dashboard/bootstrap/bootstrap.scss +0 -42
  99. data/assets/stylesheets/dashboard/bootstrap/mixins/_alert.scss +0 -13
  100. data/assets/stylesheets/dashboard/bootstrap/mixins/_background-variant.scss +0 -21
  101. data/assets/stylesheets/dashboard/bootstrap/mixins/_badge.scss +0 -12
  102. data/assets/stylesheets/dashboard/bootstrap/mixins/_border-radius.scss +0 -35
  103. data/assets/stylesheets/dashboard/bootstrap/mixins/_box-shadow.scss +0 -5
  104. data/assets/stylesheets/dashboard/bootstrap/mixins/_breakpoints.scss +0 -123
  105. data/assets/stylesheets/dashboard/bootstrap/mixins/_buttons.scss +0 -109
  106. data/assets/stylesheets/dashboard/bootstrap/mixins/_caret.scss +0 -65
  107. data/assets/stylesheets/dashboard/bootstrap/mixins/_clearfix.scss +0 -7
  108. data/assets/stylesheets/dashboard/bootstrap/mixins/_float.scss +0 -11
  109. data/assets/stylesheets/dashboard/bootstrap/mixins/_forms.scss +0 -137
  110. data/assets/stylesheets/dashboard/bootstrap/mixins/_gradients.scss +0 -45
  111. data/assets/stylesheets/dashboard/bootstrap/mixins/_grid-framework.scss +0 -67
  112. data/assets/stylesheets/dashboard/bootstrap/mixins/_grid.scss +0 -52
  113. data/assets/stylesheets/dashboard/bootstrap/mixins/_hover.scss +0 -37
  114. data/assets/stylesheets/dashboard/bootstrap/mixins/_image.scss +0 -36
  115. data/assets/stylesheets/dashboard/bootstrap/mixins/_list-group.scss +0 -21
  116. data/assets/stylesheets/dashboard/bootstrap/mixins/_lists.scss +0 -7
  117. data/assets/stylesheets/dashboard/bootstrap/mixins/_nav-divider.scss +0 -10
  118. data/assets/stylesheets/dashboard/bootstrap/mixins/_navbar-align.scss +0 -10
  119. data/assets/stylesheets/dashboard/bootstrap/mixins/_pagination.scss +0 -22
  120. data/assets/stylesheets/dashboard/bootstrap/mixins/_reset-text.scss +0 -17
  121. data/assets/stylesheets/dashboard/bootstrap/mixins/_resize.scss +0 -6
  122. data/assets/stylesheets/dashboard/bootstrap/mixins/_screen-reader.scss +0 -33
  123. data/assets/stylesheets/dashboard/bootstrap/mixins/_size.scss +0 -6
  124. data/assets/stylesheets/dashboard/bootstrap/mixins/_table-row.scss +0 -30
  125. data/assets/stylesheets/dashboard/bootstrap/mixins/_text-emphasis.scss +0 -14
  126. data/assets/stylesheets/dashboard/bootstrap/mixins/_text-hide.scss +0 -9
  127. data/assets/stylesheets/dashboard/bootstrap/mixins/_text-truncate.scss +0 -8
  128. data/assets/stylesheets/dashboard/bootstrap/mixins/_transition.scss +0 -9
  129. data/assets/stylesheets/dashboard/bootstrap/mixins/_visibility.scss +0 -7
  130. data/assets/stylesheets/dashboard/bootstrap/utilities/_align.scss +0 -8
  131. data/assets/stylesheets/dashboard/bootstrap/utilities/_background.scss +0 -19
  132. data/assets/stylesheets/dashboard/bootstrap/utilities/_borders.scss +0 -59
  133. data/assets/stylesheets/dashboard/bootstrap/utilities/_clearfix.scss +0 -3
  134. data/assets/stylesheets/dashboard/bootstrap/utilities/_display.scss +0 -38
  135. data/assets/stylesheets/dashboard/bootstrap/utilities/_embed.scss +0 -52
  136. data/assets/stylesheets/dashboard/bootstrap/utilities/_flex.scss +0 -47
  137. data/assets/stylesheets/dashboard/bootstrap/utilities/_float.scss +0 -9
  138. data/assets/stylesheets/dashboard/bootstrap/utilities/_position.scss +0 -37
  139. data/assets/stylesheets/dashboard/bootstrap/utilities/_screenreaders.scss +0 -11
  140. data/assets/stylesheets/dashboard/bootstrap/utilities/_sizing.scss +0 -12
  141. data/assets/stylesheets/dashboard/bootstrap/utilities/_spacing.scss +0 -51
  142. data/assets/stylesheets/dashboard/bootstrap/utilities/_text.scss +0 -52
  143. data/assets/stylesheets/dashboard/bootstrap/utilities/_visibility.scss +0 -11
@@ -1,299 +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
- }
271
-
272
-
273
- //
274
- // Accordion
275
- //
276
-
277
- .accordion {
278
- .card:not(:first-of-type):not(:last-of-type) {
279
- border-bottom: 0;
280
- border-radius: 0;
281
- }
282
-
283
- .card:not(:first-of-type) {
284
- .card-header:first-child {
285
- border-radius: 0;
286
- }
287
- }
288
-
289
- .card:first-of-type {
290
- border-bottom: 0;
291
- border-bottom-right-radius: 0;
292
- border-bottom-left-radius: 0;
293
- }
294
-
295
- .card:last-of-type {
296
- border-top-left-radius: 0;
297
- border-top-right-radius: 0;
298
- }
299
- }
@@ -1,235 +0,0 @@
1
- // Notes on the classes:
2
- //
3
- // 1. The .carousel-item-left and .carousel-item-right is used to indicate where
4
- // the active slide is heading.
5
- // 2. .active.carousel-item is the current slide.
6
- // 3. .active.carousel-item-left and .active.carousel-item-right is the current
7
- // slide in it's in-transition state. Only one of these occur at a time.
8
- // 4. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right
9
- // is the upcoming slide in transition.
10
-
11
- .carousel {
12
- position: relative;
13
- }
14
-
15
- .carousel-inner {
16
- position: relative;
17
- width: 100%;
18
- overflow: hidden;
19
- }
20
-
21
- .carousel-item {
22
- position: relative;
23
- display: none;
24
- align-items: center;
25
- width: 100%;
26
- @include transition($carousel-transition);
27
- backface-visibility: hidden;
28
- perspective: 1000px;
29
- }
30
-
31
- .carousel-item.active,
32
- .carousel-item-next,
33
- .carousel-item-prev {
34
- display: block;
35
- }
36
-
37
- .carousel-item-next,
38
- .carousel-item-prev {
39
- position: absolute;
40
- top: 0;
41
- }
42
-
43
- .carousel-item-next.carousel-item-left,
44
- .carousel-item-prev.carousel-item-right {
45
- transform: translateX(0);
46
-
47
- @supports (transform-style: preserve-3d) {
48
- transform: translate3d(0, 0, 0);
49
- }
50
- }
51
-
52
- .carousel-item-next,
53
- .active.carousel-item-right {
54
- transform: translateX(100%);
55
-
56
- @supports (transform-style: preserve-3d) {
57
- transform: translate3d(100%, 0, 0);
58
- }
59
- }
60
-
61
- .carousel-item-prev,
62
- .active.carousel-item-left {
63
- transform: translateX(-100%);
64
-
65
- @supports (transform-style: preserve-3d) {
66
- transform: translate3d(-100%, 0, 0);
67
- }
68
- }
69
-
70
-
71
- //
72
- // Alternate transitions
73
- //
74
-
75
- .carousel-fade {
76
- .carousel-item {
77
- opacity: 0;
78
- transition-duration: .6s;
79
- transition-property: opacity;
80
- }
81
-
82
- .carousel-item.active,
83
- .carousel-item-next.carousel-item-left,
84
- .carousel-item-prev.carousel-item-right {
85
- opacity: 1;
86
- }
87
-
88
- .active.carousel-item-left,
89
- .active.carousel-item-right {
90
- opacity: 0;
91
- }
92
-
93
- .carousel-item-next,
94
- .carousel-item-prev,
95
- .carousel-item.active,
96
- .active.carousel-item-left,
97
- .active.carousel-item-prev {
98
- transform: translateX(0);
99
-
100
- @supports (transform-style: preserve-3d) {
101
- transform: translate3d(0, 0, 0);
102
- }
103
- }
104
- }
105
-
106
-
107
- //
108
- // Left/right controls for nav
109
- //
110
-
111
- .carousel-control-prev,
112
- .carousel-control-next {
113
- position: absolute;
114
- top: 0;
115
- bottom: 0;
116
- // Use flex for alignment (1-3)
117
- display: flex; // 1. allow flex styles
118
- align-items: center; // 2. vertically center contents
119
- justify-content: center; // 3. horizontally center contents
120
- width: $carousel-control-width;
121
- color: $carousel-control-color;
122
- text-align: center;
123
- opacity: $carousel-control-opacity;
124
- // We can't have a transition here because WebKit cancels the carousel
125
- // animation if you trip this while in the middle of another animation.
126
-
127
- // Hover/focus state
128
- @include hover-focus {
129
- color: $carousel-control-color;
130
- text-decoration: none;
131
- outline: 0;
132
- opacity: .9;
133
- }
134
- }
135
- .carousel-control-prev {
136
- left: 0;
137
- @if $enable-gradients {
138
- background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
139
- }
140
- }
141
- .carousel-control-next {
142
- right: 0;
143
- @if $enable-gradients {
144
- background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
145
- }
146
- }
147
-
148
- // Icons for within
149
- .carousel-control-prev-icon,
150
- .carousel-control-next-icon {
151
- display: inline-block;
152
- width: $carousel-control-icon-width;
153
- height: $carousel-control-icon-width;
154
- background: transparent no-repeat center center;
155
- background-size: 100% 100%;
156
- }
157
- .carousel-control-prev-icon {
158
- background-image: $carousel-control-prev-icon-bg;
159
- }
160
- .carousel-control-next-icon {
161
- background-image: $carousel-control-next-icon-bg;
162
- }
163
-
164
-
165
- // Optional indicator pips
166
- //
167
- // Add an ordered list with the following class and add a list item for each
168
- // slide your carousel holds.
169
-
170
- .carousel-indicators {
171
- position: absolute;
172
- right: 0;
173
- bottom: 10px;
174
- left: 0;
175
- z-index: 15;
176
- display: flex;
177
- justify-content: center;
178
- padding-left: 0; // override <ol> default
179
- // Use the .carousel-control's width as margin so we don't overlay those
180
- margin-right: $carousel-control-width;
181
- margin-left: $carousel-control-width;
182
- list-style: none;
183
-
184
- li {
185
- position: relative;
186
- flex: 0 1 auto;
187
- width: $carousel-indicator-width;
188
- height: $carousel-indicator-height;
189
- margin-right: $carousel-indicator-spacer;
190
- margin-left: $carousel-indicator-spacer;
191
- text-indent: -999px;
192
- background-color: rgba($carousel-indicator-active-bg, .5);
193
-
194
- // Use pseudo classes to increase the hit area by 10px on top and bottom.
195
- &::before {
196
- position: absolute;
197
- top: -10px;
198
- left: 0;
199
- display: inline-block;
200
- width: 100%;
201
- height: 10px;
202
- content: "";
203
- }
204
- &::after {
205
- position: absolute;
206
- bottom: -10px;
207
- left: 0;
208
- display: inline-block;
209
- width: 100%;
210
- height: 10px;
211
- content: "";
212
- }
213
- }
214
-
215
- .active {
216
- background-color: $carousel-indicator-active-bg;
217
- }
218
- }
219
-
220
-
221
- // Optional captions
222
- //
223
- //
224
-
225
- .carousel-caption {
226
- position: absolute;
227
- right: ((100% - $carousel-caption-width) / 2);
228
- bottom: 20px;
229
- left: ((100% - $carousel-caption-width) / 2);
230
- z-index: 10;
231
- padding-top: 20px;
232
- padding-bottom: 20px;
233
- color: $carousel-caption-color;
234
- text-align: center;
235
- }