tiny-ui 1.0.2 → 1.0.3

package/es/overlay/style/_index.scss

@@ -0,0 +1,51 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: opacity 300ms;
+  opacity: 0;
+
+  &_default {
+    background-color: var(--ty-color-overlay-bg);
+  }
+
+  &_blurred {
+    backdrop-filter: blur(3px);
+  }
+
+  &_inverted {
+    background-color: var(--ty-color-overlay-inverted);
+  }
+
+  &_none {
+  }
+
+  &_fade {
+    &-enter {
+      opacity: 0;
+    }
+
+    &-enter-done {
+      opacity: 1;
+    }
+
+    &-exit {
+      opacity: 1;
+    }
+
+    &-exit-active {
+      opacity: 0;
+    }
+
+    &-exit-done {
+      opacity: 0;
+      display: none;
+    }
+  }
+}

package/es/overlay/style/css.js

@@ -0,0 +1,2 @@
+import './index.css';
+//# sourceMappingURL=index.js.map

package/es/pagination/style/_index.scss

@@ -0,0 +1,143 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-pagination {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: var(--ty-color-text-secondary);
+  font-size: 14px;
+  list-style: none;
+
+  &_left {
+    text-align: left;
+  }
+
+  &_center {
+    text-align: center;
+  }
+
+  &_right {
+    text-align: right;
+  }
+
+  &_disabled {
+    .#{$prefix}-pagination__item_active {
+      background: var(--ty-pagination-disabled-active-bg) !important;
+      border-color: transparent !important;
+      color: #fff !important;
+    }
+  }
+
+  &__item {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    text-align: center;
+    vertical-align: middle;
+    list-style: none;
+    background-color: var(--ty-pagination-bg);
+    border-radius: 2px;
+    outline: 0;
+    cursor: pointer;
+    user-select: none;
+    transition: all 400ms;
+
+    > button {
+      background: none;
+      border: none;
+      padding: 0;
+      color: inherit;
+      font: inherit;
+      cursor: inherit;
+      width: 100%;
+      height: 100%;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &_disabled {
+      cursor: not-allowed;
+    }
+
+    &_ellipsis {
+      color: var(--ty-color-text-quaternary);
+
+      &:hover {
+        color: var(--ty-color-primary);
+      }
+    }
+  }
+
+  &__left-arrow {
+    transform: rotate(90deg);
+  }
+
+  &__right-arrow {
+    transform: rotate(-90deg);
+  }
+
+  &_md {
+    .#{$prefix}-pagination__item {
+      min-width: 32px;
+      height: 32px;
+      margin-left: 4px;
+      margin-right: 4px;
+      line-height: 30px;
+      border: 1px solid var(--ty-color-border);
+
+      &_active {
+        color: var(--ty-color-primary);
+        border-color: var(--ty-color-primary);
+      }
+
+      &:hover {
+        border-color: var(--ty-color-primary);
+      }
+
+      &_disabled {
+        color: var(--ty-color-text-tertiary);
+        background: var(--ty-pagination-disabled-bg);
+        border-color: var(--ty-color-border);
+
+        &:hover {
+          border-color: var(--ty-color-border);
+        }
+      }
+
+      &_ellipsis {
+        border: 0;
+      }
+    }
+  }
+
+  &_sm {
+    .#{$prefix}-pagination__item {
+      min-width: 24px;
+      height: 24px;
+      margin-left: 0.5px;
+      margin-right: 0.5px;
+      line-height: 22px;
+      border-color: transparent;
+
+      &_active {
+        color: var(--ty-color-primary);
+        border: 1px solid var(--ty-color-primary);
+      }
+
+      &:hover {
+        color: var(--ty-color-primary);
+      }
+
+      &_disabled {
+        color: var(--ty-pagination-disabled-color);
+        border-color: var(--ty-pagination-disabled-color);
+
+        &:hover {
+          color: var(--ty-pagination-disabled-color);
+        }
+      }
+    }
+  }
+}

package/es/pagination/style/css.js

@@ -0,0 +1,2 @@
+import './index.css';
+//# sourceMappingURL=index.js.map

package/es/pop-confirm/style/_index.scss

@@ -0,0 +1,25 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-pop-confirm {
+  color: var(--ty-color-text-secondary);
+
+  &__overlay {
+    padding: 4px;
+  }
+
+  &__messages {
+    padding: 0 0 12px;
+    font-size: $font-size-base;
+    display: flex;
+    align-items: center;
+  }
+
+  &__buttons {
+    text-align: right;
+  }
+
+  &__title {
+    margin-left: 5px;
+  }
+
+}

package/es/pop-confirm/style/css.js

@@ -0,0 +1,5 @@
+import './index.css';
+// style dependencies
+import '../../button/style/index.css';
+import '../../popover/style/index.css';
+//# sourceMappingURL=index.js.map

package/es/popover/style/_index.scss

@@ -0,0 +1,42 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-popover {
+
+  &__title {
+    margin: 0;
+    padding: 9px 16px 7px;
+    font-weight: 500;
+    min-width: 177px;
+    min-height: 32px;
+  }
+
+  &__content {
+    padding: 12px 15px;
+  }
+
+  &_light {
+    .#{$prefix}-popover {
+      &__title {
+        color: var(--ty-color-text);
+        border-bottom: 1px solid var(--ty-color-border-secondary);
+      }
+
+      &__content {
+        color: var(--ty-color-text-secondary);
+      }
+    }
+  }
+
+  &_dark {
+    .#{$prefix}-popover {
+      &__title {
+        color: #fff;
+        border-bottom: 1px solid var(--ty-popover-dark-border);
+      }
+
+      &__content {
+        color: #fff;
+      }
+    }
+  }
+}

package/es/popover/style/css.js

@@ -0,0 +1,4 @@
+import './index.css';
+// style dependency
+import '../../popup/style/index.css';
+//# sourceMappingURL=index.js.map

package/es/popup/style/_index.scss

@@ -0,0 +1,84 @@
+@use 'sass:math';
+@use '../../style/variables' as *;
+
+.#{$prefix}-popup {
+  box-sizing: border-box;
+  border-radius: $popover-border-radius;
+  white-space: nowrap;
+  font-size: $font-size-base;
+  text-align: left;
+  box-shadow: var(--ty-shadow-popup);
+  z-index: 999;
+
+  &__arrow, &__arrow:before {
+    width: $popover-arrow-size;
+    height: $popover-arrow-size;
+    box-sizing: border-box;
+    position: absolute;
+  }
+
+  &__arrow:before {
+    content: '';
+    transform: rotate(45deg);
+  }
+
+  &_light {
+    background-color: var(--ty-popup-light-bg);
+    color: var(--ty-color-text-secondary);
+    .#{$prefix}-popup {
+      &__arrow:before {
+        background: var(--ty-popup-light-bg);
+      }
+    }
+  }
+
+  &_dark {
+    background-color: var(--ty-popup-dark-bg);
+    color: #fff;
+    .#{$prefix}-popup {
+      &__arrow:before {
+        background: var(--ty-popup-dark-bg);
+      }
+    }
+  }
+
+  &[data-popper-placement^='top'] {
+    & > .#{$prefix}-popup__arrow {
+      bottom: math.div(-$popover-arrow-size, 2);
+
+      &:before {
+        box-shadow: 3px 3px 7px var(--ty-popup-arrow-shadow);
+      }
+    }
+  }
+
+  &[data-popper-placement^='bottom'] {
+    > .#{$prefix}-popup__arrow {
+      top: math.div(-$popover-arrow-size, 2);
+
+      &:before {
+        box-shadow: -2px -2px 5px var(--ty-popup-arrow-shadow);
+      }
+    }
+  }
+
+  &[data-popper-placement^='left'] {
+    > .#{$prefix}-popup__arrow {
+      right: math.div(-$popover-arrow-size, 2);
+
+      &:before {
+        box-shadow: 3px -3px 7px var(--ty-popup-arrow-shadow);
+      }
+    }
+  }
+
+  &[data-popper-placement^='right'] {
+    > .#{$prefix}-popup__arrow {
+      left: math.div(-$popover-arrow-size, 2);
+
+      &:before {
+        box-shadow: -3px 3px 7px var(--ty-popup-arrow-shadow);
+      }
+    }
+  }
+}

package/es/popup/style/css.js

@@ -0,0 +1,4 @@
+import './index.css';
+// style dependency
+import '../../popup/style/index.css';
+//# sourceMappingURL=index.js.map

package/es/progress/style/_index.scss

@@ -0,0 +1,170 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-progress-bar {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+
+  &__inner {
+    flex: 1;
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    background-color: var(--ty-progress-trail-bg);
+  }
+
+  &__bg {
+    position: relative;
+    text-align: right;
+    height: 100%;
+    transition: all 0.6s;
+    &_primary {
+      background-color: var(--ty-color-primary);
+    }
+
+    &_yellow {
+      background-color: var(--ty-color-warning);
+    }
+
+    &_blue {
+      background-color: var(--ty-color-info);
+    }
+
+    &_red {
+      background-color: var(--ty-color-danger);
+    }
+
+    &_green {
+      background-color: var(--ty-color-success);
+    }
+  }
+
+  &__text {
+    color: var(--ty-progress-text-color);
+    margin-left: 10px;
+    min-width: 40px;
+    text-align: right;
+  }
+
+  &__inner-text {
+    color: #fff;
+    font-size: 10px;
+    margin: 0 5px;
+  }
+
+  &__effect {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    &_striped {
+      background-size: 20px 20px;
+      background-image: linear-gradient(
+        -45deg,
+        rgba(255, 255, 255, 0.15) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.15) 50%,
+        rgba(255, 255, 255, 0.15) 75%,
+        transparent 75%,
+        transparent
+      );
+      animation: ty-progress-striped 2s linear infinite;
+    }
+
+    &_impulse {
+      border-radius: inherit;
+      opacity: 0;
+      background: #fff;
+      animation: ty-progress-impulse 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
+    }
+  }
+
+  &_round {
+    .#{$prefix}-progress-bar {
+      &__inner,
+      &__bg {
+        border-radius: 100px;
+      }
+    }
+  }
+
+  &_square {
+    .#{$prefix}-progress-bar {
+      &__inner,
+      &__bg {
+        border-radius: 0;
+      }
+    }
+  }
+}
+
+.#{$prefix}-progress-circle {
+  display: inline-block;
+  position: relative;
+
+  &__bg {
+    stroke: var(--ty-progress-circle-trail);
+    fill: none;
+  }
+
+  &__path {
+    fill: none;
+    transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease;
+    &_primary {
+      stroke: var(--ty-color-primary);
+    }
+
+    &_yellow {
+      stroke: var(--ty-color-warning);
+    }
+
+    &_blue {
+      stroke: var(--ty-color-info);
+    }
+
+    &_red {
+      stroke: var(--ty-color-danger);
+    }
+
+    &_green {
+      stroke: var(--ty-color-success);
+    }
+  }
+
+  &__text {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 20px;
+  }
+}
+
+@keyframes ty-progress-striped {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 20px 0;
+  }
+}
+
+@keyframes ty-progress-impulse {
+  0% {
+    opacity: 0.1;
+    width: 0;
+  }
+  20% {
+    opacity: 0.5;
+    width: 0;
+  }
+  100% {
+    opacity: 0;
+    width: 100%;
+  }
+}

package/es/progress/style/css.js

@@ -0,0 +1,2 @@
+import './index.css';
+//# sourceMappingURL=index.js.map

package/es/radio/style/_index.scss

@@ -0,0 +1,86 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  font-size: $font-size-base;
+  margin-right: 8px;
+  color: var(--ty-color-text);
+
+  &__native {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    cursor: pointer;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__inner {
+    box-sizing: border-box;
+    display: flex;
+    width: 16px;
+    height: 16px;
+    border-radius: 100%;
+    background-color: var(--ty-radio-bg);
+    border: 1px solid var(--ty-color-primary);
+    align-items: center;
+    justify-content: center;
+
+    &:after {
+      box-sizing: border-box;
+      display: inline-block;
+      content: '';
+      width: 10px;
+      height: 10px;
+      border-radius: 100%;
+      background-color: var(--ty-color-primary);
+      transition: all 200ms;
+      transform: scale(0);
+    }
+
+    & + span {
+      padding: 0 5px;
+      line-height: 16px;
+    }
+  }
+
+  &_checked {
+    .#{$prefix}-radio {
+      &__inner:after {
+        transform: scale(1);
+      }
+    }
+  }
+
+  &_disabled {
+    .#{$prefix}-radio {
+      &__native {
+        cursor: not-allowed;
+      }
+
+      &__inner {
+        border-color: var(--ty-radio-disabled-border);
+
+        &:after {
+          background-color: var(--ty-radio-disabled-dot);
+        }
+
+        & + span {
+          color: var(--ty-color-text-quaternary);
+        }
+      }
+    }
+  }
+
+  &-group {
+    display: inline-block;
+  }
+}

package/es/radio/style/css.js

@@ -0,0 +1,2 @@
+import './index.css';
+//# sourceMappingURL=index.js.map

package/es/rate/style/_index.scss

@@ -0,0 +1,31 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-rate {
+  display: inline-flex;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+
+  &__item {
+    position: relative;
+  }
+
+  &__item-first,
+  &__item-second {
+    user-select: none;
+    cursor: pointer;
+  }
+
+  &__item-first {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+    //opacity: 0;
+  }
+
+  &__item-second {
+  }
+}

package/es/rate/style/css.js

@@ -0,0 +1,2 @@
+import './index.css';
+//# sourceMappingURL=index.js.map