style.scss

/* Definitions */
@mixin small {
  @media screen and (max-width: 520px) {
    @content;
  }
}

@mixin big {
  @media screen and (min-width: 1024px) {
    @content;
  }
}

@mixin material-transition($properties...) {
  transition-property: $properties;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}
$material-shadow: 0 0 4px black;
$material-shadow-selected: 0 1px 7px black;

$font-size-big: 18px;
$font-size: 14px;
$font-size-small: 12px;
$font-size-tiny: 10px;

$menu-height: 48px;
$combinator-height: 96px;
$combinator-op-size: 30px;
$combinator-op-font-size: 20px;
$combinator-inset-x: 15px;
$combinator-inset-y: 5px;

$color-dark-grey: #333;
$color-dark-red: #610704;
$color-dark-blue: #223c55;
$color-dark-yellow: #443d22;
$color-dark-green: #252;

$color-light-grey: #444;
$color-light-red: #f55;
$color-light-blue: #8be;
$color-light-yellow: #ff3;
$color-light-green: #3e3;

$color-edit: #fff;
$color-edit-bg: #123;
$color-edit-menu: #fff;
$color-edit-menu-bg: #00bcd4;
$color-run-bg: #222;
$color-run-menu: #e69100;
$color-run-menu-bg: $color-dark-grey;
$color-op-bg: $color-dark-grey;
$color-op-bg-hover: $color-light-grey;

$color-cta: $color-run-menu;

$z-underlay: 1;
$z-thumbnail: 2;
$z-thumbnail-selected: 3;
$z-thumbnail-op: 4;
$z-overlay: 5;
$z-statepane: 6;
$z-detail: 7;
$z-fatal-error-message: 8;
$z-menu: 9;


/* Generics and Reset */
* {
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar { 
    display: none; 
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0px;
  color: #fff;
  font-family: 'Overpass Mono', monospace;
  font-size: $font-size;
  line-height: $font-size;
}

.hidden {
  display: none;
}


/* Menu */
.menu {
  position: relative;
  height: $menu-height;
  overflow: hidden;
  white-space: pre;
  z-index: $z-menu;
  box-shadow: $material-shadow;
  transition: background 0.3s ease-in-out;
  .btn {
    display: inline-block;
    position: relative;
    width: 24px;
    height: $menu-height;
    padding: 0 10px;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background 0.3s ease-out;
    &.right {
      float: right;
    }
    &:hover {
      background: rgba(255, 255, 255, 0.16);
    }
    .icon {
      font-size: 24px;
      line-height: 100%;
      top: 5px;
      left: 0;
      right: 0;
      text-align: center;
      position: absolute;
    }
    .text {
      font-size: 10px;
      line-height: 100%;
      bottom: 5px;
      left: 0;
      right: 0;
      text-align: center;
      position: absolute;
    }
  }  
  .edit .btn {
    color: $color-edit-menu;
  }
  .run .btn {
    color: $color-run-menu;
  }
}


/* Editor */
.editor-wrapper {
  width: 100%;
  height: 100%;
  transition: background 0.3s ease-in-out;
  .editor {
    position: absolute;
    top: $menu-height;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow-y: scroll;
    transition: left 0.3s ease-out;
    & > textarea {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      padding: 2px 10px;
      box-sizing: border-box;
      background: transparent;
      color: $color-edit;
      border: none;
      font-family: 'Overpass Mono', monospace;
      font-size: $font-size;
      line-height: $font-size + 2px;
      resize: none;
    }
  }
  &.editing {
    background: $color-edit-bg;
    .menu {
      background: $color-edit-menu-bg;
    }
  }
  &.running {
    background: $color-run-bg;
    .menu {
      background: $color-run-menu-bg;
    }

  }
  body.fatal & {
    .menu {
      background-color: red;
      .mode {
        display: none;
      }
      &::after {
        content: "Fatal error";
        display: block;
        width: 100%;
        line-height: $menu-height;
        height: $menu-height;
        text-align: center;
      }
    }
  }
}


/* Mode (for animated swipe transitions) */
.mode {
  position: absolute;
  width: 100%;
  &.edit {
    left: -100%;
    opacity: 0;
    transition:
        left 0.3s ease-in,
        opacity 0.3s ease-in;
  }
  &.run {
    left: 100%;
    opacity: 0;
    transition:
        left 0.3s ease-in,
        opacity 0.3s ease-in;
  }
}
.editing .mode.edit,
.running .mode.run {
  left: 0;
  opacity: initial;
  transition:
      left 0.3s ease-out,
      opacity 0.3s ease-out;
}
.fatal-error-message {
  position: absolute;
  top: $menu-height;
  width: 100%;
  left: 0;
  margin: auto;
  padding: 20px 10%;
  box-sizing: border-box;
  background: rgba(255, 0, 0, 0.8);
  z-index: $z-fatal-error-message;
}


/* Signals (common) */
.value {
  color: #fff;
}
.signal {
  color: $color-light-blue;
  &.all {
    color: $color-light-red;
  }
  &.any {
    color: $color-light-green;
  }
  &.each {
    color: $color-light-yellow;
  }
}


/* State Table */
.state {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
  padding: 10px 0;
  box-sizing: border-box;
  font-size: $font-size-small;
  .name, .signal {
    padding-left: 5px;
    @include small {
      padding-left: 20px;
    }
  }
  .tick, .value {
    padding-right: 5px;
    @include small {
      padding-right: 20px;
    }
  }
  .tick, .wire {
    border-bottom: 1px solid $color-dark-grey;
  }  
  .signal-table {
    width: 100%;
  }
}

.signal-table {
  border-spacing: 0;
  font-size: $font-size-tiny;
  line-height: normal;
  tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.16);
  }
  .signal {
    float: left;
  }
  .value {
    text-align: right;
  }
}


/* Network */
.network-wrapper {
  top: $menu-height;
  bottom: 0;
  left: 0;
  .state-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: $menu-height;
    width: 220px;
    background: $color-light-grey;
    z-index: $z-statepane;
    @include small {
      left: 0;
      bottom: initial;
      width: 100%;
      height: 100px;
      box-shadow: $material-shadow;
    }
    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 10px;
      background: linear-gradient(to bottom, $color-light-grey 0%,rgba(0, 0, 0, 0) 100%);
    }
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 10px;
      bottom: 0;
      background: linear-gradient(to top, $color-light-grey 0%,rgba(0, 0, 0, 0) 100%);
    }
  }
  .detail-wrapper {
    display: table;
    position: absolute;
    z-index: $z-detail;
    left: 0;
    right: 0;
    bottom: 0;
    height: $menu-height;
    width: 100%;
    text-align: center;
    box-shadow: $material-shadow;
    background: $color-run-menu-bg
  }
  .network  {
    margin-right: 220px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: $menu-height;
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    @include small {
      margin-right: 0px;
      top: 100px;
    }
    .segments {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      pointer-events: none;
      &.underlay {
        z-index: $z-underlay;
      }
      &.overlay {
        z-index: $z-overlay;
      }
    }
  }
}

/* Combinators */
@mixin combinator-colors($bg, $thumb-op, $detail-op) {
  &.thumbnail {
    &::before {
      background: $bg;
    }
    .operator {
      border-color: $thumb-op;
      color: $thumb-op;
    }
    &.selected {
      &::before {
        background: lighten($bg, 5%);
      }
      .operator {
        border-color: $detail-op;
        color: $detail-op;
      }
    }
  }
  &.detail {
    background: lighten($bg, 5%);
    .operator {
      color: $detail-op;
    }
  }
}

@keyframes pulse-selected {
  0% {
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.25);
  }
  50% {
    box-shadow: 0 0 4px white;
  }
  100% {
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.25);
  }
}

.combinator {
  box-sizing: border-box;
  
  .operator {
    font-weight: bold;
  }
  
  .button {
    font-size: $combinator-op-font-size;
    text-align: center;
    background: $color-op-bg;
    height: $combinator-op-size;
    width: $combinator-op-size;
    line-height: $combinator-op-size;
    border-radius: 5px;
    border: 2px solid $color-cta;
    cursor: pointer;
    user-select: none;
    color: $color-cta;
    &:hover {
      background: $color-op-bg-hover;
    }
  }  

  &.thumbnail {
    position: absolute;
    width: 20%;
    height: $combinator-height;
    z-index: $z-thumbnail;
    .operator, .button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .left, .right, .output {
      display: none;
      position: absolute;
      font-size: $font-size-tiny;
    }
    @include big {
      .left, .right, .output {
        display: block;
        overflow: hidden;
        left: $combinator-inset-x;
        right: $combinator-inset-x;
      }
      .left {
        top: 0;
        line-height: $combinator-height;
      }
      .right {
        top: 0;
        line-height: $combinator-height;
        text-align: right;
      }
      .output {
        bottom: $combinator-inset-y;
        text-align: center;
      }
    }
    .operator {
      z-index: $z-thumbnail-op;
      font-size: $combinator-op-font-size;
      text-align: center;
      background: $color-op-bg;
      height: $combinator-op-size;
      width: $combinator-op-size;
      line-height: $combinator-op-size;
      border-radius: 5px;
      border: 2px solid white;
      @include material-transition(color, border-color);
    }  
    &::before {
      content: '';
      border-radius: 5px;
      position: absolute;
      top: $combinator-inset-y;
      bottom: $combinator-inset-y;
      left: $combinator-inset-x;
      right: $combinator-inset-x;
      @include material-transition(background);
    }
    &.selected {
      z-index: $z-thumbnail-selected;
      &::before {
        box-shadow: 0 0 4px white;
        animation: 5s pulse-selected infinite;
      }
    }
    &.constant, &.toggle, &.pulse, &.display {
      .signal, .value {
        position: absolute;
        left: $combinator-inset-x;
        right: $combinator-inset-x;
      }
      .signal {
        top: $combinator-inset-y;
        word-wrap: break-word;
        font-size: $font-size-tiny;
        line-height: 100%;
      }
      .value {
        bottom: $combinator-inset-y;
        text-align: right;
      }
    }
  }
  &.detail {
    display: none;
    vertical-align: middle;
    &.selected {
      display: table-cell;
      min-height: $menu-height;
    }
    .signal-table {
      margin: 0 auto;
      .signal {
        padding-right: 20px;
      }
    }
    .button {
      position: absolute;
      left: 20px;
      top: -20px;
      box-shadow: 0 0 12px black;
    }  
  }
  
  &.constant {
    @include combinator-colors($color-dark-red, black, black);
  }
  &.pulse {
    @include combinator-colors($color-light-grey, black, black);
    .button .icon.active {
      display: none;
    }
    &.active {
      @include combinator-colors($color-dark-red, black, black);
      .button {
        .icon.active {
          display: initial;
        }
        .icon.inactive {
          display: none;
        }
      }
    }
  }
  &.toggle {
    @include combinator-colors($color-light-grey, black, black);
    .button {
      height: 2 * $combinator-op-size;
      &::after {
        background: $color-cta;
        content: '';
        position: absolute;
        top: $combinator-op-size;
        left: 0;
        right: 0;
        height: $combinator-op-size;
        transition: top 0.3s ease-in-out;
      }
    }
    &.active {
      @include combinator-colors($color-dark-red, black, black);
      .button {
        &::after {
          top: 0;
        }
      }
    }
  }
  &.pole {
    @include combinator-colors($color-light-grey, black, black);
  }
  &.arithmetic {
    @include combinator-colors($color-dark-blue, $color-dark-yellow, $color-light-yellow);
  }
  &.decider {
    @include combinator-colors($color-dark-yellow, $color-dark-green, $color-light-green);
  }
  &.display {
    @include combinator-colors($color-dark-green, black, black);
    &.thumbnail .value {
      @include big {
        font-size: $font-size-big;
        line-height: 100%;
      }
    }
    &.detail {
      .value {
        font-size: $font-size-big;
        padding-left: 20px;
      }
    }
  }
  &.label {
    white-space: pre-line;
    &.thumbnail {
      word-break: break-all;
      .content {
        overflow: hidden;
        position: absolute;
        top: $combinator-inset-y;
        bottom: $combinator-inset-y;
        left: $combinator-inset-x;
        right: $combinator-inset-x;
      }
      &.selected {
        &::before {
          background: $color-edit-bg;
        }
      }
    }
    &.detail {
      background: $color-edit-bg;
      padding: 10px 5px;
    }
    &.h1 {
      font-size: $font-size-big;
      line-height: 100%;
    }
    &.h3 {
      font-size: $font-size-small;
      line-height: 100%;
    }
  }
}