移除多余样式;button支持文本类型;icon的is属性增加setter
宇天
parent
cf610e9d72
commit
4c4fc4b508
|
|
@ -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;}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Reference in New Issue