From 777906de40e47791d5023719c7da42e0db96f7c4 Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Sun, 21 Jan 2024 19:42:52 +0700 Subject: [PATCH] refactor: Pico v2 customized design system --- v2-sass-customized-design-system/index.html | 12 ++++++++++-- .../scss/layout/{_main.scss => _body.scss} | 11 ++++++----- v2-sass-customized-design-system/scss/main.scss | 2 +- 3 files changed, 17 insertions(+), 8 deletions(-) rename v2-sass-customized-design-system/scss/layout/{_main.scss => _body.scss} (76%) diff --git a/v2-sass-customized-design-system/index.html b/v2-sass-customized-design-system/index.html index e54855c..50c47a4 100644 --- a/v2-sass-customized-design-system/index.html +++ b/v2-sass-customized-design-system/index.html @@ -1,11 +1,11 @@ - + Customized design system • Pico CSS - + @@ -91,6 +91,14 @@ + diff --git a/v2-sass-customized-design-system/scss/layout/_main.scss b/v2-sass-customized-design-system/scss/layout/_body.scss similarity index 76% rename from v2-sass-customized-design-system/scss/layout/_main.scss rename to v2-sass-customized-design-system/scss/layout/_body.scss index 92e944d..c8792a7 100644 --- a/v2-sass-customized-design-system/scss/layout/_main.scss +++ b/v2-sass-customized-design-system/scss/layout/_body.scss @@ -2,8 +2,13 @@ @use "settings" as *; body { - > main { + > main, + > footer { + max-width: map.get(map.get($breakpoints, "md"), "viewport"); + margin-inline: auto; + } + > main { svg { display: block; width: 4rem; @@ -13,14 +18,10 @@ body { } form { - max-width: map.get(map.get($breakpoints, "md"), "viewport"); - margin-inline: auto; - label { color: var(#{$css-var-prefix}muted-color); } - :last-child { margin-bottom: 0; } diff --git a/v2-sass-customized-design-system/scss/main.scss b/v2-sass-customized-design-system/scss/main.scss index 6b634bf..95f1bb6 100644 --- a/v2-sass-customized-design-system/scss/main.scss +++ b/v2-sass-customized-design-system/scss/main.scss @@ -55,7 +55,7 @@ @use "theme/schemes"; // Layout -@use "layout/main"; +@use "layout/body"; // Custom components @use "components/input-amount";