diff --git a/aio/src/app/app.component.html b/aio/src/app/app.component.html index d18571c831..1d05bb2f77 100644 --- a/aio/src/app/app.component.html +++ b/aio/src/app/app.component.html @@ -12,7 +12,6 @@ Home - diff --git a/aio/src/styles/1-layouts/_content-layout.scss b/aio/src/styles/1-layouts/_content-layout.scss index 95d6e188d1..3522cdcf33 100644 --- a/aio/src/styles/1-layouts/_content-layout.scss +++ b/aio/src/styles/1-layouts/_content-layout.scss @@ -10,10 +10,6 @@ aio-shell.page-docs { padding: 6rem 3rem 1rem; } -.fill-remaining-space { - flex: 1 1 auto; -} - @media (max-width: 600px) { aio-menu { display: none; diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss index 30b31d10eb..3e065aeff4 100644 --- a/aio/src/styles/1-layouts/_marketing-layout.scss +++ b/aio/src/styles/1-layouts/_marketing-layout.scss @@ -302,16 +302,6 @@ aio-shell { padding-top: 0; } } - - @media (min-width: 992px) { - md-toolbar { - padding-left: 24px; - - button.hamburger { - display: none; - } - } - } } .cta-bar .hero-cta { diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss index 93dd86153f..0e3e74d1a0 100644 --- a/aio/src/styles/1-layouts/_top-menu.scss +++ b/aio/src/styles/1-layouts/_top-menu.scss @@ -1,17 +1,3 @@ -.fill-remaining-space { - flex: 1 1 auto; -} - -aio-top-menu a.nav-link { - margin: 0; - padding: 24px 16px; - cursor: pointer; - - &:focus { - outline: none; - } -} - .nav-link.home img { position: relative; margin-top: -21px; @@ -20,22 +6,6 @@ aio-top-menu a.nav-link { height: 40px; } -@media (max-width: 700px) { - .nav-link { - font-size: 80%; - margin-right: 8px; - margin-left: 0px; - } -} - -@media (max-width: 600px) { - .nav-link { - font-size: 80%; - margin-right: 8px; - margin-left: 0px; - } -} - aio-top-menu { display: flex; flex-direction: row; @@ -65,60 +35,114 @@ aio-top-menu { } } } + + a.nav-link { + margin: 0; + padding: 24px 16px; + cursor: pointer; + + &:focus { + outline: none; + background: rgba($white, 0.15); + border-radius: 4px; + padding: 8px 16px; + } + } } +// HOME PAGE OVERRIDE: TOPNAV TOOLBAR HAMBURGER MENU aio-shell.page-home md-toolbar.app-toolbar.mat-toolbar { background-color: transparent; + + @media (max-width: 480px) { + background-color: $blue; + } } +// DOCS PAGE / STANDARD: TOPNAV TOOLBAR FIXED md-toolbar.mat-toolbar { - position: absolute; - perspective: 2000px; + position: fixed; top: 0px; right: 0; left: 0; z-index: 10; padding: 0 16px 0 0; + box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30); - .mat-toolbar-row { - @media (max-width: 600px) { + // FIXED TOPNAV TOOLBAR FOR SMALL MOBILE + @media (max-width: 480px) { + position: fixed; + top: 0; + right: 0; + left: 0; + } + + md-icon { + color: $white; + } +} + +// MARKETING PAGES OVERRIDE: ABSOLUTE TOPNAV TOOLBAR +aio-shell.page-home md-toolbar.mat-toolbar, +aio-shell.page-features md-toolbar.mat-toolbar, +aio-shell.page-events md-toolbar.mat-toolbar, +aio-shell.page-resources md-toolbar.mat-toolbar { + position: absolute; + + @media (min-width: 992px) { + padding-left: 24px; + + button.hamburger { + display: none; } } -} -aio-shell.page-home.sidenav-open { - md-toolbar.mat-toolbar md-icon { - color: $mediumgray; + // FIXED TOPNAV TOOLBAR FOR SMALL MOBILE + @media (max-width: 480px) { + position: fixed; + top: 0; + right: 0; + left: 0; } } -.search-container { +// REMOVE BOX SHADOW ON CERTAIN MARKETING PAGES +aio-shell.page-home md-toolbar.mat-toolbar, +aio-shell.page-events md-toolbar.mat-toolbar, +aio-shell.page-resources md-toolbar.mat-toolbar { + box-shadow: none; +} + + +// SEARCH BOX +aio-search-box.search-container { display: flex; justify-content: flex-end; align-items: center; width: 100%; min-width: 150px; height: 100%; -} -aio-search-box input { - color: $darkgray; - border: none; - border-radius: 100px; - background-color: $offwhite; - padding: 5px 16px; - margin-left: 8px; - width: 180px; - max-width: 240px; - height: 50%; + input { + color: $darkgray; + border: none; + border-radius: 100px; + background-color: $offwhite; + padding: 5px 16px; + margin-left: 8px; + width: 150px; + height: 40%; - @include bp(big) { - transition: width 0.4s ease-in-out; - &:focus { - width: 50%; + @include bp(big) { + transition: width 0.4s ease-in-out; + + &:focus { + width: 50%; + max-width: 240px; + } + } + @media (max-width: 480px) { + width: 180px; } } - @media (max-width: 480px) { - width: 150px; - } }