tiny-ui 1.0.2 → 1.0.3

package/lib/time-picker/style/_index.scss

@@ -0,0 +1,212 @@
+@use '../../style/variables' as *;
+
+$tp: #{$prefix}-time-picker;
+
+.#{$tp} {
+  display: inline-flex;
+  position: relative;
+  font-size: $font-size-base;
+  font-family: $font-family;
+
+  // ---- Input ----
+  &__input {
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    padding: 4px 11px;
+    border: 1px solid var(--ty-input-border);
+    border-radius: 6px;
+    background: var(--ty-picker-input-bg);
+    cursor: pointer;
+    transition: border-color 0.3s, box-shadow 0.3s;
+
+    &:hover {
+      border-color: var(--ty-color-primary);
+    }
+  }
+
+  &_open &__input {
+    border-color: var(--ty-color-primary);
+    box-shadow: var(--ty-input-focus-shadow);
+  }
+
+  &__input-field {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: inherit;
+    font-family: inherit;
+    color: var(--ty-color-text);
+    cursor: pointer;
+    min-width: 90px;
+
+    &::placeholder {
+      color: var(--ty-color-text-quaternary);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__suffix {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    margin-left: 4px;
+    color: var(--ty-color-text-quaternary);
+  }
+
+  &__icon {
+    display: inline-flex;
+    font-size: 14px;
+  }
+
+  &__clear {
+    display: none;
+    position: absolute;
+    inset: 0;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color: var(--ty-color-text-quaternary);
+    background: var(--ty-picker-clear-bg);
+    cursor: pointer;
+    transition: color 0.2s;
+    border: none;
+    padding: 0;
+
+    &:hover {
+      color: var(--ty-color-text-tertiary);
+    }
+  }
+
+  &_has-value:hover &__clear {
+    display: inline-flex;
+  }
+
+  // ---- Sizes ----
+  &_sm &__input {
+    padding: 0 7px;
+    font-size: 12px;
+  }
+
+  &_sm &__input-field {
+    min-width: 70px;
+  }
+
+  &_lg &__input {
+    padding: 6px 11px;
+    font-size: 16px;
+  }
+
+  &_lg &__input-field {
+    min-width: 110px;
+  }
+
+  // ---- Disabled ----
+  &_disabled {
+    opacity: 0.65;
+
+    .#{$tp}__input {
+      background: var(--ty-color-bg-disabled);
+      cursor: not-allowed;
+      border-color: var(--ty-input-border);
+
+      &:hover {
+        border-color: var(--ty-input-border);
+      }
+    }
+
+    .#{$tp}__input-field {
+      color: var(--ty-color-text-quaternary);
+    }
+  }
+
+  // ---- Dropdown ----
+  &__dropdown {
+    background: var(--ty-picker-dropdown-bg);
+    border-radius: 8px;
+    box-shadow: var(--ty-shadow-popup);
+    overflow: hidden;
+  }
+
+  // ---- Panel ----
+  &__panel {
+    display: flex;
+  }
+
+  &__column {
+    flex: 1;
+    max-height: 224px;
+    overflow-y: auto;
+    border-left: 1px solid var(--ty-color-border-light);
+    scrollbar-width: thin;
+
+    &:first-child {
+      border-left: none;
+    }
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--ty-color-text-quaternary);
+      border-radius: 2px;
+    }
+  }
+
+  &__column-list {
+    list-style: none;
+    padding: 4px 0;
+    margin: 0;
+  }
+
+  // ---- Cell ----
+  &__cell {
+    padding: 4px 0;
+    text-align: center;
+    min-width: 52px;
+    cursor: pointer;
+    border-radius: 4px;
+    margin: 0 4px;
+    line-height: 20px;
+    transition: background 0.2s;
+    user-select: none;
+
+    &:hover {
+      background: var(--ty-picker-cell-hover-bg);
+    }
+
+    &_selected {
+      background: var(--ty-color-primary-bg);
+      font-weight: 500;
+
+      &:hover {
+        background: var(--ty-color-primary-bg-hover);
+      }
+    }
+
+    &_disabled {
+      color: var(--ty-color-text-quaternary);
+      cursor: not-allowed;
+
+      &:hover {
+        background: transparent;
+      }
+    }
+  }
+
+  // ---- Footer ----
+  &__footer {
+    padding: 8px 12px;
+    border-top: 1px solid var(--ty-color-border-light);
+    text-align: center;
+    font-size: 12px;
+  }
+}

package/lib/time-picker/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+//# sourceMappingURL=index.js.map

package/lib/timeline/style/_index.scss

@@ -0,0 +1,91 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-timeline {
+  box-sizing: border-box;
+  color: var(--ty-color-text-secondary);
+  font-size: $font-size-base;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.#{$prefix}-timeline-item {
+  position: relative;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 0 20px;
+  font-size: 14px;
+  list-style: none;
+
+  &:last-child {
+    .#{$prefix}-timeline-item__head {
+      &:before {
+        display: none;
+      }
+    }
+  }
+
+  &__head {
+    width: 16px;
+    background-color: transparent;
+    position: absolute;
+    color: var(--ty-color-primary);
+    height: 100%;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      height: 100%;
+      border-left: 2px solid var(--ty-timeline-line-color);
+    }
+  }
+
+  &__dot-container {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: transparent;
+  }
+
+  &__dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border: 2px solid var(--ty-color-primary);
+    border-radius: 100px;
+    background-color: var(--ty-color-bg);
+  }
+
+  &__content {
+    position: relative;
+    top: 0;
+    padding-left: 25px;
+  }
+
+  &_left,
+  &_right {
+    .#{$prefix}-timeline-item__head {
+      left: 50%;
+    }
+  }
+
+  &_left {
+    .#{$prefix}-timeline-item__content {
+      left: 50%;
+      width: 50%;
+    }
+  }
+
+  &_right {
+    .#{$prefix}-timeline-item__content {
+      width: 50%;
+      text-align: right;
+      padding-left: 0;
+      padding-right: 9px;
+    }
+  }
+}

package/lib/timeline/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+//# sourceMappingURL=index.js.map

package/lib/tooltip/style/_index.scss

@@ -0,0 +1,41 @@
+@use 'sass:math';
+@use '../../style/variables' as *;
+
+.#{$prefix}-tooltip {
+  font-size: $tooltip-font-size;
+
+  &__inner {
+    padding: $tooltip-content-padding;
+  }
+
+  .#{$prefix}-popup {
+    &__arrow, &__arrow:before {
+      width: $tooltip-arrow-size;
+      height: $tooltip-arrow-size;
+    }
+  }
+
+  &[data-popper-placement^='top'] {
+    & > .#{$prefix}-popup__arrow {
+      bottom: math.div(-$tooltip-arrow-size, 2);
+    }
+  }
+
+  &[data-popper-placement^='bottom'] {
+    > .#{$prefix}-popup__arrow {
+      top: math.div(-$tooltip-arrow-size, 2);
+    }
+  }
+
+  &[data-popper-placement^='left'] {
+    > .#{$prefix}-popup__arrow {
+      right: math.div(-$tooltip-arrow-size, 2);
+    }
+  }
+
+  &[data-popper-placement^='right'] {
+    > .#{$prefix}-popup__arrow {
+      left: math.div(-$tooltip-arrow-size, 2);
+    }
+  }
+}

package/lib/tooltip/style/css.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+// style dependency
+require("../../popover/style/index.css");
+//# sourceMappingURL=index.js.map

package/lib/transfer/style/_index.scss

@@ -0,0 +1,98 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-transfer {
+  box-sizing: border-box;
+  font-size: $font-size-base;
+  color: var(--ty-color-text);
+
+  &__left-arrow {
+    transform: rotate(-90deg);
+  }
+
+  &__right-arrow {
+    transform: rotate(90deg);
+  }
+
+  &__buttons {
+    display: inline-block;
+    box-sizing: border-box;
+    margin: 0 8px;
+    vertical-align: middle;
+
+    .#{$prefix}-btn {
+      display: block;
+      margin: 3px 0;
+      padding: 3px;
+      min-width: 30px;
+    }
+  }
+}
+
+.#{$prefix}-transfer-panel {
+  box-sizing: border-box;
+  display: inline-block;
+  vertical-align: middle;
+  width: 180px;
+  border: 1px solid var(--ty-transfer-border);
+  border-radius: $border-radius;
+
+  &__header {
+    padding: 8px 12px 9px;
+    color: var(--ty-color-text);
+    background: var(--ty-transfer-header-bg);
+    border-bottom: 1px solid var(--ty-transfer-footer-border);
+    border-radius: $border-radius $border-radius 0 0;
+  }
+
+  &__body {
+    position: relative;
+    padding: 6px 0;
+  }
+
+  &__input-container{
+    padding: 6px 12px 12px;
+  }
+
+  &__list-container{
+    height: 192px;
+  }
+
+  &__list {
+    display: block;
+    position: relative;
+    height: 100%;
+    overflow-y: auto;
+    margin: 0;
+    list-style: none;
+  }
+
+  &__list-item {
+    box-sizing: border-box;
+    padding: 0 12px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-height: 32px;
+    display: flex;
+    margin-right: 0;
+    transition: background-color 250ms;
+
+    &:not(.#{$prefix}-checkbox_disabled):hover{
+      background-color: var(--ty-transfer-item-hover-bg);
+    }
+  }
+
+  &__not-found {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+  }
+
+  &__footer {
+    padding: 8px 12px 9px;
+    border-top: 1px solid var(--ty-transfer-footer-border);
+    background-color: var(--ty-transfer-footer-bg);
+    border-radius: 0 0 $border-radius $border-radius;
+  }
+}

package/lib/transfer/style/css.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+require("../../button/style/index.css");
+require("../../checkbox/style/index.css");
+require("../../empty/style/index.css");
+require("../../input/style/index.css");
+//# sourceMappingURL=index.js.map

package/lib/transition/style/_index.scss

@@ -0,0 +1,20 @@
+@use "./mixin" as *;
+
+// Only scale in one direction
+@include zoom-animation('center-top', scaleY(0), scaleY(1), center bottom);
+@include zoom-animation('center-left', scaleX(0), scaleX(1), right center);
+@include zoom-animation('center-right', scaleX(0), scaleX(1), left center);
+@include zoom-animation('center-bottom', scaleY(0), scaleY(1), center top);
+
+// Scale both horizontal and vertical direction
+@include zoom-animation('top-start', scale(0, 0), scale(1, 1), left bottom);
+@include zoom-animation('top', scale(0, 0), scale(1, 1), center bottom);
+@include zoom-animation('top-end', scale(0, 0), scale(1, 1), right bottom);
+@include zoom-animation('bottom-start', scale(0, 0), scale(1, 1), left top);
+@include zoom-animation('bottom', scale(0, 0), scale(1, 1), center top);
+@include zoom-animation('bottom-end', scale(0, 0), scale(1, 1), right top);
+@include zoom-animation('left', scale(0, 0), scale(1, 1), right center);
+@include zoom-animation('right', scale(0, 0), scale(1, 1), left center);
+
+@include slide-animation('down', translateY(-10px), translateY(0));
+@include slide-animation('up', translateY(10px), translateY(0));

package/lib/transition/style/_mixin.scss

@@ -0,0 +1,58 @@
+@use "../../style/variables" as *;
+
+@mixin zoom-animation(
+  $direction: 'top',
+  $scaleStart: scaleY(0),
+  $scaleEnd: scaleY(1),
+  $origin: center top,
+) {
+  .#{$prefix}-zoom-#{$direction} {
+    &-enter {
+      opacity: 0;
+      transform: $scaleStart;
+    }
+
+    &-enter-active {
+      opacity: 1;
+      transform: $scaleEnd;
+      transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+      transform-origin: $origin
+    }
+
+    &-exit {
+      opacity: 1;
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transform: $scaleStart;
+      transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
+      transform-origin: $origin;
+    }
+  }
+}
+
+@mixin slide-animation($direction, $moveStart, $moveEnd) {
+  .#{$prefix}-slide-#{$direction} {
+    &-enter {
+      opacity: 0;
+      transform: $moveStart;
+    }
+
+    &-enter-active {
+      opacity: 1;
+      transform: $moveEnd;
+      transition: transform 300ms, opacity 300ms;
+    }
+
+    &-exit {
+      opacity: 1;
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transform: $moveStart;
+      transition: transform 300ms, opacity 300ms;
+    }
+  }
+}

package/lib/transition/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+//# sourceMappingURL=index.js.map

package/lib/tree/style/_index.scss

@@ -0,0 +1,66 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-tree {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: $tree-font-size;
+}
+
+.#{$prefix}-tree-node {
+  margin: 2px 0;
+
+  &__switcher {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__arrow {
+    color: var(--ty-tree-arrow-color);
+    transform: rotate(-90deg);
+    transition: transform 250ms;
+
+    &_active {
+      transform: rotate(0deg);
+    }
+  }
+
+  &__label {
+    padding: 1px 2px;
+    margin-left: -4px;
+  }
+
+  &__title {
+    cursor: pointer;
+    align-items: center;
+    min-height: 24px;
+    display: inline-flex;
+    transition: background-color 250ms;
+  }
+
+  &__label {
+    flex: 1;
+    transition: background-color 250ms;
+
+    &:hover {
+      background-color: var(--ty-tree-hover-bg);
+    }
+  }
+
+  .#{$prefix}-checkbox {
+    margin-right: 0;
+  }
+
+  &_block {
+    .#{$prefix}-tree-node__title {
+      display: flex;
+
+      &:hover {
+        background-color: var(--ty-tree-hover-bg);
+      }
+    }
+  }
+}

package/lib/tree/style/css.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+require("../../checkbox/style/index.css");
+require("../../collapse-transition/style/index.css");
+//# sourceMappingURL=index.js.map