raise-common-lib-new 0.0.26 → 0.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "raise-common-lib-new",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "peerDependencies": {
     "@angular/common": "^16.0.0",
     "@angular/core": "^16.0.0"

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

@@ -5,7 +5,7 @@
   display: flex;
   flex-direction: column;
   border: 0;
-  .e-spinner-pane{
+  .e-spinner-pane {
     display: none !important; // 隐藏默认的loading spinner
   }
   .e-gridheader {
@@ -437,46 +437,90 @@
     }
   }
 }
-.e-gridpager {
-  padding: 12px 0 0;
-}
-.e-pager {
-  position: relative;
 
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  gap: 16px;
+.e-pager {
+  padding: 12px 0 0 !important;
   border: 0;
+  div {
+    vertical-align: middle;
+  }
+  .e-icons {
+    border: none;
+    border-radius: 6px;
+    padding: 4px !important;
+
+    margin-right: 6px;
+    &:hover,
+    &.e-focused {
+      background-color: #1f7bff0a;
+    }
+    &.e-disable {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+    &::before {
+      display: block;
+      width: 16px;
+      height: 16px;
+    }
+    &.e-first,
+    &.e-mfirst {
+      @media (max-width: 769px) {
+        width: auto;
+        min-width: 26px;
+      }
+      &::before {
+        content: url("/assets/img/grid-pager-arrows-left.svg");
+      }
+    }
+
+    &.e-prev,
+    &.e-mprev {
+      margin: 0 16px 0 6px;
+      @media (max-width: 769px) {
+        width: auto;
+        min-width: 26px;
+      }
+      &::before {
+        content: url("/assets/img/grid-pager-arrow-left.svg");
+      }
+    }
+
+    &.e-next,
+    &.e-mnext {
+      margin: 0 12px 0 10px !important;
+      @media (max-width: 769px) {
+        width: auto;
+        min-width: 26px;
+      }
+      &::before {
+        content: url("/assets/img/grid-pager-arrow-left.svg");
+        transform: rotate(180deg);
+      }
+    }
+    &.e-last,
+    &.e-mlast {
+      @media (max-width: 769px) {
+        width: auto;
+        min-width: 26px;
+      }
+      &::before {
+        content: url("/assets/img/grid-pager-arrows-left.svg");
+        transform: rotate(180deg);
+      }
+    }
+  }
 
   .e-pagercontainer {
-    margin: 0;
     border: 0;
-
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
+    vertical-align: middle;
 
     .e-icons,
     .e-spacing {
-      min-width: 24px;
-      height: 24px;
-
       border: none;
       border-radius: 6px;
-
-      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;
-
+      padding: 4px;
+      margin-right: 6px;
       &:hover,
       &.e-focused {
         background-color: #1f7bff0a;
@@ -488,40 +532,6 @@
       }
     }
 
-    .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);
-      }
-    }
-
     .e-spacing {
       &.e-pp {
         margin-right: 12px;
@@ -538,56 +548,31 @@
     }
 
     .e-numericcontainer {
-      display: flex;
-      flex-flow: row nowrap;
-      justify-content: center;
-      align-items: center;
+      vertical-align: middle;
 
       .e-numericitem {
         border: 1px solid transparent;
+        padding: 4px;
+        min-width: 24px;
+        color: #44566c;
 
+        font-family: Arial;
+        font-size: 11px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 14px;
         &.e-currentitem {
           border-color: #1f7bff66;
           background-color: #fff;
         }
       }
-
-      div:not(:first-child) > .e-numericitem {
-        margin-left: 12px;
-      }
     }
   }
-
-  .e-parentmsgbar {
-    float: none;
-    clear: both;
-
-    height: auto;
-    padding: 0;
-
-    position: absolute;
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-
-    color: #929dab;
-    font-family: Arial;
-    font-size: 11px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 14px;
-  }
-
   .e-pagesizes {
-    height: 24px;
-
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    gap: 8px;
-
+    display: inline-block;
+    vertical-align: middle;
     .e-pagerdropdown {
-      margin: 0;
+      margin: 0 8px 0 6px;
       width: 60px;
       height: 24px;
 
@@ -632,16 +617,30 @@
         }
       }
     }
+  }
 
-    .e-pagerconstant {
-      margin: 0;
+  .e-pagerconstant {
+    vertical-align: middle;
+    margin: 0;
 
-      color: #929dab;
-      font-family: Arial;
-      font-size: 11px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 12px;
+    color: #929dab;
+    font-family: Arial;
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 12px;
+  }
+  .e-parentmsgbar {
+    color: #929dab;
+    font-family: Arial;
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    padding-top: 4px !important;
+    padding-bottom: 0 !important;
+    @media (max-width: 769px) {
+      width: auto !important;
     }
   }
 }