tweak

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;
 }
-

src/styles/element-ui.scss

@@ -1,59 +1,61 @@
- //覆盖一些element-ui样式
+//覆盖一些element-ui样式
 
- .el-breadcrumb__inner, .el-breadcrumb__inner a{
+.el-breadcrumb__inner,
-  font-weight: 400!important;
+.el-breadcrumb__inner a {
+  font-weight: 400 !important;
 }
 
- .el-upload {
+.el-upload {
   input[type="file"] {
     display: none !important;
   }
- }
+}
 
- .el-upload__input {
+.el-upload__input {
   display: none;
- }
+}
 
- .cell {
+.cell {
   .el-tag {
     margin-right: 0px;
   }
- }
+}
 
- .small-padding {
+.small-padding {
   .cell {
     padding-left: 5px;
     padding-right: 5px;
   }
- }
+}
 
- .fixed-width{
+.fixed-width {
-  .el-button--mini{
+  .el-button--mini {
     padding: 7px 10px;
     width: 60px;
   }
- }
+}
 
- .status-col {
+.status-col {
   .cell {
     padding: 0 10px;
     text-align: center;
+
     .el-tag {
       margin-right: 0px;
     }
   }
- }
+}
 
- //暂时性解决dialog 问题 https://github.com/ElemeFE/element/issues/2461
+//暂时性解决dialog 问题 https://github.com/ElemeFE/element/issues/2461
- .el-dialog {
+.el-dialog {
   transform: none;
   left: 0;
   position: relative;
   margin: 0 auto;
- }
+}
 
- //文章页textarea修改样式
+//文章页textarea修改样式
- .article-textarea {
+.article-textarea {
   textarea {
     padding-right: 40px;
     resize: none;
@@ -61,22 +63,23 @@
     border-radius: 0px;
     border-bottom: 1px solid #bfcbd9;
   }
- }
+}
 
- //element ui upload
+//element ui upload
- .upload-container {
+.upload-container {
   .el-upload {
     width: 100%;
+
     .el-upload-dragger {
       width: 100%;
       height: 200px;
     }
   }
- }
+}
 
 //dropdown
- .el-dropdown-menu{
+.el-dropdown-menu {
-  a{
+  a {
     display: block
   }
 }

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{
+.warn-content {
-  background: rgba(66,185,131,.1);
+  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;

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;

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--vertical {
-  & >.el-menu{
+  &>.el-menu {
-    .svg-icon{
+    .svg-icon {
       margin-right: 16px;
     }
   }

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;
 }
-

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;