@qsxy/element-plus-react 1.0.2 → 2.0.0

package/theme-chalk/tree/_tree.scss

@@ -1,401 +0,0 @@
-@use '../mixins/config' as *;
-
-// @mixin antTreeSwitcherIcon($type: 'tree-default-open-icon') {
-.#{$namespace}-tree-switcher-icon {
-    display: inline-block;
-    font-size: 14px;
-    vertical-align: baseline;
-    color: #a8abb2;
-    transition: transform 0.5s;
-}
-
-// @mixin drop-indicator() {
-//   .#{$namespace}-tree-drop-indicator {
-//     position: absolute;
-//     // it should displayed over the following node
-//     z-index: 1;
-//     height: 2px;
-//     background-color: $primary-color;
-//     border-radius: 1px;
-//     pointer-events: none;
-
-//     &::after {
-//       position: absolute;
-//       top: -3px;
-//       left: -6px;
-//       width: 8px;
-//       height: 8px;
-//       background-color: transparent;
-//       border: 2px solid @primary-color;
-//       border-radius: 50%;
-//       content: '';
-//     }
-//   }
-// }
-
-.#{$namespace}-tree {
-    --#{$namespace}-tree-node-hover-bg-color: var(--#{$namespace}-fill-color-light);
-    --#{$namespace}-tree-text-color: var(--#{$namespace}-text-color-regular);
-    --#{$namespace}-tree-expand-icon-color: var(--#{$namespace}-text-color-placeholder);
-}
-
-.#{$namespace}-tree {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    color: var(--#{$namespace}-tree-text-color);
-    font-size: 14px;
-    font-variant: tabular-nums;
-    line-height: 1.5715;
-    list-style: none;
-    font-feature-settings: 'tnum';
-    background: var(--#{$namespace}-fill-color-blank);
-    border-radius: 2px;
-    transition: background-color 0.3s;
-
-    .#{$namespace}-tree-focused:not(:hover):not(.#{$namespace}-tree-active-focused) {
-        background: #e6f7ff;
-    }
-
-    // =================== Virtual List ===================
-    .#{$namespace}-tree-list-holder-inner {
-        align-items: flex-start;
-    }
-
-    &.#{$namespace}-tree-block-node {
-        .#{$namespace}-tree-list-holder-inner {
-            align-items: stretch;
-
-            // >>> Title
-            .#{$namespace}-tree-node-content-wrapper {
-                flex: auto;
-            }
-
-            // >>> Drag
-            .#{$namespace}-tree-treenode.dragging {
-                position: relative;
-
-                &::after {
-                    position: absolute;
-                    inset: 0 0 4px;
-                    border: 1px solid var(--#{$namespace}-primary-color);
-                    opacity: 0;
-                    -webkit-animation: #{$namespace}-tree-node-fx-do-not-use 0.3s;
-                    animation: #{$namespace}-tree-node-fx-do-not-use 0.3s;
-                    -webkit-animation-play-state: running;
-                    animation-play-state: running;
-                    -webkit-animation-fill-mode: forwards;
-                    animation-fill-mode: forwards;
-                    content: '';
-                    pointer-events: none;
-                }
-            }
-        }
-    }
-
-    // ===================== TreeNode =====================
-    .#{$namespace}-tree-treenode {
-        display: flex;
-        align-items: center;
-        outline: none;
-        margin-bottom: 4px;
-
-        .#{$namespace}-checkbox {
-            margin-right: -5px;
-            height: unset;
-        }
-    }
-    // Disabled
-    .#{$namespace}-tree-treenode-disabled {
-        // >>> Title
-        .#{$namespace}-tree-node-content-wrapper {
-            color: var(--#{$namespace}-text-color-placeholder);
-            cursor: not-allowed;
-
-            &:hover {
-                background: transparent;
-            }
-        }
-    }
-
-    .#{$namespace}-tree-treenode-active .#{$namespace}-tree-node-content-wrapper {
-        background: #f5f5f5;
-    }
-
-    .#{$namespace}-tree-treenode:not(.#{$namespace}-tree .#{$namespace}-tree-treenode-disabled).filter-node .#{$namespace}-tree-title {
-        color: inherit;
-        font-weight: 500;
-    }
-}
-
-// >>> Indent
-.#{$namespace}-tree-indent {
-    align-self: stretch;
-    white-space: nowrap;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-
-    .#{$namespace}-tree-indent-unit {
-        display: inline-block;
-        width: 24px;
-    }
-}
-
-// >>> Drag Handler
-.#{$namespace}-tree-draggable-icon {
-    width: 24px;
-    line-height: 24px;
-    text-align: center;
-    opacity: 0.2;
-    transition: opacity 0.3s;
-}
-
-.#{$namespace}-tree-treenode:hover .#{$namespace}-tree-draggable-icon {
-    opacity: 0.45;
-}
-
-// >>> Switcher
-.#{$namespace}-tree-switcher {
-    position: relative;
-    flex: none;
-    align-self: stretch;
-    width: 24px;
-    margin: 0;
-    line-height: 24px;
-    text-align: center;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-
-    .#{$namespace}-tree-switcher-noop {
-        cursor: default;
-    }
-
-    &.#{$namespace}-tree-switcher_open {
-        .#{$namespace}-tree-switcher-icon {
-            transform: rotate(90deg);
-        }
-    }
-
-    .#{$namespace}-tree-switcher-loading-icon {
-        color: var(--#{$namespace}-color-primary);
-    }
-
-    .#{$namespace}-tree-switcher-leaf-line {
-        position: relative;
-        z-index: 1;
-        display: inline-block;
-        width: 100%;
-        height: 100%;
-        // https://github.com/#{$namespace}-design/#{$namespace}-design/issues/31884
-        &::before {
-            position: absolute;
-            top: 0;
-            right: 12px;
-            bottom: -4px;
-            margin-left: -1px;
-            border-right: 1px solid var(--#{$namespace}-border-color);
-            content: ' ';
-        }
-
-        &::after {
-            position: absolute;
-            width: 10px;
-            height: 14px;
-            border-bottom: 1px solid var(--#{$namespace}-border-color);
-            content: ' ';
-        }
-    }
-}
-
-// >>> Checkbox
-.#{$namespace}-tree-checkbox {
-    top: initial;
-    margin: 4px 8px 0 0;
-}
-
-// >>> Title
-.#{$namespace}-tree-node-content-wrapper {
-    position: relative;
-    z-index: auto;
-    min-height: 24px;
-    margin: 0;
-    padding: 0 2px;
-    color: inherit;
-    line-height: 24px;
-    background: transparent;
-    border-radius: 2px;
-    cursor: pointer;
-    transition: all 0.3s, border 0s, line-height 0s, box-shadow 0s;
-
-    &:hover {
-        background-color: #f5f5f5;
-    }
-
-    &.#{$namespace}-tree-node-selected {
-        background-color: #bae7ff;
-    }
-
-    // Icon
-    .#{$namespace}-tree-iconEle {
-        display: inline-block;
-        width: 24px;
-        height: 24px;
-        line-height: 24px;
-        text-align: center;
-        vertical-align: top;
-        padding-right: 6px;
-
-        &:empty {
-            display: none;
-        }
-    }
-}
-
-// https://github.com/#{$namespace}-design/#{$namespace}-design/issues/28217
-.#{$namespace}-tree-unselectable .#{$namespace}-tree-node-content-wrapper:hover {
-    background-color: transparent;
-}
-
-// ==================== Draggable =====================
-.#{$namespace}-tree-node-content-wrapper {
-    line-height: 24px;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-
-    .#{$namespace}-tree-drop-indicator {
-        position: absolute;
-        z-index: 1;
-        height: 2px;
-        background-color: var(--#{$namespace}-primary-color);
-        border-radius: 1px;
-        pointer-events: none;
-    }
-
-    .#{$namespace}-tree-drop-indicator:after {
-        position: absolute;
-        top: -3px;
-        left: -6px;
-        width: 8px;
-        height: 8px;
-        background-color: transparent;
-        border: 2px solid var(--#{$namespace}-primary-color);
-        border-radius: 50%;
-        content: '';
-    }
-}
-
-.#{$namespace}-tree .#{$namespace}-tree-treenode.drop-container > [draggable] {
-    box-shadow: 0 0 0 2px var(--#{$namespace}-primary-color);
-}
-
-// ==================== Show Line =====================
-.#{$namespace}-tree-show-line {
-    // ================ Indent lines ================
-    .#{$namespace}-tree-indent {
-        .#{$namespace}-tree-indent-unit {
-            position: relative;
-            height: 100%;
-
-            &::before {
-                position: absolute;
-                top: 0;
-                right: 12px;
-                bottom: -4px;
-                border-right: 1px solid var(--#{$namespace}-border-color);
-                content: '';
-            }
-
-            .#{$namespace}-tree-indent-unit-end {
-                &::before {
-                    display: none;
-                }
-            }
-        }
-    }
-
-    // ============== Cover Background ==============
-    // .#{$namespace}-tree-switcher {
-    //     background: #fff;
-
-    //     .#{$namespace}-tree-switcher-line-icon {
-    //         vertical-align: -0.225em;
-    //     }
-    // }
-}
-
-.#{$namespace}-tree-treenode-leaf-last {
-    .#{$namespace}-tree-switcher-leaf-line {
-        &::before {
-            top: auto !important;
-            bottom: auto !important;
-            height: 14px !important;
-        }
-    }
-}
-
-@keyframes #{$namespace}-tree-node-fx-do-not-use {
-    0% {
-        opacity: 0;
-    }
-
-    100% {
-        opacity: 1;
-    }
-}
-
-.#{$namespace}-motion-collapse {
-    overflow: hidden;
-    transition: height 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
-}
-
-@keyframes treeNodeLeave {
-    0% {
-        transform: scaleY(1);
-        transform-origin: 0 0;
-        opacity: 1;
-    }
-    to {
-        transform: scaleY(0.8);
-        transform-origin: 0 0;
-        opacity: 0;
-        height: 0;
-    }
-}
-
-.#{$namespace}-treenode-collapse-enter-active,
-.#{$namespace}-treenode-collapse-leave-active {
-    animation-duration: 0.3s;
-    animation-fill-mode: both;
-    animation-play-state: paused;
-}
-
-.#{$namespace}-treenode-collapse-enter-from {
-    opacity: 0;
-    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-.#{$namespace}-treenode-collapse-enter-active {
-    animation-name: rSlideUpIn;
-    animation-play-state: running;
-}
-
-.#{$namespace}-treenode-collapse-leave-active {
-    animation-name: treeNodeLeave;
-    animation-play-state: running;
-    pointer-events: none;
-}
-
-.#{$namespace}-treenode-collapse-leave-to {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-
-.#{$namespace}-tree-search-value {
-    color: #f50;
-}

package/theme-chalk/tree/index.scss

@@ -1,2 +0,0 @@
-@use './tree';
-@use './directory';