@dt-frames/ui 2.0.24 → 3.0.1

package/es/theme/index.less

@@ -1,1003 +0,0 @@
-@import '../components/container/index.less';
-@import './transition.less';
-
-@primary-color: #269ac1;
-@primary-color-hover: #d9eef5;
-@header-bg-color: #fff;
-@header-bg-dark-color: #3c4252;	// #001529
-@header-light-bottom-border-color: #eee;
-@header-height: 48px;
-@logo-width: 32px;
-@logo-height: 32px;
-
-@text-color-base: #333;
-@menu-bg-color: #001529;
-@menu-sub-bg-color: #00061a;
-@menu-mix-bg-color: #fff;
-@menu-mix-sub-bg-color: #fff;
-@menu-mix-select-bg-color: #269ac112;
-@menu-item-height: 44px;
-
-@border-color-base: #d9d9d9;
-
-@page-bg-color: #f0f2f5;
-@content-bg: #f4f7f9;
-
-@white: #fff;
-
-@side-drag-z-index: 20;
-
-// 路由复用
-@multiple-height: 30px;
-@tabs-background: #fff;
-
-// 滚动条边框
-@border-color-dark: #b6b7b9;
-
-// table相关
-@table-action-icon-color: #999;
-
-// 小尺寸
-@small-font-size: 13px;
-@small-height: 30px;
-
-// 中尺寸
-@middle-font-size: 14px;
-@middle-height: 32px;
-
-// 大尺寸
-@large-font-size: 14px;
-@large-height: 34px;
-
-/* 滚动条美化 */
-::-webkit-scrollbar {
-    width: 7px;
-    height: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background-color: rgb(0 0 0 / 5%);
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: rgb(144 147 153 / 30%);
-    border-radius: 2px;
-    box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background-color: @border-color-dark;
-}
-
-
-.ant-btn.ant-btn-sm,
-.ant-input-search-small .ant-btn.ant-btn-sm{
-	font-size: @small-font-size;
-	height: @small-height;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.dt-theme{
-    .ant-input-sm:not(textarea){
-        height: @small-height;
-		font-size: @small-font-size;
-    }
-
-    .dt-theme-main {
-        background-color: @content-bg;
-		.ant-layout-content{
-			width: 100%;
-            &.fixed{
-                width: 1300px;
-            }
-		}
-    }
-
-    .ant-btn-lg{
-        font-size: @large-font-size;
-        height: @large-height;
-        display: flex;
-        align-items: center;
-    }
-
-    .dt-page{
-        background: @page-bg-color;
-    }
-
-    .dt-header{
-        height: 48px;
-        line-height: 48px;
-        padding: 0;
-
-        &--light {
-            background-color: @header-bg-color !important;
-            border-bottom: 1px solid @header-light-bottom-border-color;
-            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: @white;
-			}
-		}
-    }
-
-    .ant-avatar-string{
-        width: 100%;
-        height: 100%;
-        transform: scale(1) translateX(-50%) !important;
-    }
-
-    .dt-sideBar{
-        background: @menu-bg-color;
-
-        .ant-layout-sider-children {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .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;
-            }
-        }
-
-        &--fixed{
-            position: fixed;
-        }
-
-        &--mix{
-            height: calc(100% - @header-height);
-            top: @header-height;
-            background: @menu-mix-bg-color;
-            border-right: 1px solid #f0f0f0;
-
-            .ant-menu{
-                background: @menu-mix-bg-color;
-                border-right: none;
-                .ant-menu-sub{
-                    background: @menu-mix-sub-bg-color;
-                }
-                .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: @primary-color;
-                    }
-                }
-                .ant-menu-item:hover .i{
-                    color: @primary-color;
-                }
-            }
-        }
-
-        .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{
-            position: fixed;
-            top: 0;
-            z-index: @side-drag-z-index;
-            width: 2px;
-            height: 100%;
-            cursor: col-resize;
-            border-top: none;
-            border-bottom: none;
-
-            &--hide {
-                display: none;
-            }
-
-            &:hover {
-                background-color: @primary-color;
-                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: @primary-color;
-                        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: @primary-color;
-                        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;
-        }
-    }
-
-    &-small{
-        font-size: @small-font-size;
-    }
-
-    &-middle{
-        font-size: @middle-font-size;
-        .dt-header-action {
-            i {
-                font-size: 20px;
-            }
-            span{
-                font-size: @middle-font-size;
-            }
-        }
-
-        .dt-reuse-tabs .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab span {
-            font-size: @small-font-size;
-        }
-
-        .dt-reuse-tabs .ant-tabs-extra-content i{
-            font-size: 16px;
-        }  
-        
-        .ant-btn{
-            font-size: @middle-font-size;
-        }
-    }
-
-    &-large{
-        font-size: @large-font-size;
-        .dt-sideBar .ant-menu .ant-menu-item, .dt-sideBar .ant-menu .ant-menu-submenu-title {
-            height: 48px !important;
-        }
-        .dt-menu-item span{
-            font-size: @large-font-size !important;
-        }
-
-        .dt-reuse-tabs .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab span {
-            font-size: @small-font-size;
-        }
-
-        .dt-reuse-tabs .ant-tabs-extra-content i{
-            font-size: 16px;
-        }  
-    }
-}
-
-.dt-menu-item{
-    display: flex;
-    align-items: center;
-    font-size: 13px;
-    .menu-icon {
-        margin-right: 6px;
-    }
-}
-
-.dt-sideBar .ant-menu-inline .ant-menu-item, .dt-sideBar .ant-menu-inline .ant-menu-submenu-title {
-	width: 100%;
-}
-
-.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 @primary-color;
-			border-radius: 1px;
-		}
-	}
-
-    .dt-menu-item {
-        display: flex;
-        span{
-            font-size: 13px;
-        }
-    }
-    .menu-icon{
-        color: rgba(255,255,255,0.65);
-        padding: 0;
-        margin-right: 6px;
-        height: 40px;
-        width: 28px;
-        text-align: center;
-        font-size: 16px;
-        height: 16px;
-        line-height: 18px;
-    }
-}
-
-.dt-split-menu.ant-menu-horizontal .ant-menu-item-selected {
-	background-color: @primary-color;
-}
-
-.dt-header{
-    height: @header-height;
-    line-height: @header-height;
-    color: @white;
-
-    .i{
-        font-size: 1.125rem;
-    }
-}
-
-.dt-logo{
-    height: @header-height;
-    flex: 0 0 @header-height;
-    &.light {
-        border-bottom: 1px solid @border-color-base;
-    }
-
-    &.light &__title {
-        color: @primary-color;
-    }
-
-    &.dark &__title {
-        color: @white;
-    }
-
-    img{
-        width: @logo-width;
-        height: @logo-height;
-    }
-}
-
-.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;
-	}
-	.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;
-	}
-
-	.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-content{
-		width: 180px;
-		max-height: 400px;
-        height: 220px;
-        padding: 0;
-        overflow-y: auto;
-	}
-
-	&__popover .ant-empty-description{
-		font-size: 13px;
-	}
-}
-
-.dt-setting-theme{
-	&__tips {
-		border: 1px solid @primary-color;
-		color: @primary-color;
-	}
-}
-
-.dt-lang-picker{
-	&__popover .ant-popover-inner-content{
-		width: 120px;
-		padding: 4px 0;
-
-		.active{
-			color: @primary-color;
-		}
-	}
-}
-
-.dt-notify{
-	&__popover .ant-popover-inner-content {
-		width: 350px;
-		padding: 10px 0 0 0;
-	}
-}
-
-.dt-size {
-	&__popover .ant-popover-inner-content {
-		width: 120px;
-		padding: 4px 0;
-
-		.active{
-			color: @primary-color;
-		}
-	}
-}
-
-.dt-user-info{
-	&__popover .ant-popover-inner-content {
-		width: 120px;
-		padding: 4px 0;
-
-		.active{
-			color: @primary-color;
-		}
-	}
-}
-
-.dt-menu-type {
-	&__list:hover{
-		border: 2px solid @primary-color;
-	}
-
-	&__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 @primary-color;
-	}
-}
-
-
-.dt-reuse-tabs {
-	.ant-tabs-small {
-		height: calc(@multiple-height + 2px);
-	}
-
-	.ant-tabs-card{
-		.ant-tabs-nav{
-			padding-top: 2px;
-			height: calc(@multiple-height + 2px);
-			margin: 0;
-			background-color: @tabs-background;
-			border: 0;
-			box-shadow: none;
-		}
-
-		&::before{
-			border: none;
-		}
-
-		.ant-tabs-nav-container {
-			height: @multiple-height;
-			padding-top: 2px;
-		}
-	}
-
-	.ant-tabs-card > .ant-tabs-nav .ant-tabs-tab{
-        height: calc(@multiple-height - 2px);
-        padding-right: 12px;
-        line-height: calc(@multiple-height - 2px);
-        color: @text-color-base;
-        background-color: @tabs-background;
-        transition: none;
-
-        span{
-            font-size: 12px;
-        }
-
-        &:hover {
-            .ant-tabs-tab-remove {
-                opacity: 1;
-            }
-        }
-
-        .ant-tabs-tab-remove{
-            width: 8px;
-			height: 10px;
-			font-size: 12px;
-			color: inherit;
-			opacity: 1;
-			transition: none;
-			margin-left: 8px;
-			margin-right: -9px;
-			align-items: center;
-
-			span{
-				display: block;
-			}
-
-            &:hover {
-                svg {
-                    width: 0.8em !important;
-                }
-            }
-
-            svg {
-                fill: @text-color-base;
-            }
-        }
-
-        .ant-tabs-tab:not(.ant-tabs-tab-active) {
-            &:hover {
-                color: @primary-color;
-            }
-        }
-    }
-
-    .ant-tabs-tab-active {
-        position: relative;
-        padding-left: 18px;
-        background: @primary-color !important;
-        border: 0;
-        transition: none;
-
-        span {
-          color: @white !important;
-        }
-
-        .ant-tabs-tab-remove {
-          opacity: 1;
-        }
-
-        svg {
-            width: 0.7em;
-            fill: @white !important;
-        }
-
-        &::before{
-            content: ' ';
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background-color: #fff;
-            position: absolute;
-            left: 4px;
-            top: 11px;
-        }
-    }
-
-    .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 {
-            font-size: 12px;
-
-            svg {
-                width: 0.6em;
-            }
-        }
-    }
-
-    &__top{
-        .dt-reuse-tabs{
-            border-bottom: none;
-        }
-
-        .ant-tabs-extra-content{
-            display: flex;
-            span{
-                height: 28px;
-                line-height: 28px;
-                border: 1px solid #d9d9d9;
-                border-left: none;
-                &:hover{
-                    background: rgba(0,0,0,0.03);
-                }
-            }
-        }
-
-        .ant-tabs-nav-more{
-            height: 28px;
-            border: 1px solid #d9d9d9 !important;
-            &:hover{
-                background: rgba(0,0,0,0.03);
-            }
-        }
-
-    }
-
-    &--hide-close {
-        .ant-tabs-tab-remove {
-            opacity: 0 !important;
-        }
-    }
-
-	&__dropdown .ant-dropdown-content li > span{
-		display: flex;
-        padding-right: 3px;
-	}
-}
-
-.ant-message-custom-content{
-	display: flex;
-	align-items: center;
-}
-
-.text-2xl{
-	font-size: 1.5rem;
-}
-
-.text-xl{
-	font-size: 1.25rem;
-}
-
-.text-base{
-	font-size: 1rem;
-}
-
-.text-sm{
-	font-size: 0.875rem;
-}
-
-.ant-modal-confirm-btns {
-    display: flex;
-}
-
-.dt-message-icon{
-	font-size: 24px;
-    float: left;
-    height: 24px;
-    line-height: 24px;
-    padding-right: 10px;
-	&.warning{
-		color: #faad14;
-	}
-	&.success{
-		color: #52c41a;
-	}
-	&.error{
-		color: #ed6f6f;
-	}
-	&.info{
-		color: #1890ff;
-	}
-}
-
-.ant-modal-confirm-body .ant-modal-confirm-content{
-	color: #909399;
-}
-
-.ant-tabs-dropdown-menu-title-content{
-    display: flex;
-    justify-content: space-between;
-    font-size: 13px;
-}
-
-.dt-lock-page{
-    bottom: 20vh;
-    left: 50vw;
-    height: 500px;
-    width: 300px;
-    transform: translateX(-50%);
-    &>div:first-of-type{
-        top: 20%;
-        width: 300px;
-    }
-
-    &>div:nth-of-type(2) {
-        width: 300px;
-        height: 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;
-    }
-}
-
-.lockscreen{
-    font-size: 34px;
-
-    .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;
-            }
-        }
-    }
-
-    .login-box{
-        font-size: 14px;
-        text-align: center;
-        img{
-            width: 100px;
-            height: 100px;
-            border-radius: 50%;
-            margin: 10px auto;
-            border: 3px solid rgba(255,255,255,0.8);
-        }
-    }
-}
-
-@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);
-    }
-}