From 862b746f9ea1ce127a15e300e32d7580ba1cdfa9 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 23 Oct 2024 22:14:15 +0200 Subject: Use CSS layers --- package.json | 2 +- pnpm-lock.yaml | 10 +- src/scopes/_implicit.scss | 236 +++++++++++++++++++++++----------------------- 3 files changed, 125 insertions(+), 123 deletions(-) diff --git a/package.json b/package.json index 9abf0aa..6b07c26 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "include-media": "^2.0.0", - "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#14f85b1899ae57edc3733bb39a9d311463f7c94a" + "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf" }, "devDependencies": { "iro-icons": "git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0c6b6b2..08ad701 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -12,8 +12,8 @@ importers: specifier: ^2.0.0 version: 2.0.0 iro-sass: - specifier: git+https://git.vulpes.one/git/iro-sass.git#14f85b1899ae57edc3733bb39a9d311463f7c94a - version: git+https://git.vulpes.one/git/iro-sass.git#14f85b1899ae57edc3733bb39a9d311463f7c94a + specifier: git+https://git.vulpes.one/git/iro-sass.git#a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf + version: git+https://git.vulpes.one/git/iro-sass.git#a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf devDependencies: iro-icons: specifier: git+https://git.vulpes.one/git/iro-icons.git#8b921f634a565fd9bb8f6e0ddb1b4d7ba207c0a0 @@ -688,8 +688,8 @@ packages: peerDependencies: svg-sprite: ^2.0.2 - iro-sass@git+https://git.vulpes.one/git/iro-sass.git#14f85b1899ae57edc3733bb39a9d311463f7c94a: - resolution: {commit: 14f85b1899ae57edc3733bb39a9d311463f7c94a, repo: https://git.vulpes.one/git/iro-sass.git, type: git} + iro-sass@git+https://git.vulpes.one/git/iro-sass.git#a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf: + resolution: {commit: a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf, repo: https://git.vulpes.one/git/iro-sass.git, type: git} version: 1.0.2 is-arrayish@0.2.1: @@ -1916,7 +1916,7 @@ snapshots: dependencies: svg-sprite: 2.0.4 - iro-sass@git+https://git.vulpes.one/git/iro-sass.git#14f85b1899ae57edc3733bb39a9d311463f7c94a: {} + iro-sass@git+https://git.vulpes.one/git/iro-sass.git#a9efa537b7ecd99caebb92cc3912a03d2bb7bdaf: {} is-arrayish@0.2.1: {} diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss index c368072..18791a8 100644 --- a/src/scopes/_implicit.scss +++ b/src/scopes/_implicit.scss @@ -11,147 +11,149 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - html { - accent-color: props.get(core.$theme, --accent, --600); - scrollbar-color: props.get(core.$theme, --text-disabled) transparent; - } + @layer scope { + html { + accent-color: props.get(core.$theme, --accent, --600); + scrollbar-color: props.get(core.$theme, --text-disabled) transparent; + } - html, - body { - block-size: 100%; - } + html, + body { + block-size: 100%; + } - body { - padding: 0; - margin: 0; - font-family: props.get(vars.$body--font-family); - font-size: props.get(vars.$body--font-size); - font-feature-settings: props.get(vars.$body--feature-settings); - line-height: props.get(vars.$body--line-height); - color: props.get(core.$theme, --text); - background-color: props.get(core.$theme, --bg-base); - } + body { + padding: 0; + margin: 0; + font-family: props.get(vars.$body--font-family); + font-size: props.get(vars.$body--font-size); + font-feature-settings: props.get(vars.$body--feature-settings); + line-height: props.get(vars.$body--line-height); + color: props.get(core.$theme, --text); + background-color: props.get(core.$theme, --bg-base); + } - pre, - code { - font-family: props.get(vars.$code--font-family); - font-size: props.get(vars.$code--font-size); - font-feature-settings: props.get(vars.$code--feature-settings); - line-height: props.get(vars.$code--line-height); - } + pre, + code { + font-family: props.get(vars.$code--font-family); + font-size: props.get(vars.$code--font-size); + font-feature-settings: props.get(vars.$code--feature-settings); + line-height: props.get(vars.$code--line-height); + } - pre { - margin: 0; - overflow-x: auto; + pre { + margin: 0; + overflow-x: auto; - code { - font-size: 1em; - color: currentColor; + code { + font-size: 1em; + color: currentColor; + } } - } - h1, - h2, - h3, - h4, - h5, - h6 { - margin-block: props.get(vars.$heading--margin-bs) 0; - font-family: props.get(vars.$heading--font-family); - font-size: props.get(vars.$heading--font-size); - font-weight: props.get(vars.$heading--font-weight); - font-feature-settings: props.get(vars.$heading--feature-settings); - line-height: props.get(vars.$heading--line-height); - color: props.get(vars.$heading--color); - - & + & { - margin-block-start: props.get(vars.$heading--margin-bs-sibling); + h1, + h2, + h3, + h4, + h5, + h6 { + margin-block: props.get(vars.$heading--margin-bs) 0; + font-family: props.get(vars.$heading--font-family); + font-size: props.get(vars.$heading--font-size); + font-weight: props.get(vars.$heading--font-weight); + font-feature-settings: props.get(vars.$heading--feature-settings); + line-height: props.get(vars.$heading--line-height); + color: props.get(vars.$heading--color); + + & + & { + margin-block-start: props.get(vars.$heading--margin-bs-sibling); + } } - } - p { - margin-block: props.get(vars.$paragraph--margin-bs) 0; + p { + margin-block: props.get(vars.$paragraph--margin-bs) 0; - &:empty { - display: none; + &:empty { + display: none; + } } - } - strong { - font-weight: bold; - } + strong { + font-weight: bold; + } - small { - font-size: props.get(vars.$small--font-size); - } + small { + font-size: props.get(vars.$small--font-size); + } - ul, - ol { - padding: 0; - margin: 0; - list-style: none; - } + ul, + ol { + padding: 0; + margin: 0; + list-style: none; + } - li { - padding: 0; - margin: 0; - } + li { + padding: 0; + margin: 0; + } - :focus, - :focus-visible { - outline: 0; - } + :focus, + :focus-visible { + outline: 0; + } - :link, - :visited { - color: currentColor; - text-decoration: none; - } + :link, + :visited { + color: currentColor; + text-decoration: none; + } - button, - input, - textarea { - box-sizing: content-box; - padding: 0; - margin: 0; - font-family: inherit; - font-size: 1em; - font-style: inherit; - font-weight: inherit; - line-height: inherit; - color: currentColor; - text-align: inherit; - text-transform: inherit; - appearance: none; - background: none; - border: 0; - - &::-moz-focus-inner { - border: 0; + button, + input, + textarea { + box-sizing: content-box; + padding: 0; + margin: 0; + font-family: inherit; + font-size: 1em; + font-style: inherit; + font-weight: inherit; + line-height: inherit; + color: currentColor; + text-align: inherit; + text-transform: inherit; + appearance: none; + background: none; + border: 0; + + &::-moz-focus-inner { + border: 0; + } } - } - input, - textarea { - &::placeholder { - color: props.get(core.$theme, --text-mute); - opacity: 1; - } + input, + textarea { + &::placeholder { + color: props.get(core.$theme, --text-mute); + opacity: 1; + } - &:disabled { - color: props.get(core.$theme, --text-disabled); + &:disabled { + color: props.get(core.$theme, --text-disabled); + } } - } - textarea { - block-size: calc(1em * props.get(core.$font--standard--line-height)); - } + textarea { + block-size: calc(1em * props.get(core.$font--standard--line-height)); + } - hr { - block-size: props.get(core.$border-width--thin); - margin: 0; - background-color: props.get(core.$theme, --border); - border: 0; + hr { + block-size: props.get(core.$border-width--thin); + margin: 0; + background-color: props.get(core.$theme, --border); + border: 0; + } } } -- cgit v1.2.3-70-g09d2