RootZanli & NinjaCr3

: / home / o5t6x7pgljbm / public_html / admin_new2 / public / src / sass / pages /
Filename : data-tables.scss
back
/*----------------------------------------
        Data Tables
------------------------------------------*/

@import 'variables.scss';

// For Styling Of DataTables

#main {
  .section-data-tables {
    .dataTables_wrapper {
      table {
        &.dataTable {
          width: 100% !important;
          thead {
              th {
                  min-width: 69px;
                  color: color('grey', 'darken-2');

                  &.background-image-none {
                      background-image: none !important;
                  }

                  &.select-all {
                      background-image: none !important;
                  }
              }
          }

          th,
          td {
              border-bottom: 1px solid color("blue-grey", lighten-4);
              font-weight: 300;
              white-space: nowrap;
          }
          th{
            padding: 17px 14px;
          }

          tbody {
              height: 300px;
              max-width: 100%;
              overflow: auto;

              th,
              td {
                  border: none !important;
                  white-space: nowrap;
              }
              td:not(:first-child){
                padding: 8px 14px;
              }
              // For Toggler

              tr{
                  td,th{
                      &:before{
                          top: 10px;
                          font-size: 0.9rem;
                          height: 12px;
                          width: 12px;
                          text-indent: 0;
                          line-height: 14px;
                      }
                  }
              }
          }

          tfoot {

              th,
              td {
                  border-top: 1px solid color("blue-grey", lighten-4);
                  font-weight: 300;
                  white-space: nowrap;
              }
          }

          &.stripe,
          &.display {
              tbody {
                  tr{
                      height: auto;
                      .odd {
                          background-color: #F4F5F7;

                          &>.sorting_1 {
                              background-color: transparent;
                          }

                          &.selected {
                              background-color: #acbad4 !important;

                              th {
                                  border-radius: 0;
                              }
                          }
                      }
                  }
              }
          }

          &.display,
          &.order-column.hover {
              tbody {

                  tr.hover,
                  tr:hover {
                      &>.sorting_1 {
                          background-color: transparent;
                      }
                  }
              }
          }
        }

        [type="checkbox"]+span:not(.lever):before,
        [type="checkbox"]:not(.filled-in)+span:not(.lever):after {
            border-radius: 4px !important;
            opacity: 0.5;
        }
      }

      .dataTables_length#page-length-option_length,
      .dataTables_filter#page-length-option_filter {
          display: block;

          label {
              select {
                  display: inline-block;
                  width: auto;
                  height: auto;
              }

              input {
                  height: auto;
                  width: auto;
              }
          }
      }

      .dataTables_length,
      .dataTables_filter {
          display: none;
      }

      .dataTables_info {
          margin-left: 18px;
          color: color('grey', 'darken-2');
      }

      .dataTables_paginate,#page-length-option_paginate {
          margin-bottom: 0.75rem;
          margin-right: 0.35rem;

          .paginate_button {
              padding: 0.25em 0.65em;
              margin-top: 0.25rem;

              &.current,
              &.current:hover {
                  background: $primary-color;
                  border: 1px solid $primary-color;
                  color: $white !important;
                  border-radius: 6px;
                  box-shadow: 0px 0px 8px 0px $primary-color;
              }

              &:hover {
                  background: $primary-color;
                  border: 1px solid $primary-color;
                  color: $white !important;
                  border-radius: 6px;
                  box-shadow: 0px 0px 8px 0px $primary-color;
              }

          }
      }
    }
  }
}