From c328ee3b5a41685accece5c57b4c82fb4530b1fd Mon Sep 17 00:00:00 2001 From: mwx816443 Date: Sat, 6 Jun 2020 09:53:55 +0800 Subject: [PATCH] update css scss --- src/components/BackToTop/index.vue | 6 +- src/components/DndList/index.vue | 18 +- src/components/DragSelect/index.vue | 6 +- src/components/Dropzone/index.vue | 97 +- src/components/GithubCorner/index.vue | 17 +- src/components/ImageCropper/index.vue | 1567 +++++++---------- src/components/JsonEditor/index.vue | 9 +- src/components/Kanban/index.vue | 2 +- src/components/MDinput/index.vue | 40 +- src/components/Pagination/index.vue | 1 + src/components/PanThumb/index.vue | 4 +- src/components/RightPanel/index.vue | 11 +- src/components/Screenfull/index.vue | 2 +- src/components/Share/DropdownMenu.vue | 13 +- src/components/SvgIcon/index.vue | 2 +- src/components/TextHoverEffect/Mallki.vue | 2 +- .../Tinymce/components/EditorImage.vue | 1 + src/components/Tinymce/index.vue | 5 + src/components/Upload/SingleImage.vue | 102 +- src/components/Upload/SingleImage2.vue | 15 +- src/components/Upload/SingleImage3.vue | 18 +- src/components/UploadExcel/index.vue | 7 +- src/directive/waves/waves.css | 44 +- src/layout/components/Navbar.vue | 14 +- src/layout/components/Settings/index.vue | 6 +- src/layout/components/Sidebar/Logo.vue | 2 +- src/layout/components/TagsView/ScrollPane.vue | 4 +- src/layout/components/TagsView/index.vue | 20 +- src/layout/index.vue | 6 +- src/styles/btn.scss | 33 +- src/styles/element-ui.scss | 8 +- src/styles/element-variables.scss | 4 +- src/styles/index.scss | 14 +- src/styles/mixin.scss | 4 +- src/styles/sidebar.scss | 12 +- src/styles/transition.scss | 6 +- src/styles/variables.scss | 30 +- src/views/charts/keyboard.vue | 2 +- src/views/charts/line.vue | 2 +- src/views/charts/mix-chart.vue | 2 +- src/views/clipboard/index.vue | 4 +- src/views/components-demo/avatar-upload.vue | 2 +- src/views/components-demo/count-to.vue | 31 +- src/views/components-demo/drag-kanban.vue | 5 +- src/views/components-demo/drag-select.vue | 6 +- src/views/components-demo/json-editor.vue | 2 +- src/views/components-demo/markdown.vue | 7 +- src/views/components-demo/mixin.vue | 15 +- src/views/components-demo/split-pane.vue | 8 +- src/views/components-demo/sticky.vue | 2 +- src/views/components-demo/tinymce.vue | 2 +- .../dashboard/admin/components/BoxCard.vue | 38 +- .../dashboard/admin/components/PanelGroup.vue | 10 +- .../admin/components/TodoList/index.scss | 68 +- src/views/dashboard/admin/index.vue | 10 +- src/views/dashboard/editor/index.vue | 11 +- src/views/error-page/401.vue | 10 +- src/views/error-page/404.vue | 30 +- .../example/components/ArticleDetail.vue | 10 +- .../example/components/Dropdown/SourceUrl.vue | 4 +- src/views/example/list.vue | 3 +- .../excel/components/AutoWidthOption.vue | 2 +- src/views/excel/components/BookTypeOption.vue | 4 +- src/views/excel/components/FilenameOption.vue | 6 +- src/views/excel/export-excel.vue | 4 +- src/views/excel/merge-header.vue | 2 +- src/views/excel/select-excel.vue | 6 +- src/views/excel/upload-excel.vue | 2 +- src/views/login/components/SocialSignin.vue | 7 +- src/views/login/index.vue | 24 +- src/views/nested/menu1/index.vue | 2 +- src/views/nested/menu1/menu1-1/index.vue | 2 +- src/views/nested/menu1/menu1-2/index.vue | 2 +- .../nested/menu1/menu1-2/menu1-2-1/index.vue | 2 +- .../nested/menu1/menu1-2/menu1-2-2/index.vue | 2 +- src/views/nested/menu1/menu1-3/index.vue | 2 +- src/views/nested/menu2/index.vue | 2 +- src/views/pdf/download.vue | 28 +- src/views/pdf/index.vue | 2 +- .../permission/components/SwitchRoles.vue | 2 +- src/views/permission/directive.vue | 8 +- src/views/permission/role.vue | 5 +- src/views/profile/components/Activity.vue | 6 +- src/views/profile/components/UserCard.vue | 2 +- src/views/tab/components/TabPane.vue | 2 +- src/views/tab/index.vue | 4 +- src/views/table/complex-table.vue | 16 +- src/views/table/drag-table.vue | 20 +- .../dynamic-table/components/FixedThead.vue | 2 +- .../dynamic-table/components/UnfixedThead.vue | 2 +- src/views/table/dynamic-table/index.vue | 4 +- src/views/table/inline-edit-table.vue | 3 +- src/views/theme/index.vue | 5 +- src/views/zip/index.vue | 4 +- 94 files changed, 1277 insertions(+), 1345 deletions(-) diff --git a/src/components/BackToTop/index.vue b/src/components/BackToTop/index.vue index 36522f4a..a2327a31 100644 --- a/src/components/BackToTop/index.vue +++ b/src/components/BackToTop/index.vue @@ -1,7 +1,7 @@ @@ -96,12 +96,12 @@ export default { .fade-enter-active, .fade-leave-active { - transition: opacity .5s; + transition: opacity 0.5s; } .fade-enter, .fade-leave-to { - opacity: 0 + opacity: 0; } .back-to-ceiling .Icon { diff --git a/src/components/DndList/index.vue b/src/components/DndList/index.vue index 23ca006e..67e9b830 100644 --- a/src/components/DndList/index.vue +++ b/src/components/DndList/index.vue @@ -7,9 +7,9 @@
{{ element.id }}[{{ element.author }}] {{ element.title }}
-
- - +
+ +
@@ -108,17 +108,21 @@ export default { .dndList { background: #fff; padding-bottom: 40px; - &:after { - content: ""; + + &::after { + content: ''; display: table; clear: both; } + .dndList-list { float: left; padding-bottom: 30px; + &:first-of-type { margin-right: 2%; } + .dragArea { margin-top: 15px; min-height: 50px; @@ -152,11 +156,11 @@ export default { } .list-complete-item.sortable-chosen { - background: #4AB7BD; + background: #4ab7bd; } .list-complete-item.sortable-ghost { - background: #30B08F; + background: #30b08f; } .list-complete-enter, diff --git a/src/components/DragSelect/index.vue b/src/components/DragSelect/index.vue index 28256a8b..0c52094f 100644 --- a/src/components/DragSelect/index.vue +++ b/src/components/DragSelect/index.vue @@ -50,9 +50,9 @@ export default { diff --git a/src/components/GithubCorner/index.vue b/src/components/GithubCorner/index.vue index 970faaf1..54445fb1 100644 --- a/src/components/GithubCorner/index.vue +++ b/src/components/GithubCorner/index.vue @@ -4,7 +4,7 @@ width="80" height="80" viewBox="0 0 250 250" - style="fill:#40c9c6; color:#fff;" + style="fill: #40c9c6; color: #fff;" aria-hidden="true" > @@ -25,30 +25,33 @@ diff --git a/src/components/ImageCropper/index.vue b/src/components/ImageCropper/index.vue index 13ae9a11..9f8596e9 100644 --- a/src/components/ImageCropper/index.vue +++ b/src/components/ImageCropper/index.vue @@ -819,46 +819,31 @@ export default { diff --git a/src/components/JsonEditor/index.vue b/src/components/JsonEditor/index.vue index 07b282e4..e7dc196d 100644 --- a/src/components/JsonEditor/index.vue +++ b/src/components/JsonEditor/index.vue @@ -55,18 +55,21 @@ export default { diff --git a/src/components/Kanban/index.vue b/src/components/Kanban/index.vue index 82f7dd7e..6735d89d 100644 --- a/src/components/Kanban/index.vue +++ b/src/components/Kanban/index.vue @@ -91,7 +91,7 @@ export default { line-height: 54px; padding: 5px 10px; box-sizing: border-box; - box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); } } } diff --git a/src/components/MDinput/index.vue b/src/components/MDinput/index.vue index c59ea34a..4f83c659 100644 --- a/src/components/MDinput/index.vue +++ b/src/components/MDinput/index.vue @@ -208,14 +208,14 @@ export default { // Utils $spacer: 12px; $transition: 0.2s ease all; - $index: 0px; + $index: 0; $index-has-icon: 30px; // Theme: $color-white: white; - $color-grey: #9E9E9E; - $color-grey-light: #E0E0E0; - $color-blue: #2196F3; - $color-red: #F44336; + $color-grey: #9e9e9e; + $color-grey-light: #e0e0e0; + $color-blue: #2196f3; + $color-red: #f44336; $color-black: black; // Base clases: %base-bar-pseudo { @@ -239,9 +239,11 @@ export default { .material-input__component { margin-top: 36px; position: relative; + * { box-sizing: border-box; } + .iconClass { .material-input__icon { position: absolute; @@ -255,13 +257,16 @@ export default { font-weight: $font-weight-normal; pointer-events: none; } + .material-label { left: $index-has-icon; } + .material-input { text-indent: $index-has-icon; } } + .material-input { font-size: $font-size-base; padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2; @@ -270,12 +275,14 @@ export default { border: none; line-height: 1; border-radius: 0; + &:focus { outline: none; border: none; border-bottom: 1px solid transparent; // fixes the height issue } } + .material-label { font-weight: $font-weight-normal; position: absolute; @@ -285,15 +292,18 @@ export default { transition: $transition; font-size: $font-size-small; } + .material-input-bar { position: relative; display: block; width: 100%; - &:before { + + &::before { @extend %base-bar-pseudo; left: 50%; } - &:after { + + &::after { @extend %base-bar-pseudo; right: 50%; } @@ -313,8 +323,8 @@ export default { // Active state: &.material--active { .material-input-bar { - &:before, - &:after { + &::before, + &::after { width: 50%; } } @@ -323,18 +333,21 @@ export default { .material-input__component { background: $color-white; + .material-input { background: none; color: $color-black; text-indent: $index; border-bottom: 1px solid $color-grey-light; } + .material-label { color: $color-grey; } + .material-input-bar { - &:before, - &:after { + &::before, + &::after { background: $color-blue; } } @@ -349,9 +362,10 @@ export default { &.material--active .material-label { color: $color-red; } + .material-input-bar { - &:before, - &:after { + &::before, + &::after { background: transparent; } } diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue index c815e132..0fc96d0e 100644 --- a/src/components/Pagination/index.vue +++ b/src/components/Pagination/index.vue @@ -95,6 +95,7 @@ export default { background: #fff; padding: 32px 16px; } + .pagination-container.hidden { display: none; } diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue index 1bcf4170..5dc50f54 100644 --- a/src/components/PanThumb/index.vue +++ b/src/components/PanThumb/index.vue @@ -91,7 +91,7 @@ export default { letter-spacing: 2px; font-size: 18px; margin: 0 60px; - padding: 22px 0 0 0; + padding: 22px 0 0; height: 85px; font-family: 'Open Sans', Arial, sans-serif; text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3); @@ -137,6 +137,6 @@ export default { .pan-item:hover .pan-info p a { opacity: 1; - transform: translateX(0px) rotate(0deg); + transform: translateX(0) rotate(0deg); } diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue index 55e8c1e5..fe057dcb 100644 --- a/src/components/RightPanel/index.vue +++ b/src/components/RightPanel/index.vue @@ -90,8 +90,8 @@ export default { top: 0; left: 0; opacity: 0; - transition: opacity .3s cubic-bezier(.7, .3, .1, 1); - background: rgba(0, 0, 0, .2); + transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1); + background: rgba(0, 0, 0, 0.2); z-index: -1; } @@ -102,15 +102,15 @@ export default { position: fixed; top: 0; right: 0; - box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05); - transition: all .25s cubic-bezier(.7, .3, .1, 1); + box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05); + transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1); transform: translate(100%); background: #fff; z-index: 40000; } .show { - transition: all .3s cubic-bezier(.7, .3, .1, 1); + transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1); .rightPanel-background { z-index: 20000; @@ -137,6 +137,7 @@ export default { cursor: pointer; color: #fff; line-height: 48px; + i { font-size: 24px; line-height: 48px; diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue index 260c90de..61d0859e 100644 --- a/src/components/Screenfull/index.vue +++ b/src/components/Screenfull/index.vue @@ -52,7 +52,7 @@ export default { .screenfull-svg { display: inline-block; cursor: pointer; - fill: #5a5e66;; + fill: #5a5e66; width: 20px; height: 20px; vertical-align: 10px; diff --git a/src/components/Share/DropdownMenu.vue b/src/components/Share/DropdownMenu.vue index d194a517..2efd5325 100644 --- a/src/components/Share/DropdownMenu.vue +++ b/src/components/Share/DropdownMenu.vue @@ -39,12 +39,14 @@ export default { diff --git a/src/components/TextHoverEffect/Mallki.vue b/src/components/TextHoverEffect/Mallki.vue index 5d6d16ca..9de62dd7 100644 --- a/src/components/TextHoverEffect/Mallki.vue +++ b/src/components/TextHoverEffect/Mallki.vue @@ -48,7 +48,7 @@ export default { content: ''; width: 100%; height: 6px; - margin: -3px 0 0 0; + margin: -3px 0 0; background: #3888fa; position: absolute; left: 0; diff --git a/src/components/Tinymce/components/EditorImage.vue b/src/components/Tinymce/components/EditorImage.vue index d4a98e84..60f0c576 100644 --- a/src/components/Tinymce/components/EditorImage.vue +++ b/src/components/Tinymce/components/EditorImage.vue @@ -104,6 +104,7 @@ export default { diff --git a/src/components/Upload/SingleImage2.vue b/src/components/Upload/SingleImage2.vue index 07637a9e..4b81971f 100644 --- a/src/components/Upload/SingleImage2.vue +++ b/src/components/Upload/SingleImage2.vue @@ -81,25 +81,30 @@ export default { width: 100%; height: 100%; position: relative; + .image-uploader { height: 100%; } + .image-preview { width: 100%; height: 100%; position: absolute; - left: 0px; - top: 0px; + left: 0; + top: 0; border: 1px dashed #d9d9d9; + .image-preview-wrapper { position: relative; width: 100%; height: 100%; + img { width: 100%; height: 100%; } } + .image-preview-action { position: absolute; width: 100%; @@ -111,15 +116,17 @@ export default { color: #fff; opacity: 0; font-size: 20px; - background-color: rgba(0, 0, 0, .5); - transition: opacity .3s; + background-color: rgba(0, 0, 0, 0.5); + transition: opacity 0.3s; cursor: pointer; text-align: center; line-height: 200px; + .el-icon-delete { font-size: 36px; } } + &:hover { .image-preview-action { opacity: 1; diff --git a/src/components/Upload/SingleImage3.vue b/src/components/Upload/SingleImage3.vue index 6300da4b..c67a80ea 100644 --- a/src/components/Upload/SingleImage3.vue +++ b/src/components/Upload/SingleImage3.vue @@ -86,15 +86,18 @@ export default { diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue index ac0c8d8f..c5560fb0 100644 --- a/src/layout/components/Sidebar/Logo.vue +++ b/src/layout/components/Sidebar/Logo.vue @@ -75,7 +75,7 @@ export default { &.collapse { .sidebar-logo { - margin-right: 0px; + margin-right: 0; } } } diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue index 34a7e55f..7bb0117d 100644 --- a/src/layout/components/TagsView/ScrollPane.vue +++ b/src/layout/components/TagsView/ScrollPane.vue @@ -82,10 +82,12 @@ export default { position: relative; overflow: hidden; width: 100%; + /deep/ { .el-scrollbar__bar { - bottom: 0px; + bottom: 0; } + .el-scrollbar__wrap { height: 49px; } diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue index d2a56e70..5dc342dd 100644 --- a/src/layout/components/TagsView/index.vue +++ b/src/layout/components/TagsView/index.vue @@ -203,7 +203,8 @@ export default { width: 100%; background: #fff; border-bottom: 1px solid #d8dce5; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04); + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04); + .tags-view-wrapper { .tags-view-item { display: inline-block; @@ -218,16 +219,20 @@ export default { font-size: 12px; margin-left: 5px; margin-top: 4px; + &:first-of-type { margin-left: 15px; } + &:last-of-type { margin-right: 15px; } + &.active { background-color: #42b983; color: #fff; border-color: #42b983; + &::before { content: ''; background: #fff; @@ -241,6 +246,7 @@ export default { } } } + .contextmenu { margin: 0; background: #fff; @@ -252,11 +258,13 @@ export default { font-size: 12px; font-weight: 400; color: #333; - box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3); + box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3); + li { margin: 0; padding: 7px 16px; cursor: pointer; + &:hover { background: #eee; } @@ -275,13 +283,15 @@ export default { vertical-align: 2px; border-radius: 50%; text-align: center; - transition: all .3s cubic-bezier(.645, .045, .355, 1); + transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transform-origin: 100% 50%; - &:before { - transform: scale(.6); + + &::before { + transform: scale(0.6); display: inline-block; vertical-align: -3px; } + &:hover { background-color: #b4bccc; color: #fff; diff --git a/src/layout/index.vue b/src/layout/index.vue index 965bcd1b..78520b73 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -58,8 +58,8 @@ export default { diff --git a/src/views/components-demo/drag-kanban.vue b/src/views/components-demo/drag-kanban.vue index 943be455..37e8875b 100644 --- a/src/views/components-demo/drag-kanban.vue +++ b/src/views/components-demo/drag-kanban.vue @@ -45,17 +45,20 @@ export default { flex-direction: row; align-items: flex-start; } + .kanban { &.todo { .board-column-header { - background: #4A9FF9; + background: #4a9ff9; } } + &.working { .board-column-header { background: #f9944a; } } + &.done { .board-column-header { background: #2ac06d; diff --git a/src/views/components-demo/drag-select.vue b/src/views/components-demo/drag-select.vue index 905ecb94..334b2b56 100644 --- a/src/views/components-demo/drag-select.vue +++ b/src/views/components-demo/drag-select.vue @@ -1,11 +1,11 @@