From: Alexander Ebert Date: Sat, 19 Mar 2016 10:41:01 +0000 (+0100) Subject: Added styles for .inputItemList X-Git-Tag: 3.0.0_Beta_1~2012 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=d40daae6bcd99d47c08f9586ad1d955c95325fde;p=GitHub%2FWoltLab%2FWCF.git 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 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; + } +}