[#2001] Extract SCSS from c-zoom.vue

frontend/src/styles/c-zoom.scss

@@ -0,0 +1,138 @@
+@import 'colors';
+
+/* Zoom tab */
+#tab-zoom {
+  .zoom {
+    &__title {
+      &--granularity {
+        @include mini-font;
+        margin-top: .5rem;
+      }
+
+      &--tags {
+        margin: .25rem 0 .25rem 0;
+
+        .tag {
+          cursor: pointer;
+        }
+      }
+    }
+
+    &__toggle-commit-message-body {
+      padding-top: 10px;
+    }
+
+    &__day,
+    &__title {
+      @include small-font;
+
+      h3 {
+        @include large-font;
+      }
+
+      /* Tags in commits */
+      .tag {
+        @include mini-font;
+        background: mui-color('grey', '600');
+        border-radius: 5px;
+        color: mui-color('white');
+        display: inline-block;
+        margin: .2rem .2rem .2rem 0;
+        padding: 0 3px 0 3px;
+
+        .fa-tags {
+          width: .65rem;
+        }
+      }
+    }
+  }
+
+  /* Commit Message Body in Zoom Tab */
+  .commit-message {
+    border: 1px solid transparent;
+    padding: 5px;
+
+    &:focus,
+    &:focus-within {
+      border: 1px solid mui-color('blue', '500');
+    }
+
+    &.active {
+      .body {
+        background-color: mui-color('white');
+        border: 1px solid mui-color('grey', '700');
+        display: grid;
+        margin: .25rem 0 .25rem 0;
+        overflow-x: auto;
+        padding: .4rem;
+        resize: none;
+
+        pre {
+          @include mono-font;
+          position: relative;
+
+          .dashed-border {
+            border-right: 1px dashed mui-color('grey', '500'); // 72nd character line
+            height: 100%;
+            pointer-events: none;
+            position: absolute;
+            top: 0;
+            width: 72ch;
+          }
+        }
+      }
+    }
+
+    .code-merge-icon {
+      color: mui-color('grey');
+
+      .fa-code-merge {
+        width: .65rem;
+      }
+    }
+
+    .body {
+      display: none;
+    }
+
+    .tag {
+      cursor: pointer;
+
+      &:focus {
+        border: 1px solid mui-color('blue', '500');
+        outline: none;
+      }
+    }
+
+    &--button {
+      color: mui-color('grey');
+      padding-left: .5rem;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    pre {
+      margin: 0;
+    }
+
+    span.loc {
+      color: mui-color('grey');
+    }
+
+    .message-title {
+      @include mono-font;
+      display: inline;
+
+      .within-border {
+        display: inline;
+      }
+
+      .not-within-border {
+        border-left: 1px dashed mui-color('grey', '500'); // 50th character line
+        display: inline;
+      }
+    }
+  }
+}

frontend/src/views/c-zoom.vue

@@ -515,141 +515,5 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../styles/_colors.scss';
-
-#tab-zoom {
-  .zoom {
-    &__title {
-      &--granularity {
-        @include mini-font;
-        margin-top: .5rem;
-      }
-
-      &--tags {
-        margin: .25rem 0 .25rem 0;
-
-        .tag {
-          cursor: pointer;
-        }
-      }
-    }
-
-    &__toggle-commit-message-body {
-      padding-top: 10px;
-    }
-
-    &__day,
-    &__title {
-      @include small-font;
-
-      h3 {
-        @include large-font;
-      }
-
-      /* Tags in commits */
-      .tag {
-        @include mini-font;
-        background: mui-color('grey', '600');
-        border-radius: 5px;
-        color: mui-color('white');
-        display: inline-block;
-        margin: .2rem .2rem .2rem 0;
-        padding: 0 3px 0 3px;
-
-        .fa-tags {
-          width: .65rem;
-        }
-      }
-    }
-  }
-
-  /* Commit Message Body in Zoom Tab */
-  .commit-message {
-    border: 1px solid transparent;
-    padding: 5px;
-
-    &:focus,
-    &:focus-within {
-      border: 1px solid mui-color('blue', '500');
-    }
-
-    &.active {
-      .body {
-        background-color: mui-color('white');
-        border: 1px solid mui-color('grey', '700');
-        display: grid;
-        margin: .25rem 0 .25rem 0;
-        overflow-x: auto;
-        padding: .4rem;
-        resize: none;
-
-        pre {
-          @include mono-font;
-          position: relative;
-
-          .dashed-border {
-            border-right: 1px dashed mui-color('grey', '500'); // 72nd character line
-            height: 100%;
-            pointer-events: none;
-            position: absolute;
-            top: 0;
-            width: 72ch;
-          }
-        }
-      }
-    }
-
-    .code-merge-icon {
-      color: mui-color('grey');
-
-      .fa-code-merge {
-        width: .65rem;
-      }
-    }
-
-    .body {
-      display: none;
-    }
-
-    .tag {
-      cursor: pointer;
-
-      &:focus {
-        border: 1px solid mui-color('blue', '500');
-        outline: none;
-      }
-    }
-
-    &--button {
-      color: mui-color('grey');
-      padding-left: .5rem;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-
-    pre {
-      margin: 0;
-    }
-
-    span.loc {
-      color: mui-color('grey');
-    }
-
-    .message-title {
-      @include mono-font;
-      display: inline;
-
-      .within-border {
-        display: inline;
-      }
-
-      .not-within-border {
-        border-left: 1px dashed mui-color('grey', '500'); // 50th character line
-        display: inline;
-      }
-    }
-  }
-}
-
+@import '../styles/c-zoom.scss';
 </style>