summaryrefslogtreecommitdiffstats
path: root/src/objects/_divider.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_divider.scss')
-rw-r--r--src/objects/_divider.scss318
1 files changed, 159 insertions, 159 deletions
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 9b58e77..27af173 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -10,195 +10,195 @@
10@use 'divider.vars' as vars; 10@use 'divider.vars' as vars;
11 11
12@mixin styles { 12@mixin styles {
13 @include materialize-at-root(meta.module-variables('vars')); 13 @include materialize-at-root(meta.module-variables('vars'));
14 14
15 @include bem.object('divider') { 15 @include bem.object('divider') {
16 display: flex; 16 display: flex;
17 flex: 0 0 auto; 17 flex: 0 0 auto;
18 flex-direction: row; 18 flex-direction: row;
19 align-items: center; 19 align-items: center;
20 block-size: 1em; 20 block-size: 1em;
21 margin-block: props.get(vars.$margin-b); 21 margin-block: props.get(vars.$margin-b);
22 font-size: props.get(vars.$strong--label-font-size); 22 font-size: props.get(vars.$strong--label-font-size);
23 font-weight: 700; 23 font-weight: 700;
24 line-height: 1; 24 line-height: 1;
25 color: props.get(vars.$strong--label-color); 25 color: props.get(vars.$strong--label-color);
26 text-transform: uppercase; 26 text-transform: uppercase;
27 letter-spacing: .5px; 27 letter-spacing: .5px;
28 background-color: transparent; 28 background-color: transparent;
29 29
30 &::before, 30 &::before,
31 &::after { 31 &::after {
32 flex: 1 1 auto; 32 flex: 1 1 auto;
33 inline-size: 100%; 33 inline-size: 100%;
34 block-size: props.get(vars.$strong--border-width); 34 block-size: props.get(vars.$strong--border-width);
35 content: ''; 35 content: '';
36 background-color: props.get(vars.$strong--bg-color); 36 background-color: props.get(vars.$strong--bg-color);
37 } 37 }
38 38
39 &::before { 39 &::before {
40 display: block; 40 display: block;
41 } 41 }
42 42
43 @include bem.elem('label') { 43 @include bem.elem('label') {
44 flex: 0 0 auto; 44 flex: 0 0 auto;
45 } 45 }
46 46
47 @include bem.modifier('vertical') { 47 @include bem.modifier('vertical') {
48 align-self: stretch; 48 align-self: stretch;
49 inline-size: props.get(vars.$vertical--border-width); 49 inline-size: props.get(vars.$vertical--border-width);
50 block-size: auto; 50 block-size: auto;
51 margin-block: 0; 51 margin-block: 0;
52 background-color: props.get(vars.$strong--bg-color); 52 background-color: props.get(vars.$strong--bg-color);
53 53
54 &::before, 54 &::before,
55 &::after { 55 &::after {
56 display: none; 56 display: none;
57 } 57 }
58 } 58 }
59 59
60 @include bem.modifier('dot') { 60 @include bem.modifier('dot') {
61 align-self: center; 61 align-self: center;
62 inline-size: props.get(vars.$dot--size); 62 inline-size: props.get(vars.$dot--size);
63 block-size: props.get(vars.$dot--size); 63 block-size: props.get(vars.$dot--size);
64 margin-block: 0; 64 margin-block: 0;
65 background-color: props.get(vars.$strong--bg-color); 65 background-color: props.get(vars.$strong--bg-color);
66 border-radius: props.get(vars.$dot--size); 66 border-radius: props.get(vars.$dot--size);
67 67
68 &::before, 68 &::before,
69 &::after { 69 &::after {
70 display: none; 70 display: none;
71 } 71 }
72 } 72 }
73 73
74 @include bem.modifier('medium') { 74 @include bem.modifier('medium') {
75 font-size: props.get(vars.$medium--label-font-size); 75 font-size: props.get(vars.$medium--label-font-size);
76 font-weight: 500; 76 font-weight: 500;
77 color: props.get(vars.$medium--label-color); 77 color: props.get(vars.$medium--label-color);
78 78
79 &::before, 79 &::before,
80 &::after { 80 &::after {
81 block-size: props.get(vars.$medium--border-width); 81 block-size: props.get(vars.$medium--border-width);
82 background-color: props.get(vars.$medium--bg-color); 82 background-color: props.get(vars.$medium--bg-color);
83 } 83 }
84 84
85 @include bem.modifier('vertical') { 85 @include bem.modifier('vertical') {
86 background-color: props.get(vars.$medium--bg-color); 86 background-color: props.get(vars.$medium--bg-color);
87 } 87 }
88 88
89 @include bem.modifier('dot') { 89 @include bem.modifier('dot') {
90 background-color: props.get(vars.$medium--bg-color); 90 background-color: props.get(vars.$medium--bg-color);
91 } 91 }
92 } 92 }
93 93
94 @include bem.modifier('quiet') { 94 @include bem.modifier('quiet') {
95 font-size: props.get(vars.$quiet--label-font-size); 95 font-size: props.get(vars.$quiet--label-font-size);
96 font-weight: 500; 96 font-weight: 500;
97 color: props.get(vars.$quiet--label-color); 97 color: props.get(vars.$quiet--label-color);
98 98
99 &::before, 99 &::before,
100 &::after { 100 &::after {
101 block-size: props.get(vars.$quiet--border-width); 101 block-size: props.get(vars.$quiet--border-width);
102 background-color: props.get(vars.$quiet--bg-color); 102 background-color: props.get(vars.$quiet--bg-color);
103 } 103 }
104 104
105 @include bem.modifier('vertical') { 105 @include bem.modifier('vertical') {
106 background-color: props.get(vars.$vertical--quiet--bg-color); 106 background-color: props.get(vars.$vertical--quiet--bg-color);
107 } 107 }
108 108
109 @include bem.modifier('dot') { 109 @include bem.modifier('dot') {
110 background-color: props.get(vars.$dot--quiet--bg-color); 110 background-color: props.get(vars.$dot--quiet--bg-color);
111 } 111 }
112 } 112 }
113 113
114 @include bem.modifier('faint') { 114 @include bem.modifier('faint') {
115 font-size: props.get(vars.$faint--label-font-size); 115 font-size: props.get(vars.$faint--label-font-size);
116 font-weight: 500; 116 font-weight: 500;
117 color: props.get(vars.$faint--label-color); 117 color: props.get(vars.$faint--label-color);
118 118
119 &::before, 119 &::before,
120 &::after { 120 &::after {
121 block-size: props.get(vars.$faint--border-width); 121 block-size: props.get(vars.$faint--border-width);
122 background-color: props.get(vars.$faint--bg-color); 122 background-color: props.get(vars.$faint--bg-color);
123 } 123 }
124 124
125 @include bem.modifier('vertical') { 125 @include bem.modifier('vertical') {
126 background-color: props.get(vars.$vertical--quiet--bg-color); 126 background-color: props.get(vars.$vertical--quiet--bg-color);
127 } 127 }
128 128
129 @include bem.modifier('dot') { 129 @include bem.modifier('dot') {
130 background-color: props.get(vars.$dot--quiet--bg-color); 130 background-color: props.get(vars.$dot--quiet--bg-color);
131 } 131 }
132 } 132 }
133 133
134 @include bem.modifier('labelled') { 134 @include bem.modifier('labelled') {
135 &::before { 135 &::before {
136 margin-inline-end: 1em; 136 margin-inline-end: 1em;
137 } 137 }
138 138
139 &::after { 139 &::after {
140 display: block; 140 display: block;
141 margin-inline-start: 1em; 141 margin-inline-start: 1em;
142 } 142 }
143 } 143 }
144 144
145 @each $theme in map.keys(props.get(vars.$themes)) { 145 @each $theme in map.keys(props.get(vars.$themes)) {
146 @include bem.modifier(string.slice($theme, 3)) { 146 @include bem.modifier(string.slice($theme, 3)) {
147 &::before, 147 &::before,
148 &::after { 148 &::after {
149 background-color: props.get(vars.$themes, $theme, --bg); 149 background-color: props.get(vars.$themes, $theme, --bg);
150 } 150 }
151 151
152 @include bem.elem('label') { 152 @include bem.elem('label') {
153 color: props.get(vars.$themes, $theme, --label); 153 color: props.get(vars.$themes, $theme, --label);
154 } 154 }
155 } 155 }
156 } 156 }
157 157
158 @each $theme in map.keys(props.get(vars.$static-themes)) { 158 @each $theme in map.keys(props.get(vars.$static-themes)) {
159 @include bem.modifier(string.slice($theme, 3)) { 159 @include bem.modifier(string.slice($theme, 3)) {
160 &::before, 160 &::before,
161 &::after { 161 &::after {
162 background-color: props.get(vars.$static-themes, $theme, --strong, --bg); 162 background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
163 } 163 }
164 164
165 @include bem.elem('label') { 165 @include bem.elem('label') {
166 color: props.get(vars.$static-themes, $theme, --strong, --label); 166 color: props.get(vars.$static-themes, $theme, --strong, --label);
167 } 167 }
168 168
169 @include bem.modifier('medium') { 169 @include bem.modifier('medium') {
170 &::before, 170 &::before,
171 &::after { 171 &::after {
172 background-color: props.get(vars.$static-themes, $theme, --medium, --bg); 172 background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
173 } 173 }
174 174
175 @include bem.elem('label') { 175 @include bem.elem('label') {
176 color: props.get(vars.$static-themes, $theme, --medium, --label); 176 color: props.get(vars.$static-themes, $theme, --medium, --label);
177 } 177 }
178 } 178 }
179 179
180 @include bem.modifier('quiet') { 180 @include bem.modifier('quiet') {
181 &::before, 181 &::before,
182 &::after { 182 &::after {
183 background-color: props.get(vars.$static-themes, $theme, --quiet, --bg); 183 background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);
184 } 184 }
185 185
186 @include bem.elem('label') { 186 @include bem.elem('label') {
187 color: props.get(vars.$static-themes, $theme, --quiet, --label); 187 color: props.get(vars.$static-themes, $theme, --quiet, --label);
188 } 188 }
189 } 189 }
190 190
191 @include bem.modifier('faint') { 191 @include bem.modifier('faint') {
192 &::before, 192 &::before,
193 &::after { 193 &::after {
194 background-color: props.get(vars.$static-themes, $theme, --faint, --bg); 194 background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
195 } 195 }
196 196
197 @include bem.elem('label') { 197 @include bem.elem('label') {
198 color: props.get(vars.$static-themes, $theme, --faint, --label); 198 color: props.get(vars.$static-themes, $theme, --faint, --label);
199 } 199 }
200 } 200 }
201 } 201 }
202 } 202 }
203 } 203 }
204} 204}
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 08:26:10 +0000