Internetstiftelsen Styleguide

Tag: Background Variation 

<a href="#" class="a-tag u-b-solid u-b-ocean background-ocean a-tag--hover-light color-ocean">
    <span class="a-tag__text">background</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": "background",
  "href": "#",
  "is_light": false,
  "border": true,
  "border_color": "ocean",
  "background_color": "ocean",
  "hover_color": "light",
  "color": "ocean"
}
  • 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.