mirror of https://github.com/vector-im/riot-web
Include mx_MessageActionBar_maskButton in mx_MessageActionBar (#8792)
* Include mx_MessageActionBar_maskButton in mx_MessageActionBar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>pull/28217/head
parent
fe8c267a14
commit
3b28b1100f
|
@ -67,96 +67,96 @@ limitations under the License.
|
||||||
z-index: var(--MessageActionBar-item-hover-zIndex);
|
z-index: var(--MessageActionBar-item-hover-zIndex);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.mx_MessageActionBar_maskButton {
|
.mx_MessageActionBar_maskButton {
|
||||||
width: var(--MessageActionBar-size-button);
|
width: var(--MessageActionBar-size-button);
|
||||||
height: var(--MessageActionBar-size-button);
|
height: var(--MessageActionBar-size-button);
|
||||||
|
|
||||||
&:disabled,
|
&:disabled,
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: .75;
|
opacity: .75;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
mask-size: 18px;
|
|
||||||
mask-repeat: no-repeat;
|
|
||||||
mask-position: center;
|
|
||||||
background-color: $secondary-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover::after {
|
|
||||||
background-color: $primary-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mx_MessageActionBar_reactButton::after {
|
|
||||||
mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mx_MessageActionBar_replyButton::after {
|
|
||||||
mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mx_MessageActionBar_threadButton {
|
|
||||||
&::after {
|
&::after {
|
||||||
mask-image: url('$(res)/img/element-icons/message/thread.svg');
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
mask-size: 18px;
|
||||||
|
mask-repeat: no-repeat;
|
||||||
|
mask-position: center;
|
||||||
|
background-color: $secondary-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_Indicator {
|
&:hover::after {
|
||||||
background: $links;
|
background-color: $primary-content;
|
||||||
animation-iteration-count: infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mx_MessageActionBar_editButton::after {
|
|
||||||
mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mx_MessageActionBar_optionsButton::after {
|
|
||||||
mask-image: url('$(res)/img/element-icons/context-menu.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mx_MessageActionBar_resendButton::after {
|
|
||||||
mask-image: url('$(res)/img/element-icons/retry.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mx_MessageActionBar_cancelButton::after {
|
|
||||||
mask-image: url('$(res)/img/element-icons/trashcan.svg');
|
|
||||||
}
|
|
||||||
|
|
||||||
&.mx_MessageActionBar_downloadButton {
|
|
||||||
&::after {
|
|
||||||
mask-size: 14px;
|
|
||||||
mask-image: url('$(res)/img/download.svg');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.mx_MessageActionBar_downloadSpinnerButton::after {
|
&.mx_MessageActionBar_reactButton::after {
|
||||||
background-color: transparent; // hide the download icon mask
|
mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.mx_MessageActionBar_expandMessageButton::after {
|
&.mx_MessageActionBar_replyButton::after {
|
||||||
mask-size: 12px;
|
mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
|
||||||
mask-image: url('$(res)/img/element-icons/expand-message.svg');
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.mx_MessageActionBar_collapseMessageButton::after {
|
&.mx_MessageActionBar_threadButton {
|
||||||
mask-size: 12px;
|
&::after {
|
||||||
mask-image: url('$(res)/img/element-icons/collapse-message.svg');
|
mask-image: url('$(res)/img/element-icons/message/thread.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
&.mx_MessageActionBar_viewInRoomButton::after {
|
.mx_Indicator {
|
||||||
mask-image: url('$(res)/img/element-icons/view-in-room.svg');
|
background: $links;
|
||||||
}
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.mx_MessageActionBar_copyLinkButton::after {
|
&.mx_MessageActionBar_editButton::after {
|
||||||
mask-image: url('$(res)/img/element-icons/link.svg');
|
mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mx_MessageActionBar_optionsButton::after {
|
||||||
|
mask-image: url('$(res)/img/element-icons/context-menu.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mx_MessageActionBar_resendButton::after {
|
||||||
|
mask-image: url('$(res)/img/element-icons/retry.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mx_MessageActionBar_cancelButton::after {
|
||||||
|
mask-image: url('$(res)/img/element-icons/trashcan.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mx_MessageActionBar_downloadButton {
|
||||||
|
&::after {
|
||||||
|
mask-size: 14px;
|
||||||
|
mask-image: url('$(res)/img/download.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mx_MessageActionBar_downloadSpinnerButton::after {
|
||||||
|
background-color: transparent; // hide the download icon mask
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mx_MessageActionBar_expandMessageButton::after {
|
||||||
|
mask-size: 12px;
|
||||||
|
mask-image: url('$(res)/img/element-icons/expand-message.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mx_MessageActionBar_collapseMessageButton::after {
|
||||||
|
mask-size: 12px;
|
||||||
|
mask-image: url('$(res)/img/element-icons/collapse-message.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mx_MessageActionBar_viewInRoomButton::after {
|
||||||
|
mask-image: url('$(res)/img/element-icons/view-in-room.svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mx_MessageActionBar_copyLinkButton::after {
|
||||||
|
mask-image: url('$(res)/img/element-icons/link.svg');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue