@dt-frames/ui 3.0.1 → 4.0.1

package/es/theme/src/index.scss

@@ -1,1134 +0,0 @@
-@import '../../components/container/src/index.scss';
-@import './transition.scss';
-
-::selection {
-    background-color: $colorPrimary;
-    color: #fff;
-}
-
-.dt-theme {
-    @apply w-full h-full;
-
-    .dt-logo {
-        @apply px-2.5 flex items-center pl-2.5 cursor-pointer text-center transition-all duration-200 ease-in-out;
-
-        &.light {
-            border-bottom: 1px solid $border-color-base;
-        }
-
-        .dt-logo__title {
-            @apply text-base font-bold transition-all duration-500 pl-3;
-        }
-
-        &.light .dt-logo__title {
-            color: $colorPrimary;
-        }
-
-        &.dark .dt-logo__title {
-            color: #fff;
-        }
-    }
-
-    .dt-sideBar {
-        &--fixed {
-            position: fixed;
-        }
-
-        .ant-layout-sider-children {
-            @apply flex flex-col;
-        }
-
-        .ant-menu-item {
-            @apply w-full rounded-none;
-        }
-
-        .ant-menu {
-            background: $menu-bg-color;
-
-            .ant-menu-sub {
-                background: $menu-sub-bg-color;
-            }
-
-            .ant-menu-item,
-            .ant-menu-submenu-title {
-                margin: 0;
-                height: $menu-item-height !important;
-
-                &:active {
-                    background-color: inherit;
-                }
-            }
-        }
-
-        &--mix {
-            height: calc(100% - 48px);
-            top: 48px;
-            background: $menu-mix-bg-color;
-            border-right: 1px solid #f0f0f0;
-
-            .ant-menu {
-                background: $menu-mix-bg-color !important;
-                border-right: none;
-            }
-
-            .ant-menu-sub {
-                background: #fff;
-            }
-
-            .dt-menu-item .i {
-                color: rgba(0, 0, 0, 0.5);
-                font-size: 16px;
-            }
-
-            .ant-menu-item-selected {
-                background: $menu-mix-select-bg-color;
-
-                .i {
-                    color: $colorPrimary;
-                }
-            }
-
-            .ant-menu-item:hover .i {
-                color: $colorPrimary;
-            }
-        }
-
-        .ant-layout-sider-trigger {
-            background: $menu-mix-bg-color;
-            border-right: 1px solid #f0f0f0;
-            border-top: 1px solid #f0f0f0;
-        }
-
-        .dt-menu-item {
-            display: flex;
-            align-items: center;
-            height: $menu-item-height;
-            font-size: 13px;
-        }
-
-        &.ant-layout-sider-collapsed {
-            .dt-menu-item>span {
-                opacity: 0;
-            }
-
-            .menu-icon {
-                font-size: 18px;
-                height: 18px;
-                line-height: 18px;
-            }
-        }
-
-        .dt-darg-bar {
-            @apply fixed top-0 z-20 w-2px h-full border-t-0 border-b-0;
-            cursor: col-resize;
-
-            &--hide {
-                @apply hidden;
-            }
-
-            &:hover {
-                background-color: $colorPrimary;
-                box-shadow: 0 0 4px 0 rgb(28 36 56 / 15%);
-            }
-        }
-    }
-
-    .dt-mix-sider {
-        transition: all 0.2s ease 0s;
-
-        &>div:first-of-type,
-        &>div:nth-of-type(2) {
-            background-color: $menu-bg-color;
-        }
-
-        &.dark .dt-mix-sider__shallow-menu {
-            li {
-                color: #ffffffa1;
-                transition: all .3s ease;
-
-                i {
-                    font-size: 20px;
-                }
-
-                p {
-                    font-size: 12px;
-                }
-
-                &.active-menu {
-                    background-color: $menu-sub-bg-color;
-                    color: #fff;
-
-                    &::before {
-                        position: absolute;
-                        top: 0;
-                        left: 0;
-                        width: 4px;
-                        height: 100%;
-                        background-color: $colorPrimary;
-                        content: "";
-                    }
-                }
-
-                &:hover {
-                    color: #fff;
-                }
-            }
-        }
-
-        &.dark .sub-menu {
-            border-right: 1px solid #eaf0fb;
-        }
-
-        &__sub-shallow-menu {
-            padding: 6px 20px 12px 20px;
-
-            &>li {
-
-                li,
-                .sub-menu {
-                    line-height: 40px;
-                    font-size: 13px;
-                    align-items: center;
-                    margin: 4px 0 8px -20px;
-                    width: calc(100% + 40px);
-                    padding-left: 24px;
-
-                    i {
-                        font-size: 18px;
-                    }
-
-                    &.active-menu,
-                    &:hover {
-                        color: $colorPrimary;
-                        background-color: $menu-mix-select-bg-color;
-
-                        i {
-                            opacity: 1;
-                        }
-                    }
-                }
-
-                &>div:not(.sub-menu) {
-                    border-bottom: 1px solid #eaf0fb;
-                }
-
-                &:last-of-type>div {
-                    border-bottom: none;
-                }
-            }
-        }
-
-        &__animate-enter-active {
-            z-index: -1;
-            animation: slideLeft 0.2s;
-        }
-
-        &__animate-leave-active {
-            z-index: -1;
-            animation: slideLeft 0.2s reverse;
-        }
-    }
-
-    &-main {
-        @apply flex w-full h-full duration-200;
-
-        transition-property: width;
-        background-color: $content-bg;
-
-        .ant-layout-content {
-            width: 100%;
-
-            &.fixed {
-                width: 1300px;
-            }
-        }
-    }
-
-    .dt-header {
-        @apply flex items-center h-12 p-0 leading-48px justify-between;
-
-        &--light {
-            background-color: #fff !important;
-            border-bottom: 1px solid #eee;
-            color: $text-color-base;
-
-            .dt_header_icon:hover {
-                background-color: rgba(175, 178, 184, 0.25)
-            }
-        }
-
-        &--dark {
-            background-color: $header-bg-dark-color !important;
-
-            .ant-menu-dark {
-                background-color: $header-bg-dark-color;
-            }
-
-            i.i,
-            span {
-                color: #fff;
-            }
-        }
-
-        .i {
-            font-size: 1.125rem;
-        }
-    }
-
-    .dt_header {
-        &_icon {
-            @apply h-12 px-3 text-gray-800 cursor-pointer hover: bg-gray-500 hover:bg-opacity-50 transition-all duration-300 relative;
-        }
-    }
-}
-
-.dt-menu-filter {
-    input {
-        border-top-left-radius: 16px;
-        border-bottom-left-radius: 16px;
-        padding-left: 14px;
-        font-size: 13px;
-        width: 150px !important;
-        border-right: none;
-        height: 28px
-    }
-
-    .ant-btn {
-        border-left: none;
-        border-top-right-radius: 16px !important;
-        border-bottom-right-radius: 16px !important;
-        padding-right: 10px;
-        padding-left: 5px;
-        width: 30px;
-        height: 28px;
-    }
-
-    .ant-input:focus,
-    .ant-input:hover,
-    .ant-btn:focus,
-    .ant-btn:hover {
-        border-color: #d9d9d9;
-        box-shadow: none;
-    }
-
-    .ant-empty-image {
-        height: 40px;
-
-        svg {
-            width: 100%;
-        }
-    }
-
-    .ant-input-group-addon {
-        background-color: inherit;
-    }
-
-    &__popover .ant-popover-inner {
-        padding: 0;
-    }
-
-    &__popover .ant-popover-inner-content {
-        width: 180px;
-        max-height: 400px;
-        height: 220px;
-        padding: 0;
-        overflow-y: auto;
-    }
-
-    &__popover .ant-empty-description {
-        font-size: 13px;
-    }
-}
-
-.dt-footer {
-    @apply text-center w-full block border-t border-gray-200 min-h-12 flex items-center justify-center;
-}
-
-.dt-notify {
-    &__popover .ant-popover-inner {
-        @apply p-0;
-    }
-
-    &__popover .ant-popover-inner-content {
-        width: 350px;
-        padding: 10px 0 0 0;
-    }
-}
-
-.dt-size {
-    &__popover .ant-popover-inner {
-        padding: 0;
-    }
-
-    &__popover .ant-popover-inner-content {
-        width: 120px;
-        padding: 4px 0;
-
-        .active {
-            color: $colorPrimary;
-        }
-    }
-}
-
-.dt-lang-picker {
-    &__popover .ant-popover-inner {
-        padding: 0;
-    }
-
-    &__popover .ant-popover-inner-content {
-        width: 120px;
-        padding: 4px 0;
-
-        .active {
-            color: $colorPrimary;
-        }
-
-        li {
-            @apply px-4 my-1 leading-9 flex border-gray-200 cursor-pointer hover: bg-gray-100 transition-all duration-300 text-13px;
-        }
-    }
-}
-
-.dt-user-info {
-    &__popover .ant-popover-inner {
-        padding: 0;
-    }
-
-    &__popover .ant-popover-inner-content {
-        width: 120px;
-        padding: 4px 0;
-
-        .active {
-            color: $colorPrimary;
-        }
-    }
-}
-
-.lockscreen {
-    @apply text-34px;
-
-    .lock-box {
-        @apply text-14px text-center;
-    }
-
-    .i {
-        @apply text-34px;
-    }
-
-    img {
-        @apply w-24 h-24 rounded-1/2 mx-auto my-10px border-width-3px border-light-800;
-    }
-
-    .ant-modal-content {
-        @apply p-0;
-    }
-
-    .ant-modal-header {
-        @apply px-6 py-4 border-1 mb-0;
-        border-color: #f0f0f0;
-    }
-
-    .ant-modal-body {
-        @apply p-6;
-    }
-
-    .local-time {
-        bottom: 60px;
-        left: 60px;
-        font-family: helvetica;
-
-        .time {
-            font-size: 70px;
-        }
-
-        .date {
-            font-size: 40px;
-        }
-    }
-
-    .computer-status {
-        bottom: 60px;
-        right: 60px;
-        font-size: 24px;
-
-        .network {
-            position: relative;
-
-            &.offline::before {
-                content: '';
-                position: absolute;
-                left: 50%;
-                top: 50%;
-                width: 2px;
-                height: 28px;
-                transform: translate(-50%, -50%) rotate(45deg);
-                background-color: red;
-                z-index: 10;
-            }
-        }
-    }
-}
-
-.dt-lock-page {
-    @apply absolute bottom-1/5 left-1/2 h-500px w-72;
-    transform: translateX(-50%);
-
-    &>div:first-of-type {
-        @apply absolute z-10 text-white text-center top-1/5 w-72;
-    }
-
-    &>div:nth-of-type(2) {
-        @apply w-72 h-400px;
-
-        filter: contrast(15) hue-rotate(0);
-        animation: hueRotate 10s infinite linear;
-    }
-
-    .circle {
-        width: 300px;
-        height: 300px;
-        filter: blur(8px);
-
-        &::after {
-            position: absolute;
-            top: 40%;
-            left: 50%;
-            width: 200px;
-            height: 200px;
-            background-color: #00ff6f;
-            border-radius: 42% 38% 62% 49% / 45%;
-            content: '';
-            transform: translate(-50%, -50%) rotate(0);
-            animation: circleRotate 10s infinite linear;
-        }
-
-        &::before {
-            position: absolute;
-            top: 40%;
-            left: 50%;
-            z-index: 10;
-            width: 176px;
-            height: 176px;
-            background-color: #000;
-            border-radius: 50%;
-            content: '';
-            transform: translate(-50%, -50%);
-        }
-    }
-
-    .bubbles {
-        width: 100px;
-        height: 40px;
-        background-color: #00ff6f;
-        border-radius: 100px 100px 0 0;
-        filter: blur(5px);
-        transform: translate(-50%, 0);
-
-        li {
-            position: absolute;
-            background: #00ff6f;
-            border-radius: 50%;
-        }
-    }
-
-    .charging {
-        font-size: 20px;
-        text-align: center;
-    }
-}
-
-.dt-reuse-tabs {
-    @apply leading-8 border-b border-solid border-gray-200;
-
-    .ant-tabs-small {
-        height: 32px;
-    }
-
-    .ant-tabs-nav {
-        @apply pt-2px m-0 bg-white border-none shadow-none;
-        height: 32px
-    }
-
-    .ant-tabs-nav-container {
-        @apply pt-2px;
-        height: 30px
-    }
-
-    .ant-tabs-card {
-        &::before {
-            border: none;
-        }
-    }
-
-    .ant-tabs-tab {
-        @apply pr-3 bg-white h-7 leading-7;
-
-        transition: none !important;
-        border-radius: 2px !important;
-        color: $text-color-base;
-
-        span {
-            @apply text-13px;
-        }
-
-        &:hover {
-            .ant-tabs-tab-remove {
-                opacity: 1;
-            }
-        }
-    }
-
-    .ant-tabs-tab-remove {
-        @apply w-2 h-10px text-12px opacity-100 transition-none ml-0 -mr-9px items-center;
-
-        span {
-            @apply flex items-center w-3;
-        }
-
-        &:hover svg {
-            width: 0.8em !important;
-        }
-
-        svg {
-            fill: $text-color-base;
-        }
-    }
-
-    .ant-tabs-tab:not(.ant-tabs-tab-active) {
-        &:hover {
-            color: $colorPrimary;
-        }
-    }
-
-    .ant-tabs-card .ant-tabs-tab-active {
-        @apply relative pl-18px border-none transition-none;
-
-        background: $colorPrimary;
-
-        span {
-            @apply text-white;
-        }
-
-        .ant-tabs-tab-remove {
-            @apply opacity-100;
-        }
-
-        svg {
-            width: 0.7em;
-            fill: #fff !important;
-        }
-
-        &::before {
-            @apply rounded-1/2 bg-white absolute left-1 top-12px;
-
-            content: ' ';
-            width: 6px;
-            height: 6px;
-        }
-    }
-
-    .ant-tabs-nav>div:nth-child(1) {
-        padding: 0 6px;
-
-        .ant-tabs-tab {
-            margin-right: 3px !important;
-        }
-    }
-
-    .ant-tabs-nav {
-        &::before {
-            border-bottom: none !important;
-        }
-
-        &-more {
-            display: flex;
-        }
-    }
-
-    .ant-tabs-tab:not(.ant-tabs-tab-active) {
-        border: 1px solid #d9d9d9 !important;
-
-        .anticon-close {
-            @apply flex w-3 items-center;
-
-            font-size: 12px;
-
-            svg {
-                width: 0.6em;
-            }
-        }
-    }
-
-    &__dropdown .ant-dropdown-menu {
-        @apply px-0 py-1 rounded-3px;
-
-        .ant-dropdown-menu-title-content {
-            @apply flex w-24;
-        }
-    }
-
-    .ant-tabs-extra-content {
-        margin-top: -1px;
-    }
-
-    &--hide-close {
-        .ant-tabs-tab-remove {
-            opacity: 0 !important;
-        }
-    }
-
-    &__dropdown .ant-dropdown-content li>span {
-        display: flex;
-        padding-right: 3px;
-    }
-}
-
-.dt-mix-sider {
-    transition: all 0.2s ease 0s;
-
-    &>div:first-of-type,
-    &>div:nth-of-type(2) {
-        background-color: $menu-bg-color;
-    }
-
-    &.dark .dt-mix-sider__shallow-menu {
-        li {
-            color: #ffffffa1;
-            transition: all .3s ease;
-
-            i {
-                font-size: 20px;
-            }
-
-            p {
-                font-size: 12px;
-            }
-
-            &.active-menu {
-                background-color: $menu-sub-bg-color;
-                color: #fff;
-
-                &::before {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 4px;
-                    height: 100%;
-                    background-color: $colorPrimary;
-                    content: "";
-                }
-            }
-
-            &:hover {
-                color: #fff;
-            }
-        }
-    }
-
-    &.dark .sub-menu {
-        border-right: 1px solid #eaf0fb;
-    }
-
-    &__sub-shallow-menu {
-        padding: 6px 20px 12px 20px;
-
-        &>li {
-
-            li,
-            .sub-menu {
-                line-height: 40px;
-                font-size: 13px;
-                align-items: center;
-                margin: 4px 0 8px -20px;
-                width: calc(100% + 40px);
-                padding-left: 24px;
-
-                i {
-                    font-size: 18px;
-                }
-
-                &.active-menu,
-                &:hover {
-                    color: $colorPrimary;
-                    background-color: $menu-mix-select-bg-color;
-
-                    i {
-                        opacity: 1;
-                    }
-                }
-            }
-
-            &>div:not(.sub-menu) {
-                border-bottom: 1px solid #eaf0fb;
-            }
-
-            &:last-of-type>div {
-                border-bottom: none;
-            }
-        }
-    }
-
-    &__animate-enter-active {
-        z-index: -1;
-        animation: slideLeft 0.2s;
-    }
-
-    &__animate-leave-active {
-        z-index: -1;
-        animation: slideLeft 0.2s reverse;
-    }
-}
-
-.dt-menu-type {
-    @apply flex flex-row justify-center;
-
-    &__list {
-        @apply p-3 relative w-14 h-12 mr-4 overflow-hidden cursor-pointer rounded shadow-sm shadow-gray-200 bg-gray-100;
-    }
-
-    &__list:hover {
-        border: 2px solid $colorPrimary;
-    }
-
-    &__item {
-        &::before {
-            position: absolute;
-            content: "";
-            top: 0;
-            left: 0;
-            z-index: 1;
-            width: 33%;
-            height: 100%;
-            background-color: #273352;
-        }
-
-        &::after {
-            position: absolute;
-            content: "";
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 25%;
-            background-color: #fff;
-        }
-    }
-
-    &__item--top-menu &__item {
-        &::before {
-            width: 0;
-        }
-
-        &::after {
-            background-color: #273352;
-        }
-    }
-
-    &__item--mix &__item {
-        &::before {
-            top: 25%;
-            height: 75%;
-            background-color: #fff;
-        }
-
-        &::after {
-            background-color: #273352;
-        }
-    }
-
-    &__item--mix-sidebar {
-        &::before {
-            content: '';
-            position: absolute;
-            left: 15%;
-            top: calc(25% + 1px);
-            width: 20%;
-            height: 75%;
-            background-color: #fff;
-        }
-
-        .dt-menu-type__item::before {
-            width: 15%;
-        }
-    }
-
-    &__item--active {
-        border: 2px solid $colorPrimary;
-    }
-}
-
-.ant-tabs-dropdown-menu-title-content{
-    display: flex;
-    justify-content: space-between;
-    font-size: 13px;
-}
-
-.dt-setting-theme {
-    &__tips {
-        @apply p-3 text-12px leading-5 bg-gray-100 rounded;
-
-        border: 1px solid $colorPrimary;
-        color: $colorPrimary;
-    }
-}
-
-.theme-drawer .ant-drawer-body {
-    padding-top: 6px;
-}
-
-.ant-layout-sider-dark,
-.ant-menu-dark {
-
-    .ant-menu-item-active>span>span,
-    .ant-menu-item-selected>span>span,
-    .ant-menu-submenu-active>div>span>span,
-    .ant-menu-submenu-selected>div>span>span,
-    .ant-menu-submenu-selected>span>span {
-        &>.menu-icon {
-            color: #fff !important;
-        }
-    }
-
-    .ant-menu-submenu-selected.ant-menu-submenu-horizontal {
-        background: none;
-
-        &::after {
-            bottom: 4px;
-            border-bottom: 4px solid $colorPrimary;
-            border-radius: 1px;
-        }
-    }
-
-    .dt-menu-item {
-        display: flex;
-
-        span {
-            font-size: 13px;
-        }
-    }
-
-    .menu-icon {
-        @apply text-light-600 p-0 mr-6px h-10 w-7 text-center;
-        font-size: 16px;
-        height: 16px;
-        line-height: 18px;
-    }
-}
-
-@keyframes slideLeft {
-    from {
-        transform: translateX(-100%);
-    }
-
-    to {
-        transform: translateX(0);
-    }
-}
-
-@keyframes circleRotate {
-    50% {
-        border-radius: 45% / 42% 38% 58% 49%;
-    }
-
-    100% {
-        transform: translate(-50%, -50%) rotate(720deg);
-    }
-}
-
-@keyframes hueRotate {
-    100% {
-        filter: contrast(15) hue-rotate(360deg);
-    }
-}
-
-.dt-color {
-    @apply w-56 p-3 rounded-sm;
-
-    .color-set {
-        @apply rounded-lg;
-
-        &>div:first-of-type canvas {
-            border-top-left-radius: 6px;
-            border-top-right-radius: 6px
-        }
-
-        &>div:last-of-type canvas {
-            border-bottom-left-radius: 6px;
-            border-bottom-right-radius: 6px
-        }
-
-        .slide {
-            @apply absolute w-7 h-7 rounded-full border-width-2px border-white pointer-events-none;
-            box-shadow: 0 2px 4px #0003;
-        }
-    }
-
-    .color-footer {
-        @apply flex gap-3 justify-end mt-3 pt-3;
-        border-top: 1px solid #e7e7e7;
-    }
-}
-
-
-// .hu-color-picker {
-//     background: #242c3e;
-//     border-radius: 4px;
-//     box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
-//     z-index: 1;
-
-//     canvas {
-//         vertical-align: top;
-//     }
-
-//     .color-set {
-//         display: flex;
-//         margin-left: 5px;
-//         padding: 8px 0 8px 8px;
-//         border-left: 1px solid #323e53;
-//     }
-
-//     .color-show {
-//         height: 56px;
-//         width: 100px;
-//         margin: 8px auto;
-//         display: flex;
-//     }
-// }
-
-// .color-panel {
-//     display: flex;
-//     padding: 8px 8px 0 8px;
-
-//     .color-box {
-//         width: 100px;
-//     }
-// }
-
-// .color-view {
-//     display: flex;
-//     padding: 0 8px;
-// }
-
-// .input {
-//     flex: 1;
-//     margin-left: 8px;
-// }
-
-// // 颜色面板
-// .saturation {
-//     position: relative;
-//     height: 124px;
-//     cursor: pointer;
-
-//     .slide {
-//         //   position: absolute;
-//         //   left: 100px;
-//         //   top: 0;
-//         //   width: 8px;
-//         //   height: 8px;
-//         //   border-radius: 50%;
-//         //   border: 1px solid #fff;
-//         //   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
-//         //   pointer-events: none;
-//     }
-// }
-
-// // 颜色调节条
-// .hue {
-//     position: relative;
-//     cursor: pointer;
-
-//     .slide {
-//         //   box-sizing: border-box;
-//         //   position: absolute;
-//         //   left: 0;
-//         //   width: 100%;
-//         //   height: 4px;
-//         //   background: #fff;
-//         //   border: 1px solid #f0f0f0;
-//         //   box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
-//         //   pointer-events: none;
-//         //   border-radius: 1px;
-//     }
-// }
-
-// .color-type {
-//     display: flex;
-//     margin: 8px auto;
-//     font-size: 12px;
-
-//     .name {
-//         width: 32px;
-//         height: 24px;
-//         float: left;
-//         display: flex;
-//         justify-content: center;
-//         align-items: center;
-//         color: #a0acc0;
-//     }
-
-//     .value {
-//         display: block;
-//         box-sizing: border-box;
-//         flex: 1;
-//         height: 24px;
-//         padding: 0 8px;
-//         border: 1px solid #42516c;
-//         color: #eff0f4;
-//         background: #2e3850;
-//         box-sizing: border-box;
-//         width: 100px;
-//         caret-color: #49a4ff;
-
-//         &:focus-visible {
-//             outline: 1px solid rgba(18, 107, 190, 0.5);
-//         }
-//     }
-// }
-
-// // 默认颜色
-// .colors {
-//     display: flex;
-//     flex-wrap: wrap;
-//     padding: 0;
-//     margin: 0;
-
-//     .item {
-//         flex-basis: calc(20% - 4px);
-//         margin: 2px;
-//         width: 16px;
-//         height: 16px;
-//         border-radius: 1px;
-//         box-sizing: border-box;
-//         vertical-align: top;
-//         display: inline-block;
-//         transition: all 0.1s;
-//         cursor: pointer;
-
-//         &:hover {
-//             transform: scale(1.2);
-//         }
-//     }
-// }
-
-// .btn {
-//     margin-top: 0 8px 8px;
-//     border-top: 1px solid #323e53;
-//     text-align: right;
-//     padding: 8px;
-
-//     button {
-//         margin-left: 8px;
-//         width: 52px;
-//         height: 20px;
-//         font-size: 12px;
-//         font-weight: 400;
-//         color: #fff;
-//         background-color: #49a4ff;
-//         border-radius: 2px;
-//         border: none;
-
-//         &:active {
-//             background-color: #1890ff;
-//         }
-//     }
-// }