stream-chat-react 11.21.0 → 12.0.0-rc.1

package/dist/scss/ReactionList.scss

@@ -1,197 +0,0 @@
-%background-reaction-list {
-  background: url('#{$assetsPath}/str-chat__reaction-list-sprite@1x.png') no-repeat;
-  background-size: 59px 101px;
-
-  @media only screen and (-webkit-min-device-pixel-ratio: 2),
-    only screen and (min-resolution: 2dppx) {
-    background-image: url('#{$assetsPath}/str-chat__reaction-list-sprite@2x.png');
-  }
-
-  @media only screen and (-webkit-min-device-pixel-ratio: 3),
-    only screen and (min-resolution: 3dppx) {
-    background-image: url('#{$assetsPath}/str-chat__reaction-list-sprite@3x.png');
-  }
-}
-
-.str-chat__message,
-.str-chat__message-commerce {
-  .str-chat__reaction-list {
-    @extend %background-reaction-list;
-
-    position: absolute;
-    right: 15px;
-    top: -28px;
-    z-index: 1;
-    height: 33px;
-    width: initial;
-    background-position: 0 -66px;
-    background-repeat: repeat-x;
-
-    &.str-chat__reaction-list-hidden {
-      display: none;
-    }
-
-    ul {
-      position: relative;
-      list-style-type: none;
-      padding: 0;
-      font-size: var(--lg-font);
-      line-height: 26px;
-      display: flex;
-      justify-content: center;
-      margin: -1px -16px 0 0;
-      z-index: 888;
-
-      button {
-        cursor: pointer;
-        background-color: transparent;
-        border: none;
-        display: flex;
-      }
-    }
-
-    .emoji-mart-emoji,
-    .str-chat__emoji {
-      display: flex;
-    }
-
-    &::after,
-    &::before {
-      @extend %background-reaction-list;
-
-      position: absolute;
-      content: '';
-      top: 0;
-      height: 33px;
-    }
-
-    &::after {
-      right: -26px;
-      width: 26px;
-      background-position: -33px -33px;
-    }
-
-    &::before {
-      left: -13px;
-      width: 13px;
-      background-position: -0 -33px;
-    }
-
-    &--reverse {
-      right: initial;
-      left: 15px;
-      position: absolute;
-
-      ul {
-        margin: -1px -4px 0 -16px;
-      }
-
-      &::after {
-        right: -13px;
-        width: 13px;
-        background-position: -46px 0;
-      }
-
-      &::before {
-        left: -26px;
-        width: 26px;
-        background-position: -0 0;
-      }
-    }
-
-    li {
-      display: flex;
-      align-items: center;
-
-      button {
-        padding: 0;
-      }
-    }
-
-    &--counter {
-      color: var(--button-background);
-      font-size: var(--sm-font);
-    }
-
-    // Only displayed in theme-v2
-    .str-chat__message-reaction-count {
-      display: none;
-    }
-
-    // Only displayed in theme-v2
-    .str-chat__tooltip {
-      display: none;
-    }
-  }
-
-  &--me,
-  &--right {
-    .str-chat__message-commerce-inner {
-      > .str-chat__reaction-list {
-        left: 46px;
-      }
-    }
-
-    .str-chat__reaction-list {
-      right: initial;
-      left: 16px;
-
-      ul {
-        margin: -1px 0 0 -16px;
-      }
-
-      &::after {
-        right: -13px;
-        width: 13px;
-        background-position: -46px 0;
-      }
-
-      &::before {
-        left: -26px;
-        width: 26px;
-        background-position: -0 0;
-      }
-
-      &--reverse {
-        right: 15px;
-        left: initial;
-
-        ul {
-          margin: -1px -16px 0 0;
-        }
-
-        &::after {
-          right: -26px;
-          width: 26px;
-          background-position: -33px -33px;
-        }
-
-        &::before {
-          left: -13px;
-          width: 13px;
-          background-position: -0 -33px;
-        }
-      }
-    }
-  }
-}
-
-.str-chat__message-commerce {
-  &-inner {
-    > .str-chat__reaction-list {
-      left: unset;
-      right: 46px;
-    }
-  }
-
-  &--right {
-    .str-chat__message-commerce {
-      &-inner {
-        > .str-chat__reaction-list {
-          right: unset;
-          left: 46px;
-        }
-      }
-    }
-  }
-}

package/dist/scss/ReactionSelector.scss

@@ -1,218 +0,0 @@
-.str-chat__message-reactions-list {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-}
-
-.str-chat__message-reactions-list-item {
-  font-size: var(--xl-font);
-  margin: 0 var(--xxs-m);
-  position: relative;
-  line-height: 0;
-
-  button {
-    padding: 0;
-  }
-
-  span[role='img'] {
-    position: relative;
-    display: block;
-    top: -2px;
-    transition: transform 100ms ease;
-
-    &:hover {
-      transform: scale(1.4);
-    }
-  }
-
-  &__count {
-    position: absolute;
-    top: 28px;
-    font-size: var(--xs-font);
-    color: var(--white);
-    font-weight: var(--font-weight-bold);
-    left: 6px;
-  }
-
-  .latest-user {
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    top: -24px;
-    left: 0;
-
-    &-tooltip {
-      display: none;
-      text-align: center;
-      position: absolute;
-      bottom: calc(100% + 5px);
-      left: 50%;
-      transform: translate(-50%, 0);
-      background: var(--black80);
-      border-radius: var(--border-radius-sm);
-      background-image: linear-gradient(-180deg, transparent, var(--black50));
-      max-width: 237px;
-      padding: var(--xxs-p) var(--xs-p);
-      font-size: var(--sm-font);
-      color: var(--white);
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: calc(100% - 4px);
-        left: 50%;
-        transform: translate(-50%, 0) rotate(45deg);
-        width: 7px;
-        height: 7px;
-        background-color: var(--dark-grey);
-      }
-    }
-
-    &-not-found {
-      border: 1.5px solid var(--white);
-      border-radius: var(--border-radius-round);
-      background-color: var(--secondary-color);
-      width: inherit;
-      height: inherit;
-    }
-
-    img {
-      border: 1.5px solid var(--white);
-      border-radius: var(--border-radius-round);
-      object-fit: cover;
-      width: inherit;
-      height: inherit;
-    }
-
-    &:hover {
-      .latest-user-tooltip {
-        display: block;
-      }
-    }
-  }
-
-  .str-chat__emoji-selector-emoji-angular {
-    width: 20px;
-    height: 20px;
-    top: 10px;
-  }
-}
-
-button.str-chat__message-reactions-list-item {
-  background-color: transparent;
-  border: none;
-  padding: 0;
-  display: flex;
-}
-
-.str-chat__reaction-selector {
-  z-index: 999;
-  height: 60px;
-  position: absolute;
-  width: initial;
-  background: var(--black);
-  background-image: linear-gradient(-180deg, transparent, var(--border));
-  border: 1px solid var(--white5);
-  box-shadow: 0 3px 1px 0 var(--border), 0 11px 8px 0 var(--border);
-  border-radius: var(--border-radius-round);
-  display: flex;
-  align-items: center;
-
-  ul {
-    position: relative;
-    z-index: 1000;
-    margin: 0 var(--sm-m);
-  }
-
-  &-tooltip {
-    position: absolute;
-    bottom: calc(100% + 15px);
-    background: var(--black);
-    border-radius: var(--border-radius-sm);
-    min-width: 85px;
-    min-height: 24px;
-    max-width: 100%;
-    padding: var(--xxs-p) var(--xs-p);
-    font-size: var(--sm-font);
-    color: var(--white);
-    text-align: center;
-
-    .arrow {
-      position: absolute;
-      top: calc(100% - 4px);
-      left: 50%;
-      transform: translate(-50%, 0) rotate(45deg);
-      width: 7px;
-      height: 7px;
-      background-color: var(--black);
-    }
-  }
-
-  .emoji-mart-emoji:hover,
-  .str-chat__emoji:hover {
-    transition: 0.1s;
-    transform: scale(1.2);
-    cursor: pointer;
-  }
-}
-
-.str-chat__message,
-.str-chat__message-team,
-.str-chat__message-simple,
-.str-chat__message-commerce,
-.str-chat__message-livestream {
-  .str-chat__reaction-selector {
-    top: -65px;
-    left: 0;
-  }
-}
-
-.str-chat__message-commerce {
-  &--right {
-    .str-chat__reaction-selector {
-      left: unset;
-      right: 0;
-    }
-  }
-}
-
-.str-chat__message-livestream {
-  .str-chat__reaction-selector {
-    left: unset;
-    top: -70px;
-    right: 0;
-  }
-}
-
-.str-chat__message-team {
-  .str-chat__reaction-selector {
-    left: unset;
-    top: -60px;
-    right: 0;
-  }
-}
-
-.str-chat__message-simple {
-  .str-chat__reaction-selector {
-    right: unset;
-    left: 0;
-
-    &--reverse {
-      right: 0;
-      left: unset;
-    }
-  }
-
-  &--me {
-    .str-chat__reaction-selector {
-      left: unset;
-      right: 0;
-
-      &--reverse {
-        right: unset;
-        left: 0;
-      }
-    }
-  }
-}

package/dist/scss/SendButton.scss

@@ -1,20 +0,0 @@
-.str-chat__send-button {
-  margin-left: var(--xs-m);
-  border: 0;
-  background: 0;
-  outline: 0;
-
-  &:focus {
-    outline: 5px auto -webkit-focus-ring-color;
-  }
-
-  @media screen and (min-width: 768px) {
-    display: none;
-  }
-
-  .str-chat__send-button-angular {
-    svg path {
-      fill: var(--primary-color);
-    }
-  }
-}

package/dist/scss/SimpleReactionsList.scss

@@ -1,76 +0,0 @@
-.str-chat__simple-reactions-list {
-  list-style-type: none;
-  padding: var(--xxs-p) var(--xxs-p) calc(var(--xxs-p) / 2) var(--xxs-p);
-  display: inline-flex;
-  margin: var(--xs-m) 0 0 0;
-  border: 1px solid var(--border);
-  border-radius: var(--border-radius-sm);
-  line-height: 1;
-  position: relative;
-
-  &-tooltip {
-    position: absolute;
-    bottom: calc(100% + 10px);
-    left: 50%;
-    transform: translate(-50%, 0);
-    background: var(--overlay-dark);
-    border-radius: var(--border-radius-sm);
-    background-image: linear-gradient(-180deg, transparent, var(--black50));
-    min-height: 24px;
-    width: auto;
-    max-width: 275px;
-    padding: var(--xxs-p) var(--xs-p);
-    font-size: var(--sm-font);
-    color: var(--white);
-    text-align: center;
-
-    > .arrow {
-      position: absolute;
-      top: calc(100%);
-      left: 50%;
-      transform: translate(-50%, 0);
-      width: 0;
-      height: 0;
-      border-left: 4px solid transparent;
-      border-right: 4px solid transparent;
-      border-top: 4px solid var(--overlay-dark);
-    }
-  }
-
-  &-item {
-    margin: 0;
-    cursor: pointer;
-
-    > span {
-      line-height: 1;
-    }
-
-    .emoji-mart-emoji,
-    .str-chat__emoji {
-      &:hover {
-        transition: transform 0.2s ease-in-out;
-        transform: scale(1.2);
-      }
-    }
-
-    &--last-number {
-      font-size: var(--xs-font);
-      display: flex;
-      align-items: center;
-      color: black;
-    }
-  }
-}
-
-.dark.str-chat {
-  .str-chat__simple-reactions-list {
-    border: 1px solid var(--white10);
-    border-radius: var(--border-radius-sm);
-
-    &-item {
-      &--last-number {
-        color: var(--white);
-      }
-    }
-  }
-}

package/dist/scss/SmallMessageInput.scss

@@ -1,171 +0,0 @@
-.str-chat__small-message-input {
-  display: flex;
-  flex-wrap: wrap;
-  margin: var(--xs-m);
-  padding: var(--xs-m);
-  position: relative;
-
-  .rfu-file-previewer {
-    flex: 1 1 100%;
-  }
-
-  .rfu-image-previewer {
-    flex: 1 1 100%;
-  }
-
-  &__wrapper {
-    position: relative;
-    z-index: 0;
-    width: 100%;
-  }
-
-  &-fileupload {
-    cursor: pointer;
-    border: none;
-    padding: 0;
-    background-color: transparent;
-  }
-
-  &-emojiselect {
-    bottom: 10px;
-    right: 6px;
-    cursor: pointer;
-    border: none;
-    padding: 0;
-    background-color: transparent;
-  }
-
-  .str-chat-angular__emojiselect {
-    width: auto;
-    height: auto;
-    left: 15px;
-    max-width: 20px;
-  }
-
-  .str-chat-angular__cooldown {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 15px;
-  }
-
-  .rfu-file-upload-button {
-    bottom: 9px;
-    right: 26px;
-  }
-
-  &--textarea-wrapper {
-    flex-wrap: wrap;
-    flex: 1 0;
-    position: relative;
-  }
-
-  &-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(--grey);
-
-    &:hover {
-      fill: var(--black);
-    }
-  }
-
-  &-emojipicker {
-    position: absolute;
-    bottom: 100%;
-    right: 0;
-    transform: scale(0.8);
-    transform-origin: 100% 100%;
-  }
-
-  &-has-attachments {
-    .str-chat__send-button {
-      display: block;
-    }
-  }
-
-  &--send-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    flex: 0 1;
-    outline: 0;
-
-    &:hover {
-      opacity: 0.69;
-    }
-
-    @media screen and (min-width: 768px) {
-      display: none;
-    }
-  }
-
-  textarea {
-    background: var(--grey-whisper);
-    color: var(--black);
-    min-height: 36px;
-    font-size: var(--sm-font);
-    padding: 10px 44px 8px 8px;
-
-    &.str-chat__angular-textarea {
-      padding: 10px 35px 8px;
-    }
-
-    &:focus {
-      height: 36px;
-    }
-  }
-
-  .str-chat-angular__textarea {
-    position: relative;
-
-    + .str-chat__fileupload-wrapper {
-      .rfu-file-upload-button {
-        right: 15px;
-      }
-    }
-  }
-
-  .str-chat__emojisearch {
-    bottom: 100%;
-  }
-
-  .str-chat__user-item {
-    font-size: var(--md-font);
-  }
-
-  .rfu-file-upload-button {
-    position: absolute;
-    cursor: pointer;
-    right: 28px;
-  }
-
-  .rfu-dropzone .rfu-dropzone__notifier {
-    z-index: 1000;
-  }
-}
-
-.dark.str-chat {
-  .str-chat__small-message-input {
-    textarea {
-      background: var(--white5);
-      border: 1px solid var(--black20);
-      border-radius: var(--border-radius-sm);
-      color: var(--white);
-    }
-
-    .rfu-file-upload-button,
-    .str-chat__small-message-input-emojiselect {
-      svg {
-        fill: var(--white);
-      }
-    }
-  }
-}