Use sass-migrator to migrate division to math.div (https://github.com/woocommerce/woocommerce-admin/pull/7136)
This commit is contained in:
parent
6175ad87c2
commit
77906db0ff
|
@ -139,9 +139,11 @@ async function buildScssFile( styleFile ) {
|
|||
path.resolve( __dirname, '../../node_modules' ),
|
||||
],
|
||||
data:
|
||||
'@forward "sass:math"; @use "sass:math";' +
|
||||
[ 'colors', 'variables', 'breakpoints', 'mixins' ]
|
||||
.map( ( imported ) => `@import "_${ imported }";` )
|
||||
.join( ' ' ) + fs.readFileSync( styleFile, 'utf8' ),
|
||||
.join( ' ' ) +
|
||||
fs.readFileSync( styleFile, 'utf8' ),
|
||||
} );
|
||||
|
||||
const postCSSConfig = require( '@wordpress/postcss-plugins-preset' );
|
||||
|
|
|
@ -1,9 +1,7 @@
|
|||
|
||||
|
||||
.woocommerce-settings-historical-data__columns {
|
||||
display: grid;
|
||||
grid-column-gap: $gap-large;
|
||||
grid-template-columns: calc(50% - #{$gap-large/2}) calc(50% - #{$gap-large/2});
|
||||
grid-template-columns: calc(50% - #{math.div($gap-large, 2)}) calc(50% - #{math.div($gap-large, 2)});
|
||||
|
||||
.woocommerce-settings-historical-data__column {
|
||||
align-self: end;
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
.woocommerce-dashboard__columns {
|
||||
display: grid;
|
||||
grid-template-columns: calc(50% - #{$gap-large/2}) calc(50% - #{$gap-large/2});
|
||||
grid-template-columns: calc(50% - #{math.div($gap-large, 2)}) calc(50% - #{math.div($gap-large, 2)});
|
||||
grid-column-gap: $gap-large;
|
||||
|
||||
// Auto-position fix for IE11.
|
||||
|
|
|
@ -37,10 +37,10 @@
|
|||
}
|
||||
|
||||
.woocommerce-layout__inbox-badge {
|
||||
margin-left: $gap-small / 2;
|
||||
margin-left: math.div($gap-small, 2);
|
||||
background-color: $gray-700;
|
||||
border-radius: 13px;
|
||||
padding: 0 $gap-small / 2;
|
||||
padding: 0 math.div($gap-small, 2);
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
}
|
||||
|
||||
.woocommerce-activity-card {
|
||||
padding: $gap-largest/2 $gutter $gutter;
|
||||
padding: math.div($gap-largest, 2) $gutter $gutter;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
// Rem output with px fallback
|
||||
@mixin font-size( $sizeValue: 16, $lineHeight: false ) {
|
||||
font-size: $sizeValue + px;
|
||||
font-size: ( $sizeValue / 16 ) + rem;
|
||||
font-size: math.div($sizeValue, 16) + rem;
|
||||
@if ( $lineHeight ) {
|
||||
line-height: $lineHeight;
|
||||
}
|
||||
|
@ -168,8 +168,8 @@
|
|||
&:nth-child(#{$i}) {
|
||||
grid-column-start: #{($i - 1) % $wrap-after + 1};
|
||||
grid-column-end: #{($i - 1) % $wrap-after + 2};
|
||||
grid-row-start: #{floor(( $i - 1 ) / $wrap-after) + 1};
|
||||
grid-row-end: #{floor(( $i - 1 ) / $wrap-after) + 2};
|
||||
grid-row-start: #{floor(math.div($i - 1, $wrap-after)) + 1};
|
||||
grid-row-end: #{floor(math.div($i - 1, $wrap-after)) + 2};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9681,6 +9681,7 @@
|
|||
"@wordpress/components": "10.2.0",
|
||||
"@wordpress/compose": "3.23.1",
|
||||
"@wordpress/date": "3.13.0",
|
||||
"@wordpress/deprecated": "^3.1.1",
|
||||
"@wordpress/dom": "2.16.0",
|
||||
"@wordpress/element": "2.19.0",
|
||||
"@wordpress/html-entities": "2.10.0",
|
||||
|
@ -9781,6 +9782,18 @@
|
|||
"rememo": "^3.0.0",
|
||||
"tinycolor2": "^1.4.1",
|
||||
"uuid": "^7.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@wordpress/deprecated": {
|
||||
"version": "2.12.3",
|
||||
"resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-2.12.3.tgz",
|
||||
"integrity": "sha512-qr+yDfTQfI3M4h6oY6IeHWwoHr4jxbILjSlV+Ht6Jjto9Owap6OuzSqR13Ev4xqIoG4C7b5B3gZXVfwVDae1zg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@wordpress/hooks": "^2.12.3"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@wordpress/compose": {
|
||||
|
@ -9805,6 +9818,16 @@
|
|||
"use-memo-one": "^1.1.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@wordpress/deprecated": {
|
||||
"version": "2.12.3",
|
||||
"resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-2.12.3.tgz",
|
||||
"integrity": "sha512-qr+yDfTQfI3M4h6oY6IeHWwoHr4jxbILjSlV+Ht6Jjto9Owap6OuzSqR13Ev4xqIoG4C7b5B3gZXVfwVDae1zg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@wordpress/hooks": "^2.12.3"
|
||||
}
|
||||
},
|
||||
"@wordpress/is-shallow-equal": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-3.1.3.tgz",
|
||||
|
@ -9816,6 +9839,27 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"@wordpress/deprecated": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-3.1.1.tgz",
|
||||
"integrity": "sha512-0hILlCNhf0DukFo3hMWybf9q507cxnIHhC1GQ1crZtTqzKS2QY2C1/77V4YGPdBShUj5j1dPriYCzfB5jFFgqQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@wordpress/hooks": "^3.1.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@wordpress/hooks": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-3.1.1.tgz",
|
||||
"integrity": "sha512-9f6H9WBwu6x/MM4ZCVLGGBuMiBcyaLapmAku5IwcWaeB2PtPduwjmk2NfGx35TuhBQD554DUg8WtTjIS019UAg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.13.10"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@wordpress/hooks": {
|
||||
"version": "2.12.3",
|
||||
"resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-2.12.3.tgz",
|
||||
|
|
|
@ -77,7 +77,7 @@
|
|||
order: 1;
|
||||
margin-top: -8px;
|
||||
margin-left: 0;
|
||||
padding-left: $gap / 2;
|
||||
padding-left: math.div($gap, 2);
|
||||
border-right: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
|
|
@ -54,8 +54,8 @@
|
|||
}
|
||||
|
||||
.woocommerce-pagination__page-arrows-label {
|
||||
margin-top: $spacing / 2;
|
||||
margin-right: $spacing / 2;
|
||||
margin-top: math.div($spacing, 2);
|
||||
margin-right: math.div($spacing, 2);
|
||||
}
|
||||
|
||||
.woocommerce-pagination__page-picker {
|
||||
|
@ -66,7 +66,7 @@
|
|||
margin-left: 0;
|
||||
}
|
||||
.woocommerce-pagination__page-picker-input {
|
||||
margin-left: $spacing / 2;
|
||||
margin-left: math.div($spacing, 2);
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
box-shadow: none;
|
||||
|
@ -98,7 +98,7 @@
|
|||
}
|
||||
|
||||
.components-base-control__label {
|
||||
margin-right: $spacing / 2;
|
||||
margin-right: math.div($spacing, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -191,7 +191,7 @@
|
|||
|
||||
.woocommerce-search-list__item-count {
|
||||
flex: 0 1 auto;
|
||||
padding: $gap-smallest/2 $gap-smaller;
|
||||
padding: math.div($gap-smallest, 2) $gap-smaller;
|
||||
border: 1px solid $gray-100;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8em;
|
||||
|
|
|
@ -115,7 +115,7 @@
|
|||
align-self: flex-start;
|
||||
flex-grow: 1;
|
||||
border-bottom: 1px solid $gray-100;
|
||||
margin-top: $step-icon-size / 2 + $gap-smaller;
|
||||
margin-top: math.div($step-icon-size, 2) + $gap-smaller;
|
||||
|
||||
&:last-child {
|
||||
display: none;
|
||||
|
@ -146,7 +146,7 @@
|
|||
.woocommerce-stepper__step::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: $step-icon-size / 2 + $gap-smaller;
|
||||
left: math.div($step-icon-size, 2) + $gap-smaller;
|
||||
top: $step-icon-size + ( $gap-smaller * 2 );
|
||||
height: calc(100% - #{$step-icon-size} - #{$gap-smaller * 2});
|
||||
border-left: 1px solid $gray-100;
|
||||
|
|
|
@ -143,6 +143,7 @@ const webpackConfig = {
|
|||
},
|
||||
webpackImporter: true,
|
||||
additionalData:
|
||||
'@use "sass:math";' +
|
||||
'@import "_colors"; ' +
|
||||
'@import "_variables"; ' +
|
||||
'@import "_breakpoints"; ' +
|
||||
|
|
Loading…
Reference in New Issue