squidfunk
/
mkdocs-material
mirror of https://github.com/squidfunk/mkdocs-material.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Switched to logical CSS properties

This commit is contained in:
squidfunk 2021-12-13 19:10:58 +01:00
parent 306cc73013
commit bfe7540d2a
35 changed files with 123 additions and 489 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
material/assets/stylesheets/main.23b6d78a.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.23b6d78a.min.css.map
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.f8ff4087.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.f8ff4087.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

2
material/base.html
View File

@ -34,7 +34,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.23b6d78a.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.f8ff4087.min.css' | url }}">
{% if config.theme.palette %}
{% set palette = config.theme.palette %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.e6a45f82.min.css' | url }}">

1
material/overrides/assets/stylesheets/main.b745cb77.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/overrides/assets/stylesheets/main.bf23d911.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
material/overrides/assets/stylesheets/main.b745cb77.min.css.map → material/overrides/assets/stylesheets/main.bf23d911.min.css.map
View File

@ -1 +1 @@
{"version":3,"sources":["src/overrides/assets/stylesheets/main/_typeset.scss","../../../../src/overrides/assets/stylesheets/main.scss","src/assets/stylesheets/utilities/_break.scss","src/overrides/assets/stylesheets/main/layout/_banner.scss","src/overrides/assets/stylesheets/main/layout/_hero.scss","src/overrides/assets/stylesheets/main/layout/_iconsearch.scss","src/overrides/assets/stylesheets/main/layout/_sponsorship.scss"],"names":[],"mappings":"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","file":"main.css"}
{"version":3,"sources":["src/overrides/assets/stylesheets/main/_typeset.scss","../../../../src/overrides/assets/stylesheets/main.scss","src/assets/stylesheets/utilities/_break.scss","src/overrides/assets/stylesheets/main/layout/_banner.scss","src/overrides/assets/stylesheets/main/layout/_hero.scss","src/overrides/assets/stylesheets/main/layout/_iconsearch.scss","src/overrides/assets/stylesheets/main/layout/_sponsorship.scss"],"names":[],"mappings":"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","file":"main.css"}

2
material/overrides/main.html
View File

@ -3,7 +3,7 @@
-#}
{% extends "base.html" %}
{% block extrahead %}
<link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.b745cb77.min.css' | url }}">
<link rel="stylesheet" href="{{ 'overrides/assets/stylesheets/main.bf23d911.min.css' | url }}">
{% endblock %}
{% block announce %}
<a href="https://twitter.com/squidfunk">

9
src/assets/stylesheets/main/_modifiers.scss
View File

@ -35,27 +35,22 @@
float: left;
width: px2rem(234px);
margin-top: 0;
margin-right: px2rem(16px);
margin-inline-end: px2rem(16px);
margin-bottom: px2rem(16px);
// Adjust for right-to-left languages
[dir="rtl"] & {
float: right;
margin-right: 0;
margin-left: px2rem(16px);
}
// Modifier to move to end (ltr: right, rtl: left)
&.end {
float: right;
margin-right: 0;
margin-left: px2rem(16px);
margin-inline: px2rem(16px) 0;
// Adjust for right-to-left languages
[dir="rtl"] & {
float: left;
margin-right: px2rem(16px);
margin-left: 0;
}
}
}

58
src/assets/stylesheets/main/_typeset.scss
View File

@ -292,7 +292,7 @@ kbd {
// Tooltip
&[title]:where(:focus, :hover)::after {
position: absolute;
left: 0;
inset-inline-start: 0;
display: inline-block;
width: auto;
min-width: max-content;
@ -316,28 +316,14 @@ kbd {
// Superscript and subscript
:where(sup, sub) {
margin-left: px2em(1px, 12.8px);
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2em(1px, 12.8px);
margin-left: initial;
}
margin-inline-start: px2em(1px, 12.8px);
}
// Blockquotes, possibly nested
blockquote {
padding-left: px2rem(12px);
padding-inline-start: px2rem(12px);
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"] & {
padding-right: px2rem(12px);
padding-left: initial;
border-right: px2rem(4px) solid var(--md-default-fg-color--lighter);
border-left: initial;
}
border-inline-start: px2rem(4px) solid var(--md-default-fg-color--lighter);
}
// Unordered list
@ -347,7 +333,7 @@ kbd {
// Unordered and ordered list
:where(ul, ol) {
margin-left: px2em(10px);
margin-inline-start: px2em(10px);
padding: 0;
// Adjust display mode if not hidden
@ -355,12 +341,6 @@ kbd {
display: flow-root;
}
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2em(10px);
margin-left: initial;
}
// Nested ordered list
ol {
list-style-type: lower-alpha;
@ -374,13 +354,7 @@ kbd {
// List element
li {
margin-bottom: 0.5em;
margin-left: px2em(20px);
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2em(20px);
margin-left: initial;
}
margin-inline-start: px2em(20px);
// Adjust spacing
:where(p, blockquote) {
@ -394,26 +368,16 @@ kbd {
// Nested list
:where(ul, ol) {
margin: 0.5em 0 0.5em px2em(10px);
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2em(10px);
margin-left: initial;
}
margin-block: 0.5em;
margin-inline-start: px2em(10px);
}
}
}
// Definition list
dd {
margin: 1em 0 1.5em px2em(30px);
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2em(30px);
margin-left: initial;
}
margin-block: 1em 1.5em;
margin-inline-start: px2em(30px);
}
// Image or icon
@ -563,7 +527,7 @@ kbd {
display: inline-block;
width: 1.2em;
height: 1.2em;
margin-left: 0.5em;
margin-inline-start: 0.5em;
vertical-align: text-bottom;
mask-image: var(--md-typeset-table-sort-icon);
mask-repeat: no-repeat;

34
src/assets/stylesheets/main/extensions/markdown/_admonition.scss
View File

@ -71,7 +71,7 @@ $admonitions: (
page-break-inside: avoid;
background-color: var(--md-admonition-bg-color);
border: 0 solid $clr-blue-a200;
border-left-width: px2rem(4px);
border-inline-start-width: px2rem(4px);
border-radius: px2rem(2px);
box-shadow: var(--md-shadow-z1);
@ -86,12 +86,6 @@ $admonitions: (
box-sizing: border-box;
}
// Adjust for right-to-left languages
[dir="rtl"] & {
border-right-width: px2rem(4px);
border-left-width: 0;
}
// Adjust vertical spacing for nested admonitions
:where(.admonition, details) {
margin-top: 1em;
@ -122,21 +116,15 @@ $admonitions: (
// Admonition title
:where(.admonition-title, summary) {
position: relative;
margin: 0 px2rem(-12px) 0 px2rem(-16px);
padding: px2rem(8px) px2rem(12px) px2rem(8px) px2rem(40px);
margin-block: 0;
margin-inline: px2rem(-16px) px2rem(-12px);
padding-block: px2rem(8px);
padding-inline: px2rem(40px) px2rem(12px);
font-weight: 700;
background-color: color.adjust($clr-blue-a200, $alpha: -0.9);
border: 0 solid $clr-blue-a200;
border-left-width: px2rem(4px);
border-top-left-radius: px2rem(2px);
// Adjust for right-to-left languages
[dir="rtl"] & {
margin: 0 px2rem(-16px) 0 px2rem(-12px);
padding: px2rem(8px) px2rem(40px) px2rem(8px) px2rem(12px);
border-right-width: px2rem(4px);
border-left-width: 0;
}
border-inline-start-width: px2rem(4px);
border-start-start-radius: px2rem(2px);
// Adjust spacing for title-only admonitions
html &:last-child {
@ -147,7 +135,7 @@ $admonitions: (
&::before {
position: absolute;
top: px2em(10px);
left: px2rem(12px);
inset-inline-start: px2rem(12px);
width: px2rem(20px);
height: px2rem(20px);
background-color: $clr-blue-a200;
@ -155,12 +143,6 @@ $admonitions: (
mask-repeat: no-repeat;
mask-size: contain;
content: "";
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2rem(12px);
left: initial;
}
}
}
}

2
src/assets/stylesheets/main/extensions/markdown/_footnotes.scss
View File

@ -41,7 +41,7 @@
// Footnote list - omit left indentation
> ol {
margin-left: 0;
margin-inline-start: 0;
// Footnote item - footnote items can contain lists, so we need to scope
// the spacing adjustments to the top-level footnote item.

8
src/assets/stylesheets/main/extensions/markdown/_toc.scss
View File

@ -30,7 +30,7 @@
// Headerlink
.headerlink {
display: inline-block;
margin-left: px2rem(10px);
margin-inline-start: px2rem(10px);
color: var(--md-default-fg-color--lighter);
opacity: 0;
transition:
@ -41,12 +41,6 @@
@media print {
display: none;
}
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(10px);
margin-left: initial;
}
}
// Show headerlinks on parent hover

3
src/assets/stylesheets/main/extensions/pymdownx/_critic.scss
View File

@ -61,8 +61,7 @@
.critic.block {
display: block;
margin: 1em 0;
padding-right: px2rem(16px);
padding-left: px2rem(16px);
padding-inline: px2rem(16px);
overflow: auto;
box-shadow: none;

15
src/assets/stylesheets/main/extensions/pymdownx/_details.scss
View File

@ -64,16 +64,11 @@
summary {
display: block;
min-height: px2rem(20px);
padding-right: px2rem(36px);
border-top-left-radius: px2rem(2px);
border-top-right-radius: px2rem(2px);
padding-inline-end: px2rem(36px);
border-start-start-radius: px2rem(2px);
border-start-end-radius: px2rem(2px);
cursor: pointer;
// Adjust for right-to-left languages
[dir="rtl"] & {
padding: px2rem(8px) px2rem(44px) px2rem(8px) px2rem(36px);
}
// Show outline for keyboard devices
&.focus-visible {
outline-color: var(--md-accent-fg-color);
@ -90,7 +85,7 @@
&::after {
position: absolute;
top: px2em(10px);
right: px2rem(8px);
inset-inline-end: px2rem(8px);
width: px2rem(20px);
height: px2rem(20px);
background-color: currentColor;
@ -103,8 +98,6 @@
// Adjust for right-to-left languages
[dir="rtl"] & {
right: initial;
left: px2rem(8px);
transform: rotate(180deg);
}
}

3
src/assets/stylesheets/main/extensions/pymdownx/_highlight.scss
View File

@ -191,8 +191,7 @@
// don't overlay line numbers, as active annotations have a `z-index` of 2.
z-index: 3;
float: left;
margin-right: px2em(16px, 13.6px);
margin-left: px2em(-16px, 13.6px);
margin-inline: px2em(16px, 13.6px);
padding-left: px2em(16px, 13.6px);
color: var(--md-default-fg-color--light);
background-color: var(--md-code-bg-color);

16
src/assets/stylesheets/main/extensions/pymdownx/_keys.scss
View File

@ -94,11 +94,9 @@
"page-up": "\21DE",
"print-screen": "\2399"
) {
.key-#{$name} {
&::before {
padding-right: px2em(6.4px);
content: $code;
}
.key-#{$name}::before {
padding-right: px2em(6.4px);
content: $code;
}
}
@ -108,11 +106,9 @@
"num-enter": "\2324",
"enter": "\23CE"
) {
.key-#{$name} {
&::after {
padding-left: px2em(6.4px);
content: $code;
}
.key-#{$name}::after {
padding-left: px2em(6.4px);
content: $code;
}
}
}

24
src/assets/stylesheets/main/extensions/pymdownx/_tabbed.scss
View File

@ -162,8 +162,8 @@
// Omit rounded borders
> code {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-start-start-radius: 0;
border-start-end-radius: 0;
}
}
@ -185,28 +185,14 @@
.md-content__inner > .tabbed-set .tabbed-labels {
max-width: 100vw;
margin: 0 px2rem(-16px);
padding-left: px2rem(16px);
scroll-padding-left: px2rem(16px);
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(16px);
padding-left: initial;
scroll-padding-right: px2rem(16px);
scroll-padding-left: initial;
}
padding-inline-start: px2rem(16px);
scroll-padding-inline-start: px2rem(16px);
// Hack: some browsers ignore the right padding on flex containers,
// see https://bit.ly/3lsPS3S
&::after {
padding-right: px2rem(16px);
padding-inline-end: px2rem(16px);
content: "";
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: initial;
padding-left: px2rem(16px);
}
}
}
}

16
src/assets/stylesheets/main/extensions/pymdownx/_tasklist.scss
View File

@ -47,13 +47,7 @@
[type="checkbox"] {
position: absolute;
top: 0.45em;
left: -2em;
// Adjust for right-to-left languages
[dir="rtl"] & {
right: -2em;
left: initial;
}
inset-inline-start: -2em;
}
}
@ -67,7 +61,7 @@
.task-list-indicator::before {
position: absolute;
top: 0.15em;
left: px2em(-24px);
inset-inline-start: px2em(-24px);
width: px2em(20px);
height: px2em(20px);
background-color: var(--md-default-fg-color--lightest);
@ -75,12 +69,6 @@
mask-repeat: no-repeat;
mask-size: contain;
content: "";
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2em(-24px);
left: initial;
}
}
// Tasklist indicator in checked state

3
src/assets/stylesheets/main/layout/_base.scss
View File

@ -82,8 +82,7 @@ body {
// to `1220px`, and they are rendered centered if the screen is larger.
.md-grid {
max-width: px2rem(1220px);
margin-right: auto;
margin-left: auto;
margin-inline: auto;
}
// Main container

36
src/assets/stylesheets/main/layout/_content.scss
View File

@ -42,30 +42,12 @@
// Sidebar with navigation is visible
.md-sidebar--primary:not([hidden]) ~ .md-content > & {
// Adjust for left-to-right languages
[dir="ltr"] & {
margin-left: px2rem(24px);
}
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(24px);
}
margin-inline-start: px2rem(24px);
}
// Sidebar with table of contents is visible
.md-sidebar--secondary:not([hidden]) ~ .md-content > & {
// Adjust for left-to-right languages
[dir="ltr"] & {
margin-right: px2rem(24px);
}
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-left: px2rem(24px);
}
margin-inline-end: px2rem(24px);
}
}
@ -88,7 +70,7 @@
&__button {
float: right;
margin: px2rem(8px) 0;
margin-left: px2rem(8px);
margin-inline-start: px2rem(8px);
padding: 0;
// [print]: Hide buttons
@ -99,13 +81,6 @@
// Adjust for right-to-left languages
[dir="rtl"] & {
float: left;
margin-right: px2rem(8px);
margin-left: initial;
// Flip icon vertically
svg {
transform: scaleX(-1);
}
}
// Adjust default link color for icons
@ -117,6 +92,11 @@
svg {
display: inline;
vertical-align: top;
// Adjust for right-to-left languages
[dir="rtl"] & {
transform: scaleX(-1);
}
}
}
}

9
src/assets/stylesheets/main/layout/_dialog.scss
View File

@ -27,9 +27,8 @@
// Dialog
.md-dialog {
position: fixed;
right: px2rem(16px);
inset-inline-end: px2rem(16px);
bottom: px2rem(16px);
left: initial;
z-index: 4;
min-width: px2rem(222px);
padding: px2rem(8px) px2rem(12px);
@ -48,12 +47,6 @@
display: none;
}
// Adjust for right-to-left languages
[dir="rtl"] & {
right: initial;
left: px2rem(16px);
}
// Dialog in open state
&[data-md-state="open"] {
transform: translateY(0);

26
src/assets/stylesheets/main/layout/_footer.scss
View File

@ -61,6 +61,11 @@
opacity: 0.7;
}
// Adjust for right-to-left languages
[dir="rtl"] & svg {
transform: scaleX(-1);
}
// Footer link to previous page
&--prev {
@ -72,32 +77,16 @@
display: none;
}
}
// Adjust for right-to-left languages
[dir="rtl"] & {
// Flip icon vertically
svg {
transform: scaleX(-1);
}
}
}
// Footer link to next page
&--next {
margin-left: auto;
margin-inline-start: auto;
text-align: right;
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: auto;
margin-left: initial;
text-align: left;
// Flip icon vertically
svg {
transform: scaleX(-1);
}
}
}
}
@ -121,8 +110,7 @@
// Footer link direction (i.e. prev and next)
&__direction {
position: absolute;
right: 0;
left: 0;
inset-inline: 0;
margin-top: px2rem(-20px);
padding: 0 px2rem(20px);
font-size: px2rem(12.8px);

3
src/assets/stylesheets/main/layout/_form.scss
View File

@ -62,7 +62,8 @@
padding: 0 px2rem(12px);
font-size: px2rem(16px);
border-bottom: px2rem(2px) solid var(--md-default-fg-color--lighter);
border-radius: px2rem(2px) px2rem(2px) 0 0;
border-start-start-radius: px2rem(2px);
border-start-end-radius: px2rem(2px);
box-shadow: var(--md-shadow-z1);
transition:
border 250ms,

36
src/assets/stylesheets/main/layout/_header.scss
View File

@ -29,8 +29,7 @@
.md-header {
position: sticky;
top: 0;
right: 0;
left: 0;
inset-inline: 0;
z-index: 4;
color: var(--md-primary-bg-color);
background-color: var(--md-primary-fg-color);
@ -131,12 +130,8 @@
}
// Adjust for right-to-left languages
[dir="rtl"] & {
// Flip icon vertically
svg {
transform: scaleX(-1);
}
[dir="rtl"] & svg {
transform: scaleX(-1);
}
}
@ -185,17 +180,11 @@
&__title {
flex-grow: 1;
height: px2rem(48px);
margin-right: px2rem(8px);
margin-left: px2rem(20px);
margin-inline-end: px2rem(8px);
margin-inline-start: px2rem(20px);
font-size: px2rem(18px);
line-height: px2rem(48px);
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(20px);
margin-left: px2rem(8px);
}
// Header title in active state, i.e. page title is visible
&[data-md-state="active"] .md-header__topic {
z-index: -1;
@ -260,23 +249,12 @@
display: block;
width: px2rem(234px);
max-width: px2rem(234px);
margin-left: px2rem(20px);
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(20px);
margin-left: initial;
}
margin-inline-start: px2rem(20px);
}
// [screen +]: Adjust spacing of search bar
@include break-from-device(screen) {
margin-left: px2rem(28px);
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(28px);
}
margin-inline-start: px2rem(28px);
}
}
}

71
src/assets/stylesheets/main/layout/_nav.scss
View File

@ -83,13 +83,7 @@
// Navigation item on level 2
& & {
padding-right: 0;
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(12px);
padding-left: 0;
}
padding-inline-end: 0;
}
}
@ -175,8 +169,7 @@
&--primary & {
position: absolute;
top: 0;
right: 0;
left: 0;
inset-inline: 0;
z-index: 1;
display: flex;
flex-direction: column;
@ -209,18 +202,12 @@
.md-nav__icon {
position: absolute;
top: px2rem(8px);
left: px2rem(8px);
inset-inline-start: 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;
@ -260,16 +247,10 @@
.md-logo {
position: absolute;
top: px2rem(4px);
left: px2rem(4px);
inset-inline-start: px2rem(4px);
display: block;
margin: px2rem(4px);
padding: px2rem(8px);
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2rem(4px);
left: initial;
}
}
}
@ -303,15 +284,9 @@
.md-nav__icon {
width: px2rem(24px);
height: px2rem(24px);
margin-right: px2rem(-4px);
margin-inline-end: px2rem(-4px);
font-size: px2rem(24px);
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: 0;
margin-left: px2rem(-4px);
}
// Navigation icon in link to next level
&::after {
display: block;
@ -345,46 +320,22 @@
// 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;
}
padding-inline-start: px2rem(28px);
}
// 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;
}
padding-inline-start: px2rem(40px);
}
// 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;
}
padding-inline-start: px2rem(52px);
}
// 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;
}
padding-inline-start: px2rem(64px);
}
}
}
@ -648,7 +599,7 @@
// Adjust spacing for level 1 navigation items
> .md-nav__list > .md-nav__item {
padding-right: px2rem(12px);
padding-inline-end: px2rem(12px);
}
}
}
@ -670,7 +621,7 @@
.md-nav--secondary {
display: block;
margin-bottom: 1.25em;
border-left: px2rem(1px) solid var(--md-primary-fg-color);
border-inline-start: px2rem(1px) solid var(--md-primary-fg-color);
// Hide table of contents title
> .md-nav__title {

125
src/assets/stylesheets/main/layout/_search.scss
View File

@ -54,7 +54,7 @@
@include break-to-device(tablet portrait) {
position: absolute;
top: px2rem(-20px);
left: px2rem(-44px);
inset-inline-start: px2rem(-44px);
width: px2rem(40px);
height: px2rem(40px);
overflow: hidden;
@ -66,12 +66,6 @@
opacity 200ms 200ms;
pointer-events: none;
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2rem(-44px);
left: initial;
}
// Show overlay when search is active
[data-md-toggle="search"]:checked ~ .md-header & {
opacity: 1;
@ -85,7 +79,7 @@
@include break-from-device(tablet landscape) {
position: fixed;
top: 0;
left: 0;
inset-inline-start: 0;
width: 0;
height: 0;
background-color: hsla(0, 0%, 0%, 0.54);
@ -95,12 +89,6 @@
height 0ms 250ms,
opacity 250ms;
// Adjust for right-to-left languages
[dir="rtl"] & {
right: 0;
left: initial;
}
// Show overlay when search is active
[data-md-toggle="search"]:checked ~ .md-header & {
width: 100%;
@ -146,7 +134,7 @@
@include break-to-device(tablet portrait) {
position: fixed;
top: 0;
left: 0;
inset-inline-start: 0;
z-index: 2;
width: 0;
height: 0;
@ -161,8 +149,6 @@
// Adjust for right-to-left languages
[dir="rtl"] & {
right: 0;
left: initial;
transform: translateX(-5%);
}
@ -247,16 +233,11 @@
z-index: 2;
width: 100%;
height: 100%;
padding: 0 px2rem(44px) 0 px2rem(72px);
padding-inline: px2rem(72px) px2rem(44px);
font-size: px2rem(18px);
text-overflow: ellipsis;
background: transparent;
// Adjust for right-to-left languages
[dir="rtl"] & {
padding: 0 px2rem(72px) 0 px2rem(44px);
}
// Search placeholder
&::placeholder {
transition: color 250ms;
@ -282,15 +263,10 @@
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
padding-left: px2rem(44px);
padding-inline-start: px2rem(44px);
color: inherit;
font-size: px2rem(16px);
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(44px);
}
// Search placeholder
&::placeholder {
color: var(--md-primary-bg-color--light);
@ -333,30 +309,18 @@
&[for="__search"] {
position: absolute;
top: px2rem(6px);
left: px2rem(10px);
inset-inline-start: px2rem(10px);
z-index: 2;
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2rem(10px);
left: initial;
// Flip icon vertically
svg {
transform: scaleX(-1);
}
[dir="rtl"] & svg {
transform: scaleX(-1);
}
// [tablet portrait -]: Search modal
@include break-to-device(tablet portrait) {
top: px2rem(12px);
left: px2rem(16px);
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2rem(16px);
left: initial;
}
inset-inline-start: px2rem(16px);
// Hide the magnifying glass
svg:first-child {
@ -380,31 +344,19 @@
&__options {
position: absolute;
top: px2rem(6px);
right: px2rem(10px);
inset-inline-end: px2rem(10px);
z-index: 2;
pointer-events: none;
// Adjust for right-to-left languages
[dir="rtl"] & {
right: initial;
left: px2rem(10px);
}
// [tablet portrait -]: Search modal
@include break-to-device(tablet portrait) {
top: px2rem(12px);
right: px2rem(16px);
// Adjust for right-to-left languages
[dir="rtl"] & {
right: initial;
left: px2rem(16px);
}
inset-inline-end: px2rem(16px);
}
// Search option buttons
> * {
margin-left: px2rem(4px);
margin-inline-start: px2rem(4px);
color: var(--md-default-fg-color--light);
transform: scale(0.75);
opacity: 0;
@ -441,27 +393,17 @@
align-items: center;
width: 100%;
height: 100%;
padding: 0 px2rem(44px) 0 px2rem(72px);
padding-inline: px2rem(72px) px2rem(44px);
color: var(--md-default-fg-color--lighter);
font-size: px2rem(18px);
white-space: nowrap;
opacity: 0;
transition: opacity 50ms;
// Adjust for right-to-left languages
[dir="rtl"] & {
padding: 0 px2rem(72px) 0 px2rem(44px);
}
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
padding-left: px2rem(44px);
padding-inline-start: px2rem(44px);
font-size: px2rem(16px);
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(44px);
}
}
// Show suggestions when search is active
@ -477,7 +419,8 @@
z-index: 1;
width: 100%;
overflow: hidden;
border-radius: 0 0 px2rem(2px) px2rem(2px);
border-end-start-radius: px2rem(2px);
border-end-end-radius: px2rem(2px);
// [tablet portrait -]: Search modal
@include break-to-device(tablet portrait) {
@ -577,13 +520,7 @@
// [tablet landscape +]: Adjust spacing
@include break-from-device(tablet landscape) {
padding-left: px2rem(44px);
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(44px);
padding-left: initial;
}
padding-inline-start: px2rem(44px);
}
}
@ -637,13 +574,7 @@
// [tablet landscape +]: Adjust spacing
@include break-from-device(tablet landscape) {
padding-left: px2rem(44px);
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(44px);
padding-left: px2rem(16px);
}
padding-inline-start: px2rem(44px);
}
// Search result more link on focus/hover
@ -672,13 +603,7 @@
// [tablet landscape +]: Adjust spacing
@include break-from-device(tablet landscape) {
padding-left: px2rem(44px);
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(44px);
padding-left: px2rem(16px);
}
padding-inline-start: px2rem(44px);
}
// Search result article document
@ -697,7 +622,7 @@
// Search result icon
&__icon {
position: absolute;
left: 0;
inset-inline-start: 0;
width: px2rem(24px);
height: px2rem(24px);
margin: px2rem(10px);
@ -718,15 +643,9 @@
mask-repeat: no-repeat;
mask-size: contain;
content: "";
}
// Adjust for right-to-left languages
[dir="rtl"] & {
right: 0;
left: initial;
// Flip icon vertically
&::after {
// Adjust for right-to-left languages
[dir="rtl"] & {
transform: scaleX(-1);
}
}

9
src/assets/stylesheets/main/layout/_select.scss
View File

@ -94,8 +94,7 @@
&__link {
display: block;
width: 100%;
padding-right: px2rem(24px);
padding-left: px2rem(12px);
padding-inline: px2rem(12px) px2rem(24px);
outline: none;
cursor: pointer;
transition:
@ -103,12 +102,6 @@
color 250ms;
scroll-snap-align: start;
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(12px);
padding-left: px2rem(24px);
}
// Link on focus/hover
&:where(:focus, :hover) {
color: var(--md-accent-fg-color);

13
src/assets/stylesheets/main/layout/_sidebar.scss
View File

@ -45,7 +45,7 @@
&--primary {
position: fixed;
top: 0;
left: px2rem(-242px);
inset-inline-start: px2rem(-242px);
z-index: 5;
display: block;
width: px2rem(242px);
@ -56,12 +56,6 @@
transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 250ms;
// Adjust for right-to-left languages
[dir="rtl"] & {
right: px2rem(-242px);
left: initial;
}
// Show sidebar when drawer is active
[data-md-toggle="drawer"]:checked ~ .md-container & {
box-shadow: var(--md-shadow-z3);
@ -76,10 +70,7 @@
// Stretch scroll wrapper for primary sidebar
.md-sidebar__scrollwrap {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
margin: 0;
scroll-snap-type: none;
overflow: hidden;

38
src/assets/stylesheets/main/layout/_source.scss
View File

@ -92,27 +92,13 @@
// Align with margin only (as opposed to normal button alignment)
svg {
margin-top: px2rem(12px);
margin-left: px2rem(12px);
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(12px);
margin-left: initial;
}
margin-inline-start: px2rem(12px);
}
// Adjust spacing if icon is present
+ .md-source__repository {
margin-left: px2rem(-40px);
padding-left: px2rem(40px);
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(-40px);
margin-left: initial;
padding-right: px2rem(40px);
padding-left: initial;
}
margin-inline-start: px2rem(-40px);
padding-inline-start: px2rem(40px);
}
}
@ -120,7 +106,7 @@
&__repository {
display: inline-block;
max-width: calc(100% - #{px2rem(24px)});
margin-left: px2rem(12px);
margin-inline-start: px2rem(12px);
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
@ -155,29 +141,17 @@
display: inline-block;
width: px2rem(12px);
height: px2rem(12px);
margin-right: px2rem(2px);
margin-inline-end: px2rem(2px);
vertical-align: text-top;
background-color: currentColor;
mask-repeat: no-repeat;
mask-size: contain;
content: "";
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: initial;
margin-left: px2rem(2px);
}
}
// Adjust spacing for repository fact icon
&:nth-child(1n+2)::before {
margin-left: px2rem(8px);
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(8px);
margin-left: px2rem(2px);
}
margin-inline-start: px2rem(8px);
}
// Repository fact: version

11
src/assets/stylesheets/main/layout/_tabs.scss
View File

@ -49,25 +49,18 @@
// Navigation tabs list
&__list {
margin: 0;
margin-left: px2rem(4px);
margin-inline-start: px2rem(4px);
padding: 0;
white-space: nowrap;
list-style: none;
contain: content;
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(4px);
margin-left: initial;
}
}
// Navigation tabs item
&__item {
display: inline-block;
height: px2rem(48px);
padding-right: px2rem(12px);
padding-left: px2rem(12px);
padding-inline: px2rem(12px);
}
// Navigation tabs link - could be defined as block elements and aligned via

4
src/assets/stylesheets/main/layout/_top.scss
View File

@ -29,7 +29,7 @@
position: fixed;
top: px2rem(48px + 16px);
z-index: 2;
margin-left: 50%;
margin-inline-start: 50%;
padding: px2rem(8px) px2rem(16px);
color: var(--md-default-fg-color--light);
font-size: px2rem(14px);
@ -51,8 +51,6 @@
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: 50%;
margin-left: initial;
transform: translate(50%, 0);
}

26
src/assets/stylesheets/main/layout/_version.scss
View File

@ -56,34 +56,21 @@
// this won't work consistently. Furthermore, we would need to use inline
// positioning to align the links, which looks jagged.
top: px2rem(1px);
margin-right: px2rem(8px);
margin-left: px2rem(28px);
margin-inline: px2rem(28px) px2rem(8px);
color: inherit;
outline: none;
cursor: pointer;
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(28px);
margin-left: px2rem(8px);
}
// Version selection icon
&::after {
display: inline-block;
width: px2rem(8px);
height: px2rem(12px);
margin-left: px2rem(8px);
margin-inline-start: px2rem(8px);
background-color: currentColor;
mask-image: var(--md-version-icon);
mask-repeat: no-repeat;
content: "";
// Adjust for right-to-left languages
[dir="rtl"] & {
margin-right: px2rem(8px);
margin-left: initial;
}
}
}
@ -140,8 +127,7 @@
&__link {
display: block;
width: 100%;
padding-right: px2rem(24px);
padding-left: px2rem(12px);
padding-inline: px2rem(12px) px2rem(24px);
white-space: nowrap;
outline: none;
cursor: pointer;
@ -150,12 +136,6 @@
background-color 250ms;
scroll-snap-align: start;
// Adjust for right-to-left languages
[dir="rtl"] & {
padding-right: px2rem(12px);
padding-left: px2rem(24px);
}
// Link on focus/hover
&:where(:focus, :hover) {
color: var(--md-accent-fg-color);

2
src/overrides/assets/stylesheets/main/layout/_banner.scss
View File

@ -41,6 +41,6 @@
// Twitter icon
.twitter {
margin-left: 0.2em;
margin-inline-start: 0.2em;
}
}