@konfuzio/document-validation-ui 0.1.1

package/src/assets/scss/variables.scss

@@ -0,0 +1,696 @@
+/* Theme */
+
+$konfuzio-green: #41af85;
+$green: #4bb543;
+$green-low-opacity: rgba(75, 181, 67, 0.11);
+$green-border: #67d19f;
+$green-hover-background: rgba(18, 183, 106, 0.05);
+$darker-green: #3a9c76;
+$dark-green-hover: #0c4b33;
+$primary-low-opacity: rgba(52, 171, 125, 0.16);
+
+$red: #e7423a;
+$low-opacity-red: rgba(231, 66, 58, 0.08);
+$lightest-red: #fdf4f6;
+$error-background: #d4453d;
+
+$grey-dark: #344054;
+$grey: #798190;
+$grey-low-opacity: rgba(133, 140, 154, 0.4);
+$grey-lighter-low-opacity: rgba(223, 224, 228, 0.5);
+$grey-lightest: #f0f0f0;
+$grey-outline: #d0d5dd;
+$grey-detail: #dfe0e4;
+$subtle-grey: #f2f4f7;
+$subtlest-grey: #e3e4e5;
+$grey-darker: #101828;
+$grey-hover: #fafafa;
+$grey-blue: #667085;
+$detail: #e2e3e4;
+
+$dark: #2f3032;
+$full-black: #000;
+
+$white: #fff;
+$low-opacity-white: rgba(255, 255, 255, 0.1);
+
+$yellow: #ffd600;
+$warning-yellow: #fec84b;
+
+$blue: #2f80ed;
+$dark-blue: #2b3545;
+
+:root {
+  --font-family: #{"Inter", sans-serif};
+  --background-color: #{$white};
+  --primary-color: #{$konfuzio-green};
+  --primary-hover: #{$dark-green-hover};
+  --toolbar-color: #{$dark-blue};
+  --toolbar-elements: #{$white};
+  --tooltip-color: #{$dark};
+  --error-background: #{$error-background};
+  --error-text: #{$white};
+}
+
+$font-family: var(--font-family);
+$background: var(--background-color);
+$toolbar: var(--toolbar-color);
+$primary: var(--primary-color);
+$primary-dark: var(--primary-hover);
+$tooltip: var(--tooltip-color);
+$toolbar-elements: var(--toolbar-elements);
+
+$link: $primary;
+$info: $blue;
+$danger: $red;
+$warning: $warning-yellow;
+$success: $green;
+$text: $grey-dark;
+$text-strong: $dark;
+$text-lighter: $grey;
+$black: $dark;
+
+$input-shadow: none;
+$top-bar-height: 56px;
+$component-border: 1px solid $detail;
+
+button {
+  &.is-primary {
+    background-color: $primary !important;
+    color: $white !important;
+
+    &:hover:enabled {
+      background-color: $primary-dark !important;
+    }
+
+    &:disabled {
+      background-color: $grey;
+    }
+  }
+
+  &.reject-decline-btn {
+    font-size: 14px;
+    color: $grey-blue !important;
+    font-weight: 500;
+    background-color: transparent;
+    width: auto;
+
+    &:not([disabled]) {
+      &:hover {
+        text-decoration: none;
+        color: $dark-blue !important;
+      }
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  &:not(.is-text, .is-primary, .reject-btn) {
+    background-color: $white;
+    color: $dark-blue;
+  }
+
+  &.is-text {
+    text-decoration: none;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  &.annotation-cancel-btn {
+    .icon {
+      svg {
+        width: 15px !important;
+        height: 15px !important;
+      }
+    }
+  }
+
+  &.accept-all-btn {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  &.reject-all-btn {
+    padding-right: 4px;
+  }
+
+  &.action-bar-save-btn {
+    border-radius: 20px;
+    height: 32px;
+    padding: 6px 12px 6px 12px !important;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &.finish-review-btn {
+    border-radius: 4px;
+    margin-right: 2px;
+
+    &:focus {
+      box-shadow: none;
+      outline: 3px solid $grey-dark;
+      border: 2px solid;
+      margin-right: 1px;
+    }
+
+    .spinner {
+      margin: auto !important;
+    }
+  }
+
+  &.rotate-button[disabled] {
+    border: 1px solid $detail;
+  }
+
+  &[disabled] {
+    border: none;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+.carousel-list {
+  &.has-shadow {
+    box-shadow: none !important;
+  }
+
+  .carousel-slides .carousel-slide {
+    border: none !important;
+  }
+
+  .carousel-arrow {
+    .icon {
+      color: $primary;
+
+      &:hover {
+        border: 1px solid $primary;
+      }
+
+      svg {
+        height: 100%;
+      }
+    }
+  }
+}
+
+.error-message {
+  position: absolute;
+  width: 100%;
+
+  .message {
+    padding: 0;
+  }
+
+  .message-body {
+    background-color: var(--error-background);
+    color: var(--error-text);
+    font-size: 14px;
+    border: 0;
+    border-radius: 0%;
+    line-height: 20px;
+    padding: 7px 0 7px 0;
+  }
+
+  .media-content {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .message-container {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+
+    .server-error {
+      display: flex;
+
+      .contact-support {
+        text-decoration: underline;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        padding-left: 5px;
+
+        .icon {
+          padding-left: 10px;
+        }
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+
+  .btn-container {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  &.handover {
+    position: relative;
+    margin-right: 15px;
+    margin-left: 15px;
+    margin-top: 7px;
+    width: auto;
+
+    .message {
+      display: flex;
+    }
+
+    .message-body {
+      border-radius: 4px;
+      border: 1px solid $red;
+      background-color: $lightest-red !important;
+      color: $red;
+      width: 100%;
+    }
+
+    .media-content {
+      margin: 0px 10px 0px 10px !important;
+    }
+
+    .message-container {
+      justify-content: flex-start !important;
+      text-align: left;
+    }
+  }
+}
+
+.message {
+  &.label-message {
+    .message-body {
+      padding: 5px 15px 5px 15px !important;
+    }
+  }
+}
+
+.dropdown {
+  height: 100%;
+
+  &.no-padding-bottom {
+    .dropdown-content {
+      padding-bottom: 0;
+    }
+  }
+
+  &.no-padding-top {
+    .dropdown-content {
+      padding-top: 0;
+    }
+  }
+
+  + .dropdown {
+    margin-left: 0;
+  }
+
+  .dropdown-trigger {
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .dropdown-menu {
+    padding-top: 0px;
+  }
+
+  a.dropdown-item.is-active {
+    background-color: $primary;
+  }
+
+  &.dropdown-menu-animation {
+    a.navbar-item {
+      color: $dark-blue;
+      font-size: 16px;
+      line-height: 24px;
+
+      &:hover {
+        color: $primary;
+        background: none;
+        border: none;
+      }
+    }
+
+    &.label-dropdown {
+      width: 100%;
+    }
+  }
+}
+
+.b-checkbox.checkbox {
+  &:hover input[type="checkbox"]:not(:disabled) + .check {
+    border-color: $primary !important;
+  }
+
+  input[type="checkbox"]:checked + .check {
+    border-color: $primary !important;
+    background-color: $primary;
+  }
+}
+
+.modal {
+  z-index: 999;
+
+  &.modal-text-center {
+    text-align: center;
+  }
+
+  &.modal-400 {
+    .modal-content {
+      max-width: 400px !important;
+    }
+  }
+
+  &.is-active {
+    &.modal-no-footer {
+      .modal-content {
+        .modal-card-body {
+          border-radius: 16px 16px 16px 16px !important;
+        }
+      }
+    }
+
+    .modal-content {
+      height: auto;
+      margin-left: auto;
+      margin-right: auto;
+      position: relative;
+
+      .modal-close {
+        position: absolute;
+        top: 14px;
+
+        &::before,
+        &::after {
+          background-color: $grey;
+        }
+
+        &:hover {
+          background-color: $white;
+        }
+      }
+
+      .modal-card-body {
+        background: $white;
+        border-radius: 16px 16px 0 0 !important;
+      }
+
+      .modal-card-foot {
+        display: flex;
+        justify-content: center;
+        border: none;
+        background: $white;
+        border-radius: 0 0 16px 16px;
+      }
+    }
+  }
+
+  &.modal-absolute {
+    position: absolute;
+  }
+
+  .modal-background {
+    background-color: $full-black;
+    opacity: 0.5;
+  }
+}
+
+.invisible-parent-modal {
+  background-color: transparent;
+
+  .modal-content {
+    height: 100vh !important;
+    top: 25%;
+
+    .modal-card-body {
+      overflow: visible;
+    }
+  }
+}
+
+.loading-background {
+  background-color: transparent !important;
+}
+
+.loading-icon-size {
+  width: 13px;
+  height: 13px;
+}
+
+.notices {
+  .snackbar {
+    background-color: $dark-blue;
+    min-height: 40px;
+
+    .text {
+      display: flex;
+      font-size: 14px;
+    }
+  }
+}
+
+.label-action-btn {
+  .dropdown-trigger {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+}
+
+.slide-fade-enter-active {
+  transition: all 0.3s ease;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.slide-fade-enter,
+.slide-fade-leave-to {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+
+.b-tooltip {
+  &.left-aligned {
+    .tooltip-content {
+      left: 10px !important;
+      transform: none !important;
+      padding: 8px 10px !important;
+
+      &::before {
+        left: 16px !important;
+        right: auto !important;
+      }
+    }
+  }
+
+  &.right-aligned {
+    .tooltip-content {
+      right: -20px !important;
+      left: auto !important;
+      transform: none !important;
+      padding: 8px 10px !important;
+
+      &::before {
+        right: 16px !important;
+        left: auto !important;
+      }
+    }
+  }
+
+  &.width-184 {
+    .tooltip-content {
+      width: 184px !important;
+    }
+  }
+
+  &.left-down-aligned {
+    .tooltip-content {
+      font-size: 14px;
+      padding: 12px 12px;
+      top: 45px;
+      background-color: $dark-blue;
+      border-radius: 4px !important;
+
+      &::before {
+        top: 17px;
+        border-left-color: $dark-blue !important;
+      }
+    }
+  }
+}
+
+.rejected-tag-container {
+  .tags {
+    margin: 0 !important;
+
+    .tag {
+      margin-bottom: 0 !important;
+      color: $dark;
+      font-weight: 400;
+      background-color: $detail;
+      border-style: none !important;
+
+      &:hover {
+        background-color: $detail !important;
+      }
+
+      &.is-delete {
+        cursor: pointer;
+
+        &::before {
+          height: 1.5px;
+          border-radius: 4px;
+        }
+
+        &::after {
+          width: 1.5px;
+          border-radius: 4px;
+        }
+      }
+    }
+
+    &.loading-active {
+      .is-delete {
+        display: none !important;
+      }
+
+      .tag {
+        border-radius: 4px;
+      }
+    }
+  }
+}
+
+.no-icon-margin .icon {
+  margin: 0 !important;
+}
+
+.icon.is-small,
+.button .icon.is-small {
+  width: 14px;
+  height: 14px;
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  &.caret {
+    svg {
+      height: 12px;
+    }
+
+    &.split-mode-caret {
+      svg {
+        color: $grey;
+      }
+    }
+  }
+
+  &.close-btn {
+    width: 10px;
+    height: 10px;
+
+    &.error-icon {
+      color: $white;
+      padding-right: 20px;
+      padding-left: 20px;
+
+      svg {
+        height: 15px !important;
+      }
+    }
+  }
+}
+
+.dropdown {
+  &.split-mode {
+    .dropdown-trigger {
+      font-size: 14px;
+    }
+  }
+
+  &.width-12 {
+    .dropdown-trigger {
+      width: 12px;
+    }
+  }
+
+  .dropdown-trigger {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.b-table {
+  &.full-height {
+    height: 100%;
+    .table-wrapper {
+      height: 100%;
+      .table {
+        height: 100%;
+      }
+    }
+  }
+  .table {
+    cursor: text;
+    thead {
+      background-color: #7b61ff;
+      font-weight: 500;
+      font-size: 10px;
+      line-height: 18px;
+      th {
+        .th-wrap {
+          text-transform: none;
+          .icon {
+            margin: 0;
+          }
+        }
+        background-color: #7b61ff;
+        color: white;
+        vertical-align: middle;
+        &[draggable="true"] {
+          cursor: move;
+        }
+      }
+    }
+    tbody {
+      background-color: rgba(123, 97, 255, 0.1);
+      font-weight: 500;
+      font-size: 10px;
+      line-height: 18px;
+      tr {
+        background-color: white;
+        color: black;
+        td {
+          &.has-text-centered {
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+    &.is-striped {
+      tbody {
+        tr {
+          &:not(.is-selected) {
+            background-color: rgba(123, 97, 255, 0.1);
+            &:nth-child(even) {
+              background-color: rgba(123, 97, 255, 0.3);
+            }
+          }
+        }
+      }
+    }
+  }
+}