imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use Compound close icon in favour of mishmash of x/close icons (#108)

Browse source 
* Use Compound close icon in favour of mishmash of x/close icons

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshots

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove stale CSS

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update snapshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-10-02 11:06:17 +01:00 • committed by GitHub
parent c2c316831a
commit 5d9996c281
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 143 additions and 225 deletions
Download patch file Download diff file Expand all files Collapse all files

1
res/css/components/views/beacon/_DialogSidebar.pcss
View file

@ -34,7 +34,6 @@ Please see LICENSE files in the repository root for full details.
.mx_DialogSidebar_closeButtonIcon {
color: $tertiary-content;
height: 12px;
}
}

8
res/css/structures/_SearchBox.pcss
View file

@ -16,11 +16,13 @@ Please see LICENSE files in the repository root for full details.
.mx_SearchBox_closeButton {
cursor: pointer;
background-image: url("$(res)/img/icons-close.svg");
background-repeat: no-repeat;
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;
background-position: center;
padding: 9px;
background-color: var(--cpd-color-icon-secondary);
}
}

2
res/css/structures/_UploadBar.pcss
View file

@ -55,5 +55,5 @@ Please see LICENSE files in the repository root for full details.
mask-repeat: no-repeat;
mask-position: center;
background-color: $muted-fg-color;
mask-image: url("$(res)/img/icons-close.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}

63
res/css/structures/_UserMenu.pcss
View file

@ -204,66 +204,3 @@ Please see LICENSE files in the repository root for full details.
mask-image: url("@vector-im/compound-design-tokens/icons/qr-code.svg");
}
}
.mx_UserMenu_CustomStatusSection {
margin: 0 12px 8px;
.mx_UserMenu_CustomStatusSection_field {
position: relative;
display: flex;
&.mx_UserMenu_CustomStatusSection_field_hasQuery {
.mx_UserMenu_CustomStatusSection_clear {
display: block;
}
}
> .mx_UserMenu_CustomStatusSection_input {
border: 1px solid $accent;
border-radius: 8px;
width: 100%;
&:focus + .mx_UserMenu_CustomStatusSection_clear {
display: block;
}
}
> .mx_UserMenu_CustomStatusSection_clear {
display: none;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 16px;
height: 16px;
margin-right: 8px;
background-color: $quinary-content;
border-radius: 50%;
&::before {
content: "";
position: absolute;
width: inherit;
height: inherit;
mask-image: url("$(res)/img/feather-customised/x.svg");
mask-position: center;
mask-size: 12px;
mask-repeat: no-repeat;
background-color: $secondary-content;
}
}
}
> p {
font-size: $font-12px;
line-height: $font-15px;
color: $secondary-content;
margin: 4px 0;
}
.mx_AccessibleButton_kind_primary_outline {
display: block;
}
}

10
res/css/views/dialogs/_PollCreateDialog.pcss
View file

@ -52,15 +52,13 @@ Please see LICENSE files in the repository root for full details.
&::before {
content: "";
mask: url("$(res)/img/element-icons/x-8px.svg");
mask: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
width: 8px;
height: 8px;
mask-size: 16px;
width: inherit;
height: inherit;
position: absolute;
top: 6px;
left: 6px;
background-color: $secondary-content;
}
}

2
res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
View file

@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
color: $alert;
&::before {
mask-image: url("$(res)/img/feather-customised/x.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
background-color: $alert;
}
}

2
res/css/views/elements/_AccessibleButton.pcss
View file

@ -72,7 +72,7 @@ Please see LICENSE files in the repository root for full details.
background-color: var(--cpd-color-bg-critical-primary);
&::before {
mask-image: url("$(res)/img/feather-customised/x.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
}
}

4
res/css/views/elements/_ImageView.pcss
View file

@ -139,8 +139,8 @@ $button-gap: 24px;
&::before {
width: $button-size;
height: $button-size;
mask-image: url("$(res)/img/image-view/close.svg");
mask-size: 40%;
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
mask-size: 24px;
}
}

2
res/css/views/elements/_Validation.pcss
View file

@ -53,7 +53,7 @@ Please see LICENSE files in the repository root for full details.
color: $alert;
&::before {
mask-image: url("$(res)/img/feather-customised/x.svg");
mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
background-color: $alert;
}
}