testio-tailwind 3.3.0 → 3.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "testio-tailwind",
-	"version": "3.3.0",
+	"version": "3.5.0",
 	"description": "Tailwind based design system for Test IO",
 	"scripts": {
 		"clean": "del dist --force",

package/src/assets/scripts/app.js

@@ -121,30 +121,36 @@ document.addEventListener("trix-before-initialize", () => {
 
 ////// ECharts //////
 
-import { colorBlueLight, colorInfo } from './modules/colors';
+import { colorBlueLight, colorInfo, colorSuccess, colorLabelBright, colorTealLight, colorLabelDark, colorValueBright, colorValueDark, colorBorderBright, colorBorderDark, colorNeutralBright, colorNeutralDark } from './modules/colors';
 import { createChartHorizontal } from './modules/echarts_horizontal';
 import { createChartDonut } from './modules/echarts_donut';
 import { createChartGauge } from './modules/echarts_gauge';
 import { createChartArea } from './modules/echarts_area';
 import { createChartVertical } from './modules/echarts_vertical';
+import { createChartLine } from './modules/echarts_line';
 
 import { echartsSeriesFew, echartsSeriesMany } from './modules/echarts_exampleseries';
 
 import { dataFeaturesFew, dataFeaturesMany, dataBugs, dataBugsFew, dataBugsCategories, dataBugsCategoriesFew, dataTestCases, dataGaugeSuccess, dataGaugeDanger, dataGaugeInfo, dataAreaValues, dataAreaMonths, dataFeaturesManyNumbers } from './modules/echarts_exampledata';
 
-createChartVertical("echarts-bar-vertical-1", dataBugs, dataBugsCategories);
-createChartVertical("echarts-bar-vertical-2", dataBugsFew, dataBugsCategoriesFew);
-createChartVertical("echarts-bar-vertical-3", dataFeaturesManyNumbers, dataFeaturesMany);
-createChartVertical("echarts-bar-vertical-1-fixed", dataBugs, dataBugsCategories, 10);
-createChartVertical("echarts-bar-vertical-2-fixed", dataBugsFew, dataBugsCategoriesFew, 10);
-createChartVertical("echarts-bar-vertical-3-fixed", dataFeaturesManyNumbers, dataFeaturesMany, 10);
-createChartHorizontal("echarts-bar-horizontal-1", dataFeaturesFew, echartsSeriesFew, false);
-createChartHorizontal("echarts-bar-horizontal-2", dataFeaturesMany, echartsSeriesMany, true);
-createChartDonut("echarts-donut-1", dataBugs, "340", "Bugs", false);
-createChartDonut("echarts-donut-2", dataBugs, "9999", "label with a lot of text to show how things break", true);
-createChartDonut("echarts-donut-testcases", dataTestCases, "100", "Test Cases", false);
-createChartGauge("echarts-gauge-1", dataGaugeSuccess);
-createChartGauge("echarts-gauge-2", dataGaugeDanger);
-createChartGauge("echarts-gauge-3", dataGaugeInfo);
-createChartArea("echarts-area-1", dataAreaMonths, dataAreaValues, colorBlueLight);
-createChartArea("echarts-area-2", dataAreaMonths, dataAreaValues, colorInfo);
+createChartVertical("echarts-bar-vertical-1", dataBugs, dataBugsCategories, colorLabelBright, colorValueBright);
+createChartVertical("echarts-bar-vertical-1-dark", dataBugs, dataBugsCategories, colorLabelDark, colorValueDark);
+createChartVertical("echarts-bar-vertical-2", dataBugsFew, dataBugsCategoriesFew, colorLabelBright, colorValueBright);
+createChartVertical("echarts-bar-vertical-3", dataFeaturesManyNumbers, dataFeaturesMany, colorLabelBright, colorValueBright);
+createChartVertical("echarts-bar-vertical-2-fixed", dataBugsFew, dataBugsCategoriesFew, colorLabelBright, colorValueBright, 10);
+createChartVertical("echarts-bar-vertical-3-fixed", dataFeaturesManyNumbers, dataFeaturesMany, colorLabelBright, colorValueBright,10);
+createChartHorizontal("echarts-bar-horizontal-1", dataFeaturesFew, echartsSeriesFew, false, colorLabelBright, colorValueBright);
+createChartHorizontal("echarts-bar-horizontal-2", dataFeaturesMany, echartsSeriesMany, true, colorLabelBright, colorValueBright);
+createChartHorizontal("echarts-bar-horizontal-2-dark", dataFeaturesMany, echartsSeriesMany, true, colorLabelDark, colorValueDark);
+createChartDonut("echarts-donut-1", dataBugs, "340", "Bugs", false,  colorLabelBright, colorValueBright);
+createChartDonut("echarts-donut-2", dataBugs, "9999", "label with a lot of text to show how things break", true, colorLabelBright, colorValueBright);
+createChartDonut("echarts-donut-2-dark", dataBugs, "9999", "label with a lot of text to show how things break", true, colorLabelDark, colorValueDark);
+createChartDonut("echarts-donut-testcases", dataTestCases, "100", "Test Cases", false,  colorLabelBright, colorValueBright);
+createChartGauge("echarts-gauge-1", dataGaugeSuccess, colorLabelBright, colorValueBright, colorNeutralBright);
+createChartGauge("echarts-gauge-1-dark", dataGaugeSuccess, colorLabelDark, colorValueDark, colorNeutralDark);
+createChartGauge("echarts-gauge-2", dataGaugeDanger, colorLabelBright, colorValueBright, colorNeutralBright);
+createChartGauge("echarts-gauge-3", dataGaugeInfo, colorLabelBright, colorValueBright, colorNeutralBright);
+createChartArea("echarts-area-1", dataAreaMonths, dataAreaValues, colorBlueLight, colorLabelBright, colorValueBright, colorBorderBright);
+createChartArea("echarts-area-2", dataAreaMonths, dataAreaValues, colorTealLight, colorLabelDark, colorValueDark, colorBorderDark);
+createChartLine("echarts-line-1", dataAreaMonths, dataAreaValues, colorBlueLight, colorLabelBright, colorValueBright, colorBorderBright);
+createChartLine("echarts-line-2", dataAreaMonths, dataAreaValues, colorTealLight, colorLabelDark, colorValueDark, colorBorderDark);

package/src/assets/scripts/modules/colors.js

@@ -6,6 +6,14 @@ export const colorContent = '#326dd1';
 export const colorUX = '#263340';
 export const colorSuccess = '#8cbd24';
 export const colorDanger = '#FF3131';
-export const colorNeutral = '#e6e6e6';
+export const colorNeutralBright = '#bfc1c5';
+export const colorNeutralDark = '#343A40';
 export const colorInfo = '#326dd1';
-export const colorBlueLight = '#21bef4';
+export const colorBlueLight = '#21bef4';
+export const colorBorderBright = '#e6e6e6';
+export const colorBorderDark = '#262626';
+export const colorLabelBright = '#5f656d';
+export const colorLabelDark = '#bfc1c5';
+export const colorValueBright = '#1d1d1d';
+export const colorValueDark = '#ffffff';
+export const colorTealLight = '#6ddeba';

package/src/assets/scripts/modules/echarts_area.js

@@ -2,7 +2,7 @@
 
 import * as echarts from 'echarts';
 
-export function createChartArea (target, targetDataX, targetDataY, chartColor) {
+export function createChartArea (target, targetDataX, targetDataY, chartColor, labelColor, valueColor, borderColor) {
   var chartHeight = 190;
   var dom = document.getElementById(target);
   var myChartArea = echarts.init(dom, null, {
@@ -29,7 +29,8 @@ export function createChartArea (target, targetDataX, targetDataY, chartColor) {
       },
       axisLabel: {
         show: true,
-        margin: 15
+        margin: 15,
+        color: labelColor,
       },
       axisTick: {
         show: false
@@ -37,7 +38,8 @@ export function createChartArea (target, targetDataX, targetDataY, chartColor) {
       splitLine: {
         show: true,
         lineStyle: {
-          type: 'dashed'
+          type: 'dashed',
+          color: borderColor
         }
       }
     },
@@ -52,7 +54,8 @@ export function createChartArea (target, targetDataX, targetDataY, chartColor) {
         type: 'line',
         lineStyle: {
           width: 1,
-          color: chartColor
+          color: chartColor,
+          borderColor: borderColor
         },
         areaStyle: {
           opacity: 1,
@@ -71,10 +74,11 @@ export function createChartArea (target, targetDataX, targetDataY, chartColor) {
         itemStyle: {
           borderWidth: 2,
           color: chartColor,
-          borderColor: '#ffffff'
+          borderColor: borderColor
         },
         label: {
-          show: true
+          show: true,
+          color: valueColor,
         },
         areaStyle: {
           opacity: 0

package/src/assets/scripts/modules/echarts_donut.js

@@ -4,12 +4,26 @@ import * as echarts from 'echarts';
 import { echartsLegend, legendHeight } from './echarts_legend';
 
 var legendOptions;
-export function createChartDonut (target, targetData, valueText, labelText, showLegend) {
+export function createChartDonut (target, targetData, valueText, labelText, showLegend, labelColor, valueColor) {
   var chartHeight = 190;
   var chartPlusLegendHeight;
   if (showLegend) {
     chartPlusLegendHeight = chartHeight + legendHeight,
-    legendOptions = echartsLegend
+    legendOptions = {
+      type: echartsLegend.type,
+      orient: echartsLegend.orient,
+      padding: echartsLegend.padding,
+      icon: echartsLegend.icon,
+      itemGap: echartsLegend.itemGap,
+      itemHeight: echartsLegend.itemHeight,
+      itemWidth: echartsLegend.itemWidth,
+      height: echartsLegend.height,
+      left: echartsLegend.left,
+      bottom: echartsLegend.bottom,
+      textStyle:{
+       color:labelColor
+      },
+    }
   } else {
     chartPlusLegendHeight = chartHeight,
     legendOptions = null
@@ -37,14 +51,16 @@ export function createChartDonut (target, targetData, valueText, labelText, show
       textStyle: {
         fontSize: 60,
         lineHeight: 60,
-        fontWeight: "lighter"
+        fontWeight: "lighter",
+        color: valueColor
       },
       subtextStyle: {
         overflow: "break",
         width: 100,
         top: 50,
         fontSize: 11,
-        lineHeight: 12
+        lineHeight: 12,
+        color: labelColor
       }
     },
     tooltips: {

package/src/assets/scripts/modules/echarts_exampledata.js

@@ -1,4 +1,4 @@
-import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutral } from './colors';
+import { colorCritical, colorHigh, colorLow, colorContent, colorVisual, colorUX, colorSuccess, colorDanger, colorInfo, colorNeutralBright } from './colors';
 
 export let dataAreaValues = [
   { value: 79, name: 'Critical'},
@@ -102,5 +102,5 @@ export let dataGaugeInfo = [
 export let dataTestCases = [
   { value: 50, name: 'Passed', itemStyle: {color: colorSuccess}},
   { value: 23, name: 'Failed', itemStyle: {color: colorDanger}},
-  { value: 27, name: 'Open', itemStyle: {color: colorNeutral}},
+  { value: 27, name: 'Open', itemStyle: {color: colorNeutralBright}},
 ];

package/src/assets/scripts/modules/echarts_gauge.js

@@ -1,9 +1,8 @@
 ////// Gauge chart
 
 import * as echarts from 'echarts';
-import { colorSuccess, colorDanger, colorNeutral } from './colors';
 
-export function createChartGauge (target, targetData) {
+export function createChartGauge (target, targetData, labelColor, valueColor, neutralColor) {
   var chartHeight = 190;
   var dom = document.getElementById(target);
   var myChartGauge = echarts.init(dom, null, {
@@ -33,7 +32,7 @@ export function createChartGauge (target, targetData) {
           lineStyle: {
             width: 10,
             color: [
-              [1, colorNeutral ]
+              [1, neutralColor ]
             ]
           }
         },
@@ -53,7 +52,7 @@ export function createChartGauge (target, targetData) {
           offsetCenter: [0, 35],
           fontSize: 11,
           lineHeight: 12,
-          color: inherit,
+          color: labelColor,
         },
         detail: {
           top: 10,
@@ -61,7 +60,8 @@ export function createChartGauge (target, targetData) {
           formatter: '{value}%',
           fontSize: 60,
           lineHeight: 60,
-          fontWeight: "lighter"
+          fontWeight: "lighter",
+          color: valueColor,
         }
       }
     ]

package/src/assets/scripts/modules/echarts_horizontal.js

@@ -4,12 +4,26 @@ import * as echarts from 'echarts';
 import { echartsLegend, legendHeight } from './echarts_legend';
 
 var legendOptions;
-export function createChartHorizontal (target, targetData, targetSeries, showLegend) {
+export function createChartHorizontal (target, targetData, targetSeries, showLegend, labelColor, valueColor) {
   var chartHeight = targetData.length * 20;
   var chartPlusLegendHeight;
   if (showLegend) {
     chartPlusLegendHeight = chartHeight + legendHeight,
-    legendOptions = echartsLegend
+    legendOptions = {
+      type: echartsLegend.type,
+      orient: echartsLegend.orient,
+      padding: echartsLegend.padding,
+      icon: echartsLegend.icon,
+      itemGap: echartsLegend.itemGap,
+      itemHeight: echartsLegend.itemHeight,
+      itemWidth: echartsLegend.itemWidth,
+      height: echartsLegend.height,
+      left: echartsLegend.left,
+      bottom: echartsLegend.bottom,
+      textStyle:{
+       color:labelColor
+      },
+    }
   } else {
     chartPlusLegendHeight = chartHeight + 0,
     legendOptions = null
@@ -67,7 +81,8 @@ export function createChartHorizontal (target, targetData, targetSeries, showLeg
         overflow: "truncate",
         ellipsis: '…',
         hideOverlap: false,
-        interval: 0
+        interval: 0,
+        color: labelColor,
       }
     },
     series: targetSeries

package/src/assets/scripts/modules/echarts_line.js

@@ -0,0 +1,84 @@
+////// Line chart
+
+import * as echarts from 'echarts';
+
+export function createChartLine (target, targetDataX, targetDataY, chartColor, labelColor, valueColor, borderColor) {
+  var chartHeight = 190;
+  var dom = document.getElementById(target);
+  var myChartLine = echarts.init(dom, null, {
+    renderer: 'canvas',
+    useDirtyRect: false,
+    height: chartHeight
+  });
+  var optionLine;
+  var optionLine = {
+    grid: {
+      show: false,
+      zlevel: 0,
+      top: 30,
+      right: 20,
+      left: 20,
+      bottom: 30
+    },
+    xAxis: {
+      boundaryGap: false,
+      zlevel: 2,
+      data: targetDataX,
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        show: true,
+        margin: 15,
+        color: labelColor,
+      },
+      axisTick: {
+        show: false
+      },
+    },
+    yAxis: {
+      show: false,
+      min: 0,
+      max: targetDataY
+    },
+    series: [
+      {
+        data: targetDataY,
+        type: 'line',
+        lineStyle: {
+          width: 1,
+          color: chartColor,
+          borderColor: borderColor
+        },
+        zlevel: 1
+      },
+      {
+        data: targetDataY,
+        type: 'line',
+        lineStyle: {
+          width: 1
+        },
+        symbol: 'circle',
+        symbolSize: 10,
+        itemStyle: {
+          borderWidth: 2,
+          color: chartColor,
+          borderColor: borderColor
+        },
+        label: {
+          show: true,
+          color: valueColor,
+        },
+        zlevel: 3
+      }
+    ]
+  };
+  
+  if (optionLine && typeof optionLine === 'object') {
+    myChartLine.setOption(optionLine);
+  }
+  
+  window.addEventListener('resize', myChartLine.resize);
+}
+
+

package/src/assets/scripts/modules/echarts_vertical.js

@@ -2,7 +2,7 @@
 
 import * as echarts from 'echarts';
 
-export function createChartVertical (target, targetDataY, targetDataX, itemWidth) {
+export function createChartVertical (target, targetDataY, targetDataX, labelColor, valueColor, itemWidth) {
   var chartHeight = 200;
   var labelHeight = 20;
   var dom = document.getElementById(target);
@@ -50,7 +50,8 @@ export function createChartVertical (target, targetDataY, targetDataX, itemWidth
         overflow: "truncate",
         ellipsis: '…',
         hideOverlap: true,
-        interval: 0
+        interval: 0,
+        color: labelColor,
       }
     },
     yAxis: {
@@ -66,7 +67,8 @@ export function createChartVertical (target, targetDataY, targetDataX, itemWidth
           show: true,
           position: 'center',
           verticalAlign: 'top',
-          offset: [0, -15]
+          offset: [0, -15],
+          color: valueColor,
         }
       }
     ]

package/src/assets/stylesheets/app.css

@@ -9,93 +9,82 @@
 
 @import './components/reset.css' layer(base);
 
+
+/*//// Plugin themes ////*/
 @import 'tom-select/dist/css/tom-select.css' layer(components);
 @import 'select2/dist/css/select2.css' layer(components);
 @import 'trix/dist/trix.css' layer(components);
+@import './plugin_themes/tom_select.css' layer(components);
+@import './plugin_themes/trix_editor.css' layer(components);
+@import './plugin_themes/select2.css' layer(components);
+@import './plugin_themes/markdown_trix_styles.css' layer(components);
 
-
+/*//// Components ////*/
 @import './components/actionbar.css' layer(components);
-@import './components/buttons.css' layer(components);
+@import './components/alerts.css' layer(components);
 @import './components/badges.css' layer(components);
-@import './components/cards.css' layer(components);
-@import './components/header.css' layer(components);
-@import './components/layout.css' layer(components);
-@import './components/sidebar.css' layer(components);
-@import './components/icons.css' layer(components);
-@import './components/iconfont.css' layer(components);
-@import './components/popover.css' layer(components);
-@import './components/typography.css' layer(components);
-@import './components/lists.css' layer(components);
-@import './components/sections.css' layer(components);
-@import './components/dropdown.css' layer(components);
-@import './components/list_item.css' layer(components);
-@import './components/task_issue_item.css' layer(components);
-@import './components/devices.css' layer(components);
-@import './components/images.css' layer(components);
 @import './components/banner_card.css' layer(components);
-@import './components/toggleswitch.css' layer(components);
-@import './components/selectable_token.css' layer(components);
+@import './components/buttons.css' layer(components);
+@import './components/cards.css' layer(components);
+@import './components/chat.css' layer(components);
 @import './components/checkboxes_radiobuttons.css' layer(components);
-@import './components/form_grid.css' layer(components);
+@import './components/devices.css' layer(components);
+@import './components/drawer.css' layer(components);
+@import './components/dropdown.css' layer(components);
+@import './components/emptystate_message.css' layer(components);
 @import './components/form_card.css' layer(components);
+@import './components/form_grid.css' layer(components);
 @import './components/forms.css' layer(components);
 @import './components/gallery.css' layer(components);
-@import './components/search.css' layer(components);
-@import './components/tom_select.css' layer(components);
-@import './components/trix_editor.css' layer(components);
-@import './components/uploads.css' layer(components);
-@import './components/radio_tabs.css' layer(components);
-@import './components/user_item.css' layer(components);
-@import './components/alerts.css' layer(components);
-@import './components/tags.css' layer(components);
-@import './components/markdown_trix_styles.css' layer(components);
-@import './components/tabs.css' layer(components);
-@import './components/drawer.css' layer(components);
-@import './components/modals.css' layer(components);
-@import './components/progress.css' layer(components);
+@import './components/header.css' layer(components);
+@import './components/iconfont.css' layer(components);
+@import './components/icons.css' layer(components);
+@import './components/images.css' layer(components);
+@import './components/layout.css' layer(components);
+@import './components/list_item.css' layer(components);
+@import './components/lists.css' layer(components);
 @import './components/loading_spinner.css' layer(components);
-@import './components/test_item.css' layer(components);
+@import './components/metasidebar.css' layer(components);
 @import './components/metrics.css' layer(components);
+@import './components/modals.css' layer(components);
+@import './components/notifications.css' layer(components);
+@import './components/popover.css' layer(components);
+@import './components/progress.css' layer(components);
+@import './components/radio_tabs.css' layer(components);
+@import './components/ratingscale.css' layer(components);
 @import './components/resultmodule.css' layer(components);
-@import './components/chat.css' layer(components);
-@import './components/emptystate_message.css' layer(components);
+@import './components/scrollbars.css' layer(components);
+@import './components/search.css' layer(components);
+@import './components/sections.css' layer(components);
+@import './components/select.css' layer(components);
+@import './components/selectable_token.css' layer(components);
+@import './components/sidebar.css' layer(components);
 @import './components/splitview.css' layer(components);
 @import './components/tables.css' layer(components);
-@import './components/metasidebar.css' layer(components);
-@import './components/notifications.css' layer(components);
-@import './components/select2.css' layer(components);
-@import './components/select.css' layer(components);
+@import './components/tabs.css' layer(components);
+@import './components/tags.css' layer(components);
+@import './components/task_issue_item.css' layer(components);
 @import './components/test_header.css' layer(components);
-@import './components/ratingscale.css' layer(components);
-@import './components/scrollbars.css' layer(components);
+@import './components/test_item.css' layer(components);
+@import './components/toggleswitch.css' layer(components);
+@import './components/typography.css' layer(components);
+@import './components/uploads.css' layer(components);
+@import './components/user_item.css' layer(components);
 
+/*//// Customer components ////*/
 @import './components/customer/customer_header.css' layer(components);
 @import './components/customer/customer_sidebar.css' layer(components);
 @import './components/customer/customer_productcards.css' layer(components);
 
+/*//// Tester components ////*/
 @import './components/tester/tester_header.css' layer(components);
 @import './components/tester/tester_sidebar.css' layer(components);
 @import './components/tester/tester_cards.css' layer(components);
 
+/*//// Manager components ////*/
 @import './components/manager/manager_header.css' layer(components);
 @import './components/manager/manager_sidebar.css' layer(components);
 
+/*//// Design system styles ////*/
 @import './components/designsystem/designsystem-styles.css' layer(components);
 
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
-}

package/src/assets/stylesheets/components/customer/customer_productcards.css

@@ -165,12 +165,12 @@
   @apply inline-block h-icon bg-primary;
   content: "";
   width: 14px;
-  mask-image: url("/assets/images/arrow-down.svg");
+  mask-image: url("/assets/images/icons/arrow-down.svg");
   mask-repeat: no-repeat;
 }
 
 details.card-section[open] .btn-collapse::before {
-  mask-image: url("/assets/images/arrow-up.svg");
+  mask-image: url("/assets/images/icons/arrow-up.svg");
 }
 
 details.card-section[open] .card-section-header {

package/src/assets/stylesheets/components/list_item.css

@@ -149,6 +149,10 @@ a.listitem:hover {
   @apply max-w-full;
 }
 
+.listitem-card pre {
+  @apply whitespace-break-spaces select-all;
+}
+
 .listitem-subheadline {
   @apply mb-xs text-label font-semibold uppercase;
 }

package/src/assets/stylesheets/components/uploads.css

@@ -86,110 +86,3 @@
 .attachment.selectable input:checked + label .attachment-thumb {
   @apply text-white bg-info border border-info hover:border-link-hover hover:bg-link-hover;
 }
-
-/* Dropzone plugin */
-
-.dropzone {
-  @apply relative flex justify-center items-start flex-wrap min-h-xxl p-md border border-dashed border-primary rounded text-black hover:border-link-hover hover:text-link-hover cursor-pointer;
-}
-
-.dz-preview {
-  @apply relative inline-flex flex-col h-auto w-xxl mr-0 border-0 bg-transparent overflow-hidden shadow-none;
-
-  & .dz-details {
-    @apply mt-xxs text-center text-xs text-black;
-    font-weight: normal;
-    white-space: normal;
-    word-break: break-all;
-  }
-
-  & .dz-remove {
-    @apply absolute flex justify-center items-center top-0 right-0 w-btn-sm h-btn-sm bg-danger rounded-tr hover:bg-link-hover;
-    z-index: 2;
-  }
-
-  & .dz-remove::after {
-    @apply inline-block h-icon-sm bg-white;
-    content: "";
-    width: 14px;
-    mask-image: url("/assets/images/icons/remove.svg");
-    mask-repeat: no-repeat;
-  }
-}
-
-.dz-preview .dz-image {
-  @apply relative flex justify-center items-center w-xxl h-xxl text-white bg-primary rounded overflow-hidden;
-  border-image-width: 0;
-}
-
-
-/*/// Fallback image  ///*/
-
-.dz-image::after {
-  @apply absolute block top-0 left-0 w-full h-full;
-  content: "";
-  background-image: url("/assets/images/icons/attachment-fallbackimage.svg");
-  background-size: cover;
-}
-
-.dz-preview .dz-image .icon {
-  @apply text-icon-lg;
-}
-
-.dz-preview .dz-image img {
-  @apply h-xxl min-w-full;
-  z-index: 1;
-}
-
-.dz-filename {
-  line-height: 1.1;
-}
-
-.dz-success-mark {
-  display: none;
-}
-
-.dz-error-mark {
-  display: none;
-}
-
-.dz-started {
-  justify-content: start;
-}
-
-.dz-message {
-  align-self: center;
-}
-
-.dz-started .dz-message {
-  display: none;
-}
-
-.dz-error-message {
-  @apply mt-xxs text-danger text-xs;
-}
-
-.dropzone-msg-title {
-  @apply text-center;
-}
-
-.dropzone-msg-desc {
-  @apply text-xs text-center;
-}
-
-.dz-size, .dz-size strong {
-  @apply text-xs;
-}
-
-.dropzone.inverted {
-  @apply text-white hover:text-link-hover;
-}
-
-.dropzone.inverted .dz-preview, 
-.dropzone.inverted .dz-preview .dz-image {
-  @apply text-white;
-}
-
-.dropzone.inverted .dz-details {
-  @apply text-white;
-}