#29: Move scoped styles to _tools.scss

app/src/assets/css/modules/_tools.scss

@@ -0,0 +1,50 @@
+// ChemProps.vue
+html {
+  scroll-behavior: smooth;
+}
+
+// CsvPlotter.vue
+.upload {
+  border: 5px dashed #777777;
+  min-height: 400px;
+}
+
+// LineChart.vue
+// Line
+.nm-line {
+  stroke: #3cba54;
+  stroke-width: 2px;
+  fill: none;
+}
+
+.tooltip {
+  fill: white;
+  stroke: #444;
+}
+
+.overlay {
+  fill: none;
+  pointer-events: all;
+}
+
+// ReferenceContainer.vue
+.reference {
+  padding-left: 36px;
+  text-indent: -36px;
+}
+
+// PixelUnit.vue
+#unit-cell {
+  background-color: #c0c0c0;
+  position: relative;
+  margin-left: 0px;
+  margin-top: 0px;
+  min-width: 300px;
+  min-height: 300px;
+  max-width: 300px;
+  max-height: 300px;
+}
+
+.adjust-padding {
+  padding: 3rem !important;
+}

app/src/assets/css/style.scss

@@ -16,4 +16,5 @@
 @import './modules/_section.scss';
 @import './modules/_utility.scss';
 @import './modules/_vega.scss';
-@import './modules/_visualize.scss';
+@import './modules/_visualize.scss';
+@import './modules/_tools.scss';

app/src/components/nanomine/LineChart.vue

@@ -197,22 +197,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-// Line
-.nm-line {
-  stroke: #3cba54;
-  stroke-width: 2px;
-  fill: none;
-}
-
-.tooltip {
-  fill: white;
-  stroke: #444;
-}
-
-.overlay {
-  fill: none;
-  pointer-events: all;
-}
-</style>

app/src/components/nanomine/ReferenceContainer.vue

@@ -45,9 +45,3 @@ export default {
   }
 }
 </script>
-<style scoped lang="scss">
-.reference {
-  padding-left: 36px;
-  text-indent: -36px;
-}
-</style>

app/src/pages/metamine/PixelUnit/PixelUnit.vue

@@ -1,18 +1,2 @@
 <template src="./PixelUnit.html"></template>
 <script src="./PixelUnit.js"></script>
-<style scoped>
-#unit-cell {
-  background-color: #c0c0c0;
-  position: relative;
-  margin-left: 0px;
-  margin-top: 0px;
-  min-width: 300px;
-  min-height: 300px;
-  max-width: 300px;
-  max-height: 300px;
-}
-
-.adjust-padding {
-  padding: 3rem !important;
-}
-</style>

app/src/pages/nanomine/csvPlotter/CsvPlotter.vue

@@ -1,8 +1,2 @@
 <template src="./csvPlotter.html"></template>
 <script src="./csvPlotter.js"></script>
-<style scoped>
-  .upload {
-    border: 5px dashed #777777;
-    min-height: 400px;
-  }
-</style>

app/src/pages/nanomine/tools/chemProps/ChemProps.vue

@@ -1,8 +1,2 @@
 <template src="./chemProps.html"></template>
 <script src="./chemProps.js"></script>
-
-<style scoped>
-  html {
-    scroll-behavior: smooth;
-  }
-</style>