Replace '[dir=rtl] &' with CSS logical properties where it makes sense

This commit is contained in:
iBug 2024-06-25 22:49:22 +08:00
parent 97f0f35498
commit ded2d87b2b
6 changed files with 32 additions and 160 deletions

View File

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

View File

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

View File

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

View File

@ -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) {

View File

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

View File

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