Skip to content

Commit c9b7519

Browse files
nolimits4webnolimits4web
committed
feat(navbar): m3 style navbar
1 parent b981268 commit c9b7519

File tree

5 files changed

+48
-47
lines changed

5 files changed

+48
-47
lines changed

‎src/core/components/navbar/navbar-ios.less‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
--f7-navbarLeftTextOffset: calc(4px + 12px + var(--f7-navbar-inner-padding-left));
33
--f7-navbarTitleLargeOffset: var(--f7-navbar-large-title-padding-left);
44
.navbar {
5+
.title-large {
6+
align-items: flex-end;
7+
}
58
a.icon-only {
69
width: 44px;
710
margin: 0;

‎src/core/components/navbar/navbar-md.less‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
.md {
22
.navbar {
3+
.title-large {
4+
align-items: center;
5+
}
6+
.left {
7+
margin-left: 4px;
8+
margin-right: 4px;
9+
}
310
a.link {
411
padding: 0 12px;
512
min-width: 48px;
@@ -13,8 +20,10 @@
1320
.right {
1421
.ltr({
1522
margin-left: auto;
23+
margin-right: 4px;
1624
});
1725
.rtl({
26+
margin-left: 4px;
1827
margin-right: auto;
1928
});
2029
}
@@ -37,6 +46,9 @@
3746
.page.page-with-subnavbar .navbar-inner {
3847
overflow: visible;
3948
}
49+
.navbar-inner:not(.navbar-inner-centered-title) .title:first-child {
50+
margin-left: 16px;
51+
}
4052
.navbar-inner-centered-title {
4153
justify-content: space-between;
4254
.right {

‎src/core/components/navbar/navbar-vars.less‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,24 @@
22
/*
33
--f7-navbar-bg-color: var(--f7-bars-bg-color);
44
--f7-navbar-bg-color-rgb: var(--f7-bars-bg-color-rgb);
5-
--f7-navbar-bg-image: var(--f7-bars-bg-image);
65
--f7-navbar-border-color: var(--f7-bars-border-color);
7-
--f7-navbar-link-color: var(--f7-bars-link-color);
8-
--f7-navbar-text-color: var(--f7-bars-text-color);
96
*/
107
--f7-navbar-hide-show-transition-duration: 400ms;
118
--f7-navbar-title-line-height: 1.2;
12-
--f7-navbar-title-font-size: inherit;
139
--f7-navbar-subtitle-text-align: inherit;
1410
--f7-navbar-large-title-line-height: 1.2;
1511
--f7-navbar-large-title-text-color: inherit;
1612
--f7-navbar-large-title-padding-left: 16px;
1713
--f7-navbar-large-title-padding-right: 16px;
1814
}
1915
.ios-vars({
16+
/*
17+
--f7-navbar-link-color: var(--f7-bars-link-color);
18+
--f7-navbar-text-color: var(--f7-bars-text-color);
19+
*/
2020
--f7-navbar-height: 44px;
21-
--f7-navbar-tablet-height: 44px;
2221
--f7-navbar-font-size: 17px;
22+
--f7-navbar-title-font-size: inherit;
2323
--f7-navbar-inner-padding-left: 8px;
2424
--f7-navbar-inner-padding-right: 8px;
2525
--f7-navbar-title-font-weight: 600;
@@ -28,7 +28,6 @@
2828
--f7-navbar-title-text-align: center;
2929
--f7-navbar-subtitle-font-size: 10px;
3030
--f7-navbar-subtitle-line-height: 1;
31-
--f7-navbar-shadow-image: none;
3231
--f7-navbar-large-title-height: 52px;
3332
--f7-navbar-large-title-font-size: 34px;
3433
--f7-navbar-large-title-font-weight: 700;
@@ -46,31 +45,28 @@
4645
});
4746
});
4847
.md-vars({
49-
--f7-navbar-height: 56px;
50-
--f7-navbar-tablet-height: 64px;
51-
--f7-navbar-font-size: 20px;
52-
--f7-navbar-inner-padding-left: 4px;
53-
--f7-navbar-inner-padding-right: 4px;
54-
--f7-navbar-title-font-weight: 500;
55-
--f7-navbar-title-margin-left: 20px;
48+
--f7-navbar-link-color: var(--f7-md-on-surface);
49+
--f7-navbar-text-color: var(--f7-md-on-surface);
50+
--f7-navbar-height: 64px;
51+
--f7-navbar-font-size: 16px;
52+
--f7-navbar-title-font-size: 22px;
53+
--f7-navbar-inner-padding-left: 0px;
54+
--f7-navbar-inner-padding-right: 0px;
55+
--f7-navbar-title-font-weight: 400;
56+
--f7-navbar-title-margin-left: 0px;
5657
--f7-navbar-title-margin-right: 16px;
5758
--f7-navbar-title-text-align: left;
5859
--f7-navbar-subtitle-font-size: 14px;
5960
--f7-navbar-subtitle-line-height: 1.2;
60-
--f7-navbar-shadow-image: var(--f7-bars-shadow-bottom-image);
61-
--f7-navbar-large-title-font-size: 34px;
62-
--f7-navbar-large-title-height: 56px;
63-
--f7-navbar-large-title-font-weight: 500;
61+
--f7-navbar-large-title-font-size: 28px;
62+
--f7-navbar-large-title-height: 88px;
63+
--f7-navbar-large-title-font-weight: 400;
6464
--f7-navbar-large-title-letter-spacing: 0;
6565
--f7-navbar-large-title-padding-vertical: 8px;
6666

6767
--f7-navbar-link-height: 48px;
6868
--f7-navbar-link-line-height: 48px;
6969

70-
.light-vars({
71-
--f7-navbar-subtitle-text-color: rgba(0,0,0,0.85);
72-
});
73-
.dark-vars({
74-
--f7-navbar-subtitle-text-color: rgba(255,255,255,0.85);
75-
});
70+
--f7-navbar-subtitle-text-color: var(--f7-md-on-surface-variant);
71+
7672
});

‎src/core/components/navbar/navbar.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -347,14 +347,14 @@ const Navbar = {
347347
navbarTitleLargeHeight = $titleLargeEl[0].offsetHeight;
348348
} else if (Number.isNaN(navbarTitleLargeHeight)) {
349349
if (app.theme === 'ios') navbarTitleLargeHeight = 52;
350-
else if (app.theme === 'md') navbarTitleLargeHeight = 48;
350+
else if (app.theme === 'md') navbarTitleLargeHeight = 88;
351351
}
352352
} else if ($titleLargeEl.length) {
353353
navbarTitleLargeHeight = $titleLargeEl[0].offsetHeight;
354354
} else {
355355
// eslint-disable-next-line
356356
if (app.theme === 'ios') navbarTitleLargeHeight = 52;
357-
else if (app.theme === 'md') navbarTitleLargeHeight = 48;
357+
else if (app.theme === 'md') navbarTitleLargeHeight = 88;
358358
}
359359
}
360360

@@ -474,6 +474,7 @@ const Navbar = {
474474
const inSearchbarExpanded = $navbarEl.hasClass('with-searchbar-expandable-enabled');
475475
if (inSearchbarExpanded) return;
476476
navbarCollapsed = $navbarEl.hasClass('navbar-large-collapsed');
477+
const $bgEl = $navbarEl.find('.navbar-bg');
477478
if (collapseProgress === 0 && navbarCollapsed) {
478479
app.navbar.expandLargeTitle($navbarEl[0]);
479480
} else if (collapseProgress === 1 && !navbarCollapsed) {
@@ -490,32 +491,31 @@ const Navbar = {
490491
}
491492
$navbarEl.find('.title').css('opacity', '');
492493
$navbarEl.find('.title-large-text, .subnavbar').css('transform', '');
494+
$navbarEl.find('.title-large-text').css('opacity', '');
493495
if (isLargeTransparent) {
494-
$navbarEl.find('.navbar-bg').css('opacity', '');
495-
} else {
496-
$navbarEl.find('.navbar-bg').css('transform', '');
496+
$bgEl.css('opacity', '');
497497
}
498+
$bgEl.css('transform', '');
498499
} else if (collapseProgress > 0 && collapseProgress < 1) {
499500
if (app.theme === 'md') {
500501
$navbarEl.find('.navbar-inner').css('overflow', 'visible');
501502
}
502-
$navbarEl.find('.title').css('opacity', collapseProgress);
503+
$navbarEl.find('.title').css('opacity', -0.5 + collapseProgress * 1.5);
503504
$navbarEl
504505
.find('.title-large-text, .subnavbar')
505506
.css(
506507
'transform',
507508
`translate3d(0px, ${-1 * collapseProgress * navbarTitleLargeHeight}px, 0)`,
508509
);
510+
$navbarEl.find('.title-large-text').css('opacity', 1 - collapseProgress * 2);
511+
509512
if (isLargeTransparent) {
510-
$navbarEl.find('.navbar-bg').css('opacity', collapseProgress);
511-
} else {
512-
$navbarEl
513-
.find('.navbar-bg')
514-
.css(
515-
'transform',
516-
`translate3d(0px, ${-1 * collapseProgress * navbarTitleLargeHeight}px, 0)`,
517-
);
513+
$bgEl.css('opacity', collapseProgress);
518514
}
515+
$bgEl.css(
516+
'transform',
517+
`translate3d(0px, ${-1 * collapseProgress * navbarTitleLargeHeight}px, 0)`,
518+
);
519519
}
520520

521521
if (snapPageScrollToLargeTitle) {

‎src/core/components/navbar/navbar.less‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,6 @@
122122
pointer-events: none;
123123
z-index: 0;
124124
background: var(--f7-navbar-bg-color);
125-
background-image: var(--f7-navbar-bg-image, var(--f7-bars-bg-image));
126125
background-color: var(--f7-navbar-bg-color, var(--f7-bars-bg-color));
127126
transition-property: transform;
128127
.ios-translucent-bars(var(--f7-navbar-bg-color-rgb, var(--f7-bars-bg-color-rgb)));
@@ -131,16 +130,10 @@
131130
backface-visibility: hidden;
132131
}
133132
.hairline(bottom, var(--f7-navbar-border-color, var(--f7-bars-border-color)));
134-
.bar-shadow-bottom(var(--f7-navbar-shadow-image));
135133
&:after {
136134
z-index: 1;
137135
}
138136
}
139-
:root {
140-
@media (min-width: 768px) and (min-height: 600px) {
141-
--f7-navbar-height: var(--f7-navbar-tablet-height);
142-
}
143-
}
144137
// Transitions
145138
.navbar-transitioning {
146139
&,
@@ -227,8 +220,6 @@
227220
.navbar-large-transparent .navbar-bg,
228221
.navbar-large.navbar-transparent .navbar-bg {
229222
opacity: var(--f7-navbar-large-collapse-progress);
230-
height: 100%;
231-
transform: none;
232223
}
233224
.ios .router-navbar-transition-to-large .navbar-bg,
234225
.ios .router-navbar-transition-from-large .navbar-bg,
@@ -262,7 +253,6 @@
262253
right: 0;
263254
top: 100%;
264255
display: flex;
265-
align-items: flex-end;
266256
white-space: nowrap;
267257
overflow: hidden;
268258
height: var(--f7-navbar-large-title-height);

0 commit comments

Comments
 (0)