smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make dialogs look better on mobile (#908)

Browse source 
* Standardize mobile media query

* Refactor & add mobile support to dialogs

* back & close icons
This commit is contained in:
Jed Fox 2020-03-13 15:32:47 -04:00 • committed by GitHub
parent c85315650f
commit 668f8ec4a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 328 additions and 201 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/components/Dialog.scss Normal file
View file

@ -0,0 +1,49 @@
@import "../_variables";
.Dialog__title {
--metric: calc(var(--space-factor) * 4);
display: grid;
align-items: center;
margin-top: 0;
grid-template-columns: 1fr calc(var(--space-factor) * 7);
grid-gap: var(--metric);
}
.Dialog__titleContent {
flex: 1;
}
.Dialog .Modal__close {
margin: 0;
}
@media #{$media-query} {
.Dialog__title {
grid-template-columns: calc(var(--space-factor) * 7) 1fr calc(
var(--space-factor) * 7
);
position: sticky;
top: calc(-1 * var(--metric));
margin: calc(-1 * var(--metric));
margin-bottom: var(--metric);
padding: calc(var(--space-factor) * 2) var(--metric);
background: white;
font-size: 1.25em;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
z-index: 1;
}
.Dialog__titleContent {
text-align: center;
}
.Dialog .Island {
height: 100%;
box-sizing: border-box;
overflow-y: auto;
}
.Dialog .Modal__close {
order: -1;
}
}