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.scss167
1 files changed, 99 insertions, 68 deletions
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index 218fe7d..80aeb53 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -9,82 +9,113 @@
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-inline: auto; 17 overflow: hidden;
18 box-shadow: 0 calc(-1 * props.get(vars.$indicator--width)) 0 0 props.get(vars.$railing--bg-color) inset;
19 18
20 @include bem.elem('tabs') { 19 &::after {
21 display: flex; 20 display: block;
22 gap: props.get(vars.$spacing); 21 block-size: props.get(vars.$border--width);
23 block-size: 100%; 22 margin-block-start: calc(-1 * props.get(vars.$border--width));
24 padding-inline: calc(.5 * props.get(vars.$spacing)); 23 content: '';
25 margin-inline: calc(-.5 * props.get(vars.$spacing)); 24 background-color: props.get(vars.$railing--bg-color);
26 } 25 }
27 26
28 @include bem.modifier('quiet') { 27 @include bem.elem('tabs') {
29 box-shadow: none; 28 display: flex;
30 } 29 block-size: 100%;
30 overflow-inline: auto;
31 }
31 32
32 @include bem.modifier('adapt') { 33 @include bem.modifier('quiet') {
33 block-size: 100%; 34 box-shadow: none;
34 } 35 }
35 36
36 @include bem.elem('tab') { 37 @include bem.modifier('adapt') {
37 position: relative; 38 block-size: 100%;
38 display: flex; 39 }
39 align-items: center;
40 color: props.get(vars.$tab--text-color);
41 white-space: nowrap;
42 border-block: props.get(vars.$indicator--width) solid transparent;
43 40
44 &::before { 41 @include bem.modifier('snap') {
45 position: absolute; 42 scroll-snap-align: start;
46 inset-block-start: 50%; 43 }
47 inset-inline: calc(-1 * props.get(vars.$tab--pad-i));
48 z-index: -10;
49 block-size: 1.5em;
50 content: '';
51 border-radius: props.get(vars.$rounding);
52 transform: translateY(-50%);
53 }
54 44
55 &:link, 45 @include bem.elem('tab') {
56 &:visited { 46 position: relative;
57 &:hover, 47 display: flex;
58 &:active, 48 align-items: center;
59 &:focus-visible { 49 padding-inline: calc(.5 * props.get(vars.$spacing));
60 color: props.get(vars.$tab--selected--text-color); 50 margin-inline: calc(-.5 * props.get(vars.$spacing));
61 } 51 color: props.get(vars.$tab--text-color);
52 white-space: nowrap;
62 53
63 &:focus-visible { 54 &::before {
64 &::before { 55 position: absolute;
65 color: props.get(vars.$key-focus--text-color); 56 inset-block-start: 50%;
66 text-decoration: none; 57 inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
67 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 58 z-index: -10;
68 box-shadow: 0 0 0 59 block-size: 1.5em;
69 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 60 content: '';
70 props.get(vars.$key-focus--outline-color); 61 border-radius: props.get(vars.$rounding);
71 } 62 transform: translateY(-50%);
72 } 63 }
73 }
74 64
75 @include bem.is('selected') { 65 &::after {
76 color: props.get(vars.$tab--selected--text-color); 66 position: absolute;
77 border-block-end-color: props.get(vars.$tab--selected--text-color); 67 inset-block-end: 0;
78 } 68 inset-inline: calc(.5 * props.get(vars.$spacing));
79 } 69 z-index: 10;
70 display: none;
71 block-size: props.get(vars.$indicator--width);
72 content: '';
73 background-color: props.get(vars.$tab--selected--text-color);
74 }
80 75
81 @include bem.modifier('accent') { 76 &:link,
82 @include bem.elem('tab') { 77 &:visited {
83 @include bem.is('selected') { 78 &:hover,
84 color: props.get(vars.$tab--accent--text-color); 79 &:active,
85 border-block-end-color: props.get(vars.$tab--accent--text-color); 80 &:focus-visible {
86 } 81 color: props.get(vars.$tab--selected--text-color);
87 } 82 }
88 } 83
89 } 84 &:focus-visible {
85 &::before {
86 color: props.get(vars.$key-focus--text-color);
87 text-decoration: none;
88 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
89 box-shadow: 0 0 0
90 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
91 props.get(vars.$key-focus--outline-color);
92 }
93 }
94 }
95
96 @include bem.next-twin-elem {
97 margin-inline-start: calc(.5 * props.get(vars.$spacing));
98 }
99
100 @include bem.is('selected') {
101 color: props.get(vars.$tab--selected--text-color);
102
103 &::after {
104 display: block;
105 }
106 }
107 }
108
109 @include bem.modifier('accent') {
110 @include bem.elem('tab') {
111 &::after {
112 background-color: props.get(vars.$tab--accent--text-color);
113 }
114
115 @include bem.is('selected') {
116 color: props.get(vars.$tab--accent--text-color);
117 }
118 }
119 }
120 }
90} 121}
generated by cgit v1.3.1 (git 2.54.0) at 2026-05-14 01:51:51 +0000