mitjajez/SONCE

@import '../../stylesheets/utils.less';

.page.symbols-editor {
.editor-body {
  display: flex;
  flex-direction: row;
}
.symbol-preview {
  flex: 2;
}
.symbol-data {
  flex: 1;
}
  // Custom nav for.circuits-show
  nav {
    position: static;
    background: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
    height: 3em;

    text-align: center;
    @media screen and (min-width: 40em) { text-align: left; }

    .title-page {
      .position(absolute, 0, 3rem, auto, 3rem);
      @media screen and (min-width: 40em) {
        left: 1rem;
        right: 6rem;
      }

      cursor: pointer;
      font-size: 1.125em; // 18px
      white-space: nowrap;

      .title-wrapper {
        .ellipsized;
        color: @color-ancillary;
        display: inline-block;
        padding-right: 1.5rem;
        vertical-align: top;
        max-width: 100%;
      }
    }
    form.symbol-new {
      .position(absolute, 3em, 0, auto, 0);

      input[type="text"] {
        background: transparent;
        padding-bottom: .25em;
        padding-left: 44px !important;
        padding-top: .25em;
      }
    }
    form.edit-form {
      position: relative;

      input[type="text"] {
        background: transparent;
        font-size: 1.125em; // 18px
        width: 100%;
        padding-right: 3em;
        padding-left: 1rem;
      }
    }

    select.symbol-edit {
      .font-s2;
      .position(absolute, 0,0,0,0);
      background: transparent;
      opacity: 0; // allows the cog to appear
    }

    .options-web {
      display: none;

      .nav-item {
        .font-s3;
        width: 2rem;

        &:last-child { margin-right: .5rem; }
      }
    }

    // Hide & show options and nav icons
    @media screen and (min-width: 40em) {
      .nav-group:not(.right) { display: none !important; }
      .options-mobile { display: none; }
      .options-web {  display: block; }
    }
  }
  .symbol-data input {
    width: 100%;
  }
}