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

package/src/assets/scss/theme.scss

@@ -1,801 +1,801 @@
-@use "sass:meta";
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
-@import "./imports.scss";
-
-:root {
-  --konfuzio-green: #41af85;
-  --white: #fff;
-  --primary-color: var(--konfuzio-green);
-  --primary-button: 4px;
-  --top-bar-background: var(--white);
-}
-
-.dv-ui-app-container {
-  display: flex;
-  height: 100%;
-  flex-direction: column;
-  margin: 0;
-
-  .overlay {
-    height: 100%;
-    width: 100%;
-    position: fixed;
-    z-index: 999;
-    top: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, 0);
-    overflow-x: hidden;
-  }
-}
-
-.dv-ui-theme {
-  @include meta.load-css("../../../node_modules/buefy/dist/buefy.css");
-  font-family: $font-family;
-
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  -webkit-text-size-adjust: 100%;
-  -moz-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-  box-sizing: border-box;
-  button {
-    &.is-primary {
-      background-color: $primary !important;
-      color: $white !important;
-
-      &:hover:enabled {
-        filter: $hover-style;
-      }
-
-      &:disabled {
-        background-color: $grey;
-      }
-    }
-
-    // TODO: custom classes should have the styles under the component file
-    &.missing-decline-btn {
-      font-size: 14px;
-      color: $grey-blue !important;
-      font-weight: 500;
-      background-color: transparent;
-      width: auto;
-
-      &:not([disabled]) {
-        &:hover {
-          text-decoration: none;
-          color: $text-color !important;
-        }
-      }
-
-      &:focus {
-        box-shadow: none;
-      }
-    }
-
-    &.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;
-    }
-
-    &.all-missing-btn {
-      padding-right: 4px;
-    }
-
-    &.action-bar-save-btn {
-      height: 32px;
-      padding: 6px 12px 6px 12px !important;
-      font-size: 14px;
-      font-weight: 500;
-    }
-
-    &.finish-review-btn {
-      margin-right: 2px;
-
-      &:focus {
-        box-shadow: none;
-        outline: 3px solid $grey-dark;
-        border: 2px solid;
-        margin-right: 1px;
-      }
-
-      .spinner {
-        margin: auto !important;
-      }
-    }
-
-    &.edit-mode-btn[disabled] {
-      border: 1px solid $detail;
-    }
-
-    &[disabled] {
-      border: none;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-
-    &.primary-button {
-      border-radius: var(--primary-button) !important;
-    }
-
-    &.tertiary-button {
-      border-radius: 20px !important;
-    }
-  }
-
-  .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: $error-background;
-      color: $white;
-      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;
-    }
-  }
-
-  .message {
-    &.label-message {
-      .message-body {
-        padding: 5px 15px 5px 15px !important;
-      }
-    }
-  }
-
-  .dropdown {
-    &.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%;
-
-      .icon {
-        &.download-file {
-          svg {
-            height: 100% !important;
-            width: 100% !important;
-          }
-        }
-      }
-    }
-
-    .dropdown-menu {
-      padding-top: 0px;
-      min-width: 40px;
-      width: auto;
-    }
-
-    a.dropdown-item {
-      padding-right: 16px;
-
-      &.is-active {
-        background-color: $primary;
-      }
-
-      &.is-disabled {
-        color: $grey-blue !important;
-      }
-    }
-
-    &.dropdown-menu-animation {
-      a.navbar-item {
-        color: $text-color;
-        font-size: 16px;
-        line-height: 24px;
-
-        &:hover {
-          color: $primary;
-          background: none;
-          border: none;
-        }
-      }
-
-      &.label-dropdown {
-        width: 100%;
-      }
-    }
-  }
-
-  .b-checkbox.checkbox {
-    input[type="checkbox"] + .check {
-      background-color: $white;
-    }
-    &: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;
-
-    &.model-overflow-visible {
-      .modal-content {
-        overflow: visible;
-      }
-      .modal-card-body {
-        overflow: visible;
-      }
-    }
-
-    &.modal-text-center {
-      text-align: center;
-    }
-
-    &.modal-400 {
-      position: absolute !important;
-
-      .modal-content {
-        max-width: 400px !important;
-
-        .scroll-hidden {
-          overflow: hidden;
-          padding: 0;
-
-          .content {
-            overflow: auto;
-            padding: 20px;
-          }
-        }
-      }
-    }
-
-    &.is-active {
-      &.modal-no-footer {
-        .modal-content {
-          .modal-card-body {
-            border-radius: 16px 16px 16px 16px !important;
-
-            &.split-modal {
-              padding-bottom: 0;
-            }
-          }
-        }
-      }
-
-      .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;
-    }
-
-    // TODO: since edit modal is a specific one, should be on the component styles
-    &.edit-modal {
-      .modal-content {
-        max-width: 440px !important;
-
-        .header {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-          padding-bottom: 15px;
-          font-weight: 500;
-          font-size: 18px;
-        }
-
-        .content {
-          text-align: left;
-          font-weight: 400;
-          font-size: 14px;
-          color: $grey-blue;
-        }
-
-        .modal-card-foot {
-          display: flex;
-          gap: 5px;
-
-          .recommended {
-            font-weight: 600;
-            font-size: 11px;
-            background-color: rgba(255, 255, 255, 0.2);
-            padding: 2px 5px;
-            border-radius: 36px;
-          }
-
-          .button {
-            width: 100%;
-
-            &.is-primary {
-              font-weight: 500;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.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: $text-color;
-      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 {
-    height: 100%;
-    align-items: center;
-
-    .tooltip-content {
-      background-color: $text-color !important;
-
-      a {
-        color: $white;
-        text-decoration: underline;
-        font-weight: 500;
-      }
-      &:before {
-        border-bottom-color: $text-color !important;
-      }
-    }
-
-    &.left-aligned {
-      .tooltip-content {
-        left: -3px !important;
-        transform: none !important;
-        padding: 8px 10px !important;
-
-        &::before {
-          left: 16px !important;
-          right: auto !important;
-          border-top-color: $text-color !important;
-          border-bottom-color: $text-color !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;
-          border-bottom-color: $text-color !important;
-        }
-      }
-
-      &.no-right-margin {
-        .tooltip-content {
-          right: 0 !important;
-        }
-      }
-
-      &.full-height-tooltip {
-        height: 100%;
-
-        .tooltip-content {
-          right: 0 !important;
-        }
-      }
-    }
-
-    &.full-height-tooltip {
-      .tooltip-trigger {
-        height: 100%;
-      }
-    }
-
-    &.width-184 {
-      .tooltip-content {
-        width: 184px !important;
-      }
-    }
-
-    &.left-down-aligned {
-      .tooltip-content {
-        font-size: 14px;
-        padding: 12px 12px;
-        top: 45px;
-        background-color: $text-color;
-        border-radius: 4px !important;
-
-        &::before {
-          top: 17px;
-          border-left-color: $text-color !important;
-        }
-      }
-    }
-
-    &.bottom-aligned {
-      width: 100%;
-
-      .tooltip-content {
-        &::before {
-          border-bottom-color: $text-color !important;
-        }
-      }
-    }
-
-    &.top-aligned {
-      .tooltip-content {
-        &::before {
-          border-top-color: $text-color !important;
-        }
-      }
-    }
-
-    &.split-tooltip {
-      width: 100%;
-    }
-  }
-
-  .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;
-        height: 38px;
-      }
-    }
-
-    &.width-12 {
-      .dropdown-trigger {
-        width: 12px;
-      }
-    }
-
-    .dropdown-trigger {
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    &.is-disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  .b-table {
-    .table-wrapper {
-      overflow: visible !important;
-    }
-    &.full-height {
-      height: 100%;
-      .table-wrapper {
-        height: 100%;
-        .table {
-          height: 100%;
-        }
-      }
-    }
-
-    &.dark-header {
-      .table {
-        thead {
-          background-color: $black !important;
-          th {
-            font-weight: 400;
-            background-color: $black !important;
-          }
-        }
-      }
-    }
-
-    &.header-32 {
-      thead {
-        height: 32px;
-      }
-    }
-
-    .table,
-    .table-wrapper {
-      &.has-sticky-header {
-        max-height: 200px;
-        height: fit-content;
-      }
-      cursor: text;
-      thead {
-        background-color: $purple !important;
-        th {
-          font-weight: 500;
-          font-size: 10px;
-          line-height: 18px;
-          .th-wrap {
-            text-transform: none;
-            .icon {
-              margin: 0;
-            }
-          }
-          background-color: $purple !important;
-          color: white !important;
-          vertical-align: middle;
-          &[draggable="true"] {
-            cursor: move;
-          }
-        }
-      }
-      tbody {
-        background-color: rgba(123, 97, 255, 0.1);
-        tr {
-          background-color: white;
-          color: black;
-          td {
-            font-weight: 500;
-            font-size: 10px;
-            line-height: 18px;
-
-            &.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);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .switch {
-    input[type="checkbox"] {
-      &:checked + .check {
-        background: $primary !important;
-        box-shadow: none !important;
-      }
-
-      &:focus + .check {
-        box-shadow: none !important;
-      }
-    }
-  }
-
-  .no-labels {
-    a {
-      color: (var(--primary-color));
-      text-decoration: underline;
-      font-weight: 500;
-
-      &:hover {
-        filter: brightness(0.8) contrast(160%) grayscale(0.4);
-      }
-    }
-  }
-}
+@use "sass:meta";
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
+@import "./imports.scss";
+
+:root {
+  --konfuzio-green: #41af85;
+  --white: #fff;
+  --primary-color: var(--konfuzio-green);
+  --primary-button: 4px;
+  --top-bar-background: var(--white);
+}
+
+.dv-ui-app-container {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  margin: 0;
+
+  .overlay {
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    z-index: 999;
+    top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0);
+    overflow-x: hidden;
+  }
+}
+
+.dv-ui-theme {
+  @include meta.load-css("../../../node_modules/buefy/dist/buefy.css");
+  font-family: $font-family;
+
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  box-sizing: border-box;
+  button {
+    &.is-primary {
+      background-color: $primary !important;
+      color: $white !important;
+
+      &:hover:enabled {
+        filter: $hover-style;
+      }
+
+      &:disabled {
+        background-color: $grey;
+      }
+    }
+
+    // TODO: custom classes should have the styles under the component file
+    &.missing-decline-btn {
+      font-size: 14px;
+      color: $grey-blue !important;
+      font-weight: 500;
+      background-color: transparent;
+      width: auto;
+
+      &:not([disabled]) {
+        &:hover {
+          text-decoration: none;
+          color: $text-color !important;
+        }
+      }
+
+      &:focus {
+        box-shadow: none;
+      }
+    }
+
+    &.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;
+    }
+
+    &.all-missing-btn {
+      padding-right: 4px;
+    }
+
+    &.action-bar-save-btn {
+      height: 32px;
+      padding: 6px 12px 6px 12px !important;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    &.finish-review-btn {
+      margin-right: 2px;
+
+      &:focus {
+        box-shadow: none;
+        outline: 3px solid $grey-dark;
+        border: 2px solid;
+        margin-right: 1px;
+      }
+
+      .spinner {
+        margin: auto !important;
+      }
+    }
+
+    &.edit-mode-btn[disabled] {
+      border: 1px solid $detail;
+    }
+
+    &[disabled] {
+      border: none;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    &.primary-button {
+      border-radius: var(--primary-button) !important;
+    }
+
+    &.tertiary-button {
+      border-radius: 20px !important;
+    }
+  }
+
+  .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: $error-background;
+      color: $white;
+      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;
+    }
+  }
+
+  .message {
+    &.label-message {
+      .message-body {
+        padding: 5px 15px 5px 15px !important;
+      }
+    }
+  }
+
+  .dropdown {
+    &.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%;
+
+      .icon {
+        &.download-file {
+          svg {
+            height: 100% !important;
+            width: 100% !important;
+          }
+        }
+      }
+    }
+
+    .dropdown-menu {
+      padding-top: 0px;
+      min-width: 40px;
+      width: auto;
+    }
+
+    a.dropdown-item {
+      padding-right: 16px;
+
+      &.is-active {
+        background-color: $primary;
+      }
+
+      &.is-disabled {
+        color: $grey-blue !important;
+      }
+    }
+
+    &.dropdown-menu-animation {
+      a.navbar-item {
+        color: $text-color;
+        font-size: 16px;
+        line-height: 24px;
+
+        &:hover {
+          color: $primary;
+          background: none;
+          border: none;
+        }
+      }
+
+      &.label-dropdown {
+        width: 100%;
+      }
+    }
+  }
+
+  .b-checkbox.checkbox {
+    input[type="checkbox"] + .check {
+      background-color: $white;
+    }
+    &: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;
+
+    &.model-overflow-visible {
+      .modal-content {
+        overflow: visible;
+      }
+      .modal-card-body {
+        overflow: visible;
+      }
+    }
+
+    &.modal-text-center {
+      text-align: center;
+    }
+
+    &.modal-400 {
+      position: absolute !important;
+
+      .modal-content {
+        max-width: 400px !important;
+
+        .scroll-hidden {
+          overflow: hidden;
+          padding: 0;
+
+          .content {
+            overflow: auto;
+            padding: 20px;
+          }
+        }
+      }
+    }
+
+    &.is-active {
+      &.modal-no-footer {
+        .modal-content {
+          .modal-card-body {
+            border-radius: 16px 16px 16px 16px !important;
+
+            &.split-modal {
+              padding-bottom: 0;
+            }
+          }
+        }
+      }
+
+      .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;
+    }
+
+    // TODO: since edit modal is a specific one, should be on the component styles
+    &.edit-modal {
+      .modal-content {
+        max-width: 440px !important;
+
+        .header {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding-bottom: 15px;
+          font-weight: 500;
+          font-size: 18px;
+        }
+
+        .content {
+          text-align: left;
+          font-weight: 400;
+          font-size: 14px;
+          color: $grey-blue;
+        }
+
+        .modal-card-foot {
+          display: flex;
+          gap: 5px;
+
+          .recommended {
+            font-weight: 600;
+            font-size: 11px;
+            background-color: rgba(255, 255, 255, 0.2);
+            padding: 2px 5px;
+            border-radius: 36px;
+          }
+
+          .button {
+            width: 100%;
+
+            &.is-primary {
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.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: $text-color;
+      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 {
+    height: 100%;
+    align-items: center;
+
+    .tooltip-content {
+      background-color: $text-color !important;
+
+      a {
+        color: $white;
+        text-decoration: underline;
+        font-weight: 500;
+      }
+      &:before {
+        border-bottom-color: $text-color !important;
+      }
+    }
+
+    &.left-aligned {
+      .tooltip-content {
+        left: -3px !important;
+        transform: none !important;
+        padding: 8px 10px !important;
+
+        &::before {
+          left: 16px !important;
+          right: auto !important;
+          border-top-color: $text-color !important;
+          border-bottom-color: $text-color !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;
+          border-bottom-color: $text-color !important;
+        }
+      }
+
+      &.no-right-margin {
+        .tooltip-content {
+          right: 0 !important;
+        }
+      }
+
+      &.full-height-tooltip {
+        height: 100%;
+
+        .tooltip-content {
+          right: 0 !important;
+        }
+      }
+    }
+
+    &.full-height-tooltip {
+      .tooltip-trigger {
+        height: 100%;
+      }
+    }
+
+    &.width-184 {
+      .tooltip-content {
+        width: 184px !important;
+      }
+    }
+
+    &.left-down-aligned {
+      .tooltip-content {
+        font-size: 14px;
+        padding: 12px 12px;
+        top: 45px;
+        background-color: $text-color;
+        border-radius: 4px !important;
+
+        &::before {
+          top: 17px;
+          border-left-color: $text-color !important;
+        }
+      }
+    }
+
+    &.bottom-aligned {
+      width: 100%;
+
+      .tooltip-content {
+        &::before {
+          border-bottom-color: $text-color !important;
+        }
+      }
+    }
+
+    &.top-aligned {
+      .tooltip-content {
+        &::before {
+          border-top-color: $text-color !important;
+        }
+      }
+    }
+
+    &.split-tooltip {
+      width: 100%;
+    }
+  }
+
+  .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;
+        height: 38px;
+      }
+    }
+
+    &.width-12 {
+      .dropdown-trigger {
+        width: 12px;
+      }
+    }
+
+    .dropdown-trigger {
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &.is-disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  .b-table {
+    .table-wrapper {
+      overflow: visible !important;
+    }
+    &.full-height {
+      height: 100%;
+      .table-wrapper {
+        height: 100%;
+        .table {
+          height: 100%;
+        }
+      }
+    }
+
+    &.dark-header {
+      .table {
+        thead {
+          background-color: $black !important;
+          th {
+            font-weight: 400;
+            background-color: $black !important;
+          }
+        }
+      }
+    }
+
+    &.header-32 {
+      thead {
+        height: 32px;
+      }
+    }
+
+    .table,
+    .table-wrapper {
+      &.has-sticky-header {
+        max-height: 200px;
+        height: fit-content;
+      }
+      cursor: text;
+      thead {
+        background-color: $purple !important;
+        th {
+          font-weight: 500;
+          font-size: 10px;
+          line-height: 18px;
+          .th-wrap {
+            text-transform: none;
+            .icon {
+              margin: 0;
+            }
+          }
+          background-color: $purple !important;
+          color: white !important;
+          vertical-align: middle;
+          &[draggable="true"] {
+            cursor: move;
+          }
+        }
+      }
+      tbody {
+        background-color: rgba(123, 97, 255, 0.1);
+        tr {
+          background-color: white;
+          color: black;
+          td {
+            font-weight: 500;
+            font-size: 10px;
+            line-height: 18px;
+
+            &.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);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .switch {
+    input[type="checkbox"] {
+      &:checked + .check {
+        background: $primary !important;
+        box-shadow: none !important;
+      }
+
+      &:focus + .check {
+        box-shadow: none !important;
+      }
+    }
+  }
+
+  .no-labels {
+    a {
+      color: (var(--primary-color));
+      text-decoration: underline;
+      font-weight: 500;
+
+      &:hover {
+        filter: brightness(0.8) contrast(160%) grayscale(0.4);
+      }
+    }
+  }
+}