move css to scss

package.json

@@ -20,6 +20,7 @@
     "@types/react-dom": "16.9.4",
     "husky": "3.1.0",
     "lint-staged": "9.5.0",
+    "node-sass": "^4.13.0",
     "prettier": "1.19.1",
     "typescript": "3.7.4"
   },

src/index.tsx

@@ -13,7 +13,7 @@ import {
 
 import { moveOneLeft, moveAllLeft, moveOneRight, moveAllRight } from "./zindex";
 
-import "./styles.css";
+import "./styles.scss";
 
 type ExcalidrawElement = ReturnType<typeof newElement>;
 type ExcalidrawTextElement = ExcalidrawElement & {

src/styles.css

@@ -1,113 +0,0 @@
-/* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
-@font-face {
-  font-family: "Virgil";
-  src: url("https://uploads.codesandbox.io/uploads/user/ed077012-e728-4a42-8395-cbd299149d62/AflB-FG_Virgil.ttf");
-  font-display: swap;
-}
-
-body {
-  margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-.container {
-  display: flex;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.sidePanel {
-  width: 230px;
-  background-color: #eee;
-
-  padding: 10px;
-  overflow-y: auto;
-}
-
-.sidePanel h4 {
-  margin: 10px 0 10px 0;
-}
-
-.sidePanel .panelTools {
-  display: flex;
-  justify-content: space-between;
-}
-
-.sidePanel .panelTools label {
-  margin: 0;
-}
-
-.sidePanel .panelColumn {
-  display: flex;
-  flex-direction: column;
-}
-
-.tool input[type="radio"] {
-  display: none;
-}
-
-.tool input[type="radio"] + .toolIcon {
-  background-color: #ddd;
-
-  width: 41px;
-  height: 41px;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  border-radius: 3px;
-}
-
-.tool input[type="radio"]:hover + .toolIcon {
-  background-color: #e7e5e5;
-}
-.tool input[type="radio"]:checked + .toolIcon {
-  background-color: #bdbebc;
-}
-
-label {
-  margin-right: 6px;
-}
-
-label span {
-  display: inline-block;
-}
-
-input[type="number"] {
-  width: 30px;
-}
-
-input[type="color"] {
-  margin: 2px;
-}
-
-input {
-  margin-right: 5px;
-}
-
-button {
-  background-color: #ddd;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  margin: 2px 0;
-  padding: 5px;
-  outline: none;
-}
-
-button:hover {
-  background-color: #e7e5e5;
-  border-color: #d6d4d4;
-}
-
-button:active {
-  background-color: #bdbebc;
-  border-color: #bdbebc;
-}
-
-button:disabled {
-  cursor: not-allowed;
-}

src/styles.scss

@@ -0,0 +1,115 @@
+/* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
+@font-face {
+  font-family: "Virgil";
+  src: url("https://uploads.codesandbox.io/uploads/user/ed077012-e728-4a42-8395-cbd299149d62/AflB-FG_Virgil.ttf");
+  font-display: swap;
+}
+
+body {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.container {
+  display: flex;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.sidePanel {
+  width: 230px;
+  background-color: #eee;
+
+  padding: 10px;
+  overflow-y: auto;
+
+  h4 {
+    margin: 10px 0 10px 0;
+  }
+
+  .panelTools {
+    display: flex;
+    justify-content: space-between;
+
+    label {
+      margin: 0;
+    }
+  }
+
+  .panelColumn {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.tool {
+  input[type="radio"] {
+    display: none;
+  }
+
+  input[type="radio"] {
+    & + .toolIcon {
+      background-color: #ddd;
+
+      width: 41px;
+      height: 41px;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      border-radius: 3px;
+    }
+    &:hover + .toolIcon {
+      background-color: #e7e5e5;
+    }
+    &:checked + .toolIcon {
+      background-color: #bdbebc;
+    }
+  }
+}
+
+label {
+  margin-right: 6px;
+  span {
+    display: inline-block;
+  }
+}
+
+input[type="number"] {
+  width: 30px;
+}
+
+input[type="color"] {
+  margin: 2px;
+}
+
+input {
+  margin-right: 5px;
+}
+
+button {
+  background-color: #ddd;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin: 2px 0;
+  padding: 5px;
+  outline: none;
+
+  &:hover {
+    background-color: #e7e5e5;
+    border-color: #d6d4d4;
+  }
+
+  &:active {
+    background-color: #bdbebc;
+    border-color: #bdbebc;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}