From 9faf093cc16ad6ee9eafbaf253ff6c31a1f5ee7f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 11 Jun 2022 07:54:12 +0200 Subject: card -> media --- src/_layouts.scss | 2 +- src/layouts/_card.scss | 67 ----------------------------------------------- src/layouts/_media.scss | 67 +++++++++++++++++++++++++++++++++++++++++++++++ src/objects/_heading.scss | 7 +++-- src/scopes/_headings.scss | 7 +++-- 5 files changed, 78 insertions(+), 72 deletions(-) delete mode 100644 src/layouts/_card.scss create mode 100644 src/layouts/_media.scss (limited to 'src') diff --git a/src/_layouts.scss b/src/_layouts.scss index 331eb7e..cc8b1c5 100644 --- a/src/_layouts.scss +++ b/src/_layouts.scss @@ -1,4 +1,4 @@ -@use 'layouts/card'; +@use 'layouts/media'; @use 'layouts/container'; @use 'layouts/button-group'; @use 'layouts/form'; diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss deleted file mode 100644 index 176df06..0000000 --- a/src/layouts/_card.scss +++ /dev/null @@ -1,67 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('card') { - @include iro.props-store(( - --dims: ( - --pad-x: fn.global-dim(--size --150), - --pad-y: fn.global-dim(--size --85), - - --75: ( - --pad-x: fn.global-dim(--size --100), - --pad-y: fn.global-dim(--size --50), - ), - - --200: ( - --pad-x: fn.global-dim(--size --300), - --pad-y: fn.global-dim(--size --150), - ), - - --300: ( - --pad-x: fn.global-dim(--size --450), - --pad-y: fn.global-dim(--size --225), - ) - ) - ), 'dims'); - - @include iro.bem-layout(iro.props-namespace()) { - display: flex; - align-items: center; - padding: fn.dim(--pad-y) fn.dim(--pad-x); - gap: fn.dim(--pad-x); - line-height: 1.4; - - @include iro.bem-modifier('75') { - padding: fn.dim(--75 --pad-y) fn.dim(--75 --pad-x); - gap: fn.dim(--75 --pad-x); - } - - @include iro.bem-modifier('200') { - padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x); - gap: fn.dim(--200 --pad-x); - } - - @include iro.bem-modifier('300') { - padding: fn.dim(--300 --pad-y) fn.dim(--300 --pad-x); - gap: fn.dim(--300 --pad-x); - } - - @include iro.bem-modifier('flush') { - padding: 0; - } - - @include iro.bem-modifier('gapless') { - gap: 0; - } - - @include iro.bem-elem('block') { - flex: 0 0 auto; - - @include iro.bem-modifier('main') { - flex-shrink: 1; - width: 100%; - min-width: 0; - } - } - } -} diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss new file mode 100644 index 0000000..61f3cda --- /dev/null +++ b/src/layouts/_media.scss @@ -0,0 +1,67 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('media') { + @include iro.props-store(( + --dims: ( + --pad-x: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --85), + + --75: ( + --pad-x: fn.global-dim(--size --100), + --pad-y: fn.global-dim(--size --50), + ), + + --200: ( + --pad-x: fn.global-dim(--size --300), + --pad-y: fn.global-dim(--size --150), + ), + + --300: ( + --pad-x: fn.global-dim(--size --450), + --pad-y: fn.global-dim(--size --225), + ) + ) + ), 'dims'); + + @include iro.bem-layout(iro.props-namespace()) { + display: flex; + align-items: center; + padding: fn.dim(--pad-y) fn.dim(--pad-x); + gap: fn.dim(--pad-x); + line-height: 1.4; + + @include iro.bem-modifier('75') { + padding: fn.dim(--75 --pad-y) fn.dim(--75 --pad-x); + gap: fn.dim(--75 --pad-x); + } + + @include iro.bem-modifier('200') { + padding: fn.dim(--200 --pad-y) fn.dim(--200 --pad-x); + gap: fn.dim(--200 --pad-x); + } + + @include iro.bem-modifier('300') { + padding: fn.dim(--300 --pad-y) fn.dim(--300 --pad-x); + gap: fn.dim(--300 --pad-x); + } + + @include iro.bem-modifier('flush') { + padding: 0; + } + + @include iro.bem-modifier('gapless') { + gap: 0; + } + + @include iro.bem-elem('block') { + flex: 0 0 auto; + + @include iro.bem-modifier('main') { + flex-shrink: 1; + width: 100%; + min-width: 0; + } + } + } +} diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index e73b074..d1f37e0 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -17,6 +17,7 @@ display: block; margin-top: fn.global-dim(--heading --margin-top); + transform: translateX(-.06em); letter-spacing: normal; text-transform: none; @@ -53,7 +54,8 @@ --spacing: 1px )); - color: fn.color(--strong); + transform: none; + color: fn.color(--strong); } @include iro.bem-modifier('xs') { @@ -65,7 +67,8 @@ --spacing: 1px )); - color: fn.color(--light); + transform: none; + color: fn.color(--light); } @include iro.bem-elem('primary') { diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss index 2e7d88f..58bac7f 100644 --- a/src/scopes/_headings.scss +++ b/src/scopes/_headings.scss @@ -13,6 +13,7 @@ @include mx.set-font(--headline); display: block; + transform: translateX(-.06em); letter-spacing: normal; text-transform: none; } @@ -47,7 +48,8 @@ --spacing: 1px )); - color: fn.foreign-color(--heading, --strong); + transform: none; + color: fn.foreign-color(--heading, --strong); } h6 { @@ -59,7 +61,8 @@ --spacing: 1px )); - color: fn.foreign-color(--heading, --light); + transform: none; + color: fn.foreign-color(--heading, --light); } @include iro.bem-elem('primary') { -- cgit v1.2.3-70-g09d2