3scale/porta

.formtastic.cms_template, .formtastic.cms_section, .formtastic.cms_file {

  #cms_template_published_input {
   .cm-s-neat {
     background-color: $codemirror-bg-readonly;
     color: $codemirror-color-readonly;

     .CodeMirror-cursor {
       border-left: none !important;
     }

     &:after {
       transform: rotate(35deg);
       opacity: 0.1;
       content: "Published";
       top: -0.5rem;
       left: -2rem;
       text-align: center;
       font-size: 14rem;
       color: $label-color;
       position: absolute;
       transform-origin: 0 0;
     }
   }
  }

  .codemirror {
    list-style: none;

    // we have labels before codemirror inputs, this hides them
    // labels are there because of cucumber
    label[for=cms_template_draft], label[for=cms_template_published] {
      display: none;
    }
  }
}

#cms-template-editor-tabs {
  @include inline-block-list;
}


#cms-template-editor {
  position: relative;

  ul.ui-tabs-nav {
    display: inline-block;
    @include inline-block-list;
    vertical-align: middle;
    position: relative;
    z-index: 10;
    top: $border-width;

    li {
      text-align: center;
      border: $border-width solid $border-color;
      border-bottom: none;
      @include border-top-radius($border-radius-sm);
      background-color: $border-color;

      a {
        @include inline-block;
        padding: line-height-times(1/3) line-height-times(1/2);
      }

      &.ui-state-active {
        font-weight: $font-weight-bold;
        border-color: $border-color;
        background-color: $codemirror-border;

        a {
          color: $font-color;
        }
      }
    }
  }

  .ui-tabs-hide { display: none; }

  ul.links {
    @include inline-block-list;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: line-height-times(1/4);

    li {
      margin-left: line-height-times(1);
    }
  }
}

#open-portal-to-public {
  @extend div.right;

  .button {
    margin-left: 0;
    clear: both;
  }
}

#cms-new-content-button {
  position: absolute;
  top: 0;
  right: 0;
}

html {
  height: 100%;
  overflow: auto;
}