actions
/
mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use logical CSS properties 

Replace phyiscal properties (top/bottom/left/right) with logical
properties (start/end) that can be used in non-LTR contexts (e.g.,
content in Arabic or Hebrew).

Based on the CSS Logical Properties and Values Level 1 specification,
currently an Editor's Draft [1].

Referencing MDN, all major browsers except Internet Explorer support the
margin, padding, and border properties.

[1]: https://drafts.csswg.org/css-logical/

Signed-off-by: Tim Crawford <crawfxrd@gmail.com>
This commit is contained in:
Tim Crawford 2021-03-15 17:42:44 -06:00 committed by Eric Huss
parent 25aaff0bd6
commit 73d44503fd
3 changed files with 53 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/theme/css/chrome.css
View File

@ -37,9 +37,9 @@ a > .hljs {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
background-color: var(--bg); background-color: var(--bg);
border-bottom-color: var(--bg); border-block-end-color: var(--bg);
border-bottom-width: 1px; border-block-end-width: 1px;
border-bottom-style: solid; border-block-end-style: solid;
} }
#menu-bar.sticky, #menu-bar.sticky,
.js #menu-bar-hover-placeholder:hover + #menu-bar, .js #menu-bar-hover-placeholder:hover + #menu-bar,
@ -56,7 +56,7 @@ a > .hljs {
height: var(--menu-bar-height); height: var(--menu-bar-height);
} }
#menu-bar.bordered { #menu-bar.bordered {
border-bottom-color: var(--table-border-color); border-block-end-color: var(--table-border-color);
} }
#menu-bar i, #menu-bar .icon-button { #menu-bar i, #menu-bar .icon-button {
position: relative; position: relative;
@ -160,7 +160,7 @@ a > .hljs {
} }
.nav-wrapper { .nav-wrapper {
margin-top: 50px; margin-block-start: 50px;
display: none; display: none;
} }
@ -174,10 +174,12 @@ a > .hljs {
} }
.previous { .previous {
/* Only Firefox supports flow-relative values */
float: left; float: left;
} }
.next { .next {
/* Only Firefox supports flow-relative values */
float: right; float: right;
right: var(--page-padding); right: var(--page-padding);
} }
@ -237,7 +239,7 @@ pre > .buttons :hover {
background-color: var(--theme-hover); background-color: var(--theme-hover);
} }
pre > .buttons i { pre > .buttons i {
margin-left: 8px; margin-inline-start: 8px;
} }
pre > .buttons button { pre > .buttons button {
cursor: inherit; cursor: inherit;
@ -274,7 +276,7 @@ pre > code {
} }
pre > .result { pre > .result {
margin-top: 10px; margin-block-start: 10px;
} }
/* Search */ /* Search */
@ -285,8 +287,14 @@ pre > .result {
mark { mark {
border-radius: 2px; border-radius: 2px;
padding: 0 3px 1px 3px; padding-block-start: 0;
margin: 0 -3px -1px -3px; padding-block-end: 1px;
padding-inline-start: 3px;
padding-inline-end: 3px;
margin-block-start: 0;
margin-block-end: -1px;
margin-inline-start: -3px;
margin-inline-end: -3px;
background-color: var(--search-mark-bg); background-color: var(--search-mark-bg);
transition: background-color 300ms linear; transition: background-color 300ms linear;
cursor: pointer; cursor: pointer;
@ -298,14 +306,17 @@ mark.fade-out {
} }
.searchbar-outer { .searchbar-outer {
margin-left: auto; margin-inline-start: auto;
margin-right: auto; margin-inline-end: auto;
max-width: var(--content-max-width); max-width: var(--content-max-width);
} }
#searchbar { #searchbar {
width: 100%; width: 100%;
margin: 5px auto 0px auto; margin-block-start: 5px;
margin-block-end: 0;
margin-inline-start: auto;
margin-inline-end: auto;
padding: 10px 16px; padding: 10px 16px;
transition: box-shadow 300ms ease-in-out; transition: box-shadow 300ms ease-in-out;
border: 1px solid var(--searchbar-border-color); border: 1px solid var(--searchbar-border-color);
@ -321,20 +332,23 @@ mark.fade-out {
.searchresults-header { .searchresults-header {
font-weight: bold; font-weight: bold;
font-size: 1em; font-size: 1em;
padding: 18px 0 0 5px; padding-block-start: 18px;
padding-block-end: 0;
padding-inline-start: 5px;
padding-inline-end: 0;
color: var(--searchresults-header-fg); color: var(--searchresults-header-fg);
} }
.searchresults-outer { .searchresults-outer {
margin-left: auto; margin-inline-start: auto;
margin-right: auto; margin-inline-end: auto;
max-width: var(--content-max-width); max-width: var(--content-max-width);
border-bottom: 1px dashed var(--searchresults-border-color); border-block-end: 1px dashed var(--searchresults-border-color);
} }
ul#searchresults { ul#searchresults {
list-style: none; list-style: none;
padding-left: 20px; padding-inline-start: 20px;
} }
ul#searchresults li { ul#searchresults li {
margin: 10px 0px; margin: 10px 0px;
@ -347,7 +361,10 @@ ul#searchresults li.focus {
ul#searchresults span.teaser { ul#searchresults span.teaser {
display: block; display: block;
clear: both; clear: both;
margin: 5px 0 0 20px; margin-block-start: 5px;
margin-block-end: 0;
margin-inline-start: 20px;
margin-inline-end: 0;
font-size: 0.8em; font-size: 0.8em;
} }
ul#searchresults span.teaser em { ul#searchresults span.teaser em {
@ -423,13 +440,13 @@ ul#searchresults span.teaser em {
@media only screen and (min-width: 620px) { @media only screen and (min-width: 620px) {
#sidebar-toggle-anchor:checked ~ .page-wrapper { #sidebar-toggle-anchor:checked ~ .page-wrapper {
transform: none; transform: none;
margin-left: var(--sidebar-width); margin-inline-start: var(--sidebar-width);
} }
} }
.chapter { .chapter {
list-style: none outside none; list-style: none outside none;
padding-left: 0; padding-inline-start: 0;
line-height: 2.2em; line-height: 2.2em;
} }
@ -459,7 +476,7 @@ ul#searchresults span.teaser em {
.chapter li > a.toggle { .chapter li > a.toggle {
cursor: pointer; cursor: pointer;
display: block; display: block;
margin-left: auto; margin-inline-start: auto;
padding: 0 10px; padding: 0 10px;
user-select: none; user-select: none;
opacity: 0.68; opacity: 0.68;
@ -476,7 +493,7 @@ ul#searchresults span.teaser em {
.chapter li.chapter-item { .chapter li.chapter-item {
line-height: 1.5em; line-height: 1.5em;
margin-top: 0.6em; margin-block-start: 0.6em;
} }
.chapter li.expanded > a.toggle div { .chapter li.expanded > a.toggle div {
@ -499,7 +516,7 @@ ul#searchresults span.teaser em {
.section { .section {
list-style: none outside none; list-style: none outside none;
padding-left: 20px; padding-inline-start: 20px;
line-height: 1.9em; line-height: 1.9em;
} }
@ -532,7 +549,7 @@ ul#searchresults span.teaser em {
padding: 2px 20px; padding: 2px 20px;
line-height: 25px; line-height: 25px;
white-space: nowrap; white-space: nowrap;
text-align: left; text-align: start;
cursor: pointer; cursor: pointer;
color: inherit; color: inherit;
background: inherit; background: inherit;

21
src/theme/css/general.css
View File

@ -48,13 +48,13 @@ h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
.hide-boring .boring { display: none; } .hide-boring .boring { display: none; }
.hidden { display: none !important; } .hidden { display: none !important; }
h2, h3 { margin-top: 2.5em; } h2, h3 { margin-block-start: 2.5em; }
h4, h5 { margin-top: 2em; } h4, h5 { margin-block-start: 2em; }
.header + .header h3, .header + .header h3,
.header + .header h4, .header + .header h4,
.header + .header h5 { .header + .header h5 {
margin-top: 1em; margin-block-start: 1em;
} }
h1:target::before, h1:target::before,
@ -65,7 +65,7 @@ h5:target::before,
h6:target::before { h6:target::before {
display: inline-block; display: inline-block;
content: "»"; content: "»";
margin-left: -30px; margin-inline-start: -30px;
width: 30px; width: 30px;
} }
@ -74,13 +74,14 @@ h6:target::before {
https://bugs.webkit.org/show_bug.cgi?id=218076 https://bugs.webkit.org/show_bug.cgi?id=218076
*/ */
:target { :target {
/* Safari does not support logical properties */
scroll-margin-top: calc(var(--menu-bar-height) + 0.5em); scroll-margin-top: calc(var(--menu-bar-height) + 0.5em);
} }
.page { .page {
outline: 0; outline: 0;
padding: 0 var(--page-padding); padding: 0 var(--page-padding);
margin-top: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */ margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */
} }
.page-wrapper { .page-wrapper {
box-sizing: border-box; box-sizing: border-box;
@ -96,8 +97,8 @@ h6:target::before {
padding: 0 5px 50px 5px; padding: 0 5px 50px 5px;
} }
.content main { .content main {
margin-left: auto; margin-inline-start: auto;
margin-right: auto; margin-inline-end: auto;
max-width: var(--content-max-width); max-width: var(--content-max-width);
} }
.content p { line-height: 1.45em; } .content p { line-height: 1.45em; }
@ -147,8 +148,8 @@ blockquote {
padding: 0 20px; padding: 0 20px;
color: var(--fg); color: var(--fg);
background-color: var(--quote-bg); background-color: var(--quote-bg);
border-top: .1em solid var(--quote-border); border-block-start: .1em solid var(--quote-border);
border-bottom: .1em solid var(--quote-border); border-block-end: .1em solid var(--quote-border);
} }
kbd { kbd {
@ -166,7 +167,7 @@ kbd {
:not(.footnote-definition) + .footnote-definition, :not(.footnote-definition) + .footnote-definition,
.footnote-definition + :not(.footnote-definition) { .footnote-definition + :not(.footnote-definition) {
margin-top: 2em; margin-block-start: 2em;
} }
.footnote-definition { .footnote-definition {
font-size: 0.9em; font-size: 0.9em;

2
src/theme/css/print.css
View File

@ -8,7 +8,7 @@
#page-wrapper.page-wrapper { #page-wrapper.page-wrapper {
transform: none; transform: none;
margin-left: 0px; margin-inline-start: 0px;
overflow-y: initial; overflow-y: initial;
} }