Fix checkbox styles on master branch (#942)

- Update `Checkbox.jsx` and checkbox styles to align with changes on the `teams` branch 
- Edit checkbox styles in the `InviteUserForm` component

frontend/components/forms/InviteUserForm/_styles.scss

@@ -11,7 +11,6 @@
         font-size: $small;
         font-weight: $regular;
         color: $core-fleet-black;
-        padding-left: $pad-xlarge;
       }
     }
   }

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);
+            }}
           />
           <span className={checkBoxTickClass} />
           <span className={`${checkBoxClass}__label`}>{children}</span>

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 {