Sass mixin to create a "TBD" box over any element

tbd-widget.scss

// DEMO http://cdpn.io/qwDxL
// Set $tbd-widget to false to globally hide the widget and restore the parent
// element without having to go find every @include

@mixin tbd-widget($width: 1em, $height: 1em, $bgColor: #ccc) {
  $tbd-widget: true !default;
  @if $tbd-widget {
    $fgColor: invert($bgColor);
    height: 0;
    font-size: 0;

    &:before {
      content: 'This area TBD or has questions';
      color: $fgColor;
      background: $bgColor;
      text-align: center;
      vertical-align: middle;
      line-height: 1;
      padding: 0 12%;
      font-size: 1rem;
      display: table-cell;
      width: $width;
      height: $height;
    }
    &:after {
      $maskColor: rgba($fgColor,0.1);
      background: transparent;
      position: absolute;
      top: 0;
      left: 0;
      content: ' ';
      border-width: $height/2 $width/2;
      border-style: solid;
      border-color: transparent $maskColor $maskColor transparent;
    }
  }
}