bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

更新switch组件

master
yutent 2023-03-29 19:07:29 +08:00
parent 8a8a1fc404
commit ea92ce9e59
3 changed files with 10 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/form/checkbox.js
View File

@ -79,7 +79,6 @@ class CheckboxItem extends Component {
:host { :host {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
line-height: 1;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;

1
src/form/radio.js
View File

@ -76,7 +76,6 @@ class RadioItem extends Component {
:host { :host {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
line-height: 1;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;

39
src/form/switch.js
View File

@ -13,7 +13,6 @@ class Switch extends Component {
default: '', default: '',
attribute: false attribute: false
}, },
checked: false,
disabled: false, disabled: false,
readonly: false readonly: false
} }
@ -23,7 +22,6 @@ class Switch extends Component {
:host { :host {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
line-height: 1;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
@ -46,26 +44,13 @@ class Switch extends Component {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 14px; width: 36px;
height: 14px; height: 18px;
margin-right: 4px; padding: 3px;
border: 1px solid var(--color-dark-1); margin-right: 5px;
border-radius: 4px; border-radius: 16px;
background: #fff; background: var(--color-dark-1);
transition: box-shadow 0.15s linear; transition: box-shadow 0.15s linear;
wc-icon {
display: block;
visibility: hidden;
width: 10px;
height: 10px;
transform: scale(0);
transition: transform 0.15s linear;
}
}
&:host([checked]) .dot wc-icon {
visibility: visible;
transform: scale(1);
} }
} }
`, `,
@ -112,8 +97,8 @@ class Switch extends Component {
font-size: map.get($v, 'f'); font-size: map.get($v, 'f');
.dot { .dot {
width: #{map.get($v, 'f')}; width: #{map.get($v, 'f') * 2.5};
height: #{map.get($v, 'f')}; height: #{map.get($v, 'f') * 1.25};
} }
} }
} }
@ -133,15 +118,11 @@ class Switch extends Component {
@loop $t, $c in $colors { @loop $t, $c in $colors {
:host([type='#{$t}']) { :host([type='#{$t}']) {
label { label {
color: var(--color-#{$c}-2); color: var(--color-#{$c}-1);
} }
.dot { .dot {
border-color: var(--color-#{$c}-2); background: var(--color-#{$c}-1);
&::after {
background: var(--color-#{$c}-2);
}
} }
&:host(:focus-within) .dot { &:host(:focus-within) .dot {