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

package/src/assets/styles/scss/VirtualMessage.scss

@@ -1,288 +0,0 @@
-.str-chat__virtual-list {
-  // this resolves the issue with 1px tall messages (i.e. deleted messages)
-  font-size: 0;
-
-  .str-chat__virtual-list-message-wrapper {
-    padding-left: var(--xl-p);
-    padding-right: var(--xl-p);
-    width: 100%;
-
-    .str-chat__message-simple {
-      &.str-chat__virtual-message__wrapper--first {
-        padding-bottom: 0;
-        padding-left: var(--xl-p);
-
-        .str-chat__avatar,
-        .str-chat__message-data.str-chat__message-simple-data {
-          display: none;
-        }
-
-        &.str-chat__message-simple--me {
-          padding-right: var(--xl-p);
-          padding-left: 0;
-
-          &.str-chat__virtual-message__wrapper--end {
-            padding-right: 0;
-          }
-        }
-
-        &.str-chat__virtual-message__wrapper--end {
-          padding-bottom: var(--xs-p);
-
-          .str-chat__message-data.str-chat__message-simple-data {
-            display: block;
-            position: relative;
-            width: 100%;
-          }
-        }
-      }
-
-      &.str-chat__virtual-message__wrapper--group {
-        align-items: center;
-        padding-left: var(--xl-p);
-
-        &.str-chat__message-simple--me {
-          padding-right: var(--xl-p);
-          padding-left: 0;
-
-          &.str-chat__virtual-message__wrapper--end {
-            padding-right: 0;
-          }
-        }
-
-        .str-chat__message-data.str-chat__message-simple-data {
-          display: block;
-          position: relative;
-          width: 100%;
-        }
-      }
-
-      &.str-chat__virtual-message__wrapper--end {
-        padding-bottom: var(--xs-p);
-        padding-left: 0;
-
-        .str-chat__avatar,
-        .str-chat__message-data.str-chat__message-simple-data {
-          display: block;
-        }
-      }
-
-      .quoted-message {
-        display: flex;
-        align-items: flex-end;
-        margin-bottom: var(--xxs-m);
-        cursor: pointer;
-
-        &-inner {
-          display: flex;
-          text-align: start;
-          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: 408px;
-          padding: var(--xxs-p) var(--xs-p);
-
-          .str-chat__message-attachment-card.str-chat__message-attachment-card--image {
-            border: none;
-            border-radius: var(--border-radius-md);
-          }
-
-          .str-chat__message-attachment {
-            &--image:first-of-type {
-              max-height: 48px;
-              max-width: 48px;
-              border-radius: var(--border-radius-md);
-            }
-
-            img {
-              border-radius: var(--border-radius-md);
-            }
-
-            &--file:first-of-type {
-              background: var(--white);
-              border-radius: var(--border-radius-md);
-              border-bottom: 1px solid var(--grey-whisper);
-              min-width: 33%;
-            }
-          }
-
-          :nth-child(2) {
-            margin-left: var(--xs-m);
-          }
-        }
-
-        &.mine {
-          .quoted-message-inner {
-            background: var(--white-snow);
-          }
-        }
-      }
-    }
-  }
-
-  .str-chat__message.str-chat__message--deleted {
-    align-items: initial;
-    margin: 0;
-  }
-
-  .str-chat__typing-indicator {
-    padding: 5px 40px; // important: div height should be big enough to fully contain the avatars
-  }
-}
-
-.giphy-preview-message {
-  background: var(--white-snow);
-  border-top: 2px solid var(--border);
-}
-
-.str-chat__virtual-message__wrapper {
-  display: flex;
-  padding: 10px 40px;
-  flex-direction: row;
-  position: relative;
-
-  &:hover {
-    background: ghostwhite;
-  }
-
-  > .str-chat__avatar {
-    margin: 0;
-  }
-
-  > .str-chat__virtual-message__content {
-    padding-left: 12px;
-  }
-
-  .str-chat__avatar--rounded {
-    border-radius: var(--border-radius);
-  }
-
-  .str-chat__avatar-fallback {
-    background-color: lightslategray;
-  }
-}
-
-.str-chat__virtual-message__meta {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-
-.str-chat__virtual-message__data {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  justify-content: space-between;
-  min-width: 70px;
-  margin-left: auto;
-}
-
-.str-chat__virtual-message__author {
-  color: var(--primary-color);
-  font-size: 1rem;
-}
-
-.str-chat__virtual-message__date {
-  font-size: 0.7rem;
-  opacity: 0.5;
-  padding-left: 8px;
-  display: block;
-  margin-left: auto;
-}
-
-.str-chat__virtual-message__actions {
-  position: relative;
-  cursor: pointer;
-
-  button {
-    border: none;
-    background: transparent;
-  }
-
-  svg {
-    fill: var(--black);
-    opacity: 0.5;
-  }
-
-  &:hover {
-    svg {
-      opacity: 1;
-    }
-  }
-
-  .str-chat__message-actions-box {
-    bottom: 10px;
-    left: unset;
-    right: 100%;
-    border-radius: var(--border-radius) var(--border-radius) calc(var(--border-radius-sm) / 2)
-      var(--border-radius);
-  }
-}
-
-.str-chat__virtual-message__content {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: flex-start;
-
-  .str-chat__message--deleted-inner {
-    padding: 8px 0;
-  }
-}
-
-.str-chat__virtual-message__text {
-  padding-top: 5px;
-  font-size: 0.9rem;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  word-break: break-word;
-
-  p {
-    padding-right: 16px;
-  }
-
-  a {
-    color: var(--primary-color);
-    text-decoration: none;
-    font-weight: var(--font-weight-bold);
-  }
-}
-
-.str-chat__virtual-message__wrapper--group {
-  > .str-chat__avatar {
-    display: none;
-  }
-
-  .str-chat__virtual-message__author {
-    display: none;
-  }
-
-  .str-chat__virtual-message__content {
-    padding-left: 50px;
-
-    .str-chat__gallery {
-      width: 100%;
-      margin: 0;
-      justify-content: unset;
-    }
-  }
-}
-
-.dark {
-  .str-chat__virtual-message__wrapper {
-    &:hover {
-      background: var(--black20);
-    }
-  }
-
-  .str-chat__virtual-message__text {
-    color: ghostwhite;
-  }
-
-  .str-chat__virtual-message__date {
-    color: var(--white);
-  }
-}

package/src/assets/styles/scss/_variables.scss

@@ -1,161 +0,0 @@
-/* fonts */
-/* https://systemfontstack.com/ */
-$system-stack-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
-  Cantarell, 'Helvetica Neue', sans-serif;
-$main-font: #{$system-stack-font};
-$second-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-
-$base-font-weight: 400;
-$heavy-font-weight: 700;
-
-/* colors */
-$primary-color: #ff00ff;
-$secondary-color: #006cff;
-
-$dt-bg-team: #1d1f22;
-
-$border-color: #00000014;
-
-$black: #000000;
-$white: #ffffff;
-$grey: #7a7a7a;
-$darken-grey: #343434;
-$lighten-black: #808080;
-$lighten-grey: #858585;
-
-/* miscellaneous */
-$assetsPath: '../assets' !default;
-$border-radius: 16px;
-
-:root {
-  /* fonts */
-  --main-font: #{$main-font};
-  --second-font: #{$second-font};
-
-  /* font size */
-
-  --xs-font: 10px;
-  --sm-font: 12px;
-  --md-font: 14px;
-  --lg-font: 16px;
-  --xl-font: 22px;
-  --xxl-font: 26px;
-  --xxxl-font: 32px;
-
-  /* fonts weight */
-  --font-weight-regular: #{$base-font-weight}; //400
-  --font-weight-semi-bold: 600;
-  --font-weight-bold: #{$heavy-font-weight}; //700
-
-  /* colors */
-  --primary-color: #{$secondary-color}; // this reassignment is to maintain backwards compatibility with the old scss variables
-  --primary-color-faded: #006cff5c;
-
-  --magenta: #{$primary-color};
-  --red: #ff0000;
-  --faded-red: #d0021b1a;
-  --blue: #026afa;
-  --faded-blue: #cfe3ff;
-
-  --dt-bg-team: #{$dt-bg-team};
-
-  --border-color: #{$border-color};
-
-  --lighten-black: #{$lighten-black};
-
-  --lighten-grey: #{$lighten-grey};
-
-  --light-grey: #ebebeb;
-  --grey: #{$grey};
-  --dark-grey: #{$darken-grey};
-
-  --green: #28ca42;
-  --faded-green: #02d0021a;
-
-  //-------------------------------White
-  --white: #{$white};
-  --white5: #ffffff0d;
-  --white10: #ffffff1a;
-  --white20: #ffffff33;
-  --white30: #ffffff4d;
-  --white40: #ffffff66;
-  --white50: #ffffff80;
-  --white60: #ffffff99;
-  --white70: #ffffffb3;
-  --white80: #ffffffcc;
-  --white90: #ffffffe6;
-  --white95: #fffffff2;
-
-  //-------------------------------Black
-  --black: #{$black};
-  --black5: #0000000d;
-  --black10: #0000001a;
-  --black20: #00000033;
-  --black30: #0000004d;
-  --black40: #00000066;
-  --black50: #00000080;
-  --black60: #00000099;
-  --black70: #000000b3;
-  --black80: #000000cc;
-  --black90: #000000e6;
-  --black95: #000000f2;
-
-  /* border-radius */
-  --border-radius: #{$border-radius};
-  --border-radius-sm: calc(var(--border-radius) / 4);
-  --border-radius-md: calc(var(--border-radius) / 2);
-  --border-radius-round: 999px;
-
-  --spacing-unit: 8px; // .5rem
-
-  /* padding */
-  --xxs-p: calc(var(--spacing-unit) / 2); // 4px
-  --xs-p: var(--spacing-unit); // 8px
-  --sm-p: calc(var(--spacing-unit) * 2); // 16px Base
-  --md-p: calc(var(--spacing-unit) * 3); // 24px
-  --lg-p: calc(var(--spacing-unit) * 4); // 32px
-  --xl-p: calc(var(--spacing-unit) * 5); // 40px
-  --xxl-p: calc(var(--spacing-unit) * 8); // 64px
-
-  /* margin */
-  --xxs-m: calc(var(--spacing-unit) / 2); // 4px
-  --xs-m: var(--spacing-unit); // 8px
-  --sm-m: calc(var(--spacing-unit) * 2); // 16px Base
-  --md-m: calc(var(--spacing-unit) * 3); // 24px
-  --lg-m: calc(var(--spacing-unit) * 4); // 32px
-  --xl-m: calc(var(--spacing-unit) * 5); // 40px
-  --xxl-m: calc(var(--spacing-unit) * 8); // 64px
-
-  /* miscellaneous */
-  --assetsPath: '#{$assetsPath}';
-
-  /* accent colors */
-  --accent_blue: #005fff;
-  --accent_green: #20e070;
-  --accent_red: #ff3742;
-
-  /* base colors */
-
-  --bg-gradient-end: #f7f7f7;
-  --bg-gradient-start: #fcfcfc;
-  --blue-alice: #e9f2ff;
-  --border: #00000014; // 14 = 8% opacity; top: x=0, y=-1; bottom: x=0, y=1
-  --button-background: #ffffff;
-  --button-text: #005fff;
-  --secondary-button-text: var(--grey);
-  --grey-gainsboro: #dbdbdb;
-  --grey-whisper: #ecebeb;
-  --highlight: #fbf4dd;
-  --modal-shadow: #00000099; // 99 = 60% opacity; x=0, y= 1, radius=4
-  --overlay: #00000033; // 33 = 20% opacity
-  --overlay-dark: #00000099; // 99 = 60% opacity
-  --shadow-icon: #00000040; // 40 = 25% opacity; x=0, y=0, radius=4
-  --targetedMessageBackground: #fbf4dd; // dark mode = #302D22
-  --transparent: transparent;
-  --white-smoke: #f2f2f2;
-  --white-snow: #fcfcfc;
-  --unread-badge-color: #ffffff;
-
-  --modal-overlay-color: rgba(0, 0, 0, 0.89);
-  --modal-edit-message-form-width: 47em;
-}