Add hover status to some components
This commit is contained in:
parent
0389429002
commit
2d9cfcc612
|
@ -1,10 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<view-component :name="name" :code="code">
|
<view-component :name="name" :code="code">
|
||||||
<div class="py-6" slot="component">
|
<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">
|
<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">Brand</a>
|
<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">
|
<div class="flex -mx-2">
|
||||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
|
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
|
||||||
|
@ -36,10 +36,10 @@
|
||||||
return {
|
return {
|
||||||
name: 'Simple',
|
name: 'Simple',
|
||||||
code: `
|
code: `
|
||||||
<footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 text-gray-100 sm:flex-row">
|
<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">Brand</a>
|
<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">
|
<div class="flex -mx-2">
|
||||||
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
|
<a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
|
||||||
|
|
|
@ -20,15 +20,15 @@
|
||||||
|
|
||||||
<div class="flex flex-col items-center justify-between mt-6 md:flex-row">
|
<div class="flex flex-col items-center justify-between mt-6 md:flex-row">
|
||||||
<div>
|
<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>
|
||||||
|
|
||||||
<div class="flex mt-4 md:m-0">
|
<div class="flex mt-4 md:m-0">
|
||||||
<div class="-mx-4">
|
<div class="-mx-4">
|
||||||
<a href="#" class="px-4 text-sm">About</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">Blog</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">News</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">Contact</a>
|
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Contact</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
name: 'Footer With Subscribe Form',
|
name: 'With Subscribe Form',
|
||||||
code: `
|
code: `
|
||||||
<footer class="flex justify-center px-4 text-gray-100 bg-gray-800">
|
<footer class="flex justify-center px-4 text-gray-100 bg-gray-800">
|
||||||
<div class="container py-6">
|
<div class="container py-6">
|
||||||
|
@ -63,15 +63,15 @@
|
||||||
|
|
||||||
<div class="flex flex-col items-center justify-between mt-6 md:flex-row">
|
<div class="flex flex-col items-center justify-between mt-6 md:flex-row">
|
||||||
<div>
|
<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>
|
||||||
|
|
||||||
<div class="flex mt-4 md:m-0">
|
<div class="flex mt-4 md:m-0">
|
||||||
<div class="-mx-4">
|
<div class="-mx-4">
|
||||||
<a href="#" class="px-4 text-sm">About</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">Blog</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">News</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">Contact</a>
|
<a href="#" class="px-4 text-sm text-gray-100 font-medium hover:text-gray-400">Contact</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -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>
|
<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">
|
<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>
|
</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>
|
<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">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue