(Add) NPM Publisg CodeEditor CSS

Author: gronxb

demo/src/style.css

@@ -22,50 +22,4 @@ html {
     margin: 0;
     padding: 0;
   }
-  
-  /* App */
-  .container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-  }
-  
-  .container__content {
-    width: 440px;
-    max-width: 100%;
-    padding: 10px;
-    text-align: center;
-  }
-  
-  .container_editor_area {
-    tab-size: 4ch;
-    max-height: 400px;
-    overflow: auto;
-    margin: 1.67em 0;
-  }
-  
-  .container__editor {
-    font-size: 12px;
-    font-variant-ligatures: common-ligatures;
-    background-color: #fafafa;
-    border-radius: 3px;
-  }
-  
-  .container__editor textarea {
-    outline: 0;
-  }
-  
-  .button {
-    display: inline-block;
-    padding: 0 6px;
-    text-decoration: none;
-    background: #000;
-    color: #fff;
-  }
-  
-  .button:hover {
-    background: linear-gradient(45deg, #E42B66, #E2433F);
-  }
 

lib/CodeEditor.css

@@ -0,0 +1,35 @@
+
+  /* App */
+  .container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+  }
+  
+  .container__content {
+    width: 440px;
+    max-width: 100%;
+    padding: 10px;
+    text-align: center;
+  }
+  
+  .container_editor_area {
+    tab-size: 4ch;
+    max-height: 400px;
+    overflow: auto;
+    margin: 1.67em 0;
+  }
+  
+  .container__editor {
+    font-size: 12px;
+    font-variant-ligatures: common-ligatures;
+    background-color: #fafafa;
+    border-radius: 3px;
+  }
+  
+  .container__editor textarea {
+    outline: 0;
+  }
+  

lib/CodeEditor.js

@@ -7,6 +7,7 @@ import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-markup';
 import 'prismjs/components/prism-jsx';
 import 'prismjs/themes/prism.css';
+import './CodeEditor.css';
 
 export function CodeEditor({ InitCode }) {
   const IframeData = useContext(IFrameContext);

src/CodeEditor.css

@@ -0,0 +1,35 @@
+
+  /* App */
+  .container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+  }
+  
+  .container__content {
+    width: 440px;
+    max-width: 100%;
+    padding: 10px;
+    text-align: center;
+  }
+  
+  .container_editor_area {
+    tab-size: 4ch;
+    max-height: 400px;
+    overflow: auto;
+    margin: 1.67em 0;
+  }
+  
+  .container__editor {
+    font-size: 12px;
+    font-variant-ligatures: common-ligatures;
+    background-color: #fafafa;
+    border-radius: 3px;
+  }
+  
+  .container__editor textarea {
+    outline: 0;
+  }
+  

src/CodeEditor.js

@@ -7,6 +7,7 @@ import 'prismjs/components/prism-javascript';
 import 'prismjs/components/prism-markup';
 import 'prismjs/components/prism-jsx';
 import 'prismjs/themes/prism.css';
+import './CodeEditor.css';
 
 export function CodeEditor({ InitCode }) {
   const IframeData = useContext(IFrameContext);