diff --git a/src/index.html b/src/index.html
index 40ccf00..f6f225b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,6 +3,7 @@
Drip. Drop. Drip.
+
diff --git a/src/js/layerlist/LayerList.js b/src/js/layerlist/LayerList.js
index a5b7889..812a6ac 100644
--- 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
index 9763c12..c761d11 100644
--- 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
deleted file mode 100644
index b18c65f..0000000
--- a/src/sass/_colors.scss
+++ /dev/null
@@ -1,148 +0,0 @@
-/** COLORS
- * https://github.com/mrmrs/colors
- *
- */
-
-// Cool
-$aqua: #7FDBFF;
-$blue: #0074D9;
-$navy: #001F3F;
-$teal: #39CCCC;
-$green: #2ECC40;
-$olive: #3D9970;
-$lime: #01FF70;
-
-// Warm
-$yellow: #FFDC00;
-$orange: #FF851B;
-$red: #FF4136;
-$fuchsia: #F012BE;
-$purple: #B10DC9;
-$maroon: #85144B;
-
-// Gray Scale
-$white: #fff;
-$silver: #ddd;
-$gray: #aaa;
-$black: #111;
-
-// custom
-$grey: #e5e5e5;
-$grey-light: #f6f6f6;
-$grey-dark: #c0c0c0;
-
-/*
- SKINS
- - Backgrounds
- - Colors
- - Border colors
- - SVG fills
- - SVG Strokes
-*/
-
-
-/* Backgrounds */
-
-.bg-navy { background-color: $navy; }
-.bg-blue { background-color: $blue; }
-.bg-aqua { background-color: $aqua; }
-.bg-teal { background-color: $teal; }
-.bg-olive { background-color: $olive; }
-.bg-green { background-color: $green; }
-.bg-lime { background-color: $lime; }
-.bg-yellow { background-color: $yellow; }
-.bg-orange { background-color: $orange; }
-.bg-red { background-color: $red; }
-.bg-fuchsia { background-color: $fuchsia; }
-.bg-purple { background-color: $purple; }
-.bg-maroon { background-color: $maroon; }
-.bg-white { background-color: $white; }
-.bg-gray { background-color: $gray; }
-.bg-silver { background-color: $silver; }
-.bg-black { background-color: $black; }
-
-
-/* Colors */
-
-.navy { color: $navy; }
-.blue { color: $blue; }
-.aqua { color: $aqua; }
-.teal { color: $teal; }
-.olive { color: $olive; }
-.green { color: $green; }
-.lime { color: $lime; }
-.yellow { color: $yellow; }
-.orange { color: $orange; }
-.red { color: $red; }
-.fuchsia { color: $fuchsia; }
-.purple { color: $purple; }
-.maroon { color: $maroon; }
-.white { color: $white; }
-.silver { color: $silver; }
-.gray { color: $gray; }
-.black { color: $black; }
-
-
-/* Border colors
- Use with another border utility that sets border-width and style
- i.e .border { border-width: 1px; border-style: solid; }
-*/
-
-.border--navy { border-color: $navy; }
-.border--blue { border-color: $blue; }
-.border--aqua { border-color: $aqua; }
-.border--teal { border-color: $teal; }
-.border--olive { border-color: $olive; }
-.border--green { border-color: $green; }
-.border--lime { border-color: $lime; }
-.border--yellow { border-color: $yellow; }
-.border--orange { border-color: $orange; }
-.border--red { border-color: $red; }
-.border--fuchsia { border-color: $fuchsia; }
-.border--purple { border-color: $purple; }
-.border--maroon { border-color: $maroon; }
-.border--white { border-color: $white; }
-.border--gray { border-color: $gray; }
-.border--silver { border-color: $silver; }
-.border--black { border-color: $black; }
-
-
-/* Fills for SVG */
-
-.fill-navy { fill: $navy; }
-.fill-blue { fill: $blue; }
-.fill-aqua { fill: $aqua; }
-.fill-teal { fill: $teal; }
-.fill-olive { fill: $olive; }
-.fill-green { fill: $green; }
-.fill-lime { fill: $lime; }
-.fill-yellow { fill: $yellow; }
-.fill-orange { fill: $orange; }
-.fill-red { fill: $red; }
-.fill-fuchsia { fill: $fuchsia; }
-.fill-purple { fill: $purple; }
-.fill-maroon { fill: $maroon; }
-.fill-white { fill: $white; }
-.fill-gray { fill: $gray; }
-.fill-silver { fill: $silver; }
-.fill-black { fill: $black; }
-
-/* Strokes for SVG */
-
-.stroke-navy { stroke: $navy; }
-.stroke-blue { stroke: $blue; }
-.stroke-aqua { stroke: $aqua; }
-.stroke-teal { stroke: $teal; }
-.stroke-olive { stroke: $olive; }
-.stroke-green { stroke: $green; }
-.stroke-lime { stroke: $lime; }
-.stroke-yellow { stroke: $yellow; }
-.stroke-orange { stroke: $orange; }
-.stroke-red { stroke: $red; }
-.stroke-fuchsia { stroke: $fuchsia; }
-.stroke-purple { stroke: $purple; }
-.stroke-maroon { stroke: $maroon; }
-.stroke-white { stroke: $white; }
-.stroke-gray { stroke: $gray; }
-.stroke-silver { stroke: $silver; }
-.stroke-black { stroke: $black; }
\ No newline at end of file
diff --git a/src/sass/_globals.scss b/src/sass/_globals.scss
index 9c67bf4..f415de7 100644
--- 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
index 22d1d87..49a1635 100644
--- 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,28 +33,29 @@
}
.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;
@@ -61,20 +63,19 @@
.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;
}
}
\ No newline at end of file
diff --git a/src/sass/_layerlist.scss b/src/sass/_layerlist.scss
index 8fab9d5..a8e50b0 100644
--- 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
index 407af16..9a3c0f5 100644
--- 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;
}
}
diff --git a/src/sass/_notifications.scss b/src/sass/_notifications.scss
index 94110bd..e09f37d 100644
--- a/src/sass/_notifications.scss
+++ b/src/sass/_notifications.scss
@@ -5,13 +5,13 @@
.notification {
padding:.5em 1em;
- font-size:.7em;
+ font-size:.9em;
text-transform:uppercase;
letter-spacing: .1em;
margin-bottom:.5em;
- background:$blue;
- color: $white;
- width:300px;
+ background:$notification-default-background;
+ color:$notification-default-text;
+ // width:300px;
&:before {
font-family:"FontAwesome";
@@ -20,14 +20,16 @@
}
&.alert {
- background:$alert;
+ background:$notification-alert-background;
+ color:$notification-alert-text;
&:before {
content:"\f06a";
}
}
&.success {
- background:$success;
+ background:$notification-success-background;
+ color:$notification-success-text;
&:before {
content:"\f00c";
}
diff --git a/src/sass/_variables.scss b/src/sass/_variables.scss
index a8e7308..a373625 100644
--- a/src/sass/_variables.scss
+++ b/src/sass/_variables.scss
@@ -1,13 +1,64 @@
-// UI
-$selected: $blue;
-$menu-hover: $grey;
+// THEME COLORS
+$theme-dark: #174C4F;
+$theme-gray: #207178;
+$theme-orange: #FF9666;
+$theme-yellow: #FFE184;
+$theme-tan: #F5E9BE;
+$color-white: #ffffff;
+$color-light-gray: #f6f6f6;
+
+// FONTS
+$font-sans: 'Roboto', sans-serif;
+$font-mono: 'Inconsolata', monospace;
+$font-input: $font-mono;
-// UI COLORS
-$alert: $red;
-$success: $green;
-// UI
-$shadow: 1px 1px 5px 0 rgba(0,0,0,0.3);
+
+
+// BODY
+$body-text-base: 15px;
// MENU
+$menu-background: $theme-dark;
+$menu-text: $color-white;
+$menu-hover: $theme-gray;
+$menu-border: $theme-gray;
$menu-height: 30px;
+$menu-bottom-background: $menu-background;
+$menu-bottom-text: $theme-gray;
+
+// LAYERLIST
+$layerlist-background: $color-light-gray;
+$layer-hover: $theme-tan;
+$layer-selected-background: $theme-gray;
+$layer-selected-text: $layerlist-background;
+$layer-fontsize: 0.9em;
+
+// NOTIFICATIONS
+$notification-default-background: $color-light-gray;
+$notification-default-text: $theme-dark;
+$notification-alert-background: $theme-orange;
+$notification-alert-text: $color-light-gray;
+$notification-success-background: $theme-yellow;
+$notification-success-text: $theme-gray;
+
+// FORMS
+$form-background: $color-white;
+$form-information-background: $theme-dark;
+$form-information-text: $color-light-gray;
+$form-description-text: $color-light-gray;
+$form-description-font: $font-sans;
+$form-param-text: $theme-orange;
+$form-param-description: $theme-gray;
+$form-param-border: 1px solid $color-light-gray;
+$form-submit-background: $theme-yellow;
+$form-submit-text: $theme-dark;
+
+// BUTTONS
+$button-default-background: $color-white;
+$button-default-color: $theme-dark;
+$button-close-background: $theme-orange;
+$button-close-color: $color-light-gray;
+
+// UI
+$ui-shadow: 1px 1px 5px 0 rgba(0,0,0,0.3);
\ No newline at end of file
diff --git a/src/sass/site.scss b/src/sass/site.scss
index e94b4e8..511ab82 100644
--- a/src/sass/site.scss
+++ b/src/sass/site.scss
@@ -1,5 +1,4 @@
@import
- "colors",
"variables",
"mixins",
"globals",