@ebay/skin 14.1.1 → 14.2.0-0

package/dist/infotip/infotip.css

@@ -4,6 +4,7 @@
   --bubble-right-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
   --bubble-bottom-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
   --bubble-top-box-shadow: 0 0 3px rgba(17, 24, 32, 0.499);
+  --bubble-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.15)) drop-shadow(0 5px 17px rgba(0, 0, 0, 0.2));
 }
 .infotip {
   position: relative;
@@ -13,7 +14,7 @@ span.infotip {
 }
 .infotip__overlay {
   border-radius: var(--bubble-border-radius, var(--border-radius-50));
-  box-shadow: var(--bubble-base-box-shadow);
+  filter: var(--bubble-filter);
   font-size: 14px;
   max-width: 344px;
   width: -webkit-max-content;
@@ -22,7 +23,7 @@ span.infotip {
   background-color: var(--infotip-background-color, var(--color-background-primary));
   color: var(--infotip-foreground-color, var(--color-foreground-primary));
   display: none;
-  left: -10px;
+  left: -6px;
   margin-top: 16px;
   position: absolute;
 }
@@ -38,7 +39,7 @@ span.infotip__mask {
 }
 .infotip__cell {
   display: flex;
-  padding: 16px;
+  padding: 8px 16px;
   word-break: break-word;
 }
 .infotip__content {
@@ -52,82 +53,70 @@ span.infotip__mask {
 }
 .infotip__pointer {
   background-color: var(--infotip-background-color, var(--color-background-primary));
-  height: 16px;
+  height: 8px;
   position: absolute;
   transform: rotate(45deg);
-  width: 16px;
+  width: 8px;
   z-index: 0;
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
-  left: calc(50% - 8px);
+  top: -4px;
+  left: calc(50% - 4px);
 }
 .infotip__pointer--top-left {
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
+  top: -4px;
   left: 12px;
 }
 .infotip__pointer--top {
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
-  left: calc(50% - 8px);
+  top: -4px;
+  left: calc(50% - 4px);
 }
 .infotip__pointer--top-right {
-  box-shadow: var(--bubble-top-box-shadow);
-  top: -7px;
+  top: -4px;
   left: auto;
   right: 12px;
 }
 .infotip__pointer--bottom-left {
-  bottom: -7px;
-  box-shadow: var(--bubble-bottom-box-shadow);
+  bottom: -4px;
   top: auto;
   left: 12px;
 }
 .infotip__pointer--bottom {
-  bottom: -7px;
-  box-shadow: var(--bubble-bottom-box-shadow);
+  bottom: -4px;
   top: auto;
-  left: calc(50% - 8px);
+  left: calc(50% - 4px);
 }
 .infotip__pointer--bottom-right {
-  bottom: -7px;
-  box-shadow: var(--bubble-bottom-box-shadow);
+  bottom: -4px;
   top: auto;
   left: auto;
   right: 12px;
 }
 .infotip__pointer--left {
-  top: calc(50% - 8px);
-  left: -7px;
+  top: calc(50% - 4px);
+  left: -4px;
 }
 .infotip__pointer--left-bottom {
   bottom: 12px;
-  box-shadow: var(--bubble-left-box-shadow);
-  left: -7px;
+  left: -4px;
   top: auto;
 }
 .infotip__pointer--left-top {
-  box-shadow: var(--bubble-left-box-shadow);
-  left: -7px;
+  left: -4px;
   top: 12px;
 }
 .infotip__pointer--right {
-  top: calc(50% - 8px);
-  box-shadow: var(--bubble-right-box-shadow);
+  top: calc(50% - 4px);
   left: auto;
-  right: -7px;
+  right: -4px;
 }
 .infotip__pointer--right-bottom {
   bottom: 12px;
-  box-shadow: var(--bubble-right-box-shadow);
   left: auto;
-  right: -7px;
+  right: -4px;
   top: auto;
 }
 .infotip__pointer--right-top {
-  box-shadow: var(--bubble-right-box-shadow);
   left: auto;
-  right: -7px;
+  right: -4px;
   top: 12px;
 }
 .infotip__heading {

package/dist/inline-notice/inline-notice.css

@@ -8,9 +8,9 @@ span.inline-notice {
   display: inline-flex;
 }
 .inline-notice__header {
-  align-items: center;
   display: flex;
   margin-right: 8px;
+  margin-top: 4px;
 }
 .inline-notice p {
   margin: 4px 0;
@@ -19,6 +19,6 @@ span.inline-notice {
 .inline-notice button.fake-link {
   color: var(--color-foreground-primary);
 }
-[dir="rtl"] .inline-notice__header .icon.icon--confirmation-filled {
+[dir="rtl"] .inline-notice__header .icon.icon--confirmation-filled-small {
   margin-left: 8px;
 }

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

@@ -6,12 +6,12 @@
   color: var(--page-notice-color, var(--color-foreground-on-inverse));
   font-size: 0.875rem;
   margin: 8px 0;
-  padding: 24px 16px;
+  padding: 16px;
 }
 div[role="region"].page-notice,
 section.page-notice {
   display: grid;
-  grid-template-columns: 40px auto auto auto;
+  grid-template-columns: 32px auto auto auto;
 }
 span[role="region"].page-notice {
   display: grid;
@@ -19,7 +19,7 @@ span[role="region"].page-notice {
 .page-notice__title {
   font-size: 0.875rem;
   font-weight: normal;
-  margin: 0;
+  margin: 4px 0 0;
 }
 /* legacy version with separate bold heading */
 .page-notice__title:not(:only-child) {
@@ -84,6 +84,7 @@ span[role="region"].page-notice {
 .page-notice__footer {
   grid-column: 4;
   grid-row: 1;
+  text-align: right;
 }
 /* support legacy 6.5 notice with heading + paragaphs */
 .page-notice__main p {
@@ -104,12 +105,13 @@ p.page-notice__cta {
     margin: 16px 0;
   }
   .page-notice__title {
-    margin-top: 4px;
+    margin-top: 2px;
   }
   p.page-notice__cta {
     grid-column: 4;
     grid-row: 1;
     justify-self: end;
+    margin-bottom: 0;
     margin-top: 0;
     padding-right: 16px;
   }
@@ -122,6 +124,9 @@ p.page-notice__cta {
   padding-left: 16px;
   padding-right: 0;
 }
+[dir="rtl"] .page-notice__main {
+  padding-right: 0;
+}
 [dir="rtl"] .page-notice__footer {
   margin-left: initial;
   margin-right: auto;