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

Update inputs

Browse Source
This commit is contained in:
khatabwedaa
2020-09-12 10:25:39 +02:00
parent 7e7ed2c7d8
commit 44e1062487
4 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ui/Authentication/LoginWithSideImage.vue
View File

@@ -31,17 +31,17 @@
</div>
<div class="mt-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="LoggingEmailAddress">Email Address</label>
<input id="LoggingEmailAddress" class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white" type="email">
<label class="block text-gray-600 text-sm font-medium mb-2" for="LoggingEmailAddress">Email Address</label>
<input id="LoggingEmailAddress" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:shadow-outline" type="email">
</div>
<div class="mt-4">
<div class="flex justify-between">
<label class="block text-gray-700 text-sm font-bold mb-2" for="loggingPassword">Password</label>
<label class="block text-gray-600 text-sm font-medium mb-2" for="loggingPassword">Password</label>
<a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
</div>
<input id="loggingPassword" class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white" type="password">
<input id="loggingPassword" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:shadow-outline" type="password">
</div>
<div class="mt-8">
@@ -99,17 +99,17 @@
</div>
<div class="mt-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="LoggingEmailAddress">Email Address</label>
<input id="LoggingEmailAddress" class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white" type="email">
<label class="block text-gray-600 text-sm font-medium mb-2" for="LoggingEmailAddress">Email Address</label>
<input id="LoggingEmailAddress" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:shadow-outline" type="email">
</div>
<div class="mt-4">
<div class="flex justify-between">
<label class="block text-gray-700 text-sm font-bold mb-2" for="loggingPassword">Password</label>
<label class="block text-gray-600 text-sm font-medium mb-2" for="loggingPassword">Password</label>
<a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
</div>
<input id="loggingPassword" class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white" type="password">
<input id="loggingPassword" class="bg-white text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full focus:border-blue-500 focus:outline-none focus:shadow-outline" type="password">
</div>
<div class="mt-8">

24
src/components/ui/Authentication/SimpleLogin.vue
View File

@@ -5,20 +5,20 @@
<div class="py-4 px-6">
<h2 class="text-center font-bold text-gray-700 text-3xl">Brand</h2>
<p class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome Back</p>
<h3 class="mt-1 text-center font-medium text-gray-600 text-xl">Welcome Back</h3>
<span class="mt-1 text-center text-gray-600">Login or create account</span>
<p class="mt-1 text-center text-gray-500">Login or create account</p>
<form>
<div class="mt-4 w-full">
<input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white" type="email" placeholder="Email Address" aria-label="Email Address">
<input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:shadow-outline" type="email" placeholder="Email Address" aria-label="Email Address">
</div>
<div class="mt-4 w-full">
<input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white" type="password" placeholder="Password" aria-label="Password">
<input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:shadow-outline" type="password" placeholder="Password" aria-label="Password">
</div>
<div class="flex justify-between items-center mt-6">
<div class="flex justify-between items-center mt-4">
<a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget Password?</a>
<button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none" type="button">
@@ -29,7 +29,7 @@
</div>
<div class="flex items-center justify-center py-4 bg-gray-100 text-center">
<span class="text-gray-600 text-sm">Dont`t have an account? </span>
<span class="text-gray-600 text-sm">Don't have an account? </span>
<a href="#" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
</div>
@@ -48,20 +48,20 @@
<div class="py-4 px-6">
<h2 class="text-center font-bold text-gray-700 text-3xl">Brand</h2>
<p class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome Back</p>
<h3 class="mt-1 text-center font-medium text-gray-600 text-xl">Welcome Back</h3>
<span class="mt-1 text-center text-gray-600">Login or create account</span>
<p class="mt-1 text-center text-gray-500">Login or create account</p>
<form>
<div class="mt-4 w-full">
<input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white" type="email" placeholder="Email Address" aria-label="Email Address">
<input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:shadow-outline" type="email" placeholder="Email Address" aria-label="Email Address">
</div>
<div class="mt-4 w-full">
<input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white" type="password" placeholder="Password" aria-label="Password">
<input class="w-full mt-2 py-2 px-4 bg-white text-gray-700 border border-gray-300 rounded block placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:shadow-outline" type="password" placeholder="Password" aria-label="Password">
</div>
<div class="flex justify-between items-center mt-6">
<div class="flex justify-between items-center mt-4">
<a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget Password?</a>
<button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none" type="button">
@@ -72,7 +72,7 @@
</div>
<div class="flex items-center justify-center py-4 bg-gray-100 text-center">
<span class="text-gray-600 text-sm">Do not have an account? </span>
<span class="text-gray-600 text-sm">Don't have an account? </span>
<a href="#" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
</div>

4
src/components/ui/Forms/Newsletter.vue
View File

@@ -13,7 +13,7 @@
<div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700">
<form>
<div class="flex flex-col rounded-lg overflow-hidden lg:flex-row">
<input class="py-3 px-6 bg-gray-200 text-gray-700 outline-none placeholder-gray-500 focus:bg-gray-300" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
<input class="py-3 px-6 bg-gray-200 text-gray-700 outline-none placeholder-gray-500 focus:bg-gray-100" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
<button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-semibold uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
</div>
@@ -42,7 +42,7 @@
<div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700">
<form>
<div class="flex flex-col rounded-lg overflow-hidden lg:flex-row">
<input class="py-3 px-6 bg-gray-200 text-gray-700 outline-none placeholder-gray-500 focus:bg-gray-300" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
<input class="py-3 px-6 bg-gray-200 text-gray-700 outline-none placeholder-gray-500 focus:bg-gray-100" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
<button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-semibold uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
</div>

16
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>
<label class="text-gray-700" for="username">Username</label>
<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">
<input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
</div>
<div>
<label class="text-gray-700" for="emailAddress">Email Address</label>
<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">
<input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
</div>
<div>
<label class="text-gray-700" for="password">Password</label>
<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">
<input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
</div>
<div>
<label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
<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">
<input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
</div>
</div>
@@ -49,22 +49,22 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
<div>
<label class="text-gray-700" for="username">Username</label>
<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">
<input id="username" type="text" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
</div>
<div>
<label class="text-gray-700" for="emailAddress">Email Address</label>
<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">
<input id="emailAddress" type="email" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
</div>
<div>
<label class="text-gray-700" for="password">Password</label>
<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">
<input id="password" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
</div>
<div>
<label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
<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">
<input id="passwordConfirmation" type="password" class="w-full mt-2 px-4 py-2 block rounded bg-white text-gray-800 border border-gray-300 focus:border-blue-500 focus:outline-none focus:shadow-outline">
</div>
</div>