censa_front_end_library/css/src/components/checkbox.css

React components library project for censa Design System

.Checkbox {
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  line-height: initial;
  box-sizing: border-box;
  padding-top: var(--spacing-s);
  padding-bottom: var(--spacing-s);
}

.Checkbox-input {
  position: absolute;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  margin: 0;
}

.Checkbox-labelWrapper {
  padding-left: var(--spacing);
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--night-light);
}

.Checkbox-label {
  display: flex;
  cursor: pointer;
}

.Checkbox-label--tiny {
  font-weight: var(--font-weight-bold);
}

.Checkbox-outerWrapper {
  position: relative;
  margin-top: var(--spacing-s);
}

.Checkbox-outerWrapper--regular {
  height: var(--spacing-2);
  min-width: var(--spacing-2);
}
.Checkbox-outerWrapper--regular span:hover {
  border: 1px solid #a04efc;
}
.Checkbox:hover .Checkbox-input {
  border: 1px solid #a04efc;
}

.Checkbox-outerWrapper--tiny {
  height: var(--spacing-l);
  min-width: var(--spacing-l);
}

/* Type: Unchecked  */

.Checkbox-wrapper {
  top: 0;
  left: 0;
  border-radius: var(--spacing-s);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  justify-content: center;
  transition: var(--duration--fast-01) var(--standard-productive-curve);
}

.Checkbox-input:focus {
  outline: 0;
}

.Checkbox-input ~ .Checkbox-wrapper--default {
  /* border: var(--spacing-xs) solid var(--secondary-dark); */
  background-color: var(--shadow-0);
  border: 1px solid #cbcacb;
}

.Checkbox-input:focus ~ .Checkbox-wrapper--default {
  box-shadow: var(--shadow-spread) var(--secondary-shadow);
}

.Checkbox-input:hover ~ .Checkbox-wrapper--default {
  border: 1px solid #a04efc;
}

.Checkbox-input:active ~ .Checkbox-wrapper--default {
  border: var(--spacing-xs) solid var(--inverse-lightest);
  background-color: #8025e3;
}

.Checkbox--disabled {
  pointer-events: none;
}

.Checkbox--disabled .Checkbox-wrapper--default {
  background-color: #e7d0ff;
  border: 1px solid #e7d0ff;
}

/* Type: checked && Type: indeterminate  */

.Checkbox-input--checked ~ .Checkbox-wrapper,
.Checkbox-input--indeterminate ~ .Checkbox-wrapper {
  background-color: #8025e3;
  border: 0;
}

.Checkbox-input--checked:focus ~ .Checkbox-wrapper,
.Checkbox-input--indeterminate:focus ~ .Checkbox-wrapper {
  box-shadow: var(--shadow-spread) var(--primary-shadow);
  background-color: #8025e3;
  border: 0;
}

.Checkbox-input--checked:hover ~ .Checkbox-wrapper,
.Checkbox-input--indeterminate:hover ~ .Checkbox-wrapper {
  background-color: #a04efc;
  border: 0;
}

.Checkbox-input--checked:active ~ .Checkbox-wrapper,
.Checkbox-input--indeterminate:active ~ .Checkbox-wrapper {
  background-color: #8025e3;
  border: 0;
}

.Checkbox--disabled .Checkbox-input--checked ~ .Checkbox-wrapper,
.Checkbox--disabled .Checkbox-input--indeterminate ~ .Checkbox-wrapper {
  background-color: #e7d0ff;
  border: 1px solid #e7d0ff !important;
  border: 0;
}

/* Error State -> Default */

.Checkbox-wrapper--error {
  border: var(--spacing-xs) solid var(--alert);
}

.Checkbox-input:focus ~ .Checkbox-wrapper--error {
  box-shadow: var(--shadow-spread) var(--alert-shadow);
}

.Checkbox-input:hover ~ .Checkbox-wrapper--error {
  border: var(--spacing-xs) solid var(--alert-dark);
}

.Checkbox-input:active ~ .Checkbox-wrapper--error {
  border: var(--spacing-xs) solid var(--alert-darker);
  background-color: #8025e3;
}

.Checkbox--disabled .Checkbox-wrapper--error {
  border: var(--spacing-xs) solid var(--alert-lighter);
  background-color: #e7d0ff;
}

/* Error State -> Checked & Indeterminate */

.Checkbox-input--checked ~ .Checkbox-wrapper--error,
.Checkbox-input--indeterminate ~ .Checkbox-wrapper--error {
  border: var(--spacing-xs) solid var(--alert);
}

.Checkbox-input--checked:focus ~ .Checkbox-wrapper--error,
.Checkbox-input--indeterminate:focus ~ .Checkbox-wrapper--error {
  border: var(--spacing-xs) solid var(--alert);
  box-shadow: var(--shadow-spread) var(--primary-shadow);
}

.Checkbox-input--checked:hover ~ .Checkbox-wrapper--error,
.Checkbox-input--indeterminate:hover ~ .Checkbox-wrapper--error {
  border: var(--spacing-xs) solid var(--alert-dark);
}

.Checkbox-input--checked:active ~ .Checkbox-wrapper--error,
.Checkbox-input--indeterminate:active ~ .Checkbox-wrapper--error {
  background-color: var(--primary-darker);
  border: var(--spacing-xs) solid var(--alert-darker);
}

.Checkbox--disabled .Checkbox-input--checked ~ .Checkbox-wrapper--error,
.Checkbox--disabled .Checkbox-input--indeterminate ~ .Checkbox-wrapper--error {
  border: var(--spacing-xs) solid var(--alert-lighter);
}