Styleguide

Button: Secondary Outlined 

<button type="button" class="a-button a-button--secondary a-button--outline added-class">Mitmachen</button>
 
{{#if link}}
	<a href="{{link}}" class="a-button {{ modifiers_classes }}{{#if class}} {{ class }}{{/if}}"{{#if target}}
		 target="{{ target }}"{{/if}}{{#if js_hook}}
		 data-{{ js_hook }}{{/if}}>{{ label }}</a>
{{else}}
	<button type="{{#if type}}{{type}}{{else}}button{{/if}}"
					class="a-button {{ modifiers_classes }}{{#if class}} {{ class }}{{/if}}"{{#if js_hook}}
					data-{{ js_hook }}{{/if}}>{{ label }}</button>
{{/if}}
  • Content: 
    @use "sass:math";
@use "../../../scss/variables" as v;
@use "../../../scss/mixins" as m;

.a-button {
	@include m.clean-link;
	
	& {
		font-size: 0.875em; // keep this as em
		display: inline-block;
		line-height: 1.71428em; // 24/14
		letter-spacing: .08928em; // 1.25/14
		padding-left: 1.57142em; // 22/14
		padding-right: 1.57142em; // 22/14
		background-color: v.$color-primary;
		border-color: v.$color-primary;
		border-radius: .14285em; // 2/14
		color: v.$color-white;
		font-family: v.$font-secondary;
		font-weight: v.$font-weight-bold;
		text-align: center;
		text-transform: uppercase;
		cursor: pointer;
		transition: background-color v.$transition-fast v.$transition-ease, color v.$transition-fast v.$transition-ease;
	}
	
	@include m.fluid-props(padding-top padding-bottom, v.$fluid-min, v.$fluid-max, 6px, 10px);

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

	@include m.hover {
		background-color: v.$color-primary-dark;

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

	&.a-button--outline {
		color: v.$color-primary;

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

		@include m.hover {
			background-color: v.$color-primary;

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

	&--full-width {
		width: 100%;
	}
}

.a-button--secondary {
	& {
		background-color: v.$color-secondary;
		border-color: v.$color-secondary;
	}

	@include m.hover {
		background-color: v.$color-secondary-dark;
	}

	&.a-button--outline {
		& {
			color: v.$color-secondary;
		}

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

.a-button--outline {
	& {
		background-color: transparent;
		border-width: 1px;
		border-style: solid;
	}

	@include m.hover {
		color: v.$color-white;
	}
}

.a-button--transparent {
	& {
		background-color: transparent;
		border-width: 1px;
		border-style: solid;
		color: v.$color-white;
		border-color: v.$color-white;
	}
}

// Feature toggle: invert CTA colors
// When the body has .has-inverted-cta, invert button colors inside any __cta block
// - Filled buttons: background becomes white, text becomes brand color
// - Outline buttons: become filled with the brand color
.a-button.has-inverted-cta {
	// default (primary) filled inversion
	background-color: v.$color-white;
	border-color: v.$color-white;
	color: v.$color-primary;

	// secondary variant inversion
	&.a-button--secondary {
		color: v.$color-secondary;
	}

	// outline becomes filled (primary)
	&.a-button--outline {
		background-color: v.$color-primary;
		border-color: v.$color-primary;
		color: v.$color-white;

		&.a-button--secondary {
			background-color: v.$color-secondary;
			border-color: v.$color-secondary;
		}
	}
}
  • URL: /components/raw/a-button/_a-button.scss
  • Filesystem Path: styleguide/src/components/atoms/a-button/_a-button.scss
  • Size: 2.8 KB 
{
  "label": "Mitmachen",
  "class": "added-class",
  "modifiers": [
    "secondary",
    "outline"
  ]
}

No notes defined.