@seamly/web-ui 20.0.0-beta.4 → 20.0.0-beta.5

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

@@ -17,6 +17,28 @@
   }
 }
 
+.#{$n}-unstarted-wrapper.#{$n}-unstarted-wrapper--window .#{$n}-message__body {
+  margin-left: auto;
+  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;
+}
+
+.#{$n}-unstarted-wrapper--continue .#{$n}-message__body {
+  transform: scale(0);
+  transform-origin: 100% 100%;
+  transition: transform $transition, opacity $transition;
+  opacity: 0;
+}
+
+.#{$n}-unstarted-wrapper--continue.#{$n}-transition--in .#{$n}-message__body {
+  transform: scale(1);
+  transition: transform $transition-delay, opacity $transition-delay;
+  opacity: 1;
+}
+
 .#{$n}-conversation__item--source-info .#{$n}-message__body {
   flex: 0 0 100%;
   width: 100%;
@@ -82,7 +104,7 @@
   }
 }
 
-.cvco-message--source-user .#{$n}-message__body a {
+.#{$n}-message--source-user .#{$n}-message__body a {
   color: $white;
 }
 

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

@@ -5,6 +5,10 @@
   width: 80%;
 }
 
+.#{$n}-unstarted-wrapper--window .#{$n}-message {
+  width: 100%;
+}
+
 .#{$n}-message.#{$n}-message--type-suggestions {
   width: 100%;
 }

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

@@ -13,10 +13,6 @@
   margin-right: auto;
 }
 
-&.#{$n}-app--collapsed .#{$n}-chat__options {
-  display: none;
-}
-
 .#{$n}-chat__options__button {
   display: flex;
   align-items: center;
@@ -25,10 +21,6 @@
   border-radius: $borderradius-small;
 }
 
-&.#{$n}-app--collapsed .#{$n}-chat__options-button {
-  display: none;
-}
-
 .#{$n}-chat__options__button .#{$n}-icon {
   flex: 0 0 $iconsize-small;
   width: $iconsize-small;

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

@@ -5,30 +5,33 @@
   padding: 0;
 }
 
-&.#{$n}-app--layout-window .#{$n}-pre-chat-messages {
-  position: fixed;
-  z-index: $z-index;
-  right: $spacer;
-  bottom: $spacer + $avatarsize-large;
-  max-width: calc(100% - #{$spacer * 2});
+.#{$n}-unstarted-wrapper .#{$n}-pre-chat-messages {
+  display: none;
+}
+
+.#{$n}-unstarted-wrapper.#{$n}-transition--visible .#{$n}-pre-chat-messages {
+  display: block;
+}
 
-  @include media('>phablet-l') {
-    max-width: $spacer * 14;
-  }
+.#{$n}-unstarted-wrapper--inline .#{$n}-pre-chat-messages {
+  transition: opacity $transition;
+  opacity: 0;
 }
 
-.#{$n}-pre-chat-messages__message {
-  margin-bottom: $spacer * 0.5;
+.#{$n}-unstarted-wrapper--inline.#{$n}-transition--in .#{$n}-pre-chat-messages {
+  transition: opacity $transition-delay;
+  opacity: 1;
 }
 
-&.#{$n}-app--layout-window .#{$n}-pre-chat-messages .#{$n}-message {
-  width: 100%;
+.#{$n}-unstarted-wrapper--window .#{$n}-pre-chat-messages {
+  transform: scale(0);
+  transform-origin: 100% 100%;
+  transition: transform $transition, opacity $transition;
+  opacity: 0;
 }
 
-&.#{$n}-app--layout-window .#{$n}-pre-chat-messages .#{$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;
+.#{$n}-unstarted-wrapper--window.#{$n}-transition--in .#{$n}-pre-chat-messages {
+  transform: scale(1);
+  transition: transform $transition-delay, opacity $transition-delay;
+  opacity: 1;
 }

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

@@ -4,7 +4,7 @@
   overscroll-behavior: contain;
 }
 
-&.#{$n}-app--layout-inline .#{$n}-chat > .#{$n}-suggestions {
+.#{$n}-chat--layout-inline > .#{$n}-suggestions {
   flex-direction: column;
   max-height: $chat-suggestions-maxheight;
   padding: $spacer;
@@ -61,10 +61,7 @@
   overscroll-behavior: contain;
 }
 
-&.#{$n}-app--layout-inline
-  .#{$n}-chat
-  > .#{$n}-suggestions
-  .#{$n}-suggestions__list {
+.#{$n}-chat--layout-inline > .#{$n}-suggestions .#{$n}-suggestions__list {
   flex: 1 1 100%;
   flex-direction: column;
   flex-wrap: nowrap;
@@ -80,10 +77,7 @@
   margin: 0 $spacer * 0.25 $spacer * 0.25 0;
 }
 
-&.#{$n}-app--layout-inline
-  .#{$n}-chat
-  > .#{$n}-suggestions
-  .#{$n}-suggestions-item {
+.#{$n}-chat--layout-inline > .#{$n}-suggestions .#{$n}-suggestions-item {
   width: 100%;
   margin-right: 0;
 }

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

@@ -1,56 +1,36 @@
-.#{$n}-unstarted-wrapper {
+.#{$n}-unstarted-wrapper:empty {
   display: none;
-  width: 100%;
-  overflow: hidden;
-  transition: margin $transition, max-height $transition;
 }
 
-&.#{$n}-app--layout-inline .#{$n}-unstarted-wrapper {
+.#{$n}-unstarted-wrapper--window {
+  position: fixed;
+  z-index: $z-index;
+  right: $spacer * 1.5;
+  bottom: $spacer * 1.5 + $avatarsize-large;
+  max-width: calc(100% - #{$spacer * 3});
+
+  @include media('>phablet-l') {
+    max-width: $spacer * 14;
+  }
+}
+
+.#{$n}-unstarted-wrapper--inline {
+  display: none;
+  width: 100%;
   max-height: 0;
+  overflow: hidden;
+  transition: margin $transition, max-height $transition;
 
   @include media('>desktop') {
     width: 67%;
   }
 }
 
-.#{$n}-unstarted-wrapper.#{$n}-transition--visible {
+.#{$n}-unstarted-wrapper--inline.#{$n}-transition--visible {
   display: block;
-
-  &:empty {
-    display: none;
-  }
 }
 
-&.#{$n}-app--layout-inline .#{$n}-unstarted-wrapper.#{$n}-transition--in {
+.#{$n}-unstarted-wrapper--inline.#{$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}-app--layout-window .#{$n}-pre-chat-messages {
-  transform: scale(0);
-  transform-origin: 100% 100%;
-}
-
-&.#{$n}-app--layout-window
-  .#{$n}-unstarted-wrapper.#{$n}-transition--in
-  .#{$n}-pre-chat-messages {
-  transform: scale(1);
-}

package/src/stylesheets/7-deprecated/5-components/_message.scss

@@ -193,7 +193,7 @@ $avatar-size: $badge-touch-size;
     }
   }
 
-  &.cvco-message--source-user .#{$n}-message__body {
+  &.#{$n}-message--source-user .#{$n}-message__body {
     a {
       color: $white;
     }

package/src/stylesheets/7-deprecated/5-components/_modal.scss

@@ -132,7 +132,7 @@ $button-transition: $transition;
     background-color: $brand3;
   }
 
-  &:hover .cvco-icon svg path {
+  &:hover .#{$n}-icon svg path {
     fill: $white;
   }
 }

package/src/stylesheets/style-guide.scss

@@ -11,7 +11,7 @@
     margin: 0 0 4rem;
   }
 
-  .chat-inline h2 {
+  .chat-inline > h2 {
     @media only screen and (max-width: 800px) {
       padding-left: 1rem;
     }