@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.
- package/dist/cjs/Avatar/Avatar.cjs +3 -3
- package/dist/cjs/Avatar/Avatar.module.css.cjs +20 -0
- package/dist/cjs/AvatarGroup/AvatarGroup.cjs +1 -1
- package/dist/cjs/AvatarGroup/AvatarGroup.module.css.cjs +11 -0
- package/dist/cjs/Badge/Badge.cjs +1 -1
- package/dist/cjs/Badge/Badge.module.css.cjs +14 -0
- package/dist/cjs/Brand/Brand.cjs +1 -1
- package/dist/cjs/Brand/{Brand.module.scss.cjs → Brand.module.css.cjs} +1 -1
- package/dist/cjs/BrandMoment/BrandMoment.cjs +1 -1
- package/dist/cjs/BrandMoment/BrandMoment.module.css.cjs +29 -0
- package/dist/cjs/ButtonGroup/ButtonGroup.cjs +1 -1
- package/dist/cjs/ButtonGroup/ButtonGroup.module.css.cjs +9 -0
- package/dist/esm/Avatar/Avatar.mjs +6 -6
- package/dist/esm/Avatar/Avatar.module.css.mjs +18 -0
- package/dist/esm/AvatarGroup/AvatarGroup.mjs +2 -2
- package/dist/esm/AvatarGroup/AvatarGroup.module.css.mjs +9 -0
- package/dist/esm/Badge/Badge.mjs +1 -1
- package/dist/esm/Badge/Badge.module.css.mjs +12 -0
- package/dist/esm/Brand/Brand.mjs +1 -1
- package/dist/esm/Brand/{Brand.module.scss.mjs → Brand.module.css.mjs} +1 -1
- package/dist/esm/BrandMoment/BrandMoment.mjs +6 -6
- package/dist/esm/BrandMoment/BrandMoment.module.css.mjs +27 -0
- package/dist/esm/Button/GenericButton/GenericButton.mjs +2 -2
- package/dist/esm/ButtonGroup/ButtonGroup.mjs +1 -1
- package/dist/esm/ButtonGroup/ButtonGroup.module.css.mjs +7 -0
- package/dist/esm/Collapsible/Collapsible/Collapsible.mjs +2 -2
- package/dist/esm/DatePicker/DatePicker.mjs +1 -1
- package/dist/esm/DatePicker/subcomponents/DateInputField/DateInputField.mjs +1 -1
- package/dist/esm/DatePicker/utils/validateDate.mjs +3 -3
- package/dist/esm/DateRangePicker/DateRangePicker.mjs +1 -1
- package/dist/esm/EmptyState/EmptyState.mjs +2 -2
- package/dist/esm/FieldMessage/FieldMessage.mjs +1 -1
- package/dist/esm/Filter/Filter/Filter.mjs +1 -1
- package/dist/esm/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.mjs +2 -2
- package/dist/esm/Filter/FilterBar/subcomponents/FilterBarMultiSelect/FilterBarMultiSelect.mjs +2 -2
- package/dist/esm/Filter/FilterButton/FilterButton/FilterButton.mjs +1 -1
- package/dist/esm/Filter/FilterDatePicker/subcomponents/DateInputField/DateInputField.mjs +1 -1
- package/dist/esm/Filter/FilterDatePicker/utils/getDateValidationHandler.mjs +1 -1
- package/dist/esm/Filter/FilterDateRangePicker/FilterDateRangePicker.mjs +1 -1
- package/dist/esm/Filter/FilterDateRangePicker/subcomponents/DateRangeInputField/DateRangeInputField.mjs +1 -1
- package/dist/esm/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/validateEndDateBeforeStartDate.mjs +1 -1
- package/dist/esm/Filter/FilterMultiSelect/subcomponents/ListBoxSection/ListBoxSection.mjs +1 -1
- package/dist/esm/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.mjs +3 -3
- package/dist/esm/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.mjs +1 -1
- package/dist/esm/GuidanceBlock/GuidanceBlock.mjs +4 -4
- package/dist/esm/Illustration/subcomponents/Base/Base.mjs +2 -2
- package/dist/esm/Input/InputRange/InputRange.mjs +1 -1
- package/dist/esm/Input/InputSearch/InputSearch.mjs +3 -3
- package/dist/esm/LikertScaleLegacy/LikertScaleLegacy.mjs +1 -1
- package/dist/esm/Menu/subcomponents/StatelessMenu/StatelessMenu.mjs +1 -1
- package/dist/esm/Modal/ContextModal/ContextModal.mjs +1 -1
- package/dist/esm/Modal/GenericModal/GenericModal.mjs +1 -1
- package/dist/esm/MultiSelect/MultiSelect.mjs +1 -1
- package/dist/esm/MultiSelect/subcomponents/MultiSelectOptions/MultiSelectOptions.mjs +1 -1
- package/dist/esm/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.mjs +1 -1
- package/dist/esm/MultiSelect/subcomponents/Popover/Popover.mjs +1 -1
- package/dist/esm/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.mjs +2 -2
- package/dist/esm/Notification/ToastNotification/ToastNotificationsList/subcomponents/ToastNotificationsMap/ToastNotificationsMap.mjs +1 -1
- package/dist/esm/Notification/subcomponents/GenericNotification/GenericNotification.mjs +3 -3
- package/dist/esm/Pagination/Pagination.mjs +2 -2
- package/dist/esm/Popover/Popover.mjs +3 -3
- package/dist/esm/ProgressBar/ProgressBar.mjs +1 -1
- package/dist/esm/RichTextEditor/RichTextEditor/RichTextEditor.mjs +3 -3
- package/dist/esm/RichTextEditor/utils/plugins/LinkManager/components/LinkEditor/LinkEditor.mjs +1 -1
- package/dist/esm/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.mjs +1 -1
- package/dist/esm/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/Positioner.mjs +1 -1
- package/dist/esm/RichTextEditor/utils/plugins/LinkManager/createReactTooltipWrapper.mjs +1 -1
- package/dist/esm/RichTextEditor/utils/plugins/LinkManager/validation.mjs +1 -1
- package/dist/esm/SearchField/SearchField.mjs +1 -1
- package/dist/esm/Select/Select.mjs +1 -1
- package/dist/esm/Slider/Slider.mjs +1 -1
- package/dist/esm/Table/Table.mjs +15 -15
- package/dist/esm/Tabs/subcomponents/Tab.mjs +1 -1
- package/dist/esm/Tag/Tag.mjs +2 -2
- package/dist/esm/TextAreaField/TextAreaField.mjs +1 -1
- package/dist/esm/TextField/TextField.mjs +3 -3
- package/dist/esm/Tile/MultiActionTile/MultiActionTile.mjs +1 -1
- package/dist/esm/Tile/TileGrid/TileGrid.mjs +2 -2
- package/dist/esm/Tile/subcomponents/GenericTile/GenericTile.mjs +5 -5
- package/dist/esm/TitleBlockZen/TitleBlockZen.mjs +12 -12
- package/dist/esm/TitleBlockZen/subcomponents/MainActions.mjs +5 -5
- package/dist/esm/TitleBlockZen/subcomponents/MobileActions.mjs +5 -5
- package/dist/esm/TitleBlockZen/subcomponents/SecondaryActions.mjs +2 -2
- package/dist/esm/Tooltip/Tooltip.mjs +1 -1
- package/dist/esm/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.mjs +1 -1
- package/dist/esm/__rc__/Button/subcomponents/ButtonContent/ButtonContent.mjs +1 -1
- package/dist/esm/__rc__/Button/subcomponents/PendingContent/PendingContent.mjs +1 -1
- package/dist/esm/__rc__/Menu/MenuItem.mjs +2 -2
- package/dist/esm/__rc__/Select/Select.mjs +3 -3
- package/dist/esm/__rc__/Select/subcomponents/ListBoxSection/ListBoxSection.mjs +1 -1
- package/dist/esm/__rc__/Select/subcomponents/ListItem/ListItem.mjs +2 -2
- package/dist/esm/__rc__/Select/utils/transformSelectItemToCollectionElement.mjs +2 -2
- package/dist/esm/__rc__/Tabs/subcomponents/Tab/Tab.mjs +1 -1
- package/dist/esm/__rc__/Tooltip/Tooltip.mjs +1 -1
- package/dist/esm/utils/getNodeText.mjs +1 -1
- package/dist/styles.css +315 -277
- package/package.json +1 -1
- package/src/Avatar/Avatar.module.css +138 -0
- package/src/Avatar/Avatar.tsx +6 -3
- package/src/AvatarGroup/AvatarGroup.module.css +57 -0
- package/src/AvatarGroup/AvatarGroup.tsx +1 -1
- package/src/Badge/Badge.module.css +101 -0
- package/src/Badge/Badge.tsx +1 -1
- package/src/Brand/Brand.tsx +1 -1
- package/src/BrandMoment/{BrandMoment.module.scss → BrandMoment.module.css} +29 -50
- package/src/BrandMoment/BrandMoment.tsx +1 -1
- package/src/ButtonGroup/ButtonGroup.module.css +48 -0
- package/src/ButtonGroup/ButtonGroup.tsx +1 -1
- package/src/Tile/TileGrid/TileGrid.module.scss +2 -0
- package/dist/cjs/Avatar/Avatar.module.scss.cjs +0 -20
- package/dist/cjs/AvatarGroup/AvatarGroup.module.scss.cjs +0 -11
- package/dist/cjs/Badge/Badge.module.scss.cjs +0 -14
- package/dist/cjs/BrandMoment/BrandMoment.module.scss.cjs +0 -29
- package/dist/cjs/ButtonGroup/ButtonGroup.module.scss.cjs +0 -9
- package/dist/esm/Avatar/Avatar.module.scss.mjs +0 -18
- package/dist/esm/AvatarGroup/AvatarGroup.module.scss.mjs +0 -9
- package/dist/esm/Badge/Badge.module.scss.mjs +0 -12
- package/dist/esm/BrandMoment/BrandMoment.module.scss.mjs +0 -27
- package/dist/esm/ButtonGroup/ButtonGroup.module.scss.mjs +0 -7
- package/src/Avatar/Avatar.module.scss +0 -169
- package/src/AvatarGroup/AvatarGroup.module.scss +0 -79
- package/src/Badge/Badge.module.scss +0 -113
- /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,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
|
-
}
|
|
File without changes
|