report view: themed compact checkboxes + filter row flex
The global toggle-switch styling for input[type=checkbox] doesn't fit the 32px select column or 37px index column in frappe-datatable, so content was clipped and checkboxes sat flush to the cell baseline. - Compact 14x14 themed square checkbox (same paint as grid .row-check) inside .datatable, with ::after pseudo disabled. - Flex-center the cell when the only child is a checkbox. - Let the filter input shrink instead of crushing its help-icon sibling. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
4e038cf050
commit
5e78072b0a
|
|
@ -134,6 +134,78 @@ input[type="checkbox"].disabled-selected {
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
Report View (frappe-datatable) — compact themed checkboxes
|
||||||
|
The global toggle-switch styling (28×16) doesn't fit the 32px select
|
||||||
|
column or the 37px row-number column, so content gets clipped. Use the
|
||||||
|
same compact square style as child-table grids (.row-check) — themed,
|
||||||
|
not native.
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
.datatable input[type="checkbox"] {
|
||||||
|
-webkit-appearance: none !important;
|
||||||
|
-moz-appearance: none !important;
|
||||||
|
appearance: none !important;
|
||||||
|
width: var(--checkbox-size, 14px) !important;
|
||||||
|
min-width: var(--checkbox-size, 14px) !important;
|
||||||
|
height: var(--checkbox-size, 14px) !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
border: 1px solid var(--gray-500) !important;
|
||||||
|
border-radius: 4px !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
background-image: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
vertical-align: middle !important;
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datatable input[type="checkbox"]::after {
|
||||||
|
content: none !important;
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datatable input[type="checkbox"]:checked {
|
||||||
|
background-color: var(--primary) !important;
|
||||||
|
background-image: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
|
||||||
|
background-size: 57% !important;
|
||||||
|
background-repeat: no-repeat !important;
|
||||||
|
background-position: center !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datatable input[type="checkbox"]:disabled {
|
||||||
|
opacity: 0.5 !important;
|
||||||
|
cursor: not-allowed !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Centre the checkbox vertically in its cell — vertical-align:middle on the
|
||||||
|
input alone isn't enough because datatable cells have their own line-box
|
||||||
|
rules that anchor the box to the baseline. */
|
||||||
|
.datatable .dt-cell__content:has(> input[type="checkbox"]:only-child) {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: flex-start !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Filter row: input + help-icon squash each other in narrow columns. Let
|
||||||
|
the input flex-shrink instead of overflowing its siblings. */
|
||||||
|
.datatable .dt-row-filter .dt-cell__content {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datatable .dt-row-filter .dt-filter.dt-input {
|
||||||
|
flex: 1 1 0 !important;
|
||||||
|
min-width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.datatable .dt-row-filter .comparison-help-icon {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
List View — restore toggle knob
|
List View — restore toggle knob
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue