@varlet/ui 1.27.20 → 2.0.0-alpha.1663499244572

package/lib/date-picker/date-picker.less

@@ -1,354 +0,0 @@
-@date-picker-border-radius: 4px;
-@date-picker-font-size: var(--font-size-md);
-@date-picker-min-width: 290px;
-@date-picker-height: 385px;
-@date-picker-main-color: rgba(0, 0, 0, 0.87);
-@date-picker-title-padding: 16px;
-@date-picker-title-background: var(--color-primary);
-@date-picker-title-color: #fff;
-@date-picker-title-year-font-size: var(--font-size-md);
-@date-picker-title-year-font-weight: 500;
-@date-picker-title-year-margin-bottom: 8px;
-@date-picker-title-date-height: 48px;
-@date-picker-title-date-font-size: 34px;
-@date-picker-title-date-font-weight: 500;
-@date-picker-title-date-range-font-size: 20px;
-@picker-header-padding: 4px 16px;
-@month-picker-padding: 0 12px;
-@month-picker-item-width: 33%;
-@month-picker-item-height: 56px;
-@month-picker-item-button-max-width: 140px;
-@year-picker-font-weight: 400;
-@year-picker-item-padding: 8px 0;
-@year-picker-item-active-font-size: 26px;
-@year-picker-item-active-font-weight: 500;
-@year-picker-item-active-font-padding: 10px 0;
-@year-picker-item-active-color: var(--color-primary);
-@day-picker-content-item-width: 14.28%;
-@day-picker-content-item-font-size: var(--font-size-sm);
-@day-picker-content-item-padding: 2px 0;
-@day-picker-content-item-button-width: 32px;
-@day-picker-content-item-button-height: 32px;
-@day-picker-content-item-button-font-size: var(--font-size-sm);
-@day-picker-head-item-color: rgba(0, 0, 0, 0.38);
-@day-picker-head-item-padding: 8px 0;
-@day-picker-head-item-font-weight: 600;
-@date-picker-body-background-color: transparent;
-
-:root {
-  --date-picker-border-radius: @date-picker-border-radius;
-  --date-picker-font-size: @date-picker-font-size;
-  --date-picker-min-width: @date-picker-min-width;
-  --date-picker-height: @date-picker-height;
-  --date-picker-main-color: @date-picker-main-color;
-  --date-picker-title-padding: @date-picker-title-padding;
-  --date-picker-title-background: @date-picker-title-background;
-  --date-picker-title-color: @date-picker-title-color;
-  --date-picker-title-year-font-size: @date-picker-title-year-font-size;
-  --date-picker-title-year-font-weight: @date-picker-title-year-font-weight;
-  --date-picker-title-year-margin-bottom: @date-picker-title-year-margin-bottom;
-  --date-picker-title-date-height: @date-picker-title-date-height;
-  --date-picker-title-date-font-size: @date-picker-title-date-font-size;
-  --date-picker-title-date-font-weight: @date-picker-title-date-font-weight;
-  --date-picker-title-date-range-font-size: @date-picker-title-date-range-font-size;
-  --date-picker-body-background-color: @date-picker-body-background-color;
-  --picker-header-padding: @picker-header-padding;
-  --month-picker-padding: @month-picker-padding;
-  --month-picker-item-width: @month-picker-item-width;
-  --month-picker-item-height: @month-picker-item-height;
-  --month-picker-item-button-max-width: @month-picker-item-button-max-width;
-  --year-picker-font-weight: @year-picker-font-weight;
-  --year-picker-item-padding: @year-picker-item-padding;
-  --year-picker-item-active-font-size: @year-picker-item-active-font-size;
-  --year-picker-item-active-font-weight: @year-picker-item-active-font-weight;
-  --year-picker-item-active-font-padding: @year-picker-item-active-font-padding;
-  --year-picker-item-active-color: @year-picker-item-active-color;
-  --day-picker-content-item-width: @day-picker-content-item-width;
-  --day-picker-content-item-font-size: @day-picker-content-item-font-size;
-  --day-picker-content-item-padding: @day-picker-content-item-padding;
-  --day-picker-content-item-button-width: @day-picker-content-item-button-width;
-  --day-picker-content-item-button-height: @day-picker-content-item-button-height;
-  --day-picker-content-item-button-font-size: @day-picker-content-item-button-font-size;
-  --day-picker-head-item-color: @day-picker-head-item-color;
-  --day-picker-head-item-padding: @day-picker-head-item-padding;
-  --day-picker-head-item-font-weight: @day-picker-head-item-font-weight;
-}
-
-.var-date-picker {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  border-radius: var(--date-picker-border-radius);
-  contain: layout style;
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  font-size: var(--date-picker-font-size);
-  position: relative;
-  min-width: var(--date-picker-min-width);
-  height: var(--date-picker-height);
-  overflow: hidden;
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  &__title {
-    padding: var(--date-picker-title-padding);
-    color: var(--date-picker-title-color);
-    background: var(--date-picker-title-background);
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    flex-wrap: wrap;
-
-    &-year {
-      opacity: 0.6;
-      cursor: pointer;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      align-items: center;
-      display: inline-flex;
-      font-size: var(--date-picker-title-year-font-size);
-      font-weight: var(--date-picker-title-year-font-weight);
-      margin-bottom: var(--date-picker-title-year-margin-bottom);
-      transition: 0.3s var(--cubic-bezier);
-
-      &--active {
-        opacity: 1;
-      }
-    }
-
-    &-date {
-      height: var(--date-picker-title-date-height);
-      overflow: hidden;
-      font-size: var(--date-picker-title-date-font-size);
-      text-align: left;
-      font-weight: var(--date-picker-title-date-font-weight);
-      position: relative;
-      cursor: pointer;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-      display: flex;
-      align-items: center;
-      opacity: 0.6;
-      transition: 0.3s var(--cubic-bezier);
-
-      &--active {
-        opacity: 1;
-      }
-
-      &--range {
-        font-size: var(--date-picker-title-date-range-font-size);
-      }
-    }
-  }
-
-  &__body {
-    flex: 1;
-    position: relative;
-    overflow: auto;
-    background-color: var(--date-picker-body-background-color);
-
-    &::-webkit-scrollbar {
-      display: none;
-      width: 0;
-      background: transparent;
-    }
-  }
-
-  .var-picker-header {
-    padding: var(--picker-header-padding);
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    position: relative;
-
-    &__value {
-      flex: 1;
-      text-align: center;
-      position: relative;
-      overflow: hidden;
-      font-weight: 700;
-      cursor: pointer;
-      user-select: none;
-
-      div {
-        width: 100%;
-      }
-    }
-  }
-
-  .var-month-picker {
-    &__content {
-      padding: var(--month-picker-padding);
-
-      ul {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-
-        li {
-          width: var(--month-picker-item-width);
-          display: flex;
-          height: var(--month-picker-item-height);
-          align-items: center;
-          justify-content: center;
-        }
-      }
-    }
-
-    &__button[var-month-picker-cover] {
-      width: 100%;
-      max-width: var(--month-picker-item-button-max-width);
-    }
-
-    &__button[var-date-picker-color-cover='true'] {
-      color: var(--date-picker-main-color);
-    }
-
-    &__button--disabled {
-      color: var(--color-text-disabled) !important;
-      cursor: not-allowed;
-    }
-  }
-
-  .var-year-picker {
-    width: 100%;
-    height: 100%;
-    font-weight: var(--year-picker-font-weight);
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-    overflow: auto;
-    text-align: center;
-
-    &__item {
-      padding: var(--year-picker-item-padding);
-      cursor: pointer;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-      &--active {
-        font-size: var(--year-picker-item-active-font-size);
-        font-weight: var(--year-picker-item-active-font-weight);
-        padding: var(--year-picker-item-active-font-padding);
-        color: var(--year-picker-item-active-color);
-      }
-    }
-  }
-
-  .var-day-picker {
-    &__content {
-      ul {
-        display: flex;
-        flex-wrap: wrap;
-
-        li {
-          position: relative;
-          display: flex;
-          justify-content: center;
-          width: var(--day-picker-content-item-width);
-          font-size: var(--day-picker-content-item-font-size);
-          padding: var(--day-picker-content-item-padding);
-        }
-      }
-    }
-
-    &__head {
-      li {
-        color: var(--day-picker-head-item-color);
-        padding: var(--day-picker-head-item-padding);
-        font-weight: var(--day-picker-head-item-font-weight);
-      }
-    }
-
-    &__button[var-day-picker-cover] {
-      width: var(--day-picker-content-item-button-width);
-      height: var(--day-picker-content-item-button-height);
-      font-size: var(--day-picker-content-item-button-font-size);
-    }
-
-    &__button:not(.var-day-picker__button--usable) {
-      cursor: unset;
-    }
-
-    &__button[var-date-picker-color-cover='true'] {
-      color: var(--date-picker-main-color);
-    }
-
-    &__button--disabled {
-      color: var(--color-text-disabled) !important;
-      cursor: not-allowed;
-    }
-  }
-
-  &-translatey-enter-from {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-
-  &-translatey-enter-active,
-  &-reverse-translatey-enter-active {
-    transition: 0.3s var(--cubic-bezier);
-  }
-
-  &-translatey-leave-active,
-  &-reverse-translatey-leave-active {
-    position: absolute;
-    transition: 0.3s var(--cubic-bezier);
-  }
-
-  &-translatey-leave-to {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-
-  &-reverse-translatey-enter-from {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-
-  &-reverse-translatey-leave-to {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-
-  &-panel-fade-enter-from,
-  &-panel-fade-leave-to {
-    transition: 0.3s var(--cubic-bezier);
-    opacity: 0;
-  }
-
-  &-panel-fade-leave-active {
-    position: absolute;
-  }
-
-  &-translatex-enter-from {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-
-  &-reverse-translatex-enter-from {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-
-  &-translatex-enter-active,
-  &-reverse-translatex-enter-active {
-    transition: 0.3s var(--cubic-bezier);
-  }
-
-  &-translatex-leave-active,
-  &-reverse-translatex-leave-active {
-    position: absolute;
-    transition: 0.3s var(--cubic-bezier);
-  }
-
-  &-translatex-leave-to {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-
-  &-reverse-translatex-leave-to {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-}

package/lib/date-picker/style/less.js

@@ -1,7 +0,0 @@
-require('../../styles/common.less')
-require('../../styles/elevation.less')
-require('../../ripple/ripple.less')
-require('../../button/button.less')
-require('../../icon/icon.less')
-require('../date-picker.less')
-require('../DatePickerSfc.less')

package/lib/dialog/dialog.less

@@ -1,77 +0,0 @@
-@dialog-width: 280px;
-@dialog-border-radius: 3px;
-@dialog-title-padding: 20px 20px 0;
-@dialog-message-color: #888;
-@dialog-message-padding: 12px 20px;
-@dialog-message-line-height: 24px;
-@dialog-message-font-size: var(--font-size-md);
-@dialog-title-font-size: var(--font-size-lg);
-@dialog-actions-padding: 0 12px 12px;
-@dialog-button-margin-left: 6px;
-@dialog-confirm-button-color: var(--color-primary);
-@dialog-cancel-button-color: var(--color-primary);
-@dialog-background: #fff;
-
-:root {
-  --dialog-width: @dialog-width;
-  --dialog-border-radius: @dialog-border-radius;
-  --dialog-title-padding: @dialog-title-padding;
-  --dialog-message-color: @dialog-message-color;
-  --dialog-message-padding: @dialog-message-padding;
-  --dialog-message-line-height: @dialog-message-line-height;
-  --dialog-message-font-size: @dialog-message-font-size;
-  --dialog-title-font-size: @dialog-title-font-size;
-  --dialog-actions-padding: @dialog-actions-padding;
-  --dialog-button-margin-left: @dialog-button-margin-left;
-  --dialog-confirm-button-color: @dialog-confirm-button-color;
-  --dialog-cancel-button-color: @dialog-cancel-button-color;
-  --dialog-background: @dialog-background;
-}
-
-.var-dialog {
-  width: var(--dialog-width);
-  border-radius: var(--dialog-border-radius);
-  background: var(--dialog-background);
-  transition: 0.25s background-color;
-
-  &__popup[var-dialog-cover] {
-    background: transparent;
-  }
-
-  &__title {
-    font-size: var(--dialog-title-font-size);
-    font-weight: 400;
-    padding: var(--dialog-title-padding);
-  }
-
-  &__message {
-    padding: var(--dialog-message-padding);
-    color: var(--dialog-message-color);
-    line-height: var(--dialog-message-line-height);
-    font-size: var(--dialog-message-font-size);
-  }
-
-  &__actions {
-    display: flex;
-    justify-content: flex-end;
-    padding: var(--dialog-actions-padding);
-  }
-
-  &__button[var-dialog-cover] {
-    margin-left: var(--dialog-button-margin-left);
-    background-color: transparent;
-    box-shadow: none;
-
-    &:active {
-      box-shadow: none;
-    }
-  }
-
-  &__confirm-button[var-dialog-cover] {
-    color: var(--dialog-confirm-button-color);
-  }
-
-  &__cancel-button[var-dialog-cover] {
-    color: var(--dialog-cancel-button-color);
-  }
-}

package/lib/dialog/style/less.js

@@ -1,5 +0,0 @@
-require('../../styles/common.less')
-require('../../popup/popup.less')
-require('../../button/button.less')
-require('../dialog.less')
-require('../DialogSfc.less')

package/lib/divider/divider.less

@@ -1,78 +0,0 @@
-@divider-color: rgba(0, 0, 0, 0.12);
-@divider-text-color: #888;
-@divider-text-margin: 8px 0;
-@divider-text-padding: 0 8px;
-@divider-inset: 72px;
-@divider-vertical-inset: 8px;
-
-:root {
-  --divider-color: @divider-color;
-  --divider-text-color: @divider-text-color;
-  --divider-text-margin: @divider-text-margin;
-  --divider-text-padding: @divider-text-padding;
-  --divider-inset: @divider-inset;
-  --divider-vertical-inset: @divider-vertical-inset;
-}
-
-.var-divider {
-  position: relative;
-  width: 100%;
-  height: 0;
-  border: none;
-  border-top: 1px solid var(--divider-color);
-  margin: var(--divider-text-margin);
-  font-size: var(--font-size-md);
-  color: var(--divider-text-color);
-
-  &--vertical {
-    width: 0;
-    height: 80%;
-    margin: auto var(--divider-text-margin);
-    padding: var(--divider-text-margin);
-    border-top: none;
-    border-left: 1px solid var(--divider-color);
-  }
-
-  &--inset {
-    width: calc(100% - var(--divider-inset));
-    left: var(--divider-inset);
-  }
-
-  &--vertical&--inset {
-    width: 0;
-    left: unset;
-    height: calc(80% - var(--divider-vertical-inset));
-  }
-
-  &__text {
-    display: inline-block;
-    padding: var(--divider-text-padding);
-  }
-
-  &--with-text {
-    background-color: transparent;
-    height: fit-content;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-
-    &::before,
-    &::after {
-      display: inline-block;
-      content: '';
-      flex: 1;
-      height: 0;
-      border-top: 1px solid var(--divider-color);
-    }
-  }
-
-  &--dashed {
-    border-top-style: dashed;
-  }
-
-  &--dashed&--vertical {
-    border-top: none;
-    border-left-style: dashed;
-  }
-}

package/lib/divider/style/less.js

@@ -1,3 +0,0 @@
-require('../../styles/common.less')
-require('../divider.less')
-require('../DividerSfc.less')

package/lib/form/style/less.js

@@ -1,2 +0,0 @@
-require('../../styles/common.less')
-require('../FormSfc.less')

package/lib/form-details/formDetails.less

@@ -1,48 +0,0 @@
-@form-details-error-color: var(--color-danger);
-@form-details-length-color: #888;
-@form-details-margin-top: 6px;
-@form-details-font-size: 12px;
-@form-details-message-margin-right: 4px;
-
-:root {
-  --form-details-error-color: @form-details-error-color;
-  --form-details-length-color: @form-details-length-color;
-  --form-details-margin-top: @form-details-margin-top;
-  --form-details-font-size: @form-details-font-size;
-  --form-details-message-margin-right: @form-details-message-margin-right;
-}
-
-.var {
-  &-form-details-enter-from,
-  &-form-details-leave-to {
-    opacity: 0;
-    margin-top: 2px !important;
-  }
-
-  &-form-details-enter-active,
-  &-form-details-leave-active {
-    transition: 0.2s all var(--cubic-bezier);
-  }
-}
-
-.var-form-details {
-  display: flex;
-  justify-content: space-between;
-  font-size: var(--form-details-font-size);
-  margin-top: var(--form-details-margin-top);
-
-  &__message {
-    flex-grow: 1;
-    color: var(--form-details-error-color);
-    margin-right: var(--form-details-message-margin-right);
-    user-select: none;
-    text-align: left;
-  }
-
-  &__length {
-    flex-shrink: 0;
-    color: var(--form-details-length-color);
-    user-select: none;
-    text-align: right;
-  }
-}

package/lib/form-details/style/less.js

@@ -1,3 +0,0 @@
-require('../../styles/common.less')
-require('../formDetails.less')
-require('../FormDetailsSfc.less')

package/lib/icon/icon.less

@@ -1,26 +0,0 @@
-@import '@varlet/icons/dist/css/varlet-icons.less';
-
-@icon-size: 20px;
-
-:root {
-  --icon-size: @icon-size;
-}
-
-.var-icon {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  font-size: var(--icon-size);
-  color: inherit;
-  vertical-align: bottom;
-
-  &--shrinking {
-    transform: scale(0);
-  }
-
-  &__image {
-    width: var(--icon-size);
-    height: var(--icon-size);
-    object-fit: cover;
-  }
-}

package/lib/icon/style/less.js

@@ -1,3 +0,0 @@
-require('../../styles/common.less')
-require('../icon.less')
-require('../IconSfc.less')

package/lib/image/image.less

@@ -1,9 +0,0 @@
-.var-image {
-  overflow: hidden;
-
-  &__image {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-}

package/lib/image/style/less.js

@@ -1,4 +0,0 @@
-require('../../styles/common.less')
-require('../../ripple/ripple.less')
-require('../image.less')
-require('../ImageSfc.less')