sinsoku/ponytail

.new {
  @extend .vertical-box;
  width: 1024px;
  height: 768px;

  .container {
    @extend .horizontal-box;
    margin-top: 5px;

    .tables {
      @extend .vertical-box;
      @include box-flex(1);
      @include border-radius(5px);
      border: solid 1px #000;
      height: 500px;
      overflow-x: hidden;
      overflow-y: auto;
      margin: 0 2px;

      .table {
        @extend .vertical-box;
        border-bottom: solid 1px #000;
        padding: 3px;
        .table_name {
          @include box-flex(1);
          input {
            display: none;
          }
        }
        .edit_table i,
        .drop_table i,
        .restore_table i {
          cursor: pointer;
          margin: 0 2px;
        }

        .restore_table {
          display: none;
        }
      }

      .new_table {
        cursor: pointer;
        padding: 3px;
        margin-top: 3px;
      }

      .columns {
        margin: 3px 0 0 5px;
        display: none;

        .column {
          @extend .horizontal-box;
          padding: 2px;
          width: 100%;
          .column_type {
            width: 100px;
            cursor: pointer;
            &:hover {
              background-color: cornsilk;
            }
            select {
              display: none;
            }
          }
          .column_name {
            @include box-flex(1);
            cursor: pointer;
            &:hover {
              background-color: cornsilk;
            }
            input {
              display: none;
            }
          }
          .remove_column i,
          .restore_column i {
            cursor: pointer;
            margin: 0 2px;
          }
          .restore_column {
            display: none;
          }
        }

        .add_column {
          cursor: pointer;
          margin-top: 3px;
        }
      }

      .table_name {
        cursor: pointer;
        &:hover {
          background-color: cornsilk;
        }
      }

      .column_name {
        width: 100%;
      }
    }

    .migration_file {
      @extend .vertical-box;
      width: 500px;
      margin: 0 2px;

      .migration_file_header {
        @extend .horizontal-box;

        .classname {
          @include box-flex(1);
          span {
            display: none;
          }
        }
      }

      .raw_content {
        @include box-flex(1);
        margin-top: 3px;

        pre {
          margin: 5px 0;
        }
        textarea {
          width: 100%;
          height: 500px;
          display: none;
        }
      }

      .actions {
        margin-top: 3px;
      }
    }
  }
}