@varlet/ui 1.27.20 → 2.0.0-alpha.1663499244572

package/es/switch/switch.less

@@ -1,94 +0,0 @@
-@switch-track-background: #fff;
-@switch-track-active-background: var(--color-primary);
-@switch-track-error-background: var(--color-danger);
-@switch-ripple-color: var(--color-primary);
-@switch-handle-background: #fff;
-@switch-handle-color: #fff;
-@switch-handle-active-background: var(--color-primary);
-@switch-handle-error-background: var(--color-danger);
-
-:root {
-  --switch-track-background: @switch-track-background;
-  --switch-track-active-background: @switch-track-active-background;
-  --switch-track-error-background: @switch-track-error-background;
-  --switch-ripple-color: @switch-ripple-color;
-  --switch-handle-background: @switch-handle-background;
-  --switch-handle-color: @switch-handle-color;
-  --switch-handle-active-background: @switch-handle-active-background;
-  --switch-handle-error-background: @switch-handle-error-background;
-}
-
-.var-switch {
-  display: inline-block;
-
-  &__block {
-    position: relative;
-    display: flex;
-    cursor: pointer;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    align-items: center;
-    justify-content: center;
-    height: 24px;
-    width: 40px;
-  }
-
-  &--disable {
-    filter: opacity(0.6);
-    cursor: not-allowed;
-  }
-
-  &__track {
-    background: var(--switch-track-background);
-    transition: background-color 0.25s;
-    filter: opacity(0.6);
-    height: 14.4px;
-    width: 38px;
-    border-radius: calc(20px * 2 / 3);
-
-    &--active {
-      background-color: var(--switch-track-active-background);
-    }
-
-    &--error {
-      background-color: var(--switch-track-error-background) !important;
-    }
-  }
-
-  &__ripple {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--switch-ripple-color);
-    border-radius: 50%;
-    overflow: hidden;
-    transition: 0.3s var(--cubic-bezier);
-    width: 40px;
-    height: 40px;
-    left: -10px;
-
-    &--active {
-      left: 10px;
-    }
-  }
-
-  &__handle {
-    border-radius: 50%;
-    background-color: var(--switch-handle-background);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--switch-handle-color);
-    transition: background-color 0.25s;
-    width: 20px;
-    height: 20px;
-
-    &--active {
-      background-color: var(--switch-handle-active-background);
-    }
-
-    &--error {
-      background-color: var(--switch-handle-error-background) !important;
-    }
-  }
-}

package/es/tab/style/less.js

@@ -1,4 +0,0 @@
-import '../../styles/common.less'
-import '../../ripple/ripple.less'
-import '../tab.less'
-import '../TabSfc.less'

package/es/tab/tab.less

@@ -1,46 +0,0 @@
-@tab-padding: 12px;
-@tab-active-color: var(--color-primary);
-@tab-inactive-color: #646566;
-@tab-disabled-color: var(--color-text-disabled);
-@tab-font-size: var(--font-size-md);
-
-:root {
-  --tab-padding: @tab-padding;
-  --tab-active-color: @tab-active-color;
-  --tab-inactive-color: @tab-inactive-color;
-  --tab-disabled-color: @tab-disabled-color;
-  --tab-font-size: @tab-font-size;
-}
-
-.var-tab {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1 0 auto;
-  padding: 0 var(--tab-padding);
-  font-size: var(--tab-font-size);
-  cursor: pointer;
-  user-select: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-  &--active {
-    color: var(--tab-active-color);
-  }
-
-  &--inactive {
-    color: var(--tab-inactive-color);
-  }
-
-  &--disabled {
-    color: var(--tab-disabled-color);
-    cursor: not-allowed;
-  }
-
-  &--horizontal {
-    flex-direction: row;
-  }
-
-  &--vertical {
-    flex-direction: column;
-  }
-}

package/es/tab-item/style/less.js

@@ -1,4 +0,0 @@
-import '../../styles/common.less'
-import '../../swipe-item/swipeItem.less'
-import '../tabItem.less'
-import '../TabItemSfc.less'

package/es/tab-item/tabItem.less

@@ -1,6 +0,0 @@
-.var-tab-item {
-  &--inactive[var-tab-item-cover] {
-    overflow: visible;
-    height: 0;
-  }
-}

package/es/table/style/less.js

@@ -1,4 +0,0 @@
-import '../../styles/common.less'
-import '../../styles/elevation.less'
-import '../table.less'
-import '../TableSfc.less'

package/es/table/table.less

@@ -1,110 +0,0 @@
-@table-background: #fff;
-@table-border-radius: 2px;
-@table-thead-border-bottom: thin solid rgba(0, 0, 0, 0.12);
-@table-thead-th-text-color: rgba(0, 0, 0, 0.6);
-@table-thead-th-font-size: 14px;
-@table-thead-tr-border-bottom: thin solid rgba(0, 0, 0, 0.12);
-@table-tbody-tr-hover-background: #eee;
-@table-tbody-tr-border-bottom: thin solid rgba(0, 0, 0, 0.12);
-@table-tbody-td-font-size: 16px;
-@table-row-height: 46px;
-@table-row-padding: 0 16px;
-@table-footer-border-top: thin solid rgba(0, 0, 0, 0.12);
-
-:root {
-  --table-background: @table-background;
-  --table-border-radius: @table-border-radius;
-  --table-thead-border-bottom: @table-thead-border-bottom;
-  --table-thead-th-text-color: @table-thead-th-text-color;
-  --table-thead-th-font-size: @table-thead-th-font-size;
-  --table-thead-tr-border-bottom: @table-thead-tr-border-bottom;
-  --table-tbody-tr-hover-background: @table-tbody-tr-hover-background;
-  --table-tbody-tr-border-bottom: @table-tbody-tr-border-bottom;
-  --table-tbody-td-font-size: @table-tbody-td-font-size;
-  --table-row-height: @table-row-height;
-  --table-row-padding: @table-row-padding;
-  --table-footer-border-top: @table-footer-border-top;
-}
-
-.var-table {
-  width: 100%;
-  background: var(--table-background);
-  border-radius: var(--table-border-radius);
-  transition: 0.25s background-color;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  &__main {
-    width: 100%;
-    overflow-x: auto;
-
-    > table {
-      min-width: 100%;
-      display: table;
-      border-spacing: 0;
-      border-collapse: collapse;
-      line-height: normal;
-
-      thead {
-        display: table-header-group;
-        border-bottom: var(--table-thead-border-bottom);
-
-        tr {
-          th {
-            color: var(--table-thead-th-text-color);
-            font-size: var(--table-thead-th-font-size);
-          }
-
-          &:not(:last-child) {
-            border-bottom: var(--table-thead-tr-border-bottom);
-          }
-        }
-      }
-
-      tbody {
-        display: table-row-group;
-
-        tr {
-          display: table-row;
-          outline: 0;
-          vertical-align: middle;
-
-          &:hover {
-            background: var(--table-tbody-tr-hover-background);
-          }
-
-          &:not(:last-child) {
-            border-bottom: var(--table-tbody-tr-border-bottom);
-          }
-        }
-
-        td {
-          font-size: var(--table-tbody-td-font-size);
-        }
-      }
-
-      th {
-        display: table-cell;
-        height: var(--table-row-height);
-        padding: var(--table-row-padding);
-        font-weight: 500;
-        text-align: left;
-      }
-
-      td {
-        display: table-cell;
-        padding: var(--table-row-padding);
-        height: var(--table-row-height);
-        text-align: left;
-      }
-    }
-  }
-
-  &__footer {
-    width: 100%;
-    min-height: var(--table-row-height);
-    border-top: var(--table-footer-border-top);
-  }
-}

package/es/tabs/style/less.js

@@ -1,5 +0,0 @@
-import '../../styles/common.less'
-import '../../styles/elevation.less'
-import '../../sticky/sticky.less'
-import '../tabs.less'
-import '../TabsSfc.less'

package/es/tabs/tabs.less

@@ -1,99 +0,0 @@
-@tabs-item-horizontal-height: 44px;
-@tabs-item-vertical-height: 66px;
-@tabs-radius: 2px;
-@tabs-padding: 12px;
-@tabs-indicator-size: 2px;
-@tabs-indicator-background: var(--color-primary);
-@tabs-background: #fff;
-
-:root {
-  --tabs-item-horizontal-height: @tabs-item-horizontal-height;
-  --tabs-item-vertical-height: @tabs-item-vertical-height;
-  --tabs-radius: @tabs-radius;
-  --tabs-padding: @tabs-padding;
-  --tabs-indicator-size: @tabs-indicator-size;
-  --tabs-indicator-background: @tabs-indicator-background;
-  --tabs-background: @tabs-background;
-}
-
-.var-tabs {
-  border-radius: var(--tabs-radius);
-  background: var(--tabs-background);
-  overflow: hidden;
-  transition: background-color 0.25s;
-
-  &__tab-wrap {
-    position: relative;
-    display: flex;
-    height: 100%;
-  }
-
-  &__indicator {
-    position: absolute;
-    z-index: 10;
-    transition-property: width, transform;
-    transition-duration: 0.3s;
-  }
-
-  &--layout-horizontal {
-    flex-direction: row;
-
-    &-scrollable {
-      overflow-x: auto;
-      overflow-y: hidden;
-    }
-
-    &-padding {
-      padding: 0 var(--tabs-padding);
-    }
-
-    &-indicator {
-      left: 0;
-      bottom: 0;
-      height: var(--tabs-indicator-size);
-      background: var(--tabs-indicator-background);
-    }
-  }
-
-  &--layout-vertical {
-    flex-direction: column;
-
-    &-scrollable {
-      overflow-x: hidden;
-      overflow-y: auto;
-    }
-
-    &-padding {
-      padding: 0;
-    }
-
-    &-indicator {
-      left: 0;
-      top: 0;
-      width: var(--tabs-indicator-size);
-      background: var(--tabs-indicator-background);
-    }
-  }
-
-  &--item-horizontal {
-    height: var(--tabs-item-horizontal-height);
-  }
-
-  &--item-vertical {
-    height: var(--tabs-item-vertical-height);
-  }
-
-  &--fixed-bottom {
-    position: fixed;
-    width: 100%;
-    left: 0;
-    bottom: 0;
-    z-index: 99;
-  }
-
-  &--safe-area {
-    padding-bottom: constant(safe-area-inset-bottom); // iOS < 11.2
-    padding-bottom: env(safe-area-inset-bottom); // iOS >= 11.2
-    box-sizing: content-box !important;
-  }
-}

package/es/tabs-items/style/less.js

@@ -1,3 +0,0 @@
-import '../../styles/common.less'
-import '../../swipe/swipe.less'
-import '../TabsItemsSfc.less'

package/es/time-picker/style/less.js

@@ -1,4 +0,0 @@
-import '../../styles/common.less'
-import '../../styles/elevation.less'
-import '../timePicker.less'
-import '../TimePickerSfc.less'

package/es/time-picker/timePicker.less

@@ -1,237 +0,0 @@
-@time-picker-border-radius: 4px;
-@time-picker-font-size: var(--font-size-md);
-@time-picker-min-width: 290px;
-@time-picker-height: 385px;
-@time-picker-title-padding: 16px;
-@time-picker-title-color: #fff;
-@time-picker-title-background: var(--color-primary);
-@time-picker-title-time-font-size: 50px;
-@time-picker-title-time-margin: 0 5px;
-@time-picker-title-ampm-margin-left: 5px;
-@time-picker-clock-left: 27px;
-@time-picker-clock-right: 27px;
-@time-picker-clock-top: 27px;
-@time-picker-clock-bottom: 27px;
-@time-picker-clock-container-width: 270px;
-@time-picker-clock-container-height: 270px;
-@time-picker-clock-container-background: #e0e0e0;
-@time-picker-clock-hand-height: calc(50% - 4px);
-@time-picker-clock-hand-width: 2px;
-@time-picker-clock-hand-bottom: 50%;
-@time-picker-clock-hand-left: calc(50% - 1px);
-@time-picker-clock-hand-background: var(--color-primary);
-@time-picker-clock-hand-border-color: var(--color-primary);
-@time-picker-clock-hand-before-width: 10px;
-@time-picker-clock-hand-before-height: 10px;
-@time-picker-clock-hand-before-border-width: 2px;
-@time-picker-clock-hand-after-width: 4px;
-@time-picker-clock-hand-after-height: 4px;
-@time-picker-clock-item-height: 32px;
-@time-picker-clock-item-width: 32px;
-@time-picker-clock-item-active-background: var(--color-primary);
-@time-picker-clock-item-active-color: #fff;
-@time-picker-clock-item-disable-color: rgba(0, 0, 0, 0.26);
-@time-picker-body-background: transparent;
-@time-picker-inner-left: 36px;
-@time-picker-inner-right: 36px;
-@time-picker-inner-top: 36px;
-@time-picker-inner-bottom: 36px;
-
-:root {
-  --time-picker-border-radius: @time-picker-border-radius;
-  --time-picker-font-size: @time-picker-font-size;
-  --time-picker-min-width: @time-picker-min-width;
-  --time-picker-height: @time-picker-height;
-  --time-picker-title-padding: @time-picker-title-padding;
-  --time-picker-title-color: @time-picker-title-color;
-  --time-picker-title-background: @time-picker-title-background;
-  --time-picker-title-time-font-size: @time-picker-title-time-font-size;
-  --time-picker-title-time-margin: @time-picker-title-time-margin;
-  --time-picker-title-ampm-margin-left: @time-picker-title-ampm-margin-left;
-  --time-picker-clock-left: @time-picker-clock-left;
-  --time-picker-clock-right: @time-picker-clock-right;
-  --time-picker-clock-top: @time-picker-clock-top;
-  --time-picker-clock-bottom: @time-picker-clock-bottom;
-  --time-picker-clock-container-width: @time-picker-clock-container-width;
-  --time-picker-clock-container-height: @time-picker-clock-container-height;
-  --time-picker-clock-container-background: @time-picker-clock-container-background;
-  --time-picker-clock-hand-height: @time-picker-clock-hand-height;
-  --time-picker-clock-hand-width: @time-picker-clock-hand-width;
-  --time-picker-clock-hand-bottom: @time-picker-clock-hand-bottom;
-  --time-picker-clock-hand-left: @time-picker-clock-hand-left;
-  --time-picker-clock-hand-background: @time-picker-clock-hand-background;
-  --time-picker-clock-hand-border-color: @time-picker-clock-hand-border-color;
-  --time-picker-clock-hand-before-width: @time-picker-clock-hand-before-width;
-  --time-picker-clock-hand-before-height: @time-picker-clock-hand-before-height;
-  --time-picker-clock-hand-before-border-width: @time-picker-clock-hand-before-border-width;
-  --time-picker-clock-hand-after-width: @time-picker-clock-hand-after-width;
-  --time-picker-clock-hand-after-height: @time-picker-clock-hand-after-height;
-  --time-picker-clock-item-height: @time-picker-clock-item-height;
-  --time-picker-clock-item-width: @time-picker-clock-item-width;
-  --time-picker-clock-item-active-background: @time-picker-clock-item-active-background;
-  --time-picker-clock-item-active-color: @time-picker-clock-item-active-color;
-  --time-picker-clock-item-disable-color: @time-picker-clock-item-disable-color;
-  --time-picker-inner-left: @time-picker-inner-left;
-  --time-picker-inner-right: @time-picker-inner-right;
-  --time-picker-inner-top: @time-picker-inner-top;
-  --time-picker-inner-bottom: @time-picker-inner-bottom;
-  --time-picker-body-background: @time-picker-body-background;
-}
-
-// Mixins
-.after-before-basic {
-  content: '';
-  position: absolute;
-  border-radius: 100%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.var-time-picker {
-  border-radius: var(--time-picker-border-radius);
-  contain: layout style;
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  font-size: var(--time-picker-font-size);
-  position: relative;
-  min-width: var(--time-picker-min-width);
-  height: var(--time-picker-height);
-  overflow: hidden;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-  &__title {
-    padding: var(--time-picker-title-padding);
-    color: var(--time-picker-title-color);
-    background: var(--time-picker-title-background);
-    display: flex;
-    align-items: flex-end;
-    justify-content: flex-end;
-
-    &-btn {
-      opacity: 0.6;
-      cursor: pointer;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      transition: 0.3s var(--cubic-bezier);
-      white-space: nowrap;
-
-      &--active {
-        opacity: 1;
-      }
-    }
-
-    &-time {
-      display: flex;
-      justify-content: flex-end;
-      font-size: var(--time-picker-title-time-font-size);
-
-      .var-time-picker__title-btn {
-        align-items: center;
-        margin: var(--time-picker-title-time-margin);
-      }
-    }
-
-    &-ampm {
-      margin-left: var(--time-picker-title-ampm-margin-left);
-    }
-  }
-
-  &__body {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--time-picker-body-background);
-  }
-
-  &__clock {
-    position: absolute;
-    bottom: var(--time-picker-clock-bottom);
-    left: var(--time-picker-clock-left);
-    right: var(--time-picker-clock-right);
-    top: var(--time-picker-clock-top);
-
-    &-container {
-      width: var(--time-picker-clock-container-width);
-      height: var(--time-picker-clock-container-height);
-      background: var(--time-picker-clock-container-background);
-      border-radius: 50%;
-      position: relative;
-    }
-
-    &-hand {
-      height: var(--time-picker-clock-hand-height);
-      width: var(--time-picker-clock-hand-width);
-      bottom: var(--time-picker-clock-hand-bottom);
-      left: var(--time-picker-clock-hand-left);
-      transform-origin: center bottom;
-      position: absolute;
-      will-change: transform;
-      z-index: 1;
-      background-color: var(--time-picker-clock-hand-background);
-      border-color: var(--time-picker-clock-hand-border-color);
-
-      &::before {
-        .after-before-basic();
-
-        background: transparent;
-        border: var(--time-picker-clock-hand-before-border-width) solid;
-        width: var(--time-picker-clock-hand-before-width);
-        height: var(--time-picker-clock-hand-before-height);
-        top: -5px;
-        border-color: inherit;
-      }
-
-      &::after {
-        .after-before-basic();
-
-        border-color: inherit;
-        height: var(--time-picker-clock-hand-after-height);
-        width: var(--time-picker-clock-hand-after-width);
-        top: 100%;
-        border-style: solid;
-        background-color: inherit;
-      }
-    }
-
-    &-item {
-      align-items: center;
-      border-radius: 100%;
-      display: flex;
-      justify-content: center;
-      height: var(--time-picker-clock-item-height);
-      position: absolute;
-      width: var(--time-picker-clock-item-width);
-      user-select: none;
-      transform: translate(-50%, -50%);
-
-      &--active {
-        background: var(--time-picker-clock-item-active-background);
-        z-index: 2;
-        color: var(--time-picker-clock-item-active-color);
-      }
-
-      &--disable {
-        color: var(--time-picker-clock-item-disable-color);
-      }
-    }
-
-    &-inner {
-      position: absolute;
-      bottom: var(--time-picker-inner-bottom);
-      left: var(--time-picker-inner-left);
-      right: var(--time-picker-inner-right);
-      top: var(--time-picker-inner-top);
-    }
-  }
-
-  &-panel-fade-enter-from,
-  &-panel-fade-leave-to {
-    transition: 0.3s var(--cubic-bezier);
-    opacity: 0;
-  }
-
-  &-panel-fade-leave-active {
-    position: absolute;
-  }
-}

package/es/uploader/style/less.js

@@ -1,8 +0,0 @@
-import '../../styles/common.less'
-import '../../styles/elevation.less'
-import '../../form-details/formDetails.less'
-import '../../icon/icon.less'
-import '../../popup/popup.less'
-import '../../image-preview/imagePreview.less'
-import '../uploader.less'
-import '../UploaderSfc.less'