@qsxy/element-plus-react 1.0.0-next.12 → 1.0.0-next.15

package/dist/theme-chalk/carousel/index.scss

@@ -1,237 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-carousel__item {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: inline-block;
-    overflow: hidden;
-    z-index: calc(var(--#{$namespace}-index-normal) - 1);
-
-    &.is-active {
-        z-index: calc(var(--#{$namespace}-index-normal) - 1);
-    }
-
-    &.is-animating {
-        transition: transform 0.4s ease-in-out;
-    }
-}
-
-.#{$namespace}-carousel__item--card {
-    width: 50%;
-    transition: transform 0.4s ease-in-out;
-
-    &.is-in-stage {
-        cursor: pointer;
-        z-index: var(--#{$namespace}-index-normal);
-    }
-
-    &.is-in-stage:hover .#{$namespace}-carousel__mask,
-    &.is-in-stage.is-hover .#{$namespace}-carousel__mask {
-        opacity: 0.12;
-    }
-
-    &.is-active {
-        z-index: calc(var(--#{$namespace}-index-normal) + 1);
-    }
-}
-
-.#{$namespace}-carousel__item--card-vertical {
-    width: 100%;
-    height: 50%;
-}
-
-.#{$namespace}-carousel__mask {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background-color: var(--#{$namespace}-color-white);
-    opacity: 0.24;
-    transition: var(--#{$namespace}-transition-duration-fast);
-}
-
-.#{$namespace}-carousel {
-    --#{$namespace}-carousel-arrow-font-size: 12px;
-    --#{$namespace}-carousel-arrow-size: 36px;
-    --#{$namespace}-carousel-arrow-background: rgba(31, 45, 61, 0.11);
-    --#{$namespace}-carousel-arrow-hover-background: rgba(31, 45, 61, 0.23);
-    --#{$namespace}-carousel-indicator-width: 30px;
-    --#{$namespace}-carousel-indicator-height: 2px;
-    --#{$namespace}-carousel-indicator-padding-horizontal: 4px;
-    --#{$namespace}-carousel-indicator-padding-vertical: 12px;
-    --#{$namespace}-carousel-indicator-out-color: var(--#{$namespace}-border-color-hover);
-    position: relative;
-}
-
-.#{$namespace}-carousel--horizontal,
-.#{$namespace}-carousel--vertical {
-    overflow: hidden;
-}
-
-.#{$namespace}-carousel__container {
-    position: relative;
-    height: 300px;
-}
-
-.#{$namespace}-carousel__arrow {
-    border: none;
-    outline: none;
-    padding: 0;
-    margin: 0;
-    height: var(--#{$namespace}-carousel-arrow-size);
-    width: var(--#{$namespace}-carousel-arrow-size);
-    cursor: pointer;
-    transition: var(--#{$namespace}-transition-duration);
-    border-radius: 50%;
-    background-color: var(--#{$namespace}-carousel-arrow-background);
-    color: #fff;
-    position: absolute;
-    top: 50%;
-    z-index: 10;
-    transform: translateY(-50%);
-    text-align: center;
-    font-size: var(--#{$namespace}-carousel-arrow-font-size);
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-
-    &:hover {
-        background-color: var(--#{$namespace}-carousel-arrow-hover-background);
-    }
-
-    & i {
-        cursor: pointer;
-    }
-}
-
-.#{$namespace}-carousel__arrow--left {
-    left: 16px;
-}
-
-.#{$namespace}-carousel__arrow--right {
-    right: 16px;
-}
-
-.#{$namespace}-carousel__indicators {
-    position: absolute;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    z-index: calc(var(--#{$namespace}-index-normal) + 1);
-}
-
-.#{$namespace}-carousel__indicators--horizontal {
-    bottom: 0;
-    left: 50%;
-    transform: translate(-50%);
-}
-
-.#{$namespace}-carousel__indicators--vertical {
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.#{$namespace}-carousel__indicators--outside {
-    bottom: calc(var(--#{$namespace}-carousel-indicator-height) + var(--#{$namespace}-carousel-indicator-padding-vertical) * 2);
-    text-align: center;
-    position: static;
-    transform: none;
-
-    .#{$namespace}-carousel__indicator:hover button {
-        opacity: 0.64;
-    }
-
-    button {
-        background-color: var(--#{$namespace}-carousel-indicator-out-color);
-        opacity: 0.24;
-    }
-}
-
-.#{$namespace}-carousel__indicators--right {
-    right: 0;
-}
-
-.#{$namespace}-carousel__indicators--labels {
-    left: 0;
-    right: 0;
-    transform: none;
-    text-align: center;
-
-    .#{$namespace}-carousel__button {
-        height: auto;
-        width: auto;
-        padding: 2px 18px;
-        font-size: 12px;
-        color: #000;
-    }
-
-    .#{$namespace}-carousel__indicator {
-        padding: 6px 4px;
-    }
-}
-
-.#{$namespace}-carousel__indicator {
-    background-color: transparent;
-    cursor: pointer;
-
-    &:hover button {
-        opacity: 0.72;
-    }
-}
-
-.#{$namespace}-carousel__indicator--horizontal {
-    display: inline-block;
-    padding: var(--#{$namespace}-carousel-indicator-padding-vertical) var(--#{$namespace}-carousel-indicator-padding-horizontal);
-}
-
-.#{$namespace}-carousel__indicator--vertical {
-    padding: var(--#{$namespace}-carousel-indicator-padding-horizontal) var(--#{$namespace}-carousel-indicator-padding-vertical);
-
-    .#{$namespace}-carousel__button {
-        width: var(--#{$namespace}-carousel-indicator-height);
-        height: calc(var(--#{$namespace}-carousel-indicator-width) / 2);
-    }
-}
-
-.#{$namespace}-carousel__indicator.is-active button {
-    opacity: 1;
-}
-
-.#{$namespace}-carousel__button {
-    display: block;
-    opacity: 0.48;
-    width: var(--#{$namespace}-carousel-indicator-width);
-    height: var(--#{$namespace}-carousel-indicator-height);
-    background-color: #fff;
-    border: none;
-    outline: none;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-    transition: var(--#{$namespace}-transition-duration);
-}
-
-.carousel-arrow-left-enter-from,
-.carousel-arrow-left-leave-active {
-    transform: translateY(-50%) translate(-10px);
-    opacity: 0;
-}
-
-.carousel-arrow-right-enter-from,
-.carousel-arrow-right-leave-active {
-    transform: translateY(-50%) translate(10px);
-    opacity: 0;
-}
-
-.#{$namespace}-transitioning {
-    filter: url(#elCarouselHorizontal);
-}
-
-.#{$namespace}-transitioning-vertical {
-    filter: url(#elCarouselVertical);
-}

package/dist/theme-chalk/cascader/cascader-panel.scss

@@ -1,184 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-cascader-panel {
-    --#{$namespace}-cascader-menu-text-color: var(--#{$namespace}-text-color-regular);
-    --#{$namespace}-cascader-menu-selected-text-color: var(--#{$namespace}-color-primary);
-    // --#{$namespace}-cascader-menu-fill: var(--#{$namespace}-bg-color-overlay);
-    --#{$namespace}-cascader-menu-border: solid 1px var(--#{$namespace}-border-color-light);
-    // --#{$namespace}-cascader-menu-shadow: var(--#{$namespace}-box-shadow-light);
-    --#{$namespace}-cascader-node-background-hover: var(--#{$namespace}-fill-color-light);
-    --#{$namespace}-cascader-node-color-disabled: var(--#{$namespace}-text-color-placeholder);
-    --#{$namespace}-cascader-color-empty: var(--#{$namespace}-text-color-placeholder);
-    // --#{$namespace}-cascader-tag-background: var(--#{$namespace}-fill-color);
-}
-
-.#{$namespace}-cascader-panel {
-    display: flex;
-    flex-direction: column;
-    border-radius: 4px;
-    font-size: 14px;
-
-    &.is-bordered {
-        border: var(--#{$namespace}-cascader-menu-border);
-        border-radius: 4px;
-    }
-
-    .#{$namespace}-tree.#{$namespace}-tree-directory .#{$namespace}-tree-treenode-selected:hover,
-    .#{$namespace}-tree.#{$namespace}-tree-directory .#{$namespace}-tree-treenode-selected {
-        background: transparent !important;
-    }
-
-    .#{$namespace}-tree.#{$namespace}-tree-directory .#{$namespace}-tree-treenode:hover {
-        background: var(--#{$namespace}-tree-node-hover-bg-color);
-    }
-}
-
-.#{$namespace}-cascader__search {
-    padding: 0 7px;
-}
-
-.#{$namespace}-cascader__panels {
-    display: flex;
-}
-
-.#{$namespace}-cascader-menu {
-    min-width: 180px;
-    box-sizing: border-box;
-    color: var(--#{$namespace}-cascader-menu-text-color);
-    border-right: var(--#{$namespace}-cascader-menu-border);
-
-    &.is-list {
-        width: 100%;
-    }
-
-    &.is-tree + .is-list {
-        width: unset;
-    }
-
-    &:last-child {
-        border-right: none;
-
-        .#{$namespace}-cascader-node {
-            padding-right: 20px;
-        }
-    }
-
-    .#{$namespace}-cascader-menu__wrap {
-        // Raise the priority
-        &.#{$namespace}-scrollbar__wrap {
-            height: 250px;
-        }
-    }
-
-    .#{$namespace}-cascader-menu__list {
-        position: relative;
-        min-height: 100%;
-        margin: 0;
-        padding: 6px 0;
-        list-style: none;
-        box-sizing: border-box;
-
-        &.#{$namespace}-no-data {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: #909399;
-            height: 100%;
-        }
-    }
-
-    .#{$namespace}-cascader-menu__hover-zone {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-    }
-
-    .#{$namespace}-cascader-menu__empty-text {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        text-align: center;
-        color: #a8abb2;
-    }
-}
-
-.#{$namespace}-cascader-node {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: 0 30px 0 15px;
-    height: 34px;
-    line-height: 34px;
-    outline: none;
-    transition: background-color 0.3s;
-
-    &.is-selectable.in-active-path {
-        color: #606266;
-    }
-
-    &.in-active-path,
-    &.is-selectable.in-checked-path,
-    &.is-active {
-        color: var(--#{$namespace}-cascader-menu-selected-text-color);
-        font-weight: 700;
-    }
-
-    &:not(.is-disabled) {
-        cursor: pointer;
-
-        &:hover,
-        &:focus {
-            background: var(--#{$namespace}-cascader-node-background-hover);
-        }
-    }
-
-    &.is-disabled {
-        color: var(--#{$namespace}-disabled-text-color);
-        cursor: not-allowed;
-    }
-
-    .#{$namespace}-cascader-node__prefix {
-        position: absolute;
-        left: 10px;
-    }
-
-    .#{$namespace}-cascader-node__postfix {
-        position: absolute;
-        right: 10px;
-    }
-
-    .#{$namespace}-cascader-node__label {
-        flex: 1;
-        text-align: left;
-        padding: 0 8px 0 0;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    > .#{$namespace}-checkbox {
-        margin-right: 8px;
-
-        .#{$namespace}-checkbox__label {
-            padding-left: 0;
-        }
-    }
-}
-
-.#{$namespace}-tree-title {
-    .#{$namespace}-cascader-node {
-        padding: 0 30px 0 0px !important;
-        height: 28px !important;
-        line-height: 28px !important;
-        margin-left: -6px;
-    }
-
-    .#{$namespace}-cascader-node:not(.is-disabled):hover,
-    .#{$namespace}-cascader-node:not(.is-disabled):focus {
-        background: transparent;
-    }
-}

package/dist/theme-chalk/cascader/cascader.scss

@@ -1,239 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-cascader {
-    display: inline-block;
-    position: relative;
-    font-size: 14px;
-    line-height: 32px;
-    outline: none;
-    width: 100%;
-
-    // &:not(.is-disabled):hover {
-    //     .#{$namespace}-input__wrapper {
-    //         cursor: pointer;
-    //         box-shadow: 0 0 0 1px var(--#{$namespace}-border-color-hover) inset;
-    //     }
-    // }
-
-    .#{$namespace}-input {
-        cursor: pointer;
-
-        .#{$namespace}-input__wrapper {
-            text-overflow: ellipsis;
-
-            &:focus {
-                box-shadow: 0 0 0 1px var(--#{$namespace}-color-primary) inset;
-            }
-        }
-
-        .#{$namespace}-input__suffix-inner {
-            .#{$namespace}-icon {
-                // height: calc(100% - 2px);
-
-                svg {
-                    vertical-align: middle;
-                }
-            }
-        }
-
-        .icon-arrow-down {
-            transition: transform 0.3s;
-            font-size: 14px;
-
-            &.is-reverse {
-                transform: rotateZ(180deg);
-            }
-        }
-
-        .icon-circle-close:hover {
-            color: #909399;
-        }
-
-        &.is-focus {
-            .#{$namespace}-input__wrapper {
-                box-shadow: 0 0 0 1px var(--#{$namespace}-color-primary) inset;
-            }
-        }
-    }
-
-    // @each $size in (large, small) {
-    //   @include m($size) {
-    //     font-size: map.get($input-font-size, $size);
-    //     line-height: map.get($input-height, $size);
-    //   }
-    // }
-
-    &.is-disabled {
-        .#{$namespace}-cascader__label {
-            z-index: 2;
-            color: var(--#{$namespace}-disabled-text-color);
-        }
-    }
-
-    &.#{$namespace}-cascader--large {
-        line-height: var(--#{$namespace}-component-size-large);
-    }
-
-    &.#{$namespace}-cascader--small {
-        line-height: var(--#{$namespace}-component-size-small);
-    }
-}
-
-.#{$namespace}-cascader__dropdown {
-    font-size: 14px;
-    border-radius: 4px;
-
-    &.#{$namespace}-popper[role='tooltip'] {
-        background-color: var(--#{$namespace}-bg-color-overlay);
-        border: 1px solid var(--#{$namespace}-border-color);
-        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
-    }
-
-    &.#{$namespace}-popper[role='tooltip'] .#{$namespace}-popper__arrow:before {
-        border: 1px solid var(--#{$namespace}-border-color);
-    }
-
-    &.#{$namespace}-popper[role='tooltip'][data-popper-placement^='top'] .#{$namespace}-popper__arrow:before {
-        border-top-color: transparent;
-        border-left-color: transparent;
-    }
-
-    &.#{$namespace}-popper[role='tooltip'][data-popper-placement^='bottom'] .#{$namespace}-popper__arrow:before {
-        border-bottom-color: transparent;
-        border-right-color: transparent;
-    }
-
-    &.#{$namespace}-popper[role='tooltip'][data-popper-placement^='left'] .#{$namespace}-popper__arrow:before {
-        border-left-color: transparent;
-        border-bottom-color: transparent;
-    }
-
-    &.#{$namespace}-popper[role='tooltip'][data-popper-placement^='right'] .#{$namespace}-popper__arrow:before {
-        border-right-color: transparent;
-        border-top-color: transparent;
-    }
-
-    &.#{$namespace}-popper {
-        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
-    }
-}
-
-.#{$namespace}-cascader__trigger {
-    cursor: pointer;
-}
-
-.#{$namespace}-cascader__tags {
-    position: absolute;
-    left: 0;
-    right: 30px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    flex-wrap: wrap;
-    line-height: normal;
-    text-align: left;
-    box-sizing: border-box;
-    z-index: 1;
-
-    .#{$namespace}-tag {
-        display: inline-flex;
-        align-items: center;
-        max-width: 100%;
-        margin: 2px 0 2px 6px;
-        text-overflow: ellipsis;
-        background: #f0f2f5;
-
-        &:not(.is-hit) {
-            border-color: transparent;
-        }
-
-        & > span {
-            flex: 1;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-
-        .#{$namespace}-icon-close {
-            flex: none;
-            background-color: #a8abb2;
-            color: #ffffff;
-
-            &:hover {
-                background-color: #909399;
-            }
-        }
-    }
-}
-
-.#{$namespace}-cascader__collapse-tags {
-    white-space: normal;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.#{$namespace}-cascader__collapse-tag {
-    line-height: inherit;
-    height: inherit;
-    display: flex;
-}
-
-.#{$namespace}-cascader__suggestion-panel {
-    border-radius: 4px;
-}
-
-.#{$namespace}-cascader__suggestion-list {
-    max-height: 204px;
-    margin: 0;
-    padding: 6px 0;
-    font-size: 14px;
-    color: #606266;
-    text-align: center;
-}
-
-.#{$namespace}-cascader__suggestion-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 34px;
-    padding: 0 15px;
-    text-align: left;
-    outline: none;
-    cursor: pointer;
-
-    &:hover,
-    &:focus {
-        background: #f5f7fa;
-    }
-
-    &.is-checked {
-        color: var(--#{$namespace}-color-primary);
-        font-weight: bold;
-    }
-
-    & > span {
-        margin-right: 10px;
-    }
-}
-
-.#{$namespace}-cascader__empty-text {
-    margin: 10px 0;
-    color: #a8abb2;
-}
-
-// .#{$namespace}-cascader__search-input {
-//     flex: 1;
-//     height: 28px;
-//     min-width: 60px;
-//     margin: 2px 0 2px map.get($input-padding-horizontal, 'default')-$border-width;
-//     padding: 0;
-//     color: var(--#{$namespace}-cascader-menu-text-color);
-//     border: none;
-//     outline: none;
-//     box-sizing: border-box;
-
-//     &::placeholder {
-//         color: var(--#{$namespace}-text-color-placeholder);
-//     }
-// }

package/dist/theme-chalk/cascader/index.scss

@@ -1,2 +0,0 @@
-@import './cascader';
-@import './cascader-panel';