freeCodeCamp/public/css/styles.less

body {
  padding-top: 80px;
}
//
// TODO: Refactor
//
.navbar-nav img {
  width: 40px;
  height: 40px;
  margin: -15px 15px -15px 0;
}

[class^="fa-"],
[class*="fa-"] {
  margin-right: 5px;
}


.facebook {
  background-color: #335397;
  border-color: #335397;
}

.twitter {
  background-color: #00c7f7;
  border-color: #00c7f7;
}

.google {
  background-color: #dd4b39;
  border-color: #dd4b39;
}

.github {
  background-color: #333;
  border-color: #333;


}// TODO: REFACTOR

// Search field
.dataTables_filter {
  float: right;

  input {
    display: inline-block;
    width: inherit;
    height: 30px;
    margin: 0 0 5px 5px;

    &:focus {
      border-color: #007aff;
      box-shadow: none;
    }
  }
}

// Show "X" entries
.dataTables_length {
  float: left;
}

// Sorting controls
.dataTable th {
  position: relative;
  font-weight: normal;

  &.sorting {
    color: #007aff;
    cursor: pointer;

    &:after,
    &:before {
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      right: 8px;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
    }

    &:after {
      top: 19px;
      border-top: 5px solid #007aff;
    }

    &:before {
      top: 11px;
      border-bottom: 5px solid #007aff;
    }
  }

  &.sorting_asc {
    color: #007aff;
    cursor: pointer;

    &:after {
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      right: 12px;
      top: 15px;
      border-bottom: 5px solid #007aff;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
    }
  }

  &.sorting_desc {
    color: #007aff;
    cursor: pointer;

    &:after {
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      right: 12px;
      top: 15px;
      border-top: 5px solid #007aff;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
    }
  }
}

.dataTables_wrapper {
  clear: both;
}

// Showing 1 to 10 of "X" entries
.dataTables_info {
  float: left;
  font-size: 13px;
}

// Pagination container
.dataTables_paginate {
  float: right;
}

// Pagination buttons
.dataTables_paginate a {
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #aaa;
  color: #999;
  background: #fff;
  padding: 4px 8px;
  margin-left:5px;

  &:hover {
    color: #007aff;
    border-color: #007aff;
  }

  &.paginate_active {
    border-color: #007aff;
    background: #007aff;
    color: #fff;
  }

  &.paginate_button_disabled {
    border-color: #e3e3e3;
    color: #ddd;
    pointer-events: none;
  }
}