mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-04 08:47:23 +08:00
Update the Settings UI design to match the Figma files
This commit is contained in:
Daniel Dudzic
parent
7bf579c508
commit
390a3f69f8
41 changed files with 1887 additions and 1541 deletions
|
|
@ -18,6 +18,7 @@ button.components-button, a.components-button {
|
|||
|
||||
&:not(:disabled) {
|
||||
background-color: $color-blueberry;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,13 +56,13 @@
|
|||
position: relative;
|
||||
|
||||
label {
|
||||
@include font(14, 20, 400);
|
||||
@include font(13, 20, 400);
|
||||
color: $color-gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
&__radio-description {
|
||||
@include font(14, 20, 400);
|
||||
@include font(13, 20, 400);
|
||||
margin: 0;
|
||||
color: $color-gray-800;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,75 +1,78 @@
|
|||
.ppcp-r-payment-method-item-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.ppcp-r-payment-method-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
width: calc(100% / 3 - 32px / 3);
|
||||
border: 1px solid $color-gray-300;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
min-height: 200px;
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
width: calc(50% - 8px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__wrap {
|
||||
.ppcp-r-settings-block__payment-methods {
|
||||
&.ppcp-r-settings-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
&__title-wrap {
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 8px 0;
|
||||
gap: 12px;
|
||||
}
|
||||
align-items: flex-start;
|
||||
width: calc(100% / 3 - 32px / 3);
|
||||
border: 1px solid $color-gray-300;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
min-height: 200px;
|
||||
|
||||
&__content {
|
||||
p {
|
||||
margin: 0;
|
||||
color: $color-text-tertiary;
|
||||
@include font(13, 20, 400);
|
||||
@media screen and (max-width: 767px) {
|
||||
width: calc(50% - 8px);
|
||||
}
|
||||
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(13, 20, 500);
|
||||
color: $color-black;
|
||||
display: block;
|
||||
}
|
||||
&__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__settings-button {
|
||||
line-height: 0;
|
||||
transition: 0.2s ease-out transform;
|
||||
transform: rotate(0deg);
|
||||
zoom: 1.005;
|
||||
&__title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 8px 0;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: rotate(45deg);
|
||||
cursor: pointer;
|
||||
&__description {
|
||||
p {
|
||||
margin: 0;
|
||||
color: $color-text-tertiary;
|
||||
@include font(13, 20, 400);
|
||||
}
|
||||
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(13, 20, 500);
|
||||
color: $color-black;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__settings {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
button.is-secondary {
|
||||
@include small-button;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-settings {
|
||||
> * {
|
||||
margin-bottom: $card-vertical-gap;
|
||||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
padding-bottom: $card-vertical-gap;
|
||||
border-bottom: 1px solid $color-gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
&-settings-card {
|
||||
@media screen and (min-width: 960px) {
|
||||
display: flex;
|
||||
|
|
@ -26,6 +37,12 @@
|
|||
padding: 24px;
|
||||
}
|
||||
|
||||
&__content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
|
|
@ -43,21 +60,25 @@
|
|||
}
|
||||
|
||||
&__content {
|
||||
border: 1px solid $color-gray-200;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
@media screen and (min-width: 960px) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(16, 24, 600);
|
||||
color: $color-blueberry;
|
||||
@include font(13, 24, 600);
|
||||
color: $color-text-text;
|
||||
margin: 0 0 4px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
&__description {
|
||||
@include font(14, 20, 400);
|
||||
color: $color-gray-800;
|
||||
@include font(13, 20, 400);
|
||||
color: $color-text-tertiary;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
.ppcp-r-title-badge{
|
||||
@include font(12, 16, 400);
|
||||
margin-left:12px;
|
||||
padding:4px 8px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 2px;
|
||||
white-space: nowrap;
|
||||
&--positive{
|
||||
color:#005C12;
|
||||
background-color: #EDFAEF;
|
||||
color: #144722;
|
||||
background-color: #DAFFE0;
|
||||
}
|
||||
&--negative{
|
||||
color:#5c0000;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// Container and Tab Settings
|
||||
.ppcp-r-tabs.settings,
|
||||
.ppcp-r-container--settings {
|
||||
--max-container-width: var(--max-width-settings);
|
||||
|
|
@ -6,3 +7,543 @@
|
|||
max-width: var(--max-container-width);
|
||||
}
|
||||
}
|
||||
|
||||
// Todo List and Feature Items
|
||||
.ppcp-r-tab-overview-todo {
|
||||
margin: 0 0 48px 0;
|
||||
}
|
||||
|
||||
.ppcp-r-todo-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
width: 100%;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $color-gray-400;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-top: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
@include font(14, 20, 400);
|
||||
}
|
||||
|
||||
&__inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
&__close {
|
||||
margin-left: auto;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $color-blueberry;
|
||||
}
|
||||
}
|
||||
|
||||
&__description {
|
||||
@include font(13, 20, 400);
|
||||
color: $color-blueberry;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-feature-item {
|
||||
padding-top: 32px;
|
||||
border-top: 1px solid $color-gray-400;
|
||||
|
||||
&__title {
|
||||
@include font(16, 20, 600);
|
||||
color: $color-black;
|
||||
display: block;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
&__description {
|
||||
@include font(14, 20, 400);
|
||||
color: $color-gray-800;
|
||||
margin: 0 0 18px 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
&__notes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Connection Status
|
||||
.ppcp-r-connection-status {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
|
||||
&__status-status {
|
||||
margin: 0 0 8px 0;
|
||||
|
||||
strong {
|
||||
@include font(14, 24, 700);
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
&__show-all-data {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
&__status-label {
|
||||
@include font(11, 22, 600);
|
||||
color: $color-gray-900;
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__status-value {
|
||||
@include font(13, 26, 400);
|
||||
color: $color-text-tertiary;
|
||||
}
|
||||
|
||||
&__data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__status-toggle--toggled {
|
||||
.ppcp-r-connection-status__show-all-data {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__status-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
strong {
|
||||
@include font(14, 24, 600);
|
||||
color: $color-gray-800;
|
||||
margin-right: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ppcp-r-connection-status__status-toggle {
|
||||
line-height: 0;
|
||||
}
|
||||
&--first {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
flex-wrap: wrap;
|
||||
&__status {
|
||||
width: 100%;
|
||||
}
|
||||
&__status-row {
|
||||
flex-wrap: wrap;
|
||||
strong {
|
||||
width: 100%;
|
||||
}
|
||||
span {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Feature Refresh
|
||||
.ppcp-r-feature-refresh {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
|
||||
&-title {
|
||||
@include font(16, 20, 700);
|
||||
color: $color-black;
|
||||
display: block;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
@include font(12, 20, 400);
|
||||
color: $color-gray-700;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
@include font(13, 20, 400);
|
||||
}
|
||||
}
|
||||
|
||||
// Payment Methods
|
||||
.ppcp-r-payment-methods {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
// Settings Card and Block Styles
|
||||
.ppcp-r-settings-card__content {
|
||||
> .ppcp-r-settings-block {
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $color-divider;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px 0;
|
||||
|
||||
&.ppcp-r-settings-block__input,
|
||||
&.ppcp-r-settings-block__select {
|
||||
gap: 6px 0;
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
|
||||
&:not(:last-child):not(.ppcp-r-settings-block--accordion__header) {
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block__title {
|
||||
@include font(11, 22, 600);
|
||||
color: $color-gray-900;
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
|
||||
.ppcp-r-title-badge {
|
||||
text-transform: none;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block__title-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.ppcp-r-settings-block__accordion,
|
||||
&.ppcp-r-settings-block__feature {
|
||||
.ppcp-r-settings-block__title {
|
||||
@include font(13, 20, 600);
|
||||
color: $color-text-text;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block--accordion__title {
|
||||
@include font(14, 20, 600);
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block--accordion__description,
|
||||
.ppcp-r-settings-block__feature__description {
|
||||
color: $color-gray-700;
|
||||
@include font(13, 20, 400);
|
||||
}
|
||||
}
|
||||
|
||||
&.ppcp-r-settings-block__toggle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.ppcp-r-settings-block__title {
|
||||
color: $color-text-text;
|
||||
@include font(13, 20, 400);
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block__description {
|
||||
margin: 0;
|
||||
@include font(13, 20, 400);
|
||||
color: $color-gray-800;
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-blueberry;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $color-gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block__supplementary-title-label {
|
||||
@include font(13, 20, 400);
|
||||
color: $color-text-tertiary;
|
||||
text-transform: none;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
// Types
|
||||
&--toggle-content {
|
||||
&.ppcp-r-settings-block--content-visible {
|
||||
.ppcp-r-settings-block__toggle-content {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block__header {
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--sandbox-connected {
|
||||
.ppcp-r-settings-block__content {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.ppcp-r-connection-status__data {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&--connect-sandbox {
|
||||
button.components-button {
|
||||
@include small-button;
|
||||
}
|
||||
|
||||
.ppcp-r__radio-content-additional {
|
||||
.ppcp-r-vertical-text-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include vertical-layout-event-gap(24px);
|
||||
align-items: flex-start;
|
||||
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--troubleshooting,
|
||||
&--settings {
|
||||
> .ppcp-r-settings-block__content > *:not(:last-child) {
|
||||
padding-bottom: 32px;
|
||||
margin-bottom: 32px;
|
||||
border-bottom: 1px solid $color-gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
// Fields
|
||||
input[type='text'] {
|
||||
border-color: $color-gray-700;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
color: $color-gray-800;
|
||||
|
||||
&::placeholder {
|
||||
color: $color-gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
// MultiSelect control
|
||||
.ppcp-r {
|
||||
&__radio-wrapper {
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__radio-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__radio-content-additional {
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
// Select control styles
|
||||
&__control {
|
||||
border-radius: 2px;
|
||||
border-color: $color-gray-700;
|
||||
min-height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__input-container {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__value-container {
|
||||
padding: 0 0 0 7px;
|
||||
}
|
||||
|
||||
&__indicator {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
&__indicator-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__value-container--has-value {
|
||||
.ppcp-r__single-value {
|
||||
color: $color-gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
&__placeholder,
|
||||
&__single-value {
|
||||
@include font(13, 20, 400);
|
||||
}
|
||||
|
||||
&__option {
|
||||
&--is-selected {
|
||||
background-color: $color-gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Hooks table
|
||||
.ppcp-r-table {
|
||||
&__hooks-url {
|
||||
width: 70%;
|
||||
padding-right: 20%;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&__hooks-events {
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
width: 40%;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
td.ppcp-r-table__hooks-url,
|
||||
td.ppcp-r-table__hooks-events {
|
||||
padding-top: 12px;
|
||||
color: $color-gray-800;
|
||||
@include font(14, 20, 400);
|
||||
|
||||
span {
|
||||
color: inherit;
|
||||
@include font(14, 20, 400);
|
||||
}
|
||||
}
|
||||
|
||||
th.ppcp-r-table__hooks-url,
|
||||
th.ppcp-r-table__hooks-events {
|
||||
@include font(14, 20, 700);
|
||||
color: $color-gray-800;
|
||||
border-bottom: 1px solid $color-gray-600;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Settings specific styles
|
||||
.ppcp-r-settings-card--common-settings .ppcp-r-settings-card__content,
|
||||
.ppcp-r-settings-card--expert-settings .ppcp-r-settings-card__content {
|
||||
> .ppcp-r-settings-block {
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block {
|
||||
&--order-intent,
|
||||
&--save-payment-methods {
|
||||
@include vertical-layout-event-gap(24px);
|
||||
|
||||
> .ppcp-r-settings-block__content {
|
||||
@include vertical-layout-event-gap(24px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block__accordion {
|
||||
.ppcp-r-settings-block--accordion__header {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
&.ppcp-r-settings-block--content-visible .ppcp-r-settings-block--accordion__header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
&.ppcp-r-settings-block {
|
||||
gap: 0;
|
||||
.ppcp-r-settings-block:not(:last-child) {
|
||||
&:not(.ppcp-r__radio-content-additional .ppcp-r-settings-block) {
|
||||
padding-bottom: 32px;
|
||||
margin-bottom: 32px;
|
||||
border-bottom: 1px solid $color-divider;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block--toggle-content {
|
||||
.ppcp-r-settings-block__content {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block__button {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 50px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,193 +0,0 @@
|
|||
.ppcp-r-tab-overview-todo {
|
||||
margin: 0 0 48px 0;
|
||||
}
|
||||
|
||||
.ppcp-r-todo-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
width: 100%;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $color-gray-400;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
@include font(14, 20, 400);
|
||||
}
|
||||
|
||||
&__inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
&__close {
|
||||
margin-left: auto;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $color-blueberry;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-feature-item {
|
||||
padding-top: 32px;
|
||||
border-top: 1px solid $color-gray-400;
|
||||
|
||||
&__title {
|
||||
@include font(16, 20, 600);
|
||||
color: $color-black;
|
||||
display: block;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
&__description {
|
||||
@include font(14, 20, 400);
|
||||
color: $color-gray-800;
|
||||
margin: 0 0 18px 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 32px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
&__notes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-connection-status {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
padding-bottom: 48px;
|
||||
margin-bottom: 48px;
|
||||
border-bottom: 2px solid $color-gray-500;
|
||||
|
||||
&__status-status {
|
||||
margin: 0 0 8px 0;
|
||||
|
||||
strong {
|
||||
@include font(14, 24, 700);
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
|
||||
&__show-all-data {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
&__status-label {
|
||||
span {
|
||||
@include font(12, 16, 400);
|
||||
color: $color-gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
&__data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__status-toggle--toggled{
|
||||
.ppcp-r-connection-status__show-all-data{
|
||||
transform:rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__status-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
*{
|
||||
user-select: none;
|
||||
}
|
||||
strong {
|
||||
@include font(14, 24, 600);
|
||||
color: $color-gray-800;
|
||||
margin-right: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
span:not(.ppcp-r-connection-status__status-toggle) {
|
||||
@include font(14, 24, 400);
|
||||
color: $color-gray-800;
|
||||
}
|
||||
.ppcp-r-connection-status__status-toggle{
|
||||
line-height: 0;
|
||||
}
|
||||
&--first{
|
||||
&:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
flex-wrap: wrap;
|
||||
&__status {
|
||||
width: 100%;
|
||||
}
|
||||
&__status-row {
|
||||
flex-wrap: wrap;
|
||||
strong{
|
||||
width: 100%;
|
||||
}
|
||||
span{
|
||||
word-break:break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-feature-refresh {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
&__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: 100%;
|
||||
|
||||
&-title {
|
||||
@include font(16, 20, 700);
|
||||
color: $color-black;
|
||||
display: block;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
@include font(12, 20, 400);
|
||||
color: $color-gray-700;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
@include font(13, 20, 400);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.ppcp-r-payment-methods{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap:48px;
|
||||
}
|
||||
|
|
@ -1,312 +0,0 @@
|
|||
// Global settings styles
|
||||
.ppcp-r-settings {
|
||||
@include vertical-layout-event-gap(48px);
|
||||
}
|
||||
|
||||
|
||||
.ppcp-r-settings-card__content {
|
||||
> .ppcp-r-settings-block {
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1.5px solid $color-gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block {
|
||||
.ppcp-r-settings-block__header {
|
||||
display: flex;
|
||||
gap: 48px;
|
||||
|
||||
&-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__action {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
> .ppcp-r-settings-block__header {
|
||||
.ppcp-r-settings-block__title {
|
||||
@include font(16, 20, 700);
|
||||
color: $color-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
> .ppcp-r-settings-block__header {
|
||||
.ppcp-r-settings-block__title {
|
||||
@include font(16, 20, 600);
|
||||
color: $color-gray-800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--tertiary {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 24px;
|
||||
|
||||
> .ppcp-r-settings-block__header {
|
||||
align-items: center;
|
||||
|
||||
.ppcp-r-settings-block__title {
|
||||
color: $color-gray-800;
|
||||
@include font(14, 20, 400);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block__description {
|
||||
margin: 0;
|
||||
@include font(14, 20, 400);
|
||||
color: $color-gray-800;
|
||||
|
||||
a {
|
||||
color: $color-blueberry;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $color-gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
// Types
|
||||
&--toggle-content {
|
||||
&.ppcp-r-settings-block--content-visible {
|
||||
.ppcp-r-settings-block__toggle-content {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block__header {
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--sandbox-connected {
|
||||
.ppcp-r-settings-block__content {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
button.is-secondary {
|
||||
@include small-button;
|
||||
}
|
||||
|
||||
.ppcp-r-connection-status__data {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&--expert-rdb{
|
||||
@include vertical-layout-event-gap(24px);
|
||||
}
|
||||
&--connect-sandbox {
|
||||
button.components-button {
|
||||
@include small-button;
|
||||
}
|
||||
|
||||
.ppcp-r__radio-content-additional {
|
||||
.ppcp-r-vertical-text-control {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include vertical-layout-event-gap(24px);
|
||||
align-items: flex-start;
|
||||
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--troubleshooting {
|
||||
> .ppcp-r-settings-block__content > *:not(:last-child) {
|
||||
padding-bottom: 32px;
|
||||
margin-bottom: 32px;
|
||||
border-bottom: 1px solid $color-gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
&--settings{
|
||||
> .ppcp-r-settings-block__content > *:not(:last-child){
|
||||
padding-bottom: 32px;
|
||||
margin-bottom: 32px;
|
||||
border-bottom: 1px solid $color-gray-500;
|
||||
}
|
||||
}
|
||||
|
||||
// Fields
|
||||
input[type='text'] {
|
||||
border-color: $color-gray-700;
|
||||
width: 282px;
|
||||
max-width: 100%;
|
||||
color: $color-gray-800;
|
||||
}
|
||||
|
||||
input[type='text'] {
|
||||
&::placeholder {
|
||||
color: $color-gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r {
|
||||
&__radio-wrapper {
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
&__radio-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
label {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&__radio-content-additional {
|
||||
padding-left: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
// MultiSelect control
|
||||
.ppcp-r {
|
||||
&__control {
|
||||
border-radius: 2px;
|
||||
border-color: $color-gray-700;
|
||||
width: 282px;
|
||||
min-height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__input-container {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__value-container {
|
||||
padding: 0 0 0 7px;
|
||||
}
|
||||
|
||||
&__indicator {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
&__indicator-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__value-container--has-value {
|
||||
.ppcp-r__single-value {
|
||||
color: $color-gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
&__placeholde, &__single-value {
|
||||
@include font(13, 20, 400);
|
||||
}
|
||||
|
||||
&__option {
|
||||
&--is-selected {
|
||||
background-color: $color-gray-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Special settings styles
|
||||
|
||||
// Hooks table
|
||||
.ppcp-r-table {
|
||||
&__hooks-url {
|
||||
width: 70%;
|
||||
padding-right: 20%;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&__hooks-events {
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
width: 40%;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
td.ppcp-r-table__hooks-url, td.ppcp-r-table__hooks-events {
|
||||
padding-top: 12px;
|
||||
color: $color-gray-800;
|
||||
@include font(14, 20, 400);
|
||||
|
||||
span {
|
||||
color: inherit;
|
||||
@include font(14, 20, 400);
|
||||
}
|
||||
}
|
||||
|
||||
th.ppcp-r-table__hooks-url, th.ppcp-r-table__hooks-events {
|
||||
@include font(14, 20, 700);
|
||||
color: $color-gray-800;
|
||||
border-bottom: 1px solid $color-gray-600;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// Common settings have 48px margin&padding bottom between blocks
|
||||
.ppcp-r-settings-card--common-settings .ppcp-r-settings-card__content {
|
||||
> .ppcp-r-settings-block {
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 48px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Expert settings have 32px margin&padding bottom between blocks
|
||||
.ppcp-r-settings-card--expert-settings .ppcp-r-settings-card__content {
|
||||
> .ppcp-r-settings-block {
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 32px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Order intent block has 32px gap and no lines in between
|
||||
// Save payment methods block has 32px gap and no lines in between
|
||||
.ppcp-r-settings-block {
|
||||
&--order-intent, &--save-payment-methods {
|
||||
@include vertical-layout-event-gap(32px);
|
||||
|
||||
> .ppcp-r-settings-block__content {
|
||||
@include vertical-layout-event-gap(32px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Most primary settings block in the expert settings have 32px space after description
|
||||
.ppcp-r-settings-block--toggle-content {
|
||||
.ppcp-r-settings-block__content {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
// Common settings have actions aligned top with the text, Expert settings have actions alligned middle with the text
|
||||
.ppcp-r-settings-card--expert-settings {
|
||||
.ppcp-r-settings-block__header {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue
