edx-platform/static/pattern-library/sass/components/_buttons.scss

// ------------------------------
// edX Pattern Library: Components - Buttons

// About: Contains base styling for demonstration and utility for buttons.
// ----------------------------

// #LAYOUT
// #GLOBALS
// #BASE (size)
// #LARGE (size)
// #SMALL (size)
// #DEFAULT (style)
// #PRIMARY (style)
// #SECONDARY (style)
// #LINK (style)
// #ELEVATED (type)
// #ELEVATED-ALT (type)
// #COMBO (type)
// #ICONS (type)
// #OVERLAY (type)
// ----------------------------

// ----------------------------
// #GLOBALS
// ----------------------------
.btn {
    @include transition(
        color timing(xx-fast) ease-in-out 0s,
        border-color timing(xx-fast) ease-in-out 0s,
        background timing(xx-fast) ease-in-out 0s,
        box-shadow timing(xx-fast) ease-in-out 0s
    );

    // Display: inline, side-by-side
    display: inline-block;
    border-style: $buttons-border-style;
    border-radius: $buttons-border-radius;
    border-width: $buttons-border-size;
    font-weight: $buttons-font-weight;

    // Display: block, one button per line, full width
    &.block {
        display: block;
        width: 100%;
    }

    // STATE: is disabled
    &:disabled,
    &.is-disabled {
        @extend %state-disabled;
    }
}

// ----------------------------
// #BASE
// ----------------------------
.btn-base {
    padding: spacing-vertical(x-small) spacing-horizontal(base);
    font-size: font-size(base);
}


// ----------------------------
// #LARGE
// ----------------------------
.btn-large {
    padding: spacing-vertical(small) spacing-horizontal(mid-large);
    font-size: font-size(mid-large);
}


// ----------------------------
// #SMALL
// ----------------------------
.btn-small {
    padding: spacing-vertical(x-small) spacing-horizontal(small);
    font-size: font-size(small);
}


// ----------------------------
// #DEFAULT
// ----------------------------
.btn-default {
    border-color: palette(primary, base);
    // background: palette(grayscale, white);
    color: palette(primary, base);

    // STATE: hover and focus
    &:hover,
    &.is-hovered,
    &:focus,
    &.is-focused {
        background: palette(primary, base);
        color: palette(grayscale, white);
    }

    // STATE: is pressed or active
    &:active,
    &.is-pressed,
    &.is-active {
        border-color: palette(primary, dark);
        background: palette(primary, dark);
    }

    // STATE: is disabled
    &:disabled,
    &.is-disabled {
        border-color: palette(grayscale, light);
        background: palette(grayscale, white);
        color: palette(grayscale, base);
    }
}

// ----------------------------
// #PRIMARY
// ----------------------------
.btn-primary {
    border-color: palette(primary, base);
    background: palette(primary, base);
    color: palette(grayscale, white);

    // STATE: hover and focus
    &:hover,
    &.is-hovered,
    &:focus,
    &.is-focused {
        border-color: palette(primary, accent);
        background: palette(primary, accent);
    }

    // STATE: is pressed or active
    &:active,
    &.is-pressed,
    &.is-active {
        border-color: palette(primary, base);
        background: palette(primary, base);
    }

    // STATE: is disabled
    &:disabled,
    &.is-disabled {
        border-color: palette(grayscale, light);
        background: palette(grayscale, light);
        color: palette(grayscale, base);
    }
}


// ----------------------------
// #SECONDARY
// ----------------------------
.btn-secondary {
    border-color: $transparent;
    background: $transparent;
    color: palette(primary, base);

    // STATE: hover and focus
    &:hover,
    &.is-hovered,
    &:focus,
    &.is-focused {
        border-color: palette(grayscale-cool, light);
    }

    // STATE: is pressed or active
    &:active,
    &.is-pressed,
    &.is-active {
        border-color: palette(primary, base);
        color: palette(primary, base);
    }

    // STATE: is disabled
    &:disabled,
    &.is-disabled {
        border-color: palette(grayscale, light);
        color: palette(grayscale, light);
    }
}


// ----------------------------
// #LINK
// ----------------------------
.btn-link {
    @extend %link;

    // reset of inherited buttons
    border-radius: 0;
    border-color: $transparent;
    padding: 1px;
    background: $transparent;
}


// ----------------------------
// #ELEVATED
// ----------------------------
.btn-elevated {
    border-color: palette(primary, base);
    box-shadow: inset 0 0 -$buttons-elevated-shadow 0 0 palette(primary, dark);
    background: palette(primary, base);
    color: palette(grayscale, white);

    // STATE: hover and focus
    &:hover,
    &.is-hovered,
    &:focus,
    &.is-focused {
        box-shadow: inset 0 0 -$buttons-elevated-shadow 0 0 palette(primary, dark);
        background: palette(primary, accent);
    }

    // STATE: is pressed or active
    &:active,
    &.is-pressed,
    &.is-active {
        box-shadow: inset 0 $buttons-elevated-shadow 0 0 palette(primary, x-dark);
        background: palette(primary, dark);
    }

    // STATE: is disabled
    &:disabled,
    &.is-disabled {
        border-color: palette(grayscale, x-light);
        box-shadow: inset 0 -1px 0 palette(grayscale, light);
        background: palette(grayscale, x-light);
        color: palette(grayscale, base);
    }
}


// ----------------------------
// #ELEVATED-ALT
// ----------------------------
.btn-elevated-alt {
    box-shadow: inset 0 0 -$buttons-elevated-shadow 0 0 palette(grayscale-cool, light);
    border-color: palette(grayscale-cool, light);
    background: $transparent;
    color: palette(primary, base);

    // STATE: hover and focus
    &:hover,
    &.is-hovered,
    &:focus,
    &.is-focused {
        border-color: palette(primary, base);
        box-shadow: inset 0 0 -$buttons-elevated-shadow 0 0 palette(primary, base);
        color: palette(grayscale, white);
        background: palette(primary, accent);
    }

    // STATE: is pressed or active
    &:active,
    &.is-pressed,
    &.is-active {
        box-shadow: inset 0 $buttons-elevated-shadow 0 0 palette(primary, x-dark);
        background: palette(primary, dark);
    }

    // STATE: is disabled
    &:disabled,
    &.is-disabled {
        border-color: palette(grayscale, x-light);
        box-shadow: inset 0 -1px 0 palette(grayscale, light);
        background: palette(grayscale, x-light);
        color: palette(grayscale, base);
    }
}


// ----------------------------
// #COMBO
// ----------------------------
.btn-combo {
    border-radius: 0;

    // targets the first element in a parent container
    &:first-of-type {
        @include border-top-left-radius($buttons-border-radius);
        @include border-bottom-left-radius($buttons-border-radius);
    }

    // targets the last element in a parent container
    &:last-of-type {
        @include border-top-right-radius($buttons-border-radius);
        @include border-bottom-right-radius($buttons-border-radius);
    }
}


// ----------------------------
// #ICONS
// ----------------------------
.has-icon {

}

.has-icon-reverse {

}


// ----------------------------
// #OVERLAY
// ----------------------------
.btn-overlay {
    border-color: palette(grayscale, white);
    background: $transparent;
    color: palette(grayscale, white);
    font-weight: font-weight(semi-bold);

    // STATE: hover and focus
    &:hover,
    &.is-hovered,
    &:focus,
    &.is-focused {
        background: palette(grayscale, white);
        color: palette(primary, base);
    }

    // STATE: is pressed or active
    &:active,
    &.is-pressed,
    &.is-active {
        color: palette(primary, dark);
    }

    // STATE: is disabled
    &:disabled,
    &.is-disabled {
        border-color: palette(grayscale, trans);
        color: palette(grayscale, x-light);

        &:hover {
            border-color: palette(grayscale, trans);
            background: $transparent;
            color: palette(grayscale, x-light);
        }
    }
}