17. 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}
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/* state layer */
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/* state layer */
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/* state layer */
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/* state layer */
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/* state layer */
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/* state layer */
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/* state layer */
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}
skip_previous skip_next