diff --git a/app/assets/stylesheets/admin/components/messages.scss b/app/assets/stylesheets/admin/components/messages.scss index b7950db01f..18bf5b5a66 100644 --- a/app/assets/stylesheets/admin/components/messages.scss +++ b/app/assets/stylesheets/admin/components/messages.scss @@ -27,24 +27,31 @@ } } -.flash { +.flash-container { position: fixed; top: 0; left: 0; width: 100%; - padding: 16px; - text-align: center; z-index: 1000; - font-size: 120%; - color: $color-1; - font-weight: 600; - &.notice { background-color: rgba($color-notice, 0.8) } - &.success { background-color: rgba($color-success, 0.8) } - &.error { background-color: rgba($color-error, 0.8) } + .flash { + padding: 18px; + text-align: center; + font-size: 120%; + color: $color-1; + font-weight: 600; + + &.notice { background-color: rgba($color-notice, 0.8) } + &.success { background-color: rgba($color-success, 0.8) } + &.error { background-color: rgba($color-error, 0.8) } + + // Adjust heights to fit main layout dimension (header, navbar...) + &:nth-child(2) { padding: 24px; } + &:nth-child(3) { padding: 20px; } + } } -.notice { +.notice:not(.flash) { padding: 1rem; margin-bottom: 1.5rem; background-color: $spree-light-blue; diff --git a/app/views/spree/layouts/_admin_body.html.haml b/app/views/spree/layouts/_admin_body.html.haml index 8061168cd1..bc380b803c 100644 --- a/app/views/spree/layouts/_admin_body.html.haml +++ b/app/views/spree/layouts/_admin_body.html.haml @@ -3,12 +3,13 @@ = yield :stripe_js #wrapper{ data: { hook: '' } } - - if flash[:error] - .flash.error= flash[:error] - - if notice - .flash.notice= notice - - if flash[:success] - .flash.success= flash[:success] + .flash-container + - if flash[:error] + .flash.error= flash[:error] + - if notice + .flash.notice= notice + - if flash[:success] + .flash.success= flash[:success] = render partial: "spree/layouts/admin/progress_spinner"