diff --git a/src/form/checkbox.js b/src/form/checkbox.js index caff6fe..ff79ab4 100644 --- a/src/form/checkbox.js +++ b/src/form/checkbox.js @@ -64,11 +64,7 @@ class Checkbox extends Component { class CheckboxItem extends Component { static props = { - value: { - type: String, - default: '', - attribute: false - }, + value: 'str!', checked: false, disabled: false, readonly: false @@ -79,22 +75,20 @@ class CheckboxItem extends Component { :host { display: inline-flex; align-items: center; - font-size: 14px; cursor: pointer; label { display: flex; - justify-content: center; align-items: center; - min-width: 32px; padding-right: 16px; line-height: 1; - -moz-user-select: none; - user-select: none; + font-size: 14px; white-space: nowrap; + color: var(--color-dark-1); cursor: inherit; outline: none; - color: var(--color-dark-1); + -webkit-user-select: none; + user-select: none; } .dot { @@ -134,36 +128,27 @@ class CheckboxItem extends Component { css` @use 'sass:map'; $sizes: ( + s: ( + h: 20px, + f: 12px + ), m: ( - w: 72px, h: 24px, f: 12px ), - l: ( - w: 108px, - h: 32px, - f: 14px - ), xl: ( - w: 132px, h: 36px, - f: 14px - ), - xxl: ( - w: 160px, - h: 44px, - f: 14px + f: 16px ) ); @loop $s, $v in $sizes { :host([size='#{$s}']) { height: map.get($v, 'h'); - font-size: map.get($v, 'f'); .dot { - width: #{map.get($v, 'f')}; - height: #{map.get($v, 'f')}; + width: map.get($v, 'f'); + height: map.get($v, 'f'); } } } @@ -175,9 +160,7 @@ class CheckboxItem extends Component { info: 'blue', success: 'green', warning: 'orange', - danger: 'red', - secondary: 'dark', - help: 'grey' + danger: 'red' ); @loop $t, $c in $colors { @@ -188,10 +171,6 @@ class CheckboxItem extends Component { .dot { border-color: var(--color-#{$c}-2); - - &::after { - background: var(--color-#{$c}-2); - } } &:host(:focus-within) .dot { @@ -202,12 +181,12 @@ class CheckboxItem extends Component { `, // 状态 css` + :host([readonly]), :host([disabled]) { - cursor: not-allowed; opacity: 0.6; } - :host([readonly]) { - cursor: default; + :host([disabled]) { + cursor: not-allowed; } ` ] diff --git a/src/form/link.js b/src/form/link.js index 4ceaed3..af4996e 100644 --- a/src/form/link.js +++ b/src/form/link.js @@ -22,8 +22,6 @@ class Link extends Component { position: relative; display: inline-flex; border-radius: 2px; - user-select: none; - -moz-user-select: none; font-size: inherit; cursor: pointer; transition: box-shadow 0.15s linear; @@ -42,6 +40,8 @@ class Link extends Component { cursor: inherit; text-decoration: none; transition: color 0.15s linear; + -webkit-user-select: none; + user-select: none; &::-moz-focus-inner { border: none; diff --git a/src/form/radio.js b/src/form/radio.js index b61324c..51d7bc4 100644 --- a/src/form/radio.js +++ b/src/form/radio.js @@ -167,9 +167,7 @@ class RadioItem extends Component { info: 'blue', success: 'green', warning: 'orange', - danger: 'red', - secondary: 'dark', - help: 'grey' + danger: 'red' ); @loop $t, $c in $colors {