[explanation] Make the explanation thing more like a panel for warnin…

…gs, errors and info's

to.etc.domui/src/main/java/to/etc/domui/component/misc/Explanation.java

@@ -25,25 +25,33 @@
 package to.etc.domui.component.misc;
 
 import org.eclipse.jdt.annotation.Nullable;
+import to.etc.domui.dom.errors.MsgType;
 import to.etc.domui.dom.html.Div;
 import to.etc.domui.dom.html.Img;
 import to.etc.domui.dom.html.ImgAlign;
 import to.etc.domui.dom.html.XmlTextNode;
 
 public class Explanation extends Div {
+	private MsgType m_type;
+
 	private final XmlTextNode m_text = new XmlTextNode();
 
+	public Explanation(MsgType type, String text) {
+		setCssClass("ui-expl ui-" + type.name().toLowerCase());
+		m_type = type;
+		setText(text);
+	}
+
 	public Explanation() {
 	}
 
 	public Explanation(final String txt) {
-		setCssClass("ui-expl");
-		setText(txt);
+		this(MsgType.INFO, txt);
 	}
 
 	@Override
 	public void createContent() throws Exception {
-		Img i = new Img("THEME/big-info.png");
+		Img i = new Img("THEME/big-" + m_type.name().toLowerCase() + ".png");
 		i.setAlign(ImgAlign.LEFT);
 		add(0, i);
 		add(1, m_text);

to.etc.domui/src/main/resources/resources/themes/scss/winter/_misc.scss

@@ -28,9 +28,29 @@ div.ui-ipa img {
 	-moz-border-radius: 10px;
 	border-radius: 10px;
 	-webkit-border-radius: 10px;
-	background: linear-gradient(0deg, rgba(218,239,244,1) 0%, rgba(151,212,233,1) 100%);
+	//background: linear-gradient(0deg, rgba(218,239,244,1) 0%, rgba(151,212,233,1) 100%);
 	color: black;
 	max-width: 600px;
+
+	img {
+		padding: 4px;
+	}
+
+	&.ui-warning {
+		border-color: $warnings_border;
+		background: $warnings_transparent; /* Old browsers */
+		background: linear-gradient(to bottom, $warnings_transparent 0%, $white_transparent 100%);
+	}
+	&.ui-info {
+		border-color: $info_border;
+		background: $info_transparent; /* Old browsers */
+		background: linear-gradient(to bottom, $info_border 0%, $white_transparent 100%);
+	}
+	&.ui-error {
+		border-color: $errors_border;
+		background: $errors_transparent; /* Old browsers */
+		background: linear-gradient(to bottom, $errors_transparent 0%, $white_transparent 100%);
+	}
 }
 
 /* AsyncContainer */
@@ -126,7 +146,7 @@ table.ui-tbl-spaced td, tbody.ui-tbl-spaced td {
 }
 
 /**
-*DomUI components style options 
+*DomUI components style options
 **/
 
 /** Removing top or bottom margin */