flipper-ui 0.17.2 → 0.20.0.beta2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (153) hide show
  1. checksums.yaml +4 -4
  2. data/docs/ui/README.md +21 -22
  3. data/docs/ui/images/banner.png +0 -0
  4. data/docs/ui/images/description.png +0 -0
  5. data/docs/ui/images/feature.png +0 -0
  6. data/docs/ui/images/features.png +0 -0
  7. data/examples/ui/basic.ru +20 -0
  8. data/flipper-ui.gemspec +2 -3
  9. data/lib/flipper/ui.rb +0 -3
  10. data/lib/flipper/ui/action.rb +2 -1
  11. data/lib/flipper/ui/actions/feature.rb +5 -2
  12. data/lib/flipper/ui/actions/features.rb +14 -1
  13. data/lib/flipper/ui/actions/file.rb +1 -1
  14. data/lib/flipper/ui/assets/javascripts/application.coffee +5 -3
  15. data/lib/flipper/ui/configuration.rb +23 -10
  16. data/lib/flipper/ui/decorators/feature.rb +39 -13
  17. data/lib/flipper/ui/public/css/application.css +20 -6493
  18. data/lib/flipper/ui/public/js/application.js +5 -5
  19. data/lib/flipper/ui/util.rb +40 -0
  20. data/lib/flipper/ui/views/add_actor.erb +1 -1
  21. data/lib/flipper/ui/views/add_feature.erb +1 -1
  22. data/lib/flipper/ui/views/add_group.erb +1 -1
  23. data/lib/flipper/ui/views/feature.erb +198 -179
  24. data/lib/flipper/ui/views/features.erb +47 -36
  25. data/lib/flipper/ui/views/layout.erb +4 -14
  26. data/lib/flipper/version.rb +1 -1
  27. data/spec/flipper/ui/actions/actors_gate_spec.rb +0 -4
  28. data/spec/flipper/ui/actions/feature_spec.rb +14 -16
  29. data/spec/flipper/ui/actions/features_spec.rb +1 -5
  30. data/spec/flipper/ui/actions/file_spec.rb +0 -10
  31. data/spec/flipper/ui/actions/groups_gate_spec.rb +0 -6
  32. data/spec/flipper/ui/actions/percentage_of_actors_gate_spec.rb +0 -2
  33. data/spec/flipper/ui/actions/percentage_of_time_gate_spec.rb +0 -2
  34. data/spec/flipper/ui/configuration_spec.rb +58 -34
  35. data/spec/flipper/ui/decorators/feature_spec.rb +0 -30
  36. metadata +11 -127
  37. data/docs/ui/images/configured-ui.png +0 -0
  38. data/docs/ui/images/environment-banner.png +0 -0
  39. data/lib/flipper/ui/assets/stylesheets/.DS_Store +0 -0
  40. data/lib/flipper/ui/assets/stylesheets/application.scss +0 -19
  41. data/lib/flipper/ui/assets/stylesheets/bootstrap/_alert.scss +0 -51
  42. data/lib/flipper/ui/assets/stylesheets/bootstrap/_badge.scss +0 -47
  43. data/lib/flipper/ui/assets/stylesheets/bootstrap/_breadcrumb.scss +0 -38
  44. data/lib/flipper/ui/assets/stylesheets/bootstrap/_button-group.scss +0 -166
  45. data/lib/flipper/ui/assets/stylesheets/bootstrap/_buttons.scss +0 -143
  46. data/lib/flipper/ui/assets/stylesheets/bootstrap/_card.scss +0 -270
  47. data/lib/flipper/ui/assets/stylesheets/bootstrap/_carousel.scss +0 -191
  48. data/lib/flipper/ui/assets/stylesheets/bootstrap/_close.scss +0 -34
  49. data/lib/flipper/ui/assets/stylesheets/bootstrap/_code.scss +0 -56
  50. data/lib/flipper/ui/assets/stylesheets/bootstrap/_custom-forms.scss +0 -297
  51. data/lib/flipper/ui/assets/stylesheets/bootstrap/_dropdown.scss +0 -131
  52. data/lib/flipper/ui/assets/stylesheets/bootstrap/_forms.scss +0 -333
  53. data/lib/flipper/ui/assets/stylesheets/bootstrap/_functions.scss +0 -86
  54. data/lib/flipper/ui/assets/stylesheets/bootstrap/_grid.scss +0 -52
  55. data/lib/flipper/ui/assets/stylesheets/bootstrap/_images.scss +0 -42
  56. data/lib/flipper/ui/assets/stylesheets/bootstrap/_input-group.scss +0 -159
  57. data/lib/flipper/ui/assets/stylesheets/bootstrap/_jumbotron.scss +0 -16
  58. data/lib/flipper/ui/assets/stylesheets/bootstrap/_list-group.scss +0 -115
  59. data/lib/flipper/ui/assets/stylesheets/bootstrap/_media.scss +0 -8
  60. data/lib/flipper/ui/assets/stylesheets/bootstrap/_mixins.scss +0 -42
  61. data/lib/flipper/ui/assets/stylesheets/bootstrap/_modal.scss +0 -168
  62. data/lib/flipper/ui/assets/stylesheets/bootstrap/_nav.scss +0 -118
  63. data/lib/flipper/ui/assets/stylesheets/bootstrap/_navbar.scss +0 -311
  64. data/lib/flipper/ui/assets/stylesheets/bootstrap/_pagination.scss +0 -77
  65. data/lib/flipper/ui/assets/stylesheets/bootstrap/_popover.scss +0 -183
  66. data/lib/flipper/ui/assets/stylesheets/bootstrap/_print.scss +0 -124
  67. data/lib/flipper/ui/assets/stylesheets/bootstrap/_progress.scss +0 -33
  68. data/lib/flipper/ui/assets/stylesheets/bootstrap/_reboot.scss +0 -482
  69. data/lib/flipper/ui/assets/stylesheets/bootstrap/_root.scss +0 -19
  70. data/lib/flipper/ui/assets/stylesheets/bootstrap/_tables.scss +0 -180
  71. data/lib/flipper/ui/assets/stylesheets/bootstrap/_tooltip.scss +0 -115
  72. data/lib/flipper/ui/assets/stylesheets/bootstrap/_transitions.scss +0 -36
  73. data/lib/flipper/ui/assets/stylesheets/bootstrap/_type.scss +0 -125
  74. data/lib/flipper/ui/assets/stylesheets/bootstrap/_utilities.scss +0 -14
  75. data/lib/flipper/ui/assets/stylesheets/bootstrap/_variables.scss +0 -894
  76. data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap-grid.scss +0 -32
  77. data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap-reboot.scss +0 -12
  78. data/lib/flipper/ui/assets/stylesheets/bootstrap/bootstrap.scss +0 -42
  79. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_alert.scss +0 -13
  80. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_background-variant.scss +0 -21
  81. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_badge.scss +0 -12
  82. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_border-radius.scss +0 -35
  83. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_box-shadow.scss +0 -5
  84. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_breakpoints.scss +0 -123
  85. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_buttons.scss +0 -109
  86. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_caret.scss +0 -65
  87. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_clearfix.scss +0 -7
  88. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_float.scss +0 -11
  89. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_forms.scss +0 -137
  90. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_gradients.scss +0 -45
  91. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +0 -67
  92. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_grid.scss +0 -52
  93. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_hover.scss +0 -39
  94. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_image.scss +0 -36
  95. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_list-group.scss +0 -21
  96. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_lists.scss +0 -7
  97. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +0 -10
  98. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_navbar-align.scss +0 -10
  99. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_pagination.scss +0 -22
  100. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_reset-text.scss +0 -17
  101. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_resize.scss +0 -6
  102. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +0 -35
  103. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_size.scss +0 -6
  104. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_table-row.scss +0 -30
  105. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +0 -14
  106. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-hide.scss +0 -9
  107. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_text-truncate.scss +0 -8
  108. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_transition.scss +0 -9
  109. data/lib/flipper/ui/assets/stylesheets/bootstrap/mixins/_visibility.scss +0 -7
  110. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_align.scss +0 -8
  111. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_background.scss +0 -19
  112. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_borders.scss +0 -59
  113. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_clearfix.scss +0 -3
  114. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_display.scss +0 -38
  115. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_embed.scss +0 -52
  116. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_flex.scss +0 -46
  117. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_float.scss +0 -9
  118. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_position.scss +0 -36
  119. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +0 -11
  120. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_sizing.scss +0 -12
  121. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_spacing.scss +0 -51
  122. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_text.scss +0 -52
  123. data/lib/flipper/ui/assets/stylesheets/bootstrap/utilities/_visibility.scss +0 -11
  124. data/lib/flipper/ui/assets/stylesheets/primer/.scss-lint.yml +0 -446
  125. data/lib/flipper/ui/assets/stylesheets/primer/_alerts.scss +0 -106
  126. data/lib/flipper/ui/assets/stylesheets/primer/_avatars.scss +0 -36
  127. data/lib/flipper/ui/assets/stylesheets/primer/_base.scss +0 -40
  128. data/lib/flipper/ui/assets/stylesheets/primer/_blankslate.scss +0 -96
  129. data/lib/flipper/ui/assets/stylesheets/primer/_buttons.scss +0 -404
  130. data/lib/flipper/ui/assets/stylesheets/primer/_counter.scss +0 -10
  131. data/lib/flipper/ui/assets/stylesheets/primer/_filter-list.scss +0 -68
  132. data/lib/flipper/ui/assets/stylesheets/primer/_flex-table.scss +0 -20
  133. data/lib/flipper/ui/assets/stylesheets/primer/_forms.scss +0 -756
  134. data/lib/flipper/ui/assets/stylesheets/primer/_layout.scss +0 -69
  135. data/lib/flipper/ui/assets/stylesheets/primer/_menu.scss +0 -113
  136. data/lib/flipper/ui/assets/stylesheets/primer/_mixins.scss +0 -53
  137. data/lib/flipper/ui/assets/stylesheets/primer/_normalize.scss +0 -425
  138. data/lib/flipper/ui/assets/stylesheets/primer/_states.scss +0 -32
  139. data/lib/flipper/ui/assets/stylesheets/primer/_tabnav.scss +0 -65
  140. data/lib/flipper/ui/assets/stylesheets/primer/_tooltips.scss +0 -255
  141. data/lib/flipper/ui/assets/stylesheets/primer/_truncate.scss +0 -27
  142. data/lib/flipper/ui/assets/stylesheets/primer/_type.scss +0 -92
  143. data/lib/flipper/ui/assets/stylesheets/primer/_utility.scss +0 -73
  144. data/lib/flipper/ui/assets/stylesheets/primer/_variables.scss +0 -34
  145. data/lib/flipper/ui/assets/stylesheets/primer/primer.scss +0 -39
  146. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.eot +0 -0
  147. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.svg +0 -288
  148. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.ttf +0 -0
  149. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.woff +0 -0
  150. data/lib/flipper/ui/public/fonts/bootstrap/glyphicons-halflings-regular.woff2 +0 -0
  151. data/lib/flipper/ui/public/images/remove.png +0 -0
  152. data/lib/flipper/ui/public/octicons/octicons.less +0 -235
  153. 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
- }