Skip to content

Commit

Permalink
Merge pull request #14670 from Snuffleupagus/postcss-logical
Browse files Browse the repository at this point in the history 
Replace `dir`-dependent `margin`/`margin-left`/`margin-right` with logical properties
  • Loading branch information
@timvandermeij
timvandermeij authored Mar 19, 2022
2 parents 6f2bae6 + c99d558 commit 079dea2
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 85 deletions.
43 changes: 37 additions & 6 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@
"use strict";

const autoprefixer = require("autoprefixer");
const calc = require("postcss-calc");
const postcssCalc = require("postcss-calc");
const postcssDirPseudoClass = require("postcss-dir-pseudo-class");
const postcssLogical = require("postcss-logical");
const fs = require("fs");
const gulp = require("gulp");
const postcss = require("gulp-postcss");
Expand Down Expand Up @@ -849,7 +851,14 @@ function buildGeneric(defines, dir) {

preprocessHTML("web/viewer.html", defines).pipe(gulp.dest(dir + "web")),
preprocessCSS("web/viewer.css", defines)
.pipe(postcss([calc(), autoprefixer(AUTOPREFIXER_CONFIG)]))
.pipe(
postcss([
postcssCalc(),
postcssLogical({ preserve: true }),
postcssDirPseudoClass(),
autoprefixer(AUTOPREFIXER_CONFIG),
])
)
.pipe(gulp.dest(dir + "web")),

gulp
Expand Down Expand Up @@ -925,7 +934,14 @@ function buildComponents(defines, dir) {
createComponentsBundle(defines).pipe(gulp.dest(dir)),
gulp.src(COMPONENTS_IMAGES).pipe(gulp.dest(dir + "images")),
preprocessCSS("web/pdf_viewer.css", defines)
.pipe(postcss([calc(), autoprefixer(AUTOPREFIXER_CONFIG)]))
.pipe(
postcss([
postcssCalc(),
postcssLogical({ preserve: true }),
postcssDirPseudoClass(),
autoprefixer(AUTOPREFIXER_CONFIG),
])
)
.pipe(gulp.dest(dir)),
]);
}
Expand Down Expand Up @@ -1015,7 +1031,14 @@ function buildMinified(defines, dir) {

preprocessHTML("web/viewer.html", defines).pipe(gulp.dest(dir + "web")),
preprocessCSS("web/viewer.css", defines)
.pipe(postcss([calc(), autoprefixer(AUTOPREFIXER_CONFIG)]))
.pipe(
postcss([
postcssCalc(),
postcssLogical({ preserve: true }),
postcssDirPseudoClass(),
autoprefixer(AUTOPREFIXER_CONFIG),
])
)
.pipe(gulp.dest(dir + "web")),

gulp
Expand Down Expand Up @@ -1338,7 +1361,11 @@ gulp.task(
),
preprocessCSS("web/viewer.css", defines)
.pipe(
postcss([autoprefixer({ overrideBrowserslist: ["Chrome >= 73"] })])
postcss([
postcssLogical({ preserve: true }),
postcssDirPseudoClass(),
autoprefixer({ overrideBrowserslist: ["Chrome >= 73"] }),
])
)
.pipe(gulp.dest(CHROME_BUILD_CONTENT_DIR + "web")),

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

preprocessCSS("web/viewer.css", defines)
.pipe(
postcss([autoprefixer({ overrideBrowserslist: ["last 2 versions"] })])
postcss([
postcssLogical({ preserve: true }),
postcssDirPseudoClass(),
autoprefixer({ overrideBrowserslist: ["last 2 versions"] }),
])
)
.pipe(gulp.dest(cssDir)),
]);
Expand Down
45 changes: 45 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@
"needle": "^3.0.0",
"postcss": "^8.4.7",
"postcss-calc": "^8.2.4",
"postcss-dir-pseudo-class": "^6.0.4",
"postcss-logical": "^5.0.4",
"prettier": "^2.5.1",
"puppeteer": "^13.4.1",
"rimraf": "^3.0.2",
Expand Down
106 changes: 27 additions & 79 deletions web/viewer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -355,18 +355,11 @@ html[dir="rtl"] #toolbarSidebar {
0 0 1px rgba(0, 0, 0, 0.1);
}

html[dir="ltr"] #toolbarSidebar .toolbarButton {
margin-right: 2px !important;
#toolbarSidebar .toolbarButton {
margin-inline-end: 2px !important;
}
html[dir="rtl"] #toolbarSidebar .toolbarButton {
margin-left: 2px !important;
}

html[dir="ltr"] #toolbarSidebarRight .toolbarButton {
margin-right: 3px !important;
}
html[dir="rtl"] #toolbarSidebarRight .toolbarButton {
margin-left: 3px !important;
#toolbarSidebarRight .toolbarButton {
margin-inline-end: 3px !important;
}

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

.findbar .splitToolbarButton {
margin-top: 3px;
}
html[dir="ltr"] .findbar .splitToolbarButton {
margin-left: 0;
margin-right: 5px;
}
html[dir="rtl"] .findbar .splitToolbarButton {
margin-left: 5px;
margin-right: 0;
margin-inline: 0 5px;
}

.findbar .splitToolbarButton > .toolbarButton {
Expand Down Expand Up @@ -627,52 +613,36 @@ html[dir="rtl"] .secondaryToolbar {
.doorHangerRight:after,
.doorHangerRight:before {
bottom: 100%;
border: solid rgba(0, 0, 0, 0);
border: 8px solid rgba(0, 0, 0, 0);
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
opacity: var(--doorhanger-triangle-opacity-whcm);
}
.doorHanger:after,
.doorHangerRight:after {
border-width: 8px;
}
.doorHanger:after {
inset-inline-start: 10px;
margin-inline-start: -8px;
border-bottom-color: var(--toolbar-bg-color);
}
.doorHangerRight:after {
inset-inline-end: 10px;
margin-inline-end: -8px;
border-bottom-color: var(--doorhanger-bg-color);
}
.doorHanger:before,
.doorHangerRight:before {
border-bottom-color: var(--doorhanger-border-color);
border-width: 9px;
}

html[dir="ltr"] .doorHanger:after,
html[dir="rtl"] .doorHangerRight:after {
left: 10px;
margin-left: -8px;
}

html[dir="ltr"] .doorHanger:before,
html[dir="rtl"] .doorHangerRight:before {
left: 10px;
margin-left: -9px;
.doorHanger:before {
inset-inline-start: 10px;
margin-inline-start: -9px;
}

html[dir="rtl"] .doorHanger:after,
html[dir="ltr"] .doorHangerRight:after {
right: 10px;
margin-right: -8px;
}

html[dir="rtl"] .doorHanger:before,
html[dir="ltr"] .doorHangerRight:before {
right: 10px;
margin-right: -9px;
.doorHangerRight:before {
inset-inline-end: 10px;
margin-inline-end: -9px;
}

#findResultsCount {
Expand Down Expand Up @@ -788,9 +758,7 @@ html[dir="rtl"] .splitToolbarButton > .toolbarButton {
position: relative;
}
html[dir="ltr"] .splitToolbarButton > .toolbarButton:first-child,
html[dir="rtl"] .splitToolbarButton > .toolbarButton:last-child {
margin: 0;
}
html[dir="rtl"] .splitToolbarButton > .toolbarButton:last-child,
html[dir="ltr"] .splitToolbarButton > .toolbarButton:last-child,
html[dir="rtl"] .splitToolbarButton > .toolbarButton:first-child {
margin: 0;
Expand Down Expand Up @@ -834,15 +802,13 @@ html[dir="rtl"] .splitToolbarButtonSeparator {
box-sizing: border-box;
}

html[dir="ltr"] #toolbarViewerLeft > .toolbarButton:first-child,
html[dir="rtl"] #toolbarViewerRight > .toolbarButton:last-child {
margin-left: 2px;
#toolbarViewerLeft > .toolbarButton:first-child {
margin-inline-start: 2px;
}

html[dir="ltr"] #toolbarViewerRight > .toolbarButton:last-child,
html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child {
margin-right: 2px;
#toolbarViewerRight > .toolbarButton:last-child {
margin-inline-end: 2px;
}

.toolbarButton:hover,
.toolbarButton:focus-visible {
background-color: var(--button-hover-color);
Expand Down Expand Up @@ -1178,12 +1144,6 @@ html[dir="rtl"] .toolbarButton.pdfSidebarNotification::after {
width: 1px;
background-color: var(--separator-color);
}
html[dir="ltr"] .verticalToolbarSeparator {
margin-left: 2px;
}
html[dir="rtl"] .verticalToolbarSeparator {
margin-right: 2px;
}

.horizontalToolbarSeparator {
display: block;
Expand Down Expand Up @@ -1213,14 +1173,8 @@ html[dir="rtl"] .verticalToolbarSeparator {
opacity: 0;
position: absolute !important;
left: 0;
}

html[dir="ltr"] .toolbarField[type="checkbox"] {
margin: 10px 0 3px 7px;
}

html[dir="rtl"] .toolbarField[type="checkbox"] {
margin: 10px 7px 3px 0;
margin: 10px 0 3px;
margin-inline-start: 7px;
}

.toolbarField.pageNumber {
Expand Down Expand Up @@ -1288,7 +1242,6 @@ html[dir="rtl"] .thumbnail {
#thumbnailView > a:last-of-type > .thumbnail {
margin-bottom: 10px;
}

#thumbnailView > a:last-of-type > .thumbnail:not([data-loaded]) {
margin-bottom: 9px;
}
Expand Down Expand Up @@ -1346,14 +1299,9 @@ a:focus > .thumbnail > .thumbnailSelectionRing,
user-select: none;
}

html[dir="ltr"] .treeWithDeepNesting > .treeItem,
html[dir="ltr"] .treeItem > .treeItems {
margin-left: 20px;
}

html[dir="rtl"] .treeWithDeepNesting > .treeItem,
html[dir="rtl"] .treeItem > .treeItems {
margin-right: 20px;
.treeWithDeepNesting > .treeItem,
.treeItem > .treeItems {
margin-inline-start: 20px;
}

.treeItem > a {
Expand Down

0 comments on commit 079dea2

Please sign in to comment.