@it-enterprise/forcebpm-ui-kit 1.0.2-beta.3 → 1.0.2-beta.31

package/src/assets/scss/input.scss

@@ -0,0 +1,361 @@
+// Override input styles
+.f-input {
+  border-radius: 5.8px;
+  color: rgb(var(--v-theme-text));
+  .v-input__control {
+    background-color: rgb(var(--v-theme-fields));
+  }
+  &:hover {
+    .v-field {
+      .v-label {
+        color: rgb(var(--v-theme-primary));
+      }
+      .v-field__outline__start,
+      .v-field__outline__notch,
+      .v-field__outline__end {
+        border-color: rgb(var(--v-theme-primary));
+      }
+      .v-field__outline__notch::after,
+      .v-field__outline__notch::before {
+        border-color: rgb(var(--v-theme-primary)) !important;
+      }
+    }
+  }
+
+  .v-field--center-affix .v-label.v-field-label {
+    top: 65%;
+  }
+
+  .v-field {
+    border-radius: 5.8px;
+    &.v-field--error {
+      .v-label {
+        color: rgb(var(--v-theme-error));
+      }
+      .v-field__outline__start,
+      .v-field__outline__notch,
+      .v-field__outline__end {
+        border-color: rgb(var(--v-theme-error));
+      }
+      .v-field__outline__notch::after,
+      .v-field__outline__notch::before {
+        border-color: rgb(var(--v-theme-error)) !important;
+      }
+    }
+
+    .v-label {
+      opacity: 1;
+      color: rgb(var(--v-theme-text));
+      font-size: 0.95rem;
+      &.v-field-label--floating {
+        font-size: 0.7rem;
+      }
+    }
+
+    &.v-field--variant-outlined {
+      .v-field__outline__start,
+      .v-field__outline__notch,
+      .v-field__outline__end {
+        --v-field-border-width: 0.5px;
+        --v-field-border-opacity: 1;
+      }
+      .v-field--focused .v-field__outline {
+        --v-field-border-width: 0.5px;
+        --v-field-border-opacity: 1;
+      }
+    }
+    .v-field__outline__start,
+    .v-field__outline__notch,
+    .v-field__outline__end {
+      border-color: rgb(var(--v-theme-text));
+    }
+    .v-field__outline__notch::after,
+    .v-field__outline__notch::before {
+      border-color: rgb(var(--v-theme-text)) !important;
+    }
+    .v-field__input {
+      padding-top: 16px;
+      padding-bottom: 10px;
+      padding-inline: 12px 12px;
+      min-height: 20px;
+      font-size: 0.95em;
+      line-height: 1em;
+      color: rgb(var(--v-theme-subTitle));
+      &:is(:-webkit-autofill, :autofill) {
+        -webkit-text-fill-color: rgb(var(--v-theme-subTitle)) !important;
+        -webkit-box-shadow: 0 0 0 1000px rgb(var(--v-theme-background)) inset !important;
+        background-color: rgb(var(--v-theme-background)) !important;
+        border-radius: 5.8px !important;
+      }
+    }
+    input {
+      min-height: 20px;
+      &:is(:-webkit-autofill, :autofill) {
+        -webkit-text-fill-color: rgb(var(--v-theme-subTitle)) !important;
+        -webkit-box-shadow: 0 0 0 1000px rgb(var(--v-theme-background)) inset !important;
+        background-color: rgb(var(--v-theme-background)) !important;
+        border-radius: 5.8px !important;
+      }
+    }
+    input::placeholder {
+      font-size: 0.9em;
+      opacity: 0.9;
+      color: rgb(var(--v-theme-subTitle));
+    }
+    .v-field__loader {
+      top: calc(100% - 2.5px);
+      width: calc(100% - 2.5px * 2);
+      left: 2.5px;
+      .v-progress-linear__background,
+      .v-progress-linear__buffer,
+      .v-progress-linear__determinate,
+      .v-progress-linear__indeterminate {
+        background: rgb(var(--v-theme-primary));
+      }
+    }
+    &.v-field--focused:not(.v-field--error) {
+      .v-label {
+        color: rgb(var(--v-theme-primary));
+      }
+      .v-field__outline__start,
+      .v-field__outline__notch,
+      .v-field__outline__end {
+        border-color: rgb(var(--v-theme-primary));
+      }
+      .v-field__outline__notch::after,
+      .v-field__outline__notch::before {
+        border-color: rgb(var(--v-theme-primary)) !important;
+      }
+    }
+    .v-field__append-inner {
+      display: flex;
+      justify-content: center;
+      .f-icon {
+        margin-top: 10px;
+        opacity: 1;
+        background: rgb(var(--v-theme-text));
+      }
+    }
+    .v-field__clearable {
+      .f-icon {
+        min-height: 14px;
+        min-width: 14px;
+        height: 14px;
+        width: 14px;
+      }
+    }
+  }
+
+  &.v-input--is-disabled {
+    background-color: rgb(var(--v-theme-fields));
+    fieldset {
+      border-color: rgb(var(--v-theme-fields));
+    }
+  }
+}
+
+// Autocomplete User
+.f-input.f-autocomplete-user {
+  // .v-field {
+  //   .v-field__outline__end {
+  // min-width: calc(100% - 53px);
+  // }
+  // }
+  &.v-input--horizontal .v-input__append {
+    margin-inline-start: 0px;
+    .f-icon {
+      opacity: 1;
+      transition: all 0.3s ease-in-out;
+      &:hover {
+        background: rgb(var(--v-theme-primary)) !important;
+      }
+    }
+  }
+}
+
+// Textarea
+.f-input.v-textarea {
+  .v-field {
+    .v-field__input {
+      padding-inline: 12px 8px;
+      font-size: 0.85em;
+      min-height: 45px;
+    }
+    &.v-field--appended {
+      padding-inline-end: 0px;
+    }
+    .v-field__clearable {
+      margin-inline: 10px;
+    }
+  }
+}
+
+// Select
+.f-input.v-select {
+  &.v-select--active-menu {
+    .v-select__menu-icon {
+      transform: rotate(180deg);
+    }
+  }
+  .v-field {
+    .v-field__input {
+      padding-inline: 12px 8px;
+      font-size: 0.85em;
+      min-height: 45px;
+    }
+  }
+}
+
+// Autocomplete
+.f-input.v-autocomplete {
+  &.v-autocomplete--active-menu {
+    .v-autocomplete__menu-icon {
+      transform: rotate(180deg);
+    }
+  }
+  .v-autocomplete__selection {
+    height: 20px;
+    .f-chip.v-chip {
+      --v-chip-height: 20px;
+      padding: 0;
+      border-radius: 16.8px;
+      font-size: 0.75em;
+      background: rgb(var(--v-theme-line));
+      color: rgb(var(--v-theme-subTitle));
+      .v-chip__close {
+        margin-inline-start: 5px;
+        margin-inline-end: 5px;
+        .f-icon {
+          opacity: 1;
+          width: 12px;
+          height: 12px;
+          min-width: 12px;
+          min-height: 12px;
+        }
+      }
+    }
+  }
+}
+
+// Checkbox
+.f-checkbox {
+  .v-input__control {
+    .v-selection-control {
+      --v-selection-control-size: 16px;
+      min-height: 1.2em;
+      .v-selection-control__wrapper {
+        margin-right: 4px;
+        .v-selection-control__input {
+          &::before {
+            content: none;
+          }
+          .f-icon {
+            opacity: 1;
+            min-height: var(--v-selection-control-size);
+            min-width: var(--v-selection-control-size);
+            height: var(--v-selection-control-size);
+            width: var(--v-selection-control-size);
+          }
+        }
+      }
+      .v-label {
+        line-height: var(--v-selection-control-size);
+      }
+    }
+  }
+  &.f-checkbox-opacity {
+    &:hover {
+      .v-input__control {
+        .v-selection-control {
+          .v-selection-control__wrapper {
+            .v-selection-control__input {
+              .f-icon {
+                opacity: 1;
+              }
+            }
+          }
+        }
+      }
+    }
+    .v-input__control {
+      .v-selection-control {
+        .v-selection-control__wrapper {
+          .v-selection-control__input {
+            .f-icon {
+              transition: all 0.3s ease-in-out;
+              opacity: 0.5;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+//Radio
+.f-radio {
+  &.v-selection-control--inline:not(:last-child) {
+    margin-right: 8px;
+  }
+  .v-selection-control__wrapper {
+    --v-selection-control-size: 20px;
+    .v-selection-control__input {
+      &::before {
+        content: none;
+      }
+      .f-icon {
+        opacity: 1;
+        min-height: var(--v-selection-control-size);
+        min-width: var(--v-selection-control-size);
+        height: var(--v-selection-control-size);
+        width: var(--v-selection-control-size);
+      }
+    }
+  }
+  .v-label {
+    margin-left: 4px;
+    font-size: 0.85em;
+  }
+}
+
+// Switch
+.f-switch.v-switch {
+  margin: 0;
+  padding: 0;
+  --v-input-control-height: 24px;
+  --v-input-padding-top: 0px;
+
+  &.v-locale--is-ltr.v-switch .v-selection-control__input,
+  &.v-locale--is-ltr .v-switch .v-selection-control__input {
+    transform: translateX(-8px);
+  }
+  &.v-locale--is-ltr.v-switch .v-selection-control--dirty .v-selection-control__input,
+  &.v-locale--is-ltr .v-switch .v-selection-control--dirty .v-selection-control__input {
+    transform: translateX(8px);
+  }
+  .v-input__control {
+    .v-selection-control {
+      --v-selection-control-size: 24px;
+      .v-selection-control__wrapper {
+        margin-right: 8px;
+        .v-switch__track {
+          height: var(--v-selection-control-size);
+          min-width: 40px;
+          background: rgb(var(--v-theme-disabled));
+          opacity: 1;
+        }
+        .v-selection-control__input {
+          &::before {
+            content: none;
+          }
+          .v-switch__thumb {
+            background: #fff;
+            transform: scale(0.8);
+            height: var(--v-selection-control-size);
+            width: var(--v-selection-control-size);
+          }
+        }
+      }
+    }
+  }
+}

package/src/assets/scss/overlay.scss

@@ -0,0 +1,69 @@
+.f-menu.v-menu {
+  .v-overlay__content {
+    background: rgb(var(--v-theme-background));
+    color: rgb(var(--v-theme-subTitle));
+    border-radius: 5.8px;
+    box-shadow: var(--f-box-shadow);
+    scrollbar-width: thin;
+    .v-card,
+    .v-sheet,
+    .v-list {
+      background: rgb(var(--v-theme-background));
+      box-shadow: none;
+      scrollbar-width: thin;
+    }
+    .v-list {
+      padding: 0;
+      .v-list-item {
+        min-height: 40px;
+        .v-list-item__content {
+          .v-list-item-title {
+            font-size: 0.9em;
+            line-height: 1.1em;
+            font-weight: 500;
+            letter-spacing: normal;
+            color: rgb(var(--v-theme-subTitle));
+          }
+        }
+        &.v-list-item--active {
+          .v-list-item__overlay {
+            background: rgb(var(--v-theme-primary));
+          }
+        }
+      }
+    }
+  }
+}
+
+.f-tooltip.v-tooltip {
+  .v-overlay__content {
+    background: rgb(var(--v-theme-background));
+    color: rgb(var(--v-theme-subTitle));
+    border-radius: 5.8px;
+    box-shadow: var(--f-box-shadow);
+    padding: 8px;
+    font-size: 0.9em;
+    line-height: 1em;
+    font-weight: 600;
+  }
+}
+
+.f-menu .v-overlay__content.v-autocomplete__content {
+  .v-list {
+    .v-list-item {
+      min-height: 28px;
+      .f-checkbox {
+        .f-icon {
+          height: 16px;
+          width: 16px;
+          min-width: 16px;
+          min-height: 16px;
+        }
+      }
+      .v-list-item__content {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}

package/src/assets/scss/skeleton.scss

@@ -0,0 +1,22 @@
+.f-skeleton-loader.v-skeleton-loader {
+  background: transparent;
+  .v-skeleton-loader__text {
+    margin: 4px 8px;
+  }
+
+  .v-skeleton-loader__image {
+    height: inherit;
+    border-radius: inherit;
+  }
+
+  .v-skeleton-loader__avatar,
+  .v-skeleton-loader__button {
+    min-height: inherit;
+    min-width: inherit;
+    max-width: inherit;
+    max-height: inherit;
+    height: inherit;
+    width: inherit;
+    margin: 0;
+  }
+}

package/src/assets/scss/tables.scss

@@ -0,0 +1,143 @@
+// todo describe table styles
+
+// .fbpm-table.v-data-table {
+//   width: 100%;
+//   .v-data-table__wrapper {
+//     overflow-x: hidden;
+//     scrollbar-width: thin;
+//     &::-webkit-scrollbar {
+//       width: 2.5px;
+//     }
+//     &::-webkit-scrollbar-track {
+//       box-shadow: inset 0 0 6px rgb(var(--v-theme-line));
+//     }
+//     &::-webkit-scrollbar-thumb {
+//       border-top: 1px solid rgba(0, 0, 0, 0);
+//       border-bottom: 1px solid rgba(0, 0, 0, 0);
+//       background-clip: padding-box;
+//       border-radius: 20px;
+//       height: 50px;
+//       background-color: rgb(var(--v-theme-primary));
+//     }
+//   }
+//   &.darken table {
+//     tbody {
+//       tr {
+//         &:nth-child(odd) {
+//           background: var(--v-background3-base);
+//           &:hover {
+//             background: var(--v-background4-base) !important;
+//           }
+//         }
+//         &:nth-child(even) {
+//           background: var(--v-background4-base);
+//           &:hover {
+//             background: var(--v-background3-base) !important;
+//           }
+//         }
+//       }
+//     }
+//   }
+//   table {
+//     width: 100%;
+//     .fbpm-table__header,
+//     .v-data-table-header {
+//       tr {
+//         th {
+//           color: rgb(var(--v-theme-text)) !important;
+//           font-weight: normal;
+//           line-height: 1;
+//           font-size: 0.8em;
+//           padding: 4px 4px 10px 4px;
+//           height: 24px;
+//           box-shadow: none;
+//           background: var(--v-background2-base);
+//           .v-data-table-header__icon {
+//             -webkit-mask: url("~@/assets/icons/arrow-icon.svg") no-repeat;
+//             mask: url("~@/assets/icons/arrow-icon.svg") no-repeat;
+//             mask-size: contain;
+//             width: 15px;
+//             height: 15px;
+//             transform: rotate(-90deg);
+//             &::after,
+//             &::before {
+//               content: none;
+//             }
+//           }
+//           &.asc .v-data-table-header__icon {
+//             transform: rotate(-90deg);
+//             background-color: rgb(var(--v-theme-title)) !important;
+//           }
+//           &.desc .v-data-table-header__icon {
+//             transform: rotate(-270deg);
+//             background-color: rgb(var(--v-theme-title)) !important;
+//           }
+//           &.active {
+//             font-weight: bold;
+//             color: rgb(var(--v-theme-subTitle)) !important;
+//           }
+//         }
+//       }
+//     }
+//     tbody {
+//       width: 100%;
+//       tr {
+//         position: relative;
+//         z-index: 1;
+//         td {
+//           padding: 17px 0 9px 4px;
+//           font-size: 0.9em;
+//           line-height: 1em;
+//           border: none !important;
+//           height: 40px;
+//           min-width: 100px;
+//           &.fbpm-table__check-box {
+//             width: 40px;
+//             min-width: 40px;
+//             padding: 12px;
+//             border-bottom: none !important;
+//             .v-input--selection-controls__input {
+//               margin: 0;
+//             }
+//           }
+//           &.fbpm-table__avatar {
+//             padding: 6px 0 0 0;
+//             width: 20px;
+//             min-width: 20px;
+//             line-height: 1;
+//           }
+//         }
+
+//         &:nth-child(odd) {
+//           background: var(--v-background5-base);
+//           &:hover {
+//             background: var(--v-background6-base) !important;
+//           }
+//         }
+//         &:nth-child(even) {
+//           background: var(--v-background6-base);
+//           &:hover {
+//             background: var(--v-background5-base) !important;
+//           }
+//         }
+//         &.fbpm-table__row-hover:hover,
+//         &.fbpm-table__row-selected {
+//           background: rgb(var(--v-theme-background)) !important;
+//           cursor: pointer;
+//           &::after {
+//             content: "";
+//             height: 100%;
+//             width: 100%;
+//             z-index: -1;
+//             display: block;
+//             position: absolute;
+//             top: 0;
+//             left: 0;
+//             background: rgb(var(--v-theme-primary));
+//             opacity: 0.4;
+//           }
+//         }
+//       }
+//     }
+//   }
+// }

package/src/assets/scss/tabs.scss

@@ -0,0 +1,42 @@
+.f-tabs {
+  &.v-tabs {
+    height: auto;
+    .v-slide-group__next,
+    .v-slide-group__prev {
+      flex: 0 1 var(--v-tabs-height);
+      min-width: var(--v-tabs-height);
+    }
+    .v-slide-group__container {
+      &::after {
+        content: '';
+        display: block;
+        position: absolute;
+        bottom: 0;
+        height: 1px;
+        width: 100%;
+        background: rgb(var(--v-theme-line));
+        transform: scaleY(1);
+        transform-origin: bottom;
+      }
+      .v-slide-group__content {
+        .v-btn {
+          display: flex;
+          align-items: flex-end;
+          padding-bottom: 4px;
+          border-radius: 0 !important;
+          .v-btn__overlay {
+            background-color: currentColor;
+          }
+          .v-btn__content {
+            padding: 0 4px;
+          }
+        }
+        .v-tab--selected {
+          .v-btn__content {
+            font-weight: 600;
+          }
+        }
+      }
+    }
+  }
+}