@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,22 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/color";
2
-
3
- .popoverContent {
4
- display: flex;
5
- align-items: center;
6
- justify-content: center;
7
- }
8
-
9
- .popoverLink {
10
- max-width: 300px;
11
- overflow: hidden;
12
- text-overflow: ellipsis;
13
- white-space: nowrap;
14
- }
15
-
16
- .paragraphFlex {
17
- display: inline-flex;
18
- }
19
-
20
- .popoverActions {
21
- border-left: 1px solid rgba($color-gray-600-rgb, 0.1);
22
- }
@@ -1,18 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/spacing";
2
-
3
- .listBox {
4
- list-style: none;
5
- padding: $spacing-sm;
6
- margin: 0 $spacing-sm 0 0;
7
- display: grid;
8
- max-height: 22rem;
9
- overflow-y: auto;
10
- }
11
-
12
- .overflown {
13
- padding-right: $spacing-sm;
14
- }
15
-
16
- .hidden {
17
- display: none;
18
- }
@@ -1,14 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/spacing";
2
-
3
- .listBox {
4
- list-style: none;
5
- padding: $spacing-sm;
6
- margin-top: 0;
7
- margin-bottom: 0;
8
- display: grid;
9
- max-height: 22rem;
10
-
11
- &.focus {
12
- outline: none;
13
- }
14
- }
@@ -1,3 +0,0 @@
1
- .listBoxSection {
2
- display: grid;
3
- }
@@ -1,20 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/spacing";
2
-
3
- .sectionWrapper {
4
- display: flex;
5
- flex-direction: column;
6
- }
7
-
8
- .sectionHeading {
9
- padding-left: 4px;
10
- }
11
-
12
- .sectionList {
13
- display: flex;
14
- flex-direction: column;
15
- padding: $spacing-xs 0px 0px 0px;
16
- }
17
-
18
- .sectionWrapper + .sectionWrapper {
19
- margin-top: 0.5rem;
20
- }
@@ -1,5 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/spacing";
2
-
3
- .container {
4
- padding: $spacing-sm $spacing-sm 0;
5
- }
@@ -1,10 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/color";
2
-
3
- .graphic {
4
- background-color: rgba($color-gray-600-rgb, 0.1);
5
- border-radius: 50%;
6
-
7
- &.reversed {
8
- background-color: rgba($color-white-rgb, 0.1);
9
- }
10
- }
@@ -1,67 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/color";
2
- @import "~@kaizen/design-tokens/sass/typography";
3
-
4
- .heading {
5
- background-color: rgba($color-gray-500-rgb, 0.2);
6
-
7
- &.display-0 {
8
- height: $typography-display-0-font-size;
9
- margin-bottom: calc(
10
- #{$typography-display-0-line-height} - #{$typography-display-0-font-size}
11
- );
12
- }
13
-
14
- &.heading-1 {
15
- height: $typography-heading-1-font-size;
16
- margin-bottom: calc(
17
- #{$typography-heading-1-line-height} - #{$typography-heading-1-font-size}
18
- );
19
- }
20
-
21
- &.heading-2 {
22
- height: $typography-heading-2-font-size;
23
- margin-bottom: calc(
24
- #{$typography-heading-2-line-height} - #{$typography-heading-2-font-size}
25
- );
26
- }
27
-
28
- &.heading-3 {
29
- height: $typography-heading-3-font-size;
30
- margin-bottom: calc(
31
- #{$typography-heading-3-line-height} - #{$typography-heading-3-font-size}
32
- );
33
- }
34
-
35
- &.heading-4 {
36
- height: $typography-heading-4-font-size;
37
- margin-bottom: calc(
38
- #{$typography-heading-4-line-height} - #{$typography-heading-4-font-size}
39
- );
40
- }
41
-
42
- &.heading-5 {
43
- height: $typography-heading-5-font-size;
44
- margin-bottom: calc(
45
- #{$typography-heading-5-line-height} - #{$typography-heading-5-font-size}
46
- );
47
- }
48
-
49
- &.heading-6 {
50
- height: $typography-heading-6-font-size;
51
- margin-bottom: calc(
52
- #{$typography-heading-6-line-height} - #{$typography-heading-6-font-size}
53
- );
54
- }
55
-
56
- &.reversed:not(.link) {
57
- background-color: rgba($color-white-rgb, 0.2);
58
- }
59
-
60
- &.link {
61
- background-color: rgba($color-blue-500-rgb, 0.2);
62
- }
63
-
64
- &.link.reversed {
65
- background-color: rgba($color-white-rgb, 0.65);
66
- }
67
- }
@@ -1,9 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/color";
2
-
3
- .input {
4
- background-color: rgba($color-gray-600-rgb, 0.1);
5
-
6
- &.reversed {
7
- background-color: rgba($color-white-rgb, 0.1);
8
- }
9
- }
@@ -1,50 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/color";
2
- @import "~@kaizen/design-tokens/sass/spacing";
3
-
4
- .paragraph {
5
- background-color: $color-gray-300;
6
- height: calc(#{$spacing-md} * 0.625);
7
- margin-bottom: calc(#{$spacing-md} * 0.5);
8
-
9
- &.reversed:not(.link) {
10
- background-color: rgba($color-white-rgb, 0.1);
11
- }
12
-
13
- &.link {
14
- background-color: rgba($color-blue-500-rgb, 0.2);
15
- }
16
-
17
- &.link.reversed {
18
- background-color: rgba($color-white-rgb, 0.65);
19
- }
20
- }
21
-
22
- .centered {
23
- margin-left: auto;
24
- margin-right: auto;
25
- }
26
-
27
- .inline {
28
- display: inline-block;
29
- margin-bottom: calc(#{$spacing-md} * 0.35);
30
- }
31
-
32
- .inline + .inline {
33
- margin-right: 0;
34
- margin-left: $spacing-md;
35
-
36
- &[dir="rtl"],
37
- [dir="rtl"] & {
38
- margin-right: $spacing-md;
39
- margin-left: 0;
40
- }
41
- }
42
-
43
- .noBottomMargin {
44
- margin-bottom: 0;
45
- }
46
-
47
- // We double the class selector to increase specificity above rules like `h1.default-style`
48
- .inheritBaseline.inheritBaseline {
49
- position: static;
50
- }
@@ -1,31 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/animation";
2
-
3
- @mixin sr-only {
4
- position: absolute;
5
- width: 1px;
6
- height: 1px;
7
- padding: 0;
8
- overflow: hidden;
9
- clip: rect(0, 0, 0, 0);
10
- white-space: nowrap;
11
- border: 0;
12
- }
13
-
14
- .wrapper {
15
- display: flex;
16
- }
17
-
18
- .visuallyHidden {
19
- @include sr-only();
20
- }
21
-
22
- .spinner {
23
- animation: spinner $animation-duration-deliberate
24
- $animation-easing-function-ease-in-out infinite;
25
- }
26
-
27
- @keyframes spinner {
28
- 100% {
29
- transform: rotate(360deg);
30
- }
31
- }
@@ -1,16 +0,0 @@
1
- @import "~@kaizen/deprecated-component-library-helpers/styles/layout";
2
- @import "./mixins";
3
-
4
- .mainActionsContainer {
5
- display: flex;
6
- align-items: center;
7
- justify-content: flex-end;
8
- flex-grow: 1;
9
- flex-shrink: 0;
10
-
11
- @include ca-margin($start: calc(#{$ca-grid} / 2));
12
-
13
- @include title-block-small {
14
- display: none;
15
- }
16
- }
@@ -1,19 +0,0 @@
1
- @import "./Base.module.scss";
2
-
3
- @each $fraction, $margin in $spacing-list {
4
- .m-#{$fraction} {
5
- margin: $margin;
6
- }
7
- .mt-#{$fraction} {
8
- margin-top: $margin;
9
- }
10
- .mr-#{$fraction} {
11
- margin-right: $margin;
12
- }
13
- .mb-#{$fraction} {
14
- margin-bottom: $margin;
15
- }
16
- .ml-#{$fraction} {
17
- margin-left: $margin;
18
- }
19
- }
@@ -1,111 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/shadow";
2
- @import "~@kaizen/design-tokens/sass/color";
3
- @import "~@kaizen/design-tokens/sass/border";
4
- @import "~@kaizen/deprecated-component-library-helpers/styles/layout";
5
- @import "~@kaizen/deprecated-component-library-helpers/styles/type";
6
- @import "~@kaizen/deprecated-component-library-helpers/styles/color";
7
- @import "../../styles/border";
8
- @import "../../styles/layers";
9
- @import "../../styles/animation";
10
-
11
- $side-padding: calc(calc(3 / 4) * #{$ca-grid});
12
-
13
- .menuList {
14
- background: white;
15
- border: $border-solid-border-width $border-solid-border-style
16
- $color-purple-200;
17
- box-shadow: $shadow-small-box-shadow;
18
- line-height: 40px;
19
- }
20
-
21
- .header {
22
- padding: 10px $side-padding;
23
- text-align: left;
24
- color: rgba($color-purple-800-rgb, 0.4);
25
- border-bottom: $ca-border-color 1px solid;
26
- }
27
-
28
- .header__title {
29
- @include kz-typography-heading-6;
30
- @include ca-inherit-baseline;
31
- display: block;
32
- }
33
-
34
- .menuItem {
35
- @include kz-typography-paragraph-body;
36
- @include ca-inherit-baseline;
37
- composes: interactiveIconWrapper from "../Icon/Icon.module.scss";
38
- background: transparent;
39
- color: $color-purple-800;
40
- cursor: pointer;
41
- text-align: left;
42
-
43
- transition: $ca-duration-immediate background-color ease,
44
- $ca-duration-immediate color ease;
45
-
46
- padding: 10px $side-padding;
47
- text-decoration: none;
48
- display: flex;
49
- flex: 0 0 100%;
50
-
51
- [dir="rtl"] & {
52
- text-align: right;
53
- }
54
-
55
- &.menuItem--active,
56
- &:hover,
57
- &:focus {
58
- background: $color-gray-100;
59
- color: $color-blue-500;
60
- // override Murmur global styles :(
61
- text-decoration: none;
62
-
63
- .menuItem__Icon {
64
- color: $color-blue-500;
65
- }
66
- }
67
- }
68
-
69
- .menuItem--active {
70
- composes: active from "../Icon/Icon.module.scss";
71
- }
72
-
73
- .menuItem--destructive {
74
- color: $color-red-600;
75
- .menuItem__Icon {
76
- color: $color-red-600;
77
- }
78
- }
79
-
80
- .menuItem__Label {
81
- flex: 1;
82
-
83
- :not(:only-child) {
84
- @include ca-margin($end: calc(#{$ca-grid} / 2));
85
- }
86
- }
87
-
88
- .menuItem__Icon {
89
- text-align: right;
90
- color: $color-purple-800;
91
- position: relative;
92
- top: 3px;
93
-
94
- .hoverIcon & {
95
- opacity: 0;
96
- }
97
- .menuItem--active &,
98
- .hoverIcon:hover &,
99
- .hoverIcon:focus & {
100
- opacity: 1;
101
- }
102
- }
103
-
104
- .separator {
105
- height: 1px;
106
- width: 100%;
107
- border: 0;
108
- background: $color-purple-200;
109
- visibility: visible;
110
- margin: 5px 0;
111
- }
@@ -1,26 +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
- $menu-container-width: 248px;
7
- $dropdown-index: 1000;
8
-
9
- .menuContainer {
10
- z-index: $dropdown-index;
11
- box-sizing: border-box;
12
- background: $color-white;
13
- color: $color-purple-800;
14
- border-radius: $border-solid-border-radius;
15
- box-shadow: $shadow-large-box-shadow;
16
- padding: $spacing-xs 0;
17
- text-align: left;
18
-
19
- [dir="rtl"] & {
20
- text-align: right;
21
- }
22
- }
23
-
24
- .defaultWidth {
25
- width: $menu-container-width;
26
- }
@@ -1,9 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/color";
2
- @import "~@kaizen/design-tokens/sass/spacing";
3
-
4
- .footer {
5
- border-top: 1px solid rgba($color-gray-600-rgb, 0.1);
6
- gap: $spacing-xs;
7
- display: flex;
8
- padding: $spacing-sm $spacing-sm 0;
9
- }
@@ -1,99 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/color";
2
- @import "~@kaizen/design-tokens/sass/spacing";
3
- @import "~@kaizen/design-tokens/sass/typography";
4
-
5
- .menuListItem {
6
- display: flex;
7
- }
8
-
9
- .menuItem {
10
- display: flex;
11
- align-items: center;
12
- flex: 1 1 auto;
13
- box-sizing: border-box;
14
- background: none;
15
- border: 2px transparent solid;
16
- text-align: left;
17
- padding: 6px calc(#{$spacing-sm} - 2px);
18
- margin: 0 $spacing-xs;
19
- min-height: calc(1.75 * #{$spacing-md});
20
- border-radius: 4px;
21
- font-family: $typography-paragraph-body-font-family;
22
- font-weight: $typography-paragraph-body-font-weight;
23
- font-size: $typography-paragraph-body-font-size;
24
- line-height: $typography-paragraph-body-line-height;
25
- letter-spacing: $typography-paragraph-body-letter-spacing;
26
- text-decoration: none;
27
- color: $color-purple-800;
28
-
29
- &:hover {
30
- text-decoration: none;
31
- }
32
-
33
- &:not(.menuItem--disabled):hover,
34
- &:focus {
35
- background: $color-blue-100;
36
- color: $color-blue-500;
37
-
38
- .menuItem__Icon {
39
- color: $color-blue-500;
40
- }
41
-
42
- &.menuItem--destructive {
43
- background: $color-red-100;
44
- color: $color-red-600;
45
-
46
- .menuItem__Icon {
47
- color: $color-red-600;
48
- }
49
- }
50
- }
51
-
52
- &:focus-visible,
53
- &.focus-visible {
54
- border-color: $color-blue-500;
55
- outline: none;
56
- }
57
-
58
- [dir="rtl"] & {
59
- text-align: right;
60
- }
61
- }
62
-
63
- .menuItem--disabled {
64
- color: rgba($color-purple-800-rgb, 0.3);
65
- .menuItem__Icon {
66
- color: rgba($color-purple-800-rgb, 0.3);
67
- }
68
- }
69
-
70
- .menuItem--active {
71
- color: $color-blue-500;
72
- font-weight: $typography-paragraph-bold-font-weight;
73
- }
74
-
75
- .menuItem--destructive {
76
- color: $color-red-600;
77
- .menuItem__Icon {
78
- color: $color-red-600;
79
- }
80
- }
81
-
82
- .menuItem--destructive.menuItem--disabled {
83
- color: rgba($color-red-600-rgb, 0.3);
84
- .menuItem__Icon {
85
- color: rgba($color-red-600-rgb, 0.3);
86
- }
87
- }
88
-
89
- .menuItem__Label {
90
- flex-grow: 1;
91
- }
92
-
93
- .menuItem__Icon {
94
- margin-inline-end: calc(#{$spacing-md} / 3);
95
- display: flex;
96
- align-self: flex-start;
97
- transform: translateY(0.2em);
98
- color: rgba($color-purple-800-rgb, 0.75);
99
- }
@@ -1,35 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/spacing";
2
- @import "~@kaizen/design-tokens/sass/border";
3
- @import "~@kaizen/design-tokens/sass/color";
4
- @import "~@kaizen/design-tokens/sass/typography";
5
-
6
- $gutter: calc(#{$spacing-md} * 1 / 6);
7
-
8
- .header {
9
- padding: 10px $spacing-sm 5px;
10
- color: $color-purple-800;
11
- margin: 0 $gutter;
12
- font-family: $typography-heading-6-font-family;
13
- font-weight: $typography-heading-6-font-weight;
14
- font-size: $typography-heading-6-font-size;
15
- line-height: $typography-heading-6-line-height;
16
- letter-spacing: $typography-heading-6-letter-spacing;
17
- display: block;
18
- }
19
-
20
- .menuSection {
21
- list-style: none;
22
- padding: 0;
23
- margin: 0;
24
-
25
- &:not(:last-of-type) {
26
- &::after {
27
- width: 100%;
28
- height: 1px;
29
- background-color: $border-solid-border-color;
30
- content: "";
31
- display: block;
32
- margin: 5px 0;
33
- }
34
- }
35
- }
@@ -1,9 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/spacing";
2
- .loadingInput {
3
- margin-bottom: $spacing-sm;
4
- }
5
-
6
- .loadingContainer {
7
- margin-left: $spacing-sm;
8
- margin-right: $spacing-sm;
9
- }
@@ -1,27 +0,0 @@
1
- @import "~@kaizen/design-tokens/sass/spacing";
2
- @import "~@kaizen/design-tokens/sass/shadow";
3
- @import "~@kaizen/design-tokens/sass/border";
4
- @import "~@kaizen/design-tokens/sass/color";
5
-
6
- // figma hard coded: https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%E2%9D%A4%EF%B8%8F-UI-Kit%3A-Heart?node-id=22814%3A96966
7
- $menu-container-width: 294px;
8
- $menu-container-max-height: 312px;
9
-
10
- .menuPopup {
11
- position: absolute;
12
- z-index: 1000; // from $ca-z-index-dropdown
13
- box-sizing: border-box;
14
- background: $color-white;
15
- color: $color-purple-800;
16
- border-radius: $border-solid-border-radius;
17
- box-shadow: $shadow-large-box-shadow;
18
- padding: $spacing-sm 0;
19
- margin-top: $spacing-xs;
20
- text-align: left;
21
-
22
- width: $menu-container-width;
23
-
24
- [dir="rtl"] & {
25
- text-align: right;
26
- }
27
- }