org.eclipse.osbp.themes/valo/components/_formlayout.scss

/**
 * Outputs the selectors and properties for the FormLayout component.
 *
 * @param {string} $primary-stylename (v-formlayout) - the primary style name for the selectors
 * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
 *
 * @group formlayout
 */
@mixin valo-formlayout ($primary-stylename: v-formlayout, $include-additional-styles: contains($v-included-additional-styles, formlayout)) {

  @include valo-formlayout-spacing;
  @include valo-formlayout-margin;

  .#{$primary-stylename} > table {
    border-spacing: 0;
    position: relative;
  }

  .#{$primary-stylename}.v-has-width > table,
  .#{$primary-stylename}.v-has-width .#{$primary-stylename}-contentcell {
    width: 100%;
  }

  .#{$primary-stylename}-error-indicator {
    width: round($v-unit-size/2);
  }

  .#{$primary-stylename}-captioncell {
    vertical-align: top;
    line-height: $v-unit-size - 1px;

    .v-caption {
      padding-bottom: 0;
    }

    .v-caption-h2,
    .v-caption-h3,
    .v-caption-h4 {
      height: 3em;
    }
  }

  .#{$primary-stylename}-contentcell {
    .v-checkbox,
    .v-radiobutton {
      font-weight: $v-font-weight + 100;
    }

    > .v-label-h2,
    > .v-label-h3,
    > .v-label-h4 {
      position: absolute;
      left: 0;
      right: 0;
      width: auto !important;
      margin-top: -0.5em;
      padding-bottom: 0.5em;
      border-bottom: valo-border($color: $v-app-background-color, $strength: 0.5);
    }
  }


  @if $include-additional-styles {
    .#{$primary-stylename}.light {
      @include valo-formlayout-light-style;
    }
  }

}


/**
 * Outputs the styles for form layout margin.
 *
 * @param {list} $margin ($v-layout-margin-top $v-layout-margin-right $v-layout-margin-bottom $v-layout-margin-left) - The margin for the form layout (any valid CSS margin value)
 *
 * @group formlayout
 */
@mixin valo-formlayout-margin ($margin: $v-layout-margin-top $v-layout-margin-right $v-layout-margin-bottom $v-layout-margin-left) {
  $top: 0;
  $right: 0;
  $bottom: 0;
  $left: 0;

  @if length($margin) == 1 {
    $top: $margin;
    $right: $margin;
    $bottom: $margin;
    $left: $margin;
  } @else if length($margin) == 2 {
    $top: nth($margin, 1);
    $right: nth($margin, 2);
    $bottom: nth($margin, 1);
    $left: nth($margin, 2);
  } @else if length($margin) == 3 {
    $top: nth($margin, 1);
    $right: nth($margin, 2);
    $bottom: nth($margin, 3);
    $left: nth($margin, 2);
  } @else if length($margin) == 4 {
    $top: nth($margin, 1);
    $right: nth($margin, 2);
    $bottom: nth($margin, 3);
    $left: nth($margin, 4);
  }

  [class*="margin-top"] > tbody > [class*="firstrow"] > td {
    padding-top: $top;
  }

  [class*="margin-bottom"] > tbody > [class*="lastrow"] > td {
    padding-bottom: $bottom;
  }

  [class*="margin-left"] > tbody > [class*="row"] > [class*="captioncell"] {
    padding-left: $left;
  }

  [class*="margin-left"] > tbody > [class*="row"] > [class*="contentcell"] {
    > .v-label-h2,
    > .v-label-h3,
    > .v-label-h4 {
      left: $left;
    }
  }

  [class*="margin-right"] > tbody > [class*="row"] > [class*="contentcell"] {
    padding-right: $right;

    > .v-label-h2,
    > .v-label-h3,
    > .v-label-h4 {
      right: $right;
    }
  }
}


/**
 * Outputs the styles for form layout spacing.
 *
 * @param {size} $vertical ($v-layout-spacing-vertical) - The vertical spacing between the rows in the form layout
 *
 * @group formlayout
 */
@mixin valo-formlayout-spacing ($vertical: $v-layout-spacing-vertical) {
  [class*="spacing"] > tbody > [class*="row"] > td {
    padding-top: $vertical;
  }

  [class*="spacing"] > tbody > [class*="firstrow"] > td {
    padding-top: 0;
  }
}


/**
 * Outputs the styles for a light style form layout. This mixin expects the target to have the normal styles of a form layout applied.
 *
 * @param {size} $row-height ($v-unit-size) - The height of an individual form layout row
 *
 * @group formlayout
 */
@mixin valo-formlayout-light-style ($row-height: $v-unit-size) {
  > table {
    padding: 0;
  }

  > table > tbody > tr > td {
    padding-top: 0;
    height: $row-height; // Effectively min-height
    border-bottom: valo-border($color: $v-app-background-color, $strength: 0.3);
  }

  > table > tbody > [class*="lastrow"] > td {
    border-bottom: none;
  }

  > table > tbody > tr > [class*="captioncell"] {
    color: valo-font-color($v-background-color, .5);
    text-align: right;
    padding-left: ceil($v-unit-size/3);
    line-height: $row-height;
  }

  > table > tbody > [class*="row"] > [class*="contentcell"] {
    padding-right: 0;

    > .v-textfield,
    > .v-textarea,
    > .v-filterselect,
    > .v-datefield,
    > .v-filterselect-input,
    > .v-datefield-textfield {
      width: 100%;
    }

    > .v-textfield,
    > .v-textarea,
    > .v-filterselect input,
    > .v-datefield input,
    > .v-richtextarea {
      @include valo-textfield-style($unit-size: $row-height, $border-radius: 0, $border: null, $bevel: none, $shadow: none, $background-color: null);
      background: transparent;
      border: none;
      color: inherit;

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

    > .v-textfield-prompt,
    > .v-textarea-prompt,
    > .v-filterselect-prompt input,
    > .v-datefield-prompt input {
      @include valo-textfield-prompt-style;
    }

    > .v-textarea,
    > .v-richtextarea {
      height: auto;
    }

    > .v-label-h2,
    > .v-label-h3,
    > .v-label-h4 {
      border-bottom: none;
      left: 0;
      right: 0;
    }

    > .v-label-h3,
    > .v-label-h4 {
      margin-top: 0;
    }
  }

  .v-richtextarea {
    margin: round($v-unit-size/8) 0;
  }

  .v-filterselect-button,
  .v-datefield-button {
    border: none;

    &:active:after {
      display: none;
    }
  }

  .v-datefield-button {
    right: 0;
    left: auto;
  }

  .v-checkbox {
    margin-left: ceil($v-unit-size/6);
  }
}