opdavies/rebuilding-acquia
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Extract a mobile button component

Browse source
This commit is contained in:
Oliver Davies 2019-03-21 01:37:32 +00:00
parent e48ada8c59
commit e5d9079293
1 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/Environment/ActionCards.vue
View file

@ -1,9 +1,9 @@
<template>
<div>
<ul class="list-reset flex flex-wrap md:hidden -mx-1 mb-5">
<li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'code' ? 'bg-blue-400' : 'bg-blue-300']" @click="active = 'code'">Code</button></li>
<li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'databases' ? 'bg-blue-400' : 'bg-blue-300']" @click="active = 'databases'">Databases</button></li>
<li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'files' ? 'bg-blue-400' : 'bg-blue-300']" @click="active = 'files'">Files</button></li>
<li class="w-1/3 px-1"><button type="button" class="mobile-button" :class="{'is-active': active == 'code'}" @click="active = 'code'">Code</button></li>
<li class="w-1/3 px-1"><button type="button" class="mobile-button" :class="{'is-active': active == 'databases'}" @click="active = 'databases'">Databases</button></li>
<li class="w-1/3 px-1"><button type="button" class="mobile-button" :class="{'is-active': active == 'files'}" @click="active = 'files'">Files</button></li>
</ul>
<div class="flex flex-wrap -mx-4 -mb-4">
@ -143,3 +143,12 @@ export default {
},
}
</script>
<style scoped>
.mobile-button {
@apply text-sm text-white w-full py-3 rounded bg-blue-300
}
.mobile-button.is-active {
@apply bg-blue-400
}
</style>