Commit | Line | Data |
---|---|---|
9ae45102 AE |
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 | &.dropdownArrowRight { | |
21 | &::after { | |
22 | left: auto; | |
23 | right: 9px; | |
24 | } | |
25 | ||
26 | &::before { | |
27 | left: auto; | |
28 | right: 10px; | |
29 | } | |
30 | } | |
31 | ||
32 | &.dropdownArrowBottom { | |
33 | &::after { | |
34 | border: 10px transparent solid; | |
35 | border-top-color: $wcfDropdownBorder; | |
36 | border-bottom-width: 0; | |
37 | bottom: -10px; | |
38 | top: auto; | |
39 | } | |
40 | ||
41 | &::before { | |
42 | border: 9px transparent solid; | |
43 | border-top-color: $wcfDropdownBackground; | |
44 | border-bottom-width: 0; | |
45 | bottom: -9px; | |
46 | top: auto; | |
47 | } | |
48 | } | |
49 | ||
50 | &.dropdownOpen { | |
51 | display: block; | |
52 | visibility: visible; | |
53 | } | |
54 | ||
55 | li { | |
56 | display: block; | |
57 | ||
58 | &:hover:not(.dropdownDivider):not(.dropdownList):not(.dropdownText), | |
59 | &.dropdownList > li:hover:not(.dropdownDivider), | |
60 | &.dropdownNavigationItem, | |
61 | &.active { | |
62 | background-color: $wcfDropdownBackgroundActive; | |
63 | color: $wcfDropdownLinkActive; | |
64 | ||
65 | > a { | |
66 | color: $wcfDropdownLinkActive; | |
67 | } | |
68 | } | |
69 | ||
70 | &.dropdownDivider { | |
71 | border-top: 1px solid $wcfDropdownBorderInner; | |
72 | margin: 3px 0; | |
73 | } | |
74 | ||
75 | &.dropdownText { | |
76 | padding: $wcfGapTiny $wcfGapMedium; | |
77 | ||
78 | @include wcfFontSmall; | |
79 | } | |
80 | ||
81 | &.boxFlag { | |
82 | padding-top: 2px; | |
83 | } | |
84 | ||
85 | /* | |
86 | // @TODO | |
87 | &.missingValue > span { | |
88 | position: relative; | |
89 | ||
90 | &:after { | |
91 | color: @wcfWarningBackgroundColor; | |
92 | content: @fa-var-exclamation-triangle; | |
93 | font-family: FontAwesome; | |
94 | position: absolute; | |
95 | right: @wcfGapMedium; | |
96 | top: @wcfGapTiny; | |
97 | } | |
98 | } | |
99 | */ | |
100 | ||
101 | > a, | |
102 | > span { | |
103 | clear: both; | |
104 | cursor: pointer; | |
105 | display: block; | |
106 | max-width: 350px; | |
107 | overflow: hidden; | |
108 | padding: 5px 20px; | |
109 | text-decoration: none; | |
110 | text-overflow: ellipsis; | |
111 | white-space: nowrap; | |
112 | word-wrap: normal; | |
113 | ||
114 | > div > h3 { | |
115 | overflow: hidden; | |
116 | text-overflow: ellipsis; | |
117 | } | |
118 | } | |
119 | ||
120 | > a { | |
121 | color: $wcfDropdownLink; | |
122 | } | |
123 | ||
124 | > a > small { | |
125 | display: block; | |
126 | } | |
127 | ||
128 | > a + span.badge { | |
129 | display: none; | |
130 | } | |
131 | ||
132 | > .box16 { | |
133 | align-items: center; | |
134 | cursor: pointer; | |
135 | min-height: 0; | |
136 | padding: 5px 10px; | |
137 | } | |
138 | ||
139 | > label { | |
140 | display: block; | |
141 | } | |
142 | ||
143 | .containerHeadline { | |
144 | margin-bottom: 0; | |
145 | ||
146 | > p { | |
147 | @include wcfFontSmall; | |
148 | } | |
149 | } | |
150 | ||
151 | .icon { | |
152 | color: inherit; | |
153 | } | |
154 | } | |
155 | ||
156 | .scrollableDropdownMenu { | |
157 | max-height: 300px; | |
158 | overflow: auto; | |
159 | } | |
160 | ||
161 | @include screen-xs { | |
162 | left: 0 !important; | |
163 | right: 0 !important; | |
164 | } | |
165 | ||
166 | @include screen-md-down { | |
167 | li { | |
168 | overflow: hidden; | |
169 | ||
170 | > a, | |
171 | > span { | |
172 | max-width: none; | |
173 | white-space: normal; | |
174 | } | |
175 | } | |
176 | } | |
177 | ||
178 | @include screen-md-up { | |
179 | .dropdownMenu.pageHeaderSearchDropdown { | |
180 | transform: translateY(-10px); | |
181 | } | |
182 | } | |
183 | } |