Moving image and font files to final directory structure. Again.

- Split images into src/images/ and src/demo-images/
- Moved fonts to own directory: src/fonts/
- Updating scss files with new locations
- Updating compiled JS and CSS

src/checkbox/_checkbox.scss

@@ -110,18 +110,18 @@ $checkbox-ripple-size: $checkbox-label-height * 1.5;
   left: 0;
   height: 100%;
   width: 100%;
-  mask: url("images/tick-mask.svg#mask");
+  mask: url("../images/tick-mask.svg#mask");
 
   background: transparent;
   @include material-animation-default(0.28s);
   transition-property: background;
 
   .wsk-checkbox.is-checked & {
-    background: $checkbox-color url("images/tick.svg");
+    background: $checkbox-color url("../images/tick.svg");
   }
 
   .wsk-checkbox.is-checked.is-disabled & {
-    background: $checkbox-disabled-color url("images/tick.svg");
+    background: $checkbox-disabled-color url("../images/tick.svg");
   }
 }
 

src/icons/_icons.scss

@@ -1,7 +1,7 @@
 @font-face {
   font-family: 'Material-Design-Iconic-Font';
-  src: url('fonts/Material-Design-Iconic-Font.eot?v=1.1.1');
+  src: url('../fonts/Material-Design-Iconic-Font.eot?v=1.1.1');
-  src: url('fonts/Material-Design-Iconic-Font.eot?#iefix&v=1.1.1') format('embedded-opentype'), url('fonts/Material-Design-Iconic-Font.woff?v=1.1.1') format('woff'), url('fonts/Material-Design-Iconic-Font.ttf?v=1.1.1') format('truetype');
+  src: url('../fonts/Material-Design-Iconic-Font.eot?#iefix&v=1.1.1') format('embedded-opentype'), url('../fonts/Material-Design-Iconic-Font.woff?v=1.1.1') format('woff'), url('../fonts/Material-Design-Iconic-Font.ttf?v=1.1.1') format('truetype');
   font-weight: normal;
   font-style: normal;
 }

src/layout/demo.html

@@ -20,7 +20,7 @@
     <div class="wsk-layout wsk-js-layout wsk-layout--overlay-drawer-button">
       <div class="wsk-layout__header">
         <!-- Icon -->
-        <img class="wsk-layout-icon" src="images/app-icon.png"/>
+        <img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
         <!-- Title -->
         <span class="wsk-layout-title">Web Starter Kit</span>
         <!-- Add spacer, to align navigation to the right -->
@@ -58,7 +58,7 @@
     <div class="wsk-layout wsk-js-layout wsk-layout--overlay-drawer-button">
       <div class="wsk-layout__header wsk-layout__header--scroll">
         <!-- Icon -->
-        <img class="wsk-layout-icon" src="images/app-icon.png"/>
+        <img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
         <!-- Title -->
         <span class="wsk-layout-title">Web Starter Kit</span>
         <!-- Add spacer, to align navigation to the right -->
@@ -153,7 +153,7 @@
     <div class="wsk-layout wsk-js-layout wsk-layout--fixed-header">
       <div class="wsk-layout__header">
         <!-- Icon -->
-        <img class="wsk-layout-icon" src="images/app-icon.png"/>
+        <img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
         <!-- Title -->
         <span class="wsk-layout-title">Web Starter Kit</span>
         <!-- Add spacer, to align navigation to the right -->
@@ -229,7 +229,7 @@
         <!-- Top row -->
         <div class="wsk-layout__header-row">
           <!-- Icon -->
-          <img class="wsk-layout-icon" src="images/app-icon.png"/>
+          <img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
           <!-- Title -->
           <span id="my_text_changes">Web Starter Kit</span>
           <div class="wsk-layout-spacer"></div>
@@ -285,7 +285,7 @@
     <div class="wsk-layout wsk-js-layout" id="transparent_demo">
       <div class="wsk-layout__header wsk-layout__header--transparent">
         <!-- Icon -->
-        <img class="wsk-layout-icon" src="images/app-icon.png"/>
+        <img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
         <!-- Title -->
         <span class="wsk-layout-title">Web Starter Kit</span>
         <!-- Add spacer, to align navigation to the right -->
@@ -321,7 +321,7 @@
     <div class="wsk-layout wsk-js-layout wsk-layout--fixed-header">
       <div class="wsk-layout__header">
         <!-- Icon -->
-        <img class="wsk-layout-icon" src="images/app-icon.png"/>
+        <img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
         <!-- Title -->
         <span class="wsk-layout-title">Web Starter Kit</span>
       </div>
@@ -366,7 +366,7 @@
     <div class="wsk-layout wsk-js-layout wsk-layout--fixed-header wsk-layout--fixed-tabs">
       <div class="wsk-layout__header">
         <!-- Icon -->
-        <img class="wsk-layout-icon" src="images/app-icon.png"/>
+        <img class="wsk-layout-icon" src="../demo-images/app-icon.png"/>
         <!-- Title -->
         <span class="wsk-layout-title">Web Starter Kit</span>
       </div>

src/layout/demo.scss

@@ -82,7 +82,7 @@
 // Styles for transparent header demo.
 .demo-page--layout #transparent_demo {
   background-color: #948d85;
-  background-image: url('images/desktop-handsfree-hero.jpg');
+  background-image: url('../demo-images/desktop-handsfree-hero.jpg');
   background-repeat: no-repeat;
   background-attachment: scroll;
 

src/list/_list.scss

@@ -39,8 +39,7 @@ $list-container-item-height: 70px;
 }
 
 .wsk-list-view--avatar {
-  background     : url("images/avatar.png");
+  background: $list-container-item-border-color;
-  background-size: 100%;
   border-radius  : 50%;
   content        : '';
   display        : inline-block;

src/list/demo.scss

@@ -1,2 +1,7 @@
 @import "../styleguide_demo_bp";
 @import "_list";
+
+.demo-page--list .wsk-list-view--avatar {
+  background: url("../demo-images/avatar.png");
+  background-size: 100%;
+}

src/typography/demo.scss

@@ -37,11 +37,11 @@
 }
 
 .demo-typography--img-1 {
-  background-image: url(images/img-1.png);
+  background-image: url(../demo-images/img-1.png);
   color: white;
 }
 
 .demo-typography--img-2 {
-  background-image: url(images/img-2.png);
+  background-image: url(../demo-images/img-2.png);
   color: white;
 }