From cad79b949b060cd360582c2d208b37a51578e778 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 7 Feb 2022 10:56:11 +0100 Subject: Improved font handling --- src/objects/_action-button.scss | 1 + src/objects/_avatar.scss | 2 ++ src/objects/_button.scss | 5 +---- src/objects/_checkbox.scss | 4 ++-- src/objects/_heading.scss | 8 +++----- src/objects/_radio.scss | 8 ++++---- src/objects/_switch.scss | 4 ++-- src/objects/_text-field.scss | 4 ---- 8 files changed, 15 insertions(+), 21 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index 86c7089..19cf37b 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -94,6 +94,7 @@ @include iro.bem-object(iro.props-namespace()) { display: inline-block; padding: fn.dim(--pad-y) fn.dim(--pad-x); + overflow: hidden; border: 1px solid fn.color(--border); border-radius: fn.dim(--rounding); background-color: fn.color(--bg); diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss index 3bdfddc..ca0d373 100644 --- a/src/objects/_avatar.scss +++ b/src/objects/_avatar.scss @@ -52,6 +52,8 @@ color: #fff; line-height: fn.dim(--size); text-align: center; + object-fit: cover; + object-position: center center; } @include iro.bem-modifier('circle') { diff --git a/src/objects/_button.scss b/src/objects/_button.scss index f158176..6f69ee8 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -1,7 +1,5 @@ @use 'iro-sass/src/index' as iro; @use '../functions' as fn; -@use '../vars'; -@use '../mixins/typography'; @mixin button-variant($variant) { border-color: fn.color(--#{$variant} --bg); @@ -111,12 +109,11 @@ ), 'colors'); @include iro.bem-object(iro.props-namespace()) { - @include typography.set-font(vars.$font--main, (weight: 500)); - display: inline-block; padding: fn.dim(--pad-y) fn.dim(--pad-x); border: 2px solid transparent; border-radius: fn.dim(--rounding); + font-weight: 500; line-height: 1; text-align: center; text-decoration: none; diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index 3bda5e7..5ea2e4a 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -4,7 +4,7 @@ @include iro.props-namespace('checkbox') { @include iro.props-store(( --dims: ( - --size: iro.fn-px-to-rem(14px), + --size: iro.fn-px-to-rem(13px), --label-gap: .6rem, --border-width: fn.global-dim(--border-width --medium), --pad-x: .3rem, @@ -56,7 +56,7 @@ flex: 0 0 auto; width: fn.dim(--size); height: fn.dim(--size); - margin-top: calc(.5 * ($line-height * 1em - fn.dim(--size))); + margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size))); border-radius: fn.dim(--border-width); background-color: fn.color(--box-border); diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss index 7d67a87..2af8e19 100644 --- a/src/objects/_heading.scss +++ b/src/objects/_heading.scss @@ -1,7 +1,5 @@ @use 'iro-sass/src/index' as iro; @use '../functions' as fn; -@use '../vars'; -@use '../mixins/typography'; @include iro.props-namespace('heading') { @include iro.props-store(( @@ -22,7 +20,7 @@ ), 'colors'); @include iro.bem-object(iro.props-namespace()) { - @include typography.set-font(vars.$font--headline); + @include fn.set-font(--headline); display: block; margin-top: fn.dim(--in-page-margin --top); @@ -53,7 +51,7 @@ } @include iro.bem-modifier('sm') { - @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); + @include fn.set-font(--standard, (--line-height: fn.global-dim(--font --headline --line-height))); color: fn.color(--strong); font-size: fn.global-dim(--font-size --md); @@ -61,7 +59,7 @@ } @include iro.bem-modifier('xs') { - @include typography.set-font($font--main, (line-height: map-get(vars.$font--headline, line-height))); + @include fn.set-font(--standard, (--line-height: fn.global-dim(--font --headline --line-height))); color: fn.color(--light); font-size: fn.global-dim(--font-size --xs); diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 26e8c31..442034b 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), + --diameter: iro.fn-px-to-rem(14px), --label-gap: .6rem, --border-width: fn.global-dim(--border-width --medium), - --pad-x: .3rem, - --pad-y: .3rem, + --pad-x: .3rem, + --pad-y: .3rem, --margin-right: fn.global-dim(--spacing --x --md), ), ), 'dims'); @@ -57,7 +57,7 @@ flex: 0 0 auto; width: fn.dim(--diameter); height: fn.dim(--diameter); - margin-top: calc(.5 * ($line-height * 1em - fn.dim(--diameter))); + margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--diameter))); border-radius: 2em; background-color: fn.color(--circle-border); diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 2d70844..9911b73 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -5,7 +5,7 @@ @include iro.props-store(( --dims: ( --width: iro.fn-px-to-rem(26px), - --height: iro.fn-px-to-rem(15px), + --height: iro.fn-px-to-rem(14px), --label-gap: .6rem, --border-width: fn.global-dim(--border-width --medium), --pad-x: .3rem, @@ -61,7 +61,7 @@ flex: 0 0 auto; width: fn.dim(--width); height: fn.dim(--height); - margin-top: calc(.5 * ($line-height * 1em - fn.dim(--height))); + margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--height))); transition: background-color .2s ease; border-radius: 2em; background-color: fn.color(--track-bg); diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index 90d4b11..b819811 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -1,7 +1,5 @@ @use 'iro-sass/src/index' as iro; @use '../functions' as fn; -@use '../vars'; -@use '../mixins/typography'; @mixin invalid { @include iro.bem-sibling-elem('bg') { @@ -108,8 +106,6 @@ } @include iro.bem-elem('native') { - @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height)); - width: 100%; color: fn.color(--text); resize: none; -- cgit v1.2.3-54-g00ecf