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 v-for="item in tags" :label="item.label" :key="item.label" true-value="true"></Checkbox>
</Checkbox-group> </Checkbox-group>
<div>{{ fruit }}</div> <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> </div>
</template> </template>
<script> <script>

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

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