@ebay/skin 17.5.0 → 18.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (469) hide show
  1. package/.github/workflows/pages-html-proofer.yml +1 -1
  2. package/.prettierignore +0 -1
  3. package/.storybook/main.js +4 -11
  4. package/.storybook/preview.js +1 -1
  5. package/.stylelintrc +16 -24
  6. package/CHANGELOG.md +40 -0
  7. package/CONTRIBUTING.md +1 -1
  8. package/bundles.browser.json +1 -0
  9. package/bundles.css +1 -0
  10. package/bundles.js +1 -0
  11. package/bundles.mjs +1 -0
  12. package/chart-legend.browser.json +1 -0
  13. package/chart-legend.css +1 -0
  14. package/chart-legend.js +1 -0
  15. package/chart-legend.mjs +1 -0
  16. package/dist/alert-dialog/alert-dialog.css +84 -72
  17. package/dist/alert-dialog/alert-dialog.css.map +1 -0
  18. package/dist/avatar/avatar.css +81 -62
  19. package/dist/avatar/avatar.css.map +1 -0
  20. package/dist/badge/badge.css +16 -11
  21. package/dist/badge/badge.css.map +1 -0
  22. package/dist/breadcrumbs/breadcrumbs.css +87 -59
  23. package/dist/breadcrumbs/breadcrumbs.css.map +1 -0
  24. package/dist/bundles/skin-default.css +10073 -0
  25. package/dist/bundles/skin-default.css.map +1 -0
  26. package/dist/bundles/skin-full.css +10257 -0
  27. package/dist/bundles/skin-full.css.map +1 -0
  28. package/dist/bundles/skin-headless.css +9685 -0
  29. package/dist/bundles/skin-headless.css.map +1 -0
  30. package/dist/button/button.css +590 -415
  31. package/dist/button/button.css.map +1 -0
  32. package/dist/calendar/calendar.css +148 -102
  33. package/dist/calendar/calendar.css.map +1 -0
  34. package/dist/carousel/carousel.css +233 -212
  35. package/dist/carousel/carousel.css.map +1 -0
  36. package/dist/chart-legend/chart-legend.css +77 -0
  37. package/dist/chart-legend/chart-legend.css.map +1 -0
  38. package/dist/checkbox/checkbox.css +77 -54
  39. package/dist/checkbox/checkbox.css.map +1 -0
  40. package/dist/chip/chip.css +41 -34
  41. package/dist/chip/chip.css.map +1 -0
  42. package/dist/chips-combobox/chips-combobox.css +77 -62
  43. package/dist/chips-combobox/chips-combobox.css.map +1 -0
  44. package/dist/combobox/combobox.css +246 -163
  45. package/dist/combobox/combobox.css.map +1 -0
  46. package/dist/confirm-dialog/confirm-dialog.css +86 -73
  47. package/dist/confirm-dialog/confirm-dialog.css.map +1 -0
  48. package/dist/cta-button/cta-button.css +96 -70
  49. package/dist/cta-button/cta-button.css.map +1 -0
  50. package/dist/date-textbox/date-textbox.css +24 -15
  51. package/dist/date-textbox/date-textbox.css.map +1 -0
  52. package/dist/details/details.css +34 -27
  53. package/dist/details/details.css.map +1 -0
  54. package/dist/donut-chart/donut-chart.css +91 -0
  55. package/dist/donut-chart/donut-chart.css.map +1 -0
  56. package/dist/drawer-dialog/drawer-dialog.css +133 -118
  57. package/dist/drawer-dialog/drawer-dialog.css.map +1 -0
  58. package/dist/education-notice/education-notice.css +62 -34
  59. package/dist/education-notice/education-notice.css.map +1 -0
  60. package/dist/eek/eek.css +97 -74
  61. package/dist/eek/eek.css.map +1 -0
  62. package/dist/field/field.css +87 -53
  63. package/dist/field/field.css.map +1 -0
  64. package/dist/filter-button/filter-button.css +115 -75
  65. package/dist/filter-button/filter-button.css.map +1 -0
  66. package/dist/filter-menu/filter-menu.css +176 -121
  67. package/dist/filter-menu/filter-menu.css.map +1 -0
  68. package/dist/filter-menu-button/filter-menu-button.css +307 -181
  69. package/dist/filter-menu-button/filter-menu-button.css.map +1 -0
  70. package/dist/flag/flag.css +528 -272
  71. package/dist/flag/flag.css.map +1 -0
  72. package/dist/floating-label/floating-label.css +100 -51
  73. package/dist/floating-label/floating-label.css.map +1 -0
  74. package/dist/fullscreen-dialog/fullscreen-dialog.css +112 -99
  75. package/dist/fullscreen-dialog/fullscreen-dialog.css.map +1 -0
  76. package/dist/global/global.css +32 -13
  77. package/dist/global/global.css.map +1 -0
  78. package/dist/icon/icon.css +56 -2943
  79. package/dist/icon/icon.css.map +1 -0
  80. package/dist/icon-button/icon-button.css +307 -212
  81. package/dist/icon-button/icon-button.css.map +1 -0
  82. package/dist/image-placeholder/image-placeholder.css +6 -4
  83. package/dist/image-placeholder/image-placeholder.css.map +1 -0
  84. package/dist/infotip/infotip.css +121 -92
  85. package/dist/infotip/infotip.css.map +1 -0
  86. package/dist/inline-notice/inline-notice.css +16 -9
  87. package/dist/inline-notice/inline-notice.css.map +1 -0
  88. package/dist/lightbox-dialog/lightbox-dialog.css +241 -185
  89. package/dist/lightbox-dialog/lightbox-dialog.css.map +1 -0
  90. package/dist/link/link.css +37 -19
  91. package/dist/link/link.css.map +1 -0
  92. package/dist/listbox/listbox.css +86 -58
  93. package/dist/listbox/listbox.css.map +1 -0
  94. package/dist/listbox-button/listbox-button.css +240 -134
  95. package/dist/listbox-button/listbox-button.css.map +1 -0
  96. package/dist/marketsans/marketsans.css +34 -12
  97. package/dist/marketsans/marketsans.css.map +1 -0
  98. package/dist/menu/menu.css +136 -99
  99. package/dist/menu/menu.css.map +1 -0
  100. package/dist/menu-button/menu-button.css +236 -157
  101. package/dist/menu-button/menu-button.css.map +1 -0
  102. package/dist/mixins/_typography-mixins.scss +136 -0
  103. package/dist/mixins/_utility-mixins.scss +62 -0
  104. package/dist/page-grid/page-grid.css +57 -46
  105. package/dist/page-grid/page-grid.css.map +1 -0
  106. package/dist/page-notice/page-notice.css +142 -85
  107. package/dist/page-notice/page-notice.css.map +1 -0
  108. package/dist/pagination/pagination.css +109 -80
  109. package/dist/pagination/pagination.css.map +1 -0
  110. package/dist/panel-dialog/panel-dialog.css +115 -98
  111. package/dist/panel-dialog/panel-dialog.css.map +1 -0
  112. package/dist/phone-input/phone-input.css +100 -88
  113. package/dist/phone-input/phone-input.css.map +1 -0
  114. package/dist/progress-bar/progress-bar.css +32 -15
  115. package/dist/progress-bar/progress-bar.css.map +1 -0
  116. package/dist/progress-bar-expressive/progress-bar-expressive.css +302 -203
  117. package/dist/progress-bar-expressive/progress-bar-expressive.css.map +1 -0
  118. package/dist/progress-spinner/progress-spinner.css +24 -20
  119. package/dist/progress-spinner/progress-spinner.css.map +1 -0
  120. package/dist/progress-stepper/progress-stepper.css +229 -117
  121. package/dist/progress-stepper/progress-stepper.css.map +1 -0
  122. package/dist/radio/radio.css +71 -52
  123. package/dist/radio/radio.css.map +1 -0
  124. package/dist/section-notice/section-notice.css +102 -72
  125. package/dist/section-notice/section-notice.css.map +1 -0
  126. package/dist/section-title/section-title.css +66 -52
  127. package/dist/section-title/section-title.css.map +1 -0
  128. package/dist/segmented-buttons/segmented-buttons.css +49 -38
  129. package/dist/segmented-buttons/segmented-buttons.css.map +1 -0
  130. package/dist/select/select.css +98 -62
  131. package/dist/select/select.css.map +1 -0
  132. package/dist/signal/signal.css +25 -16
  133. package/dist/signal/signal.css.map +1 -0
  134. package/dist/skeleton/skeleton.css +131 -108
  135. package/dist/skeleton/skeleton.css.map +1 -0
  136. package/dist/snackbar-dialog/snackbar-dialog.css +82 -52
  137. package/dist/snackbar-dialog/snackbar-dialog.css.map +1 -0
  138. package/dist/split-button/split-button.css +3 -1
  139. package/dist/split-button/split-button.css.map +1 -0
  140. package/dist/star-rating/star-rating.css +40 -19
  141. package/dist/star-rating/star-rating.css.map +1 -0
  142. package/dist/star-rating-select/star-rating-select.css +67 -39
  143. package/dist/star-rating-select/star-rating-select.css.map +1 -0
  144. package/dist/svg/icons.svg +21 -21
  145. package/dist/switch/switch.css +119 -78
  146. package/dist/switch/switch.css.map +1 -0
  147. package/dist/tabs/tabs.css +70 -51
  148. package/dist/tabs/tabs.css.map +1 -0
  149. package/dist/textbox/textbox.css +167 -112
  150. package/dist/textbox/textbox.css.map +1 -0
  151. package/dist/toast-dialog/toast-dialog.css +140 -90
  152. package/dist/toast-dialog/toast-dialog.css.map +1 -0
  153. package/dist/toggle-button/toggle-button.css +154 -114
  154. package/dist/toggle-button/toggle-button.css.map +1 -0
  155. package/dist/toggle-button-group/toggle-button-group.css +610 -60
  156. package/dist/toggle-button-group/toggle-button-group.css.map +1 -0
  157. package/dist/tokens/evo-core.css +139 -67
  158. package/dist/tokens/evo-dark.css +57 -62
  159. package/dist/tokens/evo-light.css +76 -76
  160. package/dist/tooltip/tooltip.css +117 -84
  161. package/dist/tooltip/tooltip.css.map +1 -0
  162. package/dist/tourtip/tourtip.css +141 -107
  163. package/dist/tourtip/tourtip.css.map +1 -0
  164. package/dist/typography/typography.css +86 -59
  165. package/dist/typography/typography.css.map +1 -0
  166. package/dist/utility/utility.css +75 -72
  167. package/dist/utility/utility.css.map +1 -0
  168. package/dist/variables/_variables.scss +64 -0
  169. package/dist/video/video.css +46 -34
  170. package/dist/video/video.css.map +1 -0
  171. package/donut-chart.browser.json +1 -0
  172. package/donut-chart.css +1 -0
  173. package/donut-chart.js +1 -0
  174. package/donut-chart.mjs +1 -0
  175. package/gh.browser.json +4 -4
  176. package/index.browser.json +3 -0
  177. package/index.css +3 -0
  178. package/index.js +3 -0
  179. package/index.mjs +3 -0
  180. package/lint.log +3 -3
  181. package/package.json +74 -55
  182. package/postcss.config.js +17 -0
  183. package/scripts/README.md +1 -1
  184. package/scripts/generate-bundle.js +13 -12
  185. package/scripts/generate-images.js +34 -23
  186. package/src/{less/alert-dialog/alert-dialog.less → sass/alert-dialog/alert-dialog.scss} +14 -12
  187. package/src/sass/avatar/avatar.scss +134 -0
  188. package/src/sass/badge/badge.scss +21 -0
  189. package/src/{less/breadcrumbs/breadcrumbs.less → sass/breadcrumbs/breadcrumbs.scss} +25 -14
  190. package/src/{less → sass}/breadcrumbs/stories/button-cascade.stories.js +12 -12
  191. package/src/{less → sass}/breadcrumbs/stories/button-overflow.stories.js +15 -15
  192. package/src/{less → sass}/breadcrumbs/stories/buttons.stories.js +5 -5
  193. package/src/{less → sass}/breadcrumbs/stories/link-cascade.stories.js +12 -12
  194. package/src/{less → sass}/breadcrumbs/stories/link-overflow.stories.js +15 -15
  195. package/src/{less → sass}/breadcrumbs/stories/links.stories.js +5 -5
  196. package/src/sass/bundles/skin-default.scss +9 -0
  197. package/src/sass/bundles/skin-full.scss +10 -0
  198. package/src/sass/bundles/skin-headless.scss +72 -0
  199. package/src/{less/button/button.less → sass/button/button.scss} +185 -71
  200. package/src/{less → sass}/button/stories/button/base.stories.js +5 -5
  201. package/src/{less → sass}/button/stories/button/borderless.stories.js +4 -4
  202. package/src/{less → sass}/button/stories/button/cascade.stories.js +3 -3
  203. package/src/{less → sass}/button/stories/button/dimensions.stories.js +2 -2
  204. package/src/{less → sass}/button/stories/button/primary.stories.js +4 -4
  205. package/src/{less → sass}/button/stories/button/secondary.stories.js +4 -4
  206. package/src/{less → sass}/button/stories/button/tertiary.stories.js +4 -4
  207. package/src/{less → sass}/button/stories/button/text-spacing.stories.js +1 -1
  208. package/src/{less → sass}/button/stories/destructive-button/primary.stories.js +3 -3
  209. package/src/{less → sass}/button/stories/destructive-button/secondary.stories.js +3 -3
  210. package/src/{less → sass}/button/stories/destructive-button/tertiary.stories.js +3 -3
  211. package/src/{less → sass}/button/stories/fake-button/base.stories.js +2 -2
  212. package/src/{less → sass}/button/stories/fake-button/cascade.stories.js +3 -3
  213. package/src/{less → sass}/button/stories/fake-button/dimensions.stories.js +1 -1
  214. package/src/{less → sass}/button/stories/fake-button/primary.stories.js +4 -4
  215. package/src/{less → sass}/button/stories/fake-button/secondary.stories.js +4 -4
  216. package/src/{less → sass}/button/stories/fake-button/text-spacing.stories.js +1 -1
  217. package/src/{less/calendar/calendar.less → sass/calendar/calendar.scss} +43 -18
  218. package/src/{less → sass}/calendar/stories/calendar.stories.js +6 -6
  219. package/src/{less/carousel/carousel.less → sass/carousel/carousel.scss} +68 -58
  220. package/src/{less → sass}/carousel/stories/carousel.stories.js +25 -25
  221. package/src/sass/chart-legend/chart-legend.scss +74 -0
  222. package/src/sass/chart-legend/stories/chart-legend.stories.js +65 -0
  223. package/src/{less/checkbox/checkbox.less → sass/checkbox/checkbox.scss} +25 -24
  224. package/src/{less/chip/chip.less → sass/chip/chip.scss} +1 -1
  225. package/src/{less → sass}/chip/stories/interactive-chip.stories.js +17 -17
  226. package/src/{less/chips-combobox/chips-combobox.less → sass/chips-combobox/chips-combobox.scss} +7 -7
  227. package/src/{less → sass}/chips-combobox/stories/chips-combobox.stories.js +38 -38
  228. package/src/{less → sass}/chips-combobox/stories/rtl-chips-combobox.stories.js +34 -34
  229. package/src/{less/combobox/combobox.less → sass/combobox/combobox.scss} +78 -37
  230. package/src/{less → sass}/combobox/stories/combobox.stories.js +11 -11
  231. package/src/{less/confirm-dialog/confirm-dialog.less → sass/confirm-dialog/confirm-dialog.scss} +14 -12
  232. package/src/sass/cta-button/cta-button.scss +105 -0
  233. package/src/{less → sass}/cta-button/stories/cascade.stories.js +3 -3
  234. package/src/{less → sass}/cta-button/stories/cta-button.stories.js +2 -2
  235. package/src/{less → sass}/cta-button/stories/dimensions.stories.js +2 -2
  236. package/src/{less/date-textbox/date-textbox.less → sass/date-textbox/date-textbox.scss} +10 -6
  237. package/src/{less → sass}/date-textbox/stories/date-textbox.stories.js +23 -7
  238. package/src/{less/details/details.less → sass/details/details.scss} +9 -5
  239. package/src/{less → sass}/details/stories/cascade.stories.js +3 -3
  240. package/src/{less → sass}/details/stories/details.stories.js +5 -5
  241. package/src/sass/donut-chart/donut-chart.scss +98 -0
  242. package/src/sass/donut-chart/stories/donut-chart.stories.js +39 -0
  243. package/src/{less/drawer-dialog/drawer-dialog.less → sass/drawer-dialog/drawer-dialog.scss} +24 -21
  244. package/src/{less → sass}/drawer-dialog/stories/drawer-dialog.stories.js +8 -8
  245. package/src/{less/education-notice/education-notice.less → sass/education-notice/education-notice.scss} +26 -8
  246. package/src/{less → sass}/education-notice/stories/base.stories.js +13 -13
  247. package/src/{less/eek/eek.less → sass/eek/eek.scss} +43 -42
  248. package/src/{less/field/field.less → sass/field/field.scss} +23 -13
  249. package/src/{less → sass}/field/stories/stacked.stories.js +8 -8
  250. package/src/{less → sass}/field/stories/unstacked.stories.js +4 -4
  251. package/src/sass/filter-button/filter-button.scss +112 -0
  252. package/src/{less/filter-menu/filter-menu.less → sass/filter-menu/filter-menu.scss} +30 -19
  253. package/src/{less → sass}/filter-menu/stories/filter-menu.stories.js +24 -24
  254. package/src/{less/filter-menu-button/filter-menu-button.less → sass/filter-menu-button/filter-menu-button.scss} +112 -45
  255. package/src/{less → sass}/filter-menu-button/stories/filter-menu-button.stories.js +124 -124
  256. package/src/{less/floating-label/floating-label.less → sass/floating-label/floating-label.scss} +31 -15
  257. package/src/{less → sass}/floating-label/stories/floating-label.stories.js +15 -15
  258. package/src/{less/fullscreen-dialog/fullscreen-dialog.less → sass/fullscreen-dialog/fullscreen-dialog.scss} +15 -11
  259. package/src/{less → sass}/fullscreen-dialog/stories/fullscreen-dialog.stories.js +5 -5
  260. package/src/sass/gh/_gh-mixins.scss +197 -0
  261. package/src/sass/global/global.scss +50 -0
  262. package/src/{less → sass}/global/stories/global.stories.js +12 -12
  263. package/src/sass/icon/icon.scss +92 -0
  264. package/src/{less → sass}/icon/stories/icon.stories.js +5 -5
  265. package/src/{less/icon-button/icon-button.less → sass/icon-button/icon-button.scss} +88 -35
  266. package/src/sass/icon-button/stories/alignment.stories.js +28 -0
  267. package/src/{less → sass}/icon-button/stories/buttons.stories.js +36 -36
  268. package/src/{less → sass}/icon-button/stories/links.stories.js +36 -36
  269. package/src/sass/image-placeholder/image-placeholder.scss +10 -0
  270. package/src/sass/infotip/infotip.scss +136 -0
  271. package/src/{less → sass}/infotip/stories/infotip.stories.js +12 -12
  272. package/src/{less/inline-notice/inline-notice.less → sass/inline-notice/inline-notice.scss} +3 -3
  273. package/src/{less → sass}/inline-notice/stories/inline.stories.js +11 -11
  274. package/src/{less/lightbox-dialog/lightbox-dialog.less → sass/lightbox-dialog/lightbox-dialog.scss} +62 -20
  275. package/src/{less → sass}/lightbox-dialog/stories/lightbox-dialog.stories.js +40 -33
  276. package/src/sass/link/link.scss +61 -0
  277. package/src/{less/listbox/listbox.less → sass/listbox/listbox.scss} +20 -14
  278. package/src/{less → sass}/listbox/stories/cascade.stories.js +9 -9
  279. package/src/{less → sass}/listbox/stories/listbox.stories.js +18 -18
  280. package/src/sass/listbox-button/listbox-button.scss +233 -0
  281. package/src/{less → sass}/listbox-button/stories/base.stories.js +48 -48
  282. package/src/{less → sass}/listbox-button/stories/cascade.stories.js +15 -15
  283. package/src/{less → sass}/listbox-button/stories/dimensions.stories.js +5 -5
  284. package/src/{less → sass}/listbox-button/stories/error/error.base.stories.js +38 -38
  285. package/src/{less → sass}/listbox-button/stories/error/error.cascade.stories.js +15 -15
  286. package/src/{less → sass}/listbox-button/stories/error/error.dimensions.stories.js +5 -5
  287. package/src/{less → sass}/listbox-button/stories/error/error.form.stories.js +10 -10
  288. package/src/{less → sass}/listbox-button/stories/form.stories.js +15 -15
  289. package/src/{less → sass}/listbox-button/stories/subtitle.stories.js +38 -38
  290. package/src/sass/marketsans/marketsans.scss +46 -0
  291. package/src/{less/menu/menu.less → sass/menu/menu.scss} +22 -12
  292. package/src/{less → sass}/menu/stories/fake-menu.stories.js +4 -4
  293. package/src/{less → sass}/menu/stories/multiSelect.stories.js +9 -9
  294. package/src/{less/menu-button/menu-button.less → sass/menu-button/menu-button.scss} +60 -30
  295. package/src/{less → sass}/menu-button/stories/base.stories.js +30 -30
  296. package/src/{less → sass}/menu-button/stories/cascade.stories.js +6 -6
  297. package/src/{less → sass}/menu-button/stories/dimensions.stories.js +1 -1
  298. package/src/{less → sass}/menu-button/stories/fake-menu-button.stories.js +6 -6
  299. package/src/sass/mixins/private/_bubble-mixins.scss +168 -0
  300. package/src/sass/mixins/private/_button-mixins.scss +95 -0
  301. package/src/{less/mixins/private/dialog-mixins.less → sass/mixins/private/_dialog-mixins.scss} +25 -22
  302. package/src/sass/mixins/private/_dropdown-mixins.scss +60 -0
  303. package/src/{less/mixins/private/filter-button-mixins.less → sass/mixins/private/_filter-button-mixins.scss} +6 -2
  304. package/src/sass/mixins/private/_filter-menu-mixins.scss +45 -0
  305. package/src/sass/mixins/private/_generated-icon-mixins.scss +517 -0
  306. package/src/sass/mixins/private/_icon-mixins.scss +12 -0
  307. package/src/sass/mixins/private/_listbox-mixins.scss +48 -0
  308. package/src/sass/mixins/private/_menu-mixins.scss +30 -0
  309. package/src/{less/mixins/private/selection-list-mixins.less → sass/mixins/private/_selection-list-mixins.scss} +3 -3
  310. package/src/sass/mixins/private/_token-mixins.scss +124 -0
  311. package/src/sass/mixins/public/_typography-mixins.scss +136 -0
  312. package/src/sass/mixins/public/_utility-mixins.scss +62 -0
  313. package/src/{less/page-grid/page-grid.less → sass/page-grid/page-grid.scss} +22 -22
  314. package/src/{less/page-notice/page-notice.less → sass/page-notice/page-notice.scss} +66 -26
  315. package/src/{less → sass}/page-notice/stories/page-notice.stories.js +14 -14
  316. package/src/{less → sass}/page-notice/stories/test.stories.js +7 -7
  317. package/src/{less/pagination/pagination.less → sass/pagination/pagination.scss} +28 -14
  318. package/src/{less → sass}/pagination/stories/button-cascade.stories.js +6 -6
  319. package/src/{less → sass}/pagination/stories/buttons.stories.js +4 -4
  320. package/src/{less → sass}/pagination/stories/link-cascade.stories.js +6 -6
  321. package/src/{less → sass}/pagination/stories/links.stories.js +4 -4
  322. package/src/{less → sass}/pagination/stories/overflow.stories.js +20 -20
  323. package/src/{less/panel-dialog/panel-dialog.less → sass/panel-dialog/panel-dialog.scss} +19 -16
  324. package/src/{less → sass}/panel-dialog/stories/panel-dialog.stories.js +7 -7
  325. package/src/{less/phone-input/phone-input.less → sass/phone-input/phone-input.scss} +47 -56
  326. package/src/{less → sass}/phone-input/stories/phone-input.stories.js +56 -56
  327. package/src/sass/progress-bar/progress-bar.scss +51 -0
  328. package/src/{less/progress-bar-expressive/progress-bar-expressive.less → sass/progress-bar-expressive/progress-bar-expressive.scss} +19 -20
  329. package/src/{less/progress-spinner/progress-spinner.less → sass/progress-spinner/progress-spinner.scss} +3 -3
  330. package/src/{less → sass}/progress-spinner/stories/progress-spinner.stories.js +4 -4
  331. package/src/{less/progress-stepper/progress-stepper.less → sass/progress-stepper/progress-stepper.scss} +55 -30
  332. package/src/{less/radio/radio.less → sass/radio/radio.scss} +25 -24
  333. package/src/{less/section-notice/section-notice.less → sass/section-notice/section-notice.scss} +42 -18
  334. package/src/{less → sass}/section-notice/stories/icon-16.stories.js +14 -14
  335. package/src/{less → sass}/section-notice/stories/iconless.stories.js +4 -4
  336. package/src/{less → sass}/section-notice/stories/test.stories.js +4 -4
  337. package/src/{less/section-title/section-title.less → sass/section-title/section-title.scss} +15 -11
  338. package/src/{less → sass}/section-title/stories/rtl.stories.js +3 -3
  339. package/src/{less → sass}/section-title/stories/section-title.stories.js +4 -4
  340. package/src/{less/segmented-buttons/segmented-buttons.less → sass/segmented-buttons/segmented-buttons.scss} +8 -8
  341. package/src/{less → sass}/segmented-buttons/stories/segmented-buttons.stories.js +2 -2
  342. package/src/{less/select/select.less → sass/select/select.scss} +53 -18
  343. package/src/{less → sass}/select/stories/cascade.stories.js +3 -3
  344. package/src/{less → sass}/select/stories/default.stories.js +9 -9
  345. package/src/{less → sass}/select/stories/floating-label.stories.js +4 -4
  346. package/src/{less/signal/signal.less → sass/signal/signal.scss} +9 -6
  347. package/src/{less/skeleton/skeleton.less → sass/skeleton/skeleton.scss} +23 -20
  348. package/src/{less/snackbar-dialog/snackbar-dialog.less → sass/snackbar-dialog/snackbar-dialog.scss} +30 -11
  349. package/src/{less/split-button/split-button.less → sass/split-button/split-button.scss} +1 -1
  350. package/src/{less → sass}/split-button/stories/base.stories.js +13 -13
  351. package/src/{less → sass}/split-button/stories/rtl.stories.js +6 -6
  352. package/src/{less → sass}/split-button/stories/size.stories.js +2 -2
  353. package/src/{less/star-rating/star-rating.less → sass/star-rating/star-rating.scss} +14 -14
  354. package/src/{less/star-rating-select/star-rating-select.less → sass/star-rating-select/star-rating-select.scss} +16 -15
  355. package/src/{less/switch/switch.less → sass/switch/switch.scss} +48 -20
  356. package/src/{less/tabs/tabs.less → sass/tabs/tabs.scss} +17 -7
  357. package/src/{less → sass}/textbox/stories/icon.stories.js +34 -18
  358. package/src/{less → sass}/textbox/stories/rtl/icon.stories.js +27 -11
  359. package/src/sass/textbox/stories/rtl/textbox.stories.js +45 -0
  360. package/src/{less → sass}/textbox/stories/textbox.stories.js +24 -2
  361. package/src/sass/textbox/textbox.scss +238 -0
  362. package/src/{less/toast-dialog/toast-dialog.less → sass/toast-dialog/toast-dialog.scss} +67 -23
  363. package/src/{less → sass}/toggle-button/stories/gallery-layout.stories.js +3 -3
  364. package/src/{less → sass}/toggle-button/stories/list-layout.stories.js +3 -3
  365. package/src/{less/toggle-button/toggle-button.less → sass/toggle-button/toggle-button.scss} +6 -1
  366. package/src/sass/toggle-button-group/stories/gallery-layout-exceptions.stories.js +471 -0
  367. package/src/sass/toggle-button-group/stories/gallery-layout.stories.js +564 -0
  368. package/src/sass/toggle-button-group/stories/list-layout-exceptions.stories.js +507 -0
  369. package/src/sass/toggle-button-group/stories/list-layout.stories.js +638 -0
  370. package/src/sass/toggle-button-group/stories/minimal-layout-exceptions.stories.js +291 -0
  371. package/src/sass/toggle-button-group/stories/minimal-layout.stories.js +289 -0
  372. package/src/sass/toggle-button-group/toggle-button-group.scss +342 -0
  373. package/src/{less → sass}/tooltip/stories/pointer.stories.js +12 -12
  374. package/src/{less → sass}/tooltip/stories/tooltip.stories.js +3 -3
  375. package/src/sass/tooltip/tooltip.scss +118 -0
  376. package/src/{less → sass}/tourtip/stories/tourtip.stories.js +5 -5
  377. package/src/{less/tourtip/tourtip.less → sass/tourtip/tourtip.scss} +41 -33
  378. package/src/{less/typography/typography.less → sass/typography/typography.scss} +24 -21
  379. package/src/{less/utility/utility.less → sass/utility/utility.scss} +13 -13
  380. package/src/sass/variables/_variables.scss +64 -0
  381. package/src/{less/video/video.less → sass/video/video.scss} +3 -3
  382. package/src/svg/icons.svg +21 -21
  383. package/src/tokens/evo-core.css +139 -67
  384. package/src/tokens/evo-dark.css +57 -62
  385. package/src/tokens/evo-light.css +76 -76
  386. package/svg.svg +21 -21
  387. package/_cdn/skin/v17.5.0/skin-default.min.css +0 -76
  388. package/_cdn/skin/v17.5.0/skin-full.min.css +0 -160
  389. package/_cdn/skin/v17.5.0/skin-headless.min.css +0 -6
  390. package/dist/variables/variables.less +0 -70
  391. package/less[ds-4].less +0 -3
  392. package/src/less/avatar/avatar.less +0 -134
  393. package/src/less/badge/badge.less +0 -16
  394. package/src/less/bundles/skin-default.less +0 -3
  395. package/src/less/bundles/skin-full.less +0 -4
  396. package/src/less/bundles/skin-headless.less +0 -70
  397. package/src/less/cta-button/cta-button.less +0 -79
  398. package/src/less/filter-button/filter-button.less +0 -80
  399. package/src/less/global/global.less +0 -37
  400. package/src/less/icon/generated/icon.less +0 -2905
  401. package/src/less/icon/icon.less +0 -62
  402. package/src/less/icon-button/stories/alignment.stories.js +0 -28
  403. package/src/less/image-placeholder/image-placeholder.less +0 -9
  404. package/src/less/infotip/infotip.less +0 -126
  405. package/src/less/link/link.less +0 -44
  406. package/src/less/listbox-button/listbox-button.less +0 -184
  407. package/src/less/marketsans/marketsans.less +0 -45
  408. package/src/less/mixins/private/bubble-mixins.less +0 -166
  409. package/src/less/mixins/private/button-mixins.less +0 -95
  410. package/src/less/mixins/private/dropdown-mixins.less +0 -44
  411. package/src/less/mixins/private/filter-menu-mixins.less +0 -31
  412. package/src/less/mixins/private/generated-icon-mixins.less +0 -517
  413. package/src/less/mixins/private/icon-mixins.less +0 -17
  414. package/src/less/mixins/private/listbox-mixins.less +0 -35
  415. package/src/less/mixins/private/menu-mixins.less +0 -21
  416. package/src/less/mixins/private/token-mixins.less +0 -100
  417. package/src/less/progress-bar/progress-bar.less +0 -35
  418. package/src/less/textbox/stories/rtl/textbox.stories.js +0 -17
  419. package/src/less/textbox/textbox.less +0 -181
  420. package/src/less/toggle-button-group/stories/gallery-layout.stories.js +0 -657
  421. package/src/less/toggle-button-group/stories/list-layout.stories.js +0 -611
  422. package/src/less/toggle-button-group/stories/minimal-layout.stories.js +0 -341
  423. package/src/less/toggle-button-group/toggle-button-group.less +0 -111
  424. package/src/less/tooltip/tooltip.less +0 -109
  425. package/src/less/variables/variables.less +0 -70
  426. /package/src/{less → sass}/alert-dialog/stories/alert-dialog.stories.js +0 -0
  427. /package/src/{less → sass}/avatar/stories/avatar.stories.js +0 -0
  428. /package/src/{less → sass}/badge/stories/badge.stories.js +0 -0
  429. /package/src/{less → sass}/button/stories/destructive-button/borderless.stories.js +0 -0
  430. /package/src/{less → sass}/checkbox/stories/checked.stories.js +0 -0
  431. /package/src/{less → sass}/checkbox/stories/mixed.stories.js +0 -0
  432. /package/src/{less → sass}/checkbox/stories/unchecked.stories.js +0 -0
  433. /package/src/{less → sass}/chip/stories/static-chip.stories.js +0 -0
  434. /package/src/{less → sass}/confirm-dialog/stories/confirm-dialog.stories.js +0 -0
  435. /package/src/{less → sass}/field/stories/helper-texts-stacked.stories.js +0 -0
  436. /package/src/{less → sass}/filter-button/stories/button.stories.js +0 -0
  437. /package/src/{less → sass}/filter-button/stories/group.stories.js +0 -0
  438. /package/src/{less → sass}/filter-button/stories/link.stories.js +0 -0
  439. /package/src/{less/flag/flag.less → sass/flag/flag.scss} +0 -0
  440. /package/src/{less → sass}/flag/stories/flag.stories.js +0 -0
  441. /package/src/{less → sass}/gh/gh-mixins.less +0 -0
  442. /package/src/{less → sass}/image-placeholder/stories/image-placeholder.stories.js +0 -0
  443. /package/src/{less → sass}/link/stories/link.stories.js +0 -0
  444. /package/src/{less → sass}/menu/stories/misc.stories.js +0 -0
  445. /package/src/{less → sass}/mixins/public/typography-mixins.less +0 -0
  446. /package/src/{less → sass}/mixins/public/utility-mixins.less +0 -0
  447. /package/src/{less → sass}/progress-bar/stories/progress-bar.stories.js +0 -0
  448. /package/src/{less → sass}/progress-bar-expressive/stories/progress-bar-expressive.stories.js +0 -0
  449. /package/src/{less → sass}/progress-stepper/stories/progress-stepper.stories.js +0 -0
  450. /package/src/{less → sass}/radio/stories/checked.stories.js +0 -0
  451. /package/src/{less → sass}/radio/stories/unchecked.stories.js +0 -0
  452. /package/src/{less → sass}/signal/stories/signal.stories.js +0 -0
  453. /package/src/{less → sass}/skeleton/stories/base.stories.js +0 -0
  454. /package/src/{less → sass}/skeleton/stories/composite.stories.js +0 -0
  455. /package/src/{less → sass}/skeleton/stories/rtl.stories.js +0 -0
  456. /package/src/{less → sass}/snackbar-dialog/stories/base.stories.js +0 -0
  457. /package/src/{less → sass}/snackbar-dialog/stories/font-size.stories.js +0 -0
  458. /package/src/{less → sass}/snackbar-dialog/stories/rtl.stories.js +0 -0
  459. /package/src/{less → sass}/star-rating/stories/star-rating.stories.js +0 -0
  460. /package/src/{less → sass}/star-rating-select/stories/star-rating-select.stories.js +0 -0
  461. /package/src/{less → sass}/switch/stories/form.stories.js +0 -0
  462. /package/src/{less → sass}/switch/stories/script.stories.js +0 -0
  463. /package/src/{less → sass}/tabs/stories/fake-tabs/block.stories.js +0 -0
  464. /package/src/{less → sass}/tabs/stories/fake-tabs/inlineBlock.stories.js +0 -0
  465. /package/src/{less → sass}/tabs/stories/tabs/block.stories.js +0 -0
  466. /package/src/{less → sass}/tabs/stories/tabs/inlineBlock.stories.js +0 -0
  467. /package/src/{less → sass}/toast-dialog/stories/toast-dialog.stories.js +0 -0
  468. /package/src/{less → sass}/toggle-button/stories/gallery-layout-responsive.stories.js +0 -0
  469. /package/src/{less → sass}/toggle-button/stories/minimal-layout.stories.js +0 -0
@@ -1,32 +1,34 @@
1
1
  :root {
2
- --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
3
- --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
4
- --dialog-lightbox-max-width: 616px;
2
+ --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
3
+ --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
4
+ --dialog-lightbox-max-width: 616px;
5
5
  }
6
6
  .drawer-dialog[role="dialog"] {
7
- background-color: var(--dialog-scrim-color-show);
8
- bottom: 0;
9
- left: 0;
10
- -webkit-overflow-scrolling: touch;
11
- overflow-y: auto;
12
- position: fixed;
13
- right: 0;
14
- top: 0;
15
- will-change: background-color;
16
- z-index: 100000;
17
- align-items: flex-end;
7
+ background-color: var(--dialog-scrim-color-show);
8
+ bottom: 0;
9
+ left: 0;
10
+ -webkit-overflow-scrolling: touch;
11
+ align-items: flex-end;
12
+ overflow-y: auto;
13
+ position: fixed;
14
+ right: 0;
15
+ top: 0;
16
+ will-change: background-color;
17
+ z-index: 100000;
18
18
  }
19
19
  .drawer-dialog[role="dialog"]:not([hidden]) {
20
- display: flex;
20
+ display: flex;
21
21
  }
22
+
22
23
  .drawer-dialog--no-mask[role="dialog"] {
23
- background-color: transparent;
24
+ background-color: initial;
24
25
  }
26
+
25
27
  .drawer-dialog__header {
26
- display: flex;
27
- flex-shrink: 0;
28
- margin: var(--spacing-250) var(--spacing-200) 0;
29
- position: relative;
28
+ display: flex;
29
+ flex-shrink: 0;
30
+ margin: var(--spacing-250) var(--spacing-200) 0;
31
+ position: relative;
30
32
  }
31
33
  .drawer-dialog__header h1,
32
34
  .drawer-dialog__header h2,
@@ -34,146 +36,159 @@
34
36
  .drawer-dialog__header h4,
35
37
  .drawer-dialog__header h5,
36
38
  .drawer-dialog__header h6 {
37
- align-self: center;
38
- flex: 1 1 auto;
39
- margin: 0;
40
- overflow-wrap: anywhere;
39
+ align-self: center;
40
+ flex: 1 1 auto;
41
+ margin: 0;
42
+ overflow-wrap: anywhere;
41
43
  }
42
44
  .drawer-dialog__header > :last-child:not(:only-child) {
43
- -webkit-margin-start: var(--spacing-200);
44
- margin-inline-start: var(--spacing-200);
45
+ -webkit-margin-start: var(--spacing-200);
46
+ margin-inline-start: var(--spacing-200);
45
47
  }
48
+
46
49
  .drawer-dialog__header .fake-link {
47
- align-self: flex-start;
48
- text-decoration: none;
50
+ align-self: flex-start;
51
+ text-decoration: none;
49
52
  }
53
+
50
54
  .drawer-dialog__handle {
51
- background-color: transparent;
52
- border: none;
53
- left: 0;
54
- margin: -11px auto;
55
- padding: 8px;
56
- position: relative;
57
- right: 0;
58
- top: 11px;
59
- z-index: 2;
60
- }
61
- .drawer-dialog__handle::after {
62
- background-color: var(--dialog-handle-color, var(--color-stroke-default));
63
- border-radius: 3px;
64
- content: "";
65
- display: block;
66
- height: 2px;
67
- width: 24px;
68
- }
55
+ background-color: initial;
56
+ border: none;
57
+ left: 0;
58
+ margin: -11px auto;
59
+ padding: 8px;
60
+ position: relative;
61
+ right: 0;
62
+ top: 11px;
63
+ z-index: 2;
64
+ }
65
+ .drawer-dialog__handle:after {
66
+ background-color: var(--dialog-handle-color, var(--color-stroke-default));
67
+ border-radius: 3px;
68
+ content: "";
69
+ display: block;
70
+ height: 2px;
71
+ width: 24px;
72
+ }
73
+
69
74
  .drawer-dialog__main {
70
- box-sizing: border-box;
71
- flex: 1 1 auto;
72
- padding: var(--spacing-200);
73
- position: relative;
74
- min-height: auto;
75
- overflow: auto;
75
+ box-sizing: border-box;
76
+ flex: 1 1 auto;
77
+ min-height: auto;
78
+ overflow: auto;
79
+ padding: var(--spacing-200);
80
+ position: relative;
76
81
  }
77
82
  .drawer-dialog__main > :first-child {
78
- margin-top: 0;
83
+ margin-top: 0;
79
84
  }
80
85
  .drawer-dialog__main > :last-child {
81
- margin-bottom: 0;
86
+ margin-bottom: 0;
82
87
  }
88
+
83
89
  .drawer-dialog__footer {
84
- display: flex;
85
- flex-direction: row;
86
- justify-content: center;
87
- padding: 16px;
88
- position: relative;
90
+ display: flex;
91
+ flex-direction: row;
92
+ justify-content: center;
93
+ padding: 16px;
94
+ position: relative;
89
95
  }
90
96
  .drawer-dialog__footer > * {
91
- flex: 1;
97
+ flex: 1;
92
98
  }
93
99
  .drawer-dialog__footer > :not(:first-child) {
94
- margin-left: 8px;
100
+ margin-left: 8px;
95
101
  }
96
102
  button.icon-btn.drawer-dialog__close {
97
- align-self: flex-start;
98
- border: 0;
99
- height: 32px;
100
- min-width: 32px;
101
- position: relative;
102
- width: 32px;
103
- z-index: 1;
104
- }
103
+ align-self: flex-start;
104
+ border: 0;
105
+ height: 32px;
106
+ min-width: 32px;
107
+ position: relative;
108
+ width: 32px;
109
+ z-index: 1;
110
+ }
111
+
105
112
  .drawer-dialog__window {
106
- background-color: var(--dialog-window-background-color, var(--color-background-primary));
107
- display: flex;
108
- flex: 1 0 auto;
109
- flex-direction: column;
110
- min-height: 55px;
111
- will-change: opacity, transform;
112
- border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;
113
- max-height: 50%;
114
- max-width: 100%;
115
- -webkit-overflow-scrolling: touch;
116
- overflow-y: hidden;
117
- }
113
+ background-color: var(
114
+ --dialog-window-background-color,
115
+ var(--color-background-primary)
116
+ );
117
+ border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;
118
+ display: flex;
119
+ flex: 1 0 auto;
120
+ flex-direction: column;
121
+ max-height: 50%;
122
+ max-width: 100%;
123
+ min-height: 55px;
124
+ will-change: opacity, transform;
125
+ -webkit-overflow-scrolling: touch;
126
+ overflow-y: hidden;
127
+ }
128
+
118
129
  .drawer-dialog__window--expanded {
119
- height: 95%;
120
- max-height: 95%;
130
+ height: 95%;
131
+ max-height: 95%;
121
132
  }
133
+
122
134
  .drawer-dialog__window--slide {
123
- transition: max-height 0.32s ease-out;
135
+ transition: max-height 0.32s ease-out;
124
136
  }
125
- .drawer-dialog--show.drawer-dialog--mask-fade,
126
- .drawer-dialog--hide.drawer-dialog--mask-fade {
127
- transition: background-color 0.16s ease-out;
137
+ .drawer-dialog--hide.drawer-dialog--mask-fade,
138
+ .drawer-dialog--show.drawer-dialog--mask-fade {
139
+ transition: background-color 0.16s ease-out;
128
140
  }
129
- .drawer-dialog--show.drawer-dialog--mask-fade-slow,
130
- .drawer-dialog--hide.drawer-dialog--mask-fade-slow {
131
- transition: background-color 0.32s ease-out;
141
+ .drawer-dialog--hide.drawer-dialog--mask-fade-slow,
142
+ .drawer-dialog--show.drawer-dialog--mask-fade-slow {
143
+ transition: background-color 0.32s ease-out;
132
144
  }
133
- .drawer-dialog--show .drawer-dialog__window--fade,
134
- .drawer-dialog--hide .drawer-dialog__window--fade {
135
- transition: opacity 0.16s ease-out;
145
+ .drawer-dialog--hide .drawer-dialog__window--fade,
146
+ .drawer-dialog--show .drawer-dialog__window--fade {
147
+ transition: opacity 0.16s ease-out;
136
148
  }
137
- .drawer-dialog--show .drawer-dialog__window--slide,
138
- .drawer-dialog--hide .drawer-dialog__window--slide {
139
- transition: transform 0.32s ease-out;
149
+ .drawer-dialog--hide .drawer-dialog__window--slide,
150
+ .drawer-dialog--show .drawer-dialog__window--slide {
151
+ transition: transform 0.32s ease-out;
140
152
  }
141
- .drawer-dialog--hide.drawer-dialog--hide,
142
153
  .drawer-dialog--hide.drawer-dialog--show-init,
143
- .drawer-dialog--show-init.drawer-dialog--hide,
144
- .drawer-dialog--show-init.drawer-dialog--show-init {
145
- display: flex;
154
+ .drawer-dialog--hidedrawer-dialog--hide,
155
+ .drawer-dialog--show-init.drawer-dialog--show-init,
156
+ .drawer-dialog--show-initdrawer-dialog--hide {
157
+ display: flex;
146
158
  }
147
159
  .drawer-dialog--hide.drawer-dialog--mask-fade,
148
- .drawer-dialog--show-init.drawer-dialog--mask-fade,
149
160
  .drawer-dialog--hide.drawer-dialog--mask-fade-slow,
161
+ .drawer-dialog--show-init.drawer-dialog--mask-fade,
150
162
  .drawer-dialog--show-init.drawer-dialog--mask-fade-slow {
151
- background-color: var(--dialog-scrim-color-hide);
163
+ background-color: var(--dialog-scrim-color-hide);
152
164
  }
153
165
  .drawer-dialog--hide .drawer-dialog__window--slide,
154
166
  .drawer-dialog--show-init .drawer-dialog__window--slide {
155
- transform: translateY(100%);
167
+ transform: translateY(100%);
156
168
  }
157
- .drawer-dialog--show.drawer-dialog--show,
158
- .drawer-dialog--show.drawer-dialog--hide-init,
169
+ .drawer-dialog--hide-init.drawer-dialog--hide-init,
159
170
  .drawer-dialog--hide-init.drawer-dialog--show,
160
- .drawer-dialog--hide-init.drawer-dialog--hide-init {
161
- display: flex;
171
+ .drawer-dialog--show.drawer-dialog--hide-init,
172
+ .drawer-dialog--show.drawer-dialog--show {
173
+ display: flex;
162
174
  }
163
- .drawer-dialog--show.drawer-dialog--mask-fade,
164
175
  .drawer-dialog--hide-init.drawer-dialog--mask-fade,
165
- .drawer-dialog--show.drawer-dialog--mask-fade-slow,
166
- .drawer-dialog--hide-init.drawer-dialog--mask-fade-slow {
167
- background-color: var(--dialog-scrim-color-show);
176
+ .drawer-dialog--hide-init.drawer-dialog--mask-fade-slow,
177
+ .drawer-dialog--show.drawer-dialog--mask-fade,
178
+ .drawer-dialog--show.drawer-dialog--mask-fade-slow {
179
+ background-color: var(--dialog-scrim-color-show);
168
180
  }
169
- .drawer-dialog--show .drawer-dialog__window--fade,
170
- .drawer-dialog--hide-init .drawer-dialog__window--fade {
171
- opacity: 1;
181
+ .drawer-dialog--hide-init .drawer-dialog__window--fade,
182
+ .drawer-dialog--show .drawer-dialog__window--fade {
183
+ opacity: 1;
172
184
  }
173
- .drawer-dialog--show .drawer-dialog__window--slide,
174
- .drawer-dialog--hide-init .drawer-dialog__window--slide {
175
- transform: translateX(0);
185
+ .drawer-dialog--hide-init .drawer-dialog__window--slide,
186
+ .drawer-dialog--show .drawer-dialog__window--slide {
187
+ transform: translateX(0);
176
188
  }
189
+
177
190
  .drawer-dialog__handle:focus:not(:focus-visible) {
178
- outline: none;
191
+ outline: none;
179
192
  }
193
+
194
+ /*# sourceMappingURL=drawer-dialog.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/sass/mixins/private/_dialog-mixins.scss","drawer-dialog.css","../../src/sass/drawer-dialog/drawer-dialog.scss","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAEA;EACI,6CAAA;EACA,+CAAA;EACA,iCAAA;ACMJ;ACPA;EFKI,+CAAA;EACA,QAAA;EACA,MAAA;EACA,gCAAA;EELA,oBAAA;EFMA,eAAA;EACA,cAAA;EACA,OAAA;EACA,KAAA;EACA,4BAAA;EACA,cAAA;ACSJ;ADPI;EACI,YAAA;ACSR;;ACpBA;EACI,wBAAA;ADuBJ;;ACpBA;EF+CI,YAAA;EAEA,aAAA;EACA,8CAAA;EACA,iBAAA;ACvBJ;ADyBI;EAMI,iBAAA;EACA,aAAA;EACA,QAAA;EACA,sBAAA;ACvBR;AD0BI;EACI,uCAAA;UAAA,sCAAA;ACxBR;;ACtCA;EACI,qBAAA;EACA,oBAAA;ADyCJ;;ACtCA;EACI,wBAAA;EACA,WAAA;EACA,MAAA;EACA,iBAAA;EACA,WAAA;EACA,iBAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;ADyCJ;ACrCA;EClCQ,wEAAA;EDqCJ,iBAAA;EACA,UAAA;EACA,aAAA;EACA,UAAA;EACA,UAAA;ADwCJ;;ACrCA;EFuCI,qBAAA;EACA,aAAA;EErCA,eAAA;EACA,aAAA;EFqCA,0BAAA;EACA,iBAAA;ACIJ;ADFI;EACI,YAAA;ACIR;ADDI;EACI,eAAA;ACGR;;AC7CA;EACI,YAAA;EACA,kBAAA;EACA,sBAAA;EACA,YAAA;EACA,iBAAA;ADgDJ;AC/CI;EACI,MAAA;ADiDR;AC9CI;EACI,eAAA;ADgDR;AC1CA;EACI,qBAAA;EACA,QAAA;EACA,WAAA;EACA,cAAA;EACA,iBAAA;EACA,UAAA;EACA,SAAA;AD+CJ;;AC5CA;EC9EQ,uFAAA;EDiFJ,mEAAA;EF7CA,YAAA;EACA,aAAA;EACA,qBAAA;EE4CA,cAAA;EACA,cAAA;EF5CA,eAAA;EACA,8BAAA;EE4CA,gCAAA;EACA,iBAAA;ADmDJ;;AChDA;EACI,UAAA;EACA,cAAA;ADmDJ;;AChDA;EACI,mCAAA;ADmDJ;AC7CI;EACI,yCAAA;ADsDR;ACnDI;EACI,yCAAA;ADsDR;AClDI;EACI,gCAAA;ADqDR;AClDI;EACI,kCAAA;ADqDR;AC9CI;EAEI,YAAA;ADwDR;ACpDI;EAEI,+CAAA;ADuDR;ACnDI;EACI,0BAAA;ADsDR;AC/CI;EAEI,YAAA;ADyDR;ACrDI;EAEI,+CAAA;ADwDR;ACpDI;EACI,SAAA;ADuDR;ACpDI;EACI,uBAAA;ADuDR;;ACnDA;EACI,YAAA;ADsDJ","file":"drawer-dialog.css"}
@@ -1,61 +1,89 @@
1
1
  .education-notice {
2
- background-color: var(--education-notice-default-background-color, var(--color-background-secondary));
3
- border-radius: var(--education-notice-border-radius, var(--border-radius-100));
4
- color: var(--color-foreground-primary);
5
- font-size: var(--font-size-default);
6
- padding: var(--spacing-300);
2
+ background-color: var(
3
+ --education-notice-default-background-color,
4
+ var(--color-background-secondary)
5
+ );
6
+ border-radius: var(
7
+ --education-notice-border-radius,
8
+ var(--border-radius-100)
9
+ );
10
+ color: var(--color-foreground-primary);
11
+ font-size: var(--font-size-default);
12
+ padding: var(--spacing-300);
7
13
  }
14
+
8
15
  .education-notice--prominent {
9
- background-color: var(--education-notice-education-background-color, var(--color-background-education));
16
+ background-color: var(
17
+ --education-notice-education-background-color,
18
+ var(--color-background-education)
19
+ );
10
20
  }
21
+
11
22
  .education-notice__header {
12
- align-items: center;
13
- display: flex;
23
+ align-items: center;
24
+ display: flex;
14
25
  }
26
+
15
27
  .education-notice__title {
16
- flex-grow: 1;
17
- font-size: var(--font-size-medium);
18
- font-weight: bold;
19
- line-height: 1.5em;
20
- margin: 0;
21
- -webkit-margin-start: var(--spacing-150);
22
- margin-inline-start: var(--spacing-150);
28
+ flex-grow: 1;
29
+ font-size: var(--font-size-medium);
30
+ font-weight: 700;
31
+ line-height: 1.5em;
32
+ margin: 0;
33
+ -webkit-margin-start: var(--spacing-150);
34
+ margin-inline-start: var(--spacing-150);
23
35
  }
36
+
24
37
  .education-notice__main {
25
- margin-top: var(--spacing-200);
38
+ margin-top: var(--spacing-200);
26
39
  }
40
+
27
41
  .education-notice__dismiss {
28
- -webkit-margin-start: var(--spacing-150);
29
- margin-inline-start: var(--spacing-150);
42
+ -webkit-margin-start: var(--spacing-150);
43
+ margin-inline-start: var(--spacing-150);
30
44
  }
45
+
31
46
  .education-notice button.icon-btn {
32
- background-color: transparent;
47
+ background-color: initial;
33
48
  }
49
+
34
50
  .education-notice__header .icon--prominent {
35
- color: var(--color-foreground-accent);
51
+ color: var(--color-foreground-accent);
36
52
  }
53
+
37
54
  .education-notice__footer a {
38
- color: var(--education-notice-foreground-color, var(--color-foreground-primary));
39
- font-size: var(--font-size-default);
40
- font-weight: 700;
41
- white-space: nowrap;
55
+ color: var(
56
+ --education-notice-foreground-color,
57
+ var(--color-foreground-primary)
58
+ );
59
+ white-space: nowrap;
42
60
  }
61
+
62
+ .education-notice__footer a,
43
63
  .education-notice__footer button.fake-link {
44
- font-size: var(--font-size-default);
45
- font-weight: bold;
64
+ font-size: var(--font-size-default);
65
+ font-weight: 700;
46
66
  }
67
+
47
68
  .education-notice__main p {
48
- font-size: var(--font-size-default);
49
- margin: 0;
69
+ font-size: var(--font-size-default);
70
+ margin: 0;
50
71
  }
72
+
51
73
  .education-notice__footer {
52
- margin-top: var(--spacing-200);
74
+ margin-top: var(--spacing-200);
53
75
  }
76
+
54
77
  .education-notice__header button.fake-link,
55
78
  .education-notice__header button.fake-link:hover {
56
- color: var(--education-notice-foreground-color, var(--color-foreground-primary));
57
- font-size: var(--font-size-default);
58
- font-weight: bold;
59
- height: 24px;
60
- width: 24px;
79
+ color: var(
80
+ --education-notice-foreground-color,
81
+ var(--color-foreground-primary)
82
+ );
83
+ font-size: var(--font-size-default);
84
+ font-weight: 700;
85
+ height: 24px;
86
+ width: 24px;
61
87
  }
88
+
89
+ /*# sourceMappingURL=education-notice.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/sass/education-notice/education-notice.scss","../../src/sass/mixins/private/_token-mixins.scss","education-notice.css"],"names":[],"mappings":"AAGA;ECDQ,oGAAA;EAAA,6EAAA;EDWJ,qCAAA;EACA,kCAAA;EACA,0BAAA;AEFJ;;AFKA;EChBQ,sGAAA;ACeR;;AFQA;EACI,kBAAA;EACA,YAAA;AELJ;;AFQA;EACI,WAAA;EACA,iCAAA;EACA,eAAA;EACA,iBAAA;EACA,QAAA;EACA,uCAAA;UAAA,sCAAA;AELJ;;AFQA;EACI,6BAAA;AELJ;;AFQA;EACI,uCAAA;UAAA,sCAAA;AELJ;;AFQA;EACI,wBAAA;AELJ;;AFQA;EACI,oCAAA;AELJ;;AFQA;ECrDQ,+EAAA;ED6DJ,kBAAA;AETJ;;AFYA;EALI,kCAAA;EACA,eAAA;AEHJ;;AFYA;EACI,kCAAA;EACA,QAAA;AETJ;;AFYA;EACI,6BAAA;AETJ;;AFYA;EC9EQ,+EAAA;EDqFJ,kCAAA;EACA,eAAA;EACA,WAAA;EACA,UAAA;AEbJ","file":"education-notice.css"}
package/dist/eek/eek.css CHANGED
@@ -1,115 +1,138 @@
1
1
  .eek {
2
- align-items: stretch;
3
- display: inline-flex;
4
- font-family: Arial, sans-serif;
5
- font-weight: 700;
6
- height: 28px;
7
- position: relative;
8
- }
2
+ align-items: stretch;
3
+ display: inline-flex;
4
+ font-family: Arial, sans-serif;
5
+ font-weight: 700;
6
+ height: 28px;
7
+ position: relative;
8
+ }
9
+
9
10
  .eek__container {
10
- align-items: center;
11
- border: 1px solid #000;
12
- border-radius: 2px 0 0 2px;
13
- border-right: none;
14
- display: inline-flex;
11
+ align-items: center;
12
+ border: 1px solid #000;
13
+ border-radius: 2px 0 0 2px;
14
+ border-right: none;
15
+ display: inline-flex;
15
16
  }
17
+
16
18
  .eek .icon--eek-arrow {
17
- width: 11px;
19
+ width: 11px;
18
20
  }
21
+
19
22
  .eek__arrow {
20
- overflow: hidden;
21
- width: 17px;
22
- }
23
- .eek__arrow::before {
24
- border: 0.5px solid #000;
25
- border-radius: 2px;
26
- content: "";
27
- display: block;
28
- /* stylelint-disable-next-line number-max-precision */
29
- height: 19.79898987px;
30
- margin-top: 2.3px;
31
- position: relative;
32
- right: 12px;
33
- transform: rotate(45deg);
34
- /* stylelint-disable-next-line number-max-precision */
35
- width: 19.79898987px;
36
- }
23
+ overflow: hidden;
24
+ width: 17px;
25
+ }
26
+
27
+ .eek__arrow:before {
28
+ border: 0.5px solid #000;
29
+ border-radius: 2px;
30
+ content: "";
31
+ display: block;
32
+ height: 19.7989898732px;
33
+ margin-top: 2.3px;
34
+ position: relative;
35
+ right: 12px;
36
+ transform: rotate(45deg);
37
+ width: 19.7989898732px;
38
+ }
39
+
37
40
  .eek--rating-1 .eek__container {
38
- background: #00a650;
41
+ background: #00a650;
39
42
  }
43
+
40
44
  .eek--rating-1 svg.icon--eek-arrow {
41
- fill: #00a650;
45
+ fill: #00a650;
42
46
  }
47
+
43
48
  .eek--rating-2 .eek__container {
44
- background: #4dbd38;
49
+ background: #4dbd38;
45
50
  }
51
+
46
52
  .eek--rating-2 svg.icon--eek-arrow {
47
- fill: #4dbd38;
53
+ fill: #4dbd38;
48
54
  }
55
+
49
56
  .eek--rating-3 .eek__container {
50
- background: #b3db18;
57
+ background: #b3db18;
51
58
  }
59
+
52
60
  .eek--rating-3 svg.icon--eek-arrow {
53
- fill: #b3db18;
61
+ fill: #b3db18;
54
62
  }
63
+
55
64
  .eek--rating-4 .eek__container {
56
- background: #fff200;
65
+ background: #fff200;
57
66
  }
67
+
58
68
  .eek--rating-4 svg.icon--eek-arrow {
59
- fill: #fff200;
69
+ fill: #fff200;
60
70
  }
71
+
61
72
  .eek--rating-5 .eek__container {
62
- background: #fab20b;
73
+ background: #fab20b;
63
74
  }
75
+
64
76
  .eek--rating-5 svg.icon--eek-arrow {
65
- fill: #fab20b;
77
+ fill: #fab20b;
66
78
  }
79
+
67
80
  .eek--rating-6 .eek__container {
68
- background: #f25c19;
81
+ background: #f25c19;
69
82
  }
83
+
70
84
  .eek--rating-6 svg.icon--eek-arrow {
71
- fill: #f25c19;
85
+ fill: #f25c19;
72
86
  }
87
+
73
88
  .eek--rating-7 .eek__container {
74
- background: #ed1c24;
89
+ background: #ed1c24;
75
90
  }
91
+
76
92
  .eek--rating-7 svg.icon--eek-arrow {
77
- fill: #ed1c24;
93
+ fill: #ed1c24;
78
94
  }
95
+
79
96
  .eek__rating {
80
- color: #fff;
81
- display: inline-block;
82
- font-size: 18px;
83
- margin-left: 8px;
84
- text-shadow: -0.5px 0.5px 0 #000, 0.5px 0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px -0.5px 0 #000;
85
- }
97
+ color: #fff;
98
+ display: inline-block;
99
+ font-size: 18px;
100
+ margin-left: 8px;
101
+ text-shadow:
102
+ -0.5px 0.5px 0 #000,
103
+ 0.5px 0.5px 0 #000,
104
+ 0.5px -0.5px 0 #000,
105
+ -0.5px -0.5px 0 #000;
106
+ }
107
+
86
108
  .eek__rating-range {
87
- align-items: center;
88
- background-color: #fff;
89
- border-radius: 1px 0 0 1px;
90
- display: inline-flex;
91
- flex-direction: column;
92
- height: 24px;
93
- margin: 1px;
94
- padding: 0 1px;
95
- }
109
+ align-items: center;
110
+ background-color: #fff;
111
+ border-radius: 1px 0 0 1px;
112
+ display: inline-flex;
113
+ flex-direction: column;
114
+ height: 24px;
115
+ margin: 1px;
116
+ padding: 0 1px;
117
+ }
118
+
96
119
  .eek__rating-range > .icon--eek-range-arrow {
97
- height: 6px;
98
- width: 5px;
120
+ height: 6px;
121
+ width: 5px;
99
122
  }
123
+
100
124
  .eek__rating-range > span {
101
- font-size: 8px;
102
- }
103
- /*
104
- In Safari the EEK icon is not aligned properly as well as the text is broken
105
- Changed a bit of styles there only in order to make it work
106
- */
107
- @media not all and (min-resolution: 0.001dpcm) {
108
- @supports (-webkit-appearance: none) {
109
- .eek__rating {
110
- text-shadow: none;
111
- -webkit-text-stroke: 0.5px;
112
- -webkit-text-stroke-color: #000;
125
+ font-size: 8px;
126
+ }
127
+ @media not all and (-webkit-min-device-pixel-ratio: 0),
128
+ not all and (min-resolution: 0.001dpcm) {
129
+ @supports (-webkit-appearance: none) {
130
+ .eek__rating {
131
+ text-shadow: none;
132
+ -webkit-text-stroke: 0.5px;
133
+ -webkit-text-stroke-color: #000;
134
+ }
113
135
  }
114
- }
115
136
  }
137
+
138
+ /*# sourceMappingURL=eek.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/sass/eek/eek.scss","eek.css"],"names":[],"mappings":"AAmBA;EACI,mBAAA;EACA,mBAAA;EACA,4BAAA;EACA,eAAA;EACA,WAAA;EACA,iBAAA;ACRJ;;ADWA;EACI,kBAAA;EAGA,qBAAA;EADA,yBAAA;EACA,iBAAA;EACA,mBAAA;ACRJ;;ADWA;EACI,UAAA;ACRJ;;ADWA;EACI,eAAA;EACA,UAAA;ACRJ;;ADWA;EACI,sBAAA;EACA,iBAAA;EACA,UAAA;EACA,aAAA;EAEA,sBA7Ca;EA8Cb,gBAAA;EACA,iBAAA;EACA,UAAA;EACA,uBAAA;EAEA,qBAnDa;AC2CjB;;ADWA;EACI,kBArDiB;AC6CrB;;ADUA;EACI,YAxDiB;ACiDrB;;ADUA;EACI,kBA3DiB;ACoDrB;;ADSA;EACI,YA9DiB;ACwDrB;;ADSA;EACI,kBAjEiB;AC2DrB;;ADQA;EACI,YApEiB;AC+DrB;;ADQA;EACI,kBAvEiB;ACkErB;;ADOA;EACI,YA1EiB;ACsErB;;ADOA;EACI,kBA7EiB;ACyErB;;ADMA;EACI,YAhFiB;AC6ErB;;ADMA;EACI,kBAnFiB;ACgFrB;;ADKA;EACI,YAtFiB;ACoFrB;;ADKA;EACI,kBAzFiB;ACuFrB;;ADIA;EACI,YA5FiB;AC2FrB;;ADIA;EACI,UA9FmB;EA+FnB,oBAAA;EACA,cAAA;EACA,eAAA;EACA,sFACI;ACFR;;ADQA;EACI,kBAAA;EACA,qBA3GmB;EA4GnB,yBAAA;EACA,mBAAA;EACA,qBAAA;EACA,WAAA;EACA,UAAA;EACA,aAAA;ACLJ;;ADQA;EACI,UAAA;EACA,SAAA;ACLJ;;ADQA;EACI,aAAA;ACLJ;ADYA;EACI;IACI;MACI,gBAAA;MACA,wBAAA;MACA,8BAvIA;ICkIR;EACF;AACF","file":"eek.css"}