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

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

@@ -1,41 +1,24 @@
-// ##### 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;
+  top: $spacer * -0.5;
+  right: $spacer * -0.5;
   align-items: center;
   justify-content: center;
-  width: $messagecount-size;
-  height: $messagecount-size;
+  width: $messagecountsize;
+  height: $messagecountsize;
   transform: scale(1);
+  transform-origin: 50% 50%;
   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;
+  background-color: $negative;
+  color: $white;
   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;
+  &:empty {
+    transform: scale(0);
+    transition: transform $transition;
+  }
 }

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

@@ -0,0 +1,23 @@
+.#{$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}-message--type-cta .#{$n}-button {
+  margin-bottom: $spacer * 0.5;
+  line-height: 2;
+  text-decoration: none;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}

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

@@ -0,0 +1,11 @@
+.#{$n}-message__info {
+  width: 100%;
+  margin-top: $spacer * 0.2;
+  color: $grey-d;
+  font-size: $fontsize-small;
+  line-height: 1.35;
+}
+
+.#{$n}-message--source-user .#{$n}-message__info {
+  text-align: right;
+}

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

@@ -0,0 +1,17 @@
+.#{$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}-message--source-user .#{$n}-message__translation-info {
+  text-align: right;
+}

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

@@ -1,385 +1,34 @@
-$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;
+.#{$n}-message.#{$n}-message--type-suggestions {
   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}-message + .#{$n}-message {
+  margin-top: $spacer * 0.5;
 }
 
-.#{$n}-conversation__item--source-info {
-  margin-top: $spacer;
-  margin-bottom: $spacer;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
+.#{$n}-message--source-info.#{$n}-message {
+  width: 90%;
+  max-width: 90%;
+  margin: 0 auto;
 
-  .#{$n}-message {
-    width: 90%;
-    max-width: 90%;
+  &::after {
+    content: '';
+    display: block;
+    width: $spacer;
+    height: 0;
     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;
+    border-top: 2px solid $brand3;
   }
 }
 
 .#{$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;
-  }
 }

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

@@ -1,31 +1,22 @@
-// ##### MODAL #####
-// ==================
-
-// VARS
-// ----
-
-$small-shadow-light: 0 $spacer * 0.2 $spacer * 0.3333 0 rgba(0, 0, 0, 0.1);
-$control-small-radius: $spacer;
-$button-transition: $transition;
-
-// BASE
-// ----
-
 .#{$n}-modal {
   @include boxSizing;
 
-  display: block;
   display: flex;
   position: fixed;
   z-index: 99;
   top: 0;
+  right: 0;
+  bottom: 0;
   left: 0;
   align-items: center;
   justify-content: center;
   width: 100%;
+  min-width: 100%;
   height: 100%;
-  max-height: 100%;
+  min-height: 100%;
   padding: $spacer;
+  transform: scale(1);
+  opacity: 1;
   background-color: rgba($app-bg, 0.8);
 }
 
@@ -39,7 +30,7 @@ $button-transition: $transition;
   border-radius: $borderradius;
   outline: 0;
   background-color: $app-bg;
-  box-shadow: $boxshadow-light;
+  box-shadow: $boxshadow-soft;
 }
 
 .#{$n}-modal__inner {
@@ -50,16 +41,14 @@ $button-transition: $transition;
   width: 100%;
   height: 100%;
   padding: $spacer * 0.5;
-  border-radius: $borderradius-small;
-  background-color: $grey-a;
 }
 
 .#{$n}-modal__image {
   display: block;
   flex: 0 0 auto;
   width: auto;
-  max-width: calc(95vw - (#{$spacer} * 2));
-  max-height: calc(95vh - (#{$spacer} * 2));
+  max-width: 100%;
+  max-height: 100%;
   border: $thin-border solid $grey-b;
 }
 
@@ -68,22 +57,21 @@ $button-transition: $transition;
   display: flex;
   position: absolute;
   top: $spacer;
-  right: $spacer * -0.5;
+  right: $spacer;
   align-items: center;
-  padding: $spacer * 0.5 $spacer;
-  transition: background-color $button-transition;
-  border: $thin-border solid $grey-b;
-  border-radius: $control-small-radius;
-  background-color: $app-bg;
-  box-shadow: $small-shadow-light;
-  color: $brand3;
-  font-size: $fontsize-medium;
+  min-height: $buttonsize;
+  padding: $spacer * 0.25 $spacer * 0.75;
+  border: 0 none;
+  border-radius: $borderradius-small;
+  background-color: $interaction;
+  color: set-text-color($interaction);
   font-weight: $fontweight-bold;
 
   .#{$n}-icon {
-    width: $badge-touch-size * 0.5;
-    height: $badge-touch-size * 0.5;
-    margin-right: $spacer * 0.25;
+    flex: 0 0 $iconsize-small;
+    width: $iconsize-small;
+    height: $iconsize-small;
+    margin-right: $spacer * 0.5;
 
     svg {
       width: inherit;
@@ -91,18 +79,8 @@ $button-transition: $transition;
     }
 
     svg path {
-      transition: fill $button-transition;
-      fill: $brand3;
-    }
-  }
-
-  &:hover {
-    transition: color $button-transition;
-    background-color: $brand3;
-    color: $app-bg;
-
-    svg path {
-      fill: $app-bg;
+      transition: fill $transition;
+      fill: $white;
     }
   }
 }
@@ -115,24 +93,16 @@ $button-transition: $transition;
   bottom: $spacer;
   align-items: center;
   justify-content: center;
-  width: $spacer * 1.6;
-  height: $spacer * 1.6;
+  width: $buttonsize;
+  height: $buttonsize;
   padding: 0;
   border: 0 none;
-  border-radius: $control-small-radius;
-  background: rgba($app-bg, 0.4);
+  border-radius: 50% 50%;
+  background-color: $white;
   color: transparent;
   font-size: 0;
 
-  svg path {
-    fill: $brand3;
-  }
-
-  &:hover {
-    background-color: $brand3;
-  }
-
-  &:hover .cvco-icon svg path {
-    fill: $white;
+  .#{$n}-icon svg path {
+    fill: $interaction;
   }
 }

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

@@ -1,8 +1,3 @@
-// ##### NOTIFICATION #####
-// ========================
-
-// BASE
-// ----
 .#{$n}-notification {
   display: block;
   width: 100%;