Animate modals & improve layout on mobile (#1675)
This commit is contained in:
parent
50fb15c7f2
commit
6690880241
4 changed files with 59 additions and 3 deletions
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue