/*
  RailsAdmin main CSS
  Keep it clean, people
*/

$avatar-size: 30px;

body.rails_admin {

  .thumbnail {
    display: inline-block;
  }

  /* room for upper navbar */
  padding-top: $navbar-height;

  .navbar {
    .edit_user_root_link {
      position: relative;

      img {
        position: absolute;
        top: ((40px - $avatar-size) / 2);

        & + span {
          margin-left: ($avatar-size + 5px);
        }
      }
    }
  }

  .sidebar-nav {
    padding: 0;
    background-color: $navbar-default-bg;

    .dropdown-header {
      padding: ($grid-gutter-width / 2) ($grid-gutter-width / 2) 3px;
      font-weight: bold;
      color: $gray;
      text-transform: uppercase;
    }

    > .nav-stacked > li > a {
      padding: $padding-base-vertical ($grid-gutter-width / 2);
      border-radius: 0;

      &.nav-level-1 {
        padding-left: $grid-gutter-width;
      }

      &.nav-level-2 {
        padding-left: ($grid-gutter-width * 1.5);
      }

      &.nav-level-3 {
        padding-left: ($grid-gutter-width * 2);
      }
    }
  }

  label.input-group-addon {
    cursor: pointer;
  }

  /* fat labels in forms */
  .label.form-label {
    padding: 7px 7px 8px 7px;
  }

  /* new/edit/export forms */
  .form-horizontal {
    /* hide hidden fields controls by default */
    .control-group .hidden_type {
      display:none;
    }

    .control-group {
      .img-thumbnail {
        margin-bottom: 10px;
      }

      .btn-remove-image {
        &.btn-info {
          margin-top: 10px;
        }
      }
    }

    legend {
      cursor:pointer;
      i {
        vertical-align: inherit !important;
      }
    }

    &.denser {
      margin-top: 30px;
      .controls .nav {
        margin: 30px 0 0;
      }
      .remove_nested_fields,
      .remove_nested_one_fields {
        position:absolute;
      }
      p {
        font-size: 12px;
        line-height: 16px;
      }
      .help-block {
        // margin-top: 0px;
      }
      .input-prepend, .input-append {
        margin-bottom: 0px;
        label {
          margin-bottom: 0px;
        }
      }
      legend {
        margin-bottom: 30px;
      }
    }

    /* We want input size to be used, unfixate input width */
    input, textarea {
      width:auto;
    }
    .help-block {
      clear:left;
    }
    input[type=file] {
      display:block;
    }

    /* nested forms */
    .tab-content {
      clear: both;

      .tab-pane {
        @include clearfix;
        border-left: 5px solid #049cdb;
        position: relative;

        fieldset {
          padding-top: 30px;
        }

        .form-group {
          margin-right: 0;
          margin-left: -5px; /* Balance border-left */
        }

        & > .remove_nested_fields,
        & > .remove_nested_one_fields {
          display:block;
          opacity: 0;
          position: absolute;
          top: 0px;
          left: 5px;
          -webkit-transition: opacity .15s ease;
          transition: opacity .15s ease;
        }
        &:hover > .remove_nested_fields,
        &:hover > .remove_nested_one_fields,
        & > .remove_nested_one_fields.active {
          opacity: 1;
        }
      }
    }

    /* double nesting, guys. Easy. */
    .tab-content .tab-content .tab-pane {
      border-color: lighten(#049cdb, 20%);
      margin-left: 10px;

      .form-group {
        margin-left: -15px; /* Balance border-left */
      }
    }

    /* triple nesting!*/
    .tab-content .tab-content .tab-content .tab-pane {
      border-color:lighten(#049cdb, 30%);
      margin-left: 20px;

      .form-group {
        margin-left: -25px; /* Balance border-left */
      }
    }

    /* totally awesome! nesting on 4 levels! */
    .tab-content .tab-content .tab-content  .tab-content .tab-pane {
      border-color:lighten(#049cdb, 40%);
      margin-left: 30px;

      .form-group {
        margin-left: -35px; /* Balance border-left */
      }
    }
  }

  // .modal {
  //   width: 750px;
  //   margin-left: -375px;
  // }

  /* nested nav */
  .nav {
    .nav-level-1 {
      padding-left:30px;
    }
    .nav-level-2 {
      padding-left:60px;
    }
    .nav-level-3 {
      padding-left:90px;
    }
  }

  /* tab links should match icon color */
  .nav.nav-tabs {
    margin-bottom: 20px;

    li.icon a {
      color: #000;
    }
  }

  /* Table cells behaviour */
  .table {
    // Cells
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th {
          border-bottom: 0px;
        }
      }
    }
    .thumbnail {
      float:left;
      & + * {
        clear:left;
      }
    }
    /* backport of Bootstrap 1.4 table headers */
    .header {
      cursor: pointer;
      &:after {
        content: "";
        float: right;
        margin-top: 7px;
        border-width: 0 4px 4px;
        border-style: solid;
        border-color: #000 transparent;
        visibility: hidden;
      }
    }
    .headerSortUp,
    .headerSortDown {
      background-color: rgba(141,192,219,.25);
      text-shadow: 0 1px 1px rgba(255,255,255,.75);
    }
    .header:hover {
      &:after {
        visibility:visible;
      }
    }
    .headerSortDown,
    .headerSortDown:hover {
      &:after {
        visibility:visible;
        @include opacity(60);
      }
    }
    .headerSortUp {
      &:after {
        border-bottom: none;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #000;
        visibility:visible;
        @include box-shadow(none);
        @include opacity(60);
      }
    }

    /* text-overflow when cell content > 150px */
    td {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width:150px;
    }

    /* icons */
    td.links {
      max-width: none;
      .list-inline {
        margin:0px;
        li { display:inline-block; }
      }
    }

    /* Shrink to content width */
    .shrink {
      width:1px;
      white-space:nowrap;
    }

    /* History */
    th.created_at {
      width:160px;
    }
    th.username {
      width:140px;
    }
    th.item {
      width:60px;
    }
  }
}

@media screen and (min-width: $grid-float-breakpoint) {
  body.rails_admin {
    .navbar {
      .edit_user_root_link {
        img {
          top: (($navbar-height - $avatar-size) / 2);
        }
      }
    }

    .sidebar-nav {
      position: fixed;
      top: $navbar-height;
      bottom: 0;
      overflow-y: auto;
    }
  }
}