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

View File

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

View File

@ -3752,7 +3752,8 @@ table.et2_grid > tbody > tr > td:last-child {
padding-top: 10px !important; 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%); background: hsl(240 4.8% 95.9%);
} }