Styleguide

Bars 

<div class="m-bars m-bars--right">
    <div class="m-bars__rotator">
        <div class="m-bars__positioner">
            <div class="m-bars__bar">
                <div class="a-bar a-bar--green a-bar--right a-bar--no-sanuk">Engagiere dich</div>
            </div>
            <div class="m-bars__bar">
                <div class="a-bar a-bar--magenta a-bar--right a-bar--no-sanuk">für Fair-Food</div>
            </div>
            <div class="m-bars__bar">
                <div class="a-bar a-bar--white a-bar--right a-bar--subline a-bar--no-sanuk">zusammen die Welt verändern</div>
            </div>
        </div>
    </div>
</div>
 
<div class="m-bars {{modifiers_classes}}">
	<div class="m-bars__rotator">
		<div class="m-bars__positioner">
			{{#each bars}}
				<div class="m-bars__bar">
					{{> @a-bar this}}
				</div>
			{{/each}}
		</div>
	</div>
</div>
  • Content: 
    .m-bars {
	line-height: 0; // so the subline won't be to high
	width: 100%;

	&__rotator {
		display: inline-block;
	}

	&--left &__rotator {
		transform-origin: bottom left;
		transform: translateX(-3.75em) rotate(-5deg);
	}

	&--right &__rotator {
		float: right;
		transform-origin: bottom right;
		transform: translateX(3.75em) translateY(-1.5em) rotate(-5deg);
	}

	&__positioner {
		display: flex;
		flex-direction: column;
	}

	&--right &__positioner {
		align-items: flex-end;
	}

	&--left &__positioner {
		align-items: flex-start;
	}
}
  • URL: /components/raw/m-bars/_m-bars.scss
  • Filesystem Path: styleguide/src/components/molecules/m-bars/_m-bars.scss
  • Size: 546 Bytes 
{
  "modifiers": [
    "left"
  ],
  "bars": [
    {
      "bar-1": null,
      "label": "Engagiere dich",
      "modifiers": [
        "green",
        "left",
        "no-sanuk"
      ]
    },
    {
      "bar-2": null,
      "label": "für Fair-Food",
      "modifiers": [
        "magenta",
        "left",
        "no-sanuk"
      ]
    },
    {
      "bar-3": null,
      "label": "zusammen die Welt verändern",
      "modifiers": [
        "white",
        "left",
        "subline",
        "no-sanuk"
      ]
    }
  ]
}

No notes defined.