fomantic-ui 2.9.0-beta.26 → 2.9.0-beta.262

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 (285) hide show
  1. package/.all-contributorsrc +206 -3
  2. package/.github/workflows/ci.yml +4 -4
  3. package/.github/workflows/nightly.yml +4 -4
  4. package/.github/workflows/release.yml +30 -0
  5. package/CONTRIBUTORS.md +75 -37
  6. package/README.md +8 -8
  7. package/dist/components/accordion.css +162 -26
  8. package/dist/components/accordion.js +1 -1
  9. package/dist/components/accordion.min.css +2 -2
  10. package/dist/components/accordion.min.js +2 -2
  11. package/dist/components/ad.css +1 -1
  12. package/dist/components/ad.min.css +1 -1
  13. package/dist/components/api.js +34 -30
  14. package/dist/components/api.min.js +3 -3
  15. package/dist/components/breadcrumb.css +1 -1
  16. package/dist/components/breadcrumb.min.css +1 -1
  17. package/dist/components/button.css +176 -134
  18. package/dist/components/button.min.css +2 -2
  19. package/dist/components/calendar.css +18 -1
  20. package/dist/components/calendar.js +10 -9
  21. package/dist/components/calendar.min.css +2 -2
  22. package/dist/components/calendar.min.js +3 -3
  23. package/dist/components/card.css +26 -19
  24. package/dist/components/card.min.css +2 -2
  25. package/dist/components/checkbox.css +2 -1
  26. package/dist/components/checkbox.js +17 -11
  27. package/dist/components/checkbox.min.css +2 -2
  28. package/dist/components/checkbox.min.js +3 -3
  29. package/dist/components/comment.css +11 -11
  30. package/dist/components/comment.min.css +1 -1
  31. package/dist/components/container.css +94 -1
  32. package/dist/components/container.min.css +2 -2
  33. package/dist/components/dimmer.css +28 -14
  34. package/dist/components/dimmer.js +11 -5
  35. package/dist/components/dimmer.min.css +2 -2
  36. package/dist/components/dimmer.min.js +3 -3
  37. package/dist/components/divider.css +1 -1
  38. package/dist/components/divider.min.css +1 -1
  39. package/dist/components/dropdown.css +49 -13
  40. package/dist/components/dropdown.js +66 -39
  41. package/dist/components/dropdown.min.css +2 -2
  42. package/dist/components/dropdown.min.js +3 -3
  43. package/dist/components/embed.css +1 -1
  44. package/dist/components/embed.js +1 -1
  45. package/dist/components/embed.min.css +1 -1
  46. package/dist/components/embed.min.js +2 -2
  47. package/dist/components/emoji.css +10147 -8139
  48. package/dist/components/emoji.min.css +1 -1
  49. package/dist/components/feed.css +28 -28
  50. package/dist/components/feed.min.css +2 -2
  51. package/dist/components/flag.css +734 -625
  52. package/dist/components/flag.min.css +2 -2
  53. package/dist/components/form.css +118 -55
  54. package/dist/components/form.js +38 -29
  55. package/dist/components/form.min.css +2 -2
  56. package/dist/components/form.min.js +3 -3
  57. package/dist/components/grid.css +11 -8
  58. package/dist/components/grid.min.css +2 -2
  59. package/dist/components/header.css +3 -1
  60. package/dist/components/header.min.css +2 -2
  61. package/dist/components/icon.css +126 -47
  62. package/dist/components/icon.min.css +2 -2
  63. package/dist/components/image.css +1 -1
  64. package/dist/components/image.min.css +1 -1
  65. package/dist/components/input.css +742 -17
  66. package/dist/components/input.min.css +2 -2
  67. package/dist/components/item.css +13 -13
  68. package/dist/components/item.min.css +1 -1
  69. package/dist/components/label.css +1 -1
  70. package/dist/components/label.min.css +1 -1
  71. package/dist/components/list.css +1 -1
  72. package/dist/components/list.min.css +1 -1
  73. package/dist/components/loader.css +1 -1
  74. package/dist/components/loader.min.css +1 -1
  75. package/dist/components/menu.css +29 -5
  76. package/dist/components/menu.min.css +1 -1
  77. package/dist/components/message.css +41 -41
  78. package/dist/components/message.min.css +2 -2
  79. package/dist/components/modal.css +13 -1
  80. package/dist/components/modal.js +127 -49
  81. package/dist/components/modal.min.css +2 -2
  82. package/dist/components/modal.min.js +3 -3
  83. package/dist/components/nag.css +1 -1
  84. package/dist/components/nag.js +1 -1
  85. package/dist/components/nag.min.css +1 -1
  86. package/dist/components/nag.min.js +2 -2
  87. package/dist/components/placeholder.css +1 -1
  88. package/dist/components/placeholder.min.css +1 -1
  89. package/dist/components/popup.css +1 -1
  90. package/dist/components/popup.js +2 -2
  91. package/dist/components/popup.min.css +1 -1
  92. package/dist/components/popup.min.js +3 -3
  93. package/dist/components/progress.css +1 -1
  94. package/dist/components/progress.js +4 -1
  95. package/dist/components/progress.min.css +1 -1
  96. package/dist/components/progress.min.js +3 -3
  97. package/dist/components/rail.css +1 -1
  98. package/dist/components/rail.min.css +1 -1
  99. package/dist/components/rating.css +1 -1
  100. package/dist/components/rating.js +1 -1
  101. package/dist/components/rating.min.css +1 -1
  102. package/dist/components/rating.min.js +2 -2
  103. package/dist/components/reset.css +1 -1
  104. package/dist/components/reset.min.css +1 -1
  105. package/dist/components/reveal.css +1 -1
  106. package/dist/components/reveal.min.css +1 -1
  107. package/dist/components/search.css +1 -1
  108. package/dist/components/search.js +2 -2
  109. package/dist/components/search.min.css +1 -1
  110. package/dist/components/search.min.js +3 -3
  111. package/dist/components/segment.css +91 -7
  112. package/dist/components/segment.min.css +2 -2
  113. package/dist/components/shape.css +1 -1
  114. package/dist/components/shape.js +3 -3
  115. package/dist/components/shape.min.css +1 -1
  116. package/dist/components/shape.min.js +3 -3
  117. package/dist/components/sidebar.css +4 -2
  118. package/dist/components/sidebar.js +8 -6
  119. package/dist/components/sidebar.min.css +2 -2
  120. package/dist/components/sidebar.min.js +3 -3
  121. package/dist/components/site.css +61 -39
  122. package/dist/components/site.js +1 -1
  123. package/dist/components/site.min.css +2 -2
  124. package/dist/components/site.min.js +2 -2
  125. package/dist/components/slider.js +1 -1
  126. package/dist/components/slider.min.js +2 -2
  127. package/dist/components/state.js +1 -1
  128. package/dist/components/state.min.js +2 -2
  129. package/dist/components/statistic.css +1 -1
  130. package/dist/components/statistic.min.css +1 -1
  131. package/dist/components/step.css +4 -4
  132. package/dist/components/step.min.css +2 -2
  133. package/dist/components/sticky.css +1 -1
  134. package/dist/components/sticky.js +1 -1
  135. package/dist/components/sticky.min.css +1 -1
  136. package/dist/components/sticky.min.js +2 -2
  137. package/dist/components/tab.css +1 -1
  138. package/dist/components/tab.js +23 -5
  139. package/dist/components/tab.min.css +1 -1
  140. package/dist/components/tab.min.js +3 -3
  141. package/dist/components/table.css +1168 -26
  142. package/dist/components/table.min.css +2 -2
  143. package/dist/components/text.css +1 -1
  144. package/dist/components/text.min.css +1 -1
  145. package/dist/components/toast.css +39 -1
  146. package/dist/components/toast.js +56 -28
  147. package/dist/components/toast.min.css +2 -2
  148. package/dist/components/toast.min.js +3 -3
  149. package/dist/components/transition.css +1 -1
  150. package/dist/components/transition.js +21 -16
  151. package/dist/components/transition.min.css +1 -1
  152. package/dist/components/transition.min.js +3 -3
  153. package/dist/components/visibility.js +1 -1
  154. package/dist/components/visibility.min.js +2 -2
  155. package/dist/semantic.css +21916 -16238
  156. package/dist/semantic.js +433 -246
  157. package/dist/semantic.min.css +3 -3
  158. package/dist/semantic.min.js +3 -3
  159. package/dist/themes/default/assets/fonts/brand-icons.eot +0 -0
  160. package/dist/themes/default/assets/fonts/brand-icons.svg +801 -654
  161. package/dist/themes/default/assets/fonts/brand-icons.ttf +0 -0
  162. package/dist/themes/default/assets/fonts/brand-icons.woff +0 -0
  163. package/dist/themes/default/assets/fonts/brand-icons.woff2 +0 -0
  164. package/dist/themes/default/assets/fonts/icons.eot +0 -0
  165. package/dist/themes/default/assets/fonts/icons.svg +1175 -1079
  166. package/dist/themes/default/assets/fonts/icons.ttf +0 -0
  167. package/dist/themes/default/assets/fonts/icons.woff +0 -0
  168. package/dist/themes/default/assets/fonts/icons.woff2 +0 -0
  169. package/dist/themes/default/assets/fonts/outline-icons.eot +0 -0
  170. package/dist/themes/default/assets/fonts/outline-icons.svg +93 -95
  171. package/dist/themes/default/assets/fonts/outline-icons.ttf +0 -0
  172. package/dist/themes/default/assets/fonts/outline-icons.woff +0 -0
  173. package/dist/themes/default/assets/fonts/outline-icons.woff2 +0 -0
  174. package/examples/assets/library/iframe-content.js +8 -8
  175. package/examples/assets/library/iframe.js +3 -3
  176. package/package.json +10 -9
  177. package/src/definitions/behaviors/api.js +33 -29
  178. package/src/definitions/behaviors/form.js +37 -28
  179. package/src/definitions/collections/form.less +204 -140
  180. package/src/definitions/collections/grid.less +716 -680
  181. package/src/definitions/collections/menu.less +173 -126
  182. package/src/definitions/collections/message.less +48 -46
  183. package/src/definitions/collections/table.less +849 -262
  184. package/src/definitions/elements/button.less +586 -449
  185. package/src/definitions/elements/container.less +145 -8
  186. package/src/definitions/elements/emoji.less +15 -9
  187. package/src/definitions/elements/flag.less +7 -17
  188. package/src/definitions/elements/header.less +44 -35
  189. package/src/definitions/elements/icon.less +38 -31
  190. package/src/definitions/elements/input.less +264 -22
  191. package/src/definitions/elements/label.less +92 -91
  192. package/src/definitions/elements/list.less +55 -45
  193. package/src/definitions/elements/loader.less +30 -29
  194. package/src/definitions/elements/segment.less +147 -28
  195. package/src/definitions/elements/step.less +52 -48
  196. package/src/definitions/elements/text.less +17 -15
  197. package/src/definitions/globals/site.less +23 -2
  198. package/src/definitions/modules/accordion.less +175 -24
  199. package/src/definitions/modules/calendar.js +9 -8
  200. package/src/definitions/modules/calendar.less +20 -0
  201. package/src/definitions/modules/checkbox.js +16 -10
  202. package/src/definitions/modules/checkbox.less +34 -178
  203. package/src/definitions/modules/dimmer.js +10 -4
  204. package/src/definitions/modules/dimmer.less +21 -8
  205. package/src/definitions/modules/dropdown.js +65 -38
  206. package/src/definitions/modules/dropdown.less +145 -94
  207. package/src/definitions/modules/modal.js +126 -48
  208. package/src/definitions/modules/modal.less +12 -0
  209. package/src/definitions/modules/nag.less +20 -19
  210. package/src/definitions/modules/popup.js +1 -1
  211. package/src/definitions/modules/progress.js +3 -0
  212. package/src/definitions/modules/progress.less +19 -18
  213. package/src/definitions/modules/rating.less +35 -34
  214. package/src/definitions/modules/search.js +1 -1
  215. package/src/definitions/modules/search.less +32 -16
  216. package/src/definitions/modules/shape.js +2 -2
  217. package/src/definitions/modules/sidebar.js +7 -5
  218. package/src/definitions/modules/sidebar.less +33 -19
  219. package/src/definitions/modules/slider.less +39 -38
  220. package/src/definitions/modules/tab.js +22 -4
  221. package/src/definitions/modules/toast.js +55 -27
  222. package/src/definitions/modules/toast.less +48 -16
  223. package/src/definitions/modules/transition.js +20 -15
  224. package/src/definitions/views/card.less +402 -361
  225. package/src/definitions/views/comment.less +92 -81
  226. package/src/definitions/views/feed.less +164 -144
  227. package/src/definitions/views/item.less +249 -196
  228. package/src/definitions/views/statistic.less +90 -88
  229. package/src/themes/bookish/elements/header.overrides +1 -1
  230. package/src/themes/chubby/elements/button.overrides +1 -1
  231. package/src/themes/chubby/elements/header.overrides +1 -1
  232. package/src/themes/default/assets/fonts/brand-icons.eot +0 -0
  233. package/src/themes/default/assets/fonts/brand-icons.svg +801 -654
  234. package/src/themes/default/assets/fonts/brand-icons.ttf +0 -0
  235. package/src/themes/default/assets/fonts/brand-icons.woff +0 -0
  236. package/src/themes/default/assets/fonts/brand-icons.woff2 +0 -0
  237. package/src/themes/default/assets/fonts/icons.eot +0 -0
  238. package/src/themes/default/assets/fonts/icons.svg +1175 -1079
  239. package/src/themes/default/assets/fonts/icons.ttf +0 -0
  240. package/src/themes/default/assets/fonts/icons.woff +0 -0
  241. package/src/themes/default/assets/fonts/icons.woff2 +0 -0
  242. package/src/themes/default/assets/fonts/outline-icons.eot +0 -0
  243. package/src/themes/default/assets/fonts/outline-icons.svg +93 -95
  244. package/src/themes/default/assets/fonts/outline-icons.ttf +0 -0
  245. package/src/themes/default/assets/fonts/outline-icons.woff +0 -0
  246. package/src/themes/default/assets/fonts/outline-icons.woff2 +0 -0
  247. package/src/themes/default/collections/form.variables +4 -0
  248. package/src/themes/default/collections/menu.variables +6 -0
  249. package/src/themes/default/collections/table.variables +52 -0
  250. package/src/themes/default/elements/button.variables +7 -1
  251. package/src/themes/default/elements/container.variables +12 -0
  252. package/src/themes/default/elements/emoji.overrides +1734 -1232
  253. package/src/themes/default/elements/flag.overrides +1641 -986
  254. package/src/themes/default/elements/flag.variables +7 -5
  255. package/src/themes/default/elements/icon.overrides +75 -48
  256. package/src/themes/default/elements/icon.variables +1 -0
  257. package/src/themes/default/elements/input.variables +15 -0
  258. package/src/themes/default/elements/segment.variables +8 -0
  259. package/src/themes/default/elements/step.overrides +1 -1
  260. package/src/themes/default/globals/site.variables +6 -0
  261. package/src/themes/default/globals/variation.variables +139 -6
  262. package/src/themes/default/modules/accordion.variables +49 -2
  263. package/src/themes/default/modules/calendar.variables +3 -0
  264. package/src/themes/default/modules/checkbox.variables +5 -5
  265. package/src/themes/default/modules/dimmer.variables +1 -1
  266. package/src/themes/default/modules/dropdown.variables +4 -10
  267. package/src/themes/default/modules/modal.variables +13 -0
  268. package/src/themes/default/modules/toast.variables +3 -0
  269. package/src/themes/famfamfam/elements/flag.overrides +1026 -0
  270. package/src/themes/famfamfam/elements/flag.variables +13 -0
  271. package/src/themes/instagram/views/card.overrides +1 -1
  272. package/src/themes/joypixels/elements/emoji.overrides +1759 -1257
  273. package/src/themes/joypixels/elements/emoji.variables +1 -1
  274. package/src/themes/material/collections/menu.overrides +1 -1
  275. package/src/themes/material/elements/button.overrides +1 -1
  276. package/src/themes/material/elements/header.overrides +1 -1
  277. package/src/themes/material/globals/site.variables +0 -1
  278. package/src/themes/material/modules/dropdown.overrides +1 -1
  279. package/src/themes/material/modules/modal.overrides +1 -1
  280. package/src/themes/rtl/globals/site.overrides +1 -1
  281. package/src/themes/twitter/elements/emoji.overrides +1734 -1232
  282. package/tasks/build/css.js +6 -1
  283. package/tasks/config/project/install.js +11 -5
  284. package/tasks/install.js +1 -0
  285. package/test/helpers/sinon.js +2 -2
@@ -39,13 +39,17 @@
39
39
  margin-left: -(@gutterWidth / 2);
40
40
  margin-right: -(@gutterWidth / 2);
41
41
  }
42
- .ui.relaxed.grid {
43
- margin-left: -(@relaxedGutterWidth / 2);
44
- margin-right: -(@relaxedGutterWidth / 2);
45
- }
46
- .ui[class*="very relaxed"].grid {
47
- margin-left: -(@veryRelaxedGutterWidth / 2);
48
- margin-right: -(@veryRelaxedGutterWidth / 2);
42
+ & when (@variationGridRelaxed) {
43
+ .ui.relaxed.grid {
44
+ margin-left: -(@relaxedGutterWidth / 2);
45
+ margin-right: -(@relaxedGutterWidth / 2);
46
+ }
47
+ & when (@variationGridVeryRelaxed) {
48
+ .ui[class*="very relaxed"].grid {
49
+ margin-left: -(@veryRelaxedGutterWidth / 2);
50
+ margin-right: -(@veryRelaxedGutterWidth / 2);
51
+ }
52
+ }
49
53
  }
50
54
 
51
55
 
@@ -338,609 +342,611 @@
338
342
  }
339
343
  }
340
344
 
341
- /*-------------------
342
- Column Width
343
- --------------------*/
344
-
345
- /* Sizing Combinations */
346
- .ui.grid > .row > [class*="one wide"].column,
347
- .ui.grid > .column.row > [class*="one wide"].column,
348
- .ui.grid > [class*="one wide"].column,
349
- .ui.column.grid > [class*="one wide"].column {
350
- width: @oneWide !important;
351
- }
352
- .ui.grid > .row > [class*="two wide"].column,
353
- .ui.grid > .column.row > [class*="two wide"].column,
354
- .ui.grid > [class*="two wide"].column,
355
- .ui.column.grid > [class*="two wide"].column {
356
- width: @twoWide !important;
357
- }
358
- .ui.grid > .row > [class*="three wide"].column,
359
- .ui.grid > .column.row > [class*="three wide"].column,
360
- .ui.grid > [class*="three wide"].column,
361
- .ui.column.grid > [class*="three wide"].column {
362
- width: @threeWide !important;
363
- }
364
- .ui.grid > .row > [class*="four wide"].column,
365
- .ui.grid > .column.row > [class*="four wide"].column,
366
- .ui.grid > [class*="four wide"].column,
367
- .ui.column.grid > [class*="four wide"].column {
368
- width: @fourWide !important;
369
- }
370
- .ui.grid > .row > [class*="five wide"].column,
371
- .ui.grid > .column.row > [class*="five wide"].column,
372
- .ui.grid > [class*="five wide"].column,
373
- .ui.column.grid > [class*="five wide"].column {
374
- width: @fiveWide !important;
375
- }
376
- .ui.grid > .row > [class*="six wide"].column,
377
- .ui.grid > .column.row > [class*="six wide"].column,
378
- .ui.grid > [class*="six wide"].column,
379
- .ui.column.grid > [class*="six wide"].column {
380
- width: @sixWide !important;
381
- }
382
- .ui.grid > .row > [class*="seven wide"].column,
383
- .ui.grid > .column.row > [class*="seven wide"].column,
384
- .ui.grid > [class*="seven wide"].column,
385
- .ui.column.grid > [class*="seven wide"].column {
386
- width: @sevenWide !important;
387
- }
388
- .ui.grid > .row > [class*="eight wide"].column,
389
- .ui.grid > .column.row > [class*="eight wide"].column,
390
- .ui.grid > [class*="eight wide"].column,
391
- .ui.column.grid > [class*="eight wide"].column {
392
- width: @eightWide !important;
393
- }
394
- .ui.grid > .row > [class*="nine wide"].column,
395
- .ui.grid > .column.row > [class*="nine wide"].column,
396
- .ui.grid > [class*="nine wide"].column,
397
- .ui.column.grid > [class*="nine wide"].column {
398
- width: @nineWide !important;
399
- }
400
- .ui.grid > .row > [class*="ten wide"].column,
401
- .ui.grid > .column.row > [class*="ten wide"].column,
402
- .ui.grid > [class*="ten wide"].column,
403
- .ui.column.grid > [class*="ten wide"].column {
404
- width: @tenWide !important;
405
- }
406
- .ui.grid > .row > [class*="eleven wide"].column,
407
- .ui.grid > .column.row > [class*="eleven wide"].column,
408
- .ui.grid > [class*="eleven wide"].column,
409
- .ui.column.grid > [class*="eleven wide"].column {
410
- width: @elevenWide !important;
411
- }
412
- .ui.grid > .row > [class*="twelve wide"].column,
413
- .ui.grid > .column.row > [class*="twelve wide"].column,
414
- .ui.grid > [class*="twelve wide"].column,
415
- .ui.column.grid > [class*="twelve wide"].column {
416
- width: @twelveWide !important;
417
- }
418
- .ui.grid > .row > [class*="thirteen wide"].column,
419
- .ui.grid > .column.row > [class*="thirteen wide"].column,
420
- .ui.grid > [class*="thirteen wide"].column,
421
- .ui.column.grid > [class*="thirteen wide"].column {
422
- width: @thirteenWide !important;
423
- }
424
- .ui.grid > .row > [class*="fourteen wide"].column,
425
- .ui.grid > .column.row > [class*="fourteen wide"].column,
426
- .ui.grid > [class*="fourteen wide"].column,
427
- .ui.column.grid > [class*="fourteen wide"].column {
428
- width: @fourteenWide !important;
429
- }
430
- .ui.grid > .row > [class*="fifteen wide"].column,
431
- .ui.grid > .column.row > [class*="fifteen wide"].column,
432
- .ui.grid > [class*="fifteen wide"].column,
433
- .ui.column.grid > [class*="fifteen wide"].column {
434
- width: @fifteenWide !important;
435
- }
436
- .ui.grid > .row > [class*="sixteen wide"].column,
437
- .ui.grid > .column.row > [class*="sixteen wide"].column,
438
- .ui.grid > [class*="sixteen wide"].column,
439
- .ui.column.grid > [class*="sixteen wide"].column {
440
- width: @sixteenWide !important;
441
- }
442
-
443
- /*----------------------
444
- Width per Device
445
- -----------------------*/
345
+ & when (@variationGridWide) {
346
+ /*-------------------
347
+ Column Width
348
+ --------------------*/
446
349
 
447
- /* Mobile Sizing Combinations */
448
- @media only screen and (min-width: @mobileBreakpoint) and (max-width: @largestMobileScreen) {
449
- .ui.grid > .row > [class*="one wide mobile"].column,
450
- .ui.grid > .column.row > [class*="one wide mobile"].column,
451
- .ui.grid > [class*="one wide mobile"].column,
452
- .ui.column.grid > [class*="one wide mobile"].column {
350
+ /* Sizing Combinations */
351
+ .ui.grid > .row > [class*="one wide"].column,
352
+ .ui.grid > .column.row > [class*="one wide"].column,
353
+ .ui.grid > [class*="one wide"].column,
354
+ .ui.column.grid > [class*="one wide"].column {
453
355
  width: @oneWide !important;
454
356
  }
455
- .ui.grid > .row > [class*="two wide mobile"].column,
456
- .ui.grid > .column.row > [class*="two wide mobile"].column,
457
- .ui.grid > [class*="two wide mobile"].column,
458
- .ui.column.grid > [class*="two wide mobile"].column {
357
+ .ui.grid > .row > [class*="two wide"].column,
358
+ .ui.grid > .column.row > [class*="two wide"].column,
359
+ .ui.grid > [class*="two wide"].column,
360
+ .ui.column.grid > [class*="two wide"].column {
459
361
  width: @twoWide !important;
460
362
  }
461
- .ui.grid > .row > [class*="three wide mobile"].column,
462
- .ui.grid > .column.row > [class*="three wide mobile"].column,
463
- .ui.grid > [class*="three wide mobile"].column,
464
- .ui.column.grid > [class*="three wide mobile"].column {
363
+ .ui.grid > .row > [class*="three wide"].column,
364
+ .ui.grid > .column.row > [class*="three wide"].column,
365
+ .ui.grid > [class*="three wide"].column,
366
+ .ui.column.grid > [class*="three wide"].column {
465
367
  width: @threeWide !important;
466
368
  }
467
- .ui.grid > .row > [class*="four wide mobile"].column,
468
- .ui.grid > .column.row > [class*="four wide mobile"].column,
469
- .ui.grid > [class*="four wide mobile"].column,
470
- .ui.column.grid > [class*="four wide mobile"].column {
369
+ .ui.grid > .row > [class*="four wide"].column,
370
+ .ui.grid > .column.row > [class*="four wide"].column,
371
+ .ui.grid > [class*="four wide"].column,
372
+ .ui.column.grid > [class*="four wide"].column {
471
373
  width: @fourWide !important;
472
374
  }
473
- .ui.grid > .row > [class*="five wide mobile"].column,
474
- .ui.grid > .column.row > [class*="five wide mobile"].column,
475
- .ui.grid > [class*="five wide mobile"].column,
476
- .ui.column.grid > [class*="five wide mobile"].column {
375
+ .ui.grid > .row > [class*="five wide"].column,
376
+ .ui.grid > .column.row > [class*="five wide"].column,
377
+ .ui.grid > [class*="five wide"].column,
378
+ .ui.column.grid > [class*="five wide"].column {
477
379
  width: @fiveWide !important;
478
380
  }
479
- .ui.grid > .row > [class*="six wide mobile"].column,
480
- .ui.grid > .column.row > [class*="six wide mobile"].column,
481
- .ui.grid > [class*="six wide mobile"].column,
482
- .ui.column.grid > [class*="six wide mobile"].column {
381
+ .ui.grid > .row > [class*="six wide"].column,
382
+ .ui.grid > .column.row > [class*="six wide"].column,
383
+ .ui.grid > [class*="six wide"].column,
384
+ .ui.column.grid > [class*="six wide"].column {
483
385
  width: @sixWide !important;
484
386
  }
485
- .ui.grid > .row > [class*="seven wide mobile"].column,
486
- .ui.grid > .column.row > [class*="seven wide mobile"].column,
487
- .ui.grid > [class*="seven wide mobile"].column,
488
- .ui.column.grid > [class*="seven wide mobile"].column {
387
+ .ui.grid > .row > [class*="seven wide"].column,
388
+ .ui.grid > .column.row > [class*="seven wide"].column,
389
+ .ui.grid > [class*="seven wide"].column,
390
+ .ui.column.grid > [class*="seven wide"].column {
489
391
  width: @sevenWide !important;
490
392
  }
491
- .ui.grid > .row > [class*="eight wide mobile"].column,
492
- .ui.grid > .column.row > [class*="eight wide mobile"].column,
493
- .ui.grid > [class*="eight wide mobile"].column,
494
- .ui.column.grid > [class*="eight wide mobile"].column {
393
+ .ui.grid > .row > [class*="eight wide"].column,
394
+ .ui.grid > .column.row > [class*="eight wide"].column,
395
+ .ui.grid > [class*="eight wide"].column,
396
+ .ui.column.grid > [class*="eight wide"].column {
495
397
  width: @eightWide !important;
496
398
  }
497
- .ui.grid > .row > [class*="nine wide mobile"].column,
498
- .ui.grid > .column.row > [class*="nine wide mobile"].column,
499
- .ui.grid > [class*="nine wide mobile"].column,
500
- .ui.column.grid > [class*="nine wide mobile"].column {
399
+ .ui.grid > .row > [class*="nine wide"].column,
400
+ .ui.grid > .column.row > [class*="nine wide"].column,
401
+ .ui.grid > [class*="nine wide"].column,
402
+ .ui.column.grid > [class*="nine wide"].column {
501
403
  width: @nineWide !important;
502
404
  }
503
- .ui.grid > .row > [class*="ten wide mobile"].column,
504
- .ui.grid > .column.row > [class*="ten wide mobile"].column,
505
- .ui.grid > [class*="ten wide mobile"].column,
506
- .ui.column.grid > [class*="ten wide mobile"].column {
405
+ .ui.grid > .row > [class*="ten wide"].column,
406
+ .ui.grid > .column.row > [class*="ten wide"].column,
407
+ .ui.grid > [class*="ten wide"].column,
408
+ .ui.column.grid > [class*="ten wide"].column {
507
409
  width: @tenWide !important;
508
410
  }
509
- .ui.grid > .row > [class*="eleven wide mobile"].column,
510
- .ui.grid > .column.row > [class*="eleven wide mobile"].column,
511
- .ui.grid > [class*="eleven wide mobile"].column,
512
- .ui.column.grid > [class*="eleven wide mobile"].column {
411
+ .ui.grid > .row > [class*="eleven wide"].column,
412
+ .ui.grid > .column.row > [class*="eleven wide"].column,
413
+ .ui.grid > [class*="eleven wide"].column,
414
+ .ui.column.grid > [class*="eleven wide"].column {
513
415
  width: @elevenWide !important;
514
416
  }
515
- .ui.grid > .row > [class*="twelve wide mobile"].column,
516
- .ui.grid > .column.row > [class*="twelve wide mobile"].column,
517
- .ui.grid > [class*="twelve wide mobile"].column,
518
- .ui.column.grid > [class*="twelve wide mobile"].column {
417
+ .ui.grid > .row > [class*="twelve wide"].column,
418
+ .ui.grid > .column.row > [class*="twelve wide"].column,
419
+ .ui.grid > [class*="twelve wide"].column,
420
+ .ui.column.grid > [class*="twelve wide"].column {
519
421
  width: @twelveWide !important;
520
422
  }
521
- .ui.grid > .row > [class*="thirteen wide mobile"].column,
522
- .ui.grid > .column.row > [class*="thirteen wide mobile"].column,
523
- .ui.grid > [class*="thirteen wide mobile"].column,
524
- .ui.column.grid > [class*="thirteen wide mobile"].column {
423
+ .ui.grid > .row > [class*="thirteen wide"].column,
424
+ .ui.grid > .column.row > [class*="thirteen wide"].column,
425
+ .ui.grid > [class*="thirteen wide"].column,
426
+ .ui.column.grid > [class*="thirteen wide"].column {
525
427
  width: @thirteenWide !important;
526
428
  }
527
- .ui.grid > .row > [class*="fourteen wide mobile"].column,
528
- .ui.grid > .column.row > [class*="fourteen wide mobile"].column,
529
- .ui.grid > [class*="fourteen wide mobile"].column,
530
- .ui.column.grid > [class*="fourteen wide mobile"].column {
429
+ .ui.grid > .row > [class*="fourteen wide"].column,
430
+ .ui.grid > .column.row > [class*="fourteen wide"].column,
431
+ .ui.grid > [class*="fourteen wide"].column,
432
+ .ui.column.grid > [class*="fourteen wide"].column {
531
433
  width: @fourteenWide !important;
532
434
  }
533
- .ui.grid > .row > [class*="fifteen wide mobile"].column,
534
- .ui.grid > .column.row > [class*="fifteen wide mobile"].column,
535
- .ui.grid > [class*="fifteen wide mobile"].column,
536
- .ui.column.grid > [class*="fifteen wide mobile"].column {
435
+ .ui.grid > .row > [class*="fifteen wide"].column,
436
+ .ui.grid > .column.row > [class*="fifteen wide"].column,
437
+ .ui.grid > [class*="fifteen wide"].column,
438
+ .ui.column.grid > [class*="fifteen wide"].column {
537
439
  width: @fifteenWide !important;
538
440
  }
539
- .ui.grid > .row > [class*="sixteen wide mobile"].column,
540
- .ui.grid > .column.row > [class*="sixteen wide mobile"].column,
541
- .ui.grid > [class*="sixteen wide mobile"].column,
542
- .ui.column.grid > [class*="sixteen wide mobile"].column {
441
+ .ui.grid > .row > [class*="sixteen wide"].column,
442
+ .ui.grid > .column.row > [class*="sixteen wide"].column,
443
+ .ui.grid > [class*="sixteen wide"].column,
444
+ .ui.column.grid > [class*="sixteen wide"].column {
543
445
  width: @sixteenWide !important;
544
446
  }
545
- }
546
447
 
547
- /* Tablet Sizing Combinations */
548
- @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
549
- .ui.grid > .row > [class*="one wide tablet"].column,
550
- .ui.grid > .column.row > [class*="one wide tablet"].column,
551
- .ui.grid > [class*="one wide tablet"].column,
552
- .ui.column.grid > [class*="one wide tablet"].column {
553
- width: @oneWide !important;
554
- }
555
- .ui.grid > .row > [class*="two wide tablet"].column,
556
- .ui.grid > .column.row > [class*="two wide tablet"].column,
557
- .ui.grid > [class*="two wide tablet"].column,
558
- .ui.column.grid > [class*="two wide tablet"].column {
559
- width: @twoWide !important;
560
- }
561
- .ui.grid > .row > [class*="three wide tablet"].column,
562
- .ui.grid > .column.row > [class*="three wide tablet"].column,
563
- .ui.grid > [class*="three wide tablet"].column,
564
- .ui.column.grid > [class*="three wide tablet"].column {
565
- width: @threeWide !important;
566
- }
567
- .ui.grid > .row > [class*="four wide tablet"].column,
568
- .ui.grid > .column.row > [class*="four wide tablet"].column,
569
- .ui.grid > [class*="four wide tablet"].column,
570
- .ui.column.grid > [class*="four wide tablet"].column {
571
- width: @fourWide !important;
572
- }
573
- .ui.grid > .row > [class*="five wide tablet"].column,
574
- .ui.grid > .column.row > [class*="five wide tablet"].column,
575
- .ui.grid > [class*="five wide tablet"].column,
576
- .ui.column.grid > [class*="five wide tablet"].column {
577
- width: @fiveWide !important;
578
- }
579
- .ui.grid > .row > [class*="six wide tablet"].column,
580
- .ui.grid > .column.row > [class*="six wide tablet"].column,
581
- .ui.grid > [class*="six wide tablet"].column,
582
- .ui.column.grid > [class*="six wide tablet"].column {
583
- width: @sixWide !important;
584
- }
585
- .ui.grid > .row > [class*="seven wide tablet"].column,
586
- .ui.grid > .column.row > [class*="seven wide tablet"].column,
587
- .ui.grid > [class*="seven wide tablet"].column,
588
- .ui.column.grid > [class*="seven wide tablet"].column {
589
- width: @sevenWide !important;
590
- }
591
- .ui.grid > .row > [class*="eight wide tablet"].column,
592
- .ui.grid > .column.row > [class*="eight wide tablet"].column,
593
- .ui.grid > [class*="eight wide tablet"].column,
594
- .ui.column.grid > [class*="eight wide tablet"].column {
595
- width: @eightWide !important;
596
- }
597
- .ui.grid > .row > [class*="nine wide tablet"].column,
598
- .ui.grid > .column.row > [class*="nine wide tablet"].column,
599
- .ui.grid > [class*="nine wide tablet"].column,
600
- .ui.column.grid > [class*="nine wide tablet"].column {
601
- width: @nineWide !important;
602
- }
603
- .ui.grid > .row > [class*="ten wide tablet"].column,
604
- .ui.grid > .column.row > [class*="ten wide tablet"].column,
605
- .ui.grid > [class*="ten wide tablet"].column,
606
- .ui.column.grid > [class*="ten wide tablet"].column {
607
- width: @tenWide !important;
608
- }
609
- .ui.grid > .row > [class*="eleven wide tablet"].column,
610
- .ui.grid > .column.row > [class*="eleven wide tablet"].column,
611
- .ui.grid > [class*="eleven wide tablet"].column,
612
- .ui.column.grid > [class*="eleven wide tablet"].column {
613
- width: @elevenWide !important;
614
- }
615
- .ui.grid > .row > [class*="twelve wide tablet"].column,
616
- .ui.grid > .column.row > [class*="twelve wide tablet"].column,
617
- .ui.grid > [class*="twelve wide tablet"].column,
618
- .ui.column.grid > [class*="twelve wide tablet"].column {
619
- width: @twelveWide !important;
620
- }
621
- .ui.grid > .row > [class*="thirteen wide tablet"].column,
622
- .ui.grid > .column.row > [class*="thirteen wide tablet"].column,
623
- .ui.grid > [class*="thirteen wide tablet"].column,
624
- .ui.column.grid > [class*="thirteen wide tablet"].column {
625
- width: @thirteenWide !important;
626
- }
627
- .ui.grid > .row > [class*="fourteen wide tablet"].column,
628
- .ui.grid > .column.row > [class*="fourteen wide tablet"].column,
629
- .ui.grid > [class*="fourteen wide tablet"].column,
630
- .ui.column.grid > [class*="fourteen wide tablet"].column {
631
- width: @fourteenWide !important;
632
- }
633
- .ui.grid > .row > [class*="fifteen wide tablet"].column,
634
- .ui.grid > .column.row > [class*="fifteen wide tablet"].column,
635
- .ui.grid > [class*="fifteen wide tablet"].column,
636
- .ui.column.grid > [class*="fifteen wide tablet"].column {
637
- width: @fifteenWide !important;
638
- }
639
- .ui.grid > .row > [class*="sixteen wide tablet"].column,
640
- .ui.grid > .column.row > [class*="sixteen wide tablet"].column,
641
- .ui.grid > [class*="sixteen wide tablet"].column,
642
- .ui.column.grid > [class*="sixteen wide tablet"].column {
643
- width: @sixteenWide !important;
644
- }
645
- }
448
+ /*----------------------
449
+ Width per Device
450
+ -----------------------*/
646
451
 
647
- /* Computer/Desktop Sizing Combinations */
648
- @media only screen and (min-width: @computerBreakpoint) {
452
+ /* Mobile Sizing Combinations */
453
+ @media only screen and (min-width: @mobileBreakpoint) and (max-width: @largestMobileScreen) {
454
+ .ui.grid > .row > [class*="one wide mobile"].column,
455
+ .ui.grid > .column.row > [class*="one wide mobile"].column,
456
+ .ui.grid > [class*="one wide mobile"].column,
457
+ .ui.column.grid > [class*="one wide mobile"].column {
458
+ width: @oneWide !important;
459
+ }
460
+ .ui.grid > .row > [class*="two wide mobile"].column,
461
+ .ui.grid > .column.row > [class*="two wide mobile"].column,
462
+ .ui.grid > [class*="two wide mobile"].column,
463
+ .ui.column.grid > [class*="two wide mobile"].column {
464
+ width: @twoWide !important;
465
+ }
466
+ .ui.grid > .row > [class*="three wide mobile"].column,
467
+ .ui.grid > .column.row > [class*="three wide mobile"].column,
468
+ .ui.grid > [class*="three wide mobile"].column,
469
+ .ui.column.grid > [class*="three wide mobile"].column {
470
+ width: @threeWide !important;
471
+ }
472
+ .ui.grid > .row > [class*="four wide mobile"].column,
473
+ .ui.grid > .column.row > [class*="four wide mobile"].column,
474
+ .ui.grid > [class*="four wide mobile"].column,
475
+ .ui.column.grid > [class*="four wide mobile"].column {
476
+ width: @fourWide !important;
477
+ }
478
+ .ui.grid > .row > [class*="five wide mobile"].column,
479
+ .ui.grid > .column.row > [class*="five wide mobile"].column,
480
+ .ui.grid > [class*="five wide mobile"].column,
481
+ .ui.column.grid > [class*="five wide mobile"].column {
482
+ width: @fiveWide !important;
483
+ }
484
+ .ui.grid > .row > [class*="six wide mobile"].column,
485
+ .ui.grid > .column.row > [class*="six wide mobile"].column,
486
+ .ui.grid > [class*="six wide mobile"].column,
487
+ .ui.column.grid > [class*="six wide mobile"].column {
488
+ width: @sixWide !important;
489
+ }
490
+ .ui.grid > .row > [class*="seven wide mobile"].column,
491
+ .ui.grid > .column.row > [class*="seven wide mobile"].column,
492
+ .ui.grid > [class*="seven wide mobile"].column,
493
+ .ui.column.grid > [class*="seven wide mobile"].column {
494
+ width: @sevenWide !important;
495
+ }
496
+ .ui.grid > .row > [class*="eight wide mobile"].column,
497
+ .ui.grid > .column.row > [class*="eight wide mobile"].column,
498
+ .ui.grid > [class*="eight wide mobile"].column,
499
+ .ui.column.grid > [class*="eight wide mobile"].column {
500
+ width: @eightWide !important;
501
+ }
502
+ .ui.grid > .row > [class*="nine wide mobile"].column,
503
+ .ui.grid > .column.row > [class*="nine wide mobile"].column,
504
+ .ui.grid > [class*="nine wide mobile"].column,
505
+ .ui.column.grid > [class*="nine wide mobile"].column {
506
+ width: @nineWide !important;
507
+ }
508
+ .ui.grid > .row > [class*="ten wide mobile"].column,
509
+ .ui.grid > .column.row > [class*="ten wide mobile"].column,
510
+ .ui.grid > [class*="ten wide mobile"].column,
511
+ .ui.column.grid > [class*="ten wide mobile"].column {
512
+ width: @tenWide !important;
513
+ }
514
+ .ui.grid > .row > [class*="eleven wide mobile"].column,
515
+ .ui.grid > .column.row > [class*="eleven wide mobile"].column,
516
+ .ui.grid > [class*="eleven wide mobile"].column,
517
+ .ui.column.grid > [class*="eleven wide mobile"].column {
518
+ width: @elevenWide !important;
519
+ }
520
+ .ui.grid > .row > [class*="twelve wide mobile"].column,
521
+ .ui.grid > .column.row > [class*="twelve wide mobile"].column,
522
+ .ui.grid > [class*="twelve wide mobile"].column,
523
+ .ui.column.grid > [class*="twelve wide mobile"].column {
524
+ width: @twelveWide !important;
525
+ }
526
+ .ui.grid > .row > [class*="thirteen wide mobile"].column,
527
+ .ui.grid > .column.row > [class*="thirteen wide mobile"].column,
528
+ .ui.grid > [class*="thirteen wide mobile"].column,
529
+ .ui.column.grid > [class*="thirteen wide mobile"].column {
530
+ width: @thirteenWide !important;
531
+ }
532
+ .ui.grid > .row > [class*="fourteen wide mobile"].column,
533
+ .ui.grid > .column.row > [class*="fourteen wide mobile"].column,
534
+ .ui.grid > [class*="fourteen wide mobile"].column,
535
+ .ui.column.grid > [class*="fourteen wide mobile"].column {
536
+ width: @fourteenWide !important;
537
+ }
538
+ .ui.grid > .row > [class*="fifteen wide mobile"].column,
539
+ .ui.grid > .column.row > [class*="fifteen wide mobile"].column,
540
+ .ui.grid > [class*="fifteen wide mobile"].column,
541
+ .ui.column.grid > [class*="fifteen wide mobile"].column {
542
+ width: @fifteenWide !important;
543
+ }
544
+ .ui.grid > .row > [class*="sixteen wide mobile"].column,
545
+ .ui.grid > .column.row > [class*="sixteen wide mobile"].column,
546
+ .ui.grid > [class*="sixteen wide mobile"].column,
547
+ .ui.column.grid > [class*="sixteen wide mobile"].column {
548
+ width: @sixteenWide !important;
549
+ }
550
+ }
551
+
552
+ /* Tablet Sizing Combinations */
553
+ @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
554
+ .ui.grid > .row > [class*="one wide tablet"].column,
555
+ .ui.grid > .column.row > [class*="one wide tablet"].column,
556
+ .ui.grid > [class*="one wide tablet"].column,
557
+ .ui.column.grid > [class*="one wide tablet"].column {
558
+ width: @oneWide !important;
559
+ }
560
+ .ui.grid > .row > [class*="two wide tablet"].column,
561
+ .ui.grid > .column.row > [class*="two wide tablet"].column,
562
+ .ui.grid > [class*="two wide tablet"].column,
563
+ .ui.column.grid > [class*="two wide tablet"].column {
564
+ width: @twoWide !important;
565
+ }
566
+ .ui.grid > .row > [class*="three wide tablet"].column,
567
+ .ui.grid > .column.row > [class*="three wide tablet"].column,
568
+ .ui.grid > [class*="three wide tablet"].column,
569
+ .ui.column.grid > [class*="three wide tablet"].column {
570
+ width: @threeWide !important;
571
+ }
572
+ .ui.grid > .row > [class*="four wide tablet"].column,
573
+ .ui.grid > .column.row > [class*="four wide tablet"].column,
574
+ .ui.grid > [class*="four wide tablet"].column,
575
+ .ui.column.grid > [class*="four wide tablet"].column {
576
+ width: @fourWide !important;
577
+ }
578
+ .ui.grid > .row > [class*="five wide tablet"].column,
579
+ .ui.grid > .column.row > [class*="five wide tablet"].column,
580
+ .ui.grid > [class*="five wide tablet"].column,
581
+ .ui.column.grid > [class*="five wide tablet"].column {
582
+ width: @fiveWide !important;
583
+ }
584
+ .ui.grid > .row > [class*="six wide tablet"].column,
585
+ .ui.grid > .column.row > [class*="six wide tablet"].column,
586
+ .ui.grid > [class*="six wide tablet"].column,
587
+ .ui.column.grid > [class*="six wide tablet"].column {
588
+ width: @sixWide !important;
589
+ }
590
+ .ui.grid > .row > [class*="seven wide tablet"].column,
591
+ .ui.grid > .column.row > [class*="seven wide tablet"].column,
592
+ .ui.grid > [class*="seven wide tablet"].column,
593
+ .ui.column.grid > [class*="seven wide tablet"].column {
594
+ width: @sevenWide !important;
595
+ }
596
+ .ui.grid > .row > [class*="eight wide tablet"].column,
597
+ .ui.grid > .column.row > [class*="eight wide tablet"].column,
598
+ .ui.grid > [class*="eight wide tablet"].column,
599
+ .ui.column.grid > [class*="eight wide tablet"].column {
600
+ width: @eightWide !important;
601
+ }
602
+ .ui.grid > .row > [class*="nine wide tablet"].column,
603
+ .ui.grid > .column.row > [class*="nine wide tablet"].column,
604
+ .ui.grid > [class*="nine wide tablet"].column,
605
+ .ui.column.grid > [class*="nine wide tablet"].column {
606
+ width: @nineWide !important;
607
+ }
608
+ .ui.grid > .row > [class*="ten wide tablet"].column,
609
+ .ui.grid > .column.row > [class*="ten wide tablet"].column,
610
+ .ui.grid > [class*="ten wide tablet"].column,
611
+ .ui.column.grid > [class*="ten wide tablet"].column {
612
+ width: @tenWide !important;
613
+ }
614
+ .ui.grid > .row > [class*="eleven wide tablet"].column,
615
+ .ui.grid > .column.row > [class*="eleven wide tablet"].column,
616
+ .ui.grid > [class*="eleven wide tablet"].column,
617
+ .ui.column.grid > [class*="eleven wide tablet"].column {
618
+ width: @elevenWide !important;
619
+ }
620
+ .ui.grid > .row > [class*="twelve wide tablet"].column,
621
+ .ui.grid > .column.row > [class*="twelve wide tablet"].column,
622
+ .ui.grid > [class*="twelve wide tablet"].column,
623
+ .ui.column.grid > [class*="twelve wide tablet"].column {
624
+ width: @twelveWide !important;
625
+ }
626
+ .ui.grid > .row > [class*="thirteen wide tablet"].column,
627
+ .ui.grid > .column.row > [class*="thirteen wide tablet"].column,
628
+ .ui.grid > [class*="thirteen wide tablet"].column,
629
+ .ui.column.grid > [class*="thirteen wide tablet"].column {
630
+ width: @thirteenWide !important;
631
+ }
632
+ .ui.grid > .row > [class*="fourteen wide tablet"].column,
633
+ .ui.grid > .column.row > [class*="fourteen wide tablet"].column,
634
+ .ui.grid > [class*="fourteen wide tablet"].column,
635
+ .ui.column.grid > [class*="fourteen wide tablet"].column {
636
+ width: @fourteenWide !important;
637
+ }
638
+ .ui.grid > .row > [class*="fifteen wide tablet"].column,
639
+ .ui.grid > .column.row > [class*="fifteen wide tablet"].column,
640
+ .ui.grid > [class*="fifteen wide tablet"].column,
641
+ .ui.column.grid > [class*="fifteen wide tablet"].column {
642
+ width: @fifteenWide !important;
643
+ }
644
+ .ui.grid > .row > [class*="sixteen wide tablet"].column,
645
+ .ui.grid > .column.row > [class*="sixteen wide tablet"].column,
646
+ .ui.grid > [class*="sixteen wide tablet"].column,
647
+ .ui.column.grid > [class*="sixteen wide tablet"].column {
648
+ width: @sixteenWide !important;
649
+ }
650
+ }
651
+
652
+ /* Computer/Desktop Sizing Combinations */
653
+ @media only screen and (min-width: @computerBreakpoint) {
649
654
  .ui.grid > .row > [class*="one wide computer"].column,
650
- .ui.grid > .column.row > [class*="one wide computer"].column,
651
- .ui.grid > [class*="one wide computer"].column,
652
- .ui.column.grid > [class*="one wide computer"].column {
653
- width: @oneWide !important;
654
- }
655
- .ui.grid > .row > [class*="two wide computer"].column,
656
- .ui.grid > .column.row > [class*="two wide computer"].column,
657
- .ui.grid > [class*="two wide computer"].column,
658
- .ui.column.grid > [class*="two wide computer"].column {
659
- width: @twoWide !important;
660
- }
661
- .ui.grid > .row > [class*="three wide computer"].column,
662
- .ui.grid > .column.row > [class*="three wide computer"].column,
663
- .ui.grid > [class*="three wide computer"].column,
664
- .ui.column.grid > [class*="three wide computer"].column {
665
- width: @threeWide !important;
666
- }
667
- .ui.grid > .row > [class*="four wide computer"].column,
668
- .ui.grid > .column.row > [class*="four wide computer"].column,
669
- .ui.grid > [class*="four wide computer"].column,
670
- .ui.column.grid > [class*="four wide computer"].column {
671
- width: @fourWide !important;
672
- }
673
- .ui.grid > .row > [class*="five wide computer"].column,
674
- .ui.grid > .column.row > [class*="five wide computer"].column,
675
- .ui.grid > [class*="five wide computer"].column,
676
- .ui.column.grid > [class*="five wide computer"].column {
677
- width: @fiveWide !important;
678
- }
679
- .ui.grid > .row > [class*="six wide computer"].column,
680
- .ui.grid > .column.row > [class*="six wide computer"].column,
681
- .ui.grid > [class*="six wide computer"].column,
682
- .ui.column.grid > [class*="six wide computer"].column {
683
- width: @sixWide !important;
684
- }
685
- .ui.grid > .row > [class*="seven wide computer"].column,
686
- .ui.grid > .column.row > [class*="seven wide computer"].column,
687
- .ui.grid > [class*="seven wide computer"].column,
688
- .ui.column.grid > [class*="seven wide computer"].column {
689
- width: @sevenWide !important;
690
- }
691
- .ui.grid > .row > [class*="eight wide computer"].column,
692
- .ui.grid > .column.row > [class*="eight wide computer"].column,
693
- .ui.grid > [class*="eight wide computer"].column,
694
- .ui.column.grid > [class*="eight wide computer"].column {
695
- width: @eightWide !important;
696
- }
697
- .ui.grid > .row > [class*="nine wide computer"].column,
698
- .ui.grid > .column.row > [class*="nine wide computer"].column,
699
- .ui.grid > [class*="nine wide computer"].column,
700
- .ui.column.grid > [class*="nine wide computer"].column {
701
- width: @nineWide !important;
702
- }
703
- .ui.grid > .row > [class*="ten wide computer"].column,
704
- .ui.grid > .column.row > [class*="ten wide computer"].column,
705
- .ui.grid > [class*="ten wide computer"].column,
706
- .ui.column.grid > [class*="ten wide computer"].column {
707
- width: @tenWide !important;
708
- }
709
- .ui.grid > .row > [class*="eleven wide computer"].column,
710
- .ui.grid > .column.row > [class*="eleven wide computer"].column,
711
- .ui.grid > [class*="eleven wide computer"].column,
712
- .ui.column.grid > [class*="eleven wide computer"].column {
713
- width: @elevenWide !important;
714
- }
715
- .ui.grid > .row > [class*="twelve wide computer"].column,
716
- .ui.grid > .column.row > [class*="twelve wide computer"].column,
717
- .ui.grid > [class*="twelve wide computer"].column,
718
- .ui.column.grid > [class*="twelve wide computer"].column {
719
- width: @twelveWide !important;
720
- }
721
- .ui.grid > .row > [class*="thirteen wide computer"].column,
722
- .ui.grid > .column.row > [class*="thirteen wide computer"].column,
723
- .ui.grid > [class*="thirteen wide computer"].column,
724
- .ui.column.grid > [class*="thirteen wide computer"].column {
725
- width: @thirteenWide !important;
726
- }
727
- .ui.grid > .row > [class*="fourteen wide computer"].column,
728
- .ui.grid > .column.row > [class*="fourteen wide computer"].column,
729
- .ui.grid > [class*="fourteen wide computer"].column,
730
- .ui.column.grid > [class*="fourteen wide computer"].column {
731
- width: @fourteenWide !important;
732
- }
733
- .ui.grid > .row > [class*="fifteen wide computer"].column,
734
- .ui.grid > .column.row > [class*="fifteen wide computer"].column,
735
- .ui.grid > [class*="fifteen wide computer"].column,
736
- .ui.column.grid > [class*="fifteen wide computer"].column {
737
- width: @fifteenWide !important;
738
- }
739
- .ui.grid > .row > [class*="sixteen wide computer"].column,
740
- .ui.grid > .column.row > [class*="sixteen wide computer"].column,
741
- .ui.grid > [class*="sixteen wide computer"].column,
742
- .ui.column.grid > [class*="sixteen wide computer"].column {
743
- width: @sixteenWide !important;
744
- }
745
- }
746
-
747
- /* Large Monitor Sizing Combinations */
748
- @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor){
749
- .ui.grid > .row > [class*="one wide large screen"].column,
750
- .ui.grid > .column.row > [class*="one wide large screen"].column,
751
- .ui.grid > [class*="one wide large screen"].column,
752
- .ui.column.grid > [class*="one wide large screen"].column {
753
- width: @oneWide !important;
754
- }
755
- .ui.grid > .row > [class*="two wide large screen"].column,
756
- .ui.grid > .column.row > [class*="two wide large screen"].column,
757
- .ui.grid > [class*="two wide large screen"].column,
758
- .ui.column.grid > [class*="two wide large screen"].column {
759
- width: @twoWide !important;
760
- }
761
- .ui.grid > .row > [class*="three wide large screen"].column,
762
- .ui.grid > .column.row > [class*="three wide large screen"].column,
763
- .ui.grid > [class*="three wide large screen"].column,
764
- .ui.column.grid > [class*="three wide large screen"].column {
765
- width: @threeWide !important;
766
- }
767
- .ui.grid > .row > [class*="four wide large screen"].column,
768
- .ui.grid > .column.row > [class*="four wide large screen"].column,
769
- .ui.grid > [class*="four wide large screen"].column,
770
- .ui.column.grid > [class*="four wide large screen"].column {
771
- width: @fourWide !important;
772
- }
773
- .ui.grid > .row > [class*="five wide large screen"].column,
774
- .ui.grid > .column.row > [class*="five wide large screen"].column,
775
- .ui.grid > [class*="five wide large screen"].column,
776
- .ui.column.grid > [class*="five wide large screen"].column {
777
- width: @fiveWide !important;
778
- }
779
- .ui.grid > .row > [class*="six wide large screen"].column,
780
- .ui.grid > .column.row > [class*="six wide large screen"].column,
781
- .ui.grid > [class*="six wide large screen"].column,
782
- .ui.column.grid > [class*="six wide large screen"].column {
783
- width: @sixWide !important;
784
- }
785
- .ui.grid > .row > [class*="seven wide large screen"].column,
786
- .ui.grid > .column.row > [class*="seven wide large screen"].column,
787
- .ui.grid > [class*="seven wide large screen"].column,
788
- .ui.column.grid > [class*="seven wide large screen"].column {
789
- width: @sevenWide !important;
790
- }
791
- .ui.grid > .row > [class*="eight wide large screen"].column,
792
- .ui.grid > .column.row > [class*="eight wide large screen"].column,
793
- .ui.grid > [class*="eight wide large screen"].column,
794
- .ui.column.grid > [class*="eight wide large screen"].column {
795
- width: @eightWide !important;
796
- }
797
- .ui.grid > .row > [class*="nine wide large screen"].column,
798
- .ui.grid > .column.row > [class*="nine wide large screen"].column,
799
- .ui.grid > [class*="nine wide large screen"].column,
800
- .ui.column.grid > [class*="nine wide large screen"].column {
801
- width: @nineWide !important;
802
- }
803
- .ui.grid > .row > [class*="ten wide large screen"].column,
804
- .ui.grid > .column.row > [class*="ten wide large screen"].column,
805
- .ui.grid > [class*="ten wide large screen"].column,
806
- .ui.column.grid > [class*="ten wide large screen"].column {
807
- width: @tenWide !important;
808
- }
809
- .ui.grid > .row > [class*="eleven wide large screen"].column,
810
- .ui.grid > .column.row > [class*="eleven wide large screen"].column,
811
- .ui.grid > [class*="eleven wide large screen"].column,
812
- .ui.column.grid > [class*="eleven wide large screen"].column {
813
- width: @elevenWide !important;
814
- }
815
- .ui.grid > .row > [class*="twelve wide large screen"].column,
816
- .ui.grid > .column.row > [class*="twelve wide large screen"].column,
817
- .ui.grid > [class*="twelve wide large screen"].column,
818
- .ui.column.grid > [class*="twelve wide large screen"].column {
819
- width: @twelveWide !important;
820
- }
821
- .ui.grid > .row > [class*="thirteen wide large screen"].column,
822
- .ui.grid > .column.row > [class*="thirteen wide large screen"].column,
823
- .ui.grid > [class*="thirteen wide large screen"].column,
824
- .ui.column.grid > [class*="thirteen wide large screen"].column {
825
- width: @thirteenWide !important;
826
- }
827
- .ui.grid > .row > [class*="fourteen wide large screen"].column,
828
- .ui.grid > .column.row > [class*="fourteen wide large screen"].column,
829
- .ui.grid > [class*="fourteen wide large screen"].column,
830
- .ui.column.grid > [class*="fourteen wide large screen"].column {
831
- width: @fourteenWide !important;
832
- }
833
- .ui.grid > .row > [class*="fifteen wide large screen"].column,
834
- .ui.grid > .column.row > [class*="fifteen wide large screen"].column,
835
- .ui.grid > [class*="fifteen wide large screen"].column,
836
- .ui.column.grid > [class*="fifteen wide large screen"].column {
837
- width: @fifteenWide !important;
838
- }
839
- .ui.grid > .row > [class*="sixteen wide large screen"].column,
840
- .ui.grid > .column.row > [class*="sixteen wide large screen"].column,
841
- .ui.grid > [class*="sixteen wide large screen"].column,
842
- .ui.column.grid > [class*="sixteen wide large screen"].column {
843
- width: @sixteenWide !important;
844
- }
845
- }
846
-
847
- /* Widescreen Sizing Combinations */
848
- @media only screen and (min-width: @widescreenMonitorBreakpoint) {
849
- .ui.grid > .row > [class*="one wide widescreen"].column,
850
- .ui.grid > .column.row > [class*="one wide widescreen"].column,
851
- .ui.grid > [class*="one wide widescreen"].column,
852
- .ui.column.grid > [class*="one wide widescreen"].column {
853
- width: @oneWide !important;
854
- }
855
- .ui.grid > .row > [class*="two wide widescreen"].column,
856
- .ui.grid > .column.row > [class*="two wide widescreen"].column,
857
- .ui.grid > [class*="two wide widescreen"].column,
858
- .ui.column.grid > [class*="two wide widescreen"].column {
859
- width: @twoWide !important;
860
- }
861
- .ui.grid > .row > [class*="three wide widescreen"].column,
862
- .ui.grid > .column.row > [class*="three wide widescreen"].column,
863
- .ui.grid > [class*="three wide widescreen"].column,
864
- .ui.column.grid > [class*="three wide widescreen"].column {
865
- width: @threeWide !important;
866
- }
867
- .ui.grid > .row > [class*="four wide widescreen"].column,
868
- .ui.grid > .column.row > [class*="four wide widescreen"].column,
869
- .ui.grid > [class*="four wide widescreen"].column,
870
- .ui.column.grid > [class*="four wide widescreen"].column {
871
- width: @fourWide !important;
872
- }
873
- .ui.grid > .row > [class*="five wide widescreen"].column,
874
- .ui.grid > .column.row > [class*="five wide widescreen"].column,
875
- .ui.grid > [class*="five wide widescreen"].column,
876
- .ui.column.grid > [class*="five wide widescreen"].column {
877
- width: @fiveWide !important;
878
- }
879
- .ui.grid > .row > [class*="six wide widescreen"].column,
880
- .ui.grid > .column.row > [class*="six wide widescreen"].column,
881
- .ui.grid > [class*="six wide widescreen"].column,
882
- .ui.column.grid > [class*="six wide widescreen"].column {
883
- width: @sixWide !important;
884
- }
885
- .ui.grid > .row > [class*="seven wide widescreen"].column,
886
- .ui.grid > .column.row > [class*="seven wide widescreen"].column,
887
- .ui.grid > [class*="seven wide widescreen"].column,
888
- .ui.column.grid > [class*="seven wide widescreen"].column {
889
- width: @sevenWide !important;
890
- }
891
- .ui.grid > .row > [class*="eight wide widescreen"].column,
892
- .ui.grid > .column.row > [class*="eight wide widescreen"].column,
893
- .ui.grid > [class*="eight wide widescreen"].column,
894
- .ui.column.grid > [class*="eight wide widescreen"].column {
895
- width: @eightWide !important;
896
- }
897
- .ui.grid > .row > [class*="nine wide widescreen"].column,
898
- .ui.grid > .column.row > [class*="nine wide widescreen"].column,
899
- .ui.grid > [class*="nine wide widescreen"].column,
900
- .ui.column.grid > [class*="nine wide widescreen"].column {
901
- width: @nineWide !important;
902
- }
903
- .ui.grid > .row > [class*="ten wide widescreen"].column,
904
- .ui.grid > .column.row > [class*="ten wide widescreen"].column,
905
- .ui.grid > [class*="ten wide widescreen"].column,
906
- .ui.column.grid > [class*="ten wide widescreen"].column {
907
- width: @tenWide !important;
908
- }
909
- .ui.grid > .row > [class*="eleven wide widescreen"].column,
910
- .ui.grid > .column.row > [class*="eleven wide widescreen"].column,
911
- .ui.grid > [class*="eleven wide widescreen"].column,
912
- .ui.column.grid > [class*="eleven wide widescreen"].column {
913
- width: @elevenWide !important;
914
- }
915
- .ui.grid > .row > [class*="twelve wide widescreen"].column,
916
- .ui.grid > .column.row > [class*="twelve wide widescreen"].column,
917
- .ui.grid > [class*="twelve wide widescreen"].column,
918
- .ui.column.grid > [class*="twelve wide widescreen"].column {
919
- width: @twelveWide !important;
920
- }
921
- .ui.grid > .row > [class*="thirteen wide widescreen"].column,
922
- .ui.grid > .column.row > [class*="thirteen wide widescreen"].column,
923
- .ui.grid > [class*="thirteen wide widescreen"].column,
924
- .ui.column.grid > [class*="thirteen wide widescreen"].column {
925
- width: @thirteenWide !important;
926
- }
927
- .ui.grid > .row > [class*="fourteen wide widescreen"].column,
928
- .ui.grid > .column.row > [class*="fourteen wide widescreen"].column,
929
- .ui.grid > [class*="fourteen wide widescreen"].column,
930
- .ui.column.grid > [class*="fourteen wide widescreen"].column {
931
- width: @fourteenWide !important;
932
- }
933
- .ui.grid > .row > [class*="fifteen wide widescreen"].column,
934
- .ui.grid > .column.row > [class*="fifteen wide widescreen"].column,
935
- .ui.grid > [class*="fifteen wide widescreen"].column,
936
- .ui.column.grid > [class*="fifteen wide widescreen"].column {
937
- width: @fifteenWide !important;
938
- }
939
- .ui.grid > .row > [class*="sixteen wide widescreen"].column,
940
- .ui.grid > .column.row > [class*="sixteen wide widescreen"].column,
941
- .ui.grid > [class*="sixteen wide widescreen"].column,
942
- .ui.column.grid > [class*="sixteen wide widescreen"].column {
943
- width: @sixteenWide !important;
655
+ .ui.grid > .column.row > [class*="one wide computer"].column,
656
+ .ui.grid > [class*="one wide computer"].column,
657
+ .ui.column.grid > [class*="one wide computer"].column {
658
+ width: @oneWide !important;
659
+ }
660
+ .ui.grid > .row > [class*="two wide computer"].column,
661
+ .ui.grid > .column.row > [class*="two wide computer"].column,
662
+ .ui.grid > [class*="two wide computer"].column,
663
+ .ui.column.grid > [class*="two wide computer"].column {
664
+ width: @twoWide !important;
665
+ }
666
+ .ui.grid > .row > [class*="three wide computer"].column,
667
+ .ui.grid > .column.row > [class*="three wide computer"].column,
668
+ .ui.grid > [class*="three wide computer"].column,
669
+ .ui.column.grid > [class*="three wide computer"].column {
670
+ width: @threeWide !important;
671
+ }
672
+ .ui.grid > .row > [class*="four wide computer"].column,
673
+ .ui.grid > .column.row > [class*="four wide computer"].column,
674
+ .ui.grid > [class*="four wide computer"].column,
675
+ .ui.column.grid > [class*="four wide computer"].column {
676
+ width: @fourWide !important;
677
+ }
678
+ .ui.grid > .row > [class*="five wide computer"].column,
679
+ .ui.grid > .column.row > [class*="five wide computer"].column,
680
+ .ui.grid > [class*="five wide computer"].column,
681
+ .ui.column.grid > [class*="five wide computer"].column {
682
+ width: @fiveWide !important;
683
+ }
684
+ .ui.grid > .row > [class*="six wide computer"].column,
685
+ .ui.grid > .column.row > [class*="six wide computer"].column,
686
+ .ui.grid > [class*="six wide computer"].column,
687
+ .ui.column.grid > [class*="six wide computer"].column {
688
+ width: @sixWide !important;
689
+ }
690
+ .ui.grid > .row > [class*="seven wide computer"].column,
691
+ .ui.grid > .column.row > [class*="seven wide computer"].column,
692
+ .ui.grid > [class*="seven wide computer"].column,
693
+ .ui.column.grid > [class*="seven wide computer"].column {
694
+ width: @sevenWide !important;
695
+ }
696
+ .ui.grid > .row > [class*="eight wide computer"].column,
697
+ .ui.grid > .column.row > [class*="eight wide computer"].column,
698
+ .ui.grid > [class*="eight wide computer"].column,
699
+ .ui.column.grid > [class*="eight wide computer"].column {
700
+ width: @eightWide !important;
701
+ }
702
+ .ui.grid > .row > [class*="nine wide computer"].column,
703
+ .ui.grid > .column.row > [class*="nine wide computer"].column,
704
+ .ui.grid > [class*="nine wide computer"].column,
705
+ .ui.column.grid > [class*="nine wide computer"].column {
706
+ width: @nineWide !important;
707
+ }
708
+ .ui.grid > .row > [class*="ten wide computer"].column,
709
+ .ui.grid > .column.row > [class*="ten wide computer"].column,
710
+ .ui.grid > [class*="ten wide computer"].column,
711
+ .ui.column.grid > [class*="ten wide computer"].column {
712
+ width: @tenWide !important;
713
+ }
714
+ .ui.grid > .row > [class*="eleven wide computer"].column,
715
+ .ui.grid > .column.row > [class*="eleven wide computer"].column,
716
+ .ui.grid > [class*="eleven wide computer"].column,
717
+ .ui.column.grid > [class*="eleven wide computer"].column {
718
+ width: @elevenWide !important;
719
+ }
720
+ .ui.grid > .row > [class*="twelve wide computer"].column,
721
+ .ui.grid > .column.row > [class*="twelve wide computer"].column,
722
+ .ui.grid > [class*="twelve wide computer"].column,
723
+ .ui.column.grid > [class*="twelve wide computer"].column {
724
+ width: @twelveWide !important;
725
+ }
726
+ .ui.grid > .row > [class*="thirteen wide computer"].column,
727
+ .ui.grid > .column.row > [class*="thirteen wide computer"].column,
728
+ .ui.grid > [class*="thirteen wide computer"].column,
729
+ .ui.column.grid > [class*="thirteen wide computer"].column {
730
+ width: @thirteenWide !important;
731
+ }
732
+ .ui.grid > .row > [class*="fourteen wide computer"].column,
733
+ .ui.grid > .column.row > [class*="fourteen wide computer"].column,
734
+ .ui.grid > [class*="fourteen wide computer"].column,
735
+ .ui.column.grid > [class*="fourteen wide computer"].column {
736
+ width: @fourteenWide !important;
737
+ }
738
+ .ui.grid > .row > [class*="fifteen wide computer"].column,
739
+ .ui.grid > .column.row > [class*="fifteen wide computer"].column,
740
+ .ui.grid > [class*="fifteen wide computer"].column,
741
+ .ui.column.grid > [class*="fifteen wide computer"].column {
742
+ width: @fifteenWide !important;
743
+ }
744
+ .ui.grid > .row > [class*="sixteen wide computer"].column,
745
+ .ui.grid > .column.row > [class*="sixteen wide computer"].column,
746
+ .ui.grid > [class*="sixteen wide computer"].column,
747
+ .ui.column.grid > [class*="sixteen wide computer"].column {
748
+ width: @sixteenWide !important;
749
+ }
750
+ }
751
+
752
+ /* Large Monitor Sizing Combinations */
753
+ @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
754
+ .ui.grid > .row > [class*="one wide large screen"].column,
755
+ .ui.grid > .column.row > [class*="one wide large screen"].column,
756
+ .ui.grid > [class*="one wide large screen"].column,
757
+ .ui.column.grid > [class*="one wide large screen"].column {
758
+ width: @oneWide !important;
759
+ }
760
+ .ui.grid > .row > [class*="two wide large screen"].column,
761
+ .ui.grid > .column.row > [class*="two wide large screen"].column,
762
+ .ui.grid > [class*="two wide large screen"].column,
763
+ .ui.column.grid > [class*="two wide large screen"].column {
764
+ width: @twoWide !important;
765
+ }
766
+ .ui.grid > .row > [class*="three wide large screen"].column,
767
+ .ui.grid > .column.row > [class*="three wide large screen"].column,
768
+ .ui.grid > [class*="three wide large screen"].column,
769
+ .ui.column.grid > [class*="three wide large screen"].column {
770
+ width: @threeWide !important;
771
+ }
772
+ .ui.grid > .row > [class*="four wide large screen"].column,
773
+ .ui.grid > .column.row > [class*="four wide large screen"].column,
774
+ .ui.grid > [class*="four wide large screen"].column,
775
+ .ui.column.grid > [class*="four wide large screen"].column {
776
+ width: @fourWide !important;
777
+ }
778
+ .ui.grid > .row > [class*="five wide large screen"].column,
779
+ .ui.grid > .column.row > [class*="five wide large screen"].column,
780
+ .ui.grid > [class*="five wide large screen"].column,
781
+ .ui.column.grid > [class*="five wide large screen"].column {
782
+ width: @fiveWide !important;
783
+ }
784
+ .ui.grid > .row > [class*="six wide large screen"].column,
785
+ .ui.grid > .column.row > [class*="six wide large screen"].column,
786
+ .ui.grid > [class*="six wide large screen"].column,
787
+ .ui.column.grid > [class*="six wide large screen"].column {
788
+ width: @sixWide !important;
789
+ }
790
+ .ui.grid > .row > [class*="seven wide large screen"].column,
791
+ .ui.grid > .column.row > [class*="seven wide large screen"].column,
792
+ .ui.grid > [class*="seven wide large screen"].column,
793
+ .ui.column.grid > [class*="seven wide large screen"].column {
794
+ width: @sevenWide !important;
795
+ }
796
+ .ui.grid > .row > [class*="eight wide large screen"].column,
797
+ .ui.grid > .column.row > [class*="eight wide large screen"].column,
798
+ .ui.grid > [class*="eight wide large screen"].column,
799
+ .ui.column.grid > [class*="eight wide large screen"].column {
800
+ width: @eightWide !important;
801
+ }
802
+ .ui.grid > .row > [class*="nine wide large screen"].column,
803
+ .ui.grid > .column.row > [class*="nine wide large screen"].column,
804
+ .ui.grid > [class*="nine wide large screen"].column,
805
+ .ui.column.grid > [class*="nine wide large screen"].column {
806
+ width: @nineWide !important;
807
+ }
808
+ .ui.grid > .row > [class*="ten wide large screen"].column,
809
+ .ui.grid > .column.row > [class*="ten wide large screen"].column,
810
+ .ui.grid > [class*="ten wide large screen"].column,
811
+ .ui.column.grid > [class*="ten wide large screen"].column {
812
+ width: @tenWide !important;
813
+ }
814
+ .ui.grid > .row > [class*="eleven wide large screen"].column,
815
+ .ui.grid > .column.row > [class*="eleven wide large screen"].column,
816
+ .ui.grid > [class*="eleven wide large screen"].column,
817
+ .ui.column.grid > [class*="eleven wide large screen"].column {
818
+ width: @elevenWide !important;
819
+ }
820
+ .ui.grid > .row > [class*="twelve wide large screen"].column,
821
+ .ui.grid > .column.row > [class*="twelve wide large screen"].column,
822
+ .ui.grid > [class*="twelve wide large screen"].column,
823
+ .ui.column.grid > [class*="twelve wide large screen"].column {
824
+ width: @twelveWide !important;
825
+ }
826
+ .ui.grid > .row > [class*="thirteen wide large screen"].column,
827
+ .ui.grid > .column.row > [class*="thirteen wide large screen"].column,
828
+ .ui.grid > [class*="thirteen wide large screen"].column,
829
+ .ui.column.grid > [class*="thirteen wide large screen"].column {
830
+ width: @thirteenWide !important;
831
+ }
832
+ .ui.grid > .row > [class*="fourteen wide large screen"].column,
833
+ .ui.grid > .column.row > [class*="fourteen wide large screen"].column,
834
+ .ui.grid > [class*="fourteen wide large screen"].column,
835
+ .ui.column.grid > [class*="fourteen wide large screen"].column {
836
+ width: @fourteenWide !important;
837
+ }
838
+ .ui.grid > .row > [class*="fifteen wide large screen"].column,
839
+ .ui.grid > .column.row > [class*="fifteen wide large screen"].column,
840
+ .ui.grid > [class*="fifteen wide large screen"].column,
841
+ .ui.column.grid > [class*="fifteen wide large screen"].column {
842
+ width: @fifteenWide !important;
843
+ }
844
+ .ui.grid > .row > [class*="sixteen wide large screen"].column,
845
+ .ui.grid > .column.row > [class*="sixteen wide large screen"].column,
846
+ .ui.grid > [class*="sixteen wide large screen"].column,
847
+ .ui.column.grid > [class*="sixteen wide large screen"].column {
848
+ width: @sixteenWide !important;
849
+ }
850
+ }
851
+
852
+ /* Widescreen Sizing Combinations */
853
+ @media only screen and (min-width: @widescreenMonitorBreakpoint) {
854
+ .ui.grid > .row > [class*="one wide widescreen"].column,
855
+ .ui.grid > .column.row > [class*="one wide widescreen"].column,
856
+ .ui.grid > [class*="one wide widescreen"].column,
857
+ .ui.column.grid > [class*="one wide widescreen"].column {
858
+ width: @oneWide !important;
859
+ }
860
+ .ui.grid > .row > [class*="two wide widescreen"].column,
861
+ .ui.grid > .column.row > [class*="two wide widescreen"].column,
862
+ .ui.grid > [class*="two wide widescreen"].column,
863
+ .ui.column.grid > [class*="two wide widescreen"].column {
864
+ width: @twoWide !important;
865
+ }
866
+ .ui.grid > .row > [class*="three wide widescreen"].column,
867
+ .ui.grid > .column.row > [class*="three wide widescreen"].column,
868
+ .ui.grid > [class*="three wide widescreen"].column,
869
+ .ui.column.grid > [class*="three wide widescreen"].column {
870
+ width: @threeWide !important;
871
+ }
872
+ .ui.grid > .row > [class*="four wide widescreen"].column,
873
+ .ui.grid > .column.row > [class*="four wide widescreen"].column,
874
+ .ui.grid > [class*="four wide widescreen"].column,
875
+ .ui.column.grid > [class*="four wide widescreen"].column {
876
+ width: @fourWide !important;
877
+ }
878
+ .ui.grid > .row > [class*="five wide widescreen"].column,
879
+ .ui.grid > .column.row > [class*="five wide widescreen"].column,
880
+ .ui.grid > [class*="five wide widescreen"].column,
881
+ .ui.column.grid > [class*="five wide widescreen"].column {
882
+ width: @fiveWide !important;
883
+ }
884
+ .ui.grid > .row > [class*="six wide widescreen"].column,
885
+ .ui.grid > .column.row > [class*="six wide widescreen"].column,
886
+ .ui.grid > [class*="six wide widescreen"].column,
887
+ .ui.column.grid > [class*="six wide widescreen"].column {
888
+ width: @sixWide !important;
889
+ }
890
+ .ui.grid > .row > [class*="seven wide widescreen"].column,
891
+ .ui.grid > .column.row > [class*="seven wide widescreen"].column,
892
+ .ui.grid > [class*="seven wide widescreen"].column,
893
+ .ui.column.grid > [class*="seven wide widescreen"].column {
894
+ width: @sevenWide !important;
895
+ }
896
+ .ui.grid > .row > [class*="eight wide widescreen"].column,
897
+ .ui.grid > .column.row > [class*="eight wide widescreen"].column,
898
+ .ui.grid > [class*="eight wide widescreen"].column,
899
+ .ui.column.grid > [class*="eight wide widescreen"].column {
900
+ width: @eightWide !important;
901
+ }
902
+ .ui.grid > .row > [class*="nine wide widescreen"].column,
903
+ .ui.grid > .column.row > [class*="nine wide widescreen"].column,
904
+ .ui.grid > [class*="nine wide widescreen"].column,
905
+ .ui.column.grid > [class*="nine wide widescreen"].column {
906
+ width: @nineWide !important;
907
+ }
908
+ .ui.grid > .row > [class*="ten wide widescreen"].column,
909
+ .ui.grid > .column.row > [class*="ten wide widescreen"].column,
910
+ .ui.grid > [class*="ten wide widescreen"].column,
911
+ .ui.column.grid > [class*="ten wide widescreen"].column {
912
+ width: @tenWide !important;
913
+ }
914
+ .ui.grid > .row > [class*="eleven wide widescreen"].column,
915
+ .ui.grid > .column.row > [class*="eleven wide widescreen"].column,
916
+ .ui.grid > [class*="eleven wide widescreen"].column,
917
+ .ui.column.grid > [class*="eleven wide widescreen"].column {
918
+ width: @elevenWide !important;
919
+ }
920
+ .ui.grid > .row > [class*="twelve wide widescreen"].column,
921
+ .ui.grid > .column.row > [class*="twelve wide widescreen"].column,
922
+ .ui.grid > [class*="twelve wide widescreen"].column,
923
+ .ui.column.grid > [class*="twelve wide widescreen"].column {
924
+ width: @twelveWide !important;
925
+ }
926
+ .ui.grid > .row > [class*="thirteen wide widescreen"].column,
927
+ .ui.grid > .column.row > [class*="thirteen wide widescreen"].column,
928
+ .ui.grid > [class*="thirteen wide widescreen"].column,
929
+ .ui.column.grid > [class*="thirteen wide widescreen"].column {
930
+ width: @thirteenWide !important;
931
+ }
932
+ .ui.grid > .row > [class*="fourteen wide widescreen"].column,
933
+ .ui.grid > .column.row > [class*="fourteen wide widescreen"].column,
934
+ .ui.grid > [class*="fourteen wide widescreen"].column,
935
+ .ui.column.grid > [class*="fourteen wide widescreen"].column {
936
+ width: @fourteenWide !important;
937
+ }
938
+ .ui.grid > .row > [class*="fifteen wide widescreen"].column,
939
+ .ui.grid > .column.row > [class*="fifteen wide widescreen"].column,
940
+ .ui.grid > [class*="fifteen wide widescreen"].column,
941
+ .ui.column.grid > [class*="fifteen wide widescreen"].column {
942
+ width: @fifteenWide !important;
943
+ }
944
+ .ui.grid > .row > [class*="sixteen wide widescreen"].column,
945
+ .ui.grid > .column.row > [class*="sixteen wide widescreen"].column,
946
+ .ui.grid > [class*="sixteen wide widescreen"].column,
947
+ .ui.column.grid > [class*="sixteen wide widescreen"].column {
948
+ width: @sixteenWide !important;
949
+ }
944
950
  }
945
951
  }
946
952
 
@@ -981,11 +987,13 @@
981
987
  padding-right: (@relaxedGutterWidth / 2);
982
988
  }
983
989
 
984
- .ui[class*="very relaxed"].grid > .column:not(.row),
985
- .ui[class*="very relaxed"].grid > .row > .column,
986
- .ui.grid > [class*="very relaxed"].row > .column {
987
- padding-left: (@veryRelaxedGutterWidth / 2);
988
- padding-right: (@veryRelaxedGutterWidth / 2);
990
+ & when (@variationGridVeryRelaxed) {
991
+ .ui[class*="very relaxed"].grid > .column:not(.row),
992
+ .ui[class*="very relaxed"].grid > .row > .column,
993
+ .ui.grid > [class*="very relaxed"].row > .column {
994
+ padding-left: (@veryRelaxedGutterWidth / 2);
995
+ padding-right: (@veryRelaxedGutterWidth / 2);
996
+ }
989
997
  }
990
998
 
991
999
  /* Coupling with UI Divider */
@@ -994,10 +1002,12 @@
994
1002
  margin-left: (@relaxedGutterWidth / 2);
995
1003
  margin-right: (@relaxedGutterWidth / 2);
996
1004
  }
997
- .ui[class*="very relaxed"].grid .row + .ui.divider,
998
- .ui.grid [class*="very relaxed"].row + .ui.divider {
999
- margin-left: (@veryRelaxedGutterWidth / 2);
1000
- margin-right: (@veryRelaxedGutterWidth / 2);
1005
+ & when (@variationGridVeryRelaxed) {
1006
+ .ui[class*="very relaxed"].grid .row + .ui.divider,
1007
+ .ui.grid [class*="very relaxed"].row + .ui.divider {
1008
+ margin-left: (@veryRelaxedGutterWidth / 2);
1009
+ margin-right: (@veryRelaxedGutterWidth / 2);
1010
+ }
1001
1011
  }
1002
1012
  }
1003
1013
 
@@ -1042,17 +1052,19 @@
1042
1052
  box-shadow: @dividedBorder;
1043
1053
  }
1044
1054
 
1045
- /* Swap from padding to margin on columns to have dividers align */
1046
- .ui[class*="vertically divided"].grid > .column:not(.row),
1047
- .ui[class*="vertically divided"].grid > .row > .column {
1048
- margin-top: (@rowSpacing / 2);
1049
- margin-bottom: (@rowSpacing / 2);
1050
- padding-top: 0;
1051
- padding-bottom: 0;
1052
- }
1053
- .ui[class*="vertically divided"].grid > .row {
1054
- margin-top: 0;
1055
- margin-bottom: 0;
1055
+ & when (@variationGridVertical) {
1056
+ /* Swap from padding to margin on columns to have dividers align */
1057
+ .ui[class*="vertically divided"].grid > .column:not(.row),
1058
+ .ui[class*="vertically divided"].grid > .row > .column {
1059
+ margin-top: (@rowSpacing / 2);
1060
+ margin-bottom: (@rowSpacing / 2);
1061
+ padding-top: 0;
1062
+ padding-bottom: 0;
1063
+ }
1064
+ .ui[class*="vertically divided"].grid > .row {
1065
+ margin-top: 0;
1066
+ margin-bottom: 0;
1067
+ }
1056
1068
  }
1057
1069
 
1058
1070
 
@@ -1063,9 +1075,11 @@
1063
1075
  box-shadow: none;
1064
1076
  }
1065
1077
 
1066
- /* No space on top of first row */
1067
- .ui[class*="vertically divided"].grid > .row:first-child > .column {
1068
- margin-top: 0;
1078
+ & when (@variationGridVertical) {
1079
+ /* No space on top of first row */
1080
+ .ui[class*="vertically divided"].grid > .row:first-child > .column {
1081
+ margin-top: 0;
1082
+ }
1069
1083
  }
1070
1084
 
1071
1085
 
@@ -1077,21 +1091,23 @@
1077
1091
  box-shadow: none;
1078
1092
  }
1079
1093
 
1080
- /* Vertically Divided */
1081
- .ui[class*="vertically divided"].grid > .row {
1082
- position: relative;
1083
- }
1084
- .ui[class*="vertically divided"].grid > .row:before {
1085
- position: absolute;
1086
- content: "";
1087
- top: 0;
1088
- left: 0;
1094
+ & when (@variationGridVertical) {
1095
+ /* Vertically Divided */
1096
+ .ui[class*="vertically divided"].grid > .row {
1097
+ position: relative;
1098
+ }
1099
+ .ui[class*="vertically divided"].grid > .row:before {
1100
+ position: absolute;
1101
+ content: "";
1102
+ top: 0;
1103
+ left: 0;
1089
1104
 
1090
- width: e(%("calc(100%% - %d)", @gutterWidth));
1091
- height: 1px;
1105
+ width: e(%("calc(100%% - %d)", @gutterWidth));
1106
+ height: 1px;
1092
1107
 
1093
- margin: 0 (@gutterWidth / 2);
1094
- box-shadow: @verticallyDividedBorder;
1108
+ margin: 0 (@gutterWidth / 2);
1109
+ box-shadow: @verticallyDividedBorder;
1110
+ }
1095
1111
  }
1096
1112
 
1097
1113
  & when (@variationGridPadded) {
@@ -1101,9 +1117,11 @@
1101
1117
  width: 100%;
1102
1118
  }
1103
1119
  }
1104
- /* First Row Vertically Divided */
1105
- .ui[class*="vertically divided"].grid > .row:first-child:before {
1106
- box-shadow: none;
1120
+ & when (@variationGridVertical) {
1121
+ /* First Row Vertically Divided */
1122
+ .ui[class*="vertically divided"].grid > .row:first-child:before {
1123
+ box-shadow: none;
1124
+ }
1107
1125
  }
1108
1126
  & when (@variationGridInverted) {
1109
1127
  /* Inverted Divided */
@@ -1115,21 +1133,25 @@
1115
1133
  .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
1116
1134
  box-shadow: none;
1117
1135
  }
1118
- .ui.inverted[class*="vertically divided"].grid > .row:before {
1119
- box-shadow: @verticallyDividedInvertedBorder;
1136
+ & when (@variationGridVertical) {
1137
+ .ui.inverted[class*="vertically divided"].grid > .row:before {
1138
+ box-shadow: @verticallyDividedInvertedBorder;
1139
+ }
1120
1140
  }
1121
1141
  }
1122
- & when (@variationGridRelaxed) {
1142
+ & when (@variationGridRelaxed) and (@variationGridVertical) {
1123
1143
  /* Relaxed */
1124
1144
  .ui.relaxed[class*="vertically divided"].grid > .row:before {
1125
1145
  margin-left: (@relaxedGutterWidth / 2);
1126
1146
  margin-right: (@relaxedGutterWidth / 2);
1127
1147
  width: e(%("calc(100%% - %d)", @relaxedGutterWidth));
1128
1148
  }
1129
- .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
1130
- margin-left: (@veryRelaxedGutterWidth / 2);
1131
- margin-right: (@veryRelaxedGutterWidth / 2);
1132
- width: e(%("calc(100%% - %d)", @veryRelaxedGutterWidth));
1149
+ & when (@variationGridVeryRelaxed) {
1150
+ .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
1151
+ margin-left: (@veryRelaxedGutterWidth / 2);
1152
+ margin-right: (@veryRelaxedGutterWidth / 2);
1153
+ width: e(%("calc(100%% - %d)", @veryRelaxedGutterWidth));
1154
+ }
1133
1155
  }
1134
1156
  }
1135
1157
  }
@@ -1170,6 +1192,8 @@
1170
1192
  .ui.relaxed.celled.grid > .row > .column {
1171
1193
  padding: @celledRelaxedPadding;
1172
1194
  }
1195
+ }
1196
+ & when (@variationGridVeryRelaxed) {
1173
1197
  .ui[class*="very relaxed"].celled.grid > .column:not(.row),
1174
1198
  .ui[class*="very relaxed"].celled.grid > .row > .column {
1175
1199
  padding: @celledVeryRelaxedPadding;
@@ -1306,34 +1330,37 @@
1306
1330
  /*----------------------
1307
1331
  Colored
1308
1332
  -----------------------*/
1333
+ & when not (@variationGridColors = false) {
1334
+ each(@variationGridColors, {
1335
+ @color: @value;
1336
+ @c: @colors[@@color][color];
1309
1337
 
1310
- each(@colors, {
1311
- @color: replace(@key, '@', '');
1312
- @c: @colors[@@color][color];
1313
-
1314
- .ui.grid > .@{color}.row,
1315
- .ui.grid > .@{color}.column,
1316
- .ui.grid > .row > .@{color}.column {
1317
- background-color: @c;
1318
- color: @white;
1319
- }
1320
- })
1338
+ .ui.grid > .@{color}.row,
1339
+ .ui.grid > .@{color}.column,
1340
+ .ui.grid > .row > .@{color}.column {
1341
+ background-color: @c;
1342
+ color: @white;
1343
+ }
1344
+ })
1345
+ }
1321
1346
 
1322
1347
 
1323
- /*----------------------
1324
- Equal Width
1325
- -----------------------*/
1348
+ & when (@variationGridEqualWidth) {
1349
+ /*----------------------
1350
+ Equal Width
1351
+ -----------------------*/
1326
1352
 
1327
- .ui[class*="equal width"].grid > .column:not(.row),
1328
- .ui[class*="equal width"].grid > .row > .column,
1329
- .ui.grid > [class*="equal width"].row > .column {
1330
- display: inline-block;
1331
- flex-grow: 1;
1332
- }
1333
- .ui[class*="equal width"].grid > .wide.column,
1334
- .ui[class*="equal width"].grid > .row > .wide.column,
1335
- .ui.grid > [class*="equal width"].row > .wide.column {
1336
- flex-grow: 0;
1353
+ .ui[class*="equal width"].grid > .column:not(.row),
1354
+ .ui[class*="equal width"].grid > .row > .column,
1355
+ .ui.grid > [class*="equal width"].row > .column {
1356
+ display: inline-block;
1357
+ flex-grow: 1;
1358
+ }
1359
+ .ui[class*="equal width"].grid > .wide.column,
1360
+ .ui[class*="equal width"].grid > .row > .wide.column,
1361
+ .ui.grid > [class*="equal width"].row > .wide.column {
1362
+ flex-grow: 0;
1363
+ }
1337
1364
  }
1338
1365
 
1339
1366
  & when (@variationGridReversed) {
@@ -1478,12 +1505,15 @@ each(@colors, {
1478
1505
  }
1479
1506
  .ui.grid > .doubling.row > .column,
1480
1507
  .ui.doubling.grid > .row > .column {
1481
- display: inline-block !important;
1482
1508
  padding-top: (@rowSpacing / 2) !important;
1483
1509
  padding-bottom: (@rowSpacing / 2) !important;
1484
1510
  box-shadow: none !important;
1485
1511
  margin: 0;
1486
1512
  }
1513
+ .ui.grid:not(.stretched) > .doubling.row:not(.stretched) > .column:not(.stretched),
1514
+ .ui.doubling.grid:not(.stretched) > .row:not(.stretched) > .column:not(.stretched) {
1515
+ display: inline-block !important;
1516
+ }
1487
1517
  .ui[class*="two column"].doubling.grid > .row > .column,
1488
1518
  .ui[class*="two column"].doubling.grid > .column:not(.row),
1489
1519
  .ui.grid > [class*="two column"].doubling.row.row > .column {
@@ -1902,9 +1932,11 @@ each(@colors, {
1902
1932
  .ui.compact.relaxed.celled.grid > .row > .column {
1903
1933
  padding: @compactCelledRelaxedPadding;
1904
1934
  }
1905
- .ui.compact[class*="very relaxed"].celled.grid > .column:not(.row),
1906
- .ui.compact[class*="very relaxed"].celled.grid > .row > .column {
1907
- padding: @compactCelledVeryRelaxedPadding;
1935
+ & when (@variationGridVeryRelaxed) {
1936
+ .ui.compact[class*="very relaxed"].celled.grid > .column:not(.row),
1937
+ .ui.compact[class*="very relaxed"].celled.grid > .row > .column {
1938
+ padding: @compactCelledVeryRelaxedPadding;
1939
+ }
1908
1940
  }
1909
1941
  }
1910
1942
 
@@ -1912,43 +1944,47 @@ each(@colors, {
1912
1944
  Very compact
1913
1945
  -----------------*/
1914
1946
 
1915
- .ui.ui.ui[class*="very compact"].grid {
1916
- margin: -(@veryCompactGutterWidth / 2);
1917
- }
1947
+ & when (@variationGridVeryCompact) {
1948
+ .ui.ui.ui[class*="very compact"].grid {
1949
+ margin: -(@veryCompactGutterWidth / 2);
1950
+ }
1918
1951
 
1919
- .ui.ui.ui[class*="very compact"].grid > .column:not(.row),
1920
- .ui.ui.ui[class*="very compact"].grid > .row > .column {
1921
- padding-left: (@veryCompactGutterWidth / 2);
1922
- padding-right: (@veryCompactGutterWidth / 2);
1923
- }
1952
+ .ui.ui.ui[class*="very compact"].grid > .column:not(.row),
1953
+ .ui.ui.ui[class*="very compact"].grid > .row > .column {
1954
+ padding-left: (@veryCompactGutterWidth / 2);
1955
+ padding-right: (@veryCompactGutterWidth / 2);
1956
+ }
1924
1957
 
1925
- .ui.ui.ui[class*="very compact"].grid > * {
1926
- padding-left: (@veryCompactGutterWidth / 2);
1927
- padding-right: (@veryCompactGutterWidth / 2);
1928
- }
1958
+ .ui.ui.ui[class*="very compact"].grid > * {
1959
+ padding-left: (@veryCompactGutterWidth / 2);
1960
+ padding-right: (@veryCompactGutterWidth / 2);
1961
+ }
1929
1962
 
1930
- /* Row */
1931
- .ui.ui.ui[class*="very compact"].grid > .row {
1932
- padding-top: (@veryCompactRowSpacing / 2);
1933
- padding-bottom: (@veryCompactRowSpacing / 2);
1934
- padding-left: 0;
1935
- padding-right: 0;
1936
- }
1963
+ /* Row */
1964
+ .ui.ui.ui[class*="very compact"].grid > .row {
1965
+ padding-top: (@veryCompactRowSpacing / 2);
1966
+ padding-bottom: (@veryCompactRowSpacing / 2);
1967
+ padding-left: 0;
1968
+ padding-right: 0;
1969
+ }
1937
1970
 
1938
- /* Columns */
1939
- .ui.ui.ui[class*="very compact"].grid > .column:not(.row) {
1940
- padding-top: (@veryCompactRowSpacing / 2);
1941
- padding-bottom: (@veryCompactRowSpacing / 2);
1942
- }
1943
- & when (@variationGridRelaxed) and (@variationGridCelled) {
1944
- /* Relaxed + Celled */
1945
- .ui[class*="very compact"].relaxed.celled.grid > .column:not(.row),
1946
- .ui[class*="very compact"].relaxed.celled.grid > .row > .column {
1947
- padding: @veryCompactCelledRelaxedPadding;
1971
+ /* Columns */
1972
+ .ui.ui.ui[class*="very compact"].grid > .column:not(.row) {
1973
+ padding-top: (@veryCompactRowSpacing / 2);
1974
+ padding-bottom: (@veryCompactRowSpacing / 2);
1948
1975
  }
1949
- .ui[class*="very compact"][class*="very relaxed"].celled.grid > .column:not(.row),
1950
- .ui[class*="very compact"][class*="very relaxed"].celled.grid > .row > .column {
1951
- padding: @veryCompactCelledVeryRelaxedPadding;
1976
+ & when (@variationGridRelaxed) and (@variationGridCelled) {
1977
+ /* Relaxed + Celled */
1978
+ .ui[class*="very compact"].relaxed.celled.grid > .column:not(.row),
1979
+ .ui[class*="very compact"].relaxed.celled.grid > .row > .column {
1980
+ padding: @veryCompactCelledRelaxedPadding;
1981
+ }
1982
+ & when (@variationGridVeryRelaxed) {
1983
+ .ui[class*="very compact"][class*="very relaxed"].celled.grid > .column:not(.row),
1984
+ .ui[class*="very compact"][class*="very relaxed"].celled.grid > .row > .column {
1985
+ padding: @veryCompactCelledVeryRelaxedPadding;
1986
+ }
1987
+ }
1952
1988
  }
1953
1989
  }
1954
1990
  }