8. lib / css / md-navigation-bar.css

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