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