mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-03 08:37:53 +08:00
🔀 Merge branch 'trunk'
# Conflicts: # modules/ppcp-settings/resources/js/Components/ReusableComponents/Navigation.js # modules/ppcp-settings/resources/js/Components/Screens/Settings.js # modules/ppcp-settings/services.php # modules/ppcp-settings/src/SettingsModule.php
This commit is contained in:
Philipp Stracker
commit
3b3bb29428
53 changed files with 669 additions and 264 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,21 +17,35 @@
|
|||
}
|
||||
|
||||
&-settings-card {
|
||||
background-color: $color-white;
|
||||
padding: 48px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px 0 #0000001A;
|
||||
@media screen and (min-width: 960px) {
|
||||
display: flex;
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
padding-bottom: 18px;
|
||||
border-bottom: 2px solid $color-gray-700;
|
||||
margin-bottom: 32px;
|
||||
|
||||
@media screen and (min-width: 960px) {
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
@media screen and (min-width: 960px) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
