@ebay/skin 19.8.1 → 19.10.0

package/dist/bundles/skin-full.css

@@ -1,9 +1,9 @@
 @charset "UTF-8";
 /*!
-Skin
-Copyright 2017 eBay! Inc. All rights reserved.
-Licensed under the BSD License.
-https://github.com/eBay/skin/blob/master/LICENSE.txt
+evo-web/skin
+Copyright 2018 eBay! Inc. All rights reserved.
+Licensed under the MIT License.
+https://github.com/eBay/evo-web/blob/master/LICENSE
 */
 :root{
   --border-radius-50:8px;
@@ -810,28 +810,6 @@ a:not([href]),a[aria-disabled=true]{
   border-right-style:inset;
   box-shadow:none;
 }
-@keyframes chevron-bounce-open{
-  0%{
-    transform:translateY(0);
-  }
-  50%{
-    transform:translateY(-7px);
-  }
-  to{
-    transform:translateY(0);
-  }
-}
-@keyframes chevron-bounce-close{
-  0%{
-    transform:translateY(0);
-  }
-  50%{
-    transform:translateY(7px);
-  }
-  to{
-    transform:translateY(0);
-  }
-}
 ul.accordion{
   margin:0;
   padding:0;
@@ -1759,6 +1737,161 @@ button.btn--floating-label .btn__floating-label--inline{
   border-left-color:var(--btn-primary-border-color, var(--color-stroke-accent));
   border-right-color:var(--primary-border-split-color, var(--color-stroke-subtle));
 }
+
+.card{
+  background-color:var(--color-background-secondary);
+  border:none;
+  border-radius:var(--border-radius-150);
+  color:var(--color-foreground-primary);
+  display:flex;
+  flex-direction:column;
+  max-width:400px;
+  min-width:200px;
+  outline:6px solid transparent;
+  outline-offset:4px;
+  padding-block-end:var(--spacing-150);
+}
+
+.card--outlined{
+  background-color:inherit;
+  border:1px solid var(--color-stroke-subtle);
+}
+
+a.card{
+  color:inherit;
+  text-decoration:none;
+}
+
+button.card{
+  font-size:inherit;
+  line-height:inherit;
+  padding:0;
+  padding-block-end:var(--spacing-150);
+  text-align:start;
+  transition:transform var(--motion-duration-medium-3) var(--motion-easing-quick-enter), box-shadow var(--motion-duration-medium-3) var(--motion-easing-quick-enter);
+}
+
+.card[disabled],.card[href=""]{
+  filter:grayscale(1);
+  opacity:.5;
+  pointer-events:none;
+}
+
+button.card:hover{
+  cursor:pointer;
+}
+
+.card:hover .card__hero-image{
+  transform:scale3d(1.01, 1.01, 1);
+}
+
+.card:focus-visible{
+  animation:card-focus-animation var(--motion-duration-short-3) var(--motion-easing-quick-enter) forwards;
+}
+
+.card__media{
+  aspect-ratio:1/1;
+  margin:var(--spacing-150);
+  margin-block-end:var(--spacing-200);
+  overflow:hidden;
+}
+
+.card__hero-image,.card__media{
+  border-radius:var(--border-radius-100);
+}
+
+.card__hero-image{
+  display:block;
+  height:100%;
+  object-fit:cover;
+  transition:transform var(--motion-duration-long-3) var(--motion-easing-quick-enter);
+  width:100%;
+}
+
+.card--full-hero .card__hero-image,.card--full-hero .card__media{
+  border-bottom-left-radius:0;
+  border-bottom-right-radius:0;
+}
+
+.card__main{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  margin-inline:var(--spacing-150);
+}
+
+.card__overline{
+  align-items:center;
+  display:flex;
+  font-weight:700;
+  gap:var(--spacing-100);
+  margin-block-end:var(--spacing-100);
+}
+
+.card__title{
+  font-size:var(--font-size-large-1);
+  font-weight:700;
+  margin:0;
+  margin-block-end:var(--spacing-50);
+}
+
+.card__description{
+  flex:1;
+}
+
+.card__action{
+  margin-block-start:var(--spacing-200);
+}
+
+.card--horizontal{
+  flex-direction:row;
+  max-width:100%;
+  width:100%;
+}
+
+.card--horizontal .card__media{
+  aspect-ratio:1/1;
+  margin-block-end:0;
+  max-width:160px;
+  min-width:90px;
+  width:25%;
+}
+
+.card--horizontal .card__hero-image{
+  aspect-ratio:1/1;
+  height:auto;
+}
+
+.card--horizontal .card__main{
+  margin-block-start:var(--spacing-150);
+  margin-inline-start:0;
+}
+
+.card--full-hero .card__media{
+  margin:0;
+  margin-block-end:var(--spacing-200);
+}
+
+.card--aspect-5-4 .card__media{
+  aspect-ratio:5/4;
+}
+
+.card--aspect-16-9 .card__media{
+  aspect-ratio:16/9;
+}
+
+@keyframes card-focus-animation{
+  0%{
+    outline-color:var(--color-stroke-accent);
+    outline-offset:4px;
+    outline-width:6px;
+  }
+  to{
+    outline-color:var(--color-stroke-accent);
+    outline-offset:0;
+    outline-width:2px;
+  }
+}
 .carousel{
   position:relative;
 }
@@ -2368,17 +2501,20 @@ input.checkbox__control[type=checkbox]:focus:not(:focus-visible)+span.checkbox__
 }
 .chip{
   align-items:center;
-  background-color:var(--color-background-tertiary);
-  border-radius:var(--spacing-400);
-  color:var(--color-foreground-primary);
+  background-color:var(--color-background-strong);
+  border-radius:var(--border-radius-50);
+  box-sizing:border-box;
+  color:var(--color-foreground-on-strong);
   display:inline-flex;
   font-size:var(--font-size-default);
-  gap:2px;
+  gap:var(--spacing-75);
+  height:var(--spacing-400);
   justify-content:space-between;
   max-width:296px;
-  min-height:var(--spacing-250);
   min-width:32px;
   padding:0 var(--spacing-150);
+  text-decoration:none;
+  vertical-align:bottom;
 }
 
 .chip__text{
@@ -2388,34 +2524,34 @@ input.checkbox__control[type=checkbox]:focus:not(:focus-visible)+span.checkbox__
   white-space:nowrap;
 }
 
-button.chip__button{
+.chip button.chip__button{
+  align-items:center;
   background-color:initial;
   border:none;
   border-radius:50px;
   box-sizing:border-box;
+  color:var(--color-foreground-on-strong);
+  display:flex;
   flex-shrink:0;
   height:var(--spacing-300);
+  justify-content:center;
   line-height:0;
   margin-inline-end:-8px;
   padding:0;
   width:var(--spacing-300);
 }
 
-button.chip__button:focus-visible{
+.chip button.chip__button:focus-visible{
   background-color:var(--state-layer-focus);
-  outline-color:var(--color-state-focus-stroke);
+  outline-color:var(--color-foreground-on-strong);
   outline-offset:-2px;
   outline-style:solid;
   outline-width:2px;
 }
 
-button.chip__button:hover{
+.chip button.chip__button:hover{
   background-color:var(--state-layer-hover);
 }
-
-button.chip__button>svg{
-  fill:var(--color-foreground-on-primary);
-}
 .chips-combobox{
   background-color:var(--color-background-secondary);
   border:1px solid var(--color-stroke-default);
@@ -4118,6 +4254,128 @@ a.filter-link--selected:not([href]):hover,a.filter-link--selected[aria-disabled=
 a.filter-link:focus:not(:focus-visible),button.filter-button:focus:not(:focus-visible){
   outline:none;
 }
+@keyframes chevron-bounce-open{
+  0%{
+    transform:translateY(0);
+  }
+  50%{
+    transform:translateY(-7px);
+  }
+  to{
+    transform:translateY(0);
+  }
+}
+@keyframes chevron-bounce-close{
+  0%{
+    transform:translateY(0);
+  }
+  50%{
+    transform:translateY(7px);
+  }
+  to{
+    transform:translateY(0);
+  }
+}
+a.filter-chip,button.filter-chip{
+  align-items:center;
+  background-color:var(--color-background-primary);
+  background-position:50%;
+  background-repeat:no-repeat;
+  background-size:0 100%;
+  border:1px solid var(--color-stroke-default);
+  border-radius:var(--border-radius-100);
+  box-shadow:none;
+  box-sizing:border-box;
+  color:var(--color-foreground-primary);
+  display:inline-flex;
+  font-size:var(--font-size-default);
+  gap:var(--spacing-75);
+  height:var(--spacing-400);
+  justify-content:space-between;
+  max-width:296px;
+  min-width:32px;
+  padding:0 var(--spacing-150);
+  text-decoration:none;
+  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
+  vertical-align:bottom;
+}
+a.filter-chip:active,button.filter-chip:active{
+  transform:scale(.97);
+}
+
+a.filter-chip--expressive,button.filter-chip--expressive{
+  border-radius:var(--border-radius-150);
+  height:40px;
+}
+
+.filter-chip__media{
+  align-items:center;
+  border-radius:8px;
+  border-radius:var(--spacing-400);
+  display:flex;
+  justify-content:center;
+  margin-inline-start:-8px;
+  overflow:hidden;
+  position:relative;
+}
+.filter-chip__media:after{
+  background:rgba(0, 0, 0, .05);
+  bottom:0;
+  content:"";
+  display:block;
+  left:0;
+  pointer-events:none;
+  position:absolute;
+  right:0;
+  top:0;
+}
+.filter-chip__media>img{
+  display:inline-block;
+  height:var(--spacing-400);
+  max-height:100%;
+  max-width:100%;
+  object-fit:contain;
+  object-fit:cover;
+  width:var(--spacing-400);
+}
+
+a.filter-chip--selected,button.filter-chip[aria-pressed=true]{
+  animation:fill-horizontal-background 0s var(--motion-easing-quick-enter) forwards;
+  background-image:linear-gradient(to right, var(--color-background-strong) 0, var(--color-background-strong) 100%);
+  color:var(--color-foreground-on-strong);
+}
+
+button.filter-chip--animated[aria-pressed=true]{
+  animation-duration:var(--motion-duration-medium-2);
+  transition:color var(--motion-duration-instant) var(--motion-easing-standard);
+}
+
+button.filter-chip[aria-expanded=false]:active .filter-chip__trailing{
+  animation:chevron-bounce-close var(--motion-duration-medium-1) var(--motion-easing-standard);
+  rotate:180deg;
+}
+
+button.filter-chip[aria-expanded=false] .filter-chip__trailing{
+  rotate:0deg;
+  transition:none;
+}
+
+button.filter-chip[aria-expanded=true]:active .filter-chip__trailing{
+  animation:chevron-bounce-open var(--motion-duration-medium-1) var(--motion-easing-standard) var(--motion-duration-short-1);
+  rotate:0deg;
+}
+
+button.filter-chip[aria-expanded=true] .filter-chip__trailing{
+  rotate:180deg;
+  transition:none;
+}
+
+.filter-chip__text{
+  overflow:hidden;
+  padding:var(--spacing-75) 0;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
 
 .filter-input{
   display:inline-block;
@@ -7652,7 +7910,7 @@ button.icon-btn.lightbox-dialog__prev{
   .lightbox-dialog__window{
     border-radius:var(--lightbox-border-radius, var(--border-radius-100));
     margin:auto;
-    max-width:calc(88% - var(--spacing-400));
+    max-width:88%;
   }
   .lightbox-dialog--narrow .lightbox-dialog__window{
     max-width:var(--dialog-lightbox-narrow-max-width);
@@ -7682,7 +7940,7 @@ button.icon-btn.lightbox-dialog__prev{
     max-width:var(--dialog-lightbox-max-width);
   }
   .lightbox-dialog--wide .lightbox-dialog__window{
-    max-width:var(--dialog-lightbox-wide-max-width);
+    max-width:88%;
   }
   .lightbox-dialog--wide .lightbox-dialog__image{
     height:256px;
@@ -7691,6 +7949,11 @@ button.icon-btn.lightbox-dialog__prev{
     margin-top:256px;
   }
 }
+@media (min-width:1024px){
+  .lightbox-dialog--wide .lightbox-dialog__window{
+    max-width:var(--dialog-lightbox-wide-max-width);
+  }
+}
 a.nav-link,a.standalone-link{
   color:var(--nav-link-foreground-color, var(--color-foreground-link-primary));
   text-decoration:none;
@@ -10241,6 +10504,74 @@ span.select{
   left:0;
   right:auto;
 }
+@keyframes fill-horizontal-background{
+  0%{
+    background-size:0 100%;
+  }
+  99%{
+    background-color:var(--color-background-primary);
+  }
+  to{
+    background-color:var(--color-background-strong);
+    background-size:100% 100%;
+  }
+}
+.selection-chip{
+  align-items:center;
+  background-color:var(--color-background-primary);
+  background-position:50%;
+  background-repeat:no-repeat;
+  background-size:0 100%;
+  border:1px solid var(--color-stroke-default);
+  border-radius:var(--border-radius-50);
+  box-shadow:none;
+  box-sizing:border-box;
+  color:var(--color-foreground-primary);
+  display:inline-flex;
+  font-size:var(--font-size-default);
+  gap:var(--spacing-75);
+  height:var(--spacing-400);
+  justify-content:space-between;
+  max-width:296px;
+  min-width:32px;
+  padding:0 var(--spacing-150);
+  text-decoration:none;
+  transition:all var(--motion-duration-short-3) var(--motion-easing-quick-enter);
+  vertical-align:bottom;
+}
+.selection-chip:active{
+  transform:scale(.97);
+}
+
+.selection-chip--animated .selection-chip__trailing{
+  transition:rotate var(--motion-duration-medium-3) var(--motion-easing-standard);
+}
+
+.selection-chip__trailing{
+  rotate:-225deg;
+}
+
+.selection-chip[aria-pressed=true]{
+  animation:fill-horizontal-background 0s var(--motion-easing-quick-enter) forwards;
+  background-image:linear-gradient(to right, var(--color-background-strong) 0, var(--color-background-strong) 100%);
+  color:var(--color-foreground-on-strong);
+}
+
+.selection-chip--animated[aria-pressed=true]{
+  animation-duration:var(--motion-duration-medium-2);
+  transition:color var(--motion-duration-instant) var(--motion-easing-standard);
+}
+
+.selection-chip[aria-pressed=true] .selection-chip__trailing{
+  rotate:0deg;
+}
+
+.selection-chip__text{
+  overflow:hidden;
+  padding:var(--spacing-75) 0;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
 @keyframes skeleton-fade-out{
   0%{
     opacity:1;