katalyst-koi 4.7.2 → 4.8.0

data/app/assets/stylesheets/koi/components/_index-table.scss

@@ -1,147 +0,0 @@
-@use "index-table/ordinal" as *;
-
-@mixin sort-icon {
-  display: inline-block;
-  content: " ";
-  position: relative;
-  right: -1rem;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 13'%3E%3Cpath d='M.541 0l11.125 12.573a.5.5 0 00.749 0L23.541 0h-23z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E");
-  background-size: 14px 14px;
-  height: 14px;
-  width: 14px;
-}
-
-$grey: #f0ecf3 !default;
-
-$table-header-color: transparent !default;
-$row-border-color: $grey !default;
-$row-height: 48px !default;
-$cell-spacing: 0.5rem !default;
-
-$width-small: 6rem !default;
-$width-medium: 12rem !default;
-$width-large: 16rem !default;
-
-.index-table {
-  --row-height: #{$row-height};
-  --cell-spacing: #{$cell-spacing};
-  --table-header-color: #{$table-header-color};
-  --row-border-color: #{$row-border-color};
-
-  --width-small: #{$width-small};
-  --width-medium: #{$width-medium};
-  --width-large: #{$width-large};
-}
-
-.index-table {
-  border: none;
-  table-layout: fixed;
-  border-collapse: collapse;
-  text-align: left;
-  width: 100%;
-
-  thead {
-    background: var(--table-header-color);
-  }
-
-  tr {
-    height: var(--row-height);
-    line-height: var(--row-height);
-  }
-
-  th,
-  td {
-    border: none;
-    box-shadow: inset 0px -1px 0px var(--row-border-color);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    vertical-align: top;
-    white-space: nowrap;
-    background-color: white;
-    padding-right: var(--cell-spacing);
-
-    &:last-child {
-      padding-right: 0;
-    }
-
-    > a {
-      display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      text-decoration: none;
-    }
-
-    > img,
-    > a > img {
-      max-height: 3rem;
-      padding: 0;
-    }
-
-    > .trix-content {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  th {
-    font-weight: bold;
-  }
-
-  thead th {
-    // types defined first so they can be overridden with width classes
-    &.type-boolean,
-    &.type-number {
-      width: var(--width-small);
-    }
-
-    &.type-date,
-    &.type-currency {
-      width: var(--width-medium);
-    }
-
-    &.type-datetime {
-      width: var(--width-large);
-    }
-
-    &.width-s {
-      width: var(--width-small);
-    }
-
-    &.width-m {
-      width: var(--width-medium);
-    }
-
-    &.width-l {
-      width: var(--width-large);
-    }
-  }
-
-  td {
-    &.type-currency,
-    &.type-number {
-      text-align: right;
-    }
-  }
-
-  thead a.ascending:after,
-  [data-sort="asc"] a::after {
-    @include sort-icon;
-    top: 0;
-    transform: rotate(180deg);
-  }
-
-  thead a.descending:after,
-  [data-sort="desc"] a::after {
-    @include sort-icon;
-    top: 4px;
-  }
-
-  .button_to {
-    line-height: 1.5;
-  }
-
-  caption {
-    margin: 2rem 0;
-  }
-}

data/app/assets/stylesheets/koi/components/index-table/_ordinal.scss

@@ -1,38 +0,0 @@
-$width: 2rem !default;
-$time: 125ms !default;
-
-.index-table {
-  tr {
-    transition:
-      top $time ease-in-out,
-      transform $time ease-in-out;
-  }
-
-  tr[dragging] {
-    transition: transform $time ease-in-out;
-    filter: drop-shadow(0 0 0.5rem var(--row-border-color));
-    transform: scale(1.01);
-    td {
-      box-shadow: none;
-    }
-  }
-
-  th.ordinal {
-    width: $width;
-    padding-left: 0;
-    a {
-      width: $width;
-      height: 3rem;
-    }
-    a::after {
-      right: 0;
-    }
-  }
-
-  td.ordinal {
-    width: $width;
-    padding-left: 0;
-    cursor: grab;
-    text-align: center;
-  }
-}