diff --git a/.gitignore b/.gitignore index 7105f913..e6e7da51 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,4 @@ node_modules # Generated content /build /storybook-static +/demo/storybook-static diff --git a/.stylelintrc b/.stylelintrc index 5135c9ad..143025b9 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,3 +1,9 @@ { - "extends": ["@gravity-ui/stylelint-config", "@gravity-ui/stylelint-config/prettier"] -} + "extends": ["@gravity-ui/stylelint-config", "@gravity-ui/stylelint-config/prettier"], + "plugins": ["stylelint-use-logical"], + "rules": { + "csstools/use-logical": ["always", {"except": ["float", "width", "min-width", "max-width", "height", "min-height", "max-height"]}], + "declaration-colon-space-after": "always-single-line", + "declaration-block-no-redundant-longhand-properties": null + } +} \ No newline at end of file diff --git a/demo/src/Components/DocPage/data.ts b/demo/src/Components/DocPage/data.ts index 7a4be2ca..091710a2 100644 --- a/demo/src/Components/DocPage/data.ts +++ b/demo/src/Components/DocPage/data.ts @@ -1,6 +1,7 @@ import {Lang} from '../../../../src'; import pageContentEn from './page-en.json'; +import pageContentHe from './page-he.json'; import pageContentRu from './page-ru.json'; import singlePageContentEn from './single-page-en.json'; import singlePageContentRu from './single-page-ru.json'; @@ -14,6 +15,8 @@ export const getContent = (lang: Lang, singlePage: boolean) => { if (lang === 'ru') { return pageContentRu; + } else if (lang === 'he') { + return pageContentHe; } return pageContentEn; diff --git a/demo/src/Components/DocPage/index.stories.tsx b/demo/src/Components/DocPage/index.stories.tsx index a8e2cecc..0423c4d8 100644 --- a/demo/src/Components/DocPage/index.stories.tsx +++ b/demo/src/Components/DocPage/index.stories.tsx @@ -60,9 +60,24 @@ const useSettings = () => { }; }; +const useDirection = (lang) => { + const [dir, onChangeDir] = useState('ltr'); + + useEffect(() => { + if (lang === 'he') { + onChangeDir('rtl'); + } else { + onChangeDir('ltr'); + } + + document.dir = dir; + }, [lang, dir]); +}; + const useLangs = () => { - const langs = ['ru', 'en', 'cs']; + const langs = ['ru', 'en', 'cs', 'he']; const [lang, onChangeLang] = useState(DEFAULT_SETTINGS.lang); + useDirection(lang); return { lang, diff --git a/demo/src/Components/DocPage/page-he.json b/demo/src/Components/DocPage/page-he.json new file mode 100644 index 00000000..d7ab89aa --- /dev/null +++ b/demo/src/Components/DocPage/page-he.json @@ -0,0 +1,288 @@ +{ + "html": "

לשירותי Yandex.Cloud עשויים להיות מכסות ומגבלות:

\n\n

ניתן לראות את המכסות שנקבעו עבור חשבונך בהנהלה מסוף .

", + "title": "מכסות ומגבלות", + "headings": [ + { + "title": "למה צריך מכסות?", + "href": "#quotas", + "level": 2 + }, + { + "title": "ברירת מחדל מכסות ומגבלות עבור שירותי ענן", + "href": "#quotas-and-limits-defaults-for-yandex.cloud-services", + "level": 2, + "items": [ + { + "title": "Yandex Compute Cloud", + "href": "#compute", + "level": 3, + "items": [] + }, + { + "title": "Yandex Object Storage", + "href": "#storage", + "level": 3, + "items": [] + }, + { + "title": "Yandex Virtual Private Cloud", + "href": "#vpc", + "level": 3, + "items": [] + }, + { + "title": "Yandex Resource Manager", + "href": "#resource-manager", + "level": 3 + }, + { + "title": "Yandex Load Balancer", + "href": "#load-balancer", + "level": 3, + "items": [] + }, + { + "title": "Yandex Managed Service for ClickHouse", + "href": "#mch", + "level": 3, + "items": [] + }, + { + "title": "Yandex Managed Service for MongoDB", + "href": "#mmg", + "level": 3, + "items": [] + }, + { + "title": "Yandex Managed Service for MySQL", + "href": "#mmy", + "level": 3, + "items": [] + }, + { + "title": "Yandex Managed Service for PostgreSQL", + "href": "#mpg", + "level": 3, + "items": [] + }, + { + "title": "Yandex Managed Service for Redis", + "href": "#mrd", + "level": 3, + "items": [] + }, + { + "title": "Yandex Message Queue", + "href": "#mq", + "level": 3, + "items": [] + }, + { + "title": "Yandex SpeechKit", + "href": "#speechkit", + "level": 3, + "items": [] + }, + { + "title": "Yandex Translate", + "href": "#translate", + "level": 3, + "items": [] + }, + { + "title": "Yandex Vision", + "href": "#vision", + "level": 3, + "items": [] + } + ] + } + ], + "meta": { + "author": { + "avatar": "https://avatars.githubusercontent.com/u/2485935?v=4", + "email": "", + "login": "robot-dataui-vcs@yandex-team.ru", + "name": "DataUI VCS Robot", + "url": "http://yandex.ru/" + }, + "contributors": [ + { + "avatar": "https://avatars.githubusercontent.com/u/2485945?v=6", + "email": "robot-dataui-vcs@yandex-team.ru", + "login": "", + "name": "DataUI VCS Robot", + "url": "" + } + ] + }, + "toc": { + "title": "סקירת פלטפורמה", + "href": "/docs/overview/", + "items": [ + { + "name": "שירותי Yandex.Cloud", + "href": "/docs/overview/concepts/services", + "id": "e619422ec28a87ea25c41d4ad7e45563" + }, + { + "name": "השוואה לפלטפורמות אחרות", + "expanded": true, + "items": [ + { + "name": "סקירה", + "href": "/docs/overview/platform-comparison/", + "id": "6cb52f285fd5d6ec04cbd96854dffab6" + }, + { + "name": "להשוות עם Amazon Web Services", + "href": "/docs/overview/platform-comparison/aws", + "id": "1d84cf0e31f3f0968bdc6e8c2e11ba2f" + }, + { + "name": "להשוות עם Google Cloud Platform", + "href": "/docs/overview/platform-comparison/gcp", + "id": "931f7302b4162c44fbe9bb07cea05b1e" + }, + { + "name": "להשוות עם Microsoft Azure", + "href": "/docs/overview/platform-comparison/azure", + "id": "c14b119f6944d57afd8d4b3e61c37e21" + } + ], + "id": "fa5cef5c0b0cf236fdaa1562cbc48eb8" + }, + { + "name": "אזורי זמינות", + "href": "/docs/overview/concepts/geo-scope", + "id": "054328058d7c7b60ff85e3c95be1a264" + }, + { + "name": "תחילת העבודה", + "href": "/docs/overview/quickstart", + "id": "c984893c04c28bc3fe91f5ff87b79c29" + }, + { + "name": "שלבי מוכנות השירות", + "href": "/docs/overview/concepts/launch-stages", + "id": "c53a86addb3cf17f0847acde5282ad84" + }, + { + "name": "מכסות ומגבלות", + "href": "/docs/overview/concepts/quotas-limits", + "id": "56baa37ef41a57f75c4fce09722ab06c" + }, + { + "name": "API", + "href": "/docs/overview/api", + "id": "136bdc27253376a450eee99e4539c186" + }, + { + "name": "בטיחות ותאימות", + "items": [ + { + "name": "המלצות אבטחה", + "href": "/docs/overview/security-bulletins/", + "id": "c87ac8d995548646dec5661b1b28e45c" + }, + { + "name": "כללים לביצוע סריקות אבטחה חיצוניות", + "href": "/docs/overview/compliance/pentest", + "id": "544f4d243ace1fc32591d87d2460742d" + }, + { + "name": "אבטחת פלטפורמת Yandex.Cloud", + "items": [ + { + "name": "סקירה", + "href": "/docs/overview/security/", + "id": "022cc6311c43fdd3c2848a238c92de1e" + }, + { + "name": "עקרונות בטיחות מרכזיים", + "href": "/docs/overview/security/principles", + "id": "fba46ca0333fec72f16d0e29fb78e239", + "names": [ + { + "name": "אבטחת פלטפורמת Yandex.Cloud", + "items": [ + { + "name": "סקירה", + "href": "/docs/overview/security/", + "id": "022cc6311c43fdd3c2848a238c92de1e" + }, + { + "name": "עקרונות בטיחות מרכזיים", + "href": "/docs/overview/security/principles", + "id": "fba46ca0333fec72f16d0e29fb78e239" + } + ] + } + ] + }, + { + "name": "שיתוף באחריות לאבטחה", + "href": "/docs/overview/security/respons", + "id": "177e184118e1e45bc890a53bf76971c7" + }, + { + "name": "מעקב אחר שיטות עבודה וסטנדרטים מומלצים", + "href": "/docs/overview/security/standarts", + "id": "778f32125645fc81b0f680d2d9d09d23" + }, + { + "name": "עמידה בדרישות", + "href": "/docs/overview/security/conform", + "id": "4d7329262a479edc4b28a7607a31c2b4" + }, + { + "name": "אמצעי הגנה טכניים בצד הספק", + "href": "/docs/overview/security/tech-measures", + "id": "98cfa650bb690aa5b9a9aa66f3e7e52b" + }, + { + "name": "הגנות זמינות למשתמשי ענן", + "href": "/docs/overview/security/user-side", + "id": "aaffdd260266d59cd003e6fcab17a1ec" + }, + { + "name": "משאבים שימושיים", + "href": "/docs/overview/security/resources", + "id": "72071e3e599234cb4df3fe56ac378dc1" + } + ], + "id": "f8cca556a8df3df325a1dce2ffec52dc" + } + ], + "id": "7f196892c00a04c9d36a10bc2275ccb8" + }, + { + "name": "מחיקת נתוני משתמש", + "href": "/docs/overview/concepts/data-deletion", + "id": "66fe49c2a324ffd44541fe6a33e14ed0" + }, + { + "name": "SLA", + "href": "/docs/overview/sla", + "id": "1636c6203504367fc47f73077e95ebad" + }, + { + "name": "שאלות ותשובות", + "href": "/docs/overview/qa", + "id": "ff7aacc415c714c83d0ea5715eabb016" + } + ] + }, + "breadcrumbs": [ + { + "name": "תיעוד" + }, + { + "name": "מכסות ומגבלות" + } + ], + "filePath": "/cache/c12878f1-cc2e-445f-8f96-7374fe76b074/ru/overview/concepts/quotas-limits.md", + "githubUrl": "https://github.com/yandex-cloud/docs/tree/master/ru/overview/concepts/quotas-limits.md", + "vcsType": "github", + "vcsUrl": "https://github.com/yandex-cloud/docs/tree/master/ru/overview/concepts/quotas-limits.md" +} diff --git a/esbuild/build.js b/esbuild/build.js index 21bdd528..3b85497f 100755 --- a/esbuild/build.js +++ b/esbuild/build.js @@ -37,7 +37,7 @@ async function build({path, format}) { async transform(source) { const {css} = await postcss([ autoprefixer({cascade: false}), - postcssPresetEnv({stage: 0}), + postcssPresetEnv({stage: 3}), ]).process(source, {from: undefined}); return css; diff --git a/package.json b/package.json index b1e98218..f0037b7c 100644 --- a/package.json +++ b/package.json @@ -110,6 +110,7 @@ "npm-run-all": "^4.1.5", "postcss": "^8.4.28", "postcss-preset-env": "^9.1.2", + "postcss-scss": "^4.0.9", "prettier": "^2.8.8", "prop-types": "^15.8.1", "react": "^18.2.0", @@ -117,6 +118,7 @@ "rimraf": "^5.0.1", "sass": "^1.66.1", "stylelint": "^15.10.3", + "stylelint-use-logical": "^2.1.0", "svgo": "2.8.0", "typescript": "^5.2.2" }, diff --git a/src/components/ContributorAvatars/ContributorAvatars.scss b/src/components/ContributorAvatars/ContributorAvatars.scss index 4fb94673..4dbed82b 100644 --- a/src/components/ContributorAvatars/ContributorAvatars.scss +++ b/src/components/ContributorAvatars/ContributorAvatars.scss @@ -38,7 +38,7 @@ $avatarWrapperBigSize: 33px; @media screen and (max-width: map-get($screenBreakpoints, 'sm')) { &_onlyAuthor > *:last-child { - margin-left: 5px; + margin-inline-start: 5px; } & > *:last-child, @@ -51,7 +51,7 @@ $avatarWrapperBigSize: 33px; } & > *:not(:last-child) { - margin-right: 0px; + margin-inline-end: 0px; } } @@ -61,7 +61,7 @@ $avatarWrapperBigSize: 33px; } & > *:last-child { - margin-right: 0px; + margin-inline-end: 0px; } } } @@ -106,8 +106,8 @@ $avatarWrapperBigSize: 33px; @include disable-link-styles; & > * { - margin-left: $avatarBorder; - margin-right: calc(#{$avatarBorder} + #{$avatarsDistance}); + margin-inline-start: $avatarBorder; + margin-inline-end: calc(#{$avatarBorder} + #{$avatarsDistance}); } & a { border-radius: 50%; // to have rounded outline on focus as all avatars rounded @@ -157,7 +157,7 @@ $avatarWrapperBigSize: 33px; padding: $detailsIndent; & > *:not(:last-child) { - margin-bottom: $detailsIndent; + margin-block-end: $detailsIndent; } } } diff --git a/src/components/Controls/Controls.scss b/src/components/Controls/Controls.scss index 8e1dff20..9487ad06 100644 --- a/src/components/Controls/Controls.scss +++ b/src/components/Controls/Controls.scss @@ -8,7 +8,7 @@ &__control:not(:last-child), &__divider { - margin-right: 4px; + margin-inline-end: 4px; } &__list { @@ -20,7 +20,6 @@ } &__list-icon { - margin-right: 8px; font-size: 22px; } @@ -28,6 +27,7 @@ --g-focus-border-radius: 4px; display: flex; + gap: 8px; align-items: center; width: 100%; height: 100%; @@ -40,6 +40,10 @@ font-family: inherit; @include focusable(-2px); + + [dir='rtl'] & { + flex-direction: row-reverse; + } } &__icon-rotated { @@ -62,8 +66,8 @@ &_vertical &__control:not(:last-child), &_vertical &__divider { - margin-right: 0; - margin-bottom: 4px; + margin-inline-end: 0; + margin-block-end: 4px; } } } diff --git a/src/components/Controls/single-controls/LangControl.tsx b/src/components/Controls/single-controls/LangControl.tsx index a411782a..e6497afe 100644 --- a/src/components/Controls/single-controls/LangControl.tsx +++ b/src/components/Controls/single-controls/LangControl.tsx @@ -17,11 +17,13 @@ import '../Controls.scss'; const ICONS: Record = { en: '🇬🇧', ru: '🇷🇺', + he: '🇮🇱', }; -const DEFAULT_LANGS = ['en', 'ru']; +const DEFAULT_LANGS = ['en', 'ru', 'he']; const LEGACY_LANG_ITEMS = [ {value: Lang.En, text: 'English', icon: '🇬🇧'}, {value: Lang.Ru, text: 'Русский', icon: '🇷🇺'}, + {value: Lang.He, text: 'Hebrew', icon: '🇮🇱'}, ]; const b = block('dc-controls'); diff --git a/src/components/Controls/single-controls/SettingsControl/SettingsControl.scss b/src/components/Controls/single-controls/SettingsControl/SettingsControl.scss index dfea0cef..58a3cc99 100644 --- a/src/components/Controls/single-controls/SettingsControl/SettingsControl.scss +++ b/src/components/Controls/single-controls/SettingsControl/SettingsControl.scss @@ -4,6 +4,10 @@ &__text-size-control { display: flex; align-items: center; + + [dir='rtl'] & { + flex-direction: row-reverse; + } } &__text-size-button { @@ -43,13 +47,18 @@ } &__list-icon { - margin-right: 8px; + margin-inline-end: 8px; } &__list-item { display: flex; + justify-content: space-between; padding: 12px; width: 100%; + + [dir='rtl'] & { + flex-direction: row-reverse; + } } &__list-item-description { @@ -59,6 +68,5 @@ &__list-item-control { display: flex; align-items: center; - margin-left: auto; } } diff --git a/src/components/DocLayout/DocLayout.scss b/src/components/DocLayout/DocLayout.scss index d623134d..39dc0118 100644 --- a/src/components/DocLayout/DocLayout.scss +++ b/src/components/DocLayout/DocLayout.scss @@ -20,7 +20,7 @@ &__right { width: 176px; - padding-right: 24px; + padding-inline-end: 24px; &_full-screen, &_hidden-right { flex: initial; @@ -58,8 +58,8 @@ &__toc { position: fixed; z-index: 100; - top: var(--dc-header-height, #{$headerHeight}); - padding-left: 24px; + inset-block-start: var(--dc-header-height, #{$headerHeight}); + padding-inline-start: 24px; width: 252px; box-sizing: content-box; background-color: var(--g-color-base-background); diff --git a/src/components/DocLeadingPage/DocLeadingPage.scss b/src/components/DocLeadingPage/DocLeadingPage.scss index 60845b62..4c234309 100644 --- a/src/components/DocLeadingPage/DocLeadingPage.scss +++ b/src/components/DocLeadingPage/DocLeadingPage.scss @@ -12,7 +12,7 @@ } &__main { - margin-bottom: 40px; + margin-block-end: 40px; padding: 0 40px; } @@ -41,13 +41,13 @@ &_root { flex-direction: row; - margin-top: 70px; - margin-bottom: -$blockMarginBottomLarge; + margin-block-start: 70px; + margin-block-end: -$blockMarginBottomLarge; } } &__links-left { - padding-right: 10px; + padding-inline-end: 10px; } &__links-item { @@ -56,10 +56,10 @@ min-width: 280px; max-width: 400px; width: calc(50% - 20px); - padding-top: 15px; - padding-bottom: 15px; - margin-bottom: $blockMarginBottomLarge; - border-top: 1px solid var(--g-color-line-generic); + padding-block-start: 15px; + padding-block-end: 15px; + margin-block-end: $blockMarginBottomLarge; + border-block-start: 1px solid var(--g-color-line-generic); } } @@ -67,7 +67,7 @@ &_root { @include heading4(); - margin-bottom: 10px; + margin-block-end: 10px; font-weight: 500; } } @@ -78,8 +78,8 @@ @media (max-width: map-get($screenBreakpoints, 'md') - 1) { &__main { - margin-left: 0; - margin-bottom: 40px; + margin-inline-start: 0; + margin-block-end: 40px; padding: 0 20px; } diff --git a/src/components/DocPage/DocPage.scss b/src/components/DocPage/DocPage.scss index 55a759bf..a7dcbaee 100644 --- a/src/components/DocPage/DocPage.scss +++ b/src/components/DocPage/DocPage.scss @@ -10,9 +10,11 @@ &__aside { position: fixed; - top: calc(var(--dc-header-height, #{$headerHeight}) + var(--dc-subheader-height)); + inset-block-start: calc( + var(--dc-header-height, #{$headerHeight}) + var(--dc-subheader-height) + ); - padding-top: 24px; + padding-block-start: 24px; width: 176px; @include text-size(body-1); @@ -36,28 +38,28 @@ &__loader-wrapper { background: var(--g-color-base-background); - padding-top: calc((100vh - var(--dc-header-height, #{$headerHeight})) / 2); + padding-block-start: calc((100vh - var(--dc-header-height, #{$headerHeight})) / 2); display: flex; justify-content: center; position: absolute; width: 100%; - top: 0; + inset-block-start: 0; z-index: 101; height: 100%; } &__controls { display: flex; - top: 0; + inset-block-start: 0; + inset-inline-end: 7px; align-items: center; height: 40px; z-index: 102; position: absolute; - right: 7px; & > .dc-controls { position: fixed; - top: calc(6px + var(--dc-header-height, #{$headerHeight})); + inset-block-start: calc(6px + var(--dc-header-height, #{$headerHeight})); @media (max-width: map-get($screenBreakpoints, 'md') - 1) { position: static; @@ -66,12 +68,12 @@ @media (min-width: map-get($screenBreakpoints, 'md')) { &_vertical { - top: calc(6px + var(--dc-header-height, #{$headerHeight})); + inset-block-start: calc(6px + var(--dc-header-height, #{$headerHeight})); justify-content: center; height: auto; width: 36px; position: absolute; - right: 0; + inset-inline-end: 0; } } } @@ -121,28 +123,28 @@ } &__feedback { - margin-top: 84px; + margin-block-start: 84px; } &__edit-button { position: absolute; - right: 0; + inset-inline-end: 0; } &__title { - margin-bottom: 8px; + margin-block-end: 8px; @include text-size(display-2); } &__content { flex: 1; - margin-bottom: 50px; + margin-block-end: 50px; } &__content-mini-toc { display: none; - margin-bottom: 20px; + margin-block-end: 20px; } &__search-bar { @@ -151,7 +153,7 @@ height: 40px; box-sizing: border-box; position: sticky; - top: calc(var(--dc-header-height, #{$headerHeight}) + 6px); + inset-block-start: calc(var(--dc-header-height, #{$headerHeight}) + 6px); z-index: 101; padding: 0 36px; @@ -161,7 +163,7 @@ } &__search-bar + &__breadcrumbs { - margin-top: 12px; + margin-block-start: 12px; } &_full-screen { @@ -173,8 +175,8 @@ #{$block}__main, & .dc-nav-toc-panel__content { - padding-left: 64px; - padding-right: 64px; + padding-inline-start: 64px; + padding-inline-end: 64px; } } @@ -184,15 +186,15 @@ &#{&}_single-page &__header-container { position: relative; - padding-right: 200px; + padding-inline-end: 200px; } &#{&}_full-screen#{&}_regular-page-width { max-width: 736px; #{$block}__main { - padding-left: 0; - padding-right: 0; + padding-inline-start: 0; + padding-inline-end: 0; } #{$block}__breadcrumbs { @@ -219,11 +221,11 @@ } &__toc-nav-panel { - padding-bottom: 50px; + padding-block-end: 50px; } &__controls { - padding-left: 12px; + padding-inline-start: 12px; position: static; } @@ -252,19 +254,19 @@ @media screen and (min-width: 1024px) { &#{&}_full-screen#{&}_regular-page-width &__controls_vertical { - right: -36px; + inset-inline-end: -36px; } } /* stylelint-disable declaration-no-important */ @media screen and (max-width: 1280px) { &_full-screen &__main, &_full-screen .dc-nav-toc-panel__content { - padding-left: 40px !important; - padding-right: 40px !important; + padding-inline-start: 40px !important; + padding-inline-end: 40px !important; } &_full-screen &__breadcrumbs { - padding-left: 24px !important; - padding-right: 24px !important; + padding-inline-start: 24px !important; + padding-inline-end: 24px !important; } &_regular-page-width { diff --git a/src/components/DocPageTitle/DocPageTitle.scss b/src/components/DocPageTitle/DocPageTitle.scss index 570d6c32..6783cdaf 100644 --- a/src/components/DocPageTitle/DocPageTitle.scss +++ b/src/components/DocPageTitle/DocPageTitle.scss @@ -3,7 +3,7 @@ &__label { position: absolute; - left: 0; - top: -11px; + inset-inline-start: 0; + inset-block-start: -11px; } } diff --git a/src/components/ErrorPage/ErrorPage.scss b/src/components/ErrorPage/ErrorPage.scss index e3b64a64..97cd81c2 100644 --- a/src/components/ErrorPage/ErrorPage.scss +++ b/src/components/ErrorPage/ErrorPage.scss @@ -5,14 +5,14 @@ display: flex; flex-direction: column; align-items: center; - margin-top: 70px; + margin-block-start: 70px; padding: 0 50px; text-align: center; &__image { width: 230px; height: 230px; - margin-bottom: 40px; + margin-block-end: 40px; background-size: contain; background-repeat: no-repeat; @@ -35,14 +35,14 @@ } &__code { - margin-bottom: 10px; + margin-block-end: 10px; } &__title { @include heading3(); max-width: 800px; - margin-bottom: 20px; + margin-block-end: 20px; } &__description { @@ -63,7 +63,7 @@ } .mobile & { - margin-top: 40px; + margin-block-start: 40px; padding: 0 20px; } } diff --git a/src/components/Feedback/Feedback.scss b/src/components/Feedback/Feedback.scss index 92469aaf..bc581f10 100644 --- a/src/components/Feedback/Feedback.scss +++ b/src/components/Feedback/Feedback.scss @@ -7,8 +7,8 @@ $popupWidth: 320px; @media screen and (max-width: map-get($screenBreakpoints, 'xs')) { & { // stylelint-disable declaration-no-important - right: 0 !important; - left: 0 !important; + inset-inline-end: 0 !important; + inset-inline-start: 0 !important; margin: auto; } } @@ -60,7 +60,7 @@ $popupWidth: 320px; &__popup-title { font-size: var(--g-text-body-2-font-size); line-height: var(--g-text-body-2-line-height); - padding-bottom: 8px; + padding-block-end: 8px; } &__popup-text { @@ -75,22 +75,22 @@ $popupWidth: 320px; } &__variant { - margin-bottom: 8px; + margin-block-end: 8px; white-space: normal; } &__variant:last-child { - margin-bottom: 0; + margin-block-end: 0; } &__variants-actions { - padding-top: 8px; + padding-block-start: 8px; display: flex; justify-content: flex-end; } &__variants-action { - margin-left: 10px; + margin-inline-start: 10px; } &__textarea { @@ -101,7 +101,7 @@ $popupWidth: 320px; &_view_wide { font-size: var(--g-text-body-2-font-size); line-height: var(--g-text-body-2-line-height); - margin-right: 16px; + margin-inline-end: 16px; font-weight: 400; } } @@ -124,18 +124,18 @@ $popupWidth: 320px; } &_view_wide { - margin-right: 12px; + margin-inline-end: 12px; &:last-child { - margin-right: 0; + margin-inline-end: 0; } } &_view_regular { - margin-right: 4px; + margin-inline-end: 4px; &:last-child { - margin-right: 0; + margin-inline-end: 0; } } } diff --git a/src/components/MiniToc/MiniToc.scss b/src/components/MiniToc/MiniToc.scss index 25d7f371..76ec5761 100644 --- a/src/components/MiniToc/MiniToc.scss +++ b/src/components/MiniToc/MiniToc.scss @@ -8,7 +8,7 @@ @include text-size(body-2); font-weight: 500; color: var(--g-color-text-primary); - margin-bottom: 12px; + margin-block-end: 12px; } &__sections { @@ -25,7 +25,7 @@ display: block; & > #{$class}__section-link { - border-left-color: var(--g-color-line-generic); + border-inline-start-color: var(--g-color-line-generic); @include focusable(-2px); } @@ -37,7 +37,7 @@ min-height: 28px; color: var(--g-color-text-secondary); - border-left: 2px solid transparent; + border-inline-start: 2px solid transparent; text-decoration: none; &:hover { @@ -47,13 +47,13 @@ &_child { #{$class}__section-link { - padding-left: 25px; + padding-inline-start: 25px; } } &_active > #{$class}__section-link { color: var(--g-color-text-primary); - border-left-color: var(--g-color-text-primary); + border-inline-start-color: var(--g-color-text-primary); } } } diff --git a/src/components/Paginator/Paginator.scss b/src/components/Paginator/Paginator.scss index 03e27066..c7ba4abe 100644 --- a/src/components/Paginator/Paginator.scss +++ b/src/components/Paginator/Paginator.scss @@ -9,6 +9,10 @@ display: flex; align-items: center; + [dir='rtl'] & { + flex-direction: row-reverse; + } + &__item { $item: &; @@ -25,7 +29,7 @@ &_type { &_prev { - margin-left: -6px; + margin-inline-start: -6px; } &_dots { @@ -49,7 +53,7 @@ } &_next { - margin-right: -6px; + margin-inline-end: -6px; } } } diff --git a/src/components/SearchBar/SearchBar.scss b/src/components/SearchBar/SearchBar.scss index 43560404..edbdd9e9 100644 --- a/src/components/SearchBar/SearchBar.scss +++ b/src/components/SearchBar/SearchBar.scss @@ -46,7 +46,7 @@ &__navigation { display: flex; align-items: center; - margin-right: 11px; + margin-inline-end: 11px; } &__next-arrow { diff --git a/src/components/SearchItem/SearchItem.scss b/src/components/SearchItem/SearchItem.scss index a9cf5442..7ea16061 100644 --- a/src/components/SearchItem/SearchItem.scss +++ b/src/components/SearchItem/SearchItem.scss @@ -20,14 +20,14 @@ &__marks { height: 16px; - margin-top: 10px; + margin-block-start: 10px; } &__mark { - margin-right: 20px; + margin-inline-end: 20px; &:last-child { - margin-right: 0; + margin-inline-end: 0; } } @@ -36,7 +36,7 @@ } &__item-wrapper { - margin-bottom: 20px; + margin-block-end: 20px; @include text-size(body-1); } @@ -59,7 +59,7 @@ } &-title { - margin-bottom: 4px; + margin-block-end: 4px; } &-title, diff --git a/src/components/SearchPage/SearchPage.scss b/src/components/SearchPage/SearchPage.scss index 57a0b559..781003a5 100644 --- a/src/components/SearchPage/SearchPage.scss +++ b/src/components/SearchPage/SearchPage.scss @@ -2,7 +2,7 @@ @import '../../styles/mixins'; .dc-search-page { - margin-top: 26px; + margin-block-start: 26px; display: flex; justify-content: center; @@ -14,30 +14,34 @@ &__search-field-wrapper { display: flex; align-items: center; + + [dir='rtl'] & { + flex-direction: row-reverse; + } } &__search-button { - margin-left: 10px; + margin-inline-start: 10px; } &__search { &-field, &-item { - margin-bottom: 36px; + margin-block-end: 36px; } } &__subtitle { - margin-bottom: 18px; + margin-block-end: 18px; } &__paginator { padding: 10px 0; - border-top: 1px solid var(--g-color-line-generic); + border-block-start: 1px solid var(--g-color-line-generic); } @media (max-width: map-get($screenBreakpoints, 'md')) { - margin-top: 16px; + margin-block-start: 16px; &__layout { padding: 0 12px; @@ -45,11 +49,11 @@ &__search { &-field { - margin-bottom: 24px; + margin-block-end: 24px; } &-item { - margin-bottom: 40px; + margin-block-end: 40px; } } } diff --git a/src/components/Subscribe/Subscribe.scss b/src/components/Subscribe/Subscribe.scss index a1f3e245..a65f97b1 100644 --- a/src/components/Subscribe/Subscribe.scss +++ b/src/components/Subscribe/Subscribe.scss @@ -7,8 +7,8 @@ $popupWidth: 320px; @media screen and (max-width: map-get($screenBreakpoints, 'xs')) { & { // stylelint-disable declaration-no-important - right: 0 !important; - left: 0 !important; + inset-inline-end: 0 !important; + inset-inline-start: 0 !important; margin: auto; } } @@ -60,7 +60,7 @@ $popupWidth: 320px; &__popup-title { font-size: var(--g-text-body2-font-size); line-height: var(--g-text-body2-line-height); - padding-bottom: 8px; + padding-block-end: 8px; } &__popup-text { @@ -74,7 +74,7 @@ $popupWidth: 320px; } &__variants-action { - margin-left: 10px; + margin-inline-start: 10px; } &__variant__list-item { @@ -89,7 +89,7 @@ $popupWidth: 320px; &_view_wide { font-size: var(--g-text-body2-font-size); line-height: var(--g-text-body2-line-height); - margin-right: 16px; + margin-inline-end: 16px; font-weight: 400; } } @@ -111,18 +111,18 @@ $popupWidth: 320px; } &_view_wide { - margin-right: 12px; + margin-inline-end: 12px; &:last-child { - margin-right: 0; + margin-inline-end: 0; } } &_view_regular { - margin-right: 4px; + margin-inline-end: 4px; &:last-child { - margin-right: 0; + margin-inline-end: 0; } } } diff --git a/src/components/Toc/Toc.scss b/src/components/Toc/Toc.scss index e83b4b8d..6acb3205 100644 --- a/src/components/Toc/Toc.scss +++ b/src/components/Toc/Toc.scss @@ -17,11 +17,11 @@ $leftOffset: 57px; flex-direction: column; height: calc(100vh - var(--dc-header-height, #{$headerHeight})); overflow-y: hidden; - border-right: 1px solid var(--g-color-line-generic); + border-inline-end: 1px solid var(--g-color-line-generic); .mobile & { - border-top: 1px solid var(--g-color-line-generic); - border-right: none; + border-block-start: 1px solid var(--g-color-line-generic); + border-inline-end: none; } &__empty { @@ -36,12 +36,12 @@ $leftOffset: 57px; padding: 10px 10px 8px 0; &_scrolled { - border-bottom: 1px solid var(--g-color-line-generic); + border-block-end: 1px solid var(--g-color-line-generic); } &-header-icon { display: flex; - margin-right: 5px; + margin-inline-end: 5px; flex-shrink: 0; } @@ -77,7 +77,7 @@ $leftOffset: 57px; padding: 4px 10px 20px 0; &_scrolled { - border-top: 1px solid var(--g-color-line-generic); + border-block-start: 1px solid var(--g-color-line-generic); } } @@ -90,7 +90,7 @@ $leftOffset: 57px; scrollbar-width: thin; &_offset_top { - padding-top: 24px; + padding-block-start: 24px; } } @@ -113,13 +113,13 @@ $leftOffset: 57px; // recurcive padding > #{$class}__list { - padding-left: 20px; + padding-inline-start: 20px; } } } &__content > &__list { - padding-right: 21px; - padding-bottom: 30px; + padding-inline-end: 21px; + padding-block-end: 30px; } } diff --git a/src/components/TocItem/TocItem.scss b/src/components/TocItem/TocItem.scss index 70942fea..f2c3ea5c 100644 --- a/src/components/TocItem/TocItem.scss +++ b/src/components/TocItem/TocItem.scss @@ -24,7 +24,8 @@ font-weight: inherit; position: relative; - padding: 7px 12px 7px 20px; + padding-block: 7px; + padding-inline: 20px 12px; box-sizing: border-box; word-break: break-word; background-color: transparent; @@ -44,10 +45,10 @@ &::before { content: ''; position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; // hack: to be shure that it will always start from the left of the TOC - left: -100vw; + inset-inline-start: -100vw; height: 100%; } @@ -60,6 +61,6 @@ &__icon { position: absolute; - left: 0; + inset-inline-start: 0; } } diff --git a/src/components/TocNavPanel/TocNavPanel.scss b/src/components/TocNavPanel/TocNavPanel.scss index de4236a1..d8c5b801 100644 --- a/src/components/TocNavPanel/TocNavPanel.scss +++ b/src/components/TocNavPanel/TocNavPanel.scss @@ -10,10 +10,10 @@ &_fixed { position: fixed; - bottom: 0; + inset-block-end: 0; z-index: 1000; - left: 0; - border-top: 1px solid var(--g-color-line-generic); + inset-inline-start: 0; + border-block-start: 1px solid var(--g-color-line-generic); } &_fixed &__control-hint { @@ -45,16 +45,24 @@ } & svg { - margin-top: -1px; + margin-block-start: -1px; min-width: 16px; } &_left svg { - margin-right: 6px; + margin-inline-end: 6px; + + [dir='rtl'] & { + transform: rotate(180deg); + } } &_right svg { - margin-left: 6px; + margin-inline-start: 6px; + + [dir='rtl'] & { + transform: rotate(180deg); + } } } diff --git a/src/components/ToggleArrow/ToggleArrow.scss b/src/components/ToggleArrow/ToggleArrow.scss index 669daf5b..29feb5d6 100644 --- a/src/components/ToggleArrow/ToggleArrow.scss +++ b/src/components/ToggleArrow/ToggleArrow.scss @@ -6,6 +6,10 @@ &_type { &_horizontal { transform: rotate(0deg); + + [dir='rtl'] & { + transform: rotate(180deg); + } } &_vertical { @@ -16,10 +20,18 @@ &_open { &#{$root}_type_horizontal { transform: rotate(90deg); + + [dir='rtl'] & { + transform: rotate(90deg); + } } &#{$root}_type_vertical { transform: rotate(-90deg); + + [dir='rtl'] & { + transform: rotate(90deg); + } } } diff --git a/src/models/index.ts b/src/models/index.ts index fe2315e2..6238747b 100644 --- a/src/models/index.ts +++ b/src/models/index.ts @@ -124,6 +124,7 @@ export interface Router { export enum Lang { Ru = 'ru', En = 'en', + He = 'he', } export interface Contributor { diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index f093cb1f..67e5c6c6 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -12,8 +12,8 @@ } @mixin fixAnchorPosition($offset: 0px) { - padding-top: calc(var(--dc-header-height, #{$headerHeight})); - margin-top: calc(#{$offset} - var(--dc-header-height, #{$headerHeight})); + padding-block-start: calc(var(--dc-header-height, #{$headerHeight})); + margin-block-start: calc(#{$offset} - var(--dc-header-height, #{$headerHeight})); } @mixin reset-link-style() { @@ -103,7 +103,7 @@ @mixin contributors-text() { font-size: 13px; font-weight: 400; - margin-right: 5px; + margin-inline-end: 5px; align-self: center; } diff --git a/src/styles/yfm.scss b/src/styles/yfm.scss index 99249e6e..b437372d 100644 --- a/src/styles/yfm.scss +++ b/src/styles/yfm.scss @@ -96,11 +96,11 @@ } blockquote { - border-left-color: var(--g-color-base-brand); + border-inline-start-color: var(--g-color-base-brand); } .yfm-tab-list { - border-bottom-color: var(--g-color-line-generic); + border-block-end-color: var(--g-color-line-generic); } .yfm-tab { @@ -114,12 +114,12 @@ } .yfm-tab.active { - border-bottom-color: var(--g-color-base-brand); + border-block-end-color: var(--g-color-base-brand); } /* TODO: move yfm-cut styles to yfm-transform */ .yfm-cut { - margin-bottom: $blockMarginBottomMedium; + margin-block-end: $blockMarginBottomMedium; } .yfm-cut.open .yfm-cut-content { @@ -131,11 +131,11 @@ } // Margin collapse is not applied for a block and header with a negative margin. - // The margin is summed up. So, we need to take 15px away from the header margin-top + // The margin is summed up. So, we need to take 15px away from the header margin-block-start h1, h2 { @include fixAnchorPosition(calc(#{$headerMarginTopLarge} - #{$blockMarginBottomMedium})); - margin-bottom: $blockMarginBottomLarge; + margin-block-end: $blockMarginBottomLarge; } h3, @@ -170,8 +170,8 @@ height: 4px; border-radius: 2px; background: var(--g-color-line-generic); - margin-top: 20px; - margin-bottom: 0; + margin-block-start: 20px; + margin-block-end: 0; & + h1, & + h2,