Merge pull request #23 from umaar/dom-and-styles-svg-icons

DOM and Styles - use SVG for the animation icons instead of icon fonts

docs/dom-and-styles-files/fonts/packed-images.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2012 by original authors @ fontello.com</metadata>
-<defs>
-<font id="packed-images" horiz-adv-x="1000" >
-<font-face font-family="packed-images" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
-<missing-glyph horiz-adv-x="1000" />
-<glyph glyph-name="stop-circled" unicode="&#xe803;" d="M0 350q0 207 146 353t353 146 353-146 146-353-146-353-353-146-353 146-146 353z m250-250l500 0 0 500-500 0 0-500z" horiz-adv-x="1000" />
-<glyph glyph-name="stop" unicode="&#xe802;" d="M0-25l0 750 750 0 0-750-750 0z" horiz-adv-x="750" />
-<glyph glyph-name="play-circled2" unicode="&#xe801;" d="M0 350q0 207 146 353t353 146 353-146 146-353-146-353-353-146-353 146-146 353z m115 0q0-158 113-271t271-113 271 113 113 271-113 271-271 113-271-113-113-271z m260-250l0 500 375-250z" horiz-adv-x="1000" />
-<glyph glyph-name="play-circled" unicode="&#xe800;" d="M0 350q0 207 146 353t353 146 353-146 146-353-146-353-353-146-353 146-146 353z m375-250l375 250-375 250 0-500z" horiz-adv-x="1000" />
-<glyph glyph-name="pause-circled" unicode="&#xe805;" d="M0 350q0 207 146 353t353 146 353-146 146-353-146-353-353-146-353 146-146 353z m275-260l152 0 0 519-152 0 0-519z m297 0l152 0 0 519-152 0 0-519z" horiz-adv-x="1000" />
-<glyph glyph-name="pause" unicode="&#xe804;" d="M0-25l0 750 312 0 0-750-312 0z m437 0l0 750 312 0 0-750-312 0z" horiz-adv-x="750" />
-</font>
-</defs>
-</svg>

docs/dom-and-styles-files/images/pause-icon.svg

@@ -0,0 +1,14 @@
+<svg
+   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"
+   id="pause-icon"
+   version="1.1"
+   height="50"
+   width="50"
+   viewBox="0 0 1200 1200">
+  <path
+     d="M 600,0 C 268.62914,0 0,268.62914 0,600 c 0,331.37086 268.62914,600 600,600 331.37086,0 600,-268.62914 600,-600 C 1200,268.62914 931.37086,0 600,0 z m -269.16515,289.38 181.71397,0 0,621.24 -181.71397,0 0,-621.24 z m 356.61633,0 181.71399,0 0,621.24 -181.71399,0 0,-621.24 z" />
+</svg>

docs/dom-and-styles-files/images/play-icon.svg

@@ -0,0 +1,15 @@
+<svg
+   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"
+   id="play-icon"
+   version="1.1"
+   height="50"
+   width="50"
+   viewBox="0 0 1200 1200">
+  <path
+     d="M 600,1200 C 268.65,1200 0,931.35 0,600 0,268.65 268.65,0 600,0 c 331.35,0 600,268.65 600,600 0,331.35 -268.65,600 -600,600 z M 450,300.45 450,899.55 900,600 450,300.45 z"
+     id="path16995" />
+</svg>

docs/dom-and-styles.md

@@ -3,55 +3,6 @@ Book: /chrome-developer-tools/_book.yaml
 
 <style>
 
-@font-face {
- font-family: 'packed-images';
- src: url('dom-and-styles-files/fonts/packed-images.eot?20695900');
- src: url('dom-and-styles-files/fonts/packed-images.eot?20695900#iefix') format('embedded-opentype'),
-      url('dom-and-styles-files/fonts/packed-images.woff?20695900') format('woff'),
-      url('dom-and-styles-files/fonts/packed-images.ttf?20695900') format('truetype'),
-      url('dom-and-styles-files/fonts/packed-images.svg?20695900#packed-images') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
-[class^="devtools-animation-icon-"]:before, [class*=" devtools-animation-icon-"]:before {
- font-family: "packed-images";
- font-style: normal;
- font-weight: normal;
- speak: none;
-
- display: inline-block;
- text-decoration: inherit;
- width: 1em;
- margin-right: .2em;
- text-align: center;
- /* opacity: .8; */
-
- /* For safety - reset parent styles, that can break glyph codes*/
- font-variant: normal;
- text-transform: none;
-
- /* fix buttons height, for twitter bootstrap */
- line-height: 1em;
-
- /* Animation center compensation - margins should be symmetric */
- /* remove if not needed */
- margin-left: .2em;
-
- /* you can be more comfortable with increased icons size */
- /* font-size: 120%; */
-
- /* Uncomment for 3D effect */
- /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
-}
-
-.devtools-animation-icon-stop-circled:before { content: '\e803'; } /* '' */
-.devtools-animation-icon-stop:before { content: '\e802'; } /* '' */
-.devtools-animation-icon-play-circled2:before { content: '\e801'; } /* '' */
-.devtools-animation-icon-play-circled:before { content: '\e800'; } /* '' */
-.devtools-animation-icon-pause-circled:before { content: '\e805'; } /* '' */
-.devtools-animation-icon-pause:before { content: '\e804'; } /* '' */
-
 .animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:300ms;-moz-animation-duration:300ms;-ms-animation-duration:300ms;-o-animation-duration:300ms;animation-duration:300ms;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes bounceIn {
 	0% {
 		opacity: 0;
@@ -237,15 +188,21 @@ Book: /chrome-developer-tools/_book.yaml
 
 .devtools-animation-icon {
 	position: absolute;
-	top: 0;
-	font-size: 50px;
+	top: 44%;
 	right: 44%;
 	cursor: pointer;
 	color: #4D4D4D;
+	height: 50px;
+	width: 50px;
+	display: none;
 }
 
-.devtools-animation-icon {
-	display: none;
+.devtools-animation-icon-pause-circled {
+ background: url('dom-and-styles-files/images/pause-icon.svg');
+}
+
+.devtools-animation-icon-play-circled {
+ background: url('dom-and-styles-files/images/play-icon.svg');
 }
 
 </style>