tiny-ui 1.0.2 → 1.0.3

package/lib/loader/style/_index.scss

@@ -0,0 +1,142 @@
+@use '../../style/variables' as *;
+@use '../../style/mixins' as *;
+
+.#{$prefix}-loader {
+  font-family: $font-family;
+  position: relative;
+  display: inline-block;
+  color: var(--ty-color-primary);
+
+  &__indicator {
+    position: relative;
+    display: inline-block;
+    font-size: 20px;
+    width: 1em;
+    height: 1em;
+    margin: 5px;
+    animation: ty-rotate 1s linear infinite;
+  }
+
+  &__indicator-dot {
+    position: absolute;
+    display: block;
+    transform: scale(0.75);
+    background-color: currentColor;
+    border-radius: 50%;
+    transform-origin: 50% 50%;
+    opacity: 0.5;
+    animation: dot-opacity 2s linear infinite;
+
+    &:nth-child(1) {
+      top: 0;
+      left: 0;
+    }
+
+    &:nth-child(2) {
+      top: 0;
+      right: 0;
+      animation-delay: .4s;
+    }
+
+    &:nth-child(3) {
+      right: 0;
+      bottom: 0;
+      animation-delay: .8s;
+    }
+
+    &:nth-child(4) {
+      bottom: 0;
+      left: 0;
+      animation-delay: 1.2s;
+    }
+  }
+
+  &__label {
+    margin: 5px 0;
+    font-family: $font-family;
+    user-select: none;
+    opacity: 0.8;
+    font-size: 16px;
+  }
+
+  &_md {
+    .#{$prefix}-loader{
+      &__indicator{
+        font-size: 20px;
+      }
+
+      &__indicator-dot {
+        width: 9px;
+        height: 9px;
+      }
+    }
+  }
+
+  &_lg {
+    .#{$prefix}-loader{
+      &__indicator{
+        font-size: 32px;
+      }
+
+      &__indicator-dot {
+        width: 14px;
+        height: 14px;
+      }
+    }
+  }
+
+  &_sm {
+    .#{$prefix}-loader{
+      &__indicator{
+        font-size: 14px;
+      }
+
+      &__indicator-dot {
+        width: 6px;
+        height: 6px;
+      }
+    }
+  }
+
+  &__loader-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    z-index: 5;
+    color: var(--ty-color-primary);
+
+    &:not(:last-child) {
+      position: absolute;
+    }
+
+    &_vertical {
+      flex-direction: column;
+    }
+  }
+
+  &__container {
+    &_loading {
+      opacity: 0.5;
+    }
+
+    &_blurred {
+      filter: blur(1px);
+      overflow: hidden;
+    }
+  }
+}
+
+@keyframes dot-opacity {
+  0% {
+    opacity: 0.2;
+  }
+  50% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}

package/lib/loader/style/css.js

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

package/lib/loading-bar/style/_index.scss

@@ -0,0 +1,17 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-loading-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+
+  &__inner {
+    height: 3px;
+    width: 0;
+    opacity: 1;
+    transition: opacity 400ms;
+    background-color: var(--ty-color-primary);
+  }
+}

package/lib/loading-bar/style/css.js

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

package/lib/menu/style/_index.scss

@@ -0,0 +1,183 @@
+@use "../../style/variables" as *;
+@use "./mixin" as *;
+
+.#{$prefix}-menu {
+  display: flex;
+  flex-wrap: nowrap;
+  box-sizing: border-box;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  white-space: nowrap;
+  border: 0;
+
+  &_horizontal {
+    position: relative;
+
+    &:before {
+      content: '';
+      position: absolute;
+      border-bottom: 1px solid;
+      width: 100%;
+      bottom: 0;
+    }
+
+    .#{$prefix}-menu-item {
+      height: 48px;
+      padding: 0 15px;
+      line-height: 48px;
+      margin: 0 5px;
+      border-bottom: 2px solid transparent;
+      position: relative;
+
+      &_active {
+        color: var(--ty-color-primary);
+        border-bottom-color: var(--ty-color-primary);
+      }
+    }
+  }
+
+  &_inline, &_vertical {
+    flex-direction: column;
+    position: relative;
+
+    &:before {
+      content: '';
+      position: absolute;
+      border-right: 1px solid;
+      height: 100%;
+      right: 0;
+    }
+
+    .#{$prefix}-menu-item {
+      padding: $menu-item-padding-vertical;
+      margin: 5px 0;
+      position: relative;
+    }
+  }
+
+  &_inline li.#{$prefix}-menu-item_active {
+    @include menu-item-active(var(--ty-color-primary), true);
+  }
+
+  &_vertical li.#{$prefix}-menu-item_active {
+    @include menu-item-active(var(--ty-color-primary));
+  }
+
+  &_light {
+    color: var(--ty-menu-light-color);
+    background: var(--ty-menu-light-bg);
+
+    &:before {
+      border-color: var(--ty-menu-light-border);
+    }
+  }
+
+  &_dark {
+    color: var(--ty-menu-dark-color);
+    background: var(--ty-menu-dark-bg);
+
+    &:before {
+      border-color: var(--ty-menu-dark-border);
+    }
+  }
+}
+
+.#{$prefix}-menu-item {
+  box-sizing: border-box;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 300ms, color 250ms;
+
+  &:hover {
+    color: var(--ty-color-primary);
+  }
+
+  &_disabled {
+    color: $gray-700 !important;
+    opacity: .5;
+    cursor: not-allowed;
+  }
+}
+
+.#{$prefix}-menu-sub {
+
+  .#{$prefix}-popup__wrapper {
+    display: block;
+  }
+
+  &__list {
+    margin: 0;
+    min-width: 100%;
+    list-style: none;
+    padding-left: 0;
+    white-space: nowrap;
+
+    .#{$prefix}-menu-item {
+      @include menu-sub-item-style();
+    }
+
+    &_popup {
+      min-width: 160px;
+
+      li.#{$prefix}-menu-item_active {
+        @include menu-item-active(var(--ty-color-primary));
+      }
+    }
+  }
+
+  &__title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &.#{$prefix}-menu-item_active {
+      color: var(--ty-color-primary);
+    }
+  }
+
+  &__arrow {
+    display: inline-block;
+    transition: transform 300ms;
+    margin-left: 20px;
+
+    &_reverse {
+      transform: rotate(180deg);
+    }
+
+    &_right {
+      transform: rotate(-90deg);
+    }
+  }
+}
+
+.#{$prefix}-menu-item-group {
+  box-sizing: border-box;
+
+  &__title {
+    padding: 10px 16px;
+    color: var(--ty-menu-group-title-color);
+    font-size: 14px;
+    cursor: default;
+
+    &:first-child {
+      margin-top: 4px;
+    }
+  }
+
+  &__list {
+    list-style: none;
+    padding-left: 0;
+    white-space: nowrap;
+
+    > .#{$prefix}-menu-item {
+      padding: 12px 35px 12px 25px;
+    }
+  }
+}
+
+.#{$prefix}-menu-divider {
+  height: 1px;
+  background-color: var(--ty-menu-divider-color);
+  margin: 5px 0;
+}

package/lib/menu/style/_mixin.scss

@@ -0,0 +1,16 @@
+@mixin menu-sub-item-style($padding: 12px 20px){
+  padding: $padding;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  overflow: hidden;
+  font-size: 14px;
+  text-overflow: ellipsis;
+}
+
+@mixin menu-item-active($color, $display-right-border: false){
+  background-color: var(--ty-color-primary-bg);
+  color: $color;
+  @if $display-right-border {
+    border-right: 3px solid $color;
+  }
+}

package/lib/menu/style/css.js

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

package/lib/message/style/_index.scss

@@ -0,0 +1,59 @@
+@use '../../style/variables' as *;
+@use '../../style/animation' as *;
+
+.#{$prefix}-message {
+  position: relative;
+  padding: 10px 16px;
+  background: var(--ty-message-bg);
+  border-radius: 4px;
+  box-shadow: var(--ty-shadow-modal);
+  transition: all 300ms;
+  opacity: 0;
+  transform: translateY(-5px);
+  box-sizing: border-box;
+  display: flex;
+  font-size: 14px;
+  align-items: center;
+  pointer-events: all;
+
+  &-container {
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    width: 100%;
+    pointer-events: none;
+    transition: top 200ms;
+    z-index: 999;
+    box-sizing: border-box;
+  }
+
+  &__content {
+    font-size: 14px;
+    line-height: 14px;
+    color: var(--ty-color-text-secondary);
+  }
+
+  &_fade-slide {
+    &-enter {
+      opacity: 0;
+      transform: translateY(-5px);
+    }
+
+    &-enter-done {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  &__icon {
+    margin-right: 5px;
+
+    &_loading{
+      animation: ty-rotate 1s linear infinite;
+    }
+  }
+
+  &__extra {
+    margin-left: 15px;
+  }
+}

package/lib/message/style/css.js

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

package/lib/modal/style/_index.scss

@@ -0,0 +1,116 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-modal {
+  position: relative;
+  box-sizing: border-box;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  top: 100px;
+
+  &__content {
+    box-sizing: border-box;
+    background-color: var(--ty-modal-bg);
+    position: relative;
+    background-clip: padding-box;
+    border: 0;
+    border-radius: 4px;
+    box-shadow: var(--ty-shadow-modal);
+    transition: all 300ms;
+
+    &_slide {
+      &-enter {
+        transform: translateY(-20px);
+        transition: none;
+      }
+
+      &-enter-done {
+        transform: translateY(0);
+      }
+
+      &-exit {
+        transform: translateY(0);
+      }
+
+      &-exit-done {
+        transform: translateY(-20px);
+      }
+    }
+
+    &_scale {
+      &-enter {
+        transform: scale(0);
+        transition: none;
+      }
+
+      &-enter-done {
+        transform: scale(1);
+      }
+
+      &-exit {
+        transform: scale(1);
+      }
+
+      &-exit-done {
+        transform: scale(0);
+      }
+    }
+  }
+
+  &__header {
+    box-sizing: border-box;
+    padding: 16px 24px;
+    color: var(--ty-color-text-secondary);
+    background: var(--ty-modal-header-bg);
+    border-bottom: 1px solid var(--ty-modal-header-border);
+    border-radius: 4px 4px 0 0;
+  }
+
+  &__title {
+    margin: 0;
+    color: var(--ty-color-text);
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 22px;
+  }
+
+  &__close-btn {
+    cursor: pointer;
+    color: var(--ty-color-text-tertiary);
+    width: 56px;
+    height: 56px;
+    line-height: 56px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    text-align: center;
+    background: none;
+    border: none;
+    padding: 0;
+    font-size: inherit;
+  }
+
+  &__body {
+    box-sizing: border-box;
+    padding: 24px;
+    font-size: 14px;
+    line-height: 1.5;
+    word-wrap: break-word;
+  }
+
+  &__footer {
+    box-sizing: border-box;
+    padding: 12px 16px;
+    border-top: 1px solid var(--ty-modal-footer-border);
+    border-radius: 0 0 4px 4px;
+  }
+
+  &__footer-btn {
+    margin-bottom: 0;
+  }
+
+  &_centered {
+    align-items: center;
+    top: 0;
+  }
+}

package/lib/modal/style/css.js

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

package/lib/native-select/style/_index.scss

@@ -0,0 +1,65 @@
+@use '../../style/variables' as *;
+@use './mixin' as *;
+
+$select-arrow: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij4gIDxwYXRoIGZpbGw9IiMzOTNFNDgiIGQ9Ik0wLjIyMiw1LjYxMyBMNS40NTEsMC4yMjMgQzUuNzU2MjEyMDksLTAuMDc0MzYzMjMzMyA2LjI0Mjc4NzkxLC0wLjA3NDM2MzIzMzMgNi41NDgsMC4yMjMgTDExLjc3OCw1LjYxMyBDMTIuMTgsNi4wMjcgMTIuMDI1LDYuNjY3IDExLjQwNyw2LjY2NyBMMC41OTIsNi42NjcgQy0wLjAyNCw2LjY2NyAtMC4xOCw2LjAyNyAwLjIyMiw1LjYxMyBaIE0wLjU5Miw5LjMzMyBMMTEuNDA3LDkuMzMzIEMxMi4wMjUsOS4zMzMgMTIuMTgsOS45NzMgMTEuNzc3LDEwLjM4NyBMNi41NDcsMTUuNzc3IEM2LjI0MTkxMjU4LDE2LjA3MzcxNDMgNS43NTYwODc0MiwxNi4wNzM3MTQzIDUuNDUxLDE1Ljc3NyBMMC4yMjIsMTAuMzg3IEMtMC4xOCw5Ljk3MyAtMC4wMjQsOS4zMzMgMC41OTIsOS4zMzMgWiIvPjwvc3ZnPg==';
+
+.#{$prefix}-select-native {
+  display: inline-flex;
+  -webkit-appearance: none;
+  cursor: pointer;
+  color: var(--ty-color-text);
+  min-width: 200px;
+  margin: 0;
+  line-height: 18px;
+  vertical-align: middle;
+  box-sizing: border-box;
+  border: 1px solid var(--ty-input-border);
+  border-radius: $native-select-border-radius;
+  background-color: var(--ty-native-select-bg);
+  background-image: url($select-arrow);
+  background-repeat: no-repeat, repeat;
+  background-position: right 0.7em top 50%, 0 0;
+  background-size: 0.62em auto, 100%;
+  transition: all 0.3s;
+  outline: none;
+
+  &:hover {
+    border-color: var(--ty-color-primary);
+  }
+
+  &:focus {
+    border-color: var(--ty-input-focus-border);
+    box-shadow: var(--ty-input-focus-shadow);
+  }
+
+  &_disabled {
+    background-image: url($select-arrow);
+    background-size: 0.52em auto, 100%;
+    background-color: var(--ty-native-select-disabled-bg);
+    opacity: 0.75;
+    color: var(--ty-native-select-disabled-color);
+    cursor: not-allowed;
+    resize: none;
+
+    &:hover {
+      border-color: transparent;
+    }
+
+    &:focus {
+      border-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  &_sm {
+    @include native-size($native-select-sm-padding, $native-select-sm-font-size);
+  }
+
+  &_md {
+    @include native-size($native-select-md-padding, $native-select-md-font-size);
+  }
+
+  &_lg {
+    @include native-size($native-select-lg-padding, $native-select-lg-font-size);
+  }
+}

package/lib/native-select/style/_mixin.scss

@@ -0,0 +1,4 @@
+@mixin native-size($padding, $font-size){
+  padding: $padding;
+  font-size: $font-size;
+}

package/lib/native-select/style/css.js

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

package/lib/notification/style/_index.scss

@@ -0,0 +1,66 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-notification {
+  position: relative;
+  padding: 16px 24px;
+  border-radius: 3px;
+  color: var(--ty-color-text-secondary);
+  font-size: $font-size-base;
+  box-shadow: var(--ty-shadow-modal);
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+
+  &-container {
+    width: $notification-width;
+    position: fixed;
+    background-color: var(--ty-notification-bg);
+    z-index: 999;
+    box-sizing: border-box;
+    transition: all 200ms;
+
+    &_top-right,
+    &_bottom-right {
+      right: -($notification-width + $notification-margin);
+      margin-right: $notification-margin;
+    }
+
+    &_top-left,
+    &_bottom-left {
+      left: -($notification-width + $notification-margin);
+      margin-left: $notification-margin;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    right: 24px;
+    top: 16px;
+    cursor: pointer;
+    color: var(--ty-notification-close-color);
+    user-select: none;
+    transition: all 300ms;
+    background: none;
+    border: none;
+    padding: 0;
+    font-size: inherit;
+    line-height: inherit;
+
+    &:hover {
+      color: var(--ty-notification-close-hover);
+    }
+  }
+
+  &__title {
+    padding-right: 24px;
+    margin-bottom: 5px;
+    color: var(--ty-color-text);
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  &__icon {
+    margin-right: 15px;
+    height: 30px;
+  }
+}