dev/scss/base/form.scss

@use "lengths";
@use "colors";
@use "choose";
@use "icons";
@use "mixins";

/**
 * 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: lengths.$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: colors.$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: lengths.$standard-border-radius;
  }
  
  input,
  textarea {
    border-color:     colors.$ids-grey-2;
    background-color: colors.$nearly-white;
    border-style:     solid;
  }
  
  input,
  textarea,
  select,
  a.form-button {
    border-style: solid;
    display:      inline-block;
    width:        20%;
    min-width:    20em;
    padding:      lengths.$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: colors.$light-orange;
  }
  
  .field-with-error {
    border-color: colors.$ids-pink-1;
  }

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

  span.file-upload {
    @include choose.choose-item;
    box-shadow:   choose.$choose-box-shadow;
    border: choose.$choose-border;
    border-radius:     lengths.$standard-border-radius;
    padding: lengths.$item-padding;
    position: relative;
    overflow: hidden;
    right: 0;
    display: inline-block;

    &:hover {
      @include choose.choose-hover;
      transition: none;
    }
   
    > input[type=file] {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      padding: 3em;
      font-size: 20px;
      cursor: pointer;
      opacity: 0;
      filter: alpha(opacity=0);
      &.field-with-error {
        background-color: colors.$ids-pink-1;
        opacity: .3;
        filter: alpha(opacity=.3);
      }
    }

    &::after {
      @include mixins.icon-font;
      content: icons.$fa-upload;
    }
  }
  
  a.form-button:hover {
    color: inherit !important;
  }
  
  label.field-required::after {
    color:   colors.$ids-blue-1;
    content: '*';
  }

  span.field-required{
    color:   colors.$ids-blue-1;
  }

}

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

button, input[type=submit] {
  cursor: pointer;

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

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

    &::after {
      font-family: "FontAwesome";
    }
    
    &:hover,
    &:focus {
      @include choose.choose-hover;
    }

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

    &:active {
      @include choose.choose-active;
    }

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

button[type=submit] {
  border: lengths.$border-size solid colors.$nearly-white;
}

*[type=submit].form-submit {
  box-shadow:   choose.$choose-box-shadow;
  border-radius:     lengths.$standard-border-radius;
  border-width: 2px !important;
  padding: lengths.$base-padding !important;
}

/**
 * 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 mixins.icon-font; 
	      content: icons.$fa-check;
      }
    }
  }

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