.dig-predefined-layout-1 {

  .dig-app-content-canvas {
    top: ($app-bar-height);
  }

  .dig-app-bar {
    position: fixed;
    height: $app-bar-height;
  }
}

.dig-app-canvas {
	height: 100%;

  .dig-app-content-canvas {
    top: ($app-bar-height);
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
  }

  .dig-app-bar {
    position: fixed;
    height: $app-bar-height;
  }
}

@mixin ease-out($duration: 450ms, $property: all, $delay: 0ms) {
  transition: $property $duration $ease-out-function $delay;
}

$gutter: 1%;    // - distance between columns
$grid-size: 12; // - num of columns
$width: 100%;   // - space that we want to use for the grid

@mixin dig-cols ( $num-of-cols ) {
    float: left;
    $col-size: ( $width / $grid-size ); 
    $cols: ( $width / ( $col-size * $num-of-cols ) );
    width: ( $width - ( $gutter * ( $cols - 1 ) ) ) / $cols; 
    margin-right: $gutter; 

    &:last-of-type  { margin-right: 0; }
}

.dig-row { 
    width: 100%; 
    &:before,
    &:after {
        content: " "; 
        display: table;
    }

    &:after {
        clear: both;
    }
}

@mixin dig-row-generate($num) {
  @for $i from 1 to $num {
    .dig-cols-#{$i} {
      @include dig-cols($i);
    }
  }
}

@include dig-row-generate(12);