@tylertech/forge 3.0.0-next.22 → 3.0.0-next.24

package/styles/table/_mixins.scss

@@ -1,547 +0,0 @@
-/**
- * @license
- * Copyright 2023 Tyler Technologies, Inc. 
- * License: Apache-2.0
- */
-@use '@material/animation/animation' as mdc-animation;
-@use '@material/elevation/elevation' as mdc-elevation;
-@use '@material/theme/theme' as mdc-theme;
-@use '../theme';
-@use '../typography/mixins' as typography-mixins;
-@use './variables';
-
-@mixin provide-theme($theme) {
-  @include theme.theme-properties(table, $theme, variables.$theme-values);
-}
-
-@mixin core-styles() {
-  .forge-table {
-    @include base;
-  
-    &--dense {
-      .forge-table-row {
-        @include row-dense;
-      }
-    }
-  
-    &--roomy {
-      .forge-table-row {
-        @include row-roomy;
-      }
-    }
-  
-    &--resizable {
-      .forge-table-head__cell {
-        position: relative;
-  
-        &:hover {
-          .forge-table__resize-handle {
-            display: block;
-          }
-        }
-      }
-  
-      .forge-table__resize-handle {
-        @include resize-handle;
-      }
-  
-      .forge-table__resize-handle:hover {
-        @include resize-handle-hover;
-      }
-    }
-  
-    &--resizing {
-      -webkit-user-drag: none;
-      user-select: none;
-    }
-  
-    &--layout-fixed {
-      table-layout: fixed;
-    }
-  
-    &--no-wrap-content {
-      &.forge-table--dense {
-        .forge-table-row,
-        .forge-table-cell__container {
-          height: variables.$thead-dense-row-height;
-        }
-      }
-  
-      .forge-table-cell__container > .forge-table-cell__container-text {
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-    }
-  
-    &--filter-visible {
-      .forge-table-head__row {
-        height: variables.$thead-filter-row-height;
-  
-        .forge-table-head__cell {
-          border: none;
-          vertical-align: bottom;
-        }
-      }
-    }
-  
-    &-head {
-      &__row {
-        @include head-row;
-
-        &__filter {
-          @include head-filter;
-        }
-      }
-  
-      &__cell {
-        @include head-cell;
-  
-        &-container {
-          @include head-cell-container;
-        }
-  
-        &--sorted-ascending,
-        &--sorted-descending {
-          .forge-table-head__cell-text {
-            @include head-cell-text-sorted;
-          }
-        }
-  
-        &__sort-order {
-          &--hidden {
-            display: none;
-          }
-        }
-
-        &--sortable {
-          @include head-cell-sortable(forge-table-head__cell-sort-icon, forge-table-head__cell__sort-order);
-
-          button {
-            @include head-cell-sortable-button;
-          }
-
-          &.forge-table-head__cell--sorted-ascending {
-            .forge-table-head__cell-sort-icon {
-              @include head-cell-sort-icon-ascending;
-            }
-          }
-        }
-  
-        &-sort-icon {
-          @include head-cell-sort-icon;
-  
-          &--active {
-            @include head-cell-sort-icon-active;
-          }
-        }
-  
-        &-text {
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
-  
-    &-row {
-      @include row-base(forge-table-cell, forge-table-cell__select);
-  
-      &--expanded {
-        .forge-table-body__cell {
-          border-bottom: none;
-        }
-      }
-  
-      &__expandable-content {
-        height: auto !important;
-  
-        &:hover {
-          background-color: inherit !important;
-        }
-      }
-    }
-  
-    &-body {
-      &__row {
-        @include body-row;
-  
-        &--selected {
-          @include body-row-selected;
-        }
-  
-        &--clickable {
-          @include body-row-clickable;
-        }
-      }
-  
-      &__cell {
-        @include body-row-cell;
-      }
-    }
-  
-    &-cell {
-      @include cell-base(forge-table-cell__select);
-  
-      &--resizing {
-        position: relative;
-  
-        &::before {
-          content: '';
-          @include cell-resizing;
-        }
-      }
-  
-      &__select {
-        @include cell-select;
-  
-        &-checkbox {
-          &-container {
-            @include cell-checkbox-container;
-          }
-        }
-      }
-  
-      &__container {
-        @include cell-container;
-      }
-  
-      &--center {
-        @include cell-center;
-      }
-  
-      &--right {
-        @include cell-right;
-      }
-    }
-  
-    &--fixed {
-      @include fixed;
-  
-      .forge-table-head__cell {
-        @include fixed-head-cell;
-      }
-  
-      .forge-table-head__row__filter {
-        .forge-table-head__cell {
-          top: variables.$thead-filter-row-height;
-        }
-      }
-    }
-  }
-}
-
-@mixin host() {
-  display: block;
-}
-
-/// The base styles for the `<table>` element.
-@mixin base() {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-/// The base styles for the rows of the table.
-@mixin row-base($cell-class-name, $select-class-name) {
-  // Finds the first table cell that is not the select cell
-  > .#{$cell-class-name}:not(.#{$select-class-name}):first-child,
-  .#{$cell-class-name}.#{$select-class-name} + .#{$cell-class-name}:not(.#{$select-class-name}) {
-    padding-right: 24px;
-  }
-
-  > .#{$cell-class-name}:last-child {
-    padding-right: 24px;
-  }
-}
-
-@mixin fixed() {
-  position: relative;
-}
-
-@mixin fixed-head-cell() {
-  @include mdc-theme.property(background-color, surface);
-
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  z-index: var(--forge-z-index-surface, 1);
-
-  &::after {
-    @include theme.property(border-color, border-color);
-
-    content: '';
-    border-width: 0;
-    border-bottom-width: 1px;
-    border-style: solid;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    height: 1px;
-    box-sizing: border-box;
-  }
-}
-
-/// The dense styles for all table rows.
-@mixin row-dense() {
-  height: variables.$thead-dense-row-height;
-}
-
-/// The roomy styles for all table rows.
-@mixin row-roomy() {
-  height: variables.$thead-roomy-row-height;
-}
-
-/// The base styles for the cells within the table.
-@mixin cell-base($select-class-name) {
-  padding-right: 56px;
-  border-bottom: variables.$border;
-  @include theme.property(border-bottom-color, border-color);
-
-  &:first-child:not(.#{$select-class-name}) {
-    padding-left: 24px;
-  }
-}
-
-@mixin cell() {
-  padding-right: 56px;
-  padding-left: 24px;
-  border-bottom: variables.$border;
-  @include theme.property(border-bottom-color, border-color);
-}
-
-/// Creates styles for container element that is placed within each cell.
-@mixin cell-container() {
-  display: flex;
-  align-items: center;
-}
-
-/// Centers the content within a table cell.
-@mixin cell-center() {
-  justify-content: center;
-}
-
-/// Right justifies the content within a table cell.
-@mixin cell-right() {
-  justify-content: flex-end;
-}
-
-/// Provides base styles for the select checkbox container element.
-@mixin cell-select() {
-  text-align: center !important;
-  box-sizing: border-box;
-  width: 66px;
-  padding-right: 12px;
-  padding-left: 16px;
-}
-
-/// Styles the select checkbox wrapper element.
-@mixin cell-checkbox-container() {
-  display: flex;
-  &--align-left {
-    justify-content: flex-start;
-  }
-  &--align-right {
-    justify-content: flex-end;
-  }
-  &--align-center {
-    justify-content: center;
-  }
-}
-
-@mixin cell-resizing() {
-  @include mdc-theme.property(border-right-color, primary);
-
-  display: block;
-  height: 100%;
-  position: absolute;
-  right: 4px;
-  top: 0;
-  bottom: 0;
-  border-right-width: 2px;
-  border-right-style: solid;
-}
-
-/// The default table head row styles.
-@mixin head-row() {
-  height: variables.$thead-row-height;
-}
-
-@mixin head-filter() {
-  --forge-text-field-height: 2.5rem;
-  --forge-select-height: 2.5rem;
-
-  .forge-table-head__cell-container {
-    padding: 8px 0;
-  }
-}
-
-/// Removes the border on all `th` and `td` elements.
-@mixin row-no-border() {
-  th,
-  td {
-    border-bottom: none;
-  }
-}
-
-/// The base styles for the cells within the table head.
-@mixin head-cell() {
-  @include mdc-theme.property(color, text-secondary-on-background);
-
-  font-weight: bold;
-  text-align: left;
-  font-size: 12px;
-  box-sizing: border-box;
-}
-
-/// The sorted state styles for the column header cells.
-@mixin head-cell-text-sorted() {
-  @include mdc-theme.property(color, text-primary-on-background);
-
-  font-weight: 700 !important;
-}
-
-/// Creates styles for the sort icon within the table head cells.
-@mixin head-cell-sort-icon() {
-  @include mdc-theme.property(color, text-primary-on-background);
-
-  font-size: 18px !important;
-  height: 18px;
-  width: 18px;
-  margin-left: 5px;
-  transition: transform 250ms;
-  display: none !important;
-  font-weight: 700;
-}
-
-/// The active sort icon styles.
-@mixin head-cell-sort-icon-active() {
-  display: inline !important;
-}
-
-/// Rotates the sort icon using a transform when in ascending direction.
-@mixin head-cell-sort-icon-ascending() {
-  transform: rotate(180deg);
-}
-
-/// The table head cell wrapper element styles for alignment purposes.
-@mixin head-cell-container() {
-  display: flex;
-  align-items: center;
-}
-
-/// Base styles for a table header cell when the column is sortable.
-@mixin head-cell-sortable($icon-class-name, $sort-order-class-name) {
-  cursor: pointer;
-
-  :hover {
-    .#{$icon-class-name},
-    .#{$sort-order-class-name} {
-      @include mdc-theme.property(color, text-icon-on-background);
-    }
-  }
-}
-
-@mixin head-cell-sortable-button {
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  text-align: inherit;
-  margin: inherit;
-  padding-block: 4px;
-  padding-inline: 0;
-  font: inherit;
-  color: inherit;
-  width: 100%;
-  outline-offset: 4px;
-}
-
-/// The base table body row styles for row interactions.
-@mixin body-row() {
-  height: variables.$tbody-row-height;
-  transition: background-color 200ms;
-
-  &:hover {
-    @include theme.css-custom-property(background-color, --forge-table-theme-row-hover-background, variables.$row-hover-background);
-  }
-
-  &--selected:hover {
-    @include theme.css-custom-property(background-color, --forge-table-theme-row-selected-hover-background, variables.$row-selected-hover-background);
-  }
-}
-
-/// Sets the selected state styles on a row.
-@mixin body-row-selected() {
-  @include theme.css-custom-property(background-color, --forge-table-theme-row-selected-background, variables.$row-selected-background);
-
-  &:hover {
-    @include theme.css-custom-property(background-color, --forge-table-theme-row-selected-hover-background, variables.$row-selected-hover-background);
-  }
-}
-
-// Sets the styles for a clickable row.
-@mixin body-row-clickable() {
-  cursor: pointer;
-
-  &:active {
-    @include theme.css-custom-property(background-color, --forge-table-theme-row-active-background, variables.$row-active-background);
-  }
-  
-  &.forge-table-body__row--selected:active {
-    @include theme.css-custom-property(background-color, --forge-table-theme-row-selected-active-background, variables.$row-selected-active-background);
-  }
-}
-
-/// The cell styles for all tbody rows.
-@mixin body-row-cell() {
-  @include mdc-theme.property(color, on-surface);
-
-  font-size: variables.$cell-font-size;
-}
-
-@mixin resize-handle() {
-  @include mdc-theme.property(border-color, primary);
-
-  display: none;
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 8px;
-  border-right-width: 2px;
-  border-right-style: solid;
-  box-sizing: border-box;
-  margin-right: 4px;
-  transition: mdc-animation.enter(border-right-width, 150ms);
-}
-
-@mixin resize-handle-hover() {
-  border-right-width: 4px;
-  cursor: col-resize;
-}
-
-@mixin forge-table() {
-  @include base;
-
-  thead {
-    tr {
-      @include head-row;
-
-      th {
-        @include cell;
-        @include head-cell;
-      }
-    }
-  }
-
-  tbody {
-    tr {
-      @include body-row;
-
-      td {
-        @include cell;
-        @include body-row-cell;
-      }
-    }
-  }
-}