imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use Icon component for icons on AppTile's menu bar (#10955)

Browse source 
* Use icon component for buttons on mx_AppTileMenuBar_widgets

* Remove redundant declarations

* Add a Percy snapshot test

* Set color value to mx_Icon, fill and stroke with currentColor

* Iterate
This commit is contained in:
Suguru Hirahara 2023-05-22 07:48:40 +00:00 • committed by GitHub
parent 2e3cb0adf7
commit b7cd1f00fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 74 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

66
res/css/views/rooms/_AppsDrawer.pcss
View file

@ -222,60 +222,34 @@ limitations under the License.
}
.mx_AppTileMenuBar_widgets {
float: right;
display: flex;
flex-direction: row;
align-items: center;
}
.mx_AppTileMenuBar_iconButton {
--size: 24px; /* Size of the button. Its height and width values should be same */
.mx_AppTileMenuBar_widgets_button {
--size: 24px; /* Size of the button. Its height and width values should be same */
margin: 0 4px;
position: relative;
height: var(--size);
width: var(--size);
&::before,
&:hover::after {
content: "";
position: absolute;
margin: 0 4px;
position: relative;
height: var(--size);
width: var(--size);
}
display: flex;
align-items: center;
justify-content: center;
&::before {
background-color: $muted-fg-color;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 12px;
}
&:hover::after {
content: "";
position: absolute;
height: var(--size);
width: var(--size);
background-color: $panel-actions;
border-radius: 50%;
left: 0;
top: 0;
}
&:hover::after {
background-color: $panel-actions;
border-radius: 50%;
left: 0;
top: 0;
}
&.mx_AppTileMenuBar_iconButton--collapse::before {
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
}
&.mx_AppTileMenuBar_iconButton--maximise::before {
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
}
&.mx_AppTileMenuBar_iconButton--minimise::before {
mask-image: url("$(res)/img/element-icons/minus-button.svg");
}
&.mx_AppTileMenuBar_iconButton--popout::before {
mask-image: url("$(res)/img/feather-customised/widget/external-link.svg");
}
&.mx_AppTileMenuBar_iconButton--menu::before {
mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
.mx_Icon {
color: $muted-fg-color;
}
}
}
}