@transferwise/components 0.0.0-experimental-aa49e22 → 0.0.0-experimental-9f6647e

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
package/build/styles/neptune-css/less/forms/checkbox-radio.css DELETED
@@ -1,367 +0,0 @@
1
- .radio,
2
- .checkbox {
3
- border-color: #c9cbce;
4
- border-color: var(--color-interactive-secondary);
5
- }
6
- .radio > label,
7
- .checkbox > label {
8
- position: relative;
9
- padding-left: 48px;
10
- }
11
- [dir="rtl"] .radio > label,
12
- [dir="rtl"] .checkbox > label {
13
- padding-right: 48px;
14
- padding-left: 0;
15
- padding-left: initial;
16
- }
17
- .radio > label input[type="radio"],
18
- .checkbox > label input[type="radio"],
19
- .radio > label input[type="checkbox"],
20
- .checkbox > label input[type="checkbox"] {
21
- display: block;
22
- position: absolute;
23
- top: 13px;
24
- left: 40px;
25
- }
26
- [dir="rtl"] .radio > label input[type="radio"],
27
- [dir="rtl"] .checkbox > label input[type="radio"],
28
- [dir="rtl"] .radio > label input[type="checkbox"],
29
- [dir="rtl"] .checkbox > label input[type="checkbox"] {
30
- right: 40px;
31
- left: auto;
32
- left: initial;
33
- }
34
- .tw-checkbox-button {
35
- border: 1px solid #c9cbce;
36
- border: 1px solid var(--color-interactive-secondary);
37
- background: #ffffff;
38
- background: var(--color-background-screen);
39
- width: 22px;
40
- height: 22px;
41
- border-radius: 3px;
42
- display: inline-block;
43
- padding: 0;
44
- vertical-align: middle;
45
- text-align: center;
46
- transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
47
- }
48
- .np-theme-personal .tw-checkbox-button {
49
- border: none;
50
- box-shadow: inset 0 0 0 1px #c9cbce;
51
- box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
52
- }
53
- .tw-checkbox-button .tw-checkbox-check,
54
- .tw-checkbox-button .np-tw-checkbox-indeterminate {
55
- width: 20px;
56
- height: 20px;
57
- margin: 0;
58
- display: none;
59
- color: #ffffff;
60
- color: var(--color-background-screen);
61
- }
62
- .tw-checkbox-button:not(.disabled):not(:disabled):hover,
63
- input[type="checkbox"]:hover + .tw-checkbox-button,
64
- .checkbox:hover .tw-checkbox-button {
65
- border-color: #b5b7ba;
66
- border-color: var(--color-interactive-secondary-hover);
67
- }
68
- .np-theme-personal .tw-checkbox-button:not(.disabled):not(:disabled):hover,
69
- .np-theme-personal input[type="checkbox"]:hover + .tw-checkbox-button,
70
- .np-theme-personal .checkbox:hover .tw-checkbox-button {
71
- box-shadow: inset 0 0 0 1px #b5b7ba;
72
- box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
73
- }
74
- .tw-checkbox-button:not(.disabled):not(:disabled):focus,
75
- .tw-checkbox-button:not(.disabled):not(:disabled).focus,
76
- .tw-checkbox-button:not(.disabled):not(:disabled):focus:hover,
77
- .tw-checkbox-button:not(.disabled):not(:disabled).focus:hover,
78
- input[type="checkbox"]:focus + .tw-checkbox-button,
79
- .tw-checkbox-button:not(.disabled):not(:disabled):active,
80
- .tw-checkbox-button:not(.disabled):not(:disabled).active,
81
- input[type="checkbox"]:active + .tw-checkbox-button {
82
- border-color: #c9cbce;
83
- border-color: var(--color-interactive-secondary);
84
- outline: none;
85
- }
86
- input[type="checkbox"]:focus-visible + .tw-checkbox-button {
87
- outline: var(--ring-outline-color) solid var(--ring-outline-width);
88
- outline-offset: var(--ring-outline-offset);
89
- }
90
- .checkbox input[type="checkbox"]:focus-visible + .tw-checkbox-button {
91
- outline: none;
92
- }
93
- .tw-checkbox-button:checked,
94
- .tw-checkbox-button.checked,
95
- input[type="checkbox"]:checked + .tw-checkbox-button,
96
- input[type="checkbox"]:indeterminate + .tw-checkbox-button {
97
- border-color: #00a2dd !important;
98
- border-color: var(--color-interactive-accent) !important;
99
- background-color: #00a2dd;
100
- background-color: var(--color-interactive-accent);
101
- }
102
- .np-theme-personal .tw-checkbox-button:checked,
103
- .np-theme-personal .tw-checkbox-button.checked,
104
- .np-theme-personal input[type="checkbox"]:checked + .tw-checkbox-button,
105
- .np-theme-personal input[type="checkbox"]:indeterminate + .tw-checkbox-button {
106
- background-color: var(--color-interactive-primary);
107
- box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
108
- }
109
- .tw-checkbox-button:checked .tw-checkbox-check,
110
- .tw-checkbox-button.checked .tw-checkbox-check,
111
- input[type="checkbox"]:checked + .tw-checkbox-button .tw-checkbox-check {
112
- display: inline-block;
113
- }
114
- input[type="checkbox"]:indeterminate + .tw-checkbox-button .np-tw-checkbox-indeterminate {
115
- display: inline-block;
116
- }
117
- .tw-checkbox-button:checked:hover,
118
- .tw-checkbox-button.checked:hover,
119
- input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
120
- input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-checkbox-button {
121
- border-color: #008fc9 !important;
122
- border-color: var(--color-interactive-accent-hover) !important;
123
- background-color: #008fc9;
124
- background-color: var(--color-interactive-accent-hover);
125
- }
126
- .np-theme-personal .tw-checkbox-button:checked:hover,
127
- .np-theme-personal .tw-checkbox-button.checked:hover,
128
- .np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
129
- .np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:hover + .tw-checkbox-button {
130
- border-color: var(--color-interactive-primary-hover) !important;
131
- background-color: var(--color-interactive-primary-hover);
132
- box-shadow: inset 0 0 0 1px var(--color-interactive-primary-hover);
133
- }
134
- .tw-checkbox-button:checked:active,
135
- .tw-checkbox-button.checked:active,
136
- input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
137
- input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-checkbox-button {
138
- border-color: #0081ba !important;
139
- border-color: var(--color-interactive-accent-active) !important;
140
- background-color: #0081ba;
141
- background-color: var(--color-interactive-accent-active);
142
- }
143
- .np-theme-personal .tw-checkbox-button:checked:active,
144
- .np-theme-personal .tw-checkbox-button.checked:active,
145
- .np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
146
- .np-theme-personal input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-checkbox-button {
147
- border-color: var(--color-interactive-primary-active) !important;
148
- background-color: var(--color-interactive-primary-active);
149
- box-shadow: inset 0 0 0 1px var(--color-interactive-primary-active);
150
- }
151
- .checkbox.has-error .tw-checkbox-button,
152
- .tw-checkbox-button.has-error {
153
- border-color: #e74848 !important;
154
- border-color: var(--color-interactive-negative) !important;
155
- }
156
- .checkbox.has-error .tw-checkbox-button:checked,
157
- .tw-checkbox-button.has-error:checked,
158
- .checkbox.has-error .tw-checkbox-button.checked,
159
- .tw-checkbox-button.has-error.checked {
160
- background-color: #e74848;
161
- background-color: var(--color-interactive-negative);
162
- }
163
- .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked + .tw-checkbox-button,
164
- .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate + .tw-checkbox-button {
165
- border-color: #e74848 !important;
166
- border-color: var(--color-interactive-negative) !important;
167
- background-color: #e74848;
168
- background-color: var(--color-interactive-negative);
169
- }
170
- .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:hover + .tw-checkbox-button,
171
- .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:indeterminate + .tw-checkbox-button {
172
- border-color: #d03238 !important;
173
- border-color: var(--color-interactive-negative-hover) !important;
174
- background-color: #d03238;
175
- background-color: var(--color-interactive-negative-hover);
176
- }
177
- .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):checked:active + .tw-checkbox-button,
178
- .checkbox.has-error input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate + .tw-checkbox-button {
179
- border-color: #bf1e2c !important;
180
- border-color: var(--color-interactive-negative-active) !important;
181
- background-color: #bf1e2c;
182
- background-color: var(--color-interactive-negative-active);
183
- }
184
- .tw-radio-button {
185
- width: 24px;
186
- height: 24px;
187
- border-radius: 50%;
188
- border: 1px solid #c9cbce;
189
- border: 1px solid var(--color-interactive-secondary);
190
- background: #ffffff;
191
- background: var(--color-background-screen);
192
- display: inline-flex;
193
- align-items: center;
194
- justify-content: center;
195
- padding: 0;
196
- transition: border 0.15s ease-in-out;
197
- }
198
- .np-theme-personal .tw-radio-button {
199
- border: none;
200
- box-shadow: inset 0 0 0 1px #c9cbce;
201
- box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
202
- position: relative;
203
- top: 0;
204
- left: 0;
205
- }
206
- .tw-radio-button .tw-radio-check {
207
- border-radius: 50%;
208
- text-align: center;
209
- width: 12px;
210
- height: 12px;
211
- display: block;
212
- opacity: 0;
213
- transition: all 0.15s ease-in-out;
214
- }
215
- .radio:not(.disabled):not(:disabled):hover .tw-radio-button,
216
- .tw-radio-button:not(.disabled):not(:disabled):hover {
217
- border-color: #b5b7ba;
218
- border-color: var(--color-interactive-secondary-hover);
219
- }
220
- .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button,
221
- .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover {
222
- border-color: transparent;
223
- box-shadow: inset 0 0 0 1px #b5b7ba;
224
- box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
225
- }
226
- .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button:checked,
227
- .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover:checked,
228
- .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button.checked,
229
- .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover.checked {
230
- box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
231
- }
232
- .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button:checked .tw-radio-check,
233
- .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover:checked .tw-radio-check,
234
- .np-theme-personal .radio:not(.disabled):not(:disabled):hover .tw-radio-button.checked .tw-radio-check,
235
- .np-theme-personal .tw-radio-button:not(.disabled):not(:disabled):hover.checked .tw-radio-check {
236
- background-color: var(--color-interactive-primary-hover);
237
- }
238
- .tw-radio-button:not(.disabled):not(:disabled):focus,
239
- .tw-radio-button:not(.disabled):not(:disabled).focus,
240
- .tw-radio-button:not(.disabled):not(:disabled):active,
241
- .tw-radio-button:not(.disabled):not(:disabled).active {
242
- border-color: #a7a9ab;
243
- border-color: var(--color-interactive-secondary-active);
244
- outline: none;
245
- }
246
- .tw-radio-button:checked,
247
- .tw-radio-button.checked {
248
- border-color: #00a2dd !important;
249
- border-color: var(--color-interactive-accent) !important;
250
- }
251
- .tw-radio-button:checked .tw-radio-check,
252
- .tw-radio-button.checked .tw-radio-check {
253
- opacity: 1;
254
- background-color: #00a2dd;
255
- background-color: var(--color-interactive-accent);
256
- }
257
- .np-theme-personal .tw-radio-button:checked,
258
- .np-theme-personal .tw-radio-button.checked {
259
- border-color: transparent !important;
260
- box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
261
- }
262
- .np-theme-personal .tw-radio-button:checked .tw-radio-check,
263
- .np-theme-personal .tw-radio-button.checked .tw-radio-check {
264
- background-color: var(--color-interactive-primary);
265
- max-height: 12px;
266
- max-width: 12px;
267
- }
268
- .radio.has-error .tw-radio-button,
269
- .tw-radio-button.has-error {
270
- border-color: #e74848 !important;
271
- border-color: var(--color-interactive-negative) !important;
272
- }
273
- .radio.has-error .tw-radio-button:checked .tw-radio-check,
274
- .tw-radio-button.has-error:checked .tw-radio-check,
275
- .radio.has-error .tw-radio-button.checked .tw-radio-check,
276
- .tw-radio-button.has-error.checked .tw-radio-check {
277
- background-color: #e74848;
278
- background-color: var(--color-interactive-negative);
279
- }
280
- .radio .tw-radio-button {
281
- position: absolute;
282
- left: 13px;
283
- top: 11px;
284
- }
285
- [dir="rtl"] .radio .tw-radio-button {
286
- right: 13px;
287
- left: auto;
288
- left: initial;
289
- }
290
- .checkbox .tw-checkbox-button {
291
- position: absolute;
292
- left: 14px;
293
- top: 12px;
294
- }
295
- [dir="rtl"] .checkbox .tw-checkbox-button {
296
- right: 14px;
297
- left: auto;
298
- left: initial;
299
- }
300
- .form-inline .tw-checkbox-button,
301
- .form-inline .tw-radio-button {
302
- vertical-align: bottom;
303
- }
304
- .form-horizontal .checkbox,
305
- .form-horizontal .radio {
306
- padding-top: 0;
307
- }
308
- .form-horizontal .checkbox > label,
309
- .form-horizontal .radio > label {
310
- margin-bottom: 0;
311
- }
312
- .np-radio.radio,
313
- .np-checkbox.checkbox {
314
- min-width: -moz-fit-content;
315
- min-width: fit-content;
316
- }
317
- .np-radio.radio .np-radio-button,
318
- .np-checkbox.checkbox .np-radio-button,
319
- .np-radio.radio .np-checkbox-button,
320
- .np-checkbox.checkbox .np-checkbox-button {
321
- position: relative;
322
- flex-shrink: 0;
323
- }
324
- .np-radio.radio .tw-checkbox-button,
325
- .np-checkbox.checkbox .tw-checkbox-button,
326
- .np-radio.radio .tw-radio-button,
327
- .np-checkbox.checkbox .tw-radio-button {
328
- position: static;
329
- }
330
- .np-radio.radio > label,
331
- .np-checkbox.checkbox > label {
332
- display: flex;
333
- align-items: center;
334
- padding: 8px 16px ;
335
- padding: var(--size-8) var(--size-16) ;
336
- }
337
- [dir="rtl"] .np-radio.radio > label,
338
- [dir="rtl"] .np-checkbox.checkbox > label {
339
- padding: 8px 16px ;
340
- padding: var(--size-8) var(--size-16) ;
341
- }
342
- .np-radio.radio > label .np-checkbox__text,
343
- .np-checkbox.checkbox > label .np-checkbox__text,
344
- .np-radio.radio > label .np-radio__text,
345
- .np-checkbox.checkbox > label .np-radio__text {
346
- display: block;
347
- padding-top: 1px;
348
- }
349
- :not(.np-theme-personal) .np-radio.radio > label .np-checkbox__text,
350
- :not(.np-theme-personal) .np-checkbox.checkbox > label .np-checkbox__text,
351
- :not(.np-theme-personal) .np-radio.radio > label .np-radio__text,
352
- :not(.np-theme-personal) .np-checkbox.checkbox > label .np-radio__text {
353
- font-weight: 400;
354
- font-weight: var(--font-weight-regular);
355
- font-size: 1rem;
356
- font-size: var(--font-size-16);
357
- line-height: 1.25rem;
358
- line-height: var(--line-height-20);
359
- padding-top: 3px;
360
- }
361
- .np-theme-personal .np-radio.radio > label,
362
- .np-theme-personal .np-checkbox.checkbox > label {
363
- padding: var(--input-padding);
364
- }
365
- .np-radio .np-radio__avatar {
366
- pointer-events: none;
367
- }