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 (
- - {label ? {label} : null} + +
); } 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; }