lfk
/
selfservice
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

basic input styling for Profile page

This commit is contained in:
Philipp Dormann 2021-02-24 21:12:21 +01:00
parent 3e92597a56
commit 8fd6f47b2f
2 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Profile.vue
View File

@ -88,16 +88,27 @@
</div>
</div>
<div class="tab-content block">
<div class="py-4 w-full lg:w-1/2">
<div class="py-4 w-full">
<div class="flex flex-col">
<form class="form flex flex-wrap w-full">
<div class="w-full">
<!-- -->
<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-400">Email</label>
<input
type="email"
id="email"
name="email"
class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
/>
</div>
<!-- -->
<div class="form-element">
<div class="form-label">First name</div>
<input
name="first-name"
class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
type="text"
class="form-input"
placeholder="Enter you first name"
/>
</div>
@ -106,7 +117,7 @@
<input
name="last-name"
type="text"
class="form-input"
class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
placeholder="Enter you last name"
/>
</div>
@ -115,7 +126,7 @@
<input
name="email"
type="email"
class="form-input"
class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
placeholder="Enter you email address"
/>
</div>
@ -124,7 +135,7 @@
<input
name="company"
type="text"
class="form-input"
class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
placeholder="Enter you company"
/>
</div>
@ -133,13 +144,13 @@
<input
name="position"
type="text"
class="form-input"
class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
placeholder="Enter you position"
/>
</div>
<div class="form-element">
<div class="form-label">Language</div>
<select name="language" class="form-select">
<select name="language" class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
<option>Select language</option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
@ -165,7 +176,7 @@
<input
name="email"
type="email"
class="form-input"
class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
placeholder="Enter you current email address"
/>
</div>
@ -174,7 +185,7 @@
<input
name="email"
type="email"
class="form-input"
class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
placeholder="Enter you new email address"
/>
</div>
@ -243,7 +254,7 @@
<input
name="current-password"
type="password"
class="form-input"
class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
placeholder="Enter your current password"
/>
</div>
@ -252,7 +263,7 @@
<input
name="new-password"
type="password"
class="form-input"
class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
placeholder="Enter your new password"
/>
</div>
@ -261,7 +272,7 @@
<input
name="confirm-new-password"
type="password"
class="form-input"
class="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
placeholder="Enter your new password confirmation"
/>
</div>

1
svelte-routify-windi-vite Submodule

@ -0,0 +1 @@
Subproject commit a4242522d191f8fe2450586f4986c549818893fe