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,34 +0,0 @@
1
- .close {
2
- float: right;
3
- font-size: $close-font-size;
4
- font-weight: $close-font-weight;
5
- line-height: 1;
6
- color: $close-color;
7
- text-shadow: $close-text-shadow;
8
- opacity: .5;
9
-
10
- @include hover-focus {
11
- color: $close-color;
12
- text-decoration: none;
13
- opacity: .75;
14
- }
15
-
16
- // Opinionated: add "hand" cursor to non-disabled .close elements
17
- &:not(:disabled):not(.disabled) {
18
- cursor: pointer;
19
- }
20
- }
21
-
22
- // Additional properties for button version
23
- // iOS requires the button element instead of an anchor tag.
24
- // If you want the anchor version, it requires `href="#"`.
25
- // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
26
-
27
- // stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
28
- button.close {
29
- padding: 0;
30
- background-color: transparent;
31
- border: 0;
32
- -webkit-appearance: none;
33
- }
34
- // stylelint-enable
@@ -1,56 +0,0 @@
1
- // Inline and block code styles
2
- code,
3
- kbd,
4
- pre,
5
- samp {
6
- font-family: $font-family-monospace;
7
- }
8
-
9
- // Inline code
10
- code {
11
- font-size: $code-font-size;
12
- color: $code-color;
13
- word-break: break-word;
14
-
15
- // Streamline the style when inside anchors to avoid broken underline and more
16
- a > & {
17
- color: inherit;
18
- }
19
- }
20
-
21
- // User input typically entered via keyboard
22
- kbd {
23
- padding: $kbd-padding-y $kbd-padding-x;
24
- font-size: $kbd-font-size;
25
- color: $kbd-color;
26
- background-color: $kbd-bg;
27
- @include border-radius($border-radius-sm);
28
- @include box-shadow($kbd-box-shadow);
29
-
30
- kbd {
31
- padding: 0;
32
- font-size: 100%;
33
- font-weight: $nested-kbd-font-weight;
34
- @include box-shadow(none);
35
- }
36
- }
37
-
38
- // Blocks of code
39
- pre {
40
- display: block;
41
- font-size: $code-font-size;
42
- color: $pre-color;
43
-
44
- // Account for some code outputs that place code tags in pre tags
45
- code {
46
- font-size: inherit;
47
- color: inherit;
48
- word-break: normal;
49
- }
50
- }
51
-
52
- // Enable scrollable blocks of code
53
- .pre-scrollable {
54
- max-height: $pre-scrollable-max-height;
55
- overflow-y: scroll;
56
- }
@@ -1,297 +0,0 @@
1
- // Embedded icons from Open Iconic.
2
- // Released under MIT and copyright 2014 Waybury.
3
- // https://useiconic.com/open
4
-
5
-
6
- // Checkboxes and radios
7
- //
8
- // Base class takes care of all the key behavioral aspects.
9
-
10
- .custom-control {
11
- position: relative;
12
- display: block;
13
- min-height: (1rem * $line-height-base);
14
- padding-left: $custom-control-gutter;
15
- }
16
-
17
- .custom-control-inline {
18
- display: inline-flex;
19
- margin-right: $custom-control-spacer-x;
20
- }
21
-
22
- .custom-control-input {
23
- position: absolute;
24
- z-index: -1; // Put the input behind the label so it doesn't overlay text
25
- opacity: 0;
26
-
27
- &:checked ~ .custom-control-label::before {
28
- color: $custom-control-indicator-checked-color;
29
- @include gradient-bg($custom-control-indicator-checked-bg);
30
- @include box-shadow($custom-control-indicator-checked-box-shadow);
31
- }
32
-
33
- &:focus ~ .custom-control-label::before {
34
- // the mixin is not used here to make sure there is feedback
35
- box-shadow: $custom-control-indicator-focus-box-shadow;
36
- }
37
-
38
- &:active ~ .custom-control-label::before {
39
- color: $custom-control-indicator-active-color;
40
- background-color: $custom-control-indicator-active-bg;
41
- @include box-shadow($custom-control-indicator-active-box-shadow);
42
- }
43
-
44
- &:disabled {
45
- ~ .custom-control-label {
46
- color: $custom-control-label-disabled-color;
47
-
48
- &::before {
49
- background-color: $custom-control-indicator-disabled-bg;
50
- }
51
- }
52
- }
53
- }
54
-
55
- // Custom control indicators
56
- //
57
- // Build the custom controls out of psuedo-elements.
58
-
59
- .custom-control-label {
60
- margin-bottom: 0;
61
-
62
- // Background-color and (when enabled) gradient
63
- &::before {
64
- position: absolute;
65
- top: (($line-height-base - $custom-control-indicator-size) / 2);
66
- left: 0;
67
- display: block;
68
- width: $custom-control-indicator-size;
69
- height: $custom-control-indicator-size;
70
- pointer-events: none;
71
- content: "";
72
- user-select: none;
73
- background-color: $custom-control-indicator-bg;
74
- @include box-shadow($custom-control-indicator-box-shadow);
75
- }
76
-
77
- // Foreground (icon)
78
- &::after {
79
- position: absolute;
80
- top: (($line-height-base - $custom-control-indicator-size) / 2);
81
- left: 0;
82
- display: block;
83
- width: $custom-control-indicator-size;
84
- height: $custom-control-indicator-size;
85
- content: "";
86
- background-repeat: no-repeat;
87
- background-position: center center;
88
- background-size: $custom-control-indicator-bg-size;
89
- }
90
- }
91
-
92
-
93
- // Checkboxes
94
- //
95
- // Tweak just a few things for checkboxes.
96
-
97
- .custom-checkbox {
98
- .custom-control-label::before {
99
- @include border-radius($custom-checkbox-indicator-border-radius);
100
- }
101
-
102
- .custom-control-input:checked ~ .custom-control-label {
103
- &::before {
104
- @include gradient-bg($custom-control-indicator-checked-bg);
105
- }
106
- &::after {
107
- background-image: $custom-checkbox-indicator-icon-checked;
108
- }
109
- }
110
-
111
- .custom-control-input:indeterminate ~ .custom-control-label {
112
- &::before {
113
- @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
114
- @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
115
- }
116
- &::after {
117
- background-image: $custom-checkbox-indicator-icon-indeterminate;
118
- }
119
- }
120
-
121
- .custom-control-input:disabled {
122
- &:checked ~ .custom-control-label::before {
123
- background-color: $custom-control-indicator-checked-disabled-bg;
124
- }
125
- &:indeterminate ~ .custom-control-label::before {
126
- background-color: $custom-control-indicator-checked-disabled-bg;
127
- }
128
- }
129
- }
130
-
131
- // Radios
132
- //
133
- // Tweak just a few things for radios.
134
-
135
- .custom-radio {
136
- .custom-control-label::before {
137
- border-radius: $custom-radio-indicator-border-radius;
138
- }
139
-
140
- .custom-control-input:checked ~ .custom-control-label {
141
- &::before {
142
- @include gradient-bg($custom-control-indicator-checked-bg);
143
- }
144
- &::after {
145
- background-image: $custom-radio-indicator-icon-checked;
146
- }
147
- }
148
-
149
- .custom-control-input:disabled {
150
- &:checked ~ .custom-control-label::before {
151
- background-color: $custom-control-indicator-checked-disabled-bg;
152
- }
153
- }
154
- }
155
-
156
-
157
- // Select
158
- //
159
- // Replaces the browser default select with a custom one, mostly pulled from
160
- // http://primercss.io.
161
- //
162
-
163
- .custom-select {
164
- display: inline-block;
165
- width: 100%;
166
- height: $custom-select-height;
167
- padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
168
- line-height: $custom-select-line-height;
169
- color: $custom-select-color;
170
- vertical-align: middle;
171
- background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
172
- background-size: $custom-select-bg-size;
173
- border: $custom-select-border-width solid $custom-select-border-color;
174
- @if $enable-rounded {
175
- border-radius: $custom-select-border-radius;
176
- } @else {
177
- border-radius: 0;
178
- }
179
- appearance: none;
180
-
181
- &:focus {
182
- border-color: $custom-select-focus-border-color;
183
- outline: 0;
184
- box-shadow: $custom-select-focus-box-shadow;
185
-
186
- &::-ms-value {
187
- // For visual consistency with other platforms/browsers,
188
- // suppress the default white text on blue background highlight given to
189
- // the selected option text when the (still closed) <select> receives focus
190
- // in IE and (under certain conditions) Edge.
191
- // See https://github.com/twbs/bootstrap/issues/19398.
192
- color: $input-color;
193
- background-color: $input-bg;
194
- }
195
- }
196
-
197
- &[multiple],
198
- &[size]:not([size="1"]) {
199
- height: auto;
200
- padding-right: $custom-select-padding-x;
201
- background-image: none;
202
- }
203
-
204
- &:disabled {
205
- color: $custom-select-disabled-color;
206
- background-color: $custom-select-disabled-bg;
207
- }
208
-
209
- // Hides the default caret in IE11
210
- &::-ms-expand {
211
- opacity: 0;
212
- }
213
- }
214
-
215
- .custom-select-sm {
216
- height: $custom-select-height-sm;
217
- padding-top: $custom-select-padding-y;
218
- padding-bottom: $custom-select-padding-y;
219
- font-size: $custom-select-font-size-sm;
220
- }
221
-
222
- .custom-select-lg {
223
- height: $custom-select-height-lg;
224
- padding-top: $custom-select-padding-y;
225
- padding-bottom: $custom-select-padding-y;
226
- font-size: $custom-select-font-size-lg;
227
- }
228
-
229
-
230
- // File
231
- //
232
- // Custom file input.
233
-
234
- .custom-file {
235
- position: relative;
236
- display: inline-block;
237
- width: 100%;
238
- height: $custom-file-height;
239
- margin-bottom: 0;
240
- }
241
-
242
- .custom-file-input {
243
- position: relative;
244
- z-index: 2;
245
- width: 100%;
246
- height: $custom-file-height;
247
- margin: 0;
248
- opacity: 0;
249
-
250
- &:focus ~ .custom-file-control {
251
- border-color: $custom-file-focus-border-color;
252
- box-shadow: $custom-file-focus-box-shadow;
253
-
254
- &::before {
255
- border-color: $custom-file-focus-border-color;
256
- }
257
- }
258
-
259
- @each $lang, $value in $custom-file-text {
260
- &:lang(#{$lang}) ~ .custom-file-label::after {
261
- content: $value;
262
- }
263
- }
264
- }
265
-
266
- .custom-file-label {
267
- position: absolute;
268
- top: 0;
269
- right: 0;
270
- left: 0;
271
- z-index: 1;
272
- height: $custom-file-height;
273
- padding: $custom-file-padding-y $custom-file-padding-x;
274
- line-height: $custom-file-line-height;
275
- color: $custom-file-color;
276
- background-color: $custom-file-bg;
277
- border: $custom-file-border-width solid $custom-file-border-color;
278
- @include border-radius($custom-file-border-radius);
279
- @include box-shadow($custom-file-box-shadow);
280
-
281
- &::after {
282
- position: absolute;
283
- top: 0;
284
- right: 0;
285
- bottom: 0;
286
- z-index: 3;
287
- display: block;
288
- height: calc(#{$custom-file-height} - #{$custom-file-border-width} * 2);
289
- padding: $custom-file-padding-y $custom-file-padding-x;
290
- line-height: $custom-file-line-height;
291
- color: $custom-file-button-color;
292
- content: "Browse";
293
- @include gradient-bg($custom-file-button-bg);
294
- border-left: $custom-file-border-width solid $custom-file-border-color;
295
- @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
296
- }
297
- }
@@ -1,131 +0,0 @@
1
- // The dropdown wrapper (`<div>`)
2
- .dropup,
3
- .dropdown {
4
- position: relative;
5
- }
6
-
7
- .dropdown-toggle {
8
- // Generate the caret automatically
9
- @include caret;
10
- }
11
-
12
- // The dropdown menu
13
- .dropdown-menu {
14
- position: absolute;
15
- top: 100%;
16
- left: 0;
17
- z-index: $zindex-dropdown;
18
- display: none; // none by default, but block on "open" of the menu
19
- float: left;
20
- min-width: $dropdown-min-width;
21
- padding: $dropdown-padding-y 0;
22
- margin: $dropdown-spacer 0 0; // override default ul
23
- font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
24
- color: $body-color;
25
- text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
26
- list-style: none;
27
- background-color: $dropdown-bg;
28
- background-clip: padding-box;
29
- border: $dropdown-border-width solid $dropdown-border-color;
30
- @include border-radius($dropdown-border-radius);
31
- @include box-shadow($dropdown-box-shadow);
32
- }
33
-
34
- // Allow for dropdowns to go bottom up (aka, dropup-menu)
35
- // Just add .dropup after the standard .dropdown class and you're set.
36
- .dropup {
37
- .dropdown-menu {
38
- margin-top: 0;
39
- margin-bottom: $dropdown-spacer;
40
- }
41
-
42
- .dropdown-toggle {
43
- @include caret(up);
44
- }
45
- }
46
-
47
- .dropright {
48
- .dropdown-menu {
49
- margin-top: 0;
50
- margin-left: $dropdown-spacer;
51
- }
52
-
53
- .dropdown-toggle {
54
- @include caret(right);
55
- &::after {
56
- vertical-align: 0;
57
- }
58
- }
59
- }
60
-
61
- .dropleft {
62
- .dropdown-menu {
63
- margin-top: 0;
64
- margin-right: $dropdown-spacer;
65
- }
66
-
67
- .dropdown-toggle {
68
- @include caret(left);
69
- &::before {
70
- vertical-align: 0;
71
- }
72
- }
73
- }
74
-
75
- // Dividers (basically an `<hr>`) within the dropdown
76
- .dropdown-divider {
77
- @include nav-divider($dropdown-divider-bg);
78
- }
79
-
80
- // Links, buttons, and more within the dropdown menu
81
- //
82
- // `<button>`-specific styles are denoted with `// For <button>s`
83
- .dropdown-item {
84
- display: block;
85
- width: 100%; // For `<button>`s
86
- padding: $dropdown-item-padding-y $dropdown-item-padding-x;
87
- clear: both;
88
- font-weight: $font-weight-normal;
89
- color: $dropdown-link-color;
90
- text-align: inherit; // For `<button>`s
91
- white-space: nowrap; // prevent links from randomly breaking onto new lines
92
- background-color: transparent; // For `<button>`s
93
- border: 0; // For `<button>`s
94
-
95
- @include hover-focus {
96
- color: $dropdown-link-hover-color;
97
- text-decoration: none;
98
- @include gradient-bg($dropdown-link-hover-bg);
99
- }
100
-
101
- &.active,
102
- &:active {
103
- color: $dropdown-link-active-color;
104
- text-decoration: none;
105
- @include gradient-bg($dropdown-link-active-bg);
106
- }
107
-
108
- &.disabled,
109
- &:disabled {
110
- color: $dropdown-link-disabled-color;
111
- background-color: transparent;
112
- // Remove CSS gradients if they're enabled
113
- @if $enable-gradients {
114
- background-image: none;
115
- }
116
- }
117
- }
118
-
119
- .dropdown-menu.show {
120
- display: block;
121
- }
122
-
123
- // Dropdown section headers
124
- .dropdown-header {
125
- display: block;
126
- padding: $dropdown-padding-y $dropdown-item-padding-x;
127
- margin-bottom: 0; // for use with heading elements
128
- font-size: $font-size-sm;
129
- color: $dropdown-header-color;
130
- white-space: nowrap; // as with > li > a
131
- }