formir/src/less/core/components/accordion.less

Pure CSS / HTML Framework

.accordion-active() {
  animation: accordion-down @accordion-animated-time;
  overflow-y: hidden;
  max-height: @accordion-animated-max-height;
  display: block;
}

.accordion-not-active() {
  transition: max-height @accordion-animated-time;
  overflow-y: hidden;
  max-height: 0;
}

.accordion-horizontal-active() {
  animation: accordion-horizontal-down @accordion-animated-time;
  overflow: hidden;
  max-width: 100%;
  display: block;
}

.accordion-horizontal-not-active() {
  transition: max-width @accordion-animated-time;
  overflow: hidden;
  max-width: 0;
}

.@{accordions} {
  position: relative;
}

.@{accordion-collapsible} {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 0;
  
  &:checked {
    pointer-events: none;
  }
  ~ .@{accordion} {
    > input {
      ~ label, ~ .@{accordion-label} {
         z-index: 1;
         position: relative;
      }
      ~ .@{accordion-content} {
        z-index: 1;
        position: relative;
      }
    }
    > input:checked  {
      ~ label, ~ .@{accordion-label} {
        pointer-events: none;
      }
    }
  }
}

.@{accordion} {
  &.@{accordion-horizontal} {
    align-items: stretch;
    display: flex;
    flex-flow: nowrap;
  }
  &.@{accordion-hoverable} {
    &:hover {
      > .@{accordion-content} {
        display: block;
      }
      > label, .@{accordion-label} {
        .accordion-label-active;
      }
      &.@{accordion-label-hide} {
        > label, .@{accordion-label} {
          display: none;
        }
      }
    }
    &.@{accordion-animated}:not(.horizontal) {
      > .@{accordion-content} {
        .accordion-not-active;
      }
      &:hover {
        > .@{accordion-content} {
          .accordion-active;
        }
      }
    }
    &.@{accordion-animated}.@{accordion-horizontal} {
      > .@{accordion-content} {
        .accordion-horizontal-not-active;
      }
      &:hover {
        > .@{accordion-content} {
          .accordion-horizontal-active;
        }
      }
    }
  }
  &.@{accordion-focusable} {
    > label, .@{accordion-label} {
      &:focus {
        .accordion-label-active;
        ~ .@{accordion-content} {
          display: block;
        }
      }
    }
    > input  {
      &:focus {
        ~ label, ~ .@{accordion-label} {
          .accordion-label-active;
        }
        ~ .@{accordion-content} {
          display: block;
        }
        &.@{accordion-label-hide} {
          ~ label, ~ .@{accordion-label} {
            display: none;
          }
        }
      }
    }
    &:focus {
      > .@{accordion-content} {
        display: block;
      }
      > label, .@{accordion-label} {
        .accordion-label-active;
      }
      &.@{accordion-label-hide} {
        > label, .@{accordion-label} {
          display: none;
        }
      }
    }
    &.@{accordion-animated}:not(.@{accordion-horizontal}) {
      &:focus {
        .@{accordion-content} {
          .accordion-active;
        }
      }
      > label, .@{accordion-label} {
        &:focus {
          ~ .@{accordion-content} {
            .accordion-active;
          }
        }
      }
      > input  {
        &:focus {
          ~ .@{accordion-content} {
            .accordion-active;
          }
        }
      }
      .@{accordion-content} {
        .accordion-not-active;
      }
    }
    &.@{accordion-animated}.@{accordion-horizontal} {
      &:focus {
        .@{accordion-content} {
          .accordion-horizontal-active;
        }
      }
      > label, .@{accordion-label} {
        &:focus {
          ~ .@{accordion-content} {
            .accordion-horizontal-active;
          }
        }
      }
      > input  {
        &:focus {
          ~ .@{accordion-content} {
            .accordion-horizontal-active;
          }
        }
      }
      .@{accordion-content} {
        .accordion-horizontal-not-active;
      }
    }
  }
  &.@{accordion-animated}:not(.@{accordion-horizontal}) {
    > input {
      &:not(:checked) {
        ~ .@{accordion-content} {
          .accordion-not-active;
        }
      }
    }
    .@{accordion-content} {
      display: block;
    }
    > input {
      &:checked {
         ~ .@{accordion-content} {
          .accordion-active;
        }
      }
    }
  }
  
  &.@{accordion-animated}.@{accordion-horizontal} {
    > input {
      &:not(:checked) {
        ~ .@{accordion-content} {
          .accordion-horizontal-not-active;
        }
      }
    }
    .@{accordion-content} {
      display: block;
    }
    > input {
      &:checked {
         ~ .@{accordion-content} {
          .accordion-horizontal-active;
        }
      }
    }
  }
  
  &.@{accordion-label-hide} {
    > input {
      &:checked {
        ~ label, ~ .@{accordion-label} {
          display: none;
        }
      }
    }
  }

  > input {
    left: -10000px;
    position: fixed;
    &:checked {
      ~ .@{accordion-content} {
        display: block;
      }
      ~ label, ~ .@{accordion-label} {
        .accordion-label-active;
      }
    }
  }
  .@{accordion-content} {
    display: none;
  }
  > label, .@{accordion-label} {
    .@{accordion-arrow} {
      .accordion-arrow-down;
    }
  }
  &.active {
    > label, .@{accordion-label} {
      .accordion-label-active;
    }
    .@{accordion-content} {
      .accordion-active;
    }
  }
}

@keyframes accordion-down {
  0% {
    max-height: 0;
  }
  80% {
    max-height: @accordion-animated-max-height/4;
  }
  99% {
    max-height: @accordion-animated-max-height/2;
  }
  100% {
    max-height: @accordion-animated-max-height;
  }
}

@keyframes accordion-up {
  0% {
    max-height: @accordion-animated-max-height;
  }
  1% {
    max-height: @accordion-animated-max-height/2;
  }
  20% {
    max-height: @accordion-animated-max-height/4;
  }
  100% {
    max-height: 0;
  }
}

@keyframes accordion-horizontal-down {
  0% {
    max-width: 0;
  }
  100% {
    max-width: 100%;
  }
}

@keyframes accordion-horizontal-up {
  0% {
    max-width: 100%;
  }
  100% {
    max-width: 0;
  }
}