@vtmn/css-modal/dist/index-base10.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(
    200
      100%
      4.7% / 80%
  );
  position:fixed;
  inset:0;
  z-index:calc(600 - 1);
}

.vtmn-modal_content{
  box-sizing:border-box;
  background-color:hsl(0, 0%, 100%);
  border-radius:8px;
  padding:3.2rem;
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  inline-size:60rem;
  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:0 2.4rem 2.4rem 0 hsla(200, 100%, 24.5%, 0.1);
  color:hsl(200, 100%, 4.7%);
  z-index:600;
  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:700;
  font-size:2.6rem;
  line-height:3.2rem;
  flex:auto;
  margin:0;
}

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

.vtmn-modal_content_title .vtmn-btn span[class^='vtmx-']{
  font-size:1.6rem;
}

.vtmn-modal_content_title > button:focus-visible{
  outline:none;
  box-shadow:0 0 0 0.4rem hsl(210, 14.3%, 94.5%), 0 0 0 0.6rem hsl(200, 100%, 4.7%);
}

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

.vtmn-modal_content_body--text{
  -webkit-padding-after:3rem;
          padding-block-end:3rem;
  font-weight:400;
  font-size:1.4rem;
  line-height:2.4rem;
  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:1.2rem;
  margin-block:0;
}

@media screen and (max-width: 599px){
  .vtmn-modal_content{
    inline-size:100%;
    padding-block:2.4rem;
    -webkit-padding-start:2.4rem;
            padding-inline-start:2.4rem;
    -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:8px 8px 0 0;
  }
  .vtmn-modal_content_actions{
    flex-direction:column;
    -webkit-padding-end:2.4rem;
            padding-inline-end:2.4rem;
  }
  .vtmn-modal_content_actions > *{
    margin-block:0.6rem;
    margin-inline:0;
    inline-size:100%;
  }
  .vtmn-modal_content_body--overflow-indicator{
    inset-block-end:10rem;
    inset-inline-start:2.4rem;
    inset-inline-end:2.4rem;
    block-size:4rem;
  }
  .vtmn-modal_content_body{
    -webkit-padding-end:2.4rem;
            padding-inline-end:2.4rem;
  }
  .vtmn-modal_content_title{
    -webkit-padding-end:2.4rem;
            padding-inline-end:2.4rem;
  }
}

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