@transferwise/components 0.0.0-experimental-aa49e22 → 0.0.0-experimental-0eb6058

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 (342) hide show
  1. package/build/alert/Alert.js +4 -1
  2. package/build/alert/Alert.js.map +1 -1
  3. package/build/alert/Alert.mjs +4 -1
  4. package/build/alert/Alert.mjs.map +1 -1
  5. package/build/criticalBanner/CriticalCommsBanner.js +6 -4
  6. package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
  7. package/build/criticalBanner/CriticalCommsBanner.mjs +6 -4
  8. package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
  9. package/build/main.css +16 -27001
  10. package/build/styles/criticalBanner/CriticalCommsBanner.css +9 -0
  11. package/build/styles/main.css +16 -27001
  12. package/build/types/alert/Alert.d.ts +2 -0
  13. package/build/types/alert/Alert.d.ts.map +1 -1
  14. package/build/types/criticalBanner/CriticalCommsBanner.d.ts +1 -0
  15. package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
  16. package/package.json +4 -4
  17. package/src/accordion/Accordion.css +74 -0
  18. package/src/accordion/Accordion.less +3 -3
  19. package/src/actionButton/ActionButton.css +64 -0
  20. package/src/actionButton/ActionButton.less +1 -1
  21. package/src/actionOption/ActionOption.css +4 -0
  22. package/src/alert/Alert.css +7 -0
  23. package/src/alert/Alert.tsx +6 -1
  24. package/src/avatar/Avatar.css +250 -0
  25. package/src/avatar/Avatar.less +3 -3
  26. package/src/avatarLayout/AvatarLayout.css +42 -0
  27. package/src/avatarView/AvatarView.css +44 -0
  28. package/src/avatarView/Dot.css +26 -0
  29. package/src/badge/Badge.css +65 -0
  30. package/src/badge/Badge.less +1 -1
  31. package/src/body/Body.css +3 -0
  32. package/src/button/Button.css +246 -0
  33. package/src/button/Button.vars.css +46 -0
  34. package/src/button/LegacyButton.css +23 -0
  35. package/src/button/LegacyButton.less +1 -1
  36. package/src/card/Card.css +100 -0
  37. package/src/card/Card.less +3 -3
  38. package/src/carousel/Carousel.css +134 -0
  39. package/src/checkboxButton/CheckboxButton.css +43 -0
  40. package/src/checkboxButton/CheckboxButton.less +2 -2
  41. package/src/chips/Chip.css +190 -0
  42. package/src/chips/Chip.less +3 -3
  43. package/src/circularButton/CircularButton.css +34 -0
  44. package/src/common/Option/Option.css +122 -0
  45. package/src/common/Option/Option.less +2 -2
  46. package/src/common/RadioButton/RadioButton.css +4 -0
  47. package/src/common/baseCard/BaseCard.css +49 -0
  48. package/src/common/bottomSheet/BottomSheet.css +53 -0
  49. package/src/common/bottomSheet/BottomSheet.less +1 -1
  50. package/src/common/circle/Circle.css +43 -0
  51. package/src/common/closeButton/CloseButton.css +94 -0
  52. package/src/common/closeButton/CloseButton.less +1 -1
  53. package/src/common/panel/Panel.css +73 -0
  54. package/src/common/panel/Panel.less +1 -1
  55. package/src/criticalBanner/CriticalCommsBanner.css +63 -0
  56. package/src/criticalBanner/CriticalCommsBanner.less +13 -0
  57. package/src/criticalBanner/CriticalCommsBanner.test.story.tsx +15 -0
  58. package/src/criticalBanner/CriticalCommsBanner.test.tsx +28 -2
  59. package/src/criticalBanner/CriticalCommsBanner.tsx +10 -1
  60. package/src/dateInput/DateInput.css +16 -0
  61. package/src/dateLookup/DateLookup.css +93 -0
  62. package/src/dateLookup/DateLookup.less +1 -1
  63. package/src/dateLookup/dateTrigger/DateTrigger.css +29 -0
  64. package/src/dateLookup/dateTrigger/DateTrigger.less +2 -2
  65. package/src/decision/Decision.css +17 -0
  66. package/src/decision/Decision.less +1 -1
  67. package/src/definitionList/DefinitionList.css +53 -0
  68. package/src/definitionList/DefinitionList.less +1 -1
  69. package/src/dimmer/Dimmer.css +70 -0
  70. package/src/dimmer/Dimmer.less +2 -2
  71. package/src/divider/Divider.css +24 -0
  72. package/src/drawer/Drawer.css +56 -0
  73. package/src/dropFade/DropFade.css +19 -0
  74. package/src/emphasis/Emphasis.css +31 -0
  75. package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +58 -0
  76. package/src/expressiveMoneyInput/amountInput/AmountInput.css +32 -0
  77. package/src/expressiveMoneyInput/chevron/Chevron.css +12 -0
  78. package/src/expressiveMoneyInput/currencySelector/CurrencySelector.css +6 -0
  79. package/src/field/Field.css +13 -0
  80. package/src/flowNavigation/FlowNavigation.css +76 -0
  81. package/src/flowNavigation/FlowNavigation.less +1 -1
  82. package/src/flowNavigation/animatedLabel/AnimatedLabel.css +30 -0
  83. package/src/flowNavigation/animatedLabel/AnimatedLabel.less +2 -2
  84. package/src/header/Header.css +33 -0
  85. package/src/iconButton/IconButton.css +82 -0
  86. package/src/image/Image.css +13 -0
  87. package/src/info/Info.css +9 -0
  88. package/src/info/Info.less +1 -1
  89. package/src/inputs/Input.css +158 -0
  90. package/src/inputs/InputGroup.css +63 -0
  91. package/src/inputs/SelectInput.css +380 -0
  92. package/src/inputs/SelectInput.less +1 -1
  93. package/src/inputs/TextArea.css +161 -0
  94. package/src/inputs/_common.less +1 -1
  95. package/src/instructionsList/InstructionsList.css +26 -0
  96. package/src/legacylistItem/LegacyListItem.css +6 -0
  97. package/src/link/Link.css +24 -0
  98. package/src/link/Link.less +2 -2
  99. package/src/listItem/ListItem.css +659 -0
  100. package/src/listItem/ListItem.grid.css +384 -0
  101. package/src/listItem/ListItem.less +1 -1
  102. package/src/listItem/Prompt/ListItemPrompt.css +4 -0
  103. package/src/loader/Loader.css +227 -0
  104. package/src/logo/Logo.css +26 -0
  105. package/src/main.css +7529 -0
  106. package/src/main.less +0 -2
  107. package/src/modal/Modal.css +95 -0
  108. package/src/moneyInput/MoneyInput.css +74 -0
  109. package/src/moneyInput/MoneyInput.less +2 -2
  110. package/src/navigationOption/NavigationOption.css +69 -0
  111. package/src/navigationOption/NavigationOption.less +3 -3
  112. package/src/navigationOptionsList/NavigationOptionsList.css +13 -0
  113. package/src/navigationOptionsList/NavigationOptionsList.less +1 -1
  114. package/src/nudge/Nudge.css +206 -0
  115. package/src/overlayHeader/OverlayHeader.css +15 -0
  116. package/src/overlayHeader/OverlayHeader.less +1 -1
  117. package/src/phoneNumberInput/PhoneNumberInput.css +23 -0
  118. package/src/phoneNumberInput/PhoneNumberInput.less +1 -1
  119. package/src/popover/Popover.css +76 -0
  120. package/src/popover/Popover.less +1 -1
  121. package/src/progress/Progress.css +43 -0
  122. package/src/progressBar/ProgressBar.css +14 -0
  123. package/src/promoCard/PromoCard.css +186 -0
  124. package/src/prompt/ActionPrompt/ActionPrompt.css +25 -0
  125. package/src/prompt/InfoPrompt/InfoPrompt.css +33 -0
  126. package/src/prompt/InlinePrompt/InlinePrompt.css +57 -0
  127. package/src/prompt/PrimitivePrompt/PrimitivePrompt.css +51 -0
  128. package/src/radioGroup/RadioGroup.css +3 -0
  129. package/src/section/Section.css +10 -0
  130. package/src/segmentedControl/SegmentedControl.css +101 -0
  131. package/src/select/Select.css +368 -0
  132. package/src/select/Select.less +5 -5
  133. package/src/sentimentSurface/SentimentSurface.css +487 -0
  134. package/src/slidingPanel/SlidingPanel.css +105 -0
  135. package/src/slidingPanel/SlidingPanel.less +2 -2
  136. package/src/snackbar/Snackbar.css +93 -0
  137. package/src/snackbar/Snackbar.less +3 -3
  138. package/src/statusIcon/StatusIcon.css +6 -0
  139. package/src/stepper/Stepper.css +77 -0
  140. package/src/stepper/Stepper.less +3 -3
  141. package/src/summary/Summary.css +81 -0
  142. package/src/summary/Summary.less +1 -1
  143. package/src/switch/Switch.css +63 -0
  144. package/src/switch/Switch.less +4 -4
  145. package/src/switchOption/SwitchOption.css +4 -0
  146. package/src/table/Table.css +274 -0
  147. package/src/table/Table.less +1 -1
  148. package/src/tabs/Tabs.css +121 -0
  149. package/src/tabs/Tabs.less +4 -4
  150. package/src/tile/Tile.css +68 -0
  151. package/src/tile/Tile.less +1 -1
  152. package/src/tooltip/Tooltip.css +50 -0
  153. package/src/tooltip/Tooltip.less +1 -1
  154. package/src/typeahead/Typeahead.css +187 -0
  155. package/src/typeahead/Typeahead.less +2 -2
  156. package/src/typeahead/typeaheadOption/TypeaheadOption.css +9 -0
  157. package/src/typeahead/typeaheadOption/TypeaheadOption.less +1 -1
  158. package/src/upload/Upload.css +34 -0
  159. package/src/upload/Upload.less +1 -1
  160. package/src/uploadInput/UploadInput.css +18 -0
  161. package/src/uploadInput/UploadInput.less +2 -2
  162. package/src/uploadInput/uploadButton/UploadButton.css +90 -0
  163. package/src/uploadInput/uploadItem/UploadItem.css +166 -0
  164. package/src/uploadInput/uploadItem/UploadItem.less +1 -1
  165. package/build/neptune-css/fonts/TW-Averta-Bold.woff +0 -0
  166. package/build/neptune-css/fonts/TW-Averta-Bold.woff2 +0 -0
  167. package/build/neptune-css/fonts/TW-Averta-Regular.woff +0 -0
  168. package/build/neptune-css/fonts/TW-Averta-Regular.woff2 +0 -0
  169. package/build/neptune-css/fonts/TW-Averta-Semibold.woff +0 -0
  170. package/build/neptune-css/fonts/TW-Averta-Semibold.woff2 +0 -0
  171. package/build/neptune-css/fonts/TransferWise-IconFont.svg +0 -81
  172. package/build/neptune-css/fonts/TransferWise-IconFont.woff +0 -0
  173. package/build/neptune-css/fonts/WiseSans-Heavy.woff2 +0 -0
  174. package/build/neptune-css/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  175. package/build/neptune-css/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  176. package/build/neptune-css/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  177. package/build/neptune-css/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  178. package/build/neptune-css/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  179. package/build/neptune-css/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  180. package/build/neptune-css/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  181. package/build/neptune-css/img/bg-dark.svg +0 -31
  182. package/build/neptune-css/img/bg-light.svg +0 -26
  183. package/build/styles/neptune-css/less/accordion.css +0 -255
  184. package/build/styles/neptune-css/less/alerts.css +0 -751
  185. package/build/styles/neptune-css/less/background.css +0 -20
  186. package/build/styles/neptune-css/less/badge.css +0 -90
  187. package/build/styles/neptune-css/less/border-radius.css +0 -3
  188. package/build/styles/neptune-css/less/breadcrumbs.css +0 -20
  189. package/build/styles/neptune-css/less/button-groups.css +0 -495
  190. package/build/styles/neptune-css/less/buttons.css +0 -1390
  191. package/build/styles/neptune-css/less/chevron.css +0 -35
  192. package/build/styles/neptune-css/less/circles.css +0 -248
  193. package/build/styles/neptune-css/less/close.css +0 -47
  194. package/build/styles/neptune-css/less/column-layout.css +0 -164
  195. package/build/styles/neptune-css/less/core/viewport-themes.css +0 -59
  196. package/build/styles/neptune-css/less/currency-flags.css +0 -46
  197. package/build/styles/neptune-css/less/decision.css +0 -136
  198. package/build/styles/neptune-css/less/dropdowns.css +0 -472
  199. package/build/styles/neptune-css/less/droppable.css +0 -221
  200. package/build/styles/neptune-css/less/flex.css +0 -598
  201. package/build/styles/neptune-css/less/footer.css +0 -129
  202. package/build/styles/neptune-css/less/forms/bootstrap-forms.css +0 -2277
  203. package/build/styles/neptune-css/less/forms/checkbox-radio.css +0 -367
  204. package/build/styles/neptune-css/less/grid.css +0 -2369
  205. package/build/styles/neptune-css/less/input-groups.css +0 -2740
  206. package/build/styles/neptune-css/less/link-callout.css +0 -20
  207. package/build/styles/neptune-css/less/list-group.css +0 -350
  208. package/build/styles/neptune-css/less/loaders.css +0 -76
  209. package/build/styles/neptune-css/less/media.css +0 -74
  210. package/build/styles/neptune-css/less/modals.css +0 -185
  211. package/build/styles/neptune-css/less/navbar.css +0 -2406
  212. package/build/styles/neptune-css/less/navs.css +0 -296
  213. package/build/styles/neptune-css/less/neptune-addons.css +0 -1857
  214. package/build/styles/neptune-css/less/neptune-core.css +0 -2049
  215. package/build/styles/neptune-css/less/neptune-social-media.css +0 -144
  216. package/build/styles/neptune-css/less/neptune.css +0 -25724
  217. package/build/styles/neptune-css/less/panels.css +0 -528
  218. package/build/styles/neptune-css/less/popovers.css +0 -661
  219. package/build/styles/neptune-css/less/process.css +0 -483
  220. package/build/styles/neptune-css/less/progress-bars.css +0 -64
  221. package/build/styles/neptune-css/less/ring.css +0 -55
  222. package/build/styles/neptune-css/less/select.css +0 -99
  223. package/build/styles/neptune-css/less/sequences.css +0 -855
  224. package/build/styles/neptune-css/less/table.css +0 -446
  225. package/build/styles/neptune-css/less/tick.css +0 -32
  226. package/build/styles/neptune-css/less/tooltip.css +0 -160
  227. package/build/styles/neptune-css/less/utilities.css +0 -145
  228. package/build/styles/neptune-css/less/wells.css +0 -74
  229. package/build/styles/neptune-css/props/custom-media.css +0 -11
  230. package/build/styles/neptune-css/props/legacy-custom-props.css +0 -69
  231. package/build/styles/neptune-css/props/neptune-tokens.css +0 -11
  232. package/build/styles/neptune-css/variables/neptune-tokens.css +0 -0
  233. package/build/styles/neptune-css/variables/zindex.css +0 -0
  234. package/src/neptune-css/fonts/TW-Averta-Bold.woff +0 -0
  235. package/src/neptune-css/fonts/TW-Averta-Bold.woff2 +0 -0
  236. package/src/neptune-css/fonts/TW-Averta-Regular.woff +0 -0
  237. package/src/neptune-css/fonts/TW-Averta-Regular.woff2 +0 -0
  238. package/src/neptune-css/fonts/TW-Averta-Semibold.woff +0 -0
  239. package/src/neptune-css/fonts/TW-Averta-Semibold.woff2 +0 -0
  240. package/src/neptune-css/fonts/TransferWise-IconFont.svg +0 -81
  241. package/src/neptune-css/fonts/TransferWise-IconFont.woff +0 -0
  242. package/src/neptune-css/fonts/WiseSans-Heavy.woff2 +0 -0
  243. package/src/neptune-css/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  244. package/src/neptune-css/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  245. package/src/neptune-css/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  246. package/src/neptune-css/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  247. package/src/neptune-css/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  248. package/src/neptune-css/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  249. package/src/neptune-css/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  250. package/src/neptune-css/img/bg-dark.svg +0 -31
  251. package/src/neptune-css/img/bg-light.svg +0 -26
  252. package/src/neptune-css/less/accordion.less +0 -15
  253. package/src/neptune-css/less/addons/_background-utilities.less +0 -82
  254. package/src/neptune-css/less/addons/_border.less +0 -3
  255. package/src/neptune-css/less/addons/_display-utilities.less +0 -159
  256. package/src/neptune-css/less/addons/_spacing-utilities.less +0 -73
  257. package/src/neptune-css/less/addons/_utilities.less +0 -147
  258. package/src/neptune-css/less/alerts.less +0 -252
  259. package/src/neptune-css/less/background.less +0 -24
  260. package/src/neptune-css/less/badge.less +0 -85
  261. package/src/neptune-css/less/border-radius.less +0 -3
  262. package/src/neptune-css/less/breadcrumbs.less +0 -27
  263. package/src/neptune-css/less/button-groups.less +0 -424
  264. package/src/neptune-css/less/buttons.less +0 -738
  265. package/src/neptune-css/less/chevron.less +0 -39
  266. package/src/neptune-css/less/circles.less +0 -233
  267. package/src/neptune-css/less/close.less +0 -48
  268. package/src/neptune-css/less/column-layout.less +0 -167
  269. package/src/neptune-css/less/components/_component-animations.less +0 -43
  270. package/src/neptune-css/less/core/_fonts.less +0 -97
  271. package/src/neptune-css/less/core/_scaffolding.less +0 -380
  272. package/src/neptune-css/less/core/_typography-utilities.less +0 -255
  273. package/src/neptune-css/less/core/_typography.less +0 -575
  274. package/src/neptune-css/less/core/viewport-themes.less +0 -65
  275. package/src/neptune-css/less/currency-flags.less +0 -42
  276. package/src/neptune-css/less/decision.less +0 -98
  277. package/src/neptune-css/less/dropdowns.less +0 -365
  278. package/src/neptune-css/less/droppable.less +0 -213
  279. package/src/neptune-css/less/flex.less +0 -113
  280. package/src/neptune-css/less/footer.less +0 -113
  281. package/src/neptune-css/less/forms/bootstrap-forms.less +0 -1218
  282. package/src/neptune-css/less/forms/checkbox-radio.less +0 -330
  283. package/src/neptune-css/less/grid.less +0 -187
  284. package/src/neptune-css/less/input-groups.less +0 -298
  285. package/src/neptune-css/less/link-callout.less +0 -17
  286. package/src/neptune-css/less/list-group.less +0 -260
  287. package/src/neptune-css/less/loaders.less +0 -91
  288. package/src/neptune-css/less/media.less +0 -68
  289. package/src/neptune-css/less/mixins/_alerts.less +0 -39
  290. package/src/neptune-css/less/mixins/_arrows.less +0 -52
  291. package/src/neptune-css/less/mixins/_border-radius.less +0 -11
  292. package/src/neptune-css/less/mixins/_buttons.less +0 -82
  293. package/src/neptune-css/less/mixins/_center-block.less +0 -7
  294. package/src/neptune-css/less/mixins/_clearfix.less +0 -23
  295. package/src/neptune-css/less/mixins/_flex.less +0 -105
  296. package/src/neptune-css/less/mixins/_forms.less +0 -130
  297. package/src/neptune-css/less/mixins/_grid-framework.less +0 -104
  298. package/src/neptune-css/less/mixins/_grid.less +0 -158
  299. package/src/neptune-css/less/mixins/_hide-text.less +0 -20
  300. package/src/neptune-css/less/mixins/_links.less +0 -7
  301. package/src/neptune-css/less/mixins/_list-group.less +0 -23
  302. package/src/neptune-css/less/mixins/_logical-properties-IE-friendly.less +0 -381
  303. package/src/neptune-css/less/mixins/_logical-properties-modern-browsers.less +0 -226
  304. package/src/neptune-css/less/mixins/_logical-properties.less +0 -5
  305. package/src/neptune-css/less/mixins/_nav-divider.less +0 -10
  306. package/src/neptune-css/less/mixins/_nav-vertical-align.less +0 -10
  307. package/src/neptune-css/less/mixins/_panels.less +0 -23
  308. package/src/neptune-css/less/mixins/_physical-properties.less +0 -110
  309. package/src/neptune-css/less/mixins/_reset-text.less +0 -22
  310. package/src/neptune-css/less/mixins/_sequence.less +0 -203
  311. package/src/neptune-css/less/mixins/_spacing.less +0 -122
  312. package/src/neptune-css/less/mixins/_tab-focus.less +0 -5
  313. package/src/neptune-css/less/mixins/_table-row.less +0 -47
  314. package/src/neptune-css/less/mixins/_text-emphasis.less +0 -39
  315. package/src/neptune-css/less/mixins/_text-overflow.less +0 -8
  316. package/src/neptune-css/less/mixins/_theming.less +0 -7
  317. package/src/neptune-css/less/modals.less +0 -239
  318. package/src/neptune-css/less/navbar.less +0 -1442
  319. package/src/neptune-css/less/navs.less +0 -339
  320. package/src/neptune-css/less/neptune-addons.less +0 -4
  321. package/src/neptune-css/less/neptune-core.less +0 -4
  322. package/src/neptune-css/less/neptune-social-media.less +0 -84
  323. package/src/neptune-css/less/neptune.bundle.less +0 -65
  324. package/src/neptune-css/less/panels.less +0 -410
  325. package/src/neptune-css/less/popovers.less +0 -379
  326. package/src/neptune-css/less/process.less +0 -426
  327. package/src/neptune-css/less/progress-bars.less +0 -55
  328. package/src/neptune-css/less/ring.less +0 -51
  329. package/src/neptune-css/less/select.less +0 -88
  330. package/src/neptune-css/less/sequences.less +0 -511
  331. package/src/neptune-css/less/table.less +0 -385
  332. package/src/neptune-css/less/tick.less +0 -37
  333. package/src/neptune-css/less/tooltip.less +0 -130
  334. package/src/neptune-css/less/utilities.less +0 -153
  335. package/src/neptune-css/less/wells.less +0 -37
  336. package/src/neptune-css/props/custom-media.css +0 -11
  337. package/src/neptune-css/props/legacy-custom-props.css +0 -69
  338. package/src/neptune-css/props/neptune-tokens.css +0 -11
  339. package/src/neptune-css/variables/legacy-variables.less +0 -1299
  340. package/src/neptune-css/variables/neptune-tokens.less +0 -12
  341. package/src/neptune-css/variables/zindex.less +0 -17
  342. /package/{build/styles/neptune-css/variables/legacy-variables.css → src/listItem/ListItem.vars.css} +0 -0
@@ -1,855 +0,0 @@
1
- .sequence {
2
- padding-left: 24px;
3
- position: relative;
4
- margin-left: 25px;
5
- margin-top: 0;
6
- margin-bottom: 0;
7
- font-size: 0.875rem;
8
- font-size: var(--font-size-14);
9
- border-color: rgba(0,0,0,0.10196);
10
- border-color: var(--color-border-neutral);
11
- }
12
- .sequence > li {
13
- padding-top: 2px;
14
- padding-bottom: 2px;
15
- }
16
- .sequence > li:first-child {
17
- margin-top: 16px;
18
- }
19
- .sequence > li:last-child {
20
- margin-bottom: 16px;
21
- }
22
- @media (min-width: 768px) {
23
- .sequence > li {
24
- padding-top: 4px;
25
- padding-bottom: 4px;
26
- }
27
- }
28
- .sequence > li::before {
29
- margin-top: 8px;
30
- }
31
- .sequence > li::after {
32
- top: 16px;
33
- }
34
- .sequence > li:first-child::after {
35
- height: 100%;
36
- }
37
- .sequence > li:last-child::after {
38
- height: 0;
39
- }
40
- .sequence.sequence-top > li:first-child {
41
- padding-top: 20px;
42
- margin-top: 0;
43
- }
44
- .sequence.sequence-top > li:first-child::after {
45
- height: calc(100% + 16px);
46
- }
47
- .sequence.sequence-bottom > li:last-child {
48
- padding-bottom: 20px;
49
- margin-bottom: 0;
50
- }
51
- .sequence.sequence-bottom > li:last-child::after {
52
- height: calc(100% - 16px);
53
- }
54
- .sequence.sequence-top.sequence-bottom > li:first-child:last-child::after {
55
- height: 100%;
56
- }
57
- .sequence .sequence-icon {
58
- top: 2px;
59
- }
60
- @media (min-width: 768px) {
61
- .sequence .sequence-icon {
62
- top: 4px;
63
- }
64
- }
65
- .sequence.sequence-top > li:first-child .sequence-icon {
66
- top: 20px;
67
- }
68
- [dir="rtl"] .sequence {
69
- padding-right: 24px;
70
- padding-left: 0;
71
- padding-left: initial;
72
- }
73
- .sequence > li::before {
74
- margin-left: -27px;
75
- }
76
- [dir="rtl"] .sequence > li::before {
77
- margin-right: -27px;
78
- margin-left: 0;
79
- margin-left: initial;
80
- }
81
- .sequence > li::after {
82
- left: -24px;
83
- }
84
- [dir="rtl"] .sequence > li::after {
85
- right: -24px;
86
- left: auto;
87
- left: initial;
88
- }
89
- .sequence .sequence-icon {
90
- margin-left: -35px;
91
- }
92
- [dir="rtl"] .sequence .sequence-icon {
93
- margin-right: -35px;
94
- margin-left: 0;
95
- margin-left: initial;
96
- }
97
- .sequence .sequence-icon-md {
98
- margin-left: -39px;
99
- }
100
- [dir="rtl"] .sequence .sequence-icon-md {
101
- margin-right: -39px;
102
- margin-left: 0;
103
- margin-left: initial;
104
- }
105
- .sequence .sequence-icon-lg {
106
- margin-left: -43px;
107
- }
108
- [dir="rtl"] .sequence .sequence-icon-lg {
109
- margin-right: -43px;
110
- margin-left: 0;
111
- margin-left: initial;
112
- }
113
- [dir="rtl"] .sequence {
114
- margin-right: 25px;
115
- margin-left: 0;
116
- margin-left: initial;
117
- }
118
- @media (min-width: 768px) {
119
- .sequence {
120
- padding-right: 24px;
121
- font-size: 1rem;
122
- font-size: var(--font-size-16);
123
- }
124
- [dir="rtl"] .sequence {
125
- padding-left: 24px;
126
- padding-right: 0;
127
- padding-right: initial;
128
- }
129
- }
130
- .sequence > li {
131
- display: block;
132
- line-height: 24px;
133
- position: relative;
134
- border-color: rgba(0,0,0,0.10196);
135
- border-color: var(--color-border-neutral);
136
- }
137
- .sequence > li > a {
138
- display: block;
139
- -webkit-text-decoration: none;
140
- text-decoration: none;
141
- font-weight: 400;
142
- font-weight: var(--font-weight-regular);
143
- color: #0097c7;
144
- color: var(--color-content-accent);
145
- outline-offset: -1px;
146
- }
147
- .sequence > li > a:hover,
148
- .sequence > li > a:focus {
149
- -webkit-text-decoration: none;
150
- text-decoration: none;
151
- color: #0084b3;
152
- color: var(--color-content-accent-hover);
153
- }
154
- .sequence > li > a:active {
155
- color: #0077a5;
156
- color: var(--color-content-accent-active);
157
- }
158
- .sequence > li p {
159
- margin-bottom: 0;
160
- padding-bottom: 8px;
161
- max-width: 600px;
162
- }
163
- .sequence > li p:last-child {
164
- padding-bottom: 0;
165
- }
166
- .sequence > li h1,
167
- .sequence > li h2,
168
- .sequence > li h3,
169
- .sequence > li h4,
170
- .sequence > li .h1,
171
- .sequence > li .h2,
172
- .sequence > li .h3,
173
- .sequence > li .h4,
174
- .sequence > li .btn-toolbar {
175
- margin-bottom: 16px;
176
- }
177
- .sequence > li::before {
178
- content: "";
179
- display: block;
180
- position: absolute;
181
- width: 8px;
182
- height: 8px;
183
- border-radius: 50%;
184
- z-index: 2;
185
- border-width: 4px;
186
- border-style: solid;
187
- border-color: inherit;
188
- outline: 0;
189
- }
190
- .sequence > li::after {
191
- content: "";
192
- position: absolute;
193
- width: 2px;
194
- height: 100%;
195
- border-style: solid;
196
- border-color: inherit;
197
- outline: 0;
198
- border-width: 0;
199
- background-color: rgba(0,0,0,0.10196);
200
- background-color: var(--color-border-neutral);
201
- background-size: 200% 200%;
202
- background-position: 0 0%;
203
- }
204
- .sequence .sequence-item-no-pip::before {
205
- display: none;
206
- }
207
- .sequence > .active > a {
208
- -webkit-text-decoration: none;
209
- text-decoration: none;
210
- color: #37517e;
211
- color: var(--color-content-primary);
212
- font-weight: 600;
213
- font-weight: var(--font-weight-semi-bold);
214
- }
215
- .sequence > .active > a:hover,
216
- .sequence > .active > a:focus {
217
- -webkit-text-decoration: none;
218
- text-decoration: none;
219
- color: #37517e;
220
- color: var(--color-content-primary);
221
- }
222
- .sequence > .active > a:active {
223
- color: #37517e;
224
- color: var(--color-content-primary);
225
- }
226
- .sequence > .active::before {
227
- border-color: #0097c7;
228
- border-color: var(--color-content-accent);
229
- }
230
- .sequence > .active::after,
231
- .sequence > .active ~ li::after {
232
- background-color: rgba(0,0,0,0.10196);
233
- background-color: var(--color-border-neutral);
234
- background-image: none;
235
- }
236
- .sequence > .active ~ li::before {
237
- border-color: rgba(0,0,0,0.10196);
238
- border-color: var(--color-border-neutral);
239
- }
240
- .sequence a {
241
- -webkit-text-decoration: none;
242
- text-decoration: none;
243
- font-weight: 400;
244
- font-weight: var(--font-weight-regular);
245
- }
246
- .sequence-top > li:first-child::after {
247
- top: 0;
248
- }
249
- .sequence-inverse > li {
250
- border-color: rgba(0,0,0,0.10196);
251
- border-color: var(--color-border-neutral);
252
- }
253
- .sequence-inverse > li > a {
254
- color: #ffffff;
255
- }
256
- .sequence-inverse > li::after {
257
- background-color: #37517e;
258
- }
259
- .sequence-inverse > .active > a {
260
- color: #ffffff;
261
- }
262
- .sequence-inverse > .active .small,
263
- .sequence-inverse > .active .body-2,
264
- .sequence-inverse > .active .np-text-body-default {
265
- color: #5d7079;
266
- color: var(--color-content-secondary);
267
- }
268
- .sequence-inverse > .active::after,
269
- .sequence-inverse > .active ~ li::after {
270
- background-color: #37517e;
271
- background-image: none !important;
272
- }
273
- .sequence-inverse > .active ~ li::before {
274
- border-color: #37517e;
275
- }
276
- .sequence-info > li {
277
- border-color: #00a2dd;
278
- border-color: var(--color-interactive-accent);
279
- }
280
- .sequence-info > li::after {
281
- background-image: linear-gradient(#00a2dd 0, #00a2dd 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
282
- background-image: linear-gradient(var(--color-interactive-accent) 0, var(--color-interactive-accent) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
283
- }
284
- .sequence-info.sequence-inverse > li::after {
285
- background-image: linear-gradient(#00a2dd 0, #00a2dd 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
286
- background-image: linear-gradient(var(--color-interactive-accent) 0, var(--color-interactive-accent) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
287
- }
288
- .sequence-info > .active::before {
289
- border-color: #00a2dd;
290
- border-color: var(--color-interactive-accent);
291
- background-color: #00a2dd;
292
- background-color: var(--color-interactive-accent);
293
- }
294
- @keyframes sequence-pip-info {
295
- from {
296
- border-color: rgba(255,255,255,0.10196);
297
- }
298
- to {
299
- border-color: #00a2dd;
300
- border-color: var(--color-interactive-accent);
301
- }
302
- }
303
- .sequence-primary > li {
304
- border-color: #37517e;
305
- }
306
- .sequence-primary > li::after {
307
- background-image: linear-gradient(#37517e 0, #37517e 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
308
- background-image: linear-gradient(#37517e 0, #37517e 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
309
- }
310
- .sequence-primary.sequence-inverse > li::after {
311
- background-image: linear-gradient(#37517e 0, #37517e 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
312
- }
313
- .sequence-primary > .active::before {
314
- border-color: #37517e;
315
- background-color: #37517e;
316
- }
317
- @keyframes sequence-pip-primary {
318
- from {
319
- border-color: rgba(255,255,255,0.10196);
320
- }
321
- to {
322
- border-color: #37517e;
323
- }
324
- }
325
- .sequence-success > li {
326
- border-color: #2ead4b;
327
- border-color: var(--color-interactive-positive);
328
- }
329
- .sequence-success > li::after {
330
- background-image: linear-gradient(#2ead4b 0, #2ead4b 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
331
- background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
332
- }
333
- .sequence-success.sequence-inverse > li::after {
334
- background-image: linear-gradient(#2ead4b 0, #2ead4b 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
335
- background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
336
- }
337
- .sequence-success > .active::before {
338
- border-color: #2ead4b;
339
- border-color: var(--color-interactive-positive);
340
- background-color: #2ead4b;
341
- background-color: var(--color-interactive-positive);
342
- }
343
- @keyframes sequence-pip-success {
344
- from {
345
- border-color: rgba(255,255,255,0.10196);
346
- }
347
- to {
348
- border-color: #2ead4b;
349
- border-color: var(--color-interactive-positive);
350
- }
351
- }
352
- .sequence-warning > li {
353
- border-color: #df8700;
354
- border-color: var(--color-interactive-warning);
355
- }
356
- .sequence-warning > li::after {
357
- background-image: linear-gradient(#df8700 0, #df8700 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
358
- background-image: linear-gradient(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
359
- }
360
- .sequence-warning.sequence-inverse > li::after {
361
- background-image: linear-gradient(#df8700 0, #df8700 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
362
- background-image: linear-gradient(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
363
- }
364
- .sequence-warning > .active::before {
365
- border-color: #df8700;
366
- border-color: var(--color-interactive-warning);
367
- background-color: #df8700;
368
- background-color: var(--color-interactive-warning);
369
- }
370
- @keyframes sequence-pip-warning {
371
- from {
372
- border-color: rgba(255,255,255,0.10196);
373
- }
374
- to {
375
- border-color: #df8700;
376
- border-color: var(--color-interactive-warning);
377
- }
378
- }
379
- .sequence-danger > li {
380
- border-color: #e74848;
381
- border-color: var(--color-interactive-negative);
382
- }
383
- .sequence-danger > li::after {
384
- background-image: linear-gradient(#e74848 0, #e74848 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
385
- background-image: linear-gradient(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
386
- }
387
- .sequence-danger.sequence-inverse > li::after {
388
- background-image: linear-gradient(#e74848 0, #e74848 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
389
- background-image: linear-gradient(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
390
- }
391
- .sequence-danger > .active::before {
392
- border-color: #e74848;
393
- border-color: var(--color-interactive-negative);
394
- background-color: #e74848;
395
- background-color: var(--color-interactive-negative);
396
- }
397
- @keyframes sequence-pip-danger {
398
- from {
399
- border-color: rgba(255,255,255,0.10196);
400
- }
401
- to {
402
- border-color: #e74848;
403
- border-color: var(--color-interactive-negative);
404
- }
405
- }
406
- .sequence-hollow > li::before {
407
- border-width: 2px;
408
- background-color: #ffffff;
409
- background-color: var(--color-background-screen);
410
- }
411
- .sequence-hollow > .active::before {
412
- border-width: 4px;
413
- }
414
- .sequence-hollow > .active ~ li::before {
415
- background-color: #ffffff;
416
- background-color: var(--color-background-screen);
417
- }
418
- .sequence-hollow.sequence-inverse > li::before {
419
- background-color: #37517e;
420
- }
421
- .sequence-icon {
422
- position: absolute;
423
- display: block;
424
- margin-left: -35px;
425
- background-color: #ffffff;
426
- background-color: var(--color-background-screen);
427
- border-radius: 50%;
428
- width: 24px;
429
- height: 24px;
430
- z-index: 2;
431
- text-align: center;
432
- -webkit-text-decoration: none !important;
433
- text-decoration: none !important;
434
- border-width: 1px;
435
- border-style: solid;
436
- border-color: rgba(0,0,0,0.10196);
437
- border-color: var(--color-border-neutral);
438
- top: 4px;
439
- font-size: 0.75rem;
440
- font-size: var(--font-size-12);
441
- }
442
- [dir="rtl"] .sequence-icon {
443
- margin-right: -35px;
444
- margin-left: 0;
445
- margin-left: initial;
446
- }
447
- .sequence-icon .icon {
448
- font-size: 1rem;
449
- font-size: var(--font-size-16);
450
- line-height: 23px;
451
- }
452
- .sequence-inverse .sequence-icon {
453
- background-color: #37517e;
454
- border-color: #ffffff;
455
- }
456
- .sequence a .sequence-icon {
457
- color: #0097c7;
458
- color: var(--color-content-accent);
459
- border-color: #00a2dd;
460
- border-color: var(--color-interactive-accent);
461
- }
462
- .sequence a:hover .sequence-icon,
463
- .sequence a:focus .sequence-icon {
464
- color: #0084b3;
465
- color: var(--color-content-accent-hover);
466
- border-color: #008fc9;
467
- border-color: var(--color-interactive-accent-hover);
468
- }
469
- .sequence-table {
470
- display: table;
471
- }
472
- .sequence-table > li {
473
- display: table-row;
474
- }
475
- .sequence-table > li > a {
476
- position: absolute;
477
- }
478
- .sequence-table > li > .sequence-table-td,
479
- .sequence-table > li > .sequence-table-th {
480
- display: table-cell;
481
- padding: 4px 12px;
482
- padding: var(--size-4) var(--size-12);
483
- padding-left: 0;
484
- }
485
- [dir="rtl"] .sequence-table > li > .sequence-table-td,
486
- [dir="rtl"] .sequence-table > li > .sequence-table-th {
487
- padding-right: 0;
488
- padding-left: 0;
489
- padding-left: initial;
490
- }
491
- .sequence-table > li > .sequence-table-td:last-child,
492
- .sequence-table > li > .sequence-table-th:last-child {
493
- padding-right: 0;
494
- }
495
- [dir="rtl"] .sequence-table > li > .sequence-table-td:last-child,
496
- [dir="rtl"] .sequence-table > li > .sequence-table-th:last-child {
497
- padding-left: 0;
498
- padding-right: 0;
499
- padding-right: initial;
500
- }
501
- .sequence-table > li > .sequence-table-th {
502
- color: #37517e;
503
- color: var(--color-content-primary);
504
- white-space: nowrap;
505
- }
506
- .sequence-table > li::before {
507
- position: static;
508
- position: initial;
509
- }
510
- .sequence-table > li::after {
511
- display: none;
512
- }
513
- .sequence-table > li .sequence-icon {
514
- position: static;
515
- position: initial;
516
- margin-top: -17px;
517
- }
518
- .sequence-table > li:first-child .sequence-table-td,
519
- .sequence-table > li:first-child .sequence-table-th {
520
- padding-top: 17px;
521
- }
522
- .sequence-table > li:last-child .sequence-table-td,
523
- .sequence-table > li:last-child .sequence-table-th {
524
- padding-bottom: 15px;
525
- }
526
- .sequence-table::before {
527
- content: " ";
528
- width: 2px;
529
- left: 0;
530
- position: absolute;
531
- border-width: 1px;
532
- border-style: solid;
533
- border-color: inherit;
534
- height: calc(100% - 56px);
535
- margin-top: 28px;
536
- display: block;
537
- }
538
- [dir="rtl"] .sequence-table::before {
539
- right: 0;
540
- left: auto;
541
- left: initial;
542
- }
543
- .sequence-table.sequence-top::before {
544
- height: calc(100% - 28px);
545
- margin-top: 0;
546
- }
547
- .sequence-table.sequence-bottom::before {
548
- height: calc(100% - 28px);
549
- }
550
- .sequence-table.sequence-top.sequence-bottom::before {
551
- height: 100%;
552
- }
553
- .sequence-inverse > li > .sequence-table-th,
554
- .sequence-inverse > li > .sequence-table-td {
555
- color: #5d7079;
556
- color: var(--color-content-secondary);
557
- }
558
- .sequence-icon-md {
559
- width: 32px;
560
- height: 32px;
561
- line-height: 30px;
562
- margin-top: -6px;
563
- font-size: 0.875rem;
564
- font-size: var(--font-size-14);
565
- }
566
- .sequence-icon-lg {
567
- width: 40px;
568
- height: 40px;
569
- line-height: 38px;
570
- margin-top: -6px;
571
- font-size: 1rem;
572
- font-size: var(--font-size-16);
573
- }
574
- .sequence-icon-lg .icon {
575
- font-size: 22px;
576
- line-height: 35px;
577
- }
578
- .sequence-lg {
579
- padding-left: 40px;
580
- }
581
- .sequence-lg > li {
582
- padding-top: 8px;
583
- padding-bottom: 8px;
584
- }
585
- .sequence-lg > li:first-child {
586
- margin-top: 24px;
587
- }
588
- .sequence-lg > li:last-child {
589
- margin-bottom: 24px;
590
- }
591
- @media (min-width: 768px) {
592
- .sequence-lg > li {
593
- padding-top: 8px;
594
- padding-bottom: 8px;
595
- }
596
- }
597
- .sequence-lg > li::before {
598
- margin-top: 8px;
599
- }
600
- .sequence-lg > li::after {
601
- top: 20px;
602
- }
603
- .sequence-lg > li:first-child::after {
604
- height: 100%;
605
- }
606
- .sequence-lg > li:last-child::after {
607
- height: 0;
608
- }
609
- .sequence-lg.sequence-top > li:first-child {
610
- padding-top: 32px;
611
- margin-top: 0;
612
- }
613
- .sequence-lg.sequence-top > li:first-child::after {
614
- height: calc(100% + 20px);
615
- }
616
- .sequence-lg.sequence-bottom > li:last-child {
617
- padding-bottom: 32px;
618
- margin-bottom: 0;
619
- }
620
- .sequence-lg.sequence-bottom > li:last-child::after {
621
- height: calc(100% - 20px);
622
- }
623
- .sequence-lg.sequence-top.sequence-bottom > li:first-child:last-child::after {
624
- height: 100%;
625
- }
626
- .sequence-lg .sequence-icon {
627
- top: 8px;
628
- }
629
- @media (min-width: 768px) {
630
- .sequence-lg .sequence-icon {
631
- top: 8px;
632
- }
633
- }
634
- .sequence-lg.sequence-top > li:first-child .sequence-icon {
635
- top: 32px;
636
- }
637
- [dir="rtl"] .sequence-lg {
638
- padding-right: 40px;
639
- padding-left: 0;
640
- padding-left: initial;
641
- }
642
- .sequence-lg > li::before {
643
- margin-left: -43px;
644
- }
645
- [dir="rtl"] .sequence-lg > li::before {
646
- margin-right: -43px;
647
- margin-left: 0;
648
- margin-left: initial;
649
- }
650
- .sequence-lg > li::after {
651
- left: -40px;
652
- }
653
- [dir="rtl"] .sequence-lg > li::after {
654
- right: -40px;
655
- left: auto;
656
- left: initial;
657
- }
658
- .sequence-lg .sequence-icon {
659
- margin-left: -51px;
660
- }
661
- [dir="rtl"] .sequence-lg .sequence-icon {
662
- margin-right: -51px;
663
- margin-left: 0;
664
- margin-left: initial;
665
- }
666
- .sequence-lg .sequence-icon-md {
667
- margin-left: -55px;
668
- }
669
- [dir="rtl"] .sequence-lg .sequence-icon-md {
670
- margin-right: -55px;
671
- margin-left: 0;
672
- margin-left: initial;
673
- }
674
- .sequence-lg .sequence-icon-lg {
675
- margin-left: -59px;
676
- }
677
- [dir="rtl"] .sequence-lg .sequence-icon-lg {
678
- margin-right: -59px;
679
- margin-left: 0;
680
- margin-left: initial;
681
- }
682
- @media (min-width: 768px) {
683
- .sequence-lg {
684
- padding-left: 48px;
685
- }
686
- [dir="rtl"] .sequence-lg {
687
- padding-right: 48px;
688
- padding-left: 0;
689
- padding-left: initial;
690
- }
691
- .sequence-lg > li::before {
692
- margin-left: -51px;
693
- }
694
- [dir="rtl"] .sequence-lg > li::before {
695
- margin-right: -51px;
696
- margin-left: 0;
697
- margin-left: initial;
698
- }
699
- .sequence-lg > li::after {
700
- left: -48px;
701
- }
702
- [dir="rtl"] .sequence-lg > li::after {
703
- right: -48px;
704
- left: auto;
705
- left: initial;
706
- }
707
- .sequence-lg .sequence-icon {
708
- margin-left: -59px;
709
- }
710
- [dir="rtl"] .sequence-lg .sequence-icon {
711
- margin-right: -59px;
712
- margin-left: 0;
713
- margin-left: initial;
714
- }
715
- .sequence-lg .sequence-icon-md {
716
- margin-left: -63px;
717
- }
718
- [dir="rtl"] .sequence-lg .sequence-icon-md {
719
- margin-right: -63px;
720
- margin-left: 0;
721
- margin-left: initial;
722
- }
723
- .sequence-lg .sequence-icon-lg {
724
- margin-left: -67px;
725
- }
726
- [dir="rtl"] .sequence-lg .sequence-icon-lg {
727
- margin-right: -67px;
728
- margin-left: 0;
729
- margin-left: initial;
730
- }
731
- }
732
- .sequence-animate > li::after {
733
- background-size: 200% 200%;
734
- animation: 0.3s linear 0s both sequence-fill;
735
- }
736
- .sequence-animate.sequence-info > li::before {
737
- animation: 0.3s linear 0.3s both sequence-pip-info, 3s linear 0.3s forwards sequence-pulse-info;
738
- }
739
- .sequence-animate.sequence-info > .active::before {
740
- animation: 0.3s linear 0.3s both sequence-pip-info, 3s linear 0.3s infinite sequence-pulse-info;
741
- }
742
- .sequence-animate.sequence-warning > li::before {
743
- animation: 0.3s linear 0.3s both sequence-pip-warning, 3s linear 0.3s forwards sequence-pulse-warning;
744
- }
745
- .sequence-animate.sequence-warning > .active::before {
746
- animation: 0.3s linear 0.3s both sequence-pip-warning, 3s linear 0.3s infinite sequence-pulse-warning;
747
- }
748
- .sequence-animate.sequence-success > li::before {
749
- animation: 0.3s linear 0.3s both sequence-pip-success, 3s linear 0.3s forwards sequence-pulse-success;
750
- }
751
- .sequence-animate.sequence-success > .active::before {
752
- animation: 0.3s linear 0.3s both sequence-pip-success, 3s linear 0.3s infinite sequence-pulse-success;
753
- }
754
- .sequence-animate.sequence-danger > li::before {
755
- animation: 0.3s linear 0.3s both sequence-pip-danger, 3s linear 0.3s forwards sequence-pulse-danger;
756
- }
757
- .sequence-animate.sequence-danger > .active::before {
758
- animation: 0.3s linear 0.3s both sequence-pip-danger, 3s linear 0.3s infinite sequence-pulse-danger;
759
- }
760
- .sequence-animate > li:nth-child(1):before,
761
- .sequence-animate > li:nth-child(1):after {
762
- animation-delay: 0.3s !important;
763
- }
764
- .sequence-animate > li:nth-child(2):before,
765
- .sequence-animate > li:nth-child(2):after {
766
- animation-delay: 0.6s !important;
767
- }
768
- .sequence-animate > li:nth-child(3):before,
769
- .sequence-animate > li:nth-child(3):after {
770
- animation-delay: 0.9s !important;
771
- }
772
- .sequence-animate > li:nth-child(4):before,
773
- .sequence-animate > li:nth-child(4):after {
774
- animation-delay: 1.2s !important;
775
- }
776
- .sequence-animate > li:nth-child(5):before,
777
- .sequence-animate > li:nth-child(5):after {
778
- animation-delay: 1.5s !important;
779
- }
780
- .sequence-animate > li:nth-child(6):before,
781
- .sequence-animate > li:nth-child(6):after {
782
- animation-delay: 1.8s !important;
783
- }
784
- .sequence-animate > li:nth-child(7):before,
785
- .sequence-animate > li:nth-child(7):after {
786
- animation-delay: 2.1s !important;
787
- }
788
- .sequence-animate > li:nth-child(8):before,
789
- .sequence-animate > li:nth-child(8):after {
790
- animation-delay: 2.4s !important;
791
- }
792
- .sequence-animate > li:nth-child(9):before,
793
- .sequence-animate > li:nth-child(9):after {
794
- animation-delay: 2.7s !important;
795
- }
796
- .sequence-animate > li:nth-child(10):before,
797
- .sequence-animate > li:nth-child(10):after {
798
- animation-delay: 3s !important;
799
- }
800
- .sequence-animate > .active ~ li::before,
801
- .sequence-animate > .active ~ li::after {
802
- animation: none;
803
- }
804
- @keyframes sequence-fill {
805
- from {
806
- background-position: 0 100%;
807
- }
808
- to {
809
- background-position: 0 0;
810
- }
811
- }
812
- @keyframes sequence-pulse-info {
813
- 0% {
814
- box-shadow: 0 0 0 0 rgba(0, 185, 255, 0.3);
815
- }
816
- 50% {
817
- box-shadow: 0 0 0 16px rgba(0, 185, 255, 0);
818
- }
819
- 100% {
820
- box-shadow: 0 0 0 0 rgba(0, 185, 255, 0);
821
- }
822
- }
823
- @keyframes sequence-pulse-warning {
824
- 0% {
825
- box-shadow: 0 0 0 0 rgba(255, 166, 0, 0.3);
826
- }
827
- 50% {
828
- box-shadow: 0 0 0 16px rgba(255, 166, 0, 0);
829
- }
830
- 100% {
831
- box-shadow: 0 0 0 0 rgba(255, 166, 0, 0);
832
- }
833
- }
834
- @keyframes sequence-pulse-success {
835
- 0% {
836
- box-shadow: 0 0 0 0 rgba(26, 208, 110, 0.3);
837
- }
838
- 50% {
839
- box-shadow: 0 0 0 16px rgba(26, 208, 110, 0);
840
- }
841
- 100% {
842
- box-shadow: 0 0 0 0 rgba(226, 208, 110, 0);
843
- }
844
- }
845
- @keyframes sequence-pulse-danger {
846
- 0% {
847
- box-shadow: 0 0 0 0 rgba(245, 54, 54, 0.3);
848
- }
849
- 50% {
850
- box-shadow: 0 0 0 16px rgba(245, 54, 54, 0);
851
- }
852
- 100% {
853
- box-shadow: 0 0 0 0 rgba(245, 54, 54, 0);
854
- }
855
- }