Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-02 20:15:22 +02:00
Code Issues Releases Activity Actions

Apply default form styling (#272)

Browse source 
* Add and organise component stylesheets

* Revert CSS folder and file structure

* Add FormsHelper and FormBuilder to apply component classes

* Refactor label args

Co-authored-by: Jose Farias <31393016+josefarias@users.noreply.github.com>
Signed-off-by: Josh Brown <josh@joossh.com>

* Update form field styles

* Apply form builder to all fields

* Remove redundant style rules

Some of these were either duplicative or had no effect.

* Apply default submit button styles

* Set default form class

* Fix opacity of input when focused

---------

Signed-off-by: Josh Brown <josh@joossh.com>
Co-authored-by: Jose Farias <31393016+josefarias@users.noreply.github.com>
Co-authored-by: Josh Pigford <josh@joshpigford.com>
This commit is contained in:
Josh Brown 2024-02-09 15:29:31 +00:00 • committed by GitHub
parent f8174990ca
commit df3e14a975
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 124 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

56
app/assets/stylesheets/application.tailwind.css
View file

@ -2,34 +2,44 @@
@tailwind components;
@tailwind utilities;
.prose table {
@apply divide-y divide-gray-300;
}
@layer components {
.prose {
table {
@apply divide-y divide-gray-300;
}
.prose tr {
@apply divide-x divide-gray-100;
}
tr {
@apply divide-x divide-gray-100;
}
.prose th {
@apply whitespace-nowrap px-2 py-3.5 text-left text-sm font-semibold text-gray-900;
}
th {
@apply whitespace-nowrap px-2 py-3.5 text-left text-sm font-semibold text-gray-900;
}
.prose tbody {
@apply divide-y divide-gray-200;
}
tbody {
@apply divide-y divide-gray-200;
}
.prose td {
@apply px-2 py-2 text-sm text-gray-500 whitespace-nowrap;
}
td {
@apply px-2 py-2 text-sm text-gray-500 whitespace-nowrap;
}
}
.input-wrapper {
@apply relative p-4 bg-gray-100 border border-gray-200 rounded-2xl focus-within:bg-white focus-within:drop-shadow-form focus-within:opacity-100;
}
.form-field {
@apply relative border bg-white rounded-xl shadow-sm;
@apply focus-within:shadow-none focus-within:border-gray-900 focus-within:ring-4 focus-within:ring-gray-100;
}
.input-label {
@apply block text-sm font-medium text-gray-500;
}
.form-field__label {
@apply p-3 pb-0 block text-sm font-medium opacity-50;
}
.input-field {
@apply p-0 mt-1 bg-transparent border-none opacity-50 focus:outline-none focus:ring-0 focus-within:opacity-100;
.form-field__input {
@apply p-3 pt-1 w-full bg-transparent border-none opacity-50;
@apply focus:outline-none focus:ring-0 focus:opacity-100;
}
.form-field__submit {
@apply w-full p-3 text-center text-white bg-black rounded-lg hover:bg-gray-700;
}
}