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

package/src/stylesheets/6-webui-only/_hover.scss

@@ -0,0 +1,151 @@
+@media (hover: hover) {
+  .#{$n}-button.#{$n}-collapse-button,
+  .#{$n}-modal__enlarge,
+  .#{$n}-modal__close {
+    transition: background-color $transition;
+
+    &:hover {
+      background-color: $interaction-dark;
+    }
+
+    path {
+      transition: fill $transition;
+    }
+
+    &:hover svg path {
+      fill: $white;
+    }
+  }
+
+  .#{$n}-button {
+    transition: color $transition, background-color $transition;
+  }
+
+  .#{$n}-button--primary:not(.#{$n}-button--disabled) {
+    &:hover {
+      background-color: $interaction-dark;
+    }
+  }
+
+  .#{$n}-button--secondary:not(.#{$n}-button--disabled),
+  .#{$n}-button--tertiary:not(.#{$n}-button--disabled) {
+    &:hover {
+      color: $interaction-dark;
+    }
+  }
+
+  .#{$n}-choice-prompt__item--secondary .#{$n}-button {
+    &:hover {
+      background-color: initial;
+      color: $interaction-dark;
+    }
+  }
+
+  .#{$n}-message--type-cta .#{$n}-button {
+    &:hover {
+      background-color: $white;
+      color: $interaction-dark;
+    }
+  }
+
+  .#{$n}-message__body a {
+    transition: color $transition;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .#{$n}-conversation__item--source-agent
+    .#{$n}-message__body.#{$n}-message__body
+    a {
+    &:hover {
+      color: $interaction-dark;
+    }
+  }
+
+  .#{$n}-input__text {
+    transition: padding $transition, border $transition;
+
+    &:hover {
+      border-color: $interaction-dark;
+    }
+
+    &:focus {
+      border-color: transparent;
+    }
+  }
+
+  .#{$n}-input__submit:not(:disabled):hover .#{$n}-icon path {
+    fill: $interaction-dark;
+  }
+
+  .#{$n}-card__content.#{$n}-card__content .#{$n}-button.#{$n}-button:hover {
+    color: $white;
+  }
+
+  .#{$n}-carousel__controls .#{$n}-button .#{$n}-icon svg path {
+    transition: fill $transition;
+  }
+
+  .#{$n}-carousel__controls .#{$n}-button:hover .#{$n}-icon svg path {
+    fill: $interaction-dark;
+  }
+
+  .#{$n}-carousel-pagination__button::before {
+    transition: background-color $transition;
+  }
+
+  .#{$n}-carousel-pagination__button:hover::before {
+    background-color: $interaction-dark;
+  }
+
+  .#{$n}-upload-toggle path {
+    transition: fill $transition;
+  }
+
+  .#{$n}-upload-toggle:hover path {
+    background-color: $interaction-dark;
+  }
+
+  .#{$n}-file-upload {
+    transition: border $transition;
+
+    &:hover {
+      border-color: $interaction-dark;
+    }
+  }
+
+  .#{$n}-upload__label {
+    transition: color $transition;
+
+    &:hover {
+      color: $interaction-dark;
+    }
+  }
+
+  .#{$n}-options__menu__item:not(.#{$n}-button--disabled) {
+    transition: color $transition;
+
+    &:hover {
+      color: $interaction-dark;
+    }
+  }
+
+  .#{$n}-options__close {
+    transition: color $transition;
+
+    &:hover {
+      color: $interaction-dark;
+    }
+  }
+
+  .#{$n}-transcript__input,
+  .#{$n}-input__select {
+    transition: border $transition;
+
+    &:hover {
+      border-color: $interaction-dark;
+    }
+  }
+}

package/src/stylesheets/6-webui-only/_scrollbar.scss

@@ -0,0 +1,31 @@
+.#{$n}-app__body,
+.#{$n}-app--layout-inline .#{$n}-suggestions__list,
+.#{$n}-options__wrapper {
+  scrollbar-color: $brand1 transparent;
+
+  &::-webkit-scrollbar {
+    width: $spacer * 0.75;
+    height: $spacer * 0.75;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    width: $spacer * 0.75;
+    height: $spacer * 0.75;
+    transition: background-color $transition;
+    border: $spacer * 0.25 solid transparent;
+    background-clip: padding-box;
+    border-radius: $borderradius;
+    background-color: $grey-c;
+  }
+
+  &::-webkit-scrollbar-button {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+}

package/src/stylesheets/7-deprecated/1-settings/_animations.scss

@@ -0,0 +1,43 @@
+// ##### ANIMATIONS #####
+// ======================
+
+// LOADER
+
+@keyframes #{$n}-loader {
+  0%,
+  75%,
+  100% {
+    transform: scaleY(0.45);
+    border-radius: 50% 50%;
+  }
+
+  37.5% {
+    transform: scaleY(1);
+    border-radius: $spacer * 0.125;
+  }
+}
+
+// FADEIN
+
+@keyframes #{$n}-fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+// BLINK
+
+@keyframes #{$n}-blink {
+  0%,
+  100% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}

package/src/stylesheets/7-deprecated/1-settings/_config.scss

@@ -0,0 +1,105 @@
+// ##### CONFIG #####
+// ==================
+
+// VARIABLES
+// ---------
+
+// APP NAME
+// set top class name of app.
+$app-name: 'cvco' !default;
+$n: $app-name !default;
+
+// PATHS
+// usage: url(#{$image-path}arrow.svg)
+$image-path: '../../img/' !default;
+
+// BRAND COLORS
+$brand1: #003a5d !default; // 'primary'
+$brand2: #223182 !default; // 'secondary'
+$brand3: #4a48c1 !default; // 'tertiary'
+
+// UI COLORS
+$interaction: $brand3 !default;
+
+$highlight: #ffc700 !default;
+
+$positive: #00875e !default;
+$positive-light: #19b183 !default;
+
+$negative: #db1639 !default;
+$negative-dark: #ad001f !default;
+
+$grey-a: #eff3f6 !default;
+$grey-b: #dee3e5 !default;
+$grey-c: #a3b4bf !default;
+$grey-d: #6a7f8c !default;
+$grey-e: #3d4166 !default;
+
+$disabled: #5e727b; // 5:1
+
+$white: #fff !default;
+$black: #000 !default;
+
+// BACKGROUND COLORS
+$app-bg: $white !default;
+
+// TYPOGRAPHY
+$fontsize-tiny: 10px !default;
+$fontsize-small: 12px !default;
+$fontsize-medium: 14px !default;
+$fontsize-default: 16px !default;
+$fontsize-large: 18px !default;
+$fontsize-xlarge: 21px !default;
+
+$fontweight-bold: 700 !default;
+
+$fontfamily-default: arial, helvetica, sans-serif !default;
+
+// SPACER
+$spacer: 20px !default;
+$flex-spacer: 2vw !default;
+
+// BORDER
+$thin-border: 1px !default;
+
+// BORDER-RADIUS
+$borderradius: $spacer * 0.5 !default;
+$borderradius-small: $borderradius * 0.5 !default;
+
+// DIMENSIONS
+$app-initial-width: 195px !default;
+$app-started-width: 375px !default;
+
+$app-full-height: 720px !default;
+$app-collapsed-height: 54px !default;
+
+$app-inline-height: 480px !default;
+
+$post-full-height: 170px !default;
+$post-collapsed-height: 65px !default;
+
+$viewport-width: 100vw !default;
+$viewport-height: 100vh !default;
+
+$badge-touch-size: 32px !default;
+
+// Z-INDEX
+$z-index: 1 !default;
+
+// BOX SHADOWS
+$boxshadow: 0 $spacer * 0.25 $spacer * 1.5 hsla(204, 26%, 28%, 0.15),
+  0 $spacer * 0.15 $spacer * 0.5 hsla(204, 26%, 28%, 0.2) !default;
+$boxshadow-soft: 0 0 $spacer 0 rgba($black, 0.1) !default;
+
+// TRANSITIONS
+$transition: 0.3s ease-in-out !default;
+$transition-slow: 0.75s ease-in-out !default;
+
+// BREAKPOINTS
+$breakpoints: (
+  phablet: 480px,
+  phablet-l: 640px,
+  tablet: 767px,
+  desktop: 1024px,
+  desktop-l: 1200px,
+);

package/src/stylesheets/7-deprecated/2-tools/_functions.scss

@@ -0,0 +1,22 @@
+// ##### FUNCTIONS #####
+// =====================
+
+// SET TEXT COLOR
+
+@function set-text-color($color) {
+  @if (lightness($color) > 66.66) {
+    @return $grey-e;
+  } @else {
+    @return $white;
+  }
+}
+
+// SET BORDER COLOR
+
+@function set-border-color($color) {
+  @if (lightness($color) > 66.66) {
+    @return $grey-c;
+  } @else {
+    @return $white;
+  }
+}

package/src/stylesheets/7-deprecated/2-tools/_mixins.scss

@@ -0,0 +1,77 @@
+/* stylelint-disable selector-max-universal */
+
+// ##### MIXINS #####
+// ==================
+
+// BOX-SIZING
+// ----------
+
+@mixin boxSizing($value: border-box) {
+  box-sizing: $value;
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: $value;
+  }
+}
+
+// RESPONSIVE APP SIZING
+// ---------------------
+
+@mixin responsiveAppSizing() {
+  max-width: calc(#{$viewport-width} - #{$flex-spacer * 2});
+  max-height: calc(#{$viewport-height * 0.85} - #{$flex-spacer * 2});
+
+  @include media('>phablet-l') {
+    max-height: calc(#{$viewport-height} - #{$flex-spacer * 2});
+    // iOS Safari needs a bit more space
+    @supports (-webkit-overflow-scrolling: touch) {
+      max-height: calc(#{$viewport-height * 0.9} - #{$flex-spacer * 2});
+    }
+  }
+
+  @include media('>desktop') {
+    right: $spacer;
+    bottom: $spacer;
+    max-height: calc(#{$viewport-height} - #{$spacer * 2});
+    // iOS Safari needs a bit more space
+    @supports (-webkit-overflow-scrolling: touch) {
+      max-height: calc(#{$viewport-height * 0.9} - #{$spacer * 2});
+    }
+  }
+}
+
+// UNLIST
+// ------
+
+@mixin unList() {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+// STYLE PLACEHOLDER
+// -----------------
+
+@mixin stylePlaceholder() {
+  &::-webkit-input-placeholder {
+    // Chrome/Opera/Safari
+    @content;
+  }
+
+  &::-moz-placeholder {
+    // Firefox 19+
+    @content;
+  }
+
+  &:-ms-input-placeholder {
+    // IE 10+
+    @content;
+  }
+
+  &:-moz-placeholder {
+    // Firefox 18-
+    @content;
+  }
+}

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

@@ -0,0 +1,214 @@
+// See settings/_config.scss for vars
+$app-parts-padding: $spacer * 0.5;
+$app-header-bgcolor: $brand3;
+
+.#{$n}-app--deprecated {
+  @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;
+  outline: 0;
+  background-color: $app-bg;
+  box-shadow: $boxshadow-soft;
+  color: set-text-color($app-bg);
+  font-family: $fontfamily-default;
+  font-size: $fontsize-default;
+}
+
+.#{$n}-app--layout-inline.#{$n}-app--deprecated {
+  position: relative;
+  right: auto;
+  bottom: auto;
+  width: auto;
+  height: 100vh;
+  min-height: $spacer * 24;
+  max-height: $spacer * 32;
+  transition: height $transition, width $transition;
+  background-color: initial;
+  box-shadow: none;
+
+  @include media('>phablet-l') {
+    display: block;
+    border: 0 none;
+  }
+}
+
+.#{$n}-app--collapsed.#{$n}-app--deprecated {
+  width: $app-initial-width;
+  height: $app-collapsed-height;
+  border: 0;
+  background: none;
+  box-shadow: none;
+}
+
+.#{$n}-app--collapsed.#{$n}-app--started.#{$n}-app--deprecated {
+  width: $app-started-width;
+}
+
+.#{$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--deprecated .#{$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%;
+
+    &:last-child {
+      width: 67%;
+      margin-right: 33%;
+    }
+  }
+}
+
+.#{$n}-app__header {
+  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--deprecated .#{$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}-toggle-button {
+  display: none;
+  position: absolute;
+  z-index: $z-index;
+  flex-direction: column;
+  justify-content: center;
+  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;
+}
+
+.#{$n}-app--collapsed.#{$n}-app--deprecated .#{$n}-toggle-button {
+  display: flex;
+}
+
+.#{$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}-toggle-button__button {
+  position: absolute;
+  z-index: $z-index;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+
+  &:focus {
+    outline: 1px solid $white;
+    outline-offset: -5px;
+  }
+}
+
+.#{$n}-app__container {
+  display: flex;
+  position: relative;
+  flex: 1 1 auto;
+  flex-direction: column;
+  max-height: 100%;
+}
+
+.#{$n}-app__body {
+  display: flex;
+  position: relative;
+  flex-grow: 4;
+  padding: 0;
+  overflow-y: auto;
+  border-bottom: $thin-border solid $grey-b;
+}
+
+.#{$n}-app--collapsed.#{$n}-app--deprecated .#{$n}-app__body {
+  display: none;
+}
+
+.#{$n}-app--layout-window.#{$n}-app--deprecated .#{$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;
+
+  .#{$n}-entry__body--hidden {
+    display: none;
+  }
+}
+
+.#{$n}-app--collapsed.#{$n}-app--deprecated .#{$n}-app__entry {
+  display: none;
+}
+
+.#{$n}-entry__body {
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,14 @@
+/* stylelint-disable declaration-no-important */
+
+// ##### A11Y #####
+// ================
+
+// VISUALLY HIDDEN
+
+.#{$n}-visually-hidden {
+  position: absolute !important;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}

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

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