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,799 @@
1
+ /*!
2
+ * # Fomantic-UI 2.9.4 - Feed
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
+ Activity Feed
14
+ *******************************/
15
+
16
+ .ui.feed {
17
+ margin: 1em 0;
18
+ }
19
+ .ui.feed:first-child {
20
+ margin-top: 0;
21
+ }
22
+ .ui.feed:last-child {
23
+ margin-bottom: 0;
24
+ }
25
+
26
+
27
+ /*******************************
28
+ Content
29
+ *******************************/
30
+
31
+
32
+ /* Event */
33
+ .ui.feed > .event {
34
+ display: flex;
35
+ flex-direction: row;
36
+ width: 100%;
37
+ padding: 0.21428571rem 0;
38
+ margin: 0;
39
+ background: none;
40
+ }
41
+ .ui.feed > .event:not(:first-child) {
42
+ border-top: none;
43
+ }
44
+ .ui.feed:not(.connected) > .event:first-child {
45
+ padding-top: 0;
46
+ }
47
+ .ui.feed > .event:last-child {
48
+ padding-bottom: 0;
49
+ }
50
+
51
+ /* Event Label */
52
+ .ui.feed > .event > .label {
53
+ display: block;
54
+ flex: 0 0 auto;
55
+ width: 2.5em;
56
+ height: auto;
57
+ align-self: stretch;
58
+ text-align: left;
59
+ }
60
+ .ui.feed > .event > .label .icon {
61
+ opacity: 1;
62
+ font-size: 1.5em;
63
+ width: 100%;
64
+ padding: 0.25em;
65
+ background: none;
66
+ border: none;
67
+ border-radius: 0;
68
+ color: rgba(0, 0, 0, 0.6);
69
+ }
70
+ .ui.feed > .event > .label img {
71
+ width: 100%;
72
+ height: auto;
73
+ border-radius: 500rem;
74
+ }
75
+ .ui.feed > .event > .label > .text {
76
+ display: block;
77
+ text-align: center;
78
+ margin-top: 0.5em;
79
+ }
80
+ .ui.feed > .event > .label > .text.ui {
81
+ margin-top: 0.65em;
82
+ }
83
+ .ui.feed > .event > .label > .text.multiline {
84
+ margin-top: 0;
85
+ }
86
+ .ui.feed > .event > .label > .text.multiline.ui {
87
+ margin-top: 0.3em;
88
+ }
89
+ .ui.feed > .event > .label > .ui.label {
90
+ margin-top: 0.4em;
91
+ position: relative;
92
+ z-index: 1;
93
+ }
94
+ .ui.feed > .event > .label + .content {
95
+ margin: 0.5em 0 0.35714286em 1.14285714em;
96
+ }
97
+
98
+ /* --------------
99
+ Content
100
+ --------------- */
101
+
102
+ /* Content */
103
+ .ui.feed > .event > .content {
104
+ display: block;
105
+ flex: 1 1 auto;
106
+ align-self: stretch;
107
+ text-align: left;
108
+ word-wrap: break-word;
109
+ }
110
+ .ui.feed > .event:last-child > .content {
111
+ padding-bottom: 0;
112
+ }
113
+
114
+ /* Link */
115
+ .ui.feed > .event > .content a {
116
+ cursor: pointer;
117
+ }
118
+
119
+ /* --------------
120
+ Date
121
+ --------------- */
122
+ .ui.feed > .event > .content .date {
123
+ margin: -0.5rem 0 0;
124
+ padding: 0;
125
+ color: rgba(0, 0, 0, 0.4);
126
+ font-weight: normal;
127
+ font-size: 1em;
128
+ font-style: normal;
129
+ }
130
+
131
+ /* --------------
132
+ Summary
133
+ --------------- */
134
+ .ui.feed > .event > .content .summary {
135
+ margin: 0;
136
+ font-size: 1em;
137
+ font-weight: bold;
138
+ color: rgba(0, 0, 0, 0.87);
139
+ }
140
+
141
+ /* Summary Image */
142
+ .ui.feed > .event > .content .summary img {
143
+ display: inline-block;
144
+ width: auto;
145
+ height: 10em;
146
+ margin: -0.25em 0.25em 0 0;
147
+ border-radius: 0.25em;
148
+ vertical-align: middle;
149
+ }
150
+
151
+ /* --------------
152
+ Inline Date
153
+ --------------- */
154
+
155
+ /* Date inside Summary */
156
+ .ui.feed > .event > .content .summary > .date {
157
+ display: inline-block;
158
+ font-weight: normal;
159
+ font-size: 0.85714286em;
160
+ font-style: normal;
161
+ margin: 0 0 0 0.5em;
162
+ padding: 0;
163
+ color: rgba(0, 0, 0, 0.4);
164
+ }
165
+ .ui.feed > .event > .content .summary > .date:not(.floated) {
166
+ float: none;
167
+ }
168
+
169
+ /* --------------
170
+ User
171
+ --------------- */
172
+ .ui.feed > .event > .content .user {
173
+ display: inline-block;
174
+ font-weight: bold;
175
+ margin-right: 0;
176
+ vertical-align: baseline;
177
+ }
178
+ .ui.feed > .event > .content .user img {
179
+ margin: -0.25em 0.25em 0 0;
180
+ width: auto;
181
+ height: 10em;
182
+ vertical-align: middle;
183
+ }
184
+
185
+ /* --------------
186
+ Extra Summary
187
+ --------------- */
188
+ .ui.feed > .event > .content .extra {
189
+ margin: 0.5em 0 0;
190
+ background: none;
191
+ padding: 0;
192
+ color: rgba(0, 0, 0, 0.87);
193
+ }
194
+
195
+ /* Images */
196
+ .ui.feed > .event > .content .extra.images img {
197
+ display: inline-block;
198
+ margin: 0 0.25em 0 0;
199
+ width: 6em;
200
+ }
201
+
202
+ /* Text */
203
+ .ui.feed > .event > .content .extra.text {
204
+ padding: 0;
205
+ border-left: none;
206
+ font-size: 1em;
207
+ max-width: 500px;
208
+ line-height: 1.4285em;
209
+ }
210
+
211
+ /* --------------
212
+ Meta
213
+ --------------- */
214
+ .ui.feed > .event > .content .meta {
215
+ display: inline-block;
216
+ font-size: 0.85714286em;
217
+ margin: 0.5em 0 0;
218
+ background: none;
219
+ border: none;
220
+ border-radius: 0;
221
+ box-shadow: none;
222
+ padding: 0;
223
+ color: rgba(0, 0, 0, 0.6);
224
+ }
225
+ .ui.feed > .event > .content .meta > * {
226
+ position: relative;
227
+ margin-left: 0.75em;
228
+ }
229
+ .ui.feed > .event > .content .meta > *::after {
230
+ content: "";
231
+ color: rgba(0, 0, 0, 0.2);
232
+ top: 0;
233
+ left: -1em;
234
+ opacity: 1;
235
+ position: absolute;
236
+ vertical-align: top;
237
+ }
238
+ .ui.feed > .event > .content .meta .like {
239
+ color: "";
240
+ transition: 0.2s color ease;
241
+ }
242
+ .ui.feed > .event > .content .meta .like:hover i.icon {
243
+ color: #ff2733;
244
+ }
245
+ .ui.feed > .event > .content .meta .active.like i.icon {
246
+ color: #ef404a;
247
+ }
248
+
249
+ /* First element */
250
+ .ui.feed > .event > .content .meta > :first-child {
251
+ margin-left: 0;
252
+ }
253
+ .ui.feed > .event > .content .meta > :first-child::after {
254
+ display: none;
255
+ }
256
+
257
+ /* Action */
258
+ .ui.feed > .event > .content .meta a,
259
+ .ui.feed > .event > .content .meta > i.icon {
260
+ cursor: pointer;
261
+ opacity: 1;
262
+ color: rgba(0, 0, 0, 0.5);
263
+ transition: color 0.1s ease;
264
+ }
265
+ .ui.feed > .event > .content .meta a:hover,
266
+ .ui.feed > .event > .content .meta a:hover i.icon,
267
+ .ui.feed > .event > .content .meta > i.icon:hover {
268
+ color: rgba(0, 0, 0, 0.95);
269
+ }
270
+
271
+
272
+ /*******************************
273
+ Variations
274
+ *******************************/
275
+
276
+
277
+ /* rtl:rename */
278
+ .ui.feed .right.floated {
279
+ float: right;
280
+ }
281
+ .ui.connected.feed > .event {
282
+ position: relative;
283
+ }
284
+ .ui.connected.feed > .event:not(:last-child)::before {
285
+ border-left: 2px solid rgba(34, 36, 38, 0.15);
286
+ content: "";
287
+ left: 1.2em;
288
+ position: absolute;
289
+ top: 2.1em;
290
+ height: calc(100% - 1.5em);
291
+ }
292
+ .ui.connected.feed > .event > .label {
293
+ position: relative;
294
+ }
295
+ .ui.inverted.connected.feed > .event::before {
296
+ border-left-color: rgba(255, 255, 255, 0.1);
297
+ }
298
+ .ui.divided.feed > .event:not(:first-child) {
299
+ border-top: 1px solid rgba(34, 36, 38, 0.15);
300
+ }
301
+ .ui.inverted.divided.feed > .event {
302
+ border-top-color: rgba(255, 255, 255, 0.1);
303
+ }
304
+ .ui.ui.feed > .event > .label[data-text]::before {
305
+ content: attr(data-text);
306
+ }
307
+ .ui.feed > .event > .label[data-text]::before,
308
+ .ui.ordered.feed > .event > .label::before {
309
+ text-align: center;
310
+ line-height: 1;
311
+ height: 2.5em;
312
+ background: #bbbbbb;
313
+ color: #fff;
314
+ border-radius: 50%;
315
+ padding-top: 0.6em;
316
+ position: relative;
317
+ display: block;
318
+ margin-bottom: 0.3em;
319
+ border: 2px solid transparent;
320
+ }
321
+ .ui.ordered.feed {
322
+ counter-reset: ordered;
323
+ }
324
+ .ui.ordered.feed > .event > .label::before {
325
+ counter-increment: ordered;
326
+ content: counter(ordered);
327
+ }
328
+ .ui.ordered.basic.feed > .event > .label::before,
329
+ .ui.ordered.feed > .event > .basic.label::before {
330
+ border-color: #bbbbbb;
331
+ color: inherit;
332
+ background: transparent;
333
+ }
334
+ .ui.ordered.connected.feed > .event::before {
335
+ top: 2.7em;
336
+ height: calc(100% - 2.5em);
337
+ }
338
+
339
+ /* workaround until all browsers support :has() */
340
+ .ui.connected.labeled.feed > .event::before,
341
+ .ui.connected.feed > .labeled.event::before {
342
+ top: 4.85em;
343
+ height: calc(100% - 4.6499999999999995em);
344
+ }
345
+ @supports selector(:has(.f)) {
346
+ .ui.connected.feed > .event:has(> .label[data-text] > *)::before,
347
+ .ui.ordered.connected.feed > .event:has(> .label > *)::before {
348
+ top: 4.85em;
349
+ height: calc(100% - 4.6499999999999995em);
350
+ }
351
+ }
352
+ .ui.feed {
353
+ font-size: 1rem;
354
+ }
355
+ .ui.mini.feed {
356
+ font-size: 0.78571429rem;
357
+ }
358
+ .ui.tiny.feed {
359
+ font-size: 0.85714286rem;
360
+ }
361
+ .ui.small.feed {
362
+ font-size: 0.92857143rem;
363
+ }
364
+ .ui.large.feed {
365
+ font-size: 1.14285714rem;
366
+ }
367
+ .ui.big.feed {
368
+ font-size: 1.28571429rem;
369
+ }
370
+ .ui.huge.feed {
371
+ font-size: 1.42857143rem;
372
+ }
373
+ .ui.massive.feed {
374
+ font-size: 1.71428571rem;
375
+ }
376
+
377
+ /* ------------------
378
+ Inverted
379
+ ------------------- */
380
+ .ui.inverted.feed > .event {
381
+ background: #1b1c1d;
382
+ }
383
+ .ui.inverted.feed > .event > .label i.icon {
384
+ color: rgba(255, 255, 255, 0.7);
385
+ }
386
+ .ui.inverted.feed > .event > .label .text:not(.ui) {
387
+ color: #fff;
388
+ }
389
+ .ui.inverted.feed > .event > .content .date,
390
+ .ui.inverted.feed > .event > .content .meta .like {
391
+ color: rgba(255, 255, 255, 0.7);
392
+ }
393
+ .ui.inverted.feed > .event > .content .summary,
394
+ .ui.inverted.feed > .event > .content .extra.text {
395
+ color: rgba(255, 255, 255, 0.9);
396
+ }
397
+ .ui.inverted.feed > .event > .content .meta .like:hover {
398
+ color: #ffffff;
399
+ }
400
+ .ui.inverted.feed > .event > .content .meta .active.like i.icon {
401
+ color: rgba(255, 255, 255, 0.7);
402
+ }
403
+
404
+ /* Action */
405
+ .ui.inverted.feed > .event > .content .meta a,
406
+ .ui.inverted.feed > .event > .content .meta > i.icon {
407
+ color: rgba(255, 255, 255, 0.7);
408
+ }
409
+ .ui.inverted.feed > .event > .content .meta a:hover,
410
+ .ui.inverted.feed > .event > .content .meta a:hover i.icon,
411
+ .ui.inverted.feed > .event > .content .meta > i.icon:hover {
412
+ color: #ffffff;
413
+ }
414
+
415
+ /* --------------
416
+ Colors
417
+ --------------- */
418
+ .ui.ui.feed > .event > .primary.label::before,
419
+ .ui.primary.feed > .event > .label::before {
420
+ background: #2185d0;
421
+ }
422
+ .ui.primary.connected.feed > .event::before,
423
+ .ui.connected.feed > .primary.event::before {
424
+ border-color: #2185d0;
425
+ }
426
+ .ui.inverted.primary.connected.feed > .event::before,
427
+ .ui.connected.feed > .inverted.primary.event::before {
428
+ border-color: #54c8ff;
429
+ }
430
+ .ui.ui.feed > .event > .primary.basic.label::before,
431
+ .ui.primary.basic.feed > .event > .label::before {
432
+ color: #2185d0;
433
+ }
434
+ .ui.feed > .event > .inverted.primary.label::before,
435
+ .ui.inverted.primary.feed > .event > .label::before {
436
+ background: #54c8ff;
437
+ }
438
+ .ui.feed > .event > .inverted.primary.basic.label::before,
439
+ .ui.inverted.primary.basic.feed > .event > .label::before {
440
+ color: #54c8ff;
441
+ }
442
+ .ui.ui.feed > .event > .secondary.label::before,
443
+ .ui.secondary.feed > .event > .label::before {
444
+ background: #1b1c1d;
445
+ }
446
+ .ui.secondary.connected.feed > .event::before,
447
+ .ui.connected.feed > .secondary.event::before {
448
+ border-color: #1b1c1d;
449
+ }
450
+ .ui.inverted.secondary.connected.feed > .event::before,
451
+ .ui.connected.feed > .inverted.secondary.event::before {
452
+ border-color: #545454;
453
+ }
454
+ .ui.ui.feed > .event > .secondary.basic.label::before,
455
+ .ui.secondary.basic.feed > .event > .label::before {
456
+ color: #1b1c1d;
457
+ }
458
+ .ui.feed > .event > .inverted.secondary.label::before,
459
+ .ui.inverted.secondary.feed > .event > .label::before {
460
+ background: #545454;
461
+ }
462
+ .ui.feed > .event > .inverted.secondary.basic.label::before,
463
+ .ui.inverted.secondary.basic.feed > .event > .label::before {
464
+ color: #545454;
465
+ }
466
+ .ui.ui.feed > .event > .red.label::before,
467
+ .ui.red.feed > .event > .label::before {
468
+ background: #db2828;
469
+ }
470
+ .ui.red.connected.feed > .event::before,
471
+ .ui.connected.feed > .red.event::before {
472
+ border-color: #db2828;
473
+ }
474
+ .ui.inverted.red.connected.feed > .event::before,
475
+ .ui.connected.feed > .inverted.red.event::before {
476
+ border-color: #ff695e;
477
+ }
478
+ .ui.ui.feed > .event > .red.basic.label::before,
479
+ .ui.red.basic.feed > .event > .label::before {
480
+ color: #db2828;
481
+ }
482
+ .ui.feed > .event > .inverted.red.label::before,
483
+ .ui.inverted.red.feed > .event > .label::before {
484
+ background: #ff695e;
485
+ }
486
+ .ui.feed > .event > .inverted.red.basic.label::before,
487
+ .ui.inverted.red.basic.feed > .event > .label::before {
488
+ color: #ff695e;
489
+ }
490
+ .ui.ui.feed > .event > .orange.label::before,
491
+ .ui.orange.feed > .event > .label::before {
492
+ background: #f2711c;
493
+ }
494
+ .ui.orange.connected.feed > .event::before,
495
+ .ui.connected.feed > .orange.event::before {
496
+ border-color: #f2711c;
497
+ }
498
+ .ui.inverted.orange.connected.feed > .event::before,
499
+ .ui.connected.feed > .inverted.orange.event::before {
500
+ border-color: #ff851b;
501
+ }
502
+ .ui.ui.feed > .event > .orange.basic.label::before,
503
+ .ui.orange.basic.feed > .event > .label::before {
504
+ color: #f2711c;
505
+ }
506
+ .ui.feed > .event > .inverted.orange.label::before,
507
+ .ui.inverted.orange.feed > .event > .label::before {
508
+ background: #ff851b;
509
+ }
510
+ .ui.feed > .event > .inverted.orange.basic.label::before,
511
+ .ui.inverted.orange.basic.feed > .event > .label::before {
512
+ color: #ff851b;
513
+ }
514
+ .ui.ui.feed > .event > .yellow.label::before,
515
+ .ui.yellow.feed > .event > .label::before {
516
+ background: #fbbd08;
517
+ }
518
+ .ui.yellow.connected.feed > .event::before,
519
+ .ui.connected.feed > .yellow.event::before {
520
+ border-color: #fbbd08;
521
+ }
522
+ .ui.inverted.yellow.connected.feed > .event::before,
523
+ .ui.connected.feed > .inverted.yellow.event::before {
524
+ border-color: #ffe21f;
525
+ }
526
+ .ui.ui.feed > .event > .yellow.basic.label::before,
527
+ .ui.yellow.basic.feed > .event > .label::before {
528
+ color: #fbbd08;
529
+ }
530
+ .ui.feed > .event > .inverted.yellow.label::before,
531
+ .ui.inverted.yellow.feed > .event > .label::before {
532
+ background: #ffe21f;
533
+ }
534
+ .ui.feed > .event > .inverted.yellow.basic.label::before,
535
+ .ui.inverted.yellow.basic.feed > .event > .label::before {
536
+ color: #ffe21f;
537
+ }
538
+ .ui.ui.feed > .event > .olive.label::before,
539
+ .ui.olive.feed > .event > .label::before {
540
+ background: #b5cc18;
541
+ }
542
+ .ui.olive.connected.feed > .event::before,
543
+ .ui.connected.feed > .olive.event::before {
544
+ border-color: #b5cc18;
545
+ }
546
+ .ui.inverted.olive.connected.feed > .event::before,
547
+ .ui.connected.feed > .inverted.olive.event::before {
548
+ border-color: #d9e778;
549
+ }
550
+ .ui.ui.feed > .event > .olive.basic.label::before,
551
+ .ui.olive.basic.feed > .event > .label::before {
552
+ color: #b5cc18;
553
+ }
554
+ .ui.feed > .event > .inverted.olive.label::before,
555
+ .ui.inverted.olive.feed > .event > .label::before {
556
+ background: #d9e778;
557
+ }
558
+ .ui.feed > .event > .inverted.olive.basic.label::before,
559
+ .ui.inverted.olive.basic.feed > .event > .label::before {
560
+ color: #d9e778;
561
+ }
562
+ .ui.ui.feed > .event > .green.label::before,
563
+ .ui.green.feed > .event > .label::before {
564
+ background: #21ba45;
565
+ }
566
+ .ui.green.connected.feed > .event::before,
567
+ .ui.connected.feed > .green.event::before {
568
+ border-color: #21ba45;
569
+ }
570
+ .ui.inverted.green.connected.feed > .event::before,
571
+ .ui.connected.feed > .inverted.green.event::before {
572
+ border-color: #2ecc40;
573
+ }
574
+ .ui.ui.feed > .event > .green.basic.label::before,
575
+ .ui.green.basic.feed > .event > .label::before {
576
+ color: #21ba45;
577
+ }
578
+ .ui.feed > .event > .inverted.green.label::before,
579
+ .ui.inverted.green.feed > .event > .label::before {
580
+ background: #2ecc40;
581
+ }
582
+ .ui.feed > .event > .inverted.green.basic.label::before,
583
+ .ui.inverted.green.basic.feed > .event > .label::before {
584
+ color: #2ecc40;
585
+ }
586
+ .ui.ui.feed > .event > .teal.label::before,
587
+ .ui.teal.feed > .event > .label::before {
588
+ background: #00b5ad;
589
+ }
590
+ .ui.teal.connected.feed > .event::before,
591
+ .ui.connected.feed > .teal.event::before {
592
+ border-color: #00b5ad;
593
+ }
594
+ .ui.inverted.teal.connected.feed > .event::before,
595
+ .ui.connected.feed > .inverted.teal.event::before {
596
+ border-color: #6dffff;
597
+ }
598
+ .ui.ui.feed > .event > .teal.basic.label::before,
599
+ .ui.teal.basic.feed > .event > .label::before {
600
+ color: #00b5ad;
601
+ }
602
+ .ui.feed > .event > .inverted.teal.label::before,
603
+ .ui.inverted.teal.feed > .event > .label::before {
604
+ background: #6dffff;
605
+ }
606
+ .ui.feed > .event > .inverted.teal.basic.label::before,
607
+ .ui.inverted.teal.basic.feed > .event > .label::before {
608
+ color: #6dffff;
609
+ }
610
+ .ui.ui.feed > .event > .blue.label::before,
611
+ .ui.blue.feed > .event > .label::before {
612
+ background: #2185d0;
613
+ }
614
+ .ui.blue.connected.feed > .event::before,
615
+ .ui.connected.feed > .blue.event::before {
616
+ border-color: #2185d0;
617
+ }
618
+ .ui.inverted.blue.connected.feed > .event::before,
619
+ .ui.connected.feed > .inverted.blue.event::before {
620
+ border-color: #54c8ff;
621
+ }
622
+ .ui.ui.feed > .event > .blue.basic.label::before,
623
+ .ui.blue.basic.feed > .event > .label::before {
624
+ color: #2185d0;
625
+ }
626
+ .ui.feed > .event > .inverted.blue.label::before,
627
+ .ui.inverted.blue.feed > .event > .label::before {
628
+ background: #54c8ff;
629
+ }
630
+ .ui.feed > .event > .inverted.blue.basic.label::before,
631
+ .ui.inverted.blue.basic.feed > .event > .label::before {
632
+ color: #54c8ff;
633
+ }
634
+ .ui.ui.feed > .event > .violet.label::before,
635
+ .ui.violet.feed > .event > .label::before {
636
+ background: #6435c9;
637
+ }
638
+ .ui.violet.connected.feed > .event::before,
639
+ .ui.connected.feed > .violet.event::before {
640
+ border-color: #6435c9;
641
+ }
642
+ .ui.inverted.violet.connected.feed > .event::before,
643
+ .ui.connected.feed > .inverted.violet.event::before {
644
+ border-color: #a291fb;
645
+ }
646
+ .ui.ui.feed > .event > .violet.basic.label::before,
647
+ .ui.violet.basic.feed > .event > .label::before {
648
+ color: #6435c9;
649
+ }
650
+ .ui.feed > .event > .inverted.violet.label::before,
651
+ .ui.inverted.violet.feed > .event > .label::before {
652
+ background: #a291fb;
653
+ }
654
+ .ui.feed > .event > .inverted.violet.basic.label::before,
655
+ .ui.inverted.violet.basic.feed > .event > .label::before {
656
+ color: #a291fb;
657
+ }
658
+ .ui.ui.feed > .event > .purple.label::before,
659
+ .ui.purple.feed > .event > .label::before {
660
+ background: #a333c8;
661
+ }
662
+ .ui.purple.connected.feed > .event::before,
663
+ .ui.connected.feed > .purple.event::before {
664
+ border-color: #a333c8;
665
+ }
666
+ .ui.inverted.purple.connected.feed > .event::before,
667
+ .ui.connected.feed > .inverted.purple.event::before {
668
+ border-color: #dc73ff;
669
+ }
670
+ .ui.ui.feed > .event > .purple.basic.label::before,
671
+ .ui.purple.basic.feed > .event > .label::before {
672
+ color: #a333c8;
673
+ }
674
+ .ui.feed > .event > .inverted.purple.label::before,
675
+ .ui.inverted.purple.feed > .event > .label::before {
676
+ background: #dc73ff;
677
+ }
678
+ .ui.feed > .event > .inverted.purple.basic.label::before,
679
+ .ui.inverted.purple.basic.feed > .event > .label::before {
680
+ color: #dc73ff;
681
+ }
682
+ .ui.ui.feed > .event > .pink.label::before,
683
+ .ui.pink.feed > .event > .label::before {
684
+ background: #e03997;
685
+ }
686
+ .ui.pink.connected.feed > .event::before,
687
+ .ui.connected.feed > .pink.event::before {
688
+ border-color: #e03997;
689
+ }
690
+ .ui.inverted.pink.connected.feed > .event::before,
691
+ .ui.connected.feed > .inverted.pink.event::before {
692
+ border-color: #ff8edf;
693
+ }
694
+ .ui.ui.feed > .event > .pink.basic.label::before,
695
+ .ui.pink.basic.feed > .event > .label::before {
696
+ color: #e03997;
697
+ }
698
+ .ui.feed > .event > .inverted.pink.label::before,
699
+ .ui.inverted.pink.feed > .event > .label::before {
700
+ background: #ff8edf;
701
+ }
702
+ .ui.feed > .event > .inverted.pink.basic.label::before,
703
+ .ui.inverted.pink.basic.feed > .event > .label::before {
704
+ color: #ff8edf;
705
+ }
706
+ .ui.ui.feed > .event > .brown.label::before,
707
+ .ui.brown.feed > .event > .label::before {
708
+ background: #a5673f;
709
+ }
710
+ .ui.brown.connected.feed > .event::before,
711
+ .ui.connected.feed > .brown.event::before {
712
+ border-color: #a5673f;
713
+ }
714
+ .ui.inverted.brown.connected.feed > .event::before,
715
+ .ui.connected.feed > .inverted.brown.event::before {
716
+ border-color: #d67c1c;
717
+ }
718
+ .ui.ui.feed > .event > .brown.basic.label::before,
719
+ .ui.brown.basic.feed > .event > .label::before {
720
+ color: #a5673f;
721
+ }
722
+ .ui.feed > .event > .inverted.brown.label::before,
723
+ .ui.inverted.brown.feed > .event > .label::before {
724
+ background: #d67c1c;
725
+ }
726
+ .ui.feed > .event > .inverted.brown.basic.label::before,
727
+ .ui.inverted.brown.basic.feed > .event > .label::before {
728
+ color: #d67c1c;
729
+ }
730
+ .ui.ui.feed > .event > .grey.label::before,
731
+ .ui.grey.feed > .event > .label::before {
732
+ background: #767676;
733
+ }
734
+ .ui.grey.connected.feed > .event::before,
735
+ .ui.connected.feed > .grey.event::before {
736
+ border-color: #767676;
737
+ }
738
+ .ui.inverted.grey.connected.feed > .event::before,
739
+ .ui.connected.feed > .inverted.grey.event::before {
740
+ border-color: #dcddde;
741
+ }
742
+ .ui.ui.feed > .event > .grey.basic.label::before,
743
+ .ui.grey.basic.feed > .event > .label::before {
744
+ color: #767676;
745
+ }
746
+ .ui.feed > .event > .inverted.grey.label::before,
747
+ .ui.inverted.grey.feed > .event > .label::before {
748
+ background: #dcddde;
749
+ }
750
+ .ui.feed > .event > .inverted.grey.basic.label::before,
751
+ .ui.inverted.grey.basic.feed > .event > .label::before {
752
+ color: #dcddde;
753
+ }
754
+ .ui.ui.feed > .event > .black.label::before,
755
+ .ui.black.feed > .event > .label::before {
756
+ background: #1b1c1d;
757
+ }
758
+ .ui.black.connected.feed > .event::before,
759
+ .ui.connected.feed > .black.event::before {
760
+ border-color: #1b1c1d;
761
+ }
762
+ .ui.inverted.black.connected.feed > .event::before,
763
+ .ui.connected.feed > .inverted.black.event::before {
764
+ border-color: #545454;
765
+ }
766
+ .ui.ui.feed > .event > .black.basic.label::before,
767
+ .ui.black.basic.feed > .event > .label::before {
768
+ color: #1b1c1d;
769
+ }
770
+ .ui.feed > .event > .inverted.black.label::before,
771
+ .ui.inverted.black.feed > .event > .label::before {
772
+ background: #545454;
773
+ }
774
+ .ui.feed > .event > .inverted.black.basic.label::before,
775
+ .ui.inverted.black.basic.feed > .event > .label::before {
776
+ color: #545454;
777
+ }
778
+ .ui.ui.feed > .event > .basic.label::before,
779
+ .ui.ui.ui.basic.feed > .event > .label::before {
780
+ background: transparent;
781
+ border-color: currentColor;
782
+ }
783
+ .ui.disabled.feed,
784
+ .ui.feed .disabled.event {
785
+ opacity: 0.45;
786
+ pointer-events: none;
787
+ }
788
+
789
+
790
+ /*******************************
791
+ Theme Overrides
792
+ *******************************/
793
+
794
+
795
+
796
+ /*******************************
797
+ User Variable Overrides
798
+ *******************************/
799
+