From 248a90eb5fe1f5fa624423b81d0b18df85fabe35 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 14 Feb 2022 18:45:32 +0100 Subject: Restructured size variables --- src/layouts/_card.scss | 28 ++++++++++++++-------------- src/layouts/_container.scss | 14 +++++++------- src/layouts/_form.scss | 6 +++--- 3 files changed, 24 insertions(+), 24 deletions(-) (limited to 'src/layouts') diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss index a0220c3..6b66a35 100644 --- a/src/layouts/_card.scss +++ b/src/layouts/_card.scss @@ -5,15 +5,15 @@ @include iro.props-namespace('card') { @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--spacing --sm), - --pad-y: fn.global-dim(--spacing --xs), - --sm: ( - --pad-x: fn.global-dim(--spacing --xs), - --pad-y: fn.global-dim(--spacing --xxs), + --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), ), - --lg: ( - --pad-x: fn.global-dim(--spacing --md), - --pad-y: fn.global-dim(--spacing --sm), + --200: ( + --pad-x: fn.global-dim(--size --300), + --pad-y: fn.global-dim(--size --150), ) ) ), 'dims'); @@ -25,14 +25,14 @@ gap: fn.dim(--pad-x); line-height: 1.4; - @include iro.bem-modifier('sm') { - padding: fn.dim(--sm --pad-y) fn.dim(--sm --pad-x); - gap: fn.dim(--sm --pad-x); + @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('lg') { - padding: fn.dim(--lg --pad-y) fn.dim(--lg --pad-x); - gap: fn.dim(--lg --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('flush') { diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss index d3ecb5f..b8fc879 100644 --- a/src/layouts/_container.scss +++ b/src/layouts/_container.scss @@ -7,9 +7,9 @@ --dims: ( --content-width: iro.fn-px-to-rem(700px), --sm-content-width: iro.fn-px-to-rem(360px), - --pad-x: fn.global-dim(--spacing --xl), - --pad-y: fn.global-dim(--spacing --xl), - --in-page-spacing-y: fn.global-dim(--spacing --xl), + --pad-x: fn.global-dim(--size --700), + --pad-y: fn.global-dim(--size --700), + --in-page-spacing-y: fn.global-dim(--size --700), ) ), 'dims'); @@ -17,8 +17,8 @@ overflow: hidden; @include iro.bem-elem('inner') { - margin-top: calc(-1 * fn.global-dim(--spacing --xl)); - margin-bottom: calc(-1 * fn.global-dim(--spacing --xl)); + margin-top: calc(-1 * fn.global-dim(--size --700)); + margin-bottom: calc(-1 * fn.global-dim(--size --700)); &::before, &::after { @@ -29,11 +29,11 @@ } &::before { - margin-bottom: fn.global-dim(--spacing --xl); + margin-bottom: fn.global-dim(--size --700); } &::after { - margin-top: fn.global-dim(--spacing --xl); + margin-top: fn.global-dim(--size --700); } } diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss index a8308af..8228c44 100644 --- a/src/layouts/_form.scss +++ b/src/layouts/_form.scss @@ -6,9 +6,9 @@ @include iro.props-namespace('form') { @include iro.props-store(( --dims: ( - --item-spacing-y: fn.global-dim(--spacing --md), - --label-spacing-x: fn.global-dim(--spacing --md), - --hint-font-size: fn.global-dim(--font-size --sm), + --item-spacing-y: fn.global-dim(--size --325), + --label-spacing-x: fn.global-dim(--size --325), + --hint-font-size: fn.global-dim(--font-size --75), ), ), 'dims'); -- cgit v1.2.3-70-g09d2