rails-active-ui 0.3.0 → 0.3.2

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 (197) hide show
  1. checksums.yaml +4 -4
  2. data/app/javascript/ui/controllers/turbo_modal_controller.js +36 -0
  3. data/config/importmap.rb +1 -0
  4. data/formantic-ui/components/accordion.css +369 -0
  5. data/formantic-ui/components/accordion.js +595 -0
  6. data/formantic-ui/components/accordion.min.css +9 -0
  7. data/formantic-ui/components/accordion.min.js +11 -0
  8. data/formantic-ui/components/ad.css +264 -0
  9. data/formantic-ui/components/ad.min.css +10 -0
  10. data/formantic-ui/components/api.js +1225 -0
  11. data/formantic-ui/components/api.min.js +11 -0
  12. data/formantic-ui/components/breadcrumb.css +135 -0
  13. data/formantic-ui/components/breadcrumb.min.css +9 -0
  14. data/formantic-ui/components/button.css +4058 -0
  15. data/formantic-ui/components/button.min.css +9 -0
  16. data/formantic-ui/components/calendar.css +327 -0
  17. data/formantic-ui/components/calendar.js +2045 -0
  18. data/formantic-ui/components/calendar.min.css +9 -0
  19. data/formantic-ui/components/calendar.min.js +11 -0
  20. data/formantic-ui/components/card.css +1881 -0
  21. data/formantic-ui/components/card.min.css +9 -0
  22. data/formantic-ui/components/checkbox.css +785 -0
  23. data/formantic-ui/components/checkbox.js +888 -0
  24. data/formantic-ui/components/checkbox.min.css +9 -0
  25. data/formantic-ui/components/checkbox.min.js +11 -0
  26. data/formantic-ui/components/comment.css +283 -0
  27. data/formantic-ui/components/comment.min.css +9 -0
  28. data/formantic-ui/components/container.css +300 -0
  29. data/formantic-ui/components/container.min.css +9 -0
  30. data/formantic-ui/components/dimmer.css +367 -0
  31. data/formantic-ui/components/dimmer.js +732 -0
  32. data/formantic-ui/components/dimmer.min.css +9 -0
  33. data/formantic-ui/components/dimmer.min.js +11 -0
  34. data/formantic-ui/components/divider.css +287 -0
  35. data/formantic-ui/components/divider.min.css +9 -0
  36. data/formantic-ui/components/dropdown.css +2087 -0
  37. data/formantic-ui/components/dropdown.js +4432 -0
  38. data/formantic-ui/components/dropdown.min.css +9 -0
  39. data/formantic-ui/components/dropdown.min.js +11 -0
  40. data/formantic-ui/components/embed.css +155 -0
  41. data/formantic-ui/components/embed.js +688 -0
  42. data/formantic-ui/components/embed.min.css +9 -0
  43. data/formantic-ui/components/embed.min.js +11 -0
  44. data/formantic-ui/components/emoji.css +15311 -0
  45. data/formantic-ui/components/emoji.min.css +9 -0
  46. data/formantic-ui/components/feed.css +799 -0
  47. data/formantic-ui/components/feed.min.css +9 -0
  48. data/formantic-ui/components/flag.css +1149 -0
  49. data/formantic-ui/components/flag.min.css +9 -0
  50. data/formantic-ui/components/flyout.css +546 -0
  51. data/formantic-ui/components/flyout.js +1551 -0
  52. data/formantic-ui/components/flyout.min.css +9 -0
  53. data/formantic-ui/components/flyout.min.js +11 -0
  54. data/formantic-ui/components/form.css +1885 -0
  55. data/formantic-ui/components/form.js +2199 -0
  56. data/formantic-ui/components/form.min.css +9 -0
  57. data/formantic-ui/components/form.min.js +11 -0
  58. data/formantic-ui/components/grid.css +1952 -0
  59. data/formantic-ui/components/grid.min.css +9 -0
  60. data/formantic-ui/components/header.css +778 -0
  61. data/formantic-ui/components/header.min.css +9 -0
  62. data/formantic-ui/components/icon.css +7066 -0
  63. data/formantic-ui/components/icon.min.css +9 -0
  64. data/formantic-ui/components/image.css +315 -0
  65. data/formantic-ui/components/image.min.css +9 -0
  66. data/formantic-ui/components/input.css +1566 -0
  67. data/formantic-ui/components/input.min.css +9 -0
  68. data/formantic-ui/components/item.css +534 -0
  69. data/formantic-ui/components/item.min.css +9 -0
  70. data/formantic-ui/components/label.css +2114 -0
  71. data/formantic-ui/components/label.min.css +9 -0
  72. data/formantic-ui/components/list.css +955 -0
  73. data/formantic-ui/components/list.min.css +9 -0
  74. data/formantic-ui/components/loader.css +787 -0
  75. data/formantic-ui/components/loader.min.css +9 -0
  76. data/formantic-ui/components/menu.css +2131 -0
  77. data/formantic-ui/components/menu.min.css +9 -0
  78. data/formantic-ui/components/message.css +619 -0
  79. data/formantic-ui/components/message.min.css +9 -0
  80. data/formantic-ui/components/modal.css +779 -0
  81. data/formantic-ui/components/modal.js +1637 -0
  82. data/formantic-ui/components/modal.min.css +9 -0
  83. data/formantic-ui/components/modal.min.js +11 -0
  84. data/formantic-ui/components/nag.css +290 -0
  85. data/formantic-ui/components/nag.js +566 -0
  86. data/formantic-ui/components/nag.min.css +9 -0
  87. data/formantic-ui/components/nag.min.js +11 -0
  88. data/formantic-ui/components/placeholder.css +228 -0
  89. data/formantic-ui/components/placeholder.min.css +9 -0
  90. data/formantic-ui/components/popup.css +1184 -0
  91. data/formantic-ui/components/popup.js +1561 -0
  92. data/formantic-ui/components/popup.min.css +9 -0
  93. data/formantic-ui/components/popup.min.js +11 -0
  94. data/formantic-ui/components/progress.css +761 -0
  95. data/formantic-ui/components/progress.js +979 -0
  96. data/formantic-ui/components/progress.min.css +9 -0
  97. data/formantic-ui/components/progress.min.js +11 -0
  98. data/formantic-ui/components/rail.css +147 -0
  99. data/formantic-ui/components/rail.min.css +9 -0
  100. data/formantic-ui/components/rating.css +414 -0
  101. data/formantic-ui/components/rating.js +540 -0
  102. data/formantic-ui/components/rating.min.css +9 -0
  103. data/formantic-ui/components/rating.min.js +11 -0
  104. data/formantic-ui/components/reset.css +386 -0
  105. data/formantic-ui/components/reset.min.css +9 -0
  106. data/formantic-ui/components/reveal.css +277 -0
  107. data/formantic-ui/components/reveal.min.css +9 -0
  108. data/formantic-ui/components/search.css +541 -0
  109. data/formantic-ui/components/search.js +1641 -0
  110. data/formantic-ui/components/search.min.css +9 -0
  111. data/formantic-ui/components/search.min.js +11 -0
  112. data/formantic-ui/components/segment.css +1053 -0
  113. data/formantic-ui/components/segment.min.css +9 -0
  114. data/formantic-ui/components/shape.css +144 -0
  115. data/formantic-ui/components/shape.js +797 -0
  116. data/formantic-ui/components/shape.min.css +9 -0
  117. data/formantic-ui/components/shape.min.js +11 -0
  118. data/formantic-ui/components/sidebar.css +539 -0
  119. data/formantic-ui/components/sidebar.js +1054 -0
  120. data/formantic-ui/components/sidebar.min.css +9 -0
  121. data/formantic-ui/components/sidebar.min.js +11 -0
  122. data/formantic-ui/components/site.css +286 -0
  123. data/formantic-ui/components/site.js +455 -0
  124. data/formantic-ui/components/site.min.css +9 -0
  125. data/formantic-ui/components/site.min.js +11 -0
  126. data/formantic-ui/components/slider.css +926 -0
  127. data/formantic-ui/components/slider.js +1546 -0
  128. data/formantic-ui/components/slider.min.css +9 -0
  129. data/formantic-ui/components/slider.min.js +11 -0
  130. data/formantic-ui/components/state.js +697 -0
  131. data/formantic-ui/components/state.min.js +11 -0
  132. data/formantic-ui/components/statistic.css +586 -0
  133. data/formantic-ui/components/statistic.min.css +9 -0
  134. data/formantic-ui/components/step.css +1538 -0
  135. data/formantic-ui/components/step.min.css +9 -0
  136. data/formantic-ui/components/sticky.css +73 -0
  137. data/formantic-ui/components/sticky.js +917 -0
  138. data/formantic-ui/components/sticky.min.css +9 -0
  139. data/formantic-ui/components/sticky.min.js +11 -0
  140. data/formantic-ui/components/tab.css +84 -0
  141. data/formantic-ui/components/tab.js +967 -0
  142. data/formantic-ui/components/tab.min.css +9 -0
  143. data/formantic-ui/components/tab.min.js +11 -0
  144. data/formantic-ui/components/table.css +3473 -0
  145. data/formantic-ui/components/table.min.css +9 -0
  146. data/formantic-ui/components/text.css +155 -0
  147. data/formantic-ui/components/text.min.css +9 -0
  148. data/formantic-ui/components/toast.css +751 -0
  149. data/formantic-ui/components/toast.js +964 -0
  150. data/formantic-ui/components/toast.min.css +9 -0
  151. data/formantic-ui/components/toast.min.js +11 -0
  152. data/formantic-ui/components/transition.css +1148 -0
  153. data/formantic-ui/components/transition.js +1034 -0
  154. data/formantic-ui/components/transition.min.css +9 -0
  155. data/formantic-ui/components/transition.min.js +11 -0
  156. data/formantic-ui/components/visibility.js +1292 -0
  157. data/formantic-ui/components/visibility.min.js +11 -0
  158. data/formantic-ui/semantic.css +78485 -0
  159. data/formantic-ui/semantic.js +31036 -0
  160. data/formantic-ui/semantic.min.css +11 -0
  161. data/formantic-ui/semantic.min.js +11 -0
  162. data/formantic-ui/themes/basic/assets/fonts/LICENSE.txt +91 -0
  163. data/formantic-ui/themes/basic/assets/fonts/icons.woff +0 -0
  164. data/formantic-ui/themes/basic/assets/fonts/icons.woff2 +0 -0
  165. data/formantic-ui/themes/default/assets/fonts/LICENSE_Lato.txt +94 -0
  166. data/formantic-ui/themes/default/assets/fonts/LICENSE_icons.txt +165 -0
  167. data/formantic-ui/themes/default/assets/fonts/Lato-Bold.woff +0 -0
  168. data/formantic-ui/themes/default/assets/fonts/Lato-Bold.woff2 +0 -0
  169. data/formantic-ui/themes/default/assets/fonts/Lato-BoldItalic.woff +0 -0
  170. data/formantic-ui/themes/default/assets/fonts/Lato-BoldItalic.woff2 +0 -0
  171. data/formantic-ui/themes/default/assets/fonts/Lato-Italic.woff +0 -0
  172. data/formantic-ui/themes/default/assets/fonts/Lato-Italic.woff2 +0 -0
  173. data/formantic-ui/themes/default/assets/fonts/Lato-Regular.woff +0 -0
  174. data/formantic-ui/themes/default/assets/fonts/Lato-Regular.woff2 +0 -0
  175. data/formantic-ui/themes/default/assets/fonts/LatoLatin-Bold.woff +0 -0
  176. data/formantic-ui/themes/default/assets/fonts/LatoLatin-Bold.woff2 +0 -0
  177. data/formantic-ui/themes/default/assets/fonts/LatoLatin-BoldItalic.woff +0 -0
  178. data/formantic-ui/themes/default/assets/fonts/LatoLatin-BoldItalic.woff2 +0 -0
  179. data/formantic-ui/themes/default/assets/fonts/LatoLatin-Italic.woff +0 -0
  180. data/formantic-ui/themes/default/assets/fonts/LatoLatin-Italic.woff2 +0 -0
  181. data/formantic-ui/themes/default/assets/fonts/LatoLatin-Regular.woff +0 -0
  182. data/formantic-ui/themes/default/assets/fonts/LatoLatin-Regular.woff2 +0 -0
  183. data/formantic-ui/themes/default/assets/fonts/brand-icons.woff +0 -0
  184. data/formantic-ui/themes/default/assets/fonts/brand-icons.woff2 +0 -0
  185. data/formantic-ui/themes/default/assets/fonts/icons.woff +0 -0
  186. data/formantic-ui/themes/default/assets/fonts/icons.woff2 +0 -0
  187. data/formantic-ui/themes/default/assets/fonts/outline-icons.woff +0 -0
  188. data/formantic-ui/themes/default/assets/fonts/outline-icons.woff2 +0 -0
  189. data/formantic-ui/themes/famfamfam/assets/images/flags.png +0 -0
  190. data/formantic-ui/themes/github/assets/fonts/LICENSE.txt +94 -0
  191. data/formantic-ui/themes/github/assets/fonts/octicons.woff +0 -0
  192. data/formantic-ui/themes/github/assets/fonts/octicons.woff2 +0 -0
  193. data/formantic-ui/themes/material/assets/fonts/LICENSE.txt +202 -0
  194. data/formantic-ui/themes/material/assets/fonts/icons.woff +0 -0
  195. data/formantic-ui/themes/material/assets/fonts/icons.woff2 +0 -0
  196. data/lib/ui/version.rb +1 -1
  197. metadata +194 -1
@@ -0,0 +1,2087 @@
1
+ /*!
2
+ * # Fomantic-UI 2.9.4 - Dropdown
3
+ * https://github.com/fomantic/Fomantic-UI/
4
+ *
5
+ *
6
+ * Released under the MIT license
7
+ * https://opensource.org/licenses/MIT
8
+ *
9
+ */
10
+
11
+
12
+ /*******************************
13
+ Dropdown
14
+ *******************************/
15
+
16
+ .ui.dropdown {
17
+ cursor: pointer;
18
+ position: relative;
19
+ display: inline-block;
20
+ outline: none;
21
+ text-align: left;
22
+ transition: box-shadow 0.1s ease, width 0.1s ease;
23
+ -webkit-user-select: none;
24
+ -ms-user-select: none;
25
+ user-select: none;
26
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
27
+ }
28
+
29
+
30
+ /*******************************
31
+ Content
32
+ *******************************/
33
+
34
+
35
+ /* --------------
36
+ Menu
37
+ --------------- */
38
+ .ui.dropdown .menu {
39
+ cursor: auto;
40
+ position: absolute;
41
+ display: none;
42
+ outline: none;
43
+ top: 100%;
44
+ min-width: max-content;
45
+ margin: 0;
46
+ padding: 0;
47
+ background: #fff;
48
+ font-size: 1em;
49
+ text-shadow: none;
50
+ text-align: left;
51
+ box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
52
+ border: 1px solid rgba(34, 36, 38, 0.15);
53
+ border-radius: 0.28571429rem;
54
+ transition: opacity 0.1s ease;
55
+ z-index: 11;
56
+ will-change: transform, opacity;
57
+ }
58
+ .ui.dropdown .menu > * {
59
+ white-space: nowrap;
60
+ }
61
+
62
+ /* --------------
63
+ Hidden Input
64
+ --------------- */
65
+ .ui.dropdown > input:not(.search):first-child,
66
+ .ui.dropdown > select {
67
+ display: none !important;
68
+ }
69
+
70
+ /* --------------
71
+ Dropdown Icon
72
+ --------------- */
73
+ .ui.dropdown:not(.labeled) > .dropdown.icon {
74
+ position: relative;
75
+ width: auto;
76
+ min-width: 1em;
77
+ font-size: 0.85714286em;
78
+ margin: 0 0 0 1em;
79
+ }
80
+ .ui.dropdown .menu > .item .dropdown.icon {
81
+ width: auto;
82
+ float: right;
83
+ margin: 0em 0 0 1em;
84
+ }
85
+ .ui.dropdown .menu > .item .dropdown.icon + .text {
86
+ margin-right: 1em;
87
+ }
88
+
89
+ /* --------------
90
+ Text
91
+ --------------- */
92
+ .ui.dropdown > .text {
93
+ display: inline-block;
94
+ transition: none;
95
+ }
96
+
97
+ /* --------------
98
+ Menu Item
99
+ --------------- */
100
+ .ui.dropdown .menu > .item {
101
+ position: relative;
102
+ cursor: pointer;
103
+ display: block;
104
+ border: none;
105
+ height: auto;
106
+ min-height: 2.57142857rem;
107
+ text-align: left;
108
+ border-top: none;
109
+ line-height: 1em;
110
+ font-size: 1rem;
111
+ color: rgba(0, 0, 0, 0.87);
112
+ padding: 0.78571429rem 1.14285714rem;
113
+ text-transform: none;
114
+ font-weight: normal;
115
+ box-shadow: none;
116
+ -webkit-touch-callout: none;
117
+ }
118
+ .ui.dropdown .menu > .item:first-child {
119
+ border-top-width: 0;
120
+ }
121
+ .ui.dropdown .menu > .item.vertical {
122
+ display: flex;
123
+ flex-direction: column-reverse;
124
+ }
125
+
126
+ /* --------------
127
+ Floated Content
128
+ --------------- */
129
+ .ui.dropdown > .text > [class*="right floated"],
130
+ .ui.dropdown .menu .item > [class*="right floated"] {
131
+ float: right !important;
132
+ margin-right: 0 !important;
133
+ margin-left: 1em !important;
134
+ }
135
+ .ui.dropdown > .text > [class*="left floated"],
136
+ .ui.dropdown .menu .item > [class*="left floated"] {
137
+ float: left !important;
138
+ margin-left: 0 !important;
139
+ margin-right: 1em !important;
140
+ }
141
+ .ui.dropdown .menu .item > i.icon.floated,
142
+ .ui.dropdown .menu .item > .flag.floated,
143
+ .ui.dropdown .menu .item > .image.floated,
144
+ .ui.dropdown .menu .item > img.floated {
145
+ margin-top: 0em;
146
+ }
147
+
148
+ /* --------------
149
+ Menu Divider
150
+ --------------- */
151
+ .ui.dropdown .menu > .header {
152
+ margin: 1rem 0 0.75rem;
153
+ padding: 0 1.14285714rem;
154
+ font-weight: bold;
155
+ text-transform: uppercase;
156
+ }
157
+ .ui.dropdown .menu > .header:not(.ui) {
158
+ color: rgba(0, 0, 0, 0.85);
159
+ font-size: 0.78571429em;
160
+ }
161
+ .ui.dropdown .menu > .divider {
162
+ border-top: 1px solid rgba(34, 36, 38, 0.1);
163
+ height: 0;
164
+ margin: 0.5em 0;
165
+ }
166
+ .ui.dropdown .menu > .horizontal.divider {
167
+ border-top: none;
168
+ }
169
+ .ui.ui.ui.dropdown .menu > .input {
170
+ width: auto;
171
+ display: flex;
172
+ margin: 1.14285714rem 0.78571429rem;
173
+ min-width: 10rem;
174
+ }
175
+ .ui.dropdown .menu > .header + .input {
176
+ margin-top: 0;
177
+ }
178
+ .ui.dropdown .menu > .input:not(.transparent) input {
179
+ padding: 0.5em 1em;
180
+ }
181
+ .ui.dropdown .menu > .input:not(.transparent) .button,
182
+ .ui.dropdown .menu > .input:not(.transparent) i.icon,
183
+ .ui.dropdown .menu > .input:not(.transparent) .label {
184
+ padding-top: 0.5em;
185
+ padding-bottom: 0.5em;
186
+ }
187
+
188
+ /* -----------------
189
+ Item Description
190
+ ------------------- */
191
+ .ui.dropdown > .text > .description,
192
+ .ui.dropdown .menu > .item > .description {
193
+ float: right;
194
+ margin: 0 0 0 1em;
195
+ color: rgba(0, 0, 0, 0.4);
196
+ }
197
+ .ui.dropdown .menu > .item.vertical > .description {
198
+ margin: 0;
199
+ }
200
+
201
+ /* -----------------
202
+ Item Text
203
+ ------------------- */
204
+ .ui.dropdown .menu > .item.vertical > .text {
205
+ margin-bottom: 0.25em;
206
+ }
207
+
208
+ /* -----------------
209
+ Message
210
+ ------------------- */
211
+ .ui.dropdown .menu > .message {
212
+ padding: 0.78571429rem 1.14285714rem;
213
+ font-weight: normal;
214
+ }
215
+ .ui.dropdown .menu > .message:not(.ui) {
216
+ color: rgba(0, 0, 0, 0.4);
217
+ }
218
+
219
+ /* --------------
220
+ Sub Menu
221
+ --------------- */
222
+ .ui.dropdown .menu .menu {
223
+ top: 0;
224
+ left: 100%;
225
+ right: auto;
226
+ margin: 0 -0.5em !important;
227
+ border-radius: 0.28571429rem !important;
228
+ z-index: 21 !important;
229
+ }
230
+
231
+ /* Hide Arrow */
232
+ .ui.dropdown .menu .menu::after {
233
+ display: none;
234
+ }
235
+
236
+ /* --------------
237
+ Sub Elements
238
+ --------------- */
239
+
240
+ /* Icons / Flags / Labels / Image */
241
+ .ui.dropdown > .text > i.icons,
242
+ .ui.dropdown > .text > i.icon,
243
+ .ui.dropdown > .text > .label,
244
+ .ui.dropdown > .text > .flag,
245
+ .ui.dropdown > .text > img,
246
+ .ui.dropdown > .text > .image {
247
+ margin-top: 0em;
248
+ }
249
+ .ui.dropdown .menu > .item > i.icons,
250
+ .ui.dropdown .menu > .item > i.icon,
251
+ .ui.dropdown .menu > .item > .label,
252
+ .ui.dropdown .menu > .item > .flag,
253
+ .ui.dropdown .menu > .item > .image,
254
+ .ui.dropdown .menu > .item > img {
255
+ margin-top: 0em;
256
+ }
257
+ .ui.dropdown > .text > i.icons,
258
+ .ui.dropdown > .text > i.icon,
259
+ .ui.dropdown > .text > .label,
260
+ .ui.dropdown > .text > .flag,
261
+ .ui.dropdown > .text > img,
262
+ .ui.dropdown > .text > .image,
263
+ .ui.dropdown .menu > .item > i.icons,
264
+ .ui.dropdown .menu > .item > i.icon,
265
+ .ui.dropdown .menu > .item > .label,
266
+ .ui.dropdown .menu > .item > .flag,
267
+ .ui.dropdown .menu > .item > .image,
268
+ .ui.dropdown .menu > .item > img {
269
+ margin-left: 0;
270
+ float: none;
271
+ margin-right: 0.78571429rem;
272
+ }
273
+
274
+ /* --------------
275
+ Image
276
+ --------------- */
277
+ .ui.dropdown > .text > img,
278
+ .ui.dropdown > .text > .image:not(.icon),
279
+ .ui.dropdown .menu > .item > .image:not(.icon),
280
+ .ui.dropdown .menu > .item > img {
281
+ display: inline-block;
282
+ vertical-align: top;
283
+ width: auto;
284
+ margin-top: -0.5em;
285
+ margin-bottom: -0.5em;
286
+ max-height: 2em;
287
+ }
288
+
289
+
290
+ /*******************************
291
+ Coupling
292
+ *******************************/
293
+
294
+
295
+ /* --------------
296
+ Menu
297
+ --------------- */
298
+
299
+ /* Remove Menu Item Divider */
300
+ .ui.dropdown .ui.menu > .item::before,
301
+ .ui.menu .ui.dropdown .menu > .item::before {
302
+ display: none;
303
+ }
304
+
305
+ /* Prevent Menu Item Border */
306
+ .ui.menu .ui.dropdown .menu .active.item {
307
+ border-left: none;
308
+ }
309
+
310
+ /* Automatically float dropdown menu right on last menu item */
311
+ .ui.menu .right.menu .dropdown:last-child > .menu:not(.left),
312
+ .ui.menu .right.dropdown.item > .menu:not(.left),
313
+ .ui.buttons > .ui.dropdown:last-child > .menu:not(.left) {
314
+ left: auto;
315
+ right: 0;
316
+ }
317
+
318
+ /* --------------
319
+ Label
320
+ --------------- */
321
+
322
+ /* Dropdown Menu */
323
+ .ui.label.dropdown .menu {
324
+ min-width: 100%;
325
+ }
326
+
327
+ /* --------------
328
+ Button
329
+ --------------- */
330
+
331
+ /* No Margin On Icon Button */
332
+ .ui.dropdown.icon.button > .dropdown.icon {
333
+ margin: 0;
334
+ }
335
+ .ui.dropdown.button .menu {
336
+ min-width: 100%;
337
+ }
338
+ .ui.dropdown.button:not(.pointing):not(.floating).active {
339
+ border-radius: 0.28571429rem 0.28571429rem 0 0;
340
+ }
341
+ .ui.dropdown.button:not(.pointing):not(.floating) > .menu {
342
+ border-radius: 0 0 0.28571429rem 0.28571429rem;
343
+ }
344
+
345
+
346
+ /*******************************
347
+ Types
348
+ *******************************/
349
+
350
+ select.ui.dropdown {
351
+ height: 38px;
352
+ padding: 0.5em;
353
+ border: 1px solid rgba(34, 36, 38, 0.15);
354
+ visibility: visible;
355
+ }
356
+
357
+ /* --------------
358
+ Selection
359
+ --------------- */
360
+
361
+ /* Displays like a select box */
362
+ .ui.selection.dropdown {
363
+ cursor: pointer;
364
+ word-wrap: break-word;
365
+ line-height: 1em;
366
+ white-space: normal;
367
+ outline: 0;
368
+ transform: rotateZ(0);
369
+ min-width: 14em;
370
+ min-height: 2.71428571em;
371
+ background: #fff;
372
+ display: inline-block;
373
+ padding: 0.78571429em 3.2em 0.78571429em 1em;
374
+ color: rgba(0, 0, 0, 0.87);
375
+ box-shadow: none;
376
+ border: 1px solid rgba(34, 36, 38, 0.15);
377
+ border-radius: 0.28571429rem;
378
+ transition: box-shadow 0.1s ease, width 0.1s ease;
379
+ }
380
+ .ui.selection.dropdown.visible,
381
+ .ui.selection.dropdown.active {
382
+ z-index: 10;
383
+ }
384
+ .ui.selection.dropdown > .search.icon,
385
+ .ui.selection.dropdown > .delete.icon,
386
+ .ui.selection.dropdown > .dropdown.icon {
387
+ cursor: pointer;
388
+ position: absolute;
389
+ width: auto;
390
+ height: auto;
391
+ line-height: 1.21428571em;
392
+ top: 0.78571429em;
393
+ right: 1em;
394
+ z-index: 3;
395
+ margin: -0.78571429em;
396
+ padding: 0.91666667em;
397
+ opacity: 0.5;
398
+ transition: opacity 0.1s ease;
399
+ }
400
+
401
+ /* Compact */
402
+ .ui.compact.selection.dropdown {
403
+ min-width: 0;
404
+ }
405
+ .ui.compact.selection.dropdown > .menu {
406
+ width: auto;
407
+ }
408
+ .ui.compact.selection.dropdown > .menu:not(.multiline) {
409
+ width: max-content;
410
+ }
411
+
412
+ /* Selection Menu */
413
+ .ui.selection.dropdown:not(.unlimited) .menu {
414
+ overflow-x: hidden;
415
+ overflow-y: auto;
416
+ -ms-scroll-chaining: none;
417
+ overscroll-behavior: none;
418
+ -webkit-backface-visibility: hidden;
419
+ backface-visibility: hidden;
420
+ }
421
+ .ui.selection.dropdown .menu {
422
+ outline: none;
423
+ margin: 0 -1px;
424
+ min-width: calc(100% + 2px);
425
+ width: calc(100% + 2px);
426
+ box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
427
+ transition: opacity 0.1s ease;
428
+ }
429
+ .ui.selection.dropdown:not(.pointing):not(.floating) > .menu {
430
+ border-top-width: 0;
431
+ border-radius: 0 0 0.28571429rem 0.28571429rem;
432
+ }
433
+ .ui.selection.dropdown .menu::after,
434
+ .ui.selection.dropdown .menu::before {
435
+ display: none;
436
+ }
437
+
438
+ /* --------------
439
+ Message
440
+ --------------- */
441
+ .ui.selection.dropdown .menu > .message {
442
+ padding: 0.78571429rem 1.14285714rem;
443
+ }
444
+ @media only screen and (max-width: 767.98px) {
445
+ .ui.ui.selection.dropdown.short .menu {
446
+ max-height: 6.01071429rem;
447
+ }
448
+ .ui.ui.selection.dropdown[class*="very short"] .menu {
449
+ max-height: 4.00714286rem;
450
+ }
451
+ .ui.selection.dropdown:not(.unlimited) .menu {
452
+ max-height: 8.01428571rem;
453
+ }
454
+ .ui.ui.selection.dropdown.long .menu {
455
+ max-height: 16.02857143rem;
456
+ }
457
+ .ui.ui.selection.dropdown[class*="very long"] .menu {
458
+ max-height: 24.04285714rem;
459
+ }
460
+ }
461
+ @media only screen and (min-width: 768px) {
462
+ .ui.ui.selection.dropdown.short .menu {
463
+ max-height: 8.01428571rem;
464
+ }
465
+ .ui.ui.selection.dropdown[class*="very short"] .menu {
466
+ max-height: 5.34285714rem;
467
+ }
468
+ .ui.selection.dropdown:not(.unlimited) .menu {
469
+ max-height: 10.68571429rem;
470
+ }
471
+ .ui.ui.selection.dropdown.long .menu {
472
+ max-height: 21.37142857rem;
473
+ }
474
+ .ui.ui.selection.dropdown[class*="very long"] .menu {
475
+ max-height: 32.05714286rem;
476
+ }
477
+ }
478
+ @media only screen and (min-width: 992px) {
479
+ .ui.ui.selection.dropdown.short .menu {
480
+ max-height: 12.02142857rem;
481
+ }
482
+ .ui.ui.selection.dropdown[class*="very short"] .menu {
483
+ max-height: 8.01428571rem;
484
+ }
485
+ .ui.selection.dropdown:not(.unlimited) .menu {
486
+ max-height: 16.02857143rem;
487
+ }
488
+ .ui.ui.selection.dropdown.long .menu {
489
+ max-height: 32.05714286rem;
490
+ }
491
+ .ui.ui.selection.dropdown[class*="very long"] .menu {
492
+ max-height: 48.08571429rem;
493
+ }
494
+ }
495
+ @media only screen and (min-width: 1920px) {
496
+ .ui.ui.selection.dropdown.short .menu {
497
+ max-height: 16.02857143rem;
498
+ }
499
+ .ui.ui.selection.dropdown[class*="very short"] .menu {
500
+ max-height: 10.68571429rem;
501
+ }
502
+ .ui.selection.dropdown:not(.unlimited) .menu {
503
+ max-height: 21.37142857rem;
504
+ }
505
+ .ui.ui.selection.dropdown.long .menu {
506
+ max-height: 42.74285714rem;
507
+ }
508
+ .ui.ui.selection.dropdown[class*="very long"] .menu {
509
+ max-height: 64.11428571rem;
510
+ }
511
+ }
512
+
513
+ /* Menu Item */
514
+ .ui.selection.dropdown .menu > .item {
515
+ border-top: 1px solid #fafafa;
516
+ padding: 0.78571429rem 1.14285714rem;
517
+ white-space: normal;
518
+ word-wrap: normal;
519
+ }
520
+ .ui.selection.pointing.dropdown .menu > .item:first-child,
521
+ .ui.selection.floating.dropdown .menu > .item:first-child {
522
+ border-top: none;
523
+ }
524
+
525
+ /* User Item */
526
+ .ui.selection.dropdown .menu > .hidden.addition.item {
527
+ display: none;
528
+ }
529
+
530
+ /* User addition item */
531
+ .ui.dropdown > .menu > .stuck.addition.item:first-child {
532
+ position: sticky;
533
+ top: 0;
534
+ box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
535
+ background: #fff;
536
+ z-index: 14;
537
+ }
538
+
539
+ /* Hover */
540
+ .ui.selection.dropdown:hover {
541
+ border-color: rgba(34, 36, 38, 0.35);
542
+ box-shadow: none;
543
+ }
544
+
545
+ /* Active */
546
+ .ui.selection.simple.dropdown:hover,
547
+ .ui.selection.active.dropdown {
548
+ border-color: #96c8da;
549
+ box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
550
+ }
551
+ .ui.selection.simple.dropdown:hover .menu,
552
+ .ui.selection.active.dropdown .menu {
553
+ border-color: #96c8da;
554
+ box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
555
+ }
556
+
557
+ /* Focus */
558
+ .ui.selection.dropdown:focus {
559
+ border-color: #96c8da;
560
+ box-shadow: none;
561
+ }
562
+ .ui.selection.dropdown:focus .menu {
563
+ border-color: #96c8da;
564
+ box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
565
+ }
566
+ @supports selector(:has(.f)) {
567
+ .ui.ui.selection.dropdown:not(.inverted):has(> input:focus) {
568
+ border-color: #96c8da;
569
+ box-shadow: none;
570
+ }
571
+ .ui.ui.selection.dropdown:not(.inverted):has(> input:focus) > i.icon {
572
+ opacity: 1;
573
+ }
574
+ }
575
+ .ui.ui.selection.dropdown:focus > i.icon {
576
+ opacity: 1;
577
+ }
578
+
579
+ /* Visible */
580
+ .ui.selection.visible.dropdown > .text:not(.default) {
581
+ font-weight: normal;
582
+ color: rgba(0, 0, 0, 0.8);
583
+ }
584
+
585
+ /* Visible Hover */
586
+ .ui.selection.active.dropdown:hover {
587
+ border-color: #96c8da;
588
+ box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
589
+ }
590
+ .ui.selection.active.dropdown:hover .menu {
591
+ border-color: #96c8da;
592
+ box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
593
+ }
594
+
595
+ /* Dropdown Icon */
596
+ .ui.active.selection.dropdown > .dropdown.icon,
597
+ .ui.visible.selection.dropdown > .dropdown.icon {
598
+ opacity: "";
599
+ z-index: 3;
600
+ }
601
+
602
+ /* Connecting Border */
603
+ .ui.active.selection.dropdown:not(.pointing):not(.floating) {
604
+ border-bottom-left-radius: 0 !important;
605
+ border-bottom-right-radius: 0 !important;
606
+ }
607
+
608
+ /* Empty Connecting Border */
609
+ .ui.active.empty.selection.dropdown {
610
+ border-radius: 0.28571429rem !important;
611
+ box-shadow: none !important;
612
+ }
613
+ .ui.active.empty.selection.dropdown .menu {
614
+ border: none !important;
615
+ box-shadow: none !important;
616
+ }
617
+
618
+ /* CSS specific to iOS devices or firefox mobile only */
619
+ @supports (-webkit-touch-callout: none) or (-moz-appearance: none) {
620
+ @media (-moz-touch-enabled), (pointer: coarse) {
621
+ .ui.dropdown .scrollhint.menu:not(.hidden)::before {
622
+ animation: scrollhint 2s ease 2;
623
+ content: "";
624
+ z-index: 15;
625
+ display: block;
626
+ position: absolute;
627
+ opacity: 0;
628
+ right: 0.25em;
629
+ top: 0;
630
+ height: 100%;
631
+ border-right: 0.25em solid;
632
+ border-left: 0;
633
+ border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) 1 100%;
634
+ }
635
+ .ui.inverted.dropdown .scrollhint.menu:not(.hidden)::before {
636
+ border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%;
637
+ }
638
+ @keyframes scrollhint {
639
+ 0% {
640
+ opacity: 1;
641
+ top: 100%;
642
+ }
643
+ 100% {
644
+ opacity: 0;
645
+ top: 0;
646
+ }
647
+ }
648
+ }
649
+ }
650
+
651
+ /* --------------
652
+ Searchable
653
+ --------------- */
654
+
655
+ /* Search Selection */
656
+ .ui.search.dropdown {
657
+ min-width: "";
658
+ }
659
+
660
+ /* Search Dropdown */
661
+ .ui.search.dropdown > input.search {
662
+ background: none transparent !important;
663
+ border: none !important;
664
+ box-shadow: none !important;
665
+ cursor: text;
666
+ top: 0;
667
+ left: 1px;
668
+ width: 100%;
669
+ outline: none;
670
+ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
671
+ padding: inherit;
672
+ }
673
+
674
+ /* Text Layering */
675
+ .ui.search.dropdown > input.search {
676
+ position: absolute;
677
+ z-index: 2;
678
+ }
679
+ .ui.search.dropdown > .text {
680
+ cursor: text;
681
+ position: relative;
682
+ left: 1px;
683
+ z-index: auto;
684
+ }
685
+
686
+ /* Search Selection */
687
+ .ui.search.selection.dropdown > input.search {
688
+ line-height: 1.21428571em;
689
+ padding: 0.67857143em 3.2em 0.67857143em 1em;
690
+ }
691
+
692
+ /* Used to size multi select input to character width */
693
+ .ui.search.selection.dropdown > span.sizer {
694
+ line-height: 1.21428571em;
695
+ padding: 0.67857143em 3.2em 0.67857143em 1em;
696
+ display: none;
697
+ white-space: pre;
698
+ }
699
+
700
+ /* Active/Visible Search */
701
+ .ui.search.dropdown.active > input.search,
702
+ .ui.search.dropdown.visible > input.search {
703
+ cursor: auto;
704
+ }
705
+ .ui.search.dropdown.active > .text,
706
+ .ui.search.dropdown.visible > .text {
707
+ pointer-events: none;
708
+ }
709
+
710
+ /* Filtered Text */
711
+ .ui.active.search.dropdown input.search:focus + .text i.icon,
712
+ .ui.active.search.dropdown input.search:focus + .text .flag {
713
+ opacity: 0.45;
714
+ }
715
+ .ui.active.search.dropdown input.search:focus + .text {
716
+ color: rgba(115, 115, 115, 0.87);
717
+ }
718
+ .ui.search.dropdown.button > span.sizer {
719
+ display: none;
720
+ }
721
+
722
+ /* Search Menu */
723
+ .ui.search.dropdown:not(.unlimited) .menu {
724
+ overflow-x: hidden;
725
+ overflow-y: auto;
726
+ -ms-scroll-chaining: none;
727
+ overscroll-behavior: none;
728
+ -webkit-backface-visibility: hidden;
729
+ backface-visibility: hidden;
730
+ }
731
+ @media only screen and (max-width: 767.98px) {
732
+ .ui.search.dropdown:not(.unlimited) .menu {
733
+ max-height: 8.01428571rem;
734
+ }
735
+ }
736
+ @media only screen and (min-width: 768px) {
737
+ .ui.search.dropdown:not(.unlimited) .menu {
738
+ max-height: 10.68571429rem;
739
+ }
740
+ }
741
+ @media only screen and (min-width: 992px) {
742
+ .ui.search.dropdown:not(.unlimited) .menu {
743
+ max-height: 16.02857143rem;
744
+ }
745
+ }
746
+ @media only screen and (min-width: 1920px) {
747
+ .ui.search.dropdown:not(.unlimited) .menu {
748
+ max-height: 21.37142857rem;
749
+ }
750
+ }
751
+
752
+ /* Clearable Selection */
753
+ .ui.dropdown > .remove.icon {
754
+ cursor: pointer;
755
+ font-size: 0.85714286em;
756
+ margin: -0.78571429em;
757
+ padding: 0.91666667em;
758
+ right: 2em;
759
+ top: 0.78571429em;
760
+ position: absolute;
761
+ opacity: 0.5;
762
+ z-index: 3;
763
+ }
764
+ .ui.selection.dropdown > .remove.icon {
765
+ right: 3em;
766
+ }
767
+ .ui.inline.dropdown > .remove.icon {
768
+ right: 2.2em;
769
+ }
770
+ .ui.clearable.dropdown .text:not(.default),
771
+ .ui.clearable.dropdown:not(.search) > .ui.label:last-of-type {
772
+ margin-right: 1.5em;
773
+ }
774
+ .ui.dropdown select.noselection ~ .remove.icon,
775
+ .ui.dropdown input[value=""] ~ .remove.icon,
776
+ .ui.dropdown input:not([value]):not(.search) ~ .remove.icon,
777
+ .ui.dropdown.loading > .remove.icon {
778
+ display: none;
779
+ }
780
+ .ui.dropdown:not(.selection) > .remove.icon ~ .dropdown.icon {
781
+ margin-left: 1.5em;
782
+ }
783
+ .ui.dropdown:not(.selection):not(.multiple) > .remove.icon {
784
+ margin-top: -1.35em;
785
+ }
786
+
787
+ /* --------------
788
+ Multiple
789
+ --------------- */
790
+
791
+ /* Multiple Selection */
792
+ .ui.ui.multiple.dropdown {
793
+ padding: 0.22619048em 3.2em 0.22619048em 0.35714286em;
794
+ }
795
+ .ui.multiple.dropdown .menu {
796
+ cursor: auto;
797
+ }
798
+
799
+ /* Selection Label */
800
+ .ui.multiple.dropdown > .label {
801
+ display: inline-block;
802
+ white-space: normal;
803
+ font-size: 1em;
804
+ padding: 0.35714286em 0.78571429em;
805
+ margin: 0.14285714rem 0.28571429rem 0.14285714rem 0;
806
+ box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
807
+ }
808
+
809
+ /* Dropdown Icon */
810
+ .ui.multiple.dropdown .dropdown.icon {
811
+ margin: "";
812
+ padding: "";
813
+ }
814
+
815
+ /* Text */
816
+ .ui.multiple.dropdown > .text {
817
+ position: static;
818
+ padding: 0;
819
+ max-width: 100%;
820
+ margin: 0.45238095em 0 0.45238095em 0.64285714em;
821
+ line-height: 1.21428571em;
822
+ }
823
+ .ui.multiple.dropdown > .text.default {
824
+ white-space: nowrap;
825
+ overflow: hidden;
826
+ text-overflow: ellipsis;
827
+ }
828
+ .ui.multiple.dropdown > .label ~ input.search {
829
+ margin-left: 0.14285714em !important;
830
+ }
831
+ .ui.multiple.dropdown > .label ~ .text {
832
+ display: none;
833
+ }
834
+ .ui.multiple.dropdown > .label:not(.image) > img:not(.centered) {
835
+ margin-right: 0.78571429rem;
836
+ }
837
+ .ui.multiple.dropdown > .label:not(.image) > img.ui:not(.avatar) {
838
+ margin-bottom: 0.39285714rem;
839
+ }
840
+ .ui.multiple.dropdown > .image.label img {
841
+ margin: -0.35714286em 0.78571429em -0.35714286em -0.78571429em;
842
+ height: 1.71428571em;
843
+ }
844
+ .ui.multiple.dropdown:not(.selection):not(.labeled) > .dropdown.icon {
845
+ right: -1.5em;
846
+ }
847
+ .ui.multiple.dropdown:not(.selection):not(.labeled) > .remove.icon {
848
+ margin-right: -1.5em;
849
+ }
850
+ .ui.multiple.dropdown:not(.selection):not(.labeled):not(.search) > .remove.icon ~ .text.default,
851
+ .ui.multiple.dropdown:not(.selection):not(.labeled) > .text.default:first-child {
852
+ overflow: inherit;
853
+ }
854
+
855
+ /* -----------------
856
+ Multiple Search
857
+ ----------------- */
858
+
859
+ /* Multiple Search Selection */
860
+ .ui.multiple.search.dropdown,
861
+ .ui.multiple.search.dropdown > input.search {
862
+ cursor: text;
863
+ }
864
+
865
+ /* Prompt Text */
866
+ .ui.multiple.search.dropdown > .text {
867
+ display: inline-block;
868
+ position: absolute;
869
+ top: 0;
870
+ left: 0;
871
+ padding: inherit;
872
+ margin: 0.45238095em 0 0.45238095em 0.64285714em;
873
+ line-height: 1.21428571em;
874
+ }
875
+ .ui.multiple.search.dropdown > .text.default {
876
+ z-index: -1;
877
+ }
878
+ .ui.multiple.search.dropdown > .label ~ .text {
879
+ display: none;
880
+ }
881
+
882
+ /* Search */
883
+ .ui.multiple.search.dropdown > input.search {
884
+ position: static;
885
+ padding: 0;
886
+ max-width: 100%;
887
+ margin: 0.45238095em 0 0.45238095em 0.64285714em;
888
+ width: 2.2em;
889
+ line-height: 1.21428571em;
890
+ }
891
+ .ui.multiple.search.dropdown.button {
892
+ min-width: 14em;
893
+ }
894
+ .ui.multiple.search.dropdown > span.sizer {
895
+ display: none;
896
+ }
897
+ .ui.multiple.search.dropdown:not(.selection) > .remove.icon + input.search,
898
+ .ui.multiple.search.dropdown:not(.selection) > input.search:first-child {
899
+ min-width: 5.05em;
900
+ }
901
+
902
+ /* --------------
903
+ Inline
904
+ --------------- */
905
+ .ui.inline.dropdown {
906
+ cursor: pointer;
907
+ display: inline-block;
908
+ color: inherit;
909
+ }
910
+ .ui.inline.dropdown .dropdown.icon {
911
+ margin: 0 0.21428571em;
912
+ vertical-align: baseline;
913
+ }
914
+ .ui.inline.dropdown > .text {
915
+ font-weight: bold;
916
+ }
917
+ .ui.inline.dropdown .menu {
918
+ cursor: auto;
919
+ margin-top: 0.21428571em;
920
+ border-radius: 0.28571429rem;
921
+ }
922
+
923
+
924
+ /*******************************
925
+ States
926
+ *******************************/
927
+
928
+
929
+ /* --------------------
930
+ Active
931
+ ---------------------- */
932
+
933
+ /* Menu Item Active */
934
+ .ui.dropdown .menu .active.item {
935
+ background: transparent;
936
+ font-weight: bold;
937
+ color: rgba(0, 0, 0, 0.95);
938
+ box-shadow: none;
939
+ z-index: 12;
940
+ }
941
+
942
+ /* --------------------
943
+ Hover
944
+ ---------------------- */
945
+
946
+ /* Menu Item Hover */
947
+ .ui.dropdown .menu > .item:hover {
948
+ background: #f2f2f2;
949
+ color: rgba(0, 0, 0, 0.95);
950
+ z-index: 13;
951
+ }
952
+
953
+ /* --------------------
954
+ Default Text
955
+ ---------------------- */
956
+ .ui.dropdown:not(.button) > .default.text,
957
+ .ui.default.dropdown:not(.button) > .text {
958
+ color: rgba(191, 191, 191, 0.87);
959
+ }
960
+ .ui.dropdown:not(.button) > input:focus ~ .default.text,
961
+ .ui.default.dropdown:not(.button) > input:focus ~ .text {
962
+ color: rgba(115, 115, 115, 0.87);
963
+ }
964
+
965
+ /* --------------------
966
+ Loading
967
+ --------------------- */
968
+ .ui.loading.dropdown > i.icon {
969
+ height: 1em !important;
970
+ }
971
+ .ui.loading.selection.dropdown > i.icon {
972
+ padding: 1.5em 1.28571429em !important;
973
+ }
974
+ .ui.loading.dropdown > i.icon::before {
975
+ position: absolute;
976
+ content: "";
977
+ top: 50%;
978
+ left: 50%;
979
+ margin: -0.64285714em 0 0 -0.64285714em;
980
+ width: 1.28571429em;
981
+ height: 1.28571429em;
982
+ border-radius: 500rem;
983
+ border: 0.2em solid rgba(0, 0, 0, 0.1);
984
+ }
985
+ .ui.loading.dropdown > i.icon::after {
986
+ position: absolute;
987
+ content: "";
988
+ top: 50%;
989
+ left: 50%;
990
+ box-shadow: 0 0 0 1px transparent;
991
+ margin: -0.64285714em 0 0 -0.64285714em;
992
+ width: 1.28571429em;
993
+ height: 1.28571429em;
994
+ animation: loader 0.6s infinite linear;
995
+ border: 0.2em solid #767676;
996
+ border-radius: 500rem;
997
+ }
998
+
999
+ /* Coupling */
1000
+ .ui.loading.dropdown.button > i.icon::before,
1001
+ .ui.loading.dropdown.button > i.icon::after {
1002
+ display: none;
1003
+ }
1004
+ .ui.loading.dropdown > .text {
1005
+ transition: none;
1006
+ }
1007
+
1008
+ /* Used To Check Position */
1009
+ .ui.dropdown .loading.menu {
1010
+ display: block;
1011
+ visibility: hidden;
1012
+ z-index: -1;
1013
+ }
1014
+ .ui.dropdown > .loading.menu {
1015
+ left: 0 !important;
1016
+ right: auto !important;
1017
+ }
1018
+ .ui.dropdown > .menu .loading.menu {
1019
+ left: 100% !important;
1020
+ right: auto !important;
1021
+ }
1022
+
1023
+ /* --------------------
1024
+ Keyboard Select
1025
+ ---------------------- */
1026
+
1027
+ /* Selected Item */
1028
+ .ui.dropdown.selected,
1029
+ .ui.dropdown .menu .selected.item {
1030
+ background: #f7f7f7;
1031
+ color: rgba(0, 0, 0, 0.95);
1032
+ }
1033
+
1034
+ /* --------------------
1035
+ Search Filtered
1036
+ ---------------------- */
1037
+
1038
+ /* Filtered Item */
1039
+ .ui.dropdown > .filtered.text {
1040
+ visibility: hidden;
1041
+ }
1042
+ .ui.dropdown .filtered.item {
1043
+ display: none !important;
1044
+ }
1045
+
1046
+ /* --------------------
1047
+ States
1048
+ ---------------------- */
1049
+ .ui.dropdown.error,
1050
+ .ui.dropdown.error > .text,
1051
+ .ui.dropdown.error > .default.text {
1052
+ color: #9f3a38;
1053
+ }
1054
+ .ui.selection.dropdown.error {
1055
+ background: #fff6f6;
1056
+ border-color: #e0b4b4;
1057
+ }
1058
+ .ui.selection.dropdown.error:hover {
1059
+ border-color: #e0b4b4;
1060
+ }
1061
+ .ui.multiple.selection.error.dropdown > .label {
1062
+ border-color: #e0b4b4;
1063
+ }
1064
+ .ui.dropdown.error > .menu,
1065
+ .ui.dropdown.error > .menu .menu {
1066
+ border-color: #e0b4b4;
1067
+ }
1068
+ .ui.dropdown.error > .menu > .item {
1069
+ color: #9f3a38;
1070
+ }
1071
+
1072
+ /* Item Hover */
1073
+ .ui.dropdown.error > .menu > .item:hover {
1074
+ background-color: #fbe7e7;
1075
+ }
1076
+
1077
+ /* Item Active */
1078
+ .ui.dropdown.error > .menu .active.item {
1079
+ background-color: #fdcfcf;
1080
+ }
1081
+ .ui.dropdown.info,
1082
+ .ui.dropdown.info > .text,
1083
+ .ui.dropdown.info > .default.text {
1084
+ color: #276f86;
1085
+ }
1086
+ .ui.selection.dropdown.info {
1087
+ background: #f8ffff;
1088
+ border-color: #a9d5de;
1089
+ }
1090
+ .ui.selection.dropdown.info:hover {
1091
+ border-color: #a9d5de;
1092
+ }
1093
+ .ui.multiple.selection.info.dropdown > .label {
1094
+ border-color: #a9d5de;
1095
+ }
1096
+ .ui.dropdown.info > .menu,
1097
+ .ui.dropdown.info > .menu .menu {
1098
+ border-color: #a9d5de;
1099
+ }
1100
+ .ui.dropdown.info > .menu > .item {
1101
+ color: #276f86;
1102
+ }
1103
+
1104
+ /* Item Hover */
1105
+ .ui.dropdown.info > .menu > .item:hover {
1106
+ background-color: #e9f2fb;
1107
+ }
1108
+
1109
+ /* Item Active */
1110
+ .ui.dropdown.info > .menu .active.item {
1111
+ background-color: #cef1fd;
1112
+ }
1113
+ .ui.dropdown.success,
1114
+ .ui.dropdown.success > .text,
1115
+ .ui.dropdown.success > .default.text {
1116
+ color: #2c662d;
1117
+ }
1118
+ .ui.selection.dropdown.success {
1119
+ background: #fcfff5;
1120
+ border-color: #a3c293;
1121
+ }
1122
+ .ui.selection.dropdown.success:hover {
1123
+ border-color: #a3c293;
1124
+ }
1125
+ .ui.multiple.selection.success.dropdown > .label {
1126
+ border-color: #a3c293;
1127
+ }
1128
+ .ui.dropdown.success > .menu,
1129
+ .ui.dropdown.success > .menu .menu {
1130
+ border-color: #a3c293;
1131
+ }
1132
+ .ui.dropdown.success > .menu > .item {
1133
+ color: #2c662d;
1134
+ }
1135
+
1136
+ /* Item Hover */
1137
+ .ui.dropdown.success > .menu > .item:hover {
1138
+ background-color: #e9fbe9;
1139
+ }
1140
+
1141
+ /* Item Active */
1142
+ .ui.dropdown.success > .menu .active.item {
1143
+ background-color: #dafdce;
1144
+ }
1145
+ .ui.dropdown.warning,
1146
+ .ui.dropdown.warning > .text,
1147
+ .ui.dropdown.warning > .default.text {
1148
+ color: #573a08;
1149
+ }
1150
+ .ui.selection.dropdown.warning {
1151
+ background: #fffaf3;
1152
+ border-color: #c9ba9b;
1153
+ }
1154
+ .ui.selection.dropdown.warning:hover {
1155
+ border-color: #c9ba9b;
1156
+ }
1157
+ .ui.multiple.selection.warning.dropdown > .label {
1158
+ border-color: #c9ba9b;
1159
+ }
1160
+ .ui.dropdown.warning > .menu,
1161
+ .ui.dropdown.warning > .menu .menu {
1162
+ border-color: #c9ba9b;
1163
+ }
1164
+ .ui.dropdown.warning > .menu > .item {
1165
+ color: #573a08;
1166
+ }
1167
+
1168
+ /* Item Hover */
1169
+ .ui.dropdown.warning > .menu > .item:hover {
1170
+ background-color: #fbfbe9;
1171
+ }
1172
+
1173
+ /* Item Active */
1174
+ .ui.dropdown.warning > .menu .active.item {
1175
+ background-color: #fdfdce;
1176
+ }
1177
+
1178
+ /* --------------------
1179
+ Clear
1180
+ ---------------------- */
1181
+ .ui.dropdown > .remove.icon,
1182
+ .ui.dropdown > .clear.dropdown.icon {
1183
+ opacity: 0.5;
1184
+ transition: opacity 0.1s ease;
1185
+ }
1186
+ .ui.dropdown > .remove.icon:hover,
1187
+ .ui.dropdown > .clear.dropdown.icon:hover {
1188
+ opacity: 1;
1189
+ }
1190
+
1191
+ /* --------------------
1192
+ Disabled
1193
+ ---------------------- */
1194
+
1195
+ /* Disabled */
1196
+ .ui.disabled.dropdown,
1197
+ .ui.dropdown .menu > .disabled.item {
1198
+ cursor: default;
1199
+ pointer-events: none;
1200
+ opacity: 0.45;
1201
+ }
1202
+
1203
+ /* --------------------
1204
+ Read-Only
1205
+ ---------------------- */
1206
+ .ui.read-only.dropdown {
1207
+ cursor: default;
1208
+ pointer-events: none;
1209
+ }
1210
+ .ui.disabled.dropdown > .remove.icon,
1211
+ .ui.read-only.dropdown > .remove.icon,
1212
+ .ui.disabled.dropdown > .label > .delete.icon,
1213
+ .ui.read-only.dropdown > .label > .delete.icon {
1214
+ display: none;
1215
+ }
1216
+
1217
+
1218
+ /*******************************
1219
+ Variations
1220
+ *******************************/
1221
+
1222
+
1223
+ /* --------------
1224
+ Direction
1225
+ --------------- */
1226
+
1227
+ /* Flyout Direction */
1228
+ .ui.dropdown .menu {
1229
+ left: 0;
1230
+ }
1231
+
1232
+ /* Default Side (Right) */
1233
+ .ui.dropdown .right.menu > .menu,
1234
+ .ui.dropdown .menu .right.menu {
1235
+ left: 100% !important;
1236
+ right: auto !important;
1237
+ border-radius: 0.28571429rem !important;
1238
+ }
1239
+
1240
+ /* Leftward Opening Menu */
1241
+ .ui.dropdown > .left.menu {
1242
+ left: auto !important;
1243
+ right: 0 !important;
1244
+ }
1245
+ .ui.dropdown > .left.menu .menu,
1246
+ .ui.dropdown .menu .left.menu {
1247
+ left: auto;
1248
+ right: 100%;
1249
+ margin: 0 -0.5em 0 0 !important;
1250
+ border-radius: 0.28571429rem !important;
1251
+ }
1252
+ .ui.dropdown .item .left.dropdown.icon,
1253
+ .ui.dropdown .left.menu .item .dropdown.icon {
1254
+ width: auto;
1255
+ float: left;
1256
+ margin: 0em 0 0 0;
1257
+ }
1258
+ .ui.dropdown .item .left.dropdown.icon,
1259
+ .ui.dropdown .left.menu .item .dropdown.icon {
1260
+ width: auto;
1261
+ float: left;
1262
+ margin: 0em 0 0 0;
1263
+ }
1264
+ .ui.dropdown .item .left.dropdown.icon + .text,
1265
+ .ui.dropdown .left.menu .item .dropdown.icon + .text {
1266
+ margin-left: 1em;
1267
+ margin-right: 0;
1268
+ }
1269
+
1270
+ /* --------------
1271
+ Upward
1272
+ --------------- */
1273
+
1274
+ /* Upward Main Menu */
1275
+ .ui.upward.dropdown > .menu {
1276
+ top: auto;
1277
+ bottom: 100%;
1278
+ box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
1279
+ }
1280
+
1281
+ /* Upward Sub Menu */
1282
+ .ui.dropdown .upward.menu {
1283
+ top: auto !important;
1284
+ bottom: 0 !important;
1285
+ }
1286
+
1287
+ /* Active Upward */
1288
+ .ui.simple.upward.active.dropdown,
1289
+ .ui.simple.upward.dropdown:hover {
1290
+ border-radius: 0 0 0.28571429rem 0.28571429rem;
1291
+ }
1292
+
1293
+ /* Button */
1294
+ .ui.upward.dropdown.button:not(.pointing):not(.floating).active {
1295
+ border-radius: 0 0 0.28571429rem 0.28571429rem;
1296
+ }
1297
+ .ui.upward.dropdown.button:not(.pointing):not(.floating) > .menu {
1298
+ border-radius: 0.28571429rem 0.28571429rem 0 0;
1299
+ }
1300
+
1301
+ /* Selection */
1302
+ .ui.ui.upward.selection.dropdown:not(.pointing):not(.floating) > .menu {
1303
+ border-top-width: 1px;
1304
+ border-bottom-width: 0;
1305
+ box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08);
1306
+ border-radius: 0.28571429rem 0.28571429rem 0 0;
1307
+ }
1308
+ .ui.upward.selection.dropdown:hover {
1309
+ box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
1310
+ }
1311
+
1312
+ /* Active Upward */
1313
+ .ui.active.upward.selection.dropdown:not(.pointing):not(.floating) {
1314
+ border-radius: 0 0 0.28571429rem 0.28571429rem !important;
1315
+ }
1316
+
1317
+ /* Visible Upward */
1318
+ .ui.upward.selection.dropdown.visible {
1319
+ box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
1320
+ }
1321
+ .ui.upward.selection.dropdown.visible:not(.pointing):not(.floating) {
1322
+ border-radius: 0 0 0.28571429rem 0.28571429rem !important;
1323
+ }
1324
+
1325
+ /* Visible Hover Upward */
1326
+ .ui.upward.active.selection.dropdown:hover {
1327
+ box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.05);
1328
+ }
1329
+ .ui.upward.active.selection.dropdown:hover:not(.pointing):not(.floating) .menu {
1330
+ box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08);
1331
+ }
1332
+
1333
+ /* --------------
1334
+ Scrolling
1335
+ --------------- */
1336
+
1337
+ /* Selection Menu */
1338
+ .ui.scrolling.dropdown .menu,
1339
+ .ui.dropdown .scrolling.menu {
1340
+ overflow-x: hidden;
1341
+ overflow-y: auto;
1342
+ -ms-scroll-chaining: none;
1343
+ overscroll-behavior: none;
1344
+ -webkit-backface-visibility: hidden;
1345
+ backface-visibility: hidden;
1346
+ min-width: 100% !important;
1347
+ width: auto !important;
1348
+ }
1349
+ .ui.dropdown .scrolling.menu {
1350
+ position: static;
1351
+ border: none;
1352
+ box-shadow: none !important;
1353
+ border-radius: 0 0 0.28571429rem 0.28571429rem !important;
1354
+ margin: 0 !important;
1355
+ border-top: 1px solid rgba(34, 36, 38, 0.15);
1356
+ }
1357
+ .ui.ui.ui.scrolling.dropdown .menu .item,
1358
+ .ui.ui.ui.dropdown .scrolling.menu > .item {
1359
+ border-top: none;
1360
+ }
1361
+ .ui.scrolling.dropdown .menu .item:first-child,
1362
+ .ui.dropdown .scrolling.menu .item:first-child {
1363
+ border-top: none;
1364
+ }
1365
+ .ui.dropdown > .animating.menu .scrolling.menu,
1366
+ .ui.dropdown > .visible.menu .scrolling.menu {
1367
+ display: block;
1368
+ }
1369
+
1370
+ /* Scrollbar in IE */
1371
+ @media all and (-ms-high-contrast: none) {
1372
+ .ui.scrolling.dropdown .menu,
1373
+ .ui.dropdown .scrolling.menu {
1374
+ min-width: calc(100% - 17px);
1375
+ }
1376
+ }
1377
+ @media only screen and (max-width: 767.98px) {
1378
+ .ui.scrolling.dropdown .menu,
1379
+ .ui.dropdown .scrolling.menu {
1380
+ max-height: 10.28571429rem;
1381
+ }
1382
+ .ui.scrolling.resizable.dropdown .menu,
1383
+ .ui.dropdown .scrolling.resizable.menu {
1384
+ height: 10.28571429rem;
1385
+ }
1386
+ }
1387
+ @media only screen and (min-width: 768px) {
1388
+ .ui.scrolling.dropdown .menu,
1389
+ .ui.dropdown .scrolling.menu {
1390
+ max-height: 15.42857143rem;
1391
+ }
1392
+ .ui.scrolling.resizable.dropdown .menu,
1393
+ .ui.dropdown .scrolling.resizable.menu {
1394
+ height: 15.42857143rem;
1395
+ }
1396
+ }
1397
+ @media only screen and (min-width: 992px) {
1398
+ .ui.scrolling.dropdown .menu,
1399
+ .ui.dropdown .scrolling.menu {
1400
+ max-height: 20.57142857rem;
1401
+ }
1402
+ .ui.scrolling.resizable.dropdown .menu,
1403
+ .ui.dropdown .scrolling.resizable.menu {
1404
+ height: 20.57142857rem;
1405
+ }
1406
+ }
1407
+ @media only screen and (min-width: 1920px) {
1408
+ .ui.scrolling.dropdown .menu,
1409
+ .ui.dropdown .scrolling.menu {
1410
+ max-height: 20.57142857rem;
1411
+ }
1412
+ .ui.scrolling.resizable.dropdown .menu,
1413
+ .ui.dropdown .scrolling.resizable.menu {
1414
+ height: 20.57142857rem;
1415
+ }
1416
+ }
1417
+ .ui.scrolling.resizable.dropdown .menu,
1418
+ .ui.dropdown .scrolling.resizable.menu {
1419
+ resize: vertical;
1420
+ max-height: none;
1421
+ }
1422
+
1423
+ /* --------------------
1424
+ Labeled
1425
+ --------------------- */
1426
+
1427
+ /* Regular Label on Left */
1428
+ .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + .dropdown {
1429
+ border-top-left-radius: 0;
1430
+ border-bottom-left-radius: 0;
1431
+ border-left-color: transparent;
1432
+ }
1433
+
1434
+ /* Regular Label on Right */
1435
+ .ui[class*="right labeled"].input > .dropdown:not(:last-child) {
1436
+ border-top-right-radius: 0 !important;
1437
+ border-bottom-right-radius: 0 !important;
1438
+ border-right-color: transparent !important;
1439
+ }
1440
+ .ui[class*="right labeled"].input > .dropdown + .label {
1441
+ border-top-left-radius: 0;
1442
+ border-bottom-left-radius: 0;
1443
+ }
1444
+
1445
+ /* --------------
1446
+ Columnar
1447
+ --------------- */
1448
+ .ui.column.dropdown > .menu {
1449
+ flex-wrap: wrap;
1450
+ }
1451
+ .ui.dropdown[class*="two column"] > .menu > .item {
1452
+ width: 50%;
1453
+ }
1454
+ .ui.dropdown[class*="three column"] > .menu > .item {
1455
+ width: 33%;
1456
+ }
1457
+ .ui.dropdown[class*="four column"] > .menu > .item {
1458
+ width: 25%;
1459
+ }
1460
+ .ui.dropdown[class*="five column"] > .menu > .item {
1461
+ width: 20%;
1462
+ }
1463
+
1464
+ /* --------------
1465
+ Simple
1466
+ --------------- */
1467
+
1468
+ /* Displays without javascript */
1469
+ .ui.simple.dropdown .menu::before,
1470
+ .ui.simple.dropdown .menu::after {
1471
+ display: none;
1472
+ }
1473
+ .ui.simple.dropdown .menu {
1474
+ position: absolute;
1475
+
1476
+ /* IE hack to make dropdown icons appear inline */
1477
+ display: -ms-inline-flexbox !important;
1478
+ display: block;
1479
+ overflow: hidden;
1480
+ top: -9999px;
1481
+ opacity: 0;
1482
+ width: 0;
1483
+ height: 0;
1484
+ transition: opacity 0.1s ease;
1485
+ margin-top: 0 !important;
1486
+ }
1487
+ .ui.simple.dropdown .upward.menu {
1488
+ margin-bottom: 1.5em;
1489
+ }
1490
+ .ui.simple.selection.dropdown .upward.menu {
1491
+ margin-bottom: 2.5em;
1492
+ }
1493
+ .ui.menu:not(.vertical) .ui.simple.dropdown.item .upward.menu {
1494
+ margin-bottom: 2.8em;
1495
+ }
1496
+ .ui.simple.active.dropdown,
1497
+ .ui.simple.dropdown:hover {
1498
+ border-bottom-left-radius: 0;
1499
+ border-bottom-right-radius: 0;
1500
+ }
1501
+ .ui.simple.active.dropdown > .menu,
1502
+ .ui.simple.dropdown:hover > .menu {
1503
+ overflow: visible;
1504
+ width: auto;
1505
+ height: auto;
1506
+ top: 100%;
1507
+ opacity: 1;
1508
+ }
1509
+ .ui.simple.dropdown > .menu > .item:active > .menu,
1510
+ .ui.simple.dropdown .menu .item:hover > .menu {
1511
+ overflow: visible;
1512
+ width: auto;
1513
+ height: auto;
1514
+ top: 0 !important;
1515
+ left: 100%;
1516
+ opacity: 1;
1517
+ }
1518
+ .ui.simple.selection.active.dropdown > .menu,
1519
+ .ui.simple.selection.dropdown:hover > .menu,
1520
+ .ui.simple.selection.dropdown > .menu > .item:active > .menu,
1521
+ .ui.simple.selection.dropdown .menu .item:hover > .menu {
1522
+ overflow: auto;
1523
+ -ms-scroll-chaining: none;
1524
+ overscroll-behavior: none;
1525
+ }
1526
+ .ui.simple.dropdown > .menu > .item:active > .left.menu,
1527
+ .ui.simple.dropdown .menu .item:hover > .left.menu,
1528
+ .right.menu .ui.simple.dropdown > .menu > .item:active > .menu:not(.right),
1529
+ .right.menu .ui.simple.dropdown > .menu .item:hover > .menu:not(.right) {
1530
+ left: auto;
1531
+ right: 100%;
1532
+ }
1533
+ .ui.simple.disabled.dropdown:hover .menu {
1534
+ display: none;
1535
+ height: 0;
1536
+ width: 0;
1537
+ overflow: hidden;
1538
+ }
1539
+
1540
+ /* Visible */
1541
+ .ui.simple.visible.dropdown > .menu {
1542
+ display: block;
1543
+ }
1544
+
1545
+ /* Scrolling */
1546
+ .ui.simple.scrolling.active.dropdown > .menu,
1547
+ .ui.simple.scrolling.dropdown:hover > .menu {
1548
+ overflow-x: hidden;
1549
+ overflow-y: auto;
1550
+ -ms-scroll-chaining: none;
1551
+ overscroll-behavior: none;
1552
+ }
1553
+
1554
+ /* --------------
1555
+ Fluid
1556
+ --------------- */
1557
+ .ui.fluid.dropdown {
1558
+ display: block;
1559
+ width: 100% !important;
1560
+ min-width: 0;
1561
+ }
1562
+ .ui.fluid.dropdown > .dropdown.icon {
1563
+ float: right;
1564
+ }
1565
+
1566
+ /* --------------
1567
+ Floating
1568
+ --------------- */
1569
+ .ui.floating.dropdown > .menu {
1570
+ left: 0;
1571
+ right: auto;
1572
+ box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
1573
+ border-radius: 0.28571429rem !important;
1574
+ }
1575
+ .ui:not(.upward).floating.dropdown > .menu {
1576
+ margin-top: 0.5em;
1577
+ }
1578
+ .ui.upward.floating.dropdown:not(.simple) > .menu {
1579
+ margin-bottom: 0.5em;
1580
+ }
1581
+
1582
+ /* --------------
1583
+ Pointing
1584
+ --------------- */
1585
+ .ui.pointing.dropdown > .menu {
1586
+ top: 100%;
1587
+ margin-top: 0.78571429rem;
1588
+ border-radius: 0.28571429rem;
1589
+ }
1590
+ .ui.pointing.dropdown > .menu:not(.hidden)::after {
1591
+ display: block;
1592
+ position: absolute;
1593
+ pointer-events: none;
1594
+ content: "";
1595
+ visibility: visible;
1596
+ transform: rotate(45deg);
1597
+ width: 0.5em;
1598
+ height: 0.5em;
1599
+ box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15);
1600
+ background: #fff;
1601
+ z-index: 2;
1602
+ }
1603
+ @supports selector(:has(.f)) {
1604
+ .ui.pointing.dropdown:not(.upward) .menu:has(:first-child:hover)::after,
1605
+ .ui.upward.pointing.dropdown .menu:has(:last-child:hover)::after {
1606
+ background: #f2f2f2;
1607
+ }
1608
+ .ui.pointing.dropdown:not(.upward) .menu:has(.selected.item:first-child)::after,
1609
+ .ui.upward.pointing.dropdown .menu:has(.selected.item:last-child)::after {
1610
+ background: #f7f7f7;
1611
+ }
1612
+ }
1613
+ .ui.selection.pointing.dropdown > .menu::after {
1614
+ box-shadow: -1px -1px 0 0 #96c8da;
1615
+ }
1616
+ .ui.pointing.dropdown > .menu:not(.hidden)::after {
1617
+ top: -0.25em;
1618
+ left: 50%;
1619
+ margin: 0 0 0 -0.25em;
1620
+ }
1621
+
1622
+ /* Top Left Pointing */
1623
+ .ui.top.left.pointing.dropdown > .menu {
1624
+ top: 100%;
1625
+ bottom: auto;
1626
+ left: 0;
1627
+ right: auto;
1628
+ margin: 1em 0 0;
1629
+ }
1630
+ .ui.top.left.pointing.dropdown > .menu {
1631
+ top: 100%;
1632
+ bottom: auto;
1633
+ left: 0;
1634
+ right: auto;
1635
+ margin: 1em 0 0;
1636
+ }
1637
+ .ui.top.left.pointing.dropdown > .menu::after {
1638
+ top: -0.25em;
1639
+ left: 1em;
1640
+ right: auto;
1641
+ margin: 0;
1642
+ transform: rotate(45deg);
1643
+ }
1644
+
1645
+ /* Top Right Pointing */
1646
+ .ui.top.right.pointing.dropdown > .menu {
1647
+ top: 100%;
1648
+ bottom: auto;
1649
+ right: 0;
1650
+ left: auto;
1651
+ margin: 1em 0 0;
1652
+ }
1653
+ .ui.top.pointing.dropdown > .left.menu::after,
1654
+ .ui.top.right.pointing.dropdown > .menu::after {
1655
+ top: -0.25em;
1656
+ left: auto !important;
1657
+ right: 1em !important;
1658
+ margin: 0;
1659
+ transform: rotate(45deg);
1660
+ }
1661
+
1662
+ /* Left Pointing */
1663
+ .ui.left.pointing.dropdown > .menu {
1664
+ top: 0;
1665
+ left: 100%;
1666
+ right: auto;
1667
+ margin: 0 0 0 1em;
1668
+ }
1669
+ .ui.left.pointing.dropdown > .menu::after {
1670
+ top: 1em;
1671
+ left: -0.25em;
1672
+ margin: 0;
1673
+ transform: rotate(-45deg);
1674
+ }
1675
+ .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu {
1676
+ left: auto !important;
1677
+ right: 100% !important;
1678
+ margin: 0 1em 0 0;
1679
+ }
1680
+ .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu::after {
1681
+ top: 1em;
1682
+ left: auto;
1683
+ right: -0.25em;
1684
+ margin: 0;
1685
+ transform: rotate(135deg);
1686
+ }
1687
+
1688
+ /* Right Pointing */
1689
+ .ui.right.pointing.dropdown > .menu {
1690
+ top: 0;
1691
+ left: auto;
1692
+ right: 100%;
1693
+ margin: 0 1em 0 0;
1694
+ }
1695
+ .ui.right.pointing.dropdown > .menu::after {
1696
+ top: 1em;
1697
+ left: auto;
1698
+ right: -0.25em;
1699
+ margin: 0;
1700
+ transform: rotate(135deg);
1701
+ }
1702
+
1703
+ /* Bottom Pointing */
1704
+ .ui.bottom.pointing.dropdown > .menu {
1705
+ top: auto;
1706
+ bottom: 100%;
1707
+ left: 0;
1708
+ right: auto;
1709
+ margin: 0 0 1em;
1710
+ }
1711
+ .ui.bottom.pointing.dropdown > .menu::after {
1712
+ top: auto;
1713
+ bottom: -0.25em;
1714
+ right: auto;
1715
+ margin: 0;
1716
+ transform: rotate(-135deg);
1717
+ }
1718
+
1719
+ /* Reverse Sub-Menu Direction */
1720
+ .ui.bottom.pointing.dropdown > .menu .menu {
1721
+ top: auto !important;
1722
+ bottom: 0 !important;
1723
+ }
1724
+
1725
+ /* Bottom Left */
1726
+ .ui.bottom.left.pointing.dropdown > .menu {
1727
+ left: 0;
1728
+ right: auto;
1729
+ }
1730
+ .ui.bottom.left.pointing.dropdown > .menu::after {
1731
+ left: 1em;
1732
+ right: auto;
1733
+ }
1734
+
1735
+ /* Bottom Right */
1736
+ .ui.bottom.right.pointing.dropdown > .menu {
1737
+ right: 0;
1738
+ left: auto;
1739
+ }
1740
+ .ui.bottom.right.pointing.dropdown > .menu::after {
1741
+ left: auto;
1742
+ right: 1em;
1743
+ }
1744
+
1745
+ /* Upward pointing */
1746
+ .ui.pointing.upward.dropdown .menu,
1747
+ .ui.top.pointing.upward.dropdown .menu {
1748
+ top: auto !important;
1749
+ bottom: 100% !important;
1750
+ margin: 0 0 0.78571429rem;
1751
+ border-radius: 0.28571429rem;
1752
+ }
1753
+ .ui.pointing.upward.dropdown .menu::after,
1754
+ .ui.top.pointing.upward.dropdown .menu::after {
1755
+ top: 100% !important;
1756
+ bottom: auto !important;
1757
+ box-shadow: 1px 1px 0 0 rgba(34, 36, 38, 0.15);
1758
+ margin: -0.25em 0 0;
1759
+ }
1760
+ .ui.selection.pointing.upward.dropdown .menu::after {
1761
+ box-shadow: 1px 1px 0 0 #96c8da;
1762
+ }
1763
+
1764
+ /* Right Pointing Upward */
1765
+ .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
1766
+ top: auto !important;
1767
+ bottom: 0 !important;
1768
+ margin: 0 1em 0 0;
1769
+ }
1770
+ .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu::after {
1771
+ top: auto !important;
1772
+ bottom: 0 !important;
1773
+ margin: 0 0 1em 0;
1774
+ box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15);
1775
+ }
1776
+
1777
+ /* Left Pointing Upward */
1778
+ .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
1779
+ top: auto !important;
1780
+ bottom: 0 !important;
1781
+ margin: 0 0 0 1em;
1782
+ }
1783
+ .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu::after {
1784
+ top: auto !important;
1785
+ bottom: 0 !important;
1786
+ margin: 0 0 1em 0;
1787
+ box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15);
1788
+ }
1789
+ .ui.floating.dropdown .menu .item:first-child,
1790
+ .ui.pointing.dropdown .menu .item:first-child {
1791
+ border-top-left-radius: 0.28571429rem;
1792
+ border-top-right-radius: 0.28571429rem;
1793
+ }
1794
+ .ui.floating.dropdown .menu .item:last-child,
1795
+ .ui.pointing.dropdown .menu .item:last-child {
1796
+ border-bottom-left-radius: 0.28571429rem;
1797
+ border-bottom-right-radius: 0.28571429rem;
1798
+ }
1799
+
1800
+ /* --------------------
1801
+ Sizes
1802
+ --------------------- */
1803
+ .ui.dropdown,
1804
+ .ui.dropdown .menu > .item {
1805
+ font-size: 1rem;
1806
+ }
1807
+ .ui.ui.mini.dropdown,
1808
+ .ui.ui.mini.dropdown .menu > .item {
1809
+ font-size: 0.78571429rem;
1810
+ }
1811
+ .ui.ui.tiny.dropdown,
1812
+ .ui.ui.tiny.dropdown .menu > .item {
1813
+ font-size: 0.85714286rem;
1814
+ }
1815
+ .ui.ui.small.dropdown,
1816
+ .ui.ui.small.dropdown .menu > .item {
1817
+ font-size: 0.92857143rem;
1818
+ }
1819
+ .ui.ui.large.dropdown,
1820
+ .ui.ui.large.dropdown .menu > .item {
1821
+ font-size: 1.14285714rem;
1822
+ }
1823
+ .ui.ui.big.dropdown,
1824
+ .ui.ui.big.dropdown .menu > .item {
1825
+ font-size: 1.28571429rem;
1826
+ }
1827
+ .ui.ui.huge.dropdown,
1828
+ .ui.ui.huge.dropdown .menu > .item {
1829
+ font-size: 1.42857143rem;
1830
+ }
1831
+ .ui.ui.massive.dropdown,
1832
+ .ui.ui.massive.dropdown .menu > .item {
1833
+ font-size: 1.71428571rem;
1834
+ }
1835
+
1836
+ /* --------------
1837
+ Inverted
1838
+ --------------- */
1839
+
1840
+ /* General rules and basic dropdowns */
1841
+ .ui.dropdown .inverted.menu,
1842
+ .ui.inverted.dropdown .menu {
1843
+ background: #1b1c1d;
1844
+ box-shadow: none;
1845
+ border: 1px solid rgba(255, 255, 255, 0.15);
1846
+ }
1847
+ .ui.dropdown .inverted.menu > .item,
1848
+ .ui.inverted.dropdown .menu > .item {
1849
+ color: rgba(255, 255, 255, 0.8);
1850
+ }
1851
+ .ui.dropdown .inverted.menu .active.item,
1852
+ .ui.inverted.dropdown .menu .active.item {
1853
+ background: transparent;
1854
+ color: rgba(255, 255, 255, 0.8);
1855
+ box-shadow: none;
1856
+ }
1857
+ .ui.dropdown .inverted.menu > .item:hover,
1858
+ .ui.inverted.dropdown .menu > .item:hover {
1859
+ background: #2d2e2f;
1860
+ color: rgba(255, 255, 255, 0.8);
1861
+ }
1862
+ .ui.inverted.dropdown.selected,
1863
+ .ui.dropdown .inverted.menu .selected.item,
1864
+ .ui.inverted.dropdown .menu .selected.item {
1865
+ background: #3d3e3f;
1866
+ color: rgba(255, 255, 255, 0.8);
1867
+ }
1868
+ .ui.dropdown .inverted.menu > .header,
1869
+ .ui.inverted.dropdown .menu > .header {
1870
+ color: #fff;
1871
+ }
1872
+ .ui.inverted.dropdown > .text > .description,
1873
+ .ui.dropdown .inverted.menu > .item > .description,
1874
+ .ui.inverted.dropdown .menu > .item > .description {
1875
+ color: rgba(255, 255, 255, 0.5);
1876
+ }
1877
+ .ui.dropdown .inverted.menu > .divider,
1878
+ .ui.inverted.dropdown .menu > .divider {
1879
+ border-top: 1px solid rgba(255, 255, 255, 0.15);
1880
+ }
1881
+ .ui.dropdown .inverted.scrolling.menu,
1882
+ .ui.inverted.dropdown .scrolling.menu {
1883
+ border: none;
1884
+ border-top: 1px solid rgba(255, 255, 255, 0.15);
1885
+ }
1886
+
1887
+ /* Selection */
1888
+ .ui.inverted.selection.dropdown {
1889
+ border: 1px solid rgba(255, 255, 255, 0.15);
1890
+ background: #1b1c1d;
1891
+ color: rgba(255, 255, 255, 0.8);
1892
+ }
1893
+ .ui.inverted.selection.dropdown:hover {
1894
+ border-color: rgba(255, 255, 255, 0.25);
1895
+ box-shadow: none;
1896
+ }
1897
+ .ui.inverted.selection.dropdown input {
1898
+ color: #fff;
1899
+ }
1900
+ .ui.inverted.selection.visible.dropdown > .text:not(.default) {
1901
+ color: rgba(255, 255, 255, 0.9);
1902
+ }
1903
+ .ui.selection.simple.dropdown:hover .inverted.menu,
1904
+ .ui.inverted.selection.simple.dropdown:hover .menu,
1905
+ .ui.selection.active.dropdown .inverted.menu,
1906
+ .ui.inverted.selection.active.dropdown .menu,
1907
+ .ui.inverted.selection.active.dropdown:hover {
1908
+ border-color: rgba(255, 255, 255, 0.15);
1909
+ }
1910
+ .ui.selection.dropdown .inverted.menu > .item,
1911
+ .ui.inverted.selection.dropdown .menu > .item {
1912
+ border-top: 1px solid #242526;
1913
+ }
1914
+ .ui.inverted.dropdown:not(.button) > .default.text,
1915
+ .ui.inverted.default.dropdown:not(.button) > .text {
1916
+ color: rgba(255, 255, 255, 0.5);
1917
+ }
1918
+ .ui.inverted.dropdown:not(.button) > input:focus ~ .default.text,
1919
+ .ui.inverted.default.dropdown:not(.button) > input:focus ~ .text {
1920
+ color: rgba(255, 255, 255, 0.7);
1921
+ }
1922
+ .ui.inverted.active.search.dropdown input.search:focus + .text i.icon,
1923
+ .ui.inverted.active.search.dropdown input.search:focus + .text .flag {
1924
+ opacity: 0.45;
1925
+ }
1926
+ .ui.inverted.active.search.dropdown input.search:focus + .text {
1927
+ color: rgba(255, 255, 255, 0.7);
1928
+ }
1929
+ .ui.dropdown .inverted.menu > .message:not(.ui),
1930
+ .ui.inverted.dropdown .menu > .message:not(.ui) {
1931
+ color: rgba(255, 255, 255, 0.5);
1932
+ }
1933
+
1934
+ /* Fixing the border */
1935
+ .ui.dropdown .inverted.menu > .item:first-child,
1936
+ .ui.inverted.dropdown .menu > .item:first-child {
1937
+ border-top-width: 0;
1938
+ }
1939
+
1940
+ /* Labels */
1941
+ .ui.inverted.multiple.dropdown > .label {
1942
+ background-color: rgba(255, 255, 255, 0.7);
1943
+ background-image: none;
1944
+ color: #000000;
1945
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0) inset;
1946
+ }
1947
+ .ui.inverted.multiple.dropdown > .label:hover {
1948
+ background-color: rgba(255, 255, 255, 0.9);
1949
+ border-color: rgba(255, 255, 255, 0.9);
1950
+ background-image: none;
1951
+ color: #000000;
1952
+ }
1953
+ .ui.inverted.multiple.dropdown > .label > .close.icon,
1954
+ .ui.inverted.multiple.dropdown > .label > .delete.icon {
1955
+ opacity: 0.6;
1956
+ }
1957
+ .ui.inverted.multiple.dropdown > .label > .close.icon:hover,
1958
+ .ui.inverted.multiple.dropdown > .label > .delete.icon:hover {
1959
+ opacity: 0.8;
1960
+ }
1961
+
1962
+ /* Selection for form elements */
1963
+ .ui.inverted.dropdown textarea::selection,
1964
+ .ui.inverted.dropdown input::selection {
1965
+ background-color: rgba(255, 255, 255, 0.25);
1966
+ color: rgba(255, 255, 255, 0.8);
1967
+ }
1968
+
1969
+ /* Scrollbars */
1970
+ .ui.dropdown .inverted.menu::-webkit-scrollbar-track,
1971
+ .ui.inverted.dropdown .menu::-webkit-scrollbar-track {
1972
+ background: rgba(255, 255, 255, 0.1);
1973
+ }
1974
+ .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb,
1975
+ .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb {
1976
+ background: rgba(255, 255, 255, 0.25);
1977
+ }
1978
+ .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb:window-inactive,
1979
+ .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:window-inactive {
1980
+ background: rgba(255, 255, 255, 0.15);
1981
+ }
1982
+ .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb:hover,
1983
+ .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:hover {
1984
+ background: rgba(255, 255, 255, 0.35);
1985
+ }
1986
+ .ui.dropdown .inverted.menu,
1987
+ .ui.inverted.dropdown .menu {
1988
+
1989
+ /* IE11 */
1990
+ scrollbar-face-color: #656565;
1991
+ scrollbar-shadow-color: #656565;
1992
+ scrollbar-track-color: #323232;
1993
+ scrollbar-arrow-color: #323232;
1994
+ }
1995
+ @supports (-moz-appearance: none) {
1996
+ .ui.dropdown .inverted.menu,
1997
+ .ui.inverted.dropdown .menu {
1998
+
1999
+ /* firefox: first color thumb, second track */
2000
+ scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.1);
2001
+ }
2002
+ }
2003
+ .ui.pointing.dropdown > .inverted.menu::after,
2004
+ .ui.inverted.pointing.dropdown > .menu::after {
2005
+ background: #1b1c1d;
2006
+ box-shadow: -1px -1px 0 0 rgba(255, 255, 255, 0.15);
2007
+ }
2008
+ .ui.inverted.upward.pointing.dropdown > .menu::after {
2009
+ box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.15);
2010
+ }
2011
+ @supports selector(:has(.f)) {
2012
+ .ui.inverted.pointing.dropdown:not(.upward) .menu:has(:first-child:hover)::after,
2013
+ .ui.inverted.upward.pointing.dropdown .menu:has(:last-child:hover)::after {
2014
+ background: #2d2e2f;
2015
+ }
2016
+ .ui.inverted.pointing.dropdown:not(.upward) .menu:has(.selected.item:first-child)::after,
2017
+ .ui.inverted.upward.pointing.dropdown .menu:has(.selected.item:last-child)::after {
2018
+ background: #3d3e3f;
2019
+ }
2020
+ }
2021
+
2022
+
2023
+ /*******************************
2024
+ Theme Overrides
2025
+ *******************************/
2026
+
2027
+
2028
+ /* Dropdown Carets */
2029
+ @font-face {
2030
+ font-family: Dropdown;
2031
+ src: url("data:application/font-woff;base64,d09GRk9UVE8AAASEAAsAAAAABwQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAC5AAAAU8AAAHrSr22AUZGVE0AAARQAAAAHAAAAByNrZ/TR0RFRgAABDQAAAAcAAAAIAAnABhPUy8yAAABYAAAAEIAAABgTadXCGNtYXAAAAKEAAAAVAAAAWQFcOKQaGVhZAAAAQgAAAAyAAAANg+j805oaGVhAAABPAAAABsAAAAkAwcBDWhtdHgAAARsAAAAFgAAAB4EAQASbWF4cAAAAVgAAAAGAAAABgAIUABuYW1lAAABpAAAAN8AAAG2rSbAM3Bvc3QAAALYAAAADAAAACAAAwAAeJxjYGRgYADiKjtG3nh+m68M3EwMIHCBwT0CRN9PyHYCUp6Mqox5QJqDASwNAMNOBrgAAHicY2BkYGB88P8BkFRlYACTjAyogB0AWWsDFgAAAFAAAAgAAHicY2Bm+Mg4gYGVgYHRhzGNgYHBHUp/ZZBkaGFABYwCSJyANNcUBgcGhg+3GB/8fwCUfMCgAFIDV6AAhIwAUbEMSQAAeJx1zTEKwkAUBNBJjIoKIggW2mwvBEVvIAgiNhY2VjEuQUh2YY2FeACPYOltvIH3cZJ8ywQS3p/d+QEwwAce/o8v9tDGUOzTU3GDXokD+ihuooeHuMX8Je5ijC9bXtCRP1T20Kcq+/RE3KAX4oDeipsYIRa3mD/FXSzxLtZeeGyR8bUwHGObWUvsoZHghhQRHEed3NLI1d+vyw/c43DleZErzBFixli768UaNQ9n9d11OedsJdxiyk0RZ40zsxPu/G7K7k66IUvW5CrRRrso12d1uqtNbHfcF+IHrnU+mwB4nGNgYGBmgGAZBkYGEIgD8hjBfBYGJyDNxcDBwASEjAwKH279//v/P1iVwofrYDbj/8dgPkQvGwMPkGRhYAWy2MHCbEDMxIAXMOOXHvIAAINhDt14nGNgZsALAAB9AAR4nE2Pv0rEQBCHZ3J7d4vGqEcOFaKC/zolZ6OWwmElNj6ClYWmyivcblyzE+RaK8EHsPMxBBtrwUdwA1fobpI7ZWBYfux8fD8ExgAR+fVVcpMkt4AeIAzLLSi3sdzxyt1WucqU31I+25iDtcvej1Kzh99V7+a19NoRPC1GAEsRvCxHwCP87MG8I7WgDRwWoAcrEMGmnT3YT+N0kB7G6Vk8PHLr2K0Tt04HB3FjMhUCQIESM7xDhfeYA3dcz5IZdOAcHuAD14MgeAu+zTNTRV5oTUR5obgZdwpVZFqQzEfKTiaE4JNwEralHGUuErnQNjE2oYxUwS0ldBTSxI3L7cOyKo60ib0lezSl1Rw+GXdq1pQiH03SdzKka4ymosLQTMcedSuIlEJUMqNcUi0jdIP5Ysb++leqLtSI/NWSTS0xq0WyYajQXPSVP/cLitO4NgB4nGNgZGBg4AFiAQYJBiYgzQLEIJoRggEFbQBAAAAAAQAAAADeTO04AAAAANAAR1gAAAAA32BrQnicY2BAAEYQVoVghu0MQgwMAAc/ARcAAA==") format("woff");
2032
+ font-weight: normal;
2033
+ font-style: normal;
2034
+ }
2035
+ .ui.dropdown > .dropdown.icon {
2036
+ font-family: Dropdown;
2037
+ line-height: 1;
2038
+ height: 1em;
2039
+ width: 1.23em;
2040
+ -webkit-backface-visibility: hidden;
2041
+ backface-visibility: hidden;
2042
+ font-weight: normal;
2043
+ font-style: normal;
2044
+ text-align: center;
2045
+ }
2046
+ .ui.dropdown > .dropdown.icon {
2047
+ width: auto;
2048
+ }
2049
+ .ui.dropdown > .dropdown.icon::before {
2050
+ content: "\f0d7";
2051
+ }
2052
+
2053
+ /* Sub Menu */
2054
+ .ui.dropdown .menu .item .dropdown.icon::before {
2055
+ content: "\f0da"
2056
+ /* rtl: "\f0d9" */;
2057
+ }
2058
+ .ui.dropdown .item .left.dropdown.icon::before,
2059
+ .ui.dropdown .left.menu .item .dropdown.icon::before {
2060
+ content: "\f0d9" /*rtl: "\f0da" */;
2061
+ }
2062
+
2063
+ /* Vertical Menu Dropdown */
2064
+ .ui.vertical.menu .dropdown.item > .dropdown.icon::before {
2065
+ content: "\f0da"
2066
+ /* rtl: "\f0d9" */;
2067
+ }
2068
+ /* Icons for Reference
2069
+ .dropdown.down.icon {
2070
+ content: "\f0d7";
2071
+ }
2072
+ .dropdown.up.icon {
2073
+ content: "\f0d8";
2074
+ }
2075
+ .dropdown.left.icon {
2076
+ content: "\f0d9";
2077
+ }
2078
+ .dropdown.icon.icon {
2079
+ content: "\f0da";
2080
+ }
2081
+ */
2082
+
2083
+
2084
+ /*******************************
2085
+ User Overrides
2086
+ *******************************/
2087
+