aboutsummaryrefslogtreecommitdiff
path: root/ext/bg/css
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-01-30 19:47:16 -0500
committerGitHub <noreply@github.com>2021-01-30 19:47:16 -0500
commit60c38ab83c429d9e4853dbd4ea9fa06eb8f9efa6 (patch)
tree9cee934377c6d80ab53b852b876a9d82e48f9882 /ext/bg/css
parent828c4b11c14a13abe6ce352177ece341471e374f (diff)
Modal refactor (#1335)
* Rename modal-container to modal * Update how modal IDs are handled * Fix invalid modal check * Update modal IDs
Diffstat (limited to 'ext/bg/css')
-rw-r--r--ext/bg/css/settings2.css14
1 files changed, 7 insertions, 7 deletions
diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css
index 46e859c1..01c19af4 100644
--- a/ext/bg/css/settings2.css
+++ b/ext/bg/css/settings2.css
@@ -677,7 +677,7 @@ select.short-height {
/* Modal */
-.modal-container {
+.modal {
position: fixed;
left: 0;
top: 0;
@@ -697,14 +697,14 @@ select.short-height {
opacity var(--animation-duration2) ease-out,
visibility 0s linear;
}
-.modal-container[hidden] {
+.modal[hidden] {
opacity: 0;
visibility: hidden;
transition:
opacity var(--animation-duration2) ease-in,
visibility 0s linear var(--animation-duration2);
}
-.modal-container[hidden]:not(.hidden-animating) {
+.modal[hidden]:not(.hidden-animating) {
display: none;
}
.modal-content {
@@ -726,7 +726,7 @@ select.short-height {
flex-flow: column nowrap;
overflow: hidden;
}
-.modal-container[hidden] .modal-content {
+.modal[hidden] .modal-content {
pointer-events: none;
}
.modal-content.modal-content-small {
@@ -741,7 +741,7 @@ select.short-height {
transform: translate(0, 0);
border-radius: 0;
}
-.modal-container[hidden] .modal-content {
+.modal[hidden] .modal-content {
transform: translate(0, var(--modal-transition-offset));
transition:
transform 0s linear var(--animation-duration2),
@@ -811,7 +811,7 @@ select.short-height {
padding-bottom: var(--settings-group-inner-horizontal-padding-fourth);
}
-.modal-container.modal-container-left {
+.modal.modal-left {
display: flex;
flex-flow: row nowrap;
width: 100%;
@@ -819,7 +819,7 @@ select.short-height {
background-color: transparent;
pointer-events: none;
}
-.modal-container.modal-container-left::after {
+.modal.modal-left::after {
content: '';
display: block;
overflow-y: scroll;