shipshapecode/ember-3d-folding-panel

@import './ember-3d-folding-panel/reset';
@import './ember-3d-folding-panel/mixins';
@import './ember-3d-folding-panel/variables';
@import './ember-3d-folding-panel/functions';

// Grab variables from sass map
$accent-color: _e3dfp('accent-color');
$color-6: _e3dfp('color-6');
$dark-color: _e3dfp('dark-color');
$itemSquareColors: _e3dfp('itemSquareColors');;
$fold-animation: _e3dfp('fold-animation');
$fold-color: _e3dfp('fold-color');
$fold-content-animation: _e3dfp('fold-content-animation');
$light-color: _e3dfp('light-color');
$overlay-color: _e3dfp('overlay-color');

/* --------------------------------
Primary style
-------------------------------- */

*, *::after, *::before {
  box-sizing: border-box;
}

a {
  color: $accent-color;
  text-decoration: none;
}

/* --------------------------------
Patterns - reusable parts of our design
-------------------------------- */

.overflow-hidden {
  overflow: hidden;
}

/* --------------------------------
Main content
-------------------------------- */

.main-container {
  > * {
    transition: transform $fold-animation $fold-content-animation;
  }

  &.fold-is-open > * {
    /* on mobile - translate .main-container content to the right when the .folding-panel is open */
    transform: translateX(100%);
    transition: transform $fold-animation 0s;
  }
}

.gallery {
  &::before {
    background-color: rgba($overlay-color, .6);
    transition: opacity $fold-animation $fold-content-animation, visibility 0s $fold-animation+$fold-content-animation;
  }

  .fold-is-open &::before {
    transition: opacity $fold-animation 0s, visibility 0s 0s;
  }
}

.item-square {
  transition: transform $fold-animation $fold-content-animation;

  a {
    color: $light-color;

    &.dark-text {
      color: $dark-color;

      b {
        border-color: $dark-color;
      }
    }
  }

  @for $i from 1 through length($itemSquareColors) {
    $itemSquareColor: nth($itemSquareColors, $i);
    &:nth-of-type(#{$i}) {
      background-color: $itemSquareColor;
    }
  }

  b {
    border: 1px solid $light-color;
  }

  &.is-huge {
    transition: transform $fold-animation $fold-content-animation;

    .fold-is-open & {
      transition: transform $fold-animation 0s;
    }
  }
}

/* --------------------------------
folding panel
-------------------------------- */

.folding-panel {
  transition: visibility 0s $fold-animation+$fold-content-animation;

  .fold-left,
  .fold-right {
    &::after {
      transition: transform $fold-animation $fold-content-animation, background-color $fold-animation $fold-content-animation;
    }
  }

  .fold-right {
    perspective-origin: 0% 50%;

    &::after {
      transform-origin: right center;
      transform: translateX(-100%) rotateY(-90deg);
      background-color: darken($fold-color, 10%);
    }
  }

  .fold-left {
    /* on mobile only the right fold side is visible */
    display: none;

    &::after {
      background-color: lighten($fold-color, 12%);
    }
  }

  .close-button {
    &::after,
    &::before {
      background-color: $accent-color;
    }
  }

  &.is-open {
    visibility: visible;
    transition: visibility 0s 0s;

    .fold-right::after,
    .fold-left::after {
      transform: translateX(0);
      transition: transform $fold-animation 0s, background-color $fold-animation 0s;
    }

    .fold-right::after {
      background-color: lighten($fold-color, 12%);
    }

    .close-button {
      opacity: 1;
      transition: opacity .2s $fold-animation;
    }
  }
}

.fold-content {
  transition: visibility 0s $fold-content-animation;

  h2 {
    transition: transform $fold-content-animation/2 $fold-content-animation/2, opacity $fold-content-animation/2 $fold-content-animation/2;
  }

  em {
    color: lighten($dark-color, 30%);

    transition: transform $fold-content-animation/2 $fold-content-animation/4, opacity $fold-content-animation/2 $fold-content-animation/4;
  }

  p {
    transition: transform $fold-content-animation/2 0s, opacity $fold-content-animation/2 0s;
  }

  .is-open & {
    transition: visibility 0s $fold-animation;

    h2 {
      transition: transform $fold-content-animation/2 $fold-animation, opacity $fold-content-animation/2 $fold-animation;
    }

    em {
      transition: transform $fold-content-animation/2 $fold-animation+$fold-content-animation/4, opacity $fold-content-animation/2 $fold-animation+$fold-content-animation/4;
    }

    p {
      transition: transform $fold-content-animation/2 $fold-animation+$fold-content-animation/2, opacity $fold-content-animation/2 $fold-animation+$fold-content-animation/2;
    }
  }
}