@kaizen/components 1.4.24 → 1.4.25

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 (188) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/__future__/index.d.ts +0 -2
  3. package/dist/__future__/index.js +1 -5
  4. package/dist/esm/__future__/index.js +0 -4
  5. package/dist/esm/index.js +0 -56
  6. package/dist/iife/__future__/index.js +128 -40023
  7. package/dist/iife/index.js +1202 -115119
  8. package/dist/index.d.ts +1 -42
  9. package/dist/index.js +2 -58
  10. package/package.json +3 -46
  11. package/dist/iife/ActionButton.module-LHTIA2D3.scss +0 -10
  12. package/dist/iife/Avatar.module-GUG7HXMZ.scss +0 -165
  13. package/dist/iife/AvatarGroup.module-QAVTI4PR.scss +0 -85
  14. package/dist/iife/Badge.module-5JDAQSAV.scss +0 -106
  15. package/dist/iife/Base.module-DJPJNUQ5.scss +0 -80
  16. package/dist/iife/BaseButton.module-4FKZZLVI.scss +0 -103
  17. package/dist/iife/Brand.module-FCHTLJQK.scss +0 -4
  18. package/dist/iife/BrandMoment.module-4P7H2D3W.scss +0 -196
  19. package/dist/iife/Calendar.module-H7XBQXTA.scss +0 -211
  20. package/dist/iife/CalendarRange.module-QWW624PJ.scss +0 -64
  21. package/dist/iife/CalendarSingle.module-N2P3DWLM.scss +0 -18
  22. package/dist/iife/Card.module-VEUOO2LT.scss +0 -38
  23. package/dist/iife/Checkbox.module-L2DRIMTV.scss +0 -155
  24. package/dist/iife/CheckboxField.module-MS76TDL7.scss +0 -46
  25. package/dist/iife/CheckboxGroup.module-AHAPICAN.scss +0 -13
  26. package/dist/iife/ClearButton.module-KVNHOLVT.scss +0 -79
  27. package/dist/iife/Collapsible.module-ZJNVWQIB.scss +0 -119
  28. package/dist/iife/CollapsibleGroup.module-UR2SIYLJ.scss +0 -10
  29. package/dist/iife/ConfirmationModal.module-RN2H7KPL.scss +0 -157
  30. package/dist/iife/Content.module-6CTLBAHR.scss +0 -25
  31. package/dist/iife/ContextModal.module-TTFVPUPU.scss +0 -77
  32. package/dist/iife/DateInput.module-YBXARKD2.scss +0 -3
  33. package/dist/iife/DateInputDescription.module-SGAJNB7K.scss +0 -19
  34. package/dist/iife/DateInputField.module-2LG4I24X.scss +0 -5
  35. package/dist/iife/DateInputWithIconButton.module-RSUEQ345.scss +0 -53
  36. package/dist/iife/DateRangePicker.module-EIUGUIIA.scss +0 -115
  37. package/dist/iife/Divider.module-YXIUJPD4.scss +0 -40
  38. package/dist/iife/Dropdown.module-4CIBZTRZ.scss +0 -100
  39. package/dist/iife/DropdownButton.module-WZ6FRRPS.scss +0 -44
  40. package/dist/iife/EditableRichTextContent.module-N2SFSI5C.scss +0 -25
  41. package/dist/iife/EmptyState.module-DOSURL5X.scss +0 -156
  42. package/dist/iife/ExpertAdviceCollapsible.module-L554JCXB.scss +0 -47
  43. package/dist/iife/FieldGroup.module-SUPERNC6.scss +0 -10
  44. package/dist/iife/FieldMessage.module-6CWQV65E.scss +0 -73
  45. package/dist/iife/FilterMenuButton.module-26EL5K3H.scss +0 -19
  46. package/dist/iife/FilterSplitButton.module-LMMEHFXQ.scss +0 -133
  47. package/dist/iife/FilterTriggerButton.module-LGSTEFAE.scss +0 -5
  48. package/dist/iife/FloatingCalendarWrapper.module-62NLSOUD.scss +0 -12
  49. package/dist/iife/GenericButton.module-NIOY5S5X.scss +0 -113
  50. package/dist/iife/GenericModal.module-DW6NSOGA.scss +0 -110
  51. package/dist/iife/GenericModalSection.module-MJ4MTMSP.scss +0 -7
  52. package/dist/iife/GenericNotification.module-DAERSOHE.scss +0 -115
  53. package/dist/iife/GenericTile.module-ZXQ4XWP4.scss +0 -136
  54. package/dist/iife/GuidanceBlock.module-FAHJFZMK.scss +0 -324
  55. package/dist/iife/Heading.module-WIR3ANFU.scss +0 -104
  56. package/dist/iife/HeroCard.module-LXHTKJTW.scss +0 -106
  57. package/dist/iife/Icon.module-VD7NKLAR.scss +0 -72
  58. package/dist/iife/Input.module-FBWZRX37.scss +0 -336
  59. package/dist/iife/InputEditModal.module-X3TLJPFO.scss +0 -36
  60. package/dist/iife/InputRange.module-RGISUI4D.scss +0 -181
  61. package/dist/iife/InputSearch.module-YAL2OSZP.scss +0 -238
  62. package/dist/iife/Label.module-QP4J7I5H.scss +0 -118
  63. package/dist/iife/Layout.module-MZ6JYT46.scss +0 -58
  64. package/dist/iife/LikertScaleLegacy.module-JYCJ5CON.scss +0 -298
  65. package/dist/iife/LinkPopover-7NCAPCQ3.scss +0 -22
  66. package/dist/iife/ListBox.module-5GNTZUCX.scss +0 -18
  67. package/dist/iife/ListBox.module-RXUZV2C4.scss +0 -14
  68. package/dist/iife/ListBoxSection.module-53ABDKRS.scss +0 -3
  69. package/dist/iife/ListBoxSection.module-D2PXJRKU.scss +0 -20
  70. package/dist/iife/LoadMoreButton.module-ANUUS5ER.scss +0 -5
  71. package/dist/iife/LoadingGraphic.module-URCRSF4P.scss +0 -10
  72. package/dist/iife/LoadingHeading.module-OV5P5QHZ.scss +0 -67
  73. package/dist/iife/LoadingInput.module-7NL2PX46.scss +0 -9
  74. package/dist/iife/LoadingParagraph.module-43NZVIEE.scss +0 -50
  75. package/dist/iife/LoadingSpinner.module-VMTNZETE.scss +0 -31
  76. package/dist/iife/MainActions.module-T43D33YO.scss +0 -16
  77. package/dist/iife/Margin.module-DJURK5K7.scss +0 -19
  78. package/dist/iife/Menu.module-N76N74LN.scss +0 -111
  79. package/dist/iife/MenuDropdown.module-DYV6JLT6.scss +0 -26
  80. package/dist/iife/MenuFooter.module-7J44RW5D.scss +0 -9
  81. package/dist/iife/MenuItem.module-LD7ZYX4T.scss +0 -99
  82. package/dist/iife/MenuList.module-44RMG7CF.scss +0 -35
  83. package/dist/iife/MenuLoadingSkeleton.module-DH3I5Z2J.scss +0 -9
  84. package/dist/iife/MenuPopup.module-NQRYVXAG.scss +0 -27
  85. package/dist/iife/MobileActions.module-Z6PD4VIR.scss +0 -198
  86. package/dist/iife/ModalAccessibleDescription.module-NIJNKHHO.scss +0 -3
  87. package/dist/iife/ModalAccessibleLabel.module-NG26HDU4.scss +0 -58
  88. package/dist/iife/ModalFooter.module-TK3HAXMB.scss +0 -69
  89. package/dist/iife/ModalHeader.module-6SW7KZ22.scss +0 -23
  90. package/dist/iife/MultiActionTile.module-4Y2NA4H6.scss +0 -3
  91. package/dist/iife/MultiSelectOption.module-TIZIGUVB.scss +0 -115
  92. package/dist/iife/NavigationTabs.module-VDIXMFXJ.scss +0 -108
  93. package/dist/iife/NoResults.module-3FUWBVUH.scss +0 -3
  94. package/dist/iife/Option.module-O2QRLWHC.scss +0 -87
  95. package/dist/iife/Overlay.module-W7K5DWH6.scss +0 -24
  96. package/dist/iife/Padding.module-QSNUEZBU.scss +0 -19
  97. package/dist/iife/Pagination.module-U5S6WZ5K.scss +0 -124
  98. package/dist/iife/Paragraph.module-J7DMUCVE.scss +0 -71
  99. package/dist/iife/Popover.module-5ZQUBHXG.scss +0 -264
  100. package/dist/iife/ProgressBar.module-RL2UWVEH.scss +0 -91
  101. package/dist/iife/Radio.module-DCWPHVKW.scss +0 -99
  102. package/dist/iife/RadioField.module-C2XRADW5.scss +0 -50
  103. package/dist/iife/RadioGroup.module-PDLRO572.scss +0 -23
  104. package/dist/iife/RemovableFilterTrigger.module-SJ37V6UZ.scss +0 -29
  105. package/dist/iife/RichTextContent.module-4HA44IM4.scss +0 -5
  106. package/dist/iife/RichTextEditor.module-ZHXEK4XJ.scss +0 -97
  107. package/dist/iife/RoadblockModal.module-KVZCYLF2.scss +0 -45
  108. package/dist/iife/SearchField.module-2EV6HGZE.scss +0 -6
  109. package/dist/iife/SearchInput.module-RQEF3FWR.scss +0 -6
  110. package/dist/iife/SectionDivider.module-AN4OA4O3.scss +0 -3
  111. package/dist/iife/Select.module-6LHWOGGY.scss +0 -391
  112. package/dist/iife/Select.module-WOGFQRYI.scss +0 -8
  113. package/dist/iife/SelectionControlButton.module-HO7BZ2UP.scss +0 -81
  114. package/dist/iife/SkipLink.module-KAZA7PAL.scss +0 -109
  115. package/dist/iife/Skirt.module-S3GPHMMQ.scss +0 -32
  116. package/dist/iife/SkirtCard.module-6YQ4PS2K.scss +0 -16
  117. package/dist/iife/Slider.module-EIBFJ2LP.scss +0 -42
  118. package/dist/iife/SplitButton.module-WMGCIDDK.scss +0 -4
  119. package/dist/iife/StatelessMenu.module-SX2T5P4I.scss +0 -3
  120. package/dist/iife/Tab.module-4S535DQG.scss +0 -105
  121. package/dist/iife/TabList.module-FVWF5RCV.scss +0 -11
  122. package/dist/iife/TabPanel.module-2YHJE4CY.scss +0 -14
  123. package/dist/iife/Table.module-LCDRXCBP.scss +0 -233
  124. package/dist/iife/Tabs.module-BUPNPYW4.scss +0 -172
  125. package/dist/iife/Tag.module-T6PQJLSW.scss +0 -268
  126. package/dist/iife/Text.module-SXGFOHGJ.scss +0 -173
  127. package/dist/iife/TextArea.module-JLTW3M73.scss +0 -138
  128. package/dist/iife/TextAreaField.module-4K35MSCT.scss +0 -20
  129. package/dist/iife/TextField.module-KFAPVZZK.scss +0 -49
  130. package/dist/iife/TileGrid.module-NJQFVYRS.scss +0 -23
  131. package/dist/iife/TimeField.module-B4WNYAUE.scss +0 -75
  132. package/dist/iife/TimeSegment.module-TKOTKIXH.scss +0 -53
  133. package/dist/iife/TitleBlockMenuItem.module-LWVSMJTH.scss +0 -99
  134. package/dist/iife/TitleBlockZen.module-OK3QIC4Y.scss +0 -695
  135. package/dist/iife/ToastNotificationsList.module-EHDVGWDW.scss +0 -26
  136. package/dist/iife/ToggleIconButton.module-COM67MDC.scss +0 -132
  137. package/dist/iife/ToggleSwitch.module-3YDF4MLF.scss +0 -128
  138. package/dist/iife/ToggleSwitchField.module-BJOL7O7U.scss +0 -15
  139. package/dist/iife/Toolbar.module-3BZYZE6H.scss +0 -44
  140. package/dist/iife/Toolbar.module-BP3GTBGW.scss +0 -6
  141. package/dist/iife/ToolbarSection.module-LZTHWGO7.scss +0 -15
  142. package/dist/iife/Tooltip.module-YU7VOTNZ.scss +0 -184
  143. package/dist/iife/TriggerButton.module-ML4U7VQL.scss +0 -139
  144. package/dist/iife/TriggerButtonBase.module-QFRV6YZQ.scss +0 -14
  145. package/dist/iife/VisuallyHidden.module-E5JUNEF5.scss +0 -9
  146. package/dist/iife/Well.module-4TIRC3HQ.scss +0 -73
  147. package/dist/iife/add-link.icon-2JH25LOT.svg +0 -3
  148. package/dist/iife/arrow-backward.icon-DGOZ655M.svg +0 -17
  149. package/dist/iife/arrow-forward.icon-MO6IWNHW.svg +0 -17
  150. package/dist/iife/arrow-left.icon-RWWYLDT3.svg +0 -17
  151. package/dist/iife/arrow-right.icon-3ZGNCW3O.svg +0 -17
  152. package/dist/iife/bold.icon-FEZQ56AP.svg +0 -3
  153. package/dist/iife/bulletted-list.icon-ZDSXNO72.svg +0 -3
  154. package/dist/iife/caution-white.icon-7QPLIIHQ.svg +0 -1
  155. package/dist/iife/caution.icon-BHBJMNMA.svg +0 -1
  156. package/dist/iife/check.icon-CYCBCOVT.svg +0 -17
  157. package/dist/iife/chevron-down.icon-COG3GAYR.svg +0 -17
  158. package/dist/iife/chevron-up.icon-O5VRF5BX.svg +0 -17
  159. package/dist/iife/clear-white.icon-O3ZK5Z2K.svg +0 -18
  160. package/dist/iife/clear.icon-OD6PWTJH.svg +0 -17
  161. package/dist/iife/close.icon-7H6W45MB.svg +0 -1
  162. package/dist/iife/date-start.icon-NV4EVRXI.svg +0 -17
  163. package/dist/iife/decrease-indent.icon-VAYQUHQG.svg +0 -3
  164. package/dist/iife/edit.icon-YJ4EIXHJ.svg +0 -17
  165. package/dist/iife/ellipsis.icon-DECY5OPU.svg +0 -17
  166. package/dist/iife/end.icon-4DQDOQVX.svg +0 -1
  167. package/dist/iife/exclamation-white.icon-WX7P4EOV.svg +0 -19
  168. package/dist/iife/exclamation.icon-FJBHW7NP.svg +0 -17
  169. package/dist/iife/external-link.icon-7FNRTMN2.svg +0 -17
  170. package/dist/iife/hamburger.icon-YHQT7RB6.svg +0 -17
  171. package/dist/iife/increase-indent.icon-3XUPJEBD.svg +0 -3
  172. package/dist/iife/information-white.icon-3DXZDERC.svg +0 -19
  173. package/dist/iife/information.icon-5LHKLG66.svg +0 -17
  174. package/dist/iife/italics.icon-WWQDZP3S.svg +0 -3
  175. package/dist/iife/loading-skeleton.module-RZXSULUO.scss +0 -26
  176. package/dist/iife/meatballs.icon-DECY5OPU.svg +0 -17
  177. package/dist/iife/minus.icon-7B6G432O.svg +0 -17
  178. package/dist/iife/numbered-list.icon-WPE4LE5R.svg +0 -3
  179. package/dist/iife/remove-link.icon-QMFTP7WO.svg +0 -3
  180. package/dist/iife/search.icon-ML7HSFID.svg +0 -17
  181. package/dist/iife/skip.icon-4OAFSA2T.svg +0 -12
  182. package/dist/iife/sort-ascending.icon-E24DTSHO.svg +0 -17
  183. package/dist/iife/sort-descending.icon-4SMPW2PG.svg +0 -17
  184. package/dist/iife/start.icon-JC4OAMAZ.svg +0 -1
  185. package/dist/iife/success-white.icon-VXFA2PUU.svg +0 -18
  186. package/dist/iife/success.icon-QNKK4XJE.svg +0 -17
  187. package/dist/iife/underline.icon-ACYVVVSD.svg +0 -3
  188. package/dist/iife/user.icon-24JPACDP.svg +0 -17
@@ -1,133 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/border";
2
- @import "~@kaizen/design-tokens/sass/color";
3
- @import "~@kaizen/design-tokens/sass/typography";
4
- @import "~@kaizen/design-tokens/sass/spacing";
5
-
6
- // The styling and mixin in this file originally comes from @kaizen/draft-button styles.module.scss and I modify it to suit with the `SplitButton` for `FilterMenuButton`.
7
-
8
- @mixin button-reset {
9
- appearance: none;
10
- background: transparent;
11
- border: none;
12
- font: inherit;
13
- margin: 0;
14
- transition: none; // override Murmur global styles :(
15
- }
16
-
17
- @mixin button-base {
18
- font-family: $typography-button-primary-font-family;
19
- line-height: $typography-button-primary-line-height;
20
- letter-spacing: $typography-button-primary-letter-spacing;
21
- display: flex;
22
- align-items: center;
23
- box-sizing: border-box;
24
- min-height: $spacing-xl;
25
- position: relative;
26
- text-align: center;
27
- cursor: pointer;
28
- overflow: visible;
29
- color: $color-blue-500;
30
- background: $color-blue-100;
31
- border-color: $border-borderless-border-color;
32
-
33
- &:hover {
34
- background: $color-blue-200;
35
- }
36
- }
37
-
38
- .filterSelectButton {
39
- display: flex;
40
- }
41
-
42
- .primaryActionButton {
43
- @include button-reset;
44
- @include button-base;
45
-
46
- padding-right: calc(#{$spacing-md} * 0.75);
47
- padding-left: calc(#{$spacing-md} * 0.75);
48
- border-top-left-radius: $border-solid-border-radius;
49
- border-bottom-left-radius: $border-solid-border-radius;
50
-
51
- &:hover {
52
- color: $color-blue-600;
53
- }
54
- }
55
-
56
- .primaryActionButton.splitButtonFocus {
57
- border: $border-solid-border-width $border-solid-border-style;
58
- border-color: $color-blue-400;
59
- border-right-width: 0;
60
- border-radius: $border-solid-border-radius;
61
- border-top-right-radius: 0;
62
- border-bottom-right-radius: 0;
63
-
64
- &:hover {
65
- background: $color-blue-100;
66
- }
67
- }
68
-
69
- .primaryActionButton.noClearButton.splitButtonFocus {
70
- border-right-width: $border-solid-border-width;
71
- border-radius: $border-solid-border-radius;
72
-
73
- &:hover {
74
- background: $color-blue-100;
75
- }
76
- }
77
-
78
- .clearButton {
79
- @include button-reset;
80
- @include button-base;
81
-
82
- width: 50px;
83
- justify-content: center;
84
- border-top-right-radius: $border-solid-border-radius;
85
- border-bottom-right-radius: $border-solid-border-radius;
86
- }
87
-
88
- .clearButton.splitButtonFocus {
89
- border: $border-solid-border-width $border-solid-border-style;
90
- border-color: $color-blue-400;
91
- border-left-width: 0;
92
- border-radius: $border-solid-border-radius;
93
- border-top-left-radius: 0;
94
- border-bottom-left-radius: 0;
95
-
96
- &:hover {
97
- background: $color-blue-100;
98
- color: $color-blue-500;
99
- }
100
- }
101
-
102
- .noClearButton {
103
- border-top-right-radius: $border-solid-border-radius;
104
- border-bottom-right-radius: $border-solid-border-radius;
105
-
106
- &:focus {
107
- border: $border-solid-border-width $border-solid-border-style;
108
- }
109
- }
110
-
111
- .filterName {
112
- font-weight: $typography-button-primary-font-weight;
113
- margin-right: calc(#{$spacing-md} / 3);
114
- }
115
-
116
- .metadata {
117
- font-size: $typography-button-secondary-font-size;
118
- font-weight: $typography-button-secondary-font-weight;
119
- letter-spacing: $typography-button-secondary-letter-spacing;
120
- }
121
-
122
- .button {
123
- border: $border-solid-border-width $border-solid-border-style;
124
- border-radius: $border-solid-border-radius;
125
- border-color: transparent;
126
- }
127
-
128
- // This is a temporary solution to mark an active state of the button
129
- // until it's decided whether this should be part of kaizen button or not
130
- .buttonActive {
131
- border-color: $color-blue-400;
132
- background: $color-blue-100;
133
- }
@@ -1,5 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/typography";
2
-
3
- .hasSelectedValues {
4
- font-weight: $typography-button-primary-font-weight;
5
- }
@@ -1,12 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/border";
2
- @import "~@kaizen/design-tokens/sass/color";
3
- @import "~@kaizen/design-tokens/sass/shadow";
4
- @import "~@kaizen/design-tokens/sass/spacing";
5
-
6
- .calendarWrapper {
7
- background-color: $color-white;
8
- z-index: 1010;
9
- box-shadow: $shadow-large-box-shadow;
10
- border-radius: $border-borderless-border-radius;
11
- padding: $spacing-md;
12
- }
@@ -1,113 +0,0 @@
1
- @import "../variables";
2
- @import "../Button.module.scss";
3
- @import "../IconButton.module.scss";
4
- @import "../PaginationButtons.module.scss";
5
-
6
- .container {
7
- display: inline-block;
8
- }
9
-
10
- .button {
11
- @extend %button;
12
- }
13
-
14
- .default {
15
- @extend %variant-default;
16
- }
17
-
18
- .primary {
19
- @extend %variant-primary;
20
- }
21
-
22
- .destructive {
23
- @extend %variant-destructive;
24
- }
25
-
26
- .secondary {
27
- @extend %variant-secondary;
28
-
29
- &.destructive {
30
- @extend %variant-secondary-destructive;
31
- }
32
- }
33
-
34
- .form {
35
- @extend %variant-form;
36
- }
37
-
38
- .label {
39
- line-height: 1;
40
-
41
- &:not(:first-child) {
42
- @include ca-margin($start: 0.5em, $end: null);
43
- }
44
-
45
- &:not(:last-child) {
46
- @include ca-margin($end: 0.5em, $start: null);
47
- }
48
- }
49
-
50
- .fullWidth {
51
- width: 100%;
52
-
53
- .button {
54
- display: flex;
55
- width: 100%;
56
- justify-content: center;
57
- }
58
-
59
- #{$className--content} {
60
- justify-content: center;
61
- }
62
- }
63
-
64
- .iconWrapper {
65
- height: 20px;
66
- align-self: flex-start;
67
- }
68
-
69
- .additionalContentWrapper {
70
- display: inherit;
71
- &:not(:last-child) {
72
- @include ca-margin($end: 0.5em, $start: null);
73
- }
74
- }
75
-
76
- .loadingSpinner {
77
- // This is to fix a problem in safari where the svg stretched too high
78
- svg {
79
- height: 100%;
80
- }
81
- }
82
-
83
- .centeredLoadingSpinner {
84
- position: absolute;
85
- left: 0;
86
- right: 0;
87
- display: flex;
88
- justify-content: center;
89
- }
90
-
91
- .hidden {
92
- visibility: hidden;
93
- }
94
-
95
- .iconButton {
96
- @extend %icon-button;
97
- }
98
-
99
- .circleButton {
100
- @extend %circle-button;
101
- }
102
-
103
- .directionalLink {
104
- @extend %directional-link;
105
- }
106
-
107
- .paginationLink {
108
- @extend %pagination-link;
109
- }
110
-
111
- .isPaginationLinkActive {
112
- @extend %pagination-link--active;
113
- }
@@ -1,110 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/shadow";
2
- @import "~@kaizen/design-tokens/sass/border";
3
- @import "~@kaizen/design-tokens/sass/color";
4
- @import "~@kaizen/component-library/styles/animation";
5
- @import "~@kaizen/component-library/styles/border";
6
- @import "~@kaizen/component-library/styles/layers";
7
- @import "~@kaizen/deprecated-component-library-helpers/styles/layout";
8
- @import "~@kaizen/component-library/styles/responsive";
9
- @import "~@kaizen/deprecated-component-library-helpers/styles/color";
10
-
11
- .defaultModalWidth {
12
- min-width: 300px;
13
- max-width: 600px;
14
- }
15
-
16
- .backdropLayer {
17
- @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
18
- position: fixed;
19
- background-color: $black;
20
- opacity: 0.5;
21
- z-index: $ca-z-index-modal-backdrop;
22
- }
23
-
24
- .scrollLayer {
25
- @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
26
- position: fixed;
27
- display: flex;
28
- align-items: center;
29
- z-index: $ca-z-index-modal;
30
- overflow-y: auto;
31
- }
32
-
33
- .modalLayer {
34
- // use flexbox auto margins to horizontally and vertically centre the modal
35
- // because in IE11, `align-items: center` and `justify-content: center` cause
36
- // long modal content to become unreachable if they go off-screen
37
- margin: auto;
38
-
39
- padding: $ca-grid 0;
40
- width: 100%;
41
- }
42
-
43
- .genericModal {
44
- margin: auto;
45
- background-color: $color-white;
46
- border-radius: $border-solid-border-radius;
47
- box-shadow: $shadow-large-box-shadow;
48
- position: relative;
49
- width: 90%;
50
- -webkit-font-smoothing: antialiased;
51
- color: $color-purple-800;
52
-
53
- @include ca-media-tablet-and-up {
54
- width: 100%;
55
- }
56
- }
57
-
58
- .animatingEnter {
59
- transition-duration: $ca-duration-fast;
60
-
61
- .backdropLayer {
62
- /*
63
- There's a weird bug in Chrome/Blink 102.x that animates the opacity
64
- all the way to 1 with 200ms ("rapid" token), but is fine with
65
- 201ms, see Jira [KDS-523]
66
- */
67
- @include ca-animation-fade($duration: 201ms, $from: 0, $to: 0.5);
68
- }
69
-
70
- .genericModal {
71
- @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
72
- animation-duration: $ca-duration-fast;
73
- animation-fill-mode: forwards;
74
- animation-timing-function: $ca-bounce-in;
75
- }
76
- }
77
-
78
- .animatingLeave {
79
- transition-duration: $ca-duration-rapid;
80
-
81
- .backdropLayer {
82
- @include ca-animation-fade(
83
- $duration: $ca-duration-rapid,
84
- $from: 0.5,
85
- $to: 0
86
- );
87
- }
88
-
89
- .genericModal {
90
- @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
91
- animation-duration: $ca-duration-rapid;
92
- animation-fill-mode: forwards;
93
- animation-timing-function: $ca-bounce-out;
94
- }
95
- }
96
-
97
- .unscrollable {
98
- /* Tech debt - this !important existed before Stylelint rules */
99
- overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
100
- }
101
-
102
- .pseudoScrollbar {
103
- /* Tech debt - this !important existed before Stylelint rules */
104
- padding-right: 15px !important; /* stylelint-disable-line declaration-no-important */
105
- }
106
-
107
- .hide {
108
- opacity: 0;
109
- pointer-events: none;
110
- }
@@ -1,7 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/color";
2
- @import "~@kaizen/design-tokens/sass/border";
3
-
4
- .inputEdit {
5
- background-color: $color-gray-200;
6
- border-radius: $border-solid-border-radius;
7
- }
@@ -1,115 +0,0 @@
1
- @import "../styles";
2
- @import "~@kaizen/design-tokens/sass/typography";
3
- @import "~@kaizen/design-tokens/sass/border";
4
- @import "~@kaizen/design-tokens/sass/color";
5
-
6
- .notification {
7
- @extend %ca-notification;
8
- }
9
-
10
- // Structure
11
-
12
- .icon {
13
- @extend %ca-notification__icon;
14
- }
15
-
16
- .textContainer {
17
- @extend %ca-notification__text-container;
18
- }
19
-
20
- .title {
21
- @extend %ca-notification__title;
22
- }
23
-
24
- .text {
25
- @extend %ca-notification__text;
26
- }
27
-
28
- .cancel {
29
- @extend %ca-notification__cancel;
30
- position: relative;
31
- display: flex;
32
- align-items: center;
33
- justify-content: center;
34
- &:focus {
35
- outline: none;
36
- }
37
- &:global(.focus-visible)::after {
38
- content: "";
39
- $focus-ring-offset: 6px;
40
- pointer-events: none;
41
- position: absolute;
42
- background: transparent;
43
- border-radius: $border-focus-ring-border-radius;
44
- border-width: $border-focus-ring-border-width;
45
- border-style: $border-focus-ring-border-style;
46
- border-color: $color-blue-500;
47
- top: $focus-ring-offset;
48
- bottom: $focus-ring-offset;
49
- left: $focus-ring-offset;
50
- right: $focus-ring-offset;
51
- }
52
- }
53
-
54
- .cancelLabel {
55
- @extend %ca-notification__cancel__label;
56
- }
57
- .notificationTitle {
58
- top: 0.42em;
59
- position: relative;
60
- padding-right: 6px;
61
- line-height: $typography-heading-6-line-height;
62
- }
63
-
64
- @container (max-width: 25rem) {
65
- .notificationTitle {
66
- width: 100%;
67
- }
68
- }
69
- // Animation
70
-
71
- .hidden {
72
- @extend %ca-notification---hidden;
73
- }
74
-
75
- // Variant
76
-
77
- .inline {
78
- @extend %ca-notification---inline;
79
- }
80
-
81
- .toast {
82
- @extend %ca-notification---toast;
83
- }
84
-
85
- .global {
86
- @extend %ca-notification---global;
87
- }
88
-
89
- // Type
90
-
91
- .positive {
92
- @extend %ca-notification---positive;
93
- }
94
-
95
- .informative {
96
- @extend %ca-notification---informative;
97
- }
98
-
99
- .cautionary {
100
- @extend %ca-notification---cautionary;
101
- }
102
-
103
- .negative {
104
- @extend %ca-notification---negative;
105
- }
106
-
107
- // Modifiers
108
-
109
- .noBottomMargin {
110
- @extend %ca-notification---noBottomMargin;
111
- }
112
-
113
- .forceMultiline {
114
- @extend %ca-notification---forceMultiline;
115
- }
@@ -1,136 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/color";
2
- @import "~@kaizen/design-tokens/sass/shadow";
3
- @import "~@kaizen/design-tokens/sass/spacing";
4
- @import "~@kaizen/deprecated-component-library-helpers/styles/layout";
5
- @import "~@kaizen/component-library/styles/animation";
6
- @import "~@kaizen/component-library/styles/responsive";
7
- @import "../variables";
8
-
9
- $tilePaddingTop: $spacing-xl;
10
-
11
- .root {
12
- perspective: 800px;
13
- }
14
-
15
- .tile {
16
- width: $tileWidth;
17
-
18
- [data-tile-grid] & {
19
- width: auto;
20
- }
21
-
22
- height: $tileHeight;
23
- position: relative;
24
- box-shadow: $shadow-small-box-shadow;
25
- background-color: $color-white;
26
- transition: transform $ca-duration-slow $ca-default;
27
- transform-style: preserve-3d;
28
- border-radius: 7px;
29
-
30
- @include ca-media-mobile {
31
- width: 100%;
32
- min-width: 226px;
33
- max-width: $tileHeight;
34
- }
35
-
36
- @media (max-width: 480px) {
37
- max-width: 100%;
38
- }
39
- }
40
-
41
- .face {
42
- position: absolute;
43
- background-color: $color-white;
44
- border-radius: 7px;
45
- box-sizing: border-box;
46
- display: flex;
47
- flex-direction: column;
48
- align-items: center;
49
- width: 100%;
50
- height: 100%;
51
- backface-visibility: hidden;
52
-
53
- * {
54
- backface-visibility: hidden;
55
- }
56
- }
57
-
58
- .faceFront {
59
- justify-content: space-between;
60
- padding: $tilePaddingTop $spacing-md $spacing-md;
61
- }
62
-
63
- .faceBack {
64
- padding-top: $tilePaddingTop;
65
- transform: rotateY(180deg);
66
- background-color: $color-blue-100;
67
- }
68
-
69
- .faceMoodPositive {
70
- background-color: $color-green-100;
71
- }
72
-
73
- .faceMoodInformative {
74
- background-color: $color-blue-100;
75
- }
76
-
77
- .faceMoodCautionary {
78
- background-color: $color-yellow-100;
79
- }
80
-
81
- .faceMoodAssertive {
82
- background-color: $color-orange-100;
83
- }
84
-
85
- .faceMoodNegative {
86
- background-color: $color-red-100;
87
- }
88
-
89
- .faceMoodProminent {
90
- background-color: $color-purple-100;
91
- }
92
-
93
- .isFlipped {
94
- transform: rotateY(179deg);
95
- }
96
-
97
- .title {
98
- text-align: center;
99
- padding-bottom: $spacing-sm;
100
- backface-visibility: hidden;
101
- }
102
-
103
- .actions {
104
- display: flex;
105
- }
106
-
107
- .informationBtn {
108
- @include ca-position($top: 0, $end: 0);
109
- position: absolute;
110
- color: rgba($color-purple-800-rgb, 0.5);
111
- }
112
-
113
- .information {
114
- @include ca-padding(
115
- $bottom: $spacing-md,
116
- $start: $spacing-md,
117
- $end: $spacing-md
118
- );
119
- display: flex;
120
- flex-direction: column;
121
- align-items: center;
122
- justify-content: space-between;
123
- box-sizing: border-box;
124
- width: 100%;
125
- height: 100%;
126
- text-align: left;
127
- border-radius: 0 0 7px 7px;
128
- }
129
-
130
- .footer {
131
- display: flex;
132
- align-items: center;
133
- justify-content: center;
134
- margin-top: $spacing-sm;
135
- height: $spacing-xl;
136
- }