Unverified Commit 4073ca30 authored by alexpott's avatar alexpott

Issue #3117698 by mherchel, anmolgoyal74, lauriii, kapilkumar0324,...

Issue #3117698 by mherchel, anmolgoyal74, lauriii, kapilkumar0324, andrewmacpherson: Allow PostCSS Plugin “Px to Rem” in core for Olivero theme

(cherry picked from commit 7527394f)
parent 0753e719
......@@ -56,6 +56,7 @@
"postcss-header": "^2.0.0",
"postcss-import": "^12.0.1",
"postcss-preset-env": "^6.7.0",
"postcss-pxtorem": "^5.1.1",
"postcss-url": "^8.0.0",
"prettier": "^2.1.2",
"stylelint": "^13.0.0",
......
......@@ -7,6 +7,8 @@ const postcssImport = require('postcss-import');
const postcssHeader = require('postcss-header');
const postcssUrl = require('postcss-url');
const postcssPresetEnv = require('postcss-preset-env');
// cspell:ignore pxtorem
const postcssPixelsToRem = require('postcss-pxtorem');
module.exports = (filePath, callback) => {
// Transform the file.
......@@ -47,6 +49,24 @@ module.exports = (filePath, callback) => {
}
}),
postcssCalc,
postcssPixelsToRem({
propList: [
'*',
'!background-position',
'!border',
'!border-width',
'!box-shadow',
'!border-top*',
'!border-right*',
'!border-bottom*',
'!border-left*',
'!border-start*',
'!border-end*',
'!outline*',
],
mediaQuery: true,
minPixelValue: 3,
}),
postcssHeader({
header: `/*\n * DO NOT EDIT THIS FILE.\n * See the following change record for more information,\n * https://www.drupal.org/node/3084859\n * @preserve\n */\n`,
}),
......
......@@ -115,22 +115,22 @@ p {
}
dl {
margin: 0 0 20px;
margin: 0 0 1.25rem;
}
dl dd,
dl dl {
margin-bottom: 10px;
margin-left: 20px; /* LTR */
margin-bottom: 0.625rem;
margin-left: 1.25rem; /* LTR */
}
[dir="rtl"] dl dd,
[dir="rtl"] dl dl {
margin-right: 20px;
margin-right: 1.25rem;
}
blockquote {
margin: 1em 40px;
margin: 1em 2.5rem;
}
address {
......
......@@ -55,8 +55,8 @@
max-height: 999em;
}
.is-horizontal .tabs__tab {
margin: 0 4px !important;
border-radius: 4px 4px 0 0 !important;
margin: 0 0.25rem !important;
border-radius: 0.25rem 0.25rem 0 0 !important;
}
.dropbutton-multiple .dropbutton .secondary-action {
display: block;
......@@ -69,7 +69,7 @@
display: none;
}
.js .dropbutton-multiple .dropbutton-widget {
border-radius: 4px;
border-radius: 0.25rem;
background: none;
}
input.form-autocomplete,
......
......@@ -9,34 +9,34 @@
* with the base line height of Claro.
*/
.leader {
margin-top: 20px;
margin-top: 1.25rem;
margin-top: 1.538rem;
}
.leader-double {
margin-top: 40px;
margin-top: 2.5rem;
margin-top: 3.076rem;
}
.leader-triple {
margin-top: 60px;
margin-top: 3.75rem;
margin-top: 4.614rem;
}
.leader-quadruple {
margin-top: 80px;
margin-top: 5rem;
margin-top: 6.152rem;
}
.trailer {
margin-bottom: 20px;
margin-bottom: 1.25rem;
margin-bottom: 1.538rem;
}
.trailer-double {
margin-bottom: 40px;
margin-bottom: 2.5rem;
margin-bottom: 3.076rem;
}
.trailer-triple {
margin-bottom: 60px;
margin-bottom: 3.75rem;
margin-bottom: 4.614rem;
}
.trailer-quadruple {
margin-bottom: 80px;
margin-bottom: 5rem;
margin-bottom: 6.152rem;
}
......@@ -32,7 +32,7 @@
display: inline-flex;
align-content: center;
height: 1.125rem;
margin: -3px 0.75rem 0;
margin: -0.1875rem 0.75rem 0;
vertical-align: middle;
white-space: nowrap;
line-height: 1.125rem;
......
......@@ -564,10 +564,10 @@
left: -1px;
}
.collapse-processed > .claro-details__summary .details-title::after {
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
top: -0.3125rem;
right: -0.3125rem;
bottom: -0.3125rem;
left: -0.3125rem;
border: 2px dotted;
}
}
......
......@@ -13,7 +13,7 @@
.ui-dialog {
padding: 0;
border: 0;
border-radius: 4px;
border-radius: 0.25rem;
background: transparent;
box-shadow: 0 0 1rem -0.25rem #222330;
}
......
......@@ -13,8 +13,8 @@
.form-boolean::-ms-check {
display: inline-block;
box-sizing: border-box;
width: 18px;
height: 18px;
width: 1.125rem;
height: 1.125rem;
vertical-align: text-bottom;
color: transparent; /* IE */
border: 1px solid #8e929c;
......@@ -26,9 +26,9 @@
}
.form-boolean--type-radio::-ms-check {
width: 19px;
height: 19px;
border-radius: 19px;
width: 1.1875rem;
height: 1.1875rem;
border-radius: 1.1875rem;
}
.form-boolean:focus::-ms-check {
......
......@@ -76,8 +76,8 @@
.form-boolean {
display: inline-block;
box-sizing: border-box;
width: 18px;
height: 18px;
width: 1.125rem;
height: 1.125rem;
vertical-align: text-bottom;
border: 1px solid #8e929c;
border-radius: 2px;
......@@ -91,9 +91,9 @@
}
.form-boolean--type-radio {
width: 19px;
height: 19px;
border-radius: 19px;
width: 1.1875rem;
height: 1.1875rem;
border-radius: 1.1875rem;
}
.form-boolean:active,
......
......@@ -151,7 +151,7 @@ _:-ms-fullscreen,
* Improve form element usability on narrow devices.
*/
@media screen and (max-width: 600px) {
@media screen and (max-width: 37.5rem) {
/* Number, date and time are skipped here */
.form-element {
float: none;
......
......@@ -138,7 +138,7 @@ tr .form-item,
/* Add some spacing so that the focus ring and suffix don't overlap. */
@media screen and (min-width: 601px) {
@media screen and (min-width: 37.5625rem) {
.form-item__suffix {
margin-left: 0.5rem; /* LTR */
}
......@@ -233,7 +233,7 @@ tr .form-item,
* @legacy
*/
@media screen and (max-width: 600px) {
@media screen and (max-width: 37.5rem) {
.password-strength {
width: 100%;
}
......
......@@ -11,5 +11,5 @@
*/
.help p {
margin: 0 0 10px;
margin: 0 0 0.625rem;
}
......@@ -79,9 +79,9 @@
.ui-icon {
display: block;
overflow: hidden;
width: 16px;
height: 16px;
text-indent: -99999px;
width: 1rem;
height: 1rem;
text-indent: -6249.9375rem;
background-image: url(../../../images/ui-icons-222222-256x240.png);
background-repeat: no-repeat;
}
......@@ -111,11 +111,11 @@
}
.ui-widget p .ui-icon {
margin: 2px 3px 0 0; /* LTR */
margin: 2px 0.1875rem 0 0; /* LTR */
}
[dir="rtl"] .ui-widget p .ui-icon {
margin: 2px 0 0 3px;
margin: 2px 0 0 0.1875rem;
}
/* positioning */
......@@ -481,7 +481,7 @@
.ui-accordion h3.ui-accordion-header,
#block-system-main h3.ui-accordion-header {
margin: 10px 0;
margin: 0.625rem 0;
font-size: 1.1em;
}
......@@ -510,27 +510,27 @@
.ui-tabs .ui-tabs-nav {
margin: 0;
padding: 5px 10px 4px;
padding: 0.3125rem 0.625rem 0.25rem;
border-bottom: solid 1px #ccc;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
line-height: 20px;
line-height: 1.25rem;
}
.ui-tabs .ui-tabs-nav li {
margin: 0;
padding: 0 1em 0 10px; /* LTR */
padding: 0 1em 0 0.625rem; /* LTR */
list-style: none;
}
[dir="rtl"] .ui-tabs .ui-tabs-nav li {
padding: 0 10px 0 1em;
padding: 0 0.625rem 0 1em;
}
.ui-tabs .ui-tabs-nav li a {
float: none;
padding: 0 10px;
border-radius: 10px;
padding: 0 0.625rem;
border-radius: 0.625rem;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
......@@ -566,7 +566,7 @@
border-right-color: #d2d2d2;
border-bottom: 1px solid #b4b4b4;
border-left-color: #d2d2d2;
border-radius: 4px;
border-radius: 0.25rem;
background-color: #e4e4e4;
}
......
......@@ -28,7 +28,7 @@
box-sizing: border-box;
margin-top: 1rem;
margin-bottom: 1rem;
padding: 1.5rem 1.5rem 2rem calc(1.5rem - 5px); /* LTR */
padding: 1.5rem 1.5rem 2rem calc(1.5rem - 0.3125rem); /* LTR */
color: #fff;
border-width: 0 0 0 5px; /* LTR */
border-style: solid;
......@@ -38,7 +38,7 @@
}
[dir="rtl"] .messages {
padding-right: calc(1.5rem - 5px);
padding-right: calc(1.5rem - 0.3125rem);
padding-left: 1.5rem;
border-right-width: 5px;
border-left-width: 0;
......
......@@ -18,11 +18,11 @@
.quickedit-toolbar-container > .quickedit-toolbar-content,
.quickedit-toolbar-container > .quickedit-toolbar-lining {
border-radius: 4px;
border-radius: 0.25rem;
}
.quickedit-button {
border-radius: 3px;
border-radius: 0.1875rem;
}
/**
......@@ -70,5 +70,5 @@
*/
.quickedit .icon-close:before {
top: 8px;
top: 0.5rem;
}
......@@ -15,10 +15,10 @@
.skip-link {
z-index: 50;
left: 50%;
padding: 1px 10px 2px;
padding: 1px 0.625rem 2px;
transform: translateX(-50%);
color: #fff;
border-radius: 0 0 10px 10px;
border-radius: 0 0 0.625rem 0.625rem;
background: #444;
font-size: 0.94em;
}
......
......@@ -42,7 +42,7 @@
.claro-details__summary.claro-details__summary--package-listing {
color: #222330;
border-radius: 4px;
border-radius: 0.25rem;
background: #f3f4f9;
font-size: 1.125rem; /* 18px */
line-height: 1.424rem; /* 23px */
......
......@@ -32,29 +32,29 @@
position: relative;
box-sizing: border-box;
width: 100%;
padding: 10px 6px 10px 40px; /* LTR */
padding: 0.625rem 0.375rem 0.625rem 2.5rem; /* LTR */
vertical-align: top;
background-color: transparent;
font-weight: normal;
}
[dir="rtl"] .system-status-report__status-title {
padding: 10px 40px 10px 6px;
padding: 0.625rem 2.5rem 0.625rem 0.375rem;
}
.system-status-report__status-icon:before {
position: absolute;
top: 12px;
left: 12px; /* LTR */
top: 0.75rem;
left: 0.75rem; /* LTR */
display: block;
width: 16px;
height: 16px;
width: 1rem;
height: 1rem;
content: "";
background-repeat: no-repeat;
}
[dir="rtl"] .system-status-report__status-icon:before {
right: 12px;
right: 0.75rem;
left: auto;
}
......
......@@ -20,8 +20,8 @@
.system-status-counter__status-icon {
display: inline-block;
width: 65px;
height: 60px;
width: 4.0625rem;
height: 3.75rem;
vertical-align: middle;
}
......@@ -37,7 +37,7 @@
content: "";
background-repeat: no-repeat;
background-position: right center;
background-size: 40px;
background-size: 2.5rem;
}
.system-status-counter__status-icon--error:before {
......@@ -54,7 +54,7 @@
.system-status-counter__status-title {
display: inline-block;
padding: 0 18px;
padding: 0 1.125rem;
vertical-align: middle;
font-size: 1.125em;
font-weight: bold;
......@@ -63,13 +63,13 @@
.system-status-counter__title-count {
display: block;
margin-bottom: 8px;
margin-bottom: 0.5rem;
}
.system-status-counter__details {
display: block;
text-transform: none;
font-size: 14px;
font-size: 0.875rem;
font-weight: normal;
line-height: 1.5;
}
......@@ -81,9 +81,9 @@
}
.system-status-counter__status-icon,
.system-status-counter {
height: 65px;
height: 4.0625rem;
}
.system-status-counter__status-icon {
width: 65px;
width: 4.0625rem;
}
}
......@@ -12,12 +12,12 @@
.system-status-report-counters__item {
width: 100%;
margin: 10px 0;
margin: 0.625rem 0;
}
@media screen and (min-width: 60em) {
.system-status-report-counters__item {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.system-status-report-counters {
display: flex;
......
......@@ -24,13 +24,13 @@
overflow-x: auto;
box-sizing: border-box;
margin-bottom: 1.5rem;
padding: 18px;
padding: 1.125rem;
}
.system-status-general-info__item-icon {
display: inline-block;
width: 42px;
height: 42px;
width: 2.625rem;
height: 2.625rem;
vertical-align: top;
}
......@@ -39,11 +39,11 @@
width: 100%;
height: 100%;
content: "";
border-radius: 42px;
border-radius: 2.625rem;
background-color: #828388;
background-repeat: no-repeat;
background-position: 50% center;
background-size: 24px;
background-size: 1.5rem;
}
.system-status-general-info__item-icon--drupal:before {
......@@ -60,7 +60,7 @@
.system-status-general-info__item-icon--php:before {
background-image: url("data:image/svg+xml,%3csvg height='33.447' viewBox='0 0 66 33.447' width='66' xmlns='http://www.w3.org/2000/svg'%3e%3cg fill='%23fff'%3e%3cpath d='m49.5 12.255h-2.7l-1.473 7h2.4c1.59 0 2.773-.342 3.55-.94.78-.6 1.304-1.62 1.577-3.023.26-1.345.142-1.975-.357-2.528-.5-.553-1.498-.51-2.996-.51z'/%3e%3cpath d='m33 0c-18.225 0-33 7.488-33 16.724s14.775 16.724 33 16.724 33-7.488 33-16.724-14.775-16.724-33-16.724zm-9.328 19.982c-.787.737-1.662 1.376-2.625 1.69-.963.313-2.19.583-3.68.583h-3.377l-.935 5h-3.945l3.52-18h7.584c2.28 0 3.946.34 4.992 1.537s1.36 2.74.944 4.885c-.172.884-.462 1.628-.87 2.36-.413.732-.947 1.338-1.608 1.945zm11.51 2.273 1.558-8.124c.177-.91.112-1.29-.196-1.62s-.962-.255-1.963-.255h-3.126l-2.016 10h-3.913l3.52-18h3.912l-.935 5h3.486c2.193 0 3.706.124 4.54.888.832.765 1.08 1.99.748 3.703l-1.637 8.41h-3.977zm21.747-6.708c-.173.884-.463 1.692-.872 2.424-.41.734-.944 1.404-1.605 2.01-.787.738-1.662 1.377-2.625 1.69-.963.314-2.19.584-3.68.584h-3.377l-.934 5h-3.944l3.518-18h7.584c2.282 0 3.946.34 4.992 1.537 1.046 1.2 1.36 2.61.943 4.757z'/%3e%3cpath d='m18.72 12.255h-2.703l-1.473 7h2.4c1.59 0 2.773-.342 3.552-.94.778-.6 1.303-1.62 1.576-3.023.26-1.345.142-1.975-.357-2.528-.5-.553-1.497-.51-2.996-.51z'/%3e%3c/g%3e%3c/svg%3e");
background-size: 32px;
background-size: 2rem;
}
.system-status-general-info__item-icon--database:before {
......@@ -71,24 +71,24 @@
position: relative;
display: inline-block;
box-sizing: border-box;
width: calc(100% - 60px);
padding-left: 10px; /* LTR */
font-size: 14px;
width: calc(100% - 3.75rem);
padding-left: 0.625rem; /* LTR */
font-size: 0.875rem;
}
[dir="rtl"] .system-status-general-info__item-details {
padding-right: 10px;
padding-right: 0.625rem;
padding-left: 0;
}
.system-status-general-info__item-title {