iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(aio): topnav toolbar position styles 

- Fixed topnav on all mobile
- Fixed topnav on all docs pages
- Absolute topnav on all marketing pages
- Cleanup and code consolidation for all top-menu styles
- Add styling to topnav links on focus
This commit is contained in:
Stefanie Fluin 2017-05-31 22:42:19 -07:00 committed by Pete Bacon Darwin
parent 784347f61f
commit 95f1ea2f12
4 changed files with 81 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
aio/src/app/app.component.html
View File

@ -12,7 +12,6 @@
<a class="nav-link home" href="/"><img src="{{ homeImageUrl }}" title="Home" alt="Home"></a>
<aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
<aio-search-box class="search-container" #searchBox (search)="doSearch($event)"></aio-search-box>
<span class="fill-remaining-space"></span>
</md-toolbar>
<aio-search-results #searchResults *ngIf="showSearchResults" (resultSelected)="hideSearchResults()"></aio-search-results>

4
aio/src/styles/1-layouts/_content-layout.scss
View File

@ -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;

10
aio/src/styles/1-layouts/_marketing-layout.scss
View File

@ -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 {

138
aio/src/styles/1-layouts/_top-menu.scss
View File

@ -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;
}
}