Experimental #4

Drawer open/close sections

by lasha

HTML

<div class="container">
  <input type="checkbox" class="checkbox-trigger" id="row-1">
  <div class="row row-1">
    <label for="row-1"><span>Label 1</span></label>
    <div class="row-content">
      <h3>Content Header 01</h3>
  	  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam quam eget lectus varius, in vestibulum felis ornare. Mauris ultrices, turpis quis ultricies porttitor, diam dolor auctor urna, nec aliquam metus ante sed dui. Pellentesque ut imperdiet sem. Quisque dignissim ultrices libero, a tempor mauris tempus vitae. Nam iaculis ultrices molestie. Duis ultrices malesuada turpis. Sed faucibus risus ut odio feugiat interdum. Sed venenatis magna id lectus sagittis suscipit. In hac habitasse platea dictumst. Aliquam erat volutpat. Donec egestas sodales ipsum, ut pretium quam placerat quis. Nullam varius pretium luctus.</div>
  </div>
  <input type="checkbox" class="checkbox-trigger" id="row-2">
  <div class="row row-2">
    <label for="row-2"><span>Label 2</span></label>
    <div class="row-content">
      <h3>Content Header 02</h3>
  	  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam quam eget lectus varius, in vestibulum felis ornare. Mauris ultrices, turpis quis ultricies porttitor, diam dolor auctor urna, nec aliquam metus ante sed dui. Pellentesque ut imperdiet sem. Quisque dignissim ultrices libero, a tempor mauris tempus vitae. Nam iaculis ultrices molestie. Duis ultrices malesuada turpis. Sed faucibus risus ut odio feugiat interdum. Sed venenatis magna id lectus sagittis suscipit. In hac habitasse platea dictumst. Aliquam erat volutpat. Donec egestas sodales ipsum, ut pretium quam placerat quis. Nullam varius pretium luctus.</div>
  </div>
  <input type="checkbox" class="checkbox-trigger" id="row-3">
  <div class="row row-3">
    <label for="row-3"><span>Label 3</span></label>
    <div class="row-content">
      <h3>Content Header 03</h3>
  	  Lorem ipsum dolor sit amet, consectetur adipiscing elit....

SCSS

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  margin: 0;
  background-color: #6d695c;
  background-image:
  repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
  repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
  linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
  linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
  background-size: 70px 120px;
  font-family: 'Roboto Condensed', sans-serif;
}
input[type=checkbox]{
  display: none;
}
.row {
  position: relative;
  height: 50px;
  background-color: #ccc;
  margin: 5px 0;
  overflow: hidden;
  padding: 20px;
  /* transition: height 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000); */
  transition: height 0.5s cubic-bezier(0.770, 0.000, 0.175, 1.000);
  h3 {
    margin: 0 0 10px;
  }
  label {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    text-align: center;
    background-color: rgba(255,255,255,0.8);
    span {
      position: relative;
      display: block;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.checkbox-trigger:checked {
  + .row {
    background-color: #eee;
    height: 250px;
    /* height: 100vh; */
    label {
      position: absolute;
      top: 15px;
      right: 20px;
      left: auto;
      width: auto; height: auto;
      background-color: transparent;
      z-index: 1;
      &:after {
        content: "close";
      }
      span {
        display: none;
        /* top: auto; */
        /* transform: none; */
      }
    }
  }
}