style: refactor styles

This commit is contained in:
Pan 2017-10-24 14:49:29 +08:00
parent cddace507d
commit a8459fa572
5 changed files with 58 additions and 124 deletions

View File

@ -11,3 +11,32 @@
</a> </a>
</template> </template>
<style scoped>
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0)
}
20%,
60% {
transform: rotate(-25deg)
}
40%,
80% {
transform: rotate(10deg)
}
}
@media (max-width:500px) {
.github-corner:hover .octo-arm {
animation: none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
</style>

View File

@ -20,3 +20,13 @@ export default {
} }
} }
</script> </script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>

View File

@ -79,7 +79,6 @@ export default {
<style> <style>
.simplemde-container .CodeMirror { .simplemde-container .CodeMirror {
/*height: 150px;*/
min-height: 150px; min-height: 150px;
} }
@ -109,6 +108,11 @@ export default {
font-weight: bold; font-weight: bold;
color: #E61E1E; color: #E61E1E;
} }
.simplemde-container .editor-toolbar.fullscreen,
.simplemde-container .CodeMirror-fullscreen {
z-index: 1003;
}
</style> </style>

View File

@ -1,22 +1,4 @@
//覆盖一些element-ui样式 //覆盖一些element-ui样式
.block-checkbox {
display: block;
}
.operation-container {
.cell {
padding: 10px !important;
}
.el-button {
&:nth-child(3) {
margin-top: 10px;
margin-left: 0px;
}
&:nth-child(4) {
margin-top: 10px;
}
}
}
.el-upload { .el-upload {
input[type="file"] { input[type="file"] {

View File

@ -2,6 +2,7 @@
@import './btn.scss'; @import './btn.scss';
@import './element-ui.scss'; @import './element-ui.scss';
@import './sidebar.scss'; @import './sidebar.scss';
body { body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -72,6 +73,17 @@ a:hover {
display: block; display: block;
} }
.clearfix {
&:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
}
code { code {
background: #eef1f6; background: #eef1f6;
padding: 15px 10px; padding: 15px 10px;
@ -87,9 +99,10 @@ code {
} }
} }
//globl transition css
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: all .2s ease transition: opacity 0.28s;
} }
.fade-enter, .fade-enter,
@ -119,14 +132,6 @@ code {
text-align: center text-align: center
} }
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.sub-navbar { .sub-navbar {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
@ -157,57 +162,6 @@ code {
} }
} }
.publishedTag,
.draftTag,
.deletedTag {
color: #fff;
background-color: $panGreen;
line-height: 1;
text-align: center;
margin: 0;
padding: 8px 12px;
font-size: 14px;
border-radius: 4px;
position: absolute;
left: 20px;
top: 10px;
}
.draftTag {
background-color: $yellow;
}
.deletedTag {
background-color: $red;
}
.input-label {
font-size: 14px;
color: #48576a;
line-height: 1;
padding: 11px 5px 11px 0;
}
.clearfix {
&:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
}
.no-marginLeft {
.el-checkbox {
margin: 0 20px 15px 0;
}
.el-checkbox+.el-checkbox {
margin-left: 0px;
}
}
.filter-container { .filter-container {
padding-bottom: 10px; padding-bottom: 10px;
.filter-item { .filter-item {
@ -225,48 +179,3 @@ code {
.multiselect--active { .multiselect--active {
z-index: 1000 !important; z-index: 1000 !important;
} }
//refine simplemde
.simplemde-container {
.editor-toolbar.fullscreen,
.CodeMirror-fullscreen {
z-index: 1003;
}
}
//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
.el-dialog {
transform: none;
left: 0;
position: relative;
margin: 0 auto;
}
//github-corner
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0)
}
20%,
60% {
transform: rotate(-25deg)
}
40%,
80% {
transform: rotate(10deg)
}
}
@media (max-width:500px) {
.github-corner:hover .octo-arm {
animation: none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}