wip re-styling env-vars

assets/scripts/app/templates/env_vars.hbs

@@ -6,13 +6,12 @@
       {{#if isEditing}}
         {{partial 'env_vars/form'}}
       {{else}}
-        <span class="name">{{name}}</span>
-        <span class="equals">=</span>
-        <span class="value value-display">{{value}}</span>
         <a href="#" class="edit-var" {{action "edit"}}>Edit</a>
         <a href="#" {{action "delete"}} {{bind-attr class=":delete-var isDeleting:deleting"}}>
           Delete
         </a>
+        <span class="name">{{name}}</span>
+        <span class="value value-display">{{value}}</span>
       {{/if}}
     </li>
   {{/each}}

assets/styles/settings.sass

@@ -96,20 +96,20 @@
       font-weight: 600
       color: #5e6872
 
-  .env-var-value
+  span.value.value-display
-    span
+    font-size: 14px
-      color: #838b8c
+    background-color: #efefdf
-      marin-bottom: 6px
+    border-radius: 4px
-
+    padding: 0 10px 0 10px
-    .value-display
+    color: #838b8c
-      letter-spacing: 2px
+    font-family: monospace
-      font-size: 15px
 
   .add-env-var, .add-ssh-key
     color: #ffffff
     background-color: #97a3aa
     border-radius: 4px
     padding: 8px 12px 8px 12px
+    margin-bottom: 20px
     font-size: 13px
     line-height: 55px
     cursor: pointer
@@ -179,23 +179,20 @@
     font-size: 13px
     cursor: pointer
 
-  .delete-var, .edit-var
-    float: right
-    margin-right: 10px
-
   .delete-var:hover, .delete-ssh-key:hover
     background-color: #820b0b
 
   ul.env-vars
     display: block
   li.env-var
-    margin: 20px 40px 0 0
+    margin: 10px 40px 0 0
+    padding-bottom: 10px
     overflow: auto
     display: flex
     align-items: center
     justify-content: center
-    border-bottom: 1px dotted #bbb
+    border-bottom: 1px solid #F1F1F1
-    max-width: 800px
+    width: 100%
 
     form
       padding-left: 15px
@@ -238,8 +235,8 @@
         margin-right: 5px
 
     span.name, span.value, .equals
-      display: block
+      display: inline-block
-      float: left
+      line-height: 40px
       position: relative
       font-size: 15px
 
@@ -247,10 +244,10 @@
       margin: 0 10px
 
     span.name
-      width: 30%
+      width: 120px
-      text-align: right
+      margin: 0 10px 0 20px
+      text-align: left
 
     span.value
-      width: 45%
+      width: 400px
       text-align: left
-      margin-right: 15px