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

package/src/assets/scss/buttons.scss

@@ -0,0 +1,60 @@
+// Global button styles with theme support
+
+.f-btn.v-btn {
+  --v-btn-size: 1em;
+  --v-btn-height: 40px;
+  letter-spacing: 0.03em;
+  font-weight: 600;
+  text-transform: none;
+
+  // Size variants
+  &.v-btn--size-x-small {
+    --v-btn-height: 24px;
+  }
+
+  &.v-btn--size-small {
+    --v-btn-height: 32px;
+  }
+
+  &.v-btn--size-large {
+    --v-btn-height: 48px;
+  }
+
+  &.v-btn--size-x-large {
+    --v-btn-height: 56px;
+  }
+
+  &.v-btn--variant-outlined {
+    border: 0.5px solid currentColor;
+  }
+
+  // Background color depends on the theme
+  &:not([class*='bg-']):not(.v-btn--variant-outlined):not(.v-btn--variant-text):not(.v-btn--variant-plain) {
+    .v-theme--light & {
+      background-color: rgb(var(--v-theme-title));
+      color: #ffffff;
+    }
+
+    .v-theme--dark & {
+      background-color: rgb(var(--v-theme-primary));
+      color: #ffffff;
+    }
+  }
+
+  &.v-btn--variant-outlined:not([class*='text-']) {
+    .v-theme--light & {
+      color: rgb(var(--v-theme-title));
+    }
+
+    .v-theme--dark & {
+      color: #ffffff;
+    }
+  }
+
+  &.v-btn--variant-text {
+    font-weight: 500;
+    .v-btn__overlay {
+      background-color: transparent;
+    }
+  }
+}

package/src/assets/scss/card.scss

@@ -0,0 +1,11 @@
+.f-card.v-card {
+  &.v-card--hover:hover {
+    box-shadow: var(--f-box-shadow);
+  }
+}
+
+.v-sheet,
+.v-card {
+  background: rgb(var(--v-theme-background));
+  color: rgb(var(--v-theme-text));
+}

package/src/assets/scss/expansion.scss

@@ -0,0 +1,45 @@
+.f-expansion-panel {
+  &.v-expansion-panel {
+    background: transparent;
+    color: var(--v-theme-subTitle);
+    overflow-x: hidden;
+    &::after {
+      content: none;
+    }
+    &.v-expansion-panel--active,
+    &.v-expansion-panel--active + .v-expansion-panel {
+      margin-top: 0;
+    }
+    .v-expansion-panel__shadow {
+      display: none;
+    }
+    .v-expansion-panel-title {
+      min-height: auto;
+      font-size: 1em;
+      padding: 15px 12px 10px 4px;
+      color: var(--v-theme-title);
+      &:focus-visible {
+        .v-expansion-panel-title__overlay {
+          opacity: 0;
+        }
+      }
+      &:hover {
+        .v-expansion-panel-title__overlay {
+          opacity: 0;
+        }
+      }
+      .v-expansion-panel-title__icon {
+        margin-inline-start: 12px;
+        margin-bottom: 0;
+        margin-top: 0;
+        margin-inline-end: auto;
+      }
+    }
+    .v-expansion-panel-text {
+      .v-expansion-panel-text__wrapper {
+        padding: 10px 20px;
+        color: var(--v-theme-subTitle);
+      }
+    }
+  }
+}

package/src/assets/scss/icons.scss

@@ -0,0 +1,273 @@
+// Force BPM custom icons
+.f-icon,
+.f-icon.v-icon {
+  display: inline-block;
+  min-height: 20px;
+  min-width: 20px;
+  height: 20px;
+  width: 20px;
+  font-style: normal;
+  &.pass-eye-close {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/pass-eye-close.svg') no-repeat;
+    mask: url('./../icons/pass-eye-close.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.pass-eye-open {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/pass-eye-open.svg') no-repeat;
+    mask: url('./../icons/pass-eye-open.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.chevron-up {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/chevron.svg') no-repeat;
+    mask: url('./../icons/chevron.svg') no-repeat;
+    mask-size: contain;
+    transform: rotate(-180deg);
+    mask-position: center;
+    transition: linear 0.1s;
+  }
+  &.chevron-right {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/chevron.svg') no-repeat;
+    mask: url('./../icons/chevron.svg') no-repeat;
+    mask-size: contain;
+    transform: rotate(-90deg);
+    mask-position: center;
+    transition: linear 0.1s;
+  }
+  &.chevron-down {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/chevron.svg') no-repeat;
+    mask: url('./../icons/chevron.svg') no-repeat;
+    mask-size: contain;
+    transform: rotate(0deg);
+    mask-position: center;
+    transition: linear 0.1s;
+  }
+  &.chevron-left {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/chevron.svg') no-repeat;
+    mask: url('./../icons/chevron.svg') no-repeat;
+    mask-size: contain;
+    transform: rotate(90deg);
+    mask-position: center;
+    transition: linear 0.1s;
+  }
+  &.radio-true {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/radio-true.svg') no-repeat;
+    mask: url('./../icons/radio-true.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.radio-false {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/radio-false.svg') no-repeat;
+    mask: url('./../icons/radio-false.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.color-radio-active {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/color-radio-active.svg') no-repeat;
+    mask: url('./../icons/color-radio-active.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.color-radio {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/color-radio.svg') no-repeat;
+    mask: url('./../icons/color-radio.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.checkbox-true {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/checkbox-true.svg') no-repeat;
+    mask: url('./../icons/checkbox-true.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.checkbox-false {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/checkbox-false.svg') no-repeat;
+    mask: url('./../icons/checkbox-false.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.check {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/check.svg') no-repeat;
+    mask: url('./../icons/check.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.times {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/times.svg') no-repeat;
+    mask: url('./../icons/times.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.sort {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/sort.svg') no-repeat;
+    mask: url('./../icons/sort.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.sort-solid {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/sort-solid.svg') no-repeat;
+    mask: url('./../icons/sort-solid.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.filter {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/filter.svg') no-repeat;
+    mask: url('./../icons/filter.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.star {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/star.svg') no-repeat;
+    mask: url('./../icons/star.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.star-line {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/star-line.svg') no-repeat;
+    mask: url('./../icons/star-line.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.star.star-loading,
+  &.star-line.star-loading {
+    animation: rotation 1s infinite linear;
+  }
+  @keyframes rotation {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(359deg);
+    }
+  }
+  &.search {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/search.svg') no-repeat;
+    mask: url('./../icons/search.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.dots {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/dots.svg') no-repeat;
+    mask: url('./../icons/dots.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+    height: 18px;
+    width: 5px;
+  }
+  &.ctx-link {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/ctx-link.svg') no-repeat;
+    mask: url('./../icons/ctx-link.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.ctx-pen {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/ctx-pen.svg') no-repeat;
+    mask: url('./../icons/ctx-pen.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.ctx-delete {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/ctx-delete.svg') no-repeat;
+    mask: url('./../icons/ctx-delete.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.ctx-arrow-next {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/ctx-arrow.svg') no-repeat;
+    mask: url('./../icons/ctx-arrow.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.ctx-more {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/ctx-more.svg') no-repeat;
+    mask: url('./../icons/ctx-more.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.bell {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/bell.svg') no-repeat;
+    mask: url('./../icons/bell.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.bell-mute {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/bell-mute.svg') no-repeat;
+    mask: url('./../icons/bell-mute.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.open-envelope {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/open-envelope.svg') no-repeat;
+    mask: url('./../icons/open-envelope.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.folder {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/folder.svg') no-repeat;
+    mask: url('./../icons/folder.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.plus {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/plus.svg') no-repeat;
+    mask: url('./../icons/plus.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.plus-solid {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/plus-solid.svg') no-repeat;
+    mask: url('./../icons/plus-solid.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+  &.delete {
+    background-color: rgb(var(--v-theme-primary));
+    -webkit-mask: url('./../icons/delete.svg') no-repeat;
+    mask: url('./../icons/delete.svg') no-repeat;
+    mask-size: contain;
+    mask-position: center;
+  }
+}
+
+@media screen and (max-width: 1280px) {
+  .f-icon,
+  .f-icon.v-icon {
+    min-height: 18px;
+    min-width: 18px;
+    height: 18px;
+    width: 18px;
+  }
+}

package/src/assets/scss/index.scss

@@ -0,0 +1,10 @@
+@use 'icons';
+@use 'utilities';
+@use 'overlay';
+@use 'buttons';
+@use 'input';
+@use 'tabs';
+@use 'expansion';
+@use 'skeleton';
+@use 'card';
+// @use 'tables';