@seamly/web-ui 19.1.2 → 20.0.0-beta.2

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

@@ -0,0 +1,78 @@
+// ##### INPUT #####
+// ========================
+
+// BASE
+// ----
+.#{$n}-input {
+  display: flex;
+  flex: 1 1 100%;
+  width: 100%;
+  height: 100%;
+}
+
+// PARTS
+// -----
+.#{$n}-input--text__container {
+  display: flex;
+  position: relative;
+  flex: 1 1 100%;
+  height: 100%;
+  margin-right: $spacer * 0.25;
+}
+
+.#{$n}-input__text {
+  appearance: none;
+  flex-grow: 4;
+  height: 100%;
+  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;
+  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;
+    color: $grey-c;
+    line-height: $spacer;
+  }
+}
+
+.#{$n}-input--text__container .#{$n}-input__text {
+  width: 100%;
+  margin-right: 0;
+}
+
+.#{$n}-character-warning .#{$n}-input__text,
+.#{$n}-character-exceeded .#{$n}-input__text {
+  padding-right: $spacer * 2;
+}
+
+.#{$n}-character-exceeded .#{$n}-input__text {
+  border: $thin-border solid $negative;
+}
+
+.#{$n}-input__submit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: auto;
+  }
+
+  .#{$n}-icon {
+    width: $badge-touch-size;
+    height: $badge-touch-size;
+  }
+}

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

@@ -0,0 +1,35 @@
+.#{$n}-interrupt {
+  display: flex;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: $white;
+}
+
+.#{$n}-interrupt__body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: $spacer * 0.5;
+  padding: $spacer * 2;
+  border: $thin-border solid $grey-b;
+  border-radius: $borderradius;
+}
+
+.#{$n}-interrupt__title {
+  font-size: $fontsize-default;
+  font-weight: bold;
+}
+
+.#{$n}-interrupt__message {
+  margin-bottom: $spacer * 2;
+  font-size: $fontsize-default;
+}
+
+.#{$n}-interrupt__actions {
+  margin-top: auto;
+}

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

@@ -0,0 +1,78 @@
+// ##### LOADER #####
+// ==================
+
+// VARS
+
+$loader-animation-duration: 0.6s;
+$loader-quarter-duration: $loader-animation-duration * 0.2;
+
+// BASE
+// ----
+
+.#{$n}-loader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  height: $spacer;
+  padding: $spacer * 0.125 $spacer * 0.25;
+  animation: #{$app-name}-fadeIn $loader-animation-duration * 0.5 linear;
+}
+
+// PARTS
+// -----
+
+// PART
+
+.#{$n}-loader__part {
+  display: inline-block;
+  width: $spacer * 0.3333;
+  height: 100%;
+  margin-right: $spacer * 0.25;
+  transform: scaleY(0.45);
+  animation-name: #{$app-name}-loader;
+  animation-duration: $loader-animation-duration;
+  animation-timing-function: ease;
+  animation-delay: $loader-quarter-duration;
+  animation-iteration-count: infinite;
+  animation-direction: normal;
+  animation-fill-mode: forwards;
+  border-radius: 50% 50%;
+  background-color: currentColor;
+
+  &.#{$n}-one {
+    animation-delay: $loader-quarter-duration;
+  }
+
+  &.#{$n}-two {
+    animation-delay: $loader-quarter-duration * 2;
+  }
+
+  &.#{$n}-three {
+    animation-delay: $loader-quarter-duration * 3;
+  }
+
+  &.#{$n}-four {
+    margin-right: 0;
+    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/7-deprecated/5-components/_message-count.scss

@@ -0,0 +1,41 @@
+// ##### MESSAGECOUNT #####
+// ==================
+
+// VARS
+// ----
+
+$messagecount-bgcolor: $negative;
+$messagecount-textcolor: $white;
+$messagecount-size: $spacer;
+
+// BASE
+// ----
+
+.#{$n}-message-count {
+  display: flex;
+  position: absolute;
+  top: $spacer * -0.4;
+  right: $spacer * -0.4;
+  align-items: center;
+  justify-content: center;
+  width: $messagecount-size;
+  height: $messagecount-size;
+  transform: scale(1);
+  transition: transform 0.3s 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  border-radius: 50% 50%;
+  background-color: $messagecount-bgcolor;
+  color: $messagecount-textcolor;
+  font-size: $fontsize-small;
+  font-weight: $fontweight-bold;
+  line-height: 1;
+}
+
+.#{$n}-message-count.#{$n}-message-count__empty {
+  transform: scale(0);
+  transition: transform 0.3s 0s linear;
+}
+
+.#{$n}-message-count__hide {
+  transform: scale(0);
+  transition: transform 0.3s 0s linear;
+}

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

@@ -0,0 +1,385 @@
+$threadlist-agent-text-bgcolor: $grey-a;
+$threadlist-user-text-bgcolor: $brand2;
+$avatar-size: $badge-touch-size;
+
+.#{$n}-message {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 80%;
+  font-family: $fontfamily-default;
+  font-size: $fontsize-small;
+  line-height: 1.5;
+}
+
+.#{$n}-message + .#{$n}-message,
+.#{$n}-message + div > .#{$n}-message {
+  margin-top: $spacer * 0.5;
+}
+
+.#{$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__avatar {
+  width: $avatar-size * 0.5;
+  height: $avatar-size * 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}-divider--type-time-indicator + .#{$n}-message--source-user,
+.#{$n}-divider--type-time-indicator + .#{$n}-message--source-agent {
+  .#{$n}-message__author {
+    display: flex;
+  }
+}
+
+.#{$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);
+  }
+}
+
+.#{$n}-message__body:last-child {
+  margin-bottom: 0;
+}
+
+.#{$n}-message__info {
+  width: 100%;
+}
+
+.#{$n}-message__translation-info {
+  width: 100%;
+}
+
+.#{$n}-message__translation-label {
+  margin-right: $spacer * 0.25;
+  font-size: $fontsize-small;
+}
+
+.#{$n}-button.#{$n}-message__translation-toggle {
+  padding: 0;
+  font-size: inherit;
+}
+
+.#{$n}-conversation__item--source-info {
+  margin-top: $spacer;
+  margin-bottom: $spacer;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .#{$n}-message {
+    width: 90%;
+    max-width: 90%;
+    margin: 0 auto;
+
+    &::after {
+      content: '';
+      display: block;
+      width: $spacer;
+      height: 0;
+      margin: 0 auto;
+      border-top: 2px solid $brand3;
+    }
+  }
+
+  .#{$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 {
+  justify-content: flex-end;
+  margin-left: auto;
+
+  .#{$n}-message__author {
+    justify-content: flex-end;
+  }
+
+  .#{$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);
+    }
+  }
+
+  .#{$n}-message__avatar {
+    order: 2;
+    margin: 0 0 0 0.5em;
+  }
+
+  .#{$n}-message__author-name {
+    order: 1;
+  }
+
+  .#{$n}-message__info,
+  .#{$n}-message__translation-info {
+    text-align: right;
+  }
+}
+
+// Text
+.#{$n}-message--type-text {
+  .#{$n}-message__body {
+    p:only-child,
+    ul:only-child,
+    ol:only-child {
+      margin: 0;
+    }
+
+    p:last-child,
+    ul:last-child,
+    ol:last-child {
+      margin-bottom: 0;
+    }
+
+    p,
+    ul,
+    ol {
+      margin: 0 0 1em 0;
+    }
+
+    ul,
+    ol {
+      padding-left: 1.5em;
+    }
+
+    a {
+      color: $interaction;
+      word-wrap: break-word; // IE11
+      overflow-wrap: break-word;
+      word-break: break-word;
+      hyphens: auto;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &.cvco-message--source-user .#{$n}-message__body {
+    a {
+      color: $white;
+    }
+  }
+}
+
+// Loading
+.#{$n}-message--type-loading {
+  .#{$n}-message__body {
+    align-self: flex-start;
+  }
+}
+
+.#{$n}-message--type-loading.#{$n}-message--source-user {
+  .#{$n}-message__body {
+    align-self: flex-end;
+  }
+}
+
+// Choice Prompt
+.#{$n}-message--type-choice-prompt {
+  .#{$n}-message__body {
+    width: 100%;
+  }
+}
+
+.#{$n}-message--type-choice-prompt:not(.#{$n}-message--type-choice-prompt-selected) {
+  .#{$n}-message__body {
+    padding: 0;
+    background: none;
+  }
+}
+
+.#{$n}-message--type-choice-prompt-selected {
+  .#{$n}-message__choice-indicator {
+    $padding: 4px;
+
+    content: '';
+    position: absolute;
+    top: $spacer * 0.5;
+    right: 0;
+    width: 1.5em;
+    height: 1.5em;
+    padding: $padding;
+    transform: translate(48%, -$padding);
+    border-radius: 50%;
+    background: $white;
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+
+    > svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+
+// Image
+.#{$n}-message--type-image {
+  .#{$n}-message__body {
+    padding: 0;
+
+    img {
+      display: block;
+      width: 100%;
+      height: auto;
+      overflow: hidden;
+      border-radius: $borderradius;
+    }
+  }
+}
+
+// Video
+.#{$n}-message--type-video {
+  .#{$n}-message__body {
+    width: 100%;
+    padding: 0;
+    padding-bottom: 66%; // 6:4
+    background-color: $black;
+
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      border: 0 none;
+      border-radius: $borderradius;
+    }
+  }
+}
+
+// Download
+.#{$n}-message--type-upload {
+  .#{$n}-download {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .#{$n}-download a {
+    color: inherit;
+    text-align: left;
+    word-break: break-all;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .#{$n}-icon {
+    flex: 0 0 16px;
+    width: 16px;
+    height: 16px;
+    margin-right: $spacer * 0.5;
+  }
+
+  .#{$n}-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// Deleted
+.#{$n}-message--deleted .#{$n}-file-download {
+  text-decoration: line-through;
+}
+
+.#{$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;
+  }
+
+  .#{$n}-cta__content {
+    margin-bottom: $spacer * 0.5;
+    color: $white;
+    font-size: $fontsize-medium;
+    line-height: 1.5;
+  }
+
+  .#{$n}-cta__content p {
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  .#{$n}-button {
+    margin-bottom: $spacer * 0.5;
+    line-height: 2;
+    text-decoration: none;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// 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;
+  }
+}