wynn · wynn · wynn · chenhaodong
Showing 8 changed files Show diff stats
src/components/button/button.vue
src/styles/components/button.less
src/styles/components/input.less
src/styles/components/menu.less
src/styles/components/page.less
src/styles/components/switch.less
src/styles/components/tabs.less
src/styles/custom.less
@@ -19,7 +19,7 @@
         props: {
             type: {
                 validator (value) {
-                    return oneOf(value, ['default', 'primary', 'dashed', 'text', 'info', 'success', 'warning', 'error']);
+                    return oneOf(value, ['default', 'primary', 'dashed', 'text', 'info', 'success', 'warning', 'error', 'search', 'confirm', 'cancel', 'reset']);
                 },
                 default: 'default'
             },
@@ -93,6 +93,22 @@
         .btn-circle(@btn-prefix-cls);
     }
+    &-search {
+        .btn-color(@search-color);
+    }
+
+    &-confirm {
+        .btn-color(@confirm-color);
+    }
+
+    &-cancel {
+        .btn-color(@cancel-color);
+    }
+
+    &-reset {
+        .btn-color(@reset-color);
+    }
+
     &:before {
         position: absolute;
         top: -1px;
@@ -178,7 +194,41 @@
         }
     }
-    &-ghost&-default[disabled], &-ghost&-dashed[disabled], &-ghost&-primary[disabled], &-ghost&-info[disabled], &-ghost&-success[disabled], &-ghost&-warning[disabled], &-ghost&-error[disabled]{
+    &-search {
+        color: #fff;
+        &:hover{
+            color: #fff;
+            background: #15bcad;
+        }
+    }
+
+    &-confirm {
+        color: #fff;
+        &:hover {
+            color: #fff;
+            background: #ff903a;
+        }
+    }
+
+    &-cancel {
+        color: #333;
+        border-color: @border-color-base;
+        &:hover {
+            color: #ff9a4c;
+            border-color: #ff903a;
+        }
+    }
+
+    &-reset {
+        color: #333;
+        border-color: @border-color-base;
+        &:hover {
+            color: #15bcad;
+            border-color: #15bcad;
+        }
+    }
+
+    &-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]{
         background: transparent;
         color: fade(#000, 25%);
         border-color: @btn-disable-border;
@@ -160,7 +160,7 @@
     &-with-search{
         &:hover{
             .@{input-prefix-cls} {
-                border-color: tint(@primary-color, 20%);
+                border-color: #000;
             }
         }
     }
@@ -96,8 +96,8 @@
         border-bottom: 2px solid transparent;
         color: @text-color;
         &-active, &:hover{
-            color: @primary-color;
-            border-bottom: 2px solid @primary-color;
+            color: @mew-common-color;
+            border-bottom: 2px solid @mew-common-color;
         }
     }
@@ -155,7 +155,7 @@
         &:hover{
             //background: @background-color-select-hover;
-            color: @primary-color;
+            color: @mew-common-color;
         }
     }
@@ -196,8 +196,8 @@
     &-light&-vertical &-item{
         //border-right: 2px solid transparent;
         &-active:not(.@{menu-prefix-cls}-submenu){
-            color: @primary-color;
-            background: ~`colorPalette("@{primary-color}", 1)`;
+            color: @mew-common-color;
+            background: ~`colorPalette("@{mew-common-color}", 1)`;
             //border-right: 2px solid @primary-color;
             z-index: 2;
             &:after{
@@ -208,7 +208,7 @@
                 top: 0;
                 bottom: 0;
                 right: 0;
-                background: @primary-color;
+                background: @mew-common-color;
             }
         }
     }
@@ -218,33 +218,33 @@
         &-active:not(.@{menu-prefix-cls}-submenu),
         &-active:not(.@{menu-prefix-cls}-submenu):hover
         {
-            background: @menu-dark-active-bg;
+            background: #fff;
         }
         &:hover{
-            color: #fff;
+            color: @mew-common-color !important;
             background: @menu-dark-title;
         }
         &-active:not(.@{menu-prefix-cls}-submenu){
-            color: @primary-color;
+            color: @mew-common-color;
             //border-right: 2px solid @primary-color;
         }
     }
     &-dark&-vertical &-submenu &-item{
         &:hover{
-            color: #fff;
+            color: @mew-black-color;
             background: transparent !important;
         }
         &-active,&-active:hover{
             border-right: none;
-            color: #fff;
-            background: @primary-color !important;
+            color: @menu-dark-group-title-color;
+            background: @menu-dark-title !important;
         }
     }
     // &-dark&-vertical &-item-active &-submenu-title{
     //     color: #fff;
     // }
     &-dark&-vertical &-child-item-active > &-submenu-title{
-        color: #fff;
+        color: @menu-dark-active-bg;
     }
     &-dark&-vertical &-opened{
@@ -34,22 +34,22 @@
             font-family: "Monospaced Number";
             margin: 0 6px;
             text-decoration: none;
-            color: @text-color;
+            color: #666;
             //transition: none;
         }
         &:hover {
-            border-color: @primary-color;
+            border-color: @mew-common-color;
             a {
-                color: @primary-color;
+                color: @mew-common-color;
             }
         }
         &-active {
-            border-color: @primary-color;
-
+            border-color: @mew-common-color;
+            background-color: @mew-common-color;
             a, &:hover a {
-                color: @primary-color;
+                color: #fff;
             }
         }
     }
@@ -135,10 +135,10 @@
         }
         &:hover {
-            border-color: @primary-color;
+            border-color: @mew-common-color;
             a {
-                color: @primary-color;
+                color: @mew-common-color;
             }
         }
     }
@@ -7,8 +7,8 @@
     line-height: 20px;
     border-radius: 22px;
     vertical-align: middle;
-    border: 1px solid #ccc;
-    background-color: #ccc;
+    border: 1px solid @mew-common-color;
+    background-color: #efefef;
     position: relative;
     cursor: pointer;
     user-select: none;
@@ -19,7 +19,7 @@
     }
     &-inner {
-        color: #fff;
+        color: @mew-common-color;
         font-size: @font-size-small;
         position: absolute;
         left: 23px;
@@ -38,7 +38,7 @@
         width: 18px;
         height: 18px;
         border-radius: 18px;
-        background-color: #fff;
+        background-color: @mew-common-color;
         position: absolute;
         left: 1px;
         top: 1px;
@@ -61,8 +61,8 @@
         left: 3px;
         top: 3px;
         z-index: 1;
-        border: 1px solid @primary-color;
-        border-color: transparent transparent transparent @primary-color;
+        border: 1px solid @mew-common-color;
+        border-color: transparent transparent transparent #3fcdc0;
         animation: switch-loading 1s linear;
         animation-iteration-count: infinite;
     }
@@ -71,7 +71,7 @@
     }
     &:focus {
-        box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+        box-shadow: 0 0 0 2px fade(@mew-common-color, 20%);
         outline: 0;
     }
@@ -132,8 +132,8 @@
     }
     &-checked {
-        border-color: @primary-color;
-        background-color: @primary-color;
+        border-color: @mew-common-color;
+        background-color: #e8e8e8;
         .@{switch-prefix-cls}-inner {
             left: 7px;
@@ -166,12 +166,12 @@
     }
     &-disabled&-checked{
-        border-color: @primary-color;
-        background-color: @primary-color;
+        border-color: @mew-common-color;
+        background-color: #e8e8e8;
         opacity: .4;
         &:after {
-            background: #fff;
+            background: @mew-common-color;
         }
         .@{switch-prefix-cls}-inner {
@@ -14,7 +14,7 @@
     &-ink-bar {
         height: 2px;
         box-sizing: border-box;
-        background-color: @primary-color;
+        background-color: @mew-common-color;
         position: absolute;
         left: 0;
         bottom: 1px;
@@ -125,11 +125,11 @@
             transition: color .3s @ease-in-out;
             &:hover {
-                color: @link-hover-color;
+                color: @mew-common-color;
             }
             &:active {
-                color: @link-active-color;
+                color: @mew-common-color;
             }
             .@{css-prefix-iconfont} {
                 width: 14px;
@@ -139,7 +139,7 @@
         }
         .@{tabs-prefix-cls}-tab-active {
-            color: @primary-color;
+            color: @mew-common-color;
         }
     }
     &-mini &-nav-container {
@@ -15,11 +15,21 @@
 @link-color             : #2D8cF0;
 @link-hover-color       : tint(@link-color, 20%);
 @link-active-color      : shade(@link-color, 5%);
-@selected-color         : fade(@primary-color, 90%);
+@selected-color         : fade(#ff9a4c, 90%);
 @tooltip-color          : #fff;
 @subsidiary-color       : #808695;
 @rate-star-color        : #f5a623;
+// 自定义theme
+@mew-common-color       : #3fcdc0;
+@mew-white-color        : #fff;
+@mew-black-color        : #000; 
+
+@search-color           : @mew-common-color;
+@confirm-color          : #ff9a4c;
+@cancel-color           : @mew-white-color;
+@reset-color            : @mew-white-color;
+
 // Base
 @body-background        : #fff;
 @component-background   : #fff;