Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-16 05:04:57 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix SVG mask-image usage in a bunch of places for correct outlining

Browse Source
This commit is contained in:
Michael Telatynski 2019-11-01 14:46:30 +00:00
parent db0e643f4d
commit 10a63ada48
4 changed files with 59 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
res/css/structures/_GroupView.scss
View File

@ -44,21 +44,29 @@ limitations under the License.
}
.mx_GroupHeader_button {
position: relative;
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
height: 20px;
width: 20px;
background-color: $groupheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
&::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
background-color: $groupheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
}
.mx_GroupHeader_editButton {
.mx_GroupHeader_editButton::before {
mask-image: url('$(res)/img/icons-settings-room.svg');
}
.mx_GroupHeader_shareButton {
.mx_GroupHeader_shareButton::before {
mask-image: url('$(res)/img/icons-share.svg');
}

22
res/css/structures/_RightPanel.scss
View File

@ -50,18 +50,18 @@ limitations under the License.
height: 20px;
width: 20px;
position: relative;
}
.mx_RightPanel_headerButton::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: $rightpanel-button-color;
mask-repeat: no-repeat;
mask-size: contain;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: $rightpanel-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
}
.mx_RightPanel_membersButton::before {

28
res/css/views/rooms/_MessageComposer.scss
View File

@ -180,34 +180,42 @@ limitations under the License.
}
.mx_MessageComposer_button {
position: relative;
margin-right: 12px;
cursor: pointer;
padding-top: 4px;
height: 20px;
width: 20px;
background-color: $composer-button-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
&::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
background-color: $composer-button-color;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
}
}
.mx_MessageComposer_upload {
.mx_MessageComposer_upload::before {
mask-image: url('$(res)/img/feather-customised/paperclip.svg');
}
.mx_MessageComposer_hangup {
.mx_MessageComposer_hangup::before {
mask-image: url('$(res)/img/hangup.svg');
}
.mx_MessageComposer_voicecall {
.mx_MessageComposer_voicecall::before {
mask-image: url('$(res)/img/feather-customised/phone.svg');
}
.mx_MessageComposer_videocall {
.mx_MessageComposer_videocall::before {
mask-image: url('$(res)/img/feather-customised/video.svg');
}
.mx_MessageComposer_stickers {
.mx_MessageComposer_stickers::before {
mask-image: url('$(res)/img/feather-customised/face.svg');
}

27
res/css/views/rooms/_RoomHeader.scss
View File

@ -192,33 +192,41 @@ limitations under the License.
}
.mx_RoomHeader_button {
position: relative;
margin-left: 10px;
cursor: pointer;
height: 20px;
width: 20px;
background-color: $roomheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
&::before {
content: '';
position: absolute;
height: 20px;
width: 20px;
background-color: $roomheader-button-color;
mask-repeat: no-repeat;
mask-size: contain;
}
}
.mx_RoomHeader_settingsButton {
.mx_RoomHeader_settingsButton::before {
mask-image: url('$(res)/img/feather-customised/settings.svg');
}
.mx_RoomHeader_forgetButton {
.mx_RoomHeader_forgetButton::before {
mask-image: url('$(res)/img/leave.svg');
width: 26px;
}
.mx_RoomHeader_searchButton {
.mx_RoomHeader_searchButton::before {
mask-image: url('$(res)/img/feather-customised/search.svg');
}
.mx_RoomHeader_shareButton {
.mx_RoomHeader_shareButton::before {
mask-image: url('$(res)/img/feather-customised/share.svg');
}
.mx_RoomHeader_manageIntegsButton {
.mx_RoomHeader_manageIntegsButton::before {
mask-image: url('$(res)/img/feather-customised/grid.svg');
}
@ -234,8 +242,7 @@ limitations under the License.
margin-top: 18px;
}
.mx_RoomHeader_pinnedButton {
position: relative;
.mx_RoomHeader_pinnedButton::before {
mask-image: url('$(res)/img/icons-pin.svg');
}