Tag

<a href="#" class="a-tag">
    <span class="a-tag__text">cyberspace</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": "cyberspace",
  "href": "#"
}
  • Content:
    @charset "UTF-8";
    @use '../../configurations/mixins' as mixin;
    @use '../../configurations/extends';
    @use '../../configurations/bem' as bem;
    @use '../../configurations/variables' as var;
    @use '../../configurations/functions' as func;
    @use '../../configurations/colors/colors' as colors;
    @use '../../configurations/colors/colors-functions' as colorFunc;
    
    /// @group Tags
    @include mixin.atom(tag) {
    	@extend %normalize-links;
    
    	@extend %tag;
    
    	display: inline-flex;
    	align-items: center;
    	position: relative;
    	z-index: func.z_index(middleground);
    	margin-right: func.rhythm(1);
    	margin-bottom: func.rhythm(1);
    	padding: func.rhythm(1) func.rhythm(2);
    	font-size: var.$small-text;
    	line-height: 1;
    	text-decoration: none;
    	text-transform: uppercase;
    
    	&--background {
    		@include colorFunc.color_values(colorFunc.$colors, 'background-color', $separator: '-');
    		@include colorFunc.color_values(colorFunc.$colors, 'border-color', $separator: '-');
    	}
    
    	@include bem.e(text) {
    		color: var(--cyberspace-color);
    		letter-spacing: 0.025rem;
    	}
    
    	@include bem.m(light) {
    		@extend %tag-light;
    
    		@include bem.e(text) {
    			color: colors.$color-snow;
    		}
    	}
    
    	> svg {
    		width: var.$icon-size-small;
    		height: var.$icon-size-small;
    	}
    
    	@include bem.m(hover-light) {
    		&:hover,
    		&:focus {
    			background-color: currentColor !important;
    
    			[class*=text] {
    				color: colors.$color-snow;
    			}
    		}
    	}
    
    	@include bem.m(hover-dark) {
    		&:hover,
    		&:focus {
    			background-color: currentColor !important;
    
    			[class*=text] {
    				color: colors.$color-cyberspace;
    			}
    		}
    	}
    }
    
  • URL: /components/raw/tag/_tag.scss
  • Filesystem Path: src/atoms/tag/_tag.scss
  • Size: 1.6 KB

No notes defined.