istio
/
istio.io
mirror of https://github.com/istio/istio.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Resize header on scroll (#9687)

This commit is contained in:
Bartosz Wojcicki 2021-05-05 23:40:17 +02:00 committed by GitHub
parent d201efdf50
commit fc5159efb1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/sass/base/_constants.scss
View File

@ -19,6 +19,7 @@ $bp-xxl: 1300px;
// Embellishments
$headerHeight: 6.875rem;
$headerHeightLg: 8.125rem;
$activeHeaderHeight: 5rem;
$footerHeight: 7rem;
// Z-index of different layers

22
src/sass/misc/_header.scss
View File

@ -1,16 +1,25 @@
.main-navigation {
position: fixed;
height: $headerHeight;
max-height: $headerHeight;
background-color: #ffffff;
top: 0;
right: 0;
left: 0;
z-index: $header-z;
padding: 1.25rem 0;
transition: background-color .2s, box-shadow .2s;
transition: background-color .2s, box-shadow .2s, max-height .2s, padding .2s;
&.active {
box-shadow: 0 6px 9px 0 rgba(0, 0, 0, .16);
padding: 0;
max-height: $activeHeaderHeight;
@media(min-width: $bp-lg) {
#brand .logo svg {
transform: scale(.8);
}
}
}
@media print {
@ -32,7 +41,11 @@
.logo {
fill: $secondaryColor;
svg { width: 106px; }
svg {
width: 106px;
transition: transform .2s;
transform-origin: left center;
}
}
.name {
@ -168,10 +181,10 @@
&-wrapper {
display: flex;
justify-content: center;
position: relative;
flex-direction: column;
height: 100%;
overflow: auto;
@media (max-width: $bp-lg) {
padding-right: 1rem;
@ -274,7 +287,6 @@
&--transparent {
background-color: transparent;
transition: background-color .175s ease-out;
svg.icon {
fill: $textBrandColor;
@ -312,6 +324,7 @@
height: 100%;
padding: 0;
transition: none;
max-height: unset;
.main-navigation {
&-header { padding: 1.25rem 1rem; }
@ -351,6 +364,7 @@
@media (min-width: $bp-lg) {
.main-navigation {
height: $headerHeightLg;
max-height: $headerHeightLg;
padding: 1.875rem 0;
&-wrapper {