@vc-shell/framework 1.0.290 → 1.0.292

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue

@@ -1,60 +1,68 @@
 <template>
-  <div
-    class="vc-blade-toolbar-button"
-    :class="{
-      'vc-blade-toolbar-button_disabled': disabled || isWaiting,
-      'tw-border-l tw-border-solid tw-border-[color:#eef0f2]': separator === 'left',
+  <VcTooltip
+    placement="bottom"
+    :offset="{
+      crossAxis: 0,
+      mainAxis: 0,
     }"
-    :title="title"
-    :data-test-id="id ?? 'vc-blade-toolbar-button'"
-    @click="onClick"
   >
-    <div ref="dropButtonRef">
-      <div
-        ref="bladeDropToggle"
-        type="button"
-        class="vc-blade-toolbar-button__wrap"
-      >
-        <VcIcon
-          class="vc-blade-toolbar-button__icon"
-          :icon="icon as string"
-          size="m"
-        ></VcIcon>
+    <template #tooltip>{{ title }}</template>
+    <div
+      class="vc-blade-toolbar-button"
+      :class="{
+        'vc-blade-toolbar-button_disabled': disabled || isWaiting,
+        'vc-blade-toolbar-button_separator-left': separator === 'left',
+      }"
+      :data-test-id="id ?? 'vc-blade-toolbar-button'"
+      @click="onClick"
+    >
+      <div ref="dropButtonRef">
         <div
-          v-if="isExpanded"
-          class="vc-blade-toolbar-button__title"
-        >
-          {{ title }}
-        </div>
-      </div>
-      <teleport to="body">
-        <div
-          v-if="isDropActive"
-          ref="bladeDropRef"
-          class="vc-blade-toolbar-button__dropdown"
-          :style="dropStyle"
+          ref="bladeDropToggle"
+          type="button"
+          class="vc-blade-toolbar-button__wrap"
         >
+          <VcIcon
+            class="vc-blade-toolbar-button__icon"
+            :icon="icon as string"
+            size="m"
+          ></VcIcon>
           <div
-            v-for="(item, i) in dropdownItems"
-            :key="i"
-            class="vc-blade-toolbar-button__dropdown-item"
-            @click="handleDropItemClick(item)"
+            v-if="isExpanded"
+            class="vc-blade-toolbar-button__title"
           >
-            <VcIcon
-              :icon="item.icon"
-              class="vc-blade-toolbar-button__dropdown-item-icon"
-            />
-            {{ item.title }}
+            {{ title }}
           </div>
         </div>
-      </teleport>
+        <teleport to="body">
+          <div
+            v-if="isDropActive"
+            ref="bladeDropRef"
+            class="vc-blade-toolbar-button__dropdown"
+            :style="dropStyle"
+          >
+            <div
+              v-for="(item, i) in dropdownItems"
+              :key="i"
+              class="vc-blade-toolbar-button__dropdown-item"
+              @click="handleDropItemClick(item)"
+            >
+              <VcIcon
+                :icon="item.icon"
+                class="vc-blade-toolbar-button__dropdown-item-icon"
+              />
+              {{ item.title }}
+            </div>
+          </div>
+        </teleport>
+      </div>
     </div>
-  </div>
+  </VcTooltip>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed, nextTick } from "vue";
-import { VcIcon } from "./../../../../../../";
+import { VcIcon, VcTooltip } from "./../../../../../../";
 import { offset, computePosition, ComputePositionReturn } from "@floating-ui/vue";
 import { IBladeDropdownItem } from "./../../../../../../../../core/types";
 
@@ -146,17 +154,26 @@ function handleDropItemClick(item: IBladeDropdownItem) {
 
 <style lang="scss">
 :root {
-  --blade-toolbar-button-title-color: #465769;
-  --blade-toolbar-button-title-color-hover: #465769;
-  --blade-toolbar-button-title-color-disabled: #9fa2a6;
+  --blade-toolbar-button-title-color: var(--base-text-color, var(--neutrals-950));
+  --blade-toolbar-button-title-color-hover: var(--base-text-color, var(--neutrals-950));
+  --blade-toolbar-button-title-color-disabled: var(--neutrals-400);
+
+  --blade-toolbar-button-icon-color: var(--primary-500);
+  --blade-toolbar-button-icon-color-hover: var(--primary-600);
+  --blade-toolbar-button-icon-color-disabled: var(--neutrals-400);
+
+  --blade-toolbar-button-background-color: var(--additional-50);
+  --blade-toolbar-button-background-color-hover: var(--additional-50);
+  --blade-toolbar-button-background-color-disabled: var(--additional-50);
 
-  --blade-toolbar-button-icon-color: #319ed4;
-  --blade-toolbar-button-icon-color-hover: #257fad;
-  --blade-toolbar-button-icon-color-disabled: #d2d4d7;
+  --blade-toolbar-button-border-color: var(--base-border-color, var(--neutrals-200));
 
-  --blade-toolbar-button-background-color: var(--blade-toolbar-background-color);
-  --blade-toolbar-button-background-color-hover: var(--blade-toolbar-background-color);
-  --blade-toolbar-button-background-color-disabled: var(--blade-toolbar-background-color);
+  --blade-toolbar-shadow-color: var(--secondary-200);
+  --blade-toolbar-shadow: 1px 1px 22px rgb(from var(--blade-toolbar-shadow-color) r g b / 20%);
+
+  --blade-toolbar-dropdown-background-color: var(--additional-50);
+  --blade-toolbar-dropdown-item-background-color: var(--additional-50);
+  --blade-toolbar-dropdown-item-text-color: var(--additional-950);
 }
 
 .vc-blade-toolbar-button {
@@ -167,7 +184,7 @@ function handleDropItemClick(item: IBladeDropdownItem) {
   }
 
   &__title {
-    @apply tw-text-sm tw-whitespace-nowrap tw-mt-1 tw-text-[color:var(--blade-toolbar-button-title-color)];
+    @apply tw-text-xs tw-whitespace-nowrap tw-mt-1 tw-text-[color:var(--blade-toolbar-button-title-color)];
   }
 
   &__icon {
@@ -175,18 +192,19 @@ function handleDropItemClick(item: IBladeDropdownItem) {
   }
 
   &__dropdown {
-    @apply tw-absolute tw-bg-white tw-z-[9999] tw-shadow-[1px_1px_22px_rgba(126,142,157,0.2)];
+    @apply tw-absolute tw-bg-[color:var(--blade-toolbar-dropdown-background-color)] tw-z-[9999] [box-shadow:var(--blade-toolbar-shadow)];
   }
 
   &__dropdown-item {
-    @apply tw-p-3 tw-text-lg tw-text-black tw-border-l tw-border-solid
-    tw-border-l-[#eef0f2] tw-border-b tw-border-b-[#eef0f2]
-    tw-bg-white tw-cursor-pointer tw-flex tw-flex-row tw-items-center
-    hover:tw-bg-[#eff7fc];
+    @apply tw-p-3 tw-text-lg tw-text-[color:var(--blade-toolbar-dropdown-item-text-color)] tw-border-l tw-border-solid
+    tw-border-l-[color:var(--blade-toolbar-button-border-color)] tw-border-b
+    tw-border-b-[color:var(--blade-toolbar-button-border-color)]
+    tw-bg-[color:var(--blade-toolbar-dropdown-item-background-color)] tw-cursor-pointer tw-flex tw-flex-row tw-items-center
+    hover:tw-bg-[color:var(--blade-toolbar-button-background-color-hover)];
   }
 
   &__dropdown-item-icon {
-    @apply tw-text-[#a9bfd2] tw-mr-2;
+    @apply tw-text-[color:var(--blade-toolbar-button-icon-color)] tw-mr-2;
   }
 
   &:hover {
@@ -213,5 +231,9 @@ function handleDropItemClick(item: IBladeDropdownItem) {
       @apply tw-text-[color:var(--blade-toolbar-button-icon-color-disabled)];
     }
   }
+
+  &.vc-blade-toolbar-button_separator-left {
+    @apply tw-border-l tw-border-solid tw-border-[color:var(--blade-toolbar-button-border-color)];
+  }
 }
 </style>

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/vc-blade-toolbar.vue

@@ -1,10 +1,10 @@
 <template>
   <div
     v-if="isToolbarVisible()"
-    class="tw-h-[var(--blade-toolbar-height)] tw-bg-[color:var(--blade-toolbar-background-color)] tw-border-b-[color:#eaedf3] tw-border-solid tw-border-b tw-flex tw-box-border tw-w-full tw-content-center tw-items-stretch tw-shrink-0"
-    :class="{ '!tw-h-[var(--blade-toolbar-height-expanded)]': isExpanded }"
+    class="vc-blade-toolbar"
+    :class="{ 'vc-blade-toolbar--expanded': isExpanded }"
   >
-    <div class="tw-grow tw-basis-0 tw-flex tw-content-start tw-items-center tw-overflow-x-auto tw-px-2">
+    <div class="vc-blade-toolbar__content">
       <template
         v-for="item in items"
         :key="item.id"
@@ -23,7 +23,7 @@
       </template>
     </div>
     <VcIcon
-      class="tw-self-center tw-justify-self-center tw-text-[#a1c0d4] tw-cursor-pointer tw-mr-4 hover:tw-text-[#7ea8c4]"
+      class="vc-blade-toolbar__icon"
       :icon="`fas fa-chevron-${isExpanded ? 'up' : 'down'}`"
       @click="toggleToolbar"
     ></VcIcon>
@@ -32,9 +32,10 @@
 
 <script lang="ts" setup>
 import { IBladeToolbar } from "./../../../../../../core/types";
-import { ref, unref } from "vue";
+import { unref } from "vue";
 import VcBladeToolbarButton from "./_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue";
 import { VcIcon } from "./../../../../";
+import { useLocalStorage } from "@vueuse/core";
 
 export interface Props {
   items: IBladeToolbar[];
@@ -44,16 +45,10 @@ const props = withDefaults(defineProps<Props>(), {
   items: () => [],
 });
 
-const isExpanded = ref(true);
-try {
-  isExpanded.value = localStorage.getItem("VC_BLADE_TOOLBAR_IS_EXPANDED") === "true";
-} catch (err) {
-  isExpanded.value = true;
-}
+const isExpanded = useLocalStorage("VC_BLADE_TOOLBAR_IS_EXPANDED", true);
 
 function toggleToolbar() {
   isExpanded.value = !isExpanded.value;
-  localStorage.setItem("VC_BLADE_TOOLBAR_IS_EXPANDED", isExpanded.value.toString());
 }
 
 function isToolbarVisible() {
@@ -68,6 +63,25 @@ function isToolbarVisible() {
 :root {
   --blade-toolbar-height: 36px;
   --blade-toolbar-height-expanded: 50px;
-  --blade-toolbar-background-color: #ffffff;
+  --blade-toolbar-background-color: var(--additional-50);
+  --blade-toolbar-border-color: var(--base-border-color, var(--neutrals-200));
+  --blade-toolbar-icon-color: var(--primary-500);
+  --blade-toolbar-icon-hover-color: var(--primary-600);
+}
+
+.vc-blade-toolbar {
+  @apply tw-h-[var(--blade-toolbar-height)] tw-bg-[color:var(--blade-toolbar-background-color)] tw-border-b-[color:var(--blade-toolbar-border-color)] tw-border-solid tw-border-b tw-flex tw-box-border tw-w-full tw-content-center tw-items-stretch tw-shrink-0;
+
+  &--expanded {
+    @apply tw-h-[var(--blade-toolbar-height-expanded)] #{!important};
+  }
+
+  &__content {
+    @apply tw-grow tw-basis-0 tw-flex tw-content-start tw-items-center tw-overflow-x-auto tw-px-2;
+  }
+
+  &__icon {
+    @apply tw-self-center tw-justify-self-center tw-text-[color:var(--blade-toolbar-icon-color)] tw-cursor-pointer tw-mr-4 hover:tw-text-[color:var(--blade-toolbar-icon-hover-color)];
+  }
 }
 </style>

package/ui/components/organisms/vc-blade/vc-blade.vue

@@ -1,13 +1,12 @@
 <template>
   <div
-    class="vc-blade tw-relative tw-flex tw-shrink-0 tw-flex-col tw-bg-[color:var(--blade-background-color)] tw-rounded-[var(--blade-border-radius)] tw-shadow-[2px_2px_8px_rgba(54,84,117,0.14)] tw-my-4 tw-mx-2 tw-overflow-hidden tw-transition-[width] tw-duration-200"
+    class="vc-blade"
     :class="[
       $attrs.class,
       {
-        '!tw-w-full': $isMobile.value,
-        '!tw-w-full !tw-shrink': expanded,
-        '!tw-absolute !tw-z-[2] !tw-top-0 !tw-bottom-0 !tw-left-0 ![width:-webkit-fill-available] !tw-shrink':
-          maximized,
+        'vc-blade--mobile': $isMobile.value,
+        'vc-blade--expanded': expanded,
+        'vc-blade--maximized': maximized,
       },
     ]"
     :style="{ width: typeof width === 'number' ? `${width}px` : width }"
@@ -15,7 +14,7 @@
     <!-- Init blade header -->
     <VcBladeHeader
       v-if="!$isMobile.value || closable"
-      class="tw-shrink-0"
+      class="vc-blade__header"
       :maximized="maximized"
       :expandable="expandable"
       :closable="closable"
@@ -37,52 +36,51 @@
 
     <!-- Show error message -->
     <template v-if="error">
-      <div class="tw-text-white tw-p-2 tw-flex tw-flex-row tw-items-center tw-bg-[color:var(--blade-color-error)]">
+      <div class="vc-blade__error">
         <VcIcon
           size="s"
           icon="fas fa-exclamation-triangle"
         />
-        <div class="tw-line-clamp-1 tw-w-full tw-mx-2">{{ error }}</div>
+        <div class="vc-blade__error-text">{{ error }}</div>
         <VcButton
           text
-          class="tw-shrink-0 tw-opacity-80 tw-text-white hover:!tw-opacity-100 hover:!tw-text-white"
+          class="vc-blade__error-button"
           @click="open()"
-          >{{ t("COMPONENTS.ORGANISMS.VC_BLADE.SEE_DETAILS") }}</VcButton
         >
+          {{ t("COMPONENTS.ORGANISMS.VC_BLADE.SEE_DETAILS") }}
+        </VcButton>
       </div>
     </template>
 
     <!-- Unsaved changes -->
     <template v-if="typeof modified !== 'undefined' ? modified : false">
-      <div
-        class="tw-text-white tw-px-2 tw-py-1 tw-flex tw-flex-row tw-items-center tw-bg-[color:var(--blade-color-unsaved-changes)]"
-      >
+      <div class="vc-blade__unsaved-changes">
         <VcIcon
           size="s"
           icon="fas fa-info-circle"
         />
-        <div class="tw-line-clamp-1 tw-w-full tw-ml-2">{{ t("COMPONENTS.ORGANISMS.VC_BLADE.UNSAVED_CHANGES") }}</div>
+        <div class="vc-blade__unsaved-changes-text">
+          {{ t("COMPONENTS.ORGANISMS.VC_BLADE.UNSAVED_CHANGES") }}
+        </div>
       </div>
     </template>
 
     <!-- Set up blade toolbar -->
     <VcBladeToolbar
-      class="tw-shrink-0"
+      class="vc-blade__toolbar"
       :items="toolbarItems"
     ></VcBladeToolbar>
 
-    <div class="tw-flex-1 tw-overflow-auto">
+    <div class="vc-blade__content">
       <div
-        class="tw-flex tw-flex-row tw-h-full"
-        :class="{
-          'tw-flex-col': $isMobile.value,
-        }"
+        class="vc-blade__main"
+        :class="{ 'vc-blade__main--mobile': $isMobile.value }"
       >
         <div
-          class="tw-flex tw-flex-auto tw-flex-col"
+          class="vc-blade__slot"
           :class="{
-            'tw-w-0': $isDesktop.value,
-            'tw-h-0': $isMobile.value,
+            'vc-blade__slot--desktop': $isDesktop.value,
+            'vc-blade__slot--mobile': $isMobile.value,
           }"
         >
           <slot></slot>
@@ -91,20 +89,22 @@
         <div
           v-show="$slots['widgets'] && !isWidgetContainerEmpty"
           ref="widgetsRef"
-          class="vc-blade__widgets tw-flex"
-          :class="{
-            'tw-border-l tw-border-solid tw-border-l-[#eaedf3]': $isDesktop.value,
-            'tw-w-[var(--blade-widgets-width)] tw-flex-col': $isDesktop.value && !isExpanded,
-            'tw-w-[var(--blade-widgets-width-expanded)] tw-flex-col': $isDesktop.value && isExpanded,
-            'tw-w-auto tw-border-t tw-border-solid tw-border-t-[#eaedf3] tw-flex-row': $isMobile.value,
-          }"
+          class="vc-blade__widgets"
+          :class="[
+            {
+              'vc-blade__widgets--desktop': $isDesktop.value,
+              'vc-blade__widgets--not-expanded': $isDesktop.value && !isExpanded,
+              'vc-blade__widgets--expanded': $isDesktop.value && isExpanded,
+              'vc-blade__widgets--mobile': $isMobile.value,
+            },
+          ]"
         >
           <div
             ref="widgetsContainerRef"
-            class="vc-blade__widget-container tw-flex tw-overflow-y-auto"
+            class="vc-blade__widget-container"
             :class="{
-              'tw-flex-col tw-overflow-x-clip': $isDesktop.value,
-              'tw-flex-row': $isMobile.value,
+              'vc-blade__widget-container--desktop': $isDesktop.value,
+              'vc-blade__widget-container--mobile': $isMobile.value,
             }"
           >
             <slot
@@ -114,16 +114,16 @@
           </div>
 
           <div
-            class="tw-flex tw-flex-auto"
+            class="vc-blade__widget-toggle"
             :class="{
-              'tw-flex-col tw-justify-end': $isDesktop.value,
-              'tw-w-12 tw-max-w-12 tw-bg-white tw-items-center tw-justify-center tw-px-4 tw-ml-auto': $isMobile.value,
+              'vc-blade__widget-toggle--desktop': $isDesktop.value,
+              'vc-blade__widget-toggle--mobile': $isMobile.value,
             }"
           >
             <VcIcon
-              class="tw-self-center tw-justify-self-center tw-text-[#a1c0d4] tw-cursor-pointer hover:tw-text-[#7ea8c4]"
+              class="vc-blade__toggle-icon"
               :class="{
-                'tw-mb-4': $isDesktop.value,
+                'vc-blade__toggle-icon--desktop': $isDesktop.value,
               }"
               :icon="`fas fa-chevron-${$isDesktop.value ? (isExpanded ? 'right' : 'left') : isExpanded ? 'up' : 'down'}`"
               @click="toggleWidgets"
@@ -183,11 +183,12 @@ defineSlots<{
 }>();
 
 defineEmits<Emits>();
+
 const attrs = useAttrs();
 const { maximized, error }: { maximized?: Ref<boolean>; error?: Ref<string> } = toRefs(reactive(attrs));
 const { t } = useI18n({ useScope: "global" });
-const widgetsRef = ref();
-const widgetsContainerRef = ref();
+const widgetsRef = ref<HTMLElement | null>(null);
+const widgetsContainerRef = ref<HTMLElement | null>(null);
 
 const isExpanded = useLocalStorage("VC_BLADE_WIDGETS_IS_EXPANDED", true);
 
@@ -203,13 +204,13 @@ const checkEmpty = (el: HTMLElement) => {
 
 onMounted(() => {
   if (widgetsRef.value) {
-    checkEmpty(widgetsContainerRef.value);
+    checkEmpty(widgetsContainerRef.value!);
   }
 });
 
 onUpdated(() => {
   if (widgetsRef.value) {
-    checkEmpty(widgetsContainerRef.value);
+    checkEmpty(widgetsContainerRef.value!);
   }
 });
 
@@ -226,14 +227,144 @@ const { open } = usePopup({
 
 <style lang="scss">
 :root {
-  --blade-background-color: #ffffff;
+  --blade-background-color: var(--additional-50);
   --blade-border-radius: 6px;
-  --blade-color-error: #f14e4e;
-  --blade-color-unsaved-changes: #82a6bd;
-  --blade-color-unsaved-changes: #82a6bd;
+  --blade-color-error: var(--base-error-color, var(--danger-500));
+  --blade-color-unsaved-changes: var(--secondary-600);
+
+  --blade-border-color: var(--base-border-color, var(--neutrals-200));
+  --blade-icon-color: var(--secondary-400);
+  --blade-icon-hover-color: var(--secondary-500);
 
   --blade-widgets-width: 50px;
   --blade-widgets-width-expanded: 120px;
+
+  --blade-shadow-color: var(--primary-700);
+  --blade-shadow: 2px 2px 8px rgb(from var(--blade-shadow-color) r g b / 14%);
+
+  --blade-text-color: var(--additional-50);
+}
+
+.vc-blade {
+  @apply tw-relative tw-flex tw-shrink-0 tw-flex-col [box-shadow:var(--blade-shadow)] tw-my-4 tw-mx-2 tw-overflow-hidden tw-transition-[width] tw-duration-200;
+  @apply tw-bg-[color:var(--blade-background-color)] tw-rounded-[var(--blade-border-radius)];
+
+  &--mobile {
+    @apply tw-w-full #{!important};
+  }
+
+  &--expanded {
+    @apply tw-w-full tw-shrink #{!important};
+  }
+
+  &--maximized {
+    @apply tw-absolute tw-z-[2] tw-top-0 tw-bottom-0 tw-left-0 tw-shrink #{!important};
+    width: -webkit-fill-available !important;
+  }
+
+  &__header {
+    @apply tw-shrink-0;
+  }
+
+  &__error {
+    @apply tw-text-[color:var(--blade-text-color)] tw-p-2 tw-flex tw-flex-row tw-items-center tw-bg-[color:var(--blade-color-error)];
+  }
+
+  &__error-text {
+    @apply tw-line-clamp-1 tw-w-full tw-mx-2;
+  }
+
+  &__error-button {
+    @apply tw-shrink-0 tw-opacity-80 tw-text-[color:var(--blade-text-color)] hover:tw-opacity-100 hover:tw-text-[color:var(--blade-text-color)];
+  }
+
+  &__unsaved-changes {
+    @apply tw-text-[color:var(--blade-text-color)] tw-px-2 tw-py-1 tw-flex tw-flex-row tw-items-center tw-bg-[color:var(--blade-color-unsaved-changes)];
+  }
+
+  &__unsaved-changes-text {
+    @apply tw-line-clamp-1 tw-w-full tw-ml-2;
+  }
+
+  &__toolbar {
+    @apply tw-shrink-0;
+  }
+
+  &__content {
+    @apply tw-flex-1 tw-overflow-auto;
+  }
+
+  &__main {
+    @apply tw-flex tw-flex-row tw-h-full;
+
+    &--mobile {
+      @apply tw-flex-col;
+    }
+  }
+
+  &__slot {
+    @apply tw-flex tw-flex-auto tw-flex-col;
+
+    &--desktop {
+      @apply tw-w-0;
+    }
+
+    &--mobile {
+      @apply tw-h-0;
+    }
+  }
+
+  &__widgets {
+    @apply tw-flex;
+
+    &--desktop {
+      @apply tw-border-l tw-border-solid tw-border-l-[color:var(--blade-border-color)];
+    }
+
+    &--not-expanded {
+      @apply tw-w-12 tw-flex-col;
+    }
+
+    &--expanded {
+      @apply tw-w-32 tw-flex-col;
+    }
+
+    &--mobile {
+      @apply tw-w-auto tw-border-t tw-border-solid tw-border-t-[color:var(--blade-border-color)] tw-flex-row;
+    }
+  }
+
+  &__widget-container {
+    @apply tw-flex tw-overflow-y-auto;
+
+    &--desktop {
+      @apply tw-flex-col tw-overflow-x-clip;
+    }
+
+    &--mobile {
+      @apply tw-flex-row;
+    }
+  }
+
+  &__widget-toggle {
+    @apply tw-flex tw-flex-auto;
+
+    &--desktop {
+      @apply tw-flex-col tw-justify-end;
+    }
+
+    &--mobile {
+      @apply tw-w-12 tw-max-w-12 tw-bg-[color:var(--blade-background-color)] tw-items-center tw-justify-center tw-px-4 tw-ml-auto;
+    }
+  }
+
+  &__toggle-icon {
+    @apply tw-self-center tw-justify-self-center tw-text-[color:var(--blade-icon-color)] tw-cursor-pointer hover:tw-text-[color:var(--blade-icon-hover-color)];
+  }
+
+  &__toggle-icon--desktop {
+    @apply tw-mb-4;
+  }
 }
 
 .vc-app_mobile .vc-blade {