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

Styles for Cumulocity IoT applications

c8y-schema-form.widget {
  padding-top: @margin-16;

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

      .form-control[disabled],
      .form-control[readonly],
      fieldset[disabled] .form-control {
        color: @text-color;
      }
    }
  }
  bootstrap-decorator + ng-form {
    display: block;
    margin-bottom: 0; //.list-group-item();
    > .form-group {
      margin-bottom: 0;
      padding: 3px @margin-16 20px;
      .form-control[disabled],
      .form-control[readonly],
      fieldset[disabled] .form-control {
        color: @text-color;
      }
    }
  }
  bootstrap-decorator {
    .legend {
      margin-top: 20px;
      margin-bottom: 8px;
    }
  }
  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 @margin-16;
      label {
        flex: 1 0 30%;
        margin: 0 @margin-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: 20px;
            cursor: not-allowed;
            pointer-events: none;
          }
        }
      }
    }
    .schema-form-checkbox {
      padding: 0 0 16px 16px !important;
    }
    .schema-form-textarea {
      padding: 16px;
    }
    .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 16px 16px !important;
    }
  }
}

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

  .c8y-checkbox.no-label {
    span + span {
      display: none;
    }
  }
}

.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: @margin-base;
}