From ded2d87b2bddecabbd1f4c9d6b7558ec450a9dc9 Mon Sep 17 00:00:00 2001 From: iBug Date: Tue, 25 Jun 2024 22:49:22 +0800 Subject: [PATCH] Replace '[dir=rtl] &' with CSS logical properties where it makes sense --- _sass/minimal-mistakes/_archive.scss | 14 +------ _sass/minimal-mistakes/_base.scss | 14 ++----- _sass/minimal-mistakes/_navigation.scss | 51 ++++-------------------- _sass/minimal-mistakes/_page.scss | 47 ++++------------------ _sass/minimal-mistakes/_sidebar.scss | 52 +++++-------------------- _sass/minimal-mistakes/_utilities.scss | 14 +------ 6 files changed, 32 insertions(+), 160 deletions(-) diff --git a/_sass/minimal-mistakes/_archive.scss b/_sass/minimal-mistakes/_archive.scss index ab6bda33..26350274 100644 --- a/_sass/minimal-mistakes/_archive.scss +++ b/_sass/minimal-mistakes/_archive.scss @@ -9,22 +9,12 @@ @include breakpoint($large) { float: right; width: calc(100% - #{$right-sidebar-width-narrow}); - padding-right: $right-sidebar-width-narrow; - - [dir=rtl] & { - padding-right: 0; - padding-left: $right-sidebar-width-narrow; - } + padding-inline-end: $right-sidebar-width-narrow; } @include breakpoint($x-large) { width: calc(100% - #{$right-sidebar-width}); - padding-right: $right-sidebar-width; - - [dir=rtl] & { - padding-right: 0; - padding-left: $right-sidebar-width; - } + padding-inline-end: $right-sidebar-width; } } diff --git a/_sass/minimal-mistakes/_base.scss b/_sass/minimal-mistakes/_base.scss index b7872703..feaf2c1a 100644 --- a/_sass/minimal-mistakes/_base.scss +++ b/_sass/minimal-mistakes/_base.scss @@ -107,17 +107,11 @@ abbr[data-original-title] { /* blockquotes */ blockquote { - margin: 2em 1em 2em 0; - padding-left: 1em; - padding-right: 1em; + margin-block: 2em; + margin-inline-start: 1em; + padding-inline: 1em; font-style: italic; - border-left: 0.25em solid $primary-color; - - [dir=rtl] & { - border-left: none; - border-right: .25em solid $primary-color; - margin: 2em 0 2em 1em; - } + border-inline-start: 0.25em solid $primary-color; cite { font-style: italic; diff --git a/_sass/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/_navigation.scss index 065cf9e8..14cf069f 100644 --- a/_sass/minimal-mistakes/_navigation.scss +++ b/_sass/minimal-mistakes/_navigation.scss @@ -192,22 +192,12 @@ } &.site-logo { - margin-left: 0; - margin-right: 0.5rem; - - [dir=rtl] & { - margin-right: 0; - margin-left: 0.5rem; - } + margin-inline-start: 0; + margin-inline-end: 0.5rem; } &.site-title { - margin-left: 0; - - [dir=rtl] & { - margin-left: 1rem; - margin-right: 0; - } + margin-inline-start: 0; } } @@ -561,48 +551,23 @@ } li ul > li a { - padding-left: 1.25rem; + padding-inline-start: 1.25rem; font-weight: normal; - - [dir=rtl] & { - padding-left: 0; - padding-right: 1.25rem; - } } li ul li ul > li a { - padding-left: 1.75rem; - - [dir=rtl] & { - padding-left: 0; - padding-right: 1.75rem; - } + padding-inline-start: 1.75rem; } li ul li ul li ul > li a { - padding-left: 2.25rem; - - [dir=rtl] & { - padding-left: 0; - padding-right: 2.25rem; - } + padding-inline-start: 2.25rem; } li ul li ul li ul li ul > li a { - padding-left: 2.75rem; - - [dir=rtl] & { - padding-left: 0; - padding-right: 2.75rem; - } + padding-inline-start: 2.75rem; } li ul li ul li ul li ul li ul > li a { - padding-left: 3.25rem; - - [dir=rtl] & { - padding-left: 0; - padding-right: 3.25rem; - } + padding-inline-start: 3.25rem; } } diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss index 2cbc6547..472c4446 100644 --- a/_sass/minimal-mistakes/_page.scss +++ b/_sass/minimal-mistakes/_page.scss @@ -39,22 +39,12 @@ body { @include breakpoint($large) { float: right; width: calc(100% - #{$right-sidebar-width-narrow}); - padding-right: $right-sidebar-width-narrow; - - [dir=rtl] & { - padding-right: 0; - padding-left: $right-sidebar-width-narrow; - } + padding-inline-end: $right-sidebar-width-narrow; } @include breakpoint($x-large) { width: calc(100% - #{$right-sidebar-width}); - padding-right: $right-sidebar-width; - - [dir=rtl] & { - padding-right: 0; - padding-left: $right-sidebar-width; - } + padding-inline-end: $right-sidebar-width; } .page__inner-wrap { @@ -106,18 +96,13 @@ body { h1, h2, h3, h4, h5, h6 { .header-link { position: relative; - left: 0.5em; + inset-inline-start: 0.5em; opacity: 0; font-size: 0.8em; -webkit-transition: opacity 0.2s ease-in-out 0.1s; -moz-transition: opacity 0.2s ease-in-out 0.1s; -o-transition: opacity 0.2s ease-in-out 0.1s; transition: opacity 0.2s ease-in-out 0.1s; - - [dir=rtl] & { - left: 0; - right: .5em; - } } &:hover .header-link { @@ -349,29 +334,19 @@ body { } strong { - margin-right: 10px; - - [dir=rtl] & { - margin-right: 0; - margin-left: 10px; - } + margin-inline-end: 10px; } } .page__taxonomy-item { display: inline-block; - margin-right: 5px; + margin-inline-end: 5px; margin-bottom: 8px; padding: 5px 10px; text-decoration: none; border: 1px solid mix(#000, $border-color, 25%); border-radius: $border-radius; - [dir=rtl] & { - margin-right: 0; - margin-left: 5px; - } - &:hover { text-decoration: none; color: $link-color-hover; @@ -550,22 +525,14 @@ body { .page__related { @include clearfix(); - float: left; + float: inline-start; margin-top: 2em; padding-top: 1em; border-top: 1px solid $border-color; - [dir=rtl] & { - float: right; - } - @include breakpoint($large) { - float: right; + float: inline-end; width: calc(100% - #{$right-sidebar-width-narrow}); - - [dir=rtl] & { - float: left; - } } @include breakpoint($x-large) { diff --git a/_sass/minimal-mistakes/_sidebar.scss b/_sass/minimal-mistakes/_sidebar.scss index 12b9d74a..7f64569c 100644 --- a/_sass/minimal-mistakes/_sidebar.scss +++ b/_sass/minimal-mistakes/_sidebar.scss @@ -17,16 +17,12 @@ // } @include breakpoint($large) { - float: left; + float: inline-start; width: calc(#{$right-sidebar-width-narrow} - 1em); opacity: 0.75; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; - [dir=rtl] & { - float: right; - } - &:hover { opacity: 1; } @@ -81,31 +77,18 @@ @include breakpoint($large) { position: absolute; top: 0; - right: 0; + inset-inline-end: 0; width: $right-sidebar-width-narrow; - margin-right: -1 * $right-sidebar-width-narrow; - padding-left: 1em; + margin-inline-end: -1 * $right-sidebar-width-narrow; + padding-inline-start: 1em; z-index: 10; - [dir=rtl] & { - right: auto; - left: 0; - margin-right: 0; - margin-left: -1 * $right-sidebar-width-narrow; - padding-left: 0; - padding-right: 1em; - } - &.sticky { @include clearfix(); position: -webkit-sticky; position: sticky; top: 2em; - float: right; - - [dir=rtl] & { - float: left; - } + float: inline-start; .toc { .toc__menu { @@ -118,12 +101,7 @@ @include breakpoint($x-large) { width: $right-sidebar-width; - margin-right: -1 * $right-sidebar-width; - - [dir=rtl] & { - margin-right: 0; - margin-left: -1 * $right-sidebar-width; - } + margin-inline-end: -1 * $right-sidebar-width; } } @@ -224,12 +202,7 @@ .author__urls { span.label { - padding-left: 5px; - - [dir=rtl] & { - padding-left: 0; - padding-right: 5px; - } + padding-inline-start: 5px; } } @@ -338,18 +311,12 @@ a { display: block; margin-bottom: 5px; - padding-right: 5px; - padding-top: 2px; - padding-bottom: 2px; + padding-block: 2px; + padding-inline-end: 5px; color: inherit; font-size: $type-size-5; text-decoration: none; - [dir=rtl] & { - padding-right: 0; - padding-left: 5px; - } - &:hover { text-decoration: underline; } @@ -382,4 +349,3 @@ margin-right: initial; } } - diff --git a/_sass/minimal-mistakes/_utilities.scss b/_sass/minimal-mistakes/_utilities.scss index 34c90ad4..6831dfd3 100644 --- a/_sass/minimal-mistakes/_utilities.scss +++ b/_sass/minimal-mistakes/_utilities.scss @@ -115,13 +115,8 @@ body:hover .visually-hidden button { } .task-list-item-checkbox { - margin-right: 0.5em; + margin-inline-end: 0.5em; opacity: 1; - - [dir=rtl] & { - margin-left: .5em; - margin-right: 0; - } } } @@ -187,12 +182,7 @@ body:hover .visually-hidden button { .full { @include breakpoint($large) { - margin-right: -1 * span(2.5 of 12) !important; - - [dir=rtl] & { - margin-right: 0 !important; - margin-left: -1 * span(2.5 of 12) !important; - } + margin-inline-end: -1 * span(2.5 of 12) !important; } }