CSS improvements (#994)

* Update button styling
* Add Travis test to check for outdated CSS files
This will only fail if the SCSS is updated and CSS is re-built.

.travis.yml

@@ -26,6 +26,7 @@ before_install:
 - sh -e /etc/init.d/xvfb start
 script:
 - npm run travis
+- npm run build:css && test -z "$(git status --porcelain lib/plugins/html/assets/css/index.css)"
 - bin/sitespeed.js -b firefox -n 2 http://www.browsertime.net
 - bin/sitespeed.js -b chrome -n 2 https://www.sitespeed.io
 - bin/sitespeed.js -b chrome -n 2 https://www.sitespeed.io --webpagetest.key $WPTKEY

lib/plugins/html/assets/css/index.css

@@ -784,7 +784,7 @@ pre > code {
   color: #ffffff;
   background-color: #0095d2;
   border-color: #0095d2; }
-  .button--primary:hover .button--primary:focus {
+  .button--primary:hover, .button--primary:focus, .button--primary:active {
     color: #ffffff;
     background-color: #0087be;
     border-color: #0087be; }
@@ -946,13 +946,13 @@ ul.menu {
   text-transform: uppercase; }
 
 .errors {
-  margin-bottom: 2em;
+  margin-bottom: 1.333em;
   background: lightpink; }
 
 /* Large */
 .large {
-  font-size: 2rem;
-  line-height: 2rem; }
+  font-size: 1.333rem;
+  line-height: 1.333rem; }
 
 .hidden-small {
   display: inline; }

lib/plugins/html/src/sass/components/buttons.scss

@@ -31,8 +31,9 @@
   background-color: $color--blue;
   border-color: $color--blue;
 
-  &:hover
-  &:focus {
+  &:hover,
+  &:focus,
+  &:active {
     color: $color--white;
     background-color: darken($color--blue, 4%);
     border-color: darken($color--blue, 4%);

lib/plugins/html/src/sass/components/misc.scss

@@ -36,15 +36,15 @@ ul.menu {
 }
 
 .errors {
-  margin-bottom: 2em;
+  margin-bottom: 1.333em;
   background: lightpink;
 }
 
 /* Large */
 
 .large {
-  font-size: 2rem;
-  line-height: 2rem;
+  font-size: 1.333rem;
+  line-height: 1.333rem;
 }
 
 .hidden-small {

lib/plugins/html/templates/url/coach/index.jade

@@ -3,7 +3,7 @@ include ../../_tableMixins
 mixin adviceInfo(name, perfectScore, node)
   h3 #{name} (#{node.score})
   if node.score < 100
-    button.hidden-small.button-primary(onclick='toggleRow(this);') Show/hide details
+    button.hidden-small.button.button--primary(onclick='toggleRow(this);') Show/hide details
     .responsive
       table
         thead

lib/plugins/html/templates/url/run.jade

@@ -35,4 +35,4 @@ block content
       include ./webpagetest/run.jade
 
     .index-link
-      a.button.button-primary(href=urlLink) Back to summary
+      a.button.button--primary(href=urlLink) Back to summary