1 files changed, 116 insertions, 0 deletions
diff --git a/public/src/app/rule-engine/action/action.component.scss b/public/src/app/rule-engine/action/action.component.scss
new file mode 100644
index 0000000..f903db4
--- /dev/null
+++ b/public/src/app/rule-engine/action/action.component.scss
@@ -0,0 +1,116 @@
+.conatiner {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+  margin: 10px 0;
+  .black {
+    color: black;
+  }
+  .highlight {
+    color: #009fdb;
+  }
+  .center-content {
+    display: flex;
+    width: 100%;
+    .action-info {
+      background: #f2f2f2;
+      padding: 6px 12px;
+      border-radius: 5px;
+      height: 32px;
+      margin: 0 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 142px;
+    }
+  }
+  .map-container {
+    padding-left: 115px;
+    .default {
+      display: flex;
+      width: 100%;
+      margin: 1rem 0;
+      min-height: 35px;
+      .input-wrapper {
+        width: 100%;
+        display: flex;
+        .input {
+          height: 20px;
+          padding: 5px;
+          margin-left: 10px;
+          width: 100%;
+          border: 1px solid #d2d2d2;
+        }
+      }
+    }
+    .grid-container {
+      padding-bottom: 10px;
+      .layout {
+        display: grid;
+        grid-template-columns: 1fr 1fr 30px;
+        grid-gap: 1px;
+        .title {
+          background-color: #f3f3f3;
+          height: 30px;
+          padding-left: 10px;
+          display: flex;
+          align-items: center;
+        }
+        .text-wrapper {
+          height: 30px;
+          border: 1px solid #f3f3f3;
+          .input {
+            width: 97%;
+            height: 100%;
+            border: none;
+            padding: 0 5px;
+          }
+        }
+        .btn-container {
+          height: 30px;
+          display: flex;
+          align-items: baseline;
+        }
+      }
+    }
+  }
+}
+
+.from {
+  display: flex;
+  flex-direction: column;
+  padding: 0 10px;
+  .from-conatiner {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    min-width: 350px;
+    .input-text {
+      border: none;
+      flex: 1;
+      width: 100%;
+      min-width: 250px;
+      padding: 5px 0 5px 5px;
+      margin: 0;
+    }
+  }
+  .label {
+    border: 1px solid #d2d2d2;
+    height: 30px;
+    justify-content: flex-start;
+    align-items: center;
+    display: flex;
+  }
+}
+
+.button-remove {
+  display: flex;
+  justify-content: center;
+  color: #a7a7a7;
+  &:hover {
+    color: #009fdb;
+  }
+}