beenull/merakiui
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add hover status to some components

Browse source
This commit is contained in:
khatabwedaa 2020-06-13 13:12:57 +02:00
parent 0389429002
commit 2d9cfcc612
3 changed files with 19 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/ui/Footers/Simple.vue
View file

@ -1,10 +1,10 @@
<template>
<view-component :name="name" :code="code">
<div class="py-6" slot="component">
<footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 text-gray-100 sm:flex-row">
<a href="#" class="text-xl font-bold">Brand</a>
<footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 sm:flex-row">
<a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
<p class="py-2 sm:py-0">All rights reserved</p>
<p class="py-2 text-gray-100 sm:py-0">All rights reserved</p>
<div class="flex -mx-2">
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
@ -36,10 +36,10 @@
return {
name: 'Simple',
code: `
<footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 text-gray-100 sm:flex-row">
<a href="#" class="text-xl font-bold">Brand</a>
<footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 sm:flex-row">
<a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
<p class="py-2 sm:py-0">All rights reserved</p>
<p class="py-2 text-gray-100 sm:py-0">All rights reserved</p>
<div class="flex -mx-2">
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">

22
src/components/ui/Footers/WithSubscribeForm.vue
View file

@ -20,15 +20,15 @@
<div class="flex flex-col items-center justify-between mt-6 md:flex-row">
<div>
<a href="#" class="text-xl font-bold">Brand</a>
<a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
</div>
<div class="flex mt-4 md:m-0">
<div class="-mx-4">
<a href="#" class="px-4 text-sm">About</a>
<a href="#" class="px-4 text-sm">Blog</a>
<a href="#" class="px-4 text-sm">News</a>
<a href="#" class="px-4 text-sm">Contact</a>
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">About</a>
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Blog</a>
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">News</a>
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Contact</a>
</div>
</div>
</div>
@ -42,7 +42,7 @@
export default {
data() {
return {
name: 'Footer With Subscribe Form',
name: 'With Subscribe Form',
code: `
<footer class="flex justify-center px-4 text-gray-100 bg-gray-800">
<div class="container py-6">
@ -63,15 +63,15 @@
<div class="flex flex-col items-center justify-between mt-6 md:flex-row">
<div>
<a href="#" class="text-xl font-bold">Brand</a>
<a href="#" class="text-xl font-bold text-gray-100 hover:text-gray-400">Brand</a>
</div>
<div class="flex mt-4 md:m-0">
<div class="-mx-4">
<a href="#" class="px-4 text-sm">About</a>
<a href="#" class="px-4 text-sm">Blog</a>
<a href="#" class="px-4 text-sm">News</a>
<a href="#" class="px-4 text-sm">Contact</a>
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">About</a>
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Blog</a>
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">News</a>
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Contact</a>
</div>
</div>
</div>

4
src/components/ui/Sections/ParagraphWithImage.vue
View file

@ -12,7 +12,7 @@
<p class="mt-4 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
<div class="mt-8">
<a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded">Start Now</a>
<a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded hover:bg-gray-800">Start Now</a>
</div>
</div>
</div>
@ -38,7 +38,7 @@
<p class="mt-4 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
<div class="mt-8">
<a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded">Start Now</a>
<a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded hover:bg-gray-800">Start Now</a>
</div>
</div>
</div>