Manuel Cillero
c848b97450
Divide `basic.css` en parciales SCSS bajo `assets/scss/basic/`, integra `normalize.css` en `basic.min.css` y compila `intro.scss` por separado a `intro.min.css`.
32 lines
999 B
SCSS
32 lines
999 B
SCSS
@use "sass:list";
|
|
@use "sass:map";
|
|
@use "breakpoints" as bp;
|
|
|
|
// Classes added by the `Container` component from `Width`. All of them are centered and fill the
|
|
// available width; `.container` and `.container-{name}` also get a maximum width from the
|
|
// breakpoint they name (`.container` from the first one).
|
|
|
|
$named: ();
|
|
@each $name in map.keys(bp.$breakpoints) {
|
|
$named: list.append($named, ".container-#{$name}", comma);
|
|
}
|
|
|
|
.container,
|
|
.container-fluid,
|
|
#{$named} {
|
|
width: 100%;
|
|
margin-inline: auto;
|
|
padding-inline: 1rem;
|
|
}
|
|
|
|
// From each breakpoint on, `.container` and every `.container-{name}` up to that breakpoint take
|
|
// its maximum width, while the larger ones stay fluid until their own breakpoint is reached.
|
|
$sized: (".container");
|
|
@each $name, $width in bp.$breakpoints {
|
|
$sized: list.append($sized, ".container-#{$name}", comma);
|
|
@media (width >= $width) {
|
|
#{$sized} {
|
|
max-width: map.get(bp.$container-max-widths, $name);
|
|
}
|
|
}
|
|
}
|