PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #3589 from matrix-org/t3chguy/svg_outlines

Browse source 
Fix SVG mask-image usage in a bunch of places for correct outlining
This commit is contained in:
Michael Telatynski 2019-11-04 10:06:52 +00:00 committed by GitHub
commit b3a64bb19a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 59 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
res/css/structures/_GroupView.scss
View file

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

4
res/css/structures/_RightPanel.scss
View file

@ -50,9 +50,8 @@ limitations under the License.
height: 20px; height: 20px;
width: 20px; width: 20px;
position: relative; position: relative;
}
.mx_RightPanel_headerButton::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
@ -63,6 +62,7 @@ limitations under the License.
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-size: contain; mask-size: contain;
} }
}
.mx_RightPanel_membersButton::before { .mx_RightPanel_membersButton::before {
mask-image: url('$(res)/img/feather-customised/user.svg'); mask-image: url('$(res)/img/feather-customised/user.svg');

20
res/css/views/rooms/_MessageComposer.scss
View file

@ -180,9 +180,16 @@ limitations under the License.
} }
.mx_MessageComposer_button { .mx_MessageComposer_button {
position: relative;
margin-right: 12px; margin-right: 12px;
cursor: pointer; cursor: pointer;
padding-top: 4px; height: 20px;
width: 20px;
&::before {
content: '';
position: absolute;
height: 20px; height: 20px;
width: 20px; width: 20px;
background-color: $composer-button-color; background-color: $composer-button-color;
@ -190,24 +197,25 @@ limitations under the License.
mask-size: contain; mask-size: contain;
mask-position: center; mask-position: center;
} }
}
.mx_MessageComposer_upload { .mx_MessageComposer_upload::before {
mask-image: url('$(res)/img/feather-customised/paperclip.svg'); mask-image: url('$(res)/img/feather-customised/paperclip.svg');
} }
.mx_MessageComposer_hangup { .mx_MessageComposer_hangup::before {
mask-image: url('$(res)/img/hangup.svg'); mask-image: url('$(res)/img/hangup.svg');
} }
.mx_MessageComposer_voicecall { .mx_MessageComposer_voicecall::before {
mask-image: url('$(res)/img/feather-customised/phone.svg'); 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'); 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'); mask-image: url('$(res)/img/feather-customised/face.svg');
} }

21
res/css/views/rooms/_RoomHeader.scss
View file

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