Use Compound close icon in favour of mishmash of x/close icons (#108)
* 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
GitHub
parent
c2c316831a
commit
5d9996c281
26 changed files with 143 additions and 225 deletions
|
|
@ -34,7 +34,6 @@ Please see LICENSE files in the repository root for full details.
|
|||
|
||||
.mx_DialogSidebar_closeButtonIcon {
|
||||
color: $tertiary-content;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.8711 3.3741C14.2616 2.98357 14.2616 2.35041 13.8711 1.95989C13.4806 1.56936 12.8474 1.56936 12.4569 1.95989L7.92765 6.48911L3.39843 1.95989C3.00791 1.56936 2.37474 1.56936 1.98422 1.95989C1.59369 2.35041 1.59369 2.98357 1.98422 3.3741L6.51344 7.90332L1.79021 12.6266C1.39968 13.0171 1.39968 13.6502 1.79021 14.0408C2.18073 14.4313 2.8139 14.4313 3.20442 14.0408L7.92765 9.31753L12.6509 14.0408C13.0414 14.4313 13.6746 14.4313 14.0651 14.0408C14.4556 13.6502 14.4556 13.0171 14.0651 12.6266L9.34187 7.90332L13.8711 3.3741Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 661 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.93567 1.68754C7.13093 1.49228 7.13093 1.17569 6.93567 0.980431C6.7404 0.785169 6.42382 0.785169 6.22856 0.980431L3.96395 3.24504L1.69934 0.980431C1.50408 0.785169 1.18749 0.785169 0.992231 0.980431C0.796969 1.17569 0.796969 1.49228 0.992231 1.68754L3.25684 3.95215L0.895226 6.31377C0.699964 6.50903 0.699964 6.82561 0.895226 7.02087C1.09049 7.21613 1.40707 7.21613 1.60233 7.02087L3.96395 4.65926L6.32557 7.02087C6.52083 7.21613 6.83741 7.21613 7.03267 7.02087C7.22793 6.82561 7.22793 6.50903 7.03267 6.31376L4.67106 3.95215L6.93567 1.68754Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 676 B |
|
|
@ -1,4 +0,0 @@
|
|||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.999756 0.999756L8.99975 8.99975" stroke="#737D8C" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M9.00049 0.999756L1.00049 8.99975" stroke="#737D8C" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 310 B |
|
|
@ -1,4 +0,0 @@
|
|||
<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m18 6-12 12"/>
|
||||
<path d="m6 6 12 12"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 244 B |
|
|
@ -1,96 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
|
||||
<svg
|
||||
xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="-11 13 9.1202002 9.2202005"
|
||||
xml:space="preserve"
|
||||
sodipodi:docname="icons-close.svg"
|
||||
width="9.1202002"
|
||||
height="9.2202005"
|
||||
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
|
||||
id="metadata21"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title>icons_create_room</dc:title></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs19" /><sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1016"
|
||||
id="namedview17"
|
||||
showgrid="false"
|
||||
showguides="false"
|
||||
inkscape:zoom="9.8333333"
|
||||
inkscape:cx="-0.15658729"
|
||||
inkscape:cy="-1.4622263"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="27"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="icons_create_room"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" />
|
||||
<style
|
||||
type="text/css"
|
||||
id="style2">
|
||||
.st1{fill:none;stroke-width:2;stroke-linecap:round;}
|
||||
</style>
|
||||
<title
|
||||
id="title4">icons_create_room</title>
|
||||
<desc
|
||||
id="desc6">Created with sketchtool.</desc>
|
||||
<g
|
||||
id="_x30_3-Input"
|
||||
sketch:type="MSPage"
|
||||
transform="translate(-7.4898998,-7.3898998)">
|
||||
<g
|
||||
id="_x30_3_x5F_4-Uploading"
|
||||
transform="translate(-20,-726)"
|
||||
sketch:type="MSArtboardGroup">
|
||||
<g
|
||||
id="Room-list"
|
||||
sketch:type="MSLayerGroup">
|
||||
<g
|
||||
id="Room-list_x2F_Footer"
|
||||
transform="translate(0,708)"
|
||||
sketch:type="MSShapeGroup">
|
||||
<g
|
||||
id="icons_create_room"
|
||||
transform="translate(20,18)">
|
||||
|
||||
<path
|
||||
id="Line"
|
||||
class="st1"
|
||||
d="M -2.5,28.5 4.6,21.4"
|
||||
style="fill:none;stroke:#454545;stroke-width:2;stroke-linecap:round;stroke-opacity:1"
|
||||
inkscape:connector-curvature="0" />
|
||||
<path
|
||||
id="Line_1_"
|
||||
class="st1"
|
||||
d="m -2.5,21.5 7.1,7.1"
|
||||
style="fill:none;stroke:#454545;stroke-width:2;stroke-linecap:round;stroke-opacity:1"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB |
|
|
@ -1,3 +0,0 @@
|
|||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4684 2.04056C11.8589 1.65003 11.8589 1.01687 11.4684 0.626342C11.0779 0.235818 10.4447 0.235818 10.0542 0.626342L6.04718 4.63333L1.81137 0.397522C1.42084 0.00699783 0.78768 0.00699781 0.397156 0.397522C0.0066314 0.788046 0.00663096 1.42121 0.397155 1.81174L4.63297 6.04755L0.62608 10.0544C0.235557 10.445 0.235556 11.0781 0.626081 11.4686C1.0166 11.8592 1.64977 11.8592 2.04029 11.4686L6.04718 7.46176L9.82525 11.2398C10.2158 11.6303 10.8489 11.6303 11.2395 11.2398C11.63 10.8493 11.63 10.2161 11.2395 9.82561L7.46139 6.04755L11.4684 2.04056Z" fill="#A9B2BC"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 717 B |
Loading…
Add table
Add a link
Reference in a new issue