vft 0.0.142 → 0.0.144

package/theme-style/src/form.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'mixins/var' as *;
 @use 'common/var' as *;
@@ -9,52 +8,61 @@ $form-item-margin-bottom: map.merge(
   (
     'large': 22px,
     'default': 18px,
-    'small': 18px
+    'small': 18px,
   ),
   $form-item-margin-bottom
 );
-
 $form-item-line-height: () !default;
 $form-item-line-height: map.merge(
   (
     'large': 40px,
     'default': 32px,
-    'small': 24px
+    'small': 24px,
   ),
   $form-item-line-height
 );
-
 $form-item-error-padding-top: () !default;
 $form-item-error-padding-top: map.merge(
   (
     'large': 4px,
     'default': 2px,
-    'small': 2px
+    'small': 2px,
   ),
   $form-item-error-padding-top
 );
-
 $form-item-label-top-line-height: () !default;
 $form-item-label-top-line-height: map.merge(
   (
     'large': 22px,
     'default': 22px,
-    'small': 20px
+    'small': 20px,
   ),
   $form-item-label-top-line-height
 );
-
 $form-item-label-top-margin-bottom: () !default;
 $form-item-label-top-margin-bottom: map.merge(
   (
     'large': 12px,
     'default': 8px,
-    'small': 4px
+    'small': 4px,
   ),
   $form-item-label-top-margin-bottom
 );
 
 @include b(form) {
+  @each $size in (large, default, small) {
+    @include m($size) {
+      &.#{$namespace}-form--label-top {
+        .#{$namespace}-form-item {
+          .#{$namespace}-form-item__label {
+            margin-bottom: #{map.get($form-item-label-top-margin-bottom, $size)};
+            line-height: #{map.get($form-item-label-top-line-height, $size)};
+          }
+        }
+      }
+    }
+  }
+
   @include set-component-css-var('form', $form);
 
   @include m(label-left) {
@@ -62,6 +70,7 @@ $form-item-label-top-margin-bottom: map.merge(
       justify-content: flex-start;
     }
   }
+
   @include m(label-top) {
     .#{$namespace}-form-item {
       display: block;
@@ -75,6 +84,7 @@ $form-item-label-top-margin-bottom: map.merge(
       }
     }
   }
+
   @include m(inline) {
     .#{$namespace}-form-item {
       display: inline-flex;
@@ -91,54 +101,37 @@ $form-item-label-top-margin-bottom: map.merge(
       }
     }
   }
-
-  @each $size in (large, default, small) {
-    @include m($size) {
-      &.#{$namespace}-form--label-top {
-        .#{$namespace}-form-item {
-          .#{$namespace}-form-item__label {
-            margin-bottom: #{map.get($form-item-label-top-margin-bottom, $size)};
-            line-height: #{map.get($form-item-label-top-line-height, $size)};
-          }
-        }
-      }
-    }
-  }
 }
 
 @include b(form-item) {
-  display: flex;
   --font-size: #{map.get($input-font-size, 'default')};
-  margin-bottom: #{map.get($form-item-margin-bottom, 'default')};
-
-  .#{$namespace}-form-item {
-    margin-bottom: 0;
-  }
-
-  .#{$namespace}-input__validateIcon {
-    display: none;
-  }
 
   @each $size in (large, default, small) {
     @include m($size) {
       --font-size: #{map.get($input-font-size, $size)};
-      @include set-css-var-value(('form', 'label-font-size'), var(--font-size));
 
       margin-bottom: #{map.get($form-item-margin-bottom, $size)};
 
+      @include set-css-var-value(('form', 'label-font-size'), var(--font-size));
+
       @include e(label) {
         height: #{map.get($form-item-line-height, $size)};
         line-height: #{map.get($form-item-line-height, $size)};
       }
+
       @include e(content) {
         line-height: #{map.get($form-item-line-height, $size)};
       }
+
       @include e(error) {
         padding-top: #{map.get($form-item-error-padding-top, $size)};
       }
     }
   }
 
+  display: flex;
+  margin-bottom: #{map.get($form-item-margin-bottom, 'default')};
+
   @include e(label-wrap) {
     display: flex;
   }
@@ -147,17 +140,15 @@ $form-item-label-top-margin-bottom: map.merge(
     display: inline-flex;
     justify-content: flex-end;
     align-items: flex-start;
-
     flex: 0 0 auto;
     font-size: getCssVar('form-label-font-size');
     color: getCssVar('text', 'regular-color');
-
     height: #{map.get($form-item-line-height, 'default')};
     line-height: #{map.get($form-item-line-height, 'default')};
-
     padding: 0 12px 0 0;
     box-sizing: border-box;
   }
+
   @include e(content) {
     display: flex;
     flex-wrap: wrap;
@@ -172,6 +163,7 @@ $form-item-label-top-margin-bottom: map.merge(
       vertical-align: top;
     }
   }
+
   @include e(error) {
     color: getCssVar('danger-color');
     font-size: 12px;
@@ -194,15 +186,18 @@ $form-item-label-top-margin-bottom: map.merge(
     @include pseudo('not(.is-no-asterisk)') {
       &.asterisk-left {
         > .#{$namespace}-form-item__label:before,
-        > .#{$namespace}-form-item__label-wrap > .#{$namespace}-form-item__label:before {
+        > .#{$namespace}-form-item__label-wrap
+          > .#{$namespace}-form-item__label:before {
           content: '*';
           color: getCssVar('danger-color');
           margin-right: 4px;
         }
       }
+
       &.asterisk-right {
         > .#{$namespace}-form-item__label:after,
-        > .#{$namespace}-form-item__label-wrap > .#{$namespace}-form-item__label:after {
+        > .#{$namespace}-form-item__label-wrap
+          > .#{$namespace}-form-item__label:after {
           content: '*';
           color: getCssVar('danger-color');
           margin-left: 4px;
@@ -238,4 +233,12 @@ $form-item-label-top-margin-bottom: map.merge(
       display: inline-flex;
     }
   }
+
+  .#{$namespace}-form-item {
+    margin-bottom: 0;
+  }
+
+  .#{$namespace}-input__validateIcon {
+    display: none;
+  }
 }

package/theme-style/src/full-screen.scss

@@ -25,10 +25,10 @@ $name: full-screen;
   }
 
   .icon-full-screen {
-    @include icon-common($icon-full-screen)
+    @include icon-common($icon-full-screen);
   }
 
   .icon-exit-full-screen {
-    @include icon-common($icon-exit-full-screen)
+    @include icon-common($icon-exit-full-screen);
   }
 }

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

@@ -13,6 +13,7 @@ $name: header-layout;
   height: getCompCssVar('height');
   background-color: getCompCssVar('bg-color');
   z-index: getCompCssVar('z-index');
+
   .vft-container {
     height: 100%;
 
@@ -39,7 +40,7 @@ $name: header-layout;
     }
 
     @include e(footer) {
-      height: calc(getCompCssVar('height') - getCompCssVar('top-height'))
+      height: calc(getCompCssVar('height') - getCompCssVar('top-height'));
     }
   }
 }

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

@@ -13,16 +13,10 @@ $name: horizontal-menu;
   height: 100%;
 
   @include e(normal) {
-    .vft-menu--popup {
-      box-shadow: getCssVar('box-shadow');
-    }
-
     border-radius: getCssVar('popper-border-radius');
-  }
 
-  .vft-menu-no-popup-item {
-    &.is-active {
-      background-color: getCssVar('menu-no-popup-active-bg-color')!important;
+    .vft-menu--popup {
+      box-shadow: getCssVar('box-shadow');
     }
   }
 
@@ -35,12 +29,12 @@ $name: horizontal-menu;
 
     .vft-menu {
       height: 100%;
-      @include overlay();
-
       display: flex;
       flex: 1 1 0;
       box-shadow: none;
 
+      @include overlay;
+
       .vft-menu-popup-item {
         line-height: 1;
         height: 100%;
@@ -76,9 +70,15 @@ $name: horizontal-menu;
           grid-auto-flow: column;
           gap: getCompCssVar('tile-content-col-item-gap');
           position: relative;
-          grid-auto-columns: getCssVar('menu-item-min-width');;
+          grid-auto-columns: getCssVar('menu-item-min-width');
         }
       }
     }
   }
+
+  .vft-menu-no-popup-item {
+    &.is-active {
+      background-color: getCssVar('menu-no-popup-active-bg-color') !important;
+    }
+  }
 }

package/theme-style/src/icon-text.scss

@@ -19,15 +19,15 @@ $name: icon-text;
   color: getCompCssVar('color');
   transition: getCssVar('transition-color');
 
+  @include when(col) {
+    flex-direction: column;
+  }
+
   &:hover {
     color: getCompCssVar('hover-color');
 
     i {
-      color: getCssVarWithDefault(icon-hover-color, getCompCssVar(color))
+      color: getCssVarWithDefault(icon-hover-color, getCompCssVar(color));
     }
   }
-
-  @include when(col) {
-    flex-direction: column;
-  }
 }

package/theme-style/src/icon.scss

@@ -17,7 +17,7 @@ $name: icon;
   animation: getCompCssVar('animation');
 
   &:hover {
-    color: getCssVarWithDefault(icon-hover-color, getCompCssVar(color))
+    color: getCssVarWithDefault(icon-hover-color, getCompCssVar(color));
   }
 }
 

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

@@ -88,7 +88,8 @@
     top: 50%;
     transform: translateY(-50%);
     left: 40px;
-    @include op-icon();
+
+    @include op-icon;
   }
 
   @include e(next) {
@@ -96,11 +97,12 @@
     transform: translateY(-50%);
     right: 40px;
     text-indent: 2px;
-    @include op-icon();
+
+    @include op-icon;
   }
 
   @include e(close) {
-    @include op-icon();
+    @include op-icon;
   }
 
   @include e(mask) {
@@ -112,8 +114,6 @@
     opacity: 0.5;
     background: #000;
   }
-
-
 }
 
 .viewer-fade-enter-active {
@@ -129,6 +129,7 @@
     transform: translate3d(0, -20px, 0);
     opacity: 0;
   }
+
   100% {
     transform: translate3d(0, 0, 0);
     opacity: 1;
@@ -140,6 +141,7 @@
     transform: translate3d(0, 0, 0);
     opacity: 1;
   }
+
   100% {
     transform: translate3d(0, -20px, 0);
     opacity: 0;
@@ -147,24 +149,31 @@
 }
 
 @include icon-close;
+
 .icon-arrow-left {
-  @include icon-common($icon-arrow-left)
+  @include icon-common($icon-arrow-left);
 }
+
 .icon-arrow-right {
-  @include icon-common($icon-arrow-right)
+  @include icon-common($icon-arrow-right);
 }
+
 .icon-zoom-out {
-  @include icon-common($icon-zoom-out)
+  @include icon-common($icon-zoom-out);
 }
+
 .icon-zoom-in {
-  @include icon-common($icon-zoom-in)
+  @include icon-common($icon-zoom-in);
 }
+
 .icon-scale-to-original {
-  @include icon-common($icon-scale-to-original)
+  @include icon-common($icon-scale-to-original);
 }
+
 .icon-refresh-left {
-  @include icon-common($icon-refresh-left)
+  @include icon-common($icon-refresh-left);
 }
+
 .icon-refresh-right {
-  @include icon-common($icon-refresh-right)
+  @include icon-common($icon-refresh-right);
 }

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

@@ -1,45 +1,40 @@
 @use 'sass:math';
 @use 'sass:map';
-
 @use 'mixins/mixins' as *;
 @use 'common/var' as *;
 
 @include b(input-number) {
-  position: relative;
-  display: inline-flex;
-  width: map.get($input-number-width, 'default');
-  line-height: #{map.get($input-height, 'default') - 2};
+  @each $size in (large, small) {
+    @include m($size) {
+      width: map.get($input-number-width, $size);
+      line-height: #{map.get($input-height, $size) - 2};
 
-  .#{$namespace}-input {
-    &__wrapper {
-      padding-left: #{map.get($input-height, 'default') + 10};
-      padding-right: #{map.get($input-height, 'default') + 10};
-    }
+      @include e((increase, decrease)) {
+        width: map.get($input-height, $size);
+        font-size: map.get($input-font-size, $size);
+      }
 
-    &__inner {
-      -webkit-appearance: none;
-      -moz-appearance: textfield;
-      &::-webkit-inner-spin-button,
-      &::-webkit-outer-spin-button {
-        margin: 0;
-        -webkit-appearance: none;
+      .#{$namespace}-input__wrapper {
+        padding-left: #{map.get($input-height, $size) + 7};
+        padding-right: #{map.get($input-height, $size) + 7};
       }
-      text-align: center;
-      line-height: 1;
     }
   }
 
+  position: relative;
+  display: inline-flex;
+  width: map.get($input-number-width, 'default');
+  line-height: #{map.get($input-height, 'default') - 2};
+
   @include e((increase, decrease)) {
     display: flex;
     justify-content: center;
     align-items: center;
     height: auto;
-
     position: absolute;
     z-index: 1;
     top: 1px;
     bottom: 1px;
-
     width: map.get($input-height, 'default');
     background: getCssVar('fill-color', 'light');
     color: getCssVar('text-regular-color');
@@ -92,23 +87,6 @@
     }
   }
 
-  @each $size in (large, small) {
-    @include m($size) {
-      width: map.get($input-number-width, $size);
-      line-height: #{map.get($input-height, $size) - 2};
-
-      @include e((increase, decrease)) {
-        width: map.get($input-height, $size);
-        font-size: map.get($input-font-size, $size);
-      }
-
-      .#{$namespace}-input__wrapper {
-        padding-left: #{map.get($input-height, $size) + 7};
-        padding-right: #{map.get($input-height, $size) + 7};
-      }
-    }
-  }
-
   @include m(small) {
     @include e((increase, decrease)) {
       [class*='#{$namespace}-icon'] {
@@ -125,20 +103,27 @@
   }
 
   @include when(controls-right) {
-    .#{$namespace}-input__wrapper {
-      padding-left: 15px;
-      padding-right: #{map.get($input-height, 'default') + 10};
+    @each $size in (large, small) {
+      &[class*='#{$size}'] {
+        [class*='increase'],
+        [class*='decrease'] {
+          @include set-css-var-value(
+            ('input', 'number-controls-height'),
+            math.div(map.get($input-height, $size) - 2, 2)
+          );
+        }
+      }
     }
 
     @include e((increase, decrease)) {
+      height: getCssVar('input-number-controls-height');
+      line-height: getCssVar('input-number-controls-height');
+
       @include set-css-var-value(
         ('input', 'number-controls-height'),
         math.div(map.get($input-height, 'default') - 2, 2)
       );
 
-      height: getCssVar('input-number-controls-height');
-      line-height: getCssVar('input-number-controls-height');
-
       [class*='#{$namespace}-icon'] {
         transform: scale(0.8);
       }
@@ -159,26 +144,40 @@
       border-left: getCssVar('border');
       border-radius: 0 0 getCssVar('border-radius-base') 0;
     }
+    .#{$namespace}-input__wrapper {
+      padding-left: 15px;
+      padding-right: #{map.get($input-height, 'default') + 10};
+    }
+  }
 
-    @each $size in (large, small) {
-      &[class*='#{$size}'] {
-        [class*='increase'],
-        [class*='decrease'] {
-          @include set-css-var-value(
-            ('input', 'number-controls-height'),
-            math.div(map.get($input-height, $size) - 2, 2)
-          );
-        }
+  @include icon-arrow-down;
+  @include icon-arrow-up;
+
+  .#{$namespace}-input {
+    &__wrapper {
+      padding-left: #{map.get($input-height, 'default') + 10};
+      padding-right: #{map.get($input-height, 'default') + 10};
+    }
+
+    &__inner {
+      -webkit-appearance: none;
+      -moz-appearance: textfield;
+      text-align: center;
+      line-height: 1;
+
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        margin: 0;
+        -webkit-appearance: none;
       }
     }
   }
 
   .icon-minus {
-    @include icon-common($icon-minus)
+    @include icon-common($icon-minus);
   }
+
   .icon-plus {
-    @include icon-common($icon-plus)
+    @include icon-common($icon-plus);
   }
-  @include icon-arrow-down;
-  @include icon-arrow-up;
 }