Justin Edmund
9e6c9a2108
Parties can now be set to be private or unlisted. Private parties cannot be shared with anyone while Unlisted parties can be seen by those with the link. We implemented a dialog to change visibility, notices to let users know if a party isn't public, and icons on the GridRep so users can see at a glance which of their parties has different visibility on their profile.   
82 lines
1.3 KiB
SCSS
82 lines
1.3 KiB
SCSS
.wrapper {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
position: fixed;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 12;
|
|
}
|
|
|
|
.overlay {
|
|
isolation: isolate;
|
|
position: fixed;
|
|
z-index: 9;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.alert {
|
|
animation: $duration-modal-open cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none
|
|
running openModalDesktop;
|
|
background: var(--dialog-bg);
|
|
border-radius: $unit;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $unit-2x;
|
|
min-width: 20vw;
|
|
max-width: 32vw;
|
|
padding: $unit * 4;
|
|
|
|
@include breakpoint(tablet) {
|
|
max-width: inherit;
|
|
max-width: 60vw;
|
|
}
|
|
|
|
@include breakpoint(phone) {
|
|
max-width: inherit;
|
|
width: 70vw;
|
|
}
|
|
|
|
.description {
|
|
font-size: $font-regular;
|
|
line-height: 1.4;
|
|
white-space: pre-line;
|
|
|
|
strong {
|
|
font-weight: $bold;
|
|
}
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
align-self: flex-end;
|
|
gap: $unit;
|
|
|
|
@include breakpoint(phone) {
|
|
flex-direction: column-reverse;
|
|
align-self: center;
|
|
width: 100%;
|
|
|
|
& > * {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes openModalDesktop {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.96);
|
|
}
|
|
|
|
100% {
|
|
// opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
}
|