diff options
Diffstat (limited to 'src/objects/_tabs.scss')
-rw-r--r-- | src/objects/_tabs.scss | 127 |
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 | } | ||