amis2/scss/components/_button.scss

.#{$ns}Button {
    display: inline-block;
    font-weight: $Button-fontWeight;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: $Button-borderWidth solid transparent;
    transition: $Button-transition;
    white-space: nowrap;

    @if $Button-mimWidth !=auto {
        min-width: $Button-mimWidth;
    }

    @include button-size(
        $Button-paddingY,
        $Button-paddingX,
        $Button-fontSize,
        $Button-lineHeight,
        $Button-borderRadius,
        $Button-height
    );

    @include hover-focus {
        color: $text-color;
        text-decoration: none;
    }

    &:focus,
    &.focus {
        outline: 0;
        box-shadow: $Button-onFocus-boxShadow;
    }

    &.is-disabled,
    &:disabled {
        opacity: $Button-onDisabled-opacity;
        box-shadow: none;
        pointer-events: none;
        border-color: $Button-onDisabled-borderColor;

        @if variable-exists(Button-onDisabled-bg) {
            background-color: $Button-onDisabled-bg !important;
        }

        @if variable-exists(Button-onDisabled-color) {
            color: $Button-onDisabled-color !important;
        }

        &.is-active,
        &:active {
            @if variable-exists(Button-onDisabledActive-bg) {
                background-color: $Button-onDisabledActive-bg !important;
            }
        }
    }

    &:not(:disabled):not(.is-disabled) {
        cursor: pointer;
    }

    &:not(:disabled):not(.is-disabled):active,
    &:not(:disabled):not(.is-disabled).is-active {
        box-shadow: $Button-onActive-boxShadow;

        &:focus {
            box-shadow: $Button-onActive-boxShadow;
        }
    }

    > .pull-left,
    > .pull-right {
        line-height: inherit;
    }

    > .fa,
    > .iconfont,
    > .glyphicon {
        font-size: inherit;
    }
}

a.#{$ns}Button.is-disabled,
fieldset:disabled a.#{$ns}Button {
    pointer-events: none;
}

.#{$ns}Button--primary {
    @include button-variant(
        $Button--primary-bg,
        $Button--primary-border,
        $Button--primary-color,
        $Button--primary-onHover-bg,
        $Button--primary-onHover-border,
        $Button--primary-onHover-color,
        $Button--primary-onActive-bg,
        $Button--primary-onActive-border,
        $Button--primary-onActive-color
    );
}

.#{$ns}Button--secondary {
    @include button-variant(
        $Button--secondary-bg,
        $Button--secondary-border,
        $Button--secondary-color,
        $Button--secondary-onHover-bg,
        $Button--secondary-onHover-border,
        $Button--secondary-onHover-color,
        $Button--secondary-onActive-bg,
        $Button--secondary-onActive-border,
        $Button--secondary-onActive-color
    );
}

.#{$ns}Button--success {
    @include button-variant(
        $Button--success-bg,
        $Button--success-border,
        $Button--success-color,
        $Button--success-onHover-bg,
        $Button--success-onHover-border,
        $Button--success-onHover-color,
        $Button--success-onActive-bg,
        $Button--success-onActive-border,
        $Button--success-onActive-color
    );
}

.#{$ns}Button--info {
    @include button-variant(
        $Button--info-bg,
        $Button--info-border,
        $Button--info-color,
        $Button--info-onHover-bg,
        $Button--info-onHover-border,
        $Button--info-onHover-color,
        $Button--info-onActive-bg,
        $Button--info-onActive-border,
        $Button--info-onActive-color
    );
}

.#{$ns}Button--warning {
    @include button-variant(
        $Button--warning-bg,
        $Button--warning-border,
        $Button--warning-color,
        $Button--warning-onHover-bg,
        $Button--warning-onHover-border,
        $Button--warning-onHover-color,
        $Button--warning-onActive-bg,
        $Button--warning-onActive-border,
        $Button--warning-onActive-color
    );
}

.#{$ns}Button--danger {
    @include button-variant(
        $Button--danger-bg,
        $Button--danger-border,
        $Button--danger-color,
        $Button--danger-onHover-bg,
        $Button--danger-onHover-border,
        $Button--danger-onHover-color,
        $Button--danger-onActive-bg,
        $Button--danger-onActive-border,
        $Button--danger-onActive-color
    );
}

.#{$ns}Button--light {
    @include button-variant(
        $Button--light-bg,
        $Button--light-border,
        $Button--light-color,
        $Button--light-onHover-bg,
        $Button--light-onHover-border,
        $Button--light-onHover-color,
        $Button--light-onActive-bg,
        $Button--light-onActive-border,
        $Button--light-onActive-color
    );
}

.#{$ns}Button--dark {
    @include button-variant(
        $Button--dark-bg,
        $Button--dark-border,
        $Button--dark-color,
        $Button--dark-onHover-bg,
        $Button--dark-onHover-border,
        $Button--dark-onHover-color,
        $Button--dark-onActive-bg,
        $Button--dark-onActive-border,
        $Button--dark-onActive-color
    );
}

.#{$ns}Button--default {
    @include button-variant(
        $Button--default-bg,
        $Button--default-border,
        $Button--default-color,
        $Button--default-onHover-bg,
        $Button--default-onHover-border,
        $Button--default-onHover-color,
        $Button--default-onActive-bg,
        $Button--default-onActive-border,
        $Button--default-onActive-color
    );
}

.#{$ns}Button--xs {
    @include button-size(
        $Button--xs-paddingY,
        $Button--xs-paddingX,
        $Button--xs-fontSize,
        $Button--xs-lineHeight,
        $Button--sm-borderRadius,
        $Button--xs-height
    );

    &.#{$ns}Button--iconOnly {
        min-width: $Button--xs-height * $Button--iconOnly-minWidthRate;
    }
}

.#{$ns}Button--sm {
    @include button-size(
        $Button--sm-paddingY,
        $Button--sm-paddingX,
        $Button--sm-fontSize,
        $Button--sm-lineHeight,
        $Button--sm-borderRadius,
        $Button--sm-height
    );

    &.#{$ns}Button--iconOnly {
        min-width: $Button--sm-height * $Button--iconOnly-minWidthRate;
    }
}

.#{$ns}Button--md {
    @include button-size(
        $Button--md-paddingY,
        $Button--md-paddingX,
        $Button--md-fontSize,
        $Button--md-lineHeight,
        $Button-borderRadius,
        $Button--md-height
    );

    &.#{$ns}Button--iconOnly {
        min-width: $Button--md-height * $Button--iconOnly-minWidthRate;
    }
}

.#{$ns}Button--lg {
    @include button-size(
        $Button--lg-paddingY,
        $Button--lg-paddingX,
        $Button--lg-fontSize,
        $Button--lg-lineHeight,
        $Button--lg-borderRadius,
        $Button--lg-height
    );

    &.#{$ns}Button--iconOnly {
        min-width: $Button--lg-height * $Button--iconOnly-minWidthRate;
    }
}

.#{$ns}Button--iconOnly {
    min-width: $Button-height * $Button--iconOnly-minWidthRate;

    &:not(.#{$ns}Button--link) {
        > .fa,
        > .iconfont {
            font-size: $fontSizeMd;
        }

        > .iconfont {
            line-height: 1;
        }
    }
}

.#{$ns}Button--link {
    width: auto;
    min-width: auto;
    font-weight: $fontWeightNormal;
    color: $Button--link-color;
    text-decoration: $link-decoration;
    border: none;

    @include hover-focus {
        color: $Button--link-onHover-color;
        text-decoration: $link-onHover-decoration;
        box-shadow: none;
    }

    &:disabled,
    &.is-disabled {
        color: $text--muted-color;
        pointer-events: none;
    }
}

.#{$ns}Button--block {
    display: block;
    width: 100%;

    + .#{$ns}Button--block {
        margin-top: $gap-base;
    }
}

input[type="submit"],
input[type="reset"],
input[type="button"] {
    &.#{$ns}Button--block {
        width: 100%;
    }
}

.#{$ns}ButtonToolbar {
    margin-left: px2rem(-5px);
    margin-top: px2rem(-5px);

    > .#{$ns}Button {
        margin-left: px2rem(5px);
        margin-top: px2rem(5px);
    }
}

.#{$ns}Button--disabled-wrap {
    display: inline-block !important;
}