vft 0.0.142 → 0.0.144

package/theme-style/src/input.scss

@@ -11,83 +11,117 @@ $name: input;
 @include set-root-css-vars($name, $input);
 
 @include b(input) {
-  @include css-var-from-global('input-height', 'component-size');
+  @each $slot in (prefix, suffix) {
+    @include e($slot) {
+      display: inline-flex;
+      white-space: nowrap;
+      flex-shrink: 0;
+      flex-wrap: nowrap;
+      height: 100%;
+      text-align: center;
+      color: var(
+        #{getCssVarName('input-icon-color')},
+        map-get($input, 'icon-color')
+      );
+      transition: all getCssVar('transition-duration');
+      pointer-events: none;
+    }
 
-  position: relative;
-  font-size: getCssVar('font-size', 'base');
-  display: inline-flex;
-  width: getCompCssVar('width');
-  line-height: getCssVar('input-height');
-  box-sizing: border-box;
-  vertical-align: middle;
-  @include scroll-bar;
+    @include e(#{$slot}-inner) {
+      @if $slot == prefix {
+        > :last-child {
+          margin-right: 8px;
+        }
 
-  & .#{$namespace}-input__clear,
-  & .#{$namespace}-input__password {
-    color: getCssVar('input-icon-color');
-    font-size: map-get($input-font-size, 'default');
-    cursor: pointer;
-    z-index: 1;
+        > :first-child {
+          &,
+          &.#{$namespace}-input__icon {
+            margin-left: 0;
+          }
+        }
+      } @else {
+        > :first-child {
+          margin-left: 8px;
+        }
+      }
 
-    &:hover {
-      color: getCssVar('input-clear-hover-color');
+      pointer-events: all;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
     }
   }
 
-  & .#{$namespace}-input__count {
-    height: 100%;
-    display: inline-flex;
-    align-items: center;
-    color: getCssVar('info-color');
-    font-size: 12px;
+  @each $size in (large, small) {
+    @include m($size) {
+      font-size: map-get($input-font-size, $size);
 
-    .#{$namespace}-input__count-inner {
-      background: getCssVar('fill-color', 'blank');
-      line-height: initial;
-      display: inline-block;
-      padding-left: 8px;
+      @include css-var-from-global('input-height', ('component-size', $size));
+
+      @include e(wrapper) {
+        padding: $border-width map-get($input-padding-horizontal, $size)-$border-width;
+      }
+
+      @include e(inner) {
+        @include set-css-var-value(
+          'input-inner-height',
+          calc(
+            var(
+                #{getCssVarName('input-height')},
+                #{map-get($input-height, $size)}
+              ) - $border-width * 2
+          )
+        );
+      }
     }
   }
 
+  position: relative;
+  font-size: getCssVar('font-size', 'base');
+  display: inline-flex;
+  width: getCompCssVar('width');
+  line-height: getCssVar('input-height');
+  box-sizing: border-box;
+  vertical-align: middle;
   transition: width 0.2s ease;
 
+  @include css-var-from-global('input-height', 'component-size');
+  @include scroll-bar;
+
   @include e(wrapper) {
     display: inline-flex;
     flex-grow: 1;
     align-items: center;
     justify-content: center;
     padding: $border-width map-get($input-padding-horizontal, 'default')-$border-width;
-    background-color: var(#{getCssVarName('input-bg-color')},map-get($input, 'bg-color'));
+    background-color: var(
+      #{getCssVarName('input-bg-color')},
+      map-get($input, 'bg-color')
+    );
     background-image: none;
-    border-radius: getCssVarWithDefault('input-border-radius',map-get($input, 'border-radius'));
+    border-radius: getCssVarWithDefault(
+      'input-border-radius',
+      map-get($input, 'border-radius')
+    );
     border: 1px solid getCompCssVar('border-color');
     transition: getCssVar('transition-all');
 
-    &:hover {
-      border: 1px solid getCompCssVar('hover-border-color');
-    }
-
     @include when(focus) {
       border: 1px solid getCompCssVar('focus-border-color');
     }
+
+    &:hover {
+      border: 1px solid getCompCssVar('hover-border-color');
+    }
   }
 
   @include e(inner) {
-    // use map-get as default value for date picker range
-    @include set-css-var-value(
-        'input-inner-height',
-        calc(
-          var(#{getCssVarName('input-height')},
-            #{map-get($input-height, 'default')}) - $border-width * 2
-        )
-    );
-
     width: 100%;
     flex-grow: 1;
     -webkit-appearance: none;
     color: var(
-        #{getCssVarName('input-text-color')},
-        map-get($input, 'text-color')
+      #{getCssVarName('input-text-color')},
+      map-get($input, 'text-color')
     );
     font-size: inherit;
     height: getCssVar('input-inner-height');
@@ -97,6 +131,16 @@ $name: input;
     border: none;
     background: none;
     box-sizing: border-box;
+    // use map-get as default value for date picker range
+    @include set-css-var-value(
+      'input-inner-height',
+      calc(
+        var(
+            #{getCssVarName('input-height')},
+            #{map-get($input-height, 'default')}
+          ) - $border-width * 2
+      )
+    );
 
     &:focus {
       outline: none;
@@ -104,8 +148,8 @@ $name: input;
 
     &::placeholder {
       color: getCssVarWithDefault(
-          'input-placeholder-color',
-          map-get($input, 'placeholder-color')
+        'input-placeholder-color',
+        map-get($input, 'placeholder-color')
       );
     }
 
@@ -120,52 +164,6 @@ $name: input;
     }
   }
 
-  @each $slot in (prefix, suffix) {
-    @include e($slot) {
-      display: inline-flex;
-      white-space: nowrap;
-      flex-shrink: 0;
-      flex-wrap: nowrap;
-      height: 100%;
-      text-align: center;
-      color: var(
-          #{getCssVarName('input-icon-color')},
-          map-get($input, 'icon-color')
-      );
-      transition: all getCssVar('transition-duration');
-      pointer-events: none;
-    }
-
-    @include e(#{$slot}-inner) {
-      pointer-events: all;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-
-      @if $slot == prefix {
-        > :last-child {
-          margin-right: 8px;
-        }
-
-        > :first-child {
-          &,
-          &.#{$namespace}-input__icon {
-            margin-left: 0;
-          }
-        }
-      } @else {
-        > :first-child {
-          margin-left: 8px;
-        }
-      }
-    }
-  }
-
-  & .#{$namespace}-input__icon {
-    transition: all getCssVar('transition-duration');
-    margin-left: 8px;
-  }
-
   @include e(validateIcon) {
     pointer-events: none;
   }
@@ -211,46 +209,63 @@ $name: input;
     }
   }
 
-  @each $size in (large, small) {
-    @include m($size) {
-      @include css-var-from-global('input-height', ('component-size', $size));
-      font-size: map-get($input-font-size, $size);
+  @include icon-close;
 
-      @include e(wrapper) {
-        padding: $border-width map-get($input-padding-horizontal, $size)-$border-width;
-      }
+  & .#{$namespace}-input__clear,
+  & .#{$namespace}-input__password {
+    color: getCssVar('input-icon-color');
+    font-size: map-get($input-font-size, 'default');
+    cursor: pointer;
+    z-index: 1;
 
-      @include e(inner) {
-        @include set-css-var-value(
-            'input-inner-height',
-            calc(
-              var(#{getCssVarName('input-height')},
-                #{map-get($input-height, $size)}) - $border-width * 2
-            )
-        );
-      }
+    &:hover {
+      color: getCssVar('input-clear-hover-color');
     }
   }
 
+  & .#{$namespace}-input__count {
+    height: 100%;
+    display: inline-flex;
+    align-items: center;
+    color: getCssVar('info-color');
+    font-size: 12px;
+
+    .#{$namespace}-input__count-inner {
+      background: getCssVar('fill-color', 'blank');
+      line-height: initial;
+      display: inline-block;
+      padding-left: 8px;
+    }
+  }
+
+  & .#{$namespace}-input__icon {
+    transition: all getCssVar('transition-duration');
+    margin-left: 8px;
+  }
+
   .icon-search {
-    @include icon-common($icon-search)
+    @include icon-common($icon-search);
   }
+
   .icon-hide {
-    @include icon-common($icon-hide)
+    @include icon-common($icon-hide);
   }
+
   .icon-view {
-    @include icon-common($icon-view)
+    @include icon-common($icon-view);
   }
+
   .icon-loading {
-    @include icon-common($icon-loading)
+    @include icon-common($icon-loading);
   }
+
   .icon-circle-check {
-    @include icon-common($icon-circle-check)
+    @include icon-common($icon-circle-check);
   }
+
   .icon-circle-close {
-    @include icon-common($icon-circle-close)
+    @include icon-common($icon-circle-close);
   }
-  @include icon-close;
 }
 
 @include b(input-group) {
@@ -310,11 +325,6 @@ $name: input;
   }
 
   @include m(prepend) {
-    > .#{$namespace}-input__wrapper {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-
     @include e(prepend) {
       .#{$namespace}-select {
         .#{$namespace}-input {
@@ -358,13 +368,13 @@ $name: input;
         }
       }
     }
+    > .#{$namespace}-input__wrapper {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
   }
 
   @include m(append) {
-    > .#{$namespace}-input__wrapper {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
     @include e(append) {
       .#{$namespace}-select {
         .#{$namespace}-input {
@@ -402,8 +412,11 @@ $name: input;
         }
       }
     }
+    > .#{$namespace}-input__wrapper {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   }
-
 }
 
 @include b(textarea) {
@@ -422,27 +435,26 @@ $name: input;
     box-sizing: border-box;
     width: 100%;
     color: var(
-        #{getCssVarName('input-text-color')},
-        map-get($input, 'text-color')
+      #{getCssVarName('input-text-color')},
+      map-get($input, 'text-color')
     );
     background-color: var(
-        #{getCssVarName('input-bg-color')},
-        map-get($input, 'bg-color')
+      #{getCssVarName('input-bg-color')},
+      map-get($input, 'bg-color')
     );
     background-image: none;
     -webkit-appearance: none;
-
     border-radius: getCssVarWithDefault(
-        'input-border-radius',
-        map-get($input, 'border-radius')
+      'input-border-radius',
+      map-get($input, 'border-radius')
     );
     transition: getCssVar('transition-box-shadow');
     border: 1px solid getCompCssVar('border-color');
 
     &::placeholder {
       color: getCssVarWithDefault(
-          'input-placeholder-color',
-          map-get($input, 'placeholder-color')
+        'input-placeholder-color',
+        map-get($input, 'placeholder-color')
       );
     }
 
@@ -456,16 +468,6 @@ $name: input;
     }
   }
 
-  & .#{$namespace}-input__count {
-    color: getCssVar('info-color');
-    background: getCssVar('fill-color', 'blank');
-    position: absolute;
-    font-size: 12px;
-    line-height: 14px;
-    bottom: 5px;
-    right: 10px;
-  }
-
   @include when(disabled) {
     .#{$namespace}-textarea__inner {
       background-color: map-get($input-disabled, 'fill');
@@ -489,4 +491,13 @@ $name: input;
     }
   }
 
+  & .#{$namespace}-input__count {
+    color: getCssVar('info-color');
+    background: getCssVar('fill-color', 'blank');
+    position: absolute;
+    font-size: 12px;
+    line-height: 14px;
+    bottom: 5px;
+    right: 10px;
+  }
 }

package/theme-style/src/link.scss

@@ -11,6 +11,30 @@ $name: link;
 }
 
 @include b($name) {
+  @each $type in $types {
+    &.#{$namespace}-link--#{$type} {
+      @include css-var-from-global(('link', 'text-color'), ($type, 'color'));
+      @include css-var-from-global(
+        ('link', 'hover-text-color'),
+        ($type, 'color', 'light-3')
+      );
+      @include css-var-from-global(
+        ('link', 'disabled-text-color'),
+        ($type, 'color', 'light-5')
+      );
+
+      @include when(underline) {
+        &:hover::after {
+          border-color: getCssVar('link', 'text-color');
+        }
+      }
+
+      &::after {
+        border-color: getCssVar('link', 'text-color');
+      }
+    }
+  }
+
   display: inline-flex;
   flex-direction: row;
   align-items: center;
@@ -23,15 +47,10 @@ $name: link;
   padding: 0;
   font-size: getCssVar('link', 'font-size');
   font-weight: getCssVar('link', 'font-weight');
-
   color: getCssVar('link', 'text-color');
 
-  &:hover {
-    color: getCssVar('link', 'hover-text-color');
-  }
-
   @include when(underline) {
-    &:hover:after {
+    &:hover::after {
       content: '';
       position: absolute;
       left: 0;
@@ -47,45 +66,25 @@ $name: link;
     cursor: not-allowed;
   }
 
-  & [class*='#{$namespace}-icon-'] {
-    & + span {
-      margin-left: 5px;
-    }
-  }
-
-  &.#{$namespace}-link--default {
-    &:after {
-      border-color: getCssVar('link', 'hover-text-color');
-    }
-  }
-
   @include e(inner) {
     display: inline-flex;
     justify-content: center;
     align-items: center;
   }
 
-  @each $type in $types {
-    &.#{$namespace}-link--#{$type} {
-      @include css-var-from-global(('link', 'text-color'), ($type, 'color'));
-      @include css-var-from-global(
-            ('link', 'hover-text-color'),
-            ($type, 'color', 'light-3')
-      );
-      @include css-var-from-global(
-            ('link', 'disabled-text-color'),
-            ($type, 'color', 'light-5')
-      );
+  &:hover {
+    color: getCssVar('link', 'hover-text-color');
+  }
 
-      &:after {
-        border-color: getCssVar('link', 'text-color');
-      }
+  & [class*='#{$namespace}-icon-'] {
+    & + span {
+      margin-left: 5px;
+    }
+  }
 
-      @include when(underline) {
-        &:hover:after {
-          border-color: getCssVar('link', 'text-color');
-        }
-      }
+  &.#{$namespace}-link--default {
+    &::after {
+      border-color: getCssVar('link', 'hover-text-color');
     }
   }
 }

package/theme-style/src/list-cell.scss

@@ -21,10 +21,6 @@ $name: list-cell;
     transition: getCssVar('transition-all');
     padding: getCompCssVar('padding');
 
-    &:hover {
-      background-color: getCompCssVar('hover-bg-color');
-    }
-
     @include when(active) {
       @include e(text) {
         color: getCompCssVar('active-color');
@@ -35,6 +31,10 @@ $name: list-cell;
         }
       }
     }
+
+    &:hover {
+      background-color: getCompCssVar('hover-bg-color');
+    }
   }
 
   @include m(left) {
@@ -42,16 +42,15 @@ $name: list-cell;
     align-items: center;
     justify-content: flex-start;
 
-    i {
-      color: getCompCssVar('active-color');
-    }
-
     @include e(text) {
       font-size: getCompCssVar('text-size');
       margin-left: getCompCssVar('left-text-distance');
     }
+
+    i {
+      color: getCompCssVar('active-color');
+    }
   }
 
   @include icon-arrow-right;
-
 }

package/theme-style/src/loading.scss

@@ -37,7 +37,9 @@ $name: loading;
     position: fixed;
 
     .#{$namespace}-loading-spinner {
-      margin-top: calc((0px - getCssVar('loading-fullscreen-spinner-size')) / 2);
+      margin-top: calc(
+        (0px - getCssVar('loading-fullscreen-spinner-size')) / 2
+      );
 
       .circular {
         height: getCompCssVar('fullscreen-spinner-size');
@@ -68,7 +70,7 @@ $name: loading;
   }
 
   .circular-no-rotate {
-    animation: none
+    animation: none;
   }
 
   .path {
@@ -101,10 +103,12 @@ $name: loading;
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
   }
+
   50% {
     stroke-dasharray: 90, 150;
     stroke-dashoffset: -40px;
   }
+
   100% {
     stroke-dasharray: 90, 150;
     stroke-dashoffset: -120px;

package/theme-style/src/logo.scss

@@ -30,6 +30,3 @@ $name: logo;
     color: getCompCssVar('color');
   }
 }
-
-
-

package/theme-style/src/md/api.scss

@@ -4,7 +4,8 @@
   }
 }
 
-h2, h3 {
+h2,
+h3 {
   border-bottom: none;
 }
 

package/theme-style/src/md/blockquote.scss

@@ -1,4 +1,3 @@
-
 blockquote {
   margin: 16px 0;
   padding: 4px 0 4px 16px;
@@ -7,7 +6,8 @@ blockquote {
   color: #666;
   font-size: 1rem;
   overflow-wrap: break-word;
+
   p {
-     margin: 0;
-   }
+    margin: 0;
+  }
 }