From f34ceb15755c2444f1215113306d995ed2a7066d Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Wed, 24 Feb 2016 18:47:18 +0100
Subject: [PATCH] add metadata

---
 src/fonts/cartoIcon.eot           | Bin 19808 -> 19808 bytes
 src/fonts/cartoIcon.ttf           | Bin 19636 -> 19636 bytes
 src/fonts/cartoIcon.woff          | Bin 12424 -> 12424 bytes
 src/scss/cdb-components/tags.scss |  46 ++++++++++++++++++++++++++----
 4 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot
index e2ab33d7b8202c3173c2000e7453fb186aca4646..fad800695177b85b46522be1717bc227aefc6871 100644
GIT binary patch
delta 55
zcmaDbi}ArM#tAmeAD8+}v|q=3b%M^s4^yRmmVS)qxB1Gz&G?G}2rhkIz7R%lUch+3
F8vv}i7wZ53

delta 55
zcmaDbi}ArM#tAmevKm1X?bk71IxjZy!&K=Y4cT~po39MqjK3Iw;L;~|F&Mph0pkI0
E06h2;qW}N^

diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf
index 1e375d4710b63503ebacbcf66a8bf7a594482e43..b40f494864f50d9891952a522413fe738fee209c 100644
GIT binary patch
delta 47
wcmdlolX1&T#tDwhS10I9beSscv-D#;zs*+$ZpL2>Kyc~v@`W&Z<Cg>80L4NR*Z=?k

delta 47
wcmdlolX1&T#tDwhm(Gh#beSq0q#+y6Z}XLboADO|5M27?E(W7FemUR`0F#Fh+W-In

diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff
index cd9dcf88acfe474b2aa2a0fd513c9d26a31950cc..4aea4a369eb50e0a80b8251fd2bcc84019e0277e 100644
GIT binary patch
delta 68
zcmV-K0K5N)VTfUna|ts5001`o)sQT)e90&(BkxMicz&C&4BU*rfFcZ+J}+Mgqu-SO
a|IQV`_y@@4U|<4?0swC)4ui9ADH#X-dL0%3

delta 68
zcmV-K0K5N)VTfUna|tp4001`o($5yLe90&(qk!M0@%%Pl8MqmL0Yw-teR3Cr(QnHC
af9Hx|`~&22Fff5c0b-dAUI4RiDH#X*a2$>R

diff --git a/src/scss/cdb-components/tags.scss b/src/scss/cdb-components/tags.scss
index ec60e43..90b409a 100644
--- a/src/scss/cdb-components/tags.scss
+++ b/src/scss/cdb-components/tags.scss
@@ -20,6 +20,7 @@
 ```
 */
 
+@import '../cdb-utilities/mixins';
 @import '../cdb-variables/sizes';
 @import '../cdb-variables/colors';
 
@@ -50,14 +51,47 @@
 # Tags / Metadata
 
 ```
-<button class="CDB-Metadata CDB-Text u-iBlock">
-  population
-</button>
+<ul class="CDB-ListMetadata CDB-Text CDB-Size-medium u-secondaryTextColor">
+  <li class="CDB-ListMetadata-item">
+    <button class="CDB-Metadata CDB-Text">
+      trees
+      <div class="CDB-Shape u-lSpace">
+        <div class="CDB-Shape-close is-blue is-large"></div>
+      </div>
+    </button>
+  </li>
+  <li class="CDB-ListMetadata-item">
+    <button class="CDB-Metadata CDB-Text">
+      table_merge
+      <div class="CDB-Shape u-lSpace">
+        <div class="CDB-Shape-close is-blue is-large"></div>
+      </div>
+    </button>
+  </li>
+  <li class="CDB-ListMetadata-item">
+    <button class="CDB-Metadata CDB-Text">
+      word
+      <div class="CDB-Shape u-lSpace">
+        <div class="CDB-Shape-close is-blue is-large"></div>
+      </div>
+    </button>
+  </li>
+</ul>
 
 ```
 */
 
-.CDB-Metadata {
-  border-radius: $baseSize / 2;
-  background: #FF5500;
+.CDB-ListMetadata {
+  @include display-flex();
+}
+
+.CDB-ListMetadata-item {
+  margin-right: $baseSize;
+}
+
+.CDB-Metadata {
+  @include display-flex();
+  padding: $baseSize / 2 $baseSize / 2  $baseSize / 2 $baseSize;
+  border-radius: $baseSize / 2;
+  background: rgba($cBlue, 0.16);
 }