farmcontrol/farmcontrol-ui
farmcontrol/farmcontrol-ui
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Update App.css for Input Number Component Styling

Browse Source 
- Added padding to input fields within the input-number-cal class for improved usability.
- Adjusted z-index and color properties for better visual hierarchy and clarity in the input-number-cal-highlight class.
- Ensured consistent background styling for input fields in the input-number-cal-expr-input class to enhance user experience.
This commit is contained in:
Tom Butcher 2026-09-01 19:58:44 +01:00
parent 451787debd
commit 415aa0cd9d
1 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
assets/stylesheets/App.css
View File

@ -754,6 +754,10 @@ body {
position: relative; position: relative;
} }
.input-number-cal input {
padding: 4px 12px;
}
.input-number-cal-highlight { .input-number-cal-highlight {
position: absolute; position: absolute;
display: flex; display: flex;
@ -761,8 +765,8 @@ body {
overflow: hidden; overflow: hidden;
white-space: pre; white-space: pre;
pointer-events: none; pointer-events: none;
z-index: 0; z-index: 2;
color: var(--color-text); color: color-mix(in srgb, var(--color-text) 85%, transparent);
} }
.input-number-cal-operator { .input-number-cal-operator {
@ -777,16 +781,18 @@ body {
.input-number-cal-expr-input.ant-input-affix-wrapper { .input-number-cal-expr-input.ant-input-affix-wrapper {
position: relative; position: relative;
z-index: 1; z-index: 1;
background: transparent !important;
} }
.input-number-cal-expr-input.ant-input, .input-number-cal-expr-input.ant-input-affix-wrapper .ant-input,
.input-number-cal-expr-input .ant-input { .input-number-cal-expr-input.ant-input-outlined:not(.ant-input-affix-wrapper) {
background: transparent !important;
color: transparent !important; color: transparent !important;
caret-color: var(--color-text); caret-color: var(--color-text);
} }
.input-number-cal-expr-input.ant-input-affix-wrapper .ant-input {
background: transparent !important;
}
.input-number-cal .ant-input-suffix { .input-number-cal .ant-input-suffix {
margin-right: 28px; margin-right: 28px;
} }