From 1487846b73321becce3d1d5dbaf3a774e0c2fdb9 Mon Sep 17 00:00:00 2001
From: piensaenpixel <piensaenpixel@gmail.com>
Date: Fri, 26 Feb 2016 11:00:29 +0100
Subject: [PATCH] change markup

---
 src/scss/cdb-components/tags.scss | 51 +++++++++++++------------------
 1 file changed, 22 insertions(+), 29 deletions(-)

diff --git a/src/scss/cdb-components/tags.scss b/src/scss/cdb-components/tags.scss
index 7312821..2067985 100644
--- a/src/scss/cdb-components/tags.scss
+++ b/src/scss/cdb-components/tags.scss
@@ -51,25 +51,25 @@
 # Tags / Metadata
 
 ```
-<ul class="CDB-ListMetadata CDB-Text CDB-Size-medium u-secondaryTextColor">
-  <li class="CDB-ListMetadata-item">
-    <button class="CDB-Metadata">
+<ul class="CDB-ListTag CDB-Text CDB-Size-medium u-secondaryTextColor">
+  <li class="CDB-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--withLin">
       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">
+  <li class="CDB-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--withLin">
       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">
+  <li class="CDB-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--withLin">
       word
       <div class="CDB-Shape u-lSpace">
         <div class="CDB-Shape-close is-blue is-large"></div>
@@ -81,18 +81,18 @@
 ```
 */
 
-.CDB-ListMetadata {
+.CDB-ListTag {
   @include display-flex();
 }
 
-.CDB-ListMetadata-item {
+.CDB-ListTag-item {
   margin-right: $baseSize;
 }
 
-.CDB-Metadata {
+.CDB-Tag.CDB-Tag--withLin {
   @include display-flex();
-  padding: $halfSize $halfSize $halfSize $baseSize;
-  border-radius: $halfSize;
+  padding: $halfBaseSize $halfBaseSize $halfBaseSize $baseSize;
+  border-radius: $halfBaseSize;
   background: rgba($cBlue, 0.16);
 }
 
@@ -100,19 +100,19 @@
 # Tags / Data Type
 
 ```
-<ul class="CDB-ListDataType">
-  <li class="CDB-ListDataType-item">
-    <button class="CDB-DataType CDB-Text CDB-Size-small u-altTextColor">
+<ul class="CDB-ListTag">
+  <li class="CDB-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
       Number
     </button>
   </li>
-  <li class="CDB-ListDataType-item">
-    <button class="CDB-DataType CDB-Text CDB-Size-small u-altTextColor">
+  <li class="CDB-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
       Text
     </button>
   </li>
-  <li class="CDB-ListDataType-item">
-    <button class="CDB-DataType CDB-Text CDB-Size-small u-altTextColor">
+  <li class="CDB-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
       String
     </button>
   </li>
@@ -120,17 +120,10 @@
 
 ```
 */
+ 
 
-.CDB-ListDataType {
-  @include display-flex();
-}
-
-.CDB-ListDataType-item {
-  margin-right: $baseSize;
-}
-
-.CDB-DataType {
-  padding: $baseSize / 4 $halfSize;
+.CDB-Tag.CDB-Tag--opaque {
+  padding: $baseSize / 4 $halfBaseSize;
   border-radius: $baseSize / 4;
   background: $cThirdBackground;
   text-transform: uppercase;