@kaizen/components 1.70.8 → 1.70.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (123) hide show
  1. package/dist/cjs/Avatar/Avatar.cjs +3 -3
  2. package/dist/cjs/Avatar/Avatar.module.css.cjs +20 -0
  3. package/dist/cjs/AvatarGroup/AvatarGroup.cjs +1 -1
  4. package/dist/cjs/AvatarGroup/AvatarGroup.module.css.cjs +11 -0
  5. package/dist/cjs/Badge/Badge.cjs +1 -1
  6. package/dist/cjs/Badge/Badge.module.css.cjs +14 -0
  7. package/dist/cjs/Brand/Brand.cjs +1 -1
  8. package/dist/cjs/Brand/{Brand.module.scss.cjs → Brand.module.css.cjs} +1 -1
  9. package/dist/cjs/BrandMoment/BrandMoment.cjs +1 -1
  10. package/dist/cjs/BrandMoment/BrandMoment.module.css.cjs +29 -0
  11. package/dist/cjs/ButtonGroup/ButtonGroup.cjs +1 -1
  12. package/dist/cjs/ButtonGroup/ButtonGroup.module.css.cjs +9 -0
  13. package/dist/esm/Avatar/Avatar.mjs +6 -6
  14. package/dist/esm/Avatar/Avatar.module.css.mjs +18 -0
  15. package/dist/esm/AvatarGroup/AvatarGroup.mjs +2 -2
  16. package/dist/esm/AvatarGroup/AvatarGroup.module.css.mjs +9 -0
  17. package/dist/esm/Badge/Badge.mjs +1 -1
  18. package/dist/esm/Badge/Badge.module.css.mjs +12 -0
  19. package/dist/esm/Brand/Brand.mjs +1 -1
  20. package/dist/esm/Brand/{Brand.module.scss.mjs → Brand.module.css.mjs} +1 -1
  21. package/dist/esm/BrandMoment/BrandMoment.mjs +6 -6
  22. package/dist/esm/BrandMoment/BrandMoment.module.css.mjs +27 -0
  23. package/dist/esm/Button/GenericButton/GenericButton.mjs +2 -2
  24. package/dist/esm/ButtonGroup/ButtonGroup.mjs +1 -1
  25. package/dist/esm/ButtonGroup/ButtonGroup.module.css.mjs +7 -0
  26. package/dist/esm/Collapsible/Collapsible/Collapsible.mjs +2 -2
  27. package/dist/esm/DatePicker/DatePicker.mjs +1 -1
  28. package/dist/esm/DatePicker/subcomponents/DateInputField/DateInputField.mjs +1 -1
  29. package/dist/esm/DatePicker/utils/validateDate.mjs +3 -3
  30. package/dist/esm/DateRangePicker/DateRangePicker.mjs +1 -1
  31. package/dist/esm/EmptyState/EmptyState.mjs +2 -2
  32. package/dist/esm/FieldMessage/FieldMessage.mjs +1 -1
  33. package/dist/esm/Filter/Filter/Filter.mjs +1 -1
  34. package/dist/esm/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.mjs +2 -2
  35. package/dist/esm/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.mjs +2 -2
  36. package/dist/esm/Filter/FilterButton/FilterButton/FilterButton.mjs +1 -1
  37. package/dist/esm/Filter/FilterDatePicker/subcomponents/DateInputField/DateInputField.mjs +1 -1
  38. package/dist/esm/Filter/FilterDatePicker/utils/getDateValidationHandler.mjs +1 -1
  39. package/dist/esm/Filter/FilterDateRangePicker/FilterDateRangePicker.mjs +1 -1
  40. package/dist/esm/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.mjs +1 -1
  41. package/dist/esm/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.mjs +1 -1
  42. package/dist/esm/Filter/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.mjs +1 -1
  43. package/dist/esm/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.mjs +3 -3
  44. package/dist/esm/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.mjs +1 -1
  45. package/dist/esm/GuidanceBlock/GuidanceBlock.mjs +4 -4
  46. package/dist/esm/Illustration/subcomponents/Base/Base.mjs +2 -2
  47. package/dist/esm/Input/InputRange/InputRange.mjs +1 -1
  48. package/dist/esm/Input/InputSearch/InputSearch.mjs +3 -3
  49. package/dist/esm/LikertScaleLegacy/LikertScaleLegacy.mjs +1 -1
  50. package/dist/esm/Menu/subcomponents/StatelessMenu/StatelessMenu.mjs +1 -1
  51. package/dist/esm/Modal/ContextModal/ContextModal.mjs +1 -1
  52. package/dist/esm/Modal/GenericModal/GenericModal.mjs +1 -1
  53. package/dist/esm/MultiSelect/MultiSelect.mjs +1 -1
  54. package/dist/esm/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.mjs +1 -1
  55. package/dist/esm/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.mjs +1 -1
  56. package/dist/esm/MultiSelect/subcomponents/Popover/Popover.mjs +1 -1
  57. package/dist/esm/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.mjs +2 -2
  58. package/dist/esm/Notification/ToastNotification/ToastNotificationsList/subcomponents/ToastNotificationsMap/ToastNotificationsMap.mjs +1 -1
  59. package/dist/esm/Notification/subcomponents/GenericNotification/GenericNotification.mjs +3 -3
  60. package/dist/esm/Pagination/Pagination.mjs +2 -2
  61. package/dist/esm/Popover/Popover.mjs +3 -3
  62. package/dist/esm/ProgressBar/ProgressBar.mjs +1 -1
  63. package/dist/esm/RichTextEditor/RichTextEditor/RichTextEditor.mjs +3 -3
  64. package/dist/esm/RichTextEditor/utils/plugins/LinkManager/components/LinkEditor/LinkEditor.mjs +1 -1
  65. package/dist/esm/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.mjs +1 -1
  66. package/dist/esm/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/Positioner.mjs +1 -1
  67. package/dist/esm/RichTextEditor/utils/plugins/LinkManager/createReactTooltipWrapper.mjs +1 -1
  68. package/dist/esm/RichTextEditor/utils/plugins/LinkManager/validation.mjs +1 -1
  69. package/dist/esm/SearchField/SearchField.mjs +1 -1
  70. package/dist/esm/Select/Select.mjs +1 -1
  71. package/dist/esm/Slider/Slider.mjs +1 -1
  72. package/dist/esm/Table/Table.mjs +15 -15
  73. package/dist/esm/Tabs/subcomponents/Tab.mjs +1 -1
  74. package/dist/esm/Tag/Tag.mjs +2 -2
  75. package/dist/esm/TextAreaField/TextAreaField.mjs +1 -1
  76. package/dist/esm/TextField/TextField.mjs +3 -3
  77. package/dist/esm/Tile/MultiActionTile/MultiActionTile.mjs +1 -1
  78. package/dist/esm/Tile/TileGrid/TileGrid.mjs +2 -2
  79. package/dist/esm/Tile/subcomponents/GenericTile/GenericTile.mjs +5 -5
  80. package/dist/esm/TitleBlockZen/TitleBlockZen.mjs +12 -12
  81. package/dist/esm/TitleBlockZen/subcomponents/MainActions.mjs +5 -5
  82. package/dist/esm/TitleBlockZen/subcomponents/MobileActions.mjs +5 -5
  83. package/dist/esm/TitleBlockZen/subcomponents/SecondaryActions.mjs +2 -2
  84. package/dist/esm/Tooltip/Tooltip.mjs +1 -1
  85. package/dist/esm/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.mjs +1 -1
  86. package/dist/esm/__rc__/Button/subcomponents/ButtonContent/ButtonContent.mjs +1 -1
  87. package/dist/esm/__rc__/Button/subcomponents/PendingContent/PendingContent.mjs +1 -1
  88. package/dist/esm/__rc__/Menu/MenuItem.mjs +2 -2
  89. package/dist/esm/__rc__/Select/Select.mjs +3 -3
  90. package/dist/esm/__rc__/Select/subcomponents/ListBoxSection/ListBoxSection.mjs +1 -1
  91. package/dist/esm/__rc__/Select/subcomponents/ListItem/ListItem.mjs +2 -2
  92. package/dist/esm/__rc__/Select/utils/transformSelectItemToCollectionElement.mjs +2 -2
  93. package/dist/esm/__rc__/Tabs/subcomponents/Tab/Tab.mjs +1 -1
  94. package/dist/esm/__rc__/Tooltip/Tooltip.mjs +1 -1
  95. package/dist/esm/utils/getNodeText.mjs +1 -1
  96. package/dist/styles.css +315 -277
  97. package/package.json +1 -1
  98. package/src/Avatar/Avatar.module.css +138 -0
  99. package/src/Avatar/Avatar.tsx +6 -3
  100. package/src/AvatarGroup/AvatarGroup.module.css +57 -0
  101. package/src/AvatarGroup/AvatarGroup.tsx +1 -1
  102. package/src/Badge/Badge.module.css +101 -0
  103. package/src/Badge/Badge.tsx +1 -1
  104. package/src/Brand/Brand.tsx +1 -1
  105. package/src/BrandMoment/{BrandMoment.module.scss → BrandMoment.module.css} +29 -50
  106. package/src/BrandMoment/BrandMoment.tsx +1 -1
  107. package/src/ButtonGroup/ButtonGroup.module.css +48 -0
  108. package/src/ButtonGroup/ButtonGroup.tsx +1 -1
  109. package/src/Tile/TileGrid/TileGrid.module.scss +2 -0
  110. package/dist/cjs/Avatar/Avatar.module.scss.cjs +0 -20
  111. package/dist/cjs/AvatarGroup/AvatarGroup.module.scss.cjs +0 -11
  112. package/dist/cjs/Badge/Badge.module.scss.cjs +0 -14
  113. package/dist/cjs/BrandMoment/BrandMoment.module.scss.cjs +0 -29
  114. package/dist/cjs/ButtonGroup/ButtonGroup.module.scss.cjs +0 -9
  115. package/dist/esm/Avatar/Avatar.module.scss.mjs +0 -18
  116. package/dist/esm/AvatarGroup/AvatarGroup.module.scss.mjs +0 -9
  117. package/dist/esm/Badge/Badge.module.scss.mjs +0 -12
  118. package/dist/esm/BrandMoment/BrandMoment.module.scss.mjs +0 -27
  119. package/dist/esm/ButtonGroup/ButtonGroup.module.scss.mjs +0 -7
  120. package/src/Avatar/Avatar.module.scss +0 -169
  121. package/src/AvatarGroup/AvatarGroup.module.scss +0 -79
  122. package/src/Badge/Badge.module.scss +0 -113
  123. /package/src/Brand/{Brand.module.scss → Brand.module.css} +0 -0
@@ -1,29 +0,0 @@
1
- 'use strict';
2
-
3
- var styles = {
4
- "body": "BrandMoment-module_body__J4lls",
5
- "positive": "BrandMoment-module_positive__78wqJ",
6
- "negative": "BrandMoment-module_negative__atXal",
7
- "informative": "BrandMoment-module_informative__Qvwcd",
8
- "success": "BrandMoment-module_success__v503M",
9
- "warning": "BrandMoment-module_warning__dWih8",
10
- "container": "BrandMoment-module_container__4ORHI",
11
- "header": "BrandMoment-module_header__EAP5Q",
12
- "main": "BrandMoment-module_main__cdWko",
13
- "mainInner": "BrandMoment-module_mainInner__xsFA6",
14
- "left": "BrandMoment-module_left__ZHJiM",
15
- "leftInner": "BrandMoment-module_leftInner__TY5DY",
16
- "right": "BrandMoment-module_right__B-PR2",
17
- "rightInner": "BrandMoment-module_rightInner__XvQ5Y",
18
- "subtitle": "BrandMoment-module_subtitle__z9PL8",
19
- "title": "BrandMoment-module_title__GrdAR",
20
- "textBody": "BrandMoment-module_textBody__W6LvQ",
21
- "secondaryAction": "BrandMoment-module_secondaryAction__d18oJ",
22
- "actions": "BrandMoment-module_actions__Z3NrK",
23
- "footer": "BrandMoment-module_footer__vSeX1",
24
- "footerInner": "BrandMoment-module_footerInner__Wt9Rt",
25
- "poweredByContainer": "BrandMoment-module_poweredByContainer__OkhVN",
26
- "footerTextContainer": "BrandMoment-module_footerTextContainer__8iin9",
27
- "poweredByLogo": "BrandMoment-module_poweredByLogo__w6M7o"
28
- };
29
- module.exports = styles;
@@ -1,9 +0,0 @@
1
- 'use strict';
2
-
3
- var styles = {
4
- "buttonGroup": "ButtonGroup-module_buttonGroup__bsy2X",
5
- "child": "ButtonGroup-module_child__K6AP-",
6
- "firstChild": "ButtonGroup-module_firstChild__uEn1j",
7
- "lastChild": "ButtonGroup-module_lastChild__Vicsx"
8
- };
9
- module.exports = styles;
@@ -1,18 +0,0 @@
1
- var styles = {
2
- "wrapper": "Avatar-module_wrapper__LY2q2",
3
- "small": "Avatar-module_small__PeksS",
4
- "personal": "Avatar-module_personal__2U7--",
5
- "otherUser": "Avatar-module_otherUser__b-drl",
6
- "company": "Avatar-module_company__2qtJE",
7
- "initials": "Avatar-module_initials__VDY2Q",
8
- "medium": "Avatar-module_medium__Vy3V8",
9
- "large": "Avatar-module_large__qiNWs",
10
- "xlarge": "Avatar-module_xlarge__Vx4IG",
11
- "xxlarge": "Avatar-module_xxlarge__oOoGq",
12
- "avatarImage": "Avatar-module_avatarImage__FuULy",
13
- "loading": "Avatar-module_loading__i9V-D",
14
- "companyAvatarImage": "Avatar-module_companyAvatarImage__7rlfG",
15
- "fallbackIcon": "Avatar-module_fallbackIcon__MPWxq",
16
- "longName": "Avatar-module_longName__31Yuf"
17
- };
18
- export { styles as default };
@@ -1,9 +0,0 @@
1
- var styles = {
2
- "AvatarGroup": "AvatarGroup-module_AvatarGroup__bdL0o",
3
- "AvatarCounter": "AvatarGroup-module_AvatarCounter__PKFzl",
4
- "small": "AvatarGroup-module_small__7uv8k",
5
- "AvatarGroupItem": "AvatarGroup-module_AvatarGroupItem__xQol-",
6
- "medium": "AvatarGroup-module_medium__af52y",
7
- "large": "AvatarGroup-module_large__HN9Yy"
8
- };
9
- export { styles as default };
@@ -1,12 +0,0 @@
1
- var styles = {
2
- "badge": "Badge-module_badge__CRtsW",
3
- "large": "Badge-module_large__0QOpY",
4
- "default": "Badge-module_default__k4Kcf",
5
- "active": "Badge-module_active__-e-i2",
6
- "reversed": "Badge-module_reversed__OgQLB",
7
- "dark": "Badge-module_dark__RH34a",
8
- "dot": "Badge-module_dot__BOKL1",
9
- "animation": "Badge-module_animation__NTy6C",
10
- "animationOn": "Badge-module_animationOn__nWK38"
11
- };
12
- export { styles as default };
@@ -1,27 +0,0 @@
1
- var styles = {
2
- "body": "BrandMoment-module_body__J4lls",
3
- "positive": "BrandMoment-module_positive__78wqJ",
4
- "negative": "BrandMoment-module_negative__atXal",
5
- "informative": "BrandMoment-module_informative__Qvwcd",
6
- "success": "BrandMoment-module_success__v503M",
7
- "warning": "BrandMoment-module_warning__dWih8",
8
- "container": "BrandMoment-module_container__4ORHI",
9
- "header": "BrandMoment-module_header__EAP5Q",
10
- "main": "BrandMoment-module_main__cdWko",
11
- "mainInner": "BrandMoment-module_mainInner__xsFA6",
12
- "left": "BrandMoment-module_left__ZHJiM",
13
- "leftInner": "BrandMoment-module_leftInner__TY5DY",
14
- "right": "BrandMoment-module_right__B-PR2",
15
- "rightInner": "BrandMoment-module_rightInner__XvQ5Y",
16
- "subtitle": "BrandMoment-module_subtitle__z9PL8",
17
- "title": "BrandMoment-module_title__GrdAR",
18
- "textBody": "BrandMoment-module_textBody__W6LvQ",
19
- "secondaryAction": "BrandMoment-module_secondaryAction__d18oJ",
20
- "actions": "BrandMoment-module_actions__Z3NrK",
21
- "footer": "BrandMoment-module_footer__vSeX1",
22
- "footerInner": "BrandMoment-module_footerInner__Wt9Rt",
23
- "poweredByContainer": "BrandMoment-module_poweredByContainer__OkhVN",
24
- "footerTextContainer": "BrandMoment-module_footerTextContainer__8iin9",
25
- "poweredByLogo": "BrandMoment-module_poweredByLogo__w6M7o"
26
- };
27
- export { styles as default };
@@ -1,7 +0,0 @@
1
- var styles = {
2
- "buttonGroup": "ButtonGroup-module_buttonGroup__bsy2X",
3
- "child": "ButtonGroup-module_child__K6AP-",
4
- "firstChild": "ButtonGroup-module_firstChild__uEn1j",
5
- "lastChild": "ButtonGroup-module_lastChild__Vicsx"
6
- };
7
- export { styles as default };
@@ -1,169 +0,0 @@
1
- @import '~@kaizen/design-tokens/sass/typography';
2
- @import '~@kaizen/design-tokens/sass/shadow';
3
- @import '~@kaizen/design-tokens/sass/color';
4
- @import '~@kaizen/design-tokens/sass/border';
5
-
6
- $avatar-sm: 1.25rem;
7
- $avatar-md: 3rem;
8
- $avatar-lg: 4.5rem;
9
- $avatar-xl: 6rem;
10
- $avatar-xxl: 7.75rem;
11
-
12
- /* stylelint-disable no-descending-specificity */
13
- .wrapper {
14
- background: $color-gray-300;
15
- border-radius: 100%;
16
- box-sizing: border-box;
17
- overflow: hidden;
18
- align-items: center;
19
- display: flex;
20
- justify-content: center;
21
-
22
- &:not(.small) {
23
- box-shadow: $shadow-small-box-shadow;
24
- border: 3px solid $color-white;
25
- }
26
-
27
- // Themes
28
- &.personal {
29
- background: $color-orange-100;
30
- }
31
-
32
- &.otherUser {
33
- background: $color-gray-300;
34
- }
35
-
36
- &.company {
37
- border: 0;
38
- background: $color-white;
39
- padding: 6px;
40
- border-radius: $border-solid-border-radius;
41
- }
42
-
43
- // Sizes
44
- &.small {
45
- width: $avatar-sm;
46
- height: $avatar-sm;
47
-
48
- .initials {
49
- margin-bottom: -1px;
50
- }
51
-
52
- &.company {
53
- padding: 0;
54
- }
55
- }
56
-
57
- &.medium {
58
- width: $avatar-md;
59
- height: $avatar-md;
60
-
61
- .initials {
62
- margin-bottom: -1px;
63
- }
64
- }
65
-
66
- &.large {
67
- width: $avatar-lg;
68
- height: $avatar-lg;
69
- }
70
-
71
- &.xlarge {
72
- width: $avatar-xl;
73
- height: $avatar-xl;
74
- }
75
-
76
- &.xxlarge {
77
- width: $avatar-xxl;
78
- height: $avatar-xxl;
79
- }
80
-
81
- & .initials {
82
- text-decoration: none;
83
- speak-as: spell-out;
84
-
85
- // to override materialize.css global styling in performance-ui,
86
- // which sets a border-bottom on abbr tags
87
- border-bottom: none;
88
- }
89
- }
90
-
91
- .avatarImage {
92
- width: 100%;
93
- height: 100%;
94
- object-fit: cover;
95
-
96
- .loading & {
97
- display: none;
98
- }
99
- }
100
-
101
- .companyAvatarImage {
102
- object-fit: contain;
103
- box-sizing: border-box;
104
- border-radius: 4px;
105
- }
106
-
107
- .fallbackIcon {
108
- color: rgba($color-purple-800-rgb, 0.7);
109
- font-size: var(--avatar-fallback-icon-size);
110
-
111
- .xxlarge & {
112
- --avatar-fallback-icon-size: calc(#{$avatar-xxl} * 0.8);
113
- }
114
-
115
- .xlarge & {
116
- --avatar-fallback-icon-size: calc(#{$avatar-xl} * 0.8);
117
- }
118
-
119
- .large & {
120
- --avatar-fallback-icon-size: calc(#{$avatar-lg} * 0.7);
121
- }
122
-
123
- .medium & {
124
- --avatar-fallback-icon-size: calc(#{$avatar-md} * 0.7);
125
- }
126
-
127
- .small & {
128
- --avatar-fallback-icon-size: calc(#{$avatar-sm} * 0.7);
129
- }
130
- }
131
-
132
- .initials {
133
- box-sizing: border-box;
134
- color: $color-purple-800;
135
- padding-left: 5px;
136
- padding-right: 5px;
137
- text-align: center;
138
- width: 100%;
139
- font-size: 22px;
140
- font-family: $typography-heading-1-font-family;
141
- font-weight: $typography-heading-1-font-weight;
142
- letter-spacing: $typography-heading-3-letter-spacing;
143
-
144
- // Whitespace cropping
145
- &:not(.longName)::before {
146
- content: '';
147
- display: block;
148
- margin-top: -0.001em;
149
- }
150
-
151
- .xlarge &,
152
- .xxlarge & {
153
- font-size: 34px;
154
- letter-spacing: $typography-heading-1-letter-spacing;
155
- }
156
-
157
- .medium & {
158
- font-size: 16px;
159
- font-weight: $typography-heading-5-font-weight;
160
- letter-spacing: $typography-heading-5-letter-spacing;
161
- }
162
-
163
- .small & {
164
- font-size: 8px;
165
- font-weight: $typography-heading-5-font-weight;
166
- letter-spacing: $typography-heading-5-letter-spacing;
167
- }
168
- }
169
- /* stylelint-enable no-descending-specificity */
@@ -1,79 +0,0 @@
1
- @import '~@kaizen/design-tokens/sass/typography';
2
- @import '~@kaizen/design-tokens/sass/shadow';
3
- @import '~@kaizen/design-tokens/sass/color';
4
-
5
- // Vars
6
- $avatar-sm: 1.25rem;
7
- $avatar-md: 3rem;
8
- $avatar-lg: 4.5rem;
9
-
10
- @mixin overlap($size) {
11
- margin-inline-start: calc(#{$size} / -2);
12
- }
13
-
14
- .AvatarGroup {
15
- display: inline-flex;
16
- list-style: none;
17
- margin: 0;
18
- padding: 0;
19
- }
20
-
21
- .AvatarCounter {
22
- direction: ltr;
23
- align-items: center;
24
- background: $color-gray-300;
25
- border: 3px solid $color-white;
26
- border-radius: 100%;
27
- box-sizing: border-box;
28
- box-shadow: $shadow-small-box-shadow;
29
- display: flex;
30
- justify-content: center;
31
- overflow: hidden;
32
- }
33
-
34
- .small {
35
- .AvatarGroupItem + .AvatarGroupItem {
36
- @include overlap($avatar-sm);
37
- }
38
-
39
- .AvatarCounter {
40
- box-shadow: none;
41
- border: none;
42
- width: $avatar-sm;
43
- height: $avatar-sm;
44
- font-family: $typography-heading-5-font-family;
45
- font-size: 0.5rem;
46
- font-weight: $typography-heading-5-font-weight;
47
- letter-spacing: $typography-heading-5-letter-spacing;
48
- }
49
- }
50
-
51
- .medium {
52
- .AvatarGroupItem + .AvatarGroupItem {
53
- @include overlap($avatar-md);
54
- }
55
-
56
- .AvatarCounter {
57
- width: $avatar-md;
58
- height: $avatar-md;
59
- font-family: $typography-heading-5-font-family;
60
- font-size: $typography-heading-5-font-size;
61
- font-weight: $typography-heading-5-font-weight;
62
- letter-spacing: $typography-heading-5-letter-spacing;
63
- }
64
- }
65
-
66
- .large {
67
- .AvatarGroupItem + .AvatarGroupItem {
68
- @include overlap($avatar-lg);
69
- }
70
-
71
- .AvatarCounter {
72
- width: $avatar-lg;
73
- height: $avatar-lg;
74
- font-family: $typography-heading-3-font-family;
75
- font-size: $typography-heading-3-font-size;
76
- font-weight: $typography-heading-3-font-weight;
77
- letter-spacing: $typography-heading-3-letter-spacing;
78
- }
79
- }
@@ -1,113 +0,0 @@
1
- @import '~@kaizen/design-tokens/sass/animation';
2
- @import '~@kaizen/design-tokens/sass/typography';
3
- @import '~@kaizen/design-tokens/sass/color';
4
- @import '~@kaizen/design-tokens/sass/spacing';
5
-
6
- $dt-color-background-default: $color-gray-300;
7
-
8
- $small: $spacing-md;
9
-
10
- .badge {
11
- border-radius: $spacing-sm;
12
- color: $color-purple-800;
13
- display: inline-block;
14
- position: relative;
15
- font-family: $typography-paragraph-extra-small-font-family;
16
- font-size: $typography-paragraph-extra-small-font-size;
17
- font-weight: $typography-paragraph-bold-font-weight;
18
- letter-spacing: $typography-paragraph-extra-small-letter-spacing;
19
- line-height: $typography-paragraph-extra-small-line-height;
20
- padding: 1px $spacing-xs;
21
- min-width: 8px;
22
- text-align: center;
23
- }
24
-
25
- .badge.large {
26
- display: inline-flex;
27
- justify-content: center;
28
- border-radius: $spacing-xl;
29
- font-size: $typography-data-medium-font-size;
30
- line-height: $typography-data-medium-line-height;
31
- letter-spacing: $typography-data-medium-letter-spacing;
32
- padding: 2px 1.875rem;
33
- width: 24px;
34
- }
35
-
36
- .default {
37
- background-color: $dt-color-background-default;
38
- color: $color-purple-800;
39
- }
40
-
41
- .active {
42
- background-color: $color-blue-500;
43
- color: $color-white;
44
- }
45
-
46
- .reversed.active {
47
- background-color: $color-green-300;
48
- color: $color-purple-800;
49
- }
50
-
51
- .dark {
52
- background-color: rgba($color-purple-700-rgb, 0.1);
53
- color: $color-purple-800;
54
- }
55
-
56
- .dot {
57
- background-color: $color-green-300;
58
- padding: $spacing-xs;
59
- min-width: unset;
60
- }
61
-
62
- .dot.large {
63
- background-color: $color-green-300;
64
- padding: 1.875rem;
65
- width: unset;
66
- }
67
-
68
- .reversed.dot {
69
- background-color: $color-green-300;
70
- }
71
-
72
- .reversed.dark {
73
- background-color: $color-purple-700;
74
- color: $color-white;
75
- }
76
-
77
- .reversed {
78
- background-color: rgba($color-white-rgb, 0.1);
79
- color: $color-white;
80
- }
81
-
82
- $badge-duration-timing: ($animation-duration-slow / 2) $animation-easing-function-ease-in;
83
-
84
- $badge-transition:
85
- transform $badge-duration-timing,
86
- background-color $badge-duration-timing;
87
-
88
- .animation {
89
- display: inherit;
90
-
91
- .badge {
92
- transition: $badge-transition;
93
- transform-origin: center;
94
- transform: scale3d(1, 1, 1);
95
- }
96
-
97
- &.animationOn .badge {
98
- transform: scale3d(1.35, 1.35, 1.35);
99
-
100
- &.dark {
101
- background-color: rgba($color-purple-700-rgb, 0.2);
102
- }
103
-
104
- &.active {
105
- background-color: $color-blue-500;
106
- color: $color-white;
107
- }
108
-
109
- &.dot {
110
- background-color: $color-green-300;
111
- }
112
- }
113
- }