From 210349f2a28fb37b8cafac980e3f5fac894cc7f9 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 16 Mar 2022 19:00:21 +0100 Subject: Added alert --- src/_declare-vars.scss | 6 ++++-- src/_objects.scss | 1 + src/objects/_alert.scss | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 src/objects/_alert.scss (limited to 'src') diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index 2d7d723..998608a 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -120,12 +120,13 @@ --purple: fn.color-palette(blend.lch(48% 50 308)), --red: fn.color-palette(blend.lch(48% 50 23)), --green: fn.color-palette(blend.lch(63% 50 147)), - --yellow: fn.color-palette(blend.lch(73% 50 80)), + --yellow: fn.color-palette(blend.lch(68% 50 70)), --accent: ( --primary: iro.props-ref('colors', --colors --blue), --error: iro.props-ref('colors', --colors --red), --success: iro.props-ref('colors', --colors --green), + --warning: iro.props-ref('colors', --colors --yellow), --link-idle: iro.props-ref('colors', --colors --blue), --link-visited: iro.props-ref('colors', --colors --purple), ), @@ -165,12 +166,13 @@ --purple: fn.color-palette(blend.lch(63% 50 308), -1), --red: fn.color-palette(blend.lch(63% 50 23), -1), --green: fn.color-palette(blend.lch(78% 50 147), -1), - --yellow: fn.color-palette(blend.lch(88% 50 80), -1), + --yellow: fn.color-palette(blend.lch(88% 50 70), -1), --accent: ( --primary: iro.props-ref('colors-dark', --colors --blue), --error: iro.props-ref('colors-dark', --colors --red), --success: iro.props-ref('colors-dark', --colors --green), + --warning: iro.props-ref('colors-dark', --colors --yellow), --link-idle: iro.props-ref('colors-dark', --colors --blue), --link-visited: iro.props-ref('colors-dark', --colors --purple), ), diff --git a/src/_objects.scss b/src/_objects.scss index 7f77968..070e281 100644 --- a/src/_objects.scss +++ b/src/_objects.scss @@ -18,3 +18,4 @@ @use 'objects/lightbox'; @use 'objects/list-group'; @use 'objects/table'; +@use 'objects/alert'; diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss new file mode 100644 index 0000000..0bb8485 --- /dev/null +++ b/src/objects/_alert.scss @@ -0,0 +1,48 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('alert') { + @include iro.props-store(( + --dims: ( + --border-width: 2px, + --pad-x: fn.global-dim(--size --250), + --pad-y: fn.global-dim(--size --250), + --rounding: 4px, + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --bg: fn.global-color(--bg-hi2), + --border: fn.global-color(--fg-hi2), + --border-primary: fn.global-color(--accent --primary --bg-hi), + --border-error: fn.global-color(--accent --error --bg-hi), + --border-success: fn.global-color(--accent --success --bg-hi), + --border-warning: fn.global-color(--accent --warning --bg-hi), + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + padding: fn.dim(--pad-y) fn.dim(--pad-x); + border: fn.dim(--border-width) solid fn.color(--border); + border-radius: fn.dim(--rounding); + background-color: fn.color(--bg); + color: fn.global-color(--fg); + + @include iro.bem-modifier('primary') { + border-color: fn.color(--border-primary); + } + + @include iro.bem-modifier('error') { + border-color: fn.color(--border-error); + } + + @include iro.bem-modifier('success') { + border-color: fn.color(--border-success); + } + + @include iro.bem-modifier('warning') { + border-color: fn.color(--border-warning); + } + } +} -- cgit v1.2.3-70-g09d2