Generic styling for inline lists without list elements

diff --git a/wcfsetup/install/files/style/layout/layout.scss b/wcfsetup/install/files/style/layout/layout.scss
index cd99969393e8b9c4d6361efe164e3bfb330c22ae..bcae24a4f308417432c141b20a1aab2e999ee8d9 100644 (file)
--- a/wcfsetup/install/files/style/layout/layout.scss
+++ b/wcfsetup/install/files/style/layout/layout.scss
@@ -164,3 +164,30 @@ html.iOS select {
                }
        }
 }
+
+.inlineItems {
+       display: flex;
+       flex-wrap: wrap;
+
+       .inlineItem {
+               flex: 0 1 auto;
+
+               &:not(:last-child) {
+                       margin-right: 5px;
+               }
+       }
+
+       &.commaSeparated {
+               .inlineItem:not(:last-child)::after {
+                       content: ",";
+                       padding-left: 1px;
+               }
+       }
+
+       &.dotSeparated {
+               .inlineItem:not(:last-child)::after {
+                       content: "\00b7";
+                       margin-left: 5px;
+               }
+       }
+}