[4.0] Move system alerts inline (#28824)

administrator/templates/atum/index.php

@@ -156,6 +156,7 @@ HTMLHelper::_('atum.rootcolors', $this->params);
 			<div class="row">
 				<div class="col-md-12">
 					<main>
+						<jdoc:include type="message" />
 						<jdoc:include type="component" />
 					</main>
 				</div>
@@ -165,10 +166,6 @@ HTMLHelper::_('atum.rootcolors', $this->params);
 			</div>
 			<?php // End Content ?>
 		</section>
-
-		<div class="notify-alerts">
-			<jdoc:include type="message" />
-		</div>
 	</div>
 </div>
 <jdoc:include type="modules" name="debug" style="none" />

administrator/templates/atum/scss/blocks/_alerts.scss

@@ -32,19 +32,9 @@
 }
 
 fieldset .alert {
-    &.alert-info {
-      margin: -1rem 0 1rem;
-    }
-}
-
-// Contains joomla-alert webcomponent with its own css
-.notify-alerts {
-  position: fixed;
-  top: 15px;
-  left: 50%;
-  z-index: $zindex-alerts;
-  transition: all .5s ease;
-  transform: translateX(-50%);
+  &.alert-info {
+    margin: -1rem 0 1rem;
+  }
 }
 
 .alert-heading {
@@ -52,7 +42,6 @@ fieldset .alert {
 }
 
 @keyframes fadeIn {
-
   from {
     opacity: 0;
     transform: translateY(-15px);

administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss

@@ -1,72 +0,0 @@
-@import "../../variables";
-@import "../../../../../../node_modules/joomla-ui-custom-elements/dist/css/joomla-alert";
-
-// The following is a restyle for the system alerts
-
-#system-message-container joomla-alert {
-  position: relative;
-  display: block;
-  width: 50vw;
-  min-width: 16rem;
-  padding: 0;
-  margin-bottom: 1rem;
-  color: var(--atum-text-dark);
-  background-color: var(--white);
-  border: 1px solid var(--alert-accent-color, transparent);
-  border-radius: 0;
-  transition: opacity .15s linear;
-
-  .alert-heading {
-    display: block;
-    padding: 1rem;
-    color: rgba(255, 255, 255, .95);
-    background: var(--alert-accent-color, transparent);
-  }
-
-  .alert-link {
-    color: var(--success, inherit);
-  }
-
-  &[type="success"] {
-    --alert-accent-color: var(--success);
-  }
-
-  &[type="info"] {
-    --alert-accent-color: var(--info);
-  }
-
-  &[type="warning"] {
-    --alert-accent-color: var(--warning);
-  }
-
-  &[type="danger"] {
-    --alert-accent-color: var(--danger);
-  }
-
-  .joomla-alert--close,
-  .joomla-alert-button--close {
-    position: absolute;
-    top: .7rem;
-    right: 1rem;
-    font-size: 2rem;
-    color: var(--white);
-    background: none;
-    border: 0;
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-      cursor: pointer;
-      opacity: .75;
-    }
-
-    [dir=rtl] & {
-      right: auto;
-      left: 0;
-    }
-  }
-
-  div {
-    padding: 1rem;
-  }
-}

build/build-modules-js/compilecss.es6.js

@@ -52,7 +52,6 @@ module.exports.compile = (options, path) => {
           `${RootPath}/administrator/templates/atum/scss/vendor/awesomplete/awesomplete.scss`,
           `${RootPath}/administrator/templates/atum/scss/vendor/choicesjs/choices.scss`,
           `${RootPath}/administrator/templates/atum/scss/vendor/minicolors/minicolors.scss`,
-          `${RootPath}/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss`,
           `${RootPath}/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss`,
           `${RootPath}/administrator/templates/atum/scss/vendor/fontawesome-free/fontawesome.scss`,
           `${RootPath}/installation/template/scss/template.scss`,