@ebay/skin 16.5.1 → 16.6.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 (71) hide show
  1. package/.storybook/preview-head.html +67 -11
  2. package/.stylelintrc +3 -0
  3. package/dist/alert-dialog/alert-dialog.css +0 -1
  4. package/dist/button/button.css +4 -0
  5. package/dist/carousel/carousel.css +25 -6
  6. package/dist/confirm-dialog/confirm-dialog.css +0 -1
  7. package/dist/drawer-dialog/drawer-dialog.css +0 -1
  8. package/dist/field/field.css +1 -1
  9. package/dist/fullscreen-dialog/fullscreen-dialog.css +0 -1
  10. package/dist/global/global.css +1 -0
  11. package/dist/icon/icon.css +32 -0
  12. package/dist/lightbox-dialog/lightbox-dialog.css +21 -0
  13. package/dist/listbox-button/listbox-button.css +4 -0
  14. package/dist/page-notice/page-notice.css +6 -1
  15. package/dist/panel-dialog/panel-dialog.css +0 -1
  16. package/dist/snackbar-dialog/snackbar-dialog.css +0 -1
  17. package/dist/svg/icon/icon-arrows-3d-filled-64-colored.svg +9 -0
  18. package/dist/svg/icon/icon-discount-16.svg +7 -0
  19. package/dist/svg/icon/icon-discount-24.svg +7 -0
  20. package/dist/svg/icon/icon-package-16.svg +7 -0
  21. package/dist/svg/icon/icon-package-24.svg +4 -2
  22. package/dist/svg/icon/icon-pause-filled-64-colored.svg +3 -1
  23. package/dist/svg/icon/icon-phone-16.svg +5 -0
  24. package/dist/svg/icon/icon-phone-24.svg +3 -1
  25. package/dist/svg/icon/icon-promotion-16.svg +7 -0
  26. package/dist/svg/icon/icon-promotion-24.svg +7 -0
  27. package/dist/svg/icon/icon-search-similar-16.svg +1 -4
  28. package/dist/svg/icon/icon-search-similar-20.svg +2 -5
  29. package/dist/svg/icon/icon-search-similar-24.svg +7 -0
  30. package/dist/svg/icon/icon-wrench-16.svg +2 -2
  31. package/dist/svg/icon/icon-wrench-24.svg +2 -2
  32. package/dist/svg/icons.svg +67 -11
  33. package/dist/textbox/textbox.css +1 -1
  34. package/dist/toast-dialog/toast-dialog.css +6 -3
  35. package/package.json +3 -3
  36. package/src/less/button/button.less +5 -0
  37. package/src/less/button/stories/destructive-button/borderless.stories.js +4 -0
  38. package/src/less/carousel/carousel.less +41 -6
  39. package/src/less/carousel/stories/carousel.stories.js +167 -40
  40. package/src/less/field/field.less +1 -1
  41. package/src/less/global/global.less +1 -0
  42. package/src/less/icon/generated/icon.less +32 -0
  43. package/src/less/lightbox-dialog/lightbox-dialog.less +28 -0
  44. package/src/less/lightbox-dialog/stories/lightbox-dialog.stories.js +110 -0
  45. package/src/less/listbox-button/listbox-button.less +9 -0
  46. package/src/less/mixins/private/dialog-mixins.less +0 -1
  47. package/src/less/page-notice/page-notice.less +11 -1
  48. package/src/less/textbox/textbox.less +1 -1
  49. package/src/less/toast-dialog/toast-dialog.less +6 -2
  50. package/src/svg/icon/icon-arrows-3d-filled-64-colored.svg +9 -0
  51. package/src/svg/icon/icon-discount-16.svg +7 -0
  52. package/src/svg/icon/icon-discount-24.svg +7 -0
  53. package/src/svg/icon/icon-package-16.svg +7 -0
  54. package/src/svg/icon/icon-package-24.svg +4 -2
  55. package/src/svg/icon/icon-pause-filled-64-colored.svg +3 -1
  56. package/src/svg/icon/icon-phone-16.svg +5 -0
  57. package/src/svg/icon/icon-phone-24.svg +3 -1
  58. package/src/svg/icon/icon-promotion-16.svg +7 -0
  59. package/src/svg/icon/icon-promotion-24.svg +7 -0
  60. package/src/svg/icon/icon-search-similar-16.svg +1 -4
  61. package/src/svg/icon/icon-search-similar-20.svg +2 -5
  62. package/src/svg/icon/icon-search-similar-24.svg +7 -0
  63. package/src/svg/icon/icon-wrench-16.svg +2 -2
  64. package/src/svg/icon/icon-wrench-24.svg +2 -2
  65. package/src/svg/icons.svg +67 -11
  66. package/svg.svg +67 -11
  67. package/_cdn/skin/v16.5.1/skin-default.min.css +0 -6
  68. package/_cdn/skin/v16.5.1/skin-full.min.css +0 -6
  69. package/_cdn/skin/v16.5.1/skin-headless.min.css +0 -6
  70. package/_cdn/skin/v16.5.1/skin-legacy.min.css +0 -6
  71. /package/dist/svg/icon/{icon-zoom-in-16.svg → icon-zoom-In-16.svg} +0 -0
@@ -0,0 +1,7 @@
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
+ <path
3
+ fill-rule="evenodd"
4
+ clip-rule="evenodd"
5
+ d="M7 1H4a3 3 0 0 0-3 3v3a1 1 0 0 0 2 0V4a1 1 0 0 1 1-1h3a1 1 0 0 0 0-2ZM1 17a1 1 0 1 1 2 0v3a1 1 0 0 0 1 1h3a1 1 0 1 1 0 2H4a3 3 0 0 1-3-3v-3ZM23 7a1 1 0 1 1-2 0V4a1 1 0 0 0-1-1h-3a1 1 0 1 1 0-2h3a3 3 0 0 1 3 3v3ZM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-6 4a6 6 0 1 1 10.89 3.476l4.817 4.817a1 1 0 0 1-1.414 1.414l-4.816-4.816A6 6 0 0 1 6 12Z"
6
+ />
7
+ </svg>
@@ -1,7 +1,7 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
1
+ <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
2
2
  <path
3
3
  fill-rule="evenodd"
4
- d="M4 7.586V5c0-1.847.834-3.157 2.06-3.961C7.23.27 8.696 0 10 0h1.99a1.01 1.01 0 0 1 1.006.908 1.01 1.01 0 0 1-.198.695L10.32 4.906l.774.774 3.295-2.472c.297-.23.71-.272 1.047-.108.346.167.57.53.564.915V6c0 1.358-.268 2.83-1.043 3.992C14.143 11.212 12.83 12 11 12H8.415L5.33 15.086A3.122 3.122 0 1 1 .915 10.67L4 7.586ZM10 2 8.212 4.385c-.315.401-.27.982.091 1.333l1.98 1.979c.347.358.92.407 1.324.098L14 6c0 1.142-.232 2.17-.707 2.883C12.857 9.537 12.17 10 11 10H8.01a1.006 1.006 0 0 0-.729.305l-3.364 3.367a1.122 1.122 0 1 1-1.588-1.587l3.378-3.378A.992.992 0 0 0 6 7.979V5c0-1.153.477-1.843 1.157-2.289C7.89 2.23 8.927 2 10 2Z"
5
4
  clip-rule="evenodd"
5
+ d="M12 7.586V5c0-1.847-.834-3.157-2.06-3.961C8.77.27 7.305 0 6 0H4.01a1.01 1.01 0 0 0-1.006.908c-.022.24.046.494.198.695L5.68 4.906l-.774.774-3.295-2.472A1.008 1.008 0 0 0 .564 3.1 1.01 1.01 0 0 0 0 4.015V6c0 1.358.268 2.83 1.043 3.992C1.857 11.212 3.172 12 5 12h2.585l3.084 3.086a3.122 3.122 0 1 0 4.416-4.415L12 7.586ZM6 2l1.789 2.385c.314.401.27.982-.092 1.333l-1.98 1.979c-.347.358-.92.407-1.324.098L2 6c0 1.142.232 2.17.707 2.883C3.144 9.537 3.83 10 5 10h2.99c.273-.003.539.109.729.305l3.365 3.367a1.122 1.122 0 1 0 1.587-1.587l-3.378-3.378A.997.997 0 0 1 10 7.98V5c0-1.153-.477-1.843-1.157-2.289C8.11 2.23 7.073 2 6 2Z"
6
6
  />
7
7
  </svg>
@@ -1,7 +1,7 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
1
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
2
2
  <path
3
3
  fill-rule="evenodd"
4
- d="M17.991 1H16c-1.853 0-3.613.56-4.92 1.766C9.759 3.984 9 5.77 9 8.008v2.588l-6.968 6.968c-1.23 1.23-1.45 3.273-.17 4.555 1.33 1.333 3.326 1.062 4.597-.2l6.953-6.903H16c2.236 0 4.019-.76 5.235-2.082C22.44 11.624 23 9.862 23 8.008V6.029a1.041 1.041 0 0 0-.483-.88 1.008 1.008 0 0 0-1.054.012l-4.308 2.588-.896-.897 2.594-4.329a1.03 1.03 0 0 0 .02-1.012 1.03 1.03 0 0 0-.882-.51Zm-1.757 2.002H16c-1.462 0-2.701.44-3.566 1.237C11.585 5.024 11 6.242 11 8.008v2.98c.006.28-.112.558-.31.747l-7.244 7.244c-.597.598-.528 1.366-.17 1.724.55.55 1.282.283 1.775-.206l7.237-7.186c.197-.199.465-.302.729-.297H16c1.763 0 2.98-.585 3.764-1.437C20.56 10.712 21 9.471 21 8.008v-.234l-3.48 2.09a1 1 0 0 1-1.242-.162l-1.968-1.97a1.004 1.004 0 0 1-.154-1.263l2.078-3.467Z"
5
4
  clip-rule="evenodd"
5
+ d="M6.009 1H8c1.853 0 3.613.56 4.92 1.766C14.241 3.984 15 5.77 15 8.008v2.588l6.968 6.968c1.23 1.23 1.45 3.273.17 4.555-1.33 1.333-3.326 1.062-4.597-.2l-6.953-6.903H8c-2.236 0-4.019-.76-5.235-2.082C1.56 11.624 1 9.862 1 8.008V6.029a1.041 1.041 0 0 1 .483-.88c.322-.195.737-.19 1.054.012l4.308 2.588.896-.897-2.594-4.329a1.03 1.03 0 0 1-.02-1.012A1.03 1.03 0 0 1 6.01 1Zm1.757 2.002H8c1.462 0 2.701.44 3.566 1.237.85.785 1.434 2.003 1.434 3.769v2.98c-.006.28.112.558.31.747l7.244 7.244c.597.598.528 1.366.17 1.724-.55.55-1.282.283-1.775-.206l-7.237-7.186a1.005 1.005 0 0 0-.729-.297H8c-1.763 0-2.98-.585-3.764-1.437C3.44 10.712 3 9.471 3 8.008v-.234l3.48 2.09a1 1 0 0 0 1.242-.162l1.968-1.97a1.004 1.004 0 0 0 .154-1.263L7.766 3.002Z"
6
6
  />
7
7
  </svg>
@@ -263,6 +263,15 @@
263
263
  d="M20.003 15.995h-2.285c1.952-1.714 3.466-3.62 4.363-5.476 1.064-2.203 1.358-4.582.051-6.388-.93-1.286-2.45-1.95-4.114-2.098-1.669-.149-3.566.21-5.433 1.056a1 1 0 1 0 .827 1.82c1.61-.73 3.162-.998 4.43-.885 1.272.113 2.175.595 2.668 1.277.672.93.7 2.42-.232 4.349-.813 1.684-2.285 3.517-4.274 5.18v-2.834a1 1 0 0 0-2 0v4.91A1 1 0 0 0 15 17.994h5.002a1 1 0 1 0 0-2ZM9.997 6.998v4.998a1 1 0 0 1-2.001 0V9.157c-1.989 1.663-3.46 3.495-4.274 5.18-.932 1.928-.904 3.42-.232 4.348.497.688 1.395 1.173 2.657 1.29 1.26.116 2.808-.15 4.435-.891a1.001 1.001 0 0 1 .83 1.818c-1.883.86-3.781 1.217-5.448 1.063-1.664-.153-3.17-.829-4.096-2.11C.56 18.05.855 15.67 1.919 13.469c.896-1.854 2.407-3.758 4.357-5.47H3.993a1 1 0 1 1 0-2h5.003a1 1 0 0 1 .996.898l.005.102Z"
264
264
  />
265
265
  </symbol>
266
+ <symbol viewBox="0 0 64 64" id="icon-arrows-3d-filled-64-colored">
267
+ <circle cx="32" cy="32" r="32" fill="#fff" fill-opacity=".88" />
268
+ <path
269
+ fill-rule="evenodd"
270
+ clip-rule="evenodd"
271
+ d="M26 35a2 2 0 0 1-2-2v-3.1c-1.91 2.297-3.091 4.591-3.637 6.633-.781 2.923-.225 5.082.96 6.307 1.185 1.173 4.15 1.754 7.96.293a2 2 0 0 1 1.433 3.734c-4.43 1.7-9.402 1.621-12.23-1.208l-.01-.009-.008-.01c-2.492-2.556-2.982-6.351-1.97-10.14.746-2.79 2.325-5.714 4.716-8.5H18a2 2 0 1 1 0-4h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2Zm7.283-17.868a2 2 0 1 0 1.433 3.735c3.81-1.461 6.776-.88 7.96.293 1.185 1.225 1.741 3.384.96 6.307-.546 2.041-1.727 4.335-3.637 6.633V31a2 2 0 0 0-4 0v8a2 2 0 0 0 2 2h8a2 2 0 0 0 0-4h-3.214c2.391-2.786 3.97-5.71 4.715-8.5 1.013-3.789.523-7.584-1.968-10.141l-.01-.01-.009-.008c-2.828-2.83-7.8-2.907-12.23-1.209Z"
272
+ fill="#191919"
273
+ />
274
+ </symbol>
266
275
  <symbol viewBox="0 0 16 16" id="icon-article-16">
267
276
  <path
268
277
  d="M8 4a1 1 0 0 0 0 2h4a1 1 0 1 0 0-2H8Zm0 3a1 1 0 0 0 0 2h4a1 1 0 1 0 0-2H8Zm-1 4a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z"
@@ -1572,6 +1581,20 @@
1572
1581
  d="M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0 12.36 12.36 0 0 0-.617-1.23A.078.078 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 2.98.078.078 0 0 0 .084-.026 13.83 13.83 0 0 0 1.226-1.963.074.074 0 0 0-.041-.104 13.201 13.201 0 0 1-1.872-.878.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028 19.963 19.963 0 0 0 6.002-2.981.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028ZM8.02 15.278c-1.182 0-2.157-1.069-2.157-2.38 0-1.312.956-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.956 2.38-2.157 2.38Zm7.975 0c-1.183 0-2.157-1.069-2.157-2.38 0-1.312.955-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.946 2.38-2.157 2.38Z"
1573
1582
  />
1574
1583
  </symbol>
1584
+ <symbol viewBox="0 0 16 16" id="icon-discount-16">
1585
+ <path
1586
+ fill-rule="evenodd"
1587
+ clip-rule="evenodd"
1588
+ d="M6.896 3.497 8 2.256l1.103 1.24A1.5 1.5 0 0 0 10.224 4H12v1.776c0 .428.183.836.503 1.121L13.745 8l-1.242 1.104a1.5 1.5 0 0 0-.503 1.12V12h-1.776a1.5 1.5 0 0 0-1.12.504L8 13.745l-1.104-1.241A1.5 1.5 0 0 0 5.776 12H4v-1.775a1.5 1.5 0 0 0-.504-1.121L2.255 8l1.241-1.103A1.5 1.5 0 0 0 4 5.776V4h1.775a1.5 1.5 0 0 0 1.121-.503ZM9.121.507a1.5 1.5 0 0 0-2.242 0L5.55 2H3.5A1.5 1.5 0 0 0 2 3.5v2.051L.506 6.88a1.5 1.5 0 0 0 0 2.243L2 10.45v2.05A1.5 1.5 0 0 0 3.5 14h2.05l1.329 1.494a1.5 1.5 0 0 0 2.242 0L10.449 14h2.05a1.5 1.5 0 0 0 1.5-1.5v-2.05l1.495-1.328a1.5 1.5 0 0 0 0-2.243L14 5.551v-2.05A1.5 1.5 0 0 0 12.5 2h-2.051L9.12.505ZM10 11a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM7 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm3.78.28a.75.75 0 1 0-1.06-1.06l-4.5 4.5a.75.75 0 1 0 1.06 1.06l4.5-4.5Z"
1589
+ />
1590
+ </symbol>
1591
+ <symbol viewBox="0 0 24 24" id="icon-discount-24">
1592
+ <path
1593
+ fill-rule="evenodd"
1594
+ clip-rule="evenodd"
1595
+ d="M13.392.566a2 2 0 0 0-2.783 0L8.095 3.001H5a2 2 0 0 0-2 2v3.536L.71 10.473a2 2 0 0 0 0 3.055L3 15.465v3.536a2 2 0 0 0 2 2h3.095l2.514 2.434a2 2 0 0 0 2.783 0l2.513-2.434H19a2 2 0 0 0 2-2v-3.536l2.292-1.937a2 2 0 0 0 0-3.055L21 8.537V5a2 2 0 0 0-2-2h-3.095L13.392.566ZM12 2.003l2.514 2.434a2 2 0 0 0 1.391.564H19v3.536a2 2 0 0 0 .71 1.527L22 12.001l-2.29 1.937a2 2 0 0 0-.71 1.527v3.536h-3.095a2 2 0 0 0-1.391.563L12 21.998l-2.513-2.434a2 2 0 0 0-1.392-.563H5v-3.536a2 2 0 0 0-.709-1.527L2 12l2.291-1.937a2 2 0 0 0 .71-1.527V5h3.094a2 2 0 0 0 1.392-.564L12 2.003Zm4.707 6.704a1 1 0 1 0-1.414-1.414l-8 8a1 1 0 1 0 1.414 1.415l8-8ZM10 8.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 8.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
1596
+ />
1597
+ </symbol>
1575
1598
  <symbol viewBox="0 0 20 12" id="icon-discover-12-colored">
1576
1599
  <rect
1577
1600
  x=".5"
@@ -5441,9 +5464,18 @@
5441
5464
  d="M12 7a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 7Zm0 7a2 2 0 1 0 .001-3.999A2 2 0 0 0 12 14Zm2 5a2 2 0 1 1-3.999.001A2 2 0 0 1 14 19Z"
5442
5465
  />
5443
5466
  </symbol>
5467
+ <symbol viewBox="0 0 16 16" id="icon-package-16">
5468
+ <path
5469
+ fill-rule="evenodd"
5470
+ clip-rule="evenodd"
5471
+ d="M3.535 3 2.87 4H7V3H3.535ZM9 3v1h4.132l-.667-1H9ZM7 6H2v6.5a.5.5 0 0 0 .5.5H7V6Zm2 7V6h5v6.5a.5.5 0 0 1-.5.5H9ZM2.02 1.668A1.5 1.5 0 0 1 3.268 1h9.464c.502 0 .97.25 1.248.668l1.6 2.4c.274.41.42.893.42 1.386V12.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5V5.454a2.5 2.5 0 0 1 .42-1.387l1.6-2.399Z"
5472
+ />
5473
+ </symbol>
5444
5474
  <symbol viewBox="0 0 24 24" id="icon-package-24">
5445
5475
  <path
5446
- d="M23 7c-.005-.184-.054-.407-.16-.56l-3-4A.998.998 0 0 0 19 2H5a1 1 0 0 0-.8.4l-3 4A1.37 1.37 0 0 0 1 7v14a1 1 0 0 0 1 1h20a1 1 0 0 0 1-1V7Zm-3-1h-7V4h5.5L20 6Zm-9-2v2H4l1.5-2H11ZM3 8h8v12H3V8Zm18 0v12h-8V8h8Z"
5476
+ fill-rule="evenodd"
5477
+ clip-rule="evenodd"
5478
+ d="M3.9 2.8A2 2 0 0 1 5.5 2h13a2 2 0 0 1 1.6.8l2.3 3.067a3 3 0 0 1 .6 1.8V19a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V7.667a3 3 0 0 1 .6-1.8L3.9 2.8ZM18.5 4H13v2h7l-1.5-2ZM21 8h-8v12h7a1 1 0 0 0 1-1V8ZM11 6V4H5.5L4 6h7ZM3 8v11a1 1 0 0 0 1 1h7V8H3Z"
5447
5479
  />
5448
5480
  </symbol>
5449
5481
  <symbol viewBox="0 0 64 64" id="icon-package-64">
@@ -5473,7 +5505,9 @@
5473
5505
  <symbol viewBox="0 0 64 64" id="icon-pause-filled-64-colored">
5474
5506
  <circle cx="32" cy="32" r="32" fill="#fff" fill-opacity=".88" />
5475
5507
  <path
5476
- d="M23.5 16a3.5 3.5 0 0 0-3.5 3.5v25a3.5 3.5 0 1 0 7 0v-25a3.5 3.5 0 0 0-3.5-3.5Zm17 0a3.5 3.5 0 0 0-3.5 3.5v25a3.5 3.5 0 1 0 7 0v-25a3.5 3.5 0 0 0-3.5-3.5Z"
5508
+ fill-rule="evenodd"
5509
+ clip-rule="evenodd"
5510
+ d="M27 20.5a3.5 3.5 0 1 0-7 0v23a3.5 3.5 0 1 0 7 0v-23Zm17 0a3.5 3.5 0 1 0-7 0v23a3.5 3.5 0 1 0 7 0v-23Z"
5477
5511
  fill="#191919"
5478
5512
  />
5479
5513
  </symbol>
@@ -6464,9 +6498,16 @@
6464
6498
  clip-rule="evenodd"
6465
6499
  />
6466
6500
  </symbol>
6501
+ <symbol viewBox="0 0 16 16" id="icon-phone-16">
6502
+ <path
6503
+ d="M4.222 2.178a.5.5 0 0 0-.708-.053L2.067 3.38c-.06.052-.067.1-.067.11.18 2.275 1.58 4.82 3.635 6.874C7.69 12.42 10.235 13.82 12.51 14c.009 0 .057-.007.11-.067l1.257-1.446a.5.5 0 0 0-.053-.709l-2.03-1.73-2.452.892a1 1 0 0 1-1.049-.233l-3-3a1 1 0 0 1-.232-1.05l.893-2.451-1.732-2.028ZM2.202.615a2.5 2.5 0 0 1 3.54.264l1.86 2.175c.39.457.504 1.09.298 1.654l-.742 2.035 2.099 2.1 2.037-.74a1.667 1.667 0 0 1 1.65.298l2.177 1.855a2.5 2.5 0 0 1 .265 3.543l-1.257 1.446c-.417.48-1.058.805-1.776.748-2.904-.228-5.87-1.951-8.132-4.214C1.958 9.517.235 6.552.006 3.648c-.056-.719.27-1.36.75-1.777L2.203.615Z"
6504
+ />
6505
+ </symbol>
6467
6506
  <symbol viewBox="0 0 24 24" id="icon-phone-24">
6468
6507
  <path
6469
- d="M5.4 2.2a1 1 0 0 1 1.307.093l4 4a1 1 0 0 1 .125 1.262L9.287 9.873l3.84 3.84 2.318-1.545a1 1 0 0 1 1.262.125l4 4A1 1 0 0 1 20.8 17.6l-3 4a1 1 0 0 1-.9.395 8.658 8.658 0 0 1-.964-.166 16.67 16.67 0 0 1-2.353-.707 19.298 19.298 0 0 1-6.79-4.415C4.427 14.341 2.988 11.72 2.14 9.7a21.537 21.537 0 0 1-.877-2.5c-.13-.465-.201-.791-.23-.937-.011-.05-.015-.062-.017-.114A.95.95 0 0 1 1.4 5.2l4-3ZM3.12 6.409l.068.251c.155.552.408 1.34.796 2.266.777 1.854 2.088 4.233 4.222 6.367a17.297 17.297 0 0 0 6.085 3.96 14.68 14.68 0 0 0 2.27.663l2.117-2.822-2.807-2.807-2.317 1.545a1 1 0 0 1-1.262-.125l-5-5a1 1 0 0 1-.125-1.262l1.545-2.318L5.906 4.32 3.121 6.41Z"
6508
+ fill-rule="evenodd"
6509
+ clip-rule="evenodd"
6510
+ d="M6.647 3.32a1 1 0 0 0-1.425-.044L3.129 5.277c-.112.107-.134.211-.128.268.266 2.877 2.541 6.609 5.689 9.76 3.147 3.15 6.875 5.428 9.75 5.695.058.005.162-.017.269-.128l2.013-2.1a1 1 0 0 0-.044-1.427l-3.28-3.024-2.929 1.555a1 1 0 0 1-1.176-.176l-4.999-4.998a1 1 0 0 1-.176-1.175l1.556-2.928L6.647 3.32ZM3.84 1.833a3 3 0 0 1 4.277.133l3.026 3.277c.577.625.695 1.544.297 2.294l-1.209 2.275 3.953 3.953 2.276-1.209a2 2 0 0 1 2.294.296l3.28 3.025a2.998 2.998 0 0 1 .132 4.279l-2.014 2.1c-.458.479-1.138.806-1.896.736-3.574-.332-7.719-3.008-10.981-6.274C4.012 13.451 1.34 9.302 1.009 5.73c-.07-.758.258-1.439.738-1.898l2.093-2Z"
6470
6511
  />
6471
6512
  </symbol>
6472
6513
  <symbol viewBox="0 0 24 24" id="icon-pin-24">
@@ -6673,6 +6714,20 @@
6673
6714
  clip-rule="evenodd"
6674
6715
  />
6675
6716
  </symbol>
6717
+ <symbol viewBox="0 0 16 16" id="icon-promotion-16">
6718
+ <path
6719
+ fill-rule="evenodd"
6720
+ clip-rule="evenodd"
6721
+ d="M5 3a1 1 0 0 1 1-1h3.392a.5.5 0 0 1 .348.141l3.104 3.01a.5.5 0 0 1 .003.715l-.749.74-2.962-2.894A2.5 2.5 0 0 0 7.389 3h-2.39Zm9.253 4.288-.746.738a2.5 2.5 0 0 1-.243 3.255L9.28 15.264a2.5 2.5 0 0 1-3.556-.02l-4.012-4.108A2.5 2.5 0 0 1 1 9.39V6c0-1.306.835-2.417 2-2.829V3a3 3 0 0 1 3-3h3.392a2.5 2.5 0 0 1 1.74.705l3.104 3.01a2.5 2.5 0 0 1 .017 3.573ZM4 5a1 1 0 0 0-1 1v3.39a.5.5 0 0 0 .142.349l4.013 4.107a.5.5 0 0 0 .711.004l3.984-3.984a.5.5 0 0 0-.005-.71L7.738 5.142A.5.5 0 0 0 7.388 5H4Zm2 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
6722
+ />
6723
+ </symbol>
6724
+ <symbol viewBox="0 0 24 24" id="icon-promotion-24">
6725
+ <path
6726
+ fill-rule="evenodd"
6727
+ clip-rule="evenodd"
6728
+ d="M6.002 4a2 2 0 0 1 2-2h5.158a1 1 0 0 1 .714.3l6.845 6.985a1 1 0 0 1-.007 1.408l-1.877 1.874L12.302 5.9A3 3 0 0 0 10.16 5H6.002V4Zm16.123 8.108-2.198 2.195a2.998 2.998 0 0 1-.802 2.805l-6.019 6.012a3 3 0 0 1-4.219.02l-6.983-6.837a3 3 0 0 1-.901-2.144V9a4.002 4.002 0 0 1 3-3.874V4a4 4 0 0 1 4-4h5.157a3 3 0 0 1 2.142.9l6.846 6.985a3 3 0 0 1-.023 4.223ZM5.002 7a2 2 0 0 0-2 2v5.16a1 1 0 0 0 .301.714l6.984 6.838a1 1 0 0 0 1.406-.007l6.019-6.012a1 1 0 0 0 .007-1.408L10.874 7.3a1 1 0 0 0-.714-.3H5.002ZM7.5 13a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
6729
+ />
6730
+ </symbol>
6676
6731
  <symbol viewBox="0 0 16 16" id="icon-qr-code-16">
6677
6732
  <path
6678
6733
  d="M2.5 0A2.5 2.5 0 0 0 0 2.5V4a1 1 0 0 0 2 0V2.5a.5.5 0 0 1 .5-.5H4a1 1 0 0 0 0-2H2.5Zm11 0A2.5 2.5 0 0 1 16 2.5V4a1 1 0 1 1-2 0V2.5a.5.5 0 0 0-.5-.5H12a1 1 0 1 1 0-2h1.5ZM0 13.5A2.5 2.5 0 0 0 2.5 16H4a1 1 0 1 0 0-2H2.5a.5.5 0 0 1-.5-.5V12a1 1 0 1 0-2 0v1.5ZM13.5 16a2.5 2.5 0 0 0 2.5-2.5V12a1 1 0 1 0-2 0v1.5a.5.5 0 0 1-.5.5H12a1 1 0 1 0 0 2h1.5ZM4 5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5Zm5 0a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V5Zm-5 5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1Zm5 0a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1Z"
@@ -7005,23 +7060,24 @@
7005
7060
  />
7006
7061
  </symbol>
7007
7062
  <symbol viewBox="0 0 16 16" id="icon-search-similar-16">
7008
- <path
7009
- d="M3.5 1H5a1 1 0 0 1 0 2H3.5a.5.5 0 0 0-.5.5V5a1 1 0 0 1-2 0V3.5A2.5 2.5 0 0 1 3.5 1ZM2 10a1 1 0 0 0-1 1v1.5A2.5 2.5 0 0 0 3.5 15H5a1 1 0 1 0 0-2H3.5a.5.5 0 0 1-.5-.5V11a1 1 0 0 0-1-1Zm11 1a1 1 0 1 1 2 0v1.5a2.5 2.5 0 0 1-2.5 2.5H11a1 1 0 1 1 0-2h1.5a.5.5 0 0 0 .5-.5V11Zm1-5a1 1 0 0 0 1-1V3.5A2.5 2.5 0 0 0 12.5 1H11a1 1 0 1 0 0 2h1.5a.5.5 0 0 1 .5.5V5a1 1 0 0 0 1 1Z"
7010
- />
7011
7063
  <path
7012
7064
  fill-rule="evenodd"
7013
7065
  clip-rule="evenodd"
7014
- d="M7 10a2.99 2.99 0 0 0 1.293-.292l1.5 1.5a1 1 0 0 0 1.414-1.415l-1.5-1.5A3 3 0 1 0 7 10Zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
7066
+ d="M6 2a1 1 0 0 0-1-1H3.5A2.5 2.5 0 0 0 1 3.5V5a1 1 0 0 0 2 0V3.5a.5.5 0 0 1 .5-.5H5a1 1 0 0 0 1-1Zm9 3a1 1 0 1 1-2 0V3.5a.5.5 0 0 0-.5-.5H11a1 1 0 1 1 0-2h1.5A2.5 2.5 0 0 1 15 3.5V5ZM3 11a1 1 0 1 0-2 0v1.5A2.5 2.5 0 0 0 3.5 15H5a1 1 0 1 0 0-2H3.5a.5.5 0 0 1-.5-.5V11Zm5-1a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 2c.742 0 1.436-.202 2.032-.554l2.26 2.261a1 1 0 0 0 1.415-1.414l-2.26-2.261A4 4 0 1 0 8 12Z"
7015
7067
  />
7016
7068
  </symbol>
7017
7069
  <symbol viewBox="0 0 20 20" id="icon-search-similar-20">
7018
7070
  <path
7019
- d="M1 3.999a3 3 0 0 1 3-3h2a1 1 0 0 1 0 2H4a1 1 0 0 0-1 1v2a1 1 0 1 1-2 0v-2Zm2 12a1 1 0 0 0 1 1h2a1 1 0 1 1 0 2H4a3 3 0 0 1-3-3v-2a1 1 0 1 1 2 0v2Zm16 0a3 3 0 0 1-3 3h-2a1 1 0 1 1 0-2h2a1 1 0 0 0 1-1v-2a1 1 0 1 1 2 0v2Zm-2-12a1 1 0 0 0-1-1h-2a1 1 0 1 1 0-2h2a3 3 0 0 1 3 3v2a1 1 0 1 1-2 0v-2Z"
7071
+ fill-rule="evenodd"
7072
+ clip-rule="evenodd"
7073
+ d="M3 3.999a1 1 0 0 1 1-1h2a1 1 0 1 0 0-2H4a3 3 0 0 0-3 3v2a1 1 0 1 0 2 0v-2Zm16 0a3 3 0 0 0-3-3h-2a1 1 0 1 0 0 2h2a1 1 0 0 1 1 1v2a1 1 0 1 0 2 0v-2Zm-15 13a1 1 0 0 1-1-1v-2a1 1 0 1 0-2 0v2a3 3 0 0 0 3 3h2a1 1 0 1 0 0-2H4ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 2c1.02 0 1.967-.305 2.757-.828l3.536 3.535a1 1 0 0 0 1.414-1.414l-3.535-3.536A5 5 0 1 0 10 15Z"
7020
7074
  />
7075
+ </symbol>
7076
+ <symbol viewBox="0 0 24 24" id="icon-search-similar-24">
7021
7077
  <path
7022
7078
  fill-rule="evenodd"
7023
- d="M12.446 11.032a4 4 0 1 0-1.414 1.414l1.76 1.761a1 1 0 0 0 1.415-1.414l-1.76-1.761ZM9 11a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
7024
7079
  clip-rule="evenodd"
7080
+ d="M7 1H4a3 3 0 0 0-3 3v3a1 1 0 0 0 2 0V4a1 1 0 0 1 1-1h3a1 1 0 0 0 0-2ZM1 17a1 1 0 1 1 2 0v3a1 1 0 0 0 1 1h3a1 1 0 1 1 0 2H4a3 3 0 0 1-3-3v-3ZM23 7a1 1 0 1 1-2 0V4a1 1 0 0 0-1-1h-3a1 1 0 1 1 0-2h3a3 3 0 0 1 3 3v3ZM12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-6 4a6 6 0 1 1 10.89 3.476l4.817 4.817a1 1 0 0 1-1.414 1.414l-4.816-4.816A6 6 0 0 1 6 12Z"
7025
7081
  />
7026
7082
  </symbol>
7027
7083
  <symbol viewBox="0 0 24 24" id="icon-security-key-24">
@@ -8105,15 +8161,15 @@
8105
8161
  <symbol viewBox="0 0 16 16" id="icon-wrench-16">
8106
8162
  <path
8107
8163
  fill-rule="evenodd"
8108
- d="M4 7.586V5c0-1.847.834-3.157 2.06-3.961C7.23.27 8.696 0 10 0h1.99a1.01 1.01 0 0 1 1.006.908 1.01 1.01 0 0 1-.198.695L10.32 4.906l.774.774 3.295-2.472c.297-.23.71-.272 1.047-.108.346.167.57.53.564.915V6c0 1.358-.268 2.83-1.043 3.992C14.143 11.212 12.83 12 11 12H8.415L5.33 15.086A3.122 3.122 0 1 1 .915 10.67L4 7.586ZM10 2 8.212 4.385c-.315.401-.27.982.091 1.333l1.98 1.979c.347.358.92.407 1.324.098L14 6c0 1.142-.232 2.17-.707 2.883C12.857 9.537 12.17 10 11 10H8.01a1.006 1.006 0 0 0-.729.305l-3.364 3.367a1.122 1.122 0 1 1-1.588-1.587l3.378-3.378A.992.992 0 0 0 6 7.979V5c0-1.153.477-1.843 1.157-2.289C7.89 2.23 8.927 2 10 2Z"
8109
8164
  clip-rule="evenodd"
8165
+ d="M12 7.586V5c0-1.847-.834-3.157-2.06-3.961C8.77.27 7.305 0 6 0H4.01a1.01 1.01 0 0 0-1.006.908c-.022.24.046.494.198.695L5.68 4.906l-.774.774-3.295-2.472A1.008 1.008 0 0 0 .564 3.1 1.01 1.01 0 0 0 0 4.015V6c0 1.358.268 2.83 1.043 3.992C1.857 11.212 3.172 12 5 12h2.585l3.084 3.086a3.122 3.122 0 1 0 4.416-4.415L12 7.586ZM6 2l1.789 2.385c.314.401.27.982-.092 1.333l-1.98 1.979c-.347.358-.92.407-1.324.098L2 6c0 1.142.232 2.17.707 2.883C3.144 9.537 3.83 10 5 10h2.99c.273-.003.539.109.729.305l3.365 3.367a1.122 1.122 0 1 0 1.587-1.587l-3.378-3.378A.997.997 0 0 1 10 7.98V5c0-1.153-.477-1.843-1.157-2.289C8.11 2.23 7.073 2 6 2Z"
8110
8166
  />
8111
8167
  </symbol>
8112
8168
  <symbol viewBox="0 0 24 24" id="icon-wrench-24">
8113
8169
  <path
8114
8170
  fill-rule="evenodd"
8115
- d="M17.991 1H16c-1.853 0-3.613.56-4.92 1.766C9.759 3.984 9 5.77 9 8.008v2.588l-6.968 6.968c-1.23 1.23-1.45 3.273-.17 4.555 1.33 1.333 3.326 1.062 4.597-.2l6.953-6.903H16c2.236 0 4.019-.76 5.235-2.082C22.44 11.624 23 9.862 23 8.008V6.029a1.041 1.041 0 0 0-.483-.88 1.008 1.008 0 0 0-1.054.012l-4.308 2.588-.896-.897 2.594-4.329a1.03 1.03 0 0 0 .02-1.012 1.03 1.03 0 0 0-.882-.51Zm-1.757 2.002H16c-1.462 0-2.701.44-3.566 1.237C11.585 5.024 11 6.242 11 8.008v2.98c.006.28-.112.558-.31.747l-7.244 7.244c-.597.598-.528 1.366-.17 1.724.55.55 1.282.283 1.775-.206l7.237-7.186c.197-.199.465-.302.729-.297H16c1.763 0 2.98-.585 3.764-1.437C20.56 10.712 21 9.471 21 8.008v-.234l-3.48 2.09a1 1 0 0 1-1.242-.162l-1.968-1.97a1.004 1.004 0 0 1-.154-1.263l2.078-3.467Z"
8116
8171
  clip-rule="evenodd"
8172
+ d="M6.009 1H8c1.853 0 3.613.56 4.92 1.766C14.241 3.984 15 5.77 15 8.008v2.588l6.968 6.968c1.23 1.23 1.45 3.273.17 4.555-1.33 1.333-3.326 1.062-4.597-.2l-6.953-6.903H8c-2.236 0-4.019-.76-5.235-2.082C1.56 11.624 1 9.862 1 8.008V6.029a1.041 1.041 0 0 1 .483-.88c.322-.195.737-.19 1.054.012l4.308 2.588.896-.897-2.594-4.329a1.03 1.03 0 0 1-.02-1.012A1.03 1.03 0 0 1 6.01 1Zm1.757 2.002H8c1.462 0 2.701.44 3.566 1.237.85.785 1.434 2.003 1.434 3.769v2.98c-.006.28.112.558.31.747l7.244 7.244c.597.598.528 1.366.17 1.724-.55.55-1.282.283-1.775-.206l-7.237-7.186a1.005 1.005 0 0 0-.729-.297H8c-1.763 0-2.98-.585-3.764-1.437C3.44 10.712 3 9.471 3 8.008v-.234l3.48 2.09a1 1 0 0 0 1.242-.162l1.968-1.97a1.004 1.004 0 0 0 .154-1.263L7.766 3.002Z"
8117
8173
  />
8118
8174
  </symbol>
8119
8175
  <symbol viewBox="0 0 16 16" id="icon-yuan-16">
@@ -21,6 +21,7 @@ textarea.textbox__control {
21
21
  min-height: 200px;
22
22
  overflow: auto;
23
23
  padding: 16px;
24
+ /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
24
25
  resize: vertical;
25
26
  vertical-align: middle;
26
27
  }
@@ -109,7 +110,6 @@ input.textbox__control:not(:read-only):focus,
109
110
  textarea.textbox__control:not(:read-only):focus {
110
111
  border-color: var(--textbox-focus-border-color, var(--color-stroke-strong));
111
112
  background-color: var(--textbox-focus-background-color, var(--color-background-primary));
112
- outline: 0;
113
113
  }
114
114
  input.textbox__control[readonly]:focus,
115
115
  textarea.textbox__control[readonly]:focus {
@@ -2,7 +2,6 @@
2
2
  --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
3
3
  --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
4
4
  --dialog-lightbox-max-width: 616px;
5
- --dialog-lightbox-wide-max-width: 896px;
6
5
  }
7
6
  .toast-dialog {
8
7
  background-color: var(--toast-dialog-background-color, var(--color-background-information));
@@ -110,10 +109,14 @@ button.toast-dialog__close > svg {
110
109
  }
111
110
  .toast-dialog__footer button.btn--secondary:not([disabled]):focus,
112
111
  .toast-dialog__footer button.btn--secondary:not([disabled]):hover {
113
- background-color: var(--color-state-information-hover);
112
+ background-color: var(--color-state-accent-hover);
113
+ border-color: var(--toast-dialog-foreground-color, var(--color-foreground-on-accent));
114
+ color: var(--toast-dialog-foreground-color, var(--color-background-primary));
114
115
  }
115
116
  .toast-dialog__footer button.btn--secondary:not([disabled]):active {
116
- background-color: var(--color-state-information-active);
117
+ background-color: var(--color-state-accent-active);
118
+ border-color: var(--toast-dialog-foreground-color, var(--color-foreground-on-accent));
119
+ color: var(--toast-dialog-foreground-color, var(--color-background-primary));
117
120
  }
118
121
  @media (min-width: 512px) {
119
122
  .toast-dialog {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ebay/skin",
3
3
  "description": "Skin - CSS modules that represent the brand eBay",
4
- "version": "16.5.1",
4
+ "version": "16.6.0-0",
5
5
  "license": "MIT",
6
6
  "main": "./index.js",
7
7
  "maintainers": [
@@ -22,7 +22,7 @@
22
22
  "prepublishOnly": "node scripts gen",
23
23
  "postpublish": "node scripts clean",
24
24
  "build": "npm run build:css && npm run lint:js && npm run bundle && npm run build:site && npm run copy",
25
- "build:css": "npm run lint:less && gulp && npm run lint:css",
25
+ "build:css": "npm run lint:less && rimraf dist && gulp && npm run lint:css",
26
26
  "build:ci": "npm run build:css && npm run lint:js && npm run bundle && npm run copy",
27
27
  "build:jekyll": "bundler exec jekyll build --incremental --config docs/_config.yml,docs/_config.localhost.yml",
28
28
  "build:site": "npm run copy:svgToDocs && npm run build:jekyll",
@@ -65,7 +65,7 @@
65
65
  "@commitlint/cli": "^17.6.3",
66
66
  "@commitlint/config-conventional": "^17.6.3",
67
67
  "@ebay/browserslist-config": "^2.6.0",
68
- "@percy/cli": "^1.26.2",
68
+ "@percy/cli": "^1.26.3",
69
69
  "@percy/storybook": "^4.3.6",
70
70
  "@storybook/html": "^7.0.12",
71
71
  "@storybook/html-webpack5": "^7.0.12",
@@ -44,6 +44,11 @@ a.fake-btn--borderless[aria-disabled="true"] {
44
44
  border-color: transparent;
45
45
  }
46
46
 
47
+ button.btn--borderless.btn--destructive,
48
+ a.fake-btn--borderless.btn--destructive {
49
+ .color-token(btn-secondary-destructive-foreground-color, color-foreground-attention);
50
+ }
51
+
47
52
  button.btn--slim,
48
53
  a.fake-btn--slim {
49
54
  height: @button-height-regular;
@@ -0,0 +1,4 @@
1
+ export default { title: "Skin/Button/Destructive/Borderless" };
2
+
3
+ export const base = () =>
4
+ '<button class="btn btn--borderless btn--destructive">Destructive Borderless Button</button>';
@@ -17,21 +17,31 @@
17
17
  .background-color-token(carousel-paddle-background-color, color-background-primary);
18
18
 
19
19
  &--prev {
20
- left: 0;
20
+ left: -@spacing-200;
21
21
  }
22
22
 
23
23
  &--next {
24
- right: 0;
24
+ right: -@spacing-200;
25
25
  }
26
26
 
27
+ // deprecated
27
28
  .icon--chevron-right-24 {
28
29
  margin-left: 2px;
29
30
  }
30
31
 
32
+ // deprecated
31
33
  .icon--chevron-left-24 {
32
34
  margin-left: -2px;
33
35
  }
34
36
 
37
+ .icon--chevron-right-12 {
38
+ margin-left: 1px;
39
+ }
40
+
41
+ .icon--chevron-left-12 {
42
+ margin-left: -1px;
43
+ }
44
+
35
45
  align-items: center;
36
46
  border: 1px solid;
37
47
  .border-color-token(carousel-paddle-border-color, color-stroke-subtle);
@@ -101,7 +111,6 @@
101
111
  position: relative;
102
112
 
103
113
  &__container {
104
- overflow: hidden;
105
114
  position: relative;
106
115
  white-space: nowrap;
107
116
  width: 100%;
@@ -194,24 +203,37 @@ span.carousel__container {
194
203
  [dir="rtl"] {
195
204
  .carousel__control--prev {
196
205
  left: unset;
197
- right: 0;
206
+ right: -@spacing-200;
198
207
  }
199
208
 
209
+ // deprecated
200
210
  .carousel__control .icon--chevron-left-24 {
201
211
  margin-left: 2px;
202
212
  }
203
213
 
214
+ .carousel__control .icon--chevron-left-12 {
215
+ margin-left: 1px;
216
+ }
217
+
204
218
  .carousel__control--next {
205
- left: 0;
219
+ left: -@spacing-200;
206
220
  right: unset;
207
221
  }
208
222
 
223
+ // deprecated
209
224
  .carousel__control .icon--chevron-right-24 {
210
225
  margin-left: -2px;
211
226
  }
212
227
 
228
+ .carousel__control .icon--chevron-right-12 {
229
+ margin-left: -1px;
230
+ }
231
+
232
+ // deprecated (first two selectors only)
213
233
  .carousel__control .icon--chevron-left-24,
214
- .carousel__control .icon--chevron-right-24 {
234
+ .carousel__control .icon--chevron-right-24,
235
+ .carousel__control .icon--chevron-left-12,
236
+ .carousel__control .icon--chevron-right-12 {
215
237
  transform: rotate(180deg);
216
238
  }
217
239
  }
@@ -224,6 +246,7 @@ span.carousel__container {
224
246
  (scroll-snap-coordinate: 0 0) or /*!Y */ (scroll-snap-align: start)
225
247
  ) {
226
248
  // always show paddles when scroll snapping and hover is not supported.
249
+ // todo: rename to .carousel--autoplay
227
250
  .carousel:not(.carousel__autoplay) .carousel__control {
228
251
  .show-control();
229
252
  }
@@ -245,6 +268,7 @@ span.carousel__container {
245
268
  (scroll-snap-coordinate: 0 0) or /*!Y */ (scroll-snap-align: start)
246
269
  ) {
247
270
  /* autoprefixer: off */
271
+ // todo: rename to .carousel--autoplay
248
272
  .carousel:not(.carousel__autoplay) {
249
273
  overflow: visible;
250
274
 
@@ -307,6 +331,7 @@ span.carousel__container {
307
331
  }
308
332
  }
309
333
 
334
+ // todo: rename to .carousel--autoplay
310
335
  .carousel.carousel--hidden-scrollbar:not(.carousel__autoplay) {
311
336
  overflow: hidden;
312
337
  }
@@ -322,3 +347,13 @@ span.carousel__container {
322
347
  .carousel--hidden-scrollbar .carousel__container .carousel__list {
323
348
  padding-bottom: 80px;
324
349
  }
350
+
351
+ // hidden-scrollbar must have inner paddle position due to overflow: hidden
352
+ .carousel--hidden-scrollbar .carousel__control--prev {
353
+ left: 0;
354
+ }
355
+
356
+ // hidden-scrollbar must have inner paddle position due to overflow: hidden
357
+ .carousel--hidden-scrollbar .carousel__control--next {
358
+ right: 0;
359
+ }