mirror of https://github.com/vector-im/riot-web
Tweak alignment of reactions row, move add reaction to right and only show on hover
parent
b5fa4d88bf
commit
36633ec025
|
@ -20,10 +20,11 @@ limitations under the License.
|
|||
|
||||
.mx_ReactionsRow_addReactionButton {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
display: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: sub;
|
||||
vertical-align: middle;
|
||||
margin-left: 6px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
|
@ -39,12 +40,16 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mx_ReactionsRow_showAll {
|
||||
text-decoration: none;
|
||||
font-size: $font-10px;
|
||||
font-weight: 600;
|
||||
margin-left: 6px;
|
||||
vertical-align: top;
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover,
|
||||
&:link,
|
||||
|
|
|
@ -16,14 +16,15 @@ limitations under the License.
|
|||
|
||||
.mx_ReactionsRowButton {
|
||||
display: inline-flex;
|
||||
line-height: $font-21px;
|
||||
line-height: $font-20px;
|
||||
margin-right: 6px;
|
||||
padding: 0 6px;
|
||||
padding: 1px 6px;
|
||||
border: 1px solid $reaction-row-button-border-color;
|
||||
border-radius: 10px;
|
||||
background-color: $reaction-row-button-bg-color;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover {
|
||||
border-color: $reaction-row-button-hover-border-color;
|
||||
|
|
|
@ -192,8 +192,8 @@ export default class ReactionsRow extends React.PureComponent {
|
|||
aria-label={_t("Reactions")}
|
||||
>
|
||||
{ items }
|
||||
{ addReactionButton }
|
||||
{ showAllButton }
|
||||
{ addReactionButton }
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue