Zurb Foundation 5 SASS Outline Button Styles

_foundation-outline-buttons.scss

/**
 * Create Buttons with colored border and text and transparent background
 *
 * Hover state is solid background color that matches border
 * The white hover text is set by Foundation with "button-style" mixin that sets it based on the background color
   - found in _buttons.scss
 * You could override the hover/focus text color below if it isn't satisfactory
 *
 * Place in your _global.scss partial
 */

button.outline,
.button.outline {
    border-width: 1px;

    // Outline Default
    @include button-style(
        $bg: transparent,
        $bg-hover: $primary-color,
        $border-color: $primary-color
    );

    color: $primary-color;

    // Outline Secondary
    &.secondary {
        @include button-style(
            $bg: transparent,
            $bg-hover: $secondary-color,
            $border-color: $secondary-color
        );

        color: $aluminum; // $secondary-color is too light
    }

    // Outline Alert
    &.alert {
        @include button-style(
            $bg: transparent,
            $bg-hover: $alert-color,
            $border-color: $alert-color
        );

        color: $alert-color;
    }

    // Outline Success
    &.success {
        @include button-style(
            $bg: transparent,
            $bg-hover: $success-color,
            $border-color: $success-color
        );

        color: $success-color;
    }

    // Outline Warning
    &.warning {
        @include button-style(
            $bg: transparent,
            $bg-hover: $warning-color,
            $border-color: $warning-color
        );

        color: $warning-color;
    }

    // Outline Info
    &.info {
        @include button-style(
            $bg: transparent,
            $bg-hover: $info-color,
            $border-color: $info-color
        );

        color: $info-color;
    }



    /**
     * Outline Disabled Buttons
     */
    
    &.disabled,
    &[disabled] {

        // Outline Disabled Default
        @include button-style(
            $bg: transparent,
            $disabled: true,
            $border-color: $primary-color
        );

        color: $primary-color;

        &:hover,
        &:focus {
            color: $primary-color;
        }

        // Outline Disabled Secondary
        &.secondary {
            @include button-style(
                $bg: transparent,
                $disabled: true,
                $border-color: $secondary-color
            );

            color: $aluminum; // $secondary-color is too light

            &:hover,
            &:focus {
                color: $aluminum;
            }

        }

        // Outline Disabled Alert
        &.alert {
            @include button-style(
                $bg: transparent,
                $disabled: true,
                $border-color: $alert-color
            );

            color: $alert-color;

            &:hover,
            &:focus {
                color: $alert-color;
            }

        }

        // Outline Disabled Success
        &.success {
            @include button-style(
                $bg: transparent,
                $disabled: true,
                $border-color: $success-color
            );

            color: $success-color;

            &:hover,
            &:focus {
                color: $success-color;
            }

        }

        // Outline Disabled Warning
        &.warning {
            @include button-style(
                $bg: transparent,
                $disabled: true,
                $border-color: $warning-color
            );

            color: $warning-color;

            &:hover,
            &:focus {
                color: $warning-color;
            }

        }

        // Outline Disabled Info
        &.info {
            @include button-style(
                $bg: transparent,
                $disabled: true,
                $border-color: $info-color
            );

            color: $info-color;

            &:hover,
            &:focus {
                color: $info-color;
            }

        }

    }
    
}