diff --git a/my-workspace/projects/sae-lib/alert-box/alert-box.scss b/my-workspace/projects/sae-lib/alert-box/alert-box.scss index e155c01..0b8765a 100644 --- a/my-workspace/projects/sae-lib/alert-box/alert-box.scss +++ b/my-workspace/projects/sae-lib/alert-box/alert-box.scss @@ -7,6 +7,8 @@ border-radius: shadows.$spacing-1; margin-top: shadows.$spacing-1; margin-bottom: shadows.$spacing-1; + text-align: left; + margin-left: -100px; } diff --git a/my-workspace/projects/sae-lib/src/styles/_layout_demo.scss b/my-workspace/projects/sae-lib/src/styles/_layout_demo.scss index 8cece6b..3a355cd 100644 --- a/my-workspace/projects/sae-lib/src/styles/_layout_demo.scss +++ b/my-workspace/projects/sae-lib/src/styles/_layout_demo.scss @@ -3,7 +3,7 @@ #layout_demo { .app-theme-light & { - background: #fff; + background: variables.$white; } .app-theme-dark & { @@ -15,65 +15,70 @@ } } -.layout-split { - .navbar { - background: #1b1d27; - color: white; - height: 60px; +.navbar { + background: #1b1d27; + color: white; + height: 60px; + + .navbar-item { + padding-left: 24px; + padding-right: 24px; + + &:last-of-type { + padding-right: 32px; + } + + &.user-account-item { + + background: #525668; + color: white; + } + + &.is-active { + border-bottom: 2px solid #7FB8E7; + color: #7FB8E7; + } + + &:hover { + background: #3B3E4D; + border-bottom: 2px solid #7FB8E7; + } + } + + .navbar-brand { + margin-right: 35px; .navbar-item { - padding-left: 24px; - padding-right: 24px; + padding: 10px; + margin-left: 16px; + border-bottom: 2px solid transparent; - &:last-of-type { - padding-right: 32px; + i { + font-size: 24px; } - &.user-account-item { - - background: #525668; - color: white; - } - - &.is-active { - border-bottom: 2px solid #7FB8E7; - color: #7FB8E7; - } } - - .navbar-brand { - margin-right: 35px; - - .navbar-item { - padding: 10px; - margin-left: 16px; - border-bottom: 2px solid transparent; - - - i { - font-size: 24px; - } - - - } - } - - .label { - color: #FFF; - font-family: Barlow; - font-size: 18px; - font-style: normal; - font-weight: 500; - line-height: normal; - text-transform: uppercase; - margin-top: -0.25em; - } - - } + .label { + color: #FFF; + font-family: Barlow; + font-size: 18px; + font-style: normal; + font-weight: 500; + line-height: normal; + text-transform: uppercase; + margin-top: -0.25em; + } + + +} + +.layout-split { + + .navigation { background: variables.$bg-color-nav; color: variables.$neutral-white; @@ -308,6 +313,10 @@ min-width: 900px; + .is-small-right & { + min-width: 1200px; + } + } .chatbot-container-box { @@ -372,7 +381,8 @@ } .main-conversation-container { - //margin-right: 16px; + + height: 100vh; padding-top: 88px; border-radius: 10px; background: variables.$bg-color-chat; @@ -484,8 +494,9 @@ } .conversation-bottom { - padding: 10px 200px; - margin-top: -100px; + padding: 10px 60px; + //margin-top: -100px; + margin-top: -43px; } .bottom-warning-container { diff --git a/my-workspace/projects/sae-lib/src/styles/_variables.scss b/my-workspace/projects/sae-lib/src/styles/_variables.scss index e2bc69e..65f1975 100644 --- a/my-workspace/projects/sae-lib/src/styles/_variables.scss +++ b/my-workspace/projects/sae-lib/src/styles/_variables.scss @@ -23,6 +23,7 @@ $secondary-color-200: #7AC0BE; $neutral-color: #AAA; $neutral-blue: #1b1d27; $neutral-white: #fff; +$white: #fff; $error-color: #E84F4F; $danger-color: #A31B1B; diff --git a/old-sae-airwatch/src/app/chatbot/chatbot.html b/old-sae-airwatch/src/app/chatbot/chatbot.html index 7dcc3c2..22a988c 100644 --- a/old-sae-airwatch/src/app/chatbot/chatbot.html +++ b/old-sae-airwatch/src/app/chatbot/chatbot.html @@ -60,15 +60,15 @@ - + Ask question - + Knowledge base - + Quick start
diff --git a/old-sae-airwatch/src/app/chatbot/chatbot.scss b/old-sae-airwatch/src/app/chatbot/chatbot.scss index 6e1fc26..2ac7ee2 100644 --- a/old-sae-airwatch/src/app/chatbot/chatbot.scss +++ b/old-sae-airwatch/src/app/chatbot/chatbot.scss @@ -74,6 +74,10 @@ font-weight: 500; line-height: 100px; /* 500% */ + &:hover { + background: #005AA2; + color: white; + } } .aside-toggle-button { diff --git a/old-sae-airwatch/src/app/chatbot/prompt-input/prompt-input.html b/old-sae-airwatch/src/app/chatbot/prompt-input/prompt-input.html index 2cd329d..d058c92 100644 --- a/old-sae-airwatch/src/app/chatbot/prompt-input/prompt-input.html +++ b/old-sae-airwatch/src/app/chatbot/prompt-input/prompt-input.html @@ -1,22 +1,16 @@
-
- -
-
- -
- -
-
- - - -
+
+
+ + + + +
diff --git a/old-sae-airwatch/src/app/chatbot/prompt-input/prompt-input.scss b/old-sae-airwatch/src/app/chatbot/prompt-input/prompt-input.scss index cbeee03..2231023 100644 --- a/old-sae-airwatch/src/app/chatbot/prompt-input/prompt-input.scss +++ b/old-sae-airwatch/src/app/chatbot/prompt-input/prompt-input.scss @@ -2,11 +2,10 @@ .prompt-input { margin: 20px auto; - max-width: 914px; background: variables.$neutral-white; border-radius: 0.5rem; padding: 10px 10px; - box-shadow: 0 5px 10px #ededed; + box-shadow: 0 5px 10px variables.$shadow-color; .column { @@ -14,13 +13,11 @@ } input { - width: 100%; + width: 668px; border: 0; padding: 10px; @extend .is-shadowed !optional; float: left; - margin-left: 50px; - margin-top: -40px; &:focus { outline: none; @@ -28,24 +25,29 @@ } button { - background: white; + background: variables.$neutral-white; padding: 10px; border: 1px solid transparent; cursor: pointer; border-radius: 10px; &:hover { - background: grey; - border: 1px solid black; + color: variables.$main-color-active; + fill: variables.$main-color-active; + background: 1px solid variables.$bg-color-button; } + .submit { + float: right; + display: inline-block; + } } .magic { padding: 10px; border: 1px solid transparent; border-radius: 10px; - background: #f5f5f5; + background: variables.$bg-color-chat; width: 40px; height: 40px; float: left;