Added z-index setting for all alerts.

This commit is contained in:
dcooperdalrymple
2021-05-24 15:05:08 -05:00
parent f383778510
commit 0dfafdbf68
3 changed files with 16 additions and 6 deletions

View File

@@ -57,15 +57,13 @@ $content-line: 1.5 * $content-text;
$icon-text: $content-line;
// Layering
$messages-index: 10001;
/*******************
* Message *
*******************/
section.ogrealert-messages {
--messages-index: 10001;
display: block;
width: 100%;
height: auto;
@@ -73,7 +71,7 @@ section.ogrealert-messages {
padding: 0;
position: relative;
z-index: $messages-index;
z-index: var(--messages-index);
font-size: 0;
line-height: 0;

View File

@@ -28,6 +28,7 @@ class Settings {
public static $message_transition_duration;
public static $message_transition_animation;
public static $message_dismiss_duration;
public static $message_index;
public static $message_high_text_color;
public static $message_high_background_color;
@@ -46,6 +47,7 @@ class Settings {
'message_transition_duration' => '250',
'message_dismiss_duration' => 'day',
'message_animation' => 'slide',
'message_index' => '10001',
'message_high_text_color' => 'rgba(255, 255, 255, 1)',
'message_high_background_color' => 'rgba(220, 53, 69, 1)',
@@ -255,6 +257,13 @@ class SettingsPage {
'default' => \OgreAlert\Settings::get_default('message_dismiss_duration'),
));
add_settings_field('ogrealert_message_index', __('Z-Index', 'ogrealert'), array(__CLASS__, 'field_text'), 'ogrealert', 'ogrealert_section_general', array(
'id' => 'ogrealert_settings_message_index',
'description' => 'Sets the z-index value of all OgreAlert messages. Useful for ensuring your messages appear above certain elements of your site.',
'placeholder' => \OgreAlert\Settings::get_default('message_index'),
'default' => \OgreAlert\Settings::get_default('message_index'),
));
add_settings_section('ogrealert_section_high', __('High Priority', 'ogrealert'), array(__CLASS__, 'section'), 'ogrealert');
add_settings_field('ogrealert_message_high_text_color', __('Text Color', 'ogrealert'), array(__CLASS__, 'field_color'), 'ogrealert', 'ogrealert_section_high', array(

View File

@@ -7,6 +7,9 @@
if (!defined('ABSPATH')) exit;
$index = \OgreAlert\Settings::get('message_index');
if (!is_numeric($index)) $index = 10001;
?>
<section class="ogrealert-messages ogrealert-position-<?php esc_attr_e(\OgreAlert\Settings::get('message_position')); ?>">
<section class="ogrealert-messages ogrealert-position-<?php esc_attr_e(\OgreAlert\Settings::get('message_position')); ?>" style="--messages-index: <?php echo intval($index); ?>">
<ul class="ogrealert-messages__list">