<a href="#" class="a-tag u-b-solid u-b-jade background-jade-light a-tag--hover-dark color-jade">
    <svg class="icon u-m-r-1">
        <use xlink:href="#icon-pin"></use>
    </svg>
    <span class="a-tag__text">with left icon</span>
</a>
<a href="{{href}}" class="a-tag{{#if is_light}} a-tag--light{{/if}}{{#if background_color}}{{/if}}{{#if border}} u-b-solid u-b-{{border_color}} background-{{background_color}}{{/if}}{{#if hover_color}} a-tag--hover-{{hover_color}}{{/if}}{{#if color}} color-{{color}}{{/if}}">
	{{#if icon}}
	{{#if icon_align_left}}
 			{{> @icon id=icon additional_classes="u-m-r-1"}}
		{{/if}}
  	{{/if}}
	<span class="a-tag__text">{{text}}</span>
	{{#if icon}}
		{{#if icon_align_right}}
 			{{> @icon id=icon additional_classes="u-m-l-1"}}
		{{/if}}
  	{{/if}}
</a>
{
  "text": "with left icon",
  "href": "#",
  "icon": "pin",
  "icon_align_left": true,
  "is_light": false,
  "border": true,
  "border_color": "jade",
  "background_color": "jade-light",
  "hover_color": "dark",
  "color": "jade"
}
  • Content:
    @charset 'UTF-8';
    
    /// @group Tags
    @include atom(tag) {
    	@extend %normalize-links;
    
    	@extend %tag;
    
    	display: inline-flex;
    	align-items: center;
    	position: relative;
    	z-index: z_index(middleground);
    	margin-right: rhythm(1);
    	margin-bottom: rhythm(1);
    	padding: rhythm(1) rhythm(2);
    	font-size: $small-text;
    	line-height: 1;
    	text-decoration: none;
    	text-transform: uppercase;
    
    	&--background {
    		@include color_values($colors, 'background-color', $separator: '-');
    		@include color_values($colors, 'border-color', $separator: '-');
    	}
    
    	@include e(text) {
    		color: $color-cyberspace;
    		letter-spacing: 0.025rem;
    	}
    
    	@include m(light) {
    		@extend %tag-light;
    
    		@include e(text) {
    			color: $color-snow;
    		}
    	}
    
    	> svg {
    		width: $icon-size-small;
    		height: $icon-size-small;
    	}
    
    	@include m(hover-light) {
    		&:hover,
    		&:focus {
    			background-color: currentColor !important;
    
    			[class*=text] {
    				color: $color-snow;
    			}
    		}
    	}
    
    	@include m(hover-dark) {
    		&:hover,
    		&:focus {
    			background-color: currentColor !important;
    
    			[class*=text] {
    				color: $color-cyberspace;
    			}
    		}
    	}
    }
    
  • URL: /components/raw/tag/_tag.scss
  • Filesystem Path: src/atoms/tag/_tag.scss
  • Size: 1.1 KB

No notes defined.