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, 58 insertions, 52 deletions
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index d43208f..02519f9 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -1,75 +1,77 @@
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/src/bem'; 4@use "pkg:iro-sass/bem";
5@use 'pkg:iro-sass/src/props'; 5@use "pkg:iro-sass/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(.5 * props.get(vars.$spacing)); 49 padding-inline: calc(0.5 * props.get(vars.$spacing));
50 margin-inline: calc(-.5 * props.get(vars.$spacing)); 50 margin-inline: calc(-0.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(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing)); 57 inset-inline: calc(
58 z-index: -10; 58 -1 * props.get(vars.$tab--pad-i) + 0.5 * props.get(vars.$spacing)
59 block-size: 1.5em; 59 );
60 content: ''; 60 z-index: -10;
61 border-radius: props.get(vars.$rounding); 61 block-size: 1.5em;
62 transform: translateY(-50%); 62 content: "";
63 border-radius: props.get(vars.$rounding);
64 transform: translateY(-50%);
63 } 65 }
64 66
65 &::after { 67 &::after {
66 position: absolute; 68 position: absolute;
67 inset-block-end: 0; 69 inset-block-end: 0;
68 inset-inline: calc(.5 * props.get(vars.$spacing)); 70 inset-inline: calc(0.5 * props.get(vars.$spacing));
69 z-index: 10; 71 z-index: 10;
70 display: none; 72 display: none;
71 block-size: props.get(vars.$indicator--width); 73 block-size: props.get(vars.$indicator--width);
72 content: ''; 74 content: "";
73 background-color: props.get(vars.$tab--selected--text-color); 75 background-color: props.get(vars.$tab--selected--text-color);
74 } 76 }
75 77
@@ -83,21 +85,25 @@
83 85
84 &:focus-visible { 86 &:focus-visible {
85 &::before { 87 &::before {
86 color: props.get(vars.$key-focus--text-color); 88 color: props.get(vars.$key-focus--text-color);
87 text-decoration: none; 89 text-decoration: none;
88 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 90 outline: props.get(vars.$key-focus--border-color) solid
91 props.get(vars.$key-focus--border-width);
89 box-shadow: 0 0 0 92 box-shadow: 0 0 0
90 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 93 calc(
94 props.get(vars.$key-focus--border-width) +
95 props.get(vars.$key-focus--outline-width)
96 )
91 props.get(vars.$key-focus--outline-color); 97 props.get(vars.$key-focus--outline-color);
92 } 98 }
93 } 99 }
94 } 100 }
95 101
96 @include bem.next-twin-elem { 102 @include bem.next-twin-elem {
97 margin-inline-start: calc(.5 * props.get(vars.$spacing)); 103 margin-inline-start: calc(0.5 * props.get(vars.$spacing));
98 } 104 }
99 105
100 @include bem.is('selected') { 106 @include bem.is("selected") {
101 color: props.get(vars.$tab--selected--text-color); 107 color: props.get(vars.$tab--selected--text-color);
102 108
103 &::after { 109 &::after {
@@ -106,13 +112,13 @@
106 } 112 }
107 } 113 }
108 114
109 @include bem.modifier('accent') { 115 @include bem.modifier("accent") {
110 @include bem.elem('tab') { 116 @include bem.elem("tab") {
111 &::after { 117 &::after {
112 background-color: props.get(vars.$tab--accent--text-color); 118 background-color: props.get(vars.$tab--accent--text-color);
113 } 119 }
114 120
115 @include bem.is('selected') { 121 @include bem.is("selected") {
116 color: props.get(vars.$tab--accent--text-color); 122 color: props.get(vars.$tab--accent--text-color);
117 } 123 }
118 } 124 }
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 15:24:44 +0000