@ndwnu/design-system 6.0.0 → 7.0.1

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 (204) hide show
  1. package/assets/icons.ts +83 -0
  2. package/fesm2022/ndwnu-design-system.mjs +869 -929
  3. package/fesm2022/ndwnu-design-system.mjs.map +1 -1
  4. package/index.d.ts +2 -5
  5. package/{components → lib/components}/card/card.component.d.ts +2 -1
  6. package/{components → lib/components}/form-field/checkbox/checkbox.component.d.ts +3 -2
  7. package/{components → lib/components}/form-field/clear-search-button/clear-search-button.component.d.ts +1 -1
  8. package/lib/components/form-field/clear-search-button/index.d.ts +1 -0
  9. package/{components → lib/components}/form-field/file-upload/file-upload.component.d.ts +8 -7
  10. package/{components → lib/components}/form-field/input-button/input-button.component.d.ts +1 -1
  11. package/{components → lib/components}/form-field/month-input/month-input.component.d.ts +8 -7
  12. package/{components → lib/components}/form-field/option-group/option-group.component.d.ts +7 -4
  13. package/lib/components/form-field/picker-button/index.d.ts +1 -0
  14. package/{components → lib/components}/form-field/picker-button/picker-button.component.d.ts +1 -2
  15. package/{components → lib/components}/icon/action-icon/action-icon.component.d.ts +1 -1
  16. package/lib/components/icon/icon.component.d.ts +6 -0
  17. package/{components → lib/components}/layout/layout.component.d.ts +2 -2
  18. package/{components → lib/components}/main-navigation/main-navigation.component.d.ts +2 -10
  19. package/lib/components/tab/tab.component.d.ts +17 -0
  20. package/{components → lib/components}/tab-group/tab-group.component.d.ts +7 -5
  21. package/{components → lib/components}/toast/toast.component.d.ts +4 -4
  22. package/package.json +14 -8
  23. package/styles/base/_colors.scss +234 -0
  24. package/styles/base/_typography.scss +135 -0
  25. package/styles/base/_variables.scss +79 -0
  26. package/styles/base/colors.stories.model.ts +143 -0
  27. package/styles/base/colors.stories.ts +14 -0
  28. package/styles/base/colors.stories.utils.ts +58 -0
  29. package/styles/base/index.scss +3 -0
  30. package/styles/base/typography.stories.ts +116 -0
  31. package/styles/components/_button.scss +133 -0
  32. package/styles/components/_card.scss +3 -0
  33. package/styles/components/_divider.scss +12 -0
  34. package/styles/components/_dropdown.scss +8 -0
  35. package/styles/components/_filter-button.scss +39 -0
  36. package/styles/components/_input.scss +198 -0
  37. package/styles/components/_label.scss +23 -0
  38. package/styles/components/_link.scss +35 -0
  39. package/styles/components/_menu-button.scss +38 -0
  40. package/styles/components/_popover.scss +19 -0
  41. package/styles/components/_summary-card.scss +227 -0
  42. package/styles/components/divider.stories.ts +80 -0
  43. package/styles/components/index.scss +11 -0
  44. package/styles/components/link.stories.ts +154 -0
  45. package/styles/index.scss +4 -0
  46. package/styles/layout/_grid.scss +57 -0
  47. package/styles/layout/_overlay.scss +7 -0
  48. package/styles/layout/grid.stories.ts +117 -0
  49. package/styles/layout/index.scss +2 -0
  50. package/styles/storybook/_core.scss +60 -0
  51. package/styles/storybook/_reset.scss +20 -0
  52. package/styles/storybook/index.scss +17 -0
  53. package/styles/storybook/overrides/_buttons.scss +95 -0
  54. package/styles/storybook/overrides/_code-previews.scss +97 -0
  55. package/styles/storybook/overrides/_content.scss +24 -0
  56. package/styles/storybook/overrides/_headers.scss +31 -0
  57. package/styles/storybook/overrides/_layout.scss +44 -0
  58. package/styles/storybook/overrides/_table.scss +112 -0
  59. package/styles/storybook/overrides/index.scss +6 -0
  60. package/styles/storybook/overrides.css +343 -0
  61. package/styles/utils/_screenreader.scss +18 -0
  62. package/styles/utils/index.scss +1 -0
  63. package/assets/fonts/ObjectSans-Bold.woff2 +0 -0
  64. package/assets/fonts/ObjectSans-Regular.woff2 +0 -0
  65. package/components/icon/icon.component.d.ts +0 -13
  66. package/components/tab/tab.component.d.ts +0 -9
  67. package/core/style/styles.css +0 -1380
  68. package/core/style/styles.scss +0 -1380
  69. package/public-api.d.ts +0 -1
  70. package/assets/images/{ndw-logo-short.svg → logos/ndw-logo-short.svg} +0 -0
  71. package/assets/images/{ndw-logo.svg → logos/ndw-logo.svg} +0 -0
  72. package/assets/images/{nwb-logo-short.svg → logos/nwb-logo-short.svg} +0 -0
  73. package/assets/images/{nwb-logo.svg → logos/nwb-logo.svg} +0 -0
  74. package/{components → lib/components}/accordion/accordion.component.d.ts +0 -0
  75. package/{components → lib/components}/accordion/accordion.service.d.ts +0 -0
  76. package/{components → lib/components}/accordion/index.d.ts +0 -0
  77. package/{components → lib/components}/alert/alert.component.d.ts +0 -0
  78. package/{components → lib/components}/alert/alert.model.d.ts +0 -0
  79. package/{components → lib/components}/alert/index.d.ts +0 -0
  80. package/{components → lib/components}/badge/badge.component.d.ts +0 -0
  81. package/{components → lib/components}/badge/index.d.ts +0 -0
  82. package/{components → lib/components}/banner/banner.component.d.ts +0 -0
  83. package/{components → lib/components}/banner/banner.model.d.ts +0 -0
  84. package/{components → lib/components}/banner/index.d.ts +0 -0
  85. package/{components → lib/components}/breadcrumb/breadcrumb.component.d.ts +0 -0
  86. package/{components → lib/components}/breadcrumb/index.d.ts +0 -0
  87. package/{components → lib/components}/breadcrumb-group/breadcrumb-group.component.d.ts +0 -0
  88. package/{components → lib/components}/breadcrumb-group/index.d.ts +0 -0
  89. package/{components → lib/components}/button/button.directive.d.ts +0 -0
  90. package/{components → lib/components}/button/index.d.ts +0 -0
  91. package/{components → lib/components}/card/card-content/card-content.component.d.ts +0 -0
  92. package/{components → lib/components}/card/card-content/index.d.ts +0 -0
  93. package/{components → lib/components}/card/card-footer/card-footer.component.d.ts +0 -0
  94. package/{components → lib/components}/card/card-footer/index.d.ts +0 -0
  95. package/{components → lib/components}/card/card-header/card-header.component.d.ts +0 -0
  96. package/{components → lib/components}/card/card-header/index.d.ts +0 -0
  97. package/{components → lib/components}/card/card.animation.d.ts +0 -0
  98. package/{components → lib/components}/card/index.d.ts +0 -0
  99. package/{components → lib/components}/collapsible/collapsible.animation.d.ts +0 -0
  100. package/{components → lib/components}/collapsible/collapsible.component.d.ts +0 -0
  101. package/{components → lib/components}/collapsible/index.d.ts +0 -0
  102. package/{components → lib/components}/dashboard-card/dashboard-card.component.d.ts +0 -0
  103. package/{components → lib/components}/dashboard-card/index.d.ts +0 -0
  104. package/{components → lib/components}/dropdown/dropdown.component.d.ts +0 -0
  105. package/{components → lib/components}/dropdown/index.d.ts +0 -0
  106. package/{components → lib/components}/form-field/autosuggest/autosuggest-add-option/autosuggest-add-option.component.d.ts +0 -0
  107. package/{components → lib/components}/form-field/autosuggest/autosuggest-add-option/index.d.ts +0 -0
  108. package/{components → lib/components}/form-field/autosuggest/autosuggest-option/autosuggest-option.component.d.ts +0 -0
  109. package/{components → lib/components}/form-field/autosuggest/autosuggest-option/autosuggest-option.model.d.ts +0 -0
  110. package/{components → lib/components}/form-field/autosuggest/autosuggest-option/base-autosuggest-option.component.d.ts +0 -0
  111. package/{components → lib/components}/form-field/autosuggest/autosuggest-option/index.d.ts +0 -0
  112. package/{components → lib/components}/form-field/autosuggest/autosuggest-panel/autosuggest-panel.component.d.ts +0 -0
  113. package/{components → lib/components}/form-field/autosuggest/autosuggest.directive.d.ts +0 -0
  114. package/{components → lib/components}/form-field/autosuggest/index.d.ts +0 -0
  115. package/{components → lib/components}/form-field/autosuggest/match-bold.pipe.d.ts +0 -0
  116. package/{components → lib/components}/form-field/checkbox/index.d.ts +0 -0
  117. package/{components → lib/components}/form-field/checkbox-group/checkbox-group.component.d.ts +0 -0
  118. package/{components → lib/components}/form-field/checkbox-group/index.d.ts +0 -0
  119. package/{components → lib/components}/form-field/error/error.component.d.ts +0 -0
  120. package/{components → lib/components}/form-field/error/index.d.ts +0 -0
  121. package/{components → lib/components}/form-field/file-upload/file-upload-text.interface.d.ts +0 -0
  122. package/{components → lib/components}/form-field/file-upload/index.d.ts +0 -0
  123. package/{components → lib/components}/form-field/form-field.component.d.ts +0 -0
  124. package/{components → lib/components}/form-field/form-field.constant.d.ts +0 -0
  125. package/{components → lib/components}/form-field/form-field.model.d.ts +0 -0
  126. package/{components → lib/components}/form-field/index.d.ts +0 -0
  127. package/{components → lib/components}/form-field/info/index.d.ts +0 -0
  128. package/{components → lib/components}/form-field/info/info.component.d.ts +0 -0
  129. package/{components → lib/components}/form-field/input/index.d.ts +0 -0
  130. package/{components → lib/components}/form-field/input/input.directive.d.ts +0 -0
  131. package/{components → lib/components}/form-field/input/input.model.d.ts +0 -0
  132. package/{components → lib/components}/form-field/input-button/index.d.ts +0 -0
  133. package/{components → lib/components}/form-field/input-icon/index.d.ts +0 -0
  134. package/{components → lib/components}/form-field/input-icon/input-icon.component.d.ts +0 -0
  135. package/{components → lib/components}/form-field/month-input/index.d.ts +0 -0
  136. package/{components → lib/components}/form-field/month-input/month-input-utils.d.ts +0 -0
  137. package/{components → lib/components}/form-field/option-group/index.d.ts +0 -0
  138. package/{components → lib/components}/form-field/option-group/option-group.model.d.ts +0 -0
  139. package/{components → lib/components}/form-field/option-group/option.component.d.ts +0 -0
  140. package/{components → lib/components}/form-field/radio-button/index.d.ts +0 -0
  141. package/{components → lib/components}/form-field/radio-button/radio-button.component.d.ts +0 -0
  142. package/{components → lib/components}/form-field/radio-group/index.d.ts +0 -0
  143. package/{components → lib/components}/form-field/radio-group/radio-group.component.d.ts +0 -0
  144. package/{components → lib/components}/form-field/success/index.d.ts +0 -0
  145. package/{components → lib/components}/form-field/success/success.component.d.ts +0 -0
  146. package/{components → lib/components}/form-field/textarea/auto-grow.directive.d.ts +0 -0
  147. package/{components → lib/components}/form-field/textarea/index.d.ts +0 -0
  148. package/{components → lib/components}/form-field/textarea/max-char.directive.d.ts +0 -0
  149. package/{components → lib/components}/icon/action-icon/index.d.ts +0 -0
  150. package/{components → lib/components}/icon/index.d.ts +0 -0
  151. package/{components → lib/components}/index.d.ts +0 -0
  152. package/{components → lib/components}/layout/index.d.ts +0 -0
  153. package/{components → lib/components}/layout-banners/index.d.ts +0 -0
  154. package/{components → lib/components}/layout-banners/layout-banners.component.d.ts +0 -0
  155. package/{components → lib/components}/loader/index.d.ts +0 -0
  156. package/{components → lib/components}/loader/loader.component.d.ts +0 -0
  157. package/{components → lib/components}/main-navigation/index.d.ts +0 -0
  158. package/{components → lib/components}/main-navigation/main-navigation.imports.d.ts +0 -0
  159. package/{components → lib/components}/main-navigation/main-navigation.model.d.ts +0 -0
  160. package/{components → lib/components}/main-navigation-menu/index.d.ts +0 -0
  161. package/{components → lib/components}/main-navigation-menu/main-navigation-menu.component.d.ts +0 -0
  162. package/{components → lib/components}/modal/index.d.ts +0 -0
  163. package/{components → lib/components}/modal/modal-content/index.d.ts +0 -0
  164. package/{components → lib/components}/modal/modal-content/modal-content.component.d.ts +0 -0
  165. package/{components → lib/components}/modal/modal-footer/index.d.ts +0 -0
  166. package/{components → lib/components}/modal/modal-footer/modal-footer.component.d.ts +0 -0
  167. package/{components → lib/components}/modal/modal-header/index.d.ts +0 -0
  168. package/{components → lib/components}/modal/modal-header/modal-header.component.d.ts +0 -0
  169. package/{components → lib/components}/modal/modal-ref.d.ts +0 -0
  170. package/{components → lib/components}/modal/modal.component.d.ts +0 -0
  171. package/{components → lib/components}/modal/modal.service.d.ts +0 -0
  172. package/{components → lib/components}/multi-select/checkbox-data.interface.d.ts +0 -0
  173. package/{components → lib/components}/multi-select/index.d.ts +0 -0
  174. package/{components → lib/components}/multi-select/multi-select.component.d.ts +0 -0
  175. package/{components → lib/components}/multi-select/select-all-text.interface.d.ts +0 -0
  176. package/{components → lib/components}/pill/index.d.ts +0 -0
  177. package/{components → lib/components}/pill/pill.component.d.ts +0 -0
  178. package/{components → lib/components}/pill/pill.model.d.ts +0 -0
  179. package/{components → lib/components}/popover/index.d.ts +0 -0
  180. package/{components → lib/components}/popover/popover-trigger.directive.d.ts +0 -0
  181. package/{components → lib/components}/router-breadcrumbs/index.d.ts +0 -0
  182. package/{components → lib/components}/router-breadcrumbs/router-breadcrumbs.component.d.ts +0 -0
  183. package/{components → lib/components}/summary-card/index.d.ts +0 -0
  184. package/{components → lib/components}/summary-card/summary-card-action/summary-card-action.component.d.ts +0 -0
  185. package/{components → lib/components}/summary-card/summary-card-actions/summary-card-actions.component.d.ts +0 -0
  186. package/{components → lib/components}/summary-card/summary-card-avatar/summary-card-avatar.component.d.ts +0 -0
  187. package/{components → lib/components}/summary-card/summary-card-content/summary-card-content.component.d.ts +0 -0
  188. package/{components → lib/components}/summary-card/summary-card-header/summary-card-header.component.d.ts +0 -0
  189. package/{components → lib/components}/summary-card/summary-card-subtitle/summary-card-subtitle.component.d.ts +0 -0
  190. package/{components → lib/components}/summary-card/summary-card-tag/summary-card-tag.component.d.ts +0 -0
  191. package/{components → lib/components}/summary-card/summary-card-tags/summary-card-tags.component.d.ts +0 -0
  192. package/{components → lib/components}/summary-card/summary-card.component.d.ts +0 -0
  193. package/{components → lib/components}/summary-card/summary-card.model.d.ts +0 -0
  194. package/{components → lib/components}/tab/index.d.ts +0 -0
  195. package/{components → lib/components}/tab-group/index.d.ts +0 -0
  196. package/{components → lib/components}/tag/index.d.ts +0 -0
  197. package/{components → lib/components}/tag/tag.component.d.ts +0 -0
  198. package/{components → lib/components}/toast/index.d.ts +0 -0
  199. package/{components → lib/components}/toast/toast.service.d.ts +0 -0
  200. package/{components → lib/components}/tooltip/index.d.ts +0 -0
  201. package/{components → lib/components}/tooltip/tooltip.component.d.ts +0 -0
  202. package/{components → lib/components}/tooltip/tooltip.directive.d.ts +1 -1
  203. /package/{models → lib/models}/aria.model.d.ts +0 -0
  204. /package/{models → lib/models}/index.d.ts +0 -0
@@ -1,1380 +0,0 @@
1
- @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=block");
2
- :root {
3
- /* Colors */
4
- --_grey-700: 195, 100%, 10%;
5
- --_grey-600: 196, 13%, 29%;
6
- --_grey-500: 197, 7%, 40%;
7
- --_grey-400: 204, 2%, 54%;
8
- --_grey-300: 192, 5%, 82%;
9
- --_grey-200: 204, 11%, 91%;
10
- --_grey-100: 200, 16%, 96%;
11
- --_white: 0, 0%, 100%;
12
- --ndw-color-grey-700: hsl(var(--_grey-700));
13
- --ndw-color-grey-600: hsl(var(--_grey-600));
14
- --ndw-color-grey-500: hsl(var(--_grey-500));
15
- --ndw-color-grey-400: hsl(var(--_grey-400));
16
- --ndw-color-grey-300: hsl(var(--_grey-300));
17
- --ndw-color-grey-200: hsl(var(--_grey-200));
18
- --ndw-color-grey-100: hsl(var(--_grey-100));
19
- --ndw-color-white: hsl(var(--_white));
20
- --_primary: 19, 100%;
21
- --_primary-050: var(--_primary), 95%;
22
- --_primary-100: var(--_primary), 80%;
23
- --_primary-200: var(--_primary), 73%;
24
- --_primary-300: var(--_primary), 62%;
25
- --_primary-400: var(--_primary), 50%;
26
- --_primary-500: var(--_primary), 40%;
27
- --_primary-600: var(--_primary), 35%;
28
- --_primary-700: var(--_primary), 27%;
29
- --_primary-800: var(--_primary), 15%;
30
- --ndw-color-primary-050: hsl(var(--_primary-050));
31
- --ndw-color-primary-100: hsl(var(--_primary-100));
32
- --ndw-color-primary-200: hsl(var(--_primary-200));
33
- --ndw-color-primary-300: hsl(var(--_primary-300));
34
- --ndw-color-primary-400: hsl(var(--_primary-400));
35
- --ndw-color-primary-500: hsl(var(--_primary-500));
36
- --ndw-color-primary-600: hsl(var(--_primary-600));
37
- --ndw-color-primary-700: hsl(var(--_primary-700));
38
- --ndw-color-primary-800: hsl(var(--_primary-800));
39
- --ndw-color-primary: var(--ndw-color-primary-500);
40
- --ndw-color-primary-hover: var(--ndw-color-primary-600);
41
- --ndw-color-primary-active: var(--ndw-color-primary-700);
42
- --_secondary-050: 209, 100%, 96%;
43
- --_secondary-100: 209, 85%, 91%;
44
- --_secondary-200: 209, 85%, 78%;
45
- --_secondary-300: 209, 85%, 69%;
46
- --_secondary-400: 208, 100%, 46%;
47
- --_secondary-500: 208, 100%, 41%;
48
- --_secondary-600: 209, 100%, 32%;
49
- --_secondary-700: 209, 100%, 18%;
50
- --ndw-color-secondary-050: hsl(var(--_secondary-050));
51
- --ndw-color-secondary-100: hsl(var(--_secondary-100));
52
- --ndw-color-secondary-200: hsl(var(--_secondary-200));
53
- --ndw-color-secondary-300: hsl(var(--_secondary-300));
54
- --ndw-color-secondary-400: hsl(var(--_secondary-400));
55
- --ndw-color-secondary-500: hsl(var(--_secondary-500));
56
- --ndw-color-secondary-600: hsl(var(--_secondary-600));
57
- --ndw-color-secondary-700: hsl(var(--_secondary-700));
58
- --ndw-color-secondary: var(--ndw-color-secondary-500);
59
- --ndw-color-secondary-hover: var(--ndw-color-secondary-600);
60
- --ndw-color-secondary-active: var(--ndw-color-secondary-700);
61
- --_tertiary-400: 43, 100%, 50%;
62
- --_tertiary-500: 42, 100%, 43%;
63
- --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
64
- --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
65
- --_link: 208, 100%;
66
- --_link-400: var(--_link), 41%;
67
- --_link-500: var(--_link), 32%;
68
- --ndw-color-link-400: hsl(var(--_link-400));
69
- --ndw-color-link-500: hsl(var(--_link-500));
70
- --_positive: 133, 92%;
71
- --_positive-100: 117, 56%, 92%;
72
- --_positive-500: var(--_positive), 33%;
73
- --_positive-600: var(--_positive), 24%;
74
- --_warning: 43, 93%;
75
- --_warning-100: 44, 100%, 94%;
76
- --_warning-500: var(--_warning), 43%;
77
- --_warning-600: 42, 83%, 32%;
78
- --_alternative: 292, 100%;
79
- --_alternative-100: var(--_alternative), 95%;
80
- --_alternative-500: 292, 95%, 33%;
81
- --_critical: 0, 100%;
82
- --_critical-100: var(--_critical), 98%;
83
- --_critical-200: var(--_critical), 95%;
84
- --_critical-300: var(--_critical), 90%;
85
- --_critical-500: var(--_critical), 46%;
86
- --_info-100: 210, 100%, 96%;
87
- --_info-200: 210, 86%, 91%;
88
- --_info-500: 208, 100%, 41%;
89
- --ndw-color-positive-100: hsl(var(--_positive-100));
90
- --ndw-color-positive-500: hsl(var(--_positive-500));
91
- --ndw-color-positive-600: hsl(var(--_positive-600));
92
- --ndw-color-warning-100: hsl(var(--_warning-100));
93
- --ndw-color-warning-500: hsl(var(--_warning-500));
94
- --ndw-color-warning-600: hsl(var(--_warning-600));
95
- --ndw-color-alternative-100: hsl(var(--_alternative-100));
96
- --ndw-color-alternative-500: hsl(var(--_alternative-500));
97
- --ndw-color-critical-100: hsl(var(--_critical-100));
98
- --ndw-color-critical-200: hsl(var(--_critical-200));
99
- --ndw-color-critical-300: hsl(var(--_critical-300));
100
- --ndw-color-critical-500: hsl(var(--_critical-500));
101
- --ndw-color-info-100: hsl(var(--_info-100));
102
- --ndw-color-info-200: hsl(var(--_info-200));
103
- --ndw-color-info-500: hsl(var(--_info-500));
104
- --ndw-color-notification: hsl(19, 100%, 35%);
105
- --_data-a-500: 133, 100%, 21%;
106
- --_data-a-100: 101, 61%, 81%;
107
- --_data-b-500: 0, 0%, 27%;
108
- --_data-b-100: 0, 0%, 87%;
109
- --_data-c-500: 209, 97%, 38%;
110
- --_data-c-100: 194, 95%, 84%;
111
- --_data-d-500: 292, 95%, 33%;
112
- --_data-d-100: 292, 100%, 87%;
113
- --_data-e-500: 51, 95%, 23%;
114
- --_data-e-100: 54, 89%, 79%;
115
- --_data-f-500: 0, 97%, 35%;
116
- --_data-f-100: 0, 100%, 94%;
117
- --ndw-color-data-a-500: hsl(var(--_data-a-500));
118
- --ndw-color-data-a-100: hsl(var(--_data-a-100));
119
- --ndw-color-data-b-500: hsl(var(--_data-b-500));
120
- --ndw-color-data-b-100: hsl(var(--_data-b-100));
121
- --ndw-color-data-c-500: hsl(var(--_data-c-500));
122
- --ndw-color-data-c-100: hsl(var(--_data-c-100));
123
- --ndw-color-data-d-500: hsl(var(--_data-d-500));
124
- --ndw-color-data-d-100: hsl(var(--_data-d-100));
125
- --ndw-color-data-e-500: hsl(var(--_data-e-500));
126
- --ndw-color-data-e-100: hsl(var(--_data-e-100));
127
- --ndw-color-data-f-500: hsl(var(--_data-f-500));
128
- --ndw-color-data-f-100: hsl(var(--_data-f-100));
129
- --_alpha-black: 0, 0%, 0%;
130
- --_alpha-007: 0.07;
131
- --_alpha-015: 0.15;
132
- --_alpha-040: 0.4;
133
- --ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));
134
- --ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));
135
- --ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));
136
- --ndw-alpha-white-040: hsla(var(--_white), var(--_alpha-040));
137
- --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
138
- --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
139
- --ndw-color-background: var(--ndw-color-primary);
140
- --ndw-color-background-hover: var(--ndw-color-primary-hover);
141
- --ndw-color-background-active: var(--ndw-color-primary-active);
142
- --ndw-color-background-disabled: var(--ndw-color-grey-300);
143
- --ndw-color-foreground: var(--ndw-color-white);
144
- --ndw-color-foreground-hover: var(--ndw-color-white);
145
- --ndw-color-foreground-active: var(--ndw-color-white);
146
- --ndw-color-text: var(--ndw-color-grey-700);
147
- }
148
-
149
- [data-theme=ntm] {
150
- /* Colors */
151
- --_primary-050: 197, 35%, 92%;
152
- --_primary-100: 197, 35%, 92%;
153
- --_primary-200: 197, 35%, 92%;
154
- --_primary-300: 197, 35%, 92%;
155
- --_primary-400: 197, 35%, 92%;
156
- --_primary-500: 203, 100%, 17%;
157
- --_primary-600: 203, 100%, 17%;
158
- --_primary-700: 203, 100%, 17%;
159
- --_primary-800: 203, 100%, 17%;
160
- --ndw-color-primary-050: hsl(var(--_primary-050));
161
- --ndw-color-primary-100: hsl(var(--_primary-100));
162
- --ndw-color-primary-200: hsl(var(--_primary-200));
163
- --ndw-color-primary-300: hsl(var(--_primary-300));
164
- --ndw-color-primary-400: hsl(var(--_primary-400));
165
- --ndw-color-primary-500: hsl(var(--_primary-500));
166
- --ndw-color-primary-600: hsl(var(--_primary-600));
167
- --ndw-color-primary-700: hsl(var(--_primary-700));
168
- --ndw-color-primary-800: hsl(var(--_primary-800));
169
- --_secondary: 146, 49%;
170
- --_secondary-050: var(--_secondary), 96%;
171
- --_secondary-100: var(--_secondary), 91%;
172
- --_secondary-200: var(--_secondary), 78%;
173
- --_secondary-300: var(--_secondary), 69%;
174
- --_secondary-400: var(--_secondary), 57%;
175
- --_secondary-500: var(--_secondary), 46%;
176
- --_secondary-600: var(--_secondary), 41%;
177
- --_secondary-700: var(--_secondary), 32%;
178
- --ndw-color-secondary-050: hsl(var(--_secondary-050));
179
- --ndw-color-secondary-100: hsl(var(--_secondary-100));
180
- --ndw-color-secondary-200: hsl(var(--_secondary-200));
181
- --ndw-color-secondary-300: hsl(var(--_secondary-300));
182
- --ndw-color-secondary-400: hsl(var(--_secondary-400));
183
- --ndw-color-secondary-500: hsl(var(--_secondary-500));
184
- --ndw-color-secondary-600: hsl(var(--_secondary-600));
185
- --ndw-color-secondary-700: hsl(var(--_secondary-700));
186
- --_tertiary: 36, 100%;
187
- --_tertiary-400: var(--_tertiary), 57%;
188
- --_tertiary-500: var(--_tertiary), 50%;
189
- --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
190
- --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
191
- --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
192
- --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
193
- --ndw-color-background: var(--ndw-color-primary);
194
- --ndw-color-background-hover: var(--ndw-color-secondary);
195
- --ndw-color-background-active: var(--ndw-color-secondary-active);
196
- --ndw-color-background-disabled: var(--ndw-color-grey-200);
197
- --ndw-color-foreground: var(--ndw-color-white);
198
- --ndw-color-foreground-hover: var(--ndw-color-white);
199
- --ndw-color-foreground-active: var(--ndw-color-white);
200
- --ndw-color-text: var(--ndw-color-primary);
201
- }
202
-
203
- [data-theme=nwb] {
204
- /* Colors */
205
- --_primary-050: 176, 44%, 95%;
206
- --_primary-100: 176, 44%, 82%;
207
- --_primary-200: 176, 44%, 73%;
208
- --_primary-300: 176, 50%, 60%;
209
- --_primary-400: 176, 55%, 48%;
210
- --_primary-500: 176, 58%, 41%;
211
- --_primary-600: 176, 60%, 34%;
212
- --_primary-700: 176, 68%, 21%;
213
- --_primary-800: 176, 68%, 13%;
214
- --ndw-color-primary-050: hsl(var(--_primary-050));
215
- --ndw-color-primary-100: hsl(var(--_primary-100));
216
- --ndw-color-primary-200: hsl(var(--_primary-200));
217
- --ndw-color-primary-300: hsl(var(--_primary-300));
218
- --ndw-color-primary-400: hsl(var(--_primary-400));
219
- --ndw-color-primary-500: hsl(var(--_primary-500));
220
- --ndw-color-primary-600: hsl(var(--_primary-600));
221
- --ndw-color-primary-700: hsl(var(--_primary-700));
222
- --ndw-color-primary-800: hsl(var(--_primary-800));
223
- --_secondary-050: 0, 100%, 95%;
224
- --_secondary-100: 0, 100%, 90%;
225
- --_secondary-200: 0, 100%, 82%;
226
- --_secondary-300: 0, 100%, 74%;
227
- --_secondary-400: 0, 100%, 66%;
228
- --_secondary-500: 0, 100%, 58%;
229
- --_secondary-600: 0, 75%, 42%;
230
- --_secondary-700: 0, 79%, 26%;
231
- --ndw-color-secondary-050: hsl(var(--_secondary-050));
232
- --ndw-color-secondary-100: hsl(var(--_secondary-100));
233
- --ndw-color-secondary-200: hsl(var(--_secondary-200));
234
- --ndw-color-secondary-300: hsl(var(--_secondary-300));
235
- --ndw-color-secondary-400: hsl(var(--_secondary-400));
236
- --ndw-color-secondary-500: hsl(var(--_secondary-500));
237
- --ndw-color-secondary-600: hsl(var(--_secondary-600));
238
- --ndw-color-secondary-700: hsl(var(--_secondary-700));
239
- --_tertiary-400: 309, 29%, 36%;
240
- --_tertiary-500: 309, 29%, 18%;
241
- --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
242
- --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
243
- --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
244
- --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
245
- }
246
-
247
- .cdk-visually-hidden {
248
- border: 0;
249
- clip: rect(0 0 0 0);
250
- height: 1px;
251
- margin: -1px;
252
- overflow: hidden;
253
- padding: 0;
254
- position: absolute;
255
- width: 1px;
256
- white-space: nowrap;
257
- outline: 0;
258
- -webkit-appearance: none;
259
- -moz-appearance: none;
260
- left: 0;
261
- }
262
-
263
- [dir=rtl] .cdk-visually-hidden {
264
- left: auto;
265
- right: 0;
266
- }
267
-
268
- .cdk-overlay-container, .cdk-global-overlay-wrapper {
269
- pointer-events: none;
270
- top: 0;
271
- left: 0;
272
- height: 100%;
273
- width: 100%;
274
- }
275
-
276
- .cdk-overlay-container {
277
- position: fixed;
278
- z-index: 1000;
279
- }
280
-
281
- .cdk-overlay-container:empty {
282
- display: none;
283
- }
284
-
285
- .cdk-global-overlay-wrapper {
286
- display: flex;
287
- position: absolute;
288
- z-index: 1000;
289
- }
290
-
291
- .cdk-overlay-pane {
292
- position: absolute;
293
- pointer-events: auto;
294
- box-sizing: border-box;
295
- display: flex;
296
- max-width: 100%;
297
- max-height: 100%;
298
- z-index: 1000;
299
- }
300
-
301
- .cdk-overlay-backdrop {
302
- position: absolute;
303
- top: 0;
304
- bottom: 0;
305
- left: 0;
306
- right: 0;
307
- pointer-events: auto;
308
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
309
- opacity: 0;
310
- z-index: 1000;
311
- transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
312
- }
313
-
314
- .cdk-overlay-backdrop-showing {
315
- opacity: 1;
316
- }
317
-
318
- @media (forced-colors: active) {
319
- .cdk-overlay-backdrop-showing {
320
- opacity: 0.6;
321
- }
322
- }
323
- .cdk-overlay-dark-backdrop {
324
- background: rgba(0, 0, 0, 0.32);
325
- }
326
-
327
- .cdk-overlay-transparent-backdrop {
328
- transition: visibility 1ms linear, opacity 1ms linear;
329
- visibility: hidden;
330
- opacity: 1;
331
- }
332
-
333
- .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing, .cdk-high-contrast-active .cdk-overlay-transparent-backdrop {
334
- opacity: 0;
335
- visibility: visible;
336
- }
337
-
338
- .cdk-overlay-backdrop-noop-animation {
339
- transition: none;
340
- }
341
-
342
- .cdk-overlay-connected-position-bounding-box {
343
- position: absolute;
344
- display: flex;
345
- flex-direction: column;
346
- min-width: 1px;
347
- min-height: 1px;
348
- z-index: 1000;
349
- }
350
-
351
- .cdk-global-scrollblock {
352
- position: fixed;
353
- width: 100%;
354
- overflow-y: scroll;
355
- }
356
-
357
- :root {
358
- /* Spacing */
359
- --ndw-spacing-3xs: 0.125rem;
360
- --ndw-spacing-2xs: 0.25rem;
361
- --ndw-spacing-xs: 0.5rem;
362
- --ndw-spacing-sm: 0.75rem;
363
- --ndw-spacing-md: 1rem;
364
- --ndw-spacing-lg: 1.5rem;
365
- --ndw-spacing-xl: 2rem;
366
- --ndw-spacing-2xl: 2.5rem;
367
- --ndw-spacing-3xl: 3rem;
368
- --ndw-spacing-4xl: 5rem;
369
- --ndw-spacing-5xl: 8rem;
370
- /* Border */
371
- --ndw-border-size-sm: 1px;
372
- --ndw-border-size-md: 2px;
373
- --ndw-border-size-lg: 3px;
374
- /* Radius */
375
- --ndw-border-radius-xs: 0.125rem;
376
- --ndw-border-radius-sm: 0.25rem;
377
- --ndw-border-radius-md: 0.5rem;
378
- --ndw-border-radius-lg: 1.5rem;
379
- /* Elevation */
380
- --ndw-elevation-info: 0 0 0.5rem 0 hsla(var(--_link-500), 0.25);
381
- --ndw-elevation-content: 0 0.125rem 0.125rem 0 hsla(var(--_grey-600), 0.05);
382
- --ndw-elevation-dropdown: 0 0.25rem 1rem hsla(var(--_grey-600), 0.125);
383
- --ndw-elevation-popover: 0 0.5rem 1.25rem hsla(var(--_grey-600), 0.125);
384
- --ndw-backdrop-color: var(--ndw-alpha-black-040);
385
- /* Animation */
386
- --ndw-animation-speed-very-fast: 100ms;
387
- --ndw-animation-speed-fast: 200ms;
388
- --ndw-animation-speed-default: 300ms;
389
- --ndw-animation-speed-slow: 500ms;
390
- /* Icon Size */
391
- --ndw-icon-size-md: 1rem;
392
- --ndw-icon-size-lg: 1.5rem;
393
- /* Mult-select Size */
394
- --multi-select-default-width: 18.75rem;
395
- /* Typography */
396
- --ndw-font-family-body: "Nunito Sans", sans-serif;
397
- --ndw-font-family-heading: "DM Sans", sans-serif;
398
- --ndw-base-font-size: 16px;
399
- --ndw-font-size-2xs: 0.5625rem;
400
- --ndw-font-size-xs: 0.6875rem;
401
- --ndw-font-size-sm: 0.8125rem;
402
- --ndw-font-size-md: 1.125rem;
403
- --ndw-font-size-lg: 1.25rem;
404
- --ndw-font-size-xl: 1.5rem;
405
- --ndw-font-weight-regular: 400;
406
- --ndw-font-weight-bold: 650;
407
- --ndw-line-height-sm: 1.375rem;
408
- --ndw-line-height-md: 1.5rem;
409
- /* Transform */
410
- --ndw-rotate-half: rotate(180deg);
411
- /* Modal */
412
- --ndw-modal-width-sm: 31.25rem;
413
- --ndw-modal-width-md: 45rem;
414
- }
415
-
416
- [data-theme=ntm] {
417
- /* Spacing */
418
- --ndw-spacing-3xs: 0.125rem;
419
- --ndw-spacing-2xs: 0.5rem;
420
- --ndw-spacing-xs: 1rem;
421
- --ndw-spacing-sm: 1.25rem;
422
- --ndw-spacing-md: 1rem;
423
- --ndw-spacing-lg: 2rem;
424
- --ndw-spacing-xl: 2.5rem;
425
- --ndw-spacing-2xl: 3rem;
426
- --ndw-spacing-3xl: 3rem;
427
- --ndw-spacing-4xl: 5rem;
428
- --ndw-spacing-5xl: 8rem;
429
- /* Typography */
430
- --ndw-font-family-body: "Roboto Flex", sans-serif;
431
- --ndw-font-family-heading: "Roboto Flex", sans-serif;
432
- --ndw-font-size-2xs: 0.5625rem;
433
- --ndw-font-size-xs: 0.6875rem;
434
- --ndw-font-size-sm: 1.125rem;
435
- --ndw-font-size-md: 1.125rem;
436
- --ndw-font-size-lg: 1.25rem;
437
- --ndw-font-size-xl: 1.5rem;
438
- }
439
-
440
- /* Screen sizes */
441
- /**
442
- Utilities for improving accessibility with screen readers.
443
- */
444
- .sr-only {
445
- position: absolute;
446
- overflow: hidden;
447
- width: 1px;
448
- height: 1px;
449
- padding: 0;
450
- margin: -1px;
451
- border-width: 0;
452
- white-space: nowrap;
453
- clip: rect(0, 0, 0, 0);
454
- }
455
-
456
- /* Mixins */
457
- /* Classes */
458
- .ndw-heading-xl {
459
- font-family: var(--ndw-font-family-heading);
460
- font-size: 2.5rem;
461
- font-weight: var(--ndw-font-weight-bold);
462
- line-height: 150%;
463
- }
464
-
465
- .ndw-heading-lg {
466
- font-family: var(--ndw-font-family-heading);
467
- font-size: 2rem;
468
- font-weight: var(--ndw-font-weight-bold);
469
- line-height: 150%;
470
- }
471
-
472
- .ndw-heading-md {
473
- font-family: var(--ndw-font-family-heading);
474
- font-size: 1.5rem;
475
- font-weight: var(--ndw-font-weight-bold);
476
- line-height: 150%;
477
- }
478
-
479
- .ndw-heading-sm {
480
- font-family: var(--ndw-font-family-heading);
481
- font-size: 1.25rem;
482
- font-weight: var(--ndw-font-weight-bold);
483
- line-height: 150%;
484
- }
485
-
486
- .ndw-paragraph-bold-xl {
487
- font-family: var(--ndw-font-family-body);
488
- font-size: 1.125rem;
489
- font-weight: var(--ndw-font-weight-bold);
490
- line-height: 150%;
491
- }
492
-
493
- .ndw-paragraph-xl {
494
- font-family: var(--ndw-font-family-body);
495
- font-size: 1.125rem;
496
- font-weight: var(--ndw-font-weight-regular);
497
- line-height: 150%;
498
- }
499
-
500
- .ndw-paragraph-bold-lg {
501
- font-family: var(--ndw-font-family-body);
502
- font-size: 1rem;
503
- font-weight: var(--ndw-font-weight-bold);
504
- line-height: 150%;
505
- }
506
-
507
- .ndw-paragraph-lg {
508
- font-family: var(--ndw-font-family-body);
509
- font-size: 1rem;
510
- font-weight: var(--ndw-font-weight-regular);
511
- line-height: 150%;
512
- }
513
-
514
- .ndw-paragraph-bold-md {
515
- font-family: var(--ndw-font-family-body);
516
- font-size: 0.8125rem;
517
- font-weight: var(--ndw-font-weight-bold);
518
- line-height: 150%;
519
- }
520
-
521
- .ndw-paragraph-md {
522
- font-family: var(--ndw-font-family-body);
523
- font-size: 0.8125rem;
524
- font-weight: var(--ndw-font-weight-regular);
525
- line-height: 150%;
526
- }
527
-
528
- .ndw-paragraph-bold-sm {
529
- font-family: var(--ndw-font-family-body);
530
- font-size: 0.6875rem;
531
- font-weight: var(--ndw-font-weight-bold);
532
- line-height: 150%;
533
- }
534
-
535
- .ndw-paragraph-sm {
536
- font-family: var(--ndw-font-family-body);
537
- font-size: 0.6875rem;
538
- font-weight: var(--ndw-font-weight-regular);
539
- line-height: 150%;
540
- }
541
-
542
- .grid {
543
- display: grid;
544
- justify-items: stretch;
545
- grid-template-columns: repeat(var(--grid-columns), minmax(1rem, 1fr));
546
- gap: var(--grid-spacing);
547
- padding: 0 var(--grid-spacing);
548
- margin: 0 auto;
549
- width: 100%;
550
- min-width: min-content;
551
- max-width: 1440px;
552
- }
553
- .grid .column-1 {
554
- grid-column: span min(1, var(--grid-columns));
555
- }
556
- .grid .column-2 {
557
- grid-column: span min(2, var(--grid-columns));
558
- }
559
- .grid .column-3 {
560
- grid-column: span min(3, var(--grid-columns));
561
- }
562
- .grid .column-4 {
563
- grid-column: span min(4, var(--grid-columns));
564
- }
565
- .grid .column-5 {
566
- grid-column: span min(5, var(--grid-columns));
567
- }
568
- .grid .column-6 {
569
- grid-column: span min(6, var(--grid-columns));
570
- }
571
- .grid .column-7 {
572
- grid-column: span min(7, var(--grid-columns));
573
- }
574
- .grid .column-8 {
575
- grid-column: span min(8, var(--grid-columns));
576
- }
577
- .grid .column-9 {
578
- grid-column: span min(9, var(--grid-columns));
579
- }
580
- .grid .column-10 {
581
- grid-column: span min(10, var(--grid-columns));
582
- }
583
- .grid .column-11 {
584
- grid-column: span min(11, var(--grid-columns));
585
- }
586
- .grid .column-12 {
587
- grid-column: span min(12, var(--grid-columns));
588
- }
589
- @media screen and (max-width: 1024px) {
590
- .grid {
591
- --grid-columns: 6;
592
- --grid-spacing: var(--ndw-spacing-md);
593
- }
594
- .grid .column-md-1 {
595
- display: none;
596
- }
597
- .grid .column-md-2 {
598
- display: none;
599
- }
600
- .grid .column-md-3 {
601
- display: none;
602
- }
603
- .grid .column-md-4 {
604
- display: none;
605
- }
606
- .grid .column-md-5 {
607
- display: none;
608
- }
609
- .grid .column-md-6 {
610
- display: none;
611
- }
612
- .grid .column-md-7 {
613
- display: none;
614
- }
615
- .grid .column-md-8 {
616
- display: none;
617
- }
618
- .grid .column-md-9 {
619
- display: none;
620
- }
621
- .grid .column-md-10 {
622
- display: none;
623
- }
624
- .grid .column-md-11 {
625
- display: none;
626
- }
627
- .grid .column-md-12 {
628
- display: none;
629
- }
630
- .grid .column-sm-1 {
631
- grid-column: span 1;
632
- display: initial;
633
- }
634
- .grid .column-sm-2 {
635
- grid-column: span 2;
636
- display: initial;
637
- }
638
- .grid .column-sm-3 {
639
- grid-column: span 3;
640
- display: initial;
641
- }
642
- .grid .column-sm-4 {
643
- grid-column: span 4;
644
- display: initial;
645
- }
646
- .grid .column-sm-5 {
647
- grid-column: span 5;
648
- display: initial;
649
- }
650
- .grid .column-sm-6 {
651
- grid-column: span 6;
652
- display: initial;
653
- }
654
- }
655
- @media screen and (min-width: 1025px) {
656
- .grid {
657
- --grid-columns: 12;
658
- --grid-spacing: var(--ndw-spacing-lg);
659
- }
660
- .grid .column-md-1 {
661
- grid-column: span 1;
662
- display: initial;
663
- }
664
- .grid .column-md-2 {
665
- grid-column: span 2;
666
- display: initial;
667
- }
668
- .grid .column-md-3 {
669
- grid-column: span 3;
670
- display: initial;
671
- }
672
- .grid .column-md-4 {
673
- grid-column: span 4;
674
- display: initial;
675
- }
676
- .grid .column-md-5 {
677
- grid-column: span 5;
678
- display: initial;
679
- }
680
- .grid .column-md-6 {
681
- grid-column: span 6;
682
- display: initial;
683
- }
684
- .grid .column-md-7 {
685
- grid-column: span 7;
686
- display: initial;
687
- }
688
- .grid .column-md-8 {
689
- grid-column: span 8;
690
- display: initial;
691
- }
692
- .grid .column-md-9 {
693
- grid-column: span 9;
694
- display: initial;
695
- }
696
- .grid .column-md-10 {
697
- grid-column: span 10;
698
- display: initial;
699
- }
700
- .grid .column-md-11 {
701
- grid-column: span 11;
702
- display: initial;
703
- }
704
- .grid .column-md-12 {
705
- grid-column: span 12;
706
- display: initial;
707
- }
708
- }
709
-
710
- .ndw-overlay-backdrop {
711
- background-color: var(--ndw-backdrop-color);
712
- }
713
-
714
- .cdk-overlay-pane:has(> ndw-modal) {
715
- max-height: 90vh;
716
- }
717
-
718
- button:not(:disabled) {
719
- cursor: pointer;
720
- }
721
-
722
- [ndwButton] {
723
- align-items: center;
724
- background-color: var(--ndw-color-background);
725
- border: var(--ndw-border-size-sm) solid var(--ndw-color-background);
726
- border-radius: var(--ndw-border-radius-sm);
727
- box-sizing: border-box;
728
- color: var(--ndw-color-foreground);
729
- cursor: pointer;
730
- display: flex;
731
- font-family: var(--ndw-font-family-body);
732
- font-size: var(--ndw-font-size-sm);
733
- font-weight: var(--ndw-font-weight-regular);
734
- gap: var(--ndw-spacing-2xs);
735
- height: var(--ndw-spacing-xl);
736
- justify-content: center;
737
- padding: var(--ndw-spacing-2xs) var(--ndw-spacing-xs);
738
- text-align: start;
739
- text-decoration: none;
740
- transition: color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out;
741
- width: fit-content;
742
- }
743
- [ndwButton] ndw-icon {
744
- font-size: var(--ndw-spacing-md);
745
- }
746
- [ndwButton] ndw-loader {
747
- height: var(--ndw-spacing-md);
748
- width: var(--ndw-spacing-md);
749
- }
750
- [ndwButton]:hover {
751
- background-color: var(--ndw-color-background-hover);
752
- border-color: var(--ndw-color-background-hover);
753
- color: var(--ndw-color-foreground-hover);
754
- }
755
- [ndwButton]:active {
756
- background-color: var(--ndw-color-background-active);
757
- border-color: var(--ndw-color-background-active);
758
- color: var(--ndw-color-foreground-active);
759
- }
760
- [ndwButton][secondary], [ndwButton][tertiary] {
761
- background-color: transparent;
762
- color: var(--ndw-color-background);
763
- }
764
- [ndwButton][secondary]:hover, [ndwButton][tertiary]:hover {
765
- color: var(--ndw-color-background);
766
- }
767
- [ndwButton][secondary]:active, [ndwButton][tertiary]:active {
768
- color: var(--ndw-color-background);
769
- }
770
- [ndwButton][secondary][alternative], [ndwButton][tertiary][alternative] {
771
- color: var(--ndw-color-text);
772
- }
773
- [ndwButton][secondary][alternative]:hover, [ndwButton][tertiary][alternative]:hover {
774
- background-color: var(--ndw-alpha-black-007);
775
- }
776
- [ndwButton][secondary][alternative]:active, [ndwButton][tertiary][alternative]:active {
777
- background-color: var(--ndw-alpha-black-015);
778
- }
779
- [ndwButton][secondary] {
780
- border-color: var(--ndw-color-background);
781
- }
782
- [ndwButton][secondary]:hover {
783
- background-color: var(--ndw-alpha-primary-007);
784
- border-color: var(--ndw-color-background-hover);
785
- }
786
- [ndwButton][secondary]:active {
787
- background-color: var(--ndw-alpha-primary-015);
788
- border-color: var(--ndw-color-background-active);
789
- }
790
- [ndwButton][secondary][alternative] {
791
- border-color: var(--ndw-color-grey-300);
792
- }
793
- [ndwButton][secondary][alternative]:hover {
794
- border-color: var(--ndw-color-grey-500);
795
- }
796
- [ndwButton][secondary][alternative]:active {
797
- border-color: var(--ndw-color-grey-700);
798
- }
799
- [ndwButton][tertiary] {
800
- border-color: transparent;
801
- border-radius: var(--button-ter-border-radius, var(--ndw-border-radius-sm));
802
- border-width: var(--button-ter-border-width, var(--ndw-spacing-3xs));
803
- padding-inline: var(--button-ter-padding-inline, var(--ndw-spacing-xs));
804
- }
805
- [ndwButton][tertiary]:hover {
806
- background-color: var(--button-ter-bg-color-hover, var(--ndw-alpha-primary-007));
807
- border-color: var(--button-ter-border-color-hover, transparent);
808
- }
809
- [ndwButton][tertiary]:active {
810
- background-color: var(--button-ter-bg-color-active, var(--ndw-alpha-primary-015));
811
- border-color: var(--button-ter-border-color-active, transparent);
812
- }
813
- [ndwButton][extra-small] {
814
- height: var(--ndw-spacing-lg);
815
- padding-inline: var(--ndw-spacing-2xs);
816
- }
817
- [ndwButton][large] {
818
- height: var(--ndw-spacing-2xl);
819
- padding-inline: var(--ndw-spacing-sm);
820
- }
821
- [ndwButton][disabled] {
822
- background-color: var(--ndw-color-background-disabled);
823
- border-color: var(--ndw-color-background-disabled);
824
- color: var(--ndw-color-text);
825
- pointer-events: none;
826
- user-select: none;
827
- }
828
-
829
- [data-theme=ntm] [ndwButton][secondary]:hover, [data-theme=ntm] [ndwButton][tertiary]:hover {
830
- color: var(--ndw-color-secondary);
831
- }
832
- [data-theme=ntm] [ndwButton][secondary]:active, [data-theme=ntm] [ndwButton][tertiary]:active {
833
- color: var(--ndw-color-secondary-hover);
834
- }
835
- [data-theme=ntm] [ndwButton][secondary]:hover {
836
- background-color: transparent;
837
- border-color: var(--ndw-color-secondary);
838
- }
839
- [data-theme=ntm] [ndwButton][secondary]:active {
840
- background-color: var(--ndw-alpha-primary-007);
841
- border-color: var(--ndw-color-secondary-hover);
842
- }
843
- [data-theme=ntm] [ndwButton][tertiary] {
844
- border-radius: 0;
845
- border-width: 0 0 var(--ndw-spacing-3xs);
846
- padding-inline: 0;
847
- }
848
- [data-theme=ntm] [ndwButton][tertiary]:hover {
849
- background-color: transparent;
850
- border-color: transparent;
851
- border-bottom-color: var(--ndw-color-secondary);
852
- }
853
- [data-theme=ntm] [ndwButton][tertiary]:active {
854
- background-color: transparent;
855
- border-color: transparent;
856
- border-bottom-color: var(--ndw-color-secondary-hover);
857
- }
858
- [data-theme=ntm] [ndwButton][disabled] {
859
- border-color: var(--ndw-color-grey-400);
860
- color: var(--ndw-color-grey-400);
861
- }
862
- [data-theme=ntm] [ndwButton][disabled][tertiary] {
863
- background-color: transparent;
864
- }
865
-
866
- hr[ndwDivider] {
867
- background-color: var(--ndw-color-grey-300);
868
- border: none;
869
- height: var(--ndw-border-size-sm);
870
- margin: var(--ndw-spacing-xs) 0;
871
- }
872
- hr[noMargin] {
873
- margin-block: 0;
874
- }
875
-
876
- @keyframes show {
877
- from {
878
- opacity: 0;
879
- }
880
- to {
881
- opacity: 1;
882
- }
883
- }
884
- [ndwButton][filter] {
885
- background-color: var(--ndw-color-white);
886
- border-color: var(--ndw-color-grey-300);
887
- color: var(--ndw-color-grey-700);
888
- height: var(--ndw-spacing-2xl);
889
- }
890
- [ndwButton][filter] ndw-icon.button-icon {
891
- color: var(--ndw-color-primary);
892
- }
893
- [ndwButton][filter] ndw-icon.prefix-icon {
894
- color: var(--ndw-color-grey-300);
895
- }
896
- [ndwButton][filter]:hover {
897
- border-color: var(--ndw-color-primary);
898
- }
899
- [ndwButton][filter]:active, [ndwButton][filter]:focus, [ndwButton][filter]:focus-visible {
900
- border-color: var(--ndw-color-info-500);
901
- box-shadow: var(--ndw-elevation-info);
902
- outline-color: var(--ndw-color-info-500);
903
- }
904
- [ndwButton][filter][disabled] {
905
- background-color: var(--ndw-color-grey-100);
906
- color: var(--ndw-color-grey-500);
907
- pointer-events: none;
908
- user-select: none;
909
- }
910
- [ndwButton][filter][disabled] ndw-icon {
911
- color: var(--ndw-color-grey-500);
912
- }
913
-
914
- .input-container:has(> select[ndwInput]) {
915
- padding-inline-end: var(--ndw-spacing-xs);
916
- }
917
-
918
- .input-container:has(> [ndwInput]) {
919
- display: flex;
920
- align-items: center;
921
- background-color: var(--ndw-color-white);
922
- border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);
923
- border-radius: var(--ndw-border-radius-sm);
924
- box-sizing: border-box;
925
- outline: var(--ndw-border-size-sm) solid transparent;
926
- outline-offset: calc(var(--ndw-border-size-sm) * -1);
927
- transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, outline-color 150ms ease-in-out;
928
- gap: var(--ndw-spacing-xs);
929
- }
930
- .input-container:has(> [ndwInput]):has([ndwInput]:hover) {
931
- border-color: var(--ndw-color-grey-400);
932
- }
933
- .input-container:has(> [ndwInput]):has([ndwInput]:active), .input-container:has(> [ndwInput]):has([ndwInput]:focus), .input-container:has(> [ndwInput]):has([ndwInput]:focus-visible) {
934
- border-color: transparent;
935
- box-shadow: var(--ndw-elevation-info);
936
- outline-color: var(--ndw-color-info-500);
937
- }
938
- .input-container:has(> [ndwInput])[success] {
939
- background-color: var(--ndw-color-positive-100);
940
- border-color: var(--ndw-color-positive-500);
941
- }
942
- .input-container:has(> [ndwInput])[success]:hover {
943
- border-color: var(--ndw-color-grey-300);
944
- }
945
- .input-container:has(> [ndwInput])[success]:active, .input-container:has(> [ndwInput])[success]:focus, .input-container:has(> [ndwInput])[success]:focus-visible {
946
- background-color: var(--ndw-color-white);
947
- border-color: transparent;
948
- outline-color: var(--ndw-color-secondary-500);
949
- }
950
- .input-container:has(> [ndwInput])[error] {
951
- background-color: var(--ndw-color-critical-100);
952
- border-color: var(--ndw-color-critical-500);
953
- }
954
- .input-container:has(> [ndwInput])[error]:hover {
955
- border-color: var(--ndw-color-grey-300);
956
- }
957
- .input-container:has(> [ndwInput])[error]:active, .input-container:has(> [ndwInput])[error]:focus, .input-container:has(> [ndwInput])[error]:focus-visible {
958
- background-color: var(--ndw-color-white);
959
- border-color: transparent;
960
- outline-color: var(--ndw-color-secondary-500);
961
- }
962
- .input-container:has(> [ndwInput])[disabled], .input-container:has(> [ndwInput])[readonly] {
963
- background-color: var(--ndw-color-grey-100);
964
- border-color: var(--ndw-color-grey-300);
965
- color: var(--ndw-color-grey-500);
966
- pointer-events: none;
967
- }
968
- .input-container:has(> [ndwInput])[disabled] ndw-icon, .input-container:has(> [ndwInput])[readonly] ndw-icon {
969
- color: var(--ndw-color-grey-300);
970
- }
971
- .input-container:has(> [ndwInput]):has(> ndw-input-icon) {
972
- padding-inline: var(--ndw-spacing-xs);
973
- }
974
- .input-container:has(> [ndwInput]):has(> ndw-picker-button) {
975
- padding-inline-end: var(--ndw-spacing-xs);
976
- }
977
- .input-container:has(> [ndwInput]) > *:has(~ [ndwInput]) {
978
- color: var(--ndw-color-grey-400);
979
- }
980
- .input-container:has(> [ndwInput]) * + [ndwInput] {
981
- padding-inline-start: 0;
982
- }
983
- .input-container:has(> [ndwInput]) [ndwInput]:has(+ *) {
984
- padding-inline-end: 0;
985
- }
986
- .input-container:has(> [ndwInput]) [ndwInput]:is(textarea) {
987
- padding-inline-end: var(--ndw-spacing-sm);
988
- }
989
- .input-container:has(> [ndwInput]) select[ndwInput]:has(+ *) {
990
- padding-inline-end: 0;
991
- }
992
- .input-container:has(> [ndwInput]) [ndwInput] {
993
- border: none;
994
- outline: none;
995
- }
996
- .input-container:has(> [ndwInput]) [ndwInput]:hover, .input-container:has(> [ndwInput]) [ndwInput]:active, .input-container:has(> [ndwInput]) [ndwInput]:focus, .input-container:has(> [ndwInput]) [ndwInput]:focus-visible {
997
- border: none;
998
- outline: none;
999
- }
1000
- .input-container:has(> [ndwInput]):has(textarea) {
1001
- padding-inline: 0;
1002
- }
1003
-
1004
- [ndwInput] {
1005
- display: flex;
1006
- align-items: center;
1007
- background-color: var(--ndw-color-white);
1008
- border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);
1009
- border-radius: var(--ndw-border-radius-sm);
1010
- box-sizing: border-box;
1011
- outline: var(--ndw-border-size-sm) solid transparent;
1012
- outline-offset: calc(var(--ndw-border-size-sm) * -1);
1013
- transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, outline-color 150ms ease-in-out;
1014
- width: 100%;
1015
- padding-inline: var(--ndw-spacing-sm);
1016
- color: var(--ndw-color-grey-700);
1017
- font-family: var(--ndw-font-family-body);
1018
- font-size: var(--ndw-font-size-sm);
1019
- height: var(--ndw-spacing-2xl);
1020
- line-height: var(--ndw-line-height-md);
1021
- border-radius: var(--ndw-border-radius-sm);
1022
- text-overflow: ellipsis;
1023
- white-space: nowrap;
1024
- }
1025
- [ndwInput]:has([ndwInput]:hover) {
1026
- border-color: var(--ndw-color-grey-400);
1027
- }
1028
- [ndwInput]:has([ndwInput]:active), [ndwInput]:has([ndwInput]:focus), [ndwInput]:has([ndwInput]:focus-visible) {
1029
- border-color: transparent;
1030
- box-shadow: var(--ndw-elevation-info);
1031
- outline-color: var(--ndw-color-info-500);
1032
- }
1033
- [ndwInput][success] {
1034
- background-color: var(--ndw-color-positive-100);
1035
- border-color: var(--ndw-color-positive-500);
1036
- }
1037
- [ndwInput][success]:hover {
1038
- border-color: var(--ndw-color-grey-300);
1039
- }
1040
- [ndwInput][success]:active, [ndwInput][success]:focus, [ndwInput][success]:focus-visible {
1041
- background-color: var(--ndw-color-white);
1042
- border-color: transparent;
1043
- outline-color: var(--ndw-color-secondary-500);
1044
- }
1045
- [ndwInput][error] {
1046
- background-color: var(--ndw-color-critical-100);
1047
- border-color: var(--ndw-color-critical-500);
1048
- }
1049
- [ndwInput][error]:hover {
1050
- border-color: var(--ndw-color-grey-300);
1051
- }
1052
- [ndwInput][error]:active, [ndwInput][error]:focus, [ndwInput][error]:focus-visible {
1053
- background-color: var(--ndw-color-white);
1054
- border-color: transparent;
1055
- outline-color: var(--ndw-color-secondary-500);
1056
- }
1057
- [ndwInput][disabled], [ndwInput][readonly] {
1058
- background-color: var(--ndw-color-grey-100);
1059
- border-color: var(--ndw-color-grey-300);
1060
- color: var(--ndw-color-grey-500);
1061
- pointer-events: none;
1062
- }
1063
- [ndwInput][disabled] ndw-icon, [ndwInput][readonly] ndw-icon {
1064
- color: var(--ndw-color-grey-300);
1065
- }
1066
- [ndwInput]::placeholder {
1067
- color: var(--ndw-color-grey-400);
1068
- }
1069
- [ndwInput][type=search]::-webkit-search-decoration, [ndwInput][type=search]::-webkit-search-cancel-button, [ndwInput][type=search]::-webkit-search-results-button, [ndwInput][type=search]::-webkit-search-results-decoration {
1070
- display: none;
1071
- }
1072
- [ndwInput][type=date]::-webkit-calendar-picker-indicator, [ndwInput][type=datetime-local]::-webkit-calendar-picker-indicator, [ndwInput][type=month]::-webkit-calendar-picker-indicator, [ndwInput][type=time]::-webkit-calendar-picker-indicator, [ndwInput][type=week]::-webkit-calendar-picker-indicator {
1073
- cursor: pointer;
1074
- opacity: 0;
1075
- }
1076
-
1077
- select[ndwInput] {
1078
- appearance: none;
1079
- cursor: pointer;
1080
- }
1081
- select[ndwInput][ndw-placeholder],
1082
- select[ndwInput] option[disabled] {
1083
- color: var(--ndw-color-grey-400);
1084
- }
1085
- select[ndwInput] option:not([disabled]) {
1086
- color: var(--ndw-color-grey-700);
1087
- }
1088
-
1089
- textarea[ndwInput] {
1090
- min-height: 4rem;
1091
- padding-block: calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));
1092
- padding-inline: var(--ndw-spacing-sm);
1093
- line-height: normal;
1094
- white-space: pre-wrap;
1095
- resize: vertical;
1096
- }
1097
-
1098
- [ndwLabel] {
1099
- align-content: center;
1100
- align-items: center;
1101
- display: grid;
1102
- font-family: var(--ndw-font-family-body);
1103
- font-size: var(--ndw-font-size-sm);
1104
- font-weight: var(--ndw-font-weight-bold);
1105
- gap: var(--ndw-spacing-3xs);
1106
- grid-template-columns: repeat(3, auto);
1107
- justify-content: start;
1108
- line-height: 100%;
1109
- margin-bottom: var(--ndw-spacing-2xs);
1110
- }
1111
- [ndwLabel] ndw-icon {
1112
- color: var(--ndw-color-grey-400);
1113
- font-size: var(--ndw-icon-size-md);
1114
- margin-top: calc(var(--ndw-spacing-3xs) * -1);
1115
- }
1116
- [ndwLabel] .required {
1117
- color: var(--ndw-color-grey-400);
1118
- }
1119
-
1120
- [ndwLink] {
1121
- display: inline-flex;
1122
- align-items: baseline;
1123
- gap: var(--ndw-spacing-2xs);
1124
- padding: 0;
1125
- border: 0;
1126
- font-size: inherit;
1127
- text-decoration: underline var(--ndw-border-size-sm) transparent;
1128
- text-underline-offset: var(--ndw-border-size-md);
1129
- color: var(--ndw-color-link-400);
1130
- background-color: transparent;
1131
- transition: text-decoration-color var(--ndw-animation-speed-fast) ease-in-out;
1132
- }
1133
- [ndwLink] > * {
1134
- align-self: center;
1135
- }
1136
- [ndwLink] ndw-icon {
1137
- font-size: 1.25em;
1138
- overflow: hidden;
1139
- }
1140
- [ndwLink]:hover {
1141
- color: var(--ndw-color-link-500);
1142
- text-decoration-color: var(--ndw-color-link-500);
1143
- }
1144
- [ndwLink][disabled] {
1145
- color: var(--ndw-color-grey-400);
1146
- pointer-events: none;
1147
- user-select: none;
1148
- }
1149
-
1150
- [ndwButton][menu] {
1151
- background-color: transparent;
1152
- border-color: transparent;
1153
- border-radius: 0;
1154
- color: var(--ndw-color-grey-400);
1155
- gap: var(--ndw-spacing-xs);
1156
- height: 2.625rem;
1157
- padding-inline: 0;
1158
- position: relative;
1159
- width: 100%;
1160
- cursor: default;
1161
- }
1162
- [ndwButton][menu]:hover, [ndwButton][menu]:active, [ndwButton][menu][active], [ndwButton][menu][selected] {
1163
- color: var(--ndw-color-white);
1164
- cursor: pointer;
1165
- }
1166
- [ndwButton][menu]:active, [ndwButton][menu][selected] {
1167
- background-color: transparent;
1168
- border-color: transparent;
1169
- }
1170
- [ndwButton][menu]:hover, [ndwButton][menu][active] {
1171
- background-color: var(--ndw-color-grey-600);
1172
- border-color: var(--ndw-color-grey-600);
1173
- }
1174
- [ndwButton][menu]:not([clickable]) {
1175
- cursor: default;
1176
- }
1177
-
1178
- @keyframes show {
1179
- from {
1180
- opacity: 0;
1181
- }
1182
- to {
1183
- opacity: 1;
1184
- }
1185
- }
1186
- .cdk-overlay-pane.ndw-popover-panel {
1187
- animation: show var(--ndw-animation-speed-fast) ease-out;
1188
- background-color: var(--ndw-color-white);
1189
- border-radius: var(--ndw-border-radius-md);
1190
- box-shadow: var(--ndw-elevation-popover);
1191
- display: grid;
1192
- padding: var(--ndw-spacing-sm);
1193
- }
1194
-
1195
- .ndw-summary-card {
1196
- display: block;
1197
- }
1198
- .ndw-summary-card__wrapper {
1199
- position: relative;
1200
- overflow: hidden;
1201
- display: grid;
1202
- gap: var(--ndw-spacing-md);
1203
- height: 100%;
1204
- align-items: start;
1205
- box-sizing: border-box;
1206
- }
1207
- .ndw-summary-card__wrapper:has(ndw-summary-card-avatar) {
1208
- grid-template-columns: max-content 1fr;
1209
- }
1210
- .ndw-summary-card__wrapper:has(a:focus:not(:active)) {
1211
- outline: var(--ndw-border-size-sm) solid var(--ndw-color-secondary-500);
1212
- }
1213
- .ndw-summary-card__content {
1214
- display: grid;
1215
- gap: var(--ndw-spacing-xs);
1216
- }
1217
- .ndw-summary-card .ndw-summary-card-tags {
1218
- display: flex;
1219
- flex-wrap: wrap;
1220
- gap: var(--ndw-spacing-xs);
1221
- }
1222
- .ndw-summary-card .ndw-summary-card-tag {
1223
- display: flex;
1224
- flex-wrap: nowrap;
1225
- gap: var(--ndw-spacing-2xs);
1226
- align-items: center;
1227
- border: 1px solid var(--ndw-color-grey-100);
1228
- border-radius: var(--ndw-border-radius-xs);
1229
- padding: var(--ndw-spacing-2xs);
1230
- color: var(--ndw-color-grey-500);
1231
- font-size: var(--ndw-font-size-xs);
1232
- }
1233
- .ndw-summary-card .ndw-summary-card-tag ndw-icon {
1234
- font-size: var(--ndw-font-size-sm);
1235
- }
1236
- .ndw-summary-card .ndw-summary-card-tag img {
1237
- display: block;
1238
- height: var(--ndw-font-size-sm);
1239
- }
1240
- .ndw-summary-card .ndw-summary-card-subtitle {
1241
- display: grid;
1242
- grid-template-columns: max-content 1fr;
1243
- align-items: center;
1244
- gap: var(--ndw-spacing-3xs);
1245
- color: var(--ndw-color-grey-500);
1246
- font-size: var(--ndw-font-size-xs);
1247
- }
1248
- .ndw-summary-card .ndw-summary-card-subtitle ndw-icon {
1249
- font-size: var(--ndw-font-size-sm);
1250
- }
1251
- .ndw-summary-card .ndw-summary-card-subtitle__text {
1252
- overflow: hidden;
1253
- text-overflow: ellipsis;
1254
- white-space: nowrap;
1255
- }
1256
- .ndw-summary-card .ndw-summary-card-header {
1257
- display: flex;
1258
- gap: var(--ndw-spacing-xs);
1259
- }
1260
- .ndw-summary-card .ndw-summary-card-header__wrapper {
1261
- display: grid;
1262
- gap: var(--ndw-spacing-2xs);
1263
- justify-items: left;
1264
- }
1265
- .ndw-summary-card .ndw-summary-card-header__title {
1266
- width: 100%;
1267
- white-space: nowrap;
1268
- overflow: hidden;
1269
- text-overflow: ellipsis;
1270
- margin: 0;
1271
- font-size: var(--ndw-base-font-size);
1272
- font-weight: var(--ndw-font-weight-bold);
1273
- font-family: var(--ndw-font-family-heading);
1274
- }
1275
- .ndw-summary-card .ndw-summary-card-header__title a {
1276
- color: inherit;
1277
- text-decoration: none;
1278
- font-family: var(--ndw-font-family-heading);
1279
- }
1280
- .ndw-summary-card .ndw-summary-card-header__title a:hover {
1281
- text-decoration: underline;
1282
- }
1283
- .ndw-summary-card .ndw-summary-card-header__title a:after {
1284
- content: "";
1285
- position: absolute;
1286
- inset: 0;
1287
- }
1288
- .ndw-summary-card .ndw-summary-card-header__title a:focus {
1289
- outline: 0;
1290
- }
1291
- .ndw-summary-card .ndw-summary-card-content {
1292
- overflow: hidden;
1293
- text-overflow: ellipsis;
1294
- display: -webkit-box;
1295
- -webkit-line-clamp: 2;
1296
- -webkit-box-orient: vertical;
1297
- font-family: var(--ndw-font-family-body);
1298
- font-size: var(--ndw-font-size-sm);
1299
- color: var(--ndw-color-grey-500);
1300
- }
1301
- .ndw-summary-card .ndw-summary-card-avatar {
1302
- display: grid;
1303
- place-content: center;
1304
- position: relative;
1305
- width: 30px;
1306
- aspect-ratio: 1/1;
1307
- border-radius: 50%;
1308
- font-size: var(--ndw-font-size-sm);
1309
- }
1310
- .ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--default {
1311
- color: var(--ndw-color-grey-700);
1312
- background-color: var(--ndw-color-grey-300);
1313
- }
1314
- .ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--orange {
1315
- color: var(--ndw-color-primary-700);
1316
- background-color: var(--ndw-color-primary-050);
1317
- }
1318
- .ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--blue {
1319
- color: var(--ndw-color-info-500);
1320
- background-color: var(--ndw-color-info-100);
1321
- }
1322
- .ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--green {
1323
- color: var(--ndw-color-positive-500);
1324
- background-color: var(--ndw-color-positive-100);
1325
- }
1326
- .ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--red {
1327
- color: var(--ndw-color-critical-500);
1328
- background-color: var(--ndw-color-critical-100);
1329
- }
1330
- .ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--yellow {
1331
- color: var(--ndw-color-warning-500);
1332
- background-color: var(--ndw-color-warning-100);
1333
- }
1334
- .ndw-summary-card .ndw-summary-card-avatar.ndw-summary-card-avatar--purple {
1335
- color: var(--ndw-color-alternative-500);
1336
- background-color: var(--ndw-color-alternative-100);
1337
- }
1338
- .ndw-summary-card .ndw-summary-card-avatar > img {
1339
- display: block;
1340
- width: 100%;
1341
- height: 100%;
1342
- object-fit: cover;
1343
- border-radius: 50%;
1344
- }
1345
- .ndw-summary-card .ndw-summary-card-avatar ndw-icon {
1346
- font-size: var(--ndw-font-size-lg);
1347
- }
1348
- .ndw-summary-card .ndw-summary-card-actions {
1349
- flex: 1;
1350
- display: flex;
1351
- justify-content: flex-end;
1352
- }
1353
- .ndw-summary-card .ndw-summary-card-actions--auto {
1354
- container-type: inline-size;
1355
- }
1356
- .ndw-summary-card .ndw-summary-card-actions .actions {
1357
- gap: var(--ndw-spacing-2xs);
1358
- }
1359
- .ndw-summary-card .ndw-summary-card-actions .actions--popover {
1360
- display: grid;
1361
- }
1362
- .ndw-summary-card .ndw-summary-card-actions .actions--visible, .ndw-summary-card .ndw-summary-card-actions .actions--auto {
1363
- display: flex;
1364
- }
1365
- .ndw-summary-card .ndw-summary-card-actions .popover-wrapper {
1366
- display: block;
1367
- }
1368
- @container (width > 140px) {
1369
- .ndw-summary-card .ndw-summary-card-actions .popover-wrapper {
1370
- display: none;
1371
- }
1372
- }
1373
- .ndw-summary-card .ndw-summary-card-actions .regular-wrapper {
1374
- display: none;
1375
- }
1376
- @container (width > 140px) {
1377
- .ndw-summary-card .ndw-summary-card-actions .regular-wrapper {
1378
- display: block;
1379
- }
1380
- }