modules/frontend/app/primitives/btn/index.scss

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import "./../../../public/stylesheets/variables.scss";

$btn-content-padding: 10px 12px;
$btn-content-padding-with-border: 9px 11px;

@mixin active-focus-shadows(
    $focus: (0 0 5px #095d9a, 0 0 5px #095d9a),
    $active: (inset 0 1px 3px 0 rgba(0, 0, 0, 0.5))
) {
    &.focus, &:focus {
        box-shadow: $focus;
    }

    &.active, &:active {
        box-shadow: $active;
    }

    &:active, &.active {
        &:focus, &.focus {
            &:not([disabled]) {
                box-shadow: $focus, $active;
            }
        }
    }
}

.btn-ignite {
    $icon-margin: 8px;

    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: 0;
    padding: $btn-content-padding;

    border: none;
    border-radius: $ignite-button-border-radius;
    text-align: center;
    outline: none;
    font-size: 14px;
    line-height: 16px;
    text-decoration: none;
    cursor: pointer;

    .icon {
        &, &-right, &-left {
            height: 16px;
        }

        &-right {
            margin-left: $icon-margin;
        }

        &-left {
            margin-right: $icon-margin;
        }
    }

    // Icon tweaks
    .icon.fa-caret-down {
        margin: 0 -3px;
    }

    .fa {
        line-height: inherit !important;
        font-size: 16px;
    }

    &[disabled] {
        -webkit-pointer-events: none;
        pointer-events: none;
    }

    [ignite-icon='plus'] {
        height: 12px;
        width: 12px;
    }
}

.btn-ignite--primary {
    $accent-color: $ignite-brand-primary;
    $text-color: white;

    background-color: $accent-color;
    color: white;

    &:hover, &.hover,
    &:active, &.active {
        &:not([disabled]) {
            color: white !important;
            background-color: change-color($accent-color, $lightness: 41%);
            text-decoration: none !important;
        }
    }

    // Override <a> styles
    &:focus {
        color: white !important;
        text-decoration: none !important;
    }

    @include active-focus-shadows();

    &[disabled] {
        color: transparentize($text-color, 0.5);
        background-color: change-color($accent-color, $lightness: 77%);
    }
}

.btn-ignite--primary-outline {
    $accent-color: $ignite-brand-primary;
    $hover-color: change-color($accent-color, $lightness: 36%);
    $disabled-color: #c5c5c5;

    border: 1px solid $accent-color;
    background: white;
    color: $accent-color;
    padding: $btn-content-padding-with-border;

    &:hover, &.hover,
    &:active, &.active {
        &:not([disabled]) {
            color: $hover-color;
            border-color: $hover-color;
        }
    }

    @include active-focus-shadows($active: inset 0 1px 3px 0 $hover-color);

    &[disabled] {
        color: $disabled-color;
        border-color: $disabled-color;
    }
}

.btn-ignite--success {
    $accent-color: $ignite-brand-success;
    $text-color: white;

    background-color: $accent-color;
    color: white;

    &:hover, &.hover, &:focus,
    &:active, &.active {
        &:not([disabled]) {
            color: white;
            background-color: change-color($accent-color, $lightness: 26%);
        }
    }

    @include active-focus-shadows();

    &[disabled] {
        color: transparentize($text-color, 0.5);
        background-color: change-color($accent-color, $saturation: 57%, $lightness: 68%);
    }
}

.btn-ignite--link-success {
    $accent-color: $ignite-brand-success;

    background: transparent;
    color: $accent-color;
    text-decoration: underline;

    &:hover, &.hover,
    &:active, &.active {
        &:not([disabled]) {
            color: change-color($accent-color, $lightness: 26%);
        }
    }

    &[disabled] {
        color: change-color($accent-color, $saturation: 57%, $lightness: 68%);
    }

}

@mixin btn-ignite--link-dashed(
    $color,
    $activeHover,
    $disabled
) {
    background: transparent;
    color: $color;

    span {
        background:
            linear-gradient(to right, $color, transparent),
            linear-gradient(to right, $color 70%, transparent 0%) repeat-x left bottom;
        background-size: 0, 8px 1px, 0, 0;
    }

    &:hover, &.hover,
    &:active, &.active {
        &:not([disabled]) {
            color: $activeHover;

            span {
                background:
                    linear-gradient(to right, $activeHover, transparent),
                    linear-gradient(to right, $activeHover 70%, transparent 0%) repeat-x left bottom;
                background-size: 0, 8px 1px, 0, 0;
            }
        }
    }

    &[disabled] {
        color: $disabled;

        span {
            background:
                linear-gradient(to right, $disabled, transparent),
                linear-gradient(to right, $disabled 70%, transparent 0%) repeat-x left bottom;
            background-size: 0, 8px 1px, 0, 0;
        }
    }

    @include active-focus-shadows($active: ());
}

.btn-ignite--link-dashed-success {
    $color: $ignite-brand-success;
    $activeHover: change-color($color, $lightness: 26%);
    $disabled: change-color($color, $saturation: 57%, $lightness: 68%);

    @include btn-ignite--link-dashed($color, $activeHover, $disabled);
}

.btn-ignite--link-dashed-primary {
    $color: $ignite-brand-primary;
    $activeHover: change-color($color, $lightness: 26%);
    $disabled: change-color($color, $saturation: 57%, $lightness: 68%);

    @include btn-ignite--link-dashed($color, $activeHover, $disabled);
}

.btn-ignite--link-dashed-primary {
    $color: $ignite-brand-primary;
    $activeHover: change-color($color, $lightness: 26%);
    $disabled: change-color($color, $saturation: 57%, $lightness: 68%);

    @include btn-ignite--link-dashed($color, $activeHover, $disabled);
}

.btn-ignite--link-dashed-secondary {
    $activeHover: change-color($ignite-brand-success, $lightness: 26%);
    @include btn-ignite--link-dashed($text-color, $activeHover, $gray-light);
}

.btn-ignite--secondary {
    background-color: white;
    color: #424242;
    border: 1px solid #c5c5c5;
    padding: $btn-content-padding-with-border;

    &:hover, &.hover,
    &:active, &.active {
        &:not([disabled]) {
            border-color: #c5c5c5;
            background-color: #eeeeee;
        }
    }

    @include active-focus-shadows();

    &[disabled] {
        opacity: 0.5;
    }
}

.btn-ignite-group {
    display: inline-flex;

    .btn-ignite:not(:first-of-type):not(:last-of-type) {
        border-radius: 0;
    }

    .btn-ignite:not(:last-of-type) {
        border-right-width: 1px;
        border-right-style: solid;
    }

    .btn-ignite:first-of-type:not(:only-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .btn-ignite:last-of-type:not(:only-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .btn-ignite.btn-ignite--primary {
        $line-color: $ignite-brand-primary;
        border-right-color: change-color($line-color, $lightness: 41%);
    }
    .btn-ignite.btn-ignite--success {
        $line-color: $ignite-brand-success;
        border-right-color: change-color($line-color, $saturation: 63%, $lightness: 33%);
    }
    .btn-ignite.btn-ignite--secondary + .btn-ignite.btn-ignite--secondary {
        border-left: 0;
    }

    &[disabled] .btn-ignite.btn-ignite--primary {
        border-right-color: change-color($ignite-brand-primary, $lightness: 83%);
    }

    &[disabled] .btn-ignite.btn-ignite--success {
        border-right-color: change-color($ignite-brand-success, $lightness: 83%);
    }
}

@mixin ignite-link($color, $color-hover) {
    color: $color;
    text-decoration: none;

    &:hover, &.hover,
    &:focus, &.focus {
        color: $color-hover;
        text-decoration: none;
    }
}

.link-primary {
    @include ignite-link(
        $color: $ignite-brand-primary,
        $color-hover: change-color($ignite-brand-primary, $lightness: 41%)
    );
}

.link-success {
    @include ignite-link(
        $color: $ignite-brand-success,
        $color-hover: change-color($ignite-brand-success, $lightness: 26%)
    );
}

.btn-ignite--link {
    background: transparent;

    @include ignite-link(
        $color: $ignite-brand-success,
        $color-hover: change-color($ignite-brand-success, $lightness: 26%)
    );
}

.btn-ignite--link {
    background: transparent;

    @include ignite-link(
        $color: $ignite-brand-success,
        $color-hover: change-color($ignite-brand-success, $lightness: 26%)
    );
}