From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 20 Apr 2022 10:19:29 -0500
Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Base para front
---
 .../odiparpack/app/styles/components/Messages.scss | 89 ++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 front/odiparpack/app/styles/components/Messages.scss

(limited to 'front/odiparpack/app/styles/components/Messages.scss')

diff --git a/front/odiparpack/app/styles/components/Messages.scss b/front/odiparpack/app/styles/components/Messages.scss
new file mode 100644
index 0000000..16b61ca
--- /dev/null
+++ b/front/odiparpack/app/styles/components/Messages.scss
@@ -0,0 +1,89 @@
+@import "../../styles/mixins";
+
+@mixin theme() {
+  width: 100%;
+  display: flex;
+  padding: 10px;
+  background: none;
+  border: none;
+}
+
+// Fill Background
+.bgInfo, div.bgInfo{
+  background: material-color('blue', '300');
+  button{
+    color: material-color('blue', '900');
+  }
+}
+.bgSuccess, div.bgSuccess{
+  background: material-color('green', '300');
+  button{
+    color: material-color('green', '900');
+  }
+}
+.bgWarning, div.bgWarning{
+  background: material-color('orange', '300');
+  button{
+    color: material-color('orange', '900');
+  }
+}
+.bgError, div.bgError{
+  background: material-color('red', '300');
+  button{
+    color: material-color('red', '900');
+  }
+}
+.bgDefault, div.bgDefault{
+  background: material-color('grey', '700')
+}
+
+// Fill Background Table Row
+table tr{
+  &.bgInfo{
+    background: material-color('blue', '50')
+  }
+  &.bgSuccess{
+    background: material-color('green', '50')
+  }
+  &.bgWarning{
+    background: material-color('orange', '50')
+  }
+  &.bgError{
+    background: material-color('red', '50')
+  }
+  &.bgDefault{
+    background: #FFF
+  }
+}
+
+// Icon Background
+.messageInfo{
+  @include theme();
+  .icon{
+    background: material-color('blue', '300')
+  }
+}
+.messageSuccess{
+  @include theme();
+  .icon{
+    background: material-color('green', '300')
+  }
+}
+.messageWarning{
+  @include theme();
+  .icon{
+    background: material-color('orange', '300')
+  }
+}
+.messageError{
+  @include theme();
+  .icon{
+    background: material-color('red', '300')
+  }
+}
+.messageDefault{
+  @include theme();
+  .icon{
+    background: material-color('grey', '300')
+  }
+}
-- 
cgit v1.2.3