[tor-commits] [lego/develop] Update css for toggles checkbox in page animations

[hiro at torproject.org]

commit a1fa6cd2432e07bcba649864bd49c538ca1d3d33
Author: hiro <hiro at torproject.org>
Date:   Mon Sep 9 14:59:41 2019 +0200

    Update css for toggles checkbox in page animations
---
 assets/scss/_tor.scss | 84 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)

diff --git a/assets/scss/_tor.scss b/assets/scss/_tor.scss
index b673e5e..2deb29a 100644
--- a/assets/scss/_tor.scss
+++ b/assets/scss/_tor.scss
@@ -37,6 +37,90 @@
     color: $white;
 }
 
+// toggle buttons for animations
+
+.toggle {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 62px;
+  height: 32px;
+  display: inline-block;
+  position: relative;
+  border-radius: 50px;
+  overflow: hidden;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  background-color: #707070;
+  transition: background-color ease 0.3s;
+}
+
+.toggle:before {
+  content: "on off";
+  display: block;
+  position: absolute;
+  z-index: 2;
+  width: 28px;
+  height: 28px;
+  background: #fff;
+  left: 2px;
+  top: 2px;
+  border-radius: 50%;
+  font: 10px/28px Helvetica;
+  text-transform: uppercase;
+  font-weight: bold;
+  text-indent: -22px;
+  word-spacing: 37px;
+  color: #fff;
+  text-shadow: -1px -1px rgba(0,0,0,0.15);
+  white-space: nowrap;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+  transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
+}
+
+.toggle:checked {
+  background-color: #4CD964;
+}
+
+.toggle:checked:before {
+  left: 32px;
+}
+
+
+#https-switch:checked ~ #https {
+  display: inline;
+}
+
+#https-switch:checked ~ #http {
+  display: none;
+}
+
+#tor-switch:checked ~ #tor {
+  display: inline;
+}
+
+#https-switch:checked ~ #tor-switch:checked ~ .switch-on {
+    display: inline;
+}
+
+#https-switch:checked ~ #tor-switch:checked ~ .switch-off {
+    display: none;
+}
+
+#https {
+  display: none;
+
+}
+
+#tor {
+  display: none;
+}
+
+#https-tor {
+  display: none;
+}
+
 // Define darker background
 .bg-darker{
   background-color: $purple-darker;