@vc-shell/framework 1.1.0-alpha.6 → 1.1.0-alpha.7

package/shared/pages/LoginPage/components/login/Login.vue

@@ -154,7 +154,6 @@
     <VcHint
       v-if="!signInResult.succeeded"
       class="vc-login-page__error-hint"
-      style="color: #f14e4e"
     >
       <!-- TODO: stylizing-->
       {{ signInResult.error }}
@@ -162,7 +161,6 @@
     <VcHint
       v-if="!requestPassResult.succeeded"
       class="vc-login-page__error-hint"
-      style="color: #f14e4e"
     >
       <!-- TODO: stylizing-->
       {{ requestPassResult.error }}

package/ui/components/atoms/vc-badge/vc-badge.vue

@@ -17,6 +17,8 @@
           'vc-badge__badge--active': active,
           'vc-badge__badge--clickable': clickable,
           'vc-badge__badge--disabled': disabled,
+          'vc-badge__badge--content-long': String(content).length > 1,
+          'vc-badge__badge--content-very-long': String(content).length > 2,
         }"
         @click="onClick"
       >
@@ -78,11 +80,8 @@ function onClick(): void {
   --badge-border-color-active: var(--primary-300);
   --badge-border-color-disabled: var(--primary-200);
 
-  --badge-width-small: 16px;
-  --badge-width-medium: 16px;
-
-  --badge-padding-small: 0px 4px;
-  --badge-padding-medium: 0 4px;
+  --badge-size-small: 17px;
+  --badge-size-medium: 20px;
 
   --badge-distance-top-small: -8px;
   --badge-distance-right-small: -10px;
@@ -97,12 +96,11 @@ $sizes: small, medium;
   .vc-badge {
     &--#{$size} {
       .vc-badge__badge {
-        min-width: var(--badge-width-#{$size});
-        padding: var(--badge-padding-#{$size});
+        height: var(--badge-size-#{$size});
+        min-width: var(--badge-size-#{$size});
         top: var(--badge-distance-top-#{$size});
         right: var(--badge-distance-right-#{$size});
-        width: 100%;
-        @apply tw-text-xs tw-leading-snug;
+        @apply tw-text-xxs tw-leading-snug;
       }
     }
   }
@@ -113,7 +111,25 @@ $sizes: small, medium;
 }
 
 .vc-badge__badge {
-  @apply tw-absolute tw-inline-flex tw-justify-center tw-items-center tw-text-center tw-indent-0 tw-rounded-full tw-font-semibold tw-text-xxs tw-bg-[color:var(--badge-background-color)] tw-text-[color:var(--badge-text-color)] tw-border tw-border-solid tw-border-[color:var(--badge-border-color)] tw-transition tw-duration-200;
+  @apply tw-absolute tw-inline-flex tw-justify-center tw-items-center tw-text-center tw-indent-0 tw-rounded-full tw-font-semibold tw-bg-[color:var(--badge-background-color)] tw-text-[color:var(--badge-text-color)] tw-border tw-border-solid tw-border-[color:var(--badge-border-color)] tw-transition tw-duration-200;
+  aspect-ratio: 1 / 1;
+  box-sizing: border-box;
+  white-space: nowrap;
+  line-height: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vc-badge__badge--content-long {
+  aspect-ratio: auto;
+}
+
+.vc-badge__badge--content-very-long {
+  aspect-ratio: auto;
+  max-width: 40px;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .vc-badge__badge--active {

package/ui/components/atoms/vc-tooltip/vc-tooltip.vue

@@ -27,7 +27,7 @@
 
 <script lang="ts" setup>
 import { useFloating, shift, Placement, offset as floatingOffset } from "@floating-ui/vue";
-import { getCurrentInstance, ref } from "vue";
+import { getCurrentInstance, ref, computed } from "vue";
 
 export interface Props {
   placement?: Placement;
@@ -59,7 +59,7 @@ const target = ref(null);
 let showTimeout: NodeJS.Timeout | null = null;
 
 const instance = getCurrentInstance();
-const appContainer = instance?.appContext.app._container.id;
+const appContainer = computed(() => instance?.appContext.app._container?.id);
 
 const { floatingStyles } = useFloating(tooltipCompRef, tooltipRef, {
   placement: props.placement,

package/ui/components/organisms/vc-app/_internal/vc-app-bar/_internal/AppBarHeader.vue

@@ -45,7 +45,9 @@
           text
           :icon="SearchIcon"
           icon-size="l"
-          @click="globalSearch.toggleSearch(currentBladeId)"
+          class="app-bar-header__actions-button"
+          :class="{ 'app-bar-header__actions-button--active': isSearchVisible }"
+          @click="globalSearch.toggleSearch(bladeId)"
         />
       </div>
       <slot name="notifications" />
@@ -74,11 +76,12 @@
 <script lang="ts" setup>
 import { VcIcon } from "../../../../../";
 import { MenuBurgerIcon, SearchIcon } from "../../../../../atoms/vc-icon/icons";
-import { computed, Ref, ref, watchEffect } from "vue";
+import { computed, Ref, ref, watch, watchEffect } from "vue";
 import { useNotifications } from "../../../../../../../core/composables";
 import { watchDebounced } from "@vueuse/core";
 import { useBladeNavigation } from "./../../../../../../../shared";
 import { useGlobalSearch } from "../../../../../../../core/composables/useGlobalSearch";
+import { FALLBACK_BLADE_ID } from "../../../../../../../core/constants";
 
 defineProps<{
   logo?: string;
@@ -99,6 +102,17 @@ const { notifications } = useNotifications();
 const { blades, currentBladeNavigationData } = useBladeNavigation();
 const globalSearch = useGlobalSearch();
 
+watch(
+  () => globalSearch.isSearchVisible.value,
+  (value) => {
+    console.log(value);
+  },
+);
+
+const bladeId = computed(() => {
+  return blades.value[blades.value.length - 1]?.type.name || FALLBACK_BLADE_ID;
+});
+
 const viewTitle = ref("");
 const currentBladeId = ref(0);
 
@@ -115,6 +129,10 @@ watchEffect(
 const hasUnread = computed(() => {
   return notifications.value.some((item) => item.isNew);
 });
+
+const isSearchVisible = computed(() => {
+  return globalSearch.isSearchVisible.value[bladeId.value];
+});
 </script>
 
 <style lang="scss">
@@ -122,6 +140,9 @@ const hasUnread = computed(() => {
   --app-bar-header-padding-top: 18px;
   --app-bar-header-blade-title: var(--neutrals-950);
   --app-bar-accent-color: var(--danger-500);
+
+  --app-bar-header-actions-button-color: var(--neutrals-500);
+  --app-bar-header-actions-button-active-color: var(--primary-500);
 }
 
 .app-bar-header {
@@ -174,5 +195,13 @@ const hasUnread = computed(() => {
   &__logo-append {
     @apply tw-flex tw-items-center;
   }
+
+  &__actions-button {
+    @apply tw-cursor-pointer tw-text-[var(--app-bar-header-actions-button-color)] #{!important};
+
+    &--active {
+      @apply tw-text-[var(--app-bar-header-actions-button-active-color)] #{!important};
+    }
+  }
 }
 </style>

package/ui/components/organisms/vc-app/_internal/vc-app-bar/_internal/AppBarOverlay.vue

@@ -1,18 +1,20 @@
 <template>
-  <div
-    class="app-bar-overlay"
-    :class="{
-      'app-bar-overlay--mobile': $isMobile.value,
-      'app-bar-overlay--desktop': $isDesktop.value,
-      'app-bar-overlay--sidebar': isSidebarMode,
-      'app-bar-overlay--standalone-mobile': $isMobile.value && !isSidebarMode,
-      'app-bar-overlay--collapsed': !expanded && !$isMobile.value,
-    }"
-  >
-    <div class="app-bar-overlay__content app-bar-overlay__dropdowns">
-      <slot />
+  <Teleport to="body">
+    <div
+      class="app-bar-overlay"
+      :class="{
+        'app-bar-overlay--mobile': $isMobile.value,
+        'app-bar-overlay--desktop': $isDesktop.value,
+        'app-bar-overlay--sidebar': isSidebarMode,
+        'app-bar-overlay--standalone-mobile': $isMobile.value && !isSidebarMode,
+        'app-bar-overlay--collapsed': !expanded && !$isMobile.value,
+      }"
+    >
+      <div class="app-bar-overlay__content app-bar-overlay__dropdowns">
+        <slot />
+      </div>
     </div>
-  </div>
+  </Teleport>
 </template>
 
 <script lang="ts" setup>

package/ui/components/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -8,25 +8,13 @@
   ></div>
   <div
     class="vc-app-bar"
-    :class="{
-      'vc-app-bar--mobile': $isMobile.value,
-      'vc-app-bar--desktop': $isDesktop.value,
-      'vc-app-bar--collapsed': !state.isSidebarExpanded && $isDesktop.value,
-      'vc-app-bar--hover-expanded': $isDesktop.value && isHoverExpanded,
-      'vc-app-bar--hover-collapsed': $isDesktop.value && !state.isSidebarExpanded && !isHoverExpanded,
-    }"
+    :class="appBarClasses"
     @mouseenter="$isDesktop.value && !state.isSidebarExpanded && handleHoverExpand(true)"
     @mouseleave="$isDesktop.value && !state.isSidebarExpanded && handleHoverExpand(false)"
   >
     <div
       class="vc-app-bar__wrap"
-      :class="{
-        'vc-app-bar__wrap--mobile-expanded': $isMobile.value && state.isSidebarExpanded,
-        'vc-app-bar__wrap--desktop-collapsed': $isDesktop.value && !state.isSidebarExpanded,
-        'vc-app-bar__wrap--desktop-expanded': $isDesktop.value && state.isSidebarExpanded,
-        'vc-app-bar__wrap--hover-expanded': $isDesktop.value && isHoverExpanded && !state.isSidebarExpanded,
-        'vc-app-bar__wrap--hover-collapsed': $isDesktop.value && !isHoverExpanded && !state.isSidebarExpanded,
-      }"
+      :class="wrapClasses"
     >
       <div
         v-if="!$isMobile.value"
@@ -139,7 +127,7 @@ import AppBarHeader from "./_internal/AppBarHeader.vue";
 import AppBarOverlay from "./_internal/AppBarOverlay.vue";
 import MenuSidebar from "./_internal/MenuSidebar.vue";
 import AppBarContent from "./_internal/AppBarContent.vue";
-import { ref, computed, provide } from "vue";
+import { ref, computed, provide, inject } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
 
 export interface Props {
@@ -175,6 +163,9 @@ const {
 } = useAppMenuState();
 const { overlayContent, overlayProps, hideContent, isOverlayed } = useAppBarOverlay();
 
+const isMobile = inject("isMobile", ref(false));
+const isDesktop = inject("isDesktop", ref(true));
+
 // Provide appMenuState для дочерних компонентов
 provide("appMenuState", { closeAll });
 
@@ -204,6 +195,26 @@ const shouldShowOverlay = computed(() => {
 const shouldShowInMenu = computed(() => {
   return overlayContent.value && !isOverlayed.value && state.value.isMenuOpen;
 });
+
+const appBarClasses = computed(() => {
+  return {
+    "vc-app-bar--mobile": isMobile.value,
+    "vc-app-bar--desktop": isDesktop.value,
+    "vc-app-bar--collapsed": !state.value.isSidebarExpanded && isDesktop.value,
+    "vc-app-bar--hover-expanded": isDesktop.value && isHoverExpanded.value,
+    "vc-app-bar--hover-collapsed": isDesktop.value && !state.value.isSidebarExpanded && !isHoverExpanded.value,
+  };
+});
+
+const wrapClasses = computed(() => {
+  return {
+    "vc-app-bar__wrap--mobile-expanded": isMobile.value && state.value.isSidebarExpanded,
+    "vc-app-bar__wrap--desktop-collapsed": isDesktop.value && !state.value.isSidebarExpanded,
+    "vc-app-bar__wrap--desktop-expanded": isDesktop.value && state.value.isSidebarExpanded,
+    "vc-app-bar__wrap--hover-expanded": isDesktop.value && isHoverExpanded.value && !state.value.isSidebarExpanded,
+    "vc-app-bar__wrap--hover-collapsed": isDesktop.value && !isHoverExpanded.value && !state.value.isSidebarExpanded,
+  };
+});
 </script>
 
 <style lang="scss">

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

@@ -1,6 +1,6 @@
 <template>
   <VcLoading
-    v-if="!isReady"
+    v-if="!isAppReady"
     active
     class="vc-app__loader"
   />
@@ -83,7 +83,7 @@
 </template>
 
 <script lang="ts" setup>
-import { h, inject, provide, computed, useAttrs } from "vue";
+import { h, inject, provide, computed, useAttrs, watch, toRef, ref, onBeforeUnmount, onUnmounted } from "vue";
 import VcAppBar from "./_internal/vc-app-bar/vc-app-bar.vue";
 import VcAppMenu from "./_internal/vc-app-menu/vc-app-menu.vue";
 import {
@@ -142,6 +142,9 @@ console.debug("vc-app: Init vc-app");
 
 const internalRoutes = inject("bladeRoutes") as BladeRoutesRecord[];
 const dynamicModules = inject(DynamicModulesKey, undefined);
+
+const isAppReady = ref(props.isReady);
+
 const router = useRouter();
 
 const { openBlade, closeBlade, resolveBladeByName, blades, goToRoot } = useBladeNavigation();
@@ -221,6 +224,7 @@ const openRoot = async () => {
 watchOnce(
   () => props.isReady,
   async (newVal) => {
+    isAppReady.value = newVal;
     if (isAuthenticated.value && newVal) {
       await loadFromHistory();
       await getApps();
@@ -228,11 +232,19 @@ watchOnce(
   },
 );
 
+watch(isAuthenticated, (newVal) => {
+  isAppReady.value = newVal;
+});
+
 provide("internalRoutes", internalRoutes);
 provide(DynamicModulesKey, dynamicModules);
 provideDashboardService();
 provideMenuService();
 createGlobalSearch();
+
+onUnmounted(() => {
+  isAppReady.value = false;
+});
 </script>
 
 <style lang="scss">

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

@@ -111,12 +111,11 @@
 
 <script lang="ts" setup>
 import { VcIcon } from "./../../../../";
-import { ComputedRef, computed, inject, ref } from "vue";
+import { computed, inject, ref } from "vue";
 import { useFloating, shift } from "@floating-ui/vue";
 import { CrossSignIcon, AppWindowIcon } from "../../../../atoms/vc-icon/icons";
 import { BladeInstance } from "../../../../../../injection-keys";
-import { Breadcrumbs } from "./../../../../../../ui/types";
-import VertDotsIcon from "../../../../atoms/vc-icon/icons/VertDotsIcon.vue";
+import { FALLBACK_BLADE_ID } from "../../../../../../core/constants";
 
 export interface Props {
   closable?: boolean;
@@ -132,7 +131,7 @@ const emit = defineEmits(["close", "expand", "collapse"]);
 const blade = inject(
   BladeInstance,
   computed(() => ({
-    id: "fallback-blade-id",
+    id: FALLBACK_BLADE_ID,
     error: undefined,
     expandable: false,
     maximized: false,
@@ -219,7 +218,7 @@ function onClose(): void {
   }
 
   &__status {
-    @apply tw-block tw-w-2 tw-h-2 tw-rounded-full tw-z-[1] tw-mr-[14px];
+    @apply tw-block tw-w-2 tw-h-2 tw-rounded-full tw-z-[1] tw-mr-[10px];
   }
 
   &__status-container {

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

@@ -78,7 +78,7 @@ const titleClassName = computed(() => {
     @apply tw-w-9 tw-h-9 tw-bg-[var(--blade-toolbar-circle-button-bg-color)] tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-[var(--blade-toolbar-circle-button-text-color)];
 
     &--main {
-      @apply tw-flex tw-w-auto tw-bg-[var(--blade-toolbar-circle-button-main-bg-color)] tw-ml-2;
+      @apply tw-flex tw-w-auto tw-bg-[var(--blade-toolbar-circle-button-main-bg-color)];
     }
 
     &--main-expanded {
@@ -95,7 +95,7 @@ const titleClassName = computed(() => {
   }
 
   &--main {
-    @apply tw-px-2;
+    @apply tw-px-4;
   }
 }
 </style>

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

@@ -115,7 +115,7 @@ function handleItemClick(item: IBladeToolbar) {
   }
 
   &__menu {
-    @apply tw-fixed tw-bottom-[167px] tw-right-[33px] tw-z-[60] tw-flex tw-flex-col tw-gap-2 tw-items-end;
+    @apply tw-fixed tw-bottom-[167px] tw-right-[33px] tw-z-[60] tw-flex tw-flex-col tw-gap-2 tw-items-end tw-px-2;
   }
 }
 

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

@@ -1,6 +1,5 @@
 <template>
   <div
-    v-if="isToolbarVisible"
     class="vc-blade-toolbar"
     :class="{
       'vc-blade-toolbar--mobile': $isMobile.value,
@@ -44,8 +43,6 @@ const visibleItems = computed(() => {
     (item) => hasAccess(item.permissions) && (item.isVisible === undefined || item.isVisible) && !item.disabled,
   );
 });
-
-const isToolbarVisible = computed(() => visibleItems.value.length > 0);
 </script>
 
 <style lang="scss">

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

@@ -136,6 +136,7 @@ import vcPopupError from "../../../../shared/components/common/popup/vc-popup-er
 import { BladeInstance, BLADE_BACK_BUTTON } from "../../../../injection-keys";
 import { default as VcWidgetContainer } from "./_internal/vc-blade-widget-container/vc-widget-container.vue";
 import VertDotsIcon from "../../atoms/vc-icon/icons/VertDotsIcon.vue";
+import { FALLBACK_BLADE_ID } from "../../../../core/constants";
 
 export interface Props {
   icon?: string;
@@ -205,7 +206,7 @@ const emit = defineEmits<Emits>();
 const blade = inject(
   BladeInstance,
   computed(() => ({
-    id: "fallback-blade-id",
+    id: FALLBACK_BLADE_ID,
     error: undefined,
     expandable: false,
     maximized: false,
@@ -356,7 +357,7 @@ const { open } = usePopup({
   }
 
   &__breadcrumbs {
-    @apply tw-mr-3;
+    @apply tw-mr-[10px];
 
     &-button {
       @apply tw-text-[color:var(--blade-header-breadcrumbs-button-color)] tw-cursor-pointer hover:tw-text-[color:var(--blade-header-breadcrumbs-button-color-hover)] #{!important};
@@ -430,6 +431,10 @@ const { open } = usePopup({
       @apply tw-hidden;
     }
   }
+
+  &__breadcrumbs-button {
+    @apply tw-p-0 #{!important};
+  }
 }
 
 .vc-app_mobile .vc-blade {

package/ui/components/organisms/vc-login-form/vc-login-form.vue

@@ -1,99 +1,99 @@
-<template>
-  <div
-    class="vc-login-form__container"
-    :style="backgroundImageHandler"
-  >
-    <div
-      class="vc-login-form__logo"
-      :style="logoImageHandler"
-    ></div>
-    <div class="vc-login-form__box">
-      <div class="vc-login-form__header">
-        {{ title }}
-      </div>
-      <div class="vc-login-form__content">
-        <slot></slot>
-      </div>
-    </div>
-    <div class="vc-login-form__version">
-      {{ version }}
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from "vue";
-import { useRouter } from "vue-router";
-
-export interface Props {
-  logo?: string;
-  background?: string;
-  title?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: "Login",
-});
-
-defineSlots<{
-  default: void;
-}>();
-
-const router = useRouter();
-
-const backgroundImageHandler = computed(() => {
-  if (props.background) {
-    return `background: url(${CSS.escape(props.background)}) center / cover no-repeat`;
-  }
-  return undefined;
-});
-
-const logoImageHandler = computed(() => {
-  if (props.logo) {
-    return `background: url(${CSS.escape(props.logo)}) center / contain no-repeat`;
-  }
-  return undefined;
-});
-
-const version = router.currentRoute.value.meta?.appVersion;
-
-console.debug("Init vc-login-form");
-</script>
-
-<style lang="scss">
-:root {
-  --login-version-color: var(--neutrals-400);
-  --login-header-bg-color: var(--secondary-700);
-  --login-box-shadow-color: var(--additional-950);
-  --login-box-shadow: rgb(from var(--login-box-shadow-color) r g b / 5%);
-  --login-bg-color: var(--additional-50);
-  --login-title-color: var(--additional-50);
-  --login-title-bg: var(--secondary-700);
-}
-
-.vc-login-form {
-  &__container {
-    @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center;
-  }
-
-  &__logo {
-    @apply tw-h-20 tw-w-[516px] tw-max-w-[90%] tw-mb-12 -tw-mt-24;
-  }
-
-  &__box {
-    @apply tw-w-[516px] tw-max-w-[90%] tw-bg-[var(--login-bg-color)] tw-rounded-md tw-overflow-hidden [box-shadow:var(--login-box-shadow)];
-  }
-
-  &__header {
-    @apply tw-uppercase tw-text-[var(--login-title-color)] tw-bg-[var(--login-title-bg)] tw-h-12 tw-px-7 tw-text-lg tw-flex tw-items-center;
-  }
-
-  &__content {
-    @apply tw-pt-4 tw-px-7 tw-pb-6;
-  }
-
-  &__version {
-    @apply tw-absolute tw-bottom-0.5 tw-left-[93px] tw-text-[var(--login-version-color)] tw-text-xs tw-mt-auto tw-self-center tw-p-1;
-  }
-}
-</style>
+<template>
+  <div
+    class="vc-login-form__container"
+    :style="backgroundImageHandler"
+  >
+    <div
+      class="vc-login-form__logo"
+      :style="logoImageHandler"
+    ></div>
+    <div class="vc-login-form__box">
+      <div class="vc-login-form__header">
+        {{ title }}
+      </div>
+      <div class="vc-login-form__content">
+        <slot></slot>
+      </div>
+    </div>
+    <div class="vc-login-form__version">
+      {{ version }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+
+export interface Props {
+  logo?: string;
+  background?: string;
+  title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: "Login",
+});
+
+defineSlots<{
+  default: void;
+}>();
+
+const router = useRouter();
+
+const backgroundImageHandler = computed(() => {
+  if (props.background) {
+    return `background: url(${CSS.escape(props.background)}) center / cover no-repeat`;
+  }
+  return undefined;
+});
+
+const logoImageHandler = computed(() => {
+  if (props.logo) {
+    return `background: url(${CSS.escape(props.logo)}) center / contain no-repeat`;
+  }
+  return undefined;
+});
+
+const version = router.currentRoute.value.meta?.appVersion;
+
+console.debug("Init vc-login-form");
+</script>
+
+<style lang="scss">
+:root {
+  --login-version-color: var(--neutrals-400);
+  --login-header-bg-color: var(--secondary-700);
+  --login-box-shadow-color: var(--additional-950);
+  --login-box-shadow: rgb(from var(--login-box-shadow-color) r g b / 5%);
+  --login-bg-color: var(--additional-50);
+  --login-title-color: var(--additional-50);
+  --login-title-bg: var(--secondary-700);
+}
+
+.vc-login-form {
+  &__container {
+    @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center;
+  }
+
+  &__logo {
+    @apply tw-h-20 tw-w-[516px] tw-max-w-[90%] tw-mb-12 -tw-mt-24;
+  }
+
+  &__box {
+    @apply tw-w-[516px] tw-max-w-[90%] tw-bg-[var(--login-bg-color)] tw-rounded-md tw-overflow-hidden [box-shadow:var(--login-box-shadow)];
+  }
+
+  &__header {
+    @apply tw-uppercase tw-text-[var(--login-title-color)] tw-bg-[var(--login-title-bg)] tw-h-12 tw-px-7 tw-text-lg tw-flex tw-items-center;
+  }
+
+  &__content {
+    @apply tw-pt-4 tw-px-7 tw-pb-6;
+  }
+
+  &__version {
+    @apply tw-absolute tw-bottom-0.5 tw-left-[93px] tw-text-[var(--login-version-color)] tw-text-xs tw-mt-auto tw-self-center tw-p-1;
+  }
+}
+</style>