create-nexaui-electron/scripts/assets/css/pagination.css

Create Nexa App - Tool untuk membuat aplikasi Nexa Electron

/*pagination*/
 .pagination-controls {
        margin-bottom: 20px;
      }

      .pagination-controls select {
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
      }

      /* Pagination Styling */ 
      .nexa-pagination {
        display: flex;
        justify-content: left;
        align-items: center;
        margin: 20px 0;
        flex-wrap: wrap;
        gap: 5px;
      }

      .nexa-pagination .page-link {
        padding: 8px 12px;
        border: 1px solid #ddd;
        text-decoration: none;
        color: #333;
        border-radius: 4px;
        transition: all 0.3s ease;
        cursor: pointer;
      }

      .nexa-pagination .page-link:hover {
        background-color: #f5f5f5;
      }

      /* Menambahkan style untuk page-link active */
      .nexa-pagination .page-link.active {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
        cursor: default;
      }

      /* Style untuk page-link disabled */
      .nexa-pagination .page-link.disabled {
        color: #999;
        cursor: not-allowed;
        background-color: #f5f5f5;
      }

      .nexa-pagination .current {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
      }

      .nexa-pagination .page-ellipsis {
        padding: 8px 12px;
        color: #666;
      }
     .nx-pagination-info {
        width: 100%;
        text-align: center;
        margin-top: 10px;
        color: #666;
        font-size: 0.9em;
      }


      /* Style untuk pagination */
  .pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
    margin: 20px 0;
    gap: 5px;
  }

  .pagination .page-item {
    list-style: none;
  }

  .pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
  }

  .pagination .page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #dee2e6;
  }

  .pagination .page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
    cursor: pointer;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
  }

  .pagination .page-link:hover {
    z-index: 2;
    color: #0056b3;
    text-decoration: none;
    background-color: #e9ecef;
    border-color: #dee2e6;
  }

  .pagination .page-link:focus {
    z-index: 3;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }

  /* Style untuk mobile */
  @media (max-width: 576px) {
    .pagination {
      flex-wrap: wrap;
      justify-content: center;
    }

    .pagination .page-link {
      padding: 0.4rem 0.6rem;
      font-size: 14px;
    }
  }