_base.tables.scss

/*
 * Copyright (c) 2018, General Electric
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

////
/// PX-TABLES-DESIGN
/// Basic table styles
/// @group px-tables-design
////

@import "px-defaults-design/_settings.defaults.scss";
@import "px-colors-design/_settings.colors.scss";

/// Prepend value for all generated classes
/// @group px-tables-design:variables:style
/// @type String [default]
/// @todo n/a
$inuit-table-namespace          : $inuit-namespace !default;

/// Border width
/// @group px-tables-design:variables:style
/// @type Number [default]
/// @todo n/a
$inuit-table-border-width       : 1px !default;

/// Border style
/// @group px-tables-design:variables:style
/// @type String [default]
/// @todo n/a
$inuit-table-border-style       : solid !default;

/// Border color
/// @group px-tables-design:variables:style
/// @type Color [default]
/// @todo --px-table-border-color
$inuit-table-border-color       : var(--px-table-border-color, $gray10) !default;

/// Separator (interior border) color
/// @group px-tables-design:variables:style
/// @type Color [default]
/// @todo --px-table-separator-color
$inuit-table-separator-color    : var(--px-table-separator-color, $gray5) !default;

/// Enable tables with fixed width columns?
/// @group px-tables-design:variables:flag
/// @type Boolean [default]
$inuit-enable-table--fixed      : false !default;

/// Enable tables with small cell padding?
/// @group px-tables-design:variables:flag
/// @type Boolean [default]
$inuit-enable-table--small      : false !default;

/// Enable tables with large cell padding?
/// @group px-tables-design:variables:flag
/// @type Boolean [default]
$inuit-enable-table--large      : false !default;

/// Enable tables with no borders?
/// @group px-tables-design:variables:flag
/// @type Boolean [default]
$inuit-enable-table--no-cells   : false !default;

/// Enable tables with column borders but no row borders?
/// @group px-tables-design:variables:flag
/// @type Boolean [default]
$inuit-enable-table--columns    : false !default;

/// Enable tables with column borders but no row borders?
/// @group px-tables-design:variables:flag
/// @type Boolean [default]
$inuit-enable-table--cells      : false !default;

/// Enable tables with text alignment in headers
/// @group px-tables-design:variables:style
/// @type String [default]
/// @todo n/a
$inuit-table-header-text-align  : left !default;

/// Default table
.#{$inuit-table-namespace}table,
%#{$inuit-table-namespace}table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  th, td {
    padding: 12px;
  }
  th {
    text-align: $inuit-table-header-text-align;
    text-transform: uppercase;
    font-size: 12px;
    color: $gray10;
    font-weight: normal;
    border-bottom: $inuit-table-border-width $inuit-table-border-style $inuit-table-border-color;
  }
  td {
    border-bottom: $inuit-table-border-width $inuit-table-border-style $inuit-table-separator-color;
    border-top: $inuit-table-border-width $inuit-table-border-style $inuit-table-separator-color;
  }
  tr:last-of-type td {
    border-bottom: $inuit-table-border-width $inuit-table-border-style $inuit-table-border-color;
  }
}

/// Table with fixed column widths
@if ($inuit-enable-table--fixed == true) {
  .#{$inuit-table-namespace}table--fixed,
  %#{$inuit-table-namespace}table--fixed {
      table-layout: fixed;
  }
}

/// Table with small padding / tightly packed cells
@if ($inuit-enable-table--small == true) {
  .#{$inuit-table-namespace}table--small,
  %#{$inuit-table-namespace}table--small {
      th, td {
        padding: $inuit-base-spacing-unit--tiny;
      }
  }
}

/// Table with large padding / widely spaced cells
@if ($inuit-enable-table--large == true) {
  .#{$inuit-table-namespace}table--large,
  %#{$inuit-table-namespace}table--large {
      th, td {
        padding: $inuit-base-spacing-unit;
      }
  }
}

/// Table with no row borders, just column borders
@if ($inuit-enable-table--columns == true) {
  .#{$inuit-table-namespace}table--columns,
  %#{$inuit-table-namespace}table--columns {
      &, th, td, tr:last-of-type td {
        border: 0;
      }
  }
  .#{$inuit-table-namespace}table--columns,
  %#{$inuit-table-namespace}table--columns {
      border-left: $inuit-table-border-width $inuit-table-border-style $inuit-table-border-color;
      th, td, tr:last-of-type td {
        border-right: $inuit-table-border-width $inuit-table-border-style $inuit-table-separator-color;
      }
      td:last-of-type, th:last-of-type, tr:last-of-type td:last-of-type {
        border-right: $inuit-table-border-width $inuit-table-border-style $inuit-table-border-color;
      }
  }
}

/// Table with all borders (both row and column)
@if ($inuit-enable-table--cells == true) {
  .#{$inuit-table-namespace}table--cells,
  %#{$inuit-table-namespace}table--cells {
      td, tr:last-of-type td {
        border: $inuit-table-border-width $inuit-table-border-style $inuit-table-separator-color;
      }
      &, th {
        border: 0;
      }
  }
}

/// Table with no borders at all
@if ($inuit-enable-table--no-cells == true) {
  .#{$inuit-table-namespace}table--no-cells,
  %#{$inuit-table-namespace}table--no-cells {
      th, td, tr:last-of-type td {
        border: 0;
      }
  }
}