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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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 }}">

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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"}

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">

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;
}
}
}

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;

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;
}
}
}
}

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.

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

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;

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);
}
}

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);

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;
}
}
}

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);
}
}
}
}

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

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

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);
}
}
}
}

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);

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);

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,

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);
}
}
}

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 {

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);
}
}

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);

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;

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

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

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);
}

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);

View File

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