2016-09-04 17:11:58 +02:00
|
|
|
////
|
|
|
|
/// Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
|
|
|
///
|
|
|
|
/// 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
|
|
|
|
////
|
2016-01-28 23:27:15 +01:00
|
|
|
|
2016-09-04 17:32:12 +02:00
|
|
|
// ----------------------------------------------------------------------------
|
|
|
|
// Navigation
|
|
|
|
// ----------------------------------------------------------------------------
|
2016-01-28 23:27:15 +01:00
|
|
|
|
2016-09-04 17:32:12 +02:00
|
|
|
// Nested navigation
|
2016-08-07 18:01:56 +02:00
|
|
|
.md-nav {
|
2016-09-04 18:13:17 +02:00
|
|
|
font-size: ms(-1);
|
2016-09-23 17:46:16 +02:00
|
|
|
line-height: 1.3;
|
2016-01-28 23:27:15 +01:00
|
|
|
|
2016-09-23 11:56:25 +02:00
|
|
|
// Table of contents
|
|
|
|
&--secondary {
|
|
|
|
border-left: px2rem(4px) solid $md-color-primary;
|
|
|
|
}
|
|
|
|
|
2016-09-23 17:46:16 +02:00
|
|
|
// List title
|
2016-09-04 18:13:17 +02:00
|
|
|
&__title {
|
2016-09-23 11:56:25 +02:00
|
|
|
display: block;
|
|
|
|
padding: 1.2rem 1.2rem 0;
|
|
|
|
font-weight: 700;
|
2016-09-23 17:46:16 +02:00
|
|
|
text-overflow: ellipsis;
|
|
|
|
overflow: hidden;
|
2016-01-28 23:27:15 +01:00
|
|
|
|
2016-09-23 11:56:25 +02:00
|
|
|
// Icon, hidden by default
|
|
|
|
&::before {
|
|
|
|
@extend %md-icon, %md-icon__button;
|
|
|
|
|
|
|
|
display: none;
|
|
|
|
content: "arrow_back";
|
|
|
|
}
|
2016-08-07 18:01:56 +02:00
|
|
|
}
|
|
|
|
|
2016-09-04 17:32:12 +02:00
|
|
|
// List of items
|
2016-08-07 18:01:56 +02:00
|
|
|
&__list {
|
2016-09-04 18:13:17 +02:00
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
2016-08-07 18:01:56 +02:00
|
|
|
list-style: none;
|
2016-09-23 11:56:25 +02:00
|
|
|
}
|
2016-01-28 23:27:15 +01:00
|
|
|
|
2016-09-23 11:56:25 +02:00
|
|
|
// List item
|
|
|
|
&__item {
|
|
|
|
padding: 0.625em 1.2rem 0;
|
2016-02-16 15:51:07 +01:00
|
|
|
|
2016-09-23 11:56:25 +02:00
|
|
|
// Add bottom spacing to last item
|
|
|
|
&:last-child {
|
2016-09-23 17:46:16 +02:00
|
|
|
padding-bottom: 1.2rem;
|
2016-01-28 23:27:15 +01:00
|
|
|
}
|
|
|
|
|
2016-09-23 11:56:25 +02:00
|
|
|
// 2nd+ level items
|
|
|
|
& & {
|
|
|
|
padding-right: 0;
|
2016-08-07 18:01:56 +02:00
|
|
|
|
2016-09-23 11:56:25 +02:00
|
|
|
// Remove bottom spacing for nested items
|
|
|
|
&:last-child {
|
|
|
|
padding-bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
2016-08-07 18:01:56 +02:00
|
|
|
}
|
|
|
|
|
2016-09-04 17:32:12 +02:00
|
|
|
// Link inside item
|
2016-08-07 18:01:56 +02:00
|
|
|
&__link {
|
|
|
|
display: block;
|
2016-09-04 17:11:58 +02:00
|
|
|
transition: color 0.125s;
|
2016-08-07 18:01:56 +02:00
|
|
|
text-overflow: ellipsis;
|
2016-09-23 11:56:25 +02:00
|
|
|
cursor: pointer;
|
2016-09-04 17:11:58 +02:00
|
|
|
overflow: hidden;
|
2016-02-16 15:51:07 +01:00
|
|
|
|
2016-09-23 11:56:25 +02:00
|
|
|
// Icon
|
|
|
|
&::after {
|
|
|
|
@extend %md-icon;
|
|
|
|
|
|
|
|
// Item contains a nested list
|
|
|
|
.md-nav__item--nested > & {
|
|
|
|
content: "expand_more";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-09-23 17:46:16 +02:00
|
|
|
// 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"] {
|
2016-09-23 11:56:25 +02:00
|
|
|
display: none;
|
|
|
|
|
|
|
|
// Hide table of contents by default
|
2016-09-23 17:46:16 +02:00
|
|
|
& ~ .md-nav {
|
2016-09-23 11:56:25 +02:00
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Hide icon for current item
|
|
|
|
+ .md-nav__link::after {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-09-04 17:32:12 +02:00
|
|
|
// Marked item
|
2016-08-07 18:01:56 +02:00
|
|
|
&--marked {
|
|
|
|
color: $md-color-black--light;
|
|
|
|
}
|
2016-01-28 23:27:15 +01:00
|
|
|
|
2016-09-04 17:32:12 +02:00
|
|
|
// Current or hovered item
|
2016-08-07 18:01:56 +02:00
|
|
|
&:hover,
|
|
|
|
&:active,
|
|
|
|
&--active {
|
|
|
|
color: $md-color-accent;
|
2016-01-28 23:27:15 +01:00
|
|
|
}
|
|
|
|
}
|
2016-09-23 11:56:25 +02:00
|
|
|
|
2016-09-23 17:46:16 +02:00
|
|
|
// Repository containing source
|
|
|
|
&__source {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
2016-09-23 11:56:25 +02:00
|
|
|
// [tablet -]: Layered navigation
|
|
|
|
@include break-to-device(tablet) {
|
|
|
|
|
|
|
|
// 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 {
|
|
|
|
background: $md-color-white;
|
|
|
|
|
|
|
|
// Move subsequent navigations off
|
|
|
|
.md-nav__toggle ~ .md-nav {
|
|
|
|
@include z-depth(4);
|
|
|
|
|
|
|
|
left: 0.4rem;
|
|
|
|
background: $md-color-white;
|
|
|
|
}
|
|
|
|
|
2016-09-23 17:46:16 +02:00
|
|
|
// List title - higher specificity is necessary to ensure that the title
|
|
|
|
// inside the drawer is always styled accordingly.
|
|
|
|
html & .md-nav__title {
|
2016-09-23 11:56:25 +02:00
|
|
|
position: relative;
|
|
|
|
padding: 0.4rem 1.6rem 0.4rem 5.6rem;
|
|
|
|
background: $md-color-black--lightest;
|
|
|
|
color: $md-color-black--light;
|
|
|
|
font-size: 1.8rem;
|
|
|
|
font-weight: 400;
|
|
|
|
line-height: 4.8rem;
|
|
|
|
white-space: nowrap;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
// Icon
|
|
|
|
&::before {
|
|
|
|
display: block;
|
|
|
|
position: absolute;
|
|
|
|
left: 0.4rem;
|
|
|
|
width: 4.0rem;
|
|
|
|
height: 4.0rem;
|
|
|
|
color: $md-color-black--light;
|
|
|
|
}
|
2016-09-23 17:46:16 +02:00
|
|
|
|
|
|
|
// Remove border for first ist item
|
|
|
|
~ .md-nav__list > .md-nav__item:first-child {
|
|
|
|
border-top: 0;
|
|
|
|
}
|
2016-09-23 11:56:25 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// List of items
|
|
|
|
.md-nav__list {
|
|
|
|
flex: 1;
|
|
|
|
overflow-y: scroll;
|
|
|
|
}
|
|
|
|
|
|
|
|
// List item
|
|
|
|
.md-nav__item {
|
|
|
|
padding: 0;
|
|
|
|
border-top: 0.1rem solid $md-color-black--lightest;
|
2016-09-23 17:46:16 +02:00
|
|
|
|
|
|
|
// Increase spacing to account for icon
|
|
|
|
&--nested > .md-nav__link {
|
|
|
|
padding-right: 4.8rem;
|
|
|
|
}
|
2016-09-23 11:56:25 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// Link inside item
|
|
|
|
.md-nav__link {
|
|
|
|
position: relative;
|
|
|
|
padding: 1.6rem;
|
|
|
|
|
|
|
|
// Rotate icon
|
|
|
|
&::after {
|
|
|
|
position: absolute;
|
2016-09-23 17:46:16 +02:00
|
|
|
top: 50%;
|
2016-09-23 11:56:25 +02:00
|
|
|
right: 1.2rem;
|
2016-09-23 17:46:16 +02:00
|
|
|
transform: translateY(-50%) rotate(-90deg);
|
|
|
|
transition: inherit;
|
2016-09-23 11:56:25 +02:00
|
|
|
color: $md-color-black--light;
|
|
|
|
font-size: 2.4rem;
|
2016-09-23 17:46:16 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// Color of icon should inherit link color on hover
|
|
|
|
&:hover::after {
|
|
|
|
color: $md-color-accent;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Set nested navigation for table of contents to static
|
|
|
|
.md-nav--secondary .md-nav {
|
|
|
|
position: static;
|
|
|
|
|
|
|
|
// 3rd level link
|
|
|
|
.md-nav__link {
|
|
|
|
padding-left: 2.8rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 4th level link
|
|
|
|
.md-nav .md-nav__link {
|
|
|
|
padding-left: 4.0rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 5th level link
|
|
|
|
.md-nav .md-nav .md-nav__link {
|
|
|
|
padding-left: 5.2rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 6th level link
|
|
|
|
.md-nav .md-nav .md-nav .md-nav__link {
|
|
|
|
padding-left: 6.4rem;
|
2016-09-23 11:56:25 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Hide nested navigation by default
|
|
|
|
.md-nav__toggle ~ & {
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
// Animate appearance, if browser supports 3D transforms
|
|
|
|
.csstransforms3d & {
|
|
|
|
display: block;
|
|
|
|
transform: translate3d(100%, 0, 0);
|
|
|
|
transition: transform 0.25s cubic-bezier(0.8, 0.0, 0.6, 1.0),
|
|
|
|
opacity 0.125s 0.05s;
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Expand nested navigation, if toggle is checked
|
|
|
|
.md-nav__toggle:checked ~ & {
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
// Animate appearance, if browser supports 3D transforms
|
|
|
|
.csstransforms3d & {
|
|
|
|
transform: translate3d(0, 0, 0);
|
|
|
|
transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
|
|
|
|
opacity 0.125s 0.125s;
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
2016-09-23 17:46:16 +02:00
|
|
|
|
|
|
|
// List item
|
|
|
|
.md-nav__title,
|
|
|
|
.md-nav__item {
|
|
|
|
font-size: 1.6rem;
|
|
|
|
line-height: 1.4;
|
|
|
|
}
|
2016-09-23 11:56:25 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// [tablet portrait -]: Show table of contents in drawer
|
|
|
|
@include break-to-device(tablet portrait) {
|
|
|
|
|
|
|
|
// Remove border on secondary navigation
|
|
|
|
&--secondary {
|
|
|
|
border-left: 0;
|
|
|
|
}
|
|
|
|
|
2016-09-23 17:46:16 +02:00
|
|
|
// Show link to table of contents - higher specificity is necessary to
|
|
|
|
// display the table of contents inside the drawer.
|
|
|
|
html &__link[for="toc"] {
|
2016-09-23 11:56:25 +02:00
|
|
|
display: block;
|
|
|
|
|
|
|
|
// Unrotate icon for table of contents
|
|
|
|
&::after {
|
2016-09-23 17:46:16 +02:00
|
|
|
transform: translateY(-50%);
|
|
|
|
color: $md-color-accent;
|
2016-09-23 11:56:25 +02:00
|
|
|
content: "toc";
|
|
|
|
}
|
|
|
|
|
|
|
|
// Hide link to current item
|
|
|
|
+ .md-nav__link {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Show table of contents
|
2016-09-23 17:46:16 +02:00
|
|
|
& ~ .md-nav {
|
2016-09-23 11:56:25 +02:00
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
}
|
2016-09-23 17:46:16 +02:00
|
|
|
|
|
|
|
// Repository containing source
|
|
|
|
&__source {
|
|
|
|
display: block;
|
|
|
|
padding: 0.4rem;
|
|
|
|
background: $md-color-black;
|
|
|
|
color: $md-color-white;
|
|
|
|
}
|
2016-09-23 11:56:25 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// [screen +]: Tree-like navigation
|
|
|
|
@include break-from-device(screen) {
|
|
|
|
|
|
|
|
// Hide nested navigation by default
|
|
|
|
.md-nav__toggle ~ & {
|
|
|
|
max-height: 0;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Expand nested navigation, if toggle is checked
|
|
|
|
.md-nav__toggle:checked ~ & {
|
|
|
|
max-height: 100%;
|
|
|
|
}
|
|
|
|
|
2016-09-23 17:46:16 +02:00
|
|
|
// List title
|
2016-09-23 11:56:25 +02:00
|
|
|
&__title {
|
|
|
|
|
|
|
|
// Hide titles for nested navigation
|
|
|
|
& + .md-nav__list & {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Link inside item
|
|
|
|
&__link {
|
|
|
|
|
|
|
|
// Item contains a nested list
|
|
|
|
.md-nav__item--nested > &::after {
|
|
|
|
display: inline-block;
|
|
|
|
transform-origin: 0.5em 0.475em;
|
|
|
|
transition: transform 0.25s;
|
|
|
|
vertical-align: -0.125em;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Rotate icon for expanded lists
|
|
|
|
.md-nav__item--nested .md-nav__toggle:checked ~ &::after {
|
|
|
|
transform: rotate(180deg);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2016-09-04 17:11:58 +02:00
|
|
|
}
|