@transferwise/components 0.0.0-experimental-8078c24 → 0.0.0-experimental-7d89ae8

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 (159) hide show
  1. package/package.json +3 -3
  2. package/src/accordion/Accordion.css +0 -74
  3. package/src/actionButton/ActionButton.css +0 -64
  4. package/src/actionOption/ActionOption.css +0 -4
  5. package/src/alert/Alert.css +0 -7
  6. package/src/avatar/Avatar.css +0 -250
  7. package/src/avatarLayout/AvatarLayout.css +0 -42
  8. package/src/avatarView/AvatarView.css +0 -44
  9. package/src/avatarView/Dot.css +0 -26
  10. package/src/badge/Badge.css +0 -65
  11. package/src/body/Body.css +0 -3
  12. package/src/button/Button.css +0 -246
  13. package/src/button/Button.vars.css +0 -46
  14. package/src/button/LegacyButton.css +0 -23
  15. package/src/card/Card.css +0 -100
  16. package/src/carousel/Carousel.css +0 -134
  17. package/src/checkboxButton/CheckboxButton.css +0 -43
  18. package/src/chips/Chip.css +0 -190
  19. package/src/circularButton/CircularButton.css +0 -34
  20. package/src/common/Option/Option.css +0 -120
  21. package/src/common/RadioButton/RadioButton.css +0 -4
  22. package/src/common/baseCard/BaseCard.css +0 -49
  23. package/src/common/bottomSheet/BottomSheet.css +0 -53
  24. package/src/common/circle/Circle.css +0 -43
  25. package/src/common/closeButton/CloseButton.css +0 -94
  26. package/src/common/liveRegion/LiveRegion.css +0 -3
  27. package/src/common/panel/Panel.css +0 -73
  28. package/src/container/Container.css +0 -38
  29. package/src/criticalBanner/CriticalCommsBanner.css +0 -63
  30. package/src/dateInput/DateInput.css +0 -16
  31. package/src/dateLookup/DateLookup.css +0 -93
  32. package/src/dateLookup/dateTrigger/DateTrigger.css +0 -29
  33. package/src/decision/Decision.css +0 -17
  34. package/src/definitionList/DefinitionList.css +0 -53
  35. package/src/dimmer/Dimmer.css +0 -70
  36. package/src/divider/Divider.css +0 -24
  37. package/src/drawer/Drawer.css +0 -56
  38. package/src/dropFade/DropFade.css +0 -19
  39. package/src/emphasis/Emphasis.css +0 -31
  40. package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +0 -60
  41. package/src/expressiveMoneyInput/amountInput/AmountInput.css +0 -34
  42. package/src/expressiveMoneyInput/chevron/Chevron.css +0 -12
  43. package/src/expressiveMoneyInput/currencySelector/CurrencySelector.css +0 -6
  44. package/src/field/Field.css +0 -29
  45. package/src/flowNavigation/FlowNavigation.css +0 -76
  46. package/src/flowNavigation/animatedLabel/AnimatedLabel.css +0 -30
  47. package/src/header/Header.css +0 -33
  48. package/src/iconButton/IconButton.css +0 -82
  49. package/src/image/Image.css +0 -13
  50. package/src/info/Info.css +0 -9
  51. package/src/inputs/Input.css +0 -158
  52. package/src/inputs/InputGroup.css +0 -71
  53. package/src/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css +0 -96
  54. package/src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css +0 -20
  55. package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.css +0 -46
  56. package/src/inputs/SelectInput/ItemView/SelectInputItemView.css +0 -16
  57. package/src/inputs/SelectInput/Option/SelectInputOption.css +0 -33
  58. package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.css +0 -37
  59. package/src/inputs/SelectInput/Options/SelectInputOptions.css +0 -81
  60. package/src/inputs/SelectInput/Popover/SelectInputPopover.css +0 -46
  61. package/src/inputs/SelectInput/SelectInput.css +0 -384
  62. package/src/inputs/TextArea.css +0 -161
  63. package/src/instructionsList/InstructionsList.css +0 -26
  64. package/src/legacylistItem/LegacyListItem.css +0 -6
  65. package/src/link/Link.css +0 -24
  66. package/src/listItem/ListItem.css +0 -660
  67. package/src/listItem/ListItem.grid.css +0 -384
  68. package/src/listItem/ListItem.vars.css +0 -0
  69. package/src/listItem/Prompt/ListItemPrompt.css +0 -4
  70. package/src/loader/Loader.css +0 -237
  71. package/src/logo/Logo.css +0 -6
  72. package/src/main.css +0 -34572
  73. package/src/modal/Modal.css +0 -82
  74. package/src/moneyInput/MoneyInput.css +0 -78
  75. package/src/navigationOption/NavigationOption.css +0 -69
  76. package/src/navigationOptionsList/NavigationOptionsList.css +0 -13
  77. package/src/nudge/Nudge.css +0 -206
  78. package/src/overlayHeader/OverlayHeader.css +0 -15
  79. package/src/phoneNumberInput/PhoneNumberInput.css +0 -28
  80. package/src/popover/Popover.css +0 -76
  81. package/src/progress/Progress.css +0 -43
  82. package/src/progressBar/ProgressBar.css +0 -14
  83. package/src/promoCard/PromoCard.css +0 -186
  84. package/src/prompt/ActionPrompt/ActionPrompt.css +0 -30
  85. package/src/prompt/CriticalBanner/CriticalBanner.css +0 -134
  86. package/src/prompt/CriticalBanner/CriticalBanner.vars.css +0 -0
  87. package/src/prompt/InfoPrompt/InfoPrompt.css +0 -57
  88. package/src/prompt/InlinePrompt/InlinePrompt.css +0 -57
  89. package/src/prompt/PrimitivePrompt/PrimitivePrompt.css +0 -51
  90. package/src/prompt/common/Expander/Expander.css +0 -8
  91. package/src/radioGroup/RadioGroup.css +0 -3
  92. package/src/section/Section.css +0 -10
  93. package/src/segmentedControl/SegmentedControl.css +0 -101
  94. package/src/select/Select.css +0 -369
  95. package/src/sentimentSurface/SentimentSurface.css +0 -487
  96. package/src/slidingPanel/SlidingPanel.css +0 -105
  97. package/src/snackbar/Snackbar.css +0 -93
  98. package/src/statusIcon/StatusIcon.css +0 -37
  99. package/src/stepper/Stepper.css +0 -77
  100. package/src/styles/less/accordion.css +0 -255
  101. package/src/styles/less/alerts.css +0 -751
  102. package/src/styles/less/background.css +0 -20
  103. package/src/styles/less/badge.css +0 -90
  104. package/src/styles/less/border-radius.css +0 -3
  105. package/src/styles/less/breadcrumbs.css +0 -20
  106. package/src/styles/less/button-groups.css +0 -495
  107. package/src/styles/less/buttons.css +0 -1390
  108. package/src/styles/less/chevron.css +0 -35
  109. package/src/styles/less/circles.css +0 -248
  110. package/src/styles/less/close.css +0 -47
  111. package/src/styles/less/column-layout.css +0 -164
  112. package/src/styles/less/core/viewport-themes.css +0 -63
  113. package/src/styles/less/currency-flags.css +0 -46
  114. package/src/styles/less/decision.css +0 -136
  115. package/src/styles/less/dropdowns.css +0 -472
  116. package/src/styles/less/droppable.css +0 -221
  117. package/src/styles/less/flex.css +0 -596
  118. package/src/styles/less/footer.css +0 -129
  119. package/src/styles/less/forms/bootstrap-forms.css +0 -2277
  120. package/src/styles/less/forms/checkbox-radio.css +0 -367
  121. package/src/styles/less/grid.css +0 -2369
  122. package/src/styles/less/input-groups.css +0 -2740
  123. package/src/styles/less/link-callout.css +0 -20
  124. package/src/styles/less/list-group.css +0 -350
  125. package/src/styles/less/loaders.css +0 -76
  126. package/src/styles/less/media.css +0 -74
  127. package/src/styles/less/modals.css +0 -185
  128. package/src/styles/less/navbar.css +0 -2406
  129. package/src/styles/less/navs.css +0 -296
  130. package/src/styles/less/neptune-social-media.css +0 -144
  131. package/src/styles/less/neptune.css +0 -25468
  132. package/src/styles/less/panels.css +0 -528
  133. package/src/styles/less/popovers.css +0 -661
  134. package/src/styles/less/process.css +0 -483
  135. package/src/styles/less/progress-bars.css +0 -64
  136. package/src/styles/less/ring.css +0 -55
  137. package/src/styles/less/select.css +0 -99
  138. package/src/styles/less/sequences.css +0 -855
  139. package/src/styles/less/table.css +0 -446
  140. package/src/styles/less/tick.css +0 -32
  141. package/src/styles/less/tooltip.css +0 -160
  142. package/src/styles/less/utilities.css +0 -133
  143. package/src/styles/less/wells.css +0 -60
  144. package/src/styles/variables/legacy-variables.css +0 -0
  145. package/src/styles/variables/neptune-tokens.css +0 -0
  146. package/src/styles/variables/zindex.css +0 -0
  147. package/src/summary/Summary.css +0 -81
  148. package/src/switch/Switch.css +0 -63
  149. package/src/switchOption/SwitchOption.css +0 -4
  150. package/src/table/Table.css +0 -274
  151. package/src/tabs/Tabs.css +0 -121
  152. package/src/tile/Tile.css +0 -68
  153. package/src/tooltip/Tooltip.css +0 -50
  154. package/src/typeahead/Typeahead.css +0 -187
  155. package/src/typeahead/typeaheadOption/TypeaheadOption.css +0 -9
  156. package/src/upload/Upload.css +0 -34
  157. package/src/uploadInput/UploadInput.css +0 -18
  158. package/src/uploadInput/uploadButton/UploadButton.css +0 -90
  159. package/src/uploadInput/uploadItem/UploadItem.css +0 -166
package/src/sentimentSurface/SentimentSurface.css DELETED
@@ -1,487 +0,0 @@
1
- .wds-sentiment-surface {
2
- --ring-outline-color: var(--color-sentiment-content-primary, var(--color-content-primary));
3
- }
4
- .wds-sentiment-surface--hasBaseStyles {
5
- background-color: var(--color-sentiment-background-surface);
6
- color: var(--color-sentiment-content-primary);
7
- }
8
- .np-theme-personal.wds-sentiment-surface-negative-base,
9
- .np-theme-business.wds-sentiment-surface-negative-base,
10
- .np-theme-platform.wds-sentiment-surface-negative-base,
11
- .np-theme-personal--bright-green.wds-sentiment-surface-negative-base,
12
- .np-theme-business--bright-green.wds-sentiment-surface-negative-base {
13
- --color-sentiment-content-primary: #CB272F;
14
- --color-sentiment-content-primary-hover: #B8232B;
15
- --color-sentiment-content-primary-active: #A72027;
16
- --color-sentiment-interactive-primary: #CB272F;
17
- --color-sentiment-interactive-primary-hover: #B8232B;
18
- --color-sentiment-interactive-primary-active: #A72027;
19
- --color-sentiment-interactive-secondary: #FBEAEA;
20
- --color-sentiment-interactive-secondary-hover: #F9E1E1;
21
- --color-sentiment-interactive-secondary-active: #F8D8D8;
22
- --color-sentiment-interactive-secondary-neutral: #F5D3D4;
23
- --color-sentiment-interactive-secondary-neutral-hover: #F0BDBE;
24
- --color-sentiment-interactive-secondary-neutral-active: #ECACAD;
25
- --color-sentiment-interactive-control: #FBEAEA;
26
- --color-sentiment-interactive-control-hover: #F9E1E1;
27
- --color-sentiment-interactive-control-active: #F8D8D8;
28
- --color-sentiment-background-surface: #FBEAEA;
29
- --color-sentiment-background-surface-hover: #F9E1E1;
30
- --color-sentiment-background-surface-active: #F8D8D8;
31
- }
32
- .np-theme-personal.wds-sentiment-surface-negative-elevated,
33
- .np-theme-business.wds-sentiment-surface-negative-elevated,
34
- .np-theme-platform.wds-sentiment-surface-negative-elevated,
35
- .np-theme-personal--bright-green.wds-sentiment-surface-negative-elevated,
36
- .np-theme-business--bright-green.wds-sentiment-surface-negative-elevated {
37
- --color-sentiment-content-primary: #FFFFFF;
38
- --color-sentiment-content-primary-hover: #F5CCCC;
39
- --color-sentiment-content-primary-active: #F1B7B7;
40
- --color-sentiment-interactive-primary: #FBEAEA;
41
- --color-sentiment-interactive-primary-hover: #F5CCCC;
42
- --color-sentiment-interactive-primary-active: #F1B7B7;
43
- --color-sentiment-interactive-secondary: #CB272F;
44
- --color-sentiment-interactive-secondary-hover: #B8232B;
45
- --color-sentiment-interactive-secondary-active: #A72027;
46
- --color-sentiment-interactive-secondary-neutral: #9B141B;
47
- --color-sentiment-interactive-secondary-neutral-hover: #831116;
48
- --color-sentiment-interactive-secondary-neutral-active: #6D0e13;
49
- --color-sentiment-interactive-control: #CB272F;
50
- --color-sentiment-interactive-control-hover: #B8232B;
51
- --color-sentiment-interactive-control-active: #A72027;
52
- --color-sentiment-background-surface: #CB272F;
53
- --color-sentiment-background-surface-hover: #B8232B;
54
- --color-sentiment-background-surface-active: #A72027;
55
- }
56
- .np-theme-personal--dark.wds-sentiment-surface-negative-base,
57
- .np-theme-business--dark.wds-sentiment-surface-negative-base,
58
- .np-theme-personal--forest-green.wds-sentiment-surface-negative-base,
59
- .np-theme-business--forest-green.wds-sentiment-surface-negative-base,
60
- .np-theme-platform--forest-green.wds-sentiment-surface-negative-base {
61
- --color-sentiment-content-primary: #FFA8AD;
62
- --color-sentiment-content-primary-hover: #FFBDC0;
63
- --color-sentiment-content-primary-active: #FFD1D3;
64
- --color-sentiment-interactive-primary: #FFA8AD;
65
- --color-sentiment-interactive-primary-hover: #FFBDC0;
66
- --color-sentiment-interactive-primary-active: #FFD1D3;
67
- --color-sentiment-interactive-secondary: #410B0D;
68
- --color-sentiment-interactive-secondary-hover: #641115;
69
- --color-sentiment-interactive-secondary-active: #761418;
70
- --color-sentiment-interactive-secondary-neutral: #601013;
71
- --color-sentiment-interactive-secondary-neutral-hover: #7A1519;
72
- --color-sentiment-interactive-secondary-neutral-active: #90181D;
73
- --color-sentiment-interactive-control: #410B0D;
74
- --color-sentiment-interactive-control-hover: #641115;
75
- --color-sentiment-interactive-control-active: #761418;
76
- --color-sentiment-background-surface: #410B0D;
77
- --color-sentiment-background-surface-hover: #641115;
78
- --color-sentiment-background-surface-active: #761418;
79
- }
80
- .np-theme-personal--dark.wds-sentiment-surface-negative-elevated,
81
- .np-theme-business--dark.wds-sentiment-surface-negative-elevated,
82
- .np-theme-personal--forest-green.wds-sentiment-surface-negative-elevated,
83
- .np-theme-business--forest-green.wds-sentiment-surface-negative-elevated,
84
- .np-theme-platform--forest-green.wds-sentiment-surface-negative-elevated {
85
- --color-sentiment-content-primary: #410B0D;
86
- --color-sentiment-content-primary-hover: #641115;
87
- --color-sentiment-content-primary-active: #761418;
88
- --color-sentiment-interactive-primary: #410B0D;
89
- --color-sentiment-interactive-primary-hover: #641115;
90
- --color-sentiment-interactive-primary-active: #761418;
91
- --color-sentiment-interactive-secondary: #FFA8AD;
92
- --color-sentiment-interactive-secondary-hover: #FFBDC0;
93
- --color-sentiment-interactive-secondary-active: #FFD1D3;
94
- --color-sentiment-interactive-secondary-neutral: #D9898D;
95
- --color-sentiment-interactive-secondary-neutral-hover: #D68084;
96
- --color-sentiment-interactive-secondary-neutral-active: #D06C71;
97
- --color-sentiment-interactive-control: #FFA8AD;
98
- --color-sentiment-interactive-control-hover: #FFBDC0;
99
- --color-sentiment-interactive-control-active: #FFD1D3;
100
- --color-sentiment-background-surface: #FFA8AD;
101
- --color-sentiment-background-surface-hover: #FFBDC0;
102
- --color-sentiment-background-surface-active: #FFD1D3;
103
- }
104
- .np-theme-personal.wds-sentiment-surface-warning-base,
105
- .np-theme-business.wds-sentiment-surface-warning-base,
106
- .np-theme-platform.wds-sentiment-surface-warning-base,
107
- .np-theme-personal--bright-green.wds-sentiment-surface-warning-base,
108
- .np-theme-business--bright-green.wds-sentiment-surface-warning-base {
109
- --color-sentiment-content-primary: #4A3B1C;
110
- --color-sentiment-content-primary-hover: #302612;
111
- --color-sentiment-content-primary-active: #2C2311;
112
- --color-sentiment-interactive-primary: #FFD11A;
113
- --color-sentiment-interactive-primary-hover: #FFBF0F;
114
- --color-sentiment-interactive-primary-active: #FFBB00;
115
- --color-sentiment-interactive-secondary: #FFF7D7;
116
- --color-sentiment-interactive-secondary-hover: #FFF0B2;
117
- --color-sentiment-interactive-secondary-active: #FFE98F;
118
- --color-sentiment-interactive-secondary-neutral: #FFEC9E;
119
- --color-sentiment-interactive-secondary-neutral-hover: #FFE187;
120
- --color-sentiment-interactive-secondary-neutral-active: #FFD55F;
121
- --color-sentiment-interactive-control: #4A3B1C;
122
- --color-sentiment-interactive-control-hover: #302612;
123
- --color-sentiment-interactive-control-active: #2C2311;
124
- --color-sentiment-background-surface: #FFF7D7;
125
- --color-sentiment-background-surface-hover: #FFF0B2;
126
- --color-sentiment-background-surface-active: #FFE98F;
127
- }
128
- .np-theme-personal.wds-sentiment-surface-warning-elevated,
129
- .np-theme-business.wds-sentiment-surface-warning-elevated,
130
- .np-theme-platform.wds-sentiment-surface-warning-elevated,
131
- .np-theme-personal--bright-green.wds-sentiment-surface-warning-elevated,
132
- .np-theme-business--bright-green.wds-sentiment-surface-warning-elevated {
133
- --color-sentiment-content-primary: #4A3B1C;
134
- --color-sentiment-content-primary-hover: #302612;
135
- --color-sentiment-content-primary-active: #2C2311;
136
- --color-sentiment-interactive-primary: #4A3B1C;
137
- --color-sentiment-interactive-primary-hover: #302612;
138
- --color-sentiment-interactive-primary-active: #2C2311;
139
- --color-sentiment-interactive-secondary: #FFD11A;
140
- --color-sentiment-interactive-secondary-hover: #FFBF0F;
141
- --color-sentiment-interactive-secondary-active: #FFBB00;
142
- --color-sentiment-interactive-secondary-neutral: #FFEC9E;
143
- --color-sentiment-interactive-secondary-neutral-hover: #FFEDB8;
144
- --color-sentiment-interactive-secondary-neutral-active: #FFF2CC;
145
- --color-sentiment-interactive-control: #FFD11A;
146
- --color-sentiment-interactive-control-hover: #FFBF0F;
147
- --color-sentiment-interactive-control-active: #FFBB00;
148
- --color-sentiment-background-surface: #FFD11A;
149
- --color-sentiment-background-surface-hover: #FFBF0F;
150
- --color-sentiment-background-surface-active: #FFBB00;
151
- }
152
- .np-theme-personal--dark.wds-sentiment-surface-warning-base,
153
- .np-theme-business--dark.wds-sentiment-surface-warning-base,
154
- .np-theme-personal--forest-green.wds-sentiment-surface-warning-base,
155
- .np-theme-business--forest-green.wds-sentiment-surface-warning-base,
156
- .np-theme-platform--forest-green.wds-sentiment-surface-warning-base {
157
- --color-sentiment-content-primary: #FADC65;
158
- --color-sentiment-content-primary-hover: #F9D648;
159
- --color-sentiment-content-primary-active: #F8CD20;
160
- --color-sentiment-interactive-primary: #FADC65;
161
- --color-sentiment-interactive-primary-hover: #F9D648;
162
- --color-sentiment-interactive-primary-active: #F8CD20;
163
- --color-sentiment-interactive-secondary: #3A3523;
164
- --color-sentiment-interactive-secondary-hover: #504930;
165
- --color-sentiment-interactive-secondary-active: #665D3D;
166
- --color-sentiment-interactive-secondary-neutral: #4D462A;
167
- --color-sentiment-interactive-secondary-neutral-hover: #5D532F;
168
- --color-sentiment-interactive-secondary-neutral-active: #685D33;
169
- --color-sentiment-interactive-control: #3A3523;
170
- --color-sentiment-interactive-control-hover: #504930;
171
- --color-sentiment-interactive-control-active: #665D3D;
172
- --color-sentiment-background-surface: #3A3523;
173
- --color-sentiment-background-surface-hover: #504930;
174
- --color-sentiment-background-surface-active: #665D3D;
175
- }
176
- .np-theme-personal--dark.wds-sentiment-surface-warning-elevated,
177
- .np-theme-business--dark.wds-sentiment-surface-warning-elevated,
178
- .np-theme-personal--forest-green.wds-sentiment-surface-warning-elevated,
179
- .np-theme-business--forest-green.wds-sentiment-surface-warning-elevated,
180
- .np-theme-platform--forest-green.wds-sentiment-surface-warning-elevated {
181
- --color-sentiment-content-primary: #3A3523;
182
- --color-sentiment-content-primary-hover: #504930;
183
- --color-sentiment-content-primary-active: #665D3D;
184
- --color-sentiment-interactive-primary: #3A3523;
185
- --color-sentiment-interactive-primary-hover: #504930;
186
- --color-sentiment-interactive-primary-active: #665D3D;
187
- --color-sentiment-interactive-secondary: #FADC65;
188
- --color-sentiment-interactive-secondary-hover: #F9D648;
189
- --color-sentiment-interactive-secondary-active: #F8CD20;
190
- --color-sentiment-interactive-secondary-neutral: #E3C85D;
191
- --color-sentiment-interactive-secondary-neutral-hover: #DFC044;
192
- --color-sentiment-interactive-secondary-neutral-active: #D9B526;
193
- --color-sentiment-interactive-control: #FADC65;
194
- --color-sentiment-interactive-control-hover: #F9D648;
195
- --color-sentiment-interactive-control-active: #F8CD20;
196
- --color-sentiment-background-surface: #FADC65;
197
- --color-sentiment-background-surface-hover: #F9D648;
198
- --color-sentiment-background-surface-active: #F8CD20;
199
- }
200
- .np-theme-personal.wds-sentiment-surface-success-base,
201
- .np-theme-business.wds-sentiment-surface-success-base,
202
- .np-theme-platform.wds-sentiment-surface-success-base,
203
- .np-theme-personal--bright-green.wds-sentiment-surface-success-base,
204
- .np-theme-business--bright-green.wds-sentiment-surface-success-base {
205
- --color-sentiment-content-primary: #054D28;
206
- --color-sentiment-content-primary-hover: #043A1E;
207
- --color-sentiment-content-primary-active: #022614;
208
- --color-sentiment-interactive-primary: #054D28;
209
- --color-sentiment-interactive-primary-hover: #043A1E;
210
- --color-sentiment-interactive-primary-active: #022614;
211
- --color-sentiment-interactive-secondary: #E2F6D5;
212
- --color-sentiment-interactive-secondary-hover: #D3F2C0;
213
- --color-sentiment-interactive-secondary-active: #C5EDAB;
214
- --color-sentiment-interactive-secondary-neutral: #BCD9B8;
215
- --color-sentiment-interactive-secondary-neutral-hover: #AACFA5;
216
- --color-sentiment-interactive-secondary-neutral-active: #94C38E;
217
- --color-sentiment-interactive-control: #E2F6D5;
218
- --color-sentiment-interactive-control-hover: #D3F2C0;
219
- --color-sentiment-interactive-control-active: #C5EDAB;
220
- --color-sentiment-background-surface: #E2F6D5;
221
- --color-sentiment-background-surface-hover: #D3F2C0;
222
- --color-sentiment-background-surface-active: #C5EDAB;
223
- }
224
- .np-theme-personal.wds-sentiment-surface-success-elevated,
225
- .np-theme-business.wds-sentiment-surface-success-elevated,
226
- .np-theme-platform.wds-sentiment-surface-success-elevated,
227
- .np-theme-personal--bright-green.wds-sentiment-surface-success-elevated,
228
- .np-theme-business--bright-green.wds-sentiment-surface-success-elevated {
229
- --color-sentiment-content-primary: #CEF1B8;
230
- --color-sentiment-content-primary-hover: #E0FFCC;
231
- --color-sentiment-content-primary-active: #E1F4D4;
232
- --color-sentiment-interactive-primary: #CEF1B8;
233
- --color-sentiment-interactive-primary-hover: #E0FFCC;
234
- --color-sentiment-interactive-primary-active: #E1F4D4;
235
- --color-sentiment-interactive-secondary: #054D28;
236
- --color-sentiment-interactive-secondary-hover: #043A1E;
237
- --color-sentiment-interactive-secondary-active: #022614;
238
- --color-sentiment-interactive-secondary-neutral: #256A43;
239
- --color-sentiment-interactive-secondary-neutral-hover: #2A794C;
240
- --color-sentiment-interactive-secondary-neutral-active: #329057;
241
- --color-sentiment-interactive-control: #054D28;
242
- --color-sentiment-interactive-control-hover: #043A1E;
243
- --color-sentiment-interactive-control-active: #022614;
244
- --color-sentiment-background-surface: #054D28;
245
- --color-sentiment-background-surface-hover: #043A1E;
246
- --color-sentiment-background-surface-active: #022614;
247
- }
248
- .np-theme-personal--dark.wds-sentiment-surface-success-base,
249
- .np-theme-business--dark.wds-sentiment-surface-success-base,
250
- .np-theme-personal--forest-green.wds-sentiment-surface-success-base,
251
- .np-theme-business--forest-green.wds-sentiment-surface-success-base,
252
- .np-theme-platform--forest-green.wds-sentiment-surface-success-base {
253
- --color-sentiment-content-primary: #CEF1B8;
254
- --color-sentiment-content-primary-hover: #E0FFCC;
255
- --color-sentiment-content-primary-active: #E1F4D4;
256
- --color-sentiment-interactive-primary: #CEF1B8;
257
- --color-sentiment-interactive-primary-hover: #E0FFCC;
258
- --color-sentiment-interactive-primary-active: #E1F4D4;
259
- --color-sentiment-interactive-secondary: #054D28;
260
- --color-sentiment-interactive-secondary-hover: #043A1E;
261
- --color-sentiment-interactive-secondary-active: #022614;
262
- --color-sentiment-interactive-secondary-neutral: #256A43;
263
- --color-sentiment-interactive-secondary-neutral-hover: #2A794C;
264
- --color-sentiment-interactive-secondary-neutral-active: #329057;
265
- --color-sentiment-interactive-control: #054D28;
266
- --color-sentiment-interactive-control-hover: #043A1E;
267
- --color-sentiment-interactive-control-active: #022614;
268
- --color-sentiment-background-surface: #054D28;
269
- --color-sentiment-background-surface-hover: #043A1E;
270
- --color-sentiment-background-surface-active: #022614;
271
- }
272
- .np-theme-personal--dark.wds-sentiment-surface-success-elevated,
273
- .np-theme-business--dark.wds-sentiment-surface-success-elevated,
274
- .np-theme-personal--forest-green.wds-sentiment-surface-success-elevated,
275
- .np-theme-business--forest-green.wds-sentiment-surface-success-elevated,
276
- .np-theme-platform--forest-green.wds-sentiment-surface-success-elevated {
277
- --color-sentiment-content-primary: #252C20;
278
- --color-sentiment-content-primary-hover: #323B2B;
279
- --color-sentiment-content-primary-active: #3E4A36;
280
- --color-sentiment-interactive-primary: #252C20;
281
- --color-sentiment-interactive-primary-hover: #323B2B;
282
- --color-sentiment-interactive-primary-active: #3E4A36;
283
- --color-sentiment-interactive-secondary: #BAE5A0;
284
- --color-sentiment-interactive-secondary-hover: #C8EAB3;
285
- --color-sentiment-interactive-secondary-active: #D6F0C7;
286
- --color-sentiment-interactive-secondary-neutral: #A8CF91;
287
- --color-sentiment-interactive-secondary-neutral-hover: #94C478;
288
- --color-sentiment-interactive-secondary-neutral-active: #83BB63;
289
- --color-sentiment-interactive-control: #BAE5A0;
290
- --color-sentiment-interactive-control-hover: #C8EAB3;
291
- --color-sentiment-interactive-control-active: #D6F0C7;
292
- --color-sentiment-background-surface: #BAE5A0;
293
- --color-sentiment-background-surface-hover: #C8EAB3;
294
- --color-sentiment-background-surface-active: #D6F0C7;
295
- }
296
- .np-theme-personal.wds-sentiment-surface-neutral-base,
297
- .np-theme-business.wds-sentiment-surface-neutral-base,
298
- .np-theme-platform.wds-sentiment-surface-neutral-base,
299
- .np-theme-personal--bright-green.wds-sentiment-surface-neutral-base,
300
- .np-theme-business--bright-green.wds-sentiment-surface-neutral-base {
301
- --color-sentiment-content-primary: #454745;
302
- --color-sentiment-content-primary-hover: #353635;
303
- --color-sentiment-content-primary-active: #232423;
304
- --color-sentiment-interactive-primary: #454745;
305
- --color-sentiment-interactive-primary-hover: #353635;
306
- --color-sentiment-interactive-primary-active: #232423;
307
- --color-sentiment-interactive-secondary: rgba(62, 59, 7, 0.07);
308
- --color-sentiment-interactive-secondary-hover: rgba(62, 59, 7, 0.12);
309
- --color-sentiment-interactive-secondary-active: rgba(62, 59, 7, 0.17);
310
- --color-sentiment-interactive-secondary-neutral: rgba(62, 59, 7, 0.07);
311
- --color-sentiment-interactive-secondary-neutral-hover: rgba(62, 59, 7, 0.12);
312
- --color-sentiment-interactive-secondary-neutral-active: rgba(62, 59, 7, 0.17);
313
- --color-sentiment-interactive-control: #F1F1ED;
314
- --color-sentiment-interactive-control-hover: #E7E7E1;
315
- --color-sentiment-interactive-control-active: #DFDED5;
316
- --color-sentiment-background-surface: rgba(62, 59, 7, 0.07);
317
- --color-sentiment-background-surface-hover: rgba(62, 59, 7, 0.12);
318
- --color-sentiment-background-surface-active: rgba(62, 59, 7, 0.17);
319
- }
320
- .np-theme-personal.wds-sentiment-surface-neutral-elevated,
321
- .np-theme-business.wds-sentiment-surface-neutral-elevated,
322
- .np-theme-platform.wds-sentiment-surface-neutral-elevated,
323
- .np-theme-personal--bright-green.wds-sentiment-surface-neutral-elevated,
324
- .np-theme-business--bright-green.wds-sentiment-surface-neutral-elevated {
325
- --color-sentiment-content-primary: #F1F1ED;
326
- --color-sentiment-content-primary-hover: #E7E7E1;
327
- --color-sentiment-content-primary-active: #DFDED5;
328
- --color-sentiment-interactive-primary: #F1F1ED;
329
- --color-sentiment-interactive-primary-hover: #E7E7E1;
330
- --color-sentiment-interactive-primary-active: #DFDED5;
331
- --color-sentiment-interactive-secondary: #454745;
332
- --color-sentiment-interactive-secondary-hover: #353635;
333
- --color-sentiment-interactive-secondary-active: #232423;
334
- --color-sentiment-interactive-secondary-neutral: #585958;
335
- --color-sentiment-interactive-secondary-neutral-hover: #6A6C6A;
336
- --color-sentiment-interactive-secondary-neutral-active: #7D7E7D;
337
- --color-sentiment-interactive-control: #454745;
338
- --color-sentiment-interactive-control-hover: #353635;
339
- --color-sentiment-interactive-control-active: #232423;
340
- --color-sentiment-background-surface: #454745;
341
- --color-sentiment-background-surface-hover: #353635;
342
- --color-sentiment-background-surface-active: #232423;
343
- }
344
- .np-theme-personal--dark.wds-sentiment-surface-neutral-base,
345
- .np-theme-business--dark.wds-sentiment-surface-neutral-base,
346
- .np-theme-personal--forest-green.wds-sentiment-surface-neutral-base,
347
- .np-theme-business--forest-green.wds-sentiment-surface-neutral-base,
348
- .np-theme-platform--forest-green.wds-sentiment-surface-neutral-base {
349
- --color-sentiment-content-primary: #F1F1ED;
350
- --color-sentiment-content-primary-hover: #E7E7E1;
351
- --color-sentiment-content-primary-active: #DFDED5;
352
- --color-sentiment-interactive-primary: #F1F1ED;
353
- --color-sentiment-interactive-primary-hover: #E7E7E1;
354
- --color-sentiment-interactive-primary-active: #DFDED5;
355
- --color-sentiment-interactive-secondary: rgba(255, 255, 255, 0.1);
356
- --color-sentiment-interactive-secondary-hover: rgba(255, 255, 255, 0.2);
357
- --color-sentiment-interactive-secondary-active: rgba(255, 255, 255, 0.3);
358
- --color-sentiment-interactive-secondary-neutral: rgba(255, 255, 255, 0.1);
359
- --color-sentiment-interactive-secondary-neutral-hover: rgba(255, 255, 255, 0.2);
360
- --color-sentiment-interactive-secondary-neutral-active: rgba(255, 255, 255, 0.3);
361
- --color-sentiment-interactive-control: #2A2C29;
362
- --color-sentiment-interactive-control-hover: #414441;
363
- --color-sentiment-interactive-control-active: #595B58;
364
- --color-sentiment-background-surface: rgba(255, 255, 255, 0.1);
365
- --color-sentiment-background-surface-hover: rgba(255, 255, 255, 0.2);
366
- --color-sentiment-background-surface-active: rgba(255, 255, 255, 0.3);
367
- }
368
- .np-theme-personal--dark.wds-sentiment-surface-neutral-elevated,
369
- .np-theme-business--dark.wds-sentiment-surface-neutral-elevated,
370
- .np-theme-personal--forest-green.wds-sentiment-surface-neutral-elevated,
371
- .np-theme-business--forest-green.wds-sentiment-surface-neutral-elevated,
372
- .np-theme-platform--forest-green.wds-sentiment-surface-neutral-elevated {
373
- --color-sentiment-content-primary: #2A2C29;
374
- --color-sentiment-content-primary-hover: #414441;
375
- --color-sentiment-content-primary-active: #595B58;
376
- --color-sentiment-interactive-primary: #2A2C29;
377
- --color-sentiment-interactive-primary-hover: #414441;
378
- --color-sentiment-interactive-primary-active: #595B58;
379
- --color-sentiment-interactive-secondary: #F1F1ED;
380
- --color-sentiment-interactive-secondary-hover: #E7E7E1;
381
- --color-sentiment-interactive-secondary-active: #DFDED5;
382
- --color-sentiment-interactive-secondary-neutral: #E4E4DC;
383
- --color-sentiment-interactive-secondary-neutral-hover: #DCDCD2;
384
- --color-sentiment-interactive-secondary-neutral-active: #D3D2C6;
385
- --color-sentiment-interactive-control: #F1F1ED;
386
- --color-sentiment-interactive-control-hover: #E7E7E1;
387
- --color-sentiment-interactive-control-active: #DFDED5;
388
- --color-sentiment-background-surface: #F1F1ED;
389
- --color-sentiment-background-surface-hover: #E7E7E1;
390
- --color-sentiment-background-surface-active: #DFDED5;
391
- }
392
- .np-theme-personal.wds-sentiment-surface-proposition-base,
393
- .np-theme-business.wds-sentiment-surface-proposition-base,
394
- .np-theme-platform.wds-sentiment-surface-proposition-base,
395
- .np-theme-personal--bright-green.wds-sentiment-surface-proposition-base,
396
- .np-theme-business--bright-green.wds-sentiment-surface-proposition-base {
397
- --color-sentiment-content-primary: #0E0F0C;
398
- --color-sentiment-content-primary-hover: #0A2826;
399
- --color-sentiment-content-primary-active: #074140;
400
- --color-sentiment-interactive-primary: #054D4D;
401
- --color-sentiment-interactive-primary-hover: #043A3A;
402
- --color-sentiment-interactive-primary-active: #022626;
403
- --color-sentiment-interactive-secondary: #E0F7F7;
404
- --color-sentiment-interactive-secondary-hover: #CAF1F1;
405
- --color-sentiment-interactive-secondary-active: #B6ECEC;
406
- --color-sentiment-interactive-secondary-neutral: #B4D5D5;
407
- --color-sentiment-interactive-secondary-neutral-hover: #A3CCCC;
408
- --color-sentiment-interactive-secondary-neutral-active: #9AC6C6;
409
- --color-sentiment-interactive-control: #E0F7F7;
410
- --color-sentiment-interactive-control-hover: #CAF1F1;
411
- --color-sentiment-interactive-control-active: #B6ECEC;
412
- --color-sentiment-background-surface: #E0F7F7;
413
- --color-sentiment-background-surface-hover: #CAF1F1;
414
- --color-sentiment-background-surface-active: #B6ECEC;
415
- }
416
- .np-theme-personal.wds-sentiment-surface-proposition-elevated,
417
- .np-theme-business.wds-sentiment-surface-proposition-elevated,
418
- .np-theme-platform.wds-sentiment-surface-proposition-elevated,
419
- .np-theme-personal--bright-green.wds-sentiment-surface-proposition-elevated,
420
- .np-theme-business--bright-green.wds-sentiment-surface-proposition-elevated {
421
- --color-sentiment-content-primary: #FFFFFF;
422
- --color-sentiment-content-primary-hover: #EAF9F9;
423
- --color-sentiment-content-primary-active: #D5F4F4;
424
- --color-sentiment-interactive-primary: #E0F7F7;
425
- --color-sentiment-interactive-primary-hover: #CAF1F1;
426
- --color-sentiment-interactive-primary-active: #B6ECEC;
427
- --color-sentiment-interactive-secondary: #054D4D;
428
- --color-sentiment-interactive-secondary-hover: #043A3A;
429
- --color-sentiment-interactive-secondary-active: #022626;
430
- --color-sentiment-interactive-secondary-neutral: #1F6161;
431
- --color-sentiment-interactive-secondary-neutral-hover: #247070;
432
- --color-sentiment-interactive-secondary-neutral-active: #298080;
433
- --color-sentiment-interactive-control: #054D4D;
434
- --color-sentiment-interactive-control-hover: #043A3A;
435
- --color-sentiment-interactive-control-active: #022626;
436
- --color-sentiment-background-surface: #054D4D;
437
- --color-sentiment-background-surface-hover: #043A3A;
438
- --color-sentiment-background-surface-active: #022626;
439
- }
440
- .np-theme-personal--dark.wds-sentiment-surface-proposition-base,
441
- .np-theme-business--dark.wds-sentiment-surface-proposition-base,
442
- .np-theme-personal--forest-green.wds-sentiment-surface-proposition-base,
443
- .np-theme-business--forest-green.wds-sentiment-surface-proposition-base,
444
- .np-theme-platform--forest-green.wds-sentiment-surface-proposition-base {
445
- --color-sentiment-content-primary: #FFFFFF;
446
- --color-sentiment-content-primary-hover: #EAF9F9;
447
- --color-sentiment-content-primary-active: #D5F4F4;
448
- --color-sentiment-interactive-primary: #E0F7F7;
449
- --color-sentiment-interactive-primary-hover: #CAF1F1;
450
- --color-sentiment-interactive-primary-active: #B6ECEC;
451
- --color-sentiment-interactive-secondary: #054D4D;
452
- --color-sentiment-interactive-secondary-hover: #043A3A;
453
- --color-sentiment-interactive-secondary-active: #022626;
454
- --color-sentiment-interactive-secondary-neutral: #1F6161;
455
- --color-sentiment-interactive-secondary-neutral-hover: #247070;
456
- --color-sentiment-interactive-secondary-neutral-active: #298080;
457
- --color-sentiment-interactive-control: #054D4D;
458
- --color-sentiment-interactive-control-hover: #043A3A;
459
- --color-sentiment-interactive-control-active: #022626;
460
- --color-sentiment-background-surface: #054D4D;
461
- --color-sentiment-background-surface-hover: #043A3A;
462
- --color-sentiment-background-surface-active: #022626;
463
- }
464
- .np-theme-personal--dark.wds-sentiment-surface-proposition-elevated,
465
- .np-theme-business--dark.wds-sentiment-surface-proposition-elevated,
466
- .np-theme-personal--forest-green.wds-sentiment-surface-proposition-elevated,
467
- .np-theme-business--forest-green.wds-sentiment-surface-proposition-elevated,
468
- .np-theme-platform--forest-green.wds-sentiment-surface-proposition-elevated {
469
- --color-sentiment-content-primary: #0E0F0C;
470
- --color-sentiment-content-primary-hover: #0A2826;
471
- --color-sentiment-content-primary-active: #074140;
472
- --color-sentiment-interactive-primary: #0B312F;
473
- --color-sentiment-interactive-primary-hover: #104744;
474
- --color-sentiment-interactive-primary-active: #16605C;
475
- --color-sentiment-interactive-secondary: #E0F7F7;
476
- --color-sentiment-interactive-secondary-hover: #CAF1F1;
477
- --color-sentiment-interactive-secondary-active: #B6ECEC;
478
- --color-sentiment-interactive-secondary-neutral: #B4D5D5;
479
- --color-sentiment-interactive-secondary-neutral-hover: #A3CCCC;
480
- --color-sentiment-interactive-secondary-neutral-active: #9AC6C6;
481
- --color-sentiment-interactive-control: #E0F7F7;
482
- --color-sentiment-interactive-control-hover: #CAF1F1;
483
- --color-sentiment-interactive-control-active: #B6ECEC;
484
- --color-sentiment-background-surface: #E0F7F7;
485
- --color-sentiment-background-surface-hover: #CAF1F1;
486
- --color-sentiment-background-surface-active: #B6ECEC;
487
- }
package/src/slidingPanel/SlidingPanel.css DELETED
@@ -1,105 +0,0 @@
1
- .sliding-panel {
2
- transform: translateX(-100%) ;
3
- transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
4
- background: #ffffff;
5
- background: var(--color-background-elevated);
6
- z-index: 1030;
7
- position: absolute;
8
- }
9
- [dir="rtl"] .sliding-panel {
10
- transform: translateX(100%) ;
11
- }
12
- .sliding-panel.sliding-panel--fixed {
13
- position: fixed;
14
- }
15
- .sliding-panel.sliding-panel--open-right,
16
- .sliding-panel.sliding-panel--open-left {
17
- top: 0;
18
- bottom: 0;
19
- }
20
- .sliding-panel.sliding-panel--open-right {
21
- transform: translateX(100%) ;
22
- right: 0;
23
- }
24
- [dir="rtl"] .sliding-panel.sliding-panel--open-right {
25
- transform: translateX(-100%) ;
26
- }
27
- [dir="rtl"] .sliding-panel.sliding-panel--open-right {
28
- left: 0;
29
- right: auto;
30
- right: initial;
31
- }
32
- .sliding-panel.sliding-panel--open-left {
33
- transform: translateX(-100%) ;
34
- left: 0;
35
- }
36
- [dir="rtl"] .sliding-panel.sliding-panel--open-left {
37
- transform: translateX(100%) ;
38
- }
39
- [dir="rtl"] .sliding-panel.sliding-panel--open-left {
40
- right: 0;
41
- left: auto;
42
- left: initial;
43
- }
44
- .sliding-panel.sliding-panel-enter-done.sliding-panel--open-right,
45
- .sliding-panel.sliding-panel-enter-done.sliding-panel--open-left {
46
- transform: translateX(0);
47
- }
48
- .sliding-panel.sliding-panel-enter-done.sliding-panel--open-top,
49
- .sliding-panel.sliding-panel-enter-done.sliding-panel--open-bottom {
50
- transform: translateY(0);
51
- }
52
- .sliding-panel.sliding-panel--open-top,
53
- .sliding-panel.sliding-panel--open-bottom {
54
- right: 0;
55
- left: 0;
56
- width: 100%;
57
- }
58
- [dir="rtl"] .sliding-panel.sliding-panel--open-top,
59
- [dir="rtl"] .sliding-panel.sliding-panel--open-bottom {
60
- left: 0;
61
- right: auto;
62
- right: initial;
63
- }
64
- [dir="rtl"] .sliding-panel.sliding-panel--open-top,
65
- [dir="rtl"] .sliding-panel.sliding-panel--open-bottom {
66
- right: 0;
67
- left: auto;
68
- left: initial;
69
- }
70
- .sliding-panel.sliding-panel--open-top {
71
- transform: translateY(-100%);
72
- top: 0;
73
- }
74
- .sliding-panel.sliding-panel--open-bottom {
75
- transform: translateY(100%);
76
- bottom: 0;
77
- }
78
- .sliding-panel.sliding-panel--border-top {
79
- box-shadow: inset 0 -1px 0 0 #e2e6e8;
80
- }
81
- .sliding-panel.sliding-panel--border-right {
82
- box-shadow: inset 1px 0 0 0 #e2e6e8;
83
- }
84
- .sliding-panel.sliding-panel--border-bottom {
85
- box-shadow: inset 0 1px 0 0 #e2e6e8;
86
- }
87
- .sliding-panel.sliding-panel--border-left {
88
- box-shadow: inset -1px 0 0 0 #e2e6e8;
89
- }
90
- .np-theme-personal .sliding-panel.sliding-panel--border-top {
91
- box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.10196);
92
- box-shadow: inset 0 -1px 0 0 var(--color-border-neutral);
93
- }
94
- .np-theme-personal .sliding-panel.sliding-panel--border-right {
95
- box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
96
- box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
97
- }
98
- .np-theme-personal .sliding-panel.sliding-panel--border-bottom {
99
- box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.10196);
100
- box-shadow: inset 0 1px 0 0 var(--color-border-neutral);
101
- }
102
- .np-theme-personal .sliding-panel.sliding-panel--border-left {
103
- box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
104
- box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
105
- }
package/src/snackbar/Snackbar.css DELETED
@@ -1,93 +0,0 @@
1
- .snackbar {
2
- text-align: center;
3
- position: fixed;
4
- bottom: 0;
5
- left: 0;
6
- right: 0;
7
- z-index: 1060;
8
- }
9
- [dir="rtl"] .snackbar {
10
- right: 0;
11
- left: auto;
12
- left: initial;
13
- }
14
- [dir="rtl"] .snackbar {
15
- left: 0;
16
- right: 0;
17
- }
18
- .snackbar__text {
19
- background: #37517e;
20
- color: #ffffff;
21
- display: inline-flex;
22
- border-radius: 2px;
23
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
24
- align-items: center;
25
- justify-content: space-between;
26
- text-align: left;
27
- font-size: 0.875rem;
28
- font-size: var(--font-size-14);
29
- margin: 0 16px;
30
- margin: 0 var(--size-16);
31
- padding: 8px 16px;
32
- padding: var(--size-8) var(--size-16);
33
- width: calc(100% - 32px);
34
- width: calc(100% - var(--size-32));
35
- transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
36
- }
37
- [dir="rtl"] .snackbar__text {
38
- text-align: right;
39
- }
40
- .np-theme-personal .snackbar__text {
41
- box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
42
- position: relative;
43
- background: var(--color-contrast-theme);
44
- border-radius: 10px;
45
- border-radius: var(--radius-small);
46
- color: var(--color-contrast-overlay);
47
- }
48
- .np-theme-personal .snackbar__text::after {
49
- display: block;
50
- border-radius: inherit;
51
- height: 100%;
52
- width: 100%;
53
- content: "";
54
- position: absolute;
55
- left: 0;
56
- top: 0;
57
- z-index: -1;
58
- background-color: rgba(134,167,189,0.10196);
59
- background-color: var(--color-background-neutral);
60
- }
61
- .np-theme-personal--dark .snackbar__text,
62
- .np-theme-personal--forest-green .snackbar__text {
63
- box-shadow: none;
64
- }
65
- @media (min-width: 600px) {
66
- .snackbar__text {
67
- width: auto;
68
- max-width: 600px;
69
- }
70
- }
71
- .snackbar__text__action {
72
- flex-shrink: 0;
73
- margin-left: 16px;
74
- margin-left: var(--size-16);
75
- }
76
- [dir="rtl"] .snackbar__text__action {
77
- margin-right: 16px;
78
- margin-right: var(--size-16);
79
- margin-left: 0;
80
- }
81
- .snackbar__text-container-enter,
82
- .snackbar__text-container-exit {
83
- transform: translateY(calc(100% + 10px));
84
- }
85
- .snackbar__text-container-enter-active {
86
- transform: translateY(-16px);
87
- transform: translateY(calc(-16px - env(safe-area-inset-bottom)));
88
- }
89
- @media (min-width: 600px) {
90
- .snackbar__text-container-enter-active {
91
- transform: translateY(-24px);
92
- }
93
- }