_alerts_pattern_library_shim.scss

// lms alerts
// This file contains "I want alerts that look like the pattern library" sass
// and should be replaced when moving to the patter library proper
// https://github.com/edx/ux-pattern-library/blob/master/pattern-library/sass/patterns/_alerts.scss

// ------------------------------
// edX Pattern Library: Utilities - Alerts
//
// About: Contains base styling for alerts.
// ----------------------------

// #CONFIG
// #UTILITIES
// #GENERAL
// #INDIVIDUAL CASES


// ----------------------------
// #CONFIG
// ----------------------------

// Overrides for other things available in the UXPL but not here
// This is super gross. Don't do this in other places if you can avoid it.
$palette-brand-accent: #2991c3;
$palette-brand-back: #cce3f0;
$palette-warning-accent: #ffc01f;
$palette-warning-back: #fff9eb;
$palette-error-accent: #cb0712;
$palette-error-back: #feeced;
$palette-success-accent: #009b00;
$palette-success-back: #ecfaec;
$palette-grey-accent: #a0a0a0;
$palette-grey-back: #d9d9d9;
$spacing-vertical-xx-small: ($baseline / 4);
$spacing-vertical-x-small: ($baseline / 2);
$spacing-vertical-small: $baseline;
$spacing-horizontal-small: ($baseline / 2);
$spacing-horizontal-base: $baseline;
$font-size-small: 14px;
$bp-screen-md: 768px !default;

// ----------------------------
// #UTILITIES
// ----------------------------
@mixin alert($shim-alert-color, $shim-alert-color-glow) {
    border: 1px solid $shim-alert-color;
    box-shadow: inset 0 0 0 4px $shim-alert-color-glow;

    .alert-icon {
        color: $white;
        background-color: $shim-alert-color;
    }
}

@mixin alert-message($width) {
    box-sizing: border-box;

    @media (min-width: $bp-screen-md) {
        @include float(left);
        width: $width;
        padding: $spacing-vertical-small;
        padding-top: 0;
        padding-bottom: 0;
    }

    :last-child {
        // keeps the message compact
        margin-bottom: 0;
    }
}

// everything below here gets added specificity pattern-library-shim
.pattern-library-shim {
    // ----------------------------
    // #GENERAL
    // ----------------------------
    &.alert {
        background-color: $white;
        border: 1px solid $palette-grey-accent;
        padding: $spacing-vertical-small $spacing-horizontal-base;
        box-shadow: inset 0 0 0 4px $palette-grey-back;
        overflow: auto;

        &.alert-slim {
            padding: $spacing-vertical-x-small;

            .alert-message {
                padding: $spacing-vertical-small $spacing-horizontal-base;
                font-size: $font-size-small;

                .copy {
                    margin-bottom: 0;
                }
            }
        }

        &.alert-tiny {
            padding: $spacing-vertical-x-small;

            .alert-message {
                padding: $spacing-vertical-x-small $spacing-horizontal-small;
                font-size: $font-size-small;

                .copy {
                    margin-bottom: 0;

                    .icon {
                        display: inline-block;
                        margin-right: $baseline;
                    }
                }
            }
        }
    }

    .alert-icon {
        // hide icons on small screens
        display: none;

        @media (min-width: $bp-screen-md) {
            @include float(left);
            display: block;

            // create a circle around the icon
            border-radius: 50%;

            // create room around the icon for the circle
            padding: $spacing-vertical-x-small;
        }
    }

    .alert-message-with-action {
        // provide room for the action to be displayed next to the alert message
        @include alert-message(70%);
    }

    .alert-message {
        @include alert-message(90%);
    }

    .alert-title {
        @extend %hd-5;
        @extend %headings-emphasized;

        @media (min-width: $bp-screen-md) {
            // shift the section up to make the alert more compact
            margin-top: - $spacing-vertical-x-small;
        }

    }

    .alert-copy {
        @extend %copy-base;

        @media (min-width: $bp-screen-md) {
            // shift the message down to be in line with the icon
            margin-top: $spacing-vertical-xx-small;
        }
    }

    .alert-copy-with-title {
        @extend %copy-base;
    }

    .alert-action {
        width: 100%;

        @media (min-width: $bp-screen-md) {
            @include float(right);
            width: inherit;
        }
    }

    // ----------------------------
    // #INDIVIDUAL CASES
    // ----------------------------

    // information-based alert
    &.alert-information {
        @include alert($palette-brand-accent, $palette-brand-back);
    }

    // warning-based alert
    &.alert-warning {
        @include alert($palette-warning-accent, $palette-warning-back);
    }

    // error-based alert
    &.alert-error {
        @include alert($palette-error-accent, $palette-error-back);
    }

    // success-based alert
    &.alert-success {
        @include alert($palette-success-accent, $palette-success-back);
    }
}