summaryrefslogtreecommitdiffstats
path: root/src/objects/_alert.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_alert.scss')
-rw-r--r--src/objects/_alert.scss49
1 files changed, 21 insertions, 28 deletions
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index c2a1c58..3aeb781 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -1,44 +1,37 @@
1@use 'sass:map'; 1@use "sass:map";
2@use 'sass:meta'; 2@use "sass:meta";
3@use 'pkg:iro-sass/src/bem'; 3@use "pkg:iro-sass/bem";
4@use 'pkg:iro-sass/src/props'; 4@use "pkg:iro-sass/props";
5@use '../props' as *; 5@use "../props" as *;
6 6
7@forward 'alert.vars'; 7@forward "alert.vars";
8@use 'alert.vars' as vars; 8@use "alert.vars" as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables("vars"));
12 12
13 @include bem.object('alert') { 13 @include bem.object("alert") {
14 padding-block: props.get(vars.$pad-b); 14 padding-block: props.get(vars.$pad-b);
15 padding-inline: props.get(vars.$pad-i); 15 padding-inline: props.get(vars.$pad-i);
16 background-color: props.get(vars.$bg-color); 16 background-color: props.get(vars.$bg-color);
17 border: props.get(vars.$border-width) solid transparent; 17 border: props.get(vars.$border-width) solid transparent;
18 border-color: props.get(vars.$border-color); 18 border-color: props.get(vars.$border-color);
19 border-radius: props.get(vars.$rounding); 19 border-radius: props.get(vars.$rounding);
20 box-shadow: 20 box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur)
21 props.get(vars.$shadow-x) 21 props.get(vars.$shadow-grow) props.get(vars.$shadow-color);
22 props.get(vars.$shadow-y)
23 props.get(vars.$shadow-blur)
24 props.get(vars.$shadow-grow)
25 props.get(vars.$shadow-color);
26 22
27 &::before { 23 &::before {
28 display: block; 24 display: block;
29 margin-block: -100em 100em; 25 margin-block: -100em 100em;
30 content: ''; 26 content: "";
31 } 27 }
32 28
33 @each $mod, $theme in vars.$themes-config { 29 @each $mod, $theme in vars.$themes-config {
34 @include bem.modifier($mod) { 30 @include bem.modifier($mod) {
35 background-color: props.get(vars.$themes, $theme, --bg-color); 31 background-color: props.get(vars.$themes, $theme, --bg-color);
36 border-color: props.get(vars.$themes, $theme, --border-color); 32 border-color: props.get(vars.$themes, $theme, --border-color);
37 box-shadow: 33 box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y)
38 props.get(vars.$shadow-x) 34 props.get(vars.$shadow-blur) props.get(vars.$shadow-grow)
39 props.get(vars.$shadow-y)
40 props.get(vars.$shadow-blur)
41 props.get(vars.$shadow-grow)
42 props.get(vars.$themes, $theme, --shadow-color); 35 props.get(vars.$themes, $theme, --shadow-color);
43 } 36 }
44 } 37 }