Move diff css to separate file

Signed-off-by: NDmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/assets/stylesheets/application.scss

@@ -48,6 +48,7 @@
 @import "sections/header.scss";
 @import "sections/nav.scss";
 @import "sections/commits.scss";
+@import "sections/diff.scss";
 @import "sections/issues.scss";
 @import "sections/projects.scss";
 @import "sections/snippets.scss";

app/assets/stylesheets/sections/commits.scss

@@ -10,336 +10,6 @@
   }
 }
 
-.diff-file {
-  border: 1px solid #CCC;
-  margin-bottom: 1em;
-
-  .diff-header {
-    @extend .clearfix;
-    background: #DDD;
-    border-bottom: 1px solid #CCC;
-    padding: 5px 5px 5px 10px;
-    color: #555;
-
-    > span {
-      font-family: $monospace_font;
-      font-size: 14px;
-      line-height: 2;
-    }
-
-    .diff-btn-group {
-      float: right;
-
-      .btn {
-        background-color: #EEE;
-        color: #666;
-        font-weight: bolder;
-      }
-    }
-
-    .commit-short-id {
-      font-family: $monospace_font;
-      font-size: smaller;
-    }
-
-    .file-mode {
-      font-family: $monospace_font;
-    }
-  }
-  .diff-content {
-    overflow: auto;
-    overflow-y: hidden;
-    background: #FFF;
-    color: #333;
-    font-size: 12px;
-    .old {
-      span.idiff {
-        background-color: #FAA;
-      }
-    }
-    .new {
-      span.idiff {
-        background-color: #AFA;
-      }
-    }
-
-    table {
-      width: 100%;
-      font-family: $monospace_font;
-      border: none;
-      margin: 0px;
-      padding: 0px;
-      td {
-        line-height: 18px;
-        font-size: 12px;
-      }
-    }
-    .old_line, .new_line, .diff_line {
-      margin: 0px;
-      padding: 0px;
-      border: none;
-      background: #EEE;
-      color: #666;
-      padding: 0px 5px;
-      border-right: 1px solid #ccc;
-      text-align: right;
-      min-width: 35px;
-      max-width: 50px;
-      width: 35px;
-      @include user-select(none);
-      a {
-        float: left;
-        width: 35px;
-        font-weight: normal;
-        color: #666;
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-      &.new {
-        background: #CFD;
-      }
-      &.old {
-        background: #FDD;
-      }
-    }
-    .diff_line {
-      padding: 0;
-    }
-    .line_holder {
-      &.old .old_line,
-      &.old .new_line {
-        background: #FCC;
-        border-color: #E7BABA;
-      }
-      &.new .old_line,
-      &.new .new_line {
-        background: #CFC;
-        border-color: #B9ECB9;
-      }
-    }
-    .line_content {
-      display: block;
-      white-space: pre;
-      height: 18px;
-      margin: 0px;
-      padding: 0px 0.5em;
-      border: none;
-      &.new {
-        background: #CFD;
-      }
-      &.old {
-        background: #FDD;
-      }
-      &.matched {
-        color: #ccc;
-        background: #fafafa;
-      }
-      &.parallel {
-        display: table-cell;
-        overflow: hidden;
-        width: 50%;
-      }
-    }
-  }
-  .image {
-    background: #ddd;
-    text-align: center;
-    padding: 30px;
-    .wrap{
-      display: inline-block;
-    }
-
-    .frame {
-      display: inline-block;
-      background-color: #fff;
-      line-height: 0;
-      img{
-        border: 1px solid #FFF;
-        background: url('trans_bg.gif');
-        max-width: 100%;
-      }
-      &.deleted {
-        border: 1px solid $deleted;
-      }
-
-      &.added {
-        border: 1px solid $added;
-      }
-    }
-    .image-info{
-      font-size: 12px;
-      margin: 5px 0 0 0;
-      color: grey;
-    }
-
-    .view.swipe{
-      position: relative;
-
-      .swipe-frame{
-        display: block;
-        margin: auto;
-        position: relative;
-      }
-      .swipe-wrap{
-        overflow: hidden;
-        border-left: 1px solid #999;
-        position: absolute;
-        display: block;
-        top: 13px;
-        right: 7px;
-      }
-      .frame{
-        top: 0;
-        right: 0;
-        position: absolute;
-        &.deleted{
-          margin: 0;
-          display: block;
-          top: 13px;
-          right: 7px;
-        }
-      }
-      .swipe-bar{
-        display: block;
-        height: 100%;
-        width: 15px;
-        z-index: 100;
-        position: absolute;
-        cursor: pointer;
-        &:hover{
-          .top-handle{
-            background-position: -15px 3px;
-          }
-          .bottom-handle{
-            background-position: -15px -11px;
-          }
-        };
-        .top-handle{
-          display: block;
-          height: 14px;
-          width: 15px;
-          position: absolute;
-          top: 0px;
-          background: url('swipemode_sprites.gif') 0 3px no-repeat;
-        }
-        .bottom-handle{
-          display: block;
-          height: 14px;
-          width: 15px;
-          position: absolute;
-          bottom: 0px;
-          background: url('swipemode_sprites.gif') 0 -11px no-repeat;
-        }
-      }
-    } //.view.swipe
-    .view.onion-skin{
-      .onion-skin-frame{
-        display: block;
-        margin: auto;
-        position: relative;
-      }
-      .frame.added, .frame.deleted {
-        position: absolute;
-        display: block;
-        top: 0px;
-        left: 0px;
-      }
-      .controls{
-        display: block;
-        height: 14px;
-        width: 300px;
-        z-index: 100;
-        position: absolute;
-        bottom: 0px;
-        left: 50%;
-        margin-left: -150px;
-
-        .drag-track{
-          display: block;
-          position: absolute;
-          left: 12px;
-          height: 10px;
-          width: 276px;
-          background: url('onion_skin_sprites.gif') -4px -20px repeat-x;
-        }
-
-        .dragger {
-          display: block;
-          position: absolute;
-          left: 0px;
-          top: 0px;
-          height: 14px;
-          width: 14px;
-          background: url('onion_skin_sprites.gif') 0px -34px repeat-x;
-          cursor: pointer;
-        }
-
-        .transparent {
-          display: block;
-          position: absolute;
-          top: 2px;
-          right: 0px;
-          height: 10px;
-          width: 10px;
-          background: url('onion_skin_sprites.gif') -2px 0px no-repeat;
-        }
-
-        .opaque {
-          display: block;
-          position: absolute;
-          top: 2px;
-          left: 0px;
-          height: 10px;
-          width: 10px;
-          background: url('onion_skin_sprites.gif') -2px -10px no-repeat;
-        }
-      }
-    } //.view.onion-skin
-  }
-  .view-modes{
-
-    padding: 10px;
-    text-align: center;
-
-    background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
-    background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
-    background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
-    background-image: -ms-linear-gradient(#eee 6.6%, #dfdfdf);
-    background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
-
-    ul, li{
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      display: inline-block;
-    }
-
-    li{
-      color: grey;
-      border-left: 1px solid #c1c1c1;
-      padding: 0 12px 0 16px;
-      cursor: pointer;
-      &:first-child{
-        border-left: none;
-      }
-      &:hover{
-        text-decoration: underline;
-      }
-      &.active{
-        &:hover{
-          text-decoration: none;
-        }
-        cursor: default;
-        color: #333;
-      }
-      &.disabled{
-        display: none;
-      }
-    }
-  }
-}
-
 /** COMMIT BLOCK **/
 .commit-title{
   display: block;

app/assets/stylesheets/sections/diff.scss

+.diff-file {
+  border: 1px solid #CCC;
+  margin-bottom: 1em;
+
+  .diff-header {
+    @extend .clearfix;
+    background: #DDD;
+    border-bottom: 1px solid #CCC;
+    padding: 5px 5px 5px 10px;
+    color: #555;
+
+    > span {
+      font-family: $monospace_font;
+      font-size: 14px;
+      line-height: 2;
+    }
+
+    .diff-btn-group {
+      float: right;
+
+      .btn {
+        background-color: #EEE;
+        color: #666;
+        font-weight: bolder;
+      }
+    }
+
+    .commit-short-id {
+      font-family: $monospace_font;
+      font-size: smaller;
+    }
+
+    .file-mode {
+      font-family: $monospace_font;
+    }
+  }
+  .diff-content {
+    overflow: auto;
+    overflow-y: hidden;
+    background: #FFF;
+    color: #333;
+    font-size: 12px;
+    .old {
+      span.idiff {
+        background-color: #FAA;
+      }
+    }
+    .new {
+      span.idiff {
+        background-color: #AFA;
+      }
+    }
+
+    table {
+      width: 100%;
+      font-family: $monospace_font;
+      border: none;
+      margin: 0px;
+      padding: 0px;
+      td {
+        line-height: 18px;
+        font-size: 12px;
+      }
+    }
+    .old_line, .new_line, .diff_line {
+      margin: 0px;
+      padding: 0px;
+      border: none;
+      background: #EEE;
+      color: #666;
+      padding: 0px 5px;
+      border-right: 1px solid #ccc;
+      text-align: right;
+      min-width: 35px;
+      max-width: 50px;
+      width: 35px;
+      @include user-select(none);
+      a {
+        float: left;
+        width: 35px;
+        font-weight: normal;
+        color: #666;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+      &.new {
+        background: #CFD;
+      }
+      &.old {
+        background: #FDD;
+      }
+    }
+    .diff_line {
+      padding: 0;
+    }
+    .line_holder {
+      &.old .old_line,
+      &.old .new_line {
+        background: #FCC;
+        border-color: #E7BABA;
+      }
+      &.new .old_line,
+      &.new .new_line {
+        background: #CFC;
+        border-color: #B9ECB9;
+      }
+    }
+    .line_content {
+      display: block;
+      white-space: pre;
+      height: 18px;
+      margin: 0px;
+      padding: 0px 0.5em;
+      border: none;
+      &.new {
+        background: #CFD;
+      }
+      &.old {
+        background: #FDD;
+      }
+      &.matched {
+        color: #ccc;
+        background: #fafafa;
+      }
+      &.parallel {
+        display: table-cell;
+        overflow: hidden;
+        width: 50%;
+      }
+    }
+  }
+  .image {
+    background: #ddd;
+    text-align: center;
+    padding: 30px;
+    .wrap{
+      display: inline-block;
+    }
+
+    .frame {
+      display: inline-block;
+      background-color: #fff;
+      line-height: 0;
+      img{
+        border: 1px solid #FFF;
+        background: url('trans_bg.gif');
+        max-width: 100%;
+      }
+      &.deleted {
+        border: 1px solid $deleted;
+      }
+
+      &.added {
+        border: 1px solid $added;
+      }
+    }
+    .image-info{
+      font-size: 12px;
+      margin: 5px 0 0 0;
+      color: grey;
+    }
+
+    .view.swipe{
+      position: relative;
+
+      .swipe-frame{
+        display: block;
+        margin: auto;
+        position: relative;
+      }
+      .swipe-wrap{
+        overflow: hidden;
+        border-left: 1px solid #999;
+        position: absolute;
+        display: block;
+        top: 13px;
+        right: 7px;
+      }
+      .frame{
+        top: 0;
+        right: 0;
+        position: absolute;
+        &.deleted{
+          margin: 0;
+          display: block;
+          top: 13px;
+          right: 7px;
+        }
+      }
+      .swipe-bar{
+        display: block;
+        height: 100%;
+        width: 15px;
+        z-index: 100;
+        position: absolute;
+        cursor: pointer;
+        &:hover{
+          .top-handle{
+            background-position: -15px 3px;
+          }
+          .bottom-handle{
+            background-position: -15px -11px;
+          }
+        };
+        .top-handle{
+          display: block;
+          height: 14px;
+          width: 15px;
+          position: absolute;
+          top: 0px;
+          background: url('swipemode_sprites.gif') 0 3px no-repeat;
+        }
+        .bottom-handle{
+          display: block;
+          height: 14px;
+          width: 15px;
+          position: absolute;
+          bottom: 0px;
+          background: url('swipemode_sprites.gif') 0 -11px no-repeat;
+        }
+      }
+    } //.view.swipe
+    .view.onion-skin{
+      .onion-skin-frame{
+        display: block;
+        margin: auto;
+        position: relative;
+      }
+      .frame.added, .frame.deleted {
+        position: absolute;
+        display: block;
+        top: 0px;
+        left: 0px;
+      }
+      .controls{
+        display: block;
+        height: 14px;
+        width: 300px;
+        z-index: 100;
+        position: absolute;
+        bottom: 0px;
+        left: 50%;
+        margin-left: -150px;
+
+        .drag-track{
+          display: block;
+          position: absolute;
+          left: 12px;
+          height: 10px;
+          width: 276px;
+          background: url('onion_skin_sprites.gif') -4px -20px repeat-x;
+        }
+
+        .dragger {
+          display: block;
+          position: absolute;
+          left: 0px;
+          top: 0px;
+          height: 14px;
+          width: 14px;
+          background: url('onion_skin_sprites.gif') 0px -34px repeat-x;
+          cursor: pointer;
+        }
+
+        .transparent {
+          display: block;
+          position: absolute;
+          top: 2px;
+          right: 0px;
+          height: 10px;
+          width: 10px;
+          background: url('onion_skin_sprites.gif') -2px 0px no-repeat;
+        }
+
+        .opaque {
+          display: block;
+          position: absolute;
+          top: 2px;
+          left: 0px;
+          height: 10px;
+          width: 10px;
+          background: url('onion_skin_sprites.gif') -2px -10px no-repeat;
+        }
+      }
+    } //.view.onion-skin
+  }
+  .view-modes{
+
+    padding: 10px;
+    text-align: center;
+
+    background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
+    background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
+    background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
+    background-image: -ms-linear-gradient(#eee 6.6%, #dfdfdf);
+    background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
+
+    ul, li{
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      display: inline-block;
+    }
+
+    li{
+      color: grey;
+      border-left: 1px solid #c1c1c1;
+      padding: 0 12px 0 16px;
+      cursor: pointer;
+      &:first-child{
+        border-left: none;
+      }
+      &:hover{
+        text-decoration: underline;
+      }
+      &.active{
+        &:hover{
+          text-decoration: none;
+        }
+        cursor: default;
+        color: #333;
+      }
+      &.disabled{
+        display: none;
+      }
+    }
+  }
+}