sferik/rails_admin

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

$avatar-size: 30px;

body.rails_admin {
  .thumbnail {
    display: inline-block;
  }

  /* Top navigation */
  padding-top: $nav-link-height + $navbar-padding-y * 2;

  .navbar {
    .edit_user_root_link {
      position: relative;

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

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

  /* Sidebar navigation */
  .sidebar.btn-toggle-nav {
    padding: 0;

    .btn-toggle {
      margin-top: calc(#{$grid-gutter-width} / 2);
      padding: 3px calc(#{$grid-gutter-width} / 2);
      font-weight: bold;
      color: $gray-600;
    }

    .btn-toggle[aria-expanded="true"] {
      color: $gray-700;
    }

    .btn-toggle-nav > li > a {
      padding: calc(#{$navbar-padding-y} / 2) calc(#{$grid-gutter-width} / 2);

      &.active {
        background-color: map-get($theme-colors, primary);
        color: color-contrast(map-get($theme-colors, primary));
      }

      &:hover {
        background-color: map-get($theme-colors, primary);
        color: color-contrast(map-get($theme-colors, primary));
      }

      &.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);
      }
    }
  }

  /* Main form */
  form.main {
    /* hide hidden fields controls by default */
    .control-group .hidden_type {
      display: none;
    }

    /* nested forms */
    .tab-content {
      .tab-pane {
        border-left: 5px solid map-get($theme-colors, primary);
        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;
          transition: opacity 0.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(map-get($theme-colors, info), 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(map-get($theme-colors, warning), 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(map-get($theme-colors, success), 40%);
      margin-left: 30px;

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

  /* Action tabs */
  .nav.nav-tabs {
    li.nav-item.icon + li.nav-item.dropdown {
      margin-left: auto;
    }
    /* To silence Popper's warning: 'CSS "margin" styles cannot be used...' */
    .dropdown-menu {
      margin: 0;
    }
  }

  /* Table cells behaviour */
  .table {
    height: 100%;

    // Cells
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th {
          border-bottom: 0px;
        }
      }
    }
    .thumbnail {
      float: left;
      & + * {
        clear: left;
      }
    }
    /* backport of Bootstrap 1.4 table headers */
    .header {
      cursor: pointer;
      padding-right: 18px;
      &:after {
        content: "";
        float: right;
        margin-top: 7px;
        margin-left: 8px;
        margin-right: -16px;
        border-width: 0 4px 4px;
        border-style: solid;
        border-color: $dark transparent;
        visibility: hidden;
      }
    }
    .headerSortUp,
    .headerSortDown {
      background-color: rgba($info, 0.25);
      text-shadow: 0 1px 1px rgba($light, 0.75);
    }
    .header:hover {
      &:after {
        visibility: visible;
      }
    }
    .headerSortDown,
    .headerSortDown:hover {
      &:after {
        visibility: visible;
        opacity: 60;
      }
    }
    .headerSortUp {
      &:after {
        border-bottom: none;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid $dark;
        visibility: visible;
        @include box-shadow(none);
        opacity: 60;
      }
    }

    th {
      white-space: nowrap;
    }

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

    th,
    td {
      padding: 5px 10px;
    }

    .sticky {
      position: sticky;
    }

    th.last,
    td.last {
      position: sticky;
      right: 0px;
    }

    /* icons */
    td.links {
      max-width: none;
      .list-inline {
        margin-bottom: 0;
        li {
          display: inline-block;
          padding: 0 3px;
          .nav-link {
            padding: 0 0.1em;
          }
        }
      }
    }

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

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

  /* Dashboard */
  .table {
    .progress {
      height: 100%;
    }
  }

  /* Index */
  #filters_box {
    .form-control {
      display: inline-block;
      vertical-align: middle;
      width: auto;
    }
  }
  #sidescroll {
    margin-bottom: 20px;
    overflow-x: auto;
    .table {
      margin-bottom: 0;
    }

    // Remove transparency on sticky cells.
    $table-bg-default: if(
      $table-bg == transparent,
      if($body-bg == transparent, #fff, $body-bg),
      $table-bg
    ) !default;
    .table-striped > tbody > tr > td,
    .table-striped > thead > tr > th {
      background-color: $table-bg-default;
    }
    $table-bg-header-sort: #e2eff6 !default;
    .table .sticky,
    .table .last {
      &.headerSortUp,
      &.headerSortDown {
        background-color: $table-bg-header-sort;
      }
    }
  }
  .pagination .page-item {
    white-space: nowrap;
  }
}

@media screen and (min-width: map-get($grid-breakpoints, "sm")) {
  body.rails_admin {
    .sidebar.btn-toggle-nav {
      position: fixed;
      top: $nav-link-height + $navbar-padding-y * 2;
      bottom: 0;
      overflow-y: auto;
    }
  }
}

@media screen and (max-width: map-get($grid-breakpoints, "sm")) {
  body.rails_admin {
    .container {
      padding: 0;
    }
  }
}