mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-30 05:00:51 +08:00
✨ Make some generic UI components themeable
This commit is contained in:
Philipp Stracker
parent
85794e77ce
commit
1cac69ce99
5 changed files with 169 additions and 116 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ export const PayPalCheckbox = ( {
|
|||
}
|
||||
}
|
||||
|
||||
const className = classNames( { 'is-disabled': disabled } );
|
||||
|
||||
const onChange = ( newState ) => {
|
||||
let newValue;
|
||||
|
||||
|
|
@ -36,16 +38,14 @@ export const PayPalCheckbox = ( {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="ppcp-r__checkbox">
|
||||
{ /* todo: Can we remove the wrapper div? */ }
|
||||
<CheckboxControl
|
||||
label={ label ?? '' }
|
||||
value={ value }
|
||||
checked={ isChecked }
|
||||
disabled={ disabled }
|
||||
onChange={ onChange }
|
||||
/>
|
||||
</div>
|
||||
<CheckboxControl
|
||||
label={ label }
|
||||
value={ value }
|
||||
checked={ isChecked }
|
||||
disabled={ disabled }
|
||||
onChange={ onChange }
|
||||
className={ className }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -58,6 +58,8 @@ export const CheckboxGroup = ( { options, value, onChange } ) => (
|
|||
value={ checkbox.value }
|
||||
checked={ checkbox.checked }
|
||||
disabled={ checkbox.disabled }
|
||||
description={ checkbox.description }
|
||||
tooltip={ checkbox.tooltip }
|
||||
currentValue={ value }
|
||||
changeCallback={ onChange }
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,20 @@
|
|||
import classNames from 'classnames';
|
||||
|
||||
// Block Elements
|
||||
export const Title = ( { children, className = '' } ) => (
|
||||
<span className={ `ppcp-r-settings-block__title ${ className }`.trim() }>
|
||||
{ children }
|
||||
</span>
|
||||
);
|
||||
export const Title = ( {
|
||||
children,
|
||||
altStyle = false,
|
||||
big = false,
|
||||
className = '',
|
||||
} ) => {
|
||||
className = classNames( 'ppcp-r-settings-block__title', className, {
|
||||
'style-alt': altStyle,
|
||||
'style-big': big,
|
||||
} );
|
||||
|
||||
return <span className={ className }>{ children }</span>;
|
||||
};
|
||||
|
||||
export const TitleWrapper = ( { children } ) => (
|
||||
<span className="ppcp-r-settings-block__title-wrapper">{ children }</span>
|
||||
);
|
||||
|
|
@ -14,13 +25,25 @@ export const SupplementaryLabel = ( { children } ) => (
|
|||
</span>
|
||||
);
|
||||
|
||||
export const Description = ( { children, className = '' } ) => (
|
||||
<span
|
||||
className={ `ppcp-r-settings-block__description ${ className }`.trim() }
|
||||
>
|
||||
{ children }
|
||||
</span>
|
||||
);
|
||||
export const Description = ( { children, asHtml = false, className = '' } ) => {
|
||||
// Don't output anything if description is empty.
|
||||
if ( ! children ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
className = classNames( 'ppcp-r-settings-block__description', className );
|
||||
|
||||
if ( ! asHtml ) {
|
||||
return <span className={ className }>{ children }</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<span
|
||||
className={ className }
|
||||
dangerouslySetInnerHTML={ { __html: children } }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const Action = ( { children } ) => (
|
||||
<div className="ppcp-r-settings-block__action">{ children }</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
