@hsu-react/ui 0.0.4 → 0.0.7

package/src/components/Select/_components/Suffix/index.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import styles from "../../index.module.less";
+import styles from "../../index.module.scss";
 
 interface SuffixProps {
   suffix: ReactNode;

package/src/components/Select/index.tsx

@@ -4,7 +4,7 @@ import { BaseSelectRef } from "rc-select";
 import { DefaultOptionType } from "antd/es/select";
 import Icon from "../Icon";
 import classNames from "classnames";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import { generateRandomStr } from "hsu-utils";
 import { useSelectComposition, useSelectPopupPosition } from "./_hooks";
 import { getElementLeft, calculatePopupWidth, filterOption } from "./_utils";

package/src/components/Slider/index.tsx

@@ -5,7 +5,7 @@ import {
 import React, { useEffect, useState } from "react";
 
 import classNames from "classnames";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 export interface SliderProps extends AntdSliderSingleProps {
   topValue?: number;

package/src/components/Spreadsheet/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import XSpreadsheet, { Options } from "x-data-spreadsheet";
 import { Equal, generateRandomStr } from "hsu-utils";
 import "x-data-spreadsheet/dist/xspreadsheet.css";

package/src/components/Switch/index.tsx

@@ -1,7 +1,7 @@
 import { SwitchProps as AntSwitchProps, Switch as AntSwitch } from "antd";
 import React from "react";
 import { SelectOption } from "../Select";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 export interface SwitchProps extends AntSwitchProps {
   options?: SelectOption[];

package/src/components/TabBar/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 
 import classNames from "classnames";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import { useNavigate } from "@hsu-react/single-router";
 
 export type TabGroupType = TabGroup;

package/src/components/Table/_components/Pagination/index.tsx

@@ -8,7 +8,7 @@ import React, { ReactNode, useMemo, useRef } from "react";
 import { BaseSelectRef } from "rc-select";
 import Icon from "../../../Icon";
 import classNames from "classnames";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import usePaginationSync from "../../_hooks/usePaginationSync";
 
 export interface PaginationProps

package/src/components/Table/_hooks/useTableColumns.tsx

@@ -6,7 +6,7 @@ import { ColumnsType as AntColumnsType } from "antd/lib/table";
 import { cloneDeep } from "lodash";
 import { Tooltip } from "antd";
 import Icon from "../../Icon";
-import styles from "../index.module.less";
+import styles from "../index.module.scss";
 import { SorterResult, TableCurrentDataSource } from "antd/es/table/interface";
 import { TablePaginationConfig } from "antd/es/table/interface";
 import { FilterValue } from "antd/es/table/interface";
@@ -19,6 +19,30 @@ import {
 import usePermissions from "../../../hooks/usePermissions";
 import { PaginationProps } from "../_components/Pagination";
 
+// measureAlign 列：与表体、autoWidth 标题测量一致，统一按 14px 测量
+const MEASURE_ALIGN_FONT_SIZE = 14;
+// Canvas measureText 仅返回 advance width，较 DOM 实际渲染偏窄约 1px，补 2px 缓冲避免最宽行被挤压
+const MEASURE_ALIGN_BUFFER_PX = 2;
+
+// 计算 measureAlign 列的定宽（取本列所有行展示文本的最大像素宽）
+const getMeasureAlignWidth = <T extends AnyObject>(
+  column: ColumnType<T>,
+  dataSource?: readonly T[]
+): number => {
+  if (!dataSource?.length) return 0;
+  const { measureText, dataIndex } = column;
+  const max = dataSource.reduce((acc, record) => {
+    const text = measureText
+      ? measureText(record)
+      : String((dataIndex ? record[dataIndex] : "") ?? "");
+    return Math.max(
+      acc,
+      get_string_size(text, { size: MEASURE_ALIGN_FONT_SIZE }).width
+    );
+  }, 0);
+  return max > 0 ? Math.ceil(max) + MEASURE_ALIGN_BUFFER_PX : 0;
+};
+
 interface UseTableColumnsParams<T extends AnyObject> {
   columns?: ColumnsType<T>;
   scroll?: boolean | { y: boolean };
@@ -276,6 +300,34 @@ const useTableColumns = <T extends AnyObject>(
         const orderKey = column.orderKey || column.dataIndex;
         const isOrderColumn = orderKey && orderKey !== "serialNumber";
 
+        // measureAlign 列：把展示内容包进定宽右对齐块（块随列 align 居中），各行右边缘对齐。
+        // 不适用于 render 返回 { children, rowSpan } 这类 RenderedCell 的合并单元格场景。
+        let render = column.render;
+        if (column.measureAlign) {
+          const cellWidth = getMeasureAlignWidth(
+            column as ColumnType<T>,
+            dataSource
+          );
+          if (cellWidth > 0) {
+            const innerRender = column.render;
+            render = (value: unknown, record: T, index: number) => (
+              <span
+                style={{
+                  display: "inline-block",
+                  width: cellWidth,
+                  textAlign: "right",
+                }}
+              >
+                {
+                  (innerRender
+                    ? innerRender(value, record, index)
+                    : value) as React.ReactNode
+                }
+              </span>
+            );
+          }
+        }
+
         return {
           showSorterTooltip: false,
           sorter:
@@ -283,6 +335,7 @@ const useTableColumns = <T extends AnyObject>(
           ...column,
           orderKey,
           title: renderColumnTitle(column),
+          render,
           children: column?.children
             ? renderColumns(column.children)
             : undefined,
@@ -328,6 +381,7 @@ const useTableColumns = <T extends AnyObject>(
       renderColumnTitle,
       order,
       mergeRowDataSource,
+      dataSource,
     ]
   );
 

package/src/components/Table/index.md

@@ -45,7 +45,7 @@ export default () => (
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| columns | 列配置，使用自定义 `ColumnsType`（支持 `hidden`、`sort`、`hasPermi`、`help`、`mergeRow`、`fixedWidth`、`ellipsisPosition` 等） | `ColumnsType<RecordType>` | `[]` |
+| columns | 列配置，使用自定义 `ColumnsType`（支持 `hidden`、`sort`、`hasPermi`、`help`、`mergeRow`、`fixedWidth`、`ellipsisPosition`、`measureAlign`、`measureText` 等） | `ColumnsType<RecordType>` | `[]` |
 | scroll | 是否开启滚动；`{ y: false }` 可关闭纵向滚动 | `boolean \| { y: boolean }` | `false` |
 | pagination | 分页配置；为 `false` 时不展示分页 | `false \| PaginationProps` | `{}` |
 | autoWidth | 列宽自适应 | `boolean` | - |
@@ -73,4 +73,15 @@ export default () => (
 | showTotal | 自定义分页总数展示；为 `false` 时不展示 | `false \| ((total, range) => ReactNode)` | - |
 | isExpandedCellTable | 是否为展开行内嵌表格样式 | `boolean` | `false` |
 
+### ColumnType 扩展字段：measureAlign
+
+数字/金额/单量列适用：按本列所有行展示文本测量出最大像素宽，把单元格内容包进该定宽块内右对齐，块本身随列 `align` 居中——各行右边缘对齐、整体在列内居中。
+
+| 字段 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| measureAlign | 开启定宽右对齐（配合列 `align: "center"` 使用） | `boolean` | - |
+| measureText | 测量宽度所用文本；当单元格由 `render` 产出复合/JSX 内容时，用它提供与展示一致的文本（默认取 `dataIndex` 原始值） | `(record) => string` | - |
+
+> 注意：不适用于 `render` 返回 `{ children, rowSpan }` 这类合并单元格场景。
+
 > 另导出 `TableDrag`，用于行拖拽排序场景。

package/src/components/Table/index.tsx

@@ -14,7 +14,7 @@ import React, { CSSProperties, ReactNode, useMemo, useRef } from "react";
 import { AnyObject } from "antd/es/_util/type";
 import { generateRandomStr } from "hsu-utils";
 import classNames from "classnames";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import useHideHeaderScrollbar from "./_hooks/useHideHeaderScrollbar";
 import useSetTableHeight from "./_hooks/useSetTableHeight";
 import { ColumnTitleProps } from "antd/lib/table/interface";
@@ -46,6 +46,16 @@ export interface ColumnType<RecordType> extends AntColumnType<RecordType> {
   orderKey?: string;
   fixedWidth?: boolean;
   ellipsisPosition?: "start" | "end";
+  /**
+   * 定宽对齐列：列标题随 align 居中，单元格内容放进按本列最宽内容
+   * 测量出的定宽块内右对齐，使各行右边缘对齐、整体在列内居中（适合数字/金额列）。
+   */
+  measureAlign?: boolean;
+  /**
+   * measureAlign 列测量宽度所用的文本。默认取 dataIndex 原始值；当单元格由 render
+   * 产出复合/JSX 内容（无法从 dataIndex 直接得到展示文本）时，用它提供与展示一致的文本。
+   */
+  measureText?: (record: RecordType) => string;
 }
 export interface ColumnsGroupType<RecordType>
   extends Omit<AntColumnGroupType<RecordType>, "children"> {
@@ -62,6 +72,8 @@ export interface ColumnsGroupType<RecordType>
   orderKey?: string;
   fixedWidth?: boolean;
   ellipsisPosition?: "start" | "end";
+  measureAlign?: boolean;
+  measureText?: (record: RecordType) => string;
 }
 export type ColumnsType<RecordType = AnyObject> = (
   | ColumnType<RecordType>

package/src/components/Tags/_components/EllipsisTag/index.tsx

@@ -1,7 +1,7 @@
 import { Tag, Tooltip } from "antd";
 import React from "react";
 import { getTagColor } from "../../_utils";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 export interface EllipsisTagProps {
   ellipsisTags: string[];

package/src/components/Tags/_components/MeasureContainer/index.tsx

@@ -1,7 +1,7 @@
 import { Tag } from "antd";
 import React from "react";
 import { getTagColor } from "../../_utils";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 export interface MeasureContainerProps {
   tags: string[];

package/src/components/Tags/index.tsx

@@ -5,7 +5,7 @@ import { useVisibleTags } from "./_hooks";
 import { getTagColor } from "./_utils";
 import EllipsisTag from "./_components/EllipsisTag";
 import MeasureContainer from "./_components/MeasureContainer";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 
 export interface TagsProps {
   className?: string;

package/src/components/TextEllipsis/index.tsx

@@ -1,6 +1,6 @@
 import { Tooltip, TooltipProps } from "antd";
 import { ReactNode, useEffect, useRef, useState } from "react";
-import cssStyles from "./index.module.less";
+import cssStyles from "./index.module.scss";
 
 // 默认 Tooltip 宽度
 const DEFAULT_TOOLTIP_WIDTH = 200;

package/src/components/Tree/_components/TitleSearchBar/index.tsx

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import Input, { InputProps } from "../../../Input";
 import Icon from "../../../Icon";
 import Button, { ButtonProps } from "../../../Button";
-import styles from "../../index.module.less";
+import styles from "../../index.module.scss";
 
 export interface TitleSearchBarProps {
   title?: React.ReactNode;

package/src/components/Tree/index.tsx

@@ -9,7 +9,7 @@ import React, {
   useRef,
 } from "react";
 import { generateRandomStr } from "hsu-utils";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import classNames from "classnames";
 import TitleSearchBar from "./_components/TitleSearchBar";
 import { useTreeSearch } from "./_hooks/useTreeSearch";

package/src/components/Upload/_components/UploadedItem/index.tsx

@@ -5,7 +5,7 @@ import Button from "../../../Button";
 import { downloadFile } from "hsu-utils";
 import { deepCopy } from "hsu-utils";
 import { FilePreviewTypeArr } from "../../../FilePreview";
-import styles from "../../index.module.less";
+import styles from "../../index.module.scss";
 import { UploadProps } from "../..";
 
 interface UploadedItemProps {

package/src/components/Upload/_components/UploadingItem/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { UploadFile, Progress, Tooltip, Popconfirm } from "antd";
 import classNames from "classnames";
 import Button from "../../../Button";
-import styles from "../../index.module.less";
+import styles from "../../index.module.scss";
 
 interface UploadingItemProps {
   file: UploadFile;

package/src/components/Upload/index.tsx

@@ -8,7 +8,7 @@ import React, { useCallback } from "react";
 import { Canceler } from "axios";
 import { RcFile } from "antd/es/upload";
 import { deepCopy } from "hsu-utils";
-import styles from "./index.module.less";
+import styles from "./index.module.scss";
 import classNames from "classnames";
 import { ButtonProps, ProgressProps } from "antd";
 import FilePreview, { FilePreviewType } from "../FilePreview";

package/src/styles/utils.scss

@@ -0,0 +1,81 @@
+/* =========================================================
+ * utils.scss
+ * Design: 1366 x 768
+ * Rule:   x/width -> vw, y/height -> vh
+ * Mode:   function (return calc() expressions)
+ *
+ * Usage:
+ *   .banner {
+ *     background-size: 100% vh(239);
+ *   }
+ *
+ *   .box {
+ *     width: vw(600);
+ *     height: vh(300);
+ *   }
+ * ========================================================= */
+
+$design-w: 1366;
+$design-h: 768;
+
+/* -------------------------
+ * vw (width/x-axis)
+ * ------------------------- */
+@function vw($px) {
+  @return calc((#{$px} / #{$design-w}) * 100vw);
+}
+
+@function vw2($a, $b) {
+  @return calc((#{$a} / #{$design-w}) * 100vw) calc((#{$b} / #{$design-w}) * 100vw);
+}
+
+@function vw3($a, $b, $c) {
+  @return calc((#{$a} / #{$design-w}) * 100vw) calc((#{$b} / #{$design-w}) * 100vw)
+    calc((#{$c} / #{$design-w}) * 100vw);
+}
+
+@function vw4($t, $r, $b, $l) {
+  @return calc((#{$t} / #{$design-w}) * 100vw) calc((#{$r} / #{$design-w}) * 100vw)
+    calc((#{$b} / #{$design-w}) * 100vw) calc((#{$l} / #{$design-w}) * 100vw);
+}
+
+/* -------------------------
+ * vh (height/y-axis)
+ * ------------------------- */
+@function vh($px) {
+  @return calc((#{$px} / #{$design-h}) * 100vh);
+}
+
+@function vh2($a, $b) {
+  @return calc((#{$a} / #{$design-h}) * 100vh) calc((#{$b} / #{$design-h}) * 100vh);
+}
+
+@function vh3($a, $b, $c) {
+  @return calc((#{$a} / #{$design-h}) * 100vh) calc((#{$b} / #{$design-h}) * 100vh)
+    calc((#{$c} / #{$design-h}) * 100vh);
+}
+
+@function vh4($t, $r, $b, $l) {
+  @return calc((#{$t} / #{$design-h}) * 100vh) calc((#{$r} / #{$design-h}) * 100vh)
+    calc((#{$b} / #{$design-h}) * 100vh) calc((#{$l} / #{$design-h}) * 100vh);
+}
+
+/* =========================================================
+ * Examples (delete if you want)
+ * ========================================================= */
+/*
+.banner {
+  background-size: 100% vh(239);
+}
+
+.card {
+  padding: vw4(24, 32, 24, 32);
+  border-radius: vh(16);
+}
+
+.modal {
+  width: vw(600);
+  height: vh(400);
+  transform: translateY(vh(50));
+}
+*/

package/src/typings.d.ts

@@ -1,8 +1,8 @@
 // 环境声明：为构建期类型检查 / 声明文件生成补充缺失的模块类型。
 // 仅提供类型，不影响运行时行为。
 
-// CSS / Less Modules
-declare module "*.module.less" {
+// CSS / Sass Modules
+declare module "*.module.scss" {
   const classes: { readonly [key: string]: string };
   export default classes;
 }
@@ -10,7 +10,7 @@ declare module "*.module.css" {
   const classes: { readonly [key: string]: string };
   export default classes;
 }
-declare module "*.less" {
+declare module "*.scss" {
   const content: string;
   export default content;
 }

package/es/styles/utils.less

@@ -1,88 +0,0 @@
-/* =========================================================
- * utils.less
- * Design: 1366 x 768
- * Rule:   x/width -> vw, y/height -> vh
- * Mode:   variable (generate @vw / @vh / @vw2 / @vh2 ... )
- *
- * Usage:
- *   .banner {
- *     .vh(239);          // => @vh
- *     background-size: 100% @vh;
- *   }
- *
- *   .box {
- *     .vw(600); width: @vw;
- *     .vh(300); height: @vh;
- *   }
- * ========================================================= */
-
-@design-w: 1366;
-@design-h: 768;
-
-/* -------------------------
- * vw (width/x-axis)
- * ------------------------- */
-.vw(@px) {
-  @vw: calc((@px / @design-w) * 100vw);
-}
-
-.vw2(@a; @b) {
-  @vw2: calc((@a / @design-w) * 100vw) calc((@b / @design-w) * 100vw);
-}
-
-.vw3(@a; @b; @c) {
-  @vw3: calc((@a / @design-w) * 100vw) calc((@b / @design-w) * 100vw)
-    calc((@c / @design-w) * 100vw);
-}
-
-.vw4(@t; @r; @b; @l) {
-  @vw4: calc((@t / @design-w) * 100vw) calc((@r / @design-w) * 100vw)
-    calc((@b / @design-w) * 100vw) calc((@l / @design-w) * 100vw);
-}
-
-/* -------------------------
- * vh (height/y-axis)
- * ------------------------- */
-.vh(@px) {
-  @vh: calc((@px / @design-h) * 100vh);
-}
-
-.vh2(@a; @b) {
-  @vh2: calc((@a / @design-h) * 100vh) calc((@b / @design-h) * 100vh);
-}
-
-.vh3(@a; @b; @c) {
-  @vh3: calc((@a / @design-h) * 100vh) calc((@b / @design-h) * 100vh)
-    calc((@c / @design-h) * 100vh);
-}
-
-.vh4(@t; @r; @b; @l) {
-  @vh4: calc((@t / @design-h) * 100vh) calc((@r / @design-h) * 100vh)
-    calc((@b / @design-h) * 100vh) calc((@l / @design-h) * 100vh);
-}
-
-/* =========================================================
- * Examples (delete if you want)
- * ========================================================= */
-/*
-.banner {
-  .vh(239);
-  background-size: 100% @vh;
-}
-
-.card {
-  .vw4(24; 32; 24; 32);
-  padding: @vw4;
-
-  .vh(16);
-  border-radius: @vh;
-}
-
-.modal {
-  .vw(600); width: @vw;
-  .vh(400); height: @vh;
-
-  .vh(50);
-  transform: translateY(@vh);
-}
-*/

package/lib/styles/utils.less

@@ -1,88 +0,0 @@
-/* =========================================================
- * utils.less
- * Design: 1366 x 768
- * Rule:   x/width -> vw, y/height -> vh
- * Mode:   variable (generate @vw / @vh / @vw2 / @vh2 ... )
- *
- * Usage:
- *   .banner {
- *     .vh(239);          // => @vh
- *     background-size: 100% @vh;
- *   }
- *
- *   .box {
- *     .vw(600); width: @vw;
- *     .vh(300); height: @vh;
- *   }
- * ========================================================= */
-
-@design-w: 1366;
-@design-h: 768;
-
-/* -------------------------
- * vw (width/x-axis)
- * ------------------------- */
-.vw(@px) {
-  @vw: calc((@px / @design-w) * 100vw);
-}
-
-.vw2(@a; @b) {
-  @vw2: calc((@a / @design-w) * 100vw) calc((@b / @design-w) * 100vw);
-}
-
-.vw3(@a; @b; @c) {
-  @vw3: calc((@a / @design-w) * 100vw) calc((@b / @design-w) * 100vw)
-    calc((@c / @design-w) * 100vw);
-}
-
-.vw4(@t; @r; @b; @l) {
-  @vw4: calc((@t / @design-w) * 100vw) calc((@r / @design-w) * 100vw)
-    calc((@b / @design-w) * 100vw) calc((@l / @design-w) * 100vw);
-}
-
-/* -------------------------
- * vh (height/y-axis)
- * ------------------------- */
-.vh(@px) {
-  @vh: calc((@px / @design-h) * 100vh);
-}
-
-.vh2(@a; @b) {
-  @vh2: calc((@a / @design-h) * 100vh) calc((@b / @design-h) * 100vh);
-}
-
-.vh3(@a; @b; @c) {
-  @vh3: calc((@a / @design-h) * 100vh) calc((@b / @design-h) * 100vh)
-    calc((@c / @design-h) * 100vh);
-}
-
-.vh4(@t; @r; @b; @l) {
-  @vh4: calc((@t / @design-h) * 100vh) calc((@r / @design-h) * 100vh)
-    calc((@b / @design-h) * 100vh) calc((@l / @design-h) * 100vh);
-}
-
-/* =========================================================
- * Examples (delete if you want)
- * ========================================================= */
-/*
-.banner {
-  .vh(239);
-  background-size: 100% @vh;
-}
-
-.card {
-  .vw4(24; 32; 24; 32);
-  padding: @vw4;
-
-  .vh(16);
-  border-radius: @vh;
-}
-
-.modal {
-  .vw(600); width: @vw;
-  .vh(400); height: @vh;
-
-  .vh(50);
-  transform: translateY(@vh);
-}
-*/

package/src/styles/utils.less

@@ -1,88 +0,0 @@
-/* =========================================================
- * utils.less
- * Design: 1366 x 768
- * Rule:   x/width -> vw, y/height -> vh
- * Mode:   variable (generate @vw / @vh / @vw2 / @vh2 ... )
- *
- * Usage:
- *   .banner {
- *     .vh(239);          // => @vh
- *     background-size: 100% @vh;
- *   }
- *
- *   .box {
- *     .vw(600); width: @vw;
- *     .vh(300); height: @vh;
- *   }
- * ========================================================= */
-
-@design-w: 1366;
-@design-h: 768;
-
-/* -------------------------
- * vw (width/x-axis)
- * ------------------------- */
-.vw(@px) {
-  @vw: calc((@px / @design-w) * 100vw);
-}
-
-.vw2(@a; @b) {
-  @vw2: calc((@a / @design-w) * 100vw) calc((@b / @design-w) * 100vw);
-}
-
-.vw3(@a; @b; @c) {
-  @vw3: calc((@a / @design-w) * 100vw) calc((@b / @design-w) * 100vw)
-    calc((@c / @design-w) * 100vw);
-}
-
-.vw4(@t; @r; @b; @l) {
-  @vw4: calc((@t / @design-w) * 100vw) calc((@r / @design-w) * 100vw)
-    calc((@b / @design-w) * 100vw) calc((@l / @design-w) * 100vw);
-}
-
-/* -------------------------
- * vh (height/y-axis)
- * ------------------------- */
-.vh(@px) {
-  @vh: calc((@px / @design-h) * 100vh);
-}
-
-.vh2(@a; @b) {
-  @vh2: calc((@a / @design-h) * 100vh) calc((@b / @design-h) * 100vh);
-}
-
-.vh3(@a; @b; @c) {
-  @vh3: calc((@a / @design-h) * 100vh) calc((@b / @design-h) * 100vh)
-    calc((@c / @design-h) * 100vh);
-}
-
-.vh4(@t; @r; @b; @l) {
-  @vh4: calc((@t / @design-h) * 100vh) calc((@r / @design-h) * 100vh)
-    calc((@b / @design-h) * 100vh) calc((@l / @design-h) * 100vh);
-}
-
-/* =========================================================
- * Examples (delete if you want)
- * ========================================================= */
-/*
-.banner {
-  .vh(239);
-  background-size: 100% @vh;
-}
-
-.card {
-  .vw4(24; 32; 24; 32);
-  padding: @vw4;
-
-  .vh(16);
-  border-radius: @vh;
-}
-
-.modal {
-  .vw(600); width: @vw;
-  .vh(400); height: @vh;
-
-  .vh(50);
-  transform: translateY(@vh);
-}
-*/