@oruga-ui/theme-oruga 0.4.2 → 0.5.0

package/src/assets/scss/components/_table.scss

@@ -1,424 +0,0 @@
-@use "sass:list";
-
-/* @docs */
-$table-background-color: #fff !default;
-$table-background: #f5f5f5 !default;
-$table-boder: 1px solid transparent !default;
-$table-border-radius: var(--#{$prefix}base-border-radius) !default;
-$table-card-box-shadow:
-  0 2px 3px rgba(var(--#{$prefix}black), 0.1),
-  0 0 0 1px rgba(var(--#{$prefix}black), 0.1) !default;
-$table-card-cell-font-weight: 600 !default;
-$table-card-cell-padding: 0 0.5em 0 0 !default;
-$table-card-cell-text-align: left !default;
-$table-card-detail-margin: -1rem 0 0 0;
-$table-card-margin: 0 0 1rem 0;
-$table-color: black !default;
-$table-current-sort-border-color: var(--#{$prefix}grey) !default;
-$table-current-sort-font-weight: 700 !default;
-$table-current-sort-hover-border-color: var(--#{$prefix}grey) !default;
-$table-detail-background: #fafafa !default;
-$table-detail-box-shadow: inset 0 1px 3px var(--#{$prefix}grey) !default;
-$table-detail-chevron-color: var(--#{$prefix}primary) !default;
-$table-detail-chevron-width: 40px !default;
-$table-detail-padding: 1rem !default;
-$table-focus-border-color: var(--#{$prefix}primary) !default;
-$table-focus-box-shadow: 0 0 0 0.125em rgba(var(--#{$prefix}primary), 0.25) !default;
-$table-hoverable-background-color: #fafafa !default;
-$table-narrow-padding: 0.25em 0.5em !default;
-$table-row-active-background-color: var(--#{$prefix}primary) !default;
-$table-row-active-color: var(--#{$prefix}primary-invert) !default;
-$table-sticky-header-height: 300px !default;
-$table-sticky-zindex: 1 !default;
-$table-striped-background-color: #fafafa !default;
-$table-td-border: 1px solid var(--#{$prefix}grey-lighter) !default;
-$table-td-padding: 0.5em 0.75em !default;
-$table-th-border: 2px solid var(--#{$prefix}grey-lighter) !default;
-$table-th-checkbox-width: 40px !default;
-$table-th-color: #363636 !default;
-$table-th-detail-width: 14px !default;
-$table-th-font-weight: 600 !default;
-$table-th-padding: 0.5em 0.75em !default;
-/* @docs */
-
-.o-table {
-  display: table;
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  border: var(--#{$prefix}table-boder, $table-boder);
-  border-radius: var(--#{$prefix}table-border-radius, $table-border-radius);
-  background-color: var(
-    --#{$prefix}table-background-color,
-    $table-background-color
-  );
-  color: var(--#{$prefix}table-color, $table-color);
-
-  &__root {
-    position: relative;
-  }
-
-  &__wrapper {
-    transition: opacity $animation-speed-fast $animation-timing;
-    position: relative;
-
-    &--sticky-header {
-      height: var(
-        --#{$prefix}table-sticky-header-height,
-        $table-sticky-header-height
-      );
-      overflow-y: auto;
-
-      th {
-        position: -webkit-sticky;
-        position: sticky;
-        left: 0;
-        top: 0;
-        background: var(
-          --#{$prefix}table-background-color,
-          $table-background-color
-        );
-        z-index: calc(
-          var(--#{$prefix}table-sticky-zindex, $table-sticky-zindex) + 1
-        );
-      }
-    }
-
-    &--scrollable {
-      -webkit-overflow-scrolling: touch;
-      overflow-x: auto;
-      max-width: 100%;
-    }
-
-    &--mobile {
-      overflow-x: auto;
-
-      .o-table__mobile-sort {
-        display: block;
-      }
-
-      // cards
-      .o-table {
-        background-color: transparent;
-      }
-
-      thead {
-        tr {
-          box-shadow: none;
-          border-width: 0;
-
-          th {
-            display: none;
-          }
-
-          .o-table-th-checkbox {
-            display: block;
-            width: 100%;
-            text-align: right;
-            border: 0;
-          }
-        }
-      }
-
-      tfoot {
-        th {
-          border: 0;
-          display: inherit;
-        }
-      }
-
-      tr {
-        box-shadow: var(
-          --#{$prefix}table-card-box-shadow,
-          $table-card-box-shadow
-        );
-        max-width: 100%;
-        position: relative;
-        display: block;
-
-        td {
-          border: 0;
-          display: inherit;
-
-          &:last-child {
-            border-bottom: 0;
-          }
-        }
-
-        &:not(:last-child) {
-          margin: var(--#{$prefix}table-card-margin, $table-card-margin);
-        }
-
-        &:not(.o-table__tr--selected) {
-          background: inherit;
-          background: $table-background-color;
-
-          &:hover {
-            background-color: inherit;
-            background-color: $table-background-color;
-          }
-        }
-
-        &.o-table--detailed {
-          margin: var(
-            --#{$prefix}table-card-detail-margin,
-            $table-card-detail-margin
-          );
-        }
-      }
-
-      tr:not(.o-table--detailed):not(.o-table--empty):not(.o-table__footer) {
-        td {
-          display: flex;
-          width: auto;
-          justify-content: space-between;
-          text-align: right;
-          border-bottom: var(
-            --#{$prefix}table-background,
-            ($table-background 1px solid)
-          );
-
-          &:before {
-            content: attr(data-label);
-            font-weight: var(
-              --#{$prefix}table-card-cell-font-weight,
-              $table-card-cell-font-weight
-            );
-            padding-right: var(
-              --#{$prefix}table-card-cell-padding,
-              $table-card-cell-padding
-            );
-            text-align: var(
-              --#{$prefix}table-card-cell-text-align,
-              $table-card-cell-text-align
-            );
-          }
-        }
-      }
-    }
-  }
-
-  &__mobile-sort {
-    display: none;
-  }
-
-  &__th {
-    vertical-align: top;
-    text-align: left;
-    position: relative;
-    font-weight: var(--#{$prefix}table-th-font-weight, $table-th-font-weight);
-    color: var(--#{$prefix}table-th-color, $table-th-color);
-    border-bottom: var(--#{$prefix}table-th-border, $table-th-border);
-    padding: var(--#{$prefix}table-th-padding, $table-th-padding);
-
-    &--centered {
-      text-align: center;
-    }
-
-    &--right {
-      text-align: right;
-    }
-
-    &__sort-icon {
-      position: absolute;
-      right: 0;
-    }
-
-    &-checkbox {
-      width: var(--#{$prefix}table-th-checkbox-width, $table-th-checkbox-width);
-    }
-
-    &-current-sort {
-      border-color: var(
-        --#{$prefix}table-current-sort-border-color,
-        $table-current-sort-border-color
-      );
-      font-weight: var(
-        --#{$prefix}table-current-sort-font-weight,
-        $table-current-sort-font-weight
-      );
-    }
-
-    &--sortable {
-      cursor: pointer;
-
-      &:hover {
-        border-color: var(
-          --#{$prefix}table-current-sort-hover-border-color,
-          $table-current-sort-hover-border-color
-        );
-      }
-    }
-
-    &--sticky {
-      position: -webkit-sticky;
-      position: sticky;
-      left: 0;
-      top: 0;
-      z-index: var(--#{$prefix}table-sticky-zindex, $table-sticky-zindex);
-      background: var(
-        --#{$prefix}table-background-color,
-        $table-background-color
-      );
-    }
-
-    &--unselectable {
-      @include unselectable;
-    }
-
-    &--detailed {
-      width: var(--#{$prefix}table-th-detail-width, $table-th-detail-width);
-    }
-  }
-
-  &__td {
-    vertical-align: top;
-    text-align: left;
-    border-bottom: var(--#{$prefix}table-td-border, $table-td-border);
-    padding: var(--#{$prefix}table-td-padding, $table-td-padding);
-
-    &--sticky {
-      position: -webkit-sticky;
-      position: sticky;
-      left: 0;
-      z-index: var(--#{$prefix}table-sticky-zindex, $table-sticky-zindex);
-      background: var(
-        --#{$prefix}table-background-color,
-        $table-background-color
-      );
-    }
-
-    &--right {
-      text-align: right;
-    }
-
-    &--centered {
-      text-align: center;
-    }
-
-    &-chevron {
-      vertical-align: middle;
-      width: var(
-        --#{$prefix}table-detail-chevron-width,
-        $table-detail-chevron-width
-      );
-      color: var(
-        --#{$prefix}table-detail-chevron-color,
-        $table-detail-chevron-color
-      );
-    }
-  }
-
-  &:focus {
-    border-color: var(
-      --#{$prefix}table-focus-border-color,
-      $table-focus-border-color
-    );
-    box-shadow: var(
-      --#{$prefix}table-focus-box-shadow,
-      $table-focus-box-shadow
-    );
-  }
-
-  &--bordered {
-    tr:last-child {
-      td,
-      th {
-        border: var(--#{$prefix}table-td-border, $table-td-border);
-      }
-    }
-
-    td,
-    th {
-      border: var(--#{$prefix}table-td-border, $table-td-border);
-    }
-  }
-
-  &--striped {
-    tbody tr:not(.o-table__tr--selected):nth-child(2n) {
-      background-color: var(
-        --#{$prefix}table-striped-background-color,
-        $table-striped-background-color
-      );
-    }
-  }
-
-  &--narrowed {
-    td,
-    th {
-      padding: var(--#{$prefix}table-narrow-padding, $table-narrow-padding);
-    }
-  }
-
-  &--hoverable {
-    tbody tr:not(.o-table__tr--selected):hover {
-      background-color: var(
-        --#{$prefix}table-hoverable-background-color,
-        $table-hoverable-background-color
-      );
-    }
-  }
-
-  &__detail {
-    box-shadow: var(
-      --#{$prefix}table-detail-box-shadow,
-      $table-detail-box-shadow
-    );
-    background: var(
-      --#{$prefix}table-detail-background,
-      $table-detail-background
-    );
-
-    td {
-      padding: var(--#{$prefix}table-detail-padding, $table-detail-padding);
-    }
-  }
-
-  &__tr--selected {
-    background-color: $table-row-active-background-color;
-    color: $table-row-active-color;
-
-    @each $name, $pair in $colors {
-      $color: list.nth($pair, 1);
-      $color-invert: list.nth($pair, 2);
-      &-#{$name} {
-        background-color: $color;
-        color: $color-invert;
-      }
-    }
-  }
-
-  &__pagination {
-    align-items: center;
-    justify-content: space-between;
-    display: flex;
-
-    // left - right
-    > div {
-      flex-basis: auto;
-      flex-grow: 0;
-      flex-shrink: 0;
-    }
-
-    // left
-    > div:first-child {
-      align-items: center;
-      justify-content: flex-start;
-    }
-
-    // right
-    > div:last-child {
-      align-items: center;
-      justify-content: flex-end;
-
-      > div {
-        align-items: center;
-        display: flex;
-        flex-basis: auto;
-        flex-grow: 0;
-        flex-shrink: 0;
-        justify-content: center;
-      }
-    }
-  }
-}