summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-11-17 10:31:14 +0100
committerVolpeon <git@volpeon.ink>2024-11-17 10:31:14 +0100
commit37f59c6ed2d0e17ba6b8e504eaf1154d8c346e7c (patch)
tree13c482c423895bcf9a9c0aa6ef96bca9b54cc0fc /src/objects
parentUndo tabs (diff)
downloadiro-design-37f59c6ed2d0e17ba6b8e504eaf1154d8c346e7c.tar.gz
iro-design-37f59c6ed2d0e17ba6b8e504eaf1154d8c346e7c.tar.bz2
iro-design-37f59c6ed2d0e17ba6b8e504eaf1154d8c346e7c.zip
Tabs
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_tabs.scss65
-rw-r--r--src/objects/_tabs.vars.scss2
2 files changed, 33 insertions, 34 deletions
diff --git a/src/objects/_tabs.scss b/src/objects/_tabs.scss
index c1fcb56..b998120 100644
--- a/src/objects/_tabs.scss
+++ b/src/objects/_tabs.scss
@@ -12,6 +12,7 @@
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object('tabs') { 14 @include bem.object('tabs') {
15 position: relative;
15 display: flex; 16 display: flex;
16 flex: 1 1 auto; 17 flex: 1 1 auto;
17 gap: props.get(vars.$spacing); 18 gap: props.get(vars.$spacing);
@@ -21,36 +22,41 @@
21 margin-inline: calc(-.5 * props.get(vars.$spacing)); 22 margin-inline: calc(-.5 * props.get(vars.$spacing));
22 overflow-inline: auto; 23 overflow-inline: auto;
23 24
24 @include bem.elem('tab') { 25 &::after {
25 position: relative; 26 position: absolute;
26 display: flex; 27 inset-block-end: 0;
27 align-items: center; 28 inset-inline: calc(.5 * props.get(vars.$spacing));
28 color: props.get(vars.$tab--text-color); 29 z-index: -10;
29 white-space: nowrap; 30 block-size: props.get(vars.$indicator--width);
31 content: '';
32 background-color: props.get(vars.$railing--bg-color);
33 }
30 34
31 &::before, 35 @include bem.modifier('quiet') {
32 &::after { 36 &::after {
33 position: absolute; 37 display: none;
34 z-index: -10;
35 content: '';
36 } 38 }
39 }
40
41 @include bem.elem('tab') {
42 position: relative;
43 display: flex;
44 align-items: center;
45 color: props.get(vars.$tab--text-color);
46 white-space: nowrap;
47 border-block: props.get(vars.$indicator--width) solid transparent;
37 48
38 &::before { 49 &::before {
50 position: absolute;
39 inset-block-start: 50%; 51 inset-block-start: 50%;
40 inset-inline: calc(-1 * props.get(vars.$tab--pad-i)); 52 inset-inline: calc(-1 * props.get(vars.$tab--pad-i));
53 z-index: -10;
41 block-size: 1.5em; 54 block-size: 1.5em;
55 content: '';
42 border-radius: props.get(vars.$rounding); 56 border-radius: props.get(vars.$rounding);
43 transform: translateY(-50%); 57 transform: translateY(-50%);
44 } 58 }
45 59
46 &::after {
47 inset-block-end: 0;
48 inset-inline: 0;
49 display: none;
50 block-size: props.get(vars.$indicator--width);
51 background-color: props.get(vars.$tab--selected--text-color);
52 }
53
54 &:link, 60 &:link,
55 &:visited { 61 &:visited {
56 &:hover, 62 &:hover,
@@ -72,11 +78,8 @@
72 } 78 }
73 79
74 @include bem.is('selected') { 80 @include bem.is('selected') {
75 color: props.get(vars.$tab--selected--text-color); 81 color: props.get(vars.$tab--selected--text-color);
76 82 border-block-end-color: props.get(vars.$tab--selected--text-color);
77 &::after {
78 display: block;
79 }
80 } 83 }
81 } 84 }
82 85
@@ -86,12 +89,9 @@
86 89
87 @include bem.modifier('accent') { 90 @include bem.modifier('accent') {
88 @include bem.elem('tab') { 91 @include bem.elem('tab') {
89 &::after {
90 background-color: props.get(vars.$tab--accent--text-color);
91 }
92
93 @include bem.is('selected') { 92 @include bem.is('selected') {
94 color: props.get(vars.$tab--accent--text-color); 93 color: props.get(vars.$tab--accent--text-color);
94 border-block-end-color: props.get(vars.$tab--accent--text-color);
95 } 95 }
96 } 96 }
97 } 97 }
@@ -101,12 +101,9 @@
101 display: none; 101 display: none;
102 102
103 @include bem.is('selected') { 103 @include bem.is('selected') {
104 display: flex; 104 display: flex;
105 color: props.get(vars.$tab--text-color); 105 color: props.get(vars.$tab--text-color);
106 106 border-block-end-color: transparent;
107 &::after {
108 display: none;
109 }
110 107
111 &:link, 108 &:link,
112 &:visited { 109 &:visited {
diff --git a/src/objects/_tabs.vars.scss b/src/objects/_tabs.vars.scss
index 620228a..daad166 100644
--- a/src/objects/_tabs.vars.scss
+++ b/src/objects/_tabs.vars.scss
@@ -17,6 +17,8 @@ $tab--text-color: props.def(--o-tabs--tab--text-color, props.get(core.
17$tab--selected--text-color: props.def(--o-tabs--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default; 17$tab--selected--text-color: props.def(--o-tabs--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default;
18$tab--accent--text-color: props.def(--o-tabs--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default; 18$tab--accent--text-color: props.def(--o-tabs--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
19 19
20$railing--bg-color: props.def(--o-tabs--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
21
20$key-focus--text-color: props.def(--o-tabs--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default; 22$key-focus--text-color: props.def(--o-tabs--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
21$key-focus--border-color: props.def(--o-tabs--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; 23$key-focus--border-color: props.def(--o-tabs--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
22$key-focus--outline-color: props.def(--o-tabs--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; 24$key-focus--outline-color: props.def(--o-tabs--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-10-28 21:03:29 +0000