From 484e0f5287bbd52700052d9889f198bd510fc27f Mon Sep 17 00:00:00 2001 From: Oded Shopen Date: Wed, 11 Sep 2024 15:34:26 +0300 Subject: [PATCH] moved chatbot scss to main petclinic.scss --- src/main/scss/chatbot.scss | 88 ---------------------------------- src/main/scss/petclinic.scss | 91 +++++++++++++++++++++++++++++++++++- 2 files changed, 90 insertions(+), 89 deletions(-) delete mode 100644 src/main/scss/chatbot.scss diff --git a/src/main/scss/chatbot.scss b/src/main/scss/chatbot.scss deleted file mode 100644 index fbce21b19..000000000 --- a/src/main/scss/chatbot.scss +++ /dev/null @@ -1,88 +0,0 @@ -.chatbox { - position: fixed; - bottom: 0; - right: 0; - width: 300px; - border-radius: 10px 10px 0 0; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - font-family: Arial, sans-serif; - background-color: #f0f0f0; - overflow: hidden; - - &.minimized { - height: 40px; - } - - &-header { - background-color: $spring-green; - color: white; - padding: 10px; - cursor: pointer; - font-weight: bold; - text-align: center; - } - - &-content { - height: 400px; - display: flex; - flex-direction: column; - justify-content: space-between; - background-color: white; - transition: height 0.3s ease; - } - - &-messages { - padding: 10px; - overflow-y: auto; - height: 90%; - display: flex; - flex-direction: column; - gap: 10px; - - .chat-bubble { - padding: 10px; - border-radius: 15px; - max-width: 70%; - word-wrap: break-word; - - &.user { - background-color: $spring-brown; - color: white; - align-self: flex-end; - } - - &.bot { - background-color: $spring-grey; - color: black; - align-self: flex-start; - } - } - } - - &-footer { - display: flex; - padding: 10px; - background-color: $spring-light-grey; - - input { - flex: 1; - padding: 10px; - border-radius: 5px; - border: 1px solid $spring-brown; - } - - button { - margin-left: 10px; - padding: 10px 20px; - background-color: $spring-green; - color: white; - border: none; - border-radius: 5px; - cursor: pointer; - - &:hover { - background-color: darken($spring-green, 10%); - } - } - } -} diff --git a/src/main/scss/petclinic.scss b/src/main/scss/petclinic.scss index 527719487..57271949c 100644 --- a/src/main/scss/petclinic.scss +++ b/src/main/scss/petclinic.scss @@ -209,7 +209,96 @@ hr { border-top: 1px dotted $spring-brown; } +.chatbox { + position: fixed; + bottom: 0; + right: 0; + width: 300px; + border-radius: 10px 10px 0 0; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + font-family: Arial, sans-serif; + background-color: #f0f0f0; + overflow: hidden; + + &.minimized { + height: 40px; + } + + &-header { + background-color: $spring-green; + color: white; + padding: 10px; + cursor: pointer; + font-weight: bold; + text-align: center; + } + + &-content { + height: 400px; + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: white; + transition: height 0.3s ease; + } + + &-messages { + padding: 10px; + overflow-y: auto; + height: 90%; + display: flex; + flex-direction: column; + gap: 10px; + + .chat-bubble { + padding: 10px; + border-radius: 15px; + max-width: 70%; + word-wrap: break-word; + + &.user { + background-color: $spring-brown; + color: white; + align-self: flex-end; + } + + &.bot { + background-color: $spring-grey; + color: black; + align-self: flex-start; + } + } + } + + &-footer { + display: flex; + padding: 10px; + background-color: $spring-light-grey; + + input { + flex: 1; + padding: 10px; + border-radius: 5px; + border: 1px solid $spring-brown; + } + + button { + margin-left: 10px; + padding: 10px 20px; + background-color: $spring-green; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + + &:hover { + background-color: darken($spring-green, 10%); + } + } + } +} + + @import "typography.scss"; @import "header.scss"; @import "responsive.scss"; -@import "chatbot.scss"; \ No newline at end of file