skill-assessment-app/app/assets/stylesheets/molecules/_forms.scss

// TODO: Align colors with variables.scss
fieldset {
  background-color: transparent;
  // border: 1px solid $input-border;
  border: none;
  padding: 0;
  margin: 0;
}

legend {
  font-weight: 300;
  margin-bottom: $small-spacing / 2;
  padding: 0;
}

label {
  display: block;
  font-weight: 300;
}

#{$all-text-inputs} {
  display: block;
  font-size: $base-font-size;
  border-left:0;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid $secondary-color;
  box-shadow: none;
  border-radius: $base-border-radius;
  box-sizing: border-box;
  margin-bottom: 1.4em;
  padding: $base-spacing / 3;
  width: 100%;
  font-weight: 300;
  font-family: $primary-font-face;
  line-height: 1.5em;

  &:hover {
    border-color: shade($base-border-color, 20%);
  }

  &:focus {
    outline: none;
    box-shadow: none;
  }

  &:disabled {
    background-color: shade($base-background-color, 5%);
    cursor: default;

    &:hover {
      border: $base-border;
    }
  }
}
button:disabled,
input[type='submit']:disabled {
  opacity: .3;
  cursor: default;
}

textarea {
  resize: vertical;
  background: transparent;
  padding: 0 0 3rem;
}

[type="search"] {
  appearance: none;
}

%multiple-choice {
  display: inline;
  margin-right: $small-spacing / 2;
  &:not(:checked),
  &:checked {
    position: absolute;
    left: -9999px;
    + label {
      position: relative;
      padding-left: 25px;
      cursor: pointer;
      &:after {
        position: absolute;
        line-height: 0.8;
        color: $primary-color;
        transition: all .2s;
      }
    }
    &:disabled {
      + label {
        &:before {
          box-shadow: none;
          border-color: #bbb;
          background-color: #ddd;
        }
      }
    }
  }
  &:not(:checked) {
    + label {
      &:after {
        opacity: 0;
        transform: scale(0);
      }
    }
  }
  &:checked {
    + label {
      &:before {
        border: 1px solid $gray;
        background: transparent;
      }
      &:after {
        opacity: 1;
        transform: scale(1);
      }
    }
    &:disabled {
      + label {
        &:after {
          color: #999;
        }
      }
    }
  }
  &:hover:not(:disabled) {
    + label {
      &:before {
        border: 2px solid $primary-color;
      }
    }
  }
  &:disabled {
    + label {
      color: #aaa;
    }
  }
  + label {
    &:before {
      content: '';
      position: absolute;
      left:0; top: 2px;
      width: 20px; height: 20px;
      box-shadow: 0;
      border: 1px solid $primary-color;
      background: transparent;
      box-sizing: border-box;
    }
  }
}

[type="radio"] {
  @extend %multiple-choice;
  &:not(:checked),
  &:checked {
    + label {
      &:after {
        content: '\2022';
        font-size: 28px;
        top: 1px;
        left: 2px;
      }
    }
  }
  + label {
    &:before {
      border-radius: 50%;
    }
  }
  &:not(:disabled) + label:before {
    background-color: white;
  }
}

[type="checkbox"] {
  @extend %multiple-choice;
  &:not(:checked),
  &:checked {
    + label {
      &:after {
        font-family: 'Zapf Dingbats', 'Menlo';
        content: '\2714';
        font-size: 13px;
        top: 7px;
        left: 5px;
      }
    }
  }
  &:not(:disabled) + label:before {
    background-color: white;
  }
}

[type="file"] {
  margin-bottom: $small-spacing;
  width: 100%;
}

select {
  margin-bottom: 0.75em;
  max-width: 100%;
  width: auto; // needed?
  background-color: $white;
  border: 1px solid #aaa;
  border-radius: 0px;
  font-weight: 300;
  font-family: $primary-font-face;
  font-size: 1rem;
  &::-ms-expand {
    display: none;
  }
  &:not([multiple]) {
    background-image: asset_data_url("icon-dropdownlist.png");
    background-repeat: no-repeat;
    background-position: right 10px bottom 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 10px 40px 10px 10px;
  }
  option {
    font-weight: 300;
    font-family: $primary-font-face;
    font-size: 1rem;
  }
}

.form-group {
  position: relative;
  margin-bottom: 1.2rem;

  label {
    transition: 0.2s ease;
    + #{$all-text-inputs} {
      background: transparent;
    }
    &.loaded {
      left: 0;
      top: 5px;
      font-size: 1em;
      position: absolute;
      pointer-events: none;
    }
    &.animate {
      font-size: 0.8em;
      top: -10px;
    }
  }
}
.form-group-multiples { // radios, checks wrappers
  margin-bottom: .5rem;
}

.button-group {
  margin-top: 2rem;
}

.skills-app-form {
  margin-top: 2rem;
}

html.no-js {
  .chars {
    display: none;
  }
}