FileMaster

Edit File: _tables.scss

.os-table-w {
  padding: 0px 10px;
  background-color: #fff;
  .in-table-time-left {
    display: inline-block;
    margin: 0px 5px;
    font-size: 12px;
    .time-left {
      padding: 2px 5px;
      background-color: #fff;
      border: 1px solid #aaa;
      color: #111;
      display: inline-block;
      border-radius: 5px;
      font-weight: $body-font-weight-bold;
      &.left-hours {
        background-color: #fff7e8;
        border-color: #d1b49b;
        color: #000;
      }
      &.left-minutes {
        background-color: #ffeeb9;
        border-color: #e8b922;
        color: #000;
      }
      &.time-past {
        color: #555;
        border-color: transparent;
        background-color: #eee;
      }
      &.is-now {
        border-color: #33cb8e;
        color: #0b7b57;
      }
      &.is-past {
        background-color: #eee;
        color: #777;
        border-color: #eee;
      }
    }
  }
}
.os-table {
  width: 100%;
  border-collapse: collapse;
  position: relative;
  border-radius: 6px;
  &.os-loading {
    &:before {
      @include loading-circle($brand-primary, 16px);
      top: -8px;
      left: -8px;
    }
  }
  
  &.os-table-align-top {
    td {
      vertical-align: top;
    }
  }

.os-dot {
    width: 2px;
    height: 2px;
    margin: 0px 2px;
    vertical-align: middle;
    background-color: $body-color;
    border-radius: 2px;
    display: inline-block;
  }

thead, tfoot {
    tr {
      th {
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: floor($font-size-base * 0.7);
        padding: 5px 10px;
        overflow: hidden;
        font-weight: $body-font-weight-black;
        border-left: 1px solid $table-heading-border-color;
        // background-color: #f4f5f7;
        // border: 1px solid #e3e7ef;
      }
    }
  }
  thead {
    tr {
      th {
        border-bottom: 1px solid $table-heading-border-color;
        background-color: #fff;
      }
    }
  }
  tfoot {
    tr {
      th {
        border-top: 1px solid $table-heading-border-color;
        background-color: #fff;
      }
    }
  }
  tbody {
    tr {
      td {
        padding: 5px 10px;
        border-top: 1px solid #f0f2f7;
        overflow: hidden;
        background-color: #fff;

&.text-bigger {
          font-weight: $body-font-weight-bold;
          font-size: $font-size-base * 1.3;
          padding: 4px 10px;
        }

.latepoint-btn + .latepoint-btn {
          margin-left: 5px;
        }
        .avatar-w {
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: block;
            margin: 0px auto;
          }
        }
      }
      &:nth-child(even) td{
        // background-color: #f4f4f5;
      }
      &:first-child {
        td {
          padding-top: 15px;
        }
      }
      &:last-child {
        td {
          padding-bottom: 15px;
          border-bottom: 1px solid $brand-primary;
        }
      }
    }
  }

.in-table-link {
    padding: 3px 6px;
    background-color: #fff;
    border: 1px solid $brand-primary;
    box-shadow: 0px 2px 0px rgba(0,0,0,0.1);
    border-radius: $border-radius;
    display: inline-flex;
    color: $brand-primary;
    text-decoration: none;
    font-size: floor($font-size-base * 0.8);
    line-height: 1;
    align-items: center;
    span:first-child {
      font-weight: $body-font-weight-black;
    }
    span + span{
      border-left: 1px solid $brand-primary;
      padding-left: 5px;
      margin-left: 5px;
      margin-right: 5px;
    }
  }

}
.os-table-w.os-table-compact {
  padding: 0px;
  .os-table {
    thead {
      tr {
        th {
        }
      }
    }
    tbody {
      tr {
        position: relative;
        border-bottom: 1px solid #ddd;
        &:hover {
          border-bottom-color: $table-row-highlight-border;
          &:after {
          }
          td {
            background-color: $table-row-highlight-bg;
            border-bottom-color: $table-row-highlight-border;
          }

.os-floating-button {
            display: flex;
          }
        }
      }
      tr:last-child td {
        border-bottom: 1px solid $table-heading-border-color;
      }
      td {
        a.os-with-avatar {
          display: inline-flex;
          border-bottom: none!important;
          span.os-name {
            border-bottom: 1px solid lighten($link-color, 30%);
          }
          .latepoint-icon-external-link {
            margin-left: 4px;
            font-size: 14px;
            color: transparent;
          }
          &:hover {
            .latepoint-icon-external-link {
              color: $link-color;
            }
            span.os-name {
              border-bottom-color: $link-color;
            }
          }
        }
      }
    }
    tr {
      border: none;
      th {
        padding: 10px;
        text-align: center;
        white-space: nowrap;
        background-color: #fff;
        .os-date-range-picker {
          background-color: #fff;
          border: 1px solid #a5a7b7;
          border-radius: $border-radius-sm;
          padding: 4px 4px 4px 5px;
          text-transform: none;
          letter-spacing: 0px;
          text-transform: none;
          font-size: floor($font-size-base * 0.9);
          cursor: pointer;
          text-align: left;
          display: flex;
          gap: 4px;
          align-items: center;
          line-height: 1.2;
          i {
            margin-left: auto;
            font-size: 11px;
          }
          &:hover {
            border-color: $brand-primary;
          }
        }
        .latepoint-btn {
          padding: 4px 5px;
          text-transform: none;
          letter-spacing: 0px;
          .latepoint-icon {
            font-size: 13px;
          }
          span {
            font-size: floor($font-size-base * 0.9);
          }
        }
        .os-form-group {
          margin-bottom: 0px;
          position: relative;
          label {
            display: none!important;
          }
          .os-form-control {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: $border-radius-sm;
            padding: 1px 5px!important;
            font-size: floor($font-size-base * 0.9);
            height: 26px;
            min-height: 26px;
          }
          &.no-label {
            .os-form-control {
              padding: 1px 5px !important;
            }
          }
          &.os-loading {
            &:after {
              @include loading-circle($brand-primary, 10px);
              top: -3px;
              left: -3px;
            }
          }
          input[type="text"].os-form-control{
            width: auto;
            min-width: 100%;
          }
          select.os-form-control{
            min-width: 100%;
            height: auto;
            min-height: auto;
            line-height: 1.2;
            box-shadow: none;
            padding: 4px!important;
            padding-right: 18px!important;
            width: auto;
          }
        }
      }
      &.os-clickable-row {
        cursor: pointer;
        &.os-loading {
          .os-floating-button {
            color: transparent;
            &:before {
              @include loading-circle(#111, 14px);
            }
          }
        }
      }
      td {
        white-space: nowrap;
        font-size: floor($font-size-base * 0.9);
        border: none;
        border: 1px solid $border-color-main;
        padding: 10px;
        .os-search-query-match {
          background-color: rgba(255, 231, 18, 0.62);
        }
        a:not(.in-table-link) {
          color: $link-color;
          border-bottom: 1px dotted $link-color;
          text-decoration: none;

.latepoint-icon {
            margin-right: 4px;
            &:last-child {
              margin-right: 0;
            }
          }

&:not(.os-with-avatar):hover {
            color: darken($link-color, 15%);
            border-bottom: 1px solid darken($link-color, 15%);
          }
        }
        &.has-floating-button {
        }
        .os-floating-button {
          display: none;
          align-items: center;
          position: absolute;
          top: 4px;
          bottom: 4px;
          left: 0px;
          padding: 3px 10px;
          color: $brand-primary;
          background-color: $table-row-highlight-bg;
          z-index: 2;
          font-size: 14px;
          vertical-align: middle;
          cursor: pointer;
          &:hover {
            color: $brand-primary;
          }
        }
        .os-with-service-color {
          font-weight: $body-font-weight-bold;
        }
        &.os-clickable-popup-trigger {
          padding: 0px;
          overflow: visible;
          position: relative;
          &.os-showing-popup {
            .os-with-avatar {
              position: relative;
              z-index: 1;
              .cell-link-content {
                color: $body-color;
                background-color: #fff;
              }
              &:before {
                border-radius: 6px;
                content: "";
                position: absolute;
                top: -3px;
                left: -3px;
                bottom: -3px;
                right: -3px;
                border: 2px solid lighten($brand-primary, 15%);
                z-index: 1;
                background-color: #fff;
              }
            }
          }
          .os-with-avatar {
            color: $body-color;
            transition: none;
            padding: 8px;
            position: relative;
            border: none;
            &:focus {
              outline: none;
              box-shadow: none;
            }
            .cell-link-content {
              z-index: 2;
              display: flex;
              align-items: center;
              padding-right: 10px;
            }
            &:hover {
              position: relative;
              z-index: 1;
              .cell-link-content {
                color: $body-color;
                background-color: #fff;
              }
              &:before {
                border-radius: 6px;
                content: "";
                position: absolute;
                top: -3px;
                left: -3px;
                bottom: -3px;
                right: -3px;
                box-shadow: 0px 0px 0px 3px rgba($brand-primary,0.15);
                border: 2px solid $brand-primary;
                z-index: 1;
                background-color: #fff;
              }
              &:after {
                @include latepointfont_admin("\e94a");
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 0px;
                font-size: 16px;
                color: $brand-primary;
                z-index: 3;
              }
            }
          }
        }
        .os-with-service-color {
          display: flex;
          border: none;
          align-items: center;
        }
        .os-with-avatar {
          display: flex;
          border: none;
          align-items: center;
          .cell-link-content {
            padding-right: 5px;
          }
          span {
            display: flex;
            align-items: center;
          }
          .os-clickable-popup-trigger {
            margin-left: auto;
            padding: 1px 2px;
            background: #ebeef2;
            border-radius: 6px;
            &:hover {
              color: #111;
              background-color: #fff;
              box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
            }
          }
          span.os-name {
            line-height: 1.2;
            font-weight: $body-font-weight-bold;
          }
          span.os-avatar {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            background-size: cover;
            background-position: center center;
            border-radius: 22px;
          }
        }
        &:last-child {
          border-right: 1px solid #ddd;
        }
        &:first-child {
          border-left: 1px solid #ddd;
        }
        .latepoint-btn {
          padding: 0px;
          i {
            font-size: 14px;
          }
          span {
            border-bottom: 1px dotted $link-color;
          }
        }
        &.os-column-faded {
          color: $color-faded;
          font-weight: $body-font-weight-bold;
        }
        .os-column-status {
          padding: 3px 5px;
          border-radius: 5px;
          line-height: 1;
          display: inline-block;
          border: 1px solid #d5d9de;
          box-shadow: 0px 1px 2px #f9f9f9;
          border-bottom-color: #c2c7cd;
          position: relative;
          font-size: floor($font-size-base * 0.8);
          font-weight: $body-font-weight-bold;
          &.os-column-status-active {
            background-color: #c3ffd1;
            border-color: #1ec07f;
            color: #04724e;
          }
          &.os-column-status-disabled {
            background-color: #ffd3d3;
            border-color: #dc4646;
            color: #7e1010;
            box-shadow: 0px 1px 2px #ffdbdb;
          }
          &.os-column-status-approved {
            background-color: #e5fff3;
            border-color: #33cb8e;
            color: #0b7b57;
            padding-left: 18px;
            &:before {
              @include latepointfont_admin("\e910");
              position: absolute;
              left: 4px;
              top: 50%;
              transform: translateY(-50%);
              font-size: 10px;
            }
          }
          &.os-column-status-completed, &.os-column-status-fully_paid {
            background-color: #c3ffd1;
            border-color: #1ec07f;
            color: #04724e;
            padding-left: 18px;
            &:before {
              @include latepointfont_admin("\e910");
              position: absolute;
              left: 4px;
              top: 50%;
              transform: translateY(-50%);
              font-size: 10px;
            }
          }
          &.os-column-status-cancelled {
            background-color: #ffd3d3;
            border-color: #dc4646;
            color: #7e1010;
            box-shadow: 0px 1px 2px #ffdbdb;
            padding-left: 18px;
            &:before {
              @include latepointfont_admin("\e94b");
              position: absolute;
              left: 4px;
              top: 50%;
              transform: translateY(-50%);
              font-size: 10px;
            }
          }
          &.os-column-status-error {
            background-color: #eee;
            border-color: #1f1f1f;
            color: #212121;
            box-shadow: 0px 1px 2px #eee;
            padding-left: 18px;
            &:before {
              @include latepointfont_admin("\e948");
              position: absolute;
              left: 4px;
              top: 50%;
              transform: translateY(-50%);
              font-size: 10px;
            }
          }
          &.os-column-status-pending, &.os-column-status-processing, &.os-column-status-scheduled  {
            background-color: #fff0c0;
            border-color: #cea92d;
            color: #8c5208;
            box-shadow: 0px 1px 2px #fff5e9;
            padding-left: 18px;
            &:before {
              @include latepointfont_admin("\e935");
              position: absolute;
              left: 4px;
              top: 50%;
              transform: translateY(-50%);
              font-size: 10px;
            }
          }
          &.os-column-status-scheduled {
            &:before {
              content: "\e909";
            }
          }
          &.os-column-status-payment_pending, &.os-column-status-partially_paid {
            background-color: #eaecff;
            border-color: #454df1;
            color: #4441ad;
            box-shadow: 0px 1px 2px #e9f7ff;
            padding-left: 20px;
            &:before {
              @include latepointfont_admin("\e916");
              position: absolute;
              left: 4px;
              top: 50%;
              transform: translateY(-50%);
              font-size: 11px;
            }
          }
        }
        .os-column-service-color {
          display: inline-block;
          padding: 4px;
          margin-right: 5px;
          border-radius: $border-radius-sm;
        }
      }
    }
  }
}

.table-with-pagination-w {
  .os-pagination-w {
    position: relative;
    &:first-child {
      &:before {
        content: "";
        z-index: 1;
        width: 40%;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        background-image: radial-gradient(#e0e0e0 1px, transparent 0);
        background-size: 23px 23px;
      }
    }
  }
  .table-actions {
    z-index: 2;
    position: relative;
  }
  &.has-scrollable-table {
    margin-right: -$content-padding;
    @include white-box();
    border-radius: $border-radius 0 0 $border-radius;
    .os-scrollable-table-w {
    }
    &:not(.no-overflow){
      border-right: none;
    }
    &.no-overflow {
      margin-right: 0;
      border-radius: $border-radius;
    }
  }
}

.os-pagination-w {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  padding: 30px;

.mobile-table-actions-trigger {
    display: none;
  }
  .table-actions {
    margin-left: auto;
    align-self: flex-end;
    .latepoint-btn {
      margin-left: 10px;
    }
  }
  &:first-child {
    margin-top: 0px;
    //background-image: linear-gradient(0deg, rgba(0,0,0,0.01), transparent);
  }
  .table-heading {
    margin-bottom: 5px;
    font-size: floor($headings-font-size * 1.1);
  }
  .pagination-page-select-w {
    position: relative;
    &.os-loading {
      &:after {
        @include loading-circle($brand-primary, 10px);
        top: 50%;
        left: -20px;
        transform: translateY(-50%);
      }
    }
  }
  .pagination-info {
    color: $body-color-light;
    font-weight: $body-font-weight-bold;
    font-size: floor($font-size-base);
    min-width: 300px;
  }
  ul {
    padding: 10px 0px;
    margin: 0px;
    margin-left: auto;
    list-style: none;
    text-align: right;
    li {
      display: inline-block;
      margin-left: 10px;
      margin-bottom: 15px;
      span {
        padding: 3px 5px;
        background-color: #e9eef9;
        color: #AFB8D6;
        border-radius: $border-radius-xs;
      }
      a {
        box-shadow: 0 1px 3px 0 rgba(95, 129, 196, 0.35), 0 10px 22px 0 rgba(119, 145, 207, 0.11);
        padding: 3px 5px;
        color: $body-color;
        text-decoration: none;
        border-radius: $border-radius-xs;
        &:hover {
          box-shadow: 0 0px 0px 2px $brand-primary;
          color: $brand-primary;
        }
      }
    }
  }
}

.os-table-w.color-scheme-dark {
  background-color: #161c2f;
  color: #bdc1d6;
  box-shadow: none;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.4);

a {
    color: #9697ff;
  }

.os-table tbody tr:nth-child(even) td {
    background-color: #101421;
  }

.os-table tbody tr {
    &:hover td{
      background-color: #041258;
    }
  }
  .os-table tbody tr td {
    background-color: #161c2f;
    border-top-color: #2d3754;
  }

.os-table tbody tr:last-child td {
    border-top-color: #4f4b8e;
  }

.os-table thead tr th {
    border-bottom-color: #4f4b8e;
  }
}

.latepoint-customer-google {
  font-size: 16px;
  display: inline-block;
  color: #ea4e34;
  i + & {
    margin-left: 3px;
  }
}
.latepoint-customer-facebook {
  color: #4279f9;
  font-size: 16px;
  display: inline-block;
  i + & {
    margin-left: 3px;
  }
}

.os-sortable-column {
  position: relative;
  cursor: pointer;
  &:hover {
    background-color: #fff;
    color: #000;
  }
  &:before {
    content: "";
    width: 1px;
    height: 1px;
    border: 3px solid transparent;
    border-bottom-width: 5px;
    border-bottom-color: #ccc;
    position: absolute;
    top: 4px;
    right: 4px;
  }
  &:after {
    content: "";
    width: 1px;
    height: 1px;
    border: 3px solid transparent;
    border-top-width: 5px;
    border-top-color: #ccc;
    position: absolute;
    bottom: 4px;
    right: 4px;
  }
  &.ordered-asc {
    &:before {
      border-bottom-color: #111;
    }
  }
  &.ordered-desc {
    &:after {
      border-top-color: #111;
    }
  }
}

.os-scrollable-table-w {
  position: relative;
  overflow: auto;
  background-color: #fff;
  border-top: 1px solid $border-color-main;
  border-bottom: 1px solid $border-color-main;
  border-radius: 0px;
  .os-table-w.os-table-compact .os-table tr td:last-child,
  .os-table-w.os-table-compact .os-table tr th:last-child {
    border-right: none;
  }
  .os-table-w.os-table-compact .os-table tr td:nth-child(2),
  .os-table-w.os-table-compact .os-table tr th:nth-child(2) {
    border-left: none;
  }
  .os-table-w.os-table-compact .os-table tr td:first-child,
  .os-table-w.os-table-compact .os-table tr th:first-child {
    border-left: none;
    border-right: none;
    box-shadow: inset -1px 0px 0px 0px $border-color-main;
  }
  .os-table-w.os-table-compact .os-table tr td:first-child {
    box-shadow: inset -1px 0px 0px 0px $border-color-main;
  }
}
.os-table.os-scrollable-table {
  white-space: nowrap;
  thead th:first-child,
  tfoot th:first-child,
  tbody td:first-child {
    //position: sticky;
    //left: 0;
    //z-index: 9;
  }
}

Back