<a href="#" class="a-tag a-tag--background-jade">background</a>
<a href="{{href}}" class="a-tag{{#if is_light}} a-tag--light{{/if}}{{#if background_color}} a-tag--background-{{background_color}}{{/if}}">{{text}}</a>
{
  "text": "background",
  "href": "#",
  "is_light": false,
  "background_color": "jade"
}
  • Content:
    @charset 'UTF-8';
    
    /// @group Tags
    @include atom(tag) {
    	@extend %normalize-links;
    
    	@extend %tag;
    
    	display: inline-block;
    	position: relative;
    	z-index: z_index(middleground);
    	margin-right: rhythm(1);
    	margin-bottom: rhythm(1);
    	padding: rhythm(0.5) rhythm(2);
    	font-size: $small-text;
    	line-height: 1.8;
    	text-decoration: none;
    	text-transform: uppercase;
    
    	&--background {
    		@include color_values($colors, 'background-color', $separator: '-');
    		@include color_values($colors, 'border-color', $separator: '-');
    	}
    
    	@include m(light) {
    		@extend %tag-light;
    	}
    }
    
  • URL: /components/raw/tag/_tag.scss
  • Filesystem Path: src/atoms/tag/_tag.scss
  • Size: 568 Bytes

No notes defined.