added BtnSwitch component

src/component/Input/BtnSwitch/BtnSwitch.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+require('./BtnSwitch.styl')
+
+export const BtnSwitch = props =>
+  <div className='btnswitch'>
+    <label className='switch nomarginlabel'>
+      <input type='checkbox' />
+      <span className='slider round' />
+    </label>
+    <div className='btnswitch__text'>
+      On
+    </div>
+  </div>
+
+export default BtnSwitch

src/component/Input/BtnSwitch/BtnSwitch.styl

@@ -0,0 +1,57 @@
+@import '../../../css/Variable.styl'
+
+.btnswitch
+  display flex
+  align-items center
+  &__text
+    margin-left 10px
+
+.switch
+  position relative
+  display inline-block
+  width 60px
+  height 34px
+
+.switch input
+  display none
+
+.slider
+  position absolute
+  cursor pointer
+  top 0
+  left 0
+  right 0
+  bottom 0
+  background-color #ccc
+  -webkit-transition .4s
+  transition .4s
+
+.slider:before
+  position absolute
+  content ""
+  height 26px
+  width 26px
+  left 4px
+  bottom 4px
+  background-color white
+  -webkit-transition .4s
+  transition .4s
+
+input:checked + .slider
+  background-color blue
+
+input:focus + .slider
+  box-shadow 0 0 1px blue
+
+input:checked + .slider:before
+  -webkit-transform translateX(26px)
+  -ms-transform translateX(26px)
+  transform translateX(26px)
+
+/* Rounded sliders */
+.slider.round
+  border-radius 34px
+
+.slider.round:before
+  border-radius: 50%
+

src/component/Input/TextAreaPlugin.styl → src/component/Input/TextAreaPlugin/TextAreaPlugin.styl

@@ -1,4 +1,4 @@
-@import '../../css/Variable.styl'
+@import '../../../css/Variable.styl'
 
 .editiontitle
   width 60%

src/index.dev.js

@@ -6,7 +6,8 @@ import PopinFixedHeader from './component/PopinFixed/PopinFixedHeader.jsx'
 import PopinFixedOption from './component/PopinFixed/PopinFixedOption.jsx'
 import PopinFixedContent from './component/PopinFixed/PopinFixedContent.jsx'
 
-import TextAreaPlugin from './component/Input/TextAreaPlugin.jsx'
+import TextAreaPlugin from './component/Input/TextAreaPlugin/TextAreaPlugin.jsx'
+import BtnSwitch from './component/Input/BtnSwitch/BtnSwitch.jsx'
 
 import Timeline from './component/Timeline/Timeline.jsx'
 
@@ -19,6 +20,8 @@ ReactDOM.render(
       onClickCloseBtn={() => {}}
     />
 
+    <BtnSwitch />
+
     <PopinFixedOption customClass={`${'randomClass'}`} />
 
     <PopinFixedContent customClass={`${'randomClass'}__contentpage`}>

src/index.js

@@ -5,7 +5,8 @@ import libPopinFixedContent from './component/PopinFixed/PopinFixedContent.jsx'
 
 import libTimeline from './component/Timeline/Timeline.jsx'
 
-import libTextAreaPlugin from './component/Input/TextAreaPlugin.jsx'
+import libTextAreaPlugin from './component/Input/TextAreaPlugin/TextAreaPlugin.jsx'
+import libBtnSwitch from './component/Input/BtnSwitch/BtnSwitch.jsx'
 
 export const PopinFixed = libPopinFixed
 export const PopinFixedHeader = libPopinFixedHeader
@@ -15,3 +16,4 @@ export const PopinFixedContent = libPopinFixedContent
 export const Timeline = libTimeline
 
 export const TextAreaPlugin = libTextAreaPlugin
+export const BtnSwitch = libBtnSwitch