From 1e902449652213eb1feae5e61740cb9ce3b9d6e3 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 22 Jun 2024 10:39:48 +0200 Subject: WIP: Refactoring --- src/scopes/_code.scss | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 src/scopes/_code.scss (limited to 'src/scopes/_code.scss') diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss new file mode 100644 index 0000000..a6905a3 --- /dev/null +++ b/src/scopes/_code.scss @@ -0,0 +1,59 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('code') { + @include iro.props-store(( + --dims: ( + --inline: ( + --pad-i: fn.global-dim(--size --50), + --pad-b: fn.global-dim(--size --10), + --rounding: fn.global-dim(--rounding), + ), + --block: ( + --pad-i: fn.global-dim(--size --150), + --pad-b: fn.global-dim(--size --85), + --margin-bs: fn.global-dim(--paragraph --margin-bs), + --rounding: fn.global-dim(--rounding), + ) + ), + --colors: ( + --inline: ( + --fg: fn.global-color(--red --1100), + --bg: fn.global-color(--red --200), + ), + --block: ( + --fg: fn.global-color(--text), + --bg: fn.global-color(--bg-l2), + ) + ) + )); + + @include iro.bem-scope(iro.props-namespace()) { + code { + padding-block: fn.dim(--inline --pad-b); + padding-inline: fn.dim(--inline --pad-i); + border-radius: fn.dim(--inline --rounding); + background-color: fn.color(--inline --bg); + color: fn.color(--inline --fg); + } + + pre { + margin-block: fn.dim(--block --margin-bs) 0; + margin-inline: 0; + padding-block: fn.dim(--block --pad-b); + padding-inline: fn.dim(--block --pad-i); + border-radius: fn.dim(--block --rounding); + background-color: fn.color(--block --bg); + color: fn.color(--block --fg); + + code { + display: inline-block; + margin-inline-end: fn.dim(--block --pad-i); + padding: 0; + border-radius: 0; + background-color: transparent; + color: currentColor; + } + } + } +} -- cgit v1.2.3-54-g00ecf