Internetstiftelsen Styleguide

Button: Peacock 

<a href="#" class="a-button a-button--peacock">
    <span class="a-button__text">Peacock button</span>
</a>
 
<{{getelement el "a"}}
	{{#if id}}id="{{id}}"{{/if}}
	{{#if button_type}}type="{{button_type}}"{{/if}}
	{{#if url}}href="{{ url }}"{{/if}}
	class="a-button{{#if modifiers}} {{getmodifiers modifiers "a-button"}}{{/if}}{{#if additional_classes}} {{ additional_classes}}{{/if}}"
	{{{attr attributes}}}
	{{#if aria_controls}}aria-controls="{{ aria_controls }}"{{/if}}
>
	<span class="a-button__text"{{#if alternative_text}} data-alternative-text="{{alternative_text}}"{{/if}}>{{ text }}</span>
	{{#if icon}}
	{{> @icon id=icon additional_classes="a-button__icon"}}
	{{/if}}
</{{getelement el "a"}}>
 
{
  "url": "#",
  "text": "Peacock button",
  "alternative_text": false,
  "button_type": false,
  "type": false,
  "id": false,
  "aria_controls": false,
  "modifiers": [
    "peacock"
  ]
}
  • Content: 
    class Button {
	constructor(button, disabled = true) {
		this.button = button;
		this.disabled = disabled;

		this.build();
	}

	build() {
		const className = this.button.classList.item(0);
		const html = `
			<svg class="icon ${className}__spinner">
				<use xlink:href="#icon-spinner-white"></use>
			</svg>
		`;

		this.button.appendChild(document.createRange().createContextualFragment(html));
	}

	isLoading() {
		return this.button.classList.contains('is-loading');
	}

	start() {
		if (this.disabled) {
			this.button.setAttribute('disabled', 'disabled');
		}

		this.button.classList.add('is-loading');
	}

	stop() {
		if (this.disabled) {
			this.button.removeAttribute('disabled');
		}

		this.button.classList.remove('is-loading');
	}
}

module.exports = Button;
  • URL: /components/raw/button/Button.js
  • Filesystem Path: src/atoms/button/Button.js
  • Size: 774 Bytes
  • Content: 
    @charset 'UTF-8';

// Default Button
/// @group Buttons
@include atom(button) {
	display: inline-flex;
	position: relative;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: rhythm(1.112) rhythm(2);
	overflow: hidden;
	border: 0;
	border-radius: $border-radius;
	background-color: currentColor;
	background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
	box-shadow: 0 0 0 1px inset currentColor;
	color: $color-ocean-dark;
	font-family: $font-family-headings;
	font-size: rem(16px);
	text-decoration: none;
	text-shadow: none;
	hyphens: auto;
	cursor: pointer;

	&:hover,
	&:focus {
		color: $color-ocean;
	}

	&:disabled {
		background-color: $color-granit !important;
		box-shadow: none;
		cursor: not-allowed;

		[class*='text'] {
			color: $color-snow !important;
			text-shadow: none !important;
		}
	}

	// States
	&.is-loading {
		cursor: wait;
	}

	&.is-loading & {
		@include e(text) {
			transform: translateY(-100%);
			opacity: 0;
		}

		@include e(icon) {
			transform: translateY(-100%);
			opacity: 0;
		}

		@include e(spinner) {
			transform: translate(-50%, -50%);
			opacity: 1;
		}
	}

	@include e(text) {
		position: relative;
		transform: translateY(0);
		transition: 0.3s opacity, 0.3s transform;
		transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
		opacity: 1;
		color: $color-snow;
		pointer-events: none;
	}

	@include e(spinner) {
		position: absolute;
		top: 50%;
		left: 50%;
		width: $icon-size-small;
		height: $icon-size-small;
		transform: translate(-50%, 50%);
		transition: 0.3s opacity, 0.3s transform;
		transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
		opacity: 0;
	}

	// Modifiers

	@include m(full-width) {
		display: flex;
		width: 100%;
	}

	@include m(small) {
		padding: rhythm(0.6) rhythm(1.5);
	}

	@include m(large) {
		padding: rhythm(1.6) rhythm(4);

		@include e(text) {
			@include bp-up(sm) {
				font-size: rem(24px);
			}
		}

		@include e(icon) {
			width: $icon-size;
			height: $icon-size;
		}

		@include e(spinner) {
			width: $icon-size;
			height: $icon-size;
		}
	}

	@include m(large-responsive) {
		padding: rhythm(1.6) rhythm(4);

		@include e(text) {
			font-size: rem(24px);
		}

		@include e(icon) {
			width: $icon-size;
			height: $icon-size;
		}

		@include e(spinner) {
			width: $icon-size;
			height: $icon-size;
		}

		@include bp-down(sm) {
			padding: rhythm(1.112) rhythm(2);

			@include e(text) {
				font-size: rem(16px);
			}
		}
	}

	@include m(icon) {
		justify-content: space-between;
		max-width: rhythm(50);
		padding-right: rhythm(5);
		text-align: left;
	}

	@include m(icon-left) {
		justify-content: space-between;
		max-width: rhythm(50);
		padding-right: rhythm(2);
		padding-left: rhythm(5);

		@include e(icon) {
			right: auto;
			left: rhythm(1.5);
		}
	}

	@include m(standalone-icon) {
		padding: rhythm(1);
		border: 0;
		border-radius: 0;
		background-color: transparent;
		box-shadow: none;

		@include e(text) {
			@include visuallyhidden;
		}

		@include e(icon) {
			position: static;
			width: $icon-size;
			height: $icon-size;
			transform: none;
			color: var(--cyberspace-color);
			fill: currentColor;
		}

		@include m(white) {
			@include e(icon) {
				fill: $color-snow;
			}
		}
	}

	@include e(icon) {
		position: absolute;
		z-index: z_index(background);
		top: 50%;
		right: rhythm(1.5);
		width: $icon-size-small;
		height: $icon-size-small;
		transform: translateY(-50%);
		transition: fill 100ms linear;
		fill: $color-snow;
		pointer-events: none;
	}

	// More colors
	@include m(transparent) {
		border-color: transparent;
		background-color: transparent;
		box-shadow: none;
		color: var(--cyberspace-color);

		&:hover,
		&:focus {
			color: inherit;
			text-decoration: underline;
		}

		@include e(text) {
			color: var(--cyberspace-color);
		}

		@include e(icon) {
			width: $icon-size;
			height: $icon-size;
			fill: var(--cyberspace-cyberspace);
			fill: currentColor;
		}

		@include m(small-icon) {
			@include e(icon) {
				width: $icon-size-small;
				height: $icon-size-small;
			}
		}
	}

	@include m(cyberspace) {
		color: $color-cyberspace;

		&:hover,
		&:focus {
			color: $color-granit;
		}

		@include e(text) {
			color: $color-snow;
		}

		@include e(icon) {
			fill: $color-snow;
		}
	}

	@include m(snow) {
		color: transparent;

		&:hover,
		&:focus {
			color: $color-snow;
		}

		@include e(text) {
			color: $color-snow;
		}

		@include e(icon) {
			fill: $color-snow;
		}
	}

	@include m(ruby) {
		color: $color-ruby;

		&:hover,
		&:focus {
			color: $color-ruby-dark;
		}

		@include e(text) {
			color: $color-snow;
			text-shadow: 0 0 rhythm(0.5) $color-ruby-dark;
		}

		@include e(icon) {
			fill: $color-snow;
		}
	}

	@include m(ruby-light) {
		box-shadow: 0 0 0 1px inset $color-ruby;
		color: $color-ruby-light;

		&:hover,
		&:focus {
			color: $color-ruby;
		}

		@include e(text) {
			color: $color-cyberspace;
		}

		@include e(icon) {
			fill: $color-cyberspace;
		}
	}

	@include m(ruby-dark) {
		color: $color-ruby-dark;

		&:hover,
		&:focus {
			color: $color-ruby;
		}

		@include e(text) {
			color: $color-snow;
		}

		@include e(icon) {
			fill: $color-snow;
		}
	}

	@include m(ocean-light) {
		box-shadow: 0 0 0 1px inset $color-ocean;
		color: $color-ocean-light;

		&:hover,
		&:focus {
			color: $color-ocean;
		}

		@include e(text) {
			color: $color-cyberspace;
		}

		@include e(icon) {
			fill: $color-cyberspace;
		}
	}

	@include m(jade) {
		color: $color-jade;

		&:hover,
		&:focus {
			color: darken($color-jade, 10%);
			text-shadow: none;
		}

		@include e(text) {
			color: $color-snow;
			text-shadow: 0 0 rhythm(2) $color-jade-dark;
		}

		@include e(icon) {
			fill: $color-cyberspace;
		}
	}

	@include m(jade-light) {
		box-shadow: 0 0 0 1px inset $color-jade;
		color: $color-jade-light;

		&:hover,
		&:focus {
			color: $color-jade;
		}

		@include e(text) {
			color: $color-cyberspace;
		}

		@include e(icon) {
			fill: $color-cyberspace;
		}
	}

	@include m(jade-dark) {
		color: $color-jade-dark;

		&:hover,
		&:focus {
			color: $color-jade;
		}

		@include e(text) {
			color: $color-snow;
		}

		@include e(icon) {
			fill: $color-snow;
		}
	}

	@include m(lemon) {
		color: $color-lemon;

		&:hover,
		&:focus {
			color: $color-lemon-light;
		}

		@include e(text) {
			color: $color-cyberspace;
		}

		@include e(icon) {
			fill: $color-cyberspace;
		}
	}

	@include m(lemon-light) {
		box-shadow: 0 0 0 1px inset $color-lemon;
		color: $color-lemon-light;

		&:hover,
		&:focus {
			background-color: $color-lemon;
		}

		@include e(text) {
			color: $color-cyberspace;
		}

		@include e(icon) {
			fill: $color-cyberspace;
		}
	}

	@include m(peacock) {
		color: $color-peacock;

		&:hover {
			color: darken($color-peacock, 10%);
			text-shadow: none;
		}

		&:focus {
			color: $color-peacock;
		}

		&:hover:focus {
			color: $color-peacock;
		}

		@include e(text) {
			color: $color-snow;
			text-shadow: 0 0 rhythm(2) $color-peacock-dark;
		}

		@include e(icon) {
			fill: $color-cyberspace;
		}
	}

	@include m(peacock-light) {
		box-shadow: 0 0 0 1px inset $color-peacock;
		color: $color-peacock-light;

		&:hover {
			color: $color-peacock;
		}

		&:focus {
			color: $color-peacock-light;
		}

		&:hover:focus {
			color: $color-peacock-light;
		}

		@include e(text) {
			color: $color-cyberspace;
		}

		@include e(icon) {
			fill: $color-cyberspace;
		}
	}

	@include m(sandstone) {
		color: $color-sandstone;

		&:hover,
		&:focus {
			color: $color-sandstone-light;
		}

		@include e(text) {
			color: $color-cyberspace;
		}

		@include e(icon) {
			fill: $color-cyberspace;
		}
	}

	@include m(sandstone-light) {
		box-shadow: 0 0 0 1px inset $color-sandstone;
		color: $color-sandstone-light;

		&:hover {
			color: $color-sandstone;
		}
		
		&:focus {
			color: $color-sandstone-light;
		}

		&:hover:focus {
			color: $color-sandstone-light;
		}

		@include e(text) {
			color: $color-cyberspace;
		}

		@include e(icon) {
			fill: $color-cyberspace;
		}
	}

	@include m(dashed) {
		border: 1px dashed;
		background: transparent;
		box-shadow: none;
		color: $color-cyberspace;

		&:hover,
		&:focus {
			color: $color-cyberspace;
			text-decoration: underline;
		}

		@include e(text) {
			color: inherit;
		}
	}
}
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: src/atoms/button/_button.scss
  • Size: 8.4 KB

No notes defined.