wip: 重构中
This commit is contained in:
kailong321200875
@@ -1,39 +0,0 @@
|
||||
.el-button + .el-button {
|
||||
position: relative;
|
||||
}
|
||||
.el-button:not(.is-disabled) {
|
||||
position: relative;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: -6px;
|
||||
right: -6px;
|
||||
bottom: -6px;
|
||||
pointer-events: none;
|
||||
background-color: inherit;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
opacity: 0;
|
||||
transition: all .3s;
|
||||
border-radius: inherit;
|
||||
}
|
||||
&:active:after {
|
||||
opacity: .7;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transition: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button--default {
|
||||
&:after {
|
||||
background-color: lightgrey !important;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
// 新版element-plus样式问题，先手动修复，后面更新版本在看看会不会出问题
|
||||
.el-overlay {
|
||||
overflow: hidden !important;
|
||||
text-align: left;
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
// 悬停样式
|
||||
.hover-effect {
|
||||
cursor: pointer;
|
||||
transition: background .3s;
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .025);
|
||||
}
|
||||
}
|
||||
// 悬停样式
|
||||
|
||||
// 必填样式
|
||||
.is-required-item::before {
|
||||
content: "*";
|
||||
color: #F56C6C;
|
||||
margin-right: 4px;
|
||||
}
|
||||
// 必填样式
|
||||
|
||||
// 综合实例样式
|
||||
.search__example--wrap {
|
||||
padding: 20px 10px 0 10px;
|
||||
background: #fff;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.button__example--wrap {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.dialong__button--wrap {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
// 综合实例样式
|
||||
@@ -1,6 +0,0 @@
|
||||
@import '~element-plus/lib/theme-chalk/index.css';
|
||||
@import './element-plus.less';
|
||||
@import './transition.less';
|
||||
@import './sider.less';
|
||||
@import './glob.less';
|
||||
@import './button.less';
|
||||
@@ -1,150 +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 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
/* font-size: 100%; */
|
||||
/* font-weight: normal; */
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
font-family: "Microsoft YaHei";
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
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%;
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-text-size-adjust: none;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
@@ -1,186 +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: @menuBg;
|
||||
.el-menu {
|
||||
// background-color: @menuBg !important;
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
color: @menuText !important;
|
||||
background-color: @menuBg !important;
|
||||
i {
|
||||
color: @menuText !important;
|
||||
}
|
||||
}
|
||||
.el-submenu {
|
||||
.el-menu-item,
|
||||
.el-submenu {
|
||||
background-color: @subMenuBg !important;
|
||||
}
|
||||
.is-active {
|
||||
color: @menuActiveText !important;
|
||||
background-color: @subMenuHover !important;
|
||||
&>.el-submenu__title {
|
||||
color: @menuActiveText !important;
|
||||
}
|
||||
}
|
||||
.is-opened,
|
||||
.el-menu {
|
||||
background-color: @subMenuBg !important;
|
||||
.el-submenu__title {
|
||||
background-color: @subMenuBg !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// menu hover
|
||||
.submenu-title-noDropdown,
|
||||
.el-submenu__title {
|
||||
&:hover {
|
||||
background-color: @menuBg !important;
|
||||
color: @subMenuActiveText !important;
|
||||
}
|
||||
}
|
||||
.el-menu-item:hover {
|
||||
color: @subMenuActiveText !important;
|
||||
// background-color: @subMenuHover !important;
|
||||
}
|
||||
.is-active {
|
||||
color: @menuActiveText !important;
|
||||
background-color: @subMenuHover !important;
|
||||
&:hover {
|
||||
color: @subMenuActiveText !important;
|
||||
background-color: @subMenuHover !important;
|
||||
}
|
||||
&>.el-submenu__title {
|
||||
color: @menuActiveText !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-menu--collapse {
|
||||
&>div>.el-submenu {
|
||||
i {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.is-active {
|
||||
&>.el-submenu__title {
|
||||
background-color: @subMenuHover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nest-popper-menu {
|
||||
background: @menuBg;
|
||||
.el-menu {
|
||||
background-color: @menuBg !important;
|
||||
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
color: @menuText !important;
|
||||
background-color: @menuBg !important;
|
||||
i {
|
||||
color: @menuText !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active {
|
||||
color: @menuActiveText !important;
|
||||
background-color: @subMenuHover !important;
|
||||
&>.el-submenu__title {
|
||||
color: @menuActiveText !important;
|
||||
}
|
||||
}
|
||||
|
||||
// menu hover
|
||||
.submenu-title-noDropdown,
|
||||
.el-submenu__title {
|
||||
&:hover {
|
||||
background-color: @menuBg !important;
|
||||
color: @subMenuActiveText !important;
|
||||
}
|
||||
}
|
||||
.el-menu-item:hover {
|
||||
color: @subMenuActiveText !important;
|
||||
// background-color: @subMenuHover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app__wrap--Top {
|
||||
.sidebar-container {
|
||||
background: @topMenuBg;
|
||||
.el-menu {
|
||||
background-color: @topMenuBg !important;
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
color: @topMenuText !important;
|
||||
background-color: @topMenuBg !important;
|
||||
i {
|
||||
color: @topMenuText !important;
|
||||
}
|
||||
}
|
||||
|
||||
.is-active {
|
||||
color: @topMenuActiveText !important;
|
||||
&>.el-submenu__title {
|
||||
color: @topMenuActiveText !important;
|
||||
}
|
||||
}
|
||||
.is-opened {
|
||||
.el-menu-item {
|
||||
background-color: @subMenuBg !important;
|
||||
}
|
||||
}
|
||||
|
||||
// menu hover
|
||||
.submenu-title-noDropdown,
|
||||
.el-submenu__title {
|
||||
&:hover {
|
||||
color: @topSMenuActiveText !important;
|
||||
}
|
||||
}
|
||||
.el-menu-item:hover {
|
||||
color: @topMenuActiveText !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-popper-menu {
|
||||
background: @topMenuBg;
|
||||
.el-menu {
|
||||
background-color: @topMenuBg !important;
|
||||
|
||||
.el-menu-item,
|
||||
.el-submenu__title {
|
||||
color: @topMenuText !important;
|
||||
background-color: @topMenuBg !important;
|
||||
}
|
||||
|
||||
.is-active {
|
||||
color: @topMenuActiveText !important;
|
||||
// background-color: @subMenuHover !important;
|
||||
&>.el-submenu__title {
|
||||
color: @topMenuActiveText !important;
|
||||
}
|
||||
}
|
||||
|
||||
// menu hover
|
||||
.submenu-title-noDropdown,
|
||||
.el-submenu__title {
|
||||
&:hover {
|
||||
background-color: @topMenuBg !important;
|
||||
color: @topSMenuHover !important;
|
||||
}
|
||||
}
|
||||
.el-menu-item:hover {
|
||||
color: @topSMenuHover !important;
|
||||
// background-color: @subMenuHover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 .5s;
|
||||
}
|
||||
|
||||
.breadcrumb-enter-from,
|
||||
.breadcrumb-leave-active {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.breadcrumb-move {
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.breadcrumb-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
// Silder
|
||||
@menuText: #bfcbd9;
|
||||
@menuActiveText: #fff;
|
||||
@menuActiveBg: #2d8cf0;
|
||||
|
||||
@menuBg: #001529;
|
||||
|
||||
@subMenuBg: #1f2d3d;
|
||||
@subMenuHover: #2d8cf0;
|
||||
@subMenuActiveText: #fff;
|
||||
|
||||
@menuWidth: 200px;
|
||||
@menuMinWidth: 64px;
|
||||
|
||||
// topSider
|
||||
@topSiderHeight: 60px; // 最低60px，element的最小高度。
|
||||
|
||||
@topMenuText: #303133;
|
||||
@topMenuActiveText: #2d8cf0;
|
||||
@topMenuActiveBg: #fff;
|
||||
|
||||
@topMenuBg: #fff;
|
||||
|
||||
@topSubMenuBg: #1f2d3d;
|
||||
@topSMenuHover: #2d8cf0;
|
||||
@topSMenuActiveText: #2d8cf0;
|
||||
|
||||
// meunTab
|
||||
@menuTabWidth: 90px;
|
||||
@menuTabItemHeight: 70px;
|
||||
@menuTabBg: #fff;
|
||||
@menuTabText: black;
|
||||
@menuTabActiveBg: #2d8cf0;
|
||||
@menuTabActiveText: #fff;
|
||||
|
||||
// menuTopTab
|
||||
@menuTopTabWidth: 120px;
|
||||
@menuTopTabBg: #fff;
|
||||
@menuTopTabText: black;
|
||||
@menuTopTabActiveBg: #2d8cf0;
|
||||
@menuTopTabActiveText: #fff;
|
||||
|
||||
// navbar
|
||||
@navbarHeight: 40px;
|
||||
|
||||
// tagsView
|
||||
@tagsViewHeight: 40px;
|
||||
@tagActiveBg: #304156;
|
||||
|
||||
// content
|
||||
@contentBg: #fff;
|
||||
@appBg: #f5f7f9;
|
||||
|
||||
// html body
|
||||
@minWidth: 992px;
|
||||
|
||||
// deep
|
||||
@deep: ~'::v-deep';
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
:export {
|
||||
menuText: @menuText;
|
||||
menuActiveText: @menuActiveText;
|
||||
menuActiveBg: @menuActiveBg;
|
||||
menuBg: @menuBg;
|
||||
subMenuBg: @subMenuBg;
|
||||
subMenuHover: @subMenuHover;
|
||||
menuWidth: @menuWidth;
|
||||
menuMinWidth: @menuMinWidth;
|
||||
}
|
||||
15
src/styles/variables.less.d.ts
vendored
15
src/styles/variables.less.d.ts
vendored
@@ -1,15 +0,0 @@
|
||||
export interface IScssVariables {
|
||||
menuText: string
|
||||
menuActiveText: string
|
||||
menuActiveBg: string
|
||||
menuBg: string
|
||||
subMenuBg: string
|
||||
subMenuHover: string
|
||||
menuWidth: string
|
||||
menuMinWidth: string
|
||||
|
||||
}
|
||||
|
||||
export const variables: IScssVariables
|
||||
|
||||
export default variables
|
||||
Reference in New Issue
Block a user