@seamly/web-ui 19.1.3 → 20.0.0-beta.1

package/src/stylesheets/5-components/_options.scss

@@ -1,13 +1,10 @@
-// ##### OPTIONS #####
-// ===================
-
-// BASE
-// ----
 .#{$n}-app__options {
   display: flex;
   position: relative;
+  flex: 0;
   align-items: center;
   justify-content: flex-end;
+  width: 100%;
   padding: $spacer * 0.25;
   border-top: $thin-border solid $grey-b;
 }
@@ -25,7 +22,7 @@
   align-items: center;
   justify-content: flex-end;
   padding: $spacer * 0.25 $spacer * 0.5;
-  border-radius: $buttons-border-radius;
+  border-radius: $borderradius-small;
 }
 
 &.#{$n}-app--collapsed .#{$n}-app__options-button {
@@ -33,9 +30,9 @@
 }
 
 .#{$n}-app__options__button .#{$n}-icon {
-  flex: 0 0 $spacer * 0.75;
-  width: $spacer * 0.75;
-  height: $spacer * 0.75;
+  flex: 0 0 $iconsize-small;
+  width: $iconsize-small;
+  height: $iconsize-small;
   margin-right: $spacer * 0.25;
 }
 
@@ -44,7 +41,7 @@
   height: 100%;
 }
 
-.#{$n}-app__options__button.#{$n}-button--disabled .#{$n}-icon path {
+.#{$n}-app__options__button .#{$n}-icon path {
   fill: currentColor;
 }
 
@@ -66,7 +63,7 @@
   border-radius: $borderradius-small;
   opacity: 0;
   background-color: $white;
-  box-shadow: $boxshadow-ultralight;
+  box-shadow: $boxshadow-soft;
   list-style: none;
 }
 
@@ -99,22 +96,9 @@
   width: 100%;
   min-width: $spacer * 10;
   border-radius: $borderradius-small;
-
-  &:hover {
-    background-color: $brand2;
-    color: $white;
-  }
-}
-
-.#{$n}-options__menu .#{$n}-button.#{$n}-button--disabled {
-  &:hover {
-    background-color: initial;
-    color: $disabled;
-  }
 }
 
 // OPTIONS DIALOG
-// --------------
 .#{$n}-options {
   display: none;
   position: absolute;
@@ -132,7 +116,7 @@
   border-radius: $borderradius-small;
   opacity: 0;
   background-color: $white;
-  box-shadow: $boxshadow-ultralight;
+  box-shadow: $boxshadow-soft;
   list-style: none;
 }
 
@@ -170,7 +154,7 @@
   display: flex;
   flex: 0 0 auto;
   align-items: center;
-  width: calc(100% - #{$badge-touch-size} - (#{$spacer} * 0.5));
+  width: calc(100% - #{$buttonsize} - (#{$spacer} * 0.5));
   margin: 0;
   padding: $spacer $spacer $spacer * 0.5;
   color: $brand2;
@@ -179,27 +163,31 @@
 }
 
 .#{$n}-options__close {
+  display: flex;
   position: absolute;
   top: $spacer * 0.5;
   right: $spacer * 0.5;
-  width: $badge-touch-size;
-  height: $badge-touch-size;
+  align-items: center;
+  justify-content: center;
+  width: $buttonsize;
+  height: $buttonsize;
+  color: $interaction;
   font-size: 0;
 }
 
 .#{$n}-options__close .#{$n}-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
+  flex: 0 0 $iconsize-small;
+  width: $iconsize-small;
+  height: $iconsize-small;
 }
 
-.#{$n}-options__body form {
-  display: flex;
+.#{$n}-options__close .#{$n}-icon path {
+  fill: currentColor;
+}
+
+.#{$n}-options__form {
   flex: 1 1 auto;
   flex-direction: column;
-  width: 100%;
 }
 
 .#{$n}-options__wrapper {
@@ -211,7 +199,7 @@
   padding: 0 $spacer;
   overflow: auto;
 
-  // FF AND IE11 FIX
+  // FF FIX
   &:last-child::after {
     content: '';
     display: block;
@@ -241,20 +229,17 @@
 
 .#{$n}-transcript__input {
   width: 100%;
+  min-height: $buttonsize;
   padding: $spacer * 0.5;
   transition: padding $transition;
   border: $thin-border solid $grey-b;
   border-radius: $borderradius-small;
-  font-size: $fontsize-small;
+  font-size: $fontsize-default;
 
   &:focus {
     border: $thin-border solid $grey-b;
   }
 
-  @supports (-webkit-overflow-scrolling: touch) {
-    font-size: 16px; // KEEP THIS FIXED
-  }
-
   @include stylePlaceholder() {
     overflow: visible;
     color: $grey-c;

package/src/stylesheets/5-components/_pre-chat-messages.scss

@@ -0,0 +1,30 @@
+.#{$n}-pre-chat-messages {
+  @include unList;
+
+  margin: 0;
+  padding: 0;
+}
+
+.#{$n}-pre-chat-messages--window {
+  position: fixed;
+  z-index: $z-index;
+  right: $spacer;
+  bottom: $spacer + $avatarsize-large;
+  max-width: calc(100% - #{$spacer * 2});
+
+  @include media('>phablet-l') {
+    max-width: $spacer * 14;
+  }
+}
+
+.#{$n}-pre-chat-messages__message {
+  margin-bottom: $spacer * 0.5;
+}
+
+.#{$n}-pre-chat-messages--window .#{$n}-message__body {
+  padding: $spacer * 0.5 $spacer * 0.75;
+  border: $thin-border solid $white;
+  border-radius: $borderradius;
+  background-color: $threadlist-agent-text-bgcolor;
+  font-size: $fontsize-medium;
+}

package/src/stylesheets/5-components/_prompt.scss

@@ -1,8 +1,3 @@
-// ##### PROMPT #####
-// ========================
-
-// BASE
-// ----
 .#{$n}-prompt {
   display: flex;
   flex-direction: column;
@@ -12,9 +7,6 @@
   padding: $spacer * 0.5;
 }
 
-// PARTS
-// -----------
-
 .#{$n}-prompt__title {
   margin-top: 0;
   margin-bottom: $spacer * 0.25;

package/src/stylesheets/5-components/_skip-link.scss

@@ -1,14 +1,14 @@
 .#{$n}-skip-link {
   position: absolute;
   z-index: 100;
-  top: $spacer * 0.5;
+  top: $spacer;
   left: 50%;
-  padding: $spacer * 0.5 $spacer;
+  padding: $spacer * 0.5 $spacer * 0.75;
   transform: translate(-50%, -1 * $spacer * 0.25) scale(0);
   transform-origin: 50% 0%;
   transition: transform $transition, opacity $transition;
   border: 1px solid $white;
-  border-radius: $spacer;
+  border-radius: $borderradius-small;
   opacity: 0;
   background: $interaction;
   color: $white;

package/src/stylesheets/5-components/_suggestions.scss

@@ -0,0 +1,96 @@
+.#{$n}-suggestions {
+  width: 100%;
+  height: fit-content;
+  overscroll-behavior: contain;
+}
+
+.#{$n}-app--layout-inline > .#{$n}-suggestions {
+  flex-direction: column;
+  max-height: $app-suggestions-maxheight;
+  padding: $spacer;
+  overflow: hidden;
+  transition: max-height $transition, padding $transition, transform $transition,
+    opacity $transition;
+  opacity: 0;
+
+  &.#{$n}-transition--visible {
+    display: flex;
+  }
+
+  &.#{$n}-transition--in {
+    transition: padding $transition-delay, transform $transition-delay,
+      opacity $transition-delay;
+    opacity: 1;
+
+    @include media('>phablet-l') {
+      transform: translateX(0);
+    }
+  }
+
+  @include media('>phablet-l') {
+    flex: 0 0 50%;
+    width: 50%;
+    height: $app-inline-height;
+    min-height: 100%;
+    max-height: $app-inline-maxheight;
+    transform: translateX(-100%);
+  }
+
+  @include media('>desktop') {
+    flex: 0 0 33%;
+    width: 33%;
+  }
+}
+
+.#{$n}-suggestions__heading {
+  flex: 0 0 auto;
+  margin: 0 0 $spacer * 0.5;
+  color: $brand1;
+  font-size: $fontsize-large;
+  font-weight: $fontweight-bold;
+}
+
+.#{$n}-suggestions__list {
+  @include unList;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  width: 100%;
+  height: auto;
+  overscroll-behavior: contain;
+}
+
+.#{$n}-app--layout-inline > .#{$n}-suggestions .#{$n}-suggestions__list {
+  flex: 1 1 100%;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  height: 100%;
+  max-height: 100%;
+  overflow-y: auto;
+}
+
+.#{$n}-suggestions-item {
+  display: block;
+  flex: 0 0 auto;
+  max-width: 100%;
+  margin: 0 $spacer * 0.25 $spacer * 0.25 0;
+}
+
+.#{$n}-app--layout-inline > .#{$n}-suggestions .#{$n}-suggestions-item {
+  width: 100%;
+  margin-right: 0;
+}
+
+.#{$n}-suggestions-item .#{$n}-icon {
+  display: none;
+}
+
+.#{$n}-suggestions__footer.#{$n}-suggestions__footer {
+  display: block;
+  width: 100%;
+  margin: $spacer * 0.25 0 0;
+  color: $brand1;
+  font-size: $fontsize-default;
+  font-weight: $fontweight-bold;
+}

package/src/stylesheets/5-components/_unstarted.scss

@@ -0,0 +1,50 @@
+.#{$n}-unstarted-wrapper {
+  display: none;
+  width: 100%;
+  overflow: hidden;
+  transition: margin $transition, max-height $transition;
+
+  &:not(&.#{$n}-unstarted-wrapper--window) {
+    max-height: 0;
+
+    @include media('>desktop') {
+      width: 67%;
+    }
+  }
+}
+
+.#{$n}-unstarted-wrapper.#{$n}-transition--visible {
+  display: block;
+}
+
+.#{$n}-unstarted-wrapper:not(.#{$n}-unstarted-wrapper--window).#{$n}-transition--in {
+  max-height: $spacer * 30;
+  margin-bottom: $spacer;
+}
+
+.#{$n}-unstarted-wrapper .#{$n}-pre-chat-messages,
+.#{$n}-unstarted-wrapper .#{$n}-cvco-suggestions {
+  display: none;
+  transition: transform $transition, opacity $transition;
+  opacity: 0;
+}
+
+.#{$n}-unstarted-wrapper.#{$n}-transition--visible .#{$n}-pre-chat-messages,
+.#{$n}-unstarted-wrapper.#{$n}-transition--visible .#{$n}-cvco-suggestions {
+  display: block;
+}
+
+.#{$n}-unstarted-wrapper.#{$n}-transition--in .#{$n}-pre-chat-messages,
+.#{$n}-unstarted-wrapper.#{$n}-transition--in .#{$n}-cvco-suggestions {
+  transition: transform $transition-delay, opacity $transition-delay;
+  opacity: 1;
+}
+
+.#{$n}-unstarted-wrapper--window .#{$n}-pre-chat-messages {
+  transform: scale(0);
+  transform-origin: 100% 100%;
+}
+
+.#{$n}-unstarted-wrapper--window.#{$n}-transition--in .#{$n}-pre-chat-messages {
+  transform: scale(1);
+}

package/src/stylesheets/5-components/_upload.scss

@@ -1,8 +1,4 @@
-// ##### UPLOAD #####
-// ==================
-
-// TOGGLE
-// ------
+// UPLOAD TOGGLE
 .#{$n}-upload-toggle-wrapper {
   width: 0;
   height: 100%;
@@ -11,20 +7,23 @@
 }
 
 .#{$n}-upload-toggle-wrapper.#{$n}-transition--in {
-  width: calc(#{$badge-touch-size} + (#{$spacer} * 0.5)); // INSTEAD OF MARGIN
+  width: calc(
+    #{$buttonsize} + (#{$spacer} * 0.5)
+  ); // INSTEAD OF MARGIN CAUSING DOUBLE ANIMATIONS
 }
 
 .#{$n}-upload-toggle {
   display: flex;
-  flex: 0 0 $badge-touch-size;
+  flex: 0 0 $buttonsize;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: $badge-touch-size;
-  height: $badge-touch-size;
+  width: $buttonsize;
+  height: $buttonsize;
   padding: 0;
   transform: translateX(-100%);
   transition: transform $transition, opacity $transition;
+  border-radius: $borderradius-small;
   opacity: 0;
   color: transparent;
   font-size: 0;
@@ -38,9 +37,9 @@
 }
 
 .#{$n}-upload-toggle .#{$n}-icon {
-  flex: 0 0 100%;
-  width: 100%;
-  height: 100%;
+  flex: 0 0 $iconsize;
+  width: $iconsize;
+  height: $iconsize;
 }
 
 .#{$n}-upload-toggle .#{$n}-icon svg {
@@ -49,13 +48,12 @@
 }
 
 // UPLOAD DIALOG
-// -------------
 .#{$n}-upload {
   width: 100%;
   padding: $spacer * 0.5 $spacer * 0.5 0;
 }
 
-.#{$n}-input--file {
+.#{$n}-upload-form {
   display: block;
 }
 
@@ -84,10 +82,6 @@
   max-width: 100%;
   border: 1px solid $interaction;
   border-radius: $borderradius-small;
-
-  &:hover {
-    background-color: rgba($brand3, 0.1);
-  }
 }
 
 .#{$n}-file-upload.#{$n}-focus-within {
@@ -95,7 +89,7 @@
   outline: 5px auto -webkit-focus-ring-color;
 }
 
-// Visually hidden
+// VISUALLY HIDDEN
 .#{$n}-upload__input {
   position: absolute;
   width: 1px;
@@ -110,21 +104,26 @@
   justify-content: flex-start;
   width: 100%;
   padding: $spacer * 0.5;
+  color: $interaction;
   text-align: left;
 }
 
 .#{$n}-upload__label .#{$n}-icon {
-  flex: 0 0 32px;
-  width: 32px;
-  height: 32px;
+  flex: 0 0 $iconsize-large;
+  width: $iconsize-large;
+  height: $iconsize-large;
   margin-right: $spacer * 0.5;
 }
 
+.#{$n}-upload__label .#{$n}-icon path {
+  fill: currentColor;
+}
+
 .#{$n}-upload__label--text {
   display: block;
   flex: 1 1 100%;
   max-width: 100%;
-  color: $interaction;
+  color: inherit;
   font-size: $fontsize-medium;
   font-weight: $fontweight-bold;
 }
@@ -133,6 +132,7 @@
   display: block;
   flex: 1 1 100%;
   max-width: 100%;
+  color: $brand1;
   font-size: $fontsize-small;
   word-break: break-all;
 }
@@ -157,7 +157,6 @@
 }
 
 // PROGRESS
-// --------
 .#{$n}-progress__text {
   display: flex;
   align-items: flex-end;
@@ -193,17 +192,16 @@
 .#{$n}-progress__bar {
   appearance: none;
   width: 100%;
-  border: 1px solid $brand1;
   border-radius: $borderradius-small;
-  background: $white;
+  background: $grey-a;
 
   &::-webkit-progress-bar {
     border-radius: $borderradius-small;
-    background: $white;
-    box-shadow: inset 0 $spacer * 0.125 $spacer * 0.125 0 rgba(0, 0, 0, 0.22);
+    background: $grey-a;
   }
 
   &::-webkit-progress-value {
+    border-radius: $borderradius-small;
     background-color: $interaction;
   }
 

package/src/stylesheets/5-components/_window-open-button.scss

@@ -0,0 +1,39 @@
+.#{$n}-window-open-button {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  right: $spacer;
+  bottom: $spacer;
+  width: $avatarsize-large;
+  height: $avatarsize-large;
+  padding: 0;
+  transform: scale(0);
+  transform-origin: 100% 100%;
+  transition: transform $transition;
+  border: 1px solid $grey-c;
+  border-radius: $borderradius;
+  opacity: 0;
+  background-color: $brand1;
+  box-shadow: $boxshadow-soft;
+
+  &.#{$n}-transition--visible {
+    display: block;
+  }
+
+  &.#{$n}-transition--in {
+    transform: scale(1);
+    transition: transform $transition-delay;
+    opacity: 1;
+  }
+}
+
+.#{$n}-window-open-button .#{$n}-icon,
+.#{$n}-window-open-button .#{$n}-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: $borderradius;
+}