@ebay/skin 19.23.0 → 19.24.1

package/dialog.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./dialog.js"] }

package/dialog.css

@@ -0,0 +1 @@
+@import "./dist/dialog/dialog.css";

package/dialog.js

@@ -0,0 +1 @@
+require('./dist/dialog/dialog.css');

package/dialog.mjs

@@ -0,0 +1 @@
+import './dist/dialog/dialog.css';

package/dist/dialog/dialog.css

@@ -0,0 +1,237 @@
+:root {
+    --dialog-scrim-color-hide: rgb(17 24 32 / 0);
+    --dialog-scrim-color-show: rgb(17 24 32 / 0.7);
+    --dialog-lightbox-max-width: 616px;
+    --dialog-max-width: 616px;
+    --dialog-wide-max-width: 896px;
+    --dialog-narrow-max-width: 480px;
+    --dialog-scrim-color: rgb(17 24 32 / 0.7);
+    scrollbar-gutter: stable;
+}
+@keyframes dialog-open-scrim {
+    0% {
+        background: transparent;
+    }
+    to {
+        background-color: var(--dialog-scrim-color);
+    }
+}
+@keyframes dialog-close-scrim {
+    0% {
+        background-color: var(--dialog-scrim-color);
+    }
+    to {
+        background: transparent;
+    }
+}
+@keyframes dialog-open-scale {
+    0% {
+        scale: 0.75;
+    }
+    to {
+        scale: 1;
+    }
+}
+@keyframes dialog-close-scale {
+    0% {
+        scale: 1;
+    }
+    to {
+        scale: 0.75;
+    }
+}
+@keyframes dialog-open-opacity {
+    0% {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes dialog-close-opacity {
+    0% {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+body:has(.dialog[open]) {
+    overflow: hidden !important;
+}
+.dialog {
+    background-color: var(--color-background-primary);
+    border: none;
+    border-radius: var(--border-radius-150);
+    color: var(--color-foreground-primary);
+    flex-direction: column;
+    max-height: 90%;
+    max-width: 88%;
+    min-height: 55px;
+    min-width: 208px;
+    padding: 0;
+}
+.dialog__header {
+    display: flex;
+    flex-shrink: 0;
+    margin: var(--spacing-200) var(--spacing-200) 0;
+    position: relative;
+}
+.dialog__header h1,
+.dialog__header h2,
+.dialog__header h3,
+.dialog__header h4,
+.dialog__header h5,
+.dialog__header h6 {
+    align-self: center;
+    flex: 1 1 auto;
+    margin: 0;
+    overflow-wrap: anywhere;
+}
+.dialog__header > :last-child:not(:only-child) {
+    flex-shrink: 0;
+    margin-inline-start: var(--spacing-200);
+}
+.dialog__main {
+    box-sizing: border-box;
+    flex: 1 1 auto;
+    overflow: auto;
+    padding: var(--spacing-200);
+    position: relative;
+}
+.dialog__main > :first-child {
+    margin-top: 0;
+}
+.dialog__main > :last-child {
+    margin-bottom: 0;
+}
+.dialog__footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: var(--spacing-200);
+    position: relative;
+}
+.dialog__footer > :not(:first-child) {
+    margin-top: var(--spacing-200);
+}
+.dialog__image {
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    border-radius: var(--border-radius-100) var(--border-radius-100) 0 0;
+    height: 218px;
+    position: absolute;
+    width: 100%;
+}
+.dialog--expressive .dialog__header > * {
+    margin-top: 218px;
+}
+button.icon-btn.dialog__close,
+button.icon-btn.dialog__prev {
+    align-self: flex-start;
+    border: 0;
+    flex-shrink: 0;
+    height: 32px;
+    min-width: 32px;
+    position: relative;
+    width: 32px;
+    z-index: 1;
+}
+button.icon-btn.dialog__prev {
+    margin-inline-end: var(--spacing-200);
+}
+.dialog--expressive button.icon-btn.dialog__close,
+.dialog--expressive button.icon-btn.dialog__prev {
+    margin: 0;
+}
+.dialog--expressive button.icon-btn.dialog__prev + * {
+    margin-inline-start: -32px;
+}
+.dialog--expressive .dialog__header {
+    margin: var(--spacing-300) var(--spacing-300) 0;
+}
+.dialog--expressive .dialog__footer,
+.dialog--expressive .dialog__main {
+    padding: var(--spacing-200) var(--spacing-300);
+}
+.dialog[open] {
+    display: flex;
+}
+.dialog[open].dialog--close::backdrop {
+    animation: dialog-close-scrim var(--motion-duration-short-3)
+        var(--motion-easing-continuous) forwards;
+}
+.dialog[open]::backdrop {
+    animation: dialog-open-scrim var(--motion-duration-short-3)
+        var(--motion-easing-continuous) forwards;
+}
+.dialog[open].dialog--close {
+    animation:
+        dialog-close-scale var(--motion-duration-medium-3)
+            var(--motion-easing-soft-exit),
+        dialog-close-opacity var(--motion-duration-short-3)
+            var(--motion-easing-continuous);
+    transition:
+        display var(--motion-duration-short-3) allow-discrete,
+        overlay var(--motion-duration-short-3) allow-discrete;
+}
+.dialog[open] {
+    animation:
+        dialog-open-scale var(--motion-duration-medium-3)
+            var(--motion-easing-standard),
+        dialog-open-opacity var(--motion-duration-short-3)
+            var(--motion-easing-continuous);
+}
+.dialog--large {
+    height: 98%;
+    max-height: 98%;
+    width: 95%;
+}
+@media (min-width: 512px) {
+    .dialog {
+        border-radius: var(--border-radius-100);
+    }
+    .dialog--wide {
+        max-width: 88%;
+    }
+    .dialog--wide .dialog__image {
+        height: 256px;
+    }
+    .dialog--wide.dialog--expressive .dialog__header > * {
+        margin-top: 256px;
+    }
+    .dialog__footer {
+        flex-direction: row;
+        justify-content: flex-end;
+    }
+    .dialog__footer > :not(:first-child) {
+        margin-left: var(--spacing-100);
+        margin-top: 0;
+    }
+    .dialog--large {
+        align-self: center;
+        height: 70%;
+        max-height: 95%;
+    }
+}
+@media (min-width: 768px) {
+    .dialog {
+        max-width: var(--dialog-max-width);
+    }
+    .dialog--narrow {
+        max-width: var(--dialog-narrow-max-width);
+    }
+    .dialog--wide {
+        max-width: var(--dialog-wide-max-width);
+        max-width: 88%;
+    }
+}
+@media (min-width: 1024px) {
+    .dialog--wide {
+        max-width: var(--dialog-wide-max-width);
+    }
+}
+[dir="rtl"] button.icon-btn.dialog__prev .icon--16 {
+    transform: rotate(180deg);
+}

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

@@ -80,7 +80,7 @@ span[role="region"].page-notice {
     );
     border-color: var(
         --page-notice-confirmation-border-color,
-        var(--color-border-confirmation)
+        var(--color-border-success)
     );
 }
 .page-notice--confirmation .page-notice__header svg {

package/dist/video/video.css

@@ -51,6 +51,13 @@
     justify-content: center;
     width: 100%;
 }
+.video-player .shaka-play-button-container .shaka-play-button {
+    background: none;
+    border: 0;
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+}
 .video-player--with-nav .shaka-controls-container {
     pointer-events: none;
 }

package/index.browser.json

@@ -19,6 +19,7 @@
     "require: ./cta-button.js",
     "require: ./date-textbox.js",
     "require: ./details.js",
+    "require: ./dialog.js",
     "require: ./donut-chart.js",
     "require: ./drawer-dialog.js",
     "require: ./education-notice.js",

package/index.css

@@ -17,6 +17,7 @@
 @import "./cta-button.css";
 @import "./date-textbox.css";
 @import "./details.css";
+@import "./dialog.css";
 @import "./donut-chart.css";
 @import "./drawer-dialog.css";
 @import "./education-notice.css";

package/index.js

@@ -17,6 +17,7 @@ require('./confirm-dialog.js');
 require('./cta-button.js');
 require('./date-textbox.js');
 require('./details.js');
+require('./dialog.js');
 require('./donut-chart.js');
 require('./drawer-dialog.js');
 require('./education-notice.js');

package/index.mjs

@@ -17,6 +17,7 @@ import './dist/confirm-dialog/confirm-dialog.css';
 import './dist/cta-button/cta-button.css';
 import './dist/date-textbox/date-textbox.css';
 import './dist/details/details.css';
+import './dist/dialog/dialog.css';
 import './dist/donut-chart/donut-chart.css';
 import './dist/drawer-dialog/drawer-dialog.css';
 import './dist/education-notice/education-notice.css';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ebay/skin",
-    "version": "19.23.0",
+    "version": "19.24.1",
     "description": "Skin - CSS modules that represent the brand eBay",
     "keywords": [
         "eBay",