dev/scss/base/form.scss

@import "lengths";
@import "colors";

/**
 * Definition of form elements for Kalamar.
 */

.form-table {
  display: block;
  padding: 0;
  font-size: 80%;

  > fieldset {
    margin-top: 0;
  }
  
  fieldset {
    border-width: 0;
    padding: 0;
    margin-top: 1em;
    > div {
      white-space: nowrap;
    }
  }

  legend {
    background-color: transparent;
    margin-left: 0;
    font-weight: bold;
    border-radius: $standard-border-radius;
  }

  label,
  input[type=radio] {
    // font-size: 80%;
  }
  
  label[for] {
    display: block;
    text-align: left;
  }
  
  label[for],
  input[type=submit],
  a.form-button {
    margin-top: 2em;
  }

  fieldset.form-line {
    legend {
      // float: left;
      font-size: 100%;
      display: inline-block;
    }
    legend::after {
      content: ':';
      color: $ids-green-2;
    }
    input, label[for] {
      display: inline-block;
      margin: 0;
    }
    input {
      vertical-align: bottom;
    }
    label[for] {
      margin-right: 2em;
    }
  }

  input,
  textarea,
  button,
  a.form-button {
    border-radius: $standard-border-radius;
  }
  
  input,
  textarea {
    border-color:     $ids-grey-2;
    background-color: $nearly-white;
    border-style:     solid;
  }
  
  input,
  textarea,
  select,
  a.form-button {
    border-style: solid;
    display:      inline-block;
    width:        20%;
    min-width:    20em;
    padding:      $base-padding;
  }

  input[type=radio] {
    display:          inline;
    text-align:       right;
    background-color: red;
    width:            auto;
    min-width:        auto;
  }
  
  input[readonly=readonly],
  textarea[readonly] {
    background-color: $light-orange;
  }
  
  .field-with-error {
    border-color: $ids-pink-1;
  }

  input[type=submit],
  button,
  a.form-button {
    display:          inline-block;
    cursor:           pointer;
    border-width:     thin;
    text-align:       center;
    background-color: $middle-green;
    border-color:     $dark-green;
    // font-size:        8pt;
    color:            $dark-green;
  }

  a.form-button:hover {
    color: inherit !important;
  }
  
  label.field-required::after {
    color:   $ids-blue-1;
    content: '*';
  }
}

.button-abort {
  background-color: $middle-orange !important;
  color:            $darkest-orange !important;
  border-color:     $darkest-orange !important;
}

button {
  cursor: pointer;

  + button {
    right: 0;
  }
  
  &[type=submit] {
    @include choose-item;
    font-weight: normal;
    padding:     0;
    height:      100%;
    top:         0;
    width:       $button-width;

    > span:nth-of-type(1) {
      @include blind;
    }

    &::after {
      font-family: "FontAwesome";
    }
    
    border: $border-size solid $nearly-white;

    &:hover,
    &:focus {
      @include choose-hover;
    }

    &::-moz-focus-inner {
      border: none;
    }

    &:active {
      @include choose-active;
    }

    /*
     * This is just for styling the last button,
     * in case there are more than one buttons.
     */
    &:last-of-type {
      border: {
        right-width:         $border-size;
        right-style:         solid;
        top-right-radius:    $standard-border-radius;
        bottom-right-radius: $standard-border-radius;
      }
    }
  }
}

/**
 * Checkbox styling
 * http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css
 */
.checkbox {
  display: none;

  + label {
    cursor: pointer;

    span {
      display:        inline-block;
      border-radius:  4px;
      width:          1em;
      height:         1em;
      line-height:    1em;
      vertical-align: middle;
      padding:        0;
      margin-right:   .2em;

      &::after {
	      @include icon-font; 
	      content: $fa-check;
      }
    }
  }

  &:checked + label span::after {
    content: $fa-checked;
  }
}