Button: State: Processing Link 

<!-- BUTTON Component -->
<button class="kx-btn kx-btn--skin-link kx-btn--size-large kx-is-processing">
    <span class="kx-btn__inner">
        <i class="kx-icon kx-icon--size-base kx-process">
    <svg class="kx-process__spinner" viewBox="0 0 50 50">
        <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="6"></circle>
    </svg>
</i>
        <span class="kx-btn__txt">Please wait</span>
    </span>
</button>
 
{%- if href -%}
<!-- LINK AS BUTTON Component -->
<a class="kx-btn{% if skin %} kx-btn--skin-{{ skin }}{% endif %}{% if size %} kx-btn--size-{{ size }}{% endif %}{% if fluid %} kx-btn--fluid{% endif %}{% if icon %}{% if hideText==true %} kx-btn--icon{% endif %}{% endif %}{% for class in classes %} {{ class }}{% endfor %}{% if active %} kx-is-active{% endif %}{% if state %} kx-is-{{ state }}{% if hideText==true %} kx-btn--icon{% endif %}{% endif %}{% if disabled %} kx-is-disabled{% endif %}"{% if disabled %} tabindex="-1"{% endif %}{% for data_attr in data %} data-{{ data_attr }}{% endfor %} href="{{ href }}"{% if ariaLabelledBy %} aria-labelledby="{{ ariaLabelledBy }}"{% endif %}{% if hideText %} aria-label="{{ text }}"{% endif%}>
    <span class="kx-btn__inner">
    {%- if icon %}
        {% if iconAfter -%}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
        {% render '@icon', icon, true %}
        {%- else -%}
        {% render '@icon', icon, true %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
        {%- endif -%}
    {%- elseif state=='processing' %}
        {% render '@process', process, true %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
    {%- else %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
    {%- endif %}
    </span>
</a>

{%- else -%}
<!-- BUTTON Component -->
<button class="kx-btn{% if skin %} kx-btn--skin-{{ skin }}{% endif %}{% if size %} kx-btn--size-{{ size }}{% endif %}{% if fluid %} kx-btn--fluid{% endif %}{% if icon %}{% if hideText==true %} kx-btn--icon{% endif %}{% endif %}{% for class in classes %} {{ class }}{% endfor %}{% if active %} kx-is-active{% endif %}{% if state %} kx-is-{{ state }}{% if hideText==true %} kx-btn--icon{% endif %}{% endif %}"{% for data_attr in data %} data-{{ data_attr }}{% endfor %}{{ 'disabled="disabled"' if disabled }}{% if ariaLabelledBy %} aria-labelledby="{{ ariaLabelledBy }}"{% endif %}{% if hideText %} aria-label="{{ text }}"{% endif%}>
    <span class="kx-btn__inner">
    {%- if icon %}
        {% if iconAfter -%}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
        {% render '@icon', icon, true %}
        {%- else -%}
        {%- render '@icon', icon, true %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
        {%- endif %}
    {%- elseif state=='processing' %}
        {% render '@process', process, true %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
    {%- else %}
        <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
    {%- endif %}
    </span>
</button>
{%- endif -%}
 
{
  "href": null,
  "text": "Please wait",
  "classes": null,
  "state": "processing",
  "icon": null,
  "iconAfter": null,
  "hideText": null,
  "disabled": null,
  "active": null,
  "skin": "link",
  "size": "large",
  "data": null,
  "ariaLabelledBy": null,
  "process": {
    "size": "base"
  }
}
  • Content: 
    // ==========================================================================
// Component: button
// ==========================================================================

$border-radius-btn: $radius-global;

// Elements (children)
// ==========================================================================
.kx-btn__txt {
    color: inherit;
    white-space: nowrap;
}

// Fix for http://stackoverflow.com/questions/35464067/flexbox-not-working-on-button-element-in-some-browsers
.kx-btn__inner {
    @include flex;
    @include align-items-center;
    @include justify-content-center;
    flex: 1 1 auto;
    width: 100%;
}

// Block (parent)
// ==========================================================================
.kx-btn {
    @include inline-flex;
    @include align-items-center;
    transition: all $duration-instant ease-in-out;
    position: relative;
    width: fit-content;
    border: 0;
    color: inherit;

    .kx-icon,
    .kx-btn__txt {
        display: inline-block;
        vertical-align: middle;
    }

    .kx-icon {
        + .kx-btn__txt {
            @include ml(mini);
        }
    }

    .kx-btn__txt:not(.kx-is-vishidden) {
        + .kx-icon {
            @include ml(mini);
        }
    }

    &:focus,
    &.kx-is-focus {
        box-shadow: inset 0 0 0 rem-calc(2) currentColor;
        outline: 0;
    }

    &:hover,
    &.kx-is-hover {
        z-index: 1;
        box-shadow: none;
    }

    &:not(.kx-btn--skin-link) {
        &:hover,
        &.kx-is-hover {
            cursor: pointer;
        }
    }

    &:hover,
    &:active,
    &.kx-is-hover,
    &.kx-is-active {
        box-shadow: none;
    }

    &:disabled,
    &.kx-is-disabled {
        cursor: not-allowed !important;
    }

    &.kx-is-processing {
        .kx-process {
            .path {
                stroke: currentColor;
            }
        }
    }
}

// If button is an <a>-tag, we remove text-decoration
a.kx-btn {
    text-decoration: none;
}

// Modifiers
// ==========================================================================

// Width
.kx-btn--fluid {
    flex: 1 1 auto;
    width: 100%;
}

// Size
.kx-btn--size-tiny {
    @include type-scale(tiny);
    @include p(nano, mini, nano, mini);

    &.kx-btn--icon {
        &:not(.kx-btn--skin-link) {
            // 14px x 14px
            .kx-icon--size-tiny {
                margin: rem-calc(6);
            }

            // 16px x 16px
            .kx-icon--size-small {
                margin: rem-calc(5);
            }

            // 18px x 18px
            .kx-icon--size-base {
                margin: rem-calc(3);
            }

            // 24px x 24px
            .kx-icon--size-moderate {
                margin: rem-calc(0);
            }
        }

        &.kx-btn--skin-link {
            // 14px x 14px
            .kx-icon--size-tiny {
                margin: rem-calc(5 0);
            }

            // 16px x 16px
            .kx-icon--size-small {
                margin: rem-calc(4 0);
            }

            // 18px x 18px
            .kx-icon--size-base {
                margin: rem-calc(3 0);
            }

            // 24px x 24px
            .kx-icon--size-moderate {
                margin: rem-calc(0 0);
            }
        }
    }
}

.kx-btn--size-base {
    @include type-scale(small);
    @include px(small);
    padding-top: rem-calc(6);
    padding-bottom: rem-calc(6);

    &.kx-btn--icon {
        &:not(.kx-btn--skin-link) {
            // 14px x 14px
            .kx-icon--size-tiny {
                margin: rem-calc(10);
            }

            // 16px x 16px
            .kx-icon--size-small {
                margin: rem-calc(9);
            }

            // 18px x 18px
            .kx-icon--size-base {
                margin: rem-calc(7);
            }

            // 24px x 24px
            .kx-icon--size-moderate {
                margin: rem-calc(4);
            }
        }

        &.kx-btn--skin-link {
            // 14px x 14px
            .kx-icon--size-tiny {
                margin: rem-calc(9 0);
            }

            // 16px x 16px
            .kx-icon--size-small {
                margin: rem-calc(16 0);
            }

            // 18px x 18px
            .kx-icon--size-base {
                margin: rem-calc(7 0);
            }

            // 24px x 24px
            .kx-icon--size-moderate {
                margin: rem-calc(4 0);
            }
        }
    }
}

.kx-btn--size-large {
    @include type-scale(base);
    @include px(moderate, moderate);
    padding-top: rem-calc(10);
    padding-bottom: rem-calc(10);

    &.kx-btn--icon {
        &:not(.kx-btn--skin-link) {
            // 14px x 14px
            .kx-icon--size-tiny {
                margin: rem-calc(16);
            }

            // 16px x 16px
            .kx-icon--size-small {
                margin: rem-calc(15);
            }

            // 18px x 18px
            .kx-icon--size-base {
                margin: rem-calc(13);
            }

            // 24px x 24px
            .kx-icon--size-moderate {
                margin: rem-calc(10);
            }
        }

        &.kx-btn--skin-link {
            // 14px x 14px
            .kx-icon--size-tiny {
                margin: rem-calc(15 0);
            }

            // 16px x 16px
            .kx-icon--size-small {
                margin: rem-calc(14 0);
            }

            // 18px x 18px
            .kx-icon--size-base {
                margin: rem-calc(13 0);
            }

            // 24px x 24px
            .kx-icon--size-moderate {
                margin: rem-calc(10 0);
            }
        }
    }
}

// Skin
.kx-btn--skin-primary {
    background-color: $color-btn-primary-bg;
    color: $color-btn-primary-txt;

    &:focus,
    &.kx-is-focus {
        background-color: $color-btn-primary-bg-focus;
        color: $color-btn-primary-txt-focus;
        box-shadow: inset 0 0 0 rem-calc(2) $color-btn-primary-border-focus;
    }

    &:hover,
    &.kx-is-hover {
        background-color: $color-btn-primary-bg-hover;
        color: $color-btn-primary-txt-hover;
        box-shadow: none;
    }

    &:active,
    &.kx-is-active {
        background-color: $color-btn-primary-bg-active;
        color: $color-btn-primary-txt-active;
        outline: 0;
    }

    &:disabled,
    &.kx-is-disabled {
        background-color: $color-btn-primary-bg-disabled;
        color: $color-btn-primary-txt-disabled;
        opacity: 100;
    }
}

.kx-btn--skin-secondary {
    background-color: $color-btn-secondary-bg;
    color: $color-btn-secondary-txt;
    box-shadow: 0 0 0 rem-calc(1) $color-btn-secondary-border inset;

    &:focus,
    &.kx-is-focus {
        background-color: $color-btn-secondary-bg-focus;
        color: $color-btn-secondary-txt-focus;
        box-shadow: inset 0 0 0 rem-calc(2) $color-btn-secondary-border-focus;
    }

    &:hover,
    &.kx-is-hover {
        background-color: $color-btn-secondary-bg-hover;
        color: $color-btn-secondary-txt-hover;
        box-shadow: 0 0 0 rem-calc(1) $color-btn-secondary-border inset, rem-calc(0 1 4 0) $color-shadow-base;
    }

    &:active,
    &.kx-is-active {
        background-color: $color-btn-secondary-bg-active;
        color: $color-btn-secondary-txt-active;
        box-shadow: 0 0 0 rem-calc(1) $color-btn-secondary-border inset;
        outline: 0;
    }

    &:disabled,
    &.kx-is-disabled {
        background-color: $color-btn-secondary-bg-disabled;
        color: $color-btn-secondary-txt-disabled;
        box-shadow: 0 0 0 rem-calc(1) $color-btn-secondary-border-disabled inset;
        opacity: 100;
    }

    &.kx-is-selected {
        background-color: $color-btn-secondary-bg-selected;
        color: $color-btn-secondary-txt-selected;
        box-shadow: none;
    }
}

.kx-btn--skin-flat {
    @include type-weight(bold);
    text-transform: uppercase;
    background-color: $color-btn-flat-bg;
    color: $color-btn-flat-txt;

    &:focus,
    &.kx-is-focus {
        background-color: $color-btn-flat-bg-focus;
        color: $color-btn-flat-txt-focus;
        box-shadow: inset 0 0 0 rem-calc(2) $color-btn-flat-border-focus;
    }

    &:hover,
    &.kx-is-hover {
        background-color: $color-btn-flat-bg-hover;
        color: $color-btn-flat-txt-hover;
        box-shadow: none;
    }

    &:active,
    &.kx-is-active {
        background-color: $color-btn-flat-bg-active;
        color: $color-btn-flat-txt-active;
        outline: 0;
    }

    &:disabled,
    &.kx-is-disabled {
        background-color: $color-btn-flat-bg-disabled;
        color: $color-btn-flat-txt-disabled;
        opacity: 100;
    }
}

.kx-btn--skin-primary,
.kx-btn--skin-secondary {
    @include type-weight(bold);
    border-radius: rem-calc($border-radius-btn);
}

.kx-btn--skin-link {
    background-color: $color-btn-link-bg;
    color: $color-btn-link-txt;
    padding-left: 0;
    padding-right: 0;

    .kx-btn__txt {
        text-decoration: underline;
        color: inherit;
    }

    &:focus,
    &.kx-is-focus {
        background-color: $color-btn-link-bg-focus;
        color: $color-btn-link-txt-focus;
        box-shadow: none;

        .kx-btn__txt {
            @include px(tiny);
            margin-left: rem-calc(-4);
            margin-right: rem-calc(-4);
            outline: none;
            color: $color-link-txt-focus;
            background-color: $color-link-bg-focus;
        }
    }

    .kx-btn__txt {
        &:hover {
            text-decoration: none;
            cursor: pointer;
            border-radius: 0;
            color: $color-link-txt-hover;
            background: none;
        }
    }

    &:active,
    &.kx-is-active {
        background-color: $color-btn-link-bg-active;
        color: $color-btn-link-txt-active;
    }

    &:disabled,
    &.kx-is-disabled {
        background-color: $color-btn-link-bg;
        color: rgba($color-btn-link-txt, 0.3);

        .kx-btn__txt {
            &:hover,
            &.kx-is-hover {
                @include text-underline(currentColor, currentColor);
                cursor: not-allowed;
            }
        }
    }
}

.kx-btn--icon {
    // Reset padding on button to compensate for margins on actual icon
    padding: 0;
}

input[type=button],
input[type=reset],
input[type=submit] {
    &.kx-btn--skin-link {
        text-decoration: underline;
    }

    &:hover,
    &.kx-is-hover {
        text-decoration: none;
    }
}
  • URL: /components/raw/button/_button.scss
  • Filesystem Path: src\components\01-button\_button.scss
  • Size: 10.9 KB

Buttons

Please see the guidelines for Buttons for more info.