Copy environment

Button 

<button type="button" class="button   ">

    <span class="button__inner" data-text="fondid">
        <span class="button__text">
            fondid

        </span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set includeIcon %}
    {% include '@icon' with { name: data.icon, modifier: data.iconAppear ? 'button__icon--appear' : '', class: 'button__icon' } %}
{% endset %}
{% set icon %}
    {% if data.icon %}
        {{ includeIcon }}
    {% endif %}
{% endset %}
{% set pseudoIcon %}
    {% if data.icon and (not data.text) %}
        <span class="button__pseudo-icon">
            {{ includeIcon }}
        </span>
    {% endif %}
{% endset %}

<{{ element }} {% if data.link %} href="{{ data.link|default('#') }}" {% if data.download %} download {% endif %} {% else %} type="{{ type|default('button') }}" {% endif %} class="button {{ modifier }} {{ class }} {% if data.disabled %}disabled{% endif %}"{% if data.attributes %} {{ data.attributes }}{% endif %} {% if data.disabled %}disabled{% endif %}>
    {{ pseudoIcon }}
    <span class="button__inner" data-text="{{ data.text }}">
        <span class="button__text">
            {{ data.text }}
            {{ icon }}
        </span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "fondid"
  }
}
  • Content: 
    @keyframes bounce {
    0% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }

    50% {
        transition-timing-function: $transition-easing;
        transform: translateX(4px);
    }

    100% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }
}

.button {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;
    height: 40px;
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    cursor: pointer;

    @include bp(sm-min) {
        height: 60px;
    }

    &:disabled {
        cursor: auto;

        & > * {
            opacity: .3;
        }
    }

    &.button--icon-text {
        height: auto;

        @include bp(sm-min) {
            height: auto;
        }
    }

    &.button--white {
        height: 100%;
        overflow: hidden;
    }

    &:before {
        border-bottom: none;
    }

    &:after {
        border-bottom: none;
    }

    &:focus {
        &:after {
            content: '';
            position: absolute;
            left: -4px;
            right: -4px;
            top: -4px;
            bottom: -4px;
            border: 2px solid var(--color-compliment);
            background: transparent;
            box-shadow: 0 0 4px rgba(var(--color-compliment), .7);
        }

        &.button--bordered,
        &.button--icon,
        &.button--white {
            &:after {
                left: -5px;
                right: -5px;
                top: -5px;
                bottom: -5px;
            }
        }

        &:disabled:after {
            content: none;
        }
    }
}

.button--icon,
.button--bordered {
    box-shadow: 0 0 0 1px var(--color-brand) inset;
    transition: $transition-duration $transition-easing;
    transition-property: border, box-shadow;
}

.button--icon {
    overflow: hidden;
}

.button__pseudo-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: var(--color-brand);
    color: var(--color-text-inverse);
    transform: translateX(-101%);
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    padding: 7px 7px;

    @include bp(sm-min) {
        padding: 17px;
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateX(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateX(-101%);
        }
    }

    .button:active & {
        color: rgba(var(--color-text-inverse--rgb), .5);
    }

    .button:disabled & {
        display: none;
    }
}

.button__inner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    text-transform: uppercase;
    -webkit-appearance: none;
    transition: opacity $transition-duration $transition-easing;

    .button--white & {
        display: flex;
        align-items: center;
        height: 100%;
        background-color: var(--color-text-inverse);
        transition: background-color $transition-duration $transition-easing, opacity;
    }

    .button--icon-text & {
        text-transform: none;
        overflow: visible;
    }

    &:before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        background: var(--color-brand);
        color: var(--color-text-inverse);
        transform: translateX(-101%);
        transition-timing-function: $transition-easing;
        transition-duration: $transition-duration;
        transition-property: transform, color, opacity;
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }

        .button--white & {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-brand);
            color: var(--color-text-inverse);
        }

        .button--icon-text &,
        .button--icon & {
            content: none;
        }

        .button:hover & {
            @media (hover: hover) {
                transform: translateX(0%);
            }
        }

        .button:hover:disabled &,
        .button.button--icon-text:hover & {
            @media (hover: hover) {
                transform: translateX(-101%);
            }
        }

        .button:active & {
            color: $color-gray;
        }

        .button:active:disabled & {
            color: var(--color-text-inverse);
        }
    }
}

.button__text {
    display: flex;
    position: relative;
    align-items: center;
    background: none;
    color: var(--color-text);
    transform: translateY(0%);
    padding: 8px 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    font-size: $font-size-button;
    font-weight: $font-weight-normal;
    line-height: $font-line-height-button;
    text-transform: uppercase;

    @include bp(sm-min) {
        font-size: $font-size-button-lg;
        line-height: $font-line-height-button-lg;
        padding: 15px 24px;
    }

    .button--white &,
    .button--bordered & {
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }
    }

    .button--icon & {
        padding: 8px 8px;

        @include bp(sm-min) {
            padding: 18px;
        }
    }

    .button--icon-text & {
        text-transform: none;
        padding: 0;

        @include bp(sm-min) {
            padding: 0;
        }
    }

    .button--icon-text.button--icon-text-large & {
        font-size: $font-size-large;
        font-weight: $font-weight-normal;
        line-height: $font-line-height-large;

        @include bp(sm-min) {
            font-size: $font-size-large-lg;
            line-height: $font-line-height-large-lg;
        }
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateY(100%);
        }
    }

    .button.button--icon-text:hover & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button--icon-text:active & {
        color: rgba(var(--color-text--rgb), .5);
    }

    .button:active:disabled & {
        color: var(--color-text);
    }
}

.button__icon {
    font-size: 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: opacity;

    &.button__icon--appear {
        opacity: 0;
        animation: bounce 500ms infinite;

        .button:disabled & {
            animation: none;
        }

        .button:hover & {
            @media (hover: hover) {
                opacity: 1;
            }
        }

        .button:hover:disabled & {
            @media (hover: hover) {
                opacity: 0;
            }
        }
    }

    .button:hover & {
        @media (hover: hover) {
            animation: bounce 500ms infinite;
        }
    }

    .button.button--icon:hover & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:active & {
        animation: none;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 7.6 KB
  • Content: 
    import './button.scss';
import Icon from '@icon';

export interface IButton {
    text?: string;
    backgroundColor?: string;
    icon?: string;
    iconAppear?: boolean;
    link?: string;
    disabled?: boolean;
}

export default class Button {
    static render(data: IButton, className?: string): JQuery {
        const element: string = data.link ? 'a' : 'button';
        const classArray: string[] = ['button'];
        const icon: string = data.icon ? Icon.render(data.icon, data.iconAppear ? 'button__icon--appear' : '', 'button__icon') : '';
        const pseudoIcon: string = (data.icon && data.text.length === 0) ? '<span class="button__pseudo-icon">'+ icon +'</span>' : '';

        if (className) {
            classArray.push(className);
        }

        const textContent: string = '<span class="button__inner" data-text="'+ data.text +'"><span class="button__text">'+ data.text + icon +'</span></span>';

        return $(`<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"' } ${data.disabled ? 'disabled' : ''}>${pseudoIcon} ${textContent}</${element}>`);
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.1 KB

Bordered Button 

<button type="button" class="button button--bordered  ">

    <span class="button__inner" data-text="fondid">
        <span class="button__text">
            fondid

        </span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set includeIcon %}
    {% include '@icon' with { name: data.icon, modifier: data.iconAppear ? 'button__icon--appear' : '', class: 'button__icon' } %}
{% endset %}
{% set icon %}
    {% if data.icon %}
        {{ includeIcon }}
    {% endif %}
{% endset %}
{% set pseudoIcon %}
    {% if data.icon and (not data.text) %}
        <span class="button__pseudo-icon">
            {{ includeIcon }}
        </span>
    {% endif %}
{% endset %}

<{{ element }} {% if data.link %} href="{{ data.link|default('#') }}" {% if data.download %} download {% endif %} {% else %} type="{{ type|default('button') }}" {% endif %} class="button {{ modifier }} {{ class }} {% if data.disabled %}disabled{% endif %}"{% if data.attributes %} {{ data.attributes }}{% endif %} {% if data.disabled %}disabled{% endif %}>
    {{ pseudoIcon }}
    <span class="button__inner" data-text="{{ data.text }}">
        <span class="button__text">
            {{ data.text }}
            {{ icon }}
        </span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "fondid"
  },
  "modifier": "button--bordered"
}
  • Content: 
    @keyframes bounce {
    0% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }

    50% {
        transition-timing-function: $transition-easing;
        transform: translateX(4px);
    }

    100% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }
}

.button {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;
    height: 40px;
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    cursor: pointer;

    @include bp(sm-min) {
        height: 60px;
    }

    &:disabled {
        cursor: auto;

        & > * {
            opacity: .3;
        }
    }

    &.button--icon-text {
        height: auto;

        @include bp(sm-min) {
            height: auto;
        }
    }

    &.button--white {
        height: 100%;
        overflow: hidden;
    }

    &:before {
        border-bottom: none;
    }

    &:after {
        border-bottom: none;
    }

    &:focus {
        &:after {
            content: '';
            position: absolute;
            left: -4px;
            right: -4px;
            top: -4px;
            bottom: -4px;
            border: 2px solid var(--color-compliment);
            background: transparent;
            box-shadow: 0 0 4px rgba(var(--color-compliment), .7);
        }

        &.button--bordered,
        &.button--icon,
        &.button--white {
            &:after {
                left: -5px;
                right: -5px;
                top: -5px;
                bottom: -5px;
            }
        }

        &:disabled:after {
            content: none;
        }
    }
}

.button--icon,
.button--bordered {
    box-shadow: 0 0 0 1px var(--color-brand) inset;
    transition: $transition-duration $transition-easing;
    transition-property: border, box-shadow;
}

.button--icon {
    overflow: hidden;
}

.button__pseudo-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: var(--color-brand);
    color: var(--color-text-inverse);
    transform: translateX(-101%);
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    padding: 7px 7px;

    @include bp(sm-min) {
        padding: 17px;
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateX(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateX(-101%);
        }
    }

    .button:active & {
        color: rgba(var(--color-text-inverse--rgb), .5);
    }

    .button:disabled & {
        display: none;
    }
}

.button__inner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    text-transform: uppercase;
    -webkit-appearance: none;
    transition: opacity $transition-duration $transition-easing;

    .button--white & {
        display: flex;
        align-items: center;
        height: 100%;
        background-color: var(--color-text-inverse);
        transition: background-color $transition-duration $transition-easing, opacity;
    }

    .button--icon-text & {
        text-transform: none;
        overflow: visible;
    }

    &:before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        background: var(--color-brand);
        color: var(--color-text-inverse);
        transform: translateX(-101%);
        transition-timing-function: $transition-easing;
        transition-duration: $transition-duration;
        transition-property: transform, color, opacity;
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }

        .button--white & {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-brand);
            color: var(--color-text-inverse);
        }

        .button--icon-text &,
        .button--icon & {
            content: none;
        }

        .button:hover & {
            @media (hover: hover) {
                transform: translateX(0%);
            }
        }

        .button:hover:disabled &,
        .button.button--icon-text:hover & {
            @media (hover: hover) {
                transform: translateX(-101%);
            }
        }

        .button:active & {
            color: $color-gray;
        }

        .button:active:disabled & {
            color: var(--color-text-inverse);
        }
    }
}

.button__text {
    display: flex;
    position: relative;
    align-items: center;
    background: none;
    color: var(--color-text);
    transform: translateY(0%);
    padding: 8px 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    font-size: $font-size-button;
    font-weight: $font-weight-normal;
    line-height: $font-line-height-button;
    text-transform: uppercase;

    @include bp(sm-min) {
        font-size: $font-size-button-lg;
        line-height: $font-line-height-button-lg;
        padding: 15px 24px;
    }

    .button--white &,
    .button--bordered & {
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }
    }

    .button--icon & {
        padding: 8px 8px;

        @include bp(sm-min) {
            padding: 18px;
        }
    }

    .button--icon-text & {
        text-transform: none;
        padding: 0;

        @include bp(sm-min) {
            padding: 0;
        }
    }

    .button--icon-text.button--icon-text-large & {
        font-size: $font-size-large;
        font-weight: $font-weight-normal;
        line-height: $font-line-height-large;

        @include bp(sm-min) {
            font-size: $font-size-large-lg;
            line-height: $font-line-height-large-lg;
        }
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateY(100%);
        }
    }

    .button.button--icon-text:hover & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button--icon-text:active & {
        color: rgba(var(--color-text--rgb), .5);
    }

    .button:active:disabled & {
        color: var(--color-text);
    }
}

.button__icon {
    font-size: 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: opacity;

    &.button__icon--appear {
        opacity: 0;
        animation: bounce 500ms infinite;

        .button:disabled & {
            animation: none;
        }

        .button:hover & {
            @media (hover: hover) {
                opacity: 1;
            }
        }

        .button:hover:disabled & {
            @media (hover: hover) {
                opacity: 0;
            }
        }
    }

    .button:hover & {
        @media (hover: hover) {
            animation: bounce 500ms infinite;
        }
    }

    .button.button--icon:hover & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:active & {
        animation: none;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 7.6 KB
  • Content: 
    import './button.scss';
import Icon from '@icon';

export interface IButton {
    text?: string;
    backgroundColor?: string;
    icon?: string;
    iconAppear?: boolean;
    link?: string;
    disabled?: boolean;
}

export default class Button {
    static render(data: IButton, className?: string): JQuery {
        const element: string = data.link ? 'a' : 'button';
        const classArray: string[] = ['button'];
        const icon: string = data.icon ? Icon.render(data.icon, data.iconAppear ? 'button__icon--appear' : '', 'button__icon') : '';
        const pseudoIcon: string = (data.icon && data.text.length === 0) ? '<span class="button__pseudo-icon">'+ icon +'</span>' : '';

        if (className) {
            classArray.push(className);
        }

        const textContent: string = '<span class="button__inner" data-text="'+ data.text +'"><span class="button__text">'+ data.text + icon +'</span></span>';

        return $(`<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"' } ${data.disabled ? 'disabled' : ''}>${pseudoIcon} ${textContent}</${element}>`);
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.1 KB
  • Handle: @button--bordered-button
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Text Button 

<button type="button" class="button button--icon-text  ">

    <span class="button__inner" data-text="fondid">
        <span class="button__text">
            fondid
            <svg class="icon  button__icon">
                <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-left"></use>
            </svg>

        </span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set includeIcon %}
    {% include '@icon' with { name: data.icon, modifier: data.iconAppear ? 'button__icon--appear' : '', class: 'button__icon' } %}
{% endset %}
{% set icon %}
    {% if data.icon %}
        {{ includeIcon }}
    {% endif %}
{% endset %}
{% set pseudoIcon %}
    {% if data.icon and (not data.text) %}
        <span class="button__pseudo-icon">
            {{ includeIcon }}
        </span>
    {% endif %}
{% endset %}

<{{ element }} {% if data.link %} href="{{ data.link|default('#') }}" {% if data.download %} download {% endif %} {% else %} type="{{ type|default('button') }}" {% endif %} class="button {{ modifier }} {{ class }} {% if data.disabled %}disabled{% endif %}"{% if data.attributes %} {{ data.attributes }}{% endif %} {% if data.disabled %}disabled{% endif %}>
    {{ pseudoIcon }}
    <span class="button__inner" data-text="{{ data.text }}">
        <span class="button__text">
            {{ data.text }}
            {{ icon }}
        </span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "fondid",
    "icon": "arrow-left"
  },
  "modifier": "button--icon-text"
}
  • Content: 
    @keyframes bounce {
    0% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }

    50% {
        transition-timing-function: $transition-easing;
        transform: translateX(4px);
    }

    100% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }
}

.button {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;
    height: 40px;
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    cursor: pointer;

    @include bp(sm-min) {
        height: 60px;
    }

    &:disabled {
        cursor: auto;

        & > * {
            opacity: .3;
        }
    }

    &.button--icon-text {
        height: auto;

        @include bp(sm-min) {
            height: auto;
        }
    }

    &.button--white {
        height: 100%;
        overflow: hidden;
    }

    &:before {
        border-bottom: none;
    }

    &:after {
        border-bottom: none;
    }

    &:focus {
        &:after {
            content: '';
            position: absolute;
            left: -4px;
            right: -4px;
            top: -4px;
            bottom: -4px;
            border: 2px solid var(--color-compliment);
            background: transparent;
            box-shadow: 0 0 4px rgba(var(--color-compliment), .7);
        }

        &.button--bordered,
        &.button--icon,
        &.button--white {
            &:after {
                left: -5px;
                right: -5px;
                top: -5px;
                bottom: -5px;
            }
        }

        &:disabled:after {
            content: none;
        }
    }
}

.button--icon,
.button--bordered {
    box-shadow: 0 0 0 1px var(--color-brand) inset;
    transition: $transition-duration $transition-easing;
    transition-property: border, box-shadow;
}

.button--icon {
    overflow: hidden;
}

.button__pseudo-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: var(--color-brand);
    color: var(--color-text-inverse);
    transform: translateX(-101%);
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    padding: 7px 7px;

    @include bp(sm-min) {
        padding: 17px;
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateX(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateX(-101%);
        }
    }

    .button:active & {
        color: rgba(var(--color-text-inverse--rgb), .5);
    }

    .button:disabled & {
        display: none;
    }
}

.button__inner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    text-transform: uppercase;
    -webkit-appearance: none;
    transition: opacity $transition-duration $transition-easing;

    .button--white & {
        display: flex;
        align-items: center;
        height: 100%;
        background-color: var(--color-text-inverse);
        transition: background-color $transition-duration $transition-easing, opacity;
    }

    .button--icon-text & {
        text-transform: none;
        overflow: visible;
    }

    &:before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        background: var(--color-brand);
        color: var(--color-text-inverse);
        transform: translateX(-101%);
        transition-timing-function: $transition-easing;
        transition-duration: $transition-duration;
        transition-property: transform, color, opacity;
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }

        .button--white & {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-brand);
            color: var(--color-text-inverse);
        }

        .button--icon-text &,
        .button--icon & {
            content: none;
        }

        .button:hover & {
            @media (hover: hover) {
                transform: translateX(0%);
            }
        }

        .button:hover:disabled &,
        .button.button--icon-text:hover & {
            @media (hover: hover) {
                transform: translateX(-101%);
            }
        }

        .button:active & {
            color: $color-gray;
        }

        .button:active:disabled & {
            color: var(--color-text-inverse);
        }
    }
}

.button__text {
    display: flex;
    position: relative;
    align-items: center;
    background: none;
    color: var(--color-text);
    transform: translateY(0%);
    padding: 8px 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    font-size: $font-size-button;
    font-weight: $font-weight-normal;
    line-height: $font-line-height-button;
    text-transform: uppercase;

    @include bp(sm-min) {
        font-size: $font-size-button-lg;
        line-height: $font-line-height-button-lg;
        padding: 15px 24px;
    }

    .button--white &,
    .button--bordered & {
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }
    }

    .button--icon & {
        padding: 8px 8px;

        @include bp(sm-min) {
            padding: 18px;
        }
    }

    .button--icon-text & {
        text-transform: none;
        padding: 0;

        @include bp(sm-min) {
            padding: 0;
        }
    }

    .button--icon-text.button--icon-text-large & {
        font-size: $font-size-large;
        font-weight: $font-weight-normal;
        line-height: $font-line-height-large;

        @include bp(sm-min) {
            font-size: $font-size-large-lg;
            line-height: $font-line-height-large-lg;
        }
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateY(100%);
        }
    }

    .button.button--icon-text:hover & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button--icon-text:active & {
        color: rgba(var(--color-text--rgb), .5);
    }

    .button:active:disabled & {
        color: var(--color-text);
    }
}

.button__icon {
    font-size: 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: opacity;

    &.button__icon--appear {
        opacity: 0;
        animation: bounce 500ms infinite;

        .button:disabled & {
            animation: none;
        }

        .button:hover & {
            @media (hover: hover) {
                opacity: 1;
            }
        }

        .button:hover:disabled & {
            @media (hover: hover) {
                opacity: 0;
            }
        }
    }

    .button:hover & {
        @media (hover: hover) {
            animation: bounce 500ms infinite;
        }
    }

    .button.button--icon:hover & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:active & {
        animation: none;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 7.6 KB
  • Content: 
    import './button.scss';
import Icon from '@icon';

export interface IButton {
    text?: string;
    backgroundColor?: string;
    icon?: string;
    iconAppear?: boolean;
    link?: string;
    disabled?: boolean;
}

export default class Button {
    static render(data: IButton, className?: string): JQuery {
        const element: string = data.link ? 'a' : 'button';
        const classArray: string[] = ['button'];
        const icon: string = data.icon ? Icon.render(data.icon, data.iconAppear ? 'button__icon--appear' : '', 'button__icon') : '';
        const pseudoIcon: string = (data.icon && data.text.length === 0) ? '<span class="button__pseudo-icon">'+ icon +'</span>' : '';

        if (className) {
            classArray.push(className);
        }

        const textContent: string = '<span class="button__inner" data-text="'+ data.text +'"><span class="button__text">'+ data.text + icon +'</span></span>';

        return $(`<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"' } ${data.disabled ? 'disabled' : ''}>${pseudoIcon} ${textContent}</${element}>`);
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.1 KB
  • Handle: @button--text-button
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Text Button Large 

<button type="button" class="button button--icon-text button--icon-text-large  ">

    <span class="button__inner" data-text="fondid">
        <span class="button__text">
            fondid
            <svg class="icon  button__icon">
                <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-left"></use>
            </svg>

        </span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set includeIcon %}
    {% include '@icon' with { name: data.icon, modifier: data.iconAppear ? 'button__icon--appear' : '', class: 'button__icon' } %}
{% endset %}
{% set icon %}
    {% if data.icon %}
        {{ includeIcon }}
    {% endif %}
{% endset %}
{% set pseudoIcon %}
    {% if data.icon and (not data.text) %}
        <span class="button__pseudo-icon">
            {{ includeIcon }}
        </span>
    {% endif %}
{% endset %}

<{{ element }} {% if data.link %} href="{{ data.link|default('#') }}" {% if data.download %} download {% endif %} {% else %} type="{{ type|default('button') }}" {% endif %} class="button {{ modifier }} {{ class }} {% if data.disabled %}disabled{% endif %}"{% if data.attributes %} {{ data.attributes }}{% endif %} {% if data.disabled %}disabled{% endif %}>
    {{ pseudoIcon }}
    <span class="button__inner" data-text="{{ data.text }}">
        <span class="button__text">
            {{ data.text }}
            {{ icon }}
        </span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "fondid",
    "icon": "arrow-left",
    "isTextLarge": true
  },
  "modifier": "button--icon-text button--icon-text-large"
}
  • Content: 
    @keyframes bounce {
    0% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }

    50% {
        transition-timing-function: $transition-easing;
        transform: translateX(4px);
    }

    100% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }
}

.button {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;
    height: 40px;
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    cursor: pointer;

    @include bp(sm-min) {
        height: 60px;
    }

    &:disabled {
        cursor: auto;

        & > * {
            opacity: .3;
        }
    }

    &.button--icon-text {
        height: auto;

        @include bp(sm-min) {
            height: auto;
        }
    }

    &.button--white {
        height: 100%;
        overflow: hidden;
    }

    &:before {
        border-bottom: none;
    }

    &:after {
        border-bottom: none;
    }

    &:focus {
        &:after {
            content: '';
            position: absolute;
            left: -4px;
            right: -4px;
            top: -4px;
            bottom: -4px;
            border: 2px solid var(--color-compliment);
            background: transparent;
            box-shadow: 0 0 4px rgba(var(--color-compliment), .7);
        }

        &.button--bordered,
        &.button--icon,
        &.button--white {
            &:after {
                left: -5px;
                right: -5px;
                top: -5px;
                bottom: -5px;
            }
        }

        &:disabled:after {
            content: none;
        }
    }
}

.button--icon,
.button--bordered {
    box-shadow: 0 0 0 1px var(--color-brand) inset;
    transition: $transition-duration $transition-easing;
    transition-property: border, box-shadow;
}

.button--icon {
    overflow: hidden;
}

.button__pseudo-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: var(--color-brand);
    color: var(--color-text-inverse);
    transform: translateX(-101%);
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    padding: 7px 7px;

    @include bp(sm-min) {
        padding: 17px;
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateX(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateX(-101%);
        }
    }

    .button:active & {
        color: rgba(var(--color-text-inverse--rgb), .5);
    }

    .button:disabled & {
        display: none;
    }
}

.button__inner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    text-transform: uppercase;
    -webkit-appearance: none;
    transition: opacity $transition-duration $transition-easing;

    .button--white & {
        display: flex;
        align-items: center;
        height: 100%;
        background-color: var(--color-text-inverse);
        transition: background-color $transition-duration $transition-easing, opacity;
    }

    .button--icon-text & {
        text-transform: none;
        overflow: visible;
    }

    &:before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        background: var(--color-brand);
        color: var(--color-text-inverse);
        transform: translateX(-101%);
        transition-timing-function: $transition-easing;
        transition-duration: $transition-duration;
        transition-property: transform, color, opacity;
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }

        .button--white & {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-brand);
            color: var(--color-text-inverse);
        }

        .button--icon-text &,
        .button--icon & {
            content: none;
        }

        .button:hover & {
            @media (hover: hover) {
                transform: translateX(0%);
            }
        }

        .button:hover:disabled &,
        .button.button--icon-text:hover & {
            @media (hover: hover) {
                transform: translateX(-101%);
            }
        }

        .button:active & {
            color: $color-gray;
        }

        .button:active:disabled & {
            color: var(--color-text-inverse);
        }
    }
}

.button__text {
    display: flex;
    position: relative;
    align-items: center;
    background: none;
    color: var(--color-text);
    transform: translateY(0%);
    padding: 8px 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    font-size: $font-size-button;
    font-weight: $font-weight-normal;
    line-height: $font-line-height-button;
    text-transform: uppercase;

    @include bp(sm-min) {
        font-size: $font-size-button-lg;
        line-height: $font-line-height-button-lg;
        padding: 15px 24px;
    }

    .button--white &,
    .button--bordered & {
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }
    }

    .button--icon & {
        padding: 8px 8px;

        @include bp(sm-min) {
            padding: 18px;
        }
    }

    .button--icon-text & {
        text-transform: none;
        padding: 0;

        @include bp(sm-min) {
            padding: 0;
        }
    }

    .button--icon-text.button--icon-text-large & {
        font-size: $font-size-large;
        font-weight: $font-weight-normal;
        line-height: $font-line-height-large;

        @include bp(sm-min) {
            font-size: $font-size-large-lg;
            line-height: $font-line-height-large-lg;
        }
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateY(100%);
        }
    }

    .button.button--icon-text:hover & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button--icon-text:active & {
        color: rgba(var(--color-text--rgb), .5);
    }

    .button:active:disabled & {
        color: var(--color-text);
    }
}

.button__icon {
    font-size: 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: opacity;

    &.button__icon--appear {
        opacity: 0;
        animation: bounce 500ms infinite;

        .button:disabled & {
            animation: none;
        }

        .button:hover & {
            @media (hover: hover) {
                opacity: 1;
            }
        }

        .button:hover:disabled & {
            @media (hover: hover) {
                opacity: 0;
            }
        }
    }

    .button:hover & {
        @media (hover: hover) {
            animation: bounce 500ms infinite;
        }
    }

    .button.button--icon:hover & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:active & {
        animation: none;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 7.6 KB
  • Content: 
    import './button.scss';
import Icon from '@icon';

export interface IButton {
    text?: string;
    backgroundColor?: string;
    icon?: string;
    iconAppear?: boolean;
    link?: string;
    disabled?: boolean;
}

export default class Button {
    static render(data: IButton, className?: string): JQuery {
        const element: string = data.link ? 'a' : 'button';
        const classArray: string[] = ['button'];
        const icon: string = data.icon ? Icon.render(data.icon, data.iconAppear ? 'button__icon--appear' : '', 'button__icon') : '';
        const pseudoIcon: string = (data.icon && data.text.length === 0) ? '<span class="button__pseudo-icon">'+ icon +'</span>' : '';

        if (className) {
            classArray.push(className);
        }

        const textContent: string = '<span class="button__inner" data-text="'+ data.text +'"><span class="button__text">'+ data.text + icon +'</span></span>';

        return $(`<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"' } ${data.disabled ? 'disabled' : ''}>${pseudoIcon} ${textContent}</${element}>`);
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.1 KB
  • Handle: @button--text-button-large
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Text Button Appear 

<button type="button" class="button button--icon-text  ">

    <span class="button__inner" data-text="fondid">
        <span class="button__text">
            fondid
            <svg class="icon button__icon--appear button__icon">
                <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-left"></use>
            </svg>

        </span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set includeIcon %}
    {% include '@icon' with { name: data.icon, modifier: data.iconAppear ? 'button__icon--appear' : '', class: 'button__icon' } %}
{% endset %}
{% set icon %}
    {% if data.icon %}
        {{ includeIcon }}
    {% endif %}
{% endset %}
{% set pseudoIcon %}
    {% if data.icon and (not data.text) %}
        <span class="button__pseudo-icon">
            {{ includeIcon }}
        </span>
    {% endif %}
{% endset %}

<{{ element }} {% if data.link %} href="{{ data.link|default('#') }}" {% if data.download %} download {% endif %} {% else %} type="{{ type|default('button') }}" {% endif %} class="button {{ modifier }} {{ class }} {% if data.disabled %}disabled{% endif %}"{% if data.attributes %} {{ data.attributes }}{% endif %} {% if data.disabled %}disabled{% endif %}>
    {{ pseudoIcon }}
    <span class="button__inner" data-text="{{ data.text }}">
        <span class="button__text">
            {{ data.text }}
            {{ icon }}
        </span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "fondid",
    "icon": "arrow-left",
    "iconAppear": true
  },
  "modifier": "button--icon-text"
}
  • Content: 
    @keyframes bounce {
    0% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }

    50% {
        transition-timing-function: $transition-easing;
        transform: translateX(4px);
    }

    100% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }
}

.button {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;
    height: 40px;
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    cursor: pointer;

    @include bp(sm-min) {
        height: 60px;
    }

    &:disabled {
        cursor: auto;

        & > * {
            opacity: .3;
        }
    }

    &.button--icon-text {
        height: auto;

        @include bp(sm-min) {
            height: auto;
        }
    }

    &.button--white {
        height: 100%;
        overflow: hidden;
    }

    &:before {
        border-bottom: none;
    }

    &:after {
        border-bottom: none;
    }

    &:focus {
        &:after {
            content: '';
            position: absolute;
            left: -4px;
            right: -4px;
            top: -4px;
            bottom: -4px;
            border: 2px solid var(--color-compliment);
            background: transparent;
            box-shadow: 0 0 4px rgba(var(--color-compliment), .7);
        }

        &.button--bordered,
        &.button--icon,
        &.button--white {
            &:after {
                left: -5px;
                right: -5px;
                top: -5px;
                bottom: -5px;
            }
        }

        &:disabled:after {
            content: none;
        }
    }
}

.button--icon,
.button--bordered {
    box-shadow: 0 0 0 1px var(--color-brand) inset;
    transition: $transition-duration $transition-easing;
    transition-property: border, box-shadow;
}

.button--icon {
    overflow: hidden;
}

.button__pseudo-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: var(--color-brand);
    color: var(--color-text-inverse);
    transform: translateX(-101%);
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    padding: 7px 7px;

    @include bp(sm-min) {
        padding: 17px;
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateX(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateX(-101%);
        }
    }

    .button:active & {
        color: rgba(var(--color-text-inverse--rgb), .5);
    }

    .button:disabled & {
        display: none;
    }
}

.button__inner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    text-transform: uppercase;
    -webkit-appearance: none;
    transition: opacity $transition-duration $transition-easing;

    .button--white & {
        display: flex;
        align-items: center;
        height: 100%;
        background-color: var(--color-text-inverse);
        transition: background-color $transition-duration $transition-easing, opacity;
    }

    .button--icon-text & {
        text-transform: none;
        overflow: visible;
    }

    &:before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        background: var(--color-brand);
        color: var(--color-text-inverse);
        transform: translateX(-101%);
        transition-timing-function: $transition-easing;
        transition-duration: $transition-duration;
        transition-property: transform, color, opacity;
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }

        .button--white & {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-brand);
            color: var(--color-text-inverse);
        }

        .button--icon-text &,
        .button--icon & {
            content: none;
        }

        .button:hover & {
            @media (hover: hover) {
                transform: translateX(0%);
            }
        }

        .button:hover:disabled &,
        .button.button--icon-text:hover & {
            @media (hover: hover) {
                transform: translateX(-101%);
            }
        }

        .button:active & {
            color: $color-gray;
        }

        .button:active:disabled & {
            color: var(--color-text-inverse);
        }
    }
}

.button__text {
    display: flex;
    position: relative;
    align-items: center;
    background: none;
    color: var(--color-text);
    transform: translateY(0%);
    padding: 8px 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    font-size: $font-size-button;
    font-weight: $font-weight-normal;
    line-height: $font-line-height-button;
    text-transform: uppercase;

    @include bp(sm-min) {
        font-size: $font-size-button-lg;
        line-height: $font-line-height-button-lg;
        padding: 15px 24px;
    }

    .button--white &,
    .button--bordered & {
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }
    }

    .button--icon & {
        padding: 8px 8px;

        @include bp(sm-min) {
            padding: 18px;
        }
    }

    .button--icon-text & {
        text-transform: none;
        padding: 0;

        @include bp(sm-min) {
            padding: 0;
        }
    }

    .button--icon-text.button--icon-text-large & {
        font-size: $font-size-large;
        font-weight: $font-weight-normal;
        line-height: $font-line-height-large;

        @include bp(sm-min) {
            font-size: $font-size-large-lg;
            line-height: $font-line-height-large-lg;
        }
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateY(100%);
        }
    }

    .button.button--icon-text:hover & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button--icon-text:active & {
        color: rgba(var(--color-text--rgb), .5);
    }

    .button:active:disabled & {
        color: var(--color-text);
    }
}

.button__icon {
    font-size: 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: opacity;

    &.button__icon--appear {
        opacity: 0;
        animation: bounce 500ms infinite;

        .button:disabled & {
            animation: none;
        }

        .button:hover & {
            @media (hover: hover) {
                opacity: 1;
            }
        }

        .button:hover:disabled & {
            @media (hover: hover) {
                opacity: 0;
            }
        }
    }

    .button:hover & {
        @media (hover: hover) {
            animation: bounce 500ms infinite;
        }
    }

    .button.button--icon:hover & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:active & {
        animation: none;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 7.6 KB
  • Content: 
    import './button.scss';
import Icon from '@icon';

export interface IButton {
    text?: string;
    backgroundColor?: string;
    icon?: string;
    iconAppear?: boolean;
    link?: string;
    disabled?: boolean;
}

export default class Button {
    static render(data: IButton, className?: string): JQuery {
        const element: string = data.link ? 'a' : 'button';
        const classArray: string[] = ['button'];
        const icon: string = data.icon ? Icon.render(data.icon, data.iconAppear ? 'button__icon--appear' : '', 'button__icon') : '';
        const pseudoIcon: string = (data.icon && data.text.length === 0) ? '<span class="button__pseudo-icon">'+ icon +'</span>' : '';

        if (className) {
            classArray.push(className);
        }

        const textContent: string = '<span class="button__inner" data-text="'+ data.text +'"><span class="button__text">'+ data.text + icon +'</span></span>';

        return $(`<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"' } ${data.disabled ? 'disabled' : ''}>${pseudoIcon} ${textContent}</${element}>`);
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.1 KB
  • Handle: @button--text-button-appear
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Button White 

<button type="button" class="button button--white  ">

    <span class="button__inner" data-text="fondid">
        <span class="button__text">
            fondid

        </span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set includeIcon %}
    {% include '@icon' with { name: data.icon, modifier: data.iconAppear ? 'button__icon--appear' : '', class: 'button__icon' } %}
{% endset %}
{% set icon %}
    {% if data.icon %}
        {{ includeIcon }}
    {% endif %}
{% endset %}
{% set pseudoIcon %}
    {% if data.icon and (not data.text) %}
        <span class="button__pseudo-icon">
            {{ includeIcon }}
        </span>
    {% endif %}
{% endset %}

<{{ element }} {% if data.link %} href="{{ data.link|default('#') }}" {% if data.download %} download {% endif %} {% else %} type="{{ type|default('button') }}" {% endif %} class="button {{ modifier }} {{ class }} {% if data.disabled %}disabled{% endif %}"{% if data.attributes %} {{ data.attributes }}{% endif %} {% if data.disabled %}disabled{% endif %}>
    {{ pseudoIcon }}
    <span class="button__inner" data-text="{{ data.text }}">
        <span class="button__text">
            {{ data.text }}
            {{ icon }}
        </span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "fondid"
  },
  "modifier": "button--white"
}
  • Content: 
    @keyframes bounce {
    0% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }

    50% {
        transition-timing-function: $transition-easing;
        transform: translateX(4px);
    }

    100% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }
}

.button {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;
    height: 40px;
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    cursor: pointer;

    @include bp(sm-min) {
        height: 60px;
    }

    &:disabled {
        cursor: auto;

        & > * {
            opacity: .3;
        }
    }

    &.button--icon-text {
        height: auto;

        @include bp(sm-min) {
            height: auto;
        }
    }

    &.button--white {
        height: 100%;
        overflow: hidden;
    }

    &:before {
        border-bottom: none;
    }

    &:after {
        border-bottom: none;
    }

    &:focus {
        &:after {
            content: '';
            position: absolute;
            left: -4px;
            right: -4px;
            top: -4px;
            bottom: -4px;
            border: 2px solid var(--color-compliment);
            background: transparent;
            box-shadow: 0 0 4px rgba(var(--color-compliment), .7);
        }

        &.button--bordered,
        &.button--icon,
        &.button--white {
            &:after {
                left: -5px;
                right: -5px;
                top: -5px;
                bottom: -5px;
            }
        }

        &:disabled:after {
            content: none;
        }
    }
}

.button--icon,
.button--bordered {
    box-shadow: 0 0 0 1px var(--color-brand) inset;
    transition: $transition-duration $transition-easing;
    transition-property: border, box-shadow;
}

.button--icon {
    overflow: hidden;
}

.button__pseudo-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: var(--color-brand);
    color: var(--color-text-inverse);
    transform: translateX(-101%);
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    padding: 7px 7px;

    @include bp(sm-min) {
        padding: 17px;
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateX(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateX(-101%);
        }
    }

    .button:active & {
        color: rgba(var(--color-text-inverse--rgb), .5);
    }

    .button:disabled & {
        display: none;
    }
}

.button__inner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    text-transform: uppercase;
    -webkit-appearance: none;
    transition: opacity $transition-duration $transition-easing;

    .button--white & {
        display: flex;
        align-items: center;
        height: 100%;
        background-color: var(--color-text-inverse);
        transition: background-color $transition-duration $transition-easing, opacity;
    }

    .button--icon-text & {
        text-transform: none;
        overflow: visible;
    }

    &:before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        background: var(--color-brand);
        color: var(--color-text-inverse);
        transform: translateX(-101%);
        transition-timing-function: $transition-easing;
        transition-duration: $transition-duration;
        transition-property: transform, color, opacity;
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }

        .button--white & {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-brand);
            color: var(--color-text-inverse);
        }

        .button--icon-text &,
        .button--icon & {
            content: none;
        }

        .button:hover & {
            @media (hover: hover) {
                transform: translateX(0%);
            }
        }

        .button:hover:disabled &,
        .button.button--icon-text:hover & {
            @media (hover: hover) {
                transform: translateX(-101%);
            }
        }

        .button:active & {
            color: $color-gray;
        }

        .button:active:disabled & {
            color: var(--color-text-inverse);
        }
    }
}

.button__text {
    display: flex;
    position: relative;
    align-items: center;
    background: none;
    color: var(--color-text);
    transform: translateY(0%);
    padding: 8px 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    font-size: $font-size-button;
    font-weight: $font-weight-normal;
    line-height: $font-line-height-button;
    text-transform: uppercase;

    @include bp(sm-min) {
        font-size: $font-size-button-lg;
        line-height: $font-line-height-button-lg;
        padding: 15px 24px;
    }

    .button--white &,
    .button--bordered & {
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }
    }

    .button--icon & {
        padding: 8px 8px;

        @include bp(sm-min) {
            padding: 18px;
        }
    }

    .button--icon-text & {
        text-transform: none;
        padding: 0;

        @include bp(sm-min) {
            padding: 0;
        }
    }

    .button--icon-text.button--icon-text-large & {
        font-size: $font-size-large;
        font-weight: $font-weight-normal;
        line-height: $font-line-height-large;

        @include bp(sm-min) {
            font-size: $font-size-large-lg;
            line-height: $font-line-height-large-lg;
        }
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateY(100%);
        }
    }

    .button.button--icon-text:hover & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button--icon-text:active & {
        color: rgba(var(--color-text--rgb), .5);
    }

    .button:active:disabled & {
        color: var(--color-text);
    }
}

.button__icon {
    font-size: 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: opacity;

    &.button__icon--appear {
        opacity: 0;
        animation: bounce 500ms infinite;

        .button:disabled & {
            animation: none;
        }

        .button:hover & {
            @media (hover: hover) {
                opacity: 1;
            }
        }

        .button:hover:disabled & {
            @media (hover: hover) {
                opacity: 0;
            }
        }
    }

    .button:hover & {
        @media (hover: hover) {
            animation: bounce 500ms infinite;
        }
    }

    .button.button--icon:hover & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:active & {
        animation: none;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 7.6 KB
  • Content: 
    import './button.scss';
import Icon from '@icon';

export interface IButton {
    text?: string;
    backgroundColor?: string;
    icon?: string;
    iconAppear?: boolean;
    link?: string;
    disabled?: boolean;
}

export default class Button {
    static render(data: IButton, className?: string): JQuery {
        const element: string = data.link ? 'a' : 'button';
        const classArray: string[] = ['button'];
        const icon: string = data.icon ? Icon.render(data.icon, data.iconAppear ? 'button__icon--appear' : '', 'button__icon') : '';
        const pseudoIcon: string = (data.icon && data.text.length === 0) ? '<span class="button__pseudo-icon">'+ icon +'</span>' : '';

        if (className) {
            classArray.push(className);
        }

        const textContent: string = '<span class="button__inner" data-text="'+ data.text +'"><span class="button__text">'+ data.text + icon +'</span></span>';

        return $(`<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"' } ${data.disabled ? 'disabled' : ''}>${pseudoIcon} ${textContent}</${element}>`);
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.1 KB
  • Handle: @button--button-white
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Button Icon 

<button type="button" class="button button--icon  ">
    <span class="button__pseudo-icon">
        <svg class="icon  button__icon">
            <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#download"></use>
        </svg>

    </span>

    <span class="button__inner" data-text="">
        <span class="button__text">

            <svg class="icon  button__icon">
                <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#download"></use>
            </svg>

        </span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set includeIcon %}
    {% include '@icon' with { name: data.icon, modifier: data.iconAppear ? 'button__icon--appear' : '', class: 'button__icon' } %}
{% endset %}
{% set icon %}
    {% if data.icon %}
        {{ includeIcon }}
    {% endif %}
{% endset %}
{% set pseudoIcon %}
    {% if data.icon and (not data.text) %}
        <span class="button__pseudo-icon">
            {{ includeIcon }}
        </span>
    {% endif %}
{% endset %}

<{{ element }} {% if data.link %} href="{{ data.link|default('#') }}" {% if data.download %} download {% endif %} {% else %} type="{{ type|default('button') }}" {% endif %} class="button {{ modifier }} {{ class }} {% if data.disabled %}disabled{% endif %}"{% if data.attributes %} {{ data.attributes }}{% endif %} {% if data.disabled %}disabled{% endif %}>
    {{ pseudoIcon }}
    <span class="button__inner" data-text="{{ data.text }}">
        <span class="button__text">
            {{ data.text }}
            {{ icon }}
        </span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": null,
    "icon": "download"
  },
  "modifier": "button--icon"
}
  • Content: 
    @keyframes bounce {
    0% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }

    50% {
        transition-timing-function: $transition-easing;
        transform: translateX(4px);
    }

    100% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }
}

.button {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;
    height: 40px;
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    cursor: pointer;

    @include bp(sm-min) {
        height: 60px;
    }

    &:disabled {
        cursor: auto;

        & > * {
            opacity: .3;
        }
    }

    &.button--icon-text {
        height: auto;

        @include bp(sm-min) {
            height: auto;
        }
    }

    &.button--white {
        height: 100%;
        overflow: hidden;
    }

    &:before {
        border-bottom: none;
    }

    &:after {
        border-bottom: none;
    }

    &:focus {
        &:after {
            content: '';
            position: absolute;
            left: -4px;
            right: -4px;
            top: -4px;
            bottom: -4px;
            border: 2px solid var(--color-compliment);
            background: transparent;
            box-shadow: 0 0 4px rgba(var(--color-compliment), .7);
        }

        &.button--bordered,
        &.button--icon,
        &.button--white {
            &:after {
                left: -5px;
                right: -5px;
                top: -5px;
                bottom: -5px;
            }
        }

        &:disabled:after {
            content: none;
        }
    }
}

.button--icon,
.button--bordered {
    box-shadow: 0 0 0 1px var(--color-brand) inset;
    transition: $transition-duration $transition-easing;
    transition-property: border, box-shadow;
}

.button--icon {
    overflow: hidden;
}

.button__pseudo-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: var(--color-brand);
    color: var(--color-text-inverse);
    transform: translateX(-101%);
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    padding: 7px 7px;

    @include bp(sm-min) {
        padding: 17px;
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateX(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateX(-101%);
        }
    }

    .button:active & {
        color: rgba(var(--color-text-inverse--rgb), .5);
    }

    .button:disabled & {
        display: none;
    }
}

.button__inner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    text-transform: uppercase;
    -webkit-appearance: none;
    transition: opacity $transition-duration $transition-easing;

    .button--white & {
        display: flex;
        align-items: center;
        height: 100%;
        background-color: var(--color-text-inverse);
        transition: background-color $transition-duration $transition-easing, opacity;
    }

    .button--icon-text & {
        text-transform: none;
        overflow: visible;
    }

    &:before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        background: var(--color-brand);
        color: var(--color-text-inverse);
        transform: translateX(-101%);
        transition-timing-function: $transition-easing;
        transition-duration: $transition-duration;
        transition-property: transform, color, opacity;
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }

        .button--white & {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-brand);
            color: var(--color-text-inverse);
        }

        .button--icon-text &,
        .button--icon & {
            content: none;
        }

        .button:hover & {
            @media (hover: hover) {
                transform: translateX(0%);
            }
        }

        .button:hover:disabled &,
        .button.button--icon-text:hover & {
            @media (hover: hover) {
                transform: translateX(-101%);
            }
        }

        .button:active & {
            color: $color-gray;
        }

        .button:active:disabled & {
            color: var(--color-text-inverse);
        }
    }
}

.button__text {
    display: flex;
    position: relative;
    align-items: center;
    background: none;
    color: var(--color-text);
    transform: translateY(0%);
    padding: 8px 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    font-size: $font-size-button;
    font-weight: $font-weight-normal;
    line-height: $font-line-height-button;
    text-transform: uppercase;

    @include bp(sm-min) {
        font-size: $font-size-button-lg;
        line-height: $font-line-height-button-lg;
        padding: 15px 24px;
    }

    .button--white &,
    .button--bordered & {
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }
    }

    .button--icon & {
        padding: 8px 8px;

        @include bp(sm-min) {
            padding: 18px;
        }
    }

    .button--icon-text & {
        text-transform: none;
        padding: 0;

        @include bp(sm-min) {
            padding: 0;
        }
    }

    .button--icon-text.button--icon-text-large & {
        font-size: $font-size-large;
        font-weight: $font-weight-normal;
        line-height: $font-line-height-large;

        @include bp(sm-min) {
            font-size: $font-size-large-lg;
            line-height: $font-line-height-large-lg;
        }
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateY(100%);
        }
    }

    .button.button--icon-text:hover & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button--icon-text:active & {
        color: rgba(var(--color-text--rgb), .5);
    }

    .button:active:disabled & {
        color: var(--color-text);
    }
}

.button__icon {
    font-size: 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: opacity;

    &.button__icon--appear {
        opacity: 0;
        animation: bounce 500ms infinite;

        .button:disabled & {
            animation: none;
        }

        .button:hover & {
            @media (hover: hover) {
                opacity: 1;
            }
        }

        .button:hover:disabled & {
            @media (hover: hover) {
                opacity: 0;
            }
        }
    }

    .button:hover & {
        @media (hover: hover) {
            animation: bounce 500ms infinite;
        }
    }

    .button.button--icon:hover & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:active & {
        animation: none;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 7.6 KB
  • Content: 
    import './button.scss';
import Icon from '@icon';

export interface IButton {
    text?: string;
    backgroundColor?: string;
    icon?: string;
    iconAppear?: boolean;
    link?: string;
    disabled?: boolean;
}

export default class Button {
    static render(data: IButton, className?: string): JQuery {
        const element: string = data.link ? 'a' : 'button';
        const classArray: string[] = ['button'];
        const icon: string = data.icon ? Icon.render(data.icon, data.iconAppear ? 'button__icon--appear' : '', 'button__icon') : '';
        const pseudoIcon: string = (data.icon && data.text.length === 0) ? '<span class="button__pseudo-icon">'+ icon +'</span>' : '';

        if (className) {
            classArray.push(className);
        }

        const textContent: string = '<span class="button__inner" data-text="'+ data.text +'"><span class="button__text">'+ data.text + icon +'</span></span>';

        return $(`<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"' } ${data.disabled ? 'disabled' : ''}>${pseudoIcon} ${textContent}</${element}>`);
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.1 KB
  • Handle: @button--button-icon
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Anchor Button 

<a href="https://play.ee/" class="button   ">

    <span class="button__inner" data-text="fondid">
        <span class="button__text">
            fondid

        </span>
    </span>
</a>
 
{% set element = data.link ? 'a' : 'button' %}
{% set includeIcon %}
    {% include '@icon' with { name: data.icon, modifier: data.iconAppear ? 'button__icon--appear' : '', class: 'button__icon' } %}
{% endset %}
{% set icon %}
    {% if data.icon %}
        {{ includeIcon }}
    {% endif %}
{% endset %}
{% set pseudoIcon %}
    {% if data.icon and (not data.text) %}
        <span class="button__pseudo-icon">
            {{ includeIcon }}
        </span>
    {% endif %}
{% endset %}

<{{ element }} {% if data.link %} href="{{ data.link|default('#') }}" {% if data.download %} download {% endif %} {% else %} type="{{ type|default('button') }}" {% endif %} class="button {{ modifier }} {{ class }} {% if data.disabled %}disabled{% endif %}"{% if data.attributes %} {{ data.attributes }}{% endif %} {% if data.disabled %}disabled{% endif %}>
    {{ pseudoIcon }}
    <span class="button__inner" data-text="{{ data.text }}">
        <span class="button__text">
            {{ data.text }}
            {{ icon }}
        </span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "fondid",
    "link": "https://play.ee/"
  }
}
  • Content: 
    @keyframes bounce {
    0% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }

    50% {
        transition-timing-function: $transition-easing;
        transform: translateX(4px);
    }

    100% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }
}

.button {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;
    height: 40px;
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    cursor: pointer;

    @include bp(sm-min) {
        height: 60px;
    }

    &:disabled {
        cursor: auto;

        & > * {
            opacity: .3;
        }
    }

    &.button--icon-text {
        height: auto;

        @include bp(sm-min) {
            height: auto;
        }
    }

    &.button--white {
        height: 100%;
        overflow: hidden;
    }

    &:before {
        border-bottom: none;
    }

    &:after {
        border-bottom: none;
    }

    &:focus {
        &:after {
            content: '';
            position: absolute;
            left: -4px;
            right: -4px;
            top: -4px;
            bottom: -4px;
            border: 2px solid var(--color-compliment);
            background: transparent;
            box-shadow: 0 0 4px rgba(var(--color-compliment), .7);
        }

        &.button--bordered,
        &.button--icon,
        &.button--white {
            &:after {
                left: -5px;
                right: -5px;
                top: -5px;
                bottom: -5px;
            }
        }

        &:disabled:after {
            content: none;
        }
    }
}

.button--icon,
.button--bordered {
    box-shadow: 0 0 0 1px var(--color-brand) inset;
    transition: $transition-duration $transition-easing;
    transition-property: border, box-shadow;
}

.button--icon {
    overflow: hidden;
}

.button__pseudo-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: var(--color-brand);
    color: var(--color-text-inverse);
    transform: translateX(-101%);
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    padding: 7px 7px;

    @include bp(sm-min) {
        padding: 17px;
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateX(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateX(-101%);
        }
    }

    .button:active & {
        color: rgba(var(--color-text-inverse--rgb), .5);
    }

    .button:disabled & {
        display: none;
    }
}

.button__inner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    text-transform: uppercase;
    -webkit-appearance: none;
    transition: opacity $transition-duration $transition-easing;

    .button--white & {
        display: flex;
        align-items: center;
        height: 100%;
        background-color: var(--color-text-inverse);
        transition: background-color $transition-duration $transition-easing, opacity;
    }

    .button--icon-text & {
        text-transform: none;
        overflow: visible;
    }

    &:before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        background: var(--color-brand);
        color: var(--color-text-inverse);
        transform: translateX(-101%);
        transition-timing-function: $transition-easing;
        transition-duration: $transition-duration;
        transition-property: transform, color, opacity;
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }

        .button--white & {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-brand);
            color: var(--color-text-inverse);
        }

        .button--icon-text &,
        .button--icon & {
            content: none;
        }

        .button:hover & {
            @media (hover: hover) {
                transform: translateX(0%);
            }
        }

        .button:hover:disabled &,
        .button.button--icon-text:hover & {
            @media (hover: hover) {
                transform: translateX(-101%);
            }
        }

        .button:active & {
            color: $color-gray;
        }

        .button:active:disabled & {
            color: var(--color-text-inverse);
        }
    }
}

.button__text {
    display: flex;
    position: relative;
    align-items: center;
    background: none;
    color: var(--color-text);
    transform: translateY(0%);
    padding: 8px 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    font-size: $font-size-button;
    font-weight: $font-weight-normal;
    line-height: $font-line-height-button;
    text-transform: uppercase;

    @include bp(sm-min) {
        font-size: $font-size-button-lg;
        line-height: $font-line-height-button-lg;
        padding: 15px 24px;
    }

    .button--white &,
    .button--bordered & {
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }
    }

    .button--icon & {
        padding: 8px 8px;

        @include bp(sm-min) {
            padding: 18px;
        }
    }

    .button--icon-text & {
        text-transform: none;
        padding: 0;

        @include bp(sm-min) {
            padding: 0;
        }
    }

    .button--icon-text.button--icon-text-large & {
        font-size: $font-size-large;
        font-weight: $font-weight-normal;
        line-height: $font-line-height-large;

        @include bp(sm-min) {
            font-size: $font-size-large-lg;
            line-height: $font-line-height-large-lg;
        }
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateY(100%);
        }
    }

    .button.button--icon-text:hover & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button--icon-text:active & {
        color: rgba(var(--color-text--rgb), .5);
    }

    .button:active:disabled & {
        color: var(--color-text);
    }
}

.button__icon {
    font-size: 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: opacity;

    &.button__icon--appear {
        opacity: 0;
        animation: bounce 500ms infinite;

        .button:disabled & {
            animation: none;
        }

        .button:hover & {
            @media (hover: hover) {
                opacity: 1;
            }
        }

        .button:hover:disabled & {
            @media (hover: hover) {
                opacity: 0;
            }
        }
    }

    .button:hover & {
        @media (hover: hover) {
            animation: bounce 500ms infinite;
        }
    }

    .button.button--icon:hover & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:active & {
        animation: none;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 7.6 KB
  • Content: 
    import './button.scss';
import Icon from '@icon';

export interface IButton {
    text?: string;
    backgroundColor?: string;
    icon?: string;
    iconAppear?: boolean;
    link?: string;
    disabled?: boolean;
}

export default class Button {
    static render(data: IButton, className?: string): JQuery {
        const element: string = data.link ? 'a' : 'button';
        const classArray: string[] = ['button'];
        const icon: string = data.icon ? Icon.render(data.icon, data.iconAppear ? 'button__icon--appear' : '', 'button__icon') : '';
        const pseudoIcon: string = (data.icon && data.text.length === 0) ? '<span class="button__pseudo-icon">'+ icon +'</span>' : '';

        if (className) {
            classArray.push(className);
        }

        const textContent: string = '<span class="button__inner" data-text="'+ data.text +'"><span class="button__text">'+ data.text + icon +'</span></span>';

        return $(`<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"' } ${data.disabled ? 'disabled' : ''}>${pseudoIcon} ${textContent}</${element}>`);
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.1 KB
  • Handle: @button--anchor-button
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Bordered Button Disabled 

<button type="button" class="button button--bordered  disabled" disabled>

    <span class="button__inner" data-text="fondid">
        <span class="button__text">
            fondid

        </span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set includeIcon %}
    {% include '@icon' with { name: data.icon, modifier: data.iconAppear ? 'button__icon--appear' : '', class: 'button__icon' } %}
{% endset %}
{% set icon %}
    {% if data.icon %}
        {{ includeIcon }}
    {% endif %}
{% endset %}
{% set pseudoIcon %}
    {% if data.icon and (not data.text) %}
        <span class="button__pseudo-icon">
            {{ includeIcon }}
        </span>
    {% endif %}
{% endset %}

<{{ element }} {% if data.link %} href="{{ data.link|default('#') }}" {% if data.download %} download {% endif %} {% else %} type="{{ type|default('button') }}" {% endif %} class="button {{ modifier }} {{ class }} {% if data.disabled %}disabled{% endif %}"{% if data.attributes %} {{ data.attributes }}{% endif %} {% if data.disabled %}disabled{% endif %}>
    {{ pseudoIcon }}
    <span class="button__inner" data-text="{{ data.text }}">
        <span class="button__text">
            {{ data.text }}
            {{ icon }}
        </span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "fondid",
    "disabled": true
  },
  "modifier": "button--bordered"
}
  • Content: 
    @keyframes bounce {
    0% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }

    50% {
        transition-timing-function: $transition-easing;
        transform: translateX(4px);
    }

    100% {
        transition-timing-function: $transition-easing;
        transform: translateX(0);
    }
}

.button {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;
    height: 40px;
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
    cursor: pointer;

    @include bp(sm-min) {
        height: 60px;
    }

    &:disabled {
        cursor: auto;

        & > * {
            opacity: .3;
        }
    }

    &.button--icon-text {
        height: auto;

        @include bp(sm-min) {
            height: auto;
        }
    }

    &.button--white {
        height: 100%;
        overflow: hidden;
    }

    &:before {
        border-bottom: none;
    }

    &:after {
        border-bottom: none;
    }

    &:focus {
        &:after {
            content: '';
            position: absolute;
            left: -4px;
            right: -4px;
            top: -4px;
            bottom: -4px;
            border: 2px solid var(--color-compliment);
            background: transparent;
            box-shadow: 0 0 4px rgba(var(--color-compliment), .7);
        }

        &.button--bordered,
        &.button--icon,
        &.button--white {
            &:after {
                left: -5px;
                right: -5px;
                top: -5px;
                bottom: -5px;
            }
        }

        &:disabled:after {
            content: none;
        }
    }
}

.button--icon,
.button--bordered {
    box-shadow: 0 0 0 1px var(--color-brand) inset;
    transition: $transition-duration $transition-easing;
    transition-property: border, box-shadow;
}

.button--icon {
    overflow: hidden;
}

.button__pseudo-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: var(--color-brand);
    color: var(--color-text-inverse);
    transform: translateX(-101%);
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    padding: 7px 7px;

    @include bp(sm-min) {
        padding: 17px;
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateX(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateX(-101%);
        }
    }

    .button:active & {
        color: rgba(var(--color-text-inverse--rgb), .5);
    }

    .button:disabled & {
        display: none;
    }
}

.button__inner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
    background-color: transparent;
    text-transform: uppercase;
    -webkit-appearance: none;
    transition: opacity $transition-duration $transition-easing;

    .button--white & {
        display: flex;
        align-items: center;
        height: 100%;
        background-color: var(--color-text-inverse);
        transition: background-color $transition-duration $transition-easing, opacity;
    }

    .button--icon-text & {
        text-transform: none;
        overflow: visible;
    }

    &:before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        background: var(--color-brand);
        color: var(--color-text-inverse);
        transform: translateX(-101%);
        transition-timing-function: $transition-easing;
        transition-duration: $transition-duration;
        transition-property: transform, color, opacity;
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }

        .button--white & {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-brand);
            color: var(--color-text-inverse);
        }

        .button--icon-text &,
        .button--icon & {
            content: none;
        }

        .button:hover & {
            @media (hover: hover) {
                transform: translateX(0%);
            }
        }

        .button:hover:disabled &,
        .button.button--icon-text:hover & {
            @media (hover: hover) {
                transform: translateX(-101%);
            }
        }

        .button:active & {
            color: $color-gray;
        }

        .button:active:disabled & {
            color: var(--color-text-inverse);
        }
    }
}

.button__text {
    display: flex;
    position: relative;
    align-items: center;
    background: none;
    color: var(--color-text);
    transform: translateY(0%);
    padding: 8px 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: transform, color;
    font-size: $font-size-button;
    font-weight: $font-weight-normal;
    line-height: $font-line-height-button;
    text-transform: uppercase;

    @include bp(sm-min) {
        font-size: $font-size-button-lg;
        line-height: $font-line-height-button-lg;
        padding: 15px 24px;
    }

    .button--white &,
    .button--bordered & {
        padding: 8px 24px;

        @include bp(sm-min) {
            padding: 15px 24px;
        }
    }

    .button--icon & {
        padding: 8px 8px;

        @include bp(sm-min) {
            padding: 18px;
        }
    }

    .button--icon-text & {
        text-transform: none;
        padding: 0;

        @include bp(sm-min) {
            padding: 0;
        }
    }

    .button--icon-text.button--icon-text-large & {
        font-size: $font-size-large;
        font-weight: $font-weight-normal;
        line-height: $font-line-height-large;

        @include bp(sm-min) {
            font-size: $font-size-large-lg;
            line-height: $font-line-height-large-lg;
        }
    }

    .button:hover & {
        @media (hover: hover) {
            transform: translateY(100%);
        }
    }

    .button.button--icon-text:hover & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            transform: translateY(0);
        }
    }

    .button--icon-text:active & {
        color: rgba(var(--color-text--rgb), .5);
    }

    .button:active:disabled & {
        color: var(--color-text);
    }
}

.button__icon {
    font-size: 24px;
    transition-timing-function: $transition-easing;
    transition-duration: $transition-duration;
    transition-property: opacity;

    &.button__icon--appear {
        opacity: 0;
        animation: bounce 500ms infinite;

        .button:disabled & {
            animation: none;
        }

        .button:hover & {
            @media (hover: hover) {
                opacity: 1;
            }
        }

        .button:hover:disabled & {
            @media (hover: hover) {
                opacity: 0;
            }
        }
    }

    .button:hover & {
        @media (hover: hover) {
            animation: bounce 500ms infinite;
        }
    }

    .button.button--icon:hover & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:hover:disabled & {
        @media (hover: hover) {
            animation: none;
        }
    }

    .button:active & {
        animation: none;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 7.6 KB
  • Content: 
    import './button.scss';
import Icon from '@icon';

export interface IButton {
    text?: string;
    backgroundColor?: string;
    icon?: string;
    iconAppear?: boolean;
    link?: string;
    disabled?: boolean;
}

export default class Button {
    static render(data: IButton, className?: string): JQuery {
        const element: string = data.link ? 'a' : 'button';
        const classArray: string[] = ['button'];
        const icon: string = data.icon ? Icon.render(data.icon, data.iconAppear ? 'button__icon--appear' : '', 'button__icon') : '';
        const pseudoIcon: string = (data.icon && data.text.length === 0) ? '<span class="button__pseudo-icon">'+ icon +'</span>' : '';

        if (className) {
            classArray.push(className);
        }

        const textContent: string = '<span class="button__inner" data-text="'+ data.text +'"><span class="button__text">'+ data.text + icon +'</span></span>';

        return $(`<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"' } ${data.disabled ? 'disabled' : ''}>${pseudoIcon} ${textContent}</${element}>`);
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.1 KB
  • Handle: @button--bordered-button-disabled
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon