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/_card.scss | 67 ------------------------------------------------- src/layouts/_media.scss | 67 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 67 insertions(+), 67 deletions(-) delete mode 100644 src/layouts/_card.scss create mode 100644 src/layouts/_media.scss (limited to 'src/layouts') 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; + } + } + } +} -- cgit v1.2.3-70-g09d2