Added z-index setting for all alerts.
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user