mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-07 16:44:20 +01:00
Mobile dialog style changes
- Add dialog close button back, hide the footer cancel buttons to avoid duplication - Footer buttons with icon show only icon, label preserved for accessibility - Footer buttons without icon show as button with label - Footer buttons can wrap to another line
This commit is contained in:
parent
0abbd65d35
commit
ae01e30d55
@ -8326,11 +8326,13 @@ table.egwGridView_grid img.et2_appicon {
|
|||||||
--width: 100%;
|
--width: 100%;
|
||||||
}
|
}
|
||||||
body et2-dialog::part(panel) {
|
body et2-dialog::part(panel) {
|
||||||
|
/* make dialog full screen */
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
body et2-dialog::part(header) {
|
body et2-dialog::part(header) {
|
||||||
|
/* Set header size, color & background */
|
||||||
color: white;
|
color: white;
|
||||||
background: #0c5da5;
|
background: #0c5da5;
|
||||||
height: 5ex;
|
height: 5ex;
|
||||||
@ -8339,25 +8341,36 @@ table.egwGridView_grid img.et2_appicon {
|
|||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
body et2-dialog::part(close-button) {
|
body et2-dialog::part(close-button) {
|
||||||
display: none;
|
/* Move dialog close button up, change color */
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
-webkit-filter: brightness(0) invert(1) !important;
|
||||||
|
filter: brightness(0) invert(1) !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
background-size: 24px 24px !important;
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
body et2-dialog::part(footer) {
|
body et2-dialog::part(footer) {
|
||||||
|
/* Move footer to top, set background color */
|
||||||
order: -1;
|
order: -1;
|
||||||
box-shadow: 0px 4px 5px 2px silver;
|
box-shadow: 0px 4px 5px 2px silver;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
background: #0c5da5;
|
background: #0c5da5;
|
||||||
|
/* Allow buttons to wrap */
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
body et2-dialog et2-button[slot="footer"] {
|
body et2-dialog et2-button[slot="footer"]:has(et2-image) {
|
||||||
padding-left: 150%;
|
/* Fixed size on footer buttons */
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
body et2-dialog et2-button[slot="footer"] et2-image {
|
body et2-dialog et2-button[slot="footer"] et2-image {
|
||||||
|
/* Make icons white, set size */
|
||||||
height: 24px;
|
height: 24px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
max-width: initial;
|
max-width: initial;
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
-webkit-filter: brightness(0) invert(1) !important;
|
-webkit-filter: brightness(0) invert(1) !important;
|
||||||
filter: brightness(0) invert(1) !important;
|
filter: brightness(0) invert(1) !important;
|
||||||
@ -8368,6 +8381,27 @@ table.egwGridView_grid img.et2_appicon {
|
|||||||
body et2-dialog et2-button[slot="footer"] et2-image span {
|
body et2-dialog et2-button[slot="footer"] et2-image span {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
|
body et2-dialog et2-button[slot="footer"][id*="cancel"] {
|
||||||
|
/* Hide cancel button, it will look like a duplicated bug so close to dialog close button */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
body et2-dialog et2-button[slot="footer"]:has(et2-image)::part(base),
|
||||||
|
body et2-button[slot="footer"]:has(et2-image)::part(base):not(:hover),
|
||||||
|
body et2-dialog et2-button[variant=default][slot="footer"]:has(et2-image)::part(base):not(:hover) {
|
||||||
|
/* Have an icon - Hide button style, just show image */
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
body et2-dialog et2-button[slot="footer"]:has(et2-image)::part(label) {
|
||||||
|
/* Visually hide labels but leave them there for accessibility */
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
flex: 0 1 auto;
|
||||||
|
}
|
||||||
body et2-button.plus_button {
|
body et2-button.plus_button {
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
right: 15px;
|
right: 15px;
|
||||||
|
@ -590,12 +590,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
et2-dialog::part(panel) {
|
et2-dialog::part(panel) {
|
||||||
|
/* make dialog full screen */
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
et2-dialog::part(header) {
|
et2-dialog::part(header) {
|
||||||
|
/* Set header size, color & background */
|
||||||
color: white;
|
color: white;
|
||||||
background: #0c5da5;
|
background: #0c5da5;
|
||||||
height: 5ex;
|
height: 5ex;
|
||||||
@ -605,28 +607,38 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
et2-dialog::part(close-button) {
|
et2-dialog::part(close-button) {
|
||||||
display: none;
|
/* Move dialog close button up, change color */
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
.white-svg
|
||||||
}
|
}
|
||||||
|
|
||||||
et2-dialog::part(footer) {
|
et2-dialog::part(footer) {
|
||||||
|
/* Move footer to top, set background color */
|
||||||
order: -1;
|
order: -1;
|
||||||
box-shadow: 0px 4px 5px 2px silver;
|
box-shadow: 0px 4px 5px 2px silver;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
|
|
||||||
background: #0c5da5;
|
background: #0c5da5;
|
||||||
|
|
||||||
|
/* Allow buttons to wrap */
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
et2-dialog et2-button[slot="footer"]:has(et2-image) {
|
||||||
|
/* Fixed size on footer buttons */
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
et2-dialog et2-button[slot="footer"] {
|
et2-dialog et2-button[slot="footer"] {
|
||||||
padding-left: 150%;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
|
|
||||||
et2-image {
|
et2-image {
|
||||||
|
/* Make icons white, set size */
|
||||||
height: 24px;
|
height: 24px;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
max-width: initial;
|
max-width: initial;
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
.white-svg;
|
.white-svg;
|
||||||
|
|
||||||
@ -636,6 +648,28 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
et2-dialog et2-button[slot="footer"][id*="cancel"] {
|
||||||
|
/* Hide cancel button, it will look like a duplicated bug so close to dialog close button */
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
et2-dialog et2-button[slot="footer"]:has(et2-image)::part(base), et2-button[slot="footer"]:has(et2-image)::part(base):not(:hover), et2-dialog et2-button[variant=default][slot="footer"]:has(et2-image)::part(base):not(:hover) {
|
||||||
|
/* Have an icon - Hide button style, just show image */
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
et2-dialog et2-button[slot="footer"]:has(et2-image)::part(label) {
|
||||||
|
/* Visually hide labels but leave them there for accessibility */
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
flex: 0 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
et2-button.plus_button {
|
et2-button.plus_button {
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
right: 15px;
|
right: 15px;
|
||||||
|
Loading…
Reference in New Issue
Block a user