cat-documents-ng 1.0.6 → 1.0.8

package/src/lib/document/components/document-list/document-list.component.scss

@@ -1,513 +0,0 @@
-.document-list-wrapper{
-    .p-accordion-header-link {
-        padding: 0.5rem;
-    }
-    .p-sidebar-right{
-        width: 35%;
-    }
-}
-.error-message-wrapper{
-  color: #dc3545;
-}
-.right-sidebar{
-    width: 35%;
-}
-
-.document-title-wrapper{
-    font-size: 20px;
-    font-weight: 700;
-    color: var(--text-color);
-}
-
-.document-input-field{
-    display: flex;
-    flex-direction: column;
-    input{
-        width:100%;
-        height: 46px;
-        padding: 10px 15px 10px 15px;
-        gap: 10px;
-        border-radius: 10px;
-        outline: none;
-        border: 1px solid #4C62921A;
-        font-size: 15px;
-    }
-}
-label{
-    color: #0F1729;
-    font-weight: 600;
-
-}
-.document-list-dropDown{
-    .p-element{
-        padding: 10px 0px 10px 15px;
-    }
-    .p-dropdown{
-        border-radius: 10px !important;
-    }
-}
-
-
-.side-bar-con{
-    display: flex;
-    flex-direction: column;
-}
-
-
-.save-btn-con{
-    width: 100%;
-    border-top: 1px solid #4C629233;
-    background: #4C629214;
-    padding: 13px 40px 13px 40px
-    
-}
-
-.save-btn-wrapper{
-    padding: 10px 4px;
-}
-
-.save-btn{
-    .p-button{
-        height: 45px !important;
-        width: 140px;
-        border-radius: 10px;
-    }
-    
-
-}
-.p-sidebar-footer {
-    padding: 0px;
-}
-
-.file-input-wrapper.p-inputtext:enabled:focus {
-    box-shadow: 0 0 0 0.2rem #a6d5fa !important;
-}
-
-// Clickable document name styles
-.clickable-doc-name {
-    cursor: pointer;
-    transition: all 0.2s ease;
-    padding: 4px 8px;
-    border-radius: 4px;
-    
-    &:hover {
-        background-color: rgba(76, 98, 146, 0.1);
-        color: var(--primary-color, #4C6292);
-    }
-    
-    &:active {
-        background-color: rgba(76, 98, 146, 0.2);
-        transform: scale(0.98);
-    }
-    
-    .edit-icon {
-        font-size: 0.8em;
-        margin-left: 8px;
-        opacity: 0.6;
-        transition: opacity 0.2s ease;
-    }
-    
-    &:hover .edit-icon {
-        opacity: 1;
-    }
-}
-
-// Document name display styles (alias name + document name)
-.document-name-display {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 4px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    padding: 4px 8px;
-    border-radius: 4px;
-    width: 100%;
-    
-    &:hover {
-        background-color: rgba(76, 98, 146, 0.1);
-        
-        .alias-name {
-            color: var(--primary-color, #4C6292);
-        }
-    }
-    
-    &:active {
-        background-color: rgba(76, 98, 146, 0.2);
-        transform: scale(0.98);
-    }
-    
-    .alias-name {
-        font-size: 1.5rem;
-        font-weight: 700;
-        color: var(--text-color, #2c3e50);
-        line-height: 1.2;
-        text-align: left;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 100%;
-        max-width: none;
-        transition: color 0.2s ease;
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 8px;
-        
-            .edit-icon-small {
-        font-size: 0.7em;
-        opacity: 0;
-        visibility: hidden;
-        transition: opacity 0.2s ease, visibility 0.2s ease;
-        margin-left: 6px;
-    }
-    }
-    
-    &:hover .edit-icon-small {
-        opacity: 1;
-        visibility: visible;
-    }
-    
-    .document-name {
-        font-size: 0.875rem;
-        color: var(--text-color-secondary, #6c757d);
-        font-weight: 400;
-        line-height: 1.2;
-        text-align: left;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 100%;
-        max-width: none;
-        opacity: 0.8;
-    }
-}
-
-// Document name input field styles
-.file-input-wrapper {
-    transition: all 0.2s ease;
-    min-width: 300px !important;
-    width: auto !important;
-    max-width: 80vw !important;
-    
-    &:focus {
-        border-color: var(--primary-color, #4C6292) !important;
-        box-shadow: 0 0 0 0.2rem rgba(76, 98, 146, 0.25) !important;
-        outline: none !important;
-    }
-}
-
-// Specific styles for document name input in header
-.document-name-input {
-    min-width: 400px !important;
-    width: auto !important;
-    max-width: 70vw !important;
-    padding: 8px 12px !important;
-    font-size: 1.1rem !important;
-    font-weight: 500 !important;
-    border: 2px solid var(--primary-color, #4C6292) !important;
-    border-radius: 6px !important;
-    background-color: white !important;
-    
-    &:focus {
-        outline: none !important;
-        border-color: var(--primary-color, #4C6292) !important;
-        box-shadow: 0 0 0 0.2rem rgba(76, 98, 146, 0.25) !important;
-    }
-}
-
-// Container for edit input and subline
-.document-edit-container {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 6px;
-    width: 100%;
-    max-width: 70vw;
-}
-
-// Subline under input showing original file name
-.document-name-subline {
-    font-size: 0.85rem;
-    color: var(--text-color-secondary, #6c757d);
-    line-height: 1.2;
-    padding-left: 4px;
-    opacity: 0.8;
-}
-
-// Document viewer dialog styles - ensure proper positioning
-.document-viewer {
-  position: relative;
-  z-index: 1;
-  
-  // Ensure dialogs appear above everything
-  ::ng-deep .p-dialog {
-    z-index: 9999 !important;
-  }
-  
-  ::ng-deep .p-dialog-mask {
-    z-index: 9998 !important;
-  }
-  
-  // Ensure dialog takes full screen properly
-  ::ng-deep .p-dialog {
-    width: 100vw !important;
-    height: 100vh !important;
-    max-width: none !important;
-    max-height: none !important;
-    margin: 0 !important;
-    top: 0 !important;
-    left: 0 !important;
-    transform: none !important;
-  }
-  
-  ::ng-deep .p-dialog-content {
-    height: calc(100vh - 60px) !important; // Account for header
-    max-height: none !important;
-  }
-}
-
-// Document categories styles
-.document-categories-container {
-  padding: 1rem;
-  min-height: auto; // Changed from 100vh to auto for flexible layout
-
-  .category {
-    background: white;
-    border-radius: 8px;
-    margin-bottom: 2rem;
-    overflow: hidden;
-    transition: all 0.3s ease;
-
-
-    .category-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      gap: 1rem;
-      padding-top: 0.6rem;
-      padding-bottom: 1rem;
-
-      .category-title {
-        flex: 1;
-        min-width: 0;
-        
-        h3 {
-          margin: 0 0 0.5rem 0;
-          font-size: 1.25rem;
-          font-weight: 600;
-          color: #2c3e50;
-        }
-
-        .category-description {
-          margin: 0;
-          color: #6c757d;
-          font-size: 0.875rem;
-          line-height: 1.4;
-        }
-      }
-
-      .completion-status {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        min-width: fit-content;
-        
-        .status-badge {
-          background-color: #fbbf24;
-          color: #92400e;
-          padding: 0.375rem 0.75rem;
-          border-radius: 6px;
-          font-size: 0.75rem;
-          font-weight: 500;
-          display: inline-block;
-        }
-        
-        .completion-badge {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          
-          .p-badge {
-            font-size: 0.75rem;
-            font-weight: 500;
-            padding: 0.375rem 0.75rem;
-            border-radius: 6px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            min-width: fit-content;
-            white-space: nowrap;
-            
-            &.p-badge-success {
-              background-color: #d1fae5;
-              color: #065f46;
-              font-family: inherit;
-    font-size: 12px;
-    padding: 15px;
-    font-weight: 400;
-  }
-  
-            &.p-badge-info {
-              background-color: #E5E7EB;
-              color: black;
-              font-family: inherit;
-              font-size: 12px;
-              font-weight: 400;
-  padding: 15px;
-  font-style: inherit;
-}
-            
-            &.p-badge-warning {
-              background-color: #FEF3C7;
-    color: #D97706;
-    font-family: inherit;
-    padding: 15px;
-    font-size: 12px;
-    font-weight: 400;
-    font-style: inherit;
-            }
-            
-            &.p-badge-danger {
-              background-color: #FEE2E2;
-    color: #DC2626;
-    font-family: inherit;
-    font-size: 12px;
-    padding: 15px;
-    font-weight: 400;
-    font-style: inherit;
-            }
-          }
-        }
-      }
-    }
-
-    .table-container {
-      padding: 0;
-    }
-  }
-}
-
-// Highlight pulse animation
-@keyframes highlightPulse {
-  0% {
-    transform: scale(1.02);
-    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
-  }
-  50% {
-    transform: scale(1.03);
-    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5);
-  }
-  100% {
-    transform: scale(1.02);
-    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
-  }
-}
-
-// Document sections styles
-.document-sections-container {
-  padding: 1rem;
-  background-color: #f8f9fa;
-  min-height: 100vh;
-
-  .section {
-    background: white;
-    border-radius: 8px;
-    margin-bottom: 2rem;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    overflow: hidden;
-
-    .section-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      padding: 1.5rem 1.5rem 1rem 1.5rem;
-      border-bottom: 1px solid #e9ecef;
-
-      .section-title {
-        h3 {
-          margin: 0 0 0.5rem 0;
-          font-size: 1.25rem;
-          font-weight: 600;
-          color: #2c3e50;
-        }
-
-        .section-description {
-          margin: 0;
-          color: #6c757d;
-          font-size: 0.875rem;
-          line-height: 1.4;
-        }
-      }
-
-      .completion-status {
-        .status-badge {
-          background-color: #fbbf24;
-          color: #92400e;
-          padding: 0.375rem 0.75rem;
-          border-radius: 6px;
-          font-size: 0.75rem;
-          font-weight: 500;
-          display: inline-block;
-        }
-        
-        .completion-badge {
-          .p-badge {
-            font-size: 0.75rem;
-            font-weight: 500;
-            padding: 0.375rem 0.75rem;
-            border-radius: 6px;
-            
-            &.p-badge-success {
-              background-color: #10b981;
-              color: white;
-            }
-            
-            &.p-badge-info {
-              background-color: #3b82f6;
-              color: white;
-            }
-            
-            &.p-badge-warning {
-              background-color: #f59e0b;
-              color: white;
-            }
-            
-            &.p-badge-danger {
-              background-color: #ef4444;
-              color: white;
-            }
-          }
-        }
-      }
-    }
-
-    .table-container {
-      padding: 0;
-    }
-  }
-}
-
-// Responsive design
-@media (max-width: 768px) {
-  .document-categories-container,
-  .document-sections-container {
-    padding: 0.5rem;
-
-    .category,
-    .section {
-      .category-header,
-      .section-header {
-        flex-direction: column;
-        gap: 1rem;
-        align-items: stretch;
-
-        .completion-status {
-          align-self: center;
-          width: 100%;
-          justify-content: center;
-        }
-      }
-    }
-  }
-}