ogre-alert/assets/sass/style.scss

/*
Plugin Name: OgreAlert
Plugin URI: https://plugins.cleverogre.com/plugin/ogrealert/
Description: OgreAlert is a plugin developed by CleverOgre in Pensacola, Florida.
Version: 0.2.1
Author: CleverOgre
Author URI: https://cleverogre.com/
Icon1x: https://plugins.cleverogre.com/plugin/ogrealert/?asset=icon-sm
Icon2x: https://plugins.cleverogre.com/plugin/ogrealert/?asset=icon
BannerHigh: https://plugins.cleverogre.com/plugin/ogrealert/?asset=banner
BannerLow: https://plugins.cleverogre.com/plugin/ogrealert/?asset=banner-sm
Text Domain: ogrealert
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Copyright: © 2020 CleverOgre, Inc. All rights reserved.
*/

/*******************
 * Variables       *
 *******************/

:root {
    --ogrealert--index: 10001;
    --ogrealert--container-size: 1200px;
    --ogrealert--padding: 1rem;
    --ogrealert--font-size: 1rem;
    --ogrealert--line-height: 1.5;
    --ogrealert--icon-size: calc(var(--ogrealert--font-size, 1rem) * var(--ogrealert--line-height, 1.5));
    --ogrealert--icon-stroke: calc(var(--ogrealert--icon-size, 1.5rem) * 0.1);
}

/*******************
 * Mixins          *
 *******************/

@mixin screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/*******************
 * Message         *
 *******************/

section.ogrealert-messages {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;

    position: relative;
    z-index: var(--messages-index, var(--ogrealert--index, 10001));

    font-size: 0;
    line-height: 0;
    color: transparent;

    &.ogrealert-position-top,
    &.ogrealert-position-bottom {
        position: fixed;
        right: 0;
        left: 0;
    }
    &.ogrealert-position-top {
        top: 0;
        bottom: auto;
        body.admin-bar & {
            top: 32px;
            @media screen and (max-width: 782px) {
                top: 46px;
            }
        }
    }
    &.ogrealert-position-bottom {
        top: auto;
        bottom: 0;
    }

    ul.ogrealert-messages__list {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        list-style: none;
        li.ogrealert-messages__list-item {
            display: block;
            width: 100%;
            height: auto;
            margin: 0;
            padding: 0;
        }
    }
}

article.ogrealert-message {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: var(--ogrealert--padding, 1rem);
    clear: both;
    box-sizing: border-box;

    display: flex;
    flex-flow: row nowrap;
    gap: var(--ogrealert--padding, 1rem);

    .ogrealert-title {
        @include screen-reader-text;
    }

    div.ogrealert-container {
        flex: 0 1 auto;
        display: block;
        width: var(--ogrealert--container-size, 1200px);
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 0;
        clear: both;
    }

    div.ogrealert-content {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;

        font-size: var(--ogrealert--font-size, 1rem);
        line-height: var(--ogrealert--line-height, 1.5);
        color: inherit;

        p {
            display: block;
            width: 100%;
            height: auto;
            margin: 0 0 1em;
            padding: 0;
            &:last-child {
                margin-bottom: 0;
            }

            font-size: var(--ogrealert--font-size, 1rem);
            line-height: var(--ogrealert--line-height, 1.5);
            font-weight: normal;
            font-style: normal;
            color: inherit;
        }
    }

    a.ogrealert-action {
        flex: 0 0 auto;
        display: inline-block;
        width: var(--ogrealert--icon-size, 1.5rem);
        height: var(--ogrealert--icon-size, 1.5rem);
        box-sizing: border-box;
        padding: 0;
        margin: auto 0;
        position: relative;

        font-size: 0;
        line-height: 0;
        color: inherit;

        transition-property: scale, opacity;
        transition-duration: .15s;
        transition-timing-function: ease-in-out;

        &.ogrealert-dismiss {
            &::before,
            &::after {
                content: '';
                display: block;
                width: 141.4213562%;
                height: var(--ogrealert--icon-stroke, 10%);
                margin: 0;
                padding: 0;
                background-color: currentColor;

                position: absolute;
                top: 50%;
                left: 50%;
                translate: -50% -50%;
            }
            &::before {
                rotate: -45deg;
            }
            &::after {
                rotate: 45deg;
            }
        }
        &:hover {
            scale: 1.25;
        }
        &:active {
            opacity: 0.7;
            scale: .9;
            transition-duration: .1s;
        }
    }
}