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

   1 .dropdownMenuContainer > .interactiveDropdown.open {
   2         visibility: visible;
   3 }
   4
   5 /* styling for interactive dropdowns (currently only used in the user panel) */
   6 .interactiveDropdown {
   7         background-color: $wcfContentBackground;
   8         border-radius: 2px;
   9         box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  10         color: $wcfContentText;
  11         pointer-events: all;
  12         position: absolute;
  13         visibility: hidden;
  14         z-index: 450;
  15
  16         /* prevent dropdown from flickering during calculation */
  17         left: -200%;
  18
  19         > .elementPointer {
  20                 display: none;
  21         }
  22
  23         &.interactiveDropdownUserMenu {
  24                 > .interactiveDropdownItemsContainer {
  25                         overflow: visible;
  26                         max-height: none;
  27
  28                         a {
  29                                 color: $wcfContentLink;
  30
  31                                 &:hover {
  32                                         color: $wcfContentLinkActive;
  33                                 }
  34                         }
  35                 }
  36         }
  37
  38         @include screen-sm-md {
  39                 display: flex;
  40                 flex-direction: column;
  41                 position: fixed;
  42                 width: 350px;
  43
  44                 // override JS positioning
  45                 bottom: 0 !important;
  46                 left: auto !important;
  47                 top: 0 !important;
  48                 right: 0 !important;
  49
  50                 > .interactiveDropdownHeader,
  51                 > .interactiveDropdownShowAll {
  52                         flex: 0 0 auto;
  53                 }
  54
  55                 > .interactiveDropdownItemsContainer {
  56                         flex: 1 1 auto;
  57                         max-height: none;
  58                         overflow: auto;
  59
  60                         -webkit-overflow-scrolling: touch;
  61                 }
  62         }
  63
  64         @include screen-lg {
  65                 position: fixed;
  66                 top: 50px !important;
  67         }
  68 }
  69
  70 /* drop down header */
  71 .interactiveDropdownHeader {
  72         align-items: center;
  73         background-color: $wcfSidebarBackground;
  74         color: $wcfSidebarHeadlineText;
  75         display: flex;
  76         padding: 10px;
  77
  78         a {
  79                 color: $wcfSidebarHeadlineLink;
  80
  81                 &:hover {
  82                         color: $wcfSidebarHeadlineLinkActive;
  83
  84                         text-decoration: underline;
  85                 }
  86         }
  87
  88         .interactiveDropdownTitle {
  89                 flex: 1 1 auto;
  90
  91                 @include wcfFontHeadline;
  92         }
  93
  94         .interactiveDropdownLinks {
  95                 flex: 0 0 auto;
  96                 margin-left: 5px;
  97         }
  98
  99         @include screen-sm-down {
 100                 padding: 10px;
 101         }
 102 }
 103
 104 /* container for dropdown items */
 105 .interactiveDropdownItemsContainer {
 106         border: 1px solid $wcfContentBorderInner;
 107         border-width: 1px 0;
 108
 109         &.ps-container {
 110                 > .interactiveDropdownItems {
 111                         position: relative;
 112                         z-index: 100;
 113                 }
 114
 115                 > .ps-scrollbar-y-rail {
 116                         z-index: 200;
 117                 }
 118         }
 119 }
 120
 121 /* dropdown item list */
 122 .interactiveDropdownItems {
 123         > li {
 124                 padding: 10px;
 125                 position: relative;
 126
 127                 &:not(:last-child) {
 128                         border-bottom: 1px solid $wcfContentBorderInner;
 129                 }
 130
 131                 &:hover {
 132                         background-color: $wcfTabularBoxBackgroundActive;
 133                 }
 134
 135                 a {
 136                         color: inherit;
 137
 138                         &:hover {
 139                                 color: inherit;
 140                         }
 141                 }
 142
 143                 h3 a {
 144                         font-weight: 600;
 145                 }
 146
 147                 .box48 {
 148                         align-items: center;
 149                         overflow: hidden;
 150                 }
 151
 152                 small {
 153                         align-items: center;
 154                         color: $wcfContentDimmedText;
 155                         display: flex;
 156                         margin-top: 3px;
 157
 158                         .separatorLeft {
 159                                 margin-left: 0.25em;
 160                         }
 161                 }
 162
 163                 @include screen-sm-down {
 164                         padding: 10px;
 165                 }
 166         }
 167
 168         .loading,
 169         .noItems {
 170                 align-items: center;
 171                 display: flex;
 172                 justify-content: center;
 173                 padding: 20px 10px;
 174
 175                 > .fa-spinner {
 176                         margin-right: 5px;
 177                 }
 178
 179                 @include wcfFontHeadline;
 180         }
 181 }
 182
 183 /* outstanding / unread item */
 184 .interactiveDropdownItemOutstanding {
 185         display: flex;
 186
 187         > .box48 {
 188                 flex: 1 1 auto;
 189         }
 190
 191         small::after {
 192                 background-color: rgb(49, 138, 220);
 193                 border-radius: 50%;
 194                 content: "";
 195                 height: 8px;
 196                 margin-left: 5px;
 197                 width: 8px;
 198         }
 199 }
 200
 201 /* mark as read button for an item */
 202 .interactiveDropdownItemMarkAsRead {
 203         align-self: center;
 204         flex: 0 0 auto;
 205         margin-left: 5px;
 206 }
 207
 208 /* Adds a link spanning the entire item while being placed behind all other links appearing
 209    within the regular text using a lower z-index. Allows for regular links to be accessible,
 210    but causes the item to act as a link. */
 211 .interactiveDropdownItemShadow {
 212         > .box48 {
 213                 position: relative;
 214         }
 215
 216         > .box48,
 217         > .interactiveDropdownItemMarkAsRead {
 218                 pointer-events: none;
 219                 z-index: 20;
 220         }
 221
 222         > .interactiveDropdownItemShadowLink {
 223                 bottom: 0;
 224                 left: 0;
 225                 position: absolute;
 226                 right: 0;
 227                 top: 0;
 228                 z-index: 10;
 229         }
 230 }
 231
 232 /* show all button shown in dropdown menu bottom */
 233 .interactiveDropdownShowAll {
 234         background-color: $wcfSidebarBackground;
 235         color: $wcfSidebarHeadlineText;
 236         display: block;
 237         padding: 10px;
 238         text-align: center;
 239
 240         &:hover {
 241                 color: $wcfSidebarHeadlineText;
 242                 text-decoration: underline;
 243         }
 244 }
 245
 246 @include screen-md-up {
 247         .interactiveDropdown {
 248                 min-width: 350px;
 249         }
 250
 251         .interactiveDropdownItemsContainer {
 252                 max-height: 400px;
 253                 overflow: hidden;
 254                 position: relative;
 255         }
 256
 257         .interactiveDropdownItems:not(.interactiveDropdownItemsUserMenu) > li {
 258                 max-width: 400px;
 259         }
 260 }
 261
 262 @include screen-sm-down {
 263         .interactiveDropdown {
 264                 bottom: 0;
 265                 display: flex;
 266                 flex-direction: column;
 267                 left: 0;
 268                 position: fixed;
 269                 right: 0;
 270         }
 271
 272         .interactiveDropdownHeader {
 273                 flex: 0 0 auto;
 274         }
 275
 276         .interactiveDropdownItemsContainer {
 277                 flex: 1 1 auto;
 278                 overflow: auto;
 279
 280                 -webkit-overflow-scrolling: touch;
 281
 282                 /* increase the clickable area of the mark as read icon */
 283                 .interactiveDropdownItemOutstanding {
 284                         padding-right: 41px;
 285                 }
 286
 287                 .interactiveDropdownItemMarkAsRead {
 288                         bottom: 0;
 289                         position: absolute;
 290                         right: 0;
 291                         top: 0;
 292                         width: 36px; /* 16px icon + 2x 10px padding */
 293
 294                         > a {
 295                                 display: block;
 296                                 height: 100%;
 297                                 text-align: center;
 298
 299                                 > .icon {
 300                                         position: relative;
 301                                         top: 50%;
 302
 303                                         transform: translateY(-50%);
 304                                 }
 305                         }
 306                 }
 307         }
 308
 309         .interactiveDropdownShowAll {
 310                 flex: 0 0 auto;
 311         }
 312 }