@ngx-stoui/core 15.0.1 → 16.0.1

package/style/datatable/ngx-datatable.scss

@@ -1,398 +1,400 @@
-@import "ngx-datatable-compact";
-@import "ngx-datatable-form";
-
-.ngx-datatable.sto-datatable {
-  border-radius: 2px;
-  margin-bottom: 4px;
-
-  .datatable-header {
-
-    .datatable-header-cell {
-      padding: 16px 8px 4px 8px;
-      line-height: 13px;
-      font-weight: 400;
-      vertical-align: baseline;
-      -webkit-user-select: none; /* Safari */
-      -moz-user-select: none; /* Firefox */
-      -ms-user-select: none; /* IE10+/Edge */
-      user-select: none; /* Standard */
-
-
-      .datatable-header-cell-wrapper {
-        position: relative;
-      }
-
-      .draggable::after {
-        content: " ";
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        margin: -30px 0 0 -30px;
-        height: 60px;
-        width: 60px;
-        border-radius: 100%;
-        opacity: 1;
-        filter: none;
-        transform: scale(0);
-        z-index: 9999;
-        pointer-events: none;
-      }
-
-      &.dragging {
-        .resize-handle {
-          border-right: none;
-        }
-      }
-
-    }
-
-    .resize-handle {
-      border-right: solid 1px #eee;
-    }
-
-  }
-
-  .datatable-body {
-
-    .datatable-body-cell-label {
-      line-height: 20px;
-    }
-
-    .datatable-body-row {
-
-      .datatable-body-cell {
-        padding: 8px;
-        vertical-align: top;
-        border-top: 0;
-        transition: width 0.3s ease, box-shadow 250ms linear;
-      }
-    }
-
-    .progress-linear {
-      display: block;
-      position: sticky;
-      width: 100%;
-      height: 5px;
-      padding: 0;
-      margin: 0;
-      top: 0;
-      left: 0;
-
-      .container {
-        display: block;
-        position: relative;
-        overflow: hidden;
-        width: 100%;
-        height: 5px;
-        -webkit-transform: translate(0, 0) scale(1, 1);
-        transform: translate(0, 0) scale(1, 1);
-        // background-color: rgb(170, 209, 249);
-
-        .bar {
-          transition: all 0.2s linear;
-          -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
-          animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
-
-          transition: -webkit-transform 0.2s linear;
-          transition: transform 0.2s linear;
-          // background-color: rgb(16, 108, 200);
-
-          position: absolute;
-          left: 0;
-          top: 0;
-          bottom: 0;
-          width: 100%;
-          height: 5px;
-        }
-      }
-    }
-
-  }
-
-  .empty-row {
-    height: 50px;
-    text-align: left;
-    padding: 8px;
-    vertical-align: top;
-    border-top: 0;
-  }
-
-  .loading-row {
-    text-align: left;
-    padding: 8px;
-    vertical-align: top;
-    border-top: 0;
-  }
-
-  .datatable-footer {
-
-    .page-count {
-      line-height: 50px;
-      height: 50px;
-      padding: 0 1.2rem;
-    }
-
-  }
-
-  &.single-selection {
-    .datatable-body-row {
-      cursor: pointer;
-    }
-  }
-
-}
-
-.datatable-body-cell-label {
-  > span {
-    display: inline-block;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .mat-select, .mat-input {
-    padding: 0;
-    // font-size: $font-size; // TODO Typography
-  }
-
-  .mat-select-value {
-  }
-
-  .mat-select-trigger {
-    // font-size: $font-size;
-  }
-
-  .mat-form-field-infix {
-    margin-top: -10px;
-    padding: 0 9px 0 0;
-
-  }
-
-  .mat-input-underline {
-    //display: none;
-  }
-
-  .mat-icon-button {
-    margin-left: -8px;
-    margin-top: -18px;
-    height: 36px;
-    width: 36px;
-    line-height: 36px;
-  }
-}
-
-.datatable-header {
-  .mat-input-infix {
-    padding: 4px 0;
-  }
-
-  .mat-form-field {
-    font-size: 13px; // TODO Typography
-    margin-top: -4px;
-  }
-}
-
-.sto-datatable__column {
-  &--number {
-    text-align: right;
-  }
-
-  &--expandable {
-    .icon-wrapper {
-      display: inline-block;
-
-      .mat-icon {
-        margin-top: -5px;
-      }
-    }
-  }
-
-}
-
-
-.ngx-datatable.sto-datatable .datatable-header .datatable-header-cell .sort-btn {
-  line-height: 0;
-  vertical-align: bottom;
-}
-
-span.sortable {
-  cursor: pointer;
-}
-
-.sto-datatable.ngx-datatable {
-
-  .datatable-body {
-    -moz-transition: height 225ms cubic-bezier(0.4, 0.0, 0.2, 1);
-    -webkit-transition: height 225ms cubic-bezier(0.4, 0.0, 0.2, 1);
-    -o-transition: height 225ms cubic-bezier(0.4, 0.0, 0.2, 1);
-    transition: height 225ms cubic-bezier(0.4, 0.0, 0.2, 1);
-  }
-
-}
-
-.ngx-datatable.sto-datatable .datatable-header .datatable-header-column-group .datatable-header-cell {
-
-  &.sto-datatable__header-group {
-    border-bottom: 0;
-
-    &--empty {
-      color: transparent;
-    }
-
-    &--center {
-      text-align: center;
-    }
-
-    &__border--hide-left {
-      border-left: 0;
-    }
-
-    &__border--hide-right {
-      border-right: 0;
-    }
-  }
-}
-
-.ngx-datatable.sto-datatable .datatable-header .datatable-header-cell {
-  &.sto-datatable__header--dense {
-    padding-top: 8px;
-  }
-
-  &.sto-datatable__header--empty {
-    color: transparent;
-  }
-}
-
-.sto-datatable__border--right {
-}
-
-.sto-datatable__border--left {
-}
-
-.ngx-datatable.sto-datatable {
-  .datatable-header-cell {
-    .mat-icon.mat-icon-sort {
-      line-height: 13px; // TODO TYpography
-      height: 13px;
-    }
-  }
-}
-
-
-.sto-datatable-wrapper {
-  border-radius: 2px;
-
-  .sto-panel-content {
-    border-radius: 2px;
-  }
-}
-
-.datatable-footer-summary-row {
-  :hover {
-    background-color: transparent;
-  }
-}
-
-[data-icon]:before {
-  font-family: "Material Icons" !important;
-  content: attr(data-icon);
-  font-style: normal !important;
-  font-weight: normal !important;
-  font-variant: normal !important;
-  text-transform: none !important;
-  speak: none;
-  font-size: 24px;
-  line-height: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-[class^="datatable-icon-"]:before,
-[class*=" datatable-icon-"]:before {
-  font-family: "Material Icons" !important;
-  font-style: normal !important;
-  font-weight: normal !important;
-  font-variant: normal !important;
-  text-transform: none !important;
-  speak: none;
-  line-height: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.datatable-icon-filter:before {
-  content: "filter_list";
-}
-
-.datatable-icon-collapse:before {
-  content: "expand_less";
-}
-
-.datatable-icon-expand:before {
-  content: "expand_more";
-}
-
-.datatable-icon-close:before {
-  content: "close";
-}
-
-.datatable-icon-up:before {
-  content: "arrow_drop_up";
-}
-
-.datatable-icon-down:before {
-  content: "arrow_drop_down";
-}
-
-.datatable-icon-sort:before {
-  content: "sort_by_alpha";
-}
-
-.datatable-icon-done:before {
-  content: "done";
-}
-
-.datatable-icon-done-all:before {
-  content: "done_all";
-}
-
-.datatable-icon-search:before {
-  content: "search";
-}
-
-.datatable-icon-pin:before {
-  content: "push_pin";
-}
-
-.datatable-icon-add:before {
-  content: "add";
-}
-
-.datatable-icon-left:before {
-  content: "keyboard_arrow_left";
-}
-
-.datatable-icon-right:before {
-  content: "keyboard_arrow_right";
-}
-
-.datatable-icon-skip:before {
-  content: "skip_next";
-}
-
-.datatable-icon-prev:before {
-  content: "skip_previous";
-}
-
-
-@keyframes query {
-  0% {
-    opacity: 1;
-    transform: translateX(35%) scale(0.3, 1);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateX(-50%) scale(0, 1);
-  }
-}
+@import 'ngx-datatable-compact';
+@import 'ngx-datatable-form';
+
+.ngx-datatable.sto-datatable {
+  border-radius: 2px;
+  margin-bottom: 4px;
+
+  .datatable-header {
+    .datatable-header-cell {
+      padding: 16px 8px 4px 8px;
+      line-height: 13px;
+      font-weight: 400;
+      vertical-align: baseline;
+      -webkit-user-select: none; /* Safari */
+      -moz-user-select: none; /* Firefox */
+      -ms-user-select: none; /* IE10+/Edge */
+      user-select: none; /* Standard */
+
+      .datatable-header-cell-wrapper {
+        position: relative;
+      }
+
+      .draggable::after {
+        content: ' ';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin: -30px 0 0 -30px;
+        height: 60px;
+        width: 60px;
+        border-radius: 100%;
+        opacity: 1;
+        filter: none;
+        transform: scale(0);
+        z-index: 9999;
+        pointer-events: none;
+      }
+
+      &.dragging {
+        .resize-handle {
+          border-right: none;
+        }
+      }
+      .mat-mdc-checkbox {
+        --mdc-checkbox-state-layer-size: 18px;
+        margin-left: 11px;
+      }
+    }
+
+    .resize-handle {
+      border-right: solid 1px #eee;
+    }
+  }
+
+  .datatable-body {
+    .datatable-body-cell-label {
+      line-height: 20px;
+    }
+
+    .datatable-body-row {
+      .datatable-body-cell {
+        --mdc-checkbox-state-layer-size: 35px;
+        padding: 8px;
+        vertical-align: top;
+        border-top: 0;
+        transition: width 0.3s ease, box-shadow 250ms linear;
+        &:has(.mat-mdc-form-field),
+        &:has(.mat-mdc-checkbox) {
+          padding: 0;
+        }
+        .mat-mdc-form-field {
+          margin: 0 4px;
+          min-height: 0;
+        }
+        .mat-mdc-form-field-subscript-wrapper {
+          display: none;
+        }
+      }
+    }
+
+    .progress-linear {
+      display: block;
+      position: sticky;
+      width: 100%;
+      height: 5px;
+      padding: 0;
+      margin: 0;
+      top: 0;
+      left: 0;
+
+      .container {
+        display: block;
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+        height: 5px;
+        -webkit-transform: translate(0, 0) scale(1, 1);
+        transform: translate(0, 0) scale(1, 1);
+        // background-color: rgb(170, 209, 249);
+
+        .bar {
+          transition: all 0.2s linear;
+          -webkit-animation: query 0.8s infinite
+            cubic-bezier(0.39, 0.575, 0.565, 1);
+          animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
+
+          transition: -webkit-transform 0.2s linear;
+          transition: transform 0.2s linear;
+          // background-color: rgb(16, 108, 200);
+
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 100%;
+          height: 5px;
+        }
+      }
+    }
+  }
+
+  .empty-row {
+    height: 50px;
+    text-align: left;
+    padding: 8px;
+    vertical-align: top;
+    border-top: 0;
+  }
+
+  .loading-row {
+    text-align: left;
+    padding: 8px;
+    vertical-align: top;
+    border-top: 0;
+  }
+
+  .datatable-footer {
+    .page-count {
+      line-height: 50px;
+      height: 50px;
+      padding: 0 1.2rem;
+    }
+  }
+
+  &.single-selection {
+    .datatable-body-row {
+      cursor: pointer;
+    }
+  }
+}
+
+.datatable-body-cell-label {
+  > span {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+.datatable-body-cell .sto-form__field {
+  .mat-mdc-form-field-infix {
+    padding: 0 9px 0 0;
+    border-top: 0;
+  }
+  .mat-select,
+  .mat-input {
+    padding: 0;
+    // font-size: $font-size; // TODO Typography
+  }
+
+  .mat-select-value {
+  }
+
+  .mat-select-trigger {
+    // font-size: $font-size;
+  }
+
+  .mat-icon-button {
+    margin-left: -8px;
+    margin-top: -18px;
+    height: 36px;
+    width: 36px;
+    line-height: 36px;
+  }
+}
+
+.datatable-header {
+  .mat-input-infix {
+    padding: 4px 0;
+  }
+
+  .mat-form-field {
+    font-size: 13px; // TODO Typography
+    margin-top: -4px;
+  }
+}
+
+.sto-datatable__column {
+  &--number {
+    text-align: right;
+  }
+
+  &--expandable {
+    .icon-wrapper {
+      display: inline-block;
+
+      .mat-icon {
+        margin-top: -5px;
+      }
+    }
+  }
+}
+
+.ngx-datatable.sto-datatable
+  .datatable-header
+  .datatable-header-cell
+  .sort-btn {
+  line-height: 0;
+  vertical-align: bottom;
+}
+
+span.sortable {
+  cursor: pointer;
+}
+
+.sto-datatable.ngx-datatable {
+  .datatable-body {
+    -moz-transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1);
+    -webkit-transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1);
+    -o-transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1);
+    transition: height 225ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+
+.ngx-datatable.sto-datatable
+  .datatable-header
+  .datatable-header-column-group
+  .datatable-header-cell {
+  &.sto-datatable__header-group {
+    border-bottom: 0;
+
+    &--empty {
+      color: transparent;
+    }
+
+    &--center {
+      text-align: center;
+    }
+
+    &__border--hide-left {
+      border-left: 0;
+    }
+
+    &__border--hide-right {
+      border-right: 0;
+    }
+  }
+}
+
+.ngx-datatable.sto-datatable .datatable-header .datatable-header-cell {
+  &.sto-datatable__header--dense {
+    padding-top: 8px;
+  }
+
+  &.sto-datatable__header--empty {
+    color: transparent;
+  }
+}
+
+.sto-datatable__border--right {
+}
+
+.sto-datatable__border--left {
+}
+
+.ngx-datatable.sto-datatable {
+  .datatable-header-cell {
+    .mat-icon.mat-icon-sort {
+      line-height: 13px; // TODO TYpography
+      height: 13px;
+    }
+  }
+}
+
+.sto-datatable-wrapper {
+  border-radius: 2px;
+
+  .sto-panel-content {
+    border-radius: 2px;
+  }
+}
+
+.datatable-footer-summary-row {
+  :hover {
+    background-color: transparent;
+  }
+}
+
+[data-icon]:before {
+  font-family: 'Material Icons' !important;
+  content: attr(data-icon);
+  font-style: normal !important;
+  font-weight: normal !important;
+  font-variant: normal !important;
+  text-transform: none !important;
+  speak: none;
+  font-size: 24px;
+  line-height: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+[class^='datatable-icon-']:before,
+[class*=' datatable-icon-']:before {
+  font-family: 'Material Icons' !important;
+  font-style: normal !important;
+  font-weight: normal !important;
+  font-variant: normal !important;
+  text-transform: none !important;
+  speak: none;
+  line-height: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.datatable-icon-filter:before {
+  content: 'filter_list';
+}
+
+.datatable-icon-collapse:before {
+  content: 'expand_less';
+}
+
+.datatable-icon-expand:before {
+  content: 'expand_more';
+}
+
+.datatable-icon-close:before {
+  content: 'close';
+}
+
+.datatable-icon-up:before {
+  content: 'arrow_drop_up';
+}
+
+.datatable-icon-down:before {
+  content: 'arrow_drop_down';
+}
+
+.datatable-icon-sort:before {
+  content: 'sort_by_alpha';
+}
+
+.datatable-icon-done:before {
+  content: 'done';
+}
+
+.datatable-icon-done-all:before {
+  content: 'done_all';
+}
+
+.datatable-icon-search:before {
+  content: 'search';
+}
+
+.datatable-icon-pin:before {
+  content: 'push_pin';
+}
+
+.datatable-icon-add:before {
+  content: 'add';
+}
+
+.datatable-icon-left:before {
+  content: 'keyboard_arrow_left';
+}
+
+.datatable-icon-right:before {
+  content: 'keyboard_arrow_right';
+}
+
+.datatable-icon-skip:before {
+  content: 'skip_next';
+}
+
+.datatable-icon-prev:before {
+  content: 'skip_previous';
+}
+
+@keyframes query {
+  0% {
+    opacity: 1;
+    transform: translateX(35%) scale(0.3, 1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(-50%) scale(0, 1);
+  }
+}