woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-03 08:37:53 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Payment cards redesign #2

Browse source
This commit is contained in:
inpsyde-maticluznar 2024-11-21 11:38:01 +01:00
parent 4bb09bb5b1
commit 9d65194dbd
No known key found for this signature in database
GPG key ID: D005973F231309F6
28 changed files with 350 additions and 230 deletions
Download patch file Download diff file Expand all files Collapse all files

19
modules/ppcp-settings/resources/css/components/reusable-components/_button.scss
View file

@ -5,7 +5,6 @@ button.components-button, a.components-button {
}
&:disabled {
background-color: $color-gray-500;
color: $color-white;
}
@ -16,16 +15,20 @@ button.components-button, a.components-button {
&.is-primary {
@include font(13, 20, 400);
color:$color-white;
&:not(:disabled) {
background-color: $color-blueberry;
}
}
&.is-secondary:not(:disabled) {
border-color:$color-blueberry;
background-color:$color-white;
color:$color-blueberry;
&:hover{
background-color:$color-white;
background:none;
border-color: $color-blueberry;
background-color: $color-white;
color: $color-blueberry;
&:hover {
background-color: $color-white;
background: none;
}
}

22
modules/ppcp-settings/resources/css/components/reusable-components/_fields.scss
View file

@ -3,12 +3,20 @@
&__radio-value {
@include hide-input-field;
&:checked {
+ .ppcp-r__radio-presentation {
background: $color-white;
width: 20px;
height: 20px;
border: 6px solid $color-blueberry;
&:checked + .ppcp-r__radio-presentation {
position: relative;
&::before {
content: '';
width: 12px;
height: 12px;
border-radius: 12px;
background-color: $color-blueberry;
display: block;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
}
}
@ -104,7 +112,7 @@ select {
.components-base-control__field {
display: flex;
flex-direction: column;
gap: 8px;
gap: 0;
margin: 0;
}
}

69
modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-item.scss
View file

@ -1,46 +1,75 @@
.ppcp-r-payment-method-item-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.ppcp-r-payment-method-item {
display: flex;
align-items: center;
align-items: flex-start;
width: calc(100% / 3 - 32px / 3);
border: 1px solid $color-gray-300;
padding: 16px;
border-radius: 8px;
min-height: 200px;
&:not(:last-child) {
padding-bottom: 32px;
@media screen and (max-width: 767px) {
width: calc(50% - 8px);
}
&:not(:first-child) {
border-top: 1px solid $color-gray-400;
padding-top: 32px;
@media screen and (max-width: 480px) {
width: 100%;
}
&__checkbox-wrap {
position: relative;
&__wrap {
display: flex;
flex-direction: column;
height: 100%;
}
&__title-wrap {
display: flex;
align-items: center;
.ppcp-r__checkbox {
margin-right: 24px;
}
}
&__icon-wrap {
margin-right: 18px;
margin: 0 0 8px 0;
gap: 12px;
}
&__content {
padding-right: 24px;
p {
margin: 0;
color: $color-text-tertiary;
@include font(13, 20, 400);
}
margin: 0 0 12px 0;
}
&__title {
@include font(16, 20, 600);
@include font(13, 20, 500);
color: $color-black;
margin: 0 0 8px 0;
display: block;
}
&__settings-button {
line-height: 0;
transition: 0.2s ease-out transform;
transform: rotate(0deg);
zoom: 1.005;
&:hover {
transform: rotate(45deg);
cursor: pointer;
}
}
button.is-secondary {
@include small-button;
}
&__footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
}

71
modules/ppcp-settings/resources/css/components/reusable-components/_payment-method-modal.scss
View file

@ -3,18 +3,6 @@
@import './button';
@import './fields';
&__container {
max-width: 100%;
width: 400px;
&--small {
padding: 0 50px;
@media screen and (max-width: 480px){
padding:0;
}
}
}
.components-modal {
&__header {
height: 52px;
@ -26,8 +14,23 @@
}
&__content {
margin-top: 60px;
padding:0 24px 28px 24px;
}
}
&__container {
width: 352px;
max-width: 100%;
}
.has-size-small {
.ppcp-r-modal__container {
max-width: 252px;
}
.components-modal__content {
margin-top: 48px;
padding: 0 50px 48px 50px;
}
}
@ -37,23 +40,30 @@
align-items: center;
gap: 8px;
border-bottom: 1px solid $color-gray-500;
padding-bottom: 12px;
margin-bottom: 24px;
padding-bottom: 18px;
margin-bottom: 18px;
}
&__title {
@include font(16, 20, 600);
@include font(14, 20, 600);
color: $color-black;
}
&__content {
width: 400px;
max-width: 100%;
padding: 0;
}
&__inverted-toggle-control {
.components-form-toggle {
order: 1;
.components-toggle-control {
gap: 8px;
margin: 0;
label {
@include font(13, 20, 400);
color: $color-text-text;
}
.components-form-toggle__track {
border-color: $color-border;
}
}
@ -63,7 +73,7 @@
gap: 8px;
&--save {
margin-top: 24px;
margin-top: -4px;
align-items: flex-end;
}
@ -81,15 +91,28 @@
&--acdc {
gap: 18px;
.ppcp-r-modal__field-row--save {
margin-top: 2px;
}
}
}
.ppcp-r-modal__field-row--save button.is-primary {
@include small-button;
width: 100%;
justify-content: center;
padding: 6px 12px;
}
.ppcp-r__radio-content {
label {
@include font(13, 20, 400);
}
}
&__content-title {
@include font(14, 20, 600);
@include font(13, 20, 600);
color: $color-black;
display: block;
margin: 0 0 4px 0;
@ -97,7 +120,7 @@
&__description {
@include font(14, 20, 400);
margin: 0 0 24px 0;
color: $color-black;
margin: 0 0 12px 0;
}
}

2
modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss
View file

@ -10,7 +10,7 @@
box-shadow: 0 -1px 0 0 $color-gray-400 inset;
margin-bottom: 48px;
gap: 12px;
overflow: auto;
.components-button {
padding: 16px 20px;