tiny-ui 1.0.2 → 1.0.3

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

@@ -0,0 +1,196 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-color-picker {
+  display: inline-block;
+  position: relative;
+
+  &_disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    .#{$prefix}-color-picker__trigger,
+    .#{$prefix}-color-picker__swatch {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  &__trigger {
+    cursor: pointer;
+    display: inline-flex;
+  }
+
+  &__swatch {
+    width: 32px;
+    height: 32px;
+    border-radius: $border-radius;
+    border: 1px solid var(--ty-color-picker-border, #{$gray-300});
+    padding: 3px;
+    cursor: pointer;
+  }
+
+  &__swatch-inner {
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+  }
+
+  &__panel {
+    padding: 12px;
+    background: var(--ty-color-picker-bg, #fff);
+    border-radius: 8px;
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    width: 240px;
+  }
+
+  &__spectrum {
+    position: relative;
+    width: 100%;
+    height: 150px;
+    border-radius: 4px;
+    cursor: crosshair;
+    overflow: hidden;
+  }
+
+  &__spectrum-white {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to right, #fff, transparent);
+  }
+
+  &__spectrum-black {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, transparent, #000);
+  }
+
+  &__spectrum-handle {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+
+  &__controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 12px;
+  }
+
+  &__preview {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 1px solid var(--ty-color-picker-border, #{$gray-300});
+    flex-shrink: 0;
+  }
+
+  &__sliders {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__hue {
+    position: relative;
+    height: 12px;
+    border-radius: 6px;
+    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+    cursor: pointer;
+  }
+
+  &__alpha {
+    position: relative;
+    height: 12px;
+    border-radius: 6px;
+    cursor: pointer;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 6px;
+      background: repeating-conic-gradient(#{$gray-300} 0% 25%, transparent 0% 50%) 0 0 / 8px 8px;
+      z-index: -1;
+    }
+  }
+
+  &__slider-handle {
+    position: absolute;
+    top: 50%;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    background: transparent;
+  }
+
+  &__input-row {
+    display: flex;
+    gap: 6px;
+    margin-top: 12px;
+    align-items: center;
+  }
+
+  &__format-btn {
+    border: 1px solid var(--ty-color-picker-border, #{$gray-300});
+    background: transparent;
+    border-radius: $border-radius;
+    padding: 2px 6px;
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--ty-color-text, #{$gray-700});
+    white-space: nowrap;
+
+    &:hover {
+      border-color: var(--ty-color-primary, #{$primary-color});
+    }
+  }
+
+  &__hex-input {
+    flex: 1;
+    border: 1px solid var(--ty-color-picker-border, #{$gray-300});
+    border-radius: $border-radius;
+    padding: 2px 6px;
+    font-size: 12px;
+    font-family: $font-family-monospace;
+    color: var(--ty-color-text, #{$gray-800});
+    outline: none;
+    min-width: 0;
+
+    &:focus {
+      border-color: var(--ty-color-primary, #{$primary-color});
+    }
+  }
+
+  &__presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid var(--ty-color-picker-border, #{$gray-200});
+  }
+
+  &__preset {
+    width: 20px;
+    height: 20px;
+    border-radius: $border-radius;
+    cursor: pointer;
+    border: 1px solid var(--ty-color-picker-border, #{$gray-300});
+    transition: transform 0.15s;
+
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+}

package/lib/color-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/date-picker/style/_index.scss

@@ -0,0 +1,272 @@
+@use '../../style/variables' as *;
+
+$dp: #{$prefix}-date-picker;
+
+.#{$dp} {
+  display: inline-flex;
+  position: relative;
+  font-family: $font-family;
+  font-size: $font-size-base;
+
+  // ---- 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: 120px;
+
+    &::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;
+    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: 90px;
+  }
+
+  &_lg &__input {
+    padding: 6px 11px;
+    font-size: 16px;
+  }
+
+  &_lg &__input-field {
+    min-width: 140px;
+  }
+
+  // ---- Disabled ----
+  &_disabled {
+    opacity: 0.65;
+
+    .#{$dp}__input {
+      background: var(--ty-color-bg-disabled);
+      cursor: not-allowed;
+      border-color: var(--ty-input-border);
+
+      &:hover {
+        border-color: var(--ty-input-border);
+      }
+    }
+  }
+
+  // ---- Dropdown ----
+  &__dropdown {
+    background: var(--ty-picker-dropdown-bg);
+    border-radius: 8px;
+    box-shadow: var(--ty-shadow-popup);
+    width: 288px;
+  }
+
+  // ---- Header ----
+  &__header {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--ty-color-border-light);
+  }
+
+  &__header-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: none;
+    background: transparent;
+    color: var(--ty-color-text-tertiary);
+    cursor: pointer;
+    font-size: 14px;
+    border-radius: 4px;
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--ty-color-primary);
+    }
+  }
+
+  &__header-caption {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+  }
+
+  &__header-label {
+    font-weight: 500;
+    cursor: pointer;
+    padding: 0 4px;
+    border-radius: 4px;
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--ty-color-primary);
+    }
+  }
+
+  // ---- Body / Table ----
+  &__body {
+    padding: 8px 12px;
+  }
+
+  &__table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    text-align: center;
+  }
+
+  &__cell-header {
+    font-weight: 400;
+    color: var(--ty-color-text-secondary);
+    padding: 4px 0;
+    font-size: 12px;
+  }
+
+  // ---- Cell ----
+  &__cell {
+    padding: 2px 0;
+    cursor: pointer;
+
+    &_disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__cell-inner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    transition: background 0.2s;
+    color: var(--ty-color-text-quaternary);
+    font-size: 13px;
+  }
+
+  &__cell_in-view &__cell-inner {
+    color: var(--ty-color-text);
+  }
+
+  &__cell:hover &__cell-inner {
+    background: var(--ty-picker-cell-hover-bg);
+  }
+
+  &__cell_today &__cell-inner {
+    border: 1px solid var(--ty-color-primary);
+    color: var(--ty-color-primary);
+  }
+
+  &__cell_selected &__cell-inner {
+    background: var(--ty-color-primary);
+    color: #fff;
+    font-weight: 500;
+  }
+
+  &__cell_selected:hover &__cell-inner {
+    background: var(--ty-picker-cell-selected-hover-bg);
+  }
+
+  &__cell_disabled &__cell-inner {
+    color: var(--ty-color-text-quaternary);
+    background: var(--ty-picker-cell-disabled-bg);
+  }
+
+  &__cell_disabled:hover &__cell-inner {
+    background: var(--ty-picker-cell-disabled-bg);
+  }
+
+  &__cell_dim &__cell-inner {
+    color: var(--ty-color-text-quaternary);
+  }
+
+  // ---- Footer ----
+  &__footer {
+    padding: 8px 12px;
+    border-top: 1px solid var(--ty-color-border-light);
+    text-align: center;
+  }
+
+  &__today-btn {
+    color: var(--ty-color-primary);
+    cursor: pointer;
+    font-size: 13px;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}

package/lib/date-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/descriptions/style/_index.scss

@@ -0,0 +1,116 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-descriptions {
+
+  &__body {
+    width: 100%;
+    overflow: hidden;
+
+    > table {
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+      box-sizing: border-box;
+      text-align: left;
+      background-color: transparent;
+    }
+  }
+
+  &__title {
+    text-align: left;
+    margin-bottom: 20px;
+    color: var(--ty-color-text);
+    font-weight: 600;
+    font-size: 16px;
+  }
+
+  &__item_colon:after {
+    content: ':';
+    margin-left: 2px;
+    margin-right: 5px;
+  }
+
+  &__item-label {
+    color: var(--ty-color-text-label);
+    font-size: $font-size-base;
+    font-weight: 400;
+    line-height: $line-height-base;
+  }
+
+  &__item-content {
+    color: var(--ty-color-text-secondary);
+    font-size: $font-size-base;
+    line-height: $line-height-base;
+  }
+
+  &_bordered {
+    .#{$prefix}-descriptions {
+      &__body {
+        border: 1px solid var(--ty-descriptions-border);
+        border-radius: $description-border-radius;
+      }
+
+      &__row {
+        border-bottom: 1px solid var(--ty-descriptions-border);
+
+        &:last-child {
+          border-bottom: 0;
+        }
+      }
+
+      &__item-label {
+        background-color: var(--ty-descriptions-label-bg);
+      }
+
+      &__item-label, &__item-content {
+        border-right: 1px solid var(--ty-descriptions-border);
+
+        &:last-child {
+          border-right: 0;
+        }
+      }
+    }
+  }
+
+  &_sm {
+    .#{$prefix}-descriptions__item {
+      padding-bottom: $description-sm-padding-vt;
+    }
+
+    &.#{$prefix}-descriptions_bordered {
+      .#{$prefix}-descriptions {
+        &__item-label, &__item-content {
+          padding: $description-sm-padding-vt $description-sm-padding-hr;
+        }
+      }
+    }
+  }
+
+  &_md {
+    .#{$prefix}-descriptions__item {
+      padding-bottom: $description-md-padding-vt;
+    }
+
+    &.#{$prefix}-descriptions_bordered {
+      .#{$prefix}-descriptions {
+        &__item-label, &__item-content {
+          padding: $description-md-padding-vt $description-md-padding-hr;
+        }
+      }
+    }
+  }
+
+  &_lg {
+    .#{$prefix}-descriptions__item {
+      padding-bottom: $description-lg-padding-vt;
+    }
+
+    &.#{$prefix}-descriptions_bordered {
+      .#{$prefix}-descriptions {
+        &__item-label, &__item-content {
+          padding: $description-lg-padding-vt $description-lg-padding-hr;
+        }
+      }
+    }
+  }
+}

package/lib/descriptions/style/css.js

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

package/lib/divider/style/_index.scss

@@ -0,0 +1,80 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-divider {
+  font-size: 16px;
+  line-height: 1.5;
+  box-sizing: border-box;
+  padding: 0;
+  list-style: none;
+
+  &_vertical {
+    margin: 0 8px;
+    display: inline-block;
+    height: 0.9em;
+    width: 1px;
+    vertical-align: middle;
+    position: relative;
+    top: -0.1em;
+    background: var(--ty-divider-color);
+
+    &-dashed {
+      background: none;
+      border-left: 1px dashed var(--ty-divider-color);
+    }
+  }
+
+  &_horizontal {
+    display: block;
+    height: 1px;
+    width: 100%;
+    margin: 16px 0;
+    background: var(--ty-divider-color);
+
+    &-dashed:not(.#{$prefix}-divider_text) {
+      background: none;
+      border-top: 1px dashed var(--ty-divider-color);
+    }
+  }
+
+  &_text {
+    display: table;
+    white-space: nowrap;
+    text-align: center;
+    background: transparent;
+    font-weight: 500;
+    color: var(--ty-divider-text-color);
+
+    &:before,
+    &:after {
+      content: '';
+      display: table-cell;
+      position: relative;
+      top: 50%;
+      width: 50%;
+      border-top: 1px solid var(--ty-divider-color);
+      transform: translateY(50%);
+    }
+  }
+
+  &_left:before,
+  &_right:after {
+    width: 5%;
+  }
+
+  &_left:after,
+  &_right:before {
+    width: 95%;
+  }
+
+  &_inner-text {
+    display: inline-block;
+    padding: 0 10px;
+  }
+
+  &_dashed {
+    &:before,
+    &:after {
+      border-top-style: dashed;
+    }
+  }
+}

package/lib/divider/style/css.js

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