optimize Radio size and disabled style
optimize Radio size and disabled style
This commit is contained in:
梁灏
parent
7098f97287
commit
7d7221ec98
4 changed files with 41 additions and 43 deletions
2
dist/styles/iview.all.css
vendored
2
dist/styles/iview.all.css
vendored
File diff suppressed because one or more lines are too long
2
dist/styles/iview.css
vendored
2
dist/styles/iview.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -33,8 +33,8 @@
|
||||||
}
|
}
|
||||||
&-inner {
|
&-inner {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 16px;
|
width: 14px;
|
||||||
height: 16px;
|
height: 14px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -45,8 +45,8 @@
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 10px;
|
width: 8px;
|
||||||
height: 10px;
|
height: 8px;
|
||||||
left: 2px;
|
left: 2px;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
border-radius: @border-radius-base;
|
border-radius: @border-radius-base;
|
||||||
|
|
@ -68,24 +68,34 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 选中状态
|
// 选中状态
|
||||||
.@{radio-prefix-cls}-checked {
|
.@{radio-prefix-cls}-checked {
|
||||||
.@{radio-inner-prefix-cls} {
|
.@{radio-inner-prefix-cls} {
|
||||||
border-color: @border-color-base;
|
border-color: @primary-color;
|
||||||
&:after {
|
&:after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
.transform(scale(1));
|
.transform(scale(1));
|
||||||
.transition(all @transition-time @ease-in-out);
|
.transition(all @transition-time @ease-in-out);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&:hover {
|
||||||
|
.@{radio-inner-prefix-cls} {
|
||||||
|
border-color: @primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{radio-prefix-cls}-disabled {
|
.@{radio-prefix-cls}-disabled {
|
||||||
|
cursor: @cursor-disabled;
|
||||||
|
.@{radio-prefix-cls}-input {
|
||||||
|
cursor: @cursor-disabled;
|
||||||
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.@{radio-inner-prefix-cls} {
|
.@{radio-inner-prefix-cls} {
|
||||||
border-color: @border-color-base;
|
border-color: @border-color-base;
|
||||||
|
|
@ -99,13 +109,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.@{radio-inner-prefix-cls}-input {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{radio-prefix-cls}-disabled + span {
|
.@{radio-prefix-cls}-disabled + span {
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
cursor: @cursor-disabled;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -203,7 +208,7 @@ span.@{radio-prefix-cls} + * {
|
||||||
&-disabled {
|
&-disabled {
|
||||||
border-color: @border-color-base;
|
border-color: @border-color-base;
|
||||||
background-color: @background-color-base;
|
background-color: @background-color-base;
|
||||||
cursor: not-allowed;
|
cursor: @cursor-disabled;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
|
|
||||||
&:first-child,
|
&:first-child,
|
||||||
|
|
|
||||||
|
|
@ -1,32 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Collapse active-key="2">
|
<Radio-group :model.sync="phone">
|
||||||
<Panel key="1">
|
<Radio value="apple">
|
||||||
Header1
|
<Icon type="social-apple"></Icon>
|
||||||
<Collapse active-key="2" slot="content">
|
<span>Apple</span>
|
||||||
<Panel key="1">
|
</Radio>
|
||||||
inHeader1
|
<Radio value="android" disabled>
|
||||||
<p slot="content">inContent1</p>
|
<Icon type="social-android"></Icon>
|
||||||
</Panel>
|
<span>Android</span>
|
||||||
<Panel key="2">
|
</Radio>
|
||||||
inHeader2
|
<Radio value="windows">
|
||||||
<p slot="content">inContent2</p>
|
<Icon type="social-windows"></Icon>
|
||||||
</Panel>
|
<span>Windows</span>
|
||||||
<Panel key="3">
|
</Radio>
|
||||||
inHeader3
|
</Radio-group>
|
||||||
<p slot="content">inContent3</p>
|
<Radio-group :model.sync="animal">
|
||||||
</Panel>
|
<Radio value="金斑蝶"></Radio>
|
||||||
</Collapse>
|
<Radio value="爪哇犀牛"></Radio>
|
||||||
</Panel>
|
<Radio value="印度黑羚"></Radio>
|
||||||
<Panel key="2">
|
</Radio-group>
|
||||||
Header2
|
<br><br>
|
||||||
<p slot="content">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
|
|
||||||
</Panel>
|
|
||||||
<Panel key="3">
|
|
||||||
Header3
|
|
||||||
<p slot="content">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
|
|
||||||
</Panel>
|
|
||||||
</Collapse>
|
|
||||||
<Button @click="activeKey = '2'">换</Button>
|
<Button @click="activeKey = '2'">换</Button>
|
||||||
</div>
|
</div>
|
||||||
<Radio :checked.sync="radio">Radio</Radio>
|
<Radio :checked.sync="radio">Radio</Radio>
|
||||||
|
|
@ -175,7 +168,7 @@
|
||||||
LoadingBar
|
LoadingBar
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
|
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|
@ -190,7 +183,7 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
changeGroup (data) {
|
changeGroup (data) {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue