base_ui/assets/common/scss/components/_table.scss

.table-container {
  // width: 100%;
  flex: 1;
  overflow-x: auto;
  // padding: 1em;

  border-radius: 0.5rem;
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
    0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

  .table-responsive {
    //height: 100%;
    // height: calc(100dvh - 13em);
    height: calc(100dvh - 10em);
    overflow-y: auto;

    .table {
      font-size: 0.85rem;
      //font-size: 0.75rem;
      text-align: center;
      margin: 0;
      //height: 100%;
      position: relative;
      border-collapse: collapse;

      & th,
      & td {
        padding: 0.25rem;
      }

      thead {
        background: white;
        position: sticky;
        top: 0;

        // font-size: 0.75rem;
        line-height: 1rem;
        // color: rgb(55, 65, 81);
        // background-color: rgb(249, 250, 251);

        tr {
          &:not(.table-search-form) {
            background-color: #f6f6f6;
            background-color: rgb(249, 250, 251);
          }

          th {
            vertical-align: middle;
            color: #1b2733;
            font-weight: 500;
            line-height: 2.2;
            white-space: nowrap;
          }
        }
      }

      tbody {
        // color: #aaa;
        // color: #6f6f6f;
        color: #000;

        tr {
          &.unactive {
            // background-color: #e9e9e9;
            // background-color: #fff3cd;
            background-color: #d5d5d5;
            filter: grayscale(60%);
            opacity: 0.6;
            // cursor: not-allowed;
            // pointer-events: none;
            // * {
            // cursor: not-allowed;
            // pointer-events: none;
            // }
          }

          &.active,
          &:hover {
            background-color: #d8f8fd;
          }

          th {
            vertical-align: middle;
            line-height: 1.5;
          }

          td {
            vertical-align: middle;
            line-height: 1.5;

            //padding: 0;
            // max-width: 10em;
            // width: auto;
            // white-space: nowrap;
            // text-overflow: ellipsis;
            // overflow: hidden;

            .btn {
              padding: 0 0.2em;

              .tavasi,
              .niafam {
                font-size: 1.2rem;
                margin: auto;
                display: flex;
              }

              //&.edit-btn {
              //i {
              //  color: #bdc7d2;
              //  color: var(--primary);
              //}
              //}

              //&.delete-btn {
              //i {
              //  color: #bdc7d2;
              //  color: var(--danger);
              //
              //}
              //}

              //&.show-detail-btn {
              //  i {
              //    color: #bdc7d2;
              //  }
              //}

              &:focus,
              &:hover {
                filter: brightness(0.8);
              }
            }
            .is-link {
              // color:#00b6e3;
              padding: 0 0.2em;
              // font-size: 1em;

              &:hover {
                color: rgb(59, 130, 246);
              }
            }

            .user-info {
              display: flex;
              align-items: center;

              .user-info-avatar {
                border-radius: 50%;
                overflow: hidden;
                margin-left: 0.5em;

                img {
                  // object-fit: contain;
                  // max-width: 100%;
                  // height: auto;
                }
              }

              .user-info-details {
                .name {
                  margin-bottom: 0;
                  font-size: 16px;
                  text-align: right;
                  color: #1b2733;
                }

                .username {
                  margin-bottom: 0;
                  font-size: 12px;
                  text-align: right;
                }
              }
            }
          }
          .action-column {
            overflow: visible;
            display: flex;
            align-items: center;
            justify-content: center;

            .btn {
              &:hover {
                .tavasi {
                  color: #000;
                }
              }
            }
          }
        }
      }
    }
  }

  //&.has-search {
  //  .table-responsive {
  //    height: calc(100dvh - 14em);
  //  }
  //}

  .table-search-form {
    max-width: 100%;
    width: 35em;
    margin-left: auto;
    margin-top: 1em;
    margin-bottom: 1em;

    .form-group {
      margin-bottom: 0;

      .input-group {
        height: 40px;
        background: #fff;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid #00b6e3;

        .form-control {
          font-weight: 300;
          text-align: right;
          color: #707b87;
          height: 100%;
          border-color: transparent;
          padding-right: 0;
          padding-left: 0;

          border-radius: 0;
          font-size: 14px;

          &::-webkit-input-placeholder {
            /* Chrome/Opera/Safari */
            font-weight: 300;
            font-size: 14px;
            text-align: right;
            color: #92a2b2;
          }

          &::-moz-placeholder {
            /* Firefox 19+ */
            font-weight: 300;
            font-size: 14px;
            text-align: right;
            color: #92a2b2;
          }

          &:-ms-input-placeholder {
            /* IE 10+ */
            font-weight: 300;
            font-size: 14px;
            text-align: right;
            color: #92a2b2;
          }

          &:-moz-placeholder {
            /* Firefox 18- */
            font-weight: 300;
            font-size: 14px;
            text-align: right;
            color: #92a2b2;
          }

          &:focus {
            box-shadow: none;
            outline: 0;
          }
        }

        .input-group-prepend {
          margin-right: auto;
          margin-left: -1px;

          .input-group-text {
            background-color: transparent;
            border-color: transparent;
            border-radius: 0;
            font-size: 14px;
            font-weight: 300;
            color: #707b87;
            transition: all 0.2s;

            svg {
              width: 1em;
              color: var(--falcon-gray-400);
            }
          }
        }

        .input-group-append {
          margin-left: auto;
          margin-right: -1px;

          .input-group-text {
            background-color: transparent;
            border-color: transparent;
            border-radius: 20px 0 0 20px;
            font-size: 14px;
            font-weight: 300;
            color: #707b87;
            transition: all 0.2s;
            visibility: hidden;

            &.show-reset-btn {
              visibility: visible;
            }

            &:hover {
              background-color: #eee;

              i {
                font-weight: bold;
                //color: var(--red);
                transition: all 0.2s;
              }
            }

            &:focus {
              box-shadow: none;
              outline: 0;
            }
          }
        }
      }
    }

    .arrow-down {
      position: relative;
      margin: 1.5em 0;

      .btn {
        padding: 0;
        position: absolute;
        top: -1.5em;
        right: 0;
        transform: rotate(-90deg);
        transition: transform 0.2s;

        &.rotate {
          transition: transform 0.2s;
          transform: rotate(90deg);
        }
      }
    }

    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
      -webkit-appearance: none;
    }
  }
}