vft 0.0.147 → 0.0.148

package/theme-style/src/checkbox.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'common/var' as *;
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
@@ -7,7 +6,6 @@
 
 $checkbox-height: () !default;
 $checkbox-height: map.merge($common-component-size, $checkbox-height);
-
 $checkbox-bordered-input-height: () !default;
 $checkbox-bordered-input-height: map.merge(
   (
@@ -17,7 +15,6 @@ $checkbox-bordered-input-height: map.merge(
   ),
   $checkbox-bordered-input-height
 );
-
 $checkbox-font-size: () !default;
 $checkbox-font-size: map.merge(
   (
@@ -26,7 +23,6 @@ $checkbox-font-size: map.merge(
   ),
   $checkbox-font-size
 );
-
 $checkbox-bordered-input-width: () !default;
 $checkbox-bordered-input-width: map.merge(
   $checkbox-bordered-input-height,
@@ -38,6 +34,21 @@ $checkbox-bordered-input-width: map.merge(
 }
 
 @include b(checkbox) {
+  @each $size in (large, small) {
+    &.#{$namespace}-checkbox--#{$size} {
+      height: map.get($checkbox-height, $size);
+
+      @include e(label) {
+        font-size: map.get($checkbox-font-size, $size);
+      }
+
+      @include e(inner) {
+        width: map.get($checkbox-font-size, $size);
+        height: map.get($checkbox-font-size, $size);
+      }
+    }
+  }
+
   color: getCssVar('checkbox-text-color');
   font-weight: getCssVar('checkbox-font-weight');
   font-size: getCssVar('font-size', 'base');
@@ -55,27 +66,12 @@ $checkbox-bordered-input-width: map.merge(
   }
 
   @include when(bordered) {
-    padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width
-      0 map.get($checkbox-bordered-padding-left, 'default')-$border-width;
-    border-radius: getCssVar('border-radius-base');
-    border: getCssVar('border');
-    box-sizing: border-box;
-
-    &.is-checked {
-      border-color: getCssVar('primary-color');
-    }
-
-    &.is-disabled {
-      border-color: getCssVar('border-color-lighter');
-    }
-
     @each $size in (large, small) {
       &.#{$namespace}-checkbox--#{$size} {
         padding: 0
           map.get($checkbox-bordered-padding-right, $size)-$border-width
           0
           map.get($checkbox-bordered-padding-left, $size)-$border-width;
-
         border-radius: map.get($button-border-radius, $size);
 
         .#{$namespace}-checkbox__label {
@@ -89,6 +85,20 @@ $checkbox-bordered-input-width: map.merge(
       }
     }
 
+    padding: 0 map.get($checkbox-bordered-padding-right, 'default')-$border-width
+      0 map.get($checkbox-bordered-padding-left, 'default')-$border-width;
+    border-radius: getCssVar('border-radius-base');
+    border: getCssVar('border');
+    box-sizing: border-box;
+
+    &.is-checked {
+      border-color: getCssVar('primary-color');
+    }
+
+    &.is-disabled {
+      border-color: getCssVar('border-color-lighter');
+    }
+
     &.#{$namespace}-checkbox--small {
       .#{$namespace}-checkbox__inner {
         &::after {
@@ -99,14 +109,6 @@ $checkbox-bordered-input-width: map.merge(
     }
   }
 
-  input:focus-visible {
-    & + .#{$namespace}-checkbox__inner {
-      outline: 2px solid getCssVar('checkbox-input-border-color-hover');
-      outline-offset: 1px;
-      border-radius: getCssVar('checkbox-border-radius');
-    }
-  }
-
   @include e(input) {
     white-space: nowrap;
     cursor: pointer;
@@ -173,6 +175,7 @@ $checkbox-bordered-input-width: map.merge(
         color: getCssVar('checkbox-checked-text-color');
       }
     }
+
     @include when(focus) {
       // Visually distinguish when focus
       &:not(.is-checked) {
@@ -181,6 +184,7 @@ $checkbox-bordered-input-width: map.merge(
         }
       }
     }
+
     @include when(indeterminate) {
       .#{$namespace}-checkbox__inner {
         background-color: getCssVar('checkbox-checked-bg-color');
@@ -204,6 +208,7 @@ $checkbox-bordered-input-width: map.merge(
       }
     }
   }
+
   @include e(inner) {
     display: inline-block;
     position: relative;
@@ -256,16 +261,11 @@ $checkbox-bordered-input-width: map.merge(
     font-size: getCssVar('checkbox-font-size');
   }
 
-  @each $size in (large, small) {
-    &.#{$namespace}-checkbox--#{$size} {
-      height: map.get($checkbox-height, $size);
-      @include e(label) {
-        font-size: map.get($checkbox-font-size, $size);
-      }
-      @include e(inner) {
-        width: map.get($checkbox-font-size, $size);
-        height: map.get($checkbox-font-size, $size);
-      }
+  input:focus-visible {
+    & + .#{$namespace}-checkbox__inner {
+      outline: 2px solid getCssVar('checkbox-input-border-color-hover');
+      outline-offset: 1px;
+      border-radius: getCssVar('checkbox-border-radius');
     }
   }
 
@@ -279,6 +279,7 @@ $checkbox-bordered-input-width: map.merge(
         }
       }
     }
+
     @include e(inner) {
       &::after {
         width: 2px;

package/theme-style/src/clamp-toggle.scss

@@ -12,6 +12,7 @@ $name: clamp-toggle;
 @include b($name) {
   font-size: getCompCssVar('size');
   color: getCompCssVar('color');
+
   @include e(more) {
     font-size: getCompCssVar('toggle-size');
     color: getCompCssVar('toggle-color');

package/theme-style/src/col.scss

@@ -1,11 +1,11 @@
 @use 'sass:math';
-
 @use 'common/var' as *;
 @use 'mixins/mixins' as *;
 @use 'mixins/_col' as *;
 
 [class*='#{$namespace}-col-'] {
   box-sizing: border-box;
+
   @include when(guttered) {
     display: block;
     min-height: 1px;
@@ -14,6 +14,7 @@
 
 .#{$namespace}-col-0 {
   display: none;
+
   @include when(guttered) {
     display: none;
   }
@@ -41,11 +42,7 @@
 }
 
 @include col-size(xs);
-
 @include col-size(sm);
-
 @include col-size(md);
-
 @include col-size(lg);
-
 @include col-size(xl);

package/theme-style/src/collapse.scss

@@ -4,10 +4,10 @@
 @use 'common/transition';
 
 @include b(collapse) {
-  @include set-component-css-var('collapse', $collapse);
-
   border-top: 1px solid getCssVar('collapse-border-color');
   border-bottom: 1px solid getCssVar('collapse-border-color');
+
+  @include set-component-css-var('collapse', $collapse);
 }
 
 @include b(collapse-item) {
@@ -17,6 +17,7 @@
       cursor: not-allowed;
     }
   }
+
   @include e(header) {
     display: flex;
     align-items: center;
@@ -30,20 +31,24 @@
     font-weight: 500;
     transition: border-bottom-color getCssVar('transition-duration');
     outline: none;
+
     @include e(arrow) {
       margin: 0 8px 0 auto;
       transition: transform getCssVar('transition-duration');
       font-weight: 300;
+
       @include when(active) {
         transform: rotate(90deg);
       }
     }
-    &.focusing:focus:not(:hover) {
-      color: getCssVar('primary-color');
-    }
+
     @include when(active) {
       border-bottom-color: transparent;
     }
+
+    &.focusing:focus:not(:hover) {
+      color: getCssVar('primary-color');
+    }
   }
 
   @include e(wrap) {

package/theme-style/src/color/index.scss

@@ -8,7 +8,6 @@
 // rgba color above solid color
 @function mix-overlay-color($upper, $lower) {
   $opacity: color.alpha($upper);
-
   $red: color.red($upper) * $opacity + color.red($lower) * (1 - $opacity);
   $green: color.green($upper) * $opacity + color.green($lower) * (1 - $opacity);
   $blue: color.blue($upper) * $opacity + color.blue($lower) * (1 - $opacity);

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

@@ -18,6 +18,7 @@
   0% {
     opacity: 0;
   }
+
   100% {
   }
 }
@@ -25,6 +26,7 @@
 @keyframes v-modal-out {
   0% {
   }
+
   100% {
     opacity: 0;
   }

package/theme-style/src/dark/css-vars.scss

@@ -6,7 +6,6 @@
 @use '../mixins/mixins.scss' as *;
 
 html.dark {
-
   // hex colors
   @each $type in (primary, success, warning, danger, error, info) {
     @include set-css-color-type($colors, $type);

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

@@ -140,7 +140,7 @@ $fill-color: map.merge(
 
 // mix to hex to avoid overlay issues
 @each $key, $val in $fill-color {
-  @if  $key != 'blank' {
+  @if $key != 'blank' {
     $fill-color: map.merge(
       $fill-color,
       (

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

@@ -9,27 +9,6 @@
 @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;
@@ -81,7 +60,7 @@
     position: relative;
     border-bottom: 1px solid getCssVar('datepicker-inner-border-color');
     font-size: 12px;
-    padding: 8px 5px 5px 5px;
+    padding: 8px 5px 5px;
     display: table;
     width: 100%;
     box-sizing: border-box;
@@ -110,4 +89,25 @@
       position: absolute;
     }
   }
+
+  &.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;
+  }
 }

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

@@ -11,6 +11,7 @@
         .#{$namespace}-date-table-cell {
           background-color: getCssVar('datepicker-inrange-bg-color');
         }
+
         td.available:hover {
           color: getCssVar('datepicker-text-color');
         }
@@ -45,6 +46,7 @@
       height: 30px;
       padding: 3px 0;
       box-sizing: border-box;
+
       @include b(date-table-cell__text) {
         width: 24px;
         height: 24px;
@@ -81,6 +83,7 @@
 
     &.in-range .#{$namespace}-date-table-cell {
       background-color: getCssVar('datepicker-inrange-bg-color');
+
       &:hover {
         background-color: getCssVar('datepicker-inrange-hover-bg-color');
       }
@@ -91,6 +94,7 @@
         color: $color-white;
         background-color: getCssVar('datepicker-active-color');
       }
+
       &:focus-visible {
         .#{$namespace}-date-table-cell__text {
           outline: 2px solid getCssVar('datepicker-active-color');
@@ -132,6 +136,7 @@
       margin-right: 5px;
       background-color: getCssVar('datepicker-inrange-bg-color');
       border-radius: 15px;
+
       &:hover {
         background-color: getCssVar('datepicker-inrange-hover-bg-color');
       }

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

@@ -10,16 +10,19 @@
     text-align: center;
     padding: 8px 0;
     cursor: pointer;
+
     & div {
       height: 48px;
       padding: 6px 0;
       box-sizing: border-box;
     }
+
     &.today {
       .cell {
         color: getCssVar('primary-color');
         font-weight: bold;
       }
+
       &.start-date .cell,
       &.end-date .cell {
         color: $color-white;
@@ -44,6 +47,7 @@
       color: getCssVar('datepicker-text-color');
       margin: 0 auto;
       border-radius: 18px;
+
       &:hover {
         color: getCssVar('datepicker-hover-text-color');
       }
@@ -51,10 +55,12 @@
 
     &.in-range div {
       background-color: getCssVar('datepicker-inrange-bg-color');
+
       &:hover {
         background-color: getCssVar('datepicker-inrange-hover-bg-color');
       }
     }
+
     &.start-date div,
     &.end-date div {
       color: $color-white;
@@ -82,6 +88,7 @@
 
     &:focus-visible {
       outline: none;
+
       .cell {
         outline: 2px solid getCssVar('datepicker-active-color');
       }

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

@@ -7,13 +7,6 @@
   border-radius: getCssVar('border-radius-base');
   line-height: 30px;
 
-  .#{$namespace}-time-panel {
-    margin: 5px 0;
-    border: solid 1px getCssVar('datepicker-border-color');
-    background-color: getCssVar('bg-color', 'overlay');
-    box-shadow: getCssVar('box-shadow-light');
-  }
-
   @include e((body, body-wrapper)) {
     &::after {
       content: '';
@@ -85,13 +78,6 @@
     outline: none;
     margin-top: 3px;
 
-    &:hover {
-      color: getCssVar('datepicker-hover-text-color');
-    }
-    &:focus-visible {
-      color: getCssVar('datepicker-hover-text-color');
-    }
-
     @include when(disabled) {
       color: getCssVar('text-disabled-color');
 
@@ -99,6 +85,14 @@
         cursor: not-allowed;
       }
     }
+
+    &:hover {
+      color: getCssVar('datepicker-hover-text-color');
+    }
+
+    &:focus-visible {
+      color: getCssVar('datepicker-hover-text-color');
+    }
     & .#{$namespace}-icon {
       cursor: pointer;
     }
@@ -107,6 +101,13 @@
   @include e(link-btn) {
     vertical-align: middle;
   }
+
+  .#{$namespace}-time-panel {
+    margin: 5px 0;
+    border: solid 1px getCssVar('datepicker-border-color');
+    background-color: getCssVar('bg-color', 'overlay');
+    box-shadow: getCssVar('box-shadow-light');
+  }
 }
 
 .#{$namespace}-picker-panel *[slot='sidebar'],

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

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use '../mixins/mixins' as *;
 @use '../mixins/var' as *;
 @use '../common/var' as *;
@@ -17,30 +16,12 @@
 }
 
 @include b(date-editor) {
-  @include set-component-css-var('date-editor', $date-editor);
-  @include set-component-css-var('input', $input);
   position: relative;
   display: inline-block;
   text-align: left;
 
-  &.#{$namespace}-input__wrapper {
-    @include inset-input-border(
-      var(
-        #{getCssVarName('input-border-color')},
-        map.get($input, 'border-color')
-      )
-    );
-
-    &:hover {
-      @include inset-input-border(#{getCssVar('input', 'hover-border-color')});
-    }
-  }
-
-  &.#{$namespace}-input,
-  &.#{$namespace}-input__wrapper {
-    width: getCssVar('date-editor-width');
-    height: var(#{getCssVarName('input-height')}, getCssVar('component-size'));
-  }
+  @include set-component-css-var('date-editor', $date-editor);
+  @include set-component-css-var('input', $input);
 
   @include m((monthrange)) {
     @include css-var-from-global(
@@ -70,6 +51,25 @@
     }
   }
 
+  &.#{$namespace}-input__wrapper {
+    @include inset-input-border(
+      var(
+        #{getCssVarName('input-border-color')},
+        map.get($input, 'border-color')
+      )
+    );
+
+    &:hover {
+      @include inset-input-border(#{getCssVar('input', 'hover-border-color')});
+    }
+  }
+
+  &.#{$namespace}-input,
+  &.#{$namespace}-input__wrapper {
+    width: getCssVar('date-editor-width');
+    height: var(#{getCssVarName('input-height')}, getCssVar('component-size'));
+  }
+
   .close-icon {
     cursor: pointer;
   }
@@ -147,19 +147,6 @@
 }
 
 @include b(range-editor) {
-  &.#{$namespace}-input__wrapper {
-    display: inline-flex;
-    align-items: center;
-    padding: 0 10px;
-  }
-
-  @include when(active) {
-    @include inset-input-border(#{getCssVar('input', 'focus-border-color')});
-    &:hover {
-      @include inset-input-border(#{getCssVar('input', 'focus-border-color')});
-    }
-  }
-
   @each $size in (large, small) {
     @include m($size) {
       line-height: getCssVar('component-size', $size);
@@ -181,6 +168,14 @@
     }
   }
 
+  @include when(active) {
+    @include inset-input-border(#{getCssVar('input', 'focus-border-color')});
+
+    &:hover {
+      @include inset-input-border(#{getCssVar('input', 'focus-border-color')});
+    }
+  }
+
   @include when(disabled) {
     background-color: map.get($input-disabled, 'fill');
     border-color: map.get($input-disabled, 'border');
@@ -196,6 +191,7 @@
       background-color: map.get($input-disabled, 'fill');
       color: map.get($input-disabled, 'text-color');
       cursor: not-allowed;
+
       &::placeholder {
         color: map.get($input-disabled, 'placeholder-color');
       }
@@ -205,4 +201,9 @@
       color: map.get($input-disabled, 'text-color');
     }
   }
+  &.#{$namespace}-input__wrapper {
+    display: inline-flex;
+    align-items: center;
+    padding: 0 10px;
+  }
 }

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

@@ -52,6 +52,7 @@
 
     &:focus-visible {
       outline: none;
+
       .cell {
         outline: 2px solid getCssVar('datepicker-active-color');
       }

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

@@ -69,13 +69,14 @@ $name: date-time-select;
         font-size: 13px;
         line-height: 1;
         position: relative;
-        &:hover {
+
+        @include when(active) {
           color: getCssVar('primary-color');
-          background-color: getCssVar('primary-color-light-9');
         }
 
-        @include when(active) {
+        &:hover {
           color: getCssVar('primary-color');
+          background-color: getCssVar('primary-color-light-9');
         }
       }
     }
@@ -95,6 +96,9 @@ $name: date-time-select;
     }
   }
 
+  @include icon-arrow-down;
+  @include icon-circle-close;
+
   .vft-scrollbar {
     overflow: visible;
   }
@@ -103,9 +107,6 @@ $name: date-time-select;
     @include icon-common($icon-check);
   }
 
-  @include icon-arrow-down;
-  @include icon-circle-close;
-
   //.#{$namespace}-popper {
   //  padding-left: 16px;
   //  padding-top: 16px;