luci-base: add markup, JS and CSS for new dropdown

This commit introduces the required code for a new, markup based dropdown
widget which can be used as a styleable alternative to select boxes or
radio/checkbox button groups.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

3 files changed, 571 insertions, 41 deletions

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
index 5aff09148..4a40f6d68 100644
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -430,7 +430,6 @@ form .clearfix,
 form .cbi-value {
 	margin-bottom: 18px;
 	zoom: 1;
-	overflow: hidden;
 }
 
 form .clearfix:before, form .clearfix:after,
@@ -477,6 +476,7 @@ input[type=checkbox], input[type=radio] {
 input,
 textarea,
 select,
+.cbi-dropdown,
 .uneditable-input {
 	display: inline-block;
 	width: 210px;
@@ -487,6 +487,13 @@ select,
 	color: #808080;
 	border: 1px solid #ccc;
 	border-radius: 3px;
+	box-sizing: border-box;
+}
+
+.cbi-dropdown {
+	min-width: 210px;
+	max-width: 400px;
+	width: auto;
 }
 
 select {
@@ -1332,6 +1339,159 @@ footer {
 	background-image: url('../resources/cbi/download.gif'), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
 }
 
+.cbi-dropdown {
+	border: 1px solid #ccc;
+	border-radius: 3px;
+	display: inline-flex;
+	padding: 0;
+	cursor: pointer;
+	height: auto;
+	background: linear-gradient(#fff 0%, #e9e8e6 100%);
+	position: relative;
+	color: #404040;
+}
+
+.cbi-dropdown:focus {
+	outline: 2px solid #4b6e9b;
+}
+
+.cbi-dropdown > ul {
+	margin: 0 !important;
+	padding: 0;
+	list-style: none;
+	overflow-x: hidden;
+	overflow-y: auto;
+	display: flex;
+	width: 100%;
+}
+
+.cbi-dropdown > ul.preview {
+	display: none;
+}
+
+.cbi-dropdown > .open,
+.cbi-dropdown > .more {
+	flex-grow: 0;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	text-align: center;
+	line-height: 2em;
+	padding: 0 .25em;
+}
+
+.cbi-dropdown > .more,
+.cbi-dropdown > ul > li[placeholder] {
+	color: #777;
+	font-weight: bold;
+	text-shadow: 1px 1px 0px #fff;
+	display: none;
+}
+
+.cbi-dropdown > ul > li {
+	display: none;
+	padding: .25em;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	flex-shrink: 1;
+	flex-grow: 1;
+	align-items: center;
+	align-self: center;
+	color: #404040;
+	min-height: 20px;
+}
+
+.cbi-dropdown > ul > li .hide-open { display: initial; }
+.cbi-dropdown > ul > li .hide-close { display: none; }
+
+.cbi-dropdown > ul > li[display]:not([display="0"]) {
+	border-left: 1px solid #ccc;
+}
+
+.cbi-dropdown[empty] > ul {
+	max-width: 1px;
+}
+
+.cbi-dropdown > ul > li > form {
+	display: none;
+	margin: 0;
+	padding: 0;
+	pointer-events: none;
+}
+
+.cbi-dropdown > ul > li img {
+	vertical-align: middle;
+	margin-right: .25em;
+}
+
+.cbi-dropdown > ul > li > form > input[type="checkbox"] {
+	margin: 0;
+}
+
+.cbi-dropdown > ul > li input[type="text"] {
+	height: 20px;
+}
+
+.cbi-dropdown[open] {
+	position: relative;
+}
+
+.cbi-dropdown[open] > ul.dropdown {
+	display: block;
+	background: #f6f6f5;
+	border: 1px solid #918e8c;
+	box-shadow: 0 0 4px #918e8c;
+	position: absolute;
+	z-index: 1000;
+	max-width: none;
+	min-width: 100%;
+	width: auto;
+}
+
+.cbi-dropdown > ul > li[display],
+.cbi-dropdown[open] > ul.preview,
+.cbi-dropdown[open] > ul.dropdown > li,
+.cbi-dropdown[multiple] > ul > li > label,
+.cbi-dropdown[multiple][open] > ul.dropdown > li,
+.cbi-dropdown[multiple][more] > .more,
+.cbi-dropdown[multiple][empty] > .more {
+	flex-grow: 1;
+	display: flex;
+}
+
+.cbi-dropdown[empty] > ul > li,
+.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
+.cbi-dropdown[multiple][open] > ul.dropdown > li > form {
+	display: block;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
+.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; }
+
+.cbi-dropdown[open] > ul.dropdown > li {
+	border-bottom: 1px solid #ccc;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li[selected] {
+	background: #b0d0f0;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li.focus {
+	background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
+}
+
+.cbi-dropdown[open] > ul.dropdown > li:last-child {
+	margin-bottom: 0;
+	border-bottom: none;
+}
+
+.cbi-dropdown[disabled] {
+	pointer-events: none;
+	opacity: .6;
+}
+
 .btn.active, .btn:active {
 	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
 }
@@ -1423,7 +1583,7 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 	opacity: 0.4;
 }
 
-.alert-message, .errorbox {
+.alert-message {
 	position: relative;
 	padding: 7px 15px;
 	margin-bottom: 18px;
@@ -1646,7 +1806,6 @@ table table td,
 	background-color: #FFFFFF;
 	border: 1px solid #CCCCCC;
 	padding: 2px;
-	margin-left: 2px;
 	background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
 	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
 	border-radius: 4px;
@@ -1712,7 +1871,7 @@ table table td,
 
 .zonebadge > em,
 .zonebadge > strong {
-	margin: 5px;
+	margin: 0 2px;
 	display: inline-block;
 }
 
@@ -1720,6 +1879,10 @@ table table td,
 	width: 6em;
 }
 
+.zonebadge > .ifacebadge {
+	margin-left: 2px;
+}
+
 .zonebadge-empty {
 	border: 1px dashed #AAAAAA;
 	color: #AAAAAA;
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
index a3b22ccf8..a9585cf40 100755
--- a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
@@ -107,7 +107,8 @@ select {
 }
 
 select,
-input {
+input,
+.cbi-dropdown {
     background-color: transparent;
     color: rgba(0, 0, 0, .87);
     border: none;
@@ -157,7 +158,7 @@ header {
     transition: box-shadow .2s;
     float: left;
     position: fixed;
-    z-index: 101;
+    z-index: 2000;
 }
 
 footer {
@@ -452,11 +453,7 @@ fieldset {
     font-style: normal;
     line-height: 1;
     font-family: inherit;
-
     min-width: inherit;
-    overflow-x: auto;
-    overflow-y: hidden;
-
     border-radius: 0;
     background-color: #FFF;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
@@ -626,6 +623,7 @@ td > table > tbody > tr > td,
     box-shadow: none;
 }
 
+.btn + .btn,
 form.inline + form.inline,
 .cbi-button + .cbi-button {
     margin-left: 0.6rem;
@@ -804,6 +802,172 @@ form.inline + form.inline,
     font-size: small;
 }
 
+
+.cbi-dropdown {
+    display: inline-flex;
+    cursor: pointer;
+    position: relative;
+    padding: 0;
+    height: auto;
+}
+
+.cbi-dropdown:focus {
+    outline: 2px solid #4b6e9b;
+}
+
+.cbi-dropdown > ul {
+    margin: 0 !important;
+    padding: 0;
+    list-style: none;
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: flex;
+    width: 100%;
+}
+
+.cbi-dropdown > ul.preview {
+    display: none;
+}
+
+.cbi-dropdown > .open {
+    border: 2px outset #eee;
+    flex-basis: 15px;
+    background: #eee;
+}
+
+.cbi-dropdown > .open,
+.cbi-dropdown > .more {
+    flex-grow: 0;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    line-height: 2em;
+    padding: 0 .25em;
+}
+
+.cbi-dropdown > .more,
+.cbi-dropdown > ul > li[placeholder] {
+    color: #777;
+    font-weight: bold;
+    text-shadow: 1px 1px 0px #fff;
+    display: none;
+}
+
+.cbi-dropdown > ul > li {
+    display: none;
+    padding: .25em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-shrink: 1;
+    flex-grow: 1;
+    align-items: center;
+    align-self: center;
+    min-height: 20px;
+}
+
+.cbi-dropdown > ul > li .hide-open { display: initial; }
+.cbi-dropdown > ul > li .hide-close { display: none; }
+
+.cbi-dropdown > ul > li[display]:not([display="0"]) {
+    border-left: 1px solid #ccc;
+}
+
+.cbi-dropdown[empty] > ul {
+    max-width: 1px;
+}
+
+.cbi-dropdown > ul > li > form {
+    display: none;
+    margin: 0;
+    padding: 0;
+    pointer-events: none;
+}
+
+.cbi-dropdown > ul > li img {
+    vertical-align: middle;
+    margin-right: .25em;
+}
+
+.cbi-dropdown > ul > li > form > input[type="checkbox"] {
+    margin: 0;
+    height: auto;
+}
+
+.cbi-dropdown > ul > li input[type="text"] {
+    height: 20px;
+}
+
+.cbi-dropdown[open] {
+    position: relative;
+}
+
+.cbi-dropdown[open] > ul.dropdown {
+    display: block;
+    background: #f6f6f5;
+    border: 1px solid #918e8c;
+    box-shadow: 0 0 4px #918e8c;
+    position: absolute;
+    z-index: 1000;
+    max-width: none;
+    min-width: 100%;
+    width: auto;
+}
+
+.cbi-dropdown > ul > li[display],
+.cbi-dropdown[open] > ul.preview,
+.cbi-dropdown[open] > ul.dropdown > li,
+.cbi-dropdown[multiple] > ul > li > label,
+.cbi-dropdown[multiple][open] > ul.dropdown > li,
+.cbi-dropdown[multiple][more] > .more,
+.cbi-dropdown[multiple][empty] > .more {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+}
+
+.cbi-dropdown[empty] > ul > li,
+.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
+.cbi-dropdown[multiple][open] > ul.dropdown > li > form {
+    display: block;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
+.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; }
+
+.cbi-dropdown[open] > ul.dropdown > li {
+    border-bottom: 1px solid #ccc;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li[selected] {
+    background: #b0d0f0;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li.focus {
+    background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
+}
+
+.cbi-dropdown[open] > ul.dropdown > li:last-child {
+    margin-bottom: 0;
+    border-bottom: none;
+}
+
+.cbi-dropdown[disabled] {
+    pointer-events: none;
+    opacity: .6;
+}
+
+.cbi-dropdown .zonebadge {
+    width: 100%;
+}
+
+.cbi-dropdown[open] .zonebadge {
+    width: auto;
+}
+
+
 /* luci */
 
 .hidden {
@@ -839,17 +1003,20 @@ form.inline + form.inline,
 }
 
 /* select */
-.cbi-value-field .cbi-input-select {
+.cbi-value-field .cbi-dropdown {
     min-width: 15rem;
 }
 
+.cbi-value-field .cbi-input-select {
+    width: 15rem;
+}
+
 .ifacebadge {
     display: inline-flex;
     border-bottom: 1px solid #CCCCCC;
     padding: 0.5rem 1rem;
-    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+    background: #fff;
 }
 
 td > .ifacebadge,
@@ -858,12 +1025,17 @@ td > .ifacebadge,
     font-size: 0.9rem;
 }
 
+.ifacebadge > em,
 .ifacebadge > img {
-    float: right;
-    margin: 0 0.3rem;
+    display: inline-block;
+    margin: 0 .2rem;
     align-self: start;
 }
 
+.ifacebadge > img + img {
+    margin: 0 .2rem 0 0;
+}
+
 .network-status-table {
     display: flex;
     flex-wrap: wrap;
@@ -1038,8 +1210,8 @@ td > .ifacebadge,
 }
 
 .zonebadge > .ifacebadge {
-    padding: 0.2rem 1rem;
-    margin: 0.3rem;
+    padding: .2rem .3rem;
+    margin: 0.1rem 0.2rem;
     border: 1px solid #6C6C6C;
 }
 
@@ -1049,6 +1221,12 @@ td > .ifacebadge,
     margin-top: 0.3rem;
 }
 
+.zonebadge > em,
+.zonebadge > strong {
+    margin: 0 0.2rem;
+    display: inline-block;
+}
+
 .cbi-value-field .cbi-input-checkbox,
 .cbi-value-field .cbi-input-radio {
     margin-top: 0.5rem;
@@ -1073,10 +1251,14 @@ td > .ifacebadge,
     margin-top: -0.5rem;
 }
 
-.cbi-section-table-row > .cbi-value-field .cbi-input-select {
+.cbi-section-table-row > .cbi-value-field .cbi-dropdown {
     min-width: 7rem;
 }
 
+.cbi-section-table-row > .cbi-value-field .cbi-input-select {
+    width: 7rem;
+}
+
 .cbi-section-create > .cbi-button-add {
     margin: 0.5rem;
 }
@@ -1607,8 +1789,6 @@ body.lang_pl.node-main-login .cbi-value-title {
         line-height: 1;
         font-family: inherit;
         min-width: inherit;
-        overflow-x: auto;
-        overflow-y: hidden;
         border-radius: 0;
         background-color: #FFF;
         box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
@@ -1627,33 +1807,36 @@ body.lang_pl.node-main-login .cbi-value-title {
 
 @media screen and (min-width: 992px) {
     .cbi-value input[type="password"],
-    .cbi-value input[type="text"] {
-        min-width: 20rem;
+    .cbi-value input[type="text"],
+    .cbi-value-field .cbi-input-select {
+        width: 20rem;
     }
 
-    .cbi-value-field .cbi-input-select {
+    .cbi-value-field .cbi-dropdown {
         min-width: 20rem;
     }
 }
 
 @media screen and (min-width: 1280px) {
     .cbi-value input[type="password"],
-    .cbi-value input[type="text"] {
-        min-width: 22rem;
+    .cbi-value input[type="text"],
+    .cbi-value-field .cbi-input-select {
+        width: 22rem;
     }
 
-    .cbi-value-field .cbi-input-select {
+    .cbi-value-field .cbi-dropdown {
         min-width: 22rem;
     }
 }
 
 @media screen and (min-width: 1600px) {
     .cbi-value input[type="password"],
-    .cbi-value input[type="text"] {
-        min-width: 25rem;
+    .cbi-value input[type="text"],
+    .cbi-value-field .cbi-input-select {
+        width: 25rem;
     }
 
-    .cbi-value-field .cbi-input-select {
+    .cbi-value-field .cbi-dropdown {
         min-width: 25rem;
     }
 }
diff --git a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
index 8b359d475..1d5ac8ab2 100644
--- a/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
+++ b/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
@@ -27,6 +27,7 @@ body {
 * {
 	margin: 0;
 	padding: 0;
+	box-sizing: border-box;
 }
 
 .table { display: table; }
@@ -456,13 +457,20 @@ select:hover {
 	color: #000000;
 }
 
+input[type=text],
+input[type=password] {
+	padding: 1px 3px;
+}
+
 select,
 input[type=text],
 input[type=password] {
+	font-size: inherit;
 	width: 20em;
 }
 
 .td select,
+.td .cbi-dropdown,
 .td input[type=text],
 .td input[type=password] {
 	width: 99%;
@@ -773,6 +781,7 @@ div.cbi-section-create {
 	vertical-align: top;
 }
 
+div.cbi-section-create .btn,
 div.cbi-section-create .cbi-button {
 	margin: 0.25em;
 }
@@ -844,13 +853,6 @@ div.cbi-section-remove {
 	vertical-align: bottom;
 }
 
-div.cbi-error {
-	font-size: 95%;
-	font-weight: bold;
-	color: #ff0000;
-	background-color: #ffffff;
-}
-
 .td.cbi-value-error {
 	border-color: red;
 }
@@ -926,6 +928,169 @@ div.cbi-tab-descr {
 	padding: 0.5em 0.5em 0.5em 2em;
 }
 
+
+.cbi-dropdown {
+	border: 1px inset #000;
+	display: inline-flex;
+	cursor: pointer;
+	background: #eee;
+	position: relative;
+	padding: 0;
+	color: #000;
+	min-width: 20em;
+}
+
+.cbi-dropdown:hover {
+	background: #fff;
+}
+
+.cbi-dropdown:focus {
+	outline: 2px solid #4b6e9b;
+}
+
+.cbi-dropdown > ul {
+	margin: 0 !important;
+	padding: 0;
+	list-style: none;
+	overflow-x: hidden;
+	overflow-y: auto;
+	display: flex;
+	width: 100%;
+}
+
+.cbi-dropdown > ul.preview {
+	display: none;
+}
+
+.cbi-dropdown > .open {
+	border: 2px outset #eee;
+	flex-basis: 15px;
+}
+
+.cbi-dropdown > .open,
+.cbi-dropdown > .more {
+	flex-grow: 0;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	text-align: center;
+	line-height: 2em;
+	padding: 0 .25em;
+}
+
+.cbi-dropdown > .more,
+.cbi-dropdown > ul > li[placeholder] {
+	color: #777;
+	font-weight: bold;
+	text-shadow: 1px 1px 0px #fff;
+	display: none;
+}
+
+.cbi-dropdown > ul > li {
+	display: none;
+	padding: .25em;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	flex-shrink: 1;
+	flex-grow: 1;
+	align-items: center;
+	align-self: center;
+	min-height: 20px;
+}
+
+.cbi-dropdown > ul > li .hide-open { display: initial; }
+.cbi-dropdown > ul > li .hide-close { display: none; }
+
+.cbi-dropdown > ul > li[display]:not([display="0"]) {
+	border-left: 1px solid #ccc;
+}
+
+.cbi-dropdown[empty] > ul {
+	max-width: 1px;
+}
+
+.cbi-dropdown > ul > li > form {
+	display: none;
+	margin: 0;
+	padding: 0;
+	pointer-events: none;
+}
+
+.cbi-dropdown > ul > li img {
+	vertical-align: middle;
+	margin-right: .25em;
+}
+
+.cbi-dropdown > ul > li > form > input[type="checkbox"] {
+	margin: 0;
+}
+
+.cbi-dropdown > ul > li input[type="text"] {
+	height: 20px;
+}
+
+.cbi-dropdown[open] {
+	position: relative;
+}
+
+.cbi-dropdown[open] > ul.dropdown {
+	display: block;
+	background: #f6f6f5;
+	border: 1px solid #918e8c;
+	box-shadow: 0 0 4px #918e8c;
+	position: absolute;
+	z-index: 1000;
+	max-width: none;
+	min-width: 100%;
+	width: auto;
+}
+
+.cbi-dropdown > ul > li[display],
+.cbi-dropdown[open] > ul.preview,
+.cbi-dropdown[open] > ul.dropdown > li,
+.cbi-dropdown[multiple] > ul > li > label,
+.cbi-dropdown[multiple][open] > ul.dropdown > li,
+.cbi-dropdown[multiple][more] > .more,
+.cbi-dropdown[multiple][empty] > .more {
+	flex-grow: 1;
+	display: flex;
+	align-items: center;
+}
+
+.cbi-dropdown[empty] > ul > li,
+.cbi-dropdown[optional][open] > ul.dropdown > li[placeholder],
+.cbi-dropdown[multiple][open] > ul.dropdown > li > form {
+	display: block;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
+.cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; }
+
+.cbi-dropdown[open] > ul.dropdown > li {
+	border-bottom: 1px solid #ccc;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li[selected] {
+	background: #b0d0f0;
+}
+
+.cbi-dropdown[open] > ul.dropdown > li.focus {
+	background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
+}
+
+.cbi-dropdown[open] > ul.dropdown > li:last-child {
+	margin-bottom: 0;
+	border-bottom: none;
+}
+
+.cbi-dropdown[disabled] {
+	pointer-events: none;
+	opacity: .6;
+}
+
+
 .left {
 	text-align: left !important;
 }
@@ -985,9 +1150,16 @@ div.cbi-tab-descr {
 	background: #90c0e0;
 }
 
-.ifacebadge > img {
+.ifacebadge, .zonebadge {
+	align-items: center;
+}
+
+.ifacebadge > img,
+.ifacebadge > em {
 	margin-right: 5px;
 	align-self: start;
+	display: inline-block;
+	height: 16px;
 }
 
 .ifacebadge-active {
@@ -1021,7 +1193,7 @@ div.cbi-tab-descr {
 .network-status-table .ifacebox-body {
 	display: flex;
 	flex-direction: column;
-	height: 100%;
+	flex: 1 0;
 }
 
 .network-status-table .ifacebox-body > span {
@@ -1047,12 +1219,12 @@ div.cbi-tab-descr {
 	display: inline-block;
 	white-space: nowrap;
 	cursor: pointer;
+	border-radius: 3px;
 }
 
-.zonebadge em,
-.zonebadge strong {
+.zonebadge > em,
+.zonebadge > strong {
 	margin: 3px;
-	display: inline-block;
 }
 
 .zonebadge input {
@@ -1060,6 +1232,18 @@ div.cbi-tab-descr {
 	height: 1.5em;
 }
 
+.zonebadge .ifacebadge,
+.cbi-dropdown .ifacebadge {
+	margin: 0 .125em;
+}
+
+.zonebadge .ifacebadge img,
+.zonebadge .ifacebadge em,
+.cbi-dropdown .ifacebadge img,
+.cbi-dropdown .ifacebadge em {
+	margin: 0 1px;
+}
+
 .zonebadge-empty {
 	border: 1px dashed #AAAAAA;
 	color: #AAAAAA;