1 files changed, 41 insertions, 18 deletions
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index 218fe7d..131c832 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -14,15 +14,21 @@
    @include bem.object('tabbar') {
        min-inline-size: 0;
        block-size:      props.get(vars.$block-size);
-        overflow-inline: auto;
+        overflow:        hidden;
-        box-shadow:      0 calc(-1 * props.get(vars.$indicator--width)) 0 0 props.get(vars.$railing--bg-color) inset;
+        &::after {
+            display:            block;
+            block-size:         props.get(vars.$indicator--width);
+            margin-block-start: calc(-1 * props.get(vars.$indicator--width));
+            content:            '';
+            background-color:   props.get(vars.$railing--bg-color);
+        }
        @include bem.elem('tabs') {
-            display:        flex;
+            display:         flex;
-            gap:            props.get(vars.$spacing);
+            block-size:      100%;
-            block-size:     100%;
+            margin-inline:   calc(-.5 * props.get(vars.$spacing));
-            padding-inline: calc(.5 * props.get(vars.$spacing));
+            overflow-inline: auto;
-            margin-inline:  calc(-.5 * props.get(vars.$spacing));
        }
        @include bem.modifier('quiet') {
@@ -34,17 +40,17 @@
        }
        @include bem.elem('tab') {
-            position:      relative;
+            position:       relative;
-            display:       flex;
+            display:        flex;
-            align-items:   center;
+            align-items:    center;
-            color:         props.get(vars.$tab--text-color);
+            padding-inline: calc(.5 * props.get(vars.$spacing));
-            white-space:   nowrap;
+            color:          props.get(vars.$tab--text-color);
-            border-block:  props.get(vars.$indicator--width) solid transparent;
+            white-space:    nowrap;
            &::before {
                position:          absolute;
                inset-block-start: 50%;
-                inset-inline:      calc(-1 * props.get(vars.$tab--pad-i));
+                inset-inline:      calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
                z-index:           -10;
                block-size:        1.5em;
                content:           '';
@@ -52,6 +58,17 @@
                transform:         translateY(-50%);
            }
+            &::after {
+                position:         absolute;
+                inset-block-end:  0;
+                inset-inline:     calc(.5 * props.get(vars.$spacing));
+                z-index:          10;
+                display:          none;
+                block-size:       props.get(vars.$indicator--width);
+                content:          '';
+                background-color: props.get(vars.$tab--selected--text-color);
+            }
            &:link,
            &:visited {
                &:hover,
@@ -73,16 +90,22 @@
            }
            @include bem.is('selected') {
-                color:                  props.get(vars.$tab--selected--text-color);
+                color: props.get(vars.$tab--selected--text-color);
-                border-block-end-color: props.get(vars.$tab--selected--text-color);
+                
+                &::after {
+                    display: block;
+                }
            }
        }
        @include bem.modifier('accent') {
            @include bem.elem('tab') {
+                &::after {
+                    background-color: props.get(vars.$tab--accent--text-color);
+                }
                @include bem.is('selected') {
-                    color:                  props.get(vars.$tab--accent--text-color);
+                    color: props.get(vars.$tab--accent--text-color);
-                    border-block-end-color: props.get(vars.$tab--accent--text-color);
                }
            }
        }

diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss index 218fe7d..131c832 100644 --- a/src/objects/_tabbar.scss +++ b/src/objects/_tabbar.scss
@@ -14,15 +14,21 @@
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;	18
		19	&::after {
		20	display: block;
		21	block-size: props.get(vars.$indicator--width);
		22	margin-block-start: calc(-1 * props.get(vars.$indicator--width));
		23	content: '';
		24	background-color: props.get(vars.$railing--bg-color);
		25	}
19		26
20	@include bem.elem('tabs') {	27	@include bem.elem('tabs') {
21	display: flex;	28	display: flex;
22	gap: props.get(vars.$spacing);	29	block-size: 100%;
23	block-size: 100%;	30	margin-inline: calc(-.5 * props.get(vars.$spacing));
24	padding-inline: calc(.5 * props.get(vars.$spacing));	31	overflow-inline: auto;
25	margin-inline: calc(-.5 * props.get(vars.$spacing));
26	}	32	}
27		33
28	@include bem.modifier('quiet') {	34	@include bem.modifier('quiet') {
@@ -34,17 +40,17 @@
34	}	40	}
35		41
36	@include bem.elem('tab') {	42	@include bem.elem('tab') {
37	position: relative;	43	position: relative;
38	display: flex;	44	display: flex;
39	align-items: center;	45	align-items: center;
40	color: props.get(vars.$tab--text-color);	46	padding-inline: calc(.5 * props.get(vars.$spacing));
41	white-space: nowrap;	47	color: props.get(vars.$tab--text-color);
42	border-block: props.get(vars.$indicator--width) solid transparent;	48	white-space: nowrap;
43		49
44	&::before {	50	&::before {
45	position: absolute;	51	position: absolute;
46	inset-block-start: 50%;	52	inset-block-start: 50%;
47	inset-inline: calc(-1 * props.get(vars.$tab--pad-i));	53	inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
48	z-index: -10;	54	z-index: -10;
49	block-size: 1.5em;	55	block-size: 1.5em;
50	content: '';	56	content: '';
@@ -52,6 +58,17 @@
52	transform: translateY(-50%);	58	transform: translateY(-50%);
53	}	59	}
54		60
		61	&::after {
		62	position: absolute;
		63	inset-block-end: 0;
		64	inset-inline: calc(.5 * props.get(vars.$spacing));
		65	z-index: 10;
		66	display: none;
		67	block-size: props.get(vars.$indicator--width);
		68	content: '';
		69	background-color: props.get(vars.$tab--selected--text-color);
		70	}
		71
55	&:link,	72	&:link,
56	&:visited {	73	&:visited {
57	&:hover,	74	&:hover,
@@ -73,16 +90,22 @@
73	}	90	}
74		91
75	@include bem.is('selected') {	92	@include bem.is('selected') {
76	color: props.get(vars.$tab--selected--text-color);	93	color: props.get(vars.$tab--selected--text-color);
77	border-block-end-color: props.get(vars.$tab--selected--text-color);	94
		95	&::after {
		96	display: block;
		97	}
78	}	98	}
79	}	99	}
80		100
81	@include bem.modifier('accent') {	101	@include bem.modifier('accent') {
82	@include bem.elem('tab') {	102	@include bem.elem('tab') {
		103	&::after {
		104	background-color: props.get(vars.$tab--accent--text-color);
		105	}
		106
83	@include bem.is('selected') {	107	@include bem.is('selected') {
84	color: props.get(vars.$tab--accent--text-color);	108	color: props.get(vars.$tab--accent--text-color);
85	border-block-end-color: props.get(vars.$tab--accent--text-color);
86	}	109	}
87	}	110	}
88	}	111	}