@ebay/skin 19.5.0 → 19.5.2

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.
@@ -1,6 +1,6 @@
1
1
  :root {
2
- --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
3
- --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
2
+ --dialog-scrim-color-hide: rgb(17 24 32 / 0);
3
+ --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
4
4
  --dialog-lightbox-max-width: 616px;
5
5
  }
6
6
  .alert-dialog[role="alertdialog"] {
@@ -7662,7 +7662,7 @@ span.listbox-button{
7662
7662
  padding-right:15px;
7663
7663
  }
7664
7664
 
7665
- span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--fluid .expand-btn{
7665
+ span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--fluid .expand-btn,span.listbox-button--fluid div.listbox-button__listbox{
7666
7666
  width:100%;
7667
7667
  }
7668
7668
 
@@ -10852,8 +10852,8 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
10852
10852
  width:100%;
10853
10853
  }
10854
10854
  :root{
10855
- --dialog-scrim-color-hide:rgb(17, 24, 32, 0);
10856
- --dialog-scrim-color-show:rgb(17, 24, 32, 0.7);
10855
+ --dialog-scrim-color-hide:rgb(17 24 32 / 0);
10856
+ --dialog-scrim-color-show:rgb(17 24 32 / 0.7);
10857
10857
  --dialog-lightbox-max-width:616px;
10858
10858
  }
10859
10859
  .toast-dialog{
@@ -11954,7 +11954,7 @@ button.tooltip__close{
11954
11954
  }
11955
11955
  }
11956
11956
  :root{
11957
- --bubble-shadow:0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
11957
+ --bubble-shadow:0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
11958
11958
  }
11959
11959
  .tourtip{
11960
11960
  position:relative;
@@ -7861,7 +7861,7 @@ span.listbox-button{
7861
7861
  padding-right:15px;
7862
7862
  }
7863
7863
 
7864
- span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--fluid .expand-btn{
7864
+ span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--fluid .expand-btn,span.listbox-button--fluid div.listbox-button__listbox{
7865
7865
  width:100%;
7866
7866
  }
7867
7867
 
@@ -11051,8 +11051,8 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
11051
11051
  width:100%;
11052
11052
  }
11053
11053
  :root{
11054
- --dialog-scrim-color-hide:rgb(17, 24, 32, 0);
11055
- --dialog-scrim-color-show:rgb(17, 24, 32, 0.7);
11054
+ --dialog-scrim-color-hide:rgb(17 24 32 / 0);
11055
+ --dialog-scrim-color-show:rgb(17 24 32 / 0.7);
11056
11056
  --dialog-lightbox-max-width:616px;
11057
11057
  }
11058
11058
  .toast-dialog{
@@ -12153,7 +12153,7 @@ button.tooltip__close{
12153
12153
  }
12154
12154
  }
12155
12155
  :root{
12156
- --bubble-shadow:0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
12156
+ --bubble-shadow:0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
12157
12157
  }
12158
12158
  .tourtip{
12159
12159
  position:relative;
@@ -7236,7 +7236,7 @@ span.listbox-button{
7236
7236
  padding-right:15px;
7237
7237
  }
7238
7238
 
7239
- span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--fluid .expand-btn{
7239
+ span.listbox-button--fluid,span.listbox-button--fluid .btn,span.listbox-button--fluid .expand-btn,span.listbox-button--fluid div.listbox-button__listbox{
7240
7240
  width:100%;
7241
7241
  }
7242
7242
 
@@ -10426,8 +10426,8 @@ input.textbox__control[readonly]:focus,textarea.textbox__control[readonly]:focus
10426
10426
  width:100%;
10427
10427
  }
10428
10428
  :root{
10429
- --dialog-scrim-color-hide:rgb(17, 24, 32, 0);
10430
- --dialog-scrim-color-show:rgb(17, 24, 32, 0.7);
10429
+ --dialog-scrim-color-hide:rgb(17 24 32 / 0);
10430
+ --dialog-scrim-color-show:rgb(17 24 32 / 0.7);
10431
10431
  --dialog-lightbox-max-width:616px;
10432
10432
  }
10433
10433
  .toast-dialog{
@@ -11528,7 +11528,7 @@ button.tooltip__close{
11528
11528
  }
11529
11529
  }
11530
11530
  :root{
11531
- --bubble-shadow:0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
11531
+ --bubble-shadow:0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
11532
11532
  }
11533
11533
  .tourtip{
11534
11534
  position:relative;
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
2
+ --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
3
3
  }
4
4
  .combobox {
5
5
  box-sizing: border-box;
@@ -1,6 +1,6 @@
1
1
  :root {
2
- --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
3
- --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
2
+ --dialog-scrim-color-hide: rgb(17 24 32 / 0);
3
+ --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
4
4
  --dialog-lightbox-max-width: 616px;
5
5
  }
6
6
  .confirm-dialog[role="dialog"] {
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
2
+ --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
3
3
  }
4
4
  .date-textbox {
5
5
  --calendar-month-width: 311px;
@@ -1,7 +1,7 @@
1
1
  /*! DEPRECATED COMPONENT. Will be removed next major version */
2
2
  :root {
3
- --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
4
- --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
3
+ --dialog-scrim-color-hide: rgb(17 24 32 / 0);
4
+ --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
5
5
  --dialog-lightbox-max-width: 616px;
6
6
  }
7
7
  .drawer-dialog[role="dialog"] {
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
2
+ --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
3
3
  }
4
4
  div.filter-group {
5
5
  display: flex;
@@ -1,7 +1,7 @@
1
1
  /*! DEPRECATED COMPONENT. Will be removed next major version */
2
2
  :root {
3
- --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
4
- --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
3
+ --dialog-scrim-color-hide: rgb(17 24 32 / 0);
4
+ --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
5
5
  --dialog-lightbox-max-width: 616px;
6
6
  }
7
7
  .fullscreen-dialog[role="dialog"] {
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
2
+ --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
3
3
  }
4
4
  .infotip {
5
5
  position: relative;
@@ -1,6 +1,6 @@
1
1
  :root {
2
- --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
3
- --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
2
+ --dialog-scrim-color-hide: rgb(17 24 32 / 0);
3
+ --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
4
4
  --dialog-lightbox-max-width: 616px;
5
5
  --dialog-lightbox-wide-max-width: 896px;
6
6
  --dialog-lightbox-narrow-max-width: 480px;
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
2
+ --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
3
3
  }
4
4
  div.listbox {
5
5
  margin: var(--spacing-200) 0;
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
2
+ --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
3
3
  }
4
4
  .listbox-button {
5
5
  line-height: normal;
@@ -18,7 +18,8 @@ span.listbox-button {
18
18
 
19
19
  span.listbox-button--fluid,
20
20
  span.listbox-button--fluid .btn,
21
- span.listbox-button--fluid .expand-btn {
21
+ span.listbox-button--fluid .expand-btn,
22
+ span.listbox-button--fluid div.listbox-button__listbox {
22
23
  width: 100%;
23
24
  }
24
25
 
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
2
+ --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
3
3
  }
4
4
  .fake-menu__items,
5
5
  .menu__items {
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
2
+ --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
3
3
  }
4
4
  .fake-menu-button,
5
5
  .menu-button {
@@ -32,7 +32,7 @@
32
32
  position: relative;
33
33
 
34
34
  &::after {
35
- background: rgb(0, 0, 0, 0.05);
35
+ background: rgb(0 0 0 / 0.05);
36
36
  bottom: 0;
37
37
  content: "";
38
38
  display: block;
@@ -1,6 +1,6 @@
1
1
  :root {
2
- --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
3
- --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
2
+ --dialog-scrim-color-hide: rgb(17 24 32 / 0);
3
+ --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
4
4
  --dialog-lightbox-max-width: 616px;
5
5
  }
6
6
  .panel-dialog[role="dialog"] {
@@ -1,6 +1,6 @@
1
1
  :root {
2
- --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
3
- --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
2
+ --dialog-scrim-color-hide: rgb(17 24 32 / 0);
3
+ --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
4
4
  --dialog-lightbox-max-width: 616px;
5
5
  }
6
6
  .snackbar-dialog {
@@ -1,6 +1,6 @@
1
1
  :root {
2
- --dialog-scrim-color-hide: rgb(17, 24, 32, 0);
3
- --dialog-scrim-color-show: rgb(17, 24, 32, 0.7);
2
+ --dialog-scrim-color-hide: rgb(17 24 32 / 0);
3
+ --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
4
4
  --dialog-lightbox-max-width: 616px;
5
5
  }
6
6
  .toast-dialog {
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
2
+ --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
3
3
  }
4
4
  .tooltip {
5
5
  position: relative;
@@ -1,5 +1,5 @@
1
1
  :root {
2
- --bubble-shadow: 0 2px 7px rgb(0, 0, 0, 0.15), 0 5px 17px rgb(0, 0, 0, 0.2);
2
+ --bubble-shadow: 0 2px 7px rgb(0 0 0 / 0.15), 0 5px 17px rgb(0 0 0 / 0.2);
3
3
  }
4
4
  .tourtip {
5
5
  position: relative;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ebay/skin",
3
- "version": "19.5.0",
3
+ "version": "19.5.2",
4
4
  "description": "Skin - CSS modules that represent the brand eBay",
5
5
  "keywords": [
6
6
  "eBay",