luci-material-theme: replace margin by gap in ifacebadge

Material is a "flex" theme. Better to use "gap" in place of "margin" to
add some space between elements inside "flex" elements.

This fixes the problem specially when there are text elements inside the
"flex" and don't hurt when there are images.

Signed-off-by: Miguel Angel Mulero Martinez <migmul@gmail.com>

diff --git a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
index 612dae52eb24d2d20bf1bf982e738543ba460dbe..a797a065d880a73603b69225ae22bffcaad176c3 100644 (file)
--- a/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/cascade.css
@@ -1836,6 +1836,7 @@ body.modal-overlay-active #modal_overlay {
 
 .ifacebadge {
        display: inline-flex;
+       gap: .2rem;
        padding: .5rem .8rem;
        border-bottom: thin solid #ccc;
        background: #eee;
@@ -1852,11 +1853,6 @@ td > .ifacebadge,
 .ifacebadge > img {
        display: inline-block;
        align-self: flex-start;
-       margin: 0 .2rem;
-}
-
-.ifacebadge > img + img {
-       margin: 0 .2rem 0 0;
 }
 
 .network-status-table {