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

wip

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

6
src/components/categories/Forms.vue
View file

@ -2,7 +2,7 @@
<div class="w-full max-w-5xl mx-auto my-10"> <div class="w-full max-w-5xl mx-auto my-10">
<h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Forms</h1> <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Forms</h1>
<inputs></inputs> <simple></simple>
<newsletter></newsletter> <newsletter></newsletter>
<sign-in></sign-in> <sign-in></sign-in>
<sign-in-with-image></sign-in-with-image> <sign-in-with-image></sign-in-with-image>
@ -10,14 +10,14 @@
</template> </template>
<script> <script>
import Inputs from "../ui/Forms/Inputs"; import Simple from "../ui/Forms/Simple";
import Newsletter from "../ui/Forms/Newsletter"; import Newsletter from "../ui/Forms/Newsletter";
import SignIn from "../ui/Forms/SignIn"; import SignIn from "../ui/Forms/SignIn";
import SignInWithImage from "../ui/Forms/SignInWithImage"; import SignInWithImage from "../ui/Forms/SignInWithImage";
export default { export default {
components: { components: {
Inputs, Simple,
Newsletter, Newsletter,
SignIn, SignIn,
SignInWithImage SignInWithImage

18
src/components/ui/Forms/Inputs.vue → src/components/ui/Forms/Simple.vue
View file

@ -8,22 +8,22 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
<div> <div>
<label class="text-gray-700" for="username">Username</label> <label class="text-gray-700" for="username">Username</label>
<input id="username" type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white"> <input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
</div> </div>
<div> <div>
<label class="text-gray-700" for="emailAddress">Email Address</label> <label class="text-gray-700" for="emailAddress">Email Address</label>
<input id="emailAddress" type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white"> <input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
</div> </div>
<div> <div>
<label class="text-gray-700" for="password">Password</label> <label class="text-gray-700" for="password">Password</label>
<input id="password" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white"> <input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
</div> </div>
<div> <div>
<label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label> <label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
<input id="passwordConfirmation" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white"> <input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
</div> </div>
</div> </div>
@ -40,7 +40,7 @@
export default { export default {
data() { data() {
return { return {
name: 'Inputs', name: 'Simple',
code: ` code: `
<div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md"> <div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md">
<h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2> <h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2>
@ -49,22 +49,22 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
<div> <div>
<label class="text-gray-700" for="username">Username</label> <label class="text-gray-700" for="username">Username</label>
<input id="username" type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white"> <input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
</div> </div>
<div> <div>
<label class="text-gray-700" for="emailAddress">Email Address</label> <label class="text-gray-700" for="emailAddress">Email Address</label>
<input id="emailAddress" type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white"> <input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
</div> </div>
<div> <div>
<label class="text-gray-700" for="password">Password</label> <label class="text-gray-700" for="password">Password</label>
<input id="password" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white"> <input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
</div> </div>
<div> <div>
<label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label> <label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
<input id="passwordConfirmation" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white"> <input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
</div> </div>
</div> </div>