Style classes and initial color scheme

2 files changed, 62 insertions, 30 deletions

diff --git a/index.js b/index.js
index a6e2ec7..2dece11 100644
--- a/index.js
+++ b/index.js
@@ -36,25 +36,30 @@ class IPAddress extends React.Component {
 
   render() {
     var pretty = this.state.octets.join('.') + '/' + this.state.cidr
-    return <form class="ip-address">
-      {[...Array(4)].map((x, octet) =>
-        <input class="octet" type="text" data-octet={octet} onChange={this.handleChange} value={this.state.octets[octet]}/>
-      )}
-      <input class="cidr" type="text" data-octet="cidr" onChange={this.handleChange} value={this.state.cidr}/>
-      <h2>Result: {pretty}</h2>
 
-      <ol>
+    return <div className="ip-address">
+      <div className="address">
         {[...Array(4)].map((x, octet) =>
-          <li class="octet">
-            <ol>
-              {[...Array(8)].map((x, bit) =>
-                <li class="bit">{(this.state.octets[octet] & (1 << (7-bit))) >> (7-bit)}</li>
-              )}
-            </ol>
-          </li>
+          <input className="octet" type="text" data-octet={octet} onChange={this.handleChange} value={this.state.octets[octet]}/>
         )}
-      </ol>
-    </form>
+        <span className="slash">&#47;</span>
+        <input className="cidr" type="text" data-octet="cidr" onChange={this.handleChange} value={this.state.cidr}/>
+      </div>
+
+      <div className="bits">
+        <ol>
+          {[...Array(4)].map((x, octet) =>
+            <li className="octet">
+              <ol>
+                {[...Array(8)].map((x, bit) =>
+                  <li className="bit">{(this.state.octets[octet] & (1 << (7-bit))) >> (7-bit)}</li>
+                )}
+              </ol>
+            </li>
+          )}
+        </ol>
+      </div>
+    </div>
   }
 }
 
diff --git a/style.scss b/style.scss
index d9a22f2..cad20c0 100644
--- a/style.scss
+++ b/style.scss
@@ -1,5 +1,10 @@
 @import 'bourbon';
 
+$color_a: #A101A6;
+$color_b: #D9005B;
+$color_c: #84E900;
+$color_d: #CFF700;
+
 body {
 
   background: #eee;
@@ -9,25 +14,47 @@ body {
     margin-bottom: 30px;
   }
 
-  form {
+  div.ip-address {
     text-align: center;
-    input {
-      width: 3em;
-      font-size: 2.7em;
-      text-align: center;
-      border: 0px;
-      background: transparent;
+    div {
+      margin-top: 65px;
     }
-  }
+    div.address {
+      input {
+        width: 3em;
+        font-size: 2.7em;
+        text-align: center;
+        border: 0px;
+      }
+      input.octet {
+        &:nth-child(1) { background-color: $color_a; }
+        &:nth-child(2) { background-color: $color_b; }
+        &:nth-child(3) { background-color: $color_c; }
+        &:nth-child(4) { background-color: $color_d; }
+      }
+      span.slash {
+        font-size: 2.7em;
+        text-align: center;
+        padding: 0.4em 0.6em;
+      }
+      input.cidr {
 
-  ol {
-    display: inline;
-    li {
-      display: inline;
+      }
+    }
+    div.bits {
       ol {
+        display: inline;
+        padding-left: 0px;
+        padding-right: 15px;
         li {
-          padding: 0.4em 0.6em;
-          border: 1px black solid;
+          display: inline;
+          ol {
+            li {
+              padding: 0.4em 0.6em;
+              margin-left: -1px;
+              border: 1px black solid;
+            }
+          }
         }
       }
     }