summaryrefslogtreecommitdiffstats
path: root/src/objects/_tabbar.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_tabbar.scss')
-rw-r--r--src/objects/_tabbar.scss110
1 files changed, 52 insertions, 58 deletions
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index 02519f9..d43208f 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -1,77 +1,75 @@
1@use "sass:map"; 1@use 'sass:map';
2@use "sass:meta"; 2@use 'sass:meta';
3@use "sass:string"; 3@use 'sass:string';
4@use "pkg:iro-sass/bem"; 4@use 'pkg:iro-sass/src/bem';
5@use "pkg:iro-sass/props"; 5@use 'pkg:iro-sass/src/props';
6@use "../props" as *; 6@use '../props' as *;
7 7
8@forward "tabbar.vars"; 8@forward 'tabbar.vars';
9@use "tabbar.vars" as vars; 9@use 'tabbar.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables("vars")); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object("tabbar") { 14 @include bem.object('tabbar') {
15 min-inline-size: 0; 15 min-inline-size: 0;
16 block-size: props.get(vars.$block-size); 16 block-size: props.get(vars.$block-size);
17 overflow: hidden; 17 overflow: hidden;
18 18
19 &::after { 19 &::after {
20 display: block; 20 display: block;
21 block-size: props.get(vars.$border--width); 21 block-size: props.get(vars.$border--width);
22 margin-block-start: calc(-1 * props.get(vars.$border--width)); 22 margin-block-start: calc(-1 * props.get(vars.$border--width));
23 content: ""; 23 content: '';
24 background-color: props.get(vars.$railing--bg-color); 24 background-color: props.get(vars.$railing--bg-color);
25 } 25 }
26 26
27 @include bem.elem("tabs") { 27 @include bem.elem('tabs') {
28 display: flex; 28 display: flex;
29 block-size: 100%; 29 block-size: 100%;
30 overflow-inline: auto; 30 overflow-inline: auto;
31 } 31 }
32 32
33 @include bem.modifier("quiet") { 33 @include bem.modifier('quiet') {
34 box-shadow: none; 34 box-shadow: none;
35 } 35 }
36 36
37 @include bem.modifier("adapt") { 37 @include bem.modifier('adapt') {
38 block-size: 100%; 38 block-size: 100%;
39 } 39 }
40 40
41 @include bem.modifier("snap") { 41 @include bem.modifier('snap') {
42 scroll-snap-align: start; 42 scroll-snap-align: start;
43 } 43 }
44 44
45 @include bem.elem("tab") { 45 @include bem.elem('tab') {
46 position: relative; 46 position: relative;
47 display: flex; 47 display: flex;
48 align-items: center; 48 align-items: center;
49 padding-inline: calc(0.5 * props.get(vars.$spacing)); 49 padding-inline: calc(.5 * props.get(vars.$spacing));
50 margin-inline: calc(-0.5 * props.get(vars.$spacing)); 50 margin-inline: calc(-.5 * props.get(vars.$spacing));
51 color: props.get(vars.$tab--text-color); 51 color: props.get(vars.$tab--text-color);
52 white-space: nowrap; 52 white-space: nowrap;
53 53
54 &::before { 54 &::before {
55 position: absolute; 55 position: absolute;
56 inset-block-start: 50%; 56 inset-block-start: 50%;
57 inset-inline: calc( 57 inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
58 -1 * props.get(vars.$tab--pad-i) + 0.5 * props.get(vars.$spacing) 58 z-index: -10;
59 ); 59 block-size: 1.5em;
60 z-index: -10; 60 content: '';
61 block-size: 1.5em; 61 border-radius: props.get(vars.$rounding);
62 content: ""; 62 transform: translateY(-50%);
63 border-radius: props.get(vars.$rounding);
64 transform: translateY(-50%);
65 } 63 }
66 64
67 &::after { 65 &::after {
68 position: absolute; 66 position: absolute;
69 inset-block-end: 0; 67 inset-block-end: 0;
70 inset-inline: calc(0.5 * props.get(vars.$spacing)); 68 inset-inline: calc(.5 * props.get(vars.$spacing));
71 z-index: 10; 69 z-index: 10;
72 display: none; 70 display: none;
73 block-size: props.get(vars.$indicator--width); 71 block-size: props.get(vars.$indicator--width);
74 content: ""; 72 content: '';
75 background-color: props.get(vars.$tab--selected--text-color); 73 background-color: props.get(vars.$tab--selected--text-color);
76 } 74 }
77 75
@@ -85,25 +83,21 @@
85 83
86 &:focus-visible { 84 &:focus-visible {
87 &::before { 85 &::before {
88 color: props.get(vars.$key-focus--text-color); 86 color: props.get(vars.$key-focus--text-color);
89 text-decoration: none; 87 text-decoration: none;
90 outline: props.get(vars.$key-focus--border-color) solid 88 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
91 props.get(vars.$key-focus--border-width);
92 box-shadow: 0 0 0 89 box-shadow: 0 0 0
93 calc( 90 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
94 props.get(vars.$key-focus--border-width) +
95 props.get(vars.$key-focus--outline-width)
96 )
97 props.get(vars.$key-focus--outline-color); 91 props.get(vars.$key-focus--outline-color);
98 } 92 }
99 } 93 }
100 } 94 }
101 95
102 @include bem.next-twin-elem { 96 @include bem.next-twin-elem {
103 margin-inline-start: calc(0.5 * props.get(vars.$spacing)); 97 margin-inline-start: calc(.5 * props.get(vars.$spacing));
104 } 98 }
105 99
106 @include bem.is("selected") { 100 @include bem.is('selected') {
107 color: props.get(vars.$tab--selected--text-color); 101 color: props.get(vars.$tab--selected--text-color);
108 102
109 &::after { 103 &::after {
@@ -112,13 +106,13 @@
112 } 106 }
113 } 107 }
114 108
115 @include bem.modifier("accent") { 109 @include bem.modifier('accent') {
116 @include bem.elem("tab") { 110 @include bem.elem('tab') {
117 &::after { 111 &::after {
118 background-color: props.get(vars.$tab--accent--text-color); 112 background-color: props.get(vars.$tab--accent--text-color);
119 } 113 }
120 114
121 @include bem.is("selected") { 115 @include bem.is('selected') {
122 color: props.get(vars.$tab--accent--text-color); 116 color: props.get(vars.$tab--accent--text-color);
123 } 117 }
124 } 118 }
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 18:36:56 +0000