Set loading image on replaced elements instead of on their descendants

Replaced elements do not have "::after" nor "::before" pseudo-elements,
so the regular loading icon needs to be shown using a background image
instead of the default "::after" pseudo-element approach. However, the
CSS rules were not applied on the replaced elements themselves, but on
their descendants. As the descendants might have support for
pseudo-elements the rules were fixed to be applied on the replaced
elements, and only on the replaced elements.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
This commit is contained in:
Daniel Calviño Sánchez 2020-02-27 10:25:58 +01:00
parent 72cc8270cd
commit 5f1713f9db
1 changed files with 4 additions and 4 deletions

View File

@ -82,16 +82,16 @@
/* Css replaced elements don't have ::after nor ::before */
img, object, video, button, textarea, input, select, div[contenteditable='true'] {
.icon-loading {
&.icon-loading {
background-image: url('../img/loading.gif');
}
.icon-loading-dark {
&.icon-loading-dark {
background-image: url('../img/loading-dark.gif');
}
.icon-loading-small {
&.icon-loading-small {
background-image: url('../img/loading-small.gif');
}
.icon-loading-small-dark {
&.icon-loading-small-dark {
background-image: url('../img/loading-small-dark.gif');
}
}