Make weekend toggle better responsive to content size preference

This commit is contained in:
nathan 2022-11-11 11:32:06 -07:00
parent bd584e468c
commit e0617394fb
4 changed files with 22 additions and 7 deletions

View File

@ -9,7 +9,7 @@
*/
import {css, html, PropertyValues, SlotMixin} from "@lion/core";
import {css, html, SlotMixin} from "@lion/core";
import {Et2InputWidget} from "../Et2InputWidget/Et2InputWidget";
import '../Et2Image/Et2Image';
import {SlSwitch} from "@shoelace-style/shoelace";
@ -50,6 +50,7 @@ export class Et2Switch extends Et2InputWidget(SlotMixin(SlSwitch))
{
width: var(--width);
display: inline-flex;
align-items: center;
height: var(--height);
}
`,

View File

@ -1482,16 +1482,18 @@ img.calendar_print_button, img.calendar_print_appicon {
et2-switch#calendar-toolbar_toolbar-weekend {
background-image: none !important;
}
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend::part(base){width: 100%}
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend::part(base){width: 100%; height: 100%;}
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label span {
background-size: 20px;
background-size: contain;
height: 75%;
}
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label {
width: 100%;
height: 100%;
}
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend {min-width: 60px;}
et2-switch#calendar-toolbar_toolbar-weekend::part(control) {width: 100%;}
et2-switch#calendar-toolbar_toolbar-weekend::part(label) {width: 100%;}
et2-switch#calendar-toolbar_toolbar-weekend::part(label) {width: 100%; height: 100%;}
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch[checked],
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"][checked] ,

View File

@ -92,7 +92,7 @@
position: relative;
}
#calendar-sidebox_cat_id {
margin-bottom: 10px;
margin-bottom: 5px;
}
#calendar-sidebox_cat_id ~ * {
vertical-align: top;
@ -1451,12 +1451,15 @@ et2-switch#calendar-toolbar_toolbar-weekend {
}
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend::part(base) {
width: 100%;
height: 100%;
}
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label span {
background-size: 20px;
background-size: contain;
height: 75%;
}
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label {
width: 100%;
height: 100%;
}
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend {
min-width: 60px;
@ -1466,6 +1469,7 @@ et2-switch#calendar-toolbar_toolbar-weekend::part(control) {
}
et2-switch#calendar-toolbar_toolbar-weekend::part(label) {
width: 100%;
height: 100%;
}
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch[checked],
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"][checked],
@ -1595,6 +1599,10 @@ et2-switch#calendar-toolbar_toolbar-weekend::part(label) {
height: 70%;
margin-bottom: 2em;
}
et2-button#calendar-toolbar_toolbar-today::part(label) {
font-weight: bold;
color: dimgrey;
}
/*generell*/
.egw_fw_content_browser_iframe img[src$="svg"] {
background-color: #828282 !important;

View File

@ -1439,12 +1439,15 @@ et2-switch#calendar-toolbar_toolbar-weekend {
}
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend::part(base) {
width: 100%;
height: 100%;
}
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label span {
background-size: 20px;
background-size: contain;
height: 75%;
}
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend .label {
width: 100%;
height: 100%;
}
#calendar-toolbar_toolbar et2-switch#calendar-toolbar_toolbar-weekend {
min-width: 60px;
@ -1454,6 +1457,7 @@ et2-switch#calendar-toolbar_toolbar-weekend::part(control) {
}
et2-switch#calendar-toolbar_toolbar-weekend::part(label) {
width: 100%;
height: 100%;
}
#calendar-toolbar_toolbar span[data-group="integration"] > et2-switch[checked],
#toolbar-menulist et2-switch[id^="calendar-toolbar_toolbar-integration"][checked],