michael/pathfinder
michael
/
pathfinder
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change the animated zoom icon to a play icon

This commit is contained in:
Patrick Walton 2017-10-26 18:15:28 -07:00
parent 591e6b780c
commit 77fa297380
3 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
demo/client/css/pathfinder.css
View File

@ -171,6 +171,22 @@ button > svg path {
margin-right: -15px;
}
#pf-zoom-pulse-button {
padding: 16px 30px 16px 14px;
}
/* https://www.h3xed.com/web-development/how-to-make-css-play-pause-icons-with-a-single-div */
#pf-play-icon {
position: absolute;
display: block;
width: 0;
height: 0;
margin: -6px 3px 0;
border-top: 6px solid transparent;
border-left: 12px solid currentColor;
border-bottom: 6px solid transparent;
}
.github-corner {
display: block;
position: absolute;

4
demo/client/html/svg-demo.html.hbs
View File

@ -22,11 +22,11 @@
class="btn btn-outline-secondary pf-toolbar-button">
{{octicon "plus"}}
</button>
</div>
<button id="pf-zoom-pulse-button" type="button" title="Pulse Zoom"
class="btn btn-outline-secondary pf-toolbar-button">
{{octicon "watch"}}
<span id="pf-play-icon"></span>
</button>
</div>
<button id="pf-screenshot-button" type="button"
class="btn btn-outline-secondary pf-toolbar-button">
{{octicon "device-camera"}}

4
demo/client/html/text-demo.html.hbs
View File

@ -21,11 +21,11 @@
class="btn btn-outline-secondary pf-toolbar-button">
{{octicon "plus"}}
</button>
</div>
<button id="pf-zoom-pulse-button" type="button" title="Pulse Zoom"
class="btn btn-outline-secondary pf-toolbar-button">
{{octicon "watch"}}
<span id="pf-play-icon"></span>
</button>
</div>
<button id="pf-screenshot-button" type="button"
class="btn btn-outline-secondary pf-toolbar-button">
{{octicon "device-camera"}}