//// /// Copyright (c) 2016-2020 Martin Donath /// /// Permission is hereby granted, free of charge, to any person obtaining a /// copy of this software and associated documentation files (the "Software"), /// to deal in the Software without restriction, including without limitation /// the rights to use, copy, modify, merge, publish, distribute, sublicense, /// and/or sell copies of the Software, and to permit persons to whom the /// Software is furnished to do so, subject to the following conditions: /// /// The above copyright notice and this permission notice shall be included in /// all copies or substantial portions of the Software. /// /// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR /// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, /// FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL /// THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER /// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING /// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER /// DEALINGS //// // ---------------------------------------------------------------------------- // Rules // ---------------------------------------------------------------------------- // Navigation container .md-nav { font-size: px2rem(14px); line-height: 1.3; // List title &__title { display: block; padding: 0 px2rem(12px); font-weight: 700; text-overflow: ellipsis; overflow: hidden; // Icon, hidden by default &::before { @extend %md-icon, %md-icon__button; display: none; content: "\E5C4"; // arrow_back // Adjust for RTL languages [dir="rtl"] & { content: "\E5C8"; // arrow_forward } } // Hide button by default .md-nav__button { display: none; } } // List of items &__list { margin: 0; padding: 0; list-style: none; } // List item &__item { padding: 0 px2rem(12px); // Add bottom spacing to last item &:last-child { padding-bottom: px2rem(12px); } // 2nd+ level items & & { padding-right: 0; // Adjust for RTL languages [dir="rtl"] & { padding-right: px2rem(12px); padding-left: 0; } // Remove bottom spacing for nested items &:last-child { padding-bottom: 0; } } } // Button with logo &__button { @extend %md-icon, %md-icon__button; // Stretch image img { width: 100%; height: auto; } } // Link inside item &__link { display: block; margin-top: 0.625em; transition: color 0.125s; text-overflow: ellipsis; cursor: pointer; overflow: hidden; // Icon &::after { @extend %md-icon; // Item contains a nested list .md-nav__item--nested > & { content: "\E313"; // keyboard_arrow_down } } // Hide link to table of contents by default - this will only match the // table of contents inside the drawer below and including tablet portrait html &[for="__toc"] { display: none; // Hide table of contents by default & ~ .md-nav { display: none; } // Hide icon for current item + .md-nav__link::after { display: none; } } // Blurred link &[data-md-state="blur"] { color: $md-color-black--light; } // Active link &:active, &--active { color: $md-color-primary; } // Reset active color for nested list titles .md-nav__item--nested > & { color: inherit; } // Focused or hovered link &:focus, &:hover { color: $md-color-accent; } } // Repository containing source &__source { display: none; } // [tablet -]: Layered navigation @include break-to-device(tablet) { background-color: $md-color-white; // Stretch primary navigation to drawer &--primary, &--primary .md-nav { display: flex; position: absolute; top: 0; right: 0; left: 0; flex-direction: column; height: 100%; z-index: 1; } // Adjust styles for primary navigation &--primary { // List title and item .md-nav__title, .md-nav__item { font-size: px2rem(16px); line-height: 1.5; } // List title - higher specificity is necessary to ensure that the title // inside the drawer is always styled accordingly html & .md-nav__title { position: relative; height: px2rem(112px); padding: px2rem(60px) px2rem(16px) px2rem(4px); background-color: $md-color-black--lightest; color: $md-color-black--light; font-weight: 400; line-height: px2rem(48px); white-space: nowrap; cursor: pointer; // Icon &::before { display: block; position: absolute; top: px2rem(4px); left: px2rem(4px); width: px2rem(40px); height: px2rem(40px); color: $md-color-black--light; } // Main lists ~ .md-nav__list { background-color: $md-color-white; box-shadow: 0 px2rem(1px) 0 $md-color-black--lightest inset; // Remove border for first list item & > .md-nav__item:first-child { border-top: 0; } } // Site title in main navigation &--site { position: relative; background-color: $md-color-primary; color: $md-color-white; // Site logo .md-nav__button { display: block; position: absolute; top: px2rem(4px); left: px2rem(4px); width: px2rem(64px); height: px2rem(64px); font-size: px2rem(48px); } // Hide back arrow icon &::before { display: none; } } } // Adjust for RTL languages html [dir="rtl"] & .md-nav__title { // Icon &::before { right: px2rem(4px); left: initial; } // Site title in main navigation &--site .md-nav__button { right: px2rem(4px); left: initial; } } // List of items .md-nav__list { flex: 1; overflow-y: auto; } // List item .md-nav__item { padding: 0; border-top: px2rem(1px) solid $md-color-black--lightest; // Adjust for RTL languages [dir="rtl"] & { padding: 0; } // Increase spacing to account for icon &--nested > .md-nav__link { padding-right: px2rem(48px); // Adjust for RTL languages [dir="rtl"] & { padding-right: px2rem(16px); padding-left: px2rem(48px); } // Replace icon with right arrow &::after { content: "\E315"; // keyboard_arrow_right // Adjust for RTL languages [dir="rtl"] & { content: "\E314"; // keyboard_arrow_left } } } } // Link inside item .md-nav__link { position: relative; margin-top: 0; padding: px2rem(12px) px2rem(16px); // Rotate icon &::after { position: absolute; top: 50%; right: px2rem(12px); margin-top: px2rem(-12px); color: inherit; font-size: px2rem(24px); // Adjust for RTL languages [dir="rtl"] & { right: initial; left: px2rem(12px); } } } // Table of contents inside navigation .md-nav--secondary { // Set links to static to avoid unnecessary layering .md-nav__link { position: static; } // Set nested navigation for table of contents to static .md-nav { position: static; background-color: transparent; // 3rd level link .md-nav__link { padding-left: px2rem(28px); // Adjust for RTL languages [dir="rtl"] & { padding-right: px2rem(28px); padding-left: initial; } } // 4th level link .md-nav .md-nav__link { padding-left: px2rem(40px); // Adjust for RTL languages [dir="rtl"] & { padding-right: px2rem(40px); padding-left: initial; } } // 5th level link .md-nav .md-nav .md-nav__link { padding-left: px2rem(52px); // Adjust for RTL languages [dir="rtl"] & { padding-right: px2rem(52px); padding-left: initial; } } // 6th level link .md-nav .md-nav .md-nav .md-nav__link { padding-left: px2rem(64px); // Adjust for RTL languages [dir="rtl"] & { padding-right: px2rem(64px); padding-left: initial; } } } } } // Hide nested navigation by default .md-nav__toggle ~ & { display: flex; transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.8, 0, 0.6, 1), opacity 0.125s 0.05s; opacity: 0; // Adjust for RTL languages [dir="rtl"] & { transform: translateX(-100%); } // Just hide navigation, if browser doesn't supports 3D transforms .no-csstransforms3d & { display: none; } } // Expand nested navigation, if toggle is checked .md-nav__toggle:checked ~ & { transform: translateX(0); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.125s 0.125s; opacity: 1; // Just show navigation, if browser doesn't supports 3D transforms .no-csstransforms3d & { display: flex; } } } // [tablet portrait -]: Show table of contents in drawer @include break-to-device(tablet portrait) { // Show link to table of contents - higher specificity is necessary to // display the table of contents inside the drawer html &__link[for="__toc"] { display: block; padding-right: px2rem(48px); // Unrotate icon for table of contents &::after { color: inherit; content: "\E8DE"; // toc } // Hide link to current item + .md-nav__link { display: none; } // Show table of contents & ~ .md-nav { display: flex; } } // Adjust for RTL languages html [dir="rtl"] &__link { padding-right: px2rem(16px); padding-left: px2rem(48px); } // Repository containing source &__source { display: block; padding: 0 px2rem(4px); background-color: mix($md-color-primary, $md-color-black, 75%); color: $md-color-white; } } // [screen +]: Tree-like navigation @include break-from-device(screen) { // Animation is only possible if JavaScript is available, as the max-height // property must be calculated before transitioning transition: max-height 0.25s cubic-bezier(0.86, 0, 0.07, 1); // Hide nested navigation by default .md-nav__toggle ~ & { max-height: 0; overflow: hidden; // Just hide links for accessibility if JavaScript is not available .no-js & { display: none; } } // Expand nested navigation, if toggle is checked .md-nav__toggle:checked ~ & { max-height: 100%; } // Hide titles for nested navigation &__item--nested > .md-nav > &__title { display: none; } // Link inside item - ideally the link display method would be set to // inline on screen, but this doesn't work with text ellipsis &__link { // Item contains a nested list .md-nav__item--nested > &::after { display: inline-block; transform-origin: 0.45em 0.45em; transform-style: preserve-3d; vertical-align: -0.125em; // Only animate icon when JavaScript is available, as the height can // not be animated anyway, and better no fun than half the fun .js & { transition: transform 0.4s; } } // Rotate icon for expanded lists .md-nav__item--nested .md-nav__toggle:checked ~ &::after { transform: rotateX(180deg); } } } }