canvasxpress 52.2.2 → 52.3.3

package/package.json

@@ -3,7 +3,7 @@
   "main": "src/canvasXpress.js",
   "style": "src/canvasXpress.css",
   "title": "CanvasXpress",
-  "version": "52.2.2",
+  "version": "52.3.3",
   "license": {
     "type": "Dual licensing",
     "url": "https://www.canvasxpress.org/docs/license.html"

package/src/canvasXpress.css

@@ -62,8 +62,10 @@
   --cx-border-transparent: var(--cx-border-width) var(--cx-border-style) var(--cx-color-transparent);
   /* Font */
   --cx-font-size: 12px;
+  --cx-large-font-size: 14px;
   --cx-font-color: var(--cx-color-ui-font);
   --cx-font: normal var(--cx-font-size) var(--cx-font-family);
+  --cx-large-font: normal var(--cx-large-font-size) var(--cx-font-family);
   --cx-font-bold: bold var(--cx-font-size) var(--cx-font-family);
   --cx-font-italic: italic var(--cx-font-size) var(--cx-font-family);
   /* Background */
@@ -347,61 +349,63 @@ pre.cX-code-content code::before {
  * Chat Interface *
  ******************/
 
-svg.cX-chat-thumbs {
-  background: var(--cx-color-transparent) !important;
-  border: none !important;
-  box-shadow: 0 0 0px var(--cx-color-transparent) !important;
-  cursor: default;
-  float: left;
-  margin: 5px 0px 0px 20px !important;
+div.cX-chat {
+  border: none;
+  background-color: var(--cx-color-transparent);
+  max-width: 600px;
+  min-height: 100px;
+  margin: 10px auto 0 auto;
 }
 
-div.cX-chat {
-  border: var(--cx-border);
-  border-radius: 5px;
-  background-color: var(--cx-background-widgets-color);
-  cursor: move;
-  left: 20px;
-  top: 60px;
-  width: 500px;
-  height: 270px;
+div.cX-chat-container {
+  border: none;
+  border-radius: 10px;
+  background-color: var(--cx-color-extra-light-gray);
   color: var(--cx-font-color);
-  font: var(--cx-font);
-  position: absolute;
-  white-space: nowrap;
+  font: var(--cx-large-font);
+  display: flex;
+  align-items: center;
 }
 
-div.cX-chat-toolbar {
+div.cX-chat-container-text {
   float: left;
-  position: relative;
-  height: 44px;
-  width: 100%;
-  border-bottom: 1px solid var(--cx-border) !important;
-  background: var(--cx-color-widgets);
+  border: none;
+  background-color: var(--cx-color-transparent);
+  min-height: 50px;
 }
 
-div.cX-chat-container {
-  float: left;
-  position: relative;
+div.cX-chat-question {
+  border: none;
+  background-color: var(--cx-color-extra-light-gray);
   width: 100%;
-  height: 224px;
+  margin: 0;
+  align-self: stretch;
+  display: inline;;
 }
 
-textarea.cX-chat-question {
-  float: left;
-  position: relative;
-  border-radius: 5px;
-  padding: 5px;
-  resize: none;
-  width: 469px;
-  height: 150px;
-  margin: 15px;
+[contenteditable] {
+  outline: 0px solid transparent;
 }
 
-input.cX-chat-question {
-  padding: 5px;
+div.cX-chat-container-icon {
   float: right;
-  margin: 0 15px 15px 15px;
+  border: none;
+  background-color: var(--cx-color-transparent);
+}
+
+div.cX-chat-container-thumbs {
+  float: left;
+  border: none;
+  background-color: var(--cx-color-transparent);
+  margin: 0;
+}
+
+svg.cX-chat-thumbs {
+  background: var(--cx-color-transparent) !important;
+  border: none !important;
+  box-shadow: 0 0 0px var(--cx-color-transparent) !important;
+  cursor: default;
+  float: left;
 }
 
 /***************
@@ -2191,7 +2195,6 @@ span.CanvasXpressToggle {
   margin-left: 5px;
   margin-right: 5px;
   position: relative;
-  top: -4px;
 }
 
 /****************/
@@ -3696,6 +3699,21 @@ div.CanvasXpressWrapper {
   transition: all 300ms ease-in-out;
 }
 
+/* Hide Efect */
+
+.appear {
+  transition: all 1s linear;
+  opacity: 1;
+}
+
+.dissapear {
+  display: none;
+}
+
+.dissapearHidden {
+  transition: all 1s linear;
+  opacity: 0;
+}
 
 /* Magic Effects */
 
@@ -3713,6 +3731,56 @@ Copyright (c) 2018 Christian Pucci
   animation-fill-mode: both;
 }
 
+.showIn {
+  -webkit-animation-name: showIn;
+  animation-name: showIn;
+}
+
+@-webkit-keyframes showIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes showIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.showOut {
+  -webkit-animation-name: showOut;
+  animation-name: showOut;
+}
+
+@-webkit-keyframes showOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes showOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
 .puffIn {
   -webkit-animation-name: puffIn;
   animation-name: puffIn;