Merge pull request #1194 from hypothesis/use-prettier-for-sass

Use Prettier to auto-format .scss files

.prettierignore

 **/vendor/*
 .*/**
 build/
+coverage/
 docs/

package.json

@@ -150,8 +150,8 @@
   "scripts": {
     "build": "cross-env NODE_ENV=production gulp build",
     "lint": "eslint .",
-    "checkformatting": "prettier --check '**/*.js'",
-    "format": "prettier --list-different --write '**/*.js'",
+    "checkformatting": "prettier --check '**/*.{js,scss}'",
+    "format": "prettier --list-different --write '**/*.{js,scss}'",
     "test": "gulp test",
     "report-coverage": "codecov -f coverage/coverage-final.json",
     "version": "make clean build/manifest.json",

src/styles/annotator/adder.scss

@@ -3,7 +3,6 @@ $adder-transition-duration: 80ms;
 // Main class for the root element of the "adder" toolbar that appears when the
 // user makes a text selection.
 .annotator-adder {
-
   // Reset all inherited properties to their initial values. This prevents CSS
   // property values from the host page being inherited by elements of the
   // Adder, even when using Shadow DOM.
@@ -18,7 +17,7 @@ $adder-transition-duration: 80ms;
   direction: ltr;
   position: absolute;
   background: $white;
-  border: 1px solid rgba(0,0,0,0.20);
+  border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 4px;
   box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
 
@@ -28,27 +27,41 @@ $adder-transition-duration: 80ms;
 }
 
 @keyframes adder-fade-in {
-  0% { opacity: 0.05; }
-  20% { opacity: 0.7; }
-  100% { opacity: 1.0; }
+  0% {
+    opacity: 0.05;
+  }
+  20% {
+    opacity: 0.7;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes adder-pop-up {
-  from { transform: scale(0.8) translateY(10px); }
-  to { transform: scale(1.0) translateY(0px); }
+  from {
+    transform: scale(0.8) translateY(10px);
+  }
+  to {
+    transform: scale(1) translateY(0px);
+  }
 }
 
 @keyframes adder-pop-down {
-  from { transform: scale(0.8) translateY(-10px); }
-  to { transform: scale(1.0) translateY(0px); }
+  from {
+    transform: scale(0.8) translateY(-10px);
+  }
+  to {
+    transform: scale(1) translateY(0px);
+  }
 }
 
 @mixin adder-arrow($rotation) {
   transform: rotate($rotation);
   background: $white;
-  border-bottom: 1px solid rgba(0,0,0,0.20);
-  border-right: 1px solid rgba(0,0,0,0.20);
-  content: "";
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+  content: '';
   display: block;
   height: 6px;
   left: 0;

src/styles/annotator/annotator.scss

@@ -98,7 +98,8 @@ $base-font-size: 14px;
       height: 100%;
     }
 
-    ul, li {
+    ul,
+    li {
       box-sizing: border-box;
       list-style: none;
       @include reset-box-model;
@@ -106,7 +107,7 @@ $base-font-size: 14px;
   }
 
   .annotator-frame-button {
-    transition: background-color .25s .25s;
+    transition: background-color 0.25s 0.25s;
     @include smallshadow;
     background: $white;
     border: solid 1px $gray-lighter;
@@ -120,11 +121,12 @@ $base-font-size: 14px;
     margin-bottom: 5px;
 
     &:active {
-      transition: background-color .25s;
+      transition: background-color 0.25s;
       background-color: $gray-light;
     }
 
-    &:focus, &:hover {
+    &:focus,
+    &:hover {
       outline: 0;
       color: $text-color;
     }
@@ -202,7 +204,7 @@ $base-font-size: 14px;
 
 @media screen and (min-width: 37.5em) {
   .annotator-frame {
-    transition: margin-left .15s cubic-bezier(.55, 0, .2, .8);
+    transition: margin-left 0.15s cubic-bezier(0.55, 0, 0.2, 0.8);
     width: 428px;
     margin-left: -428px;
   }

src/styles/annotator/bucket-bar.scss

@@ -37,7 +37,8 @@
     margin: 0 auto;
   }
 
-  &:before, &:after {
+  &:before,
+  &:after {
     content: '';
     right: 100%;
     top: 50%;
@@ -61,11 +62,13 @@
     margin-top: -7px;
   }
 
-  &.lower, &.upper {
+  &.lower,
+  &.upper {
     @include smallshadow;
     z-index: 1;
 
-    &:before, &:after {
+    &:before,
+    &:after {
       left: 50%;
       bottom: 100%;
       right: auto;
@@ -77,7 +80,8 @@
   &.upper {
     border-radius: 2px 2px 4px 4px;
 
-    &:before, &:after {
+    &:before,
+    &:after {
       top: auto;
       bottom: 100%;
     }
@@ -98,7 +102,8 @@
   &.lower {
     border-radius: 4px 4px 2px 2px;
 
-    &:before, &:after {
+    &:before,
+    &:after {
       bottom: auto;
       top: 100%;
     }

src/styles/annotator/pdfjs-overrides.scss

-@import "../variables";
+@import '../variables';
 
 // In order for our highlights to be visible we need to use solid colors.
 #viewer.has-transparent-text-layer .textLayer {
   opacity: 1;
-  ::selection { background: rgba(0, 0, 255, .2); }
-  ::-moz-selection { background: rgba(0 , 0 , 255, .2); }
+  ::selection {
+    background: rgba(0, 0, 255, 0.2);
+  }
+  ::-moz-selection {
+    background: rgba(0, 0, 255, 0.2);
+  }
 }
 
 // When using search funcionality of PDF.js the matches should highlight the content but not cover it. Fix for #648

src/styles/base.scss

-@import "./variables";
-@import "./util";
+@import './variables';
+@import './util';
 
 /* Style input placeholders */
 @mixin placeholder {
-  &.placeholder { @content; }
-  &:placeholder { @content; }
-  &::placeholder { @content; }
+  &.placeholder {
+    @content;
+  }
+  &:placeholder {
+    @content;
+  }
+  &::placeholder {
+    @content;
+  }
 }
 
 /* Shadow mixins */
-@mixin smallshadow($a: 0, $b: 1px, $c: .1) {
+@mixin smallshadow($a: 0, $b: 1px, $c: 0.1) {
   box-shadow: $a $b 1px hsla(0, 0%, 0%, $c);
 }
 

src/styles/forms.scss

 // Common form styles.
-@import "mixins/forms";
+@import 'mixins/forms';
 
 .form-field {
   @include pie-clearfix;
   clear: both;
-  margin-bottom: .75em;
+  margin-bottom: 0.75em;
 }
 
 .form-description {
@@ -20,13 +20,14 @@
 .form-label {
   cursor: pointer;
   font-weight: bold;
-  margin-bottom: .4em;
+  margin-bottom: 0.4em;
 }
 
 .form-input {
   @include form-input;
 
-  &:focus, &.js-focus {
+  &:focus,
+  &.js-focus {
     @include form-input-focus;
   }
 }
@@ -39,7 +40,9 @@
 
 .form-field-error {
   .form-input {
-    &, &:focus, &.js-focus {
+    &,
+    &:focus,
+    &.js-focus {
       @include form-input-error;
     }
   }
@@ -53,13 +56,13 @@
   position: relative;
   display: none;
   background: $error-color;
-  margin-top: .75em;
-  padding: .25em .75em;
+  margin-top: 0.75em;
+  padding: 0.25em 0.75em;
   float: left;
   border-radius: 2px;
 
   .form-error {
-    font-size: .833em;
+    font-size: 0.833em;
     color: white;
   }
 
@@ -67,7 +70,7 @@
     bottom: 100%;
     left: 50%;
     border: solid transparent;
-    content: " ";
+    content: ' ';
     height: 0;
     width: 0;
     position: absolute;
@@ -85,11 +88,11 @@
 
 .form-actions {
   @include pie-clearfix;
-  margin-top: .75em;
+  margin-top: 0.75em;
 }
 
 .form-actions-message {
-  font-size: .833em;
+  font-size: 0.833em;
   float: left;
   margin-top: 1em;
 }
@@ -99,7 +102,7 @@
   float: right;
 
   > * {
-    margin-left: .75em;
+    margin-left: 0.75em;
     &:first-child {
       margin-left: 0;
     }
@@ -109,20 +112,27 @@
 .btn {
   @include btn;
 
-  &:hover, &:focus, &:active,
-  &.js-hover, &.js-focus, &.js-active {
+  &:hover,
+  &:focus,
+  &:active,
+  &.js-hover,
+  &.js-focus,
+  &.js-active {
     @include btn-hover;
   }
 
-  &:focus, &.js-focus {
+  &:focus,
+  &.js-focus {
     @include focus-outline;
   }
 
-  &:active, &.js-active {
+  &:active,
+  &.js-active {
     @include btn-active;
   }
 
-  &[disabled], &.js-disabled {
+  &[disabled],
+  &.js-disabled {
     @include btn-disabled;
   }
 }
@@ -130,21 +140,35 @@
 .btn-clean {
   border: none;
 
-  &, &:focus, &:hover, &:active, &[disabled],
-  &.js-hover, &.js-focus, &.js-active, &.js-disabled {
+  &,
+  &:focus,
+  &:hover,
+  &:active,
+  &[disabled],
+  &.js-hover,
+  &.js-focus,
+  &.js-active,
+  &.js-disabled {
     box-shadow: none;
     background: none;
   }
 
-  &:focus, &:hover, &:active, &.js-hover, &.js-focus, &.js-active {
+  &:focus,
+  &:hover,
+  &:active,
+  &.js-hover,
+  &.js-focus,
+  &.js-active {
     color: $link-color;
   }
 
-  &:active, &.js-active {
+  &:active,
+  &.js-active {
     color: $link-color-hover;
   }
 
-  &[disabled], &.js-disabled {
+  &[disabled],
+  &.js-disabled {
     color: $text-color;
   }
 }
@@ -162,7 +186,7 @@
 .btn-message {
   font-style: italic;
   color: $gray-light;
-  margin-right: .5em;
+  margin-right: 0.5em;
   position: absolute;
   right: 100%;
   top: 0;
@@ -173,7 +197,7 @@
   display: inline-block;
   background: $success-color;
   border-radius: 50%;
-  color: #FFF;
+  color: #fff;
   padding: 2px;
 }
 
@@ -192,19 +216,19 @@
   right: auto;
 }
 
-[status-button-state=success] .btn-message-success,
-[status-button-state=loading] .btn-message-loading {
+[status-button-state='success'] .btn-message-success,
+[status-button-state='loading'] .btn-message-loading {
   left: auto;
   top: 0;
   right: 100%;
 }
 
 [status-button-state] .btn-message-text {
-  transition: opacity .2s .6s ease-in;
+  transition: opacity 0.2s 0.6s ease-in;
   opacity: 0;
 }
 
-[status-button-state=success] .btn-message-success .btn-message-text {
+[status-button-state='success'] .btn-message-success .btn-message-text {
   opacity: 1;
 }
 
@@ -212,7 +236,7 @@
   transform: scale(0);
 }
 
-[status-button-state=success] .btn-message-success .btn-message-icon {
-  transition: transform .15s 0 cubic-bezier(0, 1.8, 1, 1.8);
+[status-button-state='success'] .btn-message-success .btn-message-icon {
+  transition: transform 0.15s 0 cubic-bezier(0, 1.8, 1, 1.8);
   transform: scale(1);
 }

src/styles/mixins/icons.scss

@@ -11,7 +11,8 @@
 //    }
 //  }
 @mixin icons {
-  [class^="h-icon-"], [class*=" h-icon-"] {
+  [class^='h-icon-'],
+  [class*=' h-icon-'] {
     @content;
   }
 }

src/styles/mixins/reset.scss

@@ -12,21 +12,86 @@
 
 // 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 {
+  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;
   }
 }
-

src/styles/mixins/responsive.scss

@@ -6,30 +6,42 @@ $break-desktop: 1024px !default;
 @mixin respond-to($media) {
   @if type-of($media) == 'string' {
     @if $media == 'handhelds' {
-      @media only screen and (max-width: $break-wide-handheld) { @content; }
+      @media only screen and (max-width: $break-wide-handheld) {
+        @content;
+      }
+    } @else if $media == 'wide-handhelds' {
+      @media only screen and (min-width: $break-wide-handheld + 1) and (max-width: $break-tablet) {
+        @content;
+      }
+    } @else if $media == 'tablets' {
+      @media only screen and (min-width: $break-tablet + 1) and (max-width: $break-desktop) {
+        @content;
+      }
+    } @else if $media == 'desktops' {
+      @media only screen and (min-width: $break-desktop + 1) {
+        @content;
+      }
     }
-    @else if $media == 'wide-handhelds' {
-      @media only screen and (min-width: $break-wide-handheld + 1) and (max-width: $break-tablet) { @content; }
-    }
-    @else if $media == 'tablets' {
-      @media only screen and (min-width: $break-tablet + 1) and (max-width: $break-desktop) { @content; }
-    }
-    @else if $media == 'desktops' {
-      @media only screen and (min-width: $break-desktop + 1) { @content; }
-    }
-  }
-  @else if type-of($media) == 'list' {
+  } @else if type-of($media) == 'list' {
     @if index($media, 'handhelds') {
-      @media only screen and (max-width: $break-wide-handheld) { @content; }
+      @media only screen and (max-width: $break-wide-handheld) {
+        @content;
+      }
     }
     @if index($media, 'wide-handhelds') {
-      @media only screen and (min-width: $break-wide-handheld + 1) and (max-width: $break-tablet) { @content; }
+      @media only screen and (min-width: $break-wide-handheld + 1) and (max-width: $break-tablet) {
+        @content;
+      }
     }
     @if index($media, 'tablets') {
-      @media only screen and (min-width: $break-tablet + -1) and (max-width: $break-desktop){ @content; }
+      @media only screen and (min-width: $break-tablet + -1) and (max-width: $break-desktop) {
+        @content;
+      }
     }
     @if index($media, 'desktops') {
-      @media only screen and (min-width: $break-desktop + 1) { @content; }
+      @media only screen and (min-width: $break-desktop + 1) {
+        @content;
+      }
     }
   }
 }

src/styles/reset.scss

@@ -20,14 +20,19 @@ body {
   margin: 0;
 }
 
-sub, sup {
+sub,
+sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
 }
 
-sup {top: -.5em;}
-sub {bottom: -.25em;}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
 
 pre {
   white-space: pre;
@@ -35,39 +40,53 @@ pre {
   word-wrap: break-word;
 }
 
-b, strong {font-weight: bold;}
-abbr[title] {border-bottom: 1px dotted;}
+b,
+strong {
+  font-weight: bold;
+}
+abbr[title] {
+  border-bottom: 1px dotted;
+}
 
-a img, img {
+a img,
+img {
   -ms-interpolation-mode: bicubic;
 }
 
-input, textarea, button, select {
+input,
+textarea,
+button,
+select {
   @include reset-font;
   line-height: normal;
   margin: 0;
 }
 
 button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
+html input[type='button'],
+input[type='reset'],
+input[type='submit'] {
   cursor: pointer;
   -webkit-appearance: button;
 }
 
-textarea {overflow: auto;}
+textarea {
+  overflow: auto;
+}
 
 img::selection,
 img::-moz-selection {
   background: transparent;
 }
 
-ul, ol, li {
+ul,
+ol,
+li {
   @include reset-box-model;
 }
 
-ul, ol {
+ul,
+ol {
   list-style: none;
 }
 

src/styles/sidebar/common.scss

@@ -18,7 +18,9 @@ p {
   }
 }
 
-em { font-style: italic; }
+em {
+  font-style: italic;
+}
 
 html {
   font-size: $base-font-size;
@@ -36,13 +38,13 @@ html {
   float: right;
 }
 
-
 //CLOSER////////////////////////////////
 .close {
   cursor: pointer;
   float: right;
-  opacity: .6;
-  &:active, &:hover {
+  opacity: 0.6;
+  &:active,
+  &:hover {
     opacity: 1;
   }
 }
@@ -56,7 +58,10 @@ html {
     margin-bottom: 1.5em;
   }
 
-  select, textarea, input, button {
+  select,
+  textarea,
+  input,
+  button {
     display: block;
     // margin-top: .75em;
   }
@@ -119,9 +124,10 @@ html {
   }
 
   // These psuedo-elements add the speech bubble tail / triangle.
-  &:before, &:after {
+  &:before,
+  &:after {
     // http://www.red-team-design.com/css-diagonal-borders-still-not-rendering-properly-on-firefox
-    transform: scale(.9999);
+    transform: scale(0.9999);
     border-color: rgba(0, 0, 0, 0);
 
     border-style: solid;
@@ -151,7 +157,8 @@ html {
     text-align: right;
 
     // Align the tail
-    &:before, &:after {
+    &:before,
+    &:after {
       left: auto;
       right: 0;
     }
@@ -161,7 +168,8 @@ html {
   // the menu itself has to be aligned by the user
   &.pull-center {
     // Align the tail
-    &:before, &:after {
+    &:before,
+    &:after {
       left: auto;
       right: 50%;
     }
@@ -171,7 +179,8 @@ html {
   // This is used for cases where a separate element is used
   // as the indicator
   &.pull-none {
-    &:before, &:after {
+    &:before,
+    &:after {
       display: none;
     }
   }
@@ -207,7 +216,7 @@ html {
   border-bottom: $arrow-size solid $gray-lighter;
   position: absolute;
   right: 0px;
-  bottom: - $bottom-offset;
+  bottom: -$bottom-offset;
 
   z-index: 3;
 
@@ -220,7 +229,7 @@ html {
     border-left: $arrow-size solid transparent;
     border-right: $arrow-size solid transparent;
     border-bottom: $arrow-size solid white;
-    content: "";
+    content: '';
     position: absolute;
     left: 0 - $arrow-size;
     top: 1px;
@@ -248,7 +257,7 @@ html {
 }
 
 // Row in a dropdown menu
-.dropdown-menu__row--no-border{
+.dropdown-menu__row--no-border {
   border: none;
 }
 
@@ -275,7 +284,7 @@ html {
 
 //TABS////////////////////////////////
 .nav-tabs {
-  margin-bottom: .7em;
+  margin-bottom: 0.7em;
 
   & > li {
     display: inline-block;
@@ -287,17 +296,16 @@ html {
       color: $gray-dark;
       cursor: pointer;
       border-bottom: 3px solid transparent;
-      padding-left: .153em;
-      padding-right: .153em;
-      padding-bottom: .076em;
+      padding-left: 0.153em;
+      padding-right: 0.153em;
+      padding-bottom: 0.076em;
     }
 
     &:active a {
       position: relative;
-      top: .076em;
+      top: 0.076em;
     }
 
-
     &.active:active a {
       top: 0;
     }
@@ -307,8 +315,8 @@ html {
     }
 
     &:before {
-      content: "/";
-      margin: 0 .75em;
+      content: '/';
+      margin: 0 0.75em;
     }
 
     &:first-child:before {

src/styles/sidebar/components/annotation-share-dialog.scss

@@ -15,15 +15,16 @@
   width: 200px;
   font-size: $body1-font-size;
   cursor: default;
-  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.15);
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
 
   // Styling for the dialog box tail pointing down at the
   // 'Share' button
-  &:after, &:before {
+  &:after,
+  &:before {
     top: 100%;
     right: 10px;
     border: solid transparent;
-    content: " ";
+    content: ' ';
     height: 0;
     width: 0;
     position: absolute;

src/styles/sidebar/components/annotation.scss

-@import "../../mixins/icons";
+@import '../../mixins/icons';
 
 // Highlight quote of annotation whenever its thread is hovered
 .thread-list__card:hover .annotation-quote {
@@ -118,7 +118,10 @@
   height: 60px;
   background: repeating-linear-gradient(
     to bottom,
-    $grey-2, $grey-2 15px, white 15px, white 20px
+    $grey-2,
+    $grey-2 15px,
+    white 15px,
+    white 20px
   );
 }
 
@@ -232,13 +235,14 @@
     margin: 0;
   }
 
-  .annotation-body, .annotation-footer {
+  .annotation-body,
+  .annotation-footer {
     display: none;
   }
 
   .annotation-collapsed-replies {
     display: inline;
-    margin-left: .25em;
+    margin-left: 0.25em;
   }
 }
 

src/styles/sidebar/components/excerpt.scss

 @at-root {
-  $expand-duration: .15s;
+  $expand-duration: 0.15s;
 
   // the truncated body of the <excerpt>
   .excerpt {
@@ -36,7 +36,6 @@
     font-weight: normal;
   }
 
-
   // a shadow displayed at the bottom of an <excerpt>s with inline controls
   // disabled, which provides a hint that the excerpt is collapsed
   // -------------
@@ -53,8 +52,12 @@
     right: $shadow-h-offset;
     bottom: 0;
     height: 40px;
-    background-image: linear-gradient(to bottom,
-      transparent 50%, rgba(0,0,0,0.08) 95%, rgba(0,0,0,0.13) 100%);
+    background-image: linear-gradient(
+      to bottom,
+      transparent 50%,
+      rgba(0, 0, 0, 0.08) 95%,
+      rgba(0, 0, 0, 0.13) 100%
+    );
     transition: opacity $expand-duration linear;
   }
 

src/styles/sidebar/components/help-panel.scss

 .help-panel {
   @include font-normal;
   background: $grey-3;
-  margin-bottom: .72em;
+  margin-bottom: 0.72em;
   padding: $layout-h-margin;
   border-radius: 2px;
 }
@@ -32,8 +32,8 @@
 }
 
 .help-panel-content {
-   margin-top: 10px;
-   margin-bottom: 15px;
+  margin-top: 10px;
+  margin-bottom: 15px;
 }
 
 .help-panel-content__link {

src/styles/sidebar/components/markdown.scss

 //MARKDOWN EDITOR //////////////////////////
 .markdown-preview {
   overflow: auto;
-  border: .1em solid $gray-lighter;
+  border: 0.1em solid $gray-lighter;
   background-color: $gray-lightest;
   min-height: 120px;
   padding-left: 0.9em;
@@ -10,13 +10,13 @@
 
 .markdown-tools {
   background-color: $white;
-  border-top: .1em solid #D3D3D3;
-  border-left: .1em solid #D3D3D3;
-  border-right: .1em solid #D3D3D3;
-  border-radius: .15em .15em 0 0;
+  border-top: 0.1em solid #d3d3d3;
+  border-left: 0.1em solid #d3d3d3;
+  border-right: 0.1em solid #d3d3d3;
+  border-radius: 0.15em 0.15em 0 0;
   width: 100%;
-  margin-bottom: -.1em;
-  padding: .7em .7em .7em .5em;
+  margin-bottom: -0.1em;
+  padding: 0.7em 0.7em 0.7em 0.5em;
   user-select: none;
 
   &.disable {
@@ -26,12 +26,17 @@
     }
   }
 
-  .markdown-tools-button {padding: .4em;}
+  .markdown-tools-button {
+    padding: 0.4em;
+  }
 
-  .markdown-tools-button, .markdown-tools-toggle, .markdown-tools-badge {
+  .markdown-tools-button,
+  .markdown-tools-toggle,
+  .markdown-tools-badge {
     color: $gray;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       color: black;
     }
   }

src/styles/sidebar/components/search-input.scss

@@ -30,7 +30,7 @@
   // See https://github.com/hypothesis/h/issues/2654
   max-width: 0.1px;
 
-  transition: max-width .3s ease-out, padding-left .3s ease-out;
+  transition: max-width 0.3s ease-out, padding-left 0.3s ease-out;
 
   &:disabled {
     background: none;
@@ -39,7 +39,8 @@
 
   // Expand the search input when focused (triggered by clicking
   // on the search icon) or when `is-expanded` is applied.
-  &:focus,&.is-expanded {
+  &:focus,
+  &.is-expanded {
     max-width: 150px;
     padding-left: 6px;
   }

src/styles/sidebar/components/selection-tabs.scss

 .selection-tabs {
-
   display: flex;
   flex-direction: row;
   color: $grey-5;

src/styles/sidebar/components/sidebar-tutorial.scss

@@ -47,10 +47,10 @@
 }
 
 .sidebar-tutorial__list-item::before {
-  content: counter(sidebar-tutorial__list) ".";
+  content: counter(sidebar-tutorial__list) '.';
   display: table-cell; /* aha! */
   text-align: right;
-  padding-right: .3em;
+  padding-right: 0.3em;
   color: $gray-light;
 }
 

src/styles/sidebar/components/spinner.scss

@@ -8,11 +8,13 @@
 
 $container-width: 1em;
 $container-height: $container-width;
-$part-width: .1em;
+$part-width: 0.1em;
 $part-height: 3 * $part-width;
 
 @keyframes spin {
-  to { transform: rotate(1turn); }
+  to {
+    transform: rotate(1turn);
+  }
 }
 
 // Container which centers the spinner vertically.
@@ -71,11 +73,11 @@ $part-height: 3 * $part-width;
 }
 
 .spinner > span > span:before {
-    transform: rotate(-120deg);
-    background: rgba(0, 0, 0, 0.3);
+  transform: rotate(-120deg);
+  background: rgba(0, 0, 0, 0.3);
 }
 
 .spinner > span > span:after {
-    transform: rotate(-150deg);
-    background: rgba(0, 0, 0, 0.2);
+  transform: rotate(-150deg);
+  background: rgba(0, 0, 0, 0.2);
 }

src/styles/sidebar/components/tags-input.scss

 // Styles for the ngTagsInput plugin.
 // http://mbenford.github.io/ngTagsInput/gettingstarted
 
-@import "../../mixins/forms";
-@import "../../variables";
+@import '../../mixins/forms';
+@import '../../variables';
 
 tags-input {
   .host {
@@ -20,7 +20,7 @@ tags-input {
     // Input
     .input {
       float: left;
-      padding: .1333em 0;
+      padding: 0.1333em 0;
       outline: none;
       border: none !important;
       background: none;
@@ -34,17 +34,17 @@ tags-input {
   }
 
   .tag-list {
-    margin-top: -.33em; // Absorb the first row of margin-top on the tags.
+    margin-top: -0.33em; // Absorb the first row of margin-top on the tags.
     float: left;
   }
 
   .tag-item {
     float: left;
     position: relative;
-    padding: .0769em 1.307em .0769em .538em;
-    margin-top: .384em;
-    margin-right: .384em;
-    font-size: .866em;
+    padding: 0.0769em 1.307em 0.0769em 0.538em;
+    margin-top: 0.384em;
+    margin-right: 0.384em;
+    font-size: 0.866em;
     color: $button-text-color;
     border: 1px solid $gray-lighter;
     border-radius: 2px;
@@ -61,7 +61,7 @@ tags-input {
       top: 0;
       right: 0;
       bottom: 0;
-      width: .9412em;
+      width: 0.9412em;
       font-size: 1.3077em;
       font-weight: bold;
       line-height: 1;
@@ -73,31 +73,32 @@ tags-input {
 }
 
 .tags-read-only {
-  font-size: .8461em;
-  margin: .4545em 0;
+  font-size: 0.8461em;
+  margin: 0.4545em 0;
 
   .tag-list {
     @include pie-clearfix;
     // Margin between bottom of ascent of annotation body and
     // top of tags list should be ~15px
-    margin-top: -$layout-h-margin + 10px ;
+    margin-top: -$layout-h-margin + 10px;
     // Margin between top of x-height of annotation footer
     // labels and bottom of tags list should be ~15px
-    margin-bottom: $layout-h-margin - 10px ;
+    margin-bottom: $layout-h-margin - 10px;
 
     .tag-item {
       float: left;
-      margin-right: .4545em;
+      margin-right: 0.4545em;
 
       a {
         text-decoration: none;
         border: 1px solid $gray-lighter;
         border-radius: 2px;
-        padding: 0 .4545em .1818em;
+        padding: 0 0.4545em 0.1818em;
         color: $gray-light;
         background: $gray-lightest;
 
-        &:hover, &:focus {
+        &:hover,
+        &:focus {
           color: $link-color-hover;
         }
       }
@@ -106,14 +107,14 @@ tags-input {
 }
 
 tags-input .autocomplete {
-  margin-top: .3em;
+  margin-top: 0.3em;
   position: absolute;
-  padding: .3em 0;
+  padding: 0.3em 0;
   z-index: 999;
   width: 100%;
   background-color: white;
   border: thin solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0 .3em .6em rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0.3em 0.6em rgba(0, 0, 0, 0.2);
 
   .suggestion-list {
     margin: 0;
@@ -122,7 +123,7 @@ tags-input .autocomplete {
   }
 
   .suggestion-item {
-    padding: .3em .6em;
+    padding: 0.3em 0.6em;
     cursor: pointer;
     white-space: nowrap;
     overflow: hidden;
@@ -131,12 +132,12 @@ tags-input .autocomplete {
     color: black;
     background-color: white;
 
-     em {
-       font-family: $sans-font-family;
-       font-weight: bold;
-       font-style: normal;
-       color: black;
-       background-color: white;
+    em {
+      font-family: $sans-font-family;
+      font-weight: bold;
+      font-style: normal;
+      color: black;
+      background-color: white;
     }
 
     &.selected {

src/styles/sidebar/components/thread-list.scss

 .thread-list {
   & > * {
     // Default spacing between items in the annotation card list
-    margin-bottom: .72em;
+    margin-bottom: 0.72em;
   }
 }
 
 .thread-list__card {
-  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.10);
+  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1);
   border-radius: 2px;
   cursor: pointer;
   padding: $layout-h-margin;
@@ -34,6 +34,6 @@
 
 .thread-list__separator--theme-clean {
   border: 0;
-  border-top: 1px solid #E1E1E1;
+  border-top: 1px solid #e1e1e1;
   margin: -8px 15px 10px 15px;
 }

src/styles/sidebar/components/tooltip.scss

@@ -6,9 +6,9 @@
 @mixin tooltip-arrow($rotation) {
   transform: rotate($rotation);
   background: $grey-7;
-  border-bottom: 1px solid rgba(0,0,0,0.20);
-  border-right: 1px solid rgba(0,0,0,0.20);
-  content: "";
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+  content: '';
   display: block;
   height: 6px;
   left: 0;
@@ -40,14 +40,14 @@
 // Variant for tooltips above the target that point down at it
 .tooltip--down:before {
   @include tooltip-arrow(45deg);
-  content: "";
+  content: '';
   top: calc(100% - 5px);
 }
 
 // Variant for tooltips below the target that point up at it
 .tooltip--up:before {
   @include tooltip-arrow(225deg);
-  content: "";
+  content: '';
   top: -3px;
 }
 

src/styles/sidebar/elements.scss

@@ -4,7 +4,8 @@ a {
   text-decoration: none;
 }
 
-a:active, a:focus {
+a:active,
+a:focus {
   text-decoration: none;
 }
 
@@ -18,4 +19,6 @@ ol {
   padding-left: 3em;
 }
 
-svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
+svg {
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+}

src/styles/sidebar/styled-text.scss

@@ -2,11 +2,27 @@
   // Reset the line-height in case any parent elements have set it.
   line-height: normal;
 
-  h1, h2, h3, h4, h5, h6, p, ol, ul, img, pre, blockquote {
-    margin: .618em 0;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  ol,
+  ul,
+  img,
+  pre,
+  blockquote {
+    margin: 0.618em 0;
   }
 
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     font-family: $sans-font-family;
   }
 
@@ -15,40 +31,42 @@
   h1 {
     font-size: 2.618em;
     font-weight: bold;
-    margin: .2327em 0;
+    margin: 0.2327em 0;
   }
 
   h2 {
     font-size: 1.991em;
     font-weight: bold;
-    margin: .309em 0;
+    margin: 0.309em 0;
   }
 
   h3 {
     font-size: 1.991em;
-    margin: .309em 0;
+    margin: 0.309em 0;
   }
 
   h4 {
     font-size: 1.618em;
-    margin: .3803em 0;
+    margin: 0.3803em 0;
   }
 
   h5 {
     font-size: 1.231em;
-    margin: .4944em 0;
+    margin: 0.4944em 0;
   }
 
   h6 {
     font-size: 1.231em;
-    margin: .4944em 0;
+    margin: 0.4944em 0;
   }
 
-  ol, ul {
+  ol,
+  ul {
     list-style-position: inside;
     padding-left: 0;
 
-    ol, ul {
+    ol,
+    ul {
       padding-left: 1em;
     }
   }
@@ -61,17 +79,19 @@
     list-style-type: disc;
   }
 
-  ol, ul {
+  ol,
+  ul {
     ul {
       list-style-type: circle;
     }
   }
 
   li {
-    margin-bottom: .291em;
+    margin-bottom: 0.291em;
   }
 
-  li, p {
+  li,
+  p {
     line-height: 1.3;
   }
 
@@ -96,18 +116,24 @@
     padding: 0 1em;
     margin: 1em 0;
 
-    p, ol, ul, img, pre, blockquote {
-      margin: .7063em 0;
+    p,
+    ol,
+    ul,
+    img,
+    pre,
+    blockquote {
+      margin: 0.7063em 0;
     }
 
-    p, li {
+    p,
+    li {
       line-height: 1.5;
     }
   }
 
   code {
     font-family: $mono-font-family;
-    font-size: .875em;
+    font-size: 0.875em;
     color: black;
   }
 

src/styles/variables.scss

@@ -4,7 +4,6 @@
 $white: #fff !default;
 $black: #000 !default;
 
-
 // Grays
 // ---------------------
 $gray: #777 !default;
@@ -13,14 +12,13 @@ $gray-light: #969696 !default;
 $gray-lighter: #d3d3d3 !default;
 $gray-lightest: #f9f9f9 !default;
 
-$color-mine-shaft: #3A3A3A;
+$color-mine-shaft: #3a3a3a;
 $color-dove-gray: #626262;
 $color-gray: #818181;
 $color-silver-chalice: #a6a6a6;
 $color-silver: #bbb;
 $color-seashell: #f1f1f1;
 
-
 // Colors
 // ---------------------
 $color-cardinal: #bd1c2b;
@@ -29,77 +27,83 @@ $brand-color: #bd1c2b !default;
 $button-text-color: $gray-dark !default;
 $button-background-start: $white !default;
 $button-background-end: #f0f0f0 !default;
-$button-background-gradient: to bottom, $button-background-start, $button-background-end !default;
+$button-background-gradient: to bottom, $button-background-start,
+  $button-background-end !default;
 
 $error-color: #f0480c !default;
 $success-color: #1cbd41 !default;
 
-
 // Variables for the new color palette
 // ------------------------------------
-$grey-1: #F2F2F2;
-$grey-2: #ECECEC;
-$grey-3: #DBDBDB;
-$grey-4: #A6A6A6;
-$grey-5: #7A7A7A;
-$grey-6: #3F3F3F;
+$grey-1: #f2f2f2;
+$grey-2: #ececec;
+$grey-3: #dbdbdb;
+$grey-4: #a6a6a6;
+$grey-5: #7a7a7a;
+$grey-6: #3f3f3f;
 $grey-7: #202020;
 
-$brand: #BD1C2B;
-$highlight: #58CEF4;
-
+$brand: #bd1c2b;
+$highlight: #58cef4;
 
 @function color-weight($c, $n: 500) {
   @if $n == 50 {
     @return tint($c, 85%);
-  } @if $n == 100 {
+  }
+  @if $n == 100 {
     @return tint($c, 70%);
-  } @if $n == 200 {
+  }
+  @if $n == 200 {
     @return tint($c, 50%);
-  } @if $n == 300 {
+  }
+  @if $n == 300 {
     @return tint($c, 30%);
-  } @if $n == 400 {
+  }
+  @if $n == 400 {
     @return tint($c, 15%);
-  } @if $n == 500 {
+  }
+  @if $n == 500 {
     @return $c;
-  } @if $n == 600 {
+  }
+  @if $n == 600 {
     @return shade($c, 15%);
-  } @if $n == 700 {
+  }
+  @if $n == 700 {
     @return shade($c, 30%);
-  } @if $n == 800 {
+  }
+  @if $n == 800 {
     @return shade($c, 50%);
-  } @if $n == 900 {
+  }
+  @if $n == 900 {
     @return shade($c, 85%);
   }
 }
 
-
 // Scaffolding
 // -------------------------
-$body-background:        $white !default;
-$text-color:             $gray-dark !default;
-
+$body-background: $white !default;
+$text-color: $gray-dark !default;
 
 // Links
 // -------------------------
-$link-color:             $brand-color !default;
-$link-color-hover:       color-weight($brand-color, 700) !default;
-
+$link-color: $brand-color !default;
+$link-color-hover: color-weight($brand-color, 700) !default;
 
 // Typography
 // -------------------------
-$sans-font-family:        "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !default;
-$mono-font-family:        Open Sans Mono, Menlo, DejaVu Sans Mono, monospace !default;
+$sans-font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande',
+  sans-serif !default;
+$mono-font-family: Open Sans Mono, Menlo, DejaVu Sans Mono, monospace !default;
 
-$base-font-size:          16px !default;
-$base-line-height:        20px !default;
+$base-font-size: 16px !default;
+$base-line-height: 20px !default;
 
-$body1-font-size:         12px;
-$body1-line-height:       1.4em;
+$body1-font-size: 12px;
+$body1-line-height: 1.4em;
 
-$body2-font-size:         14px;
+$body2-font-size: 14px;
 
-$title-font-weight:       bold;
+$title-font-weight: bold;
 
 $normal-font-size: 13px;
 $normal-line-height: 17px;
@@ -107,17 +111,14 @@ $normal-line-height: 17px;
 $small-font-size: 11px;
 $small-line-height: 12px;
 
-
 // Layout margins
 // -------------------------
 $layout-h-margin: 15px;
 
-
 // Z-Index Scale
 // -------------------------
 $zindex-tooltip: 20;
 
-
 // Other Variables
 // -------------------------
 $bucket-bar-width: 22px;