Minor annoyance: padding changes when you hover

Show and Tell
1

This particular part of the theme.css in the MD3 theme:

textarea.anvil-component.anvil-role-outlined:hover, textarea.anvil-component.anvil-role-outlined:focus, 
input.anvil-component.anvil-role-outlined:hover, input.anvil-component.anvil-role-outlined:focus,
.anvil-component.anvil-role-outlined select:hover, .anvil-component.anvil-role-outlined select:focus,
.anvil-datepicker.anvil-role-outlined input:hover, .anvil-datepicker.anvil-role-outlined input:focus{
  border: 2px solid %color:Primary%;
  padding: 7px 15px;
}

textarea.anvil-component.anvil-role-outlined-error:hover, textarea.anvil-component.anvil-role-outlined-error:focus, 
input.anvil-component.anvil-role-outlined-error:hover, input.anvil-component.anvil-role-outlined-error:focus,
.anvil-component.anvil-role-outlined-error select:hover, .anvil-component.anvil-role-outlined-error select:focus,
.anvil-datepicker.anvil-role-outlined-error input:hover, .anvil-datepicker.anvil-role-outlined-error input:focus{
  border: 2px solid %color:Error%;
  padding-bottom: 6px;
}

textarea.anvil-component.anvil-role-outlined[disabled], input.anvil-component.anvil-role-outlined[disabled], 
.anvil-component.anvil-role-outlined select[disabled], .anvil-datepicker.anvil-role-outlined input[disabled], 
textarea.anvil-component.anvil-role-outlined-error[disabled], input.anvil-component.anvil-role-outlined-error[disabled], 
.anvil-component.anvil-role-outlined-error select[disabled], .anvil-datepicker.anvil-role-outlined-error input[disabled] {
  border: 1px solid %color:On Disabled%;
  color: %color:On Disabled%;
  padding-bottom: 8px;
}

Specifies 8px bottom padding to the textareas, textboxes, etc. while they are disabled. The problem is that when you hover over them, the padding reverts to 7px.

I had to add this css to avoid that:

textarea.anvil-component.anvil-role-outlined[disabled]:hover, input.anvil-component.anvil-role-outlined[disabled]:hover, 
.anvil-component.anvil-role-outlined select[disabled]:hover, .anvil-datepicker.anvil-role-outlined input[disabled]:hover, 
textarea.anvil-component.anvil-role-outlined-error[disabled]:hover, input.anvil-component.anvil-role-outlined-error[disabled]:hover, 
.anvil-component.anvil-role-outlined-error select[disabled]:hover, .anvil-datepicker.anvil-role-outlined-error input[disabled]:hover {
  border: 1px solid %color:On Disabled% !important;
  color: %color:On Disabled%;
  padding: 8px 16px;
}
1 Like