<span class="tag tag--data-wrangling tag--large" title="Data Wrangling">Data Wrangling</span>
<span class="tag tag--{{ tag.slug }}{% if tag.variant %} tag--{{ tag.variant }}{% endif %}" title="{{ tag.category }}">{{ tag.category }}</span>
{
  "tag": {
    "category": "Data Wrangling",
    "slug": "data-wrangling",
    "variant": "large"
  }
}
  • Content:
    .tag {
      --tag-border-hsl: var(--base-hsl);
      --tag-text-hsl: var(--base-hsl);
      --tag-bg-hsl: var(--white-hsl);
    
      color: hsla(var(--tag-text-hsl), 1);
      border: 2px solid hsla(var(--tag-border-hsl), 1);
      display: inline-block;
      padding: 2px 24px 4px;
      border-radius: 24px;
      font-size: 1rem;
      font-weight: 400;
      background-color: hsla(var(--tag-bg-hsl), 1);
    }
    
    .tag:hover { cursor: pointer; }
    
    .tag--large {
      padding: 4px 24px 6px;
      font-weight: 600;
    
      &:hover {
        --tag-text-hsl:   var(--white-hsl);
        --tag-bg-hsl:     var(--base-hsl);
      }
    
      &.tag--data-wrangling:hover { 
        --tag-bg-hsl: var(--teal-hsl); 
      }
      
      &.tag--data-literacy:hover {
        --tag-bg-hsl: var(--orange-hsl); 
      }
      
      &.tag--human-centered-design:hover { 
        --tag-bg-hsl: var(--red-hsl); 
      }
    }
    
    .tag--selected {
      --tag-border-hsl: var(--white-hsl);
      --tag-bg-hsl:     var(--base-hsl);
    
      &.tag--data-wrangling        { --tag-bg-hsl: var(--teal-dark-hsl); }
      &.tag--data-literacy         { --tag-bg-hsl: var(--orange-dark-hsl); }
      &.tag--human-centered-design { --tag-bg-hsl: var(--red-hsl); }
    }
    
    .tag--data-wrangling { 
      --tag-text-hsl: var(--teal-dark-hsl);
      --tag-border-hsl: var(--teal-hsl); 
    }
    .tag--data-literacy { 
      --tag-text-hsl: var(--orange-dark-hsl);
      --tag-border-hsl: var(--orange-hsl); 
    }
    .tag--human-centered-design {
      --tag-text-hsl: var(--red-hsl); 
      --tag-border-hsl: var(--red-hsl); 
    }
  • URL: /components/raw/tag/tag.scss
  • Filesystem Path: src/components/02-elements/tag/tag.scss
  • Size: 1.4 KB

No notes defined.