Skip to content

Commit d9cc296

Browse files
wuda-iowuda-io
committed
fix: appbar
1 parent cec2910 commit d9cc296

9 files changed

Lines changed: 211 additions & 8161 deletions

File tree

components/navigation-bar/_navbar.scss renamed to components/appbar/_navbar.scss

Lines changed: 97 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,106 @@
1-
@use '../../sass/variables' as *;
1+
/* @use '../../sass/variables' as *;
22
@use '../../sass/global' as *;
33
44
:root {
55
--navbar-height: 64px;
6-
--navbar-height-mobile: 56px;
6+
--navbar-height-mobile: 56px; // todo: do not change
7+
--appbar-title-font-size: 24px;
8+
}
9+
10+
.nav-wrapper {
11+
height: 100%;
12+
background-color: var(--md-sys-color-surface);
13+
padding-left: 4px;
14+
padding-right: 4px;
15+
display: flex;
16+
align-items: center;
717
}
818
919
.navbar {
10-
color: var(--md-sys-color-on-primary);
20+
color: var(--md-sys-color-on-surface);
1121
@extend .z-depth-1;
12-
background-color: var(--md-sys-color-secondary-container);
13-
width: 100%;
1422
height: var(--navbar-height-mobile);
15-
line-height: var(--navbar-height-mobile);
1623
1724
&.nav-extended {
1825
height: auto;
19-
2026
.nav-wrapper {
2127
min-height: var(--navbar-height-mobile);
2228
height: auto;
2329
}
24-
2530
.nav-content {
2631
position: relative;
2732
line-height: normal;
2833
}
2934
}
3035
36+
// Navbar Links
37+
ul:not(.dropdown-content) {
38+
list-style-type: none;
39+
margin: 0;
40+
display: flex;
41+
align-items: center;
42+
gap: 1em;
43+
44+
& > li {
45+
transition: background-color 0.3s;
46+
padding: 0;
47+
48+
& > a {
49+
transition: background-color 0.3s;
50+
color: var(--md-sys-color-on-surface);
51+
display: block;
52+
cursor: pointer;
53+
54+
55+
&.active {
56+
//background-color: var(--md-sys-color-primary-container-dark);
57+
}
58+
&:hover:not(.active) {
59+
// background-color: var(--md-sys-color-on-primary-dark);
60+
}
61+
62+
&.btn,
63+
&.btn-large,
64+
&.btn-flat,
65+
&.btn-floating {
66+
margin-top: -2px;
67+
margin-left: 15px;
68+
margin-right: 15px;
69+
display: inline-block;
70+
71+
& > .material-icons,
72+
& > .material-symbols-outlined,
73+
& > .material-symbols-rounded,
74+
& > .material-symbols-sharp {
75+
height: inherit;
76+
line-height: inherit;
77+
}
78+
}
79+
}
80+
}
81+
82+
&.left {
83+
float: left;
84+
}
85+
}
86+
3187
a {
32-
color: var(--md-sys-color-on-primary);
88+
color: var(--md-sys-color-on-primary);
3389
}
3490
3591
i,
36-
[class^="mdi-"], [class*="mdi-"],
37-
i.material-icons, i.material-symbols-outlined,
38-
i.material-symbols-rounded, i.material-symbols-sharp {
92+
[class^='mdi-'],
93+
[class*='mdi-'],
94+
i.material-icons,
95+
i.material-symbols-outlined,
96+
i.material-symbols-rounded,
97+
i.material-symbols-sharp {
3998
display: block;
4099
font-size: 24px;
41100
height: var(--navbar-height-mobile);
42101
line-height: var(--navbar-height-mobile);
43102
}
44103
45-
.nav-wrapper {
46-
position: relative;
47-
height: 100%;
48-
}
49-
50-
@media #{$large-and-up} {
51-
a.sidenav-trigger {
52-
display: none;
53-
}
54-
}
55104
56105
// Collapse button
57106
.sidenav-trigger {
@@ -69,33 +118,14 @@
69118
70119
// Logo
71120
.brand-logo {
72-
position: absolute;
73-
color: var(--md-sys-color-on-primary);
121+
color: var(--md-sys-color-on-surface);
122+
font-size: var(--appbar-title-font-size);
74123
display: inline-block;
75-
font-size: 2.1rem;
76124
padding: 0;
77125
78-
&.center {
79-
left: 50%;
80-
transform: translateX(-50%);
81-
}
82-
83-
@media #{$medium-and-down} {
126+
&.center {
84127
left: 50%;
85128
transform: translateX(-50%);
86-
87-
&.left, &.right {
88-
padding: 0;
89-
transform: none;
90-
}
91-
92-
&.left {
93-
left: 0.5rem;
94-
}
95-
&.right {
96-
right: 0.5rem;
97-
left: auto;
98-
}
99129
}
100130
101131
&.right {
@@ -104,87 +134,45 @@
104134
}
105135
106136
i,
107-
[class^="mdi-"], [class*="mdi-"],
108-
i.material-icons, i.material-symbols-outlined,
109-
i.material-symbols-rounded, i.material-symbols-sharp {
137+
[class^='mdi-'],
138+
[class*='mdi-'],
139+
i.material-icons,
140+
i.material-symbols-outlined,
141+
i.material-symbols-rounded,
142+
i.material-symbols-sharp {
110143
float: left;
111144
margin-right: 15px;
112145
}
113146
}
114147
115-
116148
// Title
117149
.nav-title {
118150
display: inline-block;
119151
font-size: 32px;
120152
padding: 28px 0;
121153
}
122154
123-
124-
// Navbar Links
125-
ul:not(.dropdown-content) {
126-
list-style-type: none;
127-
margin: 0;
128-
129-
& > li {
130-
transition: background-color .3s;
131-
float: left;
132-
padding: 0;
133-
134-
& > a {
135-
transition: background-color .3s;
136-
font-size: 1rem;
137-
color: var(--md-sys-color-on-primary);
138-
display: block;
139-
padding: 0 15px;
140-
cursor: pointer;
141-
142-
&.active {
143-
background-color: var(--md-sys-color-primary-container-dark);
144-
}
145-
146-
&:hover:not(.active) {
147-
background-color: var(--md-sys-color-on-primary-dark);
148-
}
149-
150-
&.btn, &.btn-large, &.btn-flat, &.btn-floating {
151-
margin-top: -2px;
152-
margin-left: 15px;
153-
margin-right: 15px;
154-
display: inline-block;
155-
156-
& > .material-icons, & > .material-symbols-outlined,
157-
& > .material-symbols-rounded, & > .material-symbols-sharp {
158-
height: inherit;
159-
line-height: inherit;
160-
}
161-
}
162-
}
163-
}
164-
165-
&.left {
166-
float: left;
167-
}
168-
}
169-
170155
// Navbar Search Form
171156
form {
172157
height: 100%;
173158
}
174-
175159
.input-field {
176160
margin: 0;
177161
height: 100%;
178162
179-
input[type=search] {
163+
input[type='search'] {
180164
height: 100%;
181165
font-size: 1.2rem;
182166
border: none;
183167
padding-left: 2rem;
184-
color: var(--md-sys-color-on-primary);
185-
186-
&:focus, &[type=text]:valid, &[type=password]:valid,
187-
&[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
168+
color: var(--md-sys-color-on-primary);
169+
170+
&:focus,
171+
&[type='text']:valid,
172+
&[type='password']:valid,
173+
&[type='email']:valid,
174+
&[type='url']:valid,
175+
&[type='date']:valid {
188176
border: none;
189177
box-shadow: none;
190178
}
@@ -196,11 +184,11 @@
196184
197185
i {
198186
color: var(--font-on-primary-color-medium);
199-
transition: color .3s;
187+
transition: color 0.3s;
200188
}
201189
202190
&.active i {
203-
color: var(--md-sys-color-on-primary)
191+
color: var(--md-sys-color-on-primary);
204192
}
205193
}
206194
}
@@ -222,11 +210,14 @@
222210
.nav.nav-extended .nav-wrapper {
223211
min-height: var(--navbar-height-mobile);
224212
}
225-
.nav, .navbar .nav-wrapper i, nav a.sidenav-trigger, .navbar a.sidenav-trigger i {
213+
.nav,
214+
.navbar .nav-wrapper i,
215+
nav a.sidenav-trigger,
216+
.navbar a.sidenav-trigger i {
226217
height: var(--navbar-height);
227-
line-height: var(--navbar-height)
218+
line-height: var(--navbar-height);
228219
}
229220
.navbar-fixed {
230221
height: var(--navbar-height);
231222
}
232-
}
223+
} */

‎components/appbar/appbar.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
:root {
2+
--navbar-height: 64px;
3+
--navbar-height-mobile: 56px;
4+
--appbar-title-font-size: 24px;
5+
}
6+
7+
.nav-wrapper {
8+
height: 100%;
9+
background-color: var(--md-sys-color-surface);
10+
padding-left: 4px;
11+
padding-right: 4px;
12+
display: flex;
13+
align-items: center;
14+
}
15+
16+
.navbar {
17+
color: var(--md-sys-color-on-surface);
18+
height: var(--navbar-height-mobile);
19+
}
20+
21+
.navbar ul:not(.dropdown-content) {
22+
list-style-type: none;
23+
margin: 0;
24+
display: flex;
25+
align-items: center;
26+
gap: 1em;
27+
}
28+
29+
.navbar ul:not(.dropdown-content) > li {
30+
transition: background-color 0.3s;
31+
padding: 0;
32+
}
33+
34+
.navbar ul:not(.dropdown-content) > li > a {
35+
transition: background-color 0.3s;
36+
color: var(--md-sys-color-on-surface);
37+
display: block;
38+
cursor: pointer;
39+
}
40+
41+
.navbar .brand-logo {
42+
color: var(--md-sys-color-on-surface);
43+
font-size: var(--appbar-title-font-size);
44+
display: inline-block;
45+
padding: 0;
46+
47+
.navbar .nav-title {
48+
display: inline-block;
49+
font-size: 32px;
50+
padding: 28px 0;
51+
}
52+
53+
.navbar-fixed {
54+
position: fixed;
55+
z-index: 997;
56+
}

0 commit comments

Comments
 (0)