puzzlepiece.scss

$puzzlePieceHeight        :   46px;
$puzzleTextPadding        :   10px;
$beforeAfterWidth         :   20px;
$pathToPuzzlePieceImage   :   '/assets/img/puzzle/piece';

@mixin generate-theme($themeName, $mainThemeColor, $fontColor: #333333 ) {
  .puzzle-piece {

    &.theme-#{$themeName} {
      color : $fontColor;
      background: rgba($mainThemeColor, 0.5);

      &:after {
        background: url('#{$pathToPuzzlePieceImage}/puzzle_piece_after-#{$themeName}.png') 0 0 no-repeat;
      }
      &:before {
        background: url('#{$pathToPuzzlePieceImage}/puzzle_piece_before-#{$themeName}.png') 0 0 no-repeat;
      }

      // -------------------- Hover
      &:hover {
        background: rgba($mainThemeColor, 0.3);
        color: lighten( $fontColor, 20% );

        &:after {
          background: url('#{$pathToPuzzlePieceImage}/puzzle_piece_after-#{$themeName}.png') -20px 0 no-repeat;
        }
        &:before {
          background: url('#{$pathToPuzzlePieceImage}/puzzle_piece_before-#{$themeName}.png') -20px 0 no-repeat;
        }
      }

    }
  }
}

@include  generate-theme('light'  , #ECECEC,  #FFFFFF  );
@include  generate-theme('gray'   , #CCCCCC,  #333333  );
@include  generate-theme('warning', #e6da9d            );
@include  generate-theme('success', #95e693);

.puzzle-piece {
  position: relative;
  overflow: visible;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  margin: 0 $beforeAfterWidth;
  padding: $puzzleTextPadding;
  box-sizing: border-box;
  height: $puzzlePieceHeight;
  line-height: $puzzlePieceHeight - $puzzleTextPadding * 2;
  font-size: 1.6em;

  &:before {
    position: absolute;
    display: inline-block;
    content: '';
    width: $beforeAfterWidth;
    height: $puzzlePieceHeight;
    top: 0;
    left: -$beforeAfterWidth;
  }

  &:after {
    position: absolute;
    display: inline-block;
    content: '';
    width: $beforeAfterWidth;
    height: $puzzlePieceHeight;
    top: 0;
    right: -$beforeAfterWidth;
  }

}

.puzzled-row {
  .puzzle-piece {
    margin-right: 1px;
    margin-top: 1px;
  }
}