Styleguide

Vote: 2 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 m-vote--excerpt">
                <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>
                <p class="m-vote__excerpt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum</p>
                <div class="m-vote__link-button">
                    <div class="a-link-button ">
                        Mehr über die Vorlage
                    </div>
                </div>
            </div>
        </a>
        <a href="#" class="o-vote__proposal">
            <div class="m-vote m-vote--excerpt">
                <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>
                <p class="m-vote__excerpt">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum</p>
                <div class="m-vote__link-button">
                    <div class="a-link-button ">
                        Mehr über die Vorlage
                    </div>
                </div>
            </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: 
    @use "sass:math";
@use "../../../scss/variables" as v;
@use "../../../scss/mixins" as m;
@use "../../../scss/grid" as g;

.o-vote {
	max-width: 651px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	// Original styles
	height: 100%;
	padding-left: 0;
	padding-right: 0;
	display: flex;
	flex-direction: column;
	@include m.fluid-grid-item-props(padding);

	@include m.media(v.$DESKTOP) {
		max-width: 100%;
	}

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

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

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

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

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

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

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

	&__more {
		padding-top: 16px;
		@include m.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.5 KB 
{
  "cat-title": {
    "label": "Abstimmungsempfehlungen"
  },
  "proposals": [
    {
      "label": "Fair-Food JA: Gesund und umweltfreundlich",
      "excerpt": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum",
      "url": "#",
      "vote-tag": {
        "label": "ja",
        "modifiers": [
          "yes"
        ]
      }
    },
    {
      "label": "Ernährungssouverenität, die Ergänzung zur Fair-Food-Initiative",
      "excerpt": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum",
      "url": "#",
      "vote-tag": {
        "label": "ja",
        "modifiers": [
          "yes"
        ]
      }
    }
  ],
  "link-button": {
    "label": "Kantonale Abstimmungen"
  }
}

No notes defined.