@opendesign-plus-test/components 0.0.1-rc.217 → 0.0.1-rc.219

package/dist/treeshaking/components/user-center/styles/variables.css

@@ -1,361 +0,0 @@
-.hover-icon-rotate .o-icon {
-  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
-}
-@media (hover: hover) {
-  .hover-icon-rotate:hover .o-icon {
-    transform: rotate(-180deg);
-  }
-}
-
-/**
- * 全局响应式变量定义（桌面优先方式）
- * 基于栅格布局系统的响应式设计
- *
- * 设计方式：桌面优先（Desktop-First）
- * - 默认值为大屏幕（>= 1680px）设置
- * - 使用 @include uc-screen.respond-to() 在较小断点覆盖值
- *
- * 栅格布局规则：
- * 1680px+      - 24栅格 + 两侧64px间距，栅格间距32px，侧边栏5栅格+4间距，内容区15栅格+14间距
- * 1440-1680    - 24栅格 + 两侧64px间距，栅格间距32px，侧边栏5栅格+4间距，内容区17栅格+16间距
- * 1200-1440    - 24栅格 + 两侧40px间距，栅格间距24px，侧边栏5栅格+4间距，内容区17栅格+16间距
- * 840-1200     - 12栅格 + 两侧32px间距，栅格间距16px，侧边栏3栅格+2间距，内容区9栅格+8间距
- * <= 840       - 单栏布局
- */
-/* ============================================================
-   DEFAULT VALUES - 1680px+ (桌面 - 最高优先级)
-   24栅格 + 两侧64px间距，栅格间距32px
-   侧边栏: 5栅格 + 4间距 = (5 * 栅格宽 + 4 * 32px)
-   内容区: 15栅格 + 14间距 = (15 * 栅格宽 + 14 * 32px)
-   ============================================================ */
-:root {
-  /* 栅格系统 */
-  --grid-columns: 24;
-  --grid-gap: 32px;
-  --container-padding-x: 64px;
-  --container-padding-top: 40px;
-  --container-padding-bottom: 72px;
-  --header-height: 72px;
-  --footer-height: 56px;
-  --container-border-radius: 4px;
-  --item-height: 46px;
-  --item-padding: 15px 8px;
-  /* 两栏布局 - 栅格计算 */
-  --sidebar-grid-columns: 5;
-  --sidebar-grid-gaps: 4;
-  --content-grid-columns: 15;
-  --content-grid-gaps: 14;
-  /* 栅格宽度计算 (动态) */
-  /* 总宽度 = 100vw - 2*64px = 100vw - 128px */
-  /* 栅格宽度 = (100vw - 128px - 23*32px) / 24 */
-  /* 栅格宽度 = (100vw - 128px - 736px) / 24 = (100vw - 864px) / 24 */
-  --grid-item-width: calc((100vw - 128px - 736px) / 24);
-  --sidebar-width: calc(5 * var(--grid-item-width) + 4 * 32px);
-  --content-width: calc(15 * var(--grid-item-width) + 14 * 32px);
-  --footer-width: calc(20 * var(--grid-item-width) + 19 * 32px);
-  --page-min-height: calc(100vh - var(--container-padding-top) - var(--header-height) - var(--footer-height) - var(--container-padding-bottom));
-  /* 布局间距 */
-  --layout-gap: 32px;
-  --layout-gap2: 24px;
-  --layout-gap3: 16px;
-  --layout-gap4: 12px;
-  --padding-value-1: 32px;
-  --padding-value-2: 24px;
-  /* 字体大小 */
-  --font-size1: 24px;
-  --font-size2: 22px;
-  --font-size3: 20px;
-  --font-size4: 18px;
-  --font-size5: 16px;
-  --font-size6: 14px;
-  --font-size7: 12px;
-  /* 行高 */
-  --line-height1: 32px;
-  --line-height2: 30px;
-  --line-height3: 28px;
-  --line-height4: 26px;
-  --line-height5: 24px;
-  --line-height6: 22px;
-  --line-height7: 18px;
-  /* 输入框的宽度 */
-  --input-width1: 480px;
-  /* 输入框的高度 */
-  --input-height1: 40px;
-}
-
-/* ============================================================
-   1440-1680px - 平板横屏/笔记本
-   24栅格 + 两侧64px间距，栅格间距32px
-   侧边栏: 5栅格 + 4间距，内容区: 17栅格 + 16间距
-   ============================================================ */
-@media (min-width: 1401px) and (max-width: 1680px) {
-  :root {
-    /* 栅格系统 */
-    --grid-columns: 24;
-    --grid-gap: 32px;
-    --container-padding-x: 64px;
-    --container-padding-top: 24px;
-    --container-padding-bottom: 56px;
-    --header-height: 64px;
-    --footer-height: 48px;
-    --item-height: 38px;
-    --item-padding: 8px;
-    /* 两栏布局 - 栅格计算 */
-    --sidebar-grid-columns: 5;
-    --sidebar-grid-gaps: 4;
-    --content-grid-columns: 17;
-    --content-grid-gaps: 16;
-    /* 栅格宽度计算 */
-    /* 总宽度 = 1440px - 2*64px = 1312px */
-    /* 栅格宽度 = (1312px - 23*32px) / 24 = (1312px - 736px) / 24 = 576px / 24 = 24px */
-    --grid-item-width: calc((100vw - 736px - 128px) / 24);
-    --sidebar-width: calc(5 * var(--grid-item-width) + 4 * 32px);
-    --content-width: calc(17 * var(--grid-item-width) + 16 * 32px);
-    --footer-width: calc(22 * var(--grid-item-width) + 21 * 32px);
-    --page-min-height: calc(100vh - var(--container-padding-top) - var(--header-height) - var(--footer-height) - var(--container-padding-bottom));
-    /* 布局间距 */
-    --layout-gap: 24px;
-    --layout-gap2: 16px;
-    --layout-gap3: 12px;
-    --layout-gap4: 8px;
-    --padding-value-1: 24px;
-    --padding-value-2: 16px;
-    /* 字体大小 */
-    --font-size1: 20px;
-    --font-size2: 18px;
-    --font-size3: 18px;
-    --font-size4: 16px;
-    --font-size5: 14px;
-    --font-size6: 14px;
-    --font-size7: 12px;
-    /* 行高 */
-    --line-height1: 28px;
-    --line-height2: 26px;
-    --line-height3: 26px;
-    --line-height4: 24px;
-    --line-height5: 22px;
-    --line-height6: 22px;
-    --line-height7: 18px;
-    /* 输入框的宽度 */
-    --input-width1: 360px;
-    /* 输入框的高度 */
-    --input-height1: 36px;
-  }
-}
-/* ============================================================
-   1200-1440px - 平板横屏
-   24栅格 + 两侧40px间距，栅格间距24px
-   侧边栏: 5栅格 + 4间距，内容区: 17栅格 + 16间距
-   ============================================================ */
-@media (min-width: 1201px) and (max-width: 1440px) {
-  :root {
-    /* 栅格系统 */
-    --grid-columns: 24;
-    --grid-gap: 24px;
-    --container-padding-x: 40px;
-    --container-padding-top: 24px;
-    --container-padding-bottom: 56px;
-    --header-height: 64px;
-    --footer-height: 48px;
-    --item-height: 38px;
-    --item-padding: 8px;
-    /* 两栏布局 - 栅格计算 */
-    --sidebar-grid-columns: 5;
-    --sidebar-grid-gaps: 4;
-    --content-grid-columns: 17;
-    --content-grid-gaps: 16;
-    /* 栅格宽度计算 */
-    /* 总宽度 = 1200px - 2*40px = 1120px */
-    /* 栅格宽度 = (1120px - 23*24px) / 24 = (1120px - 552px) / 24 = 568px / 24 ≈ 23.67px */
-    --grid-item-width: calc((100vw - 552px - 80px) / 24);
-    --sidebar-width: calc(5 * var(--grid-item-width) + 4 * 24px);
-    --content-width: calc(17 * var(--grid-item-width) + 16 * 24px);
-    --footer-width: calc(22 * var(--grid-item-width) + 21 * 24px);
-    --page-min-height: calc(100vh - var(--container-padding-top) - var(--header-height) - var(--footer-height) - var(--container-padding-bottom));
-    /* 布局间距 */
-    --layout-gap: 24px;
-    --layout-gap2: 16px;
-    --layout-gap3: 12px;
-    --layout-gap4: 8px;
-    --padding-value-1: 24px;
-    --padding-value-2: 16px;
-    /* 字体大小 */
-    --font-size1: 20px;
-    --font-size2: 18px;
-    --font-size3: 18px;
-    --font-size4: 16px;
-    --font-size5: 14px;
-    --font-size6: 14px;
-    --font-size7: 12px;
-    /* 行高 */
-    --line-height1: 28px;
-    --line-height2: 26px;
-    --line-height3: 26px;
-    --line-height4: 24px;
-    --line-height5: 22px;
-    --line-height6: 22px;
-    --line-height7: 18px;
-    /* 输入框的宽度 */
-    --input-width1: 360px;
-    /* 输入框的高度 */
-    --input-height1: 36px;
-  }
-}
-/* ============================================================
-   840-1200px - 平板竖屏
-   12栅格 + 两侧32px间距，栅格间距16px
-   侧边栏: 3栅格 + 2间距，内容区: 9栅格 + 8间距
-   ============================================================ */
-@media (min-width: 841px) and (max-width: 1200px) {
-  :root {
-    /* 栅格系统 */
-    --grid-columns: 12;
-    --grid-gap: 16px;
-    --container-padding-x: 32px;
-    --container-padding-top: 16px;
-    --container-padding-bottom: 40px;
-    --header-height: 56px;
-    --footer-height: 40px;
-    --item-height: 38px;
-    --item-padding: 8px;
-    /* 两栏布局 - 栅格计算 */
-    --sidebar-grid-columns: 3;
-    --sidebar-grid-gaps: 2;
-    --content-grid-columns: 9;
-    --content-grid-gaps: 8;
-    /* 栅格宽度计算 */
-    /* 总宽度 = 840px - 2*32px = 776px */
-    /* 栅格宽度 = (776px - 11*16px) / 12 = (776px - 176px) / 12 = 600px / 12 = 50px */
-    --grid-item-width: calc((100vw - 176px - 64px) / 12);
-    --sidebar-width: calc(3 * var(--grid-item-width) + 2 * 16px);
-    --content-width: calc(9 * var(--grid-item-width) + 8 * 16px);
-    --footer-width: calc(12 * var(--grid-item-width) + 11 * 16px);
-    --page-min-height: calc(100vh - var(--container-padding-top) - var(--header-height) - var(--footer-height) - var(--container-padding-bottom));
-    /* 布局间距 */
-    --layout-gap: 16px;
-    --layout-gap2: 12px;
-    --layout-gap3: 8px;
-    --layout-gap4: 8px;
-    --padding-value-1: 16px;
-    --padding-value-2: 12px;
-    /* 字体大小 */
-    --font-size1: 18px;
-    --font-size2: 16px;
-    --font-size3: 16px;
-    --font-size4: 14px;
-    --font-size5: 14px;
-    --font-size6: 12px;
-    --font-size7: 12px;
-    /* 行高 */
-    --line-height1: 26px;
-    --line-height2: 24px;
-    --line-height3: 24px;
-    --line-height4: 22px;
-    --line-height5: 22px;
-    --line-height6: 18px;
-    --line-height7: 18px;
-    /* 输入框的宽度 */
-    --input-width1: 320px;
-    /* 输入框的高度 */
-    --input-height1: 36px;
-  }
-}
-/* ============================================================
-   <840px - 手机端 (单栏布局)
-   ============================================================ */
-@media (max-width: 840px) {
-  :root {
-    /* 栅格系统 */
-    --grid-columns: 1;
-    --grid-gap: 0px;
-    --container-padding-x: 16px;
-    --container-padding-y: 16px;
-    --header-height: 48px;
-    --footer-height: 102px;
-    --item-height: 38px;
-    --item-padding: 8px;
-    --container-padding-bottom: 32px;
-    /* 两栏布局 - 单栏模式 */
-    --sidebar-grid-columns: 0;
-    --sidebar-grid-gaps: 0;
-    --content-grid-columns: 1;
-    --content-grid-gaps: 0;
-    /* 栅格宽度 */
-    --grid-item-width: 100%;
-    --sidebar-width: 0px;
-    --content-width: 100%;
-    --footer-width: 100%;
-    --page-min-height: calc(100vh - var(--container-padding-top) - var(--header-height) - var(--footer-height) - var(--container-padding-bottom));
-    /* 布局间距 */
-    --layout-gap: 12px;
-    --layout-gap2: 12px;
-    --layout-gap3: 8px;
-    --layout-gap4: 8px;
-    --container-bg-color: transparent;
-    --padding-value-1: 24px;
-    --padding-value-2: 24px;
-    /* 字体大小 */
-    --font-size1: 18px;
-    --font-size2: 16px;
-    --font-size3: 16px;
-    --font-size4: 14px;
-    --font-size5: 14px;
-    --font-size6: 12px;
-    --font-size7: 10px;
-    /* 行高 */
-    --line-height1: 26px;
-    --line-height2: 24px;
-    --line-height3: 24px;
-    --line-height4: 22px;
-    --line-height5: 22px;
-    --line-height6: 18px;
-    --line-height7: 16px;
-    /* 输入框的宽度 */
-    --input-width1: 320px;
-    /* 输入框的高度 */
-    --input-height1: 36px;
-  }
-}
-/* ============================================================
-   设计令牌补充：字号 / 行高 / 间距
-   （迁移自 personComponents base/_font.scss、base/_spacing.scss，
-   OpenDesignPlus 的 token css 不包含这三组，由本文件统一提供）
-   ============================================================ */
-/* 字号 */
-:root {
-  --o-font-size-h1: 64px;
-  --o-font-size-h2: 54px;
-  --o-font-size-h3: 36px;
-  --o-font-size-h4: 28px;
-  --o-font-size-h5: 24px;
-  --o-font-size-h6: 20px;
-  --o-font-size-h7: 18px;
-  --o-font-size-h8: 16px;
-  --o-font-size-text: 14px;
-  --o-font-size-tip: 12px;
-  /* 行高 */
-  --o-line-height-h1: 84px;
-  --o-line-height-h2: 76px;
-  --o-line-height-h3: 48px;
-  --o-line-height-h4: 36px;
-  --o-line-height-h5: 32px;
-  --o-line-height-h6: 28px;
-  --o-line-height-h7: 24px;
-  --o-line-height-h8: 22px;
-  --o-line-height-text: 22px;
-  --o-line-height-tip: 18px;
-}
-
-/* 间距 */
-:root {
-  --o-spacing-h1: 64px;
-  --o-spacing-h2: 40px;
-  --o-spacing-h3: 32px;
-  --o-spacing-h4: 24px;
-  --o-spacing-h5: 16px;
-  --o-spacing-h6: 12px;
-  --o-spacing-h7: 10px;
-  --o-spacing-h8: 8px;
-  --o-spacing-h9: 6px;
-  --o-spacing-h10: 4px;
-}