@konfuzio/document-validation-ui 0.1.19-dev.2 → 0.1.19

package/src/assets/scss/annotation_details.scss

@@ -1,141 +1,141 @@
-@import "./imports.scss";
-
-.annotation-details {
-  .label-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .annotation-details-icon {
-      display: flex;
-
-      &.animated-ripple {
-        animation: bounce 0.4s 0.1s;
-        transform: scale(1);
-      }
-
-      svg {
-        width: 25px;
-      }
-
-      &.user-icon {
-        padding: 0 3px;
-        svg {
-          width: 20px;
-        }
-      }
-    }
-    &.is-small {
-      .annotation-details-icon {
-        svg {
-          width: 16px;
-        }
-        &.user-icon {
-          svg {
-            width: 12px;
-          }
-        }
-      }
-    }
-  }
-
-  .label-details {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    min-width: 100px;
-
-    .label-description {
-      opacity: 0.7;
-      color: $white;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 18px;
-      border-bottom: 1px solid $low-opacity-white;
-      padding-bottom: 8px;
-      word-wrap: break-all;
-      white-space: normal;
-      width: 216px;
-    }
-
-    .confidence {
-      color: $white;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 18px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-
-      &:not(.tooltip-in-public-view) {
-        border-bottom: 1px solid $low-opacity-white;
-        padding-bottom: 8px;
-      }
-
-      .value {
-        color: $green;
-
-        &.yellow {
-          color: $yellow;
-        }
-
-        &.red {
-          color: $red;
-        }
-      }
-    }
-
-    .revision {
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 18px;
-      color: $white;
-
-      > div {
-        display: flex;
-        align-items: center;
-      }
-
-      .annotation-details-icon {
-        display: flex;
-
-        svg {
-          width: 25px;
-        }
-
-        &.user-icon {
-          padding-right: 5px;
-
-          svg {
-            width: 20px;
-          }
-        }
-      }
-    }
-  }
-}
-
-@keyframes bounce {
-  0% {
-    transform: scale(0.7);
-    opacity: 1;
-  }
-
-  20% {
-    transform: scale(0.9);
-    opacity: 0.7;
-  }
-
-  40% {
-    transform: scale(1);
-    opacity: 0.7;
-  }
-
-  60% {
-    transform: scale(1.3);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
+@import "./imports.scss";
+
+.annotation-details {
+  .label-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .annotation-details-icon {
+      display: flex;
+
+      &.animated-ripple {
+        animation: bounce 0.4s 0.1s;
+        transform: scale(1);
+      }
+
+      svg {
+        width: 25px;
+      }
+
+      &.user-icon {
+        padding: 0 3px;
+        svg {
+          width: 20px;
+        }
+      }
+    }
+    &.is-small {
+      .annotation-details-icon {
+        svg {
+          width: 16px;
+        }
+        &.user-icon {
+          svg {
+            width: 12px;
+          }
+        }
+      }
+    }
+  }
+
+  .label-details {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 100px;
+
+    .label-description {
+      opacity: 0.7;
+      color: $white;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      border-bottom: 1px solid $low-opacity-white;
+      padding-bottom: 8px;
+      word-wrap: break-all;
+      white-space: normal;
+      width: 216px;
+    }
+
+    .confidence {
+      color: $white;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      &:not(.tooltip-in-public-view) {
+        border-bottom: 1px solid $low-opacity-white;
+        padding-bottom: 8px;
+      }
+
+      .value {
+        color: $green;
+
+        &.yellow {
+          color: $yellow;
+        }
+
+        &.red {
+          color: $red;
+        }
+      }
+    }
+
+    .revision {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      color: $white;
+
+      > div {
+        display: flex;
+        align-items: center;
+      }
+
+      .annotation-details-icon {
+        display: flex;
+
+        svg {
+          width: 25px;
+        }
+
+        &.user-icon {
+          padding-right: 5px;
+
+          svg {
+            width: 20px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes bounce {
+  0% {
+    transform: scale(0.7);
+    opacity: 1;
+  }
+
+  20% {
+    transform: scale(0.9);
+    opacity: 0.7;
+  }
+
+  40% {
+    transform: scale(1);
+    opacity: 0.7;
+  }
+
+  60% {
+    transform: scale(1.3);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}

package/src/assets/scss/choose_label_set_modal.scss

@@ -1,65 +1,65 @@
-@import "./imports.scss";
-
-.choose-label-set-modal {
-  .content {
-    h3 {
-      font-weight: 500;
-      font-size: 18px;
-      line-height: 28px;
-      color: $grey-darker;
-    }
-
-    p {
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-      color: $text-strong;
-    }
-
-    .label-set-dropdown {
-      width: 100%;
-      border: 1px solid $grey-outline;
-      height: 40px;
-      cursor: pointer;
-      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-      border-radius: 8px;
-      margin-bottom: 4px;
-
-      &.dropdown-disabled {
-        cursor: not-allowed;
-      }
-    }
-
-    .labels-list {
-      color: $grey-blue;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 20px;
-
-      .labels-select {
-        padding: 12px;
-        overflow: scroll;
-        height: 154px;
-        border: 1px solid $grey-detail;
-        border-radius: 8px;
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-      }
-    }
-
-    .next-step-description {
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 18px;
-      text-align: center;
-      color: $text-color;
-      margin-top: 8px;
-    }
-
-    .submit-ann-set {
-      margin-top: 16px;
-      width: 100%;
-    }
-  }
-}
+@import "./imports.scss";
+
+.choose-label-set-modal {
+  .content {
+    h3 {
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 28px;
+      color: $grey-darker;
+    }
+
+    p {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      color: $text-strong;
+    }
+
+    .label-set-dropdown {
+      width: 100%;
+      border: 1px solid $grey-outline;
+      height: 40px;
+      cursor: pointer;
+      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+      border-radius: 8px;
+      margin-bottom: 4px;
+
+      &.dropdown-disabled {
+        cursor: not-allowed;
+      }
+    }
+
+    .labels-list {
+      color: $grey-blue;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+
+      .labels-select {
+        padding: 12px;
+        overflow: scroll;
+        height: 154px;
+        border: 1px solid $grey-detail;
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+      }
+    }
+
+    .next-step-description {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      text-align: center;
+      color: $text-color;
+      margin-top: 8px;
+    }
+
+    .submit-ann-set {
+      margin-top: 16px;
+      width: 100%;
+    }
+  }
+}

package/src/assets/scss/document_action_bar.scss

@@ -1,37 +1,37 @@
-@import "./imports.scss";
-.action-bar {
-  position: absolute;
-  width: fit-content;
-  bottom: 20px;
-  left: 0;
-  right: 0;
-  margin: 0 auto;
-  z-index: 100;
-
-  .action-bar-elements {
-    background-color: $text-color;
-    height: 40px;
-    width: fit-content;
-    padding: 4px 4px 4px 12px;
-    border-radius: 52px;
-    margin-left: auto;
-    margin-right: auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 9px;
-
-    .action-icon {
-      .icon {
-        display: flex;
-      }
-    }
-
-    .action-text {
-      color: $white;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 20px;
-    }
-  }
-}
+@import "./imports.scss";
+.action-bar {
+  position: absolute;
+  width: fit-content;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  z-index: 100;
+
+  .action-bar-elements {
+    background-color: $text-color;
+    height: 40px;
+    width: fit-content;
+    padding: 4px 4px 4px 12px;
+    border-radius: 52px;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 9px;
+
+    .action-icon {
+      .icon {
+        display: flex;
+      }
+    }
+
+    .action-text {
+      color: $white;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+    }
+  }
+}