Updated latest shared/style folders from gaia

Author: arnau march

style/lists.css

@@ -130,6 +130,17 @@ li a:active {
   image-rendering: -moz-crisp-edges;
 }
 
+[data-type="list"] [data-icon] {
+  font-size: 0;
+}
+
+[data-type="list"] [data-icon]:before {
+  line-height: 6rem;
+  text-align: center;
+  width: 3rem;
+  color: #333;
+}
+
 /* Text content */
 [data-type="list"] li p {
   white-space: nowrap;

style/lists/index.html

@@ -13,6 +13,7 @@
   <link rel="stylesheet" href="../../style/headers.css">
   <link rel="stylesheet" href="../../style/switches.css">
   <link rel="stylesheet" href="../../style/buttons.css">
+  <link rel="stylesheet" href="../../elements/gaia-icons/style-embedded.css">
   <style>
     html, body {
       margin: 0;
@@ -45,13 +46,13 @@
       font-size: 0;
     }
 
-    [data-type="list"] aside.icon-callout {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDAzRTc0NDcxNTU2MTFFMjg1RkRBQkIxMEI1NkNEN0EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDAzRTc0NDgxNTU2MTFFMjg1RkRBQkIxMEI1NkNEN0EiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMDNFNzQ0NTE1NTYxMUUyODVGREFCQjEwQjU2Q0Q3QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMDNFNzQ0NjE1NTYxMUUyODVGREFCQjEwQjU2Q0Q3QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PncAgYwAAAHfSURBVHjarJZNKERRFMffzCATJaIUSVGU1IhsUGODlYmNj7KQSZGipCgrKWUhZaKU2PiKjYmsLJSIEhvKSqnJYiILpSYv/kfn1e10n+m9mX/9mnvu3HfPu+fcc+/zBNtCBuQHi2ASJAx3ygKd4FDt9PLvMhgDm4Z70UsegFXpoBkMs90PFozUNMIv/KcM1WBNgxewpnm4BBzZTOxT2uPApJB7kIM3NArEYPqzG0RFfwDcOVhNKa3gHHRp3mYPtIBbpT8ubPlMQLEpAjFysKNxYK3iXfTFQIONgzzwwe0NMGolOcoxl5oDzy6SvAXC6i6ifb+kGXjlcOIETxzW1QHF60mTUCf64tCYOgeWd1NsNV+KNWH4yiuqrTbloQg0sl3ASb5OxYFX2DMi4fOgKp0OPkGI40nKBce8srQ4IN2DQcWuBKegOF0OSPtgQrHrwaWbcKlJlqLk/oBWtvPBEIdP1kgZr/TViQODzykq/w62M0E76OPznyIwAHbZOdXSozqBh2+0ZOrhy8ifZJzJoY0ky4EuJ0GbM0ueqCt8/TpyQLoBNTYXkdQU2KZ7OlkOdAfaCTgDTaDwn7G1INvrsn4uQB1/hcRtxqyDWacrUPXN2zXCxZnDu+wB9HIozV8BBgCRzF4kkpLxhwAAAABJRU5ErkJggg==);
+    [data-icon]:before {
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
     }
 
-    [data-type="list"] aside.icon-nopic {
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkUxNjQwQkQxNUYwMTFFMjk2MkZDOURGRDUxMTgyQzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkUxNjQwQkUxNUYwMTFFMjk2MkZDOURGRDUxMTgyQzkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCRTE2NDBCQjE1RjAxMUUyOTYyRkM5REZENTExODJDOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCRTE2NDBCQzE1RjAxMUUyOTYyRkM5REZENTExODJDOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhHqZXkAAAB7SURBVHjaYvz//z8DNQHjqIEUAyZcEm5+keJUMxBq2BMgnYXHwt9EG7hr0/KXQCofiCfjMZSFJC8DDZ0GpHIJGEq8gUQY+oNkA8lxKRMx3iDFUJLSIdSwyUA8B4jjgBZxkuVCLC5NAWJmoqMeyUX/SQ2u0dJmEBoIEGAA+6FL5hxHUrsAAAAASUVORK5CYII=);
-      background-position: bottom right;
+    [data-type="list"] [data-icon="forward"]:before {
+      color: #686f72;
     }
 
     #settings-list { background-color: #eff0eb; }
@@ -73,6 +74,7 @@
       </li>
       <li>
         <a href="#">
+          <aside class="pack-end" data-icon="forward"></aside>
           <p>Margherita Clickable <strong>Gomez</strong></p>
         </a>
       </li>
@@ -101,7 +103,7 @@
       <li>
         <aside class="pack-end icon icon-nopic"></aside>
         <a href="#">
-          <aside class="icon icon-callout">
+          <aside data-icon="call-outgoing">
             asidecall
           </aside>
           <p>
@@ -138,9 +140,8 @@
           <input type="checkbox">
           <span></span>
         </label>
-        <aside class="pack-end icon icon-nopic"></aside>
         <a href="#">
-          <aside class="icon icon-callout"></aside>
+          <aside data-icon="call-outgoing"></aside>
           <p>
             Margherita <strong>Gomez</strong>
             <em>(2)</em>
@@ -159,7 +160,7 @@
       <ul>
       <li>
         <a href="#">
-          <aside class="icon icon-callout"></aside>
+          <aside data-icon="call-outgoing"></aside>
           <p>Phone lock</p>
         </a>
       </li>