<a href="#" class="a-button a-button--large-responsive">
<span class="a-button__text">Going home</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": "Going home",
"alternative_text": false,
"button_type": false,
"type": false,
"id": false,
"aria_controls": false,
"modifiers": [
"large-responsive"
]
}
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;
@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;
}
}
}
No notes defined.