gilles/webgems
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

toggle styling done

Browse Source
This commit is contained in:
Erin
2019-07-26 06:06:55 -05:00
parent 3c5279a53c
commit 394fdeb6aa
1 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/Sidebar.vue
View File

@@ -3,7 +3,7 @@
.sidebar .sidebar
template(v-for='category in categories') template(v-for='category in categories')
nuxt-link(:to='category.slug') {{ category.title }} 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}") Cards
div(class="viewToggle" :class="{active: !cardsShown}") Table div(class="viewToggle" :class="{active: !cardsShown}") Table
</template> </template>
@@ -44,14 +44,23 @@ export default {
padding: 0.5rem 1rem 0.5rem 1rem; padding: 0.5rem 1rem 0.5rem 1rem;
font-weight: 600; font-weight: 600;
} }
.viewToggle { .toggleWrapper {
background-color: yellow; display: grid;
grid-template-columns: 1fr 1fr;
width: min-content;
border: 3px; border: 3px;
border-color: #08e5ff;
border-style: solid; border-style: solid;
border-radius: .5rem;
overflow:hidden;
}
.viewToggle {
padding: 0 .2rem;
color: #008190;
} }
.active { .active {
background-color: green; background-color: #08e5ff;
color: #232331;
} }
} }