diff --git a/src/Checkbox/Checkbox.js b/src/Checkbox/Checkbox.js index d35c9210f..064e1681f 100644 --- a/src/Checkbox/Checkbox.js +++ b/src/Checkbox/Checkbox.js @@ -15,6 +15,7 @@ type Props = { disabled?: boolean, /** ID for the checkbox */ id?: string, + indeterminate?: boolean, /** Makes the checkbox required and sets aria-invalid to true */ isRequired?: boolean, /** Checkbox label */ @@ -39,6 +40,7 @@ const Checkbox = ({ defaultChecked, disabled, id, + indeterminate, isRequired, label, onBlur, @@ -62,6 +64,7 @@ const Checkbox = ({ defaultChecked={defaultChecked} disabled={disabled} id={id} + indeterminate={indeterminate} onBlur={onBlur} onChange={onChange} onFocus={onFocus} @@ -84,6 +87,7 @@ Checkbox.defaultProps = { defaultChecked: undefined, disabled: false, id: undefined, + indeterminate: false, isRequired: false, onBlur: undefined, onChange: undefined, diff --git a/src/Checkbox/Checkbox.mdx b/src/Checkbox/Checkbox.mdx index a48e263c6..755c9a60f 100644 --- a/src/Checkbox/Checkbox.mdx +++ b/src/Checkbox/Checkbox.mdx @@ -31,6 +31,12 @@ Make the checkbox disabled with the `disabled` prop. <Checkbox checked disabled label="Click me" /> </Playground> +## Indeterminate + +<Playground> + <Checkbox label="Click me" checked indeterminate /> +</Playground> + ## States A checkbox can use different states (as per palette) such as `danger`, `success` and `warning`. diff --git a/src/Checkbox/CheckboxField.js b/src/Checkbox/CheckboxField.js index bf500812c..325042ae9 100644 --- a/src/Checkbox/CheckboxField.js +++ b/src/Checkbox/CheckboxField.js @@ -19,6 +19,7 @@ type Props = { hint?: string | Element<any>, /** ID for the checkbox */ id?: string, + indeterminate?: boolean, isFullWidth?: boolean, isOptional?: boolean, /** Makes the checkbox required and sets aria-invalid to true */ @@ -45,6 +46,7 @@ const CheckboxField = ({ description, hint, label, + indeterminate, isFullWidth, isOptional, isRequired, @@ -77,6 +79,7 @@ CheckboxField.defaultProps = { disabled: false, hint: undefined, id: undefined, + indeterminate: false, isFullWidth: false, isOptional: false, isRequired: false, diff --git a/src/Checkbox/__tests__/Checkbox.test.js b/src/Checkbox/__tests__/Checkbox.test.js index 298e2bc20..08664ce47 100644 --- a/src/Checkbox/__tests__/Checkbox.test.js +++ b/src/Checkbox/__tests__/Checkbox.test.js @@ -13,6 +13,11 @@ it('renders correctly for a disabled checkbox', () => { expect(container.firstChild).toMatchSnapshot(); }); +it('renders correctly for an indeterminate checkbox', () => { + const { container } = render(<Checkbox defaultChecked indeterminate />); + expect(container.firstChild).toMatchSnapshot(); +}); + describe('states', () => { ['danger', 'success', 'warning', 'primary'].forEach(state => { it(`renders correctly for an checkbox with state ${state}`, () => { diff --git a/src/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/src/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap index 64ffed907..3337c1a93 100644 --- a/src/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap +++ b/src/Checkbox/__tests__/__snapshots__/Checkbox.test.js.snap @@ -163,16 +163,17 @@ samp.c8 { .c4:checked + .c6::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c4:checked + .c6::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -382,16 +383,17 @@ samp.c8 { .c4:checked + .c6::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c4:checked + .c6::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -439,6 +441,266 @@ samp.c8 { </div> `; +exports[`renders correctly for an indeterminate checkbox 1`] = ` +.c1 { + margin: unset; + padding: unset; + border: unset; + background: unset; + font: unset; + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + background-color: unset; + color: inherit; +} + +.c5 { + margin: unset; + padding: unset; + border: unset; + background: unset; + font: unset; + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + background-color: white; + color: inherit; +} + +.c9 { + margin: unset; + padding: unset; + border: unset; + background: unset; + font: unset; + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + background-color: unset; + color: inherit; + margin-left: 0.5rem !important; +} + +.c0 { + box-sizing: border-box; + font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans', 'Droid Sans','Helvetica Neue',sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + margin: 0; + padding: 0; + overflow-x: hidden; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + color: #435a6f; +} + +.c0 *, +.c0 *::before, +.c0 *::after { + box-sizing: inherit; +} + +.c0 *:focus { + outline: 2px solid #7467c0; + outline-offset: 2px; +} + +abbr.c8 { + border-bottom: 1px dotted; + cursor: help; + -webkit-text-decoration: none; + text-decoration: none; +} + +i.c8 { + font-style: italic; +} + +kbd.c8 { + background: #454d5d; + border-radius: 0.1rem; + color: #fff; + padding: 0.1rem 0.2rem; +} + +mark.c8 { + background: #ffe9b3; + border-radius: 0.1rem; + padding: 0.1rem 0.2rem; +} + +strong.c8 { + font-weight: bold; +} + +sub.c8, +sup.c8 { + font-size: 0.8em; + vertical-align: baseline; +} + +ins.c8, +u.c8 { + -webkit-text-decoration-skip: ink edges; + text-decoration-skip: ink edges; +} + +i.c8, +cite.c8, +var.c8, +em.c8 { + font-style: italic; +} + +kbd.c8, +pre.c8, +samp.c8 { + font-family: 'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Courier,monospace; +} + +.c3 { + display: inline-block; +} + +.c7 { + border: 1px solid #bdbdbd; + box-shadow: inset 0px 1px 2px #e5e5e5; + border-radius: 0.2em; + height: 1em; + position: relative; + width: 1em; +} + +.c10[disabled] + .c6 { + background-color: #f2f2f2; + box-shadow: unset; +} + +.c10:checked:focus + .c6 { + border-color: #7467c0; + box-shadow: #7467c0 0px 0px 0px 1px !important; +} + +.c10:focus + .c6 { + border-color: #7467c0; + box-shadow: #7467c0 0px 0px 0px 1px !important; +} + +.c10:not([disabled]):checked + .c6 { + border-color: #7467c0; +} + +.c10:checked + .c6::before { + background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c10:checked + .c6::before { + border: 0.1rem solid #7467c0; + border-left-width: 0; + border-top-width: 0; + height: 10px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + width: 6px; +} + +.c10[disabled]:checked + .c6::before { + border-color: #9a9a9a; +} + +.c4 { + -webkit-clip: rect(0,0,0,0); + clip: rect(0,0,0,0); + height: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + width: 1px; +} + +.c4[disabled] + .c6 { + background-color: #f2f2f2; + box-shadow: unset; +} + +.c4:checked:focus + .c6 { + border-color: #7467c0; + box-shadow: #7467c0 0px 0px 0px 1px !important; +} + +.c4:focus + .c6 { + border-color: #7467c0; + box-shadow: #7467c0 0px 0px 0px 1px !important; +} + +.c4:not([disabled]):checked + .c6 { + border-color: #7467c0; +} + +.c4:checked + .c6::before { + background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c4:checked + .c6::before { + background-color: #7467c0; + height: 2px; + width: 10px; + top: calc(50% - 1px); + left: calc(50% - 5px); +} + +.c4[disabled]:checked + .c6::before { + border-color: #9a9a9a; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +<div + class="c0 c1" +> + <label + aria-describedby="label" + aria-invalid="false" + aria-required="false" + class="c2 c3 c1" + > + <input + checked="" + class="c4 c5" + type="checkbox" + value="" + /> + <div + class="c6 c7 c1" + /> + <span + class="c8 c9" + id="label" + /> + </label> +</div> +`; + exports[`states renders correctly for an checkbox with state danger 1`] = ` .c1 { margin: unset; @@ -597,16 +859,17 @@ samp.c8 { .c10:checked + .c6::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c10:checked + .c6::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -617,6 +880,45 @@ samp.c8 { border-color: #9a9a9a; } +.c11[disabled] + .c6 { + background-color: #f2f2f2; + box-shadow: unset; +} + +.c11:checked:focus + .c6 { + border-color: #7467c0; + box-shadow: #7467c0 0px 0px 0px 1px !important; +} + +.c11:focus + .c6 { + border-color: #7467c0; + box-shadow: #7467c0 0px 0px 0px 1px !important; +} + +.c11:not([disabled]):checked + .c6 { + border-color: #7467c0; +} + +.c11:checked + .c6::before { + background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c11:checked + .c6::before { + background-color: #7467c0; + height: 2px; + width: 10px; + top: calc(50% - 1px); + left: calc(50% - 5px); +} + +.c11[disabled]:checked + .c6::before { + border-color: #9a9a9a; +} + .c4 { -webkit-clip: rect(0,0,0,0); clip: rect(0,0,0,0); @@ -652,16 +954,17 @@ samp.c8 { .c4:checked + .c6::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c4:checked + .c6::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -866,16 +1169,17 @@ samp.c8 { .c10:checked + .c6::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c10:checked + .c6::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -886,6 +1190,45 @@ samp.c8 { border-color: #9a9a9a; } +.c11[disabled] + .c6 { + background-color: #f2f2f2; + box-shadow: unset; +} + +.c11:checked:focus + .c6 { + border-color: #7467c0; + box-shadow: #7467c0 0px 0px 0px 1px !important; +} + +.c11:focus + .c6 { + border-color: #7467c0; + box-shadow: #7467c0 0px 0px 0px 1px !important; +} + +.c11:not([disabled]):checked + .c6 { + border-color: #7467c0; +} + +.c11:checked + .c6::before { + background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c11:checked + .c6::before { + background-color: #7467c0; + height: 2px; + width: 10px; + top: calc(50% - 1px); + left: calc(50% - 5px); +} + +.c11[disabled]:checked + .c6::before { + border-color: #9a9a9a; +} + .c4 { -webkit-clip: rect(0,0,0,0); clip: rect(0,0,0,0); @@ -921,16 +1264,17 @@ samp.c8 { .c4:checked + .c6::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c4:checked + .c6::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -1135,16 +1479,17 @@ samp.c8 { .c10:checked + .c6::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c10:checked + .c6::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -1155,6 +1500,45 @@ samp.c8 { border-color: #9a9a9a; } +.c11[disabled] + .c6 { + background-color: #f2f2f2; + box-shadow: unset; +} + +.c11:checked:focus + .c6 { + border-color: #7467c0; + box-shadow: #7467c0 0px 0px 0px 1px !important; +} + +.c11:focus + .c6 { + border-color: #7467c0; + box-shadow: #7467c0 0px 0px 0px 1px !important; +} + +.c11:not([disabled]):checked + .c6 { + border-color: #7467c0; +} + +.c11:checked + .c6::before { + background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c11:checked + .c6::before { + background-color: #7467c0; + height: 2px; + width: 10px; + top: calc(50% - 1px); + left: calc(50% - 5px); +} + +.c11[disabled]:checked + .c6::before { + border-color: #9a9a9a; +} + .c4 { -webkit-clip: rect(0,0,0,0); clip: rect(0,0,0,0); @@ -1190,16 +1574,17 @@ samp.c8 { .c4:checked + .c6::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c4:checked + .c6::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -1404,16 +1789,17 @@ samp.c8 { .c10:checked + .c6::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c10:checked + .c6::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -1424,6 +1810,45 @@ samp.c8 { border-color: #9a9a9a; } +.c11[disabled] + .c6 { + background-color: #f2f2f2; + box-shadow: unset; +} + +.c11:checked:focus + .c6 { + border-color: #7467c0; + box-shadow: #7467c0 0px 0px 0px 1px !important; +} + +.c11:focus + .c6 { + border-color: #7467c0; + box-shadow: #7467c0 0px 0px 0px 1px !important; +} + +.c11:not([disabled]):checked + .c6 { + border-color: #7467c0; +} + +.c11:checked + .c6::before { + background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c11:checked + .c6::before { + background-color: #7467c0; + height: 2px; + width: 10px; + top: calc(50% - 1px); + left: calc(50% - 5px); +} + +.c11[disabled]:checked + .c6::before { + border-color: #9a9a9a; +} + .c4 { -webkit-clip: rect(0,0,0,0); clip: rect(0,0,0,0); @@ -1459,16 +1884,17 @@ samp.c8 { .c4:checked + .c6::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c4:checked + .c6::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); diff --git a/src/Checkbox/__tests__/__snapshots__/CheckboxField.test.js.snap b/src/Checkbox/__tests__/__snapshots__/CheckboxField.test.js.snap index 4150780da..70523c4cd 100644 --- a/src/Checkbox/__tests__/__snapshots__/CheckboxField.test.js.snap +++ b/src/Checkbox/__tests__/__snapshots__/CheckboxField.test.js.snap @@ -177,16 +177,17 @@ samp.c9 { .c5:checked + .c7::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c5:checked + .c7::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -421,16 +422,17 @@ samp.c9 { .c5:checked + .c7::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c5:checked + .c7::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -687,16 +689,17 @@ samp.c13 { .c9:checked + .c11::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c9:checked + .c11::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -732,16 +735,17 @@ samp.c13 { .c15:checked + .c11::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c15:checked + .c11::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -1018,16 +1022,17 @@ samp.c8 { .c11:checked + .c13::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c11:checked + .c13::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -1063,16 +1068,17 @@ samp.c8 { .c16:checked + .c13::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c16:checked + .c13::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -1358,16 +1364,17 @@ samp.c13 { .c9:checked + .c11::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c9:checked + .c11::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -1403,16 +1410,17 @@ samp.c13 { .c16:checked + .c11::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c16:checked + .c11::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -1699,16 +1707,17 @@ samp.c8 { .c11:checked + .c13::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c11:checked + .c13::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -1744,16 +1753,17 @@ samp.c8 { .c16:checked + .c13::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c16:checked + .c13::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -2015,16 +2025,17 @@ samp.c9 { .c11:checked + .c7::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c11:checked + .c7::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -2070,16 +2081,17 @@ samp.c9 { .c5:checked + .c7::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c5:checked + .c7::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -2309,16 +2321,17 @@ samp.c9 { .c11:checked + .c7::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c11:checked + .c7::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -2364,16 +2377,17 @@ samp.c9 { .c5:checked + .c7::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c5:checked + .c7::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -2603,16 +2617,17 @@ samp.c9 { .c11:checked + .c7::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c11:checked + .c7::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -2658,16 +2673,17 @@ samp.c9 { .c5:checked + .c7::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c5:checked + .c7::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -2897,16 +2913,17 @@ samp.c9 { .c11:checked + .c7::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c11:checked + .c7::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); @@ -2952,16 +2969,17 @@ samp.c9 { .c5:checked + .c7::before { background-clip: padding-box; + content: ''; + left: calc(50% - 3px); + top: calc(50% - 6px); + position: absolute; +} + +.c5:checked + .c7::before { border: 0.1rem solid #7467c0; border-left-width: 0; border-top-width: 0; - content: ''; height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; - position: absolute; - top: 50%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); diff --git a/src/Checkbox/styled.js b/src/Checkbox/styled.js index f16753537..6a2add13b 100644 --- a/src/Checkbox/styled.js +++ b/src/Checkbox/styled.js @@ -32,18 +32,30 @@ export const HiddenCheckbox = HiddenInput({ Icon: CheckboxIcon, checkedIconCss: css` background-clip: padding-box; - border: 0.1rem solid ${palette('primaryLighter')}; - border-left-width: 0; - border-top-width: 0; content: ''; - height: 10px; - left: 50%; - margin-left: -3px; - margin-top: -6px; + left: calc(50% - 3px); + top: calc(50% - 6px); position: absolute; - top: 50%; - transform: rotate(45deg); - width: 6px; + + & { + ${props => + props.indeterminate + ? css` + background-color: #7467c0; + height: 2px; + width: 10px; + top: calc(50% - 1px); + left: calc(50% - 5px); + ` + : css` + border: 0.1rem solid ${palette('primaryLighter')}; + border-left-width: 0; + border-top-width: 0; + height: 10px; + transform: rotate(45deg); + width: 6px; + `}; + } `, disabledCheckedIconCss: css` border-color: ${palette('grayLighter')};