@transferwise/components 46.130.3 → 46.131.0

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 (382) hide show
  1. package/build/main.css +27004 -7
  2. package/build/styles/css/accordion.css +255 -0
  3. package/build/styles/css/alerts.css +751 -0
  4. package/build/styles/css/background.css +20 -0
  5. package/build/styles/css/badge.css +90 -0
  6. package/build/styles/css/border-radius.css +3 -0
  7. package/build/styles/css/breadcrumbs.css +20 -0
  8. package/build/styles/css/button-groups.css +495 -0
  9. package/build/styles/css/buttons.css +1390 -0
  10. package/build/styles/css/chevron.css +35 -0
  11. package/build/styles/css/circles.css +248 -0
  12. package/build/styles/css/close.css +47 -0
  13. package/build/styles/css/column-layout.css +164 -0
  14. package/build/styles/css/currency-flags.css +46 -0
  15. package/build/styles/css/decision.css +136 -0
  16. package/build/styles/css/dropdowns.css +472 -0
  17. package/build/styles/css/droppable.css +221 -0
  18. package/build/styles/css/flex.css +598 -0
  19. package/build/styles/css/footer.css +129 -0
  20. package/build/styles/css/grid.css +2369 -0
  21. package/build/styles/css/input-groups.css +2740 -0
  22. package/build/styles/css/link-callout.css +20 -0
  23. package/build/styles/css/list-group.css +350 -0
  24. package/build/styles/css/loaders.css +76 -0
  25. package/build/styles/css/media.css +74 -0
  26. package/build/styles/css/modals.css +185 -0
  27. package/build/styles/css/navbar.css +2406 -0
  28. package/build/styles/css/navs.css +296 -0
  29. package/build/styles/css/neptune-social-media.css +144 -0
  30. package/build/styles/css/neptune.css +25724 -0
  31. package/build/styles/css/panels.css +528 -0
  32. package/build/styles/css/popovers.css +661 -0
  33. package/build/styles/css/process.css +483 -0
  34. package/build/styles/css/progress-bars.css +64 -0
  35. package/build/styles/css/ring.css +55 -0
  36. package/build/styles/css/select.css +99 -0
  37. package/build/styles/css/sequences.css +855 -0
  38. package/build/styles/css/table.css +446 -0
  39. package/build/styles/css/tick.css +32 -0
  40. package/build/styles/css/tooltip.css +160 -0
  41. package/build/styles/css/utilities.css +145 -0
  42. package/build/styles/css/wells.css +74 -0
  43. package/build/styles/fonts/TW-Averta-Bold.woff +0 -0
  44. package/build/styles/fonts/TW-Averta-Bold.woff2 +0 -0
  45. package/build/styles/fonts/TW-Averta-Regular.woff +0 -0
  46. package/build/styles/fonts/TW-Averta-Regular.woff2 +0 -0
  47. package/build/styles/fonts/TW-Averta-Semibold.woff +0 -0
  48. package/build/styles/fonts/TW-Averta-Semibold.woff2 +0 -0
  49. package/build/styles/fonts/TransferWise-IconFont.svg +81 -0
  50. package/build/styles/fonts/TransferWise-IconFont.woff +0 -0
  51. package/build/styles/fonts/WiseSans-Heavy.woff2 +0 -0
  52. package/build/styles/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  53. package/build/styles/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  54. package/build/styles/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  55. package/build/styles/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  56. package/build/styles/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  57. package/build/styles/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  58. package/build/styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  59. package/build/styles/img/bg-dark.svg +31 -0
  60. package/build/styles/img/bg-light.svg +26 -0
  61. package/build/styles/less/legacy-variables.css +0 -0
  62. package/build/styles/less/legacy-variables.less +1299 -0
  63. package/build/styles/less/neptune-tokens.css +0 -0
  64. package/build/styles/less/neptune-tokens.less +275 -0
  65. package/build/styles/less/zindex.css +0 -0
  66. package/build/styles/less/zindex.less +17 -0
  67. package/build/styles/main.css +27004 -7
  68. package/build/styles/props/custom-media.css +11 -0
  69. package/build/styles/props/legacy-custom-props.css +69 -0
  70. package/build/styles/props/neptune-tokens.css +152 -0
  71. package/build/styles/styles/less/accordion.css +255 -0
  72. package/build/styles/styles/less/alerts.css +751 -0
  73. package/build/styles/styles/less/background.css +20 -0
  74. package/build/styles/styles/less/badge.css +90 -0
  75. package/build/styles/styles/less/border-radius.css +3 -0
  76. package/build/styles/styles/less/breadcrumbs.css +20 -0
  77. package/build/styles/styles/less/button-groups.css +495 -0
  78. package/build/styles/styles/less/buttons.css +1390 -0
  79. package/build/styles/styles/less/chevron.css +35 -0
  80. package/build/styles/styles/less/circles.css +248 -0
  81. package/build/styles/styles/less/close.css +47 -0
  82. package/build/styles/styles/less/column-layout.css +164 -0
  83. package/build/styles/styles/less/core/viewport-themes.css +59 -0
  84. package/build/styles/styles/less/currency-flags.css +46 -0
  85. package/build/styles/styles/less/decision.css +136 -0
  86. package/build/styles/styles/less/dropdowns.css +472 -0
  87. package/build/styles/styles/less/droppable.css +221 -0
  88. package/build/styles/styles/less/flex.css +598 -0
  89. package/build/styles/styles/less/footer.css +129 -0
  90. package/build/styles/styles/less/forms/bootstrap-forms.css +2277 -0
  91. package/build/styles/styles/less/forms/checkbox-radio.css +367 -0
  92. package/build/styles/styles/less/grid.css +2369 -0
  93. package/build/styles/styles/less/input-groups.css +2740 -0
  94. package/build/styles/styles/less/link-callout.css +20 -0
  95. package/build/styles/styles/less/list-group.css +350 -0
  96. package/build/styles/styles/less/loaders.css +76 -0
  97. package/build/styles/styles/less/media.css +74 -0
  98. package/build/styles/styles/less/modals.css +185 -0
  99. package/build/styles/styles/less/navbar.css +2406 -0
  100. package/build/styles/styles/less/navs.css +296 -0
  101. package/build/styles/styles/less/neptune-social-media.css +144 -0
  102. package/build/styles/styles/less/neptune.css +25724 -0
  103. package/build/styles/styles/less/panels.css +528 -0
  104. package/build/styles/styles/less/popovers.css +661 -0
  105. package/build/styles/styles/less/process.css +483 -0
  106. package/build/styles/styles/less/progress-bars.css +64 -0
  107. package/build/styles/styles/less/ring.css +55 -0
  108. package/build/styles/styles/less/select.css +99 -0
  109. package/build/styles/styles/less/sequences.css +855 -0
  110. package/build/styles/styles/less/table.css +446 -0
  111. package/build/styles/styles/less/tick.css +32 -0
  112. package/build/styles/styles/less/tooltip.css +160 -0
  113. package/build/styles/styles/less/utilities.css +145 -0
  114. package/build/styles/styles/less/wells.css +74 -0
  115. package/build/styles/styles/props/custom-media.css +11 -0
  116. package/build/styles/styles/props/legacy-custom-props.css +69 -0
  117. package/build/styles/styles/props/neptune-tokens.css +11 -0
  118. package/build/styles/styles/variables/legacy-variables.css +0 -0
  119. package/build/styles/styles/variables/neptune-tokens.css +0 -0
  120. package/build/styles/styles/variables/zindex.css +0 -0
  121. package/package.json +9 -5
  122. package/src/{DisabledComponents.story.tsx → DisabledComponents.test.story.tsx} +1 -1
  123. package/src/accordion/Accordion.less +3 -3
  124. package/src/actionButton/ActionButton.less +1 -1
  125. package/src/actionButton/ActionButton.story.tsx +11 -7
  126. package/src/actionButton/ActionButton.test.story.tsx +49 -0
  127. package/src/avatar/Avatar.less +3 -3
  128. package/src/avatarLayout/AvatarLayout.story.tsx +1 -105
  129. package/src/avatarLayout/AvatarLayout.test.story.tsx +117 -0
  130. package/src/avatarView/AvatarView.story.tsx +1 -104
  131. package/src/avatarView/AvatarView.test.story.tsx +114 -0
  132. package/src/badge/Badge.less +1 -1
  133. package/src/button/LegacyButton.less +1 -1
  134. package/src/button/LegacyButton.story.tsx +1 -26
  135. package/src/button/LegacyButton.test.story.tsx +37 -0
  136. package/src/button/_stories/Button.story.tsx +17 -41
  137. package/src/button/_stories/Button.test.story.tsx +30 -0
  138. package/src/card/Card.less +3 -3
  139. package/src/checkbox/Checkbox.story.tsx +1 -6
  140. package/src/checkbox/Checkbox.test.story.tsx +33 -0
  141. package/src/checkboxButton/CheckboxButton.less +2 -2
  142. package/src/chips/Chip.less +3 -3
  143. package/src/circularButton/CircularButton.story.tsx +0 -6
  144. package/src/circularButton/CircularButton.test.story.tsx +62 -1
  145. package/src/common/Option/Option.less +2 -2
  146. package/src/common/bottomSheet/BottomSheet.less +1 -1
  147. package/src/common/bottomSheet/BottomSheet.story.tsx +0 -55
  148. package/src/common/bottomSheet/BottomSheet.test.story.tsx +118 -2
  149. package/src/common/closeButton/CloseButton.less +1 -1
  150. package/src/common/panel/Panel.less +1 -1
  151. package/src/criticalBanner/CriticalCommsBanner.test.story.tsx +1 -1
  152. package/src/dateLookup/DateLookup.less +1 -1
  153. package/src/dateLookup/DateLookup.story.tsx +0 -18
  154. package/src/dateLookup/DateLookup.test.story.tsx +51 -1
  155. package/src/dateLookup/dateTrigger/DateTrigger.less +2 -2
  156. package/src/decision/Decision.less +1 -1
  157. package/src/definitionList/DefinitionList.less +1 -1
  158. package/src/dimmer/Dimmer.less +2 -2
  159. package/src/divider/Divider.story.tsx +0 -1
  160. package/src/expressiveMoneyInput/ExpressiveMoneyInput.autofocus.docs.mdx +1 -1
  161. package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx +0 -9
  162. package/src/expressiveMoneyInput/ExpressiveMoneyInput.test.story.tsx +23 -0
  163. package/src/field/Field.story.tsx +1 -34
  164. package/src/field/Field.test.story.tsx +56 -0
  165. package/src/flowNavigation/FlowNavigation.less +1 -1
  166. package/src/flowNavigation/animatedLabel/AnimatedLabel.less +2 -2
  167. package/src/header/Header.test.story.tsx +1 -1
  168. package/src/info/Info.less +1 -1
  169. package/src/info/Info.story.tsx +1 -34
  170. package/src/info/Info.test.story.tsx +53 -0
  171. package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx +0 -12
  172. package/src/inputWithDisplayFormat/InputWithDisplayFormat.test.story.tsx +33 -0
  173. package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.less +1 -1
  174. package/src/inputs/SelectInput/Options/SelectInputOptions.less +1 -1
  175. package/src/inputs/SelectInput/SelectInput.less +1 -1
  176. package/src/inputs/_common.less +1 -1
  177. package/src/legacylistItem/LegacyListItem.test.story.tsx +1 -1
  178. package/src/link/Link.less +2 -2
  179. package/src/listItem/ListItem.less +1 -1
  180. package/src/listItem/_stories/Breakpoints/ListItem.noMedia.test.story.tsx +1 -1
  181. package/src/listItem/_stories/Breakpoints/ListItem.sideMedia.test.story.tsx +1 -1
  182. package/src/listItem/_stories/Breakpoints/ListItem.stackedMedia.test.story.tsx +1 -1
  183. package/src/listItem/_stories/ListItem.focus.test.story.tsx +1 -1
  184. package/src/listItem/_stories/ListItem.layout.test.story.tsx +1 -1
  185. package/src/listItem/_stories/variants/ListItem.brightGreen.test.story.tsx +1 -1
  186. package/src/listItem/_stories/variants/ListItem.dark.test.story.tsx +1 -1
  187. package/src/listItem/_stories/variants/ListItem.forestGreen.test.story.tsx +1 -1
  188. package/src/listItem/_stories/variants/ListItem.medium.test.story.tsx +1 -1
  189. package/src/listItem/_stories/variants/ListItem.neutral.test.story.tsx +1 -1
  190. package/src/listItem/_stories/variants/ListItem.personal.test.story.tsx +1 -1
  191. package/src/listItem/_stories/variants/ListItem.rtl.test.story.tsx +1 -1
  192. package/src/listItem/_stories/variants/ListItem.small.test.story.tsx +1 -1
  193. package/src/logo/Logo.story.tsx +0 -6
  194. package/src/logo/Logo.test.story.tsx +20 -0
  195. package/src/main.css +27004 -7
  196. package/src/main.less +2 -0
  197. package/src/modal/Modal.story.tsx +0 -26
  198. package/src/modal/Modal.test.story.tsx +125 -0
  199. package/src/moneyInput/MoneyInput.less +2 -2
  200. package/src/moneyInput/MoneyInput.test.story.tsx +1 -1
  201. package/src/navigationOption/NavigationOption.less +3 -3
  202. package/src/navigationOptionsList/NavigationOptionsList.less +1 -1
  203. package/src/overlayHeader/OverlayHeader.less +1 -1
  204. package/src/phoneNumberInput/PhoneNumberInput.less +1 -1
  205. package/src/popover/Popover.less +1 -1
  206. package/src/prompt/ActionPrompt/ActionPrompt.story.tsx +0 -43
  207. package/src/prompt/ActionPrompt/ActionPrompt.test.story.tsx +45 -1
  208. package/src/radioGroup/RadioGroup.test.story.tsx +1 -1
  209. package/src/select/Select.less +5 -5
  210. package/src/slidingPanel/SlidingPanel.less +2 -2
  211. package/src/snackbar/Snackbar.less +3 -3
  212. package/src/stepper/Stepper.less +3 -3
  213. package/src/stepper/Stepper.test.story.tsx +1 -1
  214. package/src/styles/fonts/TW-Averta-Bold.woff +0 -0
  215. package/src/styles/fonts/TW-Averta-Bold.woff2 +0 -0
  216. package/src/styles/fonts/TW-Averta-Regular.woff +0 -0
  217. package/src/styles/fonts/TW-Averta-Regular.woff2 +0 -0
  218. package/src/styles/fonts/TW-Averta-Semibold.woff +0 -0
  219. package/src/styles/fonts/TW-Averta-Semibold.woff2 +0 -0
  220. package/src/styles/fonts/TransferWise-IconFont.svg +81 -0
  221. package/src/styles/fonts/TransferWise-IconFont.woff +0 -0
  222. package/src/styles/fonts/WiseSans-Heavy.woff2 +0 -0
  223. package/src/styles/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
  224. package/src/styles/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
  225. package/src/styles/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
  226. package/src/styles/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
  227. package/src/styles/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
  228. package/src/styles/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
  229. package/src/styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
  230. package/src/styles/img/bg-dark.svg +31 -0
  231. package/src/styles/img/bg-light.svg +26 -0
  232. package/src/styles/less/accordion.css +255 -0
  233. package/src/styles/less/accordion.less +15 -0
  234. package/src/styles/less/addons/_background-utilities.less +82 -0
  235. package/src/styles/less/addons/_border.less +3 -0
  236. package/src/styles/less/addons/_display-utilities.less +159 -0
  237. package/src/styles/less/addons/_spacing-utilities.less +73 -0
  238. package/src/styles/less/addons/_utilities.less +147 -0
  239. package/src/styles/less/alerts.css +751 -0
  240. package/src/styles/less/alerts.less +252 -0
  241. package/src/styles/less/background.css +20 -0
  242. package/src/styles/less/background.less +24 -0
  243. package/src/styles/less/badge.css +90 -0
  244. package/src/styles/less/badge.less +85 -0
  245. package/src/styles/less/border-radius.css +3 -0
  246. package/src/styles/less/border-radius.less +3 -0
  247. package/src/styles/less/breadcrumbs.css +20 -0
  248. package/src/styles/less/breadcrumbs.less +27 -0
  249. package/src/styles/less/button-groups.css +495 -0
  250. package/src/styles/less/button-groups.less +424 -0
  251. package/src/styles/less/buttons.css +1390 -0
  252. package/src/styles/less/buttons.less +738 -0
  253. package/src/styles/less/chevron.css +35 -0
  254. package/src/styles/less/chevron.less +39 -0
  255. package/src/styles/less/circles.css +248 -0
  256. package/src/styles/less/circles.less +233 -0
  257. package/src/styles/less/close.css +47 -0
  258. package/src/styles/less/close.less +48 -0
  259. package/src/styles/less/column-layout.css +164 -0
  260. package/src/styles/less/column-layout.less +167 -0
  261. package/src/styles/less/components/_component-animations.less +43 -0
  262. package/src/styles/less/core/_fonts.less +97 -0
  263. package/src/styles/less/core/_scaffolding.less +380 -0
  264. package/src/styles/less/core/_typography-utilities.less +255 -0
  265. package/src/styles/less/core/_typography.less +575 -0
  266. package/src/styles/less/core/viewport-themes.css +59 -0
  267. package/src/styles/less/core/viewport-themes.less +65 -0
  268. package/src/styles/less/currency-flags.css +46 -0
  269. package/src/styles/less/currency-flags.less +42 -0
  270. package/src/styles/less/decision.css +136 -0
  271. package/src/styles/less/decision.less +98 -0
  272. package/src/styles/less/dropdowns.css +472 -0
  273. package/src/styles/less/dropdowns.less +365 -0
  274. package/src/styles/less/droppable.css +221 -0
  275. package/src/styles/less/droppable.less +213 -0
  276. package/src/styles/less/flex.css +598 -0
  277. package/src/styles/less/flex.less +113 -0
  278. package/src/styles/less/footer.css +129 -0
  279. package/src/styles/less/footer.less +113 -0
  280. package/src/styles/less/forms/bootstrap-forms.css +2277 -0
  281. package/src/styles/less/forms/bootstrap-forms.less +1218 -0
  282. package/src/styles/less/forms/checkbox-radio.css +367 -0
  283. package/src/styles/less/forms/checkbox-radio.less +330 -0
  284. package/src/styles/less/grid.css +2369 -0
  285. package/src/styles/less/grid.less +187 -0
  286. package/src/styles/less/input-groups.css +2740 -0
  287. package/src/styles/less/input-groups.less +298 -0
  288. package/src/styles/less/link-callout.css +20 -0
  289. package/src/styles/less/link-callout.less +17 -0
  290. package/src/styles/less/list-group.css +350 -0
  291. package/src/styles/less/list-group.less +260 -0
  292. package/src/styles/less/loaders.css +76 -0
  293. package/src/styles/less/loaders.less +91 -0
  294. package/src/styles/less/media.css +74 -0
  295. package/src/styles/less/media.less +68 -0
  296. package/src/styles/less/mixins/_alerts.less +39 -0
  297. package/src/styles/less/mixins/_arrows.less +52 -0
  298. package/src/styles/less/mixins/_border-radius.less +11 -0
  299. package/src/styles/less/mixins/_buttons.less +82 -0
  300. package/src/styles/less/mixins/_center-block.less +7 -0
  301. package/src/styles/less/mixins/_clearfix.less +23 -0
  302. package/src/styles/less/mixins/_flex.less +105 -0
  303. package/src/styles/less/mixins/_forms.less +130 -0
  304. package/src/styles/less/mixins/_grid-framework.less +104 -0
  305. package/src/styles/less/mixins/_grid.less +158 -0
  306. package/src/styles/less/mixins/_hide-text.less +20 -0
  307. package/src/styles/less/mixins/_links.less +7 -0
  308. package/src/styles/less/mixins/_list-group.less +23 -0
  309. package/src/styles/less/mixins/_logical-properties-IE-friendly.less +381 -0
  310. package/src/styles/less/mixins/_logical-properties-modern-browsers.less +226 -0
  311. package/src/styles/less/mixins/_logical-properties.less +5 -0
  312. package/src/styles/less/mixins/_nav-divider.less +10 -0
  313. package/src/styles/less/mixins/_nav-vertical-align.less +10 -0
  314. package/src/styles/less/mixins/_panels.less +23 -0
  315. package/src/styles/less/mixins/_physical-properties.less +110 -0
  316. package/src/styles/less/mixins/_reset-text.less +22 -0
  317. package/src/styles/less/mixins/_sequence.less +203 -0
  318. package/src/styles/less/mixins/_spacing.less +122 -0
  319. package/src/styles/less/mixins/_tab-focus.less +5 -0
  320. package/src/styles/less/mixins/_table-row.less +47 -0
  321. package/src/styles/less/mixins/_text-emphasis.less +39 -0
  322. package/src/styles/less/mixins/_text-overflow.less +8 -0
  323. package/src/styles/less/mixins/_theming.less +7 -0
  324. package/src/styles/less/modals.css +185 -0
  325. package/src/styles/less/modals.less +239 -0
  326. package/src/styles/less/navbar.css +2406 -0
  327. package/src/styles/less/navbar.less +1442 -0
  328. package/src/styles/less/navs.css +296 -0
  329. package/src/styles/less/navs.less +339 -0
  330. package/src/styles/less/neptune-social-media.css +144 -0
  331. package/src/styles/less/neptune-social-media.less +84 -0
  332. package/src/styles/less/neptune.bundle.less +63 -0
  333. package/src/styles/less/neptune.css +25724 -0
  334. package/src/styles/less/panels.css +528 -0
  335. package/src/styles/less/panels.less +410 -0
  336. package/src/styles/less/popovers.css +661 -0
  337. package/src/styles/less/popovers.less +379 -0
  338. package/src/styles/less/process.css +483 -0
  339. package/src/styles/less/process.less +426 -0
  340. package/src/styles/less/progress-bars.css +64 -0
  341. package/src/styles/less/progress-bars.less +55 -0
  342. package/src/styles/less/ring.css +55 -0
  343. package/src/styles/less/ring.less +51 -0
  344. package/src/styles/less/select.css +99 -0
  345. package/src/styles/less/select.less +88 -0
  346. package/src/styles/less/sequences.css +855 -0
  347. package/src/styles/less/sequences.less +511 -0
  348. package/src/styles/less/table.css +446 -0
  349. package/src/styles/less/table.less +385 -0
  350. package/src/styles/less/tick.css +32 -0
  351. package/src/styles/less/tick.less +37 -0
  352. package/src/styles/less/tooltip.css +160 -0
  353. package/src/styles/less/tooltip.less +130 -0
  354. package/src/styles/less/utilities.css +145 -0
  355. package/src/styles/less/utilities.less +153 -0
  356. package/src/styles/less/wells.css +74 -0
  357. package/src/styles/less/wells.less +37 -0
  358. package/src/styles/props/custom-media.css +11 -0
  359. package/src/styles/props/legacy-custom-props.css +69 -0
  360. package/src/styles/props/neptune-tokens.css +11 -0
  361. package/src/styles/variables/legacy-variables.css +0 -0
  362. package/src/styles/variables/legacy-variables.less +1299 -0
  363. package/src/styles/variables/neptune-tokens.css +0 -0
  364. package/src/styles/variables/neptune-tokens.less +12 -0
  365. package/src/styles/variables/zindex.css +0 -0
  366. package/src/styles/variables/zindex.less +17 -0
  367. package/src/summary/Summary.less +1 -1
  368. package/src/summary/Summary.test.story.tsx +1 -1
  369. package/src/switch/Switch.less +4 -4
  370. package/src/table/Table.less +1 -1
  371. package/src/tabs/Tabs.less +4 -4
  372. package/src/tile/Tile.less +1 -1
  373. package/src/tooltip/Tooltip.less +1 -1
  374. package/src/tooltip/Tooltip.story.tsx +0 -21
  375. package/src/tooltip/Tooltip.test.story.tsx +42 -0
  376. package/src/typeahead/Typeahead.less +2 -2
  377. package/src/typeahead/Typeahead.story.tsx +0 -52
  378. package/src/typeahead/Typeahead.test.story.tsx +73 -0
  379. package/src/typeahead/typeaheadOption/TypeaheadOption.less +1 -1
  380. package/src/upload/Upload.less +1 -1
  381. package/src/uploadInput/UploadInput.less +2 -2
  382. package/src/uploadInput/uploadItem/UploadItem.less +1 -1
package/build/styles/less/legacy-variables.less ADDED
@@ -0,0 +1,1299 @@
1
+ //
2
+ // Variables
3
+ // --------------------------------------------------
4
+
5
+ //== Colors
6
+ // Deprecated use Neptune Colors https://transferwise.github.io/neptune-web/styles/tokens/Colors
7
+ //
8
+
9
+ @brand-white: #fff;
10
+
11
+
12
+ @brand-pale-blue-minus-20: #77d9f7;
13
+ @brand-pale-blue-minus-10: #a7e2f9;
14
+ @brand-pale-blue: #dbf0fd;
15
+
16
+ @brand-navy-minus-20: #253655;
17
+ @brand-navy-minus-10: #2e4369;
18
+ @brand-navy: #37517e;
19
+
20
+ //=== Blues
21
+ //
22
+ //
23
+ @brand-blue-minus-20: #111824;
24
+ @brand-blue-minus-10: #192439;
25
+ @brand-blue: #223049;
26
+ @brand-blue-plus-10: #283957;
27
+ @brand-blue-plus-20: #2f4366;
28
+
29
+ //=== Dark Grays
30
+ //
31
+ //
32
+ @brand-grey-minus-20: #384347;
33
+ @brand-grey-minus-10: #4a5860;
34
+ @brand-grey: #5d7079;
35
+ @brand-grey-plus-10: #6f8691;
36
+ @brand-grey-plus-20: #829ca9;
37
+
38
+ //=== Light Grays
39
+ //
40
+ //
41
+ @brand-smoke-minus-20: #7e7f81;
42
+ @brand-smoke-minus-10: #a8aaac;
43
+ @brand-smoke: #d3d5d8;
44
+ @brand-smoke-plus-10: #e2e6e8;
45
+ @brand-smoke-plus-20: #f2f5f7;
46
+
47
+ //=== Light Blues
48
+ //
49
+ //
50
+ @brand-light-blue-minus-20: #008ec0;
51
+ @brand-light-blue-minus-10: #00a4df;
52
+ @brand-light-blue: #00b9ff;
53
+
54
+ @brand-light-blue-wash: #D8F1fA;
55
+
56
+ //=== Reds
57
+ //
58
+ //
59
+ @brand-red-minus-20: #B62A18;
60
+ @brand-red-minus-10: #C22E2E;
61
+ @brand-red: #F53636;
62
+
63
+ @brand-red-wash: #FFDFDF;
64
+ @brand-red-alert: #C22E2E;
65
+
66
+ //=== Greens
67
+ //
68
+ //
69
+ @brand-green-minus-20: #1B7940;
70
+ @brand-green-minus-10: #28B862;
71
+ @brand-green: #2ED06E;
72
+
73
+ @brand-green-wash: #D6F5E2;
74
+ @brand-green-alert: #1B7940;
75
+
76
+ //=== Oranges
77
+ //
78
+ //
79
+ @brand-orange-minus-20: #9E5F00;
80
+ @brand-orange-minus-10: #DF8700;
81
+ @brand-orange: #FFA600;
82
+
83
+ @brand-orange-wash: #FFF3DD;
84
+ @brand-orange-alert: #9E5F00;
85
+
86
+ //=== Yellows
87
+ //
88
+ //
89
+ @brand-yellow-minus-20: #c0ae10;
90
+ @brand-yellow-minus-10: #dfc912;
91
+ @brand-yellow: #ffe714;
92
+
93
+
94
+ //== Bootstrap Color Mapping
95
+ //
96
+ //## Gray and brand colors for use across Bootstrap.
97
+
98
+ @gray-base: @brand-smoke-plus-20;
99
+ @gray-darker: @brand-grey-minus-20;
100
+ @gray-dark: @brand-grey-minus-10;
101
+ @gray: @brand-grey;
102
+ @gray-light: @brand-grey-plus-20;
103
+ @gray-lighter: @brand-smoke;
104
+
105
+ @brand-primary: @brand-navy;
106
+ @brand-success: @brand-green;
107
+ @brand-info: @brand-light-blue;
108
+ @brand-warning: @brand-orange;
109
+ @brand-danger: @brand-red;
110
+
111
+ //== Scaffolding
112
+ //
113
+ //## Settings for some of the most global styles.
114
+
115
+ //** Background color for `<body>`.
116
+ @body-bg: @brand-white;
117
+ //** Global text color on `<body>`.
118
+ @text-color: @brand-grey;
119
+ //** Bold text color on `<body>`.
120
+ @text-bold-color: @brand-navy-minus-10;
121
+
122
+ @text-secondary-color: @brand-grey;
123
+
124
+ //== Typography
125
+ //
126
+ //## Font, line-height, and color for body text, headings, and more.
127
+
128
+ @font-family-sans-serif: var(--font-family-regular);
129
+ @font-family-serif: Georgia, "Times New Roman", Times, serif;
130
+ //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
131
+ @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
132
+ @font-family-base: @font-family-sans-serif;
133
+
134
+ @font-size-base: 16px;
135
+ @font-size-large: 18px;
136
+ @font-size-medium: 16px;
137
+ @font-size-small: 14px;
138
+ @font-size-xsmall: 12px;
139
+
140
+ @font-size-h1: 42px;
141
+ @font-size-h2: 28px;
142
+ @font-size-h3: 22px;
143
+ @font-size-h4: 18px;
144
+ @font-size-h5: 16px;
145
+ @font-size-h6: 14px;
146
+
147
+ @line-height-h1: 48px;
148
+ @line-height-h2: 32px;
149
+ @line-height-h3: 30px;
150
+ @line-height-h4: 24px;
151
+ @line-height-h5: 24px;
152
+ @line-height-h6: 24px;
153
+
154
+ @font-spacing-base: 0.016em;
155
+ @font-spacing-semi-bold: 0;
156
+
157
+ @font-weight-normal: 500;
158
+ @font-weight-semi-bold: 600;
159
+ @font-weight-bold: 800;
160
+
161
+ //** Unit-less `line-height` for use in components like buttons.
162
+ @line-height-base: 24px; // 24/16
163
+ //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
164
+ @line-height-computed: 24px; // ~24px
165
+
166
+ //** By default, this inherits from the `<body>`.
167
+ @headings-font-family: var(--font-family-regular);
168
+ @headings-font-weight: @font-weight-semi-bold;
169
+ @headings-line-height: 1.2; //1.1;
170
+ @headings-color: @brand-navy-minus-10;
171
+
172
+ @display1-size: 104px;
173
+ @display2-size: 88px;
174
+ @display3-size: 72px;
175
+ @display4-size: 56px;
176
+
177
+ @display1-weight: @font-weight-bold;
178
+ @display2-weight: @font-weight-bold;
179
+ @display3-weight: @font-weight-bold;
180
+ @display4-weight: @font-weight-bold;
181
+
182
+ @display1-margin-bottom: 8px;
183
+ @display2-margin-bottom: 16px;
184
+ @display3-margin-bottom: 24px;
185
+ @display4-margin-bottom: 24px;
186
+
187
+ @display1-line-height: 128px;
188
+ @display2-line-height: 112px;
189
+ @display3-line-height: 88px;
190
+ @display4-line-height: 72px;
191
+
192
+ @buttons-font-family: var(--font-family-regular);
193
+
194
+ //** Global textual link color.
195
+ @link-color: @brand-light-blue;
196
+ //** Global textual link color.
197
+ @link-decoration: underline;
198
+ //** Link hover color
199
+ @link-hover-color: @brand-light-blue-minus-10;
200
+ //** Link hover decoration.
201
+ @link-hover-decoration: underline;
202
+ //** Link active color
203
+ @link-active-color: @brand-light-blue-minus-20;
204
+ //** Link disabled color
205
+ @link-disabled-color: @brand-smoke-minus-10;
206
+ //** Link font weight
207
+ @link-font-weight: @font-weight-semi-bold;
208
+
209
+ @link-secondary-color: @brand-navy;
210
+ @link-secondary-hover-color: @link-color;
211
+ @link-secondary-active-color: @link-hover-color;
212
+ @link-secondary-font-weight: @font-weight-normal;
213
+
214
+ //== Iconography
215
+ //
216
+ //## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
217
+
218
+ //** Load fonts from this directory.
219
+ @icon-font-path: "../fonts/";
220
+ //** File name for all font files.
221
+ @icon-font-name: "glyphicons-halflings-regular";
222
+ //** Element ID within SVG icon file.
223
+ @icon-font-svg-id: "glyphicons_halflingsregular";
224
+
225
+ //== Components
226
+ //
227
+ //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
228
+
229
+ @padding-base-vertical: 8px;
230
+ @padding-base-horizontal: 16px;
231
+
232
+ @padding-large-vertical: 12px;
233
+ @padding-large-horizontal: 16px;
234
+
235
+ @padding-small-vertical: 4px;
236
+ @padding-small-horizontal: 12px;
237
+
238
+ @padding-xs-vertical: 2px;
239
+ @padding-xs-horizontal: 8px;
240
+
241
+ @line-height-large: 32px; // 18*1.555 = 28
242
+ @line-height-small: 24px; // 12*1.5=18
243
+
244
+ @border-radius-base: 3px;
245
+ @border-radius-large: 3px;
246
+ @border-radius-small: 2px;
247
+
248
+ @spacer: @padding-base-vertical;
249
+ @spacer-y: @spacer;
250
+ @spacer-x: @spacer;
251
+
252
+ //** Global color for active items (e.g., navs or dropdowns).
253
+ @component-active-color: #fff;
254
+ //** Global background color for active items (e.g., navs or dropdowns).
255
+ @component-active-bg: @brand-navy-minus-10;
256
+
257
+ //** Width of the `border` for generating carets that indicator dropdowns.
258
+ @caret-width-base: 4px;
259
+ //** Carets increase slightly in size for larger components.
260
+ @caret-width-large: 5px;
261
+
262
+
263
+ @spacing-1-mobile: 16px;
264
+ @spacing-1-tablet: 24px;
265
+ @spacing-1-desktop: 32px;
266
+
267
+ @spacing-2-mobile: 32px;
268
+ @spacing-2-tablet: 48px;
269
+ @spacing-2-desktop: 64px;
270
+
271
+ @spacing-3-mobile: 48px;
272
+ @spacing-3-tablet: 72px;
273
+ @spacing-3-desktop: 96px;
274
+
275
+ @spacing-5-mobile: 80px;
276
+ @spacing-5-tablet: 120px;
277
+ @spacing-5-desktop: 160px;
278
+
279
+ @spacing-7-mobile: 112px;
280
+ @spacing-7-tablet: 168px;
281
+ @spacing-7-desktop: 224px;
282
+
283
+
284
+
285
+ //== Tables
286
+ //
287
+ //## Customizes the `.table` component with basic values, each used across all table variations.
288
+
289
+ //** Padding for `<th>`s and `<td>`s.
290
+ @table-cell-padding: 16px;
291
+ //** Padding for cells in `.table-condensed`.
292
+ @table-condensed-cell-padding: 8px;
293
+
294
+ //** Default background color used for all tables.
295
+ @table-bg: @brand-white;
296
+ //** Background color used for `.table-striped`.
297
+ @table-bg-accent: @gray-base; //#f9f9f9;
298
+ //** Background color used for `.table-hover`.
299
+ @table-bg-hover: @state-info-bg;
300
+ @table-bg-active: @table-bg-hover;
301
+
302
+ //** Border color for table and cell borders.
303
+ @table-border-color: @brand-smoke-plus-20;
304
+
305
+ //== Panels
306
+ //
307
+ //##
308
+
309
+ @panel-border-radius: @border-radius-base;
310
+ @panel-focus-transtion: @transition-duration;
311
+
312
+ //== Buttons
313
+ //
314
+ //## For each of Bootstrap's buttons, define text, background and border color.
315
+
316
+ @btn-font-weight: @font-weight-semi-bold; //normal;
317
+
318
+ @btn-height: @input-height-base;
319
+ @btn-font-size: 16px;
320
+ @btn-line-height: 24px;
321
+ @btn-border-width: 1px;
322
+ @btn-padding-horizontal: 24px;
323
+ @btn-padding-vertical: @padding-large-vertical;
324
+ @btn-padding: @btn-padding-vertical @btn-padding-horizontal;
325
+
326
+ @btn-xs-height: 22px; // TODO 24?
327
+ @btn-xs-font-size: 12px;
328
+ @btn-xs-line-height: 18px;
329
+ @btn-xs-padding-horizontal: 8px;
330
+ @btn-xs-padding-vertical: @padding-xs-vertical;
331
+ @btn-xs-padding: @btn-xs-padding-vertical @btn-xs-padding-horizontal;
332
+
333
+ @btn-sm-height: @input-height-small;
334
+ @btn-sm-font-size: 14px;
335
+ @btn-sm-line-height: 24px;
336
+ @btn-sm-padding-horizontal: 16px;
337
+ @btn-sm-padding-vertical: @padding-small-vertical;
338
+ @btn-sm-padding: @btn-sm-padding-vertical @btn-sm-padding-horizontal;
339
+
340
+ @btn-lg-height: @input-height-large;
341
+ @btn-lg-font-size: 20px;
342
+ @btn-lg-line-height: 32px;
343
+ @btn-lg-padding-horizontal: 24px;
344
+ @btn-lg-padding-vertical: ((@input-height-large - @btn-lg-line-height) / 2);
345
+ @btn-lg-padding: @btn-lg-padding-vertical @btn-lg-padding-horizontal @btn-lg-padding-vertical;
346
+
347
+ @btn-disabled-bg: @brand-smoke-plus-10;
348
+ @btn-disabled-color: @brand-smoke-minus-10;
349
+
350
+
351
+ //=== Button Default
352
+ //
353
+ //
354
+ @btn-default-color: @brand-light-blue;
355
+ @btn-default-bg: transparent;
356
+ @btn-default-border: @brand-light-blue;
357
+ @btn-default-bg-hover: @brand-light-blue;
358
+ @btn-default-border-hover: @brand-light-blue;
359
+ @btn-default-bg-active: @brand-light-blue-minus-20;
360
+ @btn-default-border-active: @brand-light-blue-minus-20;
361
+
362
+ //=== Button Primary
363
+ //
364
+ //
365
+ @btn-primary-color: #fff;
366
+ @btn-primary-bg: @brand-light-blue;
367
+ @btn-primary-border: @brand-light-blue;
368
+ @btn-primary-bg-hover: @brand-light-blue-minus-10;
369
+ @btn-primary-border-hover: @brand-light-blue-minus-10;
370
+ @btn-primary-bg-active: @brand-light-blue-minus-20;
371
+ @btn-primary-border-active: @brand-light-blue-minus-20;
372
+
373
+ //=== Button Success
374
+ //
375
+ //
376
+ @btn-success-color: #fff;
377
+ @btn-success-bg: @brand-green;
378
+ @btn-success-border: @brand-green;
379
+ @btn-success-bg-hover: @brand-green-minus-10;
380
+ @btn-success-border-hover: @brand-green-minus-10;
381
+ @btn-success-bg-active: @brand-green-minus-20;
382
+ @btn-success-border-active: @brand-green-minus-20;
383
+
384
+ //=== Button Info
385
+ //
386
+ //
387
+ @btn-info-color: @brand-grey-plus-10;
388
+ @btn-info-bg: transparent;
389
+ @btn-info-border: @brand-grey-plus-10;
390
+ @btn-info-bg-hover: @brand-light-blue;
391
+ @btn-info-border-hover: @brand-light-blue;
392
+ @btn-info-bg-active: @brand-light-blue-minus-20;
393
+ @btn-info-border-active: @brand-light-blue-minus-20;
394
+
395
+ //=== Button Warning
396
+ //
397
+ //
398
+ @btn-warning-color: @brand-orange;
399
+ @btn-warning-bg: transparent;
400
+ @btn-warning-border: @brand-orange;
401
+ @btn-warning-bg-hover: @brand-orange-minus-10;
402
+ @btn-warning-border-hover: @brand-orange-minus-10;
403
+ @btn-warning-bg-active: @brand-orange-minus-20;
404
+ @btn-warning-border-active: @brand-orange-minus-20;
405
+
406
+ //=== Button Danger
407
+ //
408
+ //
409
+ @btn-danger-color: @brand-grey-plus-10;
410
+ @btn-danger-bg: transparent;
411
+ @btn-danger-border: @brand-grey-plus-10;
412
+ @btn-danger-bg-hover: @brand-red;
413
+ @btn-danger-border-hover: @brand-red;
414
+ @btn-danger-bg-active: @brand-red-minus-20;
415
+ @btn-danger-border-active: @brand-red-minus-20;
416
+
417
+ //=== Button Download
418
+ //
419
+ //
420
+ @btn-download-color: #fff;
421
+ @btn-download-bg: #000;
422
+ @btn-download-border: #bbb;
423
+ @btn-download-bg-hover: #333;
424
+ @btn-download-border-hover: #999;
425
+ @btn-download-bg-active: #666;
426
+ @btn-download-border-active: #666;
427
+
428
+ @btn-facebook: #3B5998;
429
+ @btn-facebook-active: #344F88;
430
+ @btn-google: #4285F4;
431
+ @btn-google-active: #3B77DB;
432
+
433
+ //== Forms
434
+ //
435
+ //##
436
+
437
+ //** `<input>` background color
438
+ @input-bg: #fff;
439
+ //** `<input disabled>` background color
440
+ @input-bg-disabled: @brand-smoke-plus-20;
441
+ //** Text color for `<input>`s
442
+ @input-color: @brand-navy-minus-10;
443
+ //** `<input disabled>` color
444
+ @input-color-disabled: @brand-smoke;
445
+
446
+ //** `<input>` border color
447
+ @input-border: @brand-smoke;
448
+ //** `<input>` border hover
449
+ @input-border-hover: @brand-grey-plus-20;
450
+ //** `<input disabled>` border color
451
+ @input-border-disabled: @brand-smoke-plus-10;
452
+
453
+ @input-font-size: 16px;
454
+ @input-line-height: @btn-line-height;
455
+ @input-padding: @padding-large-vertical @padding-base-horizontal;
456
+
457
+ @input-font-size-small: 14px;
458
+ @input-line-height-small: @btn-sm-line-height;
459
+ @input-padding-small: @padding-small-vertical @padding-small-horizontal;
460
+
461
+ @input-font-size-large: 22px;
462
+ @input-line-height-large: @btn-lg-line-height;
463
+ @input-padding-large: @padding-large-vertical @padding-large-horizontal;
464
+
465
+ // TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
466
+ //** Default `.form-control` border radius
467
+ // This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
468
+ @input-border-radius: @border-radius-base; //@border-radius-base;
469
+ //** Large `.form-control` border radius
470
+ @input-border-radius-large: @border-radius-base; //@border-radius-large;
471
+ //** Small `.form-control` border radius
472
+ @input-border-radius-small: @border-radius-base;
473
+
474
+ //** Border color for inputs on focus
475
+ @input-border-focus: @brand-light-blue;
476
+
477
+ //** Placeholder text color
478
+ @input-color-placeholder: @brand-smoke-minus-10;
479
+
480
+ //** Default `.form-control` height
481
+ @input-height-base: 48px; //(@line-height-computed + (@padding-base-vertical * 2) + 2);
482
+ //** Large `.form-control` height
483
+ @input-height-large: 72px; //(ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
484
+ //** Small `.form-control` height
485
+ @input-height-small: 32px; //(floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
486
+
487
+ //** `.form-group` margin
488
+ @form-group-margin-bottom: 24px; // Visible space is 24px but line height(20) is 6px bigger than font size(14)
489
+
490
+ @legend-color: @headings-color;
491
+ @legend-border-color: @input-border;
492
+
493
+ @control-label-color: @text-color;
494
+ @control-label-focus: @brand-light-blue-minus-20;
495
+ @control-label-font-size: @font-size-small;
496
+
497
+ //** Color for textual input addons
498
+ @input-group-color: @brand-smoke-minus-10;
499
+ @input-group-addon-font-size: @input-font-size;
500
+ @input-group-addon-bg: @input-bg;
501
+ @input-group-addon-border-color: @input-border;
502
+ @input-group-addon-padding: @padding-large-vertical @padding-base-horizontal;
503
+
504
+ @input-group-addon-sm-padding: @padding-small-vertical @padding-small-horizontal;
505
+ @input-group-addon-lg-padding: @padding-large-vertical @padding-large-horizontal;
506
+
507
+ //** Disabled cursor for form controls and buttons.
508
+ @cursor-disabled: not-allowed;
509
+ @cursor-default: default;
510
+
511
+ //=== Button Download
512
+ //
513
+ //
514
+ @btn-download-color: #fff;
515
+ @btn-download-bg: #000;
516
+ @btn-download-border: #bbb;
517
+ @btn-download-bg-hover: #333;
518
+ @btn-download-border-hover: #999;
519
+ @btn-download-bg-active: #666;
520
+ @btn-download-border-active: #666;
521
+
522
+ @btn-facebook: #3B5998;
523
+ @btn-facebook-active: #344F88;
524
+ @btn-google: #4285F4;
525
+ @btn-google-active: #3B77DB;
526
+
527
+
528
+
529
+ //== Dropdowns
530
+ //
531
+ //## Dropdown menu container and contents.
532
+
533
+ //** Background for the dropdown menu.
534
+ @dropdown-bg: #fff;
535
+ //** Dropdown menu `border-color`.
536
+ @dropdown-border: @brand-smoke-plus-10;
537
+ //** Dropdown menu `border-color` **for IE8**.
538
+ @dropdown-fallback-border: @brand-white;
539
+ //** Divider color for between dropdown items.
540
+ @dropdown-divider-bg: @brand-smoke-plus-20;
541
+
542
+ //** Dropdown link text color.
543
+ @dropdown-link-color: @brand-navy-minus-10;
544
+ //** Dropdown link padding.
545
+ @dropdown-link-padding: @padding-large-vertical @padding-large-horizontal;
546
+
547
+ //** Hover color for dropdown links.
548
+ @dropdown-link-hover-color: @brand-navy-minus-10;
549
+ //** Hover background for dropdown links.
550
+ @dropdown-link-hover-bg: @brand-smoke-plus-20;
551
+
552
+ //** Active dropdown menu item text color.
553
+ @dropdown-link-active-color: @component-active-color;
554
+ //** Active dropdown menu item background color.
555
+ @dropdown-link-active-bg: @component-active-bg;
556
+
557
+ //** Disabled dropdown menu item background color.
558
+ @dropdown-link-disabled-color: @link-disabled-color;
559
+
560
+ //** Text color for headers within dropdown menus.
561
+ @dropdown-header-color: @control-label-color;
562
+
563
+ //** Deprecated `@dropdown-caret-color` as of v3.1.0
564
+ @dropdown-caret-color: #000;
565
+
566
+ @transition-duration: 0.15s;
567
+
568
+ @dropdown-arrow-width: 8px;
569
+
570
+
571
+ //-- Z-index master list
572
+ //
573
+ // Warning: Avoid customizing these values. They're used for a bird's eye view
574
+ // of components dependent on the z-axis and are designed to all work together.
575
+ //
576
+ // Note: These variables are not generated into the Customizer.
577
+
578
+ @zindex-navbar: 1000;
579
+ @zindex-dropdown: 1000;
580
+ @zindex-popover: 1060;
581
+ @zindex-tooltip: 1070;
582
+ @zindex-navbar-fixed: 1030;
583
+ @zindex-modal-background: 1040;
584
+ @zindex-modal: 1050;
585
+
586
+
587
+ @zindex-mobile-nav-background: 1055;
588
+ @zindex-mobile-nav: 1060;
589
+
590
+
591
+ //== Media queries breakpoints
592
+ //
593
+ //## Define the breakpoints at which your layout will change, adapting to different screen sizes.
594
+
595
+ // Extra small screen / phone
596
+ //** Deprecated `@screen-xs` as of v3.0.1
597
+ @screen-xs: 480px;
598
+ //** Deprecated `@screen-xs-min` as of v3.2.0
599
+ @screen-xs-min: @screen-xs;
600
+ //** Deprecated `@screen-phone` as of v3.0.1
601
+ @screen-phone: @screen-xs-min;
602
+
603
+ // Small screen / tablet
604
+ //** Deprecated `@screen-sm` as of v3.0.1
605
+ @screen-sm: 576px;
606
+ @screen-sm-min: @screen-sm;
607
+ //** Deprecated `@screen-tablet` as of v3.0.1
608
+ @screen-tablet: @screen-sm-min;
609
+
610
+ // Medium screen / desktop
611
+ //** Deprecated `@screen-md` as of v3.0.1
612
+ @screen-md: 768px;
613
+ @screen-md-min: @screen-md;
614
+ //** Deprecated `@screen-desktop` as of v3.0.1
615
+ @screen-desktop: @screen-md-min;
616
+
617
+ // Large screen / wide desktop
618
+ //** Deprecated `@screen-lg` as of v3.0.1
619
+ @screen-lg: 992px;
620
+ @screen-lg-min: @screen-lg;
621
+ //** Deprecated `@screen-lg-desktop` as of v3.0.1
622
+ @screen-lg-desktop: @screen-lg-min;
623
+
624
+
625
+ // Extra Large screen / wide desktop
626
+ //** Deprecated `@screen-lg` as of v3.0.1
627
+ @screen-xl: 1200px;
628
+ @screen-xl-min: @screen-xl;
629
+
630
+ // So media queries don't overlap when required, provide a maximum
631
+ @screen-xs-max: (@screen-sm-min - 1);
632
+ @screen-sm-max: (@screen-md-min - 1);
633
+ @screen-md-max: (@screen-lg-min - 1);
634
+ @screen-lg-max: (@screen-xl-min - 1);
635
+
636
+
637
+ //== Grid system
638
+ //
639
+ //## Define your custom responsive grid.
640
+
641
+ //** Number of columns in the grid.
642
+ @grid-columns: 12;
643
+ //** Padding between columns. Gets divided in half for the left and right.
644
+ @grid-gutter-width: 24px;
645
+ // Navbar collapse
646
+ //** Point at which the navbar becomes uncollapsed.
647
+ @grid-float-breakpoint: @screen-md-min;
648
+ //** Point at which the navbar begins collapsing.
649
+ @grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
650
+
651
+
652
+ //== Container sizes
653
+ //
654
+ //## Define the maximum width of `.container` for different screen sizes.
655
+
656
+ // Small screen / tablet
657
+ @container-tablet: (544px + @grid-gutter-width);
658
+ //** For `@screen-sm-min` and up.
659
+ @container-sm: @container-tablet;
660
+
661
+ // Medium screen / desktop
662
+ @container-desktop: (720px + @grid-gutter-width);
663
+ //** For `@screen-md-min` and up.
664
+ @container-md: @container-desktop;
665
+
666
+ // Large screen / wide desktop
667
+ @container-large-desktop: (940px + @grid-gutter-width);
668
+ //** For `@screen-lg-min` and up.
669
+ @container-lg: @container-large-desktop;
670
+
671
+ // Large screen / wide desktop
672
+ @container-xlarge-desktop: (1140px + @grid-gutter-width);
673
+ //** For `@screen-xl-min` and up.
674
+ @container-xl: @container-xlarge-desktop;
675
+
676
+ @nav-link-color: @link-secondary-color;
677
+ @nav-link-hover-color: @link-secondary-hover-color;
678
+ @nav-link-active-color: @link-secondary-active-color;
679
+
680
+ @nav-active-link-color: @link-color;
681
+ @nav-active-link-hover-color: @link-hover-color;
682
+ @nav-active-link-active-color: @link-active-color;
683
+
684
+ @nav-inverse-link-color: @brand-pale-blue;
685
+ @nav-inverse-link-hover-color: @brand-light-blue;
686
+ @nav-inverse-link-active-color: @brand-light-blue-minus-10;
687
+ @nav-inverse-link-active-bg: @brand-navy-minus-10;
688
+
689
+ //== Navbar
690
+ //
691
+ //##
692
+
693
+ // Basics of a navbar
694
+ @navbar-font-size: 14px;
695
+ @navbar-font-size-mobile: 16px;
696
+ @navbar-line-height: 40px;
697
+ @navbar-height: 56px;
698
+ @navbar-margin-bottom: 40px;
699
+ @navbar-border-radius: 0;
700
+ @navbar-padding-horizontal: 16px;
701
+ @navbar-padding-vertical: 8px;
702
+ @navbar-padding: (@navbar-padding-vertical + 1px) @navbar-padding-horizontal (@navbar-padding-vertical - 1px);
703
+ @navbar-padding-horizontal-mobile: (@spacer * 2);
704
+ @navbar-padding-mobile: (@navbar-padding-vertical + 1px) @navbar-padding-horizontal-mobile (@navbar-padding-vertical - 1px);
705
+
706
+
707
+ @navbar-collapse-max-height: 340px;
708
+ @navbar-collapse-max-width: (320px - 56px);
709
+ @navbar-collapse-bg: @brand-navy;
710
+
711
+ //=== Standard navbar
712
+ // Navbar basics
713
+ @navbar-default-color: @brand-navy-minus-10;
714
+ @navbar-default-bg: transparent;
715
+ @navbar-default-border: @brand-grey-minus-10;
716
+
717
+ // Navbar links
718
+ @navbar-default-link-color: @nav-link-color;
719
+ @navbar-default-link-hover-color: @nav-link-hover-color;
720
+ @navbar-default-link-hover-bg: transparent;
721
+ @navbar-default-link-active-color: @nav-active-link-color;
722
+ @navbar-default-link-active-bg: transparent;
723
+ @navbar-default-link-disabled-color: @brand-smoke;
724
+ @navbar-default-link-disabled-bg: transparent;
725
+
726
+ // Navbar brand label
727
+ @navbar-default-brand-color: @navbar-inverse-link-color;
728
+ @navbar-default-brand-hover-color: #fff;
729
+ @navbar-default-brand-hover-bg: transparent;
730
+
731
+ // Navbar toggle
732
+ @navbar-default-toggle-hover-bg: transparent;
733
+ @navbar-default-toggle-icon-bar-bg: @brand-light-blue;
734
+ @navbar-default-toggle-border-color: transparent;
735
+ @navbar-default-toggle-hover-border-color: @brand-light-blue;
736
+
737
+ // Navbar sercondary
738
+ @navbar-secondary-bg: transparent;
739
+ @navbar-secondary-height: 64px;
740
+ @navbar-secondary-padding-vertical: 12px;
741
+
742
+
743
+ //=== Inverted navbar
744
+ // Reset inverted navbar basics
745
+ @navbar-inverse-color: #FFF;
746
+ @navbar-inverse-bg: transparent;
747
+ @navbar-inverse-border: @brand-grey-minus-10;
748
+
749
+ // Inverted navbar links
750
+ @navbar-inverse-link-color: #FFF; // @nav-inverse-link-color;
751
+ @navbar-inverse-link-hover-color: @nav-inverse-link-hover-color;
752
+ @navbar-inverse-link-hover-bg: transparent;
753
+ @navbar-inverse-link-active-color: @nav-active-link-color;
754
+ @navbar-inverse-link-active-bg: transparent;
755
+ @navbar-inverse-link-disabled-color: #444;
756
+ @navbar-inverse-link-disabled-bg: transparent;
757
+
758
+ // Inverted navbar brand label
759
+ @navbar-inverse-brand-color: @navbar-default-link-color;
760
+ @navbar-inverse-brand-hover-color: darken(@navbar-default-brand-color, 10%);
761
+ @navbar-inverse-brand-hover-bg: transparent;
762
+
763
+ // Inverted navbar toggle
764
+ @navbar-inverse-toggle-hover-bg: transparent;
765
+ @navbar-inverse-toggle-icon-bar-bg: @brand-light-blue;
766
+ @navbar-inverse-toggle-border-color: transparent;
767
+ @navbar-inverse-toggle-hover-border-color: @brand-light-blue;
768
+
769
+ // Navbar sercondary
770
+ @navbar-inverse-secondary-bg: @brand-navy-minus-10;
771
+
772
+ //== Navs
773
+ //
774
+ //##
775
+
776
+ //=== Shared nav styles
777
+ @nav-link-padding: 9px 24px 7px;
778
+ @nav-link-hover-bg: @brand-smoke-plus-20;
779
+
780
+ @nav-disabled-link-color: @link-disabled-color;
781
+ @nav-disabled-link-hover-color: @link-disabled-color;
782
+
783
+ //== Tabs
784
+ @nav-tabs-border-color: @brand-smoke;
785
+ @nav-tabs-font-size: @font-size-base;
786
+ @nav-tabs-active-hover-border-color: @brand-light-blue;
787
+
788
+ @nav-tabs-justified-link-border-color: @brand-smoke;
789
+ @nav-tabs-justified-active-link-border-color: @body-bg;
790
+
791
+ //== Pills
792
+ @nav-pills-font-size: @font-size-small;
793
+
794
+ //== Pagination
795
+ //
796
+ //##
797
+
798
+ @pagination-color: @brand-navy;
799
+ @pagination-font-weight: @font-weight-normal;
800
+ @pagination-bg: transparent;
801
+
802
+ @pagination-hover-color: @brand-navy;
803
+ @pagination-hover-bg: @brand-smoke-plus-20;
804
+
805
+ @pagination-active-color: @brand-navy;
806
+ @pagination-active-bg: @brand-smoke-plus-20;
807
+
808
+ @pagination-disabled-color: @link-disabled-color;
809
+ @pagination-disabled-bg: #fff;
810
+ @pagination-disabled-border: @brand-smoke;
811
+
812
+ @pagination-inverse-hover-bg: @brand-white;
813
+ @pagination-inverse-active-bg: @brand-white;
814
+
815
+ //== Pager
816
+ //
817
+ //##
818
+
819
+ @pager-bg: @pagination-bg;
820
+ @pager-border-radius: @border-radius-base;
821
+
822
+ @pager-hover-color: #fff;
823
+ @pager-hover-bg: @pagination-hover-bg;
824
+
825
+ @pager-active-bg: @pagination-active-bg;
826
+ @pager-active-color: @pagination-active-color;
827
+
828
+ @pager-disabled-color: @pagination-disabled-color;
829
+
830
+
831
+ //== Jumbotron
832
+ //
833
+ //##
834
+
835
+ @jumbotron-padding: 32px;
836
+ @jumbotron-color: #FFF; //inherit;
837
+ @jumbotron-bg: @brand-navy;
838
+ @jumbotron-heading-color: #FFF; //inherit;
839
+ @jumbotron-font-size: 22px;
840
+ @jumbotron-heading-font-size: 42px;
841
+ @jumbotron-heading-line-height: 56px;
842
+
843
+ //== Form states and alerts
844
+ //
845
+ //## Define colors for form feedback states and, by default, alerts.
846
+
847
+ @state-success-text: @brand-green-minus-20;
848
+ @state-success-text-large: @brand-green;
849
+ @state-success-text-hover: @brand-green-minus-20;
850
+ @state-success-bg: @brand-green-wash;
851
+ @state-success-border: @brand-green;
852
+ @state-success-border-hover: @brand-green-minus-20;
853
+
854
+ @state-info-text: @brand-light-blue-minus-10;
855
+ @state-info-text-large: @brand-light-blue;
856
+ @state-info-text-hover: @brand-light-blue-minus-10;
857
+ @state-info-bg: @brand-light-blue-wash;
858
+ @state-info-border: @brand-light-blue;
859
+ @state-info-border-hover: @brand-light-blue-minus-20;
860
+
861
+ @state-warning-text: @brand-orange-minus-20;
862
+ @state-warning-text-large: @brand-orange;
863
+ @state-warning-text-hover: @brand-orange-minus-20;
864
+ @state-warning-bg: @brand-orange-wash;
865
+ @state-warning-border: @brand-orange;
866
+ @state-warning-border-hover: @brand-orange-minus-20;
867
+
868
+ @state-danger-text: @brand-red-minus-10;
869
+ @state-danger-text-large: @brand-red;
870
+ @state-danger-text-hover: @brand-red-minus-10;
871
+ @state-danger-bg: @brand-red-wash;
872
+ @state-danger-border: @brand-red;
873
+ @state-danger-border-hover: @brand-red-minus-20;
874
+
875
+
876
+ //== Tooltips
877
+ //
878
+ //##
879
+
880
+ //** Tooltip max width
881
+ @tooltip-max-width: 200px;
882
+ //** Tooltip text color
883
+ @tooltip-color: @brand-navy;
884
+ //** Tooltip background color
885
+ @tooltip-bg: @brand-white;
886
+ @tooltip-opacity: 1;
887
+
888
+ //** Tooltip arrow width
889
+ @tooltip-arrow-width: 5px;
890
+ //** Tooltip arrow color
891
+ @tooltip-arrow-color: @tooltip-bg;
892
+
893
+ //== Popovers
894
+ //
895
+ //##
896
+
897
+ //** Popover body background color
898
+ @popover-bg: @brand-white;
899
+ //** Popover maximum width
900
+ @popover-max-width: 276px;
901
+ //** Popover border color
902
+ @popover-border-color: @brand-white;
903
+ //** Popover fallback border color
904
+ @popover-fallback-border-color: @brand-white;
905
+
906
+ //** Popover title background color
907
+ @popover-title-bg: @brand-white;
908
+
909
+ //** Popover arrow width
910
+ @popover-arrow-width: 14px;
911
+ //** Popover arrow color
912
+ @popover-arrow-color: @popover-bg;
913
+
914
+ //** Popover outer arrow width
915
+ @popover-arrow-outer-width: (@popover-arrow-width + 1);
916
+ //** Popover outer arrow color
917
+ @popover-arrow-outer-color: @brand-white;
918
+ //** Popover outer arrow fallback color
919
+ @popover-arrow-outer-fallback-color: @brand-white;
920
+
921
+
922
+ //== Labels
923
+ //
924
+ //##
925
+
926
+ //** Default label background color
927
+ @label-default-bg: @brand-smoke;
928
+ @label-default-bg-hover: @brand-smoke-minus-10;
929
+ //** Primary label background color
930
+ @label-primary-bg: @brand-navy;
931
+ @label-primary-bg-hover: @brand-navy-minus-10;
932
+ //** Success label background color
933
+ @label-success-bg: @brand-green;
934
+ @label-success-bg-hover: @brand-green-minus-10;
935
+ //** Info label background color
936
+ @label-info-bg: @brand-light-blue;
937
+ @label-info-bg-hover: @brand-light-blue-minus-10;
938
+ //** Warning label background color
939
+ @label-warning-bg: @brand-orange;
940
+ @label-warning-bg-hover: @brand-orange-minus-10;
941
+ //** Danger label background color
942
+ @label-danger-bg: @brand-red;
943
+ @label-danger-bg-hover: @brand-red-minus-10;
944
+
945
+ //** Default label text color
946
+ @label-color: #fff;
947
+ //** Default text color of a linked label
948
+ @label-link-hover-color: #fff;
949
+
950
+
951
+ //== Modals
952
+ //
953
+ //##
954
+
955
+ //** Padding applied to the modal body
956
+ @modal-inner-padding: @spacing-1-desktop;
957
+ @modal-inner-padding-collapse: @spacing-1-tablet;
958
+
959
+ //** Padding applied to the modal title
960
+ @modal-title-padding: @spacing-1-desktop;
961
+ @modal-title-vertical-padding: 28px; // 2*28 + 24 = 80
962
+ //** Modal title line-height
963
+ @modal-title-line-height: @line-height-computed;
964
+
965
+ //** Background color of modal content area
966
+ @modal-content-bg: #fff;
967
+ //** Modal content border color
968
+ @modal-content-border-color: @brand-smoke-plus-10;
969
+ //** Modal content border color **for IE8**
970
+ @modal-content-fallback-border-color: #999;
971
+
972
+ //** Modal backdrop background color
973
+ @modal-backdrop-bg: @brand-navy;
974
+
975
+ //** Modal backdrop opacity
976
+ @modal-backdrop-opacity: .8;
977
+ //** Modal header border color
978
+ @modal-header-border-color: @brand-smoke-plus-10;
979
+ //** Modal footer border color
980
+ @modal-footer-border-color: @modal-header-border-color;
981
+
982
+ @modal-lg: 720px;
983
+ @modal-md: 540px;
984
+ @modal-sm: 300px;
985
+
986
+
987
+ //== Alerts
988
+ //
989
+ //## Define alert colors, border radius, and padding.
990
+
991
+ @alert-padding: 24px;
992
+ @alert-border-radius: @border-radius-base;
993
+ @alert-bar-width: 8px;
994
+ @alert-link-font-weight: bold;
995
+
996
+ @alert-success-bg: @state-success-bg;
997
+ @alert-success-text: @state-success-text;
998
+ @alert-success-text-hover: @state-success-text-hover;
999
+ @alert-success-border: @state-success-border;
1000
+
1001
+ @alert-info-bg: @brand-smoke-plus-20;
1002
+ @alert-info-text: @brand-grey-minus-10;
1003
+ @alert-info-text-hover: @brand-grey-minus-10;
1004
+ @alert-info-border: @brand-light-blue;
1005
+
1006
+ @alert-warning-bg: @state-warning-bg;
1007
+ @alert-warning-text: @state-warning-text;
1008
+ @alert-warning-text-hover: @state-warning-text-hover;
1009
+ @alert-warning-border: @state-warning-border;
1010
+
1011
+ @alert-danger-bg: @state-danger-bg;
1012
+ @alert-danger-text: @state-danger-text;
1013
+ @alert-danger-text-hover: @state-danger-text-hover;
1014
+ @alert-danger-border: @state-danger-border;
1015
+
1016
+ @alert-arrow-width: 10px;
1017
+
1018
+ //== Progress bars
1019
+ //
1020
+ //##
1021
+
1022
+ //** Progress bar height
1023
+ @progress-height: 2px;
1024
+ //** Large progress bar height
1025
+ @progress-height-lg: 32px;
1026
+ //** Background color of the whole progress component
1027
+ @progress-bg: @brand-smoke-plus-10;
1028
+ //** Progress bar text color
1029
+ @progress-bar-color: #fff;
1030
+
1031
+ //** Default progress bar color
1032
+ @progress-bar-bg: @brand-light-blue;
1033
+ //** Primary progress bar color
1034
+ @progress-bar-primary-bg: @brand-navy;
1035
+ //** Success progress bar color
1036
+ @progress-bar-success-bg: @brand-green;
1037
+ //** Warning progress bar color
1038
+ @progress-bar-warning-bg: @brand-orange;
1039
+ //** Danger progress bar color
1040
+ @progress-bar-danger-bg: @brand-red;
1041
+ //** Info progress bar color
1042
+ @progress-bar-info-bg: @brand-light-blue;
1043
+
1044
+ @progress-pip-size: 8px;
1045
+
1046
+ //== List group
1047
+ //
1048
+ //##
1049
+
1050
+ //** Background color on `.list-group-item`
1051
+ @list-group-bg: #fff;
1052
+ //** `.list-group-item` border color
1053
+ @list-group-border: @brand-smoke-plus-10;
1054
+ //** List group border radius
1055
+ @list-group-border-radius: @border-radius-base;
1056
+
1057
+ //** Background color of single list items on hover
1058
+ @list-group-hover-bg: @brand-smoke-plus-20;
1059
+ //** Text color of active list items
1060
+ @list-group-active-color: @component-active-color;
1061
+ //** Background color of active list items
1062
+ @list-group-active-bg: #fff;
1063
+ //** Border color of active list elements
1064
+ @list-group-active-border: @list-group-active-bg;
1065
+ //** Text color for content within active list items
1066
+ @list-group-active-text-color: #FFF; // lighten(@list-group-active-bg, 40%);
1067
+
1068
+ //** Text color of disabled list items
1069
+ @list-group-disabled-color: @link-disabled-color;
1070
+ //** Background color of disabled list items
1071
+ @list-group-disabled-bg: #FFF;
1072
+ //** Text color for content within disabled list items
1073
+ @list-group-disabled-text-color: @list-group-disabled-color;
1074
+
1075
+ @list-group-link-color: @link-color;
1076
+ @list-group-link-hover-color: @link-hover-color;
1077
+ @list-group-link-heading-color: @link-color;
1078
+
1079
+
1080
+ //== Panels
1081
+ //
1082
+ //##
1083
+
1084
+ @panel-bg: transparent;
1085
+ @panel-heading-color: @brand-navy-minus-10;
1086
+ @panel-border-radius: @border-radius-base;
1087
+ @panel-focus-transtion: @transition-duration;
1088
+
1089
+ //** Border color for elements within panels
1090
+ @panel-inner-border: #FFF;
1091
+ @panel-footer-bg: #fff;
1092
+
1093
+ @panel-default-text: @gray-dark;
1094
+ @panel-default-border: @brand-smoke-plus-10;
1095
+ @panel-default-heading-bg: #fff;
1096
+
1097
+ @panel-primary-text: #fff;
1098
+ @panel-primary-border: @brand-navy;
1099
+ @panel-primary-heading-bg: #fff;
1100
+
1101
+ @panel-success-text: @state-success-text;
1102
+ @panel-success-border: @state-success-border;
1103
+ @panel-success-heading-bg: #FFF;
1104
+
1105
+ @panel-info-text: @state-info-text;
1106
+ @panel-info-border: @state-info-border;
1107
+ @panel-info-heading-bg: #FFF;
1108
+
1109
+ @panel-warning-text: @state-warning-text;
1110
+ @panel-warning-border: @state-warning-border;
1111
+ @panel-warning-heading-bg: #FFF;
1112
+
1113
+ @panel-danger-text: @state-danger-text;
1114
+ @panel-danger-border: @state-danger-border;
1115
+ @panel-danger-heading-bg: #FFF;
1116
+
1117
+
1118
+
1119
+ //== Thumbnails
1120
+ //
1121
+ //##
1122
+
1123
+ //** Padding around the thumbnail image
1124
+ @thumbnail-padding: 0;
1125
+ //** Thumbnail background color
1126
+ @thumbnail-bg: @body-bg;
1127
+ //** Thumbnail border color
1128
+ @thumbnail-border: @brand-smoke-plus-10;
1129
+ //** Thumbnail border radius
1130
+ @thumbnail-border-radius: @border-radius-base;
1131
+
1132
+ //** Custom text color for thumbnail captions
1133
+ @thumbnail-caption-color: @text-color;
1134
+ //** Padding around the thumbnail caption
1135
+ @thumbnail-caption-padding: 24px;
1136
+
1137
+
1138
+ //== Tiles
1139
+ //
1140
+ //##
1141
+
1142
+ //** Padding around the tile
1143
+ @tile-font-size: @font-size-small;
1144
+
1145
+
1146
+
1147
+ //== Media objects
1148
+ //
1149
+ //##
1150
+ @media-object-padding-horizontal: (@spacer * 3);
1151
+
1152
+
1153
+ //== Wells
1154
+ //
1155
+ //##
1156
+
1157
+ @well-bg: @gray-base;
1158
+ @well-border: @gray-lighter;
1159
+
1160
+
1161
+
1162
+ //== Badges
1163
+ //
1164
+ //##
1165
+
1166
+ @badge-color: #fff;
1167
+ //** Linked badge text color on hover
1168
+ @badge-link-hover-color: #fff;
1169
+ @badge-bg: @brand-red;
1170
+
1171
+ //** Badge text color in active nav link
1172
+ @badge-active-color: @link-color;
1173
+ //** Badge background color in active nav link
1174
+ @badge-active-bg: #fff;
1175
+
1176
+ @badge-font-size: 10px;
1177
+ @badge-font-weight: bold;
1178
+ @badge-line-height: 1;
1179
+ @badge-border-radius: 10px;
1180
+
1181
+ //== Breadcrumbs
1182
+ //
1183
+ //##
1184
+
1185
+ @breadcrumb-padding-vertical: 8px;
1186
+ @breadcrumb-padding-horizontal: 0;
1187
+
1188
+
1189
+ @breadcrumb-bg: none;
1190
+ @breadcrumb-color: #ccc;
1191
+ @breadcrumb-active-color: @gray-light;
1192
+ @breadcrumb-separator: "❯";
1193
+
1194
+ //== Carousel
1195
+ //
1196
+ //##
1197
+
1198
+ @carousel-text-shadow: 0 1px 7px rgba(0,0,0,.8);
1199
+
1200
+ @carousel-control-color: @brand-light-blue;
1201
+ @carousel-control-width: 15%;
1202
+ @carousel-control-opacity: 1;
1203
+ @carousel-control-font-size: 20px;
1204
+
1205
+ @carousel-indicator-active-bg: @brand-light-blue;
1206
+ @carousel-indicator-border-color: @brand-light-blue;
1207
+
1208
+ @carousel-caption-color: #fff;
1209
+
1210
+
1211
+ //== Close
1212
+ //
1213
+ //##
1214
+
1215
+ @close-font-size: 32px;
1216
+ @close-font-weight: bold;
1217
+ @close-color: @brand-light-blue;
1218
+ @close-color-hover: @brand-light-blue-minus-10;
1219
+ @close-color-active: @brand-light-blue-minus-20;
1220
+
1221
+
1222
+ //== Code
1223
+ //
1224
+ //##
1225
+
1226
+ @code-color: @brand-grey-minus-10;
1227
+ @code-bg: @brand-smoke-plus-20;
1228
+
1229
+ @kbd-color: #fff;
1230
+ @kbd-bg: #333;
1231
+
1232
+ @pre-bg: @brand-smoke-plus-20;
1233
+ @pre-color: @gray-dark;
1234
+ @pre-border-color: #ccc;
1235
+ @pre-scrollable-max-height: 340px;
1236
+
1237
+
1238
+ //== Type
1239
+ //
1240
+ //##
1241
+
1242
+ //** Horizontal offset for forms and lists.
1243
+ @component-offset-horizontal: 180px;
1244
+ //** Text muted color
1245
+ @text-muted: @brand-smoke-minus-10;
1246
+ //** Abbreviations and acronyms border color
1247
+ @abbr-border-color: @link-color;
1248
+ //** Headings small color
1249
+ @headings-small-color: @gray-light;
1250
+ //** Blockquote small color
1251
+ @blockquote-small-color: @gray-light;
1252
+ //** Blockquote font size
1253
+ @blockquote-font-size: @font-size-large;
1254
+ //** Blockquote border color
1255
+ @blockquote-border-color: @brand-light-blue;
1256
+ //** Page header border color
1257
+ @page-header-border-color: @brand-smoke-plus-10;
1258
+ //** Width of horizontal description list titles
1259
+ @dl-horizontal-offset: @component-offset-horizontal;
1260
+ //** Horizontal line color.
1261
+ @hr-border: @brand-smoke-plus-10;
1262
+
1263
+ //== Sequence
1264
+ //
1265
+ //##
1266
+ @sequence-step-height: 24px;
1267
+ @sequence-margin: 16px;
1268
+ @sequence-margin-lg: 24px;
1269
+ @sequence-item-spacing-sm: 2px;
1270
+ @sequence-item-spacing-md: 4px;
1271
+ @sequence-item-spacing-lg: 8px;
1272
+ @sequence-pip-size: 8px;
1273
+ @sequence-line-width: 2px;
1274
+
1275
+ @sequence-border: #d3d5d8;
1276
+ @sequence-bg: #FFF;
1277
+
1278
+ @sequence-inverse-border: @brand-navy-minus-20;
1279
+ @sequence-inverse-bg: @brand-navy;
1280
+
1281
+
1282
+ @sequence-spacing-horizontal: 24px;
1283
+ @sequence-spacing-horizontal-lg: 48px;
1284
+
1285
+ @sequence-icon-size: 24px;
1286
+ @sequence-icon-size-md: 32px;
1287
+ @sequence-icon-size-lg: 40px;
1288
+ @sequence-icon-border: @text-color;
1289
+
1290
+ //== Column layout
1291
+ @column-width: 264px;
1292
+
1293
+ //== Decision
1294
+ //
1295
+ //##
1296
+ @decision-focus-transition: @transition-duration;
1297
+ @decision-padding-md: 12px;
1298
+ @decision-padding-lg: 24px;
1299
+ @decision-border: 1px solid @brand-smoke-plus-10;