GridField.scss

/**
 * Core styles for the basic GridField form field without any specific style.
 *
 * @package framework
 * @subpackage scss
 * @todo Add radial gradient to default delete button state
 * @todo Create SASS mixin-function to simply swap the from/to, to to/from colours in grsdient mixins?
 */

// Extends basic table styles, requires .table .table-hover
.grid-field__row--drillable {
  cursor: pointer;
}

.grid-field__cell--actions {
  white-space: nowrap;
  width: 1px;
}

.grid-field__filter-buttons {
  min-width: 68px;
}


.cms {
  .grid-field {
    > .addNewGridFieldButton {
      margin-bottom: 0;

      .action {
        margin-bottom: $spacer * .75;
      }
    }

    &[data-selectable] {

      tr.ui-selected,
      tr.ui-selecting {
        background: $table-accent-bg !important;
      }

      td {
        cursor: pointer;
      }
    }

    span button.action_gridfield_relationfind {
      display: none; //hides find button - redundant functionality
    }

    p button.action_export span.btn-icon-download-csv {
      height: 17px; //exact height of icon
    }

    .pull-xs-right > * {
      float: right;
      margin-left: map_get($spacers, 2);
    }

    .pull-xs-left > * {
      margin-right: map_get($spacers, 2);
      float: left;
    }

    .add-existing-autocompleter {
      span {
        float: left;
        display: inline-block;
        vertical-align: top;
      }

      input.relation-search {
        width: 270px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        padding-right: 0;
      }

      button.action_gridfield_relationadd {
        display: flex;
        margin-left: 0; // Webkit needs this
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: 0;
        margin-right: 0;
        padding-top: $input-padding-y; // Replicate input
        padding-bottom: $input-padding-y;

        &:hover {
          border-color: $btn-secondary-border;
        }
      }
    }

    .grid-csv-button,
    .grid-print-button {
      margin-bottom: 0;
      margin-right: 0;
      display: inline-block;
    }

    .action-menu__toggle {
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
    }
  }

  .grid-field__table {
    .grid-field__filter-header {
      .fieldholder-small {
        padding-bottom: 0;
      }

      .fieldgroup .fieldgroup-field {
        padding: 0;
      }
    }

    tbody {
      td {
        &.col-listChildrenLink {
          width: 26px;
          border-right: 0;
          padding-right: 0;

          .list-children-link {
            margin-top: -$table-cell-padding;
            margin-right: -(calc($table-cell-padding/ 2));
            margin-bottom: -$table-cell-padding;
            margin-left: -$grid-gutter-width-half;
            padding-top: $table-cell-padding;
            padding-right: 0;
            padding-bottom: $table-cell-padding;
            padding-left: $grid-gutter-width-half;
            height: calc(#{$table-cell-padding * 2} + #{$line-height-base});
            line-height: $line-height-root;
            border-radius: 0;
            display: block;

            &:before {
              margin-top: -2px;
            }

            &:hover {
              background-color: darken($table-hover-bg, 4%);
            }
          }
        }

        &.col-getTreeTitle {
          span.item {
            color: $link-color;
          }

          span.badge {
            clear: both;
            text-transform: uppercase;
            display: inline-block;
            padding: 1px 2px;
            font-size: 0.75em;
            line-height: 1em;
            margin-left: 3px;
            margin-right: 6px;
            margin-top: -1px;
            border-radius: 2px 2px;
            font-weight: normal;
          }

          span.badge.status-modified {
            color: $state-draft;
          }

          span.badge.status-addedtodraft {
            color: $state-draft;
          }

          span.badge.status-deletedonlive,
          span.badge.status-removedfromdraft {
            color: #636363;
            border: 1px solid #E49393;
            background-color: #F2DADB;
          }

          span.badge.status-workflow-approval {
            color: #56660C;
            border: 1px solid #7C8816;
            background-color: #DAE79A;
          }
        }

        a.view-link {
          display: inline-block;
        }
      }
    }

    .grid-field__filter-buttons .fieldgroup-field {
      width: auto;
    }

    tr {
      th {
        &.main {
          white-space: nowrap;

          > * {
            vertical-align: bottom;
          }

          span {
            @include hide-text-overflow; // Add ellipses to overflowing text
          }

          span.non-sortable {
            line-height: 14px; // Specify a line-height for misaligned non-sortable GridField table headers
          }

          &.col-listChildrenLink {
            border-right: 0;
          }
        }

        &.extra,
        &.action {
          cursor: default;
        }

        &.extra {
          position: relative;
          background: $table-bg-tools;
          padding-top: $table-cell-padding-sm;
          padding-bottom: $table-cell-padding-sm;

          &:last-child {
            width: 1%;
            min-width: 1%;
            white-space: nowrap;

            > .form__fieldgroup-item {
              display: inline-block;
            }
          }

          select {
            margin: 0;
          }
        }

        button {
          &.ss-gridfield-button-filter:not(.trigger),
          &.grid-field__filter-clear {
            margin-top: 3px;
            margin-bottom: 3px;
            background: transparent;
            color: $white;

            &.hover-alike:active,
            &:active,
            &.hover-alike,
            &:hover {
              color: $white;
              background-color: $gray-800;
            }
          }

          &.action_gridfield_relationadd:hover {
            color: #444 !important; /* Not sure why IE think it needs this */
          }

          &.ss-gridfield-button-reset {
            margin: 0;
            display: none;

            &:hover,
            &:active {
              opacity: 1;
              background: transparent;
            }

            &.filtered {
              display: block;
              opacity: 0.8;
            }
          }
        }
      }

      td.bottom-all .datagrid-footer-message {
        text-align: center;
        padding-top: 6px;
      }
    }

    // Thumbnails e.g. in HtmlEditorField file selection
    td.col-StripThumbnail {
      padding: 0 4px;
      width: 32px;
      height: 32px;
      vertical-align: middle;

      img {
        width: 32px;
        height: 32px;
        display: block;
      }
    }
  }
}

.grid-field__paginator {
  position: relative;
  white-space: nowrap;
}

// TODO create pagination component
.grid-field__paginator_numbers  {
  float: right;
}

.grid-field__paginator__controls {
  white-space: nowrap;
  position: absolute;
  height: 36px;
  top: 50%;
  left: 50%;
  margin-top: -18px;
  margin-left: -130px; // half the width of .datagrid-pagination - centers pagination
  z-index: 5;
  width: 260px;
  text-align: center;

  @include media-breakpoint-down(sm) {
    left: 0;
    margin-left: 0;
  }


  .pagination-page-number {
    text-align: center;

    input {
      width: 35px; // exact width so that a four digit number can be entered
      padding-left: 0;
      padding-right: 0;
      text-align: center;
      border-color: $border-color;
      background-color: $white;
      background-image: none;
      display: inline;

      &:focus {
        border-color: $input-focus-border-color;
        box-shadow: $input-focus-box-shadow;
      }
    }
  }

  button,
  button[class*="font-icon-"] {
    margin: 0;
    margin-top: -2px;

    .ui-button-text {
      text-indent: -9999em;
    }

    &.ssui-button-disabled {
      opacity: 0;
    }
  }
}

.grid-field__search-holder {
  // Match gridfield full-width style
  margin-left: -$panel-padding-x;
  margin-right: -$panel-padding-x;

  // If the gridfield is at the top of the form fill top gap
  .grid-field:first-child & {
    margin-top: -$panel-padding-y;
  }

  // Make the tab menu bottom border and the top of the search bar one line
  .tab-pane .grid-field:first-child & .search-box__content-field {
    margin-top: -1px;
    border-top-style: solid;
  }

  // Remove extra spacing when the search field is visible
  .show-filter & + .ss-gridfield-buttonrow {
    margin-top: 0;
  }

  // Remove double border in model admin context
  .ModelAdmin & .search-box__content-field {
    border-left-style: none;
  }

  // Class for entwine hide/show
  &--hidden {
    display: none;
  }
}

.grid-field {
  // If gridfield isn't first thing on page
  .field + & {
    .toolbar--content {
      margin-top: 0;
    }
  }

  .ss-gridfield-buttonrow-after {
    margin-top: 0;

    .grid-csv-button:first-child,
    .grid-print-button:first-child {
      margin-left: -5px;
    }
  }

  .ss-gridfield-item.loading {
    position: relative;
    padding: $grid-gutter-width;
  }
}