bulma/sass/grid/columns.sass

478 lines
11 KiB
Sass
Raw Normal View History

2017-08-14 12:59:16 +00:00
$column-gap: 0.75rem !default
2016-01-24 00:03:43 +00:00
.column
2016-09-23 21:08:03 +00:00
display: block
2016-07-31 10:45:56 +00:00
flex-basis: 0
flex-grow: 1
flex-shrink: 1
2017-08-14 17:25:14 +00:00
padding: $column-gap
2016-04-16 12:39:40 +00:00
.columns.is-mobile > &.is-narrow
flex: none
2016-04-10 16:09:34 +00:00
.columns.is-mobile > &.is-full
flex: none
width: 100%
2016-04-11 21:51:11 +00:00
.columns.is-mobile > &.is-three-quarters
flex: none
width: 75%
.columns.is-mobile > &.is-two-thirds
flex: none
width: 66.6666%
.columns.is-mobile > &.is-half
flex: none
width: 50%
2016-04-11 21:51:11 +00:00
.columns.is-mobile > &.is-one-third
flex: none
width: 33.3333%
2016-04-11 21:51:11 +00:00
.columns.is-mobile > &.is-one-quarter
flex: none
width: 25%
.columns.is-mobile > &.is-one-fifth
flex: none
width: 20%
.columns.is-mobile > &.is-two-fifths
flex: none
width: 40%
.columns.is-mobile > &.is-three-fifths
flex: none
width: 60%
.columns.is-mobile > &.is-four-fifths
flex: none
width: 80%
2016-04-11 21:51:11 +00:00
.columns.is-mobile > &.is-offset-three-quarters
margin-left: 75%
.columns.is-mobile > &.is-offset-two-thirds
margin-left: 66.6666%
2016-02-13 16:16:17 +00:00
.columns.is-mobile > &.is-offset-half
margin-left: 50%
2016-04-11 21:51:11 +00:00
.columns.is-mobile > &.is-offset-one-third
2016-02-13 16:16:17 +00:00
margin-left: 33.3333%
2016-04-11 21:51:11 +00:00
.columns.is-mobile > &.is-offset-one-quarter
2016-02-13 16:16:17 +00:00
margin-left: 25%
.columns.is-mobile > &.is-offset-one-fifth
margin-left: 20%
.columns.is-mobile > &.is-offset-two-fifths
margin-left: 40%
.columns.is-mobile > &.is-offset-three-fifths
margin-left: 60%
.columns.is-mobile > &.is-offset-four-fifths
margin-left: 80%
2016-04-10 16:09:34 +00:00
@for $i from 1 through 12
2016-02-13 16:16:17 +00:00
.columns.is-mobile > &.is-#{$i}
flex: none
width: ($i / 12) * 100%
2016-02-13 16:16:17 +00:00
.columns.is-mobile > &.is-offset-#{$i}
margin-left: ($i / 12) * 100%
2016-01-24 00:03:43 +00:00
+mobile
2016-04-16 12:39:40 +00:00
&.is-narrow-mobile
flex: none
2016-04-10 16:09:34 +00:00
&.is-full-mobile
flex: none
width: 100%
2016-04-11 21:51:11 +00:00
&.is-three-quarters-mobile
flex: none
width: 75%
&.is-two-thirds-mobile
flex: none
width: 66.6666%
&.is-half-mobile
flex: none
width: 50%
2016-04-11 21:51:11 +00:00
&.is-one-third-mobile
flex: none
width: 33.3333%
2016-04-11 21:51:11 +00:00
&.is-one-quarter-mobile
flex: none
width: 25%
&.is-one-fifth-mobile
flex: none
width: 20%
&.is-two-fifths-mobile
flex: none
width: 40%
&.is-three-fifths-mobile
flex: none
width: 60%
&.is-four-fifths-mobile
flex: none
width: 80%
2016-04-11 21:51:11 +00:00
&.is-offset-three-quarters-mobile
margin-left: 75%
&.is-offset-two-thirds-mobile
margin-left: 66.6666%
2016-02-13 16:16:17 +00:00
&.is-offset-half-mobile
margin-left: 50%
2016-04-11 21:51:11 +00:00
&.is-offset-one-third-mobile
2016-02-13 16:16:17 +00:00
margin-left: 33.3333%
2016-04-11 21:51:11 +00:00
&.is-offset-one-quarter-mobile
2016-02-13 16:16:17 +00:00
margin-left: 25%
&.is-offset-one-fifth-mobile
margin-left: 20%
&.is-offset-two-fifths-mobile
margin-left: 40%
&.is-offset-three-fifths-mobile
margin-left: 60%
&.is-offset-four-fifths-mobile
margin-left: 80%
2016-04-10 16:09:34 +00:00
@for $i from 1 through 12
&.is-#{$i}-mobile
flex: none
width: ($i / 12) * 100%
2016-02-13 16:16:17 +00:00
&.is-offset-#{$i}-mobile
margin-left: ($i / 12) * 100%
2016-01-24 00:03:43 +00:00
+tablet
2016-04-16 12:39:40 +00:00
&.is-narrow,
&.is-narrow-tablet
flex: none
2016-04-10 16:09:34 +00:00
&.is-full,
&.is-full-tablet
flex: none
width: 100%
2016-04-11 21:51:11 +00:00
&.is-three-quarters,
&.is-three-quarters-tablet
flex: none
width: 75%
&.is-two-thirds,
&.is-two-thirds-tablet
flex: none
width: 66.6666%
&.is-half,
&.is-half-tablet
2016-01-24 00:03:43 +00:00
flex: none
width: 50%
2016-04-11 21:51:11 +00:00
&.is-one-third,
&.is-one-third-tablet
2016-01-24 00:03:43 +00:00
flex: none
width: 33.3333%
2016-04-11 21:51:11 +00:00
&.is-one-quarter,
&.is-one-quarter-tablet
2016-01-24 00:03:43 +00:00
flex: none
width: 25%
&.is-one-fifth,
&.is-one-fifth-tablet
flex: none
width: 20%
&.is-two-fifths,
&.is-two-fifths-tablet
flex: none
width: 40%
&.is-three-fifths,
&.is-three-fifths-tablet
flex: none
width: 60%
&.is-four-fifths,
&.is-four-fifths-tablet
flex: none
width: 80%
2016-04-11 21:51:11 +00:00
&.is-offset-three-quarters,
&.is-offset-three-quarters-tablet
margin-left: 75%
&.is-offset-two-thirds,
&.is-offset-two-thirds-tablet
margin-left: 66.6666%
2016-02-13 16:16:17 +00:00
&.is-offset-half,
&.is-offset-half-tablet
margin-left: 50%
2016-04-11 21:51:11 +00:00
&.is-offset-one-third,
&.is-offset-one-third-tablet
2016-02-13 16:16:17 +00:00
margin-left: 33.3333%
2016-04-11 21:51:11 +00:00
&.is-offset-one-quarter,
&.is-offset-one-quarter-tablet
2016-02-13 16:16:17 +00:00
margin-left: 25%
&.is-offset-one-fifth,
&.is-offset-one-fifth-tablet
margin-left: 20%
&.is-offset-two-fifths,
&.is-offset-two-fifths-tablet
margin-left: 40%
&.is-offset-three-fifths,
&.is-offset-three-fifths-tablet
margin-left: 60%
&.is-offset-four-fifths,
&.is-offset-four-fifths-tablet
margin-left: 80%
2016-04-10 16:09:34 +00:00
@for $i from 1 through 12
&.is-#{$i},
&.is-#{$i}-tablet
flex: none
width: ($i / 12) * 100%
2016-02-13 16:16:17 +00:00
&.is-offset-#{$i},
&.is-offset-#{$i}-tablet
margin-left: ($i / 12) * 100%
+touch
&.is-narrow-touch
flex: none
&.is-full-touch
flex: none
width: 100%
&.is-three-quarters-touch
flex: none
width: 75%
&.is-two-thirds-touch
flex: none
width: 66.6666%
&.is-half-touch
flex: none
width: 50%
&.is-one-third-touch
flex: none
width: 33.3333%
&.is-one-quarter-touch
flex: none
width: 25%
&.is-one-fifth-touch
flex: none
width: 20%
&.is-two-fifths-touch
flex: none
width: 40%
&.is-three-fifths-touch
flex: none
width: 60%
&.is-four-fifths-touch
flex: none
width: 80%
&.is-offset-three-quarters-touch
margin-left: 75%
&.is-offset-two-thirds-touch
margin-left: 66.6666%
&.is-offset-half-touch
margin-left: 50%
&.is-offset-one-third-touch
margin-left: 33.3333%
&.is-offset-one-quarter-touch
margin-left: 25%
&.is-offset-one-fifth-touch
margin-left: 20%
&.is-offset-two-fifths-touch
margin-left: 40%
&.is-offset-three-fifths-touch
margin-left: 60%
&.is-offset-four-fifths-touch
margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-touch
flex: none
width: ($i / 12) * 100%
&.is-offset-#{$i}-touch
margin-left: ($i / 12) * 100%
+desktop
2016-04-16 12:39:40 +00:00
&.is-narrow-desktop
flex: none
2016-04-10 16:09:34 +00:00
&.is-full-desktop
flex: none
width: 100%
2016-04-11 21:51:11 +00:00
&.is-three-quarters-desktop
flex: none
width: 75%
&.is-two-thirds-desktop
flex: none
width: 66.6666%
&.is-half-desktop
flex: none
width: 50%
2016-04-11 21:51:11 +00:00
&.is-one-third-desktop
flex: none
width: 33.3333%
2016-04-11 21:51:11 +00:00
&.is-one-quarter-desktop
flex: none
width: 25%
&.is-one-fifth-desktop
flex: none
width: 20%
&.is-two-fifths-desktop
flex: none
width: 40%
&.is-three-fifths-desktop
flex: none
width: 60%
&.is-four-fifths-desktop
flex: none
width: 80%
2016-04-11 21:51:11 +00:00
&.is-offset-three-quarters-desktop
margin-left: 75%
&.is-offset-two-thirds-desktop
margin-left: 66.6666%
2016-02-13 16:16:17 +00:00
&.is-offset-half-desktop
margin-left: 50%
2016-04-11 21:51:11 +00:00
&.is-offset-one-third-desktop
2016-02-13 16:16:17 +00:00
margin-left: 33.3333%
2016-04-11 21:51:11 +00:00
&.is-offset-one-quarter-desktop
2016-02-13 16:16:17 +00:00
margin-left: 25%
&.is-offset-one-fifth-desktop
margin-left: 20%
&.is-offset-two-fifths-desktop
margin-left: 40%
&.is-offset-three-fifths-desktop
margin-left: 60%
&.is-offset-four-fifths-desktop
margin-left: 80%
2016-04-10 16:09:34 +00:00
@for $i from 1 through 12
&.is-#{$i}-desktop
2016-01-24 00:03:43 +00:00
flex: none
width: ($i / 12) * 100%
2016-02-13 16:16:17 +00:00
&.is-offset-#{$i}-desktop
margin-left: ($i / 12) * 100%
2016-05-29 12:14:54 +00:00
+widescreen
&.is-narrow-widescreen
flex: none
&.is-full-widescreen
flex: none
width: 100%
&.is-three-quarters-widescreen
flex: none
width: 75%
&.is-two-thirds-widescreen
flex: none
width: 66.6666%
&.is-half-widescreen
flex: none
width: 50%
&.is-one-third-widescreen
flex: none
width: 33.3333%
&.is-one-quarter-widescreen
flex: none
width: 25%
&.is-one-fifth-widescreen
flex: none
width: 20%
&.is-two-fifths-widescreen
flex: none
width: 40%
&.is-three-fifths-widescreen
flex: none
width: 60%
&.is-four-fifths-widescreen
flex: none
width: 80%
2016-05-29 12:14:54 +00:00
&.is-offset-three-quarters-widescreen
margin-left: 75%
&.is-offset-two-thirds-widescreen
margin-left: 66.6666%
&.is-offset-half-widescreen
margin-left: 50%
&.is-offset-one-third-widescreen
margin-left: 33.3333%
&.is-offset-one-quarter-widescreen
margin-left: 25%
&.is-offset-one-fifth-widescreen
margin-left: 20%
&.is-offset-two-fifths-widescreen
margin-left: 40%
&.is-offset-three-fifths-widescreen
margin-left: 60%
&.is-offset-four-fifths-widescreen
margin-left: 80%
2016-05-29 12:14:54 +00:00
@for $i from 1 through 12
&.is-#{$i}-widescreen
flex: none
width: ($i / 12) * 100%
&.is-offset-#{$i}-widescreen
margin-left: ($i / 12) * 100%
+fullhd
&.is-narrow-fullhd
flex: none
&.is-full-fullhd
flex: none
width: 100%
&.is-three-quarters-fullhd
flex: none
width: 75%
&.is-two-thirds-fullhd
flex: none
width: 66.6666%
&.is-half-fullhd
flex: none
width: 50%
&.is-one-third-fullhd
flex: none
width: 33.3333%
&.is-one-quarter-fullhd
flex: none
width: 25%
&.is-one-fifth-fullhd
flex: none
width: 20%
&.is-two-fifths-fullhd
flex: none
width: 40%
&.is-three-fifths-fullhd
flex: none
width: 60%
&.is-four-fifths-fullhd
flex: none
width: 80%
&.is-offset-three-quarters-fullhd
margin-left: 75%
&.is-offset-two-thirds-fullhd
margin-left: 66.6666%
&.is-offset-half-fullhd
margin-left: 50%
&.is-offset-one-third-fullhd
margin-left: 33.3333%
&.is-offset-one-quarter-fullhd
margin-left: 25%
&.is-offset-one-fifth-fullhd
margin-left: 20%
&.is-offset-two-fifths-fullhd
margin-left: 40%
&.is-offset-three-fifths-fullhd
margin-left: 60%
&.is-offset-four-fifths-fullhd
margin-left: 80%
@for $i from 1 through 12
&.is-#{$i}-fullhd
flex: none
width: ($i / 12) * 100%
&.is-offset-#{$i}-fullhd
margin-left: ($i / 12) * 100%
2016-01-24 00:03:43 +00:00
.columns
2017-08-14 12:59:16 +00:00
margin-left: (-$column-gap)
margin-right: (-$column-gap)
2017-08-14 17:25:14 +00:00
margin-top: (-$column-gap)
&:last-child
margin-bottom: (-$column-gap)
&:not(:last-child)
2017-08-14 17:25:14 +00:00
margin-bottom: calc(1.5rem - #{$column-gap})
2016-04-10 16:09:34 +00:00
// Modifiers
&.is-centered
justify-content: center
2016-04-10 15:56:27 +00:00
&.is-gapless
2016-02-13 16:16:17 +00:00
margin-left: 0
margin-right: 0
2017-08-14 22:52:28 +00:00
margin-top: 0
& > .column
margin: 0
2017-08-14 12:59:16 +00:00
padding: 0 !important
2017-08-14 17:25:14 +00:00
&:not(:last-child)
margin-bottom: 1.5rem
&:last-child
margin-bottom: 0
2016-04-10 16:09:34 +00:00
&.is-mobile
display: flex
&.is-multiline
flex-wrap: wrap
&.is-vcentered
align-items: center
// Responsiveness
2016-02-13 16:16:17 +00:00
+tablet
&:not(.is-desktop)
display: flex
+desktop
2016-04-10 16:09:34 +00:00
// Modifiers
2016-02-13 16:16:17 +00:00
&.is-desktop
display: flex
2017-08-14 17:25:14 +00:00
2017-12-04 21:03:01 +00:00
@if $variable-columns
.columns.is-variable
--columnGap: 0.75rem
margin-left: calc(-1 * var(--columnGap))
margin-right: calc(-1 * var(--columnGap))
.column
padding-left: var(--columnGap)
padding-right: var(--columnGap)
@for $i from 0 through 8
&.is-#{$i}
--columnGap: #{$i * 0.25rem}