9. public / libmde / 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
 font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;

  
78
}

  
79

  
80
.md-tab a:hover {

  
81
 color: var(--md-sys-color-on-surface);

  
82
}

  
83

  
84
/* state layer */

  
85
.md-tab a:hover::after {

  
86
 background-color: var(--md-sys-color-on-surface);

  
87
 opacity: var(--md-sys-state-hover-state-layer-opacity);

  
88
}

  
89

  
90
.md-tab a.active:hover {

  
91
 color: var(--md-sys-color-primary);

  
92
}

  
93

  
94
/* state layer */

  
95
.md-tab a.active:hover::after {

  
96
 background-color: var(--md-sys-color-primary);

  
97
 opacity: var(--md-sys-state-hover-state-layer-opacity);

  
98
}

  
99

  
100
.md-tab a:hover span {

  
101
 color: var(--md-sys-color-on-surface);

  
102
}

  
103

  
104
.md-tab a.active:hover span {

  
105
 color: var(--md-sys-color-primary);

  
106
}

  
107

  
108
.md-tab a:focus {

  
109
 outline: none;

  
110
}

  
111

  
112
/* state layer */

  
113
.md-tab a:focus::after {

  
114
 background-color: var(--md-sys-color-on-surface);

  
115
 opacity: var(--md-sys-state-focus-state-layer-opacity);

  
116
}

  
117

  
118
/* state layer */

  
119
.md-tab a.active:focus::after {

  
120
 background-color: var(--md-sys-color-primary);

  
121
 opacity: var(--md-sys-state-hover-state-layer-opacity);

  
122
}

  
123

  
124
.md-tab a:active {

  
125
 background-position: center;

  
126
 background-image:

  
127
   radial-gradient(circle, var(--md-riple-color) 1%, transparent 1%);

  
128
 background-size: 100%;

  
129
 animation-name: md-ripple;

  
130
 animation-duration: var(--md-sys-motion-duration-500);

  
131
}

  
132

  
133
/* state layer */

  
134
.md-tab a:active::after {

  
135
 background-color: var(--md-sys-color-on-surface);

  
136
 opacity: var(--md-sys-state-pressed-state-layer-opacity);

  
137
}

  
138

  
139
/* state layer */

  
140
.md-tab a.active:active::after {

  
141
 background-color: var(--md-sys-color-primary);

  
142
 opacity: var(--md-sys-state-pressed-state-layer-opacity);

  
143
}

 


 
 
 
     skip_previous
    
 
     skip_next