carbon-components/src/components/data-table-v2/_data-table-v2-inline-edit-cell.scss

//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import '../../globals/scss/layer';
@import '../../globals/scss/layout';
@import '../../globals/scss/vars';

@mixin assistive-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  visibility: visible;
  white-space: nowrap;
}

@include exports('data-table-v2-inline-edit-cell') {
  // Spacing for cells that are the first in their row
  $spacing--columns--first: 1.5rem;
  // Spacing before columns in cell
  $spacing--columns--before: 0.75rem;
  // Spacing for activity areas in a cell, namely status and actions
  $spacing--cell--activity: 3.5rem;
  // Offset used on input nodes to offer space to activity indicators such that
  // the input doesn't overlap with the status
  $spacing--cell--status: 2rem;

  //----------------------------------------------------------------------------
  // Table
  //----------------------------------------------------------------------------

  // Reset hover styles while editing
  .#{$prefix}--data-table--editing tr:hover td {
    background-color: inherit;
    border-top: 1px solid $ui-04;
    border-bottom: 1px solid $ui-04;
  }

  .#{$prefix}--data-table--editing tr:hover td:first-of-type {
    border-left: 1px solid $ui-04;
  }

  .#{$prefix}--data-table--editing tr:hover td:last-of-type {
    border-right: 1px solid $ui-04;
  }

  //----------------------------------------------------------------------------
  // Cell Edit
  //----------------------------------------------------------------------------

  // Buffer is created on the right-hand side so that status indicators have the
  // appropriate space to display.
  .#{$prefix}--data-table-cell--editable {
    position: relative;
    padding-right: $spacing--cell--activity;
  }

  td.#{$prefix}--data-table-cell--editable:last-of-type {
    // Reset the styles inherited from data-table-v2 for padding-right styles
    // but adding our manual offset plus the spacing used before columns to get
    // a similar look for when an editable cell is in the middle of a table.
    padding-right: #{$spacing--cell--activity + $spacing--columns--before};
  }

  // Minor offset for the last cell in a row so that the action bar does not
  // touch the edge of the cell
  td.#{$prefix}--data-table-cell--editable:last-of-type > .#{$prefix}--data-table-cell__activity {
    margin-right: $spacing--columns--before;
  }

  //----------------------------------------------------------------------------
  // Cell Edit - Content
  //----------------------------------------------------------------------------
  .#{$prefix}--data-table-cell__content {
    position: relative;
    z-index: 1000;
    // Set line-height to match that within inputs
    line-height: normal;
  }

  //----------------------------------------------------------------------------
  // Cell Edit - Activity
  //----------------------------------------------------------------------------

  // Styles used for getting 100% width and height on an descendant of a table
  // cell. Display is used for alignment of most items to the end of the cell
  .#{$prefix}--data-table-cell__activity {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 0;
    right: 1rem;
    bottom: 0;
    left: 0;
  }

  //----------------------------------------------------------------------------
  // Cell Edit - Trigger
  //----------------------------------------------------------------------------

  .#{$prefix}--data-table-cell__edit {
    @include button-reset(false);
    opacity: 0;
  }

  .#{$prefix}--data-table-cell__edit:focus,
  .#{$prefix}--data-table-cell--editable:hover .#{$prefix}--data-table-cell__edit {
    opacity: 1;
  }

  .#{$prefix}--data-table-cell__icon--edit {
    fill: $ui-05;
  }

  .#{$prefix}--data-table-cell__edit:active > .#{$prefix}--data-table-cell__icon--edit {
    fill: $brand-01;
  }

  .#{$prefix}--data-table-cell__edit:focus {
    outline: 1px solid $brand-01;
    outline-offset: 2px;
  }

  //----------------------------------------------------------------------------
  // Cell Edit - Fields // Inputs
  //----------------------------------------------------------------------------

  .#{$prefix}--data-table__edit-field {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
  }

  .#{$prefix}--data-table__edit-field > label.#{$prefix}--label {
    @include assistive-text();
  }

  // Spacing resets on inputs

  // All inputs should span as much height and width as possible, but should
  // still buffer the right hand side with some padding to allow space for
  // status indicators to render without clipping the input content
  .#{$prefix}--data-table__edit-field > input {
    min-height: 100%;
    min-width: 100%;
    padding: 0 $spacing--cell--status 0 0;
  }

  // Set the default padding on the left-hand side of the input to match what is
  // given by the default table class. Visually this makes it look like the
  // content is aligned with the other cells in the table.
  td.#{$prefix}--data-table-cell--editable input {
    padding-left: $spacing--columns--before;
  }

  // Substitute the left-hand padding for the padding specified on the first td
  // of each row
  td.#{$prefix}--data-table-cell--editable:first-of-type input {
    padding-left: $spacing--columns--first;
  }

  //----------------------------------------------------------------------------
  // Cell Edit - Actions
  //----------------------------------------------------------------------------

  // Spacing that should exist around, and in-between, elements in the action
  // bar
  $spacing--cell-actions: 0.5rem;
  $size--edit-actions--height: 3rem;

  .#{$prefix}--data-table__edit-actions {
    @include layer('overlay');

    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: $size--edit-actions--height;
    right: 0;
    bottom: 0;
    height: $size--edit-actions--height;
    background-color: $inverse-01;
    padding: $spacing--cell-actions;
    z-index: z('overlay');
  }

  // Undo default margin-left from btn classes
  .#{$prefix}--data-table__edit-actions .#{$prefix}--btn--secondary + .#{$prefix}--btn--primary {
    margin-left: $spacing--cell-actions;
  }

  //----------------------------------------------------------------------------
  // Cell Edit - Status
  //----------------------------------------------------------------------------

  // Containing node
  .#{$prefix}--data-table__edit-status {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 0;
    // Value should be 0.5rem, but doing so will cause the loading box to clip
    // the bounding box of the last cells in a row. This will cause the
    // overflow-x scrollbar to behave erratically as it constantly shifts to
    // adjust to the new width of the table
    right: 1rem;
    bottom: 0;
    left: 0;
  }

  // Status - Saving -----------------------------------------------------------

  .#{$prefix}--data-table-cell--saving {
    cursor: not-allowed;
  }

  // Cell should go to 25% opacity when saving
  .#{$prefix}--data-table-cell--saving input {
    background-color: inherit;
    opacity: 0.25;
  }

  // Manually center the loading indicator given the offset of its bounding box
  .#{$prefix}--data-table-cell--saving .#{$prefix}--loading {
    position: relative;
    left: rem(7px);
  }

  // Status - Success ----------------------------------------------------------
  .#{$prefix}--data-table__icon--success {
    fill: $support-02;
  }

  // Status - Error ------------------------------------------------------------

  .#{$prefix}--data-table__status--error {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    fill: $support-01;
    width: 100%;
    height: 100%;
  }

  .#{$prefix}--data-table__edit-field--error {
    border-bottom: 2px solid $support-01;
  }

  .#{$prefix}--data-table__status--error {
    position: relative;
  }

  .#{$prefix}--data-table__error-text {
    @include layer('overlay');

    position: absolute;
    top: rem(-1px);
    right: -1rem;
    color: $support-01;
    // TODO: sync with caption sizes
    font-size: rem(12px);
    background-color: $inverse-01;
    padding: 1rem;
    transform: translateY(-100%);
    border: 1px solid $ui-03;
    z-index: 1000;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
  }

  .#{$prefix}--data-table__error-text::after {
    content: '';
    position: absolute;
    // Manually offset and center triangle
    right: 1rem;
    // TODO: shift down half of height
    bottom: -7px;
    width: rem(10px);
    height: rem(10px);
    background-color: $inverse-01;
    border: 1px solid $ui-03;
    border-top: 1px solid transparent;
    border-left: 1px solid transparent;
    transform: rotate(45deg);
    z-index: 10;
    opacity: 0;
  }

  .#{$prefix}--data-table__icon--error {
    z-index: 1000;
  }

  .#{$prefix}--data-table__status--error {
    // Specify outline on child SVG node instead
    outline: none;
  }

  .#{$prefix}--data-table__status--error:focus .#{$prefix}--data-table__error-text {
    box-shadow: 0 0 0 1px $brand-01;
  }

  .#{$prefix}--data-table__status--error:focus .#{$prefix}--data-table__error-text::after {
    border-right-color: $brand-01;
    border-bottom-color: $brand-01;
  }

  // Visually show the error message

  // Display the text area itself on hover
  .#{$prefix}--data-table__icon--error:hover
    ~ .#{$prefix}--data-table__error-text,

    /* Display text area triangle on hover*/
  .#{$prefix}--data-table__icon--error:hover
    ~ .#{$prefix}--data-table__error-text::after,

    /* Display text area on focus*/
  .#{$prefix}--data-table__status--error:focus
    > .#{$prefix}--data-table__error-text,

    /* Display text area triangle on focus*/
  .#{$prefix}--data-table__status--error:focus
    > .#{$prefix}--data-table__error-text::after,

  /* Display when user is typing in edit field*/
  .#{$prefix}--data-table__edit-field--editing.#{$prefix}--data-table__edit-field--error +
  .#{$prefix}--data-table__edit-status .#{$prefix}--data-table__error-text,

  .#{$prefix}--data-table__edit-field--editing.#{$prefix}--data-table__edit-field--error +
  .#{$prefix}--data-table__edit-status
  .#{$prefix}--data-table__error-text::after {
    opacity: 1;
  }

  //----------------------------------------------------------------------------
  // Browser Quirks
  //----------------------------------------------------------------------------

  // IE11 - cells are not going full height. Set min-height to compensate
  .#{$prefix}--data-table__edit-field,
  .#{$prefix}--data-table-cell__activity,
  .#{$prefix}--data-table__edit-status {
    min-height: 3rem;
  }
}