tiny-ui 1.0.0 → 1.0.2

package/lib/input/style/_index.scss

@@ -1,180 +0,0 @@
-@use '../../style/variables' as *;
-@use './mixin' as *;
-
-.#{$prefix}-input {
-  position: relative;
-  box-sizing: border-box;
-  color: var(--ty-color-text);
-
-  &__input {
-    @include input-default();
-  }
-
-  &__prefix,
-  &__suffix {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 1;
-    margin: 0 8px;
-  }
-
-  &__prefix {
-    left: 0;
-  }
-
-  &__suffix {
-    right: 0;
-  }
-
-  &__clear-btn {
-    display: inline-block;
-    color: var(--ty-color-text-quaternary);
-    width: 14px;
-    height: 14px;
-    position: relative;
-    top: 2px;
-    cursor: pointer;
-  }
-
-  &_sm {
-    .#{$prefix}-input {
-      &__input {
-        font-size: $input-sm-font-size;
-        height: $input-sm-height;
-        line-height: $input-sm-height;
-      }
-
-      &__clear-btn {
-        transform: scale(0.7);
-      }
-    }
-  }
-
-  &_md {
-    .#{$prefix}-input {
-      &__input {
-        font-size: $input-md-font-size;
-        height: $input-md-height;
-        line-height: $input-md-height;
-      }
-
-      &__clear-btn {
-        transform: scale(0.8);
-      }
-    }
-  }
-
-  &_lg {
-    .#{$prefix}-input {
-      &__input {
-        font-size: $input-lg-font-size;
-        height: $input-lg-height;
-        line-height: $input-lg-height;
-      }
-    }
-  }
-
-  &_disabled {
-    .#{$prefix}-input__input {
-      @include input-default-disabled();
-    }
-  }
-}
-
-.#{$prefix}-input-group {
-  width: 100%;
-  display: flex;
-  box-sizing: border-box;
-  position: relative;
-
-  & > .#{$prefix}-input-group-addon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &_sm {
-    height: $input-sm-height;
-  }
-
-  &_md {
-    height: $input-md-height;
-  }
-
-  &_lg {
-    height: $input-lg-height;
-  }
-
-  .#{$prefix}-input {
-    z-index: 1;
-    flex: 1;
-
-    &:first-child {
-      .#{$prefix}-input__input {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-
-    &:last-child {
-      .#{$prefix}-input__input {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-
-    &:not(:first-child):not(:last-child) {
-      .#{$prefix}-input__input {
-        border-radius: 0;
-      }
-    }
-  }
-}
-
-.#{$prefix}-input-group-addon {
-  background-color: var(--ty-input-addon-bg);
-  border: 1px solid var(--ty-input-border);
-  box-sizing: border-box;
-  text-align: center;
-  line-height: 1;
-  border-radius: $input-border-radius;
-  color: var(--ty-color-text);
-  padding: 0 7px;
-
-  &_sm {
-    font-size: $input-sm-font-size;
-  }
-
-  &_md {
-    font-size: $input-md-font-size;
-  }
-
-  &_lg {
-    font-size: $input-lg-font-size;
-  }
-
-  &:first-child {
-    border-right: 0;
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  &:last-child {
-    border-left: 0;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-  }
-
-  &:not(:first-child):not(:last-child) {
-    border-radius: 0;
-    border-left: 0;
-    border-right: 0;
-    padding: 0 7px;
-  }
-
-  &_no-border {
-    border: none;
-    padding: 0;
-  }
-}

package/lib/input/style/_mixin.scss

@@ -1,38 +0,0 @@
-@use '../../style/variables' as *;
-
-// use for the `input` tag
-@mixin input-default {
-  box-sizing: border-box;
-  width: 100%;
-  margin: 0;
-  color: var(--ty-color-text);
-  border: 1px solid var(--ty-input-border);
-  transition: all 0.3s;
-  outline: 0;
-  border-radius: $input-border-radius;
-  font-size: $font-size-base;
-  background-color: var(--ty-input-bg);
-
-  &:hover {
-    border-color: var(--ty-color-primary);
-  }
-
-  &:focus {
-    border-color: var(--ty-input-focus-border);
-    box-shadow: var(--ty-input-focus-shadow);
-  }
-
-  &::placeholder {
-    color: var(--ty-color-text-placeholder);
-  }
-}
-
-@mixin input-default-disabled {
-  cursor: not-allowed;
-  background-color: var(--ty-input-disabled-bg);
-  color: var(--ty-input-disabled-color);
-
-  &:hover {
-    border-color: var(--ty-input-border);
-  }
-}

package/lib/input/style/css.js

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

package/lib/input-number/style/_index.scss

@@ -1,142 +0,0 @@
-@use '../../style/variables' as *;
-@use '../../input/style/mixin' as *;
-
-.#{$prefix}-input-number {
-  position: relative;
-  box-sizing: border-box;
-
-  &:hover {
-    .#{$prefix}-input-number__controls {
-      opacity: 1;
-    }
-  }
-
-  &__input {
-    @include input-default();
-    padding-left: 7px;
-    padding-right: 25px;
-
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
-      -webkit-appearance: none;
-    }
-  }
-
-  &__controls {
-    box-sizing: border-box;
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 1px;
-    opacity: 0;
-    transition: all 300ms;
-  }
-
-  &__up,
-  &__down {
-    cursor: pointer;
-    box-sizing: border-box;
-    flex: 1;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0 7px;
-    border-left: 1px solid var(--ty-input-number-control-border);
-    transition: all 300ms;
-
-    &:hover {
-      flex: 2;
-
-      .ty-icon {
-        color: var(--ty-color-primary) !important;
-      }
-    }
-
-    &:active {
-      background-color: var(--ty-input-number-control-active-bg);
-    }
-  }
-
-  &__up {
-    border-bottom: 1px solid var(--ty-input-number-control-border);
-  }
-
-  &__down {
-    padding-top: 1px;
-  }
-
-
-  &__icon {
-    color: var(--ty-input-number-icon-color);
-
-    &_reverse {
-      transform: rotate(180deg);
-    }
-  }
-
-  &_sm {
-    .#{$prefix}-input-number {
-      &__input {
-        font-size: $input-sm-font-size;
-        height: $input-sm-height;
-        line-height: $input-sm-height;
-      }
-    }
-  }
-
-  &_md {
-    .#{$prefix}-input-number {
-      &__input {
-        font-size: $input-md-font-size;
-        height: $input-md-height;
-        line-height: $input-md-height;
-      }
-    }
-  }
-
-  &_lg {
-    .#{$prefix}-input-number {
-      &__input {
-        font-size: $input-lg-font-size;
-        height: $input-lg-height;
-        line-height: $input-lg-height;
-      }
-    }
-  }
-
-  &_disabled {
-    .#{$prefix}-input-number {
-      &__input {
-        @include input-default-disabled();
-      }
-
-      &__up,
-      &__down {
-        cursor: not-allowed;
-
-        .ty-icon {
-          color: var(--ty-input-number-icon-color) !important;
-        }
-
-        &:hover {
-          flex: 1;
-        }
-
-        &:active {
-          background-color: transparent;
-        }
-      }
-    }
-  }
-
-  &_always-controls {
-    .#{$prefix}-input-number__controls {
-      opacity: 1;
-    }
-  }
-}

package/lib/input-number/style/css.js

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

package/lib/input-password/style/_index.scss

@@ -1,20 +0,0 @@
-@use '../../style/variables' as *;
-
-.#{$prefix}-input-pwd {
-  &__suffix {
-    cursor: pointer;
-    background: none;
-    border: none;
-    padding: 0;
-    color: inherit;
-  }
-
-  &__icon {
-    color: var(--ty-color-text-tertiary);
-    transition: color 250ms;
-
-    &:hover{
-      color: var(--ty-color-text-secondary);
-    }
-  }
-}

package/lib/input-password/style/css.js

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

package/lib/keyboard/style/_index.scss

@@ -1,23 +0,0 @@
-@use '../../style/variables' as *;
-
-.#{$prefix}-kbd {
-  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
-  display: inline-block;
-  padding: 4px 8px;
-  border: 1px solid var(--ty-kbd-border);
-  border-bottom-color: var(--ty-kbd-border-bottom);
-  border-radius: 4px;
-  font-size: 11px;
-  line-height: 1;
-  vertical-align: middle;
-  background-color: var(--ty-kbd-bg);
-  box-shadow: var(--ty-kbd-shadow);
-  color: var(--ty-kbd-color);
-  cursor: pointer;
-  user-select: none;
-
-  &:active {
-    transform: translate3d(0, 1px, 0);
-    box-shadow: none;
-  }
-}

package/lib/keyboard/style/css.js

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

package/lib/layout/style/_index.scss

@@ -1,82 +0,0 @@
-@use '../../style/variables' as *;
-
-.#{$prefix}-layout {
-  box-sizing: border-box;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-
-  &_has-sidebar {
-    flex-direction: row;
-  }
-}
-
-.#{$prefix}-layout-header {
-  box-sizing: border-box;
-  height: $layout-header-height;
-  background-color: var(--ty-color-bg-layout);
-}
-
-.#{$prefix}-layout-footer {
-  box-sizing: border-box;
-  padding: $layout-footer-padding;
-  background-color: var(--ty-color-bg-layout);
-}
-
-.#{$prefix}-layout-content {
-  flex: 1;
-  box-sizing: border-box;
-  background-color: var(--ty-color-bg-layout);
-}
-
-.#{$prefix}-layout-sidebar {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  transition: all 200ms;
-  background: var(--ty-layout-sidebar-bg);
-  color: #fff;
-
-  &:last-child {
-    .#{$prefix}-layout-sidebar__trigger-icon {
-      transform: rotateY(180deg);
-    }
-  }
-
-  &__children {
-    height: 100%;
-  }
-
-  &__trigger {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    z-index: 1;
-    cursor: pointer;
-    height: 40px;
-    background-color: var(--ty-layout-sidebar-trigger-bg);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: none;
-    padding: 0;
-    color: inherit;
-    font-size: inherit;
-  }
-
-  &_light {
-    background-color: var(--ty-layout-sidebar-light-bg);
-    color: var(--ty-layout-sidebar-light-color);
-
-    .#{$prefix}-layout-sidebar {
-      &__trigger {
-        background-color: var(--ty-layout-sidebar-light-trigger-bg);
-      }
-
-      &__trigger-icon {
-        color: var(--ty-layout-sidebar-light-trigger-icon);
-      }
-    }
-  }
-}

package/lib/layout/style/css.js

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

package/lib/link/style/_index.scss

@@ -1,17 +0,0 @@
-@use "../../style/variables" as *;
-
-.#{$prefix}-link {
-  color: var(--ty-color-primary);
-  text-decoration-line: none;
-
-  &_disabled {
-    cursor: not-allowed;
-    opacity: .5;
-  }
-
-  &_no-underline{
-    &:hover {
-      text-decoration-line: none;
-    }
-  }
-}

package/lib/link/style/css.js

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

package/lib/list/style/_index.scss

@@ -1,172 +0,0 @@
-@use '../../style/variables' as *;
-
-.#{$prefix}-list {
-  color: var(--ty-color-text, #{$gray-800});
-  font-size: $font-size-base;
-
-  &_bordered {
-    border: 1px solid var(--ty-list-border, #{$gray-300});
-    border-radius: $border-radius;
-  }
-
-  &_sm {
-    .#{$prefix}-list-item {
-      padding: 8px 16px;
-    }
-  }
-
-  &_md {
-    .#{$prefix}-list-item {
-      padding: 12px 16px;
-    }
-  }
-
-  &_lg {
-    .#{$prefix}-list-item {
-      padding: 16px 24px;
-    }
-  }
-
-  &__header,
-  &__footer {
-    padding: 12px 16px;
-  }
-
-  &_bordered &__header {
-    border-bottom: 1px solid var(--ty-list-border, #{$gray-300});
-  }
-
-  &_bordered &__footer {
-    border-top: 1px solid var(--ty-list-border, #{$gray-300});
-  }
-
-  &__body_virtual {
-    overflow-y: auto;
-    will-change: transform;
-
-    .#{$prefix}-list-item:last-child {
-      border-bottom: 1px solid var(--ty-list-border, #{$gray-200});
-    }
-  }
-
-  &__empty {
-    padding: 24px;
-    text-align: center;
-    color: var(--ty-color-text-secondary, #{$gray-500});
-  }
-
-  &__loading {
-    padding: 24px;
-    text-align: center;
-    color: var(--ty-color-text-secondary, #{$gray-500});
-  }
-
-  &__pagination {
-    display: flex;
-    justify-content: flex-end;
-    padding: 16px;
-    gap: 4px;
-  }
-
-  &__page-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 32px;
-    height: 32px;
-    padding: 0 6px;
-    border: 1px solid var(--ty-list-border, #{$gray-300});
-    border-radius: $border-radius;
-    background: transparent;
-    cursor: pointer;
-    font-size: $font-size-sm;
-
-    &:hover {
-      color: var(--ty-color-primary, #{$primary-color});
-      border-color: var(--ty-color-primary, #{$primary-color});
-    }
-
-    &_active {
-      color: var(--ty-color-primary, #{$primary-color});
-      border-color: var(--ty-color-primary, #{$primary-color});
-      font-weight: 500;
-    }
-  }
-}
-
-.#{$prefix}-list-item {
-  display: flex;
-  align-items: flex-start;
-
-  .#{$prefix}-list_split & {
-    border-bottom: 1px solid var(--ty-list-border, #{$gray-200});
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-
-  &__main {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    min-width: 0;
-  }
-
-  &__content {
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    margin-left: 24px;
-    flex-shrink: 0;
-  }
-
-  &__action {
-    color: var(--ty-color-text-secondary, #{$gray-600});
-    cursor: pointer;
-
-    &:hover {
-      color: var(--ty-color-primary, #{$primary-color});
-    }
-  }
-
-  &__extra {
-    margin-left: 24px;
-    flex-shrink: 0;
-  }
-}
-
-.#{$prefix}-list-item-meta {
-  display: flex;
-  align-items: flex-start;
-  flex: 1;
-
-  &__avatar {
-    margin-right: 12px;
-    flex-shrink: 0;
-  }
-
-  &__content {
-    flex: 1;
-    min-width: 0;
-  }
-
-  &__title {
-    font-weight: 500;
-    color: var(--ty-color-text, #{$gray-900});
-    margin-bottom: 4px;
-  }
-
-  &__description {
-    color: var(--ty-color-text-secondary, #{$gray-600});
-    font-size: $font-size-sm;
-  }
-}

package/lib/list/style/css.js

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