stream-chat-css/src/v2/styles/Modal/Modal-theme.scss at 34040db79febcbe103cd20be6b0dfbd354463e79 · GetStream/stream-chat-css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
@use '../utils';

.str-chat {
  /* The border radius used for the borders of the content area of the component of the content area of the component */
  --str-chat__modal-border-radius: var(--str-chat__border-radius-sm);

  /* The text/icon color of the content area of the component */
  --str-chat__modal-color: var(--str-chat__text-color);

  /* The background color of the content area of the component */
  --str-chat__modal-background-color: var(--str-chat__secondary-background-color);

  /* The overlay color of the component */
  --str-chat__modal-overlay-color: var(--str-chat__secondary-overlay-color);

  /* The backdrop filter applied to the component */
  --str-chat__modal-overlay-backdrop-filter: blur(3px);

  /* Top border of the content area of the component */
  --str-chat__modal-border-block-start: none;

  /* Bottom border of the content area of the component */
  --str-chat__modal-border-block-end: none;

  /* Left (right in RTL layout) border of the content area of the component */
  --str-chat__modal-border-inline-start: none;

  /* Right (left in RTL layout) border of the content area of the component */
  --str-chat__modal-border-inline-end: none;

  /* Box shadow applied to the content area of the component */
  --str-chat__modal-box-shadow: none;

  /* The background color of the close button */
  --str-chat__modal-close-icon-background: var(--str-chat__text-low-emphasis-color);

  /* The icon color of the close button */
  --str-chat__modal-close-icon-color: var(--str-chat__on-disabled-color);
}

.str-chat__modal {
  background-color: var(--str-chat__modal-overlay-color);
  backdrop-filter: var(--str-chat__modal-overlay-backdrop-filter);

  .str-chat__modal__inner {
    @include utils.component-layer-overrides('modal');
  }

  .str-chat__modal-header {
    .str-chat__modal-header__title {
      font: var(--str-chat__subtitle2-medium-text);
    }
  }

  .str-chat__modal__close-button {
    --str-chat-icon-color: var(--str-chat__modal-close-icon-color);
    @include utils.button-reset;

    .str-chat__icon {
      background-color: var(--str-chat__modal-close-icon-background);
      border-radius: 999px;
    }

    svg {
      path {
        fill: var(--str-chat__modal-close-icon-color);
      }

      rect,
      circle {
        fill: var(--str-chat__modal-close-icon-background);
      }
    }
  }
}

@mixin image-on-modal {
  .str-chat__modal__inner.str-chat-react__modal__inner {
    background-color: transparent;
    width: unset;
    max-width: unset;
    height: unset;
    padding: 0;

    img {
      max-width: unset;
      max-height: calc(100vh - 80px);
      cursor: default;
    }
  }
}

// stream-chat-react image gallery does not show the modal inner container. It has to be reset to
// width of its content in order the modal can be closed when clicked on overlay
// todo: remove this rule once only GlobalModal is used and old Modal is removed from stream-chat-react
.str-chat__message-attachment--card,
.str-chat__message-attachment--image,
.str-chat__message-attachment--gallery {
  .str-chat__modal--open {
    @include image-on-modal;
  }
}

.str-chat-react__modal.str-chat__modal--open {
  &.str-chat__image-modal,
  &.str-chat__gallery-modal {
    @include image-on-modal;
  }
}