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

♻️ Start to unclutter SCSS a bit

Browse source
This commit is contained in:
Philipp Stracker 2025-01-10 18:20:00 +01:00
parent 2a1da98b5f
commit 25887024a6
No known key found for this signature in database
12 changed files with 351 additions and 428 deletions
Download patch file Download diff file Expand all files Collapse all files

38
modules/ppcp-settings/resources/css/components/screens/settings/_block-accordion.scss
View file

@ -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;
}
}
}
}

77
modules/ppcp-settings/resources/css/components/screens/settings/_input.scss Normal file
View file

@ -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;
}
}
}

121
modules/ppcp-settings/resources/css/components/screens/settings/_tab-styling.scss Normal file
View file

@ -0,0 +1,121 @@
.ppcp-r-styling {
display: flex;
border: 1px solid $color-gray-200;
border-radius: 8px;
overflow: hidden;
&__section:not(:last-child) {
border-bottom: 1px solid black;
padding-bottom: 24px;
margin-bottom: 28px;
border-bottom: 1px solid $color-gray-600;
}
&__main-title {
@include font(14, 20, 600);
color: $color-gray-800;
margin: 0 0 8px 0;
display: block;
}
&__description {
@include font(13, 20, 400);
color: $color-gray-800;
margin: 0 0 18px 0;
}
&__settings {
width: 422px;
background-color: $color-white;
padding: 48px;
}
&__preview {
width: calc(100% - 422px);
background-color: #FAF8F5;
display: flex;
align-items: center;
&-inner {
width: 100%;
padding: 24px;
}
}
&__section--rc {
.ppcp-r-styling__title {
@include font(13, 20, 600);
color: $color-black;
display: block;
margin: 0 0 18px 0;
}
}
&__section--empty.ppcp-r-styling__section {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
&__select {
label {
@include font(13, 16, 600);
color: $color-black;
margin: 0;
text-transform: none;
}
select {
@include font(13, 20, 400);
}
}
.ppcp-r__checkbox {
.components-checkbox-control {
&__label {
@include font(13, 20, 400);
color: $color-black;
}
}
.components-flex {
gap: 12px;
}
}
&__payment-method-checkboxes {
display: flex;
flex-direction: column;
gap: 24px;
}
}
.ppcp-r {
&__horizontal-control {
.components-flex {
flex-direction: row;
justify-content: flex-start;
gap: 32px;
}
.components-radio-control {
&__option {
gap: 12px;
input {
margin: 0;
}
label {
@include font(13, 20, 400);
color: $color-black;
}
}
input {
margin: 0;
}
}
}
}