fomantic-ui 2.9.1-beta.3 → 2.9.1-beta.31

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 (540) hide show
  1. package/.eslint/eqeqeq-rule.js +18 -0
  2. package/.eslint/index.js +29 -0
  3. package/.eslint/no-extra-parens-rule.js +17 -0
  4. package/.eslint/package.json +11 -0
  5. package/.eslintrc.js +123 -0
  6. package/.github/workflows/ci.yml +37 -4
  7. package/.github/workflows/nightly.yml +1 -1
  8. package/.github/workflows/release.yml +1 -1
  9. package/.prettierrc.js +12 -0
  10. package/.stylelintrc.js +48 -0
  11. package/README.md +1 -1
  12. package/dist/components/accordion.css +35 -53
  13. package/dist/components/accordion.js +568 -595
  14. package/dist/components/accordion.min.css +2 -2
  15. package/dist/components/accordion.min.js +2 -2
  16. package/dist/components/ad.css +34 -45
  17. package/dist/components/ad.min.css +2 -2
  18. package/dist/components/api.js +1157 -1179
  19. package/dist/components/api.min.js +2 -2
  20. package/dist/components/breadcrumb.css +5 -5
  21. package/dist/components/breadcrumb.min.css +2 -2
  22. package/dist/components/button.css +709 -1121
  23. package/dist/components/button.min.css +2 -2
  24. package/dist/components/calendar.css +24 -27
  25. package/dist/components/calendar.js +1934 -1809
  26. package/dist/components/calendar.min.css +2 -2
  27. package/dist/components/calendar.min.js +2 -2
  28. package/dist/components/card.css +219 -365
  29. package/dist/components/card.min.css +2 -2
  30. package/dist/components/checkbox.css +119 -187
  31. package/dist/components/checkbox.js +842 -841
  32. package/dist/components/checkbox.min.css +2 -2
  33. package/dist/components/checkbox.min.js +2 -2
  34. package/dist/components/comment.css +41 -59
  35. package/dist/components/comment.min.css +2 -2
  36. package/dist/components/container.css +7 -6
  37. package/dist/components/container.min.css +2 -2
  38. package/dist/components/dimmer.css +53 -172
  39. package/dist/components/dimmer.js +706 -737
  40. package/dist/components/dimmer.min.css +2 -2
  41. package/dist/components/dimmer.min.js +2 -2
  42. package/dist/components/divider.css +43 -61
  43. package/dist/components/divider.min.css +2 -2
  44. package/dist/components/dropdown.css +252 -386
  45. package/dist/components/dropdown.js +4179 -4236
  46. package/dist/components/dropdown.min.css +2 -2
  47. package/dist/components/dropdown.min.js +2 -2
  48. package/dist/components/embed.css +18 -29
  49. package/dist/components/embed.js +645 -675
  50. package/dist/components/embed.min.css +2 -2
  51. package/dist/components/embed.min.js +2 -2
  52. package/dist/components/emoji.css +9 -9
  53. package/dist/components/emoji.min.css +1 -1
  54. package/dist/components/feed.css +35 -57
  55. package/dist/components/feed.min.css +2 -2
  56. package/dist/components/flag.css +6 -4
  57. package/dist/components/flag.min.css +2 -2
  58. package/dist/components/flyout.css +86 -141
  59. package/dist/components/flyout.js +1457 -1465
  60. package/dist/components/flyout.min.css +2 -2
  61. package/dist/components/flyout.min.js +2 -2
  62. package/dist/components/form.css +244 -339
  63. package/dist/components/form.js +2020 -2004
  64. package/dist/components/form.min.css +2 -2
  65. package/dist/components/form.min.js +2 -2
  66. package/dist/components/grid.css +172 -319
  67. package/dist/components/grid.min.css +2 -2
  68. package/dist/components/header.css +118 -142
  69. package/dist/components/header.min.css +2 -2
  70. package/dist/components/icon.css +660 -718
  71. package/dist/components/icon.min.css +2 -2
  72. package/dist/components/image.css +39 -63
  73. package/dist/components/image.min.css +2 -2
  74. package/dist/components/input.css +356 -274
  75. package/dist/components/input.min.css +2 -2
  76. package/dist/components/item.css +84 -131
  77. package/dist/components/item.min.css +2 -2
  78. package/dist/components/label.css +359 -410
  79. package/dist/components/label.min.css +2 -2
  80. package/dist/components/list.css +49 -70
  81. package/dist/components/list.min.css +2 -2
  82. package/dist/components/loader.css +67 -155
  83. package/dist/components/loader.min.css +2 -2
  84. package/dist/components/menu.css +269 -431
  85. package/dist/components/menu.min.css +1 -1
  86. package/dist/components/message.css +125 -197
  87. package/dist/components/message.min.css +2 -2
  88. package/dist/components/modal.css +119 -154
  89. package/dist/components/modal.js +1488 -1486
  90. package/dist/components/modal.min.css +2 -2
  91. package/dist/components/modal.min.js +2 -2
  92. package/dist/components/nag.css +53 -63
  93. package/dist/components/nag.js +520 -526
  94. package/dist/components/nag.min.css +2 -2
  95. package/dist/components/nag.min.js +2 -2
  96. package/dist/components/placeholder.css +22 -42
  97. package/dist/components/placeholder.min.css +2 -2
  98. package/dist/components/popup.css +423 -201
  99. package/dist/components/popup.js +1454 -1456
  100. package/dist/components/popup.min.css +2 -2
  101. package/dist/components/popup.min.js +2 -2
  102. package/dist/components/progress.css +106 -211
  103. package/dist/components/progress.js +969 -997
  104. package/dist/components/progress.min.css +2 -2
  105. package/dist/components/progress.min.js +2 -2
  106. package/dist/components/rail.css +15 -20
  107. package/dist/components/rail.min.css +1 -1
  108. package/dist/components/rating.css +80 -121
  109. package/dist/components/rating.js +505 -523
  110. package/dist/components/rating.min.css +2 -2
  111. package/dist/components/rating.min.js +2 -2
  112. package/dist/components/reset.css +8 -13
  113. package/dist/components/reset.min.css +2 -2
  114. package/dist/components/reveal.css +44 -83
  115. package/dist/components/reveal.min.css +2 -2
  116. package/dist/components/search.css +69 -98
  117. package/dist/components/search.js +1493 -1534
  118. package/dist/components/search.min.css +2 -2
  119. package/dist/components/search.min.js +2 -2
  120. package/dist/components/segment.css +148 -224
  121. package/dist/components/segment.min.css +2 -2
  122. package/dist/components/shape.css +14 -30
  123. package/dist/components/shape.js +781 -810
  124. package/dist/components/shape.min.css +2 -2
  125. package/dist/components/shape.min.js +2 -2
  126. package/dist/components/sidebar.css +103 -206
  127. package/dist/components/sidebar.js +1061 -1099
  128. package/dist/components/sidebar.min.css +2 -2
  129. package/dist/components/sidebar.min.js +2 -2
  130. package/dist/components/site.css +28 -41
  131. package/dist/components/site.js +436 -476
  132. package/dist/components/site.min.css +2 -2
  133. package/dist/components/site.min.js +2 -2
  134. package/dist/components/slider.css +93 -121
  135. package/dist/components/slider.js +1310 -1311
  136. package/dist/components/slider.min.css +1 -1
  137. package/dist/components/slider.min.js +2 -2
  138. package/dist/components/state.js +639 -657
  139. package/dist/components/state.min.js +2 -2
  140. package/dist/components/statistic.css +75 -116
  141. package/dist/components/statistic.min.css +2 -2
  142. package/dist/components/step.css +77 -150
  143. package/dist/components/step.min.css +2 -2
  144. package/dist/components/sticky.css +1 -5
  145. package/dist/components/sticky.js +848 -901
  146. package/dist/components/sticky.min.css +2 -2
  147. package/dist/components/sticky.min.js +2 -2
  148. package/dist/components/tab.css +10 -14
  149. package/dist/components/tab.js +922 -965
  150. package/dist/components/tab.min.css +2 -2
  151. package/dist/components/tab.min.js +2 -2
  152. package/dist/components/table.css +547 -774
  153. package/dist/components/table.min.css +2 -2
  154. package/dist/components/text.css +32 -32
  155. package/dist/components/text.min.css +1 -1
  156. package/dist/components/toast.css +69 -147
  157. package/dist/components/toast.js +910 -884
  158. package/dist/components/toast.min.css +2 -2
  159. package/dist/components/toast.min.js +2 -2
  160. package/dist/components/transition.css +369 -1280
  161. package/dist/components/transition.js +1047 -1077
  162. package/dist/components/transition.min.css +2 -2
  163. package/dist/components/transition.min.js +2 -2
  164. package/dist/components/visibility.js +1213 -1245
  165. package/dist/components/visibility.min.js +2 -2
  166. package/dist/semantic.css +5637 -8398
  167. package/dist/semantic.js +29021 -29405
  168. package/dist/semantic.min.css +2 -2
  169. package/dist/semantic.min.js +2 -2
  170. package/dist/themes/basic/assets/fonts/icons.woff2 +0 -0
  171. package/dist/themes/default/assets/fonts/Lato-Bold.woff +0 -0
  172. package/dist/themes/default/assets/fonts/Lato-Bold.woff2 +0 -0
  173. package/dist/themes/default/assets/fonts/Lato-BoldItalic.woff +0 -0
  174. package/dist/themes/default/assets/fonts/Lato-BoldItalic.woff2 +0 -0
  175. package/dist/themes/default/assets/fonts/Lato-Italic.woff +0 -0
  176. package/dist/themes/default/assets/fonts/Lato-Italic.woff2 +0 -0
  177. package/dist/themes/default/assets/fonts/Lato-Regular.woff +0 -0
  178. package/dist/themes/default/assets/fonts/Lato-Regular.woff2 +0 -0
  179. package/dist/themes/default/assets/fonts/LatoLatin-Bold.woff +0 -0
  180. package/dist/themes/default/assets/fonts/LatoLatin-Bold.woff2 +0 -0
  181. package/dist/themes/default/assets/fonts/LatoLatin-BoldItalic.woff +0 -0
  182. package/dist/themes/default/assets/fonts/LatoLatin-BoldItalic.woff2 +0 -0
  183. package/dist/themes/default/assets/fonts/LatoLatin-Italic.woff +0 -0
  184. package/dist/themes/default/assets/fonts/LatoLatin-Italic.woff2 +0 -0
  185. package/dist/themes/default/assets/fonts/LatoLatin-Regular.woff +0 -0
  186. package/dist/themes/default/assets/fonts/LatoLatin-Regular.woff2 +0 -0
  187. package/dist/themes/github/assets/fonts/octicons.woff2 +0 -0
  188. package/examples/.eslintrc.js +6 -0
  189. package/examples/assets/show-examples.js +13 -13
  190. package/examples/components/sticky-context.html +1 -1
  191. package/examples/fixed.html +2 -2
  192. package/examples/grid.html +4 -4
  193. package/examples/login.html +1 -1
  194. package/examples/responsive.html +1 -1
  195. package/examples/sticky.html +3 -3
  196. package/gulpfile.js +13 -11
  197. package/package.json +18 -11
  198. package/scripts/nightly-version.js +83 -75
  199. package/src/_site/collections/menu.overrides +1 -1
  200. package/src/_site/elements/flag.variables +2 -2
  201. package/src/_site/globals/site.variables +1 -1
  202. package/src/_site/modules/embed.variables +3 -0
  203. package/src/definitions/behaviors/api.js +1158 -1180
  204. package/src/definitions/behaviors/form.js +2019 -2003
  205. package/src/definitions/behaviors/state.js +645 -663
  206. package/src/definitions/behaviors/visibility.js +1212 -1244
  207. package/src/definitions/collections/breadcrumb.less +43 -47
  208. package/src/definitions/collections/form.less +866 -884
  209. package/src/definitions/collections/grid.less +1680 -1699
  210. package/src/definitions/collections/menu.less +1521 -1544
  211. package/src/definitions/collections/message.less +294 -298
  212. package/src/definitions/collections/table.less +1657 -1661
  213. package/src/definitions/elements/button.less +1714 -1756
  214. package/src/definitions/elements/container.less +211 -211
  215. package/src/definitions/elements/divider.less +198 -211
  216. package/src/definitions/elements/emoji.less +41 -48
  217. package/src/definitions/elements/flag.less +46 -48
  218. package/src/definitions/elements/header.less +351 -359
  219. package/src/definitions/elements/icon.less +541 -484
  220. package/src/definitions/elements/image.less +216 -227
  221. package/src/definitions/elements/input.less +692 -698
  222. package/src/definitions/elements/label.less +784 -806
  223. package/src/definitions/elements/list.less +810 -814
  224. package/src/definitions/elements/loader.less +273 -268
  225. package/src/definitions/elements/placeholder.less +173 -170
  226. package/src/definitions/elements/rail.less +93 -93
  227. package/src/definitions/elements/reveal.less +192 -198
  228. package/src/definitions/elements/segment.less +742 -749
  229. package/src/definitions/elements/step.less +423 -437
  230. package/src/definitions/elements/text.less +34 -36
  231. package/src/definitions/globals/reset.less +11 -8
  232. package/src/definitions/globals/site.js +435 -475
  233. package/src/definitions/globals/site.less +108 -110
  234. package/src/definitions/modules/accordion.js +567 -594
  235. package/src/definitions/modules/accordion.less +244 -248
  236. package/src/definitions/modules/calendar.js +1933 -1808
  237. package/src/definitions/modules/calendar.less +100 -97
  238. package/src/definitions/modules/checkbox.js +841 -840
  239. package/src/definitions/modules/checkbox.less +531 -552
  240. package/src/definitions/modules/dimmer.js +705 -736
  241. package/src/definitions/modules/dimmer.less +294 -305
  242. package/src/definitions/modules/dropdown.js +4178 -4235
  243. package/src/definitions/modules/dropdown.less +1568 -1598
  244. package/src/definitions/modules/embed.js +644 -674
  245. package/src/definitions/modules/embed.less +82 -84
  246. package/src/definitions/modules/flyout.js +1456 -1464
  247. package/src/definitions/modules/flyout.less +445 -456
  248. package/src/definitions/modules/modal.js +1487 -1485
  249. package/src/definitions/modules/modal.less +458 -467
  250. package/src/definitions/modules/nag.js +519 -525
  251. package/src/definitions/modules/nag.less +136 -149
  252. package/src/definitions/modules/popup.js +1453 -1455
  253. package/src/definitions/modules/popup.less +737 -692
  254. package/src/definitions/modules/progress.js +968 -996
  255. package/src/definitions/modules/progress.less +523 -499
  256. package/src/definitions/modules/rating.js +504 -522
  257. package/src/definitions/modules/rating.less +98 -103
  258. package/src/definitions/modules/search.js +1492 -1533
  259. package/src/definitions/modules/search.less +374 -394
  260. package/src/definitions/modules/shape.js +780 -809
  261. package/src/definitions/modules/shape.less +70 -79
  262. package/src/definitions/modules/sidebar.js +1060 -1098
  263. package/src/definitions/modules/sidebar.less +463 -476
  264. package/src/definitions/modules/slider.js +1309 -1310
  265. package/src/definitions/modules/slider.less +309 -310
  266. package/src/definitions/modules/sticky.js +864 -917
  267. package/src/definitions/modules/sticky.less +17 -25
  268. package/src/definitions/modules/tab.js +921 -964
  269. package/src/definitions/modules/tab.less +48 -54
  270. package/src/definitions/modules/toast.js +909 -883
  271. package/src/definitions/modules/toast.less +589 -589
  272. package/src/definitions/modules/transition.js +1046 -1076
  273. package/src/definitions/modules/transition.less +65 -31
  274. package/src/definitions/views/ad.less +207 -208
  275. package/src/definitions/views/card.less +955 -973
  276. package/src/definitions/views/comment.less +192 -200
  277. package/src/definitions/views/feed.less +222 -226
  278. package/src/definitions/views/item.less +437 -448
  279. package/src/definitions/views/statistic.less +273 -279
  280. package/src/semantic.less +8 -6
  281. package/src/theme.config.example +53 -53
  282. package/src/theme.less +44 -35
  283. package/src/themes/amazon/elements/button.overrides +23 -24
  284. package/src/themes/amazon/elements/button.variables +18 -23
  285. package/src/themes/amazon/globals/site.variables +16 -17
  286. package/src/themes/basic/assets/fonts/icons.woff2 +0 -0
  287. package/src/themes/basic/collections/table.overrides +0 -1
  288. package/src/themes/basic/collections/table.variables +3 -3
  289. package/src/themes/basic/elements/button.overrides +0 -1
  290. package/src/themes/basic/elements/button.variables +9 -9
  291. package/src/themes/basic/elements/icon.overrides +9 -169
  292. package/src/themes/basic/elements/icon.variables +161 -18
  293. package/src/themes/basic/elements/step.overrides +2 -2
  294. package/src/themes/basic/elements/step.variables +2 -2
  295. package/src/themes/basic/globals/reset.overrides +1 -1
  296. package/src/themes/basic/globals/reset.variables +1 -1
  297. package/src/themes/basic/modules/progress.variables +2 -2
  298. package/src/themes/basic/views/card.overrides +0 -1
  299. package/src/themes/basic/views/card.variables +6 -6
  300. package/src/themes/bookish/elements/header.overrides +4 -4
  301. package/src/themes/bookish/elements/header.variables +5 -5
  302. package/src/themes/bootstrap3/elements/button.overrides +3 -0
  303. package/src/themes/bootstrap3/elements/button.variables +20 -25
  304. package/src/themes/chubby/collections/form.overrides +9 -9
  305. package/src/themes/chubby/collections/form.variables +3 -3
  306. package/src/themes/chubby/collections/menu.overrides +3 -0
  307. package/src/themes/chubby/collections/menu.variables +3 -3
  308. package/src/themes/chubby/elements/button.overrides +8 -10
  309. package/src/themes/chubby/elements/button.variables +10 -10
  310. package/src/themes/chubby/elements/header.overrides +1 -1
  311. package/src/themes/chubby/elements/header.variables +4 -4
  312. package/src/themes/chubby/modules/accordion.overrides +2 -2
  313. package/src/themes/chubby/modules/accordion.variables +4 -4
  314. package/src/themes/chubby/views/comment.overrides +5 -5
  315. package/src/themes/chubby/views/comment.variables +11 -11
  316. package/src/themes/classic/collections/table.variables +3 -3
  317. package/src/themes/classic/elements/button.variables +36 -43
  318. package/src/themes/classic/elements/header.variables +4 -4
  319. package/src/themes/classic/modules/progress.variables +3 -3
  320. package/src/themes/classic/views/card.overrides +25 -27
  321. package/src/themes/classic/views/card.variables +7 -7
  322. package/src/themes/colored/modules/checkbox.overrides +3 -0
  323. package/src/themes/colored/modules/checkbox.variables +1 -3
  324. package/src/themes/default/assets/fonts/Lato-Bold.woff +0 -0
  325. package/src/themes/default/assets/fonts/Lato-Bold.woff2 +0 -0
  326. package/src/themes/default/assets/fonts/Lato-BoldItalic.woff +0 -0
  327. package/src/themes/default/assets/fonts/Lato-BoldItalic.woff2 +0 -0
  328. package/src/themes/default/assets/fonts/Lato-Italic.woff +0 -0
  329. package/src/themes/default/assets/fonts/Lato-Italic.woff2 +0 -0
  330. package/src/themes/default/assets/fonts/Lato-Regular.woff +0 -0
  331. package/src/themes/default/assets/fonts/Lato-Regular.woff2 +0 -0
  332. package/src/themes/default/assets/fonts/LatoLatin-Bold.woff +0 -0
  333. package/src/themes/default/assets/fonts/LatoLatin-Bold.woff2 +0 -0
  334. package/src/themes/default/assets/fonts/LatoLatin-BoldItalic.woff +0 -0
  335. package/src/themes/default/assets/fonts/LatoLatin-BoldItalic.woff2 +0 -0
  336. package/src/themes/default/assets/fonts/LatoLatin-Italic.woff +0 -0
  337. package/src/themes/default/assets/fonts/LatoLatin-Italic.woff2 +0 -0
  338. package/src/themes/default/assets/fonts/LatoLatin-Regular.woff +0 -0
  339. package/src/themes/default/assets/fonts/LatoLatin-Regular.woff2 +0 -0
  340. package/src/themes/default/collections/breadcrumb.variables +4 -4
  341. package/src/themes/default/collections/form.variables +15 -16
  342. package/src/themes/default/collections/grid.overrides +0 -1
  343. package/src/themes/default/collections/grid.variables +14 -16
  344. package/src/themes/default/collections/menu.variables +31 -45
  345. package/src/themes/default/collections/message.variables +84 -123
  346. package/src/themes/default/collections/table.overrides +3 -0
  347. package/src/themes/default/collections/table.variables +30 -34
  348. package/src/themes/default/elements/button.variables +45 -52
  349. package/src/themes/default/elements/container.variables +8 -16
  350. package/src/themes/default/elements/divider.overrides +8 -9
  351. package/src/themes/default/elements/divider.variables +5 -6
  352. package/src/themes/default/elements/emoji.overrides +0 -1
  353. package/src/themes/default/elements/emoji.variables +3555 -3555
  354. package/src/themes/default/elements/flag.variables +1594 -1594
  355. package/src/themes/default/elements/header.overrides +0 -1
  356. package/src/themes/default/elements/header.variables +21 -21
  357. package/src/themes/default/elements/icon.variables +2023 -2009
  358. package/src/themes/default/elements/image.variables +6 -7
  359. package/src/themes/default/elements/input.variables +11 -12
  360. package/src/themes/default/elements/label.variables +25 -26
  361. package/src/themes/default/elements/list.variables +17 -21
  362. package/src/themes/default/elements/loader.variables +16 -17
  363. package/src/themes/default/elements/placeholder.variables +12 -9
  364. package/src/themes/default/elements/rail.variables +4 -5
  365. package/src/themes/default/elements/reveal.variables +1 -1
  366. package/src/themes/default/elements/segment.variables +24 -36
  367. package/src/themes/default/elements/step.overrides +4 -4
  368. package/src/themes/default/elements/step.variables +19 -22
  369. package/src/themes/default/elements/text.variables +2 -3
  370. package/src/themes/default/globals/colors.less +588 -588
  371. package/src/themes/default/globals/reset.overrides +63 -59
  372. package/src/themes/default/globals/reset.variables +1 -1
  373. package/src/themes/default/globals/site.variables +1075 -1123
  374. package/src/themes/default/globals/variation.variables +13 -4
  375. package/src/themes/default/modules/accordion.overrides +11 -11
  376. package/src/themes/default/modules/accordion.variables +15 -20
  377. package/src/themes/default/modules/calendar.variables +2 -0
  378. package/src/themes/default/modules/chatroom.variables +1 -1
  379. package/src/themes/default/modules/checkbox.overrides +8 -9
  380. package/src/themes/default/modules/checkbox.variables +24 -33
  381. package/src/themes/default/modules/dimmer.variables +14 -17
  382. package/src/themes/default/modules/dropdown.overrides +17 -17
  383. package/src/themes/default/modules/dropdown.variables +29 -31
  384. package/src/themes/default/modules/embed.variables +9 -13
  385. package/src/themes/default/modules/flyout.variables +8 -8
  386. package/src/themes/default/modules/modal.variables +64 -67
  387. package/src/themes/default/modules/nag.variables +11 -14
  388. package/src/themes/default/modules/popup.variables +14 -13
  389. package/src/themes/default/modules/progress.variables +17 -19
  390. package/src/themes/default/modules/rating.variables +10 -12
  391. package/src/themes/default/modules/search.variables +12 -17
  392. package/src/themes/default/modules/shape.variables +7 -8
  393. package/src/themes/default/modules/sidebar.variables +4 -4
  394. package/src/themes/default/modules/slider.variables +55 -54
  395. package/src/themes/default/modules/sticky.variables +1 -1
  396. package/src/themes/default/modules/toast.variables +8 -8
  397. package/src/themes/default/modules/transition.overrides +936 -915
  398. package/src/themes/default/modules/transition.variables +8 -1
  399. package/src/themes/default/views/ad.variables +1 -1
  400. package/src/themes/default/views/card.variables +33 -45
  401. package/src/themes/default/views/comment.variables +7 -9
  402. package/src/themes/default/views/feed.variables +10 -10
  403. package/src/themes/default/views/item.variables +20 -23
  404. package/src/themes/default/views/statistic.variables +8 -8
  405. package/src/themes/duo/elements/loader.variables +1 -1
  406. package/src/themes/famfamfam/elements/flag.overrides +263 -268
  407. package/src/themes/famfamfam/elements/flag.variables +4 -4
  408. package/src/themes/fixed-width/collections/grid.variables +4 -4
  409. package/src/themes/fixed-width/modules/modal.variables +11 -13
  410. package/src/themes/flat/collections/form.overrides +9 -9
  411. package/src/themes/flat/collections/form.variables +16 -17
  412. package/src/themes/flat/globals/site.variables +69 -74
  413. package/src/themes/github/assets/fonts/octicons.woff2 +0 -0
  414. package/src/themes/github/collections/breadcrumb.variables +0 -1
  415. package/src/themes/github/collections/form.overrides +7 -8
  416. package/src/themes/github/collections/form.variables +16 -18
  417. package/src/themes/github/collections/grid.variables +1 -2
  418. package/src/themes/github/collections/menu.overrides +2 -2
  419. package/src/themes/github/collections/menu.variables +24 -26
  420. package/src/themes/github/collections/message.overrides +3 -3
  421. package/src/themes/github/collections/message.variables +12 -14
  422. package/src/themes/github/collections/table.variables +2 -2
  423. package/src/themes/github/elements/button.overrides +0 -1
  424. package/src/themes/github/elements/button.variables +26 -30
  425. package/src/themes/github/elements/header.variables +2 -2
  426. package/src/themes/github/elements/icon.overrides +3 -208
  427. package/src/themes/github/elements/icon.variables +234 -19
  428. package/src/themes/github/elements/image.variables +1 -1
  429. package/src/themes/github/elements/input.overrides +16 -16
  430. package/src/themes/github/elements/input.variables +4 -5
  431. package/src/themes/github/elements/label.overrides +3 -3
  432. package/src/themes/github/elements/label.variables +0 -1
  433. package/src/themes/github/elements/segment.variables +9 -10
  434. package/src/themes/github/elements/step.overrides +13 -13
  435. package/src/themes/github/elements/step.variables +6 -6
  436. package/src/themes/github/globals/site.variables +16 -16
  437. package/src/themes/github/modules/dropdown.overrides +18 -19
  438. package/src/themes/github/modules/dropdown.variables +8 -10
  439. package/src/themes/github/modules/popup.variables +0 -2
  440. package/src/themes/gmail/collections/message.overrides +3 -0
  441. package/src/themes/gmail/collections/message.variables +4 -4
  442. package/src/themes/instagram/views/card.overrides +4 -5
  443. package/src/themes/instagram/views/card.variables +7 -8
  444. package/src/themes/joypixels/elements/emoji.overrides +0 -2
  445. package/src/themes/joypixels/elements/emoji.variables +3554 -3554
  446. package/src/themes/material/collections/menu.overrides +1 -1
  447. package/src/themes/material/collections/menu.variables +4 -4
  448. package/src/themes/material/elements/button.overrides +7 -9
  449. package/src/themes/material/elements/button.variables +44 -46
  450. package/src/themes/material/elements/header.overrides +3 -3
  451. package/src/themes/material/elements/header.variables +8 -10
  452. package/src/themes/material/elements/icon.overrides +3 -934
  453. package/src/themes/material/elements/icon.variables +958 -18
  454. package/src/themes/material/globals/site.overrides +3 -0
  455. package/src/themes/material/globals/site.variables +83 -84
  456. package/src/themes/material/modules/dropdown.overrides +2 -2
  457. package/src/themes/material/modules/dropdown.variables +5 -5
  458. package/src/themes/material/modules/modal.overrides +3 -3
  459. package/src/themes/material/modules/modal.variables +4 -5
  460. package/src/themes/pulsar/elements/loader.overrides +23 -61
  461. package/src/themes/raised/elements/button.variables +8 -9
  462. package/src/themes/resetcss/globals/reset.overrides +115 -33
  463. package/src/themes/resetcss/globals/reset.variables +1 -1
  464. package/src/themes/round/elements/button.overrides +3 -0
  465. package/src/themes/round/elements/button.variables +33 -38
  466. package/src/themes/rtl/globals/site.overrides +1 -1
  467. package/src/themes/rtl/globals/site.variables +5 -6
  468. package/src/themes/striped/modules/progress.overrides +20 -16
  469. package/src/themes/systemfont/globals/reset.overrides +1 -1
  470. package/src/themes/systemfont/globals/site.variables +6 -6
  471. package/src/themes/timeline/views/feed.overrides +12 -12
  472. package/src/themes/timeline/views/feed.variables +8 -8
  473. package/src/themes/twitter/elements/button.overrides +4 -5
  474. package/src/themes/twitter/elements/button.variables +17 -18
  475. package/src/themes/twitter/elements/emoji.variables +3555 -3555
  476. package/tasks/.eslintrc.js +9 -0
  477. package/tasks/README.md +2 -4
  478. package/tasks/admin/components/create.js +268 -277
  479. package/tasks/admin/components/init.js +123 -129
  480. package/tasks/admin/components/update.js +151 -158
  481. package/tasks/admin/distributions/create.js +183 -189
  482. package/tasks/admin/distributions/init.js +125 -131
  483. package/tasks/admin/distributions/update.js +147 -153
  484. package/tasks/admin/publish.js +5 -9
  485. package/tasks/admin/register.js +37 -39
  486. package/tasks/admin/release.js +8 -12
  487. package/tasks/build/assets.js +43 -40
  488. package/tasks/build/css.js +230 -217
  489. package/tasks/build/javascript.js +120 -114
  490. package/tasks/build.js +11 -11
  491. package/tasks/check-install.js +15 -17
  492. package/tasks/clean.js +6 -6
  493. package/tasks/collections/README.md +3 -5
  494. package/tasks/collections/admin.js +34 -36
  495. package/tasks/collections/build.js +18 -21
  496. package/tasks/collections/docs.js +10 -13
  497. package/tasks/collections/install.js +10 -13
  498. package/tasks/collections/rtl.js +8 -12
  499. package/tasks/collections/various.js +9 -12
  500. package/tasks/config/admin/github.js +17 -19
  501. package/tasks/config/admin/oauth.example.js +4 -4
  502. package/tasks/config/admin/release.js +98 -98
  503. package/tasks/config/admin/templates/README.md +8 -8
  504. package/tasks/config/admin/templates/bower.json +3 -2
  505. package/tasks/config/admin/templates/component-package.js +9 -10
  506. package/tasks/config/admin/templates/css-package.js +19 -21
  507. package/tasks/config/admin/templates/less-package.js +12 -14
  508. package/tasks/config/admin/templates/package.json +5 -5
  509. package/tasks/config/defaults.js +116 -116
  510. package/tasks/config/docs.js +23 -23
  511. package/tasks/config/npm/gulpfile.js +15 -14
  512. package/tasks/config/project/config.js +124 -136
  513. package/tasks/config/project/install.js +722 -719
  514. package/tasks/config/project/release.js +34 -41
  515. package/tasks/config/tasks.js +168 -167
  516. package/tasks/config/user.js +28 -29
  517. package/tasks/docs/build.js +100 -96
  518. package/tasks/docs/metadata.js +91 -98
  519. package/tasks/docs/serve.js +84 -82
  520. package/tasks/install.js +373 -382
  521. package/tasks/rtl/build.js +3 -3
  522. package/tasks/rtl/watch.js +4 -3
  523. package/tasks/version.js +4 -6
  524. package/tasks/watch.js +29 -31
  525. package/test/.eslintrc.js +23 -0
  526. package/test/meteor/assets.js +11 -14
  527. package/test/meteor/fonts.js +12 -13
  528. package/test/modules/accordion.spec.js +6 -8
  529. package/test/modules/checkbox.spec.js +5 -7
  530. package/test/modules/dropdown.spec.js +5 -7
  531. package/test/modules/modal.spec.js +6 -8
  532. package/test/modules/module.spec.js +158 -178
  533. package/test/modules/popup.spec.js +5 -7
  534. package/test/modules/search.spec.js +5 -7
  535. package/test/modules/shape.spec.js +5 -7
  536. package/test/modules/sidebar.spec.js +5 -7
  537. package/test/modules/tab.spec.js +6 -8
  538. package/test/modules/transition.spec.js +5 -7
  539. package/test/modules/video.spec.js +5 -7
  540. package/.github/workflows/codeql.yml +0 -68
@@ -12,144 +12,137 @@
12
12
  Theme
13
13
  *******************************/
14
14
 
15
- @type : 'collection';
16
- @element : 'grid';
15
+ @type: "collection";
16
+ @element: "grid";
17
17
 
18
- @import (multiple) '../../theme.config';
18
+ @import (multiple) "../../theme.config";
19
19
 
20
20
  /*******************************
21
21
  Standard
22
22
  *******************************/
23
23
 
24
24
  .ui.grid {
25
- display: flex;
26
- flex-direction: row;
27
- flex-wrap: wrap;
28
- align-items: stretch;
29
- padding: 0;
25
+ display: flex;
26
+ flex-flow: row wrap;
27
+ align-items: stretch;
28
+ padding: 0;
30
29
  }
31
30
 
32
- /*----------------------
31
+ /* ----------------------
33
32
  Remove Gutters
34
- -----------------------*/
33
+ ----------------------- */
35
34
 
36
35
  .ui.grid {
37
- margin-top: -(@rowSpacing / 2);
38
- margin-bottom: -(@rowSpacing / 2);
39
- margin-left: -(@gutterWidth / 2);
40
- margin-right: -(@gutterWidth / 2);
36
+ margin: -(@rowSpacing / 2) -(@gutterWidth / 2);
41
37
  }
42
38
  & 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);
39
+ .ui.relaxed.grid {
40
+ margin-left: -(@relaxedGutterWidth / 2);
41
+ margin-right: -(@relaxedGutterWidth / 2);
42
+ }
43
+ & when (@variationGridVeryRelaxed) {
44
+ .ui[class*="very relaxed"].grid {
45
+ margin-left: -(@veryRelaxedGutterWidth / 2);
46
+ margin-right: -(@veryRelaxedGutterWidth / 2);
47
+ }
51
48
  }
52
- }
53
49
  }
54
50
 
55
-
56
51
  /* Preserve Rows Spacing on Consecutive Grids */
57
52
  .ui.grid + .grid {
58
- margin-top: @consecutiveGridDistance;
53
+ margin-top: @consecutiveGridDistance;
59
54
  }
60
55
 
61
- /*-------------------
56
+ /* -------------------
62
57
  Columns
63
- --------------------*/
58
+ -------------------- */
64
59
 
65
60
  /* Standard 16 column */
66
61
  .ui.grid > .column:not(.row),
67
62
  .ui.grid > .row > .column {
68
- position: relative;
69
- display: inline-block;
70
-
71
- width: @oneWide;
72
- padding-left: (@gutterWidth / 2);
73
- padding-right: (@gutterWidth / 2);
74
- vertical-align: top;
63
+ position: relative;
64
+ display: inline-block;
65
+ width: @oneWide;
66
+ padding-left: (@gutterWidth / 2);
67
+ padding-right: (@gutterWidth / 2);
68
+ vertical-align: top;
75
69
  }
76
70
 
77
71
  .ui.grid > * {
78
- padding-left: (@gutterWidth / 2);
79
- padding-right: (@gutterWidth / 2);
72
+ padding-left: (@gutterWidth / 2);
73
+ padding-right: (@gutterWidth / 2);
80
74
  }
81
75
 
82
- /*-------------------
76
+ /* -------------------
83
77
  Rows
84
- --------------------*/
78
+ -------------------- */
85
79
 
86
80
  .ui.grid > .row {
87
- position: relative;
88
- display: flex;
89
- flex-direction: row;
90
- flex-wrap: wrap;
91
- justify-content: inherit;
92
- align-items: stretch;
93
- width: 100% !important;
94
- padding: 0;
95
- padding-top: (@rowSpacing / 2);
96
- padding-bottom: (@rowSpacing / 2);
97
- }
98
-
99
- /*-------------------
81
+ position: relative;
82
+ display: flex;
83
+ flex-flow: row wrap;
84
+ justify-content: inherit;
85
+ align-items: stretch;
86
+ width: 100% !important;
87
+ padding: 0;
88
+ padding-top: (@rowSpacing / 2);
89
+ padding-bottom: (@rowSpacing / 2);
90
+ }
91
+
92
+ /* -------------------
100
93
  Columns
101
- --------------------*/
94
+ -------------------- */
102
95
 
103
96
  /* Vertical padding when no rows */
104
97
  .ui.grid > .column:not(.row) {
105
- padding-top: (@rowSpacing / 2);
106
- padding-bottom: (@rowSpacing / 2);
98
+ padding-top: (@rowSpacing / 2);
99
+ padding-bottom: (@rowSpacing / 2);
107
100
  }
108
101
  .ui.grid > .row > .column {
109
- margin-top: 0;
110
- margin-bottom: 0;
102
+ margin-top: 0;
103
+ margin-bottom: 0;
111
104
  }
112
105
 
113
- /*-------------------
106
+ /* -------------------
114
107
  Content
115
- --------------------*/
108
+ -------------------- */
116
109
 
117
110
  .ui.grid > .row > img,
118
111
  .ui.grid > .row > .column > img {
119
- max-width: @columnMaxImageWidth;
112
+ max-width: @columnMaxImageWidth;
120
113
  }
121
114
 
122
- /*-------------------
115
+ /* -------------------
123
116
  Loose Coupling
124
- --------------------*/
117
+ -------------------- */
125
118
 
126
119
  /* Collapse Margin on Consecutive Grid */
127
120
  .ui.grid > .ui.grid:first-child {
128
- margin-top: 0;
121
+ margin-top: 0;
129
122
  }
130
123
  .ui.grid > .ui.grid:last-child {
131
- margin-bottom: 0;
124
+ margin-bottom: 0;
132
125
  }
133
126
 
134
127
  /* Segment inside Aligned Grid */
135
128
  .ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached),
136
129
  .ui.aligned.grid .column > .segment:not(.compact):not(.attached) {
137
- width: 100%;
130
+ width: 100%;
138
131
  }
139
132
 
140
133
  /* Align Dividers with Gutter */
141
134
  .ui.grid .row + .ui.divider {
142
- flex-grow: 1;
143
- margin: (@rowSpacing / 2) (@gutterWidth / 2);
135
+ flex-grow: 1;
136
+ margin: (@rowSpacing / 2) (@gutterWidth / 2);
144
137
  }
145
138
  .ui.grid .column + .ui.vertical.divider {
146
- height: e(%("calc(50%% - %d)", (@rowSpacing / 2)));
139
+ height: e(%("calc(50%% - %d)", (@rowSpacing / 2)));
147
140
  }
148
141
 
149
142
  /* Remove Border on Last Horizontal Segment */
150
143
  .ui.grid > .row > .column:last-child > .horizontal.segment,
151
144
  .ui.grid > .column:last-child > .horizontal.segment {
152
- box-shadow: none;
145
+ box-shadow: none;
153
146
  }
154
147
 
155
148
  /*******************************
@@ -157,1837 +150,1825 @@
157
150
  *******************************/
158
151
 
159
152
  & when (@variationGridPage) {
160
- /*-----------------------
161
- Page Grid
162
- -------------------------*/
163
-
164
- @media only screen and (max-width: @largestMobileScreen) {
165
- .ui.page.grid {
166
- width: @mobileWidth;
167
- padding-left: @mobileGutter;
168
- padding-right: @mobileGutter;
169
- margin-left: 0;
170
- margin-right: 0;
171
- }
172
- }
173
- @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
174
- .ui.page.grid {
175
- width: @tabletWidth;
176
- margin-left: @tabletMargin;
177
- margin-right: @tabletMargin;
178
- padding-left: @tabletGutter;
179
- padding-right: @tabletGutter;
180
- }
181
- }
182
- @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
183
- .ui.page.grid {
184
- width: @computerWidth;
185
- margin-left: @computerMargin;
186
- margin-right: @computerMargin;
187
- padding-left: @computerGutter;
188
- padding-right: @computerGutter;
189
- }
190
- }
191
- @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
192
- .ui.page.grid {
193
- width: @largeMonitorWidth;
194
- margin-left: @largeMonitorMargin;
195
- margin-right: @largeMonitorMargin;
196
- padding-left: @largeMonitorGutter;
197
- padding-right: @largeMonitorGutter;
198
- }
199
- }
200
- @media only screen and (min-width: @widescreenMonitorBreakpoint) {
201
- .ui.page.grid {
202
- width: @widescreenMonitorWidth;
203
- margin-left: @widescreenMargin;
204
- margin-right: @widescreenMargin;
205
- padding-left: @widescreenMonitorGutter;
206
- padding-right: @widescreenMonitorGutter;
207
- }
208
- }
209
- }
210
-
211
-
212
- /*-------------------
153
+ /* -----------------------
154
+ Page Grid
155
+ ------------------------- */
156
+
157
+ @media only screen and (max-width: @largestMobileScreen) {
158
+ .ui.page.grid {
159
+ width: @mobileWidth;
160
+ padding-left: @mobileGutter;
161
+ padding-right: @mobileGutter;
162
+ margin-left: 0;
163
+ margin-right: 0;
164
+ }
165
+ }
166
+ @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
167
+ .ui.page.grid {
168
+ width: @tabletWidth;
169
+ margin-left: @tabletMargin;
170
+ margin-right: @tabletMargin;
171
+ padding-left: @tabletGutter;
172
+ padding-right: @tabletGutter;
173
+ }
174
+ }
175
+ @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
176
+ .ui.page.grid {
177
+ width: @computerWidth;
178
+ margin-left: @computerMargin;
179
+ margin-right: @computerMargin;
180
+ padding-left: @computerGutter;
181
+ padding-right: @computerGutter;
182
+ }
183
+ }
184
+ @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
185
+ .ui.page.grid {
186
+ width: @largeMonitorWidth;
187
+ margin-left: @largeMonitorMargin;
188
+ margin-right: @largeMonitorMargin;
189
+ padding-left: @largeMonitorGutter;
190
+ padding-right: @largeMonitorGutter;
191
+ }
192
+ }
193
+ @media only screen and (min-width: @widescreenMonitorBreakpoint) {
194
+ .ui.page.grid {
195
+ width: @widescreenMonitorWidth;
196
+ margin-left: @widescreenMargin;
197
+ margin-right: @widescreenMargin;
198
+ padding-left: @widescreenMonitorGutter;
199
+ padding-right: @widescreenMonitorGutter;
200
+ }
201
+ }
202
+ }
203
+
204
+ /* -------------------
213
205
  Column Count
214
- --------------------*/
206
+ -------------------- */
215
207
 
216
208
  /* Assume full width with one column */
217
209
  .ui.grid > .column:only-child,
218
210
  .ui.grid > .row > .column:only-child {
219
- width: @oneColumn;
211
+ width: @oneColumn;
220
212
  }
221
213
 
222
214
  /* Grid Based */
223
215
  .ui[class*="one column"].grid > .row > .column,
224
216
  .ui[class*="one column"].grid > .column:not(.row) {
225
- width: @oneColumn;
217
+ width: @oneColumn;
226
218
  }
227
219
  .ui[class*="two column"].grid > .row > .column,
228
220
  .ui[class*="two column"].grid > .column:not(.row) {
229
- width: @twoColumn;
221
+ width: @twoColumn;
230
222
  }
231
223
  .ui[class*="three column"].grid > .row > .column,
232
224
  .ui[class*="three column"].grid > .column:not(.row) {
233
- width: @threeColumn;
225
+ width: @threeColumn;
234
226
  }
235
227
  .ui[class*="four column"].grid > .row > .column,
236
228
  .ui[class*="four column"].grid > .column:not(.row) {
237
- width: @fourColumn;
229
+ width: @fourColumn;
238
230
  }
239
231
  .ui[class*="five column"].grid > .row > .column,
240
232
  .ui[class*="five column"].grid > .column:not(.row) {
241
- width: @fiveColumn;
233
+ width: @fiveColumn;
242
234
  }
243
235
  .ui[class*="six column"].grid > .row > .column,
244
236
  .ui[class*="six column"].grid > .column:not(.row) {
245
- width: @sixColumn;
237
+ width: @sixColumn;
246
238
  }
247
239
  .ui[class*="seven column"].grid > .row > .column,
248
240
  .ui[class*="seven column"].grid > .column:not(.row) {
249
- width: @sevenColumn;
241
+ width: @sevenColumn;
250
242
  }
251
243
  .ui[class*="eight column"].grid > .row > .column,
252
244
  .ui[class*="eight column"].grid > .column:not(.row) {
253
- width: @eightColumn;
245
+ width: @eightColumn;
254
246
  }
255
247
  .ui[class*="nine column"].grid > .row > .column,
256
248
  .ui[class*="nine column"].grid > .column:not(.row) {
257
- width: @nineColumn;
249
+ width: @nineColumn;
258
250
  }
259
251
  .ui[class*="ten column"].grid > .row > .column,
260
252
  .ui[class*="ten column"].grid > .column:not(.row) {
261
- width: @tenColumn;
253
+ width: @tenColumn;
262
254
  }
263
255
  .ui[class*="eleven column"].grid > .row > .column,
264
256
  .ui[class*="eleven column"].grid > .column:not(.row) {
265
- width: @elevenColumn;
257
+ width: @elevenColumn;
266
258
  }
267
259
  .ui[class*="twelve column"].grid > .row > .column,
268
260
  .ui[class*="twelve column"].grid > .column:not(.row) {
269
- width: @twelveColumn;
261
+ width: @twelveColumn;
270
262
  }
271
263
  .ui[class*="thirteen column"].grid > .row > .column,
272
264
  .ui[class*="thirteen column"].grid > .column:not(.row) {
273
- width: @thirteenColumn;
265
+ width: @thirteenColumn;
274
266
  }
275
267
  .ui[class*="fourteen column"].grid > .row > .column,
276
268
  .ui[class*="fourteen column"].grid > .column:not(.row) {
277
- width: @fourteenColumn;
269
+ width: @fourteenColumn;
278
270
  }
279
271
  .ui[class*="fifteen column"].grid > .row > .column,
280
272
  .ui[class*="fifteen column"].grid > .column:not(.row) {
281
- width: @fifteenColumn;
273
+ width: @fifteenColumn;
282
274
  }
283
275
  .ui[class*="sixteen column"].grid > .row > .column,
284
276
  .ui[class*="sixteen column"].grid > .column:not(.row) {
285
- width: @sixteenColumn;
277
+ width: @sixteenColumn;
286
278
  }
287
279
 
288
280
  /* Row Based Overrides */
289
281
  .ui.grid > [class*="one column"].row > .column {
290
- width: @oneColumn !important;
282
+ width: @oneColumn !important;
291
283
  }
292
284
  .ui.grid > [class*="two column"].row > .column {
293
- width: @twoColumn !important;
285
+ width: @twoColumn !important;
294
286
  }
295
287
  .ui.grid > [class*="three column"].row > .column {
296
- width: @threeColumn !important;
288
+ width: @threeColumn !important;
297
289
  }
298
290
  .ui.grid > [class*="four column"].row > .column {
299
- width: @fourColumn !important;
291
+ width: @fourColumn !important;
300
292
  }
301
293
  .ui.grid > [class*="five column"].row > .column {
302
- width: @fiveColumn !important;
294
+ width: @fiveColumn !important;
303
295
  }
304
296
  .ui.grid > [class*="six column"].row > .column {
305
- width: @sixColumn !important;
297
+ width: @sixColumn !important;
306
298
  }
307
299
  .ui.grid > [class*="seven column"].row > .column {
308
- width: @sevenColumn !important;
300
+ width: @sevenColumn !important;
309
301
  }
310
302
  .ui.grid > [class*="eight column"].row > .column {
311
- width: @eightColumn !important;
303
+ width: @eightColumn !important;
312
304
  }
313
305
  .ui.grid > [class*="nine column"].row > .column {
314
- width: @nineColumn !important;
306
+ width: @nineColumn !important;
315
307
  }
316
308
  .ui.grid > [class*="ten column"].row > .column {
317
- width: @tenColumn !important;
309
+ width: @tenColumn !important;
318
310
  }
319
311
  .ui.grid > [class*="eleven column"].row > .column {
320
- width: @elevenColumn !important;
312
+ width: @elevenColumn !important;
321
313
  }
322
314
  .ui.grid > [class*="twelve column"].row > .column {
323
- width: @twelveColumn !important;
315
+ width: @twelveColumn !important;
324
316
  }
325
317
  .ui.grid > [class*="thirteen column"].row > .column {
326
- width: @thirteenColumn !important;
318
+ width: @thirteenColumn !important;
327
319
  }
328
320
  .ui.grid > [class*="fourteen column"].row > .column {
329
- width: @fourteenColumn !important;
321
+ width: @fourteenColumn !important;
330
322
  }
331
323
  .ui.grid > [class*="fifteen column"].row > .column {
332
- width: @fifteenColumn !important;
324
+ width: @fifteenColumn !important;
333
325
  }
334
326
  .ui.grid > [class*="sixteen column"].row > .column {
335
- width: @sixteenColumn !important;
327
+ width: @sixteenColumn !important;
336
328
  }
337
329
 
338
- & when (@variationGridCelled) and (@variationGridPage){
339
- /* Celled Page */
340
- .ui.celled.page.grid {
341
- box-shadow: none;
342
- }
330
+ & when (@variationGridCelled) and (@variationGridPage) {
331
+ /* Celled Page */
332
+ .ui.celled.page.grid {
333
+ box-shadow: none;
334
+ }
343
335
  }
344
336
 
345
337
  & when (@variationGridWide) {
346
- /*-------------------
347
- Column Width
348
- --------------------*/
349
-
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 {
355
- width: @oneWide !important;
356
- }
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 {
361
- width: @twoWide !important;
362
- }
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 {
367
- width: @threeWide !important;
368
- }
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 {
373
- width: @fourWide !important;
374
- }
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 {
379
- width: @fiveWide !important;
380
- }
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 {
385
- width: @sixWide !important;
386
- }
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 {
391
- width: @sevenWide !important;
392
- }
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 {
397
- width: @eightWide !important;
398
- }
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 {
403
- width: @nineWide !important;
404
- }
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 {
409
- width: @tenWide !important;
410
- }
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 {
415
- width: @elevenWide !important;
416
- }
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 {
421
- width: @twelveWide !important;
422
- }
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 {
427
- width: @thirteenWide !important;
428
- }
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 {
433
- width: @fourteenWide !important;
434
- }
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 {
439
- width: @fifteenWide !important;
440
- }
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 {
445
- width: @sixteenWide !important;
446
- }
447
-
448
- /*----------------------
449
- Width per Device
450
- -----------------------*/
451
-
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) {
654
- .ui.grid > .row > [class*="one wide computer"].column,
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
- }
950
- }
338
+ /* -------------------
339
+ Column Width
340
+ -------------------- */
341
+
342
+ /* Sizing Combinations */
343
+ .ui.grid > .row > [class*="one wide"].column,
344
+ .ui.grid > .column.row > [class*="one wide"].column,
345
+ .ui.grid > [class*="one wide"].column,
346
+ .ui.column.grid > [class*="one wide"].column {
347
+ width: @oneWide !important;
348
+ }
349
+ .ui.grid > .row > [class*="two wide"].column,
350
+ .ui.grid > .column.row > [class*="two wide"].column,
351
+ .ui.grid > [class*="two wide"].column,
352
+ .ui.column.grid > [class*="two wide"].column {
353
+ width: @twoWide !important;
354
+ }
355
+ .ui.grid > .row > [class*="three wide"].column,
356
+ .ui.grid > .column.row > [class*="three wide"].column,
357
+ .ui.grid > [class*="three wide"].column,
358
+ .ui.column.grid > [class*="three wide"].column {
359
+ width: @threeWide !important;
360
+ }
361
+ .ui.grid > .row > [class*="four wide"].column,
362
+ .ui.grid > .column.row > [class*="four wide"].column,
363
+ .ui.grid > [class*="four wide"].column,
364
+ .ui.column.grid > [class*="four wide"].column {
365
+ width: @fourWide !important;
366
+ }
367
+ .ui.grid > .row > [class*="five wide"].column,
368
+ .ui.grid > .column.row > [class*="five wide"].column,
369
+ .ui.grid > [class*="five wide"].column,
370
+ .ui.column.grid > [class*="five wide"].column {
371
+ width: @fiveWide !important;
372
+ }
373
+ .ui.grid > .row > [class*="six wide"].column,
374
+ .ui.grid > .column.row > [class*="six wide"].column,
375
+ .ui.grid > [class*="six wide"].column,
376
+ .ui.column.grid > [class*="six wide"].column {
377
+ width: @sixWide !important;
378
+ }
379
+ .ui.grid > .row > [class*="seven wide"].column,
380
+ .ui.grid > .column.row > [class*="seven wide"].column,
381
+ .ui.grid > [class*="seven wide"].column,
382
+ .ui.column.grid > [class*="seven wide"].column {
383
+ width: @sevenWide !important;
384
+ }
385
+ .ui.grid > .row > [class*="eight wide"].column,
386
+ .ui.grid > .column.row > [class*="eight wide"].column,
387
+ .ui.grid > [class*="eight wide"].column,
388
+ .ui.column.grid > [class*="eight wide"].column {
389
+ width: @eightWide !important;
390
+ }
391
+ .ui.grid > .row > [class*="nine wide"].column,
392
+ .ui.grid > .column.row > [class*="nine wide"].column,
393
+ .ui.grid > [class*="nine wide"].column,
394
+ .ui.column.grid > [class*="nine wide"].column {
395
+ width: @nineWide !important;
396
+ }
397
+ .ui.grid > .row > [class*="ten wide"].column,
398
+ .ui.grid > .column.row > [class*="ten wide"].column,
399
+ .ui.grid > [class*="ten wide"].column,
400
+ .ui.column.grid > [class*="ten wide"].column {
401
+ width: @tenWide !important;
402
+ }
403
+ .ui.grid > .row > [class*="eleven wide"].column,
404
+ .ui.grid > .column.row > [class*="eleven wide"].column,
405
+ .ui.grid > [class*="eleven wide"].column,
406
+ .ui.column.grid > [class*="eleven wide"].column {
407
+ width: @elevenWide !important;
408
+ }
409
+ .ui.grid > .row > [class*="twelve wide"].column,
410
+ .ui.grid > .column.row > [class*="twelve wide"].column,
411
+ .ui.grid > [class*="twelve wide"].column,
412
+ .ui.column.grid > [class*="twelve wide"].column {
413
+ width: @twelveWide !important;
414
+ }
415
+ .ui.grid > .row > [class*="thirteen wide"].column,
416
+ .ui.grid > .column.row > [class*="thirteen wide"].column,
417
+ .ui.grid > [class*="thirteen wide"].column,
418
+ .ui.column.grid > [class*="thirteen wide"].column {
419
+ width: @thirteenWide !important;
420
+ }
421
+ .ui.grid > .row > [class*="fourteen wide"].column,
422
+ .ui.grid > .column.row > [class*="fourteen wide"].column,
423
+ .ui.grid > [class*="fourteen wide"].column,
424
+ .ui.column.grid > [class*="fourteen wide"].column {
425
+ width: @fourteenWide !important;
426
+ }
427
+ .ui.grid > .row > [class*="fifteen wide"].column,
428
+ .ui.grid > .column.row > [class*="fifteen wide"].column,
429
+ .ui.grid > [class*="fifteen wide"].column,
430
+ .ui.column.grid > [class*="fifteen wide"].column {
431
+ width: @fifteenWide !important;
432
+ }
433
+ .ui.grid > .row > [class*="sixteen wide"].column,
434
+ .ui.grid > .column.row > [class*="sixteen wide"].column,
435
+ .ui.grid > [class*="sixteen wide"].column,
436
+ .ui.column.grid > [class*="sixteen wide"].column {
437
+ width: @sixteenWide !important;
438
+ }
439
+
440
+ /* ----------------------
441
+ Width per Device
442
+ ----------------------- */
443
+
444
+ /* Mobile Sizing Combinations */
445
+ @media only screen and (min-width: @mobileBreakpoint) and (max-width: @largestMobileScreen) {
446
+ .ui.grid > .row > [class*="one wide mobile"].column,
447
+ .ui.grid > .column.row > [class*="one wide mobile"].column,
448
+ .ui.grid > [class*="one wide mobile"].column,
449
+ .ui.column.grid > [class*="one wide mobile"].column {
450
+ width: @oneWide !important;
451
+ }
452
+ .ui.grid > .row > [class*="two wide mobile"].column,
453
+ .ui.grid > .column.row > [class*="two wide mobile"].column,
454
+ .ui.grid > [class*="two wide mobile"].column,
455
+ .ui.column.grid > [class*="two wide mobile"].column {
456
+ width: @twoWide !important;
457
+ }
458
+ .ui.grid > .row > [class*="three wide mobile"].column,
459
+ .ui.grid > .column.row > [class*="three wide mobile"].column,
460
+ .ui.grid > [class*="three wide mobile"].column,
461
+ .ui.column.grid > [class*="three wide mobile"].column {
462
+ width: @threeWide !important;
463
+ }
464
+ .ui.grid > .row > [class*="four wide mobile"].column,
465
+ .ui.grid > .column.row > [class*="four wide mobile"].column,
466
+ .ui.grid > [class*="four wide mobile"].column,
467
+ .ui.column.grid > [class*="four wide mobile"].column {
468
+ width: @fourWide !important;
469
+ }
470
+ .ui.grid > .row > [class*="five wide mobile"].column,
471
+ .ui.grid > .column.row > [class*="five wide mobile"].column,
472
+ .ui.grid > [class*="five wide mobile"].column,
473
+ .ui.column.grid > [class*="five wide mobile"].column {
474
+ width: @fiveWide !important;
475
+ }
476
+ .ui.grid > .row > [class*="six wide mobile"].column,
477
+ .ui.grid > .column.row > [class*="six wide mobile"].column,
478
+ .ui.grid > [class*="six wide mobile"].column,
479
+ .ui.column.grid > [class*="six wide mobile"].column {
480
+ width: @sixWide !important;
481
+ }
482
+ .ui.grid > .row > [class*="seven wide mobile"].column,
483
+ .ui.grid > .column.row > [class*="seven wide mobile"].column,
484
+ .ui.grid > [class*="seven wide mobile"].column,
485
+ .ui.column.grid > [class*="seven wide mobile"].column {
486
+ width: @sevenWide !important;
487
+ }
488
+ .ui.grid > .row > [class*="eight wide mobile"].column,
489
+ .ui.grid > .column.row > [class*="eight wide mobile"].column,
490
+ .ui.grid > [class*="eight wide mobile"].column,
491
+ .ui.column.grid > [class*="eight wide mobile"].column {
492
+ width: @eightWide !important;
493
+ }
494
+ .ui.grid > .row > [class*="nine wide mobile"].column,
495
+ .ui.grid > .column.row > [class*="nine wide mobile"].column,
496
+ .ui.grid > [class*="nine wide mobile"].column,
497
+ .ui.column.grid > [class*="nine wide mobile"].column {
498
+ width: @nineWide !important;
499
+ }
500
+ .ui.grid > .row > [class*="ten wide mobile"].column,
501
+ .ui.grid > .column.row > [class*="ten wide mobile"].column,
502
+ .ui.grid > [class*="ten wide mobile"].column,
503
+ .ui.column.grid > [class*="ten wide mobile"].column {
504
+ width: @tenWide !important;
505
+ }
506
+ .ui.grid > .row > [class*="eleven wide mobile"].column,
507
+ .ui.grid > .column.row > [class*="eleven wide mobile"].column,
508
+ .ui.grid > [class*="eleven wide mobile"].column,
509
+ .ui.column.grid > [class*="eleven wide mobile"].column {
510
+ width: @elevenWide !important;
511
+ }
512
+ .ui.grid > .row > [class*="twelve wide mobile"].column,
513
+ .ui.grid > .column.row > [class*="twelve wide mobile"].column,
514
+ .ui.grid > [class*="twelve wide mobile"].column,
515
+ .ui.column.grid > [class*="twelve wide mobile"].column {
516
+ width: @twelveWide !important;
517
+ }
518
+ .ui.grid > .row > [class*="thirteen wide mobile"].column,
519
+ .ui.grid > .column.row > [class*="thirteen wide mobile"].column,
520
+ .ui.grid > [class*="thirteen wide mobile"].column,
521
+ .ui.column.grid > [class*="thirteen wide mobile"].column {
522
+ width: @thirteenWide !important;
523
+ }
524
+ .ui.grid > .row > [class*="fourteen wide mobile"].column,
525
+ .ui.grid > .column.row > [class*="fourteen wide mobile"].column,
526
+ .ui.grid > [class*="fourteen wide mobile"].column,
527
+ .ui.column.grid > [class*="fourteen wide mobile"].column {
528
+ width: @fourteenWide !important;
529
+ }
530
+ .ui.grid > .row > [class*="fifteen wide mobile"].column,
531
+ .ui.grid > .column.row > [class*="fifteen wide mobile"].column,
532
+ .ui.grid > [class*="fifteen wide mobile"].column,
533
+ .ui.column.grid > [class*="fifteen wide mobile"].column {
534
+ width: @fifteenWide !important;
535
+ }
536
+ .ui.grid > .row > [class*="sixteen wide mobile"].column,
537
+ .ui.grid > .column.row > [class*="sixteen wide mobile"].column,
538
+ .ui.grid > [class*="sixteen wide mobile"].column,
539
+ .ui.column.grid > [class*="sixteen wide mobile"].column {
540
+ width: @sixteenWide !important;
541
+ }
542
+ }
543
+
544
+ /* Tablet Sizing Combinations */
545
+ @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
546
+ .ui.grid > .row > [class*="one wide tablet"].column,
547
+ .ui.grid > .column.row > [class*="one wide tablet"].column,
548
+ .ui.grid > [class*="one wide tablet"].column,
549
+ .ui.column.grid > [class*="one wide tablet"].column {
550
+ width: @oneWide !important;
551
+ }
552
+ .ui.grid > .row > [class*="two wide tablet"].column,
553
+ .ui.grid > .column.row > [class*="two wide tablet"].column,
554
+ .ui.grid > [class*="two wide tablet"].column,
555
+ .ui.column.grid > [class*="two wide tablet"].column {
556
+ width: @twoWide !important;
557
+ }
558
+ .ui.grid > .row > [class*="three wide tablet"].column,
559
+ .ui.grid > .column.row > [class*="three wide tablet"].column,
560
+ .ui.grid > [class*="three wide tablet"].column,
561
+ .ui.column.grid > [class*="three wide tablet"].column {
562
+ width: @threeWide !important;
563
+ }
564
+ .ui.grid > .row > [class*="four wide tablet"].column,
565
+ .ui.grid > .column.row > [class*="four wide tablet"].column,
566
+ .ui.grid > [class*="four wide tablet"].column,
567
+ .ui.column.grid > [class*="four wide tablet"].column {
568
+ width: @fourWide !important;
569
+ }
570
+ .ui.grid > .row > [class*="five wide tablet"].column,
571
+ .ui.grid > .column.row > [class*="five wide tablet"].column,
572
+ .ui.grid > [class*="five wide tablet"].column,
573
+ .ui.column.grid > [class*="five wide tablet"].column {
574
+ width: @fiveWide !important;
575
+ }
576
+ .ui.grid > .row > [class*="six wide tablet"].column,
577
+ .ui.grid > .column.row > [class*="six wide tablet"].column,
578
+ .ui.grid > [class*="six wide tablet"].column,
579
+ .ui.column.grid > [class*="six wide tablet"].column {
580
+ width: @sixWide !important;
581
+ }
582
+ .ui.grid > .row > [class*="seven wide tablet"].column,
583
+ .ui.grid > .column.row > [class*="seven wide tablet"].column,
584
+ .ui.grid > [class*="seven wide tablet"].column,
585
+ .ui.column.grid > [class*="seven wide tablet"].column {
586
+ width: @sevenWide !important;
587
+ }
588
+ .ui.grid > .row > [class*="eight wide tablet"].column,
589
+ .ui.grid > .column.row > [class*="eight wide tablet"].column,
590
+ .ui.grid > [class*="eight wide tablet"].column,
591
+ .ui.column.grid > [class*="eight wide tablet"].column {
592
+ width: @eightWide !important;
593
+ }
594
+ .ui.grid > .row > [class*="nine wide tablet"].column,
595
+ .ui.grid > .column.row > [class*="nine wide tablet"].column,
596
+ .ui.grid > [class*="nine wide tablet"].column,
597
+ .ui.column.grid > [class*="nine wide tablet"].column {
598
+ width: @nineWide !important;
599
+ }
600
+ .ui.grid > .row > [class*="ten wide tablet"].column,
601
+ .ui.grid > .column.row > [class*="ten wide tablet"].column,
602
+ .ui.grid > [class*="ten wide tablet"].column,
603
+ .ui.column.grid > [class*="ten wide tablet"].column {
604
+ width: @tenWide !important;
605
+ }
606
+ .ui.grid > .row > [class*="eleven wide tablet"].column,
607
+ .ui.grid > .column.row > [class*="eleven wide tablet"].column,
608
+ .ui.grid > [class*="eleven wide tablet"].column,
609
+ .ui.column.grid > [class*="eleven wide tablet"].column {
610
+ width: @elevenWide !important;
611
+ }
612
+ .ui.grid > .row > [class*="twelve wide tablet"].column,
613
+ .ui.grid > .column.row > [class*="twelve wide tablet"].column,
614
+ .ui.grid > [class*="twelve wide tablet"].column,
615
+ .ui.column.grid > [class*="twelve wide tablet"].column {
616
+ width: @twelveWide !important;
617
+ }
618
+ .ui.grid > .row > [class*="thirteen wide tablet"].column,
619
+ .ui.grid > .column.row > [class*="thirteen wide tablet"].column,
620
+ .ui.grid > [class*="thirteen wide tablet"].column,
621
+ .ui.column.grid > [class*="thirteen wide tablet"].column {
622
+ width: @thirteenWide !important;
623
+ }
624
+ .ui.grid > .row > [class*="fourteen wide tablet"].column,
625
+ .ui.grid > .column.row > [class*="fourteen wide tablet"].column,
626
+ .ui.grid > [class*="fourteen wide tablet"].column,
627
+ .ui.column.grid > [class*="fourteen wide tablet"].column {
628
+ width: @fourteenWide !important;
629
+ }
630
+ .ui.grid > .row > [class*="fifteen wide tablet"].column,
631
+ .ui.grid > .column.row > [class*="fifteen wide tablet"].column,
632
+ .ui.grid > [class*="fifteen wide tablet"].column,
633
+ .ui.column.grid > [class*="fifteen wide tablet"].column {
634
+ width: @fifteenWide !important;
635
+ }
636
+ .ui.grid > .row > [class*="sixteen wide tablet"].column,
637
+ .ui.grid > .column.row > [class*="sixteen wide tablet"].column,
638
+ .ui.grid > [class*="sixteen wide tablet"].column,
639
+ .ui.column.grid > [class*="sixteen wide tablet"].column {
640
+ width: @sixteenWide !important;
641
+ }
642
+ }
643
+
644
+ /* Computer/Desktop Sizing Combinations */
645
+ @media only screen and (min-width: @computerBreakpoint) {
646
+ .ui.grid > .row > [class*="one wide computer"].column,
647
+ .ui.grid > .column.row > [class*="one wide computer"].column,
648
+ .ui.grid > [class*="one wide computer"].column,
649
+ .ui.column.grid > [class*="one wide computer"].column {
650
+ width: @oneWide !important;
651
+ }
652
+ .ui.grid > .row > [class*="two wide computer"].column,
653
+ .ui.grid > .column.row > [class*="two wide computer"].column,
654
+ .ui.grid > [class*="two wide computer"].column,
655
+ .ui.column.grid > [class*="two wide computer"].column {
656
+ width: @twoWide !important;
657
+ }
658
+ .ui.grid > .row > [class*="three wide computer"].column,
659
+ .ui.grid > .column.row > [class*="three wide computer"].column,
660
+ .ui.grid > [class*="three wide computer"].column,
661
+ .ui.column.grid > [class*="three wide computer"].column {
662
+ width: @threeWide !important;
663
+ }
664
+ .ui.grid > .row > [class*="four wide computer"].column,
665
+ .ui.grid > .column.row > [class*="four wide computer"].column,
666
+ .ui.grid > [class*="four wide computer"].column,
667
+ .ui.column.grid > [class*="four wide computer"].column {
668
+ width: @fourWide !important;
669
+ }
670
+ .ui.grid > .row > [class*="five wide computer"].column,
671
+ .ui.grid > .column.row > [class*="five wide computer"].column,
672
+ .ui.grid > [class*="five wide computer"].column,
673
+ .ui.column.grid > [class*="five wide computer"].column {
674
+ width: @fiveWide !important;
675
+ }
676
+ .ui.grid > .row > [class*="six wide computer"].column,
677
+ .ui.grid > .column.row > [class*="six wide computer"].column,
678
+ .ui.grid > [class*="six wide computer"].column,
679
+ .ui.column.grid > [class*="six wide computer"].column {
680
+ width: @sixWide !important;
681
+ }
682
+ .ui.grid > .row > [class*="seven wide computer"].column,
683
+ .ui.grid > .column.row > [class*="seven wide computer"].column,
684
+ .ui.grid > [class*="seven wide computer"].column,
685
+ .ui.column.grid > [class*="seven wide computer"].column {
686
+ width: @sevenWide !important;
687
+ }
688
+ .ui.grid > .row > [class*="eight wide computer"].column,
689
+ .ui.grid > .column.row > [class*="eight wide computer"].column,
690
+ .ui.grid > [class*="eight wide computer"].column,
691
+ .ui.column.grid > [class*="eight wide computer"].column {
692
+ width: @eightWide !important;
693
+ }
694
+ .ui.grid > .row > [class*="nine wide computer"].column,
695
+ .ui.grid > .column.row > [class*="nine wide computer"].column,
696
+ .ui.grid > [class*="nine wide computer"].column,
697
+ .ui.column.grid > [class*="nine wide computer"].column {
698
+ width: @nineWide !important;
699
+ }
700
+ .ui.grid > .row > [class*="ten wide computer"].column,
701
+ .ui.grid > .column.row > [class*="ten wide computer"].column,
702
+ .ui.grid > [class*="ten wide computer"].column,
703
+ .ui.column.grid > [class*="ten wide computer"].column {
704
+ width: @tenWide !important;
705
+ }
706
+ .ui.grid > .row > [class*="eleven wide computer"].column,
707
+ .ui.grid > .column.row > [class*="eleven wide computer"].column,
708
+ .ui.grid > [class*="eleven wide computer"].column,
709
+ .ui.column.grid > [class*="eleven wide computer"].column {
710
+ width: @elevenWide !important;
711
+ }
712
+ .ui.grid > .row > [class*="twelve wide computer"].column,
713
+ .ui.grid > .column.row > [class*="twelve wide computer"].column,
714
+ .ui.grid > [class*="twelve wide computer"].column,
715
+ .ui.column.grid > [class*="twelve wide computer"].column {
716
+ width: @twelveWide !important;
717
+ }
718
+ .ui.grid > .row > [class*="thirteen wide computer"].column,
719
+ .ui.grid > .column.row > [class*="thirteen wide computer"].column,
720
+ .ui.grid > [class*="thirteen wide computer"].column,
721
+ .ui.column.grid > [class*="thirteen wide computer"].column {
722
+ width: @thirteenWide !important;
723
+ }
724
+ .ui.grid > .row > [class*="fourteen wide computer"].column,
725
+ .ui.grid > .column.row > [class*="fourteen wide computer"].column,
726
+ .ui.grid > [class*="fourteen wide computer"].column,
727
+ .ui.column.grid > [class*="fourteen wide computer"].column {
728
+ width: @fourteenWide !important;
729
+ }
730
+ .ui.grid > .row > [class*="fifteen wide computer"].column,
731
+ .ui.grid > .column.row > [class*="fifteen wide computer"].column,
732
+ .ui.grid > [class*="fifteen wide computer"].column,
733
+ .ui.column.grid > [class*="fifteen wide computer"].column {
734
+ width: @fifteenWide !important;
735
+ }
736
+ .ui.grid > .row > [class*="sixteen wide computer"].column,
737
+ .ui.grid > .column.row > [class*="sixteen wide computer"].column,
738
+ .ui.grid > [class*="sixteen wide computer"].column,
739
+ .ui.column.grid > [class*="sixteen wide computer"].column {
740
+ width: @sixteenWide !important;
741
+ }
742
+ }
743
+
744
+ /* Large Monitor Sizing Combinations */
745
+ @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
746
+ .ui.grid > .row > [class*="one wide large screen"].column,
747
+ .ui.grid > .column.row > [class*="one wide large screen"].column,
748
+ .ui.grid > [class*="one wide large screen"].column,
749
+ .ui.column.grid > [class*="one wide large screen"].column {
750
+ width: @oneWide !important;
751
+ }
752
+ .ui.grid > .row > [class*="two wide large screen"].column,
753
+ .ui.grid > .column.row > [class*="two wide large screen"].column,
754
+ .ui.grid > [class*="two wide large screen"].column,
755
+ .ui.column.grid > [class*="two wide large screen"].column {
756
+ width: @twoWide !important;
757
+ }
758
+ .ui.grid > .row > [class*="three wide large screen"].column,
759
+ .ui.grid > .column.row > [class*="three wide large screen"].column,
760
+ .ui.grid > [class*="three wide large screen"].column,
761
+ .ui.column.grid > [class*="three wide large screen"].column {
762
+ width: @threeWide !important;
763
+ }
764
+ .ui.grid > .row > [class*="four wide large screen"].column,
765
+ .ui.grid > .column.row > [class*="four wide large screen"].column,
766
+ .ui.grid > [class*="four wide large screen"].column,
767
+ .ui.column.grid > [class*="four wide large screen"].column {
768
+ width: @fourWide !important;
769
+ }
770
+ .ui.grid > .row > [class*="five wide large screen"].column,
771
+ .ui.grid > .column.row > [class*="five wide large screen"].column,
772
+ .ui.grid > [class*="five wide large screen"].column,
773
+ .ui.column.grid > [class*="five wide large screen"].column {
774
+ width: @fiveWide !important;
775
+ }
776
+ .ui.grid > .row > [class*="six wide large screen"].column,
777
+ .ui.grid > .column.row > [class*="six wide large screen"].column,
778
+ .ui.grid > [class*="six wide large screen"].column,
779
+ .ui.column.grid > [class*="six wide large screen"].column {
780
+ width: @sixWide !important;
781
+ }
782
+ .ui.grid > .row > [class*="seven wide large screen"].column,
783
+ .ui.grid > .column.row > [class*="seven wide large screen"].column,
784
+ .ui.grid > [class*="seven wide large screen"].column,
785
+ .ui.column.grid > [class*="seven wide large screen"].column {
786
+ width: @sevenWide !important;
787
+ }
788
+ .ui.grid > .row > [class*="eight wide large screen"].column,
789
+ .ui.grid > .column.row > [class*="eight wide large screen"].column,
790
+ .ui.grid > [class*="eight wide large screen"].column,
791
+ .ui.column.grid > [class*="eight wide large screen"].column {
792
+ width: @eightWide !important;
793
+ }
794
+ .ui.grid > .row > [class*="nine wide large screen"].column,
795
+ .ui.grid > .column.row > [class*="nine wide large screen"].column,
796
+ .ui.grid > [class*="nine wide large screen"].column,
797
+ .ui.column.grid > [class*="nine wide large screen"].column {
798
+ width: @nineWide !important;
799
+ }
800
+ .ui.grid > .row > [class*="ten wide large screen"].column,
801
+ .ui.grid > .column.row > [class*="ten wide large screen"].column,
802
+ .ui.grid > [class*="ten wide large screen"].column,
803
+ .ui.column.grid > [class*="ten wide large screen"].column {
804
+ width: @tenWide !important;
805
+ }
806
+ .ui.grid > .row > [class*="eleven wide large screen"].column,
807
+ .ui.grid > .column.row > [class*="eleven wide large screen"].column,
808
+ .ui.grid > [class*="eleven wide large screen"].column,
809
+ .ui.column.grid > [class*="eleven wide large screen"].column {
810
+ width: @elevenWide !important;
811
+ }
812
+ .ui.grid > .row > [class*="twelve wide large screen"].column,
813
+ .ui.grid > .column.row > [class*="twelve wide large screen"].column,
814
+ .ui.grid > [class*="twelve wide large screen"].column,
815
+ .ui.column.grid > [class*="twelve wide large screen"].column {
816
+ width: @twelveWide !important;
817
+ }
818
+ .ui.grid > .row > [class*="thirteen wide large screen"].column,
819
+ .ui.grid > .column.row > [class*="thirteen wide large screen"].column,
820
+ .ui.grid > [class*="thirteen wide large screen"].column,
821
+ .ui.column.grid > [class*="thirteen wide large screen"].column {
822
+ width: @thirteenWide !important;
823
+ }
824
+ .ui.grid > .row > [class*="fourteen wide large screen"].column,
825
+ .ui.grid > .column.row > [class*="fourteen wide large screen"].column,
826
+ .ui.grid > [class*="fourteen wide large screen"].column,
827
+ .ui.column.grid > [class*="fourteen wide large screen"].column {
828
+ width: @fourteenWide !important;
829
+ }
830
+ .ui.grid > .row > [class*="fifteen wide large screen"].column,
831
+ .ui.grid > .column.row > [class*="fifteen wide large screen"].column,
832
+ .ui.grid > [class*="fifteen wide large screen"].column,
833
+ .ui.column.grid > [class*="fifteen wide large screen"].column {
834
+ width: @fifteenWide !important;
835
+ }
836
+ .ui.grid > .row > [class*="sixteen wide large screen"].column,
837
+ .ui.grid > .column.row > [class*="sixteen wide large screen"].column,
838
+ .ui.grid > [class*="sixteen wide large screen"].column,
839
+ .ui.column.grid > [class*="sixteen wide large screen"].column {
840
+ width: @sixteenWide !important;
841
+ }
842
+ }
843
+
844
+ /* Widescreen Sizing Combinations */
845
+ @media only screen and (min-width: @widescreenMonitorBreakpoint) {
846
+ .ui.grid > .row > [class*="one wide widescreen"].column,
847
+ .ui.grid > .column.row > [class*="one wide widescreen"].column,
848
+ .ui.grid > [class*="one wide widescreen"].column,
849
+ .ui.column.grid > [class*="one wide widescreen"].column {
850
+ width: @oneWide !important;
851
+ }
852
+ .ui.grid > .row > [class*="two wide widescreen"].column,
853
+ .ui.grid > .column.row > [class*="two wide widescreen"].column,
854
+ .ui.grid > [class*="two wide widescreen"].column,
855
+ .ui.column.grid > [class*="two wide widescreen"].column {
856
+ width: @twoWide !important;
857
+ }
858
+ .ui.grid > .row > [class*="three wide widescreen"].column,
859
+ .ui.grid > .column.row > [class*="three wide widescreen"].column,
860
+ .ui.grid > [class*="three wide widescreen"].column,
861
+ .ui.column.grid > [class*="three wide widescreen"].column {
862
+ width: @threeWide !important;
863
+ }
864
+ .ui.grid > .row > [class*="four wide widescreen"].column,
865
+ .ui.grid > .column.row > [class*="four wide widescreen"].column,
866
+ .ui.grid > [class*="four wide widescreen"].column,
867
+ .ui.column.grid > [class*="four wide widescreen"].column {
868
+ width: @fourWide !important;
869
+ }
870
+ .ui.grid > .row > [class*="five wide widescreen"].column,
871
+ .ui.grid > .column.row > [class*="five wide widescreen"].column,
872
+ .ui.grid > [class*="five wide widescreen"].column,
873
+ .ui.column.grid > [class*="five wide widescreen"].column {
874
+ width: @fiveWide !important;
875
+ }
876
+ .ui.grid > .row > [class*="six wide widescreen"].column,
877
+ .ui.grid > .column.row > [class*="six wide widescreen"].column,
878
+ .ui.grid > [class*="six wide widescreen"].column,
879
+ .ui.column.grid > [class*="six wide widescreen"].column {
880
+ width: @sixWide !important;
881
+ }
882
+ .ui.grid > .row > [class*="seven wide widescreen"].column,
883
+ .ui.grid > .column.row > [class*="seven wide widescreen"].column,
884
+ .ui.grid > [class*="seven wide widescreen"].column,
885
+ .ui.column.grid > [class*="seven wide widescreen"].column {
886
+ width: @sevenWide !important;
887
+ }
888
+ .ui.grid > .row > [class*="eight wide widescreen"].column,
889
+ .ui.grid > .column.row > [class*="eight wide widescreen"].column,
890
+ .ui.grid > [class*="eight wide widescreen"].column,
891
+ .ui.column.grid > [class*="eight wide widescreen"].column {
892
+ width: @eightWide !important;
893
+ }
894
+ .ui.grid > .row > [class*="nine wide widescreen"].column,
895
+ .ui.grid > .column.row > [class*="nine wide widescreen"].column,
896
+ .ui.grid > [class*="nine wide widescreen"].column,
897
+ .ui.column.grid > [class*="nine wide widescreen"].column {
898
+ width: @nineWide !important;
899
+ }
900
+ .ui.grid > .row > [class*="ten wide widescreen"].column,
901
+ .ui.grid > .column.row > [class*="ten wide widescreen"].column,
902
+ .ui.grid > [class*="ten wide widescreen"].column,
903
+ .ui.column.grid > [class*="ten wide widescreen"].column {
904
+ width: @tenWide !important;
905
+ }
906
+ .ui.grid > .row > [class*="eleven wide widescreen"].column,
907
+ .ui.grid > .column.row > [class*="eleven wide widescreen"].column,
908
+ .ui.grid > [class*="eleven wide widescreen"].column,
909
+ .ui.column.grid > [class*="eleven wide widescreen"].column {
910
+ width: @elevenWide !important;
911
+ }
912
+ .ui.grid > .row > [class*="twelve wide widescreen"].column,
913
+ .ui.grid > .column.row > [class*="twelve wide widescreen"].column,
914
+ .ui.grid > [class*="twelve wide widescreen"].column,
915
+ .ui.column.grid > [class*="twelve wide widescreen"].column {
916
+ width: @twelveWide !important;
917
+ }
918
+ .ui.grid > .row > [class*="thirteen wide widescreen"].column,
919
+ .ui.grid > .column.row > [class*="thirteen wide widescreen"].column,
920
+ .ui.grid > [class*="thirteen wide widescreen"].column,
921
+ .ui.column.grid > [class*="thirteen wide widescreen"].column {
922
+ width: @thirteenWide !important;
923
+ }
924
+ .ui.grid > .row > [class*="fourteen wide widescreen"].column,
925
+ .ui.grid > .column.row > [class*="fourteen wide widescreen"].column,
926
+ .ui.grid > [class*="fourteen wide widescreen"].column,
927
+ .ui.column.grid > [class*="fourteen wide widescreen"].column {
928
+ width: @fourteenWide !important;
929
+ }
930
+ .ui.grid > .row > [class*="fifteen wide widescreen"].column,
931
+ .ui.grid > .column.row > [class*="fifteen wide widescreen"].column,
932
+ .ui.grid > [class*="fifteen wide widescreen"].column,
933
+ .ui.column.grid > [class*="fifteen wide widescreen"].column {
934
+ width: @fifteenWide !important;
935
+ }
936
+ .ui.grid > .row > [class*="sixteen wide widescreen"].column,
937
+ .ui.grid > .column.row > [class*="sixteen wide widescreen"].column,
938
+ .ui.grid > [class*="sixteen wide widescreen"].column,
939
+ .ui.column.grid > [class*="sixteen wide widescreen"].column {
940
+ width: @sixteenWide !important;
941
+ }
942
+ }
951
943
  }
952
944
 
953
945
  & when (@variationGridCentered) {
954
- /*----------------------
955
- Centered
956
- -----------------------*/
957
-
958
- .ui.centered.grid,
959
- .ui.centered.grid > .row,
960
- .ui.grid > .centered.row {
961
- text-align: center;
962
- justify-content: center;
963
- }
964
- .ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
965
- .ui.centered.grid > .row > .column:not(.aligned):not(.justified),
966
- .ui.grid .centered.row > .column:not(.aligned):not(.justified) {
967
- text-align: left;
968
- }
969
-
970
- .ui.grid > .centered.column,
971
- .ui.grid > .row > .centered.column {
972
- display: block;
973
- margin-left: auto;
974
- margin-right: auto;
975
- }
946
+ /* ----------------------
947
+ Centered
948
+ ----------------------- */
949
+
950
+ .ui.centered.grid,
951
+ .ui.centered.grid > .row,
952
+ .ui.grid > .centered.row {
953
+ text-align: center;
954
+ justify-content: center;
955
+ }
956
+ .ui.centered.grid > .column:not(.aligned):not(.justified):not(.row),
957
+ .ui.centered.grid > .row > .column:not(.aligned):not(.justified),
958
+ .ui.grid .centered.row > .column:not(.aligned):not(.justified) {
959
+ text-align: left;
960
+ }
961
+
962
+ .ui.grid > .centered.column,
963
+ .ui.grid > .row > .centered.column {
964
+ display: block;
965
+ margin-left: auto;
966
+ margin-right: auto;
967
+ }
976
968
  }
977
969
 
978
970
  & when (@variationGridRelaxed) {
979
- /*----------------------
980
- Relaxed
981
- -----------------------*/
982
-
983
- .ui.relaxed.grid > .column:not(.row),
984
- .ui.relaxed.grid > .row > .column,
985
- .ui.grid > .relaxed.row > .column {
986
- padding-left: (@relaxedGutterWidth / 2);
987
- padding-right: (@relaxedGutterWidth / 2);
988
- }
989
-
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
- }
997
- }
998
-
999
- /* Coupling with UI Divider */
1000
- .ui.relaxed.grid .row + .ui.divider,
1001
- .ui.grid .relaxed.row + .ui.divider {
1002
- margin-left: (@relaxedGutterWidth / 2);
1003
- margin-right: (@relaxedGutterWidth / 2);
1004
- }
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
- }
1011
- }
971
+ /* ----------------------
972
+ Relaxed
973
+ ----------------------- */
974
+
975
+ .ui.relaxed.grid > .column:not(.row),
976
+ .ui.relaxed.grid > .row > .column,
977
+ .ui.grid > .relaxed.row > .column {
978
+ padding-left: (@relaxedGutterWidth / 2);
979
+ padding-right: (@relaxedGutterWidth / 2);
980
+ }
981
+
982
+ & when (@variationGridVeryRelaxed) {
983
+ .ui[class*="very relaxed"].grid > .column:not(.row),
984
+ .ui[class*="very relaxed"].grid > .row > .column,
985
+ .ui.grid > [class*="very relaxed"].row > .column {
986
+ padding-left: (@veryRelaxedGutterWidth / 2);
987
+ padding-right: (@veryRelaxedGutterWidth / 2);
988
+ }
989
+ }
990
+
991
+ /* Coupling with UI Divider */
992
+ .ui.relaxed.grid .row + .ui.divider,
993
+ .ui.grid .relaxed.row + .ui.divider {
994
+ margin-left: (@relaxedGutterWidth / 2);
995
+ margin-right: (@relaxedGutterWidth / 2);
996
+ }
997
+ & when (@variationGridVeryRelaxed) {
998
+ .ui[class*="very relaxed"].grid .row + .ui.divider,
999
+ .ui.grid [class*="very relaxed"].row + .ui.divider {
1000
+ margin-left: (@veryRelaxedGutterWidth / 2);
1001
+ margin-right: (@veryRelaxedGutterWidth / 2);
1002
+ }
1003
+ }
1012
1004
  }
1013
1005
 
1014
1006
  & when (@variationGridPadded) {
1015
- /*----------------------
1016
- Padded
1017
- -----------------------*/
1018
-
1019
- .ui.padded.grid:not(.vertically):not(.horizontally) {
1020
- margin: 0 !important;
1021
- }
1022
- [class*="horizontally padded"].ui.grid {
1023
- margin-left: 0 !important;
1024
- margin-right: 0 !important;
1025
- }
1026
- [class*="vertically padded"].ui.grid {
1027
- margin-top: 0 !important;
1028
- margin-bottom: 0 !important;
1029
- }
1007
+ /* ----------------------
1008
+ Padded
1009
+ ----------------------- */
1010
+
1011
+ .ui.padded.grid:not(.vertically):not(.horizontally) {
1012
+ margin: 0 !important;
1013
+ }
1014
+ [class*="horizontally padded"].ui.grid {
1015
+ margin-left: 0 !important;
1016
+ margin-right: 0 !important;
1017
+ }
1018
+ [class*="vertically padded"].ui.grid {
1019
+ margin-top: 0 !important;
1020
+ margin-bottom: 0 !important;
1021
+ }
1030
1022
  }
1031
1023
 
1032
1024
  & when (@variationGridFloated) {
1033
- /*----------------------
1034
- "Floated"
1035
- -----------------------*/
1025
+ /* ----------------------
1026
+ "Floated"
1027
+ ----------------------- */
1036
1028
 
1037
- .ui.grid [class*="left floated"].column {
1038
- margin-right: auto;
1039
- }
1040
- .ui.grid [class*="right floated"].column {
1041
- margin-left: auto;
1042
- }
1029
+ .ui.grid [class*="left floated"].column {
1030
+ margin-right: auto;
1031
+ }
1032
+ .ui.grid [class*="right floated"].column {
1033
+ margin-left: auto;
1034
+ }
1043
1035
  }
1044
1036
 
1045
1037
  & when (@variationGridDivided) {
1046
- /*----------------------
1047
- Divided
1048
- -----------------------*/
1049
-
1050
- .ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
1051
- .ui.divided.grid:not([class*="vertically divided"]) > .row > .column {
1052
- box-shadow: @dividedBorder;
1053
- }
1038
+ /* ----------------------
1039
+ Divided
1040
+ ----------------------- */
1054
1041
 
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;
1042
+ .ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
1043
+ .ui.divided.grid:not([class*="vertically divided"]) > .row > .column {
1044
+ box-shadow: @dividedBorder;
1067
1045
  }
1068
- }
1069
1046
 
1047
+ & when (@variationGridVertical) {
1048
+ /* Swap from padding to margin on columns to have dividers align */
1049
+ .ui[class*="vertically divided"].grid > .column:not(.row),
1050
+ .ui[class*="vertically divided"].grid > .row > .column {
1051
+ margin-top: (@rowSpacing / 2);
1052
+ margin-bottom: (@rowSpacing / 2);
1053
+ padding-top: 0;
1054
+ padding-bottom: 0;
1055
+ }
1056
+ .ui[class*="vertically divided"].grid > .row {
1057
+ margin-top: 0;
1058
+ margin-bottom: 0;
1059
+ }
1060
+ }
1070
1061
 
1062
+ /* No divider on first column on row */
1063
+ .ui.divided.grid:not([class*="vertically divided"]) > .column:first-child,
1064
+ .ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
1065
+ box-shadow: none;
1066
+ }
1071
1067
 
1072
- /* No divider on first column on row */
1073
- .ui.divided.grid:not([class*="vertically divided"]) > .column:first-child,
1074
- .ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
1075
- box-shadow: none;
1076
- }
1068
+ & when (@variationGridVertical) {
1069
+ /* No space on top of first row */
1070
+ .ui[class*="vertically divided"].grid > .row:first-child > .column {
1071
+ margin-top: 0;
1072
+ }
1073
+ }
1077
1074
 
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;
1075
+ /* Divided Row */
1076
+ .ui.grid > .divided.row > .column {
1077
+ box-shadow: @dividedBorder;
1078
+ }
1079
+ .ui.grid > .divided.row > .column:first-child {
1080
+ box-shadow: none;
1082
1081
  }
1083
- }
1084
1082
 
1083
+ & when (@variationGridVertical) {
1084
+ /* Vertically Divided */
1085
+ .ui[class*="vertically divided"].grid > .row {
1086
+ position: relative;
1087
+ }
1088
+ .ui[class*="vertically divided"].grid > .row::before {
1089
+ position: absolute;
1090
+ content: "";
1091
+ top: 0;
1092
+ left: 0;
1093
+ width: e(%("calc(100%% - %d)", @gutterWidth));
1094
+ height: 1px;
1095
+ margin: 0 (@gutterWidth / 2);
1096
+ box-shadow: @verticallyDividedBorder;
1097
+ }
1098
+ }
1085
1099
 
1086
- /* Divided Row */
1087
- .ui.grid > .divided.row > .column {
1088
- box-shadow: @dividedBorder;
1089
- }
1090
- .ui.grid > .divided.row > .column:first-child {
1091
- box-shadow: none;
1092
- }
1093
-
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;
1104
-
1105
- width: e(%("calc(100%% - %d)", @gutterWidth));
1106
- height: 1px;
1107
-
1108
- margin: 0 (@gutterWidth / 2);
1109
- box-shadow: @verticallyDividedBorder;
1110
- }
1111
- }
1112
-
1113
- & when (@variationGridPadded) {
1114
- /* Padded Horizontally Divided */
1115
- [class*="horizontally padded"].ui.divided.grid,
1116
- .ui.padded.divided.grid:not(.vertically):not(.horizontally) {
1117
- width: 100%;
1118
- }
1119
- }
1120
- & when (@variationGridVertical) {
1121
- /* First Row Vertically Divided */
1122
- .ui[class*="vertically divided"].grid > .row:first-child::before {
1123
- box-shadow: none;
1124
- }
1125
- }
1126
- & when (@variationGridInverted) {
1127
- /* Inverted Divided */
1128
- .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
1129
- .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column {
1130
- box-shadow: @dividedInvertedBorder;
1131
- }
1132
- .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child,
1133
- .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
1134
- box-shadow: none;
1100
+ & when (@variationGridPadded) {
1101
+ /* Padded Horizontally Divided */
1102
+ [class*="horizontally padded"].ui.divided.grid,
1103
+ .ui.padded.divided.grid:not(.vertically):not(.horizontally) {
1104
+ width: 100%;
1105
+ }
1135
1106
  }
1136
1107
  & when (@variationGridVertical) {
1137
- .ui.inverted[class*="vertically divided"].grid > .row::before {
1138
- box-shadow: @verticallyDividedInvertedBorder;
1139
- }
1140
- }
1141
- }
1142
- & when (@variationGridRelaxed) and (@variationGridVertical) {
1143
- /* Relaxed */
1144
- .ui.relaxed[class*="vertically divided"].grid > .row::before {
1145
- margin-left: (@relaxedGutterWidth / 2);
1146
- margin-right: (@relaxedGutterWidth / 2);
1147
- width: e(%("calc(100%% - %d)", @relaxedGutterWidth));
1108
+ /* First Row Vertically Divided */
1109
+ .ui[class*="vertically divided"].grid > .row:first-child::before {
1110
+ box-shadow: none;
1111
+ }
1148
1112
  }
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
- }
1113
+ & when (@variationGridInverted) {
1114
+ /* Inverted Divided */
1115
+ .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row),
1116
+ .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column {
1117
+ box-shadow: @dividedInvertedBorder;
1118
+ }
1119
+ .ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child,
1120
+ .ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
1121
+ box-shadow: none;
1122
+ }
1123
+ & when (@variationGridVertical) {
1124
+ .ui.inverted[class*="vertically divided"].grid > .row::before {
1125
+ box-shadow: @verticallyDividedInvertedBorder;
1126
+ }
1127
+ }
1128
+ }
1129
+ & when (@variationGridRelaxed) and (@variationGridVertical) {
1130
+ /* Relaxed */
1131
+ .ui.relaxed[class*="vertically divided"].grid > .row::before {
1132
+ margin-left: (@relaxedGutterWidth / 2);
1133
+ margin-right: (@relaxedGutterWidth / 2);
1134
+ width: e(%("calc(100%% - %d)", @relaxedGutterWidth));
1135
+ }
1136
+ & when (@variationGridVeryRelaxed) {
1137
+ .ui[class*="very relaxed"][class*="vertically divided"].grid > .row::before {
1138
+ margin-left: (@veryRelaxedGutterWidth / 2);
1139
+ margin-right: (@veryRelaxedGutterWidth / 2);
1140
+ width: e(%("calc(100%% - %d)", @veryRelaxedGutterWidth));
1141
+ }
1142
+ }
1155
1143
  }
1156
- }
1157
1144
  }
1158
1145
 
1159
1146
  & when (@variationGridCelled) {
1160
- /*----------------------
1161
- Celled
1162
- -----------------------*/
1147
+ /* ----------------------
1148
+ Celled
1149
+ ----------------------- */
1163
1150
 
1164
- .ui.celled.grid {
1165
- width: 100%;
1166
- margin: @celledMargin;
1167
- box-shadow: @celledGridDivider;
1168
- }
1151
+ .ui.celled.grid {
1152
+ width: 100%;
1153
+ margin: @celledMargin;
1154
+ box-shadow: @celledGridDivider;
1155
+ }
1169
1156
 
1170
- .ui.celled.grid > .row {
1171
- width: 100% !important;
1172
- margin: 0;
1173
- padding: 0;
1174
- box-shadow: @celledRowDivider;
1175
- }
1176
- .ui.celled.grid > .column:not(.row),
1177
- .ui.celled.grid > .row > .column {
1178
- box-shadow: @celledColumnDivider;
1179
- }
1180
-
1181
- .ui.celled.grid > .column:first-child,
1182
- .ui.celled.grid > .row > .column:first-child {
1183
- box-shadow: none;
1184
- }
1185
-
1186
- .ui.celled.grid > .column:not(.row),
1187
- .ui.celled.grid > .row > .column {
1188
- padding: @celledPadding;
1189
- }
1190
- & when (@variationGridRelaxed) {
1191
- .ui.relaxed.celled.grid > .column:not(.row),
1192
- .ui.relaxed.celled.grid > .row > .column {
1193
- padding: @celledRelaxedPadding;
1194
- }
1195
- }
1196
- & when (@variationGridVeryRelaxed) {
1197
- .ui[class*="very relaxed"].celled.grid > .column:not(.row),
1198
- .ui[class*="very relaxed"].celled.grid > .row > .column {
1199
- padding: @celledVeryRelaxedPadding;
1200
- }
1201
- }
1202
- /* Internally Celled */
1203
- .ui[class*="internally celled"].grid {
1204
- box-shadow: none;
1205
- margin: 0;
1206
- }
1207
- .ui[class*="internally celled"].grid > .row:first-child {
1208
- box-shadow: none;
1209
- }
1210
- .ui[class*="internally celled"].grid > .row > .column:first-child {
1211
- box-shadow: none;
1212
- }
1157
+ .ui.celled.grid > .row {
1158
+ width: 100% !important;
1159
+ margin: 0;
1160
+ padding: 0;
1161
+ box-shadow: @celledRowDivider;
1162
+ }
1163
+ .ui.celled.grid > .column:not(.row),
1164
+ .ui.celled.grid > .row > .column {
1165
+ box-shadow: @celledColumnDivider;
1166
+ }
1167
+
1168
+ .ui.celled.grid > .column:first-child,
1169
+ .ui.celled.grid > .row > .column:first-child {
1170
+ box-shadow: none;
1171
+ }
1172
+
1173
+ .ui.celled.grid > .column:not(.row),
1174
+ .ui.celled.grid > .row > .column {
1175
+ padding: @celledPadding;
1176
+ }
1177
+ & when (@variationGridRelaxed) {
1178
+ .ui.relaxed.celled.grid > .column:not(.row),
1179
+ .ui.relaxed.celled.grid > .row > .column {
1180
+ padding: @celledRelaxedPadding;
1181
+ }
1182
+ }
1183
+ & when (@variationGridVeryRelaxed) {
1184
+ .ui[class*="very relaxed"].celled.grid > .column:not(.row),
1185
+ .ui[class*="very relaxed"].celled.grid > .row > .column {
1186
+ padding: @celledVeryRelaxedPadding;
1187
+ }
1188
+ }
1189
+
1190
+ /* Internally Celled */
1191
+ .ui[class*="internally celled"].grid {
1192
+ box-shadow: none;
1193
+ margin: 0;
1194
+ }
1195
+ .ui[class*="internally celled"].grid > .row:first-child {
1196
+ box-shadow: none;
1197
+ }
1198
+ .ui[class*="internally celled"].grid > .row > .column:first-child {
1199
+ box-shadow: none;
1200
+ }
1213
1201
  }
1214
1202
 
1215
1203
  & when (@variationGridAligned) {
1216
- /*----------------------
1217
- Vertically Aligned
1218
- -----------------------*/
1219
-
1220
- /* Top Aligned */
1221
- .ui[class*="top aligned"].grid > .column:not(.row),
1222
- .ui[class*="top aligned"].grid > .row > .column,
1223
- .ui.grid > [class*="top aligned"].row > .column,
1224
- .ui.grid > [class*="top aligned"].column:not(.row),
1225
- .ui.grid > .row > [class*="top aligned"].column {
1226
- flex-direction: column;
1227
- vertical-align: top;
1228
- align-self: flex-start !important;
1229
- }
1230
-
1231
- /* Middle Aligned */
1232
- .ui[class*="middle aligned"].grid > .column:not(.row),
1233
- .ui[class*="middle aligned"].grid > .row > .column,
1234
- .ui.grid > [class*="middle aligned"].row > .column,
1235
- .ui.grid > [class*="middle aligned"].column:not(.row),
1236
- .ui.grid > .row > [class*="middle aligned"].column {
1237
- flex-direction: column;
1238
- vertical-align: middle;
1239
- align-self: center !important;
1240
- }
1241
-
1242
- /* Bottom Aligned */
1243
- .ui[class*="bottom aligned"].grid > .column:not(.row),
1244
- .ui[class*="bottom aligned"].grid > .row > .column,
1245
- .ui.grid > [class*="bottom aligned"].row > .column,
1246
- .ui.grid > [class*="bottom aligned"].column:not(.row),
1247
- .ui.grid > .row > [class*="bottom aligned"].column {
1248
- flex-direction: column;
1249
- vertical-align: bottom;
1250
- align-self: flex-end !important;
1251
- }
1204
+ /* ----------------------
1205
+ Vertically Aligned
1206
+ ----------------------- */
1207
+
1208
+ /* Top Aligned */
1209
+ .ui[class*="top aligned"].grid > .column:not(.row),
1210
+ .ui[class*="top aligned"].grid > .row > .column,
1211
+ .ui.grid > [class*="top aligned"].row > .column,
1212
+ .ui.grid > [class*="top aligned"].column:not(.row),
1213
+ .ui.grid > .row > [class*="top aligned"].column {
1214
+ flex-direction: column;
1215
+ vertical-align: top;
1216
+ align-self: flex-start !important;
1217
+ }
1218
+
1219
+ /* Middle Aligned */
1220
+ .ui[class*="middle aligned"].grid > .column:not(.row),
1221
+ .ui[class*="middle aligned"].grid > .row > .column,
1222
+ .ui.grid > [class*="middle aligned"].row > .column,
1223
+ .ui.grid > [class*="middle aligned"].column:not(.row),
1224
+ .ui.grid > .row > [class*="middle aligned"].column {
1225
+ flex-direction: column;
1226
+ vertical-align: middle;
1227
+ align-self: center !important;
1228
+ }
1229
+
1230
+ /* Bottom Aligned */
1231
+ .ui[class*="bottom aligned"].grid > .column:not(.row),
1232
+ .ui[class*="bottom aligned"].grid > .row > .column,
1233
+ .ui.grid > [class*="bottom aligned"].row > .column,
1234
+ .ui.grid > [class*="bottom aligned"].column:not(.row),
1235
+ .ui.grid > .row > [class*="bottom aligned"].column {
1236
+ flex-direction: column;
1237
+ vertical-align: bottom;
1238
+ align-self: flex-end !important;
1239
+ }
1252
1240
  }
1253
1241
 
1254
1242
  & when (@variationGridStretched) {
1255
- /* Stretched */
1256
- .ui.stretched.grid > .row > .column,
1257
- .ui.stretched.grid > .column,
1258
- .ui.grid > .stretched.row > .column,
1259
- .ui.grid > .stretched.column:not(.row),
1260
- .ui.grid > .row > .stretched.column {
1261
- display: inline-flex !important;
1262
- align-self: stretch;
1263
- flex-direction: column;
1264
- }
1265
-
1266
- .ui.stretched.grid > .row > .column > *,
1267
- .ui.stretched.grid > .column > *,
1268
- .ui.grid > .stretched.row > .column > *,
1269
- .ui.grid > .stretched.column:not(.row) > *,
1270
- .ui.grid > .row > .stretched.column > * {
1271
- flex-grow: 1;
1272
- }
1243
+ /* Stretched */
1244
+ .ui.stretched.grid > .row > .column,
1245
+ .ui.stretched.grid > .column,
1246
+ .ui.grid > .stretched.row > .column,
1247
+ .ui.grid > .stretched.column:not(.row),
1248
+ .ui.grid > .row > .stretched.column {
1249
+ display: inline-flex !important;
1250
+ align-self: stretch;
1251
+ flex-direction: column;
1252
+ }
1253
+
1254
+ .ui.stretched.grid > .row > .column > *,
1255
+ .ui.stretched.grid > .column > *,
1256
+ .ui.grid > .stretched.row > .column > *,
1257
+ .ui.grid > .stretched.column:not(.row) > *,
1258
+ .ui.grid > .row > .stretched.column > * {
1259
+ flex-grow: 1;
1260
+ }
1273
1261
  }
1274
1262
 
1275
1263
  & when (@variationGridAligned) {
1276
- /*----------------------
1277
- Horizontally Centered
1278
- -----------------------*/
1279
-
1280
- /* Left Aligned */
1281
-
1282
- .ui[class*="left aligned"].grid > .column,
1283
- .ui[class*="left aligned"].grid > .row > .column,
1284
- .ui.grid > [class*="left aligned"].row > .column,
1285
- .ui.grid > [class*="left aligned"].column.column,
1286
- .ui.grid > .row > [class*="left aligned"].column.column {
1287
- text-align: left;
1288
- align-self: inherit;
1289
- }
1290
-
1291
- /* Center Aligned */
1292
-
1293
- .ui[class*="center aligned"].grid > .column,
1294
- .ui[class*="center aligned"].grid > .row > .column,
1295
- .ui.grid > [class*="center aligned"].row > .column,
1296
- .ui.grid > [class*="center aligned"].column.column,
1297
- .ui.grid > .row > [class*="center aligned"].column.column {
1298
- text-align: center;
1299
- align-self: inherit;
1300
- }
1301
-
1302
- .ui[class*="center aligned"].grid {
1303
- justify-content: center;
1304
- }
1305
-
1306
- /* Right Aligned */
1307
-
1308
- .ui[class*="right aligned"].grid > .column,
1309
- .ui[class*="right aligned"].grid > .row > .column,
1310
- .ui.grid > [class*="right aligned"].row > .column,
1311
- .ui.grid > [class*="right aligned"].column.column,
1312
- .ui.grid > .row > [class*="right aligned"].column.column {
1313
- text-align: right;
1314
- align-self: inherit;
1315
- }
1264
+ /* ----------------------
1265
+ Horizontally Centered
1266
+ ----------------------- */
1267
+
1268
+ /* Left Aligned */
1269
+
1270
+ .ui[class*="left aligned"].grid > .column,
1271
+ .ui[class*="left aligned"].grid > .row > .column,
1272
+ .ui.grid > [class*="left aligned"].row > .column,
1273
+ .ui.grid > [class*="left aligned"].column.column,
1274
+ .ui.grid > .row > [class*="left aligned"].column.column {
1275
+ text-align: left;
1276
+ align-self: inherit;
1277
+ }
1278
+
1279
+ /* Center Aligned */
1280
+
1281
+ .ui[class*="center aligned"].grid > .column,
1282
+ .ui[class*="center aligned"].grid > .row > .column,
1283
+ .ui.grid > [class*="center aligned"].row > .column,
1284
+ .ui.grid > [class*="center aligned"].column.column,
1285
+ .ui.grid > .row > [class*="center aligned"].column.column {
1286
+ text-align: center;
1287
+ align-self: inherit;
1288
+ }
1289
+
1290
+ .ui[class*="center aligned"].grid {
1291
+ justify-content: center;
1292
+ }
1293
+
1294
+ /* Right Aligned */
1295
+
1296
+ .ui[class*="right aligned"].grid > .column,
1297
+ .ui[class*="right aligned"].grid > .row > .column,
1298
+ .ui.grid > [class*="right aligned"].row > .column,
1299
+ .ui.grid > [class*="right aligned"].column.column,
1300
+ .ui.grid > .row > [class*="right aligned"].column.column {
1301
+ text-align: right;
1302
+ align-self: inherit;
1303
+ }
1316
1304
  }
1317
1305
 
1318
1306
  & when (@variationGridJustified) {
1319
- /* Justified */
1320
- .ui.justified.grid > .column,
1321
- .ui.justified.grid > .row > .column,
1322
- .ui.grid > .justified.row > .column,
1323
- .ui.grid > .justified.column.column,
1324
- .ui.grid > .row > .justified.column.column {
1325
- text-align: justify;
1326
- hyphens: auto;
1327
- }
1328
- }
1329
-
1330
- /*----------------------
1331
- Colored
1332
- -----------------------*/
1333
- & when not (@variationGridColors = false) {
1334
- each(@variationGridColors, {
1335
- @color: @value;
1336
- @c: @colors[@@color][color];
1337
-
1338
- .ui.grid > .@{color}.row,
1339
- .ui.grid > .@{color}.column,
1340
- .ui.grid > .row > .@{color}.column {
1341
- background-color: @c;
1342
- color: @white;
1307
+ /* Justified */
1308
+ .ui.justified.grid > .column,
1309
+ .ui.justified.grid > .row > .column,
1310
+ .ui.grid > .justified.row > .column,
1311
+ .ui.grid > .justified.column.column,
1312
+ .ui.grid > .row > .justified.column.column {
1313
+ text-align: justify;
1314
+ hyphens: auto;
1343
1315
  }
1344
- })
1345
1316
  }
1346
1317
 
1318
+ /* ----------------------
1319
+ Colored
1320
+ ----------------------- */
1321
+ & when not (@variationGridColors = false) {
1322
+ each(@variationGridColors, {
1323
+ @color: @value;
1324
+ @c: @colors[@@color][color];
1325
+
1326
+ .ui.grid > .@{color}.row,
1327
+ .ui.grid > .@{color}.column,
1328
+ .ui.grid > .row > .@{color}.column {
1329
+ background-color: @c;
1330
+ color: @white;
1331
+ }
1332
+ });
1333
+ }
1347
1334
 
1348
1335
  & when (@variationGridEqualWidth) {
1349
- /*----------------------
1350
- Equal Width
1351
- -----------------------*/
1336
+ /* ----------------------
1337
+ Equal Width
1338
+ ----------------------- */
1352
1339
 
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
- }
1340
+ .ui[class*="equal width"].grid > .column:not(.row),
1341
+ .ui[class*="equal width"].grid > .row > .column,
1342
+ .ui.grid > [class*="equal width"].row > .column {
1343
+ display: inline-block;
1344
+ flex-grow: 1;
1345
+ }
1346
+ .ui[class*="equal width"].grid > .wide.column,
1347
+ .ui[class*="equal width"].grid > .row > .wide.column,
1348
+ .ui.grid > [class*="equal width"].row > .wide.column {
1349
+ flex-grow: 0;
1350
+ }
1364
1351
  }
1365
1352
 
1366
1353
  & when (@variationGridReversed) {
1367
- /*----------------------
1368
- Reverse
1369
- -----------------------*/
1370
-
1371
-
1372
- /* Mobile */
1373
- @media only screen and (max-width: @largestMobileScreen) {
1374
- .ui[class*="mobile reversed"].grid,
1375
- .ui[class*="mobile reversed"].grid > .row,
1376
- .ui.grid > [class*="mobile reversed"].row {
1377
- flex-direction: row-reverse;
1378
- }
1379
- .ui[class*="mobile vertically reversed"].grid,
1380
- .ui.stackable[class*="mobile reversed"] {
1381
- flex-direction: column-reverse;
1382
- }
1383
- & when (@variationGridDivided) {
1384
- /* Divided Reversed */
1385
- .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
1386
- .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
1387
- box-shadow: @dividedBorder;
1388
- }
1389
- .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
1390
- .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
1391
- box-shadow: none;
1392
- }
1393
- /* Vertically Divided Reversed */
1394
- .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child::before {
1395
- box-shadow: @verticallyDividedBorder;
1396
- }
1397
- .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child::before {
1398
- box-shadow: none;
1399
- }
1400
- }
1401
- & when (@variationGridCelled) {
1402
- /* Celled Reversed */
1403
- .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child {
1404
- box-shadow: @celledColumnDivider;
1405
- }
1406
- .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child {
1407
- box-shadow: none;
1408
- }
1354
+ /* ----------------------
1355
+ Reverse
1356
+ ----------------------- */
1357
+
1358
+ /* Mobile */
1359
+ @media only screen and (max-width: @largestMobileScreen) {
1360
+ .ui[class*="mobile reversed"].grid,
1361
+ .ui[class*="mobile reversed"].grid > .row,
1362
+ .ui.grid > [class*="mobile reversed"].row {
1363
+ flex-direction: row-reverse;
1364
+ }
1365
+ .ui[class*="mobile vertically reversed"].grid,
1366
+ .ui.stackable[class*="mobile reversed"] {
1367
+ flex-direction: column-reverse;
1368
+ }
1369
+ & when (@variationGridDivided) {
1370
+ /* Divided Reversed */
1371
+ .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
1372
+ .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
1373
+ box-shadow: @dividedBorder;
1374
+ }
1375
+ .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
1376
+ .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
1377
+ box-shadow: none;
1378
+ }
1379
+
1380
+ /* Vertically Divided Reversed */
1381
+ .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child::before {
1382
+ box-shadow: @verticallyDividedBorder;
1383
+ }
1384
+ .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child::before {
1385
+ box-shadow: none;
1386
+ }
1387
+ }
1388
+ & when (@variationGridCelled) {
1389
+ /* Celled Reversed */
1390
+ .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child {
1391
+ box-shadow: @celledColumnDivider;
1392
+ }
1393
+ .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child {
1394
+ box-shadow: none;
1395
+ }
1396
+ }
1409
1397
  }
1410
- }
1411
1398
 
1412
- /* Tablet */
1413
- @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
1414
- .ui[class*="tablet reversed"].grid,
1415
- .ui[class*="tablet reversed"].grid > .row,
1416
- .ui.grid > [class*="tablet reversed"].row {
1417
- flex-direction: row-reverse;
1418
- }
1419
- .ui[class*="tablet vertically reversed"].grid {
1420
- flex-direction: column-reverse;
1421
- }
1422
- & when (@variationGridDivided) {
1423
- /* Divided Reversed */
1424
- .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
1425
- .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
1426
- box-shadow: @dividedBorder;
1427
- }
1428
- .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
1429
- .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
1430
- box-shadow: none;
1431
- }
1432
- /* Vertically Divided Reversed */
1433
- .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child::before {
1434
- box-shadow: @verticallyDividedBorder;
1435
- }
1436
- .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child::before {
1437
- box-shadow: none;
1438
- }
1439
- }
1440
- & when (@variationGridCelled) {
1441
- /* Celled Reversed */
1442
- .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child {
1443
- box-shadow: @celledColumnDivider;
1444
- }
1445
- .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child {
1446
- box-shadow: none;
1447
- }
1399
+ /* Tablet */
1400
+ @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
1401
+ .ui[class*="tablet reversed"].grid,
1402
+ .ui[class*="tablet reversed"].grid > .row,
1403
+ .ui.grid > [class*="tablet reversed"].row {
1404
+ flex-direction: row-reverse;
1405
+ }
1406
+ .ui[class*="tablet vertically reversed"].grid {
1407
+ flex-direction: column-reverse;
1408
+ }
1409
+ & when (@variationGridDivided) {
1410
+ /* Divided Reversed */
1411
+ .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
1412
+ .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
1413
+ box-shadow: @dividedBorder;
1414
+ }
1415
+ .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
1416
+ .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
1417
+ box-shadow: none;
1418
+ }
1419
+
1420
+ /* Vertically Divided Reversed */
1421
+ .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child::before {
1422
+ box-shadow: @verticallyDividedBorder;
1423
+ }
1424
+ .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child::before {
1425
+ box-shadow: none;
1426
+ }
1427
+ }
1428
+ & when (@variationGridCelled) {
1429
+ /* Celled Reversed */
1430
+ .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child {
1431
+ box-shadow: @celledColumnDivider;
1432
+ }
1433
+ .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child {
1434
+ box-shadow: none;
1435
+ }
1436
+ }
1448
1437
  }
1449
- }
1450
1438
 
1451
- /* Computer */
1452
- @media only screen and (min-width: @computerBreakpoint) {
1453
- .ui[class*="computer reversed"].grid,
1454
- .ui[class*="computer reversed"].grid > .row,
1455
- .ui.grid > [class*="computer reversed"].row {
1456
- flex-direction: row-reverse;
1457
- }
1458
- .ui[class*="computer vertically reversed"].grid {
1459
- flex-direction: column-reverse;
1460
- }
1461
- & when (@variationGridDivided) {
1462
- /* Divided Reversed */
1463
- .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
1464
- .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
1465
- box-shadow: @dividedBorder;
1466
- }
1467
- .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
1468
- .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
1469
- box-shadow: none;
1470
- }
1471
- /* Vertically Divided Reversed */
1472
- .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child::before {
1473
- box-shadow: @verticallyDividedBorder;
1474
- }
1475
- .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child::before {
1476
- box-shadow: none;
1477
- }
1478
- }
1479
- & when (@variationGridCelled) {
1480
- /* Celled Reversed */
1481
- .ui[class*="computer reversed"].celled.grid > .row > .column:first-child {
1482
- box-shadow: @celledColumnDivider;
1483
- }
1484
- .ui[class*="computer reversed"].celled.grid > .row > .column:last-child {
1485
- box-shadow: none;
1486
- }
1439
+ /* Computer */
1440
+ @media only screen and (min-width: @computerBreakpoint) {
1441
+ .ui[class*="computer reversed"].grid,
1442
+ .ui[class*="computer reversed"].grid > .row,
1443
+ .ui.grid > [class*="computer reversed"].row {
1444
+ flex-direction: row-reverse;
1445
+ }
1446
+ .ui[class*="computer vertically reversed"].grid {
1447
+ flex-direction: column-reverse;
1448
+ }
1449
+ & when (@variationGridDivided) {
1450
+ /* Divided Reversed */
1451
+ .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child,
1452
+ .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child {
1453
+ box-shadow: @dividedBorder;
1454
+ }
1455
+ .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child,
1456
+ .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child {
1457
+ box-shadow: none;
1458
+ }
1459
+
1460
+ /* Vertically Divided Reversed */
1461
+ .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child::before {
1462
+ box-shadow: @verticallyDividedBorder;
1463
+ }
1464
+ .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child::before {
1465
+ box-shadow: none;
1466
+ }
1467
+ }
1468
+ & when (@variationGridCelled) {
1469
+ /* Celled Reversed */
1470
+ .ui[class*="computer reversed"].celled.grid > .row > .column:first-child {
1471
+ box-shadow: @celledColumnDivider;
1472
+ }
1473
+ .ui[class*="computer reversed"].celled.grid > .row > .column:last-child {
1474
+ box-shadow: none;
1475
+ }
1476
+ }
1487
1477
  }
1488
- }
1489
1478
  }
1490
1479
 
1491
1480
  & when (@variationGridDoubling) {
1492
- /*-------------------
1493
- Doubling
1494
- --------------------*/
1495
-
1496
- /* Tablet Only */
1497
- @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
1498
- .ui.doubling.grid {
1499
- width: auto;
1500
- }
1501
- .ui.grid > .doubling.row,
1502
- .ui.doubling.grid > .row {
1503
- margin: 0 !important;
1504
- padding: 0 !important;
1505
- }
1506
- .ui.grid > .doubling.row > .column,
1507
- .ui.doubling.grid > .row > .column {
1508
- padding-top: (@rowSpacing / 2) !important;
1509
- padding-bottom: (@rowSpacing / 2) !important;
1510
- box-shadow: none !important;
1511
- margin: 0;
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
- }
1517
- .ui[class*="two column"].doubling.grid > .row > .column,
1518
- .ui[class*="two column"].doubling.grid > .column:not(.row),
1519
- .ui.grid > [class*="two column"].doubling.row.row > .column {
1520
- width: @oneColumn !important;
1521
- }
1522
- .ui[class*="three column"].doubling.grid > .row > .column,
1523
- .ui[class*="three column"].doubling.grid > .column:not(.row),
1524
- .ui.grid > [class*="three column"].doubling.row.row > .column {
1525
- width: @twoColumn !important;
1526
- }
1527
- .ui[class*="four column"].doubling.grid > .row > .column,
1528
- .ui[class*="four column"].doubling.grid > .column:not(.row),
1529
- .ui.grid > [class*="four column"].doubling.row.row > .column {
1530
- width: @twoColumn !important;
1531
- }
1532
- .ui[class*="five column"].doubling.grid > .row > .column,
1533
- .ui[class*="five column"].doubling.grid > .column:not(.row),
1534
- .ui.grid > [class*="five column"].doubling.row.row > .column {
1535
- width: @threeColumn !important;
1536
- }
1537
- .ui[class*="six column"].doubling.grid > .row > .column,
1538
- .ui[class*="six column"].doubling.grid > .column:not(.row),
1539
- .ui.grid > [class*="six column"].doubling.row.row > .column {
1540
- width: @threeColumn !important;
1541
- }
1542
- .ui[class*="seven column"].doubling.grid > .row > .column,
1543
- .ui[class*="seven column"].doubling.grid > .column:not(.row),
1544
- .ui.grid > [class*="seven column"].doubling.row.row > .column {
1545
- width: @threeColumn !important;
1546
- }
1547
- .ui[class*="eight column"].doubling.grid > .row > .column,
1548
- .ui[class*="eight column"].doubling.grid > .column:not(.row),
1549
- .ui.grid > [class*="eight column"].doubling.row.row > .column {
1550
- width: @fourColumn !important;
1551
- }
1552
- .ui[class*="nine column"].doubling.grid > .row > .column,
1553
- .ui[class*="nine column"].doubling.grid > .column:not(.row),
1554
- .ui.grid > [class*="nine column"].doubling.row.row > .column {
1555
- width: @fourColumn !important;
1556
- }
1557
- .ui[class*="ten column"].doubling.grid > .row > .column,
1558
- .ui[class*="ten column"].doubling.grid > .column:not(.row),
1559
- .ui.grid > [class*="ten column"].doubling.row.row > .column {
1560
- width: @fiveColumn !important;
1561
- }
1562
- .ui[class*="eleven column"].doubling.grid > .row > .column,
1563
- .ui[class*="eleven column"].doubling.grid > .column:not(.row),
1564
- .ui.grid > [class*="eleven column"].doubling.row.row > .column {
1565
- width: @fiveColumn !important;
1566
- }
1567
- .ui[class*="twelve column"].doubling.grid > .row > .column,
1568
- .ui[class*="twelve column"].doubling.grid > .column:not(.row),
1569
- .ui.grid > [class*="twelve column"].doubling.row.row > .column {
1570
- width: @sixColumn !important;
1571
- }
1572
- .ui[class*="thirteen column"].doubling.grid > .row > .column,
1573
- .ui[class*="thirteen column"].doubling.grid > .column:not(.row),
1574
- .ui.grid > [class*="thirteen column"].doubling.row.row > .column {
1575
- width: @sixColumn !important;
1576
- }
1577
- .ui[class*="fourteen column"].doubling.grid > .row > .column,
1578
- .ui[class*="fourteen column"].doubling.grid > .column:not(.row),
1579
- .ui.grid > [class*="fourteen column"].doubling.row.row > .column {
1580
- width: @sevenColumn !important;
1581
- }
1582
- .ui[class*="fifteen column"].doubling.grid > .row > .column,
1583
- .ui[class*="fifteen column"].doubling.grid > .column:not(.row),
1584
- .ui.grid > [class*="fifteen column"].doubling.row.row > .column {
1585
- width: @sevenColumn !important;
1586
- }
1587
- .ui[class*="sixteen column"].doubling.grid > .row > .column,
1588
- .ui[class*="sixteen column"].doubling.grid > .column:not(.row),
1589
- .ui.grid > [class*="sixteen column"].doubling.row.row > .column {
1590
- width: @eightColumn !important;
1591
- }
1592
- }
1593
-
1594
- /* Mobile Only */
1595
- @media only screen and (max-width: @largestMobileScreen) {
1596
- .ui.grid > .doubling.row,
1597
- .ui.doubling.grid > .row {
1598
- margin: 0 !important;
1599
- padding: 0 !important;
1600
- }
1601
- .ui.grid > .doubling.row > .column,
1602
- .ui.doubling.grid > .row > .column {
1603
- padding-top: (@rowSpacing / 2) !important;
1604
- padding-bottom: (@rowSpacing / 2) !important;
1605
- margin: 0 !important;
1606
- box-shadow: none !important;
1607
- }
1608
- .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column,
1609
- .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row),
1610
- .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column {
1611
- width: @oneColumn !important;
1612
- }
1613
- .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column,
1614
- .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row),
1615
- .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column {
1616
- width: @twoColumn !important;
1617
- }
1618
- .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column,
1619
- .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row),
1620
- .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column {
1621
- width: @twoColumn !important;
1622
- }
1623
- .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column,
1624
- .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row),
1625
- .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column {
1626
- width: @twoColumn !important;
1627
- }
1628
- .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column,
1629
- .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row),
1630
- .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column {
1631
- width: @twoColumn !important;
1632
- }
1633
- .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column,
1634
- .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row),
1635
- .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column {
1636
- width: @twoColumn !important;
1637
- }
1638
- .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column,
1639
- .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row),
1640
- .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column {
1641
- width: @twoColumn !important;
1642
- }
1643
- .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column,
1644
- .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row),
1645
- .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column {
1646
- width: @threeColumn !important;
1647
- }
1648
- .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column,
1649
- .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row),
1650
- .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column {
1651
- width: @threeColumn !important;
1652
- }
1653
- .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column,
1654
- .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row),
1655
- .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column {
1656
- width: @threeColumn !important;
1657
- }
1658
- .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column,
1659
- .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row),
1660
- .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column {
1661
- width: @threeColumn !important;
1662
- }
1663
- .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column,
1664
- .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row),
1665
- .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column {
1666
- width: @threeColumn !important;
1667
- }
1668
- .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column,
1669
- .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row),
1670
- .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column {
1671
- width: @fourColumn !important;
1672
- }
1673
- .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column,
1674
- .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row),
1675
- .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column {
1676
- width: @fourColumn !important;
1677
- }
1678
- .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column,
1679
- .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row),
1680
- .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column {
1681
- width: @fourColumn !important;
1682
- }
1683
- }
1481
+ /* -------------------
1482
+ Doubling
1483
+ -------------------- */
1484
+
1485
+ /* Tablet Only */
1486
+ @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
1487
+ .ui.doubling.grid {
1488
+ width: auto;
1489
+ }
1490
+ .ui.grid > .doubling.row,
1491
+ .ui.doubling.grid > .row {
1492
+ margin: 0 !important;
1493
+ padding: 0 !important;
1494
+ }
1495
+ .ui.grid > .doubling.row > .column,
1496
+ .ui.doubling.grid > .row > .column {
1497
+ padding-top: (@rowSpacing / 2) !important;
1498
+ padding-bottom: (@rowSpacing / 2) !important;
1499
+ box-shadow: none !important;
1500
+ margin: 0;
1501
+ }
1502
+ .ui.grid:not(.stretched) > .doubling.row:not(.stretched) > .column:not(.stretched),
1503
+ .ui.doubling.grid:not(.stretched) > .row:not(.stretched) > .column:not(.stretched) {
1504
+ display: inline-block !important;
1505
+ }
1506
+ .ui[class*="two column"].doubling.grid > .row > .column,
1507
+ .ui[class*="two column"].doubling.grid > .column:not(.row),
1508
+ .ui.grid > [class*="two column"].doubling.row.row > .column {
1509
+ width: @oneColumn !important;
1510
+ }
1511
+ .ui[class*="three column"].doubling.grid > .row > .column,
1512
+ .ui[class*="three column"].doubling.grid > .column:not(.row),
1513
+ .ui.grid > [class*="three column"].doubling.row.row > .column {
1514
+ width: @twoColumn !important;
1515
+ }
1516
+ .ui[class*="four column"].doubling.grid > .row > .column,
1517
+ .ui[class*="four column"].doubling.grid > .column:not(.row),
1518
+ .ui.grid > [class*="four column"].doubling.row.row > .column {
1519
+ width: @twoColumn !important;
1520
+ }
1521
+ .ui[class*="five column"].doubling.grid > .row > .column,
1522
+ .ui[class*="five column"].doubling.grid > .column:not(.row),
1523
+ .ui.grid > [class*="five column"].doubling.row.row > .column {
1524
+ width: @threeColumn !important;
1525
+ }
1526
+ .ui[class*="six column"].doubling.grid > .row > .column,
1527
+ .ui[class*="six column"].doubling.grid > .column:not(.row),
1528
+ .ui.grid > [class*="six column"].doubling.row.row > .column {
1529
+ width: @threeColumn !important;
1530
+ }
1531
+ .ui[class*="seven column"].doubling.grid > .row > .column,
1532
+ .ui[class*="seven column"].doubling.grid > .column:not(.row),
1533
+ .ui.grid > [class*="seven column"].doubling.row.row > .column {
1534
+ width: @threeColumn !important;
1535
+ }
1536
+ .ui[class*="eight column"].doubling.grid > .row > .column,
1537
+ .ui[class*="eight column"].doubling.grid > .column:not(.row),
1538
+ .ui.grid > [class*="eight column"].doubling.row.row > .column {
1539
+ width: @fourColumn !important;
1540
+ }
1541
+ .ui[class*="nine column"].doubling.grid > .row > .column,
1542
+ .ui[class*="nine column"].doubling.grid > .column:not(.row),
1543
+ .ui.grid > [class*="nine column"].doubling.row.row > .column {
1544
+ width: @fourColumn !important;
1545
+ }
1546
+ .ui[class*="ten column"].doubling.grid > .row > .column,
1547
+ .ui[class*="ten column"].doubling.grid > .column:not(.row),
1548
+ .ui.grid > [class*="ten column"].doubling.row.row > .column {
1549
+ width: @fiveColumn !important;
1550
+ }
1551
+ .ui[class*="eleven column"].doubling.grid > .row > .column,
1552
+ .ui[class*="eleven column"].doubling.grid > .column:not(.row),
1553
+ .ui.grid > [class*="eleven column"].doubling.row.row > .column {
1554
+ width: @fiveColumn !important;
1555
+ }
1556
+ .ui[class*="twelve column"].doubling.grid > .row > .column,
1557
+ .ui[class*="twelve column"].doubling.grid > .column:not(.row),
1558
+ .ui.grid > [class*="twelve column"].doubling.row.row > .column {
1559
+ width: @sixColumn !important;
1560
+ }
1561
+ .ui[class*="thirteen column"].doubling.grid > .row > .column,
1562
+ .ui[class*="thirteen column"].doubling.grid > .column:not(.row),
1563
+ .ui.grid > [class*="thirteen column"].doubling.row.row > .column {
1564
+ width: @sixColumn !important;
1565
+ }
1566
+ .ui[class*="fourteen column"].doubling.grid > .row > .column,
1567
+ .ui[class*="fourteen column"].doubling.grid > .column:not(.row),
1568
+ .ui.grid > [class*="fourteen column"].doubling.row.row > .column {
1569
+ width: @sevenColumn !important;
1570
+ }
1571
+ .ui[class*="fifteen column"].doubling.grid > .row > .column,
1572
+ .ui[class*="fifteen column"].doubling.grid > .column:not(.row),
1573
+ .ui.grid > [class*="fifteen column"].doubling.row.row > .column {
1574
+ width: @sevenColumn !important;
1575
+ }
1576
+ .ui[class*="sixteen column"].doubling.grid > .row > .column,
1577
+ .ui[class*="sixteen column"].doubling.grid > .column:not(.row),
1578
+ .ui.grid > [class*="sixteen column"].doubling.row.row > .column {
1579
+ width: @eightColumn !important;
1580
+ }
1581
+ }
1582
+
1583
+ /* Mobile Only */
1584
+ @media only screen and (max-width: @largestMobileScreen) {
1585
+ .ui.grid > .doubling.row,
1586
+ .ui.doubling.grid > .row {
1587
+ margin: 0 !important;
1588
+ padding: 0 !important;
1589
+ }
1590
+ .ui.grid > .doubling.row > .column,
1591
+ .ui.doubling.grid > .row > .column {
1592
+ padding-top: (@rowSpacing / 2) !important;
1593
+ padding-bottom: (@rowSpacing / 2) !important;
1594
+ margin: 0 !important;
1595
+ box-shadow: none !important;
1596
+ }
1597
+ .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column,
1598
+ .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row),
1599
+ .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column {
1600
+ width: @oneColumn !important;
1601
+ }
1602
+ .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column,
1603
+ .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row),
1604
+ .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column {
1605
+ width: @twoColumn !important;
1606
+ }
1607
+ .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column,
1608
+ .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row),
1609
+ .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column {
1610
+ width: @twoColumn !important;
1611
+ }
1612
+ .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column,
1613
+ .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row),
1614
+ .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column {
1615
+ width: @twoColumn !important;
1616
+ }
1617
+ .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column,
1618
+ .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row),
1619
+ .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column {
1620
+ width: @twoColumn !important;
1621
+ }
1622
+ .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column,
1623
+ .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row),
1624
+ .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column {
1625
+ width: @twoColumn !important;
1626
+ }
1627
+ .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column,
1628
+ .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row),
1629
+ .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column {
1630
+ width: @twoColumn !important;
1631
+ }
1632
+ .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column,
1633
+ .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row),
1634
+ .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column {
1635
+ width: @threeColumn !important;
1636
+ }
1637
+ .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column,
1638
+ .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row),
1639
+ .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column {
1640
+ width: @threeColumn !important;
1641
+ }
1642
+ .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column,
1643
+ .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row),
1644
+ .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column {
1645
+ width: @threeColumn !important;
1646
+ }
1647
+ .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column,
1648
+ .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row),
1649
+ .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column {
1650
+ width: @threeColumn !important;
1651
+ }
1652
+ .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column,
1653
+ .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row),
1654
+ .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column {
1655
+ width: @threeColumn !important;
1656
+ }
1657
+ .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column,
1658
+ .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row),
1659
+ .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column {
1660
+ width: @fourColumn !important;
1661
+ }
1662
+ .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column,
1663
+ .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row),
1664
+ .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column {
1665
+ width: @fourColumn !important;
1666
+ }
1667
+ .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column,
1668
+ .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row),
1669
+ .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column {
1670
+ width: @fourColumn !important;
1671
+ }
1672
+ }
1684
1673
  }
1685
1674
 
1686
1675
  & when (@variationGridStackable) {
1687
- /*-------------------
1688
- Stackable
1689
- --------------------*/
1690
-
1691
- @media only screen and (max-width: @largestMobileScreen) {
1692
- .ui.ui.ui.ui.stackable.grid {
1693
- width: auto;
1694
- margin-left: 0 !important;
1695
- margin-right: 0 !important;
1696
- }
1697
- .ui.stackable.grid > .row > .wide.column,
1698
- .ui.stackable.grid > .wide.column,
1699
- .ui.stackable.grid > .column.grid > .column,
1700
- .ui.stackable.grid > .column.row > .column,
1701
- .ui.stackable.grid > .row > .column,
1702
- .ui.stackable.grid > .column:not(.row),
1703
- .ui.grid > .stackable.stackable.stackable.row > .column {
1704
- width: 100% !important;
1705
- margin: 0 0 !important;
1706
- box-shadow: none !important;
1707
- padding: (@stackableRowSpacing / 2) (@stackableGutter / 2);
1708
- }
1709
- .ui.stackable.grid:not(.vertically) > .row {
1710
- margin: 0;
1711
- padding: 0;
1712
- }
1713
-
1714
- /* Coupling */
1715
- .ui.container > .ui.stackable.grid > .column,
1716
- .ui.container > .ui.stackable.grid > .row > .column {
1717
- padding-left: 0 !important;
1718
- padding-right: 0 !important;
1719
- }
1720
-
1721
- /* Don't pad inside segment or nested grid */
1722
- .ui.grid .ui.stackable.grid,
1723
- .ui.segment:not(.vertical) .ui.stackable.page.grid {
1724
- margin-left: -(@stackableGutter / 2) !important;
1725
- margin-right: -(@stackableGutter / 2) !important;
1726
- }
1727
-
1728
- /* Divided Stackable */
1729
- .ui.stackable.divided.grid > .row:first-child > .column:first-child,
1730
- .ui.stackable.celled.grid > .row:first-child > .column:first-child,
1731
- .ui.stackable.divided.grid > .column:not(.row):first-child,
1732
- .ui.stackable.celled.grid > .column:not(.row):first-child {
1733
- border-top: none !important;
1676
+ /* -------------------
1677
+ Stackable
1678
+ -------------------- */
1679
+
1680
+ @media only screen and (max-width: @largestMobileScreen) {
1681
+ .ui.ui.ui.ui.stackable.grid {
1682
+ width: auto;
1683
+ margin-left: 0 !important;
1684
+ margin-right: 0 !important;
1685
+ }
1686
+ .ui.stackable.grid > .row > .wide.column,
1687
+ .ui.stackable.grid > .wide.column,
1688
+ .ui.stackable.grid > .column.grid > .column,
1689
+ .ui.stackable.grid > .column.row > .column,
1690
+ .ui.stackable.grid > .row > .column,
1691
+ .ui.stackable.grid > .column:not(.row),
1692
+ .ui.grid > .stackable.stackable.stackable.row > .column {
1693
+ width: 100% !important;
1694
+ margin: 0 !important;
1695
+ box-shadow: none !important;
1696
+ padding: (@stackableRowSpacing / 2) (@stackableGutter / 2);
1697
+ }
1698
+ .ui.stackable.grid:not(.vertically) > .row {
1699
+ margin: 0;
1700
+ padding: 0;
1701
+ }
1702
+
1703
+ /* Coupling */
1704
+ .ui.container > .ui.stackable.grid > .column,
1705
+ .ui.container > .ui.stackable.grid > .row > .column {
1706
+ padding-left: 0 !important;
1707
+ padding-right: 0 !important;
1708
+ }
1709
+
1710
+ /* Don't pad inside segment or nested grid */
1711
+ .ui.grid .ui.stackable.grid,
1712
+ .ui.segment:not(.vertical) .ui.stackable.page.grid {
1713
+ margin-left: -(@stackableGutter / 2) !important;
1714
+ margin-right: -(@stackableGutter / 2) !important;
1715
+ }
1716
+
1717
+ /* Divided Stackable */
1718
+ .ui.stackable.divided.grid > .row:first-child > .column:first-child,
1719
+ .ui.stackable.celled.grid > .row:first-child > .column:first-child,
1720
+ .ui.stackable.divided.grid > .column:not(.row):first-child,
1721
+ .ui.stackable.celled.grid > .column:not(.row):first-child {
1722
+ border-top: none !important;
1723
+ }
1724
+ & when (@variationGridInverted) {
1725
+ .ui.inverted.stackable.celled.grid > .column:not(.row),
1726
+ .ui.inverted.stackable.divided.grid > .column:not(.row),
1727
+ .ui.inverted.stackable.celled.grid > .row > .column,
1728
+ .ui.inverted.stackable.divided.grid > .row > .column {
1729
+ border-top: @stackableInvertedMobileBorder;
1730
+ }
1731
+ }
1732
+ .ui.stackable.celled.grid > .column:not(.row),
1733
+ .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
1734
+ .ui.stackable.celled.grid > .row > .column,
1735
+ .ui.stackable.divided:not(.vertically).grid > .row > .column {
1736
+ border-top: @stackableMobileBorder;
1737
+ box-shadow: none !important;
1738
+ padding-top: @stackableRowSpacing !important;
1739
+ padding-bottom: @stackableRowSpacing !important;
1740
+ }
1741
+ & when (@variationGridCelled) {
1742
+ .ui.stackable.celled.grid > .row {
1743
+ box-shadow: none !important;
1744
+ }
1745
+ }
1746
+ & when (@variationGridDivided) {
1747
+ .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
1748
+ .ui.stackable.divided:not(.vertically).grid > .row > .column {
1749
+ padding-left: 0 !important;
1750
+ padding-right: 0 !important;
1751
+ }
1752
+ }
1734
1753
  }
1735
- & when (@variationGridInverted) {
1736
- .ui.inverted.stackable.celled.grid > .column:not(.row),
1737
- .ui.inverted.stackable.divided.grid > .column:not(.row),
1738
- .ui.inverted.stackable.celled.grid > .row > .column,
1739
- .ui.inverted.stackable.divided.grid > .row > .column {
1740
- border-top: @stackableInvertedMobileBorder;
1741
- }
1742
- }
1743
- .ui.stackable.celled.grid > .column:not(.row),
1744
- .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
1745
- .ui.stackable.celled.grid > .row > .column,
1746
- .ui.stackable.divided:not(.vertically).grid > .row > .column {
1747
- border-top: @stackableMobileBorder;
1748
- box-shadow: none !important;
1749
- padding-top: @stackableRowSpacing !important;
1750
- padding-bottom: @stackableRowSpacing !important;
1751
- }
1752
- & when (@variationGridCelled) {
1753
- .ui.stackable.celled.grid > .row {
1754
- box-shadow: none !important;
1755
- }
1756
- }
1757
- & when (@variationGridDivided) {
1758
- .ui.stackable.divided:not(.vertically).grid > .column:not(.row),
1759
- .ui.stackable.divided:not(.vertically).grid > .row > .column {
1760
- padding-left: 0 !important;
1761
- padding-right: 0 !important;
1762
- }
1763
- }
1764
- }
1765
-
1766
- }
1767
-
1768
- /*----------------------
1769
- Only (Device)
1770
- -----------------------*/
1754
+ }
1771
1755
 
1756
+ /* ----------------------
1757
+ Only (Device)
1758
+ ----------------------- */
1772
1759
 
1773
1760
  /* These include arbitrary class repetitions for forced specificity */
1774
1761
 
1775
1762
  /* Mobile Only Hide */
1776
1763
  @media only screen and (max-width: @largestMobileScreen) {
1777
- .ui[class*="tablet only"].grid.grid.grid:not(.mobile),
1778
- .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile),
1779
- .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile),
1780
- .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) {
1781
- display: none !important;
1782
- }
1783
- .ui[class*="computer only"].grid.grid.grid:not(.mobile),
1784
- .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile),
1785
- .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile),
1786
- .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) {
1787
- display: none !important;
1788
- }
1789
- .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
1790
- .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
1791
- .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
1792
- .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
1793
- display: none !important;
1794
- }
1795
- .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
1796
- .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
1797
- .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
1798
- .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
1799
- display: none !important;
1800
- }
1764
+ .ui[class*="tablet only"].grid.grid.grid:not(.mobile),
1765
+ .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile),
1766
+ .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile),
1767
+ .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) {
1768
+ display: none !important;
1769
+ }
1770
+ .ui[class*="computer only"].grid.grid.grid:not(.mobile),
1771
+ .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile),
1772
+ .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile),
1773
+ .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) {
1774
+ display: none !important;
1775
+ }
1776
+ .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
1777
+ .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
1778
+ .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
1779
+ .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
1780
+ display: none !important;
1781
+ }
1782
+ .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
1783
+ .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
1784
+ .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
1785
+ .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
1786
+ display: none !important;
1787
+ }
1801
1788
  }
1789
+
1802
1790
  /* Tablet Only Hide */
1803
1791
  @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
1804
- .ui[class*="mobile only"].grid.grid.grid:not(.tablet),
1805
- .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet),
1806
- .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet),
1807
- .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) {
1808
- display: none !important;
1809
- }
1810
- .ui[class*="computer only"].grid.grid.grid:not(.tablet),
1811
- .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet),
1812
- .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet),
1813
- .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) {
1814
- display: none !important;
1815
- }
1816
- .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
1817
- .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
1818
- .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
1819
- .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
1820
- display: none !important;
1821
- }
1822
- .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
1823
- .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
1824
- .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
1825
- .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
1826
- display: none !important;
1827
- }
1792
+ .ui[class*="mobile only"].grid.grid.grid:not(.tablet),
1793
+ .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet),
1794
+ .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet),
1795
+ .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) {
1796
+ display: none !important;
1797
+ }
1798
+ .ui[class*="computer only"].grid.grid.grid:not(.tablet),
1799
+ .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet),
1800
+ .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet),
1801
+ .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) {
1802
+ display: none !important;
1803
+ }
1804
+ .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
1805
+ .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
1806
+ .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
1807
+ .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
1808
+ display: none !important;
1809
+ }
1810
+ .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
1811
+ .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
1812
+ .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
1813
+ .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
1814
+ display: none !important;
1815
+ }
1828
1816
  }
1829
1817
 
1830
1818
  /* Computer Only Hide */
1831
1819
  @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
1832
- .ui[class*="mobile only"].grid.grid.grid:not(.computer),
1833
- .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
1834
- .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
1835
- .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
1836
- display: none !important;
1837
- }
1838
- .ui[class*="tablet only"].grid.grid.grid:not(.computer),
1839
- .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
1840
- .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
1841
- .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
1842
- display: none !important;
1843
- }
1844
- .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
1845
- .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
1846
- .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
1847
- .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
1848
- display: none !important;
1849
- }
1850
- .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
1851
- .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
1852
- .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
1853
- .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
1854
- display: none !important;
1855
- }
1820
+ .ui[class*="mobile only"].grid.grid.grid:not(.computer),
1821
+ .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
1822
+ .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
1823
+ .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
1824
+ display: none !important;
1825
+ }
1826
+ .ui[class*="tablet only"].grid.grid.grid:not(.computer),
1827
+ .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
1828
+ .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
1829
+ .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
1830
+ display: none !important;
1831
+ }
1832
+ .ui[class*="large screen only"].grid.grid.grid:not(.mobile),
1833
+ .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile),
1834
+ .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile),
1835
+ .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) {
1836
+ display: none !important;
1837
+ }
1838
+ .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
1839
+ .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
1840
+ .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
1841
+ .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
1842
+ display: none !important;
1843
+ }
1856
1844
  }
1857
1845
 
1858
1846
  /* Large Screen Only Hide */
1859
1847
  @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
1860
- .ui[class*="mobile only"].grid.grid.grid:not(.computer),
1861
- .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
1862
- .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
1863
- .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
1864
- display: none !important;
1865
- }
1866
- .ui[class*="tablet only"].grid.grid.grid:not(.computer),
1867
- .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
1868
- .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
1869
- .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
1870
- display: none !important;
1871
- }
1872
- .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
1873
- .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
1874
- .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
1875
- .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
1876
- display: none !important;
1877
- }
1848
+ .ui[class*="mobile only"].grid.grid.grid:not(.computer),
1849
+ .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
1850
+ .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
1851
+ .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
1852
+ display: none !important;
1853
+ }
1854
+ .ui[class*="tablet only"].grid.grid.grid:not(.computer),
1855
+ .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
1856
+ .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
1857
+ .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
1858
+ display: none !important;
1859
+ }
1860
+ .ui[class*="widescreen only"].grid.grid.grid:not(.mobile),
1861
+ .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile),
1862
+ .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile),
1863
+ .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) {
1864
+ display: none !important;
1865
+ }
1878
1866
  }
1879
1867
 
1880
1868
  /* Widescreen Only Hide */
1881
1869
  @media only screen and (min-width: @widescreenMonitorBreakpoint) {
1882
- .ui[class*="mobile only"].grid.grid.grid:not(.computer),
1883
- .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
1884
- .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
1885
- .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
1886
- display: none !important;
1887
- }
1888
- .ui[class*="tablet only"].grid.grid.grid:not(.computer),
1889
- .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
1890
- .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
1891
- .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
1892
- display: none !important;
1893
- }
1894
- }
1895
-
1896
- & when (@variationGridCompact) {
1897
- /*-----------------
1898
- Compact
1899
- -----------------*/
1900
-
1901
- .ui.ui.ui.compact.grid {
1902
- margin: -(@compactGutterWidth / 2);
1903
- }
1904
-
1905
- .ui.ui.ui.compact.grid > .column:not(.row),
1906
- .ui.ui.ui.compact.grid > .row > .column {
1907
- padding-left: (@compactGutterWidth / 2);
1908
- padding-right: (@compactGutterWidth / 2);
1909
- }
1910
-
1911
- .ui.ui.ui.compact.grid > * {
1912
- padding-left: (@compactGutterWidth / 2);
1913
- padding-right: (@compactGutterWidth / 2);
1914
- }
1915
-
1916
- /* Row */
1917
- .ui.ui.ui.compact.grid > .row {
1918
- padding-top: (@compactRowSpacing / 2);
1919
- padding-bottom: (@compactRowSpacing / 2);
1920
- padding-left: 0;
1921
- padding-right: 0;
1922
- }
1923
-
1924
- /* Columns */
1925
- .ui.ui.ui.compact.grid > .column:not(.row) {
1926
- padding-top: (@compactRowSpacing / 2);
1927
- padding-bottom: (@compactRowSpacing / 2);
1928
- }
1929
- & when (@variationGridRelaxed) and (@variationGridCelled) {
1930
- /* Relaxed + Celled */
1931
- .ui.compact.relaxed.celled.grid > .column:not(.row),
1932
- .ui.compact.relaxed.celled.grid > .row > .column {
1933
- padding: @compactCelledRelaxedPadding;
1870
+ .ui[class*="mobile only"].grid.grid.grid:not(.computer),
1871
+ .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer),
1872
+ .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer),
1873
+ .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) {
1874
+ display: none !important;
1934
1875
  }
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
- }
1876
+ .ui[class*="tablet only"].grid.grid.grid:not(.computer),
1877
+ .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer),
1878
+ .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer),
1879
+ .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) {
1880
+ display: none !important;
1940
1881
  }
1941
- }
1882
+ }
1942
1883
 
1943
- /*-----------------
1944
- Very compact
1945
- -----------------*/
1884
+ & when (@variationGridCompact) {
1885
+ /* -----------------
1886
+ Compact
1887
+ ----------------- */
1946
1888
 
1947
- & when (@variationGridVeryCompact) {
1948
- .ui.ui.ui[class*="very compact"].grid {
1949
- margin: -(@veryCompactGutterWidth / 2);
1889
+ .ui.ui.ui.compact.grid {
1890
+ margin: -(@compactGutterWidth / 2);
1950
1891
  }
1951
1892
 
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);
1893
+ .ui.ui.ui.compact.grid > .column:not(.row),
1894
+ .ui.ui.ui.compact.grid > .row > .column {
1895
+ padding-left: (@compactGutterWidth / 2);
1896
+ padding-right: (@compactGutterWidth / 2);
1956
1897
  }
1957
1898
 
1958
- .ui.ui.ui[class*="very compact"].grid > * {
1959
- padding-left: (@veryCompactGutterWidth / 2);
1960
- padding-right: (@veryCompactGutterWidth / 2);
1899
+ .ui.ui.ui.compact.grid > * {
1900
+ padding-left: (@compactGutterWidth / 2);
1901
+ padding-right: (@compactGutterWidth / 2);
1961
1902
  }
1962
1903
 
1963
1904
  /* 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;
1905
+ .ui.ui.ui.compact.grid > .row {
1906
+ padding: (@compactRowSpacing / 2) 0;
1969
1907
  }
1970
1908
 
1971
1909
  /* Columns */
1972
- .ui.ui.ui[class*="very compact"].grid > .column:not(.row) {
1973
- padding-top: (@veryCompactRowSpacing / 2);
1974
- padding-bottom: (@veryCompactRowSpacing / 2);
1910
+ .ui.ui.ui.compact.grid > .column:not(.row) {
1911
+ padding-top: (@compactRowSpacing / 2);
1912
+ padding-bottom: (@compactRowSpacing / 2);
1975
1913
  }
1976
1914
  & 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;
1915
+ /* Relaxed + Celled */
1916
+ .ui.compact.relaxed.celled.grid > .column:not(.row),
1917
+ .ui.compact.relaxed.celled.grid > .row > .column {
1918
+ padding: @compactCelledRelaxedPadding;
1919
+ }
1920
+ & when (@variationGridVeryRelaxed) {
1921
+ .ui.compact[class*="very relaxed"].celled.grid > .column:not(.row),
1922
+ .ui.compact[class*="very relaxed"].celled.grid > .row > .column {
1923
+ padding: @compactCelledVeryRelaxedPadding;
1924
+ }
1986
1925
  }
1987
- }
1988
1926
  }
1989
- }
1990
- }
1991
1927
 
1928
+ /* -----------------
1929
+ Very compact
1930
+ ----------------- */
1931
+
1932
+ & when (@variationGridVeryCompact) {
1933
+ .ui.ui.ui[class*="very compact"].grid {
1934
+ margin: -(@veryCompactGutterWidth / 2);
1935
+ }
1936
+
1937
+ .ui.ui.ui[class*="very compact"].grid > .column:not(.row),
1938
+ .ui.ui.ui[class*="very compact"].grid > .row > .column {
1939
+ padding-left: (@veryCompactGutterWidth / 2);
1940
+ padding-right: (@veryCompactGutterWidth / 2);
1941
+ }
1942
+
1943
+ .ui.ui.ui[class*="very compact"].grid > * {
1944
+ padding-left: (@veryCompactGutterWidth / 2);
1945
+ padding-right: (@veryCompactGutterWidth / 2);
1946
+ }
1947
+
1948
+ /* Row */
1949
+ .ui.ui.ui[class*="very compact"].grid > .row {
1950
+ padding: (@veryCompactRowSpacing / 2) 0;
1951
+ }
1952
+
1953
+ /* Columns */
1954
+ .ui.ui.ui[class*="very compact"].grid > .column:not(.row) {
1955
+ padding-top: (@veryCompactRowSpacing / 2);
1956
+ padding-bottom: (@veryCompactRowSpacing / 2);
1957
+ }
1958
+ & when (@variationGridRelaxed) and (@variationGridCelled) {
1959
+ /* Relaxed + Celled */
1960
+ .ui[class*="very compact"].relaxed.celled.grid > .column:not(.row),
1961
+ .ui[class*="very compact"].relaxed.celled.grid > .row > .column {
1962
+ padding: @veryCompactCelledRelaxedPadding;
1963
+ }
1964
+ & when (@variationGridVeryRelaxed) {
1965
+ .ui[class*="very compact"][class*="very relaxed"].celled.grid > .column:not(.row),
1966
+ .ui[class*="very compact"][class*="very relaxed"].celled.grid > .row > .column {
1967
+ padding: @veryCompactCelledVeryRelaxedPadding;
1968
+ }
1969
+ }
1970
+ }
1971
+ }
1972
+ }
1992
1973
 
1993
1974
  .loadUIOverrides();