Merge pull request #77 from CartoDB/add-tags

Add tags

src/scss/cdb-components/tags.scss

@@ -2,7 +2,7 @@
 // ----------------------------------------------
 
 /* SG
-# Tags
+# Tags / Privacy
 
 ```
 <button class="CDB-Tag is-public CDB-Text is-semibold CDB-Size-small u-iBlock">
@@ -20,6 +20,7 @@
 ```
 */
 
+@import '../cdb-utilities/mixins';
 @import '../cdb-variables/sizes';
 @import '../cdb-variables/colors';
 
@@ -45,3 +46,85 @@
     color: $cError;
   }
 }
+
+/* SG
+# Tags / Metadata
+
+```
+<ul class="CDB-ListTag CDB-Text CDB-Size-medium u-secondaryTextColor">
+  <li class="CDB-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--withLink">
+      trees
+      <div class="CDB-Shape u-lSpace">
+        <div class="CDB-Shape-close is-blue is-large"></div>
+      </div>
+    </button>
+  </li>
+  <li class="CDB-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--withLink">
+      table_merge
+      <div class="CDB-Shape u-lSpace">
+        <div class="CDB-Shape-close is-blue is-large"></div>
+      </div>
+    </button>
+  </li>
+  <li class="CDB-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--withLink">
+      word
+      <div class="CDB-Shape u-lSpace">
+        <div class="CDB-Shape-close is-blue is-large"></div>
+      </div>
+    </button>
+  </li>
+</ul>
+
+```
+*/
+
+.CDB-ListTag {
+  @include display-flex();
+}
+
+.CDB-ListTag-item {
+  margin-right: $baseSize;
+}
+
+.CDB-Tag.CDB-Tag--withLink {
+  @include display-flex();
+  padding: $halfBaseSize $halfBaseSize $halfBaseSize $baseSize;
+  border-radius: $halfBaseSize;
+  background: rgba($cBlue, 0.16);
+}
+
+/* SG
+# Tags / Data Type
+
+```
+<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-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
+      Text
+    </button>
+  </li>
+  <li class="CDB-ListTag-item">
+    <button class="CDB-Tag CDB-Tag--opaque CDB-Text CDB-Size-small u-altTextColor">
+      String
+    </button>
+  </li>
+</ul>
+
+```
+*/
+
+.CDB-Tag.CDB-Tag--opaque {
+  padding: $baseSize / 4 $halfBaseSize;
+  border-radius: $baseSize / 4;
+  background: $cThirdBackground;
+  text-transform: uppercase;
+}
+

src/scss/cdb-variables/_sizes.scss

@@ -7,6 +7,7 @@ $mobileLayout: 280px;
 
 //Base
 $baseSize: 8px;
+$halfBaseSize: $baseSize / 2;
 
 // Margins
 $sMargin-section: 24px; // To separate main section