Files
com.xaymar.www/_sass/_block-columns.scss
T

81 lines
2.0 KiB
SCSS
Raw Normal View History

2021-12-24 20:05:17 +01:00
// --------------------------------------------------------------------------------
// Columns
// --------------------------------------------------------------------------------
.block-columns {
}
.block-columns > .content {
display: grid;
2021-12-25 11:21:04 +01:00
grid-template-columns: repeat(auto-fit, minmax(calc(#{$theme-width} / 3 - 5rem), 1fr));
2022-01-11 07:22:09 +01:00
grid-column-gap: 0.75rem;
grid-row-gap: 0.75rem;
2021-12-24 20:05:17 +01:00
}
// Columns: Horizontal Alignment
.block-columns > .content.halign-start,
.block-columns > .content.halign-left {
align-items: start;
}
.block-columns > .content.halign-end,
.block-columns > .content.halign-right {
align-items: end;
}
.block-columns > .content.halign-center,
.block-columns > .content.halign-middle {
align-items: center;
}
.block-columns > .content.halign-baseline,
.block-columns > .content.halign-text {
align-items: baseline;
}
.block-columns > .content.halign-stretch,
.block-columns > .content.halign-fill {
align-items: stretch;
}
.block-columns > .content.valign-start,
.block-columns > .content.valign-left {
justify-items: start;
}
.block-columns > .content.valign-end,
.block-columns > .content.valign-right {
justify-items: end;
}
.block-columns > .content.valign-center,
.block-columns > .content.valign-middle {
justify-items: center;
}
.block-columns > .content.valign-baseline,
.block-columns > .content.valign-text {
justify-items: baseline;
}
.block-columns > .content.valign-stretch,
.block-columns > .content.valign-fill {
justify-items: stretch;
}
// --------------------------------------------------------------------------------
// Individual Column
// --------------------------------------------------------------------------------
.block-column {
2022-01-11 07:22:09 +01:00
padding: 0 0;
2021-12-24 20:05:17 +01:00
}
.block-column ~ .block-column {
margin-top: 0;
}
2022-01-11 07:22:09 +01:00
// --------------------------------------------------------------------------------
// Fix Headings inside Columns
// --------------------------------------------------------------------------------
.block-column > .content > .block-heading {
margin: 0;
}