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 {