beyond-webui 1.0.98 → 1.1.1

package/theme-chalk/src/divider.scss

@@ -9,7 +9,7 @@
     height: 1px;
     width: 100%;
     margin: 24px 0;
-    border-top: 1px getCssVar('border-color') getCssVar('border-style');
+    border-top: 1px #e7ecef getCssVar('border-style');
   }
 
   @include m(vertical) {
@@ -19,7 +19,7 @@
     margin: 0 8px;
     vertical-align: middle;
     position: relative;
-    border-left: 1px getCssVar('border-color') getCssVar('border-style');
+    border-left: 1px #e7ecef getCssVar('border-style');
   }
 
   @include e(text) {

package/theme-chalk/src/form.scss

@@ -224,7 +224,7 @@ $form-item-label-top-margin-bottom: map.merge(
       }
     }
     .#{$namespace}-input__wrapper {
-      box-shadow: 0 0 0 2px getCssVar('color-danger') inset;
+      box-shadow: 0 0 0 2px getCssVar('color-danger') inset !important;
     }
     .#{$namespace}-input-group__append,
     .#{$namespace}-input-group__prepend {

package/theme-chalk/src/input.scss

@@ -569,3 +569,7 @@
     }
   }
 }
+
+.transparent-bg {
+  background: transparent;
+}

package/theme-chalk/src/message-box.scss

@@ -88,7 +88,7 @@
     cursor: pointer;
 
     .#{$namespace}-message-box__close {
-      color: #1a1f36;
+      color: #1c2b36;
       font-size: 16px;
     }
 

package/theme-chalk/src/message.scss

@@ -27,7 +27,7 @@
   display: flex;
   align-items: center;
   font-family: NotoSans, sans-serif;
-  color: #1a1f36;
+  color: #1c2b36;
 
   &.el-message--success {
     background-color: #f1f5e7;
@@ -107,7 +107,7 @@
     right: 19px;
     transform: translateY(-50%);
     cursor: pointer;
-    color: #1a1f36;
+    color: #1c2b36;
     font-size: getCssVar('message', 'close-size');
 
     &:focus {

package/theme-chalk/src/pagination.scss

@@ -37,7 +37,19 @@
   &.is-active {
     color: getCssVar('pagination-hover-color');
     cursor: default;
-    font-weight: bold;
+
+    &.number {
+      background-color: #e7ecef;
+      border-radius: 8px;
+      width: 32px;
+      height: 32px;
+      color: #1c2b36;
+      margin-right: 4px;
+
+      &:hover {
+        background-color: #f2f5f7;
+      }
+    }
 
     &.is-disabled {
       font-weight: bold;
@@ -67,6 +79,7 @@
   font-weight: normal;
   display: flex;
   align-items: center;
+  font-family: Montserrat-Medium, sans-serif;
 
   .#{$namespace}-input__inner {
     text-align: center;
@@ -102,12 +115,32 @@
 
   .btn-prev {
     margin-left: getCssVar('pagination-item-gap');
+    margin-right: 4px;
   }
 
   @include e(sizes) {
     margin-left: getCssVar('pagination-item-gap');
     font-weight: normal;
     color: getCssVar('text-color', 'regular');
+
+    .el-select {
+      .el-input {
+        min-width: 92px;
+        max-width: 100px;
+        width: auto;
+        font-size: 12px;
+        font-family: Montserrat-Medium, sans-serif;
+        color: #1c2b36;
+
+        .el-input__wrapper {
+          border-radius: 8px;
+          width: 92px;
+          padding: 1px 8px 1px 12px;
+
+
+        }
+      }
+    }
   }
 
   @include e(total) {

package/theme-chalk/src/select-dropdown.scss

@@ -28,6 +28,7 @@ $checked-icon: "data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='
   z-index: calc(#{getCssVar('index-top')} + 1);
   border-radius: getCssVar('border-radius-base');
   box-sizing: border-box;
+  font-family: Montserrat-Medium,sans-serif;
 
   @include when(multiple) {
     & .#{$namespace}-select-dropdown__item.selected {

package/theme-chalk/src/select.scss

@@ -139,6 +139,7 @@
         position: relative;
         height: inherit;
         z-index: 2;
+        margin-left: 6px;
       }
     }
 

package/theme-chalk/src/table.scss

@@ -34,6 +34,12 @@
     }
   }
 
+  tbody {
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
   &.has-footer {
     &.#{$namespace}-table--scrollable-y,
     &.#{$namespace}-table--fluid-height {
@@ -122,31 +128,45 @@
   }
 
   thead {
-    color: getCssVar('table-header-text-color');
-    font-weight: 500;
+    color: #3e5463;
+
+    th {
+      font-weight: 600;
+      font-family: Montserrat-SemiBold, sans-serif;
+
+      .table-label {
+        -webkit-line-clamp: 1;
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: inline-block;
+      }
+    }
 
     &.is-group {
       th.#{$namespace}-table__cell {
         background: getCssVar('fill-color', 'light');
       }
     }
+  }
 
-    .#{$namespace}-table__cell {
-      color: #000;
-      font-weight: bold;
-      font-family: Montserrat-Bold, sans-serif;
+  tfoot {
+    td.#{$namespace}-table__cell {
+      background-color: getCssVar('table-row-hover-bg-color');
+      color: getCssVar('table-text-color');
     }
   }
 
   .#{$namespace}-table__cell {
+    padding: map.get($table-padding, 'default');
     min-width: 0;
     box-sizing: border-box;
     text-overflow: ellipsis;
     vertical-align: middle;
     position: relative;
     text-align: left;
-    z-index: 1;
-    height: 68px;
+    z-index: getCssVar('table-index');
     @include when(center) {
       text-align: center;
     }
@@ -170,19 +190,17 @@
   }
 
   .cell {
-    display: flex;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal;
+    line-height: 20px;
+    display: block;
     align-items: center;
-    padding: 0 4px;
+    padding: 0 8px;
 
-
-    .table-label {
-      box-sizing: border-box;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: normal;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
+    &.header-cell {
+      display: flex;
     }
 
     &.#{$namespace}-tooltip {
@@ -211,10 +229,6 @@
     }
   }
 
-  th.#{$namespace}-table__cell.is-leaf {
-    border-bottom: 1px solid getCssVar('border-color-light');
-  }
-
   td.#{$namespace}-table__cell {
     border-bottom: getCssVar('table-border');
   }
@@ -226,8 +240,6 @@
   th.#{$namespace}-table__cell {
     user-select: none;
     background-color: getCssVar('table-header-bg-color');
-    height: 59px !important;
-    vertical-align: top !important;
 
     > .cell.highlight {
       color: getCssVar('color-primary');
@@ -247,9 +259,7 @@
 
   td.#{$namespace}-table__cell {
     div {
-      font-family: NotoSans-Medium, sans-serif;
-      color: #000;
-      font-weight: 500;
+      box-sizing: border-box;
     }
 
     &.gutter {
@@ -257,17 +267,13 @@
     }
   }
 
-  @include e((footer-wrapper)) {
-    border-top: getCssVar('table-border');
-  }
-
   // 拥有多级表头
   @include m((group, border)) {
     @include share-rule(border-pseudo) {
       content: '';
       position: absolute;
       background-color: getCssVar('table-border-color');
-      z-index: 3;
+      z-index: calc(getCssVar('table-index') + 2);
     }
   }
 
@@ -280,6 +286,7 @@
         top: 0;
         width: 100%;
         height: 1px;
+        z-index: calc(getCssVar('table-index') + 2);
       }
     }
 
@@ -335,8 +342,8 @@
         &.#{$namespace}-table-fixed-column--left,
         &.#{$namespace}-table-fixed-column--right {
           position: sticky !important;
-          z-index: 2;
-          background: getCssVar('bg-color');
+          background: inherit;
+          z-index: calc(getCssVar('table-index') + 1);
 
           &.is-last-column,
           &.is-first-column {
@@ -370,7 +377,7 @@
 
         &.#{$namespace}-table__fixed-right-patch {
           position: sticky !important;
-          z-index: 2;
+          z-index: calc(getCssVar('table-index') + 1);
           background: #fff;
           right: 0;
         }
@@ -380,8 +387,6 @@
 
   @include e(header-wrapper) {
     flex-shrink: 0;
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
-    z-index: 1;
     tr {
       th {
         &.#{$namespace}-table-fixed-column--left,
@@ -397,8 +402,11 @@
     border-collapse: separate;
   }
 
-  @include e((header-wrapper, footer-wrapper)) {
+  @include e((header-wrapper)) {
     overflow: hidden;
+    border-bottom: 1px solid #bbcdd8;
+    box-shadow: 0 1px 0 0 rgba(26, 26, 26, 0.07);
+    margin-bottom: 1px;
 
     & tbody td.#{$namespace}-table__cell {
       background-color: getCssVar('table-row-hover-bg-color');
@@ -406,6 +414,11 @@
     }
   }
 
+  @include e((footer-wrapper)) {
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
   @include e((header-wrapper, body-wrapper)) {
     .#{$namespace}-table-column--selection {
       > .cell {
@@ -491,8 +504,13 @@
     overflow: hidden;
     position: relative;
     flex: 1;
+    tr {
+      height: 44px;
+      font-family: NotoSans, sans-serif;
+      color: #1C2B36;
+    }
     .#{$namespace}-scrollbar__bar {
-      z-index: 2;
+      z-index: calc(getCssVar('table-index') + 2);
     }
   }
 
@@ -501,7 +519,8 @@
     flex-direction: column;
     align-items: center;
     height: 14px;
-    width: 24px;
+    margin-left: 2px;
+    width: 11px;
     vertical-align: middle;
     cursor: pointer;
     overflow: initial;
@@ -572,6 +591,20 @@
     }
   }
 
+  &.#{$namespace}-table--scrollable-y {
+    @include e(body-header) {
+      position: sticky;
+      top: 0;
+      z-index: calc(getCssVar('table-index') + 2);
+    }
+
+    @include e(body-footer) {
+      position: sticky;
+      bottom: 0;
+      z-index: calc(getCssVar('table-index') + 2);
+    }
+  }
+
   @include e(column-resize-proxy) {
     position: absolute;
     left: 200px;
@@ -579,7 +612,7 @@
     bottom: 0;
     width: 0;
     border-left: getCssVar('table-border');
-    z-index: 10;
+    z-index: calc(getCssVar('table-index') + 9);
   }
 
   @include e(column-filter-trigger) {
@@ -598,7 +631,7 @@
     left: 0;
     width: 1px;
     height: 100%;
-    z-index: 3;
+    z-index: calc(getCssVar('table-index') + 2);
     position: absolute;
     background-color: getCssVar('table-border-color');
   }
@@ -606,7 +639,7 @@
   @include e(border-bottom-patch) {
     left: 0;
     height: 1px;
-    z-index: 3;
+    z-index: calc(getCssVar('table-index') + 2);
     position: absolute;
     background-color: getCssVar('table-border-color');
   }
@@ -615,7 +648,7 @@
     top: 0;
     height: 100%;
     width: 1px;
-    z-index: 3;
+    z-index: calc(getCssVar('table-index') + 2);
     position: absolute;
     background-color: getCssVar('table-border-color');
   }

package/theme-chalk/src/var.scss

@@ -89,4 +89,130 @@
 
   // Svg
   @include css-var-from-global('svg-monochrome-grey', 'border-color');
+
+  /* colors */
+  --white: #ffffff;
+  --color-teal-100: #ebf5f4;
+  --color-teal-200: #beebe7;
+  --color-teal-300: #86d9d4;
+  --color-teal-400: #4ebfb9;
+  --color-teal-500: #279c9c;
+  --color-teal-600: #167b7d;
+  --color-teal-700: #155c5e;
+  --color-teal-800: #124241;
+  --color-teal-900: #102e2d;
+  --color-blue-blue-100: #f0f4fa;
+  --color-blue-blue-200: #d4e4fa;
+  --color-blue-blue-300: #adccf7;
+  --color-blue-blue-400: #75b1ff;
+  --color-blue-blue-500: #3d8df5;
+  --color-blue-blue-600: #186ade;
+  --color-blue-blue-700: #0d4ea6;
+  --color-blue-blue-800: #103a75;
+  --color-blue-blue-900: #11294d;
+  --color-blue-blue-990: #0d1826;
+  --color-cloudy-gray-cloudy-gray-200: #d3ddde;
+  --color-cloudy-gray-cloudy-gray-300: #b7c2c4;
+  --color-cloudy-gray-cloudy-gray-400: #9ca8aa;
+  --color-cloudy-gray-cloudy-gray-50: #f2f7f7;
+  --color-cloudy-gray-cloudy-gray-500: #828e91;
+  --color-cloudy-gray-cloudy-gray-600: #697579;
+  --color-cloudy-gray-cloudy-gray-700: #505d62;
+  --color-cloudy-gray-cloudy-gray-800: #3a464c;
+  --color-cloudy-gray-cloudy-gray-900: #243037;
+  --color-cloudy-gray-cloudy-gray-990: #0e171f;
+  --color-cloudy-gray-cloudy-gray-999: #090f14;
+  --color-cyan-cyan-100: #ebf5f4;
+  --color-cyan-cyan-200: #c7e8ed;
+  --color-cyan-cyan-300: #81d8e5;
+  --color-cyan-cyan-400: #45bcd1;
+  --color-cyan-cyan-500: #159ab2;
+  --color-cyan-cyan-600: #067a91;
+  --color-cyan-cyan-700: #09596b;
+  --color-cyan-cyan-800: #0c424d;
+  --color-cyan-cyan-900: #102d33;
+  --color-gray-gray-100: #e7ecef;
+  --color-gray-gray-200: #dce3e8;
+  --color-gray-gray-300: #c1ccd6;
+  --color-gray-gray-400: #9fb1bd;
+  --color-gray-gray-50: #f2f5f7;
+  --color-gray-gray-500: #7a909e;
+  --color-gray-gray-600: #5b7282;
+  --color-gray-gray-700: #3e5463;
+  --color-gray-gray-800: #2a3f4d;
+  --color-gray-gray-900: #1c2b36;
+  --color-gray-gray-990: #0e171f;
+  --color-gray-gray-999: #090f14;
+  --color-green-green-100: #ebf7ed;
+  --color-green-green-200: #c7ebd1;
+  --color-green-green-300: #88dba8;
+  --color-green-green-400: #43c478;
+  --color-green-green-500: #16a163;
+  --color-green-green-600: #077d55;
+  --color-green-green-700: #075e45;
+  --color-green-green-800: #094536;
+  --color-green-green-900: #092e25;
+  --color-green-green-990: #081a15;
+  --color-lime-lime-100: #ebf7da;
+  --color-lime-lime-200: #d5f0b1;
+  --color-lime-lime-300: #aad971;
+  --color-lime-lime-400: #78bf39;
+  --color-lime-lime-500: #52a31d;
+  --color-lime-lime-600: #3c7d0e;
+  --color-lime-lime-700: #2e5c0e;
+  --color-lime-lime-800: #254211;
+  --color-lime-lime-900: #1c2e10;
+  --color-lime-lime-990: #121a0d;
+  --color-orange-orange-10: #fff2ea;
+  --color-orange-orange-100: #ffd3b8;
+  --color-orange-orange-200: #ffc5a1;
+  --color-orange-orange-300: #ffb181;
+  --color-orange-orange-400: #ff9757;
+  --color-orange-orange-50: #ffdeca;
+  --color-orange-orange-500: #ff761f;
+  --color-orange-orange-600: #ff5b05;
+  --color-orange-orange-700: #eb5100;
+  --color-orange-orange-800: #b04300;
+  --color-orange-orange-900: #953900;
+  --color-orange-orange-990: #722c00;
+  --color-purple-purple-100: #f7f2fc;
+  --color-purple-purple-200: #eadcfc;
+  --color-purple-purple-300: #dabefa;
+  --color-purple-purple-400: #c89afc;
+  --color-purple-purple-500: #ac71f0;
+  --color-purple-purple-600: #8f49de;
+  --color-purple-purple-700: #6b30ab;
+  --color-purple-purple-800: #4c277d;
+  --color-purple-purple-900: #331f4d;
+  --color-purple-purple-990: #1c1229;
+  --color-red-red-100: #fcf3f2;
+  --color-red-red-200: #fadcd9;
+  --color-red-red-300: #fabbb4;
+  --color-red-red-400: #fc9086;
+  --color-red-red-500: #fa5343;
+  --color-red-red-600: #d91f11;
+  --color-red-red-700: #a1160a;
+  --color-red-red-800: #75160c;
+  --color-red-red-900: #4f150f;
+  --color-yellow-yellow-100: #faf6cf;
+  --color-yellow-yellow-200: #f7e379;
+  --color-yellow-yellow-300: #f5c518;
+  --color-yellow-yellow-400: #d9a514;
+  --color-yellow-yellow-500: #b3870e;
+  --color-yellow-yellow-600: #946613;
+  --color-yellow-yellow-700: #70491c;
+  --color-yellow-yellow-800: #54341f;
+  --color-yellow-yellow-900: #38251b;
+  --color-yellow-yellow-990: #1c1613;
+  --color-pink-pink-100: #fcf0f8;
+  --color-pink-pink-200: #f7daed;
+  --color-pink-pink-300: #f7b7e2;
+  --color-pink-pink-400: #fa87d4;
+  --color-pink-pink-500: #ed4cb7;
+  --color-pink-pink-600: #cc1d92;
+  --color-pink-pink-700: #961574;
+  --color-pink-pink-800: #6b155a;
+  --color-pink-pink-900: #47153f;
+  --color-pink-pink-990: #241020;
+  --transparent-transparent-1: #00000000;
 }