forked from extern/egroupware
Mobile dialog style changes
- dialog takes full width x height - footer on top with large, white icon-only buttons - header has no close button
This commit is contained in:
nathan
parent
24570cd438
commit
7c2266b27b
@ -8324,64 +8324,48 @@ table.egwGridView_grid img.et2_appicon {
|
|||||||
}
|
}
|
||||||
body et2-dialog::part(panel) {
|
body et2-dialog::part(panel) {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
body div.ui-dialog {
|
body et2-dialog::part(header) {
|
||||||
width: 100% !important;
|
color: white;
|
||||||
height: 100% !important;
|
background: #0c5da5;
|
||||||
left: 0 !important;
|
height: 35px;
|
||||||
top: 0 !important;
|
padding: 0;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-top: 15px;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
body div.ui-dialog-content {
|
body et2-dialog::part(close-button) {
|
||||||
height: 87% !important;
|
display: none;
|
||||||
margin-top: 60px !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
font-size: 12pt;
|
|
||||||
}
|
}
|
||||||
body .ui-dialog .ui-dialog-buttonpane {
|
body et2-dialog::part(footer) {
|
||||||
position: fixed !important;
|
order: -1;
|
||||||
bottom: 0 !important;
|
|
||||||
left: 0 !important;
|
|
||||||
display: block !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
height: 50px;
|
|
||||||
box-shadow: 0px 4px 5px 2px silver;
|
box-shadow: 0px 4px 5px 2px silver;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 1;
|
margin-top: 0px;
|
||||||
background: #0c5da5;
|
background: #0c5da5;
|
||||||
}
|
}
|
||||||
body .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
|
body et2-dialog et2-button[slot="footer"] {
|
||||||
float: right;
|
padding-left: 500px;
|
||||||
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
body .ui-dialog .ui-dialog-buttonpane button {
|
body et2-dialog et2-button[slot="footer"] et2-image {
|
||||||
height: 35px;
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
max-width: initial;
|
||||||
|
position: absolute;
|
||||||
|
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;
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
background-size: 24px 24px !important;
|
background-size: 24px 24px !important;
|
||||||
border: none;
|
border: none;
|
||||||
float: right !important;
|
|
||||||
}
|
}
|
||||||
body .ui-dialog .ui-dialog-buttonpane button span {
|
body et2-dialog et2-button[slot="footer"] et2-image span {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
body .ui-dialog .ui-dialog-titlebar {
|
|
||||||
position: fixed;
|
|
||||||
color: white;
|
|
||||||
z-index: 100;
|
|
||||||
background: #0c5da5;
|
|
||||||
width: 100%;
|
|
||||||
height: 35px;
|
|
||||||
padding: 0;
|
|
||||||
padding-left: 5px;
|
|
||||||
margin: -3px;
|
|
||||||
padding-top: 15px;
|
|
||||||
border-radius: 0;
|
|
||||||
}
|
|
||||||
body .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
body et2-button.plus_button {
|
body et2-button.plus_button {
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
right: 15px;
|
right: 15px;
|
||||||
|
|||||||
@ -591,115 +591,124 @@
|
|||||||
|
|
||||||
et2-dialog::part(panel) {
|
et2-dialog::part(panel) {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
max-height: 100%;
|
||||||
div.ui-dialog {
|
height: 100%;
|
||||||
width: 100% !important;
|
|
||||||
height: 100% !important;
|
|
||||||
left: 0 !important;
|
|
||||||
top: 0 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div.ui-dialog-content {
|
et2-dialog::part(header) {
|
||||||
height: 87% !important;
|
color: white;
|
||||||
margin-top: 60px !important;
|
background: #0c5da5;
|
||||||
padding: 0 !important;
|
height: 35px;
|
||||||
|
padding: 0;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-top: 15px;
|
||||||
|
border-radius: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
et2-dialog::part(close-button) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
et2-dialog::part(footer) {
|
||||||
|
order: -1;
|
||||||
|
box-shadow: 0px 4px 5px 2px silver;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 0px;
|
||||||
|
|
||||||
|
background: #0c5da5;
|
||||||
|
}
|
||||||
|
|
||||||
|
et2-dialog et2-button[slot="footer"] {
|
||||||
|
padding-left: 500px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
|
||||||
|
et2-image {
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
max-width: initial;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
.white-svg;
|
||||||
|
|
||||||
|
span {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
et2-button.plus_button {
|
||||||
|
position: fixed !important;
|
||||||
|
right: 15px;
|
||||||
|
bottom: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
background-position: center;
|
||||||
|
z-index: 100;
|
||||||
|
background-color: #0c5da5;
|
||||||
|
border: none;
|
||||||
|
background-image: url(../../api/templates/default/images/topmenu_items/mobile/plus_white.svg) !important;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 24px 24px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&:hover, &:active {
|
||||||
|
background-color: #0c5da5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
et2-button.plus_button::part(base) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.et2_nextmatch {
|
||||||
|
.nextmatch_sortheader {
|
||||||
|
padding-right: 0px;
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nextmatch_header_row, .nextmatch_header {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
div.header_row_right {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
top: 0;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filtersContainer {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 50px;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
et2-select, et2-select-cat {
|
||||||
|
max-width: 100%
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
background-color: background-color-egw-dark;
|
||||||
|
|
||||||
|
et2-select, et2-select-cat {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: @mobile-elem-height;
|
||||||
.mob-fontsize-l;
|
.mob-fontsize-l;
|
||||||
}
|
background-size: 32px;
|
||||||
.ui-dialog .ui-dialog-buttonpane {
|
border-left: none;
|
||||||
position: fixed !important;
|
border-right: none;
|
||||||
bottom:0 !important;
|
|
||||||
left:0 !important;
|
|
||||||
display:block !important;
|
|
||||||
padding:0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
height: 50px;
|
|
||||||
box-shadow: 0px 4px 5px 2px silver;
|
|
||||||
width: 100%;
|
|
||||||
z-index:1;
|
|
||||||
.ui-dialog-buttonset {float:right;height:50px;}
|
|
||||||
button {
|
|
||||||
height:35px;
|
|
||||||
.white-svg;
|
|
||||||
float: right !important;
|
|
||||||
span {padding-left: 20px;}
|
|
||||||
}
|
|
||||||
background: #0c5da5;
|
|
||||||
}
|
|
||||||
.ui-dialog .ui-dialog-titlebar {
|
|
||||||
position: fixed;
|
|
||||||
color: white;
|
|
||||||
z-index: 100;
|
|
||||||
background: #0c5da5;
|
|
||||||
width: 100%;
|
|
||||||
height: 35px;
|
|
||||||
padding: 0;
|
|
||||||
padding-left: 5px;
|
|
||||||
margin: -3px;
|
|
||||||
padding-top: 15px;
|
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
.ui-dialog-titlebar-close {
|
border-bottom: none;
|
||||||
display: none;
|
padding-left: 10px;
|
||||||
}
|
max-width: none;
|
||||||
}
|
background-color: transparent;
|
||||||
et2-button.plus_button {
|
}
|
||||||
position: fixed !important;
|
|
||||||
right: 15px;
|
|
||||||
bottom: 15px;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
background-position: center;
|
|
||||||
z-index: 100;
|
|
||||||
background-color: #0c5da5;
|
|
||||||
border: none;
|
|
||||||
background-image: url(../../api/templates/default/images/topmenu_items/mobile/plus_white.svg) !important;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 24px 24px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
&:hover, &:active {
|
|
||||||
background-color: #0c5da5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
et2-button.plus_button::part(base) {display: none;}
|
|
||||||
.et2_nextmatch {
|
|
||||||
.nextmatch_sortheader {
|
|
||||||
padding-right: 0px;
|
|
||||||
margin-right: 0px;
|
|
||||||
}
|
|
||||||
.nextmatch_header_row, .nextmatch_header
|
|
||||||
{
|
|
||||||
flex-direction: column;
|
|
||||||
div.header_row_right {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
top:0;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.filtersContainer {
|
|
||||||
width:100%;
|
|
||||||
margin-top:50px;
|
|
||||||
flex-direction: column;
|
|
||||||
et2-select, et2-select-cat {max-width: 100%}
|
|
||||||
}
|
|
||||||
background-color: background-color-egw-dark;
|
|
||||||
|
|
||||||
et2-select, et2-select-cat {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
|
||||||
height: @mobile-elem-height;
|
|
||||||
.mob-fontsize-l;
|
|
||||||
background-size: 32px;
|
|
||||||
border-left: none;
|
|
||||||
border-right: none;
|
|
||||||
border-radius: 0;
|
|
||||||
border-bottom: none;
|
|
||||||
padding-left:10px;
|
|
||||||
max-width:none;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
label {
|
|
||||||
display:block;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: left;
|
float: left;
|
||||||
.mob-fontsize-l;
|
.mob-fontsize-l;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user