@vtmn/css-modal/dist/index-with-vars.css

Decathlon Design System - Vitamin specific CSS styles for modal 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-modal_background-overlay{
  background:hsl(
    var(--vtmn-semantic-color_background-primary-reversed--h)
      var(--vtmn-semantic-color_background-primary-reversed--s)
      var(--vtmn-semantic-color_background-primary-reversed--l) / 80%
  );
  position:fixed;
  inset:0;
  z-index:calc(var(--vtmn-z-index_modal) - 1);
}

.vtmn-modal_content{
  box-sizing:border-box;
  background-color:var(--vtmn-semantic-color_background-primary);
  border-radius:var(--vtmn-radius_200);
  padding:2rem;
  font-family:var(--vtmn-typo_font-family);
  inline-size:37.5rem;
  max-block-size:90vh;
  block-size:-moz-fit-content;
  block-size:fit-content;
  position:fixed;
  inset-block-end:50%;
  inset-inline-start:50%;
  transform:translate(-50%, 50%);
  box-shadow:var(--vtmn-shadow_300);
  color:var(--vtmn-semantic-color_content-primary);
  z-index:var(--vtmn-z-index_modal);
  display:flex;
  flex-direction:column;
}

.vtmn-modal_content_title{
  display:flex;
  inline-size:100%;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
}

.vtmn-modal_content_title--text{
  font-weight:var(--vtmn-typo_font-weight--bold);
  font-size:1.625rem;
  line-height:2rem;
  flex:auto;
  margin:0;
}

.vtmn-modal_content_title .vtmn-btn{
  -webkit-margin-start:0.75rem;
          margin-inline-start:0.75rem;
  -webkit-margin-before:-0.375rem;
          margin-block-start:-0.375rem;
  -webkit-margin-after:-0.375rem;
          margin-block-end:-0.375rem;
}

.vtmn-modal_content_title .vtmn-btn span[class^='vtmx-']{
  font-size:var(--vtmn-typo_text-2-font-size);
}

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

.vtmn-modal_content_body{
  margin:1rem 0;
  overflow-y:auto;
  flex:auto;
}

.vtmn-modal_content_body--text{
  -webkit-padding-after:1.875rem;
          padding-block-end:1.875rem;
  font-weight:var(--vtmn-typo_font-weight--normal);
  font-size:var(--vtmn-typo_text-3-font-size);
  line-height:1.5rem;
  align-self:flex-start;
  text-align:start;
  margin:0;
}

.vtmn-modal_content_actions{
  white-space:nowrap;
  margin:0;
  display:flex;
  justify-content:flex-end;
  inline-size:100%;
}

.vtmn-modal_content_actions > *{
  margin-inline:0.75rem;
  margin-block:0;
}

@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){
}

@media screen and (max-width: 599px){
  .vtmn-modal_content{
    inline-size:100%;
    padding-block:1.5rem;
    -webkit-padding-start:1.5rem;
            padding-inline-start:1.5rem;
    -webkit-padding-end:0;
            padding-inline-end:0;
    max-block-size:60%;
    inset-block-end:0;
    inset-inline-start:0;
    transform:translate(0, 0);
    border-radius:var(--vtmn-radius_200) var(--vtmn-radius_200) 0 0;
  }
  .vtmn-modal_content_actions{
    flex-direction:column;
    -webkit-padding-end:1.5rem;
            padding-inline-end:1.5rem;
  }
  .vtmn-modal_content_actions > *{
    margin-block:0.375rem;
    margin-inline:0;
    inline-size:100%;
  }
  .vtmn-modal_content_body--overflow-indicator{
    inset-block-end:10rem;
    inset-inline-start:1.5rem;
    inset-inline-end:1.5rem;
    block-size:4rem;
  }
  .vtmn-modal_content_body{
    -webkit-padding-end:1.5rem;
            padding-inline-end:1.5rem;
  }
  .vtmn-modal_content_title{
    -webkit-padding-end:1.5rem;
            padding-inline-end:1.5rem;
  }
}

@media screen and (min-width: 1200px){
  .vtmn-modal_content{
    inline-size:56.25rem;
  }
}