From 8b7f4b8267c1b304c9bdfa733316bbf787791239 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Thu, 28 Jan 2021 11:24:46 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90button=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E7=9A=84=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build.dev.js | 8 ------- build.prod.js | 8 ------- src/css/reset-basic.css | 48 ++++++++++++++++++++--------------------- src/form/button.wc | 43 ++++++++++++++++++++++++++++++------ 4 files changed, 60 insertions(+), 47 deletions(-) diff --git a/build.dev.js b/build.dev.js index d1e2866..ccd93fb 100644 --- a/build.dev.js +++ b/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; diff --git a/build.prod.js b/build.prod.js index 500cab6..5494aed 100644 --- a/build.prod.js +++ b/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; diff --git a/src/css/reset-basic.css b/src/css/reset-basic.css index 13f8844..40ff760 100644 --- a/src/css/reset-basic.css +++ b/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-2: #26a69a; - --color-teal-3: #009688; + --color-teal-1: rgb(72, 201, 176); + --color-teal-2: rgb(26, 188, 156); + --color-teal-3: rgb(22, 160, 133); /* sucess */ - --color-green-1: #81c784; - --color-green-2: #66bb6a; - --color-green-3: #4caf50; + --color-green-1: rgb(88, 214, 141); + --color-green-2: rgb(46, 204, 113); + --color-green-3: rgb(39, 173, 96); /* info */ - --color-blue-1: #64b5f6; - --color-blue-2: #42a5f5; - --color-blue-3: #2196f3; + --color-blue-1: rgb(100, 181, 246); + --color-blue-2: rgb(66, 165, 245); + --color-blue-3: rgb(33, 150, 243); /* danger */ - --color-red-1: #ff5061; - --color-red-2: #eb3b48; - --color-red-3: #ce3742; + --color-red-1: rgb(255, 107, 129); + --color-red-2: rgb(255, 71, 87); + --color-red-3: rgb(230, 52, 67); /* warning */ - --color-orange-1: #ffb618; - --color-orange-2: #f39c12; - --color-orange-3: #e67e22; + --color-orange-1: rgb(244, 211, 19); + --color-orange-2: rgb(241, 196, 15); + --color-orange-3: rgb(205, 167, 13); /* default1 */ - --color-plain-1: #f2f5fc; - --color-plain-2: #e8ebf4; - --color-plain-3: #dae1e9; + --color-plain-1: rgb(242, 245, 252); + --color-plain-2: rgb(232, 235, 244); + --color-plain-3: rgb(218, 225, 233); /* default2 */ - --color-grey-1: #cacfd2; - --color-grey-2: #bdc3c7; - --color-grey-3: #a1a6a9; + --color-grey-1: rgb(206, 214, 224); + --color-grey-2: rgb(164, 176, 190); + --color-grey-3: rgb(134, 144, 155); /* inverse */ - --color-dark-1: #62778d; - --color-dark-2: #526273; - --color-dark-3: #425064; + --color-dark-1: rgb(65, 91, 118); + --color-dark-2: rgb(52, 73, 94); + --color-dark-3: rgb(44, 62, 80); } diff --git a/src/form/button.wc b/src/form/button.wc index a054318..0b677eb 100644 --- a/src/form/button.wc +++ b/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; -}