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