toggle styling done

2019-07-26 06:06:55 -05:00
parent 3c5279a53c
commit 394fdeb6aa
1 changed files with 14 additions and 5 deletions
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -3,7 +3,7 @@
    .sidebar
      template(v-for='category in categories')
        nuxt-link(:to='category.slug') {{ category.title }}
-      div(@click="toggleCardsShown")
+      div(class="toggleWrapper" @click="toggleCardsShown")
        div(class="viewToggle" :class="{active: cardsShown}") Cards
        div(class="viewToggle" :class="{active: !cardsShown}") Table
 </template>
@@ -44,14 +44,23 @@ export default {
    padding: 0.5rem 1rem 0.5rem 1rem;
    font-weight: 600;
  }
-	.viewToggle {
-		background-color: yellow;
+	.toggleWrapper {
+		display: grid;
+  	grid-template-columns: 1fr 1fr;
+		width: min-content;
 		border: 3px;
+		border-color: #08e5ff;
 		border-style: solid;
-
+		border-radius: .5rem;
+		overflow:hidden;
+	}
+	.viewToggle {
+		padding: 0 .2rem;
+		color: #008190;
 	}
 	.active {
-		background-color: green;
+		background-color: #08e5ff;
+		color: #232331;
 	}
 }