summaryrefslogtreecommitdiffstats
path: root/src/objects/_badge.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_badge.scss')
-rw-r--r--src/objects/_badge.scss144
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}