columns.sass 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504
  1. $column-gap: 0.75rem !default
  2. .column
  3. display: block
  4. flex-basis: 0
  5. flex-grow: 1
  6. flex-shrink: 1
  7. padding: $column-gap
  8. .columns.is-mobile > &.is-narrow
  9. flex: none
  10. .columns.is-mobile > &.is-full
  11. flex: none
  12. width: 100%
  13. .columns.is-mobile > &.is-three-quarters
  14. flex: none
  15. width: 75%
  16. .columns.is-mobile > &.is-two-thirds
  17. flex: none
  18. width: 66.6666%
  19. .columns.is-mobile > &.is-half
  20. flex: none
  21. width: 50%
  22. .columns.is-mobile > &.is-one-third
  23. flex: none
  24. width: 33.3333%
  25. .columns.is-mobile > &.is-one-quarter
  26. flex: none
  27. width: 25%
  28. .columns.is-mobile > &.is-one-fifth
  29. flex: none
  30. width: 20%
  31. .columns.is-mobile > &.is-two-fifths
  32. flex: none
  33. width: 40%
  34. .columns.is-mobile > &.is-three-fifths
  35. flex: none
  36. width: 60%
  37. .columns.is-mobile > &.is-four-fifths
  38. flex: none
  39. width: 80%
  40. .columns.is-mobile > &.is-offset-three-quarters
  41. margin-left: 75%
  42. .columns.is-mobile > &.is-offset-two-thirds
  43. margin-left: 66.6666%
  44. .columns.is-mobile > &.is-offset-half
  45. margin-left: 50%
  46. .columns.is-mobile > &.is-offset-one-third
  47. margin-left: 33.3333%
  48. .columns.is-mobile > &.is-offset-one-quarter
  49. margin-left: 25%
  50. .columns.is-mobile > &.is-offset-one-fifth
  51. margin-left: 20%
  52. .columns.is-mobile > &.is-offset-two-fifths
  53. margin-left: 40%
  54. .columns.is-mobile > &.is-offset-three-fifths
  55. margin-left: 60%
  56. .columns.is-mobile > &.is-offset-four-fifths
  57. margin-left: 80%
  58. @for $i from 0 through 12
  59. .columns.is-mobile > &.is-#{$i}
  60. flex: none
  61. width: percentage($i / 12)
  62. .columns.is-mobile > &.is-offset-#{$i}
  63. margin-left: percentage($i / 12)
  64. +mobile
  65. &.is-narrow-mobile
  66. flex: none
  67. &.is-full-mobile
  68. flex: none
  69. width: 100%
  70. &.is-three-quarters-mobile
  71. flex: none
  72. width: 75%
  73. &.is-two-thirds-mobile
  74. flex: none
  75. width: 66.6666%
  76. &.is-half-mobile
  77. flex: none
  78. width: 50%
  79. &.is-one-third-mobile
  80. flex: none
  81. width: 33.3333%
  82. &.is-one-quarter-mobile
  83. flex: none
  84. width: 25%
  85. &.is-one-fifth-mobile
  86. flex: none
  87. width: 20%
  88. &.is-two-fifths-mobile
  89. flex: none
  90. width: 40%
  91. &.is-three-fifths-mobile
  92. flex: none
  93. width: 60%
  94. &.is-four-fifths-mobile
  95. flex: none
  96. width: 80%
  97. &.is-offset-three-quarters-mobile
  98. margin-left: 75%
  99. &.is-offset-two-thirds-mobile
  100. margin-left: 66.6666%
  101. &.is-offset-half-mobile
  102. margin-left: 50%
  103. &.is-offset-one-third-mobile
  104. margin-left: 33.3333%
  105. &.is-offset-one-quarter-mobile
  106. margin-left: 25%
  107. &.is-offset-one-fifth-mobile
  108. margin-left: 20%
  109. &.is-offset-two-fifths-mobile
  110. margin-left: 40%
  111. &.is-offset-three-fifths-mobile
  112. margin-left: 60%
  113. &.is-offset-four-fifths-mobile
  114. margin-left: 80%
  115. @for $i from 0 through 12
  116. &.is-#{$i}-mobile
  117. flex: none
  118. width: percentage($i / 12)
  119. &.is-offset-#{$i}-mobile
  120. margin-left: percentage($i / 12)
  121. +tablet
  122. &.is-narrow,
  123. &.is-narrow-tablet
  124. flex: none
  125. &.is-full,
  126. &.is-full-tablet
  127. flex: none
  128. width: 100%
  129. &.is-three-quarters,
  130. &.is-three-quarters-tablet
  131. flex: none
  132. width: 75%
  133. &.is-two-thirds,
  134. &.is-two-thirds-tablet
  135. flex: none
  136. width: 66.6666%
  137. &.is-half,
  138. &.is-half-tablet
  139. flex: none
  140. width: 50%
  141. &.is-one-third,
  142. &.is-one-third-tablet
  143. flex: none
  144. width: 33.3333%
  145. &.is-one-quarter,
  146. &.is-one-quarter-tablet
  147. flex: none
  148. width: 25%
  149. &.is-one-fifth,
  150. &.is-one-fifth-tablet
  151. flex: none
  152. width: 20%
  153. &.is-two-fifths,
  154. &.is-two-fifths-tablet
  155. flex: none
  156. width: 40%
  157. &.is-three-fifths,
  158. &.is-three-fifths-tablet
  159. flex: none
  160. width: 60%
  161. &.is-four-fifths,
  162. &.is-four-fifths-tablet
  163. flex: none
  164. width: 80%
  165. &.is-offset-three-quarters,
  166. &.is-offset-three-quarters-tablet
  167. margin-left: 75%
  168. &.is-offset-two-thirds,
  169. &.is-offset-two-thirds-tablet
  170. margin-left: 66.6666%
  171. &.is-offset-half,
  172. &.is-offset-half-tablet
  173. margin-left: 50%
  174. &.is-offset-one-third,
  175. &.is-offset-one-third-tablet
  176. margin-left: 33.3333%
  177. &.is-offset-one-quarter,
  178. &.is-offset-one-quarter-tablet
  179. margin-left: 25%
  180. &.is-offset-one-fifth,
  181. &.is-offset-one-fifth-tablet
  182. margin-left: 20%
  183. &.is-offset-two-fifths,
  184. &.is-offset-two-fifths-tablet
  185. margin-left: 40%
  186. &.is-offset-three-fifths,
  187. &.is-offset-three-fifths-tablet
  188. margin-left: 60%
  189. &.is-offset-four-fifths,
  190. &.is-offset-four-fifths-tablet
  191. margin-left: 80%
  192. @for $i from 0 through 12
  193. &.is-#{$i},
  194. &.is-#{$i}-tablet
  195. flex: none
  196. width: percentage($i / 12)
  197. &.is-offset-#{$i},
  198. &.is-offset-#{$i}-tablet
  199. margin-left: percentage($i / 12)
  200. +touch
  201. &.is-narrow-touch
  202. flex: none
  203. &.is-full-touch
  204. flex: none
  205. width: 100%
  206. &.is-three-quarters-touch
  207. flex: none
  208. width: 75%
  209. &.is-two-thirds-touch
  210. flex: none
  211. width: 66.6666%
  212. &.is-half-touch
  213. flex: none
  214. width: 50%
  215. &.is-one-third-touch
  216. flex: none
  217. width: 33.3333%
  218. &.is-one-quarter-touch
  219. flex: none
  220. width: 25%
  221. &.is-one-fifth-touch
  222. flex: none
  223. width: 20%
  224. &.is-two-fifths-touch
  225. flex: none
  226. width: 40%
  227. &.is-three-fifths-touch
  228. flex: none
  229. width: 60%
  230. &.is-four-fifths-touch
  231. flex: none
  232. width: 80%
  233. &.is-offset-three-quarters-touch
  234. margin-left: 75%
  235. &.is-offset-two-thirds-touch
  236. margin-left: 66.6666%
  237. &.is-offset-half-touch
  238. margin-left: 50%
  239. &.is-offset-one-third-touch
  240. margin-left: 33.3333%
  241. &.is-offset-one-quarter-touch
  242. margin-left: 25%
  243. &.is-offset-one-fifth-touch
  244. margin-left: 20%
  245. &.is-offset-two-fifths-touch
  246. margin-left: 40%
  247. &.is-offset-three-fifths-touch
  248. margin-left: 60%
  249. &.is-offset-four-fifths-touch
  250. margin-left: 80%
  251. @for $i from 0 through 12
  252. &.is-#{$i}-touch
  253. flex: none
  254. width: percentage($i / 12)
  255. &.is-offset-#{$i}-touch
  256. margin-left: percentage($i / 12)
  257. +desktop
  258. &.is-narrow-desktop
  259. flex: none
  260. &.is-full-desktop
  261. flex: none
  262. width: 100%
  263. &.is-three-quarters-desktop
  264. flex: none
  265. width: 75%
  266. &.is-two-thirds-desktop
  267. flex: none
  268. width: 66.6666%
  269. &.is-half-desktop
  270. flex: none
  271. width: 50%
  272. &.is-one-third-desktop
  273. flex: none
  274. width: 33.3333%
  275. &.is-one-quarter-desktop
  276. flex: none
  277. width: 25%
  278. &.is-one-fifth-desktop
  279. flex: none
  280. width: 20%
  281. &.is-two-fifths-desktop
  282. flex: none
  283. width: 40%
  284. &.is-three-fifths-desktop
  285. flex: none
  286. width: 60%
  287. &.is-four-fifths-desktop
  288. flex: none
  289. width: 80%
  290. &.is-offset-three-quarters-desktop
  291. margin-left: 75%
  292. &.is-offset-two-thirds-desktop
  293. margin-left: 66.6666%
  294. &.is-offset-half-desktop
  295. margin-left: 50%
  296. &.is-offset-one-third-desktop
  297. margin-left: 33.3333%
  298. &.is-offset-one-quarter-desktop
  299. margin-left: 25%
  300. &.is-offset-one-fifth-desktop
  301. margin-left: 20%
  302. &.is-offset-two-fifths-desktop
  303. margin-left: 40%
  304. &.is-offset-three-fifths-desktop
  305. margin-left: 60%
  306. &.is-offset-four-fifths-desktop
  307. margin-left: 80%
  308. @for $i from 0 through 12
  309. &.is-#{$i}-desktop
  310. flex: none
  311. width: percentage($i / 12)
  312. &.is-offset-#{$i}-desktop
  313. margin-left: percentage($i / 12)
  314. +widescreen
  315. &.is-narrow-widescreen
  316. flex: none
  317. &.is-full-widescreen
  318. flex: none
  319. width: 100%
  320. &.is-three-quarters-widescreen
  321. flex: none
  322. width: 75%
  323. &.is-two-thirds-widescreen
  324. flex: none
  325. width: 66.6666%
  326. &.is-half-widescreen
  327. flex: none
  328. width: 50%
  329. &.is-one-third-widescreen
  330. flex: none
  331. width: 33.3333%
  332. &.is-one-quarter-widescreen
  333. flex: none
  334. width: 25%
  335. &.is-one-fifth-widescreen
  336. flex: none
  337. width: 20%
  338. &.is-two-fifths-widescreen
  339. flex: none
  340. width: 40%
  341. &.is-three-fifths-widescreen
  342. flex: none
  343. width: 60%
  344. &.is-four-fifths-widescreen
  345. flex: none
  346. width: 80%
  347. &.is-offset-three-quarters-widescreen
  348. margin-left: 75%
  349. &.is-offset-two-thirds-widescreen
  350. margin-left: 66.6666%
  351. &.is-offset-half-widescreen
  352. margin-left: 50%
  353. &.is-offset-one-third-widescreen
  354. margin-left: 33.3333%
  355. &.is-offset-one-quarter-widescreen
  356. margin-left: 25%
  357. &.is-offset-one-fifth-widescreen
  358. margin-left: 20%
  359. &.is-offset-two-fifths-widescreen
  360. margin-left: 40%
  361. &.is-offset-three-fifths-widescreen
  362. margin-left: 60%
  363. &.is-offset-four-fifths-widescreen
  364. margin-left: 80%
  365. @for $i from 0 through 12
  366. &.is-#{$i}-widescreen
  367. flex: none
  368. width: percentage($i / 12)
  369. &.is-offset-#{$i}-widescreen
  370. margin-left: percentage($i / 12)
  371. +fullhd
  372. &.is-narrow-fullhd
  373. flex: none
  374. &.is-full-fullhd
  375. flex: none
  376. width: 100%
  377. &.is-three-quarters-fullhd
  378. flex: none
  379. width: 75%
  380. &.is-two-thirds-fullhd
  381. flex: none
  382. width: 66.6666%
  383. &.is-half-fullhd
  384. flex: none
  385. width: 50%
  386. &.is-one-third-fullhd
  387. flex: none
  388. width: 33.3333%
  389. &.is-one-quarter-fullhd
  390. flex: none
  391. width: 25%
  392. &.is-one-fifth-fullhd
  393. flex: none
  394. width: 20%
  395. &.is-two-fifths-fullhd
  396. flex: none
  397. width: 40%
  398. &.is-three-fifths-fullhd
  399. flex: none
  400. width: 60%
  401. &.is-four-fifths-fullhd
  402. flex: none
  403. width: 80%
  404. &.is-offset-three-quarters-fullhd
  405. margin-left: 75%
  406. &.is-offset-two-thirds-fullhd
  407. margin-left: 66.6666%
  408. &.is-offset-half-fullhd
  409. margin-left: 50%
  410. &.is-offset-one-third-fullhd
  411. margin-left: 33.3333%
  412. &.is-offset-one-quarter-fullhd
  413. margin-left: 25%
  414. &.is-offset-one-fifth-fullhd
  415. margin-left: 20%
  416. &.is-offset-two-fifths-fullhd
  417. margin-left: 40%
  418. &.is-offset-three-fifths-fullhd
  419. margin-left: 60%
  420. &.is-offset-four-fifths-fullhd
  421. margin-left: 80%
  422. @for $i from 0 through 12
  423. &.is-#{$i}-fullhd
  424. flex: none
  425. width: percentage($i / 12)
  426. &.is-offset-#{$i}-fullhd
  427. margin-left: percentage($i / 12)
  428. .columns
  429. margin-left: (-$column-gap)
  430. margin-right: (-$column-gap)
  431. margin-top: (-$column-gap)
  432. &:last-child
  433. margin-bottom: (-$column-gap)
  434. &:not(:last-child)
  435. margin-bottom: calc(1.5rem - #{$column-gap})
  436. // Modifiers
  437. &.is-centered
  438. justify-content: center
  439. &.is-gapless
  440. margin-left: 0
  441. margin-right: 0
  442. margin-top: 0
  443. & > .column
  444. margin: 0
  445. padding: 0 !important
  446. &:not(:last-child)
  447. margin-bottom: 1.5rem
  448. &:last-child
  449. margin-bottom: 0
  450. &.is-mobile
  451. display: flex
  452. &.is-multiline
  453. flex-wrap: wrap
  454. &.is-vcentered
  455. align-items: center
  456. // Responsiveness
  457. +tablet
  458. &:not(.is-desktop)
  459. display: flex
  460. +desktop
  461. // Modifiers
  462. &.is-desktop
  463. display: flex
  464. @if $variable-columns
  465. .columns.is-variable
  466. --columnGap: 0.75rem
  467. margin-left: calc(-1 * var(--columnGap))
  468. margin-right: calc(-1 * var(--columnGap))
  469. .column
  470. padding-left: var(--columnGap)
  471. padding-right: var(--columnGap)
  472. @for $i from 0 through 8
  473. &.is-#{$i}
  474. --columnGap: #{$i * 0.25rem}
  475. +mobile
  476. &.is-#{$i}-mobile
  477. --columnGap: #{$i * 0.25rem}
  478. +tablet
  479. &.is-#{$i}-tablet
  480. --columnGap: #{$i * 0.25rem}
  481. +tablet-only
  482. &.is-#{$i}-tablet-only
  483. --columnGap: #{$i * 0.25rem}
  484. +touch
  485. &.is-#{$i}-touch
  486. --columnGap: #{$i * 0.25rem}
  487. +desktop
  488. &.is-#{$i}-desktop
  489. --columnGap: #{$i * 0.25rem}
  490. +desktop-only
  491. &.is-#{$i}-desktop-only
  492. --columnGap: #{$i * 0.25rem}
  493. +widescreen
  494. &.is-#{$i}-widescreen
  495. --columnGap: #{$i * 0.25rem}
  496. +widescreen-only
  497. &.is-#{$i}-widescreen-only
  498. --columnGap: #{$i * 0.25rem}
  499. +fullhd
  500. &.is-#{$i}-fullhd
  501. --columnGap: #{$i * 0.25rem}