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>
This commit is contained in:
parent
fe8c267a14
commit
3b28b1100f
1 changed files with 78 additions and 78 deletions
|
@ -67,96 +67,96 @@ limitations under the License.
|
|||
z-index: var(--MessageActionBar-item-hover-zIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageActionBar_maskButton {
|
||||
width: var(--MessageActionBar-size-button);
|
||||
height: var(--MessageActionBar-size-button);
|
||||
.mx_MessageActionBar_maskButton {
|
||||
width: var(--MessageActionBar-size-button);
|
||||
height: var(--MessageActionBar-size-button);
|
||||
|
||||
&:disabled,
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: .75;
|
||||
}
|
||||
&:disabled,
|
||||
&[disabled] {
|
||||
cursor: not-allowed;
|
||||
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 {
|
||||
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 {
|
||||
background: $links;
|
||||
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');
|
||||
&:hover::after {
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
&.mx_MessageActionBar_downloadSpinnerButton::after {
|
||||
background-color: transparent; // hide the download icon mask
|
||||
&.mx_MessageActionBar_reactButton::after {
|
||||
mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_MessageActionBar_expandMessageButton::after {
|
||||
mask-size: 12px;
|
||||
mask-image: url('$(res)/img/element-icons/expand-message.svg');
|
||||
}
|
||||
&.mx_MessageActionBar_replyButton::after {
|
||||
mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
|
||||
}
|
||||
|
||||
&.mx_MessageActionBar_collapseMessageButton::after {
|
||||
mask-size: 12px;
|
||||
mask-image: url('$(res)/img/element-icons/collapse-message.svg');
|
||||
}
|
||||
&.mx_MessageActionBar_threadButton {
|
||||
&::after {
|
||||
mask-image: url('$(res)/img/element-icons/message/thread.svg');
|
||||
}
|
||||
|
||||
&.mx_MessageActionBar_viewInRoomButton::after {
|
||||
mask-image: url('$(res)/img/element-icons/view-in-room.svg');
|
||||
}
|
||||
.mx_Indicator {
|
||||
background: $links;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_MessageActionBar_copyLinkButton::after {
|
||||
mask-image: url('$(res)/img/element-icons/link.svg');
|
||||
&.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 {
|
||||
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 a new issue