Refactor modal styles to use classes instead of IDs
This commit is contained in:
@@ -9,7 +9,7 @@ body.mailpoet_modal_opened
|
|||||||
overflow: hidden
|
overflow: hidden
|
||||||
|
|
||||||
// overlay
|
// overlay
|
||||||
#mailpoet_modal_overlay
|
.mailpoet_modal_overlay
|
||||||
height: 100%
|
height: 100%
|
||||||
left: 0
|
left: 0
|
||||||
overflow-y: auto
|
overflow-y: auto
|
||||||
@@ -28,24 +28,21 @@ body.mailpoet_modal_opened
|
|||||||
box-shadow(0px 0px 20px 2px alpha(#fff, 75%))
|
box-shadow(0px 0px 20px 2px alpha(#fff, 75%))
|
||||||
|
|
||||||
// overlay: state
|
// overlay: state
|
||||||
#mailpoet_modal_overlay.mailpoet_overlay_hidden
|
.mailpoet_modal_overlay.mailpoet_overlay_hidden
|
||||||
background-color: transparent
|
background-color: transparent
|
||||||
|
|
||||||
// overlay: state
|
// overlay: state
|
||||||
#mailpoet_modal_overlay.mailpoet_overlay_loading
|
.mailpoet_modal_overlay.mailpoet_overlay_loading
|
||||||
background-color: overlay_background_color !important
|
background-color: overlay_background_color !important
|
||||||
display: block !important
|
display: block !important
|
||||||
|
|
||||||
.mailpoet_modal_opened #mailpoet_modal_overlay
|
.mailpoet_modal_opened .mailpoet_modal_overlay
|
||||||
display: block
|
display: block
|
||||||
|
|
||||||
// modal popup
|
// modal popup
|
||||||
#mailpoet_popup
|
.mailpoet_popup
|
||||||
display: none
|
|
||||||
position: absolute
|
|
||||||
z-index: 25
|
z-index: 25
|
||||||
top: 48px
|
margin: auto
|
||||||
margin: 0
|
|
||||||
|
|
||||||
.mailpoet_popup_wrapper
|
.mailpoet_popup_wrapper
|
||||||
background-color: modal_content_background_color
|
background-color: modal_content_background_color
|
||||||
@@ -58,14 +55,14 @@ body.mailpoet_modal_opened
|
|||||||
.mailpoet_overlay_hidden .mailpoet_popup_wrapper
|
.mailpoet_overlay_hidden .mailpoet_popup_wrapper
|
||||||
border: 1px solid #333
|
border: 1px solid #333
|
||||||
|
|
||||||
#mailpoet_popup_title
|
.mailpoet_popup_title
|
||||||
background-color: modal_title_background_color
|
background-color: modal_title_background_color
|
||||||
border: 1px solid #333
|
border: 1px solid #333
|
||||||
height: 27px
|
height: 27px
|
||||||
margin: 0
|
margin: 0
|
||||||
padding: 0 30px 0 0
|
padding: 0 30px 0 0
|
||||||
|
|
||||||
#mailpoet_popup_title h2
|
.mailpoet_popup_title h2
|
||||||
color: modal_title_color
|
color: modal_title_color
|
||||||
font-size: 12px
|
font-size: 12px
|
||||||
font-weight: normal
|
font-weight: normal
|
||||||
@@ -78,11 +75,11 @@ body.mailpoet_modal_opened
|
|||||||
height: 92%
|
height: 92%
|
||||||
|
|
||||||
// modal panel
|
// modal panel
|
||||||
#mailpoet_modal_overlay.mailpoet_panel_overlay
|
.mailpoet_modal_overlay.mailpoet_panel_overlay
|
||||||
top: 32px
|
top: 32px
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
|
|
||||||
#mailpoet_panel
|
.mailpoet_panel
|
||||||
display: none
|
display: none
|
||||||
position: fixed
|
position: fixed
|
||||||
z-index: 100002
|
z-index: 100002
|
||||||
@@ -104,13 +101,13 @@ body.mailpoet_modal_opened
|
|||||||
top: 0
|
top: 0
|
||||||
z-index: 0
|
z-index: 0
|
||||||
|
|
||||||
#mailpoet_panel_title
|
.mailpoet_panel_title
|
||||||
margin: 0
|
margin: 0
|
||||||
padding: 0
|
padding: 0
|
||||||
position: relative
|
position: relative
|
||||||
height: 0
|
height: 0
|
||||||
|
|
||||||
#mailpoet_panel_title h2
|
.mailpoet_panel_title h2
|
||||||
color: modal_title_color
|
color: modal_title_color
|
||||||
background-color: modal_title_background_color
|
background-color: modal_title_background_color
|
||||||
border-left: 1px solid #444
|
border-left: 1px solid #444
|
||||||
@@ -126,7 +123,7 @@ body.mailpoet_modal_opened
|
|||||||
padding: 10px 10px 36px 10px
|
padding: 10px 10px 36px 10px
|
||||||
|
|
||||||
// modal button
|
// modal button
|
||||||
#mailpoet_modal_close
|
.mailpoet_modal_close
|
||||||
background: url(../img/modal_close_button.png) 7px 7px no-repeat
|
background: url(../img/modal_close_button.png) 7px 7px no-repeat
|
||||||
height: 30px
|
height: 30px
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
@@ -136,15 +133,15 @@ body.mailpoet_modal_opened
|
|||||||
z-index: 2
|
z-index: 2
|
||||||
outline: 0 none
|
outline: 0 none
|
||||||
|
|
||||||
#mailpoet_popup #mailpoet_modal_close
|
.mailpoet_popup .mailpoet_modal_close
|
||||||
right: 0
|
right: 0
|
||||||
top: 0
|
top: 0
|
||||||
|
|
||||||
#mailpoet_panel #mailpoet_modal_close
|
.mailpoet_panel .mailpoet_modal_close
|
||||||
right: 10px
|
right: 10px
|
||||||
top: 7px
|
top: 7px
|
||||||
|
|
||||||
#mailpoet_modal_close:focus
|
.mailpoet_modal_close:focus
|
||||||
outline: 0 none
|
outline: 0 none
|
||||||
|
|
||||||
// buttons
|
// buttons
|
||||||
@@ -161,7 +158,7 @@ body.mailpoet_modal_opened
|
|||||||
text-align: right
|
text-align: right
|
||||||
|
|
||||||
@media screen and (max-width: 782px)
|
@media screen and (max-width: 782px)
|
||||||
#mailpoet_modal_overlay.mailpoet_panel_overlay
|
.mailpoet_modal_overlay.mailpoet_panel_overlay
|
||||||
top: 46px
|
top: 46px
|
||||||
|
|
||||||
.mailpoet_panel_body
|
.mailpoet_panel_body
|
||||||
@@ -191,13 +188,13 @@ body.mailpoet_modal_opened
|
|||||||
margin-left: 17px
|
margin-left: 17px
|
||||||
width: 32px
|
width: 32px
|
||||||
|
|
||||||
#mailpoet_modal_loading_1, .mailpoet_modal_loading_1
|
.mailpoet_modal_loading_1, .mailpoet_modal_loading_1
|
||||||
animation-delay(0.39s)
|
animation-delay(0.39s)
|
||||||
|
|
||||||
#mailpoet_modal_loading_2, .mailpoet_modal_loading_2
|
.mailpoet_modal_loading_2, .mailpoet_modal_loading_2
|
||||||
animation-delay(0.9099999999999999s)
|
animation-delay(0.9099999999999999s)
|
||||||
|
|
||||||
#mailpoet_modal_loading_3, .mailpoet_modal_loading_3
|
.mailpoet_modal_loading_3, .mailpoet_modal_loading_3
|
||||||
animation-delay(1.1700000000000002s)
|
animation-delay(1.1700000000000002s)
|
||||||
|
|
||||||
@keyframes bounce_mailpoet_modal_loading
|
@keyframes bounce_mailpoet_modal_loading
|
||||||
|
@@ -1,6 +1,6 @@
|
|||||||
#mailpoet_settings
|
#mailpoet_settings
|
||||||
// common
|
// common
|
||||||
.mailpoet_panel
|
.mailpoet_tab_panel
|
||||||
display none
|
display none
|
||||||
|
|
||||||
.form-table th
|
.form-table th
|
||||||
|
@@ -79,21 +79,21 @@ define('modal', ['mailpoet', 'jquery'],
|
|||||||
renderer: 'html',
|
renderer: 'html',
|
||||||
options: {},
|
options: {},
|
||||||
templates: {
|
templates: {
|
||||||
overlay: '<div id="mailpoet_modal_overlay" style="display:none;"></div>',
|
overlay: '<div id="mailpoet_modal_overlay" class="mailpoet_modal_overlay" style="display:none;"></div>',
|
||||||
popup: '<div id="mailpoet_popup" tabindex="-1">' +
|
popup: '<div id="mailpoet_popup" class="mailpoet_popup" tabindex="-1">' +
|
||||||
'<div class="mailpoet_popup_wrapper">' +
|
'<div class="mailpoet_popup_wrapper">' +
|
||||||
'<a href="javascript:;" id="mailpoet_modal_close"></a>' +
|
'<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close"></a>' +
|
||||||
'<div id="mailpoet_popup_title"><h2></h2></div>' +
|
'<div id="mailpoet_popup_title" class="mailpoet_popup_title"><h2></h2></div>' +
|
||||||
'<div class="mailpoet_popup_body clearfix"></div>' +
|
'<div class="mailpoet_popup_body clearfix"></div>' +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
'</div>',
|
'</div>',
|
||||||
loading: '<div id="mailpoet_loading" class="mailpoet_loading" style="display:none;">' +
|
loading: '<div id="mailpoet_loading" class="mailpoet_loading" style="display:none;">' +
|
||||||
'<div id="mailpoet_modal_loading_1" class="mailpoet_modal_loading"></div>' +
|
'<div id="mailpoet_modal_loading_1" class="mailpoet_modal_loading mailpoet_modal_loading_1"></div>' +
|
||||||
'<div id="mailpoet_modal_loading_2" class="mailpoet_modal_loading"></div>' +
|
'<div id="mailpoet_modal_loading_2" class="mailpoet_modal_loading mailpoet_modal_loading_2"></div>' +
|
||||||
'<div id="mailpoet_modal_loading_3" class="mailpoet_modal_loading"></div>' +
|
'<div id="mailpoet_modal_loading_3" class="mailpoet_modal_loading mailpoet_modal_loading_3"></div>' +
|
||||||
'</div>',
|
'</div>',
|
||||||
panel: '<div id="mailpoet_panel">' +
|
panel: '<div id="mailpoet_panel" class="mailpoet_panel">' +
|
||||||
'<a href="javascript:;" id="mailpoet_modal_close"></a>' +
|
'<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close"></a>' +
|
||||||
'<div class="mailpoet_panel_wrapper" tabindex="-1">' +
|
'<div class="mailpoet_panel_wrapper" tabindex="-1">' +
|
||||||
'<div class="mailpoet_panel_body clearfix"></div>' +
|
'<div class="mailpoet_panel_body clearfix"></div>' +
|
||||||
'</div>' +
|
'</div>' +
|
||||||
|
@@ -60,14 +60,14 @@ define(
|
|||||||
jQuery('.nav-tab-wrapper a').removeClass('nav-tab-active');
|
jQuery('.nav-tab-wrapper a').removeClass('nav-tab-active');
|
||||||
|
|
||||||
// hide panels & sections
|
// hide panels & sections
|
||||||
jQuery('.mailpoet_panel, .mailpoet_section').hide();
|
jQuery('.mailpoet_tab_panel, .mailpoet_section').hide();
|
||||||
|
|
||||||
// set active tab
|
// set active tab
|
||||||
jQuery('a.nav-tab[href="#' + tab + '"]').addClass('nav-tab-active').blur();
|
jQuery('a.nav-tab[href="#' + tab + '"]').addClass('nav-tab-active').blur();
|
||||||
|
|
||||||
// show selected panel
|
// show selected panel
|
||||||
if (jQuery('.mailpoet_panel[data-tab="' + tab + '"]').length > 0) {
|
if (jQuery('.mailpoet_tab_panel[data-tab="' + tab + '"]').length > 0) {
|
||||||
jQuery('.mailpoet_panel[data-tab="' + tab + '"]').show();
|
jQuery('.mailpoet_tab_panel[data-tab="' + tab + '"]').show();
|
||||||
}
|
}
|
||||||
|
|
||||||
// show "save settings" button
|
// show "save settings" button
|
||||||
|
@@ -23,27 +23,27 @@
|
|||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<!-- sending method -->
|
<!-- sending method -->
|
||||||
<div data-tab="mta" class="mailpoet_panel">
|
<div data-tab="mta" class="mailpoet_tab_panel">
|
||||||
<% include 'settings/mta.html' %>
|
<% include 'settings/mta.html' %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- basics -->
|
<!-- basics -->
|
||||||
<div data-tab="basics" class="mailpoet_panel">
|
<div data-tab="basics" class="mailpoet_tab_panel">
|
||||||
<% include 'settings/basics.html' %>
|
<% include 'settings/basics.html' %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- sign-up confirmation -->
|
<!-- sign-up confirmation -->
|
||||||
<div data-tab="signup" class="mailpoet_panel">
|
<div data-tab="signup" class="mailpoet_tab_panel">
|
||||||
<% include 'settings/signup.html' %>
|
<% include 'settings/signup.html' %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- advanced -->
|
<!-- advanced -->
|
||||||
<div data-tab="advanced" class="mailpoet_panel">
|
<div data-tab="advanced" class="mailpoet_tab_panel">
|
||||||
<% include 'settings/advanced.html' %>
|
<% include 'settings/advanced.html' %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- premium -->
|
<!-- premium -->
|
||||||
<div data-tab="premium" class="mailpoet_panel">
|
<div data-tab="premium" class="mailpoet_tab_panel">
|
||||||
<% include 'settings/premium.html' %>
|
<% include 'settings/premium.html' %>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user