<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 icon }} a-button--icon{{/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;
    			fill: $color-cyberspace;
    		}
    
    		@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: $color-cyberspace;
    
    		&:hover,
    		&:focus {
    			color: inherit;
    			text-decoration: underline;
    		}
    
    		@include e(text) {
    			color: $color-cyberspace;
    		}
    
    		@include e(icon) {
    			width: $icon-size;
    			height: $icon-size;
    			fill: $color-cyberspace;
    		}
    
    		@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(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.1 KB

No notes defined.