Add pill buttons (#317)

hasgeek · Aug 26, 2020 · 0a8b83c · 0a8b83c
1 parent 66d1f1c
commit 0a8b83c
Show file tree

Hide file tree

Showing 4 changed files with 159 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;
@@ -4545,6 +4600,30 @@ li p + ol {
   outline: none;
 }
 
+.mui-tabs__bar--pills li {
+  border: 1px solid rgba(132, 146, 166, 0.3);
+  border-radius: 30px;
+  margin-right: 8px;
+  background: #f9f9f9;
+}
+.mui-tabs__bar--pills li a {
+  height: 30px;
+  line-height: 30px;
+  padding-left: 16px;
+  padding-right: 16px;
+  cursor: pointer;
+  color: #4d5763;
+  text-decoration: none !important;
+  text-transform: inherit;
+}
+.mui-tabs__bar--pills li.mui--is-active {
+  border: 1px solid rgba(93, 169, 232, 0.2);
+  background: #cfefff;
+}
+.mui-tabs__bar--pills li.mui--is-active a {
+  text-decoration: none !important;
+}
+
 .mui-table.mui-table--hover > tbody > tr > td:hover {
   background-color: #bbdefb;
 }

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%);
+}
diff --git a/baseframe/static/sass/baseframe-material/_tabs.scss b/baseframe/static/sass/baseframe-material/_tabs.scss
@@ -30,3 +30,29 @@
     outline: none;
   }
 }
+
+.mui-tabs__bar--pills {
+  li {
+    border: 1px solid $mui-divider-color;
+    border-radius: 30px;
+    margin-right: $mui-grid-padding/2;
+    background: $mui-bg-color-accent;
+  }
+  li a {
+    height: 30px;
+    line-height: 30px;
+    padding-left: $mui-grid-padding;
+    padding-right: $mui-grid-padding;
+    cursor: pointer;
+    color: $mui-text-light;
+    text-decoration: none !important;
+    text-transform: inherit;
+  }
+  li.mui--is-active {
+    border: 1px solid transparentize($mui-text-info, 0.8);
+    background: $mui-info-color;
+    a {
+      text-decoration: none !important;
+    }
+  }
+}