feat: jazz up form ui

pull/16/head v0.3.5
Karan Sharma 2021-03-10 13:59:27 +05:30
parent 52f076d91b
commit cda2d04974
4 changed files with 168 additions and 53 deletions

View File

@ -517,6 +517,65 @@ video {
height: auto; height: auto;
} }
[type='text'],
[type='time'],
textarea,
select
{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
border-color: #6b7280;
border-width: 1px;
border-radius: 0px;
padding-top: 0.5rem;
padding-right: 0.75rem;
padding-bottom: 0.5rem;
padding-left: 0.75rem;
font-size: 1rem;
line-height: 1.5rem;
}
[type='text']:focus, [type='time']:focus, textarea:focus, select:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
border-color: #2563eb;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #6b7280;
opacity: 1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #6b7280;
opacity: 1;
}
input::placeholder, textarea::placeholder {
color: #6b7280;
opacity: 1;
}
select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
.container { .container {
width: 100%; width: 100%;
} }
@ -582,9 +641,18 @@ video {
background-color: rgba(224, 231, 255, var(--tw-bg-opacity)); background-color: rgba(224, 231, 255, var(--tw-bg-opacity));
} }
.bg-indigo-800 { .bg-indigo-700 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgba(55, 48, 163, var(--tw-bg-opacity)); background-color: rgba(67, 56, 202, var(--tw-bg-opacity));
}
.hover\:bg-indigo-500:hover {
--tw-bg-opacity: 1;
background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
}
.border-transparent {
border-color: transparent;
} }
.border-gray-200 { .border-gray-200 {
@ -592,12 +660,22 @@ video {
border-color: rgba(229, 231, 235, var(--tw-border-opacity)); border-color: rgba(229, 231, 235, var(--tw-border-opacity));
} }
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgba(209, 213, 219, var(--tw-border-opacity));
}
.focus\:border-indigo-500:focus {
--tw-border-opacity: 1;
border-color: rgba(99, 102, 241, var(--tw-border-opacity));
}
.rounded { .rounded {
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.rounded-xl { .rounded-lg {
border-radius: 0.75rem; border-radius: 0.5rem;
} }
.rounded-full { .rounded-full {
@ -648,6 +726,10 @@ video {
justify-content: center; justify-content: center;
} }
.flex-none {
flex: none;
}
.flex-grow { .flex-grow {
flex-grow: 1; flex-grow: 1;
} }
@ -674,6 +756,11 @@ video {
line-height: 1.25rem; line-height: 1.25rem;
} }
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-xl { .text-xl {
font-size: 1.25rem; font-size: 1.25rem;
line-height: 1.75rem; line-height: 1.75rem;
@ -688,6 +775,10 @@ video {
line-height: 1.25rem; line-height: 1.25rem;
} }
.leading-6 {
line-height: 1.5rem;
}
.m-4 { .m-4 {
margin: 1rem; margin: 1rem;
} }
@ -720,14 +811,6 @@ video {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-3 {
margin-bottom: 0.75rem;
}
.mb-4 { .mb-4 {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -760,6 +843,11 @@ video {
min-width: 100%; min-width: 100%;
} }
.focus\:outline-none:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.overflow-hidden { .overflow-hidden {
overflow: hidden; overflow: hidden;
} }
@ -801,11 +889,6 @@ video {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-6 { .px-6 {
padding-left: 1.5rem; padding-left: 1.5rem;
padding-right: 1.5rem; padding-right: 1.5rem;
@ -816,19 +899,10 @@ video {
padding-right: 2rem; padding-right: 2rem;
} }
.px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.pt-6 { .pt-6 {
padding-top: 1.5rem; padding-top: 1.5rem;
} }
.pr-8 {
padding-right: 2rem;
}
.pb-8 { .pb-8 {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
@ -856,6 +930,30 @@ video {
--tw-ring-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000;
} }
.focus\:ring-2:focus {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-offset-white:focus {
--tw-ring-offset-color: #fff;
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
}
.focus\:ring-indigo-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(99, 102, 241, var(--tw-ring-opacity));
}
.focus\:ring-indigo-900:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgba(49, 46, 129, var(--tw-ring-opacity));
}
.text-left { .text-left {
text-align: left; text-align: left;
} }
@ -902,10 +1000,6 @@ video {
text-transform: uppercase; text-transform: uppercase;
} }
.tracking-wide {
letter-spacing: 0.025em;
}
.tracking-wider { .tracking-wider {
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
@ -922,6 +1016,12 @@ video {
width: 100%; width: 100%;
} }
.transition-colors {
transition-property: background-color, border-color, color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@-webkit-keyframes spin { @-webkit-keyframes spin {
to { to {
transform: rotate(360deg); transform: rotate(360deg);
@ -1006,6 +1106,10 @@ video {
padding-left: 1.5rem; padding-left: 1.5rem;
padding-right: 1.5rem; padding-right: 1.5rem;
} }
.sm\:w-auto {
width: auto;
}
} }
@media (min-width: 768px) { @media (min-width: 768px) {

View File

@ -10,7 +10,6 @@
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<style> <style>
body { body {
font-family: 'Poppins', sans-serif; font-family: 'Poppins', sans-serif;
@ -35,23 +34,21 @@
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col my-2"> <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col my-2">
<div class="-mx-3 md:flex mb-6"> <div class="-mx-3 md:flex mb-6">
<div class="md:w-1/2 px-3 mb-6 md:mb-0"> <div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block tracking-wide text-grey-darker text-xs font-bold mb-2"> <label>
Domain Name Domain Name
</label> </label>
<input name="q" <input required autofocus name="q" type="text" placeholder="domain.tld"
class="block w-full bg-grey-lighter text-grey-darker border border-red rounded py-3 px-4 mb-3" class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
type="text" placeholder="domain.tld" autofocus>
<p id="empty-name-sec" class="hidden text-red-500 text-xs">Please enter a domain name to <p id="empty-name-sec" class="hidden text-red-500 text-xs">Please enter a domain name to
query. query.
</p> </p>
</div> </div>
<div class="md:w-1/2 px-3"> <div class="md:w-1/2 px-3">
<label class="block tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state"> <label>
Query Type Query Type
</label> </label>
<select <select name="type"
class="block w-full bg-white border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded" class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
name="type">
<option default>A</option> <option default>A</option>
<option>AAAA</option> <option>AAAA</option>
<option>CAA</option> <option>CAA</option>
@ -68,12 +65,11 @@
</div> </div>
<div class="-mx-3 md:flex"> <div class="-mx-3 md:flex">
<div class="md:w-1/2 px-3 mb-6 md:mb-0"> <div class="md:w-1/2 px-3 mb-6 md:mb-0">
<label class="block tracking-wide text-grey-darker text-xs font-bold mb-2"> <label>
Nameserver Nameserver
</label> </label>
<select name="ns" <select name="ns" onchange="handleNSChange()"
class="block w-full bg-white border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded" class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
onchange="handleNSChange()">>
<option default value="cloudflare">Cloudflare</option> <option default value="cloudflare">Cloudflare</option>
<option value="cloudflare-doh">Cloudflare (DOH)</option> <option value="cloudflare-doh">Cloudflare (DOH)</option>
<option value="google">Google</option> <option value="google">Google</option>
@ -82,26 +78,30 @@
</select> </select>
</div> </div>
<div class="md:w-1/2 px-3"> <div class="md:w-1/2 px-3">
<label class="block tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-zip"> <label for="grid-zip">
Address Address
</label> </label>
<div id="custom_ns" class="hidden"> <div id="custom_ns" class="hidden">
<input name="custom_ns" class="block w-full bg-white text-grey-darker border <input name="custom_ns" type="text" placeholder="Enter Nameserver address"
border-grey-lighter rounded py-3 px-4" type="text" placeholder="Enter Nameserver address"> class="w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
<p class="mt-2 text-grey-darker text-xs">To use different protocols like DOH, DOT etc. refer <p class="mt-2 text-grey-darker text-xs">To use different protocols like DOH, DOT etc. refer
to the to the
instructions <a class="font-semibold" instructions <a class="font-semibold"
href="https://github.com/mr-karan/doggo#transport-options">here</a>.</p> href="https://github.com/mr-karan/doggo#transport-options">here</a>.</p>
</div> </div>
<div id="ns"> <div id="ns">
<input readonly name="ns" <input readonly name="ns" type="text"
class="block w-full bg-gray-50 text-grey-darker border border-grey-lighter rounded py-3 px-4" class="bg-gray-50 w-full border-gray-300 rounded-lg shadown-sm focus:border-indigo-500 focus:ring-indigo-500">
type="text">
</div> </div>
</div> </div>
</div> </div>
<div class="mt-8 text-right"> <div class="mt-8 text-right">
<button class="py-2 px-10 text-white rounded-xl bg-indigo-800">Submit</button> <button class="w-full sm:w-auto flex-none bg-indigo-900 hover:bg-indigo-700
text-white text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded
focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-indigo-900 focus:outline-none
transition-colors duration-400">
Submit
</button>
</div> </div>
</div> </div>
</form> </form>

View File

@ -10,6 +10,14 @@
"purgecss": "^3.1.3" "purgecss": "^3.1.3"
} }
}, },
"@tailwindcss/forms": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.2.1.tgz",
"integrity": "sha512-czfvEdY+J2Ogfd6RUSr/ZSUmDxTujr34M++YLnp2cCPC3oJ4kFvFMaRXA6cEXKw7F1hJuapdjXRjsXIEXGgORg==",
"requires": {
"mini-svg-data-uri": "^1.2.3"
}
},
"acorn": { "acorn": {
"version": "7.4.1", "version": "7.4.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@ -47,7 +55,6 @@
"version": "10.2.4", "version": "10.2.4",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.4.tgz", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.4.tgz",
"integrity": "sha512-DCCdUQiMD+P/as8m3XkeTUkUKuuRqLGcwD0nll7wevhqoJfMRpJlkFd1+MQh1pvupjiQuip42lc/VFvfUTMSKw==", "integrity": "sha512-DCCdUQiMD+P/as8m3XkeTUkUKuuRqLGcwD0nll7wevhqoJfMRpJlkFd1+MQh1pvupjiQuip42lc/VFvfUTMSKw==",
"dev": true,
"requires": { "requires": {
"browserslist": "^4.16.1", "browserslist": "^4.16.1",
"caniuse-lite": "^1.0.30001181", "caniuse-lite": "^1.0.30001181",
@ -326,6 +333,11 @@
"resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz", "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
"integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=" "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE="
}, },
"mini-svg-data-uri": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz",
"integrity": "sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ=="
},
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@ -576,7 +588,6 @@
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.0.3.tgz", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.0.3.tgz",
"integrity": "sha512-s8NEqdLBiVbbdL0a5XwTb8jKmIonOuI4RMENEcKLR61jw6SdKvBss7NWZzwCaD+ZIjlgmesv8tmrjXEp7C0eAQ==", "integrity": "sha512-s8NEqdLBiVbbdL0a5XwTb8jKmIonOuI4RMENEcKLR61jw6SdKvBss7NWZzwCaD+ZIjlgmesv8tmrjXEp7C0eAQ==",
"dev": true,
"requires": { "requires": {
"@fullhuman/postcss-purgecss": "^3.1.3", "@fullhuman/postcss-purgecss": "^3.1.3",
"bytes": "^3.0.0", "bytes": "^3.0.0",

View File

@ -10,5 +10,5 @@ module.exports = {
variants: { variants: {
extend: {}, extend: {},
}, },
plugins: [], plugins: [require('@tailwindcss/forms')],
} }