@import 'bootstrap';

/* set horizontal padding on all content containers */
#title_bar, .flashes, .logged_out #content_wrapper, #footer {
  @include container-fixed;
}

#wrapper {
  @include container-fixed(0);
}

// apply bootstrap pagination style to .pagination
.pagination {
  > span {
    position: relative;
    float: left;
    padding: $padding-base-vertical $padding-base-horizontal;
    line-height: $line-height-base;
    background-color: $pagination-bg;
    border: 1px solid $pagination-border;
    margin-left: -1px;

    &:first-child {
      @include border-left-radius($border-radius-base);
    }

    &:last-child {
      @include border-right-radius($border-radius-base);
    }

    &:hover, &:focus {
      z-index: 2;
      color: $pagination-hover-color;
      background-color: $pagination-hover-bg;
      border-color: $pagination-hover-border;
    }

    &.current {
      &, &:hover, &:focus {
        z-index: 3;
        color: $pagination-active-color;
        background-color: $pagination-active-bg;
        border-color: $pagination-active-border;
        cursor: default;
      }
    }

    &.gap {
      &, &:hover, &:focus {
        color: $pagination-disabled-color;
        background-color: $pagination-disabled-bg;
        border-color: $pagination-disabled-border;
        cursor: $cursor-disabled;
      }
    }

    a {
      color: $pagination-color;

      &:hover, &:focus {
        text-decoration: none;
      }
    }
  }
}

//apply bootstrap panel style to .panel
.panel {
  @extend .panel-default;

  > h3 {
    @extend .panel-heading;

    padding-top: 7px;
    margin: 0;

    a {
      color: $panel-default-text;
    }
  }
}

.panel_contents {
  @extend .panel-body;
}

.flash {
  @extend .alert;
  margin-top: 30px;
}

.flash_alert {
  @extend .alert-danger;
}

.flash_notice {
  @extend .alert-success;
}

#error_explanation {
  color: $state-danger-text;
  h2 {
    font-size: 15px;
  }
}

.inline-errors {
  color: $state-danger-text;
}

#login {
  max-width: 400px;
  padding: 15px;
  margin: 0 auto;

  #admin_user_remember_me {
    width: 12px;
    height: 12px;
    display: inline-block;
    margin-right: 10px;
  }

  #admin_user_submit_action, input[type="submit"] {
    @extend .btn-block;
  }
}

/* Header and Nav */
#header {
  @extend .navbar;
  @extend .navbar-inverse;
  border-radius: 0;

  .mobile {
    display: none;
  }

  @media (max-width: 768px) {
    .button_mobile_burger {
      margin-top: 0;
    }

    #site_title {
      float: left;
    }

    #utility_nav {
      display: none;
    }

    #tabs {
      clear: both;
    }

    .mobile {
      display: block;
    }

    .header-item.tabs {
      margin: 7.5px 0;
    }

    #utility_nav {
      float: none;
    }
  }

  @media (min-width: 769px) {
    #utility_nav {
      float: right;
    }
  }

  #site_title {
    @extend .navbar-brand;
    margin-top:    0;
    margin-bottom: 0;
  }

  .header-item.tabs {
    @extend .nav;
    @extend .navbar-nav;

    li.current { @extend .active; }
  }

  .header-item.tab {
    @extend .col-sm-3;
  }
}

#title_bar {
  @extend .clearfix;
  margin-bottom: 10px;

  #titlebar_left {
    @extend .pull-left;
  }

  #titlebar_right {
    @extend .pull-right;
  }

  .action_item a {
    @extend .btn;
    @extend .btn-primary;
  }
}

/* Sidebar */
.filter_form {
  .filter_form_field {
    @extend .form-group;

    input,select { @extend .form-control; }

    select[multiple] {
      height: auto;
    }
  }

  .buttons {
    input, a { @extend .btn; @extend .btn-default; }
    input[type="submit"] { @extend .btn-primary; }
  }
}

/* Main Content */
#active_admin_content {
  @extend .row;
  margin: 0;
  padding-bottom: 30px;

  &.without_sidebar {
    #main_content_wrapper {
      @extend .col-md-6;
      width: auto;
      min-width: 100%;
    }
  }

  &.with_sidebar {
    #main_content_wrapper { @extend .col-md-9; }
    #sidebar { @extend .col-md-3; }
  }

  table {
    width: auto;
  }
}

#main_content_wrapper {
  padding-bottom: 40px;
  /* make extra wide content accessible */
  overflow-x: auto;

  .member_link {
    margin-right: 10px;
  }
  input[type="checkbox"] {
    display: inline-block;
    width: auto;
    height: auto;
    margin-right: 10px;
  }
}

#main_content table {
  @extend .table;
}

ul.scopes {
  li.scope {
    display: inline-block;
    list-style-type: none;
    margin-bottom: 4px;
  }
  li.scope a{ @extend .btn; @extend .btn-default; }
  li.scope.selected a { @extend .btn-primary; }
}

/* breadcrumb */
.breadcrumb {
  /* the typical bootstrap look for .breadcrumb does not fit in the active admin layout */
  padding: 0;
  border-radius: 0;
}

#ui-datepicker-div {
  background: white;
  padding: 5px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 5px;
  .ui-datepicker-calendar {
    th, td {
      width: 30px;
      height: 30px;
      text-align: center;
      &:hover {
        background: #eeeeee;
        cursor: pointer;
      }
    }
  }

  .ui-datepicker-prev {
    float: left;
  }

  .ui-datepicker-next {
    float: right;
  }

  .ui-datepicker-today {
    font-weight: bold;
  }

  .ui-datepicker-title {
    text-align: center;
    font-weight: bold;
  }
}

/* Tables */
.index_as_table { @extend .table-responsive; }
.index_table      { @extend .table; }
.attributes_table table { @extend .table; }

//turn .table_actions into buttons with icons

#main_content_wrapper .table_actions {
  @extend .btn-toolbar;
  min-width: 117px;

  > .member_link {
    margin: (-3px) 10px 0 0;

    &:last-child {
      margin-right: 0;
    }
  }
}

.member_link, .ui-sortable-handle {
  @extend .btn;
  @extend .btn-default;
  @extend .glyphicon;
  font-size: 0;
  text-align: center;
  padding: 3px 0;
  width: 28px;

  &:before {
    font-size: 14px;
  }
}

.ui-sortable-handle {
  @extend .glyphicon-sort;
  cursor: all-scroll;
}

.view_link {
  @extend .glyphicon-search;
}

.edit_link {
  @extend .glyphicon-pencil;
}

.delete_link {
  @extend .glyphicon-trash;
}

/* Forms */
form {
  //@extend form[role="form"];

  .inputs, .actions {
    ol {
      padding-left: 0;
      list-style: none;
    }
  }

  .inputs {
    li {
      @extend .form-group;

      input,select,textarea { @extend .form-control; }

      select[multiple] {
        height: auto;
      }
    }
  }

  .actions {
    li {
      display: inline-block;

      input, a { @extend .btn; @extend .btn-default; }
      input[type="submit"] { @extend .btn-primary; }
    }
  }

  .actions li {
    margin-right: 10px;
  }

  label.label {
    /* The label class has a different meaning in bootstrap */
    display: inline-block;
    font-weight: bold;

    padding: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-align: inherit;
    white-space: inherit;
    vertical-align: inherit;
    border-radius: inherit;
  }

  &.formtastic .errors {
    color: $state-danger-text;
  }
}

/* Footer */
#footer {
  padding-top: 30px;
  padding-bottom: 20px;
  background-color: #9da5a4;
}

legend.label {
  @extend legend;
  text-align: left;
  border-radius: 0;
  margin-bottom: 10px;
}

/* Display of checkboxes and radios */

.check_boxes {
  @extend .checkbox;
}

.check_boxes, .radio {
  label {
    font-weight: normal;
  }

  legend label {
    padding: 0;
  }
}

// style filter form
.filter_form {

  input {
    margin-top: 10px;
  }

  label input {
    margin-top: 5px;
  }

  .buttons {
    input, a {
      margin-right: 5px;
    }

    a {
      margin-top: 10px;
    }
  }

  .filter_form_field, form .inputs li {

    select[multiple] {
      height: auto;
    }

    input[type="radio"] {
      height: auto;
      width: auto;
    }
  }
}

/* table_tools */

.table_tools {
  overflow: hidden;
  margin-bottom: 10px;

  .batch_actions_selector {
    .dropdown_menu_button {
      @extend .btn;
      @extend .btn-default;
      @extend .dropdown-toggle;
      &:after {
        margin-left: 0.4em;
        content: "";
        @extend .caret;
      }
    }

    .dropdown_menu_list {
      @extend .dropdown-menu;
      display: block;
      top: auto;
      left: auto;
    }
  }

  .table_tools_segmented_control {
    @extend .btn-group;
    margin: 0 0 0 1px;
  }

  .index {
    @extend .btn;
    @extend .btn-default;

    a {
      color: $btn-default-color;

      &:hover, &:focus {
        text-decoration: none;
      }
    }

    &.selected {
      @extend .btn-default;
      @extend .active;
    }
  }
}