Switch 宽度自适应 inner 内容 (#3516)

components/switch/demo/basic.md

@@ -29,6 +29,5 @@ ReactDOM.render(
 <style>
 .ant-switch {
   margin-bottom: 8px;
-  display: block;
 }
 <style>

components/switch/demo/disabled.md

@@ -31,6 +31,7 @@ const Test = React.createClass({
     return (
       <div>
         <Switch disabled={this.state.disabled} />
+        <br />
         <Button type="primary" onClick={this.toggle}>Toggle disabled</Button>
       </div>
     );

components/switch/demo/size.md

@@ -19,6 +19,7 @@ import { Switch } from 'antd';
 ReactDOM.render(
   <div>
     <Switch />
+    <br />
     <Switch size="small" />
   </div>
 , mountNode);

components/switch/demo/text.md

@@ -18,7 +18,9 @@ import { Switch, Icon } from 'antd';
 
 ReactDOM.render(<div>
   <Switch checkedChildren={'开'} unCheckedChildren={'关'} />
+  <br />
   <Switch checkedChildren="1" unCheckedChildren="0" />
+  <br />
   <Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />} />
 </div>, mountNode);
 ````

components/switch/style/index.less

@@ -8,8 +8,8 @@
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  width: 44px;
   height: 22px;
+  min-width: 44px;
   line-height: 20px;
   vertical-align: middle;
   border-radius: 20px;
@@ -22,8 +22,8 @@
   &-inner {
     color: #fff;
     font-size: 12px;
-    position: absolute;
-    left: 24px;
+    margin-left: 24px;
+    margin-right: 6px;
   }
 
   &:after {
@@ -32,11 +32,12 @@
     height: 18px;
     left: 2px;
     top: 1px;
+
     border-radius: 18px;
     background-color: #fff;
     content: " ";
     cursor: pointer;
-    transition: left @switch-duration @ease-in-out-circ, width @switch-duration @ease-in-out-circ;
+    transition: all @switch-duration @ease-in-out-circ, width @switch-duration @ease-in-out-circ;
   }
 
   &:active:after {
@@ -54,23 +55,40 @@
 
   &-small {
     height: 14px;
+    min-width: 28px;
     line-height: 12px;
-    width: 28px;
+
+    .@{switch-prefix-cls}-inner {
+      margin-left: 18px;
+      margin-right: 3px;
+    }
+
     &:after {
       width: 12px;
       height: 12px;
       top: 0;
       left: 0;
     }
+
     &:active:after {
       width: 16px;
     }
   }
 
-  &-small&-checked:after {
-    left: 14px;
+  &-small&-checked {
+    &:after {
+      left: 100%;
+      margin-left: -12px;
+    }
+
+    .@{switch-prefix-cls}-inner {
+      margin-left: 3px;
+      margin-right: 18px;
+    }
   }
 
+
+
   &-small:active&-checked:after {
     left: 10px;
   }
@@ -80,11 +98,13 @@
     background-color: @primary-color;
 
     .@{switch-prefix-cls}-inner {
-      left: 6px;
+      margin-left: 6px;
+      margin-right: 24px;
     }
 
     &:after {
-      left: 22px;
+      left: 100%;
+      margin-left: -20px;
     }
 
     &:active:after {