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

Conform _AppsDrawer.pcss to our naming policy - move styles specific to mx_AppTileMenuBar to be nested inside it (#10877)

Browse source 
* Nest: mx_AppTileMenuBar

* Run prettier
This commit is contained in:
Suguru Hirahara 2023-05-12 11:33:23 +00:00 • committed by GitHub
parent 15ed660975
commit 64733e5982
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 56 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -198,78 +198,78 @@ limitations under the License.
width: 100%; width: 100%;
padding-top: 3px; padding-top: 3px;
padding-bottom: 6px; padding-bottom: 6px;
}
.mx_AppTileMenuBar_title { .mx_AppTileMenuBar_title {
line-height: 20px; line-height: 20px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
.mx_WidgetAvatar { .mx_WidgetAvatar {
margin-right: 12px; margin-right: 12px;
}
> :last-child {
margin-left: 9px;
}
} }
> :last-child { .mx_AppTileMenuBar_widgets {
margin-left: 9px; float: right;
display: flex;
flex-direction: row;
align-items: center;
} }
}
.mx_AppTileMenuBar_widgets { .mx_AppTileMenuBar_iconButton {
float: right; --size: 24px; /* Size of the button. Its height and width values should be same */
display: flex;
flex-direction: row;
align-items: center;
}
.mx_AppTileMenuBar_iconButton { margin: 0 4px;
--size: 24px; /* Size of the button. Its height and width values should be same */ position: relative;
margin: 0 4px;
position: relative;
height: var(--size);
width: var(--size);
&::before,
&:hover::after {
content: "";
position: absolute;
height: var(--size); height: var(--size);
width: var(--size); width: var(--size);
}
&::before { &::before,
background-color: $muted-fg-color; &:hover::after {
mask-position: center; content: "";
mask-repeat: no-repeat; position: absolute;
mask-size: 12px; height: var(--size);
} width: var(--size);
}
&:hover::after { &::before {
background-color: $panel-actions; background-color: $muted-fg-color;
border-radius: 50%; mask-position: center;
left: 0; mask-repeat: no-repeat;
top: 0; mask-size: 12px;
} }
&.mx_AppTileMenuBar_iconButton--collapse::before { &:hover::after {
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg"); background-color: $panel-actions;
} border-radius: 50%;
left: 0;
top: 0;
}
&.mx_AppTileMenuBar_iconButton--maximise::before { &.mx_AppTileMenuBar_iconButton--collapse::before {
mask-image: url("$(res)/img/element-icons/maximise-expand.svg"); mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
} }
&.mx_AppTileMenuBar_iconButton--minimise::before { &.mx_AppTileMenuBar_iconButton--maximise::before {
mask-image: url("$(res)/img/element-icons/minus-button.svg"); mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
} }
&.mx_AppTileMenuBar_iconButton--popout::before { &.mx_AppTileMenuBar_iconButton--minimise::before {
mask-image: url("$(res)/img/feather-customised/widget/external-link.svg"); mask-image: url("$(res)/img/element-icons/minus-button.svg");
} }
&.mx_AppTileMenuBar_iconButton--menu::before { &.mx_AppTileMenuBar_iconButton--popout::before {
mask-image: url("$(res)/img/element-icons/room/ellipsis.svg"); 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");
}
} }
} }