Some work on list items; specifically palette list items at the moment

sass/lists.scss

@@ -0,0 +1,17 @@
+
+.list-container{
+  width: 100%;
+  height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+
+.list-item-container{
+  background-color: $list-item-bg;
+  border-radius: 8px;
+
+  .item-selected{
+    background-color: $list-item-selected-bg;
+  }
+}

sass/style.scss

@@ -9,5 +9,5 @@
 @import 'nespalette';
 @import 'modal';
 @import 'tabs';
-
+@import 'lists';
 

sass/variables.scss

@@ -13,3 +13,6 @@ $tabnav-bg: #878787;
 $tabnav-text: #000;
 $tabnav-content-bg: #EFEFEF;
 $tabnav-content-text: #000;
+
+$list-item-bg: $menu-bg-color;
+$list-item-selected-bg: lighten($menu-bg-color, 25%);

views/docks.html

@@ -6,7 +6,11 @@
             </ul>
             <% tabs.forEach(function(item){ %>
             <div class="tab-content" fortabs="<%= tabsetname %>" tabid="<%= item.id %>">
-              <div class="list-container"></div>
+              <div class="list-container">
+              <% if(item.hasOwnProperty("tmpl")){ %>
+                <%- include(item.tmpl) %>
+              <% } %>
+              </div>
             </div>
             <% }); %>
           </div>

views/index.html

@@ -22,7 +22,7 @@
       <%- include('docks.html', {
         tabsetname:"assetlists",
         tabs:[
-          {name:"Palettes", id:"palettes", selected:true},
+          {name:"Palettes", id:"palettes", tmpl:"paletteListItem.html", selected:true},
           {name:"Banks", id:"banks", selected:false},
           {name:"Attrib. Tables", id:"attrtbls", selected:false}
         ]  

views/paletteListItem.html

@@ -0,0 +1,10 @@
+<div class="list-item-container palette-list-item-template hidden">
+  <div class=pure-g">
+    <div class=pure-u-1">
+      <span class="title">Title here</span>
+    </div>
+  </div>
+  <div class="pure-g">
+
+  </div>
+</div>