lbry-desktop/ui/scss/component/_modal.scss

96 lines
1.7 KiB
SCSS
Raw Normal View History

2020-03-30 21:43:27 +02:00
.ReactModal__Body--open {
#app {
height: 100vh;
overflow-y: hidden;
}
}
.modal-overlay {
top: 0;
left: 0;
bottom: 0;
2018-10-17 19:14:24 +02:00
right: 0;
align-items: center;
2019-11-22 22:13:00 +01:00
background-color: var(--color-background-overlay);
2018-10-17 19:14:24 +02:00
display: flex;
justify-content: center;
position: fixed;
2017-04-12 22:23:20 +02:00
z-index: 9999;
}
.modal {
2019-11-22 22:13:00 +01:00
@extend .card;
2020-01-02 17:30:27 +01:00
background-color: var(--color-modal-background);
line-height: 1.55;
2019-12-21 22:16:27 +01:00
min-width: 500px;
2018-10-17 19:14:24 +02:00
max-width: var(--modal-width);
2017-04-12 22:23:20 +02:00
overflow: auto;
2019-06-11 20:10:58 +02:00
padding: var(--spacing-large);
2017-07-29 18:59:47 +02:00
word-break: break-word;
2018-04-17 04:21:19 +02:00
2019-11-22 22:13:00 +01:00
&:focus {
box-shadow: none;
}
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
width: 100%;
height: 100%;
2019-12-19 21:43:49 +01:00
max-width: 100%;
2019-12-22 23:52:21 +01:00
min-width: auto;
2019-12-18 06:27:08 +01:00
margin-bottom: 0;
border-radius: 0;
2019-12-19 21:43:49 +01:00
.card {
box-shadow: none;
2020-03-30 21:43:27 +02:00
border: none;
2019-12-19 21:43:49 +01:00
}
2019-12-18 06:27:08 +01:00
.navigation {
width: 100%;
display: block;
padding: var(--spacing-large);
.navigation-links:not(.navigation-links--small) {
.navigation-link {
font-size: var(--font-large);
border-bottom: 1px solid var(--color-gray-3);
padding: var(--spacing-medium) 0;
}
}
}
}
2017-04-12 22:23:20 +02:00
}
2019-11-22 22:13:00 +01:00
.modal--card-internal {
padding: 0;
.card {
margin: 0;
}
}
2017-04-12 22:23:20 +02:00
.error-modal__content {
display: flex;
2019-06-11 20:10:58 +02:00
padding: 0 var(--spacing-medium) var(--spacing-medium) var(--spacing-medium);
2017-04-12 22:23:20 +02:00
}
.error-modal {
max-width: none;
width: var(--modal-width);
white-space: pre-wrap;
2017-04-12 22:23:20 +02:00
}
2018-03-26 23:32:43 +02:00
.error-modal__error-list {
2018-10-17 19:14:24 +02:00
max-width: var(--modal-width);
max-height: 400px;
2019-06-11 20:10:58 +02:00
margin-top: var(--spacing-small);
padding: var(--spacing-small);
2018-10-17 19:14:24 +02:00
2019-12-09 18:25:13 +01:00
background-color: var(--color-error);
border-left: 2px solid var(--color-text-error);
color: var(--color-text-error);
2018-10-17 19:14:24 +02:00
list-style: none;
overflow-y: scroll;
white-space: pre-wrap;
2018-03-26 23:32:43 +02:00
}