Merge pull request #3272 from hypothesis/remove-compass-mixins

Remove compass-mixins dependency

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",