quickblox-react-ui-kit 0.3.1-beta.3 → 0.3.1-beta.5

package/storybook-static/static/css/Presentation-ui-components-Message-Message-stories.0e129b10.chunk.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/css/Presentation-ui-components-Message-Message-stories.0e129b10.chunk.css","mappings":"AAEA;AEFA;ACEA;ACFA;ACAA;ACAA;ACAA;ACEA;ACFA;ACAA;ACAA;ACAA","sources":["webpack://quickblox-react-ui-kit/./src/Presentation/ui-components/Avatar/Avatar.scss","webpack://quickblox-react-ui-kit/./src/Presentation/themes/styles/_mixins.scss","webpack://quickblox-react-ui-kit/./src/Presentation/ui-components/CheckBox/CheckBox.scss","webpack://quickblox-react-ui-kit/./src/Presentation/ui-components/Message/MessageCaption/MessageCaption.scss","webpack://quickblox-react-ui-kit/./src/Presentation/ui-components/Message/TimeAndStatus/TimeAndStatus.scss","webpack://quickblox-react-ui-kit/./src/Presentation/ui-components/Message/Message.scss","webpack://quickblox-react-ui-kit/./src/Presentation/Views/Dialog/Message/HighLightLink/HighLightLink.scss","webpack://quickblox-react-ui-kit/./src/Presentation/ui-components/Message/Bubble/TextBubble/TextBubble.scss","webpack://quickblox-react-ui-kit/./src/Presentation/ui-components/Message/Bubble/FileBubble/FileBubble.scss","webpack://quickblox-react-ui-kit/./src/Presentation/ui-components/Message/FileUrl/FileUrl.scss","webpack://quickblox-react-ui-kit/./src/Presentation/ui-components/Message/Bubble/ImageBubble/ImageBubble.scss","webpack://quickblox-react-ui-kit/./src/Presentation/ui-components/Message/Bubble/AudioBubble/AudioBubble.scss","webpack://quickblox-react-ui-kit/./src/Presentation/ui-components/Message/Bubble/VideoBubble/VideoBubble.scss"],"sourcesContent":["@import '../../themes/styles/mixins';\n\n.avatar {\n  @include applyBorderBox;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n\n  overflow: hidden;\n  border-radius: 50%;\n  background-color: var(--disabled-elements);\n  color: var(--secondary-text);\n\n  svg {\n    fill: var(--secondary-text);\n    padding: 10px;\n  }\n\n  &__image {\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n  }\n\n  &--xs {\n    width: 32px;\n    height: 32px;\n  }\n\n  &--sm {\n    width: 36px;\n    height: 36px;\n  }\n\n  &--md {\n    width: 40px;\n    height: 40px;\n  }\n\n  &--lg {\n    width: 56px;\n    height: 56px;\n  }\n\n  &--xl {\n    width: 64px;\n    height: 64px;\n  }\n\n  &--xxl {\n    width: 80px;\n    height: 80px;\n  }\n}\n","@mixin applyBorderBox {\n  &,\n  * {\n    box-sizing: border-box;\n  }\n}\n",".checkbox {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  border-radius: 4px;\n  padding: 4px;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n}\n",".message-caption {\n\n  &__user {\n    padding: 0px 16px 0px 16px;\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n    align-items: flex-start;\n    justify-content: flex-start;\n    flex-shrink: 0;\n    position: relative;\n\n    &__caption {\n      display: flex;\n      flex-direction: row;\n      gap: 2px;\n      align-items: center;\n      justify-content: flex-start;\n      flex-shrink: 0;\n      position: relative;\n\n      &__name {\n        color: var(--secondary-text, #636d78);\n        text-align: left;\n        font: var(--label-label-medium);\n        position: relative;\n      }\n    }\n  }\n\n  &__forward-reply {\n    display: flex;\n    flex-direction: row;\n    gap: 2px;\n    align-items: center;\n    justify-content: flex-start;\n    flex-shrink: 0;\n    position: relative;\n\n    &--reply {\n      width: 16px;\n      height: 16px;\n      align-self: stretch;\n      flex: 1;\n      position: relative;\n      overflow: visible;\n      fill: var(--tertiary-elements, #636d78);\n    }\n\n    &--forward {\n      width: 16px;\n      height: 16px;\n      align-self: stretch;\n      flex: 1;\n      position: relative;\n      overflow: visible;\n      fill: var(--tertiary-elements, #636d78);\n    }\n\n    &__icon {\n      border-radius: 4px;\n      display: flex;\n      flex-direction: row;\n      gap: 0px;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      width: 16px;\n      height: 16px;\n      position: relative;\n\n      &--filled {\n        align-self: stretch;\n        flex: 1;\n        height: auto;\n        position: relative;\n        overflow: visible;\n        fill: var(--tertiary-elements, #636d78);\n      }\n    }\n\n    &__from {\n      color: var(--tertiary-elements, #636d78);\n      text-align: left;\n      font: var(--label-label-medium);\n      position: relative;\n    }\n  }\n\n}\n",".time-status {\n  background: var(--main-background, #ffffff);\n  padding: 0px 8px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: flex-end;\n  justify-content: flex-end;\n  align-self: stretch;\n  flex-shrink: 0;\n  width: 320px;\n  position: relative;\n\n  &__caption {\n    display: flex;\n    gap: 2px;\n    align-items: flex-end;\n    flex-shrink: 0;\n\n    &__status {\n      width: 13px;\n      height: 13px;\n    }\n  }\n  &__time {\n    color: var(--tertiary-elements, #636d78);\n    text-align: left;\n    font: var(--label-label-small);\n    position: relative;\n    // padding-bottom: 10px;\n  }\n}\n\n.status-message {\n  &--sent {\n    fill: var(--tertiary-elements, #636D78);\n  }\n\n  &--delivered {\n    fill: var(--tertiary-elements, #636D78);\n  }\n\n  &--viewed {\n    fill: var(--main-elements, #3978fc);\n  }\n\n  &--error {\n    fill: var(--error, #FF3B30);\n  }\n}\n\n",".message-item {\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n\n  &__right {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-end;\n    justify-content: flex-end;\n    width: 100%;\n  }\n\n  &__more {\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: center;\n    justify-content: center;\n    align-self: stretch;\n    flex-shrink: 0;\n    position: relative;\n    cursor: pointer;\n\n    &__icon {\n      border-radius: 4px;\n      display: flex;\n      flex-direction: row;\n      gap: 0px;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      width: 24px;\n      height: 24px;\n      position: relative;\n      //padding-bottom: 10px;\n\n      &__actions {\n        fill: var(--tertiary-elements, #636D78);\n        path: var(--tertiary-elements, #636D78);\n      }\n    }\n  }\n\n  &__outgoing {\n    background: var(--main-background, #ffffff);\n    padding: 0px 8px 8px 16px;\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n    justify-content: flex-end;\n    align-self: stretch;\n    flex-shrink: 0;\n    width: 320px;\n    position: relative;\n\n    &__chat {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      align-items: flex-start;\n      justify-content: flex-start;\n      flex-shrink: 0;\n      position: relative;\n\n      &__bubble-background {\n        background: var(--outgoing-background, #E7EFFF);\n        border-radius: 22px 22px 0px 22px;\n        padding: 8px 12px 8px 12px;\n        display: flex;\n        flex-direction: row;\n        gap: 10px;\n        align-items: flex-start;\n        justify-content: flex-start;\n        flex-shrink: 0;\n        position: relative;\n      }\n    }\n  }\n\n  &__incoming-mes {\n    background: var(--secondary-background, #ffffff);\n    padding: 0px 16px 8px 8px;\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n    align-items: flex-end;\n    justify-content: flex-start;\n    align-self: stretch;\n    flex-shrink: 0;\n    width: 320px;\n    position: relative;\n  }\n\n  &__incoming {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    align-items: flex-start;\n    justify-content: flex-end;\n\n    &__chat {\n      display: flex;\n      flex-direction: row;\n      gap: 8px;\n\n      &__bubble {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n        align-items: flex-end;\n        justify-content: flex-end;\n        flex-shrink: 0;\n        position: relative;\n\n        &__background {\n          background: var(--incoming-background, #e4e6e8);\n          border-radius: 22px 22px 22px 0px;\n          padding: 8px 12px 8px 12px;\n          display: flex;\n          flex-direction: row;\n          gap: 10px;\n          align-items: flex-start;\n          justify-content: flex-start;\n          flex-shrink: 0;\n          position: relative;\n        }\n      }\n    }\n  }\n}\n",".high-light-link-container {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 0px;\n\n  width: 240px;\n  height: 70px;\n\n  background: #E4E6E8;\n  border-radius: 8px;\n\n  flex: none;\n  order: 0;\n  flex-grow: 0;\n\n  &--header-wrapper{\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 6px 16px;\n\n    width: 240px;\n    height: 32px;\n\n    flex: none;\n    order: 0;\n    align-self: stretch;\n    flex-grow: 0;\n\n    &__link_url{\n      width: 208px;\n      height: 20px;\n\n      text-decoration: none;\n      cursor: pointer;\n\n      font-family: 'Roboto';\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 20px;\n\n      display: flex;\n      align-items: center;\n      letter-spacing: 0.25px;\n\n      color: #636D78;\n\n      flex: none;\n      order: 0;\n      flex-grow: 1;\n    }\n  }\n\n  &--footer-wrapper{\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 8px 16px;\n\n    width: 240px;\n    height: 32px;\n\n    flex: none;\n    order: 4;\n    align-self: stretch;\n    flex-grow: 0;\n\n    &__content{\n      width: 208px;\n      height: 16px;\n\n      font-family: 'Roboto';\n      font-style: normal;\n      font-weight: 500;\n      font-size: 11px;\n      line-height: 16px;\n\n      display: flex;\n      align-items: center;\n      letter-spacing: 0.5px;\n\n      color: #636D78;\n\n      flex: none;\n      order: 0;\n      flex-grow: 1;\n    }\n  }\n}\n\n.message-urls {\n  max-width: calc(var(--max-width-message-bubble) - 20px);\n  overflow-wrap: break-word;\n}\n\n",".bubble-content-text {\n  overflow-wrap: break-word;\n  max-width: calc(var(--max-width-message-bubble) - 20px);\n\n  color: var(--main-tex, #0b1b0f);\n  text-align: left;\n  font: var(--body-body-medium, 400 14px/20px \"Roboto-Regular\", sans-serif);\n}\n\n.text-bubble-background {\n\n  &__incoming {\n    background: var(--incoming-background, #e4e6e8);\n    border-radius: 22px 22px 22px 0px;\n    padding: 8px 12px 8px 12px;\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: flex-start;\n    justify-content: flex-start;\n    flex-shrink: 0;\n    position: relative;\n    width: 100%;\n  }\n\n  &__outgoing {\n    background: var(--outgoing-background, #E7EFFF);\n    border-radius: 22px 22px 0px 22px;\n    padding: 8px 12px 8px 12px;\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: flex-start;\n    justify-content: flex-start;\n    flex-shrink: 0;\n    position: relative;\n  }\n\n}\n\n",".file-bubble-background {\n\n  &__incoming {\n    background: var(--incoming-background, #e4e6e8);\n    border-radius: 22px 22px 22px 0px;\n    padding: 8px 12px 8px 12px;\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: flex-start;\n    justify-content: flex-start;\n    flex-shrink: 0;\n    position: relative;\n  }\n\n  &__outgoing {\n    background: var(--outgoing-background, #E7EFFF);\n    border-radius: 22px 22px 0px 22px;\n    padding: 8px 12px 8px 12px;\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: flex-start;\n    justify-content: flex-start;\n    flex-shrink: 0;\n    position: relative;\n  }\n\n}\n",".file-attachment {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n\n  &__placeholder {\n    flex-shrink: 0;\n    width: 32px;\n    height: 32px;\n    position: static;\n\n    &__bg {\n      background: var(--tertiary-elements, #636d78);\n      border-radius: 8px;\n      width: 32px;\n      height: 32px;\n      position: absolute;\n      left: 0px;\n      top: 0px;\n\n      &__icon {\n        border-radius: 4px;\n        padding: 4px;\n        display: flex;\n        flex-direction: row;\n        gap: 0px;\n        align-items: center;\n        justify-content: center;\n        width: 24px;\n        height: 24px;\n        position: absolute;\n        left: 4px;\n        top: 4px;\n      }\n    }\n  }\n\n  &__file-name {\n    color: var(--secondary-text, #636d78);\n    text-align: left;\n    font: var(--body-body-medium);\n    position: relative;\n  }\n}\n\n.message-icon-file {\n  align-self: stretch;\n  flex: 1;\n  height: auto;\n  position: relative;\n  overflow: visible;\n  fill: var(--color-media-icon, #ffffff);\n}\n",".message-attachment-image-body{\n  max-width: var(--max-width-image-message);\n  max-height: 160px;\n  padding: 0;\n  border-radius: 4px;\n}\n\n.message-attachment-image {\n  display: flex;\n  justify-content: center;\n  flex-flow: row;\n  max-width: var(--max-width-image-message);\n  max-height: 160px;\n  font: var(--body-body-medium, 400 14px / 20px \"Roboto-Regular\", sans-serif);\n  color: var(--main-tex, #0b1b0f);\n}\n",".audio-player {\n  display: flex;\n  gap: 5px;\n  flex-direction: row;\n  align-items: center;\n\n  &__equalizer-time {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n  }\n}\n.audio-body{\n  padding: 5px;\n  border-radius: 4px;\n  display: none;\n  width: var(--max-width-audio-message);\n\n  &__controls {\n    display: flex;\n    flex-flow: row;\n    align-items: center;\n    gap: 5px;\n    width: 24px;\n    height: 24px;\n\n    &--color{\n      fill: var(--main-elements)\n    }\n  }\n}\n\n.equalizer {\n  display: flex;\n  flex-direction: row;\n  gap: 2px;\n  align-items: flex-end;\n  justify-content: flex-start;\n  position: relative;\n\n  &__rectangle {\n    background: var(--main-elements, #636d78);\n    flex-shrink: 0;\n    width: 2px;\n    position: relative;\n  }\n}\n\n.time-play {\n  color: var(--secondary-text, #636d78);\n  text-align: left;\n  font: var(--label-label-small);\n  height: 16px;\n}\n\n.audio-bubble-background {\n\n  &__incoming {\n    background: var(--incoming-background, #e4e6e8);\n    border-radius: 22px 22px 22px 0px;\n    padding: 8px 12px 8px 12px;\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: flex-start;\n    justify-content: flex-start;\n    flex-shrink: 0;\n    position: relative;\n  }\n\n  &__outgoing {\n    background: var(--outgoing-background, #E7EFFF);\n    border-radius: 22px 22px 0px 22px;\n    padding: 8px 12px 8px 12px;\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: flex-start;\n    justify-content: flex-start;\n    flex-shrink: 0;\n    position: relative;\n  }\n\n}\n",".message-attachment-video-body{\n  max-height: 130px;\n  max-width: var(--max-width-audio-message);\n  width: var(--max-width-audio-message);\n  padding: 0;\n  border-radius: 4px;\n\n  &__link {\n    color: var(--secondary-text, #636d78);\n    text-align: left;\n    font: var(--label-label-small);\n    height: 16px;\n  }\n}\n\n.message-attachment-video {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-flow: column;\n  //max-width: 300px;\n  max-width: var(--max-width-audio-message);\n  width: var(--max-width-audio-message);\n  max-height: 160px;\n}\n\n\n"],"names":[],"sourceRoot":""}

package/storybook-static/static/css/Presentation-ui-components-UserListItem-UserListItem-stories.4d072348.chunk.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"static/css/Presentation-ui-components-UserListItem-UserListItem-stories.4d072348.chunk.css","mappings":"AAEA;AEFA;ACAA;ACAA;ACMA","sources":["webpack://quickblox-react-ui-kit/./src/Presentation/ui-components/Avatar/Avatar.scss","webpack://quickblox-react-ui-kit/./src/Presentation/themes/styles/_mixins.scss","webpack://quickblox-react-ui-kit/./src/Presentation/ui-components/CheckBox/CheckBox.scss","webpack://quickblox-react-ui-kit/./src/Presentation/ui-components/UserListItem/UserListItem.scss","webpack://quickblox-react-ui-kit/./src/Presentation/components/containers/ScrollableContainer/ScrollableContainer.scss","webpack://quickblox-react-ui-kit/./src/Presentation/components/UI/Placeholders/LoaderComponent/LoaderComponent.scss"],"sourcesContent":["@import '../../themes/styles/mixins';\n\n.avatar {\n  @include applyBorderBox;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n\n  overflow: hidden;\n  border-radius: 50%;\n  background-color: var(--disabled-elements);\n  color: var(--secondary-text);\n\n  svg {\n    fill: var(--secondary-text);\n    padding: 10px;\n  }\n\n  &__image {\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n  }\n\n  &--xs {\n    width: 32px;\n    height: 32px;\n  }\n\n  &--sm {\n    width: 36px;\n    height: 36px;\n  }\n\n  &--md {\n    width: 40px;\n    height: 40px;\n  }\n\n  &--lg {\n    width: 56px;\n    height: 56px;\n  }\n\n  &--xl {\n    width: 64px;\n    height: 64px;\n  }\n\n  &--xxl {\n    width: 80px;\n    height: 80px;\n  }\n}\n","@mixin applyBorderBox {\n  &,\n  * {\n    box-sizing: border-box;\n  }\n}\n",".checkbox {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  border-radius: 4px;\n  padding: 4px;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n}\n",".user-list-item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  height: 56px;\n  padding: 8px 19px 8px 16px;\n  gap: 16px;\n  background-color: var(--color-background);\n\n  &--disabled {\n    cursor: not-allowed;\n    color: var(--disabled-elements);\n    fill: var(--disabled-elements);\n  }\n\n  &__avatar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  &__name {\n    margin-left: 16px;\n\n    font-family: 'Roboto';\n    font-weight: 400;\n    font-size: 16px;\n    line-height: 24px;\n    letter-spacing: 0.15px;\n    color: var(--main-text);\n  }\n}\n",".list {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  position: relative;\n  width: 100%;\n\n}\n\n.list .spinner {\n  display: block;\n  height: 16px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  top: -16px;\n  transition: all 0.2s ease;\n}\n\n.list .spinner.active {\n  top: 8px;\n}\n\n.list .list-content {\n  flex: 1;\n  overflow-x: hidden;\n  //overflow-y: hidden;\n  overflow-y: auto;\n  width: 100%;\n}\n\n.list {\n  ::-webkit-scrollbar{\n    display: none;\n    width: 0px !important;\n    background: transparent;\n  }\n  ::-webkit-scrollbar-thumb {\n    background: transparent;\n  }\n  //:hover{\n  //  overflow-y: scroll;\n  //}\n}\n\n","$default-background-color: var(--main-elements);\n$default-width-icon: 44;\n$default-height-icon: 44;\n\n// #Loader{fill: $default-background-color};\n\n.loader {\n  animation: spin 2s linear infinite;\n  svg path {fill: $default-background-color};\n  min-width: $default-width-icon;\n  min-height: $default-height-icon;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n"],"names":[],"sourceRoot":""}