summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-24 09:05:39 +0200
committerVolpeon <git@volpeon.ink>2024-10-24 09:05:39 +0200
commit0d8ff84a82e93348a97ffc550094d2e9b47f4943 (patch)
tree804328041d0652ba240aceb37eb651a225d7b870 /src
parentBorder suffix (diff)
downloadiro-design-0d8ff84a82e93348a97ffc550094d2e9b47f4943.tar.gz
iro-design-0d8ff84a82e93348a97ffc550094d2e9b47f4943.tar.bz2
iro-design-0d8ff84a82e93348a97ffc550094d2e9b47f4943.zip
Improved vertical divider
Diffstat (limited to 'src')
-rw-r--r--src/_utils.scss42
-rw-r--r--src/objects/_divider.scss4
-rw-r--r--src/objects/_divider.vars.scss2
3 files changed, 6 insertions, 42 deletions
diff --git a/src/_utils.scss b/src/_utils.scss
index 844ff90..cdb2a32 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -230,20 +230,6 @@ $-sizes: (
230 border#{$suffix}: 0; 230 border#{$suffix}: 0;
231 } 231 }
232 } 232 }
233
234 @each $breakpoint in map.keys(media.$breakpoints) {
235 @include media.media('<=#{$breakpoint}') {
236 @include bem.suffix('#{$breakpoint}-lo') {
237 border#{$suffix}: 0;
238 }
239 }
240
241 @include media.media('>#{$breakpoint}') {
242 @include bem.suffix('#{$breakpoint}-hi') {
243 border#{$suffix}: 0;
244 }
245 }
246 }
247 } 233 }
248 234
249 @include bem.utility('b#{$dir}-1') { 235 @include bem.utility('b#{$dir}-1') {
@@ -260,20 +246,6 @@ $-sizes: (
260 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); 246 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
261 } 247 }
262 } 248 }
263
264 @each $breakpoint in map.keys(media.$breakpoints) {
265 @include media.media('<=#{$breakpoint}') {
266 @include bem.suffix('#{$breakpoint}-lo') {
267 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
268 }
269 }
270
271 @include media.media('>#{$breakpoint}') {
272 @include bem.suffix('#{$breakpoint}-hi') {
273 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
274 }
275 }
276 }
277 } 249 }
278 250
279 @include bem.utility('b#{$dir}-1-mute') { 251 @include bem.utility('b#{$dir}-1-mute') {
@@ -290,20 +262,6 @@ $-sizes: (
290 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); 262 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
291 } 263 }
292 } 264 }
293
294 @each $breakpoint in map.keys(media.$breakpoints) {
295 @include media.media('<=#{$breakpoint}') {
296 @include bem.suffix('#{$breakpoint}-lo') {
297 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
298 }
299 }
300
301 @include media.media('>#{$breakpoint}') {
302 @include bem.suffix('#{$breakpoint}-hi') {
303 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
304 }
305 }
306 }
307 } 265 }
308 } 266 }
309 267
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 7741922..b746551 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -78,6 +78,10 @@
78 block-size: props.get(vars.$faint--border-width); 78 block-size: props.get(vars.$faint--border-width);
79 background-color: props.get(vars.$faint--bg-color); 79 background-color: props.get(vars.$faint--bg-color);
80 } 80 }
81
82 @include bem.modifier('vertical') {
83 background-color: props.get(vars.$vertical--faint--bg-color);
84 }
81 } 85 }
82 86
83 @include bem.modifier('labelled') { 87 @include bem.modifier('labelled') {
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 66656cd..7d50798 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -23,6 +23,8 @@ $medium--label-color: props.def(--o-divider--medium--label-color, props.get(core
23$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border)) !default; 23$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border)) !default;
24$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more)) !default; 24$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more)) !default;
25 25
26$vertical--faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute)) !default;
27
26$static-themes: props.def(--o-divider); 28$static-themes: props.def(--o-divider);
27 29
28@each $theme in map.keys(props.get(core.$transparent-colors)) { 30@each $theme in map.keys(props.get(core.$transparent-colors)) {