@import 'vars';

// Variables
$charPlus: $wb-var-plus;
$charMinus: $wb-var-minus;
$charCirclePlus: $wb-var-plus-circle;
$charCircleMinus: $wb-var-minus-circle;
$charSearch: $wb-var-search;
$charRemove: $wb-var-close;
$charPencil: $wb-var-pencil;
$charTrash: $wb-var-trash;
$charArrowUp: $wb-var-arrow-up;
$charArrowDown: $wb-var-arrow-down;
$charArrowLeft: $wb-var-arrow-left;
$charArrowRight: $wb-var-arrow-right;
$charArrowSmallUp: $wb-var-triangle-up;
$charArrowSmallDown: $wb-var-triangle-down;
$charArrowSmallLeft: $wb-var-triangle-left;
$charArrowSmallRight: $wb-var-triangle-right;
$charArrowAltUp: $wb-var-chevron-up;
$charArrowAltDown: $wb-var-chevron-down;
$charArrowAltLeft: $wb-var-chevron-left;
$charArrowAltRight: $wb-var-chevron-right;
$charCircleArrowUp: $wb-var-dropup;
$charCircleArrowDown: $wb-var-dropdown;
$charCircleArrowLeft: $wb-var-dropleft;
$charCircleArrowRight: $wb-var-dropright;
$charArrowTinyUp: $wb-var-chevron-up-mini;
$charArrowTinyDown: $wb-var-chevron-down-mini;
$charArrowTinyLeft: $wb-var-chevron-left-mini;
$charArrowTinyRight: $wb-var-chevron-right-mini;
$charArrowSmallUpDown: $wb-var-sort-vertical;
$colorStriping: $table-accent-bg;
$tr-hover: $table-hover-bg;
$fontPath: $wb-font-path;
$fontFootable: $wb-font-family;

$dropdown-header-padding: 8px 20px 6px !default;
$dropdown-link-padding: $dropdown-item-padding-y $dropdown-item-padding-x;

@mixin ToggleTheme($charCirclePlus, $charCircleMinus) {
  > tbody > tr {
    > td > span.fooicon-minus:before {
      content: $charCircleMinus;

      &:hover {
        background-color: $tr-hover;
      }
    }

    > td > span.fooicon-plus:before {
      content: $charCirclePlus;
    }
  }
}

// Classes

.footable {
  width: 100%;

  span.fooicon {
    font-family: $fontFootable;
  }

  &.breakpoint {
    > tbody > tr {
      > td {
        border-bottom: none;

        & > span.footable-toggle:before {
          content: $charCircleMinus;
        }
      }

      &:hover:not(.footable-row-detail) {
        cursor: pointer;
      }

      > td.footable-cell-detail {
        border-top: none;
      }

      > td > span.footable-toggle {
        display: inline-block;
        padding-right: 5px;
        font-family: $fontFootable;
        font-size: 14px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        speak: none;
        -webkit-font-smoothing: antialiased;

        &:before {
          content: $charCirclePlus;
        }
      }
    }

    &.toggle-circle {
      @include ToggleTheme($charCirclePlus, $charCircleMinus);
    }

    &.toggle-arrow {
      @include ToggleTheme($charArrowRight, $charArrowDown);
    }

    &.toggle-arrow-small {
      @include ToggleTheme($charArrowSmallRight, $charArrowSmallDown);
    }

    &.toggle-arrow-circle {
      @include ToggleTheme($charCircleArrowRight, $charCircleArrowDown);
    }

    &.toggle-arrow-tiny {
      @include ToggleTheme($charArrowTinyRight, $charArrowTinyDown);
    }

    &.toggle-medium > tbody > tr {
      > td > span.footable-toggle {
        font-size: 18px;
      }
    }

    &.toggle-large > tbody > tr {
      > td > span.footable-toggle {
        font-size: 24px;
      }
    }
  }

  /** SORTING **/
  > thead > tr > th {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;

    &.footable-sortable:hover {
      cursor: pointer;
    }

    &.footable-asc > span.fooicon-sort-asc:before {
      content: $charArrowSmallDown;
      opacity: .5;
    }

    &.footable-desc > span.fooicon-sort-desc:before {
      content: $charArrowSmallUp;
      opacity: .5;
    }

    > span.fooicon-sort {
      display: inline-block;
      padding-left: 5px;
      font-family: $fontFootable;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      speak: none;
      -webkit-font-smoothing: antialiased;

      &:before {
        content: $charArrowSmallUpDown;
        opacity: .2;
      }
    }
  }

  // FILTERING: for v3

  /** FILTERING **/
  > thead > tr.footable-filtering > th {
    //for responsive ---start
    .form-inline {
      .form-group {

        @include media-breakpoint-up(md) {
          display: inline-block;
        }
        display: block;
      }

      .form-control {

        @include media-breakpoint-up(md) {
          display: inline-block;
          width: auto;
        }
        display: block;
        width: 100%;
      }
    }

    //add for v4a6-dev 20170302 ---Kevin_y
    > .form-inline {
      @include media-breakpoint-down(md) {
        justify-content: flex-start;
      }
      justify-content: flex-end;
    }
    //---Kevin_y

    .input-group-btn {

      @include media-breakpoint-up(md) {
        width: auto;
      }
      width: 1%;
      //for responsive ---end

      &:not(:first-child) > .btn:hover {
        z-index: 2;
      }
    }

    ul.dropdown-menu > li > a {
      padding: 3px 20px;

      &.checkbox input[type="checkbox"] {
        margin-top: 4px;
      }

      &:hover {
        background-color: $tr-hover;
      }
    }

    span.fooicon-search:before {
      content: $charSearch;
    }

    span.fooicon-remove:before {
      content: $charRemove;
    }
  }

  // EDITING: for v3

  /** EDITING BODY**/
  > tbody > tr > td {
    span.fooicon-pencil:before {
      content: $charPencil;
    }

    span.fooicon-trash:before {
      content: $charTrash;
    }
  }

  /** EDITING FOOT**/
  > tfoot > tr > td {
    span.fooicon-pencil:before {
      content: $charPencil;
    }
  }

  // Pagination: for v3

  /** PAGINATION **/
  > tfoot .pagination {
    justify-content: center;
    margin: 0;

    > li {
      display: inline;

      &.footable-page {
        display: none;

        &.visible {
          display: inline;
        }
      }

      &:first-child {
        > a {
          @include border-left-radius($border-radius);
          margin-left: 0;
        }
      }

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

      &.active > a {
        @include plain-hover-focus {
          z-index: 2;
          color: $pagination-active-color;
          cursor: default;
          background-color: $pagination-active-bg;
          border-color: $pagination-active-border;
        }
      }

      &.disabled > a {
        @include plain-hover-focus {
          color: $pagination-disabled-color;
          cursor: $cursor-disabled;
          background-color: $pagination-disabled-bg;
          border-color: $pagination-disabled-border;
        }
      }
    }

    a {

      @include hover-focus {
        color: $pagination-hover-color;
        background-color: $pagination-hover-bg;
        border-color: $pagination-hover-border;
      }
      position: relative;
      float: left; // Collapse white-space
      padding: $pagination-padding-y $pagination-padding-x;
      margin-left: -1px;
      line-height: $line-height;
      color: $pagination-color;
      text-decoration: none;
      background-color: $pagination-bg;
      border: $pagination-border-width solid $pagination-border-color;
    }//add for v4a6-dev 20170302 ---Kevin_y
  }

  &.no-paging .hide-if-no-paging {
    display: none;
  }
}

.footable-row-detail-inner {
  display: table;
}

.footable-row-detail-row {
  display: table-row;
  line-height: 1.5em;
}

.footable-row-detail-group {
  display: block;
  font-size: 1.2em;
  font-weight: $font-weight-bold;
  line-height: 2em;
}

.footable-row-detail-name {
  display: table-cell;
  padding-right: .5em;
  font-weight: $font-weight-bold;
}

.footable-row-detail-value {
  display: table-cell;
}

.footable-odd {
  background-color: $colorStriping;
}

//table style

/** fix table-hover **/
.table-hover {
  &.footable {
    tbody tr.footable-detail-row {
      &:hover {
        background-color: transparent;
      }
    }
  }
}

/** fix table-bordered/hover/striped style in Footable **/
.table-bordered, .table-hover, .table-striped {
  &.footable {
    tbody tr.footable-detail-row {
      > td {
        padding: 0;
      }
    }
  }
}

// To repair and repair / repair for repair's sake PS:MDZZ
// .footable-detail-row .footable-details.table-bordered {
//   > tbody > tr:first-child,
//   > thead > tr:first-child {
//     > th,
//     > td {
//       border-top-width: 0 !important;
//     }
//   }

//   > tbody > tr:last-child,
//   > tfoot > tr:last-child {
//     > th,
//     > td {
//       border-bottom-width: 0 !important;
//     }
//   }
// }

// for bootstrapV3.x pagination & input-group-btn & label & dropdown-menu
// ======================================================================
.footable {
  // pagination
  // ==========
  .pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
  }
  .pagination > li {
    display: inline;
  }
  .pagination > li > a,
  .pagination > li > span {
    position: relative;
    float: left;
    margin-left: -1px;
  }

  // label
  // =====
  .label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
  }
  a.label:hover,
  a.label:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
  }
  .label:empty {
    display: none;
  }
  .btn .label {
    position: relative;
    top: -1px;
  }
  .label-default {
    background-color: $gray-300;
  }
  .label-default[href]:hover,
  .label-default[href]:focus {
    background-color: $brand-default-hover;
  }
  .label-primary {
    background-color: $brand-primary;
  }
  .label-primary[href]:hover,
  .label-primary[href]:focus {
    background-color: $brand-primary-hover;
  }
  .label-success {
    background-color: $brand-success;
  }
  .label-success[href]:hover,
  .label-success[href]:focus {
    background-color: $brand-success-hover;
  }
  .label-info {
    background-color: $brand-info;
  }
  .label-info[href]:hover,
  .label-info[href]:focus {
    background-color: $brand-info-hover;
  }
  .label-warning {
    background-color: $brand-warning;
  }
  .label-warning[href]:hover,
  .label-warning[href]:focus {
    background-color: $brand-warning-hover;
  }
  .label-danger {
    background-color: $brand-danger;
  }
  .label-danger[href]:hover,
  .label-danger[href]:focus {
    background-color: $brand-danger-hover;
  }

  // input-group-btn
  // ===============

  @media (min-width: 768px) {
    .form-inline .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }
    .form-inline .form-control {
      display: inline-block;
      width: auto;
      vertical-align: middle;
    }
    .form-inline .form-control-static {
      display: inline-block;
    }
    .form-inline .input-group {
      display: inline-table;
      vertical-align: middle;
    }
    .form-inline .input-group .input-group-addon,
    .form-inline .input-group .input-group-btn,
    .form-inline .input-group .form-control {
      width: auto;
    }
    .form-inline .input-group > .form-control {
      width: 100%;
    }
    .form-inline .control-label {
      margin-bottom: 0;
      vertical-align: middle;
    }
  }

  .input-group {
    position: relative;
    display: table;
    border-collapse: separate;
  }
  .input-group[class*="col-"] {
    float: none;
    padding-right: 0;
    padding-left: 0;
  }
  .input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
  }
  .input-group .form-control:focus {
    z-index: 3;
  }
  .input-group-lg > .form-control,
  .input-group-lg > .input-group-addon,
  .input-group-lg > .input-group-btn > .btn {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: 6px;
  }
  select.input-group-lg > .form-control,
  select.input-group-lg > .input-group-addon,
  select.input-group-lg > .input-group-btn > .btn {
    height: 46px;
    line-height: 46px;
  }
  textarea.input-group-lg > .form-control,
  textarea.input-group-lg > .input-group-addon,
  textarea.input-group-lg > .input-group-btn > .btn,
  select[multiple].input-group-lg > .form-control,
  select[multiple].input-group-lg > .input-group-addon,
  select[multiple].input-group-lg > .input-group-btn > .btn {
    height: auto;
  }
  .input-group-sm > .form-control,
  .input-group-sm > .input-group-addon,
  .input-group-sm > .input-group-btn > .btn {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
  select.input-group-sm > .form-control,
  select.input-group-sm > .input-group-addon,
  select.input-group-sm > .input-group-btn > .btn {
    height: 30px;
    line-height: 30px;
  }
  textarea.input-group-sm > .form-control,
  textarea.input-group-sm > .input-group-addon,
  textarea.input-group-sm > .input-group-btn > .btn,
  select[multiple].input-group-sm > .form-control,
  select[multiple].input-group-sm > .input-group-addon,
  select[multiple].input-group-sm > .input-group-btn > .btn {
    height: auto;
  }
  .input-group-addon,
  .input-group-btn,
  .input-group .form-control {
    display: table-cell;
  }
  .input-group-addon:not(:first-child):not(:last-child),
  .input-group-btn:not(:first-child):not(:last-child),
  .input-group .form-control:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
  .input-group-addon,
  .input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
  }
  .input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .input-group-addon.input-sm {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
  }
  .input-group-addon.input-lg {
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 6px;
  }
  .input-group-addon input[type="radio"],
  .input-group-addon input[type="checkbox"] {
    margin-top: 0;
  }
  .input-group .form-control:first-child,
  .input-group-addon:first-child,
  .input-group-btn:first-child > .btn,
  .input-group-btn:first-child > .btn-group > .btn,
  .input-group-btn:first-child > .dropdown-toggle,
  .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
  .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .input-group-addon:first-child {
    border-right: 0;
  }
  .input-group .form-control:last-child,
  .input-group-addon:last-child,
  .input-group-btn:last-child > .btn,
  .input-group-btn:last-child > .btn-group > .btn,
  .input-group-btn:last-child > .dropdown-toggle,
  .input-group-btn:first-child > .btn:not(:first-child),
  .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .input-group-addon:last-child {
    border-left: 0;
  }
  .input-group-btn {
    position: relative;
    font-size: 0;
    white-space: nowrap;
  }
  .input-group-btn > .btn {
    position: relative;
  }
  .input-group-btn > .btn + .btn {
    // margin-left: -1px;
  }
  .input-group-btn > .btn:hover,
  .input-group-btn > .btn:focus,
  .input-group-btn > .btn:active {
    z-index: 2;
  }
  .input-group-btn:first-child > .btn,
  .input-group-btn:first-child > .btn-group {
    margin-right: -1px;
  }
  .input-group-btn:last-child > .btn,
  .input-group-btn:last-child > .btn-group {
    z-index: 2;
    // margin-left: -1px;
  }

  // dropdown-menu
  // =============
  > .dropdown-toggle {
    &:after {
      display: none;
      margin: 0;
      border: none;
    }

    .caret {
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: .3em;
      vertical-align: middle;
      border-top: 4px solid;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
      transition: .25s;
      transform: scale(1.001);
    }
  }

  &.dropup .caret {
    border-top: 0;
    border-bottom: 4px solid;
  }

  .dropdown-menu > li {
    padding: 0 5px;
    margin: 2px 0;
  }

  .dropdown-menu > .dropdown-header {
    padding: $dropdown-header-padding;
  }

  .dropdown-menu > li.divider {
    height: 1px;
    margin: 10px 0;
    overflow: hidden;
    background-color: $gray-200;
  }

  .dropdown-menu > li > a {
    display: block;
    padding: $dropdown-link-padding;
    font-weight: normal;
    line-height: $line-height-base;
    color: $dropdown-link-color;
    white-space: nowrap; // prevent links from randomly breaking onto new lines
    border-radius: $dropdown-item-border-radius;
    transition: background-color .25s;

    &:hover, &:focus {
      color: $dropdown-link-hover-color;
      text-decoration: none;
      background-color: $dropdown-link-hover-bg;
    }
  }

  // Active state
  .dropdown-menu > .active > a {
    &, &:hover, &:focus {
      color: $dropdown-link-active-color;
      text-decoration: none;
      background-color: $dropdown-link-active-bg;
      outline: 0;
    }
  }
  // disabled state
  .dropdown-menu > .disabled > a {
    &, &:hover, &:focus {
      color: $dropdown-link-disabled-color;
    }

    // Nuke hover/focus effects
    &:hover, &:focus {
      text-decoration: none;
      // @include reset-filter;
      cursor: $cursor-disabled;
      background-color: transparent;
      background-image: none; // Remove CSS gradient
    }
  }
}

// for bootstrap some style
// ========================
.footable-filtering-external.footable-filtering-center,
.footable-paging-external.footable-paging-center,
table.footable-paging-center>tfoot>tr.footable-paging>td,
table.footable.footable-filtering-center>thead>tr.footable-filtering>th,
table.footable>tfoot>tr.footable-paging>td {
  text-align: center;
}