Fix dots and slash styles

2 files changed, 18 insertions, 14 deletions

diff --git a/index.js b/index.js
index 2dece11..fcb42e3 100644
--- a/index.js
+++ b/index.js
@@ -40,9 +40,11 @@ class IPAddress extends React.Component {
     return <div className="ip-address">
       <div className="address">
         {[...Array(4)].map((x, octet) =>
-          <input className="octet" type="text" data-octet={octet} onChange={this.handleChange} value={this.state.octets[octet]}/>
+          <span className="octet">
+            <input className="octet" type="text" data-octet={octet} onChange={this.handleChange} value={this.state.octets[octet]}/>
+            <span className="dot">{octet == '3' ? '/' : '.'}</span>
+          </span>
         )}
-        <span className="slash">&#47;</span>
         <input className="cidr" type="text" data-octet="cidr" onChange={this.handleChange} value={this.state.cidr}/>
       </div>
 
diff --git a/style.scss b/style.scss
index b04653b..477809c 100644
--- a/style.scss
+++ b/style.scss
@@ -4,6 +4,7 @@ $color_a: #A101A6;
 $color_b: #D9005B;
 $color_c: #84E900;
 $color_d: #CFF700;
+$color_e: #AAA;
 $octet_lighten: 15%;
 
 body {
@@ -22,24 +23,25 @@ body {
     }
     div.address {
       input {
-        width: 3em;
+        width: 2.5em;
         font-size: 2.7em;
         text-align: center;
         border: 0px;
+        border-radius: 3px;
       }
-      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;
+      span.octet {
+        span.dot {
+          font-size: 2.7em;
+          text-align: center;
+          padding: 0.1em 0.13em;
+        }
+        &:nth-child(1) input.octet { background-color: $color_a; }
+        &:nth-child(2) input.octet { background-color: $color_b; }
+        &:nth-child(3) input.octet { background-color: $color_c; }
+        &:nth-child(4) input.octet { background-color: $color_d; }
       }
       input.cidr {
-
+        background-color: $color_e;
       }
     }
     div.bits {