@vtmn/css-accordion/dist/index.css

Decathlon Design System - Vitamin specific CSS styles for accordion component

.vtmn-accordion{
  box-sizing:border-box;
  display:block;
  inline-size:100%;
  min-block-size:3rem;
  block-size:-moz-fit-content;
  block-size:fit-content;
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  font-size:1rem;
  line-height:1.5;
  color:hsl(200, 100%, 4.7%);
  font-weight:400;
  background-color:hsl(0, 0%, 100%);
  -webkit-border-after:0.0625rem solid hsl(210, 11.8%, 86.7%);
          border-block-end:0.0625rem solid hsl(210, 11.8%, 86.7%);
  outline:0;
}

.vtmn-accordion--with-icon-left summary::before{
  content:'';
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.333 8a6.666 6.666 0 1 0 13.333 0A6.666 6.666 0 0 0 1.333 8Zm12 0A5.333 5.333 0 1 1 2.667 8a5.333 5.333 0 0 1 10.666 0ZM8.667 4.667V6H7.333V4.667h1.334Zm0 6.666v-4H7.333v4h1.334Z'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.333 8a6.666 6.666 0 1 0 13.333 0A6.666 6.666 0 0 0 1.333 8Zm12 0A5.333 5.333 0 1 1 2.667 8a5.333 5.333 0 0 1 10.666 0ZM8.667 4.667V6H7.333V4.667h1.334Zm0 6.666v-4H7.333v4h1.334Z'/%3E%3C/svg%3E");
  -webkit-mask-size:cover;
          mask-size:cover;
  inline-size:1.5rem;
  block-size:1.5rem;
  position:relative;
  display:inline-block;
  -webkit-margin-end:0.75rem;
          margin-inline-end:0.75rem;
  background-color:hsl(200, 100%, 4.7%);
}

.vtmn-accordion summary{
  display:flex;
  cursor:pointer;
  list-style:none;
  font-weight:700;
  position:relative;
  padding-block:0.75rem;
  padding-inline:1rem;
  outline:0;
  transition:background-color 400ms ease;
}

.vtmn-accordion summary::-webkit-details-marker{
  display:none;
}

.vtmn-accordion:not([aria-disabled='true']) summary:hover{
  background-color:hsl(200, 60%, 94.1%);
}

.vtmn-accordion:not([aria-disabled='true']) summary:active{
  background-color:hsla(200, 60%, calc(94.1% * 0.97), 1);
}

.vtmn-accordion:not([aria-disabled='true']) > summary:focus-visible{
  box-shadow:0 0 0 0.25rem hsl(210, 14.3%, 94.5%), 0 0 0 0.375rem hsl(200, 100%, 4.7%);
}

.vtmn-accordion[aria-disabled='true']{
  cursor:not-allowed;
}

.vtmn-accordion[aria-disabled='true'] > *{
  opacity:0.38;
  pointer-events:none;
}

.vtmn-accordion summary > span[class^='vtmx-']{
  font-size:1.5rem;
  -webkit-margin-end:0.75rem;
          margin-inline-end:0.75rem;
}

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

  .vtmn-accordion summary > span[class^='vtmx-']{
  font-size:1.625rem;
  }
}

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

  .vtmn-accordion summary > span[class^='vtmx-']{
  font-size:1.625rem;
  }
}

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

  .vtmn-accordion summary > span[class^='vtmx-']{
  font-size:1.5rem;
  }
}

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

  .vtmn-accordion summary > span[class^='vtmx-']{
  font-size:1.5rem;
  }
}

.vtmn-accordion summary::after{
  content:'';
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m8 8.781 3.3-3.3.943.943L8 10.667 3.757 6.424l.943-.943 3.3 3.3z'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m8 8.781 3.3-3.3.943.943L8 10.667 3.757 6.424l.943-.943 3.3 3.3z'/%3E%3C/svg%3E");
  inline-size:1.5rem;
  block-size:1.5rem;
  position:absolute;
  inset-inline-end:0;
  -webkit-margin-end:0.75rem;
          margin-inline-end:0.75rem;
  background-color:hsl(200, 100%, 4.7%);
  transition:transform 400ms ease;
}

.vtmn-accordion[open]{
  -webkit-border-after:0;
          border-block-end:0;
}

.vtmn-accordion[open] summary::after{
  transform:rotateZ(-180deg);
}

.vtmn-accordion_content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:1rem;
}

.vtmn-accordion_content > *{
  margin-block:0.25rem;
  margin-inline:0;
}

.vtmn-accordion_content:last-child{
  -webkit-border-after:0.0625rem solid hsl(210, 11.8%, 86.7%);
          border-block-end:0.0625rem solid hsl(210, 11.8%, 86.7%);
}