fix (firefox): input sizing across browser

before this, there was some annoying discrepencies with the way Firefox
would render input compared to chrome. Unfortunatly we couldn't find a
better way than fixing the height to fix it up
This commit is contained in:
MickaelK 2025-01-06 15:46:14 +11:00
parent 8d27075ddb
commit 41923ef500
2 changed files with 9 additions and 3 deletions

View file

@ -14,7 +14,9 @@
color: inherit;
border-bottom: 2px solid rgba(70, 99, 114, 0.1);
transition: border-color 0.2s ease-out;
height: 31px;
}
.component_input:focus, .component_select:focus, .component_input:focus ~ component-icon img {
border-color: var(--emphasis-primary)!important;
}

View file

@ -146,18 +146,22 @@
border-radius: 3px;
padding-left: 5px;
}
.component_page_admin .formbuilder .component_input,
.component_page_admin .formbuilder .component_select{
height: 33px;
}
.component_page_admin .formbuilder .component_input:not([disabled]):hover,
.component_page_admin .formbuilder .component_input:not([disabled]):focus,
.component_page_admin .formbuilder .component_textarea:not([disabled]):hover,
.component_page_admin .formbuilder .component_textarea:not([disabled]):focus,
.component_page_admin .formbuilder .component_select:not([disabled]):hover,
.component_page_admin .formbuilder .component_select:not([disabled]):focus {
background: rgba(0, 0, 0, 0.07);
background: rgba(0, 0, 0, 0.08);
}
.component_page_admin form .formbuilder_password:focus-within img.component_icon,
.component_page_admin form .formbuilder_password:hover img.component_icon{
border-color: rgba(0, 0, 0, 0.05);
background: rgba(0, 0, 0, 0.07);
background: rgba(0, 0, 0, 0.08);
}
.component_page_admin .formbuilder .formbuilder_password .component_input {
border-right: none;
@ -168,7 +172,7 @@
border: 2px solid rgba(0, 0, 0, 0.05);
height: 19px;
border-left: none;
background: rgba(0, 0, 0, 0.05);
background: rgba(0, 0, 0, 0.07);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
padding-right: 5px;