_custom-forms.scss

// scss-lint:disable PropertyCount

// Embedded icons from Open Iconic.
// Released under MIT and copyright 2014 Waybury.
// https://useiconic.com/open


// Checkboxes and radios
//
// Base class takes care of all the key behavioral aspects.

.custom-control {
  position: relative;
  display: inline-flex;
  min-height: (1rem * $line-height-base);
  padding-left: $custom-control-gutter;
  margin-right: $custom-control-spacer-x;
  cursor: pointer;
}

.custom-control-input {
  position: absolute;
  z-index: -1; // Put the input behind the label so it doesn't overlay text
  opacity: 0;

  &:checked ~ .custom-control-indicator {
    color: $custom-control-checked-indicator-color;
    background-color: $custom-control-checked-indicator-bg;
    @include box-shadow($custom-control-checked-indicator-box-shadow);
  }

  &:focus ~ .custom-control-indicator {
    // the mixin is not used here to make sure there is feedback
    box-shadow: $custom-control-focus-indicator-box-shadow;
  }

  &:active ~ .custom-control-indicator {
    color: $custom-control-active-indicator-color;
    background-color: $custom-control-active-indicator-bg;
    @include box-shadow($custom-control-active-indicator-box-shadow);
  }

  &:disabled {
    ~ .custom-control-indicator {
      cursor: $custom-control-disabled-cursor;
      background-color: $custom-control-disabled-indicator-bg;
    }

    ~ .custom-control-description {
      color: $custom-control-disabled-description-color;
      cursor: $custom-control-disabled-cursor;
    }
  }
}

// Custom indicator
//
// Generates a shadow element to create our makeshift checkbox/radio background.

.custom-control-indicator {
  position: absolute;
  top: (($line-height-base - $custom-control-indicator-size) / 2);
  left: 0;
  display: block;
  width: $custom-control-indicator-size;
  height: $custom-control-indicator-size;
  pointer-events: none;
  user-select: none;
  background-color: $custom-control-indicator-bg;
  background-repeat: no-repeat;