diff --git a/frontend/components/forms/InviteUserForm/_styles.scss b/frontend/components/forms/InviteUserForm/_styles.scss index 58d941b631..ab8b5040f3 100644 --- a/frontend/components/forms/InviteUserForm/_styles.scss +++ b/frontend/components/forms/InviteUserForm/_styles.scss @@ -11,7 +11,6 @@ font-size: $small; font-weight: $regular; color: $core-fleet-black; - padding-left: $pad-xlarge; } } } diff --git a/frontend/components/forms/fields/Checkbox/Checkbox.jsx b/frontend/components/forms/fields/Checkbox/Checkbox.jsx index 6729e668b3..70f1332152 100644 --- a/frontend/components/forms/fields/Checkbox/Checkbox.jsx +++ b/frontend/components/forms/fields/Checkbox/Checkbox.jsx @@ -16,6 +16,7 @@ class Checkbox extends Component { onChange: PropTypes.func, value: PropTypes.bool, wrapperClassName: PropTypes.string, + indeterminate: PropTypes.bool, }; static defaultProps = { @@ -38,13 +39,14 @@ class Checkbox extends Component { name, value, wrapperClassName, + indeterminate, } = this.props; const checkBoxClass = classnames(baseClass, className); - const formFieldProps = pick(this.props, ["hint", "label", "error", "name"]); const checkBoxTickClass = classnames(`${checkBoxClass}__tick`, { [`${checkBoxClass}__tick--disabled`]: disabled, + [`${checkBoxClass}__tick--indeterminate`]: indeterminate, }); return ( @@ -62,6 +64,9 @@ class Checkbox extends Component { name={name} onChange={handleChange} type="checkbox" + ref={(element) => { + element && (element.indeterminate = indeterminate); + }} /> {children} diff --git a/frontend/components/forms/fields/Checkbox/_styles.scss b/frontend/components/forms/fields/Checkbox/_styles.scss index bc47d74a2a..a860f53120 100644 --- a/frontend/components/forms/fields/Checkbox/_styles.scss +++ b/frontend/components/forms/fields/Checkbox/_styles.scss @@ -4,10 +4,13 @@ display: inline-block; &__input { - visibility: hidden; - margin: 0; - position: absolute; - z-index: -1; + opacity: 0; + + &:focus + .kolide-checkbox__tick { + &::after { + border-color: $core-vibrant-blue; + } + } &:checked + .kolide-checkbox__tick { &::after { @@ -54,6 +57,25 @@ background-color: $ui-fleet-black-25; } } + + &--indeterminate { + &::after { + background-color: $core-vibrant-blue; + border: solid 1px $core-vibrant-blue; + } + + &::before { + @include position(absolute, 50% null null 50%); + box-sizing: border-box; + display: block; + width: 10px; + margin: -1px 0 0 -5px; + border: 2px solid $core-white; + border-top: 0; + border-left: 0; + content: ""; + } + } } &__label {