Update mx_AppLoading to improve maintainability (#10783)

* Nesting: mx_AppLoading

* Conform class and animation name to the naming policy

* Nesting for maintainability, preventing the rule from becoming an orphan

* Rename the class: mx_AppLoading to mx_AppTile_loading
This commit is contained in:
Suguru Hirahara 2023-05-08 12:38:04 +00:00 committed by GitHub
parent 631ac742aa
commit aed5fcf64a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 24 deletions

View file

@ -379,7 +379,7 @@ $MinWidth: 240px;
}
}
.mx_AppLoading {
.mx_AppTile_loading {
display: flex;
flex-direction: column;
justify-content: center;
@ -391,24 +391,26 @@ $MinWidth: 240px;
/* match bg of border so that the cut corners have the right fill */
background-color: $widget-body-bg-color !important;
border-radius: 8px;
iframe {
display: none;
}
/* const loadingElement */
.mx_AppTile_loading_fadeInSpinner {
animation-fill-mode: backwards;
animation-duration: 200ms;
animation-delay: 500ms;
animation-name: mx_AppTile_loading_fadeInSpinnerAnimation;
.mx_Spinner {
position: absolute;
inset: 0;
}
}
}
.mx_AppLoading .mx_Spinner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.mx_AppLoading_spinner_fadeIn {
animation-fill-mode: backwards;
animation-duration: 200ms;
animation-delay: 500ms;
animation-name: mx_AppLoading_spinner_fadeIn_animation;
}
@keyframes mx_AppLoading_spinner_fadeIn_animation {
@keyframes mx_AppTile_loading_fadeInSpinnerAnimation {
from {
opacity: 0;
}
@ -417,10 +419,6 @@ $MinWidth: 240px;
}
}
.mx_AppLoading iframe {
display: none;
}
.mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper {
z-index: 1;
}