$sidebarWidth: 225px;

.default {
  height: 100%;
}

.sidebar {
  height: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  top: 0;
  width: $sidebarWidth;
  @media print {
    display: none;
  }
}

.main {
  background: #E5ECF1;
  margin-left: 0;
  min-height: 100%;
  position: relative;
  transition: margin-left 0.5s;
}

.content {
  animation: fadein 2s;
  padding: 56px 20px;
  @media print {
    padding: 0;
  }
}

.open {
 composes: default;
  .main {
    margin-left: $sidebarWidth;
  }
  .content {
    animation: fadein .5s;
    min-width: 100%;
  }
}

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}