vft 0.0.71 → 0.0.72

package/theme-style/src/common/var.scss

@@ -215,6 +215,7 @@ $z-index: map.merge(
     "normal": 1,
     "top": 1000,
     "popper": 2000,
+    'back-top': 3050
   ),
   $z-index
 );
@@ -551,11 +552,10 @@ $dropdown: map.merge(
 $header-layout: () !default;
 $header-layout: map-merge(
   (
-    height: 64px,
+    height: 70px,
     top-height: 40px,
     bg-color: #eff1f5,
-    z-index: 2001,
-    border-bottom: 1px solid rgb(231, 231, 231),
+    left-min-width: 800px,
   ),
     $header-layout
 );
@@ -702,7 +702,8 @@ $menu: map-merge(
     "border-bottom": getCssVar("border"),
     "base-level-padding": 20px,
     "level-padding": 20px,
-    "icon-mr": 8px,
+    "icon-mr": 6px,
+    "icon-width": 14px,
     "border": getCssVar("border"),
     "border-right": getCssVar('border'),
     "item-min-width": 200px,
@@ -1060,7 +1061,7 @@ $tag-icon-size: map-merge(
 $back-top: () !default;
 $back-top: map-merge(
   (
-    "bg-color": getCssVar("bg-color", "overlay"),
+    "bg-color": getCssVar("bg-color-overlay"),
     "text-color": getCssVar('text-primary-color'),
     "hover-bg-color": getCssVar("border-color-extra-light"),
   ),
@@ -1165,8 +1166,382 @@ $list-cell: map-merge((
 
 $search: () !default;
 $search: map-merge((
-  active-width: 100%
+  active-width: 100%,
+  border-color: getCssVar('input-border-color'),
+  hover-border-color: getCssVar('primary-color'),
+  active-bg-color: getCssVar('input-bg-color'),
+  hover-bg-color: getCssVar('input-bg-color'),
+  border-radius: getCssVar('border-radius-base'),
 ), $search);
 
 
+// Break-point
+$sm: 768px !default;
+$md: 992px !default;
+$lg: 1200px !default;
+$xl: 1920px !default;
+
+$breakpoints: (
+  'xs': '(max-width: #{$sm})',
+  'sm': '(min-width: #{$sm})',
+  'md': '(min-width: #{$md})',
+  'lg': '(min-width: #{$lg})',
+  'xl': '(min-width: #{$xl})',
+) !default;
+
+$breakpoints-spec: (
+  'xs-only': '(max-width: #{$sm - 1})',
+  'sm-and-up': '(min-width: #{$sm})',
+  'sm-only': '(min-width: #{$sm}) and (max-width: #{$md - 1})',
+  'sm-and-down': '(max-width: #{$md - 1})',
+  'md-and-up': '(min-width: #{$md})',
+  'md-only': '(min-width: #{$md}) and (max-width: #{$lg - 1})',
+  'md-and-down': '(max-width: #{$lg - 1})',
+  'lg-and-up': '(min-width: #{$lg})',
+  'lg-only': '(min-width: #{$lg}) and (max-width: #{$xl - 1})',
+  'lg-and-down': '(max-width: #{$xl - 1})',
+  'xl-only': '(min-width: #{$xl})',
+) !default;
 
+// Alert
+// css3 var in packages/theme-chalk/src/alert.scss
+$alert: () !default;
+$alert: map.merge(
+    (
+      'padding': 8px 16px,
+      'border-radius-base': getCssVar('border-radius-base'),
+      'title-font-size': 13px,
+      'description-font-size': 12px,
+      'close-font-size': 12px,
+      'close-customed-font-size': 13px,
+      'icon-size': 16px,
+      'icon-large-size': 28px,
+    ),
+    $alert
+);
+
+// MessageBox
+// css3 var in packages/theme-chalk/src/message-box.scss
+$messagebox: () !default;
+$messagebox: map.merge(
+    (
+      'title-color': getCssVar('text-primary-color'),
+      'width': 420px,
+      'border-radius': 4px,
+      'font-size': getCssVar('font-size-large'),
+      'content-font-size': getCssVar('font-size-base'),
+      'content-color': getCssVar('text-regular-color'),
+      'error-font-size': 12px,
+      'padding-primary': 15px,
+    ),
+    $messagebox
+);
+
+// Notification
+// css3 var in packages/theme-chalk/src/notification.scss
+$notification: () !default;
+$notification: map.merge(
+    (
+      'width': 330px,
+      'padding': 14px 26px 14px 13px,
+      'radius': 8px,
+      'shadow': getCssVar('box-shadow-light'),
+      'border-color': getCssVar('border-color-lighter'),
+      'icon-size': 24px,
+      'close-font-size':
+      var(
+          #{getCssVarName('message-close-size')},
+          map.get($message, 'close-size')
+      ),
+      'group-margin-left': 13px,
+      'group-margin-right': 8px,
+      'content-font-size': getCssVar('font-size-base'),
+      'content-color': getCssVar('text-regular-color'),
+      'title-font-size': 16px,
+      'title-color': getCssVar('text-primary-color'),
+      'close-color': getCssVar('text-secondary-color'),
+      'close-hover-color': getCssVar('text-regular-color'),
+    ),
+    $notification
+);
+
+
+// Cascader
+// css3 var in packages/theme-chalk/src/cascader.scss
+$cascader: () !default;
+$cascader: map.merge(
+    (
+      'menu-text-color': getCssVar('text-regular-color'),
+      'menu-selected-text-color': getCssVar('primary-color'),
+      'menu-fill': getCssVar('bg-color', 'overlay'),
+      'menu-font-size': getCssVar('font-size-base'),
+      'menu-radius': getCssVar('border-radius-base'),
+      'menu-border': solid 1px getCssVar('border-color-light'),
+      'menu-shadow': getCssVar('box-shadow-light'),
+      'node-background-hover': getCssVar('fill-color', 'light'),
+      'node-color-disabled': getCssVar('text-placeholder-color'),
+      'color-empty': getCssVar('text-placeholder-color'),
+      'tag-background': getCssVar('fill-color'),
+    ),
+    $cascader
+);
+//statistic
+// css3 var in packages/theme-chalk/src/statistic.scss
+$statistic: () !default;
+$statistic: map.merge(
+    (
+      'title-font-weight': 400,
+      'title-font-size': getCssVar('font-size', 'extra-small'),
+      'title-color': getCssVar('text-regular-color'),
+      'content-font-weight': 400,
+      'content-font-size': getCssVar('font-size', 'extra-large'),
+      'content-color': getCssVar('text-primary-color'),
+    ),
+    $statistic
+);
+
+// skeleton
+$skeleton: () !default;
+$skeleton: map.merge(
+    (
+      'color': getCssVar('fill-color'),
+      'to-color': getCssVar('fill-color', 'darker'),
+    ),
+    $skeleton
+);
+
+// css3 var in packages/theme-chalk/src/tree.scss
+$tree: () !default;
+$tree: map.merge(
+    (
+      'node-hover-bg-color': getCssVar('fill-color', 'light'),
+      'text-color': getCssVar('text-regular-color'),
+      'expand-icon-color': getCssVar('text-placeholder-color'),
+    ),
+    $tree
+);
+
+// drawer
+$drawer: () !default;
+$drawer: map.merge(
+    (
+      'bg-color':
+      var(#{getCssVarName('dialog', 'bg-color')}, #{getCssVar('bg-color')}),
+      'padding-primary': var(#{getCssVarName('dialog', 'padding-primary')}, 20px),
+    ),
+    $drawer
+);
+
+// Badge
+// css3 var in packages/theme-chalk/src/badge.scss
+$badge: () !default;
+$badge: map.merge(
+    (
+      'bg-color': getCssVar('danger-color'),
+      'radius': 10px,
+      'font-size': 12px,
+      'padding': 6px,
+      'size': 18px,
+    ),
+    $badge
+);
+
+// Card
+$card: () !default;
+$card: map.merge(
+    (
+      'border-color': getCssVar('border-color', 'light'),
+      'border-radius': 4px,
+      'padding': 20px,
+      'bg-color': getCssVar('fill-color', 'blank'),
+    ),
+    $card
+);
+
+// Slider
+// css3 var in packages/theme-chalk/src/slider.scss
+$slider: () !default;
+$slider: map.merge(
+    (
+      'main-bg-color': getCssVar('primary-color'),
+      'runway-bg-color': getCssVar('border-color-light'),
+      'stop-bg-color': getCssVar('color-white'),
+      'disabled-color': getCssVar('text-placeholder-color'),
+      'border-radius': 3px,
+      'height': 6px,
+      'button-size': 20px,
+      'button-wrapper-size': 36px,
+      'button-wrapper-offset': -15px,
+    ),
+    $slider
+);
+
+// Rate
+$rate: () !default;
+$rate: map.merge(
+    (
+      'height': 20px,
+      'font-size': getCssVar('font-size-base'),
+      'icon-size': 18px,
+      'icon-margin': 6px,
+      // seems not be used, to be removed
+      // 'icon-color': getCssVar('text-placeholder-color),
+      'void-color': getCssVar('border-color', 'darker'),
+      'fill-color': #f7ba2a,
+      'disabled-void-color': getCssVar('fill-color'),
+      'text-color': getCssVar('text-primary-color'),
+    ),
+    $rate
+);
+
+// DatePicker
+// css3 var packages/theme-chalk/src/date-picker/var.scss
+$datepicker: () !default;
+$datepicker: map.merge(
+    (
+      'text-color': getCssVar('text-regular-color'),
+      'off-text-color': getCssVar('text-placeholder-color'),
+      'header-text-color': getCssVar('text-regular-color'),
+      'icon-color': getCssVar('text-primary-color'),
+      'border-color': getCssVar('disabled-border-color'),
+      'inner-border-color': getCssVar('border-color-light'),
+      'inrange-bg-color': getCssVar('border-color-extra-light'),
+      'inrange-hover-bg-color': getCssVar('border-color-extra-light'),
+      'active-color': getCssVar('primary-color'),
+      'hover-text-color': getCssVar('primary-color'),
+    ),
+    $datepicker
+);
+
+$date-editor: () !default;
+$date-editor: map.merge(
+    (
+      'width': 220px,
+      'monthrange-width': 300px,
+      'daterange-width': 350px,
+      'datetimerange-width': 400px,
+    ),
+    $date-editor
+);
+
+// Carousel
+// css3 var in packages/theme-chalk/src/carousel.scss
+$carousel: () !default;
+$carousel: map.merge(
+    (
+      'arrow-font-size': 12px,
+      'arrow-size': 36px,
+      'arrow-background': rgba(31, 45, 61, 0.11),
+      'arrow-hover-background': rgba(31, 45, 61, 0.23),
+      'indicator-width': 30px,
+      'indicator-height': 2px,
+      'indicator-padding-horizontal': 4px,
+      'indicator-padding-vertical': 12px,
+      'indicator-out-color': getCssVar('border-color-hover'),
+    ),
+    $carousel
+);
+
+// Collapse
+// css3 var in packages/theme-chalk/src/collapse.scss
+$collapse: () !default;
+$collapse: map.merge(
+    (
+      'border-color': getCssVar('border-color-lighter'),
+      'header-height': 48px,
+      'header-bg-color': getCssVar('fill-color', 'blank'),
+      'header-text-color': getCssVar('text-primary-color'),
+      'header-font-size': 13px,
+      'content-bg-color': getCssVar('fill-color', 'blank'),
+      'content-font-size': 13px,
+      'content-text-color': getCssVar('text-primary-color'),
+    ),
+    $collapse
+);
+
+// Transfer
+// css3 var in packages/theme-chalk/src/transfer.scss
+$transfer: () !default;
+$transfer: map.merge(
+    (
+      'border-color': getCssVar('border-color-lighter'),
+      'border-radius': getCssVar('border-radius-base'),
+      'panel-width': 200px,
+      'panel-header-height': 40px,
+      'panel-header-bg-color': getCssVar('fill-color', 'light'),
+      'panel-footer-height': 40px,
+      'panel-body-height': 278px,
+      'item-height': 30px,
+      'filter-height': 32px,
+    ),
+    $transfer
+);
+
+// Timeline
+// css3 var in packages/theme-chalk/src/timeline-item.scss
+$timeline: () !default;
+$timeline: map.merge(
+    (
+      'node-size-normal': 12px,
+      'node-size-large': 14px,
+      'node-color': getCssVar('border-color-light'),
+    ),
+    $timeline
+);
+
+// Calendar
+// css3 var in packages/theme-chalk/src/calendar.scss
+$calendar: () !default;
+$calendar: map.merge(
+    (
+      'border':
+      var(
+          #{getCssVarName('table-border')},
+          1px solid #{getCssVar('border-color-lighter')}
+      ),
+      'header-border-bottom': getCssVar('calendar-border'),
+      'selected-bg-color': getCssVar('color', 'primary', 'light-9'),
+      'cell-width': 85px,
+    ),
+    $calendar
+);
+
+// Upload
+// css3 var in packages/theme-chalk/src/upload.scss
+$upload: () !default;
+$upload: map.merge(
+    (
+      'dragger-padding-horizontal': 40px,
+      'dragger-padding-vertical': 10px,
+    ),
+    $upload
+);
+
+// header
+$header: () !default;
+$header: map.merge(
+    (
+      'height': 60px,
+    ),
+    $header
+);
+
+// footer
+$footer: () !default;
+$footer: map.merge(
+    (
+      'height': 60px,
+    ),
+    $footer
+);
+
+// Popup
+// css3 var in packages/theme-chalk/src/popup.scss
+$popup: () !default;
+$popup: map.merge(
+    (
+      'modal-bg-color': getCssVar('color-black'),
+      'modal-opacity': 0.5,
+    ),
+    $popup
+);

package/theme-style/src/container.scss

@@ -0,0 +1,14 @@
+@use 'mixins/mixins' as *;
+
+@include b(container) {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  flex-basis: auto;
+  box-sizing: border-box;
+  min-width: 0;
+
+  @include when(vertical) {
+    flex-direction: column;
+  }
+}

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

@@ -0,0 +1,110 @@
+@use '../common/var' as *;
+@use '../mixins/mixins' as *;
+@use '../mixins/var' as *;
+@use './picker-panel.scss';
+
+@include b(date-picker) {
+  @include set-component-css-var('datepicker', $datepicker);
+}
+
+@include b(date-picker) {
+  width: 322px;
+
+  &.has-sidebar.has-time {
+    width: 434px;
+  }
+
+  &.has-sidebar {
+    width: 438px;
+  }
+
+  &.has-time .#{$namespace}-picker-panel__body-wrapper {
+    position: relative;
+  }
+
+  .#{$namespace}-picker-panel__content {
+    width: 292px;
+  }
+
+  table {
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  @include e(editor-wrap) {
+    position: relative;
+    display: table-cell;
+    padding: 0 5px;
+  }
+
+  @include e(time-header) {
+    position: relative;
+    border-bottom: 1px solid getCssVar('datepicker-inner-border-color');
+    font-size: 12px;
+    padding: 8px 5px 5px;
+    display: table;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  @include e(header) {
+    margin: 12px;
+    text-align: center;
+
+    @include m(bordered) {
+      margin-bottom: 0;
+      padding-bottom: 12px;
+      border-bottom: solid 1px getCssVar('border-color-lighter');
+
+      & + .#{$namespace}-picker-panel__content {
+        margin-top: 0;
+      }
+    }
+  }
+
+  @include e(header-label) {
+    font-size: 16px;
+    font-weight: 500;
+    padding: 0 5px;
+    line-height: 22px;
+    text-align: center;
+    cursor: pointer;
+    color: getCssVar('text-color', 'regular');
+
+    &:hover {
+      color: getCssVar('datepicker-hover-text-color');
+    }
+    &:focus-visible {
+      outline: none;
+      color: getCssVar('datepicker-hover-text-color');
+    }
+
+    &.active {
+      color: getCssVar('datepicker-active-color');
+    }
+  }
+
+  @include e(prev-btn) {
+    float: left;
+  }
+
+  @include e(next-btn) {
+    float: right;
+  }
+
+  @include e(time-wrap) {
+    padding: 10px;
+    text-align: center;
+  }
+
+  @include e(time-label) {
+    float: left;
+    cursor: pointer;
+    line-height: 30px;
+    margin-left: 10px;
+  }
+
+  .#{$namespace}-time-panel {
+    position: absolute;
+  }
+}

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

@@ -0,0 +1,113 @@
+@use '../mixins/mixins' as *;
+@use '../common/var' as *;
+@use '../mixins/var' as *;
+
+@include b(date-range-picker) {
+  @include set-component-css-var('datepicker', $datepicker);
+}
+
+@include b(date-range-picker) {
+  width: 646px;
+
+  &.has-sidebar {
+    width: 756px;
+  }
+
+  &.has-time .#{$namespace}-picker-panel__body-wrapper {
+    position: relative;
+  }
+
+  table {
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  .#{$namespace}-picker-panel__body {
+    min-width: 513px;
+  }
+
+  .#{$namespace}-picker-panel__content {
+    margin: 0;
+  }
+
+  @include e(header) {
+    position: relative;
+    text-align: center;
+    height: 28px;
+
+    [class*='arrow-left'] {
+      float: left;
+    }
+
+    [class*='arrow-right'] {
+      float: right;
+    }
+
+    div {
+      font-size: 16px;
+      font-weight: 500;
+      margin-right: 50px;
+    }
+  }
+
+  @include e(content) {
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 16px;
+
+    @include when(left) {
+      border-right: 1px solid getCssVar('datepicker-inner-border-color');
+    }
+    .#{$namespace}-date-range-picker__header {
+      div {
+        margin-left: 50px;
+        margin-right: 50px;
+      }
+    }
+  }
+
+  @include e(editors-wrap) {
+    box-sizing: border-box;
+    display: table-cell;
+
+    @include when(right) {
+      text-align: right;
+    }
+  }
+
+  @include e(time-header) {
+    position: relative;
+    border-bottom: 1px solid getCssVar('datepicker-inner-border-color');
+    font-size: 12px;
+    padding: 8px 5px 5px 5px;
+    display: table;
+    width: 100%;
+    box-sizing: border-box;
+
+    > .#{$namespace}-icon-arrow-right {
+      font-size: 20px;
+      vertical-align: middle;
+      display: table-cell;
+      color: getCssVar('datepicker-icon-color');
+    }
+  }
+
+  @include e(time-picker-wrap) {
+    position: relative;
+    display: table-cell;
+    padding: 0 5px;
+
+    .#{$namespace}-picker-panel {
+      position: absolute;
+      top: 13px;
+      right: 0;
+      z-index: 1;
+      background: $color-white;
+    }
+    .#{$namespace}-time-panel {
+      position: absolute;
+    }
+  }
+}