frontend-tutorial-framework/src/app/dashboard/dashboard.component.scss

$space: 24px;
$small: 0.75 * $space;


$tao-navbar-height: 67px;

$tao-plum-900: #272F4C;
$tao-gray-50:  #FAFAFA;
$tao-gray-100: #F2F2F2;
$tao-gray-500: #555555;


// Change this to switch template. Options: 'default', 'vraw', 'hraw'
$layout-template: 'hraw';

$default-layout: (
  'header': (1, 2, 1, 2),
  'messages': (1, 2, 2, 10),
  'webide': (4, -1, 1, -1),
  'terminal': (1, 4, 10, -1),
  'web': (2, 4, 1, 10)
);

$vraw-layout: (
  'header': (1, 2, 1, 2),
  'messages': (1, 2, 2, -1),
  'webide': (4, -1, 1, -1),
  'terminal': (2, 4, 1, -1),
  'web': (),
);

$hraw-layout: (
  'header': (1, 2, 1, -1),
  'messages': (1, 2, 2, -1),
  'webide': (2, -1, 1, 10),
  'terminal': (2, -1, 10, -1),
  'web': (),
);

$layout: (
  'default': $default-layout,
  'vraw': $vraw-layout,
  'hraw': $hraw-layout
);

@mixin position-grid-items($map, $sel) {
  $sel: if($sel == '' and &, &, $sel);
  @debug $sel;

  #{$sel} {
    @each $k, $v in $map {
      @at-root #{$sel}#{$k} {
        @if (length($v) == 0) {
          display: none
        }
        @else {
          grid-column-start: nth($v, 1);
          grid-column-end: nth($v, 2);
          grid-row-start: nth($v, 3);
          grid-row-end: nth($v, 4);
        }
      }
    }
  }
}

.tfw-grid-main-components {
 // overflow-y: visible;
  display: grid;
  width: 100vw;
  height: 100vh;
  justify-content: center;
  align-content: center;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(15, 1fr);

  @include position-grid-items(map_get($layout,$layout-template),'.tfw-');

  .tfw-header {
    padding: $small;
    background-color: $tao-gray-50;
    height: $tao-navbar-height;
  }

  .tfw-messages {
    padding: $space;
    background-color: $tao-gray-50;
    overflow-y: scroll;

    @if ($layout-template != 'default') {
      max-height: 95vmin;
    }
    @else {
      max-height: 55vmin;
    }
  }

  .tfw-web {
    padding: $space;
  }

  .tfw-webide {
    background-color: $tao-plum-900;
  }

  .tfw-terminal {
    border: 1px solid $tao-plum-900;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;

    .xterm .xterm-viewport {
      height: 100vmin;
    }



  }
}