Added styles for .inputItemList

diff --git a/wcfsetup/install/files/style/bootstrap/mixin/input.scss b/wcfsetup/install/files/style/bootstrap/mixin/input.scss
new file mode 100644 (file)
index 0000000..a4a51fd
--- /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 3c0e707639e5edd28f68fe95789d5a62696bb64f..7f03a7dedb5fbe7372405ef1a571e61cb4f7c0cc 100644 (file)
--- 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 (file)
index 0000000..2902083
--- /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;
+       }
+}