index.scss

@import "~normalize.css/normalize.css";

$background: #E1E1DB;
$rust: #AA4422;
$selected-radio: desaturate(lighten($rust, 30%), 20%);
$unselected-radio: lighten($selected-radio, 20%);
$border-color: #BBBBBB;
$border: 1px solid $border-color;

$primary-font: 'Open Sans', sans-serif;

// Modify normalized styles
button,
input,
optgroup,
select,
textarea {
    font-family: $primary-font;
}

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    background-color: $background;
    font-family: $primary-font;
}

@mixin split-first-child() {
    // the first child, i.e. the editor has the border already
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
}

@mixin split-all-children() {
    // space between the split
    margin-left: 0.5em;

    // FIXME: remove this, when the output-rules are 'aware' of the orientation
    //        (this disables the extra margin-top for the spacing between editor
    //        and output in the horizontal split mode)
    margin-top: -0.2em;

    // for the border of the editor
    margin-bottom: 4px;
}

@mixin body-monospace-presentation {
    font-size: 1.9em;
    // http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/
    // ACE uses Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
    font-family: 'Source Code Pro', monospace;
}

.playground-mode-presentation {

    &:hover {
        .playground-header {
            display:block;
        }
    }

    .playground-header {
        display:none;
        z-index: 20;
        position: absolute;
        top: 3px;
        right: 3px;
    }

    #editor {
        @include body-monospace-presentation;
    }

    .editor {
        &-simple {
            @include body-monospace-presentation;
        }
    }

    .output {
        .code {
            @include body-monospace-presentation;
        }
    }

    .playground {
        padding: 0;

        &-editor {
            border:none;
        }
    }

    .header {
        padding:0;

        .header-set {
            margin-left:0.3em;
        }

        .header-set__btn--primary {
            font-size: 0.7rem;
        }

        .header-set__btn {
            font-size: 0.7rem;
        }

        .header-set__radio-label {
            font-size: 0.7rem;
            padding: 0.12em;
        }

        .header-set__title {
            display:none;
        }
    }

}

.playground {
    display: flex;
    height: 100vh;
    flex-direction: column;

    padding: 0 1em 1em 1em;

    &-split {
        display: flex;
        height: 100vh;

        &-automatic {
            @media screen and (max-width: 1600px) {
                flex-direction: column;
            }

            @media screen and (min-width: 1600px) {
                flex-direction: row;
            }
        }

        &-horizontal {
            flex-direction: column;
        }

        &-vertical {
            flex-direction: row;
        }

        &-vertical > *:first-child {
            @include split-first-child();
        }

        // automatic vertical
        &-automatic > *:first-child {
            @media screen and (min-width: 1600px) {
                @include split-first-child();
            }
        }

        &-vertical > * {
            @include split-all-children();
        }

        // automatic vertical
        &-automatic > * {
            @media screen and (min-width: 1600px) {
                @include split-all-children();
            }
        }
    }

    &-editor {
        flex: 1 1 auto;
        position: relative;

        border: 4px solid $border-color;
        border-radius: 4px;
    }

    &-output {
        &-focused {
            flex: 1 1 auto;
            position: relative;
        }
    }
}

.configuration {
    position: relative;
    width: 100%;
    height: 100%;

    &-item {
        display: flex;
        margin-bottom: 0.5em;
    }

    &-label {
        flex: 1 1 100%;
    }

    &-value {
        flex: 1 1 100%;
    }

    &-actions {
        right: 0;
        bottom: 0;
        position: absolute;
    }
}

@mixin body-monospace {
    font-size: 0.9em;
    // http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/
    // ACE uses Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;
    font-family: 'Source Code Pro', monospace;
}

#editor {
    position: absolute;
    // Height / width is applied to the element
    @include body-monospace;
}

.editor {
    &-simple {
        position: absolute;
        width: 100%;
        height: 100%;

        border: none;
        @include body-monospace;
    }
}

.output {
    $current-tab: #f9ffff;
    $background-tab: desaturate($current-tab, 100%);

    display: flex;
    flex-direction: column;

    margin-top: 0.2em;

    .playground-output-focused & {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    &-tabs {
        display: flex;
    }

    &-tab {
        flex: 1 1 auto;

        line-height: 1.5em;
        background-color: $background-tab;
        border: $border;
        border-right: none;

        cursor: pointer;

        &:last-of-type {
            border-right: $border;
        }

        &-selected {
            background-color: $current-tab;
            border-bottom: none;

            cursor: default;

            &:focus {
                outline: none;
            }
        }

        &-close {
            flex: 0 0 auto;
        }
    }

    &-body {
        height: 100%;
        overflow: scroll;

        background-color: $current-tab;
        border: $border;
        border-top: none;

        padding: 0.5em;
    }

    &-header {
        display: flex;
        white-space: nowrap;
        color: $border-color;

        &:before, &:after {
            border-top: $border;
            content: '';
            flex: 1 1 auto;
            margin: auto;
        }
        &:before { margin-right: 2%; }
        &:after { margin-left: 2% }
    }

    code {
        @include body-monospace;
    }
}

.drop {
    &__toggle {
        font-size: 50%;
        height: 100%;
    }

    &__menu {
        display: none;

        position: absolute;
        top: 90%;
        left: 0;
        z-index: 10;

        margin: 0;
        padding: 0;

        border: $border;
        box-shadow: 0.5px 0.5px 10px 1px rgba(0, 0, 0, 0.2);

        &--open {
            display: inherit;
        }
    }

    &__menu-item {
        list-style: none;
        white-space: nowrap;
        border-bottom: $border;
        &:last-child {
            border-bottom: none;
        }
    }

    &__button {
        width: 100%;
        background: white;
        border: none;
        cursor: pointer;
        text-align: left;
        &:hover {
            background-color: darken(white, 10%);
        }
    }
}

$PHI: 2.61803398875;

.modal {
    &-backdrop {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 10;
    }

    &-content {
        margin: 0 auto;
        background-color: #FFF;
        border: 1px solid black;
        padding: 1em;
        margin-top: 10em;

        width: 600px;
        height: 950px / $PHI;
    }
}

@keyframes loader-fade {
    0% {
        opacity: 0;
    }
    75% {
        opacity: 1;
    }
}

.loader {
    &-dot {
        opacity: 0;
        animation: loader-fade 1s;
        animation-iteration-count: infinite;

        &:nth-child(2) {
            animation-delay: 0.2s;
        }

        &:nth-child(3) {
            animation-delay: 0.4s;
        }
    }
}

.language-rust_errors {
    .warning {
        color: #f79a06;
    }
    .error {
        color: #bf1b1b;
    }
}

.help {
    @import "~prismjs/themes/prism-okaidia";

    max-width: 800px;
    background-color: #fff;
    margin: 1em auto;
    padding: 1em;
    line-height: 1.5;

    &__code {
        background: #EEE;
        padding: 0 0.25em;
    }

    &__logo {
        text-align: center;
    }

    &__header:hover:after {
        content: ' §';
    }

    &__header-link {
       color: black;
       text-decoration: none;

       &:hover {
           text-decoration: underline;
       }
    }

    &__example {
        position: relative;
    }

    &__load_example {
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        background: rgba(255, 255, 255, 0.8);
        border-bottom-left-radius: 0.5em;
        visibility: hidden;
        opacity: 0;
        transition: all 0.5s;
        cursor: pointer;
    }

    &__example:hover &__load_example {
        visibility: visible;
        opacity: 1;
    }
}

$header-tint: #428bca;
$header-main-border: #dedede;
$header-accent-border: #bdbdbd;
$header-border-radius: 4px;
$header-transition: 0.2s ease-in-out;

.header {
  display: flex;
  font-size: 12px;

  padding: 1.25em 0;

  &__set {
    margin-right: 0.5em;

    &:last-child {
      margin-right: 0;
    }

    &--channel-mode {
      margin-right: auto;
    }
  }

  button:enabled {
    cursor: pointer;
  }
}

@mixin button-reset {
  border: none;
  padding: 0;
  text-align: inherit;
  line-height: inherit;
  background: inherit;
  background-color: transparent; // IE 11
}

@mixin active-button($bg-dark) {
  background: linear-gradient($bg-dark, #ededed);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);

  border-top-color: #bababa;
  border-bottom-color: #d6d6d6;
}

.segmented-button {
  display: flex;
  align-items: center;

  border-radius: $header-border-radius;
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.4), inset 0 1px 0px white;

  &__button {
    @include button-reset;

    $bg-light: #fff;
    $bg-dark: #f9f9f9;

    background-color: $bg-light;
    background: linear-gradient($bg-light, $bg-dark);
    color: #444;

    border: 1px solid $header-main-border;

    &:first-child {
      border-top-left-radius: $header-border-radius;
      border-bottom-left-radius: $header-border-radius;
    }

    &:last-child {
      border-top-right-radius: $header-border-radius;
      border-bottom-right-radius: $header-border-radius;
    }

    &:not(:first-child) {
      border-left: none;
    }

    &:not(:last-child) {
      border-right: 1px solid $header-main-border;
    }

    &:hover {
      background: linear-gradient($bg-light, #f3f3f3);
      color: #333;
    }

    &:active {
      @include active-button($bg-dark);
    }

    &--build {
      $rust-dark: #80331a;

      background: $rust;
      color: white;

      border-color: hsl(15, 66.7%, 32%);

      &:not(:last-child) {
        // Silly specificity
        border-right-width: 0;
      }

      .header-button {
        font-weight: 700;
      }

      &:hover {
        background: $rust-dark;
        color: white;
      }

      &:active {
        background: $rust-dark;
        border-top-color: $rust-dark;
        border-bottom-color: $rust-dark;
      }
    }
  }
}

.popper {
  z-index: 10;
  font-size: 12px;

  // Prevents the popper from shifting when adding it to the DOM
  // triggers showing the scrollbars.
  // https://github.com/FezVrasta/popper.js/issues/457#issuecomment-367692177
  top: 0;

  $fg-color: #222;
  $bg-color: white;
  $arrow-size: 10px;
  $vertical-border-color: #cacaca;

  &__arrow {
    position: absolute;
    margin: $arrow-size;
    border: $arrow-size solid transparent;
  }

  &[data-placement^="bottom"] &__arrow {
    margin-top: 0;
    border-top-width: 0;
    border-bottom-color: $bg-color;
  }

  &__content {
    background: $bg-color;
    color: $fg-color;

    margin: $arrow-size;

    border-radius: $header-border-radius;

    box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.6), inset 0 1px 0px white;

    border-left: 1px solid $vertical-border-color;
    border-right: 1px solid $vertical-border-color;
    border-bottom: 1px solid $header-accent-border;
  }

  button:enabled {
    cursor: pointer;
  }
}

.menu-group {
  width: 27em;
  padding: 0.75em 1em 0 1em;

  &:last-child {
    padding-bottom: 0.75em;
  }

  line-height: normal;

  &__title {
    margin: 0;

    text-transform: uppercase;
    font-weight: 700;
    font-size: 11px;
    padding-bottom: 10px;
    border-bottom: 1px solid $header-main-border;
  }

  &__content {
    padding: 1em 0.25em;
  }
}

.menu-item {
  margin-bottom: 1em;

  &:last-child {
    margin-bottom: 0;
  }
}

@mixin menu-item-title {
  font-size: 13px;
  font-weight: 600;
}

.button-menu-item {
  @include button-reset;

  transition: color $header-transition;

  &:hover {
    color: $header-tint;
  }

  &__name {
    @include menu-item-title;
    margin: 0;
  }

  &__description {
    margin: 0;
  }
}

// TODO: add 'menu'?
.selectable-item {
  width: 100%;
  @include button-reset;

  transition: color $header-transition;

  &__header {
    display: flex;
    align-items: center;
  }

  &__name {
    @include menu-item-title;
  }

  &__description {
    padding-left: 2em;
  }

  &:hover {
    color: $header-tint;
  }

  &--selected {
    font-weight: 600;
    color: $header-tint;
  }

  &__checkmark {
    margin-right: 0.5em;

    opacity: 0;
    transition: opacity 0.15s ease-in-out;
  }

  &:hover &__checkmark {
    opacity: 0.5;
    color: $header-tint;
  }

  &--selected &__checkmark,
  &--selected:hover &__checkmark {
    opacity: 1;
  }
}

.build-menu {
  &__aside {
    margin: 0.25em 0 0 0;
    color: #888;
  }
}

.channel-menu {
  &__description {
    margin: 0;
  }
}

.config-element {
  display: flex;
  align-items: center;

  &__name {
    flex: 1;
    font-size: 13px;
  }

  &__value {
    flex: 1;
  }

  &__select {
    width: 100%;
  }

  &__toggle {
    display: flex;

    input {
      display: none;
    }

    label {
      $border: 1px solid #bbb;

      flex: 1;
      padding: 0 1em;

      text-transform: uppercase;
      font-size: 11px;
      font-weight: 600;
      color: #777;
      text-align: center;

      cursor: pointer;

      border: $border;
      border-top-left-radius: $header-border-radius;
      border-bottom-left-radius: $header-border-radius;
      border-right-width: 0;

      ~ label {
        border-right-width: 1px;
        border-left: $border;
        border-radius: 0 $header-border-radius $header-border-radius 0;
      }

      &:hover {
        background: hsla(208, 100%, 43%, 0.1);
      }
    }

    :checked + label {
      border-color: $header-tint;
      background: $header-tint;
      color: #fff;

      ~ label {
        border-left-width: 0;
      }
    }
  }
}

.header-button {
  height: 3em;
  padding: 0 1.25em;
  display: flex;
  align-items: center;

  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;

  white-space: nowrap;

  &--expandable {
    padding-right: 1em;
  }

  &--has-left-icon {
    padding-left: 1em;
  }

  &--has-right-icon {
    padding-right: 1em;
  }

  &--icon-only {
    padding: 0 0.75em;
  }

  &__left-icon {
    margin-right: 0.5em;
    opacity: 0.5;
  }

  &--icon-only &__left-icon {
    margin-right: 0;
  }

  &__drop {
    margin-left: 0.75em;
    opacity: 0.5;
  }

  &__right-icon {
    margin-left: 0.75em;
  }
}

.icon {
  display: block;
  fill: currentColor;
}