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

Added support for right-to-left languages

This commit is contained in:
squidfunk 2018-01-13 16:54:08 +01:00 committed by Martin Donath
parent f99f6956be
commit 01c9aa5e11
22 changed files with 409 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
material/assets/stylesheets/application.2a88008a.css Normal file
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/application.7fb6a6f0.css
View File

File diff suppressed because one or more lines are too long

13
material/base.html
View File

@ -46,7 +46,7 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.7fb6a6f0.css"> <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application.2a88008a.css">
{% if palette.primary or palette.accent %} {% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-palette.792431c1.css"> <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-palette.792431c1.css">
{% endif %} {% endif %}
@ -69,18 +69,13 @@
{% endfor %} {% endfor %}
{% block extrahead %}{% endblock %} {% block extrahead %}{% endblock %}
</head> </head>
{% set direction = config.theme.direction %}
{% if palette.primary or palette.accent %} {% if palette.primary or palette.accent %}
{% set primary = palette.primary | replace(" ", "-") | lower %} {% set primary = palette.primary | replace(" ", "-") | lower %}
{% set accent = palette.accent | replace(" ", "-") | lower %} {% set accent = palette.accent | replace(" ", "-") | lower %}
{% if palette.primary and palette.accent %} <body dir="{{ direction }}" data-md-color-primary="{{ primary }}" data-md-color-accent="{{ accent }}">
<body data-md-color-primary="{{ primary }}" data-md-color-accent="{{ accent }}">
{% elif palette.primary %}
<body data-md-color-primary="{{ primary }}">
{% elif palette.accent %}
<body data-md-color-accent="{{ accent }}">
{% endif %}
{% else %} {% else %}
<body> <body dir="{{ direction }}">
{% endif %} {% endif %}
<svg class="md-svg"> <svg class="md-svg">
<defs> <defs>

3
material/mkdocs_theme.yml
View File

@ -21,6 +21,9 @@
# Language for theme localization # Language for theme localization
language: en language: en
# Text direction (can be ltr or rtl)
direction: ltr
# Feature flags for functionality that alters behavior significantly, and thus # Feature flags for functionality that alters behavior significantly, and thus
# may be a matter of taste # may be a matter of taste
feature: feature:

1
mkdocs.yml
View File

@ -47,6 +47,7 @@ theme:
# Default values, taken from mkdocs_theme.yml # Default values, taken from mkdocs_theme.yml
language: en language: en
direction: ltr
feature: feature:
tabs: true tabs: true
palette: palette:

14
src/assets/stylesheets/base/_icons.scss
View File

@ -64,4 +64,18 @@
content: $ligature; content: $ligature;
} }
} }
// Adjust for RTL languages
[dir="rtl"] & {
// Flip ligatures for arrows
@each $ligature, $name in (
"\E5C8": "arrow-back", // arrow_forward
"\E5C4": "arrow-forward" // arrow_back
) {
&--#{$name}::before {
content: $ligature;
}
}
}
} }

44
src/assets/stylesheets/base/_typeset.scss
View File

@ -166,6 +166,7 @@ kbd {
background-color: $md-code-background; background-color: $md-code-background;
color: $md-code-color; color: $md-code-color;
font-size: 85%; font-size: 85%;
direction: ltr;
// Wrap text and hide scollbars // Wrap text and hide scollbars
@media print { @media print {
@ -307,6 +308,12 @@ kbd {
sup, sup,
sub { sub {
margin-left: 0.0625em * 1 / 0.8; margin-left: 0.0625em * 1 / 0.8;
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: 0.0625em * 1 / 0.8;
margin-left: initial;
}
} }
// Blockquotes, possibly nested // Blockquotes, possibly nested
@ -314,6 +321,14 @@ kbd {
padding-left: 1.2rem; padding-left: 1.2rem;
border-left: 0.4rem solid $md-color-black--lighter; border-left: 0.4rem solid $md-color-black--lighter;
color: $md-color-black--light; color: $md-color-black--light;
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: 1.2rem;
padding-left: initial;
border-right: 0.4rem solid $md-color-black--lighter;
border-left: initial;
}
} }
// Unordered lists // Unordered lists
@ -327,6 +342,12 @@ kbd {
margin-left: 0.625em; margin-left: 0.625em;
padding: 0; padding: 0;
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: 0.625em;
margin-left: initial;
}
// Nested ordered lists // Nested ordered lists
ol { ol {
list-style-type: lower-alpha; list-style-type: lower-alpha;
@ -342,6 +363,12 @@ kbd {
margin-bottom: 0.5em; margin-bottom: 0.5em;
margin-left: 1.25em; margin-left: 1.25em;
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: 1.25em;
margin-left: initial;
}
// Decrease vertical spacing // Decrease vertical spacing
p, p,
blockquote { blockquote {
@ -357,6 +384,12 @@ kbd {
ul, ul,
ol { ol {
margin: 0.5em 0 0.5em 0.625em; margin: 0.5em 0 0.5em 0.625em;
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: 0.625em;
margin-left: initial;
}
} }
} }
} }
@ -364,6 +397,12 @@ kbd {
// Definition lists // Definition lists
dd { dd {
margin: 1em 0 1em 1.875em; margin: 1em 0 1em 1.875em;
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: 1.875em;
margin-left: initial;
}
} }
// Limit width to container // Limit width to container
@ -395,6 +434,11 @@ kbd {
th:not([align]), th:not([align]),
td:not([align]) { td:not([align]) {
text-align: left; text-align: left;
// Adjust for RTL languages
[dir="rtl"] & {
text-align: right;
}
} }
// Table headings // Table headings

26
src/assets/stylesheets/extensions/_admonition.scss
View File

@ -39,6 +39,12 @@
font-size: ms(-1); font-size: ms(-1);
overflow: auto; overflow: auto;
// Adjust for RTL languages
[dir="rtl"] & {
border-right: 0.4rem solid $clr-blue-a200;
border-left: none;
}
// Adjust spacing on last element // Adjust spacing on last element
html & > :last-child { html & > :last-child {
margin-bottom: 1.2rem; margin-bottom: 1.2rem;
@ -57,6 +63,11 @@
background-color: transparentize($clr-blue-a200, 0.9); background-color: transparentize($clr-blue-a200, 0.9);
font-weight: 700; font-weight: 700;
// Adjust for RTL languages
[dir="rtl"] & {
padding: 0.8rem 4rem 0.8rem 1.2rem;
}
// Reset spacing, if title is the only element // Reset spacing, if title is the only element
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -71,6 +82,12 @@
color: $clr-blue-a200; color: $clr-blue-a200;
font-size: 2rem; font-size: 2rem;
content: "\E3C9"; // edit content: "\E3C9"; // edit
// Adjust for RTL languages
[dir="rtl"] & {
right: 1.2rem;
left: initial;
}
} }
} }
@ -94,11 +111,16 @@
// Define base class // Define base class
&%#{nth($names, 1)}, &%#{nth($names, 1)},
&.#{nth($names, 1)} { &.#{nth($names, 1)} {
border-left: 0.4rem solid $tint; border-left-color: $tint;
// Adjust for RTL languages
[dir="rtl"] & {
border-right-color: $tint;
}
// Title // Title
> .admonition-title { > .admonition-title {
border-bottom: 0.1rem solid transparentize($tint, 0.9); border-bottom-color: 0.1rem solid transparentize($tint, 0.9);
background-color: transparentize($tint, 0.9); background-color: transparentize($tint, 0.9);
// Icon // Icon

11
src/assets/stylesheets/extensions/_footnotes.scss
View File

@ -129,10 +129,21 @@
opacity: 0; opacity: 0;
vertical-align: text-bottom; vertical-align: text-bottom;
// Adjust for RTL languages
[dir="rtl"] & {
transform: translateX(-0.5rem);
}
// Back reference icon // Back reference icon
&::before { &::before {
display: inline-block;
font-size: 1.6rem; font-size: 1.6rem;
content: "\E31B"; // keyboard_return content: "\E31B"; // keyboard_return
// Adjust for RTL languages
[dir="rtl"] & {
transform: scaleX(-1)
}
} }
} }
} }

6
src/assets/stylesheets/extensions/_permalinks.scss
View File

@ -38,6 +38,12 @@
opacity 0.125s 0.25s; opacity 0.125s 0.25s;
opacity: 0; opacity: 0;
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: 1rem;
margin-left: initial;
}
// Higher specificity for color due to palettes integration // Higher specificity for color due to palettes integration
html body & { html body & {
color: $md-color-black--lighter; color: $md-color-black--lighter;

11
src/assets/stylesheets/extensions/pymdown/_details.scss
View File

@ -51,6 +51,11 @@
// Increase spacing to the right - scoped here for higher specificity // Increase spacing to the right - scoped here for higher specificity
summary { summary {
padding-right: 4rem; padding-right: 4rem;
// Adjust for RTL languages
[dir="rtl"] & {
padding-left: 4rem;
}
} }
// Manually hide and show, if browser doesn't support details // Manually hide and show, if browser doesn't support details
@ -92,6 +97,12 @@
color: $md-color-black--lighter; color: $md-color-black--lighter;
font-size: 2rem; font-size: 2rem;
content: "\E313"; // keyboard_arrow_down content: "\E313"; // keyboard_arrow_down
// Adjust for RTL languages
[dir="rtl"] & {
right: initial;
left: 1.2rem;
}
} }
} }
} }

12
src/assets/stylesheets/extensions/pymdown/_tasklist.scss
View File

@ -38,6 +38,12 @@
position: absolute; position: absolute;
top: 0.45em; top: 0.45em;
left: -2em; left: -2em;
// Adjust for RTL languages
[dir="rtl"] & {
right: -2em;
left: initial;
}
} }
} }
@ -55,6 +61,12 @@
font-size: 1.25em; font-size: 1.25em;
content: "\E835"; // check_box_outline_blank content: "\E835"; // check_box_outline_blank
vertical-align: -0.25em; vertical-align: -0.25em;
// Adjust for RTL languages
[dir="rtl"] & {
right: -1.25em;
left: initial;
}
} }
// Checkbox icon in checked state // Checkbox icon in checked state

11
src/assets/stylesheets/layout/_content.scss
View File

@ -30,11 +30,22 @@
// [tablet landscape +]: Add space for table of contents // [tablet landscape +]: Add space for table of contents
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
margin-right: 24.2rem; margin-right: 24.2rem;
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: initial;
margin-left: 24.2rem;
}
} }
// [screen +]: Add space for table of contents // [screen +]: Add space for table of contents
@include break-from-device(screen) { @include break-from-device(screen) {
margin-left: 24.2rem; margin-left: 24.2rem;
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: 24.2rem;
}
} }
// Define spacing // Define spacing

21
src/assets/stylesheets/layout/_footer.scss
View File

@ -65,6 +65,11 @@
width: 25%; width: 25%;
float: left; float: left;
// Adjust for RTL languages
[dir="rtl"] & {
float: right;
}
// Title // Title
.md-footer-nav__title { .md-footer-nav__title {
@ -80,6 +85,12 @@
width: 75%; width: 75%;
float: right; float: right;
text-align: right; text-align: right;
// Adjust for RTL languages
[dir="rtl"] & {
float: left;
text-align: left;
}
} }
} }
@ -143,6 +154,11 @@
@include break-from-device(tablet portrait) { @include break-from-device(tablet portrait) {
max-width: 75%; max-width: 75%;
float: left; float: left;
// Adjust for RTL languages
[dir="rtl"] & {
float: right;
}
} }
// Highlight copyright information // Highlight copyright information
@ -160,6 +176,11 @@
@include break-from-device(tablet portrait) { @include break-from-device(tablet portrait) {
padding: 1.2rem 0; padding: 1.2rem 0;
float: right; float: right;
// Adjust for RTL languages
[dir="rtl"] & {
float: left;
}
} }
// Link with icon // Link with icon

18
src/assets/stylesheets/layout/_header.scss
View File

@ -140,6 +140,11 @@
opacity: 0; opacity: 0;
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
// Adjust for RTL languages
[dir="rtl"] & {
transform: translateX(-2.5rem);
}
} }
// Induce ellipsis, if no JavaScript is available // Induce ellipsis, if no JavaScript is available
@ -169,6 +174,11 @@
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
// Adjust for RTL languages
[dir="rtl"] & {
transform: translateX(2.5rem);
}
// Page title // Page title
& + .md-header-nav__topic { & + .md-header-nav__topic {
transform: translateX(0); transform: translateX(0);
@ -193,6 +203,14 @@
max-width: 23rem; max-width: 23rem;
margin-left: 2.8rem; margin-left: 2.8rem;
padding-right: 1.2rem; padding-right: 1.2rem;
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: 2.8rem;
margin-left: initial;
padding-right: initial;
padding-left: 1.2rem;
}
} }
} }
} }

84
src/assets/stylesheets/layout/_nav.scss
View File

@ -48,6 +48,11 @@
display: none; display: none;
content: "\E5C4"; // arrow_back content: "\E5C4"; // arrow_back
// Adjust for RTL languages
[dir="rtl"] & {
content: "\E5C8"; // arrow_forward
}
} }
// Hide button by default // Hide button by default
@ -76,6 +81,12 @@
& & { & & {
padding-right: 0; padding-right: 0;
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: 1.2rem;
padding-left: 0;
}
// Remove bottom spacing for nested items // Remove bottom spacing for nested items
&:last-child { &:last-child {
padding-bottom: 0; padding-bottom: 0;
@ -242,6 +253,22 @@
} }
} }
// Adjust for RTL languages
html [dir="rtl"] & .md-nav__title {
// Icon
&::before {
right: 0.4rem;
left: initial;
}
// Site title in main navigation
&--site .md-nav__button {
right: 0.4rem;
left: initial;
}
}
// List of items // List of items
.md-nav__list { .md-nav__list {
flex: 1; flex: 1;
@ -253,13 +280,29 @@
padding: 0; padding: 0;
border-top: 0.1rem solid $md-color-black--lightest; border-top: 0.1rem solid $md-color-black--lightest;
// Adjust for RTL languages
[dir="rtl"] & {
padding: 0;
}
// Increase spacing to account for icon // Increase spacing to account for icon
&--nested > .md-nav__link { &--nested > .md-nav__link {
padding-right: 4.8rem; padding-right: 4.8rem;
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: 1.6rem;
padding-left: 4.8rem;
}
// Replace icon with right arrow // Replace icon with right arrow
&::after { &::after {
content: "\E315"; // keyboard_arrow_right content: "\E315"; // keyboard_arrow_right
// Adjust for RTL languages
[dir="rtl"] & {
content: "\E314"; // keyboard_arrow_left
}
} }
} }
} }
@ -278,6 +321,12 @@
margin-top: -1.2rem; margin-top: -1.2rem;
color: inherit; color: inherit;
font-size: 2.4rem; font-size: 2.4rem;
// Adjust for RTL languages
[dir="rtl"] & {
right: initial;
left: 1.2rem;
}
} }
} }
@ -297,21 +346,45 @@
// 3rd level link // 3rd level link
.md-nav__link { .md-nav__link {
padding-left: 2.8rem; padding-left: 2.8rem;
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: 2.8rem;
padding-left: initial;
}
} }
// 4th level link // 4th level link
.md-nav .md-nav__link { .md-nav .md-nav__link {
padding-left: 4rem; padding-left: 4rem;
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: 4rem;
padding-left: initial;
}
} }
// 5th level link // 5th level link
.md-nav .md-nav .md-nav__link { .md-nav .md-nav .md-nav__link {
padding-left: 5.2rem; padding-left: 5.2rem;
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: 5.2rem;
padding-left: initial;
}
} }
// 6th level link // 6th level link
.md-nav .md-nav .md-nav .md-nav__link { .md-nav .md-nav .md-nav .md-nav__link {
padding-left: 6.4rem; padding-left: 6.4rem;
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: 6.4rem;
padding-left: initial;
}
} }
} }
} }
@ -326,6 +399,11 @@
opacity 0.125s 0.05s; opacity 0.125s 0.05s;
opacity: 0; opacity: 0;
// Adjust for RTL languages
[dir="rtl"] & {
transform: translateX(-100%);
}
// Just hide navigation, if browser doesn't supports 3D transforms // Just hide navigation, if browser doesn't supports 3D transforms
.no-csstransforms3d & { .no-csstransforms3d & {
display: none; display: none;
@ -373,6 +451,12 @@
} }
} }
// Adjust for RTL languages
html [dir="rtl"] &__link {
padding-right: 1.6rem;
padding-left: 4.8rem;
}
// Repository containing source // Repository containing source
&__source { &__source {
display: block; display: block;

79
src/assets/stylesheets/layout/_search.scss
View File

@ -66,6 +66,12 @@ $md-toggle__search--checked:
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
// Adjust for RTL languages
[dir="rtl"] & {
right: 0.4rem;
left: initial;
}
// Expanded overlay // Expanded overlay
#{$md-toggle__search--checked} & { #{$md-toggle__search--checked} & {
transition: transition:
@ -108,6 +114,12 @@ $md-toggle__search--checked:
background-color: $md-color-black--light; background-color: $md-color-black--light;
cursor: pointer; cursor: pointer;
// Adjust for RTL languages
[dir="rtl"] & {
right: 0;
left: initial;
}
// Expanded overlay // Expanded overlay
#{$md-toggle__search--checked} & { #{$md-toggle__search--checked} & {
width: 100%; width: 100%;
@ -133,6 +145,7 @@ $md-toggle__search--checked:
height: 100%; height: 100%;
transform: translateX(5%); transform: translateX(5%);
transition: transition:
right 0s 0.3s,
left 0s 0.3s, left 0s 0.3s,
transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s 0.15s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.15s 0.15s; opacity 0.15s 0.15s;
@ -144,10 +157,24 @@ $md-toggle__search--checked:
left: 0; left: 0;
transform: translateX(0); transform: translateX(0);
transition: transition:
right 0s 0s,
left 0s 0s, left 0s 0s,
transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.15s 0.15s; opacity 0.15s 0.15s;
opacity: 1; opacity: 1;
// Adjust for RTL languages
[dir="rtl"] & {
right: 0;
left: initial;
}
}
// Adjust for RTL languages
html [dir="rtl"] & {
right: 100%;
left: initial;
transform: translateX(-5%);
} }
} }
@ -158,6 +185,11 @@ $md-toggle__search--checked:
padding: 0.2rem 0; padding: 0.2rem 0;
float: right; float: right;
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1); transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
// Adjust for RTL languages
[dir="rtl"] & {
float: left;
}
} }
// Set maximum width // Set maximum width
@ -188,10 +220,15 @@ $md-toggle__search--checked:
// Search input // Search input
&__input { &__input {
position: relative; position: relative;
padding: 0 4.8rem 0 7.2rem; padding: 0 4.4rem 0 7.2rem;
text-overflow: ellipsis; text-overflow: ellipsis;
z-index: 2; z-index: 2;
// Adjust for RTL languages
[dir="rtl"] & {
padding: 0 7.2rem 0 4.4rem;
}
// Transition on placeholder // Transition on placeholder
&::placeholder { &::placeholder {
transition: color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1); transition: color 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
@ -228,6 +265,11 @@ $md-toggle__search--checked:
color: inherit; color: inherit;
font-size: ms(0); font-size: ms(0);
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: 4.4rem;
}
// Icon color // Icon color
+ .md-search__icon { + .md-search__icon {
color: inherit; color: inherit;
@ -279,6 +321,12 @@ $md-toggle__search--checked:
top: 0.6rem; top: 0.6rem;
left: 1rem; left: 1rem;
// Adjust for RTL languages
[dir="rtl"] & {
right: 1rem;
left: initial;
}
// Set search icon on pseudo class, so it can be overridden for mobile // Set search icon on pseudo class, so it can be overridden for mobile
// and tablet when the search is rendered in an overlay // and tablet when the search is rendered in an overlay
&::before { &::before {
@ -293,6 +341,11 @@ $md-toggle__search--checked:
// Show back arrow instead of search icon // Show back arrow instead of search icon
&[for="search"]::before { &[for="search"]::before {
content: "\E5C4"; // arrow_back content: "\E5C4"; // arrow_back
// Adjust for RTL languages
[dir="rtl"] & {
content: "\E5C8"; // arrow_forward
}
} }
} }
} }
@ -307,6 +360,12 @@ $md-toggle__search--checked:
opacity 0.15s; opacity 0.15s;
opacity: 0; opacity: 0;
// Adjust for RTL languages
[dir="rtl"] & {
right: initial;
left: 1rem;
}
// [tablet portrait -]: Full-screen search bar // [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {
top: 1.2rem; top: 1.2rem;
@ -417,6 +476,12 @@ $md-toggle__search--checked:
// [tablet landscape +]: Increase left indent // [tablet landscape +]: Increase left indent
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
padding-left: 4.4rem; padding-left: 4.4rem;
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: 4.4rem;
padding-left: initial;
}
} }
} }
@ -466,6 +531,12 @@ $md-toggle__search--checked:
// [tablet landscape +]: Increase left indent // [tablet landscape +]: Increase left indent
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
padding-left: 4.4rem; padding-left: 4.4rem;
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: 4.4rem;
padding-left: 1.6rem;
}
} }
// Document // Document
@ -482,6 +553,12 @@ $md-toggle__search--checked:
color: $md-color-black--light; color: $md-color-black--light;
content: "\E880"; // find_in_page content: "\E880"; // find_in_page
// Adjust for RTL languages
[dir="rtl"] & {
right: 0;
left: initial;
}
// [tablet portrait -]: Hide page icon // [tablet portrait -]: Hide page icon
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {
display: none; display: none;

24
src/assets/stylesheets/layout/_sidebar.scss
View File

@ -67,6 +67,12 @@ $md-toggle__drawer--checked:
background-color: $md-color-white; background-color: $md-color-white;
z-index: 3; z-index: 3;
// Adjust for RTL languages
[dir="rtl"] & {
right: -24.2rem;
left: initial;
}
// Just hide drawer, if browser doesn't support 3D transforms // Just hide drawer, if browser doesn't support 3D transforms
.no-csstransforms3d & { .no-csstransforms3d & {
display: none; display: none;
@ -78,6 +84,11 @@ $md-toggle__drawer--checked:
transform: translateX(24.2rem); transform: translateX(24.2rem);
// Adjust for RTL languages
[dir="rtl"] & {
transform: translateX(-24.2rem);
}
// Just show drawer, if browser doesn't support 3D transforms // Just show drawer, if browser doesn't support 3D transforms
.no-csstransforms3d & { .no-csstransforms3d & {
display: block; display: block;
@ -100,11 +111,24 @@ $md-toggle__drawer--checked:
display: block; display: block;
margin-left: 100%; margin-left: 100%;
transform: translate(-100%, 0); transform: translate(-100%, 0);
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: 100%;
margin-left: initial;
transform: translate(100%, 0);
}
} }
// [screen +]: Limit to grid // [screen +]: Limit to grid
@include break-from-device(screen) { @include break-from-device(screen) {
margin-left: 122rem; margin-left: 122rem;
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: 122rem;
margin-left: initial;
}
} }
} }

25
src/assets/stylesheets/layout/_source.scss
View File

@ -65,6 +65,12 @@
line-height: 1.2; line-height: 1.2;
white-space: nowrap; white-space: nowrap;
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: initial;
padding-left: 1.2rem;
}
// Hovered source container // Hovered source container
&:hover { &:hover {
opacity: 0.7; opacity: 0.7;
@ -93,12 +99,26 @@
height: 2.4rem; height: 2.4rem;
margin-top: 1.2rem; margin-top: 1.2rem;
margin-left: 1.2rem; margin-left: 1.2rem;
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: 1.2rem;
margin-left: initial;
}
} }
// Correct alignment, if icon is present // Correct alignment, if icon is present
+ .md-source__repository { + .md-source__repository {
margin-left: -4.4rem; margin-left: -4.4rem;
padding-left: 4rem; padding-left: 4rem;
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: -4.4rem;
margin-left: initial;
padding-right: 4rem;
padding-left: initial;
}
} }
} }
@ -133,6 +153,11 @@
&__fact { &__fact {
float: left; float: left;
// Adjust for RTL languages
[dir="rtl"] & {
float: right;
}
// Show after the data was loaded // Show after the data was loaded
[data-md-state="done"] & { [data-md-state="done"] & {
animation: md-source__fact--done 0.4s ease-out; animation: md-source__fact--done 0.4s ease-out;

16
src/base.html
View File

@ -145,20 +145,16 @@
{% block extrahead %}{% endblock %} {% block extrahead %}{% endblock %}
</head> </head>
<!-- Integrate color palette, if defined --> <!-- Text direction and color palette, if defined -->
{% set direction = config.theme.direction %}
{% if palette.primary or palette.accent %} {% if palette.primary or palette.accent %}
{% set primary = palette.primary | replace(" ", "-") | lower %} {% set primary = palette.primary | replace(" ", "-") | lower %}
{% set accent = palette.accent | replace(" ", "-") | lower %} {% set accent = palette.accent | replace(" ", "-") | lower %}
{% if palette.primary and palette.accent %} <body dir="{{ direction }}"
<body data-md-color-primary="{{ primary }}" data-md-color-primary="{{ primary }}"
data-md-color-accent="{{ accent }}"> data-md-color-accent="{{ accent }}">
{% elif palette.primary %}
<body data-md-color-primary="{{ primary }}">
{% elif palette.accent %}
<body data-md-color-accent="{{ accent }}">
{% endif %}
{% else %} {% else %}
<body> <body dir="{{ direction }}">
{% endif %} {% endif %}
<!-- Hidden container for inline SVGs --> <!-- Hidden container for inline SVGs -->

3
src/mkdocs_theme.yml
View File

@ -21,6 +21,9 @@
# Language for theme localization # Language for theme localization
language: en language: en
# Text direction (can be ltr or rtl)
direction: ltr
# Feature flags for functionality that alters behavior significantly, and thus # Feature flags for functionality that alters behavior significantly, and thus
# may be a matter of taste # may be a matter of taste
feature: feature:

10
webpack.config.js
View File

@ -209,7 +209,8 @@ module.exports = env => {
{ {
loader: "css-loader", loader: "css-loader",
options: { options: {
minimize: env && env.prod minimize: env && env.prod,
sourceMap: !(env && env.prod)
} }
}, },
{ {
@ -219,7 +220,8 @@ module.exports = env => {
plugins: () => [ plugins: () => [
require("autoprefixer")(), require("autoprefixer")(),
require("css-mqpacker") require("css-mqpacker")
] ],
sourceMap: !(env && env.prod)
} }
}, },
{ {
@ -229,7 +231,9 @@ module.exports = env => {
"node_modules/modularscale-sass/stylesheets", "node_modules/modularscale-sass/stylesheets",
"node_modules/material-design-color", "node_modules/material-design-color",
"node_modules/material-shadows" "node_modules/material-shadows"
] ],
sourceMap: !(env && env.prod),
sourceMapContents: true
} }
} }
] ]