From 57bd000a6abe9a846ea68ae886a327c12f97cdd2 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 14 Feb 2022 21:15:37 +0100 Subject: Update --- src/objects/_action-button.scss | 4 ++-- src/objects/_avatar.scss | 43 +++++++++++++++++++++++++---------------- src/objects/_button.scss | 4 ++-- src/objects/_checkbox.scss | 8 ++++---- src/objects/_radio.scss | 8 ++++---- src/objects/_switch.scss | 10 +++++----- 6 files changed, 43 insertions(+), 34 deletions(-) (limited to 'src') diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index ab9e38b..83321da 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -4,8 +4,8 @@ @include iro.props-namespace('action-button') { @include iro.props-store(( --dims: ( - --pad-x: iro.fn-px-to-rem(10px), - --pad-y: iro.fn-px-to-rem(10px), + --pad-x: fn.global-dim(--size --125), + --pad-y: fn.global-dim(--size --125), --rounding: 3px, ), ), 'dims'); diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index 09bebf0..0d9773f 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss @@ -4,9 +4,18 @@ @include iro.props-namespace('avatar') { @include iro.props-store(( --dims: ( - --size: iro.fn-px-to-rem(40px), - --size-sm: iro.fn-px-to-rem(30px), - --size-xs: iro.fn-px-to-rem(18px), + --100: ( + --size: fn.global-dim(--size --450), + --font-size: fn.global-dim(--font-size --100), + ), + --75: ( + --size: fn.global-dim(--size --325), + --font-size: fn.global-dim(--font-size --75), + ), + --50: ( + --size: fn.global-dim(--size --225), + --font-size: fn.global-dim(--font-size --50), + ), --indicator-size: fn.foreign-dim(--status-indicator, --size), --indicator-spacing: iro.fn-px-to-rem(3px), --rounding: 25%, @@ -24,7 +33,7 @@ @include iro.bem-object(iro.props-namespace()) { display: inline-block; position: relative; - font-size: 1rem; + font-size: fn.dim(--100 --font-size); font-style: normal; @include iro.bem-elem('status') { @@ -45,12 +54,12 @@ @include iro.bem-elem('content') { display: block; - width: fn.dim(--size); - height: fn.dim(--size); + width: fn.dim(--100 --size); + height: fn.dim(--100 --size); border-radius: fn.dim(--rounding); background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l)); color: #fff; - line-height: fn.dim(--size); + line-height: fn.dim(--100 --size); text-align: center; object-fit: cover; object-position: center center; @@ -68,23 +77,23 @@ } } - @include iro.bem-modifier('sm') { - font-size: iro.fn-px-to-rem(13px); + @include iro.bem-modifier('75') { + font-size: fn.dim(--75 --font-size); @include iro.bem-elem('content') { - width: fn.dim(--size-sm); - height: fn.dim(--size-sm); - line-height: fn.dim(--size-sm); + width: fn.dim(--75 --size); + height: fn.dim(--75 --size); + line-height: fn.dim(--75 --size); } } - @include iro.bem-modifier('xs') { - font-size: iro.fn-px-to-rem(11px); + @include iro.bem-modifier('50') { + font-size: fn.dim(--50 --font-size); @include iro.bem-elem('content') { - width: fn.dim(--size-xs); - height: fn.dim(--size-xs); - line-height: fn.dim(--size-xs); + width: fn.dim(--50 --size); + height: fn.dim(--50 --size); + line-height: fn.dim(--50 --size); } } } diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 15804f1..94711b7 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -43,8 +43,8 @@ @include iro.props-namespace('button') { @include iro.props-store(( --dims: ( - --pad-x: iro.fn-px-to-rem(19px), - --pad-y: iro.fn-px-to-rem(8px), + --pad-x: fn.global-dim(--size --225), + --pad-y: fn.global-dim(--size --100), --rounding: 10em, ), ), 'dims'); diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index 107d7ad..f5c599b 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -4,11 +4,11 @@ @include iro.props-namespace('checkbox') { @include iro.props-store(( --dims: ( - --size: iro.fn-px-to-rem(14px), - --label-gap: iro.fn-px-to-rem(10px), + --size: fn.global-dim(--size --175), + --label-gap: fn.global-dim(--size --125), --border-width: fn.global-dim(--border-width --medium), - --pad-x: iro.fn-px-to-rem(5px), - --pad-y: iro.fn-px-to-rem(5px), + --pad-x: fn.global-dim(--size --65), + --pad-y: fn.global-dim(--size --65), --margin-right: fn.global-dim(--size --325), ), ), 'dims'); diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 96a5174..9482c5b 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -4,11 +4,11 @@ @include iro.props-namespace('radio') { @include iro.props-store(( --dims: ( - --diameter: iro.fn-px-to-rem(15px), - --label-gap: iro.fn-px-to-rem(10px), + --diameter: calc(fn.global-dim(--size --175) + 1px), + --label-gap: fn.global-dim(--size --125), --border-width: fn.global-dim(--border-width --medium), - --pad-x: iro.fn-px-to-rem(5px), - --pad-y: iro.fn-px-to-rem(5px), + --pad-x: fn.global-dim(--size --65), + --pad-y: fn.global-dim(--size --65), --margin-right: fn.global-dim(--size --325), ), ), 'dims'); diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index b5aa839..447335e 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -4,12 +4,12 @@ @include iro.props-namespace('switch') { @include iro.props-store(( --dims: ( - --width: iro.fn-px-to-rem(26px), - --height: iro.fn-px-to-rem(15px), - --label-gap: iro.fn-px-to-rem(10px), + --width: fn.global-dim(--size --325), + --height: calc(fn.global-dim(--size --175) + 1px), + --label-gap: fn.global-dim(--size --125), --border-width: fn.global-dim(--border-width --medium), - --pad-x: iro.fn-px-to-rem(5px), - --pad-y: iro.fn-px-to-rem(5px), + --pad-x: fn.global-dim(--size --65), + --pad-y: fn.global-dim(--size --65), --margin-right: fn.global-dim(--size --325), ), ), 'dims'); -- cgit v1.2.3-70-g09d2