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

feat(aio): sidenav styling extended

This commit is contained in:
Stefanie Fluin 2017-05-02 12:41:05 -07:00 committed by Matias Niemelä
parent a0b9c23100
commit 21c96a5af1
1 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
aio/src/styles/1-layouts/_sidenav.scss
View File

@ -1,4 +1,3 @@
// Disable sidenav animations while starting the app // Disable sidenav animations while starting the app
// See https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav-transitions.scss // See https://github.com/angular/material2/blob/master/src/lib/sidenav/sidenav-transitions.scss
.starting.mat-sidenav-transition { .starting.mat-sidenav-transition {
@ -9,6 +8,7 @@
} }
} }
// SMALL SCREEN -> TOP NAV SLIDES INTO SIDENAV
aio-nav-menu.top-menu .vertical-menu-item { aio-nav-menu.top-menu .vertical-menu-item {
background-color: $lightgray; background-color: $lightgray;
text-transform: uppercase; text-transform: uppercase;
@ -22,10 +22,10 @@ md-sidenav.mat-sidenav.sidenav {
min-width: 260px; min-width: 260px;
background-color: $offwhite; background-color: $offwhite;
box-shadow: 6px 0 6px rgba(0,0,0,0.10); box-shadow: 6px 0 6px rgba(0,0,0,0.10);
}
md-sidenav.mat-sidenav.sidenav.collapsed { &.collapsed {
padding-top: 32px; padding-top: 32px;
}
} }
md-sidenav-container.sidenav-container { md-sidenav-container.sidenav-container {
@ -53,9 +53,9 @@ md-sidenav-container div.mat-sidenav-content {
display: block; display: block;
max-width: 260px; max-width: 260px;
overflow-wrap: break-word; overflow-wrap: break-word;
padding-top: 10px; padding-top: 4px;
padding-bottom: 10px; padding-bottom: 4px;
padding-left: 20px; padding-left: 16px;
text-decoration: none; text-decoration: none;
text-align: left; text-align: left;
transition-duration: 180ms; transition-duration: 180ms;
@ -66,7 +66,6 @@ md-sidenav-container div.mat-sidenav-content {
outline: none; outline: none;
&:hover { &:hover {
text-shadow: 0 0 5px #ffffff;
background-color: $lightgray; background-color: $lightgray;
} }
@ -74,15 +73,10 @@ md-sidenav-container div.mat-sidenav-content {
//icons _within_ nav //icons _within_ nav
.mat-icon { .mat-icon {
position: absolute; position: absolute;
top: 6px; top: 0;
margin-left: 10px; right: 8px;
margin: 4px;
} }
@include bp(tiny) {
padding-top: 10px;
padding-bottom: 10px;
}
} }
.vertical-menu-item.selected { .vertical-menu-item.selected {
@ -125,7 +119,7 @@ a.selected.level-1,
font-family: $main-font; font-family: $main-font;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
padding-left: 10px; padding-left: 16px;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
@ -142,12 +136,10 @@ a.selected.level-1,
font-family: $main-font; font-family: $main-font;
font-size: 14px; font-size: 14px;
color: $mediumgray; color: $mediumgray;
padding-left: 30px;
} }
.level-1.expanded .mat-icon, .level-2.expanded .mat-icon { .level-1.expanded .mat-icon, .level-2.expanded .mat-icon {
@include rotate(90deg); @include rotate(90deg);
top: 10px;
} }
.level-1:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon { .level-1:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon {
@ -173,12 +165,22 @@ aio-nav-menu.top-menu {
} }
// Angular version selector // Angular Version Selector
md-sidenav .doc-version { md-sidenav .doc-version {
padding: 10px; padding: 10px;
border-top: 1px solid $lightgray;
&:hover { select {
text-shadow: 0 0 5px #ffffff; outline: none;
background-color: $lightgray; width: 100%;
background: rgba($lightgray, 0.5);
height: 32px;
border: 1px solid $lightgray;
color: $darkgray;
option {
font-family: $main-font;
font-size: 14px;
}
} }
} }