diff --git a/src/form/button.js b/src/form/button.js index ebd14d2..d66a0b4 100644 --- a/src/form/button.js +++ b/src/form/button.js @@ -9,13 +9,10 @@ import '../icon/index.js' class Button extends Component { static props = { - type: 'primary', icon: '', - size: 'l', autofocus: false, loading: { type: Boolean, - default: false, observer(val) { if (val) { this.cacheIcon = this.icon @@ -26,7 +23,7 @@ class Button extends Component { } }, disabled: false, - lazy: 0 // 并发拦截时间, 单位毫秒 + lazy: 'num!0' // 并发拦截时间, 单位毫秒 } static styles = [ @@ -35,6 +32,8 @@ class Button extends Component { :host { overflow: hidden; display: inline-flex; + min-width: 108px; + height: 32px; border: 0; border-radius: 3px; user-select: none; @@ -53,20 +52,46 @@ class Button extends Component { height: inherit; padding: var(--wc-button-padding, 0 4px); line-height: 1; - border: 1px solid transparent; + border: 1px solid var(--wc-button-border-color, var(--color-dark-1)); border-radius: inherit; white-space: nowrap; background: var(--wc-button-background, #fff); font-size: inherit; font-family: inherit; outline: none; - color: inherit; + color: var(--wc-button-color, var(--color-dark-2)); cursor: inherit; transition: background 0.15s linear, color 0.15s linear; &::-moz-focus-inner { border: none; } + + &:hover { + color: var(--wc-button-color-hover, var(--color-dark-1)); + border-color: var( + --wc-button-border-color-hover, + var(--color-dark-2) + ); + background: var( + --wc-button-background-hover, + var(--wc-button-background, #fff) + ); + } + &:active { + color: var(--wc-button-color-active, var(--color-dark-3)); + background: var( + --wc-button-background-active, + var(--wc-button-background, #fff) + ); + } + &:disabled { + color: var(--wc-button-color-disabled, var(--color-dark-2)); + background: var( + --wc-button-background-disabled, + var(--wc-button-background, #fff) + ); + } } .icon { @@ -74,8 +99,26 @@ class Button extends Component { --wc-icon-size: var(--wc-button-icon-size, 14px); } } + + :host([solid]) button { + border: 0; + color: #fff; + background: var(--color-dark-2); + + &:hover { + background: var(--color-dark-1); + } + &:active { + background: var(--color-dark-3); + } + + &:disabled { + background: var(--color-dark-2); + } + } + :host(:focus-within) { - box-shadow: 0 0 0 2px var(--color-plain-a); + box-shadow: 0 0 0 2px var(--color-dark-a); } :host(:empty) { button .icon { @@ -97,16 +140,13 @@ class Button extends Component { h: 24px, f: 12px ), - l: ( - w: 108px, - h: 32px, - f: 14px - ), - xl: ( - w: 132px, - h: 36px, - f: 14px - ), + // l 为默认 + xl: + ( + w: 132px, + h: 36px, + f: 14px + ), xxl: ( w: 160px, h: 44px, @@ -139,6 +179,8 @@ class Button extends Component { } :host([circle]) { min-width: 0; + width: 32px; + height: 32px; border-radius: 50%; button { padding: 0; @@ -160,51 +202,35 @@ class Button extends Component { success: 'green', warning: 'orange', danger: 'red', - secondary: 'dark', - help: 'grey', - plain: 'plain' + // secondary: 'dark', default + help: 'grey' ); @loop $t, $c in $colors { :host([type='#{$t}']) { button { - color: var(--wc-button-color, var(--color-#{$c}-2)); - border-color: var(--wc-button-border-color, var(--color-#{$c}-1)); + color: var(--color-#{$c}-2); + border-color: var(--color-#{$c}-1); &:hover { - color: var(--wc-button-color-hover, var(--color-#{$c}-1)); - border-color: var( - --wc-button-border-color-hover, - var(--color-#{$c}-2) - ); - background: var( - --wc-button-background-hover, - var(--wc-button-background, #fff) - ); + color: var(--color-#{$c}-1); + border-color: var(--color-#{$c}-2); + background: var(--wc-button-background, #fff); } &:active { - color: var(--wc-button-color-active, var(--color-#{$c}-3)); - background: var( - --wc-button-background-active, - var(--wc-button-background, #fff) - ); + color: var(--color-#{$c}-3); + background: var(--wc-button-background, #fff); } &:disabled { - color: var(--wc-button-color-disabled, var(--color-#{$c}-2)); - background: var( - --wc-button-background-disabled, - var(--wc-button-background, #fff) - ); + color: var(--color-#{$c}-2); + background: var(--wc-button-background, #fff); } } &:host([solid]) button { border: 0; - @if $t == 'plain' { - color: var(--color-dark-1); - } @else { - color: #fff; - } + color: #fff; + background: var(--color-#{$c}-2); &:hover { diff --git a/开发规范.md b/开发规范.md index 24fa4ca..b570ad3 100644 --- a/开发规范.md +++ b/开发规范.md @@ -4,8 +4,8 @@ > 主题功能, 暂时由根样式定义来实现, 所以, 组件内的样式, 尽可能避免过多的私有配色。 2. 组件几种配色样式, 暂时同大多数组件一致 - - `type=primary` 青色 (默认值) - - `type=secondary` 暗色 + - `type=primary` 青色 + - `type=secondary` 暗色 (默认值, 不用配置) - `type=info` 蓝色 - `type=success` 绿色 - `type=warning` 橙色 @@ -17,7 +17,7 @@ - `size=s` 小号, 20px - `size=m` 中号, 24px - - `size=l` 大号, 32px (默认值) + - `size=l` 大号, 32px (默认值, 不用配置) - `size=xl` 加大号, 36px - `size=xxl` 加加大号, 44px