woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 11

✨ Make some generic UI components themeable

Browse source
This commit is contained in:
Philipp Stracker 2025-01-16 14:37:44 +01:00
parent 85794e77ce
commit 1cac69ce99
No known key found for this signature in database
5 changed files with 169 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

11
modules/ppcp-settings/resources/css/_mixins.scss
View file

@ -43,3 +43,14 @@
display: flex;
gap: $gap;
}
@mixin disabled-state($control-type) {
.components-#{$control-type}-control.is-disabled {
.components-#{$control-type}-control__input,
.components-#{$control-type}-control__label,
.components-base-control__help {
opacity: 0.5;
cursor: default;
}
}
}

186
modules/ppcp-settings/resources/css/components/reusable-components/_fields.scss
View file

@ -1,27 +1,96 @@
.ppcp-r {
.ppcp-r__radio-value {
@include hide-input-field;
&__radio-value {
@include hide-input-field;
&:checked + .ppcp-r__radio-presentation {
position: relative;
&: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%;
}
}
}
&::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%;
}
.ppcp-r__radio-presentation {
@include fake-input-field(20px);
}
.ppcp-r__checkbox-presentation {
@include fake-input-field(2px);
}
.ppcp-r__radio-wrapper {
display: flex;
gap: 18px;
align-items: center;
position: relative;
label {
@include font(13, 20, 400);
color: $color-gray-800;
}
}
.ppcp-r__radio-description {
@include font(13, 20, 400);
margin: 0;
color: $color-gray-800;
}
.ppcp-r__radio-content-additional {
padding-left: 38px;
padding-top: 18px;
}
.ppcp-r-app {
@include disabled-state('base');
@include disabled-state('checkbox');
.components-base-control__label {
@include font(13, 16, 600);
color: $color-gray-900;
text-transform: none;
}
.components-base-control__input {
border: 1px solid $color-gray-700;
border-radius: 2px;
box-shadow: none;
&:focus {
border-color: $color-blueberry;
}
}
&__checkbox {
.components-base-control__help {
margin-bottom: 0;
}
// Text input fields.
input[type='text'] {
@include font(14, 20, 400);
@include primaryFont;
padding: 7px 11px;
border-radius: 2px;
}
// Select lists.
select {
@include font(14, 20, 400);
padding: 7px 27px 7px 11px;
}
// Checkboxes.
.components-checkbox-control {
position: relative;
input {
@ -30,7 +99,7 @@
&:checked {
background-color: $color-blueberry;
border-color:$color-blueberry;
border-color: $color-blueberry;
}
}
@ -43,78 +112,17 @@
}
}
&__radio-presentation {
@include fake-input-field(20px);
// Custom styles.
.components-form-toggle.is-checked > .components-form-toggle__track {
background-color: $color-blueberry;
}
&__checkbox-presentation {
@include fake-input-field(2px);
}
&__radio-wrapper {
display: flex;
gap: 18px;
align-items: center;
position: relative;
label {
@include font(13, 20, 400);
color: $color-gray-800;
}
}
&__radio-description {
@include font(13, 20, 400);
margin: 0;
color: $color-gray-800;
}
&__radio-content-additional {
padding-left: 38px;
padding-top: 18px;
}
}
.components-base-control {
&__label {
color: $color-gray-900;
@include font(13, 16, 600);
text-transform: none;
}
&__input {
border: 1px solid $color-gray-700;
border-radius: 2px;
box-shadow: none;
&:focus {
border-color: $color-blueberry;
.ppcp-r-vertical-text-control {
.components-base-control__field {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
}
}
}
input[type='text'] {
padding: 7px 11px;
@include font(14, 20, 400);
@include primaryFont;
border-radius: 2px;
}
select {
padding: 7px 27px 7px 11px;
@include font(14, 20, 400);
}
.components-form-toggle.is-checked > .components-form-toggle__track {
background-color: $color-blueberry;
}
.ppcp-r-vertical-text-control {
.components-base-control__field {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
}
}

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

@ -4,7 +4,7 @@
.ppcp-r-settings-block {
display: flex;
flex-direction: column;
gap: 16px 0;
gap: var(--block-item-gap, 16px) 0;
&.ppcp-r-settings-block__input,
&.ppcp-r-settings-block__select {
@ -16,8 +16,8 @@
flex-direction: column;
gap: 6px;
&:not(:last-child):not(.ppcp-r-settings-block--accordion__header) {
padding-bottom: 6px;
&:not(:last-child) {
padding-bottom: var(--block-header-gap, 6px);
}
}
@ -27,6 +27,15 @@
display: block;
text-transform: uppercase;
&.style-alt {
@include font(14, 16, 600);
text-transform: none;
}
&.style-big {
@include font(16, 20, 600);
}
.ppcp-r-title-badge {
text-transform: none;
margin-left: 6px;
@ -89,8 +98,8 @@
}
+ .ppcp-r-settings-block:not(.no-gap) {
margin-top: 32px;
padding-top: 32px;
margin-top: var(--block-separator-gap, 32px);
padding-top: var(--block-separator-gap, 32px);
border-top: 1px solid var(--color-gray-200);
}