wcfsetup/install/files/style/bootstrap/mixin/dropdownMenu.scss

   1 @mixin dropdownMenu {
   2         background-color: var(--wcfDropdownBackground);
   3         border-radius: 4px;
   4         box-shadow: var(--wcfBoxShadow);
   5         color: var(--wcfDropdownText);
   6         display: none;
   7         min-width: 160px;
   8         padding: 4px 0;
   9         pointer-events: all;
  10         position: fixed;
  11         text-align: left;
  12         visibility: hidden;
  13         z-index: 450;
  14
  15         &.dropdownMenuPageSearch {
  16                 border-top-left-radius: 0;
  17                 border-top-right-radius: 0;
  18         }
  19
  20         &.dropdownOpen {
  21                 display: block;
  22                 visibility: visible;
  23         }
  24
  25         li {
  26                 display: block;
  27
  28                 &:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText),
  29                 &:focus-within,
  30                 &.dropdownList > li:hover:not(.dropdownDivider),
  31                 &.dropdownNavigationItem,
  32                 &.active {
  33                         background-color: var(--wcfDropdownBackgroundActive);
  34                         color: var(--wcfDropdownLinkActive);
  35
  36                         > :is(a, button) {
  37                                 color: var(--wcfDropdownLinkActive);
  38                         }
  39                 }
  40
  41                 &.dropdownDivider {
  42                         border-top: 1px solid var(--wcfDropdownBorderInner);
  43                         margin: 4px 0;
  44                 }
  45
  46                 &.dropdownText {
  47                         padding: 6px 12px;
  48
  49                         @include wcfFontSmall;
  50                 }
  51
  52                 &.boxFlag {
  53                         padding-top: 2px;
  54                 }
  55
  56                 &.missingValue > span {
  57                         padding-right: 40px;
  58                         position: relative;
  59                 }
  60
  61                 &.disabled {
  62                         color: var(--wcfContentDimmedText);
  63
  64                         > span {
  65                                 cursor: not-allowed !important;
  66                         }
  67                 }
  68
  69                 > :is(a, button, span) {
  70                         clear: both;
  71                         cursor: pointer;
  72                         display: block;
  73                         max-width: 350px;
  74                         overflow: hidden;
  75                         padding: 6px 12px;
  76                         text-decoration: none;
  77                         text-overflow: ellipsis;
  78                         user-select: none;
  79                         white-space: nowrap;
  80                         word-wrap: normal;
  81
  82                         > div > h3 {
  83                                 overflow: hidden;
  84                                 text-overflow: ellipsis;
  85                         }
  86                 }
  87
  88                 > button {
  89                         width: 100%;
  90                 }
  91
  92                 > :is(a, button) {
  93                         color: var(--wcfDropdownLink);
  94                 }
  95
  96                 > a > small {
  97                         display: block;
  98                 }
  99
 100                 > :is(a, button) + span.badge {
 101                         display: none;
 102                 }
 103
 104                 > .box16 {
 105                         align-items: center;
 106                         cursor: pointer;
 107                         min-height: 0;
 108                         padding: 5px 10px;
 109                 }
 110
 111                 > label {
 112                         display: block;
 113                 }
 114
 115                 .containerHeadline {
 116                         margin-bottom: 0;
 117
 118                         > p {
 119                                 @include wcfFontSmall;
 120                         }
 121                 }
 122
 123                 .icon {
 124                         color: inherit;
 125                 }
 126         }
 127
 128         .scrollableDropdownMenu {
 129                 max-height: 300px;
 130                 overflow: auto;
 131
 132                 &.forceScrollbar {
 133                         overflow-y: scroll;
 134                         overflow-x: hidden;
 135                 }
 136         }
 137
 138         @include screen-md-up {
 139                 .dropdownMenu.pageHeaderSearchDropdown {
 140                         transform: translateY(-10px);
 141                 }
 142         }
 143 }