vft 0.0.73 → 0.0.76

package/theme-style/src/date-picker/date-picker.scss

@@ -69,7 +69,7 @@
     line-height: 22px;
     text-align: center;
     cursor: pointer;
-    color: getCssVar('text-color', 'regular');
+    color: getCssVar('text-regular-color');
 
     &:hover {
       color: getCssVar('datepicker-hover-text-color');

package/theme-style/src/date-picker/date-range-picker.scss

@@ -35,11 +35,11 @@
     text-align: center;
     height: 28px;
 
-    [class*='arrow-left'] {
+    button[class*='arrow-left'] {
       float: left;
     }
 
-    [class*='arrow-right'] {
+    button[class*='arrow-right'] {
       float: right;
     }
 

package/theme-style/src/date-picker/date-table.scss

@@ -124,7 +124,7 @@
       background-color: getCssVar('fill-color', 'light');
       opacity: 1;
       cursor: not-allowed;
-      color: getCssVar('text-color', 'placeholder');
+      color: getCssVar('text-placeholder-color');
     }
 
     &.selected .#{$namespace}-date-table-cell {

package/theme-style/src/date-picker/month-table.scss

@@ -29,10 +29,10 @@
     &.disabled .cell {
       background-color: getCssVar('fill-color', 'light');
       cursor: not-allowed;
-      color: getCssVar('text-color', 'placeholder');
+      color: getCssVar('text-placeholder-color');
 
       &:hover {
-        color: getCssVar('text-color', 'placeholder');
+        color: getCssVar('text-placeholder-color');
       }
     }
 

package/theme-style/src/date-picker/picker-panel.scss

@@ -2,7 +2,7 @@
 @use '../common/var' as *;
 
 @include b(picker-panel) {
-  color: getCssVar('text-color', 'regular');
+  color: getCssVar('text-regular-color');
   background: getCssVar('bg-color', 'overlay');
   border-radius: getCssVar('border-radius-base');
   line-height: 30px;
@@ -61,7 +61,7 @@
 
   @include e(btn) {
     border: 1px solid getCssVar('fill-color', 'darker');
-    color: getCssVar('text-color', 'primary');
+    color: getCssVar('text-primary-color');
     line-height: 24px;
     border-radius: 2px;
     padding: 0 20px;
@@ -71,7 +71,7 @@
     font-size: 12px;
 
     &[disabled] {
-      color: getCssVar('text-color', 'disabled');
+      color: getCssVar('text', 'disabled-color');
       cursor: not-allowed;
     }
   }
@@ -83,7 +83,7 @@
     background: transparent;
     cursor: pointer;
     outline: none;
-    margin-top: 8px;
+    margin-top: 3px;
 
     &:hover {
       color: getCssVar('datepicker-hover-text-color');
@@ -101,7 +101,6 @@
     }
     & .#{$namespace}-icon {
       cursor: pointer;
-      font-size: inherit;
     }
   }
 

package/theme-style/src/date-picker/picker.scss

@@ -78,14 +78,13 @@
     cursor: pointer;
 
     &:hover {
-      color: getCssVar('text-color', 'secondary');
+      color: getCssVar('text-secondary-color');
     }
   }
 
   .#{$namespace}-range__icon {
-    height: inherit;
     font-size: 14px;
-    color: getCssVar('text-color', 'placeholder');
+    color: getCssVar('text-placeholder-color');
     float: left;
 
     svg {
@@ -105,11 +104,11 @@
     width: 39%;
     text-align: center;
     font-size: getCssVar('font-size', 'base');
-    color: getCssVar('text-color', 'regular');
+    color: getCssVar('text-regular-color');
     background-color: transparent;
 
     &::placeholder {
-      color: getCssVar('text-color', 'placeholder');
+      color: getCssVar('text-placeholder-color');
     }
   }
 
@@ -123,18 +122,17 @@
     margin: 0;
     font-size: 14px;
     word-break: keep-all;
-    color: getCssVar('text-color', 'primary');
+    color: getCssVar('text-primary-color');
   }
 
   .#{$namespace}-range__close-icon {
     font-size: 14px;
-    color: getCssVar('text-color', 'placeholder');
-    height: inherit;
+    color: getCssVar('text-placeholder-color');
     width: unset;
     cursor: pointer;
 
     &:hover {
-      color: getCssVar('text-color', 'secondary');
+      color: getCssVar('text-secondary-color');
     }
 
     svg {

package/theme-style/src/date-picker/time-picker.scss

@@ -6,7 +6,7 @@
   position: relative;
   width: 180px;
   left: 0;
-  z-index: getCssVar('index-top');
+  z-index: getCssVar('z-index-top');
   user-select: none;
   box-sizing: content-box;
 
@@ -77,7 +77,7 @@
     background-color: transparent;
     outline: none;
     font-size: 12px;
-    color: getCssVar('text-color', 'primary');
+    color: getCssVar('text-primary-color');
 
     &.confirm {
       font-weight: 800;

package/theme-style/src/date-picker/time-spinner.scss

@@ -37,15 +37,13 @@
   }
 
   @include e(arrow) {
-    font-size: 12px;
-    color: getCssVar('text-color', 'secondary');
+    font-size: 16px;
+    color: getCssVar('text-secondary-color');
     position: absolute;
     left: 0;
     width: 100%;
-    z-index: getCssVar('index-normal');
+    z-index: getCssVar('z-index-normal');
     text-align: center;
-    height: 30px;
-    line-height: 30px;
     cursor: pointer;
 
     &:hover {
@@ -91,7 +89,7 @@
     height: 32px;
     line-height: 32px;
     font-size: 12px;
-    color: getCssVar('text-color', 'regular');
+    color: getCssVar('text-regular-color');
 
     &:hover:not(.is-disabled):not(.is-active) {
       background: getCssVar('fill-color', 'light');
@@ -99,12 +97,12 @@
     }
 
     &.is-active:not(.is-disabled) {
-      color: getCssVar('text-color', 'primary');
+      color: getCssVar('text-primary-color');
       font-weight: bold;
     }
 
     &.is-disabled {
-      color: getCssVar('text-color', 'placeholder');
+      color: getCssVar('text-placeholder-color');
       cursor: not-allowed;
     }
   }

package/theme-style/src/date-picker/year-table.scss

@@ -17,7 +17,7 @@
 
     &.today {
       .cell {
-        color: getCssVar('color', 'primary');
+        color: getCssVar('primary-color');
         font-weight: bold;
       }
     }
@@ -25,10 +25,10 @@
     &.disabled .cell {
       background-color: getCssVar('fill-color', 'light');
       cursor: not-allowed;
-      color: getCssVar('text-color', 'placeholder');
+      color: getCssVar('text-placeholder-color');
 
       &:hover {
-        color: getCssVar('text-color', 'placeholder');
+        color: getCssVar('text-placeholder-color');
       }
     }
 

package/theme-style/src/date-time-select.scss

@@ -82,10 +82,6 @@ $name: date-time-select;
     }
   }
 
-
-
-
-
   @include e(delete) {
     transition: getCssVar('transition-all');
     display: flex;
@@ -100,6 +96,9 @@ $name: date-time-select;
     }
   }
 
+  .vft-scrollbar {
+    overflow: visible;
+  }
   //.#{$namespace}-popper {
   //  padding-left: 16px;
   //  padding-top: 16px;

package/theme-style/src/descriptions-item.scss

@@ -25,12 +25,12 @@ $descriptions-item-vertical-label-padding-bottom: map-merge(
   @include e(label) {
     &.#{$namespace}-descriptions__cell.is-bordered-label {
       font-weight: bold;
-      color: getCssVar('text-color', 'regular');
+      color: getCssVar('text-regular-color');
       background: getCssVar('descriptions-item-bordered-label-background');
     }
 
     &:not(.is-bordered-label) {
-      color: getCssVar('text-color', 'primary');
+      color: getCssVar('text-primary-color');
       margin-right: map-get($descriptions-item-label-margin-right, 'default');
     }
 
@@ -44,11 +44,11 @@ $descriptions-item-vertical-label-padding-bottom: map-merge(
 
   @include e(content) {
     &.#{$namespace}-descriptions__cell.is-bordered-content {
-      color: getCssVar('text-color', 'primary');
+      color: getCssVar('text-primary-color');
     }
 
     &:not(.is-bordered-label) {
-      color: getCssVar('text-color', 'regular');
+      color: getCssVar('text-regular-color');
     }
   }
 

package/theme-style/src/descriptions.scss

@@ -57,7 +57,7 @@ $descriptions-cell-font-size: map-merge(
 
   box-sizing: border-box;
   font-size: getCssVar('font-size', 'base');
-  color: getCssVar('text-color', 'primary');
+  color: getCssVar('text-primary-color');
 
   @include e(header) {
     display: flex;
@@ -66,7 +66,7 @@ $descriptions-cell-font-size: map-merge(
     margin-bottom: map-get($descriptions-header-margin-bottom, 'default');
 
     @include e(title) {
-      color: getCssVar('text-color', 'primary');
+      color: getCssVar('text-primary-color');
       font-size: map-get($descriptions-title-font-size, 'default');
       font-weight: bold;
     }

package/theme-style/src/header-layout.scss

@@ -12,7 +12,7 @@ $name: header-layout;
 @include b($name) {
   height: getCompCssVar('height');
   background-color: getCompCssVar('bg-color');
-
+  z-index: getCompCssVar('z-index');
   .vft-container {
     height: 100%;
 

package/theme-style/src/horizontal-menu.scss

@@ -7,46 +7,35 @@ $name: horizontal-menu;
   @return getCssVar($name, $value);
 }
 
-@include b($name) {
-  .menu-popover {
-    box-shadow: getCssVar('box-shadow');
+@include set-root-css-vars($name, $horizontal-menu);
 
-    border-radius: 10px;
+@include b($name) {
+  height: 100%;
 
+  @include e(normal) {
     .vft-menu--popup {
-      border-radius: 10px;
-      box-shadow: none;
+      box-shadow: getCssVar('box-shadow');;
     }
 
-    .vft-menu {
-      padding-bottom: 10px;
-
-      .item {
-        padding: 0 20px;
-        margin-top: 5px;
-
-        &:hover {
-          color: $primary-color
-        }
-      }
-    }
+    border-radius: getCssVar('popper-border-radius');
   }
 
-  .menu-popover-dir {
-    width: 1218px;
+  @include e(tile) {
+    border-radius: getCssVar('popper-border-radius');
+    width: getCompCssVar('tile-width');
+    height: getCompCssVar('tile-height');
+    padding: getCompCssVar('tile-padding');
+    box-shadow: getCssVar('box-shadow');
 
     .vft-menu {
-      box-sizing: border-box;
-      height: 494px;
-      flex: 1 1 0;
-      overflow: auto;
+      height: 100%;
+      @include overlay();
+
       display: flex;
-      padding: 24px 30px;
-      margin-right: 6px;
-      margin-bottom: 20px;
+      flex: 1 1 0;
       box-shadow: none;
 
-      .item {
+      .vft-menu-popup-item {
         height: 18px;
         line-height: 18px;
         padding: 0;
@@ -56,14 +45,17 @@ $name: horizontal-menu;
         }
       }
 
-
       .content-main {
-        .content-col {
-          min-width: 100px;
+        &:not(:last-child) {
+          margin-right: getCompCssVar('tile-content-gap-y');
         }
 
-        .content-col:not(:first-child) {
-          margin-top: 40px;
+        &:last-child {
+          margin-right: 15px;
+        }
+
+        .content-col {
+          padding-bottom: getCompCssVar('tile-content-col-gap-y');
         }
 
         .title {
@@ -76,13 +68,9 @@ $name: horizontal-menu;
           margin-top: 16px;
           display: grid;
           grid-auto-flow: column;
-          gap: 12px 0;
+          gap: getCompCssVar('tile-content-col-item-gap');
           position: relative;
-          grid-auto-columns: 150px;
-        }
-
-        .vft-menu-item {
-          min-width: 100% !important;
+          grid-auto-columns: getCssVar('menu-item-min-width');;
         }
       }
     }

package/theme-style/src/image-viewer.scss

@@ -67,7 +67,7 @@
     width: 282px;
     height: 44px;
     padding: 0 23px;
-    background-color: getCssVar('text-color', 'regular');
+    background-color: getCssVar('text-regular-color');
     border-color: #fff;
     border-radius: 22px;
 

package/theme-style/src/index.scss

@@ -117,6 +117,9 @@
 @use './header';
 @use './footer';
 @use './main';
+@use './popconfirm';
+@use './skeleton';
+@use './skeleton-item';
 // md comp
 @use './md-comment';
 @use './md-tabs';

package/theme-style/src/input-number.scss

@@ -42,7 +42,7 @@
 
     width: map.get($input-height, 'default');
     background: getCssVar('fill-color', 'light');
-    color: getCssVar('text-color', 'regular');
+    color: getCssVar('text-regular-color');
     cursor: pointer;
     font-size: 13px;
     user-select: none;