stream-chat-angular 4.66.2 → 5.0.0-v5.10

package/src/assets/styles/scss/MessageInput.scss

@@ -1,398 +0,0 @@
-.str-chat__input {
-  background: var(--white);
-  box-shadow: 0 -1px 3px 0 var(--border), 0 -1px 0 0 var(--border);
-  display: flex;
-  flex-wrap: wrap;
-  padding: var(--xs-p);
-  position: relative;
-  font-family: var(--second-font);
-  padding-bottom: 0;
-
-  &--emojipicker {
-    position: absolute;
-    bottom: 100%;
-    right: 0;
-  }
-
-  .rfu-file-previewer {
-    flex: 1 1 100%;
-  }
-
-  &--textarea-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    flex: 1 0;
-    position: relative;
-
-    .str-chat__textarea {
-      textarea {
-        padding-right: 72px;
-      }
-    }
-  }
-
-  &-emojiselect,
-  .rfu-file-upload-button {
-    position: absolute;
-    cursor: pointer;
-    width: 22px;
-    height: 22px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background-size: 44px 44px;
-    fill: var(--black60);
-
-    &:hover {
-      fill: var(--black);
-    }
-  }
-
-  &-emojiselect {
-    right: 20px;
-    top: calc(100% - 35px);
-  }
-
-  .rfu-file-upload-button {
-    right: 46px;
-    top: calc(100% - 34px);
-
-    &:focus-within {
-      outline: 5px auto -webkit-focus-ring-color;
-    }
-  }
-
-  &-footer {
-    display: flex;
-    justify-content: space-between;
-    font-size: var(--sm-font);
-    background: var(--white);
-    padding: 0 var(--xs-p) var(--xs-p) var(--xs-p);
-    color: var(--lighten-black);
-
-    &--typing {
-      font-style: italic;
-    }
-
-    &--count {
-      &--hidden {
-        visibility: hidden;
-      }
-    }
-  }
-}
-
-.dark .str-chat__textarea {
-  textarea::placeholder {
-    color: var(--white30);
-  }
-}
-
-.str-chat__textarea {
-  height: auto;
-  flex: 1;
-
-  textarea {
-    width: 100%;
-    outline: none;
-    padding: var(--sm-p);
-    background: var(--white);
-    border: 1px solid var(--border);
-    border-radius: var(--border-radius-md);
-    font-size: var(--lg-font);
-    min-height: 42px;
-    transition: height 100ms ease-in;
-    resize: none;
-
-    &:focus {
-      background: var(--white);
-      border: 1px solid var(--primary-color);
-      box-shadow: 0 0 0 2px var(--primary-color-faded);
-    }
-
-    &::placeholder {
-      color: var(--black50);
-    }
-  }
-}
-
-.str-chat__emojisearch {
-  bottom: calc(100%);
-  left: 0;
-  width: calc(100% - 20px);
-  position: absolute;
-  background: var(--white95);
-  box-shadow: 0 0 1px 0 var(--black30), 0 0 6px 0 var(--black10);
-  z-index: 10001;
-  border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
-  margin: 0 var(--xs-m);
-  max-height: 360px;
-  overflow-y: auto;
-
-  &__list {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
-  }
-}
-
-.dark.str-chat {
-  .str-chat__emojisearch {
-    background: var(--dark-grey);
-    box-shadow: 0 0 1px 0 var(--black30), 0 0 6px 0 var(--black10);
-    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
-
-    .rta__list-header {
-      background: var(--dark-grey);
-      border: 1px solid var(--white5);
-      box-shadow: 0 2px 1px 0 var(--black5);
-      color: var(--white);
-    }
-
-    .rta__entity {
-      color: var(--white);
-    }
-  }
-
-  .rfu-file-previewer__file {
-    a {
-      color: var(--white);
-    }
-
-    &:hover {
-      background: transparent;
-    }
-  }
-
-  .rfu-file-previewer__close-button {
-    color: var(--white);
-  }
-}
-
-.rta {
-  font-size: var(--md-font);
-}
-
-.rta__entity {
-  cursor: pointer;
-  width: 100%;
-  border: none;
-  background: transparent;
-}
-
-.rta__entity--selected {
-  background-color: var(--primary-color);
-  color: var(--white);
-  width: 100%;
-}
-
-// Using separate rules for Angular so React SDK integrators don't have problems with "!important"
-// Angular needs "!imporant" to override angular-mentions styles
-.active.mention-active > a /* angular-mentions autocomplete */ {
-  background-color: var(--primary-color) !important;
-  color: var(--white) !important;
-}
-
-.rta__list {
-  border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
-}
-
-.rta__list-header {
-  padding: var(--sm-p);
-  font-size: var(--md-font);
-}
-
-.str-chat__emoji-item {
-  padding: 0 var(--md-p);
-  display: flex;
-  align-items: center;
-  margin: 0 calc(-1 * var(--xs-m));
-
-  &--entity {
-    min-width: 24px;
-  }
-
-  &--highlight {
-    font-weight: var(--font-weight-bold);
-    font-size: var(--sm-font);
-  }
-
-  &--part {
-    font-size: var(--sm-font);
-  }
-}
-
-.str-chat__slash-command {
-  padding: var(--xs-p) var(--sm-p);
-  font-size: var(--md-font);
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-
-  br {
-    display: none;
-  }
-
-  &-description {
-    font-size: var(--sm-font);
-  }
-}
-
-.str-chat__user-item {
-  padding: var(--xs-p) var(--sm-p);
-  display: flex;
-  align-items: center;
-
-  &--highlight {
-    font-weight: var(--font-weight-bold);
-    font-size: var(--sm-font);
-  }
-
-  &--part {
-    font-size: var(--sm-font);
-  }
-}
-
-.str-chat {
-  .rfu-dropzone .rfu-dropzone__notifier {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    padding: var(--xxs-p);
-    z-index: 1001;
-    display: none;
-  }
-
-  .rfu-dropzone--accept .rfu-dropzone__notifier {
-    background: var(--primary-color-faded);
-    display: block;
-  }
-
-  .rfu-dropzone--reject .rfu-dropzone__notifier {
-    background: var(--red);
-    display: block;
-  }
-}
-
-.rfu-dropzone__inner {
-  width: 100%;
-  height: 100%;
-  padding: 0 var(--lg-p);
-  border: 1px dashed transparent;
-  box-sizing: border-box;
-  display: flex;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  color: var(--white);
-  font-weight: 800;
-  font-size: var(--sm-font);
-
-  svg {
-    display: none;
-  }
-}
-
-.rfu-dropzone--reject .rfu-dropzone__inner {
-  display: none;
-}
-
-.str-chat__file-uploads {
-  max-height: 300px;
-  flex: 1 1 100%;
-  overflow-y: auto;
-}
-
-.rfu-file-upload-button svg {
-  fill: var(--grey);
-}
-
-.dark.str-chat {
-  .str-chat__input {
-    background: var(--white5);
-    box-shadow: 0 -1px 1px 0 var(--black30);
-
-    &-footer {
-      background: var(--white5);
-    }
-
-    textarea {
-      background: var(--black10);
-      border: 1px solid var(--black40);
-      border-radius: var(--border-radius-sm);
-      color: var(--white);
-    }
-
-    .str-chat__input-emojiselect {
-      svg {
-        fill: var(--white);
-      }
-    }
-
-    .rfu-file-upload-button {
-      svg {
-        fill: var(--white);
-      }
-    }
-  }
-}
-
-.str-chat__fileupload-wrapper {
-  .str-chat__tooltip {
-    display: none;
-    bottom: 35px;
-    right: 50px;
-  }
-
-  &:hover {
-    .str-chat__tooltip {
-      display: block;
-    }
-  }
-}
-
-.str-chat__emojiselect-wrapper {
-  .str-chat__tooltip {
-    display: none;
-    bottom: 35px;
-    right: 24px;
-  }
-
-  &:hover {
-    .str-chat__tooltip {
-      display: block;
-    }
-  }
-}
-
-.str-chat__small-message-input--textarea-wrapper {
-  .str-chat__fileupload-wrapper {
-    .str-chat__tooltip {
-      bottom: 32px;
-      right: 32px;
-    }
-  }
-
-  .str-chat__emojiselect-wrapper {
-    .str-chat__tooltip {
-      bottom: 32px;
-      right: 10px;
-    }
-  }
-
-  .str-chat__input-small-cooldown {
-    position: absolute;
-    right: 20px;
-    font-size: var(--lg-font);
-    font-weight: var(--font-weight-bold);
-    top: 6px;
-  }
-}
-
-.str-chat__message-textarea-angular-host--autocomplete-hidden {
-  mention-list  {
-    display: none;
-  }
-}

package/src/assets/styles/scss/MessageInputFlat.scss

@@ -1,323 +0,0 @@
-.str-chat__input-flat {
-  background: var(--white);
-  padding: var(--xs-p) var(--xl-p);
-  position: relative;
-  z-index: 1;
-  width: 100%;
-
-  &-quoted {
-    border-top: 1px solid var(--black10);
-
-    .quoted-message-preview {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: var(--xs-m);
-      width: 100%;
-      position: relative;
-
-      &-header {
-        font-size: var(--md-font);
-        margin-bottom: var(--xs-m);
-
-        .str-chat__square-button {
-          position: absolute;
-          right: 0;
-          top: 0;
-          margin: unset;
-          padding: var(--xs-p);
-          border-radius: var(--border-radius);
-          cursor: pointer;
-        }
-      }
-
-      &-content {
-        display: flex;
-        align-items: flex-end;
-        background: var(--grey-whisper);
-        border-radius: var(--border-radius-md) var(--border-radius-md) var(--border-radius-md) 0;
-        max-width: 60%;
-        padding: var(--xs-p) var(--sm-p);
-
-        &-inner {
-          display: flex;
-          text-align: start;
-          align-items: flex-end;
-          word-break: break-all;
-          word-wrap: break-word;
-
-          .str-chat__message-attachment {
-            margin: 0;
-
-            &--image {
-              width: 48px;
-            }
-
-            &--img,
-            &--card {
-              border-radius: var(--border-radius-md);
-              max-height: 48px;
-              max-width: 48px;
-              width: 100%;
-            }
-
-            &--file {
-              min-width: 33%;
-            }
-
-            &-file {
-              &--item {
-                background: var(--white);
-                border-radius: var(--border-radius-md);
-                border-left: none;
-                padding: 0 var(--xs-p);
-              }
-            }
-
-            &-card--image {
-              border: none;
-              border-radius: var(--border-radius-md);
-            }
-          }
-
-          :nth-child(2) {
-            margin-left: var(--xs-m);
-          }
-        }
-      }
-
-      .str-chat__message-attachment-card {
-        margin: 0;
-        min-height: unset;
-
-        .str-chat__message-attachment-card--content {
-          display: none;
-        }
-      }
-    }
-  }
-
-  &-has-attachments {
-    .str-chat__send-button {
-      display: block;
-    }
-  }
-
-  &-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .str-chat__textarea {
-    flex: 1;
-
-    &.str-chat-angular__textarea {
-      position: relative;
-    }
-  }
-
-  .str-chat__textarea > textarea {
-    min-height: 56px;
-    background: var(--grey-whisper);
-    border-radius: var(--border-radius-md);
-    padding: 20px 69px;
-    font-size: var(--lg-font);
-    line-height: 17px;
-    border: none;
-    margin: 0;
-
-    &:focus {
-      border: none;
-      color: var(--black);
-      border-radius: var(--border-radius-md);
-      box-shadow: 0 0 0 3px var(--primary-color);
-    }
-  }
-
-  &-footer {
-    padding: var(--xs-p) var(--xl-p);
-    background: var(--white);
-  }
-
-  &-emojiselect {
-    position: absolute;
-    top: calc(100% - 45px);
-    left: 25px;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    background-color: transparent;
-
-    &.str-chat-angular__emojiselect {
-      max-width: 28px;
-      top: 50%;
-      transform: translateY(-50%);
-      cursor: initial;
-    }
-
-    svg {
-      fill: var(--black);
-      opacity: 0.5;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  &-cooldown {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding-left: var(--xs-p);
-
-    .str-chat__message-input-cooldown-text {
-      font-size: var(--xl-font);
-      font-weight: var(--font-weight-bold);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 50px;
-      height: 50px;
-      background-color: var(--grey);
-      color: var(--white);
-      border-radius: var(--border-radius-round);
-    }
-  }
-
-  &--textarea-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    flex: 1 0;
-    position: relative;
-
-    .str-chat__fileupload-wrapper {
-      .str-chat__tooltip {
-        bottom: 45px;
-        right: 25px;
-      }
-    }
-
-    .str-chat__emojiselect-wrapper {
-      .str-chat__tooltip {
-        bottom: 50px;
-        left: 32px;
-        right: unset;
-
-        &::after {
-          left: 5px;
-          right: unset;
-        }
-      }
-    }
-  }
-
-  .str-chat__input--emojipicker {
-    left: 0;
-    right: auto;
-  }
-
-  .rfu-dropzone {
-    width: 100%;
-  }
-
-  .rfu-file-previewer {
-    width: 100%;
-  }
-
-  .rfu-file-upload-button {
-    position: absolute;
-    top: calc(100% - 40px);
-    right: 25px;
-
-    svg {
-      fill: var(--black);
-      opacity: 0.5;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-}
-
-.rfu-image-previewer,
-.rfu-image-previewer-angular-host {
-  flex: 1 1 100%;
-
-  &__image {
-    width: 60px !important;
-    height: 60px !important;
-
-    .rfu-thumbnail__wrapper {
-      width: 60px !important;
-      height: 60px !important;
-      border-radius: var(--border-radius-md);
-
-      .rfu-thumbnail__overlay,
-      .rfu-icon-button {
-        padding: 0;
-
-        svg {
-          opacity: 0.9;
-          height: 25px;
-          width: 25px;
-
-          path {
-            fill: var(--white-snow);
-          }
-        }
-      }
-    }
-  }
-
-  .rfu-thumbnail-placeholder {
-    width: 60px;
-    height: 60px;
-    border-radius: var(--border-radius-md);
-  }
-}
-
-.commerce.str-chat {
-  .str-chat__input-flat {
-    padding: 8px 24px;
-    background: transparent;
-  }
-}
-
-.dark.str-chat {
-  .str-chat__input-flat {
-    background: var(--white5);
-
-    textarea {
-      background: var(--white5);
-      border-radius: var(--border-radius-md);
-      color: var(--white);
-    }
-
-    &-emojiselect,
-    .rfu-file-upload-button {
-      svg {
-        fill: var(--white);
-      }
-    }
-
-    &-quoted .quoted-message-preview-content {
-      background: var(--black20);
-    }
-  }
-
-  &.commerce {
-    .str-chat__input-flat {
-      background: none;
-    }
-  }
-}
-
-@media screen and (max-width: 960px) {
-  .str-chat.messaging {
-    .str-chat__input-flat {
-      padding: var(--xs-p) var(--xs-p);
-    }
-  }
-}