Commit e01b0ac151a26eea3ec9a2ff72b235fd56b6cf43
Merge remote-tracking branch 'origin/wynn'
Showing
8 changed files
with
101 additions
and
41 deletions
Show diff stats
src/components/button/button.vue
| ... | ... | @@ -19,7 +19,7 @@ |
| 19 | 19 | props: { |
| 20 | 20 | type: { |
| 21 | 21 | validator (value) { |
| 22 | - return oneOf(value, ['default', 'primary', 'dashed', 'text', 'info', 'success', 'warning', 'error']); | |
| 22 | + return oneOf(value, ['default', 'primary', 'dashed', 'text', 'info', 'success', 'warning', 'error', 'search', 'confirm', 'cancel', 'reset']); | |
| 23 | 23 | }, |
| 24 | 24 | default: 'default' |
| 25 | 25 | }, | ... | ... |
src/styles/components/button.less
| ... | ... | @@ -93,6 +93,22 @@ |
| 93 | 93 | .btn-circle(@btn-prefix-cls); |
| 94 | 94 | } |
| 95 | 95 | |
| 96 | + &-search { | |
| 97 | + .btn-color(@search-color); | |
| 98 | + } | |
| 99 | + | |
| 100 | + &-confirm { | |
| 101 | + .btn-color(@confirm-color); | |
| 102 | + } | |
| 103 | + | |
| 104 | + &-cancel { | |
| 105 | + .btn-color(@cancel-color); | |
| 106 | + } | |
| 107 | + | |
| 108 | + &-reset { | |
| 109 | + .btn-color(@reset-color); | |
| 110 | + } | |
| 111 | + | |
| 96 | 112 | &:before { |
| 97 | 113 | position: absolute; |
| 98 | 114 | top: -1px; |
| ... | ... | @@ -178,7 +194,41 @@ |
| 178 | 194 | } |
| 179 | 195 | } |
| 180 | 196 | |
| 181 | - &-ghost&-default[disabled], &-ghost&-dashed[disabled], &-ghost&-primary[disabled], &-ghost&-info[disabled], &-ghost&-success[disabled], &-ghost&-warning[disabled], &-ghost&-error[disabled]{ | |
| 197 | + &-search { | |
| 198 | + color: #fff; | |
| 199 | + &:hover{ | |
| 200 | + color: #fff; | |
| 201 | + background: #15bcad; | |
| 202 | + } | |
| 203 | + } | |
| 204 | + | |
| 205 | + &-confirm { | |
| 206 | + color: #fff; | |
| 207 | + &:hover { | |
| 208 | + color: #fff; | |
| 209 | + background: #ff903a; | |
| 210 | + } | |
| 211 | + } | |
| 212 | + | |
| 213 | + &-cancel { | |
| 214 | + color: #333; | |
| 215 | + border-color: @border-color-base; | |
| 216 | + &:hover { | |
| 217 | + color: #ff9a4c; | |
| 218 | + border-color: #ff903a; | |
| 219 | + } | |
| 220 | + } | |
| 221 | + | |
| 222 | + &-reset { | |
| 223 | + color: #333; | |
| 224 | + border-color: @border-color-base; | |
| 225 | + &:hover { | |
| 226 | + color: #15bcad; | |
| 227 | + border-color: #15bcad; | |
| 228 | + } | |
| 229 | + } | |
| 230 | + | |
| 231 | + &-ghost&-default[disabled], &-ghost&-dashed[disabled], &-ghost&-primary[disabled], &-ghost&-info[disabled], &-ghost&-success[disabled], &-ghost&-warning[disabled], &-ghost&-error[disabled], &-ghost&-search[disabled], &-ghost&-confirm[disabled], &-ghost&-cancel[disabled], &-ghost&-reset[disabled]{ | |
| 182 | 232 | background: transparent; |
| 183 | 233 | color: fade(#000, 25%); |
| 184 | 234 | border-color: @btn-disable-border; | ... | ... |
src/styles/components/input.less
src/styles/components/menu.less
| ... | ... | @@ -96,8 +96,8 @@ |
| 96 | 96 | border-bottom: 2px solid transparent; |
| 97 | 97 | color: @text-color; |
| 98 | 98 | &-active, &:hover{ |
| 99 | - color: @primary-color; | |
| 100 | - border-bottom: 2px solid @primary-color; | |
| 99 | + color: @mew-common-color; | |
| 100 | + border-bottom: 2px solid @mew-common-color; | |
| 101 | 101 | } |
| 102 | 102 | } |
| 103 | 103 | |
| ... | ... | @@ -155,7 +155,7 @@ |
| 155 | 155 | |
| 156 | 156 | &:hover{ |
| 157 | 157 | //background: @background-color-select-hover; |
| 158 | - color: @primary-color; | |
| 158 | + color: @mew-common-color; | |
| 159 | 159 | } |
| 160 | 160 | } |
| 161 | 161 | |
| ... | ... | @@ -196,8 +196,8 @@ |
| 196 | 196 | &-light&-vertical &-item{ |
| 197 | 197 | //border-right: 2px solid transparent; |
| 198 | 198 | &-active:not(.@{menu-prefix-cls}-submenu){ |
| 199 | - color: @primary-color; | |
| 200 | - background: ~`colorPalette("@{primary-color}", 1)`; | |
| 199 | + color: @mew-common-color; | |
| 200 | + background: ~`colorPalette("@{mew-common-color}", 1)`; | |
| 201 | 201 | //border-right: 2px solid @primary-color; |
| 202 | 202 | z-index: 2; |
| 203 | 203 | &:after{ |
| ... | ... | @@ -208,7 +208,7 @@ |
| 208 | 208 | top: 0; |
| 209 | 209 | bottom: 0; |
| 210 | 210 | right: 0; |
| 211 | - background: @primary-color; | |
| 211 | + background: @mew-common-color; | |
| 212 | 212 | } |
| 213 | 213 | } |
| 214 | 214 | } |
| ... | ... | @@ -218,33 +218,33 @@ |
| 218 | 218 | &-active:not(.@{menu-prefix-cls}-submenu), |
| 219 | 219 | &-active:not(.@{menu-prefix-cls}-submenu):hover |
| 220 | 220 | { |
| 221 | - background: @menu-dark-active-bg; | |
| 221 | + background: #fff; | |
| 222 | 222 | } |
| 223 | 223 | &:hover{ |
| 224 | - color: #fff; | |
| 224 | + color: @mew-common-color !important; | |
| 225 | 225 | background: @menu-dark-title; |
| 226 | 226 | } |
| 227 | 227 | &-active:not(.@{menu-prefix-cls}-submenu){ |
| 228 | - color: @primary-color; | |
| 228 | + color: @mew-common-color; | |
| 229 | 229 | //border-right: 2px solid @primary-color; |
| 230 | 230 | } |
| 231 | 231 | } |
| 232 | 232 | &-dark&-vertical &-submenu &-item{ |
| 233 | 233 | &:hover{ |
| 234 | - color: #fff; | |
| 234 | + color: @mew-black-color; | |
| 235 | 235 | background: transparent !important; |
| 236 | 236 | } |
| 237 | 237 | &-active,&-active:hover{ |
| 238 | 238 | border-right: none; |
| 239 | - color: #fff; | |
| 240 | - background: @primary-color !important; | |
| 239 | + color: @menu-dark-group-title-color; | |
| 240 | + background: @menu-dark-title !important; | |
| 241 | 241 | } |
| 242 | 242 | } |
| 243 | 243 | // &-dark&-vertical &-item-active &-submenu-title{ |
| 244 | 244 | // color: #fff; |
| 245 | 245 | // } |
| 246 | 246 | &-dark&-vertical &-child-item-active > &-submenu-title{ |
| 247 | - color: #fff; | |
| 247 | + color: @menu-dark-active-bg; | |
| 248 | 248 | } |
| 249 | 249 | |
| 250 | 250 | &-dark&-vertical &-opened{ | ... | ... |
src/styles/components/page.less
| ... | ... | @@ -34,22 +34,22 @@ |
| 34 | 34 | font-family: "Monospaced Number"; |
| 35 | 35 | margin: 0 6px; |
| 36 | 36 | text-decoration: none; |
| 37 | - color: @text-color; | |
| 37 | + color: #666; | |
| 38 | 38 | //transition: none; |
| 39 | 39 | } |
| 40 | 40 | |
| 41 | 41 | &:hover { |
| 42 | - border-color: @primary-color; | |
| 42 | + border-color: @mew-common-color; | |
| 43 | 43 | a { |
| 44 | - color: @primary-color; | |
| 44 | + color: @mew-common-color; | |
| 45 | 45 | } |
| 46 | 46 | } |
| 47 | 47 | |
| 48 | 48 | &-active { |
| 49 | - border-color: @primary-color; | |
| 50 | - | |
| 49 | + border-color: @mew-common-color; | |
| 50 | + background-color: @mew-common-color; | |
| 51 | 51 | a, &:hover a { |
| 52 | - color: @primary-color; | |
| 52 | + color: #fff; | |
| 53 | 53 | } |
| 54 | 54 | } |
| 55 | 55 | } |
| ... | ... | @@ -135,10 +135,10 @@ |
| 135 | 135 | } |
| 136 | 136 | |
| 137 | 137 | &:hover { |
| 138 | - border-color: @primary-color; | |
| 138 | + border-color: @mew-common-color; | |
| 139 | 139 | |
| 140 | 140 | a { |
| 141 | - color: @primary-color; | |
| 141 | + color: @mew-common-color; | |
| 142 | 142 | } |
| 143 | 143 | } |
| 144 | 144 | } | ... | ... |
src/styles/components/switch.less
| ... | ... | @@ -7,8 +7,8 @@ |
| 7 | 7 | line-height: 20px; |
| 8 | 8 | border-radius: 22px; |
| 9 | 9 | vertical-align: middle; |
| 10 | - border: 1px solid #ccc; | |
| 11 | - background-color: #ccc; | |
| 10 | + border: 1px solid @mew-common-color; | |
| 11 | + background-color: #efefef; | |
| 12 | 12 | position: relative; |
| 13 | 13 | cursor: pointer; |
| 14 | 14 | user-select: none; |
| ... | ... | @@ -19,7 +19,7 @@ |
| 19 | 19 | } |
| 20 | 20 | |
| 21 | 21 | &-inner { |
| 22 | - color: #fff; | |
| 22 | + color: @mew-common-color; | |
| 23 | 23 | font-size: @font-size-small; |
| 24 | 24 | position: absolute; |
| 25 | 25 | left: 23px; |
| ... | ... | @@ -38,7 +38,7 @@ |
| 38 | 38 | width: 18px; |
| 39 | 39 | height: 18px; |
| 40 | 40 | border-radius: 18px; |
| 41 | - background-color: #fff; | |
| 41 | + background-color: @mew-common-color; | |
| 42 | 42 | position: absolute; |
| 43 | 43 | left: 1px; |
| 44 | 44 | top: 1px; |
| ... | ... | @@ -61,8 +61,8 @@ |
| 61 | 61 | left: 3px; |
| 62 | 62 | top: 3px; |
| 63 | 63 | z-index: 1; |
| 64 | - border: 1px solid @primary-color; | |
| 65 | - border-color: transparent transparent transparent @primary-color; | |
| 64 | + border: 1px solid @mew-common-color; | |
| 65 | + border-color: transparent transparent transparent #3fcdc0; | |
| 66 | 66 | animation: switch-loading 1s linear; |
| 67 | 67 | animation-iteration-count: infinite; |
| 68 | 68 | } |
| ... | ... | @@ -71,7 +71,7 @@ |
| 71 | 71 | } |
| 72 | 72 | |
| 73 | 73 | &:focus { |
| 74 | - box-shadow: 0 0 0 2px fade(@primary-color, 20%); | |
| 74 | + box-shadow: 0 0 0 2px fade(@mew-common-color, 20%); | |
| 75 | 75 | outline: 0; |
| 76 | 76 | } |
| 77 | 77 | |
| ... | ... | @@ -132,8 +132,8 @@ |
| 132 | 132 | } |
| 133 | 133 | |
| 134 | 134 | &-checked { |
| 135 | - border-color: @primary-color; | |
| 136 | - background-color: @primary-color; | |
| 135 | + border-color: @mew-common-color; | |
| 136 | + background-color: #e8e8e8; | |
| 137 | 137 | |
| 138 | 138 | .@{switch-prefix-cls}-inner { |
| 139 | 139 | left: 7px; |
| ... | ... | @@ -166,12 +166,12 @@ |
| 166 | 166 | } |
| 167 | 167 | |
| 168 | 168 | &-disabled&-checked{ |
| 169 | - border-color: @primary-color; | |
| 170 | - background-color: @primary-color; | |
| 169 | + border-color: @mew-common-color; | |
| 170 | + background-color: #e8e8e8; | |
| 171 | 171 | opacity: .4; |
| 172 | 172 | |
| 173 | 173 | &:after { |
| 174 | - background: #fff; | |
| 174 | + background: @mew-common-color; | |
| 175 | 175 | } |
| 176 | 176 | |
| 177 | 177 | .@{switch-prefix-cls}-inner { | ... | ... |
src/styles/components/tabs.less
| ... | ... | @@ -14,7 +14,7 @@ |
| 14 | 14 | &-ink-bar { |
| 15 | 15 | height: 2px; |
| 16 | 16 | box-sizing: border-box; |
| 17 | - background-color: @primary-color; | |
| 17 | + background-color: @mew-common-color; | |
| 18 | 18 | position: absolute; |
| 19 | 19 | left: 0; |
| 20 | 20 | bottom: 1px; |
| ... | ... | @@ -125,11 +125,11 @@ |
| 125 | 125 | transition: color .3s @ease-in-out; |
| 126 | 126 | |
| 127 | 127 | &:hover { |
| 128 | - color: @link-hover-color; | |
| 128 | + color: @mew-common-color; | |
| 129 | 129 | } |
| 130 | 130 | |
| 131 | 131 | &:active { |
| 132 | - color: @link-active-color; | |
| 132 | + color: @mew-common-color; | |
| 133 | 133 | } |
| 134 | 134 | .@{css-prefix-iconfont} { |
| 135 | 135 | width: 14px; |
| ... | ... | @@ -139,7 +139,7 @@ |
| 139 | 139 | } |
| 140 | 140 | |
| 141 | 141 | .@{tabs-prefix-cls}-tab-active { |
| 142 | - color: @primary-color; | |
| 142 | + color: @mew-common-color; | |
| 143 | 143 | } |
| 144 | 144 | } |
| 145 | 145 | &-mini &-nav-container { | ... | ... |
src/styles/custom.less
| ... | ... | @@ -15,11 +15,21 @@ |
| 15 | 15 | @link-color : #2D8cF0; |
| 16 | 16 | @link-hover-color : tint(@link-color, 20%); |
| 17 | 17 | @link-active-color : shade(@link-color, 5%); |
| 18 | -@selected-color : fade(@primary-color, 90%); | |
| 18 | +@selected-color : fade(#ff9a4c, 90%); | |
| 19 | 19 | @tooltip-color : #fff; |
| 20 | 20 | @subsidiary-color : #808695; |
| 21 | 21 | @rate-star-color : #f5a623; |
| 22 | 22 | |
| 23 | +// 自定义theme | |
| 24 | +@mew-common-color : #3fcdc0; | |
| 25 | +@mew-white-color : #fff; | |
| 26 | +@mew-black-color : #000; | |
| 27 | + | |
| 28 | +@search-color : @mew-common-color; | |
| 29 | +@confirm-color : #ff9a4c; | |
| 30 | +@cancel-color : @mew-white-color; | |
| 31 | +@reset-color : @mew-white-color; | |
| 32 | + | |
| 23 | 33 | // Base |
| 24 | 34 | @body-background : #fff; |
| 25 | 35 | @component-background : #fff; | ... | ... |