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 | } | ||