wangqing
5 years ago
25 changed files with 1076 additions and 288 deletions
@ -0,0 +1,83 @@ |
|||
@import './variables.scss'; |
|||
@mixin colorBtn($color) { |
|||
background: $color; |
|||
&:hover { |
|||
color: $color; |
|||
&::before, |
|||
&::after { |
|||
background: $color; |
|||
} |
|||
} |
|||
} |
|||
.blue-btn { |
|||
@include colorBtn($blue); |
|||
} |
|||
.light-blue-btn { |
|||
@include colorBtn($light-blue); |
|||
} |
|||
.red-btn { |
|||
@include colorBtn($red); |
|||
} |
|||
.pink-btn { |
|||
@include colorBtn($pink); |
|||
} |
|||
.green-btn { |
|||
@include colorBtn($green); |
|||
} |
|||
.tiffany-btn { |
|||
@include colorBtn($tiffany); |
|||
} |
|||
.yellow-btn { |
|||
@include colorBtn($yellow); |
|||
} |
|||
.pan-btn { |
|||
font-size: 14px; |
|||
color: #fff; |
|||
padding: 14px 36px; |
|||
border-radius: 8px; |
|||
border: none; |
|||
outline: none; |
|||
transition: 600ms ease all; |
|||
position: relative; |
|||
display: inline-block; |
|||
&:hover { |
|||
background: #fff; |
|||
&::before, |
|||
&::after { |
|||
width: 100%; |
|||
transition: 600ms ease all; |
|||
} |
|||
} |
|||
&::before, |
|||
&::after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
height: 2px; |
|||
width: 0; |
|||
transition: 400ms ease all; |
|||
} |
|||
&::after { |
|||
right: inherit; |
|||
top: inherit; |
|||
left: 0; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
.custom-button { |
|||
display: inline-block; |
|||
line-height: 1; |
|||
white-space: nowrap; |
|||
cursor: pointer; |
|||
background: #fff; |
|||
color: #fff; |
|||
-webkit-appearance: none; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
outline: 0; |
|||
margin: 0; |
|||
padding: 10px 15px; |
|||
font-size: 14px; |
|||
border-radius: 4px; |
|||
} |
|||
@ -0,0 +1,75 @@ |
|||
// cover some element-ui styles |
|||
.el-breadcrumb__inner, |
|||
.el-breadcrumb__inner a { |
|||
font-weight: 400 !important; |
|||
} |
|||
.el-upload { |
|||
input[type="file"] { |
|||
display: none !important; |
|||
} |
|||
} |
|||
.el-upload__input { |
|||
display: none; |
|||
} |
|||
.cell { |
|||
.el-tag { |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
.small-padding { |
|||
.cell { |
|||
padding-left: 5px; |
|||
padding-right: 5px; |
|||
} |
|||
} |
|||
.fixed-width { |
|||
.el-button--mini { |
|||
padding: 7px 10px; |
|||
min-width: 60px; |
|||
} |
|||
} |
|||
.status-col { |
|||
.cell { |
|||
padding: 0 10px; |
|||
text-align: center; |
|||
.el-tag { |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// to fixed https://github.com/ElemeFE/element/issues/2461 |
|||
.el-dialog { |
|||
transform: none; |
|||
left: 0; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
// refine element ui upload |
|||
.upload-container { |
|||
.el-upload { |
|||
width: 100%; |
|||
.el-upload-dragger { |
|||
width: 100%; |
|||
height: 200px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// dropdown |
|||
.el-dropdown-menu { |
|||
a { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
// fix date-picker ui bug in filter-item |
|||
.el-range-editor.el-input__inner { |
|||
display: inline-flex !important; |
|||
} |
|||
|
|||
// to fix el-date-picker css style |
|||
.el-range-separator { |
|||
box-sizing: content-box; |
|||
} |
|||
@ -0,0 +1,30 @@ |
|||
/** |
|||
* I think element-ui's default theme color is too light for long-term use. |
|||
* So I modified the default color and you can modify it to your liking. |
|||
**/ |
|||
|
|||
/* theme color */ |
|||
$--color-primary: #1890ff; |
|||
$--color-success: #13ce66; |
|||
$--color-warning: #ffba00; |
|||
$--color-danger: #ff4949; |
|||
// $--color-info: #1E1E1E; |
|||
|
|||
$--button-font-weight: 400; |
|||
|
|||
// $--color-text-regular: #1f2d3d; |
|||
|
|||
$--border-color-light: #dfe4ed; |
|||
$--border-color-lighter: #e6ebf5; |
|||
|
|||
$--table-border: 1px solid #dfe6ec; |
|||
|
|||
/* icon font path, required */ |
|||
$--font-path: "~element-ui/lib/theme-chalk/fonts"; |
|||
@import "~element-ui/packages/theme-chalk/src/index"; |
|||
|
|||
// the :export directive is the magic sauce for webpack |
|||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|||
:export { |
|||
theme: $--color-primary; |
|||
} |
|||
@ -1,7 +0,0 @@ |
|||
// 改目录下可存放第三方样式文件，或者公用样式 |
|||
// 该例子可在 view/example/sprite.vue 里查看 |
|||
.sprites { |
|||
div { |
|||
border: 1px solid #000; |
|||
} |
|||
} |
|||
@ -0,0 +1,138 @@ |
|||
$editorTabsborderColor: #121315; |
|||
body, |
|||
html { |
|||
margin: 0; |
|||
padding: 0; |
|||
background: #fff; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; |
|||
} |
|||
input, |
|||
textarea { |
|||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; |
|||
} |
|||
.editor-tabs { |
|||
background: $editorTabsborderColor; |
|||
.el-tabs__header { |
|||
margin: 0; |
|||
border-bottom-color: $editorTabsborderColor; |
|||
.el-tabs__nav { |
|||
border-color: $editorTabsborderColor; |
|||
} |
|||
} |
|||
.el-tabs__item { |
|||
height: 32px; |
|||
line-height: 32px; |
|||
color: #888a8e; |
|||
border-left: 1px solid $editorTabsborderColor !important; |
|||
background: #363636; |
|||
margin-right: 5px; |
|||
user-select: none; |
|||
} |
|||
.el-tabs__item.is-active { |
|||
background: #1e1e1e; |
|||
border-bottom-color: #1e1e1e !important; |
|||
color: #fff; |
|||
} |
|||
.el-icon-edit { |
|||
color: #f1fa8c; |
|||
} |
|||
.el-icon-document { |
|||
color: #a95812; |
|||
} |
|||
:focus.is-active.is-focus:not(:active) { |
|||
box-shadow: none; |
|||
border-radius: 0; |
|||
} |
|||
} |
|||
|
|||
// home |
|||
.right-scrollbar { |
|||
.el-scrollbar__view { |
|||
padding: 12px 18px 15px 15px; |
|||
} |
|||
} |
|||
.el-scrollbar__wrap { |
|||
box-sizing: border-box; |
|||
overflow-x: hidden !important; |
|||
margin-bottom: 0 !important; |
|||
} |
|||
.center-tabs { |
|||
.el-tabs__header { |
|||
margin-bottom: 0 !important; |
|||
} |
|||
.el-tabs__item { |
|||
width: 50%; |
|||
text-align: center; |
|||
} |
|||
.el-tabs__nav { |
|||
width: 100%; |
|||
} |
|||
} |
|||
.reg-item { |
|||
padding: 12px 6px; |
|||
background: #f8f8f8; |
|||
position: relative; |
|||
border-radius: 4px; |
|||
.close-btn { |
|||
position: absolute; |
|||
right: -6px; |
|||
top: -6px; |
|||
display: block; |
|||
width: 16px; |
|||
height: 16px; |
|||
line-height: 16px; |
|||
background: rgba(0, 0, 0, 0.2); |
|||
border-radius: 50%; |
|||
color: #fff; |
|||
text-align: center; |
|||
z-index: 1; |
|||
cursor: pointer; |
|||
font-size: 12px; |
|||
&:hover { |
|||
background: rgba(210, 23, 23, 0.5); |
|||
} |
|||
} |
|||
& + .reg-item { |
|||
margin-top: 18px; |
|||
} |
|||
} |
|||
.action-bar { |
|||
& .el-button + .el-button { |
|||
margin-left: 15px; |
|||
} |
|||
& i { |
|||
font-size: 20px; |
|||
vertical-align: middle; |
|||
position: relative; |
|||
top: -1px; |
|||
} |
|||
} |
|||
.custom-tree-node { |
|||
width: 100%; |
|||
font-size: 14px; |
|||
.node-operation { |
|||
float: right; |
|||
} |
|||
i[class*="el-icon"] + i[class*="el-icon"] { |
|||
margin-left: 6px; |
|||
} |
|||
.el-icon-plus { |
|||
color: #409eff; |
|||
} |
|||
.el-icon-delete { |
|||
color: #157a0c; |
|||
} |
|||
} |
|||
.el-scrollbar__view { |
|||
overflow-x: hidden; |
|||
} |
|||
.el-rate { |
|||
display: inline-block; |
|||
vertical-align: text-top; |
|||
} |
|||
.el-upload__tip { |
|||
line-height: 1.2; |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
@mixin action-bar { |
|||
.action-bar { |
|||
height: 33px; |
|||
background: #f2fafb; |
|||
padding: 0 15px; |
|||
box-sizing: border-box; |
|||
.bar-btn { |
|||
display: inline-block; |
|||
padding: 0 6px; |
|||
line-height: 32px; |
|||
color: #8285f5; |
|||
cursor: pointer; |
|||
font-size: 14px; |
|||
user-select: none; |
|||
& i { |
|||
font-size: 20px; |
|||
} |
|||
&:hover { |
|||
color: #4348d4; |
|||
} |
|||
} |
|||
.bar-btn + .bar-btn { |
|||
margin-left: 8px; |
|||
} |
|||
.delete-btn { |
|||
color: #f56c6c; |
|||
&:hover { |
|||
color: #ea0b30; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -1,138 +1,161 @@ |
|||
$editorTabsborderColor: #121315; |
|||
body, |
|||
html { |
|||
@import './variables.scss'; |
|||
@import './mixin.scss'; |
|||
@import './transition.scss'; |
|||
@import './element-ui.scss'; |
|||
@import './sidebar.scss'; |
|||
@import './btn.scss'; |
|||
body { |
|||
height: 100%; |
|||
margin: 0; |
|||
padding: 0; |
|||
background: #fff; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; |
|||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; |
|||
} |
|||
input, |
|||
textarea { |
|||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; |
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
.editor-tabs { |
|||
background: $editorTabsborderColor; |
|||
.el-tabs__header { |
|||
html { |
|||
height: 100%; |
|||
margin: 0; |
|||
border-bottom-color: $editorTabsborderColor; |
|||
.el-tabs__nav { |
|||
border-color: $editorTabsborderColor; |
|||
box-sizing: border-box; |
|||
} |
|||
#app { |
|||
margin: 0; |
|||
height: 100%; |
|||
} |
|||
.el-tabs__item { |
|||
height: 32px; |
|||
line-height: 32px; |
|||
color: #888a8e; |
|||
border-left: 1px solid $editorTabsborderColor !important; |
|||
background: #363636; |
|||
margin-right: 5px; |
|||
user-select: none; |
|||
} |
|||
.el-tabs__item.is-active { |
|||
background: #1e1e1e; |
|||
border-bottom-color: #1e1e1e !important; |
|||
color: #fff; |
|||
*, |
|||
*::before, |
|||
*::after { |
|||
box-sizing: inherit; |
|||
} |
|||
.el-icon-edit { |
|||
color: #f1fa8c; |
|||
.no-padding { |
|||
padding: 0 !important; |
|||
} |
|||
.el-icon-document { |
|||
color: #a95812; |
|||
.padding-content { |
|||
padding: 4px 0; |
|||
} |
|||
:focus.is-active.is-focus:not(:active) { |
|||
box-shadow: none; |
|||
border-radius: 0; |
|||
a:focus, |
|||
a:active { |
|||
outline: none; |
|||
} |
|||
a, |
|||
a:focus, |
|||
a:hover { |
|||
cursor: pointer; |
|||
color: inherit; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
// home |
|||
.right-scrollbar { |
|||
.el-scrollbar__view { |
|||
padding: 12px 18px 15px 15px; |
|||
div:focus { |
|||
outline: none; |
|||
} |
|||
.fr { |
|||
float: right; |
|||
} |
|||
.el-scrollbar__wrap { |
|||
box-sizing: border-box; |
|||
overflow-x: hidden !important; |
|||
margin-bottom: 0 !important; |
|||
.fl { |
|||
float: left; |
|||
} |
|||
.center-tabs { |
|||
.el-tabs__header { |
|||
margin-bottom: 0 !important; |
|||
.pr-5 { |
|||
padding-right: 5px; |
|||
} |
|||
.el-tabs__item { |
|||
width: 50%; |
|||
text-align: center; |
|||
.pl-5 { |
|||
padding-left: 5px; |
|||
} |
|||
.el-tabs__nav { |
|||
width: 100%; |
|||
.block { |
|||
display: block; |
|||
} |
|||
.pointer { |
|||
cursor: pointer; |
|||
} |
|||
.reg-item { |
|||
padding: 12px 6px; |
|||
background: #f8f8f8; |
|||
position: relative; |
|||
border-radius: 4px; |
|||
.close-btn { |
|||
position: absolute; |
|||
right: -6px; |
|||
top: -6px; |
|||
.inlineBlock { |
|||
display: block; |
|||
width: 16px; |
|||
height: 16px; |
|||
line-height: 16px; |
|||
background: rgba(0, 0, 0, 0.2); |
|||
border-radius: 50%; |
|||
color: #fff; |
|||
text-align: center; |
|||
z-index: 1; |
|||
} |
|||
.clearfix { |
|||
&::after { |
|||
visibility: hidden; |
|||
display: block; |
|||
font-size: 0; |
|||
content: " "; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
} |
|||
aside { |
|||
background: #eef1f6; |
|||
padding: 8px 24px; |
|||
margin-bottom: 20px; |
|||
border-radius: 2px; |
|||
display: block; |
|||
line-height: 32px; |
|||
font-size: 16px; |
|||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; |
|||
color: #2c3e50; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
a { |
|||
color: #337ab7; |
|||
cursor: pointer; |
|||
font-size: 12px; |
|||
&:hover { |
|||
background: rgba(210, 23, 23, 0.5); |
|||
} |
|||
color: rgb(32, 160, 255); |
|||
} |
|||
& + .reg-item { |
|||
margin-top: 18px; |
|||
} |
|||
} |
|||
.action-bar { |
|||
& .el-button + .el-button { |
|||
margin-left: 15px; |
|||
|
|||
//main-container全局样式 |
|||
.app-container { |
|||
padding: 20px; |
|||
} |
|||
& i { |
|||
font-size: 20px; |
|||
vertical-align: middle; |
|||
.components-container { |
|||
margin: 30px 50px; |
|||
position: relative; |
|||
top: -1px; |
|||
} |
|||
.pagination-container { |
|||
margin-top: 30px; |
|||
} |
|||
.custom-tree-node { |
|||
.text-center { |
|||
text-align: center; |
|||
} |
|||
.sub-navbar { |
|||
height: 50px; |
|||
line-height: 50px; |
|||
position: relative; |
|||
width: 100%; |
|||
font-size: 14px; |
|||
.node-operation { |
|||
float: right; |
|||
text-align: right; |
|||
padding-right: 20px; |
|||
transition: 600ms ease position; |
|||
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); |
|||
.subtitle { |
|||
font-size: 20px; |
|||
color: #fff; |
|||
} |
|||
i[class*="el-icon"] + i[class*="el-icon"] { |
|||
margin-left: 6px; |
|||
&.draft { |
|||
background: #d0d0d0; |
|||
} |
|||
.el-icon-plus { |
|||
color: #409eff; |
|||
&.deleted { |
|||
background: #d0d0d0; |
|||
} |
|||
.el-icon-delete { |
|||
color: #157a0c; |
|||
} |
|||
.link-type, |
|||
.link-type:focus { |
|||
color: #337ab7; |
|||
cursor: pointer; |
|||
&:hover { |
|||
color: rgb(32, 160, 255); |
|||
} |
|||
.el-scrollbar__view { |
|||
overflow-x: hidden; |
|||
} |
|||
.el-rate { |
|||
.filter-container { |
|||
padding-bottom: 10px; |
|||
.filter-item { |
|||
display: inline-block; |
|||
vertical-align: text-top; |
|||
vertical-align: middle; |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
|
|||
//refine vue-multiselect plugin |
|||
.multiselect { |
|||
line-height: 16px; |
|||
} |
|||
.el-upload__tip { |
|||
line-height: 1.2; |
|||
.multiselect--active { |
|||
z-index: 1000 !important; |
|||
} |
|||
|
|||
@ -1,32 +1,57 @@ |
|||
@mixin action-bar { |
|||
.action-bar { |
|||
height: 33px; |
|||
background: #f2fafb; |
|||
padding: 0 15px; |
|||
box-sizing: border-box; |
|||
.bar-btn { |
|||
display: inline-block; |
|||
padding: 0 6px; |
|||
line-height: 32px; |
|||
color: #8285f5; |
|||
cursor: pointer; |
|||
font-size: 14px; |
|||
user-select: none; |
|||
& i { |
|||
font-size: 20px; |
|||
} |
|||
&:hover { |
|||
color: #4348d4; |
|||
} |
|||
} |
|||
.bar-btn + .bar-btn { |
|||
margin-left: 8px; |
|||
} |
|||
.delete-btn { |
|||
color: #f56c6c; |
|||
&:hover { |
|||
color: #ea0b30; |
|||
} |
|||
} |
|||
@mixin clearfix { |
|||
&::after { |
|||
content: ""; |
|||
display: table; |
|||
clear: both; |
|||
} |
|||
} |
|||
@mixin scrollBar { |
|||
&::-webkit-scrollbar-track-piece { |
|||
background: #d3dce6; |
|||
} |
|||
&::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
&::-webkit-scrollbar-thumb { |
|||
background: #99a9bf; |
|||
border-radius: 20px; |
|||
} |
|||
} |
|||
@mixin relative { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
@mixin pct($pct) { |
|||
width: #{$pct}; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
} |
|||
@mixin triangle($width, $height, $color, $direction) { |
|||
$width: $width/2; |
|||
$color-border-style: $height solid $color; |
|||
$transparent-border-style: $width solid transparent; |
|||
|
|||
height: 0; |
|||
width: 0; |
|||
@if $direction==up { |
|||
border-bottom: $color-border-style; |
|||
border-left: $transparent-border-style; |
|||
border-right: $transparent-border-style; |
|||
} |
|||
@else if $direction==right { |
|||
border-left: $color-border-style; |
|||
border-top: $transparent-border-style; |
|||
border-bottom: $transparent-border-style; |
|||
} |
|||
@else if $direction==down { |
|||
border-top: $color-border-style; |
|||
border-left: $transparent-border-style; |
|||
border-right: $transparent-border-style; |
|||
} |
|||
@else if $direction==left { |
|||
border-right: $color-border-style; |
|||
border-top: $transparent-border-style; |
|||
border-bottom: $transparent-border-style; |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,191 @@ |
|||
#app { |
|||
.main-container { |
|||
min-height: 100%; |
|||
transition: margin-left 0.28s; |
|||
margin-left: $sideBarWidth; |
|||
position: relative; |
|||
} |
|||
.sidebar-container { |
|||
transition: width 0.28s; |
|||
width: $sideBarWidth !important; |
|||
background-color: $menuBg; |
|||
height: 100%; |
|||
position: fixed; |
|||
font-size: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1001; |
|||
overflow: hidden; |
|||
|
|||
// reset element-ui css |
|||
.horizontal-collapse-transition { |
|||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; |
|||
} |
|||
.scrollbar-wrapper { |
|||
overflow-x: hidden !important; |
|||
} |
|||
.el-scrollbar__bar.is-vertical { |
|||
right: 0; |
|||
} |
|||
.el-scrollbar { |
|||
height: 100%; |
|||
} |
|||
&.has-logo { |
|||
.el-scrollbar { |
|||
height: calc(100% - 50px); |
|||
} |
|||
} |
|||
.is-horizontal { |
|||
display: none; |
|||
} |
|||
a { |
|||
display: inline-block; |
|||
width: 100%; |
|||
overflow: hidden; |
|||
} |
|||
.svg-icon { |
|||
margin-right: 16px; |
|||
} |
|||
.sub-el-icon { |
|||
margin-right: 12px; |
|||
margin-left: -2px; |
|||
} |
|||
.el-menu { |
|||
border: none; |
|||
height: 100%; |
|||
width: 100% !important; |
|||
} |
|||
|
|||
// menu hover |
|||
.submenu-title-noDropdown, |
|||
.el-submenu__title { |
|||
&:hover { |
|||
background-color: $menuHover !important; |
|||
} |
|||
} |
|||
.is-active > .el-submenu__title { |
|||
color: $subMenuActiveText !important; |
|||
} |
|||
& .nest-menu .el-submenu > .el-submenu__title, |
|||
& .el-submenu .el-menu-item { |
|||
min-width: $sideBarWidth !important; |
|||
background-color: $subMenuBg !important; |
|||
&:hover { |
|||
background-color: $subMenuHover !important; |
|||
} |
|||
} |
|||
} |
|||
.hideSidebar { |
|||
.sidebar-container { |
|||
width: 54px !important; |
|||
} |
|||
.main-container { |
|||
margin-left: 54px; |
|||
} |
|||
.submenu-title-noDropdown { |
|||
padding: 0 !important; |
|||
position: relative; |
|||
.el-tooltip { |
|||
padding: 0 !important; |
|||
.svg-icon { |
|||
margin-left: 20px; |
|||
} |
|||
.sub-el-icon { |
|||
margin-left: 19px; |
|||
} |
|||
} |
|||
} |
|||
.el-submenu { |
|||
overflow: hidden; |
|||
& > .el-submenu__title { |
|||
padding: 0 !important; |
|||
.svg-icon { |
|||
margin-left: 20px; |
|||
} |
|||
.sub-el-icon { |
|||
margin-left: 19px; |
|||
} |
|||
.el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
.el-menu--collapse { |
|||
.el-submenu { |
|||
& > .el-submenu__title { |
|||
& > span { |
|||
height: 0; |
|||
width: 0; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.el-menu--collapse .el-menu .el-submenu { |
|||
min-width: $sideBarWidth !important; |
|||
} |
|||
|
|||
// mobile responsive |
|||
.mobile { |
|||
.main-container { |
|||
margin-left: 0; |
|||
} |
|||
.sidebar-container { |
|||
transition: transform 0.28s; |
|||
width: $sideBarWidth !important; |
|||
} |
|||
&.hideSidebar { |
|||
.sidebar-container { |
|||
pointer-events: none; |
|||
transition-duration: 0.3s; |
|||
transform: translate3d(-$sideBarWidth, 0, 0); |
|||
} |
|||
} |
|||
} |
|||
.withoutAnimation { |
|||
.main-container, |
|||
.sidebar-container { |
|||
transition: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// when menu collapsed |
|||
.el-menu--vertical { |
|||
& > .el-menu { |
|||
.svg-icon { |
|||
margin-right: 16px; |
|||
} |
|||
.sub-el-icon { |
|||
margin-right: 12px; |
|||
margin-left: -2px; |
|||
} |
|||
} |
|||
.nest-menu .el-submenu > .el-submenu__title, |
|||
.el-menu-item { |
|||
&:hover { |
|||
// you can use $subMenuHover |
|||
background-color: $menuHover !important; |
|||
} |
|||
} |
|||
|
|||
// the scroll bar appears when the subMenu is too long |
|||
>.el-menu--popup { |
|||
max-height: 100vh; |
|||
overflow-y: auto; |
|||
&::-webkit-scrollbar-track-piece { |
|||
background: #d3dce6; |
|||
} |
|||
&::-webkit-scrollbar { |
|||
width: 6px; |
|||
} |
|||
&::-webkit-scrollbar-thumb { |
|||
background: #99a9bf; |
|||
border-radius: 20px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,42 @@ |
|||
// global transition css |
|||
|
|||
/* fade */ |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity 0.28s; |
|||
} |
|||
.fade-enter, |
|||
.fade-leave-active { |
|||
opacity: 0; |
|||
} |
|||
|
|||
/* fade-transform */ |
|||
.fade-transform-leave-active, |
|||
.fade-transform-enter-active { |
|||
transition: all 0.5s; |
|||
} |
|||
.fade-transform-enter { |
|||
opacity: 0; |
|||
transform: translateX(-30px); |
|||
} |
|||
.fade-transform-leave-to { |
|||
opacity: 0; |
|||
transform: translateX(30px); |
|||
} |
|||
|
|||
/* breadcrumb transition */ |
|||
.breadcrumb-enter-active, |
|||
.breadcrumb-leave-active { |
|||
transition: all 0.5s; |
|||
} |
|||
.breadcrumb-enter, |
|||
.breadcrumb-leave-active { |
|||
opacity: 0; |
|||
transform: translateX(20px); |
|||
} |
|||
.breadcrumb-move { |
|||
transition: all 0.5s; |
|||
} |
|||
.breadcrumb-leave-active { |
|||
position: absolute; |
|||
} |
|||
@ -0,0 +1,35 @@ |
|||
// base color |
|||
$blue:#324157; |
|||
$light-blue:#3a71a8; |
|||
$red:#c03639; |
|||
$pink: #e65d6e; |
|||
$green: #30b08f; |
|||
$tiffany: #4ab7bd; |
|||
$yellow:#fec171; |
|||
$panGreen: #30b08f; |
|||
|
|||
// sidebar |
|||
$menuText:#bfcbd9; |
|||
$menuActiveText:#409eff; |
|||
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951 |
|||
|
|||
$menuBg:#304156; |
|||
$menuHover:#263445; |
|||
|
|||
$subMenuBg:#1f2d3d; |
|||
$subMenuHover:#001528; |
|||
|
|||
$sideBarWidth: 210px; |
|||
|
|||
// the :export directive is the magic sauce for webpack |
|||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|||
:export { |
|||
menutext: $menuText; |
|||
menuactivetext: $menuActiveText; |
|||
submenuactivetext: $subMenuActiveText; |
|||
menubg: $menuBg; |
|||
menuhover: $menuHover; |
|||
submenubg: $subMenuBg; |
|||
submenuhover: $subMenuHover; |
|||
sidebarwidth: $sideBarWidth; |
|||
} |
|||
Loading…
Reference in new issue