Styling for buttons on dialog

This commit is contained in:
nathan 2022-12-02 11:23:09 -07:00
parent 2f81a55607
commit 3a1c415ce4
4 changed files with 20 additions and 4 deletions

View File

@ -115,6 +115,23 @@ export const ButtonMixin = <T extends Constructor>(superclass : T) => class exte
padding-inline-start: 0;
}
/* Override primary styling - we use variant=primary on first dialog button */
.button--standard.button--primary {
background-color: var(--sl-color-gray-200);
border-color: var(--sl-color-gray-400);
color: var(--sl-input-color-hover);
}
.button--standard.button--primary:hover:not(.button--disabled),
.button--standard.button--primary.button--checked:not(.button--disabled) {
background-color: var(--sl-color-gray-200);
border-color: var(--sl-color-gray-600);
color: initial;
}
.button--standard.button--primary:active:not(.button--disabled) {
border-color: var(--sl-color-gray-700);
background-color: var(--sl-color-gray-300);
color: initial;
}
`,
];
}

View File

@ -204,6 +204,7 @@ export class Et2Dialog extends Et2Widget(SlotMixin(SlDialog))
border-bottom: 1px inset;
}
.dialog__title {
font-size: var(--sl-font-size-medium);
user-select: none;
}
.dialog__close {
@ -846,7 +847,6 @@ export class Et2Dialog extends Et2Widget(SlotMixin(SlDialog))
.noSubmit=${true}
?disabled=${button.disabled}
variant=${isDefault ? "primary" : "default"}
?outline=${isDefault}
align=${ifDefined(button.align)}>
</et2-button>
`
@ -896,7 +896,6 @@ export class Et2Dialog extends Et2Widget(SlotMixin(SlDialog))
if(template_buttons[0]?.instanceOf(Et2Button))
{
template_buttons[0].variant = "primary";
template_buttons[0].outline = true;
}
template_buttons.forEach((button) =>
{

View File

@ -476,7 +476,6 @@ export function nm_open_popup(_action, _selected)
if (index == 0)
{
button.variant = "primary";
button.outline = true;
}
let button_click = button.onclick;
button.onclick = (e) =>

View File

@ -3752,7 +3752,8 @@ table.et2_grid > tbody > tr > td:last-child {
padding-top: 10px !important;
}
.dialogFooterToolbar et2-button::part(base):not(:hover) {
.dialogFooterToolbar et2-button::part(base):not(:hover),
et2-dialog et2-button[variant='default'][slot='footer']::part(base):not(:hover) {
background: hsl(240 4.8% 95.9%);
}