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.1.9
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.
*/

/*******************
 * Libraries       *
 *******************/

@import 'lib/bourbon/bourbon';
@import 'lib/fontawesome/fontawesome';

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

// Colors

$gray-darker: #1c1c1c;
$gray-dark: #2d2d2d;
$gray: #6d6d6d;
$gray-light: #eeeeee;
$gray-lighter: #fefefe;

// Structure

$gutter: 32px;

$content-text: 16px;
$content-line: 1.5 * $content-text;

$icon-text: $content-line;

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

section.ogrealert-messages {
    --messages-index: 10001;

    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;

    position: relative;
    z-index: var(--messages-index);

    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: 0;

    @include clearfix();
    clear: both;

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

    @include display(flex);
    @include flex-flow(row nowrap);

    .ogrealert-title {
        @include sr-only();
    }

    div.ogrealert-container {
        @include flex(0 1 auto);
        display: block;
        width: 1200px;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 0;

        @include clearfix();
        clear: both;
    }

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

        font-size: $content-text;
        line-height: $content-line;
        color: inherit;

        p {
            display: block;
            width: 100%;
            height: auto;
            margin: 0 0 $gutter / 2;
            padding: 0;
            &:last-child {
                margin-bottom: 0;
            }

            font-size: $content-text;
            line-height: $content-line;
            font-weight: normal;
            font-style: normal;
            color: inherit;
        }
    }

    a.ogrealert-action {
        @include flex(0 0 auto);
        display: inline-block;
        width: auto;
        height: max($icon-text, $content-line) + $gutter;
        box-sizing: border-box;
        padding: max($icon-text, $content-line) - $content-line + $gutter / 2 $gutter / 2;
        margin: auto 0;
        float: right;

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

        &:before {
            @include fa-icon();

            display: inline-block;
            width: auto;
            height: $icon-text;
            margin: 0;
            padding: 0;

            font-size: $icon-text;
            line-height: $icon-text;
            text-align: center;
            vertical-align: top;
            color: inherit;

            @include transform(scale3d(1, 1, 1));
            @include transform-origin(center);

            @include transition-property(transform);
            @include transition-duration(0.15s);
            @include transition-timing-function(ease-in-out);
        }
        &.ogrealert-dismiss:before {
            content: fa-content($fa-var-times);
            font-weight: 300;
        }
        &:hover:before {
            @include transform(scale3d(1.25, 1.25, 1));
        }
        &:active:before {
            @include transform(scale3d(0.9, 0.9, 1));
            @include transition-duration(0.1s);
        }
    }
}