Switch to rendering svg icons rather than masking them (#31531)
* 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> * Switch to rendering svg icons rather than masking them in Toasts Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering svg icons rather than masking them in RoomInfoLine Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering svg icons rather than masking them in UploadBar Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused class Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering svg icons rather than masking them in ConfirmSpaceUserActionDialog Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering svg icons rather than masking them in FeedbackDialog Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering svg icons rather than masking them in KeyBackupFailedDialog Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering svg icons rather than masking them in CopyableText Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering svg icons rather than masking them in EventTile Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to rendering svg icons rather than masking them in InviteReason Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
@@ -41,42 +41,10 @@ Please see LICENSE files in the repository root for full details.
|
||||
padding: var(--cpd-space-3x);
|
||||
|
||||
&.mx_Toast_hasIcon {
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
mask-size: 100%;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&.mx_Toast_icon_verification::after {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
&.mx_Toast_icon_verification_warning {
|
||||
/* white infill for the hollow svg mask */
|
||||
&::before {
|
||||
background-color: #ffffff;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
|
||||
mask-size: 80%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
|
||||
background-color: $e2e-warning-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_Toast_icon_key_storage::after {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/settings-solid.svg");
|
||||
background-color: $primary-content;
|
||||
}
|
||||
|
||||
.mx_Toast_title,
|
||||
|
||||
@@ -7,12 +7,44 @@ Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
.mx_UploadBar {
|
||||
padding-left: 65px; /* line up with the shield area in the composer */
|
||||
padding-top: 5px;
|
||||
/* line up with the shield area in the composer */
|
||||
padding: 5px 21px 0;
|
||||
position: relative;
|
||||
|
||||
display: grid;
|
||||
grid-template:
|
||||
"icon filename cancel" auto
|
||||
"progress progress progress" auto
|
||||
/ min-content auto min-content;
|
||||
gap: var(--cpd-space-1-5x);
|
||||
|
||||
& > svg {
|
||||
grid-area: icon;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
color: $muted-fg-color;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.mx_UploadBar_filename {
|
||||
grid-area: filename;
|
||||
color: $muted-fg-color;
|
||||
position: relative;
|
||||
font-size: $font-15px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mx_UploadBar_cancel {
|
||||
grid-area: cancel;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
color: $muted-fg-color;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.mx_ProgressBar {
|
||||
width: calc(100% - 40px); /* cheating at a right margin */
|
||||
grid-area: progress;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,39 +53,3 @@ Please see LICENSE files in the repository root for full details.
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UploadBar_filename {
|
||||
color: $muted-fg-color;
|
||||
position: relative;
|
||||
padding-right: 38px; /* 32px for cancel icon, 6px for padding */
|
||||
padding-left: 22px; /* 18px for icon, 4px for padding */
|
||||
font-size: $font-15px;
|
||||
vertical-align: middle;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
background-color: $muted-fg-color;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/share.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.mx_UploadBar_cancel {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 16px; /* align over rightmost button in composer */
|
||||
margin-top: 5px;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
background-color: $muted-fg-color;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
|
||||
}
|
||||
|
||||
@@ -119,8 +119,4 @@ Please see LICENSE files in the repository root for full details.
|
||||
.mx_IconizedContextMenu_icon svg {
|
||||
color: $icon-button-color;
|
||||
}
|
||||
|
||||
.mx_UserMenu_iconMessage::before {
|
||||
mask-image: url("$(res)/img/element-icons/feedback.svg");
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user