Add pill buttons

hasgeek · Aug 21, 2020 · 41a84b5 · 41a84b5
1 parent 66d1f1c
commit 41a84b5
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/baseframe/static/css/mui.css b/baseframe/static/css/mui.css
@@ -4545,6 +4545,29 @@ 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;
+}
+.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;
+}
+.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 {
+  color: #4d5763;
+  text-decoration: none !important;
+}
+
 .mui-table.mui-table--hover > tbody > tr > td:hover {
   background-color: #bbdefb;
 }

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