wcfsetup/install/files/style/ui/itemListInput.scss

   1 .inputItemList {
   2         @include input;
   3
   4         display: flex;
   5         flex-wrap: wrap;
   6         padding-bottom: 0;
   7         padding-top: 5px;
   8
   9         > .item,
  10         > .input {
  11                 flex: 0 0 auto;
  12                 margin-bottom: 5px;
  13
  14                 &:not(:last-child) {
  15                         margin-right: 5px;
  16                 }
  17         }
  18
  19         > .item {
  20                 background-color: $wcfButtonBackground;
  21                 border-radius: 2px;
  22                 color: $wcfButtonText;
  23                 cursor: default;
  24                 max-width: 100%;
  25                 padding: 1px 5px;
  26
  27                 .icon {
  28                         color: inherit;
  29                 }
  30
  31                 &.active {
  32                         background-color: $wcfButtonBackgroundActive;
  33                         color: $wcfButtonTextActive;
  34                 }
  35         }
  36
  37         &:not(.disabled) {
  38                 > item:hover {
  39                         background-color: $wcfButtonBackgroundActive;
  40                         color: $wcfButtonTextActive;
  41                 }
  42         }
  43
  44         > .input > input {
  45                 background-color: transparent !important;
  46                 border-width: 0 !important;
  47                 min-width: 165px;
  48                 padding: 0 !important;
  49         }
  50 }
  51
  52 .inputItemListLimitReached {
  53         color: $wcfContentDimmedText;
  54         vertical-align: middle;
  55
  56         /* The input field does not have a distinct appearance, making the text unselectable
  57            will prevent the browser from displaying a potentially misleading caret cursor. */
  58         -webkit-user-select: none;
  59         -ms-user-select: none;
  60         user-select: none;
  61 }