From 144b7a2ea83507c98544d14ad9435cc5e51ac071 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 5 Feb 2022 12:26:35 +0100 Subject: Update --- src/objects/_heading.scss | 68 ++++++++++++++++++++++++++ src/objects/_rule.scss | 120 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 188 insertions(+) create mode 100644 src/objects/_heading.scss create mode 100644 src/objects/_rule.scss (limited to 'src/objects') diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss new file mode 100644 index 0000000..a0ce052 --- /dev/null +++ b/src/objects/_heading.scss @@ -0,0 +1,68 @@ +@use 'iro-sass/src/index' as iro; +@use '../vars'; +@use '../mixins/typography'; + +@include iro.props-namespace('heading') { + @include iro.props-store(( + --dims: ( + --in-page-margin: ( + --top: iro.props-get(--dims --spacing --y --lg, $global: true), + --top-sibling: iro.props-get(--dims --spacing --y --md, $global: true), + --bottom: iro.props-get(--dims --spacing --y --sm, $global: true), + ), + ), + --colors: ( + --light: iro.props-get(--colors --fg-hi, $global: true), + --strong: iro.props-get(--colors --fg-lo, $global: true), + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + @include typography.set-font(vars.$font--headline); + + display: block; + margin-top: iro.props-get(--dims --in-page-margin --top); + margin-bottom: 0; + + & + & { + margin-top: iro.props-get(--dims --in-page-margin --top-sibling); + } + + @include iro.bem-modifier('xxl') { + color: iro.props-get(--colors --strong); + font-size: iro.props-get(--dims --font-size --xxxl, $global: true); + } + + @include iro.bem-modifier('xl') { + color: iro.props-get(--colors --strong); + font-size: iro.props-get(--dims --font-size --xxl, $global: true); + } + + @include iro.bem-modifier('lg') { + color: iro.props-get(--colors --strong); + font-size: iro.props-get(--dims --font-size --xl, $global: true); + } + + @include iro.bem-modifier('md') { + color: iro.props-get(--colors --strong); + font-size: iro.props-get(--dims --font-size --lg, $global: true); + } + + @include iro.bem-modifier('sm') { + @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); + + color: iro.props-get(--colors --strong); + font-size: iro.props-get(--dims --font-size --md, $global: true); + font-weight: 500; + } + + @include iro.bem-modifier('xs') { + @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); + + color: iro.props-get(--colors --light); + font-size: iro.props-get(--dims --font-size --xs, $global: true); + font-weight: 500; + text-transform: uppercase; + } + } +} diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss new file mode 100644 index 0000000..74987da --- /dev/null +++ b/src/objects/_rule.scss @@ -0,0 +1,120 @@ +@use 'iro-sass/src/index' as iro; +@use '../vars'; +@use '../mixins/typography'; + +@include iro.props-namespace('rule') { + @include iro.props-store(( + --dims: ( + --margin-y: iro.props-get(--dims --spacing --y --xs, $global: true), + + --strong: ( + --border-width: iro.props-get(--dims --border-width --thick, $global: true), + --label-font-size: iro.props-get(--dims --font-size --md, $global: true), + ), + --medium: ( + --border-width: iro.props-get(--dims --border-width --medium, $global: true), + --label-font-size: iro.props-get(--dims --font-size --sm, $global: true), + ), + --faint: ( + --border-width: iro.props-get(--dims --border-width --thin, $global: true), + --label-font-size: iro.props-get(--dims --font-size --xs, $global: true), + ), + ), + --colors: ( + --strong: ( + --bg: iro.props-get(--colors --fg, $global: true), + --label: iro.props-get(--colors --fg, $global: true), + ), + --medium: ( + --bg: iro.props-get(--colors --obj, $global: true), + --label: iro.props-get(--colors --fg-hi, $global: true), + ), + --faint: ( + --bg: iro.props-get(--colors --obj, $global: true), + --label: iro.props-get(--colors --fg-hi2, $global: true), + ), + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + display: block; + height: iro.props-get(--dims --strong --border-width); + margin-top: iro.props-get(--dims --margin-y); + margin-bottom: iro.props-get(--dims --margin-y); + background-color: iro.props-get(--colors --strong --bg); + + @include iro.bem-modifier('medium') { + height: iro.props-get(--dims --medium --border-width); + background-color: iro.props-get(--colors --medium --bg); + } + + @include iro.bem-modifier('faint') { + height: iro.props-get(--dims --faint --border-width); + background-color: iro.props-get(--colors --faint --bg); + } + + @include iro.bem-modifier('labelled') { + display: flex; + flex-direction: row; + align-items: center; + height: auto; + border-radius: 0; + background-color: transparent; + + &::before, + &::after { + content: ''; + display: block; + flex: 1 1 auto; + width: 100%; + height: 3px; + background-color: iro.props-get(--colors --strong --bg); + } + + &::before { + margin-right: 1em; + } + + &::after { + margin-left: 1em; + } + + @include iro.bem-elem('label') { + flex: 0 0 auto; + color: iro.props-get(--colors --strong --label); + font-size: iro.props-get(--dims --strong --label-font-size); + font-weight: 700; + letter-spacing: .5px; + text-transform: uppercase; + } + + @include iro.bem-modifier('medium') { + &::before, + &::after { + height: 2px; + background-color: iro.props-get(--colors --medium --bg); + } + + @include iro.bem-elem('label') { + color: iro.props-get(--colors --medium --label); + font-size: iro.props-get(--dims --medium --label-font-size); + font-weight: 500; + } + } + + @include iro.bem-modifier('faint') { + &::before, + &::after { + height: 1px; + background-color: iro.props-get(--colors --faint --bg); + } + + @include iro.bem-elem('label') { + color: iro.props-get(--colors --faint --label); + font-size: iro.props-get(--dims --faint --label-font-size); + font-weight: 500; + } + } + } + } +} -- cgit v1.2.3-70-g09d2