Skip to content

Commit aa886b9

Browse files
MartinCupelaMartinCupela
authored
feat: add styles for Polls (#315)
1 parent 224777f commit aa886b9

20 files changed

+1079
-15
lines changed

‎src/v2/styles/Avatar/Avatar-layout.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@
3030
.stream-chat__avatar--message-status {
3131
--str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 15);
3232
}
33+
34+
.str-chat__avatar--poll-vote-author {
35+
--str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 20);
36+
}
3337
}
3438

3539
.str-chat__avatar {

‎src/v2/styles/Dialog/Dialog-layout.scss‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,62 @@
1+
@use '../utils';
2+
13
.str-chat__dialog-overlay {
24
inset: 0;
35
overflow: hidden;
46
position: absolute;
57
height: var(--str-chat__dialog-overlay-height);
68
width: 100%;
79
z-index: 2;
10+
}
11+
12+
.str-chat__dialog {
13+
width: 100%;
14+
15+
.str-chat__dialog__body {
16+
padding: 2rem 1rem;
17+
overflow-y: auto;
18+
19+
.str-chat__dialog__title {
20+
margin-bottom: 1rem;
21+
}
22+
23+
}
24+
25+
.str-chat__dialog__controls {
26+
display: flex;
27+
justify-content: flex-end;
28+
gap: 1.25rem;
29+
padding: 1.25rem;
30+
31+
.str-chat__dialog__controls-button {
32+
@include utils.button-reset;
33+
}
34+
}
35+
}
36+
37+
.str-chat__prompt-dialog {
38+
input[type=text] {
39+
width: 100%;
40+
padding: 0.625rem 1rem;
41+
}
42+
}
43+
44+
.str-chat__dialog-menu {
45+
overflow: hidden;
46+
47+
.str-chat__dialog-menu__button {
48+
display: flex;
49+
align-items: center;
50+
width: 100%;
51+
padding: 0.5rem 0.75rem;
52+
53+
.str-chat__dialog-menu__button-icon {
54+
height: 1rem;
55+
width: 1rem;
56+
}
57+
58+
.str-chat__dialog-menu__button-text {
59+
padding-inline: 0.675rem;
60+
}
61+
}
862
}

‎src/v2/styles/Dialog/Dialog-theme.scss‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
@use '../utils';
2+
3+
.str-chat {
4+
/* The border radius used for the borders of the component */
5+
--str-chat__dialog-menu-border-radius: var(--str-chat__border-radius-sm);
6+
7+
/* The text/icon color of the component */
8+
--str-chat__dialog-menu-color: var(--str-chat__text-color);
9+
10+
/* The background color of the component */
11+
--str-chat__dialog-menu-background-color: var(--str-chat__secondary-background-color);
12+
13+
/* Top border of the component */
14+
--str-chat__dialog-menu-border-block-start: none;
15+
16+
/* Bottom border of the component */
17+
--str-chat__dialog-menu-border-block-end: none;
18+
19+
/* Left (right in RTL layout) border of the component */
20+
--str-chat__dialog-menu-border-inline-start: none;
21+
22+
/* Right (left in RTL layout) border of the component */
23+
--str-chat__dialog-menu-border-inline-end: none;
24+
25+
/* Box shadow applied to the component */
26+
--str-chat__dialog-menu-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
27+
28+
/* The border radius used for the borders of an item in the message actions box */
29+
--str-chat__dialog-menu-button-border-radius: 0;
30+
31+
/* The text/icon color of an item in the message actions box */
32+
--str-chat__dialog-menu-button-color: var(--str-chat__text-color);
33+
34+
/* The background color of an item in the message actions box */
35+
--str-chat__dialog-menu-button-background-color: transparent;
36+
37+
/* The background color of an item in the message actions box when hovered */
38+
--str-chat__dialog-menu-button-hover-background-color: var(--str-chat__secondary-surface-color);
39+
40+
/* Top border of an item in the message actions box */
41+
--str-chat__dialog-menu-button-border-block-start: none;
42+
43+
/* Bottom border of an item in the message actions box */
44+
--str-chat__dialog-menu-button-border-block-end: none;
45+
46+
/* Left (right in RTL layout) border of an item in the message actions box */
47+
--str-chat__dialog-menu-button-border-inline-start: none;
48+
49+
/* Right (left in RTL layout) border of an item in the message actions box */
50+
--str-chat__dialog-menu-button-border-inline-end: none;
51+
52+
/* Box shadow applied to an item in the message actions box */
53+
--str-chat__dialog-menu-button-box-shadow: none;
54+
}
55+
56+
.str-chat__dialog {
57+
.str-chat__dialog__title {
58+
font: var(--str-chat__subtitle-medium-text);
59+
}
60+
61+
.str-chat__dialog__prompt {
62+
font: var(--str-chat__subtitle-text);
63+
}
64+
65+
.str-chat__dialog__controls {
66+
.str-chat__dialog__controls-button {
67+
cursor: pointer;
68+
font: var(--str-chat__body-medium-text);
69+
color: var(--str-chat__primary-color);
70+
}
71+
72+
.str-chat__dialog__controls-button--submit {
73+
text-transform: uppercase;
74+
75+
&:disabled {
76+
color: var(--str-chat__disabled-color);
77+
}
78+
}
79+
}
80+
}
81+
82+
.str-chat__prompt-dialog {
83+
input[type=text] {
84+
font: var(--str-chat__subtitle-text);
85+
border-radius: 20px;
86+
border: 1px solid var(--str-chat__primary-color);
87+
}
88+
}
89+
90+
91+
.str-chat__dialog-menu {
92+
@include utils.component-layer-overrides('dialog-menu');
93+
94+
.str-chat__dialog-menu__button {
95+
@include utils.component-layer-overrides('dialog-menu-button');
96+
cursor: pointer;
97+
font: var(--str-chat__subtitle-text);
98+
99+
&:hover, &:focus{
100+
background-color: var(--str-chat__dialog-menu-button-hover-background-color);
101+
}
102+
}
103+
}

‎src/v2/styles/DragAndDropContainer/DragAmdDropContainer-layout.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.str-chat__drag-and-drop-container__item {
2+
display: flex;
3+
width: 100%;
4+
padding-block: 0.25rem;
5+
}

‎src/v2/styles/DragAndDropContainer/DragAndDropContainer-theme.scss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.str-chat {
2+
/* Top border of the component */
3+
--str-chat__drag-and-drop-container-border-block-start: 2px solid transparent;
4+
5+
/* Bottom border of the component */
6+
--str-chat__drag-and-drop-container-border-block-end: 2px solid transparent;
7+
8+
/* Top border of the component on dragover */
9+
--str-chat__drag-and-drop-container-on-dragover-border-block-start: 2px solid var(--str-chat__primary-color);
10+
11+
/* Bottom border of the component on dragover */
12+
--str-chat__drag-and-drop-container-on-dragover-border-block-end: 2px solid var(--str-chat__primary-color);
13+
14+
/* Left (right in RTL layout) border of the component on dragover */
15+
--str-chat__drag-and-drop-container-on-dragover-border-inline-start: none;
16+
17+
/* Right (left in RTL layout) border of the component on dragover */
18+
--str-chat__drag-and-drop-container-on-dragover-border-inline-end: none;
19+
}
20+
21+
22+
.str-chat__drag-and-drop-container--dragging {
23+
cursor: grabbing;
24+
}
25+
26+
.str-chat__drag-and-drop-container__item[draggable="true"] {
27+
cursor: grab;
28+
29+
&:active {
30+
background: transparent;
31+
}
32+
}
33+
34+
35+
.str-chat__drag-and-drop-container__item {
36+
border-bottom: var(--str-chat__drag-and-drop-container-border-block-start);
37+
border-top: var(--str-chat__drag-and-drop-container-border-block-start);
38+
39+
&.str-chat__drag-and-drop-container__item--dragged-over-from-top {
40+
border-bottom: var(--str-chat__drag-and-drop-container-on-dragover-border-block-end);
41+
}
42+
43+
&.str-chat__drag-and-drop-container__item--dragged-over-from-bottom {
44+
border-top: var(--str-chat__drag-and-drop-container-on-dragover-border-block-start);
45+
}
46+
}
47+

‎src/v2/styles/Form/Form-layout.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.str-chat__dialog__field {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 0.5rem;
5+
6+
.str-chat__form-field-error {
7+
margin-left: 0.5rem;
8+
}
9+
}

‎src/v2/styles/Form/Form-theme.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.str-chat__form-field-error {
2+
font-size: 0.75rem;
3+
color: var(--str-chat__danger-color)
4+
}
5+
6+
// hide spin buttons form input of type number
7+
/* Chrome, Safari, Edge, Opera */
8+
input::-webkit-outer-spin-button,
9+
input::-webkit-inner-spin-button {
10+
-webkit-appearance: none;
11+
margin: 0;
12+
}
13+
14+
/* Firefox */
15+
input[type=number] {
16+
-moz-appearance: textfield;
17+
}

‎src/v2/styles/InfiniteScrollPaginator/InfiniteScrollPaginator-layout.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.str-chat__infinite-scroll-paginator {
2+
overflow-y: auto;
3+
overflow-x: hidden;
4+
}

‎src/v2/styles/MessageActionsBox/MessageActionsBox-layout.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,3 @@
1818
}
1919
}
2020
}
21-
22-
.str-chat__message-actions-box:not(.str-chat__message-actions-box-angular) {
23-
display: none;
24-
z-index: 1;
25-
26-
&.str-chat__message-actions-box--open {
27-
display: block;
28-
}
29-
}

‎src/v2/styles/MessageInput/MessageInput-layout.scss‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,6 @@
5353
height: calc(var(--str-chat__spacing-px) * 45);
5454
cursor: pointer;
5555

56-
.str-chat__file-input {
57-
display: none;
58-
}
59-
6056
.str-chat__file-input-label {
6157
@include utils.flex-row-center;
6258
cursor: pointer;
@@ -217,3 +213,31 @@
217213
transform: scale(-1, 1);
218214
}
219215
}
216+
217+
.str-chat__attachment-selector-actions-menu,
218+
.str-chat__attachment-selector {
219+
button {
220+
@include utils.button-reset;
221+
}
222+
}
223+
224+
.str-chat__attachment-selector {
225+
.str-chat__attachment-selector__menu-button {
226+
padding: 0.25rem 0.5rem;
227+
cursor: pointer;
228+
229+
.str-chat__attachment-selector__menu-button__icon {
230+
height: 26px;
231+
width: 26px;
232+
}
233+
}
234+
}
235+
236+
.str-chat__file-input {
237+
display: none;
238+
}
239+
240+
.str-chat__attachment-selector-actions-menu {
241+
min-width: 300px;
242+
padding-block: 0.5rem;
243+
}

0 commit comments

Comments
 (0)