diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/_declare-vars.scss | 6 | ||||
| -rw-r--r-- | src/_objects.scss | 1 | ||||
| -rw-r--r-- | src/objects/_alert.scss | 48 |
3 files changed, 53 insertions, 2 deletions
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 @@ | |||
| 120 | --purple: fn.color-palette(blend.lch(48% 50 308)), | 120 | --purple: fn.color-palette(blend.lch(48% 50 308)), |
| 121 | --red: fn.color-palette(blend.lch(48% 50 23)), | 121 | --red: fn.color-palette(blend.lch(48% 50 23)), |
| 122 | --green: fn.color-palette(blend.lch(63% 50 147)), | 122 | --green: fn.color-palette(blend.lch(63% 50 147)), |
| 123 | --yellow: fn.color-palette(blend.lch(73% 50 80)), | 123 | --yellow: fn.color-palette(blend.lch(68% 50 70)), |
| 124 | 124 | ||
| 125 | --accent: ( | 125 | --accent: ( |
| 126 | --primary: iro.props-ref('colors', --colors --blue), | 126 | --primary: iro.props-ref('colors', --colors --blue), |
| 127 | --error: iro.props-ref('colors', --colors --red), | 127 | --error: iro.props-ref('colors', --colors --red), |
| 128 | --success: iro.props-ref('colors', --colors --green), | 128 | --success: iro.props-ref('colors', --colors --green), |
| 129 | --warning: iro.props-ref('colors', --colors --yellow), | ||
| 129 | --link-idle: iro.props-ref('colors', --colors --blue), | 130 | --link-idle: iro.props-ref('colors', --colors --blue), |
| 130 | --link-visited: iro.props-ref('colors', --colors --purple), | 131 | --link-visited: iro.props-ref('colors', --colors --purple), |
| 131 | ), | 132 | ), |
| @@ -165,12 +166,13 @@ | |||
| 165 | --purple: fn.color-palette(blend.lch(63% 50 308), -1), | 166 | --purple: fn.color-palette(blend.lch(63% 50 308), -1), |
| 166 | --red: fn.color-palette(blend.lch(63% 50 23), -1), | 167 | --red: fn.color-palette(blend.lch(63% 50 23), -1), |
| 167 | --green: fn.color-palette(blend.lch(78% 50 147), -1), | 168 | --green: fn.color-palette(blend.lch(78% 50 147), -1), |
| 168 | --yellow: fn.color-palette(blend.lch(88% 50 80), -1), | 169 | --yellow: fn.color-palette(blend.lch(88% 50 70), -1), |
| 169 | 170 | ||
| 170 | --accent: ( | 171 | --accent: ( |
| 171 | --primary: iro.props-ref('colors-dark', --colors --blue), | 172 | --primary: iro.props-ref('colors-dark', --colors --blue), |
| 172 | --error: iro.props-ref('colors-dark', --colors --red), | 173 | --error: iro.props-ref('colors-dark', --colors --red), |
| 173 | --success: iro.props-ref('colors-dark', --colors --green), | 174 | --success: iro.props-ref('colors-dark', --colors --green), |
| 175 | --warning: iro.props-ref('colors-dark', --colors --yellow), | ||
| 174 | --link-idle: iro.props-ref('colors-dark', --colors --blue), | 176 | --link-idle: iro.props-ref('colors-dark', --colors --blue), |
| 175 | --link-visited: iro.props-ref('colors-dark', --colors --purple), | 177 | --link-visited: iro.props-ref('colors-dark', --colors --purple), |
| 176 | ), | 178 | ), |
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 @@ | |||
| 18 | @use 'objects/lightbox'; | 18 | @use 'objects/lightbox'; |
| 19 | @use 'objects/list-group'; | 19 | @use 'objects/list-group'; |
| 20 | @use 'objects/table'; | 20 | @use 'objects/table'; |
| 21 | @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 @@ | |||
| 1 | @use 'iro-sass/src/index' as iro; | ||
| 2 | @use '../functions' as fn; | ||
| 3 | |||
| 4 | @include iro.props-namespace('alert') { | ||
| 5 | @include iro.props-store(( | ||
| 6 | --dims: ( | ||
| 7 | --border-width: 2px, | ||
| 8 | --pad-x: fn.global-dim(--size --250), | ||
| 9 | --pad-y: fn.global-dim(--size --250), | ||
| 10 | --rounding: 4px, | ||
| 11 | ), | ||
| 12 | ), 'dims'); | ||
| 13 | |||
| 14 | @include iro.props-store(( | ||
| 15 | --colors: ( | ||
| 16 | --bg: fn.global-color(--bg-hi2), | ||
| 17 | --border: fn.global-color(--fg-hi2), | ||
| 18 | --border-primary: fn.global-color(--accent --primary --bg-hi), | ||
| 19 | --border-error: fn.global-color(--accent --error --bg-hi), | ||
| 20 | --border-success: fn.global-color(--accent --success --bg-hi), | ||
| 21 | --border-warning: fn.global-color(--accent --warning --bg-hi), | ||
| 22 | ), | ||
| 23 | ), 'colors'); | ||
| 24 | |||
| 25 | @include iro.bem-object(iro.props-namespace()) { | ||
| 26 | padding: fn.dim(--pad-y) fn.dim(--pad-x); | ||
| 27 | border: fn.dim(--border-width) solid fn.color(--border); | ||
| 28 | border-radius: fn.dim(--rounding); | ||
| 29 | background-color: fn.color(--bg); | ||
| 30 | color: fn.global-color(--fg); | ||
| 31 | |||
| 32 | @include iro.bem-modifier('primary') { | ||
| 33 | border-color: fn.color(--border-primary); | ||
| 34 | } | ||
| 35 | |||
| 36 | @include iro.bem-modifier('error') { | ||
| 37 | border-color: fn.color(--border-error); | ||
| 38 | } | ||
| 39 | |||
| 40 | @include iro.bem-modifier('success') { | ||
| 41 | border-color: fn.color(--border-success); | ||
| 42 | } | ||
| 43 | |||
| 44 | @include iro.bem-modifier('warning') { | ||
| 45 | border-color: fn.color(--border-warning); | ||
| 46 | } | ||
| 47 | } | ||
| 48 | } | ||
