1 | .md-tab { |
2 | display: flex; |
3 | background-color: transparent; |
4 | align-items: stretch; |
5 | flex-wrap: nowrap; |
6 | overflow-x: auto; |
7 | position: sticky; |
8 | } |
9 | |
10 | .md-tab.fixed { |
11 | justify-content: center; |
12 | } |
13 | |
14 | .md-tab.scrollable { |
15 | padding-left: 32px; |
16 | gap: 16px; |
17 | } |
18 | |
19 | .md-tab.scroll { |
20 | background-color: var(--md-sys-color-surface-container-low); |
21 | } |
22 | |
23 | .md-tab a { |
24 | position: relative; |
25 | display: flex; |
26 | flex-direction: column; |
27 | justify-content: start; |
28 | align-items: center; |
29 | color: var(--md-sys-color-on-surface-variant); |
30 | font-family: var(--md-sys-typescale-title-small-font); |
31 | font-weight: var(--md-sys-typescale-title-small-weight); |
32 | font-size: var(--md-sys-typescale-title-small-size); |
33 | font-style: var(--md-sys-typescale-title-small-font-style); |
34 | letter-spacing: var(--md-sys-typescale-title-small-tracking); |
35 | line-height: var(--md-sys-typescale-title-small-line-height); |
36 | text-transform: var(--md-sys-typescale-title-small-text-transform); |
37 | text-decoration: var(--md-sys-typescale-title-small-text-decoration); |
38 | text-align: center; |
39 | box-sizing: border-box; |
40 | border-bottom: 3px solid var(--md-sys-color-surface); |
41 | } |
42 | |
43 | .md-tab.fixed a { |
44 | flex: 0 0 var(--tabWidth); |
45 | } |
46 | |
47 | .md-tab.scrollable a { |
48 | flex: 0 0 auto; |
49 | } |
50 | |
51 | .md-tab a.active { |
52 | border-bottom-color: var(--md-sys-color-primary); |
53 | } |
54 | |
55 | |
56 | .md-tab a::after { |
57 | content: ""; |
58 | position: absolute; |
59 | z-index: -1; |
60 | top: 0; |
61 | right: 0; |
62 | left: 0; |
63 | bottom: 0; |
64 | background-color: transparent; |
65 | } |
66 | |
67 | .md-tab span { |
68 | font-size: var(--iconSize); |
69 | height: var(--iconSize); |
70 | width: var(--iconSize); |
71 | color: var(--md-sys-color-on-surface-variant); |
72 | } |
73 | |
74 | .md-tab .active span { |
75 | color: var(--md-sys-color-primary); |
76 | } |
77 | |
78 | .md-tab a:hover { |
79 | color: var(--md-sys-color-on-surface); |
80 | } |
81 | |
82 | |
83 | .md-tab a:hover::after { |
84 | background-color: var(--md-sys-color-on-surface); |
85 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
86 | } |
87 | |
88 | .md-tab a.active:hover { |
89 | color: var(--md-sys-color-primary); |
90 | } |
91 | |
92 | |
93 | .md-tab a.active:hover::after { |
94 | background-color: var(--md-sys-color-primary); |
95 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
96 | } |
97 | |
98 | .md-tab a:hover span { |
99 | color: var(--md-sys-color-on-surface); |
100 | } |
101 | |
102 | .md-tab a.active:hover span { |
103 | color: var(--md-sys-color-primary); |
104 | } |
105 | |
106 | .md-tab a:focus { |
107 | outline: none; |
108 | } |
109 | |
110 | |
111 | .md-tab a:focus::after { |
112 | background-color: var(--md-sys-color-on-surface); |
113 | opacity: var(--md-sys-state-focus-state-layer-opacity); |
114 | } |
115 | |
116 | |
117 | .md-tab a.active:focus::after { |
118 | background-color: var(--md-sys-color-primary); |
119 | opacity: var(--md-sys-state-hover-state-layer-opacity); |
120 | } |
121 | |
122 | .md-tab a:active { |
123 | background-position: center; |
124 | background-image: |
125 | radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%); |
126 | background-size: 100%; |
127 | animation-name: md-ripple; |
128 | animation-duration: var(--md-sys-motion-duration-500); |
129 | } |
130 | |
131 | |
132 | .md-tab a:active::after { |
133 | background-color: var(--md-sys-color-on-surface); |
134 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
135 | } |
136 | |
137 | |
138 | .md-tab a.active:active::after { |
139 | background-color: var(--md-sys-color-primary); |
140 | opacity: var(--md-sys-state-pressed-state-layer-opacity); |
141 | } |