summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_tabbar.scss59
1 files changed, 17 insertions, 42 deletions
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index 68666dc..1513cc1 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -14,19 +14,16 @@
14 @include bem.object('tabbar') { 14 @include bem.object('tabbar') {
15 position: relative; 15 position: relative;
16 display: flex; 16 display: flex;
17 gap: props.get(vars.$spacing);
17 min-inline-size: 0; 18 min-inline-size: 0;
18 block-size: props.get(vars.$block-size); 19 block-size: props.get(vars.$block-size);
19 margin-inline: calc(-.5 * props.get(vars.$spacing));
20 overflow-inline: auto; 20 overflow-inline: auto;
21 box-shadow: 0 calc(-1 * props.get(vars.$indicator--width)) 0 0 props.get(vars.$railing--bg-color) inset;
21 22
22 &::after { 23 @include bem.elem('tabs') {
23 display: block; 24 display: block;
24 flex: 1 1 auto; 25 padding-inline: calc(.5 * props.get(vars.$spacing));
25 block-size: props.get(vars.$indicator--width); 26 margin-inline: calc(-.5 * props.get(vars.$spacing));
26 margin-block-start: auto;
27 margin-inline-end: calc(.5 * props.get(vars.$spacing));
28 content: '';
29 background-color: props.get(vars.$railing--bg-color);
30 } 27 }
31 28
32 @include bem.modifier('quiet') { 29 @include bem.modifier('quiet') {
@@ -40,19 +37,17 @@
40 } 37 }
41 38
42 @include bem.elem('tab') { 39 @include bem.elem('tab') {
43 position: relative; 40 position: relative;
44 display: flex; 41 display: flex;
45 align-items: center; 42 align-items: center;
46 padding-inline-end: calc(.5 * props.get(vars.$spacing)); 43 color: props.get(vars.$tab--text-color);
47 color: props.get(vars.$tab--text-color); 44 white-space: nowrap;
48 white-space: nowrap; 45 border-block: props.get(vars.$indicator--width) solid transparent;
49 border-block: props.get(vars.$indicator--width) solid transparent;
50 border-block-end-color: props.get(vars.$railing--bg-color);
51 46
52 &::before { 47 &::before {
53 position: absolute; 48 position: absolute;
54 inset-block-start: 50%; 49 inset-block-start: 50%;
55 inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing)); 50 inset-inline: calc(-1 * props.get(vars.$tab--pad-i));
56 z-index: -10; 51 z-index: -10;
57 block-size: 1.5em; 52 block-size: 1.5em;
58 content: ''; 53 content: '';
@@ -60,16 +55,6 @@
60 transform: translateY(-50%); 55 transform: translateY(-50%);
61 } 56 }
62 57
63 &::after {
64 position: absolute;
65 inset-block-end: 0;
66 inset-inline: calc(.5 * props.get(vars.$spacing));
67 z-index: 10;
68 display: none;
69 content: '';
70 background-color: props.get(vars.$tab--selected--text-color);
71 }
72
73 &:link, 58 &:link,
74 &:visited { 59 &:visited {
75 &:hover, 60 &:hover,
@@ -90,27 +75,17 @@
90 } 75 }
91 } 76 }
92 77
93 @include bem.next-twin-elem {
94 padding-inline-start: calc(.5 * props.get(vars.$spacing));
95 }
96
97 @include bem.is('selected') { 78 @include bem.is('selected') {
98 color: props.get(vars.$tab--selected--text-color); 79 color: props.get(vars.$tab--selected--text-color);
99 80 border-block-end-color: props.get(vars.$tab--selected--text-color);
100 &::after {
101 display: block;
102 }
103 } 81 }
104 } 82 }
105 83
106 @include bem.modifier('accent') { 84 @include bem.modifier('accent') {
107 @include bem.elem('tab') { 85 @include bem.elem('tab') {
108 &::after {
109 background-color: props.get(vars.$tab--accent--text-color);
110 }
111
112 @include bem.is('selected') { 86 @include bem.is('selected') {
113 color: props.get(vars.$tab--accent--text-color); 87 color: props.get(vars.$tab--accent--text-color);
88 border-block-end-color: props.get(vars.$tab--accent--text-color);
114 } 89 }
115 } 90 }
116 } 91 }