Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remove background color from Express Checkout title (https://github.com/woocommerce/woocommerce-blocks/pull/2704) 

* Remove background color from Express Checkout title

* Fix Express checkout title padding not visible on npm run build

* Add explanatory comment
This commit is contained in:
Albert Juhé Lluveras 2020-06-15 13:39:46 +02:00 committed by GitHub
parent 582b5f60bb
commit 2004c48c5e
2 changed files with 66 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
plugins/woocommerce-blocks/assets/js/base/components/payment-methods/express-checkout.js
View File

@ -16,12 +16,17 @@ const ExpressCheckoutContainer = ( { children } ) => {
return (
<>
<div className="wc-block-components-express-checkout">
<Title
className="wc-block-components-express-checkout__title"
headingLevel="2"
>
{ __( 'Express checkout', 'woo-gutenberg-products-block' ) }
</Title>
<div className="wc-block-components-express-checkout__title-container">
<Title
className="wc-block-components-express-checkout__title"
headingLevel="2"
>
{ __(
'Express checkout',
'woo-gutenberg-products-block'
) }
</Title>
</div>
<div className="wc-block-components-express-checkout__content">
<StoreNoticesProvider context="wc/express-payment-area">
{ children }

70
plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss
View File

@ -1,25 +1,59 @@
$border-width: 1px;
.wc-block-components-express-checkout {
margin: auto;
border: 2px solid $black;
border-radius: 5px;
padding: 8px;
position: relative;
.wc-block-components-express-checkout__title {
background-color: $white;
padding-left: $gap-small;
padding-right: $gap-small;
margin-left: $gap-small;
display: inline-block;
vertical-align: middle;
transform: translateY(-50%);
.wc-block-components-express-checkout__title-container {
display: flex;
flex-direction: row;
left: 0;
position: absolute;
right: 0;
top: 0;
margin-top: -2px; // Same as container border width.
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;
content: "";
display: block;
margin-right: $gap-small;
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;
content: "";
display: block;
margin-left: $gap-small;
pointer-events: none;
flex-grow: 1;
}
}
.wc-block-components-express-checkout__title {
flex-grow: 0;
transform: translateY(-50%);
}
.wc-block-components-express-checkout__content {
padding: $gap $gap-large 0;
border: $border-width solid currentColor;
border-top-width: 0;
border-radius: 5px;
margin-top: 0.75em;
padding: em($gap-large) #{$gap-larger - $border-width} em($gap) #{$gap-larger - $border-width};
> p {
margin-bottom: em($gap);
}
}
.wc-block-components-express-checkout-payment-event-buttons {
@ -29,10 +63,11 @@
flex-wrap: wrap;
width: 100%;
padding: 0;
margin: 0 0 $gap;
margin: 0;
overflow: hidden;
> li {
display: inline-block;
margin: 0;
width: 50%;
> img {
width: 100%;
@ -214,11 +249,16 @@
}
}
.theme-twentynineteen {
.wc-block-components-express-checkout__title::before {
display: none;
}
}
// For Twenty Twenty we need to increase specificity of the title.
.theme-twentytwenty {
.wc-block-components-express-checkout .wc-block-components-express-checkout__title {
padding-left: $gap-small;
padding-right: $gap-small;
margin-left: $gap-small;
}
}