15. lib / css / md-tab.css

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