playbook_ui 14.3.2.pre.alpha.PBNTR515typeaheadmarginbottomredux3785 → 14.3.2.pre.alpha.pbntr523enablekitsforradiofix3809

Sign up to get free protection for your applications and to get access to all the features.
Files changed (64) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss +2 -3
  3. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +245 -23
  4. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -1
  5. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.html.erb +117 -0
  6. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx +227 -0
  7. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.md +1 -0
  8. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
  9. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
  10. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +1 -1
  11. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +5 -1
  12. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +72 -0
  13. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +91 -0
  14. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md +1 -0
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_react.md +1 -0
  16. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +2 -0
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -0
  18. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb +4 -0
  19. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +97 -21
  20. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +166 -0
  21. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +45 -6
  22. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_bubble.html.erb +73 -0
  23. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_bubble.jsx +86 -0
  24. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  25. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  26. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +6 -2
  27. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +21 -1
  28. data/app/pb_kits/playbook/pb_radio/_radio.tsx +92 -33
  29. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb +48 -0
  30. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +59 -0
  31. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.md +1 -0
  32. data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -0
  33. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  34. data/app/pb_kits/playbook/pb_radio/index.js +17 -0
  35. data/app/pb_kits/playbook/pb_radio/radio.html.erb +35 -13
  36. data/app/pb_kits/playbook/pb_radio/radio.rb +3 -1
  37. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -0
  38. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -0
  39. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +9 -7
  40. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +4 -3
  41. data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +5 -6
  42. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +26 -18
  43. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb +31 -0
  44. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx +26 -0
  45. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_rails.md +1 -0
  46. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_react.md +1 -0
  47. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -2
  48. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -1
  49. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +1 -2
  50. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +5 -6
  51. data/app/pb_kits/playbook/tokens/_colors.scss +2 -0
  52. data/dist/chunks/{_typeahead-DaDWXuYo.js → _typeahead-468tQVei.js} +2 -2
  53. data/dist/chunks/{_weekday_stacked-Drg1rU0J.js → _weekday_stacked-CODev76A.js} +2 -2
  54. data/dist/chunks/{lib--ErPKv63.js → lib-D2U4I1U6.js} +1 -1
  55. data/dist/chunks/{pb_form_validation-CHMFwDfe.js → pb_form_validation-zV9OpdSt.js} +1 -1
  56. data/dist/chunks/vendor.js +1 -1
  57. data/dist/playbook-doc.js +1 -1
  58. data/dist/playbook-rails-react-bindings.js +1 -1
  59. data/dist/playbook-rails.js +1 -1
  60. data/dist/playbook.css +1 -1
  61. data/lib/playbook/version.rb +1 -1
  62. metadata +23 -8
  63. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb +0 -88
  64. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx +0 -60
@@ -0,0 +1,227 @@
1
+ import React from 'react'
2
+ import { FormPill, Title } from 'playbook-ui'
3
+
4
+ const FormPillColors = (props) => {
5
+ return (
6
+ <div>
7
+ <Title
8
+ marginBottom="sm"
9
+ size={4}
10
+ text="Status Colors"
11
+ {...props}
12
+ />
13
+ <FormPill
14
+ onClick={() => {
15
+ alert('Click!')
16
+ }}
17
+ tabIndex={0}
18
+ text="Primary"
19
+ {...props}
20
+ />
21
+ <FormPill
22
+ color="neutral"
23
+ onClick={() => {
24
+ alert('Click!')
25
+ }}
26
+ tabIndex={0}
27
+ text="Neutral"
28
+ {...props}
29
+ />
30
+ <FormPill
31
+ color="success"
32
+ onClick={() => {
33
+ alert('Click!')
34
+ }}
35
+ tabIndex={0}
36
+ text="Success"
37
+ {...props}
38
+ />
39
+ <FormPill
40
+ color="warning"
41
+ onClick={() => {
42
+ alert('Click!')
43
+ }}
44
+ tabIndex={0}
45
+ text="Warning"
46
+ {...props}
47
+ />
48
+ <FormPill
49
+ color="error"
50
+ onClick={() => {
51
+ alert('Click!')
52
+ }}
53
+ tabIndex={0}
54
+ text="Error"
55
+ {...props}
56
+ />
57
+ <FormPill
58
+ color="info"
59
+ onClick={() => {
60
+ alert('Click!')
61
+ }}
62
+ tabIndex={0}
63
+ text="Info"
64
+ {...props}
65
+ />
66
+ <Title
67
+ marginBottom="sm"
68
+ marginTop="md"
69
+ size={4}
70
+ text="Data Colors"
71
+ {...props}
72
+ />
73
+ <FormPill
74
+ color="data_1"
75
+ onClick={() => {
76
+ alert('Click!')
77
+ }}
78
+ tabIndex={0}
79
+ text="Data 1"
80
+ {...props}
81
+ />
82
+ <FormPill
83
+ color="data_2"
84
+ onClick={() => {
85
+ alert('Click!')
86
+ }}
87
+ tabIndex={0}
88
+ text="Data 2"
89
+ {...props}
90
+ />
91
+ <FormPill
92
+ color="data_3"
93
+ onClick={() => {
94
+ alert('Click!')
95
+ }}
96
+ tabIndex={0}
97
+ text="Data 3"
98
+ {...props}
99
+ />
100
+ <FormPill
101
+ color="data_4"
102
+ onClick={() => {
103
+ alert('Click!')
104
+ }}
105
+ tabIndex={0}
106
+ text="Data 4"
107
+ {...props}
108
+ />
109
+ <FormPill
110
+ color="data_5"
111
+ onClick={() => {
112
+ alert('Click!')
113
+ }}
114
+ tabIndex={0}
115
+ text="Data 5"
116
+ {...props}
117
+ />
118
+ <FormPill
119
+ color="data_6"
120
+ onClick={() => {
121
+ alert('Click!')
122
+ }}
123
+ tabIndex={0}
124
+ text="Data 6"
125
+ {...props}
126
+ />
127
+ <FormPill
128
+ color="data_7"
129
+ onClick={() => {
130
+ alert('Click!')
131
+ }}
132
+ tabIndex={0}
133
+ text="Data 7"
134
+ {...props}
135
+ />
136
+ <FormPill
137
+ color="data_8"
138
+ onClick={() => {
139
+ alert('Click!')
140
+ }}
141
+ tabIndex={0}
142
+ text="Data 8"
143
+ {...props}
144
+ />
145
+ <Title
146
+ marginBottom="sm"
147
+ marginTop="md"
148
+ size={4}
149
+ text="Product Colors"
150
+ {...props}
151
+ />
152
+ <FormPill
153
+ color="windows"
154
+ onClick={() => {
155
+ alert('Click!')
156
+ }}
157
+ tabIndex={0}
158
+ text="Windows"
159
+ {...props}
160
+ />
161
+ <FormPill
162
+ color="siding"
163
+ onClick={() => {
164
+ alert('Click!')
165
+ }}
166
+ tabIndex={0}
167
+ text="Siding"
168
+ {...props}
169
+ />
170
+ <FormPill
171
+ color="roofing"
172
+ onClick={() => {
173
+ alert('Click!')
174
+ }}
175
+ tabIndex={0}
176
+ text="Roofing"
177
+ {...props}
178
+ />
179
+ <FormPill
180
+ color="doors"
181
+ onClick={() => {
182
+ alert('Click!')
183
+ }}
184
+ tabIndex={0}
185
+ text="Doors"
186
+ {...props}
187
+ />
188
+ <FormPill
189
+ color="gutters"
190
+ onClick={() => {
191
+ alert('Click!')
192
+ }}
193
+ tabIndex={0}
194
+ text="Gutters"
195
+ {...props}
196
+ />
197
+ <FormPill
198
+ color="solar"
199
+ onClick={() => {
200
+ alert('Click!')
201
+ }}
202
+ tabIndex={0}
203
+ text="Solar"
204
+ {...props}
205
+ />
206
+ <FormPill
207
+ color="insulation"
208
+ onClick={() => {
209
+ alert('Click!')
210
+ }}
211
+ tabIndex={0}
212
+ text="Insulation"
213
+ {...props}
214
+ />
215
+ <FormPill
216
+ color="accessories"
217
+ onClick={() => {
218
+ alert('Click!')
219
+ }}
220
+ tabIndex={0}
221
+ text="Accessories"
222
+ {...props}
223
+ />
224
+ </div>
225
+ )
226
+ }
227
+ export default FormPillColors
@@ -0,0 +1 @@
1
+ The Status, Data, and Product colors highlighted above can be passed to the `color` prop. Primary is the default color. Form pills with a text tag, an avatar, or an icon with text tag can all receive the `color` prop.
@@ -6,6 +6,7 @@ examples:
6
6
  - form_pill_tag: Form Pill Tag
7
7
  - form_pill_example: Example
8
8
  - form_pill_icon: Form Pill Icon
9
+ - form_pill_colors: Form Pill Colors
9
10
 
10
11
  react:
11
12
  - form_pill_user: Form Pill User
@@ -13,3 +14,4 @@ examples:
13
14
  - form_pill_tag: Form Pill Tag
14
15
  - form_pill_example: Example
15
16
  - form_pill_icon: Form Pill Icon
17
+ - form_pill_colors: Form Pill Colors
@@ -3,3 +3,4 @@ export { default as FormPillSize } from './_form_pill_size.jsx'
3
3
  export { default as FormPillTag } from './_form_pill_tag.jsx'
4
4
  export { default as FormPillExample } from './_form_pill_example.jsx'
5
5
  export { default as FormPillIcon } from './_form_pill_icon.jsx'
6
+ export { default as FormPillColors } from './_form_pill_colors.jsx'
@@ -12,7 +12,7 @@ module Playbook
12
12
  values: %w[none lowercase],
13
13
  default: "none"
14
14
  prop :color, type: Playbook::Props::Enum,
15
- values: %w[primary neutral],
15
+ values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
16
16
  default: "primary"
17
17
  prop :tabindex
18
18
  prop :icon
@@ -34,6 +34,7 @@ type MultiLevelSelectProps = {
34
34
  onSelect?: (prop: { [key: string]: any }) => void
35
35
  selectedIds?: string[]
36
36
  variant?: "multi" | "single"
37
+ pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
37
38
  } & GlobalProps
38
39
 
39
40
  const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -50,7 +51,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
50
51
  treeData,
51
52
  onSelect = () => null,
52
53
  selectedIds,
53
- variant = "multi"
54
+ variant = "multi",
55
+ pillColor = "primary"
54
56
  } = props
55
57
 
56
58
  const ariaProps = buildAriaProps(aria)
@@ -467,6 +469,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
467
469
  inputDisplay === "pills"
468
470
  ? returnedArray.map((item, index) => (
469
471
  <FormPill
472
+ color={pillColor}
470
473
  key={index}
471
474
  onClick={(event: any) => handlePillClose(event, item)}
472
475
  text={item.label}
@@ -479,6 +482,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
479
482
  inputDisplay === "pills"
480
483
  ? defaultReturn.map((item, index) => (
481
484
  <FormPill
485
+ color={pillColor}
482
486
  key={index}
483
487
  onClick={(event: any) => handlePillClose(event, item)}
484
488
  text={item.label}
@@ -0,0 +1,72 @@
1
+ <% treeData = [{
2
+ label: "Power Home Remodeling",
3
+ value: "Power Home Remodeling",
4
+ id: "100",
5
+ expanded: true,
6
+ children: [
7
+ {
8
+ label: "People",
9
+ value: "People",
10
+ id: "101",
11
+ expanded: true,
12
+ children: [
13
+ {
14
+ label: "Talent Acquisition",
15
+ value: "Talent Acquisition",
16
+ id: "102",
17
+ },
18
+ {
19
+ label: "Business Affairs",
20
+ value: "Business Affairs",
21
+ id: "103",
22
+ children: [
23
+ {
24
+ label: "Initiatives",
25
+ value: "Initiatives",
26
+ id: "104",
27
+ },
28
+ {
29
+ label: "Learning & Development",
30
+ value: "Learning & Development",
31
+ id: "105",
32
+ },
33
+ ],
34
+ },
35
+ {
36
+ label: "People Experience",
37
+ value: "People Experience",
38
+ id: "106",
39
+ },
40
+ ],
41
+ },
42
+ {
43
+ label: "Contact Center",
44
+ value: "Contact Center",
45
+ id: "107",
46
+ children: [
47
+ {
48
+ label: "Appointment Management",
49
+ value: "Appointment Management",
50
+ id: "108",
51
+ },
52
+ {
53
+ label: "Customer Service",
54
+ value: "Customer Service",
55
+ id: "109",
56
+ },
57
+ {
58
+ label: "Energy",
59
+ value: "Energy",
60
+ id: "110",
61
+ },
62
+ ],
63
+ },
64
+ ],
65
+ }] %>
66
+
67
+ <%= pb_rails("multi_level_select", props: {
68
+ id: "multi-level-select-default-rails",
69
+ name: "my_array",
70
+ tree_data: treeData,
71
+ pill_color: "neutral"
72
+ }) %>
@@ -0,0 +1,91 @@
1
+ import React from "react";
2
+ import MultiLevelSelect from "../_multi_level_select";
3
+
4
+ const treeData = [
5
+ {
6
+ label: "Power Home Remodeling",
7
+ value: "Power Home Remodeling",
8
+ id: "powerhome1",
9
+ expanded: true,
10
+ children: [
11
+ {
12
+ label: "People",
13
+ value: "People",
14
+ id: "people1",
15
+ expanded: true,
16
+ children: [
17
+ {
18
+ label: "Talent Acquisition",
19
+ value: "Talent Acquisition",
20
+ id: "talent1",
21
+ },
22
+ {
23
+ label: "Business Affairs",
24
+ value: "Business Affairs",
25
+ id: "business1",
26
+ children: [
27
+ {
28
+ label: "Initiatives",
29
+ value: "Initiatives",
30
+ id: "initiative1",
31
+ },
32
+ {
33
+ label: "Learning & Development",
34
+ value: "Learning & Development",
35
+ id: "development1",
36
+ },
37
+ ],
38
+ },
39
+ {
40
+ label: "People Experience",
41
+ value: "People Experience",
42
+ id: "experience1",
43
+ },
44
+ ],
45
+ },
46
+ {
47
+ label: "Contact Center",
48
+ value: "Contact Center",
49
+ id: "contact1",
50
+ children: [
51
+ {
52
+ label: "Appointment Management",
53
+ value: "Appointment Management",
54
+ id: "appointment1",
55
+ },
56
+ {
57
+ label: "Customer Service",
58
+ value: "Customer Service",
59
+ id: "customer1",
60
+ },
61
+ {
62
+ label: "Energy",
63
+ value: "Energy",
64
+ id: "energy1",
65
+ },
66
+ ],
67
+ },
68
+ ],
69
+ },
70
+ ];
71
+
72
+ const MultiLevelSelectColor = (props) => {
73
+ return (
74
+ <div>
75
+ <MultiLevelSelect
76
+ id='multiselect-color'
77
+ onSelect={(selectedNodes) =>
78
+ console.log(
79
+ "Selected Items",
80
+ selectedNodes
81
+ )
82
+ }
83
+ pillColor="neutral"
84
+ treeData={treeData}
85
+ {...props}
86
+ />
87
+ </div>
88
+ )
89
+ };
90
+
91
+ export default MultiLevelSelectColor;
@@ -0,0 +1 @@
1
+ Change the form pill color by passing the optional `pill_color` prop. Product, Data, and Status colors are available options. Check them out <a href="https://playbook.powerapp.cloud/kits/form_pill#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.
@@ -0,0 +1 @@
1
+ Change the form pill color by passing the optional `pillColor` prop. Product, Data, and Status colors are available options. Check them out <a href="https://playbook.powerapp.cloud/kits/form_pill/react#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.
@@ -6,6 +6,7 @@ examples:
6
6
  - multi_level_select_return_all_selected: Return All Selected
7
7
  - multi_level_select_selected_ids: Selected Ids
8
8
  - multi_level_select_with_form: With Form
9
+ - multi_level_select_color: With Pills (Custom Color)
9
10
 
10
11
  react:
11
12
  - multi_level_select_default: Default
@@ -13,3 +14,4 @@ examples:
13
14
  - multi_level_select_single_children_only: Single Select w/ Hidden Radios
14
15
  - multi_level_select_return_all_selected: Return All Selected
15
16
  - multi_level_select_selected_ids_react: Selected Ids
17
+ - multi_level_select_color: With Pills (Custom Color)
@@ -3,3 +3,4 @@ export { default as MultiLevelSelectSingle } from './_multi_level_select_single.
3
3
  export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
4
4
  export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
5
5
  export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
6
+ export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
@@ -19,6 +19,9 @@ module Playbook
19
19
  prop :variant, type: Playbook::Props::Enum,
20
20
  values: %w[multi single],
21
21
  default: "multi"
22
+ prop :pill_color, type: Playbook::Props::Enum,
23
+ values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
24
+ default: "primary"
22
25
 
23
26
  def classname
24
27
  generate_classname("pb_multi_level_select")
@@ -34,6 +37,7 @@ module Playbook
34
37
  selectedIds: selected_ids,
35
38
  input_name: input_name,
36
39
  variant: variant,
40
+ pillColor: pill_color,
37
41
  }
38
42
  end
39
43
  end
@@ -3,8 +3,25 @@
3
3
  @import "../tokens/opacity";
4
4
  @import "../pb_avatar/avatar";
5
5
 
6
+ @mixin avatar-size($size) {
7
+ height: $size;
8
+ width: $size;
9
+ .avatar_wrapper {
10
+ width: $size;
11
+ height: $size;
12
+ }
13
+ }
14
+
15
+ @mixin position($position) {
16
+ position: absolute;
17
+ @each $pos, $val in $position {
18
+ #{$pos}: $val;
19
+ }
20
+ }
21
+
6
22
  [class^=pb_multiple_users_stacked_kit] {
7
23
  $container_size: map-get($avatar-sizes, "xs");
24
+ $bubble_container_size: map-get($avatar-sizes, "sm");
8
25
  $overlap: -15px;
9
26
  $border_size: 1px;
10
27
  $stacked_size: 18px;
@@ -17,34 +34,24 @@
17
34
  flex-shrink: 0;
18
35
  flex-grow: 0;
19
36
  [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
20
- height: $stacked_size;
21
- width: $stacked_size;
22
- &.dark {
23
- .avatar_wrapper {
24
- border: $pb_multiple_users_border_size solid $bg_dark;
25
- }
26
- }
37
+ @include avatar-size($stacked_size);
38
+ &.dark {
27
39
  .avatar_wrapper {
28
- border: $border_size solid $white;
29
- height: $stacked_size;
30
- width: $stacked_size;
31
- img {
32
- z-index: 0;
33
- }
40
+ border: $border_size solid $bg_dark;
34
41
  }
35
42
  }
36
- &[class*=_single] .pb_multiple_users_stacked_item {
37
- width: $container_size;
38
- height: $container_size;
39
43
  .avatar_wrapper {
40
- width: $container_size;
41
- height: $container_size;
44
+ border: $border_size solid $white;
45
+ img {
46
+ z-index: 0;
47
+ }
42
48
  }
43
49
  }
50
+ &[class*=_single] .pb_multiple_users_stacked_item {
51
+ @include avatar-size($container_size);
52
+ }
44
53
  [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
45
- position: absolute;
46
- bottom: 0;
47
- right: 0;
54
+ @include position((bottom: 0, right: 0));
48
55
  z-index: 2;
49
56
  background: tint($primary, 90%);
50
57
  border-radius: $border_rad_mega;
@@ -63,4 +70,73 @@
63
70
  font-size: 0;
64
71
  color: transparent;
65
72
  }
73
+
74
+ &[class*=_bubble] {
75
+ @include avatar-size($bubble_container_size);
76
+ background-color: $bg_light;
77
+ border-radius: 50%;
78
+
79
+ &.dark {
80
+ background-color: $card_dark;
81
+ }
82
+
83
+ [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
84
+ &.dark {
85
+ .avatar_wrapper {
86
+ border: $border_size solid $border_dark;
87
+ }
88
+ }
89
+ }
90
+
91
+ [class^=pb_avatar_kit] {
92
+ &.first_item {
93
+ @include position((top: 4px, left: 3px));
94
+ @include avatar-size(20px);
95
+
96
+ &.triple_bubble {
97
+ @include position((top: 4px, left: 4px));
98
+ @include avatar-size(16px);
99
+ }
100
+
101
+ &.quadruple_bubble {
102
+ @include position((top: 5px, left: 3px));
103
+ @include avatar-size(16px);
104
+ }
105
+ }
106
+
107
+ &.second_item {
108
+ @include position((bottom: 5px, right: 4px));
109
+ @include avatar-size(12px);
110
+
111
+ &.triple_bubble {
112
+ @include position((top: 13px, right: 2px));
113
+ }
114
+
115
+ &.quadruple_bubble {
116
+ @include position((bottom: 9px, right: 4px));
117
+ }
118
+ }
119
+
120
+ &.third_item {
121
+ @include position((bottom: 3px, left: 11px));
122
+ @include avatar-size(10px);
123
+
124
+ &.quadruple_bubble {
125
+ @include position((bottom: 3px, left: 9px));
126
+ }
127
+ }
128
+
129
+ &.fourth_item {
130
+ @include position((top: 5px, right: 6px));
131
+ @include avatar-size(8px);
132
+ }
133
+ }
134
+ }
135
+
136
+ &[class*=_single_bubble] {
137
+ [class^=pb_avatar_kit].first_item {
138
+ @include position((top: 0, left: 0));
139
+ @include avatar-size($bubble_container_size);
140
+ }
141
+ }
66
142
  }