OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Replace icons in mobile navigation with right chevrons

Browse Source
This commit is contained in:
squidfunk 2016-12-28 10:21:25 +01:00
parent dd59ed1f00
commit be5c94128d
2 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/stylesheets/layout/_footer.scss
View File

@ -26,7 +26,6 @@
// Application footer // Application footer
.md-footer { .md-footer {
width: 100%;
// Hide for print // Hide for print
@media print { @media print {

21
src/assets/stylesheets/layout/_nav.scss
View File

@ -93,7 +93,7 @@
// Item contains a nested list // Item contains a nested list
.md-nav__item--nested > & { .md-nav__item--nested > & {
content: "expand_more"; content: "keyboard_arrow_down";
} }
} }
@ -167,10 +167,10 @@
// inside the drawer is always styled accordingly // inside the drawer is always styled accordingly
html & .md-nav__title { html & .md-nav__title {
position: relative; position: relative;
padding: 0.4rem 1.6rem 0.4rem 5.6rem; min-height: 5.6rem;
padding: 0.4rem 1.6rem;
background-color: $md-color-black--lightest; background-color: $md-color-black--lightest;
color: $md-color-black--light; color: $md-color-black--light;
font-size: 1.8rem;
font-weight: 400; font-weight: 400;
line-height: 4.8rem; line-height: 4.8rem;
white-space: nowrap; white-space: nowrap;
@ -180,6 +180,7 @@
&::before { &::before {
display: block; display: block;
position: absolute; position: absolute;
top: 0.4rem;
left: 0.4rem; left: 0.4rem;
width: 4.0rem; width: 4.0rem;
height: 4.0rem; height: 4.0rem;
@ -206,6 +207,11 @@
// Increase spacing to account for icon // Increase spacing to account for icon
&--nested > .md-nav__link { &--nested > .md-nav__link {
padding-right: 4.8rem; padding-right: 4.8rem;
// Replace icon with right arrow
&::after {
content: "keyboard_arrow_right";
}
} }
} }
@ -217,9 +223,7 @@
// Rotate icon // Rotate icon
&::after { &::after {
position: absolute; position: absolute;
top: 50%;
right: 1.2rem; right: 1.2rem;
transform: translateY(-50%) rotate(-90deg);
color: $md-color-black--light; color: $md-color-black--light;
font-size: 2.4rem; font-size: 2.4rem;
} }
@ -262,7 +266,7 @@
// Animate appearance, if browser supports 3D transforms // Animate appearance, if browser supports 3D transforms
.csstransforms3d & { .csstransforms3d & {
display: block; display: flex;
transform: translateX(100%); transform: translateX(100%);
transition: transition:
transform 0.25s cubic-bezier(0.8, 0.0, 0.6, 1.0), transform 0.25s cubic-bezier(0.8, 0.0, 0.6, 1.0),
@ -273,7 +277,7 @@
// Expand nested navigation, if toggle is checked // Expand nested navigation, if toggle is checked
.md-nav__toggle:checked ~ & { .md-nav__toggle:checked ~ & {
display: block; display: flex;
// Animate appearance, if browser supports 3D transforms // Animate appearance, if browser supports 3D transforms
.csstransforms3d & { .csstransforms3d & {
@ -289,7 +293,7 @@
.md-nav__title, .md-nav__title,
.md-nav__item { .md-nav__item {
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1.4; line-height: 1.5;
} }
} }
@ -308,7 +312,6 @@
// Unrotate icon for table of contents // Unrotate icon for table of contents
&::after { &::after {
transform: translateY(-50%); // TODO: just use arrow_right in case of mobile navigation
color: inherit; color: inherit;
content: "toc"; content: "toc";
} }