mirror of
https://github.com/jgthms/bulma
synced 2026-03-19 03:44:31 -07:00
50 lines
1.1 KiB
Sass
50 lines
1.1 KiB
Sass
.grid-container
|
|
box-shadow: 0 0 0 1px $grey
|
|
margin: 0 auto
|
|
max-width: 1000px
|
|
padding: 0 !important
|
|
|
|
.grid
|
|
--gridGap: 0.75rem
|
|
--gridGap: 0
|
|
--gridColumnGap: var(--gridGap)
|
|
--gridRowGap: var(--gridGap)
|
|
+block
|
|
display: grid
|
|
grid-column-gap: var(--gridColumnGap)
|
|
grid-row-gap: var(--gridRowGap)
|
|
$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}-tall
|
|
grid-row: span $i
|
|
&.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
|