[UI Components] resolve missing styles from checkbox-control (WordPre…

…ss#11089)
jffng · Jul 11, 2019 · fdbc8fd · fdbc8fd
1 parent a7cc76c
commit fdbc8fd
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 1 deletion.
diff --git a/packages/components/src/checkbox-control/index.js b/packages/components/src/checkbox-control/index.js
@@ -7,11 +7,25 @@ import { withInstanceId } from '@wordpress/compose';
  * Internal dependencies
  */
 import BaseControl from '../base-control';
+import { G, Path, SVG } from '../primitives';
 
 function CheckboxControl( { label, className, heading, checked, help, instanceId, onChange, ...props } ) {
 	const id = `inspector-checkbox-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.checked );
 
+	const svgCheck = (
+		<SVG
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+			className="components-checkbox-control__checked"
+			role="presentation"
+		>
+			<G>
+				<Path d="M14.83 4.89l1.34.94-5.81 8.38H9.02L5.78 9.67l1.34-1.25 2.57 2.4z" />
+			</G>
+		</SVG>
+	);
+
 	return (
 		<BaseControl label={ heading } id={ id } help={ help } className={ className }>
 			<input
@@ -25,6 +39,7 @@ function CheckboxControl( { label, className, heading, checked, help, instanceId
 				{ ...props }
 			/>
 			<label className="components-checkbox-control__label" htmlFor={ id }>
+				{ checked ? svgCheck : null }
 				{ label }
 			</label>
 		</BaseControl>

diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
@@ -1,3 +1,76 @@
 .components-checkbox-control__input[type="checkbox"] {
-	margin-top: 0;
+	border: 1px solid #b4b9be;
+	background: #fff;
+	color: #555;
+	clear: none;
+	cursor: pointer;
+	display: inline-block;
+	line-height: 0;
+	height: 16px;
+	margin: 0 4px 0 0;
+	outline: 0;
+	padding: 0 !important;
+	text-align: center;
+	vertical-align: middle;
+	width: 16px;
+	min-width: 16px;
+	-webkit-appearance: none;
+	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+	transition: 0.05s border-color ease-in-out;
+
+	&:focus {
+		border-color: #5b9dd9;
+		box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
+		/* Only visible in Windows High Contrast mode */
+		outline: 2px solid transparent;
+	}
+
+	&:checked {
+		background: #11a0d2;
+		border-color: #11a0d2;
+	}
+
+	&:focus:checked {
+		border: none;
+	}
+
+	&:checked::before {
+		content: none;
+	}
+}
+
+.components-checkbox-control__label {
+	position: relative;
+	vertical-align: middle;
+}
+
+.components-checkbox-control__checked {
+	width: 21px;
+	height: 21px;
+	fill: #fff;
+	cursor: pointer;
+	position: absolute;
+	left: -31px;
+	top: -2px;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+}
+
+@media screen and ( max-width: 728px ) {
+	.components-checkbox-control__input[type="checkbox"] {
+		width: 25px;
+		height: 25px;
+	}
+
+	.components-checkbox-control__checked {
+		width: 30px;
+		height: 30px;
+		left: -40px;
+		top: -7px;
+	}
 }