vft 0.0.18 → 0.0.19

package/theme-style/src/link.scss

@@ -0,0 +1,91 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+$name: link;
+
+@include set-root-css-vars($name, $link);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  position: relative;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  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 {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 0;
+      bottom: 0;
+      border-bottom: 1px solid getCssVar('link', 'hover-text-color');
+    }
+  }
+
+  @include when(disabled) {
+    color: getCssVar('link', 'disabled-text-color');
+    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')
+      );
+
+      &:after {
+        border-color: getCssVar('link', 'text-color');
+      }
+
+      @include when(underline) {
+        &:hover:after {
+          border-color: getCssVar('link', 'text-color');
+        }
+      }
+    }
+  }
+}

package/theme-style/src/mixins/_var.scss

@@ -6,28 +6,28 @@
 
 // set css var value, because we need translate value to string
 // for example:
-// @include set-css-var-value('color-white', white); --vri-color-white: white;
-// @include set-css-var-value(('color', 'primary'), red); --vri-primary-color: red;
-// @include set-css-var-value('color' 'primary', red); --vri-primary-color: red;
-// --vri-primary-color: red;
+// @include set-css-var-value('color-white', white); --vft-color-white: white;
+// @include set-css-var-value(('color', 'primary'), red); --vft-primary-color: red;
+// @include set-css-var-value('color' 'primary', red); --vft-primary-color: red;
+// --vft-primary-color: red;
 @mixin set-css-var-value($name, $value) {
   #{joinVarName($name)}: #{$value};
 }
 
 // @include set-css-var-type('color', 'primary', $map);
-// --vri-primary-color: #{map.get($map, 'primary')};
+// --vft-primary-color: #{map.get($map, 'primary')};
 @mixin set-css-var-type($name, $type, $variables) {
   #{getCssVarName($name, $type)}: #{map.get($variables, $type)};
 }
 
 // generate color vars
-// --vri-primary-color: red;
-// --vri-primary-color-light-3: #ff4d4d;
-// --vri-primary-color-light-5: #ff8080;
-// --vri-primary-color-light-7: #ffb3b3;
-// --vri-primary-color-light-8: #ffcccc;
-// --vri-primary-color-light-9: #ffe6e6;
-// --vri-primary-color-dark-2: #cc0000;
+// --vft-primary-color: red;
+// --vft-primary-color-light-3: #ff4d4d;
+// --vft-primary-color-light-5: #ff8080;
+// --vft-primary-color-light-7: #ffb3b3;
+// --vft-primary-color-light-8: #ffcccc;
+// --vft-primary-color-light-9: #ffe6e6;
+// --vft-primary-color-dark-2: #cc0000;
 @mixin set-css-color-type($colors, $type) {
   @include set-css-var-value(($type, 'color'), map.get($colors, $type, 'base'));
 
@@ -58,8 +58,8 @@
  * @example
    set-component-css-var('tabs', ('header-height': 40px,'bg-color': red ))
    {
-     --vri-tabs-header-height: 40px;
-     --vri-tabs-bg-color: red;
+     --vft-tabs-header-height: 40px;
+     --vft-tabs-bg-color: red;
    }
  */
 @mixin set-component-css-var($name, $variables) {
@@ -73,8 +73,8 @@
 }
 
 // generate rgb css var
-// --vri-primary-color-rgb: 255, 0, 0;
-// --vri-success-color-rgb: 62, 175, 124;
+// --vft-primary-color-rgb: 255, 0, 0;
+// --vft-success-color-rgb: 62, 175, 124;
 @mixin set-css-color-rgb($type) {
   $color: map.get($colors, $type, 'base');
   @include set-css-var-value(($type, 'color', 'rgb'), #{red($color), green($color), blue($color)});
@@ -83,7 +83,7 @@
 // generate css var from existing css var
 // for example:
 // @include css-var-from-global(('button', 'text-color'), ('color', $type))
-// --vri-button-text-color: var(--vri-color-#{$type});
+// --vft-button-text-color: var(--vft-color-#{$type});
 @mixin css-var-from-global($var, $gVar) {
   $varName: joinVarName($var);
   $gVarName: joinVarName($gVar);

package/theme-style/src/mixins/function.scss

@@ -43,7 +43,7 @@
 }
 
 // join var name
-// joinVarName(('button', 'text-color')) => '--vri-button-text-color'
+// joinVarName(('button', 'text-color')) => '--vft-button-text-color'
 @function joinVarName($list) {
   $name: '--' + config.$namespace;
   @each $item in $list {
@@ -54,17 +54,17 @@
   @return $name;
 }
 
-// getCssVarName('button', 'text-color') => '--vri-button-text-color'
+// getCssVarName('button', 'text-color') => '--vft-button-text-color'
 @function getCssVarName($args...) {
   @return joinVarName($args);
 }
 
-// getCssVar('button', 'text-color') => var(--vri-button-text-color)
+// getCssVar('button', 'text-color') => var(--vft-button-text-color)
 @function getCssVar($args...) {
   @return var(#{joinVarName($args)});
 }
 
-// getCssVarWithDefault(('button', 'text-color'), red) => var(--vri-button-text-color, red)
+// getCssVarWithDefault(('button', 'text-color'), red) => var(--vft-button-text-color, red)
 @function getCssVarWithDefault($args, $default) {
   @return var(#{joinVarName($args)}, #{$default});
 }

package/theme-style/src/mixins/mixins.scss

@@ -50,7 +50,7 @@
 }
 
 // set-component-css-var-bak
-// @include b(tab) {} -> vri-tab {}
+// @include b(tab) {} -> vft-tab {}
 @mixin b($block) {
   $B: $namespace + '-' + $block !global;
 
@@ -60,8 +60,8 @@
 }
 
 /**
-  @include e(header) {} ==> .vri-tabs__header {}
-  @include @include e((nav-next, nav-prev)) {} ==> ,vri-tabs__nav-prev .vri-tabs__nav-next {}
+  @include e(header) {} ==> .vft-tabs__header {}
+  @include @include e((nav-next, nav-prev)) {} ==> ,vft-tabs__nav-prev .vft-tabs__nav-next {}
  */
 @mixin e($element) {
   $E: $element !global;

package/theme-style/src/overlay.scss

@@ -0,0 +1,18 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(overlay) {
+  #{& + '-root'} {
+    height: 0;
+  }
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  height: 100%;
+  background-color: getCssVar('overlay-color', 'lighter');
+  overflow: auto;
+}

package/theme-style/src/pagination.scss

@@ -0,0 +1,232 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@mixin pagination-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: getCssVar('pagination-font-size');
+  min-width: getCssVar('pagination-button-width');
+  height: getCssVar('pagination-button-height');
+  line-height: getCssVar('pagination-button-height');
+  color: getCssVar('pagination-button-color');
+  background: getCssVar('pagination-bg-color');
+  padding: 0 4px;
+  border: none;
+  border-radius: getCssVar('pagination-border-radius');
+  cursor: pointer;
+  text-align: center;
+  box-sizing: border-box;
+
+  .vft-icon {
+    color: inherit;
+  }
+
+  * {
+    pointer-events: none;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover {
+    color: getCssVar('pagination-hover-color');
+  }
+
+  &.is-active {
+    color: getCssVar('pagination-hover-color');
+    cursor: default;
+    font-weight: bold;
+
+    &.is-disabled {
+      font-weight: bold;
+      //
+      //.vft-icon {
+      //  color: getCssVar('text', 'secondary-color');
+      //}
+    }
+  }
+
+  &:disabled,
+  &.is-disabled {
+    color: getCssVar('pagination-button-disabled-color');
+    background-color: getCssVar('pagination-button-disabled-bg-color');
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 1px solid getCssVar('pagination-hover-color');
+    outline-offset: -1px;
+  }
+}
+
+@include set-root-css-vars('pagination', $pagination);
+
+@include b(pagination) {
+
+  white-space: nowrap;
+  color: getCssVar('pagination-text-color');
+  font-size: getCssVar('pagination-font-size');
+  font-weight: normal;
+  display: flex;
+  align-items: center;
+
+  .#{$namespace}-input__inner {
+    text-align: center;
+    -moz-appearance: textfield;
+  }
+
+  .#{$namespace}-select .#{$namespace}-input {
+    width: 128px;
+  }
+
+  button {
+    @include pagination-button;
+  }
+
+  .btn-prev,
+  .btn-next {
+    .#{$namespace}-icon {
+      display: block;
+      font-size: 12px;
+      font-weight: bold;
+      width: inherit;
+    }
+  }
+
+  & > * {
+    @include when(first) {
+      margin-left: 0 !important;
+    }
+    @include when(last) {
+      margin-right: 0 !important;
+    }
+  }
+
+  .btn-prev {
+    margin-left: getCssVar('pagination-item-gap');
+  }
+
+  @include e(sizes) {
+    margin-left: getCssVar('pagination-item-gap');
+    font-weight: normal;
+    color: getCssVar('text', 'regular-color');
+  }
+
+  @include e(total) {
+    margin-left: getCssVar('pagination-item-gap');
+    font-weight: normal;
+    color: getCssVar('text', 'regular-color');
+
+    &[disabled='true'] {
+      color: getCssVar('text', 'placeholder-color');
+    }
+  }
+
+  @include e(jump) {
+    display: flex;
+    align-items: center;
+    margin-left: getCssVar('pagination-item-gap');
+    font-weight: normal;
+    color: getCssVar('text', 'regular-color');
+
+    &[disabled='true'] {
+      color: getCssVar('text', 'placeholder-color');
+    }
+
+    @include e(goto) {
+      margin-right: 8px;
+    }
+
+    @include e(editor) {
+      text-align: center;
+      box-sizing: border-box;
+
+      &.#{$namespace}-input {
+        width: 56px;
+      }
+
+      .#{$namespace}-input__inner::-webkit-inner-spin-button,
+      .#{$namespace}-input__inner::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
+
+    @include e(classifier) {
+      margin-left: 8px;
+    }
+  }
+
+  @include e(rightwrapper) {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  @include when(background) {
+    .btn-prev,
+    .btn-next,
+    .#{$namespace}-pager li {
+      margin: 0 4px;
+      background-color: getCssVar('pagination-button-bg-color');
+
+      &.is-active {
+        background-color: getCssVar('primary-color');
+        color: getCssVar('color-white');
+      }
+
+      &:disabled,
+      &.is-disabled {
+        color: getCssVar('text', 'placeholder-color');
+        background-color: getCssVar('disabled-bg-color');
+
+        &.is-active {
+          color: getCssVar('text', 'secondary-color');
+          background-color: getCssVar('fill-color', 'dark');
+        }
+      }
+    }
+
+    .btn-prev {
+      margin-left: getCssVar('pagination-item-gap');
+    }
+  }
+
+  @include m(small) {
+    .btn-prev,
+    .btn-next,
+    .#{$namespace}-pager li {
+      height: getCssVar('pagination-button-height-small');
+      line-height: getCssVar('pagination-button-height-small');
+      font-size: getCssVar('pagination-font-size-small');
+      min-width: getCssVar('pagination-button-width-small');
+    }
+
+    span:not([class*='suffix']),
+    button {
+      font-size: getCssVar('pagination-font-size-small');
+    }
+
+    .#{$namespace}-select .#{$namespace}-input {
+      width: 100px;
+    }
+  }
+}
+
+@include b(pager) {
+  user-select: none;
+  list-style: none;
+  font-size: 0;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+
+  li {
+    @include pagination-button;
+  }
+}

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

@@ -0,0 +1,70 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+$name: side-menu;
+
+@include set-root-css-vars($name, $side-menu);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  overflow-x: hidden;
+  transition: width 0.2s;
+  width: getCompCssVar('width');
+  display: flex;
+  flex-direction: column;
+
+  @include m(fixed) {
+    position: fixed;
+    left: 0;
+  }
+
+  @include e(top) {
+    border-bottom: getCompCssVar('border');
+    z-index: 1;
+    background-color: white;
+  }
+
+  @include e(bottom) {
+    border-top: getCompCssVar('border');
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background-color: white;
+  }
+
+  @include e(collapse) {
+    cursor: pointer;
+    height: 40px;
+    background-color: white;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    border-right: solid 1px var(--vft-menu-border-color);
+    .vft-icon {
+      position: absolute;
+      right: 20px;
+    }
+  }
+
+  @include e(con) {
+    @include overlay(false);
+    overflow-x: hidden;
+  }
+
+}
+
+@include e(popper) {
+  margin-right: getCompCssVar('scroll-mr');
+
+  .vft-menu--popup {
+    @include scroll-bar();
+    @include overlay(false);
+
+    box-shadow: none;
+    max-height: calc(100vh - 200px);
+  }
+}