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

package/index.js

@@ -27,6 +27,8 @@ export { default as FMenuDatePicker } from './src/f-date-picker/FMenuDatePicker.
 export { default as FTextFieldDate } from './src/f-date-picker/FTextFieldDate.vue'
 export { default as FUserGroupPicker } from './src/FUserGroupPicker.vue'
 export { default as FLangSwitcher } from './src/FLangSwitcher.vue'
+export { default as FActionSnackbar } from './src/FActionSnackbar.vue'
+export { default as FPagination } from './src/FPagination.vue'
 
 // Utils
 export { hexToRGBA, createRadialGradient } from './src/utils/color.js'

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@it-enterprise/forcebpm-ui-kit",
-  "version": "1.0.2-beta.29",
+  "version": "1.0.2-beta.30",
   "description": "FBPM UI Kit",
   "author": "it-enterprise",
   "license": "MIT",

package/src/FActionSnackbar.vue

@@ -0,0 +1,107 @@
+<script setup>
+// FActionSnackbar
+import { computed } from 'vue'
+
+const props = defineProps({
+  actions: {
+    type: Array,
+    default: () => []
+    // Example of list item:
+    //   {
+    //     text: 'Button Text',
+    //     action: () => {},
+    //     icon: 'fire',
+    //     size: 20, // optional, default is 20
+    //     hide: false, // optional setting to hide button without removing it from the list
+    //     disabled: false // optional setting to disable button
+    //   }
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  tooltipProps: {
+    type: Object,
+    default: () => ({
+      location: 'top'
+    })
+  }
+})
+
+const state = defineModel({
+  type: Boolean,
+  default: false
+})
+
+const loaderItems = computed(() => {
+  const visibleCount = props.actions.filter(action => !action.hide).length
+  return Array.from({ length: visibleCount }, (_, i) => i)
+})
+</script>
+
+<template>
+  <v-snackbar class="f-action-snackbar" position="absolute" :model-value="state" rounded="lg" :timeout="-1">
+    <!-- Loading -->
+    <div v-if="loading" class="d-flex">
+      <v-skeleton-loader v-for="i in loaderItems" :key="i" type="button" height="40" width="60" class="f-skeleton-loader" />
+    </div>
+
+    <!-- Actions -->
+    <template v-else>
+      <v-tooltip v-for="(btn, idx) in props.actions" :key="idx" :text="btn.text" v-bind="tooltipProps">
+        <template #activator="{ props: propsTooltip }">
+          <v-btn v-if="!btn.hide" v-bind="propsTooltip" variant="text" width="60" :disabled="btn.disabled" @click="btn.action">
+            <FIcon :icon="btn.icon" :size="btn.size || 20" color="white" />
+          </v-btn>
+        </template>
+      </v-tooltip>
+    </template>
+  </v-snackbar>
+</template>
+
+<style lang="scss" scoped>
+.f-action-snackbar {
+  bottom: 8%;
+  :deep(.v-snackbar__wrapper) {
+    min-height: 0;
+    min-width: min-content;
+    background-color: rgb(var(--v-theme-title-dark));
+    box-shadow: var(--f-box-shadow);
+  }
+  :deep(.v-snackbar__content) {
+    padding: 0;
+    .v-btn {
+      .v-btn__underlay {
+        transition: background-color 0.3s ease-in-out;
+      }
+      &:hover {
+        .v-btn__underlay {
+          background-color: rgba(255, 255, 255, 0.08);
+        }
+      }
+    }
+    .v-skeleton-loader:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      .v-skeleton-loader__button {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+    .v-skeleton-loader:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      .v-skeleton-loader__button {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+    .v-skeleton-loader:not(.v-skeleton-loader:first-child, .v-skeleton-loader:last-child) {
+      border-radius: 0;
+      .v-skeleton-loader__button {
+        border-radius: 0;
+      }
+    }
+  }
+}
+</style>

package/src/FContextMenu.vue

@@ -64,7 +64,7 @@ const isEmpty = computed(() => !props.list.length || props.list.every(el => el.h
       </v-tooltip>
     </template>
 
-    <v-list>
+    <v-list class="f-context-menu-list">
       <template v-for="(item, idx) in list">
         <template v-if="!item.hide">
           <!-- Divider top -->
@@ -85,40 +85,3 @@ const isEmpty = computed(() => !props.list.length || props.list.every(el => el.h
     </v-list>
   </v-menu>
 </template>
-
-<style lang="scss" scoped>
-.f-menu {
-  .f-context-menu-content {
-    .v-list {
-      padding: 12px 6px;
-      overflow-x: hidden;
-      .v-list-item {
-        padding: 4px 6px;
-        min-height: auto;
-        :deep(.v-list-item__overlay) {
-          border-radius: 5.8px;
-          background: rgb(var(--v-theme-primary));
-        }
-        &:hover {
-          :deep(.v-list-item__overlay) {
-            opacity: 0.15;
-          }
-        }
-        .v-list-item__content {
-          .v-list-item-title {
-            display: flex;
-            align-items: center;
-            font-weight: 600;
-            font-size: 1em;
-          }
-        }
-      }
-      .v-divider {
-        position: relative;
-        min-width: calc(100% + 12px);
-        left: -6px;
-      }
-    }
-  }
-}
-</style>

package/src/FPagination.vue

@@ -0,0 +1,163 @@
+<script setup>
+// FPagination
+import { computed, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const props = defineProps({
+  length: {
+    type: Number,
+    default: 1
+  },
+  total: {
+    type: Number,
+    default: 0
+  },
+  itemsPerPageOptions: {
+    type: Array,
+    default: () => [18, 36, 72, -1],
+    validator: value => {
+      return value.every(number => typeof number === 'number')
+    }
+  },
+  itemsPerPageText: {
+    type: String,
+    default: ''
+  }
+})
+
+const page = defineModel('page', {
+  type: Number,
+  default: 1
+})
+const itemsPerPage = defineModel('itemsPerPage', {
+  type: Number,
+  default: 18
+})
+
+const itemCountBtnRef = useTemplateRef('item-count-btn')
+
+const itemsCountLabel = computed(() => {
+  const label = props.itemsPerPageText || t('pagination.itemsPerPage')
+  const count = itemsPerPage.value === -1 || props.length === 1 ? t('pagination.all') : itemsPerPage.value
+  return `${label} ${count} ${t('pagination.of')} ${props.total}`
+})
+
+const offset = computed(() => {
+  return itemCountBtnRef.value ? -itemCountBtnRef.value.$el.offsetWidth : 0
+})
+
+const changeItemsPerPage = number => {
+  itemsPerPage.value = number
+  page.value = 1
+}
+</script>
+
+<template>
+  <div class="f-pagination d-flex">
+    <!-- Pagination -->
+    <v-pagination
+      v-if="itemsPerPage !== -1 && length > 1"
+      v-model="page"
+      :length="length"
+      :total-visible="7"
+      color="secondary"
+      class="ml-auto"
+      next-icon="chevron-right bg-secondary"
+      prev-icon="chevron-left bg-secondary"
+      :style="`margin-right: ${offset}px`"
+    />
+
+    <!-- Items Per Page -->
+    <div class="d-flex flex-column flex-end ml-auto f-pagination--items-per-page">
+      <span v-if="!length" class="text-secondary f-pagination--items-per-page-text">
+        {{ props.itemsPerPageText || t('pagination.itemsPerPage') }}: {{ $t('pagination.all') }}
+      </span>
+
+      <v-menu v-else>
+        <template #activator="{ props: propsMenu }">
+          <v-btn v-bind="propsMenu" ref="item-count-btn" variant="text" height="22" color="secondary" class="pa-0 f-pagination--item-count-btn">
+            {{ itemsCountLabel }}
+            <FIcon icon="chevron-down" color="secondary" size="16" class="ml-1" />
+          </v-btn>
+        </template>
+
+        <v-list>
+          <v-list-item v-for="(number, idx) in itemsPerPageOptions" :key="idx" :active="number === itemsPerPage" @click="changeItemsPerPage(number)">
+            <v-list-item-title>
+              {{ number === -1 ? $t('pagination.all') : number }}
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.f-pagination {
+  .v-pagination {
+    :deep(.v-pagination__list) {
+      .v-pagination__item,
+      .v-pagination__first,
+      .v-pagination__prev,
+      .v-pagination__next,
+      .v-pagination__last {
+        margin: 0;
+        .v-btn {
+          min-width: 22px;
+          width: 22px;
+          height: 22px;
+          border-radius: 4px;
+        }
+      }
+      .v-pagination__prev,
+      .v-pagination__next {
+        .v-btn {
+          border: 1px solid rgb(var(--v-theme-secondary));
+        }
+        .f-icon {
+          min-height: 12px;
+          min-width: 12px;
+          width: 12px;
+          height: 12px;
+        }
+      }
+      .v-pagination__next {
+        margin-left: 12px;
+      }
+      .v-pagination__prev {
+        margin-right: 12px;
+      }
+      .v-pagination__item {
+        margin: 0 2px;
+        .v-btn {
+          font-size: 0.9em;
+        }
+        &.v-pagination__item--is-active {
+          .v-btn {
+            background: rgb(var(--v-theme-secondary));
+            .v-btn__content {
+              color: white;
+            }
+          }
+        }
+      }
+    }
+  }
+  .f-pagination--items-per-page {
+    .f-pagination--items-per-page-text {
+      line-height: 22px;
+    }
+    .f-pagination--item-count-btn {
+      margin-left: -1px;
+    }
+    .v-list-item--active {
+      .v-list-item-title {
+        font-weight: 500;
+      }
+    }
+  }
+}
+</style>

package/src/assets/icons/delete.svg

@@ -0,0 +1,6 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.95427 2.17569V0H4.69795V2.17569H0V2.9651H1.38628L2.38748 16H12.284L13.2852 2.9651H14.8833V2.17569H9.95427ZM9.18412 0.770156V2.15644H5.48737V0.770156H9.18412ZM12.4958 2.92659L11.5523 15.1721H3.09988L2.17569 2.92659H12.4958Z" fill="#5E5CE6"/>
+<path d="M7.72007 5.02527H6.93066V13.1697H7.72007V5.02527Z" fill="#5E5CE6"/>
+<path d="M10.3283 5.03313L9.54004 4.99042L9.09837 13.1418L9.8866 13.1845L10.3283 5.03313Z" fill="#5E5CE6"/>
+<path d="M5.54505 13.1455L5.10352 4.99408L4.31529 5.03678L4.75682 13.1882L5.54505 13.1455Z" fill="#5E5CE6"/>
+</svg>

package/src/assets/icons/folder.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="&#208;&#152;&#209;&#129;&#209;&#133;&#208;&#190;&#208;&#180;&#209;&#143;&#209;&#137;&#208;&#184;&#208;&#181; &#208;&#180;&#208;&#190;&#208;&#186;&#209;&#131;&#208;&#188;&#208;&#181;&#208;&#189;&#209;&#130;&#209;&#139;" d="M14.8981 0.00134478C14.9857 -0.00339847 15.0717 0.0284092 15.135 0.0903504C15.1981 0.151176 15.231 0.236833 15.2254 0.323885L15.0552 2.98596H15.6858C15.8666 2.99545 16.0078 3.15198 15.9997 3.33278V3.33752L15.2391 12.8246C15.2248 12.9903 15.0817 13.1178 14.9157 13.1131H1.06877C0.903036 13.1189 0.758786 12.992 0.744277 12.8265L0.0009827 3.34143C-0.00599266 3.2513 0.0244199 3.16258 0.084129 3.09534C0.14328 3.02837 0.227821 2.98819 0.317664 2.98596H0.748183V1.75858C0.75767 1.5814 0.901083 1.43715 1.07826 1.42739H7.47327L9.53239 0.0404069C9.60857 -0.0112108 9.68195 0.00134478 9.71292 0.00134478H14.8981ZM14.5627 0.643915H9.81141L7.75228 2.03034C7.67667 2.0814 7.60357 2.06996 7.57176 2.06996H1.39047V2.98596H14.4124L14.5627 0.643915ZM15.3314 3.62853H0.668943L1.36174 12.4711H14.6225L15.3314 3.62853Z" fill="#888EA4"/>
+</svg>

package/src/assets/icons/plus-solid.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 10.6068H10.6066V0.000156449" stroke="#97A7C8" stroke-width="2"/>
+<path d="M21.2129 10.6068H10.6063V21.2134" stroke="#97A7C8" stroke-width="2"/>
+</svg>

package/src/assets/icons/plus.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 8H8V2.73828e-07" stroke="#97A7C8"/>
+<path d="M15.9999 8H7.99988V16" stroke="#97A7C8"/>
+</svg>

package/src/assets/icons/radio-false.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <circle cx="8" cy="8" r="7.75" fill="none" stroke="#888EA4" stroke-width="0.5"/>
 </svg>

package/src/assets/icons/radio-true.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <circle cx="8" cy="8" r="7.75" fill="none" stroke="#97B960" stroke-width="0.5"/>
     <circle cx="8" cy="8" r="4" fill="#97B960"/>
 </svg>

package/src/assets/icons/sort-solid.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.320068 9.40088L1.82007 10.6509M1.82007 10.6509L3.32007 9.40088M1.82007 10.6509V0.650879M8.82007 1.90088L7.32007 0.650879M7.32007 0.650879L5.82007 1.90088M7.32007 0.650879V10.6509" stroke="#888EA4"/>
+</svg>

package/src/assets/icons/sort.svg

@@ -1,6 +1,6 @@
-<svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 9.75L2.5 11L4 9.75" stroke="#3B3B47"/>
-<path d="M2.5 1L2.5 11" stroke="#3B3B47"/>
-<path d="M9.5 2.25L8 1L6.5 2.25" stroke="#3B3B47"/>
-<path d="M8 11L8 1" stroke="#3B3B47"/>
+<svg width="15" height="17" viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.224121 14.4561L2.62412 16.4561L5.02412 14.4561" stroke="#888EA4" stroke-width="0.7"/>
+<path d="M2.62402 0.456055L2.62402 16.4561" stroke="#888EA4" stroke-width="0.7"/>
+<path d="M13.8247 2.45605L11.4247 0.456055L9.02471 2.45605" stroke="#888EA4" stroke-width="0.7"/>
+<path d="M11.4248 16.4561L11.4248 0.456054" stroke="#888EA4" stroke-width="0.7"/>
 </svg>

package/src/assets/scss/icons.scss

@@ -120,6 +120,13 @@
     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;
@@ -177,21 +184,21 @@
     mask-position: center;
   }
   &.ctx-pen {
-    background-color: rgb(var(--v-primary-base));
+    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-primary-base));
+    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-primary-base));
+    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;
@@ -225,6 +232,34 @@
     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) {

package/src/assets/scss/index.scss

@@ -7,6 +7,4 @@
 @use 'expansion';
 @use 'skeleton';
 @use 'card';
-@use 'pagination';
-@use 'snackbar';
 // @use 'tables';

package/src/assets/scss/overlay.scss

@@ -22,6 +22,12 @@
             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));
           }
         }
       }

package/src/assets/scss/skeleton.scss

@@ -6,9 +6,11 @@
 
   .v-skeleton-loader__image {
     height: inherit;
+    border-radius: inherit;
   }
 
-  .v-skeleton-loader__avatar {
+  .v-skeleton-loader__avatar,
+  .v-skeleton-loader__button {
     min-height: inherit;
     min-width: inherit;
     max-width: inherit;

package/src/assets/scss/tabs.scss

@@ -28,10 +28,7 @@
             background-color: currentColor;
           }
           .v-btn__content {
-            .v-tab__slider {
-              // height: 0;
-              // opacity: 0;
-            }
+            padding: 0 4px;
           }
         }
         .v-tab--selected {

package/src/assets/scss/utilities.scss

@@ -80,6 +80,38 @@
   }
 }
 
+.f-menu.v-menu .v-overlay__content .f-context-menu-list.v-list {
+  padding: 12px 6px;
+  overflow-x: hidden;
+  .v-list-item {
+    padding: 4px 6px;
+    min-height: auto;
+    .v-list-item__overlay {
+      border-radius: 5.8px;
+      background: rgb(var(--v-theme-primary));
+    }
+    &:hover {
+      .v-list-item__overlay {
+        opacity: 0.15;
+      }
+    }
+    .v-list-item__content {
+      .v-list-item-title {
+        display: flex;
+        align-items: center;
+        font-weight: 600;
+        font-size: 1em;
+        color: rgb(var(--v-theme-subTitle));
+      }
+    }
+  }
+  .v-divider {
+    position: relative;
+    min-width: calc(100% + 12px);
+    left: -6px;
+  }
+}
+
 .v-virtual-scroll {
   &::-webkit-scrollbar {
     width: 6px;

package/src/f-toolbar/FSortPanel.vue

@@ -20,7 +20,7 @@ const modelValue = defineModel({
       <v-tooltip :text="$t('tooltip.sort')">
         <template #activator="{ props: tooltipProps }">
           <v-btn class="f-sort-panel-activator" variant="text" size="30" v-bind="mergeProps(menuProps, tooltipProps)">
-            <v-badge dot color="primary" :model-value="badge" offset-x="-4" offset-y="-2">
+            <v-badge dot color="primary" :model-value="badge" offset-x="-2" offset-y="-2">
               <FIcon icon="sort" color="text" size="18" />
             </v-badge>
           </v-btn>
@@ -32,7 +32,7 @@ const modelValue = defineModel({
     <div>
       <!-- Sort header -->
       <div class="f-sort-panel-header d-flex align-end pa-3 text-uppercase text-subTitle">
-        <FIcon icon="sort" color="text" size="14" class="mr-2" />
+        <FIcon icon="sort-solid" color="text" size="14" class="mr-2" />
         <span class="lh-1">{{ $t('tooltip.sort') }}</span>
       </div>
 
@@ -45,3 +45,11 @@ const modelValue = defineModel({
     </div>
   </v-menu>
 </template>
+
+<style lang="scss" scoped>
+:deep(.f-sort-panel-body) {
+  .f-radio .v-selection-control__wrapper .v-selection-control__input .f-icon {
+    --v-selection-control-size: 16px;
+  }
+}
+</style>

package/src/locales/en.json

@@ -105,5 +105,11 @@
     "yFormat": "yyyy",
     "hFormat": "hh",
     "minFormat": "mm"
+  },
+  "pagination": {
+    "itemsPerPage": "Items per page",
+    "total": "Total items",
+    "of": "of",
+    "all": "All"
   }
 }

package/src/locales/ru.json

@@ -106,5 +106,11 @@
     "yFormat": "гггг",
     "hFormat": "чч",
     "minFormat": "мм"
+  },
+  "pagination": {
+    "itemsPerPage": "Элементов на странице",
+    "total": "Всего элементов",
+    "of": "из",
+    "all": "Все"
   }
 }

package/src/locales/uk.json

@@ -106,5 +106,11 @@
     "yFormat": "рррр",
     "hFormat": "гг",
     "minFormat": "хх"
+  },
+  "pagination": {
+    "itemsPerPage": "Елементів на сторінці",
+    "total": "Всього елементів",
+    "of": "з",
+    "all": "Всі"
   }
 }

package/src/assets/scss/pagination.scss

@@ -1,80 +0,0 @@
-// todo f-pagination styles
-.app-pagination {
-  .v-theme--light.v-pagination .v-pagination__item {
-    color: rgb(var(--v-theme-secondary));
-    background-color: rgb(var(--v-theme-fields));
-    margin: 0 2px;
-  }
-  .v-theme--light.v-pagination .v-pagination__item--is-active {
-    color: rgb(var(--v-theme-fields));
-    background-color: rgb(var(--v-theme-secondary)) !important;
-    border-color: rgb(var(--v-theme-secondary)) !important;
-  }
-  .v-theme--dark.v-pagination .v-pagination__item {
-    color: rgb(var(--v-theme-secondary));
-    background-color: rgb(var(--v-theme-fields));
-    margin: 0 2px;
-  }
-  .v-theme--dark.v-pagination .v-pagination__item--is-active {
-    color: rgb(var(--v-theme-fields));
-    background-color: rgb(var(--v-theme-secondary)) !important;
-    border-color: rgb(var(--v-theme-secondary)) !important;
-  }
-  .v-pagination {
-    display: flex;
-    justify-content: center;
-    min-width: 320px;
-    max-width: 320px;
-    height: 40px;
-    .v-pagination__list {
-      align-items: center;
-      li {
-        height: 20px;
-        width: 20px;
-        border: 1px solid transparent;
-        border-radius: 3px;
-        button {
-          height: 20px;
-          min-height: 20px !important;
-          width: auto;
-          padding: 0 2px 2px 0 !important;
-          min-width: 20px !important;
-          font-size: 0.65em;
-          box-shadow: none;
-        }
-        button[ellipsis='true'] {
-          font-size: 1em !important;
-          color: rgb(var(--v-theme-secondary));
-        }
-        &.v-pagination__prev {
-          .v-btn {
-            border: 1px solid rgb(var(--v-theme-secondary));
-            margin: 0;
-          }
-          background-color: rgb(var(--v-theme-fields));
-          margin: 0 10px;
-          i {
-            background: rgb(var(--v-theme-secondary)) !important;
-            height: 8px !important;
-            min-height: 8px !important;
-            margin: 2px 0 0 2px;
-          }
-        }
-        &.v-pagination__next {
-          .v-btn {
-            border: 1px solid rgb(var(--v-theme-secondary));
-            margin: 0;
-          }
-          background-color: rgb(var(--v-theme-fields));
-          margin: 0 10px;
-          i {
-            background: rgb(var(--v-theme-secondary)) !important;
-            height: 8px !important;
-            min-height: 8px !important;
-            margin: 2px 0 0 2px;
-          }
-        }
-      }
-    }
-  }
-}

package/src/assets/scss/snackbar.scss

@@ -1,36 +0,0 @@
-.fbpm-action-snackbar.v-overlay {
-  bottom: 8%;
-  .v-snackbar__wrapper {
-    background-color: rgb(var(--v-theme-title-dark));
-    min-height: 0;
-    min-width: min-content;
-  }
-  .v-snackbar__content {
-    padding: 0;
-    .v-skeleton-loader:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      .v-skeleton-loader__button {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-    .v-skeleton-loader:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      .v-skeleton-loader__button {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-    .v-skeleton-loader:not(.v-skeleton-loader:first-child, .v-skeleton-loader:last-child) {
-      border-radius: 0;
-      .v-skeleton-loader__button {
-        border-radius: 0;
-      }
-    }
-  }
-  .v-snackbar__action {
-    display: none;
-  }
-}