silverstripe-userforms/client/src/styles/userforms-cms.scss

.uf-field-editor {
  padding-bottom: 0;

  // Row styles
  .grid-field__table {
    // Standard rows
    .ss-gridfield-item {
      height: 46px;

      &,
      &:hover {
        background: $white;
      }

      td {
        border-right-width: 0;
        vertical-align: middle;
        padding-top: 6px;
        padding-bottom: 6px;

        &:last-child {
          border-right-width: 1px;
        }
      }

      .handle {
        min-height: 46px;
      }

      &.flash-background {
        animation: flash-background 2s linear;
      }

      &.ui-sortable-placeholder {
        height: 50px;
      }

      .form-group {
        padding: 0;
        margin-bottom: 2px;
        color: $gray-700;

        &:after {
          border-bottom: 0;
        }

        .form__field-label {
          flex: auto;
          max-width: 100%;
          padding-bottom: 0;
        }
      }
    }

    .ss-gridfield-item.infieldgroup {
      &,
      &:hover {
        background: $white;
      }

      .col-reorder,
      .handle {
        background: $gray-200;
      }
    }

    .ss-gridfield-item[data-class="SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFormStep"] {
      &,
      &:hover {
        background: $gray-600;
        color: $white;
      }

      label {
        font-weight: bold;
        color: $white;
        font-size: 15px;
        padding-bottom: 0;
      }

      + .ss-gridfield-item[data-class="SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup"] td {
        border-top: 3px solid $gray-200;
      }

      .grid-field__icon-action {
        &:before {
          color: $white;
        }

        &:hover {
          &:before {
            color: $gray-600;
          }
        }
      }
    }

    .ss-gridfield-item[data-class="SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroup"] {
      td {
        border-top: 3px solid $gray-200;
      }

      .form__field-label {
        font-weight: bold;
        padding-bottom: 0;
        color: $gray-700;
      }
    }

    .ss-gridfield-item[data-class="SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd"] {
      td {
        border-bottom: 3px solid $gray-200;
      }

      + .ss-gridfield-item[data-class="SilverStripe\\UserForms\\Model\\EditableFormField\\EditableFieldGroupEnd"] {
        border-top: 0;
      }

      .col-buttons .action {
        display: none;
      }
    }
  }

  .sticky-buttons {
    position: fixed;
    top: 73px;
    z-index: 1;
    background: $body-bg;
    border-bottom: 1px solid $border-color-light;
    padding: 12px;
    margin-left: -12px;

    & button.action {
      margin-bottom: 0;
    }

    ~ .ss-gridfield-table {
      margin-top: 73px;
    }
  }
}

.cms .grid-field__table .grid-field__uf-filter-header {
  padding: 0;

  .form__fieldgroup-label {
    color: $white;
  }

  .ss-gridfield-button-filter:not(.trigger) {
    background-color: $brand-success;
  }

  .ss-gridfield-button-filter:not(.trigger):hover {
    background-color: $brand-success;
  }

  table {
    width: 100%;
  }
}

// The preview's Z-index needs to be higher than the .sticky-buttons one, so the form's toolbar won't extend into the
// preview area
.cms-preview {
  z-index: 2;
}

// Custom styles for userforms fields in the CMS
.userform-field {
  &__allowed-length {
    .form__fieldgroup-item {
      // Removing default margin-top from field group, this one already has one in its parent container
      margin-top: 0;
    }

    .field.text {
      min-width: auto;
    }

    input.text {
      width: 4rem;
    }
  }

  &__allowed-length-separator {
    display: inline-block;
    margin: 0 .6rem .6rem 0;
  }
}