New: Project Aphrodite

frontend/src/Components/Form/CheckInput.css

@@ -0,0 +1,105 @@
+.container {
+  position: relative;
+  display: flex;
+  flex: 1 1 65%;
+  user-select: none;
+}
+
+.label {
+  display: flex;
+  margin-bottom: 0;
+  min-height: 21px;
+  font-weight: normal;
+  cursor: pointer;
+}
+
+.checkbox {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  pointer-events: none;
+
+  &:global(.isDisabled) {
+    cursor: not-allowed;
+  }
+}
+
+.input {
+  flex: 1 0 auto;
+  margin-top: 7px;
+  margin-right: 5px;
+  width: 20px;
+  height: 20px;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  background-color: $white;
+  color: $white;
+  text-align: center;
+  line-height: 20px;
+}
+
+.checkbox:focus + .input {
+  outline: 0;
+  border-color: $inputFocusBorderColor;
+  box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
+}
+
+.dangerIsChecked {
+  border-color: $dangerColor;
+  background-color: $dangerColor;
+
+  &.isDisabled {
+    opacity: 0.7;
+  }
+}
+
+.primaryIsChecked {
+  border-color: $primaryColor;
+  background-color: $primaryColor;
+
+  &.isDisabled {
+    opacity: 0.7;
+  }
+}
+
+.successIsChecked {
+  border-color: $successColor;
+  background-color: $successColor;
+
+  &.isDisabled {
+    opacity: 0.7;
+  }
+}
+
+.warningIsChecked {
+  border-color: $warningColor;
+  background-color: $warningColor;
+
+  &.isDisabled {
+    opacity: 0.7;
+  }
+}
+
+.isNotChecked {
+  &.isDisabled {
+    border-color: $disabledCheckInputColor;
+    background-color: $disabledCheckInputColor;
+    opacity: 0.7;
+  }
+}
+
+.isIndeterminate {
+  border-color: $gray;
+  background-color: $gray;
+}
+
+.helpText {
+  composes: helpText from 'Components/Form/FormInputHelpText.css';
+
+  margin-top: 8px;
+  margin-left: 5px;
+}
+
+.isDisabled {
+  cursor: not-allowed;
+}