diff options
Diffstat (limited to 'src/objects/_badge.scss')
-rw-r--r-- | src/objects/_badge.scss | 144 |
1 files changed, 0 insertions, 144 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss deleted file mode 100644 index 9f3e307..0000000 --- a/src/objects/_badge.scss +++ /dev/null | |||
@@ -1,144 +0,0 @@ | |||
1 | @use 'sass:list'; | ||
2 | @use 'sass:map'; | ||
3 | @use 'sass:meta'; | ||
4 | @use 'sass:string'; | ||
5 | @use 'iro-sass/src/bem'; | ||
6 | @use 'iro-sass/src/props'; | ||
7 | @use '../props' as *; | ||
8 | @use '../core.vars' as core; | ||
9 | |||
10 | @forward 'badge.vars'; | ||
11 | @use 'badge.vars' as vars; | ||
12 | |||
13 | @mixin -apply-theme($theme, $key: (), $static: false) { | ||
14 | color: props.get($theme, list.join($key, --label)...); | ||
15 | background-color: props.get($theme, list.join($key, --bg)...); | ||
16 | |||
17 | &:link, | ||
18 | &:visited, | ||
19 | &:enabled { | ||
20 | &:hover, | ||
21 | &:focus-visible { | ||
22 | color: props.get($theme, list.join($key, --hover --label)...); | ||
23 | background-color: props.get($theme, list.join($key, --hover --bg)...); | ||
24 | } | ||
25 | |||
26 | &:active { | ||
27 | color: props.get($theme, list.join($key, --active --label)...); | ||
28 | background-color: props.get($theme, list.join($key, --active --bg)...); | ||
29 | } | ||
30 | } | ||
31 | |||
32 | @include bem.modifier('quiet') { | ||
33 | color: props.get($theme, list.join($key, --quiet --label)...); | ||
34 | background-color: props.get($theme, list.join($key, --quiet --bg)...); | ||
35 | |||
36 | &:link, | ||
37 | &:visited, | ||
38 | &:enabled { | ||
39 | &:hover, | ||
40 | &:focus-visible { | ||
41 | color: props.get($theme, list.join($key, --quiet --hover --label)...); | ||
42 | background-color: props.get($theme, list.join($key, --quiet --hover --bg)...); | ||
43 | } | ||
44 | |||
45 | &:active { | ||
46 | color: props.get($theme, list.join($key, --quiet --active --label)...); | ||
47 | background-color: props.get($theme, list.join($key, --quiet --active --bg)...); | ||
48 | } | ||
49 | } | ||
50 | } | ||
51 | |||
52 | @if $static { | ||
53 | &::after { | ||
54 | outline-color: props.get($theme, list.join($key, --key-focus --border)...); | ||
55 | box-shadow: | ||
56 | 0 | ||
57 | 0 | ||
58 | 0 | ||
59 | calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) | ||
60 | props.get($theme, list.join($key, --key-focus --outline)...); | ||
61 | } | ||
62 | } | ||
63 | } | ||
64 | |||
65 | @mixin styles { | ||
66 | @include materialize-at-root(meta.module-variables('vars')); | ||
67 | |||
68 | @include bem.object('badge') { | ||
69 | position: relative; | ||
70 | display: inline-block; | ||
71 | padding-block: props.get(vars.$pad-b); | ||
72 | padding-inline: props.get(vars.$pad-i); | ||
73 | font-size: props.get(vars.$font-size); | ||
74 | line-height: props.get(core.$font--standard--line-height); | ||
75 | text-align: center; | ||
76 | text-decoration: none; | ||
77 | background-clip: padding-box; | ||
78 | border-radius: props.get(vars.$rounding); | ||
79 | |||
80 | &::after { | ||
81 | position: absolute; | ||
82 | inset: calc(-1 * props.get(vars.$key-focus--border-offset)); | ||
83 | z-index: 1; | ||
84 | display: none; | ||
85 | pointer-events: none; | ||
86 | content: ''; | ||
87 | border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); | ||
88 | outline: transparent solid props.get(vars.$key-focus--border-width); | ||
89 | } | ||
90 | |||
91 | &:link, | ||
92 | &:visited, | ||
93 | &:enabled { | ||
94 | &:focus-visible { | ||
95 | &::after { | ||
96 | display: block; | ||
97 | } | ||
98 | } | ||
99 | } | ||
100 | |||
101 | @include bem.elem('label') { | ||
102 | margin-inline: props.get(vars.$pad-i-label); | ||
103 | } | ||
104 | |||
105 | @include -apply-theme(vars.$default-theme, $static: true); | ||
106 | |||
107 | @each $theme in map.keys(props.get(vars.$themes)) { | ||
108 | @include bem.modifier(string.slice($theme, 3)) { | ||
109 | @include -apply-theme(vars.$themes, $theme); | ||
110 | } | ||
111 | } | ||
112 | |||
113 | @each $theme in map.keys(props.get(vars.$static-themes)) { | ||
114 | @include bem.modifier(string.slice($theme, 3)) { | ||
115 | @include -apply-theme(vars.$static-themes, $theme, true); | ||
116 | } | ||
117 | } | ||
118 | |||
119 | @include bem.modifier('pill') { | ||
120 | padding-inline: props.get(vars.$pad-i-pill); | ||
121 | border-radius: 10em; | ||
122 | |||
123 | &::after { | ||
124 | border-radius: 10em; | ||
125 | } | ||
126 | } | ||
127 | |||
128 | @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes { | ||
129 | @include bem.modifier($mod) { | ||
130 | padding-block: props.get($pad-b); | ||
131 | padding-inline: props.get($pad-i); | ||
132 | font-size: props.get($font-size); | ||
133 | |||
134 | @include bem.elem('label') { | ||
135 | margin-inline: props.get($pad-i-label); | ||
136 | } | ||
137 | |||
138 | @include bem.modifier('pill') { | ||
139 | padding-inline: props.get($pad-i-pill); | ||
140 | } | ||
141 | } | ||
142 | } | ||
143 | } | ||
144 | } | ||