H. 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