docs/python_docs/themes/mx-theme/src/scss/admonitions/_admonitions.scss

/*
 * Admonition Styles
 */
 $admonitions: (
    hint: (
        font-color: rgb(0, 188, 212),
        background-color: rgba(0, 188, 212, 0.1),
        icon-content: "help_outline"
    ),
    note: (
        font-color: rgb(0, 188, 212),
        background-color: rgba(0, 188, 212, 0.1),
        icon-content: "info_outline"
    ),
    seealso: (
        font-color: rgb(0, 188, 212),
        background-color: rgba(0, 188, 212, 0.1),
        icon-content: "search"
    ),
    warning: (
        font-color: rgb(255, 193, 7),
        background-color: rgba(255, 193, 7, 0.1),
        icon-content: "warning"
    ),
    attention: (
        font-color: rgb(255, 193, 7),
        background-color: rgba(255, 193, 7, 0.1),
        icon-content: "warning"
    ),
    tip: (
        font-color: rgb(139, 195, 74),
        background-color: rgba(139, 195, 74, 0.1),
        icon-content: "lightbulb_outline"
    ),
    important: (
        font-color: rgb(139, 195, 74),
        background-color: rgba(139, 195, 74, 0.1),
        icon-content:  "check_circle"
    ),
    error: (
        font-color: rgb(244, 67, 54),
        background-color: rgba(244, 67, 54, 0.1),
        icon-content: "error_outline"
    ),
    caution: (
        font-color: rgb(244, 67, 54),
        background-color: rgba(244, 67, 54, 0.1),
        icon-content: "error_outline"
    ),
    danger: (
        font-color: rgb(244, 67, 54),
        background-color: rgba(244, 67, 54, 0.1),
        icon-content: "error_outline"
    )
);

 @mixin admonition-style($type) {
    border-left: solid 4px map-get(map-get($admonitions, $type), font-color);
    background-color: map-get(map-get($admonitions, $type), background-color);
    .admonition-title {
        font-size: 16px;
        font-weight: bold;
        color: map-get(map-get($admonitions, $type), font-color);

        margin-top: 4px;
        margin-bottom: 8px;
        &::before {
            @extend .material-icons;
            position: relative;
            margin-right: 5px;
            top: 3px;
            content: map-get(map-get($admonitions, $type), icon-content);
            font-size: 18px;
        }
    }
}

.admonition {
    @extend .mdl-shadow--2dp;

    padding: 12px 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    p.last {
        margin: 16px;
    }
    .admonition-title {
        font-size: 16px;
        font-weight: bold;
        color: #555;
        text-transform: uppercase;
        margin-top: 7px;
    }

    @each $type in (note, seealso, hint, warning, attention, tip, important, error, caution, danger) {
        &.#{$type} {
            @include admonition-style($type);
        }
    }
}