ali
/
jey_theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
Ali 2026-04-20 11:39:53 +00:00
parent 4e038cf050
commit 5e78072b0a
1 changed files with 72 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
jey_theme/public/css/shared.css
View File

@ -134,6 +134,78 @@ input[type="checkbox"].disabled-selected {
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
========================================================================== */