diff --git a/src/base/button.js b/src/base/button.js index 088991f..d554f44 100644 --- a/src/base/button.js +++ b/src/base/button.js @@ -123,47 +123,19 @@ class Button extends Component { `, // 尺寸 css` - @use 'sass:map'; - $sizes: ( - s: ( - w: 52px, - h: 20px, - f: 12px - ), - m: ( - w: 72px, - h: 24px, - f: 12px - ), - // l 为默认 - xl: - ( - w: 132px, - h: 36px, - f: 14px - ), - xxl: ( - w: 160px, - h: 44px, - f: 14px - ) - ); + :host([size='small']) { + min-width: 72px; + height: 24px; + font-size: 12px; - @loop $s, $v in $sizes { - :host([size='#{$s}']) { - min-width: map.get($v, 'w'); - height: map.get($v, 'h'); - font-size: map.get($v, 'f'); - - .icon { - --wc-icon-size: var(--wc-button-icon-size, #{map.get($v, 'f')}); - } - } - :host([size='#{$s}'][circle]) { - width: map.get($v, 'h'); - height: map.get($v, 'h'); + .icon { + --wc-icon-size: 12px; } } + :host([size='small'][circle]) { + width: 24px; + height: 24px; + } :host([dashed]) button { border-style: dashed; diff --git a/src/base/icon.js b/src/base/icon.js index 589b12c..7b49295 100644 --- a/src/base/icon.js +++ b/src/base/icon.js @@ -48,28 +48,19 @@ class Icon extends Component { color: inherit; fill: currentColor; - &.loading { - animation: load 1.5s linear infinite; - } - circle { stroke: currentColor; animation: circle 1.5s ease-in-out infinite; } } - $gaps: ( - 's': 20px, - 'm': 24px, - 'l': 32px, - 'xl': 36px, - 'xxl': 44px - ); - @loop $k, $v in $gaps { - :host([size='#{$k}']) { - width: $v; - height: $v; - } + :host([name='loading']) svg { + animation: load 1.5s linear infinite; + } + + :host([size='small']) { + width: 24px; + height: 24px; } @keyframes circle { @@ -96,10 +87,7 @@ class Icon extends Component { render() { return html` - + ${this.name === 'loading' ? svg`` : svg``} diff --git a/src/form/checkbox.js b/src/form/checkbox.js index 4c100e9..c6ac6bc 100644 --- a/src/form/checkbox.js +++ b/src/form/checkbox.js @@ -74,7 +74,7 @@ class CheckboxItem extends Component { css` :host { display: inline-flex; - align-items: center; + height: 32px; cursor: pointer; label { @@ -126,30 +126,12 @@ class CheckboxItem extends Component { `, // 尺寸 css` - @use 'sass:map'; - $sizes: ( - s: ( - h: 20px, - f: 12px - ), - m: ( - h: 24px, - f: 12px - ), - xl: ( - h: 36px, - f: 16px - ) - ); + :host([size='small']) { + height: 24px; - @loop $s, $v in $sizes { - :host([size='#{$s}']) { - height: map.get($v, 'h'); - - .dot { - width: map.get($v, 'f'); - height: map.get($v, 'f'); - } + .dot { + width: 12px; + height: 12px; } } `, @@ -225,7 +207,7 @@ class CheckboxItem extends Component { } render() { - return html`