bulma/sass/grid/grid.sass
Jeremy Thomas 6d9005ad2a Grid init
2018-01-30 14:42:17 +00:00

40 lines
849 B
Sass

.grid
+block
display: grid
grid-column-gap: 0.75rem
grid-column-gap: 1px
grid-row-gap: 0.75rem
grid-row-gap: 1px
$var: #{"1fr"}
@for $i from 1 through 5
&.has-#{$i + 1}-columns
grid-template-columns: #{append($var, 1fr)}
$var: append($var, #{"1fr"})
.cell
background-color: $primary
border-radius: $radius-large
color: $link-invert
padding: 1rem
@for $i from 1 through 6
&.is-#{$i}-wide
grid-column: span $i
// Colors
&:nth-child(7n-6)
background-color: $purple
&:nth-child(7n-5)
background-color: $link
&:nth-child(7n-4)
background-color: $info
&:nth-child(7n-3)
background-color: $primary
&:nth-child(7n-2)
background-color: $success
&:nth-child(7n-1)
background-color: $warning
color: $warning-invert
&:nth-child(7n)
background-color: $danger