Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-09 07:03:24 +00:00
Code Issues Projects Releases Wiki Activity

Apply transition (color) to category buttons (#21)

Browse Source 
* 🔧 Add motion-reduce variant to transitionProperty

* 💄 Transition color from category buttons
This commit is contained in:
Vinicius Kiatkoski Neves
2020-11-06 07:58:11 +01:00
committed by GitHub
parent e3ef694bb3
commit a10018b4ae
2 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Main.vue
View File

@@ -6,7 +6,7 @@
<div class="flex items-center justify-center mt-5 ">
<div class="mt-2 md:mt-0">
<span v-for="category in categories" :key="category.name">
<button @click="searchText = category.name" class="ml-2 mt-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none" :class="category.name === searchText? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">{{ category.name }}</button>
<button @click="searchText = category.name" class="ml-2 mt-2 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 motion-reduce:transition-none transition-colors duration-150 ease-in-out rounded text-sm focus:outline-none" :class="category.name === searchText? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'">{{ category.name }}</button>
</span>
</div>
</div>

4
tailwind.config.js
View File

@@ -13,6 +13,8 @@ module.exports = {
},
},
},
variants: {},
variants: {
transitionProperty: ({ after }) => after(['motion-reduce']),
},
plugins: [],
};