@innovaccer/design-system 2.5.0-4 → 2.6.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 (264) hide show
  1. package/.all-contributorsrc +1 -1
  2. package/.eslintrc.json +53 -0
  3. package/.github/workflows/jira.yml +1 -2
  4. package/.github/workflows/main.yml +2 -2
  5. package/.github/workflows/pull_request.yml +1 -1
  6. package/.github/workflows/test.yml +1 -1
  7. package/.husky/commit-msg +4 -0
  8. package/.prettierrc +2 -2
  9. package/CHANGELOG.md +38 -88
  10. package/CONTRIBUTING.md +173 -97
  11. package/README.md +1 -1
  12. package/commitlint.config.js +1 -0
  13. package/core/accessibility/utils/index.ts +5 -0
  14. package/core/accessibility/utils/isEnterKey.ts +5 -0
  15. package/core/accessibility/utils/isSpaceKey.ts +5 -0
  16. package/core/accessibility/utils/useAccessibilityProps.ts +31 -0
  17. package/core/components/atoms/_chip/__tests__/__snapshots__/_chip.test.tsx.snap +8 -0
  18. package/core/components/atoms/_chip/index.tsx +2 -0
  19. package/core/components/atoms/button/__stories__/Alert.story.tsx +8 -1
  20. package/core/components/atoms/button/__stories__/Cancel.story.tsx +4 -1
  21. package/core/components/atoms/button/__stories__/IconButtonGroup.story.tsx +12 -3
  22. package/core/components/atoms/button/__stories__/IconButtonSecondary.story.tsx +6 -1
  23. package/core/components/atoms/button/__stories__/IconLeftSecondary.story.tsx +4 -1
  24. package/core/components/atoms/button/__stories__/IconRightSecondary.story.tsx +4 -1
  25. package/core/components/atoms/button/__stories__/IconTransparent.story.tsx +4 -1
  26. package/core/components/atoms/button/__stories__/LabelButtonGroup.story.tsx +14 -3
  27. package/core/components/atoms/button/__stories__/LargeIconExpanded.story.tsx +4 -1
  28. package/core/components/atoms/button/__stories__/LoadingPrimary.story.tsx +4 -1
  29. package/core/components/atoms/button/__stories__/Primary.story.tsx +5 -2
  30. package/core/components/atoms/button/__stories__/SplitButton.story.tsx +6 -1
  31. package/core/components/atoms/button/__stories__/Transparent.story.tsx +8 -1
  32. package/core/components/atoms/button/__stories__/index.story.tsx +11 -1
  33. package/core/components/atoms/button/__stories__/variants/Appearance.story.tsx +4 -0
  34. package/core/components/atoms/button/__stories__/variants/Expanded.story.tsx +4 -0
  35. package/core/components/atoms/button/__stories__/variants/Size.story.tsx +4 -0
  36. package/core/components/atoms/button/__stories__/variants/icon/Icon.story.tsx +15 -0
  37. package/core/components/atoms/button/__stories__/variants/icon/IconLeft.story.tsx +4 -0
  38. package/core/components/atoms/button/__stories__/variants/icon/IconRight.story.tsx +4 -0
  39. package/core/components/atoms/button/__stories__/variants/state/Alert.story.tsx +7 -17
  40. package/core/components/atoms/button/__stories__/variants/state/Basic.story.tsx +9 -17
  41. package/core/components/atoms/button/__stories__/variants/state/Primary.story.tsx +7 -17
  42. package/core/components/atoms/button/__stories__/variants/state/Success.story.tsx +7 -17
  43. package/core/components/atoms/button/__stories__/variants/state/Transparent.story.tsx +13 -17
  44. package/core/components/atoms/chipGroup/__tests__/__snapshots__/chipGroup.test.tsx.snap +6 -0
  45. package/core/components/atoms/collapsible/__stories__/index.story.tsx +2 -2
  46. package/core/components/atoms/collapsible/__tests__/__snapshots__/Collapsible.test.tsx.snap +8 -0
  47. package/core/components/atoms/divider/Divider.tsx +44 -0
  48. package/core/components/atoms/divider/__stories__/BasicDividerInCard.story.tsx +74 -0
  49. package/core/components/atoms/divider/__stories__/HeaderDividerInCard.story.tsx +35 -0
  50. package/core/components/atoms/divider/__stories__/IndentedDivider.story.tsx +49 -0
  51. package/core/components/atoms/divider/__stories__/Vertical.story.tsx +51 -0
  52. package/core/components/atoms/divider/__stories__/index.story.tsx +91 -0
  53. package/core/components/atoms/divider/__stories__/variants/HorizontalDivider.story.tsx +27 -0
  54. package/core/components/atoms/divider/__tests__/Divider.test.tsx +50 -0
  55. package/core/components/atoms/divider/__tests__/__snapshots__/Divider.test.tsx.snap +53 -0
  56. package/core/components/atoms/divider/index.tsx +2 -0
  57. package/core/components/atoms/dropdown/DropdownList.tsx +8 -2
  58. package/core/components/atoms/dropdown/__stories__/variants/controlledDropdown/MultiSelect.story.tsx +27 -17
  59. package/core/components/atoms/dropdown/option/DefaultOption.tsx +3 -0
  60. package/core/components/atoms/dropdown/option/IconOption.tsx +3 -0
  61. package/core/components/atoms/dropdown/option/IconWithMetaOption.tsx +3 -0
  62. package/core/components/atoms/dropdown/option/MetaOption.tsx +3 -0
  63. package/core/components/atoms/editable/Editable.tsx +3 -0
  64. package/core/components/atoms/icon/Icon.tsx +14 -3
  65. package/core/components/atoms/icon/__stories__/variants/Image.story.tsx +6 -1
  66. package/core/components/atoms/icon/__tests__/__snapshots__/Icon.test.tsx.snap +74 -0
  67. package/core/components/atoms/input/Input.tsx +14 -4
  68. package/core/components/atoms/input/__stories__/BasicInput.story.tsx +2 -1
  69. package/core/components/atoms/input/__stories__/InputWithCaption.story.tsx +29 -9
  70. package/core/components/atoms/input/__stories__/InputWithLabel.story.tsx +11 -3
  71. package/core/components/atoms/input/__stories__/LabelPosition.story.tsx +8 -4
  72. package/core/components/atoms/input/__stories__/RequiredVsOptional.story.tsx +12 -8
  73. package/core/components/atoms/input/__tests__/__snapshots__/Input.test.tsx.snap +19 -0
  74. package/core/components/atoms/legend/Legend.tsx +3 -0
  75. package/core/components/atoms/message/__stories__/CustomDescription.tsx +25 -0
  76. package/core/components/atoms/metricInput/MetricInput.tsx +12 -2
  77. package/core/components/atoms/metricInput/__stories__/DefaultMetric.story.tsx +8 -2
  78. package/core/components/atoms/metricInput/__stories__/WithPrefix.story.tsx +6 -2
  79. package/core/components/atoms/metricInput/__stories__/index.story.tsx +1 -0
  80. package/core/components/atoms/metricInput/__stories__/variants/Controlled.story.tsx +2 -0
  81. package/core/components/atoms/metricInput/__stories__/variants/Size.story.tsx +2 -2
  82. package/core/components/atoms/metricInput/__stories__/withSuffix.story.tsx +6 -2
  83. package/core/components/atoms/metricInput/__tests__/__snapshots__/MetricInput.test.tsx.snap +20 -4
  84. package/core/components/atoms/multiSlider/Handle.tsx +3 -0
  85. package/core/components/atoms/multiSlider/index.tsx +6 -0
  86. package/core/components/atoms/outsideClick/__stories__/index.story.tsx +1 -1
  87. package/core/components/atoms/statusHint/StatusHint.tsx +3 -0
  88. package/core/components/atoms/switchInput/Switch.tsx +10 -4
  89. package/core/components/atoms/switchInput/__stories__/DefaultSwitch.story.tsx +4 -1
  90. package/core/components/atoms/switchInput/__stories__/OffState.story.tsx +4 -1
  91. package/core/components/atoms/switchInput/__stories__/index.story.tsx +26 -3
  92. package/core/components/atoms/switchInput/__stories__/variants/Size.story.tsx +10 -1
  93. package/core/components/atoms/switchInput/__stories__/variants/State.story.tsx +9 -2
  94. package/core/components/atoms/textarea/__stories__/TextareaWithCaption.story.tsx +9 -3
  95. package/core/components/atoms/textarea/__stories__/defaultTextarea.story.tsx +10 -2
  96. package/core/components/atoms/textarea/__stories__/index.story.tsx +1 -0
  97. package/core/components/atoms/textarea/__stories__/variants/Disable.story.tsx +1 -0
  98. package/core/components/atoms/toast/__tests__/__snapshots__/Toast.test.tsx.snap +30 -0
  99. package/core/components/css-utilities/Align/Align.story.tsx +1 -1
  100. package/core/components/css-utilities/Background/Background.story.tsx +1 -1
  101. package/core/components/css-utilities/Border/Border.story.tsx +1 -1
  102. package/core/components/css-utilities/Display/Display.story.tsx +1 -1
  103. package/core/components/css-utilities/Flex/Flex.story.tsx +1 -1
  104. package/core/components/css-utilities/Miscellaneous/Miscellaneous.story.tsx +1 -1
  105. package/core/components/css-utilities/Overflow/Overflow.story.tsx +1 -1
  106. package/core/components/css-utilities/Position/Position.story.tsx +1 -1
  107. package/core/components/css-utilities/Sizing/Sizing.story.tsx +1 -1
  108. package/core/components/css-utilities/Spacing/Spacing.story.tsx +1 -1
  109. package/core/components/molecules/chatMessage/Box.tsx +3 -0
  110. package/core/components/molecules/chipInput/ChipInput.tsx +3 -0
  111. package/core/components/molecules/chipInput/__tests__/__snapshots__/ChipInput.test.tsx.snap +12 -0
  112. package/core/components/molecules/dropzone/Dropzone.tsx +3 -0
  113. package/core/components/molecules/dropzone/FileSelectorUtils.tsx +1 -1
  114. package/core/components/molecules/editableChipInput/EditableChipInput.tsx +9 -5
  115. package/core/components/molecules/editableChipInput/__stories__/Uncontrolled.story.tsx +1 -1
  116. package/core/components/molecules/editableChipInput/__tests__/__snapshots__/EditableChipInput.test.tsx.snap +8 -0
  117. package/core/components/molecules/editableDropdown/EditableDropdown.tsx +2 -2
  118. package/core/components/molecules/editableInput/EditableInput.tsx +13 -4
  119. package/core/components/molecules/emptyState/EmptyState.tsx +5 -1
  120. package/core/components/molecules/fileList/FileListItem.tsx +2 -0
  121. package/core/components/molecules/fileUploader/FileUploaderItem.tsx +2 -0
  122. package/core/components/molecules/fileUploader/__stories__/index.story.tsx +156 -21
  123. package/core/components/molecules/inputMask/InputMask.tsx +1 -1
  124. package/core/components/molecules/inputMask/__tests__/__snapshots__/InputMask.test.tsx.snap +1 -0
  125. package/core/components/molecules/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap +5 -1
  126. package/core/components/molecules/stepper/Step.tsx +2 -0
  127. package/core/components/molecules/tabs/Tabs.tsx +2 -0
  128. package/core/components/molecules/tabs/TabsWrapper.tsx +2 -0
  129. package/core/components/molecules/tabs/__stories__/CustomLabels.story.tsx +1 -1
  130. package/core/components/molecules/verificationCodeInput/VerificationCodeInput.tsx +8 -4
  131. package/core/components/molecules/verificationCodeInput/__stories__/index.story.tsx +3 -1
  132. package/core/components/molecules/verificationCodeInput/__tests__/__snapshots__/VerificationCodeInput.test.tsx.snap +1 -0
  133. package/core/components/organisms/calendar/Calendar.tsx +130 -8
  134. package/core/components/organisms/calendar/__tests__/Calendar.test.tsx +27 -0
  135. package/core/components/organisms/choiceList/ChoiceList.tsx +1 -1
  136. package/core/components/organisms/datePicker/DatePicker.tsx +30 -15
  137. package/core/components/organisms/datePicker/__tests__/DatePicker.test.tsx +136 -46
  138. package/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap +4388 -1857
  139. package/core/components/organisms/dateRangePicker/__tests__/__snapshots__/DateRangePicker.test.tsx.snap +112 -40
  140. package/core/components/organisms/grid/Cell.tsx +4 -0
  141. package/core/components/organisms/grid/GridRow.tsx +4 -0
  142. package/core/components/organisms/grid/__stories__/_common_/fetchData.ts +2 -2
  143. package/core/components/organisms/horizontalNav/HorizontalNav.tsx +2 -0
  144. package/core/components/organisms/inlineMessage/InlineMessage.tsx +3 -5
  145. package/core/components/organisms/inlineMessage/__tests__/__snapshots__/InlineMessage.test.tsx.snap +30 -40
  146. package/core/components/organisms/navigation/VerticalNavigation.tsx +4 -0
  147. package/core/components/organisms/table/Table.tsx +1 -0
  148. package/core/components/organisms/table/__stories__/NestedTableWithNestedCard.story.tsx +4 -1
  149. package/core/components/organisms/table/__stories__/ResourceTable.story.tsx +3 -2
  150. package/core/components/organisms/table/__stories__/Selection.story.tsx +2 -2
  151. package/core/components/organisms/table/__stories__/TableAsDescriptionList.story.tsx +1 -1
  152. package/core/components/organisms/table/__stories__/TableAsOptionList.story.tsx +1 -1
  153. package/core/components/organisms/table/__stories__/syncTable.story.tsx +14 -6
  154. package/core/components/organisms/table/__stories__/variants/nestedRows.story.tsx +5 -2
  155. package/core/components/organisms/table/__stories__/variants/withHeader.story.tsx +0 -2
  156. package/core/components/organisms/timePicker/TimePicker.tsx +1 -1
  157. package/core/components/organisms/timePicker/__tests__/__snapshots__/TimePicker.test.tsx.snap +14 -2
  158. package/core/components/organisms/verticalNav/MenuItem.tsx +2 -0
  159. package/core/components/patterns/datePicker/datePickerWithPresets.story.tsx +126 -0
  160. package/core/components/patterns/dateRangePicker/withCustomPopover.story.tsx +8 -8
  161. package/core/components/patterns/forms/CreatePassword.story.tsx +1 -1
  162. package/core/components/patterns/forms/VerificationCodeInput.story.tsx +2 -2
  163. package/core/components/patterns/table/Table with Header/tableWithHeader.story.jsx +7 -7
  164. package/core/index.tsx +1 -0
  165. package/core/index.type.tsx +1 -0
  166. package/core/utils/Keys.ts +4 -0
  167. package/core/utils/__tests__/__snapshots__/TS.test.tsx.snap +544 -536
  168. package/core/utils/docPage/index.tsx +22 -17
  169. package/core/utils/testHelper.ts +1 -1
  170. package/core/utils/validators.ts +37 -34
  171. package/css/dist/index.css +1523 -1402
  172. package/css/dist/index.css.map +1 -1
  173. package/css/src/components/Legend.css +7 -7
  174. package/css/src/components/ProgressBar.css +1 -1
  175. package/css/src/components/avatarGroup.css +1 -1
  176. package/css/src/components/backdrop.css +12 -6
  177. package/css/src/components/badge.css +52 -52
  178. package/css/src/components/button.css +99 -94
  179. package/css/src/components/calendar.css +137 -126
  180. package/css/src/components/card.css +0 -1
  181. package/css/src/components/cardSubdued.css +3 -5
  182. package/css/src/components/chat.css +1 -1
  183. package/css/src/components/checkbox.css +71 -70
  184. package/css/src/components/chip.css +14 -13
  185. package/css/src/components/chipGroup.css +5 -5
  186. package/css/src/components/chipInput.css +1 -1
  187. package/css/src/components/choiceList.css +4 -4
  188. package/css/src/components/dateRangePicker.css +13 -13
  189. package/css/src/components/divider.css +20 -0
  190. package/css/src/components/dropdown.css +61 -61
  191. package/css/src/components/dropdownButton.css +36 -36
  192. package/css/src/components/dropzone.css +16 -20
  193. package/css/src/components/editableChipInput.css +10 -9
  194. package/css/src/components/editableDropdown.css +1 -1
  195. package/css/src/components/editableInput.css +1 -1
  196. package/css/src/components/emptyState.css +15 -15
  197. package/css/src/components/fileList.css +44 -45
  198. package/css/src/components/grid.css +217 -199
  199. package/css/src/components/horizontalNav.css +0 -1
  200. package/css/src/components/icon.css +1 -7
  201. package/css/src/components/inlineMessage.css +2 -1
  202. package/css/src/components/input.css +62 -62
  203. package/css/src/components/link.css +1 -1
  204. package/css/src/components/list.css +10 -10
  205. package/css/src/components/message.css +69 -70
  206. package/css/src/components/metaList.css +26 -26
  207. package/css/src/components/metricInput.css +3 -4
  208. package/css/src/components/modal.css +1 -1
  209. package/css/src/components/navigation.css +3 -3
  210. package/css/src/components/pageHeader.css +1 -2
  211. package/css/src/components/pagination.css +36 -36
  212. package/css/src/components/pills.css +19 -19
  213. package/css/src/components/placeholder.css +10 -5
  214. package/css/src/components/popover.css +2 -2
  215. package/css/src/components/progressRing.css +1 -1
  216. package/css/src/components/radio.css +74 -74
  217. package/css/src/components/slider.css +5 -5
  218. package/css/src/components/statusHints.css +15 -15
  219. package/css/src/components/switch.css +45 -41
  220. package/css/src/components/table.css +15 -15
  221. package/css/src/components/tabs.css +53 -53
  222. package/css/src/components/textarea.css +1 -1
  223. package/css/src/components/toast.css +53 -53
  224. package/css/src/components/verificationCodeInput.css +5 -6
  225. package/css/src/components/verticalNav.css +1 -2
  226. package/css/src/core/base.css +3 -0
  227. package/css/src/core/typography.css +1 -1
  228. package/css/src/core/utilities.css +1 -1
  229. package/css/src/tokens/index.css +63 -63
  230. package/css/src/utils/align.css +1 -1
  231. package/css/src/utils/background.css +1 -1
  232. package/css/src/utils/cursor.css +1 -1
  233. package/css/src/utils/display.css +1 -1
  234. package/css/src/utils/flex.css +1 -1
  235. package/css/src/utils/grid.css +1 -1
  236. package/css/src/utils/overflow.css +1 -1
  237. package/css/src/utils/position.css +1 -1
  238. package/css/src/utils/spacing.css +1 -1
  239. package/css/src/utils/utility.css +13 -13
  240. package/css/src/variables/index.css +1 -1
  241. package/dist/core/accessibility/utils/index.d.ts +4 -0
  242. package/dist/core/accessibility/utils/isEnterKey.d.ts +3 -0
  243. package/dist/core/accessibility/utils/isSpaceKey.d.ts +3 -0
  244. package/dist/core/accessibility/utils/useAccessibilityProps.d.ts +15 -0
  245. package/dist/core/components/atoms/divider/Divider.d.ts +15 -0
  246. package/dist/core/components/atoms/divider/index.d.ts +2 -0
  247. package/dist/core/components/atoms/icon/Icon.d.ts +3 -1
  248. package/dist/core/components/atoms/input/Input.d.ts +1 -1
  249. package/dist/core/components/atoms/popperWrapper/PopperWrapper.d.ts +50 -49
  250. package/dist/core/components/atoms/switchInput/Switch.d.ts +2 -1
  251. package/dist/core/components/organisms/calendar/Calendar.d.ts +31 -0
  252. package/dist/core/components/organisms/datePicker/DatePicker.d.ts +2 -0
  253. package/dist/core/components/patterns/datePicker/datePickerWithPresets.story.d.ts +15 -0
  254. package/dist/core/index.d.ts +1 -0
  255. package/dist/core/index.type.d.ts +1 -0
  256. package/dist/index.esm.js +829 -495
  257. package/dist/index.js +313 -144
  258. package/dist/index.js.map +1 -1
  259. package/dist/index.umd.js +1 -1
  260. package/dist/index.umd.js.br +0 -0
  261. package/dist/index.umd.js.gz +0 -0
  262. package/package.json +17 -14
  263. package/.husky/prepare-commit-msg +0 -6
  264. package/tslint.json +0 -30
package/css/dist/index.css CHANGED
@@ -1,69 +1,69 @@
1
1
  /**** Colors ****/
2
2
  :root {
3
- --haldi: #ffc208;
4
- --haldi-dark: #b78707;
5
- --haldi-darker: #6b4a06;
6
- --haldi-light: #ffd462;
7
- --haldi-lighter: #ffe597;
8
- --haldi-lightest: #fff5c7;
9
- --jal: #0070dd;
10
- --jal-dark: #00509f;
11
- --jal-darker: #003365;
12
- --jal-light: #4f9de7;
13
- --jal-lighter: #97c5f0;
14
- --jal-lightest: #dcecf9;
15
- --jamun: #7a53b2;
16
- --jamun-dark: #644491;
17
- --jamun-darker: #4e3572;
18
- --jamun-light: #9d7ec6;
19
- --jamun-lighter: #bfaada;
20
- --jamun-lightest: #e0d8ee;
21
- --mirch: #d93737;
22
- --mirch-dark: #9c2828;
23
- --mirch-darker: #631919;
24
- --mirch-light: #eb776c;
25
- --mirch-lighter: #f7ada5;
26
- --mirch-lightest: #f9e2e2;
27
- --neel: #3d51d4;
28
- --neel-dark: #2c3a98;
29
- --neel-darker: #1c2561;
30
- --neel-light: #7583e1;
31
- --neel-lighter: #abb4ed;
32
- --neel-lightest: #e2e5f9;
33
- --neem: #2ea843;
34
- --neem-dark: #227934;
35
- --neem-darker: #154d26;
36
- --neem-light: #71c077;
37
- --neem-lighter: #a5d8aa;
38
- --neem-lightest: #d7efdf;
39
- --night: #2f2f2f;
40
- --night-light: #595959;
41
- --night-lighter: #868686;
42
- --night-lightest: #a6a6a6;
43
- --nimbu: #82c91e;
44
- --nimbu-dark: #578715;
45
- --nimbu-darker: #304a0b;
46
- --nimbu-light: #a6d763;
47
- --nimbu-lighter: #c6e599;
48
- --nimbu-lightest: #e3f3ce;
49
- --shadow-0: #ffffff;
50
- --shadow-10: #ffffff;
51
- --shadow-20: #ffffff;
52
- --shadow-30: #ffffff;
53
- --stone: #d5d5d5;
54
- --stone-dark: #c5c5c5;
55
- --stone-light: #e5e5e5;
56
- --stone-lighter: #ececec;
57
- --stone-lightest: #f4f4f4;
58
- --tawak: #f07d00;
59
- --tawak-dark: #b35f13;
60
- --tawak-darker: #743208;
61
- --tawak-light: #feac5f;
62
- --tawak-lighter: #ffc998;
63
- --tawak-lightest: #fde6ce;
64
- --white: #ffffff;
65
-
66
- /**** Fonts ****/
3
+ --haldi: #ffc208;
4
+ --haldi-dark: #b78707;
5
+ --haldi-darker: #6b4a06;
6
+ --haldi-light: #ffd462;
7
+ --haldi-lighter: #ffe597;
8
+ --haldi-lightest: #fff5c7;
9
+ --jal: #0070dd;
10
+ --jal-dark: #00509f;
11
+ --jal-darker: #003365;
12
+ --jal-light: #4f9de7;
13
+ --jal-lighter: #97c5f0;
14
+ --jal-lightest: #dcecf9;
15
+ --jamun: #7a53b2;
16
+ --jamun-dark: #644491;
17
+ --jamun-darker: #4e3572;
18
+ --jamun-light: #9d7ec6;
19
+ --jamun-lighter: #bfaada;
20
+ --jamun-lightest: #e0d8ee;
21
+ --mirch: #d93737;
22
+ --mirch-dark: #9c2828;
23
+ --mirch-darker: #631919;
24
+ --mirch-light: #eb776c;
25
+ --mirch-lighter: #f7ada5;
26
+ --mirch-lightest: #f9e2e2;
27
+ --neel: #3d51d4;
28
+ --neel-dark: #2c3a98;
29
+ --neel-darker: #1c2561;
30
+ --neel-light: #7583e1;
31
+ --neel-lighter: #abb4ed;
32
+ --neel-lightest: #e2e5f9;
33
+ --neem: #2ea843;
34
+ --neem-dark: #227934;
35
+ --neem-darker: #154d26;
36
+ --neem-light: #71c077;
37
+ --neem-lighter: #a5d8aa;
38
+ --neem-lightest: #d7efdf;
39
+ --night: #2f2f2f;
40
+ --night-light: #595959;
41
+ --night-lighter: #868686;
42
+ --night-lightest: #a6a6a6;
43
+ --nimbu: #82c91e;
44
+ --nimbu-dark: #578715;
45
+ --nimbu-darker: #304a0b;
46
+ --nimbu-light: #a6d763;
47
+ --nimbu-lighter: #c6e599;
48
+ --nimbu-lightest: #e3f3ce;
49
+ --shadow-0: #ffffff;
50
+ --shadow-10: #ffffff;
51
+ --shadow-20: #ffffff;
52
+ --shadow-30: #ffffff;
53
+ --stone: #d5d5d5;
54
+ --stone-dark: #c5c5c5;
55
+ --stone-light: #e5e5e5;
56
+ --stone-lighter: #ececec;
57
+ --stone-lightest: #f4f4f4;
58
+ --tawak: #f07d00;
59
+ --tawak-dark: #b35f13;
60
+ --tawak-darker: #743208;
61
+ --tawak-light: #feac5f;
62
+ --tawak-lighter: #ffc998;
63
+ --tawak-lightest: #fde6ce;
64
+ --white: #ffffff;
65
+
66
+ /**** Fonts ****/
67
67
  } /* close :root */
68
68
 
69
69
  :root {
@@ -249,7 +249,7 @@
249
249
  --grid-columns: 12;
250
250
 
251
251
  /* Undefined colors */
252
- --card-subdued-bg: #FCFAFA;
252
+ --card-subdued-bg: #fcfafa;
253
253
  }
254
254
 
255
255
  /* fallback */
@@ -367,6 +367,9 @@
367
367
  -webkit-font-feature-settings: 'liga';
368
368
  -webkit-font-smoothing: antialiased;
369
369
  }
370
+ .ss {
371
+ background: red;
372
+ }
370
373
 
371
374
  body {
372
375
  font-family: var(--font-family);
@@ -566,6 +569,7 @@ body {
566
569
  .Subheading--white {
567
570
  color: var(--text-white);
568
571
  }
572
+
569
573
  .PopperWrapper-trigger {
570
574
  display: inline-flex;
571
575
  flex-grow: 1;
@@ -578,19 +582,21 @@ body {
578
582
  justify-content: center;
579
583
  z-index: 1500;
580
584
  }
585
+
581
586
  .Legend {
582
- display: flex;
583
- flex-direction: row;
584
- align-items: center;
585
- width: -webkit-fit-content;
586
- width: -moz-fit-content;
587
- width: fit-content;
587
+ display: flex;
588
+ flex-direction: row;
589
+ align-items: center;
590
+ width: -webkit-fit-content;
591
+ width: -moz-fit-content;
592
+ width: fit-content;
588
593
  }
589
594
 
590
595
  .Legend-icon {
591
- border-radius: var(--spacing-s);
592
- margin-right: var(--spacing);
596
+ border-radius: var(--spacing-s);
597
+ margin-right: var(--spacing);
593
598
  }
599
+
594
600
  .ProgressBar {
595
601
  width: 100%;
596
602
  border-radius: var(--spacing-m);
@@ -603,6 +609,7 @@ body {
603
609
  border-radius: var(--spacing-m);
604
610
  transition: width 200ms;
605
611
  }
612
+
606
613
  /* badge */
607
614
 
608
615
  .Avatar {
@@ -722,23 +729,41 @@ body {
722
729
  background: var(--secondary);
723
730
  border-radius: var(--spacing-m);
724
731
  }
732
+
725
733
  @-webkit-keyframes backdrop-open {
726
- from { opacity: 0; }
727
- to { opacity: 60; }
734
+ from {
735
+ opacity: 0;
736
+ }
737
+ to {
738
+ opacity: 60;
739
+ }
728
740
  }
741
+
729
742
  @keyframes backdrop-open {
730
- from { opacity: 0; }
731
- to { opacity: 60; }
743
+ from {
744
+ opacity: 0;
745
+ }
746
+ to {
747
+ opacity: 60;
748
+ }
732
749
  }
733
750
 
734
751
  @-webkit-keyframes backdrop-close {
735
- from { opacity: 60; }
736
- to { opacity: 0; }
752
+ from {
753
+ opacity: 60;
754
+ }
755
+ to {
756
+ opacity: 0;
757
+ }
737
758
  }
738
759
 
739
760
  @keyframes backdrop-close {
740
- from { opacity: 60; }
741
- to { opacity: 0; }
761
+ from {
762
+ opacity: 60;
763
+ }
764
+ to {
765
+ opacity: 0;
766
+ }
742
767
  }
743
768
 
744
769
  .Backdrop {
@@ -773,117 +798,115 @@ body {
773
798
  animation: backdrop-close 120ms cubic-bezier(0.4, 0.14, 1, 1);
774
799
  }
775
800
 
776
-
777
-
778
801
  /* badge */
779
802
 
780
803
  .Badge {
781
- /* 160px */
782
- max-width: calc(var(--spacing-2) * 10);
783
- /* truncate */
784
- white-space: nowrap;
785
- overflow: hidden;
786
- text-overflow: ellipsis;
787
- font-size: var(--font-size-s);
788
- line-height: var(--font-height-s);
789
- text-transform: uppercase;
790
- padding-right: var(--spacing-m);
791
- padding-left: var(--spacing-m);
792
- padding-top: var(--spacing-s);
793
- padding-bottom: var(--spacing-s);
794
- border-radius: var(--spacing-m);
795
- display: inline-block;
796
- box-sizing: border-box;
797
- font-weight: var(--font-weight-bold);
798
- cursor: default;
804
+ /* 160px */
805
+ max-width: calc(var(--spacing-2) * 10);
806
+ /* truncate */
807
+ white-space: nowrap;
808
+ overflow: hidden;
809
+ text-overflow: ellipsis;
810
+ font-size: var(--font-size-s);
811
+ line-height: var(--font-height-s);
812
+ text-transform: uppercase;
813
+ padding-right: var(--spacing-m);
814
+ padding-left: var(--spacing-m);
815
+ padding-top: var(--spacing-s);
816
+ padding-bottom: var(--spacing-s);
817
+ border-radius: var(--spacing-m);
818
+ display: inline-block;
819
+ box-sizing: border-box;
820
+ font-weight: var(--font-weight-bold);
821
+ cursor: default;
799
822
  }
800
823
 
801
824
  .Badge--primary {
802
- background: var(--primary);
803
- color: var(--white);
825
+ background: var(--primary);
826
+ color: var(--white);
804
827
  }
805
828
 
806
829
  .Badge--secondary {
807
- background: var(--secondary-light);
830
+ background: var(--secondary-light);
808
831
  }
809
832
 
810
833
  .Badge--success {
811
- background: var(--success);
812
- color: var(--white);
834
+ background: var(--success);
835
+ color: var(--white);
813
836
  }
814
837
 
815
838
  .Badge--alert {
816
- background: var(--alert);
817
- color: var(--white);
839
+ background: var(--alert);
840
+ color: var(--white);
818
841
  }
819
842
 
820
843
  .Badge--warning {
821
- background: var(--warning);
822
- color: var(--warning-darker);
844
+ background: var(--warning);
845
+ color: var(--warning-darker);
823
846
  }
824
847
 
825
848
  .Badge--accent1 {
826
- background: var(--accent1);
827
- color: var(--white);
849
+ background: var(--accent1);
850
+ color: var(--white);
828
851
  }
829
852
 
830
853
  .Badge--accent2 {
831
- background: var(--accent2);
832
- color: var(--white);
854
+ background: var(--accent2);
855
+ color: var(--white);
833
856
  }
834
857
 
835
858
  .Badge--accent3 {
836
- background: var(--accent3);
837
- color: var(--white);
859
+ background: var(--accent3);
860
+ color: var(--white);
838
861
  }
839
862
 
840
863
  .Badge--accent4 {
841
- background: var(--accent4);
842
- color: var(--accent4-darker);
864
+ background: var(--accent4);
865
+ color: var(--accent4-darker);
843
866
  }
844
867
 
845
868
  .Badge--subtle-primary {
846
- color: var(--primary-dark);
847
- background: var(--primary-lightest);
869
+ color: var(--primary-dark);
870
+ background: var(--primary-lightest);
848
871
  }
849
872
 
850
873
  .Badge--subtle-secondary {
851
- background: var(--secondary-light);
874
+ background: var(--secondary-light);
852
875
  }
853
876
 
854
877
  .Badge--subtle-success {
855
- color: var(--success-dark);
856
- background: var(--success-lightest);
878
+ color: var(--success-dark);
879
+ background: var(--success-lightest);
857
880
  }
858
881
 
859
882
  .Badge--subtle-alert {
860
- color: var(--alert-dark);
861
- background: var(--alert-lightest);
883
+ color: var(--alert-dark);
884
+ background: var(--alert-lightest);
862
885
  }
863
886
 
864
887
  .Badge--subtle-warning {
865
- color: var(--warning-darker);
866
- background: var(--warning-lightest);
888
+ color: var(--warning-darker);
889
+ background: var(--warning-lightest);
867
890
  }
868
891
 
869
892
  .Badge--subtle-accent1 {
870
- color: var(--accent1-darker);
871
- background: var(--accent1-lightest);
893
+ color: var(--accent1-darker);
894
+ background: var(--accent1-lightest);
872
895
  }
873
896
 
874
897
  .Badge--subtle-accent2 {
875
- color: var(--accent2-dark);
876
- background: var(--accent2-lightest);
898
+ color: var(--accent2-dark);
899
+ background: var(--accent2-lightest);
877
900
  }
878
901
 
879
902
  .Badge--subtle-accent3 {
880
- color: var(--accent3-dark);
881
- background: var(--accent3-lightest);
903
+ color: var(--accent3-dark);
904
+ background: var(--accent3-lightest);
882
905
  }
883
906
 
884
907
  .Badge--subtle-accent4 {
885
- color: var(--accent4-darker);
886
- background: var(--accent4-lightest);
908
+ color: var(--accent4-darker);
909
+ background: var(--accent4-lightest);
887
910
  }
888
911
 
889
912
  /* breadcrumbs */
@@ -916,500 +939,516 @@ body {
916
939
  }
917
940
 
918
941
  .Button {
919
- display: flex;
920
- flex-direction: row;
921
- justify-content: center;
922
- align-items: center;
923
- box-sizing: border-box;
924
- position: relative;
925
- vertical-align: middle;
926
- cursor: pointer;
927
- -webkit-user-select: none;
928
- -moz-user-select: none;
929
- -ms-user-select: none;
930
- user-select: none;
931
- border: 0;
932
- border-radius: var(--spacing-m);
942
+ display: flex;
943
+ flex-direction: row;
944
+ justify-content: center;
945
+ align-items: center;
946
+ box-sizing: border-box;
947
+ position: relative;
948
+ vertical-align: middle;
949
+ cursor: pointer;
950
+ -webkit-user-select: none;
951
+ -moz-user-select: none;
952
+ -ms-user-select: none;
953
+ user-select: none;
954
+ border: 0;
955
+ border-radius: var(--spacing-m);
933
956
 
934
- padding-top: var(--spacing);
935
- padding-bottom: var(--spacing);
957
+ padding-top: var(--spacing);
958
+ padding-bottom: var(--spacing);
936
959
 
937
- text-align: center;
938
- font-family: var(--font-family);
939
- font-weight: var(--font-weight-normal);
940
- font-size: var(--font-size);
941
- line-height: var(--font-height-s);
942
- color: var(--text-white);
943
-
944
- transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
960
+ text-align: center;
961
+ font-family: var(--font-family);
962
+ font-weight: var(--font-weight-normal);
963
+ font-size: var(--font-size);
964
+ line-height: var(--font-height-s);
965
+ color: var(--text-white);
966
+
967
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
968
+ box-shadow 0.15s ease-in-out;
945
969
  }
946
970
 
947
971
  .Button:disabled {
948
- cursor: not-allowed;
972
+ cursor: not-allowed;
949
973
  }
950
974
 
951
975
  .Button:focus {
952
- outline: 0;
976
+ outline: 0;
953
977
  }
954
978
 
955
979
  .Button--iconAlign-right {
956
- flex-direction: row-reverse;
980
+ flex-direction: row-reverse;
957
981
  }
958
982
 
959
983
  .Button--tiny {
960
- height: var(--spacing-xl);
961
- padding-right: var(--spacing);
962
- padding-left: var(--spacing);
963
- padding-top: var(--spacing-m);
964
- padding-bottom: var(--spacing-m);
984
+ height: var(--spacing-xl);
985
+ padding-right: var(--spacing);
986
+ padding-left: var(--spacing);
987
+ padding-top: var(--spacing-m);
988
+ padding-bottom: var(--spacing-m);
965
989
  }
966
990
 
967
991
  .Button--tinySquare {
968
- width: var(--spacing-xl);
992
+ width: var(--spacing-xl);
969
993
  }
970
994
 
971
995
  .Button--regular {
972
- height: var(--spacing-3);
973
- padding-right: var(--spacing-l);
974
- padding-left: var(--spacing-l);
996
+ height: var(--spacing-3);
997
+ padding-right: var(--spacing-l);
998
+ padding-left: var(--spacing-l);
975
999
  }
976
1000
 
977
1001
  .Button--regularSquare {
978
- width: var(--spacing-3);
1002
+ width: var(--spacing-3);
979
1003
  }
980
1004
 
981
1005
  .Button--large {
982
- height: 40px;
983
- padding-right: var(--spacing-2);
984
- padding-left: var(--spacing-2);
985
-
986
- line-height: var(--font-height-m);
987
- font-size: var(--font-size-m);
1006
+ height: 40px;
1007
+ padding-right: var(--spacing-2);
1008
+ padding-left: var(--spacing-2);
1009
+
1010
+ line-height: var(--font-height-m);
1011
+ font-size: var(--font-size-m);
988
1012
  }
989
1013
 
990
1014
  .Button--largeSquare {
991
- width: 40px;
1015
+ width: 40px;
992
1016
  }
993
1017
 
994
1018
  .Button--tinySquare .Button-icon,
995
1019
  .Button--largeSquare .Button-icon,
996
1020
  .Button--tinySquare .Spinner,
997
1021
  .Button--largeSquare .Spinner {
998
- padding-left: var(--spacing-s);
999
- padding-right: var(--spacing-s);
1022
+ padding-left: var(--spacing-s);
1023
+ padding-right: var(--spacing-s);
1000
1024
  }
1001
1025
 
1002
1026
  .Button--expanded {
1003
- width: 100%;
1027
+ width: 100%;
1004
1028
  }
1005
1029
 
1006
1030
  .Button-icon {
1007
- line-height: inherit;
1008
- display: flex;
1009
- align-items: center;
1031
+ line-height: inherit;
1032
+ display: flex;
1033
+ align-items: center;
1010
1034
  }
1011
1035
 
1012
1036
  .Button-icon--left {
1013
- margin-right: var(--spacing);
1037
+ margin-right: var(--spacing);
1014
1038
  }
1015
1039
 
1016
1040
  .Button-icon--right {
1017
- margin-left: var(--spacing);
1041
+ margin-left: var(--spacing);
1018
1042
  }
1019
1043
 
1020
1044
  .Button--tiny .Button-icon--left {
1021
- margin-right: var(--spacing-m);
1045
+ margin-right: var(--spacing-m);
1022
1046
  }
1023
1047
  .Button--tiny .Button-icon--right {
1024
- margin-left: var(--spacing-m);
1048
+ margin-left: var(--spacing-m);
1025
1049
  }
1026
1050
 
1027
1051
  .Button--basic {
1028
- background: var(--secondary-light);
1029
- color: var(--inverse);
1052
+ background: var(--secondary-light);
1053
+ color: var(--inverse);
1030
1054
  }
1031
1055
 
1032
1056
  .Button--basic:hover {
1033
- background: var(--secondary);
1057
+ background: var(--secondary);
1034
1058
  }
1035
1059
 
1036
1060
  .Button--basic:active {
1037
- background: var(--secondary-dark);
1061
+ background: var(--secondary-dark);
1038
1062
  }
1039
1063
 
1040
1064
  .Button--basic:focus {
1041
- box-shadow: var(--shadow-spread) var(--secondary-shadow);
1065
+ box-shadow: var(--shadow-spread) var(--secondary-shadow);
1042
1066
  }
1043
1067
 
1044
1068
  .Button--basic:disabled {
1045
- background: var(--secondary-lighter);
1046
- color: var(--inverse-lightest);
1069
+ background: var(--secondary-lighter);
1070
+ color: var(--inverse-lightest);
1047
1071
  }
1048
1072
 
1049
1073
  .Button--primary {
1050
- background: var(--primary);
1074
+ background: var(--primary);
1051
1075
  }
1052
1076
 
1053
1077
  .Button--primary:hover {
1054
- background: var(--primary-dark);
1078
+ background: var(--primary-dark);
1055
1079
  }
1056
1080
 
1057
1081
  .Button--primary:active {
1058
- background: var(--primary-darker);
1082
+ background: var(--primary-darker);
1059
1083
  }
1060
1084
 
1061
1085
  .Button--primary:focus {
1062
- box-shadow: var(--shadow-spread) var(--primary-shadow);
1086
+ box-shadow: var(--shadow-spread) var(--primary-shadow);
1063
1087
  }
1064
1088
 
1065
1089
  .Button--primary:disabled {
1066
- background: var(--primary-lighter);
1090
+ background: var(--primary-lighter);
1067
1091
  }
1068
1092
 
1069
1093
  .Button--success {
1070
- background: var(--success);
1094
+ background: var(--success);
1071
1095
  }
1072
1096
 
1073
1097
  .Button--success:hover {
1074
- background: var(--success-dark);
1098
+ background: var(--success-dark);
1075
1099
  }
1076
1100
 
1077
1101
  .Button--success:active {
1078
- background: var(--success-darker);
1102
+ background: var(--success-darker);
1079
1103
  }
1080
1104
 
1081
1105
  .Button--success:focus {
1082
- box-shadow: var(--shadow-spread) var(--success-shadow);
1106
+ box-shadow: var(--shadow-spread) var(--success-shadow);
1083
1107
  }
1084
1108
 
1085
1109
  .Button--success:disabled {
1086
- background: var(--success-lighter);
1110
+ background: var(--success-lighter);
1087
1111
  }
1088
1112
 
1089
1113
  .Button--alert {
1090
- background: var(--alert);
1114
+ background: var(--alert);
1091
1115
  }
1092
1116
 
1093
1117
  .Button--alert:hover {
1094
- background: var(--alert-dark);
1118
+ background: var(--alert-dark);
1095
1119
  }
1096
1120
 
1097
1121
  .Button--alert:active {
1098
- background: var(--alert-darker);
1122
+ background: var(--alert-darker);
1099
1123
  }
1100
1124
 
1101
1125
  .Button--alert:focus {
1102
- box-shadow: var(--shadow-spread) var(--alert-shadow);
1126
+ box-shadow: var(--shadow-spread) var(--alert-shadow);
1103
1127
  }
1104
1128
 
1105
1129
  .Button--alert:disabled {
1106
- background: var(--alert-lighter);
1130
+ background: var(--alert-lighter);
1107
1131
  }
1108
1132
 
1109
1133
  .Button--transparent {
1110
- background: transparent;
1111
- color: var(--inverse);
1134
+ background: transparent;
1135
+ color: var(--inverse);
1112
1136
  }
1113
1137
 
1114
1138
  .Button--transparent:hover {
1115
- background: var(--secondary-light);
1139
+ background: var(--secondary-light);
1140
+ }
1141
+
1142
+ .Button--transparent:focus {
1143
+ background: rgba(229, 229, 229, 0.2);
1144
+ /* box-shadow: var(--shadow-spread) var(--secondary-shadow); */
1116
1145
  }
1117
1146
 
1118
1147
  .Button--transparent:active {
1119
- background: var(--secondary);
1148
+ background: var(--secondary);
1120
1149
  }
1121
1150
 
1122
- .Button--transparent:focus {
1123
- background: rgba(229, 229, 229, 0.2);
1124
- /* box-shadow: var(--shadow-spread) var(--secondary-shadow); */
1151
+ .Button--transparent:focus:active {
1152
+ background: var(--secondary);
1125
1153
  }
1126
1154
 
1127
1155
  .Button--transparent:disabled {
1128
- background: transparent;
1129
- color: var(--inverse-lightest);
1156
+ background: transparent;
1157
+ color: var(--inverse-lightest);
1130
1158
  }
1131
1159
 
1132
1160
  .Button-spinner {
1133
- display: flex;
1134
- position: absolute;
1135
- z-index: 1;
1161
+ display: flex;
1162
+ position: absolute;
1163
+ z-index: 1;
1136
1164
  }
1137
1165
 
1138
1166
  .Button--tiny .Spinner--small {
1139
- height: var(--font-size-s);
1140
- width: var(--font-size-s);
1167
+ height: var(--font-size-s);
1168
+ width: var(--font-size-s);
1141
1169
  }
1142
1170
 
1143
1171
  .Button--large .Spinner--small {
1144
- height: var(--font-size-l);
1145
- width: var(--font-size-l);
1172
+ height: var(--font-size-l);
1173
+ width: var(--font-size-l);
1146
1174
  }
1147
1175
 
1148
1176
  .Button--selected {
1149
- background: var(--primary-lightest);
1150
- color: var(--primary);
1177
+ background: var(--primary-lightest);
1178
+ color: var(--primary);
1151
1179
  }
1152
1180
 
1153
1181
  .Button-text--hidden {
1154
- visibility: hidden;
1182
+ visibility: hidden;
1155
1183
  }
1156
1184
 
1157
1185
  /* calendar */
1158
1186
 
1159
1187
  .Calendar-wrapper {
1160
- display: flex;
1161
- flex-wrap: wrap;
1188
+ display: flex;
1189
+ flex-wrap: wrap;
1162
1190
  }
1163
1191
 
1164
1192
  .Calendar {
1165
- display: flex;
1166
- flex-direction: column;
1167
- box-sizing: border-box;
1193
+ display: flex;
1194
+ flex-direction: column;
1195
+ box-sizing: border-box;
1168
1196
  }
1169
1197
 
1170
1198
  .Calendar--small {
1171
- padding: var(--spacing-l);
1172
- padding-bottom: var(--spacing);
1173
- width: 212px;
1199
+ padding: var(--spacing-l);
1200
+ padding-bottom: var(--spacing);
1201
+ width: 212px;
1174
1202
  }
1175
1203
 
1176
- .Calendar--date--small{
1177
- height: 248px;
1204
+ .Calendar--date--small {
1205
+ height: 248px;
1178
1206
  }
1179
1207
 
1180
- .Calendar--month--small{
1181
- height: 208px;
1208
+ .Calendar--month--small {
1209
+ height: 192px;
1182
1210
  }
1183
1211
 
1184
- .Calendar--year--small{
1185
- height: 208px;
1212
+ .Calendar--year--small {
1213
+ height: 192px;
1186
1214
  }
1187
1215
 
1188
1216
  .Calendar--large {
1189
- padding-top: var(--spacing-2);
1190
- padding-left: var(--spacing-2);
1191
- padding-right: var(--spacing-2);
1192
- padding-bottom: var(--spacing-l);
1193
- width: 316px;
1217
+ padding-top: var(--spacing-2);
1218
+ padding-left: var(--spacing-2);
1219
+ padding-right: var(--spacing-2);
1220
+ padding-bottom: var(--spacing-l);
1221
+ width: 316px;
1194
1222
  }
1195
1223
 
1196
- .Calendar--date--large{
1197
- height: 324px;
1224
+ .Calendar--date--large {
1225
+ height: 324px;
1198
1226
  }
1199
1227
 
1200
- .Calendar--month--large{
1201
- height: 274px;
1228
+ .Calendar--month--large {
1229
+ height: 272px;
1202
1230
  }
1203
1231
 
1204
- .Calendar--year--large{
1205
- height: 274px;
1232
+ .Calendar--year--large {
1233
+ height: 272px;
1206
1234
  }
1207
1235
 
1208
1236
  .Calendar-header--large {
1209
- position: relative;
1210
- display: flex;
1211
- justify-content: center;
1212
- align-items: center;
1213
- padding-bottom: var(--spacing-l);
1237
+ position: relative;
1238
+ display: flex;
1239
+ justify-content: center;
1240
+ align-items: center;
1241
+ padding-bottom: var(--spacing-l);
1214
1242
  }
1215
1243
 
1216
1244
  .Calendar-header--small {
1217
- position: relative;
1218
- display: flex;
1219
- justify-content: center;
1220
- align-items: center;
1221
- padding-bottom: var(--spacing-m);
1245
+ position: relative;
1246
+ display: flex;
1247
+ justify-content: center;
1248
+ align-items: center;
1249
+ padding-bottom: var(--spacing-m);
1222
1250
  }
1223
1251
 
1224
1252
  .Calendar-headerIcon {
1225
- position: absolute;
1226
- display: flex;
1227
- align-items: center;
1228
- justify-content: center;
1229
- cursor: pointer;
1230
- -webkit-user-select: none;
1231
- -moz-user-select: none;
1232
- -ms-user-select: none;
1233
- user-select: none;
1253
+ position: absolute;
1254
+ display: flex;
1255
+ align-items: center;
1256
+ justify-content: center;
1257
+ cursor: pointer;
1258
+ -webkit-user-select: none;
1259
+ -moz-user-select: none;
1260
+ -ms-user-select: none;
1261
+ user-select: none;
1234
1262
  }
1235
1263
 
1236
1264
  .Calendar-headerIcon--prev {
1237
- left: 0;
1265
+ left: 0;
1238
1266
  }
1239
1267
 
1240
1268
  .Calendar-headerIcon--next {
1241
- right: 0;
1269
+ right: 0;
1242
1270
  }
1243
1271
 
1244
1272
  .Calendar-headerContent {
1245
- display: flex;
1246
- white-space: nowrap;
1247
- cursor: pointer;
1248
- padding-top: var(--spacing-m);
1249
- padding-bottom: var(--spacing-m);
1250
- -webkit-user-select: none;
1251
- -moz-user-select: none;
1252
- -ms-user-select: none;
1253
- user-select: none;
1273
+ display: flex;
1274
+ white-space: nowrap;
1275
+ cursor: pointer;
1276
+ padding-top: var(--spacing-m);
1277
+ padding-bottom: var(--spacing-m);
1278
+ -webkit-user-select: none;
1279
+ -moz-user-select: none;
1280
+ -ms-user-select: none;
1281
+ user-select: none;
1254
1282
  }
1255
1283
 
1256
1284
  .Calendar-body {
1257
- display: flex;
1258
- flex-direction: column;
1259
- flex-grow: 1;
1260
- justify-content: space-around;
1285
+ display: flex;
1286
+ flex-direction: column;
1287
+ flex-grow: 1;
1288
+ justify-content: space-around;
1261
1289
  }
1262
1290
 
1263
1291
  .Calendar-valueRow {
1264
- display: flex;
1265
- justify-content: space-around;
1266
- padding-top: var(--spacing-s);
1267
- padding-bottom: var(--spacing-s);
1292
+ display: flex;
1293
+ justify-content: space-between;
1294
+ padding-top: var(--spacing-s);
1295
+ padding-bottom: var(--spacing-s);
1268
1296
  }
1269
1297
 
1270
1298
  .Calendar-valueWrapper {
1271
- display: inline-flex;
1272
- flex: 1 0 0;
1273
- justify-content: center;
1274
- position: relative;
1299
+ display: inline-flex;
1300
+ flex: 1 0 0;
1301
+ justify-content: center;
1302
+ position: relative;
1275
1303
  }
1276
1304
 
1277
1305
  .Calendar-valueWrapper--inRange {
1278
- background: var(--primary-lightest);
1306
+ background: var(--primary-lightest);
1279
1307
  }
1280
1308
 
1281
1309
  .Calendar-valueWrapper--inRangeError {
1282
- background: var(--alert-lightest);
1310
+ background: var(--alert-lightest);
1283
1311
  }
1284
1312
 
1285
1313
  .Calendar-valueWrapper--start {
1286
- background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);
1287
- border-radius: var(--spacing-m) 0 0 var(--spacing-m);
1314
+ background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);
1315
+ border-radius: var(--spacing-m) 0 0 var(--spacing-m);
1288
1316
  }
1289
1317
 
1290
1318
  .Calendar-valueWrapper--startError {
1291
- background: linear-gradient(90deg, white 50%, var(--alert-lightest) 50%);
1319
+ background: linear-gradient(90deg, white 50%, var(--alert-lightest) 50%);
1292
1320
  }
1293
1321
 
1294
1322
  .Calendar-valueWrapper--end {
1295
- background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);
1296
- border-radius: 0 var(--spacing-m) var(--spacing-m) 0;
1323
+ background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);
1324
+ border-radius: 0 var(--spacing-m) var(--spacing-m) 0;
1297
1325
  }
1298
1326
 
1299
1327
  .Calendar-valueWrapper--endError {
1300
- background: linear-gradient(90deg, var(--alert-lightest) 50%, white 50%);
1328
+ background: linear-gradient(90deg, var(--alert-lightest) 50%, white 50%);
1301
1329
  }
1302
1330
 
1303
1331
  .Calendar-valueWrapper--startEnd {
1304
- background: transparent;
1332
+ background: transparent;
1305
1333
  }
1306
1334
 
1307
1335
  .Calendar-value {
1308
- display: inline-flex;
1309
- align-items: center;
1310
- justify-content: center;
1311
- text-align: center;
1312
- cursor: pointer;
1313
- -webkit-user-select: none;
1314
- -moz-user-select: none;
1315
- -ms-user-select: none;
1316
- user-select: none;
1317
- border-radius: var(--spacing-m);
1336
+ display: inline-flex;
1337
+ align-items: center;
1338
+ justify-content: center;
1339
+ text-align: center;
1340
+ cursor: pointer;
1341
+ -webkit-user-select: none;
1342
+ -moz-user-select: none;
1343
+ -ms-user-select: none;
1344
+ user-select: none;
1345
+ border-radius: var(--spacing-m);
1318
1346
  }
1319
1347
 
1320
1348
  .Calendar-value:hover {
1321
- background: var(--secondary);
1349
+ background: var(--secondary);
1322
1350
  }
1323
1351
 
1324
- .Calendar-value--start:hover, .Calendar-value--end:hover {
1325
- background: var(--primary-lightest);
1352
+ .Calendar-value--start:hover,
1353
+ .Calendar-value--end:hover {
1354
+ background: var(--primary-lightest);
1326
1355
  }
1327
1356
 
1328
- .Calendar-value--startError:hover, .Calendar-value--endError:hover {
1329
- background: var(--alert-lightest);
1357
+ .Calendar-value--startError:hover,
1358
+ .Calendar-value--endError:hover {
1359
+ background: var(--alert-lightest);
1330
1360
  }
1331
1361
 
1332
- .Calendar-value--start, .Calendar-value--end {
1333
- background: var(--primary-lightest);
1362
+ .Calendar-value--start,
1363
+ .Calendar-value--end {
1364
+ background: var(--primary-lightest);
1334
1365
  }
1335
1366
 
1336
- .Calendar-value--startError, .Calendar-value--endError {
1337
- background: var(--alert-lightest);
1367
+ .Calendar-value--startError,
1368
+ .Calendar-value--endError {
1369
+ background: var(--alert-lightest);
1338
1370
  }
1339
1371
 
1340
- .Calendar-value--currDateMonthYear, .Calendar-value--currDateMonthYear:hover {
1341
- background: var(--primary-lightest) !important;
1372
+ .Calendar-value--currDateMonthYear,
1373
+ .Calendar-value--currDateMonthYear:hover {
1374
+ background: var(--primary-lightest) !important;
1342
1375
  }
1343
1376
 
1344
- .Calendar-value--active, .Calendar-value--active:hover {
1345
- background: var(--primary) !important;
1346
- font-weight: var(--font-weight-bold);
1377
+ .Calendar-value--active,
1378
+ .Calendar-value--active:hover {
1379
+ background: var(--primary) !important;
1380
+ font-weight: var(--font-weight-bold);
1347
1381
  }
1348
1382
 
1349
- .Calendar-yearValue, .Calendar-monthValue {}
1383
+ .Calendar-yearValue,
1384
+ .Calendar-monthValue {
1385
+ }
1350
1386
 
1351
- .Calendar-yearValue--small, .Calendar-monthValue--small {
1352
- height: var(--spacing-xl);
1353
- width: var(--spacing-4);
1387
+ .Calendar-yearValue--small,
1388
+ .Calendar-monthValue--small {
1389
+ height: var(--spacing-xl);
1390
+ width: var(--spacing-4);
1354
1391
  }
1355
1392
 
1356
- .Calendar-yearValue--large, .Calendar-monthValue--large {
1357
- height: var(--spacing-3);
1358
- width: var(--spacing-5);
1393
+ .Calendar-yearValue--large,
1394
+ .Calendar-monthValue--large {
1395
+ height: var(--spacing-3);
1396
+ width: var(--spacing-5);
1359
1397
  }
1360
1398
 
1361
- .Calendar-dateValue {}
1399
+ .Calendar-dateValue {
1400
+ }
1362
1401
 
1363
1402
  .Calendar-dateValue--small {
1364
- height: var(--spacing-xl);
1365
- width: var(--spacing-xl);
1403
+ height: var(--spacing-xl);
1404
+ width: var(--spacing-xl);
1366
1405
  }
1367
1406
 
1368
1407
  .Calendar-dateValue--large {
1369
- height: var(--spacing-3);
1370
- width: var(--spacing-3);
1408
+ height: var(--spacing-3);
1409
+ width: var(--spacing-3);
1371
1410
  }
1372
1411
 
1373
1412
  .Calendar-valueWrapper--dummy {
1374
- opacity: 0.58;
1413
+ opacity: 0.58;
1375
1414
  }
1376
1415
 
1377
1416
  .Calendar-value--disabled {
1378
- pointer-events: none;
1417
+ pointer-events: none;
1379
1418
  }
1380
1419
 
1381
1420
  .Calendar-dayValues {
1382
- display: flex;
1383
- justify-content: center;
1384
- padding-top: var(--spacing);
1385
- padding-bottom: var(--spacing);
1421
+ display: flex;
1422
+ justify-content: center;
1423
+ padding-top: var(--spacing);
1424
+ padding-bottom: var(--spacing);
1386
1425
  }
1387
1426
 
1388
1427
  .Calendar-dateValues {
1389
- display: flex;
1390
- flex-direction: column;
1391
- flex-grow: 1;
1392
- justify-content: space-around;
1428
+ display: flex;
1429
+ flex-direction: column;
1430
+ flex-grow: 1;
1431
+ justify-content: space-around;
1393
1432
  }
1394
1433
 
1395
1434
  .Calendar-dayValues .Calendar-value {
1396
- padding: 0;
1435
+ padding: 0;
1397
1436
  }
1398
1437
 
1399
- .Calendar-eventsIndicator{
1400
- position: absolute;
1401
- bottom: var(--spacing-s);
1402
- width: var(--spacing-m);
1403
- height: var(--spacing-m);
1404
- background-color: var(--alert);
1405
- border-radius: 50%;
1438
+ .Calendar-eventsIndicator {
1439
+ position: absolute;
1440
+ bottom: var(--spacing-s);
1441
+ width: var(--spacing-m);
1442
+ height: var(--spacing-m);
1443
+ background-color: var(--alert);
1444
+ border-radius: 50%;
1406
1445
  }
1407
- .Calendar-eventsIndicator--small{
1408
- width: 3px;
1409
- height: 3px;
1446
+ .Calendar-eventsIndicator--small {
1447
+ width: 3px;
1448
+ height: 3px;
1410
1449
  }
1411
- .Calendar-eventsIndicator--active{
1412
- background-color: var(--white);
1450
+ .Calendar-eventsIndicator--active {
1451
+ background-color: var(--white);
1413
1452
  }
1414
1453
 
1415
1454
  /* badge */
@@ -1453,8 +1492,6 @@ body {
1453
1492
  border-top: var(--spacing-xs) solid var(--secondary-light);
1454
1493
  }
1455
1494
 
1456
-
1457
-
1458
1495
  .CardSubdued {
1459
1496
  background: var(--card-subdued-bg);
1460
1497
  padding: var(--spacing-2);
@@ -1465,22 +1502,21 @@ body {
1465
1502
  }
1466
1503
 
1467
1504
  .CardSubdued--left {
1468
- border-left: var(--spacing-xs) solid var(--secondary-light);;
1505
+ border-left: var(--spacing-xs) solid var(--secondary-light);
1469
1506
  }
1470
1507
 
1471
1508
  .CardSubdued--right {
1472
- border-right: var(--spacing-xs) solid var(--secondary-light);;
1509
+ border-right: var(--spacing-xs) solid var(--secondary-light);
1473
1510
  }
1474
1511
 
1475
1512
  .CardSubdued--bottom {
1476
- border-bottom: var(--spacing-xs) solid var(--secondary-light);;
1513
+ border-bottom: var(--spacing-xs) solid var(--secondary-light);
1477
1514
  }
1478
1515
 
1479
-
1480
1516
  .Box {
1481
1517
  width: 100%;
1482
1518
  border-radius: var(--spacing);
1483
- padding: var(--spacing-l)
1519
+ padding: var(--spacing-l);
1484
1520
  }
1485
1521
 
1486
1522
  .Box--typing {
@@ -1517,140 +1553,142 @@ body {
1517
1553
  /* badge */
1518
1554
 
1519
1555
  .Checkbox {
1520
- display: flex;
1521
- -webkit-user-select: none;
1522
- -moz-user-select: none;
1523
- -ms-user-select: none;
1524
- user-select: none;
1525
- line-height: initial;
1526
- box-sizing: border-box;
1527
- padding-top: var(--spacing-s);
1528
- padding-bottom: var(--spacing-s);
1556
+ display: flex;
1557
+ -webkit-user-select: none;
1558
+ -moz-user-select: none;
1559
+ -ms-user-select: none;
1560
+ user-select: none;
1561
+ line-height: initial;
1562
+ box-sizing: border-box;
1563
+ padding-top: var(--spacing-s);
1564
+ padding-bottom: var(--spacing-s);
1529
1565
  }
1530
1566
 
1531
1567
  .Checkbox-input {
1532
- position: absolute;
1533
- z-index: 2;
1534
- opacity: 0;
1535
- cursor: pointer;
1536
- height: 100%;
1537
- width: 100%;
1538
- margin: 0;
1568
+ position: absolute;
1569
+ z-index: 2;
1570
+ opacity: 0;
1571
+ cursor: pointer;
1572
+ height: 100%;
1573
+ width: 100%;
1574
+ margin: 0;
1539
1575
  }
1540
1576
 
1541
1577
  .Checkbox-labelWrapper {
1542
- padding-left: var(--spacing);
1543
- display: flex;
1544
- flex-direction: column;
1578
+ padding-left: var(--spacing);
1579
+ display: flex;
1580
+ flex-direction: column;
1581
+ min-width: 0;
1545
1582
  }
1546
1583
 
1547
1584
  .Checkbox-label {
1548
- display: flex;
1549
- cursor: pointer;
1585
+ display: flex;
1586
+ cursor: pointer;
1550
1587
  }
1551
1588
 
1552
1589
  .Checkbox-outerWrapper {
1553
- position: relative;
1554
- margin-top: var(--spacing-s);
1590
+ position: relative;
1591
+ margin-top: var(--spacing-s);
1555
1592
  }
1556
1593
 
1557
1594
  .Checkbox-outerWrapper--regular {
1558
- height: var(--spacing-2);
1559
- min-width: var(--spacing-2);
1595
+ height: var(--spacing-2);
1596
+ min-width: var(--spacing-2);
1560
1597
  }
1561
1598
 
1562
1599
  .Checkbox-outerWrapper--tiny {
1563
- height: var(--spacing-l);
1564
- min-width: var(--spacing-l);
1600
+ height: var(--spacing-l);
1601
+ min-width: var(--spacing-l);
1565
1602
  }
1566
1603
 
1567
1604
  /* Type: Unchecked */
1568
1605
 
1569
1606
  .Checkbox-wrapper {
1570
- top: 0;
1571
- left: 0;
1572
- border: var(--border);
1573
- border-radius: var(--spacing-s);
1574
- display: flex;
1575
- align-items: center;
1576
- box-sizing: border-box;
1577
- height: 100%;
1578
- width: 100%;
1607
+ top: 0;
1608
+ left: 0;
1609
+ border: var(--border);
1610
+ border-radius: var(--spacing-s);
1611
+ display: flex;
1612
+ align-items: center;
1613
+ box-sizing: border-box;
1614
+ height: 100%;
1615
+ width: 100%;
1579
1616
  }
1580
1617
 
1581
1618
  .Checkbox-input:focus {
1582
- outline: 0;
1619
+ outline: 0;
1583
1620
  }
1584
1621
 
1585
- .Checkbox-input:focus~.Checkbox-wrapper {
1586
- box-shadow: var(--shadow-spread) var(--secondary-shadow);
1622
+ .Checkbox-input:focus ~ .Checkbox-wrapper {
1623
+ box-shadow: var(--shadow-spread) var(--secondary-shadow);
1587
1624
  }
1588
1625
 
1589
- .Checkbox-input:hover~.Checkbox-wrapper {
1590
- border: var(--spacing-xs) solid var(--inverse-lightest);
1591
- background-color: var(--shadow-0);
1626
+ .Checkbox-input:hover ~ .Checkbox-wrapper {
1627
+ border: var(--spacing-xs) solid var(--inverse-lightest);
1628
+ background-color: var(--shadow-0);
1592
1629
  }
1593
1630
 
1594
- .Checkbox-input:active~.Checkbox-wrapper {
1595
- border: var(--spacing-xs) solid var(--inverse-lightest);
1596
- background-color: var(--secondary-light);
1631
+ .Checkbox-input:active ~ .Checkbox-wrapper {
1632
+ border: var(--spacing-xs) solid var(--inverse-lightest);
1633
+ background-color: var(--secondary-light);
1597
1634
  }
1598
1635
 
1599
1636
  .Checkbox--disabled {
1600
- pointer-events: none;
1637
+ pointer-events: none;
1601
1638
  }
1602
1639
 
1603
1640
  .Checkbox--disabled .Checkbox-wrapper {
1604
- border: var(--spacing-xs) solid var(--secondary-light);
1605
- background-color: var(--secondary-lightest);
1641
+ border: var(--spacing-xs) solid var(--secondary-light);
1642
+ background-color: var(--secondary-lightest);
1606
1643
  }
1607
1644
 
1608
1645
  /* Type: checked && Type: indeterminate */
1609
1646
 
1610
- .Checkbox-input--checked~.Checkbox-wrapper,
1611
- .Checkbox-input--indeterminate~.Checkbox-wrapper {
1612
- background-color: var(--primary);
1613
- border: 0;
1647
+ .Checkbox-input--checked ~ .Checkbox-wrapper,
1648
+ .Checkbox-input--indeterminate ~ .Checkbox-wrapper {
1649
+ background-color: var(--primary);
1650
+ border: 0;
1614
1651
  }
1615
1652
 
1616
- .Checkbox-input--checked:focus~.Checkbox-wrapper,
1617
- .Checkbox-input--indeterminate:focus~.Checkbox-wrapper {
1618
- box-shadow: var(--shadow-spread) var(--primary-shadow);
1619
- background-color: var(--primary);
1620
- border: 0;
1653
+ .Checkbox-input--checked:focus ~ .Checkbox-wrapper,
1654
+ .Checkbox-input--indeterminate:focus ~ .Checkbox-wrapper {
1655
+ box-shadow: var(--shadow-spread) var(--primary-shadow);
1656
+ background-color: var(--primary);
1657
+ border: 0;
1621
1658
  }
1622
1659
 
1623
- .Checkbox-input--checked:hover~.Checkbox-wrapper,
1624
- .Checkbox-input--indeterminate:hover~.Checkbox-wrapper {
1625
- background-color: var(--primary-dark);
1626
- border: 0;
1660
+ .Checkbox-input--checked:hover ~ .Checkbox-wrapper,
1661
+ .Checkbox-input--indeterminate:hover ~ .Checkbox-wrapper {
1662
+ background-color: var(--primary-dark);
1663
+ border: 0;
1627
1664
  }
1628
1665
 
1629
- .Checkbox-input--checked:active~.Checkbox-wrapper,
1630
- .Checkbox-input--indeterminate:active~.Checkbox-wrapper {
1631
- background-color: var(--primary-darker);
1632
- border: 0;
1666
+ .Checkbox-input--checked:active ~ .Checkbox-wrapper,
1667
+ .Checkbox-input--indeterminate:active ~ .Checkbox-wrapper {
1668
+ background-color: var(--primary-darker);
1669
+ border: 0;
1633
1670
  }
1634
1671
 
1635
- .Checkbox--disabled .Checkbox-input--checked~.Checkbox-wrapper,
1636
- .Checkbox--disabled .Checkbox-input--indeterminate~.Checkbox-wrapper {
1637
- background-color: var(--primary-lighter);
1638
- border: 0;
1672
+ .Checkbox--disabled .Checkbox-input--checked ~ .Checkbox-wrapper,
1673
+ .Checkbox--disabled .Checkbox-input--indeterminate ~ .Checkbox-wrapper {
1674
+ background-color: var(--primary-lighter);
1675
+ border: 0;
1639
1676
  }
1677
+
1640
1678
  .Chip {
1641
1679
  display: flex;
1642
1680
  box-sizing: border-box;
1643
- border-radius: var( --spacing-l);
1644
- padding-right: var( --spacing);
1645
- padding-left: var( --spacing);
1646
- padding-top: var( --spacing-s);
1647
- padding-bottom: var( --spacing-s);
1681
+ border-radius: var(--spacing-l);
1682
+ padding-right: var(--spacing);
1683
+ padding-left: var(--spacing);
1684
+ padding-top: var(--spacing-s);
1685
+ padding-bottom: var(--spacing-s);
1648
1686
  width: -webkit-fit-content;
1649
1687
  width: -moz-fit-content;
1650
1688
  width: fit-content;
1651
1689
  justify-content: space-between;
1652
1690
  border-style: solid;
1653
- border-width: var( --spacing-xs);
1691
+ border-width: var(--spacing-xs);
1654
1692
  align-items: center;
1655
1693
  flex-direction: row;
1656
1694
  cursor: default;
@@ -1662,19 +1700,19 @@ body {
1662
1700
  }
1663
1701
 
1664
1702
  .Chip-icon--left {
1665
- padding-right: var( --spacing-m);
1703
+ padding-right: var(--spacing-m);
1666
1704
  display: flex;
1667
1705
  align-items: center;
1668
1706
  }
1669
1707
 
1670
1708
  .Chip-icon--right {
1671
- padding-left: var( --spacing-m);
1709
+ padding-left: var(--spacing-m);
1672
1710
  display: flex;
1673
1711
  align-items: center;
1674
1712
  }
1675
1713
 
1676
1714
  .Chip--action {
1677
- background: var( --shadow-0);
1715
+ background: var(--shadow-0);
1678
1716
  border-color: var(--stone);
1679
1717
  cursor: pointer;
1680
1718
  }
@@ -1699,8 +1737,9 @@ body {
1699
1737
  }
1700
1738
 
1701
1739
  .Chip--selection {
1702
- background: var( --shadow-0);
1740
+ background: var(--shadow-0);
1703
1741
  border-color: var(--stone);
1742
+ cursor: pointer;
1704
1743
  }
1705
1744
 
1706
1745
  .Chip--selection:hover {
@@ -1731,13 +1770,13 @@ body {
1731
1770
  }
1732
1771
 
1733
1772
  .Chip-selection--disabled {
1734
- background: var( --shadow-0);
1773
+ background: var(--shadow-0);
1735
1774
  border-color: var(--stone-light);
1736
1775
  }
1737
1776
 
1738
1777
  .Chip--input {
1739
1778
  background: var(--stone-light);
1740
- font-weight: var( --font-weight-normal);
1779
+ font-weight: var(--font-weight-normal);
1741
1780
  border: 0px;
1742
1781
  }
1743
1782
 
@@ -1749,21 +1788,23 @@ body {
1749
1788
  background: var(--stone-light);
1750
1789
  border: 0px;
1751
1790
  }
1791
+
1752
1792
  .ChipGroup {
1753
- display: inline-flex;
1793
+ display: inline-flex;
1754
1794
  }
1755
1795
 
1756
1796
  .ChipGroup-item {
1757
- margin: 0 var(--spacing-m);
1797
+ margin: 0 var(--spacing-m);
1758
1798
  }
1759
1799
 
1760
1800
  .ChipGroup-item:first-child {
1761
- margin-left: 0;
1801
+ margin-left: 0;
1762
1802
  }
1763
1803
 
1764
1804
  .ChipGroup-item:last-child {
1765
- margin-right: 0;
1805
+ margin-right: 0;
1766
1806
  }
1807
+
1767
1808
  .ChipInput {
1768
1809
  box-sizing: border-box;
1769
1810
  display: flex;
@@ -1812,7 +1853,7 @@ body {
1812
1853
  .ChipInput-icon {
1813
1854
  height: var(--spacing-2);
1814
1855
  margin-top: var(--spacing-m);
1815
- padding-top: var(--spacing-s);
1856
+ padding-top: var(--spacing-s);
1816
1857
  margin-right: var(--spacing-l);
1817
1858
  cursor: pointer;
1818
1859
  }
@@ -1824,11 +1865,11 @@ body {
1824
1865
  }
1825
1866
 
1826
1867
  .ChoiceList-checkbox--vertical {
1827
- margin-top: var(--spacing)
1868
+ margin-top: var(--spacing);
1828
1869
  }
1829
1870
 
1830
1871
  .ChoiceList-radio--vertical {
1831
- margin-top: var(--spacing)
1872
+ margin-top: var(--spacing);
1832
1873
  }
1833
1874
 
1834
1875
  .ChoiceList--alignHorizontal {
@@ -1836,11 +1877,11 @@ body {
1836
1877
  }
1837
1878
 
1838
1879
  .ChoiceList-checkbox--horizontal {
1839
- margin-left: var(--spacing-xl)
1880
+ margin-left: var(--spacing-xl);
1840
1881
  }
1841
1882
 
1842
1883
  .ChoiceList-radio--horizontal {
1843
- margin-left: var(--spacing-xl)
1884
+ margin-left: var(--spacing-xl);
1844
1885
  }
1845
1886
 
1846
1887
  .Collapsible-wrapper {
@@ -1883,263 +1924,286 @@ body {
1883
1924
  }
1884
1925
 
1885
1926
  .DateRangePicker {
1886
- display: flex;
1927
+ display: flex;
1887
1928
  }
1888
1929
 
1889
1930
  .DateRangePicker--left {
1890
- flex-direction: row;
1931
+ flex-direction: row;
1891
1932
  }
1892
1933
 
1893
1934
  .DateRangePicker--right {
1894
- flex-direction: row-reverse;
1935
+ flex-direction: row-reverse;
1895
1936
  }
1896
1937
 
1897
1938
  .DateRangePicker-input {
1898
- box-sizing: border-box;
1939
+ box-sizing: border-box;
1899
1940
  }
1900
1941
 
1901
1942
  .DateRangePicker-input--startDate {
1902
- padding-right: var(--spacing-m);
1943
+ padding-right: var(--spacing-m);
1903
1944
  }
1904
1945
 
1905
1946
  .DateRangePicker-input--endDate {
1906
- padding-left: var(--spacing-m);
1947
+ padding-left: var(--spacing-m);
1907
1948
  }
1908
1949
 
1909
1950
  @media (max-width: 576px) {
1910
- .DateRangePicker-input {
1911
- padding: 0;
1912
- }
1951
+ .DateRangePicker-input {
1952
+ padding: 0;
1953
+ }
1954
+
1955
+ .DateRangePicker-input--endDate {
1956
+ padding-top: var(--spacing);
1957
+ }
1958
+ }
1913
1959
 
1914
- .DateRangePicker-input--endDate {
1915
- padding-top: var(--spacing);
1916
- }
1960
+ .Divider {
1961
+ border: none;
1962
+ margin: 0;
1963
+ }
1964
+
1965
+ .Divider--vertical {
1966
+ width: 1px;
1967
+ }
1968
+
1969
+ .Divider--horizontal {
1970
+ height: 1px;
1971
+ }
1972
+
1973
+ .Divider--basic {
1974
+ background: var(--secondary-light);
1917
1975
  }
1976
+
1977
+ .Divider--header {
1978
+ background: var(--secondary);
1979
+ }
1980
+
1918
1981
  .Dropdown {
1919
- width: 100%;
1920
- position: relative;
1982
+ width: 100%;
1983
+ position: relative;
1921
1984
  }
1922
1985
 
1923
1986
  .Dropdown-wrapper {
1924
- margin-top: var(--spacing-m);
1925
- margin-bottom: var(--spacing-m);
1987
+ margin-top: var(--spacing-m);
1988
+ margin-bottom: var(--spacing-m);
1926
1989
  }
1927
1990
 
1928
1991
  .Dropdown-inputWrapper {
1929
- border-bottom: var(--border);
1992
+ border-bottom: var(--border);
1930
1993
  }
1931
1994
 
1932
1995
  .Dropdown-input {
1933
- min-width: unset !important;
1996
+ min-width: unset !important;
1934
1997
  }
1935
1998
 
1936
1999
  .Dropdown-input,
1937
2000
  .Dropdown-input:focus-within {
1938
- border: unset !important;
2001
+ border: unset !important;
1939
2002
  }
1940
2003
 
1941
2004
  .Dropdown-section {
1942
- display: flex;
1943
- justify-content: space-between;
1944
- align-items: center;
1945
- margin-left: var(--spacing-l);
1946
- margin-top: var(--spacing);
1947
- margin-bottom: 6px;
2005
+ display: flex;
2006
+ justify-content: space-between;
2007
+ align-items: center;
2008
+ margin-left: var(--spacing-l);
2009
+ margin-top: var(--spacing);
2010
+ margin-bottom: 6px;
1948
2011
  }
1949
2012
 
1950
2013
  .Dropdown-section--withClear {
1951
- margin-top: var(--spacing-m);
1952
- margin-bottom: var(--spacing-s);
2014
+ margin-top: var(--spacing-m);
2015
+ margin-bottom: var(--spacing-s);
1953
2016
  }
1954
2017
 
1955
2018
  .Dropdown--border {
1956
- border-top: var(--spacing-xs) solid var(--secondary-light);
2019
+ border-top: var(--spacing-xs) solid var(--secondary-light);
1957
2020
  }
1958
2021
 
1959
2022
  .Dropdown-errorWrapper {
1960
- min-height: var(--spacing-7);
2023
+ min-height: var(--spacing-7);
1961
2024
  }
1962
2025
 
1963
2026
  .Dropdown-buttonWrapper {
1964
- display: flex;
1965
- justify-content: flex-end;
1966
- padding-top: var(--spacing);
1967
- padding-right: var(--spacing);
1968
- padding-bottom: var(--spacing);
1969
- border-top: var(--spacing-xs) solid var(--secondary-light);
2027
+ display: flex;
2028
+ justify-content: flex-end;
2029
+ padding-top: var(--spacing);
2030
+ padding-right: var(--spacing);
2031
+ padding-bottom: var(--spacing);
2032
+ border-top: var(--spacing-xs) solid var(--secondary-light);
1970
2033
  }
1971
2034
 
1972
2035
  .Dropdown-footer {
1973
- padding-left: var(--spacing-l);
1974
- padding-bottom: var(--spacing-m);
1975
- padding-top: var(--spacing);
1976
- box-sizing: border-box;
2036
+ padding-left: var(--spacing-l);
2037
+ padding-bottom: var(--spacing-m);
2038
+ padding-top: var(--spacing);
2039
+ box-sizing: border-box;
1977
2040
  }
1978
2041
 
1979
2042
  .Option {
1980
- display: flex;
2043
+ display: flex;
1981
2044
  }
1982
2045
 
1983
2046
  .Option,
1984
2047
  .Option-loading {
1985
- padding-top: 6px;
1986
- padding-bottom: 6px;
1987
- padding-left: var(--spacing-l);
1988
- padding-right: var(--spacing-l);
2048
+ padding-top: 6px;
2049
+ padding-bottom: 6px;
2050
+ padding-left: var(--spacing-l);
2051
+ padding-right: var(--spacing-l);
1989
2052
  }
1990
2053
 
1991
2054
  .OptionCheckbox {
1992
- width: 100%;
1993
- padding-left: var(--spacing-l);
1994
- padding-top: var(--spacing-m);
1995
- padding-bottom: var(--spacing-m);
2055
+ width: 100%;
2056
+ padding-left: var(--spacing-l);
2057
+ padding-top: var(--spacing-m);
2058
+ padding-bottom: var(--spacing-m);
1996
2059
  }
1997
2060
 
1998
2061
  .Option--active,
1999
2062
  .Option-checkbox--active {
2000
- background-color: var(--secondary-lightest);
2001
- cursor: pointer;
2063
+ background-color: var(--secondary-lightest);
2064
+ cursor: pointer;
2002
2065
  }
2003
2066
 
2004
2067
  .Option-loading {
2005
- pointer-events: none;
2068
+ pointer-events: none;
2006
2069
  }
2007
2070
 
2008
2071
  .Option--selected {
2009
- background-color: var(--primary);
2010
- pointer-events: none;
2072
+ background-color: var(--primary);
2073
+ pointer-events: none;
2011
2074
  }
2012
2075
 
2013
2076
  .Option--disabled,
2014
2077
  .OptionWrapper--disabled {
2015
- pointer-events: none;
2078
+ pointer-events: none;
2016
2079
  }
2017
2080
 
2018
2081
  .Option-label {
2019
- overflow: hidden;
2020
- display: flex;
2021
- flex-direction: column;
2082
+ overflow: hidden;
2083
+ display: flex;
2084
+ flex-direction: column;
2022
2085
  }
2023
2086
 
2024
2087
  .OptionCheckbox .Checkbox-label {
2025
- padding-right: var(--spacing-l);
2026
- width: 100%;
2027
- display: flex;
2028
- overflow: hidden;
2088
+ padding-right: var(--spacing-l);
2089
+ width: 100%;
2090
+ display: flex;
2091
+ overflow: hidden;
2029
2092
  }
2030
2093
 
2031
2094
  .Option-text,
2032
2095
  .OptionCheckbox .Text {
2033
- white-space: nowrap;
2034
- overflow: hidden;
2035
- text-overflow: ellipsis;
2096
+ white-space: nowrap;
2097
+ overflow: hidden;
2098
+ text-overflow: ellipsis;
2036
2099
  }
2037
2100
 
2038
2101
  .Option-text--wrap,
2039
2102
  .Dropdown-wrapper--wrap .OptionCheckbox .Text {
2040
- white-space: unset;
2103
+ white-space: unset;
2041
2104
  }
2042
2105
 
2043
2106
  .Option--icon {
2044
- padding-left: var(--spacing);
2107
+ padding-left: var(--spacing);
2045
2108
  }
2046
2109
 
2047
2110
  .Option-icon {
2048
- display: flex;
2111
+ display: flex;
2049
2112
  }
2050
2113
 
2051
2114
  .Option-icon {
2052
- height: -webkit-fit-content;
2053
- height: -moz-fit-content;
2054
- height: fit-content;
2055
- line-height: var(--font-height);
2115
+ height: -webkit-fit-content;
2116
+ height: -moz-fit-content;
2117
+ height: fit-content;
2118
+ line-height: var(--font-height);
2056
2119
  }
2057
2120
 
2058
2121
  .Dropdown-wrapper::-webkit-scrollbar {
2059
- width: var(--spacing);
2122
+ width: var(--spacing);
2060
2123
  }
2061
2124
 
2062
2125
  .Dropdown-wrapper::-webkit-scrollbar-thumb {
2063
- background: var(--secondary);
2064
- border-radius: var(--spacing-m);
2126
+ background: var(--secondary);
2127
+ border-radius: var(--spacing-m);
2065
2128
  }
2129
+
2066
2130
  .DropdownButton {
2067
- width: 100%;
2068
- justify-content: space-between;
2069
- padding-top: unset;
2070
- padding-bottom: unset;
2071
- background: var(--secondary-light);
2072
- color: var(--text);
2131
+ width: 100%;
2132
+ justify-content: space-between;
2133
+ padding-top: unset;
2134
+ padding-bottom: unset;
2135
+ background: var(--secondary-light);
2136
+ color: var(--text);
2073
2137
  }
2074
2138
 
2075
2139
  .DropdownButton-wrapper {
2076
- width: 100%;
2077
- display: flex;
2078
- flex-direction: row;
2079
- overflow: hidden;
2140
+ width: 100%;
2141
+ display: flex;
2142
+ flex-direction: row;
2143
+ overflow: hidden;
2080
2144
  }
2081
2145
 
2082
2146
  .DropdownButton-text {
2083
- text-align: left;
2084
- white-space: nowrap;
2085
- overflow: hidden;
2086
- text-overflow: ellipsis;
2147
+ text-align: left;
2148
+ white-space: nowrap;
2149
+ overflow: hidden;
2150
+ text-overflow: ellipsis;
2087
2151
  }
2088
2152
 
2089
2153
  .DropdownButton--tiny {
2090
- height: var(--spacing-xl);
2091
- padding-right: var(--spacing);
2092
- padding-left: var(--spacing);
2154
+ height: var(--spacing-xl);
2155
+ padding-right: var(--spacing);
2156
+ padding-left: var(--spacing);
2093
2157
  }
2094
2158
 
2095
2159
  .DropdownButton--regular {
2096
- height: var(--spacing-3);
2097
- padding-right: var(--spacing);
2098
- padding-left: var(--spacing-l);
2160
+ height: var(--spacing-3);
2161
+ padding-right: var(--spacing);
2162
+ padding-left: var(--spacing-l);
2099
2163
  }
2100
2164
 
2101
2165
  .DropdownButton--tinySquare {
2102
- padding-left: var(--spacing-m);
2103
- padding-right: var(--spacing-m);
2166
+ padding-left: var(--spacing-m);
2167
+ padding-right: var(--spacing-m);
2104
2168
  }
2105
2169
 
2106
2170
  .DropdownButton--regularSquare {
2107
- padding-left: var(--spacing);
2108
- padding-right: var(--spacing);
2171
+ padding-left: var(--spacing);
2172
+ padding-right: var(--spacing);
2109
2173
  }
2110
2174
 
2111
2175
  .DropdownButton--placeholder {
2112
- color: var(--text-subtle);
2176
+ color: var(--text-subtle);
2113
2177
  }
2114
2178
 
2115
2179
  .DropdownButton:hover {
2116
- background: var(--secondary);
2117
- color: var(--text);
2180
+ background: var(--secondary);
2181
+ color: var(--text);
2118
2182
  }
2119
2183
 
2120
2184
  .DropdownButton:focus {
2121
- background-color: var(--secondary-lighter);
2122
- box-shadow: var(--shadow-spread) var(--secondary-shadow);
2185
+ background-color: var(--secondary-lighter);
2186
+ box-shadow: var(--shadow-spread) var(--secondary-shadow);
2123
2187
  }
2124
2188
 
2125
2189
  .DropdownButton:active,
2126
2190
  .DropdownButton--open {
2127
- background-color: var(--secondary-dark) !important;
2128
- color: var(--text) !important;
2191
+ background-color: var(--secondary-dark) !important;
2192
+ color: var(--text) !important;
2129
2193
  }
2130
2194
 
2131
2195
  .DropdownButton:disabled {
2132
- background: var(--secondary-lighter);
2133
- color: var(--text-disabled);
2134
- pointer-events: none;
2196
+ background: var(--secondary-lighter);
2197
+ color: var(--text-disabled);
2198
+ pointer-events: none;
2135
2199
  }
2136
2200
 
2137
2201
  .DropdownButton--icon {
2138
- padding-left: var(--spacing);
2202
+ padding-left: var(--spacing);
2139
2203
  }
2140
2204
 
2141
2205
  .DropdownButton--error {
2142
- border: var(--spacing-xs) solid var(--alert);
2206
+ border: var(--spacing-xs) solid var(--alert);
2143
2207
  }
2144
2208
 
2145
2209
  .Dropzone {
@@ -2149,11 +2213,10 @@ body {
2149
2213
  background: var(--white);
2150
2214
  border-radius: var(--spacing-m);
2151
2215
  width: 100%;
2152
- background-image:
2153
- linear-gradient(to right,var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
2154
- linear-gradient(var(--secondary) 50%,rgba(255, 255, 255, 0) 0%),
2155
- linear-gradient(to right, var(--secondary) 50%,rgba(255, 255, 255, 0) 0%),
2156
- linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);
2216
+ background-image: linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
2217
+ linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
2218
+ linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
2219
+ linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);
2157
2220
  background-position: top, right, bottom, left;
2158
2221
  background-repeat: repeat-x, repeat-y;
2159
2222
  background-size: 7px var(--spacing-xs), var(--spacing-xs) 7px;
@@ -2161,11 +2224,10 @@ body {
2161
2224
 
2162
2225
  .Dropzone--active {
2163
2226
  background: var(--primary-lightest);
2164
- background-image:
2165
- linear-gradient(to right,var(--primary) 50%, rgba(255, 255, 255, 0) 0%),
2166
- linear-gradient(var(--primary) 50%,rgba(255, 255, 255, 0) 0%),
2167
- linear-gradient(to right, var(--primary) 50%,rgba(255, 255, 255, 0) 0%),
2168
- linear-gradient(var(--primary) 50%, rgba(255, 255, 255, 0) 0%);
2227
+ background-image: linear-gradient(to right, var(--primary) 50%, rgba(255, 255, 255, 0) 0%),
2228
+ linear-gradient(var(--primary) 50%, rgba(255, 255, 255, 0) 0%),
2229
+ linear-gradient(to right, var(--primary) 50%, rgba(255, 255, 255, 0) 0%),
2230
+ linear-gradient(var(--primary) 50%, rgba(255, 255, 255, 0) 0%);
2169
2231
  background-position: top, right, bottom, left;
2170
2232
  background-repeat: repeat-x, repeat-y;
2171
2233
  background-size: 7px var(--spacing-xs), var(--spacing-xs) 7px;
@@ -2173,11 +2235,10 @@ body {
2173
2235
 
2174
2236
  .Dropzone--error {
2175
2237
  background: var(--alert-lightest);
2176
- background-image:
2177
- linear-gradient(to right,var(--alert) 50%, rgba(255, 255, 255, 0) 0%),
2178
- linear-gradient(var(--alert) 50%,rgba(255, 255, 255, 0) 0%),
2179
- linear-gradient(to right, var(--alert) 50%,rgba(255, 255, 255, 0) 0%),
2180
- linear-gradient(var(--alert) 50%, rgba(255, 255, 255, 0) 0%);
2238
+ background-image: linear-gradient(to right, var(--alert) 50%, rgba(255, 255, 255, 0) 0%),
2239
+ linear-gradient(var(--alert) 50%, rgba(255, 255, 255, 0) 0%),
2240
+ linear-gradient(to right, var(--alert) 50%, rgba(255, 255, 255, 0) 0%),
2241
+ linear-gradient(var(--alert) 50%, rgba(255, 255, 255, 0) 0%);
2181
2242
  background-position: top, right, bottom, left;
2182
2243
  background-repeat: repeat-x, repeat-y;
2183
2244
  background-size: 7px var(--spacing-xs), var(--spacing-xs) 7px;
@@ -2185,11 +2246,10 @@ body {
2185
2246
 
2186
2247
  .Dropzone--disabled {
2187
2248
  background: var(--secondary-lightest);
2188
- background-image:
2189
- linear-gradient(to right,var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
2190
- linear-gradient(var(--secondary) 50%,rgba(255, 255, 255, 0) 0%),
2191
- linear-gradient(to right, var(--secondary) 50%,rgba(255, 255, 255, 0) 0%),
2192
- linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);
2249
+ background-image: linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
2250
+ linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
2251
+ linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
2252
+ linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);
2193
2253
  background-position: top, right, bottom, left;
2194
2254
  background-repeat: repeat-x, repeat-y;
2195
2255
  background-size: 7px var(--spacing-xs), var(--spacing-xs) 7px;
@@ -2253,39 +2313,40 @@ body {
2253
2313
  margin-right: var(--spacing-2);
2254
2314
  }
2255
2315
 
2256
- .EditableChipInput{
2316
+ .EditableChipInput {
2257
2317
  position: relative;
2258
2318
  width: 100%;
2259
2319
  }
2260
2320
  .EditableChipInput-default {
2261
2321
  display: flex;
2262
2322
  align-items: center;
2263
- padding-left:var(--spacing-l);
2323
+ padding-left: var(--spacing-l);
2264
2324
  border-left: var(--spacing-xs) solid transparent;
2265
2325
  min-height: var(--spacing-3);
2266
- flex-wrap:wrap;
2326
+ flex-wrap: wrap;
2267
2327
  }
2268
2328
 
2269
- .EditableChipInput-defaultWithChips{
2329
+ .EditableChipInput-defaultWithChips {
2270
2330
  display: flex;
2271
2331
  align-items: center;
2272
- padding-left:var(--spacing);
2332
+ padding-left: var(--spacing);
2273
2333
  border: var(--spacing-xs) solid transparent;
2274
2334
  padding-top: var(--spacing-xs);
2275
2335
  padding-bottom: var(--spacing-xs);
2276
2336
  max-width: calc(100% - 28px);
2277
- flex-wrap:wrap;
2337
+ flex-wrap: wrap;
2278
2338
  }
2279
2339
 
2280
- .EditableChipInput-defaultWithChips:hover, .EditableChipInput-default:hover{
2340
+ .EditableChipInput-defaultWithChips:hover,
2341
+ .EditableChipInput-default:hover {
2281
2342
  background-color: var(--secondary-lightest);
2282
2343
  }
2283
2344
 
2284
- .EditableChipInput-chipInput{
2345
+ .EditableChipInput-chipInput {
2285
2346
  padding-left: var(--spacing);
2286
2347
  }
2287
2348
 
2288
- .EditableChipInput-actions{
2349
+ .EditableChipInput-actions {
2289
2350
  position: absolute;
2290
2351
  display: flex;
2291
2352
  justify-content: flex-end;
@@ -2304,6 +2365,7 @@ body {
2304
2365
  height: var(--spacing-3);
2305
2366
  padding-left: var(--spacing-l);
2306
2367
  }
2368
+
2307
2369
  .EditableInput {
2308
2370
  position: relative;
2309
2371
  display: inline-flex;
@@ -2351,127 +2413,129 @@ body {
2351
2413
  min-width: var(--spacing-6) !important;
2352
2414
  width: 100%;
2353
2415
  }
2416
+
2354
2417
  .EmptyState {
2355
- display: flex;
2356
- flex-direction: column;
2357
- align-items: center;
2358
- justify-content: center;
2359
- background: transparent;
2418
+ display: flex;
2419
+ flex-direction: column;
2420
+ align-items: center;
2421
+ justify-content: center;
2422
+ background: transparent;
2360
2423
  }
2361
2424
 
2362
2425
  .EmptyState-title {
2363
- text-align: center;
2364
- max-width: 480px;
2426
+ text-align: center;
2427
+ max-width: 480px;
2365
2428
  }
2366
2429
 
2367
2430
  .EmptyState-description {
2368
- text-align: center;
2369
- margin-top: var(--spacing-m);
2370
- max-width: 360px;
2431
+ text-align: center;
2432
+ margin-top: var(--spacing-m);
2433
+ max-width: 360px;
2371
2434
  }
2372
2435
 
2373
2436
  .EmptyState-title--large {
2374
- margin-top: var(--spacing-4);
2437
+ margin-top: var(--spacing-4);
2375
2438
  }
2376
2439
 
2377
2440
  .EmptyState-title--small {
2378
- margin-top: var(--spacing-xl);
2441
+ margin-top: var(--spacing-xl);
2379
2442
  }
2380
2443
 
2381
2444
  .EmptyState-description--large {
2382
- margin-bottom: var(--spacing-xl);
2445
+ margin-bottom: var(--spacing-xl);
2383
2446
  }
2384
2447
 
2385
2448
  .EmptyState-description--small {
2386
- margin-bottom: var(--spacing-2);
2449
+ margin-bottom: var(--spacing-2);
2387
2450
  }
2451
+
2388
2452
  .FileIcon {
2389
- padding: var(--spacing);
2390
- border-radius: 50%;
2453
+ padding: var(--spacing);
2454
+ border-radius: 50%;
2391
2455
  }
2392
2456
  .FileItem:not(:last-child) {
2393
- border-bottom: var(--border);
2394
- width: 100%;
2395
- box-sizing: border-box;
2457
+ border-bottom: var(--border);
2458
+ width: 100%;
2459
+ box-sizing: border-box;
2396
2460
  }
2397
2461
  .FileItem {
2398
- padding-top: var(--spacing);
2399
- padding-bottom: var(--spacing);
2400
- padding-left: var(--spacing-l);
2401
- padding-right: var(--spacing);
2462
+ padding-top: var(--spacing);
2463
+ padding-bottom: var(--spacing);
2464
+ padding-left: var(--spacing-l);
2465
+ padding-right: var(--spacing);
2402
2466
  }
2403
2467
  .FileItem-fileContent {
2404
- display: flex;
2405
- justify-content: center;
2406
- align-items: center;
2468
+ display: flex;
2469
+ justify-content: center;
2470
+ align-items: center;
2407
2471
  }
2408
2472
  .FileItem-actions {
2409
- display: flex;
2410
- justify-content: center;
2411
- align-items: center;
2473
+ display: flex;
2474
+ justify-content: center;
2475
+ align-items: center;
2412
2476
  }
2413
2477
  .FileItem-file {
2414
- display: flex;
2415
- align-items: center;
2416
- justify-content: space-between;
2417
- }
2478
+ display: flex;
2479
+ align-items: center;
2480
+ justify-content: space-between;
2481
+ }
2418
2482
  .FileItem-size {
2419
- margin-right: var(--spacing);
2420
- margin-left: var(--spacing);
2483
+ margin-right: var(--spacing);
2484
+ margin-left: var(--spacing);
2421
2485
  }
2422
2486
  .FileItem-text {
2423
- white-space: nowrap;
2424
- overflow: hidden;
2425
- text-overflow: ellipsis;
2426
- margin-left: var(--spacing-l);
2487
+ white-space: nowrap;
2488
+ overflow: hidden;
2489
+ text-overflow: ellipsis;
2490
+ margin-left: var(--spacing-l);
2427
2491
  }
2428
2492
  .FileItem-error {
2429
- margin-left: 40px;
2493
+ margin-left: 40px;
2430
2494
  }
2431
2495
 
2432
2496
  .FileIcon--image {
2433
- background: var(--alert-lightest);
2434
- color: var(--alert);
2497
+ background: var(--alert-lightest);
2498
+ color: var(--alert);
2435
2499
  }
2436
2500
  .FileIcon--audio {
2437
- background: var(--accent1-lightest);
2438
- color: var(--accent1);
2501
+ background: var(--accent1-lightest);
2502
+ color: var(--accent1);
2439
2503
  }
2440
2504
  .FileIcon--video {
2441
- background: var(--accent2-lightest);
2442
- color: var(--accent2);
2505
+ background: var(--accent2-lightest);
2506
+ color: var(--accent2);
2443
2507
  }
2444
2508
  .FileIcon--application {
2445
- background: var(--accent3-lightest);
2446
- color: var(--accent3);
2509
+ background: var(--accent3-lightest);
2510
+ color: var(--accent3);
2447
2511
  }
2448
2512
  .FileIcon--others {
2449
- background: var(--warning-lightest);
2450
- color: var(--warning);
2513
+ background: var(--warning-lightest);
2514
+ color: var(--warning);
2451
2515
  }
2452
2516
  .FileIcon--animate {
2453
- -webkit-animation: fadeIn 160ms cubic-bezier(0, 0, 0.38, 0.9);
2454
- animation: fadeIn 160ms cubic-bezier(0, 0, 0.38, 0.9);
2517
+ -webkit-animation: fadeIn 160ms cubic-bezier(0, 0, 0.38, 0.9);
2518
+ animation: fadeIn 160ms cubic-bezier(0, 0, 0.38, 0.9);
2455
2519
  }
2456
2520
 
2457
2521
  @-webkit-keyframes fadeIn {
2458
- 0% {
2459
- opacity:0;
2460
- }
2461
- 100% {
2462
- opacity:1;
2463
- }
2522
+ 0% {
2523
+ opacity: 0;
2524
+ }
2525
+ 100% {
2526
+ opacity: 1;
2527
+ }
2464
2528
  }
2465
2529
 
2466
2530
  @keyframes fadeIn {
2467
- 0% {
2468
- opacity:0;
2469
- }
2470
- 100% {
2471
- opacity:1;
2472
- }
2473
- }
2474
-
2531
+ 0% {
2532
+ opacity: 0;
2533
+ }
2534
+ 100% {
2535
+ opacity: 1;
2536
+ }
2537
+ }
2538
+
2475
2539
  .FileUploader {
2476
2540
  display: flex;
2477
2541
  flex-direction: column;
@@ -2606,214 +2670,217 @@ body {
2606
2670
  /** Grid **/
2607
2671
 
2608
2672
  .Grid-wrapper {
2609
- display: flex;
2610
- position: relative;
2611
- overflow: hidden;
2612
- height: 100%;
2673
+ display: flex;
2674
+ position: relative;
2675
+ overflow: hidden;
2676
+ height: 100%;
2613
2677
  }
2614
2678
 
2615
2679
  .Grid {
2616
- display: flex;
2617
- flex-direction: column;
2618
- flex-grow: 1;
2619
- height: 100%;
2620
- overflow: hidden;
2621
- background: var(--white);
2680
+ display: flex;
2681
+ flex-direction: column;
2682
+ flex-grow: 1;
2683
+ height: 100%;
2684
+ overflow: hidden;
2685
+ background: var(--white);
2622
2686
  }
2623
2687
 
2624
- .Grid--resource .Grid-row--body:hover, .Grid--resource .Grid-row--body:hover .Grid-cellGroup {
2625
- cursor: pointer;
2626
- background: var(--secondary-lightest);
2688
+ .Grid--resource .Grid-row--body:hover,
2689
+ .Grid--resource .Grid-row--body:hover .Grid-cellGroup {
2690
+ cursor: pointer;
2691
+ background: var(--secondary-lightest);
2627
2692
  }
2628
2693
 
2629
- .Grid--resource .Grid-row--body:active, .Grid--resource .Grid-row--body:active .Grid-cellGroup {
2630
- background: var(--warning-lightest) !important;
2694
+ .Grid--resource .Grid-row--body:active,
2695
+ .Grid--resource .Grid-row--body:active .Grid-cellGroup {
2696
+ background: var(--warning-lightest) !important;
2631
2697
  }
2632
2698
 
2633
2699
  .Grid--resource .Grid-row--body:focus {
2634
- outline-color: var(--warning);
2700
+ outline-color: var(--warning);
2635
2701
  }
2636
2702
 
2637
2703
  .Grid--pinned {
2638
- position: absolute;
2639
- height: 100%;
2640
- z-index: 2;
2641
- overflow-x: hidden;
2642
- -ms-overflow-style: none;
2643
- border-right: 3px solid var(--secondary);
2704
+ position: absolute;
2705
+ height: 100%;
2706
+ z-index: 2;
2707
+ overflow-x: hidden;
2708
+ -ms-overflow-style: none;
2709
+ border-right: 3px solid var(--secondary);
2644
2710
  }
2645
2711
 
2646
2712
  .Grid-pinned::-webkit-scrollbar {
2647
- display: none;
2713
+ display: none;
2648
2714
  }
2649
2715
 
2650
2716
  .Grid--main {
2651
- flex-grow: 1;
2717
+ flex-grow: 1;
2652
2718
  }
2653
2719
 
2654
2720
  .Grid--comfortable .Grid-cell--head {
2655
- min-height: 40px;
2721
+ min-height: 40px;
2656
2722
  }
2657
2723
 
2658
2724
  .Grid--comfortable .Grid-cell--body {
2659
- padding-top: var(--spacing-l);
2660
- padding-bottom: var(--spacing-l);
2725
+ padding-top: var(--spacing-l);
2726
+ padding-bottom: var(--spacing-l);
2661
2727
  }
2662
2728
 
2663
2729
  .Grid--standard .Grid-cell--head {
2664
- min-height: 40px;
2730
+ min-height: 40px;
2665
2731
  }
2666
2732
 
2667
2733
  .Grid--standard .Grid-cell--body {
2668
- padding-top: var(--spacing-l);
2669
- padding-bottom: var(--spacing-l);
2734
+ padding-top: var(--spacing-l);
2735
+ padding-bottom: var(--spacing-l);
2670
2736
  }
2671
2737
 
2672
2738
  .Grid--compressed .Grid-cell--head {
2673
- min-height: 40px;
2739
+ min-height: 40px;
2674
2740
  }
2675
2741
 
2676
2742
  .Grid--compressed .Grid-cell--body {
2677
- padding-top: var(--spacing);
2678
- padding-bottom: var(--spacing);
2743
+ padding-top: var(--spacing);
2744
+ padding-bottom: var(--spacing);
2679
2745
  }
2680
2746
 
2681
2747
  .Grid--tight .Grid-cell--head {
2682
- min-height: var(--spacing-3);
2748
+ min-height: var(--spacing-3);
2683
2749
  }
2684
2750
 
2685
2751
  .Grid--tight .Grid-cell--body {
2686
- padding-top: var(--spacing-m);
2687
- padding-bottom: var(--spacing-m);
2752
+ padding-top: var(--spacing-m);
2753
+ padding-bottom: var(--spacing-m);
2688
2754
  }
2689
2755
 
2690
2756
  .Grid-head {
2691
- display: flex;
2692
- flex: 0 0 auto;
2693
- overflow-x: auto;
2694
- border-bottom: var(--border);
2757
+ display: flex;
2758
+ flex: 0 0 auto;
2759
+ overflow-x: auto;
2760
+ border-bottom: var(--border);
2695
2761
  }
2696
2762
 
2697
2763
  .Grid-head::-webkit-scrollbar {
2698
- display: none;
2764
+ display: none;
2699
2765
  }
2700
2766
 
2701
2767
  .Grid-headCell {
2702
- display: flex;
2703
- height: 100%;
2704
- flex-direction: row;
2705
- align-items: center;
2768
+ display: flex;
2769
+ height: 100%;
2770
+ flex-direction: row;
2771
+ align-items: center;
2706
2772
  }
2707
2773
 
2708
2774
  .Grid-headCell--draggable {
2709
- cursor: -webkit-grab;
2710
- cursor: grab;
2775
+ cursor: -webkit-grab;
2776
+ cursor: grab;
2711
2777
  }
2712
2778
 
2713
2779
  .Grid-headCell--draggable:active {
2714
- cursor: -webkit-grabbing;
2715
- cursor: grabbing;
2780
+ cursor: -webkit-grabbing;
2781
+ cursor: grabbing;
2716
2782
  }
2717
2783
 
2718
2784
  .Grid-body {
2719
- display: flex;
2720
- flex-direction: column;
2721
- flex-grow: 1;
2722
- overflow-x: auto;
2723
- overflow-y: overlay;
2785
+ display: flex;
2786
+ flex-direction: column;
2787
+ flex-grow: 1;
2788
+ overflow-x: auto;
2789
+ overflow-y: overlay;
2724
2790
  }
2725
2791
 
2726
2792
  .Grid-body::-webkit-scrollbar {
2727
- background: var(--white);
2728
- height: var(--spacing-l);
2729
- width: var(--spacing-l);
2793
+ background: var(--white);
2794
+ height: var(--spacing-l);
2795
+ width: var(--spacing-l);
2730
2796
  }
2731
2797
 
2732
2798
  .Grid-body::-webkit-scrollbar-thumb {
2733
- background: var(--secondary);
2734
- border-radius: var(--spacing);
2799
+ background: var(--secondary);
2800
+ border-radius: var(--spacing);
2735
2801
  }
2736
2802
 
2737
2803
  .Grid-rowWrapper {
2738
- display: inline-flex;
2739
- flex-direction: column;
2740
- min-width: -webkit-fit-content;
2741
- min-width: -moz-fit-content;
2742
- min-width: fit-content;
2743
- flex-shrink: 0;
2744
- border-bottom: var(--border);
2804
+ display: inline-flex;
2805
+ flex-direction: column;
2806
+ min-width: -webkit-fit-content;
2807
+ min-width: -moz-fit-content;
2808
+ min-width: fit-content;
2809
+ flex-shrink: 0;
2810
+ border-bottom: var(--border);
2745
2811
  }
2746
2812
 
2747
2813
  .Grid-row {
2748
- display: flex;
2749
- flex-grow: 1;
2750
- flex-shrink: 0;
2751
- box-sizing: border-box;
2752
- background: var(--white);
2814
+ display: flex;
2815
+ flex-grow: 1;
2816
+ flex-shrink: 0;
2817
+ box-sizing: border-box;
2818
+ background: var(--white);
2753
2819
  }
2754
2820
 
2755
2821
  .Grid-row--body {
2756
- border-color: var(--secondary-light);
2822
+ border-color: var(--secondary-light);
2757
2823
  }
2758
2824
 
2759
- .Grid-row--selected, .Grid-row--selected .Grid-cellGroup {
2760
- background: var(--warning-lightest) !important;
2825
+ .Grid-row--selected,
2826
+ .Grid-row--selected .Grid-cellGroup {
2827
+ background: var(--warning-lightest) !important;
2761
2828
  }
2762
2829
 
2763
2830
  .Grid-rowWrapper:last-child .Grid-row--body {
2764
- border-bottom: 0;
2831
+ border-bottom: 0;
2765
2832
  }
2766
2833
 
2767
2834
  .GridBody-padding {
2768
- flex-shrink: 0;
2835
+ flex-shrink: 0;
2769
2836
  }
2770
2837
 
2771
2838
  .Grid-nestedRow {
2772
- width: 100%;
2773
- overflow: hidden;
2839
+ width: 100%;
2840
+ overflow: hidden;
2774
2841
  }
2775
2842
 
2776
2843
  .Grid-nestedRowTrigger {
2777
- margin-right: var(--spacing-l);
2778
- cursor: pointer;
2844
+ margin-right: var(--spacing-l);
2845
+ cursor: pointer;
2779
2846
  }
2780
2847
 
2781
2848
  .Grid-nestedRowPlaceholder {
2782
- width: 20px;
2783
- margin-right: var(--spacing-l);
2849
+ width: 20px;
2850
+ margin-right: var(--spacing-l);
2784
2851
  }
2785
2852
 
2786
2853
  .Grid-cell {
2787
- position: relative;
2788
- box-sizing: border-box;
2789
- padding-left: var(--spacing-l);
2790
- padding-right: var(--spacing-l);
2854
+ position: relative;
2855
+ box-sizing: border-box;
2856
+ padding-left: var(--spacing-l);
2857
+ padding-right: var(--spacing-l);
2791
2858
  }
2792
2859
 
2793
2860
  .Grid-cell--body {
2794
- padding-right: var(--spacing-l);
2861
+ padding-right: var(--spacing-l);
2795
2862
  }
2796
2863
 
2797
2864
  .Grid-cell--head {
2798
- overflow: hidden;
2799
- padding-right: var(--spacing-m);
2865
+ overflow: hidden;
2866
+ padding-right: var(--spacing-m);
2800
2867
  }
2801
2868
 
2802
2869
  .Grid-cell--separator {
2803
- border-left: var(--border);
2804
- border-color: var(--secondary-light);
2870
+ border-left: var(--border);
2871
+ border-color: var(--secondary-light);
2805
2872
  }
2806
2873
 
2807
2874
  .Grid-cell--selected {
2808
- background: var(--primary-lightest);
2875
+ background: var(--primary-lightest);
2809
2876
  }
2810
2877
 
2811
2878
  .Grid-cell--nestedRow {
2812
- padding-left: var(--spacing);
2879
+ padding-left: var(--spacing);
2813
2880
  }
2814
2881
 
2815
2882
  .Grid-cell--head.Grid-cell:first-of-type {
2816
- border-left: none;
2883
+ border-left: none;
2817
2884
  }
2818
2885
 
2819
2886
  /* .Grid .Grid-cellGroup--main .Grid-cell--head.Grid-cell:last-child {
@@ -2821,185 +2888,214 @@ body {
2821
2888
  } */
2822
2889
 
2823
2890
  .Grid-cell--head.Grid-cell--selected {
2824
- background: var(--primary-light);
2891
+ background: var(--primary-light);
2825
2892
  }
2826
2893
 
2827
2894
  .Grid-cell--checkbox {
2828
- width: unset;
2829
- min-width: unset;
2830
- display: flex;
2831
- align-items: center;
2832
- z-index: 1;
2833
- padding-right: 0 !important;
2834
- overflow: visible !important;
2895
+ width: unset;
2896
+ min-width: unset;
2897
+ display: flex;
2898
+ align-items: center;
2899
+ z-index: 1;
2900
+ padding-right: 0 !important;
2901
+ overflow: visible !important;
2835
2902
  }
2836
2903
 
2837
2904
  .Grid-sortingIcons {
2838
- display: flex;
2839
- align-items: center;
2840
- padding-left: var(--spacing-m);
2905
+ display: flex;
2906
+ align-items: center;
2907
+ padding-left: var(--spacing-m);
2841
2908
  }
2842
2909
 
2843
2910
  .Grid-cellReorder {
2844
- display: flex;
2845
- align-items: center;
2846
- cursor: -webkit-grab;
2847
- cursor: grab;
2911
+ display: flex;
2912
+ align-items: center;
2913
+ cursor: -webkit-grab;
2914
+ cursor: grab;
2848
2915
  }
2849
2916
 
2850
2917
  .Grid-cellReorder:active {
2851
- cursor: -webkit-grabbing;
2852
- cursor: grabbing;
2918
+ cursor: -webkit-grabbing;
2919
+ cursor: grabbing;
2853
2920
  }
2854
2921
 
2855
2922
  .Grid-cellContent {
2856
- display: flex;
2857
- align-items: center;
2858
- flex-grow: 1;
2859
- height: 100%;
2860
- box-sizing: border-box;
2923
+ display: flex;
2924
+ align-items: center;
2925
+ flex-grow: 1;
2926
+ height: 100%;
2927
+ box-sizing: border-box;
2861
2928
  }
2862
2929
 
2863
2930
  .Grid-cell--head .Grid-cellContent {
2864
- overflow: hidden;
2931
+ overflow: hidden;
2865
2932
  }
2866
2933
 
2867
2934
  .Grid-cellResize {
2868
- position: absolute;
2869
- right: 0;
2870
- width: var(--spacing-m);
2871
- cursor: ew-resize;
2872
- height: 100%;
2935
+ position: absolute;
2936
+ right: 0;
2937
+ width: var(--spacing-m);
2938
+ cursor: ew-resize;
2939
+ height: 100%;
2873
2940
  }
2874
2941
 
2875
2942
  .Grid-cellSortIcon {
2876
- display: flex;
2877
- align-items: center;
2878
- cursor: pointer;
2943
+ display: flex;
2944
+ align-items: center;
2945
+ cursor: pointer;
2879
2946
  }
2880
2947
 
2881
2948
  .Grid-cellSortIcon:hover {
2882
- background: var(--secondary);
2949
+ background: var(--secondary);
2883
2950
  }
2884
2951
 
2885
2952
  .Grid-cellResize:hover {
2886
- background: var(--primary);
2953
+ background: var(--primary);
2887
2954
  }
2888
2955
 
2889
2956
  .Grid-reorderHighlighter {
2890
- position: absolute;
2891
- height: 100%;
2892
- border: 3px solid var(--primary-light);
2893
- z-index: 10;
2957
+ position: absolute;
2958
+ height: 100%;
2959
+ border: 3px solid var(--primary-light);
2960
+ z-index: 10;
2894
2961
  }
2895
2962
 
2896
2963
  .Grid-cellGroup {
2897
- display: flex;
2898
- box-sizing: border-box;
2899
- background: var(--white);
2964
+ display: flex;
2965
+ box-sizing: border-box;
2966
+ background: var(--white);
2900
2967
  }
2901
2968
 
2902
2969
  .Grid-cellGroup--pinned {
2903
- position: -webkit-sticky;
2904
- position: sticky;
2905
- z-index: 1;
2970
+ position: -webkit-sticky;
2971
+ position: sticky;
2972
+ z-index: 1;
2906
2973
  }
2907
2974
 
2908
2975
  .Grid-cellGroup--pinned-left {
2909
- left: 0;
2910
- border-right: var(--border);
2911
- border-right-width: 4px;
2912
- -o-border-image: linear-gradient( to right, var(--secondary), var(--secondary) 25%, rgba(213, 213, 213, 0.1) 25%, rgba(213, 213, 213, 0.1)) 1 100%;
2913
- border-image: linear-gradient( to right, var(--secondary), var(--secondary) 25%, rgba(213, 213, 213, 0.1) 25%, rgba(213, 213, 213, 0.1)) 1 100%;
2976
+ left: 0;
2977
+ border-right: var(--border);
2978
+ border-right-width: 4px;
2979
+ -o-border-image: linear-gradient(
2980
+ to right,
2981
+ var(--secondary),
2982
+ var(--secondary) 25%,
2983
+ rgba(213, 213, 213, 0.1) 25%,
2984
+ rgba(213, 213, 213, 0.1)
2985
+ )
2986
+ 1 100%;
2987
+ border-image: linear-gradient(
2988
+ to right,
2989
+ var(--secondary),
2990
+ var(--secondary) 25%,
2991
+ rgba(213, 213, 213, 0.1) 25%,
2992
+ rgba(213, 213, 213, 0.1)
2993
+ )
2994
+ 1 100%;
2914
2995
  }
2915
2996
 
2916
2997
  .Grid-cellGroup--pinned-right {
2917
- right: 0;
2918
- border-left: var(--border);
2919
- border-left-width: 4px;
2920
- -o-border-image: linear-gradient( to left, var(--secondary), var(--secondary) 25%, rgba(213, 213, 213, 0.1) 25%, rgba(213, 213, 213, 0.1)) 1 100%;
2921
- border-image: linear-gradient( to left, var(--secondary), var(--secondary) 25%, rgba(213, 213, 213, 0.1) 25%, rgba(213, 213, 213, 0.1)) 1 100%;
2998
+ right: 0;
2999
+ border-left: var(--border);
3000
+ border-left-width: 4px;
3001
+ -o-border-image: linear-gradient(
3002
+ to left,
3003
+ var(--secondary),
3004
+ var(--secondary) 25%,
3005
+ rgba(213, 213, 213, 0.1) 25%,
3006
+ rgba(213, 213, 213, 0.1)
3007
+ )
3008
+ 1 100%;
3009
+ border-image: linear-gradient(
3010
+ to left,
3011
+ var(--secondary),
3012
+ var(--secondary) 25%,
3013
+ rgba(213, 213, 213, 0.1) 25%,
3014
+ rgba(213, 213, 213, 0.1)
3015
+ )
3016
+ 1 100%;
2922
3017
  }
2923
3018
 
2924
3019
  .Grid .Checkbox-wrapper {
2925
- margin-right: 0;
3020
+ margin-right: 0;
2926
3021
  }
2927
3022
 
2928
3023
  /** Grid Cell **/
2929
3024
 
2930
3025
  .GridCell {
2931
- display: flex;
2932
- align-items: center;
2933
- width: 100%;
2934
- box-sizing: border-box;
3026
+ display: flex;
3027
+ align-items: center;
3028
+ width: 100%;
3029
+ box-sizing: border-box;
2935
3030
  }
2936
3031
 
2937
3032
  .GridCell--align-left {
2938
- /* flex-direction: row; */
2939
- justify-content: flex-start;
2940
- text-align: left;
3033
+ /* flex-direction: row; */
3034
+ justify-content: flex-start;
3035
+ text-align: left;
2941
3036
  }
2942
3037
 
2943
3038
  .GridCell--align-right {
2944
- /* flex-direction: row-reverse; */
2945
- justify-content: flex-end;
2946
- text-align: right;
3039
+ /* flex-direction: row-reverse; */
3040
+ justify-content: flex-end;
3041
+ text-align: right;
2947
3042
  }
2948
3043
 
2949
3044
  .GridCell--align-center {
2950
- justify-content: center;
2951
- text-align: center;
3045
+ justify-content: center;
3046
+ text-align: center;
2952
3047
  }
2953
3048
 
2954
- .GridCell--default {}
3049
+ .GridCell--default {
3050
+ }
2955
3051
 
2956
3052
  .GridCell--metaList {
2957
- display: flex;
2958
- flex-direction: column;
2959
- justify-content: center;
2960
- align-items: flex-start;
2961
- overflow: hidden;
3053
+ display: flex;
3054
+ flex-direction: column;
3055
+ justify-content: center;
3056
+ align-items: flex-start;
3057
+ overflow: hidden;
2962
3058
  }
2963
3059
 
2964
3060
  .GridCell--avatar .Avatar {
2965
- margin: 0;
3061
+ margin: 0;
2966
3062
  }
2967
3063
 
2968
3064
  .GridCell-metaListWrapper {
2969
- display: flex;
2970
- flex-direction: column;
2971
- justify-content: center;
2972
- width: 100%;
2973
- overflow: hidden;
3065
+ display: flex;
3066
+ flex-direction: column;
3067
+ justify-content: center;
3068
+ width: 100%;
3069
+ overflow: hidden;
2974
3070
  }
2975
3071
 
2976
3072
  .GridCell-metaList {
2977
- display: flex;
3073
+ display: flex;
2978
3074
  }
2979
3075
 
2980
3076
  .GridCell-metaList .Text {
2981
- display: flex;
2982
- align-items: center;
3077
+ display: flex;
3078
+ align-items: center;
2983
3079
  }
2984
3080
 
2985
3081
  .GridCell-metaList .Text::before {
2986
- content: '';
2987
- display: inline-flex;
2988
- align-items: center;
2989
- justify-content: center;
2990
- width: var(--spacing-m);
2991
- height: var(--spacing-m);
2992
- border-radius: 50%;
2993
- background: var(--secondary);
2994
- margin: 0 var(--spacing);
3082
+ content: '';
3083
+ display: inline-flex;
3084
+ align-items: center;
3085
+ justify-content: center;
3086
+ width: var(--spacing-m);
3087
+ height: var(--spacing-m);
3088
+ border-radius: 50%;
3089
+ background: var(--secondary);
3090
+ margin: 0 var(--spacing);
2995
3091
  }
2996
3092
 
2997
3093
  .GridCell-metaList .Text:first-child::before {
2998
- display: none;
3094
+ display: none;
2999
3095
  }
3000
3096
 
3001
3097
  .GridCell--metaList ul li:first-child {
3002
- margin-left: 0;
3098
+ margin-left: 0;
3003
3099
  }
3004
3100
 
3005
3101
  /* .GridCell-image {
@@ -3021,60 +3117,60 @@ body {
3021
3117
  /** Table-header **/
3022
3118
 
3023
3119
  .Header {
3024
- background: var(--white);
3025
- padding: var(--spacing-l);
3026
- border-bottom: var(--border);
3120
+ background: var(--white);
3121
+ padding: var(--spacing-l);
3122
+ border-bottom: var(--border);
3027
3123
  }
3028
3124
 
3029
3125
  .Header-content {
3030
- display: flex;
3126
+ display: flex;
3031
3127
  }
3032
3128
 
3033
3129
  .Header-content--bottom {
3034
- align-items: center;
3035
- justify-content: space-between;
3130
+ align-items: center;
3131
+ justify-content: space-between;
3036
3132
  }
3037
3133
 
3038
3134
  .Header-search {
3039
- width: var(--spacing-9);
3040
- margin-bottom: var(--spacing-2);
3135
+ width: var(--spacing-9);
3136
+ margin-bottom: var(--spacing-2);
3041
3137
  }
3042
3138
 
3043
3139
  .Header-label {
3044
- display: flex;
3045
- flex-grow: 1;
3046
- align-items: center;
3140
+ display: flex;
3141
+ flex-grow: 1;
3142
+ align-items: center;
3047
3143
  }
3048
3144
 
3049
3145
  .Header-label .Checkbox {
3050
- margin-right: var(--spacing);
3146
+ margin-right: var(--spacing);
3051
3147
  }
3052
3148
 
3053
3149
  .Header-dropdown {
3054
- display: flex;
3055
- margin-left: var(--spacing-m);
3056
- margin-bottom: var(--spacing-2);
3150
+ display: flex;
3151
+ margin-left: var(--spacing-m);
3152
+ margin-bottom: var(--spacing-2);
3057
3153
  }
3058
3154
 
3059
3155
  .Header-dropdown .Dropdown {
3060
- margin: 0 var(--spacing-m);
3156
+ margin: 0 var(--spacing-m);
3061
3157
  }
3062
3158
 
3063
3159
  .Header-draggableDropdown .Dropdown-wrapper {
3064
- max-height: 200px;
3065
- overflow-y: auto;
3160
+ max-height: 200px;
3161
+ overflow-y: auto;
3066
3162
  }
3067
3163
 
3068
3164
  .Header-filters {
3069
- display: flex;
3165
+ display: flex;
3070
3166
  }
3071
3167
 
3072
3168
  .Header-sorting {
3073
- display: flex;
3169
+ display: flex;
3074
3170
  }
3075
3171
 
3076
3172
  .Header-actions {
3077
- margin-bottom: var(--spacing-2);
3173
+ margin-bottom: var(--spacing-2);
3078
3174
  }
3079
3175
 
3080
3176
  .HorizontalNav {
@@ -3125,26 +3221,20 @@ body {
3125
3221
  * https://google.github.io/material-design-icons/
3126
3222
  */
3127
3223
 
3128
-
3129
3224
  /* Rules for sizing the icon. */
3130
3225
 
3131
-
3132
3226
  /* .material-icons.md-18 { font-size: 18px; }
3133
3227
  .material-icons.md-24 { font-size: 24px; }
3134
3228
  .material-icons.md-36 { font-size: 36px; }
3135
3229
  .material-icons.md-48 { font-size: 48px; } */
3136
3230
 
3137
-
3138
3231
  /* Rules for using icons as black on a light background. */
3139
3232
 
3140
-
3141
3233
  /* .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
3142
3234
  .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } */
3143
3235
 
3144
-
3145
3236
  /* Rules for using icons as white on a dark background. */
3146
3237
 
3147
-
3148
3238
  /* .material-icons.md-light { color: rgba(255, 255, 255, 1); }
3149
3239
  .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } */
3150
3240
  .Icon {
@@ -3206,7 +3296,7 @@ body {
3206
3296
  }
3207
3297
 
3208
3298
  .Icon--alertLighter {
3209
- color: var(--alert-lighter );
3299
+ color: var(--alert-lighter);
3210
3300
  }
3211
3301
 
3212
3302
  .Icon--alertDark {
@@ -3295,7 +3385,8 @@ body {
3295
3385
  padding-bottom: var(--spacing-s);
3296
3386
  }
3297
3387
 
3298
- .InlineMessage-text--warning, .InlineMessage-icon--warning {
3388
+ .InlineMessage-text--warning,
3389
+ .InlineMessage-icon--warning {
3299
3390
  color: var(--accent1);
3300
3391
  }
3301
3392
 
@@ -3314,148 +3405,148 @@ body {
3314
3405
  /* input */
3315
3406
 
3316
3407
  .Input-input::-ms-clear {
3317
- display: none;
3408
+ display: none;
3318
3409
  }
3319
3410
 
3320
3411
  .Input {
3321
- display: flex;
3322
- flex-grow: 1;
3323
- flex-direction: row;
3324
- align-items: center;
3325
- box-sizing: border-box;
3326
- border-radius: var(--spacing-m);
3327
- border: var(--border);
3328
- padding-right: var(--spacing-l);
3329
- padding-left: var(--spacing-l);
3330
- background: var(--white);
3412
+ display: flex;
3413
+ flex-grow: 1;
3414
+ flex-direction: row;
3415
+ align-items: center;
3416
+ box-sizing: border-box;
3417
+ border-radius: var(--spacing-m);
3418
+ border: var(--border);
3419
+ padding-right: var(--spacing-l);
3420
+ padding-left: var(--spacing-l);
3421
+ background: var(--white);
3331
3422
  }
3332
3423
 
3333
3424
  .Input--tiny {
3334
- height: var(--spacing-xl);
3335
- padding-top: var(--spacing-m);
3336
- padding-bottom: var(--spacing-m);
3425
+ height: var(--spacing-xl);
3426
+ padding-top: var(--spacing-m);
3427
+ padding-bottom: var(--spacing-m);
3337
3428
  }
3338
3429
 
3339
3430
  .Input--regular {
3340
- height: var(--spacing-3);
3341
- padding-top: var(--spacing);
3342
- padding-bottom: var(--spacing);
3431
+ height: var(--spacing-3);
3432
+ padding-top: var(--spacing);
3433
+ padding-bottom: var(--spacing);
3343
3434
  }
3344
3435
 
3345
3436
  .Input--large {
3346
- height: 40px;
3437
+ height: 40px;
3347
3438
  }
3348
3439
 
3349
3440
  .Input--large .Input-input {
3350
- line-height: var(--font-height-m);
3351
- font-size: var(--font-size-m);
3441
+ line-height: var(--font-height-m);
3442
+ font-size: var(--font-size-m);
3352
3443
  }
3353
3444
 
3354
3445
  .Input:hover {
3355
- background: var(--secondary-lightest);
3356
- border-color: var(--secondary-lightest);
3357
- cursor: text;
3446
+ background: var(--secondary-lightest);
3447
+ border-color: var(--secondary-lightest);
3448
+ cursor: text;
3358
3449
  }
3359
3450
 
3360
3451
  .Input:focus-within {
3361
- background: var(--white);
3362
- border-color: var(--primary);
3363
- box-shadow: var(--shadow-spread) var(--primary-shadow);
3452
+ background: var(--white);
3453
+ border-color: var(--primary);
3454
+ box-shadow: var(--shadow-spread) var(--primary-shadow);
3364
3455
  }
3365
3456
 
3366
3457
  .Input:focus-within .Input-icon--left .Icon {
3367
- color: var(--primary);
3458
+ color: var(--primary);
3368
3459
  }
3369
3460
 
3370
3461
  .Input--error:focus-within {
3371
- border-color: var(--alert);
3372
- box-shadow: var(--shadow-spread) var(--alert-shadow);
3462
+ border-color: var(--alert);
3463
+ box-shadow: var(--shadow-spread) var(--alert-shadow);
3373
3464
  }
3374
3465
 
3375
3466
  .Input--error:focus-within .Input-icon--left .Icon {
3376
- color: var(--alert);
3467
+ color: var(--alert);
3377
3468
  }
3378
3469
 
3379
3470
  .Input--disabled {
3380
- background: var(--secondary-lightest);
3381
- border-color: var(--secondary-light);
3382
- pointer-events: none;
3471
+ background: var(--secondary-lightest);
3472
+ border-color: var(--secondary-light);
3473
+ pointer-events: none;
3383
3474
  }
3384
3475
 
3385
- .Input--disabled .Input-icon--left .Icon{
3386
- color: var(--inverse-lightest);
3476
+ .Input--disabled .Input-icon--left .Icon {
3477
+ color: var(--inverse-lightest);
3387
3478
  }
3388
3479
 
3389
3480
  .Input--error,
3390
3481
  .Input--error:hover {
3391
- background: var(--white);
3392
- border-color: var(--alert);
3482
+ background: var(--white);
3483
+ border-color: var(--alert);
3393
3484
  }
3394
3485
 
3395
3486
  .Input-input {
3396
- display: flex;
3397
- width: 100%;
3398
- font-family: var(--font-family);
3399
- font-weight: var(--font-weight-normal);
3400
- font-size: var(--font-size);
3401
- line-height: var(--font-height-s);
3402
- color: var(--night);
3403
- padding: 0;
3404
- border: none;
3405
- background: transparent;
3487
+ display: flex;
3488
+ width: 100%;
3489
+ font-family: var(--font-family);
3490
+ font-weight: var(--font-weight-normal);
3491
+ font-size: var(--font-size);
3492
+ line-height: var(--font-height-s);
3493
+ color: var(--night);
3494
+ padding: 0;
3495
+ border: none;
3496
+ background: transparent;
3406
3497
  }
3407
3498
 
3408
3499
  .Input-input::-moz-placeholder {
3409
- color: var(--inverse-lighter);
3500
+ color: var(--inverse-lighter);
3410
3501
  }
3411
3502
 
3412
3503
  .Input-input:-ms-input-placeholder {
3413
- color: var(--inverse-lighter);
3504
+ color: var(--inverse-lighter);
3414
3505
  }
3415
3506
 
3416
3507
  .Input-input::placeholder {
3417
- color: var(--inverse-lighter);
3508
+ color: var(--inverse-lighter);
3418
3509
  }
3419
3510
 
3420
3511
  .Input-input:focus {
3421
- outline: 0;
3512
+ outline: 0;
3422
3513
  }
3423
3514
 
3424
3515
  .Input-input:disabled .Input-input::-moz-placeholder {
3425
- color: var(--inverse-lighter);
3516
+ color: var(--inverse-lighter);
3426
3517
  }
3427
3518
 
3428
3519
  .Input-input:disabled .Input-input:-ms-input-placeholder {
3429
- color: var(--inverse-lighter);
3520
+ color: var(--inverse-lighter);
3430
3521
  }
3431
3522
 
3432
3523
  .Input-input:disabled .Input-input::placeholder {
3433
- color: var(--inverse-lighter);
3524
+ color: var(--inverse-lighter);
3434
3525
  }
3435
3526
 
3436
3527
  .Input-icon {
3437
- display: flex;
3438
- align-content: center;
3439
- font-size: var(--font-size-m);
3528
+ display: flex;
3529
+ align-content: center;
3530
+ font-size: var(--font-size-m);
3440
3531
  }
3441
3532
 
3442
3533
  .Input-icon--left .Icon {
3443
- margin-right: var(--spacing);
3444
- color: var(--inverse);
3534
+ margin-right: var(--spacing);
3535
+ color: var(--inverse);
3445
3536
  }
3446
3537
 
3447
- .Input-icon--disabled .Icon{
3448
- color: var(--inverse-lightest);
3538
+ .Input-icon--disabled .Icon {
3539
+ color: var(--inverse-lightest);
3449
3540
  }
3450
3541
 
3451
- .Input-icon--right .Icon{
3452
- cursor: pointer;
3453
- margin-left: var(--spacing);
3454
- color: var(--inverse-lightest);
3542
+ .Input-icon--right .Icon {
3543
+ cursor: pointer;
3544
+ margin-left: var(--spacing);
3545
+ color: var(--inverse-lightest);
3455
3546
  }
3456
3547
 
3457
3548
  .Input-inlineLabel {
3458
- margin-right: var(--spacing);
3549
+ margin-right: var(--spacing);
3459
3550
  }
3460
3551
 
3461
3552
  .Link {
@@ -3509,146 +3600,148 @@ body {
3509
3600
  color: var(--inverse-lightest);
3510
3601
  pointer-events: none;
3511
3602
  }
3603
+
3512
3604
  .List {
3513
- display: flex;
3514
- flex-grow: 1;
3515
- flex-direction: column;
3516
- /* flex-grow: 0; */
3517
- height: 100%;
3518
- z-index: 1;
3605
+ display: flex;
3606
+ flex-grow: 1;
3607
+ flex-direction: column;
3608
+ /* flex-grow: 0; */
3609
+ height: 100%;
3610
+ z-index: 1;
3519
3611
  }
3520
3612
 
3521
3613
  .List-grid {
3522
- height: 100%;
3523
- overflow: hidden;
3524
- height: 100%;
3614
+ height: 100%;
3615
+ overflow: hidden;
3616
+ height: 100%;
3525
3617
  }
3618
+
3526
3619
  .Message {
3527
- display: flex;
3528
- flex-direction: row;
3529
- overflow: hidden;
3530
- padding: var(--spacing-l) var(--spacing-xl) var(--spacing-l) var(--spacing-2);
3531
- border: var(--spacing-xs) solid;
3532
- width: 100%;
3533
- border-radius: var(--spacing-m);
3534
- box-sizing: border-box;
3535
- }
3536
-
3537
- .Message--alert {
3538
- border-color: var(--alert);
3539
- background-color: rgba(249, 226, 226, 0.4);
3540
- }
3541
-
3542
- .Message--success {
3543
- border-color: var(--success);
3544
- background-color: rgba(215, 239, 223, 0.4);
3545
- }
3546
-
3547
- .Message--info {
3548
- border-color: var(--primary);
3549
- background-color: rgba(220, 236, 249, 0.4);
3550
- }
3551
-
3552
- .Message--warning {
3553
- border-color: var(--accent1);
3554
- background-color: rgba(255, 245, 199, 0.4);
3555
- }
3620
+ display: flex;
3621
+ flex-direction: row;
3622
+ overflow: hidden;
3623
+ padding: var(--spacing-l) var(--spacing-xl) var(--spacing-l) var(--spacing-2);
3624
+ border: var(--spacing-xs) solid;
3625
+ width: 100%;
3626
+ border-radius: var(--spacing-m);
3627
+ box-sizing: border-box;
3628
+ }
3556
3629
 
3557
- .Message--default {
3558
- border-color: var(--secondary-dark);
3559
- background-color: var(--white);
3560
- }
3561
-
3562
- .Message-icon {
3563
- margin-right: var(--spacing-2);
3564
- padding-top: var(--spacing-s);
3565
- }
3630
+ .Message--alert {
3631
+ border-color: var(--alert);
3632
+ background-color: rgba(249, 226, 226, 0.4);
3633
+ }
3566
3634
 
3567
- .Message-icon--withTitle {
3568
- padding-top: var(--spacing-m);
3569
- }
3635
+ .Message--success {
3636
+ border-color: var(--success);
3637
+ background-color: rgba(215, 239, 223, 0.4);
3638
+ }
3570
3639
 
3571
- .Message-icon--warning {
3572
- color: var(--accent1);
3573
- }
3574
-
3575
- .Message-heading {
3576
- margin-bottom: var(--spacing-m);
3577
- }
3640
+ .Message--info {
3641
+ border-color: var(--primary);
3642
+ background-color: rgba(220, 236, 249, 0.4);
3643
+ }
3578
3644
 
3579
- .Message-heading--alert,
3580
- .Message-text--alert {
3581
- color: var(--alert-darker) !important;
3582
- }
3645
+ .Message--warning {
3646
+ border-color: var(--accent1);
3647
+ background-color: rgba(255, 245, 199, 0.4);
3648
+ }
3583
3649
 
3584
- .Message-heading--info,
3585
- .Message-text--info {
3586
- color: var(--primary-darker) !important;
3587
- }
3650
+ .Message--default {
3651
+ border-color: var(--secondary-dark);
3652
+ background-color: var(--white);
3653
+ }
3588
3654
 
3589
- .Message-heading--success,
3590
- .Message-text--success {
3591
- color: var(--success-darker) !important;
3592
- }
3655
+ .Message-icon {
3656
+ margin-right: var(--spacing-2);
3657
+ padding-top: var(--spacing-s);
3658
+ }
3593
3659
 
3594
- .Message-heading--warning,
3595
- .Message-text--warning {
3596
- color: var(--accent1-darker) !important;
3597
- }
3660
+ .Message-icon--withTitle {
3661
+ padding-top: var(--spacing-m);
3662
+ }
3663
+
3664
+ .Message-icon--warning {
3665
+ color: var(--accent1);
3666
+ }
3667
+
3668
+ .Message-heading {
3669
+ margin-bottom: var(--spacing-m);
3670
+ }
3671
+
3672
+ .Message-heading--alert,
3673
+ .Message-text--alert {
3674
+ color: var(--alert-darker) !important;
3675
+ }
3676
+
3677
+ .Message-heading--info,
3678
+ .Message-text--info {
3679
+ color: var(--primary-darker) !important;
3680
+ }
3681
+
3682
+ .Message-heading--success,
3683
+ .Message-text--success {
3684
+ color: var(--success-darker) !important;
3685
+ }
3686
+
3687
+ .Message-heading--warning,
3688
+ .Message-text--warning {
3689
+ color: var(--accent1-darker) !important;
3690
+ }
3691
+
3692
+ .Message-actions {
3693
+ display: flex;
3694
+ align-items: center;
3695
+ margin-top: var(--spacing-l);
3696
+ }
3598
3697
 
3599
- .Message-actions {
3600
- display: flex;
3601
- align-items: center;
3602
- margin-top: var(--spacing-l);
3603
- }
3604
-
3605
3698
  .Meta {
3606
- display: flex;
3607
- flex-direction: row;
3608
- align-items: center;
3609
- width: -webkit-fit-content;
3610
- width: -moz-fit-content;
3611
- width: fit-content;
3612
- font-size: var(--font-size);
3699
+ display: flex;
3700
+ flex-direction: row;
3701
+ align-items: center;
3702
+ width: -webkit-fit-content;
3703
+ width: -moz-fit-content;
3704
+ width: fit-content;
3705
+ font-size: var(--font-size);
3613
3706
  }
3614
3707
 
3615
3708
  .MetaList-seperator {
3616
- margin-left: var(--spacing);
3709
+ margin-left: var(--spacing);
3617
3710
  }
3618
- .MetaList-seperator--left{
3619
- margin-right: var(--spacing-m);
3711
+ .MetaList-seperator--left {
3712
+ margin-right: var(--spacing-m);
3620
3713
  }
3621
- .Meta-icon{
3622
- padding-right: var( --spacing-m);
3623
- display: flex;
3624
- align-items: center;
3714
+ .Meta-icon {
3715
+ padding-right: var(--spacing-m);
3716
+ display: flex;
3717
+ align-items: center;
3625
3718
  }
3626
3719
  .MetaList {
3627
- display: flex;
3628
- flex-direction: row;
3629
- align-items: center;
3630
- width: -webkit-fit-content;
3631
- width: -moz-fit-content;
3632
- width: fit-content;
3633
- font-size: var(--font-size);
3720
+ display: flex;
3721
+ flex-direction: row;
3722
+ align-items: center;
3723
+ width: -webkit-fit-content;
3724
+ width: -moz-fit-content;
3725
+ width: fit-content;
3726
+ font-size: var(--font-size);
3634
3727
  }
3635
3728
  .MetaList-item {
3636
- margin: 0 var(--spacing-m);
3637
- display: flex;
3638
- flex-direction: row;
3639
- align-items: center;
3640
- width: -webkit-fit-content;
3641
- width: -moz-fit-content;
3642
- width: fit-content;
3643
- font-size: var(--font-size);
3729
+ margin: 0 var(--spacing-m);
3730
+ display: flex;
3731
+ flex-direction: row;
3732
+ align-items: center;
3733
+ width: -webkit-fit-content;
3734
+ width: -moz-fit-content;
3735
+ width: fit-content;
3736
+ font-size: var(--font-size);
3644
3737
  }
3645
3738
 
3646
3739
  .MetaList-item:first-child {
3647
- margin-left: 0;
3740
+ margin-left: 0;
3648
3741
  }
3649
3742
 
3650
3743
  .MetaList-item:last-child {
3651
- margin-right: 0;
3744
+ margin-right: 0;
3652
3745
  }
3653
3746
 
3654
3747
  .MetricInput-input::-ms-clear {
@@ -3801,12 +3894,12 @@ body {
3801
3894
  margin-top: var(--spacing-s);
3802
3895
  }
3803
3896
 
3804
- .MetricInput-input::-webkit-inner-spin-button,
3805
- .MetricInput-input::-webkit-outer-spin-button {
3897
+ .MetricInput-input::-webkit-inner-spin-button,
3898
+ .MetricInput-input::-webkit-outer-spin-button {
3806
3899
  -webkit-appearance: none;
3807
3900
  -moz-appearance: none;
3808
3901
  appearance: none;
3809
- margin: 0;
3902
+ margin: 0;
3810
3903
  }
3811
3904
 
3812
3905
  @-webkit-keyframes modal-open {
@@ -3923,6 +4016,7 @@ body {
3923
4016
  .Modal-body--withPadding {
3924
4017
  padding-bottom: var(--spacing-2);
3925
4018
  }
4019
+
3926
4020
  /* Navigation */
3927
4021
 
3928
4022
  .Navigation {
@@ -4018,7 +4112,7 @@ body {
4018
4112
  overflow: hidden;
4019
4113
  }
4020
4114
 
4021
- .Navigation-menu .Text {
4115
+ .Navigation-menu .Text {
4022
4116
  overflow: hidden;
4023
4117
  text-overflow: ellipsis;
4024
4118
  white-space: nowrap;
@@ -4039,12 +4133,13 @@ body {
4039
4133
  }
4040
4134
 
4041
4135
  .Navigation-footer--border {
4042
- border-top: var(--border)
4136
+ border-top: var(--border);
4043
4137
  }
4044
4138
 
4045
4139
  .Navigation--collapsed .Navigation-menuIcon--footer {
4046
4140
  transform: rotate(180deg);
4047
4141
  }
4142
+
4048
4143
  .OverlayHeader {
4049
4144
  box-sizing: border-box;
4050
4145
  margin-left: var(--spacing-xl);
@@ -4098,7 +4193,7 @@ body {
4098
4193
  .PageHeader-wrapper {
4099
4194
  padding: var(--spacing) var(--spacing-2);
4100
4195
  }
4101
- .PageHeader-wrapper--separator{
4196
+ .PageHeader-wrapper--separator {
4102
4197
  border-bottom: var(--border);
4103
4198
  }
4104
4199
 
@@ -4135,7 +4230,6 @@ body {
4135
4230
  }
4136
4231
 
4137
4232
  .PageHeader-navigationWrapper {
4138
- display: inline-flex;
4139
4233
  margin-top: var(--spacing-l);
4140
4234
  }
4141
4235
 
@@ -4154,94 +4248,97 @@ body {
4154
4248
  /* pagination */
4155
4249
 
4156
4250
  .Pagination {
4157
- display: flex;
4158
- vertical-align: middle;
4159
- flex-direction: row;
4160
- flex-wrap: wrap;
4251
+ display: flex;
4252
+ vertical-align: middle;
4253
+ flex-direction: row;
4254
+ flex-wrap: wrap;
4161
4255
  }
4162
4256
 
4163
4257
  .Pagination .Button {
4164
- padding-left: var(--spacing);
4165
- padding-right: var(--spacing);
4258
+ padding-left: var(--spacing);
4259
+ padding-right: var(--spacing);
4166
4260
  }
4167
4261
 
4168
4262
  .Pagination-buttonWrapper {
4169
- display: flex;
4170
- flex-direction: row;
4263
+ display: flex;
4264
+ flex-direction: row;
4171
4265
  }
4172
4266
 
4173
4267
  .Pagination-pageIndex {
4174
- display: flex;
4175
- align-items: center;
4176
- justify-content: center;
4177
- padding-left: var(--spacing-l);
4178
- padding-right: var(--spacing-l);
4268
+ display: flex;
4269
+ align-items: center;
4270
+ justify-content: center;
4271
+ padding-left: var(--spacing-l);
4272
+ padding-right: var(--spacing-l);
4179
4273
  }
4180
4274
 
4181
- .Pagination-MetricInput{
4182
- width: var(--spacing-4);
4183
- margin-right: var(--spacing);
4184
- padding-left: var(--spacing-m);
4185
- padding-right: var(--spacing-m);
4275
+ .Pagination-MetricInput {
4276
+ width: var(--spacing-4);
4277
+ margin-right: var(--spacing);
4278
+ padding-left: var(--spacing-m);
4279
+ padding-right: var(--spacing-m);
4186
4280
  }
4187
4281
 
4188
4282
  .Pagination-MetricInput .MetricInput-input {
4189
- text-align: center;
4283
+ text-align: center;
4284
+ }
4285
+ .Pagination-MetricInput .MetricInput-arrowIcons {
4286
+ display: none;
4287
+ }
4288
+
4289
+ @media (max-width: 575px) {
4290
+ .Pagination-pageIndex {
4291
+ order: -1;
4292
+ flex-basis: 100%;
4293
+ }
4294
+ .Pagination-buttonWrapper {
4295
+ margin-top: var(--spacing);
4296
+ width: 50%;
4297
+ }
4298
+ .Pagination-buttonWrapper--next {
4299
+ justify-content: flex-start;
4300
+ }
4301
+ .Pagination-buttonWrapper--previous {
4302
+ justify-content: flex-end;
4303
+ }
4190
4304
  }
4191
- .Pagination-MetricInput .MetricInput-arrowIcons{
4192
- display: none;
4305
+
4306
+ .Pills {
4307
+ /* 160px */
4308
+ max-width: calc(var(--spacing-2) * 10);
4309
+ /* truncate */
4310
+ white-space: nowrap;
4311
+ overflow: hidden;
4312
+ text-overflow: ellipsis;
4313
+ font-size: var(--font-size-s);
4314
+ line-height: var(--font-height-s);
4315
+ text-transform: uppercase;
4316
+ padding-right: 6px;
4317
+ padding-left: 6px;
4318
+ padding-top: var(--spacing-s);
4319
+ padding-bottom: var(--spacing-s);
4320
+ border-radius: 20px;
4321
+ display: inline-block;
4322
+ box-sizing: border-box;
4323
+ font-weight: var(--font-weight-bold);
4324
+ cursor: default;
4193
4325
  }
4194
4326
 
4195
- @media (max-width: 575px) {
4196
- .Pagination-pageIndex {
4197
- order: -1;
4198
- flex-basis: 100%;
4199
- }
4200
- .Pagination-buttonWrapper {
4201
- margin-top: var(--spacing);
4202
- width: 50%;
4203
- }
4204
- .Pagination-buttonWrapper--next {
4205
- justify-content: flex-start;
4206
- }
4207
- .Pagination-buttonWrapper--previous {
4208
- justify-content: flex-end;
4209
- }
4210
- }
4211
- .Pills {
4212
- /* 160px */
4213
- max-width: calc(var(--spacing-2) * 10);
4214
- /* truncate */
4215
- white-space: nowrap;
4216
- overflow: hidden;
4217
- text-overflow: ellipsis;
4218
- font-size: var(--font-size-s);
4219
- line-height: var(--font-height-s);
4220
- text-transform: uppercase;
4221
- padding-right: 6px;
4222
- padding-left: 6px;
4223
- padding-top: var(--spacing-s);
4224
- padding-bottom: var(--spacing-s);
4225
- border-radius: 20px;
4226
- display: inline-block;
4227
- box-sizing: border-box;
4228
- font-weight: var(--font-weight-bold);
4229
- cursor: default;
4230
- }
4231
4327
  @-webkit-keyframes shimmer {
4232
- 0%{
4233
- background-position: -500px 0
4328
+ 0% {
4329
+ background-position: -500px 0;
4234
4330
  }
4235
- 100%{
4236
- background-position: 500px 0
4331
+ 100% {
4332
+ background-position: 500px 0;
4237
4333
  }
4238
4334
  }
4335
+
4239
4336
  @keyframes shimmer {
4240
- 0%{
4241
- background-position: -500px 0
4337
+ 0% {
4338
+ background-position: -500px 0;
4242
4339
  }
4243
- 100%{
4244
- background-position: 500px 0
4340
+ 100% {
4341
+ background-position: 500px 0;
4245
4342
  }
4246
4343
  }
4247
4344
 
@@ -4258,7 +4355,12 @@ body {
4258
4355
  -webkit-animation-timing-function: linear;
4259
4356
  animation-timing-function: linear;
4260
4357
  background: var(--secondary-lightest);
4261
- background: linear-gradient(to right, var(--secondary-lighter) 8%, var(--secondary-dark) 18%, var(--secondary-lighter) 33%);
4358
+ background: linear-gradient(
4359
+ to right,
4360
+ var(--secondary-lighter) 8%,
4361
+ var(--secondary-dark) 18%,
4362
+ var(--secondary-lighter) 33%
4363
+ );
4262
4364
  background-size: 1000px 104px;
4263
4365
  }
4264
4366
 
@@ -4411,10 +4513,11 @@ body {
4411
4513
  color: var(--white);
4412
4514
  }
4413
4515
 
4414
- .Popover[data-hide="true"] {
4516
+ .Popover[data-hide='true'] {
4415
4517
  visibility: hidden;
4416
4518
  pointer-events: none;
4417
4519
  }
4520
+
4418
4521
  .Ring {
4419
4522
  transform: rotate(-90deg);
4420
4523
  }
@@ -4441,142 +4544,143 @@ body {
4441
4544
  stroke: var(--primary);
4442
4545
  transition: stroke-dashOffset 200ms;
4443
4546
  }
4547
+
4444
4548
  /* Radio */
4445
4549
 
4446
4550
  .Radio {
4447
- display: flex;
4448
- -webkit-user-select: none;
4449
- -moz-user-select: none;
4450
- -ms-user-select: none;
4451
- user-select: none;
4452
- padding-top: var(--spacing-s);
4453
- padding-bottom: var(--spacing-s);
4551
+ display: flex;
4552
+ -webkit-user-select: none;
4553
+ -moz-user-select: none;
4554
+ -ms-user-select: none;
4555
+ user-select: none;
4556
+ padding-top: var(--spacing-s);
4557
+ padding-bottom: var(--spacing-s);
4454
4558
  }
4455
4559
 
4456
4560
  .Radio-outerWrapper {
4457
- position: relative;
4458
- flex-shrink: 0;
4459
- margin-top: var(--spacing-s);
4561
+ position: relative;
4562
+ flex-shrink: 0;
4563
+ margin-top: var(--spacing-s);
4460
4564
  }
4461
4565
 
4462
4566
  .Radio-outerWrapper--regular {
4463
- height: var(--spacing-2);
4464
- width: var(--spacing-2);
4567
+ height: var(--spacing-2);
4568
+ width: var(--spacing-2);
4465
4569
  }
4466
4570
 
4467
4571
  .Radio-outerWrapper--tiny {
4468
- height: var(--spacing-l);
4469
- width: var(--spacing-l);
4572
+ height: var(--spacing-l);
4573
+ width: var(--spacing-l);
4470
4574
  }
4471
4575
 
4472
4576
  .Radio-input {
4473
- opacity: 0;
4474
- position: absolute;
4475
- height: 100%;
4476
- width: 100%;
4477
- z-index: 2;
4478
- margin: 0;
4479
- cursor: pointer;
4577
+ opacity: 0;
4578
+ position: absolute;
4579
+ height: 100%;
4580
+ width: 100%;
4581
+ z-index: 2;
4582
+ margin: 0;
4583
+ cursor: pointer;
4480
4584
  }
4481
4585
 
4482
4586
  .Radio-labelWrapper {
4483
- padding-left: var(--spacing);
4484
- display: flex;
4485
- flex-direction: column;
4587
+ padding-left: var(--spacing);
4588
+ display: flex;
4589
+ flex-direction: column;
4486
4590
  }
4487
4591
 
4488
- .Radio-Label{
4489
- display: flex;
4490
- cursor: pointer;
4592
+ .Radio-Label {
4593
+ display: flex;
4594
+ cursor: pointer;
4491
4595
  }
4492
4596
 
4493
4597
  .Radio-wrapper {
4494
- top: 0;
4495
- left: 0;
4496
- height: 100%;
4497
- width: 100%;
4498
- position: absolute;
4499
- border: var(--border);
4500
- border-radius: 50%;
4501
- display: flex;
4502
- align-items: center;
4503
- justify-content: center;
4504
- box-sizing: border-box;
4505
- z-index: 1;
4598
+ top: 0;
4599
+ left: 0;
4600
+ height: 100%;
4601
+ width: 100%;
4602
+ position: absolute;
4603
+ border: var(--border);
4604
+ border-radius: 50%;
4605
+ display: flex;
4606
+ align-items: center;
4607
+ justify-content: center;
4608
+ box-sizing: border-box;
4609
+ z-index: 1;
4506
4610
  }
4507
4611
 
4508
4612
  .Radio--disabled {
4509
- pointer-events: none;
4613
+ pointer-events: none;
4510
4614
  }
4511
4615
 
4512
4616
  .Radio:hover .Radio-wrapper {
4513
- border: var(--spacing-xs) solid var(--inverse-lightest);
4617
+ border: var(--spacing-xs) solid var(--inverse-lightest);
4514
4618
  }
4515
4619
 
4516
4620
  .Radio:active .Radio-wrapper {
4517
- background-color: var(--secondary-light);
4518
- border: var(--spacing-xs) solid var(--inverse-lightest);
4621
+ background-color: var(--secondary-light);
4622
+ border: var(--spacing-xs) solid var(--inverse-lightest);
4519
4623
  }
4520
4624
 
4521
4625
  .Radio--disabled .Radio-wrapper {
4522
- border: var(--spacing-xs) solid var(--secondary-light);
4523
- background-color: var(--secondary-lightest);
4626
+ border: var(--spacing-xs) solid var(--secondary-light);
4627
+ background-color: var(--secondary-lightest);
4524
4628
  }
4525
4629
 
4526
- .Radio-input:checked~.Radio-wrapper {
4527
- border: var(--spacing-xs) solid var(--primary);
4630
+ .Radio-input:checked ~ .Radio-wrapper {
4631
+ border: var(--spacing-xs) solid var(--primary);
4528
4632
  }
4529
4633
 
4530
- .Radio-input:checked~.Radio-wrapper:focus {
4531
- border: var(--spacing-xs) solid var(--primary-dark);
4634
+ .Radio-input:checked ~ .Radio-wrapper:focus {
4635
+ border: var(--spacing-xs) solid var(--primary-dark);
4532
4636
  }
4533
4637
 
4534
- .Radio-input:checked~.Radio-wrapper:after {
4535
- display: block;
4638
+ .Radio-input:checked ~ .Radio-wrapper:after {
4639
+ display: block;
4536
4640
  }
4537
4641
 
4538
4642
  .Radio-wrapper:after {
4539
- content: "";
4540
- display: none;
4541
- border-radius: 50%;
4542
- background: var(--primary);
4643
+ content: '';
4644
+ display: none;
4645
+ border-radius: 50%;
4646
+ background: var(--primary);
4543
4647
  }
4544
4648
 
4545
4649
  .Radio-wrapper--regular:after {
4546
- width: var(--spacing);
4547
- height: var(--spacing);
4650
+ width: var(--spacing);
4651
+ height: var(--spacing);
4548
4652
  }
4549
4653
 
4550
4654
  .Radio-wrapper--tiny:after {
4551
- width: var(--spacing-m);
4552
- height: var(--spacing-m);
4553
- border: var(--spacing-xs) solid var(--primary);
4655
+ width: var(--spacing-m);
4656
+ height: var(--spacing-m);
4657
+ border: var(--spacing-xs) solid var(--primary);
4554
4658
  }
4555
4659
 
4556
- .Radio-outerWrapper:hover .Radio-input:checked~.Radio-wrapper{
4557
- border: var(--spacing-xs) solid var(--primary-dark);
4660
+ .Radio-outerWrapper:hover .Radio-input:checked ~ .Radio-wrapper {
4661
+ border: var(--spacing-xs) solid var(--primary-dark);
4558
4662
  }
4559
4663
 
4560
- .Radio:hover .Radio-input:checked~.Radio-wrapper:after{
4561
- background: var(--primary-dark);
4664
+ .Radio:hover .Radio-input:checked ~ .Radio-wrapper:after {
4665
+ background: var(--primary-dark);
4562
4666
  }
4563
4667
 
4564
- .Radio:active .Radio-input:checked~.Radio-wrapper{
4565
- background: var(--white);
4566
- border: var(--spacing-xs) solid var(--primary-darker);
4668
+ .Radio:active .Radio-input:checked ~ .Radio-wrapper {
4669
+ background: var(--white);
4670
+ border: var(--spacing-xs) solid var(--primary-darker);
4567
4671
  }
4568
4672
 
4569
- .Radio-outerWrapper:active .Radio-input:checked~.Radio-wrapper:after{
4570
- background: var(--primary-darker);
4673
+ .Radio-outerWrapper:active .Radio-input:checked ~ .Radio-wrapper:after {
4674
+ background: var(--primary-darker);
4571
4675
  }
4572
4676
 
4573
- .Radio--disabled .Radio-input:checked~.Radio-wrapper {
4574
- border: var(--spacing-xs) solid var(--primary-lighter);
4575
- background-color: var(--white);
4677
+ .Radio--disabled .Radio-input:checked ~ .Radio-wrapper {
4678
+ border: var(--spacing-xs) solid var(--primary-lighter);
4679
+ background-color: var(--white);
4576
4680
  }
4577
4681
 
4578
- .Radio--disabled .Radio-input:checked~.Radio-wrapper:after {
4579
- background: var(--primary-lighter);
4682
+ .Radio--disabled .Radio-input:checked ~ .Radio-wrapper:after {
4683
+ background: var(--primary-lighter);
4580
4684
  }
4581
4685
 
4582
4686
  @-webkit-keyframes sidesheet-open {
@@ -4682,7 +4786,6 @@ body {
4682
4786
  bottom: 0;
4683
4787
  }
4684
4788
 
4685
-
4686
4789
  .Slider {
4687
4790
  width: 100%;
4688
4791
  }
@@ -4722,7 +4825,7 @@ body {
4722
4825
 
4723
4826
  .Slider-label {
4724
4827
  margin-top: var(--spacing-m);
4725
- transform: translate(-50%,0px);
4828
+ transform: translate(-50%, 0px);
4726
4829
  display: flex;
4727
4830
  align-items: center;
4728
4831
  flex-direction: column;
@@ -4730,7 +4833,7 @@ body {
4730
4833
  -webkit-user-select: none;
4731
4834
  user-select: none;
4732
4835
  -moz-user-select: none;
4733
- -ms-user-select: none;
4836
+ -ms-user-select: none;
4734
4837
  }
4735
4838
 
4736
4839
  .Slider-ticks {
@@ -4776,7 +4879,8 @@ body {
4776
4879
  border: var(--border);
4777
4880
  }
4778
4881
 
4779
- .Slider-handle:focus, .Slider-handle:active {
4882
+ .Slider-handle:focus,
4883
+ .Slider-handle:active {
4780
4884
  border: var(--spacing-s) solid var(--primary);
4781
4885
  }
4782
4886
 
@@ -4874,41 +4978,42 @@ body {
4874
4978
  }
4875
4979
 
4876
4980
  .StatusHint {
4877
- display: flex;
4878
- flex-direction: row;
4879
- align-items: center;
4880
- width: -webkit-fit-content;
4881
- width: -moz-fit-content;
4882
- width: fit-content;
4981
+ display: flex;
4982
+ flex-direction: row;
4983
+ align-items: center;
4984
+ width: -webkit-fit-content;
4985
+ width: -moz-fit-content;
4986
+ width: fit-content;
4883
4987
  }
4884
4988
 
4885
4989
  .StatusHint-icon {
4886
- flex-shrink: 0;
4887
- border-radius: 50%;
4888
- height: var(--spacing);
4889
- width: var(--spacing);
4890
- margin-right: var(--spacing);
4990
+ flex-shrink: 0;
4991
+ border-radius: 50%;
4992
+ height: var(--spacing);
4993
+ width: var(--spacing);
4994
+ margin-right: var(--spacing);
4891
4995
  }
4892
4996
 
4893
4997
  .StatusHint--alert {
4894
- background: var(--alert);
4998
+ background: var(--alert);
4895
4999
  }
4896
5000
 
4897
5001
  .StatusHint--success {
4898
- background: var(--success);
5002
+ background: var(--success);
4899
5003
  }
4900
5004
 
4901
5005
  .StatusHint--warning {
4902
- background: var(--warning);
5006
+ background: var(--warning);
4903
5007
  }
4904
5008
 
4905
5009
  .StatusHint--info {
4906
- background: var(--primary);
5010
+ background: var(--primary);
4907
5011
  }
4908
5012
 
4909
5013
  .StatusHint--default {
4910
- background: var(--secondary);
5014
+ background: var(--secondary);
4911
5015
  }
5016
+
4912
5017
  .Stepper {
4913
5018
  display: flex;
4914
5019
  }
@@ -4934,224 +5039,229 @@ body {
4934
5039
  }
4935
5040
 
4936
5041
  .Switch {
4937
- display: inline-flex;
4938
- position: relative;
5042
+ display: inline-flex;
5043
+ position: relative;
4939
5044
  }
4940
5045
 
4941
5046
  .Switch--tiny {
4942
- height: var(--spacing-2);
4943
- width: var(--spacing-3);
5047
+ height: var(--spacing-2);
5048
+ width: var(--spacing-3);
4944
5049
  }
4945
5050
 
4946
5051
  .Switch--regular {
4947
- height: var(--spacing-xl);
4948
- width: var(--spacing-4);
5052
+ height: var(--spacing-xl);
5053
+ width: var(--spacing-4);
4949
5054
  }
4950
5055
 
4951
5056
  .Switch--large {
4952
- height: var(--spacing-3);
4953
- width: var(--spacing-5);
5057
+ height: var(--spacing-3);
5058
+ width: var(--spacing-5);
4954
5059
  }
4955
5060
 
4956
5061
  .Switch-input {
4957
- position: absolute;
4958
- cursor: pointer;
4959
- z-index: 10;
4960
- opacity: 0;
4961
- width: 100%;
4962
- height: 100%;
4963
- margin: 0;
5062
+ position: absolute;
5063
+ cursor: pointer;
5064
+ z-index: 10;
5065
+ opacity: 0;
5066
+ width: 100%;
5067
+ height: 100%;
5068
+ margin: 0;
4964
5069
  }
4965
5070
 
4966
5071
  .Switch-wrapper {
4967
- display: flex;
4968
- align-items: center;
4969
- line-height: 100%;
4970
- padding: var(--spacing-xs);
4971
- top: 0;
4972
- left: 0;
4973
- width: 100%;
4974
- height: 100%;
4975
- background-color: var(--secondary-light);
5072
+ display: flex;
5073
+ align-items: center;
5074
+ line-height: 100%;
5075
+ padding: var(--spacing-xs);
5076
+ top: 0;
5077
+ left: 0;
5078
+ width: 100%;
5079
+ height: 100%;
5080
+ background-color: var(--secondary-light);
5081
+ }
5082
+
5083
+ .Switch-input:focus ~ .Switch-wrapper {
5084
+ box-shadow: var(--shadow-spread) var(--primary-shadow);
4976
5085
  }
4977
5086
 
4978
5087
  .Switch-wrapper--tiny {
4979
- border-radius: 10px;
5088
+ border-radius: 10px;
4980
5089
  }
4981
5090
 
4982
5091
  .Switch-wrapper--regular {
4983
- border-radius: 34px;
5092
+ border-radius: 34px;
4984
5093
  }
4985
5094
 
4986
5095
  .Switch-wrapper--large {
4987
- border-radius: 38px;
5096
+ border-radius: 38px;
4988
5097
  }
4989
5098
 
4990
5099
  .Switch-wrapper:before {
4991
- content: "";
4992
- height: 100%;
4993
- width: 50%;
4994
- background-color: var(--shadow-0);
4995
- box-shadow: 0 0 var(--spacing-xs) 0 var(--shadow-20);
4996
- border-radius: 50%;
4997
- box-sizing: border-box;
5100
+ content: '';
5101
+ height: 100%;
5102
+ width: 50%;
5103
+ background-color: var(--shadow-0);
5104
+ box-shadow: 0 0 var(--spacing-xs) 0 var(--shadow-20);
5105
+ border-radius: 50%;
5106
+ box-sizing: border-box;
4998
5107
  }
4999
5108
 
5000
5109
  .Switch-wrapper--checked {
5001
- background-color: var(--primary);
5110
+ background-color: var(--primary);
5002
5111
  }
5003
5112
 
5004
5113
  .Switch-wrapper--checked:before {
5005
- transform: translateX(100%);
5114
+ transform: translateX(100%);
5006
5115
  }
5007
5116
 
5008
5117
  .Switch--disabled {
5009
- pointer-events: none;
5118
+ pointer-events: none;
5010
5119
  }
5011
5120
 
5012
5121
  .Switch-wrapper--disabled:before {
5013
- background-color: var(--secondary-lightest);
5122
+ background-color: var(--secondary-lightest);
5014
5123
  }
5015
5124
 
5016
5125
  .Switch-wrapper--checkedDisabled {
5017
- background-color: var(--primary-lighter);
5126
+ background-color: var(--primary-lighter);
5018
5127
  }
5019
5128
 
5020
5129
  .Table {
5021
- display: flex;
5022
- flex-grow: 1;
5023
- flex-direction: column;
5024
- height: 100%;
5025
- width: 100%;
5026
- z-index: 1;
5130
+ display: flex;
5131
+ flex-grow: 1;
5132
+ flex-direction: column;
5133
+ height: 100%;
5134
+ width: 100%;
5135
+ z-index: 1;
5027
5136
  }
5028
5137
 
5029
5138
  .Table-grid {
5030
- height: 100%;
5031
- overflow: hidden;
5032
- z-index: 1;
5139
+ height: 100%;
5140
+ overflow: hidden;
5141
+ z-index: 1;
5033
5142
  }
5034
5143
 
5035
5144
  .Table-pagination {
5036
- display: flex;
5037
- justify-content: center;
5038
- background: var(--white);
5039
- padding: var(--spacing) 0;
5040
- border-top: var(--border);
5145
+ display: flex;
5146
+ justify-content: center;
5147
+ background: var(--white);
5148
+ padding: var(--spacing) 0;
5149
+ border-top: var(--border);
5041
5150
  }
5151
+
5042
5152
  /* tabs */
5043
5153
 
5044
5154
  .TabsWrapper {
5045
- display: flex;
5046
- flex-grow: 1;
5047
- flex-direction: column;
5155
+ display: flex;
5156
+ flex-grow: 1;
5157
+ flex-direction: column;
5048
5158
  }
5049
5159
 
5050
5160
  .TabsWrapper-header {
5051
- box-sizing: border-box;
5052
- display: flex;
5053
- align-items: center;
5054
- flex-direction: row;
5161
+ box-sizing: border-box;
5162
+ display: flex;
5163
+ align-items: center;
5164
+ flex-direction: row;
5055
5165
  }
5056
5166
 
5057
5167
  .TabsWrapper-header--withSeparator {
5058
- border-bottom: var(--border);
5168
+ border-bottom: var(--border);
5059
5169
  }
5060
5170
 
5061
5171
  .Tab {
5062
- position: relative;
5063
- display: flex;
5064
- flex-direction: row;
5065
- cursor: pointer;
5066
- min-width: 40px;
5067
- padding: var(--spacing-l);
5068
- margin-left: calc(-1 * var(--spacing-l));
5069
- margin-right: var(--spacing-l);
5070
- margin-bottom: calc(-1 * var(--spacing-xs));
5071
- text-align: center;
5172
+ position: relative;
5173
+ display: flex;
5174
+ flex-direction: row;
5175
+ cursor: pointer;
5176
+ min-width: 40px;
5177
+ padding: var(--spacing-l);
5178
+ margin-left: calc(-1 * var(--spacing-l));
5179
+ margin-right: var(--spacing-l);
5180
+ margin-bottom: calc(-1 * var(--spacing-xs));
5181
+ text-align: center;
5072
5182
  }
5073
5183
 
5074
5184
  .Tab:last-child {
5075
- margin-right: 0;
5185
+ margin-right: 0;
5076
5186
  }
5077
5187
 
5078
5188
  .Tab::after {
5079
- position: absolute;
5080
- left: 0;
5081
- bottom: 0;
5082
- content: '';
5083
- width: calc(100% - 2*var(--spacing-l));
5084
- height: var(--spacing-s);
5085
- background-color: transparent;
5086
- margin-left: var(--spacing-l);
5087
- border-top-left-radius: var(--spacing-xs);
5088
- border-top-right-radius: var(--spacing-xs);
5189
+ position: absolute;
5190
+ left: 0;
5191
+ bottom: 0;
5192
+ content: '';
5193
+ width: calc(100% - 2 * var(--spacing-l));
5194
+ height: var(--spacing-s);
5195
+ background-color: transparent;
5196
+ margin-left: var(--spacing-l);
5197
+ border-top-left-radius: var(--spacing-xs);
5198
+ border-top-right-radius: var(--spacing-xs);
5089
5199
  }
5090
5200
 
5091
5201
  .Tab:hover::after {
5092
- background-color: var(--primary-dark);
5202
+ background-color: var(--primary-dark);
5093
5203
  }
5094
5204
 
5095
5205
  .Tab:active::after {
5096
- background-color: var(--primary-darker);
5206
+ background-color: var(--primary-darker);
5097
5207
  }
5098
5208
 
5099
5209
  .Tab--active::after {
5100
- background-color: var(--primary);
5210
+ background-color: var(--primary);
5101
5211
  }
5102
5212
 
5103
5213
  .Tab:focus {
5104
- outline: none;
5105
- border-radius: 4px;
5106
- /* Using box shadow instead of border as border shifts the div down which cuts the Icon & Text of label. */
5107
- box-shadow: rgba(0, 112, 221, 0.2) 0px 0px 0px var(--spacing-s) inset;
5214
+ outline: none;
5215
+ border-radius: 4px;
5216
+ /* Using box shadow instead of border as border shifts the div down which cuts the Icon & Text of label. */
5217
+ box-shadow: rgba(0, 112, 221, 0.2) 0px 0px 0px var(--spacing-s) inset;
5108
5218
  }
5109
5219
 
5110
5220
  .Tab:active:focus {
5111
- box-shadow: none;
5221
+ box-shadow: none;
5112
5222
  }
5113
5223
 
5114
5224
  .Tab--disabled {
5115
- cursor: not-allowed;
5225
+ cursor: not-allowed;
5116
5226
  }
5117
5227
 
5118
5228
  .Tab--disabled:hover::after {
5119
- background-color: transparent;
5229
+ background-color: transparent;
5120
5230
  }
5121
5231
 
5122
5232
  .Tab-count {
5123
- display: flex;
5124
- margin-right: var(--spacing-l);
5233
+ display: flex;
5234
+ margin-right: var(--spacing-l);
5125
5235
  }
5126
5236
 
5127
5237
  .Tab-count .Badge {
5128
- margin-left: 0;
5129
- margin-right: 0;
5238
+ margin-left: 0;
5239
+ margin-right: 0;
5130
5240
  }
5131
5241
 
5132
5242
  .Tab-icon {
5133
- display: flex;
5134
- min-width: inherit;
5135
- justify-content: space-between;
5243
+ display: flex;
5244
+ min-width: inherit;
5245
+ justify-content: space-between;
5136
5246
  }
5137
5247
 
5138
5248
  .Tabs {
5139
- display: flex;
5140
- box-sizing: border-box;
5141
- flex-direction: row;
5249
+ display: flex;
5250
+ box-sizing: border-box;
5251
+ flex-direction: row;
5142
5252
  }
5143
5253
 
5144
5254
  .Tabs--withSeparator {
5145
- border-bottom: var(--border);
5255
+ border-bottom: var(--border);
5146
5256
  }
5147
5257
 
5148
5258
  .Tab-pills {
5149
- cursor: pointer;
5150
- margin-right: var(--spacing);
5259
+ cursor: pointer;
5260
+ margin-right: var(--spacing);
5151
5261
  }
5152
5262
 
5153
5263
  .Tab-pills--disabled {
5154
- opacity: 60%;
5264
+ opacity: 60%;
5155
5265
  }
5156
5266
 
5157
5267
  /* Textarea */
@@ -5222,177 +5332,179 @@ body {
5222
5332
  border-radius: var(--spacing);
5223
5333
  background-color: var(--secondary);
5224
5334
  }
5335
+
5225
5336
  /* toast */
5226
5337
 
5227
5338
  .Toast {
5228
- display: flex;
5229
- flex-direction: row;
5230
- box-sizing: border-box;
5339
+ display: flex;
5340
+ flex-direction: row;
5341
+ box-sizing: border-box;
5231
5342
 
5232
- width: 360px;
5233
- border-radius: var(--spacing-m);
5234
- padding-left: var(--spacing-2);
5235
- padding-right: var(--spacing-2);
5236
- padding-top: var(--spacing-l);
5237
- padding-bottom: var(--spacing-l);
5343
+ width: 360px;
5344
+ border-radius: var(--spacing-m);
5345
+ padding-left: var(--spacing-2);
5346
+ padding-right: var(--spacing-2);
5347
+ padding-top: var(--spacing-l);
5348
+ padding-bottom: var(--spacing-l);
5238
5349
  }
5239
5350
 
5240
5351
  .Toast--withMessage {
5241
- padding-bottom: var(--spacing-2);
5352
+ padding-bottom: var(--spacing-2);
5242
5353
  }
5243
5354
 
5244
5355
  .Toast--default {
5245
- padding-left: var(--spacing-xl);
5246
- background-color: var(--inverse);
5356
+ padding-left: var(--spacing-xl);
5357
+ background-color: var(--inverse);
5247
5358
  }
5248
5359
 
5249
5360
  .Toast--info {
5250
- background-color: var(--primary);
5361
+ background-color: var(--primary);
5251
5362
  }
5252
5363
 
5253
5364
  .Toast--alert {
5254
- background-color: var(--alert);
5365
+ background-color: var(--alert);
5255
5366
  }
5256
5367
 
5257
5368
  .Toast--success {
5258
- background-color: var(--success);
5369
+ background-color: var(--success);
5259
5370
  }
5260
5371
 
5261
5372
  .Toast--warning {
5262
- background-color: var(--warning);
5373
+ background-color: var(--warning);
5263
5374
  }
5264
5375
 
5265
5376
  .Toast--warning {
5266
- color: var(--text);
5377
+ color: var(--text);
5267
5378
  }
5268
5379
 
5269
5380
  .Toast-icon {
5270
- display: flex;
5271
- line-height: var(--font-height-m);
5381
+ display: flex;
5382
+ line-height: var(--font-height-m);
5272
5383
  }
5273
5384
 
5274
5385
  .Toast-icon--left {
5275
- margin-right: var(--spacing-2);
5386
+ margin-right: var(--spacing-2);
5276
5387
  }
5277
5388
 
5278
5389
  .Toast-icon--right {
5279
- cursor: pointer;
5280
- margin-left: var(--spacing-2);
5390
+ cursor: pointer;
5391
+ margin-left: var(--spacing-2);
5281
5392
  }
5282
5393
 
5283
5394
  .Toast-icon--info,
5284
5395
  .Toast-icon--success,
5285
5396
  .Toast-icon--alert,
5286
5397
  .Toast-icon--default {
5287
- color: var(--text-white);
5398
+ color: var(--text-white);
5288
5399
  }
5289
5400
 
5290
5401
  .Toast-icon--warning {
5291
- color: var(--warning-darker);
5402
+ color: var(--warning-darker);
5292
5403
  }
5293
5404
 
5294
5405
  .Toast-body {
5295
- display: flex;
5296
- flex-direction: column;
5297
- flex-grow: 1;
5406
+ display: flex;
5407
+ flex-direction: column;
5408
+ flex-grow: 1;
5298
5409
  }
5299
5410
 
5300
5411
  .Toast-title {
5301
- display: flex;
5412
+ display: flex;
5302
5413
  }
5303
5414
 
5304
5415
  .Toast-heading {
5305
- flex-grow: 1;
5416
+ flex-grow: 1;
5306
5417
  }
5307
5418
 
5308
5419
  .Toast-text {
5309
- padding-top: var(--spacing);
5420
+ padding-top: var(--spacing);
5310
5421
  }
5311
5422
 
5312
5423
  .Toast-text--warning,
5313
5424
  .Toast-heading--warning {
5314
- color: var(--warning-darker) !important;
5425
+ color: var(--warning-darker) !important;
5315
5426
  }
5316
5427
 
5317
5428
  .Toast-actions {
5318
- display: flex;
5319
- padding-top: var(--spacing-l);
5429
+ display: flex;
5430
+ padding-top: var(--spacing-l);
5320
5431
  }
5321
5432
 
5322
5433
  .Toast-actionButton {
5323
- color: var(--text-white);
5324
- border-radius: var(--spacing-m);
5325
- margin-right: var(--spacing);
5434
+ color: var(--text-white);
5435
+ border-radius: var(--spacing-m);
5436
+ margin-right: var(--spacing);
5326
5437
  }
5327
5438
 
5328
5439
  .Toast-actionButton:last-child {
5329
- margin-right: 0;
5440
+ margin-right: 0;
5330
5441
  }
5331
5442
 
5332
5443
  .Toast-actionButton--default {
5333
- background: var(--inverse-light);
5444
+ background: var(--inverse-light);
5334
5445
  }
5335
5446
 
5336
5447
  .Toast-actionButton--default:hover,
5337
5448
  .Toast-actionButton--default:active {
5338
- background: var(--inverse);
5449
+ background: var(--inverse);
5339
5450
  }
5340
5451
 
5341
5452
  .Toast-actionButton--default:focus {
5342
- box-shadow: var(--shadow-spread) rgba(134, 134, 134, 0.16);
5453
+ box-shadow: var(--shadow-spread) rgba(134, 134, 134, 0.16);
5343
5454
  }
5344
5455
 
5345
5456
  .Toast-actionButton--info {
5346
- background: var(--primary-dark);
5457
+ background: var(--primary-dark);
5347
5458
  }
5348
5459
 
5349
5460
  .Toast-actionButton--info:hover,
5350
5461
  .Toast-actionButton--info:active {
5351
- background: var(--primary-darker);
5462
+ background: var(--primary-darker);
5352
5463
  }
5353
5464
 
5354
5465
  .Toast-actionButton--info:focus {
5355
- box-shadow: var(--shadow-spread) rgba(0, 80, 159, 0.16);
5466
+ box-shadow: var(--shadow-spread) rgba(0, 80, 159, 0.16);
5356
5467
  }
5357
5468
 
5358
5469
  .Toast-actionButton--success {
5359
- background: var(--success-dark);
5470
+ background: var(--success-dark);
5360
5471
  }
5361
5472
 
5362
5473
  .Toast-actionButton--success:hover,
5363
5474
  .Toast-actionButton--success:active {
5364
- background: var(--success-darker);
5475
+ background: var(--success-darker);
5365
5476
  }
5366
5477
 
5367
5478
  .Toast-actionButton--success:focus {
5368
- box-shadow: var(--shadow-spread) rgba(34, 121, 52, 0.16);
5479
+ box-shadow: var(--shadow-spread) rgba(34, 121, 52, 0.16);
5369
5480
  }
5370
5481
 
5371
5482
  .Toast-actionButton--alert {
5372
- background: var(--alert-dark);
5483
+ background: var(--alert-dark);
5373
5484
  }
5374
5485
 
5375
5486
  .Toast-actionButton--alert:hover,
5376
5487
  .Toast-actionButton--alert:active {
5377
- background: var(--alert-darker);
5488
+ background: var(--alert-darker);
5378
5489
  }
5379
5490
 
5380
5491
  .Toast-actionButton--alert:focus {
5381
- box-shadow: var(--shadow-spread) var(--alert-shadow);
5492
+ box-shadow: var(--shadow-spread) var(--alert-shadow);
5382
5493
  }
5383
5494
 
5384
5495
  .Toast-actionButton--warning {
5385
- background: var(--warning-dark);
5496
+ background: var(--warning-dark);
5386
5497
  }
5387
5498
 
5388
5499
  .Toast-actionButton--warning:hover,
5389
5500
  .Toast-actionButton--warning:active {
5390
- background: var(--warning-darker);
5501
+ background: var(--warning-darker);
5391
5502
  }
5392
5503
 
5393
5504
  .Toast-actionButton--warning:focus {
5394
- box-shadow: var(--shadow-spread) var(--warning-shadow);
5505
+ box-shadow: var(--shadow-spread) var(--warning-shadow);
5395
5506
  }
5507
+
5396
5508
  .Tooltip {
5397
5509
  max-width: var(--spacing-9);
5398
5510
  padding: var(--spacing) var(--spacing-2);
@@ -5413,7 +5525,6 @@ body {
5413
5525
  hyphens: auto;
5414
5526
  }
5415
5527
 
5416
-
5417
5528
  .VerificationCodeInput-Input {
5418
5529
  display: inline-flex;
5419
5530
  width: 40px;
@@ -5423,10 +5534,10 @@ body {
5423
5534
  text-align: center;
5424
5535
  }
5425
5536
 
5426
- .VerificationCodeInput-Input .Input-input::-webkit-inner-spin-button,
5427
- .VerificationCodeInput-Input .Input-input::-webkit-outer-spin-button {
5428
- -webkit-appearance: none;
5429
- margin: 0;
5537
+ .VerificationCodeInput-Input .Input-input::-webkit-inner-spin-button,
5538
+ .VerificationCodeInput-Input .Input-input::-webkit-outer-spin-button {
5539
+ -webkit-appearance: none;
5540
+ margin: 0;
5430
5541
  }
5431
5542
 
5432
5543
  .VerticalNav {
@@ -5510,7 +5621,7 @@ body {
5510
5621
  padding-left: 40px;
5511
5622
  }
5512
5623
 
5513
- .MenuItem .Text {
5624
+ .MenuItem .Text {
5514
5625
  overflow: hidden;
5515
5626
  text-overflow: ellipsis;
5516
5627
  white-space: nowrap;
@@ -5547,6 +5658,7 @@ body {
5547
5658
  .align-text-top {
5548
5659
  vertical-align: text-top !important;
5549
5660
  }
5661
+
5550
5662
  .bg-primary {
5551
5663
  background-color: var(--primary) !important;
5552
5664
  }
@@ -5586,6 +5698,7 @@ body {
5586
5698
  .bg-transparent {
5587
5699
  background-color: transparent !important;
5588
5700
  }
5701
+
5589
5702
  .border {
5590
5703
  border: var(--border) !important;
5591
5704
  }
@@ -5629,6 +5742,7 @@ body {
5629
5742
  .cursor-pointer {
5630
5743
  cursor: pointer;
5631
5744
  }
5745
+
5632
5746
  .d-none {
5633
5747
  display: none !important;
5634
5748
  }
@@ -5664,6 +5778,7 @@ body {
5664
5778
  .d-inline-flex {
5665
5779
  display: inline-flex !important;
5666
5780
  }
5781
+
5667
5782
  .flex-fill {
5668
5783
  flex: 1 1 auto !important;
5669
5784
  }
@@ -5835,6 +5950,7 @@ body {
5835
5950
  .order-last {
5836
5951
  order: 6 !important;
5837
5952
  }
5953
+
5838
5954
  .Row {
5839
5955
  display: flex;
5840
5956
  flex-wrap: wrap;
@@ -6195,6 +6311,7 @@ body {
6195
6311
  width: calc(100% / var(--grid-columns) * 12);
6196
6312
  }
6197
6313
  }
6314
+
6198
6315
  .overflow-auto {
6199
6316
  overflow: auto !important;
6200
6317
  }
@@ -6202,6 +6319,7 @@ body {
6202
6319
  .overflow-hidden {
6203
6320
  overflow: hidden !important;
6204
6321
  }
6322
+
6205
6323
  .position-static {
6206
6324
  position: static !important;
6207
6325
  }
@@ -6222,6 +6340,7 @@ body {
6222
6340
  position: -webkit-sticky !important;
6223
6341
  position: sticky !important;
6224
6342
  }
6343
+
6225
6344
  .w-25 {
6226
6345
  width: 25% !important;
6227
6346
  }
@@ -7245,32 +7364,34 @@ body {
7245
7364
  .pl-auto {
7246
7365
  padding-left: auto !important;
7247
7366
  }
7367
+
7248
7368
  /** utility **/
7249
7369
 
7250
7370
  .hide-scroll-bar::-webkit-scrollbar {
7251
- height: 0px;
7252
- /* Remove scrollbar space */
7253
- background: transparent;
7254
- /* Optional: just make scrollbar invisible */
7371
+ height: 0px;
7372
+ /* Remove scrollbar space */
7373
+ background: transparent;
7374
+ /* Optional: just make scrollbar invisible */
7255
7375
  }
7256
7376
 
7257
7377
  .hide-scroll-bar {
7258
- -ms-overflow-style: none;
7259
- scrollbar-width: none;
7378
+ -ms-overflow-style: none;
7379
+ scrollbar-width: none;
7260
7380
  }
7261
7381
 
7262
7382
  .ellipsis {
7263
- overflow: hidden;
7264
- text-overflow: ellipsis;
7383
+ overflow: hidden;
7384
+ text-overflow: ellipsis;
7265
7385
  }
7266
7386
 
7267
7387
  .ellipsis--noWrap {
7268
- white-space: nowrap;
7269
- overflow: hidden;
7270
- text-overflow: ellipsis;
7388
+ white-space: nowrap;
7389
+ overflow: hidden;
7390
+ text-overflow: ellipsis;
7271
7391
  }
7272
7392
 
7273
7393
  .cursor-pointer {
7274
- cursor: pointer;
7394
+ cursor: pointer;
7275
7395
  }
7396
+
7276
7397
  /*# sourceMappingURL=index.css.map */