Commit 55e5cab4369356b0ad731913556c87807d306ff8
1 parent
74b6a00d
补充漏传文件
Showing
6 changed files
with
430 additions
and
0 deletions
src/styles/element-ui.scss
0 → 100644
| 1 | +// cover some element-ui styles | ||
| 2 | + | ||
| 3 | +.el-breadcrumb__inner, | ||
| 4 | +.el-breadcrumb__inner a { | ||
| 5 | + font-weight: 400 !important; | ||
| 6 | +} | ||
| 7 | + | ||
| 8 | +.el-upload { | ||
| 9 | + input[type="file"] { | ||
| 10 | + display: none !important; | ||
| 11 | + } | ||
| 12 | +} | ||
| 13 | + | ||
| 14 | +.el-upload__input { | ||
| 15 | + display: none; | ||
| 16 | +} | ||
| 17 | + | ||
| 18 | + | ||
| 19 | +// to fixed https://github.com/ElemeFE/element/issues/2461 | ||
| 20 | +.el-dialog { | ||
| 21 | + transform: none; | ||
| 22 | + left: 0; | ||
| 23 | + position: relative; | ||
| 24 | + margin: 0 auto; | ||
| 25 | +} | ||
| 26 | + | ||
| 27 | +// refine element ui upload | ||
| 28 | +.upload-container { | ||
| 29 | + .el-upload { | ||
| 30 | + width: 100%; | ||
| 31 | + | ||
| 32 | + .el-upload-dragger { | ||
| 33 | + width: 100%; | ||
| 34 | + height: 200px; | ||
| 35 | + } | ||
| 36 | + } | ||
| 37 | +} | ||
| 38 | + | ||
| 39 | +// dropdown | ||
| 40 | +.el-dropdown-menu { | ||
| 41 | + a { | ||
| 42 | + display: block | ||
| 43 | + } | ||
| 44 | +} | ||
| 45 | + | ||
| 46 | +// to fix el-date-picker css style | ||
| 47 | +.el-range-separator { | ||
| 48 | + box-sizing: content-box; | ||
| 49 | +} |
src/styles/index.scss
0 → 100644
| 1 | +@import './variables.scss'; | ||
| 2 | +@import './mixin.scss'; | ||
| 3 | +@import './transition.scss'; | ||
| 4 | +@import './element-ui.scss'; | ||
| 5 | +@import './sidebar.scss'; | ||
| 6 | + | ||
| 7 | +body { | ||
| 8 | + height: 100%; | ||
| 9 | + -moz-osx-font-smoothing: grayscale; | ||
| 10 | + -webkit-font-smoothing: antialiased; | ||
| 11 | + text-rendering: optimizeLegibility; | ||
| 12 | + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; | ||
| 13 | +} | ||
| 14 | + | ||
| 15 | +label { | ||
| 16 | + font-weight: 700; | ||
| 17 | +} | ||
| 18 | + | ||
| 19 | +html { | ||
| 20 | + height: 100%; | ||
| 21 | + box-sizing: border-box; | ||
| 22 | +} | ||
| 23 | + | ||
| 24 | +#app { | ||
| 25 | + height: 100%; | ||
| 26 | +} | ||
| 27 | + | ||
| 28 | +*, | ||
| 29 | +*:before, | ||
| 30 | +*:after { | ||
| 31 | + box-sizing: inherit; | ||
| 32 | +} | ||
| 33 | + | ||
| 34 | +a:focus, | ||
| 35 | +a:active { | ||
| 36 | + outline: none; | ||
| 37 | +} | ||
| 38 | + | ||
| 39 | +a, | ||
| 40 | +a:focus, | ||
| 41 | +a:hover { | ||
| 42 | + cursor: pointer; | ||
| 43 | + color: inherit; | ||
| 44 | + text-decoration: none; | ||
| 45 | +} | ||
| 46 | + | ||
| 47 | +div:focus { | ||
| 48 | + outline: none; | ||
| 49 | +} | ||
| 50 | + | ||
| 51 | +.clearfix { | ||
| 52 | + &:after { | ||
| 53 | + visibility: hidden; | ||
| 54 | + display: block; | ||
| 55 | + font-size: 0; | ||
| 56 | + content: " "; | ||
| 57 | + clear: both; | ||
| 58 | + height: 0; | ||
| 59 | + } | ||
| 60 | +} | ||
| 61 | + | ||
| 62 | +// main-container global css | ||
| 63 | +.app-container { | ||
| 64 | + padding: 20px; | ||
| 65 | +} |
src/styles/mixin.scss
0 → 100644
| 1 | +@mixin clearfix { | ||
| 2 | + &:after { | ||
| 3 | + content: ""; | ||
| 4 | + display: table; | ||
| 5 | + clear: both; | ||
| 6 | + } | ||
| 7 | +} | ||
| 8 | + | ||
| 9 | +@mixin scrollBar { | ||
| 10 | + &::-webkit-scrollbar-track-piece { | ||
| 11 | + background: #d3dce6; | ||
| 12 | + } | ||
| 13 | + | ||
| 14 | + &::-webkit-scrollbar { | ||
| 15 | + width: 6px; | ||
| 16 | + } | ||
| 17 | + | ||
| 18 | + &::-webkit-scrollbar-thumb { | ||
| 19 | + background: #99a9bf; | ||
| 20 | + border-radius: 20px; | ||
| 21 | + } | ||
| 22 | +} | ||
| 23 | + | ||
| 24 | +@mixin relative { | ||
| 25 | + position: relative; | ||
| 26 | + width: 100%; | ||
| 27 | + height: 100%; | ||
| 28 | +} |
src/styles/sidebar.scss
0 → 100644
| 1 | +#app { | ||
| 2 | + .main-container { | ||
| 3 | + min-height: 100%; | ||
| 4 | + transition: margin-left 0.28s; | ||
| 5 | + margin-left: $sideBarWidth; | ||
| 6 | + position: relative; | ||
| 7 | + } | ||
| 8 | + | ||
| 9 | + .sidebar-container { | ||
| 10 | + transition: width 0.28s; | ||
| 11 | + width: $sideBarWidth !important; | ||
| 12 | + background-color: $menuBg; | ||
| 13 | + height: 100%; | ||
| 14 | + position: fixed; | ||
| 15 | + font-size: 0px; | ||
| 16 | + top: 0; | ||
| 17 | + bottom: 0; | ||
| 18 | + left: 0; | ||
| 19 | + z-index: 1001; | ||
| 20 | + overflow: hidden; | ||
| 21 | + | ||
| 22 | + // reset element-ui css | ||
| 23 | + .horizontal-collapse-transition { | ||
| 24 | + transition: 0s width ease-in-out, 0s padding-left ease-in-out, | ||
| 25 | + 0s padding-right ease-in-out; | ||
| 26 | + } | ||
| 27 | + | ||
| 28 | + .scrollbar-wrapper { | ||
| 29 | + overflow-x: hidden !important; | ||
| 30 | + } | ||
| 31 | + | ||
| 32 | + .el-scrollbar__bar.is-vertical { | ||
| 33 | + right: 0px; | ||
| 34 | + } | ||
| 35 | + | ||
| 36 | + .el-scrollbar { | ||
| 37 | + height: 100%; | ||
| 38 | + } | ||
| 39 | + | ||
| 40 | + &.has-logo { | ||
| 41 | + .el-scrollbar { | ||
| 42 | + height: calc(100% - 50px); | ||
| 43 | + } | ||
| 44 | + } | ||
| 45 | + | ||
| 46 | + .is-horizontal { | ||
| 47 | + display: none; | ||
| 48 | + } | ||
| 49 | + | ||
| 50 | + a { | ||
| 51 | + display: inline-block; | ||
| 52 | + width: 100%; | ||
| 53 | + overflow: hidden; | ||
| 54 | + } | ||
| 55 | + | ||
| 56 | + .svg-icon { | ||
| 57 | + // margin-right: 16px; | ||
| 58 | + font-size: 18px; | ||
| 59 | + } | ||
| 60 | + | ||
| 61 | + .el-menu { | ||
| 62 | + border: none; | ||
| 63 | + height: 100%; | ||
| 64 | + width: 100% !important; | ||
| 65 | + } | ||
| 66 | + | ||
| 67 | + // menu hover | ||
| 68 | + .submenu-title-noDropdown, | ||
| 69 | + .el-submenu__title { | ||
| 70 | + &:hover { | ||
| 71 | + background-color: $menuHover !important; | ||
| 72 | + } | ||
| 73 | + } | ||
| 74 | + | ||
| 75 | + .is-active > .el-submenu__title { | ||
| 76 | + color: $subMenuActiveText !important; | ||
| 77 | + } | ||
| 78 | + | ||
| 79 | + & .nest-menu .el-submenu > .el-submenu__title, | ||
| 80 | + & .el-submenu .el-menu-item { | ||
| 81 | + min-width: $sideBarWidth !important; | ||
| 82 | + background-color: $subMenuBg !important; | ||
| 83 | + | ||
| 84 | + &:hover { | ||
| 85 | + background-color: $subMenuHover !important; | ||
| 86 | + } | ||
| 87 | + } | ||
| 88 | + } | ||
| 89 | + | ||
| 90 | + .hideSidebar { | ||
| 91 | + .sidebar-container { | ||
| 92 | + width: 54px !important; | ||
| 93 | + } | ||
| 94 | + | ||
| 95 | + .main-container { | ||
| 96 | + margin-left: 54px; | ||
| 97 | + } | ||
| 98 | + | ||
| 99 | + .submenu-title-noDropdown { | ||
| 100 | + padding: 0 !important; | ||
| 101 | + position: relative; | ||
| 102 | + | ||
| 103 | + .el-tooltip { | ||
| 104 | + padding: 0 !important; | ||
| 105 | + | ||
| 106 | + [class^="el-icon-"] { | ||
| 107 | + margin-left: 20px; | ||
| 108 | + } | ||
| 109 | + .svg-icon { | ||
| 110 | + margin-left: 20px; | ||
| 111 | + } | ||
| 112 | + } | ||
| 113 | + } | ||
| 114 | + | ||
| 115 | + .el-submenu { | ||
| 116 | + overflow: hidden; | ||
| 117 | + | ||
| 118 | + & > .el-submenu__title { | ||
| 119 | + padding: 0 !important; | ||
| 120 | + | ||
| 121 | + [class^="el-icon-"] { | ||
| 122 | + margin-left: 20px; | ||
| 123 | + } | ||
| 124 | + .svg-icon { | ||
| 125 | + margin-left: 20px; | ||
| 126 | + } | ||
| 127 | + | ||
| 128 | + .el-submenu__icon-arrow { | ||
| 129 | + display: none; | ||
| 130 | + } | ||
| 131 | + } | ||
| 132 | + } | ||
| 133 | + | ||
| 134 | + .el-menu--collapse { | ||
| 135 | + .el-submenu { | ||
| 136 | + & > .el-submenu__title { | ||
| 137 | + & > span { | ||
| 138 | + height: 0; | ||
| 139 | + width: 0; | ||
| 140 | + overflow: hidden; | ||
| 141 | + visibility: hidden; | ||
| 142 | + display: inline-block; | ||
| 143 | + } | ||
| 144 | + } | ||
| 145 | + } | ||
| 146 | + } | ||
| 147 | + } | ||
| 148 | + | ||
| 149 | + .el-menu--collapse .el-menu .el-submenu { | ||
| 150 | + min-width: $sideBarWidth !important; | ||
| 151 | + } | ||
| 152 | + | ||
| 153 | + // mobile responsive | ||
| 154 | + .mobile { | ||
| 155 | + .main-container { | ||
| 156 | + margin-left: 0px; | ||
| 157 | + } | ||
| 158 | + | ||
| 159 | + .sidebar-container { | ||
| 160 | + transition: transform 0.28s; | ||
| 161 | + width: $sideBarWidth !important; | ||
| 162 | + } | ||
| 163 | + | ||
| 164 | + &.hideSidebar { | ||
| 165 | + .sidebar-container { | ||
| 166 | + pointer-events: none; | ||
| 167 | + transition-duration: 0.3s; | ||
| 168 | + transform: translate3d(-$sideBarWidth, 0, 0); | ||
| 169 | + } | ||
| 170 | + } | ||
| 171 | + } | ||
| 172 | + | ||
| 173 | + .withoutAnimation { | ||
| 174 | + .main-container, | ||
| 175 | + .sidebar-container { | ||
| 176 | + transition: none; | ||
| 177 | + } | ||
| 178 | + } | ||
| 179 | +} | ||
| 180 | + | ||
| 181 | +// when menu collapsed | ||
| 182 | +.el-menu--vertical { | ||
| 183 | + & > .el-menu { | ||
| 184 | + .svg-icon { | ||
| 185 | + margin-right: 16px; | ||
| 186 | + } | ||
| 187 | + } | ||
| 188 | + | ||
| 189 | + .nest-menu .el-submenu > .el-submenu__title, | ||
| 190 | + .el-menu-item { | ||
| 191 | + &:hover { | ||
| 192 | + // you can use $subMenuHover | ||
| 193 | + background-color: $menuHover !important; | ||
| 194 | + } | ||
| 195 | + } | ||
| 196 | + | ||
| 197 | + // the scroll bar appears when the subMenu is too long | ||
| 198 | + > .el-menu--popup { | ||
| 199 | + max-height: 100vh; | ||
| 200 | + overflow-y: auto; | ||
| 201 | + | ||
| 202 | + &::-webkit-scrollbar-track-piece { | ||
| 203 | + background: #d3dce6; | ||
| 204 | + } | ||
| 205 | + | ||
| 206 | + &::-webkit-scrollbar { | ||
| 207 | + width: 6px; | ||
| 208 | + } | ||
| 209 | + | ||
| 210 | + &::-webkit-scrollbar-thumb { | ||
| 211 | + background: #99a9bf; | ||
| 212 | + border-radius: 20px; | ||
| 213 | + } | ||
| 214 | + } | ||
| 215 | +} |
src/styles/transition.scss
0 → 100644
| 1 | +// global transition css | ||
| 2 | + | ||
| 3 | +/* fade */ | ||
| 4 | +.fade-enter-active, | ||
| 5 | +.fade-leave-active { | ||
| 6 | + transition: opacity 0.28s; | ||
| 7 | +} | ||
| 8 | + | ||
| 9 | +.fade-enter, | ||
| 10 | +.fade-leave-active { | ||
| 11 | + opacity: 0; | ||
| 12 | +} | ||
| 13 | + | ||
| 14 | +/* fade-transform */ | ||
| 15 | +.fade-transform-leave-active, | ||
| 16 | +.fade-transform-enter-active { | ||
| 17 | + transition: all .5s; | ||
| 18 | +} | ||
| 19 | + | ||
| 20 | +.fade-transform-enter { | ||
| 21 | + opacity: 0; | ||
| 22 | + transform: translateX(-30px); | ||
| 23 | +} | ||
| 24 | + | ||
| 25 | +.fade-transform-leave-to { | ||
| 26 | + opacity: 0; | ||
| 27 | + transform: translateX(30px); | ||
| 28 | +} | ||
| 29 | + | ||
| 30 | +/* breadcrumb transition */ | ||
| 31 | +.breadcrumb-enter-active, | ||
| 32 | +.breadcrumb-leave-active { | ||
| 33 | + transition: all .5s; | ||
| 34 | +} | ||
| 35 | + | ||
| 36 | +.breadcrumb-enter, | ||
| 37 | +.breadcrumb-leave-active { | ||
| 38 | + opacity: 0; | ||
| 39 | + transform: translateX(20px); | ||
| 40 | +} | ||
| 41 | + | ||
| 42 | +.breadcrumb-move { | ||
| 43 | + transition: all .5s; | ||
| 44 | +} | ||
| 45 | + | ||
| 46 | +.breadcrumb-leave-active { | ||
| 47 | + position: absolute; | ||
| 48 | +} |
src/styles/variables.scss
0 → 100644
| 1 | +// sidebar | ||
| 2 | +$menuText:#bfcbd9; | ||
| 3 | +$menuActiveText:#409EFF; | ||
| 4 | +$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951 | ||
| 5 | + | ||
| 6 | +$menuBg:#304156; | ||
| 7 | +$menuHover:#263445; | ||
| 8 | + | ||
| 9 | +$subMenuBg:#1f2d3d; | ||
| 10 | +$subMenuHover:#001528; | ||
| 11 | + | ||
| 12 | +$sideBarWidth: 210px; | ||
| 13 | + | ||
| 14 | +// the :export directive is the magic sauce for webpack | ||
| 15 | +// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass | ||
| 16 | +:export { | ||
| 17 | + menuText: $menuText; | ||
| 18 | + menuActiveText: $menuActiveText; | ||
| 19 | + subMenuActiveText: $subMenuActiveText; | ||
| 20 | + menuBg: $menuBg; | ||
| 21 | + menuHover: $menuHover; | ||
| 22 | + subMenuBg: $subMenuBg; | ||
| 23 | + subMenuHover: $subMenuHover; | ||
| 24 | + sideBarWidth: $sideBarWidth; | ||
| 25 | +} |