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

package/src/assets/styles/scss/Audio.scss

@@ -1,113 +0,0 @@
-.str-chat__audio {
-  &__wrapper {
-    height: 80px;
-    overflow: hidden;
-    position: relative;
-    border-radius: var(--border-radius-sm);
-    margin: 0;
-    display: flex;
-    background: var(--grey-whisper);
-  }
-
-  &__image {
-    height: 80px;
-    width: 80px;
-    position: relative;
-    z-index: 20;
-
-    &--overlay {
-      width: inherit;
-      height: inherit;
-      position: absolute;
-      top: 0;
-      left: 0;
-      background: var(--overlay-dark);
-      z-index: 30;
-      font-size: 3em;
-      color: var(--white-smoke);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      user-select: none;
-    }
-
-    &--button {
-      margin: 0;
-      padding: 0;
-      display: flex;
-      align-items: center;
-      width: 40px;
-      height: 40px;
-
-      svg {
-        fill: var(--white-smoke);
-      }
-    }
-
-    img {
-      z-index: 20;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: inherit;
-      height: inherit;
-      object-fit: cover;
-    }
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    padding: var(--xs-p) var(--sm-p);
-    margin-left: var(--sm-m);
-    width: 100%;
-
-    &--title {
-      margin: 0;
-      padding: 0;
-      line-height: 1;
-      font-size: var(--md-font);
-    }
-
-    &--subtitle {
-      margin: 0;
-      padding: 0;
-      line-height: 1;
-      font-size: var(--sm-font);
-      opacity: 0.49;
-    }
-
-    &--progress {
-      height: 6px;
-      width: 100%;
-      border-radius: var(--border-radius-sm);
-      background: var(--overlay);
-      padding: 1px;
-      margin: calc(var(--xxs-m) / 2) 0; //TODO-CSS
-
-      > div {
-        height: 4px;
-        border-radius: var(--border-radius-sm);
-        width: 0;
-        background: var(--primary-color);
-        transition: width 0.5s linear;
-      }
-    }
-  }
-}
-
-.str-chat.dark {
-  .str-chat__audio {
-    &__wrapper {
-      background: var(--black);
-      color: var(--white);
-    }
-
-    &__content {
-      &--progress {
-        background: var(--grey);
-      }
-    }
-  }
-}

package/src/assets/styles/scss/Avatar.scss

@@ -1,79 +0,0 @@
-.str-chat__avatar {
-  width: 32px;
-  height: 32px;
-  flex: 0 0 32px;
-  margin-right: var(--xs-m);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--white);
-  text-transform: uppercase;
-  overflow: hidden;
-
-  &--circle {
-    border-radius: var(--border-radius-round);
-  }
-
-  &--rounded {
-    border-radius: var(--border-radius-sm);
-  }
-
-  &--square {
-    border-radius: 0;
-  }
-
-  &-image,
-  &-fallback {
-    display: block;
-    width: inherit;
-    height: inherit;
-    object-fit: cover;
-    text-align: center;
-  }
-
-  &-image--loaded {
-    background-color: transparent;
-  }
-
-  &-fallback {
-    background-color: var(--primary-color);
-  }
-}
-
-.str-chat__message {
-  &--me {
-    %order {
-      order: 1;
-    }
-
-    %margin {
-      margin: 0;
-      margin-left: var(--xs-m);
-    }
-
-    > .str-chat__avatar {
-      @extend %order;
-      @extend %margin;
-    }
-
-    > .str-chat-angular__avatar-host {
-      @extend %order;
-
-      .str-chat__avatar {
-        @extend %margin;
-      }
-    }
-  }
-}
-
-.str-chat__li {
-  &--top,
-  &--middle {
-    .str-chat__message {
-      > .str-chat__avatar,
-      > .str-chat-angular__avatar-host {
-        visibility: hidden;
-      }
-    }
-  }
-}

package/src/assets/styles/scss/Card.scss

@@ -1,125 +0,0 @@
-.str-chat__message-attachment-card:not(.str-chat__message-attachment-card--giphy) {
-  .str-chat__message-attachment-card--header {
-    img {
-      width: inherit;
-      height: inherit;
-    }
-  }
-}
-
-.str-chat__message-attachment-card {
-  position: relative;
-  background: var(--white);
-  border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
-  overflow: hidden;
-  font-size: var(--sm-font);
-  border: 10px solid var(--border);
-  margin: var(--lg-m) 0 0 0;
-
-  &--header {
-    width: 100%;
-    height: 175px;
-
-    img {
-      object-fit: cover;
-    }
-  }
-
-  &--title {
-    font-weight: var(--font-weight-bold);
-    flex: 1;
-  }
-
-  &--flex {
-    min-width: 0;
-
-    &,
-    > * {
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  &--content {
-    padding: var(--xs-p) var(--sm-p);
-    margin: calc(-1 * var(--xs-m));
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-
-    > * {
-      margin: var(--xs-m) 0;
-    }
-  }
-
-  &--url {
-    text-decoration: none;
-    display: block;
-    color: var(--black);
-    text-transform: uppercase;
-    opacity: 0.5;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
-  }
-
-  &--giphy &--header {
-    height: unset;
-  }
-}
-
-.giphy-preview-message {
-  .str-chat__message-attachment-card--giphy {
-    display: flex;
-    flex-direction: column;
-
-    .str-chat__message-attachment-card--header {
-      display: flex;
-      justify-content: center;
-      background-color: white;
-      
-      .str-chat__message-attachment--img {
-        width: unset;
-      }
-    }
-
-  }
-}
-
-.str-chat.commerce {
-  .str-chat__message-attachment-card {
-    max-width: 375px;
-    width: 100%;
-  }
-}
-
-.str-chat__message--me {
-  .str-chat__message-attachment-card {
-    background: var(--overlay);
-    border: 1px solid transparent;
-    border-radius: var(--border-radius) var(--border-radius) 0 var(--border-radius);
-  }
-}
-
-.dark.str-chat {
-  .str-chat__message-attachment-card__giphy-logo {
-    filter: invert(100%);
-  }
-}
-
-.str-chat__message-attachment-card.str-chat__message-attachment-card--giphy {
-  .str-chat__message-attachment-card--content {
-    background-image: url('#{$assetsPath}/Poweredby_100px-White_VertText.png');
-    background-position: right var(--border-radius) bottom var(--border-radius);
-    background-repeat: no-repeat;
-    /* that was the original sizing of the img in React */
-    background-size: 56px;
-  }
-}

package/src/assets/styles/scss/ChannelHeader.scss

@@ -1,284 +0,0 @@
-.str-chat__header {
-  display: flex;
-  padding: var(--xs-p);
-  border-bottom: 1px solid var(--border);
-
-  &-livestream {
-    padding: var(--xs-p) var(--xl-p);
-    min-height: 70px;
-    display: flex;
-    align-items: center;
-    font-family: var(--second-font);
-    background: var(--white);
-    box-shadow: 0 1px 1px 0 var(--border);
-
-    &-left {
-      flex: 1;
-      font-size: var(--md-font);
-
-      &--title {
-        font-weight: var(--font-weight-bold);
-        margin: 0;
-      }
-
-      &--members {
-        font-weight: var(--font-weight-regular);
-        margin: 0;
-      }
-
-      &--livelabel {
-        position: relative;
-        left: 5px;
-        font-size: var(--sm-font);
-        text-transform: uppercase;
-        color: var(--red);
-        display: inline-block;
-        animation: pulse 2s infinite;
-
-        &::before {
-          content: '';
-          position: relative;
-          top: -2px;
-          left: -4px;
-          display: inline-block;
-          width: 5px;
-          height: 5px;
-          border-radius: var(--border-radius-round);
-          background-color: var(--accent_red);
-        }
-
-        @keyframes pulse {
-          0% {
-            opacity: 0.5;
-          }
-
-          50% {
-            opacity: 1;
-          }
-
-          100% {
-            opacity: 0.5;
-          }
-        }
-      }
-    }
-
-    &-right {
-      display: flex;
-      margin: 0 calc(-1 * var(--xxs-m));
-
-      &-button-wrapper {
-        position: relative;
-      }
-    }
-  }
-}
-
-.str-chat__header .str-chat__avatar {
-  margin: 0 var(--sm-m) 0 0;
-}
-
-.str-chat__title {
-  font-weight: var(--font-weight-semi-bold);
-}
-
-.str-chat__meta {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.str-chat__info {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  font-size: var(--md-font);
-  color: var(--grey);
-}
-
-.str-chat__square-button {
-  background: var(--grey-whisper);
-  border: 1px solid var(--border);
-  border-radius: var(--border-radius-sm);
-  padding: var(--xs-p);
-  margin: 0 var(--xxs-m);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  svg {
-    fill: var(--black);
-  }
-
-  &:active {
-    background-color: var(--grey-whisper);
-  }
-}
-
-.dark.str-chat {
-  .str-chat__square-button {
-    background: var(--white5);
-    box-shadow: 0 1px 0 0 var(--black70);
-    border-radius: var(--border-radius-sm);
-
-    svg {
-      fill: var(--white70);
-    }
-  }
-}
-
-.messaging {
-  &.str-chat {
-    .str-chat {
-      &__header-livestream {
-        position: relative;
-        z-index: 2;
-        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
-        background: var(--white-snow);
-        box-shadow: 0 7px 9px 0 var(--border), 0 1px 0 0 var(--border);
-      }
-
-      @media screen and (max-width: 960px) {
-        &__header-livestream {
-          padding-left: var(--sm-p);
-          padding-right: var(--sm-p);
-        }
-      }
-    }
-
-    &.dark {
-      .str-chat__header-livestream {
-        background: var(--dark-grey);
-        box-shadow: 0 7px 9px 0 var(--border), 0 1px 0 0 var(--border);
-        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
-        color: var(--white);
-      }
-    }
-  }
-}
-
-.livestream {
-  &.str-chat {
-    .str-chat {
-      &__header-livestream {
-        position: relative;
-        z-index: 1;
-        background: var(--grey-whisper);
-        box-shadow: 0 1px 1px 0 var(--border);
-      }
-    }
-
-    &.dark {
-      .str-chat__header-livestream {
-        background: var(--white5);
-        box-shadow: 0 1px 1px 0 var(--border);
-
-        &-left {
-          &--title,
-          &--members {
-            color: var(--white);
-          }
-
-          &--title {
-            font-size: var(--lg-font);
-          }
-        }
-      }
-    }
-  }
-}
-
-.commerce {
-  &.str-chat {
-    .str-chat {
-      &__header-livestream {
-        background: var(--white80);
-        box-shadow: 0 7px 9px 0 var(--black5), 0 1px 0 0 var(--black5);
-        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
-        padding: var(--md-p);
-
-        &-left {
-          &--title {
-            font-size: var(--xxl-font);
-            margin: 0;
-            line-height: 1;
-            font-weight: var(--font-weight-regular);
-          }
-
-          &--subtitle {
-            margin: var(--xs-m) 0;
-            font-size: var(--lg-font);
-          }
-
-          &--members {
-            display: none;
-          }
-        }
-
-        &-right {
-          &-button {
-            &--info {
-              display: none;
-            }
-          }
-        }
-      }
-    }
-
-    &.dark {
-      .str-chat__header-livestream {
-        background: var(--grey);
-        box-shadow: 0 7px 9px 0 var(--black5), 0 1px 0 0 var(--black5);
-        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
-        color: var(--white);
-      }
-    }
-  }
-}
-
-.team {
-  &.str-chat {
-    &.dark {
-      .str-chat__header-livestream {
-        background: var(--dark-grey);
-        box-shadow: 0 1px 1px 0 var(--black30);
-
-        &-left {
-          color: var(--white);
-
-          &--title {
-            font-size: var(--lg-font);
-          }
-
-          &--members {
-            font-size: var(--sm-font);
-          }
-        }
-      }
-    }
-  }
-}
-
-.str-chat__header-hamburger {
-  width: 30px;
-  height: 38px;
-  padding: var(--xxs-p);
-  margin-right: var(--xs-m);
-  display: none;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-
-  &:hover {
-    svg path {
-      fill: var(--primary-color);
-    }
-  }
-
-  @media screen and (max-width: 960px) {
-    display: flex;
-  }
-}