From c54e99d0a9c9a5ec18300ad60409b8b444771cd9 Mon Sep 17 00:00:00 2001 From: Pan Date: Fri, 11 Jan 2019 15:42:53 +0800 Subject: [PATCH] tweak --- src/styles/btn.scss | 7 +- src/styles/element-ui.scss | 129 +++++++++++++++++++------------------ src/styles/index.scss | 20 ++++-- src/styles/mixin.scss | 6 ++ src/styles/sidebar.scss | 40 ++++++++++-- src/styles/transition.scss | 3 +- src/styles/variables.scss | 2 +- 7 files changed, 128 insertions(+), 79 deletions(-) diff --git a/src/styles/btn.scss b/src/styles/btn.scss index 0c5ee768..e6ba1a8e 100644 --- a/src/styles/btn.scss +++ b/src/styles/btn.scss @@ -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; } - diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index dc59591e..494dcfa4 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -1,82 +1,85 @@ - //覆盖一些element-ui样式 +//覆盖一些element-ui样式 - .el-breadcrumb__inner, .el-breadcrumb__inner a{ - font-weight: 400!important; +.el-breadcrumb__inner, +.el-breadcrumb__inner a { + font-weight: 400 !important; } - .el-upload { - input[type="file"] { - display: none !important; - } - } +.el-upload { + input[type="file"] { + display: none !important; + } +} - .el-upload__input { - display: none; - } +.el-upload__input { + display: none; +} - .cell { - .el-tag { - margin-right: 0px; - } - } +.cell { + .el-tag { + margin-right: 0px; + } +} - .small-padding { - .cell { - padding-left: 5px; - padding-right: 5px; - } - } +.small-padding { + .cell { + padding-left: 5px; + padding-right: 5px; + } +} - .fixed-width{ - .el-button--mini{ +.fixed-width { + .el-button--mini { padding: 7px 10px; width: 60px; } - } +} - .status-col { - .cell { - padding: 0 10px; - text-align: center; - .el-tag { - margin-right: 0px; - } - } - } +.status-col { + .cell { + padding: 0 10px; + text-align: center; - //暂时性解决dialog 问题 https://github.com/ElemeFE/element/issues/2461 - .el-dialog { - transform: none; - left: 0; - position: relative; - margin: 0 auto; - } + .el-tag { + margin-right: 0px; + } + } +} - //文章页textarea修改样式 - .article-textarea { - textarea { - padding-right: 40px; - resize: none; - border: none; - border-radius: 0px; - border-bottom: 1px solid #bfcbd9; - } - } +//暂时性解决dialog 问题 https://github.com/ElemeFE/element/issues/2461 +.el-dialog { + transform: none; + left: 0; + position: relative; + margin: 0 auto; +} - //element ui upload - .upload-container { - .el-upload { - width: 100%; - .el-upload-dragger { - width: 100%; - height: 200px; - } - } - } +//文章页textarea修改样式 +.article-textarea { + textarea { + padding-right: 40px; + resize: none; + border: none; + border-radius: 0px; + border-bottom: 1px solid #bfcbd9; + } +} + +//element ui upload +.upload-container { + .el-upload { + width: 100%; + + .el-upload-dragger { + width: 100%; + height: 200px; + } + } +} //dropdown - .el-dropdown-menu{ - a{ +.el-dropdown-menu { + a { display: block } } diff --git a/src/styles/index.scss b/src/styles/index.scss index b6fd924e..93f2157e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -22,7 +22,7 @@ html { box-sizing: border-box; } -#app{ +#app { height: 100%; } @@ -53,9 +53,9 @@ a:hover { text-decoration: none; } -div:focus{ +div:focus { outline: none; - } +} .fr { float: right; @@ -104,23 +104,26 @@ 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); } } } -.warn-content{ - background: rgba(66,185,131,.1); +.warn-content { + background: rgba(66, 185, 131, .1); border-radius: 2px; padding: 16px; padding: 1rem; line-height: 1.6rem; word-spacing: .05rem; - a{ + + 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; diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss index 822ab92a..06fa0612 100644 --- a/src/styles/mixin.scss +++ b/src/styles/mixin.scss @@ -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; diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 2de9fd91..723f9a12 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -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; + overflow-x: hidden !important; + .el-scrollbar__view { height: 100%; } } - .el-scrollbar__bar.is-vertical{ + + .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; + + .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; @@ -124,9 +150,9 @@ } } -.el-menu--vertical{ - & >.el-menu{ - .svg-icon{ +.el-menu--vertical { + &>.el-menu { + .svg-icon { margin-right: 16px; } } diff --git a/src/styles/transition.scss b/src/styles/transition.scss index 04e16279..ab68317d 100644 --- a/src/styles/transition.scss +++ b/src/styles/transition.scss @@ -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; } - diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 1af649c4..09c3e9b0 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -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;