Styleguide

Vote tag: Yes 

<div aria-label="Abstimmungsempfehlung" class="a-vote-tag a-vote-tag--yes">ja</div>
 
<div aria-label="{{ aria-label }}" class="a-vote-tag {{ modifiers_classes }}">{{ label }}</div>
  • Content: 
    @use "sass:math";
@use "../../../scss/variables" as v;
@use "../../../scss/mixins" as m;

.a-vote-tag {
	display: inline-block;
	padding: 0.3333em 0.3333em 0.4167em;
	border-radius: 2px;
	text-align: center;
	text-transform: uppercase;
	font-size: 0.75rem;
	font-weight: v.$font-weight-bold;
	font-family: v.$font-title;
	letter-spacing: 0.04167em;
	width: 3.6667em;

	@include m.media(v.$DESKTOP) {
		font-size: 0.875rem;
		padding: 0.4286em 0 0.5em;
		width: 4.2857em;
	}

	&--free,
	&--blank,
	&--free2,
	&--initiative,
	&--counter-project {
		background-color: v.$color-grey-2;
		color: v.$color-text;
	}

	&--blank,
	&--free2,
	&--initiative,
	&--counter-project {
		width: auto;

		@include m.media(v.$DESKTOP) {
			padding-left: 0.3333em;
			padding-right: 0.3333em;
		}
	}

	&--no {
		background-color: rgb(253, 218, 218); // color isn't used anywhere else
		color: v.$color-red;
	}

	&--yes {
		background-color: rgb(237, 244, 220); // color isn't used anywhere else
		color: v.$color-primary-dark;
	}
}
  • URL: /components/raw/a-vote-tag/_a-vote-tag.scss
  • Filesystem Path: styleguide/src/components/atoms/a-vote-tag/_a-vote-tag.scss
  • Size: 1 KB 
{
  "label": "ja",
  "aria-label": "Abstimmungsempfehlung",
  "modifiers": [
    "yes"
  ]
}

No notes defined.