Import 'react-toggle-switch' and organize its design

Lokiedu · Apr 17, 2017 · 70a0d41 · 70a0d41
1 parent 8e2a636
commit 70a0d41
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -105,6 +105,7 @@
     "react-redux": "~5.0.1",
     "react-router": "~3.0.0",
     "react-router-redux": "~4.0.7",
+    "react-toggle-switch": "^2.1.3",
     "react-transition-group": "^1.1.1",
     "redux": "~3.6.0",
     "redux-immutablejs": "0.0.8",

diff --git a/src/less/blocks/switch.less b/src/less/blocks/switch.less
@@ -0,0 +1,31 @@
+.switch {
+  position: relative;
+  width: 32px;
+  height: 16px;
+  border-radius: 16px;
+  cursor: pointer;
+
+  &-toggle {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: #fff;
+    left: 0;
+    transition: all 0.25s ease-in-out;
+    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
+  }
+
+  &:not(.on) {
+    background-color: #e0e0e0;
+    border-color: #e0e0e0;
+  }
+
+  &.on {
+    background-color: green;
+
+    .switch-toggle {
+      left: 50%;
+    }
+  }
+}
diff --git a/src/less/styles.less b/src/less/styles.less
@@ -141,3 +141,4 @@
 @import 'blocks/river-item';
 @import 'blocks/bio';
 @import 'blocks/sidebar-modal';
+@import 'blocks/switch';