@scania/tegel 0.0.1-beta.7 → 0.0.1-beta.9

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 (281) hide show
  1. package/package.json +1 -1
  2. package/readme.md +7 -8
  3. package/dist/cjs/index-e1c79686.js +0 -1912
  4. package/dist/cjs/index.cjs.js +0 -2
  5. package/dist/cjs/loader.cjs.js +0 -21
  6. package/dist/cjs/popper-11d5f714.js +0 -1801
  7. package/dist/cjs/sdds-accordion-item.cjs.entry.js +0 -34
  8. package/dist/cjs/sdds-accordion.cjs.entry.js +0 -21
  9. package/dist/cjs/sdds-badges.cjs.entry.js +0 -55
  10. package/dist/cjs/sdds-body-cell_2.cjs.entry.js +0 -173
  11. package/dist/cjs/sdds-button.cjs.entry.js +0 -36
  12. package/dist/cjs/sdds-datetime.cjs.entry.js +0 -66
  13. package/dist/cjs/sdds-dropdown-filter.cjs.entry.js +0 -92
  14. package/dist/cjs/sdds-dropdown_2.cjs.entry.js +0 -335
  15. package/dist/cjs/sdds-header-cell.cjs.entry.js +0 -141
  16. package/dist/cjs/sdds-icon.cjs.entry.js +0 -42
  17. package/dist/cjs/sdds-inline-tabs-fullbleed.cjs.entry.js +0 -96
  18. package/dist/cjs/sdds-inline-tabs.cjs.entry.js +0 -211
  19. package/dist/cjs/sdds-modal.cjs.entry.js +0 -49
  20. package/dist/cjs/sdds-navigation-tabs.cjs.entry.js +0 -95
  21. package/dist/cjs/sdds-popover-canvas.cjs.entry.js +0 -76
  22. package/dist/cjs/sdds-popover-menu.cjs.entry.js +0 -75
  23. package/dist/cjs/sdds-slider.cjs.entry.js +0 -336
  24. package/dist/cjs/sdds-spinner.cjs.entry.js +0 -21
  25. package/dist/cjs/sdds-table-body-row-expandable.cjs.entry.js +0 -81
  26. package/dist/cjs/sdds-table-body.cjs.entry.js +0 -289
  27. package/dist/cjs/sdds-table-footer.cjs.entry.js +0 -165
  28. package/dist/cjs/sdds-table-header.cjs.entry.js +0 -100
  29. package/dist/cjs/sdds-table-toolbar.cjs.entry.js +0 -66
  30. package/dist/cjs/sdds-table.cjs.entry.js +0 -69
  31. package/dist/cjs/sdds-textarea.cjs.entry.js +0 -61
  32. package/dist/cjs/sdds-textfield.cjs.entry.js +0 -82
  33. package/dist/cjs/sdds-tooltip.cjs.entry.js +0 -95
  34. package/dist/cjs/tegel.cjs.js +0 -19
  35. package/dist/collection/collection-manifest.json +0 -40
  36. package/dist/collection/components/accordion/accordion-item/accordion-item.css +0 -134
  37. package/dist/collection/components/accordion/accordion-item/accordion-item.js +0 -146
  38. package/dist/collection/components/accordion/accordion.css +0 -77
  39. package/dist/collection/components/accordion/accordion.js +0 -62
  40. package/dist/collection/components/badge/badges.css +0 -42
  41. package/dist/collection/components/badge/badges.js +0 -150
  42. package/dist/collection/components/button/button-component.js +0 -154
  43. package/dist/collection/components/button/button.css +0 -658
  44. package/dist/collection/components/data-table/table/table.css +0 -15
  45. package/dist/collection/components/data-table/table/table.js +0 -253
  46. package/dist/collection/components/data-table/table-body/table-body.css +0 -22
  47. package/dist/collection/components/data-table/table-body/table-body.js +0 -425
  48. package/dist/collection/components/data-table/table-body-cell/table-body-cell.css +0 -40
  49. package/dist/collection/components/data-table/table-body-cell/table-body-cell.js +0 -169
  50. package/dist/collection/components/data-table/table-body-row/table-body-row.css +0 -196
  51. package/dist/collection/components/data-table/table-body-row/table-body-row.js +0 -164
  52. package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.css +0 -79
  53. package/dist/collection/components/data-table/table-body-row-expandable/table-body-row-expandable.js +0 -155
  54. package/dist/collection/components/data-table/table-footer/table-footer.css +0 -93
  55. package/dist/collection/components/data-table/table-footer/table-footer.js +0 -355
  56. package/dist/collection/components/data-table/table-header/table-header.css +0 -204
  57. package/dist/collection/components/data-table/table-header/table-header.js +0 -153
  58. package/dist/collection/components/data-table/table-header-cell/table-header-cell.css +0 -126
  59. package/dist/collection/components/data-table/table-header-cell/table-header-cell.js +0 -320
  60. package/dist/collection/components/data-table/table-toolbar/table-toolbar.css +0 -92
  61. package/dist/collection/components/data-table/table-toolbar/table-toolbar.js +0 -142
  62. package/dist/collection/components/datetime/datetime.css +0 -375
  63. package/dist/collection/components/datetime/datetime.js +0 -251
  64. package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js +0 -339
  65. package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js +0 -185
  66. package/dist/collection/components/dropdown/dropdown.css +0 -891
  67. package/dist/collection/components/dropdown/dropdown.js +0 -554
  68. package/dist/collection/components/icon/icon.css +0 -16
  69. package/dist/collection/components/icon/icon.js +0 -89
  70. package/dist/collection/components/icon/iconsArray.js +0 -2
  71. package/dist/collection/components/modal/modal.css +0 -324
  72. package/dist/collection/components/modal/modal.js +0 -146
  73. package/dist/collection/components/popover-canvas/popover-canvas.css +0 -20
  74. package/dist/collection/components/popover-canvas/popover-canvas.js +0 -190
  75. package/dist/collection/components/popover-menu/popover-menu.css +0 -19
  76. package/dist/collection/components/popover-menu/popover-menu.js +0 -189
  77. package/dist/collection/components/slider/slider.css +0 -260
  78. package/dist/collection/components/slider/slider.js +0 -682
  79. package/dist/collection/components/spinner/spinner.css +0 -79
  80. package/dist/collection/components/spinner/spinner.js +0 -61
  81. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.css +0 -159
  82. package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.js +0 -302
  83. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.css +0 -172
  84. package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js +0 -126
  85. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.css +0 -153
  86. package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js +0 -103
  87. package/dist/collection/components/textarea/textarea.css +0 -283
  88. package/dist/collection/components/textarea/textarea.js +0 -336
  89. package/dist/collection/components/textfield/textfield.css +0 -494
  90. package/dist/collection/components/textfield/textfield.js +0 -359
  91. package/dist/collection/components/tooltip/tooltip.css +0 -46
  92. package/dist/collection/components/tooltip/tooltip.js +0 -200
  93. package/dist/collection/index.js +0 -1
  94. package/dist/collection/stories/assets/code-brackets.svg +0 -1
  95. package/dist/collection/stories/assets/colors.svg +0 -1
  96. package/dist/collection/stories/assets/comments.svg +0 -1
  97. package/dist/collection/stories/assets/direction.svg +0 -1
  98. package/dist/collection/stories/assets/flow.svg +0 -1
  99. package/dist/collection/stories/assets/plugin.svg +0 -1
  100. package/dist/collection/stories/assets/repo.svg +0 -1
  101. package/dist/collection/stories/assets/stackalt.svg +0 -1
  102. package/dist/collection/utils/utils.js +0 -12
  103. package/dist/components/dropdown-option.js +0 -100
  104. package/dist/components/dropdown.js +0 -296
  105. package/dist/components/icon.js +0 -58
  106. package/dist/components/index.d.ts +0 -50
  107. package/dist/components/index.js +0 -30
  108. package/dist/components/popper.js +0 -1799
  109. package/dist/components/sdds-accordion-item.d.ts +0 -11
  110. package/dist/components/sdds-accordion-item.js +0 -60
  111. package/dist/components/sdds-accordion.d.ts +0 -11
  112. package/dist/components/sdds-accordion.js +0 -38
  113. package/dist/components/sdds-badges.d.ts +0 -11
  114. package/dist/components/sdds-badges.js +0 -76
  115. package/dist/components/sdds-body-cell.d.ts +0 -11
  116. package/dist/components/sdds-body-cell.js +0 -6
  117. package/dist/components/sdds-button.d.ts +0 -11
  118. package/dist/components/sdds-button.js +0 -58
  119. package/dist/components/sdds-datetime.d.ts +0 -11
  120. package/dist/components/sdds-datetime.js +0 -90
  121. package/dist/components/sdds-dropdown-filter.d.ts +0 -11
  122. package/dist/components/sdds-dropdown-filter.js +0 -138
  123. package/dist/components/sdds-dropdown-option.d.ts +0 -11
  124. package/dist/components/sdds-dropdown-option.js +0 -6
  125. package/dist/components/sdds-dropdown.d.ts +0 -11
  126. package/dist/components/sdds-dropdown.js +0 -6
  127. package/dist/components/sdds-header-cell.d.ts +0 -11
  128. package/dist/components/sdds-header-cell.js +0 -173
  129. package/dist/components/sdds-icon.d.ts +0 -11
  130. package/dist/components/sdds-icon.js +0 -6
  131. package/dist/components/sdds-inline-tabs-fullbleed.d.ts +0 -11
  132. package/dist/components/sdds-inline-tabs-fullbleed.js +0 -115
  133. package/dist/components/sdds-inline-tabs.d.ts +0 -11
  134. package/dist/components/sdds-inline-tabs.js +0 -235
  135. package/dist/components/sdds-modal.d.ts +0 -11
  136. package/dist/components/sdds-modal.js +0 -69
  137. package/dist/components/sdds-navigation-tabs.d.ts +0 -11
  138. package/dist/components/sdds-navigation-tabs.js +0 -113
  139. package/dist/components/sdds-popover-canvas.d.ts +0 -11
  140. package/dist/components/sdds-popover-canvas.js +0 -97
  141. package/dist/components/sdds-popover-menu.d.ts +0 -11
  142. package/dist/components/sdds-popover-menu.js +0 -96
  143. package/dist/components/sdds-slider.d.ts +0 -11
  144. package/dist/components/sdds-slider.js +0 -366
  145. package/dist/components/sdds-spinner.d.ts +0 -11
  146. package/dist/components/sdds-spinner.js +0 -37
  147. package/dist/components/sdds-table-body-row-expandable.d.ts +0 -11
  148. package/dist/components/sdds-table-body-row-expandable.js +0 -104
  149. package/dist/components/sdds-table-body-row.d.ts +0 -11
  150. package/dist/components/sdds-table-body-row.js +0 -6
  151. package/dist/components/sdds-table-body.d.ts +0 -11
  152. package/dist/components/sdds-table-body.js +0 -337
  153. package/dist/components/sdds-table-footer.d.ts +0 -11
  154. package/dist/components/sdds-table-footer.js +0 -196
  155. package/dist/components/sdds-table-header.d.ts +0 -11
  156. package/dist/components/sdds-table-header.js +0 -125
  157. package/dist/components/sdds-table-toolbar.d.ts +0 -11
  158. package/dist/components/sdds-table-toolbar.js +0 -88
  159. package/dist/components/sdds-table.d.ts +0 -11
  160. package/dist/components/sdds-table.js +0 -92
  161. package/dist/components/sdds-textarea.d.ts +0 -11
  162. package/dist/components/sdds-textarea.js +0 -90
  163. package/dist/components/sdds-textfield.d.ts +0 -11
  164. package/dist/components/sdds-textfield.js +0 -111
  165. package/dist/components/sdds-tooltip.d.ts +0 -11
  166. package/dist/components/sdds-tooltip.js +0 -116
  167. package/dist/components/table-body-cell.js +0 -102
  168. package/dist/components/table-body-row.js +0 -119
  169. package/dist/esm/index-b67b15a6.js +0 -1884
  170. package/dist/esm/index.js +0 -1
  171. package/dist/esm/loader.js +0 -17
  172. package/dist/esm/polyfills/core-js.js +0 -11
  173. package/dist/esm/polyfills/css-shim.js +0 -1
  174. package/dist/esm/polyfills/dom.js +0 -79
  175. package/dist/esm/polyfills/es5-html-element.js +0 -1
  176. package/dist/esm/polyfills/index.js +0 -34
  177. package/dist/esm/polyfills/system.js +0 -6
  178. package/dist/esm/popper-f860750c.js +0 -1799
  179. package/dist/esm/sdds-accordion-item.entry.js +0 -30
  180. package/dist/esm/sdds-accordion.entry.js +0 -17
  181. package/dist/esm/sdds-badges.entry.js +0 -51
  182. package/dist/esm/sdds-body-cell_2.entry.js +0 -168
  183. package/dist/esm/sdds-button.entry.js +0 -32
  184. package/dist/esm/sdds-datetime.entry.js +0 -62
  185. package/dist/esm/sdds-dropdown-filter.entry.js +0 -88
  186. package/dist/esm/sdds-dropdown_2.entry.js +0 -330
  187. package/dist/esm/sdds-header-cell.entry.js +0 -137
  188. package/dist/esm/sdds-icon.entry.js +0 -38
  189. package/dist/esm/sdds-inline-tabs-fullbleed.entry.js +0 -92
  190. package/dist/esm/sdds-inline-tabs.entry.js +0 -207
  191. package/dist/esm/sdds-modal.entry.js +0 -45
  192. package/dist/esm/sdds-navigation-tabs.entry.js +0 -91
  193. package/dist/esm/sdds-popover-canvas.entry.js +0 -72
  194. package/dist/esm/sdds-popover-menu.entry.js +0 -71
  195. package/dist/esm/sdds-slider.entry.js +0 -332
  196. package/dist/esm/sdds-spinner.entry.js +0 -17
  197. package/dist/esm/sdds-table-body-row-expandable.entry.js +0 -77
  198. package/dist/esm/sdds-table-body.entry.js +0 -285
  199. package/dist/esm/sdds-table-footer.entry.js +0 -161
  200. package/dist/esm/sdds-table-header.entry.js +0 -96
  201. package/dist/esm/sdds-table-toolbar.entry.js +0 -62
  202. package/dist/esm/sdds-table.entry.js +0 -65
  203. package/dist/esm/sdds-textarea.entry.js +0 -57
  204. package/dist/esm/sdds-textfield.entry.js +0 -78
  205. package/dist/esm/sdds-tooltip.entry.js +0 -91
  206. package/dist/esm/tegel.js +0 -17
  207. package/dist/index.cjs.js +0 -1
  208. package/dist/index.js +0 -1
  209. package/dist/node_modules/@types/jest/index.d.ts +0 -1512
  210. package/dist/tegel/index.esm.js +0 -0
  211. package/dist/tegel/p-040efb32.entry.js +0 -1
  212. package/dist/tegel/p-12ca5cfa.entry.js +0 -1
  213. package/dist/tegel/p-157e1618.js +0 -2
  214. package/dist/tegel/p-1fe61cf6.entry.js +0 -1
  215. package/dist/tegel/p-2f376504.entry.js +0 -1
  216. package/dist/tegel/p-44ced895.entry.js +0 -1
  217. package/dist/tegel/p-4880f03d.entry.js +0 -1
  218. package/dist/tegel/p-4aba73a3.entry.js +0 -1
  219. package/dist/tegel/p-4b58a02c.entry.js +0 -1
  220. package/dist/tegel/p-4cb85347.entry.js +0 -1
  221. package/dist/tegel/p-52031b5a.entry.js +0 -1
  222. package/dist/tegel/p-677baf7f.entry.js +0 -1
  223. package/dist/tegel/p-71797eaf.entry.js +0 -1
  224. package/dist/tegel/p-7373284c.entry.js +0 -1
  225. package/dist/tegel/p-7451779b.entry.js +0 -1
  226. package/dist/tegel/p-77aeea3b.entry.js +0 -1
  227. package/dist/tegel/p-8582d6a7.entry.js +0 -1
  228. package/dist/tegel/p-96021bd0.entry.js +0 -1
  229. package/dist/tegel/p-9d8caf51.entry.js +0 -1
  230. package/dist/tegel/p-a5919930.entry.js +0 -1
  231. package/dist/tegel/p-b01cface.entry.js +0 -1
  232. package/dist/tegel/p-bf896643.entry.js +0 -1
  233. package/dist/tegel/p-c311725c.entry.js +0 -1
  234. package/dist/tegel/p-cf72dfd9.entry.js +0 -1
  235. package/dist/tegel/p-d91caec6.entry.js +0 -1
  236. package/dist/tegel/p-e10eec33.entry.js +0 -1
  237. package/dist/tegel/p-ec26fc38.js +0 -1
  238. package/dist/tegel/p-f2262a69.entry.js +0 -1
  239. package/dist/tegel/p-f2f7aa45.entry.js +0 -1
  240. package/dist/tegel/tegel.css +0 -101
  241. package/dist/tegel/tegel.esm.js +0 -1
  242. package/dist/types/components/accordion/accordion-item/accordion-item.d.ts +0 -17
  243. package/dist/types/components/accordion/accordion.d.ts +0 -7
  244. package/dist/types/components/badge/badges.d.ts +0 -16
  245. package/dist/types/components/button/button-component.d.ts +0 -15
  246. package/dist/types/components/data-table/table/table.d.ts +0 -47
  247. package/dist/types/components/data-table/table-body/table-body.d.ts +0 -54
  248. package/dist/types/components/data-table/table-body-cell/table-body-cell.d.ts +0 -24
  249. package/dist/types/components/data-table/table-body-row/table-body-row.d.ts +0 -27
  250. package/dist/types/components/data-table/table-body-row-expandable/table-body-row-expandable.d.ts +0 -27
  251. package/dist/types/components/data-table/table-footer/table-footer.d.ts +0 -50
  252. package/dist/types/components/data-table/table-header/table-header.d.ts +0 -27
  253. package/dist/types/components/data-table/table-header-cell/table-header-cell.d.ts +0 -45
  254. package/dist/types/components/data-table/table-toolbar/table-toolbar.d.ts +0 -22
  255. package/dist/types/components/datetime/datetime.d.ts +0 -32
  256. package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.d.ts +0 -42
  257. package/dist/types/components/dropdown/dropdown-option/dropdown-option.d.ts +0 -19
  258. package/dist/types/components/dropdown/dropdown.d.ts +0 -56
  259. package/dist/types/components/icon/icon.d.ts +0 -12
  260. package/dist/types/components/modal/modal.d.ts +0 -16
  261. package/dist/types/components/popover-canvas/popover-canvas.d.ts +0 -18
  262. package/dist/types/components/popover-menu/popover-menu.d.ts +0 -18
  263. package/dist/types/components/slider/slider.d.ts +0 -82
  264. package/dist/types/components/spinner/spinner.d.ts +0 -7
  265. package/dist/types/components/tabs/inline-tabs-default/inline-tabs.d.ts +0 -41
  266. package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.d.ts +0 -20
  267. package/dist/types/components/tabs/navigation-tabs/navigation-tabs.d.ts +0 -18
  268. package/dist/types/components/textarea/textarea.d.ts +0 -41
  269. package/dist/types/components/textfield/textfield.d.ts +0 -42
  270. package/dist/types/components/tooltip/tooltip.d.ts +0 -20
  271. package/dist/types/components.d.ts +0 -1752
  272. package/dist/types/global.d.ts +0 -2
  273. package/dist/types/index.d.ts +0 -1
  274. package/dist/types/stencil-public-runtime.d.ts +0 -1581
  275. package/dist/types/utils/utils.d.ts +0 -2
  276. package/loader/cdn.js +0 -3
  277. package/loader/index.cjs.js +0 -3
  278. package/loader/index.d.ts +0 -12
  279. package/loader/index.es2017.js +0 -3
  280. package/loader/index.js +0 -4
  281. package/loader/package.json +0 -11
package/dist/collection/components/button/button.css DELETED
@@ -1,658 +0,0 @@
1
- :root,
2
- html,
3
- .sdds-theme-light {
4
- --sdds-btn-primary-background: var(--sdds-blue-600);
5
- --sdds-btn-primary-color: var(--sdds-white);
6
- --sdds-btn-primary-border-color: transparent;
7
- --sdds-btn-primary-background-hover: var(--sdds-blue-500);
8
- --sdds-btn-primary-color-hover: var(--sdds-white);
9
- --sdds-btn-primary-border-color-hover: transparent;
10
- --sdds-btn-primary-background-active: var(--sdds-blue-700);
11
- --sdds-btn-primary-color-active: var(--sdds-white);
12
- --sdds-btn-primary-border-color-active: transparent;
13
- --sdds-btn-primary-background-focus: var(--sdds-blue-400);
14
- --sdds-btn-primary-color-focus: var(--sdds-white);
15
- --sdds-btn-primary-border-color-focus: var(--sdds-blue-600);
16
- --sdds-btn-primary-outline-color-focus: var(--sdds-blue-600);
17
- --sdds-btn-primary-background-disabled: var(--sdds-white);
18
- --sdds-btn-primary-color-disabled: var(--sdds-grey-400);
19
- --sdds-btn-primary-border-color-disabled: transparent;
20
- /* ICON */
21
- --sdds-btn-icon-primary-fill: var(--sdds-grey-50);
22
- --sdds-btn-icon-primary-color: var(--sdds-grey-50);
23
- --sdds-btn-primary-on-white-background-disabled: var(--sdds-grey-50);
24
- --sdds-btn-danger-on-white-background-disabled: var(--sdds-grey-50);
25
- --sdds-btn-secondary-background: transparent;
26
- --sdds-btn-secondary-color: var(--sdds-black);
27
- --sdds-btn-secondary-border-color: rgb(0 0 0 / 38%);
28
- --sdds-btn-secondary-background-hover: var(--sdds-blue-500);
29
- --sdds-btn-secondary-color-hover: var(--sdds-white);
30
- --sdds-btn-secondary-border-color-hover: var(--sdds-blue-500);
31
- --sdds-btn-secondary-background-active: transparent;
32
- --sdds-btn-secondary-color-active: var(--sdds-black);
33
- --sdds-btn-secondary-border-color-active: rgb(0 0 0 / 87%);
34
- --sdds-btn-secondary-background-focus: transparent;
35
- --sdds-btn-secondary-color-focus: var(--sdds-black);
36
- --sdds-btn-secondary-border-color-focus: var(--sdds-blue-300);
37
- --sdds-btn-secondary-outline-color: rgb(0 0 0 / 38%);
38
- --sdds-btn-secondary-background-disabled: transparent;
39
- --sdds-btn-secondary-color-disabled: rgb(0 0 0 / 38%);
40
- --sdds-btn-secondary-border-color-disabled: rgb(0 0 0 / 38%);
41
- /* ICON */
42
- --sdds-btn-icon-secondary-fill: var(--sdds-black);
43
- --sdds-btn-icon-secondary-color: var(--sdds-black);
44
- /* ICON HOVER */
45
- --sdds-btn-icon-secondary-fill-hover: var(--sdds-grey-50);
46
- --sdds-btn-icon-secondary-color-hover: var(--sdds-grey-50);
47
- /* ICON FOCUS */
48
- --sdds-btn-icon-secondary-fill-focus: var(--sdds-black);
49
- --sdds-btn-icon-secondary-color-focus: var(--sdds-black);
50
- --sdds-btn-ghost-background: transparent;
51
- --sdds-btn-ghost-color: var(--sdds-black);
52
- --sdds-btn-ghost-border-color: transparent;
53
- --sdds-btn-ghost-background-hover: transparent;
54
- --sdds-btn-ghost-color-hover: var(--sdds-black);
55
- --sdds-btn-ghost-border-color-hover: rgb(0 0 0 / 60%);
56
- --sdds-btn-ghost-outline-color-hover: rgb(0 0 0 / 60%);
57
- --sdds-btn-ghost-background-active: transparent;
58
- --sdds-btn-ghost-color-active: var(--sdds-black);
59
- --sdds-btn-ghost-border-color-active: rgb(0 0 0 / 87%);
60
- --sdds-btn-ghost-background-focus: transparent;
61
- --sdds-btn-ghost-color-focus: var(--sdds-black);
62
- --sdds-btn-ghost-border-color-focus: var(--sdds-blue-300);
63
- --sdds-btn-ghost-outline-color-focus: var(--sdds-blue-300);
64
- --sdds-btn-ghost-background-disabled: transparent;
65
- --sdds-btn-ghost-color-disabled: rgb(0 0 0 / 38%);
66
- --sdds-btn-ghost-border-color-disabled: transparent;
67
- /* ICON */
68
- --sdds-btn-icon-ghost-fill: var(--sdds-black);
69
- --sdds-btn-icon-ghost-color: var(--sdds-black);
70
- --sdds-btn-danger-background: var(--sdds-red-600);
71
- --sdds-btn-danger-color: var(--sdds-white);
72
- --sdds-btn-danger-border-color: transparent;
73
- --sdds-btn-danger-background-hover: var(--sdds-red-500);
74
- --sdds-btn-danger-color-hover: var(--sdds-white);
75
- --sdds-btn-danger-border-color-hover: transparent;
76
- --sdds-btn-danger-background-active: var(--sdds-red-700);
77
- --sdds-btn-danger-color-active: var(--sdds-white);
78
- --sdds-btn-danger-border-color-active: transparent;
79
- --sdds-btn-danger-background-focus: var(--sdds-red-400);
80
- --sdds-btn-danger-color-focus: var(--sdds-white);
81
- --sdds-btn-danger-border-color-focus: var(--sdds-red-700);
82
- --sdds-btn-danger-outline-color-focus: var(--sdds-red-700);
83
- --sdds-btn-danger-background-disabled: var(--sdds-white);
84
- --sdds-btn-danger-color-disabled: rgb(0 0 0 / 38%);
85
- --sdds-btn-danger-border-color-disabled: transparent;
86
- /* ICON */
87
- --sdds-btn-icon-danger-fill: var(--sdds-white);
88
- --sdds-btn-icon-danger-color: var(--sdds-white);
89
- }
90
- :root .sdds-theme-dark,
91
- html .sdds-theme-dark,
92
- .sdds-theme-light .sdds-theme-dark {
93
- --sdds-btn-primary-background: var(--sdds-blue-600);
94
- --sdds-btn-primary-color: var(--sdds-white);
95
- --sdds-btn-primary-border-color: transparent;
96
- --sdds-btn-primary-background-hover: var(--sdds-blue-500);
97
- --sdds-btn-primary-color-hover: var(--sdds-white);
98
- --sdds-btn-primary-border-color-hover: transparent;
99
- --sdds-btn-primary-background-active: var(--sdds-blue-700);
100
- --sdds-btn-primary-color-active: var(--sdds-white);
101
- --sdds-btn-primary-border-color-active: transparent;
102
- --sdds-btn-primary-background-focus: var(--sdds-blue-400);
103
- --sdds-btn-primary-color-focus: var(--sdds-white);
104
- --sdds-btn-primary-border-color-focus: var(--sdds-blue-600);
105
- --sdds-btn-primary-outline-color-focus: var(--sdds-blue-600);
106
- --sdds-btn-primary-background-disabled: var(--sdds-white);
107
- --sdds-btn-primary-color-disabled: var(--sdds-grey-400);
108
- --sdds-btn-primary-border-color-disabled: transparent;
109
- /* ICON */
110
- --sdds-btn-icon-primary-fill: var(--sdds-grey-50);
111
- --sdds-btn-icon-primary-color: var(--sdds-grey-50);
112
- --sdds-btn-primary-on-white-background-disabled: var(--sdds-grey-50);
113
- --sdds-btn-danger-on-white-background-disabled: var(--sdds-grey-50);
114
- --sdds-btn-secondary-background: transparent;
115
- --sdds-btn-secondary-color: var(--sdds-white);
116
- --sdds-btn-secondary-border-color: var(--sdds-white);
117
- --sdds-btn-secondary-background-hover: var(--sdds-blue-500);
118
- --sdds-btn-secondary-color-hover: var(--sdds-white);
119
- --sdds-btn-secondary-border-color-hover: var(--sdds-blue-500);
120
- --sdds-btn-secondary-background-active: transparent;
121
- --sdds-btn-secondary-color-active: var(--sdds-white);
122
- --sdds-btn-secondary-border-color-active: var(--sdds-white);
123
- --sdds-btn-secondary-background-focus: transparent;
124
- --sdds-btn-secondary-color-focus: var(--sdds-white);
125
- --sdds-btn-secondary-border-color-focus: var(--sdds-blue-300);
126
- --sdds-btn-secondary-outline-color: var(--sdds-white);
127
- --sdds-btn-secondary-outline-color-focus: var(--sdds-blue-300);
128
- --sdds-btn-secondary-background-disabled: transparent;
129
- --sdds-btn-secondary-color-disabled: rgb(255 255 255 / 38%);
130
- --sdds-btn-secondary-border-color-disabled: rgb(255 255 255 / 38%);
131
- /* ICON */
132
- --sdds-btn-icon-secondary-fill: var(--sdds-black);
133
- --sdds-btn-icon-secondary-color: var(--sdds-black);
134
- --sdds-btn-ghost-background: transparent;
135
- --sdds-btn-ghost-color: var(--sdds-white);
136
- --sdds-btn-ghost-border-color: transparent;
137
- --sdds-btn-ghost-background-hover: transparent;
138
- --sdds-btn-ghost-color-hover: var(--sdds-white);
139
- --sdds-btn-ghost-border-color-hover: rgb(255 255 255 / 41%);
140
- --sdds-btn-ghost-outline-color-hover: rgb(255 255 255 / 41%);
141
- --sdds-btn-ghost-background-active: transparent;
142
- --sdds-btn-ghost-color-active: var(--sdds-white);
143
- --sdds-btn-ghost-border-color-active: rgb(255 255 255 / 87%);
144
- --sdds-btn-ghost-background-focus: transparent;
145
- --sdds-btn-ghost-color-focus: var(--sdds-white);
146
- --sdds-btn-ghost-border-color-focus: var(--sdds-blue-300);
147
- --sdds-btn-ghost-outline-color-focus: var(--sdds-blue-300);
148
- --sdds-btn-ghost-background-disabled: transparent;
149
- --sdds-btn-ghost-color-disabled: rgb(255 255 255/ 38%);
150
- --sdds-btn-ghost-border-color-disabled: transparent;
151
- /* ICON */
152
- --sdds-btn-icon-ghost-fill: var(--sdds-black);
153
- --sdds-btn-icon-ghost-color: var(--sdds-black);
154
- --sdds-btn-danger-background: var(--sdds-red-600);
155
- --sdds-btn-danger-color: var(--sdds-white);
156
- --sdds-btn-danger-border-color: transparent;
157
- --sdds-btn-danger-background-hover: var(--sdds-red-500);
158
- --sdds-btn-danger-color-hover: var(--sdds-white);
159
- --sdds-btn-danger-border-color-hover: transparent;
160
- --sdds-btn-danger-background-active: var(--sdds-red-700);
161
- --sdds-btn-danger-color-active: var(--sdds-white);
162
- --sdds-btn-danger-border-color-active: transparent;
163
- --sdds-btn-danger-background-focus: var(--sdds-red-400);
164
- --sdds-btn-danger-color-focus: var(--sdds-white);
165
- --sdds-btn-danger-border-color-focus: var(--sdds-red-700);
166
- --sdds-btn-danger-outline-color-focus: var(--sdds-red-700);
167
- --sdds-btn-danger-background-disabled: var(--sdds-grey-868);
168
- --sdds-btn-danger-color-disabled: rgb(255 255 255 / 38%);
169
- --sdds-btn-danger-border-color-disabled: transparent;
170
- /* ICON */
171
- --sdds-btn-icon-danger-fill: var(--sdds-black);
172
- --sdds-btn-icon-danger-color: var(--sdds-black);
173
- }
174
-
175
- .sdds-on-white-bg {
176
- --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-on-white-background-disabled);
177
- --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-on-white-background-disabled);
178
- }
179
-
180
- .sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon {
181
- position: relative;
182
- }
183
- .sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon::before {
184
- font-size: 20px;
185
- line-height: 1;
186
- position: absolute;
187
- right: 0;
188
- }
189
- .sdds-btn-lg.sdds-btn-only-icon i.sdds-btn-icon::before {
190
- font-size: 20px;
191
- line-height: 1.25;
192
- }
193
-
194
- .sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon {
195
- position: relative;
196
- }
197
- .sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon::before {
198
- font-size: 20px;
199
- line-height: 1;
200
- position: absolute;
201
- right: 0;
202
- }
203
- .sdds-btn-md.sdds-btn-only-icon i.sdds-btn-icon::before {
204
- font-size: 20px;
205
- line-height: 1.25;
206
- }
207
-
208
- .sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon {
209
- position: relative;
210
- }
211
- .sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon::before {
212
- font-size: 16px;
213
- line-height: 1;
214
- position: absolute;
215
- right: 0;
216
- }
217
- .sdds-btn-sm.sdds-btn-only-icon i.sdds-btn-icon::before {
218
- font-size: 16px;
219
- line-height: 1.25;
220
- }
221
-
222
- .sdds-btn.sdds-btn-primary .sdds-btn-icon {
223
- fill: var(--sdds-btn-primary-icon-fill);
224
- color: var(--sdds-btn-primary-icon-color);
225
- font-size: 16px;
226
- }
227
-
228
- .sdds-btn {
229
- box-sizing: border-box;
230
- font: var(--sdds-detail-02);
231
- letter-spacing: var(--sdds-detail-02-ls);
232
- display: flex;
233
- align-items: center;
234
- border-radius: 4px;
235
- border: none;
236
- box-shadow: none;
237
- position: relative;
238
- text-decoration: none;
239
- cursor: pointer;
240
- height: 56px;
241
- padding: var(--sdds-spacing-element-20);
242
- border: 1px solid;
243
- }
244
- .sdds-btn * {
245
- box-sizing: border-box;
246
- }
247
- .sdds-btn:disabled, .sdds-btn.disabled {
248
- cursor: unset;
249
- }
250
- .sdds-btn:focus {
251
- outline: 2px solid var(--sdds-blue-400);
252
- outline-offset: -2px;
253
- }
254
- .sdds-btn span.sdds-btn-text + .sdds-btn-icon {
255
- margin-left: var(--sdds-spacing-element-16);
256
- width: 20px;
257
- height: 20px;
258
- line-height: 0;
259
- }
260
- .sdds-btn.sdds-btn-xs {
261
- padding: var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);
262
- height: 24px;
263
- font-size: 12px;
264
- border-radius: 2px;
265
- }
266
- .sdds-btn.sdds-btn-xs:focus {
267
- outline: 2px solid var(--sdds-blue-400);
268
- outline-offset: -2px;
269
- }
270
- .sdds-btn.sdds-btn-sm {
271
- padding: var(--sdds-spacing-element-12);
272
- height: 40px;
273
- }
274
- .sdds-btn.sdds-btn-sm.sdds-btn-only-icon {
275
- padding: 11px;
276
- }
277
- .sdds-btn.sdds-btn-sm:focus {
278
- outline: 2px solid var(--sdds-blue-400);
279
- outline-offset: -2px;
280
- }
281
- .sdds-btn.sdds-btn-sm span.sdds-btn-text + .sdds-btn-icon {
282
- margin: unset;
283
- margin-left: var(--sdds-spacing-element-24);
284
- width: 16px;
285
- height: 16px;
286
- }
287
- .sdds-btn.sdds-btn-sm.sdds-btn-fullbleed span.sdds-btn-text + .sdds-btn-icon {
288
- margin: unset;
289
- margin-left: var(--sdds-spacing-element-12);
290
- }
291
- .sdds-btn.sdds-btn-md {
292
- padding: var(--sdds-spacing-element-16);
293
- height: 48px;
294
- }
295
- .sdds-btn.sdds-btn-md.sdds-btn-only-icon {
296
- padding: 13px;
297
- }
298
- .sdds-btn.sdds-btn-md:focus {
299
- outline: 2px solid var(--sdds-blue-400);
300
- outline-offset: -2px;
301
- }
302
- .sdds-btn.sdds-btn-md span.sdds-btn-text + .sdds-btn-icon {
303
- margin: unset;
304
- margin-left: var(--sdds-spacing-element-20);
305
- }
306
- .sdds-btn.sdds-btn-md.sdds-btn-fullbleed span.sdds-btn-text + .sdds-btn-icon {
307
- margin-left: var(--sdds-spacing-element-16);
308
- }
309
- .sdds-btn.sdds-btn-lg {
310
- padding: var(--sdds-spacing-element-20);
311
- height: 56px;
312
- }
313
- .sdds-btn.sdds-btn-lg.sdds-btn-only-icon {
314
- padding: 17px;
315
- }
316
- .sdds-btn.sdds-btn-lg:focus {
317
- outline: 2px solid var(--sdds-blue-400);
318
- outline-offset: -2px;
319
- }
320
- .sdds-btn.sdds-btn-lg span.sdds-btn-text + .sdds-btn-icon {
321
- margin: unset;
322
- margin-left: 28px;
323
- }
324
- .sdds-btn.sdds-btn-lg.sdds-btn-fullbleed span.sdds-btn-text + .sdds-btn-icon {
325
- margin-left: var(--sdds-spacing-element-16);
326
- }
327
- .sdds-btn.sdds-btn-fullbleed {
328
- width: inherit;
329
- display: flex;
330
- justify-content: center;
331
- }
332
- .sdds-btn.sdds-btn-fullbleed .sdds-btn-icon, .sdds-btn.sdds-btn-fullbleed.sdds-btn-icon {
333
- margin-left: var(--sdds-spacing-element-8);
334
- }
335
- .sdds-btn span.sdds-btn-text {
336
- align-self: baseline;
337
- }
338
- .sdds-btn.sdds-btn-primary {
339
- background: var(--sdds-btn-primary-background);
340
- border-color: var(--sdds-btn-primary-border-color);
341
- color: var(--sdds-btn-primary-color);
342
- outline-color: var(--sdds-btn-primary-outline-color);
343
- }
344
- .sdds-btn.sdds-btn-primary .sdds-btn-icon {
345
- fill: var(--sdds-btn-icon-primary-fill);
346
- color: var(--sdds-btn-icon-primary-fill);
347
- fill: var(--sdds-btn-icon-primary-color);
348
- color: var(--sdds-btn-icon-primary-color);
349
- font-size: 16px;
350
- }
351
- .sdds-btn.sdds-btn-primary:hover {
352
- background: var(--sdds-btn-primary-background-hover);
353
- border-color: var(--sdds-btn-primary-border-color-hover);
354
- color: var(--sdds-btn-primary-color-hover);
355
- outline-color: var(--sdds-btn-primary-outline-color-hover);
356
- }
357
- .sdds-btn.sdds-btn-primary:hover .sdds-btn-icon {
358
- fill: var(--sdds-btn-icon-primary-fill-hover);
359
- color: var(--sdds-btn-icon-primary-fill-hover);
360
- fill: var(--sdds-btn-icon-primary-color-hover);
361
- color: var(--sdds-btn-icon-primary-color-hover);
362
- }
363
- .sdds-btn.sdds-btn-primary:focus {
364
- background: var(--sdds-btn-primary-background-focus);
365
- border-color: var(--sdds-btn-primary-border-color-focus);
366
- color: var(--sdds-btn-primary-color-focus);
367
- outline-color: var(--sdds-btn-primary-outline-color-focus);
368
- }
369
- .sdds-btn.sdds-btn-primary:focus .sdds-btn-icon {
370
- fill: var(--sdds-btn-icon-primary-fill-focus);
371
- color: var(--sdds-btn-icon-primary-fill-focus);
372
- fill: var(--sdds-btn-icon-primary-color-focus);
373
- color: var(--sdds-btn-icon-primary-color-focus);
374
- }
375
- .sdds-btn.sdds-btn-primary:active, .sdds-btn.sdds-btn-primary.active {
376
- background: var(--sdds-btn-primary-background-active);
377
- border-color: var(--sdds-btn-primary-border-color-active);
378
- color: var(--sdds-btn-primary-color-active);
379
- outline-color: var(--sdds-btn-primary-outline-color-active);
380
- }
381
- .sdds-btn.sdds-btn-primary.disabled, .sdds-btn.sdds-btn-primary:disabled {
382
- cursor: not-allowed;
383
- background: var(--sdds-btn-primary-background-disabled);
384
- cursor: not-allowed;
385
- border-color: var(--sdds-btn-primary-border-color-disabled);
386
- cursor: not-allowed;
387
- color: var(--sdds-btn-primary-color-disabled);
388
- cursor: not-allowed;
389
- outline-color: var(--sdds-btn-primary-outline-color-disabled);
390
- }
391
- .sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
392
- color: var(--sdds-grey-300);
393
- }
394
- .sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
395
- color: var(--sdds-grey-300);
396
- }
397
- .sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
398
- color: var(--sdds-grey-300);
399
- }
400
- .sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
401
- color: var(--sdds-grey-300);
402
- }
403
- .sdds-btn.sdds-btn-secondary {
404
- background: var(--sdds-btn-secondary-background);
405
- border-color: var(--sdds-btn-secondary-border-color);
406
- color: var(--sdds-btn-secondary-color);
407
- outline-color: var(--sdds-btn-secondary-outline-color);
408
- }
409
- .sdds-btn.sdds-btn-secondary .sdds-btn-icon {
410
- fill: var(--sdds-btn-icon-secondary-fill);
411
- color: var(--sdds-btn-icon-secondary-fill);
412
- fill: var(--sdds-btn-icon-secondary-color);
413
- color: var(--sdds-btn-icon-secondary-color);
414
- font-size: 16px;
415
- }
416
- .sdds-btn.sdds-btn-secondary:hover {
417
- background: var(--sdds-btn-secondary-background-hover);
418
- border-color: var(--sdds-btn-secondary-border-color-hover);
419
- color: var(--sdds-btn-secondary-color-hover);
420
- outline-color: var(--sdds-btn-secondary-outline-color-hover);
421
- }
422
- .sdds-btn.sdds-btn-secondary:hover .sdds-btn-icon {
423
- fill: var(--sdds-btn-icon-secondary-fill-hover);
424
- color: var(--sdds-btn-icon-secondary-fill-hover);
425
- fill: var(--sdds-btn-icon-secondary-color-hover);
426
- color: var(--sdds-btn-icon-secondary-color-hover);
427
- }
428
- .sdds-btn.sdds-btn-secondary:focus {
429
- background: var(--sdds-btn-secondary-background-focus);
430
- border-color: var(--sdds-btn-secondary-border-color-focus);
431
- color: var(--sdds-btn-secondary-color-focus);
432
- outline-color: var(--sdds-btn-secondary-outline-color-focus);
433
- }
434
- .sdds-btn.sdds-btn-secondary:focus .sdds-btn-icon {
435
- fill: var(--sdds-btn-icon-secondary-fill-focus);
436
- color: var(--sdds-btn-icon-secondary-fill-focus);
437
- fill: var(--sdds-btn-icon-secondary-color-focus);
438
- color: var(--sdds-btn-icon-secondary-color-focus);
439
- }
440
- .sdds-btn.sdds-btn-secondary:active, .sdds-btn.sdds-btn-secondary.active {
441
- background: var(--sdds-btn-secondary-background-active);
442
- border-color: var(--sdds-btn-secondary-border-color-active);
443
- color: var(--sdds-btn-secondary-color-active);
444
- outline-color: var(--sdds-btn-secondary-outline-color-active);
445
- }
446
- .sdds-btn.sdds-btn-secondary.disabled, .sdds-btn.sdds-btn-secondary:disabled {
447
- cursor: not-allowed;
448
- background: var(--sdds-btn-secondary-background-disabled);
449
- cursor: not-allowed;
450
- border-color: var(--sdds-btn-secondary-border-color-disabled);
451
- cursor: not-allowed;
452
- color: var(--sdds-btn-secondary-color-disabled);
453
- cursor: not-allowed;
454
- outline-color: var(--sdds-btn-secondary-outline-color-disabled);
455
- }
456
- .sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
457
- color: var(--sdds-grey-300);
458
- }
459
- .sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
460
- color: var(--sdds-grey-300);
461
- }
462
- .sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
463
- color: var(--sdds-grey-300);
464
- }
465
- .sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
466
- color: var(--sdds-grey-300);
467
- }
468
- .sdds-btn.sdds-btn-ghost {
469
- background: var(--sdds-btn-ghost-background);
470
- border-color: var(--sdds-btn-ghost-border-color);
471
- color: var(--sdds-btn-ghost-color);
472
- outline-color: var(--sdds-btn-ghost-outline-color);
473
- }
474
- .sdds-btn.sdds-btn-ghost .sdds-btn-icon {
475
- fill: var(--sdds-btn-icon-ghost-fill);
476
- color: var(--sdds-btn-icon-ghost-fill);
477
- fill: var(--sdds-btn-icon-ghost-color);
478
- color: var(--sdds-btn-icon-ghost-color);
479
- font-size: 16px;
480
- }
481
- .sdds-btn.sdds-btn-ghost:hover {
482
- background: var(--sdds-btn-ghost-background-hover);
483
- border-color: var(--sdds-btn-ghost-border-color-hover);
484
- color: var(--sdds-btn-ghost-color-hover);
485
- outline-color: var(--sdds-btn-ghost-outline-color-hover);
486
- }
487
- .sdds-btn.sdds-btn-ghost:hover .sdds-btn-icon {
488
- fill: var(--sdds-btn-icon-ghost-fill-hover);
489
- color: var(--sdds-btn-icon-ghost-fill-hover);
490
- fill: var(--sdds-btn-icon-ghost-color-hover);
491
- color: var(--sdds-btn-icon-ghost-color-hover);
492
- }
493
- .sdds-btn.sdds-btn-ghost:focus {
494
- background: var(--sdds-btn-ghost-background-focus);
495
- border-color: var(--sdds-btn-ghost-border-color-focus);
496
- color: var(--sdds-btn-ghost-color-focus);
497
- outline-color: var(--sdds-btn-ghost-outline-color-focus);
498
- }
499
- .sdds-btn.sdds-btn-ghost:focus .sdds-btn-icon {
500
- fill: var(--sdds-btn-icon-ghost-fill-focus);
501
- color: var(--sdds-btn-icon-ghost-fill-focus);
502
- fill: var(--sdds-btn-icon-ghost-color-focus);
503
- color: var(--sdds-btn-icon-ghost-color-focus);
504
- }
505
- .sdds-btn.sdds-btn-ghost:active, .sdds-btn.sdds-btn-ghost.active {
506
- background: var(--sdds-btn-ghost-background-active);
507
- border-color: var(--sdds-btn-ghost-border-color-active);
508
- color: var(--sdds-btn-ghost-color-active);
509
- outline-color: var(--sdds-btn-ghost-outline-color-active);
510
- }
511
- .sdds-btn.sdds-btn-ghost.disabled, .sdds-btn.sdds-btn-ghost:disabled {
512
- cursor: not-allowed;
513
- background: var(--sdds-btn-ghost-background-disabled);
514
- cursor: not-allowed;
515
- border-color: var(--sdds-btn-ghost-border-color-disabled);
516
- cursor: not-allowed;
517
- color: var(--sdds-btn-ghost-color-disabled);
518
- cursor: not-allowed;
519
- outline-color: var(--sdds-btn-ghost-outline-color-disabled);
520
- }
521
- .sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
522
- color: var(--sdds-grey-300);
523
- }
524
- .sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
525
- color: var(--sdds-grey-300);
526
- }
527
- .sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
528
- color: var(--sdds-grey-300);
529
- }
530
- .sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
531
- color: var(--sdds-grey-300);
532
- }
533
- .sdds-btn.sdds-btn-danger {
534
- background: var(--sdds-btn-danger-background);
535
- border-color: var(--sdds-btn-danger-border-color);
536
- color: var(--sdds-btn-danger-color);
537
- outline-color: var(--sdds-btn-danger-outline-color);
538
- }
539
- .sdds-btn.sdds-btn-danger .sdds-btn-icon {
540
- fill: var(--sdds-btn-icon-danger-fill);
541
- color: var(--sdds-btn-icon-danger-fill);
542
- fill: var(--sdds-btn-icon-danger-color);
543
- color: var(--sdds-btn-icon-danger-color);
544
- font-size: 16px;
545
- }
546
- .sdds-btn.sdds-btn-danger:hover {
547
- background: var(--sdds-btn-danger-background-hover);
548
- border-color: var(--sdds-btn-danger-border-color-hover);
549
- color: var(--sdds-btn-danger-color-hover);
550
- outline-color: var(--sdds-btn-danger-outline-color-hover);
551
- }
552
- .sdds-btn.sdds-btn-danger:hover .sdds-btn-icon {
553
- fill: var(--sdds-btn-icon-danger-fill-hover);
554
- color: var(--sdds-btn-icon-danger-fill-hover);
555
- fill: var(--sdds-btn-icon-danger-color-hover);
556
- color: var(--sdds-btn-icon-danger-color-hover);
557
- }
558
- .sdds-btn.sdds-btn-danger:focus {
559
- background: var(--sdds-btn-danger-background-focus);
560
- border-color: var(--sdds-btn-danger-border-color-focus);
561
- color: var(--sdds-btn-danger-color-focus);
562
- outline-color: var(--sdds-btn-danger-outline-color-focus);
563
- }
564
- .sdds-btn.sdds-btn-danger:focus .sdds-btn-icon {
565
- fill: var(--sdds-btn-icon-danger-fill-focus);
566
- color: var(--sdds-btn-icon-danger-fill-focus);
567
- fill: var(--sdds-btn-icon-danger-color-focus);
568
- color: var(--sdds-btn-icon-danger-color-focus);
569
- }
570
- .sdds-btn.sdds-btn-danger:active, .sdds-btn.sdds-btn-danger.active {
571
- background: var(--sdds-btn-danger-background-active);
572
- border-color: var(--sdds-btn-danger-border-color-active);
573
- color: var(--sdds-btn-danger-color-active);
574
- outline-color: var(--sdds-btn-danger-outline-color-active);
575
- }
576
- .sdds-btn.sdds-btn-danger.disabled, .sdds-btn.sdds-btn-danger:disabled {
577
- cursor: not-allowed;
578
- background: var(--sdds-btn-danger-background-disabled);
579
- cursor: not-allowed;
580
- border-color: var(--sdds-btn-danger-border-color-disabled);
581
- cursor: not-allowed;
582
- color: var(--sdds-btn-danger-color-disabled);
583
- cursor: not-allowed;
584
- outline-color: var(--sdds-btn-danger-outline-color-disabled);
585
- }
586
- .sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
587
- color: var(--sdds-grey-300);
588
- }
589
- .sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
590
- color: var(--sdds-grey-300);
591
- }
592
- .sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
593
- color: var(--sdds-grey-300);
594
- }
595
- .sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon, .sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
596
- color: var(--sdds-grey-300);
597
- }
598
-
599
- i.sdds-btn-icon[slot=icon] {
600
- line-height: 1;
601
- }
602
-
603
- :host(sdds-button) {
604
- display: flex;
605
- align-items: center;
606
- }
607
- :host(sdds-button) ::slotted([slot=icon]) {
608
- width: var(--sdds-spacing-element-20);
609
- height: var(--sdds-spacing-element-20);
610
- }
611
- :host(sdds-button) .sdds-btn-sm ::slotted([slot=icon]) {
612
- width: var(--sdds-spacing-element-16);
613
- height: var(--sdds-spacing-element-16);
614
- }
615
-
616
- :host(sdds-button[fullbleed]) {
617
- width: inherit;
618
- justify-content: center;
619
- }
620
-
621
- :host(sdds-button[onlyIcon]) .sdds-btn-sm {
622
- padding: 11px;
623
- }
624
- :host(sdds-button[onlyIcon]) .sdds-btn-md {
625
- padding: 13px;
626
- }
627
- :host(sdds-button[onlyIcon]) .sdds-btn-lg {
628
- padding: 17px;
629
- }
630
-
631
- :host(sdds-button:not([onlyIcon])) {
632
- display: flex;
633
- align-items: center;
634
- }
635
- :host(sdds-button:not([onlyIcon])) .sdds-btn-sm ::slotted([slot=icon]) {
636
- margin-left: var(--sdds-spacing-element-24);
637
- width: var(--sdds-spacing-element-16);
638
- height: var(--sdds-spacing-element-16);
639
- }
640
- :host(sdds-button:not([onlyIcon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]) {
641
- margin-left: var(--sdds-spacing-element-12);
642
- }
643
- :host(sdds-button:not([onlyIcon])) .sdds-btn-md ::slotted([slot=icon]) {
644
- margin-left: var(--sdds-spacing-element-20);
645
- width: var(--sdds-spacing-element-20);
646
- height: var(--sdds-spacing-element-20);
647
- }
648
- :host(sdds-button:not([onlyIcon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]) {
649
- margin-left: var(--sdds-spacing-element-16);
650
- }
651
- :host(sdds-button:not([onlyIcon])) .sdds-btn-lg ::slotted([slot=icon]) {
652
- margin-left: 28px;
653
- width: var(--sdds-spacing-element-20);
654
- height: var(--sdds-spacing-element-20);
655
- }
656
- :host(sdds-button:not([onlyIcon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]) {
657
- margin-left: var(--sdds-spacing-element-16);
658
- }
package/dist/collection/components/data-table/table/table.css DELETED
@@ -1,15 +0,0 @@
1
- :host,
2
- .sdds-table {
3
- border-collapse: collapse;
4
- display: table;
5
- box-sizing: border-box;
6
- }
7
- :host *,
8
- .sdds-table * {
9
- box-sizing: border-box;
10
- }
11
-
12
- :host(.sdds-table--responsive),
13
- .sdds-table--responsive {
14
- width: 100%;
15
- }