raise-common-lib 0.0.57 → 0.0.60

package/src/assets/style/reset/grid.scss

@@ -4,66 +4,206 @@
   display: flex;
   flex-direction: column;
   border: 0;
-  .e-headercell {
-    height: var(--rs-grid-header-row-height);
-    .e-headercelldiv {
-      color: #44566c;
-      font-family: Arial;
-      font-size: var(--rs-grid-header-cell-font-size);
-      font-weight: 700;
-      line-height: 29px;
-      height: 29px;
-    }
-    .e-rhandler {
-      border-right: 0 !important;
-    }
-    .e-icons.e-columnmenu {
-      color: #929dab !important;
-      margin: 0;
-      padding: 0;
-      position: absolute;
-      top: 0;
-      right: 10px;
-      height: 100%;
-      display: flex;
-      align-items: center;
-    }
-    .e-checkbox-wrapper {
-      .e-icons {
+
+  .e-gridheader {
+    height: auto;
+    border-top: none;
+    border-bottom: none;
+
+    .e-headercell {
+      &:first-child {
+        padding-left: 8px;
+      }
+      height: 32px;
+      padding: 4px 8px;
+      --header-column-width: 0px;
+      --header-sort-width: 0px;
+
+      &.e-defaultcursor:first-child + .e-headercell {
+        padding-left: 0;
+      }
+
+      &.e-freezeleftborder {
+        border: none;
+      }
+
+      .e-rhandler {
+        border-right: 0 !important;
+      }
+
+      .e-icons.e-columnmenu {
+        position: absolute;
+        top: 50%;
+        right: 8px;
+        transform: translateY(-50%);
+        padding: 4px;
+        border-radius: 4px;
         margin: 0;
-        display: none;
-        &.e-check,
-        &.e-stop {
+        float: unset;
+      }
+      .e-checkbox-wrapper {
+        .e-icons {
+          margin: 0;
+          display: none;
+          &.e-check,
+          &.e-stop {
+            display: inline-block;
+            color: #fff !important;
+            background-color: var(--rs-active-color);
+            border-color: var(--rs-active-color);
+          }
+        }
+      }
+      &:hover {
+        .e-checkbox-wrapper .e-icons {
           display: inline-block;
-          color: #fff !important;
-          background-color: var(--rs-active-color);
-          border-color: var(--rs-active-color);
         }
       }
-    }
-    &:hover {
-      .e-checkbox-wrapper .e-icons {
-        display: inline-block;
+
+      .e-headercelldiv {
+        height: 24px;
+        padding: 4px;
+        padding-right: calc(
+          4px + var(--header-column-width) + var(--header-sort-width)
+        );
+        margin: 0 !important;
+
+        border-radius: 4px;
+
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+        align-items: center;
+
+        color: #44566c;
+        font-family: Arial;
+        font-size: var(--rs-grid-header-cell-font-size);
+        font-weight: 700;
+
+        &:hover {
+          background-color: rgba(31, 123, 255, 0.04);
+        }
+
+        &.e-headerchkcelldiv {
+          padding: 0;
+
+          .e-checkbox-wrapper {
+            width: 100%;
+            position: static;
+
+            display: flex;
+            flex-flow: row nowrap;
+            justify-content: center;
+            align-items: center;
+
+            .e-label {
+              display: none;
+            }
+          }
+        }
+
+        .e-headertext {
+          display: block;
+          width: 100%;
+          overflow: hidden;
+        }
+      }
+
+      &.e-ellipsistooltip .e-headercelldiv .e-headertext {
+        text-overflow: ellipsis;
+      }
+
+      .e-sortfilterdiv {
+        float: none;
+        clear: both;
+
+        width: 16px;
+        height: 16px;
+        padding: 0;
+        margin: 0;
+
+        position: absolute;
+        top: 50%;
+        right: 32px;
+        transform: translateY(-50%);
+
+        &.e-ascending::before,
+        &.e-descending::before {
+          content: " ";
+          display: block;
+          width: 16px;
+          height: 16px;
+          background-image: url("/assets/img/table-sort-arrow.svg");
+          background-repeat: no-repeat;
+          background-position: center center;
+        }
+
+        &.e-ascending::before {
+          transform: rotate(180deg);
+        }
+      }
+
+      &[aria-sort]:not(.e-rightalign):not([aria-sort="none"]) {
+        --header-sort-width: 16px;
+      }
+
+      &.e-mousepointer {
+        --header-column-width: 24px;
+      }
+
+      &.e-rightalign {
+        .e-headercelldiv {
+          justify-content: flex-end;
+        }
+
+        &[aria-sort]:not([aria-sort="none"]) .e-headercelldiv {
+          padding-left: 20px;
+        }
+
+        .e-sortfilterdiv {
+          right: auto;
+          left: 8px;
+        }
+      }
+
+      .e-headerchkcelldiv + .e-sortfilterdiv {
+        display: none;
+      }
+
+      .e-columnmenu {
+        position: absolute;
+        top: 50%;
+        right: 8px;
+        transform: translateY(-50%);
+
+        padding: 4px;
+        border-radius: 4px;
+
+        &:hover {
+          background-color: rgba(31, 123, 255, 0.08);
+        }
+
+        &::before {
+          content: url("/assets/img/table-column-menu.svg");
+          display: block;
+          width: 16px;
+          height: 16px;
+        }
+      }
+
+      &:not(.e-rcursor):hover .e-rhandler {
+        width: 8px;
+        border-right: 1px solid #dbe1e7;
+
+        &:hover {
+          border-color: #1f7bff;
+        }
       }
     }
   }
-  .e-gridheader {
-    border-bottom-color: transparent;
-    padding-right: 5px;
-  }
-  .e-gridheader .e-fltr-icon .e-sortfilterdiv {
-    color: #929dab !important;
-    font-size: 13px !important;
-    margin: 0;
-    position: absolute;
-    right: 30px;
-    top: 0;
-    height: 100%;
-    display: flex;
-    align-items: center;
-  }
   .e-rowcell {
-    padding: 2px 8px 3px;
+    padding: 2px 12px;
+
     &:not(.e-editedbatchcell):not(.e-updatedtd) {
       color: var(--rs-text-color);
       font-family: Arial;
@@ -85,17 +225,34 @@
       display: none;
     }
     .e-checkbox-wrapper {
+      width: 100%;
+      position: static;
+
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: center;
+      align-items: center;
+
+      .e-label {
+        display: none;
+      }
       .e-icons.e-check {
         color: #fff !important;
         background-color: var(--rs-active-color);
         border-color: var(--rs-active-color);
       }
     }
+    &.e-gridchkbox {
+      padding: 0;
+      &:first-child + .e-rowcell {
+        padding-left: 4px;
+      }
+    }
   }
-  .e-gridchkbox{
+  .e-gridchkbox {
     &.e-active {
       .e-checkbox-wrapper {
-        display: block;
+        display: flex;
       }
     }
     .e-checkbox-wrapper {
@@ -108,7 +265,7 @@
     ):not(.e-indentcell) {
     background-color: var(--rs-grid-row-hover-bg) !important; // hover bg
     .e-checkbox-wrapper {
-      display: block;
+      display: flex;
     }
     .rowcell-menu {
       display: block;
@@ -133,82 +290,236 @@
       overflow: auto;
     }
   }
-}
-.e-pager {
-  padding: 12px 0;
-  height: 48px;
-  font-family: Arial;
-  border: 0;
-  .e-pp,
-  .e-pp:hover,
-  .e-np,
-  .e-np:hover,
-  .e-parentmsgbar {
-    padding: 0 !important;
-  }
-  .e-icons {
-    padding: 5px !important;
-    min-width: 20px !important;
-    border: 0 !important;
+
+  .first-action-column {
+    display: inline-flex;
+    flex-flow: row nowrap;
+    align-items: center;
+
+    width: 100%;
+
+    .first-column-text {
+      flex: auto;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &.flex-text {
+        display: flex;
+        flex-flow: row nowrap;
+      }
+
+      .first-column-alert {
+        width: 4px;
+        margin-right: 8px;
+        color: red;
+      }
+    }
   }
-  .e-pagercontainer,
-  .e-parentmsgbar {
-    line-height: 24px;
+}
+.e-gridpager {
+  position: relative;
+  padding: 12px 0 0;
+
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 16px;
+
+  .e-pagercontainer {
+    margin: 0;
     border: 0;
-    color: #929dab;
-    font-size: 10px;
-  }
-  .e-numericitem {
-    &:hover {
-      padding: 0 !important;
-    }
-    &.e-active {
-      color: #1f3f5c;
+
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+
+    .e-icons,
+    .e-spacing {
+      width: 24px;
+      min-width: 24px;
+      height: 24px;
+
+      border: none;
       border-radius: 6px;
-      border: 1px solid rgba(31, 123, 255, 0.66);
+
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: center;
+      align-items: center;
+
+      color: #6c7c90;
+      font-family: Arial;
+      font-size: 11px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 14px;
+
+      &:hover,
+      &.e-focused {
+        background-color: #1f7bff0a;
+      }
+
+      &.e-disable {
+        opacity: 0.3;
+        cursor: not-allowed;
+      }
     }
-    &.e-focused {
-      background: #fff !important;
-      box-shadow: none !important;
+
+    .e-icons {
+      &::before {
+        display: block;
+        width: 16px;
+        height: 16px;
+      }
+
+      &.e-first::before {
+        content: url("/assets/img/grid-pager-arrows-left.svg");
+      }
+
+      &.e-prev {
+        margin: 0 16px 0 12px;
+
+        &::before {
+          content: url("/assets/img/grid-pager-arrow-left.svg");
+        }
+      }
+
+      &.e-next {
+        margin: 0 12px 0 16px;
+
+        &::before {
+          content: url("/assets/img/grid-pager-arrow-left.svg");
+          transform: rotate(180deg);
+        }
+      }
+
+      &.e-last::before {
+        content: url("/assets/img/grid-pager-arrows-left.svg");
+        transform: rotate(180deg);
+      }
     }
-    min-width: 24px;
-    width: 24px;
-    height: 24px;
-    padding: 0 !important;
-    line-height: 24px !important;
-    border: 0;
-    color: #6c7c90;
-    font-size: 12px;
-  }
-  .e-numericcontainer {
-    div {
-      height: 24px;
+
+    .e-spacing {
+      &.e-pp {
+        margin-right: 12px;
+      }
+
+      &.e-np {
+        margin-left: 12px;
+      }
+
+      &.e-pp.e-disable,
+      &.e-np.e-disable {
+        display: none;
+      }
     }
-    .e-currentitem {
-      padding: 0;
-      background: #fff;
+
+    .e-numericcontainer {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: center;
+      align-items: center;
+
+      .e-numericitem {
+        border: 1px solid transparent;
+
+        &.e-currentitem {
+          border-color: #1f7bff66;
+          background-color: #fff;
+        }
+      }
+
+      div:not(:first-child) > .e-numericitem {
+        margin-left: 12px;
+      }
     }
   }
-  .e-pagerconstant {
-    margin: 0 0 0 16px;
-    line-height: 24px;
+
+  .e-parentmsgbar {
+    float: none;
+    clear: both;
+
+    height: auto;
+    padding: 0;
+
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+
     color: #929dab;
-    font-size: 11px;
-  }
-  div.e-icons.e-pager-default {
-    color: #6b6b6b;
-  }
-  .e-icons:not(.e-btn-icon) {
-    color: #adb5bd;
-  }
-  .e-currentitem {
-    font-size: 11px;
     font-family: Arial;
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
   }
 
-  .e-pagerdropdown {
-    height: 24px !important;
-    margin-top: -14px;
+  .e-pagesizes {
+    height: 24px;
+
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: 8px;
+
+    .e-pagerdropdown {
+      margin: 0;
+      width: 60px;
+      height: 24px;
+
+      .e-input-group {
+        height: 24px;
+        padding: 0 0 0 8px;
+
+        border-radius: 4px;
+        border: 1px solid #eaedf0;
+        background-color: #fff;
+
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        &.e-icon-anim,
+        &:focus-within {
+          border-color: #1f7bffb8;
+          box-shadow: none;
+        }
+
+        &:hover {
+          border-color: #1f7bff80;
+          box-shadow: 0px 0px 3px 0px #1f7bff66;
+        }
+
+        &.e-icon-anim:hover,
+        &:not(.e-disabled):focus-within:hover {
+          border-color: #1f7bffb8;
+        }
+
+        .e-input {
+          height: 100%;
+          padding: 0;
+
+          color: #062c4f !important;
+          font-family: Arial;
+          font-size: 11px !important;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 12px;
+        }
+      }
+    }
+
+    .e-pagerconstant {
+      margin: 0;
+
+      color: #929dab;
+      font-family: Arial;
+      font-size: 11px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 12px;
+    }
   }
 }
 .e-grid-menu {
@@ -274,9 +585,42 @@
   }
   .e-footer-content {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
     .e-btn {
-      margin-left: 0;
+      font-family: var(--rs-font-family);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 6px;
+      font-style: normal;
+      border: 1px solid #adb5bd !important;
+      background: transparent !important;
+      color: var(--rs-cancel-btn-color) !important;
+      height: 32px;
+      min-width: 80px;
+      padding: 0 10px;
+      font-size: 12px;
+      border-radius: 4px;
+      box-shadow: none !important;
+      line-height: normal;
+      &.e-primary {
+        color: #fff !important;
+        border-color: var(--rs-primary-btn-bg) !important;
+        background: var(--rs-primary-btn-bg) !important;
+        font-weight: 700;
+        &:not([disabled]):hover,
+        &:not([disabled]):active,
+        &:not([disabled]):focus {
+          border-color: var(--rs-primary-btn-hover-bg) !important;
+          background: var(--rs-primary-btn-hover-bg) !important;
+          color: #fff !important;
+        }
+        &[disabled] {
+          color: #fff !important;
+          background: var(--rs-primary-btn-bg) !important;
+          border-color: var(--rs-primary-btn-bg) !important;
+        }
+      }
     }
   }
 }