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
Show stats 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> <br><br>
<Radio-group v-model="phone"> <Radio-group v-model="phone">
<Radio label="apple"> <Radio label="apple">
<Icon type="social-apple"></Icon> <Icon type="logo-apple"></Icon>
<span>Apple</span> <span>Apple</span>
</Radio> </Radio>
<Radio label="android"> <Radio label="android">
@ -36,6 +36,48 @@
<Radio label="深圳"></Radio> <Radio label="深圳"></Radio>
<Radio label="杭州"></Radio> <Radio label="杭州"></Radio>
</Radio-group> </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> </div>
</template> </template>
<script> <script>

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

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