Skip to content

Commit 079dea2

Browse files
timvandermeijtimvandermeij
authored
Merge pull request #14670 from Snuffleupagus/postcss-logical
Replace `dir`-dependent `margin`/`margin-left`/`margin-right` with logical properties
2 parents 6f2bae6 + c99d558 commit 079dea2

File tree

4 files changed

+111
-85
lines changed

4 files changed

+111
-85
lines changed

‎gulpfile.js

+37-6
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
"use strict";
1818

1919
const autoprefixer = require("autoprefixer");
20-
const calc = require("postcss-calc");
20+
const postcssCalc = require("postcss-calc");
21+
const postcssDirPseudoClass = require("postcss-dir-pseudo-class");
22+
const postcssLogical = require("postcss-logical");
2123
const fs = require("fs");
2224
const gulp = require("gulp");
2325
const postcss = require("gulp-postcss");
@@ -849,7 +851,14 @@ function buildGeneric(defines, dir) {
849851

850852
preprocessHTML("web/viewer.html", defines).pipe(gulp.dest(dir + "web")),
851853
preprocessCSS("web/viewer.css", defines)
852-
.pipe(postcss([calc(), autoprefixer(AUTOPREFIXER_CONFIG)]))
854+
.pipe(
855+
postcss([
856+
postcssCalc(),
857+
postcssLogical({ preserve: true }),
858+
postcssDirPseudoClass(),
859+
autoprefixer(AUTOPREFIXER_CONFIG),
860+
])
861+
)
853862
.pipe(gulp.dest(dir + "web")),
854863

855864
gulp
@@ -925,7 +934,14 @@ function buildComponents(defines, dir) {
925934
createComponentsBundle(defines).pipe(gulp.dest(dir)),
926935
gulp.src(COMPONENTS_IMAGES).pipe(gulp.dest(dir + "images")),
927936
preprocessCSS("web/pdf_viewer.css", defines)
928-
.pipe(postcss([calc(), autoprefixer(AUTOPREFIXER_CONFIG)]))
937+
.pipe(
938+
postcss([
939+
postcssCalc(),
940+
postcssLogical({ preserve: true }),
941+
postcssDirPseudoClass(),
942+
autoprefixer(AUTOPREFIXER_CONFIG),
943+
])
944+
)
929945
.pipe(gulp.dest(dir)),
930946
]);
931947
}
@@ -1015,7 +1031,14 @@ function buildMinified(defines, dir) {
10151031

10161032
preprocessHTML("web/viewer.html", defines).pipe(gulp.dest(dir + "web")),
10171033
preprocessCSS("web/viewer.css", defines)
1018-
.pipe(postcss([calc(), autoprefixer(AUTOPREFIXER_CONFIG)]))
1034+
.pipe(
1035+
postcss([
1036+
postcssCalc(),
1037+
postcssLogical({ preserve: true }),
1038+
postcssDirPseudoClass(),
1039+
autoprefixer(AUTOPREFIXER_CONFIG),
1040+
])
1041+
)
10191042
.pipe(gulp.dest(dir + "web")),
10201043

10211044
gulp
@@ -1338,7 +1361,11 @@ gulp.task(
13381361
),
13391362
preprocessCSS("web/viewer.css", defines)
13401363
.pipe(
1341-
postcss([autoprefixer({ overrideBrowserslist: ["Chrome >= 73"] })])
1364+
postcss([
1365+
postcssLogical({ preserve: true }),
1366+
postcssDirPseudoClass(),
1367+
autoprefixer({ overrideBrowserslist: ["Chrome >= 73"] }),
1368+
])
13421369
)
13431370
.pipe(gulp.dest(CHROME_BUILD_CONTENT_DIR + "web")),
13441371

@@ -1873,7 +1900,11 @@ gulp.task("dev-css", function createDevCSS() {
18731900

18741901
preprocessCSS("web/viewer.css", defines)
18751902
.pipe(
1876-
postcss([autoprefixer({ overrideBrowserslist: ["last 2 versions"] })])
1903+
postcss([
1904+
postcssLogical({ preserve: true }),
1905+
postcssDirPseudoClass(),
1906+
autoprefixer({ overrideBrowserslist: ["last 2 versions"] }),
1907+
])
18771908
)
18781909
.pipe(gulp.dest(cssDir)),
18791910
]);

‎package-lock.json

+45
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@
4141
"needle": "^3.0.0",
4242
"postcss": "^8.4.7",
4343
"postcss-calc": "^8.2.4",
44+
"postcss-dir-pseudo-class": "^6.0.4",
45+
"postcss-logical": "^5.0.4",
4446
"prettier": "^2.5.1",
4547
"puppeteer": "^13.4.1",
4648
"rimraf": "^3.0.2",

‎web/viewer.css

+27-79
Original file line numberDiff line numberDiff line change
@@ -355,18 +355,11 @@ html[dir="rtl"] #toolbarSidebar {
355355
0 0 1px rgba(0, 0, 0, 0.1);
356356
}
357357

358-
html[dir="ltr"] #toolbarSidebar .toolbarButton {
359-
margin-right: 2px !important;
358+
#toolbarSidebar .toolbarButton {
359+
margin-inline-end: 2px !important;
360360
}
361-
html[dir="rtl"] #toolbarSidebar .toolbarButton {
362-
margin-left: 2px !important;
363-
}
364-
365-
html[dir="ltr"] #toolbarSidebarRight .toolbarButton {
366-
margin-right: 3px !important;
367-
}
368-
html[dir="rtl"] #toolbarSidebarRight .toolbarButton {
369-
margin-left: 3px !important;
361+
#toolbarSidebarRight .toolbarButton {
362+
margin-inline-end: 3px !important;
370363
}
371364

372365
#sidebarResizer {
@@ -510,14 +503,7 @@ html[dir="rtl"] .findbar {
510503

511504
.findbar .splitToolbarButton {
512505
margin-top: 3px;
513-
}
514-
html[dir="ltr"] .findbar .splitToolbarButton {
515-
margin-left: 0;
516-
margin-right: 5px;
517-
}
518-
html[dir="rtl"] .findbar .splitToolbarButton {
519-
margin-left: 5px;
520-
margin-right: 0;
506+
margin-inline: 0 5px;
521507
}
522508

523509
.findbar .splitToolbarButton > .toolbarButton {
@@ -627,52 +613,36 @@ html[dir="rtl"] .secondaryToolbar {
627613
.doorHangerRight:after,
628614
.doorHangerRight:before {
629615
bottom: 100%;
630-
border: solid rgba(0, 0, 0, 0);
616+
border: 8px solid rgba(0, 0, 0, 0);
631617
content: " ";
632618
height: 0;
633619
width: 0;
634620
position: absolute;
635621
pointer-events: none;
636622
opacity: var(--doorhanger-triangle-opacity-whcm);
637623
}
638-
.doorHanger:after,
639-
.doorHangerRight:after {
640-
border-width: 8px;
641-
}
642624
.doorHanger:after {
625+
inset-inline-start: 10px;
626+
margin-inline-start: -8px;
643627
border-bottom-color: var(--toolbar-bg-color);
644628
}
645629
.doorHangerRight:after {
630+
inset-inline-end: 10px;
631+
margin-inline-end: -8px;
646632
border-bottom-color: var(--doorhanger-bg-color);
647633
}
648634
.doorHanger:before,
649635
.doorHangerRight:before {
650636
border-bottom-color: var(--doorhanger-border-color);
651637
border-width: 9px;
652638
}
653-
654-
html[dir="ltr"] .doorHanger:after,
655-
html[dir="rtl"] .doorHangerRight:after {
656-
left: 10px;
657-
margin-left: -8px;
658-
}
659-
660-
html[dir="ltr"] .doorHanger:before,
661-
html[dir="rtl"] .doorHangerRight:before {
662-
left: 10px;
663-
margin-left: -9px;
639+
.doorHanger:before {
640+
inset-inline-start: 10px;
641+
margin-inline-start: -9px;
664642
}
665-
666-
html[dir="rtl"] .doorHanger:after,
667-
html[dir="ltr"] .doorHangerRight:after {
668-
right: 10px;
669-
margin-right: -8px;
670-
}
671-
672-
html[dir="rtl"] .doorHanger:before,
673-
html[dir="ltr"] .doorHangerRight:before {
674-
right: 10px;
675-
margin-right: -9px;
643+
.doorHangerRight:before {
644+
inset-inline-end: 10px;
645+
margin-inline-end: -9px;
676646
}
677647

678648
#findResultsCount {
@@ -788,9 +758,7 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton {
788758
position: relative;
789759
}
790760
html[dir="ltr"] .splitToolbarButton > .toolbarButton:first-child,
791-
html[dir="rtl"] .splitToolbarButton > .toolbarButton:last-child {
792-
margin: 0;
793-
}
761+
html[dir="rtl"] .splitToolbarButton > .toolbarButton:last-child,
794762
html[dir="ltr"] .splitToolbarButton > .toolbarButton:last-child,
795763
html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child {
796764
margin: 0;
@@ -834,15 +802,13 @@ html[dir="rtl"] .splitToolbarButtonSeparator {
834802
box-sizing: border-box;
835803
}
836804

837-
html[dir="ltr"] #toolbarViewerLeft > .toolbarButton:first-child,
838-
html[dir="rtl"] #toolbarViewerRight > .toolbarButton:last-child {
839-
margin-left: 2px;
805+
#toolbarViewerLeft > .toolbarButton:first-child {
806+
margin-inline-start: 2px;
840807
}
841-
842-
html[dir="ltr"] #toolbarViewerRight > .toolbarButton:last-child,
843-
html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child {
844-
margin-right: 2px;
808+
#toolbarViewerRight > .toolbarButton:last-child {
809+
margin-inline-end: 2px;
845810
}
811+
846812
.toolbarButton:hover,
847813
.toolbarButton:focus-visible {
848814
background-color: var(--button-hover-color);
@@ -1178,12 +1144,6 @@ html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after {
11781144
width: 1px;
11791145
background-color: var(--separator-color);
11801146
}
1181-
html[dir="ltr"] .verticalToolbarSeparator {
1182-
margin-left: 2px;
1183-
}
1184-
html[dir="rtl"] .verticalToolbarSeparator {
1185-
margin-right: 2px;
1186-
}
11871147

11881148
.horizontalToolbarSeparator {
11891149
display: block;
@@ -1213,14 +1173,8 @@ html[dir="rtl"] .verticalToolbarSeparator {
12131173
opacity: 0;
12141174
position: absolute !important;
12151175
left: 0;
1216-
}
1217-
1218-
html[dir="ltr"] .toolbarField[type="checkbox"] {
1219-
margin: 10px 0 3px 7px;
1220-
}
1221-
1222-
html[dir="rtl"] .toolbarField[type="checkbox"] {
1223-
margin: 10px 7px 3px 0;
1176+
margin: 10px 0 3px;
1177+
margin-inline-start: 7px;
12241178
}
12251179

12261180
.toolbarField.pageNumber {
@@ -1288,7 +1242,6 @@ html[dir="rtl"] .thumbnail {
12881242
#thumbnailView > a:last-of-type > .thumbnail {
12891243
margin-bottom: 10px;
12901244
}
1291-
12921245
#thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
12931246
margin-bottom: 9px;
12941247
}
@@ -1346,14 +1299,9 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
13461299
user-select: none;
13471300
}
13481301

1349-
html[dir="ltr"] .treeWithDeepNesting > .treeItem,
1350-
html[dir="ltr"] .treeItem > .treeItems {
1351-
margin-left: 20px;
1352-
}
1353-
1354-
html[dir="rtl"] .treeWithDeepNesting > .treeItem,
1355-
html[dir="rtl"] .treeItem > .treeItems {
1356-
margin-right: 20px;
1302+
.treeWithDeepNesting > .treeItem,
1303+
.treeItem > .treeItems {
1304+
margin-inline-start: 20px;
13571305
}
13581306

13591307
.treeItem > a {

0 commit comments

Comments
 (0)