bfg-common 1.5.244 → 1.5.245

package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/tooltip/TooltipNew.vue

@@ -1,154 +1,154 @@
-<template>
-  <div id="cpu-help-icon" class="flex-align-center relative">
-    <ui-icon
-      :class="['cpu-help-icon cursor-pointer', { active: isShowCpuHelp }]"
-      width="20"
-      height="20"
-      name="info"
-      data-id="show-cpu-help-icon"
-      @click.stop="isShowCpuHelp = !isShowCpuHelp"
-    />
-    <Teleport to="body">
-      <ui-dropdown
-        :show="isShowCpuHelp"
-        :items="[]"
-        elem-id="cpu-help-icon"
-        test-id="cpu-help"
-        width="480px"
-        max-height="unset"
-        left
-        @hide="isShowCpuHelp = false"
-      >
-        <template #content>
-          <div class="cpu-help-content">
-            <div class="headline">
-              <ui-icon name="info-2" width="16" height="16" />
-              <h3 class="cpu-help-title">
-                {{ localization.common.cpu }}
-              </h3>
-              <ui-icon
-                name="close"
-                width="16"
-                height="16"
-                class="cpu-help-close-icon cursor-pointer"
-                @click="isShowCpuHelp = false"
-              />
-            </div>
-
-            <p class="cpu-help-text">
-              {{ localization.common.vmCpuHelpText1 }}
-            </p>
-            <p class="cpu-help-text">
-              {{ props.description }}
-            </p>
-            <p class="cpu-help-text">
-              {{ localization.common.vmCpuHelpText3 }}
-            </p>
-            <p class="cpu-help-text">
-              {{ localization.common.vmCpuHelpText4 }}
-            </p>
-
-            <div>
-              <a
-                id="cpu-more-info-link"
-                href="javascript:void(0)"
-                class="cpu-more-info"
-                >{{ localization.common.moreInformation }}</a
-              >
-            </div>
-          </div>
-        </template>
-      </ui-dropdown>
-    </Teleport>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  description: string
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isShowCpuHelp = ref<boolean>(false)
-</script>
-
-<style lang="scss">
-:root {
-  --cpu-help-color: #4d5d69;
-  --cpu-help-icon-hover-color: #4d5d69;
-  --cpu-help-icon-active-color: #008fd6;
-  --cpu-help-close-icon-color: #182531;
-  --cpu-help-more-info-color: #008fd6;
-}
-:root.dark-theme {
-  --cpu-help-color: #e9eaec;
-  --cpu-help-icon-hover-color: #e9eaec;
-  --cpu-help-icon-active-color: #2ba2de;
-  --cpu-help-close-icon-color: #e9eaec;
-  --cpu-help-more-info-color: #2ba2de;
-}
-
-.light-theme {
-  .stack-block-expanded {
-    --cpu-help-icon-hover-color: #e9eaec;
-    --cpu-help-icon-active-color: #2ba2de;
-  }
-}
-.dark-theme {
-  .stack-block-expanded {
-    --cpu-help-icon-hover-color: #4d5d69;
-    --cpu-help-icon-active-color: #008fd6;
-  }
-}
-</style>
-<style lang="scss" scoped>
-.cpu-help-icon {
-  color: #9da6ad; // for light and dark
-
-  &:hover {
-    color: var(--cpu-help-icon-hover-color);
-  }
-  &.active {
-    color: var(--cpu-help-icon-active-color);
-  }
-}
-.cpu-help-content {
-  padding: 16px;
-
-  .headline {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 12px;
-
-    .cpu-help-title {
-      flex: 1;
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 16.94px;
-      color: var(--cpu-help-color);
-    }
-    .cpu-help-close-icon {
-      color: var(--cpu-help-close-icon-color);
-    }
-  }
-
-  .cpu-help-text {
-    font-size: 13px;
-    line-height: 15.73px;
-    color: var(--cpu-help-color);
-    margin-bottom: 12px;
-  }
-
-  .cpu-more-info {
-    font-size: 13px;
-    font-weight: 500;
-    line-height: 15.73px;
-    color: var(--cpu-help-more-info-color);
-    text-decoration: none;
-  }
-}
-</style>
+<template>
+  <div id="cpu-help-icon" class="flex-align-center relative">
+    <ui-icon
+      :class="['cpu-help-icon cursor-pointer', { active: isShowCpuHelp }]"
+      width="20"
+      height="20"
+      name="info"
+      data-id="show-cpu-help-icon"
+      @click.stop="isShowCpuHelp = !isShowCpuHelp"
+    />
+    <Teleport to="body">
+      <ui-dropdown
+        :show="isShowCpuHelp"
+        :items="[]"
+        elem-id="cpu-help-icon"
+        test-id="cpu-help"
+        width="480px"
+        max-height="unset"
+        left
+        @hide="isShowCpuHelp = false"
+      >
+        <template #content>
+          <div class="cpu-help-content">
+            <div class="headline">
+              <ui-icon name="info-2" width="16" height="16" />
+              <h3 class="cpu-help-title">
+                {{ localization.common.cpu }}
+              </h3>
+              <ui-icon
+                name="close"
+                width="16"
+                height="16"
+                class="cpu-help-close-icon cursor-pointer"
+                @click="isShowCpuHelp = false"
+              />
+            </div>
+
+            <p class="cpu-help-text">
+              {{ localization.common.vmCpuHelpText1 }}
+            </p>
+            <p class="cpu-help-text">
+              {{ props.description }}
+            </p>
+            <p class="cpu-help-text">
+              {{ localization.common.vmCpuHelpText3 }}
+            </p>
+            <p class="cpu-help-text">
+              {{ localization.common.vmCpuHelpText4 }}
+            </p>
+
+            <div>
+              <a
+                id="cpu-more-info-link"
+                href="javascript:void(0)"
+                class="cpu-more-info"
+                >{{ localization.common.moreInformation }}</a
+              >
+            </div>
+          </div>
+        </template>
+      </ui-dropdown>
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  description: string
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowCpuHelp = ref<boolean>(false)
+</script>
+
+<style lang="scss">
+:root {
+  --cpu-help-color: #4d5d69;
+  --cpu-help-icon-hover-color: #4d5d69;
+  --cpu-help-icon-active-color: #008fd6;
+  --cpu-help-close-icon-color: #182531;
+  --cpu-help-more-info-color: #008fd6;
+}
+:root.dark-theme {
+  --cpu-help-color: #e9eaec;
+  --cpu-help-icon-hover-color: #e9eaec;
+  --cpu-help-icon-active-color: #2ba2de;
+  --cpu-help-close-icon-color: #e9eaec;
+  --cpu-help-more-info-color: #2ba2de;
+}
+
+.light-theme {
+  .stack-block-expanded {
+    --cpu-help-icon-hover-color: #e9eaec;
+    --cpu-help-icon-active-color: #2ba2de;
+  }
+}
+.dark-theme {
+  .stack-block-expanded {
+    --cpu-help-icon-hover-color: #4d5d69;
+    --cpu-help-icon-active-color: #008fd6;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.cpu-help-icon {
+  color: #9da6ad; // for light and dark
+
+  &:hover {
+    color: var(--cpu-help-icon-hover-color);
+  }
+  &.active {
+    color: var(--cpu-help-icon-active-color);
+  }
+}
+.cpu-help-content {
+  padding: 16px;
+
+  .headline {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+
+    .cpu-help-title {
+      flex: 1;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16.94px;
+      color: var(--cpu-help-color);
+    }
+    .cpu-help-close-icon {
+      color: var(--cpu-help-close-icon-color);
+    }
+  }
+
+  .cpu-help-text {
+    font-size: 13px;
+    line-height: 15.73px;
+    color: var(--cpu-help-color);
+    margin-bottom: 12px;
+  }
+
+  .cpu-more-info {
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 15.73px;
+    color: var(--cpu-help-more-info-color);
+    text-decoration: none;
+  }
+}
+</style>