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         a {
 208                 pointer-events: all;
 209         }
 210 }
 211
 212 /* Adds a link spanning the entire item while being placed behind all other links appearing
 213    within the regular text using a lower z-index. Allows for regular links to be accessible,
 214    but causes the item to act as a link. */
 215 .interactiveDropdownItemShadow {
 216         > .box48 {
 217                 position: relative;
 218         }
 219
 220         > .box48,
 221         > .interactiveDropdownItemMarkAsRead {
 222                 pointer-events: none;
 223                 z-index: 20;
 224         }
 225
 226         > .interactiveDropdownItemShadowLink {
 227                 bottom: 0;
 228                 left: 0;
 229                 position: absolute;
 230                 right: 0;
 231                 top: 0;
 232                 z-index: 10;
 233         }
 234 }
 235
 236 /* show all button shown in dropdown menu bottom */
 237 .interactiveDropdownShowAll {
 238         background-color: $wcfSidebarBackground;
 239         color: $wcfSidebarHeadlineText;
 240         display: block;
 241         padding: 10px;
 242         text-align: center;
 243
 244         &:hover {
 245                 color: $wcfSidebarHeadlineText;
 246                 text-decoration: underline;
 247         }
 248 }
 249
 250 @include screen-md-up {
 251         .interactiveDropdown {
 252                 min-width: 350px;
 253         }
 254
 255         .interactiveDropdownItemsContainer {
 256                 max-height: 400px;
 257                 overflow: hidden;
 258                 position: relative;
 259         }
 260
 261         .interactiveDropdownItems:not(.interactiveDropdownItemsUserMenu) > li {
 262                 max-width: 400px;
 263         }
 264 }
 265
 266 @include screen-sm-down {
 267         .interactiveDropdown {
 268                 bottom: 0;
 269                 display: flex;
 270                 flex-direction: column;
 271                 left: 0;
 272                 position: fixed;
 273                 right: 0;
 274         }
 275
 276         .interactiveDropdownHeader {
 277                 flex: 0 0 auto;
 278         }
 279
 280         .interactiveDropdownItemsContainer {
 281                 flex: 1 1 auto;
 282                 overflow: auto;
 283
 284                 -webkit-overflow-scrolling: touch;
 285
 286                 /* increase the clickable area of the mark as read icon */
 287                 .interactiveDropdownItemOutstanding {
 288                         padding-right: 41px;
 289                 }
 290
 291                 .interactiveDropdownItemMarkAsRead {
 292                         bottom: 0;
 293                         position: absolute;
 294                         right: 0;
 295                         top: 0;
 296                         width: 36px; /* 16px icon + 2x 10px padding */
 297
 298                         > a {
 299                                 display: block;
 300                                 height: 100%;
 301                                 text-align: center;
 302
 303                                 > .icon {
 304                                         position: relative;
 305                                         top: 50%;
 306
 307                                         transform: translateY(-50%);
 308                                 }
 309                         }
 310                 }
 311         }
 312
 313         .interactiveDropdownShowAll {
 314                 flex: 0 0 auto;
 315         }
 316 }