drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Checkbox style

Browse source
This commit is contained in:
梁灏 2019-09-15 10:32:40 +08:00
parent f8c3640e5d
commit 0a36764e78
2 changed files with 39 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
examples/routers/checkbox.vue
View file

@ -26,6 +26,24 @@
<Checkbox v-for="item in tags" :label="item.label" :key="item.label" true-value="true"></Checkbox>
</Checkbox-group>
<div>{{ fruit }}</div>
<Divider></Divider>
<CheckboxGroup v-model="fruit" size="small">
<Checkbox label="香蕉"></Checkbox>
<Checkbox label="苹果"></Checkbox>
<Checkbox label="西瓜"></Checkbox>
</CheckboxGroup>
<br>
<CheckboxGroup v-model="fruit" size="default">
<Checkbox label="香蕉"></Checkbox>
<Checkbox label="苹果"></Checkbox>
<Checkbox label="西瓜"></Checkbox>
</CheckboxGroup>
<br>
<CheckboxGroup v-model="fruit" size="large">
<Checkbox label="香蕉"></Checkbox>
<Checkbox label="苹果"></Checkbox>
<Checkbox label="西瓜"></Checkbox>
</CheckboxGroup>
</div>
</template>
<script>

42
src/styles/mixins/checkbox.less
View file

@ -28,8 +28,8 @@
&-inner {
display: inline-block;
width: 14px;
height: 14px;
width: 16px;
height: 16px;
position: relative;
top: 0;
left: 0;
@ -55,8 +55,8 @@
}
&-large{
& .@{checkbox-inner-prefix-cls} {
width: 16px;
height: 16px;
width: 18px;
height: 18px;
&:after{
width: 5px;
height: 9px;
@ -64,10 +64,10 @@
}
}
&-small{
font-size: 12px;
font-size: @font-size-base;
& .@{checkbox-inner-prefix-cls} {
width: 12px;
height: 12px;
width: 14px;
height: 14px;
&:after{
top: 0;
left: 3px;
@ -112,8 +112,8 @@
width: 4px;
height: 8px;
position: absolute;
top: 1px;
left: 4px;
top: 2px;
left: 5px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
@ -126,8 +126,8 @@
.@{checkbox-prefix-cls}-checked{
.@{checkbox-inner-prefix-cls} {
&:after{
width: 5px;
height: 9px;
width: 6px;
height: 10px;
}
}
}
@ -136,8 +136,8 @@
.@{checkbox-prefix-cls}-checked{
.@{checkbox-inner-prefix-cls} {
&:after{
top: 0;
left: 3px;
top: 1px;
left: 4px;
}
}
}
@ -192,12 +192,12 @@
.@{checkbox-prefix-cls}-indeterminate{
.@{checkbox-inner-prefix-cls}:after{
content: '';
width: 8px;
width: 10px;
height: 1px;
transform: scale(1);
position: absolute;
left: 2px;
top: 5px;
top: 6px;
}
&:hover {
@ -222,23 +222,23 @@
.@{checkbox-prefix-cls}-large {
.@{checkbox-prefix-cls}-indeterminate{
.@{checkbox-inner-prefix-cls}:after{
width: 10px;
top: 6px;
width: 12px;
top: 7px;
}
}
}
.@{checkbox-prefix-cls}-small {
.@{checkbox-prefix-cls}-indeterminate{
.@{checkbox-inner-prefix-cls}:after{
width: 6px;
top: 4px;
width: 8px;
top: 5px;
}
}
}
.@{checkbox-prefix-cls}-wrapper {
cursor: pointer;
font-size: @font-size-small;
font-size: @font-size-base;
display: inline-block;
margin-right: 8px;
//outline: none;
@ -248,7 +248,7 @@
}
&.@{checkbox-prefix-cls}-large{
font-size: @font-size-base;
font-size: @font-size-large;
}
}