Skip to content

Commit

Permalink
feat!: use logical CSS properties
Browse files Browse the repository at this point in the history
  • Loading branch information
@martyanovandrey
martyanovandrey committed Dec 22, 2023
1 parent f5d4e36 commit 86e4d02
Show file tree
Hide file tree
Showing 22 changed files with 146 additions and 150 deletions.
3 changes: 2 additions & 1 deletion .stylelintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
12 changes: 6 additions & 6 deletions src/components/ContributorAvatars/ContributorAvatars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -51,7 +51,7 @@ $avatarWrapperBigSize: 33px;
}

& > *:not(:last-child) {
margin-right: 0px;
margin-inline-end: 0px;
}
}

Expand All @@ -61,7 +61,7 @@ $avatarWrapperBigSize: 33px;
}

& > *:last-child {
margin-right: 0px;
margin-inline-end: 0px;
}
}
}
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -157,7 +157,7 @@ $avatarWrapperBigSize: 33px;
padding: $detailsIndent;

& > *:not(:last-child) {
margin-bottom: $detailsIndent;
margin-block-end: $detailsIndent;
}
}
}
6 changes: 3 additions & 3 deletions src/components/Controls/Controls.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

&__control:not(:last-child),
&__divider {
margin-right: 4px;
margin-inline-end: 4px;
}

&__list {
Expand Down Expand Up @@ -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;
}
}
}
10 changes: 7 additions & 3 deletions src/components/Controls/single-controls/SettingsControl/SettingsControl.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
}

&__list-icon {
margin-right: 8px;
margin-inline-end: 8px;
}

&__list-item {
Expand All @@ -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);
}
}
}
6 changes: 3 additions & 3 deletions src/components/DocLayout/DocLayout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

&__right {
width: 176px;
padding-right: 24px;
padding-inline-end: 24px;
&_full-screen,
&_hidden-right {
flex: initial;
Expand Down Expand Up @@ -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);
Expand Down
22 changes: 11 additions & 11 deletions src/components/DocLeadingPage/DocLeadingPage.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
}

&__main {
margin-bottom: 40px;
margin-block-end: 40px;
padding: 0 40px;
}

Expand Down Expand Up @@ -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 {
Expand All @@ -56,18 +56,18 @@
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);
}
}

&__links-title {
&_root {
@include heading4();

margin-bottom: 10px;
margin-block-end: 10px;
font-weight: 500;
}
}
Expand All @@ -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;
}

Expand Down
60 changes: 31 additions & 29 deletions src/components/DocPage/DocPage.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
Expand All @@ -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;
}
}
}
Expand Down Expand Up @@ -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 {
Expand All @@ -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;

Expand All @@ -166,7 +168,7 @@
}

&__search-bar + &__breadcrumbs {
margin-top: 12px;
margin-block-start: 12px;
}

&_full-screen {
Expand All @@ -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;
}
}

Expand All @@ -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 {
Expand All @@ -224,11 +226,11 @@
}

&__toc-nav-panel {
padding-bottom: 50px;
padding-block-end: 50px;
}

&__controls {
padding-left: 12px;
padding-inline-start: 12px;

position: static;
}
Expand Down Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions src/components/DocPageTitle/DocPageTitle.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

&__label {
position: absolute;
left: 0;
top: -11px;
inset-inline-start: 0;
inset-block-start: -11px;
}
}
Loading

0 comments on commit 86e4d02

Please sign in to comment.