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

feat(aio): sidenav styling extended

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