[#2112] Move Segment CSS into c-segment.vue (#2113)

The segment component CSS currently resides in the c-authorship-file component. Moving it to the segment component would make it easier to edit the segment component in the future. Let's move the CSS into c-segment.vue.
reposense · Feb 19, 2024 · fdb1892 · fdb1892
1 parent b103e28
commit fdb1892
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 74 deletions.
diff --git a/frontend/src/components/c-authorship-file.vue b/frontend/src/components/c-authorship-file.vue
@@ -347,78 +347,5 @@ export default defineComponent({
       padding-left: 4rem;
     }
   }
-
-  .segment {
-    border-left: .25rem solid mui-color('green');
-
-    .code {
-      background-color: mui-color('github', 'authored-code-background');
-      padding-left: 1rem;
-    }
-
-    .line-number {
-      color: mui-color('grey');
-      float: left;
-      // Not allowing user to select text
-      -webkit-touch-callout: none;
-      /* iOS Safari */
-      -webkit-user-select: none;
-      /* Safari */
-      -khtml-user-select: none;
-      /* Konqueror HTML */
-      -moz-user-select: none;
-      /* Firefox */
-      -ms-user-select: none;
-      /* Internet Explorer/Edge */
-      user-select: none;
-      /* Non-prefixed version, currently supported by Chrome and Opera */
-      width: 2rem;
-
-      // overwrite all hljs colors
-      [class^='hljs'] {
-        color: mui-color('grey');
-      }
-    }
-
-    .line-content {
-      padding-left: 2rem;
-      word-break: break-word;
-    }
-
-    &.untouched {
-      $grey: mui-color('grey', '400');
-      border-left: .25rem solid $grey;
-      height: 20px;
-      /* height of a single line of code */
-      position: relative;
-
-      &.active {
-        height: auto;
-
-        .code {
-          background-color: mui-color('white');
-        }
-      }
-
-      .closer {
-        cursor: pointer;
-        // custom margin for position of toggle icon
-        margin: .2rem 0 0 -.45rem;
-        position: absolute;
-
-        &.bottom {
-          //custom margin for position of toggle icon at the bottom of segment
-          margin: -1.05rem 0 0 -.45rem;
-        }
-
-        .icon {
-          background-color: mui-color('white');
-          color: mui-color('grey');
-          width: .75em;
-        }
-      }
-    }
-  }
-
 }
 </style>
diff --git a/frontend/src/components/c-segment.vue b/frontend/src/components/c-segment.vue
@@ -69,6 +69,78 @@ export default defineComponent({
 });
 </script>
 
-<style lang="css">
+<style lang="scss" scoped>
 @import '../styles/hightlight-js-style.css';
+
+.segment {
+  border-left: .25rem solid mui-color('green');
+
+  .code {
+    background-color: mui-color('github', 'authored-code-background');
+    padding-left: 1rem;
+  }
+
+  .line-number {
+    color: mui-color('grey');
+    float: left;
+    // Not allowing user to select text
+    -webkit-touch-callout: none;
+    /* iOS Safari */
+    -webkit-user-select: none;
+    /* Safari */
+    -khtml-user-select: none;
+    /* Konqueror HTML */
+    -moz-user-select: none;
+    /* Firefox */
+    -ms-user-select: none;
+    /* Internet Explorer/Edge */
+    user-select: none;
+    /* Non-prefixed version, currently supported by Chrome and Opera */
+    width: 2rem;
+
+    // overwrite all hljs colors
+    [class^='hljs'] {
+      color: mui-color('grey');
+    }
+  }
+
+  .line-content {
+    padding-left: 2rem;
+    word-break: break-word;
+  }
+
+  &.untouched {
+    $grey: mui-color('grey', '400');
+    border-left: .25rem solid $grey;
+    height: 20px;
+    /* height of a single line of code */
+    position: relative;
+
+    &.active {
+      height: auto;
+
+      .code {
+        background-color: mui-color('white');
+      }
+    }
+
+    .closer {
+      cursor: pointer;
+      // custom margin for position of toggle icon
+      margin: .2rem 0 0 -.45rem;
+      position: absolute;
+
+      &.bottom {
+        //custom margin for position of toggle icon at the bottom of segment
+        margin: -1.05rem 0 0 -.45rem;
+      }
+
+      .icon {
+        background-color: mui-color('white');
+        color: mui-color('grey');
+        width: .75em;
+      }
+    }
+  }
+}
 </style>