Merge pull request #148 from cugos/style-updates

pulling colors into variables
cugos · Jun 17, 2015 · 51eb127 · 51eb127
2 parents d92ff5b + e5b251e
commit 51eb127
Show file tree

Hide file tree

Showing 11 changed files with 111 additions and 202 deletions.
diff --git a/src/index.html b/src/index.html
@@ -3,6 +3,7 @@
   <title>Drip. Drop. Drip.</title>
 
   <link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
+  <link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
   <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
   <link href="//api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css" rel="stylesheet" />
   <link href="css/app.css" rel="stylesheet">

diff --git a/src/js/layerlist/LayerList.js b/src/js/layerlist/LayerList.js
@@ -153,8 +153,8 @@ L.Dropchop.LayerList = L.Control.extend({
         li.className = 'layer-element ' + obj.name;
 
         // Put it all together
-        li.appendChild(inputEl);
         li.appendChild(layerItem);
+        li.appendChild(inputEl);
         return li;
 
         // used to count how many layers currently exist

diff --git a/src/sass/_base.scss b/src/sass/_base.scss
@@ -23,8 +23,9 @@ ol {
 body {
   padding:0;
   margin:0;
-  font-family:$ff;
+  font-family:$font-mono;
   @include transition(.3s);
+  font-size: $body-text-base;
 }
 
 body.dragging {

diff --git a/src/sass/_colors.scss b/src/sass/_colors.scss
diff --git a/src/sass/_globals.scss b/src/sass/_globals.scss
@@ -1,8 +1,4 @@
 /* globals */
-
-/* font-family */
-$ff: 'Open Sans', sans-serif;
-
 .btn {
   font-size: .7em;
   text-transform: uppercase;
@@ -12,9 +8,8 @@ $ff: 'Open Sans', sans-serif;
   cursor:pointer;
   &.close {
     padding:.2em .2em .3em .35em;
-    font-size:1em;
-    background:$white;
-    color:$red;
+    background:$button-close-background;
+    color:$button-close-color;
   }
 }
 

diff --git a/src/sass/_inputs.scss b/src/sass/_inputs.scss
@@ -12,17 +12,18 @@
 }
 
 .form {
+  font-size:1.1em;
   display:block;
   position:relative;
   margin:auto;
   width:300px;
-  background:$white;
-  box-shadow:$shadow;
+  background:$form-background;
+  box-shadow:$ui-shadow;
 
   .form-information {
     padding:10px;
-    background:$black;
-    color:$white;
+    background:$form-information-background;
+    color:$form-information-text;
   }
 
   .form-inputs {}
@@ -32,49 +33,49 @@
   }
 
   .form-description {
-    font-size:.8em;
     padding:5px 0;
-    color:$grey-light;
+    color:$form-description-text;
+    font-family: $form-description-font;
+    font-weight: 300;
+    font-size: .85em;
   }
 
   .parameter {
     display:block;
     padding:10px;
-    border-top:1px solid $grey;
+    border-top: $form-param-border;
 
     .parameter-name {
       text-transform: uppercase;
       display: inline-block;
-      font-size: .75em;
       font-weight:900;
-      color:$red;
+      color:$form-param-text;
       letter-spacing: .1em;
     }
 
     input, select {
       display:block;
-      font-family:$ff;
+      font-family:$font-input;
       width:100%;
       font-size:.9em;
       padding:.3em;
     }
 
     .parameter-description {
       font-size:.7em;
-      color:$gray;
+      color:$form-param-description;
     }
   }
 
   .form-submit {
-    background:$olive;
-    color:$white;
+    background:$form-submit-background;
+    color:$form-submit-text;
     float:left;
   }
 
   .form-close {
     position:absolute;
-    top:-24px;
     right:0;
-    box-shadow:$shadow;
+    font-size:.9em;
   }
 }
diff --git a/src/sass/_layerlist.scss b/src/sass/_layerlist.scss
@@ -3,7 +3,7 @@
   top:41px;
   bottom:0;
   width:250px;
-  background:$grey-light;
+  background:$layerlist-background;
 }
 
 /* LAYER LIST */
@@ -13,36 +13,41 @@
       background:transparent;
     }
   }
+
   margin:0;
   list-style-type: none;
   padding:0;
+
   .layer-element {
-    border-bottom:1px solid $grey-dark;
+    position:relative;
   }
+
   .layer-toggle {
-    margin:10px;
+    position: absolute;
+    top: 5px;
+    left: 3px;
   }
+
   .layer-name {
-    display:inline-block;
-    border-left:1px solid $grey;
     padding:8px;
-    font-size:.8em;
+    font-size: $layer-fontsize;
+    padding-left:26px;
     &::selection {
       background:transparent;
     }
     &:hover {
-      background:$grey;
+      background:$layer-hover;
       cursor:pointer;
     }
     &.selected {
-      background:$selected;
-      color:$grey-light;
+      background:$layer-selected-background;
+      color:$layer-selected-text;
     }
   }
 }
 
 #add-remove {
   width: 100%;
-  background-color:$white;
+  background-color:$menu-bottom-background;
   text-align:center;
 }
diff --git a/src/sass/_nav.scss b/src/sass/_nav.scss
@@ -6,7 +6,7 @@
   top:0;
   left:0;
   width:100%;
-  background:$white;
+  background:$menu-background;
   padding:5px;
 }
 
@@ -24,14 +24,16 @@
   }
 }
 .menu-button {
-  background:$white;
+  font-family:$font-input;
+  background:$menu-background;
   border-radius:0;
   border:none;
   padding:8px;
-  font-size:.8em;
+  font-size:.9em;
+  text-transform:uppercase;
   font-weight:100;
   letter-spacing:.05em;
-  color:$black;
+  color:$menu-text;
   cursor:pointer;
   display:inline-block;
   &:focus {
@@ -50,7 +52,7 @@
     display:block;
     min-width:150px;
     text-align:left;
-    border-top:1px solid $grey-dark;
+    border-top:1px solid $menu-border;
   }
 }