PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Merge pull request #5605 from vector-im/rxl881/invertOutlineColour

Browse source 
TintableSvgButton styling
This commit is contained in:
Richard Lewis 2017-11-15 18:35:09 +00:00 committed by GitHub
commit 53a793b8fd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/skins/vector/css/_common.scss
View file

@ -332,3 +332,30 @@ textarea {
border: 1px solid gray;
background-color: darkred;
}
.mx_TintableSvgButton {
position: relative;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}
.mx_TintableSvgButton object {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
.mx_TintableSvgButton span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
cursor: pointer;
}

10
src/skins/vector/img/cancel_green.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
<title>Slice 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="#76CFA6" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

17
src/skins/vector/img/icon-delete-pink.svg
View file

@ -1,10 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
width="512px" height="533px" viewBox="0 -11.5 512 533" xml:space="preserve">
<g>
<path fill="#FF0064" d="M85.633,454.889c0,31.168,25.553,56.661,56.79,56.661h227.156c31.234,0,56.787-25.493,56.787-56.661
V128.225H85.633V454.889z M468.958,43.042H362.479L326.828,0.45H185.173l-35.652,42.591H43.042v42.592h425.916V43.042z"/>
<g>
<path fill="#FF0064" d="M142.423,517.05c-34.347,0-62.29-27.886-62.29-62.161V128.225c0-3.038,2.462-5.5,5.5-5.5h340.733
c3.037,0,5.5,2.462,5.5,5.5v326.664c0,34.275-27.942,62.161-62.287,62.161H142.423z M43.042,91.133c-3.038,0-5.5-2.462-5.5-5.5
V43.041c0-3.038,2.462-5.5,5.5-5.5h103.91L180.956-3.08c1.045-1.249,2.589-1.97,4.217-1.97h141.655
c1.628,0,3.173,0.721,4.218,1.97l34.001,40.622h103.911c3.037,0,5.5,2.462,5.5,5.5v42.591c0,3.038-2.463,5.5-5.5,5.5H43.042z"/>
<path fill="#000000" d="M326.828,0.45l35.65,42.592h106.479v42.591H43.042V43.041h106.479L185.173,0.45H326.828 M426.366,128.225
v326.664c0,31.168-25.553,56.661-56.787,56.661H142.423c-31.237,0-56.79-25.493-56.79-56.661V128.225H426.366 M326.828-10.55
H185.173c-3.256,0-6.345,1.442-8.435,3.939l-32.354,38.651H43.042c-6.075,0-11,4.925-11,11v42.592c0,6.075,4.925,11,11,11h425.916
c6.075,0,11-4.925,11-11V43.042c0-6.075-4.925-11-11-11H367.616L335.264-6.61C333.173-9.107,330.084-10.55,326.828-10.55
L326.828-10.55z M426.366,117.225H85.633c-6.075,0-11,4.925-11,11v326.664c0,37.309,30.411,67.661,67.79,67.661h227.156
c37.378,0,67.787-30.353,67.787-67.661V128.225C437.366,122.15,432.441,117.225,426.366,117.225L426.366,117.225z"/>
</g>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 738 B

After

Width:  |  Height:  |  Size: 1.6 KiB