Styleguide

Vote: 3 Proposals 

<article class="o-vote ">
    <div class="o-vote__cat-title">
        <h2 class="a-cat-title">
            <span class="a-cat-title__link a-cat-title__link--no-link">Abstimmungsempfehlungen</span>
        </h2>
    </div>
    <div class="o-vote__proposals">
        <a href="#" class="o-vote__proposal">
            <div class="m-vote">
                <div class="m-vote__tag">
                    <div aria-label="" class="a-vote-tag a-vote-tag--yes">ja</div>
                </div>
                <h3 class="m-vote__title">Fair-Food JA: Gesund und umweltfreundlich</h3>
            </div>
        </a>
        <a href="#" class="o-vote__proposal">
            <div class="m-vote">
                <div class="m-vote__tag">
                    <div aria-label="" class="a-vote-tag a-vote-tag--yes">ja</div>
                </div>
                <h3 class="m-vote__title">Ernährungssouverenität, die Ergänzung zur Fair-Food-Initiative</h3>
            </div>
        </a>
        <a href="#" class="o-vote__proposal">
            <div class="m-vote">
                <div class="m-vote__tag">
                    <div aria-label="" class="a-vote-tag a-vote-tag--yes">ja</div>
                </div>
                <h3 class="m-vote__title">Ja zum Velo, zu den Fuss und Wanderwegen</h3>
            </div>
        </a>
    </div>
    <footer class="o-vote__more">
        <div class="o-vote__link-button">
            <div class="a-link-button ">
                Kantonale Abstimmungen
            </div>
        </div>
    </footer>
</article>
 
<article class="o-vote {{ modifiers_classes }}">
	<div class="o-vote__cat-title">
		{{> @a-cat-title cat-title}}
	</div>
	<div class="o-vote__proposals">
		{{#each proposals}}
			<a href="{{ this.url }}" class="o-vote__proposal">
				{{> @m-vote this }}
			</a>
		{{/each}}
	</div>
	<footer class="o-vote__more">
		<div class="o-vote__link-button">
			{{> @a-link-button link-button }}
		</div>
	</footer>
</article>
  • Content: 
    .o-vote {
	@extend .grid-item;
	height: 100%;
	padding-left: 0;
	padding-right: 0;
	display: flex;
	flex-direction: column;

	&__cat-title {
		margin-bottom: 22px;
		@include fluid-grid-item-props(margin-left);
	}

	&__proposals {
		display: flex;
		flex-direction: column;
		flex-grow: 0.5;
		flex-shrink: 0;
	}

	&__proposal {
		@include clean-link;
		flex-grow: 1;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		align-content: center;
		transition: background $transition-fast $transition-ease;
		position: relative;
		@include fluid-grid-item-props(padding-left padding-right);

		&:after {
			content: ' ';
			width: calc(100% - 82px);
			height: 1px;
			background: $color-grey-2;
			position: absolute;
			bottom: 1px;
			@include fluid-grid-item-props(left);

			@include media($_DESKTOP) {
				width: calc(100% - 2 * (41px + 19 * (100vw - 1024px) / 416));
			}

			@include media(1470px) {
				width: calc(100% - #{2*$grid-item-padding-max});
			}
		}

		@include hover {
			background: $color-grey-1;
		}
	}

	&__more {
		padding-top: 16px;
		@include fluid-grid-item-props(padding-left padding-right);
	}
}
  • URL: /components/raw/o-vote/_o-vote.scss
  • Filesystem Path: styleguide/src/components/organisms/o-vote/_o-vote.scss
  • Size: 1.1 KB 
{
  "cat-title": {
    "label": "Abstimmungsempfehlungen"
  },
  "proposals": [
    {
      "label": "Fair-Food JA: Gesund und umweltfreundlich",
      "url": "#",
      "vote-tag": {
        "label": "ja",
        "modifiers": [
          "yes"
        ]
      }
    },
    {
      "label": "Ernährungssouverenität, die Ergänzung zur Fair-Food-Initiative",
      "url": "#",
      "vote-tag": {
        "label": "ja",
        "modifiers": [
          "yes"
        ]
      }
    },
    {
      "label": "Ja zum Velo, zu den Fuss und Wanderwegen",
      "url": "#",
      "vote-tag": {
        "label": "ja",
        "modifiers": [
          "yes"
        ]
      }
    }
  ],
  "link-button": {
    "label": "Kantonale Abstimmungen"
  }
}

No notes defined.