1 .dropdownMenuContainer > .interactiveDropdown.open {
5 /* styling for interactive dropdowns (currently only used in the user panel) */
7 background-color: $wcfContentBackground;
9 box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
10 color: $wcfContentText;
16 /* prevent dropdown from flickering during calculation */
23 &.interactiveDropdownUserMenu > .interactiveDropdownItemsContainer {
28 @include screen-sm-md {
30 flex-direction: column;
34 // override JS positioning
36 left: auto !important;
40 > .interactiveDropdownHeader,
41 > .interactiveDropdownShowAll {
45 > .interactiveDropdownItemsContainer {
50 -webkit-overflow-scrolling: touch;
60 /* drop down header */
61 .interactiveDropdownHeader {
63 background-color: $wcfSidebarBackground;
64 color: $wcfSidebarHeadlineText;
69 color: $wcfSidebarHeadlineLink;
72 color: $wcfSidebarHeadlineLinkActive;
74 text-decoration: underline;
78 .interactiveDropdownTitle {
81 @include wcfFontHeadline;
84 .interactiveDropdownLinks {
89 @include screen-sm-down {
94 /* container for dropdown items */
95 .interactiveDropdownItemsContainer {
96 border: 1px solid $wcfContentBorderInner;
100 > .interactiveDropdownItems {
105 > .ps-scrollbar-y-rail {
111 /* dropdown item list */
112 .interactiveDropdownItems {
118 border-bottom: 1px solid $wcfContentBorderInner;
122 background-color: $wcfTabularBoxBackgroundActive;
126 color: $wcfContentLink;
129 color: $wcfContentLinkActive;
140 color: $wcfContentDimmedText;
149 @include screen-sm-down {
158 justify-content: center;
165 @include wcfFontHeadline;
169 /* outstanding / unread item */
170 .interactiveDropdownItemOutstanding {
178 background-color: rgb(49, 138, 220);
187 /* mark as read button for an item */
188 .interactiveDropdownItemMarkAsRead {
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 {
203 > .interactiveDropdownItemMarkAsRead {
204 pointer-events: none;
212 > .interactiveDropdownItemShadowLink {
222 /* show all button shown in dropdown menu bottom */
223 .interactiveDropdownShowAll {
224 background-color: $wcfSidebarBackground;
225 color: $wcfSidebarHeadlineText;
231 color: $wcfSidebarHeadlineText;
232 text-decoration: underline;
236 @include screen-md-up {
237 .interactiveDropdown {
241 .interactiveDropdownItemsContainer {
247 .interactiveDropdownItems:not(.interactiveDropdownItemsUserMenu) > li {
252 @include screen-sm-down {
253 .interactiveDropdown {
256 flex-direction: column;
262 .interactiveDropdownHeader {
266 .interactiveDropdownItemsContainer {
270 -webkit-overflow-scrolling: touch;
272 /* increase the clickable area of the mark as read icon */
273 .interactiveDropdownItemOutstanding {
277 .interactiveDropdownItemMarkAsRead {
282 width: 36px; /* 16px icon + 2x 10px padding */
293 transform: translateY(-50%);
299 .interactiveDropdownShowAll {