Switch to rendering svg icons rather than css masking (#31517)
* Switch to rendering svg icons rather than masking them in left panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused stylesheet Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering svg icons rather than masking them for ExternalLink Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering svg icons rather than masking them for TabbedView Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering svg icons rather than masking them for JoinRuleDropdown Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering svg icons rather than masking them in ManageRestrictedJoinRuleDialog Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering svg icons rather than masking them in LeaveSpaceDialog Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering svg icons rather than masking them in ReplyPreview Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering svg icons rather than masking them in SearchBox Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering svg icons rather than masking them in RoomStatusBar Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix advanced.svg Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix bad merge conflict resolution Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
@@ -114,67 +114,30 @@ Please see LICENSE files in the repository root for full details.
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_dialPadButton {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
.mx_LeftPanel_dialPadButton,
|
||||
.mx_LeftPanel_exploreButton {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: var(--cpd-space-1-5x);
|
||||
border-radius: 8px;
|
||||
background-color: $panel-actions;
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/dial-pad.svg");
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_exploreButton,
|
||||
.mx_LeftPanel_recentsButton {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background-color: $panel-actions;
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $secondary-content;
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
display: block;
|
||||
color: $secondary-content;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $tertiary-content;
|
||||
|
||||
&::before {
|
||||
background-color: $background;
|
||||
svg {
|
||||
color: $background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LeftPanel_exploreButton::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/explore.svg");
|
||||
}
|
||||
|
||||
.mx_LeftPanel_recentsButton::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/time.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.mx_LegacyRoomListHeader:first-child {
|
||||
@@ -228,8 +191,7 @@ Please see LICENSE files in the repository root for full details.
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.mx_LeftPanel_exploreButton,
|
||||
.mx_LeftPanel_recentsButton {
|
||||
.mx_LeftPanel_exploreButton {
|
||||
margin-left: 0;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
@@ -99,34 +99,17 @@ Please see LICENSE files in the repository root for full details.
|
||||
position: relative;
|
||||
user-select: none;
|
||||
|
||||
&:nth-child(2) {
|
||||
& + .mx_AccessibleButton {
|
||||
border-left: 1px solid $resend-button-divider-color;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
svg {
|
||||
left: 10px; /* inset for regular button padding */
|
||||
background-color: $muted-fg-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: 50%; /* text sizes are dynamic */
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&.mx_RoomStatusBar_unsentCancelAllBtn::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
|
||||
}
|
||||
|
||||
&.mx_RoomStatusBar_unsentRetry {
|
||||
padding-left: 34px; /* 28px from above, but +6px to account for the wider icon */
|
||||
|
||||
&::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/restart.svg");
|
||||
}
|
||||
vertical-align: middle;
|
||||
color: $muted-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -17,13 +17,14 @@ Please see LICENSE files in the repository root for full details.
|
||||
|
||||
.mx_SearchBox_closeButton {
|
||||
cursor: pointer;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
padding: 9px;
|
||||
background-color: var(--cpd-color-icon-secondary);
|
||||
|
||||
svg {
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
color: var(--cpd-color-icon-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user