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 {
display: inline-flex;
align-items: center;
line-height: 1;
font-size: 14px;
cursor: pointer;

1
src/form/radio.js
View File

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

39
src/form/switch.js
View File

@ -13,7 +13,6 @@ class Switch extends Component {
default: '',
attribute: false
},
checked: false,
disabled: false,
readonly: false
}
@ -23,7 +22,6 @@ class Switch extends Component {
:host {
display: inline-flex;
align-items: center;
line-height: 1;
font-size: 14px;
cursor: pointer;
@ -46,26 +44,13 @@ class Switch extends Component {
display: flex;
justify-content: center;
align-items: center;
width: 14px;
height: 14px;
margin-right: 4px;
border: 1px solid var(--color-dark-1);
border-radius: 4px;
background: #fff;
width: 36px;
height: 18px;
padding: 3px;
margin-right: 5px;
border-radius: 16px;
background: var(--color-dark-1);
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');
.dot {
width: #{map.get($v, 'f')};
height: #{map.get($v, 'f')};
width: #{map.get($v, 'f') * 2.5};
height: #{map.get($v, 'f') * 1.25};
}
}
}
@ -133,15 +118,11 @@ class Switch extends Component {
@loop $t, $c in $colors {
:host([type='#{$t}']) {
label {
color: var(--color-#{$c}-2);
color: var(--color-#{$c}-1);
}
.dot {
border-color: var(--color-#{$c}-2);
&::after {
background: var(--color-#{$c}-2);
}
background: var(--color-#{$c}-1);
}
&:host(:focus-within) .dot {