odaptos_design_system 2.0.13 → 2.0.15

package/src/Molecules/Interviews/Chat.modules.scss

@@ -1,248 +1,250 @@
-.chatContainer {
-  display: flex;
-  min-width: 25rem;
-  height: 100%;
-  padding: 1rem;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.5rem;
-  border-radius: 0.5rem;
-  background: #fff;
-
-  .scrolling_content {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    max-width: 100%;
-    width: 100%;
-    overflow: hidden;
-    height: 100%;
-
-    .tasks_container {
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-      max-width: 100%;
-      width: 100%;
-      height: 100%;
-      overflow-y: scroll;
-      padding-bottom: 14rem;
-
-      .message_chatbot {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        gap: 0.25rem;
-      }
-
-      .nm_message_container {
-        background-color: #E5F1FF;
-        display: flex;
-        flex-direction: column;
-        padding: 0.25rem 0.5rem 0.5rem 0.5rem;
-        gap: 0.25rem;
-        border-radius: 0.5rem;
-        border: 1px solid #66ADFF;
-
-        .nm_button {
-        width: 100%;
-        }
-      }
-
-
-      .user_message_container {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-end;
-        gap: 0.5rem;
-        width: 100%;
-        animation: floatup 0.5s forwards;
-        margin: 0.5rem 0;
-
-        .message {
-          p {
-            margin-left: auto;
-          }
-        }
-
-        @keyframes floatup {
-          from {
-            transform: translateY(0.875rem);
-            opacity: 0;
-          }
-
-          to {
-            transform: translateY(0px);
-            opacity: 1;
-          }
-        }
-      }
-
-      .not_user_text_message {
-        display: flex;
-        padding: 1rem;
-        flex-direction: column;
-        align-items: flex-end;
-        width: fit-content;
-        max-width: 85%;
-        gap: 0.5rem;
-        white-space: break-spaces;
-        border-radius: 0rem 0.5rem 0.5rem 0.5rem;
-        border: 1px solid #d5d5d6;
-        background: #fafafa;
-
-        .user_text {
-          color: var(--Color-Neutral-Dark-Shades-950, #26292e);
-          font-family: 'OpenSans';
-          font-size: 0.875rem;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 1.225rem;
-          margin: 0;
-        }
-
-        .blue {
-          color: #004799;
-        }
-      }
-
-      .user_text_message {
-        display: flex;
-        padding: 1rem;
-        flex-direction: column;
-        align-items: flex-end;
-        width: fit-content;
-        margin-left: auto;
-        gap: 0.5rem;
-        white-space: break-spaces;
-        border-radius: 0.5rem 0rem 0.5rem 0.5rem;
-        border: 1px solid var(--color-primary-200, #99c9ff);
-        background: var(--color-primary-100, #e5f1ff);
-        max-width: 85%;
-
-        .user_text {
-          color: var(--Color-Neutral-Dark-Shades-950, #26292e);
-          font-family: 'OpenSans';
-          font-size: 0.875rem;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 1.225rem;
-          margin: 0;
-        }
-
-        .blue {
-          color: #004799;
-        }
-      }
-
-      .user_text_message_username_left {
-        display: flex;
-        width: fit-content;
-        margin-left: auto;
-      }
-
-      .user_text_message_username {
-        display: flex;
-        width: fit-content;
-      }
-
-      .user_indicator {
-        padding: 0.625rem 0.5625rem;
-        border-radius: 0.5rem 0.5rem 0.5rem 0rem;
-        height: 2.75rem;
-        width: 2.75rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: var(--color-gradients-003,
-            linear-gradient(135deg, #07f 0%, #9024f6 100%));
-
-        p {
-          padding: 0;
-        }
-      }
-
-      .message_container_chatbot {
-        display: flex;
-        flex-direction: row;
-        gap: 0.5rem;
-        width: 100%;
-        animation: floatup 0.5s forwards;
-        margin: auto 0 0.5rem 0;
-
-        @keyframes floatup {
-          from {
-            transform: translateY(0.875rem);
-            opacity: 0;
-          }
-
-          to {
-            transform: translateY(0px);
-            opacity: 1;
-          }
-        }
-      }
-
-      .bot_indicator {
-        padding: 0.625rem 0.5625rem;
-        border-radius: 0.5rem 0.5rem 0rem 0.5rem;
-        height: 2.75rem;
-        width: 2.75rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: var(--color-gradients-003,
-            linear-gradient(135deg, #07f 0%, #9024f6 100%));
-
-        p {
-          padding: 0;
-        }
-      }
-
-      .message_chatbot {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        gap: 0.25rem;
-
-        .user_text {
-          color: var(--Color-Neutral-Dark-Shades-950, #26292e);
-          font-family: 'OpenSans';
-          font-size: 0.875rem;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 1.225rem;
-          margin: 0;
-        }
-      }
-
-      .text_message {
-        position: relative;
-        display: flex;
-        padding: 1rem;
-        flex-direction: column;
-        align-items: flex-start;
-        width: fit-content;
-        max-width: 100%;
-        gap: 0.5rem;
-        white-space: break-spaces;
-        border-radius: 0rem 0.5rem 0.5rem 0.5rem;
-        border: 1px solid var(--color-neutral-clear-shades-200, #e1e1e2);
-        background: var(--color-neutral-basics-white, #fff);
-      }
-    }
-  }
-}
-
-.no_scrollbar {
-
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  -ms-overflow-style: none;
-  /* IE and Edge */
-  scrollbar-width: none;
-  /* Firefox */
-}
+.chatContainer {
+  display: flex;
+  min-width: 25rem;
+  height: 100%;
+  padding: 1rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  border-radius: 0.5rem;
+  background: #fff;
+
+  .scrolling_content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    max-width: 100%;
+    width: 100%;
+    overflow: hidden;
+    height: 100%;
+
+    .tasks_container {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      max-width: 100%;
+      width: 100%;
+      height: 100%;
+      overflow-y: scroll;
+      padding-bottom: 14rem;
+
+      .message_chatbot {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        gap: 0.25rem;
+      }
+
+      .nm_message_container {
+        background-color: #e5f1ff;
+        display: flex;
+        flex-direction: column;
+        padding: 0.25rem 0.5rem 0.5rem 0.5rem;
+        gap: 0.25rem;
+        border-radius: 0.5rem;
+        border: 1px solid #66adff;
+
+        .nm_button {
+          width: 100%;
+        }
+      }
+
+      .user_message_container {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        gap: 0.5rem;
+        width: 100%;
+        animation: floatup 0.5s forwards;
+        margin: 0.5rem 0;
+
+        .message {
+          p {
+            margin-left: auto;
+          }
+        }
+
+        @keyframes floatup {
+          from {
+            transform: translateY(0.875rem);
+            opacity: 0;
+          }
+
+          to {
+            transform: translateY(0px);
+            opacity: 1;
+          }
+        }
+      }
+
+      .not_user_text_message {
+        display: flex;
+        padding: 1rem;
+        flex-direction: column;
+        align-items: flex-end;
+        width: fit-content;
+        max-width: 85%;
+        gap: 0.5rem;
+        white-space: break-spaces;
+        border-radius: 0rem 0.5rem 0.5rem 0.5rem;
+        border: 1px solid #d5d5d6;
+        background: #fafafa;
+
+        .user_text {
+          color: var(--Color-Neutral-Dark-Shades-950, #26292e);
+          font-family: 'Open Sans';
+          font-size: 0.875rem;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 1.225rem;
+          margin: 0;
+        }
+
+        .blue {
+          color: #004799;
+        }
+      }
+
+      .user_text_message {
+        display: flex;
+        padding: 1rem;
+        flex-direction: column;
+        align-items: flex-end;
+        width: fit-content;
+        margin-left: auto;
+        gap: 0.5rem;
+        white-space: break-spaces;
+        border-radius: 0.5rem 0rem 0.5rem 0.5rem;
+        border: 1px solid var(--color-primary-200, #99c9ff);
+        background: var(--color-primary-100, #e5f1ff);
+        max-width: 85%;
+
+        .user_text {
+          color: var(--Color-Neutral-Dark-Shades-950, #26292e);
+          font-family: 'Open Sans';
+          font-size: 0.875rem;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 1.225rem;
+          margin: 0;
+        }
+
+        .blue {
+          color: #004799;
+        }
+      }
+
+      .user_text_message_username_left {
+        display: flex;
+        width: fit-content;
+        margin-left: auto;
+      }
+
+      .user_text_message_username {
+        display: flex;
+        width: fit-content;
+      }
+
+      .user_indicator {
+        padding: 0.625rem 0.5625rem;
+        border-radius: 0.5rem 0.5rem 0.5rem 0rem;
+        height: 2.75rem;
+        width: 2.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(
+          --color-gradients-003,
+          linear-gradient(135deg, #07f 0%, #9024f6 100%)
+        );
+
+        p {
+          padding: 0;
+        }
+      }
+
+      .message_container_chatbot {
+        display: flex;
+        flex-direction: row;
+        gap: 0.5rem;
+        width: 100%;
+        animation: floatup 0.5s forwards;
+        margin: auto 0 0.5rem 0;
+
+        @keyframes floatup {
+          from {
+            transform: translateY(0.875rem);
+            opacity: 0;
+          }
+
+          to {
+            transform: translateY(0px);
+            opacity: 1;
+          }
+        }
+      }
+
+      .bot_indicator {
+        padding: 0.625rem 0.5625rem;
+        border-radius: 0.5rem 0.5rem 0rem 0.5rem;
+        height: 2.75rem;
+        width: 2.75rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(
+          --color-gradients-003,
+          linear-gradient(135deg, #07f 0%, #9024f6 100%)
+        );
+
+        p {
+          padding: 0;
+        }
+      }
+
+      .message_chatbot {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        gap: 0.25rem;
+
+        .user_text {
+          color: var(--Color-Neutral-Dark-Shades-950, #26292e);
+          font-family: 'Open Sans';
+          font-size: 0.875rem;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 1.225rem;
+          margin: 0;
+        }
+      }
+
+      .text_message {
+        position: relative;
+        display: flex;
+        padding: 1rem;
+        flex-direction: column;
+        align-items: flex-start;
+        width: fit-content;
+        max-width: 100%;
+        gap: 0.5rem;
+        white-space: break-spaces;
+        border-radius: 0rem 0.5rem 0.5rem 0.5rem;
+        border: 1px solid var(--color-neutral-clear-shades-200, #e1e1e2);
+        background: var(--color-neutral-basics-white, #fff);
+      }
+    }
+  }
+}
+
+.no_scrollbar {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}