dcf.scss

@charset "utf-8";
/**
 * @file
 * Drupal Custom Form
 *
 * This is part of the dcf library to have custom...
 * - checkboxes
 * - radios
 * - selects
 * - filefields
 *
 * @author: Peter Briers
 * @version: 0.0.2
 */

/**
 * RESET
 */
input,
button,
textarea,
select {
  padding: 0;
  outline: 0;
  outline-offset: 0px;
  border: none;
  &:focus {
    outline: #dcf solid 1px;
  }
}

// Custom form replacement container
.dcf-container {
  position: relative;
  display: inline-block;
}

// Redo Focus
.dcf-input:focus + .dcf-replacement,
.dcf-input:active + .dcf-replacement {
  outline: #dcf solid 1px;
}

// Custom select
.dcf-select,
.dcf-file {
  .dcf-replacement {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: white;
    z-index: 10;
    cursor: pointer;
  }

  .dcf-feedback {
    display: block;
    padding: 0.25ex 1ex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dcf-button {
    float: right;
    text-align: center;
    padding: 0.25ex 1ex;
    position: relative;
  }

  .dcf-input {
    position: relative;
    z-index: 20;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; // IE8
    cursor: pointer;
    &:focus {
      outline: none;
      border: none !important;
    }
  }
}
.dcf-select {
  .dcf-button:before {
    content: '▼';
  }
}



.form-type-radio,
.form-type-checkbox {
  position: relative;
  input {
    left: -2000px;
    position: absolute;
    &:focus + label:before {
      outline: #dcf solid 1px;
    }
  }
  label {
    padding: 0 0 0 25px;
    min-height: 20px;
    &:before {
      text-align: center;
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      background-color: white;
      width: 20px;
      height: 20px;
      line-height: 20px;
    }
  }
}
.form-type-radio label {
  &:before {
    border-radius: 20px;
  }
  &.checked:before {
    content: '●';
  }
}

.form-type-checkbox label {
  &:before {
    border-radius: 3px;
  }
  &.checked:before {
    content: '✔';
    font-size: 22px;
    text-indent: 5px;
  }
}