From 4c4fc4b508a326e25761c06d30f230941f495ec2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Fri, 3 Jan 2020 18:14:48 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A7=BB=E9=99=A4=E5=A4=9A=E4=BD=99=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F;button=E6=94=AF=E6=8C=81=E6=96=87=E6=9C=AC=E7=B1=BB?= =?UTF-8?q?=E5=9E=8B;icon=E7=9A=84is=E5=B1=9E=E6=80=A7=E5=A2=9E=E5=8A=A0se?= =?UTF-8?q?tter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/css/reset-basic.css | 8 +- src/form/button.wc | 183 +++++++++++++++++++++++++++++++++------- src/icon/index.wc | 6 ++ 3 files changed, 160 insertions(+), 37 deletions(-) diff --git a/src/css/reset-basic.css b/src/css/reset-basic.css index 4546277..565dfba 100644 --- a/src/css/reset-basic.css +++ b/src/css/reset-basic.css @@ -35,11 +35,11 @@ q::before, q::after {content: '';content: none;} table {border-collapse: collapse;border-spacing: 0;} a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline:none;} ::-moz-focus-inner { - border:none;outline:none; + border:none;outline:none; } -body {font-family:Helvetica, Arial,"WenQuanYi Micro Hei","PingFang SC","Hiragino Sans GB","Segoe UI", "Microsoft Yahei", sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;} +body {font-family:"Helvetica Neue", Arial,"WenQuanYi Micro Hei","PingFang SC","Hiragino Sans GB","Segoe UI", "Microsoft Yahei", sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;} code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;} -[anot],[\:repeat],[\:if],[is-widget],slot {visibility:hidden;} +[anot],[\:repeat],[\:if] {visibility:hidden;} .do-fn-cl { *zoom: 1; } .do-fn-cl::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden;} @@ -55,6 +55,4 @@ code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;} .do-st-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} .do-st-hand {cursor:pointer;} -[class^="do-icon-"], [class*=" do-icon-"] {display:inline-block;font-family:"uifont" !important;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} - diff --git a/src/form/button.wc b/src/form/button.wc index 03120f4..fae9136 100644 --- a/src/form/button.wc +++ b/src/form/button.wc @@ -24,7 +24,7 @@ align-items: center; width: 100%; height: inherit; - padding: 0 5px; + padding: 0 10px; margin: auto; line-height: 0; border: 1px solid nth($cp, 3); @@ -56,6 +56,61 @@ } } +:host([size='large']) { + min-width: 120px; + height: 42px; + font-size: 16px; + + .icon { + --size: 20px; + } +} +:host([size='large'][circle]) { + min-width: 42px; + + button { + padding: 0 20px; + } +} +:host([size='medium']) { + min-width: 90px; + height: 36px; + + button { + padding: 0 15px; + } +} +:host([size='medium'][circle]) { + min-width: 36px; +} +:host([size='mini']), +:host([text]) { + min-width: 24px; + height: 24px; + font-size: 12px; + + button { + padding: 0 5px; + } + + .icon { + --size: 14px; + } +} + +:host([text]) { + height: 18px; + + button { + padding: 0; + border: 0; + + &:hover { + text-decoration: underline; + } + } +} + :host([round]) { border-radius: 21px; } @@ -70,35 +125,6 @@ } } -:host([size='large']) { - min-width: 120px; - height: 42px; - font-size: 16px; - - .icon { - --size: 20px; - } -} -:host([size='large'][circle]) { - min-width: 42px; -} -:host([size='medium']) { - min-width: 90px; - height: 36px; -} -:host([size='medium'][circle]) { - min-width: 36px; -} -:host([size='mini']) { - min-width: 24px; - height: 24px; - font-size: 12px; - - .icon { - --size: 14px; - } -} - :host([loading]), :host([disabled]) { cursor: not-allowed; @@ -110,9 +136,7 @@ } button { background: #fff; - // &:active { border-color: nth($cp, 3); - // } } } @@ -135,6 +159,18 @@ background: nth($cr, 3); } } + +:host([color='red'][text]) button { + background: transparent; + color: nth($cr, 2); + &:hover { + color: nth($cr, 1); + } + &:active { + color: nth($cr, 3); + } +} + :host([color='red'][loading]) button, :host([color='red'][disabled]) button { background: nth($cr, 1); @@ -149,6 +185,17 @@ background: nth($cb, 3); } } + +:host([color='blue'][text]) button { + background: transparent; + color: nth($cb, 2); + &:hover { + color: nth($cb, 1); + } + &:active { + color: nth($cb, 3); + } +} :host([color='blue'][loading]) button, :host([color='blue'][disabled]) button { background: nth($cb, 1); @@ -163,6 +210,16 @@ background: nth($cg, 3); } } +:host([color='green'][text]) button { + background: transparent; + color: nth($cg, 2); + &:hover { + color: nth($cg, 1); + } + &:active { + color: nth($cg, 3); + } +} :host([color='green'][loading]) button, :host([color='green'][disabled]) button { background: nth($cg, 1); @@ -177,6 +234,16 @@ background: nth($ct, 3); } } +:host([color='teal'][text]) button { + background: transparent; + color: nth($ct, 2); + &:hover { + color: nth($ct, 1); + } + &:active { + color: nth($ct, 3); + } +} :host([color='teal'][loading]) button, :host([color='teal'][disabled]) button { background: nth($ct, 1); @@ -191,6 +258,16 @@ background: nth($co, 3); } } +:host([color='orange'][text]) button { + background: transparent; + color: nth($co, 2); + &:hover { + color: nth($co, 1); + } + &:active { + color: nth($co, 3); + } +} :host([color='orange'][loading]) button, :host([color='orange'][disabled]) button { background: nth($co, 1); @@ -205,6 +282,16 @@ background: nth($cd, 3); } } +:host([color='dark'][text]) button { + background: transparent; + color: nth($cd, 2); + &:hover { + color: nth($cd, 1); + } + &:active { + color: nth($cd, 3); + } +} :host([color='dark'][loading]) button, :host([color='dark'][disabled]) button { background: nth($cd, 1); @@ -219,6 +306,16 @@ background: nth($cpp, 3); } } +:host([color='purple'][text]) button { + background: transparent; + color: nth($cpp, 2); + &:hover { + color: nth($cpp, 1); + } + &:active { + color: nth($cpp, 3); + } +} :host([color='purple'][loading]) button, :host([color='purple'][disabled]) button { background: nth($cpp, 1); @@ -233,11 +330,33 @@ background: nth($cgr, 3); } } +:host([color='grey'][text]) button { + background: transparent; + color: nth($cgr, 2); + &:hover { + color: nth($cgr, 1); + } + &:active { + color: nth($cgr, 3); + } +} :host([color='grey'][loading]) button, :host([color='grey'][disabled]) button { background: nth($cgr, 1); } +:host([text][loading]), +:host([text][disabled]) { + button { + &, + &:hover, + &:active { + text-decoration: none; + background: transparent; + } + } +} + :host(:focus-within) { @include focus1; } diff --git a/src/icon/index.wc b/src/icon/index.wc index 6cba413..13f8919 100644 --- a/src/icon/index.wc +++ b/src/icon/index.wc @@ -112,6 +112,12 @@ export default class Icon { return this.props.is } + set is(val) { + if (val) { + this.setAttribute('is', val) + } + } + // 绘制图标 drawPath() { var { is } = this.props