Commit | Line | Data |
---|---|---|
bf04738c JR |
1 | .reactionPopover { |
2 | animation: wcfPopoverOut .3s; | |
3 | animation-fill-mode: forwards; | |
4 | background-color: $wcfContentBackground; | |
5 | border-radius: 2px; | |
6 | box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); | |
7 | position: absolute; | |
8 | top: 0; | |
9 | vertical-align: middle; | |
10 | visibility: hidden; | |
11 | z-index: 500; | |
12 | ||
13 | &.active { | |
14 | animation: wcfPopover .3s; | |
15 | animation-fill-mode: forwards; | |
16 | } | |
17 | ||
18 | &.forceHide { | |
19 | animation: 0; | |
20 | visibility: hidden; | |
21 | } | |
22 | ||
23 | > .elementPointer { | |
24 | display: none; | |
25 | } | |
26 | } | |
27 | ||
4cb8dcd3 AE |
28 | .reactionType { |
29 | width: 20px; | |
30 | height: 20px; | |
f7ab933b JR |
31 | } |
32 | ||
33 | .reactionSummaryList { | |
4cb8dcd3 AE |
34 | display: flex; |
35 | flex-wrap: wrap; | |
36 | margin: -5px -5px 0 0; | |
37 | ||
38 | .reactionCount{ | |
39 | @include wcfFontSmall; | |
40 | ||
41 | &::before { | |
42 | content: ' × '; | |
43 | } | |
44 | } | |
45 | ||
46 | &.reactionSummaryListTiny .reactionType { | |
47 | width: 16px; | |
48 | height: 16px; | |
49 | } | |
50 | } | |
51 | ||
52 | .reactCountButton { | |
53 | color: $wcfContentDimmedText; | |
54 | flex: 0 0 auto; | |
55 | margin: 5px 5px 0 0; | |
56 | white-space: nowrap; | |
57 | ||
58 | &:hover { | |
59 | color: $wcfContentText; | |
f7ab933b | 60 | } |
2e3bc3bf JR |
61 | } |
62 | ||
bf04738c JR |
63 | .reactionPopoverContent { |
64 | background-color: $wcfContentBackground; | |
65 | border-radius: 3px; | |
66 | color: $wcfContentText; | |
bf04738c JR |
67 | |
68 | a { | |
69 | color: $wcfContentLink; | |
70 | ||
71 | &:hover { | |
72 | color: $wcfContentLinkActive; | |
73 | } | |
74 | } | |
75 | ||
60770242 JR |
76 | > ul > li.reactionTypeButton > img { |
77 | width: 24px; | |
78 | height: 24px; | |
79 | } | |
80 | ||
bf04738c JR |
81 | > ul > li.reactionTypeButton > img:hover { |
82 | transform: scale(1.2); | |
83 | } | |
84 | ||
71bc3307 | 85 | @include screen-md-down { |
4cb8dcd3 | 86 | padding: 5px 0; |
1167800d | 87 | |
71bc3307 | 88 | > ul > li.reactionTypeButton { |
4cb8dcd3 | 89 | margin: 0; |
71bc3307 | 90 | display: block; |
1167800d | 91 | padding: 5px 25px; |
71bc3307 JR |
92 | } |
93 | ||
94 | > ul > li.reactionTypeButton > .reactionTypeButtonTitle { | |
95 | vertical-align: middle; | |
96 | padding-left: 5px; | |
97 | } | |
1167800d JR |
98 | |
99 | > ul > li.reactionTypeButton.active { | |
100 | background-color: $wcfContentBorderInner; // @TODO maybe find a better color value | |
101 | } | |
71bc3307 JR |
102 | } |
103 | ||
104 | @include screen-lg { | |
1167800d JR |
105 | padding: 5px 15px; |
106 | ||
71bc3307 JR |
107 | > ul > li.reactionTypeButton > .reactionTypeButtonTitle { |
108 | display: none; | |
109 | } | |
110 | ||
111 | > ul > li.reactionTypeButton { | |
1167800d JR |
112 | display: inline-block; |
113 | padding-top: 10px; | |
114 | padding-bottom: 10px; | |
71bc3307 JR |
115 | cursor: pointer; |
116 | margin-left: 10px; | |
117 | } | |
118 | ||
1167800d JR |
119 | > ul > li.reactionTypeButton.active { |
120 | padding-left: 5px; | |
121 | padding-right: 5px; | |
122 | } | |
123 | ||
124 | > ul > li.reactionTypeButton.active > img { | |
125 | transform: scale(1.4); | |
126 | } | |
127 | ||
128 | > ul > li.reactionTypeButton.active > img:hover { | |
129 | transform: scale(1.2); | |
130 | } | |
131 | ||
71bc3307 | 132 | > ul > li.reactionTypeButton:first-child { |
4cb8dcd3 | 133 | margin-left: 0; |
71bc3307 JR |
134 | } |
135 | } | |
bf04738c JR |
136 | } |
137 | ||
340d92fc JR |
138 | @include screen-sm-down { |
139 | .reactionStatusContainer { | |
140 | display: none; | |
141 | } | |
8149511f JR |
142 | } |
143 | ||
144 | .messageFooterGroup > .mobileReactButton { | |
145 | margin-left: auto; | |
146 | margin-top: 20px; | |
110293a3 JR |
147 | } |
148 | ||
149 | #likeList .likeTypeSelection { | |
150 | display: flex; | |
151 | justify-content: flex-end; | |
152 | ||
153 | .buttonGroup li { | |
154 | display: flex; | |
155 | justify-content: stretch; | |
156 | ||
157 | a { | |
158 | display: flex; | |
159 | align-items: center; | |
160 | } | |
161 | } | |
4cb8dcd3 | 162 | } |