@ebay/skin 16.0.0-2 → 16.1.0-0

package/src/less/carousel/carousel.less

@@ -46,7 +46,8 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    transition: opacity @ebay-carousel-transition-time @ebay-carousel-transition-function;
+    transition: opacity @ebay-carousel-transition-time
+        @ebay-carousel-transition-function;
     width: 32px;
     z-index: 1;
 
@@ -62,7 +63,7 @@
     // progressive enhancement for browsers with support
     // :focus-within and :hover cannot be combined as
     // IE/Edge will discard the entire rule
-    @media (min-width: 601px) {
+    @media (min-width: @_screen-size-SM) {
         .carousel:focus-within & {
             .show-control();
         }
@@ -118,7 +119,8 @@
         margin: 0;
         padding: 0;
         position: relative;
-        transition: transform @ebay-carousel-transition-time @ebay-carousel-transition-function;
+        transition: transform @ebay-carousel-transition-time
+            @ebay-carousel-transition-function;
         width: 100%;
 
         > li {
@@ -217,8 +219,9 @@ span.carousel__container {
 /* autoprefixer: ignore next */
 @supports not /*!Y */
     (
-        /*!Y */ (-webkit-scroll-snap-coordinate: 0 0) or /*!Y */ (-ms-scroll-snap-coordinate: 0 0)
-            or /*!Y */ (scroll-snap-coordinate: 0 0) or /*!Y */ (scroll-snap-align: start)
+        /*!Y */ (-webkit-scroll-snap-coordinate: 0 0) or /*!Y */
+            (-ms-scroll-snap-coordinate: 0 0) or /*!Y */
+            (scroll-snap-coordinate: 0 0) or /*!Y */ (scroll-snap-align: start)
     ) {
     // always show paddles when scroll snapping and hover is not supported.
     .carousel:not(.carousel__autoplay) .carousel__control {
@@ -237,8 +240,9 @@ span.carousel__container {
 
 /* autoprefixer: ignore next */
 @supports (
-    /*!Y */ (-webkit-scroll-snap-coordinate: 0 0) or /*!Y */ (-ms-scroll-snap-coordinate: 0 0) or
-        /*!Y */ (scroll-snap-coordinate: 0 0) or /*!Y */ (scroll-snap-align: start)
+    /*!Y */ (-webkit-scroll-snap-coordinate: 0 0) or /*!Y */
+        (-ms-scroll-snap-coordinate: 0 0) or /*!Y */
+        (scroll-snap-coordinate: 0 0) or /*!Y */ (scroll-snap-align: start)
 ) {
     /* autoprefixer: off */
     .carousel:not(.carousel__autoplay) {
@@ -267,7 +271,8 @@ span.carousel__container {
             scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
             scrollbar-width: thin; // Firefox scrollbar
             transition: border-color 0.5s, scrollbar-color 0.5s,
-                transform @ebay-carousel-transition-time @ebay-carousel-transition-function;
+                transform @ebay-carousel-transition-time
+                    @ebay-carousel-transition-function;
 
             &:hover {
                 border-color: rgba(0, 0, 0, 0.4);
@@ -295,7 +300,7 @@ span.carousel__container {
         scroll-snap-coordinate: 0 0;
     }
     /* autoprefixer: on */
-    @media (min-width: 601px) {
+    @media (min-width: @_screen-size-SM) {
         div.carousel {
             margin: 16px 0;
         }

package/src/less/carousel/stories/carousel.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Carousel' };
+export default { title: "Carousel" };
 
 export const continuous = () => `
 <div class="carousel">

package/src/less/checkbox/checkbox.less

@@ -67,19 +67,27 @@ input.checkbox__control[type="checkbox"] {
     width: @dimensions-checkbox-large;
 }
 
-input.checkbox__control[type="checkbox"] + span.checkbox__icon svg.checkbox__checked {
+input.checkbox__control[type="checkbox"]
+    + span.checkbox__icon
+    svg.checkbox__checked {
     display: none;
 }
 
-input.checkbox__control[type="checkbox"] + span.checkbox__icon svg.checkbox__unchecked {
+input.checkbox__control[type="checkbox"]
+    + span.checkbox__icon
+    svg.checkbox__unchecked {
     display: inline-block;
 }
 
-input.checkbox__control[type="checkbox"]:checked + span.checkbox__icon svg.checkbox__checked {
+input.checkbox__control[type="checkbox"]:checked
+    + span.checkbox__icon
+    svg.checkbox__checked {
     display: inline-block;
 }
 
-input.checkbox__control[type="checkbox"]:checked + span.checkbox__icon svg.checkbox__unchecked {
+input.checkbox__control[type="checkbox"]:checked
+    + span.checkbox__icon
+    svg.checkbox__unchecked {
     display: none;
 }
 
@@ -98,6 +106,7 @@ input.checkbox__control[type="checkbox"]:focus + span.checkbox__icon {
     outline-offset: 2px;
 }
 
-input.checkbox__control[type="checkbox"]:focus:not(:focus-visible) + span.checkbox__icon {
+input.checkbox__control[type="checkbox"]:focus:not(:focus-visible)
+    + span.checkbox__icon {
     outline: none;
 }

package/src/less/checkbox/stories/checked.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Checkbox/Checked' };
+export default { title: "Checkbox/Checked" };
 
 export const base = () => `
 <span class="checkbox">

package/src/less/checkbox/stories/mixed.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Checkbox/Mixed' };
+export default { title: "Checkbox/Mixed" };
 
 export const base = () => `
 <span class="checkbox">
@@ -8,7 +8,7 @@ export const base = () => `
             <use href="#icon-checkbox-unchecked-18"></use>
         </svg>
         <svg aria-hidden="true" class="checkbox__checked" focusable="false">
-            <use href="#icon-web-checkbox-indterminate-18"></use>
+            <use href="#icon-checkbox-mixed-18"></use>
         </svg>
     </span>
 </span>

package/src/less/checkbox/stories/unchecked.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Checkbox/Unchecked' };
+export default { title: "Checkbox/Unchecked" };
 
 export const base = () => `
 <span class="checkbox">

package/src/less/combobox/combobox.less

@@ -99,7 +99,10 @@ span.combobox {
     appearance: none;
     .background-color-token(combobox-textbox-background-color, color-background-secondary);
     .border-color-token(combobox-textbox-border-color, color-stroke-default);
-    border-radius: var(--combobox-textbox-border-radius, var(--border-radius-50));
+    border-radius: var(
+        --combobox-textbox-border-radius,
+        var(--border-radius-50)
+    );
     border-style: solid;
     border-width: 1px;
     box-sizing: border-box;

package/src/less/combobox/stories/combobox.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Combobox' };
+export default { title: "Combobox" };
 
 export const collapsed = () => `
 <span class="combobox">

package/src/less/confirm-dialog/confirm-dialog.less

@@ -63,7 +63,7 @@ button.confirm-dialog__confirm {
 
     &.confirm-dialog--mask-fade,
     &.confirm-dialog--mask-fade-slow {
-        background-color: @dialog-scrim-color-hide;
+        background-color: var(--dialog-scrim-color-hide);
     }
 
     .confirm-dialog__window--fade {
@@ -79,7 +79,7 @@ button.confirm-dialog__confirm {
 
     &.confirm-dialog--mask-fade,
     &.confirm-dialog--mask-fade-slow {
-        background-color: @dialog-scrim-color-show;
+        background-color: var(--dialog-scrim-color-show);
     }
 
     .confirm-dialog__window--fade {
@@ -87,15 +87,14 @@ button.confirm-dialog__confirm {
     }
 }
 
-// In order to prevent the margins to meet the ege of the page at medium screen sizes
-@media (min-width: calc(@_screen-size-MD + 1px)) and (max-width: @_screen-size-LG) {
+@media (min-width: @_screen-size-MD) {
     .confirm-dialog__window {
         max-width: calc(88% - @spacing-400);
     }
 }
 
-@media (min-width: calc(@_screen-size-LG + 1px)) {
+@media (min-width: @_screen-size-LG) {
     .confirm-dialog__window {
-        max-width: @dialog-lightbox-max-width;
+        max-width: var(--dialog-lightbox-max-width);
     }
 }

package/src/less/confirm-dialog/stories/confirm-dialog.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Confirm Dialog' };
+export default { title: "Confirm Dialog" };
 
 export const base = () => `
 <div aria-labelledby="confirm-dialog-title" aria-modal="true" class="confirm-dialog confirm-dialog--mask-fade" role="dialog">

package/src/less/cta-button/stories/cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'CTA Button/Cascade' };
+export default { title: "CTA Button/Cascade" };
 
 export const color = () => `
 <a class="cta-btn" href="http://www.ebay.com" style="color: red">

package/src/less/cta-button/stories/cta-button.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'CTA Button' };
+export default { title: "CTA Button" };
 
 export const base = () => `
 <a class="cta-btn" href="http://www.ebay.com">

package/src/less/cta-button/stories/dimensions.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'CTA Button/Dimensions' };
+export default { title: "CTA Button/Dimensions" };
 
 export const large = () => `
 <a class="cta-btn cta-btn--large" href="http://www.ebay.com">

package/src/less/date-textbox/date-textbox.less

@@ -7,6 +7,10 @@
     --calendar-month-width: 311px;
 }
 
+.date-textbox > .textbox + .textbox {
+    margin-left: @spacing-100;
+}
+
 .date-textbox__popover {
     .background-color-token(calendar-background-color, color-background-primary);
     border-radius: @spacing-200;
@@ -21,7 +25,7 @@
     display: none;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: @_screen-size-SM) {
     .date-textbox__popover {
         left: 0;
         margin-left: 0;

package/src/less/details/stories/cascade.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Details/Cascade' };
+export default { title: "Details/Cascade" };
 
 export const RTL = () => `
 <div dir="rtl">

package/src/less/details/stories/details.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Details' };
+export default { title: "Details" };
 
 export const closed = () => `
 <details class="details">

package/src/less/drawer-dialog/drawer-dialog.less

@@ -124,7 +124,7 @@ button.icon-button.drawer-dialog__close {
     // Root animations.
     &.drawer-dialog--mask-fade,
     &.drawer-dialog--mask-fade-slow {
-        background-color: @dialog-scrim-color-hide;
+        background-color: var(--dialog-scrim-color-hide);
     }
 
     // code smell, chained modifier
@@ -143,7 +143,7 @@ button.icon-button.drawer-dialog__close {
     // Root animations.
     &.drawer-dialog--mask-fade,
     &.drawer-dialog--mask-fade-slow {
-        background-color: @dialog-scrim-color-show;
+        background-color: var(--dialog-scrim-color-show);
     }
 
     // Child animations.

package/src/less/drawer-dialog/stories/drawer-dialog.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Drawer Dialog' };
+export default { title: "Drawer Dialog" };
 
 export const empty = () => `
 <div aria-labelledby="drawer-dialog-title" aria-modal="true" class="drawer-dialog drawer-dialog--mask-fade-slow" role="dialog">

package/src/less/eek/eek.less

@@ -111,8 +111,8 @@
     display: inline-block;
     font-size: 18px;
     margin-left: 8px;
-    text-shadow: -0.5px 0.5px 0 @eek-color, 0.5px 0.5px 0 @eek-color, 0.5px -0.5px 0 @eek-color,
-        -0.5px -0.5px 0 @eek-color;
+    text-shadow: -0.5px 0.5px 0 @eek-color, 0.5px 0.5px 0 @eek-color,
+        0.5px -0.5px 0 @eek-color, -0.5px -0.5px 0 @eek-color;
 }
 
 .eek__rating-range {

package/src/less/field/stories/stacked.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Field/Stacked' };
+export default { title: "Field/Stacked" };
 
 export const group = () => `
 <fieldset>

package/src/less/field/stories/unstacked.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Field/Unstacked' };
+export default { title: "Field/Unstacked" };
 
 export const inlineLevel = () => `
 <span class="field">

package/src/less/filter-button/stories/button.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Filter/Button' };
+export default { title: "Filter/Button" };
 
 export const base = () => `
 <button type="button" class="filter-button">

package/src/less/filter-button/stories/group.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Filter/Button/Group' };
+export default { title: "Filter/Button/Group" };
 
 export const group = () => `
 <div class="filter-group">

package/src/less/filter-button/stories/link.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Filter/Button/Link' };
+export default { title: "Filter/Button/Link" };
 
 export const base = () => `
 <a href="http://www.ebay.com" class="filter-link">

package/src/less/filter-menu/filter-menu.less

@@ -100,13 +100,17 @@ button.filter-menu-form__footer[type="submit"] {
     display: block;
 }
 
-.filter-menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checkbox-unchecked-18,
-.filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-unchecked-18 {
+.filter-menu__item[role="menuitemcheckbox"][aria-checked="true"]
+    svg.icon--checkbox-unchecked-18,
+.filter-menu__item[role="menuitemradio"][aria-checked="true"]
+    svg.icon--radio-unchecked-18 {
     display: none;
 }
 
-.filter-menu__item[role="menuitemcheckbox"][aria-checked="true"] svg.icon--checkbox-checked-18,
-.filter-menu__item[role="menuitemradio"][aria-checked="true"] svg.icon--radio-checked-18 {
+.filter-menu__item[role="menuitemcheckbox"][aria-checked="true"]
+    svg.icon--checkbox-checked-18,
+.filter-menu__item[role="menuitemradio"][aria-checked="true"]
+    svg.icon--radio-checked-18 {
     display: block;
 }
 

package/src/less/filter-menu/stories/filter-menu.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Filter/Menu' };
+export default { title: "Filter/Menu" };
 
 export const base = () => `
 <span class="filter-menu">

package/src/less/filter-menu-button/filter-menu-button.less

@@ -99,7 +99,8 @@ button.filter-menu-button__button[aria-pressed="true"][aria-disabled="true"]:hov
     z-index: 1;
 }
 
-button.filter-menu-button__button[aria-expanded="true"] + .filter-menu-button__menu {
+button.filter-menu-button__button[aria-expanded="true"]
+    + .filter-menu-button__menu {
     display: block;
 }
 

package/src/less/filter-menu-button/stories/filter-menu-button.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Filter/Menu Button' };
+export default { title: "Filter/Menu Button" };
 
 export const collapsed = () => `
 <span class="filter-menu-button">

package/src/less/floating-label/stories/floating-label.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Floating Label' };
+export default { title: "Floating Label" };
 
 export const base = () => `
 <span class="floating-label">

package/src/less/fullscreen-dialog/fullscreen-dialog.less

@@ -81,7 +81,7 @@ button.fullscreen-dialog__back {
 
     &.fullscreen-dialog--mask-fade,
     &.fullscreen-dialog--mask-fade-slow {
-        background-color: @dialog-scrim-color-hide;
+        background-color: var(--dialog-scrim-color-hide);
     }
 
     .fullscreen-dialog__window--fade {
@@ -105,7 +105,7 @@ button.fullscreen-dialog__back {
 
     &.fullscreen-dialog--mask-fade,
     &.fullscreen-dialog--mask-fade-slow {
-        background-color: @dialog-scrim-color-show;
+        background-color: var(--dialog-scrim-color-show);
     }
 
     .fullscreen-dialog__window--fade {

package/src/less/fullscreen-dialog/stories/fullscreen-dialog.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Fullscreen Dialog' };
+export default { title: "Fullscreen Dialog" };
 
 export const closeButton = () => `
 <div aria-labelledby="fullscreen-dialog-title" aria-modal="true" class="fullscreen-dialog" role="dialog">

package/src/less/global/stories/global.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Global' };
+export default { title: "Global" };
 
 export const headings = () => `
     <h1>This is a level 1 heading</h1>

package/src/less/icon/generated/icon.less

@@ -219,6 +219,14 @@ svg.icon--book-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--bookmark-16 {
+    height: 16px;
+    width: 16px;
+}
+svg.icon--bookmark-24 {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--brand-authorized-seller-16-fit {
     height: 16px;
     width: 10px;
@@ -1131,10 +1139,6 @@ svg.icon--image-64 {
     height: 64px;
     width: 64px;
 }
-svg.icon--image-placeholder {
-    height: 300px;
-    width: 300px;
-}
 svg.icon--inbox-16 {
     height: 16px;
     width: 16px;
@@ -1651,10 +1655,18 @@ svg.icon--play-filled-16 {
     height: 16px;
     width: 16px;
 }
+svg.icon--play-filled-16-colored {
+    height: 16px;
+    width: 16px;
+}
 svg.icon--play-filled-24 {
     height: 24px;
     width: 24px;
 }
+svg.icon--play-filled-24-colored {
+    height: 24px;
+    width: 24px;
+}
 svg.icon--postepay-12-colored {
     height: 12px;
     width: 20px;
@@ -2299,7 +2311,7 @@ svg.icon--wrench-24 {
     height: 24px;
     width: 24px;
 }
-svg.icon--zoom-In-16 {
+svg.icon--zoom-in-16 {
     height: 16px;
     width: 16px;
 }

package/src/less/icon/stories/icon.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Icon' };
+export default { title: "Icon" };
 
 export const insideHeading = () => `
 <h2>

package/src/less/icon-button/stories/alignment.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Icon Button/Alignment' };
+export default { title: "Icon Button/Alignment" };
 
 export const menu = () => `
 <button aria-label="menu" type="button" class="icon-btn">

package/src/less/image-placeholder/image-placeholder.less

@@ -0,0 +1,4 @@
+svg.image-placeholder {
+    height: inherit;
+    width: inherit;
+}

package/src/less/image-placeholder/stories/image-placeholder.stories.js

@@ -0,0 +1,35 @@
+export default { title: "Image Placeholder" };
+
+export const insideHeading = () => `
+<h2>
+    <svg class="image-placeholder">
+        <use href="#image-placeholder"></use>
+    </svg>
+</h2>
+`;
+
+export const RTLInsideHeading = () => `
+<div dir="rtl">
+    <h2>
+        <svg class="image-placeholder">
+            <use href="#image-placeholder"></use>
+        </svg>
+    </h2>
+</div>
+`;
+
+export const differentWidths = () => `
+<p>
+    <svg class="image-placeholder" style="border: 1px solid black; width: 50px; height: 50px">
+        <use href="#image-placeholder"></use>
+    </svg>
+</p>
+`;
+
+export const inContainerVariableWidth = () => `
+<div style="border: 1px dotted black; width: 150px; height: 150px">
+    <svg class="image-placeholder" >
+        <use href="#image-placeholder"></use>
+    </svg>
+</div>
+`;

package/src/less/index.stories.js

@@ -1 +1 @@
-import '../../src/less/bundles/skin-full.less';
+import "../../src/less/bundles/skin-full.less";

package/src/less/infotip/infotip.less

@@ -123,7 +123,7 @@ button.infotip__close,
     margin-left: @spacing-200;
 }
 
-@media (min-width: 601px) {
+@media (min-width: @_screen-size-SM) {
     .infotip__overlay {
         .bubble-large-screen();
     }

package/src/less/infotip/stories/infotip.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Infotip' };
+export default { title: "Infotip" };
 
 export const collapsed = () => `
 <span class="infotip">

package/src/less/inline-notice/stories/inline.stories.js

@@ -1,4 +1,4 @@
-export default { title: 'Inline Notice' };
+export default { title: "Inline Notice" };
 
 export const confirmation = () => `
 <div class="inline-notice inline-notice--confirmation">

package/src/less/legacy-theme/legacy-theme.less

@@ -59,8 +59,8 @@ a.icon-link {
 .tourtip,
 .infotip {
     --bubble-border-radius: 0;
-    --bubble-base-box-shadow: 0 -2px 2px @box-shadow, 2px 0 2px @box-shadow, 0 2px 2px @box-shadow,
-        -2px 0 2px @box-shadow;
+    --bubble-base-box-shadow: 0 -2px 2px @box-shadow, 2px 0 2px @box-shadow,
+        0 2px 2px @box-shadow, -2px 0 2px @box-shadow;
     --bubble-left-box-shadow: -2px 2px 2px @box-shadow;
     --bubble-right-box-shadow: 2px -2px 2px @box-shadow;
     --bubble-bottom-box-shadow: 2px 2px 2px @box-shadow;

package/src/less/lightbox-dialog/lightbox-dialog.less

@@ -18,6 +18,7 @@
     .dialog-body-content();
 
     min-height: 18px;
+    overflow: auto;
 }
 
 .lightbox-dialog__footer {
@@ -69,7 +70,7 @@ button.icon-btn.lightbox-dialog__close {
 
     &.lightbox-dialog--mask-fade,
     &.lightbox-dialog--mask-fade-slow {
-        background-color: @dialog-scrim-color-hide;
+        background-color: var(--dialog-scrim-color-hide);
     }
 
     .lightbox-dialog__window--fade {
@@ -85,7 +86,7 @@ button.icon-btn.lightbox-dialog__close {
 
     &.lightbox-dialog--mask-fade,
     &.lightbox-dialog--mask-fade-slow {
-        background-color: @dialog-scrim-color-show;
+        background-color: var(--dialog-scrim-color-show);
     }
 
     .lightbox-dialog__window--fade {
@@ -94,20 +95,22 @@ button.icon-btn.lightbox-dialog__close {
 }
 
 // In order to prevent the margins to meet the ege of the page at medium screen sizes
-@media (min-width: 601px) and (max-width: 768px) {
+@media (min-width: @_screen-size-SM) {
     .lightbox-dialog__window {
         max-width: calc(88% - @spacing-400);
     }
+
+    .lightbox-dialog__window .lightbox-dialog__footer {
+        .dialog-footer-content-large();
+    }
 }
 
-@media (min-width: 769px) {
+@media (min-width: @_screen-size-MD) {
     .lightbox-dialog__window {
-        max-width: @dialog-lightbox-max-width;
+        max-width: var(--dialog-lightbox-max-width);
     }
-}
 
-@media (min-width: 601px) {
-    .lightbox-dialog__window .lightbox-dialog__footer {
-        .dialog-footer-content-large();
+    .lightbox-dialog--wide .lightbox-dialog__window {
+        max-width: var(--dialog-lightbox-wide-max-width);
     }
 }