From a8c6ac1367d8c2121634d9cf4dd8139a811ab137 Mon Sep 17 00:00:00 2001
From: Alasdair Smith <ali@alasdairsmith.co.uk>
Date: Mon, 16 Apr 2018 09:36:32 +0100
Subject: [PATCH] Style toggle switch

---
 .../stylesheets/app/editor/toolbar.less       | 58 +++++++++++++++++++
 .../stylesheets/core/_common-variables.less   |  4 ++
 .../public/stylesheets/core/ol-variables.less |  6 ++
 3 files changed, 68 insertions(+)

diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index 3175aa3b29..a73f46abc3 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -183,3 +183,61 @@
 		}
 	}
 }
+
+.toggle-wrapper {
+	width: 200px;
+	height: 24px;
+}
+
+.toggle-switch {
+  position: relative;
+	height: 100%;
+	width: 100%;
+  background-color: @toggle-switch-bg;
+  border-radius: @btn-border-radius-base;
+}
+
+.toggle-switch-label {
+	position: relative;
+	display: block;
+	font-weight: normal;
+  z-index: 2;
+  float: left;
+  width: 50%;
+  height: 100%;
+  line-height: 24px;
+	text-align: center;
+	margin-bottom: 0;
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.12s ease-out;
+}
+
+.toggle-switch-input {
+  position: absolute;
+  opacity: 0;
+}
+
+.toggle-switch-input:checked + .toggle-switch-label {
+  color: #fff;
+  font-weight: bold;
+}
+
+.toggle-switch-selection {
+  display: block;
+  position: absolute;
+  z-index: 1;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  width: calc(~"50% - 2px");
+  height: calc(~"100% - 4px");
+  background: @toggle-switch-highlight-color;
+  border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
+  transition: transform 0.12s ease-out, border-radius 0.12s ease-out;
+}
+
+.toggle-switch-input:checked:nth-child(4) ~ .toggle-switch-selection {
+  transform: translate(100%);
+  border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
+}
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index e9062caeff..9cb074c754 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -936,6 +936,10 @@
 @editor-toolbar-height            : 32px;
 @editor-toolbar-bg                : #fff;
 
+// Toggle switch
+@toggle-switch-bg                  : @gray-lightest;
+@toggle-switch-highlight-color     : @brand-primary;
+
 // Chat
 @chat-bg                          : transparent;
 @chat-message-color               : @text-color;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 49d701c5f1..e9125e0143 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -238,6 +238,12 @@
 // Editor toolbar
 @editor-toolbar-bg                : @ol-blue-gray-5;
 
+// Toggle switch
+@toggle-switch-bg                  : @ol-blue-gray-1;
+@toggle-switch-highlight-color     : @ol-green;
+@toggle-switch-radius-left         : @btn-border-radius-base 0 0 @btn-border-radius-base;
+@toggle-switch-radius-right        : 0 @btn-border-radius-base @btn-border-radius-base 0;
+
 // Chat
 @chat-bg                          : @ol-blue-gray-5;
 @chat-message-color               : #FFF;