完成button组件的重构

build.dev.js

@@ -15,14 +15,6 @@ const VERSION = require('./package.json').version
 const BUILD_DATE = new Date().format()
 
 const BASE_SCSS = `
-@mixin focus1(){
-  box-shadow: 0 0 3px var(--color-blue-1);
-}
-
-@mixin focus2(){
-  box-shadow: 0 0 3px var(--color-orange-1);
-}
-
 * {
   box-sizing: border-box;
   margin: 0;padding: 0;

build.prod.js

@@ -15,14 +15,6 @@ const VERSION = require('./package.json').version
 const BUILD_DATE = new Date().format()
 
 const BASE_SCSS = `
-@mixin focus1(){
-  box-shadow: 0 0 2px #88f7df;
-}
-
-@mixin focus2(){
-  box-shadow: 0 0 2px #f3be4d;
-}
-
 * {
   box-sizing: border-box;
   margin: 0;padding: 0;

src/css/reset-basic.css

@@ -45,35 +45,35 @@ code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;}
 
 :root {
   /* primary */
-  --color-teal-1: #4db6ac;
+  --color-teal-1: rgb(72, 201, 176);
-  --color-teal-2: #26a69a;
+  --color-teal-2: rgb(26, 188, 156);
-  --color-teal-3: #009688;
+  --color-teal-3: rgb(22, 160, 133);
   /* sucess */
-  --color-green-1: #81c784;
+  --color-green-1: rgb(88, 214, 141);
-  --color-green-2: #66bb6a;
+  --color-green-2: rgb(46, 204, 113);
-  --color-green-3: #4caf50;
+  --color-green-3: rgb(39, 173, 96);
   /* info */
-  --color-blue-1: #64b5f6;
+  --color-blue-1: rgb(100, 181, 246);
-  --color-blue-2: #42a5f5;
+  --color-blue-2: rgb(66, 165, 245);
-  --color-blue-3: #2196f3;
+  --color-blue-3: rgb(33, 150, 243);
   /* danger */
-  --color-red-1: #ff5061;
+  --color-red-1: rgb(255, 107, 129);
-  --color-red-2: #eb3b48;
+  --color-red-2: rgb(255, 71, 87);
-  --color-red-3: #ce3742;
+  --color-red-3: rgb(230, 52, 67);
   /* warning */
-  --color-orange-1: #ffb618;
+  --color-orange-1: rgb(244, 211, 19);
-  --color-orange-2: #f39c12;
+  --color-orange-2: rgb(241, 196, 15);
-  --color-orange-3: #e67e22;
+  --color-orange-3: rgb(205, 167, 13);
   /* default1 */
-  --color-plain-1: #f2f5fc;
+  --color-plain-1: rgb(242, 245, 252);
-  --color-plain-2: #e8ebf4;
+  --color-plain-2: rgb(232, 235, 244);
-  --color-plain-3: #dae1e9;
+  --color-plain-3: rgb(218, 225, 233);
   /* default2 */
-  --color-grey-1: #cacfd2;
+  --color-grey-1: rgb(206, 214, 224);
-  --color-grey-2: #bdc3c7;
+  --color-grey-2: rgb(164, 176, 190);
-  --color-grey-3: #a1a6a9;
+  --color-grey-3: rgb(134, 144, 155);
   /* inverse */
-  --color-dark-1: #62778d;
+  --color-dark-1: rgb(65, 91, 118);
-  --color-dark-2: #526273;
+  --color-dark-2: rgb(52, 73, 94);
-  --color-dark-3: #425064;
+  --color-dark-3: rgb(44, 62, 80);
 }

src/form/button.wc

@@ -18,6 +18,7 @@
   font-size: 14px;
   vertical-align: middle;
   cursor: pointer;
+  transition: box-shadow 0.15s linear;
 
   button {
     display: flex;
@@ -37,7 +38,7 @@
     outline: none;
     color: inherit;
     cursor: inherit;
-    transition: background 0.2s linear;
+    transition: background 0.15s linear;
 
     &::-moz-focus-inner {
       border: none;
@@ -55,6 +56,10 @@
   height: 52px;
   font-size: 18px;
 
+  button {
+    padding: 0 24px;
+  }
+
   .icon {
     --size: 26px;
   }
@@ -72,7 +77,7 @@
   height: 36px;
 
   button {
-    padding: 0 15px;
+    padding: 0 18px;
   }
 }
 :host([size='medium'][circle]) {
@@ -84,7 +89,7 @@
   font-size: 12px;
 
   button {
-    padding: 0 5px;
+    padding: 0 6px;
   }
 
   .icon {
@@ -140,6 +145,9 @@
     background: var(--color-plain-3);
   }
 }
+:host(:focus-within:not([link])) {
+  box-shadow: 0 0 0 2px rgba(242, 245, 252, 0.5);
+}
 
 // -------------
 :host([type='danger']:not([link])) button {
@@ -156,6 +164,9 @@
     background: var(--color-red-3);
   }
 }
+:host([type='danger']:focus-within:not([link])) {
+  box-shadow: 0 0 0 2px rgba(255, 107, 129, 0.5);
+}
 
 // -------------
 :host([type='info']:not([link])) button {
@@ -172,6 +183,9 @@
     background: var(--color-blue-3);
   }
 }
+:host([type='info']:focus-within:not([link])) {
+  box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.5);
+}
 
 // --------
 :host([type='sucess']:not([link])) button {
@@ -188,6 +202,9 @@
     background: var(--color-green-3);
   }
 }
+:host([type='sucess']:focus-within:not([link])) {
+  box-shadow: 0 0 0 2px rgba(88, 214, 141, 0.5);
+}
 
 // ---------
 :host([type='primary']:not([link])) button {
@@ -204,6 +221,9 @@
     background: var(--color-teal-3);
   }
 }
+:host([type='primary']:focus-within:not([link])) {
+  box-shadow: 0 0 0 2px rgba(72, 201, 176, 0.5);
+}
 
 // ----------
 :host([type='warning']:not([link])) button {
@@ -220,6 +240,9 @@
     background: var(--color-orange-3);
   }
 }
+:host([type='warning']:focus-within:not([link])) {
+  box-shadow: 0 0 0 2px rgba(244, 211, 19, 0.5);
+}
 
 // -------
 :host([type='inverse']:not([link])) button {
@@ -236,6 +259,9 @@
     background: var(--color-dark-3);
   }
 }
+:host([type='inverse']:focus-within:not([link])) {
+  box-shadow: 0 0 0 2px rgba(65, 91, 118, 0.5);
+}
 
 // -------
 :host([type='default']:not([link])) button {
@@ -252,6 +278,9 @@
     background: var(--color-grey-3);
   }
 }
+:host([type='default']:focus-within:not([link])) {
+  box-shadow: 0 0 0 2px rgba(206, 214, 224, 0.5);
+}
 
 :host([loading]),
 :host([disabled]) {
@@ -268,10 +297,6 @@
     }
   }
 }
-
-:host(:focus-within:not([link]):not([disabled]):not([loading])) {
-  @include focus1;
-}
 </style>
 
 <script>
@@ -314,10 +339,12 @@ export default class Button {
 
     if ((type === 'boolean' && val) || type !== 'boolean') {
       this.props.loading = true
+      this.__BTN__.disabled = true
       this.__ICO__.setAttribute('is', 'loading')
       this.setAttribute('loading', '')
     } else {
       this.props.loading = false
+      this.__BTN__.disabled = false
       this.__ICO__.setAttribute('is', this.props.icon)
       this.removeAttribute('loading')
     }
@@ -335,9 +362,11 @@ export default class Button {
     }
     if ((type === 'boolean' && val) || type !== 'boolean') {
       this.props.disabled = true
+      this.__BTN__.disabled = true
       this.setAttribute('disabled', '')
     } else {
       this.props.disabled = false
+      this.__BTN__.disabled = false
       this.removeAttribute('disabled')
     }
   }