@c8y/style/styles/components/forms/_c8y-schema-form.less

Styles for Cumulocity IoT applications

/**
 * c8y schema form - Component styles
 *
 * Note: Uses @size-* tokens for spacing where applicable.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions: Fixed sizes for component layout
 * - Off-grid spacing: Component-specific positioning
 * - Border widths (1px, 2px, 3px): Standard borders
 * - Font-sizes: Typography
 * - Percentages: Layout
 */
c8y-schema-form.widget {
  padding-top: @size-16;

  // Inline list-group base styles (mixin doesn't exist)
  position: relative;
  margin-bottom: @size-16;
  padding-left: 0;
  box-shadow: inset 0 1px 0 @component-border-color;

  bootstrap-decorator,
  sf-decorator {
    display: block;
    margin-bottom: 0;
    .form-group,
    .legend,
    .help-block {
      padding-right: @size-16;
      padding-left: @size-16;
    }
    .form-group {
      margin-bottom: -1px;
      padding: 3px @size-16 @size-20;

      .form-control[disabled],
      .form-control[readonly],
      fieldset[disabled] .form-control {
        color: @text-color;
      }
    }
  }
  bootstrap-decorator + ng-form {
    // Inline list-group-item base styles (mixin doesn't exist)
    position: relative;
    display: block;
    margin-bottom: 0;
    padding: @size-base @component-padding;
    min-height: calc(@size-base * 5);
    width: 100%;
    border: 0;
    box-shadow: inset 0 -1px 0 @component-border-color;

    > .form-group {
      margin-bottom: 0;
      padding: 3px @size-16 @size-20;
      .form-control[disabled],
      .form-control[readonly],
      fieldset[disabled] .form-control {
        color: @text-color;
      }
    }
  }
  bootstrap-decorator {
    .legend {
      margin-top: @size-20;
      margin-bottom: @size-8;
    }
  }
  sf-decorator {
    .legend {
      margin-top: 0;
      margin-bottom: 7px;
      padding-top: 8px;
      background-color: @component-background-default;
      color: @form-label-color;
      &.form-block {
        &::after {
          display: none;
        }
      }
    }
  }

  &.form-read-only {
    sf-decorator,
    bootstrap-decorator {
      min-height: 0;
      height: auto;
    }
    .form-group {
      display: flex;
      align-items: center;
      flex-flow: row wrap;
      padding: 3px @size-16;
      label {
        flex: 1 0 30%;
        margin: 0 @size-8 0 0;
        line-height: 1.3;
        align-self: flex-start;
      }
      label + div,
      .form-control,
      .text-pre-wrap {
        flex: 1 1 60%;
        padding: 0 !important;
        height: auto;
        background-color: transparent;
        text-overflow: ellipsis;
        .dashboard & {
          color: inherit;
        }
      }
      .help-block {
        margin: 0;
        width: 100%;
      }

      &.datepicker {
        padding: 0;
        .form-control {
          cursor: not-allowed;
          pointer-events: none;
        }
        [uib-datepicker-popup-wrap] {
          display: none;
        }
      }
      &.timepicker {
        padding: 0;
        .form-group.uib-time {
          padding: 0;
          .form-control {
            width: @size-20;
            cursor: not-allowed;
            pointer-events: none;
          }
        }
      }
    }
    .schema-form-checkbox {
      padding: 0 0 @size-16 16px !important;
    }
    .schema-form-textarea {
      padding: @size-16;
    }
    .c8y-schema-form-empty {
      display: none;
    }
  }
  bootstrap-decorator > fieldset > sf-decorator:last-child {
    padding-bottom: 0;
    border-bottom: 0;
    & .schema-form-checkbox {
      padding: 0 0 @size-16 16px !important;
    }
  }
}

c8y-schema-form.generic-ui {
  .form-group {
    margin-bottom: 0;
    .help-block {
      margin: 0;
    }
  }
  .c8y-checkbox {
    display: flex;
    input + span {
      margin-right: @size-base;
    }
  }

  // Removed unused label utility - verified 0 usages: .no-label
}

.schema-form-grid {
  display: grid;
  margin: 0 -1rem;
  > div,
  > div > ng-form {
    display: contents;
  }
  bootstrap-decorator {
    padding: 0 1rem;
  }

  bootstrap-decorator:first-child:last-child {
    display: contents;
    padding: 0;
    > fieldset {
      display: contents;
    }
    sf-decorator {
      padding: 0 1rem;
    }
  }
}

.schema-form-checkbox {
  padding-bottom: @size-base;
}