Move debug log styles to their own file

// FREEBIE

stylesheets/_debugLog.scss

@@ -0,0 +1,85 @@
+.debug-log {
+  &.modal {
+    padding: 50px;
+
+    .content {
+      margin: 0;
+      max-width: 100%;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+
+      textarea {
+        flex-grow: 1;
+        width: 100%;
+        resize: none;
+      }
+    }
+  }
+
+  .submit {
+    border-radius: $border-radius;
+    border: solid 1px #ccc;
+    cursor: pointer;
+    margin: 1em auto;
+    padding: 1em;
+    font-family: inherit;
+    color: $grey;
+    background: $grey_l;
+    box-shadow: 0 0 10px -5px rgba($grey, 0.5);
+
+    &:hover {
+      color: black;
+      box-shadow: 0 0 10px -3px rgba($grey, 0.7);
+    }
+  }
+
+  .result {
+    $link-max-width: 400px;
+    $open-width: 72px;
+    $open-height: 36px;
+    text-align: center;
+
+    $group-max-width: $link-max-width + $open-width;
+    .input-group {
+      display: inline-block;
+      width: 100%;
+      max-width: $group-max-width;
+    }
+
+    $open-pad-x: ($open-width - $button-height - 2) / 2;
+    $open-pad-y: ($open-height - $button-height - 2) / 2;
+    .open {
+      float: left;
+      display: inline-block;
+      width: $open-width;
+      height: $open-height;
+      padding: $open-pad-y $open-pad-x;
+      cursor: pointer;
+      border: solid 1px #ccc;
+      border-radius: 0 $border-radius $border-radius 0;
+      background: $grey_l;
+      &:before {
+        content: '';
+        display: block;
+        width: $button-height;
+        height: $button-height;
+        @include header-icon-black('/images/open_link.svg');
+      }
+    }
+
+    .link {
+      border-radius: $border-radius 0 0 $border-radius;
+      float: left;
+      width: calc(100% - #{$open-width});
+      max-width: $link-max-width;
+      height: $open-height;
+      padding: 0 10px;
+      outline-offset: -4px;
+      border: solid 1px #ccc;
+      border-right: none;
+    }
+
+  }
+}

stylesheets/_global.scss

@@ -407,89 +407,6 @@ $avatar-size: 44px;
   }
 }
 
-.debug-log {
-  &.modal {
-    padding: 50px;
-
-    .content {
-      margin: 0;
-      max-width: 100%;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-
-      textarea {
-        flex-grow: 1;
-        width: 100%;
-        resize: none;
-      }
-    }
-  }
-
-  .submit {
-    border-radius: $border-radius;
-    border: solid 1px #ccc;
-    cursor: pointer;
-    margin: 1em auto;
-    padding: 1em;
-    font-family: inherit;
-    color: $grey;
-    background: $grey_l;
-    box-shadow: 0 0 10px -5px rgba($grey, 0.5);
-
-    &:hover {
-      color: black;
-      box-shadow: 0 0 10px -3px rgba($grey, 0.7);
-    }
-  }
-
-  .result {
-    $link-max-width: 400px;
-    $open-width: 46px;
-    $open-height: 36px;
-    $group-max-width: $link-max-width + $open-width;
-    text-align: center;
-
-    .input-group {
-      display: inline-block;
-      width: 100%;
-      max-width: $group-max-width;
-    }
-
-    .open {
-      float: left;
-      display: inline-block;
-      width: $open-width;
-      height: $open-height;
-      padding: 5px 10px;
-      cursor: pointer;
-      border: solid 1px #ccc;
-      border-radius: 0 $border-radius $border-radius 0;
-      background: $grey_l;
-      &:before {
-        content: '';
-        display: block;
-        width: $button-height;
-        height: $button-height;
-        @include header-icon-black('/images/open_link.svg');
-      }
-    }
-
-    .link {
-      border-radius: $border-radius 0 0 $border-radius;
-      float: left;
-      width: calc(100% - #{$open-width});
-      max-width: $link-max-width;
-      height: $open-height;
-      padding: 0 10px;
-      outline-offset: -4px;
-      border: solid 1px #ccc;
-      border-right: none;
-    }
-
-  }
-}
 .modal {
   position: absolute;
   top: 0;

stylesheets/manifest.css

@@ -349,71 +349,6 @@ img.emoji {
 @keyframes rotate {
   to {
     transform: rotate(360deg); } }
-.debug-log.modal {
-  padding: 50px; }
-  .debug-log.modal .content {
-    margin: 0;
-    max-width: 100%;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column; }
-    .debug-log.modal .content textarea {
-      flex-grow: 1;
-      width: 100%;
-      resize: none; }
-.debug-log .submit {
-  border-radius: 5px;
-  border: solid 1px #ccc;
-  cursor: pointer;
-  margin: 1em auto;
-  padding: 1em;
-  font-family: inherit;
-  color: #616161;
-  background: #f3f3f3;
-  box-shadow: 0 0 10px -5px rgba(97, 97, 97, 0.5); }
-  .debug-log .submit:hover {
-    color: black;
-    box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); }
-.debug-log .result {
-  text-align: center; }
-  .debug-log .result .input-group {
-    display: inline-block;
-    width: 100%;
-    max-width: 446px; }
-  .debug-log .result .open {
-    float: left;
-    display: inline-block;
-    width: 46px;
-    height: 36px;
-    padding: 5px 10px;
-    cursor: pointer;
-    border: solid 1px #ccc;
-    border-radius: 0 5px 5px 0;
-    background: #f3f3f3; }
-    .debug-log .result .open:before {
-      content: '';
-      display: block;
-      width: 24px;
-      height: 24px;
-      -webkit-mask: url("/images/open_link.svg") no-repeat center;
-      -webkit-mask-size: 100%;
-      background-color: rgba(0, 0, 0, 0.5); }
-      .debug-log .result .open:before:focus, .debug-log .result .open:before:hover {
-        -webkit-mask: url("/images/open_link.svg") no-repeat center;
-        -webkit-mask-size: 100%;
-        background-color: black; }
-  .debug-log .result .link {
-    border-radius: 5px 0 0 5px;
-    float: left;
-    width: calc(100% - 46px);
-    max-width: 400px;
-    height: 36px;
-    padding: 0 10px;
-    outline-offset: -4px;
-    border: solid 1px #ccc;
-    border-right: none; }
-
 .modal {
   position: absolute;
   top: 0;
@@ -496,6 +431,71 @@ input[type=text]:active, input[type=text]:focus, input[type=search]:active, inpu
   .bar-container .progress-bar {
     height: 100%; }
 
+.debug-log.modal {
+  padding: 50px; }
+  .debug-log.modal .content {
+    margin: 0;
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column; }
+    .debug-log.modal .content textarea {
+      flex-grow: 1;
+      width: 100%;
+      resize: none; }
+.debug-log .submit {
+  border-radius: 5px;
+  border: solid 1px #ccc;
+  cursor: pointer;
+  margin: 1em auto;
+  padding: 1em;
+  font-family: inherit;
+  color: #616161;
+  background: #f3f3f3;
+  box-shadow: 0 0 10px -5px rgba(97, 97, 97, 0.5); }
+  .debug-log .submit:hover {
+    color: black;
+    box-shadow: 0 0 10px -3px rgba(97, 97, 97, 0.7); }
+.debug-log .result {
+  text-align: center; }
+  .debug-log .result .input-group {
+    display: inline-block;
+    width: 100%;
+    max-width: 472px; }
+  .debug-log .result .open {
+    float: left;
+    display: inline-block;
+    width: 72px;
+    height: 36px;
+    padding: 5px 23px;
+    cursor: pointer;
+    border: solid 1px #ccc;
+    border-radius: 0 5px 5px 0;
+    background: #f3f3f3; }
+    .debug-log .result .open:before {
+      content: '';
+      display: block;
+      width: 24px;
+      height: 24px;
+      -webkit-mask: url("/images/open_link.svg") no-repeat center;
+      -webkit-mask-size: 100%;
+      background-color: rgba(0, 0, 0, 0.5); }
+      .debug-log .result .open:before:focus, .debug-log .result .open:before:hover {
+        -webkit-mask: url("/images/open_link.svg") no-repeat center;
+        -webkit-mask-size: 100%;
+        background-color: black; }
+  .debug-log .result .link {
+    border-radius: 5px 0 0 5px;
+    float: left;
+    width: calc(100% - 72px);
+    max-width: 400px;
+    height: 36px;
+    padding: 0 10px;
+    outline-offset: -4px;
+    border: solid 1px #ccc;
+    border-right: none; }
+
 .conversation-stack,
 .new-conversation, .inbox, .gutter {
   height: 100%; }

stylesheets/manifest.scss

@@ -5,6 +5,7 @@
 
 // Components
   @import 'progress';
+  @import 'debugLog';
 
 // Build the main view
   @import 'index';