cargdev/angular
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(aio): restore visible sidenav keyboard focus; shift TOC up

Browse Source 
closes #17665
Restores keyboard focus that was removed by commit b8b91d3.
Raises the right-TOC by 20px (96px->76px) because was too far down.

To prevent keyboard focus on hidden child nodes,
also collapses inner expanded nodes when parent node is collapsed.
The implicit parent node of top nodes is always expanded.
This commit is contained in:
Ward Bell
2017-06-28 17:10:35 -07:00
committed by Pete Bacon Darwin
parent b052ef5f1e
commit 4459e0c1c8
5 changed files with 27 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,7 +22,7 @@ aio-nav-menu {
}
aio-nav-item div a {
padding-left: 16px;
padding-left: 6px;
}
}
@ -67,27 +67,26 @@ md-sidenav-container div.mat-sidenav-content {
overflow-wrap: break-word;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 16px;
text-decoration: none;
text-align: left;
transition-duration: 180ms;
transition-property: background-color, color;
transition-timing-function: ease-in-out;
width: 100%;
width: 93%;
word-wrap: break-word;
outline: none;
transition: all 0.3s ease-in-out;
&:hover {
text-shadow: 0 0 5px #ffffff;
background-color: $lightgray;
color: $blue;
text-shadow: 0 0 5px #ffffff;
}
&:focus {
outline: $accentblue auto 2px;
}
//icons _within_ nav
.mat-icon {
position: absolute;
top: 0;
right: 8px;
right: 0;
margin: 4px;
}
}
@ -99,11 +98,10 @@ md-sidenav-container div.mat-sidenav-content {
button.vertical-menu-item {
border: none;
background-color: transparent;
padding: 8px 0 8px 20px;
&:focus {
color: $black;
}
margin-right: 0;
padding-left: 6px;
padding-top: 8px;
padding-bottom: 10px;
}
.heading {
@ -111,7 +109,6 @@ button.vertical-menu-item {
cursor: pointer;
position: relative;
text-transform: uppercase;
width: 100%;
}
.heading-children.expanded {
@ -136,25 +133,25 @@ button.vertical-menu-item {
font-family: $main-font;
font-size: 14px;
font-weight: 400;
padding-left: 20px;
margin-left: 14px;
transition: background-color 0.2s;
text-transform: uppercase;
}
.level-2 {
color: $mediumgray;
font-family: $main-font;
font-size: 14px;
color: $mediumgray;
font-weight: 400;
padding-left: 20px;
margin-left: 12px;
text-transform: none;
}
.level-3 {
color: $mediumgray;
font-family: $main-font;
font-size: 14px;
color: $mediumgray;
padding-left: 8px;
margin-left: 10px;
}
.level-1.expanded .mat-icon, .level-2.expanded .mat-icon {
@ -163,7 +160,7 @@ button.vertical-menu-item {
.level-1:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon {
@include rotate(0deg);
margin: 4px;
// margin: 4px;
}
.promo-img-container img {

4
aio/src/styles/2-modules/_toc.scss
View File

@ -1,9 +1,9 @@
.toc-container {
width: 18%;
position: fixed;
top: 96px;
top: 76px;
right: 0;
bottom: 32px;
bottom: 12px;
overflow-y: auto;
overflow-x: hidden;
}