Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add styling to checkboxes (https://github.com/woocommerce/woocommerce-blocks/pull/1880) 

* Add styling to checkboxes

* Add resets for some themes

* Simplify props
This commit is contained in:
Albert Juhé Lluveras 2020-03-06 11:26:03 +01:00 committed by GitHub
parent 2c8388f0a8
commit 20da4900c2
4 changed files with 45 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/index.js Normal file
View File

@ -0,0 +1,29 @@
/**
* External dependencies
*/
import { CheckboxControl as WPCheckboxControl } from 'wordpress-components';
import PropTypes from 'prop-types';
import classNames from 'classnames';
/**
* Internal dependencies
*/
import './style.scss';
/**
* Component used to show a checkbox control with styles.
*/
const CheckboxControl = ( { className, ...props } ) => {
return (
<WPCheckboxControl
className={ classNames( 'wc-block-checkbox', className ) }
{ ...props }
/>
);
};
CheckboxControl.propTypes = {
className: PropTypes.string,
};
export default CheckboxControl;

13
plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss Normal file
View File

@ -0,0 +1,13 @@
.wc-block-checkbox {
.components-checkbox-control__input[type="checkbox"]:checked {
background: currentColor;
border-color: currentColor;
}
.components-checkbox-control__input[type="checkbox"]:focus {
border-color: currentColor;
box-shadow: 0 0 2px currentColor;
}
.components-checkbox-control__label {
display: inline;
}
}

2
plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/block.js
View File

@ -11,7 +11,7 @@ import CheckoutForm from '@woocommerce/base-components/checkout/form';
import NoShipping from '@woocommerce/base-components/checkout/no-shipping';
import TextInput from '@woocommerce/base-components/text-input';
import ShippingRatesControl from '@woocommerce/base-components/shipping-rates-control';
import { CheckboxControl } from '@wordpress/components';
import CheckboxControl from '@woocommerce/base-components/checkbox-control';
import { getCurrencyFromPriceResponse } from '@woocommerce/base-utils';
import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
import CheckoutProvider from '@woocommerce/base-context/checkout-context';

2
plugins/woocommerce-blocks/bin/webpack-helpers.js
View File

@ -132,6 +132,8 @@ const stableMainEntry = {
'panel-style': './node_modules/@wordpress/components/src/panel/style.scss',
'custom-select-control-style':
'./node_modules/@wordpress/components/src/custom-select-control/style.scss',
'checkbox-control-style':
'./node_modules/@wordpress/components/src/checkbox-control/style.scss',
'spinner-style':
'./node_modules/@wordpress/components/src/spinner/style.scss',
};