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

package/src/stylesheets/3-app/_app.scss

@@ -1,178 +1,127 @@
-// See settings/_config.scss for vars
-$app-parts-padding: $spacer * 0.5;
-$app-header-bgcolor: $brand3;
-
 .#{$n}-app {
-  @include responsiveAppSizing();
   @include boxSizing;
 
   display: flex;
-  position: fixed;
-  z-index: $z-index;
-  right: $flex-spacer;
-  bottom: $flex-spacer;
   flex-direction: column;
-  width: $app-started-width;
-  height: $app-full-height;
-  overflow: hidden;
-  transition: height $transition-slow, width $transition-slow;
-  border: $thin-border solid set-border-color($app-bg);
-  border-radius: $borderradius;
+  transform-origin: 100% 100%;
+  transition: margin $transition, height $transition, transform $transition,
+    opacity $transition;
   outline: 0;
-  background-color: $app-bg;
-  box-shadow: $boxshadow-ultralight;
   color: set-text-color($app-bg);
   font-family: $fontfamily-default;
-  font-size: $fontsize-default;
+  font-size: $fontsize-small;
 }
 
 .#{$n}-app--layout-inline {
-  position: relative;
-  right: auto;
-  bottom: auto;
-  width: auto;
-  height: 90vh;
-  min-height: $app-inline-min-height;
-  max-height: $app-inline-max-height;
-  transition: height $transition, width $transition;
+  height: fit-content;
   background-color: initial;
   box-shadow: none;
 
   @include media('>phablet-l') {
-    display: block;
-    border: 0 none;
+    flex-direction: row;
   }
 }
 
-.#{$n}-app--collapsed {
-  width: $app-initial-width;
-  height: $app-collapsed-height;
-  border: 0;
-  background: none;
-  box-shadow: none;
+.#{$n}-app--layout-inline.#{$n}-app--collapsed .#{$n}-app-wrapper {
+  height: auto;
 }
 
-.#{$n}-app--collapsed.#{$n}-app--started {
-  width: $app-started-width;
+.#{$n}-app--layout-inline.#{$n}-app--user-responded {
+  transition: none;
 }
 
-.#{$n}-app-wrapper {
-  display: flex;
-  position: relative;
-  z-index: 1;
-  flex: 1 1 100%;
-  flex-direction: column;
-  width: 100%;
-  transition: width $transition, margin-right $transition,
-    border-radius $transition;
-  background-color: $app-bg;
+.#{$n}-app--layout-inline.#{$n}-app--user-responded .#{$n}-app-wrapper {
+  transition: none;
 }
 
-.#{$n}-app--layout-inline .#{$n}-app-wrapper {
-  @include media('>phablet-l') {
-    width: 50%;
-    height: 100%;
-    margin-right: 50%;
-    border: $thin-border solid set-border-color($app-bg);
-    border-top-left-radius: $borderradius;
-    border-bottom-left-radius: $borderradius;
-
-    &:last-child {
-      width: 100%;
-      margin-right: 0;
-      border-radius: $borderradius;
-    }
-  }
-
-  @include media('>desktop') {
-    width: 67%;
-    margin-right: 33%;
+.#{$n}-app--layout-window {
+  @include responsiveAppSizing();
 
-    &:last-child {
-      width: 67%;
-      margin-right: 33%;
-    }
-  }
+  display: none;
+  position: fixed;
+  z-index: $z-index;
+  right: $spacer;
+  bottom: $spacer;
+  width: $app-window-width;
+  max-width: calc(100% - #{$spacer * 2});
+  height: $app-window-height;
+  transform: scale(0);
+  opacity: 0;
 }
 
-.#{$n}-app__header {
+.#{$n}-app--layout-window.#{$n}-transition--visible {
   display: flex;
-  position: relative;
-  flex: 0 0 auto;
-  flex-direction: row;
-  justify-content: flex-end;
-  height: $app-collapsed-height;
-  padding: $app-parts-padding;
-  border-bottom: $thin-border solid $grey-b;
-  border-top-left-radius: $borderradius;
-  border-top-right-radius: $borderradius;
 }
 
-.#{$n}-app--collapsed .#{$n}-app__header {
-  border-bottom: 0;
-  border-bottom-left-radius: $borderradius;
-  border-bottom-right-radius: $borderradius;
-  background-color: $app-header-bgcolor;
-  color: set-text-color($app-header-bgcolor);
+.#{$n}-app--layout-window.#{$n}-transition--in {
+  transform: scale(1);
+  opacity: 1;
 }
 
-.#{$n}-toggle-button {
-  display: none;
-  position: absolute;
+.#{$n}-app--layout-app {
+  position: fixed;
   z-index: $z-index;
-  flex-direction: column;
-  justify-content: center;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: 100%;
-  height: $app-collapsed-height;
-  margin: 0;
-  padding: $app-parts-padding $app-parts-padding $app-parts-padding
-    $badge-touch-size + $app-parts-padding + $spacer * 0.5;
-  border: 0;
-  background: none;
-  background-color: transparent;
-  color: $white;
-  font-size: $fontsize-small;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
 }
 
-.#{$n}-app--collapsed .#{$n}-toggle-button {
+.#{$n}-app-wrapper {
   display: flex;
+  position: relative;
+  z-index: 1;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  transition: flex $transition, width $transition, height $transition,
+    border-radius $transition;
+  border: $thin-border solid set-border-color($app-bg);
+  border-radius: $borderradius;
+  background-color: $app-bg;
+  box-shadow: $boxshadow-soft;
 }
 
-.#{$n}-toggle-button__title {
-  margin: 0;
-  font-size: $fontsize-small;
-}
-
-.#{$n}-toggle-button__subtitle {
-  margin: 0;
-  font-size: $fontsize-small;
-  font-weight: $fontweight-bold;
+.#{$n}-app--layout-app .#{$n}-app-wrapper {
+  border: 0 none;
+  border-radius: 0;
 }
 
-.#{$n}-toggle-button__button {
-  position: absolute;
-  z-index: $z-index;
-  top: 0;
-  left: 0;
+.#{$n}-app--layout-inline .#{$n}-app-wrapper {
   width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  background: none;
+  height: 0;
+
+  @include media('>phablet-l', '<desktop') {
+    flex: 0 0 100%;
 
-  &:focus {
-    outline: 1px solid $white;
-    outline-offset: -5px;
+    &:not(:only-child) {
+      flex: 0 0 50%;
+      width: 50%;
+    }
+  }
+
+  @include media('>desktop') {
+    flex: 0 0 67%;
+    width: 67%;
   }
 }
 
+.#{$n}-app--layout-inline.#{$n}-transition--in .#{$n}-app-wrapper {
+  height: $app-inline-height;
+  max-height: $app-inline-maxheight;
+}
+
 .#{$n}-app__container {
   display: flex;
   position: relative;
-  flex: 1 1 auto;
   flex-direction: column;
-  max-height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .#{$n}-app__body {
@@ -181,31 +130,25 @@ $app-header-bgcolor: $brand3;
   flex-grow: 4;
   padding: 0;
   overflow-y: auto;
-  border-bottom: $thin-border solid $grey-b;
-}
-
-.#{$n}-app--collapsed .#{$n}-app__body {
-  display: none;
 }
 
 .#{$n}-app--layout-window .#{$n}-app__body {
   overscroll-behavior: contain;
-  /* stylelint-disable-next-line property-no-vendor-prefix */
-  -ms-scroll-chaining: none;
 }
 
 .#{$n}-app__entry {
   position: relative;
   flex: 0 0 auto;
-  padding: $app-parts-padding;
+  padding: $spacer * 0.5;
+  border-top: $thin-border solid $grey-b;
 
   .#{$n}-entry__body--hidden {
     display: none;
   }
 }
 
-.#{$n}-app--collapsed .#{$n}-app__entry {
-  display: none;
+.#{$n}-app--layout-inline.#{$n}-app--collapsed .#{$n}-app__entry {
+  border: 0 none;
 }
 
 .#{$n}-entry__body {

package/src/stylesheets/4-base/_a11y.scss

@@ -2,9 +2,6 @@
 
 // ##### A11Y #####
 // ================
-
-// VISUALLY HIDDEN
-
 .#{$n}-visually-hidden {
   position: absolute !important;
   width: 1px;

package/src/stylesheets/4-base/_elements.scss

@@ -1,6 +1,5 @@
 // ##### ELEMENTS #####
 // ====================
-// GENERAL ELEMENT STYLING
 
 p {
   margin: 0;
@@ -9,13 +8,3 @@ p {
 img {
   max-width: 100%;
 }
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: 1rem;
-  font-weight: normal;
-}

package/src/stylesheets/4-base/_formelements.scss

@@ -26,30 +26,20 @@
 .#{$n}-input__select {
   appearance: none;
   width: 100%;
-  height: 100%;
+  min-height: $buttonsize;
   padding: $spacer * 0.5;
-  transition: padding $transition;
   border: $thin-border solid $grey-b;
   border-radius: $borderradius-small;
+  background-color: $white;
   background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxkZWZzLz48cGF0aCBmaWxsPSIjNEE0OEMxIiBkPSJNMi45OTgsNi41MDNjMC0wLjI0NywwLjA5MS0wLjQ5NCwwLjI3My0wLjY4N2MwLjM4LTAuNDAxLDEuMDEzLTAuNDE5LDEuNDE0LTAuMDRsMi41ODUsMi40NDYJYzAuMzk0LDAuMzczLDEuMDYsMC4zNzMsMS40NTQsMGwyLjU4Ni0yLjQ0NmMwLjQtMC4zNzksMS4wMzMtMC4zNjIsMS40MTMsMC4wNGMwLjM3OSwwLjQsMC4zNjIsMS4wMzQtMC4wMzksMS40MTRsLTIuNTg2LDIuNDQ2CWMtMS4xNTksMS4wOTYtMy4wNDMsMS4wOTYtNC4yMDMsMEwzLjMxLDcuMjI5QzMuMTAyLDcuMDMzLDIuOTk4LDYuNzY4LDIuOTk4LDYuNTAzeiIvPjwvc3ZnPg==');
   background-repeat: no-repeat;
   background-position: right $spacer * 0.5 top 50%;
   background-size: $spacer * 0.75 auto;
   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; very nasty UX. So:
-  @supports (-webkit-overflow-scrolling: touch) {
-    font-size: 16px; // this should stay fixed!
-  }
-
-  &:hover {
-    border: $thin-border solid $brand3;
-  }
 
-  &:disabled,
-  &:disabled:hover {
+  &:disabled {
     border: $thin-border solid $grey-c;
     background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxkZWZzLz48cGF0aCBmaWxsPSIjYTNiNGJmIiBkPSJNMi45OTgsNi41MDNjMC0wLjI0NywwLjA5MS0wLjQ5NCwwLjI3My0wLjY4N2MwLjM4LTAuNDAxLDEuMDEzLTAuNDE5LDEuNDE0LTAuMDRsMi41ODUsMi40NDYJYzAuMzk0LDAuMzczLDEuMDYsMC4zNzMsMS40NTQsMGwyLjU4Ni0yLjQ0NmMwLjQtMC4zNzksMS4wMzMtMC4zNjIsMS40MTMsMC4wNGMwLjM3OSwwLjQsMC4zNjIsMS4wMzQtMC4wMzksMS40MTRsLTIuNTg2LDIuNDQ2CWMtMS4xNTksMS4wOTYtMy4wNDMsMS4wOTYtNC4yMDMsMEwzLjMxLDcuMjI5QzMuMTAyLDcuMDMzLDIuOTk4LDYuNzY4LDIuOTk4LDYuNTAzeiIvPjwvc3ZnPg==');
     color: $grey-c;

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

@@ -1,21 +1,9 @@
-// ##### AVATAR #####
-// ==================
-
-// VARS
-// ----
-
-$avatar-bgcolor: $brand1;
-$avatar-size: $badge-touch-size;
-
-// BASE
-// ----
-
 .#{$n}-avatar {
   display: block;
   position: relative;
   flex-shrink: 0;
-  width: $avatar-size;
-  height: $avatar-size;
+  width: $avatarsize;
+  height: $avatarsize;
   overflow: hidden;
   border-radius: $borderradius-small;
 
@@ -32,33 +20,3 @@ $avatar-size: $badge-touch-size;
   align-self: flex-end;
   margin-left: $spacer * 0.5;
 }
-
-// OPTIONS
-// -------
-
-// BG WHITE
-
-.#{$n}-avatar--bg-white {
-  background-color: $white;
-}
-
-// ARROW RIGHT
-
-.#{$n}-avatar--arrow-right {
-  margin-right: $spacer * 0.25;
-  overflow: visible;
-
-  &::after {
-    content: '';
-    display: inline-block;
-    position: absolute;
-    top: 50%;
-    right: -($spacer * 0.3333);
-    width: 0;
-    height: 0;
-    transform: translateY(-50%);
-    border-top: $spacer * 0.25 solid transparent;
-    border-bottom: $spacer * 0.25 solid transparent;
-    border-left: ($spacer * 0.2) * 2 solid $avatar-bgcolor;
-  }
-}

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

@@ -1,13 +1,10 @@
-$buttons-line-height: 30px;
-$buttons-border-radius: $buttons-line-height * 0.5;
-$button-transition: $transition;
-
 .#{$n}-button {
   display: inline-block;
   margin: 0;
   padding: 0;
   border: 0;
   background: none;
+  font-size: $fontsize-medium;
   text-align: left;
   cursor: pointer;
 }
@@ -19,28 +16,24 @@ $button-transition: $transition;
   font-weight: inherit;
 }
 
-// VARIATIONS
-// ----------
-
 .#{$n}-button--primary {
-  min-height: $buttons-line-height;
-  padding: $spacer * 0.25 $spacer * 0.75;
-  border-radius: $buttons-border-radius;
-  border-color: set-border-color($brand3);
+  min-height: $buttonsize;
+  padding: $spacer * 0.5 $spacer * 0.75;
+  border-radius: $borderradius-small;
   background-color: $interaction;
   color: set-text-color($interaction);
   font-weight: $fontweight-bold;
 }
 
 .#{$n}-button--secondary {
-  padding: $spacer * 0.5;
+  padding: $spacer * 0.5 $spacer * 0.75;
   color: $interaction;
   font-weight: $fontweight-bold;
 }
 
 .#{$n}-button--tertiary {
   padding: $spacer * 0.1 $spacer * 0.25;
-  border-radius: $borderradius;
+  border-radius: $borderradius-small;
   background-color: initial;
   color: set-text-color($interaction);
   font-size: $fontsize-small;
@@ -52,38 +45,6 @@ $button-transition: $transition;
   cursor: auto;
 }
 
-.#{$n}-button--choose-again {
-  display: flex;
-  align-items: center;
-  margin: $spacer * 0.25 0 $spacer * 0.5;
-  padding: 0;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.#{$n}-button--choose-again .#{$n}-icon {
-  display: flex;
-  flex: 0 0 $badge-touch-size * 0.25;
-  align-items: center;
-  justify-content: center;
-  width: $badge-touch-size * 0.25;
-  height: $badge-touch-size * 0.25;
-  margin: $spacer * 0.15 $spacer * 0.25;
-  transform-origin: 50% 50%;
-  transition: transform $button-transition;
-}
-
-.#{$n}-button--choose-again[aria-expanded='true'] .#{$n}-icon {
-  transform: rotate(180deg);
-}
-
-.#{$n}-button--choose-again .#{$n}-icon svg {
-  display: block;
-  width: 100%;
-}
-
 .#{$n}-button__state {
   display: inline-block;
   margin: $spacer * -0.15 $spacer * -0.15 $spacer * -0.15 $spacer * 0.15;

package/src/stylesheets/5-components/_chat-status.scss

@@ -1,63 +1,39 @@
-// ##### OPTIONS #####
-// ===================
-
-// BASE
-// ----
 .#{$n}-chat-status {
   display: flex;
+  position: absolute;
+  z-index: 1;
+  top: $spacer;
+  left: $spacer;
   align-items: center;
   justify-content: space-between;
-  padding: $spacer * 0.25 $spacer * 0.5;
-  border-bottom: 1px solid $grey-b;
+  width: calc(100% - #{$spacer * 2});
+  height: $buttonsize;
+  min-height: $buttonsize;
+  padding: $spacer * 0.25 $spacer;
+  border-radius: $borderradius-large;
   background-color: $white;
+  box-shadow: $boxshadow;
 }
 
-.#{$n}-chat-status.#{$n}-chat-status--cobrowsing {
-  border: 0 none;
-  background-color: $brand3;
+&.#{$n}-app--layout-window .#{$n}-chat-status {
+  width: calc(100% - #{$spacer * 2.5 + $buttonsize});
 }
 
 &.#{$n}-app--collapsed .#{$n}-chat-status {
   display: none;
 }
 
-// PARTS
-// -----
 .#{$n}-chat-status__title {
   display: flex;
+  flex: 1;
   align-items: center;
   margin: 0 $spacer * 0.5 0 0;
   color: $grey-e;
   font-size: $fontsize-small;
   font-weight: $fontweight-bold;
-  line-height: 1;
-}
-
-.#{$n}-chat-status--cobrowsing .#{$n}-chat-status__title {
-  color: $white;
-
-  &::before {
-    content: '';
-    display: block;
-    flex: 0 0 $spacer * 0.3;
-    width: $spacer * 0.3;
-    height: $spacer * 0.3;
-    margin-right: $spacer * 0.25;
-    animation-name: #{$app-name}-blink;
-    animation-duration: 1s;
-    animation-timing-function: ease-in-out;
-    animation-iteration-count: infinite;
-    animation-direction: normal;
-    animation-fill-mode: forwards;
-    border-radius: 50% 50%;
-    background-color: currentColor;
-  }
+  line-height: 1.25;
 }
 
 .#{$n}-chat-status .#{$n}-button--tertiary {
   color: $interaction;
 }
-
-.#{$n}-chat-status--cobrowsing .#{$n}-button--tertiary {
-  color: $white;
-}

package/src/stylesheets/5-components/_choice-prompt.scss

@@ -16,12 +16,43 @@
 }
 
 .#{$n}-choice-prompt__item .#{$n}-button {
-  display: block;
-  width: 100%;
+  display: inline-block;
   white-space: normal;
 }
 
 .#{$n}-choice-prompt__item--secondary .#{$n}-button {
+  padding: $spacer * 0.25 0;
   background-color: initial;
   color: $interaction;
 }
+
+.#{$n}-button--choose-again {
+  display: flex;
+  align-items: center;
+  margin: $spacer * 0.25 0 $spacer * 0.5;
+  padding: 0;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.#{$n}-button--choose-again .#{$n}-icon {
+  display: flex;
+  flex: 0 0 $iconsize-small * 0.5;
+  align-items: center;
+  justify-content: center;
+  width: $iconsize-small * 0.5;
+  height: $iconsize-small * 0.5;
+  margin: 0 $spacer * 0.5;
+  transform-origin: 50% 50%;
+  transition: transform $transition;
+}
+
+.#{$n}-button--choose-again .#{$n}-icon path {
+  fill: currentColor;
+}
+
+.#{$n}-button--choose-again[aria-expanded='true'] .#{$n}-icon {
+  transform: rotate(180deg);
+}

package/src/stylesheets/5-components/_collapse-button.scss

@@ -0,0 +1,16 @@
+.#{$n}-collapse-button {
+  display: flex;
+  position: absolute;
+  z-index: 1;
+  top: $spacer;
+  right: $spacer;
+  align-items: center;
+  justify-content: center;
+  width: $buttonsize;
+  height: $buttonsize;
+  padding: 0;
+  border: 0 none;
+  border-radius: 50% 50%;
+  background-color: $white;
+  box-shadow: $boxshadow;
+}

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

@@ -19,7 +19,7 @@
   margin: auto 0 0;
   padding: $spacer $spacer 0;
 
-  // FF and IE11 give wrong spacing at bottom otherwise
+  // FF bottom spacing bug
   &::after {
     content: '';
     display: block;
@@ -29,7 +29,18 @@
   }
 }
 
-.#{$n}-app--layout-inline .#{$n}-conversation {
+.#{$n}-chat-status ~ .#{$n}-app__container .#{$n}-conversation {
+  padding-top: $buttonsize + $spacer * 2;
+}
+
+.#{$n}-chat-status
+  ~ .#{$n}-app__container
+  .#{$n}-disclaimer
+  + .#{$n}-conversation {
+  padding-top: 0;
+}
+
+&.#{$n}-app--layout-inline .#{$n}-conversation {
   position: relative;
 }
 
@@ -41,4 +52,17 @@
 
 .#{$n}-conversation__item--new-participant {
   margin-top: $spacer;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.#{$n}-conversation__item--source-info {
+  margin-top: $spacer;
+  margin-bottom: $spacer;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }