tiny-ui 1.0.2 → 1.0.3

package/lib/drawer/style/_index.scss

@@ -0,0 +1,152 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-drawer {
+  position: fixed;
+
+  &__content {
+    height: 100%;
+    background-color: var(--ty-drawer-bg);
+    box-shadow: var(--ty-shadow-modal);
+    transition: all 300ms;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__header,
+  &__body,
+  &__footer {
+    padding: 16px 24px;
+  }
+
+  &__header {
+    border-bottom: 1px solid var(--ty-drawer-border);
+  }
+
+  &__body {
+    flex-grow: 1;
+  }
+
+  &__footer {
+    border-top: 1px solid var(--ty-drawer-border);
+  }
+
+  &__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;
+  }
+
+  &_left,
+  &_right {
+    bottom: 0;
+    top: 0;
+  }
+
+  &_top,
+  &_bottom {
+    left: 0;
+    right: 0;
+  }
+
+  &_top {
+    top: 0;
+
+    .#{$prefix}-drawer__content_move {
+      &-enter {
+        transform: translateY(-100%);
+        transition: none;
+      }
+
+      &-enter-done {
+        transform: translateY(0);
+      }
+
+      &-exit {
+        transform: translateY(0);
+      }
+
+      &-exit-done {
+        transform: translateY(-100%);
+      }
+    }
+  }
+
+  &_bottom {
+    bottom: 0;
+
+    .#{$prefix}-drawer__content_move {
+      &-enter {
+        transform: translateY(100%);
+        transition: none;
+      }
+
+      &-enter-done {
+        transform: translateY(0);
+      }
+
+      &-exit {
+        transform: translateY(0);
+      }
+
+      &-exit-done {
+        transform: translateY(100%);
+      }
+    }
+  }
+
+  &_right {
+    right: 0;
+
+    .#{$prefix}-drawer__content_move {
+      &-enter {
+        transform: translateX(100%);
+        transition: none;
+      }
+
+      &-enter-done {
+        transform: translateX(0);
+      }
+
+      &-exit {
+        transform: translateX(0);
+      }
+
+      &-exit-done {
+        transform: translateX(100%);
+      }
+    }
+  }
+
+  &_left {
+    left: 0;
+
+    .#{$prefix}-drawer__content_move {
+      &-enter {
+        transform: translateX(-100%);
+        transition: none;
+      }
+
+      &-enter-done {
+        transform: translateX(0);
+      }
+
+      &-exit {
+        transform: translateX(0);
+      }
+
+      &-exit-done {
+        transform: translateX(-100%);
+      }
+    }
+  }
+}

package/lib/drawer/style/css.js

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

package/lib/dropdown/style/_index.scss

@@ -0,0 +1,37 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-dropdown {
+
+  .#{$prefix}-menu, .#{$prefix}-menu-sub__list {
+    padding: 4px 0;
+
+    .#{$prefix}-menu-item_active {
+      background-color: transparent;
+      color: var(--ty-color-text);
+    }
+
+    .#{$prefix}-menu-item {
+      padding: 8px 15px;
+      margin: 0;
+
+      &:hover:not(.#{$prefix}-menu-item_disabled) {
+        background-color: var(--ty-color-bg-spotlight);
+        color: var(--ty-color-text);
+      }
+    }
+  }
+
+  .#{$prefix}-menu:before{
+    content: none;
+  }
+
+  .#{$prefix}-menu-item-group {
+    &__title {
+      padding: 8px 10px;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+}

package/lib/dropdown/style/css.js

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

package/lib/empty/style/_index.scss

@@ -0,0 +1,26 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  &__image-container {
+    margin-bottom: 8px;
+  }
+
+  &__image {
+    max-width: 120px;
+  }
+
+  &__desc {
+    color: var(--ty-empty-desc-color);
+    font-size: $font-size-base;
+    margin: 0;
+  }
+
+  &__footer {
+    margin-top: 16px;
+  }
+}

package/lib/empty/style/css.js

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

package/lib/flex/style/_index.scss

@@ -0,0 +1,5 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-flex {
+  display: flex;
+}

package/lib/flex/style/css.js

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

package/lib/flip/style/_index.scss

@@ -0,0 +1,61 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-flip {
+  display: inline-block;
+  background-color: transparent;
+  box-sizing: border-box;
+  perspective: 1000px;
+
+  &:hover .#{$prefix}-flip__inner_hor {
+    transform: rotateY(-180deg);
+  }
+
+  &:hover .#{$prefix}-flip__inner_hor_reverse {
+    transform: rotateY(180deg);
+  }
+
+  &:hover .#{$prefix}-flip__inner_ver {
+    transform: rotateX(-180deg);
+  }
+
+  &:hover .#{$prefix}-flip__inner_ver_reverse {
+    transform: rotateX(180deg);
+  }
+
+  &__inner {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    transition: transform 0.8s;
+    transform-style: preserve-3d;
+  }
+
+  &__item-front,
+  &__item-back {
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+  }
+
+  &__item-back {
+    &_hor {
+      transform: rotateY(-180deg);
+    }
+
+    &_hor_reverse {
+      transform: rotateY(180deg);
+    }
+
+    &_ver {
+      transform: rotateX(-180deg);
+    }
+
+    &_ver_reverse {
+      transform: rotateX(180deg);
+    }
+  }
+}

package/lib/flip/style/css.js

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

package/lib/form/style/_index.scss

@@ -0,0 +1,93 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-form {
+
+  &_vertical {
+    .#{$prefix}-form-item__label {
+      text-align: left;
+    }
+  }
+
+  &_inline {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+.#{$prefix}-form-item {
+  margin-bottom: 22px;
+  vertical-align: top;
+
+  &__label {
+    line-height: 30px;
+    text-align: right;
+    vertical-align: top;
+    color: var(--ty-color-text);
+    font-size: $font-size-base;
+
+    &_required:before {
+      content: '*';
+      margin-right: 3px;
+      color: var(--ty-form-error-color);
+    }
+
+    &_colon:after {
+      content: ':';
+      margin: 0 8px 0 2px;
+    }
+  }
+
+  &__input {
+    position: relative;
+    min-height: 32px;
+    display: flex;
+    align-items: center;
+  }
+
+  &__input-content {
+    flex: auto;
+    max-width: 100%;
+  }
+
+  &__error {
+    min-height: 22px;
+    line-height: 22px;
+    font-size: 13px;
+    color: var(--ty-form-error-color);
+  }
+
+  &__helper {
+    min-height: 22px;
+    line-height: 22px;
+    font-size: 13px;
+    color: var(--ty-color-text-tertiary);
+  }
+
+  &__notice {
+    font-size: 13px;
+    border-radius: $border-radius;
+    background: var(--ty-form-notice-bg);
+    color: var(--ty-form-notice-color);
+    padding: 5px;
+    margin-top: 5px;
+  }
+
+  &_with-err-label {
+    margin-bottom: 0;
+  }
+
+  &_has-error {
+    .#{$prefix}-input__input, .#{$prefix}-input-number__input, .#{$prefix}-textarea {
+      border-color: var(--ty-form-error-color);
+
+      &:not([disabled]):hover{
+        border-color: var(--ty-form-error-color);
+      }
+
+      &:focus{
+        border-color: var(--ty-form-error-hover);
+        box-shadow: 0 0 0 2px rgba(255,77,79,.2);
+      }
+    }
+  }
+}

package/lib/form/style/css.js

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

package/lib/grid/style/_index.scss

@@ -0,0 +1,90 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-row {
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: row wrap;
+
+  &_justify {
+    &-start {
+      justify-content: flex-start;
+    }
+
+    &-center {
+      justify-content: center;
+    }
+
+    &-end {
+      justify-content: flex-end;
+    }
+
+    &-space-around {
+      justify-content: space-around;
+    }
+
+    &-space-between {
+      justify-content: space-between;
+    }
+
+    &-space-evenly {
+      justify-content: space-evenly;
+    }
+  }
+
+  &_align {
+    &-top {
+      align-items: flex-start;
+    }
+
+    &-center {
+      align-items: center;
+    }
+
+    &-bottom {
+      align-items: flex-end;
+    }
+
+    &-baseline {
+      align-items: baseline;
+    }
+  }
+}
+
+.#{$prefix}-col {
+  @mixin grid($size: '') {
+    @for $i from 1 through 24 {
+      &#{$size}-#{$i} {
+        width: calc(100% / (24 / $i));
+      }
+
+      &#{$size}-offset-#{$i} {
+        margin-left: calc(100% / (24 / $i));
+      }
+
+      &#{$size}-order-#{$i} {
+        order: $i;
+      }
+    }
+  }
+
+  box-sizing: border-box;
+  display: block;
+  @include grid();
+  @include grid('-xs');
+
+  @media screen and (min-width: $size-sm) {
+    @include grid('-sm');
+  }
+  @media screen and (min-width: $size-md) {
+    @include grid('-md');
+  }
+  @media screen and (min-width: $size-lg) {
+    @include grid('-lg');
+  }
+  @media screen and (min-width: $size-xl) {
+    @include grid('-xl');
+  }
+  @media screen and (min-width: $size-xxl) {
+    @include grid('-xxl');
+  }
+}

package/lib/grid/style/css.js

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

package/lib/icon/style/_index.scss

@@ -0,0 +1,16 @@
+@use '../../style/variables' as *;
+@use '../../style/font' as *;
+
+.#{$prefix}-icon {
+  font-family: 'tiny' !important;
+  line-height: 1;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  &_spin:before {
+    display: inline-block;
+    animation: ty-rotate 1s linear infinite;
+  }
+}

package/lib/icon/style/css.js

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

package/lib/image/style/_index.scss

@@ -0,0 +1,9 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-image {
+  box-sizing: border-box;
+
+  &_round {
+    border-radius: 50%;
+  }
+}

package/lib/image/style/css.js

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