less-rails-semantic_ui 1.12.3.0 → 2.0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (197) hide show
  1. checksums.yaml +4 -4
  2. data/assets/javascripts/semantic_ui/definitions/behaviors/api.js +394 -188
  3. data/assets/javascripts/semantic_ui/definitions/behaviors/colorize.js +4 -2
  4. data/assets/javascripts/semantic_ui/definitions/behaviors/form.js +263 -125
  5. data/assets/javascripts/semantic_ui/definitions/behaviors/state.js +3 -3
  6. data/assets/javascripts/semantic_ui/definitions/behaviors/visibility.js +213 -96
  7. data/assets/javascripts/semantic_ui/definitions/behaviors/visit.js +6 -4
  8. data/assets/javascripts/semantic_ui/definitions/globals/site.js +4 -4
  9. data/assets/javascripts/semantic_ui/definitions/modules/accordion.js +66 -52
  10. data/assets/javascripts/semantic_ui/definitions/modules/checkbox.js +309 -112
  11. data/assets/javascripts/semantic_ui/definitions/modules/dimmer.js +24 -26
  12. data/assets/javascripts/semantic_ui/definitions/modules/dropdown.js +2005 -590
  13. data/assets/javascripts/semantic_ui/definitions/modules/embed.js +662 -0
  14. data/assets/javascripts/semantic_ui/definitions/modules/modal.js +106 -79
  15. data/assets/javascripts/semantic_ui/definitions/modules/nag.js +7 -8
  16. data/assets/javascripts/semantic_ui/definitions/modules/popup.js +323 -194
  17. data/assets/javascripts/semantic_ui/definitions/modules/progress.js +111 -103
  18. data/assets/javascripts/semantic_ui/definitions/modules/rating.js +78 -54
  19. data/assets/javascripts/semantic_ui/definitions/modules/search.js +304 -122
  20. data/assets/javascripts/semantic_ui/definitions/modules/shape.js +93 -47
  21. data/assets/javascripts/semantic_ui/definitions/modules/sidebar.js +83 -149
  22. data/assets/javascripts/semantic_ui/definitions/modules/sticky.js +99 -29
  23. data/assets/javascripts/semantic_ui/definitions/modules/tab.js +219 -124
  24. data/assets/javascripts/semantic_ui/definitions/modules/transition.js +202 -171
  25. data/assets/stylesheets/semantic_ui/definitions/collections/breadcrumb.less +2 -1
  26. data/assets/stylesheets/semantic_ui/definitions/collections/form.less +135 -58
  27. data/assets/stylesheets/semantic_ui/definitions/collections/grid.less +366 -383
  28. data/assets/stylesheets/semantic_ui/definitions/collections/menu.less +838 -631
  29. data/assets/stylesheets/semantic_ui/definitions/collections/message.less +89 -71
  30. data/assets/stylesheets/semantic_ui/definitions/collections/table.less +183 -131
  31. data/assets/stylesheets/semantic_ui/definitions/elements/button.less +1097 -300
  32. data/assets/stylesheets/semantic_ui/definitions/elements/container.less +135 -0
  33. data/assets/stylesheets/semantic_ui/definitions/elements/divider.less +31 -30
  34. data/assets/stylesheets/semantic_ui/definitions/elements/flag.less +1 -1
  35. data/assets/stylesheets/semantic_ui/definitions/elements/header.less +209 -121
  36. data/assets/stylesheets/semantic_ui/definitions/elements/icon.less +201 -96
  37. data/assets/stylesheets/semantic_ui/definitions/elements/image.less +26 -11
  38. data/assets/stylesheets/semantic_ui/definitions/elements/input.less +49 -14
  39. data/assets/stylesheets/semantic_ui/definitions/elements/label.less +391 -221
  40. data/assets/stylesheets/semantic_ui/definitions/elements/list.less +107 -68
  41. data/assets/stylesheets/semantic_ui/definitions/elements/loader.less +3 -1
  42. data/assets/stylesheets/semantic_ui/definitions/elements/rail.less +34 -25
  43. data/assets/stylesheets/semantic_ui/definitions/elements/reveal.less +25 -10
  44. data/assets/stylesheets/semantic_ui/definitions/elements/segment.less +261 -173
  45. data/assets/stylesheets/semantic_ui/definitions/elements/step.less +169 -70
  46. data/assets/stylesheets/semantic_ui/definitions/globals/reset.less +1 -1
  47. data/assets/stylesheets/semantic_ui/definitions/globals/site.less +3 -1
  48. data/assets/stylesheets/semantic_ui/definitions/modules/accordion.less +1 -2
  49. data/assets/stylesheets/semantic_ui/definitions/modules/checkbox.less +175 -103
  50. data/assets/stylesheets/semantic_ui/definitions/modules/dimmer.less +26 -15
  51. data/assets/stylesheets/semantic_ui/definitions/modules/dropdown.less +349 -80
  52. data/assets/stylesheets/semantic_ui/definitions/modules/embed.less +174 -0
  53. data/assets/stylesheets/semantic_ui/definitions/modules/modal.less +83 -36
  54. data/assets/stylesheets/semantic_ui/definitions/modules/nag.less +1 -1
  55. data/assets/stylesheets/semantic_ui/definitions/modules/popup.less +48 -7
  56. data/assets/stylesheets/semantic_ui/definitions/modules/progress.less +160 -107
  57. data/assets/stylesheets/semantic_ui/definitions/modules/rating.less +57 -54
  58. data/assets/stylesheets/semantic_ui/definitions/modules/search.less +55 -10
  59. data/assets/stylesheets/semantic_ui/definitions/modules/shape.less +5 -6
  60. data/assets/stylesheets/semantic_ui/definitions/modules/sidebar.less +9 -5
  61. data/assets/stylesheets/semantic_ui/definitions/modules/sticky.less +1 -1
  62. data/assets/stylesheets/semantic_ui/definitions/modules/tab.less +1 -1
  63. data/assets/stylesheets/semantic_ui/definitions/modules/transition.less +3 -4
  64. data/assets/stylesheets/semantic_ui/definitions/views/card.less +240 -130
  65. data/assets/stylesheets/semantic_ui/definitions/views/comment.less +1 -1
  66. data/assets/stylesheets/semantic_ui/definitions/views/feed.less +15 -8
  67. data/assets/stylesheets/semantic_ui/definitions/views/item.less +13 -13
  68. data/assets/stylesheets/semantic_ui/definitions/views/statistic.less +230 -86
  69. data/assets/stylesheets/semantic_ui/theme.less +22 -15
  70. data/assets/stylesheets/semantic_ui/themes/amazon/elements/button.overrides +5 -5
  71. data/assets/stylesheets/semantic_ui/themes/amazon/elements/button.variables +5 -4
  72. data/assets/stylesheets/semantic_ui/themes/basic/collections/table.variables +1 -0
  73. data/assets/stylesheets/semantic_ui/themes/basic/views/card.variables +6 -4
  74. data/assets/stylesheets/semantic_ui/themes/bookish/elements/header.variables +4 -4
  75. data/assets/stylesheets/semantic_ui/themes/bootstrap3/elements/button.variables +1 -1
  76. data/assets/stylesheets/semantic_ui/themes/chubby/collections/form.overrides +8 -0
  77. data/assets/stylesheets/semantic_ui/themes/chubby/collections/menu.overrides +0 -0
  78. data/assets/stylesheets/semantic_ui/themes/chubby/collections/menu.variables +40 -0
  79. data/assets/stylesheets/semantic_ui/themes/classic/modules/progress.variables +1 -0
  80. data/assets/stylesheets/semantic_ui/themes/classic/views/card.overrides +1 -1
  81. data/assets/stylesheets/semantic_ui/themes/colored/modules/checkbox.overrides +0 -0
  82. data/assets/stylesheets/semantic_ui/themes/colored/modules/checkbox.variables +17 -0
  83. data/assets/stylesheets/semantic_ui/themes/default/collections/breadcrumb.overrides +0 -0
  84. data/assets/stylesheets/semantic_ui/themes/default/collections/breadcrumb.variables +5 -15
  85. data/assets/stylesheets/semantic_ui/themes/default/collections/form.overrides +0 -0
  86. data/assets/stylesheets/semantic_ui/themes/default/collections/form.variables +31 -35
  87. data/assets/stylesheets/semantic_ui/themes/default/collections/grid.overrides +0 -0
  88. data/assets/stylesheets/semantic_ui/themes/default/collections/grid.variables +34 -28
  89. data/assets/stylesheets/semantic_ui/themes/default/collections/menu.overrides +0 -0
  90. data/assets/stylesheets/semantic_ui/themes/default/collections/menu.variables +259 -163
  91. data/assets/stylesheets/semantic_ui/themes/default/collections/message.overrides +0 -0
  92. data/assets/stylesheets/semantic_ui/themes/default/collections/message.variables +42 -19
  93. data/assets/stylesheets/semantic_ui/themes/default/collections/table.overrides +0 -3
  94. data/assets/stylesheets/semantic_ui/themes/default/collections/table.variables +63 -59
  95. data/assets/stylesheets/semantic_ui/themes/default/elements/button.overrides +0 -0
  96. data/assets/stylesheets/semantic_ui/themes/default/elements/button.variables +90 -50
  97. data/assets/stylesheets/semantic_ui/themes/default/elements/container.overrides +3 -0
  98. data/assets/stylesheets/semantic_ui/themes/default/elements/container.variables +45 -0
  99. data/assets/stylesheets/semantic_ui/themes/default/elements/divider.overrides +15 -0
  100. data/assets/stylesheets/semantic_ui/themes/default/elements/divider.variables +3 -4
  101. data/assets/stylesheets/semantic_ui/themes/default/elements/flag.overrides +0 -0
  102. data/assets/stylesheets/semantic_ui/themes/default/elements/header.overrides +0 -0
  103. data/assets/stylesheets/semantic_ui/themes/default/elements/header.variables +40 -36
  104. data/assets/stylesheets/semantic_ui/themes/default/elements/icon.overrides +4 -3
  105. data/assets/stylesheets/semantic_ui/themes/default/elements/icon.variables +29 -12
  106. data/assets/stylesheets/semantic_ui/themes/default/elements/image.overrides +0 -0
  107. data/assets/stylesheets/semantic_ui/themes/default/elements/image.variables +5 -3
  108. data/assets/stylesheets/semantic_ui/themes/default/elements/input.overrides +0 -0
  109. data/assets/stylesheets/semantic_ui/themes/default/elements/input.variables +10 -24
  110. data/assets/stylesheets/semantic_ui/themes/default/elements/label.overrides +0 -0
  111. data/assets/stylesheets/semantic_ui/themes/default/elements/label.variables +88 -35
  112. data/assets/stylesheets/semantic_ui/themes/default/elements/list.overrides +0 -0
  113. data/assets/stylesheets/semantic_ui/themes/default/elements/list.variables +53 -34
  114. data/assets/stylesheets/semantic_ui/themes/default/elements/loader.overrides +0 -0
  115. data/assets/stylesheets/semantic_ui/themes/default/elements/loader.variables +9 -10
  116. data/assets/stylesheets/semantic_ui/themes/default/elements/rail.overrides +0 -0
  117. data/assets/stylesheets/semantic_ui/themes/default/elements/rail.variables +13 -5
  118. data/assets/stylesheets/semantic_ui/themes/default/elements/reveal.overrides +0 -0
  119. data/assets/stylesheets/semantic_ui/themes/default/elements/reveal.variables +6 -4
  120. data/assets/stylesheets/semantic_ui/themes/default/elements/segment.overrides +0 -0
  121. data/assets/stylesheets/semantic_ui/themes/default/elements/segment.variables +66 -28
  122. data/assets/stylesheets/semantic_ui/themes/default/elements/step.overrides +0 -0
  123. data/assets/stylesheets/semantic_ui/themes/default/elements/step.variables +60 -31
  124. data/assets/stylesheets/semantic_ui/themes/default/globals/reset.overrides +0 -0
  125. data/assets/stylesheets/semantic_ui/themes/default/globals/site.variables +477 -303
  126. data/assets/stylesheets/semantic_ui/themes/default/modules/accordion.overrides +0 -0
  127. data/assets/stylesheets/semantic_ui/themes/default/modules/accordion.variables +6 -7
  128. data/assets/stylesheets/semantic_ui/themes/default/modules/chatroom.overrides +0 -0
  129. data/assets/stylesheets/semantic_ui/themes/default/modules/checkbox.overrides +19 -16
  130. data/assets/stylesheets/semantic_ui/themes/default/modules/checkbox.variables +71 -43
  131. data/assets/stylesheets/semantic_ui/themes/default/modules/dimmer.overrides +0 -0
  132. data/assets/stylesheets/semantic_ui/themes/default/modules/dimmer.variables +12 -9
  133. data/assets/stylesheets/semantic_ui/themes/default/modules/dropdown.overrides +0 -5
  134. data/assets/stylesheets/semantic_ui/themes/default/modules/dropdown.variables +146 -64
  135. data/assets/stylesheets/semantic_ui/themes/default/modules/{video.overrides → embed.overrides} +0 -0
  136. data/assets/stylesheets/semantic_ui/themes/default/modules/embed.variables +53 -0
  137. data/assets/stylesheets/semantic_ui/themes/default/modules/modal.overrides +0 -0
  138. data/assets/stylesheets/semantic_ui/themes/default/modules/modal.variables +24 -18
  139. data/assets/stylesheets/semantic_ui/themes/default/modules/nag.overrides +0 -0
  140. data/assets/stylesheets/semantic_ui/themes/default/modules/popup.overrides +0 -0
  141. data/assets/stylesheets/semantic_ui/themes/default/modules/popup.variables +3 -9
  142. data/assets/stylesheets/semantic_ui/themes/default/modules/progress.variables +13 -7
  143. data/assets/stylesheets/semantic_ui/themes/default/modules/rating.overrides +0 -0
  144. data/assets/stylesheets/semantic_ui/themes/default/modules/rating.variables +71 -33
  145. data/assets/stylesheets/semantic_ui/themes/default/modules/search.overrides +0 -0
  146. data/assets/stylesheets/semantic_ui/themes/default/modules/search.variables +36 -34
  147. data/assets/stylesheets/semantic_ui/themes/default/modules/shape.overrides +0 -0
  148. data/assets/stylesheets/semantic_ui/themes/default/modules/shape.variables +7 -2
  149. data/assets/stylesheets/semantic_ui/themes/default/modules/sidebar.overrides +0 -0
  150. data/assets/stylesheets/semantic_ui/themes/default/modules/sidebar.variables +2 -5
  151. data/assets/stylesheets/semantic_ui/themes/default/modules/sticky.overrides +0 -0
  152. data/assets/stylesheets/semantic_ui/themes/default/modules/sticky.variables +2 -7
  153. data/assets/stylesheets/semantic_ui/themes/default/modules/tab.variables +1 -3
  154. data/assets/stylesheets/semantic_ui/themes/default/modules/transition.overrides +8 -9
  155. data/assets/stylesheets/semantic_ui/themes/default/views/ad.variables +2 -2
  156. data/assets/stylesheets/semantic_ui/themes/default/views/card.variables +33 -23
  157. data/assets/stylesheets/semantic_ui/themes/default/views/comment.overrides +0 -0
  158. data/assets/stylesheets/semantic_ui/themes/default/views/feed.overrides +0 -0
  159. data/assets/stylesheets/semantic_ui/themes/default/views/feed.variables +15 -23
  160. data/assets/stylesheets/semantic_ui/themes/default/views/item.overrides +0 -0
  161. data/assets/stylesheets/semantic_ui/themes/default/views/item.variables +12 -11
  162. data/assets/stylesheets/semantic_ui/themes/default/views/statistic.overrides +0 -0
  163. data/assets/stylesheets/semantic_ui/themes/default/views/statistic.variables +25 -24
  164. data/assets/stylesheets/semantic_ui/themes/flat/collections/form.overrides +4 -0
  165. data/assets/stylesheets/semantic_ui/themes/flat/collections/form.variables +1 -2
  166. data/assets/stylesheets/semantic_ui/themes/flat/globals/site.variables +1 -0
  167. data/assets/stylesheets/semantic_ui/themes/github/collections/form.variables +1 -1
  168. data/assets/stylesheets/semantic_ui/themes/github/collections/menu.variables +10 -15
  169. data/assets/stylesheets/semantic_ui/themes/github/elements/button.variables +2 -2
  170. data/assets/stylesheets/semantic_ui/themes/github/elements/step.variables +2 -2
  171. data/assets/stylesheets/semantic_ui/themes/instagram/views/card.overrides +12 -0
  172. data/assets/stylesheets/semantic_ui/themes/instagram/views/card.variables +23 -0
  173. data/assets/stylesheets/semantic_ui/themes/material/collections/menu.overrides +1 -0
  174. data/assets/stylesheets/semantic_ui/themes/material/collections/menu.variables +10 -0
  175. data/assets/stylesheets/semantic_ui/themes/material/elements/button.overrides +1 -0
  176. data/assets/stylesheets/semantic_ui/themes/material/elements/button.variables +14 -6
  177. data/assets/stylesheets/semantic_ui/themes/material/globals/site.variables +3 -2
  178. data/assets/stylesheets/semantic_ui/themes/material/modules/dropdown.overrides +5 -0
  179. data/assets/stylesheets/semantic_ui/themes/material/modules/dropdown.variables +20 -0
  180. data/assets/stylesheets/semantic_ui/themes/raised/elements/button.variables +5 -5
  181. data/assets/stylesheets/semantic_ui/themes/round/elements/button.variables +1 -1
  182. data/assets/stylesheets/semantic_ui/themes/timeline/views/feed.overrides +4 -12
  183. data/assets/stylesheets/semantic_ui/themes/timeline/views/feed.variables +3 -7
  184. data/lib/generators/semantic_ui/install/templates/config/elements/container.overrides +3 -0
  185. data/lib/generators/semantic_ui/install/templates/config/elements/container.variables +3 -0
  186. data/lib/generators/semantic_ui/install/templates/config/modules/embed.overrides +3 -0
  187. data/lib/generators/semantic_ui/install/templates/config/modules/embed.variables +0 -0
  188. data/lib/generators/semantic_ui/install/templates/semantic_ui.css +2 -1
  189. data/lib/generators/semantic_ui/install/templates/semantic_ui.js +1 -1
  190. data/lib/generators/semantic_ui/install/templates/theme.config +5 -3
  191. data/lib/less/rails/semantic_ui/version.rb +1 -1
  192. data/tasks/update.rake +21 -6
  193. metadata +23 -7
  194. data/assets/fonts/semantic_ui/themes/default/assets/fonts/icons.otf +0 -0
  195. data/assets/javascripts/semantic_ui/definitions/modules/video.js +0 -540
  196. data/assets/stylesheets/semantic_ui/definitions/modules/video.less +0 -135
  197. data/assets/stylesheets/semantic_ui/themes/default/modules/video.variables +0 -16
@@ -13,7 +13,7 @@
13
13
  * http://github.com/semantic-org/semantic-ui/
14
14
  *
15
15
  *
16
- * Copyright 2014 Contributors
16
+ * Copyright 2015 Contributors
17
17
  * Released under the MIT license
18
18
  * http://opensource.org/licenses/MIT
19
19
  *
@@ -34,6 +34,7 @@
34
34
  *******************************/
35
35
 
36
36
  .ui.breadcrumb {
37
+ line-height: 1;
37
38
  margin: @verticalMargin 0em;
38
39
  display: @display;
39
40
  vertical-align: @verticalAlign;
@@ -13,7 +13,7 @@
13
13
  * http://github.com/semantic-org/semantic-ui/
14
14
  *
15
15
  *
16
- * Copyright 2014 Contributors
16
+ * Copyright 2015 Contributors
17
17
  * Released under the MIT license
18
18
  * http://opensource.org/licenses/MIT
19
19
  *
@@ -59,8 +59,9 @@
59
59
  clear: both;
60
60
  margin: @fieldMargin;
61
61
  }
62
- .ui.form .fields:last-child,
63
- .ui.form .field:last-child {
62
+ .ui.form .field .field,
63
+ .ui.form .field:last-child,
64
+ .ui.form .fields:last-child .field {
64
65
  margin-bottom: 0em;
65
66
  }
66
67
 
@@ -76,23 +77,6 @@
76
77
  font-weight: @labelFontWeight;
77
78
  text-transform: @labelTextTransform;
78
79
  }
79
- .ui.form .grouped.fields > label {
80
- margin: @groupedLabelMargin;
81
- color: @groupedLabelColor;
82
- font-size: @groupedLabelFontSize;
83
- font-weight: @groupedLabelFontWeight;
84
- text-transform: @groupedLabelTextTransform;
85
- }
86
- .ui.form .inline.fields > label {
87
- display: inline-block;
88
- vertical-align: middle;
89
-
90
- margin: @inlineLabelMargin;
91
- color: @inlineLabelColor;
92
- font-size: @inlineLabelFontSize;
93
- font-weight: @inlineLabelFontWeight;
94
- text-transform: @inlineLabelTextTransform;
95
- }
96
80
 
97
81
  /*--------------------
98
82
  Standard Inputs
@@ -145,8 +129,12 @@
145
129
  transition: @inputTransition;
146
130
  }
147
131
 
132
+ /* Collapse Flex */
133
+ .ui.form .ui.input > input {
134
+ width: 0px !important;
135
+ }
148
136
 
149
- .ui.textarea,
137
+ /* Text Area */
150
138
  .ui.form textarea {
151
139
  margin: 0em;
152
140
  -webkit-appearance: none;
@@ -162,11 +150,13 @@
162
150
  box-shadow: @inputBoxShadow;
163
151
  transition: @textAreaTransition;
164
152
  font-size: @textAreaFontSize;
153
+ line-height: @textAreaLineHeight;
154
+ resize: @textAreaResize;
155
+ }
156
+ .ui.form textarea:not([rows]) {
165
157
  height: @textAreaHeight;
166
158
  min-height: @textAreaMinHeight;
167
159
  max-height: @textAreaMaxHeight;
168
- line-height: @textAreaLineHeight;
169
- resize: @textAreaResize;
170
160
  }
171
161
 
172
162
  .ui.form textarea,
@@ -267,6 +257,28 @@
267
257
  States
268
258
  *******************************/
269
259
 
260
+ /*--------------------
261
+ Autofilled
262
+ ---------------------*/
263
+
264
+ .ui.form .field.field input:-webkit-autofill {
265
+ box-shadow: 0px 0px 0px 100px @inputAutoFillBackground inset !important;
266
+ border-color: @inputAutoFillBorder !important;
267
+ }
268
+
269
+ /* Focus */
270
+ .ui.form .field.field input:-webkit-autofill:focus {
271
+ box-shadow: 0px 0px 0px 100px @inputAutoFillFocusBackground inset !important;
272
+ border-color: @inputAutoFillFocusBorder !important;
273
+ }
274
+
275
+ /* Error */
276
+ .ui.form .error.error input:-webkit-autofill {
277
+ box-shadow: 0px 0px 0px 100px @inputAutoFillErrorBackground inset !important;
278
+ border-color: @inputAutoFillErrorBorder !important;
279
+ }
280
+
281
+
270
282
 
271
283
  /*--------------------
272
284
  Placeholder
@@ -276,12 +288,19 @@
276
288
  .ui.form ::-webkit-input-placeholder {
277
289
  color: @inputPlaceholderColor;
278
290
  }
291
+ .ui.form ::-ms-input-placeholder {
292
+ color: @inputPlaceholderColor;
293
+ }
279
294
  .ui.form ::-moz-placeholder {
280
295
  color: @inputPlaceholderColor;
281
296
  }
297
+
282
298
  .ui.form :focus::-webkit-input-placeholder {
283
299
  color: @inputPlaceholderFocusColor;
284
300
  }
301
+ .ui.form :focus::-ms-input-placeholder {
302
+ color: @inputPlaceholderFocusColor;
303
+ }
285
304
  .ui.form :focus::-moz-placeholder {
286
305
  color: @inputPlaceholderFocusColor;
287
306
  }
@@ -290,16 +309,24 @@
290
309
  .ui.form .error ::-webkit-input-placeholder {
291
310
  color: @inputErrorPlaceholderColor;
292
311
  }
312
+ .ui.form .error ::-ms-input-placeholder {
313
+ color: @inputErrorPlaceholderColor;
314
+ }
293
315
  .ui.form .error ::-moz-placeholder {
294
316
  color: @inputErrorPlaceholderColor;
295
317
  }
318
+
296
319
  .ui.form .error :focus::-webkit-input-placeholder {
297
320
  color: @inputErrorPlaceholderFocusColor;
298
321
  }
322
+ .ui.form .error :focus::-ms-input-placeholder {
323
+ color: @inputErrorPlaceholderFocusColor;
324
+ }
299
325
  .ui.form .error :focus::-moz-placeholder {
300
326
  color: @inputErrorPlaceholderFocusColor;
301
327
  }
302
328
 
329
+
303
330
  /*--------------------
304
331
  Focus
305
332
  ---------------------*/
@@ -330,6 +357,7 @@
330
357
  -webkit-appearance: none;
331
358
  }
332
359
 
360
+
333
361
  /*--------------------
334
362
  Success
335
363
  ---------------------*/
@@ -338,6 +366,9 @@
338
366
  .ui.form.success .success.message {
339
367
  display: block;
340
368
  }
369
+ .ui.form.success .icon.success.message {
370
+ display: flex;
371
+ }
341
372
 
342
373
  /*--------------------
343
374
  Error
@@ -347,6 +378,9 @@
347
378
  .ui.form.warning .warning.message {
348
379
  display: block;
349
380
  }
381
+ .ui.form.warning .icon.warning.message {
382
+ display: flex;
383
+ }
350
384
 
351
385
  /*--------------------
352
386
  Warning
@@ -356,6 +390,9 @@
356
390
  .ui.form.error .error.message {
357
391
  display: block;
358
392
  }
393
+ .ui.form.error .icon.error.message {
394
+ display: flex;
395
+ }
359
396
 
360
397
  /* On Field(s) */
361
398
  .ui.form .fields.error .field label,
@@ -453,11 +490,25 @@
453
490
  .ui.form .field.error .ui.dropdown:hover .menu {
454
491
  border-color: @formErrorBorder;
455
492
  }
493
+ .ui.form .fields.error .field .ui.multiple.selection.dropdown > .label,
494
+ .ui.form .field.error .ui.multiple.selection.dropdown > .label {
495
+ background-color: @dropdownErrorLabelBackground;
496
+ color: @dropdownErrorLabelColor;
497
+ }
498
+
456
499
  /* Hover */
457
500
  .ui.form .fields.error .field .ui.dropdown .menu .item:hover,
458
501
  .ui.form .field.error .ui.dropdown .menu .item:hover {
459
502
  background-color: @dropdownErrorHoverBackground;
460
503
  }
504
+
505
+ /* Selected */
506
+ .ui.form .fields.error .field .ui.dropdown .menu .selected.item,
507
+ .ui.form .field.error .ui.dropdown .menu .selected.item {
508
+ background-color: @dropdownErrorSelectedBackground;
509
+ }
510
+
511
+
461
512
  /* Active */
462
513
  .ui.form .fields.error .field .ui.dropdown .menu .active.item,
463
514
  .ui.form .field.error .ui.dropdown .menu .active.item {
@@ -492,18 +543,18 @@
492
543
  Disabled
493
544
  ---------------------*/
494
545
 
495
- .ui.form .field :disabled,
496
- .ui.form .field.disabled {
497
- opacity: 0.5;
546
+ .ui.form .disabled.fields .field,
547
+ .ui.form .disabled.field,
548
+ .ui.form .field :disabled {
549
+ opacity: @disabledOpacity;
498
550
  }
499
551
  .ui.form .field.disabled label {
500
- opacity: 0.5;
552
+ opacity: @disabledLabelOpacity;
501
553
  }
502
554
  .ui.form .field.disabled :disabled {
503
555
  opacity: 1;
504
556
  }
505
557
 
506
-
507
558
  /*--------------
508
559
  Loading
509
560
  ---------------*/
@@ -618,17 +669,24 @@
618
669
 
619
670
  /* Grouped Vertically */
620
671
  .ui.form .grouped.fields {
672
+ display: block;
621
673
  margin: @groupedMargin;
622
674
  }
623
675
  .ui.form .grouped.fields:last-child {
624
676
  margin-bottom: 0em;
625
677
  }
678
+
626
679
  .ui.form .grouped.fields > label {
680
+ margin: @groupedLabelMargin;
681
+ color: @groupedLabelColor;
627
682
  font-size: @groupedLabelFontSize;
683
+ font-weight: @groupedLabelFontWeight;
684
+ text-transform: @groupedLabelTextTransform;
628
685
  }
629
- .ui.form .grouped.fields .field {
686
+
687
+ .ui.form .grouped.fields .field,
688
+ .ui.form .grouped.inline.fields .field {
630
689
  display: block;
631
- float: none;
632
690
  margin: @groupedFieldMargin;
633
691
  padding: 0em;
634
692
  }
@@ -639,19 +697,11 @@
639
697
 
640
698
  /* Split fields */
641
699
  .ui.form .fields {
642
- clear: both;
643
- }
644
- .ui.form .fields:after {
645
- content: ' ';
646
- display: block;
647
- clear: both;
648
- visibility: hidden;
649
- line-height: 0;
650
- height: 0;
700
+ display: flex;
701
+ flex-direction: row;
651
702
  }
652
703
  .ui.form .fields > .field {
653
- clear: none;
654
- float: left;
704
+ flex: 0 1 auto;
655
705
  padding-left: (@gutterWidth / 2);
656
706
  padding-right: (@gutterWidth / 2);
657
707
  }
@@ -700,6 +750,9 @@
700
750
 
701
751
  /* Swap to full width on mobile */
702
752
  @media only screen and (max-width : @largestMobileScreen) {
753
+ .ui.form .fields {
754
+ flex-wrap: wrap;
755
+ }
703
756
  .ui.form .two.fields > .fields,
704
757
  .ui.form .two.fields > .field,
705
758
  .ui.form .three.fields > .fields,
@@ -834,50 +887,74 @@
834
887
 
835
888
  .ui.form .inline.fields {
836
889
  margin: @fieldMargin;
890
+ align-items: center;
837
891
  }
838
892
  .ui.form .inline.fields .field {
839
- display: inline-block;
840
- float: none;
841
- margin: @inlineFieldsMargin;
842
- padding: 0em;
893
+ margin: 0em;
894
+ padding: @inlineFieldsMargin;
843
895
  }
896
+
897
+ /* Inline Label */
898
+ .ui.form .inline.fields > label,
844
899
  .ui.form .inline.fields .field > label,
845
900
  .ui.form .inline.fields .field > p,
846
- .ui.form .inline.fields .field > input,
847
- .ui.form .inline.fields .field > .ui.input,
848
901
  .ui.form .inline.field > label,
849
- .ui.form .inline.field > p,
850
- .ui.form .inline.field > input,
851
- .ui.form .inline.field > .ui.input {
902
+ .ui.form .inline.field > p {
852
903
  display: inline-block;
853
904
  width: auto;
854
-
855
905
  margin-top: 0em;
856
906
  margin-bottom: 0em;
857
-
858
- vertical-align: @inlineLabelVerticalAlign;
907
+ vertical-align: baseline;
859
908
  font-size: @inlineLabelFontSize;
909
+ font-weight: @inlineLabelFontWeight;
910
+ color: @inlineLabelColor;
911
+ text-transform: @inlineLabelTextTransform;
860
912
  }
913
+
914
+ /* Grouped Inline Label */
915
+ .ui.form .inline.fields > label {
916
+ margin: @groupedInlineLabelMargin;
917
+ }
918
+
919
+ /* Inline Input */
861
920
  .ui.form .inline.fields .field > input,
921
+ .ui.form .inline.fields .field > select,
862
922
  .ui.form .inline.fields .field > .ui.input,
863
923
  .ui.form .inline.field > input,
924
+ .ui.form .inline.field > select,
864
925
  .ui.form .inline.field > .ui.input {
865
- font-size: @inlineLabelFontSize;
866
- }
867
- .ui.form .inline.fields .field > .ui.checkbox label {
868
- padding-left: @inlineCheckboxLabelDistance;
926
+ display: inline-block;
927
+ width: auto;
928
+
929
+ margin-top: 0em;
930
+ margin-bottom: 0em;
931
+
932
+ vertical-align: middle;
933
+ font-size: @inlineInputSize;
869
934
  }
870
935
 
936
+
871
937
  /* Label */
872
938
  .ui.form .inline.fields .field > :first-child,
873
939
  .ui.form .inline.field > :first-child {
874
- margin: 0em @labelDistance 0em 0em;
940
+ margin: 0em @inlineLabelDistance 0em 0em;
875
941
  }
876
942
  .ui.form .inline.fields .field > :only-child,
877
943
  .ui.form .inline.field > :only-child {
878
944
  margin: 0em;
879
945
  }
880
946
 
947
+ /* Wide */
948
+ .ui.form .inline.fields .wide.field {
949
+ display: flex;
950
+ align-items: center;
951
+ }
952
+ .ui.form .inline.fields .wide.field > input,
953
+ .ui.form .inline.fields .wide.field > select,
954
+ .ui.form .inline.fields .wide.field > .ui.input {
955
+ width: 100%;
956
+ }
957
+
881
958
 
882
959
  /*--------------------
883
960
  Sizes
@@ -13,7 +13,7 @@
13
13
  * http://github.com/semantic-org/semantic-ui/
14
14
  *
15
15
  *
16
- * Copyright 2014 Contributors
16
+ * Copyright 2015 Contributors
17
17
  * Released under the MIT license
18
18
  * http://opensource.org/licenses/MIT
19
19
  *
@@ -33,22 +33,13 @@
33
33
  *******************************/
34
34
 
35
35
  .ui.grid {
36
- display: block;
37
- text-align: left;
38
-
39
- font-size: 0em;
36
+ display: flex;
37
+ flex-direction: row;
38
+ flex-wrap: wrap;
39
+ align-items: stretch;
40
40
  padding: 0em;
41
41
  }
42
42
 
43
- .ui.grid:after,
44
- .ui.grid > .row:after {
45
- content: '';
46
- display: block;
47
- height: 0px;
48
- clear: both;
49
- visibility: hidden;
50
- }
51
-
52
43
  /*----------------------
53
44
  Remove Gutters
54
45
  -----------------------*/
@@ -69,9 +60,9 @@
69
60
  }
70
61
 
71
62
 
72
- /* Collapse Margins on Consecutive Grids */
63
+ /* Preserve Rows Spacing on Consecutive Grids */
73
64
  .ui.grid + .grid {
74
- margin-top: (@rowSpacing / 2);
65
+ margin-top: @consecutiveGridDistance;
75
66
  }
76
67
 
77
68
  /*-------------------
@@ -83,7 +74,6 @@
83
74
  .ui.grid > .row > .column {
84
75
  position: relative;
85
76
  display: inline-block;
86
- font-size: 1rem;
87
77
 
88
78
  width: @oneWide;
89
79
  padding-left: (@gutterWidth / 2);
@@ -102,10 +92,13 @@
102
92
 
103
93
  .ui.grid > .row {
104
94
  position: relative;
105
- display: block;
106
- width: auto !important;
95
+ display: flex;
96
+ flex-direction: row;
97
+ flex-wrap: wrap;
98
+ justify-content: inherit;
99
+ align-items: stretch;
100
+ width: 100% !important;
107
101
  padding: 0rem;
108
- font-size: 0rem;
109
102
  padding-top: (@rowSpacing / 2);
110
103
  padding-bottom: (@rowSpacing / 2);
111
104
  }
@@ -137,11 +130,30 @@
137
130
  Loose Coupling
138
131
  --------------------*/
139
132
 
133
+ /* Collapse Margin on Consecutive Grid */
134
+ .ui.grid > .ui.grid:first-child {
135
+ margin-top: 0em;
136
+ }
137
+ .ui.grid > .ui.grid:last-child {
138
+ margin-bottom: 0em;
139
+ }
140
+
141
+ /* Segment inside Aligned Grid */
142
+ .ui.grid .aligned.row > .column > .segment:not(.compact),
143
+ .ui.aligned.grid .column > .segment:not(.compact) {
144
+ width: 100%;
145
+ }
146
+
147
+ /* Align Dividers with Gutter */
140
148
  .ui.grid .row + .ui.divider {
149
+ flex-grow: 1;
141
150
  margin: (@rowSpacing / 2) (@gutterWidth / 2);
142
151
  }
152
+ .ui.grid .column + .ui.vertical.divider {
153
+ height: ~"calc(50% - "(@rowSpacing/2)~")";
154
+ }
143
155
 
144
- /* remove Border on last horizontal segment */
156
+ /* Remove Border on Last Horizontal Segment */
145
157
  .ui.grid > .row > .column:last-child > .horizontal.segment,
146
158
  .ui.grid > .column:last-child > .horizontal.segment {
147
159
  box-shadow: none;
@@ -156,21 +168,7 @@
156
168
  Page Grid
157
169
  -------------------------*/
158
170
 
159
- .ui.page.grid {
160
- padding-left: @computerGutter;
161
- padding-right: @computerGutter;
162
- width: @computerWidth;
163
- }
164
-
165
- /* Collapse Margin */
166
- .ui.grid > .ui.grid:first-child {
167
- margin-top: 0em;
168
- }
169
- .ui.grid > .ui.grid:last-child {
170
- margin-bottom: 0em;
171
- }
172
-
173
- @media only screen and (max-width: (@largestMobileScreen)) {
171
+ @media only screen and (max-width: @largestMobileScreen) {
174
172
  .ui.page.grid {
175
173
  width: @mobileWidth;
176
174
  padding-left: @mobileGutter;
@@ -179,7 +177,7 @@
179
177
  margin-right: 0em;
180
178
  }
181
179
  }
182
- @media only screen and (min-width: @tabletBreakpoint ) {
180
+ @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
183
181
  .ui.page.grid {
184
182
  width: @tabletWidth;
185
183
  margin-left: @tabletMargin;
@@ -188,7 +186,7 @@
188
186
  padding-right: @tabletGutter;
189
187
  }
190
188
  }
191
- @media only screen and (min-width: @computerBreakpoint) {
189
+ @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
192
190
  .ui.page.grid {
193
191
  width: @computerWidth;
194
192
  margin-left: @computerMargin;
@@ -197,7 +195,7 @@
197
195
  padding-right: @computerGutter;
198
196
  }
199
197
  }
200
- @media only screen and (min-width: @largeMonitorBreakpoint) {
198
+ @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
201
199
  .ui.page.grid {
202
200
  width: @largeMonitorWidth;
203
201
  margin-left: @largeMonitorMargin;
@@ -229,67 +227,67 @@
229
227
 
230
228
  /* Grid Based */
231
229
  .ui[class*="one column"].grid > .row > .column,
232
- .ui[class*="one column"].grid > .column {
230
+ .ui[class*="one column"].grid > .column:not(.row) {
233
231
  width: @oneColumn;
234
232
  }
235
233
  .ui[class*="two column"].grid > .row > .column,
236
- .ui[class*="two column"].grid > .column {
234
+ .ui[class*="two column"].grid > .column:not(.row) {
237
235
  width: @twoColumn;
238
236
  }
239
237
  .ui[class*="three column"].grid > .row > .column,
240
- .ui[class*="three column"].grid > .column {
238
+ .ui[class*="three column"].grid > .column:not(.row) {
241
239
  width: @threeColumn;
242
240
  }
243
241
  .ui[class*="four column"].grid > .row > .column,
244
- .ui[class*="four column"].grid > .column {
242
+ .ui[class*="four column"].grid > .column:not(.row) {
245
243
  width: @fourColumn;
246
244
  }
247
245
  .ui[class*="five column"].grid > .row > .column,
248
- .ui[class*="five column"].grid > .column {
246
+ .ui[class*="five column"].grid > .column:not(.row) {
249
247
  width: @fiveColumn;
250
248
  }
251
249
  .ui[class*="six column"].grid > .row > .column,
252
- .ui[class*="six column"].grid > .column {
250
+ .ui[class*="six column"].grid > .column:not(.row) {
253
251
  width: @sixColumn;
254
252
  }
255
253
  .ui[class*="seven column"].grid > .row > .column,
256
- .ui[class*="seven column"].grid > .column {
254
+ .ui[class*="seven column"].grid > .column:not(.row) {
257
255
  width: @sevenColumn;
258
256
  }
259
257
  .ui[class*="eight column"].grid > .row > .column,
260
- .ui[class*="eight column"].grid > .column {
258
+ .ui[class*="eight column"].grid > .column:not(.row) {
261
259
  width: @eightColumn;
262
260
  }
263
261
  .ui[class*="nine column"].grid > .row > .column,
264
- .ui[class*="nine column"].grid > .column {
262
+ .ui[class*="nine column"].grid > .column:not(.row) {
265
263
  width: @nineColumn;
266
264
  }
267
265
  .ui[class*="ten column"].grid > .row > .column,
268
- .ui[class*="ten column"].grid > .column {
266
+ .ui[class*="ten column"].grid > .column:not(.row) {
269
267
  width: @tenColumn;
270
268
  }
271
269
  .ui[class*="eleven column"].grid > .row > .column,
272
- .ui[class*="eleven column"].grid > .column {
270
+ .ui[class*="eleven column"].grid > .column:not(.row) {
273
271
  width: @elevenColumn;
274
272
  }
275
273
  .ui[class*="twelve column"].grid > .row > .column,
276
- .ui[class*="twelve column"].grid > .column {
274
+ .ui[class*="twelve column"].grid > .column:not(.row) {
277
275
  width: @twelveColumn;
278
276
  }
279
277
  .ui[class*="thirteen column"].grid > .row > .column,
280
- .ui[class*="thirteen column"].grid > .column {
278
+ .ui[class*="thirteen column"].grid > .column:not(.row) {
281
279
  width: @thirteenColumn;
282
280
  }
283
281
  .ui[class*="fourteen column"].grid > .row > .column,
284
- .ui[class*="fourteen column"].grid > .column {
282
+ .ui[class*="fourteen column"].grid > .column:not(.row) {
285
283
  width: @fourteenColumn;
286
284
  }
287
285
  .ui[class*="fifteen column"].grid > .row > .column,
288
- .ui[class*="fifteen column"].grid > .column {
286
+ .ui[class*="fifteen column"].grid > .column:not(.row) {
289
287
  width: @fifteenColumn;
290
288
  }
291
289
  .ui[class*="sixteen column"].grid > .row > .column,
292
- .ui[class*="sixteen column"].grid > .column {
290
+ .ui[class*="sixteen column"].grid > .column:not(.row) {
293
291
  width: @sixteenColumn;
294
292
  }
295
293
 
@@ -1025,10 +1023,10 @@
1025
1023
  -----------------------*/
1026
1024
 
1027
1025
  .ui.grid [class*="left floated"].column {
1028
- float: left;
1026
+ margin-right: auto;
1029
1027
  }
1030
1028
  .ui.grid [class*="right floated"].column {
1031
- float: right;
1029
+ margin-left: auto;
1032
1030
  }
1033
1031
 
1034
1032
 
@@ -1052,8 +1050,6 @@
1052
1050
  .ui[class*="vertically divided"].grid > .row {
1053
1051
  margin-top: 0em;
1054
1052
  margin-bottom: 0em;
1055
- padding-top: 0em;
1056
- padding-bottom: 0em;
1057
1053
  }
1058
1054
 
1059
1055
  /* No divider on first column on row */
@@ -1128,8 +1124,6 @@
1128
1124
  -----------------------*/
1129
1125
 
1130
1126
  .ui.celled.grid {
1131
- display: table;
1132
- table-layout: fixed;
1133
1127
  width: 100%;
1134
1128
  margin: @celledMargin;
1135
1129
  box-shadow: 0px 0px 0px @celledWidth @celledBorderColor;
@@ -1137,8 +1131,6 @@
1137
1131
  .ui.celled.grid > .row,
1138
1132
  .ui.celled.grid > .column.row,
1139
1133
  .ui.celled.grid > .column.row:first-child {
1140
- display: table;
1141
- table-layout: fixed;
1142
1134
  width: 100% !important;
1143
1135
  margin: 0em;
1144
1136
  padding: 0em;
@@ -1146,7 +1138,6 @@
1146
1138
  }
1147
1139
  .ui.celled.grid > .column:not(.row),
1148
1140
  .ui.celled.grid > .row > .column {
1149
- display: table-cell;
1150
1141
  box-shadow: (-@celledWidth) 0px 0px 0px @celledBorderColor;
1151
1142
  }
1152
1143
  .ui.celled.grid > .column:first-child,
@@ -1173,6 +1164,7 @@
1173
1164
  /* Internally Celled */
1174
1165
  .ui[class*="internally celled"].grid {
1175
1166
  box-shadow: none;
1167
+ margin: 0em;
1176
1168
  }
1177
1169
  .ui[class*="internally celled"].grid > .row:first-child {
1178
1170
  box-shadow: none;
@@ -1181,45 +1173,91 @@
1181
1173
  box-shadow: none;
1182
1174
  }
1183
1175
 
1176
+ /*----------------------
1177
+ Vertically Aligned
1178
+ -----------------------*/
1179
+
1180
+ /* Top Aligned */
1181
+ .ui[class*="top aligned"].grid .column:not(.row),
1182
+ .ui.grid > [class*="top aligned"].row > .column,
1183
+ .ui.grid > [class*="top aligned"].column:not(.row),
1184
+ .ui.grid > .row > [class*="top aligned"].column {
1185
+ flex-direction: column;
1186
+ vertical-align: top;
1187
+ align-self: flex-start !important;
1188
+ }
1189
+
1190
+ /* Middle Aligned */
1191
+ .ui[class*="middle aligned"].grid .column:not(.row),
1192
+ .ui.grid > [class*="middle aligned"].row > .column,
1193
+ .ui.grid > [class*="middle aligned"].column:not(.row),
1194
+ .ui.grid > .row > [class*="middle aligned"].column {
1195
+ flex-direction: column;
1196
+ vertical-align: middle;
1197
+ align-self: center !important;
1198
+ }
1199
+
1200
+ /* Bottom Aligned */
1201
+ .ui[class*="bottom aligned"].grid .column:not(.row),
1202
+ .ui.grid > [class*="bottom aligned"].row > .column,
1203
+ .ui.grid > [class*="bottom aligned"].column:not(.row),
1204
+ .ui.grid > .row > [class*="bottom aligned"].column {
1205
+ flex-direction: column;
1206
+ vertical-align: bottom;
1207
+ align-self: flex-end !important;
1208
+ }
1209
+
1210
+ /* Stretched */
1211
+ .ui.stretched.grid > .row > .column,
1212
+ .ui.stretched.grid > .column,
1213
+ .ui.grid > .stretched.row > .column,
1214
+ .ui.grid > .stretched.column:not(.row),
1215
+ .ui.grid > .row > .stretched.column {
1216
+ display: inline-flex !important;
1217
+ align-self: stretch;
1218
+ flex-direction: column;
1219
+ }
1220
+
1221
+ .ui.stretched.grid > .row > .column > *,
1222
+ .ui.stretched.grid > .column > *,
1223
+ .ui.grid > .stretched.row > .column > *,
1224
+ .ui.grid > .stretched.column:not(.row) > *,
1225
+ .ui.grid > .row > .stretched.column > * {
1226
+ flex-grow: 1;
1227
+ }
1228
+
1184
1229
  /*----------------------
1185
1230
  Horizontally Centered
1186
1231
  -----------------------*/
1187
1232
 
1188
1233
  /* Left Aligned */
1189
- .ui[class*="left aligned"].grid,
1190
- .ui[class*="left aligned"].grid > .row > .column,
1191
- .ui[class*="left aligned"].grid > .column,
1192
- .ui.grid [class*="left aligned"].column,
1193
- .ui.grid > [class*="left aligned"].row > .column {
1234
+ .ui[class*="left aligned"].grid .column,
1235
+ .ui.grid > [class*="left aligned"].row > .column,
1236
+ .ui.grid > [class*="left aligned"].column.column,
1237
+ .ui.grid > .row > [class*="left aligned"].column {
1194
1238
  text-align: left;
1195
- align-items: flex-start !important;
1196
- }
1197
- .ui.grid [class*="left aligned"].column{
1198
- text-align: left !important;
1239
+ align-self: inherit;
1199
1240
  }
1200
1241
 
1201
1242
  /* Center Aligned */
1202
- .ui[class*="center aligned"].grid,
1203
- .ui[class*="center aligned"].grid > .row > .column,
1204
- .ui[class*="center aligned"].grid > .column,
1205
- .ui.grid > [class*="center aligned"].row > .column {
1243
+ .ui[class*="center aligned"].grid .column,
1244
+ .ui.grid > [class*="center aligned"].row > .column,
1245
+ .ui.grid > [class*="center aligned"].column.column,
1246
+ .ui.grid > .row > [class*="center aligned"].column {
1206
1247
  text-align: center;
1207
- align-items: center !important;
1248
+ align-self: inherit;
1208
1249
  }
1209
- .ui.grid [class*="center aligned"].column{
1210
- text-align: center !important;
1250
+ .ui[class*="center aligned"].grid {
1251
+ justify-content: center;
1211
1252
  }
1212
1253
 
1213
1254
  /* Right Aligned */
1214
- .ui[class*="right aligned"].grid,
1215
- .ui[class*="right aligned"].grid > .row > .column,
1216
- .ui[class*="right aligned"].grid > .column,
1217
- .ui.grid > [class*="right aligned"].row > .column {
1255
+ .ui[class*="right aligned"].grid .column,
1256
+ .ui.grid > [class*="right aligned"].row > .column,
1257
+ .ui.grid > [class*="right aligned"].column.column,
1258
+ .ui.grid > .row > [class*="right aligned"].column {
1218
1259
  text-align: right;
1219
- align-items: flex-end !important;
1220
- }
1221
- .ui.grid [class*="right aligned"].column{
1222
- text-align: right !important;
1260
+ align-self: inherit;
1223
1261
  }
1224
1262
 
1225
1263
  /* Justified */
@@ -1236,271 +1274,139 @@
1236
1274
  hyphens: auto !important;
1237
1275
  }
1238
1276
 
1239
- /*----------------------
1240
- Vertically Aligned
1241
- -----------------------*/
1242
-
1243
- /* Top Aligned */
1244
- .ui[class*="top aligned"].grid,
1245
- .ui[class*="top aligned"].grid > .row > .column,
1246
- .ui[class*="top aligned"].grid > .column,
1247
- .ui.grid [class*="top aligned"].column,
1248
- .ui.grid > [class*="top aligned"].row > .column {
1249
- vertical-align: top;
1250
- justify-content: flex-start !important;
1251
- }
1252
- .ui.grid [class*="top aligned"].column {
1253
- vertical-align: top !important;
1254
- justify-content: flex-start !important;
1255
- }
1256
-
1257
- .ui.stretched.grid > .row > .column,
1258
- .ui.stretched.grid > .column:not(.row),
1259
- .ui.grid .stretched.column,
1260
- .ui.grid > .stretched.row > .column {
1261
- display: flex !important;
1262
- flex-direction: column;
1263
- }
1264
- .ui.stretched.grid > .row > .column > *,
1265
- .ui.stretched.grid > .column > *,
1266
- .ui.grid .stretched.column > *,
1267
- .ui.grid > .stretched.row > .column > * {
1268
- flex-grow: 1;
1269
- }
1270
-
1271
- /* Middle Aligned */
1272
- .ui[class*="middle aligned"].grid,
1273
- .ui[class*="middle aligned"].grid > .row > .column,
1274
- .ui[class*="middle aligned"].grid > .column,
1275
- .ui.grid > [class*="middle aligned"].row > .column {
1276
- vertical-align: middle;
1277
- justify-content: center !important;
1278
- }
1279
- .ui.grid [class*="middle aligned"].column{
1280
- vertical-align: middle !important;
1281
- justify-content: center !important;
1282
- }
1283
-
1284
- /* Bottom Aligned */
1285
- .ui[class*="bottom aligned"].grid,
1286
- .ui[class*="bottom aligned"].grid > .row > .column,
1287
- .ui[class*="bottom aligned"].grid > .column,
1288
- .ui.grid > [class*="bottom aligned"].row > .column {
1289
- vertical-align: bottom;
1290
- justify-content: flex-end !important;
1291
- }
1292
- .ui.grid [class*="bottom aligned"].column {
1293
- justify-content: flex-end !important;
1294
- vertical-align: bottom !important;
1295
- }
1296
-
1297
1277
  /*----------------------
1298
1278
  Colored
1299
1279
  -----------------------*/
1300
1280
 
1301
- .ui.grid > .white.row,
1302
- .ui.grid > .white.column,
1303
- .ui.grid > .row > .white.column {
1304
- background-color: @white !important;
1305
- color: @textColor;
1306
- }
1307
- .ui.grid > .row > .white.column {
1281
+ .ui.grid > .row > .red.column,
1282
+ .ui.grid > .row > .orange.column,
1283
+ .ui.grid > .row > .yellow.column,
1284
+ .ui.grid > .row > .olive.column,
1285
+ .ui.grid > .row > .green.column,
1286
+ .ui.grid > .row > .teal.column,
1287
+ .ui.grid > .row > .blue.column,
1288
+ .ui.grid > .row > .violet.column,
1289
+ .ui.grid > .row > .purple.column,
1290
+ .ui.grid > .row > .pink.column,
1291
+ .ui.grid > .row > .brown.column,
1292
+ .ui.grid > .row > .grey.column,
1293
+ .ui.grid > .row > .black.column {
1308
1294
  margin-top: -(@rowSpacing / 2);
1309
1295
  margin-bottom: -(@rowSpacing / 2);
1310
1296
  padding-top: (@rowSpacing / 2);
1311
1297
  padding-bottom: (@rowSpacing / 2);
1312
1298
  }
1313
1299
 
1314
- .ui.grid > .black.row,
1315
- .ui.grid > .black.column,
1316
- .ui.grid > .row > .black.column {
1317
- background-color: @black !important;
1300
+ /* Red */
1301
+ .ui.grid > .red.row,
1302
+ .ui.grid > .red.column,
1303
+ .ui.grid > .row > .red.column {
1304
+ background-color: @red !important;
1318
1305
  color: @white;
1319
1306
  }
1320
- .ui.grid > .row > .black.column {
1321
- margin-top: -(@rowSpacing / 2);
1322
- margin-bottom: -(@rowSpacing / 2);
1323
- padding-top: (@rowSpacing / 2);
1324
- padding-bottom: (@rowSpacing / 2);
1307
+ /* Orange */
1308
+ .ui.grid > .orange.row,
1309
+ .ui.grid > .orange.column,
1310
+ .ui.grid > .row > .orange.column {
1311
+ background-color: @orange !important;
1312
+ color: @white;
1325
1313
  }
1326
-
1327
- .ui.grid > .blue.row,
1328
- .ui.grid > .blue.column,
1329
- .ui.grid > .row > .blue.column {
1330
- background-color: @blue !important;
1314
+ /* Yellow */
1315
+ .ui.grid > .yellow.row,
1316
+ .ui.grid > .yellow.column,
1317
+ .ui.grid > .row > .yellow.column {
1318
+ background-color: @yellow !important;
1331
1319
  color: @white;
1332
1320
  }
1333
- .ui.grid > .row > .blue.column {
1334
- margin-top: -(@rowSpacing / 2);
1335
- margin-bottom: -(@rowSpacing / 2);
1336
- padding-top: (@rowSpacing / 2);
1337
- padding-bottom: (@rowSpacing / 2);
1321
+ /* Olive */
1322
+ .ui.grid > .olive.row,
1323
+ .ui.grid > .olive.column,
1324
+ .ui.grid > .row > .olive.column {
1325
+ background-color: @olive !important;
1326
+ color: @white;
1338
1327
  }
1339
-
1328
+ /* Green */
1340
1329
  .ui.grid > .green.row,
1341
1330
  .ui.grid > .green.column,
1342
1331
  .ui.grid > .row > .green.column {
1343
1332
  background-color: @green !important;
1344
1333
  color: @white;
1345
1334
  }
1346
- .ui.grid > .row > .green.column {
1347
- margin-top: -(@rowSpacing / 2);
1348
- margin-bottom: -(@rowSpacing / 2);
1349
- padding-top: (@rowSpacing / 2);
1350
- padding-bottom: (@rowSpacing / 2);
1351
- }
1352
-
1353
- .ui.grid > .orange.row,
1354
- .ui.grid > .orange.column,
1355
- .ui.grid > .row > .orange.column {
1356
- background-color: @orange !important;
1335
+ /* Teal */
1336
+ .ui.grid > .teal.row,
1337
+ .ui.grid > .teal.column,
1338
+ .ui.grid > .row > .teal.column {
1339
+ background-color: @teal !important;
1357
1340
  color: @white;
1358
1341
  }
1359
- .ui.grid > .row > .orange.column {
1360
- margin-top: -(@rowSpacing / 2);
1361
- margin-bottom: -(@rowSpacing / 2);
1362
- padding-top: (@rowSpacing / 2);
1363
- padding-bottom: (@rowSpacing / 2);
1364
- }
1365
-
1366
- .ui.grid > .pink.row,
1367
- .ui.grid .pink.column {
1368
- background-color: @pink !important;
1342
+ /* Blue */
1343
+ .ui.grid > .blue.row,
1344
+ .ui.grid > .blue.column,
1345
+ .ui.grid > .row > .blue.column {
1346
+ background-color: @blue !important;
1369
1347
  color: @white;
1370
1348
  }
1371
- .ui.grid > .row > .pink.column {
1372
- margin-top: -(@rowSpacing / 2);
1373
- margin-bottom: -(@rowSpacing / 2);
1374
- padding-top: (@rowSpacing / 2);
1375
- padding-bottom: (@rowSpacing / 2);
1349
+ /* Violet */
1350
+ .ui.grid > .violet.row,
1351
+ .ui.grid > .violet.column,
1352
+ .ui.grid > .row > .violet.column {
1353
+ background-color: @violet !important;
1354
+ color: @white;
1376
1355
  }
1377
-
1356
+ /* Purple */
1378
1357
  .ui.grid > .purple.row,
1379
1358
  .ui.grid > .purple.column,
1380
1359
  .ui.grid > .row > .purple.column {
1381
1360
  background-color: @purple !important;
1382
1361
  color: @white;
1383
1362
  }
1384
- .ui.grid > .row > .purple.column {
1385
- margin-top: -(@rowSpacing / 2);
1386
- margin-bottom: -(@rowSpacing / 2);
1387
- padding-top: (@rowSpacing / 2);
1388
- padding-bottom: (@rowSpacing / 2);
1389
- }
1390
-
1391
- .ui.grid > .red.row,
1392
- .ui.grid > .red.column,
1393
- .ui.grid > .row > .red.column {
1394
- background-color: @red !important;
1363
+ /* Pink */
1364
+ .ui.grid > .pink.row,
1365
+ .ui.grid > .pink.column,
1366
+ .ui.grid > .row > .pink.column {
1367
+ background-color: @pink !important;
1395
1368
  color: @white;
1396
1369
  }
1397
- .ui.grid > .row > .red.column {
1398
- margin-top: -(@rowSpacing / 2);
1399
- margin-bottom: -(@rowSpacing / 2);
1400
- padding-top: (@rowSpacing / 2);
1401
- padding-bottom: (@rowSpacing / 2);
1402
- }
1403
-
1404
- .ui.grid > .teal.row,
1405
- .ui.grid > .teal.column,
1406
- .ui.grid > .row > .teal.column {
1407
- background-color: @teal !important;
1370
+ /* Brown */
1371
+ .ui.grid > .brown.row,
1372
+ .ui.grid > .brown.column,
1373
+ .ui.grid > .row > .brown.column {
1374
+ background-color: @brown !important;
1408
1375
  color: @white;
1409
1376
  }
1410
- .ui.grid > .row > .teal.column {
1411
- margin-top: -(@rowSpacing / 2);
1412
- margin-bottom: -(@rowSpacing / 2);
1413
- padding-top: (@rowSpacing / 2);
1414
- padding-bottom: (@rowSpacing / 2);
1415
- }
1416
-
1417
- .ui.grid > .yellow.row,
1418
- .ui.grid > .yellow.column,
1419
- .ui.grid > .row > .yellow.column {
1420
- background-color: @yellow !important;
1377
+ /* Grey */
1378
+ .ui.grid > .grey.row,
1379
+ .ui.grid > .grey.column,
1380
+ .ui.grid > .row > .grey.column {
1381
+ background-color: @grey !important;
1421
1382
  color: @white;
1422
1383
  }
1423
- .ui.grid > .row > .yellow.column {
1424
- margin-top: -(@rowSpacing / 2);
1425
- margin-bottom: -(@rowSpacing / 2);
1426
- padding-top: (@rowSpacing / 2);
1427
- padding-bottom: (@rowSpacing / 2);
1384
+ /* Black */
1385
+ .ui.grid > .black.row,
1386
+ .ui.grid > .black.column,
1387
+ .ui.grid > .row > .black.column {
1388
+ background-color: @black !important;
1389
+ color: @white;
1428
1390
  }
1429
1391
 
1392
+
1430
1393
  /*----------------------
1431
1394
  Equal Width
1432
1395
  -----------------------*/
1433
1396
 
1434
- .ui[class*="equal width"].grid {
1435
- display: table;
1436
- table-layout: fixed;
1437
- }
1438
- .ui[class*="equal width"].grid > .row,
1439
- .ui.grid > [class*="equal width"].row {
1440
- display: table;
1441
- table-layout: fixed;
1442
- width: 100% !important;
1443
- }
1444
1397
  .ui[class*="equal width"].grid > .column:not(.row),
1445
1398
  .ui[class*="equal width"].grid > .row > .column,
1446
1399
  .ui.grid > [class*="equal width"].row > .column {
1447
- display: table-cell;
1448
- }
1449
-
1450
- /* Flexbox (Experimental / Overrides Where Supported) */
1451
- .ui[class*="equal width"].grid,
1452
- .ui[class*="equal width"].grid > .row,
1453
- .ui.grid > [class*="equal width"].row {
1454
- display: flex;
1455
- flex-direction: row;
1456
- flex-wrap: wrap;
1457
- }
1458
- .ui[class*="equal width"].grid > .column:not(.row),
1459
- .ui[class*="equal width"].grid > .row > .column,
1460
- .ui.grid > [class*="equal width"].row > .column {
1461
- display: block;
1400
+ display: inline-block;
1462
1401
  flex-grow: 1;
1463
1402
  }
1464
-
1465
-
1466
- /*----------------------
1467
- Equal Height Columns
1468
- -----------------------*/
1469
-
1470
- .ui[class*="equal height"].grid {
1471
- display: table;
1472
- table-layout: fixed;
1473
- }
1474
- .ui[class*="equal height"].grid > .row,
1475
- .ui.grid > [class*="equal height"].row {
1476
- display: table;
1477
- table-layout: fixed;
1478
- width: 100% !important;
1479
- }
1480
- .ui[class*="equal height"].grid > .column:not(.row),
1481
- .ui[class*="equal height"].grid > .row > .column,
1482
- .ui.grid > [class*="equal height"].row > .column {
1483
- display: table-cell;
1484
- }
1485
-
1486
- /* Flexbox (Experimental / Overrides Where Supported) */
1487
- .ui[class*="equal height"].grid,
1488
- .ui[class*="equal height"].grid > .row,
1489
- .ui.grid > [class*="equal height"].row {
1490
- display: flex;
1491
- flex-direction: row;
1492
- flex-wrap: wrap;
1493
- }
1494
- .ui[class*="equal height"].grid > .column:not(.row),
1495
- .ui[class*="equal height"].grid > .row > .column,
1496
- .ui.grid > [class*="equal height"].row > .column {
1497
- display: block;
1498
- flex-direction: column;
1499
- flex-grow: 1;
1403
+ .ui[class*="equal width"].grid > .wide.column,
1404
+ .ui[class*="equal width"].grid > .row > .wide.column,
1405
+ .ui.grid > [class*="equal width"].row > .wide.column {
1406
+ flex-grow: 0;
1500
1407
  }
1501
1408
 
1502
1409
 
1503
-
1504
1410
  /*-------------------
1505
1411
  Doubling
1506
1412
  --------------------*/
@@ -1508,7 +1414,7 @@
1508
1414
  /* Tablet Only */
1509
1415
  @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
1510
1416
  .ui.doubling.grid {
1511
- width: 100% !important;
1417
+ width: auto;
1512
1418
  }
1513
1419
  .ui.grid > .doubling.row,
1514
1420
  .ui.doubling.grid > .row {
@@ -1520,81 +1426,82 @@
1520
1426
  display: inline-block !important;
1521
1427
  padding-top: (@rowSpacing / 2) !important;
1522
1428
  padding-bottom: (@rowSpacing / 2) !important;
1429
+ box-shadow: none !important;
1523
1430
  margin: 0em;
1524
1431
  }
1525
1432
  .ui[class*="two column"].doubling.grid > .row > .column,
1526
- .ui[class*="two column"].doubling.grid > .column,
1527
- .ui.grid > [class*="two column"].doubling.row > .column {
1433
+ .ui[class*="two column"].doubling.grid > .column:not(.row),
1434
+ .ui.grid > [class*="two column"].doubling.row.row > .column {
1528
1435
  width: @oneColumn !important;
1529
1436
  }
1530
1437
  .ui[class*="three column"].doubling.grid > .row > .column,
1531
- .ui[class*="three column"].doubling.grid > .column,
1532
- .ui.grid > [class*="three column"].doubling.row > .column {
1438
+ .ui[class*="three column"].doubling.grid > .column:not(.row),
1439
+ .ui.grid > [class*="three column"].doubling.row.row > .column {
1533
1440
  width: @twoColumn !important;
1534
1441
  }
1535
1442
  .ui[class*="four column"].doubling.grid > .row > .column,
1536
- .ui[class*="four column"].doubling.grid > .column,
1537
- .ui.grid > [class*="four column"].doubling.row > .column {
1443
+ .ui[class*="four column"].doubling.grid > .column:not(.row),
1444
+ .ui.grid > [class*="four column"].doubling.row.row > .column {
1538
1445
  width: @twoColumn !important;
1539
1446
  }
1540
1447
  .ui[class*="five column"].doubling.grid > .row > .column,
1541
- .ui[class*="five column"].doubling.grid > .column,
1542
- .ui.grid > [class*="five column"].doubling.row > .column {
1448
+ .ui[class*="five column"].doubling.grid > .column:not(.row),
1449
+ .ui.grid > [class*="five column"].doubling.row.row > .column {
1543
1450
  width: @threeColumn !important;
1544
1451
  }
1545
1452
  .ui[class*="six column"].doubling.grid > .row > .column,
1546
- .ui[class*="six column"].doubling.grid > .column,
1547
- .ui.grid > [class*="six column"].doubling.row > .column {
1453
+ .ui[class*="six column"].doubling.grid > .column:not(.row),
1454
+ .ui.grid > [class*="six column"].doubling.row.row > .column {
1548
1455
  width: @threeColumn !important;
1549
1456
  }
1550
1457
  .ui[class*="seven column"].doubling.grid > .row > .column,
1551
- .ui[class*="seven column"].doubling.grid > .column,
1552
- .ui.grid > [class*="seven column"].doubling.row > .column {
1458
+ .ui[class*="seven column"].doubling.grid > .column:not(.row),
1459
+ .ui.grid > [class*="seven column"].doubling.row.row > .column {
1553
1460
  width: @threeColumn !important;
1554
1461
  }
1555
1462
  .ui[class*="eight column"].doubling.grid > .row > .column,
1556
- .ui[class*="eight column"].doubling.grid > .column,
1557
- .ui.grid > [class*="eight column"].doubling.row > .column {
1463
+ .ui[class*="eight column"].doubling.grid > .column:not(.row),
1464
+ .ui.grid > [class*="eight column"].doubling.row.row > .column {
1558
1465
  width: @fourColumn !important;
1559
1466
  }
1560
1467
  .ui[class*="nine column"].doubling.grid > .row > .column,
1561
- .ui[class*="nine column"].doubling.grid > .column,
1562
- .ui.grid > [class*="nine column"].doubling.row > .column {
1468
+ .ui[class*="nine column"].doubling.grid > .column:not(.row),
1469
+ .ui.grid > [class*="nine column"].doubling.row.row > .column {
1563
1470
  width: @fourColumn !important;
1564
1471
  }
1565
1472
  .ui[class*="ten column"].doubling.grid > .row > .column,
1566
- .ui[class*="ten column"].doubling.grid > .column,
1567
- .ui.grid > [class*="ten column"].doubling.row > .column {
1473
+ .ui[class*="ten column"].doubling.grid > .column:not(.row),
1474
+ .ui.grid > [class*="ten column"].doubling.row.row > .column {
1568
1475
  width: @fiveColumn !important;
1569
1476
  }
1570
1477
  .ui[class*="eleven column"].doubling.grid > .row > .column,
1571
- .ui[class*="eleven column"].doubling.grid > .column,
1572
- .ui.grid > [class*="eleven column"].doubling.row > .column {
1478
+ .ui[class*="eleven column"].doubling.grid > .column:not(.row),
1479
+ .ui.grid > [class*="eleven column"].doubling.row.row > .column {
1573
1480
  width: @fiveColumn !important;
1574
1481
  }
1575
1482
  .ui[class*="twelve column"].doubling.grid > .row > .column,
1576
- .ui[class*="twelve column"].doubling.grid > .column,
1577
- .ui.grid > [class*="twelve column"].doubling.row > .column {
1483
+ .ui[class*="twelve column"].doubling.grid > .column:not(.row),
1484
+ .ui.grid > [class*="twelve column"].doubling.row.row > .column {
1578
1485
  width: @sixColumn !important;
1579
1486
  }
1580
1487
  .ui[class*="thirteen column"].doubling.grid > .row > .column,
1581
- .ui[class*="thirteen column"].doubling.grid > .column,
1582
- .ui.grid > [class*="thirteen column"].doubling.row > .column {
1488
+ .ui[class*="thirteen column"].doubling.grid > .column:not(.row),
1489
+ .ui.grid > [class*="thirteen column"].doubling.row.row > .column {
1583
1490
  width: @sixColumn !important;
1584
1491
  }
1585
1492
  .ui[class*="fourteen column"].doubling.grid > .row > .column,
1586
- .ui[class*="fourteen column"].doubling.grid > .column,
1587
- .ui.grid > [class*="fourteen column"].doubling.row > .column {
1493
+ .ui[class*="fourteen column"].doubling.grid > .column:not(.row),
1494
+ .ui.grid > [class*="fourteen column"].doubling.row.row > .column {
1588
1495
  width: @sevenColumn !important;
1589
1496
  }
1590
1497
  .ui[class*="fifteen column"].doubling.grid > .row > .column,
1591
- .ui[class*="fifteen column"].doubling.grid > .column,
1592
- .ui.grid > [class*="fifteen column"].doubling.row > .column {
1498
+ .ui[class*="fifteen column"].doubling.grid > .column:not(.row),
1499
+ .ui.grid > [class*="fifteen column"].doubling.row.row > .column {
1593
1500
  width: @sevenColumn !important;
1594
1501
  }
1595
1502
  .ui[class*="sixteen column"].doubling.grid > .row > .column,
1596
- .ui[class*="sixteen column"].doubling.grid > .column,
1597
- .ui.grid > [class*="sixteen column"].doubling.row > .column {
1503
+ .ui[class*="sixteen column"].doubling.grid > .column:not(.row),
1504
+ .ui.grid > [class*="sixteen column"].doubling.row.row > .column {
1598
1505
  width: @eightColumn !important;
1599
1506
  }
1600
1507
  }
@@ -1603,90 +1510,89 @@
1603
1510
  @media only screen and (max-width: @largestMobileScreen) {
1604
1511
  .ui.grid > .doubling.row,
1605
1512
  .ui.doubling.grid > .row {
1606
- display: block !important;
1607
1513
  margin: 0em !important;
1608
1514
  padding: 0em !important;
1609
1515
  }
1610
1516
  .ui.grid > .doubling.row > .column,
1611
1517
  .ui.doubling.grid > .row > .column {
1612
- display: inline-block !important;
1613
1518
  padding-top: (@rowSpacing / 2) !important;
1614
1519
  padding-bottom: (@rowSpacing / 2) !important;
1615
1520
  margin: 0em !important;
1521
+ box-shadow: none !important;
1616
1522
  }
1617
1523
  .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column,
1618
- .ui[class*="two column"].doubling:not(.stackable).grid > .column,
1619
- .ui.grid > [class*="two column"].doubling:not(.stackable).row > .column {
1524
+ .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row),
1525
+ .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column {
1620
1526
  width: @oneColumn !important;
1621
1527
  }
1622
1528
  .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column,
1623
- .ui[class*="three column"].doubling:not(.stackable).grid > .column,
1624
- .ui.grid > [class*="three column"].doubling:not(.stackable).row > .column {
1529
+ .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row),
1530
+ .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column {
1625
1531
  width: @twoColumn !important;
1626
1532
  }
1627
1533
  .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column,
1628
- .ui[class*="four column"].doubling:not(.stackable).grid > .column,
1629
- .ui.grid > [class*="four column"].doubling:not(.stackable).row > .column {
1534
+ .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row),
1535
+ .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column {
1630
1536
  width: @twoColumn !important;
1631
1537
  }
1632
1538
  .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column,
1633
- .ui[class*="five column"].doubling:not(.stackable).grid > .column,
1634
- .ui.grid > [class*="five column"].doubling:not(.stackable).row > .column {
1539
+ .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row),
1540
+ .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column {
1635
1541
  width: @twoColumn !important;
1636
1542
  }
1637
1543
  .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column,
1638
- .ui[class*="six column"].doubling:not(.stackable).grid > .column,
1639
- .ui.grid > [class*="six column"].doubling:not(.stackable).row > .column {
1544
+ .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row),
1545
+ .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column {
1640
1546
  width: @twoColumn !important;
1641
1547
  }
1642
1548
  .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column,
1643
- .ui[class*="seven column"].doubling:not(.stackable).grid > .column,
1644
- .ui.grid > [class*="seven column"].doubling:not(.stackable).row > .column {
1549
+ .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row),
1550
+ .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column {
1645
1551
  width: @twoColumn !important;
1646
1552
  }
1647
1553
  .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column,
1648
- .ui[class*="eight column"].doubling:not(.stackable).grid > .column,
1649
- .ui.grid > [class*="eight column"].doubling:not(.stackable).row > .column {
1554
+ .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row),
1555
+ .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column {
1650
1556
  width: @twoColumn !important;
1651
1557
  }
1652
1558
  .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column,
1653
- .ui[class*="nine column"].doubling:not(.stackable).grid > .column,
1654
- .ui.grid > [class*="nine column"].doubling:not(.stackable).row > .column {
1559
+ .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row),
1560
+ .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column {
1655
1561
  width: @threeColumn !important;
1656
1562
  }
1657
1563
  .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column,
1658
- .ui[class*="ten column"].doubling:not(.stackable).grid > .column,
1659
- .ui.grid > [class*="ten column"].doubling:not(.stackable).row > .column {
1564
+ .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row),
1565
+ .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column {
1660
1566
  width: @threeColumn !important;
1661
1567
  }
1662
1568
  .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column,
1663
- .ui[class*="eleven column"].doubling:not(.stackable).grid > .column,
1664
- .ui.grid > [class*="eleven column"].doubling:not(.stackable).row > .column {
1569
+ .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row),
1570
+ .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column {
1665
1571
  width: @threeColumn !important;
1666
1572
  }
1667
1573
  .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column,
1668
- .ui[class*="twelve column"].doubling:not(.stackable).grid > .column,
1669
- .ui.grid > [class*="twelve column"].doubling:not(.stackable).row > .column {
1574
+ .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row),
1575
+ .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column {
1670
1576
  width: @threeColumn !important;
1671
1577
  }
1672
1578
  .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column,
1673
- .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column,
1674
- .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row > .column {
1579
+ .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row),
1580
+ .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column {
1675
1581
  width: @threeColumn !important;
1676
1582
  }
1677
1583
  .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column,
1678
- .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column,
1679
- .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row > .column {
1584
+ .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row),
1585
+ .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column {
1680
1586
  width: @fourColumn !important;
1681
1587
  }
1682
1588
  .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column,
1683
- .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column,
1684
- .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row > .column {
1589
+ .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row),
1590
+ .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column {
1685
1591
  width: @fourColumn !important;
1686
1592
  }
1687
1593
  .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column,
1688
- .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column,
1689
- .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row > .column {
1594
+ .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row),
1595
+ .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column {
1690
1596
  width: @fourColumn !important;
1691
1597
  }
1692
1598
  }
@@ -1697,31 +1603,32 @@
1697
1603
 
1698
1604
  @media only screen and (max-width: @largestMobileScreen) {
1699
1605
  .ui.stackable.grid {
1700
- display: block !important;
1701
1606
  width: auto;
1702
- margin-left: 0em !important;
1703
- margin-right: 0em !important;
1704
- padding: 0em;
1705
1607
  }
1706
1608
  .ui.stackable.grid > .row > .wide.column,
1707
1609
  .ui.stackable.grid > .wide.column,
1708
1610
  .ui.stackable.grid > .column.grid > .column,
1709
1611
  .ui.stackable.grid > .column.row > .column,
1710
1612
  .ui.stackable.grid > .row > .column,
1711
- .ui.stackable.grid > .column:not(.row) {
1712
- display: block !important;
1713
- width: auto !important;
1613
+ .ui.stackable.grid > .column:not(.row),
1614
+ .ui.grid > .stackable.stackable.row > .column {
1615
+ width: 100% !important;
1714
1616
  margin: 0em 0em !important;
1715
1617
  box-shadow: none !important;
1716
- float: none !important;
1717
1618
  padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) !important;
1718
1619
  }
1719
- .ui.stackable.grid > .row {
1720
- display: block !important;
1620
+ .ui.stackable.grid:not(.vertically) > .row {
1721
1621
  margin: 0em;
1722
1622
  padding: 0em;
1723
1623
  }
1724
1624
 
1625
+ /* Coupling */
1626
+ .ui.container > .ui.stackable.grid > .column,
1627
+ .ui.container > .ui.stackable.grid > .row > .column {
1628
+ padding-left: 0em !important;
1629
+ padding-right: 0em !important;
1630
+ }
1631
+
1725
1632
  /* Don't pad inside segment or nested grid */
1726
1633
  .ui.grid .ui.stackable.grid,
1727
1634
  .ui.segment:not(.vertical) .ui.stackable.page.grid {
@@ -1729,11 +1636,6 @@
1729
1636
  margin-right: -(@stackableGutter / 2) !important;
1730
1637
  }
1731
1638
 
1732
- /* Equal Height Stackable */
1733
- .ui[class*="equal height"].stackable.page.grid {
1734
- display: block !important;
1735
- }
1736
-
1737
1639
  /* Divided Stackable */
1738
1640
  .ui.stackable.divided.grid > .row:first-child > .column:first-child,
1739
1641
  .ui.stackable.celled.grid > .row:first-child > .column:first-child,
@@ -1749,15 +1651,21 @@
1749
1651
  }
1750
1652
 
1751
1653
  .ui.stackable.celled.grid > .column:not(.row),
1752
- .ui.stackable.divided.grid > .column:not(.row),
1654
+ .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
1753
1655
  .ui.stackable.celled.grid > .row > .column,
1754
- .ui.stackable.divided.grid > .row > .column {
1656
+ .ui.stackable.divided:not(.vertically).grid > .row > .column {
1755
1657
  border-top: @stackableMobileBorder;
1756
1658
  box-shadow: none !important;
1757
1659
  padding-top: @stackableRowSpacing !important;
1758
1660
  padding-bottom: @stackableRowSpacing !important;
1759
1661
  }
1760
1662
 
1663
+ .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
1664
+ .ui.stackable.divided:not(.vertically).grid > .row > .column {
1665
+ padding-left: 0em !important;
1666
+ padding-right: 0em !important;
1667
+ }
1668
+
1761
1669
  }
1762
1670
 
1763
1671
  /*----------------------
@@ -1768,7 +1676,7 @@
1768
1676
  /* These include arbitrary class repetitions for forced specificity */
1769
1677
 
1770
1678
  /* Mobile Only Hide */
1771
- @media only screen and ( max-width: @largestMobileScreen ) {
1679
+ @media only screen and (max-width: @largestMobileScreen) {
1772
1680
  .ui.tablet:not(.mobile).only.grid.grid.grid,
1773
1681
  .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile),
1774
1682
  .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile),
@@ -1781,9 +1689,21 @@
1781
1689
  .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) {
1782
1690
  display: none !important;
1783
1691
  }
1692
+ .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
1693
+ .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
1694
+ .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
1695
+ .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
1696
+ display: none !important;
1697
+ }
1698
+ .ui[class*="widescreen"].grid.grid.grid:not(.mobile),
1699
+ .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
1700
+ .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
1701
+ .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
1702
+ display: none !important;
1703
+ }
1784
1704
  }
1785
1705
  /* Tablet Only Hide */
1786
- @media only screen and (min-width: @tabletBreakpoint ) and (max-width: @largestTabletScreen) {
1706
+ @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
1787
1707
  .ui[class*="mobile only"].grid.grid.grid:not(.tablet),
1788
1708
  .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet),
1789
1709
  .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet),
@@ -1796,10 +1716,50 @@
1796
1716
  .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) {
1797
1717
  display: none !important;
1798
1718
  }
1719
+ .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
1720
+ .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
1721
+ .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
1722
+ .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
1723
+ display: none !important;
1724
+ }
1725
+ .ui[class*="widescreen"].grid.grid.grid:not(.mobile),
1726
+ .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
1727
+ .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
1728
+ .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
1729
+ display: none !important;
1730
+ }
1799
1731
  }
1800
1732
 
1801
1733
  /* Computer Only Hide */
1802
- @media only screen and ( min-width: (@computerBreakpoint) ) {
1734
+ @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
1735
+ .ui[class*="mobile only"].grid.grid.grid:not(.computer),
1736
+ .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
1737
+ .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
1738
+ .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
1739
+ display: none !important;
1740
+ }
1741
+ .ui[class*="tablet only"].grid.grid.grid:not(.computer),
1742
+ .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
1743
+ .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
1744
+ .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
1745
+ display: none !important;
1746
+ }
1747
+ .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
1748
+ .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
1749
+ .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
1750
+ .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
1751
+ display: none !important;
1752
+ }
1753
+ .ui[class*="widescreen"].grid.grid.grid:not(.mobile),
1754
+ .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
1755
+ .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
1756
+ .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
1757
+ display: none !important;
1758
+ }
1759
+ }
1760
+
1761
+ /* Large Screen Only Hide */
1762
+ @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
1803
1763
  .ui[class*="mobile only"].grid.grid.grid:not(.computer),
1804
1764
  .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
1805
1765
  .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
@@ -1812,6 +1772,29 @@
1812
1772
  .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
1813
1773
  display: none !important;
1814
1774
  }
1775
+ .ui[class*="widescreen"].grid.grid.grid:not(.mobile),
1776
+ .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
1777
+ .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
1778
+ .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
1779
+ display: none !important;
1780
+ }
1815
1781
  }
1816
1782
 
1783
+ /* Widescreen Only Hide */
1784
+ @media only screen and (min-width: @widescreenMonitorBreakpoint) {
1785
+ .ui[class*="mobile only"].grid.grid.grid:not(.computer),
1786
+ .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
1787
+ .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
1788
+ .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
1789
+ display: none !important;
1790
+ }
1791
+ .ui[class*="tablet only"].grid.grid.grid:not(.computer),
1792
+ .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
1793
+ .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
1794
+ .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
1795
+ display: none !important;
1796
+ }
1797
+ }
1798
+
1799
+
1817
1800
  .loadUIOverrides();