From 9691ccf48f64dd0fac669ae51943907cc8da9b78 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 6 Feb 2022 20:23:11 +0100 Subject: Added status indicator and avatar --- src/objects/_action-button.scss | 8 ++-- src/objects/_avatar.scss | 89 ++++++++++++++++++++++++++++++++++++++ src/objects/_button.scss | 8 ++-- src/objects/_checkbox.scss | 10 ++--- src/objects/_radio.scss | 10 ++--- src/objects/_status-indicator.scss | 33 ++++++++++++++ src/objects/_switch.scss | 10 ++--- src/objects/_text-field.scss | 8 ++-- 8 files changed, 149 insertions(+), 27 deletions(-) create mode 100644 src/objects/_avatar.scss create mode 100644 src/objects/_status-indicator.scss (limited to 'src/objects') diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss index dd5cea7..86c7089 100644 --- a/src/objects/_action-button.scss +++ b/src/objects/_action-button.scss @@ -4,9 +4,9 @@ @include iro.props-namespace('action-button') { @include iro.props-store(( --dims: ( - --padding-x: .6rem, - --padding-y: .6rem, - --rounding: 3px, + --pad-x: .6rem, + --pad-y: .6rem, + --rounding: 3px, ), ), 'dims'); @@ -93,7 +93,7 @@ @include iro.bem-object(iro.props-namespace()) { display: inline-block; - padding: fn.dim(--padding-y) fn.dim(--padding-x); + padding: fn.dim(--pad-y) fn.dim(--pad-x); 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 new file mode 100644 index 0000000..3bdfddc --- /dev/null +++ b/src/objects/_avatar.scss @@ -0,0 +1,89 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@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(20px), + --indicator-size: fn.foreign-dim(--status-indicator, --size), + --indicator-spacing: iro.fn-px-to-rem(3px), + --rounding: 25%, + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --h: 354, + --s: 44%, + --l: 45%, + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + display: inline-block; + position: relative; + font-size: 1rem; + font-style: normal; + + @include iro.bem-elem('status') { + position: absolute; + right: 0; + bottom: 0; + + @include iro.bem-next-elem('content') { + mask-image: radial-gradient( + circle calc(.5 * fn.dim(--indicator-size) + fn.dim(--indicator-spacing)) at + calc(100% - .5 * fn.dim(--indicator-size)) + calc(100% - .5 * fn.dim(--indicator-size)), + transparent 95%, + #fff + ); + } + } + + @include iro.bem-elem('content') { + display: block; + width: fn.dim(--size); + height: fn.dim(--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); + text-align: center; + } + + @include iro.bem-modifier('circle') { + @include iro.bem-elem('content') { + border-radius: 100%; + } + } + + @include iro.bem-modifier('placeholder') { + @include iro.bem-elem('content') { + background-color: hsl(0, 0%, fn.color(--l)); + } + } + + @include iro.bem-modifier('sm') { + font-size: iro.fn-px-to-rem(13px); + + @include iro.bem-elem('content') { + width: fn.dim(--size-sm); + height: fn.dim(--size-sm); + line-height: fn.dim(--size-sm); + } + } + + @include iro.bem-modifier('xs') { + font-size: iro.fn-px-to-rem(12px); + + @include iro.bem-elem('content') { + width: fn.dim(--size-xs); + height: fn.dim(--size-xs); + line-height: fn.dim(--size-xs); + } + } + } +} diff --git a/src/objects/_button.scss b/src/objects/_button.scss index 57c49e8..f158176 100644 --- a/src/objects/_button.scss +++ b/src/objects/_button.scss @@ -35,9 +35,9 @@ @include iro.props-namespace('button') { @include iro.props-store(( --dims: ( - --padding-x: 1.2rem, - --padding-y: .5rem, - --rounding: 10em, + --pad-x: 1.2rem, + --pad-y: .5rem, + --rounding: 10em, ), ), 'dims'); @@ -114,7 +114,7 @@ @include typography.set-font(vars.$font--main, (weight: 500)); display: inline-block; - padding: fn.dim(--padding-y) fn.dim(--padding-x); + padding: fn.dim(--pad-y) fn.dim(--pad-x); border: 2px solid transparent; border-radius: fn.dim(--rounding); line-height: 1; diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss index 377b002..3bda5e7 100644 --- a/src/objects/_checkbox.scss +++ b/src/objects/_checkbox.scss @@ -7,8 +7,8 @@ --size: iro.fn-px-to-rem(14px), --label-gap: .6rem, --border-width: fn.global-dim(--border-width --medium), - --padding-x: .3rem, - --padding-y: .3rem, + --pad-x: .3rem, + --pad-y: .3rem, --margin-right: fn.global-dim(--spacing --x --md), ), ), 'dims'); @@ -46,9 +46,9 @@ display: inline-flex; position: relative; align-items: flex-start; - margin-right: calc(-1 * fn.dim(--padding-x) + fn.dim(--margin-right)); - margin-left: calc(-1 * fn.dim(--padding-x)); - padding: fn.dim(--padding-y) fn.dim(--padding-x); + margin-right: calc(-1 * fn.dim(--pad-x) + fn.dim(--margin-right)); + margin-left: calc(-1 * fn.dim(--pad-x)); + padding: fn.dim(--pad-y) fn.dim(--pad-x); @include iro.bem-elem('box') { display: block; diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index 51bfcd8..26e8c31 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -7,8 +7,8 @@ --diameter: iro.fn-px-to-rem(15px), --label-gap: .6rem, --border-width: fn.global-dim(--border-width --medium), - --padding-x: .3rem, - --padding-y: .3rem, + --pad-x: .3rem, + --pad-y: .3rem, --margin-right: fn.global-dim(--spacing --x --md), ), ), 'dims'); @@ -46,9 +46,9 @@ display: inline-flex; position: relative; align-items: flex-start; - margin-right: calc(-1 * fn.dim(--padding-x) + fn.dim(--margin-right)); - margin-left: calc(-1 * fn.dim(--padding-x)); - padding: fn.dim(--padding-y) fn.dim(--padding-x); + margin-right: calc(-1 * fn.dim(--pad-x) + fn.dim(--margin-right)); + margin-left: calc(-1 * fn.dim(--pad-x)); + padding: fn.dim(--pad-y) fn.dim(--pad-x); @include iro.bem-elem('circle') { display: block; diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss new file mode 100644 index 0000000..18d6f81 --- /dev/null +++ b/src/objects/_status-indicator.scss @@ -0,0 +1,33 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('status-indicator') { + @include iro.props-store(( + --dims: ( + --size: iro.fn-px-to-rem(10px), + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --default: fn.global-color(--obj-lo), + --green: scale-color(hsl(113, 49.8%, 49.6%), $lightness: 15%), + --yellow: scale-color(hsl(50, 59.8%, 58.4%), $lightness: 15%), + --red: scale-color(hsl(352, 69.8%, 58.4%), $lightness: 15%), + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + display: inline-block; + width: fn.dim(--size); + height: fn.dim(--size); + border-radius: fn.dim(--size); + background-color: fn.color(--default); + + @each $color in 'green' 'yellow' 'red' { + @include iro.bem-is($color) { + background-color: fn.color(--#{$color}); + } + } + } +} diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss index 85aa782..2d70844 100644 --- a/src/objects/_switch.scss +++ b/src/objects/_switch.scss @@ -8,8 +8,8 @@ --height: iro.fn-px-to-rem(15px), --label-gap: .6rem, --border-width: fn.global-dim(--border-width --medium), - --padding-x: .3rem, - --padding-y: .3rem, + --pad-x: .3rem, + --pad-y: .3rem, --margin-right: fn.global-dim(--spacing --x --md), ), ), 'dims'); @@ -50,9 +50,9 @@ display: inline-flex; position: relative; align-items: flex-start; - margin-right: calc(-1 * fn.dim(--padding-x) + fn.dim(--margin-right)); - margin-left: calc(-1 * fn.dim(--padding-x)); - padding: fn.dim(--padding-y) fn.dim(--padding-x); + margin-right: calc(-1 * fn.dim(--pad-x) + fn.dim(--margin-right)); + margin-left: calc(-1 * fn.dim(--pad-x)); + padding: fn.dim(--pad-y) fn.dim(--pad-x); @include iro.bem-elem('indicator') { display: block; diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index ca0eb5b..90d4b11 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -34,8 +34,8 @@ @include iro.props-namespace('text-field') { @include iro.props-store(( --dims: ( - --padding-x: .6rem, - --padding-y: .5rem, + --pad-x: .6rem, + --pad-y: .5rem, --border-width: fn.global-dim(--border-width --thin), --border-radius: 2px, @@ -91,7 +91,7 @@ @include iro.bem-object(iro.props-namespace()) { position: relative; min-width: 0; - padding: fn.dim(--padding-y) fn.dim(--padding-x); + padding: fn.dim(--pad-y) fn.dim(--pad-x); background-color: fn.color(--bg); @include iro.bem-elem('bg') { @@ -176,7 +176,7 @@ @include iro.bem-elem('native') { box-sizing: border-box; - padding: fn.dim(--padding-y) fn.dim(--padding-x); + padding: fn.dim(--pad-y) fn.dim(--pad-x); } } -- cgit v1.2.3-70-g09d2