@vtmn/css-popover/dist/index-with-vars-base10.css

Decathlon Design System - Vitamin specific CSS styles for popover component

@keyframes fade-in{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

@keyframes slide-left{
  from{
    transform:translateX(120%);
  }
  to{
    transform:translateX(0);
  }
}

@keyframes slide-right{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(120%);
  }
}

@keyframes slide-down{
  from{
    transform:translateY(0);
  }
  to{
    transform:translateY(120%);
  }
}

@keyframes slide-up{
  from{
    transform:translateY(120%);
  }
  to{
    transform:translateY(0);
  }
}

@keyframes show-up{
  from{
    bottom:0;
  }
  to{
    bottom:15px;
  }
}

@keyframes fade-out{
  from{
    opacity:1;
  }
  to{
    opacity:0;
  }
}

@keyframes vanish{
  from{
    bottom:15px;
  }
  to{
    bottom:0;
  }
}

@keyframes linear-indeterminate{
  0%{
    transform:translateX(-100%);
  }
  60%{
    transform:translateX(105%);
  }
  100%{
    transform:translateX(105%);
  }
}

@keyframes circle-indeterminate{
  0%{
    stroke-dashoffset:400;
    transform:rotate(-0.25turn);
  }
  50%{
    transform:rotate(0.75turn);
    stroke-dashoffset:0;
  }
  100%{
    stroke-dashoffset:400;
    transform:rotate(2.75turn);
  }
}

@keyframes circle-indeterminate-small{
  0%{
    stroke-dashoffset:200;
    transform:rotate(-0.25turn);
  }
  50%{
    transform:rotate(0.75turn);
    stroke-dashoffset:0;
  }
  100%{
    stroke-dashoffset:200;
    transform:rotate(2.75turn);
  }
}

@keyframes shimmer{
  from{
    transform:translateX(-100%);
  }
  to{
    transform:translateX(100%);
  }
}

.vtmn-popover{
  position:relative;
  cursor:pointer;
  font-family:var(--vtmn-typo_font-family);
  outline:0;
}

.vtmn-popover > [role='dialog'] > .vtmn-popover_title{
  margin-block:0.4rem;
  margin-inline:0;
  font-family:var(--vtmn-typo_font-family);
  font-weight:var(--vtmn-typo_font-weight--bold);
  font-size:var(--vtmn-typo_text-2-font-size);
  line-height:var(--vtmn-typo_text-2-line-height);
  align-self:flex-start;
}

.vtmn-popover > [role='dialog'] > .vtmn-popover_text{
  margin-block:0.8rem;
  margin-inline:0;
  font-family:var(--vtmn-typo_font-family);
  font-weight:var(--vtmn-typo_font-weight--normal);
  font-size:var(--vtmn-typo_text-3-font-size);
  line-height:2rem;
  align-self:flex-start;
  text-align:left;
}

.vtmn-popover > [role='dialog'] > button{
  margin:0;
  align-self:flex-end;
}

.vtmn-popover > [role='dialog']{
  box-sizing:border-box;
  min-inline-size:25rem;
  inline-size:auto;
  box-shadow:var(--vtmn-shadow_200);
  border-radius:var(--vtmn-radius_200);
  background-color:var(--vtmn-semantic-color_background-primary-reversed);
  color:var(--vtmn-semantic-color_content-primary-reversed);
  display:none;
  position:absolute;
  padding:1.6rem;
  animation:var(--vtmn-animation_fade-in);
  z-index:var(--vtmn-z-index_popover);
  cursor:default;
}

.vtmn-popover > [role='dialog']::after{
  border-radius:0;
  content:' ';
  block-size:0;
  inline-size:0;
  position:absolute;
  box-shadow:none;
}

.vtmn-popover:focus-within > [role='dialog']{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  pointer-events:auto;
}

.vtmn-popover:focus-visible{
  outline:none;
  box-shadow:var(--vtmn-shadow_focus-visible);
}

.vtmn-popover[data-position^='top'] > [role='dialog']{
  bottom:calc(100% + 1.5em);
  left:50%;
  transform:translateX(-50%);
}

.vtmn-popover[data-position^='top'] > [role='dialog']::after{
  border-left:solid transparent 0.6em;
  border-right:solid transparent 0.6em;
  border-top:solid var(--vtmn-semantic-color_background-primary-reversed) 0.65em;
  bottom:-0.6em;
  left:50%;
  transform:translateX(-50%);
}

.vtmn-popover[data-position='top-left'] > [role='dialog']::after{
  left:90%;
}

.vtmn-popover[data-position='top-left'] > [role='dialog']{
  transform:translateX(-90%);
}

.vtmn-popover[data-position='top-right'] > [role='dialog']::after{
  left:10%;
}

.vtmn-popover[data-position='top-right'] > [role='dialog']{
  transform:translateX(-10%);
}

.vtmn-popover[data-position^='bottom'] > [role='dialog']{
  top:calc(100% + 1.5em);
  left:50%;
  transform:translateX(-50%);
}

.vtmn-popover[data-position^='bottom'] > [role='dialog']::after{
  border-left:solid transparent 0.6em;
  border-right:solid transparent 0.6em;
  border-bottom:solid var(--vtmn-semantic-color_background-primary-reversed) 0.65em;
  top:-0.6em;
  left:50%;
  transform:translateX(-50%);
}

.vtmn-popover[data-position='bottom-left'] > [role='dialog']::after{
  left:90%;
}

.vtmn-popover[data-position='bottom-left'] > [role='dialog']{
  transform:translateX(-90%);
}

.vtmn-popover[data-position='bottom-right'] > [role='dialog']::after{
  left:10%;
}

.vtmn-popover[data-position='bottom-right'] > [role='dialog']{
  transform:translateX(-10%);
}

.vtmn-popover[data-position='left'] > [role='dialog']{
  top:50%;
  left:-1.5em;
  transform:translate(-100%, -50%);
}

.vtmn-popover[data-position='left'] > [role='dialog']::after{
  border-top:solid transparent 0.6em;
  border-bottom:solid transparent 0.6em;
  border-left:solid var(--vtmn-semantic-color_background-primary-reversed) 0.65em;
  right:-0.6em;
  top:50%;
  transform:translateY(-50%);
}

.vtmn-popover[data-position='right'] > [role='dialog']{
  top:50%;
  right:-1.5em;
  transform:translate(100%, -50%);
}

.vtmn-popover[data-position='right'] > [role='dialog']::after{
  border-top:solid transparent 0.6em;
  border-bottom:solid transparent 0.6em;
  border-right:solid var(--vtmn-semantic-color_background-primary-reversed) 0.65em;
  left:-0.6em;
  top:50%;
  transform:translateY(-50%);
}

@media screen and (min-width: 600px) and (max-width: 899px){
}

@media screen and (min-width: 900px) and (max-width: 1199px){
}

@media screen and (min-width: 1200px) and (max-width: 1799px){
}

@media screen and (min-width: 1800px){
}