mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-20 18:26:46 +10:00
Fix Radio & Checkbox margin again
This commit is contained in:
afc163
@@ -161,6 +161,11 @@ form {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ant-checkbox-vertical + .ant-checkbox-vertical,
|
||||
.ant-radio-vertical + .ant-radio-vertical {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.ant-input-number {
|
||||
margin-top: -1px;
|
||||
margin-right: 8px;
|
||||
|
||||
@@ -12,15 +12,20 @@ export default class Radio extends React.Component {
|
||||
}
|
||||
render() {
|
||||
const { prefixCls, children, checked, disabled, className, style } = this.props;
|
||||
const wrapperClassString = classNames({
|
||||
[`${prefixCls}-wrapper`]: true,
|
||||
[`${prefixCls}-wrapper-checked`]: checked,
|
||||
[`${prefixCls}-wrapper-disabled`]: disabled,
|
||||
[className]: !!className,
|
||||
});
|
||||
const classString = classNames({
|
||||
[`${prefixCls}`]: true,
|
||||
[`${prefixCls}-checked`]: checked,
|
||||
[`${prefixCls}-disabled`]: disabled,
|
||||
[className]: !!className,
|
||||
});
|
||||
return (
|
||||
<label className={classString} style={style}>
|
||||
<RcRadio {...this.props} style={null} children={null} />
|
||||
<label className={wrapperClassString} style={style}>
|
||||
<RcRadio {...this.props} className={classString} style={null} children={null} />
|
||||
{children ? <span>{children}</span> : null}
|
||||
</label>
|
||||
);
|
||||
|
||||
+113
-113
@@ -9,14 +9,19 @@
|
||||
.@{radio-group-prefix-cls} {
|
||||
display: inline-block;
|
||||
font-size: @font-size-base;
|
||||
label {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 一般状态
|
||||
.@{radio-prefix-cls} {
|
||||
.@{radio-prefix-cls}-wrapper {
|
||||
font-size: @font-size-base;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.@{radio-prefix-cls} {
|
||||
white-space: nowrap;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
@@ -24,9 +29,6 @@
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
label& {
|
||||
margin-right: 8px;
|
||||
}
|
||||
&:hover,
|
||||
&-focused {
|
||||
.@{radio-inner-prefix-cls} {
|
||||
@@ -118,119 +120,117 @@ span.@{radio-prefix-cls} + * {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.@{radio-prefix-cls} {
|
||||
label&-button {
|
||||
background: #fff;
|
||||
padding: 0 16px;
|
||||
margin: 0;
|
||||
height: 28px;
|
||||
line-height: 26px;
|
||||
.@{radio-prefix-cls}-button-wrapper {
|
||||
margin: 0;
|
||||
height: 28px;
|
||||
line-height: 26px;
|
||||
color: #666;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border: 1px solid @border-color-base;
|
||||
border-left: 0;
|
||||
background: #fff;
|
||||
padding: 0 16px;
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border: 1px solid @border-color-base;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
}
|
||||
> .@{radio-prefix-cls}-button {
|
||||
margin-left: 0;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
> span.@{radio-prefix-cls}-button {
|
||||
margin-left: 0;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.@{radio-group-prefix-cls}-large & {
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.@{radio-group-prefix-cls}-small & {
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
padding: 0 12px;
|
||||
&:first-child {
|
||||
border-radius: @border-radius-sm 0 0 @border-radius-sm;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 @border-radius-sm @border-radius-sm 0;
|
||||
}
|
||||
}
|
||||
.@{radio-group-prefix-cls}-large & {
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.@{radio-group-prefix-cls}-small & {
|
||||
height: 22px;
|
||||
line-height: 20px;
|
||||
padding: 0 12px;
|
||||
&:first-child {
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
border-left: 1px solid @border-color-base;
|
||||
border-radius: @border-radius-sm 0 0 @border-radius-sm;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&-focused {
|
||||
color: @primary-color;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.@{radio-prefix-cls}-inner,
|
||||
input {
|
||||
.opacity(0);
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&-checked {
|
||||
background: #fff;
|
||||
border-color: @primary-color;
|
||||
color: @primary-color;
|
||||
box-shadow: -1px 0 0 0 @primary-color;
|
||||
|
||||
&:first-child {
|
||||
border-color: @primary-color;
|
||||
box-shadow: none!important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: tint(@primary-color, 20%);
|
||||
box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
|
||||
color: tint(@primary-color, 20%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: shade(@primary-color, 5%);
|
||||
box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
|
||||
color: shade(@primary-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
border-color: @border-color-base;
|
||||
background-color: #f7f7f7;
|
||||
cursor: not-allowed;
|
||||
color: #ccc;
|
||||
|
||||
&:first-child,
|
||||
&:hover {
|
||||
border-color: @border-color-base;
|
||||
background-color: #f7f7f7;
|
||||
color: #ccc;
|
||||
}
|
||||
&:first-child {
|
||||
border-left-color: @border-color-base;
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled.@{radio-prefix-cls}-button-checked {
|
||||
color: #fff;
|
||||
background-color: #e6e6e6;
|
||||
border-color: @border-color-base;
|
||||
border-radius: 0 @border-radius-sm @border-radius-sm 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
border-left: 1px solid @border-color-base;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
}
|
||||
|
||||
&:first-child:last-child {
|
||||
border-radius: @border-radius-base;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&-focused {
|
||||
color: @primary-color;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.@{radio-prefix-cls}-inner,
|
||||
input {
|
||||
.opacity(0);
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
&-checked {
|
||||
background: #fff;
|
||||
border-color: @primary-color;
|
||||
color: @primary-color;
|
||||
box-shadow: -1px 0 0 0 @primary-color;
|
||||
|
||||
&:first-child {
|
||||
border-color: @primary-color;
|
||||
box-shadow: none!important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: tint(@primary-color, 20%);
|
||||
box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
|
||||
color: tint(@primary-color, 20%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: shade(@primary-color, 5%);
|
||||
box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
|
||||
color: shade(@primary-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
border-color: @border-color-base;
|
||||
background-color: #f7f7f7;
|
||||
cursor: not-allowed;
|
||||
color: #ccc;
|
||||
|
||||
&:first-child,
|
||||
&:hover {
|
||||
border-color: @border-color-base;
|
||||
background-color: #f7f7f7;
|
||||
color: #ccc;
|
||||
}
|
||||
&:first-child {
|
||||
border-left-color: @border-color-base;
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled&-checked {
|
||||
color: #fff;
|
||||
background-color: #e6e6e6;
|
||||
border-color: @border-color-base;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user