mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
682 lines
16 KiB
SCSS
682 lines
16 KiB
SCSS
////
|
|
/// Copyright (c) 2016-2020 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
|
|
////
|
|
|
|
// ----------------------------------------------------------------------------
|
|
// Rules
|
|
// ----------------------------------------------------------------------------
|
|
|
|
// Icon definitions
|
|
:root {
|
|
--md-nav-icon--prev: svg-load("@mdi/svg/svg/arrow-left.svg");
|
|
--md-nav-icon--next: svg-load("@mdi/svg/svg/chevron-right.svg");
|
|
--md-toc-icon: svg-load("@mdi/svg/svg/table-of-contents.svg");
|
|
}
|
|
|
|
// ----------------------------------------------------------------------------
|
|
|
|
// Navigation
|
|
.md-nav {
|
|
font-size: px2rem(14px);
|
|
line-height: 1.3;
|
|
|
|
// Navigation title
|
|
&__title {
|
|
display: block;
|
|
padding: 0 px2rem(12px);
|
|
overflow: hidden;
|
|
font-weight: 700;
|
|
text-overflow: ellipsis;
|
|
|
|
// Navigaton button
|
|
.md-nav__button {
|
|
display: none;
|
|
|
|
// Stretch images based on height, as it's the smaller dimension
|
|
img {
|
|
width: auto;
|
|
height: 100%;
|
|
}
|
|
|
|
// Button with logo, pointing to `config.site_url`
|
|
&.md-logo {
|
|
|
|
// Image or icon
|
|
img,
|
|
svg {
|
|
display: block;
|
|
width: px2rem(48px);
|
|
height: px2rem(48px);
|
|
fill: currentColor;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Navigation list
|
|
&__list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
// Navigation item
|
|
&__item {
|
|
padding: 0 px2rem(12px);
|
|
|
|
// Navigation item on level 2
|
|
& & {
|
|
padding-right: 0;
|
|
|
|
// Adjust for right-to-left languages
|
|
[dir="rtl"] & {
|
|
padding-right: px2rem(12px);
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Navigation link
|
|
&__link {
|
|
display: block;
|
|
margin-top: 0.625em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
transition: color 125ms;
|
|
scroll-snap-align: start;
|
|
|
|
// Link in blurred state
|
|
&[data-md-state="blur"] {
|
|
color: var(--md-default-fg-color--light);
|
|
}
|
|
|
|
// Active link
|
|
.md-nav__item &--active {
|
|
color: var(--md-typeset-a-color);
|
|
}
|
|
|
|
// Navigation link in nested list
|
|
.md-nav__item--nested > & {
|
|
color: inherit;
|
|
}
|
|
|
|
// Navigation link on focus/hover
|
|
&:focus,
|
|
&:hover {
|
|
color: var(--md-accent-fg-color);
|
|
}
|
|
|
|
// Navigation link to table of contents
|
|
.md-nav--primary &[for="__toc"] {
|
|
display: none;
|
|
|
|
// Table of contents icon
|
|
.md-icon::after {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
mask-image: var(--md-toc-icon);
|
|
background-color: currentColor;
|
|
}
|
|
|
|
// Hide table of contents
|
|
~ .md-nav {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Repository information container
|
|
&__source {
|
|
display: none;
|
|
}
|
|
|
|
// [tablet -]: Layered navigation
|
|
@include break-to-device(tablet) {
|
|
|
|
// Primary and nested navigation
|
|
&--primary,
|
|
&--primary & {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background-color: var(--md-default-bg-color);
|
|
}
|
|
|
|
// Primary navigation
|
|
&--primary {
|
|
|
|
// Navigation title and item
|
|
.md-nav__title,
|
|
.md-nav__item {
|
|
font-size: px2rem(16px);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
// Navigation title
|
|
.md-nav__title {
|
|
position: relative;
|
|
height: px2rem(112px);
|
|
padding: px2rem(60px) px2rem(16px) px2rem(4px);
|
|
color: var(--md-default-fg-color--light);
|
|
font-weight: 400;
|
|
line-height: px2rem(48px);
|
|
white-space: nowrap;
|
|
background-color: var(--md-default-fg-color--lightest);
|
|
cursor: pointer;
|
|
|
|
// Navigation icon
|
|
.md-nav__icon {
|
|
position: absolute;
|
|
top: px2rem(8px);
|
|
left: px2rem(8px);
|
|
display: block;
|
|
width: px2rem(24px);
|
|
height: px2rem(24px);
|
|
margin: px2rem(4px);
|
|
|
|
// Adjust for right-to-left languages
|
|
[dir="rtl"] & {
|
|
right: px2rem(8px);
|
|
left: initial;
|
|
}
|
|
|
|
// Navigation icon in link to previous level
|
|
&::after {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: currentColor;
|
|
mask-image: var(--md-nav-icon--prev);
|
|
mask-repeat: no-repeat;
|
|
mask-size: contain;
|
|
content: "";
|
|
}
|
|
}
|
|
|
|
// Navigation list
|
|
~ .md-nav__list {
|
|
overflow-y: auto;
|
|
background-color: var(--md-default-bg-color);
|
|
box-shadow:
|
|
0 px2rem(1px) 0 var(--md-default-fg-color--lightest) inset;
|
|
scroll-snap-type: y mandatory;
|
|
touch-action: pan-y;
|
|
|
|
// Omit border on first child
|
|
> :first-child {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
// Top-level navigation title
|
|
&[for="__drawer"] {
|
|
color: var(--md-primary-bg-color);
|
|
background-color: var(--md-primary-fg-color);
|
|
}
|
|
|
|
// Button with logo, pointing to `config.site_url`
|
|
.md-logo {
|
|
position: absolute;
|
|
top: px2rem(4px);
|
|
left: px2rem(4px);
|
|
display: block;
|
|
margin: px2rem(4px);
|
|
padding: px2rem(8px);
|
|
|
|
// Adjust for right-to-left languages
|
|
[dir="rtl"] & {
|
|
right: px2rem(4px);
|
|
left: initial;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Navigation list
|
|
.md-nav__list {
|
|
flex: 1;
|
|
}
|
|
|
|
// Navigation item
|
|
.md-nav__item {
|
|
padding: 0;
|
|
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
|
|
|
|
// Navigation link in nested navigation
|
|
&--nested > .md-nav__link {
|
|
padding-right: px2rem(48px);
|
|
|
|
// Adjust for right-to-left languages
|
|
[dir="rtl"] & {
|
|
padding-right: px2rem(16px);
|
|
padding-left: px2rem(48px);
|
|
}
|
|
}
|
|
|
|
// Navigation link in active navigation
|
|
&--active > .md-nav__link {
|
|
color: var(--md-typeset-a-color);
|
|
|
|
// Navigation link on focus/hover
|
|
&:focus,
|
|
&:hover {
|
|
color: var(--md-accent-fg-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Navigation link
|
|
.md-nav__link {
|
|
position: relative;
|
|
margin-top: 0;
|
|
padding: px2rem(12px) px2rem(16px);
|
|
|
|
// Navigation icon
|
|
.md-nav__icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: px2rem(12px);
|
|
width: px2rem(24px);
|
|
height: px2rem(24px);
|
|
margin-top: px2rem(-12px);
|
|
color: inherit;
|
|
font-size: px2rem(24px);
|
|
|
|
// Adjust for right-to-left languages
|
|
[dir="rtl"] & {
|
|
right: initial;
|
|
left: px2rem(12px);
|
|
}
|
|
|
|
// Navigation icon in link to next level
|
|
&::after {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: currentColor;
|
|
mask-image: var(--md-nav-icon--next);
|
|
mask-repeat: no-repeat;
|
|
mask-size: contain;
|
|
content: "";
|
|
}
|
|
}
|
|
}
|
|
|
|
// Flip icon vertically
|
|
.md-nav__icon {
|
|
|
|
// Adjust for right-to-left languages
|
|
[dir="rtl"] &::after {
|
|
transform: scale(-1);
|
|
}
|
|
}
|
|
|
|
// Table of contents contained in primary navigation
|
|
.md-nav--secondary {
|
|
|
|
// Navigation link - omit unnecessary layering
|
|
.md-nav__link {
|
|
position: static;
|
|
}
|
|
|
|
// Navigation on level 2-6
|
|
.md-nav {
|
|
position: static;
|
|
background-color: transparent;
|
|
|
|
// Navigation link on level 3
|
|
.md-nav__link {
|
|
padding-left: px2rem(28px);
|
|
|
|
// Adjust for right-to-left languages
|
|
[dir="rtl"] & {
|
|
padding-right: px2rem(28px);
|
|
padding-left: initial;
|
|
}
|
|
}
|
|
|
|
// Navigation link on level 4
|
|
.md-nav .md-nav__link {
|
|
padding-left: px2rem(40px);
|
|
|
|
// Adjust for right-to-left languages
|
|
[dir="rtl"] & {
|
|
padding-right: px2rem(40px);
|
|
padding-left: initial;
|
|
}
|
|
}
|
|
|
|
// Navigation link on level 5
|
|
.md-nav .md-nav .md-nav__link {
|
|
padding-left: px2rem(52px);
|
|
|
|
// Adjust for right-to-left languages
|
|
[dir="rtl"] & {
|
|
padding-right: px2rem(52px);
|
|
padding-left: initial;
|
|
}
|
|
}
|
|
|
|
// Navigation link on level 6
|
|
.md-nav .md-nav .md-nav .md-nav__link {
|
|
padding-left: px2rem(64px);
|
|
|
|
// Adjust for right-to-left languages
|
|
[dir="rtl"] & {
|
|
padding-right: px2rem(64px);
|
|
padding-left: initial;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Table of contents
|
|
&--secondary {
|
|
background-color: transparent;
|
|
}
|
|
|
|
// Toggle for nested navigation
|
|
&__toggle ~ & {
|
|
display: flex;
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
transition:
|
|
transform 250ms cubic-bezier(0.8, 0, 0.6, 1),
|
|
opacity 125ms 50ms;
|
|
|
|
// Adjust for right-to-left languages
|
|
[dir="rtl"] & {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
// Show nested navigation when toggle is active
|
|
&__toggle:checked ~ & {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
transition:
|
|
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
opacity 125ms 125ms;
|
|
|
|
// Navigation list
|
|
> .md-nav__list {
|
|
// Hack: promote to own layer to reduce jitter
|
|
backface-visibility: hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
// [tablet portrait -]: Layered navigation with table of contents
|
|
@include break-to-device(tablet portrait) {
|
|
|
|
// Show link to table of contents
|
|
&--primary &__link[for="__toc"] {
|
|
display: block;
|
|
padding-right: px2rem(48px);
|
|
|
|
// Adjust for right-to-left languages
|
|
[dir="rtl"] & {
|
|
padding-right: px2rem(16px);
|
|
padding-left: px2rem(48px);
|
|
}
|
|
|
|
// Show table of contents icon
|
|
.md-icon::after {
|
|
content: "";
|
|
}
|
|
|
|
// Hide navigation link to current page
|
|
+ .md-nav__link {
|
|
display: none;
|
|
}
|
|
|
|
// Show table of contents
|
|
~ .md-nav {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
// Repository information container
|
|
&__source {
|
|
display: block;
|
|
padding: 0 px2rem(4px);
|
|
color: var(--md-primary-bg-color);
|
|
background-color: var(--md-primary-fg-color--dark);
|
|
}
|
|
}
|
|
|
|
// [tablet landscape]: Layered navigation with table of contents
|
|
@include break-at-device(tablet landscape) {
|
|
|
|
// Show link to integrated table of contents
|
|
&--integrated &__link[for="__toc"] {
|
|
display: block;
|
|
padding-right: px2rem(48px);
|
|
scroll-snap-align: initial;
|
|
|
|
// Adjust for right-to-left languages
|
|
[dir="rtl"] & {
|
|
padding-right: px2rem(16px);
|
|
padding-left: px2rem(48px);
|
|
}
|
|
|
|
// Show table of contents icon
|
|
.md-icon::after {
|
|
content: "";
|
|
}
|
|
|
|
// Hide navigation link to current page
|
|
+ .md-nav__link {
|
|
display: none;
|
|
}
|
|
|
|
// Show table of contents
|
|
~ .md-nav {
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
|
|
// [tablet landscape +]: Tree-like table of contents
|
|
@include break-from-device(tablet landscape) {
|
|
|
|
// Navigation title
|
|
&--secondary &__title {
|
|
|
|
// Adjust snapping behavior
|
|
&[for="__toc"] {
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
// Hide navigation icon
|
|
.md-nav__icon {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// [screen +]: Tree-like navigation
|
|
@include break-from-device(screen) {
|
|
transition: max-height 250ms cubic-bezier(0.86, 0, 0.07, 1);
|
|
|
|
// Navigation title
|
|
&--primary &__title {
|
|
|
|
// Adjust snapping behavior
|
|
&[for="__drawer"] {
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
// Hide navigation icon
|
|
.md-nav__icon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Hide toggle for nested navigation
|
|
&__toggle ~ & {
|
|
display: none;
|
|
}
|
|
|
|
// Show nested navigation when toggle is active or indeterminate
|
|
&__toggle:checked ~ &,
|
|
&__toggle:indeterminate ~ & {
|
|
display: block;
|
|
}
|
|
|
|
// Hide navigation title in nested navigation
|
|
&__item--nested > & > &__title {
|
|
display: none;
|
|
}
|
|
|
|
// Navigation section
|
|
&__item--section {
|
|
display: block;
|
|
margin: 1.25em 0;
|
|
|
|
// Adjust spacing on last child
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// Hide navigation link, as sections are always expanded
|
|
> .md-nav__link {
|
|
display: none;
|
|
}
|
|
|
|
// Navigation
|
|
> .md-nav {
|
|
display: block;
|
|
|
|
// Navigation title
|
|
> .md-nav__title {
|
|
display: block;
|
|
padding: 0;
|
|
pointer-events: none;
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
// Adjust spacing on next level item
|
|
> .md-nav__list > .md-nav__item {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Navigation icon
|
|
&__icon {
|
|
float: right;
|
|
width: px2rem(18px);
|
|
height: px2rem(18px);
|
|
transition: transform 250ms;
|
|
|
|
// Adjust for right-to-left languages
|
|
[dir="rtl"] & {
|
|
float: left;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
// Navigation icon content
|
|
&::after {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
vertical-align: px2rem(-2px);
|
|
background-color: currentColor;
|
|
mask-image: var(--md-nav-icon--next);
|
|
mask-repeat: no-repeat;
|
|
mask-size: contain;
|
|
content: "";
|
|
}
|
|
|
|
// Navigation icon - rotate icon when toggle is active or indeterminate
|
|
.md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link &,
|
|
.md-nav__item--nested .md-nav__toggle:indeterminate ~ .md-nav__link & {
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
|
|
// Modifier for when navigation tabs are rendered
|
|
&--lifted {
|
|
|
|
// Hide nested items on level 1 and site title
|
|
> .md-nav__list > .md-nav__item--nested,
|
|
> .md-nav__title {
|
|
display: none;
|
|
}
|
|
|
|
// Hide level 1 items
|
|
> .md-nav__list > .md-nav__item {
|
|
display: none;
|
|
|
|
// Active parent navigation item
|
|
&--active {
|
|
display: block;
|
|
padding: 0;
|
|
|
|
// Hide nested links
|
|
> .md-nav__link {
|
|
display: none;
|
|
}
|
|
|
|
// Show title and adjust spacing
|
|
> .md-nav > .md-nav__title {
|
|
display: block;
|
|
padding: 0 px2rem(12px);
|
|
pointer-events: none;
|
|
scroll-snap-align: start;
|
|
}
|
|
}
|
|
|
|
// Adjust spacing for navigation item on level 2
|
|
> .md-nav__item {
|
|
padding-right: px2rem(12px);
|
|
}
|
|
}
|
|
|
|
// Hack: Always show active navigation tab on breakpoint screen, despite
|
|
// of checkbox being checked or not. Fixes #1655.
|
|
.md-nav[data-md-level="1"] {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
// Modifier for when table of contents is rendered in primary navigation
|
|
&--integrated &__link[for="__toc"] ~ .md-nav {
|
|
display: block;
|
|
margin-bottom: 1.25em;
|
|
border-left: px2rem(1px) solid var(--md-primary-fg-color);
|
|
|
|
// Hide navigation title
|
|
> .md-nav__title {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|