rails-active-ui 0.2.2 → 0.3.1

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 (226) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/datatables.css +15 -0
  3. data/app/assets/stylesheets.css +5 -1
  4. data/app/blocks/resource_list_block.rb +153 -0
  5. data/app/components/back_button_component.rb +34 -0
  6. data/app/components/button_component.rb +4 -2
  7. data/app/components/button_to_component.rb +3 -4
  8. data/app/components/column_component.rb +1 -1
  9. data/app/components/container_component.rb +1 -1
  10. data/app/components/dropdown_component.rb +8 -2
  11. data/app/components/grid_component.rb +5 -1
  12. data/app/components/link_to_component.rb +23 -0
  13. data/app/components/menu_item_component.rb +5 -1
  14. data/app/components/message_component.rb +3 -1
  15. data/app/components/modal_component.rb +23 -3
  16. data/app/components/paragraph_component.rb +13 -0
  17. data/app/components/row_component.rb +1 -1
  18. data/app/components/table_row_component.rb +3 -5
  19. data/app/components/template_component.rb +13 -0
  20. data/app/helpers/component_helper.rb +122 -76
  21. data/app/helpers/fui_helper.rb +37 -0
  22. data/app/javascript/datatables.js +10 -0
  23. data/app/javascript/ui/controllers/fui_datatable_controller.js +35 -0
  24. data/app/javascript/ui/controllers/fui_dropdown_controller.js +8 -1
  25. data/app/javascript/ui/controllers/fui_item_list_controller.js +40 -0
  26. data/app/javascript/ui/controllers/navigation_controller.js +23 -0
  27. data/app/javascript/ui/index.js +11 -0
  28. data/app/lib/component.rb +1 -1
  29. data/config/importmap.rb +3 -0
  30. data/config/initializers/ruby_template_handler.rb +4 -1
  31. data/formantic-ui/components/accordion.css +369 -0
  32. data/formantic-ui/components/accordion.js +595 -0
  33. data/formantic-ui/components/accordion.min.css +9 -0
  34. data/formantic-ui/components/accordion.min.js +11 -0
  35. data/formantic-ui/components/ad.css +264 -0
  36. data/formantic-ui/components/ad.min.css +10 -0
  37. data/formantic-ui/components/api.js +1225 -0
  38. data/formantic-ui/components/api.min.js +11 -0
  39. data/formantic-ui/components/breadcrumb.css +135 -0
  40. data/formantic-ui/components/breadcrumb.min.css +9 -0
  41. data/formantic-ui/components/button.css +4058 -0
  42. data/formantic-ui/components/button.min.css +9 -0
  43. data/formantic-ui/components/calendar.css +327 -0
  44. data/formantic-ui/components/calendar.js +2045 -0
  45. data/formantic-ui/components/calendar.min.css +9 -0
  46. data/formantic-ui/components/calendar.min.js +11 -0
  47. data/formantic-ui/components/card.css +1881 -0
  48. data/formantic-ui/components/card.min.css +9 -0
  49. data/formantic-ui/components/checkbox.css +785 -0
  50. data/formantic-ui/components/checkbox.js +888 -0
  51. data/formantic-ui/components/checkbox.min.css +9 -0
  52. data/formantic-ui/components/checkbox.min.js +11 -0
  53. data/formantic-ui/components/comment.css +283 -0
  54. data/formantic-ui/components/comment.min.css +9 -0
  55. data/formantic-ui/components/container.css +300 -0
  56. data/formantic-ui/components/container.min.css +9 -0
  57. data/formantic-ui/components/dimmer.css +367 -0
  58. data/formantic-ui/components/dimmer.js +732 -0
  59. data/formantic-ui/components/dimmer.min.css +9 -0
  60. data/formantic-ui/components/dimmer.min.js +11 -0
  61. data/formantic-ui/components/divider.css +287 -0
  62. data/formantic-ui/components/divider.min.css +9 -0
  63. data/formantic-ui/components/dropdown.css +2087 -0
  64. data/formantic-ui/components/dropdown.js +4432 -0
  65. data/formantic-ui/components/dropdown.min.css +9 -0
  66. data/formantic-ui/components/dropdown.min.js +11 -0
  67. data/formantic-ui/components/embed.css +155 -0
  68. data/formantic-ui/components/embed.js +688 -0
  69. data/formantic-ui/components/embed.min.css +9 -0
  70. data/formantic-ui/components/embed.min.js +11 -0
  71. data/formantic-ui/components/emoji.css +15311 -0
  72. data/formantic-ui/components/emoji.min.css +9 -0
  73. data/formantic-ui/components/feed.css +799 -0
  74. data/formantic-ui/components/feed.min.css +9 -0
  75. data/formantic-ui/components/flag.css +1149 -0
  76. data/formantic-ui/components/flag.min.css +9 -0
  77. data/formantic-ui/components/flyout.css +546 -0
  78. data/formantic-ui/components/flyout.js +1551 -0
  79. data/formantic-ui/components/flyout.min.css +9 -0
  80. data/formantic-ui/components/flyout.min.js +11 -0
  81. data/formantic-ui/components/form.css +1885 -0
  82. data/formantic-ui/components/form.js +2199 -0
  83. data/formantic-ui/components/form.min.css +9 -0
  84. data/formantic-ui/components/form.min.js +11 -0
  85. data/formantic-ui/components/grid.css +1952 -0
  86. data/formantic-ui/components/grid.min.css +9 -0
  87. data/formantic-ui/components/header.css +778 -0
  88. data/formantic-ui/components/header.min.css +9 -0
  89. data/formantic-ui/components/icon.css +7066 -0
  90. data/formantic-ui/components/icon.min.css +9 -0
  91. data/formantic-ui/components/image.css +315 -0
  92. data/formantic-ui/components/image.min.css +9 -0
  93. data/formantic-ui/components/input.css +1566 -0
  94. data/formantic-ui/components/input.min.css +9 -0
  95. data/formantic-ui/components/item.css +534 -0
  96. data/formantic-ui/components/item.min.css +9 -0
  97. data/formantic-ui/components/label.css +2114 -0
  98. data/formantic-ui/components/label.min.css +9 -0
  99. data/formantic-ui/components/list.css +955 -0
  100. data/formantic-ui/components/list.min.css +9 -0
  101. data/formantic-ui/components/loader.css +787 -0
  102. data/formantic-ui/components/loader.min.css +9 -0
  103. data/formantic-ui/components/menu.css +2131 -0
  104. data/formantic-ui/components/menu.min.css +9 -0
  105. data/formantic-ui/components/message.css +619 -0
  106. data/formantic-ui/components/message.min.css +9 -0
  107. data/formantic-ui/components/modal.css +779 -0
  108. data/formantic-ui/components/modal.js +1637 -0
  109. data/formantic-ui/components/modal.min.css +9 -0
  110. data/formantic-ui/components/modal.min.js +11 -0
  111. data/formantic-ui/components/nag.css +290 -0
  112. data/formantic-ui/components/nag.js +566 -0
  113. data/formantic-ui/components/nag.min.css +9 -0
  114. data/formantic-ui/components/nag.min.js +11 -0
  115. data/formantic-ui/components/placeholder.css +228 -0
  116. data/formantic-ui/components/placeholder.min.css +9 -0
  117. data/formantic-ui/components/popup.css +1184 -0
  118. data/formantic-ui/components/popup.js +1561 -0
  119. data/formantic-ui/components/popup.min.css +9 -0
  120. data/formantic-ui/components/popup.min.js +11 -0
  121. data/formantic-ui/components/progress.css +761 -0
  122. data/formantic-ui/components/progress.js +979 -0
  123. data/formantic-ui/components/progress.min.css +9 -0
  124. data/formantic-ui/components/progress.min.js +11 -0
  125. data/formantic-ui/components/rail.css +147 -0
  126. data/formantic-ui/components/rail.min.css +9 -0
  127. data/formantic-ui/components/rating.css +414 -0
  128. data/formantic-ui/components/rating.js +540 -0
  129. data/formantic-ui/components/rating.min.css +9 -0
  130. data/formantic-ui/components/rating.min.js +11 -0
  131. data/formantic-ui/components/reset.css +386 -0
  132. data/formantic-ui/components/reset.min.css +9 -0
  133. data/formantic-ui/components/reveal.css +277 -0
  134. data/formantic-ui/components/reveal.min.css +9 -0
  135. data/formantic-ui/components/search.css +541 -0
  136. data/formantic-ui/components/search.js +1641 -0
  137. data/formantic-ui/components/search.min.css +9 -0
  138. data/formantic-ui/components/search.min.js +11 -0
  139. data/formantic-ui/components/segment.css +1053 -0
  140. data/formantic-ui/components/segment.min.css +9 -0
  141. data/formantic-ui/components/shape.css +144 -0
  142. data/formantic-ui/components/shape.js +797 -0
  143. data/formantic-ui/components/shape.min.css +9 -0
  144. data/formantic-ui/components/shape.min.js +11 -0
  145. data/formantic-ui/components/sidebar.css +539 -0
  146. data/formantic-ui/components/sidebar.js +1054 -0
  147. data/formantic-ui/components/sidebar.min.css +9 -0
  148. data/formantic-ui/components/sidebar.min.js +11 -0
  149. data/formantic-ui/components/site.css +286 -0
  150. data/formantic-ui/components/site.js +455 -0
  151. data/formantic-ui/components/site.min.css +9 -0
  152. data/formantic-ui/components/site.min.js +11 -0
  153. data/formantic-ui/components/slider.css +926 -0
  154. data/formantic-ui/components/slider.js +1546 -0
  155. data/formantic-ui/components/slider.min.css +9 -0
  156. data/formantic-ui/components/slider.min.js +11 -0
  157. data/formantic-ui/components/state.js +697 -0
  158. data/formantic-ui/components/state.min.js +11 -0
  159. data/formantic-ui/components/statistic.css +586 -0
  160. data/formantic-ui/components/statistic.min.css +9 -0
  161. data/formantic-ui/components/step.css +1538 -0
  162. data/formantic-ui/components/step.min.css +9 -0
  163. data/formantic-ui/components/sticky.css +73 -0
  164. data/formantic-ui/components/sticky.js +917 -0
  165. data/formantic-ui/components/sticky.min.css +9 -0
  166. data/formantic-ui/components/sticky.min.js +11 -0
  167. data/formantic-ui/components/tab.css +84 -0
  168. data/formantic-ui/components/tab.js +967 -0
  169. data/formantic-ui/components/tab.min.css +9 -0
  170. data/formantic-ui/components/tab.min.js +11 -0
  171. data/formantic-ui/components/table.css +3473 -0
  172. data/formantic-ui/components/table.min.css +9 -0
  173. data/formantic-ui/components/text.css +155 -0
  174. data/formantic-ui/components/text.min.css +9 -0
  175. data/formantic-ui/components/toast.css +751 -0
  176. data/formantic-ui/components/toast.js +964 -0
  177. data/formantic-ui/components/toast.min.css +9 -0
  178. data/formantic-ui/components/toast.min.js +11 -0
  179. data/formantic-ui/components/transition.css +1148 -0
  180. data/formantic-ui/components/transition.js +1034 -0
  181. data/formantic-ui/components/transition.min.css +9 -0
  182. data/formantic-ui/components/transition.min.js +11 -0
  183. data/formantic-ui/components/visibility.js +1292 -0
  184. data/formantic-ui/components/visibility.min.js +11 -0
  185. data/formantic-ui/semantic.css +78485 -0
  186. data/formantic-ui/semantic.js +31036 -0
  187. data/formantic-ui/semantic.min.css +11 -0
  188. data/formantic-ui/semantic.min.js +11 -0
  189. data/formantic-ui/themes/basic/assets/fonts/LICENSE.txt +91 -0
  190. data/formantic-ui/themes/basic/assets/fonts/icons.woff +0 -0
  191. data/formantic-ui/themes/basic/assets/fonts/icons.woff2 +0 -0
  192. data/formantic-ui/themes/default/assets/fonts/LICENSE_Lato.txt +94 -0
  193. data/formantic-ui/themes/default/assets/fonts/LICENSE_icons.txt +165 -0
  194. data/formantic-ui/themes/default/assets/fonts/Lato-Bold.woff +0 -0
  195. data/formantic-ui/themes/default/assets/fonts/Lato-Bold.woff2 +0 -0
  196. data/formantic-ui/themes/default/assets/fonts/Lato-BoldItalic.woff +0 -0
  197. data/formantic-ui/themes/default/assets/fonts/Lato-BoldItalic.woff2 +0 -0
  198. data/formantic-ui/themes/default/assets/fonts/Lato-Italic.woff +0 -0
  199. data/formantic-ui/themes/default/assets/fonts/Lato-Italic.woff2 +0 -0
  200. data/formantic-ui/themes/default/assets/fonts/Lato-Regular.woff +0 -0
  201. data/formantic-ui/themes/default/assets/fonts/Lato-Regular.woff2 +0 -0
  202. data/formantic-ui/themes/default/assets/fonts/LatoLatin-Bold.woff +0 -0
  203. data/formantic-ui/themes/default/assets/fonts/LatoLatin-Bold.woff2 +0 -0
  204. data/formantic-ui/themes/default/assets/fonts/LatoLatin-BoldItalic.woff +0 -0
  205. data/formantic-ui/themes/default/assets/fonts/LatoLatin-BoldItalic.woff2 +0 -0
  206. data/formantic-ui/themes/default/assets/fonts/LatoLatin-Italic.woff +0 -0
  207. data/formantic-ui/themes/default/assets/fonts/LatoLatin-Italic.woff2 +0 -0
  208. data/formantic-ui/themes/default/assets/fonts/LatoLatin-Regular.woff +0 -0
  209. data/formantic-ui/themes/default/assets/fonts/LatoLatin-Regular.woff2 +0 -0
  210. data/formantic-ui/themes/default/assets/fonts/brand-icons.woff +0 -0
  211. data/formantic-ui/themes/default/assets/fonts/brand-icons.woff2 +0 -0
  212. data/formantic-ui/themes/default/assets/fonts/icons.woff +0 -0
  213. data/formantic-ui/themes/default/assets/fonts/icons.woff2 +0 -0
  214. data/formantic-ui/themes/default/assets/fonts/outline-icons.woff +0 -0
  215. data/formantic-ui/themes/default/assets/fonts/outline-icons.woff2 +0 -0
  216. data/formantic-ui/themes/famfamfam/assets/images/flags.png +0 -0
  217. data/formantic-ui/themes/github/assets/fonts/LICENSE.txt +94 -0
  218. data/formantic-ui/themes/github/assets/fonts/octicons.woff +0 -0
  219. data/formantic-ui/themes/github/assets/fonts/octicons.woff2 +0 -0
  220. data/formantic-ui/themes/material/assets/fonts/LICENSE.txt +202 -0
  221. data/formantic-ui/themes/material/assets/fonts/icons.woff +0 -0
  222. data/formantic-ui/themes/material/assets/fonts/icons.woff2 +0 -0
  223. data/lib/ui/engine.rb +7 -2
  224. data/lib/ui/version.rb +1 -1
  225. metadata +205 -7
  226. data/app/components/link_component.rb +0 -23
@@ -0,0 +1,785 @@
1
+ /*!
2
+ * # Fomantic-UI 2.9.4 - Checkbox
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
+ Checkbox
14
+ *******************************/
15
+
16
+
17
+ /* --------------
18
+ Content
19
+ --------------- */
20
+ .ui.checkbox {
21
+ position: relative;
22
+ display: inline-block;
23
+ -webkit-backface-visibility: hidden;
24
+ backface-visibility: hidden;
25
+ outline: none;
26
+ vertical-align: baseline;
27
+ font-style: normal;
28
+ min-height: 17px;
29
+ font-size: 1em;
30
+ line-height: 17px;
31
+ min-width: 17px;
32
+ }
33
+
34
+ /* HTML Checkbox */
35
+ .ui.checkbox input[type="checkbox"],
36
+ .ui.checkbox input[type="radio"] {
37
+ cursor: pointer;
38
+ position: absolute;
39
+ top: 0;
40
+ left: 0;
41
+ opacity: 0 !important;
42
+ outline: none;
43
+ z-index: 3;
44
+ width: 17px;
45
+ height: 17px;
46
+ }
47
+ .ui.checkbox label {
48
+ cursor: auto;
49
+ position: relative;
50
+ display: block;
51
+ outline: none;
52
+ font-size: 1em;
53
+ }
54
+ .ui.checkbox:not(.invisible) label {
55
+ padding-left: 1.85714em;
56
+ }
57
+ .ui.checkbox label::before {
58
+ position: absolute;
59
+ top: 0;
60
+ left: 0;
61
+ width: 17px;
62
+ height: 17px;
63
+ content: "";
64
+ background: #fff;
65
+ border-radius: 0.21428571rem;
66
+ transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
67
+ border: 1px solid #d4d4d5;
68
+ }
69
+
70
+ /* --------------
71
+ Checkmark
72
+ --------------- */
73
+ .ui.checkbox label::after {
74
+ position: absolute;
75
+ font-size: 14px;
76
+ top: 0;
77
+ left: 0;
78
+ width: 17px;
79
+ height: 17px;
80
+ text-align: center;
81
+ opacity: 0;
82
+ color: rgba(0, 0, 0, 0.87);
83
+ transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
84
+ }
85
+ .ui.right.aligned.checkbox label {
86
+ padding-left: 0;
87
+ padding-right: 1.85714em;
88
+ }
89
+ .ui.right.aligned.checkbox label::after,
90
+ .ui.right.aligned.checkbox label::before {
91
+ right: 0;
92
+ left: auto;
93
+ }
94
+
95
+ /* --------------
96
+ Label
97
+ --------------- */
98
+
99
+ /* Inside */
100
+ .ui.checkbox label,
101
+ .ui.checkbox + label {
102
+ color: rgba(0, 0, 0, 0.87);
103
+ transition: color 0.1s ease;
104
+ }
105
+
106
+ /* Outside */
107
+ .ui.checkbox + label {
108
+ vertical-align: middle;
109
+ }
110
+
111
+
112
+ /*******************************
113
+ States
114
+ *******************************/
115
+
116
+
117
+ /* --------------
118
+ Hover
119
+ --------------- */
120
+ .ui.checkbox label:hover::before {
121
+ background: #fff;
122
+ border-color: rgba(34, 36, 38, 0.35);
123
+ }
124
+ .ui.checkbox:not(.invisible) label:hover,
125
+ .ui.checkbox:not(.invisible) + label:hover {
126
+ color: rgba(0, 0, 0, 0.8);
127
+ }
128
+
129
+ /* --------------
130
+ Down
131
+ --------------- */
132
+ .ui.checkbox label:active::before {
133
+ background: #f9fafb;
134
+ border-color: rgba(34, 36, 38, 0.35);
135
+ }
136
+ .ui.checkbox label:active::after {
137
+ color: rgba(0, 0, 0, 0.95);
138
+ }
139
+ .ui.checkbox:not(.invisible) input:active ~ label {
140
+ color: rgba(0, 0, 0, 0.95);
141
+ }
142
+
143
+ /* --------------
144
+ Focus
145
+ --------------- */
146
+ .ui.checkbox input:focus ~ label::before {
147
+ background: #fff;
148
+ border-color: #96c8da;
149
+ }
150
+ .ui.checkbox input:focus ~ label::after {
151
+ color: rgba(0, 0, 0, 0.95);
152
+ }
153
+ .ui.checkbox:not(.invisible) input:focus ~ label {
154
+ color: rgba(0, 0, 0, 0.95);
155
+ }
156
+
157
+ /* --------------
158
+ Active
159
+ --------------- */
160
+ .ui.checkbox input:checked ~ label::before {
161
+ background: #fff;
162
+ border-color: rgba(34, 36, 38, 0.35);
163
+ }
164
+ .ui.checkbox input:checked ~ label::after {
165
+ opacity: 1;
166
+ color: rgba(0, 0, 0, 0.95);
167
+ }
168
+
169
+ /* --------------
170
+ Indeterminate
171
+ --------------- */
172
+ .ui.checkbox input:not([type="radio"]):indeterminate ~ label::before {
173
+ background: #fff;
174
+ border-color: rgba(34, 36, 38, 0.35);
175
+ }
176
+ .ui.checkbox input:not([type="radio"]):indeterminate ~ label::after {
177
+ opacity: 1;
178
+ color: rgba(0, 0, 0, 0.95);
179
+ }
180
+ .ui.indeterminate.toggle.checkbox input:not([type="radio"]):indeterminate ~ label::before {
181
+ background: rgba(0, 0, 0, 0.15);
182
+ }
183
+ .ui.indeterminate.toggle.checkbox input:not([type="radio"]) ~ label::after {
184
+ left: 1.075rem;
185
+ }
186
+ .ui.right.aligned.indeterminate.toggle.checkbox input:not([type="radio"]) ~ label::after {
187
+ left: auto;
188
+ right: 1.075rem;
189
+ }
190
+
191
+ /* --------------
192
+ Active Focus
193
+ --------------- */
194
+ .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before,
195
+ .ui.checkbox input:checked:focus ~ label::before {
196
+ background: #fff;
197
+ border-color: #96c8da;
198
+ }
199
+ .ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after,
200
+ .ui.checkbox input:checked:focus ~ label::after {
201
+ color: rgba(0, 0, 0, 0.95);
202
+ }
203
+
204
+ /* --------------
205
+ Read-Only
206
+ --------------- */
207
+ .ui.read-only.checkbox,
208
+ .ui.read-only.checkbox label {
209
+ cursor: default;
210
+ pointer-events: none;
211
+ }
212
+
213
+ /* --------------
214
+ Disabled
215
+ --------------- */
216
+ .ui.disabled.checkbox label,
217
+ .ui.checkbox input[disabled] ~ label {
218
+ cursor: default;
219
+ opacity: 0.5;
220
+ color: #000000;
221
+ pointer-events: none;
222
+ }
223
+
224
+ /* --------------
225
+ Hidden
226
+ --------------- */
227
+
228
+ /* Initialized checkbox moves input below element
229
+ to prevent manually triggering */
230
+ .ui.checkbox input.hidden {
231
+ z-index: -1;
232
+ }
233
+
234
+ /* Selectable Label */
235
+ .ui.checkbox input + label[for],
236
+ .ui.checkbox input.hidden + label {
237
+ cursor: pointer;
238
+ -webkit-user-select: none;
239
+ -ms-user-select: none;
240
+ user-select: none;
241
+ }
242
+
243
+
244
+ /*******************************
245
+ Types
246
+ *******************************/
247
+
248
+
249
+ /* --------------
250
+ Radio
251
+ --------------- */
252
+ .ui.radio.checkbox {
253
+ min-height: 15px;
254
+ }
255
+ .ui.radio.checkbox label {
256
+ padding-left: 1.85714em;
257
+ }
258
+
259
+ /* Box */
260
+ .ui.radio.checkbox label::before {
261
+ content: "";
262
+ transform: none;
263
+ width: 15px;
264
+ height: 15px;
265
+ border-radius: 500rem;
266
+ top: 1px;
267
+ left: 0;
268
+ }
269
+
270
+ /* Bullet */
271
+ .ui.radio.checkbox label::after {
272
+ border: none;
273
+ content: "" !important;
274
+ line-height: 15px;
275
+ top: 1px;
276
+ left: 0;
277
+ width: 15px;
278
+ height: 15px;
279
+ border-radius: 500rem;
280
+ transform: scale(0.46666667);
281
+ background-color: rgba(0, 0, 0, 0.87);
282
+ }
283
+
284
+ /* Focus */
285
+ .ui.radio.checkbox input:focus ~ label::before {
286
+ background-color: #fff;
287
+ }
288
+ .ui.radio.checkbox input:focus ~ label::after {
289
+ background-color: rgba(0, 0, 0, 0.95);
290
+ }
291
+
292
+ /* Indeterminate */
293
+ .ui.radio.checkbox input:indeterminate ~ label::after {
294
+ opacity: 0;
295
+ }
296
+
297
+ /* Active */
298
+ .ui.radio.checkbox input:checked ~ label::before {
299
+ background-color: #fff;
300
+ }
301
+ .ui.radio.checkbox input:checked ~ label::after {
302
+ background-color: rgba(0, 0, 0, 0.95);
303
+ }
304
+
305
+ /* Active Focus */
306
+ .ui.radio.checkbox input:focus:checked ~ label::before {
307
+ background-color: #fff;
308
+ }
309
+ .ui.radio.checkbox input:focus:checked ~ label::after {
310
+ background-color: rgba(0, 0, 0, 0.95);
311
+ }
312
+
313
+ /* --------------
314
+ Slider
315
+ --------------- */
316
+ .ui.slider.checkbox {
317
+ min-height: 1.25rem;
318
+ }
319
+
320
+ /* Input */
321
+ .ui.slider.checkbox input {
322
+ width: 3.5rem;
323
+ height: 1.25rem;
324
+ }
325
+
326
+ /* Label */
327
+ .ui.slider.checkbox label {
328
+ padding-left: 4.5rem;
329
+ line-height: 1rem;
330
+ color: rgba(0, 0, 0, 0.4);
331
+ }
332
+
333
+ /* Line */
334
+ .ui.slider.checkbox label::before {
335
+ display: block;
336
+ position: absolute;
337
+ content: "";
338
+ transform: none;
339
+ border: none !important;
340
+ left: 0;
341
+ z-index: 1;
342
+ top: 0.4rem;
343
+ background-color: rgba(0, 0, 0, 0.05);
344
+ width: 3.5rem;
345
+ height: 0.21428571rem;
346
+ border-radius: 500rem;
347
+ transition: background 0.3s ease;
348
+ }
349
+
350
+ /* Handle */
351
+ .ui.slider.checkbox label::after {
352
+ background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
353
+ position: absolute;
354
+ content: "" !important;
355
+ opacity: 1;
356
+ z-index: 2;
357
+ border: none;
358
+ box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
359
+ width: 1.5rem;
360
+ height: 1.5rem;
361
+ top: -0.25rem;
362
+ left: 0;
363
+ transform: none;
364
+ border-radius: 500rem;
365
+ transition: left 0.3s ease;
366
+ }
367
+
368
+ /* Focus */
369
+ .ui.slider.checkbox input:focus ~ label::before {
370
+ background-color: rgba(0, 0, 0, 0.15);
371
+ border: none;
372
+ }
373
+
374
+ /* Hover */
375
+ .ui.slider.checkbox label:hover {
376
+ color: rgba(0, 0, 0, 0.8);
377
+ }
378
+ .ui.slider.checkbox label:hover::before {
379
+ background: rgba(0, 0, 0, 0.15);
380
+ }
381
+
382
+ /* Active */
383
+ .ui.slider.checkbox input:checked ~ label {
384
+ color: rgba(0, 0, 0, 0.95);
385
+ }
386
+ .ui.slider.checkbox input:checked ~ label::before {
387
+ background-color: #545454;
388
+ }
389
+ .ui.slider.checkbox input:checked ~ label::after {
390
+ left: 2rem;
391
+ }
392
+
393
+ /* Active Focus */
394
+ .ui.slider.checkbox input:focus:checked ~ label {
395
+ color: rgba(0, 0, 0, 0.95);
396
+ }
397
+ .ui.slider.checkbox input:focus:checked ~ label::before {
398
+ background-color: #000000;
399
+ }
400
+ .ui.right.aligned.slider.checkbox label {
401
+ padding-left: 0;
402
+ padding-right: 4.5rem;
403
+ }
404
+ .ui.right.aligned.slider.checkbox label::after {
405
+ left: auto;
406
+ right: 2rem;
407
+ transition: right 0.3s ease;
408
+ }
409
+ .ui.right.aligned.slider.checkbox input:checked ~ label::after {
410
+ left: auto;
411
+ right: 0;
412
+ }
413
+
414
+ /* --------------
415
+ Toggle
416
+ --------------- */
417
+ .ui.toggle.checkbox {
418
+ min-height: 1.5rem;
419
+ }
420
+
421
+ /* Input */
422
+ .ui.toggle.checkbox input {
423
+ width: 3.5rem;
424
+ height: 1.5rem;
425
+ }
426
+
427
+ /* Label */
428
+ .ui.toggle.checkbox label {
429
+ min-height: 1.5rem;
430
+ padding-left: 4.5rem;
431
+ color: rgba(0, 0, 0, 0.87);
432
+ }
433
+ .ui.toggle.checkbox label {
434
+ padding-top: 0.15em;
435
+ }
436
+
437
+ /* Switch */
438
+ .ui.toggle.checkbox label::before {
439
+ display: block;
440
+ position: absolute;
441
+ content: "";
442
+ z-index: 1;
443
+ transform: none;
444
+ border: none;
445
+ top: 0;
446
+ background: rgba(0, 0, 0, 0.05);
447
+ box-shadow: none;
448
+ width: 3.5rem;
449
+ height: 1.5rem;
450
+ border-radius: 500rem;
451
+ }
452
+
453
+ /* Handle */
454
+ .ui.toggle.checkbox label::after {
455
+ background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
456
+ position: absolute;
457
+ content: "" !important;
458
+ opacity: 1;
459
+ z-index: 2;
460
+ border: none;
461
+ box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
462
+ width: 1.5rem;
463
+ height: 1.5rem;
464
+ top: 0;
465
+ left: 0;
466
+ border-radius: 500rem;
467
+ transition: background 0.3s ease, left 0.3s ease;
468
+ }
469
+ .ui.toggle.checkbox input ~ label::after {
470
+ left: -0.05rem;
471
+ box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
472
+ }
473
+
474
+ /* Focus */
475
+ .ui.toggle.checkbox input:focus ~ label::before {
476
+ background-color: rgba(0, 0, 0, 0.15);
477
+ border: none;
478
+ }
479
+
480
+ /* Hover */
481
+ .ui.toggle.checkbox label:hover::before {
482
+ background-color: rgba(0, 0, 0, 0.15);
483
+ border: none;
484
+ }
485
+
486
+ /* Active */
487
+ .ui.toggle.checkbox input:checked ~ label {
488
+ color: rgba(0, 0, 0, 0.95);
489
+ }
490
+ .ui.toggle.checkbox input:checked ~ label::before {
491
+ background-color: #2185d0;
492
+ }
493
+ .ui.toggle.checkbox input:checked ~ label::after {
494
+ left: 2.15rem;
495
+ box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
496
+ }
497
+
498
+ /* Active Focus */
499
+ .ui.toggle.checkbox input:focus:checked ~ label {
500
+ color: rgba(0, 0, 0, 0.95);
501
+ }
502
+ .ui.toggle.checkbox input:focus:checked ~ label::before {
503
+ background-color: #0d71bb;
504
+ }
505
+ .ui.right.aligned.toggle.checkbox label {
506
+ padding-left: 0;
507
+ padding-right: 4.5rem;
508
+ }
509
+ .ui.right.aligned.toggle.checkbox input ~ label::after {
510
+ left: auto;
511
+ right: 2.15rem;
512
+ transition: background 0.3s ease, right 0.3s ease;
513
+ }
514
+ .ui.right.aligned.toggle.checkbox input:checked ~ label::after {
515
+ left: auto;
516
+ right: -0.05rem;
517
+ }
518
+
519
+
520
+ /*******************************
521
+ Variations
522
+ *******************************/
523
+
524
+
525
+ /* --------------
526
+ Fitted
527
+ --------------- */
528
+ .ui.ui.fitted.checkbox label {
529
+ padding-left: 0;
530
+ }
531
+ .ui.fitted.toggle.checkbox {
532
+ width: 3.5rem;
533
+ }
534
+ .ui.fitted.slider.checkbox {
535
+ width: 3.5rem;
536
+ }
537
+
538
+ /* --------------
539
+ Inverted
540
+ --------------- */
541
+ .ui.ui.ui.inverted.checkbox label,
542
+ .ui.ui.ui.inverted.checkbox + label {
543
+ color: rgba(255, 255, 255, 0.9);
544
+ }
545
+
546
+ /* Hover */
547
+ .ui.ui.inverted.checkbox label:hover {
548
+ color: #ffffff;
549
+ }
550
+ .ui.inverted.checkbox label:hover::before {
551
+ border-color: rgba(34, 36, 38, 0.5);
552
+ }
553
+
554
+ /* Slider Label */
555
+ .ui.inverted.slider.checkbox label {
556
+ color: rgba(255, 255, 255, 0.5);
557
+ }
558
+
559
+ /* Slider Line */
560
+ .ui.ui.inverted.slider.checkbox label::before {
561
+ background-color: rgba(255, 255, 255, 0.5);
562
+ }
563
+
564
+ /* Slider Hover */
565
+ .ui.ui.inverted.slider.checkbox label:hover::before {
566
+ background: rgba(255, 255, 255, 0.7);
567
+ }
568
+
569
+ /* Slider Active */
570
+ .ui.ui.inverted.slider.checkbox input:checked ~ label {
571
+ color: #ffffff;
572
+ }
573
+ .ui.ui.inverted.slider.checkbox input:checked ~ label::before {
574
+ background-color: rgba(255, 255, 255, 0.8);
575
+ }
576
+
577
+ /* Slider Active Focus */
578
+ .ui.ui.inverted.slider.checkbox input:focus:checked ~ label {
579
+ color: #ffffff;
580
+ }
581
+ .ui.ui.inverted.slider.checkbox input:focus:checked ~ label::before {
582
+ background-color: rgba(255, 255, 255, 0.8);
583
+ }
584
+
585
+ /* Toggle Switch */
586
+ .ui.ui.inverted.toggle.checkbox label::before {
587
+ background-color: rgba(255, 255, 255, 0.9);
588
+ }
589
+
590
+ /* Toggle Hover */
591
+ .ui.ui.inverted.toggle.checkbox label:hover::before {
592
+ background: #ffffff;
593
+ }
594
+
595
+ /* Toggle Active */
596
+ .ui.ui.inverted.toggle.checkbox input:checked ~ label {
597
+ color: #ffffff;
598
+ }
599
+ .ui.ui.inverted.toggle.checkbox input:checked ~ label::before {
600
+ background-color: #2185d0;
601
+ }
602
+
603
+ /* Toggle Active Focus */
604
+ .ui.ui.inverted.toggle.checkbox input:focus:checked ~ label {
605
+ color: #ffffff;
606
+ }
607
+ .ui.ui.inverted.toggle.checkbox input:focus:checked ~ label::before {
608
+ background-color: #0d71bb;
609
+ }
610
+
611
+ /* --------------
612
+ Invisible
613
+ --------------- */
614
+ .ui.invisible.checkbox:not(.compact) {
615
+ display: block;
616
+ }
617
+ .ui.invisible.checkbox input {
618
+ left: -99999px;
619
+ position: absolute;
620
+ }
621
+ .ui.invisible.checkbox label::before,
622
+ .ui.invisible.checkbox label::after {
623
+ display: none;
624
+ }
625
+ .ui.invisible.checkbox label {
626
+ transition: all 0.1s ease;
627
+ }
628
+ .ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked) + label {
629
+ background: transparent;
630
+ border-color: transparent;
631
+ box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
632
+ color: inherit;
633
+ }
634
+ .ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked):not(:hover):focus + label:not(.image) {
635
+ box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset;
636
+ }
637
+ .ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked) + label.image,
638
+ .basic.ui.ui.ui.ui.ui.invisible.checkbox input:not(:checked) + label {
639
+ box-shadow: none;
640
+ }
641
+ .ui.invisible.checkbox input:not(:checked) + label.image {
642
+ opacity: 0.5;
643
+ filter: grayscale(1);
644
+ }
645
+ .ui.invisible.checkbox input:not(:checked):not(:hover):focus + label.image {
646
+ opacity: 0.75;
647
+ }
648
+ .ui.invisible.checkbox input:not(:checked)[disabled] + label.image,
649
+ .disabled.ui.invisible.checkbox input:not(:checked) + label.image {
650
+ opacity: 0.25;
651
+ }
652
+
653
+ /* --------------------
654
+ Size
655
+ --------------------- */
656
+ .ui.mini.checkbox {
657
+ font-size: 0.78571429em;
658
+ }
659
+ .ui.tiny.checkbox {
660
+ font-size: 0.85714286em;
661
+ }
662
+ .ui.small.checkbox {
663
+ font-size: 0.92857143em;
664
+ }
665
+ .ui.large.checkbox {
666
+ font-size: 1.14285714em;
667
+ }
668
+ .ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after,
669
+ .ui.large.checkbox:not(.slider):not(.toggle):not(.radio) label::after,
670
+ .ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before,
671
+ .ui.large.checkbox:not(.slider):not(.toggle):not(.radio) label::before {
672
+ transform: scale(1.14285714);
673
+ transform-origin: left;
674
+ }
675
+ .ui.large.form .checkbox.radio label::before,
676
+ .ui.large.checkbox.radio label::before {
677
+ transform: scale(1.14285714);
678
+ transform-origin: left;
679
+ }
680
+ .ui.large.form .checkbox.radio label::after,
681
+ .ui.large.checkbox.radio label::after {
682
+ transform: scale(0.57142857);
683
+ transform-origin: left;
684
+ left: 0.33571429em;
685
+ }
686
+ .ui.big.checkbox {
687
+ font-size: 1.28571429em;
688
+ }
689
+ .ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after,
690
+ .ui.big.checkbox:not(.slider):not(.toggle):not(.radio) label::after,
691
+ .ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before,
692
+ .ui.big.checkbox:not(.slider):not(.toggle):not(.radio) label::before {
693
+ transform: scale(1.28571429);
694
+ transform-origin: left;
695
+ }
696
+ .ui.big.form .checkbox.radio label::before,
697
+ .ui.big.checkbox.radio label::before {
698
+ transform: scale(1.28571429);
699
+ transform-origin: left;
700
+ }
701
+ .ui.big.form .checkbox.radio label::after,
702
+ .ui.big.checkbox.radio label::after {
703
+ transform: scale(0.64285714);
704
+ transform-origin: left;
705
+ left: 0.37142857em;
706
+ }
707
+ .ui.huge.checkbox {
708
+ font-size: 1.42857143em;
709
+ }
710
+ .ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after,
711
+ .ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) label::after,
712
+ .ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before,
713
+ .ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) label::before {
714
+ transform: scale(1.42857143);
715
+ transform-origin: left;
716
+ }
717
+ .ui.huge.form .checkbox.radio label::before,
718
+ .ui.huge.checkbox.radio label::before {
719
+ transform: scale(1.42857143);
720
+ transform-origin: left;
721
+ }
722
+ .ui.huge.form .checkbox.radio label::after,
723
+ .ui.huge.checkbox.radio label::after {
724
+ transform: scale(0.71428571);
725
+ transform-origin: left;
726
+ left: 0.40714286em;
727
+ }
728
+ .ui.massive.checkbox {
729
+ font-size: 1.71428571em;
730
+ }
731
+ .ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after,
732
+ .ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) label::after,
733
+ .ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before,
734
+ .ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) label::before {
735
+ transform: scale(1.71428571);
736
+ transform-origin: left;
737
+ }
738
+ .ui.massive.form .checkbox.radio label::before,
739
+ .ui.massive.checkbox.radio label::before {
740
+ transform: scale(1.71428571);
741
+ transform-origin: left;
742
+ }
743
+ .ui.massive.form .checkbox.radio label::after,
744
+ .ui.massive.checkbox.radio label::after {
745
+ transform: scale(0.85714286);
746
+ transform-origin: left;
747
+ left: 0.47857143em;
748
+ }
749
+
750
+
751
+ /*******************************
752
+ Theme Overrides
753
+ *******************************/
754
+
755
+ @font-face {
756
+ font-family: Checkbox;
757
+ src: url("data:application/font-woff;base64,d09GRgABAAAAAAR8AA0AAAAABtwAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAEYAAAABoAAAAcgbCWJ0dERUYAAARIAAAAFwAAABgAJQAAT1MvMgAAAZgAAABAAAAAYA8SBD9jbWFwAAAB9AAAAFMAAAFc71zo6Wdhc3AAAARAAAAACAAAAAgAAAAQZ2x5ZgAAAlwAAADJAAABVHshwGBoZWFkAAABMAAAAC4AAAA2Bj3tWWhoZWEAAAFgAAAAHQAAACQHfQPIaG10eAAAAdgAAAAZAAAAHg56AEVsb2NhAAACSAAAABIAAAASAQoAjG1heHAAAAGAAAAAGAAAACAACgAvbmFtZQAAAygAAADnAAABp5xOC4Fwb3N0AAAEEAAAADAAAABaHRtWW3icY2BkYGBgYmDgqbAVjee3+crAzcIAAhc3XilHppl3M+cBKQ6QWgYGAAHnCVsAAHicY2BkYGA+8P8AAwMLAwgw72ZgZEAF7ABaJgNOAAAAeJxjYGRgYOBg0GUA0QwMTAxoAAAFtQA6eJxjYGYWYpzAwMrAwDST6QwDA0M/hGZ8zWDMyMmAChgF0AQYHBgYXjAxH/h/gMGB+QCIx8CIJKvAwAgAIOcKW3icY2GAAMZQCM0ExCwMDK7MqiAeAAqXAM4AAAB4nN2NwQ2AMAwDL00pHYJH52AQ9n/w6BbFCS9WwJFlO3IUwHl5YAQuJctcOaVdU6TGmGWt7IxJuHXnvmcrnLPR2GWb6NnF4rrwhT5U/o0Hf5EJGAAAAAAAAAgACAAQABgASABsAKoAAHichY09CsJAEIVndiG2gyQ7IASJIbHQyvyIiFhZpBE8iNsIeiVvYOFx7FPbKE6yUcHGgZ23jzd8DxDeowAWCv77Dez0Vd1hAIB+D714NMa0yNdYZrMhum0CfaWnT4bpeSPaEjOd8djIltTBNBlhSGzES3Jqb5oW6UOrE1WBL7/A73lxNBqnK8znZRbNWMgJET8qJhlWF1HV3zvXSceBSifawrTjTLrd0uI3c4lFu4UcYvbh1/KsIaodUayx7Kxr+wb8Y+EFi+YsngAAAHicfc5BSsNAGMXxf9q0agURFy50M3shlOoNikIXddGFa5N0SEvLDKQp2KUH8AxuXXkkz+JL+NYJJPzmffNmAlzxS0L7JJxzYx5wxoN5qPzZnMrv5hGXfJrHyr/NE+74UytJL5Rcdye0Huiue/NQ+aM5lV/NI27ZmsfKv8wTnvhhzgZPyY6CyAfMN77cFVFaaVBxZE9OraWvjvtc6Kn0jN40qDnoVyIBx4yMqWJfH7YxuFk27a2/dLVGxUpbQndYrrVnrazgpO9C1chSb7s3UymGxlU++Dpv/NoVJ7co4zLGkPEPj0VARQB4nGNgYsAPOBgYGJkYmBiZGZgZWRhZGdnYS/MyDYAAShuCaFcLCB9Iw/hGAOPdCuMAAQAB//8AD3icY2BkYGDgAWIBIGYCYhYIDQACOwAmAHicY2BgYGQAgns+by1A9MWNV8phNABQ5wfrAAA=") format("woff");
758
+ }
759
+
760
+ /* Checkmark */
761
+ .ui.checkbox label::after {
762
+ font-family: Checkbox;
763
+ }
764
+
765
+ /* Checked */
766
+ .ui.checkbox input:checked ~ label::after {
767
+ content: "\e800";
768
+ }
769
+
770
+ /* Indeterminate */
771
+ .ui.checkbox input:indeterminate ~ label::after {
772
+ font-size: 12px;
773
+ content: "\e801";
774
+ }
775
+ /* UTF Reference
776
+ .check::before { content: '\e800'; }
777
+ .dash::before { content: '\e801'; }
778
+ .plus::before { content: '\e802'; }
779
+ */
780
+
781
+
782
+ /*******************************
783
+ Site Overrides
784
+ *******************************/
785
+