_accordion.scss 1.12 KB
Newer Older
Jacek Lebioda's avatar
Develop  
Jacek Lebioda committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
.accordion {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 4px -2px rgba(0,0,0,0.5);

  .accordion-item {
    width: 100%;
    color: #f3efef;
    overflow: hidden;

    label {
      display: flex;
      padding: 1em;
      background: #2c3e50;
      justify-content: space-between;
      font-weight: bold;
      cursor: pointer;
      border-bottom: solid 1px white;

      &:hover {
        background: #1a252f;
      }

      &:after {
        content: "\276F";
        width: 1em;
        height: 1em;
        text-align: center;
        transition: all .35s;
      }
    }

    input {
      position: absolute;
      opacity: 0;
      z-index: -1;

      &:checked + label {
        background: #1a252f;
      }

      &:checked + label:after {
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
      }

      &:checked ~ .accordion-content {
        max-height: 100vh;
        padding: 1em;
      }
    }

    .accordion-content {
      max-height: 0;
      padding: 0 1em;
      color: #2c3e50;
      background: white;
      transition: all .35s;
      font-size: larger;
    }
  }
}