mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-30 05:00:51 +08:00
♻️ Add prefix to CSS state-classes
This commit is contained in:
Philipp Stracker
parent
193e046a9a
commit
54504b7591
15 changed files with 32 additions and 33 deletions
|
|
@ -45,7 +45,7 @@
|
|||
}
|
||||
|
||||
@mixin disabled-state($control-type) {
|
||||
.components-#{$control-type}-control.is-disabled {
|
||||
.components-#{$control-type}-control.ppcp--is-disabled {
|
||||
.components-#{$control-type}-control__input,
|
||||
.components-#{$control-type}-control__label,
|
||||
.components-base-control__help {
|
||||
|
|
|
|||
|
|
@ -48,11 +48,11 @@
|
|||
@include font(16, 24, 600);
|
||||
color: var(--color-text);
|
||||
|
||||
.title {
|
||||
.ppcp--title {
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
.big {
|
||||
.ppcp--big {
|
||||
@include font(20, 28, 400);
|
||||
}
|
||||
}
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.is-scrolled {
|
||||
&.ppcp--is-scrolled {
|
||||
box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85, 93, 102, .3);
|
||||
}
|
||||
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
row-gap: 8px;
|
||||
white-space: nowrap;
|
||||
|
||||
&--right {
|
||||
.ppcp-r-navigation--right {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
z-index: 10;
|
||||
|
|
@ -98,12 +98,12 @@
|
|||
box-shadow: -5px 0 8px var(--ppcp-color-app-bg);
|
||||
}
|
||||
|
||||
&--progress-bar {
|
||||
.ppcp-r-navigation--progress-bar {
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.components-button.is-title {
|
||||
.title {
|
||||
.ppcp--title {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
padding: 24px 16px 24px 16px;
|
||||
|
||||
|
||||
&.selected {
|
||||
&.ppcp--selected {
|
||||
border-color: $color-blueberry;
|
||||
outline-color: $color-blueberry;
|
||||
box-shadow: $shadow-selection-box;
|
||||
|
|
|
|||
|
|
@ -27,12 +27,12 @@
|
|||
display: block;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.style-alt {
|
||||
&.ppcp--no-caps {
|
||||
@include font(14, 16, 600);
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
&.style-big {
|
||||
&.ppcp--big {
|
||||
@include font(16, 20, 600);
|
||||
}
|
||||
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
margin-left: 5px;
|
||||
}
|
||||
|
||||
+ .ppcp-r-settings-block:not(.no-gap) {
|
||||
+ .ppcp-r-settings-block:not(.ppcp--no-gap) {
|
||||
margin-top: var(--block-separator-gap, 32px);
|
||||
padding-top: var(--block-separator-gap, 32px);
|
||||
border-top: 1px solid var(--color-gray-200);
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
}
|
||||
|
||||
// Select-fields have a smaller gap between the header and input field.
|
||||
&.has-select {
|
||||
&.ppcp--has-select {
|
||||
--block-header-gap: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
margin-bottom: 28px;
|
||||
border-bottom: 1px solid var(--color-separators);
|
||||
|
||||
&.no-gap,
|
||||
&.ppcp--no-gap,
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
import classNames from 'classnames';
|
||||
|
||||
const Title = ( {
|
||||
children,
|
||||
altStyle = false,
|
||||
big = false,
|
||||
className = '',
|
||||
} ) => {
|
||||
const Title = ( { children, noCaps = false, big = false, className = '' } ) => {
|
||||
if ( ! children ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const elementClasses = classNames(
|
||||
'ppcp-r-settings-block__title',
|
||||
className,
|
||||
{
|
||||
'style-alt': altStyle,
|
||||
'style-big': big,
|
||||
'ppcp--no-caps': noCaps,
|
||||
'ppcp--big': big,
|
||||
}
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const Checkbox = ( {
|
|||
}
|
||||
}
|
||||
|
||||
const className = classNames( { 'is-disabled': disabled } );
|
||||
const className = classNames( { 'ppcp--is-disabled': disabled } );
|
||||
|
||||
const onChange = ( newState ) => {
|
||||
let newValue;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ const SelectableContent = ( {
|
|||
}
|
||||
|
||||
const boxClassName = classNames( 'ppcp-r-select-box', {
|
||||
selected: isSelected,
|
||||
'ppcp--selected': isSelected,
|
||||
} );
|
||||
|
||||
const InputField = ( { isRadio } ) => {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import classNames from 'classnames';
|
|||
|
||||
const SettingsBlock = ( { className, children, separatorAndGap = true } ) => {
|
||||
const blockClassName = classNames( 'ppcp-r-settings-block', className, {
|
||||
'no-gap': ! separatorAndGap,
|
||||
'ppcp--no-gap': ! separatorAndGap,
|
||||
} );
|
||||
|
||||
return <div className={ blockClassName }>{ children }</div>;
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@ const TopNavigation = ( {
|
|||
const { isScrolled } = useIsScrolled();
|
||||
|
||||
const className = classNames( 'ppcp-r-navigation-container', {
|
||||
'is-scrolled': isScrolled,
|
||||
'ppcp--is-scrolled': isScrolled,
|
||||
} );
|
||||
const titleClassName = classNames( 'title', {
|
||||
big: isMainTitle,
|
||||
const titleClassName = classNames( 'ppcp--title', {
|
||||
'ppcp--big': isMainTitle,
|
||||
} );
|
||||
|
||||
const handleTitleClick = useCallback( () => {
|
||||
|
|
|
|||
|
|
@ -54,8 +54,8 @@ const ConnectionButton = ( {
|
|||
removeCompleteHandler,
|
||||
} = useHandleOnboardingButton( isSandbox );
|
||||
const buttonClassName = classNames( 'ppcp-r-connection-button', className, {
|
||||
'sandbox-mode': isSandbox,
|
||||
'live-mode': ! isSandbox,
|
||||
'ppcp--mode-sandbox': isSandbox,
|
||||
'ppcp--mode-live': ! isSandbox,
|
||||
} );
|
||||
const environment = isSandbox ? 'sandbox' : 'production';
|
||||
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ const ManualConnectionForm = () => {
|
|||
value={ manualClientId }
|
||||
onChange={ setManualClientId }
|
||||
className={ classNames( {
|
||||
'has-error': ! clientValid,
|
||||
'ppcp--has-error': ! clientValid,
|
||||
} ) }
|
||||
/>
|
||||
{ clientValid || (
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const StylingSectionWithCheckboxes = ( {
|
|||
onChange,
|
||||
children,
|
||||
} ) => {
|
||||
className = classNames( 'has-checkboxes', className );
|
||||
className = classNames( 'ppcp--has-checkboxes', className );
|
||||
|
||||
return (
|
||||
<StylingSection
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const StylingSectionWithRadiobuttons = ( {
|
|||
onChange,
|
||||
children,
|
||||
} ) => {
|
||||
className = classNames( 'has-radio-buttons', className );
|
||||
className = classNames( 'ppcp--has-radio-buttons', className );
|
||||
|
||||
return (
|
||||
<StylingSection
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const StylingSectionWithSelect = ( {
|
|||
onChange,
|
||||
children,
|
||||
} ) => {
|
||||
className = classNames( 'has-select', className );
|
||||
className = classNames( 'ppcp--has-select', className );
|
||||
|
||||
return (
|
||||
<StylingSection
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
