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

update Checkbox size

Browse source
This commit is contained in:
梁灏 2019-09-15 10:16:38 +08:00
parent f21856e3bc
commit f8c3640e5d
2 changed files with 62 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

44
examples/routers/radio.vue
View file

@ -6,7 +6,7 @@
<br><br>
<Radio-group v-model="phone">
<Radio label="apple">
<Icon type="social-apple"></Icon>
<Icon type="logo-apple"></Icon>
<span>Apple</span>
</Radio>
<Radio label="android">
@ -36,6 +36,48 @@
<Radio label="深圳"></Radio>
<Radio label="杭州"></Radio>
</Radio-group>
<Divider></Divider>
<Radio-group v-model="phone" size="small">
<Radio label="apple">
<Icon type="logo-apple"></Icon>
<span>选项一</span>
</Radio>
<Radio label="android">
<Icon type="logo-android"></Icon>
<span>选项二</span>
</Radio>
<Radio label="windows">
<Icon type="logo-windows"></Icon>
<span>选项三</span>
</Radio>
</Radio-group>
<br><br>
<Radio-group v-model="phone" size="default">
<Radio label="apple">
<span>选项一</span>
</Radio>
<Radio label="android">
<span>选项二</span>
</Radio>
<Radio label="windows">
<span>选项三</span>
</Radio>
</Radio-group>
<br><br>
<Radio-group v-model="phone" size="large">
<Radio label="apple">
<Icon type="logo-apple"></Icon>
<span>选项一</span>
</Radio>
<Radio label="android">
<Icon type="logo-android"></Icon>
<span>选项二</span>
</Radio>
<Radio label="windows">
<Icon type="logo-windows"></Icon>
<span>选项三</span>
</Radio>
</Radio-group>
</div>
</template>
<script>

38
src/styles/components/radio.less
View file

@ -10,7 +10,7 @@
.@{radio-group-prefix-cls} {
display: inline-block;
font-size: @font-size-small;
font-size: @font-size-base;
vertical-align: middle;
//outline: none;
&-vertical{
@ -24,7 +24,7 @@
// 普通状态 - Normal state
.@{radio-prefix-cls}-wrapper {
font-size: @font-size-small;
font-size: @font-size-base;
vertical-align: middle;
display: inline-block;
position: relative;
@ -53,8 +53,8 @@
}
&-inner {
display: inline-block;
width: 14px;
height: 14px;
width: 16px;
height: 16px;
position: relative;
top: 0;
left: 0;
@ -65,8 +65,8 @@
&:after {
position: absolute;
width: 8px;
height: 8px;
width: 10px;
height: 10px;
left: 2px;
top: 2px;
border-radius: @border-radius-base;
@ -81,26 +81,26 @@
}
}
&-large{
font-size: @font-size-base;
font-size: @font-size-large;
& .@{radio-inner-prefix-cls}{
width: 16px;
height: 16px;
width: 18px;
height: 18px;
&:after{
width: 10px;
height: 10px;
width: 12px;
height: 12px;
}
}
&.@{radio-prefix-cls}-wrapper, & .@{radio-prefix-cls}-wrapper{
font-size: @font-size-base;
font-size: @font-size-large;
}
}
&-small{
& .@{radio-inner-prefix-cls}{
width: 12px;
height: 12px;
width: 14px;
height: 14px;
&:after{
width: 6px;
height: 6px;
width: 8px;
height: 8px;
}
}
}
@ -179,7 +179,7 @@ span.@{radio-prefix-cls} + * {
line-height: @btn-circle-size - 2px;
margin: 0;
padding: 0 16px - 1px;
font-size: @font-size-small;
font-size: @font-size-base;
color: @btn-default-color;
transition: all @transition-time ease-in-out;
cursor: pointer;
@ -317,7 +317,7 @@ span.@{radio-prefix-cls} + * {
.@{radio-group-button-prefix-cls}.@{radio-group-prefix-cls}-large .@{radio-prefix-cls}-wrapper{
height: @btn-circle-size-large;
line-height: @btn-circle-size-large - 2px;
font-size: @font-size-base;
font-size: @font-size-large;
&:after{
height: @btn-circle-size-large + 4px;
}
@ -327,7 +327,7 @@ span.@{radio-prefix-cls} + * {
height: @btn-circle-size-small;
line-height: @btn-circle-size-small - 2px;
padding: 0 12px;
font-size: @font-size-small;
font-size: @font-size-base;
&:after{
height: @btn-circle-size-small + 4px;