init: v3 init
This commit is contained in:
陈凯龙
@@ -1,5 +0,0 @@
|
||||
@import './reset.css';
|
||||
@import './variables.less';
|
||||
@import './var.less';
|
||||
@import './sidebar.less';
|
||||
@import './transition.less';
|
||||
@@ -1,147 +0,0 @@
|
||||
/**
|
||||
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
|
||||
* http://cssreset.com
|
||||
*/
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video,
|
||||
input {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
/* font-size: 100%; */
|
||||
|
||||
/* font-weight: normal; */
|
||||
vertical-align: baseline;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Microsoft YaHei';
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote::before,
|
||||
blockquote::after,
|
||||
q::before,
|
||||
q::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* custom */
|
||||
a {
|
||||
/* color: #606266; */
|
||||
text-decoration: none;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
li {
|
||||
/* list-style: none; */
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -1,274 +0,0 @@
|
||||
.app__wrap--Classic,
|
||||
.app__wrap--LeftTop {
|
||||
.horizontal-collapse-transition {
|
||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out !important;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
background: var(--menu-background-color);
|
||||
|
||||
.el-menu {
|
||||
background-color: var(--menu-background-color) !important;
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: var(--menu-text-color) !important;
|
||||
background-color: var(--menu-background-color) !important;
|
||||
|
||||
i {
|
||||
color: var(--menu-text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-sub-menu {
|
||||
.el-menu-item,
|
||||
.el-sub-menu {
|
||||
background-color: var(--sub-menu-background-color) !important;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
color: var(--menu-active-text-color) !important;
|
||||
background-color: var(--sub-menu-hover-color) !important;
|
||||
|
||||
& > .el-sub-menu__title {
|
||||
color: var(--menu-active-text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-opened,
|
||||
.el-menu {
|
||||
background-color: var(--sub-menu-background-color) !important;
|
||||
|
||||
.el-sub-menu__title {
|
||||
background-color: var(--sub-menu-background-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// menu hover
|
||||
.submenu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
&:hover {
|
||||
color: var(--sub-menu-active-text-color) !important;
|
||||
background-color: var(--menu-background-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item:hover {
|
||||
color: var(--sub-menu-active-text-color) !important;
|
||||
// background-color: var(--sub-menu-hover-color) !important;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
color: var(--menu-active-text-color) !important;
|
||||
background-color: var(--sub-menu-hover-color) !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--sub-menu-active-text-color) !important;
|
||||
background-color: var(--sub-menu-hover-color) !important;
|
||||
}
|
||||
|
||||
& > .el-sub-menu__title {
|
||||
color: var(--menu-active-text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// .nest-menu {
|
||||
// background-color: var(--sub-menu-background-color) !important;
|
||||
// .el-sub-menu>.el-sub-menu__title {
|
||||
// background-color: var(--sub-menu-background-color) !important;
|
||||
// }
|
||||
// .is-active {
|
||||
// background-color: var(--sub-menu-hover-color) !important;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.el-menu--collapse {
|
||||
& > div > .el-sub-menu {
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active {
|
||||
& > .el-sub-menu__title {
|
||||
background-color: var(--sub-menu-hover-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nest-popper-menu {
|
||||
margin-left: 10px;
|
||||
background: var(--menu-background-color);
|
||||
|
||||
.el-menu--popup-right-start {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
background-color: var(--menu-background-color) !important;
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: var(--menu-text-color) !important;
|
||||
background-color: var(--menu-background-color) !important;
|
||||
|
||||
i {
|
||||
color: var(--menu-text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active {
|
||||
color: var(--menu-active-text-color) !important;
|
||||
background-color: var(--sub-menu-hover-color) !important;
|
||||
|
||||
& > .el-sub-menu__title {
|
||||
color: var(--menu-active-text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// .nest-menu {
|
||||
// .is-active {
|
||||
// background-color: var(--sub-menu-hover-color) !important;
|
||||
// }
|
||||
// }
|
||||
// menu hover
|
||||
.submenu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
&:hover {
|
||||
color: var(--sub-menu-active-text-color) !important;
|
||||
background-color: var(--menu-background-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item:hover {
|
||||
color: var(--sub-menu-active-text-color) !important;
|
||||
// background-color: var(--sub-menu-hover-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app__wrap--Top {
|
||||
.sidebar-container {
|
||||
background: var(--top-menu-background-color);
|
||||
|
||||
.el-menu {
|
||||
background-color: var(--top-menu-background-color) !important;
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
height: var(--top-sider-height);
|
||||
line-height: var(--top-sider-height);
|
||||
color: var(--top-menu-text-color) !important;
|
||||
background-color: var(--top-menu-background-color) !important;
|
||||
|
||||
i {
|
||||
position: static;
|
||||
margin-top: -3px;
|
||||
margin-left: 8px;
|
||||
color: var(--top-menu-text-color) !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active {
|
||||
color: var(--top-menu-active-text-color) !important;
|
||||
background: var(--top-menu-active-background-color) !important;
|
||||
|
||||
& > .el-sub-menu__title {
|
||||
color: var(--top-menu-active-text-color) !important;
|
||||
background: var(--top-menu-active-background-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-opened {
|
||||
.el-menu-item {
|
||||
background-color: var(--sub-menu-background-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// .nest-menu {
|
||||
// background-color: var(--sub-menu-background-color) !important;
|
||||
// .el-sub-menu>.el-sub-menu__title {
|
||||
// background-color: var(--sub-menu-background-color) !important;
|
||||
// }
|
||||
// .is-active {
|
||||
// background-color: var(--sub-menu-hover-color) !important;
|
||||
// }
|
||||
// }
|
||||
// menu hover
|
||||
.submenu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
&:hover {
|
||||
color: var(--top-sub-menu-active-text-color) !important;
|
||||
background: var(--top-menu-active-background-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item:hover {
|
||||
color: var(--top-menu-active-text-color) !important;
|
||||
background: var(--top-menu-active-background-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-popper-menu {
|
||||
// margin-top: 10px;
|
||||
// margin-left: 10px;
|
||||
background: var(--top-menu-background-color);
|
||||
|
||||
.el-menu {
|
||||
background-color: var(--top-menu-background-color) !important;
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: var(--top-menu-text-color) !important;
|
||||
background-color: var(--top-menu-background-color) !important;
|
||||
|
||||
i {
|
||||
color: var(--top-menu-text-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active {
|
||||
color: var(--top-menu-active-text-color) !important;
|
||||
background-color: var(--top-menu-active-background-color) !important;
|
||||
|
||||
& > .el-sub-menu__title {
|
||||
color: var(--top-menu-active-text-color) !important;
|
||||
background-color: var(--top-menu-active-background-color) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--top-menu-active-background-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .nest-menu {
|
||||
// .is-active {
|
||||
// // background-color: var(--sub-menu-hover-color) !important;
|
||||
// }
|
||||
// }
|
||||
// menu hover
|
||||
.submenu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
&:hover {
|
||||
color: var(--top-sub-menu-hover-color) !important;
|
||||
background-color: var(--top-menu-background-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu-item:hover {
|
||||
color: var(--top-sub-menu-hover-color) !important;
|
||||
background-color: var(--top-menu-active-background-color) !important;
|
||||
}
|
||||
|
||||
.anticon-item {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
//globl transition css
|
||||
|
||||
/* fade */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* breadcrumb transition */
|
||||
.breadcrumb-enter-active,
|
||||
.breadcrumb-leave-active {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.breadcrumb-enter-from,
|
||||
.breadcrumb-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.breadcrumb-move {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.breadcrumb-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
:root {
|
||||
--main-color: #018ffb;
|
||||
|
||||
// Silder
|
||||
--menu-text-color: #bfcbd9;
|
||||
--menu-active-text-color: #fff;
|
||||
--menu-active-background-color: #2d8cf0;
|
||||
--menu-background-color: #001529;
|
||||
--sub-menu-background-color: #1f2d3d;
|
||||
--sub-menu-hover-color: #2d8cf0;
|
||||
--sub-menu-active-text-color: #fff;
|
||||
--menu-width: 200px;
|
||||
--menu-min-width: 64px;
|
||||
|
||||
// topSider
|
||||
--top-sider-height: 60px; // 最低60px，element的最小高度。
|
||||
--top-menu-text-color: #303133;
|
||||
--top-menu-active-text-color: #2d8cf0;
|
||||
--top-menu-active-background-color: #fff;
|
||||
--top-menu-background-color: #fff;
|
||||
--top-sub-menu-background-color: #1f2d3d;
|
||||
--top-sub-menu-hover-color: #2d8cf0;
|
||||
--top-sub-menu-active-text-color: #2d8cf0;
|
||||
|
||||
// meunTab
|
||||
--menu-tab-width: 90px;
|
||||
--menu-tab-item-height: 70px;
|
||||
--menu-tab-background-color: #fff;
|
||||
--menu-tab-text-color: #000;
|
||||
--menu-tab-active-background-color: #2d8cf0;
|
||||
--menu-tab-active-text-color: #fff;
|
||||
|
||||
// menuTopTab
|
||||
--menu-top-tab-width: 120px;
|
||||
--menu-top-tab-background-color: #fff;
|
||||
--menu-top-tab-text-color: #000;
|
||||
--menu-top-tab-active-background-color: #2d8cf0;
|
||||
--menu-top-tab-active-text-color: #fff;
|
||||
|
||||
// navbar
|
||||
--navbar-height: 40px;
|
||||
|
||||
// tagsView
|
||||
--tags-view-height: 40px;
|
||||
--tag-background-color: #fbfbfb;
|
||||
--tag-active-background-color: #fff;
|
||||
|
||||
// content
|
||||
--content-background-color: #fff;
|
||||
--app-background-color: #f5f7f9;
|
||||
|
||||
// html body
|
||||
--content-min-width: 992px;
|
||||
}
|
||||
Reference in New Issue
Block a user