91 lines
2.4 KiB
SCSS
91 lines
2.4 KiB
SCSS
@use 'sass:list';
|
|
@use 'functions' as *;
|
|
|
|
// css variables exposed globally:
|
|
// --layout-column-count: columns count in the layout
|
|
// --layout-column-gap: gap size between columns
|
|
// --layout-margin: layout margin size (left or right)
|
|
// --layout-width: 100vw minus 2 * --layout-margin
|
|
// --layout-column-width: size of a single column
|
|
|
|
// css classes exposed globally:
|
|
// .layout-block: element takes the whole layout width
|
|
// .layout-block-inner: same as .layout-block but using padding instead of margin
|
|
// .layout-grid: extends .layout-block with grid behaviour using layout settings
|
|
// .layout-grid-inner: same as .layout-grid but using padding instead of margin
|
|
|
|
@use 'sass:map';
|
|
|
|
// config to fill
|
|
// 'variable': (mobile, desktop)
|
|
$layout: (
|
|
'columns-count': (
|
|
5,
|
|
8,
|
|
),
|
|
'columns-gap': (
|
|
20px,
|
|
0px,
|
|
),
|
|
'margin': (
|
|
20px,
|
|
20px,
|
|
),
|
|
);
|
|
|
|
//internal process, do not touch
|
|
:root {
|
|
--layout-column-count: #{list.nth(map.get($layout, 'columns-count'), 1)};
|
|
--layout-column-gap: #{mobile-vw(
|
|
list.nth(map.get($layout, 'columns-gap'), 1)
|
|
)};
|
|
--layout-margin: #{mobile-vw(list.nth(map.get($layout, 'margin'), 1))};
|
|
--layout-width: calc(100vw - (2 * var(--layout-margin)));
|
|
--layout-column-width: calc(
|
|
(
|
|
var(--layout-width) -
|
|
(
|
|
(var(--layout-column-count) - 1) *
|
|
var(--layout-column-gap)
|
|
)
|
|
) / var(--layout-column-count)
|
|
);
|
|
|
|
@include desktop {
|
|
--layout-column-count: #{list.nth(map.get($layout, 'columns-count'), 2)};
|
|
--layout-column-gap: #{desktop-vw(
|
|
list.nth(map.get($layout, 'columns-gap'), 2)
|
|
)};
|
|
--layout-margin: #{desktop-vw(list.nth(map.get($layout, 'margin'), 2))};
|
|
}
|
|
}
|
|
|
|
.layout-block {
|
|
max-width: var(--layout-width);
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.layout-block-inner {
|
|
padding-left: var(--layout-margin);
|
|
padding-right: var(--layout-margin);
|
|
width: 100%;
|
|
}
|
|
|
|
.layout-grid {
|
|
@extend .layout-block;
|
|
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr));
|
|
grid-gap: var(--layout-column-gap);
|
|
}
|
|
|
|
.layout-grid-inner {
|
|
@extend .layout-block-inner;
|
|
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr));
|
|
grid-gap: var(--layout-column-gap);
|
|
}
|