Remove compass-mixins dependency

The immediate problem this dependency causes is that it it fails to
build with the current version of node-sass (see
https://github.com/Igosuki/compass-mixins/issues/84) which in turn means
that H cannot be built with Node 6.0. Removing this dependency allows
the node-sass dependency to be unpinned so that the current version
can be used.

The primary functionality that compass-mixins was used for was vendor
prefixing, which is now taken care of by autoprefixer, plus CSS fixes
for browsers which we no longer support (IE < 10).

For the remaining handful of mixins for resets and color mixing which we
are still using, this commit just extracts the few lines of code for
each from the compass documentation and includes it directly in our SCSS
files.

gulpfile.js

@@ -181,7 +181,6 @@ gulp.task('build-css', function () {
 
   var sassOpts = {
     outputStyle: IS_PRODUCTION_BUILD ? 'compressed' : 'nested',
-    includePaths: ['node_modules/compass-mixins/lib/'],
   };
 
   var cssURLRewriter = postcssURL({

h/static/scripts/annotator/host.coffee

@@ -18,6 +18,7 @@ module.exports = class Host extends Guest
     .attr('allowfullscreen', '')
     .attr('seamless', '')
     .attr('src', options.app)
+    .addClass('h-sidebar-iframe')
 
     @frame = $('<div></div>')
     .css('display', 'none')

h/static/styles/annotator/adder.scss

@@ -45,7 +45,7 @@
 }
 
 .annotator-adder-actions__button {
-  @include box-shadow(none);
+  box-shadow: none;
   font-family: h;
   font-size: 18px;
   background: transparent !important;

h/static/styles/annotator/inject.scss

@@ -42,8 +42,8 @@ $base-font-size: 14px;
 
   // frame styles
   @import './bucket-bar';
-  @include user-select(none);
   @include noise-background;
+  user-select: none;
   direction: ltr;
   background: none;
   font-size: $base-font-size;
@@ -67,7 +67,8 @@ $base-font-size: 14px;
     width: initial;
   }
 
-  & > iframe {
+  .h-sidebar-iframe {
+    border: none;
     height: 100%;
     width: 100%;
     z-index: 3;
@@ -98,8 +99,8 @@ $base-font-size: 14px;
 
     ul, li {
       box-sizing: border-box;
+      list-style: none;
       @include reset-box-model;
-      @include reset-list-style;
     }
   }
 
@@ -129,7 +130,7 @@ $base-font-size: 14px;
   }
 
   .annotator-frame-button--sidebar_toggle {
-    @include box-shadow(none);
+    box-shadow: none;
     border-radius: 0px;
     border-style: none none solid solid;
     padding-right: 6px;

h/static/styles/app.scss

-@import 'compass';
-
 $base-font-size: 12px;
 $base-line-height: 20px;
 

h/static/styles/base.scss

-@import 'compass/css3';
-@import 'compass/reset/utilities';
-
 @import "./variables";
 @import "./util";
 

h/static/styles/common.scss

-@import 'compass/layout/stretching';
-@import 'compass/typography/text/force-wrap';
-
 @import './base';
 @import './forms';
 @import './grid';
@@ -55,7 +52,7 @@ html {
 
 //Candidate for cleanup
 .btn-link {
-  @include box-shadow(none);
+  box-shadow: none;
   @include reset-box-model;
   background: none;
   background-color: transparent;
@@ -191,7 +188,7 @@ html {
   // These psuedo-elements add the speech bubble tail / triangle.
   &:before, &:after {
     // http://www.red-team-design.com/css-diagonal-borders-still-not-rendering-properly-on-firefox
-    @include scale(.9999);
+    transform: scale(.9999);
     border-color: rgba(0, 0, 0, 0);
 
     border-style: solid;

h/static/styles/forms.scss

 // Common form styles.
 @import "mixins/forms";
-@import "compass/css3/images";
-@import "compass/utilities/general/clearfix";
 
 .form-field {
   @include pie-clearfix;
@@ -13,6 +11,7 @@
   position: relative;
   text-transform: uppercase;
   font-weight: bold;
+  font-size: 1em;
   margin-top: 1.5em;
   margin-bottom: 1.5em;
 
@@ -229,20 +228,20 @@
 }
 
 .btn-danger {
-  @include background(linear-gradient(to bottom, $error-color, shade($error-color, 5%)));
+  background: linear-gradient(to bottom, $error-color, shade($error-color, 5%));
   color: white;
   border-color: shade($error-color, 15%);
   text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
 
   &:focus, &:hover, &:active, &.js-hover, &.js-focus, &.js-active {
-    @include box-shadow(0 1px 0 rgba(0, 0, 0, .05));
+    box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
     color: white;
     background: tint($error-color, 5%);
     border-color: $error-color;
   }
 
   &:active, &.js-active {
-    @include box-shadow(inset 0 1px 0 rgba(0, 0, 0, .3));
+    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .3);
     color: white;
     background: shade($error-color, 10%);
     border-color: shade($error-color, 30%);
@@ -254,7 +253,7 @@
 
   &, &:focus, &:hover, &:active, &[disabled],
   &.js-hover, &.js-focus, &.js-active, &.js-disabled {
-    @include box-shadow(none);
+    box-shadow: none;
     background: none;
   }
 
@@ -322,7 +321,7 @@
 }
 
 [status-button-state] .btn-message-text {
-  @include transition(opacity .2s .6s ease-in);
+  transition: opacity .2s .6s ease-in;
   opacity: 0;
 }
 
@@ -331,12 +330,12 @@
 }
 
 [status-button-state] .btn-message-success .btn-message-icon {
-  @include transform(scale(0));
+  transform: scale(0);
 }
 
 [status-button-state=success] .btn-message-success .btn-message-icon {
-  @include transition(transform .15s 0 cubic-bezier(0, 1.8, 1, 1.8));
-  @include transform(scale(1));
+  transition: transform .15s 0 cubic-bezier(0, 1.8, 1, 1.8);
+  transform: scale(1);
 }
 
 // TODO: Move into seperate module stylesheet.

h/static/styles/help-page.scss

-@import 'compass';
-
 $base-font-size: 16px;
 $base-line-height: 22px;
 

h/static/styles/mixins/forms.scss

 @import "../base";
 
+// See http://compass-style.org/reference/compass/utilities/general/clearfix/#mixin-pie-clearfix
+@mixin pie-clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
+
 @mixin focus-outline {
   border-color: #51A7E8;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, .075) inset, 0px 0px 5px rgba(81, 167, 232, .5);
@@ -36,7 +45,7 @@
 }
 
 @mixin btn {
-  @include box-shadow(0 1px 0 rgba(0, 0, 0, .15));
+  box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
 
   background: linear-gradient($button-background-gradient);
   display: inline-block;
@@ -49,7 +58,7 @@
 }
 
 @mixin btn-hover {
-  @include box-shadow(0 1px 0 rgba(0, 0, 0, .05));
+  box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
   outline: none;
   color: $button-text-color;
   background: $button-background-start;
@@ -57,16 +66,27 @@
 }
 
 @mixin btn-active {
-  @include box-shadow(inset 0 1px 0 rgba(0, 0, 0, .1));
+  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1);
   background: $button-background-end;
   color: #424242;
   border-color: #bababa;
 }
 
 @mixin btn-disabled {
-  @include box-shadow(none);
+  box-shadow: none;
   cursor: default;
   background: #F0F0F0;
   border-color: #CECECE;
   color: $gray-light;
 }
+
+// Tint and shade functions from
+// https://css-tricks.com/snippets/sass/tint-shade-functions
+@function tint($color, $percent){
+  @return mix(white, $color, $percent);
+}
+
+@function shade($color, $percent){
+  @return mix(black, $color, $percent);
+}
+

h/static/styles/mixins/grid.scss

-@import "compass/utilities/general/clearfix";
-
 // Mixins for working with grids. A grid consists of an outer grid container
 // and internal columns. Each column has a gutter defined by $grid-gutter.
 // The implementation is largely based on the grid system created by

h/static/styles/mixins/reset.scss

+@mixin reset-font {
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+@mixin reset-box-model {
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+// Adapted from http://compass-style.org/reference/compass/reset/utilities/#mixin-nested-reset
+@mixin nested-reset {
+  div, span, applet, object, iframe,
+  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+  a, abbr, acronym, address, big, cite, code,
+  del, dfn, em, img, ins, kbd, q, s, samp,
+  small, strike, strong, sub, sup, tt, var,
+  b, u, i, center,
+  dl, dt, dd, ol, ul, li,
+  fieldset, form, label, legend,
+  table, caption, tbody, tfoot, thead, tr, th, td,
+  article, aside, canvas, details, embed,
+  figure, figcaption, footer, header, hgroup,
+  menu, nav, output, ruby, section, summary,
+  time, mark, audio, video {
+    @include reset-box-model;
+    @include reset-font;
+  }
+}
+

h/static/styles/reset.scss

-@import 'compass/reset';
+@import './mixins/reset';
 
 /*
   Consistency fixes
@@ -14,7 +14,11 @@ html {
   text-size-adjust: 100%;
 }
 
-body { min-height: 100%; font-size: 100%; }
+body {
+  min-height: 100%;
+  font-size: 100%;
+  margin: 0;
+}
 
 sub, sup {
   font-size: 75%;
@@ -59,6 +63,16 @@ img::-moz-selection {
   background: transparent;
 }
 
+ul, li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+blockquote {
+  margin: 0;
+}
+
 // Custom elements
 markdown {
   display: block;

h/static/styles/simple-search.scss

@@ -10,7 +10,7 @@
 }
 
 .simple-search-icon {
-  @include order(0);
+  order: 0;
 }
 
 :not(:focus) ~ .simple-search-icon {

h/static/styles/spinner.scss

@@ -6,15 +6,13 @@
 //   <!-- Three nested spans -->
 //   <span class="spinner"><span><span></span></span></span>
 
-@import 'compass/css3/_animation';
-
 $container-width: 1em;
 $container-height: $container-width;
 $part-width: .1em;
 $part-height: 3 * $part-width;
 
-@include keyframes(spin) {
-  to { @include transform(rotate(1turn)); }
+@keyframes(spin) {
+  to { transform: rotate(1turn); }
 }
 
 .spinner {
@@ -24,7 +22,7 @@ $part-height: 3 * $part-width;
   height: $container-width;
   text-indent: 999em;
   overflow: hidden;
-  @include animation(spin 1.25s infinite steps(12));
+  animation: spin 1.25s infinite steps(12);
 }
 
 .spinner:before,
@@ -41,8 +39,8 @@ $part-height: 3 * $part-width;
   height: $part-height;
   border-radius: 0.1em;
   background: #eee;
-  @include box-shadow(0 ($container-height - $part-height) rgba(0, 0, 0, 0.15));
-  @include transform-origin(50%, $container-height / 2);
+  box-shadow: 0 ($container-height - $part-height) rgba(0, 0, 0, 0.15);
+  transform-origin: 50% $container-height / 2;
 }
 
 .spinner:before {
@@ -50,26 +48,26 @@ $part-height: 3 * $part-width;
 }
 
 .spinner:after {
-  @include transform(rotate(-30deg));
+  transform: rotate(-30deg);
   background: rgba(0, 0, 0, 0.6);
 }
 
 .spinner > span:before {
-  @include transform(rotate(-60deg));
+  transform: rotate(-60deg);
   background: rgba(0, 0, 0, 0.5);
 }
 
 .spinner > span:after {
-  @include transform(rotate(-90deg));
+  transform: rotate(-90deg);
   background: rgba(0, 0, 0, 0.4);
 }
 
 .spinner > span > span:before {
-    @include transform(rotate(-120deg));
+    transform: rotate(-120deg);
     background: rgba(0, 0, 0, 0.3);
 }
 
 .spinner > span > span:after {
-    @include transform(rotate(-150deg));
+    transform: rotate(-150deg);
     background: rgba(0, 0, 0, 0.2);
 }

package.json

@@ -22,7 +22,6 @@
     "classnames": "^2.2.4",
     "coffeeify": "^1.0.0",
     "commander": "^2.9.0",
-    "compass-mixins": "^0.12.7",
     "core-js": "^1.2.5",
     "diff-match-patch": "^1.0.0",
     "document-base-uri": "^1.0.0",
@@ -50,7 +49,6 @@
     "lodash.debounce": "^4.0.3",
     "mkdirp": "^0.5.1",
     "ng-tags-input": "2.2.0",
-    "node-sass": "~3.4.1",
     "node-uuid": "^1.4.3",
     "postcss": "^5.0.6",
     "postcss-url": "^5.1.1",