Commit b06391fb authored by Clarissa Lima Borges's avatar Clarissa Lima Borges Committed by Clarissa Lima Borges
Browse files

inputs: Now uses a plugin to improve inputs customization and styling...

inputs: Now uses a plugin to improve inputs customization and styling checkboxes, radios and toggles
parent 55e309df
......@@ -51,6 +51,17 @@
"through2": "^2.0.3"
}
},
"@tailwindcss/custom-forms": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz",
"integrity": "sha512-XdP5XY6kxo3x5o50mWUyoYWxOPV16baagLoZ5uM41gh6IhXzhz/vJYzqrTb/lN58maGIKlpkxgVsQUNSsbAS3Q==",
"dev": true,
"requires": {
"lodash": "^4.17.11",
"mini-svg-data-uri": "^1.0.3",
"traverse": "^0.6.6"
}
},
"@types/color-name": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
......@@ -2545,6 +2556,12 @@
"to-regex": "^3.0.2"
}
},
"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==",
"dev": true
},
"minimatch": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
......@@ -4101,6 +4118,12 @@
"through2": "^2.0.3"
}
},
"traverse": {
"version": "0.6.6",
"resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.6.tgz",
"integrity": "sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=",
"dev": true
},
"type": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
......
......@@ -9,6 +9,7 @@
"author": "GNOME Engagement Team <engagement@gnome.org>",
"license": "MIT",
"devDependencies": {
"@tailwindcss/custom-forms": "^0.2.1",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-concat-css": "^3.1.0",
......@@ -28,4 +29,4 @@
"type": "git",
"url": "git@gitlab.gnome.org:Teams/Engagement/websites/general-website-resources.git"
}
}
\ No newline at end of file
}
......@@ -22,39 +22,63 @@
<label for="email" class="mt-6">Email</label>
<input type="email" class="mt-2" id="email">
<label for="password" class="mt-6">Password</label>
<input type="password" class="mt-2" id="password">
<label for="date" class="mt-6">Birthday</label>
<input type="date" class="mt-2" id="date">
<label for="invalid" class="mt-6">Invalid input</label>
<input type="email" class="mt-2 danger" id="invalid">
<label for="message" class="mt-6">Message</label>
<label for="message" class="mt-6">Biography</label>
<textarea id="message" class="mt-2"></textarea>
<label for="select" class="mt-6">Select</label>
<label for="select" class="mt-6">Select language</label>
<div class="flex-shrink w-1/3 inline-block relative mt-2">
<select>
<select class="form-select">
<option>English</option>
<option>France</option>
<option>French</option>
<option>Spanish</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
</div>
</div>
<label class="mt-6">
<input type="checkbox" name="checkbox-group"><span>Checkbox 1</span>
<input type="checkbox" name="checkbox-group"><span>Checkbox 2</span>
<input type="checkbox" name="checkbox-group"><span>Checkbox 3</span>
<label class="mt-6 items-center flex flex-col mr-auto">
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox" name="checkbox-group">
<span class="ml-2">Checkbox 1</span>
</div>
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox" name="checkbox-group">
<span class="ml-2">Checkbox 2</span>
</div>
<div class="inline-flex items-center">
<input type="checkbox" class="form-checkbox" name="checkbox-group">
<span class="ml-2">Checkbox 3</span>
</div>
</label>
<label class="mt-6">
<input type="radio" name="radio-group"><span>Radio 1</span>
<input type="radio" name="radio-group"><span>Radio 2</span>
<input type="radio" name="radio-group"><span>Radio 3</span>
<label class="mt-6 items-center flex flex-col mr-auto">
<div class="inline-flex items-center">
<input type="radio" class="form-radio" name="radio-group">
<span class="ml-2">Radio 1</span>
</div>
<div class="inline-flex items-center">
<input type="radio" class="form-radio" name="radio-group">
<span class="ml-2">Radio 2</span>
</div>
<div class="inline-flex items-center">
<input type="radio" class="form-radio" name="radio-group">
<span class="ml-2">Radio 3</span>
</div>
</label>
<label class="mt-6">
<input type="checkbox" name="switch"><span>Switch</span>
<div class="toggle">
<input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox" />
<label for="toggle" class="toggle-label"></label>
</div>
<label for="toggle">Toggle</label>
</label>
</form>
</div>
......
input,
textarea,
select {
@apply appearance-none rounded border border-gray-200 bg-white shadow text-gray-800 px-4 py-2;
@apply form-input border border-gray-200 bg-white shadow text-gray-800 px-4 py-2;
&.danger {
@apply text-red-400 border border-red-400;
}
&:focus {
@apply shadow-outline;
}
}
&.danger {
@apply border-red-400 text-red-400;
}
.form-checkbox {
@apply text-gnome-blue-500;
}
select {
@apply w-full;
.form-radio {
@apply text-gnome-blue-500;
}
.toggle {
@apply relative inline-block w-10 mr-2 align-middle select-none transition duration-500 ease-in;
.toggle-label {
@apply block overflow-hidden h-6 rounded-full bg-gray-200 cursor-pointer;
}
.toggle-checkbox {
@apply shadow-none absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer;
&:checked {
@apply: right-0 border-gnome-blue-500;
right: 0;
border-color: theme('colors.gnome-blue.500');
}
&:checked + .toggle-label {
@apply: bg-gnome-blue-500;
background-color: theme('colors.gnome-blue.500');
}
}
}
\ No newline at end of file
......@@ -116,5 +116,5 @@ module.exports = {
variants: {
backgroundColor: ['responsive', 'hover', 'focus', 'checked'],
},
plugins: [],
plugins: [require("@tailwindcss/custom-forms")]
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment