update switch
parent
08a6bb043d
commit
eba5090656
|
@ -77,42 +77,20 @@ class Switch extends Component {
|
||||||
|
|
||||||
// 尺寸
|
// 尺寸
|
||||||
css`
|
css`
|
||||||
@use 'sass:map';
|
:host([size='small']) {
|
||||||
@use 'sass:math';
|
|
||||||
$sizes: (
|
|
||||||
s: (
|
|
||||||
hd: 14px,
|
|
||||||
h: 20px,
|
|
||||||
f: 10px
|
|
||||||
),
|
|
||||||
m: (
|
|
||||||
hd: 16px,
|
|
||||||
h: 24px,
|
|
||||||
f: 12px
|
|
||||||
),
|
|
||||||
xl: (
|
|
||||||
hd: 20px,
|
|
||||||
h: 36px,
|
|
||||||
f: 14px
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
@loop $s, $v in $sizes {
|
|
||||||
:host([size='#{$s}']) {
|
|
||||||
label {
|
label {
|
||||||
height: map.get($v, 'h');
|
height: 24px;
|
||||||
font-size: math.max(map.get($v, 'f'), 12px);
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch {
|
.switch {
|
||||||
min-width: map.get($v, 'hd') * 2 - 4;
|
min-width: 28px;
|
||||||
height: map.get($v, 'hd');
|
height: 16px;
|
||||||
padding: 0 #{math.div((map.get($v, 'hd') - map.get($v, 'f')), 2)};
|
padding: 0 2px;
|
||||||
}
|
}
|
||||||
.dot {
|
.dot {
|
||||||
width: map.get($v, 'f');
|
width: 12px;
|
||||||
height: map.get($v, 'f');
|
height: 12px;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
|
|
Loading…
Reference in New Issue