ngx-easy-table-plus 15.7.0

package/style.scss

@@ -0,0 +1,616 @@
+$grey: #e7e9ed;
+$grey-lighter: #f6f7f9;
+$grey-dark: #f3f3f3;
+$dark: #50596c;
+$blue: #3f86ca;
+$primary-color: #50596c !default;
+/*! Based on Spectre.css v0.4.5 | MIT License | github.com/picturepan2/spectre */
+.ngx {
+  &-container {
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+
+  &-container--dark {
+    background-color: $dark;
+  }
+
+  &-table {
+    color: $primary-color;
+    border-collapse: collapse;
+    border-spacing: 0;
+    display: table;
+    font-family: Montserrat, Verdana, serif;
+    font-size: 14px;
+    text-align: left;
+    width: 100%;
+
+    td {
+      border-bottom: 1px solid $grey;
+      padding: 12px 6px;
+    }
+
+    th {
+      padding: 12px 6px;
+      border-bottom: 2px solid $grey;
+    }
+
+    &__table-row--selected,
+    &__table-col--selected,
+    &__table-cell--selected {
+      background: $grey !important;
+    }
+
+    &__table-no-results {
+      text-align: center;
+    }
+
+    &__table-loader-wrapper {
+      display: flex;
+      justify-content: center;
+      margin-top: 50px;
+    }
+
+    &__body-loading:hover {
+      background: 0 !important;
+    }
+
+    &__table-loader {
+      animation: spin 0.6s linear infinite;
+      border: 1px solid $grey;
+      border-radius: 50%;
+      border-top-color: $primary-color;
+      height: 1.8rem;
+      width: 1.8rem;
+    }
+
+    &__body-empty {
+    }
+
+    &__search-header {
+    }
+
+    &__table-menu {
+    }
+
+    &__table-row-context-menu {
+      position: absolute;
+    }
+
+    &__header {
+    }
+
+    &__header-cell-additional-actions {
+    }
+
+    &__header-search {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      background: #fff none;
+      border: 0.05rem solid $grey;
+      border-radius: 0.1rem;
+      color: $primary-color;
+      display: block;
+      font-size: 0.8rem;
+      height: 1.47rem;
+      line-height: 1rem;
+      max-width: 100%;
+      outline: 0;
+      padding: 0.15rem 0.3rem;
+      position: relative;
+      width: 97%;
+    }
+
+    &__header-cell {
+      position: relative;
+
+      .pointer {
+        cursor: pointer;
+      }
+    }
+
+    &__horizontal-scroll {
+      display: block;
+      overflow-x: scroll;
+      white-space: nowrap;
+
+      &::-webkit-scrollbar {
+        -webkit-appearance: none;
+        width: 3px;
+        height: 10px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: grey;
+      }
+    }
+
+    &__column-resizer {
+      background-color: $grey;
+      cursor: col-resize;
+      display: block;
+      height: 20px;
+      margin-top: 10px;
+      position: absolute;
+      padding: 0;
+      right: 0;
+      top: 0;
+      width: 2px;
+    }
+
+    &__table--borderless > {
+      tbody > tr > td,
+      thead > tr > th {
+        border-bottom: 0 !important;
+      }
+    }
+
+    &__table--hoverable > tbody tr:hover {
+      background: $grey-lighter;
+    }
+
+    &__table--striped > tbody tr:nth-of-type(odd) {
+      background: $grey-lighter;
+    }
+
+    &__table--tiny > {
+      tbody > tr > td,
+      thead > tr > th {
+        border-bottom: 1px solid $grey;
+        padding: 4px 7px;
+      }
+    }
+
+    &__table--normal > {
+      tbody > tr > td,
+      thead > tr > th {
+        border-bottom: 1px solid $grey;
+        padding: 10px 6px;
+      }
+    }
+
+    &__table--big > {
+      tbody > tr > td,
+      thead > tr > th {
+        border-bottom: 1px solid $grey;
+        padding: 12px 8px;
+      }
+    }
+
+    &__table--dark {
+      background-color: $dark;
+      color: $grey-lighter;
+
+      & > tbody tr:hover {
+        color: $dark;
+      }
+
+      &.ngx-table__table--striped > tbody tr:nth-of-type(odd) {
+        background: #5f697d;
+      }
+
+      &-pagination {
+        & ::ng-deep .ngx-pagination .current {
+          background: $grey-lighter;
+          color: $dark;
+        }
+
+        & ::ng-deep pagination-template > ul {
+          -webkit-padding-start: 0;
+          -webkit-margin-before: 0;
+        }
+
+        & ::ng-deep pagination-template > ul > li {
+          border: 1px solid $grey;
+          background: $dark;
+        }
+
+        & ::ng-deep pagination-template > ul > li.current {
+          border: 1px solid $dark;
+        }
+
+        & ::ng-deep pagination-template > ul > li > a {
+          color: $grey-lighter;
+        }
+
+        &-wrapper {
+          background-color: $dark;
+        }
+
+        &-range {
+          & > #rowAmount > div > div {
+            color: $grey;
+            border: 1px solid $grey;
+            background-color: $dark;
+          }
+
+          & > #rowAmount > div > ul {
+            color: $grey;
+            background-color: $dark;
+          }
+
+          & > #rowAmount > div > ul > li {
+            color: $grey;
+            background-color: $dark;
+          }
+        }
+      }
+    }
+
+    &__header-title {
+      display: inline;
+    }
+  }
+
+  &-menu {
+    background: #fff;
+    border: 1px solid $grey;
+    list-style: none;
+    margin: 0;
+    min-width: 60px;
+    z-index: 100;
+  }
+
+  &-form-icon {
+    border-radius: 0.1rem;
+    background: #fff;
+    height: 0.9rem;
+    left: 0;
+    top: 0.2rem;
+    width: 0.9rem;
+    transition: all 0.2s ease;
+    border: 0.05rem solid $grey;
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+  }
+
+  &-form-checkbox {
+    line-height: 1rem;
+    margin: 0.2rem 0;
+    min-height: 1.2rem;
+    padding: 0.2rem 0.4rem 0.4rem 1rem;
+    position: relative;
+
+    input {
+      clip: rect(0, 0, 0, 0);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      position: absolute;
+      width: 1px;
+
+      &:focus + .ngx-form-icon {
+        box-shadow: 0 0 0 0.1rem rgba($blue, 0.2);
+        border-color: $blue;
+      }
+
+      &:checked + .ngx-form-icon {
+        background: $blue;
+        border-color: $blue;
+      }
+
+      &:active + .ngx-form-icon {
+        background: $dark;
+      }
+
+      &:checked + .ngx-form-icon {
+        &::before {
+          background-clip: padding-box;
+          border: 0.1rem solid #fff;
+          border-left-width: 0;
+          border-top-width: 0;
+          content: '';
+          height: 12px;
+          left: 50%;
+          margin-left: -3px;
+          margin-top: -8px;
+          position: absolute;
+          top: 50%;
+          transform: rotate(45deg);
+          width: 6px;
+        }
+      }
+    }
+  }
+
+  &-icon {
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-block;
+    font-size: inherit;
+    font-style: normal;
+    height: 1em;
+    position: relative;
+    text-indent: -9999px;
+    vertical-align: middle;
+    width: 1em;
+
+    &::before,
+    &::after {
+      content: '';
+      display: block;
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &-icon-arrow-down::before,
+  &-icon-arrow-right::before,
+  &-icon-arrow-up::before {
+    border: 0.1rem solid $dark;
+    border-bottom: 0;
+    border-right: 0;
+    height: 0.65em;
+    width: 0.65em;
+  }
+
+  &-icon-arrow-down::before {
+    transform: translate(-50%, -75%) rotate(225deg);
+  }
+
+  &-icon-arrow-right::before {
+    transform: translate(-75%, -50%) rotate(135deg);
+  }
+
+  &-icon-arrow-up::before {
+    transform: translate(-50%, -25%) rotate(45deg);
+  }
+
+  &-icon-menu::before {
+    background: $dark;
+    box-shadow: 0 -0.35em, 0 0.35em;
+    content: '';
+    height: 0.1rem;
+    width: 100%;
+  }
+
+  &-icon-pin {
+    border-radius: 50%;
+    border: 4px solid $dark;
+    width: 11px;
+    height: 11px;
+  }
+
+  &-icon-more::before {
+    background: $dark;
+    border-radius: 50%;
+    box-shadow: 0 -0.4em, 0 0.4em;
+    height: 3px;
+    width: 3px;
+  }
+
+  &-dropdown {
+    display: inline;
+    position: relative;
+    float: right;
+
+    .ngx-menu {
+      position: absolute;
+      top: 100%;
+      right: 0;
+      left: auto;
+    }
+
+    a {
+      color: $primary-color;
+    }
+  }
+
+  &-btn-group {
+    display: inline;
+  }
+
+  &-draggable-row {
+    cursor: move;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 1px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  background-color: white;
+  padding-top: 9px;
+  padding-left: 4px;
+  display: table;
+  table-layout: fixed;
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.ngx-draggable-row-area.cdk-drop-list-dragging .ngx-draggable-row:not(.cdk-drag-placeholder) {
+  transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.ngx-table__header-cell--draggable {
+  cursor: move;
+  background-color: white;
+}
+
+.ngx-table__header--draggable.cdk-drop-list-dragging
+  .ngx-table__header-cell--draggable:not(.cdk-drag-placeholder) {
+  transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.ngx-pagination {
+  font-family: Montserrat, Verdana, serif;
+  display: inline-block;
+  margin-left: 0;
+  margin-bottom: 1rem;
+  -webkit-padding-start: 0;
+  -webkit-margin-before: 0;
+}
+
+.ngx-pagination::before,
+.ngx-pagination::after {
+  content: ' ';
+  display: table;
+}
+
+.ngx-pagination::after {
+  clear: both;
+}
+
+.ngx-pagination li {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  margin-right: 0.0625rem;
+  border-radius: 0;
+  border: 1px solid $grey;
+}
+
+.ngx-pagination li.current {
+  border: 1px solid $dark;
+}
+
+.ngx-pagination li {
+  display: inline-block;
+}
+
+.ngx-pagination a,
+.ngx-pagination button {
+  color: $dark;
+  display: block;
+  padding: 0.1875rem 0.625rem;
+  border-radius: 0;
+}
+
+.ngx-pagination a:hover,
+.ngx-pagination button:hover {
+  background: #e6e6e6;
+}
+
+.ngx-pagination .current {
+  padding: 0.1875rem 0.625rem;
+  background: $blue;
+  color: #fefefe;
+  cursor: default;
+}
+
+.ngx-pagination .disabled {
+  padding: 0.1875rem 0.625rem;
+  color: #cacaca;
+  cursor: default;
+}
+
+.ngx-pagination .disabled:hover {
+  background: transparent;
+}
+
+.ngx-pagination a,
+.ngx-pagination button {
+  cursor: pointer;
+}
+
+.ngx-pagination .pagination-previous a::before,
+.ngx-pagination .pagination-previous.disabled::before {
+  content: '«';
+  display: inline-block;
+  margin-right: 0.5rem;
+}
+
+.ngx-pagination .pagination-next a::after,
+.ngx-pagination .pagination-next.disabled::after {
+  content: '»';
+  display: inline-block;
+  margin-left: 0.5rem;
+}
+
+.ngx-pagination .show-for-sr {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+}
+
+.ngx-pagination .small-screen {
+  display: none;
+}
+
+.ngx-pagination-wrapper {
+  margin-top: 8px;
+}
+
+.ngx-pagination-range {
+  display: inline-block;
+  float: right;
+}
+
+.ngx-pagination-steps {
+  display: inline-block;
+}
+
+.ngx-pagination-range-dropdown {
+  margin-top: 0;
+}
+
+.ngx-pagination-range-dropdown-button-item {
+  cursor: pointer;
+  color: $primary-color;
+  padding: 0.4rem;
+}
+
+.ngx-pagination-range--selected {
+  background-color: $grey-lighter;
+}
+
+.ngx-pagination-range-dropdown-button {
+  color: $primary-color;
+  border: 1px solid $grey;
+  cursor: pointer;
+  padding: 4px;
+}
+
+.pinned-left {
+  position: sticky;
+  z-index: 1;
+  background-color: white;
+  box-shadow: 2px 0 0 rgba(gray, 0.175);
+}
+
+@media screen and (max-width: 601px) {
+  .ngx-pagination.responsive .small-screen {
+    display: inline-block;
+    padding: 0.1875rem 0.625rem;
+    border-radius: 0;
+  }
+  .ngx-pagination.responsive li:not(.small-screen):not(.pagination-previous):not(.pagination-next) {
+    display: none;
+  }
+}
+
+.ngx-infinite-scroll-viewport {
+  display: block;
+  height: 250px;
+  overflow: auto;
+}
+
+.ngx-infinite-scroll-viewport tr,
+.ngx-infinite-scroll-viewport-thead {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+}