Added width of the pause/resume btn so its always the same

nem035 · nem035 · commit d68e211f9cb9 · 2016-06-04T00:13:03.000-04:00
diff --git a/css/stylesheet.css b/css/stylesheet.css
@@ -107,7 +107,7 @@ nav h3 {
     display: none;
 }
 
-.buttons {
+.top-menu-buttons {
     float: right;
     height: 100%;
 }
@@ -501,11 +501,11 @@ input[type=number]::-webkit-outer-spin-button {
     font-weight: bold;
 }
 
-.buttons button.active {
+.top-menu-buttons button.active {
     font-weight: bold;
 }
 
-.buttons button.active .fa {
+.top-menu-buttons button.active .fa {
     color: #00e676;
 }
 
@@ -521,3 +521,15 @@ button[disabled] {
   cursor: not-allowed;
   opacity: 0.6;
 }
+
+#btn_pause {
+  width: 86px;
+}
+
+.top-menu-buttons button.active {
+  box-shadow: 0px 0px 3px 0px black inset;
+}
+
+.top-menu-buttons button:active {
+  box-shadow: 0px 0px 3px 0px black inset;
+}
diff --git a/index.html b/index.html
@@ -31,7 +31,7 @@ <h3>
             <i class="fa fa-caret-up nav-dropdown" aria-hidden="true"></i>
         </h3>
     </button>
-        <div class="buttons">
+        <div class="top-menu-buttons">
             <div class="btn" id="btn_share">
                 <div class="wrapper">
                     <i class="fa fa-share" aria-hidden="true"></i> Share <input type="text" class="collapse" id="shared">
diff --git a/public/algorithm_visualizer.css b/public/algorithm_visualizer.css
@@ -224,7 +224,7 @@ nav h3 {
     display: none;
 }
 
-.buttons {
+.top-menu-buttons {
     float: right;
     height: 100%;
 }
@@ -630,11 +630,11 @@ input[type=number]::-webkit-outer-spin-button {
     font-weight: bold;
 }
 
-.buttons button.active {
+.top-menu-buttons button.active {
     font-weight: bold;
 }
 
-.buttons button.active .fa {
+.top-menu-buttons button.active .fa {
     color: #00e676;
 }
 
@@ -650,3 +650,15 @@ button[disabled] {
   cursor: not-allowed;
   opacity: 0.6;
 }
+
+#btn_pause {
+  width: 86px;
+}
+
+.top-menu-buttons button.active {
+  box-shadow: 0px 0px 3px 0px black inset;
+}
+
+.top-menu-buttons button:active {
+  box-shadow: 0px 0px 3px 0px black inset;
+}
diff --git a/public/algorithm_visualizer.min.css b/public/algorithm_visualizer.min.css

Original file line number	Diff line number	Diff line change
`@@ -107,7 +107,7 @@ nav h3 {`
`107`	`107`	`display: none;`
`108`	`108`	`}`
`109`	`109`
`110`		`-.buttons {`
	`110`	`+.top-menu-buttons {`
`111`	`111`	`float: right;`
`112`	`112`	`height: 100%;`
`113`	`113`	`}`
`@@ -501,11 +501,11 @@ input[type=number]::-webkit-outer-spin-button {`
`501`	`501`	`font-weight: bold;`
`502`	`502`	`}`
`503`	`503`
`504`		`-.buttons button.active {`
	`504`	`+.top-menu-buttons button.active {`
`505`	`505`	`font-weight: bold;`
`506`	`506`	`}`
`507`	`507`
`508`		`-.buttons button.active .fa {`
	`508`	`+.top-menu-buttons button.active .fa {`
`509`	`509`	`color: #00e676;`
`510`	`510`	`}`
`511`	`511`
`@@ -521,3 +521,15 @@ button[disabled] {`
`521`	`521`	`cursor: not-allowed;`
`522`	`522`	`opacity: 0.6;`
`523`	`523`	`}`
	`524`	`+`
	`525`	`+#btn_pause {`
	`526`	`+ width: 86px;`
	`527`	`+}`
	`528`	`+`
	`529`	`+.top-menu-buttons button.active {`
	`530`	`+ box-shadow: 0px 0px 3px 0px black inset;`
	`531`	`+}`
	`532`	`+`
	`533`	`+.top-menu-buttons button:active {`
	`534`	`+ box-shadow: 0px 0px 3px 0px black inset;`
	`535`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -224,7 +224,7 @@ nav h3 {`
`224`	`224`	`display: none;`
`225`	`225`	`}`
`226`	`226`
`227`		`-.buttons {`
	`227`	`+.top-menu-buttons {`
`228`	`228`	`float: right;`
`229`	`229`	`height: 100%;`
`230`	`230`	`}`
`@@ -630,11 +630,11 @@ input[type=number]::-webkit-outer-spin-button {`
`630`	`630`	`font-weight: bold;`
`631`	`631`	`}`
`632`	`632`
`633`		`-.buttons button.active {`
	`633`	`+.top-menu-buttons button.active {`
`634`	`634`	`font-weight: bold;`
`635`	`635`	`}`
`636`	`636`
`637`		`-.buttons button.active .fa {`
	`637`	`+.top-menu-buttons button.active .fa {`
`638`	`638`	`color: #00e676;`
`639`	`639`	`}`
`640`	`640`
`@@ -650,3 +650,15 @@ button[disabled] {`
`650`	`650`	`cursor: not-allowed;`
`651`	`651`	`opacity: 0.6;`
`652`	`652`	`}`
	`653`	`+`
	`654`	`+#btn_pause {`
	`655`	`+ width: 86px;`
	`656`	`+}`
	`657`	`+`
	`658`	`+.top-menu-buttons button.active {`
	`659`	`+ box-shadow: 0px 0px 3px 0px black inset;`
	`660`	`+}`
	`661`	`+`
	`662`	`+.top-menu-buttons button:active {`
	`663`	`+ box-shadow: 0px 0px 3px 0px black inset;`
	`664`	`+}`