This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

移除多余样式;button支持文本类型;icon的is属性增加setter

old
宇天 2020-01-03 18:14:48 +08:00
parent cf610e9d72
commit 4c4fc4b508
3 changed files with 160 additions and 37 deletions

View File

@ -37,9 +37,9 @@ a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline:none;}
::-moz-focus-inner { ::-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;} 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 { *zoom: 1; }
.do-fn-cl::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden;} .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-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.do-st-hand {cursor:pointer;} .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;}

View File

@ -24,7 +24,7 @@
align-items: center; align-items: center;
width: 100%; width: 100%;
height: inherit; height: inherit;
padding: 0 5px; padding: 0 10px;
margin: auto; margin: auto;
line-height: 0; line-height: 0;
border: 1px solid nth($cp, 3); 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]) { :host([round]) {
border-radius: 21px; 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([loading]),
:host([disabled]) { :host([disabled]) {
cursor: not-allowed; cursor: not-allowed;
@ -110,9 +136,7 @@
} }
button { button {
background: #fff; background: #fff;
// &:active {
border-color: nth($cp, 3); border-color: nth($cp, 3);
// }
} }
} }
@ -135,6 +159,18 @@
background: nth($cr, 3); 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'][loading]) button,
:host([color='red'][disabled]) button { :host([color='red'][disabled]) button {
background: nth($cr, 1); background: nth($cr, 1);
@ -149,6 +185,17 @@
background: nth($cb, 3); 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'][loading]) button,
:host([color='blue'][disabled]) button { :host([color='blue'][disabled]) button {
background: nth($cb, 1); background: nth($cb, 1);
@ -163,6 +210,16 @@
background: nth($cg, 3); 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'][loading]) button,
:host([color='green'][disabled]) button { :host([color='green'][disabled]) button {
background: nth($cg, 1); background: nth($cg, 1);
@ -177,6 +234,16 @@
background: nth($ct, 3); 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'][loading]) button,
:host([color='teal'][disabled]) button { :host([color='teal'][disabled]) button {
background: nth($ct, 1); background: nth($ct, 1);
@ -191,6 +258,16 @@
background: nth($co, 3); 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'][loading]) button,
:host([color='orange'][disabled]) button { :host([color='orange'][disabled]) button {
background: nth($co, 1); background: nth($co, 1);
@ -205,6 +282,16 @@
background: nth($cd, 3); 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'][loading]) button,
:host([color='dark'][disabled]) button { :host([color='dark'][disabled]) button {
background: nth($cd, 1); background: nth($cd, 1);
@ -219,6 +306,16 @@
background: nth($cpp, 3); 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'][loading]) button,
:host([color='purple'][disabled]) button { :host([color='purple'][disabled]) button {
background: nth($cpp, 1); background: nth($cpp, 1);
@ -233,11 +330,33 @@
background: nth($cgr, 3); 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'][loading]) button,
:host([color='grey'][disabled]) button { :host([color='grey'][disabled]) button {
background: nth($cgr, 1); background: nth($cgr, 1);
} }
:host([text][loading]),
:host([text][disabled]) {
button {
&,
&:hover,
&:active {
text-decoration: none;
background: transparent;
}
}
}
:host(:focus-within) { :host(:focus-within) {
@include focus1; @include focus1;
} }

View File

@ -112,6 +112,12 @@ export default class Icon {
return this.props.is return this.props.is
} }
set is(val) {
if (val) {
this.setAttribute('is', val)
}
}
// 绘制图标 // 绘制图标
drawPath() { drawPath() {
var { is } = this.props var { is } = this.props