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
committed by
GitHub
GitHub
parent
c7134e8532
commit
4a3cf3e69d
@@ -32,27 +32,20 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
|
||||
.mx_ConfirmSpaceUserActionDialog_warning {
|
||||
position: relative;
|
||||
border-radius: 8px;
|
||||
padding: 12px 8px 12px 42px;
|
||||
padding: 12px 8px;
|
||||
background-color: $header-panel-bg-color;
|
||||
|
||||
font-size: $font-12px;
|
||||
line-height: $font-15px;
|
||||
color: $secondary-content;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: calc(50% - 8px); /* vertical centering */
|
||||
svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
background-color: $secondary-content;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/info-solid.svg");
|
||||
mask-position: center;
|
||||
vertical-align: -4px;
|
||||
margin-right: var(--cpd-space-1-5x);
|
||||
color: $secondary-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,33 +55,17 @@ Please see LICENSE files in the repository root for full details.
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
& > svg {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
left: 16px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
padding: var(--cpd-space-2x);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: $icon-button-color;
|
||||
color: $avatar-initial-color;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: $avatar-initial-color; /* TODO */
|
||||
mask-position: center;
|
||||
mask-size: 24px;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_FeedbackDialog_reportBug {
|
||||
&::after {
|
||||
mask-image: url("$(res)/img/feather-customised/bug.svg");
|
||||
}
|
||||
}
|
||||
|
||||
.mx_FeedbackDialog_rateApp {
|
||||
@@ -125,9 +109,5 @@ Please see LICENSE files in the repository root for full details.
|
||||
font-size: 24px;
|
||||
border-color: var(--cpd-color-bg-action-primary-rest);
|
||||
}
|
||||
|
||||
&::after {
|
||||
mask-image: url("$(res)/img/element-icons/feedback.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,20 +10,12 @@ Please see LICENSE files in the repository root for full details.
|
||||
}
|
||||
|
||||
.mx_KeyBackupFailedDialog_title {
|
||||
position: relative;
|
||||
padding-left: 45px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
&::before {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/error.svg");
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $primary-content;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
svg {
|
||||
margin-right: var(--cpd-space-2x);
|
||||
vertical-align: -2px;
|
||||
color: $primary-content;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -39,17 +39,11 @@ Please see LICENSE files in the repository root for full details.
|
||||
top: 0.15em;
|
||||
background-color: $background;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
mask-image: url($copy-button-url);
|
||||
mask-position: center center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
background-color: $message-action-bar-fg-color;
|
||||
svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
color: $message-action-bar-fg-color;
|
||||
display: block;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,14 +23,12 @@ Please see LICENSE files in the repository root for full details.
|
||||
cursor: pointer;
|
||||
color: $secondary-content;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
margin-right: 8px;
|
||||
background-color: $secondary-content;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg");
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: $secondary-content;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -918,30 +918,21 @@ $left-gutter: 64px;
|
||||
position: absolute;
|
||||
top: $spacing-8;
|
||||
right: $spacing-8;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
visibility: hidden;
|
||||
background-color: $message-action-bar-fg-color;
|
||||
|
||||
&.mx_EventTile_buttonBottom {
|
||||
top: 33px;
|
||||
}
|
||||
|
||||
&.mx_EventTile_collapseButton,
|
||||
&.mx_EventTile_expandButton {
|
||||
mask-size: 75%;
|
||||
svg {
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
display: block;
|
||||
color: $message-action-bar-fg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_EventTile_copyButton {
|
||||
height: 17px;
|
||||
mask-image: url($copy-button-url);
|
||||
mask-position: center center;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
right: 9px;
|
||||
width: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -962,20 +953,6 @@ $left-gutter: 64px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mx_EventTile_collapseButton,
|
||||
.mx_EventTile_expandButton {
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.mx_EventTile_collapseButton {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/collapse.svg");
|
||||
}
|
||||
|
||||
.mx_EventTile_expandButton {
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/expand.svg");
|
||||
}
|
||||
|
||||
.mx_EventTile_tileError {
|
||||
color: red;
|
||||
text-align: center;
|
||||
|
||||
@@ -10,33 +10,10 @@ Please see LICENSE files in the repository root for full details.
|
||||
color: $secondary-content;
|
||||
display: inline-block;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 1.2em;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $tertiary-content;
|
||||
vertical-align: text-bottom;
|
||||
svg {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&.mx_RoomInfoLine_public::before {
|
||||
width: 12px;
|
||||
mask-size: 12px;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/public.svg");
|
||||
}
|
||||
|
||||
&.mx_RoomInfoLine_private::before {
|
||||
width: 10px;
|
||||
mask-size: 10px;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/lock-solid.svg");
|
||||
}
|
||||
|
||||
&.mx_RoomInfoLine_video::before {
|
||||
width: 16px;
|
||||
mask-size: 16px;
|
||||
mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg");
|
||||
vertical-align: -2px;
|
||||
color: $tertiary-content;
|
||||
}
|
||||
|
||||
.mx_RoomInfoLine_members {
|
||||
|
||||
Reference in New Issue
Block a user