Get select hover border back

This commit is contained in:
nathan 2022-07-22 10:43:30 -06:00
parent 0044398090
commit 3cb8b1ecce
3 changed files with 16 additions and 12 deletions

View File

@ -120,26 +120,25 @@ export class Et2DateDuration extends Et2InputWidget(FormControlMixin(LitElement)
css`
.form-field__group-two {
width: 100%;
border: 1px solid var(--input-border-color);
border-radius: var(--sl-input-border-radius-medium, 3px);
}
et2-select {
color: var(--input-text-color);
border-left: 1px solid var(--input-border-color);
flex: 2 1 auto;
}
et2-select::part(form-control-input) {
border: none;
et2-select::part(control) {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
et2-textbox {
flex: 1 1 auto;
max-width: 4.5em;
margin-right: -2px;
}
et2-textbox::part(base) {
border: none;
}
et2-textbox:not(:last-of-type) {
border-right: 1px solid var(--input-border-color);
et2-textbox:not(:last-child)::part(base) {
border-right: none;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
`,

View File

@ -29,7 +29,7 @@ export class Et2SelectCategory extends Et2StaticSelectMixin(Et2Select)
}
/* Border on the (single) selected value */
.select--standard .select__control {
border-left: 8px solid transparent;
border-left: 8px solid var(--sl-input-border-color);
}
`
]
@ -118,7 +118,7 @@ export class Et2SelectCategory extends Et2StaticSelectMixin(Et2Select)
this.append(image);
}
this.dropdown.querySelector(".select__control").style.borderColor =
getComputedStyle(checkedItem).getPropertyValue("--category-color") || "transparent";
getComputedStyle(checkedItem).getPropertyValue("--category-color") || "";
}
}

View File

@ -108,11 +108,16 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
// @ts-ignore
...(super.styles ? (Symbol.iterator in Object(super.styles) ? super.styles : [super.styles]) : []),
css`
/* Move the widget border */
/* Move the widget border
.form-control-input {
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
border-radius: var(--sl-input-border-radius-medium);
}
.form-control-input:hover {
background-color: var(--sl-input-background-color-hover);
border-color: var(--sl-input-border-color-hover);
color: var(--sl-input-color-hover);
}
.select--standard .select__control {
border-style: none;
}