denkGroot/Spina

// Tables

.table-container
  margin: 0 -40px

  tbody
    tr
      background: #fff

  table.table tr td:first-child, table.table tr th:first-child
    padding-left: 40px

  table.table tr td:last-child, table.table tr th:last-child
    padding-right: 40px

.modal .table-container
  margin: 0 -20px

  table.table tr td:first-child, table.table tr th:first-child
    padding-left: 20px

  table.table tr td:last-child, table.table tr th:last-child
    padding-right: 20px

table.table
  color: #333
  font-size: 14px
  line-height: 18px
  margin: 20px 0
  width: 100%

  thead tr, tbody tr
    border-bottom: 1px solid #eee

  table
    tr
      border-bottom: none

  tbody tr:last-child
    border: none

  thead th
    color: #333
    font-weight: 600
    outline: none
    padding: 12px 12px
    text-align: left

  tbody td, tbody th
    padding: 14px 12px
    text-align: left

  thead th, tbody td, tbody th
    &.text-right
      text-align: right

  th.nowrap, td.nowrap
    white-space: nowrap

  small
    color: #666
    display: block
    font-size: 13px
    font-weight: normal

  td .button
    margin-bottom: 0

  td.align-center
    text-align: center

  td.align-left
    text-align: left

  td.align-right, th.align-right
    text-align: right

  a.table-link
    display: block
    margin: -10px 0
    padding: 10px 0

  th .table-sort
    border-radius: 3px 3px 0 0
    color: #333
    display: block
    margin: -12px -16px -13px -16px
    padding: 13px 16px 12px 16px

  th .table-column-sorted
    background: #fff
    border: 1px solid #eee
    border-bottom: 1px solid #fff
    padding: 13px 15px 12px 15px
    position: relative

    &:after
      font-size: 16px
      position: absolute
      right: 10px
      @extend .icon, .icon-caret-up:before

    &.table-column-sorted-desc:after
      @extend .icon-caret-down:before

  th.text-right .table-column-sorted
    text-align: left

// Table form

table.table.table-form
  tr td:first-child
    font-weight: 600
    width: 240px

  thead tr, tbody tr
    border-bottom: none !important

  td .image
    border-radius: 3px
    display: inline-block
    height: 120px
    overflow: hidden
    width: 120px

    img
      display: block
      height: 100%
      width: 100%

  td .attachment
    display: inline-block
    margin: 10px 25px 10px 0

    &:before
      content: "S"
      font-family: $icon-font
      font-size: 28px
      margin-right: 10px
      vertical-align: middle

// Progress bars
.progress
  position: relative

.progress-bar
  border: 1px solid #9f9f9f
  border-radius: 6px
  display: flex
  height: 12px
  overflow: hidden
  position: relative
  transition: all .2s ease

.progress-bar-divider
  border-left: 1px solid #9f9f9f
  flex: 1
  height: 10px
  opacity: .5
  position: relative

  &:first-child  
    border: none

.progress-bar-inner
  background: #cdcdcd
  height: 10px
  left: 0
  position: absolute
  top: 0

.progress-label
  color: #838383
  display: block
  font-weight: 700
  font-size: 10px
  left: 0
  letter-spacing: 1px
  line-height: 10px
  opacity: 0
  position: absolute
  text-align: center
  text-transform: uppercase
  top: 2px
  transition: all .2s ease
  width: 100%

tr:hover .progress
  .progress-bar
    transform: translateY(-6px)

  .progress-label
    opacity: 1
    transform: translateY(9px)

.progress-bar-primary
  & .progress-bar
    border-color: tint($primary-color, 20%)

  & .progress-bar-divider
    border-color: tint($primary-color, 20%)

  & .progress-bar-inner
    background: tint($primary-color, 60%)

  & .progress-label
    color: tint($primary-color, 20%)

.progress-bar-success
  & .progress-bar
    border-color: $success-color

  & .progress-bar-divider
    border-color: $success-color

  & .progress-bar-inner
    background: tint($success-color, 60%)

  & .progress-label
    color: $success-color

.progress-bar-danger
  & .progress-bar
    border-color: $danger-color

  & .progress-bar-divider
    border-color: $danger-color

  & .progress-bar-inner
    background: tint($danger-color, 60%)

  & .progress-label
    color: $danger-color

// Clickable tables

.table-clickable
  tbody tr
    transition: background .1s ease

  tbody tr:hover
    background: #f5f5fa

  tbody tr, tbody tr input[type="checkbox"], tbody tr input[type="radio"]
    cursor: pointer

// Datatables

.dataTables_filter
  display: none

.table-container > .search-input
  margin-right: 40px

.dataTables_info
  color: #666
  display: inline-block
  font-size: 12px
  margin-left: 40px

.dataTable
  th.sorting_desc
    &:after
      @extend .icon, .icon-caret-down:before
      float: right

  th.sorting_asc
    &:after
      @extend .icon, .icon-caret-up:before
      float: right

.dataTables_paginate
  float: right
  margin-right: 40px

  a
    color: #333
    cursor: pointer
    display: inline-block
    font-size: 13px
    font-weight: bold
    line-height: 24px
    padding: 0 13px

  a.paginate_disabled_previous, a.paginate_disabled_next
    display: none

// Information tables
.information-tables
  display: flex

  .information-table
    flex: 1

    th, td
      color: #333
      font-size: 14px
      font-weight: 500
      line-height: 30px
      text-align: left
      vertical-align: top

    th
      color: #999
      padding-right: 10px