summaryrefslogtreecommitdiffstats
path: root/src/objects/_tabs.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_tabs.scss')
-rw-r--r--src/objects/_tabs.scss127
1 files changed, 0 insertions, 127 deletions
diff --git a/src/objects/_tabs.scss b/src/objects/_tabs.scss
deleted file mode 100644
index 61085c2..0000000
--- a/src/objects/_tabs.scss
+++ /dev/null
@@ -1,127 +0,0 @@
1@use 'sass:map';
2@use 'sass:meta';
3@use 'sass:string';
4@use 'iro-sass/src/bem';
5@use 'iro-sass/src/props';
6@use '../props' as *;
7
8@forward 'tabs.vars';
9@use 'tabs.vars' as vars;
10
11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars'));
13
14 @include bem.object('tabs') {
15 position: relative;
16 display: flex;
17 gap: props.get(vars.$spacing);
18 min-inline-size: 0;
19 block-size: props.get(vars.$block-size);
20 padding-inline: calc(.5 * props.get(vars.$spacing));
21 margin-inline: calc(-.5 * props.get(vars.$spacing));
22 overflow-inline: auto;
23
24 &::after {
25 position: absolute;
26 inset-block-end: 0;
27 inset-inline: calc(.5 * props.get(vars.$spacing));
28 z-index: -10;
29 block-size: props.get(vars.$indicator--width);
30 content: '';
31 background-color: props.get(vars.$railing--bg-color);
32 }
33
34 @include bem.modifier('quiet') {
35 &::after {
36 display: none;
37 }
38 }
39
40 @include bem.modifier('adapt') {
41 block-size: 100%;
42 }
43
44 @include bem.elem('tab') {
45 position: relative;
46 display: flex;
47 align-items: center;
48 color: props.get(vars.$tab--text-color);
49 white-space: nowrap;
50 border-block: props.get(vars.$indicator--width) solid transparent;
51
52 &::before {
53 position: absolute;
54 inset-block-start: 50%;
55 inset-inline: calc(-1 * props.get(vars.$tab--pad-i));
56 z-index: -10;
57 block-size: 1.5em;
58 content: '';
59 border-radius: props.get(vars.$rounding);
60 transform: translateY(-50%);
61 }
62
63 &:link,
64 &:visited {
65 &:hover,
66 &:active,
67 &:focus-visible {
68 color: props.get(vars.$tab--selected--text-color);
69 }
70
71 &:focus-visible {
72 &::before {
73 color: props.get(vars.$key-focus--text-color);
74 text-decoration: none;
75 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
76 box-shadow: 0 0 0
77 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
78 props.get(vars.$key-focus--outline-color);
79 }
80 }
81 }
82
83 @include bem.is('selected') {
84 color: props.get(vars.$tab--selected--text-color);
85 border-block-end-color: props.get(vars.$tab--selected--text-color);
86 }
87 }
88
89 @include bem.elem('caret') {
90 display: none;
91 }
92
93 @include bem.modifier('accent') {
94 @include bem.elem('tab') {
95 @include bem.is('selected') {
96 color: props.get(vars.$tab--accent--text-color);
97 border-block-end-color: props.get(vars.$tab--accent--text-color);
98 }
99 }
100 }
101
102 @include bem.is('collapsed') {
103 @include bem.elem('tab') {
104 display: none;
105
106 @include bem.is('selected') {
107 display: flex;
108 color: props.get(vars.$tab--text-color);
109 border-block-end-color: transparent;
110
111 &:link,
112 &:visited {
113 &:hover,
114 &:active,
115 &:focus-visible {
116 color: props.get(vars.$tab--selected--text-color);
117 }
118 }
119 }
120 }
121
122 @include bem.elem('caret') {
123 display: block;
124 }
125 }
126 }
127}