From 5f1713f9db76ee62bcd7cbe4a0f1227c75b00e3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Thu, 27 Feb 2020 10:25:58 +0100 Subject: [PATCH 1/2] Set loading image on replaced elements instead of on their descendants MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- core/css/icons.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/core/css/icons.scss b/core/css/icons.scss index 2dbd08f61d9..53ae4d77118 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -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'); } } From 243feca7869b65945bc6b617d378d7d76f60754d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Thu, 27 Feb 2020 10:35:54 +0100 Subject: [PATCH 2/2] Adjust list of replaced elements to the spec MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit "button, textarea, select, div[contenteditable='true']" were removed and "audio, canvas, embed, iframe" were added. Note that this is a coarse-grained list; according to the spec some of the elements, like canvas or input, might be treated as a replaced element in some cases and as ordinary elements in others: https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements For now all the elements that might be replaced elements use the loading image by default, so apps will need to override that when the elements are treated as ordinary elements. Of course that can be flipped in the future to instead make an element to use the "::after" approach by default if it is found that the element requires the override often. Signed-off-by: Daniel Calviño Sánchez --- core/css/icons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/css/icons.scss b/core/css/icons.scss index 53ae4d77118..ebf61b761e7 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -81,7 +81,7 @@ } /* Css replaced elements don't have ::after nor ::before */ -img, object, video, button, textarea, input, select, div[contenteditable='true'] { +audio, canvas, embed, iframe, img, input, object, video { &.icon-loading { background-image: url('../img/loading.gif'); }