checkbox-list styling with taller <p> element

This commit is contained in:
f0x 2023-01-26 16:39:25 +01:00
parent 782169da76
commit 3960327a43
2 changed files with 10 additions and 5 deletions

View file

@ -23,7 +23,7 @@ const React = require("react");
module.exports = function CheckList({ field, Component, header = " All", ...componentProps }) { module.exports = function CheckList({ field, Component, header = " All", ...componentProps }) {
return ( return (
<div className="checkbox-list list"> <div className="checkbox-list list">
<label className="header"> <label className="header entry">
<input <input
ref={field.toggleAll.ref} ref={field.toggleAll.ref}
type="checkbox" type="checkbox"

View file

@ -370,7 +370,8 @@ span.form-info {
.checkbox-list { .checkbox-list {
.header, .entry { .header, .entry {
gap: 1rem; display: grid;
gap: 0 1rem;
} }
} }
@ -625,7 +626,6 @@ span.form-info {
.checkbox-list { .checkbox-list {
.entry { .entry {
display: grid;
grid-template-columns: auto auto 1fr; grid-template-columns: auto auto 1fr;
} }
@ -684,9 +684,14 @@ button.with-padding {
.suspend-import-list { .suspend-import-list {
.checkbox-list { .checkbox-list {
.header, .entry { .entry {
display: grid;
grid-template-columns: auto 25ch auto 1fr; grid-template-columns: auto 25ch auto 1fr;
grid-template-rows: auto 1fr;
p {
grid-column: 4;
grid-row: 1 / span 2;
}
} }
} }