style env vars form

app/styles/app/layouts/settings.sass

@@ -89,8 +89,13 @@ $input-main-height: 30px
 
 .env-var-name
   display: inline-block
+  position: relative
   width: grid-calc(6, 12)
   vertical-align: middle
+  overflow: hidden
+  &:after
+    content: ""
+    @include fadeOut(right, -90deg, #F6F5F5)
 
 .env-var-value
   display: inline-block
@@ -126,7 +131,6 @@ $input-main-height: 30px
     width: 1.1em
     height: 1.3em
     margin: .2em auto 0
-  
 
   .tooltip
     display: none
@@ -159,4 +163,54 @@ $input-main-height: 30px
       display: block
 
 
+.form--envvar
+  .form-elem
+    display: inline-block
+    vertical-align: middle
+
+  .form-elem:first-of-type,
+  .form-elem:nth-of-type(2)
+    width: 49.6%
+  .form-elem:nth-of-type(3)
+    width: 50%
+  .form-elem:last-of-type
+    width: 50%
+    float: right
+    text-align: right
+
+  @media #{$medium-up}
+    .form-elem:first-of-type,
+    .form-elem:nth-of-type(2)
+      width: 32%
+      margin-right: 1em
+    .form-elem:nth-of-type(3)
+      width: 24%
+    .form-elem:last-of-type
+      width: 6%
+      float: right
+      text-align: right
+  input
+    display: inline-block
+    height: 32px
+    width: 100%
+    padding: .2em .4em
+    border: 1px solid #eeedec
+    border-radius: 4px
+    color: #8e8f8e
+    font-size: $font-size-sm
+
+  .form-submit
+    padding: .5em .8em
+    color: $white
+    font-size: $font-size-sm
+    &:hover
+      background-color: #3BA85D
+      cursor: pointer
+  //refactor into switch component
+  .settings-switch
+    .label
+      display: inline-block
+      width: 7em
+      font-size: 12px
+      line-height: 1.3
 

app/styles/app/modules/switch.sass

@@ -93,6 +93,8 @@
   .on
     display: none
     margin-left: 0
+  .off
+    margin-left: 36px
 
   &.active
     div
@@ -101,6 +103,5 @@
         background-color: #3BA85D
     .on
       display: inline-block
-      margin-left: 36px
     .off
       display: none

app/templates/components/settings-switch.hbs

@@ -6,4 +6,4 @@
     OFF
   </span>
 </div>
-<span class="label">Some label text</span>
+<span class="label">Some label text</span>

app/templates/settings.hbs

@@ -24,6 +24,24 @@
       <li>{{env-var}}</li>
     </ul>
 
+
+     <div class="form--envvar">
+       <form action="">
+         <div class="form-elem">
+           <input type="text" placeholder="Name">
+         </div>
+         <div class="form-elem">
+           <input type="text" placeholder="Value">
+         </div>
+         <div class="form-elem">
+           {{settings-switch inline="true"}}
+         </div>
+         <div class="form-elem">
+           <input type="submit" class="form-submit" value="Add">
+         </div>
+       </form>
+     </div>
+
   </section>
 {{#if config.endpoints.sshKey}}
   <section class="settings-section">