Styleguide

Button: Full Width 

<button type="button" class="a-button a-button--full-width 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: 
    .a-button {
	@include 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
	@include fluid-props(padding-top padding-bottom, $fluid-min, $fluid-max, 6px, 10px);

	background-color: $color-primary;
	border-color: $color-primary;
	border-radius: .14285em; // 2/14
	color: $color-white;
	font-family: $font-secondary;
	font-weight: $font-weight-bold;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color $transition-fast $transition-ease, color $transition-fast $transition-ease;

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

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

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

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

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

		@include hover {
			background-color: $color-primary;

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

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

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

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

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

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

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

	@include hover {
		color: $color-white;
	}
}

.a-button--transparent {
	background-color: transparent;
	border-width: 1px;
	border-style: solid;
	color: $color-white;
	border-color: $color-white;
}
  • URL: /components/raw/a-button/_a-button.scss
  • Filesystem Path: styleguide/src/components/atoms/a-button/_a-button.scss
  • Size: 1.8 KB 
{
  "label": "Mitmachen",
  "class": "added-class",
  "modifiers": [
    "full-width"
  ]
}

No notes defined.