From d40daae6bcd99d47c08f9586ad1d955c95325fde Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 19 Mar 2016 11:41:01 +0100
Subject: [PATCH] Added styles for .inputItemList

---
 .../files/style/bootstrap/mixin/input.scss    | 26 +++++++++++
 wcfsetup/install/files/style/layout/form.scss | 25 +----------
 .../install/files/style/ui/itemListInput.scss | 44 +++++++++++++++++++
 3 files changed, 71 insertions(+), 24 deletions(-)
 create mode 100644 wcfsetup/install/files/style/bootstrap/mixin/input.scss
 create mode 100644 wcfsetup/install/files/style/ui/itemListInput.scss

diff --git a/wcfsetup/install/files/style/bootstrap/mixin/input.scss b/wcfsetup/install/files/style/bootstrap/mixin/input.scss
new file mode 100644
index 0000000000..a4a51fda3b
--- /dev/null
+++ b/wcfsetup/install/files/style/bootstrap/mixin/input.scss
@@ -0,0 +1,26 @@
+@mixin input {
+	background-color: $wcfInputBackground;
+	border: 1px solid $wcfInputBorder;
+	color: $wcfInputText;
+	outline: none;
+	padding: 4px 8px;
+	
+	// input elements do not inherit font family, size and line-height from body
+	font-family: $wcfFontFamily;
+	@include wcfFontDefault;
+	@include wcfLineHeight;
+	
+	&:focus,
+	&:hover {
+		background-color: $wcfInputBackgroundActive;
+		border-color: $wcfInputBorderActive;
+		color: $wcfInputTextActive;
+	}
+	
+	&[disabled],
+	&[readonly] {
+		background-color: $wcfInputDisabledBackground !important;
+		border-color: $wcfInputDisabledBorder !important;
+		color: $wcfInputDisabledText !important;
+	}
+}
diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss
index 3c0e707639..7f03a7dedb 100644
--- a/wcfsetup/install/files/style/layout/form.scss
+++ b/wcfsetup/install/files/style/layout/form.scss
@@ -8,30 +8,7 @@ input[type="text"],
 input[type="url"],
 select,
 textarea {
-	background-color: $wcfInputBackground;
-	border: 1px solid $wcfInputBorder;
-	color: $wcfInputText;
-	outline: none;
-	padding: 4px 8px;
-	
-	// input elements do not inherit font family, size and line-height from body
-	font-family: $wcfFontFamily;
-	@include wcfFontDefault;
-	@include wcfLineHeight;
-	
-	&:focus,
-	&:hover {
-		background-color: $wcfInputBackgroundActive;
-		border-color: $wcfInputBorderActive;
-		color: $wcfInputTextActive;
-	}
-	
-	&[disabled],
-	&[readonly] {
-		background-color: $wcfInputDisabledBackground !important;
-		border-color: $wcfInputDisabledBorder !important;
-		color: $wcfInputDisabledText !important;
-	}
+	@include input;
 }
 
 /* set placeholder color */
diff --git a/wcfsetup/install/files/style/ui/itemListInput.scss b/wcfsetup/install/files/style/ui/itemListInput.scss
new file mode 100644
index 0000000000..290208340b
--- /dev/null
+++ b/wcfsetup/install/files/style/ui/itemListInput.scss
@@ -0,0 +1,44 @@
+.inputItemList {
+	@include input;
+	
+	display: flex;
+	flex-wrap: wrap;
+	padding-bottom: 0;
+	padding-top: 5px;
+	
+	> .item,
+	> .input {
+		flex: 0 0 auto;
+		margin-bottom: 5px;
+		
+		&:not(:last-child) {
+			margin-right: 5px;
+		}
+	}
+	
+	> .item {
+		background-color: $wcfButtonBackground;
+		border: 1px solid $wcfButtonBorder;
+		color: $wcfButtonText;
+		cursor: default;
+		padding: 0 5px;
+		
+		.icon {
+			color: inherit;
+		}
+		
+		&.active,
+		&:hover {
+			background-color: $wcfButtonBackgroundActive;
+			border-color: $wcfButtonBorderActive;
+			color: $wcfButtonTextActive;
+		}
+		
+	}
+	
+	> .input > input {
+		background-color: transparent !important;
+		border-width: 0 !important;
+		padding: 0 !important;
+	}
+}
-- 
2.20.1