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

chrome: scope grid-row input flattening to .data-row only 

The flatten / focused / disabled rules for grid-cell inputs matched
every input under .grid-row, but .form-in-grid (the row-edit modal) is
also a descendant of .grid-row, so its inputs lost their background and
border too — rendering as plain text labels. Anchor the selectors to
.grid-row > .data-row so only the inline cells get the flat treatment;
the modal keeps standard form-control styling.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ali 2026-05-14 12:44:39 +00:00
parent e79cea96b7
commit 98e13585c0
1 changed files with 27 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
jey_theme/public/css/theme_chrome.css
View File

@ -723,13 +723,15 @@
border-bottom: 1px solid #b8b8b8 !important;
}
/* Flatten every form control inside a grid row — no bg, no border, no shadow */
[data-jey-theme="chrome"] .grid-row input.form-control:not([type="checkbox"]):not([type="radio"]),
[data-jey-theme="chrome"] .grid-row textarea.form-control,
[data-jey-theme="chrome"] .grid-row select.form-control,
[data-jey-theme="chrome"] .grid-row select.input-with-feedback,
[data-jey-theme="chrome"] .grid-row .awesomplete input,
[data-jey-theme="chrome"] .grid-row .like-disabled-input {
/* Flatten every form control inside a grid row — no bg, no border, no shadow.
Scoped to .data-row so the row-edit modal (`.form-in-grid`, which is a
sibling of .data-row inside .grid-row) keeps its normal field styling. */
[data-jey-theme="chrome"] .grid-row > .data-row input.form-control:not([type="checkbox"]):not([type="radio"]),
[data-jey-theme="chrome"] .grid-row > .data-row textarea.form-control,
[data-jey-theme="chrome"] .grid-row > .data-row select.form-control,
[data-jey-theme="chrome"] .grid-row > .data-row select.input-with-feedback,
[data-jey-theme="chrome"] .grid-row > .data-row .awesomplete input,
[data-jey-theme="chrome"] .grid-row > .data-row .like-disabled-input {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
@ -741,11 +743,11 @@
}
/* Focused cell: pressed-in look — same shadow pattern as .btn-default:active */
[data-jey-theme="chrome"] .grid-row input.form-control:not([type="checkbox"]):not([type="radio"]):focus,
[data-jey-theme="chrome"] .grid-row textarea.form-control:focus,
[data-jey-theme="chrome"] .grid-row select.form-control:focus,
[data-jey-theme="chrome"] .grid-row select.input-with-feedback:focus,
[data-jey-theme="chrome"] .grid-row .awesomplete input:focus {
[data-jey-theme="chrome"] .grid-row > .data-row input.form-control:not([type="checkbox"]):not([type="radio"]):focus,
[data-jey-theme="chrome"] .grid-row > .data-row textarea.form-control:focus,
[data-jey-theme="chrome"] .grid-row > .data-row select.form-control:focus,
[data-jey-theme="chrome"] .grid-row > .data-row select.input-with-feedback:focus,
[data-jey-theme="chrome"] .grid-row > .data-row .awesomplete input:focus {
background: linear-gradient(45deg, #bbb 5%, #d8d8d8 10%, #c4c4c4 30%, #d0d0d0 50%, #c4c4c4 70%, #d8d8d8 85%, #bbb 95%) !important;
border: 0 !important;
outline: none !important;
@ -762,25 +764,25 @@
/* Read-only cells — darker grey bg. Specificity matches the "flatten" rule above
(tag.class + two :not()), so it wins over `background: transparent`. Frappe hides
.field-area on inactive rows, so the tint only shows on the currently-active row. */
[data-jey-theme="chrome"] .grid-row input.form-control:not([type="checkbox"]):not([type="radio"]):disabled,
[data-jey-theme="chrome"] .grid-row input.form-control:not([type="checkbox"]):not([type="radio"])[disabled],
[data-jey-theme="chrome"] .grid-row input.form-control:not([type="checkbox"]):not([type="radio"])[readonly],
[data-jey-theme="chrome"] .grid-row textarea.form-control:disabled,
[data-jey-theme="chrome"] .grid-row textarea.form-control[readonly],
[data-jey-theme="chrome"] .grid-row select.form-control:disabled,
[data-jey-theme="chrome"] .grid-row select.input-with-feedback:disabled {
[data-jey-theme="chrome"] .grid-row > .data-row input.form-control:not([type="checkbox"]):not([type="radio"]):disabled,
[data-jey-theme="chrome"] .grid-row > .data-row input.form-control:not([type="checkbox"]):not([type="radio"])[disabled],
[data-jey-theme="chrome"] .grid-row > .data-row input.form-control:not([type="checkbox"]):not([type="radio"])[readonly],
[data-jey-theme="chrome"] .grid-row > .data-row textarea.form-control:disabled,
[data-jey-theme="chrome"] .grid-row > .data-row textarea.form-control[readonly],
[data-jey-theme="chrome"] .grid-row > .data-row select.form-control:disabled,
[data-jey-theme="chrome"] .grid-row > .data-row select.input-with-feedback:disabled {
background: #d8d8d8 !important;
box-shadow: none !important;
color: #666 !important;
}
/* No pressed-in effect on focus for read-only cells */
[data-jey-theme="chrome"] .grid-row input.form-control:not([type="checkbox"]):not([type="radio"]):disabled:focus,
[data-jey-theme="chrome"] .grid-row input.form-control:not([type="checkbox"]):not([type="radio"])[disabled]:focus,
[data-jey-theme="chrome"] .grid-row input.form-control:not([type="checkbox"]):not([type="radio"])[readonly]:focus,
[data-jey-theme="chrome"] .grid-row textarea.form-control:disabled:focus,
[data-jey-theme="chrome"] .grid-row textarea.form-control[readonly]:focus,
[data-jey-theme="chrome"] .grid-row select.form-control:disabled:focus {
[data-jey-theme="chrome"] .grid-row > .data-row input.form-control:not([type="checkbox"]):not([type="radio"]):disabled:focus,
[data-jey-theme="chrome"] .grid-row > .data-row input.form-control:not([type="checkbox"]):not([type="radio"])[disabled]:focus,
[data-jey-theme="chrome"] .grid-row > .data-row input.form-control:not([type="checkbox"]):not([type="radio"])[readonly]:focus,
[data-jey-theme="chrome"] .grid-row > .data-row textarea.form-control:disabled:focus,
[data-jey-theme="chrome"] .grid-row > .data-row textarea.form-control[readonly]:focus,
[data-jey-theme="chrome"] .grid-row > .data-row select.form-control:disabled:focus {
background: #d8d8d8 !important;
box-shadow: none !important;
}