Merge pull request #248 from LiskHQ/220-tab-styling

Make tabs more visible - Closes #220
LiskArchive · May 21, 2017 · 89ff7bc · 89ff7bc
2 parents 96b494c + 53f4041
commit 89ff7bc
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 3 deletions.
diff --git a/src/components/forging/forging.less b/src/components/forging/forging.less
@@ -1,4 +1,7 @@
 forging {
+  md-card md-card {
+    background: #f7f8f9;
+  }
   md-card-content {
     padding: 0 0 5px;
   }

diff --git a/src/components/forging/forging.pug b/src/components/forging/forging.pug
@@ -1,4 +1,4 @@
-div.offline-hide
+md-card.offline-hide
   div
     md-card.loading(ng-show='!$ctrl.delegate')
       md-progress-linear(md-mode='indeterminate')

diff --git a/src/components/main/main.less b/src/components/main/main.less
@@ -19,3 +19,27 @@ md-menu-item md-checkbox {
   margin: 0;
   padding: 8px;
 }
+
+md-tabs.main-tabs {
+  margin: 0 0 -8px 0;
+  md-tabs-wrapper {
+    margin: 0 8px;
+
+    &.md-stretch-tabs md-pagination-wrapper {
+      width: auto;
+      display: block;
+    }
+    md-ink-bar {
+      bottom: auto;
+      top: 0;
+    }
+  }
+  .md-tab {
+    background: #f4f4f4;
+    box-shadow: inset 0px -1px 1px -1px rgba(0, 0, 0, 0.12);
+    &.md-active {
+      background: white;
+      box-shadow: 0px -2px 1px 0px rgba(0,0,0,0.54);
+    }
+  }
+}
diff --git a/src/components/main/main.pug b/src/components/main/main.pug
@@ -1,5 +1,5 @@
 top
-md-tabs(md-stretch-tabs='always')
+md-tabs.main-tabs(md-stretch-tabs='always')
   md-tab(data-ui-sref='main.transactions', md-active='$ctrl.activeTab === "main.transactions"')
     md-tab-label Transactions
   md-tab(data-ui-sref='main.voting', md-active='$ctrl.activeTab === "main.voting"')

diff --git a/src/components/transactions/transactions.pug b/src/components/transactions/transactions.pug
@@ -1,7 +1,6 @@
 md-card.offline-hide
   md-card-content
     md-content(layout='row', layout-align='start center', layout-padding)
-      span.title.md-title Transactions
       div(flex)
       span.empty(ng-show='!$ctrl.transactions.length && $ctrl.loaded') No transactions
     md-content(layout='column', layout-align='center center')