From 1cd5b777ee61f6713f532db30a25c53a250ceeff Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 11 Jun 2022 16:11:25 +0200 Subject: Added list styles --- src/_base.scss | 12 +++++++--- src/_declare-vars.scss | 2 +- src/_scopes.scss | 1 + src/scopes/_blockquotes.scss | 4 ++-- src/scopes/_lists.scss | 52 ++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 65 insertions(+), 6 deletions(-) create mode 100644 src/scopes/_lists.scss (limited to 'src') diff --git a/src/_base.scss b/src/_base.scss index cf7ff05..76589d3 100644 --- a/src/_base.scss +++ b/src/_base.scss @@ -26,7 +26,7 @@ code { pre, code { - @include mx.set-font(--mono, (--size: calc(fn.dim(--font-size --100) - 1px))); + @include mx.set-font(--mono, (--size: .93em)); } pre { @@ -78,8 +78,14 @@ small { ul, ol { - margin: fn.dim(--paragraph --margin-top) 0 0; - padding-left: fn.dim(--list --indent); + margin: 0; + padding: 0; + list-style: none; +} + +li { + margin: 0; + padding: 0; } :focus { diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index b60374d..ae423c1 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -104,7 +104,7 @@ ), --list: ( - --indent: 3rem, + --indent: fn.dim(--size --400, null), ), ), ), 'dims'); diff --git a/src/_scopes.scss b/src/_scopes.scss index 28c5399..9a9d8ca 100644 --- a/src/_scopes.scss +++ b/src/_scopes.scss @@ -2,4 +2,5 @@ @use 'scopes/invisible-links'; @use 'scopes/code'; @use 'scopes/blockquotes'; +@use 'scopes/lists'; @use 'scopes/headings'; diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss index 0942542..37dc565 100644 --- a/src/scopes/_blockquotes.scss +++ b/src/scopes/_blockquotes.scss @@ -4,7 +4,7 @@ @include iro.props-namespace('blockquotes') { @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--size --400), + --indent: fn.global-dim(--list --indent), --margin-top: fn.global-dim(--paragraph --margin-top), ) ), 'dims'); @@ -18,7 +18,7 @@ @include iro.bem-scope(iro.props-namespace()) { blockquote { margin: fn.dim(--margin-top) 0 0 1px; - padding-left: calc(fn.dim(--pad-x) - 3px); + padding-left: calc(fn.dim(--indent) - 3px); border-left: 3px solid fn.color(--border); } } diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss new file mode 100644 index 0000000..2ea342f --- /dev/null +++ b/src/scopes/_lists.scss @@ -0,0 +1,52 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('lists') { + @include iro.props-store(( + --dims: ( + --indent: fn.global-dim(--list --indent), + --margin-top: fn.global-dim(--paragraph --margin-top), + ) + ), '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); + } + } +} -- cgit v1.2.3-54-g00ecf