diff --git a/assets/css/src/modal.styl b/assets/css/src/modal.styl index 5a07dea89c..9723b8d1cb 100644 --- a/assets/css/src/modal.styl +++ b/assets/css/src/modal.styl @@ -5,6 +5,7 @@ modal_popup_margin = 30px modal_popup_margin_mobile = 10px modal_popup_padding = 30px modal_popup_padding_mobile = 12px +modal_close_button_size = 23px overlay_background_color = rgba(0, 0, 0, 0.6) // hide scrollbars on background when a modal window opened @@ -72,6 +73,7 @@ body.mailpoet_modal_opened font-size: 23px; font-weight: 600; line-height: 29px; + margin: 0 (modal_close_button_size + 20) 0 0 .mailpoet_popup_body height: 92% @@ -128,24 +130,33 @@ body.mailpoet_modal_opened // modal button .mailpoet_modal_close - background: url(../img/modal_close_button.png) 7px 7px no-repeat - border: 0 cursor: pointer - height: 30px + position: absolute overflow: hidden padding: 0 - position: absolute - width: 30px z-index: 2 outline: 0 none + svg + opacity: .5 + stroke: #979797 + + &:hover + stroke: #636363 + .mailpoet_popup .mailpoet_modal_close - right: 0 - top: 0 + right: modal_popup_padding + top: modal_popup_padding + width: modal_close_button_size + height: modal_close_button_size + padding: 3px 0 .mailpoet_panel .mailpoet_modal_close - right: 10px - top: 7px + width: 16px + height: 16px + right: 20px + top: 20px + padding: 2px 0 .mailpoet_modal_close:focus outline: 0 none @@ -173,6 +184,13 @@ body.mailpoet_modal_opened .mailpoet_popup_wrapper padding: modal_popup_padding_mobile + .mailpoet_popup_title h2 + margin-right: modal_close_button_size + 10 + + .mailpoet_popup .mailpoet_modal_close + top: modal_popup_padding_mobile + right: modal_popup_padding_mobile + .mailpoet_modal_overlay.mailpoet_panel_overlay top: 46px diff --git a/assets/css/src/newsletter_editor/libraryOverrides.styl b/assets/css/src/newsletter_editor/libraryOverrides.styl index 922981af99..4f7780c8ba 100644 --- a/assets/css/src/newsletter_editor/libraryOverrides.styl +++ b/assets/css/src/newsletter_editor/libraryOverrides.styl @@ -122,6 +122,9 @@ body margin: 19px padding: 0 + .mailpoet_editor_settings h3 + margin-top: 0 + .mailpoet_panel_wrapper background-color: $primary-background-color border: 1px solid $content-border-color diff --git a/assets/img/modal_close_button.png b/assets/img/modal_close_button.png deleted file mode 100644 index 6a48f46908..0000000000 Binary files a/assets/img/modal_close_button.png and /dev/null differ diff --git a/assets/js/src/modal.js b/assets/js/src/modal.js index 18dbc415ec..1d15e42e2d 100644 --- a/assets/js/src/modal.js +++ b/assets/js/src/modal.js @@ -4,6 +4,11 @@ define('modal', ['mailpoet', 'jquery'], 'use strict'; var MailPoet = mp; + var closeModalImage = + '' + + '' + + ''; + /** ************************************************************************* MailPoet Modal: @@ -82,7 +87,7 @@ define('modal', ['mailpoet', 'jquery'], overlay: '', popup: '
' + '
' + - '' + + '' + closeModalImage + '' + '

' + '
' + '
' + @@ -93,7 +98,7 @@ define('modal', ['mailpoet', 'jquery'], '
' + '
', panel: '
' + - '' + + '' + closeModalImage + '' + '
' + '
' + '
' +