OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added support for right-to-left languages

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

3
material/mkdocs_theme.yml
View File

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

1
mkdocs.yml
View File

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

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

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

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

@ -39,6 +39,12 @@
font-size: ms(-1);
overflow: auto;
// Adjust for RTL languages
[dir="rtl"] & {
border-right: 0.4rem solid $clr-blue-a200;
border-left: none;
}
// Adjust spacing on last element
html & > :last-child {
margin-bottom: 1.2rem;
@ -57,6 +63,11 @@
background-color: transparentize($clr-blue-a200, 0.9);
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
&:last-child {
margin-bottom: 0;
@ -71,6 +82,12 @@
color: $clr-blue-a200;
font-size: 2rem;
content: "\E3C9"; // edit
// Adjust for RTL languages
[dir="rtl"] & {
right: 1.2rem;
left: initial;
}
}
}
@ -94,11 +111,16 @@
// Define base class
&%#{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
> .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);
// Icon

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

@ -129,10 +129,21 @@
opacity: 0;
vertical-align: text-bottom;
// Adjust for RTL languages
[dir="rtl"] & {
transform: translateX(-0.5rem);
}
// Back reference icon
&::before {
display: inline-block;
font-size: 1.6rem;
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;
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: 1rem;
margin-left: initial;
}
// Higher specificity for color due to palettes integration
html body & {
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
summary {
padding-right: 4rem;
// Adjust for RTL languages
[dir="rtl"] & {
padding-left: 4rem;
}
}
// Manually hide and show, if browser doesn't support details
@ -92,6 +97,12 @@
color: $md-color-black--lighter;
font-size: 2rem;
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;
top: 0.45em;
left: -2em;
// Adjust for RTL languages
[dir="rtl"] & {
right: -2em;
left: initial;
}
}
}
@ -55,6 +61,12 @@
font-size: 1.25em;
content: "\E835"; // check_box_outline_blank
vertical-align: -0.25em;
// Adjust for RTL languages
[dir="rtl"] & {
right: -1.25em;
left: initial;
}
}
// 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
@include break-from-device(tablet landscape) {
margin-right: 24.2rem;
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: initial;
margin-left: 24.2rem;
}
}
// [screen +]: Add space for table of contents
@include break-from-device(screen) {
margin-left: 24.2rem;
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: 24.2rem;
}
}
// Define spacing

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

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

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

@ -140,6 +140,11 @@
opacity: 0;
z-index: -1;
pointer-events: none;
// Adjust for RTL languages
[dir="rtl"] & {
transform: translateX(-2.5rem);
}
}
// Induce ellipsis, if no JavaScript is available
@ -169,6 +174,11 @@
z-index: -1;
pointer-events: none;
// Adjust for RTL languages
[dir="rtl"] & {
transform: translateX(2.5rem);
}
// Page title
& + .md-header-nav__topic {
transform: translateX(0);
@ -193,6 +203,14 @@
max-width: 23rem;
margin-left: 2.8rem;
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;
content: "\E5C4"; // arrow_back
// Adjust for RTL languages
[dir="rtl"] & {
content: "\E5C8"; // arrow_forward
}
}
// Hide button by default
@ -76,6 +81,12 @@
& & {
padding-right: 0;
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: 1.2rem;
padding-left: 0;
}
// Remove bottom spacing for nested items
&:last-child {
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
.md-nav__list {
flex: 1;
@ -253,13 +280,29 @@
padding: 0;
border-top: 0.1rem solid $md-color-black--lightest;
// Adjust for RTL languages
[dir="rtl"] & {
padding: 0;
}
// Increase spacing to account for icon
&--nested > .md-nav__link {
padding-right: 4.8rem;
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: 1.6rem;
padding-left: 4.8rem;
}
// Replace icon with right arrow
&::after {
content: "\E315"; // keyboard_arrow_right
// Adjust for RTL languages
[dir="rtl"] & {
content: "\E314"; // keyboard_arrow_left
}
}
}
}
@ -278,6 +321,12 @@
margin-top: -1.2rem;
color: inherit;
font-size: 2.4rem;
// Adjust for RTL languages
[dir="rtl"] & {
right: initial;
left: 1.2rem;
}
}
}
@ -297,21 +346,45 @@
// 3rd level link
.md-nav__link {
padding-left: 2.8rem;
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: 2.8rem;
padding-left: initial;
}
}
// 4th level link
.md-nav .md-nav__link {
padding-left: 4rem;
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: 4rem;
padding-left: initial;
}
}
// 5th level link
.md-nav .md-nav .md-nav__link {
padding-left: 5.2rem;
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: 5.2rem;
padding-left: initial;
}
}
// 6th level link
.md-nav .md-nav .md-nav .md-nav__link {
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;
// Adjust for RTL languages
[dir="rtl"] & {
transform: translateX(-100%);
}
// Just hide navigation, if browser doesn't supports 3D transforms
.no-csstransforms3d & {
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
&__source {
display: block;

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

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

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

@ -67,6 +67,12 @@ $md-toggle__drawer--checked:
background-color: $md-color-white;
z-index: 3;
// Adjust for RTL languages
[dir="rtl"] & {
right: -24.2rem;
left: initial;
}
// Just hide drawer, if browser doesn't support 3D transforms
.no-csstransforms3d & {
display: none;
@ -78,6 +84,11 @@ $md-toggle__drawer--checked:
transform: translateX(24.2rem);
// Adjust for RTL languages
[dir="rtl"] & {
transform: translateX(-24.2rem);
}
// Just show drawer, if browser doesn't support 3D transforms
.no-csstransforms3d & {
display: block;
@ -100,11 +111,24 @@ $md-toggle__drawer--checked:
display: block;
margin-left: 100%;
transform: translate(-100%, 0);
// Adjust for RTL languages
[dir="rtl"] & {
margin-right: 100%;
margin-left: initial;
transform: translate(100%, 0);
}
}
// [screen +]: Limit to grid
@include break-from-device(screen) {
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;
white-space: nowrap;
// Adjust for RTL languages
[dir="rtl"] & {
padding-right: initial;
padding-left: 1.2rem;
}
// Hovered source container
&:hover {
opacity: 0.7;
@ -93,12 +99,26 @@
height: 2.4rem;
margin-top: 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
+ .md-source__repository {
margin-left: -4.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 {
float: left;
// Adjust for RTL languages
[dir="rtl"] & {
float: right;
}
// Show after the data was loaded
[data-md-state="done"] & {
animation: md-source__fact--done 0.4s ease-out;

16
src/base.html
View File

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

3
src/mkdocs_theme.yml
View File

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

10
webpack.config.js
View File

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