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