imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make LocationPicker appearance cleaner (#7516)

Browse source
This commit is contained in:
Andy Balaam 2022-01-12 09:19:26 +00:00 • committed by GitHub
parent f5465b37a9
commit 31247a50ca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 72 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

67
res/css/views/location/_LocationPicker.scss
View file

@ -15,26 +15,71 @@ limitations under the License.
*/
.mx_LocationPicker {
// placeholder sizing to be replaced once there's a proper design
width: 450px;
height: 500px;
width: 375px;
height: 460px;
border-radius: 4px;
border-radius: 8px;
display: flex;
flex-direction: column;
position: relative;
}
#mx_LocationPicker_map {
height: 408px;
border-radius: 8px 8px 0px 0px;
height: 100%;
border-radius: 8px;
.maplibregl-ctrl.maplibregl-ctrl-group {
margin-top: 50px;
}
.maplibregl-ctrl-bottom-right {
bottom: 68px;
}
}
.mx_LocationPicker_footer {
margin: 24px;
position: absolute;
bottom: 0px;
width: 100%;
.mx_Dropdown_menu {
max-height: 140px;
.mx_Dialog_buttons {
text-align: center;
/* Note the `button` prefix and `not()` clauses are needed to make
these selectors more specific than those in _common.scss. */
button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton) {
margin: 0px 0px 16px 0px;
min-width: 328px;
min-height: 48px;
}
button.mx_LocationPicker_cancelButton {
border: none;
border-radius: 12px;
position: absolute;
top: -360px;
right: 5px;
background-color: $quinary-content;
width: 24px;
height: 24px;
padding: 0px;
color: rgba(0, 0, 0, 0);
}
button.mx_LocationPicker_cancelButton::before {
content: '';
background-color: $primary-content;
min-width: 8px;
min-height: 8px;
width: 8px;
height: 8px;
position: absolute;
margin: 4px 8px;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
mask-image: url('$(res)/img/cancel-small.svg');
}
}
}