Animate modals & improve layout on mobile (#1675)

This commit is contained in:
Rave | 図書館猫 2022-06-13 09:16:31 +02:00 committed by GitHub
parent 50fb15c7f2
commit 6690880241
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 59 additions and 3 deletions

View file

@ -751,7 +751,10 @@ svg + .button__label {
width: 100%;
text-align: center;
border-radius: var(--border-radius);
border: 1px solid var(--color-border);
// border: 1px solid var(--color-border);
&:not(.button-toggle--active) {
border-right: 2px solid var(--color-border) !important;
}
&:not(:first-of-type) {
margin-top: var(--spacing-s);

View file

@ -471,8 +471,29 @@
}
.ReactModal__Overlay {
.ReactModal__Content {
transform: scale(0);
transition: transform 0.2s;
}
.button--close {
margin: 0;
@media (max-width: $breakpoint-small) {
width: var(--height-input);
height: var(--height-input);
margin: var(--spacing-s);
background: var(--color-primary);
.button__content {
align-items: center;
justify-content: center;
}
}
}
}
.ReactModal__Overlay--after-open {
.ReactModal__Content {
transform: scale(1);
transition: transform 0.4s;
}
}

View file

@ -25,7 +25,25 @@
z-index: 9999;
@media (max-width: $breakpoint-small) {
background-color: rgba(var(--color-header-background-base), 0.95);
// background-color: rgba(var(--color-header-background-base), 0.95);
background-color: rgba(var(--color-header-background-base), 0.4);
padding: var(--spacing-s);
// // border:
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
// border: 2px solid black;
.ReactModal__Content {
border: 2px solid black;
border-radius: var(--border-radius);
.card {
padding: var(--spacing-m);
border: unset;
.card__title {
margin-top: var(--spacing-s);
}
}
}
}
}
@ -102,13 +120,25 @@
.card__main-actions {
.section__actions {
.button {
margin-top: var(--spacing-m);
margin-right: var(--spacing-m);
padding: 0;
.button__content {
.button__label {
font-size: var(--font-small);
}
}
}
.button--primary {
.button__content {
.icon {
margin-left: var(--spacing-s);
}
.button__label {
margin-right: var(--spacing-s);
}
}
}
}
.help {
font-size: var(--font-small);

View file

@ -29,7 +29,9 @@
background-color: transparent;
color: var(--color-text);
border-radius: 0;
margin-right: var(--spacing-l);
// margin-right: var(--spacing-l);
margin-top: 5px;
margin-right: 64px;
&:focus {
box-shadow: none;