Exploring Bourbon

Exploring-Bourbon.markdown

Exploring Bourbon

Some fun motion.

Forked from Colin Hall-Coates's Pen Exploring Bourbon.

A Pen by Seth Calkins on CodePen.

License.

index.jade

.container
  .item.one
.container
  .item.two
.container
  .item.three
.container
  .item.four
.container
  .item.five

style.scss

@import "bourbon";
body {
  background-color: #fff;
}

$container-colors: (
  1: #E56399,
  2: #E5D4CE,
  3: #DE6E4B,
  4: #7FD1B9,
  5: #7A6563
);

$item-size: 50px;

.container {
  position: relative;
  width: 100%;
  height: 230px;
  overflow: hidden;
  @each $key, $value in $container-colors {
    &:nth-of-type(#{$key}) {
      background-color: $value;
    }
  }
  .item {
    margin: auto;
    @include position(absolute, 0 0 0 0);
    @include box-sizing(border-box);
    width: $item-size;
    height: $item-size;
    background-color: #fff;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    &.one {
      border-radius: 50%;
      border-bottom: $item-size / 5 solid #666;
      @include animation(spin 1s ease infinite);
    }
    &.two {
      width: $item-size / 2;
      height: $item-size / 2;
      border-radius: 50%;
      @include animation(spin 1s ease-in-out infinite reverse);
      @include transition(all 0.2s ease);
      &:hover {
        width: $item-size;
        height: $item-size;
        border: 2px solid #b06279;
      }
      &:hover:before,
      &:before:hover {
        left: -150%;
      }
      &:hover:after,
      &:after:hover {
        right: -150%;
      }
      &:before,
      &:after {
        position: absolute;
        @include box-sizing(border-box);
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.25);
        @include animation(shapeit 0.5s ease infinite alternate);
        @include transition(all 0.2s ease);
        content: '';
      }
      &:before {
        left: -125%;
        border-left: 2px solid #b06279;
      }
      &:after {
        right: -125%;
        border-right: 2px solid #b06279;
      }
    }
    &.three {
      @include animation(snap 0.5s ease infinite alternate);
      border-top: $item-size / 2 solid #b03648;
      border-bottom: $item-size / 2 solid #b03648;
    }
    &.four {
      @include animation(tilt 2s ease-in-out infinite alternate);
      @include border-top-radius(50%);
      @include linear-gradient(#CD9B1D, #EDCB62);
      &:after {
        position: absolute;
        @include box-sizing(border-box);
        width: $item-size / 5;
        height: $item-size / 5;
        bottom: -$item-size / 5 * 2;
        background-color: #fff;
        border-radius: 50%;
        @include linear-gradient(#CD9B1D, #EDCB62);
        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.25);
        content: '';
        @include animation(ding 2s ease-in-out infinite alternate,
          tilt 2s ease-in-out infinite alternate);
      }
    }
    &.five {
      @include animation(switch 1s ease-in-out infinite);
      @include linear-gradient(#BCD979, #9DAD6F);
    }
  }
}

@include keyframes(spin) {
  from {
    @include transform(rotate(0deg));
  }
  to {
    @include transform(rotate(360deg));
  }
}

@include keyframes(shapeit) {
  from {
    border-radius: 50%;
  }
  to {
    border-radius: 0px;
  }
}

@include keyframes(snap) {
  to {
    border-top: 0 solid #b03648;
    border-bottom: 0 solid #b03648;
    border-radius: 1em;
  }
}

@include keyframes(tilt) {
  from {
    @include transform(rotate(45deg));
  }
  to {
    @include transform(rotate(-45deg));
  }
}

@include keyframes(ding) {
  from {
    left: 0%;
  }
  to {
    left: calc(100% - #{$item-size} / 5);
  }
}

@include keyframes(switch) {
  0% {border-radius: 0 0 0 0;}
  25% {border-radius: 1em 1em 0 0;}
  50% {border-radius: 1em 1em 1em 1em;}
  75% {border-radius: 0 0 1em 1em;}
  100% {border-radius: 0 0 0 0;}
}