@visns-studio/visns-components 5.14.10 → 5.14.12

package/src/components/styles/GenericReport.module.scss

@@ -3503,3 +3503,331 @@
     border-radius: var(--radius);
     border: 1px solid var(--border-color);
 }
+
+/* Enhanced Pagination Styles */
+.paginationContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 16px 20px;
+    background-color: var(--tertiary-color);
+    border-top: 1px solid var(--border-color);
+    border-radius: 0 0 var(--radius) var(--radius);
+}
+
+.paginationInfo {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.875rem;
+    color: var(--paragraph-color);
+    font-weight: 500;
+    margin: 0;
+    padding: 0;
+    background: none;
+    border: none;
+}
+
+.paginationControls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    flex-wrap: wrap;
+    
+    @media (max-width: 768px) {
+        flex-direction: column;
+        gap: 12px;
+    }
+}
+
+.pageSizeSelector {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.875rem;
+    color: var(--paragraph-color);
+    
+    label {
+        font-weight: 500;
+        color: var(--header-color);
+        margin: 0;
+    }
+    
+    span {
+        font-weight: 400;
+        color: var(--paragraph-color);
+    }
+}
+
+.pageSizeSelect {
+    padding: 6px 8px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    background-color: var(--bg-color);
+    color: var(--header-color);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    
+    &:focus {
+        outline: none;
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
+    }
+    
+    &:hover {
+        border-color: var(--primary-color);
+    }
+}
+
+.pageNavigation {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    @media (max-width: 768px) {
+        width: 100%;
+        justify-content: center;
+    }
+}
+
+.pageNumbers {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    
+    @media (max-width: 480px) {
+        gap: 2px;
+    }
+}
+
+.pageBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    height: 36px;
+    padding: 0 8px;
+    border: 1px solid var(--border-color);
+    background-color: var(--bg-color);
+    color: var(--paragraph-color);
+    font-size: 0.875rem;
+    font-weight: 500;
+    border-radius: var(--radius);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    user-select: none;
+    
+    &:hover:not(.disabled) {
+        background-color: var(--secondary-color);
+        border-color: var(--primary-color);
+        color: var(--header-color);
+        transform: translateY(-1px);
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+    
+    &:active:not(.disabled) {
+        transform: translateY(0);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    }
+    
+    &.active {
+        background-color: var(--primary-color);
+        border-color: var(--primary-color);
+        color: white;
+        font-weight: 600;
+        box-shadow: 0 2px 4px rgba(var(--primary-rgb), 0.3);
+        
+        &:hover {
+            background-color: var(--primary-dark-color);
+            transform: none;
+        }
+    }
+    
+    &.disabled {
+        background-color: var(--tertiary-color);
+        border-color: var(--border-color);
+        color: var(--disabled-color, #9CA3AF);
+        cursor: not-allowed;
+        opacity: 0.6;
+        
+        &:hover {
+            transform: none;
+            box-shadow: none;
+            background-color: var(--tertiary-color);
+            border-color: var(--border-color);
+        }
+    }
+    
+    @media (max-width: 480px) {
+        min-width: 32px;
+        height: 32px;
+        font-size: 0.8rem;
+        padding: 0 6px;
+    }
+}
+
+.ellipsis {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    height: 36px;
+    color: var(--paragraph-color);
+    font-size: 0.875rem;
+    font-weight: 500;
+    user-select: none;
+    
+    @media (max-width: 480px) {
+        min-width: 24px;
+        height: 32px;
+        font-size: 0.8rem;
+    }
+}
+
+/* Pagination animations */
+@keyframes paginationSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.paginationContainer {
+    animation: paginationSlideIn 0.3s ease-out;
+}
+
+/* Loading state for pagination */
+.paginationContainer.loading {
+    opacity: 0.6;
+    pointer-events: none;
+    
+    .pageBtn {
+        cursor: wait;
+    }
+    
+    .pageSizeSelect {
+        cursor: wait;
+    }
+}
+
+/* Enhanced accessibility */
+.pageBtn:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+.pageSizeSelect:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 2px;
+}
+
+/* No Data Message Styles */
+.noDataContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+    padding: 40px 20px;
+}
+
+.noDataMessage {
+    text-align: center;
+    max-width: 500px;
+    padding: 40px;
+    background-color: var(--tertiary-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    box-shadow: var(--box-shadow-small);
+}
+
+.noDataIcon {
+    margin-bottom: 20px;
+    opacity: 0.7;
+    color: var(--paragraph-color);
+    
+    svg {
+        width: 48px;
+        height: 48px;
+    }
+}
+
+.noDataTitle {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--header-color);
+    margin: 0 0 12px 0;
+}
+
+.noDataText {
+    font-size: 1rem;
+    color: var(--paragraph-color);
+    margin: 0 0 24px 0;
+    line-height: 1.5;
+}
+
+.noDataSuggestions {
+    text-align: left;
+    background-color: var(--bg-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius);
+    padding: 20px;
+    margin-top: 20px;
+    
+    p {
+        margin: 0 0 12px 0;
+        font-weight: 600;
+        color: var(--header-color);
+        font-size: 0.9rem;
+    }
+    
+    ul {
+        margin: 0;
+        padding-left: 20px;
+        color: var(--paragraph-color);
+        
+        li {
+            margin-bottom: 8px;
+            font-size: 0.9rem;
+            line-height: 1.4;
+            
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+
+/* Responsive adjustments for no data message */
+@media (max-width: 768px) {
+    .noDataContainer {
+        min-height: 300px;
+        padding: 20px 15px;
+    }
+    
+    .noDataMessage {
+        padding: 30px 20px;
+    }
+    
+    .noDataIcon {
+        margin-bottom: 16px;
+        
+        svg {
+            width: 40px;
+            height: 40px;
+        }
+    }
+    
+    .noDataTitle {
+        font-size: 1.3rem;
+    }
+    
+    .noDataText {
+        font-size: 0.9rem;
+    }
+}