Add toggle switch

hasgeek · Aug 25, 2020 · 65e1cec · 65e1cec
1 parent 1d92345
commit 65e1cec
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 0 deletions.
diff --git a/baseframe/static/css/codemirror-material.css b/baseframe/static/css/codemirror-material.css
@@ -16,3 +16,8 @@
   border-color: #4a90e2;
   border-width: 2px;
 }
+
+.CodeMirror-wrap pre.CodeMirror-line,
+.CodeMirror-wrap pre.CodeMirror-line-like {
+  padding: 0;
+}
diff --git a/baseframe/static/css/mui.css b/baseframe/static/css/mui.css
@@ -4258,6 +4258,61 @@ li p + ol {
   color: #21b685;
 }
 
+.switch-input {
+  display: none;
+}
+
+.switch-label {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  text-align: left;
+  padding: 16px 0 16px 32px;
+}
+
+.switch-label:before,
+.switch-label:after {
+  content: '';
+  position: absolute;
+  margin: 0;
+  outline: 0;
+  top: 50%;
+  -ms-transform: translate(0, -50%);
+  -webkit-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+
+.switch-label:before {
+  left: 1px;
+  width: 34px;
+  height: 14px;
+  background-color: #9e9e9e;
+  border-radius: 8px;
+}
+
+.switch-label:after {
+  left: 0;
+  width: 20px;
+  height: 20px;
+  background-color: #fafafa;
+  border-radius: 50%;
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+    0 1px 3px 0 rgba(0, 0, 0, 0.12);
+}
+
+.switch-input:checked + .switch-label:before {
+  background-color: rgba(15, 115, 237, 0.6);
+}
+
+.switch-input:checked + .switch-label:after {
+  background-color: #0f73ed;
+  -ms-transform: translate(80%, -50%);
+  -webkit-transform: translate(80%, -50%);
+  transform: translate(80%, -50%);
+}
+
 .chip {
   padding: 0 5px 5px;
   border: 0;

diff --git a/baseframe/static/sass/baseframe-material/_form.scss b/baseframe/static/sass/baseframe-material/_form.scss
@@ -217,3 +217,52 @@
     }
   }
 }
+
+.switch-input {
+  display: none;
+}
+.switch-label {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  text-align: left;
+  padding: 16px 0 16px 32px;
+}
+.switch-label:before,
+.switch-label:after {
+  content: '';
+  position: absolute;
+  margin: 0;
+  outline: 0;
+  top: 50%;
+  -ms-transform: translate(0, -50%);
+  -webkit-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  -webkit-transition: all 0.3s ease;
+  transition: all 0.3s ease;
+}
+.switch-label:before {
+  left: 1px;
+  width: 34px;
+  height: 14px;
+  background-color: #9e9e9e;
+  border-radius: 8px;
+}
+.switch-label:after {
+  left: 0;
+  width: 20px;
+  height: 20px;
+  background-color: #fafafa;
+  border-radius: 50%;
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+    0 1px 3px 0 rgba(0, 0, 0, 0.12);
+}
+.switch-input:checked + .switch-label:before {
+  background-color: transparentize($mui-primary-color, 0.4);
+}
+.switch-input:checked + .switch-label:after {
+  background-color: $mui-primary-color;
+  -ms-transform: translate(80%, -50%);
+  -webkit-transform: translate(80%, -50%);
+  transform: translate(80%, -50%);
+}