@konfuzio/document-validation-ui 0.1.59 → 0.2.0-dev.2

package/src/assets/scss/document_dashboard.scss

@@ -1,4 +1,4 @@
-@import "./imports.scss";
+@use "variables.scss";
 
 .dashboard {
   flex: 1;
@@ -23,6 +23,11 @@
       background-size: 9px 9px;
     }
 
+    .document-sidebar {
+      overflow-y: auto;
+      background-color: variables.$background;
+    }
+
     @media print {
       .dashboard-document {
         position: static;

package/src/assets/scss/document_edit.scss

@@ -1,8 +1,8 @@
-@import "./imports.scss";
+@use "variables.scss";
 
 #document-edit {
   display: flex;
-  background-color: $light-grey-background;
+  background-color: variables.$light-grey-background;
   position: relative;
   display: flex;
   height: 100%;
@@ -10,21 +10,21 @@
   .pages-section {
     width: 100%;
     overflow-y: scroll;
-    border-right: $component-border;
-    border-left: $component-border;
+    border-right: variables.$component-border;
+    border-left: variables.$component-border;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 
     .grid-header {
       height: 60px;
-      background-color: $background;
-      border-bottom: $component-border;
+      background-color: variables.$background;
+      border-bottom: variables.$component-border;
       display: flex;
       align-items: center;
 
       .header-title {
-        color: $text-color;
+        color: variables.$text-color;
         font-weight: 600;
         font-size: 18px;
         line-height: 18px;
@@ -57,7 +57,7 @@
 
         .page-number {
           margin-top: 8px;
-          color: $text-lighter;
+          color: variables.$text-lighter;
           font-size: 12px;
           line-height: 12px;
           font-weight: 400;
@@ -109,8 +109,7 @@
 
         &:last-child {
           .splitting-lines {
-            visibility: hidden;
-            pointer-events: none;
+            display: none;
           }
           .page-number {
             padding-right: 0px;
@@ -138,8 +137,8 @@
         align-items: center;
         justify-content: center;
         gap: 3px;
-        background-color: $text-color;
-        color: $white;
+        background-color: variables.$text-color;
+        color: variables.$white;
         font-weight: 400;
         font-size: 14px;
         border-radius: 52px;
@@ -152,7 +151,7 @@
     width: 45%;
     max-width: 300px;
     min-width: 270px;
-    background-color: $background;
+    background-color: variables.$background;
 
     .edit-sidebar {
       display: flex;
@@ -166,7 +165,7 @@
         width: 85%;
         display: flex;
         flex-direction: column;
-        color: $grey-dark;
+        color: variables.$grey-dark;
 
         .pages-selected {
           font-weight: 400;
@@ -174,7 +173,7 @@
           margin-bottom: 15px;
 
           &.disabled {
-            color: $grey;
+            color: variables.$grey;
           }
         }
 
@@ -182,7 +181,7 @@
           display: flex;
           flex-direction: column;
           gap: 8px;
-          border-bottom: 1px solid $grey-detail;
+          border-bottom: 1px solid variables.$grey-detail;
 
           .sidebar-buttons {
             .edit-mode-btn {
@@ -231,7 +230,7 @@
             .switch-text {
               font-size: 14px;
               padding-right: 10px;
-              color: $grey-dark;
+              color: variables.$grey-dark;
               font-weight: 500;
             }
           }
@@ -242,7 +241,7 @@
             font-weight: 700;
             font-size: 11px;
             padding: 5px;
-            color: $text-color;
+            color: variables.$text-color;
           }
         }
       }
@@ -262,7 +261,7 @@
   }
 
   &.rename-and-categorize-component {
-    background-color: $background;
+    background-color: variables.$background;
     min-width: 600px;
 
     .rename-and-categorize-section {
@@ -292,7 +291,7 @@
         }
 
         .back-text {
-          color: $grey;
+          color: variables.$grey;
           font-weight: 400;
           font-size: 14px;
           line-height: 20px;
@@ -300,7 +299,7 @@
       }
 
       .rename-and-categorize-title {
-        color: $text-color;
+        color: variables.$text-color;
         font-size: 16px;
         font-weight: 600;
       }
@@ -333,14 +332,15 @@
                   justify-content: center;
 
                   .page-thumbnail {
-                    border: $component-border;
+                    border: variables.$component-border;
                     border-radius: 2px;
                   }
 
                   &.page-stack {
                     .page-thumbnail {
-                      box-shadow: 2px 2px $white, 3px 3px $detail,
-                        5px 5px $white, 6px 6px $detail;
+                      box-shadow: 2px 2px variables.$white,
+                        3px 3px variables.$detail, 5px 5px variables.$white,
+                        6px 6px variables.$detail;
                     }
                   }
 
@@ -370,7 +370,7 @@
                   border-right: 0;
 
                   &:hover {
-                    border-color: $grey-outline;
+                    border-color: variables.$grey-outline;
                   }
                 }
               }
@@ -383,9 +383,9 @@
                 max-width: 100%;
                 padding: 12px;
                 border-radius: 4px 0 0 4px;
-                border: 1px solid $grey-outline;
+                border: 1px solid variables.$grey-outline;
                 border-right: 0;
-                background-color: $white;
+                background-color: variables.$white;
                 cursor: text;
               }
 
@@ -395,9 +395,9 @@
                 padding: 13px;
                 height: 40px;
                 border-radius: 0 4px 4px 0;
-                border: 1px solid $grey-outline;
-                background-color: $white;
-                color: $grey-blue;
+                border: 1px solid variables.$grey-outline;
+                background-color: variables.$white;
+                color: variables.$grey-blue;
               }
             }
 

package/src/assets/scss/document_error.scss

@@ -1,4 +1,4 @@
-@import "./imports.scss";
+@use "variables.scss";
 
 .document-error-modal {
   text-align: left;
@@ -14,7 +14,7 @@
         }
 
         .modal-card-body {
-          background: $white;
+          background: variables.$white;
           border-radius: 12px 12px 0 0 !important;
 
           .header {
@@ -25,14 +25,14 @@
               width: 48px;
               height: 48px;
               border-radius: 50%;
-              background: $low-opacity-red;
+              background: variables.$low-opacity-red;
               display: flex;
               align-items: center;
               justify-content: center;
             }
 
             .close-btn {
-              color: $grey;
+              color: variables.$grey;
 
               &:hover {
                 cursor: pointer;
@@ -42,7 +42,7 @@
 
           .content {
             padding-top: 15px;
-            color: $text-color !important;
+            color: variables.$text-color !important;
 
             h3 {
               font-weight: 500 !important;
@@ -63,7 +63,7 @@
           display: flex;
           justify-content: center;
           border: none;
-          background: $white;
+          background: variables.$white;
           border-radius: 0 0 12px 12px;
           padding-top: 0 !important;
 

package/src/assets/scss/document_name.scss

@@ -1,4 +1,4 @@
-@import "./imports.scss";
+@use "variables.scss";
 
 .document-name-component {
   display: flex;
@@ -11,7 +11,7 @@
   .document-icon {
     display: flex;
     align-items: center;
-    border: 1px solid $grey-detail;
+    border: 1px solid variables.$grey-detail;
     border-radius: 1px;
   }
 
@@ -28,12 +28,12 @@
       white-space: nowrap;
       border-radius: 8px;
       padding: 6px 14px 6px 14px;
-      outline: 1px solid $grey-outline;
+      outline: 1px solid variables.$grey-outline;
     }
   }
 
   .btn {
-    color: $primary;
+    color: variables.$primary;
     font-weight: 500;
   }
 
@@ -45,7 +45,7 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    color: $grey;
+    color: variables.$grey;
 
     .notification {
       background-color: transparent;
@@ -53,7 +53,7 @@
     }
 
     .spinner {
-      color: $grey;
+      color: variables.$grey;
     }
 
     .cloud-icon {

package/src/assets/scss/document_page.scss

@@ -1,4 +1,4 @@
-@import "./imports.scss";
+@use "variables.scss";
 
 .pdf-page-container {
   position: relative;
@@ -13,8 +13,8 @@
   .annotation-label {
     position: absolute;
     z-index: 999;
-    background-color: $text-color;
-    color: $white;
+    background-color: variables.$text-color;
+    color: variables.$white;
     font-size: 12px;
     padding: 4px;
     word-break: break-all;

package/src/assets/scss/document_search_bar.scss

@@ -1,4 +1,4 @@
-@import "./imports.scss";
+@use "variables.scss";
 #document-search {
   position: absolute;
   right: 8px;
@@ -7,8 +7,8 @@
   z-index: 95;
 
   .search-container {
-    background-color: $searchbar;
-    color: $white;
+    background-color: variables.$searchbar;
+    color: variables.$white;
     height: 40px;
     padding: 8px 4px;
     border-radius: 8px;
@@ -26,7 +26,7 @@
       }
 
       &:hover {
-        background: $low-opacity-white;
+        background: variables.$low-opacity-white;
         border-radius: 4px;
         color: inherit;
       }
@@ -46,7 +46,7 @@
     }
 
     .search-no-results {
-      color: $text-lighter;
+      color: variables.$text-lighter;
       font-size: 12px;
     }
 
@@ -58,14 +58,14 @@
       .search-counters {
         font-size: 12px;
         margin-right: 6px;
-        color: $text-lighter;
+        color: variables.$text-lighter;
       }
     }
 
     .search-loading {
       display: flex;
       font-size: 12px;
-      color: $text-lighter;
+      color: variables.$text-lighter;
     }
   }
 }

package/src/assets/scss/document_set_chooser.scss

@@ -1,7 +1,7 @@
-@import "./imports.scss";
+@use "variables.scss";
 .document-set-dropdown {
-  border-right: $component-border;
-  border-left: $component-border;
+  border-right: variables.$component-border;
+  border-left: variables.$component-border;
 
   .dropdown-doc-set {
     display: flex;

package/src/assets/scss/document_thumbnails.scss

@@ -1,12 +1,12 @@
-@import "./imports.scss";
+@use "variables.scss";
 
 #document-pages {
-  background: $background;
+  background: variables.$background;
   min-width: 80px;
   overflow-y: auto;
-  font-family: $font-family;
+  font-family: variables.$font-family;
   height: 100%;
-  border-right: $component-border;
+  border-right: variables.$component-border;
 
   .document-thumbnail {
     text-align: center;
@@ -19,11 +19,11 @@
       justify-content: center;
 
       .img-thumbnail {
-        border: 1px solid $grey-detail;
+        border: 1px solid variables.$grey-detail;
         border-radius: 4px;
 
         &.selected {
-          border: 2px solid $primary;
+          border: 2px solid variables.$primary;
         }
 
         img {
@@ -33,7 +33,7 @@
     }
 
     .number-thumbnail {
-      color: $text-lighter;
+      color: variables.$text-lighter;
       font-size: 12px;
       margin-top: 4px;
     }

package/src/assets/scss/document_toolbar.scss

@@ -1,4 +1,4 @@
-@import "./imports.scss";
+@use "variables.scss";
 
 #toolbar-container {
   position: absolute;
@@ -9,7 +9,7 @@
   margin: 0 auto;
 
   .toolbar {
-    background-color: $toolbar;
+    background-color: variables.$toolbar;
     height: 40px;
     width: fit-content;
     border-radius: 8px;
@@ -36,7 +36,7 @@
 
     .toolbar-divider {
       width: 1px;
-      background-color: $grey-detail;
+      background-color: variables.$grey-detail;
       height: 20px;
       margin-left: 10px;
       margin-right: 10px;
@@ -49,7 +49,7 @@
 
       .icon {
         svg {
-          fill: $toolbar-elements;
+          fill: variables.$toolbar-elements;
         }
       }
 
@@ -58,7 +58,7 @@
 
         &:hover {
           cursor: pointer;
-          background: $low-opacity-white;
+          background: variables.$low-opacity-white;
           border-radius: 4px;
         }
 
@@ -72,12 +72,12 @@
         }
 
         .edit-text {
-          color: $toolbar-elements;
+          color: variables.$toolbar-elements;
         }
       }
 
       .percentage {
-        color: $toolbar-elements;
+        color: variables.$toolbar-elements;
         width: 32px;
         padding: 7px;
         margin-right: 20px;
@@ -89,7 +89,7 @@
 
         &:hover:not(.edit-icon) {
           cursor: pointer;
-          background: $low-opacity-white;
+          background: variables.$low-opacity-white;
           border-radius: 4px;
         }
       }
@@ -97,10 +97,10 @@
 
     .download-file,
     .search-icon {
-      color: $toolbar-elements;
+      color: variables.$toolbar-elements;
 
       .is-active {
-        background: $low-opacity-white;
+        background: variables.$low-opacity-white;
         border-radius: 4px;
 
         .icon:hover {

package/src/assets/scss/document_top_bar.scss

@@ -1,9 +1,9 @@
-@import "./imports.scss";
+@use "variables.scss";
 
 #document-top-bar-component {
   width: 100%;
-  height: $top-bar-height;
-  border-bottom: $component-border;
+  height: variables.$top-bar-height;
+  border-bottom: variables.$component-border;
 
   .loading-top-bar {
     height: 100%;
@@ -14,7 +14,7 @@
   .document-top-bar {
     width: 100%;
     height: 100%;
-    background-color: $top-bar-background;
+    background-color: variables.$top-bar-background;
     position: sticky;
     z-index: 39;
     display: flex;
@@ -23,7 +23,7 @@
     flex: 1;
     top: 0;
     font-size: 14px;
-    color: $text-color;
+    color: variables.$text-color;
     font-weight: 400px;
 
     .left-bar-components {
@@ -32,7 +32,7 @@
       flex: 1;
 
       .app-info {
-        color: $grey;
+        color: variables.$grey;
         display: flex;
         align-items: center;
         padding: 12px 16px;
@@ -74,7 +74,7 @@
           align-items: center;
           justify-content: flex-end;
           padding-right: 24px;
-          color: $text-lighter;
+          color: variables.$text-lighter;
           font-size: 14px;
           line-height: 20px;
           font-weight: 400;
@@ -85,12 +85,12 @@
             vertical-align: text-top;
 
             &.info-reviewed {
-              color: $primary;
+              color: variables.$primary;
             }
           }
 
           .doc-reviewed {
-            color: $primary;
+            color: variables.$primary;
           }
 
           .read-only-details {
@@ -121,7 +121,7 @@
 
               .tooltip-divider {
                 width: 1px;
-                background-color: $grey-detail;
+                background-color: variables.$grey-detail;
                 height: 15px;
                 margin-top: 3px;
                 opacity: 30%;
@@ -132,7 +132,7 @@
                 font-weight: 500;
                 display: flex;
                 align-items: center;
-                background-color: $low-opacity-white;
+                background-color: variables.$low-opacity-white;
                 border-radius: 4px;
                 padding: 0 5px 0 5px;
               }

package/src/assets/scss/document_viewport_modal.scss

@@ -1,4 +1,4 @@
-@import "./imports.scss";
+@use "variables.scss";
 
 .viewport-modal {
   text-align: center;
@@ -8,12 +8,12 @@
       font-weight: 600 !important;
       font-size: 20px !important;
       line-height: 26px !important;
-      color: $text-color !important;
+      color: variables.$text-color !important;
       padding-bottom: 5px;
     }
 
     p {
-      color: $grey;
+      color: variables.$grey;
     }
 
     p,

package/src/assets/scss/documents_list.scss

@@ -1,9 +1,8 @@
-@import "./imports.scss";
-$documents-list-height: 52px;
+@use "variables.scss";
 
 .documents-list {
-  background-color: $background;
-  font-family: $font-family;
+  background-color: variables.$background;
+  font-family: variables.$font-family;
 
   .documents-list-top {
     display: flex;
@@ -16,7 +15,7 @@ $documents-list-height: 52px;
 
       h2 {
         font-size: 26px;
-        color: $text;
+        color: variables.$text;
         font-weight: 600;
         line-height: 33px;
         margin: 0;
@@ -24,7 +23,7 @@ $documents-list-height: 52px;
 
       p {
         font-size: 14px;
-        color: $text-lighter;
+        color: variables.$text-lighter;
         font-weight: 400;
         line-height: 20px;
         margin: 16px 0 0 0;
@@ -53,7 +52,7 @@ $documents-list-height: 52px;
           content: "";
           width: 100%;
           height: 100%;
-          background: $primary;
+          background: variables.$primary;
           opacity: 0.1;
           position: absolute;
           top: 0;
@@ -65,7 +64,7 @@ $documents-list-height: 52px;
           font-weight: 600;
           font-size: 16px;
           line-height: 24px;
-          color: $text;
+          color: variables.$text;
         }
 
         .action-button {
@@ -84,7 +83,7 @@ $documents-list-height: 52px;
   .documents-list-bottom {
     display: flex;
     flex-direction: row;
-    border-bottom: $component-border;
+    border-bottom: variables.$component-border;
 
     .documents-list-thumbnail {
       cursor: pointer;
@@ -93,7 +92,7 @@ $documents-list-height: 52px;
       flex-direction: row;
       justify-content: center;
       align-items: center;
-      height: $documents-list-height;
+      height: variables.$documents-list-height;
       padding: 8px;
 
       &.selected {
@@ -101,7 +100,7 @@ $documents-list-height: 52px;
         box-sizing: border-box;
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
-        border-bottom: 3px solid $primary;
+        border-bottom: 3px solid variables.$primary;
       }
 
       .img-thumbnail {
@@ -112,7 +111,7 @@ $documents-list-height: 52px;
         }
 
         &.selected {
-          outline: 1px solid $dark;
+          outline: 1px solid variables.$dark;
         }
       }