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

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

@@ -0,0 +1,57 @@
+// ##### FORM ELEMENTS #####
+// =========================
+
+// PARTS
+// ----
+.#{$n}-input__checkbox {
+  margin-right: $spacer * 0.5;
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}
+
+.#{$n}-label {
+  display: block;
+  margin-bottom: $spacer * 0.25;
+  color: $brand3;
+  font-size: $fontsize-medium;
+  font-weight: $fontweight-bold;
+}
+
+.#{$n}-input__checkbox:disabled + .#{$n}-label {
+  opacity: 0.5;
+}
+
+.#{$n}-input__select {
+  appearance: none;
+  width: 100%;
+  height: 100%;
+  padding: $spacer * 0.5;
+  transition: padding $transition;
+  border: $thin-border solid $grey-b;
+  border-radius: $borderradius-small;
+  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;
+  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 {
+    border: $thin-border solid $grey-c;
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxkZWZzLz48cGF0aCBmaWxsPSIjYTNiNGJmIiBkPSJNMi45OTgsNi41MDNjMC0wLjI0NywwLjA5MS0wLjQ5NCwwLjI3My0wLjY4N2MwLjM4LTAuNDAxLDEuMDEzLTAuNDE5LDEuNDE0LTAuMDRsMi41ODUsMi40NDYJYzAuMzk0LDAuMzczLDEuMDYsMC4zNzMsMS40NTQsMGwyLjU4Ni0yLjQ0NmMwLjQtMC4zNzksMS4wMzMtMC4zNjIsMS40MTMsMC4wNGMwLjM3OSwwLjQsMC4zNjIsMS4wMzQtMC4wMzksMS40MTRsLTIuNTg2LDIuNDQ2CWMtMS4xNTksMS4wOTYtMy4wNDMsMS4wOTYtNC4yMDMsMEwzLjMxLDcuMjI5QzMuMTAyLDcuMDMzLDIuOTk4LDYuNzY4LDIuOTk4LDYuNTAzeiIvPjwvc3ZnPg==');
+    color: $grey-c;
+  }
+}

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

@@ -0,0 +1,64 @@
+// ##### 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;
+  overflow: hidden;
+  border-radius: $borderradius-small;
+
+  > .#{$n}-icon {
+    display: block;
+  }
+}
+
+.#{$n}-avatar__graphic {
+  display: block;
+}
+
+.#{$n}-conversation__message + .#{$n}-avatar {
+  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/7-deprecated/5-components/_buttons.scss

@@ -0,0 +1,94 @@
+$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;
+  text-align: left;
+  cursor: pointer;
+}
+
+.#{$n}-button span {
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  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);
+  background-color: $interaction;
+  color: set-text-color($interaction);
+  font-weight: $fontweight-bold;
+}
+
+.#{$n}-button--secondary {
+  padding: $spacer * 0.5;
+  color: $interaction;
+  font-weight: $fontweight-bold;
+}
+
+.#{$n}-button--tertiary {
+  padding: $spacer * 0.1 $spacer * 0.25;
+  border-radius: $borderradius;
+  background-color: initial;
+  color: set-text-color($interaction);
+  font-size: $fontsize-small;
+  font-weight: $fontweight-bold;
+}
+
+.#{$n}-button--disabled {
+  color: $disabled;
+  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;
+  padding: $spacer * 0.15 $spacer * 0.25;
+  border-radius: $borderradius-small;
+  background-color: $grey-a;
+  color: inherit;
+}

package/src/stylesheets/7-deprecated/5-components/_character-limit.scss

@@ -0,0 +1,36 @@
+.#{$n}-character-count {
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  align-items: center;
+  justify-content: right;
+  height: 100%;
+  padding: 0 $spacer * 0.5;
+  transform: translateX(100%);
+  transition: transform $transition, opacity 0.2s 0.2s ease;
+  opacity: 0;
+  font-size: $fontsize-small;
+  font-weight: $fontweight-bold;
+  line-height: 1;
+  text-align: right;
+  pointer-events: none;
+
+  span {
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    text-align: right;
+  }
+}
+
+.#{$n}-character-warning .#{$n}-character-count,
+.#{$n}-character-exceeded .#{$n}-character-count {
+  transform: translateX(0%);
+  opacity: 1;
+}
+
+.#{$n}-character-exceeded .#{$n}-character-count span {
+  color: $negative;
+}

package/src/stylesheets/{5-components/_cobrowsing.scss → 7-deprecated/5-components/_chat-status.scss}

@@ -1,38 +1,41 @@
-// ##### OPTIONS #####
+// ##### CHAT STATUS #####
 // ===================
 
 // BASE
 // ----
-.#{$n}-cobrowsing {
+.#{$n}-chat-status {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: $spacer * 0.25 $spacer * 0.5;
-  background-color: $brand3;
+  padding: $spacer * 0.5;
+  border-bottom: $thin-border solid $grey-b;
+  background-color: $white;
 }
 
-&.#{$n}-app--collapsed .#{$n}-cobrowsing {
+&.#{$n}-app--collapsed .#{$n}-chat-status {
   display: none;
 }
 
 // PARTS
 // -----
-.#{$n}-cobrowsing__title {
+.#{$n}-chat-status__title {
   display: flex;
   align-items: center;
   margin: 0 $spacer * 0.5 0 0;
-  color: $white;
-  font-size: $fontsize-medium;
+  color: $grey-e;
+  font-size: $fontsize-small;
   font-weight: $fontweight-bold;
   line-height: 1;
+}
 
+.#{$n}-chat-status--cobrowsing .#{$n}-chat-status__title {
   &::before {
     content: '';
     display: block;
-    flex: 0 0 $spacer * 0.25;
-    width: $spacer * 0.25;
-    height: $spacer * 0.25;
-    margin-right: $spacer * 0.5;
+    flex: 0 0 $spacer * 0.5;
+    width: $spacer * 0.5;
+    height: $spacer * 0.5;
+    margin-right: $spacer * 0.25;
     animation-name: #{$app-name}-blink;
     animation-duration: 1s;
     animation-timing-function: ease-in-out;
@@ -40,11 +43,10 @@
     animation-direction: normal;
     animation-fill-mode: forwards;
     border-radius: 50% 50%;
-    background-color: $white;
+    background-color: $interaction;
   }
 }
 
-.#{$n}-cobrowsing .#{$n}-button--tertiary {
-  border-color: $white;
-  color: $white;
+.#{$n}-chat-status .#{$n}-button--tertiary {
+  color: $interaction;
 }

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

@@ -0,0 +1,27 @@
+.#{$n}-choice-prompt {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.#{$n}-choice-prompt__item {
+  display: block;
+  width: 100%;
+  margin-top: $spacer * 0.25;
+  margin-left: 0;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.#{$n}-choice-prompt__item .#{$n}-button {
+  display: block;
+  width: 100%;
+  white-space: normal;
+}
+
+.#{$n}-choice-prompt__item--secondary .#{$n}-button {
+  background-color: initial;
+  color: $interaction;
+}

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

@@ -0,0 +1,17 @@
+// ##### COLLAPSE BUTTON #####
+// ===========================
+
+.#{$n}-collapse-button {
+  display: block;
+  position: absolute;
+  z-index: 1;
+  top: $spacer;
+  right: $spacer;
+  width: $badge-touch-size;
+  height: $badge-touch-size;
+  padding: 0;
+  border: 0 none;
+  border-radius: 50% 50%;
+  background-color: $white;
+  box-shadow: $boxshadow;
+}

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

@@ -0,0 +1,44 @@
+.#{$n}-conversation__container {
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  flex: 1 1 100%;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  max-height: 100%;
+}
+
+.#{$n}-conversation {
+  @include unList;
+
+  width: 100%;
+  margin: auto 0 0;
+  padding: $spacer $spacer 0;
+
+  // FF and IE11 give wrong spacing at bottom otherwise
+  &::after {
+    content: '';
+    display: block;
+    flex: 0 0 100%;
+    width: 100%;
+    height: $spacer;
+  }
+}
+
+.#{$n}-app--layout-inline .#{$n}-conversation {
+  position: relative;
+}
+
+.#{$n}-conversation__item {
+  width: 100%;
+  min-height: 0;
+  margin-top: $spacer * 0.5;
+}
+
+.#{$n}-conversation__item--new-participant {
+  margin-top: $spacer;
+}

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

@@ -0,0 +1,36 @@
+// ##### 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;
+  background-color: $grey-a;
+}
+
+&.#{$n}-app--collapsed .#{$n}-disclaimer {
+  display: none;
+}
+
+.#{$n}-disclaimer__title {
+  margin: 0 0 $spacer * 0.25;
+  padding-right: $spacer;
+  font-size: $fontsize-small;
+  font-weight: $fontweight-bold;
+  line-height: 1;
+}
+
+.#{$n}-disclaimer__message {
+  font-size: $fontsize-small;
+  line-height: 1.25;
+}

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

@@ -0,0 +1,91 @@
+.#{$n}-divider {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  margin: $spacer $spacer * -1 0;
+  padding: $spacer * 3.25 $spacer * 1.5 0;
+  overflow: hidden;
+  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 {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 100%;
+    height: 2 * $spacer;
+    transform: translateX(-50%);
+    background: radial-gradient(
+      110px at 50% 300%,
+      rgba($brand3, 0.5) 0%,
+      rgba($white, 0) 99.99%,
+      rgba($brand3, 0) 100%
+    );
+    background-repeat: no-repeat;
+  }
+}
+
+.#{$n}-divider--type-time-indicator {
+  padding-top: $spacer * 3;
+  padding-bottom: $spacer;
+
+  &::before {
+    display: none;
+  }
+}
+
+.#{$n}-conversation__item:first-child .#{$n}-divider {
+  margin-top: 0;
+  padding-bottom: $spacer * 0.5;
+}
+
+.#{$n}-divider__graphic {
+  position: absolute;
+  top: 2 * $spacer;
+  left: 50%;
+  width: $badge-touch-size;
+  height: $badge-touch-size;
+  transform: translate(-50%, -60%);
+  border-radius: $borderradius-small;
+  background: $white;
+}
+
+.#{$n}-divider__graphic .#{$n}-avatar,
+.#{$n}-divider__graphic .#{$n}-icon,
+.#{$n}-divider__graphic .#{$n}-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.#{$n}-divider__time {
+  text-align: center;
+}
+
+.#{$n}-divider__time span {
+  display: block;
+
+  &:first-of-type {
+    font-weight: bold;
+  }
+}
+
+.#{$n}-divider--type-newtranslation {
+  text-align: center;
+
+  .#{$n}-divider__body {
+    max-width: 80%;
+  }
+  .#{$n}-divider__title {
+    font-weight: bold;
+  }
+}
+
+.#{$n}-divider .#{$n}-button {
+  padding: 0;
+  font-size: inherit;
+}

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

@@ -0,0 +1,24 @@
+// ##### ERROR #####
+// =================
+
+// BASE
+// ----
+.#{$n}-error {
+  display: flex;
+  align-items: flex-start;
+  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;
+
+  .#{$n}-icon {
+    flex: 0 0 16px;
+    width: 16px;
+    height: 16px;
+    margin-right: $spacer * 0.25;
+  }
+}

package/src/stylesheets/{5-components → 7-deprecated/5-components}/_faq.scss

@@ -9,6 +9,8 @@
 
 &.#{$n}-app--layout-window .#{$n}-faqs {
   overscroll-behavior: contain;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -ms-scroll-chaining: none;
 }
 
 &.#{$n}-app--layout-inline .#{$n}-faqs {
@@ -18,9 +20,9 @@
     left: 50%;
     flex-direction: column;
     width: 50%;
-    height: 100%;
-    min-height: 100%;
-    overflow: hidden;
+    height: $app-inline-height;
+    min-height: $spacer * 24;
+    max-height: 100%;
     transform: translateX(-100%);
     border: $thin-border solid set-border-color($app-bg);
     border-left: 0;
@@ -57,6 +59,9 @@
 
 &.#{$n}-app--layout-inline .#{$n}-faqs.#{$n}-transition--in {
   @include media('>phablet-l') {
+    height: $app-inline-height;
+    min-height: $spacer * 24;
+    max-height: 100%;
     overflow-y: initial;
     transform: translateX(0%);
   }

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

@@ -0,0 +1,4 @@
+.#{$n}-icon {
+  display: inline-block;
+  line-height: 1;
+}

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

@@ -0,0 +1,61 @@
+// ##### IDLE #####
+// ========================
+
+// BASE
+// ----
+.#{$n}-idle {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  max-height: initial;
+  padding: $spacer * 0.5;
+}
+
+// PARTS
+// -----------
+
+.#{$n}-idle__title {
+  margin-top: 0;
+  margin-bottom: $spacer * 0.25;
+  font-size: $fontsize-default;
+  font-weight: bold;
+  text-align: center;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.#{$n}-idle__count-container {
+  display: block;
+  width: 100%;
+  height: 2.75em;
+  margin-bottom: $spacer * 0.5;
+  font-size: $fontsize-small;
+}
+
+.#{$n}-idle__count-text,
+.#{$n}-idle__count-timer {
+  display: block;
+  width: 100%;
+  font-size: inherit;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.#{$n}-idle__options {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.#{$n}-idle__options .#{$n}-button {
+  margin: $spacer * 0.25 $spacer * 0.25 0;
+  text-align: center;
+  white-space: normal;
+}