Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 3b28b11

Browse files
luixxiulluixxiul
authored
Include mx_MessageActionBar_maskButton in mx_MessageActionBar (#8792)
* Include mx_MessageActionBar_maskButton in mx_MessageActionBar Signed-off-by: Suguru Hirahara <[email protected]> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <[email protected]>
1 parent fe8c267 commit 3b28b11

File tree

1 file changed

+70
-70
lines changed

1 file changed

+70
-70
lines changed

‎res/css/views/messages/_MessageActionBar.scss

Lines changed: 70 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -67,96 +67,96 @@ limitations under the License.
6767
z-index: var(--MessageActionBar-item-hover-zIndex);
6868
}
6969
}
70-
}
7170

72-
.mx_MessageActionBar_maskButton {
73-
width: var(--MessageActionBar-size-button);
74-
height: var(--MessageActionBar-size-button);
71+
.mx_MessageActionBar_maskButton {
72+
width: var(--MessageActionBar-size-button);
73+
height: var(--MessageActionBar-size-button);
7574

76-
&:disabled,
77-
&[disabled] {
78-
cursor: not-allowed;
79-
opacity: .75;
80-
}
75+
&:disabled,
76+
&[disabled] {
77+
cursor: not-allowed;
78+
opacity: .75;
79+
}
8180

82-
&::after {
83-
content: '';
84-
position: absolute;
85-
top: 0;
86-
left: 0;
87-
height: 100%;
88-
width: 100%;
89-
mask-size: 18px;
90-
mask-repeat: no-repeat;
91-
mask-position: center;
92-
background-color: $secondary-content;
93-
}
81+
&::after {
82+
content: '';
83+
position: absolute;
84+
top: 0;
85+
left: 0;
86+
height: 100%;
87+
width: 100%;
88+
mask-size: 18px;
89+
mask-repeat: no-repeat;
90+
mask-position: center;
91+
background-color: $secondary-content;
92+
}
9493

95-
&:hover::after {
96-
background-color: $primary-content;
97-
}
94+
&:hover::after {
95+
background-color: $primary-content;
96+
}
9897

99-
&.mx_MessageActionBar_reactButton::after {
100-
mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
101-
}
98+
&.mx_MessageActionBar_reactButton::after {
99+
mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
100+
}
102101

103-
&.mx_MessageActionBar_replyButton::after {
104-
mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
105-
}
102+
&.mx_MessageActionBar_replyButton::after {
103+
mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
104+
}
106105

107-
&.mx_MessageActionBar_threadButton {
108-
&::after {
109-
mask-image: url('$(res)/img/element-icons/message/thread.svg');
106+
&.mx_MessageActionBar_threadButton {
107+
&::after {
108+
mask-image: url('$(res)/img/element-icons/message/thread.svg');
109+
}
110+
111+
.mx_Indicator {
112+
background: $links;
113+
animation-iteration-count: infinite;
114+
}
110115
}
111116

112-
.mx_Indicator {
113-
background: $links;
114-
animation-iteration-count: infinite;
117+
&.mx_MessageActionBar_editButton::after {
118+
mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
115119
}
116-
}
117120

118-
&.mx_MessageActionBar_editButton::after {
119-
mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
120-
}
121+
&.mx_MessageActionBar_optionsButton::after {
122+
mask-image: url('$(res)/img/element-icons/context-menu.svg');
123+
}
121124

122-
&.mx_MessageActionBar_optionsButton::after {
123-
mask-image: url('$(res)/img/element-icons/context-menu.svg');
124-
}
125+
&.mx_MessageActionBar_resendButton::after {
126+
mask-image: url('$(res)/img/element-icons/retry.svg');
127+
}
125128

126-
&.mx_MessageActionBar_resendButton::after {
127-
mask-image: url('$(res)/img/element-icons/retry.svg');
128-
}
129+
&.mx_MessageActionBar_cancelButton::after {
130+
mask-image: url('$(res)/img/element-icons/trashcan.svg');
131+
}
129132

130-
&.mx_MessageActionBar_cancelButton::after {
131-
mask-image: url('$(res)/img/element-icons/trashcan.svg');
132-
}
133+
&.mx_MessageActionBar_downloadButton {
134+
&::after {
135+
mask-size: 14px;
136+
mask-image: url('$(res)/img/download.svg');
137+
}
133138

134-
&.mx_MessageActionBar_downloadButton {
135-
&::after {
136-
mask-size: 14px;
137-
mask-image: url('$(res)/img/download.svg');
139+
&.mx_MessageActionBar_downloadSpinnerButton::after {
140+
background-color: transparent; // hide the download icon mask
141+
}
138142
}
139143

140-
&.mx_MessageActionBar_downloadSpinnerButton::after {
141-
background-color: transparent; // hide the download icon mask
144+
&.mx_MessageActionBar_expandMessageButton::after {
145+
mask-size: 12px;
146+
mask-image: url('$(res)/img/element-icons/expand-message.svg');
142147
}
143-
}
144-
145-
&.mx_MessageActionBar_expandMessageButton::after {
146-
mask-size: 12px;
147-
mask-image: url('$(res)/img/element-icons/expand-message.svg');
148-
}
149148

150-
&.mx_MessageActionBar_collapseMessageButton::after {
151-
mask-size: 12px;
152-
mask-image: url('$(res)/img/element-icons/collapse-message.svg');
153-
}
149+
&.mx_MessageActionBar_collapseMessageButton::after {
150+
mask-size: 12px;
151+
mask-image: url('$(res)/img/element-icons/collapse-message.svg');
152+
}
154153

155-
&.mx_MessageActionBar_viewInRoomButton::after {
156-
mask-image: url('$(res)/img/element-icons/view-in-room.svg');
157-
}
154+
&.mx_MessageActionBar_viewInRoomButton::after {
155+
mask-image: url('$(res)/img/element-icons/view-in-room.svg');
156+
}
158157

159-
&.mx_MessageActionBar_copyLinkButton::after {
160-
mask-image: url('$(res)/img/element-icons/link.svg');
158+
&.mx_MessageActionBar_copyLinkButton::after {
159+
mask-image: url('$(res)/img/element-icons/link.svg');
160+
}
161161
}
162162
}

0 commit comments

Comments
 (0)