bulma/sass/components/grid.sass

255 lines
5.6 KiB
Sass
Raw Normal View History

2016-01-24 00:03:43 +00:00
.column
flex: 1
padding: 10px
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%
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%
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%
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%
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%
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%
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%
+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%
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%
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-01-24 00:03:43 +00:00
.columns
margin-left: -10px
margin-right: -10px
margin-top: -10px
&:last-child
margin-bottom: -10px
&:not(:last-child)
margin-bottom: 10px
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
2016-04-10 16:09:34 +00:00
margin-top: 0
&:last-child
margin-bottom: 0
&:not(:last-child)
2016-02-13 16:16:17 +00:00
margin-bottom: 20px
& > .column
margin: 0
padding: 0
2016-01-24 00:03:43 +00:00
&.is-grid
2016-04-10 16:09:34 +00:00
// Responsiveness
2016-01-24 00:03:43 +00:00
+tablet
flex-wrap: wrap
& > .column
flex-basis: 33.3333%
max-width: 33.3333%
padding: 10px
width: 33.3333%
& + .column
margin-left: 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
2016-04-10 23:43:29 +00:00
2016-04-11 21:51:11 +00:00
.tilefiejsoif
2016-04-10 23:43:29 +00:00
flex: 1
// Modifiers
&.is-parent
padding: 10px
// Responsiveness
+tablet
// Sizes
@for $i from 1 through 12
&.is-#{$i}
flex: none
width: ($i / 12) * 100%
2016-04-11 21:51:11 +00:00
.tile
2016-04-10 23:43:29 +00:00
align-items: stretch
2016-04-11 21:51:11 +00:00
flex: 1
2016-04-10 23:43:29 +00:00
// Modifiers
&.is-ancestor
margin-left: -10px
margin-right: -10px
margin-top: -10px
&:last-child
margin-bottom: -10px
&:not(:last-child)
margin-bottom: 10px
2016-04-11 19:01:27 +00:00
&.is-child
margin: 0 !important
2016-04-11 21:51:11 +00:00
&.is-parent
padding: 10px
2016-04-10 23:43:29 +00:00
&.is-vertical
flex-direction: column
2016-04-11 21:51:11 +00:00
& > .tile.is-child:not(:last-child)
2016-04-10 23:43:29 +00:00
margin-bottom: 20px !important
// Responsiveness
+tablet
&:not(.is-child)
display: flex
2016-04-11 21:51:11 +00:00
@for $i from 1 through 12
&.is-#{$i}
flex: none
width: ($i / 12) * 100%