wcfsetup/install/files/style/ui/dropdown.less

   1 .dropdown {
   2         .dropdownToggle:active,
   3         &.dropdownOpen .dropdownToggle {
   4                 outline: 0;
   5         }
   6
   7         &.inputAddon {
   8                 > .dropdownToggle {
   9                         padding: @wcfGapTiny;
  10
  11                         > span.active:after {
  12                                 content: "\f0d7";
  13                                 font-family: FontAwesome;
  14                                 font-size: 14px;
  15                                 margin-left: 7px;
  16                         }
  17                 }
  18         }
  19
  20         &.preInput {
  21                 display: table;
  22                 width: 100%;
  23
  24                 input {
  25                         border-radius: 0 @wcfInputBorderRadius @wcfInputBorderRadius 0;
  26                         display: table-cell;
  27                         margin: 0;
  28                         width: 99%;
  29                 }
  30
  31                 textarea {
  32                         border-radius: 0 @wcfInputBorderRadius @wcfInputBorderRadius;
  33                         display: block;
  34                         margin-top: 0;
  35                 }
  36
  37                 .dropdownCaption {
  38                         cursor: pointer;
  39                         display: table-cell;
  40                         letter-spacing: -1px;
  41                         padding: 0 @wcfGapSmall 0 @wcfGapTiny;
  42                         vertical-align: middle;
  43                         width: 1%;
  44
  45                         &.button {
  46                                 border-right-width: 0;
  47                                 border-radius: @wcfInputBorderRadius 0 0 @wcfInputBorderRadius;
  48                         }
  49
  50                         span {
  51                                 margin-right: -1px;
  52                                 padding-left: @wcfGapTiny;
  53                                 white-space: nowrap;
  54                                 word-wrap: normal;
  55
  56                                 &.active::after {
  57                                         content: "\f0d7";
  58                                         font-family: FontAwesome;
  59                                         font-size: 14px;
  60                                         margin-left: 7px;
  61                                 }
  62                         }
  63                 }
  64
  65                 .dropdownCaptionTextarea {
  66                         cursor: pointer;
  67                         margin: 0 0 -1px 0;
  68                         padding-left: @wcfGapSmall;
  69                         padding-right: @wcfGapSmall;
  70
  71                         &.button {
  72                                 border-radius: @wcfInputBorderRadius @wcfInputBorderRadius 0 0;
  73                         }
  74
  75                         &~ .dropdownMenu {
  76                                 top: 10%;
  77                         }
  78
  79                         span {
  80                                 white-space: nowrap;
  81                                 word-wrap: normal;
  82
  83                                 &.active::after {
  84                                         content: "\f0d7";
  85                                         font-family: FontAwesome;
  86                                         font-size: 14px;
  87                                         margin-left: 7px;
  88                                 }
  89                         }
  90                 }
  91         }
  92
  93         &.dropdownOpen {
  94                 .dropdownToggle {
  95                         //color: @wcfPageLinkHoverColor;
  96                 }
  97
  98                 .dropdownMenu {
  99                         display: block;
 100                 }
 101         }
 102
 103         .dropdownToggle {
 104                 cursor: pointer;
 105         }
 106 }
 107
 108 .dropdownMenu {
 109         background-color: @wcfDropdownBackgroundColor;
 110         border: 1px solid @wcfDropdownBorderColor;
 111         color: @wcfDropdownColor;
 112         display: none;
 113         float: left;
 114         min-width: 160px;
 115         padding: 4px 0;
 116         position: absolute;
 117         text-align: left;
 118         z-index: 450;
 119
 120         .boxShadow(2px, 2px, rgba(0, 0, 0, .2), 10px);
 121
 122         &::after {
 123                 border: 7px solid transparent;
 124                 border-bottom-color: @wcfDropdownBorderColor;
 125                 border-top-width: 0;
 126                 content: "";
 127                 display: inline-block;
 128                 left: 9px;
 129                 position: absolute;
 130                 top: -7px;
 131                 z-index: 100;
 132         }
 133
 134         &::before {
 135                 border: 6px solid transparent;
 136                 border-bottom-color: @wcfDropdownBackgroundColor;
 137                 border-top-width: 0;
 138                 content: "";
 139                 display: inline-block;
 140                 left: 10px;
 141                 position: absolute;
 142                 top: -6px;
 143                 z-index: 101;
 144         }
 145
 146         &.dropdownArrowRight {
 147                 &::after {
 148                         left: auto;
 149                         right: 9px;
 150                 }
 151
 152                 &::before {
 153                         left: auto;
 154                         right: 10px;
 155                 }
 156         }
 157
 158         &.dropdownArrowBottom {
 159                 &::after {
 160                         border: 7px transparent solid;
 161                         border-top-color: @wcfDropdownBorderColor;
 162                         border-bottom-width: 0;
 163                         bottom: -7px;
 164                         top: auto;
 165                 }
 166
 167                 &::before {
 168                         border: 6px transparent solid;
 169                         border-top-color: @wcfDropdownBackgroundColor;
 170                         border-bottom-width: 0;
 171                         bottom: -6px;
 172                         top: auto;
 173                 }
 174         }
 175
 176         &.dropdownOpen {
 177                 display: block;
 178         }
 179
 180         li {
 181                 display: block;
 182
 183                 &:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText),
 184                 &.dropdownList > li:hover:not(.dropdownDivider),
 185                 &.dropdownNavigationItem,
 186                 &.active {
 187                         background-color: @wcfDropdownHoverBackgroundColor;
 188                 }
 189
 190                 &.dropdownDivider {
 191                         border-top: 1px dotted @wcfDropdownBorderColor;
 192                         margin: @wcfGapTiny;
 193                 }
 194
 195                 &.dropdownText {
 196                         font-size: @wcfSmallFontSize;
 197                         padding: @wcfGapTiny @wcfGapMedium;
 198                 }
 199
 200                 &.boxFlag {
 201                         padding-top: 2px;
 202                 }
 203
 204                 &.missingValue > span {
 205                         position: relative;
 206
 207                         &:after {
 208                                 color: @wcfWarningBackgroundColor;
 209                                 content: @fa-var-exclamation-triangle;
 210                                 font-family: FontAwesome;
 211                                 position: absolute;
 212                                 right: @wcfGapMedium;
 213                                 top: @wcfGapTiny;
 214                         }
 215                 }
 216
 217                 > a,
 218                 > span {
 219                         clear: both;
 220                         color: @wcfDropdownColor;
 221                         cursor: pointer;
 222                         display: block;
 223                         max-width: 350px;
 224                         overflow: hidden;
 225                         padding: @wcfGapTiny @wcfGapMedium;
 226                         text-decoration: none;
 227                         text-overflow: ellipsis;
 228                         white-space: nowrap;
 229                         word-wrap: normal;
 230
 231                         .textShadow(@wcfDropdownBackgroundColor);
 232
 233                         &:hover {
 234                                 color: @wcfDropdownColor;
 235
 236                                 .textShadow(@wcfDropdownHoverBackgroundColor);
 237                         }
 238
 239                         > div > h3 {
 240                                 overflow: hidden;
 241                                 text-overflow: ellipsis;
 242                         }
 243                 }
 244
 245                 > a > small {
 246                         display: block;
 247                 }
 248
 249                 > a + span.badge {
 250                         display: none;
 251                 }
 252
 253                 > .box16 {
 254                         cursor: pointer;
 255                         min-height: 0;
 256                         padding: @wcfGapTiny @wcfGapTiny @wcfGapTiny @wcfGapSmall;
 257
 258                         > div {
 259                                 margin-left: 21px;
 260                         }
 261                 }
 262
 263                 > label {
 264                         display: block;
 265                 }
 266
 267                 .containerHeadline {
 268                         margin-bottom: 0;
 269
 270                         > p {
 271                                 font-size: @wcfSmallFontSize;
 272                         }
 273                 }
 274         }
 275
 276         .scrollableDropdownMenu {
 277                 max-height: 300px;
 278                 overflow: auto;
 279         }
 280 }
 281
 282 .boxFlag > .box24, .boxFlag.box24 {
 283         min-height: 20px;
 284 }
 285
 286 @media only screen and (max-width: 800px) {
 287         .dropdownMenu {
 288                 left: 0 !important;
 289                 right: 0 !important;
 290
 291                 li {
 292                         overflow: hidden;
 293
 294                         > a,
 295                         > span {
 296                                 max-width: none;
 297                                 white-space: normal;
 298                         }
 299                 }
 300         }
 301 }