vft 0.0.71 → 0.0.73

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

@@ -0,0 +1,111 @@
+@use '../mixins/mixins' as *;
+@use '../common/var' as *;
+
+@include b(time-spinner) {
+  &.has-seconds {
+    .#{$namespace}-time-spinner__wrapper {
+      width: 33.3%;
+    }
+  }
+
+  @include e(wrapper) {
+    max-height: 192px;
+    overflow: auto;
+    display: inline-block;
+    width: 50%;
+    vertical-align: top;
+    position: relative;
+
+    &.#{$namespace}-scrollbar__wrap:not(.#{$namespace}-scrollbar__wrap--hidden-default) {
+      padding-bottom: 15px;
+    }
+
+    @include when(arrow) {
+      box-sizing: border-box;
+      text-align: center;
+      overflow: hidden;
+
+      .#{$namespace}-time-spinner__list {
+        transform: translateY(-32px);
+      }
+
+      .#{$namespace}-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
+        background: getCssVar('fill-color', 'light');
+        cursor: default;
+      }
+    }
+  }
+
+  @include e(arrow) {
+    font-size: 12px;
+    color: getCssVar('text-color', 'secondary');
+    position: absolute;
+    left: 0;
+    width: 100%;
+    z-index: getCssVar('index-normal');
+    text-align: center;
+    height: 30px;
+    line-height: 30px;
+    cursor: pointer;
+
+    &:hover {
+      color: getCssVar('primary-color');
+    }
+
+    &.arrow-up {
+      top: 10px;
+    }
+
+    &.arrow-down {
+      bottom: 10px;
+    }
+  }
+
+  @include e(input) {
+    &.#{$namespace}-input {
+      width: 70%;
+
+      .#{$namespace}-input__inner {
+        padding: 0;
+        text-align: center;
+      }
+    }
+  }
+
+  @include e(list) {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    text-align: center;
+
+    &::after,
+    &::before {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 80px;
+    }
+  }
+
+  @include e(item) {
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px;
+    color: getCssVar('text-color', 'regular');
+
+    &:hover:not(.is-disabled):not(.is-active) {
+      background: getCssVar('fill-color', 'light');
+      cursor: pointer;
+    }
+
+    &.is-active:not(.is-disabled) {
+      color: getCssVar('text-color', 'primary');
+      font-weight: bold;
+    }
+
+    &.is-disabled {
+      color: getCssVar('text-color', 'placeholder');
+      cursor: not-allowed;
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+@use '../mixins/mixins' as *;
+@use '../common/var' as *;
+
+@include b(year-table) {
+  font-size: 12px;
+  margin: -1px;
+  border-collapse: collapse;
+
+  .#{$namespace}-icon {
+    color: getCssVar('datepicker', 'icon-color');
+  }
+
+  td {
+    text-align: center;
+    padding: 20px 3px;
+    cursor: pointer;
+
+    &.today {
+      .cell {
+        color: getCssVar('color', 'primary');
+        font-weight: bold;
+      }
+    }
+
+    &.disabled .cell {
+      background-color: getCssVar('fill-color', 'light');
+      cursor: not-allowed;
+      color: getCssVar('text-color', 'placeholder');
+
+      &:hover {
+        color: getCssVar('text-color', 'placeholder');
+      }
+    }
+
+    .cell {
+      width: 48px;
+      height: 36px;
+      display: block;
+      line-height: 36px;
+      color: getCssVar('datepicker-text-color');
+      border-radius: 18px;
+      margin: 0 auto;
+
+      &:hover {
+        color: getCssVar('datepicker-hover-text-color');
+      }
+    }
+
+    &.current:not(.disabled) .cell {
+      color: getCssVar('datepicker-active-color');
+    }
+
+    &:focus-visible {
+      outline: none;
+      .cell {
+        outline: 2px solid getCssVar('datepicker-active-color');
+      }
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+@forward './date-picker/date-table.scss';
+@forward './date-picker/month-table.scss';
+@forward './date-picker/year-table.scss';
+@forward './date-picker/time-spinner.scss';
+@forward './date-picker/picker.scss';
+@forward './date-picker/date-picker.scss';
+@forward './date-picker/date-range-picker.scss';
+@forward './date-picker/time-range-picker.scss';
+@forward './date-picker/time-picker.scss';

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

@@ -62,7 +62,7 @@ $name: date-time-select;
         display: flex;
         //flex-direction: column;
         justify-content: space-between;
-        color: getCssVar('text-primary-color');;
+        color: getCssVar('text-primary-color');
         width: 100%;
         padding: 9px 16px;
         transition: getCssVar('transition-all');

package/theme-style/src/display.scss

@@ -0,0 +1,12 @@
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+
+.hidden {
+  @each $break-point-name, $value in $breakpoints-spec {
+    &-#{$break-point-name} {
+      @include res($break-point-name, $breakpoints-spec) {
+        display: none !important;
+      }
+    }
+  }
+}

package/theme-style/src/drawer.scss

@@ -0,0 +1,160 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+$directions: rtl, ltr, ttb, btt;
+
+@include b(drawer) {
+  @include set-component-css-var('drawer', $drawer);
+}
+
+@include b(drawer) {
+  position: absolute;
+  box-sizing: border-box;
+  background-color: getCssVar('drawer', 'bg-color');
+  display: flex;
+  flex-direction: column;
+  box-shadow: getCssVar('box-shadow', 'dark');
+  overflow: hidden;
+
+  transition: all getCssVar('transition-duration');
+
+  @each $direction in $directions {
+    .#{$direction} {
+      transform: translate(0, 0);
+    }
+  }
+
+  &__sr-focus:focus {
+    outline: none !important;
+  }
+
+  &__header {
+    align-items: center;
+    color: rgb(114, 118, 123);
+    display: flex;
+    margin-bottom: 32px;
+    padding: getCssVar('drawer-padding-primary');
+    padding-bottom: 0;
+    & > :first-child {
+      flex: 1;
+    }
+  }
+
+  &__title {
+    margin: 0;
+    flex: 1;
+    line-height: inherit;
+    font-size: 1rem;
+  }
+
+  @include e(footer) {
+    padding: getCssVar('drawer-padding-primary');
+    padding-top: 10px;
+    text-align: right;
+  }
+
+  &__close-btn {
+    display: inline-flex;
+    border: none;
+    cursor: pointer;
+    font-size: getCssVar('font-size-extra-large');
+    color: inherit;
+    background-color: transparent;
+    outline: none;
+    &:focus,
+    &:hover {
+      i {
+        color: getCssVar('primary-color');
+      }
+    }
+  }
+
+  &__body {
+    flex: 1;
+    padding: getCssVar('drawer-padding-primary');
+    overflow: auto;
+    & > * {
+      box-sizing: border-box;
+    }
+  }
+
+  &.ltr,
+  &.rtl {
+    height: 100%;
+    top: 0;
+    bottom: 0;
+  }
+
+  &.ttb,
+  &.btt {
+    width: 100%;
+    left: 0;
+    right: 0;
+  }
+
+  &.ltr {
+    left: 0;
+  }
+
+  &.rtl {
+    right: 0;
+  }
+
+  &.ttb {
+    top: 0;
+  }
+
+  &.btt {
+    bottom: 0;
+  }
+}
+
+.#{$namespace}-drawer-fade {
+  &-enter-active,
+  &-leave-active {
+    transition: all getCssVar('transition-duration');
+  }
+
+  &-enter-from,
+  &-enter-active,
+  &-enter-to,
+  &-leave-from,
+  &-leave-active,
+  &-leave-to {
+    overflow: hidden !important;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-to,
+  &-leave-from {
+    opacity: 1;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    @each $direction in $directions {
+      .#{$direction} {
+        @if $direction == ltr {
+          transform: translateX(-100%);
+        }
+
+        @if $direction == rtl {
+          transform: translateX(100%);
+        }
+
+        @if $direction == ttb {
+          transform: translateY(-100%);
+        }
+
+        @if $direction == btt {
+          transform: translateY(100%);
+        }
+      }
+    }
+  }
+}

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

@@ -10,20 +10,15 @@ $name: footer-layout;
 }
 
 @include b($name) {
-  // noinspection CssInvalidPropertyValue
-  width: calc(100% - getCompCssVar('left'));
   background-color: getCompCssVar('bg-color');
-  height: getCompCssVar('height');
   border-top: getCompCssVar('border-top');
   display: flex;
   justify-content: space-between;
   align-items: center;
-  flex: none;
-  overflow: hidden;
-  position: relative;
-  transition: left .5s;
-  left: getCompCssVar('left');
-  z-index: getCompCssVar('z-index');
+
+  &.#{$namespace}-footer {
+    height: getCompCssVar('height');
+  }
 
   @include e(left) {
     min-width: getCompCssVar('left-min-width');

package/theme-style/src/footer.scss

@@ -0,0 +1,11 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(footer) {
+  @include set-component-css-var('footer', $footer);
+
+  box-sizing: border-box;
+  flex-shrink: 0;
+  height: getCssVar('footer-height');
+}

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

@@ -12,23 +12,34 @@ $name: header-layout;
 @include b($name) {
   height: getCompCssVar('height');
   background-color: getCompCssVar('bg-color');
-  border-bottom: getCompCssVar('border-bottom');
-  box-sizing: border-box;
-  @include m(fixed) {
-    z-index: getCompCssVar('z-index');
-    width: 100%;
-  }
 
-  @include e(top) {
-    height: getCompCssVar('top-height');
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+  .vft-container {
+    height: 100%;
+
+    @include e(top-container) {
+      height: getCompCssVar('top-height');
+      overflow: visible;
+
+      .content {
+        display: flex;
+        justify-content: space-between;
+        height: 100%;
+
+        .left {
+          display: flex;
+          align-items: center;
+          min-width: getCompCssVar('left-min-width');
+        }
+
+        .right {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
 
-    @include e(left) {
-      display: flex;
-      height: 100%;
-      align-items: center;
+    @include e(footer) {
+      height: calc(getCompCssVar('height') - getCompCssVar('top-height'))
     }
   }
 }

package/theme-style/src/header.scss

@@ -0,0 +1,11 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(header) {
+  @include set-component-css-var('header', $header);
+
+  box-sizing: border-box;
+  flex-shrink: 0;
+  height: getCssVar('header-height');
+}

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

@@ -0,0 +1,90 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+$name: horizontal-menu;
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  .menu-popover {
+    box-shadow: getCssVar('box-shadow');
+
+    border-radius: 10px;
+
+    .vft-menu--popup {
+      border-radius: 10px;
+      box-shadow: none;
+    }
+
+    .vft-menu {
+      padding-bottom: 10px;
+
+      .item {
+        padding: 0 20px;
+        margin-top: 5px;
+
+        &:hover {
+          color: $primary-color
+        }
+      }
+    }
+  }
+
+  .menu-popover-dir {
+    width: 1218px;
+
+    .vft-menu {
+      box-sizing: border-box;
+      height: 494px;
+      flex: 1 1 0;
+      overflow: auto;
+      display: flex;
+      padding: 24px 30px;
+      margin-right: 6px;
+      margin-bottom: 20px;
+      box-shadow: none;
+
+      .item {
+        height: 18px;
+        line-height: 18px;
+        padding: 0;
+
+        &:hover {
+          background: inherit;
+        }
+      }
+
+
+      .content-main {
+        .content-col {
+          min-width: 100px;
+        }
+
+        .content-col:not(:first-child) {
+          margin-top: 40px;
+        }
+
+        .title {
+          font-weight: bold;
+          font-size: 14px;
+          line-height: 14px;
+        }
+
+        .content {
+          margin-top: 16px;
+          display: grid;
+          grid-auto-flow: column;
+          gap: 12px 0;
+          position: relative;
+          grid-auto-columns: 150px;
+        }
+
+        .vft-menu-item {
+          min-width: 100% !important;
+        }
+      }
+    }
+  }
+}

package/theme-style/src/icon.scss

@@ -19,11 +19,11 @@ $name: icon;
   &:hover {
     color: getCssVarWithDefault(icon-hover-color, getCompCssVar(color))
   }
+}
 
-  @include e(image) {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    object-fit: contain;
-  }
+@include e(image) {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  object-fit: contain;
 }