feat: CSS mit Bootstrap für mobil beschreibbare Toolbar-Elemente anordnen

This commit is contained in:
Developer 02 2024-10-14 17:24:49 +02:00
parent 1dd9ce6bbc
commit 24e6ffc5ef
3 changed files with 78 additions and 27 deletions

View File

@ -31,39 +31,90 @@
} }
.button-finish { .button-finish {
transition: background-color linear 300ms; color: #fff;
background-color: #059669; /* emerald-600 */ background-color: #0d6efd;
color: white; border-color: #0d6efd;
border-left: none;
} }
.button-finish:hover, .button-finish:focus, .button-finish:active { .button-finish:hover {
background-color: #10b981; /* emerald-500 */ color: #fff;
color: white; background-color: #0b5ed7;
border-color: #0a58ca;
}
.button-finish:focus {
box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.button-finish:active {
color: #fff;
background-color: #0a58ca;
border-color: #0a53be;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.button-finish:disabled {
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
} }
.button-reject { .button-reject {
transition: background-color linear 300ms; color: #fff;
background-color: #d97706; /* amber-600 */ background-color: #dc3545;
color: white; border-color: #dc3545;
border-left: none;
} }
.button-reject:hover, .button-reject:focus, .button-reject:active { .button-reject:hover {
background-color: #f59e0b; /* amber-500 */ color: #fff;
color: white; background-color: #bb2d3b;
border-color: #b02a37;
}
.button-reject:focus {
box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
}
.button-reject:active {
color: #fff;
background-color: #b02a37;
border-color: #a52834;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.button-reject:disabled {
color: #fff;
background-color: #dc3545;
border-color: #dc3545;
} }
.button-reset { .button-reset {
transition: background-color linear 300ms; color: #fff;
background-color: #2563eb; /* blue-600 */ background-color: #6c757d;
color: white; border-color: #6c757d;
border-left: none;
} }
.button-reset:hover, .button-reset:focus, .button-reset:active { .button-reset:hover {
background-color: #3b82f6; /* blue-500 */ color: #fff;
color: white; background-color: #5c636a;
border-color: #565e64;
}
.button-reset:focus {
box-shadow: 0 0 0 0.25rem rgba(130, 138, 145, 0.5);
}
.button-reset:active {
color: #fff;
background-color: #565e64;
border-color: #51585e;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.button-reset:disabled {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
} }
body { body {

File diff suppressed because one or more lines are too long

View File

@ -53,13 +53,13 @@
static addToolbarItems(instance, handler) { static addToolbarItems(instance, handler) {
var toolbarItems = instance.toolbarItems.filter((item) => UI.allowedToolbarItems.includes(item.type)); var toolbarItems = instance.toolbarItems.filter((item) => UI.allowedToolbarItems.includes(item.type));
if(!IS_READONLY) if (!IS_READONLY)
toolbarItems = toolbarItems.concat(UI.getWritableItems(handler)); toolbarItems = toolbarItems.concat(UI.getWritableItems(handler));
if(!IS_DESKTOP && !IS_READONLY) if (!IS_DESKTOP && !IS_READONLY)
toolbarItems = toolbarItems.concat(UI.getMobileWritableItems(handler)); toolbarItems = toolbarItems.concat(UI.getMobileWritableItems(handler));
instance.setToolbarItems(toolbarItems) instance.setToolbarItems(toolbarItems)
} }
static annotationRenderer(data) { static annotationRenderer(data) {