Remove text color from Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/2745)
* Remove text color from Cart and Checkout blocks * Fix Cart price column misalignement. woocommerce/woocommerce-blocks#2744
This commit is contained in:
Albert Juhé Lluveras
GitHub
parent
94306573bc
commit
b74b85dc03
|
|
@ -122,6 +122,27 @@ $fontSizes: (
|
|||
-ms-word-break: break-all;
|
||||
}
|
||||
|
||||
// Shows a border with the current color and a custom opacity. That can't be achieved
|
||||
// with normal border because `currentColor` doesn't allow tweaking the opacity, and
|
||||
// setting the opacity of the entire element would change the children's opacity too.
|
||||
@mixin with-translucent-border($border-width: 1px, $opacity: 0.3) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
border-style: solid;
|
||||
border-width: $border-width;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
display: block;
|
||||
left: 0;
|
||||
opacity: $opacity;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Converts a px unit to em.
|
||||
@function em($size, $base: 16px) {
|
||||
@return $size / $base * 1em;
|
||||
|
|
|
|||
|
|
@ -45,20 +45,18 @@
|
|||
|
||||
.wc-block-components-checkout-step__heading-content {
|
||||
@include font-size(smaller);
|
||||
color: $gray-80;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: $gray-80;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-components-checkout-step__description {
|
||||
@include font-size(small);
|
||||
line-height: 1.25;
|
||||
color: $gray-60;
|
||||
margin-bottom: $gap;
|
||||
}
|
||||
|
||||
|
|
@ -80,6 +78,7 @@
|
|||
content: "";
|
||||
height: 100%;
|
||||
border-left: 1px solid;
|
||||
opacity: 0.3;
|
||||
position: absolute;
|
||||
left: -$gap-larger/2;
|
||||
top: 0;
|
||||
|
|
|
|||
|
|
@ -11,18 +11,19 @@
|
|||
}
|
||||
|
||||
.wc-block-components-order-summary-item {
|
||||
@include with-translucent-border(0 0 1px);
|
||||
display: table-row;
|
||||
padding-bottom: 1px;
|
||||
width: 100%;
|
||||
|
||||
> div {
|
||||
border-bottom: 1px solid $core-grey-light-600;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
> div {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
.wc-block-components-product-low-stock-badge {
|
||||
@include font-size(smaller);
|
||||
background-color: $white;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $black;
|
||||
border-radius: 2px;
|
||||
border: 1px solid;
|
||||
display: inline-block;
|
||||
color: $black;
|
||||
padding: 0 1em;
|
||||
font-weight: 600;
|
||||
padding: 0 0.66em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.wc-block-components-product-metadata {
|
||||
@include font-size(smaller);
|
||||
color: $core-grey-dark-400;
|
||||
|
||||
.wc-block-components-product-metadata__description > p,
|
||||
.wc-block-components-product-metadata__variation-data {
|
||||
|
|
|
|||
|
|
@ -14,35 +14,51 @@ import './style.scss';
|
|||
const ProductPrice = ( { className, currency, regularValue, value } ) => {
|
||||
const isDiscounted =
|
||||
Number.isFinite( regularValue ) && regularValue !== value;
|
||||
return (
|
||||
<>
|
||||
{ isDiscounted && (
|
||||
<>
|
||||
<span className="screen-reader-text">
|
||||
{ __(
|
||||
'Previous price:',
|
||||
'woo-gutenberg-products-block'
|
||||
) }
|
||||
</span>
|
||||
|
||||
if ( isDiscounted ) {
|
||||
return (
|
||||
<span className="price wc-block-components-product-price">
|
||||
<span className="screen-reader-text">
|
||||
{ __( 'Previous price:', 'woo-gutenberg-products-block' ) }
|
||||
</span>
|
||||
<del>
|
||||
<FormattedMonetaryAmount
|
||||
className={ classNames(
|
||||
'wc-block-components-product-price--regular',
|
||||
'wc-block-components-product-price__regular',
|
||||
className
|
||||
) }
|
||||
currency={ currency }
|
||||
value={ regularValue }
|
||||
/>
|
||||
<span className="screen-reader-text">
|
||||
{ __(
|
||||
'Discounted price:',
|
||||
'woo-gutenberg-products-block'
|
||||
</del>
|
||||
<span className="screen-reader-text">
|
||||
{ __(
|
||||
'Discounted price:',
|
||||
'woo-gutenberg-products-block'
|
||||
) }
|
||||
</span>
|
||||
<ins>
|
||||
<FormattedMonetaryAmount
|
||||
className={ classNames(
|
||||
'wc-block-components-product-price__value',
|
||||
className,
|
||||
{
|
||||
'is-discounted': isDiscounted,
|
||||
}
|
||||
) }
|
||||
</span>
|
||||
</>
|
||||
) }
|
||||
currency={ currency }
|
||||
value={ value }
|
||||
/>
|
||||
</ins>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<span className="price wc-block-components-product-price">
|
||||
<FormattedMonetaryAmount
|
||||
className={ classNames(
|
||||
'wc-block-components-product-price',
|
||||
'wc-block-components-product-price__value',
|
||||
className,
|
||||
{
|
||||
'is-discounted': isDiscounted,
|
||||
|
|
@ -51,7 +67,7 @@ const ProductPrice = ( { className, currency, regularValue, value } ) => {
|
|||
currency={ currency }
|
||||
value={ value }
|
||||
/>
|
||||
</>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,5 @@
|
|||
.wc-block-components-product-price {
|
||||
color: $black;
|
||||
|
||||
.wc-block-components-product-price__value {
|
||||
&.is-discounted {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-components-product-price--regular {
|
||||
color: $core-grey-dark-400;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const ProductSaleBadge = ( { currency, saleAmount } ) => {
|
|||
<div className="wc-block-components-sale-badge">
|
||||
{ __experimentalCreateInterpolateElement(
|
||||
/* translators: <price/> will be replaced by the discount amount */
|
||||
__( 'Save <price/>!', 'woo-gutenberg-products-block' ),
|
||||
__( 'Save <price/>', 'woo-gutenberg-products-block' ),
|
||||
{
|
||||
price: (
|
||||
<FormattedMonetaryAmount
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
.wc-block-components-sale-badge {
|
||||
@include font-size(smaller);
|
||||
background-color: $core-grey-dark-600;
|
||||
border-radius: 2px;
|
||||
color: $white;
|
||||
border: 1px solid;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.0833em; // 1px/12px
|
||||
padding: 0 0.66em;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.wc-block-components-checkout-return-to-cart-button {
|
||||
box-shadow: none;
|
||||
color: $gray-60;
|
||||
color: inherit;
|
||||
padding-left: calc(24px + 0.25em);
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -9,11 +9,6 @@ import {
|
|||
} from '@woocommerce/block-settings';
|
||||
import { decodeEntities } from '@wordpress/html-entities';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* Shows a formatted shipping location.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
.wc-block-components-shipping-address,
|
||||
.wc-block-components-shipping-address button {
|
||||
color: $core-grey-dark-400;
|
||||
}
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
.wc-block-components-shipping-rates-control__package-items {
|
||||
@include font-size(small);
|
||||
color: $core-grey-dark-400;
|
||||
display: block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
.wc-block-components-totals-item__value,
|
||||
.wc-block-components-totals-item__label {
|
||||
@include font-size(large);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.wc-block-components-totals-item__label {
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@
|
|||
|
||||
.wc-block-components-radio-control__option,
|
||||
.wc-block-components-radio-control__option-layout {
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
&:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,4 +37,8 @@
|
|||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-blocks-components-panel:last-child::after {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import {
|
|||
* Internal dependencies
|
||||
*/
|
||||
import TotalsItem from '../totals-item';
|
||||
import './style.scss';
|
||||
|
||||
const TotalsTaxesItem = ( { currency, values } ) => {
|
||||
const { total_tax: totalTax, tax_lines: taxLines } = values;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.wc-block-components-totals-taxes {
|
||||
@include with-translucent-border(1px 0 0);
|
||||
}
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
.wc-blocks-components-panel.has-border {
|
||||
border-top: 1px solid $core-grey-light-600;
|
||||
border-bottom: 1px solid $core-grey-light-600;
|
||||
margin-bottom: -1px;
|
||||
@include with-translucent-border( 1px 0 );
|
||||
|
||||
+ .wc-blocks-components-panel.has-border::after {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-blocks-components-panel__button {
|
||||
|
|
@ -26,6 +28,7 @@
|
|||
}
|
||||
|
||||
> .wc-blocks-components-panel__button-icon {
|
||||
fill: currentColor;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
|
|
@ -36,6 +39,7 @@
|
|||
|
||||
.wc-blocks-components-panel__content {
|
||||
padding-bottom: em($gap);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.theme-twentytwenty .wc-blocks-components-panel__button {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
$border-width: 1px;
|
||||
$border-radius: 5px;
|
||||
|
||||
.wc-block-components-express-checkout {
|
||||
margin: auto;
|
||||
|
|
@ -10,30 +11,32 @@ $border-width: 1px;
|
|||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
top: -$border-radius;
|
||||
vertical-align: middle;
|
||||
|
||||
// Pseudo-elements used to show the border before and after the title.
|
||||
&::before {
|
||||
border: $border-width solid transparent;
|
||||
border-left-color: currentColor;
|
||||
border-top-color: currentColor;
|
||||
border-radius: 5px 0 0 0;
|
||||
border-left: $border-width solid currentColor;
|
||||
border-top: $border-width solid currentColor;
|
||||
border-radius: $border-radius 0 0 0;
|
||||
content: "";
|
||||
display: block;
|
||||
height: $border-radius - $border-width;
|
||||
margin-right: $gap-small;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
width: #{$gap-larger - $gap-small - $border-width * 2};
|
||||
}
|
||||
|
||||
&::after {
|
||||
border: $border-width solid transparent;
|
||||
border-right-color: currentColor;
|
||||
border-top-color: currentColor;
|
||||
border-radius: 0 5px 0 0;
|
||||
border-right: $border-width solid currentColor;
|
||||
border-top: $border-width solid currentColor;
|
||||
border-radius: 0 $border-radius 0 0;
|
||||
content: "";
|
||||
display: block;
|
||||
height: $border-radius - $border-width;
|
||||
margin-left: $gap-small;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
@ -45,12 +48,14 @@ $border-width: 1px;
|
|||
}
|
||||
|
||||
.wc-block-components-express-checkout__content {
|
||||
border: $border-width solid currentColor;
|
||||
border-top-width: 0;
|
||||
border-radius: 5px;
|
||||
margin-top: 0.75em;
|
||||
@include with-translucent-border(0 $border-width $border-width);
|
||||
margin-top: calc(0.75em + #{$border-radius});
|
||||
padding: em($gap-large) #{$gap-larger - $border-width} em($gap) #{$gap-larger - $border-width};
|
||||
|
||||
&::after {
|
||||
border-radius: 0 0 $border-radius $border-radius;
|
||||
}
|
||||
|
||||
> p {
|
||||
margin-bottom: em($gap);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,22 @@
|
|||
@mixin radio-control-styles {
|
||||
.wc-block-components-radio-control__option {
|
||||
@include reset-typography();
|
||||
border-bottom: 1px solid $core-grey-light-600;
|
||||
@include with-translucent-border(0 0 1px);
|
||||
display: block;
|
||||
padding: $gap-small $gap-small 0 #{$gap-larger * 2};
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wc-block-components-radio-control__option-layout {
|
||||
@include with-translucent-border(0 0 1px);
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $core-grey-light-600;
|
||||
padding-bottom: $gap-small;
|
||||
}
|
||||
|
||||
.wc-block-components-radio-control__option .wc-block-components-radio-control__option-layout {
|
||||
border-bottom: 0;
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.wc-block-components-radio-control__input {
|
||||
|
|
@ -45,14 +46,12 @@
|
|||
// Currently, max() CSS function calls need to be wrapped with unquote.
|
||||
// See: https://github.com/sass/sass/issues/2378#issuecomment-367490840
|
||||
line-height: unquote("max(1rem, 20px)");
|
||||
color: $core-grey-dark-600;
|
||||
}
|
||||
|
||||
.wc-block-components-radio-control__description,
|
||||
.wc-block-components-radio-control__secondary-description {
|
||||
@include font-size(small);
|
||||
line-height: 20px;
|
||||
color: $core-grey-dark-400;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,20 +9,19 @@
|
|||
flex: auto;
|
||||
background: transparent;
|
||||
padding: $gap-small $gap;
|
||||
color: $black;
|
||||
color: inherit;
|
||||
outline-offset: -1px;
|
||||
text-align: center;
|
||||
transition: box-shadow 0.1s linear;
|
||||
box-shadow: inset 0 -2px $core-grey-light-600;
|
||||
box-shadow: inset 0 -1px currentColor;
|
||||
&.is-active {
|
||||
box-shadow: inset 0 -3px $black;
|
||||
box-shadow: inset 0 -3px currentColor;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
}
|
||||
&:focus {
|
||||
color: $black;
|
||||
outline-offset: -1px;
|
||||
outline: 1px dotted $gray-60;
|
||||
outline: 1px dotted currentColor;
|
||||
}
|
||||
.wc-block-components-tabs__item-content {
|
||||
@include font-size(regular);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
.wc-block-cart {
|
||||
color: $core-grey-dark-600;
|
||||
|
||||
.wc-block-components-shipping-calculator {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -24,23 +22,7 @@ table.wc-block-cart-items td {
|
|||
table.wc-block-cart-items {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $core-grey-light-600;
|
||||
|
||||
th {
|
||||
padding: 0.25rem $gap 0.25rem 0;
|
||||
white-space: nowrap;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td {
|
||||
border-top: 1px solid $core-grey-light-600;
|
||||
padding: $gap $gap $gap 0;
|
||||
vertical-align: top;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
.wc-block-cart-items__header {
|
||||
@include font-size(smaller);
|
||||
text-transform: uppercase;
|
||||
|
|
@ -70,14 +52,12 @@ table.wc-block-cart-items {
|
|||
@include link-button;
|
||||
@include font-size(smaller);
|
||||
|
||||
color: $core-grey-dark-400;
|
||||
text-transform: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wc-block-cart-item__remove-icon {
|
||||
@include link-button;
|
||||
|
||||
color: $core-grey-dark-400;
|
||||
fill: currentColor;
|
||||
position: absolute;
|
||||
top: $gap;
|
||||
|
|
@ -90,8 +70,8 @@ table.wc-block-cart-items {
|
|||
text-align: right;
|
||||
line-height: 1.25;
|
||||
|
||||
.wc-block-components-product-price,
|
||||
.wc-block-components-product-price--regular {
|
||||
.wc-block-components-product-price__regular,
|
||||
.wc-block-components-product-price__value {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -179,7 +159,6 @@ table.wc-block-cart-items {
|
|||
table.wc-block-cart-items {
|
||||
td {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.wc-block-cart-items__header {
|
||||
display: none;
|
||||
|
|
@ -188,11 +167,10 @@ table.wc-block-cart-items {
|
|||
display: none;
|
||||
}
|
||||
.wc-block-cart-items__row {
|
||||
@include with-translucent-border(0 0 1px);
|
||||
display: grid;
|
||||
grid-template-columns: 80px 132px;
|
||||
border-top: 1px solid $core-grey-light-600;
|
||||
padding: $gap 0;
|
||||
position: relative;
|
||||
|
||||
.wc-block-cart-item__image {
|
||||
grid-column-start: 1;
|
||||
|
|
@ -255,6 +233,23 @@ table.wc-block-cart-items {
|
|||
}
|
||||
|
||||
.is-large.wc-block-cart {
|
||||
.wc-block-cart-items {
|
||||
@include with-translucent-border(0 0 1px);
|
||||
|
||||
th {
|
||||
padding: 0.25rem $gap 0.25rem 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
td {
|
||||
@include with-translucent-border(1px 0 0);
|
||||
padding: $gap $gap $gap 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.wc-block-components-radio-control__option {
|
||||
padding-left: $gap-large;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,8 @@
|
|||
&::after {
|
||||
content: " ";
|
||||
flex: 1;
|
||||
border-bottom: 1px solid $core-grey-light-600;
|
||||
border-bottom: 1px solid;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -79,7 +80,7 @@
|
|||
.wc-block-components-express-checkout {
|
||||
min-height: 150px;
|
||||
}
|
||||
.wc-block-components-express-checkout-continue-rule span {
|
||||
.wc-block-components-express-checkout-continue-rule > span {
|
||||
@include placeholder();
|
||||
@include force-content();
|
||||
width: 150px;
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ Some classes that were introduced in 2.6.0 and 2.7.0 and didn't ship in WooComme
|
|||
| `wc-block-product-metadata` | `wc-block-components-product-metadata` |
|
||||
| `wc-block-product-name` | `wc-block-components-product-name` |
|
||||
| `wc-block-product-price` | `wc-block-components-product-price` |
|
||||
| `wc-block-product-price--regular` | `wc-block-components-product-price__regular` |
|
||||
| `wc-block-sale-badge` | `wc-block-components-sale-badge` |
|
||||
| `wc-block-product-variation-data` | `wc-block-components-product-variation-data` |
|
||||
| `wc-block-cart__shipping-calculator` | `wc-block-components-shipping-calculator` |
|
||||
|
|
|
|||
Loading…
Reference in New Issue