woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-31 06:52:50 +08:00
Code Issues Projects Packages Wiki Activity Actions

♻️ Extract general styles to own SCSS file

Browse source
This commit is contained in:
Philipp Stracker 2025-01-22 17:53:35 +01:00
parent c466a91646
commit b36461bca7
No known key found for this signature in database
3 changed files with 72 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

1
modules/ppcp-settings/resources/css/components/_reusable.scss
View file

@ -3,6 +3,7 @@
@import './reusable-components/badge-box'; @import './reusable-components/badge-box';
@import './reusable-components/busy-state'; @import './reusable-components/busy-state';
@import './reusable-components/button'; @import './reusable-components/button';
@import './reusable-components/elements';
@import './reusable-components/fields'; @import './reusable-components/fields';
@import './reusable-components/hstack'; @import './reusable-components/hstack';
@import './reusable-components/navigation'; @import './reusable-components/navigation';

71
modules/ppcp-settings/resources/css/components/reusable-components/_elements.scss Normal file
View file

@ -0,0 +1,71 @@
/**
* General styling for reusable components in the "Elements" folder.
*/
.ppcp--header {
display: flex;
flex-direction: column;
gap: 6px;
&:not(:last-child) {
padding-bottom: var(--block-header-gap, 6px);
}
}
.ppcp--title {
@include font(11, 22, 600);
color: var(--color-text-title);
display: block;
text-transform: uppercase;
&.ppcp--no-caps {
@include font(14, 16, 600);
text-transform: none;
}
&.ppcp--big {
@include font(16, 20, 600);
}
.ppcp-r-title-badge {
text-transform: none;
margin-left: 6px;
}
}
.ppcp--title-extra {
@include font(13, 20, 400);
color: var(--color-text-teriary);
text-transform: none;
margin-left: 5px;
}
.ppcp--title-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.ppcp--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--action {
& + .ppcp--action {
margin-top: var(--block-action-gap, 16px);
}
}

66
modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
View file

@ -6,50 +6,6 @@
flex-direction: column; flex-direction: column;
gap: var(--block-item-gap, 16px); gap: var(--block-item-gap, 16px);
.ppcp--header {
display: flex;
flex-direction: column;
gap: 6px;
&:not(:last-child) {
padding-bottom: var(--block-header-gap, 6px);
}
}
.ppcp--title {
@include font(11, 22, 600);
color: var(--color-text-title);
display: block;
text-transform: uppercase;
&.ppcp--no-caps {
@include font(14, 16, 600);
text-transform: none;
}
&.ppcp--big {
@include font(16, 20, 600);
}
.ppcp-r-title-badge {
text-transform: none;
margin-left: 6px;
}
}
.ppcp--title-extra {
@include font(13, 20, 400);
color: var(--color-text-teriary);
text-transform: none;
margin-left: 5px;
}
.ppcp--title-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
&.ppcp-r-settings-block__feature { &.ppcp-r-settings-block__feature {
.ppcp--title { .ppcp--title {
@include font(13, 20, 600); @include font(13, 20, 600);
@ -63,33 +19,11 @@
} }
} }
.ppcp--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:not(.ppcp--no-gap) { + .ppcp-r-settings-block:not(.ppcp--no-gap) {
margin-top: var(--block-separator-gap, 32px); margin-top: var(--block-separator-gap, 32px);
padding-top: var(--block-separator-gap, 32px); padding-top: var(--block-separator-gap, 32px);
border-top: var(--block-separator-size, 1px) solid var(--block-separator-color); border-top: var(--block-separator-size, 1px) solid var(--block-separator-color);
} }
.ppcp--action + .ppcp--action {
margin-top: var(--block-action-gap, 16px);
}
} }
.ppcp-r-settings-block { .ppcp-r-settings-block {