This commit is contained in:
Pan 2019-01-11 15:42:53 +08:00
parent 1cd1ef690c
commit 77113a0cb2
7 changed files with 128 additions and 79 deletions

View File

@ -2,8 +2,10 @@
@mixin colorBtn($color) {
background: $color;
&:hover {
color: $color;
&:before,
&:after {
background: $color;
@ -49,14 +51,17 @@
transition: 600ms ease all;
position: relative;
display: inline-block;
&:hover {
background: #fff;
&:before,
&:after {
width: 100%;
transition: 600ms ease all;
}
}
&:before,
&:after {
content: '';
@ -67,6 +72,7 @@
width: 0;
transition: 400ms ease all;
}
&::after {
right: inherit;
top: inherit;
@ -91,4 +97,3 @@
font-size: 14px;
border-radius: 4px;
}

View File

@ -1,6 +1,7 @@
//覆盖一些element-ui样式
.el-breadcrumb__inner, .el-breadcrumb__inner a{
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
}
@ -38,6 +39,7 @@
.cell {
padding: 0 10px;
text-align: center;
.el-tag {
margin-right: 0px;
}
@ -67,6 +69,7 @@
.upload-container {
.el-upload {
width: 100%;
.el-upload-dragger {
width: 100%;
height: 200px;

View File

@ -104,9 +104,11 @@ code {
line-height: 36px;
font-size: 15px;
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
a {
color: #337ab7;
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
}
@ -120,6 +122,7 @@ code {
padding: 1rem;
line-height: 1.6rem;
word-spacing: .05rem;
a {
color: #42b983;
font-weight: 600;
@ -153,13 +156,16 @@ code {
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;
}
&.draft {
background: #d0d0d0;
}
&.deleted {
background: #d0d0d0;
}
@ -169,6 +175,7 @@ code {
.link-type:focus {
color: #337ab7;
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
}
@ -176,6 +183,7 @@ code {
.filter-container {
padding-bottom: 10px;
.filter-item {
display: inline-block;
vertical-align: middle;

View File

@ -10,9 +10,11 @@
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
@ -37,21 +39,25 @@
$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;

View File

@ -1,4 +1,5 @@
#app {
// 主体区域 Main container
.main-container {
min-height: 100%;
@ -6,6 +7,7 @@
margin-left: $sideBarWidth;
position: relative;
}
// 侧边栏 Sidebar container
.sidebar-container {
transition: width 0.28s;
@ -18,62 +20,79 @@
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__view {
height: 100%;
}
}
.el-scrollbar__bar.is-vertical {
right: 0px;
}
.is-horizontal {
display: none;
}
a {
display: inline-block;
width: 100%;
overflow: hidden;
}
.svg-icon {
margin-right: 16px;
}
.el-menu {
border: none;
height: 100%;
width: 100% !important;
}
.is-active>.el-submenu__title {
color: #f4f4f5 !important;
}
}
.hideSidebar {
.sidebar-container {
width: 36px !important;
}
.main-container {
margin-left: 36px;
}
.submenu-title-noDropdown {
padding-left: 10px !important;
position: relative;
.el-tooltip {
padding: 0 10px !important;
}
}
.el-submenu {
overflow: hidden;
&>.el-submenu__title {
padding-left: 10px !important;
.el-submenu__icon-arrow {
display: none;
}
}
}
.el-menu--collapse {
.el-submenu {
&>.el-submenu__title {
@ -88,14 +107,17 @@
}
}
}
.sidebar-container .nest-menu .el-submenu>.el-submenu__title,
.sidebar-container .el-submenu .el-menu-item {
min-width: $sideBarWidth !important;
background-color: $subMenuBg !important;
&:hover {
background-color: $menuHover !important;
}
}
.el-menu--collapse .el-menu .el-submenu {
min-width: $sideBarWidth !important;
}
@ -105,10 +127,12 @@
.main-container {
margin-left: 0px;
}
.sidebar-container {
transition: transform .28s;
width: $sideBarWidth !important;
}
&.hideSidebar {
.sidebar-container {
transition-duration: 0.3s;
@ -116,7 +140,9 @@
}
}
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;

View File

@ -16,10 +16,12 @@
.fade-transform-enter-active {
transition: all .5s;
}
.fade-transform-enter {
opacity: 0;
transform: translateX(-30px);
}
.fade-transform-leave-to {
opacity: 0;
transform: translateX(30px);
@ -44,4 +46,3 @@
.breadcrumb-leave-active {
position: absolute;
}

View File

@ -1,3 +1,4 @@
// base color
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
@ -11,5 +12,4 @@ $panGreen: #30B08F;
$menuBg:#304156;
$subMenuBg:#1f2d3d;
$menuHover:#001528;
$sideBarWidth: 180px;