Basix/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) {
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;
}

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

@ -1,59 +1,61 @@
//覆盖一些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 {
.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{
.el-button--mini{
.fixed-width {
.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
.el-dialog {
//暂时性解决dialog 问题 https://github.com/ElemeFE/element/issues/2461
.el-dialog {
transform: none;
left: 0;
position: relative;
margin: 0 auto;
}
}
//文章页textarea修改样式
.article-textarea {
//文章页textarea修改样式
.article-textarea {
textarea {
padding-right: 40px;
resize: none;
@ -61,22 +63,23 @@
border-radius: 0px;
border-bottom: 1px solid #bfcbd9;
}
}
}
//element ui upload
.upload-container {
//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
}
}

20
src/styles/index.scss
View file

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

6
src/styles/mixin.scss
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;

40
src/styles/sidebar.scss
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;
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;
}
}

3
src/styles/transition.scss
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;
}

2
src/styles/variables.scss
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;