starred/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2026-08-01 10:18:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

Switched to stylelint-config-rational-order

Browse Source
This commit is contained in:
squidfunk
2020-03-06 15:21:08 +01:00
parent baca54241b
commit 9ffcc05752
24 changed files with 599 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/stylesheets/base/_reset.scss
View File

@@ -50,8 +50,8 @@ body {
// Reset horizontal rules in FF
hr {
overflow: visible;
box-sizing: content-box;
overflow: visible;
}
// Remove gaps in underlined links in iOS >= 8 and Safari >= 8
@@ -119,9 +119,9 @@ th {
button {
margin: 0;
padding: 0;
border: 0;
background: transparent;
font-size: inherit;
background: transparent;
border: 0;
}
// Reset (native) input styles

56
src/assets/stylesheets/base/_typeset.scss
View File

@@ -74,28 +74,28 @@ kbd {
h1 {
margin: 0 0 px2rem(40px);
color: var(--md-default-fg-color--light);
font-size: ms(3);
font-weight: 300;
letter-spacing: -0.01em;
font-size: ms(3);
line-height: 1.3;
letter-spacing: -0.01em;
}
// 2nd level headline
h2 {
margin: px2rem(40px) 0 px2rem(16px);
font-size: ms(2);
font-weight: 300;
letter-spacing: -0.01em;
font-size: ms(2);
line-height: 1.4;
letter-spacing: -0.01em;
}
// 3rd level headline
h3 {
margin: px2rem(32px) 0 px2rem(16px);
font-size: ms(1);
font-weight: 400;
letter-spacing: -0.01em;
font-size: ms(1);
line-height: 1.5;
letter-spacing: -0.01em;
}
// 3rd level headline following an 2nd level headline
@@ -106,8 +106,8 @@ kbd {
// 4th level headline
h4 {
margin: px2rem(16px) 0;
font-size: ms(0);
font-weight: 700;
font-size: ms(0);
letter-spacing: -0.01em;
}
@@ -116,8 +116,8 @@ kbd {
h6 {
margin: px2rem(16px) 0;
color: var(--md-default-fg-color--light);
font-size: ms(-1);
font-weight: 700;
font-size: ms(-1);
letter-spacing: -0.01em;
}
@@ -164,10 +164,10 @@ kbd {
code,
pre,
kbd {
background-color: var(--md-code-bg-color);
color: var(--md-code-fg-color);
font-size: 85%;
direction: ltr;
background-color: var(--md-code-bg-color);
// Wrap text and hide scollbars
@media print {
@@ -181,11 +181,11 @@ kbd {
margin: 0 0.25em * $f;
padding: 0.0625em * $f 0;
word-break: break-word;
border-radius: px2rem(2px);
box-shadow:
+0.25em * $f 0 0 var(--md-code-bg-color),
-0.25em * $f 0 0 var(--md-code-bg-color);
word-break: break-word;
box-decoration-break: clone;
}
@@ -205,9 +205,9 @@ kbd {
a > code {
margin: inherit;
padding: inherit;
border-radius: initial;
background-color: inherit;
color: inherit;
background-color: inherit;
border-radius: initial;
box-shadow: none;
}
@@ -215,8 +215,8 @@ kbd {
pre {
position: relative;
margin: 1em 0;
border-radius: px2rem(2px);
line-height: 1.4;
border-radius: px2rem(2px);
// Hack: reduce jitter
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
@@ -226,12 +226,12 @@ kbd {
display: block;
margin: 0;
padding: px2rem(10.5px) px2rem(12px);
background-color: transparent;
overflow: auto;
font-size: inherit;
word-break: normal;
background-color: transparent;
box-shadow: none;
box-decoration-break: slice;
overflow: auto;
word-break: normal;
// Override native scrollbar styles
&::-webkit-scrollbar {
@@ -272,34 +272,34 @@ kbd {
display: inline-block;
padding: 0 0.5em * $f;
border-radius: px2rem(2px);
font-size: 0.75em;
line-height: 1.5;
vertical-align: text-top;
word-break: break-word;
border-radius: px2rem(2px);
box-shadow:
0 px2rem(2px) 0 px2rem(1px) var(--md-default-fg-color--lighter),
0 px2rem(2px) 0 var(--md-default-fg-color--lighter),
inset 0 px2rem(-2px) px2rem(4px) var(--md-default-bg-color);
word-break: break-word;
vertical-align: text-top;
}
// Text highlighting marker
mark {
margin: 0 0.25em;
padding: 0.0625em 0;
border-radius: px2rem(2px);
word-break: break-word;
background-color: transparentize($clr-yellow-500, 0.5);
border-radius: px2rem(2px);
box-shadow:
+0.25em 0 0 transparentize($clr-yellow-500, 0.5),
-0.25em 0 0 transparentize($clr-yellow-500, 0.5);
word-break: break-word;
box-decoration-break: clone;
}
// Abbreviations
abbr {
border-bottom: px2rem(1px) dotted var(--md-default-fg-color--light);
text-decoration: none;
border-bottom: px2rem(1px) dotted var(--md-default-fg-color--light);
cursor: help;
}
@@ -323,8 +323,8 @@ kbd {
// Blockquotes, possibly nested
blockquote {
padding-left: px2rem(12px);
border-left: px2rem(4px) solid var(--md-default-fg-color--lighter);
color: var(--md-default-fg-color--light);
border-left: px2rem(4px) solid var(--md-default-fg-color--lighter);
// Adjust for right-to-left languages
[dir="rtl"] & {
@@ -420,13 +420,13 @@ kbd {
table:not([class]) {
display: inline-block;
max-width: 100%;
border-radius: px2rem(2px);
background: var(--md-default-bg-color);
overflow: auto;
font-size: ms(-1);
background: var(--md-default-bg-color);
border-radius: px2rem(2px);
box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
0 0 px2rem(1px) hsla(0, 0%, 0%, 0.1);
overflow: auto;
-webkit-overflow-scrolling: touch;
// Due to margin collapse because of the necessary inline-block hack, we
@@ -451,16 +451,16 @@ kbd {
th {
min-width: px2rem(100px);
padding: px2rem(12px) px2rem(16px);
background-color: var(--md-default-fg-color--light);
color: var(--md-default-bg-color);
vertical-align: top;
background-color: var(--md-default-fg-color--light);
}
// Table cells
td {
padding: px2rem(12px) px2rem(16px);
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
vertical-align: top;
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
}
// Table rows

6
src/assets/stylesheets/extensions/_admonition.scss
View File

@@ -31,13 +31,13 @@
.admonition {
margin: 1.5625em 0;
padding: 0 px2rem(12px);
overflow: auto;
font-size: ms(-1);
border-left: px2rem(4px) solid $clr-blue-a200;
border-radius: px2rem(2px);
font-size: ms(-1);
box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
0 0 px2rem(1px) hsla(0, 0%, 0%, 0.1);
overflow: auto;
// Adjust for right-to-left languages
[dir="rtl"] & {
@@ -104,8 +104,8 @@
.admonition-title {
margin: 0 px2rem(-12px);
padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
background-color: transparentize($clr-blue-a200, 0.9);
font-weight: 700;
background-color: transparentize($clr-blue-a200, 0.9);
// Adjust for right-to-left languages
[dir="rtl"] & {

2
src/assets/stylesheets/extensions/_codehilite.scss
View File

@@ -251,9 +251,9 @@ $codehilite-whitespace: transparent;
// Reset spacings
pre {
background-color: transparent;
color: inherit;
text-align: right;
background-color: transparent;
}
}

14
src/assets/stylesheets/extensions/_footnotes.scss
View File

@@ -106,26 +106,26 @@
&::before {
display: inline;
margin: 0 0.2em;
border-left: px2rem(1px) solid var(--md-default-fg-color--lighter);
font-size: 1.25em;
content: "";
vertical-align: px2rem(-5px);
border-left: px2rem(1px) solid var(--md-default-fg-color--lighter);
content: "";
}
}
// Footnote back reference
.footnote-backref {
display: inline-block;
color: var(--md-default-fg-color--lighter);
// Hack: remove Unicode arrow for icon
font-size: 0;
vertical-align: text-bottom;
transform: translateX(px2rem(5px));
opacity: 0;
transition:
transform 250ms 250ms,
color 250ms,
opacity 125ms 250ms;
color: var(--md-default-fg-color--lighter);
// Hack: remove Unicode arrow for icon
font-size: 0;
opacity: 0;
vertical-align: text-bottom;
// Adjust for right-to-left languages
[dir="rtl"] & {

12
src/assets/stylesheets/extensions/_permalinks.scss
View File

@@ -32,15 +32,15 @@
display: inline-block;
margin-left: px2rem(10px);
transform: translate(0, px2rem(5px));
// Hack: If we don't set visibility hidden, the text content of the node
// will include the headerlink character, which is why Google indexes them.
visibility: hidden;
opacity: 0;
transition:
transform 250ms 250ms,
color 250ms,
opacity 125ms 250ms,
visibility 0ms 500ms;
opacity: 0;
// Hack: If we don't set visibility hidden, the text content of the node
// will include the headerlink character, which is why Google indexes them.
visibility: hidden;
// Adjust for RTL languages
[dir="rtl"] & {
@@ -64,13 +64,13 @@
:target .headerlink,
.headerlink:focus {
transform: translate(0, 0);
visibility: visible;
opacity: 1;
transition:
transform 250ms 250ms,
color 250ms,
opacity 125ms 250ms,
visibility 0ms;
opacity: 1;
visibility: visible;
}
// Active or targeted permalink

4
src/assets/stylesheets/extensions/pymdown/_highlight.scss
View File

@@ -33,14 +33,14 @@
// Inline line numbers
[data-linenos] {
&::before {
display: inline-block;
position: sticky;
left: px2rem(-12px);
display: inline-block;
margin-right: px2rem(12px);
margin-left: px2rem(-12px);
padding-left: px2rem(12px);
border-right: px2rem(1px) solid var(--md-default-fg-color--lightest);
color: var(--md-default-fg-color--lighter);
border-right: px2rem(1px) solid var(--md-default-fg-color--lightest);
content: attr(data-linenos);
user-select: none;

14
src/assets/stylesheets/extensions/pymdown/_tabbed.scss
View File

@@ -43,8 +43,8 @@
// Tabbed code block container
.tabbed-set {
display: flex;
position: relative;
display: flex;
flex-wrap: wrap;
margin: 1em 0;
border: px2rem(1px) solid var(--md-default-fg-color--lightest);
@@ -56,8 +56,8 @@
// Active tab label
&:checked + label {
border-color: var(--md-accent-fg-color);
color: var(--md-accent-fg-color);
border-color: var(--md-accent-fg-color);
// Show code tab content
& + .tabbed-content {
@@ -96,14 +96,14 @@
width: auto;
padding: px2rem(12px);
padding-bottom: px2rem(10px);
color: var(--md-default-fg-color--light);
font-weight: 700;
font-size: ms(-1);
border-bottom: px2rem(2px) solid transparent;
cursor: pointer;
transition:
color 125ms,
border 250ms;
border-bottom: px2rem(2px) solid transparent;
color: var(--md-default-fg-color--light);
font-size: ms(-1);
font-weight: 700;
cursor: pointer;
// Hovered tab label
html &:hover {

2
src/assets/stylesheets/extensions/pymdown/_tasklist.scss
View File

@@ -76,8 +76,8 @@
// Hide original checkbox behind icon
[type="checkbox"] {
opacity: 0;
z-index: -1;
opacity: 0;
}
}
}

36
src/assets/stylesheets/layout/_base.scss
View File

@@ -36,7 +36,11 @@ $md-toggle__drawer--checked:
// based on relative ems (rems)
html {
height: 100%;
background-color: var(--md-default-bg-color);
// Hack: some browsers on some operating systems don't account for scroll
// bars when firing media queries, so we need to do this for safety. This
// currently impacts the table of contents component between 1220 and 1234px
// and is to current knowledge not fixable.
overflow-x: hidden;
// Hack: normally, we would set the base font-size to 62.5%, so we can base
// all calculations on 10px, but Chromium and Chrome define a minimal font
// size of 12 if the system language is set to Chinese. For this reason we
@@ -44,11 +48,7 @@ html {
//
// See https://github.com/squidfunk/mkdocs-material/issues/911
font-size: 125%;
// Hack: some browsers on some operating systems don't account for scroll
// bars when firing media queries, so we need to do this for safety. This
// currently impacts the table of contents component between 1220 and 1234px
// and is to current knowledge not fixable.
overflow-x: hidden;
background-color: var(--md-default-bg-color);
// [screen medium +]: Set base font-size to 11px
@include break-from-device(screen medium) {
@@ -63,8 +63,8 @@ html {
// Stretch body to container and leave room for footer
body {
display: flex;
position: relative;
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
@@ -122,9 +122,9 @@ hr {
// Apply ellipsis in case of overflowing text
.md-ellipsis {
display: block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
// ----------------------------------------------------------------------------
@@ -140,15 +140,15 @@ hr {
.md-overlay {
position: fixed;
top: 0;
z-index: 3;
width: 0;
height: 0;
background-color: var(--md-default-fg-color--light);
opacity: 0;
transition:
width 0ms 250ms,
height 0ms 250ms,
opacity 250ms;
background-color: var(--md-default-fg-color--light);
opacity: 0;
z-index: 3;
// [tablet -]: Trigger overlay
@include break-to-device(tablet) {
@@ -157,11 +157,11 @@ hr {
#{$md-toggle__drawer--checked} & {
width: 100%;
height: 100%;
opacity: 1;
transition:
width 0ms,
height 0ms,
opacity 250ms;
opacity: 1;
}
}
}
@@ -175,21 +175,21 @@ hr {
position: fixed;
margin: px2rem(10px);
padding: px2rem(6px) px2rem(10px);
transform: translateY(px2rem(8px));
border-radius: px2rem(2px);
background-color: var(--md-default-fg-color);
color: var(--md-default-bg-color);
font-size: ms(-1);
background-color: var(--md-default-fg-color);
border-radius: px2rem(2px);
transform: translateY(px2rem(8px));
opacity: 0;
// Show skip link on focus
&:focus {
z-index: 10;
transform: translateY(0);
opacity: 1;
transition:
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 175ms 75ms;
opacity: 1;
z-index: 10;
}
}

8
src/assets/stylesheets/layout/_clipboard.scss
View File

@@ -29,15 +29,15 @@
position: absolute;
top: px2rem(8px);
right: px2rem(8px);
z-index: 1;
width: px2rem(24px);
height: px2rem(24px);
transition: color 250ms;
border-radius: px2rem(2px);
color: var(--md-default-fg-color--lightest);
cursor: pointer;
z-index: 1;
border-radius: px2rem(2px);
// Hack: reduce jitter
backface-visibility: hidden;
cursor: pointer;
transition: color 250ms;
// Hide for print
@media print {

4
src/assets/stylesheets/layout/_content.scss
View File

@@ -75,16 +75,16 @@
// Button next to the title
&__button {
float: right;
margin: px2rem(8px) 0;
margin-left: px2rem(8px);
padding: 0;
float: right;
// Adjust for right-to-left languages
[dir="rtl"] & {
float: left;
margin-right: px2rem(8px);
margin-left: initial;
float: left;
// Flip icon vertically
svg {

18
src/assets/stylesheets/layout/_dialog.scss
View File

@@ -28,24 +28,24 @@
.md-dialog {
@include z-depth(2);
display: block;
position: fixed;
right: px2rem(16px);
bottom: px2rem(16px);
left: initial;
z-index: 2;
display: block;
min-width: px2rem(222px);
padding: px2rem(8px) px2rem(12px);
color: var(--md-default-bg-color);
font-size: px2rem(14px);
background: var(--md-default-fg-color);
border: none;
border-radius: px2rem(2px);
transform: translateY(100%);
opacity: 0;
transition:
transform 0ms 400ms,
opacity 400ms;
border: none;
border-radius: px2rem(2px);
background: var(--md-default-fg-color);
color: var(--md-default-bg-color);
font-size: px2rem(14px);
opacity: 0;
z-index: 2;
// Adjust for right-to-left languages
[dir="rtl"] & {
@@ -56,10 +56,10 @@
// Show open dialog
&[data-md-state="open"] {
transform: translateY(0);
opacity: 1;
transition:
transform 400ms cubic-bezier(0.075, 0.85, 0.175, 1),
opacity 400ms;
opacity: 1;
}
// Hide for print

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

@@ -26,8 +26,8 @@
// Application footer
.md-footer {
background-color: var(--md-default-fg-color);
color: var(--md-default-bg-color);
background-color: var(--md-default-fg-color);
// Hide for print
@media print {
@@ -64,8 +64,8 @@
// Link to previous page
&--prev {
width: 25%;
float: left;
width: 25%;
// Adjust for right-to-left languages
[dir="rtl"] & {
@@ -89,8 +89,8 @@
// Link to next page
&--next {
width: 75%;
float: right;
width: 75%;
text-align: right;
// Adjust for right-to-left languages
@@ -165,8 +165,8 @@
// [tablet portrait +]: Show next to social media links
@include break-from-device(tablet portrait) {
max-width: 75%;
float: left;
max-width: 75%;
// Adjust for right-to-left languages
[dir="rtl"] & {
@@ -187,8 +187,8 @@
// [tablet portrait +]: Show next to copyright information
@include break-from-device(tablet portrait) {
padding: px2rem(12px) 0;
float: right;
padding: px2rem(12px) 0;
// Adjust for right-to-left languages
[dir="rtl"] & {
@@ -201,8 +201,8 @@
display: inline-block;
width: px2rem(32px);
height: px2rem(32px);
transition: color 250ms;
text-align: center;
transition: color 250ms;
// Adjust line-height to match height for correct alignment
&::before {

46
src/assets/stylesheets/layout/_header.scss
View File

@@ -30,34 +30,34 @@
top: 0;
right: 0;
left: 0;
z-index: 2;
height: px2rem(48px);
transition:
background-color 250ms,
color 250ms;
background-color: var(--md-primary-fg-color);
color: var(--md-primary-bg-color);
background-color: var(--md-primary-fg-color);
// Hack: reduce jitter by adding a transparent box shadow of the same size
// so the size of the layer doesn't change during animation
box-shadow:
0 0 px2rem(4px) rgba(0, 0, 0, 0),
0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0);
z-index: 2;
transition:
background-color 250ms,
color 250ms;
// Always hide shadow, in case JavaScript is not available
.no-js & {
transition: none;
box-shadow: none;
transition: none;
}
// Show and animate shadow
&[data-md-state="shadow"] {
box-shadow:
0 0 px2rem(4px) rgba(0, 0, 0, 0.1),
0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0.2);
transition:
background-color 250ms,
color 250ms,
box-shadow 250ms;
box-shadow:
0 0 px2rem(4px) rgba(0, 0, 0, 0.1),
0 px2rem(4px) px2rem(8px) rgba(0, 0, 0, 0.2);
}
// Hide for print
@@ -74,11 +74,11 @@
// Icon buttons
&__button {
position: relative;
z-index: 1;
margin: px2rem(4px);
padding: px2rem(8px);
transition: opacity 250ms;
cursor: pointer;
z-index: 1;
transition: opacity 250ms;
// Adjust for right-to-left languages
[dir="rtl"] & {
@@ -145,27 +145,27 @@
// Header topics
&__topic {
display: block;
position: absolute;
display: block;
width: 100%;
padding: 0 px2rem(20px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// Hack: reduce jitter
backface-visibility: hidden;
transition:
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 150ms;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
// Hack: reduce jitter
backface-visibility: hidden;
// Page title
& + & {
z-index: -1;
transform: translateX(px2rem(25px));
opacity: 0;
transition:
transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1),
opacity 150ms;
opacity: 0;
z-index: -1;
pointer-events: none;
// Adjust for right-to-left languages
@@ -193,12 +193,12 @@
// Show page title
&[data-md-state="active"] .md-header-nav__topic {
z-index: -1;
transform: translateX(px2rem(-25px));
opacity: 0;
transition:
transform 400ms cubic-bezier(1, 0.7, 0.1, 0.1),
opacity 150ms;
opacity: 0;
z-index: -1;
pointer-events: none;
// Adjust for right-to-left languages
@@ -208,12 +208,12 @@
// Page title
& + .md-header-nav__topic {
z-index: 0;
transform: translateX(0);
opacity: 1;
transition:
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 150ms;
opacity: 1;
z-index: 0;
pointer-events: initial;
}
}

10
src/assets/stylesheets/layout/_hero.scss
View File

@@ -26,11 +26,11 @@
// Hero teaser
.md-hero {
transition: background 250ms;
background-color: var(--md-primary-fg-color);
overflow: hidden;
color: var(--md-primary-bg-color);
font-size: ms(1);
overflow: hidden;
background-color: var(--md-primary-fg-color);
transition: background 250ms;
// Inner wrapper
&__inner {
@@ -49,12 +49,12 @@
// Fade-out tabs background upon scrolling
[data-md-state="hidden"] & {
pointer-events: none;
transform: translateY(px2rem(12.5px));
opacity: 0;
transition:
transform 0ms 400ms,
opacity 100ms 0ms;
opacity: 0;
pointer-events: none;
}
// Adjust bottom spacing if there are no tabs

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

@@ -33,9 +33,9 @@
&__title {
display: block;
padding: 0 px2rem(12px);
overflow: hidden;
font-weight: 700;
text-overflow: ellipsis;
overflow: hidden;
// Hide buttons by default
.md-nav__button {
@@ -103,10 +103,10 @@
&__link {
display: block;
margin-top: 0.625em;
transition: color 125ms;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
overflow: hidden;
transition: color 125ms;
scroll-snap-align: start;
// Hide link to table of contents by default - this will only match the
@@ -154,14 +154,14 @@
// Stretch primary navigation to drawer
&--primary,
&--primary .md-nav {
display: flex;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
display: flex;
flex-direction: column;
height: 100%;
z-index: 1;
}
// Adjust styles for primary navigation
@@ -179,19 +179,19 @@
position: relative;
height: px2rem(112px);
padding: px2rem(60px) px2rem(16px) px2rem(4px);
background-color: var(--md-default-fg-color--lightest);
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;
// Icon
.md-nav__icon {
display: block;
position: absolute;
top: px2rem(8px);
left: px2rem(8px);
display: block;
width: px2rem(24px);
height: px2rem(24px);
margin: px2rem(4px);
@@ -205,10 +205,10 @@
// Main lists
~ .md-nav__list {
overflow-y: auto;
background-color: var(--md-default-bg-color);
box-shadow:
inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest);
overflow-y: auto;
// Hack: reduce jitter
backface-visibility: hidden;
scroll-snap-type: y mandatory;
@@ -222,15 +222,15 @@
// Site title in main navigation
&[for="__drawer"] {
position: relative;
background-color: var(--md-primary-fg-color);
color: var(--md-primary-bg-color);
background-color: var(--md-primary-fg-color);
// Site logo
.md-nav__button {
display: block;
position: absolute;
top: px2rem(4px);
left: px2rem(4px);
display: block;
margin: px2rem(4px);
padding: px2rem(8px);
font-size: px2rem(48px);
@@ -380,10 +380,10 @@
.md-nav__toggle ~ & {
display: flex;
transform: translateX(100%);
opacity: 0;
transition:
transform 250ms cubic-bezier(0.8, 0, 0.6, 1),
opacity 125ms 50ms;
opacity: 0;
// Adjust for right-to-left languages
[dir="rtl"] & {
@@ -394,10 +394,10 @@
// Expand nested navigation, if toggle is checked
.md-nav__toggle:checked ~ & {
transform: translateX(0);
opacity: 1;
transition:
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 125ms 125ms;
opacity: 1;
}
}
@@ -431,8 +431,8 @@
&__source {
display: block;
padding: 0 px2rem(4px);
background-color: var(--md-primary-fg-color--dark);
color: var(--md-primary-bg-color);
background-color: var(--md-primary-fg-color--dark);
}
}
@@ -489,8 +489,8 @@
// Icon
&__icon {
height: px2rem(18px);
float: right;
height: px2rem(18px);
transition: transform 250ms;
// Inline icon and adjust to match font size

70
src/assets/stylesheets/layout/_search.scss
View File

@@ -48,8 +48,8 @@ $md-toggle__search--checked:
// Search modal overlay
&__overlay {
opacity: 0;
z-index: 1;
opacity: 0;
// [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) {
@@ -58,13 +58,13 @@ $md-toggle__search--checked:
left: px2rem(-44px);
width: px2rem(40px);
height: px2rem(40px);
overflow: hidden;
background-color: var(--md-default-bg-color);
border-radius: px2rem(20px);
transform-origin: center;
transition:
transform 300ms 100ms,
opacity 200ms 200ms;
border-radius: px2rem(20px);
background-color: var(--md-default-bg-color);
overflow: hidden;
pointer-events: none;
// Adjust for right-to-left languages
@@ -75,10 +75,10 @@ $md-toggle__search--checked:
// Expanded overlay
#{$md-toggle__search--checked} & {
opacity: 1;
transition:
transform 400ms,
opacity 100ms;
opacity: 1;
}
}
@@ -108,12 +108,12 @@ $md-toggle__search--checked:
left: 0;
width: 0;
height: 0;
background-color: var(--md-default-fg-color--light);
cursor: pointer;
transition:
width 0ms 250ms,
height 0ms 250ms,
opacity 250ms;
background-color: var(--md-default-fg-color--light);
cursor: pointer;
// Adjust for right-to-left languages
[dir="rtl"] & {
@@ -125,11 +125,11 @@ $md-toggle__search--checked:
#{$md-toggle__search--checked} & {
width: 100%;
height: 100%;
opacity: 1;
transition:
width 0ms,
height 0ms,
opacity 250ms;
opacity: 1;
}
}
}
@@ -144,27 +144,27 @@ $md-toggle__search--checked:
position: fixed;
top: 0;
left: 100%;
z-index: 2;
width: 100%;
height: 100%;
transform: translateX(5%);
opacity: 0;
transition:
right 0ms 300ms,
left 0ms 300ms,
transform 150ms 150ms cubic-bezier(0.4, 0, 0.2, 1),
opacity 150ms 150ms;
opacity: 0;
z-index: 2;
// Active search modal
#{$md-toggle__search--checked} & {
left: 0;
transform: translateX(0);
opacity: 1;
transition:
right 0ms 0ms,
left 0ms 0ms,
transform 150ms 150ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 150ms 150ms;
opacity: 1;
// Adjust for right-to-left languages
[dir="rtl"] & {
@@ -184,9 +184,9 @@ $md-toggle__search--checked:
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
position: relative;
float: right;
width: px2rem(234px);
padding: px2rem(2px) 0;
float: right;
transition: width 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
// Adjust for right-to-left languages
@@ -223,9 +223,9 @@ $md-toggle__search--checked:
// Search input
&__input {
position: relative;
z-index: 2;
padding: 0 px2rem(44px) 0 px2rem(72px);
text-overflow: ellipsis;
z-index: 2;
// Adjust for right-to-left languages
[dir="rtl"] & {
@@ -260,13 +260,13 @@ $md-toggle__search--checked:
width: 100%;
height: px2rem(36px);
padding-left: px2rem(44px);
color: inherit;
font-size: ms(0);
background-color: var(--md-default-fg-color--lighter);
border-radius: px2rem(2px);
transition:
background-color 250ms,
color 250ms;
border-radius: px2rem(2px);
background-color: var(--md-default-fg-color--lighter);
color: inherit;
font-size: ms(0);
// Adjust for right-to-left languages
[dir="rtl"] & {
@@ -290,10 +290,10 @@ $md-toggle__search--checked:
// Set light background on active search field
#{$md-toggle__search--checked} & {
border-radius: px2rem(2px) px2rem(2px) 0 0;
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color);
text-overflow: clip;
background-color: var(--md-default-bg-color);
border-radius: px2rem(2px) px2rem(2px) 0 0;
// Icon and placeholder color in active state
+ .md-search__icon,
@@ -307,13 +307,13 @@ $md-toggle__search--checked:
// Icon
&__icon {
position: absolute;
z-index: 2;
width: px2rem(24px);
height: px2rem(24px);
cursor: pointer;
transition:
color 250ms,
opacity 250ms;
cursor: pointer;
z-index: 2;
// Hovered icon
&:hover {
@@ -368,10 +368,10 @@ $md-toggle__search--checked:
top: px2rem(6px);
right: px2rem(10px);
transform: scale(0.75);
opacity: 0;
transition:
transform 150ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 150ms;
opacity: 0;
pointer-events: none;
// Adjust for right-to-left languages
@@ -409,10 +409,10 @@ $md-toggle__search--checked:
// Search output container
&__output {
position: absolute;
width: 100%;
border-radius: 0 0 px2rem(2px) px2rem(2px);
overflow: hidden;
z-index: 1;
width: 100%;
overflow: hidden;
border-radius: 0 0 px2rem(2px) px2rem(2px);
// [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) {
@@ -423,8 +423,8 @@ $md-toggle__search--checked:
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
top: px2rem(38px);
transition: opacity 400ms;
opacity: 0;
transition: opacity 400ms;
// Show search output in active state
#{$md-toggle__search--checked} & {
@@ -438,9 +438,9 @@ $md-toggle__search--checked:
// Wrapper for scrolling on overflow
&__scrollwrap {
height: 100%;
overflow-y: auto;
background-color: var(--md-default-bg-color);
box-shadow: inset 0 px2rem(1px) 0 var(--md-default-fg-color--lightest);
overflow-y: auto;
// Hack: reduce jitter
backface-visibility: hidden;
scroll-snap-type: y mandatory;
@@ -497,10 +497,10 @@ $md-toggle__search--checked:
// Search metadata
&__meta {
padding: 0 px2rem(16px);
background-color: var(--md-default-fg-color--lightest);
color: var(--md-default-fg-color--light);
font-size: ms(-1);
line-height: px2rem(36px);
background-color: var(--md-default-fg-color--lightest);
scroll-snap-align: start;
// [tablet landscape +]: Increase left indent
@@ -519,8 +519,8 @@ $md-toggle__search--checked:
&__list {
margin: 0;
padding: 0;
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
list-style: none;
border-top: px2rem(1px) solid var(--md-default-fg-color--lightest);
}
// List item
@@ -531,9 +531,9 @@ $md-toggle__search--checked:
// Link inside item
&__link {
display: block;
transition: background 250ms;
outline: 0;
overflow: hidden;
outline: 0;
transition: background 250ms;
scroll-snap-align: start;
// Focused or hovered link
@@ -576,8 +576,8 @@ $md-toggle__search--checked:
// Title
.md-search-result__title {
margin: px2rem(11px) 0;
font-size: ms(0);
font-weight: 400;
font-size: ms(0);
line-height: 1.4;
}
}
@@ -611,8 +611,8 @@ $md-toggle__search--checked:
// Title
&__title {
margin: 0.5em 0;
font-size: ms(-1);
font-weight: 700;
font-size: ms(-1);
line-height: 1.4;
}
@@ -623,11 +623,11 @@ $md-toggle__search--checked:
display: -webkit-box;
max-height: px2rem(33px);
margin: 0.5em 0;
overflow: hidden;
color: var(--md-default-fg-color--light);
font-size: ms(-1);
line-height: 1.4;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
@@ -648,8 +648,8 @@ $md-toggle__search--checked:
// Search term highlighting
em {
font-style: normal;
font-weight: 700;
font-style: normal;
text-decoration: underline;
}
}

4
src/assets/stylesheets/layout/_sidebar.scss
View File

@@ -58,14 +58,14 @@ $md-toggle__drawer--checked:
position: fixed;
top: 0;
left: px2rem(-242px);
z-index: 3;
width: px2rem(242px);
height: 100%;
background-color: var(--md-default-bg-color);
transform: translateX(0);
transition:
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 250ms;
background-color: var(--md-default-bg-color);
z-index: 3;
// Adjust for right-to-left languages
[dir="rtl"] & {

8
src/assets/stylesheets/layout/_source.scss
View File

@@ -59,12 +59,12 @@
// Source container
.md-source {
display: block;
transition: opacity 250ms;
font-size: px2rem(13px);
line-height: 1.2;
white-space: nowrap;
// Hack: reduce jitter
backface-visibility: hidden;
transition: opacity 250ms;
// Adjust for right-to-left languages
[dir="rtl"] & {
@@ -116,9 +116,9 @@
display: inline-block;
max-width: calc(100% - #{px2rem(24px)});
margin-left: px2rem(12px);
overflow: hidden;
font-weight: 700;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: middle;
}
@@ -126,11 +126,11 @@
&__facts {
margin: 0;
padding: 0;
font-size: px2rem(11px);
overflow: hidden;
font-weight: 700;
font-size: px2rem(11px);
list-style-type: none;
opacity: 0.75;
overflow: hidden;
// Show after the data was loaded
[data-md-state="done"] & {

14
src/assets/stylesheets/layout/_tabs.scss
View File

@@ -27,10 +27,10 @@
// Tabs with outline
.md-tabs {
width: 100%;
transition: background 250ms;
background-color: var(--md-primary-fg-color);
color: var(--md-primary-bg-color);
overflow: auto;
color: var(--md-primary-bg-color);
background-color: var(--md-primary-fg-color);
transition: background 250ms;
// Omit transitions, in case JavaScript is not available
.no-js & {
@@ -52,8 +52,8 @@
margin: 0;
margin-left: px2rem(4px);
padding: 0;
list-style: none;
white-space: nowrap;
list-style: none;
// Adjust for right-to-left languages
[dir="rtl"] & {
@@ -75,11 +75,11 @@
&__link {
display: block;
margin-top: px2rem(16px);
font-size: px2rem(14px);
opacity: 0.7;
transition:
transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 250ms;
font-size: px2rem(14px);
opacity: 0.7;
// Omit transitions, in case JavaScript is not available
.no-js & {
@@ -109,11 +109,11 @@
// while scrolling down, while scrolling up seems to be okay
.md-tabs__link {
transform: translateY(50%);
opacity: 0;
transition:
color 250ms,
transform 0ms 400ms,
opacity 100ms;
opacity: 0;
}
}

12
src/assets/stylesheets/palette.scss
View File

@@ -85,14 +85,14 @@
// Application header (stays always on top)
.md-header {
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color);
background-color: var(--md-default-bg-color);
}
// Hero teaser
.md-hero {
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color);
background-color: var(--md-default-bg-color);
// Add a border if there are no tabs
&--expand {
@@ -105,8 +105,8 @@
// Repository containing source
.md-nav__source {
background-color: var(--md-default-fg-color--lightest);
color: var(--md-default-fg-color);
background-color: var(--md-default-fg-color--lightest);
}
}
@@ -134,8 +134,8 @@
// Site title in main navigation
html & .md-nav--primary .md-nav__title[for="__drawer"] {
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color);
background-color: var(--md-default-bg-color);
}
// Hero teaser
@@ -149,9 +149,9 @@
// Tabs with outline
.md-tabs {
border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest);
background-color: var(--md-default-bg-color);
color: var(--md-default-fg-color);
background-color: var(--md-default-bg-color);
border-bottom: px2rem(1px) solid var(--md-default-fg-color--lightest);
}
}
}