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

// Animations

@keyframes flash-background {
  0% {background-color: $body-bg;}
  10% {background-color: $green-bg;}
  70% {background-color: $green-bg;}
}

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

  // Row styles
  table.ss-gridfield-table {
    // Standard rows
    .ss-gridfield-item {
      height: $height-base;

      &,
      &:hover {
        background: $body-bg;
      }

      td {
        border-right-width: 0;
        border-top: 1px solid $gray-light;

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

      .handle {
        min-height: $height-base;
      }

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

      &.ui-sortable-placeholder {
        height: $placeholder-height;
      }
    }

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

      td {
        border-bottom: 0;
        border-top: 1px solid $gray-light;
      }

      .col-reorder,
      .handle {
        background: $blue;
        border-top: 0;
      }

      &.infieldgroup-level-2 {
        .col-reorder,
        .handle {
          background: $blue-dark;
          border-top: 0;
        }
      }

      &.infieldgroup-level-3 {
        .col-reorder,
        .handle {
          background: $blue-darker;
          border-top: 0;
        }
      }
    }

    .ss-gridfield-item[data-class="EditableFormStep"] {
      &,
      &:hover {
        background: $gray-bg;
      }

      label {
        font-weight: bold;
        color: $gray-base;
        font-size: 1.1em;
      }

      td {
        border-top: 1px solid $gray;
      }

      + .ss-gridfield-item td {
        border-top: 1px solid $gray-bg;
      }

      + .ss-gridfield-item[data-class="EditableFieldGroup"] td {
        border-top: 1px solid $blue-base;
      }
    }

    .ss-gridfield-item[data-class="EditableFieldGroup"] {
      td {
        border-top: 1px solid $blue-base;
      }

      label {
        font-weight: bold;
        color: $gray-darker;
      }
    }

    .ss-gridfield-item[data-class="EditableFieldGroupEnd"] {
      td {
        border-bottom: 1px solid $blue-base;
      }

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

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

      label {
        color: $gray-dark;
      }
    }
  }

  .sticky-buttons {
    position: fixed;
    top: $height-top;
    z-index: 2;
    background: $gray-light;
    box-shadow: 0 $padding-base $padding-xs -$padding-base-horizontal $gray-light;
    padding: $padding-base;
    margin-left: -$padding-base;

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

    ~ .ss-gridfield-table {
      margin-top: $height-top;
    }
  }
}