From 48cb00040763459fc46d4aa108bf72c12f48f422 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 21 Jun 2024 23:07:50 +0200 Subject: WIP: Refactoring --- src/.old/scopes/_blockquotes.scss | 35 ++++++++++++ src/.old/scopes/_code.scss | 68 +++++++++++++++++++++++ src/.old/scopes/_lists.scss | 67 ++++++++++++++++++++++ src/.old/scopes/_tables.scss | 114 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 284 insertions(+) create mode 100644 src/.old/scopes/_blockquotes.scss create mode 100644 src/.old/scopes/_code.scss create mode 100644 src/.old/scopes/_lists.scss create mode 100644 src/.old/scopes/_tables.scss (limited to 'src/.old/scopes') diff --git a/src/.old/scopes/_blockquotes.scss b/src/.old/scopes/_blockquotes.scss new file mode 100644 index 0000000..5383bd7 --- /dev/null +++ b/src/.old/scopes/_blockquotes.scss @@ -0,0 +1,35 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('blockquotes') { + @include iro.props-store(( + --dims: ( + --indent: fn.global-dim(--list --indent), + --margin-top: fn.global-dim(--paragraph --margin-top), + + --compact: ( + --indent: fn.global-dim(--list --compact-indent), + ), + ) + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --border: fn.global-color(--obj), + ) + ), 'colors'); + + @include iro.bem-scope(iro.props-namespace()) { + blockquote { + margin: fn.dim(--margin-top) 0 0 1px; + padding-left: calc(fn.dim(--indent) - 3px); + border-left: 3px solid fn.color(--border); + } + + @include iro.bem-modifier('compact') { + blockquote { + padding-left: calc(fn.dim(--compact --indent) - 3px); + } + } + } +} diff --git a/src/.old/scopes/_code.scss b/src/.old/scopes/_code.scss new file mode 100644 index 0000000..4eb9458 --- /dev/null +++ b/src/.old/scopes/_code.scss @@ -0,0 +1,68 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('code') { + @include iro.props-store(( + --dims: ( + --inline: ( + --pad-x: fn.global-dim(--size --50), + --pad-y: fn.global-dim(--size --10), + --rounding: 3px, + ), + --block: ( + --pad-x: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --85), + --margin-top: fn.global-dim(--paragraph --margin-top), + --rounding: 3px, + ) + ) + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --inline: ( + --fg: fn.global-color(--red --quiet --fg), + --bg: fn.global-color(--red --quiet --bg), + ), + --block: ( + --fg: fn.global-color(--fg), + --bg: fn.global-color(--bg-hi2), + ) + ) + ), 'colors'); + + @include iro.props-store(( + --colors: ( + --block: ( + --fg: fn.global-color(--fg-lo), + --bg: fn.global-color(--obj-hi), + ) + ) + ), 'palette-light-hi'); + + @include iro.bem-scope(iro.props-namespace()) { + code { + padding: fn.dim(--inline --pad-y) fn.dim(--inline --pad-x); + border-radius: fn.dim(--inline --rounding); + background-color: fn.color(--inline --bg); + color: fn.color(--inline --fg); + } + + pre { + margin: fn.dim(--block --margin-top) 0 0 0; + padding: fn.dim(--block --pad-y) fn.dim(--block --pad-x); + border-radius: fn.dim(--block --rounding); + background-color: fn.color(--block --bg); + color: fn.color(--block --fg); + + code { + display: inline-block; + margin-right: fn.dim(--block --pad-x); + padding: 0; + border-radius: 0; + background-color: transparent; + color: currentColor; + } + } + } +} diff --git a/src/.old/scopes/_lists.scss b/src/.old/scopes/_lists.scss new file mode 100644 index 0000000..1322f2d --- /dev/null +++ b/src/.old/scopes/_lists.scss @@ -0,0 +1,67 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('lists') { + @include iro.props-store(( + --dims: ( + --indent: calc(fn.global-dim(--list --indent) + 1em), + --margin-top: fn.global-dim(--paragraph --margin-top), + + --compact: ( + --indent: fn.global-dim(--list --compact-indent), + ), + ) + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --border: fn.global-color(--obj-hi), + ) + ), 'colors'); + + @include iro.bem-scope(iro.props-namespace()) { + ul, + ol { + margin-top: fn.dim(--margin-top); + padding-left: fn.dim(--indent); + + ul, + ol { + margin-top: 0; + } + } + + ul { + list-style: disc; + } + + ol { + list-style: decimal; + } + + dl { + margin: fn.dim(--margin-top) 0 0; + padding: 0; + } + + dt { + color: fn.global-color(--fg-lo); + font-weight: bold; + } + + dd { + margin: 0 0 0 fn.dim(--indent); + } + + @include iro.bem-modifier('compact') { + ul, + ol { + padding-left: calc(fn.dim(--compact --indent) - 3px); + } + + dd { + margin-left: calc(fn.dim(--compact --indent) - 3px); + } + } + } +} diff --git a/src/.old/scopes/_tables.scss b/src/.old/scopes/_tables.scss new file mode 100644 index 0000000..f78e81b --- /dev/null +++ b/src/.old/scopes/_tables.scss @@ -0,0 +1,114 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; +@use '../mixins' as mx; + +@include iro.props-namespace('tables') { + @include iro.props-store(( + --dims: ( + --pad-x: fn.global-dim(--size --175), + --pad-y: fn.global-dim(--size --125), + --rounding: 3px, + --margin-top: fn.global-dim(--paragraph --margin-top), + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --border: fn.global-color(--obj), + --heading: fn.global-color(--fg-hi), + --box: ( + --bg: fn.global-color(--bg-hi2), + ) + ) + ), 'colors'); + + @include iro.bem-scope(iro.props-namespace()) { + table { + margin-top: fn.dim(--margin-top); + border-spacing: 0; + border-collapse: separate; + } + + th { + @include mx.set-font(--standard, ( + --line-height: null, + --size: fn.global-dim(--font-size --50), + --weight: 500, + --transform: uppercase, + --spacing: .5px + )); + + padding: fn.dim(--pad-y) fn.dim(--pad-x); + color: fn.color(--heading); + text-align: left; + } + + td { + padding: fn.dim(--pad-y) fn.dim(--pad-x); + border-width: 1px 0 0; + border-style: solid; + border-color: fn.color(--border); + } + + tr { + &:last-child { + td { + border-bottom-width: 1px; + } + } + } + + @include iro.bem-modifier('flush') { + th, + td { + &:first-child { + padding-left: 0; + } + + &:last-child { + padding-right: 0; + } + } + } + + @include iro.bem-modifier('box') { + td { + background-color: fn.color(--box --bg); + + &:first-child { + border-left-width: 1px; + } + + &:last-child { + border-right-width: 1px; + } + } + + tr { + &:first-child { + td { + &:first-child { + border-top-left-radius: fn.dim(--rounding); + } + + &:last-child { + border-top-right-radius: fn.dim(--rounding); + } + } + } + + &:last-child { + td { + &:first-child { + border-bottom-left-radius: fn.dim(--rounding); + } + + &:last-child { + border-bottom-right-radius: fn.dim(--rounding); + } + } + } + } + } + } +} -- cgit v1.2.3-70-g09d2