From 86e4d023ed92272fb7c23d3939aa506573717f93 Mon Sep 17 00:00:00 2001 From: martyanov-av Date: Fri, 22 Dec 2023 10:28:08 +0300 Subject: [PATCH] feat!: use logical CSS properties --- .stylelintrc | 3 +- package.json | 1 + .../ContributorAvatars.scss | 12 ++-- src/components/Controls/Controls.scss | 6 +- .../SettingsControl/SettingsControl.scss | 10 +++- src/components/DocLayout/DocLayout.scss | 6 +- .../DocLeadingPage/DocLeadingPage.scss | 22 +++---- src/components/DocPage/DocPage.scss | 60 ++++++++++--------- src/components/DocPageTitle/DocPageTitle.scss | 4 +- src/components/ErrorPage/ErrorPage.scss | 10 ++-- src/components/Feedback/Feedback.scss | 24 ++++---- src/components/MiniToc/MiniToc.scss | 10 ++-- src/components/Paginator/Paginator.scss | 4 +- src/components/SearchBar/SearchBar.scss | 2 +- src/components/SearchItem/SearchItem.scss | 10 ++-- src/components/SearchPage/SearchPage.scss | 16 ++--- src/components/Subscribe/Subscribe.scss | 18 +++--- src/components/Toc/Toc.scss | 28 ++++----- src/components/TocItem/TocItem.scss | 12 ++-- src/components/TocNavPanel/TocNavPanel.scss | 16 ++--- src/styles/mixins.scss | 6 +- src/styles/yfm.scss | 16 ++--- 22 files changed, 146 insertions(+), 150 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 7b6bbc76..143025b9 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -3,6 +3,7 @@ "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-colon-space-after": "always-single-line", + "declaration-block-no-redundant-longhand-properties": null } } \ No newline at end of file diff --git a/package.json b/package.json index bb708bde..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", 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 cb1c6106..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 { @@ -66,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/SettingsControl/SettingsControl.scss b/src/components/Controls/single-controls/SettingsControl/SettingsControl.scss index f580da3c..8bb8b48e 100644 --- a/src/components/Controls/single-controls/SettingsControl/SettingsControl.scss +++ b/src/components/Controls/single-controls/SettingsControl/SettingsControl.scss @@ -47,7 +47,7 @@ } &__list-icon { - margin-right: 8px; + margin-inline-end: 8px; } &__list-item { @@ -67,10 +67,14 @@ &__list-item-control { display: flex; align-items: center; - margin-left: auto; + margin-inline-start: auto; [dir='rtl'] & { - margin: 0 auto 0 0; + margin-inline-end: auto; + } + + [dir='rtl'] & > label { + transform: rotate(180deg); } } } 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 036c016b..6a598836 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,33 +38,33 @@ &__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; [dir='rtl'] & { flex-direction: row-reverse; - left: -210px; + inset-inline-start: -210px; } & > .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; @@ -71,12 +73,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; } } } @@ -126,28 +128,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 { @@ -156,7 +158,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; @@ -166,7 +168,7 @@ } &__search-bar + &__breadcrumbs { - margin-top: 12px; + margin-block-start: 12px; } &_full-screen { @@ -178,8 +180,8 @@ #{$block}__main, & .dc-nav-toc-panel__content { - padding-left: 64px; - padding-right: 64px; + padding-inline-start: 64px; + padding-inline-end: 64px; } } @@ -189,15 +191,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 { @@ -224,11 +226,11 @@ } &__toc-nav-panel { - padding-bottom: 50px; + padding-block-end: 50px; } &__controls { - padding-left: 12px; + padding-inline-start: 12px; position: static; } @@ -257,19 +259,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 dd46a713..c7ba4abe 100644 --- a/src/components/Paginator/Paginator.scss +++ b/src/components/Paginator/Paginator.scss @@ -29,7 +29,7 @@ &_type { &_prev { - margin-left: -6px; + margin-inline-start: -6px; } &_dots { @@ -53,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 a1c6c115..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; @@ -21,27 +21,27 @@ } &__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; @@ -49,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 1c30226b..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,17 +36,13 @@ $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; - - [dir='rtl'] & { - margin-left: 5px; - } } &-header { @@ -81,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); } } @@ -94,7 +90,7 @@ $leftOffset: 57px; scrollbar-width: thin; &_offset_top { - padding-top: 24px; + padding-block-start: 24px; } } @@ -117,17 +113,13 @@ $leftOffset: 57px; // recurcive padding > #{$class}__list { - padding-left: 20px; - - [dir='rtl'] & { - padding-right: 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 4e44d996..c86a0233 100644 --- a/src/components/TocItem/TocItem.scss +++ b/src/components/TocItem/TocItem.scss @@ -48,10 +48,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%; } @@ -64,10 +64,6 @@ &__icon { position: absolute; - left: 0; - - [dir='rtl'] & { - right: 0; - } + inset-inline-start: 0; } } diff --git a/src/components/TocNavPanel/TocNavPanel.scss b/src/components/TocNavPanel/TocNavPanel.scss index c87a89a1..fb240502 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,24 +45,24 @@ } & svg { - margin-top: -1px; + margin-block-start: -1px; min-width: 16px; } &_left svg { - margin-right: 6px; + margin-inline-end: 6px; [dir='rtl'] & { - margin-left: 6px; + margin-inline-start: 6px; transform: rotate(180deg); } } &_right svg { - margin-left: 6px; + margin-inline-start: 6px; [dir='rtl'] & { - margin-right: 6px; + margin-inline-end: 6px; transform: rotate(180deg); } } 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,