Styleguide

Bar: Subline Right 

<div class="a-bar a-bar--white a-bar--right a-bar--subline a-bar--no-sanuk">Kurz halten! ÖJ</div>
 
<div class="a-bar {{modifiers_classes}}">{{ label }}</div>
  • Content: 
    // makes php storm happy. normally it would be enough to add it in styles.scss
@use 'sass:math';

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

	font-family: $font-bar;
	font-weight: $font-weight-extra;
	color: $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', $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: $color-primary;

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

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

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

		@include high-contrast {
			color: $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.5 KB 
{
  "label": "Kurz halten! ÖJ",
  "modifiers": [
    "white",
    "right",
    "subline",
    "no-sanuk"
  ]
}

No notes defined.