Styleguide

Bar 

<div class="a-bar a-bar--green a-bar--left a-bar--no-sanuk">Kurz halten! ÖJ</div>
 
<div class="a-bar {{modifiers_classes}}">{{ label }}</div>
  • Content: 
    @use "sass:math";
@use "../../../scss/variables" as v;
@use "../../../scss/mixins" as m;

.a-bar {
	$no-sanuk-factor: 1.15;

	& {
		font-family: v.$font-bar;
		font-weight: v.$font-weight-extra;
		color: v.$color-white;
		text-transform: uppercase;
		line-height: 1em;
		white-space: nowrap;

		display: inline-block;
		padding: .15em .2em 0;
		margin-bottom: 0.1em;
	}

	&--no-sanuk {
		font-family: 'Passion One Bold', v.$font-bar; // don't use locally installed sanuk
		font-size: #{$no-sanuk-factor}em;
		padding: 0 .15em 0;
		letter-spacing: 0.02em;
	}

	&--left {
		padding-left: 5em;

		&.a-bar--no-sanuk {
			padding-left: #{math.div(5, $no-sanuk-factor)}em;
		}
	}

	&--right {
		padding-right: 5em;

		&.a-bar--no-sanuk {
			padding-right: #{math.div(5, $no-sanuk-factor)}em;
		}
	}

	&--green {
		background: v.$color-primary;

		@include m.high-contrast {
			background: v.$color-primary-dark;
		}
	}

	&--magenta {
		background: v.$color-secondary;
	}

	&--white {
		background: v.$color-white;
		color: v.$color-primary;

		@include m.high-contrast {
			color: v.$color-primary-dark;
		}
	}

	&--subline {
		font-size: 0.4em;

		&.a-bar--no-sanuk {
			font-size: #{0.4*$no-sanuk-factor}em;
		}

		&.a-bar--left {
			padding-left: 12.6em; // +0.1em for identical letter start

			&.a-bar--no-sanuk {
				padding-left: #{math.div(12.6, $no-sanuk-factor)}em;
			}
		}

		&.a-bar--right {
			padding-right: 12.6em; // +0.1em for identical letter start

			&.a-bar--no-sanuk {
				padding-right: #{math.div(12.6, $no-sanuk-factor)}em;
			}
		}
	}
}
  • URL: /components/raw/a-bar/_a-bar.scss
  • Filesystem Path: styleguide/src/components/atoms/a-bar/_a-bar.scss
  • Size: 1.6 KB 
{
  "label": "Kurz halten! ÖJ",
  "modifiers": [
    "green",
    "left",
    "no-sanuk"
  ]
}

No notes defined.