@ebay/skin 14.0.6 → 14.1.0-0

package/dist/icon/general.css

@@ -104,8 +104,8 @@ svg.icon--following {
   width: 16px;
 }
 svg.icon--flag {
-  height: 21.34px;
-  width: 13.36px;
+  height: 24px;
+  width: 24px;
 }
 svg.icon--key {
   height: 13.5px;
@@ -207,3 +207,103 @@ svg.icon--scan {
   height: 24px;
   width: 24px;
 }
+svg.icon--lightbulb-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--visa-xsmall {
+  height: 13px;
+  width: 21px;
+}
+svg.icon--visa-small {
+  height: 19px;
+  width: 31px;
+}
+svg.icon--visa {
+  height: 25px;
+  width: 39px;
+}
+svg.icon--visa-large {
+  height: 33px;
+  width: 51px;
+}
+svg.icon--archive {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--archive-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--inbox {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--inbox-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--folder {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--folder-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--reply {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--reply-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--live-eye {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--live-eye-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--return {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--return-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--undo {
+  height: 25px;
+  width: 24px;
+}
+svg.icon--certified-recycle {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--certified-recycle-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--selling-medium {
+  height: 20px;
+  width: 20px;
+}
+svg.icon--sort-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--sort-up-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--sort-down-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--flag-small {
+  height: 16px;
+  width: 16px;
+}

package/dist/icon/icon.css

@@ -132,6 +132,10 @@ svg.icon--chevron-right-extra-small {
   height: 16px;
   width: 16px;
 }
+svg.icon--arrow-left-medium {
+  height: 20px;
+  width: 20px;
+}
 /* This is a generated file, DO NOT EDIT */
 svg.icon--bank-large {
   height: 58px;
@@ -170,8 +174,8 @@ svg.icon--location-large {
   width: 42px;
 }
 svg.icon--messages-large {
-  height: 48px;
-  width: 58px;
+  height: 64px;
+  width: 64px;
 }
 svg.icon--purchases-large {
   height: 56px;
@@ -209,6 +213,10 @@ svg.icon--play-large {
   height: 60px;
   width: 60px;
 }
+svg.icon--bids-large {
+  height: 64px;
+  width: 64px;
+}
 /* This is a generated file, DO NOT EDIT */
 svg.icon--star-dynamic {
   height: 22px;
@@ -286,8 +294,8 @@ svg.icon--star-empty-small {
 }
 /* This is a generated file, DO NOT EDIT */
 svg.icon--avatar-light {
-  height: 22px;
-  width: 22px;
+  height: 40px;
+  width: 40px;
 }
 svg.icon--avatar-filled {
   height: 22px;
@@ -461,8 +469,8 @@ svg.icon--share {
   width: 24px;
 }
 svg.icon--messages {
-  height: 18px;
-  width: 22px;
+  height: 24px;
+  width: 24px;
 }
 svg.icon--send {
   height: 19px;
@@ -524,6 +532,38 @@ svg.icon--zoom-out {
   height: 24px;
   width: 24px;
 }
+svg.icon--messages-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--mail-open {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--mail-open-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--mail-move {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--mail-move-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--mail-unread {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--mail-unread-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--download-small {
+  height: 16px;
+  width: 16px;
+}
 /* This is a generated file, DO NOT EDIT */
 svg.icon--video-play {
   height: 24px;
@@ -587,8 +627,8 @@ svg.icon--fast-n-free {
   width: 22px;
 }
 svg.icon--small-letter {
-  height: 14px;
-  width: 18px;
+  height: 24px;
+  width: 24px;
 }
 svg.icon--small-box {
   height: 12px;
@@ -745,8 +785,8 @@ svg.icon--following {
   width: 16px;
 }
 svg.icon--flag {
-  height: 21.34px;
-  width: 13.36px;
+  height: 24px;
+  width: 24px;
 }
 svg.icon--key {
   height: 13.5px;
@@ -848,6 +888,106 @@ svg.icon--scan {
   height: 24px;
   width: 24px;
 }
+svg.icon--lightbulb-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--visa-xsmall {
+  height: 13px;
+  width: 21px;
+}
+svg.icon--visa-small {
+  height: 19px;
+  width: 31px;
+}
+svg.icon--visa {
+  height: 25px;
+  width: 39px;
+}
+svg.icon--visa-large {
+  height: 33px;
+  width: 51px;
+}
+svg.icon--archive {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--archive-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--inbox {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--inbox-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--folder {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--folder-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--reply {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--reply-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--live-eye {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--live-eye-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--return {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--return-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--undo {
+  height: 25px;
+  width: 24px;
+}
+svg.icon--certified-recycle {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--certified-recycle-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--selling-medium {
+  height: 20px;
+  width: 20px;
+}
+svg.icon--sort-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--sort-up-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--sort-down-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--flag-small {
+  height: 16px;
+  width: 16px;
+}
 /* This is a generated file, DO NOT EDIT */
 svg.icon--arrow-right-group-titles {
   height: 14px;
@@ -869,6 +1009,10 @@ svg.icon--radio-unchecked-large {
   height: 24px;
   width: 24px;
 }
+svg.icon--stepper-current {
+  height: 24px;
+  width: 24px;
+}
 svg.icon--stepper-confirmation {
   height: 24px;
   width: 24px;
@@ -962,12 +1106,12 @@ svg.icon--photo-crop {
   width: 20px;
 }
 svg.icon--photo-gallery {
-  height: 22px;
-  width: 22px;
+  height: 24px;
+  width: 24px;
 }
 svg.icon--photo-gallery-more {
   height: 24px;
-  width: 22px;
+  width: 24px;
 }
 svg.icon--photo-rotate {
   height: 21px;
@@ -997,6 +1141,18 @@ svg.icon--photo-sharpen {
   height: 20px;
   width: 21px;
 }
+svg.icon--photo-gallery-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--photo-image {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--photo-image-small {
+  height: 16px;
+  width: 16px;
+}
 /* This is a generated file, DO NOT EDIT */
 svg.icon--confirmation {
   height: 24px;

package/dist/icon/interface.css

@@ -88,8 +88,8 @@ svg.icon--share {
   width: 24px;
 }
 svg.icon--messages {
-  height: 18px;
-  width: 22px;
+  height: 24px;
+  width: 24px;
 }
 svg.icon--send {
   height: 19px;
@@ -151,3 +151,35 @@ svg.icon--zoom-out {
   height: 24px;
   width: 24px;
 }
+svg.icon--messages-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--mail-open {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--mail-open-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--mail-move {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--mail-move-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--mail-unread {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--mail-unread-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--download-small {
+  height: 16px;
+  width: 16px;
+}

package/dist/icon/internal.css

@@ -31,6 +31,10 @@ svg.icon--radio-unchecked-large {
   height: 24px;
   width: 24px;
 }
+svg.icon--stepper-current {
+  height: 24px;
+  width: 24px;
+}
 svg.icon--stepper-confirmation {
   height: 24px;
   width: 24px;

package/dist/icon/large.css

@@ -48,8 +48,8 @@ svg.icon--location-large {
   width: 42px;
 }
 svg.icon--messages-large {
-  height: 48px;
-  width: 58px;
+  height: 64px;
+  width: 64px;
 }
 svg.icon--purchases-large {
   height: 56px;
@@ -87,3 +87,7 @@ svg.icon--play-large {
   height: 60px;
   width: 60px;
 }
+svg.icon--bids-large {
+  height: 64px;
+  width: 64px;
+}

package/dist/icon/photo.css

@@ -20,12 +20,12 @@ svg.icon--photo-crop {
   width: 20px;
 }
 svg.icon--photo-gallery {
-  height: 22px;
-  width: 22px;
+  height: 24px;
+  width: 24px;
 }
 svg.icon--photo-gallery-more {
   height: 24px;
-  width: 22px;
+  width: 24px;
 }
 svg.icon--photo-rotate {
   height: 21px;
@@ -55,3 +55,15 @@ svg.icon--photo-sharpen {
   height: 20px;
   width: 21px;
 }
+svg.icon--photo-gallery-small {
+  height: 16px;
+  width: 16px;
+}
+svg.icon--photo-image {
+  height: 24px;
+  width: 24px;
+}
+svg.icon--photo-image-small {
+  height: 16px;
+  width: 16px;
+}

package/dist/icon/shipping.css

@@ -40,8 +40,8 @@ svg.icon--fast-n-free {
   width: 22px;
 }
 svg.icon--small-letter {
-  height: 14px;
-  width: 18px;
+  height: 24px;
+  width: 24px;
 }
 svg.icon--small-box {
   height: 12px;

package/dist/icon/user.css

@@ -12,8 +12,8 @@ svg.icon--disabled {
 }
 /* This is a generated file, DO NOT EDIT */
 svg.icon--avatar-light {
-  height: 22px;
-  width: 22px;
+  height: 40px;
+  width: 40px;
 }
 svg.icon--avatar-filled {
   height: 22px;

package/dist/lightbox-dialog/lightbox-dialog.css

@@ -38,7 +38,7 @@
 .lightbox-dialog__header {
   display: flex;
   flex-shrink: 0;
-  margin: 16px 8px 0;
+  margin: 16px 16px 0;
   position: relative;
 }
 .lightbox-dialog__header h1,
@@ -49,7 +49,7 @@
 .lightbox-dialog__header h6 {
   align-self: center;
   flex: 1 1 auto;
-  margin: 0 8px;
+  margin: 0;
 }
 .lightbox-dialog__header > :last-child:not(:only-child) {
   margin-left: 16px;
@@ -80,10 +80,13 @@
 .lightbox-dialog__footer > :not(:first-child) {
   margin-top: 16px;
 }
-button.lightbox-dialog__close {
+button.icon-btn.lightbox-dialog__close {
   align-self: center;
   border: 0;
+  height: 32px;
+  min-width: 32px;
   position: relative;
+  width: 32px;
   z-index: 1;
 }
 .lightbox-dialog__title:not(:first-child) {
@@ -147,19 +150,13 @@ button.lightbox-dialog__close {
   }
 }
 @media (min-width: 601px) {
-  .lightbox-dialog__window .lightbox-dialog__header {
-    margin: 16px 16px 0;
-  }
-  .lightbox-dialog__window .lightbox-dialog__main {
-    margin: 16px 24px 24px;
-  }
   .lightbox-dialog__window .lightbox-dialog__footer {
     flex-direction: row;
     justify-content: flex-end;
-    padding: 24px;
+    padding: 0 16px 16px;
   }
   .lightbox-dialog__window .lightbox-dialog__footer > :not(:first-child) {
-    margin-left: 24px;
+    margin-left: 8px;
     margin-top: initial;
   }
 }

package/dist/link/link.css

@@ -21,6 +21,6 @@ button.fake-link {
 button.fake-link[disabled] {
   color: var(--fake-link-foreground-disabled-color, var(--color-foreground-disabled));
 }
-button.fake-link:hover {
+button.fake-link:hover:not(:disabled) {
   color: var(--color-state-accent-hover);
 }

package/dist/page-notice/page-notice.css

@@ -10,10 +10,11 @@
 }
 div[role="region"].page-notice,
 section.page-notice {
-  display: flex;
+  display: grid;
+  grid-template-columns: 40px auto auto auto;
 }
 span[role="region"].page-notice {
-  display: inline-flex;
+  display: grid;
 }
 .page-notice__title {
   font-size: 0.875rem;
@@ -29,6 +30,12 @@ span[role="region"].page-notice {
   font-size: 0.875rem;
   font-weight: bold;
 }
+.page-notice__cta a {
+  white-space: nowrap;
+}
+.page-notice__dismiss {
+  cursor: pointer;
+}
 .page-notice a:hover {
   color: var(--page-notice-color, var(--color-foreground-on-inverse));
 }
@@ -65,35 +72,49 @@ span[role="region"].page-notice {
   background-color: var(--page-notice-general-background-color, var(--color-background-inverse));
 }
 .page-notice__header {
-  align-items: center;
-  display: flex;
-  justify-content: center;
+  grid-column: 1;
+  grid-row: 1;
   padding-right: 16px;
 }
-.page-notice__main,
-.page-notice__footer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+.page-notice__main {
+  grid-column: 2;
+  grid-row: 1;
+  padding-right: 16px;
 }
 .page-notice__footer {
-  flex-shrink: 0;
-  margin-left: auto;
-  padding-left: 16px;
-  width: auto;
+  grid-column: 4;
+  grid-row: 1;
 }
 /* support legacy 6.5 notice with heading + paragaphs */
 .page-notice__main p {
   font-size: 0.875rem;
   margin: 4px 0 0;
 }
+p.page-notice__cta {
+  grid-column: 2;
+  grid-row: 2;
+  justify-self: start;
+  margin-right: 16px;
+  margin-top: 16px;
+}
 @media (min-width: 601px) {
   section.page-notice,
   div[role="region"].page-notice {
     flex-wrap: nowrap;
     margin: 16px 0;
   }
+  .page-notice__title {
+    margin-top: 4px;
+  }
+  p.page-notice__cta {
+    grid-column: 4;
+    grid-row: 1;
+    justify-self: end;
+    margin-top: 0;
+    padding-right: 16px;
+  }
   .page-notice__footer {
+    justify-self: end;
     margin-top: 0;
   }
 }