Karavel/fixin.me
0
0
Fork 0
forked from fixin.me/fixin.me
Code Pull Requests Activity

Align table form inputs with non-input text

Browse Source 
Closes #20
This commit is contained in:
cryptogopher 2024-03-18 00:27:47 +01:00
parent ebae0334d9
commit f2088ea39f
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/assets/stylesheets/application.css
View File

@ -96,7 +96,7 @@ input[type=submit] {
} }
input:not([type=submit]):not([type=checkbox]), input:not([type=submit]):not([type=checkbox]),
select { select {
padding: 0.2rem 0.4rem; padding: 0.2em 0.4em;
} }
.button, .button,
button, button,
@ -327,11 +327,15 @@ table.items tbody tr:hover {
} }
table.items th { table.items th {
padding-block: 0.75em; padding-block: 0.75em;
text-align: center;
} }
table.items th, table.items th,
table.items td { table.items td {
padding-inline: 1em 0; padding-inline: 1em 0;
} }
table.items td:has(input) {
padding-inline-start: calc(0.6em - 0.9px);
}
table.items th:last-child { table.items th:last-child {
padding-inline-end: 0.4em; padding-inline-end: 0.4em;
} }
@ -344,25 +348,24 @@ table.items td {
padding-block: 0.1em; padding-block: 0.1em;
} }
/* For <a> to fill <td> completely, we use an ::after pseudoelement. */ /* For <a> to fill <td> completely, we use an ::after pseudoelement. */
/* TODO: change selector from td.link to td:has(a) once :has() is available on
* FF */
table.items td.link { table.items td.link {
padding: 0; padding: 0 0 0 1em;
position: relative; position: relative;
text-align: left;
} }
table.items td.link a { table.items td.link a {
color: inherit; color: inherit;
font: inherit; font: inherit;
padding-inline-start: 1em;
} }
table.items td.link a::after { table.items td.link a::after {
content: ''; content: '';
inset: 0; inset: 0;
position: absolute; position: absolute;
} }
table.items td.link .subunit { table.items td.subunit {
padding-inline-start: 1.6em; padding-inline-start: 1.8em;
}
table.items td.subunit:has(input) {
padding-inline-start: calc(1.4em - 1px);
} }
table.items td.actions { table.items td.actions {
display: flex; display: flex;