summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-11-15 22:31:15 +0100
committerVolpeon <git@volpeon.ink>2024-11-15 22:31:15 +0100
commit3ddfc5c2e695b90615005c1eee37f1e25035d6e8 (patch)
tree62e787f01236409b98c06270450e7f560523745e
parentUpdate (diff)
downloadiro-design-3ddfc5c2e695b90615005c1eee37f1e25035d6e8.tar.gz
iro-design-3ddfc5c2e695b90615005c1eee37f1e25035d6e8.tar.bz2
iro-design-3ddfc5c2e695b90615005c1eee37f1e25035d6e8.zip
Tabs
-rw-r--r--src/objects/_tabs.scss9
1 files changed, 4 insertions, 5 deletions
diff --git a/src/objects/_tabs.scss b/src/objects/_tabs.scss
index 64b0f43..c1fcb56 100644
--- a/src/objects/_tabs.scss
+++ b/src/objects/_tabs.scss
@@ -17,15 +17,14 @@
17 gap: props.get(vars.$spacing); 17 gap: props.get(vars.$spacing);
18 min-inline-size: 0; 18 min-inline-size: 0;
19 block-size: 100%; 19 block-size: 100%;
20 padding-inline: props.get(vars.$tab--pad-i); 20 padding-inline: calc(.5 * props.get(vars.$spacing));
21 margin-inline: calc(-.5 * props.get(vars.$spacing));
21 overflow-inline: auto; 22 overflow-inline: auto;
22 23
23 @include bem.elem('tab') { 24 @include bem.elem('tab') {
24 position: relative; 25 position: relative;
25 display: flex; 26 display: flex;
26 align-items: center; 27 align-items: center;
27 padding-inline: props.get(vars.$tab--pad-i);
28 margin-inline: calc(-1 * props.get(vars.$tab--pad-i));
29 color: props.get(vars.$tab--text-color); 28 color: props.get(vars.$tab--text-color);
30 white-space: nowrap; 29 white-space: nowrap;
31 30
@@ -38,7 +37,7 @@
38 37
39 &::before { 38 &::before {
40 inset-block-start: 50%; 39 inset-block-start: 50%;
41 inset-inline: 0; 40 inset-inline: calc(-1 * props.get(vars.$tab--pad-i));
42 block-size: 1.5em; 41 block-size: 1.5em;
43 border-radius: props.get(vars.$rounding); 42 border-radius: props.get(vars.$rounding);
44 transform: translateY(-50%); 43 transform: translateY(-50%);
@@ -46,7 +45,7 @@
46 45
47 &::after { 46 &::after {
48 inset-block-end: 0; 47 inset-block-end: 0;
49 inset-inline: props.get(vars.$tab--pad-i); 48 inset-inline: 0;
50 display: none; 49 display: none;
51 block-size: props.get(vars.$indicator--width); 50 block-size: props.get(vars.$indicator--width);
52 background-color: props.get(vars.$tab--selected--text-color); 51 background-color: props.get(vars.$tab--selected--text-color);