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

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

@@ -1,23 +1,21 @@
-// ##### DISCLAIMER #####
-// ==================
-
-// VARS
-// ----
-
-$small-shadow-light: 0 $spacer * 0.2 $spacer * 0.3333 0 rgba(0, 0, 0, 0.1);
-
-// BASE
-// ----
-
 .#{$n}-disclaimer {
   display: block;
   flex: 0 0 auto;
   width: 100%;
   height: auto;
-  padding: $spacer * 0.5 $spacer;
+  padding: $spacer;
   background-color: $grey-a;
 }
 
+&.#{$n}-app--layout-window .#{$n}-disclaimer {
+  padding-right: $buttonsize + $spacer * 2;
+}
+
+.#{$n}-chat-status ~ .#{$n}-app__container .#{$n}-disclaimer {
+  margin-top: $buttonsize + $spacer * 2;
+  padding: $spacer * 0.5 $spacer;
+}
+
 &.#{$n}-app--collapsed .#{$n}-disclaimer {
   display: none;
 }

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

@@ -8,8 +8,6 @@
   background: linear-gradient(180deg, $white 0%, $grey-a 100%);
   background-repeat: no-repeat;
   background-size: 100% 2 * $spacer;
-  font-family: $fontfamily-default;
-  font-size: $fontsize-small;
   line-height: 1.5;
 
   &::before {
@@ -48,8 +46,8 @@
   position: absolute;
   top: 2 * $spacer;
   left: 50%;
-  width: $badge-touch-size;
-  height: $badge-touch-size;
+  width: $dividersize;
+  height: $dividersize;
   transform: translate(-50%, -60%);
   border-radius: $borderradius-small;
   background: $white;
@@ -62,6 +60,11 @@
   height: 100%;
 }
 
+.#{$n}-divider__body {
+  font-size: $fontsize-small;
+  text-align: center;
+}
+
 .#{$n}-divider__time {
   text-align: center;
 }

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

@@ -4,16 +4,14 @@
 // BASE
 // ----
 .#{$n}-error {
-  display: flex;
-  align-items: flex-start;
+  display: block;
   width: 100%;
-  margin: 0 0 $spacer * 0.5;
-  padding: $spacer * 0.25 $spacer * 0.5;
-  border-radius: $borderradius-small;
-  background-color: rgba($negative, 0.1);
-  color: $negative-dark;
-  font-size: $fontsize-small;
-  font-weight: $fontweight-bold;
+  margin: 0 0 $spacer * 0.25;
+
+  &:empty {
+    display: none;
+    margin: 0;
+  }
 
   .#{$n}-icon {
     flex: 0 0 16px;
@@ -21,4 +19,16 @@
     height: 16px;
     margin-right: $spacer * 0.25;
   }
+
+  .#{$n}-error__message {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    padding: $spacer * 0.25 $spacer * 0.5;
+    border-radius: $borderradius-small;
+    background-color: rgba($negative, 0.1);
+    color: $negative-dark;
+    font-size: $fontsize-small;
+    font-weight: $fontweight-bold;
+  }
 }

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

@@ -0,0 +1,9 @@
+// ##### FORM #####
+// ========================
+
+.#{$n}-form {
+  display: flex;
+  flex: 1 1 100%;
+  width: 100%;
+  height: 100%;
+}

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

@@ -1,4 +1,13 @@
 .#{$n}-icon {
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $iconsize-large;
+  height: $iconsize-large;
   line-height: 1;
 }
+
+.#{$n}-icon svg {
+  width: 100%;
+  height: 100%;
+}

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

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

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

@@ -1,8 +1,3 @@
-// ##### INPUT #####
-// ========================
-
-// BASE
-// ----
 .#{$n}-input {
   display: flex;
   flex: 1 1 100%;
@@ -10,8 +5,6 @@
   height: 100%;
 }
 
-// PARTS
-// -----
 .#{$n}-input--text__container {
   display: flex;
   position: relative;
@@ -23,21 +16,15 @@
 .#{$n}-input__text {
   appearance: none;
   flex-grow: 4;
-  height: 100%;
+  height: $buttonsize;
   margin-right: $spacer * 0.25;
   padding: $spacer * 0.5;
   transition: padding $transition;
   border: $thin-border solid transparent;
   border-radius: $borderradius-small;
   color: $grey-e;
-  font-size: $fontsize-small;
+  font-size: $fontsize-default;
   resize: none;
-  // iOS will zoom in on focus if font-size below 16px, and not go back.
-  // User has to pinch to zoom out; bad UX.
-  // Do not change this:
-  @supports (-webkit-overflow-scrolling: touch) {
-    font-size: 16px;
-  }
 
   @include stylePlaceholder() {
     overflow: visible;
@@ -62,17 +49,24 @@
 
 .#{$n}-input__submit {
   display: flex;
+  flex: 0 0 $buttonsize;
   align-items: center;
   justify-content: center;
+  width: $buttonsize;
+  height: $buttonsize;
   padding: 0;
+  border-radius: $borderradius-small;
 
   &:disabled {
-    opacity: 0.5;
     cursor: auto;
   }
+}
 
-  .#{$n}-icon {
-    width: $badge-touch-size;
-    height: $badge-touch-size;
-  }
+.#{$n}-input__submit .#{$n}-icon path {
+  transition: fill $transition;
+  fill: $interaction;
+}
+
+.#{$n}-input__submit:disabled .#{$n}-icon path {
+  fill: $grey-c;
 }

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

@@ -16,8 +16,6 @@
   justify-content: center;
   margin: $spacer * 0.5;
   padding: $spacer * 2;
-  border: $thin-border solid $grey-b;
-  border-radius: $borderradius;
 }
 
 .#{$n}-interrupt__title {

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

@@ -1,14 +1,6 @@
-// ##### LOADER #####
-// ==================
-
-// VARS
-
 $loader-animation-duration: 0.6s;
 $loader-quarter-duration: $loader-animation-duration * 0.2;
 
-// BASE
-// ----
-
 .#{$n}-loader {
   display: flex;
   flex-direction: row;
@@ -19,11 +11,6 @@ $loader-quarter-duration: $loader-animation-duration * 0.2;
   animation: #{$app-name}-fadeIn $loader-animation-duration * 0.5 linear;
 }
 
-// PARTS
-// -----
-
-// PART
-
 .#{$n}-loader__part {
   display: inline-block;
   width: $spacer * 0.3333;
@@ -57,22 +44,3 @@ $loader-quarter-duration: $loader-animation-duration * 0.2;
     animation-delay: $loader-quarter-duration * 4;
   }
 }
-
-// VARIATIONS
-// ----------
-
-// WHITE
-
-.#{$n}-loader--white {
-  .#{$n}-loader__part {
-    background-color: $white;
-  }
-}
-
-// GREY
-
-.#{$n}-loader--grey {
-  .#{$n}-loader__part {
-    background-color: $grey-b;
-  }
-}

package/src/stylesheets/5-components/_message-author.scss

@@ -0,0 +1,40 @@
+.#{$n}-message__author {
+  display: none;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  margin-bottom: 0.3rem;
+  padding: 0 $spacer * 0.5;
+  font-weight: $fontweight-bold;
+}
+
+.#{$n}-message--source-user .#{$n}-message__author {
+  justify-content: flex-end;
+}
+
+.#{$n}-message__avatar {
+  width: $avatarsize * 0.5;
+  height: $avatarsize * 0.5;
+  margin: 0 0.5em 0 0;
+
+  .#{$n}-avatar {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+.#{$n}-conversation__item--new-participant .#{$n}-message__author {
+  display: flex;
+}
+
+.#{$n}-message--source-user .#{$n}-message__avatar {
+  order: 2;
+  margin: 0 0 0 $spacer * 0.5;
+}
+
+.#{$n}-message--source-user .#{$n}-message__author-name {
+  order: 1;
+}

package/src/stylesheets/5-components/_message-body.scss

@@ -0,0 +1,194 @@
+.#{$n}-message__body {
+  display: block;
+  position: relative;
+  max-width: 100%;
+  margin-bottom: $spacer * 0.25;
+  padding: $spacer * 0.5 $spacer * 0.75;
+  border-radius: $borderradius;
+  background-color: $threadlist-agent-text-bgcolor;
+  color: set-text-color($threadlist-agent-text-bgcolor);
+
+  .#{$n}-icon svg path {
+    fill: set-text-color($threadlist-agent-text-bgcolor);
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.#{$n}-conversation__item--source-info .#{$n}-message__body {
+  flex: 0 0 100%;
+  width: 100%;
+  padding: 0 $spacer * 0.75 $spacer * 0.5;
+  border-radius: 0;
+  background-color: initial;
+  text-align: center;
+}
+
+.#{$n}-message--source-user .#{$n}-message__body {
+  background-color: $threadlist-user-text-bgcolor;
+  color: set-text-color($threadlist-user-text-bgcolor);
+
+  .#{$n}-icon svg path {
+    fill: set-text-color($threadlist-user-text-bgcolor);
+  }
+}
+
+// Splash
+.#{$n}-message--type-splash .#{$n}-message__body {
+  padding: 0;
+  border-radius: 0;
+  background-color: initial;
+  font-size: $fontsize-xxlarge;
+  font-weight: $fontweight-bold;
+}
+
+// Suggestions
+.#{$n}-message--type-suggestions .#{$n}-message__body {
+  width: 100%;
+  padding: 0;
+  background-color: initial;
+}
+
+// Text
+.#{$n}-message--type-text .#{$n}-message__body,
+.#{$n}-message--type-splash .#{$n}-message__body {
+  p,
+  ul,
+  ol {
+    margin: 0 0 $spacer 0;
+  }
+
+  p:last-child,
+  ul:last-child,
+  ol:last-child {
+    margin: 0;
+  }
+
+  ul {
+    padding-left: 1.5em;
+  }
+
+  ul li {
+    list-style-type: disc;
+  }
+
+  a {
+    color: $interaction;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    hyphens: auto;
+  }
+}
+
+.cvco-message--source-user .#{$n}-message__body a {
+  color: $white;
+}
+
+// Loading
+.#{$n}-message--type-loading .#{$n}-message__body {
+  align-self: flex-start;
+}
+
+// Choice Prompt
+.#{$n}-message--type-choice-prompt .#{$n}-message__body {
+  width: 100%;
+  padding: 0;
+  background-color: initial;
+}
+
+// Image
+.#{$n}-message--type-image .#{$n}-message__body {
+  padding: 0;
+}
+
+.#{$n}-message--type-image img {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  border-radius: $borderradius;
+}
+
+// Video
+.#{$n}-message--type-video .#{$n}-message__body {
+  width: 100%;
+  padding: 0;
+  background-color: $black;
+}
+
+.#{$n}-message--type-video iframe {
+  display: block;
+  width: 100%;
+  aspect-ratio: 6 / 4;
+  border: 0 none;
+  border-radius: $borderradius;
+}
+
+// Download
+.#{$n}-message--type-upload {
+  .#{$n}-download {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  a {
+    color: inherit;
+    text-align: left;
+    word-break: break-all;
+  }
+
+  .#{$n}-icon {
+    flex: 0 0 $iconsize-small;
+    width: $iconsize-small;
+    height: $iconsize-small;
+    margin-right: $spacer * 0.5;
+  }
+
+  .#{$n}-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$n}-conversation__item--source-agent .#{$n}-message--type-upload {
+  .#{$n}-icon path {
+    fill: $interaction;
+  }
+
+  a {
+    color: $interaction;
+  }
+}
+
+.#{$n}-message .#{$n}-message__info {
+  margin-top: $spacer * 0.2;
+  color: $grey-d;
+  font-size: $fontsize-small;
+  line-height: 1.35;
+}
+
+// CTA
+.#{$n}-message--type-cta .#{$n}-message__body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: $spacer * 0.5 $spacer * 0.75 $spacer * 0.75;
+  background-color: $brand2;
+}
+
+// Cards
+.#{$n}-message--type-card .#{$n}-message__body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0;
+}
+
+// Carousel
+.#{$n}-message--type-carousel .#{$n}-message__body {
+  display: block;
+  padding: 0;
+}

package/src/stylesheets/5-components/_message-card.scss

@@ -0,0 +1,55 @@
+.#{$n}-card__wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.#{$n}-card__image {
+  flex: 0 0 auto;
+  width: 100%;
+  height: $spacer * 8;
+  object-fit: cover;
+  object-position: center;
+  overflow: hidden;
+  border-top-left-radius: $borderradius;
+  border-top-right-radius: $borderradius;
+}
+
+.#{$n}-card__content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  padding: $spacer * 0.5 $spacer * 0.75 $spacer * 0.75;
+}
+
+.#{$n}-card__title {
+  display: block;
+  flex: 0 0 100%;
+  width: 100%;
+  margin: 0 0 $spacer * 0.25;
+  padding: 0;
+  font-size: $fontsize-default;
+  font-weight: $fontweight-bold;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.#{$n}-card__description {
+  display: block;
+  width: 100%;
+  margin-bottom: $spacer;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.#{$n}-card__content .#{$n}-button {
+  display: block;
+  align-self: flex-end;
+  width: 100%;
+  font-weight: $fontweight-bold;
+  text-decoration: none;
+}

package/src/stylesheets/5-components/_message-carousel.scss

@@ -0,0 +1,143 @@
+.#{$n}-carousel {
+  position: relative;
+}
+
+.#{$n}-carousel__slides-wrapper {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+}
+
+.#{$n}-carousel__slides {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  padding: 0;
+  transition: left $transition;
+  list-style: none;
+}
+
+.#{$n}-carousel__slide {
+  display: block;
+  width: 100%;
+  padding: 0;
+  list-style: none;
+}
+
+.#{$n}-carousel-item {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+/* stylelint-disable no-descending-specificity */
+.#{$n}-carousel-item .#{$n}-button {
+  display: block;
+  width: 100%;
+}
+/* stylelint-enable */
+
+.#{$n}-carousel-controls {
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  width: 100%;
+  height: fit-content;
+  padding: 0;
+  border-top: 1px solid $grey-b;
+}
+
+/* stylelint-disable no-descending-specificity */
+.#{$n}-carousel-controls .#{$n}-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $buttonsize;
+  height: $buttonsize;
+  background-color: initial;
+  color: transparent;
+  font-size: 0;
+}
+
+.#{$n}-carousel-controls .#{$n}-button--previous {
+  left: 0;
+}
+
+.#{$n}-carousel-controls .#{$n}-button--next {
+  right: 0;
+}
+
+.#{$n}-carousel__controls .#{$n}-button .#{$n}-icon {
+  display: block;
+  width: $iconsize-small;
+  height: $iconsize-small;
+  padding: 0;
+  border: 0;
+}
+
+.#{$n}-carousel__controls .#{$n}-button .#{$n}-icon svg path {
+  fill: $interaction;
+}
+/* stylelint-enable */
+
+.#{$n}-carousel__pagination {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  padding: 0 $spacer * 0.5;
+}
+
+.#{$n}-carousel-pagination {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+  margin: 0 auto;
+  padding: 0;
+}
+
+.#{$n}-carousel-pagination__wrapper {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.#{$n}-carousel-pagination__item {
+  display: block;
+  list-style: none;
+}
+
+.#{$n}-carousel-pagination__button {
+  display: block;
+  position: relative;
+  width: $buttonsize-small;
+  height: $buttonsize-small;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background-color: initial;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: $iconsize-small * 0.6;
+    height: $iconsize-small * 0.6;
+    transform: translate(-50%, -50%);
+    transform-origin: 50% 50%;
+    border-radius: 50% 50%;
+    background-color: $grey-c;
+  }
+}
+
+.#{$n}-is-active .#{$n}-carousel-pagination__button {
+  &::before {
+    background-color: $brand1;
+  }
+}