qbism/qb-admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

tweak

Browse source
This commit is contained in:
Pan 2019-01-11 15:42:53 +08:00
parent 5ea614fe5d
commit c54e99d0a9
7 changed files with 128 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/styles/btn.scss
View file

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

129
src/styles/element-ui.scss
View file

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

20
src/styles/index.scss
View file

@ -22,7 +22,7 @@ html {
box-sizing: border-box; box-sizing: border-box;
} }
#app{ #app {
height: 100%; height: 100%;
} }
@ -53,9 +53,9 @@ a:hover {
text-decoration: none; text-decoration: none;
} }
div:focus{ div:focus {
outline: none; outline: none;
} }
.fr { .fr {
float: right; float: right;
@ -104,23 +104,26 @@ code {
line-height: 36px; line-height: 36px;
font-size: 15px; font-size: 15px;
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
a { a {
color: #337ab7; color: #337ab7;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: rgb(32, 160, 255); color: rgb(32, 160, 255);
} }
} }
} }
.warn-content{ .warn-content {
background: rgba(66,185,131,.1); background: rgba(66, 185, 131, .1);
border-radius: 2px; border-radius: 2px;
padding: 16px; padding: 16px;
padding: 1rem; padding: 1rem;
line-height: 1.6rem; line-height: 1.6rem;
word-spacing: .05rem; word-spacing: .05rem;
a{
a {
color: #42b983; color: #42b983;
font-weight: 600; font-weight: 600;
} }
@ -153,13 +156,16 @@ code {
padding-right: 20px; padding-right: 20px;
transition: 600ms ease position; 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%); 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 { .subtitle {
font-size: 20px; font-size: 20px;
color: #fff; color: #fff;
} }
&.draft { &.draft {
background: #d0d0d0; background: #d0d0d0;
} }
&.deleted { &.deleted {
background: #d0d0d0; background: #d0d0d0;
} }
@ -169,6 +175,7 @@ code {
.link-type:focus { .link-type:focus {
color: #337ab7; color: #337ab7;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: rgb(32, 160, 255); color: rgb(32, 160, 255);
} }
@ -176,6 +183,7 @@ code {
.filter-container { .filter-container {
padding-bottom: 10px; padding-bottom: 10px;
.filter-item { .filter-item {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;

6
src/styles/mixin.scss
View file

@ -10,9 +10,11 @@
&::-webkit-scrollbar-track-piece { &::-webkit-scrollbar-track-piece {
background: #d3dce6; background: #d3dce6;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 6px; width: 6px;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: #99a9bf; background: #99a9bf;
border-radius: 20px; border-radius: 20px;
@ -37,21 +39,25 @@
$transparent-border-style: $width solid transparent; $transparent-border-style: $width solid transparent;
height: 0; height: 0;
width: 0; width: 0;
@if $direction==up { @if $direction==up {
border-bottom: $color-border-style; border-bottom: $color-border-style;
border-left: $transparent-border-style; border-left: $transparent-border-style;
border-right: $transparent-border-style; border-right: $transparent-border-style;
} }
@else if $direction==right { @else if $direction==right {
border-left: $color-border-style; border-left: $color-border-style;
border-top: $transparent-border-style; border-top: $transparent-border-style;
border-bottom: $transparent-border-style; border-bottom: $transparent-border-style;
} }
@else if $direction==down { @else if $direction==down {
border-top: $color-border-style; border-top: $color-border-style;
border-left: $transparent-border-style; border-left: $transparent-border-style;
border-right: $transparent-border-style; border-right: $transparent-border-style;
} }
@else if $direction==left { @else if $direction==left {
border-right: $color-border-style; border-right: $color-border-style;
border-top: $transparent-border-style; border-top: $transparent-border-style;

40
src/styles/sidebar.scss
View file

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

3
src/styles/transition.scss
View file

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

2
src/styles/variables.scss
View file

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