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

   1 @mixin dropdownMenu {
   2         background-color: $wcfDropdownBackground;
   3         border-radius: 2px;
   4         box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
   5         color: $wcfDropdownText;
   6         display: none;
   7         min-width: 160px;
   8         padding: 3px 0;
   9         pointer-events: all;
  10         position: absolute;
  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                 &.dropdownList > li:hover:not(.dropdownDivider),
  30                 &.dropdownNavigationItem,
  31                 &.active {
  32                         background-color: $wcfDropdownBackgroundActive;
  33                         color: $wcfDropdownLinkActive;
  34
  35                         > a {
  36                                 color: $wcfDropdownLinkActive;
  37                         }
  38                 }
  39
  40                 &.dropdownDivider {
  41                         border-top: 1px solid $wcfDropdownBorderInner;
  42                         margin: 3px 0;
  43                 }
  44
  45                 &.dropdownText {
  46                         padding: 5px 20px;
  47
  48                         @include wcfFontSmall;
  49                 }
  50
  51                 &.boxFlag {
  52                         padding-top: 2px;
  53                 }
  54
  55                 &.missingValue > span {
  56                         padding-right: 40px;
  57                         position: relative;
  58
  59                         &:after {
  60                                 color: $wcfStatusErrorText;
  61                                 content: $fa-var-exclamation-triangle;
  62                                 font-family: FontAwesome;
  63                                 position: absolute;
  64                                 right: 20px;
  65                                 top: 5px;
  66                         }
  67                 }
  68
  69                 &.disabled {
  70                         color: $wcfContentDimmedText;
  71
  72                         > span {
  73                                 cursor: not-allowed !important;
  74                         }
  75                 }
  76
  77                 > a,
  78                 > span {
  79                         clear: both;
  80                         cursor: pointer;
  81                         display: block;
  82                         max-width: 350px;
  83                         overflow: hidden;
  84                         padding: 5px 20px;
  85                         text-decoration: none;
  86                         text-overflow: ellipsis;
  87                         white-space: nowrap;
  88                         word-wrap: normal;
  89
  90                         > div > h3 {
  91                                 overflow: hidden;
  92                                 text-overflow: ellipsis;
  93                         }
  94                 }
  95
  96                 > a {
  97                         color: $wcfDropdownLink;
  98                 }
  99
 100                 > a > small {
 101                         display: block;
 102                 }
 103
 104                 > a + span.badge {
 105                         display: none;
 106                 }
 107
 108                 > .box16 {
 109                         align-items: center;
 110                         cursor: pointer;
 111                         min-height: 0;
 112                         padding: 5px 10px;
 113                 }
 114
 115                 > label {
 116                         display: block;
 117                 }
 118
 119                 .containerHeadline {
 120                         margin-bottom: 0;
 121
 122                         > p {
 123                                 @include wcfFontSmall;
 124                         }
 125                 }
 126
 127                 .icon {
 128                         color: inherit;
 129                 }
 130         }
 131
 132         .scrollableDropdownMenu {
 133                 max-height: 300px;
 134                 overflow: auto;
 135
 136                 &.forceScrollbar {
 137                         overflow-y: scroll;
 138                         overflow-x: hidden;
 139                 }
 140         }
 141
 142         @include screen-xs {
 143                 left: 0 !important;
 144                 right: 0 !important;
 145         }
 146
 147         @include screen-md-down {
 148                 li {
 149                         overflow: hidden;
 150
 151                         > a,
 152                         > span {
 153                                 max-width: none;
 154                                 white-space: normal;
 155                         }
 156                 }
 157         }
 158
 159         @include screen-md-up {
 160                 .dropdownMenu.pageHeaderSearchDropdown {
 161                         transform: translateY(-10px);
 162                 }
 163         }
 164 }