diff --git a/docs/components/Layout/index.jsx b/docs/components/Layout/index.jsx
index 6d6767629..3407ba139 100644
--- a/docs/components/Layout/index.jsx
+++ b/docs/components/Layout/index.jsx
@@ -78,6 +78,7 @@ const componentsBySection = {
'checkbox',
'checkbox-group',
'radio',
+ 'radio-group',
'select',
'date-picker',
],
diff --git a/src/components/adslot-ui/Radio/index.jsx b/src/components/adslot-ui/Radio/index.jsx
index 72ce88c81..59ad60939 100644
--- a/src/components/adslot-ui/Radio/index.jsx
+++ b/src/components/adslot-ui/Radio/index.jsx
@@ -38,8 +38,13 @@ class RadioButton extends React.Component {
return (
);
}
diff --git a/src/components/adslot-ui/Radio/styles.scss b/src/components/adslot-ui/Radio/styles.scss
index df35dd595..b8063f8e9 100644
--- a/src/components/adslot-ui/Radio/styles.scss
+++ b/src/components/adslot-ui/Radio/styles.scss
@@ -1,14 +1,36 @@
+@import '~styles/variable';
+
.radio-component {
+ label {
+ line-height: 18px;
+ margin-left: -16px;
+ font-weight: $font-weight-light;
+ cursor: pointer;
+
+ span {
+ margin-left: 5px;
+ vertical-align: bottom;
+ }
+ }
+
input {
- vertical-align: middle;
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ background: $color-background;
+ border: 0;
+ opacity: 0;
cursor: pointer;
}
- .radio-label {
+ .radio-component-input-container {
+ width: 16px;
+ height: 18px;
+ display: inline-block;
+ position: relative;
vertical-align: middle;
- padding-left: 5px;
}
-
- padding-top: 10px;
- padding-bottom: 10px;
}