mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-31 06:52:50 +08:00
♻️ Start to unclutter SCSS a bit
This commit is contained in:
Philipp Stracker
parent
2a1da98b5f
commit
25887024a6
12 changed files with 351 additions and 428 deletions
|
|
@ -54,4 +54,9 @@ $card-vertical-gap: 48px;
|
|||
--color-gray-200: #{$color-gray-200};
|
||||
--color-gray-100: #{$color-gray-100};
|
||||
--color-gradient-dark: #{$color-gradient-dark};
|
||||
|
||||
--color-text-title: #{$color-gray-900};
|
||||
--color-text-main: #{$color-text-text};
|
||||
--color-text-teriary: #{$color-text-tertiary};
|
||||
--color-text-description: #{$color-gray-700};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
@import "./reusable-components/payment-method-item";
|
||||
@import './reusable-components/accordion-section';
|
||||
@import './reusable-components/badge-box';
|
||||
@import './reusable-components/busy-state';
|
||||
@import './reusable-components/button';
|
||||
@import './reusable-components/fields';
|
||||
@import './reusable-components/navigation';
|
||||
@import './reusable-components/onboarding-header';
|
||||
@import './reusable-components/payment-method-icons';
|
||||
@import './reusable-components/select-box';
|
||||
@import './reusable-components/separator';
|
||||
@import './reusable-components/settings-block';
|
||||
@import './reusable-components/settings-card';
|
||||
@import './reusable-components/settings-toggle-block';
|
||||
@import './reusable-components/settings-wrapper';
|
||||
@import './reusable-components/spinner-overlay';
|
||||
@import './reusable-components/tab-navigation';
|
||||
@import './reusable-components/title-badge';
|
||||
@import './reusable-components/welcome-docs';
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
/*
|
||||
Styles the `SettingsBlock` and all its derived components.
|
||||
*/
|
||||
.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: var(--color-text-title);
|
||||
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__feature {
|
||||
.ppcp-r-settings-block__title {
|
||||
@include font(13, 20, 600);
|
||||
color: var(--color-text-main);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block__feature__description {
|
||||
@include font(13, 20, 400);
|
||||
color: var(--color-text-description);
|
||||
}
|
||||
}
|
||||
|
||||
&.ppcp-r-settings-block__toggle {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.ppcp-r-settings-block__title {
|
||||
@include font(13, 20, 400);
|
||||
color: var(--color-text-main);
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block__description {
|
||||
@include font(13, 20, 400);
|
||||
margin: 0;
|
||||
color: var(--color-text-description);
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-blueberry);
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--color-gray-800);
|
||||
}
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block__supplementary-title-label {
|
||||
@include font(13, 20, 400);
|
||||
color: var(--color-text-teriary);
|
||||
text-transform: none;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
+ .ppcp-r-settings-block {
|
||||
margin-top: 32px;
|
||||
padding-top: 32px;
|
||||
border-top: 1px solid var(--color-gray-200);
|
||||
}
|
||||
|
||||
// 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 {
|
||||
@include vertical-layout-event-gap(24px);
|
||||
align-items: flex-start;
|
||||
|
||||
.ppcp-r-vertical-text-control,
|
||||
input[type='text'] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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--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;
|
||||
}
|
||||
|
||||
.ppcp-r-settings-block__accordion {
|
||||
> .ppcp-r-accordion {
|
||||
width: 100%;
|
||||
|
||||
.ppcp-r-accordion__toggler {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
text-align: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
/*
|
||||
Styles the `SettingsCard` layout component.
|
||||
|
||||
This is a 2-column row that displays a title + description on the
|
||||
left side, and a "card" with settings content on the right side.
|
||||
*/
|
||||
.ppcp-r-settings-card {
|
||||
|
||||
// -- Theming
|
||||
|
||||
--card-width-header: 100%;
|
||||
--card-width-content: 100%;
|
||||
--card-gap: 0;
|
||||
--card-layout: block;
|
||||
|
||||
@media screen and (min-width: 960px) {
|
||||
--card-width-header: 280px;
|
||||
--card-width-content: 610px;
|
||||
--card-gap: 48px;
|
||||
--card-layout: flex;
|
||||
}
|
||||
|
||||
// -- Styling
|
||||
|
||||
display: var(--card-layout);
|
||||
gap: var(--card-gap);
|
||||
margin: 0 0 var(--card-gap) 0;
|
||||
|
||||
.ppcp-r-settings-card__header {
|
||||
display: var(--card-layout);
|
||||
width: var(--card-width-header);
|
||||
flex: 0 0 var(--card-width-header);
|
||||
gap: 18px;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
.ppcp-r-settings-card__content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.ppcp-r-settings-card__content {
|
||||
flex: 1;
|
||||
max-width: var(--card-width-content);
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.ppcp-r-settings-card__title {
|
||||
@include font(13, 24, 600);
|
||||
color: var(--color-text-main);
|
||||
margin: 0 0 4px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ppcp-r-settings-card__description {
|
||||
@include font(13, 20, 400);
|
||||
color: var(--color-text-teriary);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -26,60 +26,4 @@
|
|||
border-bottom: 1px solid $color-gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
&-settings-card {
|
||||
@media screen and (min-width: 960px) {
|
||||
display: flex;
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
&__content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
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 {
|
||||
border: 1px solid $color-gray-200;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
@media screen and (min-width: 960px) {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
@include font(13, 24, 600);
|
||||
color: $color-text-text;
|
||||
margin: 0 0 4px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
&__description {
|
||||
@include font(13, 20, 400);
|
||||
color: $color-text-tertiary;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
@import "./settings/block-accordion";
|
||||
@import './settings/input';
|
||||
@import './settings/tab-styling';
|
||||
|
||||
// Container and Tab Settings
|
||||
.ppcp-r-tabs.settings,
|
||||
|
|
@ -245,310 +246,3 @@
|
|||
gap: 48px;
|
||||
}
|
||||
|
||||
// Settings Card and Block Styles
|
||||
.ppcp-r-settings-card {
|
||||
margin: 0 0 48px 0;
|
||||
}
|
||||
|
||||
.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__feature {
|
||||
.ppcp-r-settings-block__title {
|
||||
@include font(13, 20, 600);
|
||||
color: $color-text-text;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.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--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,38 +0,0 @@
|
|||
.ppcp-r-settings-block__accordion {
|
||||
> .ppcp-r-accordion {
|
||||
width: 100%;
|
||||
|
||||
.ppcp-r-accordion__toggler {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
text-align: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&.ppcp-r-settings-block {
|
||||
gap: 0;
|
||||
|
||||
.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 {
|
||||
color: $color-gray-700;
|
||||
@include font(13, 20, 400);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
// Fields
|
||||
.ppcp-r {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,26 +3,9 @@
|
|||
|
||||
#ppcp-settings-container {
|
||||
@import './global';
|
||||
@import './components/reusable-components/busy-state';
|
||||
@import './components/reusable-components/button';
|
||||
@import './components/reusable-components/separator';
|
||||
@import './components/reusable-components/onboarding-header';
|
||||
@import './components/reusable-components/settings-toggle-block';
|
||||
@import './components/reusable-components/payment-method-icons';
|
||||
@import "./components/reusable-components/payment-method-item";
|
||||
@import './components/reusable-components/settings-wrapper';
|
||||
@import './components/reusable-components/select-box';
|
||||
@import './components/reusable-components/tab-navigation';
|
||||
@import './components/reusable-components/navigation';
|
||||
@import './components/reusable-components/fields';
|
||||
@import './components/reusable-components/title-badge';
|
||||
@import './components/reusable-components/accordion-section';
|
||||
@import './components/reusable-components/badge-box';
|
||||
@import './components/reusable-components/spinner-overlay';
|
||||
@import './components/reusable-components/welcome-docs';
|
||||
@import './components/reusable';
|
||||
@import './components/screens/onboarding';
|
||||
@import './components/screens/settings';
|
||||
@import './components/screens/overview/tab-styling';
|
||||
@import './components/app';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
const SettingsBlock = ( { className, children } ) => {
|
||||
const blockClassName = [ 'ppcp-r-settings-block', className ].filter(
|
||||
Boolean
|
||||
);
|
||||
import classNames from 'classnames';
|
||||
|
||||
return <div className={ blockClassName.join( ' ' ) }>{ children }</div>;
|
||||
const SettingsBlock = ( { className, children } ) => {
|
||||
const blockClassName = classNames( 'ppcp-r-settings-block', className );
|
||||
|
||||
return <div className={ blockClassName }>{ children }</div>;
|
||||
};
|
||||
|
||||
export default SettingsBlock;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import classNames from 'classnames';
|
||||
|
||||
import { Content, ContentWrapper } from './SettingsBlocks';
|
||||
|
||||
const SettingsCard = ( {
|
||||
|
|
@ -9,9 +11,7 @@ const SettingsCard = ( {
|
|||
contentItems,
|
||||
contentContainer = true,
|
||||
} ) => {
|
||||
const className = [ 'ppcp-r-settings-card', extraClassName ]
|
||||
.filter( Boolean )
|
||||
.join( ' ' );
|
||||
const className = classNames( 'ppcp-r-settings-card', extraClassName );
|
||||
|
||||
const renderContent = () => {
|
||||
// If contentItems array is provided, wrap each item in Content component
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
