diff --git a/src/js/toggle.jsx b/src/js/toggle.jsx index ffc1f56980047d..fa0d143bddf207 100644 --- a/src/js/toggle.jsx +++ b/src/js/toggle.jsx @@ -6,7 +6,8 @@ var Toggle = React.createClass({ propTypes: { onToggle: React.PropTypes.func, - toggled: React.PropTypes.bool + toggled: React.PropTypes.bool, + label: React.PropTypes.string }, mixins: [Classable], @@ -23,9 +24,12 @@ var Toggle = React.createClass({ }) return ( -
-
- +
+ {this.props.label ?
{this.props.label}
: ''} +
+
+ +
); }, diff --git a/src/less/components/toggle.less b/src/less/components/toggle.less index e9c97f8a4a4622..0b7fe7487c76f9 100644 --- a/src/less/components/toggle.less +++ b/src/less/components/toggle.less @@ -1,44 +1,53 @@ -.mui-toggle { - position: relative; - line-height: 24px; - width: 36px; - cursor: pointer; +.mui-toggle-wrap { - * { - .ease-out(); + .mui-toggle-label { + display: inline-block; + padding-right: 10px; + cursor: pointer; } - - .mui-toggle-track { - width: 100%; - height: 14px; - border-radius: 30px; - background-color: @toggle-track-off-color; - } - - .mui-toggle-thumb { - position: absolute; - top: -3px; - width: @toggle-size; - height: @toggle-size; + .mui-toggle { + position: relative; + display: inline-block; line-height: 24px; - left: 0; - border-radius: 50%; - background-color: @toggle-thumb-off-color; + width: 36px; + cursor: pointer; - .mui-paper-container { - border-radius: 50%; + * { + .ease-out(); } - } - &.mui-is-toggled { - .mui-toggle-track { - background-color: @toggle-track-on-color; + width: 100%; + height: 14px; + border-radius: 30px; + background-color: @toggle-track-off-color; } .mui-toggle-thumb { - left: 16px; - background-color: @toggle-thumb-on-color; + position: absolute; + top: -3px; + width: @toggle-size; + height: @toggle-size; + line-height: 24px; + left: 0; + border-radius: 50%; + background-color: @toggle-thumb-off-color; + + .mui-paper-container { + border-radius: 50%; + } + } + + &.mui-is-toggled { + + .mui-toggle-track { + background-color: @toggle-track-on-color; + } + + .mui-toggle-thumb { + left: 16px; + background-color: @toggle-thumb-on-color; + } } } } \ No newline at end of file