Add .tag class

css/ebi-global-includes/_ebi_theme_settings.scss

@@ -37,9 +37,14 @@ $body-font-family-serif: 'EB Garamond', 'georgia', serif;
 // Label tweaks
 $label-background: $ebi-colour-white;
 $label-color: $primary-color;
-$label-font-size: 0.8rem;
 $label-padding: 0.33333rem 0;
 
+// Tags
+$tag-background: $primary-color;
+$tag-color: $label-background;
+$tag-font-size: 0.8rem;
+$tag-padding: 0.33333rem 0.5rem;
+
 // These don't do anything yet...
 $global-margin: 1rem;
 $global-padding: 1rem;

css/ebi-global-includes/_tag.scss

+// Custom tag class for Foundation-based EBI framework
+
+////
+/// @group tag
+////
+
+/// Default background color for tags.
+/// @type Color
+$tag-background: $primary-color !default;
+
+/// Default text color for tags.
+/// @type Color
+$tag-color: foreground($tag-background) !default;
+
+/// Default font size for tags.
+/// @type Number
+$tag-font-size: 0.8rem !default;
+
+/// Default padding inside tags.
+/// @type Number
+$tag-padding: 0.33333rem 0.5rem !default;
+
+/// Default radius of tags.
+/// @type Number
+$tag-radius: $global-radius !default;
+
+/// Generates base styles for a tag.
+@mixin tag {
+  display: inline-block;
+  padding: $tag-padding;
+  font-size: $tag-font-size;
+  line-height: 1;
+  white-space: nowrap;
+  // cursor: default;
+}
+
+@mixin ebi-tag {
+  .tag {
+    @include tag;
+
+    background: $tag-background;
+    color: $tag-color;
+
+    // @each $name, $color in $foundation-palette {
+    //   @if $name != primary {
+    //     &.#{$name} {
+    //       background: $color;
+    //       color: foreground($color);
+    //     }
+    //   }
+    // }
+  }
+}

css/ebi-global.css

@@ -86,28 +86,28 @@ a:active {
   background-color: #666;
   padding: 0 0.2em; }
 
-.ebi-background, a.ebi-background, .button.ebi-background {
+.ebi-background, a.ebi-background, .tag.ebi-background, .button.ebi-background {
   background: #007c82; }
 
-.services-background, a.services-background, .button.services-background {
+.services-background, a.services-background, .tag.services-background, .button.services-background {
   background: #389198; }
 
-.research-background, a.research-background, .button.research-background {
+.research-background, a.research-background, .tag.research-background, .button.research-background {
   background: #6dab49; }
 
-.training-background, a.training-background, .button.training-background {
+.training-background, a.training-background, .tag.training-background, .button.training-background {
   background: #e9b400; }
 
-.industry-background, a.industry-background, .button.industry-background {
+.industry-background, a.industry-background, .tag.industry-background, .button.industry-background {
   background: #0086b4; }
 
-.elixir-background, a.elixir-background, .button.elixir-background {
+.elixir-background, a.elixir-background, .tag.elixir-background, .button.elixir-background {
   background: #fb6a2a; }
 
-.white-background, a.white-background, .button.white-background {
+.white-background, a.white-background, .tag.white-background, .button.white-background {
   background: white; }
 
-.secondary-background, a.secondary-background, .button.secondary-background {
+.secondary-background, a.secondary-background, .tag.secondary-background, .button.secondary-background {
   background: #666; }
 
 .ebi-color, .label.ebi-color, a.ebi-color, a:hover.ebi-color {
@@ -1061,3 +1061,13 @@ table.no-stripe tbody tr:nth-child(even) {
   body.full-width .row {
     max-width: 96%;
     min-width: 1000px; } }
+
+/* tag */
+.tag {
+  display: inline-block;
+  padding: 0.33333rem 0.5rem;
+  font-size: 0.8rem;
+  line-height: 1;
+  white-space: nowrap;
+  background: #007c82;
+  color: white; }

css/ebi-global.scss

 // Various includes
 @import 'ebi-global-includes/ebi_theme_settings'; // default EBI styling
 // @import 'ebi-gloabl-includes/ebi_foundation_overides';
+@import 'ebi-global-includes/tag'; // custom tag class
 
 // This code is the EBI layer atop the Foundation base styling
 
@@ -79,14 +80,14 @@ a:active {
   padding: 0 0.2em;
 }
 
-.ebi-background, a.ebi-background, .button.ebi-background       { background: $ebi-colour-main; }
-.services-background, a.services-background, .button.services-background  { background: $ebi-colour-services; }
-.research-background, a.research-background, .button.research-background  { background: $ebi-colour-research; }
-.training-background, a.training-background, .button.training-background  { background: $ebi-colour-training; }
-.industry-background, a.industry-background, .button.industry-background  { background: $ebi-colour-industry; }
-.elixir-background, a.elixir-background, .button.elixir-background    { background: $ebi-colour-elixir; }
-.white-background, a.white-background, .button.white-background     { background: $ebi-colour-white; }
-.secondary-background, a.secondary-background, .button.secondary-background { background: $ebi-colour-dark-grey; }
+.ebi-background, a.ebi-background, .tag.ebi-background, .button.ebi-background       { background: $ebi-colour-main; }
+.services-background, a.services-background, .tag.services-background, .button.services-background  { background: $ebi-colour-services; }
+.research-background, a.research-background, .tag.research-background, .button.research-background  { background: $ebi-colour-research; }
+.training-background, a.training-background, .tag.training-background, .button.training-background  { background: $ebi-colour-training; }
+.industry-background, a.industry-background, .tag.industry-background, .button.industry-background  { background: $ebi-colour-industry; }
+.elixir-background, a.elixir-background, .tag.elixir-background, .button.elixir-background    { background: $ebi-colour-elixir; }
+.white-background, a.white-background, .tag.white-background, .button.white-background     { background: $ebi-colour-white; }
+.secondary-background, a.secondary-background, .tag.secondary-background, .button.secondary-background { background: $ebi-colour-dark-grey; }
 
 .ebi-color, .label.ebi-color, a.ebi-color, a:hover.ebi-color { color: $ebi-colour-petrol; }
 .services-color, .label.services-color, a.services-color, a:hover.services-color { color: $ebi-colour-services; }
@@ -871,3 +872,6 @@ table.no-stripe tbody tr:nth-child(even) { background-color: #fff; }
       min-width: 1000px;
   }
 }
+
+/* tag */
+@include ebi-tag;

css/foundation/_settings.scss

@@ -423,7 +423,7 @@ $input-radius: $global-radius;
 
 // $label-background: $primary-color;
 // $label-color: foreground($label-background);
-// $label-font-size: 0.8rem;
+$label-font-size: 0.8rem;
 // $label-padding: 0.33333rem 0.5rem;
 $label-radius: $global-radius;