From 485b0a52c8bb630ad0be1703651460d23ace17af Mon Sep 17 00:00:00 2001 From: xirehat Date: Fri, 1 Aug 2025 08:24:28 +0330 Subject: [PATCH] Add RTL support --- assets/scss/_desktop.scss | 16 ++++++++++++++++ assets/scss/_documentation.scss | 12 +++++++++--- assets/scss/_tablet.scss | 13 +++++++++++++ layouts/_default/baseof.html | 2 +- layouts/blog/baseof.html | 2 +- layouts/docs/baseof.html | 2 +- 6 files changed, 41 insertions(+), 6 deletions(-) diff --git a/assets/scss/_desktop.scss b/assets/scss/_desktop.scss index 056d5d81dc..564f12879c 100644 --- a/assets/scss/_desktop.scss +++ b/assets/scss/_desktop.scss @@ -3,6 +3,19 @@ $vendor-strip-height: 44px; @media screen and (min-width: 1024px) { + body:dir(rtl) { + overflow-x: hidden; + } + + table:dir(rtl) { + text-align: right; + direction: rtl; + } + + .breadcrumb-item:dir(rtl) + .breadcrumb-item:dir(rtl)::before { + float: right; + } + .td-home { .header-hero { #vendorStrip { @@ -34,6 +47,9 @@ $vendor-strip-height: 44px; p { text-align: left } + p:dir(rtl) { + text-align: right + } .image-wrapper { position: absolute; diff --git a/assets/scss/_documentation.scss b/assets/scss/_documentation.scss index df6970b465..f2f070b1d8 100644 --- a/assets/scss/_documentation.scss +++ b/assets/scss/_documentation.scss @@ -90,14 +90,20 @@ div.feature-state-notice { // All callout headings should be bold .alert { - border-style: solid; - border-width: 0 0 0 4px; - border-radius: 0 0 2rem 0; h4 { font-weight: bold; font-style: initial; } } +.alert:dir(ltr) { + // color the left border (left-to-right locales) + border-width: 0 0 0 4px; +} + +.alert:dir(rtl) { + // color the right border (right-to-left locales) + border-width: 0 4px 0 0; +} .glossary-tooltip { display: inline-block; diff --git a/assets/scss/_tablet.scss b/assets/scss/_tablet.scss index f8b5aa76ee..8a4450383b 100644 --- a/assets/scss/_tablet.scss +++ b/assets/scss/_tablet.scss @@ -18,6 +18,15 @@ $vendor-strip-font-size: 16px; display: none; } + body:dir(rtl) { + overflow-x: hidden; + } + + table:dir(rtl) { + text-align: right; + direction: rtl; + } + .td-home { #viewDocs, #tryKubernetes { @@ -118,6 +127,10 @@ $vendor-strip-font-size: 16px; text-align: left; margin: 0 5% 15px 0; } + + &:dir(rtl) > .light-text { + text-align: right; + } } #mobileShowVideoButton { diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index b8c7859f78..1917402911 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,5 +1,5 @@ - + {{- if eq hugo.Environment "preview" -}} {{- end -}} diff --git a/layouts/blog/baseof.html b/layouts/blog/baseof.html index 5dce9a415d..d28bed2f87 100644 --- a/layouts/blog/baseof.html +++ b/layouts/blog/baseof.html @@ -1,5 +1,5 @@ - + {{ with .Params.canonicalUrl }} diff --git a/layouts/docs/baseof.html b/layouts/docs/baseof.html index f44b951be6..bf306fee0d 100644 --- a/layouts/docs/baseof.html +++ b/layouts/docs/baseof.html @@ -1,5 +1,5 @@ - + {{ partial "head.html" . }} {{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}