diff --git a/.changeset/tidy-css-cleanup.md b/.changeset/tidy-css-cleanup.md new file mode 100644 index 000000000..094b517a7 --- /dev/null +++ b/.changeset/tidy-css-cleanup.md @@ -0,0 +1,11 @@ +--- +'weapp-tailwindcss': patch +--- + +修复 Tailwind CSS v4 CSS 恢复与清理时误删用户自定义变量的问题：使用生成阶段的具体声明识别重复主题变量，保留用户变量的值、优先级和覆盖顺序，避免原始 rem 值覆盖已经转换的 rpx 值。 + +恢复框架 vendor CSS 时通过规则索引精确匹配条件上下文、选择器和完整声明，保留生成侧已有的层位置以及框架侧的后续覆盖，合并重复编码声明。大产物同样执行完整恢复，批量清理节点并共享生成主题声明索引，避免重复解析和逐条删除造成的性能开销。同时改进 Taro issue-998 配置的跨平台路径检测。 + +公开 core 编译入口在最终生成小程序 CSS 时也移除 Tailwind banner，避免 weapp-vite 等内置集成绕过 bundler 适配后留下 WXSS 产物检测误报。 + +默认产物 matcher 识别钉钉 `.ddml` 和 `.ddss`，使 Mpx 钉钉构建中的模板类名转译及 rem2rpx 样式适配正常执行。没有生成 CSS 时仍合并框架样式的编码声明并保留覆盖顺序。 diff --git a/demo/__tests__/wxss-output.test.ts b/demo/__tests__/wxss-output.test.ts index 7249fc3ca..0215f2171 100644 --- a/demo/__tests__/wxss-output.test.ts +++ b/demo/__tests__/wxss-output.test.ts @@ -425,6 +425,18 @@ describe('demo wxss artifacts', () => { expect(countDuplicateSelectorRules(duplicateInjection, TAILWIND_V4_ROOT_SELECTORS)).toBe(1) }) + it.each(RAW_SNIPPETS)('检测 $label 的完整违规规则', ({ label, css }) => { + const signature = FORBIDDEN_SNIPPETS.find(snippet => snippet.label === label)!.signature + expect(getRuleSignatures(`.before{color:red}@media screen{${css}}.after{color:blue}`)).toContain(signature) + }) + + it('多选择器和声明必须完整匹配', () => { + const bold = FORBIDDEN_SNIPPETS.find(snippet => snippet.label === 'b/strong bold')!.signature + expect(getRuleSignatures('b, strong { font-weight: bolder; }')).toContain(bold) + expect(getRuleSignatures('.b, .strong { font-weight: bolder; }')).not.toContain(bold) + expect(getRuleSignatures('b, strong { font-weight: normal; }')).not.toContain(bold) + }) + it('matches forbidden selectors exactly without treating utility classes as global tags', () => { const globalTag = getRuleSignatures('small { font-size: 80%; }') const utilityClass = getRuleSignatures('.small { font-size: 80%; }') @@ -432,6 +444,8 @@ describe('demo wxss artifacts', () => { expect(globalTag).toContain(forbiddenSignature) expect(utilityClass).not.toContain(forbiddenSignature) + expect(getRuleSignatures('.small:hover { font-size: 80%; }')).not.toContain(forbiddenSignature) + expect(getRuleSignatures('small, textarea { font-size: 80%; }')).not.toContain(forbiddenSignature) }) }) diff --git a/demo/taro-vite-react-tailwindcss-v4/config/index.ts b/demo/taro-vite-react-tailwindcss-v4/config/index.ts index 8a53a9110..9f6569291 100644 --- a/demo/taro-vite-react-tailwindcss-v4/config/index.ts +++ b/demo/taro-vite-react-tailwindcss-v4/config/index.ts @@ -46,7 +46,7 @@ export default defineConfig<'vite'>(async (merge, { command, mode }) => { designWidth: taroPlatform.isWeb ? 750 : (input) => { - const file = typeof input?.file === 'string' ? win32.normalize(input.file) : '' + const file = typeof input?.file === 'string' ? win32.resolve(projectRoot, input.file) : '' return win32.dirname(file) === win32.resolve(projectRoot, 'src/pages/issue-998') ? 375 : 750 }, deviceRatio: { diff --git a/demo/taro-webpack-react-tailwindcss-v4/config/index.ts b/demo/taro-webpack-react-tailwindcss-v4/config/index.ts index 89d8d155f..0dc352c31 100644 --- a/demo/taro-webpack-react-tailwindcss-v4/config/index.ts +++ b/demo/taro-webpack-react-tailwindcss-v4/config/index.ts @@ -58,7 +58,7 @@ export default defineConfig<'webpack5'>(async (merge, { command, mode }) => { designWidth: taroPlatform.isWeb ? 750 : (input) => { - const file = typeof input?.file === 'string' ? win32.normalize(input.file) : '' + const file = typeof input?.file === 'string' ? win32.resolve(projectRoot, input.file) : '' if (win32.dirname(file) === win32.resolve(projectRoot, 'src/pages/issue-998')) { return 375 } diff --git a/docs/engineering/lessons/ci-css-release-recovery.md b/docs/engineering/lessons/ci-css-release-recovery.md new file mode 100644 index 000000000..dd5286097 --- /dev/null +++ b/docs/engineering/lessons/ci-css-release-recovery.md @@ -0,0 +1,120 @@ +--- +status: partial +issue: https://github.com/sonofmagic/weapp-tailwindcss/pull/1197 +baseline: e82055a63e2eea5e049da690de1bca575aa020d3 +regressions: + - packages/weapp-tailwindcss/test/bundlers/shared/generator-css/generated-cleanup.test.ts + - packages/weapp-tailwindcss/test/bundlers/shared/generator-css/user-css.test.ts + - packages/weapp-tailwindcss/test/bundlers/framework-css-composition.test.ts + - packages/weapp-tailwindcss/test/bundlers/framework-css-composition.unit.test.ts + - e2e/uni-app-vite-tailwindcss-v4-layer-output.test.ts + - packages/weapp-tailwindcss/test/ci/repoctl-release.test.ts + - demo/__tests__/wxss-output.test.ts + - e2e/taro-ci-coverage-matrix.test.ts + - e2e/taro-vite-react-tailwindcss-v4.test.ts + - e2e/template-contract.test.ts + - packages/weapp-tailwindcss/test/defaults.test.ts +--- + +# CSS 清理、框架组合与发布恢复回归 + +## 症状 + +- Release 的 WXSS 检查把 `.small` 工具类误认为全局 `small` 标签。 +- v4 根规则的变量名前缀清理会误删用户变量；恢复原始根规则又会让未转换的 `rem` 覆盖已转换的 `rpx`。 +- 框架 vendor CSS 按规则集合去重后，`16 → 32 → 16` 的最后一条覆盖消失。NutUI 的组合选择器与后续单选择器覆盖也受到影响。 +- npm publish 与 tag 推送成功后，GitHub Release POST 返回 502。现有说明修复入口只能修复已有 Release。 + +原始失败：[34748944107](https://github.com/sonofmagic/weapp-tailwindcss/actions/runs/34748944107)、[34748944100](https://github.com/sonofmagic/weapp-tailwindcss/actions/runs/34748944100)。 + +## 根因与纠正 + +1. WXSS 禁止片段改为 PostCSS AST 签名匹配，覆盖标签、类、伪类、多选择器和全部已有 Preflight 片段。 +2. 从生成阶段传递原始及转换后的声明来源，按条件上下文、属性、值和优先级清理。只有数值小数前导零被归一化；未知来源与用户覆盖保留。补齐删除声明后标记变化、单独 `:host` 的用户变量及空白格式回归。 +3. 用户样式转换之后，裸选择器补偿只补没有被转换结果表示的规则，避免重新插入原始 `rem`。 +4. 框架产物用于恢复用户 CSS 覆盖顺序，同时保留生成侧已经确定的层位置。早期无条件移动规则和按产物大小跳过恢复的做法均不正确，见下方补充纠正。真实生成器测试分别执行 legacy 与 graph，并精确验证用户变量、单位转换及重复规则顺序。 +5. 合并多个 CSS 输入后，只保留开头的一条 `@charset`；不在构建输出目录直接写文件。 +6. 模板按 semver 范围能否覆盖当前稳定版验收，不要求范围字符串一致。Taro 配置通过执行实际 AST 中的 `designWidth` 表达式验证 POSIX、Windows、相对路径、盘符和相邻目录。 +7. 为实际实现包 `@icebreakers/monorepo@5.5.0` 提交 pnpm patch。Release API 的重试限定四次，遵守限流等待，POST 响应不确定时先按 tag 查询；不重跑 npm publish。 +8. 显式 `release notes repair --create-missing --tag` 支持 dry-run。核对 npm 精确版本、本地与远端 tag、目标提交内的包名和版本，再复用原说明生成逻辑补建缺失 Release。 + +## 初次修复阶段的验证记录 + +本次在独立 `codex/ci-css-release-recovery` worktree 验证；以下是初次修复阶段的本地记录；最终实现的重新验证见后面的“本轮验证”。 + +- `CI=1 pnpm test --update=none`：540 文件、5278 测试通过；5 文件、47 测试既有跳过。 +- CSS 定向集合：13 文件、288 测试通过；新增清理器、框架组合和 repoctl 集合另行复验，50 测试通过。 +- `CI=1 pnpm test:release`：58 测试通过、4 跳过；附加发布插件测试 2 项通过。 +- `CI=1 pnpm e2e:issues-977-978`：8 项通过。 +- Taro coverage、模板范围和 canonical smoke：3 文件、20 项通过。 +- `pnpm --filter weapp-tailwindcss build`：通过，真实 demo 使用本 worktree 的新构建。 +- `CI=1 pnpm e2e:static --shard=1/3 --update=none`：21 文件、118 测试通过；6 文件、18 测试跳过。 +- static 三个分片和 apps-generator 已完成禁止更新复核：分别 107/122/130 项通过，既有跳过 18/10/3。 +- `pnpm typecheck`：未通过。当前与未修改基线各 445 条诊断，按文件和错误码对比无新增。不能据此宣称严格类型全绿。 +- ESLint：使用仓库默认范围检查改动代码；对新增测试与框架组合测试额外取消忽略进行检查。全仓默认忽略的历史 demo/大型测试文件不能冒充已通过强制 lint。 + +## 快照语义 + +限定更新 Taro Vite React/Vue v4 与 uni-app Vite v4 的 static 基线，随后以 `--update=none` 验证。 + +- 两套 NutUI 产物按选择器、条件上下文、声明属性和优先级统计，React 6707 项、Vue 5233 项，未缺失声明；大量 diff 来自重复副本减少和保留框架已处理的格式。 +- 对照 NutUI 原始 CSS，`.nut-tabs-titles-item-smile` 的 `bottom` 最后应为 `var(--nutui-tabs-titles-item-smile-bottom, -10%)`，`.nut-indicator-white .nut-indicator-line` 的 `opacity` 最后应为 `0`。旧基线的 `15%` 与 `1` 来自错误覆盖顺序；真实构建行为测试固定这两个纠正。 +- uni-app 保留的 `--test-color`、`--color-test`、字体与色彩变量来自 `App.vue`，runtime 的状态栏高度和窗口偏移仍在主样式中。 + +## 补充纠正：大产物与层位置 + +- 超过 250 KB 就跳过恢复会丢失框架来源、编码声明和用户规则，不能作为性能优化。移除全部大小短路，用条件上下文、选择器、声明值、优先级和声明顺序建立 AST 索引。 +- 将所有框架规则移到生成结果尾部也不正确：uni-app 的 `wx-button { background: #000 }` 和 components 层必须位于 utilities 之前。对覆盖序列保留生成侧已匹配前缀，从首次缺失处恢复框架侧后缀。 +- 逐条删除 PostCSS 节点会在大数组中反复移动元素，改为每个容器一次批量重建；主题来源声明延迟解析，并在同一恢复周期共享索引。相邻完全相同的规则在同一遍历中合并，保留被其它覆盖隔开的重复声明；先复现 uni-app x 的相邻组件规则重复，再修复并保持原 static 基线通过。 +- 命名层即使清空也必须保留首次声明位置，匿名层具有独立身份，不能跨输入合并。组合选择器的每一项都参与覆盖区间，避免 `.a,.b` 与 `.a` 被分别去重后颠倒顺序。两项新增用例均已先复现错误，再修复并通过。 +- Taro React v4 基线变化包括去除两条重复字体定义、动画块位置调整和保留四组声明顺序不同的 vendor 规则。按条件、选择器、属性、优先级和声明值比较，更新前后均为 6388 个唯一声明，无缺失、无最终值变化；NutUI 关键覆盖的真实构建断言通过。 + +### 本轮验证（接续 5c1ddd676） + +- `CI=1 pnpm test --update=none`：541 文件、5292 测试通过；5 文件、47 测试既有跳过。 +- 清理器及组合单测包含 legacy/graph 各 8000 条填充规则；最终组合集合 14 项通过。WXSS 独立配置 34 项通过。 +- 核心包构建及新增/修改源文件、组合测试 ESLint 通过。 +- `pnpm typecheck` 仍有 445 条诊断，本轮修改文件无诊断；不将包构建通过等同于严格类型检查通过。 +- `CI=1 pnpm test:release`：222 项通过、4 项既有跳过。 +- issue-977/978：8 项通过；Taro coverage contract 7 项、模板 contract 9 项、canonical smoke 4 项通过。 +- generator 的基线更新限定 Taro Vite React/Vue v4 与 uni-app Vite v4；汇总 JSON/中英文报告只同步这三个项目构建产生的字节数，选择器列表和其它项目未变。 +- 最终实现的 Taro React/Vue、uni-app、uni-app x 与层顺序 E2E：5 文件、14 项通过；uni-app x 使用本机 HBuilderX Alpha 5.25.2026082902-alpha CLI 构建，没有将其视为设备验收。 +- static 三个分片和完整 generator 集合已在最终 core banner 修复及工作区依赖覆盖后重新验证通过；weapp-vite 独立 banner 基线另行更新并复核。 + +### 验证 + +- 本轮完整单测、发布集合和冻结安装均通过；apps-generator 已单独更新并以禁止更新模式复核。 +- 静态分片、真实框架构建和环境型类型诊断分别记录在交付说明中；快照只在确认产物语义后更新。 + +### 规模验证 + +本地预热两轮后取七轮中位数，4000/8000/16000 条规则分别约 21/38/75 ms；输入约 163/327/661 KB。此前逐条删除的大数组移动开销已经消除。该测量用于确认规模趋势，不替代框架构建与 HMR 的 CI 性能门禁。 + +```sh +rtk proxy pnpm exec tsx --eval 'import { performance } from "node:perf_hooks"; import { composeFrameworkProcessedCss as compose } from "./packages/weapp-tailwindcss/src/bundlers/shared/framework-css-composition.ts"; for (const size of [4000,8000,16000]) { const source=Array.from({length:size},(_,i)=>`.vendor-${i}{color:rgb(1,2,3);height:1px}`).join(""); const generated=source+".utility{display:flex}"; const times=[]; for(let i=0;i<9;i++){const start=performance.now();compose("",generated,source);if(i>1)times.push(performance.now()-start)} times.sort((a,b)=>a-b); console.log({rules:size,bytes:generated.length,medianMs:times[3]}) }' +``` + +## 适用边界 + +### Mpx 多平台及空生成输入复核 + +- PR run `34790213574` 的 Mpx 各平台基线仍记录原始 `.25rem` 和转换后的 `8rpx`。在 `rem2rpx: true` 配置下，旧根规则被恢复后会覆盖已转换的值；当前四个平台产物仅保留 `8rpx`，用户 `--test-color` 和 `--color-test` 保留。 +- 钉钉还有独立问题：默认 matcher 不包含 `.ddml` / `.ddss`，使模板类名与样式适配跳过。补齐默认 matcher，并覆盖 POSIX、Windows 盘符、相对路径及非产物后缀。修复后真实 `.ddss` 保留 `8rpx` 和用户变量，模板类名与任意值样式消费验证通过。 +- 新增空输入回归发现：生成 CSS 为空时直接连接两侧框架 CSS 会保留重复 `@charset`。撤回这一条短路；两侧框架输入为空时仍直接返回生成产物，保留性能优化。 +- 两项缺陷先由新增单测复现，共 5 个失败；修复后 defaults、composition unit 和 legacy/graph 组合测试共 24 项通过。 +- 基线更新命令：`CI=1 pnpm e2e:demo:matrix mpx-tailwindcss-v4:wx mpx-tailwindcss-v4:ali mpx-tailwindcss-v4:swan mpx-tailwindcss-v4:tt mpx-tailwindcss-v4:dd --update --build-only`；钉钉 matcher 修复后单独重建该目标。审查后五个基线只删除未转换的 rem 值。 +- 禁止更新复验：`CI=1 pnpm e2e:demo:matrix mpx-tailwindcss-v4:wx mpx-tailwindcss-v4:ali mpx-tailwindcss-v4:swan mpx-tailwindcss-v4:tt mpx-tailwindcss-v4:dd`，五个平台全部通过生产构建、初始、替换、新增及恢复四轮 HMR；不将其视为真机证据。 +- 修改后的完整 `CI=1 pnpm test --update=none`：542 文件、5302 测试通过，5 文件、47 测试既有跳过；`CI=1 pnpm test:release`：222 测试通过、4 测试既有跳过。核心包构建、修改文件 ESLint、`pnpm agents:check`、`git diff --check` 通过；`pnpm release status` 仍只有核心包中文 patch intent，联动范围由已有发布策略决定。 +- `CI=1 E2E_PROJECT_FILTER='^mpx-tailwindcss-v4$' pnpm e2e:static --update=none`：64 文件、342 测试通过，15 文件、44 测试跳过。该入口仍执行共享 smoke/contract，包括 Taro H5、uni-app 层顺序和 runtime 变量；Mpx static 两项通过，无基线自动更新。 + +### 发布与设备边界 + +- 本地验证覆盖编译与产物；没有把 CLI 构建记为 IDE、设备或真机验收。 +- 中文 patch intent 只指定 `weapp-tailwindcss`。清理器及组合逻辑属于核心包，`@weapp-tailwindcss/postcss` 的源码和公共行为未改动，不单独增加其版本。 +- `pnpm release status` 显示核心包 5.5.5 → 5.5.6，CLI 与依赖消费包的联动来自仓库已有 fixed/dependency 策略。 +- 只交付补丁和恢复测试，本次没有运行 npm publish、推送发布 tag 或实际补建 Release。 +- 上游增强：[repoctl #887](https://github.com/sonofmagic/repoctl/issues/887)、[repoctl #888](https://github.com/sonofmagic/repoctl/issues/888)，关联 #848，不重复提出 provenance 问题。 + +## 规则评估 + +不新增 AGENTS 规则。现有生成来源、构建图、回归与基线规则足够，本次用持久行为测试补上执行缺口。 diff --git a/e2e/__snapshots__/apps-generator-mode/compare/report.json b/e2e/__snapshots__/apps-generator-mode/compare/report.json index f530b0ca1..7aab7a207 100644 --- a/e2e/__snapshots__/apps-generator-mode/compare/report.json +++ b/e2e/__snapshots__/apps-generator-mode/compare/report.json @@ -141,7 +141,7 @@ ], "status": "passed", "generator": { - "bytes": 31599, + "bytes": 30217, "selectors": [ ".-mt-2", "._2xl_ctext-base", @@ -363,7 +363,7 @@ ], "status": "passed", "generator": { - "bytes": 320801, + "bytes": 322016, "selectors": [ ".-bg-conic-180", ".-bg-linear-65", @@ -377,6 +377,8 @@ ".bg-_b_h534312_B", ".bg-_bimage_clinear-gradient_pto_right_m_h06b6d4_m_h3b82f6_P_B", ".bg-_pimage_c--issue-928-image_P", + ".bg-blue-200", + ".bg-blue-500", ".bg-conic", ".bg-conic-180", ".bg-conic-_bfrom_45deg_at_50_v_50_v_m_hef4444_m_heab308_m_h22c55e_B", @@ -2256,6 +2258,8 @@ ".rounded", ".rounded-full", ".rounded-full_e", + ".rounded-s-full", + ".rounded-t-full", ".rtl-nut-range-button-wrapper", ".rtl-nut-range-button-wrapper-left", ".rtl-nut-range-button-wrapper-right", @@ -2622,7 +2626,7 @@ ], "status": "passed", "generator": { - "bytes": 537632, + "bytes": 428351, "selectors": [ ".-translate-y-1", "._b--watch-hmr-offset_c000089px_B", @@ -6678,7 +6682,7 @@ ], "status": "passed", "generator": { - "bytes": 434303, + "bytes": 338549, "selectors": [ ".before_ccontent-_b_aindependent_subpackage_taro-vite-vue3-tailwindcss-v4_a_B:before", ".before_ccontent-_b_anormal_subpackage_taro-vite-vue3-tailwindcss-v4_a_B:before", @@ -8420,7 +8424,7 @@ ], "status": "passed", "generator": { - "bytes": 52550, + "bytes": 53167, "selectors": [ "._ebg-_bgray_B", ".after_c_econtent-_b_agood_work_e_a_B:after", @@ -8664,8 +8668,10 @@ ], "status": "passed", "generator": { - "bytes": 15985, + "bytes": 20003, "selectors": [ + ".a", + ".b", ".before_ccontent-_b_aindependent_subpackage_weapp-vite-tailwindcss-v4_a_B:before", ".before_ccontent-_b_anormal_subpackage_weapp-vite-tailwindcss-v4_a_B:before", ".before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x5f00_u_x59cb_u_x795e_u_x5947_u_x7684__tailwindcss_u_x5f00_u_x53d1_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before", @@ -8685,6 +8691,7 @@ ".bg-white", ".bg-zinc-50", ".border-4", + ".code", ".dark_cbg-zinc-900.theme-dark", ".dark_cbg-zinc-950.theme-dark", ".dark_ctext-zinc-50.theme-dark", @@ -8696,7 +8703,14 @@ ".h-10", ".h-_b30px_B", ".h-_b45px_B", + ".h1", + ".h2", + ".h3", + ".h4", + ".h5", + ".h6", ".hidden", + ".hr", ".i-_bmdi--github-circle_B", ".i-_bmdi--star_B", ".i-_bsvg-spinners--180-ring-with-bg_B", @@ -8704,12 +8718,15 @@ ".icon-_bmdi--home_B", ".iconify-_blucide--bell_B", ".iconify-_blucide--settings_B", + ".img", ".inline-block", ".items-center", ".min-h-screen", ".mt-2", ".mt-4", + ".ol", ".p-4", + ".pre", ".px-3", ".px-4", ".px-_b29rpx_B", @@ -8719,6 +8736,7 @@ ".s .a", ".size-12", ".size-8", + ".small", ".space-x-2_d5 > text + text", ".space-x-2_d5 > text + view", ".space-x-2_d5 > view + text", @@ -8727,8 +8745,10 @@ ".space-y-2_d5 > text + view", ".space-y-2_d5 > view + text", ".space-y-2_d5 > view + view", + ".strong", ".system-dark_cbg-slate-900", ".system-dark_ctext-slate-100", + ".table", ".text-_b100px_B", ".text-_b100rpx_B", ".text-_b31rpx_B", @@ -8752,15 +8772,22 @@ ".tracking-_b0_d2em_B", ".transition-colors", ".tw-root", + ".ul", ".user-motto", ".w-_b323px_B", ".w-_b50px_B", ".weapp-tw-user-ui-card", ".weapp-tw-user-ui-loading", "50%", + ":-moz-focusring:not(iframe)", ":host", + "[hidden]:not([hidden='until-found'])", + "abbr[title]", "abc", "button:after", + "input[type='button']", + "input[type='reset']", + "input[type='submit']", "page", "to", "wx-button", @@ -8803,7 +8830,7 @@ ], "status": "passed", "generator": { - "bytes": 458512, + "bytes": 460183, "selectors": [ "*", ".-bg-conic-180", @@ -8818,6 +8845,8 @@ ".bg-\\[\\#0977ee\\]", ".bg-\\[\\#534312\\]", ".bg-\\[image\\:linear-gradient\\(to_right\\,\\#06b6d4\\,\\#3b82f6\\)\\]", + ".bg-blue-200", + ".bg-blue-500", ".bg-conic", ".bg-conic-180", ".bg-conic-\\(--issue-928-conic\\)", @@ -10752,6 +10781,8 @@ ".rounded", ".rounded-full", ".rounded-full\\!", + ".rounded-s-full", + ".rounded-t-full", ".rtl-nut-range-button-wrapper", ".rtl-nut-range-button-wrapper-left", ".rtl-nut-range-button-wrapper-right", @@ -11143,7 +11174,7 @@ ], "status": "passed", "generator": { - "bytes": 441337, + "bytes": 442372, "selectors": [ "*", ".-bg-conic-180", @@ -11158,6 +11189,8 @@ ".bg-\\[\\#0977ee\\]", ".bg-\\[\\#534312\\]", ".bg-\\[image\\:linear-gradient\\(to_right\\,\\#06b6d4\\,\\#3b82f6\\)\\]", + ".bg-blue-200", + ".bg-blue-500", ".bg-conic", ".bg-conic-180", ".bg-conic-\\(--issue-928-conic\\)", @@ -13092,6 +13125,8 @@ ".rounded", ".rounded-full", ".rounded-full\\!", + ".rounded-s-full", + ".rounded-t-full", ".rtl-nut-range-button-wrapper", ".rtl-nut-range-button-wrapper-left", ".rtl-nut-range-button-wrapper-right", @@ -18160,7 +18195,7 @@ ], "status": "passed", "generator": { - "bytes": 584311, + "bytes": 584713, "selectors": [ "*", ".\\!bg-\\[gray\\]", @@ -19997,7 +20032,7 @@ ], "status": "passed", "generator": { - "bytes": 567631, + "bytes": 568017, "selectors": [ "*", ".\\!bg-\\[gray\\]", diff --git a/e2e/__snapshots__/apps-generator-mode/compare/report.md b/e2e/__snapshots__/apps-generator-mode/compare/report.md index a82809005..9d7a4a6be 100644 --- a/e2e/__snapshots__/apps-generator-mode/compare/report.md +++ b/e2e/__snapshots__/apps-generator-mode/compare/report.md @@ -7,19 +7,19 @@ This report is generated by `pnpm e2e:apps-generator`. It builds each retained d | Project | Fixture | Platform | Allowed platforms | Status | CSS | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Unsupported theme attribute selector | Unsupported theme complex selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | --- | --- | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | --- | --- | | gulp-tailwindcss-v4 | demo | weapp | `weapp`, `tt` | passed | `gulp-tailwindcss-v4/dist/app.wxss` (+4) | 17828 | 84 | no | no | no | yes | yes | no | no | no | yes | -| mpx-tailwindcss-v4 | demo | wx | `wx`, `ali`, `swan`, `tt`, `dd` | passed | `mpx-tailwindcss-v4/dist/wx/app.wxss` (+9) | 31599 | 183 | no | no | no | yes | yes | no | no | no | yes | -| taro-webpack-react-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-webpack-react-tailwindcss-v4/dist/app.wxss` (+4) | 320801 | 2218 | no | no | no | yes | yes | no | no | no | yes | -| taro-vite-react-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-vite-react-tailwindcss-v4/dist/app.wxss` (+6) | 537632 | 2256 | no | no | no | yes | yes | no | no | no | yes | +| mpx-tailwindcss-v4 | demo | wx | `wx`, `ali`, `swan`, `tt`, `dd` | passed | `mpx-tailwindcss-v4/dist/wx/app.wxss` (+9) | 30217 | 183 | no | no | no | yes | yes | no | no | no | yes | +| taro-webpack-react-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-webpack-react-tailwindcss-v4/dist/app.wxss` (+4) | 322016 | 2222 | no | no | no | yes | yes | no | no | no | yes | +| taro-vite-react-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-vite-react-tailwindcss-v4/dist/app.wxss` (+6) | 428351 | 2256 | no | no | no | yes | yes | no | no | no | yes | | taro-webpack-vue3-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-webpack-vue3-tailwindcss-v4/dist/app.wxss` (+3) | 239875 | 1723 | no | no | no | yes | yes | no | no | no | yes | -| taro-vite-vue3-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-vite-vue3-tailwindcss-v4/dist/app.wxss` (+4) | 434303 | 1693 | no | no | no | yes | yes | no | no | no | yes | -| uni-app-vite-tailwindcss-v4 | demo | mp-weixin | `app-android`, `app-ios`, `h5`, `h5:ssr`, `mp-alipay`, `mp-baidu`, `mp-jd`, `mp-kuaishou`, `mp-lark`, `mp-qq`, `mp-toutiao`, `mp-weixin`, `mp-xhs`, `quickapp-webview`, `quickapp-webview-huawei`, `quickapp-webview-union` | passed | `uni-app-vite-tailwindcss-v4/dist/build/mp-weixin/app.wxss` (+7) | 52550 | 214 | no | no | no | yes | yes | no | no | no | yes | -| weapp-vite-tailwindcss-v4 | demo | weapp | `weapp` | passed | `weapp-vite-tailwindcss-v4/dist/app.wxss` (+3) | 15985 | 100 | no | no | no | yes | yes | no | no | no | yes | -| taro-webpack-react-tailwindcss-v4 | demo | web | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-webpack-react-tailwindcss-v4/dist` (+4) | 458512 | 2301 | yes | no | yes | yes | yes | no | no | yes | no | -| taro-webpack-react-tailwindcss-v4 | demo | web-compact | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-webpack-react-tailwindcss-v4/dist` (+4) | 441337 | 2301 | yes | no | yes | yes | yes | no | no | yes | no | +| taro-vite-vue3-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-vite-vue3-tailwindcss-v4/dist/app.wxss` (+4) | 338549 | 1693 | no | no | no | yes | yes | no | no | no | yes | +| uni-app-vite-tailwindcss-v4 | demo | mp-weixin | `app-android`, `app-ios`, `h5`, `h5:ssr`, `mp-alipay`, `mp-baidu`, `mp-jd`, `mp-kuaishou`, `mp-lark`, `mp-qq`, `mp-toutiao`, `mp-weixin`, `mp-xhs`, `quickapp-webview`, `quickapp-webview-huawei`, `quickapp-webview-union` | passed | `uni-app-vite-tailwindcss-v4/dist/build/mp-weixin/app.wxss` (+7) | 53167 | 214 | no | no | no | yes | yes | no | no | no | yes | +| weapp-vite-tailwindcss-v4 | demo | weapp | `weapp` | passed | `weapp-vite-tailwindcss-v4/dist/app.wxss` (+3) | 20003 | 123 | no | no | no | yes | yes | no | no | no | yes | +| taro-webpack-react-tailwindcss-v4 | demo | web | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-webpack-react-tailwindcss-v4/dist` (+4) | 460183 | 2305 | yes | no | yes | yes | yes | no | no | yes | no | +| taro-webpack-react-tailwindcss-v4 | demo | web-compact | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-webpack-react-tailwindcss-v4/dist` (+4) | 442372 | 2305 | yes | no | yes | yes | yes | no | no | yes | no | | taro-vite-react-tailwindcss-v4 | demo | web | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-vite-react-tailwindcss-v4/dist` (+5) | 448889 | 2299 | yes | yes | yes | yes | yes | no | no | yes | no | | taro-vite-react-tailwindcss-v4 | demo | web-compact | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-vite-react-tailwindcss-v4/dist` (+5) | 434533 | 2299 | yes | yes | yes | yes | yes | no | no | yes | no | -| taro-webpack-vue3-tailwindcss-v4 | demo | web | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-webpack-vue3-tailwindcss-v4/dist` (+3) | 584311 | 1799 | yes | yes | yes | yes | yes | no | no | yes | no | -| taro-webpack-vue3-tailwindcss-v4 | demo | web-compact | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-webpack-vue3-tailwindcss-v4/dist` (+3) | 567631 | 1799 | yes | yes | yes | yes | yes | no | no | yes | no | +| taro-webpack-vue3-tailwindcss-v4 | demo | web | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-webpack-vue3-tailwindcss-v4/dist` (+3) | 584713 | 1799 | yes | yes | yes | yes | yes | no | no | yes | no | +| taro-webpack-vue3-tailwindcss-v4 | demo | web-compact | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-webpack-vue3-tailwindcss-v4/dist` (+3) | 568017 | 1799 | yes | yes | yes | yes | yes | no | no | yes | no | | taro-vite-vue3-tailwindcss-v4 | demo | web | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-vite-vue3-tailwindcss-v4/dist` (+3) | 333485 | 1756 | yes | yes | yes | yes | yes | no | no | yes | no | | taro-vite-vue3-tailwindcss-v4 | demo | web-compact | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | passed | `taro-vite-vue3-tailwindcss-v4/dist` (+3) | 327702 | 1756 | yes | yes | yes | yes | yes | no | no | yes | no | | uni-app-vite-tailwindcss-v4 | demo | web | `app-android`, `app-ios`, `h5`, `h5:ssr`, `mp-alipay`, `mp-baidu`, `mp-jd`, `mp-kuaishou`, `mp-lark`, `mp-qq`, `mp-toutiao`, `mp-weixin`, `mp-xhs`, `quickapp-webview`, `quickapp-webview-huawei`, `quickapp-webview-union` | passed | `uni-app-vite-tailwindcss-v4/dist/build/h5` (+5) | 72704 | 377 | yes | yes | yes | yes | yes | yes | no | yes | yes | @@ -55,7 +55,7 @@ This report is generated by `pnpm e2e:apps-generator`. It builds each retained d ### taro-webpack-react-tailwindcss-v4 - CSS files: `app.wxss`, `pages/index/index.wxss`, `pages/issue-998/index.wxss`, `sub-independent/pages/index.wxss`, `sub-normal/pages/index.wxss` -- Selectors: `.-bg-conic-180`, `.-bg-linear-65`, `.-rotate-y-45`, `.absolute`, `.before_ccontent-_b_aindependent_subpackage_taro-webpack-react-tailwindcss-v4_a_B:before`, `.before_ccontent-_b_anormal_subpackage_taro-webpack-react-tailwindcss-v4_a_B:before`, `.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x5f00_u_x59cb_u_x795e_u_x5947_u_x7684__tailwindcss_u_x5f00_u_x53d1_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before`, `.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x7ee7_u_x7eed_u_x795e_u_x5947_u_x7684__tailwindcss_HMR_u_x56de_u_x5f52_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before`, `.bg-_b_h0977ee_B`, `.bg-_b_h534312_B`, `.bg-_bimage_clinear-gradient_pto_right_m_h06b6d4_m_h3b82f6_P_B`, `.bg-_pimage_c--issue-928-image_P`, `.bg-conic`, `.bg-conic-180`, `.bg-conic-_bfrom_45deg_at_50_v_50_v_m_hef4444_m_heab308_m_h22c55e_B`, `.bg-conic-_p--issue-928-conic_P`, `.bg-conic_fdecreasing`, `.bg-gradient-to-r`, `.bg-independent-subpackage-marker`, `.bg-linear-65` +- Selectors: `.-bg-conic-180`, `.-bg-linear-65`, `.-rotate-y-45`, `.absolute`, `.before_ccontent-_b_aindependent_subpackage_taro-webpack-react-tailwindcss-v4_a_B:before`, `.before_ccontent-_b_anormal_subpackage_taro-webpack-react-tailwindcss-v4_a_B:before`, `.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x5f00_u_x59cb_u_x795e_u_x5947_u_x7684__tailwindcss_u_x5f00_u_x53d1_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before`, `.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x7ee7_u_x7eed_u_x795e_u_x5947_u_x7684__tailwindcss_HMR_u_x56de_u_x5f52_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before`, `.bg-_b_h0977ee_B`, `.bg-_b_h534312_B`, `.bg-_bimage_clinear-gradient_pto_right_m_h06b6d4_m_h3b82f6_P_B`, `.bg-_pimage_c--issue-928-image_P`, `.bg-blue-200`, `.bg-blue-500`, `.bg-conic`, `.bg-conic-180`, `.bg-conic-_bfrom_45deg_at_50_v_50_v_m_hef4444_m_heab308_m_h22c55e_B`, `.bg-conic-_p--issue-928-conic_P`, `.bg-conic_fdecreasing`, `.bg-gradient-to-r` ### taro-vite-react-tailwindcss-v4 @@ -80,17 +80,17 @@ This report is generated by `pnpm e2e:apps-generator`. It builds each retained d ### weapp-vite-tailwindcss-v4 - CSS files: `app.wxss`, `pages/index/index.wxss`, `sub-independent/pages/index.wxss`, `sub-normal/pages/index.wxss` -- Selectors: `.before_ccontent-_b_aindependent_subpackage_weapp-vite-tailwindcss-v4_a_B:before`, `.before_ccontent-_b_anormal_subpackage_weapp-vite-tailwindcss-v4_a_B:before`, `.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x5f00_u_x59cb_u_x795e_u_x5947_u_x7684__tailwindcss_u_x5f00_u_x53d1_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before`, `.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x7ee7_u_x7eed_u_x795e_u_x5947_u_x7684__tailwindcss_HMR_u_x56de_u_x5f52_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before`, `.bg-_b_h0977ee_B`, `.bg-_b_h111111_B`, `.bg-_b_h3a32d1_B`, `.bg-_b_h68c828_B`, `.bg-amber-300`, `.bg-blue-500_f30`, `.bg-gradient-to-b`, `.bg-gradient-to-t`, `.bg-gradient-to-tr`, `.bg-gray-900`, `.bg-independent-subpackage-marker`, `.bg-normal-subpackage-marker`, `.bg-white`, `.bg-zinc-50`, `.border-4`, `.dark_cbg-zinc-900.theme-dark` +- Selectors: `.a`, `.b`, `.before_ccontent-_b_aindependent_subpackage_weapp-vite-tailwindcss-v4_a_B:before`, `.before_ccontent-_b_anormal_subpackage_weapp-vite-tailwindcss-v4_a_B:before`, `.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x5f00_u_x59cb_u_x795e_u_x5947_u_x7684__tailwindcss_u_x5f00_u_x53d1_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before`, `.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x7ee7_u_x7eed_u_x795e_u_x5947_u_x7684__tailwindcss_HMR_u_x56de_u_x5f52_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before`, `.bg-_b_h0977ee_B`, `.bg-_b_h111111_B`, `.bg-_b_h3a32d1_B`, `.bg-_b_h68c828_B`, `.bg-amber-300`, `.bg-blue-500_f30`, `.bg-gradient-to-b`, `.bg-gradient-to-t`, `.bg-gradient-to-tr`, `.bg-gray-900`, `.bg-independent-subpackage-marker`, `.bg-normal-subpackage-marker`, `.bg-white`, `.bg-zinc-50` ### taro-webpack-react-tailwindcss-v4 - CSS files: `css/app.css`, `css/chunk.1.css`, `css/chunk.2.css`, `css/chunk.3.css`, `css/chunk.4.css` -- Selectors: `*`, `.-bg-conic-180`, `.-bg-linear-65`, `.-rotate-y-45`, `.absolute`, `.before\:content-\[\'independent_subpackage_taro-webpack-react-tailwindcss-v4\'\]:before`, `.before\:content-\[\'normal_subpackage_taro-webpack-react-tailwindcss-v4\'\]:before`, `.before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]:before`, `.before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\]:before`, `.bg-\(image\:--issue-928-image\)`, `.bg-\[\#0977ee\]`, `.bg-\[\#534312\]`, `.bg-\[image\:linear-gradient\(to_right\,\#06b6d4\,\#3b82f6\)\]`, `.bg-conic`, `.bg-conic-180`, `.bg-conic-\(--issue-928-conic\)`, `.bg-conic-\[from_45deg_at_50\%_50\%\,\#ef4444\,\#eab308\,\#22c55e\]`, `.bg-conic\/decreasing`, `.bg-gradient-to-r`, `.bg-independent-subpackage-marker` +- Selectors: `*`, `.-bg-conic-180`, `.-bg-linear-65`, `.-rotate-y-45`, `.absolute`, `.before\:content-\[\'independent_subpackage_taro-webpack-react-tailwindcss-v4\'\]:before`, `.before\:content-\[\'normal_subpackage_taro-webpack-react-tailwindcss-v4\'\]:before`, `.before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]:before`, `.before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\]:before`, `.bg-\(image\:--issue-928-image\)`, `.bg-\[\#0977ee\]`, `.bg-\[\#534312\]`, `.bg-\[image\:linear-gradient\(to_right\,\#06b6d4\,\#3b82f6\)\]`, `.bg-blue-200`, `.bg-blue-500`, `.bg-conic`, `.bg-conic-180`, `.bg-conic-\(--issue-928-conic\)`, `.bg-conic-\[from_45deg_at_50\%_50\%\,\#ef4444\,\#eab308\,\#22c55e\]`, `.bg-conic\/decreasing` ### taro-webpack-react-tailwindcss-v4 - CSS files: `css/app.css`, `css/chunk.1.css`, `css/chunk.2.css`, `css/chunk.3.css`, `css/chunk.4.css` -- Selectors: `*`, `.-bg-conic-180`, `.-bg-linear-65`, `.-rotate-y-45`, `.absolute`, `.before\:content-\[\'independent_subpackage_taro-webpack-react-tailwindcss-v4\'\]:before`, `.before\:content-\[\'normal_subpackage_taro-webpack-react-tailwindcss-v4\'\]:before`, `.before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]:before`, `.before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\]:before`, `.bg-\(image\:--issue-928-image\)`, `.bg-\[\#0977ee\]`, `.bg-\[\#534312\]`, `.bg-\[image\:linear-gradient\(to_right\,\#06b6d4\,\#3b82f6\)\]`, `.bg-conic`, `.bg-conic-180`, `.bg-conic-\(--issue-928-conic\)`, `.bg-conic-\[from_45deg_at_50\%_50\%\,\#ef4444\,\#eab308\,\#22c55e\]`, `.bg-conic\/decreasing`, `.bg-gradient-to-r`, `.bg-independent-subpackage-marker` +- Selectors: `*`, `.-bg-conic-180`, `.-bg-linear-65`, `.-rotate-y-45`, `.absolute`, `.before\:content-\[\'independent_subpackage_taro-webpack-react-tailwindcss-v4\'\]:before`, `.before\:content-\[\'normal_subpackage_taro-webpack-react-tailwindcss-v4\'\]:before`, `.before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]:before`, `.before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\]:before`, `.bg-\(image\:--issue-928-image\)`, `.bg-\[\#0977ee\]`, `.bg-\[\#534312\]`, `.bg-\[image\:linear-gradient\(to_right\,\#06b6d4\,\#3b82f6\)\]`, `.bg-blue-200`, `.bg-blue-500`, `.bg-conic`, `.bg-conic-180`, `.bg-conic-\(--issue-928-conic\)`, `.bg-conic-\[from_45deg_at_50\%_50\%\,\#ef4444\,\#eab308\,\#22c55e\]`, `.bg-conic\/decreasing` ### taro-vite-react-tailwindcss-v4 diff --git a/e2e/__snapshots__/apps-generator-mode/compare/report.zh-CN.md b/e2e/__snapshots__/apps-generator-mode/compare/report.zh-CN.md index 050b5e624..bc9a1b9d2 100644 --- a/e2e/__snapshots__/apps-generator-mode/compare/report.zh-CN.md +++ b/e2e/__snapshots__/apps-generator-mode/compare/report.zh-CN.md @@ -7,19 +7,19 @@ | 项目 | 来源 | 平台 | 允许平台 | 状态 | CSS 文件 | 字节数 | 选择器数 | @supports | :hover | Tailwind banner | 系统暗色媒体查询 | 手动暗色选择器 | 不兼容主题属性选择器 | 不兼容主题复杂选择器 | 原始任意值选择器 | 小程序转义任意值选择器 | | --- | --- | --- | --- | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | --- | --- | | gulp-tailwindcss-v4 | demo | weapp | `weapp`, `tt` | 通过 | `gulp-tailwindcss-v4/dist/app.wxss` (+4) | 17828 | 84 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | -| mpx-tailwindcss-v4 | demo | wx | `wx`, `ali`, `swan`, `tt`, `dd` | 通过 | `mpx-tailwindcss-v4/dist/wx/app.wxss` (+9) | 31599 | 183 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | -| taro-webpack-react-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-webpack-react-tailwindcss-v4/dist/app.wxss` (+4) | 320801 | 2218 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | -| taro-vite-react-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-vite-react-tailwindcss-v4/dist/app.wxss` (+6) | 537632 | 2256 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | +| mpx-tailwindcss-v4 | demo | wx | `wx`, `ali`, `swan`, `tt`, `dd` | 通过 | `mpx-tailwindcss-v4/dist/wx/app.wxss` (+9) | 30217 | 183 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | +| taro-webpack-react-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-webpack-react-tailwindcss-v4/dist/app.wxss` (+4) | 322016 | 2222 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | +| taro-vite-react-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-vite-react-tailwindcss-v4/dist/app.wxss` (+6) | 428351 | 2256 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | | taro-webpack-vue3-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-webpack-vue3-tailwindcss-v4/dist/app.wxss` (+3) | 239875 | 1723 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | -| taro-vite-vue3-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-vite-vue3-tailwindcss-v4/dist/app.wxss` (+4) | 434303 | 1693 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | -| uni-app-vite-tailwindcss-v4 | demo | mp-weixin | `app-android`, `app-ios`, `h5`, `h5:ssr`, `mp-alipay`, `mp-baidu`, `mp-jd`, `mp-kuaishou`, `mp-lark`, `mp-qq`, `mp-toutiao`, `mp-weixin`, `mp-xhs`, `quickapp-webview`, `quickapp-webview-huawei`, `quickapp-webview-union` | 通过 | `uni-app-vite-tailwindcss-v4/dist/build/mp-weixin/app.wxss` (+7) | 52550 | 214 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | -| weapp-vite-tailwindcss-v4 | demo | weapp | `weapp` | 通过 | `weapp-vite-tailwindcss-v4/dist/app.wxss` (+3) | 15985 | 100 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | -| taro-webpack-react-tailwindcss-v4 | demo | web | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-webpack-react-tailwindcss-v4/dist` (+4) | 458512 | 2301 | 是 | 否 | 是 | 是 | 是 | 否 | 否 | 是 | 否 | -| taro-webpack-react-tailwindcss-v4 | demo | web-compact | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-webpack-react-tailwindcss-v4/dist` (+4) | 441337 | 2301 | 是 | 否 | 是 | 是 | 是 | 否 | 否 | 是 | 否 | +| taro-vite-vue3-tailwindcss-v4 | demo | weapp | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-vite-vue3-tailwindcss-v4/dist/app.wxss` (+4) | 338549 | 1693 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | +| uni-app-vite-tailwindcss-v4 | demo | mp-weixin | `app-android`, `app-ios`, `h5`, `h5:ssr`, `mp-alipay`, `mp-baidu`, `mp-jd`, `mp-kuaishou`, `mp-lark`, `mp-qq`, `mp-toutiao`, `mp-weixin`, `mp-xhs`, `quickapp-webview`, `quickapp-webview-huawei`, `quickapp-webview-union` | 通过 | `uni-app-vite-tailwindcss-v4/dist/build/mp-weixin/app.wxss` (+7) | 53167 | 214 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | +| weapp-vite-tailwindcss-v4 | demo | weapp | `weapp` | 通过 | `weapp-vite-tailwindcss-v4/dist/app.wxss` (+3) | 20003 | 123 | 否 | 否 | 否 | 是 | 是 | 否 | 否 | 否 | 是 | +| taro-webpack-react-tailwindcss-v4 | demo | web | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-webpack-react-tailwindcss-v4/dist` (+4) | 460183 | 2305 | 是 | 否 | 是 | 是 | 是 | 否 | 否 | 是 | 否 | +| taro-webpack-react-tailwindcss-v4 | demo | web-compact | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-webpack-react-tailwindcss-v4/dist` (+4) | 442372 | 2305 | 是 | 否 | 是 | 是 | 是 | 否 | 否 | 是 | 否 | | taro-vite-react-tailwindcss-v4 | demo | web | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-vite-react-tailwindcss-v4/dist` (+5) | 448889 | 2299 | 是 | 是 | 是 | 是 | 是 | 否 | 否 | 是 | 否 | | taro-vite-react-tailwindcss-v4 | demo | web-compact | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-vite-react-tailwindcss-v4/dist` (+5) | 434533 | 2299 | 是 | 是 | 是 | 是 | 是 | 否 | 否 | 是 | 否 | -| taro-webpack-vue3-tailwindcss-v4 | demo | web | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-webpack-vue3-tailwindcss-v4/dist` (+3) | 584311 | 1799 | 是 | 是 | 是 | 是 | 是 | 否 | 否 | 是 | 否 | -| taro-webpack-vue3-tailwindcss-v4 | demo | web-compact | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-webpack-vue3-tailwindcss-v4/dist` (+3) | 567631 | 1799 | 是 | 是 | 是 | 是 | 是 | 否 | 否 | 是 | 否 | +| taro-webpack-vue3-tailwindcss-v4 | demo | web | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-webpack-vue3-tailwindcss-v4/dist` (+3) | 584713 | 1799 | 是 | 是 | 是 | 是 | 是 | 否 | 否 | 是 | 否 | +| taro-webpack-vue3-tailwindcss-v4 | demo | web-compact | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-webpack-vue3-tailwindcss-v4/dist` (+3) | 568017 | 1799 | 是 | 是 | 是 | 是 | 是 | 否 | 否 | 是 | 否 | | taro-vite-vue3-tailwindcss-v4 | demo | web | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-vite-vue3-tailwindcss-v4/dist` (+3) | 333485 | 1756 | 是 | 是 | 是 | 是 | 是 | 否 | 否 | 是 | 否 | | taro-vite-vue3-tailwindcss-v4 | demo | web-compact | `weapp`, `swan`, `alipay`, `tt`, `h5`, `rn`, `qq`, `jd`, `harmony-hybrid` | 通过 | `taro-vite-vue3-tailwindcss-v4/dist` (+3) | 327702 | 1756 | 是 | 是 | 是 | 是 | 是 | 否 | 否 | 是 | 否 | | uni-app-vite-tailwindcss-v4 | demo | web | `app-android`, `app-ios`, `h5`, `h5:ssr`, `mp-alipay`, `mp-baidu`, `mp-jd`, `mp-kuaishou`, `mp-lark`, `mp-qq`, `mp-toutiao`, `mp-weixin`, `mp-xhs`, `quickapp-webview`, `quickapp-webview-huawei`, `quickapp-webview-union` | 通过 | `uni-app-vite-tailwindcss-v4/dist/build/h5` (+5) | 72704 | 377 | 是 | 是 | 是 | 是 | 是 | 是 | 否 | 是 | 是 | @@ -55,7 +55,7 @@ ### taro-webpack-react-tailwindcss-v4 - CSS 文件：`app.wxss`, `pages/index/index.wxss`, `pages/issue-998/index.wxss`, `sub-independent/pages/index.wxss`, `sub-normal/pages/index.wxss` -- 选择器：`.-bg-conic-180`, `.-bg-linear-65`, `.-rotate-y-45`, `.absolute`, `.before_ccontent-_b_aindependent_subpackage_taro-webpack-react-tailwindcss-v4_a_B:before`, `.before_ccontent-_b_anormal_subpackage_taro-webpack-react-tailwindcss-v4_a_B:before`, `.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x5f00_u_x59cb_u_x795e_u_x5947_u_x7684__tailwindcss_u_x5f00_u_x53d1_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before`, `.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x7ee7_u_x7eed_u_x795e_u_x5947_u_x7684__tailwindcss_HMR_u_x56de_u_x5f52_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before`, `.bg-_b_h0977ee_B`, `.bg-_b_h534312_B`, `.bg-_bimage_clinear-gradient_pto_right_m_h06b6d4_m_h3b82f6_P_B`, `.bg-_pimage_c--issue-928-image_P`, `.bg-conic`, `.bg-conic-180`, `.bg-conic-_bfrom_45deg_at_50_v_50_v_m_hef4444_m_heab308_m_h22c55e_B`, `.bg-conic-_p--issue-928-conic_P`, `.bg-conic_fdecreasing`, `.bg-gradient-to-r`, `.bg-independent-subpackage-marker`, `.bg-linear-65` +- 选择器：`.-bg-conic-180`, `.-bg-linear-65`, `.-rotate-y-45`, `.absolute`, `.before_ccontent-_b_aindependent_subpackage_taro-webpack-react-tailwindcss-v4_a_B:before`, `.before_ccontent-_b_anormal_subpackage_taro-webpack-react-tailwindcss-v4_a_B:before`, `.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x5f00_u_x59cb_u_x795e_u_x5947_u_x7684__tailwindcss_u_x5f00_u_x53d1_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before`, `.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x7ee7_u_x7eed_u_x795e_u_x5947_u_x7684__tailwindcss_HMR_u_x56de_u_x5f52_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before`, `.bg-_b_h0977ee_B`, `.bg-_b_h534312_B`, `.bg-_bimage_clinear-gradient_pto_right_m_h06b6d4_m_h3b82f6_P_B`, `.bg-_pimage_c--issue-928-image_P`, `.bg-blue-200`, `.bg-blue-500`, `.bg-conic`, `.bg-conic-180`, `.bg-conic-_bfrom_45deg_at_50_v_50_v_m_hef4444_m_heab308_m_h22c55e_B`, `.bg-conic-_p--issue-928-conic_P`, `.bg-conic_fdecreasing`, `.bg-gradient-to-r` ### taro-vite-react-tailwindcss-v4 @@ -80,17 +80,17 @@ ### weapp-vite-tailwindcss-v4 - CSS 文件：`app.wxss`, `pages/index/index.wxss`, `sub-independent/pages/index.wxss`, `sub-normal/pages/index.wxss` -- 选择器：`.before_ccontent-_b_aindependent_subpackage_weapp-vite-tailwindcss-v4_a_B:before`, `.before_ccontent-_b_anormal_subpackage_weapp-vite-tailwindcss-v4_a_B:before`, `.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x5f00_u_x59cb_u_x795e_u_x5947_u_x7684__tailwindcss_u_x5f00_u_x53d1_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before`, `.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x7ee7_u_x7eed_u_x795e_u_x5947_u_x7684__tailwindcss_HMR_u_x56de_u_x5f52_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before`, `.bg-_b_h0977ee_B`, `.bg-_b_h111111_B`, `.bg-_b_h3a32d1_B`, `.bg-_b_h68c828_B`, `.bg-amber-300`, `.bg-blue-500_f30`, `.bg-gradient-to-b`, `.bg-gradient-to-t`, `.bg-gradient-to-tr`, `.bg-gray-900`, `.bg-independent-subpackage-marker`, `.bg-normal-subpackage-marker`, `.bg-white`, `.bg-zinc-50`, `.border-4`, `.dark_cbg-zinc-900.theme-dark` +- 选择器：`.a`, `.b`, `.before_ccontent-_b_aindependent_subpackage_weapp-vite-tailwindcss-v4_a_B:before`, `.before_ccontent-_b_anormal_subpackage_weapp-vite-tailwindcss-v4_a_B:before`, `.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x5f00_u_x59cb_u_x795e_u_x5947_u_x7684__tailwindcss_u_x5f00_u_x53d1_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before`, `.before_ccontent-_b_au_x73b0_u_x5728_u_xff0c_u_x8ba9_u_x6211_u_x4eec_u_x7ee7_u_x7eed_u_x795e_u_x5947_u_x7684__tailwindcss_HMR_u_x56de_u_x5f52_u_x4e4b_u_x65c5_u_x5427_u_xff01__a_B:before`, `.bg-_b_h0977ee_B`, `.bg-_b_h111111_B`, `.bg-_b_h3a32d1_B`, `.bg-_b_h68c828_B`, `.bg-amber-300`, `.bg-blue-500_f30`, `.bg-gradient-to-b`, `.bg-gradient-to-t`, `.bg-gradient-to-tr`, `.bg-gray-900`, `.bg-independent-subpackage-marker`, `.bg-normal-subpackage-marker`, `.bg-white`, `.bg-zinc-50` ### taro-webpack-react-tailwindcss-v4 - CSS 文件：`css/app.css`, `css/chunk.1.css`, `css/chunk.2.css`, `css/chunk.3.css`, `css/chunk.4.css` -- 选择器：`*`, `.-bg-conic-180`, `.-bg-linear-65`, `.-rotate-y-45`, `.absolute`, `.before\:content-\[\'independent_subpackage_taro-webpack-react-tailwindcss-v4\'\]:before`, `.before\:content-\[\'normal_subpackage_taro-webpack-react-tailwindcss-v4\'\]:before`, `.before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]:before`, `.before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\]:before`, `.bg-\(image\:--issue-928-image\)`, `.bg-\[\#0977ee\]`, `.bg-\[\#534312\]`, `.bg-\[image\:linear-gradient\(to_right\,\#06b6d4\,\#3b82f6\)\]`, `.bg-conic`, `.bg-conic-180`, `.bg-conic-\(--issue-928-conic\)`, `.bg-conic-\[from_45deg_at_50\%_50\%\,\#ef4444\,\#eab308\,\#22c55e\]`, `.bg-conic\/decreasing`, `.bg-gradient-to-r`, `.bg-independent-subpackage-marker` +- 选择器：`*`, `.-bg-conic-180`, `.-bg-linear-65`, `.-rotate-y-45`, `.absolute`, `.before\:content-\[\'independent_subpackage_taro-webpack-react-tailwindcss-v4\'\]:before`, `.before\:content-\[\'normal_subpackage_taro-webpack-react-tailwindcss-v4\'\]:before`, `.before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]:before`, `.before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\]:before`, `.bg-\(image\:--issue-928-image\)`, `.bg-\[\#0977ee\]`, `.bg-\[\#534312\]`, `.bg-\[image\:linear-gradient\(to_right\,\#06b6d4\,\#3b82f6\)\]`, `.bg-blue-200`, `.bg-blue-500`, `.bg-conic`, `.bg-conic-180`, `.bg-conic-\(--issue-928-conic\)`, `.bg-conic-\[from_45deg_at_50\%_50\%\,\#ef4444\,\#eab308\,\#22c55e\]`, `.bg-conic\/decreasing` ### taro-webpack-react-tailwindcss-v4 - CSS 文件：`css/app.css`, `css/chunk.1.css`, `css/chunk.2.css`, `css/chunk.3.css`, `css/chunk.4.css` -- 选择器：`*`, `.-bg-conic-180`, `.-bg-linear-65`, `.-rotate-y-45`, `.absolute`, `.before\:content-\[\'independent_subpackage_taro-webpack-react-tailwindcss-v4\'\]:before`, `.before\:content-\[\'normal_subpackage_taro-webpack-react-tailwindcss-v4\'\]:before`, `.before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]:before`, `.before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\]:before`, `.bg-\(image\:--issue-928-image\)`, `.bg-\[\#0977ee\]`, `.bg-\[\#534312\]`, `.bg-\[image\:linear-gradient\(to_right\,\#06b6d4\,\#3b82f6\)\]`, `.bg-conic`, `.bg-conic-180`, `.bg-conic-\(--issue-928-conic\)`, `.bg-conic-\[from_45deg_at_50\%_50\%\,\#ef4444\,\#eab308\,\#22c55e\]`, `.bg-conic\/decreasing`, `.bg-gradient-to-r`, `.bg-independent-subpackage-marker` +- 选择器：`*`, `.-bg-conic-180`, `.-bg-linear-65`, `.-rotate-y-45`, `.absolute`, `.before\:content-\[\'independent_subpackage_taro-webpack-react-tailwindcss-v4\'\]:before`, `.before\:content-\[\'normal_subpackage_taro-webpack-react-tailwindcss-v4\'\]:before`, `.before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]:before`, `.before\:content-\[\'现在，让我们继续神奇的_tailwindcss_HMR_回归之旅吧！\'\]:before`, `.bg-\(image\:--issue-928-image\)`, `.bg-\[\#0977ee\]`, `.bg-\[\#534312\]`, `.bg-\[image\:linear-gradient\(to_right\,\#06b6d4\,\#3b82f6\)\]`, `.bg-blue-200`, `.bg-blue-500`, `.bg-conic`, `.bg-conic-180`, `.bg-conic-\(--issue-928-conic\)`, `.bg-conic-\[from_45deg_at_50\%_50\%\,\#ef4444\,\#eab308\,\#22c55e\]`, `.bg-conic\/decreasing` ### taro-vite-react-tailwindcss-v4 diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/README.md index e5ce277ec..fff1ff715 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: uni-app-vite-tailwindcss-v4/dist/build/mp-weixin/app.wxss | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 52550 | 214 | false | false | false | true | true | false | true | +| 53167 | 214 | false | false | false | true | true | false | true | ## Generator CSS Files @@ -27,7 +27,7 @@ Entry: uni-app-vite-tailwindcss-v4/dist/build/mp-weixin/app.wxss | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | | `app.wxss` | [artifacts/app.wxss](artifacts/app.wxss) | 23 | 0 | false | false | false | false | false | false | false | -| `main.wxss` | [artifacts/main.wxss](artifacts/main.wxss) | 28183 | 187 | false | false | false | true | true | false | true | +| `main.wxss` | [artifacts/main.wxss](artifacts/main.wxss) | 28800 | 187 | false | false | false | true | true | false | true | | `components/HelloWorld.wxss` | [artifacts/components__HelloWorld.wxss](artifacts/components__HelloWorld.wxss) | 480 | 1 | false | false | false | false | false | false | false | | `pages-order/pages/home/home.wxss` | [artifacts/pages-order__pages__home__home.wxss](artifacts/pages-order__pages__home__home.wxss) | 9398 | 51 | false | false | false | false | false | false | true | | `pages-order/pages/user/user.wxss` | [artifacts/pages-order__pages__user__user.wxss](artifacts/pages-order__pages__user__user.wxss) | 9398 | 51 | false | false | false | false | false | false | true | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/main.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/main.wxss index 25159d296..a849a7914 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/main.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/mp-weixin/uni-app-vite-tailwindcss-v4/artifacts/main.wxss @@ -40,26 +40,28 @@ text, page, .tw-root, wx-root-portal-content { - --font-sans: 'inter', 'inter Fallback', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; - --font-mono: var(--font-plex-mono), monospace; + --font-sans: + -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; + --color-red-300: rgb(255, 163, 164); + --color-green-200: rgb(185, 248, 207); --color-emerald-50: rgb(236, 253, 245); - --color-emerald-500: #00bb7f; + --color-emerald-200: rgb(164, 244, 207); + --color-emerald-500: rgb(0, 185, 129); --color-emerald-600: rgb(0, 150, 105); - --color-blue-500: #3080ff; + --color-emerald-700: rgb(0, 120, 87); + --color-blue-500: rgb(50, 128, 255); + --color-slate-100: rgb(241, 245, 249); --color-slate-200: rgb(226, 232, 240); --color-slate-500: rgb(98, 116, 142); + --color-slate-700: rgb(49, 65, 88); --color-slate-800: rgb(29, 41, 61); - --color-slate-900: #0f172b; - --color-white: #fff; + --color-slate-900: rgb(15, 23, 43); --color-zinc-50: rgb(250, 250, 250); --color-zinc-900: rgb(24, 24, 27); - --color-red-300: rgb(255, 163, 164); - --color-green-200: rgb(185, 248, 207); - --color-emerald-200: rgb(164, 244, 207); - --color-emerald-700: rgb(0, 120, 87); - --color-slate-100: rgb(241, 245, 249); - --color-slate-700: rgb(49, 65, 88); --color-zinc-950: rgb(9, 9, 11); + --color-white: #fff; --spacing: 8rpx; --text-xs: 24rpx; --text-xs--line-height: calc(1 / 0.75); @@ -69,41 +71,13 @@ wx-root-portal-content { --text-base--line-height: calc(1.5 / 1); --font-weight-semibold: 600; --font-weight-bold: 700; - --default-font-family: var(--font-inter), system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; - --default-mono-font-family: var(--font-plex-mono), monospace; + --default-font-family: var(--font-sans); + --default-mono-font-family: var(--font-mono); --color-neutral-1B: #1b1b1b; --color-neutral-66: #666; --color-midnight: #121063; --color-tahiti: #3ab7bf; --color-bermuda: #78dcca; - --test-color: #006241; - --color-test: #006241; - --font-test: 'Issue 978', sans-serif; - --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; - --color-red-50: #fef2f2; - --color-red-950: #460809; - --color-orange-500: #fe6e00; - --color-amber-500: #f99c00; - --color-yellow-500: #edb200; - --color-lime-500: #80cd00; - --color-teal-500: #00baa7; - --color-sky-500: #00a5ef; - --color-indigo-500: #625fff; - --color-violet-500: #8d54ff; - --color-purple-500: #ac4bff; - --color-pink-500: #f6339a; - --color-gray-900: #101828; - --color-neutral-900: #171717; - --color-stone-900: #1c1917; - --color-black: #000; - --radius-lg: 16rpx; - --status-bar-height: 25px; - --top-window-height: 0px; - --window-top: 0px; - --window-bottom: 0px; - --window-left: 0px; - --window-right: 0px; - --window-magin: 0px; } button::after, wx-button::after { @@ -839,6 +813,47 @@ abc { .reset-button { display: block; } +:host, +page, +.tw-root, +wx-root-portal-content { + --test-color: #006241; + --color-test: #006241; + --font-test: 'Issue 978', sans-serif; + --font-sans: 'inter', 'inter Fallback', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; + --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; + --font-mono: var(--font-plex-mono), monospace; + --color-emerald-500: #00bb7f; + --color-blue-500: #3080ff; + --color-slate-900: #0f172b; + --color-zinc-900: rgb(24, 24, 27); + --color-red-50: #fef2f2; + --color-red-950: #460809; + --color-orange-500: #fe6e00; + --color-amber-500: #f99c00; + --color-yellow-500: #edb200; + --color-lime-500: #80cd00; + --color-teal-500: #00baa7; + --color-sky-500: #00a5ef; + --color-indigo-500: #625fff; + --color-violet-500: #8d54ff; + --color-purple-500: #ac4bff; + --color-pink-500: #f6339a; + --color-gray-900: #101828; + --color-neutral-900: #171717; + --color-stone-900: #1c1917; + --color-black: #000; + --radius-lg: 16rpx; + --default-font-family: var(--font-inter), system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; + --default-mono-font-family: var(--font-plex-mono), monospace; + --status-bar-height: 25px; + --top-window-height: 0px; + --window-top: 0px; + --window-bottom: 0px; + --window-left: 0px; + --window-right: 0px; + --window-magin: 0px; +} [data-c-h='true'] { display: none !important; } diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/README.md index f5e44dfe1..a834802af 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: taro-vite-react-tailwindcss-v4/dist/app.wxss | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 537632 | 2256 | false | false | false | true | true | false | true | +| 428351 | 2256 | false | false | false | true | true | false | true | ## Generator CSS Files @@ -26,7 +26,7 @@ Entry: taro-vite-react-tailwindcss-v4/dist/app.wxss | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | | `app.wxss` | [artifacts/app.wxss](artifacts/app.wxss) | 29 | 0 | false | false | false | false | false | false | false | -| `app-origin.wxss` | [artifacts/app-origin.wxss](artifacts/app-origin.wxss) | 517733 | 2212 | false | false | false | true | true | false | true | +| `app-origin.wxss` | [artifacts/app-origin.wxss](artifacts/app-origin.wxss) | 408452 | 2212 | false | false | false | true | true | false | true | | `pages/index/index.wxss` | [artifacts/pages__index__index.wxss](artifacts/pages__index__index.wxss) | 50 | 1 | false | false | false | false | false | false | false | | `pages/issue-998/index.wxss` | [artifacts/pages__issue-998__index.wxss](artifacts/pages__issue-998__index.wxss) | 2409 | 11 | false | false | false | false | false | false | true | | `sub-independent/pages/index.wxss` | [artifacts/sub-independent__pages__index.wxss](artifacts/sub-independent__pages__index.wxss) | 2011 | 9 | false | false | false | false | false | false | true | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/artifacts/app-origin.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/artifacts/app-origin.wxss index 3e55604f9..11d079cdd 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/artifacts/app-origin.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-react-tailwindcss-v4/artifacts/app-origin.wxss @@ -1,3 +1,4 @@ +@charset "UTF-8"; view, text, ::after, @@ -300,15 +301,6 @@ wx-root-portal-content { --text-base: 32rpx; --font-weight-bold: 700; --radius-lg: 16rpx; -} -.h5-button::after, -wx-button::after { - display: none; - border: none; - content: ''; -} -wx-button { - background: #000; } /* tokens: mt-2 <= src/pages/index/index.tsx */ .mt-2 { @@ -965,75 +957,6 @@ wx-button { pointer-events: none; background-repeat: repeat; } -.nut-watermark-full-page { - position: fixed; -} -.nut-horizontal-items { - float: left; -} -.nut-horizontal-items .h5-li { - display: block; - float: left; - color: var(--nutui-color-title, #1a1a1a); - background: var(--nutui-color-background-overlay, #ffffff); - padding: 10rpx; - margin-right: 20rpx; -} -.nut-horizontal-items::after { - content: ''; - display: block; - visibility: hidden; - clear: both; -} -.nut-vertical-items .h5-li { - display: block; - color: var(--nutui-color-title, #1a1a1a); - background: var(--nutui-color-background-overlay, #ffffff); - border-radius: 7rpx; - box-shadow: 0 1rpx 6rpx #edeef1; - margin-top: 20rpx; - padding: 14rpx 15rpx; - font-size: 13rpx; - line-height: 18rpx; - font-family: PingFangSC; - font-weight: 500; -} -.nut-virtualList-box { - overflow: auto; -} -.nut-virtuallist { - width: 100%; - overflow: scroll; - position: relative; - -webkit-overflow-scrolling: touch; -} -.nut-virtuallist-phantom { - position: absolute; - left: 0; - top: 0; - right: 0; - z-index: -1; -} -.nut-virtuallist-container { - position: absolute; - left: 0; - right: 0; - top: 0; -} -.nut-virtuallist-item { - overflow: hidden; - margin: var(--nutui-list-item-margin, 0 0 10rpx 0); -} -[dir='rtl'] .nut-horizontal-items, -.nut-rtl .nut-horizontal-items { - float: right; -} -[dir='rtl'] .nut-horizontal-items .h5-li, -.nut-rtl .nut-horizontal-items .h5-li { - float: right; - margin-right: 0; - margin-left: 20rpx; -} .nut-uploader { position: relative; display: -ms-flexbox; @@ -1041,9 +964,6 @@ wx-button { -ms-flex-wrap: wrap; flex-wrap: wrap; } -.nut-uploader-slot { - position: relative; -} .nut-uploader-upload { position: relative; display: -ms-flexbox; @@ -1069,40 +989,6 @@ wx-button { align-items: center; color: var(--nutui-uploader-image-color, var(--nutui-color-text-help, #888b94)); } -.nut-uploader-icon .h5-i, -.nut-uploader-icon .nut-icon { - color: var(--nutui-uploader-image-color, var(--nutui-color-text-help, #888b94)); - margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); -} -.nut-uploader-icon-tip { - font-size: var(--nutui-uploader-image-icon-tip-font-size, 12rpx); -} -.nut-uploader-input { - position: absolute !important; - top: 0; - left: 0; - width: 100% !important; - height: 100% !important; - overflow: hidden; - cursor: pointer; - opacity: 0; -} -.nut-uploader-upload-disabled { - background: var(--nutui-uploader-background-disabled, var(--nutui-color-background, #f2f3f5)); - color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled, #c2c4cc)); -} -.nut-uploader-upload-disabled .nut-uploader-icon .h5-i, -.nut-uploader-upload-disabled .nut-uploader-icon .nut-icon { - color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled, #c2c4cc)); - margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); -} -.nut-uploader-preview { - position: relative; - margin-right: var(--nutui-uploader-preview-margin-right, 10rpx); - margin-bottom: var(--nutui-uploader-preview-margin-bottom, 10rpx); - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); - box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); -} .nut-uploader-preview-progress { position: absolute; left: 0; @@ -1121,20 +1007,6 @@ wx-button { border-radius: var(--nutui-uploader-image-border-radius, 4rpx); z-index: 10; } -.nut-uploader-preview-progress .h5-i { - margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); -} -.nut-uploader-preview-progress-msg { - color: var(--nutui-color-text-help, #888b94); - font-size: 12rpx; -} -.nut-uploader-preview.list { - width: 100%; - margin-right: 0; - margin-bottom: 0; - margin-top: 10rpx; - box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.01176); -} .nut-uploader-preview-list { width: 100%; height: 32rpx; @@ -1160,15 +1032,6 @@ wx-button { overflow: hidden; text-overflow: ellipsis; } -.nut-uploader-preview-list .nut-progress { - position: absolute; - left: 0; - right: 0; - bottom: 0; -} -.nut-uploader-preview-list .nut-progress .nut-progress-outer { - height: 2rpx !important; -} .nut-uploader-preview .close { position: absolute; right: var(--nutui-uploader-preview-close-right, 0rpx); @@ -1177,36 +1040,6 @@ wx-button { transform: translate(50%, -50%); z-index: 1; } -.nut-uploader-preview-img { - position: relative; - width: var(--nutui-uploader-image-width, 100rpx); - height: var(--nutui-uploader-image-height, 100rpx); - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); - overflow: hidden; -} -.nut-uploader-preview-img .h5-i { - color: var(--nutui-color-title, #1a1a1a); -} -.nut-uploader-preview-img .tips { - position: absolute; - bottom: 0; - left: 0; - font-size: 12rpx; - color: #fff; - text-align: center; - box-sizing: border-box; - height: var(--nutui-uploader-preview-tips-height, 24rpx); - line-height: var(--nutui-uploader-preview-tips-height, 24rpx); - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); - border-top-left-radius: 0; - border-top-right-radius: 0; - padding: var(--nutui-uploader-preview-tips-padding, 0 5rpx); - background: var(--nutui-uploader-preview-tips-background, var(--nutui-black-7)); - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} .nut-uploader-preview-img-c { display: -ms-flexbox; display: flex; @@ -1242,36 +1075,10 @@ wx-button { overflow: hidden; word-break: break-all; } -.nut-uploader-preview-img-file-name.error { - color: red !important; -} -.nut-uploader-preview-img-file-name.success { - color: #1890ff !important; -} .nut-uploader-preview-img-file-name .nut-icon-Link { -ms-flex-negative: 0; flex-shrink: 0; } -[dir='rtl'] .nut-uploader-input, -.nut-rtl .nut-uploader-input { - left: auto; - right: 0; -} -[dir='rtl'] .nut-uploader-preview, -.nut-rtl .nut-uploader-preview { - margin-right: 0; - margin-left: var(--nutui-uploader-preview-margin-right, 10rpx); -} -[dir='rtl'] .nut-uploader-preview-progress, -.nut-rtl .nut-uploader-preview-progress { - left: auto; - right: 0; -} -[dir='rtl'] .nut-uploader-preview.list, -.nut-rtl .nut-uploader-preview.list { - margin-right: 0; - margin-left: 0; -} [dir='rtl'] .nut-uploader-preview .close, .nut-rtl .nut-uploader-preview .close { right: auto; @@ -1279,11 +1086,6 @@ wx-button { -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } -[dir='rtl'] .nut-uploader-preview-img .tips, -.nut-rtl .nut-uploader-preview-img .tips { - left: auto; - right: 0; -} .nut-video { width: 100%; height: 100%; @@ -1291,47 +1093,12 @@ wx-button { display: -ms-flexbox; display: flex; } -.nut-video-player { - width: 100%; - background: #000; -} .nut-video .h5-video { width: 100%; height: 100%; -o-object-fit: fill; object-fit: fill; } -.nut-tour-mask { - position: fixed; - box-shadow: 0 0 0 150vh var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); - border-radius: var(--nutui-tour-mask-border-radius, 10rpx); - z-index: 999; -} -.nut-tour-mask-none { - box-shadow: none; -} -.nut-tour-mask-hidden { - opacity: 0; -} -.nut-tour-content { - display: block; - padding: var(--nutui-tour-content-padding, 10rpx 12rpx); - min-width: var(--nutui-tour-content-min-width, 200rpx); - box-sizing: content-box; -} -.nut-tour-content-top { - display: block; - text-align: right; -} -.nut-tour-content-top-close { - --nut-icon-width: 10rpx; - --nut-icon-height: 10rpx; -} -.nut-tour-content-inner { - margin: var(--nutui-tour-content-inner-margin, 10rpx 0rpx); - font-size: var(--nutui-tour-content-inner-font-size, 14rpx); - white-space: nowrap; -} .nut-tour-content-bottom { margin-top: var(--nutui-tour-content-bottom-margin-top, 10rpx); display: -ms-flexbox; @@ -1345,81 +1112,15 @@ wx-button { -ms-flex-pack: end; justify-content: flex-end; } -.nut-tour-content-bottom-operate-btn { - display: inline-block; - border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); - margin-left: var(--nutui-tour-content-bottom-btn-margin-left, 4rpx); - padding: var(--nutui-tour-content-bottom-btn-padding, 2rpx 4rpx); - font-size: var(--nutui-tour-content-bottom-btn-font-size, 12rpx); - border-radius: var(--nutui-tour-content-bottom-btn-border-radius, 4rpx); - color: var(--nutui-color-text, #505259); - cursor: pointer; -} -.nut-tour-content-bottom-operate-btn.active { - color: #fff; - border: 0; - background: var(--nutui-color-primary, #ff0f23); -} -.nut-tour-content-tile .nut-tour-content-inner { - margin: 0; -} -.nut-tour-masked { - position: fixed; - width: 100vh; - height: 100vh; - z-index: 1000; - top: 0; - left: 0; - background: transparent; -} -[dir='rtl'] .nut-tour-content-bottom-operate-btn, -.nut-rtl .nut-tour-content-bottom-operate-btn { - margin-left: 0; - margin-right: var(--nutui-tour-content-bottom-btn-margin-left, 4rpx); -} -[dir='rtl'] .nut-tour-masked, -.nut-rtl .nut-tour-masked { - left: auto; - right: 0; -} -.nut-trendarrow { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-trendarrow-font-size, 14rpx); -} -.nut-trendarrow-icon-before { - margin-right: var(--nutui-trendarrow-icon-margin, 4rpx); -} -.nut-trendarrow-icon-after { - margin-left: var(--nutui-trendarrow-icon-margin, 4rpx); -} -.nut-trendarrow-rate { - vertical-align: middle; - display: inline; -} -.nut-trendarrow .nut-icon { - vertical-align: middle; -} -[dir='rtl'] .nut-trendarrow-icon-before, -.nut-rtl .nut-trendarrow-icon-before { - margin-right: 0; - margin-left: var(--nutui-trendarrow-icon-margin, 4rpx); -} -[dir='rtl'] .nut-trendarrow-icon-after, -.nut-rtl .nut-trendarrow-icon-after { - margin-left: 0; - margin-right: var(--nutui-trendarrow-icon-margin, 4rpx); -} -@keyframes rotation { - 0% { - } - to { - } +.nut-trendarrow { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + align-items: center; + color: var(--nutui-color-title, #1a1a1a); + font-size: var(--nutui-trendarrow-font-size, 14rpx); } .nut-toast { position: fixed; @@ -1438,13 +1139,6 @@ wx-button { pointer-events: none; z-index: 1300; } -.nut-toast-overlay-default { - --nutui-overlay-bg-color: rgba(0, 0, 0, 0); -} -.nut-toast-overlay-default-taro { - background-color: rgba(0, 0, 0, 0); - --nutui-overlay-bg-color: rgba(0, 0, 0, 0); -} .nut-toast-inner { position: absolute; top: var(--nutui-toast-inner-top, 50%); @@ -1469,52 +1163,6 @@ wx-button { border-radius: var(--nutui-toast-inner-border-radius, var(--nutui-radius-xl, 12rpx)); color: var(--nutui-toast-font-color, #ffffff); } -.nut-toast-inner-descrption { - max-width: 68.2%; -} -.nut-toast-inner-normal { - word-break: normal; - word-wrap: normal; -} -.nut-toast-inner-break-word { - word-break: normal; - word-wrap: break-word; -} -.nut-toast-inner-small { - font-size: var(--nutui-font-size-s, 12rpx); -} -.nut-toast-inner-large { - font-size: var(--nutui-font-size-l, 15rpx); -} -.nut-toast-center { - top: var(--nutui-toast-inner-top, 48%); -} -.nut-toast-bottom { - top: var(--nutui-toast-inner-top, 80%); -} -.nut-toast-top { - top: var(--nutui-toast-inner-top, 20%); -} -.nut-toast-text { - color: #fff; - text-align: var(--nutui-toast-inner-text-align, center); - line-height: normal; - line-height: 20rpx; - height: auto; -} -.nut-toast-title { - color: #fff; - font-size: var(--nutui-toast-title-font-size, 16rpx); - font-weight: 600; - text-align: var(--nutui-toast-inner-text-align, center); - line-height: normal; - line-height: 22rpx; -} -.nut-toast .nut-icon { - width: 24rpx; - height: 24rpx; - color: #fff; -} .nut-toast-icon-wrapper { width: 100%; display: -ms-flexbox; @@ -1526,36 +1174,6 @@ wx-button { margin: 3rpx 0 5rpx; color: #fff; } -.nut-toast-icon-wrapper-icon { - width: 24rpx; - height: 24rpx; -} -.nut-toast-rtl { - left: auto; - right: 0; -} -.nut-toast-rtl-inner { - left: auto; - right: 50%; -} -[dir='rtl'] .nut-toast, -.nut-rtl .nut-toast { - left: auto; - right: 0; -} -[dir='rtl'] .nut-toast-inner, -.nut-rtl .nut-toast-inner { - left: auto; - right: 50%; -} -.toast-fade-enter-active, -.toast-fade-leave-active { - transition: opacity 0.3s; -} -.toast-fade-enter-from, -.toast-fade-leave-to { - opacity: 0; -} .nut-timeselect { background-color: var(--nutui-color-background-overlay, #ffffff); display: -ms-flexbox; @@ -1570,26 +1188,6 @@ wx-button { -ms-flex: 1; flex: 1; } -.nut-timeselect-content-left { - width: var(--nutui-timeselect-date-width, 140rpx); - min-width: var(--nutui-timeselect-date-width, 140rpx); - height: 100%; - overflow: auto; - background: var(--nutui-color-background-sunken, #f7f8fc); -} -.nut-timepannel { - padding: 0 16rpx; - height: var(--nutui-timeselect-date-height, 40rpx); - line-height: var(--nutui-timeselect-date-height, 40rpx); - text-align: left; - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-font-size-base, 14rpx); -} -.nut-timepannel.active { - background: var(--nutui-color-background-overlay, #ffffff); - color: var(--nutui-timeselect-date-active-color, var(--nutui-color-title, #1a1a1a)); - font-weight: var(--nutui-font-weight-bold, 600); -} .nut-timedetail { display: -ms-flexbox; display: flex; @@ -1602,27 +1200,6 @@ wx-button { flex-wrap: wrap; padding: 0 0 50rpx 12rpx; } -.nut-timedetail-item { - width: var(--nutui-timeselect-time-width, 100rpx); - height: var(--nutui-timeselect-time-height, 50rpx); - line-height: var(--nutui-timeselect-time-height, 50rpx); - text-align: center; - margin: var(--nutui-timeselect-time-margin, 0 10rpx 10rpx 0); - background: var(--nutui-timeselect-time-background, var(--nutui-color-background, #f2f3f5)); - border-radius: 5rpx; - font-size: var(--nutui-font-size-base, 14rpx); - border: 1rpx solid transparent; -} -.nut-timedetail-item.active { - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); - border: 1rpx solid var(--nutui-color-primary, #ff0f23); - color: var(--nutui-color-primary, #ff0f23); - font-weight: var(--nutui-font-weight-bold, 600); -} -[dir='rtl'] .nut-timedetail, -.nut-rtl .nut-timedetail { - padding: 0 12rpx 50rpx 0; -} .nut-tag { padding: var(--nutui-tag-padding, 0rpx 2rpx); display: -ms-flexbox; @@ -1639,45 +1216,6 @@ wx-button { color: var(--nutui-tag-color, #ffffff); border: var(--nutui-tag-border-width, 1rpx) solid transparent; } -.nut-tag .nut-icon { - vertical-align: middle; - margin-left: 4rpx; - color: var(--nutui-tag-color, #ffffff); -} -.nut-tag-text { - font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10rpx)); - color: var(--nutui-tag-color, #ffffff); -} -.nut-tag-text-plain { - color: var(--nutui-color-title, #1a1a1a); -} -.nut-tag-default { - background: var(--nutui-tag-background-color, var(--nutui-color-title, #1a1a1a)); -} -.nut-tag-primary { - background: var(--nutui-tag-primary-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%)); -} -.nut-tag-info { - background: var(--nutui-tag-info-background-color, var(--nutui-color-info, #0073ff)); -} -.nut-tag-success { - background: var(--nutui-tag-success-background-color, #4fc08d); -} -.nut-tag-danger { - background: var(--nutui-tag-danger-background-color, var(--nutui-color-danger, #ff0f23)); -} -.nut-tag-warning { - background: var(--nutui-tag-warning-background-color, var(--nutui-color-warning, #ffbf00)); -} -.nut-tag-round { - border-radius: var(--nutui-tag-round-border-radius, 8rpx); -} -.nut-tag-mark { - border-radius: var(--nutui-tag-mark-border-radius, 0 8rpx 8rpx 0); -} -.nut-tag-close { - cursor: pointer; -} .nut-tag-custom-icon { display: -ms-flexbox; display: flex; @@ -1691,15 +1229,6 @@ wx-button { color: var(--nutui-tag-color, #ffffff); margin-left: 4rpx; } -.nut-tag-plain { - background-color: #fff; - border: var(--nutui-tag-border-width, 1rpx) solid var(--nutui-color-title, #1a1a1a); -} -[dir='rtl'] .nut-tag .nut-icon, -.nut-rtl .nut-tag .nut-icon { - margin-left: 0; - margin-right: 4rpx; -} .nut-textarea { display: -ms-flexbox; display: flex; @@ -1711,70 +1240,20 @@ wx-button { font-size: var(--nutui-font-size-base, 14rpx); border-radius: var(--nutui-radius-s, 6rpx); } -.nut-textarea-container { - padding: var(--nutui-textarea-padding, 12rpx); - background-color: var(--nutui-color-background-overlay, #ffffff); -} .nut-textarea-error { border: 0.5rpx solid var(--nutui-color-danger, #ff0f23); background-color: var(--nutui-color-danger-light, #ffebef); } -.nut-textarea-limit { - text-align: right; - font-size: var(--nutui-font-size-base, 14rpx); - line-height: var(--nutui-font-size-base, 14rpx); - margin-top: var(--nutui-spacing-base, 8rpx); +.nut-textarea-textarea::-moz-placeholder { color: var(--nutui-color-text-help, #888b94); } -.nut-textarea-limit-disabled { - cursor: not-allowed; - color: var(--nutui-color-text-disabled, #c2c4cc); -} -.nut-textarea-textarea { - outline: none; - display: block; - box-sizing: border-box; - width: 100%; - height: 40rpx; - min-width: 0; - margin: 0; - padding: 0; - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-textarea-text-color, var(--nutui-color-title, #1a1a1a)); - caret-color: var(--nutui-textarea-text-curror-color, var(--nutui-color-primary, #ff0f23)); - text-align: left; - background-color: transparent; - border: 0; - resize: none; -} -.nut-textarea-textarea .taro-textarea { - color: var(--nutui-textarea-text-color, var(--nutui-color-title, #1a1a1a)); - background-color: transparent; - resize: none; -} -.nut-textarea-textarea::-webkit-input-placeholder { - color: var(--nutui-color-text-help, #888b94); -} -.nut-textarea-textarea::-moz-placeholder { - color: var(--nutui-color-text-help, #888b94); -} -.nut-textarea-textarea:-ms-input-placeholder { - color: var(--nutui-color-text-help, #888b94); -} -.nut-textarea-textarea::-ms-input-placeholder { - color: var(--nutui-color-text-help, #888b94); -} -.nut-textarea-textarea::placeholder { - color: var(--nutui-color-text-help, #888b94); -} -.nut-textarea-textarea-disabled { - cursor: not-allowed; - color: var(--nutui-color-text-disabled, #c2c4cc); -} -.nut-textarea-textarea-disabled::-webkit-input-placeholder { - color: var(--nutui-color-text-disabled, #c2c4cc); -} -.nut-textarea-textarea-disabled::-moz-placeholder { +.nut-textarea-textarea:-ms-input-placeholder { + color: var(--nutui-color-text-help, #888b94); +} +.nut-textarea-textarea::-ms-input-placeholder { + color: var(--nutui-color-text-help, #888b94); +} +.nut-textarea-textarea-disabled::-moz-placeholder { color: var(--nutui-color-text-disabled, #c2c4cc); } .nut-textarea-textarea-disabled:-ms-input-placeholder { @@ -1783,15 +1262,6 @@ wx-button { .nut-textarea-textarea-disabled::-ms-input-placeholder { color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-textarea-textarea-disabled::placeholder { - color: var(--nutui-color-text-disabled, #c2c4cc); -} -.nut-textarea-textarea-disabled .taro-textarea { - color: var(--nutui-color-text-disabled, #c2c4cc); -} -.nut-textarea-textarea-disabled .taro-textarea::-webkit-input-placeholder { - color: var(--nutui-color-text-disabled, #c2c4cc); -} .nut-textarea-textarea-disabled .taro-textarea::-moz-placeholder { color: var(--nutui-color-text-disabled, #c2c4cc); } @@ -1801,17 +1271,6 @@ wx-button { .nut-textarea-textarea-disabled .taro-textarea::-ms-input-placeholder { color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-textarea-textarea-disabled .taro-textarea::placeholder { - color: var(--nutui-color-text-disabled, #c2c4cc); -} -.nut-textarea.nut-textarea-rtl-limit { - right: auto; - left: 15rpx; -} -.taro-textarea { - background-color: transparent; - resize: none; -} .nut-tabs { display: -ms-flexbox; display: flex; @@ -1833,11 +1292,6 @@ wx-button { background: var(--nutui-tabs-titles-background-color, var(--nutui-color-background, #f2f3f5)); scrollbar-width: none; } -.nut-tabs-titles::-webkit-scrollbar { - display: none; - width: 0; - background: transparent; -} .nut-tabs-titles .nut-tabs-list { width: 100%; display: -ms-flexbox; @@ -1849,16 +1303,10 @@ wx-button { -ms-flex-pack: start; justify-content: flex-start; } -.nut-tabs-titles-left .nut-tabs-titles-item { - padding: 0 22rpx; -} .nut-tabs-titles-right { -ms-flex-pack: end; justify-content: flex-end; } -.nut-tabs-titles-right .nut-tabs-titles-item { - padding: 0 22rpx; -} .nut-tabs-titles-item { position: relative; display: -ms-flexbox; @@ -1878,17 +1326,11 @@ wx-button { text-overflow: ellipsis; white-space: nowrap; } -.nut-tabs-titles-item .nut-icon { - color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a)); -} .nut-tabs-titles-item-left, .nut-tabs-titles-item-right { -ms-flex: none; flex: none; } -.nut-tabs-titles-item-text { - color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a)); -} .nut-tabs-titles-item-smile, .nut-tabs-titles-item-line { position: absolute; @@ -1904,57 +1346,6 @@ wx-button { opacity: var(--nutui-tabs-tab-line-opacity, 1); overflow: hidden; } -.nut-tabs-titles-item-smile { - bottom: var(--nutui-tabs-titles-item-smile-bottom, -10%); -} -.nut-tabs-titles-item-smile .nut-icon { - position: absolute; - font-size: 20rpx; - width: 100%; - height: 100%; -} -.nut-tabs-titles-item-active .nut-icon { - color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-tabs-titles-item-active .nut-tabs-titles-item-text { - color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); - font-weight: var(--nutui-tabs-titles-item-active-font-weight, var(--nutui-font-weight-bold, 600)); -} -.nut-tabs-titles-item-active .nut-tabs-titles-item-line { - overflow: visible; - overflow: initial; - content: ' '; - width: var(--nutui-tabs-tab-line-width, 12rpx); - height: var(--nutui-tabs-tab-line-height, 2rpx); - background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-tabs-titles-item-active .nut-tabs-titles-item-smile { - overflow: visible; - overflow: initial; - width: 40rpx; - height: 20rpx; -} -.nut-tabs-titles-item-active .nut-tabs-titles-item-smile .nut-icon { - color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-tabs-titles-item-disabled, -.nut-tabs-titles-item-disabled .nut-icon, -.nut-tabs-titles-item-disabled .nut-tabs-titles-item-text { - color: var(--nutui-color-text-disabled, #c2c4cc); -} -.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-tabs-titles-item-text, -.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-icon { - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-l, 15rpx)); -} -.nut-tabs-titles-card .nut-tabs-titles-item-active { - font-weight: var(--nutui-font-weight-bold, 600); - background-color: #fff; - border-radius: var(--nutui-radius-base, 8rpx) var(--nutui-radius-base, 8rpx) 0 0; -} -.nut-tabs-titles-button .nut-tabs-titles-item { - padding: 0 10rpx; -} .nut-tabs-titles-button .nut-tabs-titles-item .nut-tabs-titles-item-text { -ms-flex: 1; flex: 1; @@ -1967,20 +1358,6 @@ wx-button { justify-content: center; padding: 0 8rpx; } -.nut-tabs-titles-button .nut-tabs-titles-item-active .nut-tabs-titles-item-text { - background: var(--nutui-color-default-light); - color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); - border-radius: var(--nutui-tabs-button-border-radius, 50rpx); - font-weight: var(--nutui-font-weight-bold, 600); - background-color: var(--nutui-tabs-button-active-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); - border: var(--nutui-tabs-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); -} -.nut-tabs-titles-divider { - border-bottom: 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)); -} -.nut-tabs-titles-divider .nut-tabs-titles-item { - position: relative; -} .nut-tabs-titles-divider .nut-tabs-titles-item::after { content: ''; position: absolute; @@ -1992,15 +1369,6 @@ wx-button { -ms-transform: translateY(-50%); transform: translateY(-50%); } -.nut-tabs-titles-divider .nut-tabs-titles-item:last-child::after { - display: none; -} -.nut-tabs-vertical .nut-tabs-ellipsis { - white-space: break-spaces; - padding-left: 6rpx; - width: 90rpx; - line-height: var(--nutui-font-size-base, 14rpx); -} .nut-tabs-vertical .nut-tabs-titles { -ms-flex-direction: column; flex-direction: column; @@ -2018,30 +1386,11 @@ wx-button { -ms-flex: none; flex: none; } -.nut-tabs-vertical .nut-tabs-titles-item-smile { - overflow: hidden; - transition: width 0.3s ease; -} .nut-tabs-vertical .nut-tabs-titles-item-line { -ms-transform: translateY(-50%); transform: translateY(-50%); transition: height 0.3s ease; } -.nut-tabs-vertical .nut-tabs-titles-item-line-vertical { - top: 50%; -} -.nut-tabs-vertical .nut-tabs-titles-item-active { - background-color: var(--nutui-tabs-titles-item-active-background-color, var(--nutui-color-background-overlay, #ffffff)); -} -.nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line { - left: 10rpx; - width: var(--nutui-tabs-vertical-tab-line-width, 3rpx); - height: var(--nutui-tabs-vertical-tab-line-height, 12rpx); - background: var( - --nutui-tabs-vertical-tab-line-color, - linear-gradient(180deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-light-pressed, #ffebf1) 100%) - ); -} .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { right: -12rpx; bottom: -2%; @@ -2065,10 +1414,6 @@ wx-button { -ms-flex-direction: row; flex-direction: row; } -.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active { - background-color: transparent; - background-color: initial; -} .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line { left: 50%; -ms-transform: translate(-50%); @@ -2093,17 +1438,11 @@ wx-button { -ms-flex: 1; flex: 1; } -.nut-tabs-vertical .nut-tabs-content .nut-tabpane { - height: 100%; -} .nut-tabs-content { display: -ms-flexbox; display: flex; box-sizing: border-box; } -.nut-tabs-content-wrap { - overflow: hidden; -} [dir='rtl'] .nut-tabs-titles-item-smile, [dir='rtl'] .nut-tabs-titles-item-line, .nut-rtl .nut-tabs-titles-item-smile, @@ -2113,21 +1452,6 @@ wx-button { -ms-transform: translate(50%); transform: translate(50%); } -[dir='rtl'] .nut-tabs-titles-divider .nut-tabs-titles-item::after, -.nut-rtl .nut-tabs-titles-divider .nut-tabs-titles-item::after { - right: auto; - left: 0; -} -[dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item, -.nut-rtl .nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item { - padding-left: 0; - padding-right: 14rpx; -} -[dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line, -.nut-rtl .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line { - left: auto; - right: 10rpx; -} [dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile, .nut-rtl .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { left: -12rpx; @@ -2160,16 +1484,6 @@ wx-button { box-sizing: border-box; overflow: auto; } -.nut-tabpane.inactive { - overflow: visible; - height: 0; -} -.nut-table { - overflow: hidden; - position: relative; - word-wrap: break-word; - word-break: break-all; -} .nut-table-wrapper { display: -ms-flexbox; display: flex; @@ -2183,9 +1497,6 @@ wx-button { position: relative; border: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-table-wrapper-sticky { - overflow-x: auto; -} .nut-table-main { display: table; width: -moz-max-content; @@ -2197,195 +1508,44 @@ wx-button { min-width: 100%; position: relative; } -.nut-table-main-striped .nut-table-main-head-tr { - background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f2f3f5)); +.nut-table-main-head-tr-td-nodata, +.nut-table-main-body-tr-td-nodata { + display: -ms-flexbox; + display: flex; + height: 50rpx; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; } -.nut-table-main-striped .nut-table-main-body-tr:nth-child(odd) { - background-color: var(--nutui-table-tr-odd-bg-color, #ffffff); +.nut-table-sticky-left, +.nut-table-sticky-right { + position: absolute; + top: 0; + width: 8rpx; + bottom: -1rpx; + overflow-x: hidden; + overflow-y: hidden; + box-shadow: none; + -ms-touch-action: none; + touch-action: none; + pointer-events: none; + z-index: 3; + background: transparent; } -.nut-table-main-striped .nut-table-main-body-tr:nth-child(2n) { - background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f2f3f5)); -} -.nut-table-main-head, -.nut-table-main-body { - background: inherit; -} -.nut-table-main-head-tr, -.nut-table-main-body-tr { - display: table-row; - background: inherit; -} -.nut-table-main-head-tr:last-child .nut-table-main-body-tr-td, -.nut-table-main-body-tr:last-child .nut-table-main-body-tr-td { - border-bottom: none; -} -.nut-table-main-head-tr-th, -.nut-table-main-body-tr-th { - display: table-cell; - padding: var(--nutui-table-cols-padding, 10rpx); - table-layout: fixed; - background: inherit; - position: sticky; - top: 0; -} -.nut-table-main-head-tr-th.nut-table-fixed-left, -.nut-table-main-head-tr-th.nut-table-fixed-right, -.nut-table-main-body-tr-th.nut-table-fixed-left, -.nut-table-main-body-tr-th.nut-table-fixed-right { - z-index: 4; -} -.nut-table-main-head-tr-th:last-child, -.nut-table-main-body-tr-th:last-child { - border-right: none; -} -.nut-table-main-head-tr-td, -.nut-table-main-body-tr-td { - display: table-cell; - padding: var(--nutui-table-cols-padding, 10rpx); - table-layout: fixed; - background: inherit; -} -.nut-table-main-head-tr-td:last-child, -.nut-table-main-body-tr-td:last-child { - border-right: none; -} -.nut-table-main-head-tr-td-nodata, -.nut-table-main-body-tr-td-nodata { - display: -ms-flexbox; - display: flex; - height: 50rpx; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; -} -.nut-table-main-head-tr-border, -.nut-table-main-body-tr-border { - border-right: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - border-bottom: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); -} -.nut-table-main-head-tr-alignleft, -.nut-table-main-head-tr-align, -.nut-table-main-body-tr-alignleft, -.nut-table-main-body-tr-align { - text-align: left; -} -.nut-table-main-head-tr-aligncenter, -.nut-table-main-body-tr-aligncenter { - text-align: center; -} -.nut-table-main-head-tr-alignright, -.nut-table-main-body-tr-alignright { - text-align: right; -} -.nut-table-main-head { - display: table-header-group; -} -.nut-table-main-body { - display: table-row-group; -} -.nut-table-sticky-left, -.nut-table-sticky-right { - position: absolute; - top: 0; - width: 8rpx; - bottom: -1rpx; - overflow-x: hidden; - overflow-y: hidden; - box-shadow: none; - -ms-touch-action: none; - touch-action: none; - pointer-events: none; - z-index: 3; - background: transparent; -} -.nut-table-sticky-left { - left: 1rpx; - box-shadow: var(--nutui-table-sticky-left-shadow, 4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); -} -.nut-table-sticky-right { - right: 1rpx; - box-shadow: var(--nutui-table-sticky-right-shadow, -4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); -} -.nut-table-fixed-left, -.nut-table-fixed-right { - position: sticky; - z-index: 2; -} -.nut-table-fixed-left.h5-div, -.nut-table-fixed-right.h5-div { - padding: var(--nutui-table-cols-padding, 10rpx) 0; -} -.nut-table-fixed-left-last { - border-right: none; -} -.nut-table-summary { - color: var(--nutui-color-title, #1a1a1a); - background-color: var(--nutui-color-background-overlay, #ffffff); - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - height: 30rpx; - padding: var(--nutui-table-cols-padding, 10rpx); - position: relative; - z-index: 5; -} -[dir='rtl'] .nut-table-main-head-tr-th:last-child, -[dir='rtl'] .nut-table-main-body-tr-th:last-child, -.nut-rtl .nut-table-main-head-tr-th:last-child, -.nut-rtl .nut-table-main-body-tr-th:last-child { - border-right: none; - border-left: none; -} -[dir='rtl'] .nut-table-main-head-tr-td:last-child, -[dir='rtl'] .nut-table-main-body-tr-td:last-child, -.nut-rtl .nut-table-main-head-tr-td:last-child, -.nut-rtl .nut-table-main-body-tr-td:last-child { - border-right: none; - border-left: none; -} -[dir='rtl'] .nut-table-main-head-tr-border, -[dir='rtl'] .nut-table-main-body-tr-border, -.nut-rtl .nut-table-main-head-tr-border, -.nut-rtl .nut-table-main-body-tr-border { - border-right: none; - border-left: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); -} -[dir='rtl'] .nut-table-main-head-tr-alignleft, -[dir='rtl'] .nut-table-main-head-tr-align, -[dir='rtl'] .nut-table-main-body-tr-alignleft, -[dir='rtl'] .nut-table-main-body-tr-align, -.nut-rtl .nut-table-main-head-tr-alignleft, -.nut-rtl .nut-table-main-head-tr-align, -.nut-rtl .nut-table-main-body-tr-alignleft, -.nut-rtl .nut-table-main-body-tr-align { - text-align: right; -} -[dir='rtl'] .nut-table-main-head-tr-alignright, -[dir='rtl'] .nut-table-main-body-tr-alignright, -.nut-rtl .nut-table-main-head-tr-alignright, -.nut-rtl .nut-table-main-body-tr-alignright { - text-align: left; -} -[dir='rtl'] .nut-table-sticky-left, -.nut-rtl .nut-table-sticky-left { - left: auto; - right: 1rpx; - box-shadow: var(--nutui-table-sticky-right-shadow, -4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); -} -[dir='rtl'] .nut-table-sticky-right, -.nut-rtl .nut-table-sticky-right { - right: auto; - left: 1rpx; - box-shadow: var(--nutui-table-sticky-left-shadow, 4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); -} -[dir='rtl'] .nut-table-fixed-left-last, -.nut-rtl .nut-table-fixed-left-last { - border-right: none; - border-left: none; +.nut-table-summary { + color: var(--nutui-color-title, #1a1a1a); + background-color: var(--nutui-color-background-overlay, #ffffff); + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + height: 30rpx; + padding: var(--nutui-table-cols-padding, 10rpx); + position: relative; + z-index: 5; } .nut-tabbar-item { display: -ms-flexbox; @@ -2400,63 +1560,16 @@ wx-button { color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a)); height: 100%; } -.nut-tabbar-item .nut-icon { - width: 24rpx; - height: 24rpx; - font-size: 24rpx; - color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a)); - color: inherit; -} -.nut-tabbar-item-text { - display: block; - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10rpx)); - line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10rpx)); - margin-top: var(--nutui-tabbar-text-margin-top, 4rpx); -} -.nut-tabbar-item .nut-image-default { - width: 38rpx; - height: 38rpx; - border-radius: 38rpx; -} .nut-tabbar-item-large { -ms-flex-pack: center; justify-content: center; padding: 0; } -.nut-tabbar-item-large .nut-tabbar-item-text { - font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 15rpx)); - margin-top: 0; - line-height: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 15rpx)); - font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400)); -} -.nut-tabbar-item-active { - color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-tabbar-item-active .nut-tabbar-item-text, -.nut-tabbar-item-active .nut-icon { - color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23)); - color: inherit; -} -.nut-tabbar { - border: 0rpx; - box-shadow: var(--nutui-tabbar-box-shadow, none); - border-bottom: var(--nutui-tabbar-border-bottom, 0); - border-top: var(--nutui-tabbar-border-top, 0); - width: 100%; - background: var(--nutui-color-background-overlay, #ffffff); -} .nut-tabbar-wrap { height: var(--nutui-tabbar-height, 46rpx); display: -ms-flexbox; display: flex; } -.nut-tabbar-wrap-3 { - padding: 0 16rpx; -} -.nut-tabbar-wrap-2 { - padding: 0 32rpx; -} .nut-tabbar-wrap-horizontal { -ms-flex-align: center; align-items: center; @@ -2467,32 +1580,6 @@ wx-button { -ms-flex-pack: center; justify-content: center; } -.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-icon { - width: 20rpx; - height: 20rpx; -} -.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-tabbar-item-text { - margin: 0 4rpx 0 6rpx; - font-size: 14rpx; -} -.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-badge-sup::after { - border: 0; -} -.nut-tabbar-fixed { - position: fixed; - bottom: 0; - left: 0; -} -[dir='rtl'] .nut-tabbar:last-child, -.nut-rtl .nut-tabbar:last-child { - border-right: none; - border-left: 0; -} -[dir='rtl'] .nut-tabbar-fixed, -.nut-rtl .nut-tabbar-fixed { - left: auto; - right: 0; -} .nut-switch { cursor: pointer; position: relative; @@ -2535,30 +1622,6 @@ wx-button { transition: left 0.3s linear; box-shadow: var(--nutui-switch-inside-box-shadow, 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1)); } -.nut-switch-button-open { - left: calc(100% - var(--nutui-switch-height, 28rpx) + var(--nutui-switch-border-width, 2rpx)); -} -.nut-switch-button-open-rtl, -.nut-switch-button-close { - left: var(--nutui-switch-border-width, 2rpx); -} -.nut-switch-button-close-rtl { - left: calc(100% - var(--nutui-switch-height, 28rpx) + var(--nutui-switch-border-width, 2rpx)); -} -.nut-switch-button .nut-icon { - width: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); - height: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); - color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe)); -} -.nut-switch-close { - background-color: var(--nutui-switch-inactive-background-color, var(--nutui-color-text-disabled, #c2c4cc)); -} -.nut-switch-close-line { - width: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); - height: 2rpx; - background: var(--nutui-switch-inactive-line-background-color, #ffffff); - border-radius: 2rpx; -} .nut-switch-label { display: -ms-flexbox; display: flex; @@ -2571,38 +1634,6 @@ wx-button { color: var(--nutui-switch-label-text-color, #ffffff); font-size: var(--nutui-switch-label-font-size, var(--nutui-font-size-s, 12rpx)); } -.nut-switch-label .nut-icon { - color: var(--nutui-switch-label-text-color, #ffffff); -} -.nut-switch-label-open { - margin: 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx) 0 7rpx; -} -.nut-switch-label-open-rtl, -.nut-switch-label-close { - margin: 0 7rpx 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx); -} -.nut-switch-label-close-rtl { - margin: 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx) 0 7rpx; -} -.nut-switch-label-close-disabled, -.nut-switch-label-close-disabled .nut-icon { - color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc)); -} -.nut-switch-disabled { - background-color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe)); -} -.nut-switch-disabled-close { - background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-color-background, #f2f3f5)); -} -.nut-swiper-item { - height: 100%; -} -.nut-swiper { - width: 100%; - height: 100%; - overflow: hidden; - position: relative; -} .nut-swiper-canmove-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; @@ -2653,20 +1684,6 @@ wx-button { -ms-flex-negative: 0; flex-shrink: 0; } -.nut-swiper-item { - width: 100%; - height: 100%; -} -[dir='rtl'] .nut-swiper-indicator, -.nut-rtl .nut-swiper-indicator { - left: auto; - right: 50%; -} -[dir='rtl'] .nut-swiper-indicator-vertical, -.nut-rtl .nut-swiper-indicator-vertical { - left: auto; - right: 12rpx; -} .nut-swipe { display: -ms-flexbox; display: flex; @@ -2690,11 +1707,6 @@ wx-button { transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); transition-property: transform; } -.nut-swipe-left, -.nut-swipe-right { - position: absolute; - top: 0; -} .nut-swipe-left { left: 0; -ms-transform: translate(-100%); @@ -2705,9 +1717,6 @@ wx-button { -ms-transform: translate(100%); transform: translate(100%); } -.nut-sticky-fixed { - position: fixed; -} .nut-steps { display: -ms-flexbox; display: flex; @@ -2716,65 +1725,11 @@ wx-button { -ms-flex-flow: row; flex-flow: row; } -.nut-steps-horizontal .nut-step-head { - background-color: var(--nutui-steps-background-color, #ffffff); -} -.nut-steps-horizontal .nut-step-head-icon .nut-icon { - height: 10rpx; - width: 10rpx; -} -.nut-steps-horizontal .nut-step-head-icon .nut-image { - width: 100%; - height: 100%; - background-color: var(--nutui-steps-background-color, #ffffff); -} -.nut-steps-horizontal .nut-step-head-icon .nut-image .h5-img { - vertical-align: top; -} -.nut-steps-horizontal .nut-step.nut-step-process .nut-step-title { - color: var(--nutui-steps-process-title-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-steps-horizontal .nut-step.nut-step-process .nut-step-description { - color: var(--nutui-steps-process-description-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-steps-horizontal .nut-step.nut-step-wait .nut-step-title { - color: var(--nutui-steps-wait-title-color, var(--nutui-color-title, #1a1a1a)); -} -.nut-steps-horizontal .nut-step.nut-step-wait .nut-step-description { - color: var(--nutui-steps-wait-description-color, var(--nutui-color-text, #505259)); -} -.nut-steps-horizontal-single .nut-step { - padding-right: var(--nutui-steps-horizontal-item-padding-right, 28rpx); -} -.nut-steps-horizontal-single .nut-step-last { - padding-right: 0 !important; -} -.nut-steps-horizontal-single .nut-step-line { - top: 0; - right: 0; - height: var(--nutui-steps-base-head-height, 14rpx); - width: var(--nutui-steps-horizontal-item-padding-right, 28rpx); - padding: var(--nutui-steps-horizontal-item-line-padding, 0 8rpx); - box-sizing: border-box; -} -.nut-steps-horizontal-single .nut-step-title, -.nut-steps-horizontal-single .nut-step-description { - padding-left: 4rpx; -} -.nut-steps-horizontal-single .nut-step-special { - padding-right: var(--nutui-steps-horizontal-item-special-padding-right, 22rpx); -} -.nut-steps-horizontal-single .nut-step-special .nut-step-line { - width: 100%; -} .nut-steps-horizontal-single .nut-step-special .nut-step-title { padding-right: 8rpx; width: -moz-fit-content; width: fit-content; } -.nut-steps-horizontal-single.nut-steps-horizontal-count-3 .nut-step-special { - padding-right: var(--nutui-steps-horizontal-item-special-3-padding-right, 9rpx); -} .nut-steps-horizontal-double { width: 100%; -ms-flex-pack: justify; @@ -2788,12 +1743,6 @@ wx-button { -ms-flex: 1; flex: 1; } -.nut-steps-horizontal-double .nut-step-line { - top: 0; - right: -50%; - height: var(--nutui-steps-base-head-height, 14rpx); - width: 100%; -} .nut-steps-horizontal-double .nut-step-line-inner { display: -ms-flexbox; display: flex; @@ -2808,38 +1757,12 @@ wx-button { justify-content: center; margin-bottom: 6rpx; } -.nut-steps-horizontal-double .nut-step-head-dot-wrap, -.nut-steps-horizontal-double .nut-step-head-icon-wrap, -.nut-steps-horizontal-double .nut-step-head-text-wrap { - background-color: var(--nutui-steps-background-color, #ffffff); - padding: var(--nutui-steps-horizontal-item-line-padding, 0 8rpx); -} -.nut-steps-horizontal-double .nut-step-head-icon { - height: var(--nutui-steps-base-head-icon-size-right, 20rpx); - width: var(--nutui-steps-base-head-icon-size-right, 20rpx); -} -.nut-steps-horizontal-double .nut-step-head-icon .nut-icon { - height: 12rpx; - width: 12rpx; -} .nut-steps-horizontal-double .nut-step-main { -ms-flex-align: center; align-items: center; margin-left: 0; margin-top: 2rpx; } -.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-head, -.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-line { - height: var(--nutui-steps-base-head-icon-size-right, 20rpx); -} -.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-head, -.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-line { - height: var(--nutui-steps-base-head-dot-size, 6rpx); -} -.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-head, -.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-line { - height: var(--nutui-steps-base-head-text-size, 12rpx); -} .nut-steps-vertical { -ms-flex: 1; flex: 1; @@ -2847,20 +1770,6 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-steps-vertical .nut-step { - padding-bottom: var(--nutui-steps-vertical-item-padding-bottom, 13rpx); -} -.nut-steps-vertical .nut-step-last { - padding-bottom: 0 !important; -} -.nut-steps-vertical .nut-step-line { - height: calc(100% - 4rpx); - width: 1rpx; - bottom: 0; -} -.nut-steps-vertical .nut-step-line-inner { - height: 100%; -} .nut-steps-vertical .nut-step-head { -ms-flex-align: center; align-items: center; @@ -2868,14 +1777,6 @@ wx-button { justify-content: center; height: 18rpx; } -.nut-steps-vertical .nut-step-head-icon { - width: var(--nutui-steps-vertical-item-icon-size, 20rpx); - height: var(--nutui-steps-vertical-item-icon-size, 20rpx); -} -.nut-steps-vertical .nut-step-head-icon .nut-icon { - height: 12rpx; - width: 12rpx; -} .nut-steps-vertical .nut-step-main { -ms-flex: 1; flex: 1; @@ -2894,14 +1795,6 @@ wx-button { font-weight: 500; margin-bottom: var(--nutui-steps-vertical-title-margin-bottom, 4rpx); } -.nut-steps-vertical .nut-step-description { - margin: var(--nutui-steps-vertical-description-margin, 0 0 1rpx); - height: auto; - line-height: var(--nutui-steps-vertical-line-height, 18rpx); - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-steps-vertical-description-font-size, var(--nutui-font-size-base, 14rpx)); - box-sizing: border-box; -} .nut-steps-vertical .nut-step-head-dot-wrap, .nut-steps-vertical .nut-step-head-icon-wrap, .nut-steps-vertical .nut-step-head-text-wrap { @@ -2916,63 +1809,11 @@ wx-button { position: relative; z-index: 1; } -.nut-steps-vertical .nut-step-head-dot-wrap { - height: calc(var(--nutui-steps-base-head-dot-size, 6rpx) + 8rpx); -} -.nut-steps-vertical .nut-step-head-icon-wrap { - height: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 8rpx); -} -.nut-steps-vertical .nut-step-head-text-wrap { - height: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 8rpx); -} -.nut-steps-vertical-icon .nut-step-head { - width: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 1rpx); - min-width: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 1rpx); -} -.nut-steps-vertical-icon .nut-step-line { - left: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) / 2); -} -.nut-steps-vertical-dot .nut-step-head { - width: calc(var(--nutui-steps-base-head-dot-size, 6rpx) + 1rpx); -} -.nut-steps-vertical-dot .nut-step-line { - left: calc(var(--nutui-steps-base-head-dot-size, 6rpx) / 2); -} -.nut-steps-vertical-text .nut-step-head { - width: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 1rpx); - min-width: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 1rpx); -} -.nut-steps-vertical-text .nut-step-line { - left: calc(var(--nutui-steps-base-head-text-size, 12rpx) / 2); -} -.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon, -.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text, -.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon, -.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text { - background-color: var(--nutui-steps-enhanced-finish-head-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); -} -.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon .nut-icon, -.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text .nut-icon, -.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon .nut-icon, -.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text .nut-icon { - color: var(--nutui-steps-enhanced-finish-head-icon-color, var(--nutui-color-primary-stop-1, #ff475d)); -} -.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text, -.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text { - color: var(--nutui-steps-enhanced-finish-head-text-color, var(--nutui-color-primary-stop-1, #ff475d)); -} -.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-dot, -.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-dot { - background-color: var(--nutui-steps-enhanced-finish-head-dot-background-color, var(--nutui-color-primary-disabled-special, #ffadbe)); -} .nut-step { position: relative; display: -ms-flexbox; display: flex; } -.nut-step-last .nut-step-line { - display: none; -} .nut-step-head { display: -ms-flexbox; display: flex; @@ -2982,28 +1823,8 @@ wx-button { position: relative; z-index: 1; } -.nut-step-head-text { - height: var(--nutui-steps-base-head-text-size, 12rpx); - width: var(--nutui-steps-base-head-text-size, 12rpx); - background-color: var(--nutui-steps-base-head-background-color, var(--nutui-color-background, #f2f3f5)); - color: var(--nutui-steps-base-head-color, var(--nutui-color-text, #505259)); - font-size: var(--nutui-steps-base-icon-size, var(--nutui-font-size-xxs, 10rpx)); -} -.nut-step-head-icon { - height: var(--nutui-steps-base-head-icon-size, 16rpx); - width: var(--nutui-steps-base-head-icon-size, 16rpx); - background-color: var(--nutui-steps-base-head-background-color, var(--nutui-color-background, #f2f3f5)); -} -.nut-step-head-icon .nut-icon { - color: #fff; -} -.nut-step-head-dot { - height: var(--nutui-steps-base-head-dot-size, 6rpx); - width: var(--nutui-steps-base-head-dot-size, 6rpx); - background-color: var(--nutui-steps-base-head-dot-background-color, var(--nutui-color-text-disabled, #c2c4cc)); -} -.nut-step-head-dot, -.nut-step-head-icon, +.nut-step-head-dot, +.nut-step-head-icon, .nut-step-head-text { display: -ms-flexbox; display: flex; @@ -3043,10 +1864,6 @@ wx-button { justify-content: center; min-height: var(--nutui-steps-base-head-height, 14rpx); } -.nut-step-line, -.nut-step-title { - background-color: #fff; -} .nut-step-title { position: relative; z-index: 1; @@ -3057,47 +1874,6 @@ wx-button { overflow: hidden; white-space: nowrap; } -.nut-step-description { - height: 16rpx; - line-height: 16rpx; - margin-top: var(--nutui-steps-base-title-margin-bottom, 2rpx); - font-size: var(--nutui-steps-base-description-font-size, var(--nutui-font-size-xxs, 10rpx)); - color: var(--nutui-steps-base-description-color, var(--nutui-color-text-help, #888b94)); - overflow: hidden; -} -.nut-step.nut-step-process .nut-step-head-icon, -.nut-step.nut-step-process .nut-step-head-text, -.nut-step.nut-step-process .nut-step-head-dot { - background-color: var(--nutui-steps-process-head-background-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-step.nut-step-process .nut-step-head-text { - color: var(--nutui-steps-process-color, #ffffff); -} -.nut-step.nut-step-wait .nut-step-head-icon .nut-icon { - color: var(--nutui-steps-wait-icon-color, var(--nutui-color-text-help, #888b94)); -} -.nut-step.nut-step-finish .nut-step-head-icon .nut-icon { - color: var(--nutui-steps-finish-icon-color, var(--nutui-color-text-help, #888b94)); -} -.nut-step.nut-step-business .nut-step-head-text { - color: var(--nutui-steps-business-head-text-color, var(--nutui-color-service-pressed)); -} -.nut-step.nut-step-business .nut-step-title { - color: var(--nutui-steps-business-title-color, var(--nutui-color-service-pressed)); -} -.nut-step.nut-step-business .nut-step-description { - color: var(--nutui-steps-business-description-color, var(--nutui-color-service-pressed)); -} -.nut-step.nut-step-business .nut-step-head-dot { - background-color: var(--nutui-steps-business-head-dot-background-color, var(--nutui-color-service-pressed)); -} -.nut-step.nut-step-business .nut-step-head-icon, -.nut-step.nut-step-business .nut-step-head-text { - background-color: var(--nutui-steps-business-head-background-color, var(--nutui-color-service)); -} -.nut-step.nut-step-business .nut-step-head-icon .nut-icon { - color: var(--nutui-steps-business-head-icon-color, var(--nutui-color-service-pressed)); -} .nut-space { display: -ms-flexbox; display: flex; @@ -3110,30 +1886,15 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-space-vertical-item { - margin-bottom: var(--nutui-space-gap, 8rpx); -} -.nut-space-vertical-item-last { - margin-bottom: 0; -} .nut-space-horizontal { -ms-flex-direction: row; flex-direction: row; } -.nut-space-horizontal-item { - margin-right: var(--nutui-space-gap, 8rpx); -} -.nut-space-horizontal-item-last { - margin-right: 0; -} .nut-space-horizontal-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: calc(var(--nutui-space-gap, 8rpx) * -1); } -.nut-space-horizontal-wrap-item { - padding-bottom: var(--nutui-space-gap, 8rpx); -} .nut-space-align-center { -ms-flex-align: center; align-items: center; @@ -3178,20 +1939,6 @@ wx-button { -ms-flex-pack: stretch; justify-content: stretch; } -[dir='rtl'] .nut-space-horizontal > .nut-space-item, -.nut-rtl .nut-space-horizontal > .nut-space-item { - margin-right: 0; - margin-left: var(--nutui-space-gap, 8rpx); -} -[dir='rtl'] .nut-space-horizontal > .nut-space-item:last-child, -.nut-rtl .nut-space-horizontal > .nut-space-item:last-child { - margin-right: 0; - margin-left: 0; -} -.nut-skeleton { - line-height: 0rpx; - font-size: 0rpx; -} .nut-skeleton-content { position: relative; display: -ms-flexbox; @@ -3203,19 +1950,6 @@ wx-button { border-radius: var(--nutui-skeleton-line-border-radius, var(--nutui-radius-xs, 4rpx)); overflow: hidden; } -.nut-skeleton-content-normal { - height: var(--nutui-skeleton-line-normal-height, 24rpx); -} -.nut-skeleton-content-large { - height: var(--nutui-skeleton-line-large-height, 32rpx); -} -.nut-skeleton-content-small { - height: var(--nutui-skeleton-line-small-height, 16rpx); - margin-top: 8rpx; -} -.nut-skeleton-content-small-0 { - margin-top: 0; -} .nut-skeleton-animation { position: absolute; top: 0; @@ -3235,35 +1969,6 @@ wx-button { animation-iteration-count: 1; animation-timing-function: linear; } -@keyframes nut-skeleton { - 0% { - transform: translate(-100%); - } - to { - transform: translate(100%); - } -} -[dir='rtl'] .nut-skeleton-animation, -.nut-rtl .nut-skeleton-animation { - left: auto; - right: 0; - animation: nut-skeleton-rtl 2s linear 0s infinite; -} -@keyframes nut-skeleton-rtl { - 0% { - transform: translate(100%); - } - to { - transform: translate(-100%); - } -} -.nut-signature .spcanvas_WEAPP { - width: 100%; - height: 100%; -} -.nut-signature .spcanvas_WEAPP Canvas { - width: 100%; -} .nut-signature-inner { display: -ms-flexbox; display: flex; @@ -3275,9 +1980,6 @@ wx-button { border: var(--nutui-signature-border-width, 1rpx) solid var(--nutui-signature-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); background-color: var(--nutui-signature-background-color, var(--nutui-color-background-overlay, #ffffff)); } -.nut-signature-unsupport { - font-size: var(--nutui-signature-font-size, var(--nutui-font-size-base, 14rpx)); -} .nut-sidebaritem { width: 100%; height: 100%; @@ -3290,10 +1992,6 @@ wx-button { box-sizing: border-box; overflow: auto; } -.nut-sidebaritem.inactive { - overflow: visible; - height: 0; -} .nut-sidebar { display: -ms-flexbox; display: flex; @@ -3319,11 +2017,6 @@ wx-button { -ms-flex-negative: 0; flex-shrink: 0; } -.nut-sidebar-titles::-webkit-scrollbar { - display: none; - width: 0; - background: transparent; -} .nut-sidebar-titles .nut-sidebar-list { width: 100%; display: -ms-flexbox; @@ -3333,10 +2026,6 @@ wx-button { -ms-flex-negative: 0; flex-shrink: 0; } -.nut-sidebar-titles-scrollable { - overflow-x: hidden; - overflow-y: auto; -} .nut-sidebar-titles-item { cursor: pointer; display: -ms-flexbox; @@ -3349,26 +2038,6 @@ wx-button { font-size: var(--nutui-sidebar-inactive-font-size, var(--nutui-font-size-base, 14rpx)); color: var(--nutui-color-text, #505259); } -.nut-sidebar-titles-item-text { - text-align: center; - white-space: normal; - width: var(--nutui-sidebar-width, 104rpx); -} -.nut-sidebar-titles-item-active .nut-sidebar-titles-item-text { - font-family: PingFangSC-Semibold; - color: var(--nutui-sidebar-active-color, var(--nutui-color-primary, #ff0f23)); - font-weight: var(--nutui-sidebar-active-font-weight, var(--nutui-font-weight-bold, 600)); - font-size: var(--nutui-sidebar-active-font-size, var(--nutui-font-size-l, 15rpx)); -} -.nut-sidebar-titles-item-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); - cursor: not-allowed; -} -.nut-shortpassword-popup { - padding: 32rpx 24rpx 28rpx; - border-radius: 12rpx; - text-align: center; -} .nut-shortpassword-title { display: -ms-flexbox; display: flex; @@ -3389,27 +2058,6 @@ wx-button { font-size: var(--nutui-font-size-s, 12rpx); color: var(--nutui-color-text, #505259); } -.nut-shortpassword-input { - padding: 0 0 10rpx; - text-align: center; - position: relative; - overflow: hidden; -} -.nut-shortpassword-input-real { - position: absolute; - right: 0; - width: 247rpx; - height: 41rpx; - outline: 0 none; - border: 0; - text-decoration: none; - z-index: -99; -} -.nut-shortpassword-input-site { - width: 247rpx; - height: 41rpx; - border-radius: 4rpx; -} .nut-shortpassword-input-fake { top: 5%; width: 100%; @@ -3434,13 +2082,6 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-shortpassword-input-fake-li-icon { - height: 6rpx; - width: 6rpx; - border-radius: 50%; - background: #000; - display: inline-block; -} .nut-shortpassword-message { margin-top: 9rpx; display: -ms-flexbox; @@ -3449,11 +2090,6 @@ wx-button { justify-content: space-between; width: 247rpx; } -.nut-shortpassword-message-error { - line-height: 1; - font-size: var(--nutui-font-size-xs, 11rpx); - color: var(--nutui-shortpassword-error, var(--nutui-color-primary, #ff0f23)); -} .nut-shortpassword-message-forget { line-height: 1; font-size: var(--nutui-font-size-s, 12rpx); @@ -3463,9 +2099,6 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-shortpassword-message-forget .nut-icon { - margin-right: 3rpx; -} .nut-shortpassword-footer { display: -ms-flexbox; display: flex; @@ -3473,15 +2106,6 @@ wx-button { justify-content: space-between; margin-top: 20rpx; } -.nut-shortpassword-footer-cancel { - background: #fff; - border: 1rpx solid var(--nutui-color-primary, #ff0f23); - border-radius: 15rpx; - padding: 8rpx 38rpx; - line-height: 1; - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-color-primary, #ff0f23); -} .nut-shortpassword-footer-sure { background: -webkit-linear-gradient(315deg, var(--nutui-color-primary, #ff0f23) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); background: linear-gradient(135deg, var(--nutui-color-primary, #ff0f23) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); @@ -3491,16 +2115,6 @@ wx-button { font-size: var(--nutui-font-size-base, 14rpx); color: #fff; } -[dir='rtl'] .nut-shortpassword-input-real, -.nut-rtl .nut-shortpassword-input-real { - right: auto; - left: 0; -} -[dir='rtl'] .nut-shortpassword-input-fake, -.nut-rtl .nut-shortpassword-input-fake { - left: auto; - right: 0; -} [dir='rtl'] .nut-shortpassword-footer-sure, .nut-rtl .nut-shortpassword-footer-sure { background: -webkit-linear-gradient(225deg, var(--nutui-color-primary, #ff0f23) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); @@ -3535,19 +2149,6 @@ wx-button { line-height: 1; box-sizing: border-box; } -.nut-segmented-item-active { - background: var(--nutui-segmented-active-background, var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4))); -} -.nut-segmented-icon { - height: 10rpx; - width: 10rpx; - margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs, 2rpx)); -} -.nut-segmented-icon .nut-icon { - height: 10rpx; - width: 10rpx; - font-size: 10rpx; -} .nut-searchbar { display: -ms-flexbox; display: flex; @@ -3562,11 +2163,6 @@ wx-button { -ms-flex-pack: center; justify-content: center; } -.nut-searchbar .nut-icon { - width: var(--nutui-searchbar-icon-size, 20rpx); - height: var(--nutui-searchbar-icon-size, 20rpx); - font-size: var(--nutui-searchbar-icon-size, 20rpx); -} .nut-searchbar-content { position: relative; -ms-flex: 1; @@ -3592,17 +2188,6 @@ wx-button { align-items: center; color: var(--nutui-color-primary, #ff0f23); } -.nut-searchbar-leftin { - margin-right: var(--nutui-searchbar-inner-gap, 8rpx); -} -.nut-searchbar-rightin { - font-size: 15rpx; - font-weight: 500; - color: var(--nutui-color-primary, #ff0f23); -} -.nut-searchbar-rightin.nut-searchbar-icon { - color: var(--nutui-black-5); -} .nut-searchbar-input-box, .nut-searchbar-input { display: -ms-flexbox; @@ -3612,35 +2197,6 @@ wx-button { -ms-flex: 1; flex: 1; } -.nut-searchbar-input { - border: 0; - outline: 0; - box-sizing: border-box; - width: 100%; - padding: 0; - margin: 0; - font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a)); - caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-primary, #ff0f23)); - background: transparent; - text-align: var(--nutui-searchbar-input-text-align, left); -} -.nut-searchbar-clear.nut-searchbar-icon { - position: relative; -} -.nut-searchbar-clear.nut-searchbar-icon .nut-icon { - width: 12rpx; - height: 12rpx; - color: var(--nutui-black-5); - margin-right: var(--nutui-searchbar-inner-gap, 8rpx); -} -.nut-searchbar-clear.nut-searchbar-icon::after { - content: ''; - position: absolute; - width: 100%; - height: 200%; - left: -20%; -} .nut-searchbar-values { position: absolute; display: -ms-flexbox; @@ -3666,13 +2222,6 @@ wx-button { border-radius: 4rpx; margin-right: 2rpx; } -.nut-searchbar-values .nut-icon { - width: 6rpx; - height: 6rpx; - font-size: 6rpx; - color: #c2c4cc; - margin-left: 4rpx; -} .nut-searchbar-left, .nut-searchbar-right { display: -ms-flexbox; @@ -3682,87 +2231,9 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-searchbar-left.nut-icon, -.nut-searchbar-right.nut-icon { - width: 20rpx; - height: 20rpx; -} -.nut-searchbar-left { - margin-right: var(--nutui-searchbar-gap, 12rpx); -} -.nut-searchbar-left > .h5-div, -.nut-searchbar-left > .h5-span, -.nut-searchbar-left > .h5-i, -.nut-searchbar-left > .h5-svg, -.nut-searchbar-left .nut-icon { - margin-right: var(--nutui-searchbar-gap, 12rpx); -} -.nut-searchbar-left > .h5-div:last-child, -.nut-searchbar-left > .h5-span:last-child, -.nut-searchbar-left > .h5-i:last-child, -.nut-searchbar-left > .h5-svg:last-child, -.nut-searchbar-left .nut-icon:last-child { - margin-right: 0; -} -.nut-searchbar-right { - margin-left: var(--nutui-searchbar-gap, 12rpx); -} -.nut-searchbar-right > .h5-div, -.nut-searchbar-right > .h5-span, -.nut-searchbar-right > .h5-i, -.nut-searchbar-right > .h5-svg, -.nut-searchbar-right .nut-icon { - margin-left: var(--nutui-searchbar-gap, 12rpx); -} -.nut-searchbar-right > .h5-div:first-child, -.nut-searchbar-right > .h5-span:first-child, -.nut-searchbar-right > .h5-i:first-child, -.nut-searchbar-right > .h5-svg:first-child, -.nut-searchbar-right .nut-icon:first-child { - margin-left: 0; -} -.nut-searchbar-left > text, -.nut-searchbar-left > view { - margin-right: var(--nutui-searchbar-gap, 12rpx); -} -.nut-searchbar-left > text:last-child, -.nut-searchbar-left > view:last-child { - margin-right: 0; -} -.nut-searchbar-right > text, -.nut-searchbar-right > view { - margin-left: var(--nutui-searchbar-gap, 12rpx); -} -.nut-searchbar-right > text:first-child, -.nut-searchbar-right > view:first-child { - margin-left: 0; -} -.nut-searchbar-round { - border-radius: var(--nutui-searchbar-content-round-border-radius, 19rpx); -} -.nut-searchbar-disabled { - cursor: not-allowed; -} -.nut-searchbar-focus { - padding: 5rpx var(--nutui-searchbar-gap, 12rpx); -} .nut-searchbar-focus .nut-searchbar-content { border: 0.5rpx solid #ff5c67; } -[dir='rtl'] .nut-searchbar-left, -.nut-rtl .nut-searchbar-left { - margin-right: 0; - margin-left: var(--nutui-searchbar-gap, 12rpx); -} -[dir='rtl'] .nut-searchbar-left > .h5-div, -[dir='rtl'] .nut-searchbar-left > .h5-span, -[dir='rtl'] .nut-searchbar-left > .h5-svg, -.nut-rtl .nut-searchbar-left > .h5-div, -.nut-rtl .nut-searchbar-left > .h5-span, -.nut-rtl .nut-searchbar-left > .h5-svg { - margin-right: 0; - margin-left: var(--nutui-searchbar-gap, 12rpx); -} [dir='rtl'] .nut-searchbar-left > .h5-div.nut-icon, [dir='rtl'] .nut-searchbar-left > .h5-span.nut-icon, [dir='rtl'] .nut-searchbar-left > .h5-svg.nut-icon, @@ -3772,83 +2243,11 @@ wx-button { -ms-transform: rotate(180deg); transform: rotate(180deg); } -[dir='rtl'] .nut-searchbar-left > .h5-div:last-child, -[dir='rtl'] .nut-searchbar-left > .h5-span:last-child, -[dir='rtl'] .nut-searchbar-left > .h5-svg:last-child, -.nut-rtl .nut-searchbar-left > .h5-div:last-child, -.nut-rtl .nut-searchbar-left > .h5-span:last-child, -.nut-rtl .nut-searchbar-left > .h5-svg:last-child { - margin-right: 0; - margin-left: 0; -} -[dir='rtl'] .nut-searchbar-right, -.nut-rtl .nut-searchbar-right { - margin-left: 0; - margin-right: var(--nutui-searchbar-gap, 12rpx); -} -[dir='rtl'] .nut-searchbar-right > .h5-div, -[dir='rtl'] .nut-searchbar-right > .h5-span, -[dir='rtl'] .nut-searchbar-right > .h5-svg, -.nut-rtl .nut-searchbar-right > .h5-div, -.nut-rtl .nut-searchbar-right > .h5-span, -.nut-rtl .nut-searchbar-right > .h5-svg { - margin-left: 0; - margin-right: var(--nutui-searchbar-gap, 12rpx); -} -[dir='rtl'] .nut-searchbar-right > .h5-div:first-child, -[dir='rtl'] .nut-searchbar-right > .h5-span:first-child, -[dir='rtl'] .nut-searchbar-right > .h5-svg:first-child, -.nut-rtl .nut-searchbar-right > .h5-div:first-child, -.nut-rtl .nut-searchbar-right > .h5-span:first-child, -.nut-rtl .nut-searchbar-right > .h5-svg:first-child { - margin-left: 0; - margin-right: 0; -} -[dir='rtl'] .nut-searchbar-left > text, -[dir='rtl'] .nut-searchbar-left > view, -.nut-rtl .nut-searchbar-left > text, -.nut-rtl .nut-searchbar-left > view { - margin-right: 0; - margin-left: var(--nutui-searchbar-gap, 12rpx); -} -[dir='rtl'] .nut-searchbar-left > text:last-child, -[dir='rtl'] .nut-searchbar-left > view:last-child, -.nut-rtl .nut-searchbar-left > text:last-child, -.nut-rtl .nut-searchbar-left > view:last-child { - margin-right: 0; - margin-left: 0; -} -[dir='rtl'] .nut-searchbar-right > text, -[dir='rtl'] .nut-searchbar-right > view, -.nut-rtl .nut-searchbar-right > text, -.nut-rtl .nut-searchbar-right > view { - margin-left: 0; - margin-right: var(--nutui-searchbar-gap, 12rpx); -} -[dir='rtl'] .nut-searchbar-right > text:first-child, -[dir='rtl'] .nut-searchbar-right > view:first-child, -.nut-rtl .nut-searchbar-right > text:first-child, -.nut-rtl .nut-searchbar-right > view:first-child { - margin-left: 0; - margin-right: 0; -} -[dir='rtl'] .nut-searchbar-input, -.nut-rtl .nut-searchbar-input { - text-align: var(--nutui-searchbar-input-text-align, right); -} .nut-safe-area { display: -ms-flexbox; display: flex; width: 100%; } -.nut-safe-area-position-top { - padding-top: calc(constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)); - padding-top: calc(env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)); -} -.nut-safe-area-position-bottom { - padding-bottom: calc(constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)); - padding-bottom: calc(env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)); -} .nut-resultpage { width: 100%; display: -ms-flexbox; @@ -3866,29 +2265,6 @@ wx-button { display: inline-flex; margin-bottom: var(--nutui-resultpage-icon-margin-bottom, 12rpx); } -.nut-resultpage-icon .nut-icon { - height: var(--nutui-resultpage-icon-size, 36rpx); - width: var(--nutui-resultpage-icon-size, 36rpx); -} -.nut-resultpage-title { - width: var(--nutui-resultpage-width, 240rpx); - margin-bottom: var(--nutui-resultpage-title-margin-bottom, 12rpx); - font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, 18rpx)); - color: var(--nutui-resultpage-title-color, var(--nutui-color-title, #1a1a1a)); - font-weight: var(--nutui-font-weight-bold, 600); - text-align: center; -} -.nut-resultpage-description { - width: var(--nutui-resultpage-width, 240rpx); - line-height: var(--nutui-resultpage-description-line-height, 20rpx); - font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-resultpage-description-color, var(--nutui-color-text, #505259)); - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - word-break: break-all; -} .nut-resultpage-actions { display: -ms-flexbox; display: flex; @@ -3896,13 +2272,6 @@ wx-button { flex-direction: row; margin-top: var(--nutui-resultpage-actions-margin-top, 16rpx); } -.nut-resultpage-actions .nut-button-children { - white-space: nowrap; -} -.nut-resultpage-action { - margin-left: 6rpx; - margin-right: 6rpx; -} .nut-row { display: -ms-flexbox; display: flex; @@ -3911,20 +2280,10 @@ wx-button { width: 100%; overflow: hidden; } -.nut-row::after { - display: block; - height: 0; - clear: both; - visibility: hidden; - content: ''; -} .nut-row-flex { display: -ms-flexbox; display: flex; } -.nut-row-flex::after { - display: none; -} .nut-row-justify-center { -ms-flex-pack: center; justify-content: center; @@ -3980,9 +2339,6 @@ wx-button { -ms-flex-pack: justify; justify-content: space-between; } -.nut-range-container-native { - height: auto; -} .nut-range { display: block; position: relative; @@ -3994,14 +2350,6 @@ wx-button { flex: 1; cursor: pointer; } -.nut-range::before { - position: absolute; - top: -8rpx; - bottom: -8rpx; - left: 0; - right: 0; - content: ''; -} .nut-range-min, .nut-range-max { font-size: var(--nutui-font-size-s, 12rpx); @@ -4010,19 +2358,6 @@ wx-button { -ms-user-select: none; user-select: none; } -.nut-range-bar { - display: block; - position: relative; - width: 100%; - height: 100%; - max-width: 100%; - max-height: 100%; - background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23)); - border-radius: 2rpx; -} -.nut-range-bar-animate { - transition: all 0.2s; -} .nut-range-button { position: absolute; display: -ms-flexbox; @@ -4040,12 +2375,6 @@ wx-button { left: 50%; } .nut-range-button-wrapper, -.nut-range-button-wrapper-right, -.nut-range-button-wrapper-left { - width: var(--nutui-range-button-width, 24rpx); - height: var(--nutui-range-button-height, 24rpx); -} -.nut-range-button-wrapper, .nut-range-button-wrapper-right { -ms-touch-action: none; touch-action: none; @@ -4086,22 +2415,6 @@ wx-button { vertical-align: center; box-sizing: border-box; } -.nut-range-disabled { - cursor: not-allowed; - opacity: 0.54; -} -.nut-range-disabled .nut-range-button-wrapper, -.nut-range-disabled .nut-range-button-wrapper-left, -.nut-range-disabled .nut-range-button-wrapper-right { - cursor: not-allowed; -} -.nut-range-mark { - position: absolute; - width: 100%; - height: 14rpx; - overflow: visible; - top: 50%; -} .nut-range-mark-text-wrapper { position: absolute; height: 100%; @@ -4121,61 +2434,12 @@ wx-button { -ms-user-select: none; user-select: none; } -.nut-range-tick { - position: absolute; - top: -20rpx; - width: 11rpx; - height: 11rpx; - left: 0; - border-radius: 6rpx; - background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1)); -} -.nut-range-tick-active { - background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23)); -} .nut-range-vertical-container { height: 100%; -ms-flex-direction: column; flex-direction: column; padding: 0 15rpx; } -.nut-range-vertical { - width: var(--nutui-range-height, 4rpx); - margin: var(--nutui-range-margin, 15rpx) 0rpx; -} -.nut-range-vertical-button-wrapper, -.nut-range-vertical-button-wrapper-right { - position: absolute; - top: auto; - top: initial; - right: auto; - right: initial; - top: 100%; - left: 50%; -} -.nut-range-vertical-button-wrapper-left { - top: 0; - left: 50%; - right: auto; - right: initial; -} -.nut-range-vertical-button-number { - left: 0; - top: 50%; -} -.nut-range-vertical-mark { - position: absolute; - width: 36rpx; - height: 100%; - top: 0; - right: 50%; - overflow: visible; - font-size: 12rpx; - padding: 0; -} -.nut-range-vertical-mark-hm { - left: -34rpx; -} .nut-range-vertical-mark-text-wrapper { height: 16rpx; position: absolute; @@ -4186,68 +2450,11 @@ wx-button { -ms-transform: translateY(-11rpx); transform: translateY(-11rpx); } -.nut-range-vertical-mark-text { - height: 100%; - line-height: 16rpx; - color: #999; - text-align: center; - word-break: keep-all; -} -.nut-range-vertical-tick { - position: absolute; - top: 2rpx; - left: 31rpx; - width: 10rpx; - height: 10rpx; - border-radius: 5rpx; - background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1)); -} -.nut-range-vertical-tick-active { - background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23)); -} -[dir='rtl'] .nut-range-button-wrapper, -[dir='rtl'] .nut-range-button-wrapper-right, -.rtl-nut-range-button-wrapper, -.rtl-nut-range-button-wrapper-right { - left: 0; - right: auto; - right: initial; -} -[dir='rtl'] .nut-range-button-wrapper-left, -.rtl-nut-range-button-wrapper-left, -[dir='rtl'] .nut-range-tick, -.rtl-nut-range-tick { - right: 0; - left: auto; - left: initial; -} [dir='rtl'] .nut-range-mark-text, .rtl-nut-range-mark-text { -ms-transform: translate(10rpx); transform: translate(10rpx); } -[dir='rtl'] .nut-range-vertical-button-wrapper, -[dir='rtl'] .nut-range-vertical-button-wrapper-right, -.rtl-nut-range-vertical-button-wrapper, -.rtl-nut-range-vertical-button-wrapper-right, -[dir='rtl'] .nut-range-vertical-button-wrapper-left, -.rtl-nut-range-vertical-button-wrapper-left { - right: 50%; - left: auto; - left: initial; -} -[dir='rtl'] .nut-range-vertical-mark, -.rtl-nut-range-vertical-mark { - right: auto; - left: 50%; -} -[dir='rtl'] .nut-range-vertical-tick, -.rtl-nut-range-vertical-tick { - left: auto; - right: 30rpx; - margin-left: 0; - margin-right: 0; -} [dir='rtl'] .nut-range-vertical-mark-text-wrapper, .rtl-nut-range-vertical-mark-text-wrapper { -ms-transform: translateY(-11rpx); @@ -4259,12 +2466,6 @@ wx-button { -ms-touch-action: pan-x; touch-action: pan-x; } -.nut-rate.disabled .nut-rate-item-icon { - cursor: not-allowed; -} -.nut-rate.readonly .nut-rate-item-icon { - cursor: default; -} .nut-rate-item { display: -ms-flexbox; display: flex; @@ -4274,44 +2475,10 @@ wx-button { flex-shrink: 0; position: relative; } -.nut-rate-item-half { - position: absolute; - height: 100%; - width: 50% !important; - left: 0; - top: 0; - overflow: hidden; -} .nut-rate-item-half .nut-icon { -ms-flex-negative: 0; flex-shrink: 0; } -.nut-rate-item-normal { - margin-left: var(--nutui-rate-item-margin, 4rpx); -} -.nut-rate-item-normal .nut-icon { - height: var(--nutui-rate-icon-size, 12rpx); - width: var(--nutui-rate-icon-size, 12rpx); -} -.nut-rate-item-large { - margin-left: calc(var(--nutui-rate-item-margin, 4rpx) * 2); -} -.nut-rate-item-large .nut-icon { - height: calc(var(--nutui-rate-icon-size, 12rpx) + 8rpx); - width: calc(var(--nutui-rate-icon-size, 12rpx) + 8rpx); -} -.nut-rate-item-small { - margin-left: calc(var(--nutui-rate-item-margin, 4rpx) / 2); -} -.nut-rate-item-small .nut-icon { - height: calc(var(--nutui-rate-icon-size, 12rpx) - 4rpx); - width: calc(var(--nutui-rate-icon-size, 12rpx) - 4rpx); -} -.nut-rate-item-normal:first-child, -.nut-rate-item-large:first-child, -.nut-rate-item-small:first-child { - margin-left: 0; -} .nut-rate-item-icon { display: -ms-flexbox; display: flex; @@ -4319,18 +2486,6 @@ wx-button { align-items: center; cursor: pointer; } -.nut-rate-item-icon .nut-icon { - color: var(--nutui-rate-icon-color, var(--nutui-color-primary-icon, #ff3333)); -} -.nut-rate-item-icon-disabled .nut-icon { - color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0)); -} -.nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half { - position: absolute; - left: 0; - top: 0; - overflow: hidden; -} .nut-rate-item-icon.nut-rate-item-icon::before { position: relative; top: auto; @@ -4349,121 +2504,15 @@ wx-button { font-family: JDZH-Regular; line-height: 1; } -.nut-rate-score-normal { - padding-left: var(--nutui-rate-item-margin, 4rpx); - font-size: var(--nutui-rate-font-size, 12rpx); -} -.nut-rate-score-large { - font-size: calc(var(--nutui-rate-font-size, 12rpx) + 6rpx); - padding-left: calc(var(--nutui-rate-item-margin, 4rpx) * 2); -} -.nut-rate-score-small { - font-size: calc(var(--nutui-rate-font-size, 12rpx) - 2rpx); - padding-left: calc(var(--nutui-rate-item-margin, 4rpx) / 2); -} -.nut-rate-score-disabled { - color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0)); -} -[dir='rtl'] .nut-rate-item, -.nut-rtl .nut-rate-item { - margin-left: 0; -} -[dir='rtl'] .nut-rate-item:first-child, -.nut-rtl .nut-rate-item:first-child { - margin-right: 0; -} -[dir='rtl'] .nut-rate-item-normal, -.nut-rtl .nut-rate-item-normal { - margin-right: var(--nutui-rate-item-margin, 4rpx); -} -[dir='rtl'] .nut-rate-item-large, -.nut-rtl .nut-rate-item-large { - margin-right: calc(var(--nutui-rate-item-margin, 4rpx) * 2); -} -[dir='rtl'] .nut-rate-item-small, -.nut-rtl .nut-rate-item-small { - margin-right: calc(var(--nutui-rate-item-margin, 4rpx) - 2rpx); -} -[dir='rtl'] .nut-rate-item:last-child, -.nut-rtl .nut-rate-item:last-child { - margin-left: 0; -} -[dir='rtl'] .nut-rate-item-half, -.nut-rtl .nut-rate-item-half, -[dir='rtl'] .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half, -.nut-rtl .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half { - left: auto; - right: 0; -} -[dir='rtl'] .nut-rate-item-icon.nut-rate-item-icon::before, -.nut-rtl .nut-rate-item-icon.nut-rate-item-icon::before { - left: auto; - right: auto; -} -[dir='rtl'] .nut-rate-score, -.nut-rtl .nut-rate-score { - padding-left: 0; -} -[dir='rtl'] .nut-rate-score-large, -.nut-rtl .nut-rate-score-large { - padding-right: calc(var(--nutui-rate-item-margin, 4rpx) * 2); -} -[dir='rtl'] .nut-rate-score-normal, -.nut-rtl .nut-rate-score-normal { - padding-right: var(--nutui-rate-item-margin, 4rpx); -} -[dir='rtl'] .nut-rate-score-small, -.nut-rtl .nut-rate-score-small { - padding-right: calc(var(--nutui-rate-item-margin, 4rpx) - 2rpx); -} -.nut-radiogroup .nut-radio { - margin: 0 var(--nutui-radiogroup-radio-margin, 20rpx) var(--nutui-radiogroup-radio-margin-bottom, 5rpx) 0; -} -.nut-radiogroup .nut-radio-label { - margin: var(--nutui-radiogroup-radio-label-margin, 0 5rpx); -} -.nut-radiogroup .nut-radio-button { - background-color: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); -} -.nut-radiogroup .nut-radio:last-child { - margin: 0; -} .nut-radiogroup-vertical .nut-radio.nut-radio-reverse { width: 100%; -ms-flex-pack: justify; justify-content: space-between; } -.nut-radiogroup-vertical .nut-radio-button { - border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); -} -.nut-radiogroup-vertical .nut-radio-button-active { - border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); -} .nut-radiogroup-horizontal { display: -ms-flexbox; display: flex; } -.nut-radiogroup-horizontal .nut-radio-button { - border: 1rpx solid #ffffff; -} -.nut-radiogroup-horizontal .nut-radio-button-active { - border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); -} -.nut-radiogroup-horizontal .nut-radio:last-child { - margin: 0 var(--nutui-radiogroup-radio-margin, 20rpx) var(--nutui-radiogroup-radio-margin-bottom, 5rpx) 0; -} -.nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled { - background: var(--nutui-color-text-disabled, #c2c4cc); - color: #fff; - border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); -} -[dir='rtl'] .nut-radiogroup .nut-radio, -.nut-rtl .nut-radiogroup .nut-radio { - margin-left: var(--nutui-radiogroup-radio-margin, 20rpx); - margin-right: 0; -} .nut-radio { display: -ms-flexbox; display: flex; @@ -4476,41 +2525,6 @@ wx-button { -ms-flex-direction: row-reverse; flex-direction: row-reverse; } -.nut-radio.nut-radio-reverse .nut-radio-label { - margin-right: var(--nutui-radio-label-margin-left, 4rpx); - margin-left: 0; -} -.nut-radio-label { - margin-left: var(--nutui-radio-label-margin-left, 4rpx); - font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-s, 12rpx)); - color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a)); -} -.nut-radio-label-disabled { - color: var(--nutui-radio-label-disable-color, var(--nutui-color-text-disabled, #c2c4cc)); -} -.nut-radio-icon { - color: var(--nutui-color-text-disabled, #c2c4cc); - background-color: #fff; - transition-duration: 0.3s; - transition-property: color, border-color, background-color; - font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-icon, 16rpx)); - border-radius: 50%; -} -.nut-radio-icon-checked { - color: var(--nutui-color-primary, #ff0f23); - background-color: #fff; - box-shadow: 0 2rpx 4rpx rgba(255, 15, 35, 0.2); - border-radius: 50%; -} -.nut-radio-icon-checked.nut-radio-icon-disabled { - color: var(--nutui-color-primary-disabled-special, #ffadbe); - background-color: #fff; - box-shadow: none; - border-radius: 50%; -} -.nut-radio-icon-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); -} .nut-radio-button { display: -ms-flexbox; display: flex; @@ -4527,40 +2541,6 @@ wx-button { box-sizing: border-box; border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); } -.nut-radio-button-active { - background: var(--nutui-color-primary-light-pressed, #ffebf1); - color: var(--nutui-color-primary, #ff0f23); - border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); -} -.nut-radio-button-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); - border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); -} -.nut-radio .nut-radio-button-active.nut-radio-button-disabled { - background: var(--nutui-color-text-disabled, #c2c4cc); - color: #fff; - border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); -} -[dir='rtl'] .nut-radio:last-child, -.nut-rtl .nut-radio:last-child { - margin-right: 0 !important; - margin-left: 0 !important; -} -[dir='rtl'] .nut-radio.nut-radio-reverse .nut-radio-label, -.nut-rtl .nut-radio.nut-radio-reverse .nut-radio-label { - margin-left: var(--nutui-radio-label-margin-left, 4rpx); - margin-right: 0; -} -[dir='rtl'] .nut-radio-label, -.nut-rtl .nut-radio-label { - margin-left: 0; - margin-right: var(--nutui-radio-label-margin-left, 4rpx); -} -.nut-pulltorefresh-head { - overflow: hidden; - position: relative; - font-size: 12rpx; -} .nut-pulltorefresh-head-content { position: absolute; bottom: 0; @@ -4576,26 +2556,6 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-pulltorefresh-head-content-icons { - width: var(--nutui-pulltorefresh-icon-width, 36rpx); - height: var(--nutui-pulltorefresh-icon-height, 26rpx); - margin-bottom: 4rpx; -} -.nut-pulltorefresh-primary { - background: var(--nutui-pulltorefresh-color-primary, var(--nutui-color-primary, #ff0f23)); -} -.nut-pulltorefresh-primary-content, -.nut-pulltorefresh-primary-head-content { - color: var(--nutui-color-text-dark, rgba(255, 255, 255, 0.9)); -} -.nut-pulltorefresh-primary-status-text { - color: #fff; -} -[dir='rtl'] .nut-pulltorefresh-head-content, -.nut-rtl .nut-pulltorefresh-head-content { - left: auto; - right: 0; -} .nut-progress { display: -ms-flexbox; display: flex; @@ -4644,20 +2604,6 @@ wx-button { font-family: PingFang SC; font-size: var(--nutui-progress-text-font-size, 13rpx); } -@keyframes progressActive { - 0% { - background: rgba(255, 255, 255, 0.10196); - width: 0; - } - 20% { - background: rgba(255, 255, 255, 0.50196); - width: 0; - } - to { - background: rgba(255, 255, 255, 0); - width: 100%; - } -} [dir='rtl'] .nut-progress-text, .nut-rtl .nut-progress-text { -ms-transform: translate(50%); @@ -4673,82 +2619,6 @@ wx-button { -ms-flex-align: baseline; align-items: baseline; } -.nut-price-symbol, -.nut-price-integer, -.nut-price-decimal { - color: var(--nutui-price-color, var(--nutui-color-text-help)); - font-family: JDZH-Bold; - line-height: 1; -} -.nut-price-darkgray .nut-price-symbol, -.nut-price-darkgray .nut-price-integer, -.nut-price-darkgray .nut-price-decimal { - font-family: JDZH-Bold; - color: var(--nutui-price-darkgray-color, var(--nutui-gray-7)); -} -.nut-price-primary .nut-price-symbol, -.nut-price-primary .nut-price-integer, -.nut-price-primary .nut-price-decimal { - font-family: JDZH-Bold; - color: var(--nutui-price-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-price-symbol { - padding-right: var(--nutui-price-symbol-padding-right, 0rpx); -} -.nut-price-symbol-xlarge { - font-size: var(--nutui-price-symbol-xlarge-size, 12rpx); -} -.nut-price-symbol-large { - font-size: var(--nutui-price-symbol-large-size, 12rpx); -} -.nut-price-symbol-normal { - font-size: var(--nutui-price-symbol-normal-size, 12rpx); -} -.nut-price-symbol-small { - font-size: var(--nutui-price-symbol-small-size, 12rpx); -} -.nut-price-symbol-rtl { - padding-right: 0; - padding-left: var(--nutui-price-symbol-padding-right, 0rpx); -} -.nut-price-integer-xlarge { - font-size: var(--nutui-price-integer-xlarge-size, 24rpx); - line-height: var(--nutui-price-integer-xlarge-size, 24rpx); -} -.nut-price-integer-large { - font-size: var(--nutui-price-integer-large-size, 18rpx); - line-height: var(--nutui-price-integer-large-size, 18rpx); -} -.nut-price-integer-normal { - font-size: var(--nutui-price-integer-normal-size, 16rpx); - line-height: var(--nutui-price-integer-normal-size, 16rpx); -} -.nut-price-integer-small { - font-size: var(--nutui-price-integer-small-size, 12rpx); -} -.nut-price-decimal-xlarge { - font-size: var(--nutui-price-decimal-xlarge-size, 12rpx); -} -.nut-price-decimal-large { - font-size: var(--nutui-price-decimal-large-size, 12rpx); -} -.nut-price-decimal-normal { - font-size: var(--nutui-price-decimal-normal-size, 12rpx); -} -.nut-price-decimal-small { - font-size: var(--nutui-price-decimal-small-size, 12rpx); -} -.nut-price-line { - text-decoration: line-through var(--nutui-price-line-color, var(--nutui-color-text-help)); -} -.nut-popup { - position: fixed; - min-height: 26%; - max-height: 100%; - background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff)); - -webkit-overflow-scrolling: touch; - font-size: var(--nutui-font-size-base, 14rpx); -} .nut-popup-title { display: -ms-flexbox; display: flex; @@ -4772,47 +2642,6 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-popup-title-title { - color: var(--nutui-color-title, #1a1a1a); - font-weight: var(--nutui-font-weight-bold, 600); - font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); - line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); -} -.nut-popup-title-description { - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14rpx)); - font-weight: var(--nutui-font-weight, 400); -} -.nut-popup-title-description-gap { - margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base, 8rpx)); -} -.nut-popup-title-left { - position: absolute; - top: var(--nutui-popup-title-padding, 16rpx); - left: var(--nutui-popup-title-padding, 16rpx); -} -.nut-popup-title-right { - position: absolute; - top: var(--nutui-popup-title-padding, 16rpx); - right: var(--nutui-popup-title-padding, 16rpx); - z-index: 1; - width: var(--nutui-popup-icon-size, 20rpx); - height: var(--nutui-popup-icon-size, 20rpx); - color: var(--nutui-color-title, #1a1a1a); - cursor: pointer; -} -.nut-popup-title-right-top-left { - top: var(--nutui-popup-title-padding, 16rpx); - left: var(--nutui-popup-title-padding, 16rpx); -} -.nut-popup-title-right-bottom-left { - bottom: var(--nutui-popup-title-padding, 16rpx); - left: var(--nutui-popup-title-padding, 16rpx); -} -.nut-popup-title-right-bottom-right { - right: var(--nutui-popup-title-padding, 16rpx); - bottom: var(--nutui-popup-title-padding, 16rpx); -} .nut-popup-center { top: 50%; left: 50%; @@ -4821,237 +2650,21 @@ wx-button { -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } -.nut-popup-center.nut-popup-round { - border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); +.nut-popup-slide-bottom-enter-active, +.nut-popup-slide-bottom-appear-active { + -ms-transform: translate(0); + transform: translate(0); + animation-fill-mode: both; + animation-name: popup-slide-bottom-enter; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-popup-bottom { - bottom: 0; - left: 0; - width: 100%; -} -.nut-popup-bottom.nut-popup-round { - border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0 0; -} -.nut-popup-bottom-top { - position: absolute; -} -.nut-popup-right { - top: 0; - right: 0; - width: 100rpx; - height: 100%; -} -.nut-popup-right.nut-popup-round { - border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); -} -.nut-popup-left { - top: 0; - left: 0; - width: 100rpx; - height: 100%; -} -.nut-popup-left.nut-popup-round { - border-radius: 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0; -} -.nut-popup-top { - top: 0; - left: 0; - width: 100%; -} -.nut-popup-top.nut-popup-round { - border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); -} -@keyframes popup-scale-fade-in { - 0% { - opacity: 0; - transform: scale(0.8); - } - to { - opacity: 1; - transform: scale(1); - } -} -@keyframes popup-scale-fade-out { - 0% { - opacity: 1; - transform: scale(1); - } - to { - opacity: 0; - transform: scale(0.8); - } -} -.nut-popup-slide-none-enter-active { - animation-fill-mode: both; - animation-name: popup-scale-fade-in; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -.nut-popup-slide-none-exit-active { - animation-fill-mode: both; - animation-name: popup-scale-fade-out; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -@keyframes popup-fade-in { - 0% { - opacity: 0; - } - to { - opacity: 1; - } -} -@keyframes popup-fade-out { - 0% { - opacity: 1; - } - to { - opacity: 0; - } -} -.nut-popup-slide-center-enter-active { - animation-fill-mode: both; - animation-name: popup-fade-in; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -.nut-popup-slide-center-exit-active { - animation-fill-mode: both; - animation-name: popup-fade-out; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -@keyframes popup-slide-top-enter { - 0% { - transform: translate3d(0, -100%, 0); - } - to { - transform: translateZ(0); - } -} -@keyframes popup-slide-top-exit { - to { - transform: translate3d(0, -100%, 0); - } -} -.nut-popup-slide-top-enter-active, -.nut-popup-slide-top-appear-active { - transform: translateZ(0); - animation-fill-mode: both; - animation-name: popup-slide-top-enter; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -.nut-popup-slide-top-exit-active { - animation-fill-mode: both; - animation-name: popup-slide-top-exit; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -@keyframes popup-slide-right-enter { - 0% { - transform: translate3d(100%, 0, 0); - } - to { - transform: translateZ(0); - } -} -@keyframes popup-slide-right-exit { - to { - transform: translate3d(100%, 0, 0); - } -} -.nut-popup-slide-right-enter-active, -.nut-popup-slide-right-appear-active { - transform: translateZ(0); - animation-fill-mode: both; - animation-name: popup-slide-right-enter; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -.nut-popup-slide-right-exit { - animation-fill-mode: both; - animation-name: popup-slide-right-exit; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -@keyframes popup-slide-bottom-enter { - 0% { - transform: translate3d(0, 100%, 0); - } - to { - transform: translateZ(0); - } -} -@keyframes slide-bottom-exit { - to { - transform: translate3d(0, 100%, 0); - } -} -.nut-popup-slide-bottom-enter-active, -.nut-popup-slide-bottom-appear-active { - -ms-transform: translate(0); - transform: translate(0); - animation-fill-mode: both; - animation-name: popup-slide-bottom-enter; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -.nut-popup-slide-bottom-exit { - animation-fill-mode: both; - animation-name: slide-bottom-exit; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -@keyframes popup-slide-left-enter { - 0% { - transform: translate3d(-100%, 0, 0); - } - to { - transform: translateZ(0); - } -} -@keyframes popup-slide-left-exit { - to { - transform: translate3d(-100%, 0, 0); - } -} -.nut-popup-slide-left-enter-active, -.nut-popup-slide-left-appear-active { - -ms-transform: translate(0); - transform: translate(0); - animation-fill-mode: both; - animation-name: popup-slide-left-enter; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -.nut-popup-slide-left-exit-active, -.nut-popup-slide-left-exit-done { - animation-fill-mode: both; - animation-name: popup-slide-left-exit; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -.nut-popup-slide-none-exit-done.nut-popup, -.nut-popup-slide-center-exit-done.nut-popup, -.nut-popup-slide-left-exit-done.nut-popup, -.nut-popup-slide-right-exit-done.nut-popup, -.nut-popup-slide-top-exit-done.nut-popup, -.nut-popup-slide-bottom-exit-done.nut-popup { - display: none; -} -.nut-popup .nut-overflow-hidden { - overflow: hidden; -} -[dir='rtl'] .nut-popup-title-left, -.nut-rtl .nut-popup-title-left { - left: auto; - right: var(--nutui-popup-title-padding, 16rpx); -} -[dir='rtl'] .nut-popup-title-right, -.nut-rtl .nut-popup-title-right { - right: auto; - left: var(--nutui-popup-title-padding, 16rpx); -} -[dir='rtl'] .nut-popup-title-right-top-left, -.nut-rtl .nut-popup-title-right-top-left, -[dir='rtl'] .nut-popup-title-right-bottom-left, -.nut-rtl .nut-popup-title-right-bottom-left { - left: auto; - right: var(--nutui-popup-title-padding, 16rpx); -} -[dir='rtl'] .nut-popup-title-right-bottom-right, -.nut-rtl .nut-popup-title-right-bottom-right { - right: auto; - left: var(--nutui-popup-title-padding, 16rpx); +.nut-popup-slide-left-enter-active, +.nut-popup-slide-left-appear-active { + -ms-transform: translate(0); + transform: translate(0); + animation-fill-mode: both; + animation-name: popup-slide-left-enter; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } [dir='rtl'] .nut-popup-title .nut-icon-ArrowLeft, .nut-rtl .nut-popup-title .nut-icon-ArrowLeft { @@ -5065,33 +2678,6 @@ wx-button { -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } -[dir='rtl'] .nut-popup-bottom, -.nut-rtl .nut-popup-bottom, -[dir='rtl'] .nut-popup-top, -.nut-rtl .nut-popup-top { - left: auto; - right: 0; -} -.nut-popover { - position: absolute; - display: inline-block; - word-break: normal; -} -.nut-popover-arrow { - position: absolute; - width: 8rpx; - height: 4rpx; -} -.nut-popover-arrow .nut-icon-ArrowRadius { - position: absolute; - color: var(--nutui-popover-content-background-color, #ffffff); -} -.nut-popover-arrow-top { - bottom: -4rpx; -} -.nut-popover-arrow-bottom { - top: -4rpx; -} .nut-popover-arrow-left { right: -6rpx; -ms-transform-origin: center top; @@ -5137,21 +2723,6 @@ wx-button { -ms-transform: rotate(-90deg) translateY(0); transform: rotate(-90deg) translateY(0); } -.nut-popover .nut-popover-content { - position: absolute; - background: var(--nutui-popover-content-background-color, #ffffff); - border-radius: var(--nutui-popover-border-radius, var(--nutui-radius-xs, 4rpx)); - font-size: var(--nutui-popover-font-size, var(--nutui-font-size-s, 12rpx)); - color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); - line-height: 28rpx; - max-height: none; - max-height: initial; - overflow-y: visible; - overflow-y: initial; -} -.nut-popover .nut-popover-content-group { - padding: 0 var(--nutui-popover-padding, 8rpx); -} .nut-popover .nut-popover-content .nut-popover-item { display: -ms-flexbox; display: flex; @@ -5163,10 +2734,6 @@ wx-button { max-width: var(--nutui-popover-item-width, 160rpx); word-wrap: break-word; } -.nut-popover .nut-popover-content .nut-popover-item:last-child { - margin-bottom: 0; - border-bottom: none; -} .nut-popover .nut-popover-content .nut-popover-item-icon, .nut-popover .nut-popover-content .nut-popover-item-action-icon { display: -ms-flexbox; @@ -5179,29 +2746,12 @@ wx-button { height: var(--nutui-font-size-s, 12rpx); font-size: var(--nutui-font-size-s, 12rpx); } -.nut-popover .nut-popover-content .nut-popover-item-icon .nut-icon, -.nut-popover .nut-popover-content .nut-popover-item-action-icon .nut-icon { - width: var(--nutui-font-size-s, 12rpx); - height: var(--nutui-font-size-s, 12rpx); - font-size: var(--nutui-font-size-s, 12rpx); -} -.nut-popover .nut-popover-content .nut-popover-item-icon { - margin-right: var(--nutui-spacing-xxs, 4rpx); -} .nut-popover .nut-popover-content .nut-popover-item-name { width: calc(100% - 34rpx); word-break: keep-all; -ms-flex: 1; flex: 1; } -.nut-popover .nut-popover-content .nut-popover-item-action-icon { - color: var(--nutui-color-text, #505259); - margin-left: var(--nutui-spacing-base, 8rpx); -} -.nut-popover .nut-popover-content .nut-popover-item.nut-popover-item-disabled { - color: var(--nutui-popover-disable-color, var(--nutui-color-text-disabled, #c2c4cc)); - cursor: not-allowed; -} .nut-popover .nut-popover-content .nut-popover-item.nut-popover-taroitem { display: -ms-flexbox; display: flex; @@ -5213,18 +2763,12 @@ wx-button { -ms-transform: rotate(180deg) translate(-50%); transform: rotate(180deg) translate(-50%); } -.nut-popover .nut-popover-content-top-right { - right: 0; -} .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right { right: 16rpx; bottom: -3.5rpx; -ms-transform: rotate(180deg) translate(0); transform: rotate(180deg) translate(0); } -.nut-popover .nut-popover-content-top-left { - left: 0; -} .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left { left: 16rpx; bottom: -3.5rpx; @@ -5236,57 +2780,16 @@ wx-button { -ms-transform: translate(-50%); transform: translate(-50%); } -.nut-popover .nut-popover-content-bottom-right { - right: 0; -} .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right { right: 16rpx; -ms-transform: translate(0); transform: translate(0); } -.nut-popover .nut-popover-content-bottom-left { - left: 0; -} .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left { left: 16rpx; -ms-transform: translate(0); transform: translate(0); } -.nut-popover .nut-popover-content-left-bottom { - bottom: 0; -} -.nut-popover .nut-popover-content-left-top { - top: 0; -} -.nut-popover .nut-popover-content-right-bottom { - bottom: 0; -} -.nut-popover .nut-popover-content-right-top { - top: 0; -} -.nut-popover-dark { - background: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); - color: var(--nutui-popover-content-background-color, #ffffff); -} -.nut-popover-dark .nut-popover-arrow .nut-icon-ArrowRadius { - color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); -} -.nut-popover-dark .nut-popover-content { - background: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))) !important; - color: var(--nutui-popover-content-background-color, #ffffff) !important; -} -.nut-popover-dark .nut-popover-content .nut-popover-item-action-icon { - color: rgba(255, 255, 255, 0.8); -} -[dir='rtl'] .nut-popover .nut-popover-content .nut-popover-item-name, -.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-name { - margin-left: 0; - margin-right: 4rpx; -} -[dir='rtl'] .nut-popover .nut-popover-content .nut-popover-item-action-icon, -.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-action-icon { - right: auto; -} [dir='rtl'] .nut-popover .nut-popover-content-top .nut-popover-arrow-top, .nut-rtl .nut-popover .nut-popover-content-top .nut-popover-arrow-top { left: auto; @@ -5294,26 +2797,6 @@ wx-button { -ms-transform: translate(50%); transform: translate(50%); } -[dir='rtl'] .nut-popover .nut-popover-content-top-right, -.nut-rtl .nut-popover .nut-popover-content-top-right { - right: auto; - left: 0; -} -[dir='rtl'] .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right, -.nut-rtl .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right { - right: auto; - left: 16rpx; -} -[dir='rtl'] .nut-popover .nut-popover-content-top-left, -.nut-rtl .nut-popover .nut-popover-content-top-left { - left: auto; - right: 0; -} -[dir='rtl'] .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left, -.nut-rtl .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left { - left: auto; - right: 16rpx; -} [dir='rtl'] .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom, .nut-rtl .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom { left: auto; @@ -5321,59 +2804,12 @@ wx-button { -ms-transform: translate(50%); transform: translate(50%); } -[dir='rtl'] .nut-popover .nut-popover-content-bottom-right, -.nut-rtl .nut-popover .nut-popover-content-bottom-right { - right: auto; - left: 0; -} -[dir='rtl'] .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right, -.nut-rtl .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right { - right: auto; - left: 16rpx; -} -[dir='rtl'] .nut-popover .nut-popover-content-bottom-left, -.nut-rtl .nut-popover .nut-popover-content-bottom-left { - left: auto; - right: 0; -} -[dir='rtl'] .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left, -.nut-rtl .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left { - left: auto; - right: 16rpx; -} .nut-popover-enter-from, .nut-popover-leave-active { -ms-transform: scale(0.8); transform: scale(0.8); opacity: 0; } -.nut-popover-enter-active { - transition-timing-function: ease-out; -} -.nut-popover-leave-active { - transition-timing-function: ease-in; -} -.nut-popover-content-bg { - position: fixed; - height: 100%; - width: 100%; - top: 0; - left: 0; - background: transparent; - z-index: 999; -} -[dir='rtl'] .nut-popover-content-bg, -.nut-rtl .nut-popover-content-bg { - left: auto; - right: 0; -} -.nut-popover-wrapper { - display: inline-block; -} -.nut-popover-content-copy { - position: absolute; - top: -99999rpx; -} .nut-pickerview { position: relative; display: -ms-flexbox; @@ -5382,35 +2818,6 @@ wx-button { height: calc(var(--nutui-picker-item-height, 36rpx) * 7); overflow: hidden; } -.nut-pickerview-mask, -.nut-pickerview-indicator { - position: absolute; - left: 0; - right: 0; - z-index: 3; - pointer-events: none; -} -.nut-pickerview-mask { - top: 0; - bottom: 0; - background-image: var( - --picker-mask-background, - linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), - linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)) - ); - background-position: top, bottom; - background-size: 100% calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); - background-repeat: no-repeat; - transform: translateZ(0); -} -.nut-pickerview-indicator { - top: calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); - height: var(--nutui-picker-item-height, 36rpx); - border: var(--nutui-picker-item-active-line-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - border-left: 0; - border-right: 0; - box-sizing: border-box; -} .nut-pickerview-list { position: relative; -ms-flex: 1; @@ -5420,42 +2827,6 @@ wx-button { -ms-touch-action: none; touch-action: none; } -.nut-pickerview-roller { - position: absolute; - top: calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); - width: 100%; - height: var(--nutui-picker-item-height, 36rpx); - z-index: 1; - transform-style: preserve-3d; -} -.nut-pickerview-roller-placeholder { - height: var(--nutui-picker-item-height, 36rpx); -} -.nut-pickerview-roller-item { - position: absolute; - top: 0; - backface-visibility: hidden; - -moz-backface-visibility: hidden; -} -.nut-pickerview-roller-item-hidden { - visibility: hidden; - opacity: 0; -} -.nut-pickerview-roller-item, -.nut-pickerview-roller-item-tiled { - width: 100%; - height: var(--nutui-picker-item-height, 36rpx); - line-height: var(--nutui-picker-item-height, 36rpx); - color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14rpx)); - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.nut-picker { - width: 100%; -} .nut-picker-control { display: -ms-flexbox; display: flex; @@ -5468,14 +2839,6 @@ wx-button { box-sizing: border-box; font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); } -.nut-picker-cancel-btn { - color: var(--nutui-picker-title-cancel-color, var(--nutui-color-text, #505259)); - font-size: var(--nutui-picker-title-cancel-font-size, var(--nutui-font-size-base, 14rpx)); -} -.nut-picker-confirm-btn { - color: var(--nutui-picker-title-ok-color, var(--nutui-color-primary, #ff0f23)); - font-size: var(--nutui-picker-title-ok-font-size, var(--nutui-font-size-base, 14rpx)); -} .nut-picker-title { -ms-flex: 1; flex: 1; @@ -5520,43 +2883,12 @@ wx-button { border: var(--nutui-pagination-item-border-width, 1rpx) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); cursor: pointer; } -.nut-pagination-prev, -.nut-pagination-item { - border-right-width: 0; -} -.nut-pagination-prev, -.nut-pagination-next { - padding: var(--nutui-pagination-prev-next-padding, 0 12rpx); -} .nut-pagination-contain { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } -.nut-pagination-item-active { - color: #fff; - border-width: 0; - background-color: var(--nutui-color-primary, #ff0f23); -} -.nut-pagination-item-disabled, -.nut-pagination-next-disabled, -.nut-pagination-prev-disabled { - color: var(--nutui-pagination-disable-color, var(--nutui-color-text-disabled, #c2c4cc)); - background-color: var(--nutui-pagination-disable-background-color, #f7f8fa); - cursor: not-allowed; -} -.nut-pagination-simple { - height: 39rpx; - width: 124rpx; - line-height: 39rpx; - text-align: center; - font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-pagination-simple-border { - border-right: var(--nutui-pagination-item-border-width, 1rpx) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); -} .nut-pagination-lite { height: var(--nutui-pagination-lite-height, 20rpx); padding: 0 var(--nutui-spacing-xs, 6rpx); @@ -5570,12 +2902,6 @@ wx-button { background-color: var(--nutui-pagination-lite-background-color, rgba(0, 0, 0, 0.45)); border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, 4rpx)); } -.nut-pagination-lite-active, -.nut-pagination-lite-default, -.nut-pagination-lite-spliterator { - font-size: var(--nutui-font-size-xs, 11rpx); - color: var(--nutui-pagination-lite-color, #ffffff); -} .nut-overlay { position: fixed; top: 0; @@ -5586,47 +2912,6 @@ wx-button { height: 100%; background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); } -.nut-overflow-hidden { - overflow: hidden !important; -} -@keyframes nut-fade-in { - 0% { - opacity: 0; - } - 1% { - opacity: 0; - } - to { - opacity: 1; - } -} -@keyframes nut-fade-out { - 0% { - opacity: 1; - } - 1% { - opacity: 1; - } - to { - opacity: 0; - } -} -.nut-overlay-slide-enter-active, -.nut-overlay-slide-appear-active { - animation-fill-mode: both; - animation-name: nut-fade-in; - animation-duration: var(--nutui-overlay-animation-duration, 0.3s); -} -.nut-overlay-slide-exit-active { - animation-fill-mode: both; - animation-name: nut-fade-out; - animation-duration: var(--nutui-overlay-animation-duration, 0.3s); -} -[dir='rtl'] .nut-overlay, -.nut-rtl .nut-overlay { - left: auto; - right: 0; -} .nut-numberkeyboard { width: 100%; padding: var(--nutui-numberkeyboard-padding, 0 0 22rpx 0); @@ -5648,11 +2933,6 @@ wx-button { color: var(--nutui-color-title, #1a1a1a); font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); } -.nut-numberkeyboard-header-title { - color: var(--nutui-color-title, #1a1a1a); - display: inline-block; - font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); -} .nut-numberkeyboard-header-close { position: absolute; display: block; @@ -5708,9 +2988,6 @@ wx-button { font-weight: var(--nutui-font-weight-bold, 600); cursor: pointer; } -.nut-numberkeyboard-body-wrapper .key.active { - background-color: var(--nutui-numberkeyboard-key-active-background-color, #ebedf0); -} .nut-numberkeyboard-sidebar { display: -ms-flexbox; display: flex; @@ -5721,76 +2998,16 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper { - width: 100%; -} -.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key { - position: absolute; - top: 0; - right: 6rpx; - bottom: 6rpx; - left: 0; - height: auto; -} -.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm { - font-size: var(--nutui-numberkeyboard-key-confirm-font-size, var(--nutui-font-size-l, 15rpx)); - color: var(--nutui-numberkeyboard-key-confirm-color, #fff); - background-color: var(--nutui-numberkeyboard-key-confirm-background-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm.active { - background-color: rgba(255, 0, 0, 0.70196); -} -[dir='rtl'] .nut-popup .nut-numberkeyboard-header-close, -.nut-rtl .nut-popup .nut-numberkeyboard-header-close { - right: auto; - left: 0; -} -[dir='rtl'] .nut-popup .nut-numberkeyboard-body, -.nut-rtl .nut-popup .nut-numberkeyboard-body { - padding: 6rpx 6rpx 0 0; -} -[dir='rtl'] .nut-popup .nut-numberkeyboard-body-wrapper, -.nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper { - padding: 0 0 6rpx 6rpx; -} [dir='rtl'] .nut-popup .nut-numberkeyboard-body-wrapper .delete, .nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper .delete { -ms-transform: rotate(-180deg); transform: rotate(-180deg); } -[dir='rtl'] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key, -.nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key { - left: 6rpx; - right: 0; -} [dir='rtl'] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete, .nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete { -ms-transform: rotate(-180deg); transform: rotate(-180deg); } -.fade-enter { - opacity: 0; -} -.fade-enter-active { - opacity: 1; - transition: opacity 0.3s ease-in; -} -.fade-enter-done, -.fade-exit { - opacity: 1; -} -.fade-exit-active { - opacity: 0; - transition: opacity 0.3s ease-out; -} -.fade-exit-done, -.fade-appear { - opacity: 0; -} -.fade-appear-active { - opacity: 1; - transition: opacity 0.3s; -} .nut-notify { position: fixed; left: 8rpx; @@ -5817,12 +3034,6 @@ wx-button { white-space: nowrap; overflow: hidden; } -.nut-notify-ellipsis { - text-overflow: ellipsis; -} -.nut-notify-layout-left { - text-align: left; -} .nut-notify-left-icon, .nut-notify-right-icon { display: -ms-flexbox; @@ -5830,23 +3041,6 @@ wx-button { display: -ms-inline-flexbox; display: inline-flex; } -.nut-notify-left-icon { - margin-right: 6rpx; -} -.nut-notify-left-icon .nut-icon { - height: 16rpx; - width: 16rpx; -} -.nut-notify-right-icon { - margin-left: 6rpx; -} -.nut-notify-right-icon .nut-icon { - height: 12rpx; - width: 12rpx; -} -.nut-noticebar { - width: 100%; -} .nut-noticebar .nut-noticebar-box { position: relative; display: -ms-flexbox; @@ -5860,20 +3054,6 @@ wx-button { color: var(--nutui-noticebar-color, #d9500b); border-radius: var(--nutui-noticebar-border-radius, 0); } -.nut-noticebar .nut-noticebar-box-wrapable, -.nut-noticebar .nut-noticebar-box-center { - height: auto; - padding: var(--nutui-noticebar-wrapable-padding, 8rpx 16rpx); -} -.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap, -.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap { - height: auto; -} -.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content { - position: relative; - white-space: normal; - word-wrap: break-word; -} .nut-noticebar .nut-noticebar-box-center { -ms-flex-pack: center; justify-content: center; @@ -5882,11 +3062,6 @@ wx-button { -ms-flex: initial; flex: initial; } -.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content { - position: relative; - display: inline; - display: initial; -} .nut-noticebar .nut-noticebar-box-left-icon { display: -ms-flexbox; display: flex; @@ -5895,9 +3070,6 @@ wx-button { margin-right: var(--nutui-noticebar-icon-gap, 4rpx); background-size: 100% 100%; } -.nut-noticebar .nut-noticebar-box-left-icon .nut-icon { - color: var(--nutui-noticebar-color, #d9500b); -} .nut-noticebar .nut-noticebar-box-right-icon { display: -ms-flexbox; display: flex; @@ -5908,11 +3080,6 @@ wx-button { width: var(--nutui-noticebar-right-icon-width, 16rpx); margin-left: var(--nutui-noticebar-icon-gap, 4rpx); } -.nut-noticebar .nut-noticebar-box-right-icon .nut-icon { - width: 12rpx; - height: 12rpx; - color: var(--nutui-noticebar-color, #d9500b); -} .nut-noticebar .nut-noticebar-box-wrap { display: -ms-flexbox; display: flex; @@ -5925,26 +3092,6 @@ wx-button { overflow: hidden; position: relative; } -.nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content { - position: absolute; - white-space: nowrap; - color: var(--nutui-noticebar-color, #d9500b); -} -.nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content.nut-ellipsis { - max-width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.nut-noticebar .nut-noticebar-box .play { - animation: nut-notice-bar-play linear both running; -} -.nut-noticebar .nut-noticebar-box .play-infinite { - animation: nut-notice-bar-play-infinite linear infinite both running; -} -.nut-noticebar .nut-noticebar-box .play-vertical { - animation: nut-notice-bar-play-vertical linear infinite both running; -} .nut-noticebar .nut-noticebar-vertical { position: relative; display: -ms-flexbox; @@ -6001,54 +3148,6 @@ wx-button { width: var(--nutui-noticebar-right-icon-width, 16rpx); margin-left: var(--nutui-noticebar-icon-gap, 4rpx); } -@keyframes nut-notice-bar-play { - to { - transform: translate3d(-100%, 0, 0); - } -} -@keyframes nut-notice-bar-play-infinite { - to { - transform: translate3d(-100%, 0, 0); - } -} -@keyframes nut-notice-bar-play-vertical { - to { - transform: translateY(var(--nutui-noticebar-height, 36rpx)); - } -} -[dir='rtl'] .nut-noticebar .nut-noticebar-box-left-icon, -.nut-rtl .nut-noticebar .nut-noticebar-box-left-icon { - margin-right: 0; - margin-left: var(--nutui-noticebar-icon-gap, 4rpx); -} -[dir='rtl'] .nut-noticebar .nut-noticebar-box-right-icon, -.nut-rtl .nut-noticebar .nut-noticebar-box-right-icon { - margin-left: 0; - margin-right: var(--nutui-noticebar-icon-gap, 4rpx); -} -[dir='rtl'] .nut-noticebar .nut-noticebar-box .play, -.nut-rtl .nut-noticebar .nut-noticebar-box .play { - animation: nut-notice-bar-play-rtl linear both running; -} -[dir='rtl'] .nut-noticebar .nut-noticebar-box .play-infinite, -.nut-rtl .nut-noticebar .nut-noticebar-box .play-infinite { - animation: nut-notice-bar-play-infinite-rtl linear infinite both running; -} -@keyframes nut-notice-bar-play-rtl { - to { - transform: translate3d(100%, 0, 0); - } -} -@keyframes nut-notice-bar-play-infinite-rtl { - to { - transform: translate3d(100%, 0, 0); - } -} -[dir='rtl'] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon, -.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon { - margin-left: 0; - margin-right: var(--nutui-noticebar-icon-gap, 4rpx); -} .nut-navbar { width: var(--nutui-navbar-width, 100%); position: relative; @@ -6069,21 +3168,6 @@ wx-button { overflow: hidden; padding: 0 16rpx; } -.nut-navbar-fixed { - position: fixed; - top: 0; - left: 0; - right: 0; - width: 100%; -} -.nut-navbar-placeholder { - display: inline-block; - width: 100%; -} -.nut-navbar-safe-area-inset-top { - padding-top: constant(safe-area-inset-top); - padding-top: env(safe-area-inset-top); -} .nut-navbar-title-wrapper { -ms-flex-pack: justify; justify-content: space-between; @@ -6108,9 +3192,6 @@ wx-button { -ms-flex-pack: center; justify-content: center; } -.nut-navbar-title ::-webkit-scrollbar { - display: none; -} .nut-navbar-left, .nut-navbar-right { display: -ms-flexbox; @@ -6123,27 +3204,6 @@ wx-button { height: 100%; cursor: pointer; } -.nut-navbar-left .nut-icon, -.nut-navbar-left .nutui-iconfont, -.nut-navbar-right .nut-icon, -.nut-navbar-right .nutui-iconfont { - width: 20rpx; - height: 20rpx; - font-size: 20rpx; -} -.nut-navbar-left-maxwidth, -.nut-navbar-right-maxwidth { - box-sizing: border-box; - width: 108rpx; -} -.nut-navbar-left { - padding-right: 16rpx; - gap: 16rpx; -} -.nut-navbar-left-rtl { - padding-right: 0; - padding-left: 16rpx; -} .nut-navbar-left-back { display: -ms-flexbox; display: flex; @@ -6155,23 +3215,12 @@ wx-button { justify-content: center; gap: 16rpx; } -.nut-navbar-left-hidden { - padding-left: 0; - padding-right: 0; -} .nut-navbar-right { padding-left: 16rpx; -ms-flex-pack: end; justify-content: flex-end; gap: 16rpx; } -.nut-navbar-right-rtl { - padding-right: 16rpx; - padding-left: 0; -} -.nut-navbar-rtl .nut-icon-ArrowLeft { - transform: rotateY(180deg); -} .nut-menu-container-content { padding: var(--nutui-menu-content-padding, 12rpx 24rpx); max-height: var(--nutui-menu-content-max-height, 214rpx); @@ -6182,11 +3231,6 @@ wx-button { flex-wrap: wrap; background: var(--nutui-menu-content-background-color, var(--nutui-color-background-overlay, #ffffff)); } -.nut-menu-container-content_fixed { - width: 100%; - opacity: 0; - position: fixed; -} .nut-menu-container-item { display: -ms-flexbox; display: flex; @@ -6196,10 +3240,6 @@ wx-button { font-size: var(--nutui-font-size-base, 14rpx); padding: var(--nutui-menu-item-padding, 12rpx 0); } -.nut-menu-container-item.active { - font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600)); - color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23)); -} .nut-menu-container-item .nut-icon { display: -ms-flexbox; display: flex; @@ -6211,31 +3251,6 @@ wx-button { -ms-flex-negative: 0; flex-shrink: 0; } -.nut-menu-container-wrap, -.nut-menu-container-wrap-up { - position: absolute; - width: 100%; - z-index: var(--nutui-menu-container-z-index, 1000); - overflow: hidden; -} -.nut-menu-container-wrap-up { - bottom: var(--nutui-menu-bar-line-height, 48rpx); -} -.overlay-fade-enter-active.nut-menu-container-overlay { - top: auto; - z-index: var(--nutui-menu-container-z-index, 1000); -} -.nut-menu-placeholder-element { - position: fixed; - top: calc(-1 * var(--menu-bar-line-height)); - left: 0; - right: 0; - z-index: var(--nutui-menu-bar-opened-z-index, 1000); - background-color: transparent; -} -.nut-menu-placeholder-element.up { - bottom: calc(-1 * var(--menu-bar-line-height)); -} .nut-menu-container-down-enter { opacity: 0; -ms-transform: translateY(-30rpx); @@ -6247,14 +3262,6 @@ wx-button { transform: translate(0); transition: all 0.1s; } -.nut-menu-container-down-exit { - opacity: 1; - transition: all 0.1s; -} -.nut-menu-container-down-exit-done { - opacity: 0; - transition: all 0.1s; -} .nut-menu-container-up-enter { opacity: 0; -ms-transform: translateY(30rpx); @@ -6266,32 +3273,6 @@ wx-button { transform: translate(0); transition: all 0.1s; } -.nut-menu-container-up-exit { - opacity: 1; - transition: all 0.1s; -} -.nut-menu-container-up-exit-done { - opacity: 0; - transition: all 0.1s; -} -[dir='rtl'] .nut-menu-container-item .nut-icon, -.nut-rtl .nut-menu-container-item .nut-icon { - margin-right: 0; - margin-left: var(--nutui-menu-item-icon-margin, 8rpx); -} -[dir='rtl'] .nut-menu-container .nut-icon, -.nut-rtl .nut-menu-container .nut-icon { - transform: rotateY(180deg); -} -.nut-menu { - position: relative; -} -.nut-menu.scroll-fixed { - position: fixed; - top: var(--nutui-menu-scroll-fixed-top, 0); - z-index: var(--nutui-menu-scroll-fixed-z-index, 1000); - width: 100%; -} .nut-menu-bar { position: relative; display: -ms-flexbox; @@ -6300,9 +3281,6 @@ wx-button { background-color: var(--nutui-color-background-overlay, #ffffff); box-shadow: var(--nutui-menu-bar-box-shadow, 0 2rpx 12rpx rgba(89, 89, 89, 0.12)); } -.nut-menu-bar.opened { - z-index: var(--nutui-menu-bar-opened-z-index, 1000); -} .nut-menu-title { -ms-flex: 1; flex: 1; @@ -6318,24 +3296,11 @@ wx-button { justify-content: center; max-width: 100%; } -.nut-menu-title-text { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: block; - padding: var(--nutui-menu-title-padding, 0 8rpx); -} .nut-menu-title-icon { -ms-flex-negative: 0; flex-shrink: 0; transition: all 0.2s linear; } -.nut-menu-title.active { - color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-menu-title.disabled { - color: var(--nutui-menu-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc)); -} .nut-menu-title.active .nut-menu-title-icon { -ms-transform: rotate(180deg); transform: rotate(180deg); @@ -6356,31 +3321,6 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-loading .nut-loading-icon-box { - display: inline-block; - font-size: 0; - line-height: 0; - animation: nut-loading-rotation 1s infinite linear; -} -.nut-loading .nut-loading-icon-box .nut-loading-icon { - color: var(--nutui-loading-icon-color, var(--nutui-color-text-help, #888b94)); - width: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); - height: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); - font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); -} -.nut-loading .nut-loading-text { - color: var(--nutui-loading-color, var(--nutui-color-text-help, #888b94)); - font-size: var(--nutui-loading-font-size, var(--nutui-font-size-s, 12rpx)); -} -.nut-loading-vertical .nut-loading-text { - padding-top: var(--nutui-spacing-base, 8rpx); -} -@keyframes nut-loading-rotation { - 0% { - } - to { - } -} .nut-inputnumber { display: -ms-flexbox; display: flex; @@ -6407,19 +3347,6 @@ wx-button { height: var(--nutui-inputnumber-button-height, 20rpx); background-color: var(--nutui-inputnumber-button-background-color, transparent); } -.nut-inputnumber-minus .nut-icon, -.nut-inputnumber-add .nut-icon { - --nut-icon-width: 10rpx; - --nut-icon-height: 10rpx; -} -.nut-inputnumber-icon { - color: var(--nutui-color-text, #505259); - cursor: pointer; -} -.nut-inputnumber-icon-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); - cursor: not-allowed; -} .nut-inputnumber-input { display: -ms-flexbox; display: flex; @@ -6443,18 +3370,6 @@ wx-button { -moz-appearance: none; appearance: none; } -.nut-inputnumber-input-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); -} -.nut-inputnumber-icon-minus, -.nut-inputnumber-icon-plus { - --nut-icon-width: 16rpx; - --nut-icon-height: 16rpx; -} -.nut-infiniteloading { - display: block; - width: 100%; -} .nut-infiniteloading .nut-infinite-top { display: -ms-flexbox; display: flex; @@ -6508,21 +3423,6 @@ wx-button { align-items: center; font-size: var(--nutui-font-size-xxs, 10rpx); } -.nut-infiniteloading .nut-infinite-bottom-tips-icons { - margin-right: 8rpx; -} -.nut-infiniteloading-primary { - background-color: var(--nutui-color-primary, #ff0f23); -} -.nut-infiniteloading-primary .nut-infinite-bottom, -.nut-infiniteloading-primary .nut-infinite-top { - color: var(--nutui-color-text-dark, rgba(255, 255, 255, 0.9)); -} -[dir='rtl'] .nut-infiniteloading .nut-infinite-bottom-tips-icons, -.nut-rtl .nut-infiniteloading .nut-infinite-bottom-tips-icons { - margin-right: 0; - margin-left: 8rpx; -} .nut-input { position: relative; display: -ms-flexbox; @@ -6538,10 +3438,6 @@ wx-button { font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); box-sizing: border-box; } -.nut-input .nut-input-native .weui-input::-webkit-input-placeholder { - color: #757575; - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); -} .nut-input .nut-input-native .weui-input::-moz-placeholder { color: #757575; font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); @@ -6554,24 +3450,6 @@ wx-button { color: #757575; font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); } -.nut-input .nut-input-native .weui-input::placeholder, -.nut-input-placeholder { - color: #757575; - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); -} -.nut-input .nut-icon { - color: var(--nutui-color-text-disabled, #c2c4cc); - width: 14rpx; - height: 14rpx; - font-size: 14rpx; -} -.nut-input-container { - height: 38rpx; - padding: var(--nutui-input-padding, 12rpx); - background-color: var(--nutui-input-background-color, var(--nutui-color-background-overlay, #ffffff)); - border-radius: var(--nutui-input-border-radius, var(--nutui-radius-s, 6rpx)); - border-bottom: var(--nutui-input-border-bottom-width, 0rpx) solid var(--nutui-input-border-bottom, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); -} .nut-input-native { -ms-flex: 1; flex: 1; @@ -6583,12 +3461,6 @@ wx-button { text-decoration: none; background-color: transparent; } -.nut-input-readonly .nut-input-native { - color: var(--nutui-color-text-help, #888b94); -} -.nut-input-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc) !important; -} .nut-indicator { display: -ms-flexbox; display: flex; @@ -6600,149 +3472,27 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-indicator-fixed-width { - width: 21rpx; -} -.nut-indicator-dot, -.nut-indicator-line { - display: inline-block; - vertical-align: middle; - width: var(--nutui-indicator-dot-size, 3rpx); - height: var(--nutui-indicator-dot-size, 3rpx); - border-radius: 50%; - background-color: var(--nutui-color-border-disabled, #c2c4cc); - margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); - opacity: 0.4; -} -.nut-indicator-dot-0, -.nut-indicator-line-0 { - margin-left: 0; -} -.nut-indicator-dot-active, -.nut-indicator-line-active { - width: var(--nutui-indicator-dot-active-size, 6rpx); - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); - background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23)); - opacity: 1; -} -.nut-indicator-fixed-width .nut-indicator-dot { - width: 12rpx; - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); -} -.nut-indicator-fixed-width .nut-indicator-dot-active { - width: 6rpx; -} .nut-indicator-vertical.nut-indicator-fixed-width { -ms-flex-pack: start; justify-content: flex-start; height: 21rpx; width: auto; } -.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot { - width: 3rpx; - height: 12rpx; - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); -} -.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active, -.nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active { - height: 6rpx; +.nut-indicator-vertical { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; } -.nut-indicator-line { - width: var(--nutui-indicator-dot-active-size, 6rpx); - margin: 0; - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); - background-color: transparent; -} -.nut-indicator-line-active { - transition: transform 0.3s ease-in-out; - background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-indicator-track { - position: relative; -} -.nut-indicator-track::after { - display: block; - content: ' '; - position: absolute; - width: 100%; - height: 100%; - box-sizing: border-box; - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); - background-color: var(--nutui-color-border-disabled, #c2c4cc); - opacity: 0.4; -} -.nut-indicator-white .nut-indicator-dot, -.nut-indicator-white .nut-indicator-line { - position: relative; - box-sizing: content-box; - background: rgba(255, 255, 255, 0.4); - opacity: 1; -} -.nut-indicator-white .nut-indicator-line { - opacity: 0; -} -.nut-indicator-white .nut-indicator-line-active { - opacity: 1; - background: #fff; -} -.nut-indicator-white .nut-indicator-dot-active { - background: #fff; -} -.nut-indicator-track.nut-indicator-white::after { - border: 1rpx solid rgba(0, 0, 0, 0.06); - background: rgba(255, 255, 255, 0.4); -} -.nut-indicator-vertical { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; -} -.nut-indicator-vertical .nut-indicator-dot { - margin: 0; - margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); -} -.nut-indicator-vertical .nut-indicator-dot-0 { - margin-top: 0; -} -.nut-indicator-vertical .nut-indicator-dot-active, -.nut-indicator-vertical.nut-indicator-track .nut-indicator-line { - width: var(--nutui-indicator-dot-size, 3rpx); - height: var(--nutui-indicator-dot-active-size, 6rpx); -} -[dir='rtl'] .nut-indicator-dot-0, -.nut-rtl .nut-indicator-dot-0 { - margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); - margin-left: 0; -} -.nut-imagepreview { - width: 100%; - height: 100%; -} -.nut-imagepreview-swiper { - height: 100%; - width: 100vw; - background-color: transparent; -} -.nut-imagepreview-index { - position: fixed; - z-index: 2002; - top: 50rpx; - text-align: center; - left: 0; - right: 0; - background: transparent; - color: #fff; -} -.nut-imagepreview-index .arrow { - position: absolute; - left: 15rpx; - -ms-transform: rotate(180deg); - transform: rotate(180deg); +.nut-imagepreview-index .arrow { + position: absolute; + left: 15rpx; + -ms-transform: rotate(180deg); + transform: rotate(180deg); } .nut-imagepreview-close { position: fixed; @@ -6756,23 +3506,6 @@ wx-button { background: transparent; color: #fff; } -.nut-imagepreview-close .nut-icon { - color: #fff; -} -.nut-imagepreview-close.top-right { - top: 50rpx; - right: 20rpx; -} -.nut-imagepreview-close.top-left { - top: 50rpx; - left: 20rpx; -} -.nut-imagepreview-close.bottom { - bottom: 50rpx; - left: 0; - right: 0; - text-align: center; -} .nut-imagepreview-pop { width: 100%; height: 100%; @@ -6804,10 +3537,6 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-image-preview-box, -.nut-imagepreview-swiper .nut-swiper-item .nut-image-preview-box { - width: 100%; -} .nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-video .h5-video, .nut-imagepreview-swiper .nut-swiper-item .nut-video .h5-video { -o-object-fit: contain; @@ -6820,32 +3549,6 @@ wx-button { -ms-transform: rotate(-180deg); transform: rotate(-180deg); } -[dir='rtl'] .nut-imagepreview-close.top-right, -.nut-rtl .nut-imagepreview-close.top-right { - right: auto; - left: 20rpx; -} -[dir='rtl'] .nut-imagepreview-close.top-left, -.nut-rtl .nut-imagepreview-close.top-left { - left: auto; - right: 20rpx; -} -.nut-hoverbutton-item-container { - width: var(--nutui-hoverbutton-item-size, 40rpx); - height: var(--nutui-hoverbutton-item-size, 40rpx); - border-radius: var(--nutui-hoverbutton-item-size, 40rpx); - border: 1rpx solid var(--nutui-hoverbutton-item-border-color, rgba(0, 0, 0, 0.12)); - background-color: var(--nutui-hoverbutton-item-background, var(--nutui-white-12)); -} -.nut-hoverbutton-item-container-active { - background-color: var(--nutui-hoverbutton-item-background-active, rgba(247, 248, 252, 0.9)); -} -.nut-hoverbutton-item-container-harmony { - margin-bottom: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8rpx)); -} -.nut-hoverbutton-item-container-harmony:last-child { - margin-bottom: 0; -} .nut-hoverbutton-item-container-icontext { display: -ms-flexbox; display: flex; @@ -6854,34 +3557,6 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-hoverbutton-item-container-icontext .nut-icon { - display: block; - width: 14rpx; - height: 14rpx; - font-size: 14rpx; -} -.nut-hoverbutton-item-icon { - width: 20rpx; - height: 20rpx; - margin: 9rpx; - color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a)); - fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a)); -} -.nut-hoverbutton-item-icon .nut-icon { - display: block; - width: 20rpx; - height: 20rpx; - font-size: 20rpx; -} -.nut-hoverbutton-item-text-icon { - width: 14rpx; - height: 5rpx; -} -.nut-hoverbutton-item-text { - font-size: 10rpx; - margin-top: 5rpx; - line-height: 9rpx; -} .nut-hoverbutton { display: -ms-flexbox; display: flex; @@ -6889,34 +3564,6 @@ wx-button { flex-direction: column; gap: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8rpx)); } -.nut-hoverbutton-container { - position: fixed; - right: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, 8rpx)); - bottom: var(--nutui-hoverbutton-position-bottom, 60rpx); - z-index: 10; -} -[dir='rtl'] .nut-hoverbutton-container, -.nut-hoverbutton-container-rtl { - right: auto; - left: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, 8rpx)); -} -.nut-image { - display: block; - position: relative; -} -.nut-image-default { - display: block; - width: 100%; - height: 100%; -} -.nut-image.nut-image-round { - border-radius: 50%; - overflow: hidden; -} -.nut-image-basic { - width: 100%; - height: 100%; -} .nut-image-loading, .nut-image-error { width: 100%; @@ -6935,13 +3582,6 @@ wx-button { background: var(--nutui-color-background, #f2f3f5); background-size: 100% 100%; } -[dir='rtl'] .nut-image .nut-img-loading, -.nut-rtl .nut-image .nut-img-loading, -[dir='rtl'] .nut-image .nut-img-error, -.nut-rtl .nut-image .nut-img-error { - left: auto; - right: 0; -} .nut-grid-item { display: -ms-flexbox; display: flex; @@ -6952,21 +3592,6 @@ wx-button { color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a)); overflow: hidden; } -.nut-grid-item-text { - color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-grid-item-text-font-size, var(--nutui-font-size-s, 12rpx)); - word-break: break-all; - margin: var(--nutui-grid-item-text-margin, 8rpx) 0 0 0; -} -.nut-grid-item-text-reverse { - margin: 0 0 var(--nutui-grid-item-text-margin, 8rpx) 0; -} -.nut-grid-item-text-horizontal { - margin: 0 0 0 var(--nutui-grid-item-text-margin, 8rpx); -} -.nut-grid-item-text-horizontal-reverse { - margin: 0 var(--nutui-grid-item-text-margin, 8rpx) 0 0; -} .nut-grid-item-content { display: -ms-flexbox; display: flex; @@ -6980,24 +3605,12 @@ wx-button { background: var(--nutui-grid-item-content-bg-color, var(--nutui-gray-1)); border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-grid-item-content-border { - border-right-width: var(--nutui-grid-border-width, 0rpx); - border-bottom-width: var(--nutui-grid-border-width, 0rpx); -} -.nut-grid-item-content-surround { - border-top-width: var(--nutui-grid-border-width, 0rpx); - border-left-width: var(--nutui-grid-border-width, 0rpx); - border-radius: var(--nutui-grid-item-border-radius, var(--nutui-radius-l, 8rpx)); -} .nut-grid-item-content-center { -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; } -.nut-grid-item-content-square { - margin-top: -100%; -} .nut-grid-item-content-reverse { -ms-flex-direction: column-reverse; flex-direction: column-reverse; @@ -7010,9 +3623,6 @@ wx-button { -ms-flex-direction: row-reverse; flex-direction: row-reverse; } -.nut-grid-item-content-clickable { - cursor: pointer; -} .nut-grid-item-content-clickable::before { position: absolute; top: 50%; @@ -7028,24 +3638,6 @@ wx-button { opacity: 0; content: ' '; } -[dir='rtl'] .nut-grid-item-content-border, -.nut-rtl .nut-grid-item-content-border { - border-right-width: 0; - border-left-width: 1rpx; -} -[dir='rtl'] .nut-grid-item-content-surround, -.nut-rtl .nut-grid-item-content-surround { - border-left-width: 0; - border-right-width: 1rpx; -} -[dir='rtl'] .nut-grid-item-content-horizontal .nut-grid-item-text, -.nut-rtl .nut-grid-item-content-horizontal .nut-grid-item-text { - margin: 0 var(--nutui-grid-item-text-margin, 8rpx) 0 0; -} -[dir='rtl'] .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text, -.nut-rtl .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text { - margin: 0 0 0 var(--nutui-grid-item-text-margin, 8rpx); -} [dir='rtl'] .nut-grid-item-content-clickable::before, .nut-rtl .nut-grid-item-content-clickable::before { left: auto; @@ -7064,23 +3656,10 @@ wx-button { flex-wrap: wrap; border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-grid-border { - border-top-width: var(--nutui-grid-border-width, 0rpx); - border-left-width: var(--nutui-grid-border-width, 0rpx); -} -[dir='rtl'] .nut-grid-border, -.nut-rtl .nut-grid-border { - border-left-width: 0; - border-right-width: 1rpx; -} -.nut-form-item { - display: -ms-flexbox; - display: flex; - line-height: inherit; -} -.nut-form-item-disabled { - opacity: 0.4; - pointer-events: none; +.nut-form-item { + display: -ms-flexbox; + display: flex; + line-height: inherit; } .nut-form-item-label { display: -ms-flexbox; @@ -7097,22 +3676,6 @@ wx-button { text-align: var(--nutui-form-item-label-text-align, left); line-height: inherit; } -.nut-form-item-label-left-required { - color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23)); - margin-right: var(--nutui-form-item-required-margin-right, 4rpx); - position: absolute; - left: -10rpx; -} -.nut-form-item-label-right-required { - color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23)); - margin-left: var(--nutui-form-item-required-margin-right, 4rpx); - position: absolute; - right: -10rpx; -} -.nut-form-item .nut-form-item-labeltxt { - position: relative; - font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, 12rpx)); -} .nut-form-item-body { -ms-flex: 1; flex: 1; @@ -7121,81 +3684,12 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-form-item-body-slots { - text-align: var(--nutui-form-item-body-slots-text-align, left); -} -.nut-form-item-body-slots .nut-input { - padding: 0; - border: 0; -} -.nut-form-item-body-slots .nut-input-container { - height: auto; -} -.nut-form-item-body-slots .nut-input-text { - font-size: var(--nutui-form-item-body-font-size, var(--nutui-font-size-base, 14rpx)); - text-align: var(--nutui-form-item-body-input-text-align, left); - color: var(--nutui-color-title, #1a1a1a); - width: 100%; - outline: 0 none; - border: 0; - text-decoration: none; - background: transparent; -} -.nut-form-item-body-slots .nut-range-container { - min-height: 24rpx; -} -.nut-form-item-body-slots .nut-textarea { - padding: 0; -} -.nut-form-item-body-slots .nut-textarea .nut-textarea-textarea { - font: inherit; - text-align: var(--nutui-form-item-body-input-text-align, left); -} -.nut-form-item-body-tips { - text-align: var(--nutui-form-item-tip-text-align, left); - font-size: var(--nutui-form-item-tip-font-size, var(--nutui-font-size-xs, 11rpx)); - color: var(--nutui-form-item-error-message-color, var(--nutui-color-primary, #ff0f23)); -} -[dir='rtl'] .nut-form-item-label, -.nut-rtl .nut-form-item-label { - text-align: right; - margin-right: 0; - margin-left: var(--nutui-form-item-label-margin-right, 10rpx); -} -[dir='rtl'] .nut-form-item-label .required::before, -.nut-rtl .nut-form-item-label .required::before { - margin-right: 0; - margin-left: var(--nutui-form-item-required-margin-right, 4rpx); -} -[dir='rtl'] .nut-form-item-body-slots, -.nut-rtl .nut-form-item-body-slots { - text-align: right; -} -[dir='rtl'] .nut-form-item-body-slots .nut-icon-ArrowRight, -[dir='rtl'] .nut-form-item-body-slots .nut-icon-ArrowLeft, -.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowRight, -.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowLeft { - transform: rotateY(180deg); -} -[dir='rtl'] .nut-form-item-body-slots .nut-input-text, -.nut-rtl .nut-form-item-body-slots .nut-input-text, -[dir='rtl'] .nut-form-item-body-slots .nut-textarea-textarea, -.nut-rtl .nut-form-item-body-slots .nut-textarea-textarea, -[dir='rtl'] .nut-form-item-tips, -.nut-rtl .nut-form-item-tips { - text-align: right; -} .nut-form-item-label-right { -ms-flex-pack: end; justify-content: flex-end; padding-right: 24rpx; white-space: nowrap; } -.nut-form-item-label-left { - position: relative; - padding-left: 12rpx; - white-space: nowrap; -} .nut-form-item-top { -ms-flex-direction: column; flex-direction: column; @@ -7203,48 +3697,6 @@ wx-button { align-items: flex-start; white-space: nowrap; } -.nut-form-item-label-top { - display: block; - padding-bottom: 4rpx; - padding-right: 24rpx; -} -.nut-form-item-body-top { - margin-left: 0; - width: 100%; -} -[dir='rtl'] .form-layout-right .nut-form-item-label, -.nut-rtl .form-layout-right .nut-form-item-label { - text-align: left; - padding-right: 0; - padding-left: 24rpx; -} -[dir='rtl'] .form-layout-left .nut-form-item-label, -.nut-rtl .form-layout-left .nut-form-item-label { - text-align: right; - padding-left: 0; - padding-right: 12rpx; -} -[dir='rtl'] .form-layout-left .nut-form-item-label .required, -.nut-rtl .form-layout-left .nut-form-item-label .required { - left: auto; - right: 0.1em; -} -[dir='rtl'] .form-layout-top .nut-form-item-label, -.nut-rtl .form-layout-top .nut-form-item-label { - padding-right: 0; - padding-left: 24rpx; -} -[dir='rtl'] .form-layout-top .nut-form-item-body, -.nut-rtl .form-layout-top .nut-form-item-body { - margin-left: 0; - margin-right: 0; -} -.nut-fixednav { - position: fixed; - z-index: var(--nutui-fixednav-index, 900); - display: inline-block; - height: 50rpx; -} .nut-fixednav.active .nut-fixednav-btn .nut-icon { -ms-transform: rotate(180deg); transform: rotate(180deg); @@ -7280,9 +3732,6 @@ wx-button { -ms-flex-negative: 0; flex-shrink: 0; } -.nut-fixednav-btn .nut-icon { - transition: all 0.3s; -} .nut-fixednav-list { position: absolute; transition: all 0.5s; @@ -7315,21 +3764,6 @@ wx-button { flex-shrink: 0; color: var(--nutui-fixednav-color, #1a1a1a); } -.nut-fixednav-list-item .nut-fixednav-list-text { - font-size: 10rpx; -} -.nut-fixednav-list-image { - width: 20rpx; - height: 20rpx; - margin-bottom: 2rpx; -} -.nut-fixednav-right { - right: 0; -} -.nut-fixednav-right .nut-fixednav-btn { - right: 0; - border-radius: 45rpx 0 0 45rpx; -} .nut-fixednav-right .nut-fixednav-btn .nut-icon { margin-right: 5rpx; -ms-transform: rotate(0); @@ -7343,9 +3777,6 @@ wx-button { padding-left: 20rpx; padding-right: 80rpx; } -.nut-fixednav-left { - left: 0; -} .nut-fixednav-left .nut-fixednav-btn { -ms-flex-direction: row-reverse; flex-direction: row-reverse; @@ -7365,11 +3796,6 @@ wx-button { padding-left: 80rpx; padding-right: 20rpx; } -[dir='rtl'] .nut-fixednav-right, -.nut-rtl .nut-fixednav-right { - right: auto; - left: 0; -} [dir='rtl'] .nut-fixednav.active .nut-icon, .nut-rtl .nut-fixednav.active .nut-icon { -ms-transform: rotate(0); @@ -7380,12 +3806,6 @@ wx-button { -ms-transform: rotate(-180deg); transform: rotate(-180deg); } -[dir='rtl'] .nut-fixednav-btn, -.nut-rtl .nut-fixednav-btn { - right: auto; - left: 0; - border-radius: 0 45rpx 45rpx 0; -} [dir='rtl'] .nut-fixednav-btn .nut-icon, .nut-rtl .nut-fixednav-btn .nut-icon { margin-right: 0; @@ -7404,22 +3824,6 @@ wx-button { padding-right: 20rpx; padding-left: 80rpx; } -[dir='rtl'] .nut-fixednav-list-item .b, -.nut-rtl .nut-fixednav-list-item .b { - right: auto; - left: 0; -} -[dir='rtl'] .nut-fixednav-left, -.nut-rtl .nut-fixednav-left { - left: auto; - right: 0; -} -[dir='rtl'] .nut-fixednav-left .nut-fixednav-btn, -.nut-rtl .nut-fixednav-left .nut-fixednav-btn { - left: auto; - right: 0; - border-radius: 45rpx 0 0 45rpx; -} [dir='rtl'] .nut-fixednav-left .nut-fixednav-btn .nut-icon, .nut-rtl .nut-fixednav-left .nut-fixednav-btn .nut-icon { -ms-transform: rotate(0); @@ -7437,25 +3841,10 @@ wx-button { padding-right: 80rpx; padding-left: 20rpx; } -.nut-drag .nut-fixednav { - position: relative; -} .nut-ellipsis { display: -ms-flexbox; display: flex; } -.nut-ellipsis .nut-ellipsis-text { - cursor: pointer; - color: var(--nutui-ellipsis-expand-collapse-color, var(--nutui-color-info, #0073ff)); - display: inline-block; -} -.nut-ellipsis .nut-ellipsis-wordbreak { - word-break: break-all; -} -.nut-ellipsis-copy { - position: absolute; - top: -999999rpx; -} .nut-ellipsis-width { width: -moz-fit-content; width: fit-content; @@ -7513,10 +3902,6 @@ wx-button { font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-size-base, 14rpx)); color: var(--nutui-elevator-list-color, var(--nutui-color-title, #1a1a1a)); } -.nut-elevator-list-item-name-highcolor { - color: var(--nutui-color-primary, #ff0f23); - font-weight: 600; -} .nut-elevator-list-fixed { position: absolute; top: 0; @@ -7533,11 +3918,6 @@ wx-button { box-shadow: var(--nutui-elevator-list-fixed-box-shadow, 0 0 10rpx #eee); background-color: var(--nutui-elevator-list-fixed-bg-color, #ffffff); } -.nut-elevator-list-fixed-title { - font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-elevator-list-fixed-color, var(--nutui-color-primary, #ff0f23)); - font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600)); -} .nut-elevator-code-current { position: absolute; right: var(--nutui-elevator-list-item-code-current-right, 60rpx); @@ -7605,28 +3985,6 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-elevator-vertical .nut-elevator-list-item-code { - border-bottom: var(--nutui-elevator-list-item-code-border-bottom, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); -} -.nut-elevator-vertical .nut-elevator-list-item-name, -.nut-elevator-vertical .nut-elevator-list-item-code { - padding: var(--nutui-elevator-list-item-padding, 0 36rpx 0 20rpx); -} -[dir='rtl'] .nut-elevator-list-fixed, -.nut-rtl .nut-elevator-list-fixed { - left: auto; - right: 0; -} -[dir='rtl'] .nut-elevator-code-current, -.nut-rtl .nut-elevator-code-current { - right: auto; - left: var(--nutui-elevator-list-item-code-current-right, 60rpx); -} -[dir='rtl'] .nut-elevator-bars, -.nut-rtl .nut-elevator-bars { - right: auto; - left: var(--nutui-elevator-bars-right, 16rpx); -} .nut-drag { position: fixed; z-index: 9997 !important; @@ -7665,54 +4023,19 @@ wx-button { padding: var(--nutui-empty-padding, 32rpx 40rpx); background-color: var(--nutui-empty-background-color, var(--nutui-color-background-overlay, #ffffff)); } -.nut-empty-base { - width: var(--nutui-empty-image-size, 160rpx); - height: var(--nutui-empty-image-size, 160rpx); +.nut-empty-actions-base { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + margin-top: 24rpx; } -.nut-empty-base .h5-img, -.nut-empty-base image { - width: 100%; - height: 100%; -} -.nut-empty-small { - width: var(--nutui-empty-image-small-size, 120rpx); - height: var(--nutui-empty-image-small-size, 120rpx); -} -.nut-empty-small .h5-img, -.nut-empty-small image { - width: 100%; - height: 100%; -} -.nut-empty-title { - margin-top: var(--nutui-empty-title-margin-top, 0rpx); - font-weight: var(--nutui-font-weight-bold, 600); - margin-bottom: var(--nutui-empty-title-margin-bottom, 12rpx); - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-font-size-l, 15rpx); - line-height: var(--nutui-empty-title-line-height, var(--nutui-font-size-l, 15rpx)); -} -.nut-empty-description { - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-font-size-s, 12rpx); - line-height: var(--nutui-empty-description-line-height, 1); -} -.nut-empty-actions-base { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - margin-top: 24rpx; -} -.nut-empty-actions-small { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - margin-top: 16rpx; -} -.nut-empty-action { - margin-right: 6rpx; - margin-left: 6rpx; +.nut-empty-actions-small { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + margin-top: 16rpx; } .nut-divider { display: -ms-flexbox; @@ -7738,16 +4061,6 @@ wx-button { -ms-flex: 1; flex: 1; } -.nut-divider-center-before, -.nut-divider-left-before, -.nut-divider-right-before { - margin-right: var(--nutui-divider-spacing, 8rpx); -} -.nut-divider-center-after, -.nut-divider-left-after, -.nut-divider-right-after { - margin-left: var(--nutui-divider-spacing, 8rpx); -} .nut-divider-left-before, .nut-divider-right-after { width: var(--nutui-divider-side-width, 10%); @@ -7765,14 +4078,6 @@ wx-button { margin: var(--nutui-divider-vertical-margin, 0 8rpx); vertical-align: middle; } -.nut-divider-rtl-before { - margin-right: 0; - margin-left: var(--nutui-divider-spacing, 8rpx); -} -.nut-divider-rtl-after { - margin-left: 0; - margin-right: var(--nutui-divider-spacing, 8rpx); -} .nut-datepickerview { display: -ms-flexbox; display: flex; @@ -7819,19 +4124,6 @@ wx-button { align-items: center; color: var(--nutui-dialog-close-color, #ffffff); } -.nut-dialog-close .nut-icon { - font-size: var(--nutui-dialog-close-width, 16rpx); - width: var(--nutui-dialog-close-width, 16rpx); - height: var(--nutui-dialog-close-height, 16rpx); -} -.nut-dialog-close-top-right { - top: var(--nutui-dialog-close-top, 16rpx); - right: var(--nutui-dialog-close-right, 16rpx); -} -.nut-dialog-close-top-left { - top: var(--nutui-dialog-close-top, 16rpx); - left: var(--nutui-dialog-close-left, 16rpx); -} .nut-dialog-close-bottom { bottom: -64rpx; width: var(--nutui-dialog-bottom-close-icon-size, 24rpx); @@ -7840,38 +4132,6 @@ wx-button { -ms-transform: translate(-50%); transform: translate(-50%); } -.nut-dialog-close-bottom .nut-icon { - color: var(--nutui-color-text-disabled, #c2c4cc); - background-color: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)); - border-radius: 50%; - width: var(--nutui-dialog-bottom-close-icon-size, 24rpx); - height: var(--nutui-dialog-bottom-close-icon-size, 24rpx); -} -.nut-dialog-header { - display: block; - text-align: center; - font-size: var(--nutui-dialog-header-font-size, var(--nutui-font-size-xl, 18rpx)); - font-weight: var(--nutui-dialog-header-font-weight, var(--nutui-font-weight-bold, 600)); - color: var(--nutui-color-title, #1a1a1a); - margin-bottom: var(--nutui-dialog-title-margin-bottom, 8rpx); - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.nut-dialog-content { - width: 100%; - margin: var(--nutui-dialog-content-margin, 0 0 20rpx 0); - max-height: var(--nutui-dialog-content-max-height, 268rpx); - line-height: var(--nutui-dialog-content-line-height, 20rpx); - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-color-title, #1a1a1a); - word-wrap: break-word; - word-break: break-all; - white-space: pre-wrap; - text-align: var(--nutui-dialog-content-text-align, left); - overflow-y: auto; -} .nut-dialog-footer { display: -ms-flexbox; display: flex; @@ -7885,9 +4145,6 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-dialog-footer.vertical .nut-button { - min-width: 100%; -} .nut-dialog-footer.vertical .nut-dialog-footer-cancel { margin: 0; color: var(--nutui-color-text, #505259); @@ -7899,20 +4156,6 @@ wx-button { margin-top: var(--nutui-dialog-vertical-footer-ok-margin-top, 16rpx); background: transparent; } -.nut-dialog-footer .nut-button { - min-width: var(--nutui-dialog-footer-button-min-width, 117rpx); - border-radius: var(--nutui-dialog-footer-button-border, 6rpx); - padding: var(--nutui-button-large-padding, 0 12rpx); -} -.nut-dialog-footer-cancel.nut-dialog-footer-cancel { - margin-right: var(--nutui-dialog-footer-cancel-margin-right, 12rpx); - background: var(--nutui-dialog-footer-cancel-bg, var(--nutui-color-background-sunken, #f7f8fc)); - color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a)); - border-color: var(--nutui-button-default-border-color, transparent); -} -.nut-dialog-footer-cancel.nut-dialog-footer-cancel .nut-button-children { - color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a)); -} .nut-dialog-footer-ok-container { position: relative; display: -ms-flexbox; @@ -7938,16 +4181,6 @@ wx-button { font-size: var(--nutui-dialog-footer-badge-fontsize, 10rpx); color: var(--nutui-dialog-footer-badge-color-ok, var(--nutui-color-primary, #ff0f23)); } -.nut-dialog-footer-ok { - max-width: var(--nutui-dialog-footer-ok-max-width, 128rpx); - font-weight: var(--nutui-font-weight-medium, 500); -} -.nut-dialog-footer-ok .nut-button-children { - font-weight: var(--nutui-font-weight-medium, 500); -} -.nut-dialog-footer-block.nut-button { - min-width: 100%; -} .nut-dialog-footer-cancel-container { position: relative; display: -ms-flexbox; @@ -7980,25 +4213,6 @@ wx-button { -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } -[dir='rtl'] .nut-dialog-close-top-right, -.nut-rtl .nut-dialog-close-top-right { - right: auto; - left: var(--nutui-dialog-close-right, 16rpx); -} -[dir='rtl'] .nut-dialog-close-top-left, -.nut-rtl .nut-dialog-close-top-left { - left: auto; - right: var(--nutui-dialog-close-left, 16rpx); -} -[dir='rtl'] .nut-dialog-footer-cancel.nut-dialog-footer-cancel, -.nut-rtl .nut-dialog-footer-cancel.nut-dialog-footer-cancel { - margin-right: 0; - margin-left: var(--nutui-dialog-footer-cancel-margin-right, 12rpx); -} -[dir='rtl'] .nut-dialog-content, -.nut-rtl .nut-dialog-content { - text-align: var(--nutui-dialog-content-text-align, right); -} .nut-countup-list { display: -ms-flexbox; display: flex; @@ -8015,12 +4229,6 @@ wx-button { -ms-user-select: none; user-select: none; } -.nut-countup-listitem-number { - margin: 0 var(--nutui-countup-lr-margin, 0); - border-radius: var(--nutui-countup-border-radius, 4rpx); - color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a)); - background-color: var(--nutui-countup-bg-color, inherit); -} .nut-countup-separator { display: -ms-flexbox; display: flex; @@ -8043,13 +4251,6 @@ wx-button { -ms-transform: translate(0); transform: translate(0); } -.nut-countup-number-text { - height: var(--nutui-countup-height, 32rpx); - line-height: var(--nutui-countup-height, 32rpx); - color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-countup-base-size, 18rpx); - font-weight: var(--nutui-font-weight-bold, 600); -} .nut-countdown { display: var(--nutui-countdown-display, flex); -ms-flex-direction: row; @@ -8076,15 +4277,6 @@ wx-button { line-height: calc(var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11rpx)) + 2rpx); font-family: JDZH-Regular; } -.nut-countdown-number, -.nut-countdown-number-primary { - position: relative; - min-width: var(--nutui-countdown-width, 16rpx); - padding: var(--nutui-countdown-number-padding, 0 0); - border-radius: var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2rpx)); - margin: var(--nutui-countdown-number-margin, 0 1rpx); - text-align: center; -} .nut-countdown-number::after, .nut-countdown-number-primary::after { content: ''; @@ -8097,7781 +4289,7694 @@ wx-button { transform: scale(0.5); border-radius: calc(var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2rpx)) * 2); } -.nut-countdown-number { - background-color: var(--nutui-countdown-number-background-color, var(--nutui-color-background-overlay, #ffffff)); - color: var(--nutui-countdown-number-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-countdown-number::after { - border: 1rpx solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-specialdisabled, #ffadbe)); -} -.nut-countdown-number-primary { - background-color: var(--nutui-countdown-number-primary-background-color, var(--nutui-color-primary, #ff0f23)); - color: var(--nutui-countdown-number-primary-color, #ffffff); -} -.nut-countdown-number-primary::after { - border: 1rpx solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-countdown-number-text { - border: 0; - background-color: transparent; - color: var(--nutui-countdown-number-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-countdown-unit { - color: var(--nutui-countdown-color, var(--nutui-color-primary, #ff0f23)); +.nut-circleprogress-text { + position: absolute; + top: 50%; + left: 0; + box-sizing: border-box; + width: 100%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + text-align: center; + color: var(--nutui-circleprogress-text-color, var(--nutui-color-title, #1a1a1a)); + font-size: var(--nutui-circleprogress-text-size, var(--nutui-font-size-l, 15rpx)); } -.nut-col { +.nut-collapse-item::after { + position: absolute; box-sizing: border-box; - word-break: break-all; - margin-bottom: var(--nutui-col-default-margin-bottom, 15rpx); + content: ' '; + pointer-events: none; + right: 16rpx; + left: 16rpx; + bottom: 0; + border-bottom: var(--nutui-collapse-item-border-bottom, none); + -ms-transform: scaleY(0.5); + transform: scaleY(0.5); } -[dir='rtl'] .nut-col, -.nut-rtl .nut-col { - float: right; +.nut-collapse-item-header { + position: relative; + display: -ms-flexbox; + display: flex; + width: 100%; + overflow: hidden; + padding: var(--nutui-collapse-item-padding, 13rpx 26rpx); + font-size: var(--nutui-collapse-item-font-size, var(--nutui-font-size-base, 14rpx)); + line-height: var(--nutui-collapse-item-line-height, 24rpx); + background-color: var(--nutui-color-background-overlay, #ffffff); + box-sizing: border-box; } -[dir='rtl'] .nut-col.nut-col-gutter:last-child, -.nut-rtl .nut-col.nut-col-gutter:last-child { - padding-right: 0 !important; - padding-left: 0 !important; +.nut-collapse-item-header::after { + position: absolute; + box-sizing: border-box; + content: ' '; + pointer-events: none; + right: 16rpx; + left: 16rpx; + bottom: 0; + border-bottom: var(--nutui-collapse-item-header-border-bottom, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + -ms-transform: scale(1); + transform: scale(1); + -ms-transform: scaleY(0.5); + transform: scaleY(0.5); } -[dir='rtl'] .nut-col.nut-col-gutter:first-child, -.nut-rtl .nut-col.nut-col-gutter:first-child { - padding-left: 0 !important; - padding-right: 0 !important; +.nut-collapse-item-title { + color: var(--nutui-collapse-item-color, var(--nutui-color-title, #1a1a1a)); + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; } -.nut-col-offset-1 { - margin-left: 4.166666666%; +.nut-collapse-item-extra { + -ms-flex: 1; + flex: 1; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: end; + justify-content: flex-end; + padding: 0 20rpx; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--nutui-collapse-item-extra-color, var(--nutui-color-text, #505259)); +} +.nut-collapse-item-icon-box { + display: -ms-flexbox; + display: flex; + width: 24rpx; + position: relative; + color: var(--nutui-color-text, #505259); +} +.nut-collapse-item-icon { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + position: absolute; + top: 50%; + left: 5rpx; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + -ms-transform-origin: center; + transform-origin: center; + transition: transform 0.3s; +} +.nut-checkboxgroup-vertical { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; +} +.nut-checkboxgroup-vertical .nut-checkbox.nut-checkbox-reverse { + width: 100%; + -ms-flex-pack: justify; + justify-content: space-between; +} +.nut-checkboxgroup-horizontal { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.nut-checkboxgroup-horizontal .nut-checkbox { + display: -ms-flexbox; + display: flex; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex: 1; + flex: 1; + margin-right: 20rpx; +} +.nut-checkboxgroup-list { + -ms-flex-positive: 1; + flex-grow: 1; + border-bottom: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + border-top: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + padding: var(--nutui-checkbox-list-padding, 0 0 0 12rpx); + background: var(--nutui-checkbox-list-background-color, #ffffff); + box-sizing: border-box; +} +.nut-checkboxgroup-list .nut-checkbox.nut-checkbox-reverse { + width: auto; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-pack: justify; + justify-content: space-between; +} +.nut-checkbox { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; +} +.nut-checkbox-icon { + color: var(--nutui-color-text-disabled, #c2c4cc); + font-size: var(--nutui-checkbox-icon-font-size, var(--nutui-font-size-icon, 16rpx)); + -ms-flex-negative: 0; + flex-shrink: 0; +} +.nut-checkbox-label { + margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4rpx)); + font-size: var(--nutui-checkbox-label-font-size, var(--nutui-font-size-s, 12rpx)); + color: var(--nutui-checkbox-label-color, var(--nutui-color-title, #1a1a1a)); + -ms-flex-negative: 0; + flex-shrink: 0; +} +.nut-checkbox-reverse { + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} +.nut-checkbox-button { + position: relative; + display: -ms-flexbox; + display: flex; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-align: center; + align-items: center; + min-height: 32rpx; + padding: var(--nutui-checkbox-button-padding, 5rpx 18rpx); + font-size: var(--nutui-checkbox-button-font-size, var(--nutui-font-size-s, 12rpx)); + background: var(--nutui-color-background, #f2f3f5); + border-radius: var(--nutui-checkbox-button-border-radius, 15rpx); + color: var(--nutui-checkbox-label-color, var(--nutui-color-title, #1a1a1a)); + box-sizing: border-box; + border: 1rpx solid var(--nutui-color-background, #f2f3f5); + overflow: hidden; +} +.nut-checkbox-button-icon { + position: absolute; + right: 0; + bottom: 0; + width: 0; + height: 0; + border-top: 10rpx solid transparent; + border-left: 10rpx solid transparent; + border-bottom: 10rpx solid var(--nutui-color-primary, #ff0f23); + border-right: 10rpx solid var(--nutui-color-primary, #ff0f23); + display: -ms-flexbox; + display: flex; + -ms-flex-align: end; + align-items: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.nut-checkbox-button .nut-checkbox-button-icon-checked { + width: 12rpx; + height: 12rpx; + position: absolute; + color: #fff; + right: 0; + bottom: 0; + -ms-transform: translate(-1rpx, -2rpx); + transform: translate(-1rpx, -2rpx); +} +.nut-checkbox-list-item { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: justify; + justify-content: space-between; + padding: var(--nutui-checkbox-list-item-padding, 12rpx 12rpx 12rpx 0); + border-top: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +} +.nut-checkbox-list-item .nut-checkbox-label, +.nut-checkbox-list-item .nut-icon { + -ms-flex: none; + flex: none; +} +[dir='rtl'] .nut-checkbox-button-icon-checked, +.nut-rtl .nut-checkbox-button-icon-checked { + left: auto; + right: 50%; + -ms-transform: translate(3rpx, -3rpx); + transform: translate(3rpx, -3rpx); +} +.nut-cell { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + width: 100%; + line-height: var(--nutui-cell-line-height, 20rpx); + padding: var(--nutui-cell-padding, 13rpx 16rpx); + background-color: var(--nutui-cell-background-color, var(--nutui-color-background-overlay, #ffffff)); + border-radius: var(--nutui-cell-border-radius, 6rpx); + box-shadow: var(--nutui-cell-box-shadow, 0rpx 1rpx 7rpx 0rpx rgb(237, 238, 241)); + font-size: var(--nutui-cell-title-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-cell-title-color, var(--nutui-color-title, #1a1a1a)); + margin-bottom: 10rpx; + box-sizing: border-box; +} +.nut-cell-left { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-align: start; + align-items: flex-start; + -ms-flex: 1; + flex: 1; +} +.nut-cell-extra { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-pack: end; + justify-content: flex-end; + -ms-flex-align: center; + align-items: center; + -ms-flex: 1; + flex: 1; + -ms-flex-negative: 0; + flex-shrink: 0; + min-width: 0; + word-break: break-all; + font-size: var(--nutui-cell-extra-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-cell-extra-color, var(--nutui-color-text, #505259)); +} +.nut-cell-clickable::before { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + background-color: #000; + border: inherit; + border-color: #000; + border-radius: inherit; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + opacity: 0; + content: ' '; +} +.nut-cell-divider { + display: -ms-flexbox; + display: flex; + min-height: 1rpx; + padding-left: var(--nutui-cell-divider-left, 16rpx); + padding-right: var(--nutui-cell-divider-right, 16rpx); +} +.nut-cell-divider-inner { + display: -ms-flexbox; + display: flex; + height: 1rpx; + width: 100%; + border-top: var(--nutui-cell-divider-border-bottom, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +} +.nut-cascader .nut-tabs-titles-item { + -ms-flex: initial; + flex: initial; + min-width: auto; + width: auto; + padding: var(--nutui-cascader-tabs-item-padding, 0 10rpx); + white-space: nowrap; +} +.nut-cascader-item { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + padding: var(--nutui-cascader-item-padding, 10rpx 20rpx); + margin: var(--nutui-cascader-item-margin, 0rpx); + border-bottom: var(--nutui-cascader-item-border-bottom, 0rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + font-size: var(--nutui-cascader-item-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-cascader-item-color, var(--nutui-color-title, #1a1a1a)); + cursor: pointer; +} +.nut-cascader-item-title { + -ms-flex: 1; + flex: 1; +} +.nut-card { + width: 100%; + display: -ms-flexbox; + display: flex; + background-color: inherit; + border-radius: var(--nutui-card-border-radius, 4rpx); +} +.nut-card-left { + width: 120rpx; + height: 120rpx; + -ms-flex-negative: 0; + flex-shrink: 0; +} +.nut-card-right { + -ms-flex: 1; + flex: 1; + padding: 0 10rpx 8rpx; +} +.nut-card-right-price { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + height: 18rpx; + line-height: 18rpx; + margin-top: 9rpx; +} +.nut-card-right-other { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + padding: 5rpx 0 2rpx; +} +.nut-card-right-shop { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-align: center; + align-items: center; +} +.nut-calendarcard-header { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: justify; + justify-content: space-between; + font-weight: 400; +} +.nut-calendarcard-header-left, +.nut-calendarcard-header-right { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + cursor: pointer; + margin: 16rpx; + line-height: 1; +} +.nut-calendarcard-days { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-align: center; + align-items: center; +} +.nut-calendarcard-day { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + width: var(--nutui-calendar-day-width, 14.28%); + height: 48rpx; + cursor: pointer; + margin-bottom: 4rpx; + text-align: center; +} +.nut-calendarcard-day-top, +.nut-calendarcard-day-bottom { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + height: 12rpx; + font-size: 12rpx; + line-height: 12rpx; +} +[dir='rtl'] .nut-calendarcard-header-left .nut-icon-ArrowLeft, +[dir='rtl'] .nut-calendarcard-header-left .nut-icon-ArrowRight, +[dir='rtl'] .nut-calendarcard-header-left .h5-svg, +[dir='rtl'] .nut-calendarcard-header-right .nut-icon-ArrowLeft, +[dir='rtl'] .nut-calendarcard-header-right .nut-icon-ArrowRight, +[dir='rtl'] .nut-calendarcard-header-right .h5-svg, +.nut-rtl .nut-calendarcard-header-left .nut-icon-ArrowLeft, +.nut-rtl .nut-calendarcard-header-left .nut-icon-ArrowRight, +.nut-rtl .nut-calendarcard-header-left .h5-svg, +.nut-rtl .nut-calendarcard-header-right .nut-icon-ArrowLeft, +.nut-rtl .nut-calendarcard-header-right .nut-icon-ArrowRight, +.nut-rtl .nut-calendarcard-header-right .h5-svg { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.nut-calendar { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex: 1; + flex: 1; + font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15rpx)); + background-color: var(--nutui-color-background-overlay, #ffffff); + color: var(--nutui-color-title, #1a1a1a); + overflow: hidden; + height: 100%; +} +.nut-calendar-header { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + text-align: center; +} +.nut-calendar-weeks { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: distribute; + justify-content: space-around; + height: 36rpx; + border-radius: 0 0 12rpx 12rpx; + box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05882); +} +.nut-calendar-content { + -ms-flex: 1; + flex: 1; + width: 100%; + display: block; + overflow-y: auto; +} +.nut-calendar-month { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + text-align: center; +} +.nut-calendar-day { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + float: left; + width: var(--nutui-calendar-day-width, 14.28%); + height: var(--nutui-calendar-day-height, 60rpx); + font-weight: var(--nutui-calendar-day-font-weight, var(--nutui-font-weight-bold, 600)); + margin-bottom: 4rpx; +} +.nut-calendar-footer { + display: -ms-flexbox; + display: flex; + width: 100%; + -ms-flex-direction: column; + flex-direction: column; + background-color: #fff; +} +.nut-calendar-footer .calendar-confirm-btn { + height: 40rpx; + line-height: 40rpx; + margin: 6rpx 16rpx; + text-align: center; + border-radius: var(--nutui-radius-base, 8rpx); + background: -webkit-linear-gradient(left, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); + background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); + color: #fff; + font-weight: var(--nutui-font-weight-bold, 600); +} +.nut-button { + position: relative; + display: -ms-flexbox; + display: flex; + display: inline-block; + width: 80rpx; + width: auto; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-negative: 0; + flex-shrink: 0; + box-sizing: border-box; + margin: 0; + padding: 0; + height: var(--nutui-button-default-height, 32rpx); + font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14rpx)); + font-weight: var(--nutui-font-weight, 400); + text-align: center; + cursor: pointer; + transition: opacity 0.2s; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: manipulation; + touch-action: manipulation; + color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a)); + background: var(--nutui-button-default-background-color, transparent); + border-width: var(--nutui-button-border-width, 0.5rpx); +} +.nut-button-children { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + background: transparent; +} +.nut-button::before { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); + border: inherit; + border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); + border-radius: inherit; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + opacity: 0; + content: ' '; + pointer-events: none; + pointer-events: auto; +} +.nut-button-wrap { + height: 100%; + width: 100%; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; + background: initial; +} +.nut-button-primary-solid { + background: -webkit-linear-gradient(left, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); + background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); + color: var(--nutui-button-primary-color, #ffffff); + border-color: transparent; + font-weight: var(--nutui-font-weight-bold, 600); +} +[dir='rtl'] .nut-button::before, +.nut-rtl .nut-button::before { + left: auto; + right: 50%; + -ms-transform: translate(50%, -50%); + transform: translate(50%, -50%); +} +.nut-barrage .barrage-item { + display: block; + position: absolute; + right: 0; + padding: 4rpx 16rpx; + border-radius: 16rpx; + font-size: var(--nutui-font-size-s, 12rpx); + text-align: center; + white-space: pre; + -ms-transform: translate(100%); + transform: translate(100%); + background: -webkit-linear-gradient(left, var(--nutui-black-3), var(--nutui-black-1)); + background: linear-gradient(to right, var(--nutui-black-3), var(--nutui-black-1)); + box-sizing: border-box; +} +[dir='rtl'] .nut-barrage .barrage-item, +.nut-rtl .nut-barrage .barrage-item { + -ms-transform: translate(-100%); + transform: translate(-100%); + background: -webkit-linear-gradient(right, var(--nutui-black-3), var(--nutui-black-1)); + background: linear-gradient(to left, var(--nutui-black-3), var(--nutui-black-1)); +} +.nut-badge { + position: relative; + display: -ms-flexbox; + display: flex; + display: -ms-inline-flexbox; + display: inline-flex; + box-sizing: content-box; + vertical-align: middle; + width: auto; +} +.nut-badge-icon { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23)); + padding: var(--nutui-badge-icon-padding, 2rpx); + text-align: center; + z-index: var(--nutui-badge-z-index, 1); +} +.nut-badge-sup::after, +.nut-badge-icon::after { + content: ''; + position: absolute; + top: -50%; + bottom: -50%; + left: -50%; + right: -50%; + -ms-transform: scale(0.5); + transform: scale(0.5); + border: var(--nutui-badge-border, 1rpx solid #ffffff); + border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14rpx)); +} +.nut-badge-sup { + display: -ms-flexbox; + display: flex; + display: -ms-inline-flexbox; + display: inline-flex; + text-align: center; + min-width: var(--nutui-badge-min-width, 6rpx); + padding: var(--nutui-badge-padding, 1rpx 4rpx); + box-sizing: border-box; + color: var(--nutui-badge-color, #ffffff); + font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9rpx)); + line-height: 12rpx; + white-space: nowrap; + font-weight: 400; + vertical-align: middle; + background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23)); + z-index: 1; +} +.nut-badge-content { + position: absolute; + -ms-transform: var(--nutui-badge-content-transform, translate(50%, -50%)); + transform: var(--nutui-badge-content-transform, translate(50%, -50%)); +} +.nut-backtop-show { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + width: var(--nutui-hoverbutton-item-size, 40rpx); + height: var(--nutui-hoverbutton-item-size, 40rpx); + transition: all 0.2s ease-in-out; +} +.nut-backtop-show .nut-hoverbutton-item-container { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; +} +.nut-avatar-cropper { + position: relative; + display: -ms-flexbox; + display: flex; } -[dir='rtl'] .nut-col-offset-1, -.nut-rtl .nut-col-offset-1 { - margin-left: 0; - margin-right: 4.166666666%; +.nut-avatar-cropper-edit-text { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.30196); + z-index: 1; + color: #fff; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; } -.nut-col-1 { - width: 4.166666666%; +.nut-avatar-cropper-popup-toolbar-flex { + width: 100%; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: justify; + justify-content: space-between; } -.nut-col-offset-2 { - margin-left: 8.333333332%; +.nut-avatar-cropper-popup-toolbar-item { + color: #fff; + padding: 15rpx; + cursor: pointer; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; } -[dir='rtl'] .nut-col-offset-2, -.nut-rtl .nut-col-offset-2 { - margin-left: 0; - margin-right: 8.333333332%; +.nut-avatar-cropper-popup-highlight .highlight { + position: absolute; + left: 50%; + top: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + background-color: transparent; + box-shadow: 0 0 1000rpx 1000rpx rgba(0, 0, 0, 0.6); } -.nut-col-2 { - width: 8.333333332%; +[dir='rtl'] .nut-avatar-cropper-popup-highlight .highlight, +.nut-rtl .nut-avatar-cropper-popup-highlight .highlight { + left: auto; + right: 50%; + -ms-transform: translate(50%, -50%); + transform: translate(50%, -50%); } -.nut-col-offset-3 { - margin-left: 12.499999998%; +.nut-avatar-group { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } -[dir='rtl'] .nut-col-offset-3, -.nut-rtl .nut-col-offset-3 { - margin-left: 0; - margin-right: 12.499999998%; +.nut-avatar { + position: relative; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + width: var(--nutui-avatar-normal-width, 40rpx); + height: var(--nutui-avatar-normal-height, 40rpx); } -.nut-col-3 { - width: 12.499999998%; +.nut-avatar-img { + width: 100%; + height: 100%; + -ms-flex-negative: 0; + flex-shrink: 0; + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center center; } -.nut-col-offset-4 { - margin-left: 16.666666664%; +.nut-avatar-text { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; } -[dir='rtl'] .nut-col-offset-4, -.nut-rtl .nut-col-offset-4 { - margin-left: 0; - margin-right: 16.666666664%; +.nut-audio-icon-box { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + width: 30rpx; + height: 30rpx; + background: #fff; + border-radius: 50%; + box-shadow: 0 0 8rpx var(--nutui-color-text-disabled, #c2c4cc); } -.nut-col-4 { - width: 16.666666664%; +.nut-audio-icon .nut-audio-icon-stop::after { + position: absolute; + left: 50%; + top: 50%; + -ms-transform: translate(-50%); + transform: translate(-50%); + content: ''; + height: 2rpx; + width: 30rpx; + background: var(--nutui-color-text-disabled, #c2c4cc); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -ms-transform-origin: 8rpx -18rpx; + transform-origin: 8rpx -18rpx; } -.nut-col-offset-5 { - margin-left: 20.83333333%; +.nut-audio-progress { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + width: 100%; + margin: 0 auto; + padding: 10rpx 0; } -[dir='rtl'] .nut-col-offset-5, -.nut-rtl .nut-col-offset-5 { - margin-left: 0; - margin-right: 20.83333333%; +.nut-audio-progress-bar-wrapper { + -ms-flex: 1; + flex: 1; + margin: 0 10rpx; } -.nut-col-5 { - width: 20.83333333%; +.nut-audio .nut-audio-none-container .nut-voice { + border: 1rpx solid var(--nutui-color-title, #1a1a1a); + -ms-flex-align: center; + align-items: center; } -.nut-col-offset-6 { - margin-left: 24.999999996%; +[dir='rtl'] .nut-audio-icon .nut-audio-icon-stop::after, +.nut-rtl .nut-audio-icon .nut-audio-icon-stop::after { + left: auto; + right: 50%; + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + -ms-transform-origin: 20rpx -18rpx; + transform-origin: 20rpx -18rpx; } -[dir='rtl'] .nut-col-offset-6, -.nut-rtl .nut-col-offset-6 { - margin-left: 0; - margin-right: 24.999999996%; +.nut-animate .nut-animate-twinkle::after, +.nut-animate .nut-animate-twinkle::before { + width: 60rpx; + height: 60rpx; + content: ''; + box-sizing: border-box; + border: 4rpx solid rgba(255, 255, 255, 0.6); + position: absolute; + border-radius: 30rpx; + right: 50%; + margin-top: -30rpx; + margin-right: -30rpx; + z-index: 1; + -ms-transform: scale(0); + transform: scale(0); + animation: twinkle 2s ease-out infinite; } -.nut-col-6 { - width: 24.999999996%; +.nut-animate .nut-animate-flicker::after { + width: 100rpx; + height: 60rpx; + position: absolute; + left: 0; + top: 0; + opacity: 0.73; + content: ''; + background-image: -webkit-linear-gradient(344deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%); + background-image: linear-gradient(106deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%); + animation: flicker 1.5s linear infinite; + -ms-transform: skew(-20deg); + transform: skew(-20deg); + filter: blur(3rpx); } -.nut-col-offset-7 { - margin-left: 29.166666662%; +.nut-animate .nut-animate-jump { + -ms-transform-origin: center center; + transform-origin: center center; + animation: jump 0.7s linear; } -[dir='rtl'] .nut-col-offset-7, -.nut-rtl .nut-col-offset-7 { - margin-left: 0; - margin-right: 29.166666662%; +.nut-address-exist-item { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + margin-bottom: 20rpx; + font-size: var(--nutui-font-size-s, 12rpx); + line-height: var(--nutui-font-size-base, 14rpx); + color: var(--nutui-color-title, #1a1a1a); } -.nut-col-7 { - width: 29.166666662%; +.nut-address-footer-btn { + width: 90%; + height: 42rpx; + line-height: 42rpx; + margin: auto; + text-align: center; + background: -webkit-linear-gradient(left, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); + background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); + border-radius: 21rpx; + font-size: 15rpx; + color: #fff; } -.nut-col-offset-8 { - margin-left: 33.333333328%; +.nut-address-hotlist { + padding: 0 16rpx; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-align: start; + align-items: flex-start; } -[dir='rtl'] .nut-col-offset-8, -.nut-rtl .nut-col-offset-8 { - margin-left: 0; - margin-right: 33.333333328%; +.nut-address-hotlist-item { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + width: 63rpx; + height: 28rpx; + font-size: 12rpx; + border-radius: 4rpx; + margin-bottom: 7rpx; + margin-right: 7rpx; + background-color: var(--nutui-color-background-sunken, #f7f8fc); + color: var(--nutui-color-title, #1a1a1a); } -.nut-col-8 { - width: 33.333333328%; +.nut-address-selected { + width: 100%; + height: 60rpx; + padding: 0 16rpx; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + border-bottom: 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)); } -.nut-col-offset-9 { - margin-left: 37.499999994%; +.nut-address-elevator .nut-elevator-bars-inner-item { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + width: 16rpx; + height: 16rpx; + font-size: 10rpx; + border-radius: 16rpx; + margin-bottom: 2rpx; + color: var(--nutui-color-text-help, #888b94); } -[dir='rtl'] .nut-col-offset-9, -.nut-rtl .nut-col-offset-9 { - margin-left: 0; - margin-right: 37.499999994%; + /* tokens: template-corpus-apply <= src/pages/index/index.tsx */ +.template-corpus-apply { + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-align: center; + align-items: center; + gap: calc(var(--spacing) * 2); + border-radius: 20rpx; + --tw-gradient-position: to right; + background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); + background-image: linear-gradient(var(--tw-gradient-stops)); + --tw-gradient-from: #9e58e9; + --tw-gradient-to: var(--color-blue-500); + --tw-gradient-stops: + var(--tw-gradient-via-stops, var(--tw-gradient-position)), var(--tw-gradient-from) var(--tw-gradient-from-position, ), var(--tw-gradient-to) var(--tw-gradient-to-position, ); + padding-left: 18rpx; + padding-right: 18rpx; + padding-top: 10rpx; + padding-bottom: 10rpx; + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + font-size: 26rpx; + color: var(--color-white); } -.nut-col-9 { - width: 37.499999994%; +.nut-watermark { + position: absolute; + z-index: var(--nutui-watermark-z-index, 1200); + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + background-repeat: repeat; } -.nut-col-offset-10 { - margin-left: 41.66666666%; +.nut-watermark-full-page { + position: fixed; } -[dir='rtl'] .nut-col-offset-10, -.nut-rtl .nut-col-offset-10 { - margin-left: 0; - margin-right: 41.66666666%; +.nut-horizontal-items { + float: left; } -.nut-col-10 { - width: 41.66666666%; +.nut-horizontal-items .h5-li { + display: block; + float: left; + color: var(--nutui-color-title, #1a1a1a); + background: var(--nutui-color-background-overlay, #ffffff); + padding: 10rpx; + margin-right: 20rpx; } -.nut-col-offset-11 { - margin-left: 45.833333326%; +.nut-horizontal-items::after { + content: ''; + display: block; + visibility: hidden; + clear: both; } -[dir='rtl'] .nut-col-offset-11, -.nut-rtl .nut-col-offset-11 { - margin-left: 0; - margin-right: 45.833333326%; +.nut-vertical-items .h5-li { + display: block; + color: var(--nutui-color-title, #1a1a1a); + background: var(--nutui-color-background-overlay, #ffffff); + border-radius: 7rpx; + box-shadow: 0 1rpx 6rpx #edeef1; + margin-top: 20rpx; + padding: 14rpx 15rpx; + font-size: 13rpx; + line-height: 18rpx; + font-family: PingFangSC; + font-weight: 500; } -.nut-col-11 { - width: 45.833333326%; +.nut-virtualList-box { + overflow: auto; } -.nut-col-offset-12 { - margin-left: 49.999999992%; +.nut-virtuallist { + width: 100%; + overflow: scroll; + position: relative; + -webkit-overflow-scrolling: touch; } -[dir='rtl'] .nut-col-offset-12, -.nut-rtl .nut-col-offset-12 { - margin-left: 0; - margin-right: 49.999999992%; +.nut-virtuallist-phantom { + position: absolute; + left: 0; + top: 0; + right: 0; + z-index: -1; } -.nut-col-12 { - width: 49.999999992%; +.nut-virtuallist-container { + position: absolute; + left: 0; + right: 0; + top: 0; } -.nut-col-offset-13 { - margin-left: 54.166666658%; +.nut-virtuallist-item { + overflow: hidden; + margin: var(--nutui-list-item-margin, 0 0 10rpx 0); } -[dir='rtl'] .nut-col-offset-13, -.nut-rtl .nut-col-offset-13 { - margin-left: 0; - margin-right: 54.166666658%; +[dir='rtl'] .nut-horizontal-items, +.nut-rtl .nut-horizontal-items { + float: right; } -.nut-col-13 { - width: 54.166666658%; +[dir='rtl'] .nut-horizontal-items .h5-li, +.nut-rtl .nut-horizontal-items .h5-li { + float: right; + margin-right: 0; + margin-left: 20rpx; } -.nut-col-offset-14 { - margin-left: 58.333333324%; +.nut-uploader { + position: relative; + display: flex; + flex-wrap: wrap; } -[dir='rtl'] .nut-col-offset-14, -.nut-rtl .nut-col-offset-14 { - margin-left: 0; - margin-right: 58.333333324%; +.nut-uploader-slot { + position: relative; } -.nut-col-14 { - width: 58.333333324%; +.nut-uploader-upload { + position: relative; + display: flex; + align-items: center; + justify-content: center; + background: var(--nutui-uploader-background, var(--nutui-color-background, #f2f3f5)); + width: var(--nutui-uploader-image-width, 100rpx); + height: var(--nutui-uploader-image-height, 100rpx); + border: var(--nutui-uploader-image-border, 0rpx); + border-radius: var(--nutui-uploader-image-border-radius, 4rpx); } -.nut-col-offset-15 { - margin-left: 62.49999999%; +.nut-uploader-icon { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: var(--nutui-uploader-image-color, var(--nutui-color-text-help, #888b94)); } -[dir='rtl'] .nut-col-offset-15, -.nut-rtl .nut-col-offset-15 { - margin-left: 0; - margin-right: 62.49999999%; +.nut-uploader-icon .h5-i, +.nut-uploader-icon .nut-icon { + color: var(--nutui-uploader-image-color, var(--nutui-color-text-help, #888b94)); + margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); } -.nut-col-15 { - width: 62.49999999%; +.nut-uploader-icon-tip { + font-size: var(--nutui-uploader-image-icon-tip-font-size, 12rpx); } -.nut-col-offset-16 { - margin-left: 66.666666656%; +.nut-uploader-input { + position: absolute !important; + top: 0; + left: 0; + width: 100% !important; + height: 100% !important; + overflow: hidden; + cursor: pointer; + opacity: 0; } -[dir='rtl'] .nut-col-offset-16, -.nut-rtl .nut-col-offset-16 { - margin-left: 0; - margin-right: 66.666666656%; +.nut-uploader-upload-disabled { + background: var(--nutui-uploader-background-disabled, var(--nutui-color-background, #f2f3f5)); + color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled, #c2c4cc)); } -.nut-col-16 { - width: 66.666666656%; +.nut-uploader-upload-disabled .nut-uploader-icon .h5-i, +.nut-uploader-upload-disabled .nut-uploader-icon .nut-icon { + color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled, #c2c4cc)); + margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); } -.nut-col-offset-17 { - margin-left: 70.833333322%; +.nut-uploader-preview { + position: relative; + margin-right: var(--nutui-uploader-preview-margin-right, 10rpx); + margin-bottom: var(--nutui-uploader-preview-margin-bottom, 10rpx); + border-radius: var(--nutui-uploader-image-border-radius, 4rpx); + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); } -[dir='rtl'] .nut-col-offset-17, -.nut-rtl .nut-col-offset-17 { - margin-left: 0; - margin-right: 70.833333322%; +.nut-uploader-preview-progress { + position: absolute; + left: 0; + top: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + background: var(--nutui-uploader-preview-progress-background, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); + border-radius: var(--nutui-uploader-image-border-radius, 4rpx); + z-index: 10; } -.nut-col-17 { - width: 70.833333322%; +.nut-uploader-preview-progress .h5-i { + margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); } -.nut-col-offset-18 { - margin-left: 74.999999988%; +.nut-uploader-preview-progress-msg { + color: var(--nutui-color-text-help, #888b94); + font-size: 12rpx; } -[dir='rtl'] .nut-col-offset-18, -.nut-rtl .nut-col-offset-18 { - margin-left: 0; - margin-right: 74.999999988%; +.nut-uploader-preview.list { + width: 100%; + margin-right: 0; + margin-bottom: 0; + margin-top: 10rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.01176); } -.nut-col-18 { - width: 74.999999988%; +.nut-uploader-preview-list { + width: 100%; + height: 32rpx; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 10rpx; + background-color: var(--nutui-color-background-sunken, #f7f8fc); } -.nut-col-offset-19 { - margin-left: 79.166666654%; +.nut-uploader-preview-list .nut-uploader-preview-img-file-name { + display: flex; + align-items: center; + -webkit-line-clamp: 1; + padding: 2rpx; + height: 24rpx; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -[dir='rtl'] .nut-col-offset-19, -.nut-rtl .nut-col-offset-19 { - margin-left: 0; - margin-right: 79.166666654%; +.nut-uploader-preview-list .nut-progress { + position: absolute; + left: 0; + right: 0; + bottom: 0; } -.nut-col-19 { - width: 79.166666654%; +.nut-uploader-preview-list .nut-progress .nut-progress-outer { + height: 2rpx !important; } -.nut-col-offset-20 { - margin-left: 83.33333332%; +.nut-uploader-preview .close { + position: absolute; + right: var(--nutui-uploader-preview-close-right, 0rpx); + top: var(--nutui-uploader-preview-close-top, 0rpx); + transform: translate(50%, -50%); + z-index: 1; } -[dir='rtl'] .nut-col-offset-20, -.nut-rtl .nut-col-offset-20 { - margin-left: 0; - margin-right: 83.33333332%; +.nut-uploader-preview-img { + position: relative; + width: var(--nutui-uploader-image-width, 100rpx); + height: var(--nutui-uploader-image-height, 100rpx); + border-radius: var(--nutui-uploader-image-border-radius, 4rpx); + overflow: hidden; } -.nut-col-20 { - width: 83.33333332%; +.nut-uploader-preview-img .h5-i { + color: var(--nutui-color-title, #1a1a1a); } -.nut-col-offset-21 { - margin-left: 87.499999986%; +.nut-uploader-preview-img .tips { + position: absolute; + bottom: 0; + left: 0; + font-size: 12rpx; + color: #fff; + text-align: center; + box-sizing: border-box; + height: var(--nutui-uploader-preview-tips-height, 24rpx); + line-height: var(--nutui-uploader-preview-tips-height, 24rpx); + border-radius: var(--nutui-uploader-image-border-radius, 4rpx); + border-top-left-radius: 0; + border-top-right-radius: 0; + padding: var(--nutui-uploader-preview-tips-padding, 0 5rpx); + background: var(--nutui-uploader-preview-tips-background, var(--nutui-black-7)); + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -[dir='rtl'] .nut-col-offset-21, -.nut-rtl .nut-col-offset-21 { - margin-left: 0; - margin-right: 87.499999986%; +.nut-uploader-preview-img-c { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + position: static; + position: initial; + border-radius: var(--nutui-uploader-image-border-radius, 4rpx); } -.nut-col-21 { - width: 87.499999986%; +.nut-uploader-preview-img-file { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s; } -.nut-col-offset-22 { - margin-left: 91.666666652%; +.nut-uploader-preview-img-file-name { + display: flex; + width: 90%; + font-size: 12rpx; + color: var(--nutui-color-text, #505259); + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + word-break: break-all; } -[dir='rtl'] .nut-col-offset-22, -.nut-rtl .nut-col-offset-22 { - margin-left: 0; - margin-right: 91.666666652%; +.nut-uploader-preview-img-file-name.error { + color: red !important; } -.nut-col-22 { - width: 91.666666652%; +.nut-uploader-preview-img-file-name.success { + color: #1890ff !important; } -.nut-col-offset-23 { - margin-left: 95.833333318%; +.nut-uploader-preview-img-file-name .nut-icon-Link { + flex-shrink: 0; } -[dir='rtl'] .nut-col-offset-23, -.nut-rtl .nut-col-offset-23 { - margin-left: 0; - margin-right: 95.833333318%; +[dir='rtl'] .nut-uploader-input, +.nut-rtl .nut-uploader-input { + left: auto; + right: 0; } -.nut-col-23 { - width: 95.833333318%; +[dir='rtl'] .nut-uploader-preview, +.nut-rtl .nut-uploader-preview { + margin-right: 0; + margin-left: var(--nutui-uploader-preview-margin-right, 10rpx); } -.nut-col-offset-24 { - margin-left: 99.999999984%; +[dir='rtl'] .nut-uploader-preview-progress, +.nut-rtl .nut-uploader-preview-progress { + left: auto; + right: 0; } -[dir='rtl'] .nut-col-offset-24, -.nut-rtl .nut-col-offset-24 { +[dir='rtl'] .nut-uploader-preview.list, +.nut-rtl .nut-uploader-preview.list { + margin-right: 0; margin-left: 0; - margin-right: 99.999999984%; } -.nut-col-24 { - width: 99.999999984%; +[dir='rtl'] .nut-uploader-preview .close, +.nut-rtl .nut-uploader-preview .close { + right: auto; + left: var(--nutui-uploader-preview-close-right, 0rpx); + transform: translate(-50%, -50%); } -.nut-circleprogress { - position: relative; +[dir='rtl'] .nut-uploader-preview-img .tips, +.nut-rtl .nut-uploader-preview-img .tips { + left: auto; + right: 0; } -.nut-circleprogress-hover { - stroke: var(--nutui-circleprogress-primary-color, var(--nutui-color-primary, #ff0f23)); - transition: - stroke-dasharray 0.2s ease-in-out 0s, - stroke 0.2s ease 0s; +.nut-video { + width: 100%; + height: 100%; + position: relative; + display: flex; } -.nut-circleprogress-path { - stroke: var(--nutui-circleprogress-path-color, var(--nutui-color-background, #f2f3f5)); +.nut-video-player { + width: 100%; + background: #000; } -.nut-circleprogress-text { - position: absolute; - top: 50%; - left: 0; - box-sizing: border-box; +.nut-video .h5-video { width: 100%; - -ms-transform: translateY(-50%); - transform: translateY(-50%); - text-align: center; - color: var(--nutui-circleprogress-text-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-circleprogress-text-size, var(--nutui-font-size-l, 15rpx)); + height: 100%; + object-fit: fill; } -[dir='rtl'] .nut-circleprogress-text, -.nut-rtl .nut-circleprogress-text { - left: auto; - right: 0; +.nut-tour-mask { + position: fixed; + box-shadow: 0 0 0 150vh var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); + border-radius: var(--nutui-tour-mask-border-radius, 10rpx); + z-index: 999; } -.nut-collapse-item { - position: relative; +.nut-tour-mask-none { + box-shadow: none; } -.nut-collapse-item::after { - position: absolute; - box-sizing: border-box; - content: ' '; - pointer-events: none; - right: 16rpx; - left: 16rpx; - bottom: 0; - border-bottom: var(--nutui-collapse-item-border-bottom, none); - -ms-transform: scaleY(0.5); - transform: scaleY(0.5); +.nut-tour-mask-hidden { + opacity: 0; } -.nut-collapse-item:last-child::after { - display: none; +.nut-tour-content { + display: block; + padding: var(--nutui-tour-content-padding, 10rpx 12rpx); + min-width: var(--nutui-tour-content-min-width, 200rpx); + box-sizing: content-box; } -.nut-collapse-item-header { - position: relative; - display: -ms-flexbox; - display: flex; - width: 100%; - overflow: hidden; - padding: var(--nutui-collapse-item-padding, 13rpx 26rpx); - font-size: var(--nutui-collapse-item-font-size, var(--nutui-font-size-base, 14rpx)); - line-height: var(--nutui-collapse-item-line-height, 24rpx); - background-color: var(--nutui-color-background-overlay, #ffffff); - box-sizing: border-box; +.nut-tour-content-top { + display: block; + text-align: right; } -.nut-collapse-item-header::after { - position: absolute; - box-sizing: border-box; - content: ' '; - pointer-events: none; - right: 16rpx; - left: 16rpx; - bottom: 0; - border-bottom: var(--nutui-collapse-item-header-border-bottom, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - -ms-transform: scale(1); - transform: scale(1); - -ms-transform: scaleY(0.5); - transform: scaleY(0.5); +.nut-tour-content-top-close { + --nut-icon-width: 10rpx; + --nut-icon-height: 10rpx; } -.nut-collapse-item-title { - color: var(--nutui-collapse-item-color, var(--nutui-color-title, #1a1a1a)); - display: -ms-flexbox; +.nut-tour-content-inner { + margin: var(--nutui-tour-content-inner-margin, 10rpx 0rpx); + font-size: var(--nutui-tour-content-inner-font-size, 14rpx); + white-space: nowrap; +} +.nut-tour-content-bottom { + margin-top: var(--nutui-tour-content-bottom-margin-top, 10rpx); display: flex; - -ms-flex-align: center; - align-items: center; + justify-content: space-between; } -.nut-collapse-item-extra { - -ms-flex: 1; - flex: 1; - display: -ms-flexbox; +.nut-tour-content-bottom-operate { display: flex; - -ms-flex-pack: end; justify-content: flex-end; - padding: 0 20rpx; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: var(--nutui-collapse-item-extra-color, var(--nutui-color-text, #505259)); } -.nut-collapse-item-icon-box { - display: -ms-flexbox; - display: flex; - width: 24rpx; - position: relative; +.nut-tour-content-bottom-operate-btn { + display: inline-block; + border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); + margin-left: var(--nutui-tour-content-bottom-btn-margin-left, 4rpx); + padding: var(--nutui-tour-content-bottom-btn-padding, 2rpx 4rpx); + font-size: var(--nutui-tour-content-bottom-btn-font-size, 12rpx); + border-radius: var(--nutui-tour-content-bottom-btn-border-radius, 4rpx); color: var(--nutui-color-text, #505259); + cursor: pointer; } -.nut-collapse-item-icon { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - position: absolute; - top: 50%; - left: 5rpx; - -ms-transform: translateY(-50%); - transform: translateY(-50%); - -ms-transform-origin: center; - transform-origin: center; - transition: transform 0.3s; +.nut-tour-content-bottom-operate-btn.active { + color: #fff; + border: 0; + background: var(--nutui-color-primary, #ff0f23); } -.nut-collapse-item-header-disabled, -.nut-collapse-item-header-disabled .nut-collapse-item-title, -.nut-collapse-item-header-disabled .nut-collapse-item-icon { - color: var(--nutui-collapse-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc)); +.nut-tour-content-tile .nut-tour-content-inner { + margin: 0; } -.nut-collapse-item-content-wrapper { - width: 100%; - position: relative; - box-sizing: border-box; - overflow: hidden; +.nut-tour-masked { + position: fixed; + width: 100vh; + height: 100vh; + z-index: 1000; + top: 0; + left: 0; + background: transparent; } -.nut-collapse-item-content-wrapper-tran { - transition: all 0.3s linear; +[dir='rtl'] .nut-tour-content-bottom-operate-btn, +.nut-rtl .nut-tour-content-bottom-operate-btn { + margin-left: 0; + margin-right: var(--nutui-tour-content-bottom-btn-margin-left, 4rpx); } -.nut-collapse-item-content { - display: block; - position: absolute; - height: auto; - width: 100%; - box-sizing: border-box; - color: var(--nutui-collapse-wrapper-content-color, var(--nutui-color-text, #505259)); - font-size: var(--nutui-collapse-wrapper-content-font-size, var(--nutui-font-size-base, 14rpx)); - line-height: var(--nutui-collapse-wrapper-content-line-height, 1.5); - background-color: var(--nutui-collapse-wrapper-content-background-color, var(--nutui-color-background-overlay, #ffffff)); +[dir='rtl'] .nut-tour-masked, +.nut-rtl .nut-tour-masked { + left: auto; + right: 0; } -.nut-collapse-item-content-text { - color: var(--nutui-collapse-wrapper-content-color, var(--nutui-color-text, #505259)); - padding: var(--nutui-collapse-wrapper-content-padding, 12rpx 26rpx); +.nut-trendarrow { + display: flex; + flex-direction: row; + align-items: center; + color: var(--nutui-color-title, #1a1a1a); + font-size: var(--nutui-trendarrow-font-size, 14rpx); } -[dir='rtl'] .nut-collapse-item-icon, -.nut-rtl .nut-collapse-item-icon { - left: auto; - right: 5rpx; +.nut-trendarrow-icon-before { + margin-right: var(--nutui-trendarrow-icon-margin, 4rpx); } -.nut-checkboxgroup .nut-checkbox-button { - background-color: var(--nutui-color-background, #f2f3f5); +.nut-trendarrow-icon-after { + margin-left: var(--nutui-trendarrow-icon-margin, 4rpx); } -.nut-checkboxgroup-vertical { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; +.nut-trendarrow-rate { + vertical-align: middle; + display: inline; } -.nut-checkboxgroup-vertical .nut-checkbox { - margin-bottom: 5rpx; +.nut-trendarrow .nut-icon { + vertical-align: middle; } -.nut-checkboxgroup-vertical .nut-checkbox.nut-checkbox-reverse { - width: 100%; - -ms-flex-pack: justify; - justify-content: space-between; +[dir='rtl'] .nut-trendarrow-icon-before, +.nut-rtl .nut-trendarrow-icon-before { + margin-right: 0; + margin-left: var(--nutui-trendarrow-icon-margin, 4rpx); } -.nut-checkboxgroup-vertical .nut-checkbox-button-active { - border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); +[dir='rtl'] .nut-trendarrow-icon-after, +.nut-rtl .nut-trendarrow-icon-after { + margin-left: 0; + margin-right: var(--nutui-trendarrow-icon-margin, 4rpx); } -.nut-checkboxgroup-horizontal { - display: -ms-flexbox; +@keyframes rotation { + 0% { + } + to { + } +} +.nut-toast { + position: fixed; + left: 0; + top: 0; display: flex; - -ms-flex-direction: row; flex-direction: row; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1300; } -.nut-checkboxgroup-horizontal .nut-checkbox { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex: 1; - flex: 1; - margin-right: 20rpx; +.nut-toast-overlay-default { + --nutui-overlay-bg-color: rgba(0, 0, 0, 0); } -.nut-checkboxgroup-horizontal .nut-checkbox-button-active { - border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); +.nut-toast-overlay-default-taro { + background-color: rgba(0, 0, 0, 0); + --nutui-overlay-bg-color: rgba(0, 0, 0, 0); } -.nut-checkboxgroup-list { - -ms-flex-positive: 1; - flex-grow: 1; - border-bottom: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - border-top: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - padding: var(--nutui-checkbox-list-padding, 0 0 0 12rpx); - background: var(--nutui-checkbox-list-background-color, #ffffff); +.nut-toast-inner { + position: absolute; + top: var(--nutui-toast-inner-top, 50%); + transform: translateY(-50%); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-width: 96rpx; + max-width: 60%; box-sizing: border-box; + font-size: var(--nutui-toast-text-font-size, 14rpx); + text-align: var(--nutui-toast-inner-text-align, center); + padding: var(--nutui-toast-inner-padding, 13rpx 16rpx); + word-break: break-all; + background: var(--nutui-toast-inner-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); + border-radius: var(--nutui-toast-inner-border-radius, var(--nutui-radius-xl, 12rpx)); + color: var(--nutui-toast-font-color, #ffffff); } -.nut-checkboxgroup-list .nut-checkbox { - margin-bottom: 5rpx; +.nut-toast-inner-descrption { + max-width: 68.2%; } -.nut-checkboxgroup-list .nut-checkbox.nut-checkbox-reverse { - width: auto; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-pack: justify; - justify-content: space-between; +.nut-toast-inner-normal { + word-break: normal; + word-wrap: normal; } -.nut-checkboxgroup-list .nut-checkbox-list-item:first-child { - border-top: none; +.nut-toast-inner-break-word { + word-break: normal; + word-wrap: break-word; +} +.nut-toast-inner-small { + font-size: var(--nutui-font-size-s, 12rpx); +} +.nut-toast-inner-large { + font-size: var(--nutui-font-size-l, 15rpx); +} +.nut-toast-center { + top: var(--nutui-toast-inner-top, 48%); +} +.nut-toast-bottom { + top: var(--nutui-toast-inner-top, 80%); +} +.nut-toast-top { + top: var(--nutui-toast-inner-top, 20%); +} +.nut-toast-text { + color: #fff; + text-align: var(--nutui-toast-inner-text-align, center); + line-height: normal; + line-height: 20rpx; + height: auto; } -[dir='rtl'] .nut-checkboxgroup .nut-checkbox-label, -.nut-rtl .nut-checkboxgroup .nut-checkbox-label, -[dir='rtl'] .nut-checkboxgroup-vertical .nut-checkbox-label, -.nut-rtl .nut-checkboxgroup-vertical .nut-checkbox-label { - margin-right: 5rpx; +.nut-toast-title { + color: #fff; + font-size: var(--nutui-toast-title-font-size, 16rpx); + font-weight: 600; + text-align: var(--nutui-toast-inner-text-align, center); + line-height: normal; + line-height: 22rpx; } -[dir='rtl'] .nut-checkboxgroup-horizontal .nut-checkbox, -.nut-rtl .nut-checkboxgroup-horizontal .nut-checkbox { - margin-right: 0; - margin-left: 20rpx; +.nut-toast .nut-icon { + width: 24rpx; + height: 24rpx; + color: #fff; } -.nut-checkbox { - display: -ms-flexbox; +.nut-toast-icon-wrapper { + width: 100%; display: flex; - -ms-flex-align: center; align-items: center; + justify-content: center; + margin: 3rpx 0 5rpx; + color: #fff; } -.nut-checkbox-icon { - color: var(--nutui-color-text-disabled, #c2c4cc); - font-size: var(--nutui-checkbox-icon-font-size, var(--nutui-font-size-icon, 16rpx)); - -ms-flex-negative: 0; - flex-shrink: 0; -} -.nut-checkbox-icon-wrap { - font-size: 0rpx; - line-height: 0rpx; - border-radius: 50%; - box-shadow: 0 2rpx 4rpx rgba(255, 15, 35, 0.2); -} -.nut-checkbox-icon-checked { - color: var(--nutui-color-primary, #ff0f23); - background-color: #fff; - transition-duration: 0.3s; - transition-property: color, border-color, background-color; - border-radius: 50%; -} -.nut-checkbox-icon-checked.nut-checkbox-icon-disabled { - color: var(--nutui-color-primary-disabled-special, #ffadbe); +.nut-toast-icon-wrapper-icon { + width: 24rpx; + height: 24rpx; } -.nut-checkbox-label { - margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4rpx)); - font-size: var(--nutui-checkbox-label-font-size, var(--nutui-font-size-s, 12rpx)); - color: var(--nutui-checkbox-label-color, var(--nutui-color-title, #1a1a1a)); - -ms-flex-negative: 0; - flex-shrink: 0; +.nut-toast-rtl { + left: auto; + right: 0; } -.nut-checkbox-label-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); +.nut-toast-rtl-inner { + left: auto; + right: 50%; } -.nut-checkbox-icon-indeterminate { - color: var(--nutui-color-primary, #ff0f23); - background-color: #fff; - box-shadow: 0 2rpx 4rpx rgba(255, 15, 35, 0.2); - border-radius: 50%; +[dir='rtl'] .nut-toast, +.nut-rtl .nut-toast { + left: auto; + right: 0; } -.nut-checkbox-icon-indeterminate.nut-checkbox-icon-disabled { - color: var(--nutui-color-primary-disabled-special, #ffadbe); +[dir='rtl'] .nut-toast-inner, +.nut-rtl .nut-toast-inner { + left: auto; + right: 50%; } -.nut-checkbox-icon-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); - background-color: #fff; - border-radius: 50%; - box-shadow: none; +.toast-fade-enter-active, +.toast-fade-leave-active { + transition: opacity 0.3s; } -.nut-checkbox-reverse { - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; +.toast-fade-enter-from, +.toast-fade-leave-to { + opacity: 0; } -.nut-checkbox-reverse .nut-checkbox-label { - margin-right: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4rpx)); - margin-left: 0; +.nut-timeselect { + background-color: var(--nutui-color-background-overlay, #ffffff); + display: flex; + flex-direction: column; + height: calc(100% - 50rpx); } -.nut-checkbox-button { - position: relative; - display: -ms-flexbox; +.nut-timeselect-content { display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - min-height: 32rpx; - padding: var(--nutui-checkbox-button-padding, 5rpx 18rpx); - font-size: var(--nutui-checkbox-button-font-size, var(--nutui-font-size-s, 12rpx)); - background: var(--nutui-color-background, #f2f3f5); - border-radius: var(--nutui-checkbox-button-border-radius, 15rpx); - color: var(--nutui-checkbox-label-color, var(--nutui-color-title, #1a1a1a)); - box-sizing: border-box; - border: 1rpx solid var(--nutui-color-background, #f2f3f5); - overflow: hidden; + flex: 1; } -.nut-checkbox-button-active { - background: var(--nutui-color-primary-light-pressed, #ffebf1); - color: var(--nutui-color-primary, #ff0f23); - border: var(--nutui-checkbox-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); +.nut-timeselect-content-left { + width: var(--nutui-timeselect-date-width, 140rpx); + min-width: var(--nutui-timeselect-date-width, 140rpx); + height: 100%; + overflow: auto; + background: var(--nutui-color-background-sunken, #f7f8fc); } -.nut-checkbox-button-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); - border: 1rpx solid var(--nutui-color-background, #f2f3f5); +.nut-timepannel { + padding: 0 16rpx; + height: var(--nutui-timeselect-date-height, 40rpx); + line-height: var(--nutui-timeselect-date-height, 40rpx); + text-align: left; + color: var(--nutui-color-text, #505259); + font-size: var(--nutui-font-size-base, 14rpx); } -.nut-checkbox-button-icon { - position: absolute; - right: 0; - bottom: 0; - width: 0; - height: 0; - border-top: 10rpx solid transparent; - border-left: 10rpx solid transparent; - border-bottom: 10rpx solid var(--nutui-color-primary, #ff0f23); - border-right: 10rpx solid var(--nutui-color-primary, #ff0f23); - display: -ms-flexbox; - display: flex; - -ms-flex-align: end; - align-items: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; +.nut-timepannel.active { + background: var(--nutui-color-background-overlay, #ffffff); + color: var(--nutui-timeselect-date-active-color, var(--nutui-color-title, #1a1a1a)); + font-weight: var(--nutui-font-weight-bold, 600); } -.nut-checkbox-button .nut-checkbox-button-icon-checked { - width: 12rpx; - height: 12rpx; - position: absolute; - color: #fff; - right: 0; - bottom: 0; - -ms-transform: translate(-1rpx, -2rpx); - transform: translate(-1rpx, -2rpx); +.nut-timedetail { + display: flex; + align-content: flex-start; + flex: 1; + min-width: 0; + flex-wrap: wrap; + padding: 0 0 50rpx 12rpx; } -.nut-checkbox-button .nut-icon { - position: absolute; - font-size: 12rpx; - width: 12rpx; - height: 12rpx; +.nut-timedetail-item { + width: var(--nutui-timeselect-time-width, 100rpx); + height: var(--nutui-timeselect-time-height, 50rpx); + line-height: var(--nutui-timeselect-time-height, 50rpx); + text-align: center; + margin: var(--nutui-timeselect-time-margin, 0 10rpx 10rpx 0); + background: var(--nutui-timeselect-time-background, var(--nutui-color-background, #f2f3f5)); + border-radius: 5rpx; + font-size: var(--nutui-font-size-base, 14rpx); + border: 1rpx solid transparent; } -.nut-checkbox-button .nut-icon::before { - top: auto; - bottom: -22rpx; - margin-left: 6rpx; +.nut-timedetail-item.active { + background-color: var(--nutui-color-primary-light-pressed, #ffebf1); + border: 1rpx solid var(--nutui-color-primary, #ff0f23); + color: var(--nutui-color-primary, #ff0f23); + font-weight: var(--nutui-font-weight-bold, 600); } -.nut-checkbox .nut-checkbox-button-active.nut-checkbox-button-disabled { - background: var(--nutui-color-text-disabled, #c2c4cc); - color: #fff; - border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); +[dir='rtl'] .nut-timedetail, +.nut-rtl .nut-timedetail { + padding: 0 12rpx 50rpx 0; } -.nut-checkbox-list-item { - display: -ms-flexbox; +.nut-tag { + padding: var(--nutui-tag-padding, 0rpx 2rpx); display: flex; - -ms-flex-pack: justify; - justify-content: space-between; - padding: var(--nutui-checkbox-list-item-padding, 12rpx 12rpx 12rpx 0); - border-top: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + flex-direction: row; + justify-content: center; + align-items: center; + font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10rpx)); + border-radius: var(--nutui-tag-border-radius, 2rpx); + height: var(--nutui-tag-height, 14rpx); + color: var(--nutui-tag-color, #ffffff); + border: var(--nutui-tag-border-width, 1rpx) solid transparent; } -.nut-checkbox-list-item .nut-checkbox-label, -.nut-checkbox-list-item .nut-icon { - -ms-flex: none; - flex: none; +.nut-tag .nut-icon { + vertical-align: middle; + margin-left: 4rpx; + color: var(--nutui-tag-color, #ffffff); } -[dir='rtl'] .nut-checkbox-label, -.nut-rtl .nut-checkbox-label { - margin-left: 0; - margin-right: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4rpx)); +.nut-tag-text { + font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10rpx)); + color: var(--nutui-tag-color, #ffffff); } -[dir='rtl'] .nut-checkbox-reverse .nut-checkbox-label, -.nut-rtl .nut-checkbox-reverse .nut-checkbox-label { - margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4rpx)); - margin-right: 0; +.nut-tag-text-plain { + color: var(--nutui-color-title, #1a1a1a); } -[dir='rtl'] .nut-checkbox-button-icon, -.nut-rtl .nut-checkbox-button-icon { - right: auto; - left: 0; - border-right: 10rpx solid transparent; - border-left: 10rpx solid var(--nutui-color-primary, #ff0f23); +.nut-tag-default { + background: var(--nutui-tag-background-color, var(--nutui-color-title, #1a1a1a)); +} +.nut-tag-primary { + background: var(--nutui-tag-primary-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%)); } -[dir='rtl'] .nut-checkbox-button-icon-checked, -.nut-rtl .nut-checkbox-button-icon-checked { - left: auto; - right: 50%; - -ms-transform: translate(3rpx, -3rpx); - transform: translate(3rpx, -3rpx); +.nut-tag-info { + background: var(--nutui-tag-info-background-color, var(--nutui-color-info, #0073ff)); } -[dir='rtl'] .nut-checkbox-button-icon .nut-icon::before, -.nut-rtl .nut-checkbox-button-icon .nut-icon::before { - margin-left: 0; - margin-right: 6rpx; +.nut-tag-success { + background: var(--nutui-tag-success-background-color, #4fc08d); } -.nut-cell-group { - display: block; +.nut-tag-danger { + background: var(--nutui-tag-danger-background-color, var(--nutui-color-danger, #ff0f23)); } -.nut-cell-group-title { - display: inherit; - padding: var(--nutui-cell-group-title-padding, 0 10rpx); - color: var(--nutui-cell-group-title-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-cell-group-title-font-size, var(--nutui-font-size-base, 14rpx)); - line-height: var(--nutui-cell-group-title-line-height, 20rpx); - margin-top: 30rpx; - margin-bottom: 10rpx; +.nut-tag-warning { + background: var(--nutui-tag-warning-background-color, var(--nutui-color-warning, #ffbf00)); } -.nut-cell-group-description { - display: inherit; - padding: var(--nutui-cell-group-description-padding, 0 10rpx); - color: var(--nutui-cell-group-description-color, var(--nutui-color-text, #505259)); - font-size: var(--nutui-cell-group-description-font-size, var(--nutui-font-size-s, 12rpx)); - line-height: var(--nutui-cell-group-description-line-height, 16rpx); - margin-top: 10rpx; - margin-bottom: 10rpx; +.nut-tag-round { + border-radius: var(--nutui-tag-round-border-radius, 8rpx); } -.nut-cell-group-wrap { - border-radius: var(--nutui-cell-border-radius, 6rpx); - overflow: hidden; - background-color: var(--nutui-cell-group-background-color, var(--nutui-color-background-overlay, #ffffff)); - margin-bottom: var(--nutui-cell-group-wrap-margin, 10rpx); +.nut-tag-mark { + border-radius: var(--nutui-tag-mark-border-radius, 0 8rpx 8rpx 0); } -.nut-cell { - position: relative; - display: -ms-flexbox; +.nut-tag-close { + cursor: pointer; +} +.nut-tag-custom-icon { display: flex; - -ms-flex-direction: row; - flex-direction: row; - width: 100%; - line-height: var(--nutui-cell-line-height, 20rpx); - padding: var(--nutui-cell-padding, 13rpx 16rpx); - background-color: var(--nutui-cell-background-color, var(--nutui-color-background-overlay, #ffffff)); - border-radius: var(--nutui-cell-border-radius, 6rpx); - box-shadow: var(--nutui-cell-box-shadow, 0rpx 1rpx 7rpx 0rpx rgb(237, 238, 241)); - font-size: var(--nutui-cell-title-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-cell-title-color, var(--nutui-color-title, #1a1a1a)); - margin-bottom: 10rpx; - box-sizing: border-box; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10rpx)); + color: var(--nutui-tag-color, #ffffff); + margin-left: 4rpx; } -.nut-cell-group-item { - border-radius: 0; - box-shadow: 0 0 transparent; - margin: 0; +.nut-tag-plain { + background-color: #fff; + border: var(--nutui-tag-border-width, 1rpx) solid var(--nutui-color-title, #1a1a1a); } -.nut-cell-left { - display: -ms-flexbox; +[dir='rtl'] .nut-tag .nut-icon, +.nut-rtl .nut-tag .nut-icon { + margin-left: 0; + margin-right: 4rpx; +} +.nut-textarea { display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex-align: start; - align-items: flex-start; - -ms-flex: 1; - flex: 1; + position: relative; + width: 100%; + box-sizing: border-box; + font-size: var(--nutui-font-size-base, 14rpx); + border-radius: var(--nutui-radius-s, 6rpx); } -.nut-cell-title, -.nut-cell-description, -.nut-cell-extra { - line-height: var(--nutui-cell-line-height, 20rpx); +.nut-textarea-container { + padding: var(--nutui-textarea-padding, 12rpx); + background-color: var(--nutui-color-background-overlay, #ffffff); } -.nut-cell-description { - font-size: var(--nutui-cell-description-font-size, var(--nutui-font-size-s, 12rpx)); - color: var(--nutui-cell-description-color, var(--nutui-color-text, #505259)); +.nut-textarea-error { + border: 0.5rpx solid var(--nutui-color-danger, #ff0f23); + background-color: var(--nutui-color-danger-light, #ffebef); } -.nut-cell-extra { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-pack: end; - justify-content: flex-end; - -ms-flex-align: center; - align-items: center; - -ms-flex: 1; - flex: 1; - -ms-flex-negative: 0; - flex-shrink: 0; - min-width: 0; - word-break: break-all; - font-size: var(--nutui-cell-extra-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-cell-extra-color, var(--nutui-color-text, #505259)); +.nut-textarea-limit { + text-align: right; + font-size: var(--nutui-font-size-base, 14rpx); + line-height: var(--nutui-font-size-base, 14rpx); + margin-top: var(--nutui-spacing-base, 8rpx); + color: var(--nutui-color-text-help, #888b94); } -.nut-cell-clickable { - cursor: pointer; +.nut-textarea-limit-disabled { + cursor: not-allowed; + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-cell-clickable::before { - position: absolute; - top: 50%; - left: 50%; +.nut-textarea-textarea { + outline: none; + display: block; + box-sizing: border-box; width: 100%; - height: 100%; - background-color: #000; - border: inherit; - border-color: #000; - border-radius: inherit; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - opacity: 0; - content: ' '; + height: 40rpx; + min-width: 0; + margin: 0; + padding: 0; + font-size: var(--nutui-font-size-base, 14rpx); + color: var(--nutui-textarea-text-color, var(--nutui-color-title, #1a1a1a)); + caret-color: var(--nutui-textarea-text-curror-color, var(--nutui-color-primary, #ff0f23)); + text-align: left; + background-color: transparent; + border: 0; + resize: none; } -.nut-cell-divider { - display: -ms-flexbox; - display: flex; - min-height: 1rpx; - padding-left: var(--nutui-cell-divider-left, 16rpx); - padding-right: var(--nutui-cell-divider-right, 16rpx); +.nut-textarea-textarea .taro-textarea { + color: var(--nutui-textarea-text-color, var(--nutui-color-title, #1a1a1a)); + background-color: transparent; + resize: none; } -.nut-cell-divider-inner { - display: -ms-flexbox; - display: flex; - height: 1rpx; - width: 100%; - border-top: var(--nutui-cell-divider-border-bottom, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +.nut-textarea-textarea::-webkit-input-placeholder { + color: var(--nutui-color-text-help, #888b94); } -.nut-cell-divider-rtl { - padding-left: var(--nutui-cell-divider-right, 16rpx); - padding-right: var(--nutui-cell-divider-left, 16rpx); +.nut-textarea-textarea::placeholder { + color: var(--nutui-color-text-help, #888b94); } -.nut-cascader { - width: 100%; - font-size: var(--nutui-cascader-font-size, var(--nutui-font-size-base, 14rpx)); +.nut-textarea-textarea-disabled { + cursor: not-allowed; + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-cascader .nut-tabs-titles { - padding: var(--nutui-cascader-tabs-item-padding, 0 10rpx); - background: var(--nutui-color-background-overlay, #ffffff); +.nut-textarea-textarea-disabled::-webkit-input-placeholder { + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-cascader .nut-tabs-titles-item { - -ms-flex: initial; - flex: initial; - min-width: auto; - width: auto; - padding: var(--nutui-cascader-tabs-item-padding, 0 10rpx); - white-space: nowrap; +.nut-textarea-textarea-disabled::placeholder { + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-cascader .nut-tabpane { - padding: 0; - background: var(--nutui-color-background-overlay, #ffffff); +.nut-textarea-textarea-disabled .taro-textarea { + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-cascader-pane { - display: block; - width: 100%; - padding-top: var(--nutui-cascader-pane-paddingTop, 10rpx); - height: var(--nutui-cascader-pane-height, 342rpx); - overflow-y: auto; - -webkit-overflow-scrolling: touch; +.nut-textarea-textarea-disabled .taro-textarea::-webkit-input-placeholder { + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-cascader-item { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - padding: var(--nutui-cascader-item-padding, 10rpx 20rpx); - margin: var(--nutui-cascader-item-margin, 0rpx); - border-bottom: var(--nutui-cascader-item-border-bottom, 0rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - font-size: var(--nutui-cascader-item-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-cascader-item-color, var(--nutui-color-title, #1a1a1a)); - cursor: pointer; +.nut-textarea-textarea-disabled .taro-textarea::placeholder { + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-cascader-item.disabled { - opacity: 0.6; - cursor: not-allowed; +.nut-textarea.nut-textarea-rtl-limit { + right: auto; + left: 15rpx; } -.nut-cascader-item.active:not(.disabled) { - color: var(--nutui-cascader-item-active-color, var(--nutui-color-primary, #ff0f23)); +.taro-textarea { + background-color: transparent; + resize: none; } -.nut-cascader-item.active .nut-cascader-item-icon-check { - visibility: visible; - color: inherit; +.nut-tabs { + display: flex; } -.nut-cascader-item-title { - -ms-flex: 1; - flex: 1; +.nut-tabs-horizontal { + flex-direction: column; } -.nut-cascader .nut-icon-checklist { - margin-left: var(--nutui-cascader-icon-checklist-marginLeft, 10rpx); - visibility: hidden; +.nut-tabs-titles { + display: flex; + box-sizing: border-box; + height: var(--nutui-tabs-titles-height, 44rpx); + user-select: none; + overflow-x: auto; + overflow-y: hidden; + background: var(--nutui-tabs-titles-background-color, var(--nutui-color-background, #f2f3f5)); + scrollbar-width: none; } -[dir='rtl'] .nut-cascader .nut-icon-checklist, -.nut-rtl .nut-cascader .nut-icon-checklist { - margin-left: 0; - margin-right: var(--nutui-cascader-icon-checklist-marginLeft, 10rpx); +.nut-tabs-titles::-webkit-scrollbar { + display: none; + width: 0; + background: transparent; } -.nut-card { +.nut-tabs-titles .nut-tabs-list { width: 100%; - display: -ms-flexbox; display: flex; - background-color: inherit; - border-radius: var(--nutui-card-border-radius, 4rpx); -} -.nut-card-left { - width: 120rpx; - height: 120rpx; - -ms-flex-negative: 0; flex-shrink: 0; } -.nut-card-left > .h5-img { - display: block; - width: 100%; - height: 100%; - border-radius: var(--nutui-card-border-radius, 4rpx); +.nut-tabs-titles-left { + justify-content: flex-start; } -.nut-card-right { - -ms-flex: 1; - flex: 1; - padding: 0 10rpx 8rpx; +.nut-tabs-titles-left .nut-tabs-titles-item { + padding: 0 22rpx; } -.nut-card-right-title { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - word-break: break-all; - line-height: 1.5; - font-size: 14rpx; - color: var(--nutui-color-title, #1a1a1a); +.nut-tabs-titles-right { + justify-content: flex-end; } -.nut-card-right-price { - display: -ms-flexbox; +.nut-tabs-titles-right .nut-tabs-titles-item { + padding: 0 22rpx; +} +.nut-tabs-titles-item { + position: relative; display: flex; - -ms-flex-align: center; align-items: center; - height: 18rpx; - line-height: 18rpx; - margin-top: 9rpx; + justify-content: center; + flex: 1 0 auto; + padding: 0 var(--nutui-tabs-titles-gap, 12rpx); + height: var(--nutui-tabs-titles-height, 44rpx); + line-height: var(--nutui-tabs-titles-height, 44rpx); + min-width: var(--nutui-tabs-titles-item-min-width, 50rpx); + font-size: var(--nutui-tabs-titles-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a)); + text-overflow: ellipsis; + white-space: nowrap; } -.nut-card-right-price-origin.nut-price { - margin-left: 2rpx; +.nut-tabs-titles-item .nut-icon { + color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a)); } -.nut-card-right-price-origin.nut-price .nut-price-symbol, -.nut-card-right-price-origin.nut-price .nut-price-integer, -.nut-card-right-price-origin.nut-price .nut-price-decimal { - color: #d2a448; +.nut-tabs-titles-item-left, +.nut-tabs-titles-item-right { + flex: none; } -.nut-card-right-other { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - padding: 5rpx 0 2rpx; +.nut-tabs-titles-item-text { + color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a)); } -.nut-card-right-other .nut-tag { - padding: 0 2rpx; - margin-right: 5rpx; - font-size: var(--nutui-font-size-xs, 11rpx); +.nut-tabs-titles-item-smile, +.nut-tabs-titles-item-line { + position: absolute; + transition: width 0.3s ease; + width: 0; + height: 0; + content: ' '; + left: 50%; + transform: translate(-50%); + bottom: var(--nutui-tabs-line-bottom, 15%); + border-radius: var(--nutui-tabs-line-border-radius, 2rpx); + opacity: var(--nutui-tabs-tab-line-opacity, 1); + overflow: hidden; } -.nut-card-right-shop { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - justify-content: space-between; - -ms-flex-align: center; - align-items: center; +.nut-tabs-titles-item-smile { + bottom: var(--nutui-tabs-titles-item-smile-bottom, -10%); } -.nut-card-right-shop-name { - line-height: 1.5; - color: var(--nutui-color-text, #505259); - font-size: 12rpx; - padding-top: 4rpx; +.nut-tabs-titles-item-smile .nut-icon { + position: absolute; + font-size: 20rpx; + width: 100%; + height: 100%; } -[dir='rtl'] .nut-card-right-price-origin.nut-price, -.nut-rtl .nut-card-right-price-origin.nut-price { - margin-left: 0; - margin-right: 2rpx; +.nut-tabs-titles-item-active .nut-icon { + color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); } -[dir='rtl'] .nut-card-right-other .nut-tag, -.nut-rtl .nut-card-right-other .nut-tag { - margin-right: 0; - margin-left: 5rpx; +.nut-tabs-titles-item-active .nut-tabs-titles-item-text { + color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); + font-weight: var(--nutui-tabs-titles-item-active-font-weight, var(--nutui-font-weight-bold, 600)); } -.nut-calendarcard { - background: var(--nutui-color-background-overlay, #ffffff); - border-radius: 12rpx; - overflow: hidden; - font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15rpx)); - color: var(--nutui-color-title, #1a1a1a); +.nut-tabs-titles-item-active .nut-tabs-titles-item-line { + overflow: visible; + overflow: initial; + content: ' '; + width: var(--nutui-tabs-tab-line-width, 12rpx); + height: var(--nutui-tabs-tab-line-height, 2rpx); + background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23)); } -.nut-calendarcard-header { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: justify; - justify-content: space-between; - font-weight: 400; +.nut-tabs-titles-item-active .nut-tabs-titles-item-smile { + overflow: visible; + overflow: initial; + width: 40rpx; + height: 20rpx; } -.nut-calendarcard-header-left, -.nut-calendarcard-header-right { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - cursor: pointer; - margin: 16rpx; - line-height: 1; +.nut-tabs-titles-item-active .nut-tabs-titles-item-smile .nut-icon { + color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); } -.nut-calendarcard-header-left .left, -.nut-calendarcard-header-right .left { - margin-left: 8rpx; +.nut-tabs-titles-item-disabled, +.nut-tabs-titles-item-disabled .nut-icon, +.nut-tabs-titles-item-disabled .nut-tabs-titles-item-text { + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-calendarcard-header-left .right, -.nut-calendarcard-header-right .right { - margin-right: 8rpx; +.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-tabs-titles-item-text, +.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-icon { + color: var(--nutui-color-title, #1a1a1a); + font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-l, 15rpx)); } -.nut-calendarcard-days { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-align: center; - align-items: center; +.nut-tabs-titles-card .nut-tabs-titles-item-active { + font-weight: var(--nutui-font-weight-bold, 600); + background-color: #fff; + border-radius: var(--nutui-radius-base, 8rpx) var(--nutui-radius-base, 8rpx) 0 0; } -.nut-calendarcard-day { - display: -ms-flexbox; +.nut-tabs-titles-button .nut-tabs-titles-item { + padding: 0 10rpx; +} +.nut-tabs-titles-button .nut-tabs-titles-item .nut-tabs-titles-item-text { + flex: 1; + height: 28rpx; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - -ms-flex-direction: column; - flex-direction: column; - position: relative; - width: var(--nutui-calendar-day-width, 14.28%); - height: 48rpx; - cursor: pointer; - margin-bottom: 4rpx; - text-align: center; + padding: 0 8rpx; } -.nut-calendarcard-day.header { - cursor: auto; +.nut-tabs-titles-button .nut-tabs-titles-item-active .nut-tabs-titles-item-text { + background: var(--nutui-color-default-light); + color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); + border-radius: var(--nutui-tabs-button-border-radius, 50rpx); + font-weight: var(--nutui-font-weight-bold, 600); + background-color: var(--nutui-tabs-button-active-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); + border: var(--nutui-tabs-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); } -.nut-calendarcard-day-top, -.nut-calendarcard-day-bottom { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - height: 12rpx; - font-size: 12rpx; - line-height: 12rpx; +.nut-tabs-titles-divider { + border-bottom: 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)); } -.nut-calendarcard-day.weekend { - color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23)); +.nut-tabs-titles-divider .nut-tabs-titles-item { + position: relative; } -.nut-calendarcard-day.active { - background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23)); - border-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-tabs-titles-divider .nut-tabs-titles-item::after { + content: ''; + position: absolute; + right: 0; + top: 50%; + height: 50%; + width: 1rpx; + background: var(--nutui-color-border, rgba(0, 0, 0, 0.06)); + transform: translateY(-50%); } -.nut-calendarcard-day.active .nut-calendarcard-day-top, -.nut-calendarcard-day.active .nut-calendarcard-day-inner, -.nut-calendarcard-day.active .nut-calendarcard-day-bottom { - color: #fff; +.nut-tabs-titles-divider .nut-tabs-titles-item:last-child::after { + display: none; } -.nut-calendarcard-day.start, -.nut-calendarcard-day.end { - background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23)); +.nut-tabs-vertical .nut-tabs-ellipsis { + white-space: break-spaces; + padding-left: 6rpx; + width: 90rpx; + line-height: var(--nutui-font-size-base, 14rpx); } -.nut-calendarcard-day.start .nut-calendarcard-day-top, -.nut-calendarcard-day.start .nut-calendarcard-day-inner, -.nut-calendarcard-day.start .nut-calendarcard-day-bottom, -.nut-calendarcard-day.end .nut-calendarcard-day-top, -.nut-calendarcard-day.end .nut-calendarcard-day-inner, -.nut-calendarcard-day.end .nut-calendarcard-day-bottom { - color: #fff; +.nut-tabs-vertical .nut-tabs-titles { + flex-direction: column; + height: 100%; + width: var(--nutui-tabs-vertical-titles-width, 100rpx); + flex-shrink: 0; } -.nut-calendarcard-day.start { - border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); - border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-tabs-vertical .nut-tabs-titles .nut-tabs-list { + flex-direction: column; } -.nut-calendarcard-day.end { - border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); - border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-tabs-vertical .nut-tabs-titles-item { + height: var(--nutui-tabs-vertical-titles-item-height, 40rpx); + flex: none; } -.nut-calendarcard-day.mid { - background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); +.nut-tabs-vertical .nut-tabs-titles-item-smile { + overflow: hidden; + transition: width 0.3s ease; } -.nut-calendarcard-day.mid .nut-calendarcard-day-top, -.nut-calendarcard-day.mid .nut-calendarcard-day-inner, -.nut-calendarcard-day.mid .nut-calendarcard-day-bottom { - color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23)); +.nut-tabs-vertical .nut-tabs-titles-item-line { + transform: translateY(-50%); + transition: height 0.3s ease; } -.nut-calendarcard-day .nut-calendar-day-info { - color: #fff; +.nut-tabs-vertical .nut-tabs-titles-item-line-vertical { + top: 50%; } -.nut-calendarcard-day.prev, -.nut-calendarcard-day.next, -.nut-calendarcard-day.disabled { - cursor: not-allowed; +.nut-tabs-vertical .nut-tabs-titles-item-active { + background-color: var(--nutui-tabs-titles-item-active-background-color, var(--nutui-color-background-overlay, #ffffff)); } -.nut-calendarcard-day.prev .nut-calendarcard-day-top, -.nut-calendarcard-day.prev .nut-calendarcard-day-inner, -.nut-calendarcard-day.prev .nut-calendarcard-day-bottom, -.nut-calendarcard-day.next .nut-calendarcard-day-top, -.nut-calendarcard-day.next .nut-calendarcard-day-inner, -.nut-calendarcard-day.next .nut-calendarcard-day-bottom, -.nut-calendarcard-day.disabled .nut-calendarcard-day-top, -.nut-calendarcard-day.disabled .nut-calendarcard-day-inner, -.nut-calendarcard-day.disabled .nut-calendarcard-day-bottom { - color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc)); +.nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line { + left: 10rpx; + width: var(--nutui-tabs-vertical-tab-line-width, 3rpx); + height: var(--nutui-tabs-vertical-tab-line-height, 12rpx); + background: var( + --nutui-tabs-vertical-tab-line-color, + linear-gradient(180deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-light-pressed, #ffebf1) 100%) + ); } -[dir='rtl'] .nut-calendarcard-header-left .left, -[dir='rtl'] .nut-calendarcard-header-right .left, -.nut-rtl .nut-calendarcard-header-left .left, -.nut-rtl .nut-calendarcard-header-right .left { - margin-left: 0; - margin-right: 8rpx; +.nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { + right: -12rpx; + bottom: -2%; + left: auto; + transform: rotate(320deg); } -[dir='rtl'] .nut-calendarcard-header-left .right, -[dir='rtl'] .nut-calendarcard-header-right .right, -.nut-rtl .nut-calendarcard-header-left .right, -.nut-rtl .nut-calendarcard-header-right .right { - margin-right: 0; - margin-left: 8rpx; +.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles { + flex-direction: row; + height: var(--nutui-tabs-titles-height, 44rpx); + width: 100%; + padding: 0 !important; } -[dir='rtl'] .nut-calendarcard-header-left .nut-icon-ArrowLeft, -[dir='rtl'] .nut-calendarcard-header-left .nut-icon-ArrowRight, -[dir='rtl'] .nut-calendarcard-header-left .h5-svg, -[dir='rtl'] .nut-calendarcard-header-right .nut-icon-ArrowLeft, -[dir='rtl'] .nut-calendarcard-header-right .nut-icon-ArrowRight, -[dir='rtl'] .nut-calendarcard-header-right .h5-svg, -.nut-rtl .nut-calendarcard-header-left .nut-icon-ArrowLeft, -.nut-rtl .nut-calendarcard-header-left .nut-icon-ArrowRight, -.nut-rtl .nut-calendarcard-header-left .h5-svg, -.nut-rtl .nut-calendarcard-header-right .nut-icon-ArrowLeft, -.nut-rtl .nut-calendarcard-header-right .nut-icon-ArrowRight, -.nut-rtl .nut-calendarcard-header-right .h5-svg { - -ms-transform: rotate(180deg); - transform: rotate(180deg); +.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles .nut-tabs-list { + flex-direction: row; + height: auto; } -[dir='rtl'] .nut-calendarcard-day.start, -[dir='rtl'] .nut-calendarcard-day.end, -.nut-rtl .nut-calendarcard-day.start, -.nut-rtl .nut-calendarcard-day.end { - border-radius: 0; +.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-content { + flex-direction: row; } -[dir='rtl'] .nut-calendarcard-day.start, -.nut-rtl .nut-calendarcard-day.start { - border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); - border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active { + background-color: transparent; + background-color: initial; } -[dir='rtl'] .nut-calendarcard-day.end, -.nut-rtl .nut-calendarcard-day.end { - border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); - border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line { + left: 50%; + transform: translate(-50%); + width: var(--nutui-tabs-tab-line-width, 12rpx); + height: var(--nutui-tabs-tab-line-height, 2rpx); + background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23)); } -.nut-calendar { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; +.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { + left: 50%; + right: auto; + bottom: -3rpx; + transform: translate(-50%) rotate(0); +} +.nut-tabs-vertical .nut-tabs-content { flex-direction: column; - -ms-flex: 1; - flex: 1; - font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15rpx)); - background-color: var(--nutui-color-background-overlay, #ffffff); - color: var(--nutui-color-title, #1a1a1a); - overflow: hidden; height: 100%; } -.nut-calendar.nut-calendar-title .nut-calendar-header .calendar-title { - font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15rpx)); -} -.nut-calendar .nut-calendar-taro { - height: 60vh; +.nut-tabs-vertical .nut-tabs-content-wrap { + flex: 1; } -.nut-calendar .popup-box { +.nut-tabs-vertical .nut-tabs-content .nut-tabpane { height: 100%; } -.nut-calendar ::-webkit-scrollbar { - display: none; -} -.nut-calendar-header { - display: -ms-flexbox; +.nut-tabs-content { display: flex; - -ms-flex-direction: column; - flex-direction: column; - text-align: center; + box-sizing: border-box; } -.nut-calendar-header-buttons { - height: var(--nutui-calendar-header-height, 24rpx); +.nut-tabs-content-wrap { + overflow: hidden; } -.nut-calendar-title { - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-calendar-title-font-size, var(--nutui-font-size-xl, 18rpx)); - font-weight: var(--nutui-calendar-title-font-weight, var(--nutui-font-weight-bold, 600)); - line-height: 50rpx; +[dir='rtl'] .nut-tabs-titles-item-smile, +[dir='rtl'] .nut-tabs-titles-item-line, +.nut-rtl .nut-tabs-titles-item-smile, +.nut-rtl .nut-tabs-titles-item-line { + left: auto; + right: 50%; + transform: translate(50%); } -.nut-calendar-sub-title { - padding: 7rpx 0; - line-height: 22rpx; - font-size: var(--nutui-calendar-sub-title-font-size, var(--nutui-font-size-base, 14rpx)); +[dir='rtl'] .nut-tabs-titles-divider .nut-tabs-titles-item::after, +.nut-rtl .nut-tabs-titles-divider .nut-tabs-titles-item::after { + right: auto; + left: 0; } -.nut-calendar-weeks { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: distribute; - justify-content: space-around; - height: 36rpx; - border-radius: 0 0 12rpx 12rpx; - box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05882); +[dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item, +.nut-rtl .nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item { + padding-left: 0; + padding-right: 14rpx; } -.nut-calendar-week-item:first-of-type, -.nut-calendar-week-item:last-of-type { - color: var(--nutui-color-primary, #ff0f23); +[dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line, +.nut-rtl .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line { + left: auto; + right: 10rpx; } -.nut-calendar-content { - -ms-flex: 1; - flex: 1; - width: 100%; - display: block; - overflow-y: auto; +[dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile, +.nut-rtl .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { + left: -12rpx; + right: auto; + transform: rotate(-320deg); +} +[dir='rtl'] .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line, +.nut-rtl .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line { + left: auto; + right: 50%; + transform: translate(50%); +} +[dir='rtl'] .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-smile, +.nut-rtl .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { + right: 50%; + left: auto; + transform: translate(50%) rotate(0); } -.nut-calendar-pannel { - position: relative; +.nut-tabpane { width: 100%; - height: auto; + flex-shrink: 0; display: block; + background-color: var(--nutui-tabs-tabpane-background-color, #fff); + color: var(--nutui-color-title, #1a1a1a); + padding: var(--nutui-tabs-tabpane-padding, 24rpx 20rpx); box-sizing: border-box; + overflow: auto; } -.nut-calendar-pannel .calendar-loading-tip { - height: 50rpx; - line-height: 50rpx; - text-align: center; - position: absolute; - top: -50rpx; - left: 0; - right: 0; - font-size: var(--nutui-font-size-s, 12rpx); - color: var(--nutui-color-text, #505259); -} -.nut-calendar-month { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - text-align: center; -} -.nut-calendar-month-title { - height: 23rpx; - line-height: 23rpx; - margin: 8rpx 0; +.nut-tabpane.inactive { + overflow: visible; + height: 0; } -.nut-calendar-days { +.nut-table { overflow: hidden; + position: relative; + word-wrap: break-word; + word-break: break-all; } -.nut-calendar-day { - display: -ms-flexbox; +.nut-table-wrapper { display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-direction: column; + width: 100%; flex-direction: column; + font-size: var(--nutui-font-size-base, 14rpx); + color: var(--nutui-color-title, #1a1a1a); + overflow-y: auto; + overflow-x: hidden; position: relative; - float: left; - width: var(--nutui-calendar-day-width, 14.28%); - height: var(--nutui-calendar-day-height, 60rpx); - font-weight: var(--nutui-calendar-day-font-weight, var(--nutui-font-weight-bold, 600)); - margin-bottom: 4rpx; + border: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-calendar-day:nth-child(7n), -.nut-calendar-day:nth-child(7n + 1) { - color: var(--nutui-color-primary, #ff0f23); +.nut-table-wrapper-sticky { + overflow-x: auto; } -.nut-calendar-day-info, -.nut-calendar-day-info-curr { - position: absolute; - bottom: 5rpx; - width: 100%; - font-size: 12rpx; - line-height: 14rpx; +.nut-table-main { + display: table; + width: max-content; + overflow-x: auto; + color: var(--nutui-color-title, #1a1a1a); + background-color: var(--nutui-color-background-overlay, #ffffff); + table-layout: fixed; + min-width: 100%; + position: relative; } -.nut-calendar-day-info-top { - position: absolute; - width: 100%; - top: 5rpx; +.nut-table-main-striped .nut-table-main-head-tr { + background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f2f3f5)); } -.nut-calendar-day-info-bottom { - position: absolute; - width: 100%; - bottom: 5rpx; +.nut-table-main-striped .nut-table-main-body-tr:nth-child(odd) { + background-color: var(--nutui-table-tr-odd-bg-color, #ffffff); } -.nut-calendar-day-active { - background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23)); - color: #fff !important; - border-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-table-main-striped .nut-table-main-body-tr:nth-child(2n) { + background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f2f3f5)); } -.nut-calendar-day-active.active-start { - border-radius: 0; - border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); - border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-table-main-head, +.nut-table-main-body { + background: inherit; } -.nut-calendar-day-active.active-end { - border-radius: 0; - border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); - border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-table-main-head-tr, +.nut-table-main-body-tr { + display: table-row; + background: inherit; } -.nut-calendar-day-active .nut-calendar-day-info { - color: #fff; +.nut-table-main-head-tr:last-child .nut-table-main-body-tr-td, +.nut-table-main-body-tr:last-child .nut-table-main-body-tr-td { + border-bottom: none; } -.nut-calendar-day-disabled { - color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc)) !important; +.nut-table-main-head-tr-th, +.nut-table-main-body-tr-th { + display: table-cell; + padding: var(--nutui-table-cols-padding, 10rpx); + table-layout: fixed; + background: inherit; + position: sticky; + top: 0; } -.nut-calendar-day-disabled .nut-calendar-day-info-curr { - display: none; +.nut-table-main-head-tr-th.nut-table-fixed-left, +.nut-table-main-head-tr-th.nut-table-fixed-right, +.nut-table-main-body-tr-th.nut-table-fixed-left, +.nut-table-main-body-tr-th.nut-table-fixed-right { + z-index: 4; } -.nut-calendar-day-choose { - background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); - color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23)); +.nut-table-main-head-tr-th:last-child, +.nut-table-main-body-tr-th:last-child { + border-right: none; } -.nut-calendar-day-choose-disabled { - background-color: var(--nutui-calendar-choose-disable-background-color, rgba(191, 191, 191, 0.09)); - color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc)) !important; +.nut-table-main-head-tr-td, +.nut-table-main-body-tr-td { + display: table-cell; + padding: var(--nutui-table-cols-padding, 10rpx); + table-layout: fixed; + background: inherit; } -.nut-calendar-day-choose-disabled .nut-calendar-day-info-curr { - display: none; +.nut-table-main-head-tr-td:last-child, +.nut-table-main-body-tr-td:last-child { + border-right: none; } -.nut-calendar-footer { - display: -ms-flexbox; +.nut-table-main-head-tr-td-nodata, +.nut-table-main-body-tr-td-nodata { display: flex; - width: 100%; - -ms-flex-direction: column; - flex-direction: column; - background-color: #fff; + height: 50rpx; + align-items: center; + justify-content: center; } -.nut-calendar-footer .calendar-confirm-btn { - height: 40rpx; - line-height: 40rpx; - margin: 6rpx 16rpx; - text-align: center; - border-radius: var(--nutui-radius-base, 8rpx); - background: -webkit-linear-gradient(left, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); - background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); - color: #fff; - font-weight: var(--nutui-font-weight-bold, 600); +.nut-table-main-head-tr-border, +.nut-table-main-body-tr-border { + border-right: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + border-bottom: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-calendar-popup .nut-popup-title-right { - top: 7rpx !important; +.nut-table-main-head-tr-alignleft, +.nut-table-main-head-tr-align, +.nut-table-main-body-tr-alignleft, +.nut-table-main-body-tr-align { + text-align: left; } -[dir='rtl'] .nut-calendar-day, -.nut-rtl .nut-calendar-day { - float: right; +.nut-table-main-head-tr-aligncenter, +.nut-table-main-body-tr-aligncenter { + text-align: center; } -[dir='rtl'] .nut-calendar-day-active.active-start, -.nut-rtl .nut-calendar-day-active.active-start { - border-top-left-radius: 0; - border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); - border-bottom-left-radius: 0; - border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-table-main-head-tr-alignright, +.nut-table-main-body-tr-alignright { + text-align: right; } -[dir='rtl'] .nut-calendar-day-active.active-end, -.nut-rtl .nut-calendar-day-active.active-end { - border-top-right-radius: 0; - border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); - border-bottom-right-radius: 0; - border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-table-main-head { + display: table-header-group; } -.nut-button { - position: relative; - display: -ms-flexbox; - display: flex; - display: inline-block; - width: 80rpx; - width: auto; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - -ms-flex-negative: 0; - flex-shrink: 0; - box-sizing: border-box; - margin: 0; - padding: 0; - height: var(--nutui-button-default-height, 32rpx); - font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14rpx)); - font-weight: var(--nutui-font-weight, 400); - text-align: center; - cursor: pointer; - transition: opacity 0.2s; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -ms-touch-action: manipulation; - touch-action: manipulation; - color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a)); - background: var(--nutui-button-default-background-color, transparent); - border-width: var(--nutui-button-border-width, 0.5rpx); +.nut-table-main-body { + display: table-row-group; +} +.nut-table-sticky-left, +.nut-table-sticky-right { + position: absolute; + top: 0; + width: 8rpx; + bottom: -1rpx; + overflow-x: hidden; + overflow-y: hidden; + box-shadow: none; + touch-action: none; + pointer-events: none; + z-index: 3; + background: transparent; } -.nut-button-text { - margin-left: var(--nutui-button-text-icon-margin, 4rpx); +.nut-table-sticky-left { + left: 1rpx; + box-shadow: var(--nutui-table-sticky-left-shadow, 4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); } -.nut-button-text-right { - margin-right: var(--nutui-button-text-icon-margin, 4rpx); +.nut-table-sticky-right { + right: 1rpx; + box-shadow: var(--nutui-table-sticky-right-shadow, -4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); } -.nut-button-children { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - background: transparent; +.nut-table-fixed-left, +.nut-table-fixed-right { + position: sticky; + z-index: 2; } -.nut-button::before { - position: absolute; - top: 50%; - left: 50%; - width: 100%; - height: 100%; - background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); - border: inherit; - border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); - border-radius: inherit; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - opacity: 0; - content: ' '; - pointer-events: none; - pointer-events: auto; +.nut-table-fixed-left.h5-div, +.nut-table-fixed-right.h5-div { + padding: var(--nutui-table-cols-padding, 10rpx) 0; } -.nut-button::after { - border: none; +.nut-table-fixed-left-last { + border-right: none; } -.nut-button-wrap { - height: 100%; - width: 100%; - display: -ms-flexbox; +.nut-table-summary { + color: var(--nutui-color-title, #1a1a1a); + background-color: var(--nutui-color-background-overlay, #ffffff); display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; - background: initial; + height: 30rpx; + padding: var(--nutui-table-cols-padding, 10rpx); + position: relative; + z-index: 5; } -.nut-button-wrap .nut-icon { - font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14rpx)); - width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14rpx)); - height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14rpx)); +[dir='rtl'] .nut-table-main-head-tr-th:last-child, +[dir='rtl'] .nut-table-main-body-tr-th:last-child, +.nut-rtl .nut-table-main-head-tr-th:last-child, +.nut-rtl .nut-table-main-body-tr-th:last-child { + border-right: none; + border-left: none; } -.nut-button-loading::before, -.nut-button-disabled::before { - display: none; +[dir='rtl'] .nut-table-main-head-tr-td:last-child, +[dir='rtl'] .nut-table-main-body-tr-td:last-child, +.nut-rtl .nut-table-main-head-tr-td:last-child, +.nut-rtl .nut-table-main-body-tr-td:last-child { + border-right: none; + border-left: none; } -.nut-button-disabled { - cursor: not-allowed; - color: #fff; +[dir='rtl'] .nut-table-main-head-tr-border, +[dir='rtl'] .nut-table-main-body-tr-border, +.nut-rtl .nut-table-main-head-tr-border, +.nut-rtl .nut-table-main-body-tr-border { + border-right: none; + border-left: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-button.nut-button-icononly { - width: var(--nutui-button-default-height, 32rpx); - padding: 0; +[dir='rtl'] .nut-table-main-head-tr-alignleft, +[dir='rtl'] .nut-table-main-head-tr-align, +[dir='rtl'] .nut-table-main-body-tr-alignleft, +[dir='rtl'] .nut-table-main-body-tr-align, +.nut-rtl .nut-table-main-head-tr-alignleft, +.nut-rtl .nut-table-main-head-tr-align, +.nut-rtl .nut-table-main-body-tr-alignleft, +.nut-rtl .nut-table-main-body-tr-align { + text-align: right; } -.nut-button-round { - border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, 6rpx)); +[dir='rtl'] .nut-table-main-head-tr-alignright, +[dir='rtl'] .nut-table-main-body-tr-alignright, +.nut-rtl .nut-table-main-head-tr-alignright, +.nut-rtl .nut-table-main-body-tr-alignright { + text-align: left; } -.nut-button-default { - padding: var(--nutui-button-default-padding, 0rpx 12rpx); - border-style: solid; - border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #c2c4cc)); +[dir='rtl'] .nut-table-sticky-left, +.nut-rtl .nut-table-sticky-left { + left: auto; + right: 1rpx; + box-shadow: var(--nutui-table-sticky-right-shadow, -4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); } -.nut-button-default-disabled, -.nut-button-default-solid-disabled { - color: var(--nutui-button-primary-color, #ffffff); - background: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc)); - border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc)); +[dir='rtl'] .nut-table-sticky-right, +.nut-rtl .nut-table-sticky-right { + right: auto; + left: 1rpx; + box-shadow: var(--nutui-table-sticky-left-shadow, 4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); } -.nut-button-default-none-disabled { - color: var(--nutui-button-default-disabled-color, var(--nutui-color-text-help, #888b94)); +[dir='rtl'] .nut-table-fixed-left-last, +.nut-rtl .nut-table-fixed-left-last { + border-right: none; + border-left: none; } -.nut-button-default-outline-disabled, -.nut-button-default-dashed-disabled { - background: transparent; - color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc)); - border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc)); +.nut-tabbar-item { + display: flex; + flex-direction: column; + align-items: center; + flex: 1; + padding: 6rpx 0 2rpx; + color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a)); + height: 100%; } -.nut-button-normal { - padding: var(--nutui-button-normal-padding, 0rpx 12rpx); +.nut-tabbar-item .nut-icon { + width: 24rpx; + height: 24rpx; + font-size: 24rpx; + color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a)); + color: inherit; } -.nut-button-xlarge { - height: var(--nutui-button-xlarge-height, 48rpx); - padding: var(--nutui-button-xlarge-padding, 0rpx 24rpx); - font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18rpx)); - border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8rpx)); +.nut-tabbar-item-text { + display: block; + color: var(--nutui-color-text, #505259); + font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10rpx)); + line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10rpx)); + margin-top: var(--nutui-tabbar-text-margin-top, 4rpx); } -.nut-button-xlarge .nut-button-text { - margin-left: var(--nutui-button-xlarge-text-icon-margin, 6rpx); +.nut-tabbar-item .nut-image-default { + width: 38rpx; + height: 38rpx; + border-radius: 38rpx; } -.nut-button-xlarge .nut-button-text-right { - margin-right: var(--nutui-button-xlarge-text-icon-margin, 6rpx); +.nut-tabbar-item-large { + justify-content: center; + padding: 0; } -.nut-button-xlarge .nut-icon { - font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18rpx)); - width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18rpx)); - height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18rpx)); +.nut-tabbar-item-large .nut-tabbar-item-text { + font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 15rpx)); + margin-top: 0; + line-height: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 15rpx)); + font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400)); } -.nut-button-xlarge-children { - font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18rpx)); +.nut-tabbar-item-active { + color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23)); } -.nut-button-large { - height: var(--nutui-button-large-height, 40rpx); - padding: var(--nutui-button-large-padding, 0rpx 16rpx); - font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15rpx)); - border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8rpx)); +.nut-tabbar-item-active .nut-tabbar-item-text, +.nut-tabbar-item-active .nut-icon { + color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23)); + color: inherit; } -.nut-button-large .nut-button-text { - margin-left: var(--nutui-button-xlarge-text-icon-margin, 6rpx); +.nut-tabbar { + border: 0rpx; + box-shadow: var(--nutui-tabbar-box-shadow, none); + border-bottom: var(--nutui-tabbar-border-bottom, 0); + border-top: var(--nutui-tabbar-border-top, 0); + width: 100%; + background: var(--nutui-color-background-overlay, #ffffff); } -.nut-button-large .nut-button-text-right { - margin-right: var(--nutui-button-xlarge-text-icon-margin, 6rpx); +.nut-tabbar-wrap { + height: var(--nutui-tabbar-height, 46rpx); + display: flex; } -.nut-button-large .nut-icon { - font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15rpx)); - width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15rpx)); - height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15rpx)); +.nut-tabbar-wrap-3 { + padding: 0 16rpx; } -.nut-button-large-children { - font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15rpx)); +.nut-tabbar-wrap-2 { + padding: 0 32rpx; } -.nut-button-small { - height: var(--nutui-button-small-height, 28rpx); - padding: var(--nutui-button-small-padding, 0rpx 8rpx); - font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12rpx)); - border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6rpx)); +.nut-tabbar-wrap-horizontal { + align-items: center; } -.nut-button-small .nut-icon { - font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12rpx)); - width: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12rpx)); - height: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12rpx)); +.nut-tabbar-wrap-horizontal .nut-tabbar-item { + flex-direction: row; + justify-content: center; } -.nut-button-small-children { - font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12rpx)); +.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-icon { + width: 20rpx; + height: 20rpx; } -.nut-button-mini { - height: var(--nutui-button-mini-height, 24rpx); - padding: var(--nutui-button-mini-padding, 0rpx 8rpx); - font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11rpx)); - border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4rpx)); +.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-tabbar-item-text { + margin: 0 4rpx 0 6rpx; + font-size: 14rpx; } -.nut-button-mini .nut-icon { - font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11rpx)); - width: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11rpx)); - height: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11rpx)); +.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-badge-sup::after { + border: 0; } -.nut-button-mini-children { - font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11rpx)); +.nut-tabbar-fixed { + position: fixed; + bottom: 0; + left: 0; } -.nut-button-primary { - color: var(--nutui-button-primary-color, #ffffff); - background-origin: border-box; - border-color: transparent; +[dir='rtl'] .nut-tabbar:last-child, +.nut-rtl .nut-tabbar:last-child { + border-right: none; + border-left: 0; } -.nut-button-primary-children { - color: var(--nutui-button-primary-color, #ffffff); +[dir='rtl'] .nut-tabbar-fixed, +.nut-rtl .nut-tabbar-fixed { + left: auto; + right: 0; } -.nut-button-primary-solid { - background: -webkit-linear-gradient(left, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); - background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); - color: var(--nutui-button-primary-color, #ffffff); - border-color: transparent; - font-weight: var(--nutui-font-weight-bold, 600); +.nut-switch { + cursor: pointer; + position: relative; + display: flex; + display: inline-flex; + flex-direction: row; + align-items: center; + min-width: var(--nutui-switch-width, 46rpx); + height: var(--nutui-switch-height, 28rpx); + line-height: var(--nutui-switch-line-height, 28rpx); + background-color: var(--nutui-switch-active-background-color, var(--nutui-color-primary, #ff0f23)); + border-radius: var(--nutui-switch-border-radius, 50rpx); + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center center; + flex: 0 0 auto; } -.nut-button-primary-solid.nut-button-small, -.nut-button-primary-solid.nut-button-mini { - font-weight: var(--nutui-font-weight, 400); +.nut-switch-button { + position: absolute; + top: 50%; + transform: translateY(-50%); + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + height: calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2); + width: calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2); + border-radius: var(--nutui-switch-inside-border-radius, 50%); + background: #fff; + transition: left 0.3s linear; + box-shadow: var(--nutui-switch-inside-box-shadow, 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1)); } -.nut-button-primary-disabled, -.nut-button-primary-disabled.nut-button-icononly, -.nut-button-primary-solid-disabled { - color: var(--nutui-button-primary-color, #ffffff); - background: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); - border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +.nut-switch-button-open { + left: calc(100% - var(--nutui-switch-height, 28rpx) + var(--nutui-switch-border-width, 2rpx)); } -.nut-button-primary-none { - color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); +.nut-switch-button-open-rtl, +.nut-switch-button-close { + left: var(--nutui-switch-border-width, 2rpx); } -.nut-button-primary-none-disabled { - color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +.nut-switch-button-close-rtl { + left: calc(100% - var(--nutui-switch-height, 28rpx) + var(--nutui-switch-border-width, 2rpx)); } -.nut-button-primary-outline { - color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); - border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); +.nut-switch-button .nut-icon { + width: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); + height: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); + color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe)); } -.nut-button-primary-outline-disabled { - color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); - border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +.nut-switch-close { + background-color: var(--nutui-switch-inactive-background-color, var(--nutui-color-text-disabled, #c2c4cc)); } -.nut-button-primary-dashed { - color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); - border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); +.nut-switch-close-line { + width: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); + height: 2rpx; + background: var(--nutui-switch-inactive-line-background-color, #ffffff); + border-radius: 2rpx; } -.nut-button-primary-dashed-disabled { - color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); - border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +.nut-switch-label { + display: flex; + display: inline-flex; + align-items: center; + height: 100%; + white-space: nowrap; + color: var(--nutui-switch-label-text-color, #ffffff); + font-size: var(--nutui-switch-label-font-size, var(--nutui-font-size-s, 12rpx)); } -.nut-button-primary.nut-button-solid.nut-button-normal { - font-weight: var(--nutui-font-weight-bold, 600); +.nut-switch-label .nut-icon { + color: var(--nutui-switch-label-text-color, #ffffff); } -.nut-button-success { - color: var(--nutui-button-success-color, #ffffff); - background: var(--nutui-button-success-background-color, var(--nutui-color-success, #00d900)); - background-origin: border-box; - border-color: transparent; +.nut-switch-label-open { + margin: 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx) 0 7rpx; } -.nut-button-success-children { - color: var(--nutui-button-success-color, #ffffff); +.nut-switch-label-open-rtl, +.nut-switch-label-close { + margin: 0 7rpx 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx); } -.nut-button-success-disabled, -.nut-button-success-solid-disabled { - background: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae)); - border-color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae)); +.nut-switch-label-close-rtl { + margin: 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx) 0 7rpx; } -.nut-button-success-outline, -.nut-button-success-dashed { - color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900)); - border-color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900)); +.nut-switch-label-close-disabled, +.nut-switch-label-close-disabled .nut-icon { + color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc)); } -.nut-button-success-outline-disabled, -.nut-button-success-dashed-disabled { - color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); - border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +.nut-switch-disabled { + background-color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe)); } -.nut-button-success-none { - color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900)); +.nut-switch-disabled-close { + background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-color-background, #f2f3f5)); } -.nut-button-success-none-disabled { - color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae)); +.nut-swiper-item { + height: 100%; } -.nut-button-info { - color: var(--nutui-button-info-color, #ffffff); - background: var(--nutui-button-info-background-color, var(--nutui-color-info-background, #0073ff)); - background-origin: border-box; - border-color: transparent; +.nut-swiper { + width: 100%; + height: 100%; + overflow: hidden; + position: relative; } -.nut-button-info-children { - color: var(--nutui-button-info-color, #ffffff); +.nut-swiper-canmove-horizontal { + touch-action: pan-y; } -.nut-button-info-disabled, -.nut-button-info-solid-disabled { - background: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); - border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); +.nut-swiper-canmove-vertical { + touch-action: pan-x; } -.nut-button-info-outline, -.nut-button-info-dashed { - color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff)); - border-color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff)); +.nut-swiper-indicator { + display: flex; + flex-direction: row; + justify-content: center; + position: absolute; + height: 4rpx; + width: 100%; + top: 89.33%; + z-index: 10; } -.nut-button-info-outline-disabled, -.nut-button-info-dashed-disabled { - color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); - border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); +.nut-swiper-indicator-vertical { + width: 8rpx; + height: 100%; + top: 0; + left: 12rpx; + flex-direction: column; + justify-content: center; + z-index: 1; } -.nut-button-info-none { - color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff)); +.nut-swiper-inner { + width: 100%; + height: 100%; + display: flex; + position: relative; } -.nut-button-info-none-disabled { - color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); +.nut-swiper-inner-vertical { + flex-direction: column; } -.nut-button-danger { - color: var(--nutui-button-danger-color, #ffffff); - background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23)); - background-origin: border-box; - border-color: transparent; +.nut-swiper-slide { + width: 100%; + height: 100%; + position: relative; + flex-shrink: 0; } -.nut-button-danger-children { - color: var(--nutui-button-danger-color, #ffffff); +.nut-swiper-item { + width: 100%; + height: 100%; } -.nut-button-danger-disabled, -.nut-button-danger-solid-disabled { - background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); - border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); +[dir='rtl'] .nut-swiper-indicator, +.nut-rtl .nut-swiper-indicator { + left: auto; + right: 50%; } -.nut-button-danger-outline, -.nut-button-danger-dashed { - color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23)); - border-color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23)); +[dir='rtl'] .nut-swiper-indicator-vertical, +.nut-rtl .nut-swiper-indicator-vertical { + left: auto; + right: 12rpx; } -.nut-button-danger-outline-disabled, -.nut-button-danger-dashed-disabled { - color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); - border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); +.nut-swipe { + display: flex; + flex-direction: row; + position: relative; + overflow: hidden; + cursor: grab; + background-color: #fff; } -.nut-button-danger-none { - color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23)); +.nut-swipe-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-self: stretch; + width: 100%; + transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); + transition-property: transform; } -.nut-button-danger-none-disabled { - color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); +.nut-swipe-left, +.nut-swipe-right { + position: absolute; + top: 0; } -.nut-button-warning { - color: var(--nutui-button-warning-color, #ffffff); - background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #ffbf00)); - background-origin: border-box; - border-color: transparent; +.nut-swipe-left { + left: 0; + transform: translate(-100%); } -.nut-button-warning-children { - color: var(--nutui-button-warning-color, #ffffff); +.nut-swipe-right { + right: 0; + transform: translate(100%); } -.nut-button-warning-disabled, -.nut-button-warning-solid-disabled { - color: var(--nutui-button-warning-color, #ffffff); - background: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); - border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); +.nut-sticky-fixed { + position: fixed; } -.nut-button-warning-outline, -.nut-button-warning-dashed { - color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00)); - border-color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00)); +.nut-steps { + display: flex; } -.nut-button-warning-outline-disabled, -.nut-button-warning-dashed-disabled { - color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); - border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); +.nut-steps-horizontal { + flex-flow: row; } -.nut-button-warning-none { - color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00)); +.nut-steps-horizontal .nut-step-head { + background-color: var(--nutui-steps-background-color, #ffffff); } -.nut-button-warning-none-disabled { - color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); +.nut-steps-horizontal .nut-step-head-icon .nut-icon { + height: 10rpx; + width: 10rpx; } -.nut-button-block { - display: block; +.nut-steps-horizontal .nut-step-head-icon .nut-image { width: 100%; + height: 100%; + background-color: var(--nutui-steps-background-color, #ffffff); } -.nut-button-outline { - background: transparent; - border-style: solid; -} -.nut-button-dashed { - background: transparent; - border-style: dashed; +.nut-steps-horizontal .nut-step-head-icon .nut-image .h5-img { + vertical-align: top; } -.nut-button-none { - background: transparent; - border-color: transparent; +.nut-steps-horizontal .nut-step.nut-step-process .nut-step-title { + color: var(--nutui-steps-process-title-color, var(--nutui-color-primary, #ff0f23)); } -.nut-button-loading { - cursor: default; - opacity: 0.9; +.nut-steps-horizontal .nut-step.nut-step-process .nut-step-description { + color: var(--nutui-steps-process-description-color, var(--nutui-color-primary, #ff0f23)); } -.nut-button-square { - border-radius: var(--nutui-button-square-border-radius, 0); +.nut-steps-horizontal .nut-step.nut-step-wait .nut-step-title { + color: var(--nutui-steps-wait-title-color, var(--nutui-color-title, #1a1a1a)); } -[dir='rtl'] .nut-button-text, -.nut-rtl .nut-button-text { - margin-left: 0; - margin-right: var(--nutui-button-text-icon-margin, 4rpx); +.nut-steps-horizontal .nut-step.nut-step-wait .nut-step-description { + color: var(--nutui-steps-wait-description-color, var(--nutui-color-text, #505259)); } -[dir='rtl'] .nut-button-text.right, -.nut-rtl .nut-button-text.right { - margin-left: var(--nutui-button-text-icon-margin, 4rpx); +.nut-steps-horizontal-single .nut-step { + padding-right: var(--nutui-steps-horizontal-item-padding-right, 28rpx); } -[dir='rtl'] .nut-button::before, -.nut-rtl .nut-button::before { - left: auto; - right: 50%; - -ms-transform: translate(50%, -50%); - transform: translate(50%, -50%); +.nut-steps-horizontal-single .nut-step-last { + padding-right: 0 !important; } -.nut-barrage { - position: absolute; - left: 0; +.nut-steps-horizontal-single .nut-step-line { top: 0; - width: 100%; - height: 100%; - overflow: hidden; - box-sizing: border-box; - background-color: var(--nutui-color-background, #f2f3f5); - color: var(--nutui-color-title, #1a1a1a); -} -.nut-barrage .barrage-item { - display: block; - position: absolute; right: 0; - padding: 4rpx 16rpx; - border-radius: 16rpx; - font-size: var(--nutui-font-size-s, 12rpx); - text-align: center; - white-space: pre; - -ms-transform: translate(100%); - transform: translate(100%); - background: -webkit-linear-gradient(left, var(--nutui-black-3), var(--nutui-black-1)); - background: linear-gradient(to right, var(--nutui-black-3), var(--nutui-black-1)); + height: var(--nutui-steps-base-head-height, 14rpx); + width: var(--nutui-steps-horizontal-item-padding-right, 28rpx); + padding: var(--nutui-steps-horizontal-item-line-padding, 0 8rpx); box-sizing: border-box; } -.nut-barrage .barrage-item.move { - will-change: transform; - animation-name: moving; - animation-timing-function: linear; - animation-play-state: running; -} -@keyframes moving { - 0% { - transform: translate(100%); - } - to { - transform: translate(var(--move-distance)); - } +.nut-steps-horizontal-single .nut-step-title, +.nut-steps-horizontal-single .nut-step-description { + padding-left: 4rpx; } -[dir='rtl'] .nut-barrage, -.nut-rtl .nut-barrage { - left: auto; - right: 0; +.nut-steps-horizontal-single .nut-step-special { + padding-right: var(--nutui-steps-horizontal-item-special-padding-right, 22rpx); } -[dir='rtl'] .nut-barrage .barrage-item, -.nut-rtl .nut-barrage .barrage-item { - -ms-transform: translate(-100%); - transform: translate(-100%); - background: -webkit-linear-gradient(right, var(--nutui-black-3), var(--nutui-black-1)); - background: linear-gradient(to left, var(--nutui-black-3), var(--nutui-black-1)); +.nut-steps-horizontal-single .nut-step-special .nut-step-line { + width: 100%; } -[dir='rtl'] .nut-barrage .barrage-item.move, -.nut-rtl .nut-barrage .barrage-item.move { - animation-name: moving-rtl; +.nut-steps-horizontal-single .nut-step-special .nut-step-title { + padding-right: 8rpx; + width: fit-content; } -@keyframes moving-rtl { - 0% { - transform: translate(var(--move-distance)); - } - to { - transform: translate(100%); - } +.nut-steps-horizontal-single.nut-steps-horizontal-count-3 .nut-step-special { + padding-right: var(--nutui-steps-horizontal-item-special-3-padding-right, 9rpx); } -.nut-badge { - position: relative; - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - box-sizing: content-box; - vertical-align: middle; - width: auto; +.nut-steps-horizontal-double { + width: 100%; + justify-content: space-between; } -.nut-badge-icon { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; +.nut-steps-horizontal-double .nut-step { + flex-direction: column; align-items: center; - background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23)); - padding: var(--nutui-badge-icon-padding, 2rpx); - text-align: center; - z-index: var(--nutui-badge-z-index, 1); -} -.nut-badge-icon .nut-icon { - width: var(--nutui-badge-icon-size, 10rpx); - height: var(--nutui-badge-icon-size, 10rpx); - font-size: var(--nutui-badge-icon-size, 10rpx); -} -.nut-badge-sup, -.nut-badge-icon { - border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14rpx)); + flex: 1; } -.nut-badge-sup::after, -.nut-badge-icon::after { - content: ''; - position: absolute; - top: -50%; - bottom: -50%; - left: -50%; +.nut-steps-horizontal-double .nut-step-line { + top: 0; right: -50%; - -ms-transform: scale(0.5); - transform: scale(0.5); - border: var(--nutui-badge-border, 1rpx solid #ffffff); - border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14rpx)); + height: var(--nutui-steps-base-head-height, 14rpx); + width: 100%; } -.nut-badge-sup { - display: -ms-flexbox; +.nut-steps-horizontal-double .nut-step-line-inner { display: flex; - display: -ms-inline-flexbox; display: inline-flex; - text-align: center; - min-width: var(--nutui-badge-min-width, 6rpx); - padding: var(--nutui-badge-padding, 1rpx 4rpx); - box-sizing: border-box; - color: var(--nutui-badge-color, #ffffff); - font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9rpx)); - line-height: 12rpx; - white-space: nowrap; - font-weight: 400; - vertical-align: middle; - background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23)); - z-index: 1; + height: var(--nutui-steps-base-line-height, 1rpx); + width: 100%; + background: var(--nutui-steps-base-line-background, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-badge-disabled { - background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc)); +.nut-steps-horizontal-double .nut-step-head { + justify-content: center; + margin-bottom: 6rpx; } -.nut-badge-number { - font-family: JDZH-Regular; +.nut-steps-horizontal-double .nut-step-head-dot-wrap, +.nut-steps-horizontal-double .nut-step-head-icon-wrap, +.nut-steps-horizontal-double .nut-step-head-text-wrap { + background-color: var(--nutui-steps-background-color, #ffffff); + padding: var(--nutui-steps-horizontal-item-line-padding, 0 8rpx); } -.nut-badge-one { - height: var(--nutui-badge-height, 14rpx); - width: var(--nutui-badge-height, 14rpx); +.nut-steps-horizontal-double .nut-step-head-icon { + height: var(--nutui-steps-base-head-icon-size-right, 20rpx); + width: var(--nutui-steps-base-head-icon-size-right, 20rpx); +} +.nut-steps-horizontal-double .nut-step-head-icon .nut-icon { + height: 12rpx; + width: 12rpx; } -.nut-badge-content { - position: absolute; - -ms-transform: var(--nutui-badge-content-transform, translate(50%, -50%)); - transform: var(--nutui-badge-content-transform, translate(50%, -50%)); +.nut-steps-horizontal-double .nut-step-main { + align-items: center; + margin-left: 0; + margin-top: 2rpx; } -.nut-badge-dot { - padding: 0; - border-radius: 50%; +.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-head, +.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-line { + height: var(--nutui-steps-base-head-icon-size-right, 20rpx); } -.nut-badge-dot::after { - border: var(--nutui-badge-dot-border, 1rpx solid #ffffff); - border-radius: 50%; +.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-head, +.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-line { + height: var(--nutui-steps-base-head-dot-size, 6rpx); } -.nut-badge-dot-normal { - min-width: var(--nutui-badge-dot-width, 6rpx); - width: var(--nutui-badge-dot-width, 6rpx); - height: var(--nutui-badge-dot-width, 6rpx); +.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-head, +.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-line { + height: var(--nutui-steps-base-head-text-size, 12rpx); } -.nut-badge-dot-small { - min-width: var(--nutui-badge-dot-small-width, 4rpx); - width: var(--nutui-badge-dot-small-width, 4rpx); - height: var(--nutui-badge-dot-small-width, 4rpx); +.nut-steps-vertical { + flex: 1; + min-width: 0; + flex-direction: column; } -.nut-badge-dot-large { - min-width: var(--nutui-badge-dot-large-width, 8rpx); - width: var(--nutui-badge-dot-large-width, 8rpx); - height: var(--nutui-badge-dot-large-width, 8rpx); +.nut-steps-vertical .nut-step { + padding-bottom: var(--nutui-steps-vertical-item-padding-bottom, 13rpx); } -.nut-badge-outline { - background: #fff; - color: var(--nutui-badge-outline-color, var(--nutui-color-primary, #ff0f23)); +.nut-steps-vertical .nut-step-last { + padding-bottom: 0 !important; } -.nut-badge-outline::after { - border: var(--nutui-badge-outline-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); +.nut-steps-vertical .nut-step-line { + height: calc(100% - 4rpx); + width: 1rpx; + bottom: 0; } -.nut-backtop { - display: none; +.nut-steps-vertical .nut-step-line-inner { + height: 100%; } -.nut-backtop-show { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; +.nut-steps-vertical .nut-step-head { align-items: center; - -ms-flex-pack: center; justify-content: center; - width: var(--nutui-hoverbutton-item-size, 40rpx); - height: var(--nutui-hoverbutton-item-size, 40rpx); - transition: all 0.2s ease-in-out; + height: 18rpx; } -.nut-backtop-show .nut-hoverbutton-item-container { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; +.nut-steps-vertical .nut-step-head-icon { + width: var(--nutui-steps-vertical-item-icon-size, 20rpx); + height: var(--nutui-steps-vertical-item-icon-size, 20rpx); } -.nut-avatar-cropper { - position: relative; - display: -ms-flexbox; - display: flex; +.nut-steps-vertical .nut-step-head-icon .nut-icon { + height: 12rpx; + width: 12rpx; } -.nut-avatar-cropper-edit-text { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.30196); - z-index: 1; - color: #fff; - display: -ms-flexbox; +.nut-steps-vertical .nut-step-main { + flex: 1; + min-width: 0; + height: auto; + margin-left: 8rpx; +} +.nut-steps-vertical .nut-step-title { display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; align-items: center; + height: var(--nutui-steps-vertical-line-height, 18rpx); + font-size: var(--nutui-steps-vertical-title-font-size, var(--nutui-font-size-l, 15rpx)); + overflow: auto; + font-weight: 500; + margin-bottom: var(--nutui-steps-vertical-title-margin-bottom, 4rpx); } -.nut-avatar-cropper-input { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0; - cursor: pointer; - z-index: 2; -} -.nut-avatar-cropper-popup { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: var(--nut-overlay-bg-color, rgba(0, 0, 0, 0.7)); - z-index: 1000; +.nut-steps-vertical .nut-step-description { + margin: var(--nutui-steps-vertical-description-margin, 0 0 1rpx); + height: auto; + line-height: var(--nutui-steps-vertical-line-height, 18rpx); + color: var(--nutui-color-title, #1a1a1a); + font-size: var(--nutui-steps-vertical-description-font-size, var(--nutui-font-size-base, 14rpx)); + box-sizing: border-box; } -.nut-avatar-cropper-popup-canvas, -.nut-avatar-cropper-popup-cut-canvas { - position: absolute; - bottom: 0; - left: 0; +.nut-steps-vertical .nut-step-head-dot-wrap, +.nut-steps-vertical .nut-step-head-icon-wrap, +.nut-steps-vertical .nut-step-head-text-wrap { + display: flex; + align-items: center; + justify-content: center; width: 100%; - height: 100%; + background-color: #fff; + position: relative; z-index: 1; } -.nut-avatar-cropper-popup-cut-canvas { - z-index: 0; -} -.nut-avatar-cropper-popup-toolbar { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - z-index: 2; -} -.nut-avatar-cropper-popup-toolbar.top { - top: 0; - bottom: inherit; +.nut-steps-vertical .nut-step-head-dot-wrap { + height: calc(var(--nutui-steps-base-head-dot-size, 6rpx) + 8rpx); } -.nut-avatar-cropper-popup-toolbar-flex { - width: 100%; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - justify-content: space-between; +.nut-steps-vertical .nut-step-head-icon-wrap { + height: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 8rpx); } -.nut-avatar-cropper-popup-toolbar-item { - color: #fff; - padding: 15rpx; - cursor: pointer; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; +.nut-steps-vertical .nut-step-head-text-wrap { + height: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 8rpx); } -.nut-avatar-cropper-popup-toolbar-item .nut-button { - color: #fff; +.nut-steps-vertical-icon .nut-step-head { + width: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 1rpx); + min-width: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 1rpx); } -.nut-avatar-cropper-popup-highlight { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 1; - background-color: transparent; +.nut-steps-vertical-icon .nut-step-line { + left: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) / 2); } -.nut-avatar-cropper-popup-highlight .highlight { - position: absolute; - left: 50%; - top: 50%; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - background-color: transparent; - box-shadow: 0 0 1000rpx 1000rpx rgba(0, 0, 0, 0.6); +.nut-steps-vertical-dot .nut-step-head { + width: calc(var(--nutui-steps-base-head-dot-size, 6rpx) + 1rpx); } -.nut-avatar-cropper.round .nut-avatar-cropper-edit-text { - border-radius: 50%; +.nut-steps-vertical-dot .nut-step-line { + left: calc(var(--nutui-steps-base-head-dot-size, 6rpx) / 2); } -[dir='rtl'] .nut-avatar-cropper-edit-text, -.nut-rtl .nut-avatar-cropper-edit-text, -[dir='rtl'] .nut-avatar-cropper-input, -.nut-rtl .nut-avatar-cropper-input, -[dir='rtl'] .nut-avatar-cropper-popup, -.nut-rtl .nut-avatar-cropper-popup, -[dir='rtl'] .nut-avatar-cropper-popup-canvas, -[dir='rtl'] .nut-avatar-cropper-popup-cut-canvas, -.nut-rtl .nut-avatar-cropper-popup-canvas, -.nut-rtl .nut-avatar-cropper-popup-cut-canvas, -[dir='rtl'] .nut-avatar-cropper-popup-toolbar, -.nut-rtl .nut-avatar-cropper-popup-toolbar, -[dir='rtl'] .nut-avatar-cropper-popup-highlight, -.nut-rtl .nut-avatar-cropper-popup-highlight { - left: auto; - right: 0; +.nut-steps-vertical-text .nut-step-head { + width: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 1rpx); + min-width: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 1rpx); } -[dir='rtl'] .nut-avatar-cropper-popup-highlight .highlight, -.nut-rtl .nut-avatar-cropper-popup-highlight .highlight { - left: auto; - right: 50%; - -ms-transform: translate(50%, -50%); - transform: translate(50%, -50%); +.nut-steps-vertical-text .nut-step-line { + left: calc(var(--nutui-steps-base-head-text-size, 12rpx) / 2); } -.nut-avatar-group { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex: 0 0 auto; - flex: 0 0 auto; +.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon, +.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text, +.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon, +.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text { + background-color: var(--nutui-steps-enhanced-finish-head-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); } -.nut-avatar-group-avatar, -.nut-avatar-group .nut-avatar { - border: 1rpx solid #fff; - margin-left: -8rpx; +.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon .nut-icon, +.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text .nut-icon, +.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon .nut-icon, +.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text .nut-icon { + color: var(--nutui-steps-enhanced-finish-head-icon-color, var(--nutui-color-primary-stop-1, #ff475d)); } -.nut-avatar-group-avatar:not(:first-of-type), -.nut-avatar-group .nut-avatar:not(:first-of-type) { - margin-left: -8rpx; +.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text, +.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text { + color: var(--nutui-steps-enhanced-finish-head-text-color, var(--nutui-color-primary-stop-1, #ff475d)); } -[dir='rtl'] .nut-avatar-group .nut-avatar:not(:first-of-type), -.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) { - margin-left: 0; - margin-right: -8rpx; +.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-dot, +.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-dot { + background-color: var(--nutui-steps-enhanced-finish-head-dot-background-color, var(--nutui-color-primary-disabled-special, #ffadbe)); } -.nut-avatar { +.nut-step { position: relative; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - width: var(--nutui-avatar-normal-width, 40rpx); - height: var(--nutui-avatar-normal-height, 40rpx); } -.nut-avatar-round { - border-radius: 999rpx; - overflow: hidden; +.nut-step-last .nut-step-line { + display: none; } -.nut-avatar-square { - border-radius: var(--nutui-avatar-square, 5rpx); +.nut-step-head { + display: flex; + align-items: center; + height: var(--nutui-steps-base-head-height, 14rpx); + position: relative; + z-index: 1; } -.nut-avatar-first-child { - margin-left: 0; - margin-right: 0; +.nut-step-head-text { + height: var(--nutui-steps-base-head-text-size, 12rpx); + width: var(--nutui-steps-base-head-text-size, 12rpx); + background-color: var(--nutui-steps-base-head-background-color, var(--nutui-color-background, #f2f3f5)); + color: var(--nutui-steps-base-head-color, var(--nutui-color-text, #505259)); + font-size: var(--nutui-steps-base-icon-size, var(--nutui-font-size-xxs, 10rpx)); } -.nut-avatar-img { - width: 100%; - height: 100%; - -ms-flex-negative: 0; - flex-shrink: 0; - background-size: 100% 100%; - background-repeat: no-repeat; - background-position: center center; +.nut-step-head-icon { + height: var(--nutui-steps-base-head-icon-size, 16rpx); + width: var(--nutui-steps-base-head-icon-size, 16rpx); + background-color: var(--nutui-steps-base-head-background-color, var(--nutui-color-background, #f2f3f5)); } -.nut-avatar-icon { - background-size: 100% 100%; +.nut-step-head-icon .nut-icon { + color: #fff; } -.nut-avatar-text { - display: -ms-flexbox; +.nut-step-head-dot { + height: var(--nutui-steps-base-head-dot-size, 6rpx); + width: var(--nutui-steps-base-head-dot-size, 6rpx); + background-color: var(--nutui-steps-base-head-dot-background-color, var(--nutui-color-text-disabled, #c2c4cc)); +} +.nut-step-head-dot, +.nut-step-head-icon, +.nut-step-head-text { display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; align-items: center; + justify-content: center; + border-radius: 50%; + box-sizing: border-box; + border: var(--nutui-steps-base-head-border, none); } -.nut-avatar-large, -.nut-avatar-large-img, -.nut-avatar-large-icon, -.nut-avatar-large-text { - width: var(--nutui-avatar-large-width, 60rpx); - height: var(--nutui-avatar-large-height, 60rpx); +.nut-step-line { + position: absolute; + z-index: 0; + display: flex; + align-items: center; + justify-content: center; } -.nut-avatar-small, -.nut-avatar-small-text { - width: var(--nutui-avatar-small-width, 32rpx); - height: var(--nutui-avatar-small-height, 32rpx); +.nut-step-line-inner { + display: flex; + flex: 1; + height: var(--nutui-steps-base-line-height, 1rpx); + background: var(--nutui-steps-base-line-background, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-audio-icon { +.nut-step-main { position: relative; - display: inline-block; -} -.nut-audio-icon-box { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; + flex-direction: column; justify-content: center; - width: 30rpx; - height: 30rpx; - background: #fff; - border-radius: 50%; - box-shadow: 0 0 8rpx var(--nutui-color-text-disabled, #c2c4cc); + min-height: var(--nutui-steps-base-head-height, 14rpx); } -.nut-audio-icon .nut-audio-icon-stop { +.nut-step-line, +.nut-step-title { + background-color: #fff; +} +.nut-step-title { position: relative; + z-index: 1; } -.nut-audio-icon .nut-audio-icon-stop::after { - position: absolute; - left: 50%; - top: 50%; - -ms-transform: translate(-50%); - transform: translate(-50%); - content: ''; - height: 2rpx; - width: 30rpx; - background: var(--nutui-color-text-disabled, #c2c4cc); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - -ms-transform-origin: 8rpx -18rpx; - transform-origin: 8rpx -18rpx; +.nut-step-title { + height: 14rpx; + line-height: 14rpx; + font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-size-s, 12rpx)); + color: var(--nutui-steps-base-title-color, var(--nutui-color-title, #1a1a1a)); + overflow: hidden; + white-space: nowrap; } -.nut-audio-progress { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - width: 100%; - margin: 0 auto; - padding: 10rpx 0; +.nut-step-description { + height: 16rpx; + line-height: 16rpx; + margin-top: var(--nutui-steps-base-title-margin-bottom, 2rpx); + font-size: var(--nutui-steps-base-description-font-size, var(--nutui-font-size-xxs, 10rpx)); + color: var(--nutui-steps-base-description-color, var(--nutui-color-text-help, #888b94)); + overflow: hidden; } -.nut-audio-progress-bar-wrapper { - -ms-flex: 1; - flex: 1; - margin: 0 10rpx; +.nut-step.nut-step-process .nut-step-head-icon, +.nut-step.nut-step-process .nut-step-head-text, +.nut-step.nut-step-process .nut-step-head-dot { + background-color: var(--nutui-steps-process-head-background-color, var(--nutui-color-primary, #ff0f23)); } -.nut-audio-progress .time { - min-width: 50rpx; - font-size: 12rpx; - text-align: center; +.nut-step.nut-step-process .nut-step-head-text { + color: var(--nutui-steps-process-color, #ffffff); } -.nut-audio-progress .nut-range-button { - width: 8rpx; - height: 8rpx; +.nut-step.nut-step-wait .nut-step-head-icon .nut-icon { + color: var(--nutui-steps-wait-icon-color, var(--nutui-color-text-help, #888b94)); } -.nut-audio .custom-button-group .nut-button-primary { - margin: 0 5rpx; +.nut-step.nut-step-finish .nut-step-head-icon .nut-icon { + color: var(--nutui-steps-finish-icon-color, var(--nutui-color-text-help, #888b94)); } -.nut-audio .custom-button-group-disable .nut-button-primary { - margin: 0 5rpx; - pointer-events: none; +.nut-step.nut-step-business .nut-step-head-text { + color: var(--nutui-steps-business-head-text-color, var(--nutui-color-service-pressed)); } -.nut-audio .disable { - color: #00f; +.nut-step.nut-step-business .nut-step-title { + color: var(--nutui-steps-business-title-color, var(--nutui-color-service-pressed)); } -.nut-audio .nut-audio-none-container .nut-voice { - border: 1rpx solid var(--nutui-color-title, #1a1a1a); - -ms-flex-align: center; - align-items: center; +.nut-step.nut-step-business .nut-step-description { + color: var(--nutui-steps-business-description-color, var(--nutui-color-service-pressed)); } -[dir='rtl'] .nut-audio-icon .nut-audio-icon-stop::after, -.nut-rtl .nut-audio-icon .nut-audio-icon-stop::after { - left: auto; - right: 50%; - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - -ms-transform-origin: 20rpx -18rpx; - transform-origin: 20rpx -18rpx; +.nut-step.nut-step-business .nut-step-head-dot { + background-color: var(--nutui-steps-business-head-dot-background-color, var(--nutui-color-service-pressed)); } -.nut-animate [class*='nut-animate-'] { - animation-duration: 0.5s; - animation-timing-function: ease-out; - animation-fill-mode: both; +.nut-step.nut-step-business .nut-step-head-icon, +.nut-step.nut-step-business .nut-step-head-text { + background-color: var(--nutui-steps-business-head-background-color, var(--nutui-color-service)); } -@keyframes slide-right { - 0% { - opacity: 0; - transform: translate(100%); - } - to { - opacity: 1; - transform: translate(0); - } +.nut-step.nut-step-business .nut-step-head-icon .nut-icon { + color: var(--nutui-steps-business-head-icon-color, var(--nutui-color-service-pressed)); } -@keyframes slide-left { - 0% { - opacity: 0; - transform: translate(-100%); - } - to { - opacity: 1; - transform: translate(0); - } +.nut-space { + display: flex; +} +.nut-space-item { + flex: none; +} +.nut-space-vertical { + flex-direction: column; +} +.nut-space-vertical-item { + margin-bottom: var(--nutui-space-gap, 8rpx); +} +.nut-space-vertical-item-last { + margin-bottom: 0; +} +.nut-space-horizontal { + flex-direction: row; +} +.nut-space-horizontal-item { + margin-right: var(--nutui-space-gap, 8rpx); } -@keyframes slide-top { - 0% { - opacity: 0; - transform: translateY(-100%); - } - to { - opacity: 1; - transform: translateY(0); - } +.nut-space-horizontal-item-last { + margin-right: 0; } -@keyframes slide-bottom { - 0% { - opacity: 0; - transform: translateY(100%); - } - to { - opacity: 1; - transform: translateY(0); - } +.nut-space-horizontal-wrap { + flex-wrap: wrap; + margin-bottom: calc(var(--nutui-space-gap, 8rpx) * -1); } -.nut-animate .nut-animate-slide-right { - animation-name: slide-right; +.nut-space-horizontal-wrap-item { + padding-bottom: var(--nutui-space-gap, 8rpx); } -.nut-animate .nut-animate-slide-left { - animation-name: slide-left; +.nut-space-align-center { + align-items: center; } -.nut-animate .nut-animate-slide-top { - animation-name: slide-top; +.nut-space-align-start { + align-items: flex-start; } -.nut-animate .nut-animate-slide-bottom { - animation-name: slide-bottom; +.nut-space-align-end { + align-items: flex-end; } -@keyframes shake { - 0%, - to { - transform: translate(0); - } - 10% { - transform: translate(-9rpx); - } - 20% { - transform: translate(8rpx); - } - 30% { - transform: translate(-7rpx); - } - 40% { - transform: translate(6rpx); - } - 50% { - transform: translate(-5rpx); - } - 60% { - transform: translate(4rpx); - } - 70% { - transform: translate(-3rpx); - } - 80% { - transform: translate(2rpx); - } - 90% { - transform: translate(-1rpx); - } +.nut-space-align-baseline { + align-items: baseline; } -.nut-animate .nut-animate-shake { - animation-name: shake; +.nut-space-justify-center { + justify-content: center; } -@keyframes ripple { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.1); - } +.nut-space-justify-start { + justify-content: flex-start; } -.nut-animate .nut-animate-ripple { - animation-name: ripple; +.nut-space-justify-end { + justify-content: flex-end; } -@keyframes breath { - 0%, - to { - transform: scale(1); - } - 50% { - transform: scale(1.1); - } +.nut-space-justify-between { + justify-content: space-between; } -.nut-animate .nut-animate-breath { - animation-name: breath; - animation-duration: 2.7s; - animation-timing-function: ease-in-out; - animation-direction: alternate; +.nut-space-justify-around { + justify-content: space-around; } -.nut-animate .nut-animate-twinkle { - position: relative; +.nut-space-justify-evenly { + justify-content: space-evenly; } -.nut-animate .nut-animate-twinkle::after, -.nut-animate .nut-animate-twinkle::before { - width: 60rpx; - height: 60rpx; - content: ''; - box-sizing: border-box; - border: 4rpx solid rgba(255, 255, 255, 0.6); - position: absolute; - border-radius: 30rpx; - right: 50%; - margin-top: -30rpx; - margin-right: -30rpx; - z-index: 1; - -ms-transform: scale(0); - transform: scale(0); - animation: twinkle 2s ease-out infinite; +.nut-space-justify-stretch { + justify-content: stretch; } -.nut-animate .nut-animate-twinkle::after { - animation-delay: 0.4s; +[dir='rtl'] .nut-space-horizontal > .nut-space-item, +.nut-rtl .nut-space-horizontal > .nut-space-item { + margin-right: 0; + margin-left: var(--nutui-space-gap, 8rpx); } -@keyframes twinkle { - 0% { - transform: scale(0); - } - 20% { - opacity: 1; - } - 50%, - to { - transform: scale(1.4); - opacity: 0; - } +[dir='rtl'] .nut-space-horizontal > .nut-space-item:last-child, +.nut-rtl .nut-space-horizontal > .nut-space-item:last-child { + margin-right: 0; + margin-left: 0; } -.nut-animate .nut-animate-flicker { +.nut-skeleton { + line-height: 0rpx; + font-size: 0rpx; +} +.nut-skeleton-content { position: relative; + display: flex; + display: inline-flex; + width: var(--nutui-skeleton-line-width, 100%); + background: var(--nutui-skeleton-background, var(--nutui-color-background-sunken, #f7f8fc)); + border-radius: var(--nutui-skeleton-line-border-radius, var(--nutui-radius-xs, 4rpx)); overflow: hidden; } -.nut-animate .nut-animate-flicker::after { - width: 100rpx; - height: 60rpx; +.nut-skeleton-content-normal { + height: var(--nutui-skeleton-line-normal-height, 24rpx); +} +.nut-skeleton-content-large { + height: var(--nutui-skeleton-line-large-height, 32rpx); +} +.nut-skeleton-content-small { + height: var(--nutui-skeleton-line-small-height, 16rpx); + margin-top: 8rpx; +} +.nut-skeleton-content-small-0 { + margin-top: 0; +} +.nut-skeleton-animation { position: absolute; - left: 0; top: 0; - opacity: 0.73; - content: ''; - background-image: -webkit-linear-gradient(344deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%); - background-image: linear-gradient(106deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%); - animation: flicker 1.5s linear infinite; - -ms-transform: skew(-20deg); - transform: skew(-20deg); - filter: blur(3rpx); -} -@keyframes flicker { - 0% { - transform: translate(-100rpx) skew(-20deg); - } - 40%, - to { - transform: translate(150rpx) skew(-20deg); - } + left: 0; + width: 100%; + height: 100%; + z-index: 1; + background: linear-gradient(90deg, #0000, #00000005, #0000); + animation-name: nut-skeleton; + animation-delay: 0s; + animation-duration: 0.6s; + animation-direction: normal; + animation-fill-mode: both; + animation-play-state: running; + animation-iteration-count: 1; + animation-timing-function: linear; } -@keyframes jump { +@keyframes nut-skeleton { 0% { - transform: rotate(0) translateY(0); - } - 25% { - transform: rotate(10deg) translateY(20rpx); - } - 50% { - transform: rotate(0) translateY(-10rpx); - } - 75% { - transform: rotate(-10deg) translateY(20rpx); + transform: translate(-100%); } to { - transform: rotate(0) translateY(0); + transform: translate(100%); } } -.nut-animate .nut-animate-jump { - -ms-transform-origin: center center; - transform-origin: center center; - animation: jump 0.7s linear; +[dir='rtl'] .nut-skeleton-animation, +.nut-rtl .nut-skeleton-animation { + left: auto; + right: 0; + animation: nut-skeleton-rtl 2s linear 0s infinite; } -@keyframes float-pop { +@keyframes nut-skeleton-rtl { 0% { - top: 0; - } - 25% { - top: 1rpx; - } - 50% { - top: 4rpx; - } - 75% { - top: 1rpx; + transform: translate(100%); } to { - top: 0; + transform: translate(-100%); } } -.nut-animate .nut-animate-float { - position: relative; - animation-name: float-pop; -} -.nut-animate .loop { - animation-iteration-count: infinite; +.nut-signature .spcanvas_WEAPP { + width: 100%; + height: 100%; } -.nut-actionsheet { - text-align: center; +.nut-signature .spcanvas_WEAPP Canvas { + width: 100%; } -.nut-actionsheet.nut-popup { - min-height: 10%; - background-color: var(--nutui-actionsheet-background-color, var(--nutui-color-background-overlay, #ffffff)); +.nut-signature-inner { + display: flex; + justify-content: center; + align-items: center; + height: var(--nutui-signature-height, 10rem); + border: var(--nutui-signature-border-width, 1rpx) solid var(--nutui-signature-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + background-color: var(--nutui-signature-background-color, var(--nutui-color-background-overlay, #ffffff)); } -.nut-actionsheet .nut-popup-title { - border-bottom: 1rpx solid var(--nutui-actionsheet-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +.nut-signature-unsupport { + font-size: var(--nutui-signature-font-size, var(--nutui-font-size-base, 14rpx)); } -.nut-actionsheet-list { +.nut-sidebaritem { + width: 100%; + height: 100%; + flex-shrink: 0; display: block; - list-style: none; - padding: 0; - margin: 0; - border-radius: var(--nutui-actionsheet-border-radius, 0); + background-color: var(--nutui-sidebar-item-background, #ffffff); + color: var(--nutui-color-title, #1a1a1a); + padding: var(--nutui-sidebar-item-padding, 24rpx 20rpx); + box-sizing: border-box; + overflow: auto; } -.nut-actionsheet-cancel, -.nut-actionsheet-item { - display: block; - padding: 10rpx; - text-align: var(--nutui-actionsheet-item-text-align, center); - line-height: var(--nutui-actionsheet-item-line-height, 24rpx); - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-actionsheet-item-color, var(--nutui-color-title, #1a1a1a)); - cursor: pointer; +.nut-sidebaritem.inactive { + overflow: visible; + height: 0; } -.nut-actionsheet-cancel-name, -.nut-actionsheet-item-name { - text-align: var(--nutui-actionsheet-item-text-align, center); - line-height: var(--nutui-actionsheet-item-line-height, 24rpx); - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-actionsheet-item-color, var(--nutui-color-title, #1a1a1a)); +.nut-sidebar { + display: flex; } -.nut-actionsheet-cancel-description, -.nut-actionsheet-item-description { - display: block; - font-size: var(--nutui-font-size-s, 12rpx); - color: var(--nutui-color-text, #505259); - text-align: var(--nutui-actionsheet-item-text-align, center); - line-height: var(--nutui-actionsheet-item-line-height, 24rpx); +.nut-sidebar-content { + flex-direction: column; + height: 100%; } -.nut-actionsheet-cancel-danger, -.nut-actionsheet-item-danger { - color: var(--nutui-actionsheet-item-danger, var(--nutui-color-danger, #ff0f23)); +.nut-sidebar-content-wrap { + flex: 1; + overflow: hidden; } -.nut-actionsheet-cancel-disabled, -.nut-actionsheet-item-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc) !important; - cursor: not-allowed; +.nut-sidebar-titles { + background: var(--nutui-sidebar-background-color, var(--nutui-color-background, #f2f3f5)); + flex-direction: column; + border-radius: var(--nutui-sidebar-border-radius, 0); + height: 100%; + width: var(--nutui-sidebar-width, 104rpx); + max-width: var(--nutui-sidebar-max-width, 128rpx); + flex-shrink: 0; } -.nut-actionsheet-cancel { - margin-top: 5rpx; - border-top: 1rpx solid var(--nutui-actionsheet-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - border-radius: var(--nutui-actionsheet-border-radius, 0); +.nut-sidebar-titles::-webkit-scrollbar { + display: none; + width: 0; + background: transparent; } -.nut-actionsheet-safe-area { - display: block; +.nut-sidebar-titles .nut-sidebar-list { width: 100%; - padding-bottom: constant(safe-area-inset-bottom); - padding-bottom: env(safe-area-inset-bottom); + display: flex; + flex-direction: column; + flex-shrink: 0; } -.nut-address-exist { - display: block; - padding: 15rpx 20rpx 0; - height: 279rpx; +.nut-sidebar-titles-scrollable { + overflow-x: hidden; overflow-y: auto; - box-sizing: border-box; } -.nut-address-exist-item { - display: -ms-flexbox; +.nut-sidebar-titles-item { + cursor: pointer; display: flex; - -ms-flex-align: center; align-items: center; - margin-bottom: 20rpx; - font-size: var(--nutui-font-size-s, 12rpx); - line-height: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-color-title, #1a1a1a); + justify-content: center; + height: var(--nutui-sidebar-title-height, 52rpx); + font-size: var(--nutui-sidebar-inactive-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-color-text, #505259); } -.nut-address-exist-item.active { - font-weight: var(--nutui-font-weight-bold, 600); +.nut-sidebar-titles-item-text { + text-align: center; + white-space: normal; + width: var(--nutui-sidebar-width, 104rpx); } -.nut-address-exist-item-info { - margin-left: 9rpx; +.nut-sidebar-titles-item-active .nut-sidebar-titles-item-text { + font-family: PingFangSC-Semibold; + color: var(--nutui-sidebar-active-color, var(--nutui-color-primary, #ff0f23)); + font-weight: var(--nutui-sidebar-active-font-weight, var(--nutui-font-weight-bold, 600)); + font-size: var(--nutui-sidebar-active-font-size, var(--nutui-font-size-l, 15rpx)); } -.nut-address-footer { - width: 100%; - height: 54rpx; - padding: 6rpx 0 0; - border-top: 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)); +.nut-sidebar-titles-item-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc); + cursor: not-allowed; } -.nut-address-footer-btn { - width: 90%; - height: 42rpx; - line-height: 42rpx; - margin: auto; +.nut-shortpassword-popup { + padding: 32rpx 24rpx 28rpx; + border-radius: 12rpx; text-align: center; - background: -webkit-linear-gradient(left, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); - background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); - border-radius: 21rpx; - font-size: 15rpx; - color: #fff; } -.nut-address-title { - font-size: 14rpx; - font-weight: 500; - padding: 16rpx 16rpx 12rpx; +.nut-shortpassword-title { + display: flex; + justify-content: center; + line-height: 1; + font-size: var(--nutui-font-size-l, 15rpx); + color: var(--nutui-color-title, #1a1a1a); } -.nut-address-hotlist { - padding: 0 16rpx; - display: -ms-flexbox; +.nut-shortpassword-description { display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-align: start; - align-items: flex-start; + justify-content: center; + margin-top: 12rpx; + margin-bottom: 24rpx; + line-height: 1; + font-size: var(--nutui-font-size-s, 12rpx); + color: var(--nutui-color-text, #505259); } -.nut-address-hotlist-item { - display: -ms-flexbox; +.nut-shortpassword-input { + padding: 0 0 10rpx; + text-align: center; + position: relative; + overflow: hidden; +} +.nut-shortpassword-input-real { + position: absolute; + right: 0; + width: 247rpx; + height: 41rpx; + outline: 0 none; + border: 0; + text-decoration: none; + z-index: -99; +} +.nut-shortpassword-input-site { + width: 247rpx; + height: 41rpx; + border-radius: 4rpx; +} +.nut-shortpassword-input-fake { + top: 5%; + width: 100%; + height: 41rpx; + margin: 0 auto; + box-sizing: border-box; + background: var(--nutui-shortpassword-background-color, var(--nutui-color-background, #f2f3f5)); + border-radius: 4rpx; + border: 1rpx solid var(--nutui-shortpassword-border-color, var(--nutui-color-background, #f2f3f5)); + display: flex; + position: absolute; + left: 0; +} +.nut-shortpassword-input-fake-li { + flex: 1; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; - width: 63rpx; - height: 28rpx; - font-size: 12rpx; - border-radius: 4rpx; - margin-bottom: 7rpx; - margin-right: 7rpx; - background-color: var(--nutui-color-background-sunken, #f7f8fc); - color: var(--nutui-color-title, #1a1a1a); } -.nut-address-hotlist-item:nth-child(5n) { - margin-right: 0; +.nut-shortpassword-input-fake-li-icon { + height: 6rpx; + width: 6rpx; + border-radius: 50%; + background: #000; + display: inline-block; } -.nut-address-hotlist.hotlist-more .nut-address-hotlist-item { - width: auto; - padding: 0 16rpx; - margin-right: 7rpx; +.nut-shortpassword-message { + margin-top: 9rpx; + display: flex; + justify-content: space-between; + width: 247rpx; } -.nut-address-selected { - width: 100%; - height: 60rpx; - padding: 0 16rpx; - display: -ms-flexbox; +.nut-shortpassword-message-error { + line-height: 1; + font-size: var(--nutui-font-size-xs, 11rpx); + color: var(--nutui-shortpassword-error, var(--nutui-color-primary, #ff0f23)); +} +.nut-shortpassword-message-forget { + line-height: 1; + font-size: var(--nutui-font-size-s, 12rpx); + color: var(--nutui-shortpassword-forget, var(--nutui-color-text-help, #888b94)); display: flex; - -ms-flex-align: center; align-items: center; - border-bottom: 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)); } -.nut-address-selected-item { - font-size: 12rpx; - display: inline-block; - height: 28rpx; - line-height: 28rpx; - padding: 0 12rpx; - border-radius: 4rpx; - background-color: var(--nutui-color-background-sunken, #f7f8fc); +.nut-shortpassword-message-forget .nut-icon { + margin-right: 3rpx; } -.nut-address-selected-item.active { +.nut-shortpassword-footer { + display: flex; + justify-content: space-between; + margin-top: 20rpx; +} +.nut-shortpassword-footer-cancel { + background: #fff; border: 1rpx solid var(--nutui-color-primary, #ff0f23); - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); + border-radius: 15rpx; + padding: 8rpx 38rpx; + line-height: 1; + font-size: var(--nutui-font-size-base, 14rpx); color: var(--nutui-color-primary, #ff0f23); } -.nut-address-selected-border { - margin: 0 2rpx; - color: var(--nutui-color-text-disabled, #c2c4cc); +.nut-shortpassword-footer-sure { + background: linear-gradient(135deg, var(--nutui-color-primary, #ff0f23) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); + border-radius: 15rpx; + padding: 8rpx 38rpx; + line-height: 1; + font-size: var(--nutui-font-size-base, 14rpx); + color: #fff; } -.nut-address-elevator { - margin-top: 0; +[dir='rtl'] .nut-shortpassword-input-real, +.nut-rtl .nut-shortpassword-input-real { + right: auto; + left: 0; } -.nut-address-elevator .nut-elevator-list-item { - position: relative; - padding-left: 20rpx; +[dir='rtl'] .nut-shortpassword-input-fake, +.nut-rtl .nut-shortpassword-input-fake { + left: auto; + right: 0; } -.nut-address-elevator .nut-elevator-list-item-code { - display: inline; - position: absolute; - left: 0; - top: 0; - height: 30rpx; - line-height: 30rpx; - border-bottom: 0; - color: var(--nutui-color-text-help, #888b94); - font-weight: 500; +[dir='rtl'] .nut-shortpassword-footer-sure, +.nut-rtl .nut-shortpassword-footer-sure { + background: linear-gradient(-135deg, var(--nutui-color-primary, #ff0f23) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); } -.nut-address-elevator .nut-elevator-bars { - top: 40%; - padding: 0; - background: none; +.nut-segmented { + display: flex; + display: inline-flex; + height: var(--nutui-segmented-height, 24rpx); + min-width: 24rpx; + padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, 2rpx)); + align-items: center; + border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs, 4rpx)); + background: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)); + box-sizing: border-box; } -.nut-address-elevator .nut-elevator-bars-inner-item { - display: -ms-flexbox; +.nut-segmented-item { display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; + height: var(--nutui-segmented-height, 20rpx); align-items: center; - width: 16rpx; - height: 16rpx; + justify-content: center; + padding: var(--nutui-segmented-item-padding, 0 var(--nutui-spacing-xs, 6rpx)); + border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs, 4rpx)); + color: var(--nutui-segmented-item-color, #ffffff); + font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-size-s, 12rpx)); + line-height: 1; + box-sizing: border-box; +} +.nut-segmented-item-active { + background: var(--nutui-segmented-active-background, var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4))); +} +.nut-segmented-icon { + height: 10rpx; + width: 10rpx; + margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs, 2rpx)); +} +.nut-segmented-icon .nut-icon { + height: 10rpx; + width: 10rpx; font-size: 10rpx; - border-radius: 16rpx; - margin-bottom: 2rpx; - color: var(--nutui-color-text-help, #888b94); } -.nut-address-elevator .nut-elevator-bars-inner-item-active { - background-color: var(--nutui-color-primary, #ff0f23); - color: var(--nutui-color-background-overlay, #ffffff); - font-weight: 400; +.nut-searchbar { + display: flex; + align-items: center; + width: var(--nutui-searchbar-width, 100%); + padding: var(--nutui-searchbar-padding, 1rpx 8rpx); + background: var(--nutui-searchbar-background, var(--nutui-color-background-sunken, #f7f8fc)); + color: var(--nutui-searchbar-color, var(--nutui-color-title, #1a1a1a)); + font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14rpx)); + box-sizing: border-box; + justify-content: center; } -[dir='rtl'] .nut-address-exist-item-info, -.nut-rtl .nut-address-exist-item-info { - margin-left: 0; - margin-right: 9rpx; +.nut-searchbar .nut-icon { + width: var(--nutui-searchbar-icon-size, 20rpx); + height: var(--nutui-searchbar-icon-size, 20rpx); + font-size: var(--nutui-searchbar-icon-size, 20rpx); } - /* tokens: template-corpus-apply <= src/pages/index/index.tsx */ -.template-corpus-apply { - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; +.nut-searchbar-content { + position: relative; + flex: 1; + display: flex; align-items: center; - gap: calc(var(--spacing) * 2); - border-radius: 20rpx; - --tw-gradient-position: to right; - background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); - background-image: linear-gradient(var(--tw-gradient-stops)); - --tw-gradient-from: #9e58e9; - --tw-gradient-to: var(--color-blue-500); - --tw-gradient-stops: - var(--tw-gradient-via-stops, var(--tw-gradient-position)), var(--tw-gradient-from) var(--tw-gradient-from-position, ), var(--tw-gradient-to) var(--tw-gradient-to-position, ); - padding-left: 18rpx; - padding-right: 18rpx; - padding-top: 10rpx; - padding-bottom: 10rpx; - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - font-size: 26rpx; - color: var(--color-white); + justify-content: center; + padding: 0 var(--nutui-searchbar-gap, 12rpx); + height: var(--nutui-searchbar-input-height, 38rpx); + background: var(--nutui-searchbar-content-background, var(--nutui-color-background-overlay, #ffffff)); + border-radius: var(--nutui-searchbar-content-border-radius, 8rpx); + border: 1rpx solid var(--nutui-color-primary, #ff0f23); } -@charset "UTF-8"; -@font-face { - font-family: JDZH-Regular; - src: url(data:font/ttf;base64,) format('truetype'); - font-weight: 400; - font-style: normal; - font-display: swap; +.nut-searchbar-icon { + display: flex; + justify-content: center; + align-items: center; + color: var(--nutui-color-primary, #ff0f23); } -@font-face { - font-family: JDZH-Bold; - src: url(data:font/ttf;base64,) format('truetype'); - font-weight: 700; - font-style: normal; - font-display: swap; +.nut-searchbar-leftin { + margin-right: var(--nutui-searchbar-inner-gap, 8rpx); } -.nutFade-enter-active, -.nutFadeIn, -.nutFade-leave-active, -.nutFadeOut { - animation-duration: 0.25s; - animation-fill-mode: both; - animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); +.nut-searchbar-rightin { + font-size: 15rpx; + font-weight: 500; + color: var(--nutui-color-primary, #ff0f23); } -.nutFade-enter-active, -.nutFadeIn { - animation-name: nutFadeIn; +.nut-searchbar-rightin.nut-searchbar-icon { + color: var(--nutui-black-5); } -.nutFade-leave-active, -.nutFadeOut { - animation-name: nutFadeOut; +.nut-searchbar-input-box, +.nut-searchbar-input { + display: flex; + align-items: center; + flex: 1; } -@keyframes nutZoomIn { - 0% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); - } +.nut-searchbar-input { + border: 0; + outline: 0; + box-sizing: border-box; + width: 100%; + padding: 0; + margin: 0; + font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a)); + caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-primary, #ff0f23)); + background: transparent; + text-align: var(--nutui-searchbar-input-text-align, left); } -@keyframes nutZoomOut { - 50% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); - } +.nut-searchbar-clear.nut-searchbar-icon { + position: relative; } -.nutZoom-enter-active, -.nutZoomIn, -.nutZoom-leave-active, -.nutZoomOut { - animation-duration: 0.25s; - animation-fill-mode: both; - animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); +.nut-searchbar-clear.nut-searchbar-icon .nut-icon { + width: 12rpx; + height: 12rpx; + color: var(--nutui-black-5); + margin-right: var(--nutui-searchbar-inner-gap, 8rpx); +} +.nut-searchbar-clear.nut-searchbar-icon::after { + content: ''; + position: absolute; + width: 100%; + height: 200%; + left: -20%; +} +.nut-searchbar-values { + position: absolute; + display: flex; + flex-direction: row; + z-index: 2; + background-color: #fff; + top: 9rpx; + left: 6rpx; + font-size: 12rpx; + line-height: 12rpx; } -.nutZoom-enter-active, -.nutZoomIn { - animation-name: nutZoomIn; +.nut-searchbar-values .nut-searchbar-value { + display: flex; + flex-direction: row; + align-items: center; + padding: 4rpx 8rpx; + background-color: #f7f8fc; + border-radius: 4rpx; + margin-right: 2rpx; } -.nutZoom-leave-active, -.nutZoomOut { - animation-name: nutZoomOut; +.nut-searchbar-values .nut-icon { + width: 6rpx; + height: 6rpx; + font-size: 6rpx; + color: #c2c4cc; + margin-left: 4rpx; } -@keyframes nutEaseIn { - 0% { - opacity: 0; - transform: scale(0.9); - } - to { - opacity: 1; - transform: scale(1); - } +.nut-searchbar-left, +.nut-searchbar-right { + display: flex; + display: inline-flex; + align-items: center; } -@keyframes nutEaseOut { - 0% { - opacity: 1; - transform: scale(1); - } - to { - opacity: 0; - transform: scale(0.9); - } +.nut-searchbar-left.nut-icon, +.nut-searchbar-right.nut-icon { + width: 20rpx; + height: 20rpx; } -.nutEase-enter-active, -.nutEaseIn, -.nutEase-leave-active, -.nutEaseOut { - animation-duration: 0.25s; - animation-fill-mode: both; - animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); +.nut-searchbar-left { + margin-right: var(--nutui-searchbar-gap, 12rpx); } -.nutEase-enter-active, -.nutEaseIn { - animation-name: nutEaseIn; +.nut-searchbar-left > .h5-div, +.nut-searchbar-left > .h5-span, +.nut-searchbar-left > .h5-i, +.nut-searchbar-left > .h5-svg, +.nut-searchbar-left .nut-icon { + margin-right: var(--nutui-searchbar-gap, 12rpx); } -.nutEase-leave-active, -.nutEaseOut { - animation-name: nutEaseOut; +.nut-searchbar-left > .h5-div:last-child, +.nut-searchbar-left > .h5-span:last-child, +.nut-searchbar-left > .h5-i:last-child, +.nut-searchbar-left > .h5-svg:last-child, +.nut-searchbar-left .nut-icon:last-child { + margin-right: 0; } -@keyframes nutDropIn { - 0% { - opacity: 0; - transform: scaleY(0.8); - } - to { - opacity: 1; - transform: scaleY(1); - } +.nut-searchbar-right { + margin-left: var(--nutui-searchbar-gap, 12rpx); } -@keyframes nutDropOut { - 0% { - opacity: 1; - transform: scaleY(1); - } - to { - opacity: 0; - transform: scaleY(0.8); - } +.nut-searchbar-right > .h5-div, +.nut-searchbar-right > .h5-span, +.nut-searchbar-right > .h5-i, +.nut-searchbar-right > .h5-svg, +.nut-searchbar-right .nut-icon { + margin-left: var(--nutui-searchbar-gap, 12rpx); } -.nutDrop-enter-active, -.nutDropIn, -.nutDrop-leave-active, -.nutDropOut { - animation-duration: 0.25s; - animation-fill-mode: both; - animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); +.nut-searchbar-right > .h5-div:first-child, +.nut-searchbar-right > .h5-span:first-child, +.nut-searchbar-right > .h5-i:first-child, +.nut-searchbar-right > .h5-svg:first-child, +.nut-searchbar-right .nut-icon:first-child { + margin-left: 0; } -.nutDrop-enter-active, -.nutDropIn { - animation-name: nutDropIn; +.nut-searchbar-left > text, +.nut-searchbar-left > view { + margin-right: var(--nutui-searchbar-gap, 12rpx); } -.nutDrop-leave-active, -.nutDropOut { - animation-name: nutDropOut; +.nut-searchbar-left > text:last-child, +.nut-searchbar-left > view:last-child { + margin-right: 0; } -.nutRotate-enter-active, -.nutRotateIn, -.nutRotate-leave-active, -.nutRotateOut { - animation-duration: 0.25s; - animation-fill-mode: both; - animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); +.nut-searchbar-right > text, +.nut-searchbar-right > view { + margin-left: var(--nutui-searchbar-gap, 12rpx); } -.nutRotate-enter-active, -.nutRotateIn { - animation-name: nutRotateIn; +.nut-searchbar-right > text:first-child, +.nut-searchbar-right > view:first-child { + margin-left: 0; } -.nutRotate-leave-active, -.nutRotateOut { - animation-name: nutRotateOut; +.nut-searchbar-round { + border-radius: var(--nutui-searchbar-content-round-border-radius, 19rpx); } -@keyframes nutJump { - to { - transform: scale3d(0.8, 1, 0.9) translateY(-10rpx); - } +.nut-searchbar-disabled { + cursor: not-allowed; } -@keyframes nutJumpOne { - 50% { - transform: scale3d(0.8, 1, 0.9) translateY(-10rpx); - } - to { - transform: scaleZ(1) translateY(0); - } +.nut-searchbar-focus { + padding: 5rpx var(--nutui-searchbar-gap, 12rpx); } -@keyframes nutBreathe { - 0%, - to { - transform: scale(1); - } - 50% { - transform: scale(1.2); - } +.nut-searchbar-focus .nut-searchbar-content { + border: 0.5rpx solid #ff5c67; } -@keyframes nutBounce { - 0%, - 20%, - 53%, - to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - transform: translateZ(0); - } - 40%, - 43% { - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - transform: translate3d(0, -30rpx, 0) scaleY(1.1); - } - 70% { - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - transform: translate3d(0, -15rpx, 0) scaleY(1.05); - } - 80% { - transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - transform: translateZ(0) scaleY(0.95); - } - 90% { - transform: translate3d(0, -4rpx, 0) scaleY(1.02); - } +[dir='rtl'] .nut-searchbar-left, +.nut-rtl .nut-searchbar-left { + margin-right: 0; + margin-left: var(--nutui-searchbar-gap, 12rpx); } -@keyframes nutShake { - 0% { - transform: translate(0); - } - 6.5% { - transform: translate(-6rpx) rotateY(-9deg); - } - 18.5% { - transform: translate(5rpx) rotateY(7deg); - } - 31.5% { - transform: translate(-3rpx) rotateY(-5deg); - } - 43.5% { - transform: translate(2rpx) rotateY(3deg); - } - 50% { - transform: translate(0); - } +[dir='rtl'] .nut-searchbar-left > .h5-div, +[dir='rtl'] .nut-searchbar-left > .h5-span, +[dir='rtl'] .nut-searchbar-left > .h5-svg, +.nut-rtl .nut-searchbar-left > .h5-div, +.nut-rtl .nut-searchbar-left > .h5-span, +.nut-rtl .nut-searchbar-left > .h5-svg { + margin-right: 0; + margin-left: var(--nutui-searchbar-gap, 12rpx); } -.nut-horizontal-items .h5-li { - display: block; - float: left; - color: var(--nutui-color-title, #1a1a1a); - background: var(--nutui-color-background-overlay, #ffffff); - padding: 10rpx; - margin-right: 20rpx; +[dir='rtl'] .nut-searchbar-left > .h5-div.nut-icon, +[dir='rtl'] .nut-searchbar-left > .h5-span.nut-icon, +[dir='rtl'] .nut-searchbar-left > .h5-svg.nut-icon, +.nut-rtl .nut-searchbar-left > .h5-div.nut-icon, +.nut-rtl .nut-searchbar-left > .h5-span.nut-icon, +.nut-rtl .nut-searchbar-left > .h5-svg.nut-icon { + transform: rotate(180deg); } -.nut-vertical-items .h5-li { - display: block; - color: var(--nutui-color-title, #1a1a1a); - background: var(--nutui-color-background-overlay, #ffffff); - border-radius: 7rpx; - box-shadow: 0 1rpx 6rpx #edeef1; - margin-top: 20rpx; - padding: 14rpx 15rpx; - font-size: 13rpx; - line-height: 18rpx; - font-family: PingFangSC; - font-weight: 500; +[dir='rtl'] .nut-searchbar-left > .h5-div:last-child, +[dir='rtl'] .nut-searchbar-left > .h5-span:last-child, +[dir='rtl'] .nut-searchbar-left > .h5-svg:last-child, +.nut-rtl .nut-searchbar-left > .h5-div:last-child, +.nut-rtl .nut-searchbar-left > .h5-span:last-child, +.nut-rtl .nut-searchbar-left > .h5-svg:last-child { + margin-right: 0; + margin-left: 0; } -.nut-virtuallist-item { - overflow: hidden; - margin: var(--nutui-list-item-margin, 0 0 10rpx 0); +[dir='rtl'] .nut-searchbar-right, +.nut-rtl .nut-searchbar-right { + margin-left: 0; + margin-right: var(--nutui-searchbar-gap, 12rpx); } -[dir='rtl'] .nut-horizontal-items .h5-li, -.nut-rtl .nut-horizontal-items .h5-li { - float: right; +[dir='rtl'] .nut-searchbar-right > .h5-div, +[dir='rtl'] .nut-searchbar-right > .h5-span, +[dir='rtl'] .nut-searchbar-right > .h5-svg, +.nut-rtl .nut-searchbar-right > .h5-div, +.nut-rtl .nut-searchbar-right > .h5-span, +.nut-rtl .nut-searchbar-right > .h5-svg { + margin-left: 0; + margin-right: var(--nutui-searchbar-gap, 12rpx); +} +[dir='rtl'] .nut-searchbar-right > .h5-div:first-child, +[dir='rtl'] .nut-searchbar-right > .h5-span:first-child, +[dir='rtl'] .nut-searchbar-right > .h5-svg:first-child, +.nut-rtl .nut-searchbar-right > .h5-div:first-child, +.nut-rtl .nut-searchbar-right > .h5-span:first-child, +.nut-rtl .nut-searchbar-right > .h5-svg:first-child { + margin-left: 0; margin-right: 0; - margin-left: 20rpx; } -.nut-uploader-upload { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - background: var(--nutui-uploader-background, var(--nutui-color-background, #f2f3f5)); - width: var(--nutui-uploader-image-width, 100rpx); - height: var(--nutui-uploader-image-height, 100rpx); - border: var(--nutui-uploader-image-border, 0rpx); - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); +[dir='rtl'] .nut-searchbar-left > text, +[dir='rtl'] .nut-searchbar-left > view, +.nut-rtl .nut-searchbar-left > text, +.nut-rtl .nut-searchbar-left > view { + margin-right: 0; + margin-left: var(--nutui-searchbar-gap, 12rpx); } -.nut-uploader-icon .h5-i, -.nut-uploader-icon .nut-icon { - color: var(--nutui-uploader-image-color, var(--nutui-color-text-help, #888b94)); - margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); +[dir='rtl'] .nut-searchbar-left > text:last-child, +[dir='rtl'] .nut-searchbar-left > view:last-child, +.nut-rtl .nut-searchbar-left > text:last-child, +.nut-rtl .nut-searchbar-left > view:last-child { + margin-right: 0; + margin-left: 0; } -.nut-uploader-icon-tip { - font-size: var(--nutui-uploader-image-icon-tip-font-size, 12rpx); +[dir='rtl'] .nut-searchbar-right > text, +[dir='rtl'] .nut-searchbar-right > view, +.nut-rtl .nut-searchbar-right > text, +.nut-rtl .nut-searchbar-right > view { + margin-left: 0; + margin-right: var(--nutui-searchbar-gap, 12rpx); } -.nut-uploader-upload-disabled .nut-uploader-icon .h5-i, -.nut-uploader-upload-disabled .nut-uploader-icon .nut-icon { - color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled, #c2c4cc)); - margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); +[dir='rtl'] .nut-searchbar-right > text:first-child, +[dir='rtl'] .nut-searchbar-right > view:first-child, +.nut-rtl .nut-searchbar-right > text:first-child, +.nut-rtl .nut-searchbar-right > view:first-child { + margin-left: 0; + margin-right: 0; } -.nut-uploader-preview { - position: relative; - margin-right: var(--nutui-uploader-preview-margin-right, 10rpx); - margin-bottom: var(--nutui-uploader-preview-margin-bottom, 10rpx); - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); - box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); +[dir='rtl'] .nut-searchbar-input, +.nut-rtl .nut-searchbar-input { + text-align: var(--nutui-searchbar-input-text-align, right); } -.nut-uploader-preview-progress { - position: absolute; - left: 0; - top: 0; - display: -ms-flexbox; +.nut-safe-area { display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; width: 100%; - height: 100%; - background: var(--nutui-uploader-preview-progress-background, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); - z-index: 10; -} -.nut-uploader-preview-progress .h5-i { - margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); } -.nut-uploader-preview-progress-msg { - color: var(--nutui-color-text-help, #888b94); - font-size: 12rpx; +.nut-safe-area-position-top { + padding-top: calc(constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)); + padding-top: calc(env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)); } -.nut-uploader-preview.list { - width: 100%; - margin-right: 0; - margin-bottom: 0; - margin-top: 10rpx; - box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.01176); +.nut-safe-area-position-bottom { + padding-bottom: calc(constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)); + padding-bottom: calc(env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)); } -.nut-uploader-preview-list { +.nut-resultpage { width: 100%; - height: 32rpx; - box-sizing: border-box; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; + flex-direction: column; align-items: center; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 0 10rpx; - background-color: var(--nutui-color-background-sunken, #f7f8fc); + margin: 0 auto; } -.nut-uploader-preview-list .nut-uploader-preview-img-file-name { - display: -ms-flexbox; +.nut-resultpage-icon { display: flex; - -ms-flex-align: center; - align-items: center; - -webkit-line-clamp: 1; - padding: 2rpx; - height: 24rpx; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + display: inline-flex; + margin-bottom: var(--nutui-resultpage-icon-margin-bottom, 12rpx); } -.nut-uploader-preview-list .nut-progress .nut-progress-outer { - height: 2rpx !important; +.nut-resultpage-icon .nut-icon { + height: var(--nutui-resultpage-icon-size, 36rpx); + width: var(--nutui-resultpage-icon-size, 36rpx); } -.nut-uploader-preview .close { - position: absolute; - right: var(--nutui-uploader-preview-close-right, 0rpx); - top: var(--nutui-uploader-preview-close-top, 0rpx); - -ms-transform: translate(50%, -50%); - transform: translate(50%, -50%); - z-index: 1; +.nut-resultpage-title { + width: var(--nutui-resultpage-width, 240rpx); + margin-bottom: var(--nutui-resultpage-title-margin-bottom, 12rpx); + font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, 18rpx)); + color: var(--nutui-resultpage-title-color, var(--nutui-color-title, #1a1a1a)); + font-weight: var(--nutui-font-weight-bold, 600); + text-align: center; } -.nut-uploader-preview-img { - position: relative; - width: var(--nutui-uploader-image-width, 100rpx); - height: var(--nutui-uploader-image-height, 100rpx); - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); +.nut-resultpage-description { + width: var(--nutui-resultpage-width, 240rpx); + line-height: var(--nutui-resultpage-description-line-height, 20rpx); + font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-resultpage-description-color, var(--nutui-color-text, #505259)); + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; overflow: hidden; + word-break: break-all; } -.nut-uploader-preview-img .h5-i { - color: var(--nutui-color-title, #1a1a1a); +.nut-resultpage-actions { + display: flex; + flex-direction: row; + margin-top: var(--nutui-resultpage-actions-margin-top, 16rpx); } -.nut-uploader-preview-img .tips { - position: absolute; - bottom: 0; - left: 0; - font-size: 12rpx; - color: #fff; - text-align: center; - box-sizing: border-box; - height: var(--nutui-uploader-preview-tips-height, 24rpx); - line-height: var(--nutui-uploader-preview-tips-height, 24rpx); - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); - border-top-left-radius: 0; - border-top-right-radius: 0; - padding: var(--nutui-uploader-preview-tips-padding, 0 5rpx); - background: var(--nutui-uploader-preview-tips-background, var(--nutui-black-7)); - width: 100%; - overflow: hidden; - text-overflow: ellipsis; +.nut-resultpage-actions .nut-button-children { white-space: nowrap; } -.nut-uploader-preview-img-c { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - height: 100%; - position: static; - position: initial; - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); +.nut-resultpage-action { + margin-left: 6rpx; + margin-right: 6rpx; } -.nut-uploader-preview-img-file-name { - display: -ms-flexbox; +.nut-row { display: flex; - width: 90%; - font-size: 12rpx; - color: var(--nutui-color-text, #505259); - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; + flex-direction: row; + width: 100%; overflow: hidden; - word-break: break-all; } -[dir='rtl'] .nut-uploader-preview, -.nut-rtl .nut-uploader-preview { - margin-right: 0; - margin-left: var(--nutui-uploader-preview-margin-right, 10rpx); +.nut-row::after { + display: block; + height: 0; + clear: both; + visibility: hidden; + content: ''; } -[dir='rtl'] .nut-uploader-preview .close, -.nut-rtl .nut-uploader-preview .close { - right: auto; - left: var(--nutui-uploader-preview-close-right, 0rpx); - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); +.nut-row-flex { + display: flex; +} +.nut-row-flex::after { + display: none; +} +.nut-row-justify-center { + justify-content: center; } -.nut-video .h5-video { - width: 100%; - height: 100%; - -o-object-fit: fill; - object-fit: fill; +.nut-row-justify-end { + justify-content: flex-end; } -.nut-tour-mask { - position: fixed; - box-shadow: 0 0 0 150vh var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); - border-radius: var(--nutui-tour-mask-border-radius, 10rpx); - z-index: 999; +.nut-row-justify-space-between { + justify-content: space-between; + align-items: center; } -.nut-tour-content { - display: block; - padding: var(--nutui-tour-content-padding, 10rpx 12rpx); - min-width: var(--nutui-tour-content-min-width, 200rpx); - box-sizing: content-box; +.nut-row-justify-space-around { + justify-content: space-around; } -.nut-tour-content-top { - display: block; - text-align: right; +.nut-row-align-flex-start { + align-items: flex-start; } -.nut-tour-content-top-close { - --nut-icon-width: 10rpx; - --nut-icon-height: 10rpx; +.nut-row-align-center { + align-items: center; } -.nut-tour-content-inner { - margin: var(--nutui-tour-content-inner-margin, 10rpx 0rpx); - font-size: var(--nutui-tour-content-inner-font-size, 14rpx); - white-space: nowrap; +.nut-row-align-flex-end { + align-items: flex-end; } -.nut-tour-content-bottom { - margin-top: var(--nutui-tour-content-bottom-margin-top, 10rpx); - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - justify-content: space-between; +.nut-row-flex-wrap { + flex-wrap: wrap; } -.nut-tour-content-bottom-operate-btn { - display: inline-block; - border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); - margin-left: var(--nutui-tour-content-bottom-btn-margin-left, 4rpx); - padding: var(--nutui-tour-content-bottom-btn-padding, 2rpx 4rpx); - font-size: var(--nutui-tour-content-bottom-btn-font-size, 12rpx); - border-radius: var(--nutui-tour-content-bottom-btn-border-radius, 4rpx); - color: var(--nutui-color-text, #505259); - cursor: pointer; +.nut-row-flex-nowrap { + flex-wrap: nowrap; } -[dir='rtl'] .nut-tour-content-bottom-operate-btn, -.nut-rtl .nut-tour-content-bottom-operate-btn { - margin-left: 0; - margin-right: var(--nutui-tour-content-bottom-btn-margin-left, 4rpx); +.nut-row-flex-reverse { + flex-wrap: wrap-reverse; } -.nut-trendarrow { - display: -ms-flexbox; +.nut-range-container { display: flex; - -ms-flex-direction: row; flex-direction: row; - -ms-flex-align: center; + position: relative; + width: 100%; + height: var(--nutui-range-height, 4rpx); align-items: center; - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-trendarrow-font-size, 14rpx); + justify-content: space-between; } -.nut-trendarrow-icon-before { - margin-right: var(--nutui-trendarrow-icon-margin, 4rpx); +.nut-range-container-native { + height: auto; } -.nut-trendarrow-icon-after { - margin-left: var(--nutui-trendarrow-icon-margin, 4rpx); +.nut-range { + display: block; + position: relative; + height: var(--nutui-range-height, 4rpx); + margin: 0 var(--nutui-range-margin, 15rpx); + background-color: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1)); + border-radius: 2rpx; + flex: 1; + cursor: pointer; } -[dir='rtl'] .nut-trendarrow-icon-before, -.nut-rtl .nut-trendarrow-icon-before { - margin-right: 0; - margin-left: var(--nutui-trendarrow-icon-margin, 4rpx); +.nut-range::before { + position: absolute; + top: -8rpx; + bottom: -8rpx; + left: 0; + right: 0; + content: ''; } -[dir='rtl'] .nut-trendarrow-icon-after, -.nut-rtl .nut-trendarrow-icon-after { - margin-left: 0; - margin-right: var(--nutui-trendarrow-icon-margin, 4rpx); +.nut-range-min, +.nut-range-max { + font-size: var(--nutui-font-size-s, 12rpx); + color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a)); + user-select: none; } -@keyframes rotation { - 0% { - } - to { - } +.nut-range-bar { + display: block; + position: relative; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23)); + border-radius: 2rpx; } -.nut-toast-overlay-default-taro { - background-color: rgba(0, 0, 0, 0); - --nutui-overlay-bg-color: rgba(0, 0, 0, 0); +.nut-range-bar-animate { + transition: all 0.2s; } -.nut-toast-inner { +.nut-range-button { position: absolute; - top: var(--nutui-toast-inner-top, 50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; + width: var(--nutui-range-button-width, 24rpx); + height: var(--nutui-range-button-height, 24rpx); + background: var(--nutui-range-button-background, #ffffff); + border-radius: 50%; + box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.14902); + border: var(--nutui-range-button-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); + outline: none; align-items: center; - min-width: 96rpx; - max-width: 60%; - box-sizing: border-box; - font-size: var(--nutui-toast-text-font-size, 14rpx); - text-align: var(--nutui-toast-inner-text-align, center); - padding: var(--nutui-toast-inner-padding, 13rpx 16rpx); - word-break: break-all; - background: var(--nutui-toast-inner-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); - border-radius: var(--nutui-toast-inner-border-radius, var(--nutui-radius-xl, 12rpx)); - color: var(--nutui-toast-font-color, #ffffff); + top: 50%; + left: 50%; } -.nut-toast-inner-small { +.nut-range-button-wrapper, +.nut-range-button-wrapper-right, +.nut-range-button-wrapper-left { + width: var(--nutui-range-button-width, 24rpx); + height: var(--nutui-range-button-height, 24rpx); +} +.nut-range-button-wrapper, +.nut-range-button-wrapper-right { + touch-action: none; + position: absolute; + top: 50%; + left: 100%; + cursor: grab; + outline: none; +} +.nut-range-button-wrapper-left { + position: absolute; + top: 50%; + left: 0; + cursor: grab; + outline: none; + touch-action: none; +} +.nut-range-button-number { + position: relative; + width: 200%; + height: 24rpx; + line-height: 14rpx; + padding: 5rpx 0; + left: 50%; + display: flex; + align-items: center; + justify-content: center; + user-select: none; font-size: var(--nutui-font-size-s, 12rpx); + color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a)); + text-align: center; + vertical-align: center; + box-sizing: border-box; } -.nut-toast-inner-large { - font-size: var(--nutui-font-size-l, 15rpx); +.nut-range-disabled { + cursor: not-allowed; + opacity: 0.54; } -.nut-toast-text { - color: #fff; - text-align: var(--nutui-toast-inner-text-align, center); - line-height: normal; - line-height: 20rpx; - height: auto; +.nut-range-disabled .nut-range-button-wrapper, +.nut-range-disabled .nut-range-button-wrapper-left, +.nut-range-disabled .nut-range-button-wrapper-right { + cursor: not-allowed; } -.nut-toast-title { - color: #fff; - font-size: var(--nutui-toast-title-font-size, 16rpx); - font-weight: 600; - text-align: var(--nutui-toast-inner-text-align, center); - line-height: normal; - line-height: 22rpx; +.nut-range-mark { + position: absolute; + width: 100%; + height: 14rpx; + overflow: visible; + top: 50%; +} +.nut-range-mark-text-wrapper { + position: absolute; + height: 100%; + top: 14rpx; + display: inline-block; + transform: translate(-10rpx); +} +.nut-range-mark-text { + position: absolute; + line-height: 16rpx; + font-size: 12rpx; + color: #999; + text-align: center; + word-break: keep-all; + user-select: none; +} +.nut-range-tick { + position: absolute; + top: -20rpx; + width: 11rpx; + height: 11rpx; + left: 0; + border-radius: 6rpx; + background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1)); +} +.nut-range-tick-active { + background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-range-vertical-container { + height: 100%; + flex-direction: column; + padding: 0 15rpx; } -.nut-toast .nut-icon { - width: 24rpx; - height: 24rpx; - color: #fff; +.nut-range-vertical { + width: var(--nutui-range-height, 4rpx); + margin: var(--nutui-range-margin, 15rpx) 0rpx; } -.nut-toast-icon-wrapper { - width: 100%; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - margin: 3rpx 0 5rpx; - color: #fff; +.nut-range-vertical-button-wrapper, +.nut-range-vertical-button-wrapper-right { + position: absolute; + top: auto; + top: initial; + right: auto; + right: initial; + top: 100%; + left: 50%; } -.nut-toast-icon-wrapper-icon { - width: 24rpx; - height: 24rpx; +.nut-range-vertical-button-wrapper-left { + top: 0; + left: 50%; + right: auto; + right: initial; } -.nut-timeselect { - background-color: var(--nutui-color-background-overlay, #ffffff); - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - height: calc(100% - 50rpx); +.nut-range-vertical-button-number { + left: 0; + top: 50%; } -.nut-timeselect-content-left { - width: var(--nutui-timeselect-date-width, 140rpx); - min-width: var(--nutui-timeselect-date-width, 140rpx); +.nut-range-vertical-mark { + position: absolute; + width: 36rpx; height: 100%; - overflow: auto; - background: var(--nutui-color-background-sunken, #f7f8fc); + top: 0; + right: 50%; + overflow: visible; + font-size: 12rpx; + padding: 0; } -.nut-timepannel { - padding: 0 16rpx; - height: var(--nutui-timeselect-date-height, 40rpx); - line-height: var(--nutui-timeselect-date-height, 40rpx); - text-align: left; - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-font-size-base, 14rpx); +.nut-range-vertical-mark-hm { + left: -34rpx; } -.nut-timedetail { - display: -ms-flexbox; - display: flex; - -ms-flex-line-pack: start; - align-content: flex-start; - -ms-flex: 1; - flex: 1; - min-width: 0; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - padding: 0 0 50rpx 12rpx; +.nut-range-vertical-mark-text-wrapper { + height: 16rpx; + position: absolute; + display: inline-block; + user-select: none; + transform: translateY(-11rpx); } -.nut-timedetail-item { - width: var(--nutui-timeselect-time-width, 100rpx); - height: var(--nutui-timeselect-time-height, 50rpx); - line-height: var(--nutui-timeselect-time-height, 50rpx); +.nut-range-vertical-mark-text { + height: 100%; + line-height: 16rpx; + color: #999; text-align: center; - margin: var(--nutui-timeselect-time-margin, 0 10rpx 10rpx 0); - background: var(--nutui-timeselect-time-background, var(--nutui-color-background, #f2f3f5)); + word-break: keep-all; +} +.nut-range-vertical-tick { + position: absolute; + top: 2rpx; + left: 31rpx; + width: 10rpx; + height: 10rpx; border-radius: 5rpx; - font-size: var(--nutui-font-size-base, 14rpx); - border: 1rpx solid transparent; + background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1)); } -.nut-timedetail-item.active { - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); - border: 1rpx solid var(--nutui-color-primary, #ff0f23); - color: var(--nutui-color-primary, #ff0f23); - font-weight: var(--nutui-font-weight-bold, 600); +.nut-range-vertical-tick-active { + background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23)); } -[dir='rtl'] .nut-timedetail, -.nut-rtl .nut-timedetail { - padding: 0 12rpx 50rpx 0; +[dir='rtl'] .nut-range-button-wrapper, +[dir='rtl'] .nut-range-button-wrapper-right, +.rtl-nut-range-button-wrapper, +.rtl-nut-range-button-wrapper-right { + left: 0; + right: auto; + right: initial; } -.nut-tag { - padding: var(--nutui-tag-padding, 0rpx 2rpx); - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10rpx)); - border-radius: var(--nutui-tag-border-radius, 2rpx); - height: var(--nutui-tag-height, 14rpx); - color: var(--nutui-tag-color, #ffffff); - border: var(--nutui-tag-border-width, 1rpx) solid transparent; +[dir='rtl'] .nut-range-button-wrapper-left, +.rtl-nut-range-button-wrapper-left, +[dir='rtl'] .nut-range-tick, +.rtl-nut-range-tick { + right: 0; + left: auto; + left: initial; } -.nut-tag .nut-icon { - vertical-align: middle; - margin-left: 4rpx; - color: var(--nutui-tag-color, #ffffff); +[dir='rtl'] .nut-range-mark-text, +.rtl-nut-range-mark-text { + transform: translate(10rpx); } -.nut-tag-text { - font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10rpx)); - color: var(--nutui-tag-color, #ffffff); +[dir='rtl'] .nut-range-vertical-button-wrapper, +[dir='rtl'] .nut-range-vertical-button-wrapper-right, +.rtl-nut-range-vertical-button-wrapper, +.rtl-nut-range-vertical-button-wrapper-right, +[dir='rtl'] .nut-range-vertical-button-wrapper-left, +.rtl-nut-range-vertical-button-wrapper-left { + right: 50%; + left: auto; + left: initial; } -.nut-tag-round { - border-radius: var(--nutui-tag-round-border-radius, 8rpx); +[dir='rtl'] .nut-range-vertical-mark, +.rtl-nut-range-vertical-mark { + right: auto; + left: 50%; } -.nut-tag-mark { - border-radius: var(--nutui-tag-mark-border-radius, 0 8rpx 8rpx 0); +[dir='rtl'] .nut-range-vertical-tick, +.rtl-nut-range-vertical-tick { + left: auto; + right: 30rpx; + margin-left: 0; + margin-right: 0; } -.nut-tag-custom-icon { - display: -ms-flexbox; +[dir='rtl'] .nut-range-vertical-mark-text-wrapper, +.rtl-nut-range-vertical-mark-text-wrapper { + transform: translateY(-11rpx); +} +.nut-rate { display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10rpx)); - color: var(--nutui-tag-color, #ffffff); - margin-left: 4rpx; + touch-action: pan-x; } -.nut-tag-plain { - background-color: #fff; - border: var(--nutui-tag-border-width, 1rpx) solid var(--nutui-color-title, #1a1a1a); +.nut-rate.disabled .nut-rate-item-icon { + cursor: not-allowed; } -[dir='rtl'] .nut-tag .nut-icon, -.nut-rtl .nut-tag .nut-icon { - margin-left: 0; - margin-right: 4rpx; +.nut-rate.readonly .nut-rate-item-icon { + cursor: default; } -.nut-textarea { - display: -ms-flexbox; +.nut-rate-item { display: flex; - -ms-flex-direction: column; - flex-direction: column; + align-items: center; + flex-shrink: 0; position: relative; - width: 100%; - box-sizing: border-box; - font-size: var(--nutui-font-size-base, 14rpx); - border-radius: var(--nutui-radius-s, 6rpx); } -.nut-textarea-container { - padding: var(--nutui-textarea-padding, 12rpx); - background-color: var(--nutui-color-background-overlay, #ffffff); +.nut-rate-item-half { + position: absolute; + height: 100%; + width: 50% !important; + left: 0; + top: 0; + overflow: hidden; } -.nut-textarea-error { - border: 0.5rpx solid var(--nutui-color-danger, #ff0f23); - background-color: var(--nutui-color-danger-light, #ffebef); +.nut-rate-item-half .nut-icon { + flex-shrink: 0; } -.nut-textarea-limit { - text-align: right; - font-size: var(--nutui-font-size-base, 14rpx); - line-height: var(--nutui-font-size-base, 14rpx); - margin-top: var(--nutui-spacing-base, 8rpx); - color: var(--nutui-color-text-help, #888b94); +.nut-rate-item-normal { + margin-left: var(--nutui-rate-item-margin, 4rpx); } -.nut-textarea-textarea { - outline: none; - display: block; - box-sizing: border-box; - width: 100%; - height: 40rpx; - min-width: 0; - margin: 0; - padding: 0; - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-textarea-text-color, var(--nutui-color-title, #1a1a1a)); - caret-color: var(--nutui-textarea-text-curror-color, var(--nutui-color-primary, #ff0f23)); - text-align: left; - background-color: transparent; - border: 0; - resize: none; +.nut-rate-item-normal .nut-icon { + height: var(--nutui-rate-icon-size, 12rpx); + width: var(--nutui-rate-icon-size, 12rpx); } -.nut-textarea-textarea::-webkit-input-placeholder { - color: var(--nutui-color-text-help, #888b94); +.nut-rate-item-large { + margin-left: calc(var(--nutui-rate-item-margin, 4rpx) * 2); } -.nut-textarea-textarea-disabled::-webkit-input-placeholder { - color: var(--nutui-color-text-disabled, #c2c4cc); +.nut-rate-item-large .nut-icon { + height: calc(var(--nutui-rate-icon-size, 12rpx) + 8rpx); + width: calc(var(--nutui-rate-icon-size, 12rpx) + 8rpx); } -.nut-textarea-textarea-disabled .taro-textarea::-webkit-input-placeholder { - color: var(--nutui-color-text-disabled, #c2c4cc); +.nut-rate-item-small { + margin-left: calc(var(--nutui-rate-item-margin, 4rpx) / 2); } -.nut-textarea.nut-textarea-rtl-limit { - right: auto; - left: 15rpx; +.nut-rate-item-small .nut-icon { + height: calc(var(--nutui-rate-icon-size, 12rpx) - 4rpx); + width: calc(var(--nutui-rate-icon-size, 12rpx) - 4rpx); } -.nut-tabs-titles { - display: -ms-flexbox; +.nut-rate-item-normal:first-child, +.nut-rate-item-large:first-child, +.nut-rate-item-small:first-child { + margin-left: 0; +} +.nut-rate-item-icon { display: flex; - box-sizing: border-box; - height: var(--nutui-tabs-titles-height, 44rpx); - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - overflow-x: auto; - overflow-y: hidden; - background: var(--nutui-tabs-titles-background-color, var(--nutui-color-background, #f2f3f5)); - scrollbar-width: none; + align-items: center; + cursor: pointer; } -.nut-tabs-titles-left .nut-tabs-titles-item { - padding: 0 22rpx; +.nut-rate-item-icon .nut-icon { + color: var(--nutui-rate-icon-color, var(--nutui-color-primary-icon, #ff3333)); } -.nut-tabs-titles-right .nut-tabs-titles-item { - padding: 0 22rpx; +.nut-rate-item-icon-disabled .nut-icon { + color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0)); } -.nut-tabs-titles-item { +.nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half { + position: absolute; + left: 0; + top: 0; + overflow: hidden; +} +.nut-rate-item-icon.nut-rate-item-icon::before { position: relative; - display: -ms-flexbox; + top: auto; + left: auto; + transform: none; +} +.nut-rate-score { display: flex; - -ms-flex-align: center; + display: inline-flex; align-items: center; - -ms-flex-pack: center; - justify-content: center; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - padding: 0 var(--nutui-tabs-titles-gap, 12rpx); - height: var(--nutui-tabs-titles-height, 44rpx); - line-height: var(--nutui-tabs-titles-height, 44rpx); - min-width: var(--nutui-tabs-titles-item-min-width, 50rpx); - font-size: var(--nutui-tabs-titles-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a)); - text-overflow: ellipsis; - white-space: nowrap; + color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333)); + font-family: JDZH-Regular; + line-height: 1; } -.nut-tabs-titles-item-smile, -.nut-tabs-titles-item-line { - position: absolute; - transition: width 0.3s ease; - width: 0; - height: 0; - content: ' '; - left: 50%; - -ms-transform: translate(-50%); - transform: translate(-50%); - bottom: var(--nutui-tabs-line-bottom, 15%); - border-radius: var(--nutui-tabs-line-border-radius, 2rpx); - opacity: var(--nutui-tabs-tab-line-opacity, 1); - overflow: hidden; +.nut-rate-score-normal { + padding-left: var(--nutui-rate-item-margin, 4rpx); + font-size: var(--nutui-rate-font-size, 12rpx); } -.nut-tabs-titles-item-smile .nut-icon { - position: absolute; - font-size: 20rpx; - width: 100%; - height: 100%; +.nut-rate-score-large { + font-size: calc(var(--nutui-rate-font-size, 12rpx) + 6rpx); + padding-left: calc(var(--nutui-rate-item-margin, 4rpx) * 2); } -.nut-tabs-titles-item-active .nut-tabs-titles-item-line { - overflow: visible; - overflow: initial; - content: ' '; - width: var(--nutui-tabs-tab-line-width, 12rpx); - height: var(--nutui-tabs-tab-line-height, 2rpx); - background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23)); +.nut-rate-score-small { + font-size: calc(var(--nutui-rate-font-size, 12rpx) - 2rpx); + padding-left: calc(var(--nutui-rate-item-margin, 4rpx) / 2); } -.nut-tabs-titles-item-active .nut-tabs-titles-item-smile { - overflow: visible; - overflow: initial; - width: 40rpx; - height: 20rpx; +.nut-rate-score-disabled { + color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0)); } -.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-tabs-titles-item-text, -.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-icon { - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-l, 15rpx)); +[dir='rtl'] .nut-rate-item, +.nut-rtl .nut-rate-item { + margin-left: 0; } -.nut-tabs-titles-card .nut-tabs-titles-item-active { - font-weight: var(--nutui-font-weight-bold, 600); - background-color: #fff; - border-radius: var(--nutui-radius-base, 8rpx) var(--nutui-radius-base, 8rpx) 0 0; +[dir='rtl'] .nut-rate-item:first-child, +.nut-rtl .nut-rate-item:first-child { + margin-right: 0; } -.nut-tabs-titles-button .nut-tabs-titles-item { - padding: 0 10rpx; +[dir='rtl'] .nut-rate-item-normal, +.nut-rtl .nut-rate-item-normal { + margin-right: var(--nutui-rate-item-margin, 4rpx); } -.nut-tabs-titles-button .nut-tabs-titles-item .nut-tabs-titles-item-text { - -ms-flex: 1; - flex: 1; - height: 28rpx; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - padding: 0 8rpx; +[dir='rtl'] .nut-rate-item-large, +.nut-rtl .nut-rate-item-large { + margin-right: calc(var(--nutui-rate-item-margin, 4rpx) * 2); } -.nut-tabs-titles-button .nut-tabs-titles-item-active .nut-tabs-titles-item-text { - background: var(--nutui-color-default-light); - color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); - border-radius: var(--nutui-tabs-button-border-radius, 50rpx); - font-weight: var(--nutui-font-weight-bold, 600); - background-color: var(--nutui-tabs-button-active-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); - border: var(--nutui-tabs-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); +[dir='rtl'] .nut-rate-item-small, +.nut-rtl .nut-rate-item-small { + margin-right: calc(var(--nutui-rate-item-margin, 4rpx) - 2rpx); } -.nut-tabs-titles-divider { - border-bottom: 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)); +[dir='rtl'] .nut-rate-item:last-child, +.nut-rtl .nut-rate-item:last-child { + margin-left: 0; } -.nut-tabs-titles-divider .nut-tabs-titles-item::after { - content: ''; - position: absolute; +[dir='rtl'] .nut-rate-item-half, +.nut-rtl .nut-rate-item-half, +[dir='rtl'] .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half, +.nut-rtl .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half { + left: auto; right: 0; - top: 50%; - height: 50%; - width: 1rpx; - background: var(--nutui-color-border, rgba(0, 0, 0, 0.06)); - -ms-transform: translateY(-50%); - transform: translateY(-50%); } -.nut-tabs-vertical .nut-tabs-ellipsis { - white-space: break-spaces; - padding-left: 6rpx; - width: 90rpx; - line-height: var(--nutui-font-size-base, 14rpx); +[dir='rtl'] .nut-rate-item-icon.nut-rate-item-icon::before, +.nut-rtl .nut-rate-item-icon.nut-rate-item-icon::before { + left: auto; + right: auto; } -.nut-tabs-vertical .nut-tabs-titles { - -ms-flex-direction: column; - flex-direction: column; - height: 100%; - width: var(--nutui-tabs-vertical-titles-width, 100rpx); - -ms-flex-negative: 0; - flex-shrink: 0; +[dir='rtl'] .nut-rate-score, +.nut-rtl .nut-rate-score { + padding-left: 0; } -.nut-tabs-vertical .nut-tabs-titles-item { - height: var(--nutui-tabs-vertical-titles-item-height, 40rpx); - -ms-flex: none; - flex: none; +[dir='rtl'] .nut-rate-score-large, +.nut-rtl .nut-rate-score-large { + padding-right: calc(var(--nutui-rate-item-margin, 4rpx) * 2); } -.nut-tabs-vertical .nut-tabs-titles-item-line { - -ms-transform: translateY(-50%); - transform: translateY(-50%); - transition: height 0.3s ease; +[dir='rtl'] .nut-rate-score-normal, +.nut-rtl .nut-rate-score-normal { + padding-right: var(--nutui-rate-item-margin, 4rpx); } -.nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line { - left: 10rpx; - width: var(--nutui-tabs-vertical-tab-line-width, 3rpx); - height: var(--nutui-tabs-vertical-tab-line-height, 12rpx); - background: var( - --nutui-tabs-vertical-tab-line-color, - linear-gradient(180deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-light-pressed, #ffebf1) 100%) - ); +[dir='rtl'] .nut-rate-score-small, +.nut-rtl .nut-rate-score-small { + padding-right: calc(var(--nutui-rate-item-margin, 4rpx) - 2rpx); } -.nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { - right: -12rpx; - bottom: -2%; - left: auto; - -ms-transform: rotate(320deg); - transform: rotate(320deg); +.nut-radiogroup .nut-radio { + margin: 0 var(--nutui-radiogroup-radio-margin, 20rpx) var(--nutui-radiogroup-radio-margin-bottom, 5rpx) 0; +} +.nut-radiogroup .nut-radio-label { + margin: var(--nutui-radiogroup-radio-label-margin, 0 5rpx); +} +.nut-radiogroup .nut-radio-button { + background-color: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); +} +.nut-radiogroup .nut-radio:last-child { + margin: 0; +} +.nut-radiogroup-vertical .nut-radio.nut-radio-reverse { + width: 100%; + justify-content: space-between; +} +.nut-radiogroup-vertical .nut-radio-button { + border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); +} +.nut-radiogroup-vertical .nut-radio-button-active { + border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); + background-color: var(--nutui-color-primary-light-pressed, #ffebf1); } -.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles { - -ms-flex-direction: row; - flex-direction: row; - height: var(--nutui-tabs-titles-height, 44rpx); - width: 100%; - padding: 0 !important; +.nut-radiogroup-horizontal { + display: flex; } -.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active { - background-color: transparent; - background-color: initial; +.nut-radiogroup-horizontal .nut-radio-button { + border: 1rpx solid #ffffff; } -.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line { - left: 50%; - -ms-transform: translate(-50%); - transform: translate(-50%); - width: var(--nutui-tabs-tab-line-width, 12rpx); - height: var(--nutui-tabs-tab-line-height, 2rpx); - background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23)); +.nut-radiogroup-horizontal .nut-radio-button-active { + border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); + background-color: var(--nutui-color-primary-light-pressed, #ffebf1); } -.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { - left: 50%; - right: auto; - bottom: -3rpx; - -ms-transform: translate(-50%) rotate(0); - transform: translate(-50%) rotate(0); +.nut-radiogroup-horizontal .nut-radio:last-child { + margin: 0 var(--nutui-radiogroup-radio-margin, 20rpx) var(--nutui-radiogroup-radio-margin-bottom, 5rpx) 0; } -[dir='rtl'] .nut-tabs-titles-item-smile, -[dir='rtl'] .nut-tabs-titles-item-line, -.nut-rtl .nut-tabs-titles-item-smile, -.nut-rtl .nut-tabs-titles-item-line { - left: auto; - right: 50%; - -ms-transform: translate(50%); - transform: translate(50%); +.nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled { + background: var(--nutui-color-text-disabled, #c2c4cc); + color: #fff; + border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); } -[dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item, -.nut-rtl .nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item { - padding-left: 0; - padding-right: 14rpx; +[dir='rtl'] .nut-radiogroup .nut-radio, +.nut-rtl .nut-radiogroup .nut-radio { + margin-left: var(--nutui-radiogroup-radio-margin, 20rpx); + margin-right: 0; } -[dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line, -.nut-rtl .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line { - left: auto; - right: 10rpx; +.nut-radio { + display: flex; + align-items: center; + flex-shrink: 0; } -[dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile, -.nut-rtl .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { - left: -12rpx; - right: auto; - -ms-transform: rotate(-320deg); - transform: rotate(-320deg); +.nut-radio.nut-radio-reverse { + flex-direction: row-reverse; } -[dir='rtl'] .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line, -.nut-rtl .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line { - left: auto; - right: 50%; - -ms-transform: translate(50%); - transform: translate(50%); +.nut-radio.nut-radio-reverse .nut-radio-label { + margin-right: var(--nutui-radio-label-margin-left, 4rpx); + margin-left: 0; } -[dir='rtl'] .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-smile, -.nut-rtl .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { - right: 50%; - left: auto; - -ms-transform: translate(50%) rotate(0); - transform: translate(50%) rotate(0); +.nut-radio-label { + margin-left: var(--nutui-radio-label-margin-left, 4rpx); + font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-s, 12rpx)); + color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a)); } -.nut-tabpane { - width: 100%; - -ms-flex-negative: 0; - flex-shrink: 0; - display: block; - background-color: var(--nutui-tabs-tabpane-background-color, #fff); - color: var(--nutui-color-title, #1a1a1a); - padding: var(--nutui-tabs-tabpane-padding, 24rpx 20rpx); - box-sizing: border-box; - overflow: auto; +.nut-radio-label-disabled { + color: var(--nutui-radio-label-disable-color, var(--nutui-color-text-disabled, #c2c4cc)); } -.nut-table-wrapper { - display: -ms-flexbox; - display: flex; - width: 100%; - -ms-flex-direction: column; - flex-direction: column; - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-color-title, #1a1a1a); - overflow-y: auto; - overflow-x: hidden; - position: relative; - border: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +.nut-radio-icon { + color: var(--nutui-color-text-disabled, #c2c4cc); + background-color: #fff; + transition-duration: 0.3s; + transition-property: color, border-color, background-color; + font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-icon, 16rpx)); + border-radius: 50%; } -.nut-table-main { - display: table; - width: -moz-max-content; - width: max-content; - overflow-x: auto; - color: var(--nutui-color-title, #1a1a1a); - background-color: var(--nutui-color-background-overlay, #ffffff); - table-layout: fixed; - min-width: 100%; - position: relative; +.nut-radio-icon-checked { + color: var(--nutui-color-primary, #ff0f23); + background-color: #fff; + box-shadow: 0 2rpx 4rpx rgba(255, 15, 35, 0.2); + border-radius: 50%; } -.nut-table-main-head-tr-th, -.nut-table-main-body-tr-th { - display: table-cell; - padding: var(--nutui-table-cols-padding, 10rpx); - table-layout: fixed; - background: inherit; - position: sticky; - top: 0; +.nut-radio-icon-checked.nut-radio-icon-disabled { + color: var(--nutui-color-primary-disabled-special, #ffadbe); + background-color: #fff; + box-shadow: none; + border-radius: 50%; } -.nut-table-main-head-tr-td, -.nut-table-main-body-tr-td { - display: table-cell; - padding: var(--nutui-table-cols-padding, 10rpx); - table-layout: fixed; - background: inherit; +.nut-radio-icon-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-table-main-head-tr-td-nodata, -.nut-table-main-body-tr-td-nodata { - display: -ms-flexbox; +.nut-radio-button { display: flex; - height: 50rpx; - -ms-flex-align: center; + display: inline-flex; align-items: center; - -ms-flex-pack: center; - justify-content: center; + min-height: 30rpx; + padding: var(--nutui-radio-button-padding, 5rpx 18rpx); + font-size: var(--nutui-radio-button-font-size, var(--nutui-font-size-s, 12rpx)); + background: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); + border-radius: var(--nutui-radio-button-border-radius, 15rpx); + color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a)); + box-sizing: border-box; + border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); } -.nut-table-main-head-tr-border, -.nut-table-main-body-tr-border { - border-right: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - border-bottom: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +.nut-radio-button-active { + background: var(--nutui-color-primary-light-pressed, #ffebf1); + color: var(--nutui-color-primary, #ff0f23); + border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); } -.nut-table-main-head-tr-alignleft, -.nut-table-main-head-tr-align, -.nut-table-main-body-tr-alignleft, -.nut-table-main-body-tr-align { - text-align: left; +.nut-radio-button-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc); + border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); } -.nut-table-main-head-tr-alignright, -.nut-table-main-body-tr-alignright { - text-align: right; +.nut-radio .nut-radio-button-active.nut-radio-button-disabled { + background: var(--nutui-color-text-disabled, #c2c4cc); + color: #fff; + border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); } -.nut-table-sticky-left, -.nut-table-sticky-right { +[dir='rtl'] .nut-radio:last-child, +.nut-rtl .nut-radio:last-child { + margin-right: 0 !important; + margin-left: 0 !important; +} +[dir='rtl'] .nut-radio.nut-radio-reverse .nut-radio-label, +.nut-rtl .nut-radio.nut-radio-reverse .nut-radio-label { + margin-left: var(--nutui-radio-label-margin-left, 4rpx); + margin-right: 0; +} +[dir='rtl'] .nut-radio-label, +.nut-rtl .nut-radio-label { + margin-left: 0; + margin-right: var(--nutui-radio-label-margin-left, 4rpx); +} +.nut-pulltorefresh-head { + overflow: hidden; + position: relative; + font-size: 12rpx; +} +.nut-pulltorefresh-head-content { position: absolute; - top: 0; - width: 8rpx; - bottom: -1rpx; - overflow-x: hidden; - overflow-y: hidden; - box-shadow: none; - -ms-touch-action: none; - touch-action: none; - pointer-events: none; - z-index: 3; - background: transparent; + bottom: 0; + left: 0; + width: 100%; + color: var(--nutui-color-text-help, #888b94); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } -.nut-table-sticky-left { - left: 1rpx; - box-shadow: var(--nutui-table-sticky-left-shadow, 4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); +.nut-pulltorefresh-head-content-icons { + width: var(--nutui-pulltorefresh-icon-width, 36rpx); + height: var(--nutui-pulltorefresh-icon-height, 26rpx); + margin-bottom: 4rpx; } -.nut-table-sticky-right { - right: 1rpx; - box-shadow: var(--nutui-table-sticky-right-shadow, -4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); +.nut-pulltorefresh-primary { + background: var(--nutui-pulltorefresh-color-primary, var(--nutui-color-primary, #ff0f23)); } -.nut-table-fixed-left, -.nut-table-fixed-right { - position: sticky; - z-index: 2; +.nut-pulltorefresh-primary-content, +.nut-pulltorefresh-primary-head-content { + color: var(--nutui-color-text-dark, rgba(255, 255, 255, 0.9)); +} +.nut-pulltorefresh-primary-status-text { + color: #fff; } -.nut-table-fixed-left.h5-div, -.nut-table-fixed-right.h5-div { - padding: var(--nutui-table-cols-padding, 10rpx) 0; +[dir='rtl'] .nut-pulltorefresh-head-content, +.nut-rtl .nut-pulltorefresh-head-content { + left: auto; + right: 0; } -.nut-table-summary { - color: var(--nutui-color-title, #1a1a1a); - background-color: var(--nutui-color-background-overlay, #ffffff); - display: -ms-flexbox; +.nut-progress { display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; - justify-content: center; - height: 30rpx; - padding: var(--nutui-table-cols-padding, 10rpx); position: relative; - z-index: 5; -} -[dir='rtl'] .nut-table-main-head-tr-border, -[dir='rtl'] .nut-table-main-body-tr-border, -.nut-rtl .nut-table-main-head-tr-border, -.nut-rtl .nut-table-main-body-tr-border { - border-right: none; - border-left: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + width: 100%; } -[dir='rtl'] .nut-table-sticky-left, -.nut-rtl .nut-table-sticky-left { - left: auto; - right: 1rpx; - box-shadow: var(--nutui-table-sticky-right-shadow, -4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); +.nut-progress-outer { + flex: 1; + border-radius: var(--nutui-progress-border-radius, 12rpx); + height: var(--nutui-progress-height, 10rpx); + background: var(--nutui-progress-background, var(--nutui-color-background, #f2f3f5)); } -[dir='rtl'] .nut-table-sticky-right, -.nut-rtl .nut-table-sticky-right { - right: auto; - left: 1rpx; - box-shadow: var(--nutui-table-sticky-left-shadow, 4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); +.nut-progress-outer .nut-progress-active::before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: var(--nutui-progress-border-radius, 12rpx); + animation: progressActive 2s ease-in-out infinite; } -.nut-tabbar-item { - display: -ms-flexbox; +.nut-progress-inner { + height: 100%; display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex-align: center; + justify-content: center; + transition: all 0.4s; + border-radius: var(--nutui-progress-border-radius, 12rpx); + background: var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%)); +} +.nut-progress-text { + display: flex; align-items: center; - -ms-flex: 1; - flex: 1; - padding: 6rpx 0 2rpx; - color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a)); - height: 100%; + transition: all 0.4s; + margin-left: 12rpx; + color: var(--nutui-color-text-help, #888b94); + font-family: PingFang SC; + font-size: var(--nutui-progress-text-font-size, 13rpx); } -.nut-tabbar-item .nut-icon { - width: 24rpx; - height: 24rpx; - font-size: 24rpx; - color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a)); - color: inherit; +@keyframes progressActive { + 0% { + background: rgba(255, 255, 255, 0.10196); + width: 0; + } + 20% { + background: rgba(255, 255, 255, 0.50196); + width: 0; + } + to { + background: rgba(255, 255, 255, 0); + width: 100%; + } } -.nut-tabbar-item-text { - display: block; - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10rpx)); - line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10rpx)); - margin-top: var(--nutui-tabbar-text-margin-top, 4rpx); +[dir='rtl'] .nut-progress-text, +.nut-rtl .nut-progress-text { + transform: translate(50%); } -.nut-tabbar-item .nut-image-default { - width: 38rpx; - height: 38rpx; - border-radius: 38rpx; +.nut-price { + direction: ltr; + font-size: var(--nutui-font-size-l, 15rpx); + display: flex; + flex-direction: row; + align-items: baseline; } -.nut-tabbar-item-large .nut-tabbar-item-text { - font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 15rpx)); - margin-top: 0; - line-height: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 15rpx)); - font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400)); +.nut-price-symbol, +.nut-price-integer, +.nut-price-decimal { + color: var(--nutui-price-color, var(--nutui-color-text-help)); + font-family: JDZH-Bold; + line-height: 1; } -.nut-tabbar { - border: 0rpx; - box-shadow: var(--nutui-tabbar-box-shadow, none); - border-bottom: var(--nutui-tabbar-border-bottom, 0); - border-top: var(--nutui-tabbar-border-top, 0); - width: 100%; - background: var(--nutui-color-background-overlay, #ffffff); +.nut-price-darkgray .nut-price-symbol, +.nut-price-darkgray .nut-price-integer, +.nut-price-darkgray .nut-price-decimal { + font-family: JDZH-Bold; + color: var(--nutui-price-darkgray-color, var(--nutui-gray-7)); } -.nut-tabbar-wrap { - height: var(--nutui-tabbar-height, 46rpx); - display: -ms-flexbox; - display: flex; +.nut-price-primary .nut-price-symbol, +.nut-price-primary .nut-price-integer, +.nut-price-primary .nut-price-decimal { + font-family: JDZH-Bold; + color: var(--nutui-price-color, var(--nutui-color-primary, #ff0f23)); } -.nut-tabbar-wrap-3 { - padding: 0 16rpx; +.nut-price-symbol { + padding-right: var(--nutui-price-symbol-padding-right, 0rpx); } -.nut-tabbar-wrap-2 { - padding: 0 32rpx; +.nut-price-symbol-xlarge { + font-size: var(--nutui-price-symbol-xlarge-size, 12rpx); } -.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-icon { - width: 20rpx; - height: 20rpx; +.nut-price-symbol-large { + font-size: var(--nutui-price-symbol-large-size, 12rpx); } -.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-tabbar-item-text { - margin: 0 4rpx 0 6rpx; - font-size: 14rpx; +.nut-price-symbol-normal { + font-size: var(--nutui-price-symbol-normal-size, 12rpx); } -.nut-switch { - cursor: pointer; - position: relative; - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - min-width: var(--nutui-switch-width, 46rpx); - height: var(--nutui-switch-height, 28rpx); - line-height: var(--nutui-switch-line-height, 28rpx); - background-color: var(--nutui-switch-active-background-color, var(--nutui-color-primary, #ff0f23)); - border-radius: var(--nutui-switch-border-radius, 50rpx); - background-size: 100% 100%; - background-repeat: no-repeat; - background-position: center center; - -ms-flex: 0 0 auto; - flex: 0 0 auto; +.nut-price-symbol-small { + font-size: var(--nutui-price-symbol-small-size, 12rpx); } -.nut-switch-button { - position: absolute; - top: 50%; - -ms-transform: translateY(-50%); - transform: translateY(-50%); - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - height: calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2); - width: calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2); - border-radius: var(--nutui-switch-inside-border-radius, 50%); - background: #fff; - transition: left 0.3s linear; - box-shadow: var(--nutui-switch-inside-box-shadow, 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1)); +.nut-price-symbol-rtl { + padding-right: 0; + padding-left: var(--nutui-price-symbol-padding-right, 0rpx); } -.nut-switch-button-open { - left: calc(100% - var(--nutui-switch-height, 28rpx) + var(--nutui-switch-border-width, 2rpx)); +.nut-price-integer-xlarge { + font-size: var(--nutui-price-integer-xlarge-size, 24rpx); + line-height: var(--nutui-price-integer-xlarge-size, 24rpx); } -.nut-switch-button-open-rtl, -.nut-switch-button-close { - left: var(--nutui-switch-border-width, 2rpx); +.nut-price-integer-large { + font-size: var(--nutui-price-integer-large-size, 18rpx); + line-height: var(--nutui-price-integer-large-size, 18rpx); } -.nut-switch-button-close-rtl { - left: calc(100% - var(--nutui-switch-height, 28rpx) + var(--nutui-switch-border-width, 2rpx)); +.nut-price-integer-normal { + font-size: var(--nutui-price-integer-normal-size, 16rpx); + line-height: var(--nutui-price-integer-normal-size, 16rpx); } -.nut-switch-button .nut-icon { - width: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); - height: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); - color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe)); +.nut-price-integer-small { + font-size: var(--nutui-price-integer-small-size, 12rpx); } -.nut-switch-close-line { - width: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); - height: 2rpx; - background: var(--nutui-switch-inactive-line-background-color, #ffffff); - border-radius: 2rpx; +.nut-price-decimal-xlarge { + font-size: var(--nutui-price-decimal-xlarge-size, 12rpx); } -.nut-switch-label { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - height: 100%; - white-space: nowrap; - color: var(--nutui-switch-label-text-color, #ffffff); - font-size: var(--nutui-switch-label-font-size, var(--nutui-font-size-s, 12rpx)); +.nut-price-decimal-large { + font-size: var(--nutui-price-decimal-large-size, 12rpx); } -.nut-switch-label-open { - margin: 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx) 0 7rpx; +.nut-price-decimal-normal { + font-size: var(--nutui-price-decimal-normal-size, 12rpx); +} +.nut-price-decimal-small { + font-size: var(--nutui-price-decimal-small-size, 12rpx); } -.nut-switch-label-open-rtl, -.nut-switch-label-close { - margin: 0 7rpx 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx); +.nut-price-line { + text-decoration: line-through var(--nutui-price-line-color, var(--nutui-color-text-help)); } -.nut-switch-label-close-rtl { - margin: 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx) 0 7rpx; +.nut-popup { + position: fixed; + min-height: 26%; + max-height: 100%; + background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff)); + -webkit-overflow-scrolling: touch; + font-size: var(--nutui-font-size-base, 14rpx); } -.nut-swiper-indicator { - display: -ms-flexbox; +.nut-popup-title { display: flex; - -ms-flex-direction: row; flex-direction: row; - -ms-flex-pack: center; + align-items: center; justify-content: center; - position: absolute; - height: 4rpx; - width: 100%; - top: 89.33%; - z-index: 10; + border-bottom: var(--nutui-popup-title-border-bottom, 0); + padding: var(--nutui-popup-title-padding, 16rpx); + position: relative; } -.nut-swiper-indicator-vertical { - width: 8rpx; - height: 100%; - top: 0; - left: 12rpx; - -ms-flex-direction: column; +.nut-popup-title-wrapper { + display: flex; flex-direction: column; - -ms-flex-pack: center; justify-content: center; + align-items: center; +} +.nut-popup-title-title { + color: var(--nutui-color-title, #1a1a1a); + font-weight: var(--nutui-font-weight-bold, 600); + font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); + line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); +} +.nut-popup-title-description { + color: var(--nutui-color-text, #505259); + font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14rpx)); + font-weight: var(--nutui-font-weight, 400); +} +.nut-popup-title-description-gap { + margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base, 8rpx)); +} +.nut-popup-title-left { + position: absolute; + top: var(--nutui-popup-title-padding, 16rpx); + left: var(--nutui-popup-title-padding, 16rpx); +} +.nut-popup-title-right { + position: absolute; + top: var(--nutui-popup-title-padding, 16rpx); + right: var(--nutui-popup-title-padding, 16rpx); z-index: 1; + width: var(--nutui-popup-icon-size, 20rpx); + height: var(--nutui-popup-icon-size, 20rpx); + color: var(--nutui-color-title, #1a1a1a); + cursor: pointer; } -[dir='rtl'] .nut-swiper-indicator-vertical, -.nut-rtl .nut-swiper-indicator-vertical { - left: auto; - right: 12rpx; +.nut-popup-title-right-top-left { + top: var(--nutui-popup-title-padding, 16rpx); + left: var(--nutui-popup-title-padding, 16rpx); } -.nut-swipe-wrapper { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-pack: start; - justify-content: flex-start; - -ms-flex-item-align: stretch; - align-self: stretch; - width: 100%; - transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); - transition-property: transform; +.nut-popup-title-right-bottom-left { + bottom: var(--nutui-popup-title-padding, 16rpx); + left: var(--nutui-popup-title-padding, 16rpx); } -.nut-swipe-left { - left: 0; - -ms-transform: translate(-100%); - transform: translate(-100%); +.nut-popup-title-right-bottom-right { + right: var(--nutui-popup-title-padding, 16rpx); + bottom: var(--nutui-popup-title-padding, 16rpx); } -.nut-swipe-right { - right: 0; - -ms-transform: translate(100%); - transform: translate(100%); +.nut-popup-center { + top: 50%; + left: 50%; + min-height: 10%; + max-width: 295rpx; + transform: translate(-50%, -50%); } -.nut-steps-horizontal .nut-step-head-icon .nut-icon { - height: 10rpx; - width: 10rpx; +.nut-popup-center.nut-popup-round { + border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); } -.nut-steps-horizontal .nut-step-head-icon .nut-image .h5-img { - vertical-align: top; +.nut-popup-bottom { + bottom: 0; + left: 0; + width: 100%; } -.nut-steps-horizontal-single .nut-step { - padding-right: var(--nutui-steps-horizontal-item-padding-right, 28rpx); +.nut-popup-bottom.nut-popup-round { + border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0 0; } -.nut-steps-horizontal-single .nut-step-line { +.nut-popup-bottom-top { + position: absolute; +} +.nut-popup-right { top: 0; right: 0; - height: var(--nutui-steps-base-head-height, 14rpx); - width: var(--nutui-steps-horizontal-item-padding-right, 28rpx); - padding: var(--nutui-steps-horizontal-item-line-padding, 0 8rpx); - box-sizing: border-box; -} -.nut-steps-horizontal-single .nut-step-title, -.nut-steps-horizontal-single .nut-step-description { - padding-left: 4rpx; + width: 100rpx; + height: 100%; } -.nut-steps-horizontal-single .nut-step-special { - padding-right: var(--nutui-steps-horizontal-item-special-padding-right, 22rpx); +.nut-popup-right.nut-popup-round { + border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); } -.nut-steps-horizontal-single .nut-step-special .nut-step-title { - padding-right: 8rpx; - width: -moz-fit-content; - width: fit-content; +.nut-popup-left { + top: 0; + left: 0; + width: 100rpx; + height: 100%; } -.nut-steps-horizontal-single.nut-steps-horizontal-count-3 .nut-step-special { - padding-right: var(--nutui-steps-horizontal-item-special-3-padding-right, 9rpx); +.nut-popup-left.nut-popup-round { + border-radius: 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0; } -.nut-steps-horizontal-double .nut-step-line { +.nut-popup-top { top: 0; - right: -50%; - height: var(--nutui-steps-base-head-height, 14rpx); + left: 0; width: 100%; } -.nut-steps-horizontal-double .nut-step-line-inner { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - height: var(--nutui-steps-base-line-height, 1rpx); - width: 100%; - background: var(--nutui-steps-base-line-background, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +.nut-popup-top.nut-popup-round { + border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); } -.nut-steps-horizontal-double .nut-step-head { - -ms-flex-pack: center; - justify-content: center; - margin-bottom: 6rpx; +@keyframes popup-scale-fade-in { + 0% { + opacity: 0; + transform: scale(0.8); + } + to { + opacity: 1; + transform: scale(1); + } } -.nut-steps-horizontal-double .nut-step-head-dot-wrap, -.nut-steps-horizontal-double .nut-step-head-icon-wrap, -.nut-steps-horizontal-double .nut-step-head-text-wrap { - background-color: var(--nutui-steps-background-color, #ffffff); - padding: var(--nutui-steps-horizontal-item-line-padding, 0 8rpx); +@keyframes popup-scale-fade-out { + 0% { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.8); + } } -.nut-steps-horizontal-double .nut-step-head-icon { - height: var(--nutui-steps-base-head-icon-size-right, 20rpx); - width: var(--nutui-steps-base-head-icon-size-right, 20rpx); +.nut-popup-slide-none-enter-active { + animation-fill-mode: both; + animation-name: popup-scale-fade-in; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-horizontal-double .nut-step-head-icon .nut-icon { - height: 12rpx; - width: 12rpx; +.nut-popup-slide-none-exit-active { + animation-fill-mode: both; + animation-name: popup-scale-fade-out; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-horizontal-double .nut-step-main { - -ms-flex-align: center; - align-items: center; - margin-left: 0; - margin-top: 2rpx; +@keyframes popup-fade-in { + 0% { + opacity: 0; + } + to { + opacity: 1; + } } -.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-head, -.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-line { - height: var(--nutui-steps-base-head-icon-size-right, 20rpx); +@keyframes popup-fade-out { + 0% { + opacity: 1; + } + to { + opacity: 0; + } } -.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-head, -.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-line { - height: var(--nutui-steps-base-head-dot-size, 6rpx); +.nut-popup-slide-center-enter-active { + animation-fill-mode: both; + animation-name: popup-fade-in; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-head, -.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-line { - height: var(--nutui-steps-base-head-text-size, 12rpx); +.nut-popup-slide-center-exit-active { + animation-fill-mode: both; + animation-name: popup-fade-out; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); +} +@keyframes popup-slide-top-enter { + 0% { + transform: translate3d(0, -100%, 0); + } + to { + transform: translateZ(0); + } +} +@keyframes popup-slide-top-exit { + to { + transform: translate3d(0, -100%, 0); + } } -.nut-steps-vertical .nut-step { - padding-bottom: var(--nutui-steps-vertical-item-padding-bottom, 13rpx); +.nut-popup-slide-top-enter-active, +.nut-popup-slide-top-appear-active { + transform: translateZ(0); + animation-fill-mode: both; + animation-name: popup-slide-top-enter; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-vertical .nut-step-line { - height: calc(100% - 4rpx); - width: 1rpx; - bottom: 0; +.nut-popup-slide-top-exit-active { + animation-fill-mode: both; + animation-name: popup-slide-top-exit; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-vertical .nut-step-head { - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - height: 18rpx; +@keyframes popup-slide-right-enter { + 0% { + transform: translate3d(100%, 0, 0); + } + to { + transform: translateZ(0); + } } -.nut-steps-vertical .nut-step-head-icon { - width: var(--nutui-steps-vertical-item-icon-size, 20rpx); - height: var(--nutui-steps-vertical-item-icon-size, 20rpx); +@keyframes popup-slide-right-exit { + to { + transform: translate3d(100%, 0, 0); + } } -.nut-steps-vertical .nut-step-head-icon .nut-icon { - height: 12rpx; - width: 12rpx; +.nut-popup-slide-right-enter-active, +.nut-popup-slide-right-appear-active { + transform: translateZ(0); + animation-fill-mode: both; + animation-name: popup-slide-right-enter; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-vertical .nut-step-main { - -ms-flex: 1; - flex: 1; - min-width: 0; - height: auto; - margin-left: 8rpx; +.nut-popup-slide-right-exit { + animation-fill-mode: both; + animation-name: popup-slide-right-exit; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-vertical .nut-step-title { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-steps-vertical-line-height, 18rpx); - font-size: var(--nutui-steps-vertical-title-font-size, var(--nutui-font-size-l, 15rpx)); - overflow: auto; - font-weight: 500; - margin-bottom: var(--nutui-steps-vertical-title-margin-bottom, 4rpx); +@keyframes popup-slide-bottom-enter { + 0% { + transform: translate3d(0, 100%, 0); + } + to { + transform: translateZ(0); + } } -.nut-steps-vertical .nut-step-description { - margin: var(--nutui-steps-vertical-description-margin, 0 0 1rpx); - height: auto; - line-height: var(--nutui-steps-vertical-line-height, 18rpx); - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-steps-vertical-description-font-size, var(--nutui-font-size-base, 14rpx)); - box-sizing: border-box; +@keyframes slide-bottom-exit { + to { + transform: translate3d(0, 100%, 0); + } } -.nut-steps-vertical .nut-step-head-dot-wrap { - height: calc(var(--nutui-steps-base-head-dot-size, 6rpx) + 8rpx); +.nut-popup-slide-bottom-enter-active, +.nut-popup-slide-bottom-appear-active { + transform: translate(0); + animation-fill-mode: both; + animation-name: popup-slide-bottom-enter; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-vertical .nut-step-head-icon-wrap { - height: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 8rpx); +.nut-popup-slide-bottom-exit { + animation-fill-mode: both; + animation-name: slide-bottom-exit; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-vertical .nut-step-head-text-wrap { - height: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 8rpx); +@keyframes popup-slide-left-enter { + 0% { + transform: translate3d(-100%, 0, 0); + } + to { + transform: translateZ(0); + } } -.nut-steps-vertical-icon .nut-step-head { - width: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 1rpx); - min-width: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 1rpx); +@keyframes popup-slide-left-exit { + to { + transform: translate3d(-100%, 0, 0); + } } -.nut-steps-vertical-icon .nut-step-line { - left: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) / 2); +.nut-popup-slide-left-enter-active, +.nut-popup-slide-left-appear-active { + transform: translate(0); + animation-fill-mode: both; + animation-name: popup-slide-left-enter; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-vertical-dot .nut-step-head { - width: calc(var(--nutui-steps-base-head-dot-size, 6rpx) + 1rpx); +.nut-popup-slide-left-exit-active, +.nut-popup-slide-left-exit-done { + animation-fill-mode: both; + animation-name: popup-slide-left-exit; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-vertical-dot .nut-step-line { - left: calc(var(--nutui-steps-base-head-dot-size, 6rpx) / 2); +.nut-popup-slide-none-exit-done.nut-popup, +.nut-popup-slide-center-exit-done.nut-popup, +.nut-popup-slide-left-exit-done.nut-popup, +.nut-popup-slide-right-exit-done.nut-popup, +.nut-popup-slide-top-exit-done.nut-popup, +.nut-popup-slide-bottom-exit-done.nut-popup { + display: none; } -.nut-steps-vertical-text .nut-step-head { - width: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 1rpx); - min-width: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 1rpx); +.nut-popup .nut-overflow-hidden { + overflow: hidden; } -.nut-steps-vertical-text .nut-step-line { - left: calc(var(--nutui-steps-base-head-text-size, 12rpx) / 2); +[dir='rtl'] .nut-popup-title-left, +.nut-rtl .nut-popup-title-left { + left: auto; + right: var(--nutui-popup-title-padding, 16rpx); } -.nut-step-head { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-steps-base-head-height, 14rpx); - position: relative; - z-index: 1; +[dir='rtl'] .nut-popup-title-right, +.nut-rtl .nut-popup-title-right { + right: auto; + left: var(--nutui-popup-title-padding, 16rpx); } -.nut-step-head-text { - height: var(--nutui-steps-base-head-text-size, 12rpx); - width: var(--nutui-steps-base-head-text-size, 12rpx); - background-color: var(--nutui-steps-base-head-background-color, var(--nutui-color-background, #f2f3f5)); - color: var(--nutui-steps-base-head-color, var(--nutui-color-text, #505259)); - font-size: var(--nutui-steps-base-icon-size, var(--nutui-font-size-xxs, 10rpx)); +[dir='rtl'] .nut-popup-title-right-top-left, +.nut-rtl .nut-popup-title-right-top-left, +[dir='rtl'] .nut-popup-title-right-bottom-left, +.nut-rtl .nut-popup-title-right-bottom-left { + left: auto; + right: var(--nutui-popup-title-padding, 16rpx); } -.nut-step-head-icon { - height: var(--nutui-steps-base-head-icon-size, 16rpx); - width: var(--nutui-steps-base-head-icon-size, 16rpx); - background-color: var(--nutui-steps-base-head-background-color, var(--nutui-color-background, #f2f3f5)); +[dir='rtl'] .nut-popup-title-right-bottom-right, +.nut-rtl .nut-popup-title-right-bottom-right { + right: auto; + left: var(--nutui-popup-title-padding, 16rpx); } -.nut-step-head-dot { - height: var(--nutui-steps-base-head-dot-size, 6rpx); - width: var(--nutui-steps-base-head-dot-size, 6rpx); - background-color: var(--nutui-steps-base-head-dot-background-color, var(--nutui-color-text-disabled, #c2c4cc)); +[dir='rtl'] .nut-popup-title .nut-icon-ArrowLeft, +.nut-rtl .nut-popup-title .nut-icon-ArrowLeft { + transform: rotate(180deg); } -.nut-step-line-inner { - display: -ms-flexbox; - display: flex; - -ms-flex: 1; - flex: 1; - height: var(--nutui-steps-base-line-height, 1rpx); - background: var(--nutui-steps-base-line-background, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +[dir='rtl'] .nut-popup-center, +.nut-rtl .nut-popup-center { + left: auto; + right: 50%; + transform: translate(50%, -50%); } -.nut-step-main { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: center; - justify-content: center; - min-height: var(--nutui-steps-base-head-height, 14rpx); +[dir='rtl'] .nut-popup-bottom, +.nut-rtl .nut-popup-bottom, +[dir='rtl'] .nut-popup-top, +.nut-rtl .nut-popup-top { + left: auto; + right: 0; } -.nut-step-title { - height: 14rpx; - line-height: 14rpx; - font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-size-s, 12rpx)); - color: var(--nutui-steps-base-title-color, var(--nutui-color-title, #1a1a1a)); - overflow: hidden; - white-space: nowrap; +.nut-popover { + position: absolute; + display: inline-block; + word-break: normal; } -.nut-step-description { - height: 16rpx; - line-height: 16rpx; - margin-top: var(--nutui-steps-base-title-margin-bottom, 2rpx); - font-size: var(--nutui-steps-base-description-font-size, var(--nutui-font-size-xxs, 10rpx)); - color: var(--nutui-steps-base-description-color, var(--nutui-color-text-help, #888b94)); - overflow: hidden; +.nut-popover-arrow { + position: absolute; + width: 8rpx; + height: 4rpx; } -.nut-space-vertical-item { - margin-bottom: var(--nutui-space-gap, 8rpx); +.nut-popover-arrow .nut-icon-ArrowRadius { + position: absolute; + color: var(--nutui-popover-content-background-color, #ffffff); } -.nut-space-horizontal-item { - margin-right: var(--nutui-space-gap, 8rpx); +.nut-popover-arrow-top { + bottom: -4rpx; } -.nut-space-horizontal-wrap { - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-bottom: calc(var(--nutui-space-gap, 8rpx) * -1); +.nut-popover-arrow-bottom { + top: -4rpx; +} +.nut-popover-arrow-left { + right: -6rpx; + transform-origin: center top; } -.nut-space-horizontal-wrap-item { - padding-bottom: var(--nutui-space-gap, 8rpx); +.nut-popover-arrow-left.nut-popover-arrow-left { + top: 50%; + transform: rotate(90deg) translateY(-50%); } -[dir='rtl'] .nut-space-horizontal > .nut-space-item, -.nut-rtl .nut-space-horizontal > .nut-space-item { - margin-right: 0; - margin-left: var(--nutui-space-gap, 8rpx); +.nut-popover-arrow-left.nut-popover-arrow-left-top { + top: 16rpx; + right: -8rpx; + transform: rotate(90deg) translateY(0); } -.nut-skeleton { - line-height: 0rpx; - font-size: 0rpx; +.nut-popover-arrow-left.nut-popover-arrow-left-bottom { + top: auto; + bottom: 16rpx; + right: -8rpx; + transform: rotate(90deg) translateY(0); } -.nut-skeleton-content { - position: relative; - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - width: var(--nutui-skeleton-line-width, 100%); - background: var(--nutui-skeleton-background, var(--nutui-color-background-sunken, #f7f8fc)); - border-radius: var(--nutui-skeleton-line-border-radius, var(--nutui-radius-xs, 4rpx)); - overflow: hidden; +.nut-popover-arrow-right { + transform-origin: center top; } -.nut-skeleton-content-normal { - height: var(--nutui-skeleton-line-normal-height, 24rpx); +.nut-popover-arrow-right.nut-popover-arrow-right { + top: 50%; + left: -6rpx; + transform: rotate(-90deg) translateY(-50%); } -.nut-skeleton-content-large { - height: var(--nutui-skeleton-line-large-height, 32rpx); +.nut-popover-arrow-right.nut-popover-arrow-right-top { + top: 16rpx; + left: -8rpx; + transform: rotate(-90deg) translateY(0); } -.nut-skeleton-content-small { - height: var(--nutui-skeleton-line-small-height, 16rpx); - margin-top: 8rpx; +.nut-popover-arrow-right.nut-popover-arrow-right-bottom { + bottom: 16rpx; + left: -8rpx; + transform: rotate(-90deg) translateY(0); } -.nut-skeleton-animation { +.nut-popover .nut-popover-content { position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1; - background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0.01961)), to(rgba(0, 0, 0, 0))); - background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.01961), rgba(0, 0, 0, 0)); - background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.01961), rgba(0, 0, 0, 0)); - animation-name: nut-skeleton; - animation-delay: 0s; - animation-duration: 0.6s; - animation-direction: normal; - animation-fill-mode: both; - animation-play-state: running; - animation-iteration-count: 1; - animation-timing-function: linear; + background: var(--nutui-popover-content-background-color, #ffffff); + border-radius: var(--nutui-popover-border-radius, var(--nutui-radius-xs, 4rpx)); + font-size: var(--nutui-popover-font-size, var(--nutui-font-size-s, 12rpx)); + color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); + line-height: 28rpx; + max-height: none; + max-height: initial; + overflow-y: visible; + overflow-y: initial; } -@keyframes nut-skeleton { - 0% { - transform: translate(-100%); - } - to { - transform: translate(100%); - } +.nut-popover .nut-popover-content-group { + padding: 0 var(--nutui-popover-padding, 8rpx); } -[dir='rtl'] .nut-skeleton-animation, -.nut-rtl .nut-skeleton-animation { - left: auto; - right: 0; - animation: nut-skeleton-rtl 2s linear 0s infinite; +.nut-popover .nut-popover-content .nut-popover-item { + display: flex; + align-items: center; + justify-content: center; + border-bottom: 1rpx solid var(--nutui-popover-divider-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + max-width: var(--nutui-popover-item-width, 160rpx); + word-wrap: break-word; } -@keyframes nut-skeleton-rtl { - 0% { - transform: translate(100%); - } - to { - transform: translate(-100%); - } +.nut-popover .nut-popover-content .nut-popover-item:last-child { + margin-bottom: 0; + border-bottom: none; } -.nut-signature-inner { - display: -ms-flexbox; +.nut-popover .nut-popover-content .nut-popover-item-icon, +.nut-popover .nut-popover-content .nut-popover-item-action-icon { display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; - height: var(--nutui-signature-height, 10rem); - border: var(--nutui-signature-border-width, 1rpx) solid var(--nutui-signature-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - background-color: var(--nutui-signature-background-color, var(--nutui-color-background-overlay, #ffffff)); + width: var(--nutui-font-size-s, 12rpx); + height: var(--nutui-font-size-s, 12rpx); + font-size: var(--nutui-font-size-s, 12rpx); } -.nut-signature-unsupport { - font-size: var(--nutui-signature-font-size, var(--nutui-font-size-base, 14rpx)); +.nut-popover .nut-popover-content .nut-popover-item-icon .nut-icon, +.nut-popover .nut-popover-content .nut-popover-item-action-icon .nut-icon { + width: var(--nutui-font-size-s, 12rpx); + height: var(--nutui-font-size-s, 12rpx); + font-size: var(--nutui-font-size-s, 12rpx); } -.nut-sidebaritem { - width: 100%; - height: 100%; - -ms-flex-negative: 0; - flex-shrink: 0; - display: block; - background-color: var(--nutui-sidebar-item-background, #ffffff); - color: var(--nutui-color-title, #1a1a1a); - padding: var(--nutui-sidebar-item-padding, 24rpx 20rpx); - box-sizing: border-box; - overflow: auto; +.nut-popover .nut-popover-content .nut-popover-item-icon { + margin-right: var(--nutui-spacing-xxs, 4rpx); } -.nut-sidebar-titles { - background: var(--nutui-sidebar-background-color, var(--nutui-color-background, #f2f3f5)); - -ms-flex-direction: column; - flex-direction: column; - border-radius: var(--nutui-sidebar-border-radius, 0); - height: 100%; - width: var(--nutui-sidebar-width, 104rpx); - max-width: var(--nutui-sidebar-max-width, 128rpx); - -ms-flex-negative: 0; - flex-shrink: 0; +.nut-popover .nut-popover-content .nut-popover-item-name { + width: calc(100% - 34rpx); + word-break: keep-all; + flex: 1; } -.nut-sidebar-titles-item { - cursor: pointer; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - height: var(--nutui-sidebar-title-height, 52rpx); - font-size: var(--nutui-sidebar-inactive-font-size, var(--nutui-font-size-base, 14rpx)); +.nut-popover .nut-popover-content .nut-popover-item-action-icon { color: var(--nutui-color-text, #505259); + margin-left: var(--nutui-spacing-base, 8rpx); } -.nut-sidebar-titles-item-text { - text-align: center; - white-space: normal; - width: var(--nutui-sidebar-width, 104rpx); +.nut-popover .nut-popover-content .nut-popover-item.nut-popover-item-disabled { + color: var(--nutui-popover-disable-color, var(--nutui-color-text-disabled, #c2c4cc)); + cursor: not-allowed; } -.nut-sidebar-titles-item-active .nut-sidebar-titles-item-text { - font-family: PingFangSC-Semibold; - color: var(--nutui-sidebar-active-color, var(--nutui-color-primary, #ff0f23)); - font-weight: var(--nutui-sidebar-active-font-weight, var(--nutui-font-weight-bold, 600)); - font-size: var(--nutui-sidebar-active-font-size, var(--nutui-font-size-l, 15rpx)); +.nut-popover .nut-popover-content .nut-popover-item.nut-popover-taroitem { + display: flex; } -.nut-shortpassword-popup { - padding: 32rpx 24rpx 28rpx; - border-radius: 12rpx; - text-align: center; +.nut-popover .nut-popover-content-top .nut-popover-arrow-top { + left: 50%; + transform-origin: center left; + transform: rotate(180deg) translate(-50%); } -.nut-shortpassword-title { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - line-height: 1; - font-size: var(--nutui-font-size-l, 15rpx); - color: var(--nutui-color-title, #1a1a1a); +.nut-popover .nut-popover-content-top-right { + right: 0; } -.nut-shortpassword-description { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - margin-top: 12rpx; - margin-bottom: 24rpx; - line-height: 1; - font-size: var(--nutui-font-size-s, 12rpx); - color: var(--nutui-color-text, #505259); +.nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right { + right: 16rpx; + bottom: -3.5rpx; + transform: rotate(180deg) translate(0); } -.nut-shortpassword-input { - padding: 0 0 10rpx; - text-align: center; - position: relative; - overflow: hidden; +.nut-popover .nut-popover-content-top-left { + left: 0; } -.nut-shortpassword-input-real { - position: absolute; - right: 0; - width: 247rpx; - height: 41rpx; - outline: 0 none; - border: 0; - text-decoration: none; - z-index: -99; +.nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left { + left: 16rpx; + bottom: -3.5rpx; + transform: rotate(180deg) translate(0); } -.nut-shortpassword-input-site { - width: 247rpx; - height: 41rpx; - border-radius: 4rpx; +.nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom { + left: 50%; + transform: translate(-50%); } -.nut-shortpassword-input-fake { - top: 5%; - width: 100%; - height: 41rpx; - margin: 0 auto; - box-sizing: border-box; - background: var(--nutui-shortpassword-background-color, var(--nutui-color-background, #f2f3f5)); - border-radius: 4rpx; - border: 1rpx solid var(--nutui-shortpassword-border-color, var(--nutui-color-background, #f2f3f5)); - display: -ms-flexbox; - display: flex; - position: absolute; +.nut-popover .nut-popover-content-bottom-right { + right: 0; +} +.nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right { + right: 16rpx; + transform: translate(0); +} +.nut-popover .nut-popover-content-bottom-left { left: 0; } -.nut-shortpassword-input-fake-li-icon { - height: 6rpx; - width: 6rpx; - border-radius: 50%; - background: #000; - display: inline-block; +.nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left { + left: 16rpx; + transform: translate(0); } -.nut-shortpassword-message { - margin-top: 9rpx; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - justify-content: space-between; - width: 247rpx; +.nut-popover .nut-popover-content-left-bottom { + bottom: 0; } -.nut-shortpassword-message-error { - line-height: 1; - font-size: var(--nutui-font-size-xs, 11rpx); - color: var(--nutui-shortpassword-error, var(--nutui-color-primary, #ff0f23)); +.nut-popover .nut-popover-content-left-top { + top: 0; } -.nut-shortpassword-message-forget { - line-height: 1; - font-size: var(--nutui-font-size-s, 12rpx); - color: var(--nutui-shortpassword-forget, var(--nutui-color-text-help, #888b94)); - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; +.nut-popover .nut-popover-content-right-bottom { + bottom: 0; } -.nut-shortpassword-message-forget .nut-icon { - margin-right: 3rpx; +.nut-popover .nut-popover-content-right-top { + top: 0; } -.nut-shortpassword-footer { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - justify-content: space-between; - margin-top: 20rpx; +.nut-popover-dark { + background: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); + color: var(--nutui-popover-content-background-color, #ffffff); } -.nut-shortpassword-footer-cancel { - background: #fff; - border: 1rpx solid var(--nutui-color-primary, #ff0f23); - border-radius: 15rpx; - padding: 8rpx 38rpx; - line-height: 1; - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-color-primary, #ff0f23); +.nut-popover-dark .nut-popover-arrow .nut-icon-ArrowRadius { + color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); } -.nut-shortpassword-footer-sure { - background: -webkit-linear-gradient(315deg, var(--nutui-color-primary, #ff0f23) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); - background: linear-gradient(135deg, var(--nutui-color-primary, #ff0f23) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); - border-radius: 15rpx; - padding: 8rpx 38rpx; - line-height: 1; - font-size: var(--nutui-font-size-base, 14rpx); - color: #fff; +.nut-popover-dark .nut-popover-content { + background: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))) !important; + color: var(--nutui-popover-content-background-color, #ffffff) !important; } -.nut-segmented { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - height: var(--nutui-segmented-height, 24rpx); - min-width: 24rpx; - padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, 2rpx)); - -ms-flex-align: center; - align-items: center; - border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs, 4rpx)); - background: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)); - box-sizing: border-box; +.nut-popover-dark .nut-popover-content .nut-popover-item-action-icon { + color: rgba(255, 255, 255, 0.8); } -.nut-segmented-item { - display: -ms-flexbox; - display: flex; - height: var(--nutui-segmented-height, 20rpx); - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - padding: var(--nutui-segmented-item-padding, 0 var(--nutui-spacing-xs, 6rpx)); - border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs, 4rpx)); - color: var(--nutui-segmented-item-color, #ffffff); - font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-size-s, 12rpx)); - line-height: 1; - box-sizing: border-box; +[dir='rtl'] .nut-popover .nut-popover-content .nut-popover-item-name, +.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-name { + margin-left: 0; + margin-right: 4rpx; } -.nut-segmented-icon { - height: 10rpx; - width: 10rpx; - margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs, 2rpx)); +[dir='rtl'] .nut-popover .nut-popover-content .nut-popover-item-action-icon, +.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-action-icon { + right: auto; } -.nut-segmented-icon .nut-icon { - height: 10rpx; - width: 10rpx; - font-size: 10rpx; +[dir='rtl'] .nut-popover .nut-popover-content-top .nut-popover-arrow-top, +.nut-rtl .nut-popover .nut-popover-content-top .nut-popover-arrow-top { + left: auto; + right: 50%; + transform: translate(50%); } -.nut-searchbar { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - width: var(--nutui-searchbar-width, 100%); - padding: var(--nutui-searchbar-padding, 1rpx 8rpx); - background: var(--nutui-searchbar-background, var(--nutui-color-background-sunken, #f7f8fc)); - color: var(--nutui-searchbar-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14rpx)); - box-sizing: border-box; - -ms-flex-pack: center; - justify-content: center; +[dir='rtl'] .nut-popover .nut-popover-content-top-right, +.nut-rtl .nut-popover .nut-popover-content-top-right { + right: auto; + left: 0; } -.nut-searchbar .nut-icon { - width: var(--nutui-searchbar-icon-size, 20rpx); - height: var(--nutui-searchbar-icon-size, 20rpx); - font-size: var(--nutui-searchbar-icon-size, 20rpx); +[dir='rtl'] .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right, +.nut-rtl .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right { + right: auto; + left: 16rpx; } -.nut-searchbar-content { - position: relative; - -ms-flex: 1; - flex: 1; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - padding: 0 var(--nutui-searchbar-gap, 12rpx); - height: var(--nutui-searchbar-input-height, 38rpx); - background: var(--nutui-searchbar-content-background, var(--nutui-color-background-overlay, #ffffff)); - border-radius: var(--nutui-searchbar-content-border-radius, 8rpx); - border: 1rpx solid var(--nutui-color-primary, #ff0f23); +[dir='rtl'] .nut-popover .nut-popover-content-top-left, +.nut-rtl .nut-popover .nut-popover-content-top-left { + left: auto; + right: 0; } -.nut-searchbar-leftin { - margin-right: var(--nutui-searchbar-inner-gap, 8rpx); +[dir='rtl'] .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left, +.nut-rtl .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left { + left: auto; + right: 16rpx; } -.nut-searchbar-rightin { - font-size: 15rpx; - font-weight: 500; - color: var(--nutui-color-primary, #ff0f23); +[dir='rtl'] .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom, +.nut-rtl .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom { + left: auto; + right: 50%; + transform: translate(50%); } -.nut-searchbar-input { - border: 0; - outline: 0; - box-sizing: border-box; - width: 100%; - padding: 0; - margin: 0; - font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a)); - caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-primary, #ff0f23)); - background: transparent; - text-align: var(--nutui-searchbar-input-text-align, left); +[dir='rtl'] .nut-popover .nut-popover-content-bottom-right, +.nut-rtl .nut-popover .nut-popover-content-bottom-right { + right: auto; + left: 0; } -.nut-searchbar-clear.nut-searchbar-icon .nut-icon { - width: 12rpx; - height: 12rpx; - color: var(--nutui-black-5); - margin-right: var(--nutui-searchbar-inner-gap, 8rpx); +[dir='rtl'] .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right, +.nut-rtl .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right { + right: auto; + left: 16rpx; } -.nut-searchbar-values { - position: absolute; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - z-index: 2; - background-color: #fff; - top: 9rpx; - left: 6rpx; - font-size: 12rpx; - line-height: 12rpx; +[dir='rtl'] .nut-popover .nut-popover-content-bottom-left, +.nut-rtl .nut-popover .nut-popover-content-bottom-left { + left: auto; + right: 0; } -.nut-searchbar-values .nut-searchbar-value { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - padding: 4rpx 8rpx; - background-color: #f7f8fc; - border-radius: 4rpx; - margin-right: 2rpx; +[dir='rtl'] .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left, +.nut-rtl .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left { + left: auto; + right: 16rpx; } -.nut-searchbar-values .nut-icon { - width: 6rpx; - height: 6rpx; - font-size: 6rpx; - color: #c2c4cc; - margin-left: 4rpx; +.nut-popover-enter-from, +.nut-popover-leave-active { + transform: scale(0.8); + opacity: 0; } -.nut-searchbar-left.nut-icon, -.nut-searchbar-right.nut-icon { - width: 20rpx; - height: 20rpx; +.nut-popover-enter-active { + transition-timing-function: ease-out; } -.nut-searchbar-left { - margin-right: var(--nutui-searchbar-gap, 12rpx); +.nut-popover-leave-active { + transition-timing-function: ease-in; } -.nut-searchbar-left > .h5-div, -.nut-searchbar-left > .h5-span, -.nut-searchbar-left > .h5-i, -.nut-searchbar-left > .h5-svg, -.nut-searchbar-left .nut-icon { - margin-right: var(--nutui-searchbar-gap, 12rpx); +.nut-popover-content-bg { + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + background: transparent; + z-index: 999; } -.nut-searchbar-left > .h5-div:last-child, -.nut-searchbar-left > .h5-span:last-child, -.nut-searchbar-left > .h5-i:last-child, -.nut-searchbar-left > .h5-svg:last-child, -.nut-searchbar-left .nut-icon:last-child { - margin-right: 0; +[dir='rtl'] .nut-popover-content-bg, +.nut-rtl .nut-popover-content-bg { + left: auto; + right: 0; } -.nut-searchbar-right { - margin-left: var(--nutui-searchbar-gap, 12rpx); +.nut-popover-wrapper { + display: inline-block; } -.nut-searchbar-right > .h5-div, -.nut-searchbar-right > .h5-span, -.nut-searchbar-right > .h5-i, -.nut-searchbar-right > .h5-svg, -.nut-searchbar-right .nut-icon { - margin-left: var(--nutui-searchbar-gap, 12rpx); +.nut-popover-content-copy { + position: absolute; + top: -99999rpx; } -.nut-searchbar-right > .h5-div:first-child, -.nut-searchbar-right > .h5-span:first-child, -.nut-searchbar-right > .h5-i:first-child, -.nut-searchbar-right > .h5-svg:first-child, -.nut-searchbar-right .nut-icon:first-child { - margin-left: 0; +.nut-pickerview { + position: relative; + display: flex; + width: 100%; + height: calc(var(--nutui-picker-item-height, 36rpx) * 7); + overflow: hidden; } -.nut-searchbar-left > text, -.nut-searchbar-left > view { - margin-right: var(--nutui-searchbar-gap, 12rpx); +.nut-pickerview-mask, +.nut-pickerview-indicator { + position: absolute; + left: 0; + right: 0; + z-index: 3; + pointer-events: none; } -.nut-searchbar-right > text, -.nut-searchbar-right > view { - margin-left: var(--nutui-searchbar-gap, 12rpx); +.nut-pickerview-mask { + top: 0; + bottom: 0; + background-image: var( + --picker-mask-background, + linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), + linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)) + ); + background-position: top, bottom; + background-size: 100% calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); + background-repeat: no-repeat; + transform: translateZ(0); } -.nut-searchbar-round { - border-radius: var(--nutui-searchbar-content-round-border-radius, 19rpx); +.nut-pickerview-indicator { + top: calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); + height: var(--nutui-picker-item-height, 36rpx); + border: var(--nutui-picker-item-active-line-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + border-left: 0; + border-right: 0; + box-sizing: border-box; } -.nut-searchbar-focus { - padding: 5rpx var(--nutui-searchbar-gap, 12rpx); +.nut-pickerview-list { + position: relative; + flex: 1; + height: calc(var(--nutui-picker-item-height, 36rpx) * 7); + overflow: hidden; + touch-action: none; } -.nut-searchbar-focus .nut-searchbar-content { - border: 0.5rpx solid #ff5c67; +.nut-pickerview-roller { + position: absolute; + top: calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); + width: 100%; + height: var(--nutui-picker-item-height, 36rpx); + z-index: 1; + transform-style: preserve-3d; } -[dir='rtl'] .nut-searchbar-left, -.nut-rtl .nut-searchbar-left { - margin-right: 0; - margin-left: var(--nutui-searchbar-gap, 12rpx); +.nut-pickerview-roller-placeholder { + height: var(--nutui-picker-item-height, 36rpx); } -[dir='rtl'] .nut-searchbar-left > .h5-div, -[dir='rtl'] .nut-searchbar-left > .h5-span, -[dir='rtl'] .nut-searchbar-left > .h5-svg, -.nut-rtl .nut-searchbar-left > .h5-div, -.nut-rtl .nut-searchbar-left > .h5-span, -.nut-rtl .nut-searchbar-left > .h5-svg { - margin-right: 0; - margin-left: var(--nutui-searchbar-gap, 12rpx); +.nut-pickerview-roller-item { + position: absolute; + top: 0; + backface-visibility: hidden; + -moz-backface-visibility: hidden; } -[dir='rtl'] .nut-searchbar-left > .h5-div.nut-icon, -[dir='rtl'] .nut-searchbar-left > .h5-span.nut-icon, -[dir='rtl'] .nut-searchbar-left > .h5-svg.nut-icon, -.nut-rtl .nut-searchbar-left > .h5-div.nut-icon, -.nut-rtl .nut-searchbar-left > .h5-span.nut-icon, -.nut-rtl .nut-searchbar-left > .h5-svg.nut-icon { - -ms-transform: rotate(180deg); - transform: rotate(180deg); +.nut-pickerview-roller-item-hidden { + visibility: hidden; + opacity: 0; } -[dir='rtl'] .nut-searchbar-left > .h5-div:last-child, -[dir='rtl'] .nut-searchbar-left > .h5-span:last-child, -[dir='rtl'] .nut-searchbar-left > .h5-svg:last-child, -.nut-rtl .nut-searchbar-left > .h5-div:last-child, -.nut-rtl .nut-searchbar-left > .h5-span:last-child, -.nut-rtl .nut-searchbar-left > .h5-svg:last-child { - margin-right: 0; - margin-left: 0; +.nut-pickerview-roller-item, +.nut-pickerview-roller-item-tiled { + width: 100%; + height: var(--nutui-picker-item-height, 36rpx); + line-height: var(--nutui-picker-item-height, 36rpx); + color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a)); + font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14rpx)); + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -[dir='rtl'] .nut-searchbar-right, -.nut-rtl .nut-searchbar-right { - margin-left: 0; - margin-right: var(--nutui-searchbar-gap, 12rpx); +.nut-picker { + width: 100%; } -[dir='rtl'] .nut-searchbar-right > .h5-div, -[dir='rtl'] .nut-searchbar-right > .h5-span, -[dir='rtl'] .nut-searchbar-right > .h5-svg, -.nut-rtl .nut-searchbar-right > .h5-div, -.nut-rtl .nut-searchbar-right > .h5-span, -.nut-rtl .nut-searchbar-right > .h5-svg { - margin-left: 0; - margin-right: var(--nutui-searchbar-gap, 12rpx); +.nut-picker-control { + display: flex; + align-items: center; + justify-content: space-between; + height: var(--nutui-popup-title-height, 50rpx); + padding: var(--nutui-popup-title-padding, 16rpx); + box-sizing: border-box; + font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); } -[dir='rtl'] .nut-searchbar-right > .h5-div:first-child, -[dir='rtl'] .nut-searchbar-right > .h5-span:first-child, -[dir='rtl'] .nut-searchbar-right > .h5-svg:first-child, -.nut-rtl .nut-searchbar-right > .h5-div:first-child, -.nut-rtl .nut-searchbar-right > .h5-span:first-child, -.nut-rtl .nut-searchbar-right > .h5-svg:first-child { - margin-left: 0; - margin-right: 0; +.nut-picker-cancel-btn { + color: var(--nutui-picker-title-cancel-color, var(--nutui-color-text, #505259)); + font-size: var(--nutui-picker-title-cancel-font-size, var(--nutui-font-size-base, 14rpx)); } -[dir='rtl'] .nut-searchbar-left > text, -[dir='rtl'] .nut-searchbar-left > view, -.nut-rtl .nut-searchbar-left > text, -.nut-rtl .nut-searchbar-left > view { - margin-right: 0; - margin-left: var(--nutui-searchbar-gap, 12rpx); +.nut-picker-confirm-btn { + color: var(--nutui-picker-title-ok-color, var(--nutui-color-primary, #ff0f23)); + font-size: var(--nutui-picker-title-ok-font-size, var(--nutui-font-size-base, 14rpx)); } -[dir='rtl'] .nut-searchbar-right > text, -[dir='rtl'] .nut-searchbar-right > view, -.nut-rtl .nut-searchbar-right > text, -.nut-rtl .nut-searchbar-right > view { - margin-left: 0; - margin-right: var(--nutui-searchbar-gap, 12rpx); +.nut-picker-title { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-align: center; + color: var(--nutui-color-title, #1a1a1a); + font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); + font-weight: var(--nutui-popup-title-font-weight, var(--nutui-font-weight-bold, 600)); } -.nut-resultpage-icon { - display: -ms-flexbox; +.nut-picker-panel { display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - margin-bottom: var(--nutui-resultpage-icon-margin-bottom, 12rpx); } -.nut-resultpage-icon .nut-icon { - height: var(--nutui-resultpage-icon-size, 36rpx); - width: var(--nutui-resultpage-icon-size, 36rpx); +.nut-pagination { + display: flex; + flex-direction: row; + font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23)); } -.nut-resultpage-title { - width: var(--nutui-resultpage-width, 240rpx); - margin-bottom: var(--nutui-resultpage-title-margin-bottom, 12rpx); - font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, 18rpx)); - color: var(--nutui-resultpage-title-color, var(--nutui-color-title, #1a1a1a)); - font-weight: var(--nutui-font-weight-bold, 600); - text-align: center; +.nut-pagination-prev, +.nut-pagination-item, +.nut-pagination-next { + height: 39rpx; + min-width: 39rpx; + flex-shrink: 0; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23)); + background: #fff; + border-radius: var(--nutui-pagination-item-border-radius, 2rpx); + border: var(--nutui-pagination-item-border-width, 1rpx) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + cursor: pointer; } -.nut-resultpage-description { - width: var(--nutui-resultpage-width, 240rpx); - line-height: var(--nutui-resultpage-description-line-height, 20rpx); - font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-resultpage-description-color, var(--nutui-color-text, #505259)); - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - word-break: break-all; +.nut-pagination-prev, +.nut-pagination-item { + border-right-width: 0; } -.nut-resultpage-actions { - display: -ms-flexbox; +.nut-pagination-prev, +.nut-pagination-next { + padding: var(--nutui-pagination-prev-next-padding, 0 12rpx); +} +.nut-pagination-contain { display: flex; - -ms-flex-direction: row; flex-direction: row; - margin-top: var(--nutui-resultpage-actions-margin-top, 16rpx); } -.nut-resultpage-action { - margin-left: 6rpx; - margin-right: 6rpx; +.nut-pagination-item-active { + color: #fff; + border-width: 0; + background-color: var(--nutui-color-primary, #ff0f23); } -.nut-range-container { - display: -ms-flexbox; +.nut-pagination-item-disabled, +.nut-pagination-next-disabled, +.nut-pagination-prev-disabled { + color: var(--nutui-pagination-disable-color, var(--nutui-color-text-disabled, #c2c4cc)); + background-color: var(--nutui-pagination-disable-background-color, #f7f8fa); + cursor: not-allowed; +} +.nut-pagination-simple { + height: 39rpx; + width: 124rpx; + line-height: 39rpx; + text-align: center; + font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-pagination-simple-border { + border-right: var(--nutui-pagination-item-border-width, 1rpx) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +} +.nut-pagination-lite { + height: var(--nutui-pagination-lite-height, 20rpx); + padding: 0 var(--nutui-spacing-xs, 6rpx); display: flex; - -ms-flex-direction: row; flex-direction: row; - position: relative; - width: 100%; - height: var(--nutui-range-height, 4rpx); - -ms-flex-align: center; align-items: center; - -ms-flex-pack: justify; - justify-content: space-between; + color: #fff; + background-color: var(--nutui-pagination-lite-background-color, rgba(0, 0, 0, 0.45)); + border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, 4rpx)); } -.nut-range { - display: block; - position: relative; - height: var(--nutui-range-height, 4rpx); - margin: 0 var(--nutui-range-margin, 15rpx); - background-color: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1)); - border-radius: 2rpx; - -ms-flex: 1; - flex: 1; - cursor: pointer; +.nut-pagination-lite-active, +.nut-pagination-lite-default, +.nut-pagination-lite-spliterator { + font-size: var(--nutui-font-size-xs, 11rpx); + color: var(--nutui-pagination-lite-color, #ffffff); } -.nut-range::before { - position: absolute; - top: -8rpx; - bottom: -8rpx; - left: 0; +.nut-overlay { + position: fixed; + top: 0; right: 0; - content: ''; -} -.nut-range-min, -.nut-range-max { - font-size: var(--nutui-font-size-s, 12rpx); - color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a)); - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.nut-range-bar { - display: block; - position: relative; + bottom: 0; + left: 0; width: 100%; height: 100%; - max-width: 100%; - max-height: 100%; - background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23)); - border-radius: 2rpx; + background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); } -.nut-range-button { - position: absolute; - display: -ms-flexbox; - display: flex; - width: var(--nutui-range-button-width, 24rpx); - height: var(--nutui-range-button-height, 24rpx); - background: var(--nutui-range-button-background, #ffffff); - border-radius: 50%; - box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.14902); - border: var(--nutui-range-button-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); - outline: none; - -ms-flex-align: center; - align-items: center; - top: 50%; - left: 50%; +.nut-overflow-hidden { + overflow: hidden !important; } -.nut-range-button-wrapper, -.nut-range-button-wrapper-right, -.nut-range-button-wrapper-left { - width: var(--nutui-range-button-width, 24rpx); - height: var(--nutui-range-button-height, 24rpx); +@keyframes nut-fade-in { + 0% { + opacity: 0; + } + 1% { + opacity: 0; + } + to { + opacity: 1; + } } -.nut-range-button-number { +@keyframes nut-fade-out { + 0% { + opacity: 1; + } + 1% { + opacity: 1; + } + to { + opacity: 0; + } +} +.nut-overlay-slide-enter-active, +.nut-overlay-slide-appear-active { + animation-fill-mode: both; + animation-name: nut-fade-in; + animation-duration: var(--nutui-overlay-animation-duration, 0.3s); +} +.nut-overlay-slide-exit-active { + animation-fill-mode: both; + animation-name: nut-fade-out; + animation-duration: var(--nutui-overlay-animation-duration, 0.3s); +} +[dir='rtl'] .nut-overlay, +.nut-rtl .nut-overlay { + left: auto; + right: 0; +} +.nut-numberkeyboard { + width: 100%; + padding: var(--nutui-numberkeyboard-padding, 0 0 22rpx 0); + user-select: none; + background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-background, #f2f3f5)); +} +.nut-numberkeyboard-header { position: relative; - width: 200%; - height: 24rpx; - line-height: 14rpx; - padding: 5rpx 0; - left: 50%; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - font-size: var(--nutui-font-size-s, 12rpx); - color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a)); - text-align: center; - vertical-align: center; - box-sizing: border-box; + box-sizing: content-box; + padding: var(--nutui-popup-title-padding, 16rpx); + color: var(--nutui-color-title, #1a1a1a); + font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); } -.nut-range-mark { +.nut-numberkeyboard-header-title { + color: var(--nutui-color-title, #1a1a1a); + display: inline-block; + font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); +} +.nut-numberkeyboard-header-close { position: absolute; - width: 100%; - height: 14rpx; - overflow: visible; + display: block; + right: 0; top: 50%; + transform: translateY(-50%); + padding: var(--nutui-numberkeyboard-header-close-padding, 0 16rpx); + color: var(--nutui-numberkeyboard-header-close-color, var(--nutui-color-text, #505259)); + font-size: var(--nutui-numberkeyboard-header-close-font-size, 14rpx); + background-color: var(--nutui-numberkeyboard-header-close-background-color, transparent); + border: none; + cursor: pointer; } -.nut-range-mark-text-wrapper { - position: absolute; - height: 100%; - top: 14rpx; - display: inline-block; - -ms-transform: translate(-10rpx); - transform: translate(-10rpx); +.nut-numberkeyboard-body { + display: flex; + padding: 6rpx 0 0 6rpx; } -.nut-range-mark-text { - position: absolute; - line-height: 16rpx; - font-size: 12rpx; - color: #999; - text-align: center; - word-break: keep-all; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +.nut-numberkeyboard-body-keys { + display: flex; + flex: 3; + flex-wrap: wrap; } -.nut-range-tick { - position: absolute; - top: -20rpx; - width: 11rpx; - height: 11rpx; - left: 0; - border-radius: 6rpx; - background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1)); +.nut-numberkeyboard-body-wrapper { + position: relative; + flex: 1; + width: 33%; + flex-basis: 33%; + box-sizing: border-box; + padding: 0 6rpx 6rpx 0; + background-color: var(--nutui-numberkeyboard-wrapper-background-color, var(--nutui-color-background-sunken, #f7f8fc)); } -.nut-range-vertical-container { - height: 100%; - -ms-flex-direction: column; - flex-direction: column; - padding: 0 15rpx; +.nut-numberkeyboard-body-wrapper .key { + display: flex; + align-items: center; + justify-content: center; + height: var(--nutui-numberkeyboard-key-height, 48rpx); + font-size: var(--nutui-numberkeyboard-key-font-size, var(--nutui-font-size-xl, 18rpx)); + line-height: var(--nutui-numberkeyboard-key-line-height, 1.5); + background-color: var(--nutui-numberkeyboard-key-background-color, var(--nutui-color-background-overlay, #ffffff)); + color: var(--nutui-numberkeyboard-key-color, var(--nutui-color-text, #505259)); + border-radius: var(--nutui-numberkeyboard-key-border-radius, 8rpx); + border: var(--nutui-numberkeyboard-key-border, none); + font-weight: var(--nutui-font-weight-bold, 600); + cursor: pointer; } -.nut-range-vertical { - width: var(--nutui-range-height, 4rpx); - margin: var(--nutui-range-margin, 15rpx) 0rpx; +.nut-numberkeyboard-body-wrapper .key.active { + background-color: var(--nutui-numberkeyboard-key-active-background-color, #ebedf0); } -.nut-range-vertical-button-wrapper, -.nut-range-vertical-button-wrapper-right { - position: absolute; - top: auto; - top: initial; - right: auto; - right: initial; - top: 100%; - left: 50%; +.nut-numberkeyboard-sidebar { + display: flex; + flex: 1; + flex-basis: 33%; + flex-direction: column; } -.nut-range-vertical-button-wrapper-left { - top: 0; - left: 50%; - right: auto; - right: initial; +.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper { + width: 100%; } -.nut-range-vertical-mark { +.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key { position: absolute; - width: 36rpx; - height: 100%; top: 0; - right: 50%; - overflow: visible; - font-size: 12rpx; - padding: 0; -} -.nut-range-vertical-mark-hm { - left: -34rpx; -} -.nut-range-vertical-mark-text-wrapper { - height: 16rpx; - position: absolute; - display: inline-block; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -ms-transform: translateY(-11rpx); - transform: translateY(-11rpx); + right: 6rpx; + bottom: 6rpx; + left: 0; + height: auto; } -.nut-range-vertical-mark-text { - height: 100%; - line-height: 16rpx; - color: #999; - text-align: center; - word-break: keep-all; +.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm { + font-size: var(--nutui-numberkeyboard-key-confirm-font-size, var(--nutui-font-size-l, 15rpx)); + color: var(--nutui-numberkeyboard-key-confirm-color, #fff); + background-color: var(--nutui-numberkeyboard-key-confirm-background-color, var(--nutui-color-primary, #ff0f23)); } -.nut-range-vertical-tick { - position: absolute; - top: 2rpx; - left: 31rpx; - width: 10rpx; - height: 10rpx; - border-radius: 5rpx; - background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1)); +.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm.active { + background-color: rgba(255, 0, 0, 0.70196); } -[dir='rtl'] .nut-range-button-wrapper, -[dir='rtl'] .nut-range-button-wrapper-right, -.rtl-nut-range-button-wrapper, -.rtl-nut-range-button-wrapper-right { - left: 0; +[dir='rtl'] .nut-popup .nut-numberkeyboard-header-close, +.nut-rtl .nut-popup .nut-numberkeyboard-header-close { right: auto; - right: initial; -} -[dir='rtl'] .nut-range-button-wrapper-left, -.rtl-nut-range-button-wrapper-left, -[dir='rtl'] .nut-range-tick, -.rtl-nut-range-tick { - right: 0; - left: auto; - left: initial; -} -[dir='rtl'] .nut-range-mark-text, -.rtl-nut-range-mark-text { - -ms-transform: translate(10rpx); - transform: translate(10rpx); + left: 0; } -[dir='rtl'] .nut-range-vertical-button-wrapper, -[dir='rtl'] .nut-range-vertical-button-wrapper-right, -.rtl-nut-range-vertical-button-wrapper, -.rtl-nut-range-vertical-button-wrapper-right, -[dir='rtl'] .nut-range-vertical-button-wrapper-left, -.rtl-nut-range-vertical-button-wrapper-left { - right: 50%; - left: auto; - left: initial; +[dir='rtl'] .nut-popup .nut-numberkeyboard-body, +.nut-rtl .nut-popup .nut-numberkeyboard-body { + padding: 6rpx 6rpx 0 0; } -[dir='rtl'] .nut-range-vertical-tick, -.rtl-nut-range-vertical-tick { - left: auto; - right: 30rpx; - margin-left: 0; - margin-right: 0; +[dir='rtl'] .nut-popup .nut-numberkeyboard-body-wrapper, +.nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper { + padding: 0 0 6rpx 6rpx; } -[dir='rtl'] .nut-range-vertical-mark-text-wrapper, -.rtl-nut-range-vertical-mark-text-wrapper { - -ms-transform: translateY(-11rpx); - transform: translateY(-11rpx); +[dir='rtl'] .nut-popup .nut-numberkeyboard-body-wrapper .delete, +.nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper .delete { + transform: rotate(-180deg); } -.nut-rate-item-normal { - margin-left: var(--nutui-rate-item-margin, 4rpx); +[dir='rtl'] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key, +.nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key { + left: 6rpx; + right: 0; } -.nut-rate-item-normal .nut-icon { - height: var(--nutui-rate-icon-size, 12rpx); - width: var(--nutui-rate-icon-size, 12rpx); +[dir='rtl'] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete, +.nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete { + transform: rotate(-180deg); } -.nut-rate-item-large { - margin-left: calc(var(--nutui-rate-item-margin, 4rpx) * 2); +.fade-enter { + opacity: 0; } -.nut-rate-item-large .nut-icon { - height: calc(var(--nutui-rate-icon-size, 12rpx) + 8rpx); - width: calc(var(--nutui-rate-icon-size, 12rpx) + 8rpx); +.fade-enter-active { + opacity: 1; + transition: opacity 0.3s ease-in; } -.nut-rate-item-small { - margin-left: calc(var(--nutui-rate-item-margin, 4rpx) / 2); +.fade-enter-done, +.fade-exit { + opacity: 1; } -.nut-rate-item-small .nut-icon { - height: calc(var(--nutui-rate-icon-size, 12rpx) - 4rpx); - width: calc(var(--nutui-rate-icon-size, 12rpx) - 4rpx); +.fade-exit-active { + opacity: 0; + transition: opacity 0.3s ease-out; } -.nut-rate-item-icon.nut-rate-item-icon::before { - position: relative; - top: auto; - left: auto; - -ms-transform: none; - transform: none; +.fade-exit-done, +.fade-appear { + opacity: 0; } -.nut-rate-score-normal { - padding-left: var(--nutui-rate-item-margin, 4rpx); - font-size: var(--nutui-rate-font-size, 12rpx); +.fade-appear-active { + opacity: 1; + transition: opacity 0.3s; } -.nut-rate-score-large { - font-size: calc(var(--nutui-rate-font-size, 12rpx) + 6rpx); - padding-left: calc(var(--nutui-rate-item-margin, 4rpx) * 2); +.nut-notify { + position: fixed; + left: 8rpx; + right: 8rpx; + z-index: var(--nutui-notify-z-index, 1000); + display: flex; + align-items: center; + box-sizing: border-box; + height: var(--nutui-notify-height, 40rpx); + padding: var(--nutui-notify-padding, 0rpx 12rpx); + border-radius: var(--nutui-notify-border-radius, 8rpx); + box-shadow: var(--nutui-notify-box-shadow, 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.06)); + background-color: var(--nutui-notify-background-color, #ffffff); } -.nut-rate-score-small { - font-size: calc(var(--nutui-rate-font-size, 12rpx) - 2rpx); - padding-left: calc(var(--nutui-rate-item-margin, 4rpx) / 2); +.nut-notify-content { + flex: 1; + text-align: center; + min-width: 0; + font-size: var(--nutui-notify-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-notify-text-color, var(--nutui-color-title, #1a1a1a)); + white-space: nowrap; + overflow: hidden; } -[dir='rtl'] .nut-rate-item-normal, -.nut-rtl .nut-rate-item-normal { - margin-right: var(--nutui-rate-item-margin, 4rpx); +.nut-notify-ellipsis { + text-overflow: ellipsis; } -[dir='rtl'] .nut-rate-item-large, -.nut-rtl .nut-rate-item-large { - margin-right: calc(var(--nutui-rate-item-margin, 4rpx) * 2); +.nut-notify-layout-left { + text-align: left; } -[dir='rtl'] .nut-rate-item-small, -.nut-rtl .nut-rate-item-small { - margin-right: calc(var(--nutui-rate-item-margin, 4rpx) - 2rpx); +.nut-notify-left-icon, +.nut-notify-right-icon { + display: flex; + display: inline-flex; } -[dir='rtl'] .nut-rate-score-large, -.nut-rtl .nut-rate-score-large { - padding-right: calc(var(--nutui-rate-item-margin, 4rpx) * 2); +.nut-notify-left-icon { + margin-right: 6rpx; } -[dir='rtl'] .nut-rate-score-normal, -.nut-rtl .nut-rate-score-normal { - padding-right: var(--nutui-rate-item-margin, 4rpx); +.nut-notify-left-icon .nut-icon { + height: 16rpx; + width: 16rpx; } -[dir='rtl'] .nut-rate-score-small, -.nut-rtl .nut-rate-score-small { - padding-right: calc(var(--nutui-rate-item-margin, 4rpx) - 2rpx); +.nut-notify-right-icon { + margin-left: 6rpx; } -.nut-radiogroup .nut-radio { - margin: 0 var(--nutui-radiogroup-radio-margin, 20rpx) var(--nutui-radiogroup-radio-margin-bottom, 5rpx) 0; +.nut-notify-right-icon .nut-icon { + height: 12rpx; + width: 12rpx; } -.nut-radiogroup .nut-radio-label { - margin: var(--nutui-radiogroup-radio-label-margin, 0 5rpx); +.nut-noticebar { + width: 100%; } -.nut-radiogroup-vertical .nut-radio-button { - border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); +.nut-noticebar .nut-noticebar-box { + position: relative; + display: flex; + align-items: center; + height: var(--nutui-noticebar-height, 36rpx); + padding: var(--nutui-noticebar-box-padding, 0 16rpx); + font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, 12rpx)); + background: var(--nutui-noticebar-background, rgb(251, 248, 220)); + color: var(--nutui-noticebar-color, #d9500b); + border-radius: var(--nutui-noticebar-border-radius, 0); } -.nut-radiogroup-vertical .nut-radio-button-active { - border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); +.nut-noticebar .nut-noticebar-box-wrapable, +.nut-noticebar .nut-noticebar-box-center { + height: auto; + padding: var(--nutui-noticebar-wrapable-padding, 8rpx 16rpx); } -.nut-radiogroup-horizontal .nut-radio-button { - border: 1rpx solid #ffffff; +.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap, +.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap { + height: auto; } -.nut-radiogroup-horizontal .nut-radio-button-active { - border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); +.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content { + position: relative; + white-space: normal; + word-wrap: break-word; } -.nut-radiogroup-horizontal .nut-radio:last-child { - margin: 0 var(--nutui-radiogroup-radio-margin, 20rpx) var(--nutui-radiogroup-radio-margin-bottom, 5rpx) 0; +.nut-noticebar .nut-noticebar-box-center { + justify-content: center; } -.nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled { - background: var(--nutui-color-text-disabled, #c2c4cc); - color: #fff; - border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); +.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap { + flex: initial; } -[dir='rtl'] .nut-radiogroup .nut-radio, -.nut-rtl .nut-radiogroup .nut-radio { - margin-left: var(--nutui-radiogroup-radio-margin, 20rpx); - margin-right: 0; +.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content { + position: relative; + display: inline; + display: initial; } -.nut-radio.nut-radio-reverse .nut-radio-label { - margin-right: var(--nutui-radio-label-margin-left, 4rpx); - margin-left: 0; +.nut-noticebar .nut-noticebar-box-left-icon { + display: flex; + height: var(--nutui-noticebar-left-icon-width, 16rpx); + min-width: var(--nutui-noticebar-left-icon-width, 16rpx); + margin-right: var(--nutui-noticebar-icon-gap, 4rpx); + background-size: 100% 100%; } -.nut-radio-label { - margin-left: var(--nutui-radio-label-margin-left, 4rpx); - font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-s, 12rpx)); - color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a)); +.nut-noticebar .nut-noticebar-box-left-icon .nut-icon { + color: var(--nutui-noticebar-color, #d9500b); } -.nut-radio-icon { - color: var(--nutui-color-text-disabled, #c2c4cc); - background-color: #fff; - transition-duration: 0.3s; - transition-property: color, border-color, background-color; - font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-icon, 16rpx)); - border-radius: 50%; +.nut-noticebar .nut-noticebar-box-right-icon { + display: flex; + align-items: center; + justify-content: center; + width: var(--nutui-noticebar-right-icon-width, 16rpx); + margin-left: var(--nutui-noticebar-icon-gap, 4rpx); } -.nut-radio-icon-checked { - color: var(--nutui-color-primary, #ff0f23); - background-color: #fff; - box-shadow: 0 2rpx 4rpx rgba(255, 15, 35, 0.2); - border-radius: 50%; +.nut-noticebar .nut-noticebar-box-right-icon .nut-icon { + width: 12rpx; + height: 12rpx; + color: var(--nutui-noticebar-color, #d9500b); } -.nut-radio-button { - display: -ms-flexbox; +.nut-noticebar .nut-noticebar-box-wrap { display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; + flex: 1; align-items: center; - min-height: 30rpx; - padding: var(--nutui-radio-button-padding, 5rpx 18rpx); - font-size: var(--nutui-radio-button-font-size, var(--nutui-font-size-s, 12rpx)); - background: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); - border-radius: var(--nutui-radio-button-border-radius, 15rpx); - color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a)); - box-sizing: border-box; - border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); + height: var(--nutui-noticebar-line-height, 24rpx); + line-height: var(--nutui-noticebar-line-height, 24rpx); + overflow: hidden; + position: relative; } -.nut-radio-button-active { - background: var(--nutui-color-primary-light-pressed, #ffebf1); - color: var(--nutui-color-primary, #ff0f23); - border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); +.nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content { + position: absolute; + white-space: nowrap; + color: var(--nutui-noticebar-color, #d9500b); } -.nut-radio-button-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); - border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); +.nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content.nut-ellipsis { + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -.nut-radio .nut-radio-button-active.nut-radio-button-disabled { - background: var(--nutui-color-text-disabled, #c2c4cc); - color: #fff; - border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); +.nut-noticebar .nut-noticebar-box .play { + animation: nut-notice-bar-play linear both running; } -[dir='rtl'] .nut-radio.nut-radio-reverse .nut-radio-label, -.nut-rtl .nut-radio.nut-radio-reverse .nut-radio-label { - margin-left: var(--nutui-radio-label-margin-left, 4rpx); - margin-right: 0; +.nut-noticebar .nut-noticebar-box .play-infinite { + animation: nut-notice-bar-play-infinite linear infinite both running; } -[dir='rtl'] .nut-radio-label, -.nut-rtl .nut-radio-label { - margin-left: 0; - margin-right: var(--nutui-radio-label-margin-left, 4rpx); +.nut-noticebar .nut-noticebar-box .play-vertical { + animation: nut-notice-bar-play-vertical linear infinite both running; } -.nut-pulltorefresh-head { - overflow: hidden; +.nut-noticebar .nut-noticebar-vertical { position: relative; - font-size: 12rpx; + display: flex; + justify-content: space-between; + height: var(--nutui-noticebar-height, 36rpx); + font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, 12rpx)); + overflow: hidden; + padding: var(--nutui-noticebar-box-padding, 0 16rpx); + background: var(--nutui-noticebar-background, rgb(251, 248, 220)); + color: var(--nutui-noticebar-color, #d9500b); } -.nut-pulltorefresh-head-content-icons { - width: var(--nutui-pulltorefresh-icon-width, 36rpx); - height: var(--nutui-pulltorefresh-icon-height, 26rpx); - margin-bottom: 4rpx; +.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-left-icon { + height: var(--nutui-noticebar-left-icon-width, 16rpx); + min-width: var(--nutui-noticebar-left-icon-width, 16rpx); + margin: var(--nutui-noticebar-icon-gap, 4rpx); + background-size: 100% 100%; + display: flex; + align-self: center; } -.nut-progress-outer { - -ms-flex: 1; +.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list { + margin: 0; + padding: 0; + display: block; flex: 1; - border-radius: var(--nutui-progress-border-radius, 12rpx); - height: var(--nutui-progress-height, 10rpx); - background: var(--nutui-progress-background, var(--nutui-color-background, #f2f3f5)); } -.nut-progress-outer .nut-progress-active::before { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - border-radius: var(--nutui-progress-border-radius, 12rpx); - animation: progressActive 2s ease-in-out infinite; +.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list-item { + display: flex; + align-items: center; + height: var(--nutui-noticebar-height, 36rpx); + width: 100%; } -.nut-progress-inner { - height: 100%; - display: -ms-flexbox; +.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-wrap { display: flex; - -ms-flex-direction: column; + height: 100%; + width: 100%; flex-direction: column; - -ms-flex-pack: center; - justify-content: center; - transition: all 0.4s; - border-radius: var(--nutui-progress-border-radius, 12rpx); - background: var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%)); } -.nut-progress-text { - display: -ms-flexbox; +.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon { + align-self: center; display: flex; - -ms-flex-align: center; - align-items: center; - transition: all 0.4s; - margin-left: 12rpx; - color: var(--nutui-color-text-help, #888b94); - font-family: PingFang SC; - font-size: var(--nutui-progress-text-font-size, 13rpx); + justify-content: center; + width: var(--nutui-noticebar-right-icon-width, 16rpx); + margin-left: var(--nutui-noticebar-icon-gap, 4rpx); } -@keyframes progressActive { - 0% { - background: rgba(255, 255, 255, 0.10196); - width: 0; +@keyframes nut-notice-bar-play { + to { + transform: translate3d(-100%, 0, 0); } - 20% { - background: rgba(255, 255, 255, 0.50196); - width: 0; +} +@keyframes nut-notice-bar-play-infinite { + to { + transform: translate3d(-100%, 0, 0); } +} +@keyframes nut-notice-bar-play-vertical { to { - background: rgba(255, 255, 255, 0); - width: 100%; + transform: translateY(var(--nutui-noticebar-height, 36rpx)); } } -[dir='rtl'] .nut-progress-text, -.nut-rtl .nut-progress-text { - -ms-transform: translate(50%); - transform: translate(50%); +[dir='rtl'] .nut-noticebar .nut-noticebar-box-left-icon, +.nut-rtl .nut-noticebar .nut-noticebar-box-left-icon { + margin-right: 0; + margin-left: var(--nutui-noticebar-icon-gap, 4rpx); } -.nut-price { - direction: ltr; - font-size: var(--nutui-font-size-l, 15rpx); - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: baseline; - align-items: baseline; +[dir='rtl'] .nut-noticebar .nut-noticebar-box-right-icon, +.nut-rtl .nut-noticebar .nut-noticebar-box-right-icon { + margin-left: 0; + margin-right: var(--nutui-noticebar-icon-gap, 4rpx); } -.nut-price-symbol { - padding-right: var(--nutui-price-symbol-padding-right, 0rpx); +[dir='rtl'] .nut-noticebar .nut-noticebar-box .play, +.nut-rtl .nut-noticebar .nut-noticebar-box .play { + animation: nut-notice-bar-play-rtl linear both running; } -.nut-price-symbol-xlarge { - font-size: var(--nutui-price-symbol-xlarge-size, 12rpx); +[dir='rtl'] .nut-noticebar .nut-noticebar-box .play-infinite, +.nut-rtl .nut-noticebar .nut-noticebar-box .play-infinite { + animation: nut-notice-bar-play-infinite-rtl linear infinite both running; } -.nut-price-symbol-large { - font-size: var(--nutui-price-symbol-large-size, 12rpx); +@keyframes nut-notice-bar-play-rtl { + to { + transform: translate3d(100%, 0, 0); + } +} +@keyframes nut-notice-bar-play-infinite-rtl { + to { + transform: translate3d(100%, 0, 0); + } +} +[dir='rtl'] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon, +.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon { + margin-left: 0; + margin-right: var(--nutui-noticebar-icon-gap, 4rpx); } -.nut-price-symbol-normal { - font-size: var(--nutui-price-symbol-normal-size, 12rpx); +.nut-navbar { + width: var(--nutui-navbar-width, 100%); + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: var(--nutui-navbar-height, 44rpx); + box-sizing: border-box; + background: var(--nutui-navbar-background, #ffffff); + box-shadow: var(--nutui-navbar-box-shadow, none); + font-size: var(--nutui-navbar-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-navbar-color, var(--nutui-color-title, #1a1a1a)); + overflow: hidden; + padding: 0 16rpx; } -.nut-price-symbol-small { - font-size: var(--nutui-price-symbol-small-size, 12rpx); +.nut-navbar-fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + width: 100%; } -.nut-price-symbol-rtl { - padding-right: 0; - padding-left: var(--nutui-price-symbol-padding-right, 0rpx); +.nut-navbar-placeholder { + display: inline-block; + width: 100%; } -.nut-price-integer-xlarge { - font-size: var(--nutui-price-integer-xlarge-size, 24rpx); - line-height: var(--nutui-price-integer-xlarge-size, 24rpx); +.nut-navbar-safe-area-inset-top { + padding-top: constant(safe-area-inset-top); + padding-top: env(safe-area-inset-top); } -.nut-price-integer-large { - font-size: var(--nutui-price-integer-large-size, 18rpx); - line-height: var(--nutui-price-integer-large-size, 18rpx); +.nut-navbar-title-wrapper { + justify-content: space-between; } -.nut-price-integer-normal { - font-size: var(--nutui-price-integer-normal-size, 16rpx); - line-height: var(--nutui-price-integer-normal-size, 16rpx); +.nut-navbar-title { + height: 100%; + text-align: center; + display: flex; + flex: 1; + flex-direction: row; + align-items: center; + font-size: var(--nutui-navbar-title-font-size, var(--nutui-font-size-xl, 18rpx)); + font-weight: var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold, 600)); + color: var(--nutui-navbar-title-font-color, var(--nutui-color-title, #1a1a1a)); } -.nut-price-integer-small { - font-size: var(--nutui-price-integer-small-size, 12rpx); +.nut-navbar-title-center { + max-width: 129rpx; + justify-content: center; } -.nut-price-decimal-xlarge { - font-size: var(--nutui-price-decimal-xlarge-size, 12rpx); +.nut-navbar-title ::-webkit-scrollbar { + display: none; } -.nut-price-decimal-large { - font-size: var(--nutui-price-decimal-large-size, 12rpx); +.nut-navbar-left, +.nut-navbar-right { + display: flex; + align-items: center; + flex-direction: row; + max-width: 124rpx; + height: 100%; + cursor: pointer; } -.nut-price-decimal-normal { - font-size: var(--nutui-price-decimal-normal-size, 12rpx); +.nut-navbar-left .nut-icon, +.nut-navbar-left .nutui-iconfont, +.nut-navbar-right .nut-icon, +.nut-navbar-right .nutui-iconfont { + width: 20rpx; + height: 20rpx; + font-size: 20rpx; } -.nut-price-decimal-small { - font-size: var(--nutui-price-decimal-small-size, 12rpx); +.nut-navbar-left-maxwidth, +.nut-navbar-right-maxwidth { + box-sizing: border-box; + width: 108rpx; } -.nut-price-line { - text-decoration: line-through var(--nutui-price-line-color, var(--nutui-color-text-help)); +.nut-navbar-left { + padding-right: 16rpx; + gap: 16rpx; } -.nut-popup { - position: fixed; - min-height: 26%; - max-height: 100%; - background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff)); - -webkit-overflow-scrolling: touch; - font-size: var(--nutui-font-size-base, 14rpx); +.nut-navbar-left-rtl { + padding-right: 0; + padding-left: 16rpx; } -.nut-popup-title { - display: -ms-flexbox; +.nut-navbar-left-back { display: flex; - -ms-flex-direction: row; flex-direction: row; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - border-bottom: var(--nutui-popup-title-border-bottom, 0); - padding: var(--nutui-popup-title-padding, 16rpx); - position: relative; -} -.nut-popup-title-title { - color: var(--nutui-color-title, #1a1a1a); - font-weight: var(--nutui-font-weight-bold, 600); - font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); - line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); + gap: 16rpx; } -.nut-popup-title-description { - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14rpx)); - font-weight: var(--nutui-font-weight, 400); +.nut-navbar-left-hidden { + padding-left: 0; + padding-right: 0; } -.nut-popup-title-description-gap { - margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base, 8rpx)); +.nut-navbar-right { + padding-left: 16rpx; + justify-content: flex-end; + gap: 16rpx; } -.nut-popup-title-left { - position: absolute; - top: var(--nutui-popup-title-padding, 16rpx); - left: var(--nutui-popup-title-padding, 16rpx); +.nut-navbar-right-rtl { + padding-right: 16rpx; + padding-left: 0; } -.nut-popup-title-right { - position: absolute; - top: var(--nutui-popup-title-padding, 16rpx); - right: var(--nutui-popup-title-padding, 16rpx); - z-index: 1; - width: var(--nutui-popup-icon-size, 20rpx); - height: var(--nutui-popup-icon-size, 20rpx); - color: var(--nutui-color-title, #1a1a1a); - cursor: pointer; +.nut-navbar-rtl .nut-icon-ArrowLeft { + transform: rotateY(180deg); } -.nut-popup-title-right-top-left { - top: var(--nutui-popup-title-padding, 16rpx); - left: var(--nutui-popup-title-padding, 16rpx); +.nut-menu-container-content { + padding: var(--nutui-menu-content-padding, 12rpx 24rpx); + max-height: var(--nutui-menu-content-max-height, 214rpx); + overflow-y: auto; + display: flex; + flex-wrap: wrap; + background: var(--nutui-menu-content-background-color, var(--nutui-color-background-overlay, #ffffff)); } -.nut-popup-title-right-bottom-left { - bottom: var(--nutui-popup-title-padding, 16rpx); - left: var(--nutui-popup-title-padding, 16rpx); +.nut-menu-container-content_fixed { + width: 100%; + opacity: 0; + position: fixed; } -.nut-popup-title-right-bottom-right { - right: var(--nutui-popup-title-padding, 16rpx); - bottom: var(--nutui-popup-title-padding, 16rpx); +.nut-menu-container-item { + display: flex; + align-items: center; + color: var(--nutui-color-title, #1a1a1a); + font-size: var(--nutui-font-size-base, 14rpx); + padding: var(--nutui-menu-item-padding, 12rpx 0); } -.nut-popup-center { - top: 50%; - left: 50%; - min-height: 10%; - max-width: 295rpx; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); +.nut-menu-container-item.active { + font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600)); + color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23)); } -.nut-popup-center.nut-popup-round { - border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); +.nut-menu-container-item .nut-icon { + display: flex; + display: inline-flex; + align-items: center; + margin-right: var(--nutui-menu-item-icon-margin, 8rpx); + flex-shrink: 0; } -.nut-popup-bottom.nut-popup-round { - border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0 0; +.nut-menu-container-wrap, +.nut-menu-container-wrap-up { + position: absolute; + width: 100%; + z-index: var(--nutui-menu-container-z-index, 1000); + overflow: hidden; } -.nut-popup-right { - top: 0; - right: 0; - width: 100rpx; - height: 100%; +.nut-menu-container-wrap-up { + bottom: var(--nutui-menu-bar-line-height, 48rpx); } -.nut-popup-right.nut-popup-round { - border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); +.overlay-fade-enter-active.nut-menu-container-overlay { + top: auto; + z-index: var(--nutui-menu-container-z-index, 1000); } -.nut-popup-left { - top: 0; +.nut-menu-placeholder-element { + position: fixed; + top: calc(-1 * var(--menu-bar-line-height)); left: 0; - width: 100rpx; - height: 100%; -} -.nut-popup-left.nut-popup-round { - border-radius: 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0; -} -.nut-popup-top.nut-popup-round { - border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); + right: 0; + z-index: var(--nutui-menu-bar-opened-z-index, 1000); + background-color: transparent; } -@keyframes popup-scale-fade-in { - 0% { - opacity: 0; - transform: scale(0.8); - } - to { - opacity: 1; - transform: scale(1); - } +.nut-menu-placeholder-element.up { + bottom: calc(-1 * var(--menu-bar-line-height)); } -@keyframes popup-scale-fade-out { - 0% { - opacity: 1; - transform: scale(1); - } - to { - opacity: 0; - transform: scale(0.8); - } +.nut-menu-container-down-enter { + opacity: 0; + transform: translateY(-30rpx); } -.nut-popup-slide-none-enter-active { - animation-fill-mode: both; - animation-name: popup-scale-fade-in; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-container-down-enter-done { + opacity: 1; + transform: translate(0); + transition: all 0.1s; } -.nut-popup-slide-none-exit-active { - animation-fill-mode: both; - animation-name: popup-scale-fade-out; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-container-down-exit { + opacity: 1; + transition: all 0.1s; } -.nut-popup-slide-center-enter-active { - animation-fill-mode: both; - animation-name: popup-fade-in; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-container-down-exit-done { + opacity: 0; + transition: all 0.1s; } -.nut-popup-slide-center-exit-active { - animation-fill-mode: both; - animation-name: popup-fade-out; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-container-up-enter { + opacity: 0; + transform: translateY(30rpx); } -@keyframes popup-slide-top-enter { - 0% { - transform: translate3d(0, -100%, 0); - } - to { - transform: translateZ(0); - } +.nut-menu-container-up-enter-done { + opacity: 1; + transform: translate(0); + transition: all 0.1s; } -@keyframes popup-slide-top-exit { - to { - transform: translate3d(0, -100%, 0); - } +.nut-menu-container-up-exit { + opacity: 1; + transition: all 0.1s; } -.nut-popup-slide-top-enter-active, -.nut-popup-slide-top-appear-active { - transform: translateZ(0); - animation-fill-mode: both; - animation-name: popup-slide-top-enter; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-container-up-exit-done { + opacity: 0; + transition: all 0.1s; } -.nut-popup-slide-top-exit-active { - animation-fill-mode: both; - animation-name: popup-slide-top-exit; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +[dir='rtl'] .nut-menu-container-item .nut-icon, +.nut-rtl .nut-menu-container-item .nut-icon { + margin-right: 0; + margin-left: var(--nutui-menu-item-icon-margin, 8rpx); } -@keyframes popup-slide-right-enter { - 0% { - transform: translate3d(100%, 0, 0); - } - to { - transform: translateZ(0); - } +[dir='rtl'] .nut-menu-container .nut-icon, +.nut-rtl .nut-menu-container .nut-icon { + transform: rotateY(180deg); } -@keyframes popup-slide-right-exit { - to { - transform: translate3d(100%, 0, 0); - } +.nut-menu { + position: relative; } -.nut-popup-slide-right-enter-active, -.nut-popup-slide-right-appear-active { - transform: translateZ(0); - animation-fill-mode: both; - animation-name: popup-slide-right-enter; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu.scroll-fixed { + position: fixed; + top: var(--nutui-menu-scroll-fixed-top, 0); + z-index: var(--nutui-menu-scroll-fixed-z-index, 1000); + width: 100%; } -.nut-popup-slide-right-exit { - animation-fill-mode: both; - animation-name: popup-slide-right-exit; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-bar { + position: relative; + display: flex; + line-height: var(--nutui-menu-bar-line-height, 48rpx); + background-color: var(--nutui-color-background-overlay, #ffffff); + box-shadow: var(--nutui-menu-bar-box-shadow, 0 2rpx 12rpx rgba(89, 89, 89, 0.12)); } -@keyframes popup-slide-bottom-enter { - 0% { - transform: translate3d(0, 100%, 0); - } - to { - transform: translateZ(0); - } +.nut-menu-bar.opened { + z-index: var(--nutui-menu-bar-opened-z-index, 1000); } -@keyframes slide-bottom-exit { - to { - transform: translate3d(0, 100%, 0); - } +.nut-menu-title { + flex: 1; + text-align: center; + font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-menu-title-color, var(--nutui-color-title, #1a1a1a)); + min-width: 0; + display: flex; + align-items: center; + justify-content: center; + max-width: 100%; } -.nut-popup-slide-bottom-enter-active, -.nut-popup-slide-bottom-appear-active { - -ms-transform: translate(0); - transform: translate(0); - animation-fill-mode: both; - animation-name: popup-slide-bottom-enter; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-title-text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + padding: var(--nutui-menu-title-padding, 0 8rpx); } -.nut-popup-slide-bottom-exit { - animation-fill-mode: both; - animation-name: slide-bottom-exit; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-title-icon { + flex-shrink: 0; + transition: all 0.2s linear; } -@keyframes popup-slide-left-enter { - 0% { - transform: translate3d(-100%, 0, 0); - } - to { - transform: translateZ(0); - } +.nut-menu-title.active { + color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23)); } -@keyframes popup-slide-left-exit { - to { - transform: translate3d(-100%, 0, 0); - } +.nut-menu-title.disabled { + color: var(--nutui-menu-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc)); } -.nut-popup-slide-left-enter-active, -.nut-popup-slide-left-appear-active { - -ms-transform: translate(0); - transform: translate(0); - animation-fill-mode: both; - animation-name: popup-slide-left-enter; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-title.active .nut-menu-title-icon { + transform: rotate(180deg); } -.nut-popup-slide-left-exit-active, -.nut-popup-slide-left-exit-done { - animation-fill-mode: both; - animation-name: popup-slide-left-exit; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-loading { + display: flex; + display: inline-flex; + flex-direction: row; + align-items: center; + justify-content: center; } -[dir='rtl'] .nut-popup-title-left, -.nut-rtl .nut-popup-title-left { - left: auto; - right: var(--nutui-popup-title-padding, 16rpx); +.nut-loading-vertical { + flex-direction: column; } -[dir='rtl'] .nut-popup-title-right, -.nut-rtl .nut-popup-title-right { - right: auto; - left: var(--nutui-popup-title-padding, 16rpx); +.nut-loading .nut-loading-icon-box { + display: inline-block; + font-size: 0; + line-height: 0; + animation: nut-loading-rotation 1s infinite linear; } -[dir='rtl'] .nut-popup-title-right-top-left, -.nut-rtl .nut-popup-title-right-top-left, -[dir='rtl'] .nut-popup-title-right-bottom-left, -.nut-rtl .nut-popup-title-right-bottom-left { - left: auto; - right: var(--nutui-popup-title-padding, 16rpx); +.nut-loading .nut-loading-icon-box .nut-loading-icon { + color: var(--nutui-loading-icon-color, var(--nutui-color-text-help, #888b94)); + width: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); + height: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); + font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); } -[dir='rtl'] .nut-popup-title-right-bottom-right, -.nut-rtl .nut-popup-title-right-bottom-right { - right: auto; - left: var(--nutui-popup-title-padding, 16rpx); +.nut-loading .nut-loading-text { + color: var(--nutui-loading-color, var(--nutui-color-text-help, #888b94)); + font-size: var(--nutui-loading-font-size, var(--nutui-font-size-s, 12rpx)); } -[dir='rtl'] .nut-popup-title .nut-icon-ArrowLeft, -.nut-rtl .nut-popup-title .nut-icon-ArrowLeft { - -ms-transform: rotate(180deg); - transform: rotate(180deg); +.nut-loading-vertical .nut-loading-text { + padding-top: var(--nutui-spacing-base, 8rpx); } -[dir='rtl'] .nut-popup-center, -.nut-rtl .nut-popup-center { - left: auto; - right: 50%; - -ms-transform: translate(50%, -50%); - transform: translate(50%, -50%); +@keyframes nut-loading-rotation { + 0% { + } + to { + } } -.nut-popover-arrow { - position: absolute; - width: 8rpx; - height: 4rpx; +.nut-inputnumber { + display: flex; + display: inline-flex; + width: calc(2 * var(--nutui-inputnumber-input-margin, 0rpx) + 2 * var(--nutui-inputnumber-button-width, 20rpx) + var(--nutui-inputnumber-input-width, 26rpx)); + flex-direction: row; + align-items: center; + background-color: var(--nutui-color-background, #f2f3f5); + border-radius: var(--nutui-inputnumber-input-border-radius, 4rpx); + overflow: hidden; } -.nut-popover-arrow-top { - bottom: -4rpx; +.nut-inputnumber-minus, +.nut-inputnumber-add { + display: flex; + justify-content: center; + align-items: center; + width: var(--nutui-inputnumber-button-width, 20rpx); + height: var(--nutui-inputnumber-button-height, 20rpx); + background-color: var(--nutui-inputnumber-button-background-color, transparent); } -.nut-popover-arrow-bottom { - top: -4rpx; +.nut-inputnumber-minus .nut-icon, +.nut-inputnumber-add .nut-icon { + --nut-icon-width: 10rpx; + --nut-icon-height: 10rpx; } -.nut-popover-arrow-left { - right: -6rpx; - -ms-transform-origin: center top; - transform-origin: center top; +.nut-inputnumber-icon { + color: var(--nutui-color-text, #505259); + cursor: pointer; } -.nut-popover-arrow-left.nut-popover-arrow-left { - top: 50%; - -ms-transform: rotate(90deg) translateY(-50%); - transform: rotate(90deg) translateY(-50%); +.nut-inputnumber-icon-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc); + cursor: not-allowed; } -.nut-popover-arrow-left.nut-popover-arrow-left-top { - top: 16rpx; - right: -8rpx; - -ms-transform: rotate(90deg) translateY(0); - transform: rotate(90deg) translateY(0); +.nut-inputnumber-input { + display: flex; + justify-content: center; + align-items: center; + width: var(--nutui-inputnumber-input-width, 26rpx); + font-size: var(--nutui-inputnumber-input-font-size, var(--nutui-font-size-s, 12rpx)); + height: var(--nutui-inputnumber-input-height, 20rpx); + text-align: center; + outline: none; + border: var(--nutui-inputnumber-input-border, 0); + margin-left: var(--nutui-inputnumber-input-margin, 0rpx); + margin-right: var(--nutui-inputnumber-input-margin, 0rpx); + color: var(--nutui-color-text, #505259); + background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-color-background, #f2f3f5)); } -.nut-popover-arrow-left.nut-popover-arrow-left-bottom { - top: auto; - bottom: 16rpx; - right: -8rpx; - -ms-transform: rotate(90deg) translateY(0); - transform: rotate(90deg) translateY(0); +.nut-inputnumber-input::-webkit-outer-spin-button, +.nut-inputnumber-input::-webkit-inner-spin-button { + appearance: none; } -.nut-popover-arrow-right { - -ms-transform-origin: center top; - transform-origin: center top; +.nut-inputnumber-input-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-popover-arrow-right.nut-popover-arrow-right { - top: 50%; - left: -6rpx; - -ms-transform: rotate(-90deg) translateY(-50%); - transform: rotate(-90deg) translateY(-50%); +.nut-inputnumber-icon-minus, +.nut-inputnumber-icon-plus { + --nut-icon-width: 16rpx; + --nut-icon-height: 16rpx; } -.nut-popover-arrow-right.nut-popover-arrow-right-top { - top: 16rpx; - left: -8rpx; - -ms-transform: rotate(-90deg) translateY(0); - transform: rotate(-90deg) translateY(0); +.nut-infiniteloading { + display: block; + width: 100%; } -.nut-popover-arrow-right.nut-popover-arrow-right-bottom { - bottom: 16rpx; - left: -8rpx; - -ms-transform: rotate(-90deg) translateY(0); - transform: rotate(-90deg) translateY(0); +.nut-infiniteloading .nut-infinite-top { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + overflow: hidden; + font-size: var(--nutui-font-size-s, 12rpx); + color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help, #888b94)); } -.nut-popover .nut-popover-content { - position: absolute; - background: var(--nutui-popover-content-background-color, #ffffff); - border-radius: var(--nutui-popover-border-radius, var(--nutui-radius-xs, 4rpx)); - font-size: var(--nutui-popover-font-size, var(--nutui-font-size-s, 12rpx)); - color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); - line-height: 28rpx; - max-height: none; - max-height: initial; - overflow-y: visible; - overflow-y: initial; +.nut-infiniteloading .nut-infinite-top-tips { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } -.nut-popover .nut-popover-content-group { - padding: 0 var(--nutui-popover-padding, 8rpx); +.nut-infiniteloading .nut-infinite-top-tips-icons { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 4rpx; } -.nut-popover .nut-popover-content .nut-popover-item { - display: -ms-flexbox; +.nut-infiniteloading .nut-infinite-bottom { display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - border-bottom: 1rpx solid var(--nutui-popover-divider-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - max-width: var(--nutui-popover-item-width, 160rpx); - word-wrap: break-word; + width: 100%; + padding-top: 6rpx; + color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help, #888b94)); + text-align: center; } -.nut-popover .nut-popover-content .nut-popover-item-icon, -.nut-popover .nut-popover-content .nut-popover-item-action-icon { - display: -ms-flexbox; +.nut-infiniteloading .nut-infinite-bottom-tips { display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; - width: var(--nutui-font-size-s, 12rpx); - height: var(--nutui-font-size-s, 12rpx); - font-size: var(--nutui-font-size-s, 12rpx); + font-size: var(--nutui-font-size-xxs, 10rpx); } -.nut-popover .nut-popover-content .nut-popover-item-icon .nut-icon, -.nut-popover .nut-popover-content .nut-popover-item-action-icon .nut-icon { - width: var(--nutui-font-size-s, 12rpx); - height: var(--nutui-font-size-s, 12rpx); - font-size: var(--nutui-font-size-s, 12rpx); +.nut-infiniteloading .nut-infinite-bottom-tips-icons { + margin-right: 8rpx; } -.nut-popover .nut-popover-content .nut-popover-item-icon { - margin-right: var(--nutui-spacing-xxs, 4rpx); +.nut-infiniteloading-primary { + background-color: var(--nutui-color-primary, #ff0f23); } -.nut-popover .nut-popover-content .nut-popover-item-name { - width: calc(100% - 34rpx); - word-break: keep-all; - -ms-flex: 1; - flex: 1; +.nut-infiniteloading-primary .nut-infinite-bottom, +.nut-infiniteloading-primary .nut-infinite-top { + color: var(--nutui-color-text-dark, rgba(255, 255, 255, 0.9)); } -.nut-popover .nut-popover-content .nut-popover-item-action-icon { - color: var(--nutui-color-text, #505259); - margin-left: var(--nutui-spacing-base, 8rpx); +[dir='rtl'] .nut-infiniteloading .nut-infinite-bottom-tips-icons, +.nut-rtl .nut-infiniteloading .nut-infinite-bottom-tips-icons { + margin-right: 0; + margin-left: 8rpx; } -.nut-popover .nut-popover-content-top .nut-popover-arrow-top { - left: 50%; - -ms-transform-origin: center left; - transform-origin: center left; - -ms-transform: rotate(180deg) translate(-50%); - transform: rotate(180deg) translate(-50%); +.nut-input { + position: relative; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + flex: 1; + align-items: center; + font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); + box-sizing: border-box; } -.nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right { - right: 16rpx; - bottom: -3.5rpx; - -ms-transform: rotate(180deg) translate(0); - transform: rotate(180deg) translate(0); +.nut-input .nut-input-native .weui-input::-webkit-input-placeholder { + color: #757575; + font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); } -.nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left { - left: 16rpx; - bottom: -3.5rpx; - -ms-transform: rotate(180deg) translate(0); - transform: rotate(180deg) translate(0); +.nut-input .nut-input-native .weui-input::placeholder, +.nut-input-placeholder { + color: #757575; + font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); } -.nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom { - left: 50%; - -ms-transform: translate(-50%); - transform: translate(-50%); +.nut-input .nut-icon { + color: var(--nutui-color-text-disabled, #c2c4cc); + width: 14rpx; + height: 14rpx; + font-size: 14rpx; } -.nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right { - right: 16rpx; - -ms-transform: translate(0); - transform: translate(0); +.nut-input-container { + height: 38rpx; + padding: var(--nutui-input-padding, 12rpx); + background-color: var(--nutui-input-background-color, var(--nutui-color-background-overlay, #ffffff)); + border-radius: var(--nutui-input-border-radius, var(--nutui-radius-s, 6rpx)); + border-bottom: var(--nutui-input-border-bottom-width, 0rpx) solid var(--nutui-input-border-bottom, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left { - left: 16rpx; - -ms-transform: translate(0); - transform: translate(0); +.nut-input-native { + flex: 1; + color: var(--nutui-input-color, var(--nutui-color-title, #1a1a1a)); + font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); + padding: 0; + border: 0; + outline: 0 none; + text-decoration: none; + background-color: transparent; } -.nut-popover-dark .nut-popover-content .nut-popover-item-action-icon { - color: rgba(255, 255, 255, 0.8); +.nut-input-readonly .nut-input-native { + color: var(--nutui-color-text-help, #888b94); } -[dir='rtl'] .nut-popover .nut-popover-content .nut-popover-item-name, -.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-name { - margin-left: 0; - margin-right: 4rpx; +.nut-input-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc) !important; } -[dir='rtl'] .nut-popover .nut-popover-content-top .nut-popover-arrow-top, -.nut-rtl .nut-popover .nut-popover-content-top .nut-popover-arrow-top { - left: auto; - right: 50%; - -ms-transform: translate(50%); - transform: translate(50%); +.nut-indicator { + display: flex; + width: auto; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; } -[dir='rtl'] .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right, -.nut-rtl .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right { - right: auto; - left: 16rpx; +.nut-indicator-fixed-width { + width: 21rpx; +} +.nut-indicator-dot, +.nut-indicator-line { + display: inline-block; + vertical-align: middle; + width: var(--nutui-indicator-dot-size, 3rpx); + height: var(--nutui-indicator-dot-size, 3rpx); + border-radius: 50%; + background-color: var(--nutui-color-border-disabled, #c2c4cc); + margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); + opacity: 0.4; } -[dir='rtl'] .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left, -.nut-rtl .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left { - left: auto; - right: 16rpx; +.nut-indicator-dot-0, +.nut-indicator-line-0 { + margin-left: 0; } -[dir='rtl'] .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom, -.nut-rtl .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom { - left: auto; - right: 50%; - -ms-transform: translate(50%); - transform: translate(50%); +.nut-indicator-dot-active, +.nut-indicator-line-active { + width: var(--nutui-indicator-dot-active-size, 6rpx); + border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); + background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23)); + opacity: 1; } -[dir='rtl'] .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right, -.nut-rtl .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right { - right: auto; - left: 16rpx; +.nut-indicator-fixed-width .nut-indicator-dot { + width: 12rpx; + border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); } -[dir='rtl'] .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left, -.nut-rtl .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left { - left: auto; - right: 16rpx; +.nut-indicator-fixed-width .nut-indicator-dot-active { + width: 6rpx; } -.nut-popover-enter-from, -.nut-popover-leave-active { - -ms-transform: scale(0.8); - transform: scale(0.8); - opacity: 0; +.nut-indicator-vertical.nut-indicator-fixed-width { + justify-content: flex-start; + height: 21rpx; + width: auto; } -.nut-popover-content-copy { - position: absolute; - top: -99999rpx; +.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot { + width: 3rpx; + height: 12rpx; + border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); } -.nut-pickerview { - position: relative; - display: -ms-flexbox; - display: flex; - width: 100%; - height: calc(var(--nutui-picker-item-height, 36rpx) * 7); - overflow: hidden; +.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active, +.nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active { + height: 6rpx; } -.nut-pickerview-mask { - top: 0; - bottom: 0; - background-image: var( - --picker-mask-background, - linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), - linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)) - ); - background-position: top, bottom; - background-size: 100% calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); - background-repeat: no-repeat; - transform: translateZ(0); +.nut-indicator-line { + width: var(--nutui-indicator-dot-active-size, 6rpx); + margin: 0; + border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); + background-color: transparent; } -.nut-pickerview-indicator { - top: calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); - height: var(--nutui-picker-item-height, 36rpx); - border: var(--nutui-picker-item-active-line-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - border-left: 0; - border-right: 0; - box-sizing: border-box; +.nut-indicator-line-active { + transition: transform 0.3s ease-in-out; + background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23)); } -.nut-pickerview-list { +.nut-indicator-track { position: relative; - -ms-flex: 1; - flex: 1; - height: calc(var(--nutui-picker-item-height, 36rpx) * 7); - overflow: hidden; - -ms-touch-action: none; - touch-action: none; -} -.nut-pickerview-roller { - position: absolute; - top: calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); - width: 100%; - height: var(--nutui-picker-item-height, 36rpx); - z-index: 1; - transform-style: preserve-3d; -} -.nut-pickerview-roller-placeholder { - height: var(--nutui-picker-item-height, 36rpx); } -.nut-pickerview-roller-item { +.nut-indicator-track::after { + display: block; + content: ' '; position: absolute; - top: 0; - backface-visibility: hidden; - -moz-backface-visibility: hidden; -} -.nut-pickerview-roller-item, -.nut-pickerview-roller-item-tiled { width: 100%; - height: var(--nutui-picker-item-height, 36rpx); - line-height: var(--nutui-picker-item-height, 36rpx); - color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14rpx)); - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.nut-picker-control { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: justify; - justify-content: space-between; - height: var(--nutui-popup-title-height, 50rpx); - padding: var(--nutui-popup-title-padding, 16rpx); + height: 100%; box-sizing: border-box; - font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); + border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); + background-color: var(--nutui-color-border-disabled, #c2c4cc); + opacity: 0.4; } -.nut-picker-cancel-btn { - color: var(--nutui-picker-title-cancel-color, var(--nutui-color-text, #505259)); - font-size: var(--nutui-picker-title-cancel-font-size, var(--nutui-font-size-base, 14rpx)); +.nut-indicator-white .nut-indicator-dot, +.nut-indicator-white .nut-indicator-line { + position: relative; + box-sizing: content-box; + background: rgba(255, 255, 255, 0.4); + opacity: 1; } -.nut-picker-confirm-btn { - color: var(--nutui-picker-title-ok-color, var(--nutui-color-primary, #ff0f23)); - font-size: var(--nutui-picker-title-ok-font-size, var(--nutui-font-size-base, 14rpx)); +.nut-indicator-white .nut-indicator-line { + opacity: 0; } -.nut-picker-title { - -ms-flex: 1; - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - text-align: center; - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); - font-weight: var(--nutui-popup-title-font-weight, var(--nutui-font-weight-bold, 600)); +.nut-indicator-white .nut-indicator-line-active { + opacity: 1; + background: #fff; } -.nut-pagination { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23)); +.nut-indicator-white .nut-indicator-dot-active { + background: #fff; } -.nut-pagination-prev, -.nut-pagination-item, -.nut-pagination-next { - height: 39rpx; - min-width: 39rpx; - -ms-flex-negative: 0; - flex-shrink: 0; - box-sizing: border-box; - display: -ms-flexbox; +.nut-indicator-track.nut-indicator-white::after { + border: 1rpx solid rgba(0, 0, 0, 0.06); + background: rgba(255, 255, 255, 0.4); +} +.nut-indicator-vertical { display: flex; - -ms-flex-align: center; + flex-direction: column; align-items: center; - -ms-flex-pack: center; justify-content: center; - font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23)); - background: #fff; - border-radius: var(--nutui-pagination-item-border-radius, 2rpx); - border: var(--nutui-pagination-item-border-width, 1rpx) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - cursor: pointer; } -.nut-pagination-prev, -.nut-pagination-next { - padding: var(--nutui-pagination-prev-next-padding, 0 12rpx); +.nut-indicator-vertical .nut-indicator-dot { + margin: 0; + margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); } -.nut-pagination-simple { - height: 39rpx; - width: 124rpx; - line-height: 39rpx; - text-align: center; - font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23)); +.nut-indicator-vertical .nut-indicator-dot-0 { + margin-top: 0; } -.nut-pagination-simple-border { - border-right: var(--nutui-pagination-item-border-width, 1rpx) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +.nut-indicator-vertical .nut-indicator-dot-active, +.nut-indicator-vertical.nut-indicator-track .nut-indicator-line { + width: var(--nutui-indicator-dot-size, 3rpx); + height: var(--nutui-indicator-dot-active-size, 6rpx); } -.nut-pagination-lite { - height: var(--nutui-pagination-lite-height, 20rpx); - padding: 0 var(--nutui-spacing-xs, 6rpx); - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - color: #fff; - background-color: var(--nutui-pagination-lite-background-color, rgba(0, 0, 0, 0.45)); - border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, 4rpx)); +[dir='rtl'] .nut-indicator-dot-0, +.nut-rtl .nut-indicator-dot-0 { + margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); + margin-left: 0; } -.nut-pagination-lite-active, -.nut-pagination-lite-default, -.nut-pagination-lite-spliterator { - font-size: var(--nutui-font-size-xs, 11rpx); - color: var(--nutui-pagination-lite-color, #ffffff); +.nut-imagepreview { + width: 100%; + height: 100%; } -.nut-overlay-slide-enter-active, -.nut-overlay-slide-appear-active { - animation-fill-mode: both; - animation-name: nut-fade-in; - animation-duration: var(--nutui-overlay-animation-duration, 0.3s); +.nut-imagepreview-swiper { + height: 100%; + width: 100vw; + background-color: transparent; } -.nut-overlay-slide-exit-active { - animation-fill-mode: both; - animation-name: nut-fade-out; - animation-duration: var(--nutui-overlay-animation-duration, 0.3s); +.nut-imagepreview-index { + position: fixed; + z-index: 2002; + top: 50rpx; + text-align: center; + left: 0; + right: 0; + background: transparent; + color: #fff; } -.nut-numberkeyboard { - width: 100%; - padding: var(--nutui-numberkeyboard-padding, 0 0 22rpx 0); - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-background, #f2f3f5)); +.nut-imagepreview-index .arrow { + position: absolute; + left: 15rpx; + transform: rotate(180deg); } -.nut-numberkeyboard-header { - position: relative; - display: -ms-flexbox; +.nut-imagepreview-close { + position: fixed; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - box-sizing: content-box; - padding: var(--nutui-popup-title-padding, 16rpx); - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); + z-index: 2002; + background: transparent; + color: #fff; } -.nut-numberkeyboard-header-title { - color: var(--nutui-color-title, #1a1a1a); - display: inline-block; - font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); +.nut-imagepreview-close .nut-icon { + color: #fff; } -.nut-numberkeyboard-header-close { - position: absolute; - display: block; +.nut-imagepreview-close.top-right { + top: 50rpx; + right: 20rpx; +} +.nut-imagepreview-close.top-left { + top: 50rpx; + left: 20rpx; +} +.nut-imagepreview-close.bottom { + bottom: 50rpx; + left: 0; right: 0; - top: 50%; - -ms-transform: translateY(-50%); - transform: translateY(-50%); - padding: var(--nutui-numberkeyboard-header-close-padding, 0 16rpx); - color: var(--nutui-numberkeyboard-header-close-color, var(--nutui-color-text, #505259)); - font-size: var(--nutui-numberkeyboard-header-close-font-size, 14rpx); - background-color: var(--nutui-numberkeyboard-header-close-background-color, transparent); - border: none; - cursor: pointer; + text-align: center; } -.nut-numberkeyboard-body { - display: -ms-flexbox; +.nut-imagepreview-pop { + width: 100%; + height: 100%; + max-width: 100% !important; + background: transparent !important; display: flex; - padding: 6rpx 0 0 6rpx; -} -.nut-numberkeyboard-body-wrapper { - position: relative; - -ms-flex: 1; - flex: 1; - width: 33%; - -ms-flex-preferred-size: 33%; - flex-basis: 33%; - box-sizing: border-box; - padding: 0 6rpx 6rpx 0; - background-color: var(--nutui-numberkeyboard-wrapper-background-color, var(--nutui-color-background-sunken, #f7f8fc)); + align-items: center; } -.nut-numberkeyboard-body-wrapper .key { - display: -ms-flexbox; +.nut-imagepreview-swiper .nut-imagepreview-swiper-item, +.nut-imagepreview-swiper .nut-swiper-item { display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - height: var(--nutui-numberkeyboard-key-height, 48rpx); - font-size: var(--nutui-numberkeyboard-key-font-size, var(--nutui-font-size-xl, 18rpx)); - line-height: var(--nutui-numberkeyboard-key-line-height, 1.5); - background-color: var(--nutui-numberkeyboard-key-background-color, var(--nutui-color-background-overlay, #ffffff)); - color: var(--nutui-numberkeyboard-key-color, var(--nutui-color-text, #505259)); - border-radius: var(--nutui-numberkeyboard-key-border-radius, 8rpx); - border: var(--nutui-numberkeyboard-key-border, none); - font-weight: var(--nutui-font-weight-bold, 600); - cursor: pointer; + height: 100%; } -.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key { - position: absolute; - top: 0; - right: 6rpx; - bottom: 6rpx; - left: 0; - height: auto; +.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-image, +.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-video, +.nut-imagepreview-swiper .nut-swiper-item .nut-image, +.nut-imagepreview-swiper .nut-swiper-item .nut-video { + display: flex; + justify-content: center; + align-items: center; } -.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm { - font-size: var(--nutui-numberkeyboard-key-confirm-font-size, var(--nutui-font-size-l, 15rpx)); - color: var(--nutui-numberkeyboard-key-confirm-color, #fff); - background-color: var(--nutui-numberkeyboard-key-confirm-background-color, var(--nutui-color-primary, #ff0f23)); +.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-image-preview-box, +.nut-imagepreview-swiper .nut-swiper-item .nut-image-preview-box { + width: 100%; } -.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm.active { - background-color: rgba(255, 0, 0, 0.70196); +.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-video .h5-video, +.nut-imagepreview-swiper .nut-swiper-item .nut-video .h5-video { + object-fit: contain; } -[dir='rtl'] .nut-popup .nut-numberkeyboard-body, -.nut-rtl .nut-popup .nut-numberkeyboard-body { - padding: 6rpx 6rpx 0 0; +[dir='rtl'] .nut-imagepreview-index .arrow, +.nut-rtl .nut-imagepreview-index .arrow { + left: auto; + right: 15rpx; + transform: rotate(-180deg); } -[dir='rtl'] .nut-popup .nut-numberkeyboard-body-wrapper, -.nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper { - padding: 0 0 6rpx 6rpx; +[dir='rtl'] .nut-imagepreview-close.top-right, +.nut-rtl .nut-imagepreview-close.top-right { + right: auto; + left: 20rpx; } -[dir='rtl'] .nut-popup .nut-numberkeyboard-body-wrapper .delete, -.nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper .delete { - -ms-transform: rotate(-180deg); - transform: rotate(-180deg); +[dir='rtl'] .nut-imagepreview-close.top-left, +.nut-rtl .nut-imagepreview-close.top-left { + left: auto; + right: 20rpx; } -[dir='rtl'] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key, -.nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key { - left: 6rpx; - right: 0; +.nut-hoverbutton-item-container { + width: var(--nutui-hoverbutton-item-size, 40rpx); + height: var(--nutui-hoverbutton-item-size, 40rpx); + border-radius: var(--nutui-hoverbutton-item-size, 40rpx); + border: 1rpx solid var(--nutui-hoverbutton-item-border-color, rgba(0, 0, 0, 0.12)); + background-color: var(--nutui-hoverbutton-item-background, var(--nutui-white-12)); } -[dir='rtl'] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete, -.nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete { - -ms-transform: rotate(-180deg); - transform: rotate(-180deg); +.nut-hoverbutton-item-container-active { + background-color: var(--nutui-hoverbutton-item-background-active, rgba(247, 248, 252, 0.9)); } -.nut-notify { - position: fixed; - left: 8rpx; - right: 8rpx; - z-index: var(--nutui-notify-z-index, 1000); - display: -ms-flexbox; +.nut-hoverbutton-item-container-harmony { + margin-bottom: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8rpx)); +} +.nut-hoverbutton-item-container-harmony:last-child { + margin-bottom: 0; +} +.nut-hoverbutton-item-container-icontext { display: flex; - -ms-flex-align: center; + flex-direction: column; align-items: center; - box-sizing: border-box; - height: var(--nutui-notify-height, 40rpx); - padding: var(--nutui-notify-padding, 0rpx 12rpx); - border-radius: var(--nutui-notify-border-radius, 8rpx); - box-shadow: var(--nutui-notify-box-shadow, 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.06)); - background-color: var(--nutui-notify-background-color, #ffffff); } -.nut-notify-content { - -ms-flex: 1; - flex: 1; - text-align: center; - min-width: 0; - font-size: var(--nutui-notify-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-notify-text-color, var(--nutui-color-title, #1a1a1a)); - white-space: nowrap; - overflow: hidden; +.nut-hoverbutton-item-container-icontext .nut-icon { + display: block; + width: 14rpx; + height: 14rpx; + font-size: 14rpx; } -.nut-notify-left-icon { - margin-right: 6rpx; +.nut-hoverbutton-item-icon { + width: 20rpx; + height: 20rpx; + margin: 9rpx; + color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a)); + fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a)); } -.nut-notify-left-icon .nut-icon { - height: 16rpx; - width: 16rpx; +.nut-hoverbutton-item-icon .nut-icon { + display: block; + width: 20rpx; + height: 20rpx; + font-size: 20rpx; } -.nut-notify-right-icon { - margin-left: 6rpx; +.nut-hoverbutton-item-text-icon { + width: 14rpx; + height: 5rpx; } -.nut-notify-right-icon .nut-icon { - height: 12rpx; - width: 12rpx; +.nut-hoverbutton-item-text { + font-size: 10rpx; + margin-top: 5rpx; + line-height: 9rpx; } -.nut-noticebar .nut-noticebar-box { - position: relative; - display: -ms-flexbox; +.nut-hoverbutton { display: flex; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-noticebar-height, 36rpx); - padding: var(--nutui-noticebar-box-padding, 0 16rpx); - font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, 12rpx)); - background: var(--nutui-noticebar-background, rgb(251, 248, 220)); - color: var(--nutui-noticebar-color, #d9500b); - border-radius: var(--nutui-noticebar-border-radius, 0); + flex-direction: column; + gap: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8rpx)); } -.nut-noticebar .nut-noticebar-box-wrapable, -.nut-noticebar .nut-noticebar-box-center { - height: auto; - padding: var(--nutui-noticebar-wrapable-padding, 8rpx 16rpx); +.nut-hoverbutton-container { + position: fixed; + right: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, 8rpx)); + bottom: var(--nutui-hoverbutton-position-bottom, 60rpx); + z-index: 10; } -.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content { +[dir='rtl'] .nut-hoverbutton-container, +.nut-hoverbutton-container-rtl { + right: auto; + left: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, 8rpx)); +} +.nut-image { + display: block; position: relative; - display: inline; - display: initial; } -.nut-noticebar .nut-noticebar-box-left-icon { - display: -ms-flexbox; - display: flex; - height: var(--nutui-noticebar-left-icon-width, 16rpx); - min-width: var(--nutui-noticebar-left-icon-width, 16rpx); - margin-right: var(--nutui-noticebar-icon-gap, 4rpx); - background-size: 100% 100%; +.nut-image-default { + display: block; + width: 100%; + height: 100%; } -.nut-noticebar .nut-noticebar-box-right-icon { - display: -ms-flexbox; +.nut-image.nut-image-round { + border-radius: 50%; + overflow: hidden; +} +.nut-image-basic { + width: 100%; + height: 100%; +} +.nut-image-loading, +.nut-image-error { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; display: flex; - -ms-flex-align: center; + flex-direction: column; align-items: center; - -ms-flex-pack: center; justify-content: center; - width: var(--nutui-noticebar-right-icon-width, 16rpx); - margin-left: var(--nutui-noticebar-icon-gap, 4rpx); + background: var(--nutui-color-background, #f2f3f5); + background-size: 100% 100%; } -.nut-noticebar .nut-noticebar-box-right-icon .nut-icon { - width: 12rpx; - height: 12rpx; - color: var(--nutui-noticebar-color, #d9500b); +[dir='rtl'] .nut-image .nut-img-loading, +.nut-rtl .nut-image .nut-img-loading, +[dir='rtl'] .nut-image .nut-img-error, +.nut-rtl .nut-image .nut-img-error { + left: auto; + right: 0; } -.nut-noticebar .nut-noticebar-box-wrap { - display: -ms-flexbox; +.nut-grid-item { display: flex; - -ms-flex: 1; - flex: 1; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-noticebar-line-height, 24rpx); - line-height: var(--nutui-noticebar-line-height, 24rpx); - overflow: hidden; + flex-direction: column; position: relative; + box-sizing: border-box; + color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a)); + overflow: hidden; } -.nut-noticebar .nut-noticebar-box .play { - animation: nut-notice-bar-play linear both running; -} -.nut-noticebar .nut-noticebar-box .play-infinite { - animation: nut-notice-bar-play-infinite linear infinite both running; +.nut-grid-item-text { + color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a)); + font-size: var(--nutui-grid-item-text-font-size, var(--nutui-font-size-s, 12rpx)); + word-break: break-all; + margin: var(--nutui-grid-item-text-margin, 8rpx) 0 0 0; } -.nut-noticebar .nut-noticebar-box .play-vertical { - animation: nut-notice-bar-play-vertical linear infinite both running; +.nut-grid-item-text-reverse { + margin: 0 0 var(--nutui-grid-item-text-margin, 8rpx) 0; } -.nut-noticebar .nut-noticebar-vertical { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - justify-content: space-between; - height: var(--nutui-noticebar-height, 36rpx); - font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, 12rpx)); - overflow: hidden; - padding: var(--nutui-noticebar-box-padding, 0 16rpx); - background: var(--nutui-noticebar-background, rgb(251, 248, 220)); - color: var(--nutui-noticebar-color, #d9500b); +.nut-grid-item-text-horizontal { + margin: 0 0 0 var(--nutui-grid-item-text-margin, 8rpx); } -.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-left-icon { - height: var(--nutui-noticebar-left-icon-width, 16rpx); - min-width: var(--nutui-noticebar-left-icon-width, 16rpx); - margin: var(--nutui-noticebar-icon-gap, 4rpx); - background-size: 100% 100%; - display: -ms-flexbox; - display: flex; - -ms-flex-item-align: center; - align-self: center; +.nut-grid-item-text-horizontal-reverse { + margin: 0 var(--nutui-grid-item-text-margin, 8rpx) 0 0; } -.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list-item { - display: -ms-flexbox; +.nut-grid-item-content { display: flex; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-noticebar-height, 36rpx); + box-sizing: border-box; + flex: 1; + flex-direction: column; width: 100%; + padding: var(--nutui-grid-item-content-padding, 16rpx 8rpx); + background: var(--nutui-grid-item-content-bg-color, var(--nutui-gray-1)); + border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon { - -ms-flex-item-align: center; - align-self: center; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - width: var(--nutui-noticebar-right-icon-width, 16rpx); - margin-left: var(--nutui-noticebar-icon-gap, 4rpx); +.nut-grid-item-content-border { + border-right-width: var(--nutui-grid-border-width, 0rpx); + border-bottom-width: var(--nutui-grid-border-width, 0rpx); } -@keyframes nut-notice-bar-play { - to { - transform: translate3d(-100%, 0, 0); - } +.nut-grid-item-content-surround { + border-top-width: var(--nutui-grid-border-width, 0rpx); + border-left-width: var(--nutui-grid-border-width, 0rpx); + border-radius: var(--nutui-grid-item-border-radius, var(--nutui-radius-l, 8rpx)); } -@keyframes nut-notice-bar-play-infinite { - to { - transform: translate3d(-100%, 0, 0); - } +.nut-grid-item-content-center { + align-items: center; + justify-content: center; } -@keyframes nut-notice-bar-play-vertical { - to { - transform: translateY(var(--nutui-noticebar-height, 36rpx)); - } +.nut-grid-item-content-square { + margin-top: -100%; } -[dir='rtl'] .nut-noticebar .nut-noticebar-box-left-icon, -.nut-rtl .nut-noticebar .nut-noticebar-box-left-icon { - margin-right: 0; - margin-left: var(--nutui-noticebar-icon-gap, 4rpx); +.nut-grid-item-content-reverse { + flex-direction: column-reverse; } -[dir='rtl'] .nut-noticebar .nut-noticebar-box-right-icon, -.nut-rtl .nut-noticebar .nut-noticebar-box-right-icon { - margin-left: 0; - margin-right: var(--nutui-noticebar-icon-gap, 4rpx); +.nut-grid-item-content-horizontal { + flex-direction: row; } -[dir='rtl'] .nut-noticebar .nut-noticebar-box .play, -.nut-rtl .nut-noticebar .nut-noticebar-box .play { - animation: nut-notice-bar-play-rtl linear both running; +.nut-grid-item-content-horizontal-reverse { + flex-direction: row-reverse; } -[dir='rtl'] .nut-noticebar .nut-noticebar-box .play-infinite, -.nut-rtl .nut-noticebar .nut-noticebar-box .play-infinite { - animation: nut-notice-bar-play-infinite-rtl linear infinite both running; +.nut-grid-item-content-clickable { + cursor: pointer; } -@keyframes nut-notice-bar-play-rtl { - to { - transform: translate3d(100%, 0, 0); - } +.nut-grid-item-content-clickable::before { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); + border: inherit; + border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); + border-radius: inherit; + transform: translate(-50%, -50%); + opacity: 0; + content: ' '; } -@keyframes nut-notice-bar-play-infinite-rtl { - to { - transform: translate3d(100%, 0, 0); - } +[dir='rtl'] .nut-grid-item-content-border, +.nut-rtl .nut-grid-item-content-border { + border-right-width: 0; + border-left-width: 1rpx; } -[dir='rtl'] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon, -.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon { - margin-left: 0; - margin-right: var(--nutui-noticebar-icon-gap, 4rpx); +[dir='rtl'] .nut-grid-item-content-surround, +.nut-rtl .nut-grid-item-content-surround { + border-left-width: 0; + border-right-width: 1rpx; } -.nut-navbar { - width: var(--nutui-navbar-width, 100%); - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-pack: justify; - justify-content: space-between; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-navbar-height, 44rpx); - box-sizing: border-box; - background: var(--nutui-navbar-background, #ffffff); - box-shadow: var(--nutui-navbar-box-shadow, none); - font-size: var(--nutui-navbar-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-navbar-color, var(--nutui-color-title, #1a1a1a)); - overflow: hidden; - padding: 0 16rpx; +[dir='rtl'] .nut-grid-item-content-horizontal .nut-grid-item-text, +.nut-rtl .nut-grid-item-content-horizontal .nut-grid-item-text { + margin: 0 var(--nutui-grid-item-text-margin, 8rpx) 0 0; } -.nut-navbar-title { - height: 100%; - text-align: center; - display: -ms-flexbox; - display: flex; - -ms-flex: 1; - flex: 1; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - font-size: var(--nutui-navbar-title-font-size, var(--nutui-font-size-xl, 18rpx)); - font-weight: var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold, 600)); - color: var(--nutui-navbar-title-font-color, var(--nutui-color-title, #1a1a1a)); +[dir='rtl'] .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text, +.nut-rtl .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text { + margin: 0 0 0 var(--nutui-grid-item-text-margin, 8rpx); } -.nut-navbar-title-center { - max-width: 129rpx; - -ms-flex-pack: center; - justify-content: center; +[dir='rtl'] .nut-grid-item-content-clickable::before, +.nut-rtl .nut-grid-item-content-clickable::before { + left: auto; + right: 50%; + transform: translate(50%, -50%); } -.nut-navbar-left, -.nut-navbar-right { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-direction: row; +.nut-grid { + display: flex; flex-direction: row; - max-width: 124rpx; - height: 100%; - cursor: pointer; + align-items: stretch; + flex-wrap: wrap; + border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-navbar-left .nut-icon, -.nut-navbar-left .nutui-iconfont, -.nut-navbar-right .nut-icon, -.nut-navbar-right .nutui-iconfont { - width: 20rpx; - height: 20rpx; - font-size: 20rpx; +.nut-grid-border { + border-top-width: var(--nutui-grid-border-width, 0rpx); + border-left-width: var(--nutui-grid-border-width, 0rpx); } -.nut-navbar-left-maxwidth, -.nut-navbar-right-maxwidth { - box-sizing: border-box; - width: 108rpx; +[dir='rtl'] .nut-grid-border, +.nut-rtl .nut-grid-border { + border-left-width: 0; + border-right-width: 1rpx; } -.nut-navbar-left { - padding-right: 16rpx; - gap: 16rpx; +.nut-form-item { + display: flex; + line-height: inherit; } -.nut-navbar-left-rtl { - padding-right: 0; - padding-left: 16rpx; +.nut-form-item-disabled { + opacity: 0.4; + pointer-events: none; } -.nut-navbar-left-back { - display: -ms-flexbox; +.nut-form-item-label { display: flex; - -ms-flex-direction: row; flex-direction: row; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - gap: 16rpx; + font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, 12rpx)); + font-weight: 400; + width: var(--nutui-form-item-label-width, 90rpx); + margin-right: var(--nutui-form-item-label-margin-right, 10rpx); + flex: 0 0 auto; + word-wrap: break-word; + text-align: var(--nutui-form-item-label-text-align, left); + line-height: inherit; } -.nut-navbar-right { - padding-left: 16rpx; - -ms-flex-pack: end; - justify-content: flex-end; - gap: 16rpx; +.nut-form-item-label-left-required { + color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23)); + margin-right: var(--nutui-form-item-required-margin-right, 4rpx); + position: absolute; + left: -10rpx; } -.nut-navbar-right-rtl { - padding-right: 16rpx; - padding-left: 0; +.nut-form-item-label-right-required { + color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23)); + margin-left: var(--nutui-form-item-required-margin-right, 4rpx); + position: absolute; + right: -10rpx; } -.nut-navbar-rtl .nut-icon-ArrowLeft { - transform: rotateY(180deg); +.nut-form-item .nut-form-item-labeltxt { + position: relative; + font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, 12rpx)); } -.nut-menu-container-content { - padding: var(--nutui-menu-content-padding, 12rpx 24rpx); - max-height: var(--nutui-menu-content-max-height, 214rpx); - overflow-y: auto; - display: -ms-flexbox; +.nut-form-item-body { + flex: 1; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - background: var(--nutui-menu-content-background-color, var(--nutui-color-background-overlay, #ffffff)); + flex-direction: column; } -.nut-menu-container-item { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-font-size-base, 14rpx); - padding: var(--nutui-menu-item-padding, 12rpx 0); +.nut-form-item-body-slots { + text-align: var(--nutui-form-item-body-slots-text-align, left); } -.nut-menu-container-item .nut-icon { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - margin-right: var(--nutui-menu-item-icon-margin, 8rpx); - -ms-flex-negative: 0; - flex-shrink: 0; +.nut-form-item-body-slots .nut-input { + padding: 0; + border: 0; } -.nut-menu-container-wrap-up { - bottom: var(--nutui-menu-bar-line-height, 48rpx); +.nut-form-item-body-slots .nut-input-container { + height: auto; } -.nut-menu-container-down-enter { - opacity: 0; - -ms-transform: translateY(-30rpx); - transform: translateY(-30rpx); +.nut-form-item-body-slots .nut-input-text { + font-size: var(--nutui-form-item-body-font-size, var(--nutui-font-size-base, 14rpx)); + text-align: var(--nutui-form-item-body-input-text-align, left); + color: var(--nutui-color-title, #1a1a1a); + width: 100%; + outline: 0 none; + border: 0; + text-decoration: none; + background: transparent; } -.nut-menu-container-down-enter-done { - opacity: 1; - -ms-transform: translate(0); - transform: translate(0); - transition: all 0.1s; +.nut-form-item-body-slots .nut-range-container { + min-height: 24rpx; } -.nut-menu-container-up-enter { - opacity: 0; - -ms-transform: translateY(30rpx); - transform: translateY(30rpx); +.nut-form-item-body-slots .nut-textarea { + padding: 0; } -.nut-menu-container-up-enter-done { - opacity: 1; - -ms-transform: translate(0); - transform: translate(0); - transition: all 0.1s; +.nut-form-item-body-slots .nut-textarea .nut-textarea-textarea { + font: inherit; + text-align: var(--nutui-form-item-body-input-text-align, left); } -[dir='rtl'] .nut-menu-container-item .nut-icon, -.nut-rtl .nut-menu-container-item .nut-icon { +.nut-form-item-body-tips { + text-align: var(--nutui-form-item-tip-text-align, left); + font-size: var(--nutui-form-item-tip-font-size, var(--nutui-font-size-xs, 11rpx)); + color: var(--nutui-form-item-error-message-color, var(--nutui-color-primary, #ff0f23)); +} +[dir='rtl'] .nut-form-item-label, +.nut-rtl .nut-form-item-label { + text-align: right; margin-right: 0; - margin-left: var(--nutui-menu-item-icon-margin, 8rpx); + margin-left: var(--nutui-form-item-label-margin-right, 10rpx); } -[dir='rtl'] .nut-menu-container .nut-icon, -.nut-rtl .nut-menu-container .nut-icon { +[dir='rtl'] .nut-form-item-label .required::before, +.nut-rtl .nut-form-item-label .required::before { + margin-right: 0; + margin-left: var(--nutui-form-item-required-margin-right, 4rpx); +} +[dir='rtl'] .nut-form-item-body-slots, +.nut-rtl .nut-form-item-body-slots { + text-align: right; +} +[dir='rtl'] .nut-form-item-body-slots .nut-icon-ArrowRight, +[dir='rtl'] .nut-form-item-body-slots .nut-icon-ArrowLeft, +.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowRight, +.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowLeft { transform: rotateY(180deg); } -.nut-menu-bar { - position: relative; - display: -ms-flexbox; - display: flex; - line-height: var(--nutui-menu-bar-line-height, 48rpx); - background-color: var(--nutui-color-background-overlay, #ffffff); - box-shadow: var(--nutui-menu-bar-box-shadow, 0 2rpx 12rpx rgba(89, 89, 89, 0.12)); +[dir='rtl'] .nut-form-item-body-slots .nut-input-text, +.nut-rtl .nut-form-item-body-slots .nut-input-text, +[dir='rtl'] .nut-form-item-body-slots .nut-textarea-textarea, +.nut-rtl .nut-form-item-body-slots .nut-textarea-textarea, +[dir='rtl'] .nut-form-item-tips, +.nut-rtl .nut-form-item-tips { + text-align: right; } -.nut-menu-title { - -ms-flex: 1; - flex: 1; - text-align: center; - font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-menu-title-color, var(--nutui-color-title, #1a1a1a)); - min-width: 0; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - max-width: 100%; +.nut-form-item-label-right { + justify-content: flex-end; + padding-right: 24rpx; + white-space: nowrap; } -.nut-menu-title-text { +.nut-form-item-label-left { + position: relative; + padding-left: 12rpx; white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; +} +.nut-form-item-top { + flex-direction: column; + align-items: flex-start; + white-space: nowrap; +} +.nut-form-item-label-top { display: block; - padding: var(--nutui-menu-title-padding, 0 8rpx); + padding-bottom: 4rpx; + padding-right: 24rpx; +} +.nut-form-item-body-top { + margin-left: 0; + width: 100%; +} +[dir='rtl'] .form-layout-right .nut-form-item-label, +.nut-rtl .form-layout-right .nut-form-item-label { + text-align: left; + padding-right: 0; + padding-left: 24rpx; +} +[dir='rtl'] .form-layout-left .nut-form-item-label, +.nut-rtl .form-layout-left .nut-form-item-label { + text-align: right; + padding-left: 0; + padding-right: 12rpx; +} +[dir='rtl'] .form-layout-left .nut-form-item-label .required, +.nut-rtl .form-layout-left .nut-form-item-label .required { + left: auto; + right: 0.1em; +} +[dir='rtl'] .form-layout-top .nut-form-item-label, +.nut-rtl .form-layout-top .nut-form-item-label { + padding-right: 0; + padding-left: 24rpx; +} +[dir='rtl'] .form-layout-top .nut-form-item-body, +.nut-rtl .form-layout-top .nut-form-item-body { + margin-left: 0; + margin-right: 0; } -.nut-menu-title.active .nut-menu-title-icon { - -ms-transform: rotate(180deg); +.nut-fixednav { + position: fixed; + z-index: var(--nutui-fixednav-index, 900); + display: inline-block; + height: 50rpx; +} +.nut-fixednav.active .nut-fixednav-btn .nut-icon { transform: rotate(180deg); } -.nut-loading .nut-loading-icon-box { - display: inline-block; - font-size: 0; - line-height: 0; - animation: nut-loading-rotation 1s infinite linear; +.nut-fixednav.active .nut-fixednav-list { + transform: translate(0) !important; } -.nut-loading .nut-loading-icon-box .nut-loading-icon { - color: var(--nutui-loading-icon-color, var(--nutui-color-text-help, #888b94)); - width: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); - height: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); - font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); +.nut-fixednav.active.nut-fixednav-left .nut-icon { + transform: rotate(0); } -.nut-loading .nut-loading-text { - color: var(--nutui-loading-color, var(--nutui-color-text-help, #888b94)); - font-size: var(--nutui-loading-font-size, var(--nutui-font-size-s, 12rpx)); +.nut-fixednav-btn { + box-sizing: border-box; + position: absolute; + z-index: var(--nutui-fixednav-index, 900); + width: 70rpx; + height: 100%; + background: var(--nutui-fixednav-button-background, var(--nutui-color-primary, #ff0f23)); + box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); + display: flex; + align-items: center; + justify-content: center; } -.nut-loading-vertical .nut-loading-text { - padding-top: var(--nutui-spacing-base, 8rpx); +.nut-fixednav-btn .text { + width: 24rpx; + line-height: 13rpx; + font-size: var(--nutui-font-size-s, 12rpx); + color: #fff; + flex-shrink: 0; } -@keyframes nut-loading-rotation { - 0% { - } - to { - } +.nut-fixednav-btn .nut-icon { + transition: all 0.3s; } -.nut-inputnumber { - display: -ms-flexbox; +.nut-fixednav-list { + position: absolute; + transition: all 0.5s; + z-index: var(--nutui-fixednav-index, 900); + flex-shrink: 0; + height: 100%; + background: var(--nutui-fixednav-background-color, #ffffff); display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - width: calc(2 * var(--nutui-inputnumber-input-margin, 0rpx) + 2 * var(--nutui-inputnumber-button-width, 20rpx) + var(--nutui-inputnumber-input-width, 26rpx)); - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - background-color: var(--nutui-color-background, #f2f3f5); - border-radius: var(--nutui-inputnumber-input-border-radius, 4rpx); - overflow: hidden; + justify-content: space-between; + box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.2); } -.nut-inputnumber-minus, -.nut-inputnumber-add { - display: -ms-flexbox; +.nut-fixednav-list-item { + position: relative; + flex: 1; + height: 100%; display: flex; - -ms-flex-pack: center; + flex-direction: column; justify-content: center; - -ms-flex-align: center; align-items: center; - width: var(--nutui-inputnumber-button-width, 20rpx); - height: var(--nutui-inputnumber-button-height, 20rpx); - background-color: var(--nutui-inputnumber-button-background-color, transparent); + min-width: 50rpx; + flex-shrink: 0; + color: var(--nutui-fixednav-color, #1a1a1a); } -.nut-inputnumber-minus .nut-icon, -.nut-inputnumber-add .nut-icon { - --nut-icon-width: 10rpx; - --nut-icon-height: 10rpx; +.nut-fixednav-list-item .nut-fixednav-list-text { + font-size: 10rpx; } -.nut-inputnumber-input { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - width: var(--nutui-inputnumber-input-width, 26rpx); - font-size: var(--nutui-inputnumber-input-font-size, var(--nutui-font-size-s, 12rpx)); - height: var(--nutui-inputnumber-input-height, 20rpx); - text-align: center; - outline: none; - border: var(--nutui-inputnumber-input-border, 0); - margin-left: var(--nutui-inputnumber-input-margin, 0rpx); - margin-right: var(--nutui-inputnumber-input-margin, 0rpx); - color: var(--nutui-color-text, #505259); - background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-color-background, #f2f3f5)); +.nut-fixednav-list-image { + width: 20rpx; + height: 20rpx; + margin-bottom: 2rpx; } -.nut-inputnumber-input::-webkit-outer-spin-button, -.nut-inputnumber-input::-webkit-inner-spin-button { - appearance: none; +.nut-fixednav-right { + right: 0; } -.nut-inputnumber-icon-minus, -.nut-inputnumber-icon-plus { - --nut-icon-width: 16rpx; - --nut-icon-height: 16rpx; +.nut-fixednav-right .nut-fixednav-btn { + right: 0; + border-radius: 45rpx 0 0 45rpx; } -.nut-infiniteloading .nut-infinite-top { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - overflow: hidden; - font-size: var(--nutui-font-size-s, 12rpx); - color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help, #888b94)); +.nut-fixednav-right .nut-fixednav-btn .nut-icon { + margin-right: 5rpx; + transform: rotate(0); } -.nut-infiniteloading .nut-infinite-top-tips-icons { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - margin-bottom: 4rpx; +.nut-fixednav-right .nut-fixednav-list { + right: 0; + transform: translate(100%); + border-radius: 25rpx 0 0 25rpx; + padding-left: 20rpx; + padding-right: 80rpx; } -.nut-infiniteloading .nut-infinite-bottom { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - padding-top: 6rpx; - color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help, #888b94)); - text-align: center; +.nut-fixednav-left { + left: 0; } -.nut-infiniteloading .nut-infinite-bottom-tips { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - font-size: var(--nutui-font-size-xxs, 10rpx); +.nut-fixednav-left .nut-fixednav-btn { + flex-direction: row-reverse; + left: 0; + border-radius: 0 45rpx 45rpx 0; } -.nut-infiniteloading .nut-infinite-bottom-tips-icons { - margin-right: 8rpx; +.nut-fixednav-left .nut-fixednav-btn .nut-icon { + margin-left: 5rpx; + transform: rotate(180deg); } -[dir='rtl'] .nut-infiniteloading .nut-infinite-bottom-tips-icons, -.nut-rtl .nut-infiniteloading .nut-infinite-bottom-tips-icons { +.nut-fixednav-left .nut-fixednav-list { + transform: translate(-100%); + left: 0; + border-radius: 0 25rpx 25rpx 0; + padding-left: 80rpx; + padding-right: 20rpx; +} +[dir='rtl'] .nut-fixednav-right, +.nut-rtl .nut-fixednav-right { + right: auto; + left: 0; +} +[dir='rtl'] .nut-fixednav.active .nut-icon, +.nut-rtl .nut-fixednav.active .nut-icon { + transform: rotate(0); +} +[dir='rtl'] .nut-fixednav.active.nut-fixednav-left .nut-icon, +.nut-rtl .nut-fixednav.active.nut-fixednav-left .nut-icon { + transform: rotate(-180deg); +} +[dir='rtl'] .nut-fixednav-btn, +.nut-rtl .nut-fixednav-btn { + right: auto; + left: 0; + border-radius: 0 45rpx 45rpx 0; +} +[dir='rtl'] .nut-fixednav-btn .nut-icon, +.nut-rtl .nut-fixednav-btn .nut-icon { margin-right: 0; - margin-left: 8rpx; + margin-left: 5rpx; + transform: rotate(180deg); } -.nut-input { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -ms-flex: 1; - flex: 1; - -ms-flex-align: center; - align-items: center; - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); - box-sizing: border-box; +[dir='rtl'] .nut-fixednav-list, +.nut-rtl .nut-fixednav-list { + right: auto; + left: 0; + transform: translate(-100%); + border-radius: 0 25rpx 25rpx 0; + box-shadow: -2rpx 2rpx 8rpx rgba(0, 0, 0, 0.2); + padding-right: 20rpx; + padding-left: 80rpx; } -.nut-input .nut-input-native .weui-input::-webkit-input-placeholder { - color: #757575; - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); +[dir='rtl'] .nut-fixednav-list-item .b, +.nut-rtl .nut-fixednav-list-item .b { + right: auto; + left: 0; } -.nut-input .nut-input-native .weui-input::-moz-placeholder { - color: #757575; - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); +[dir='rtl'] .nut-fixednav-left, +.nut-rtl .nut-fixednav-left { + left: auto; + right: 0; } -.nut-input .nut-input-native .weui-input:-ms-input-placeholder { - color: #757575; - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); +[dir='rtl'] .nut-fixednav-left .nut-fixednav-btn, +.nut-rtl .nut-fixednav-left .nut-fixednav-btn { + left: auto; + right: 0; + border-radius: 45rpx 0 0 45rpx; } -.nut-input .nut-input-native .weui-input::-ms-input-placeholder { - color: #757575; - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); +[dir='rtl'] .nut-fixednav-left .nut-fixednav-btn .nut-icon, +.nut-rtl .nut-fixednav-left .nut-fixednav-btn .nut-icon { + transform: rotate(0); + margin-right: 5rpx; + margin-left: 0; } -.nut-input .nut-input-native .weui-input::placeholder, -.nut-input-placeholder { - color: #757575; - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); +[dir='rtl'] .nut-fixednav-left .nut-fixednav-list, +.nut-rtl .nut-fixednav-left .nut-fixednav-list { + transform: translate(100%); + right: auto; + left: auto; + border-radius: 25rpx 0 0 25rpx; + padding-right: 80rpx; + padding-left: 20rpx; } -.nut-input .nut-icon { - color: var(--nutui-color-text-disabled, #c2c4cc); - width: 14rpx; - height: 14rpx; - font-size: 14rpx; +.nut-drag .nut-fixednav { + position: relative; } -.nut-input-container { - height: 38rpx; - padding: var(--nutui-input-padding, 12rpx); - background-color: var(--nutui-input-background-color, var(--nutui-color-background-overlay, #ffffff)); - border-radius: var(--nutui-input-border-radius, var(--nutui-radius-s, 6rpx)); - border-bottom: var(--nutui-input-border-bottom-width, 0rpx) solid var(--nutui-input-border-bottom, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +.nut-ellipsis { + display: flex; } -.nut-input-native { - -ms-flex: 1; - flex: 1; - color: var(--nutui-input-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); - padding: 0; - border: 0; - outline: 0 none; - text-decoration: none; - background-color: transparent; +.nut-ellipsis .nut-ellipsis-text { + cursor: pointer; + color: var(--nutui-ellipsis-expand-collapse-color, var(--nutui-color-info, #0073ff)); + display: inline-block; } -.nut-indicator-fixed-width { - width: 21rpx; +.nut-ellipsis .nut-ellipsis-wordbreak { + word-break: break-all; } -.nut-indicator-dot, -.nut-indicator-line { - display: inline-block; - vertical-align: middle; - width: var(--nutui-indicator-dot-size, 3rpx); - height: var(--nutui-indicator-dot-size, 3rpx); - border-radius: 50%; - background-color: var(--nutui-color-border-disabled, #c2c4cc); - margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); - opacity: 0.4; +.nut-ellipsis-copy { + position: absolute; + top: -999999rpx; } -.nut-indicator-dot-active, -.nut-indicator-line-active { - width: var(--nutui-indicator-dot-active-size, 6rpx); - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); - background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23)); - opacity: 1; +.nut-ellipsis-width { + width: fit-content; } -.nut-indicator-fixed-width .nut-indicator-dot { - width: 12rpx; - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); +.nut-elevator { + position: relative; + display: flex; + width: 100%; } -.nut-indicator-fixed-width .nut-indicator-dot-active { - width: 6rpx; +.nut-elevator-list { + position: relative; + top: 0; + display: flex; + width: 100%; + overflow: hidden; } -.nut-indicator-vertical.nut-indicator-fixed-width { - -ms-flex-pack: start; - justify-content: flex-start; - height: 21rpx; - width: auto; +.nut-elevator-list-inner { + display: flex; + flex-direction: column; + min-height: 100%; + width: 100%; + background-color: var(--nutui-elevator-list-bg-color, #ffffff); + overflow: auto; } -.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot { - width: 3rpx; - height: 12rpx; - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); +.nut-elevator-list-item { + display: flex; } -.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active, -.nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active { - height: 6rpx; +.nut-elevator-list-item-sublist { + display: flex; + flex-direction: column; } -.nut-indicator-line { - width: var(--nutui-indicator-dot-active-size, 6rpx); - margin: 0; - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); - background-color: transparent; +.nut-elevator-list-item-code { + display: flex; + align-items: center; + height: var(--nutui-elevator-list-item-code-height, 34rpx); + font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-elevator-list-item-code-color, var(--nutui-color-text-help, #888b94)); + font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600)); } -.nut-indicator-line-active { - transition: transform 0.3s ease-in-out; - background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23)); +.nut-elevator-list-item-name { + display: flex; + align-items: center; + height: var(--nutui-elevator-list-item-name-height, 34rpx); + font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-elevator-list-color, var(--nutui-color-title, #1a1a1a)); } -.nut-indicator-track::after { - display: block; - content: ' '; +.nut-elevator-list-item-name-highcolor { + color: var(--nutui-color-primary, #ff0f23); + font-weight: 600; +} +.nut-elevator-list-fixed { position: absolute; + top: 0; + left: 0; + z-index: 1; + display: flex; + align-items: center; width: 100%; - height: 100%; + padding: var(--nutui-elevator-list-item-padding, 0 36rpx 0 20rpx); + height: var(--nutui-elevator-list-item-code-height, 34rpx); box-sizing: border-box; - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); - background-color: var(--nutui-color-border-disabled, #c2c4cc); - opacity: 0.4; + box-shadow: var(--nutui-elevator-list-fixed-box-shadow, 0 0 10rpx #eee); + background-color: var(--nutui-elevator-list-fixed-bg-color, #ffffff); } -.nut-indicator-white .nut-indicator-dot, -.nut-indicator-white .nut-indicator-line { - position: relative; - box-sizing: content-box; - background: rgba(255, 255, 255, 0.4); - opacity: 1; +.nut-elevator-list-fixed-title { + font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-elevator-list-fixed-color, var(--nutui-color-primary, #ff0f23)); + font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600)); } -.nut-indicator-track.nut-indicator-white::after { - border: 1rpx solid rgba(0, 0, 0, 0.06); - background: rgba(255, 255, 255, 0.4); +.nut-elevator-code-current { + position: absolute; + right: var(--nutui-elevator-list-item-code-current-right, 60rpx); + top: var(--nutui-elevator-list-item-code-current-top, 50%); + transform: var(--nutui-elevator-bars-transform, translateY(-50%)); + display: flex; + align-items: center; + justify-content: center; + width: var(--nutui-elevator-list-item-code-current-width, 45rpx); + height: var(--nutui-elevator-list-item-code-current-height, 45rpx); + border-radius: var(--nutui-elevator-list-item-code-current-border-radius, 50%); + background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-text-disabled, #c2c4cc)); + box-shadow: 0 3rpx 3rpx 1rpx #f0f0f0; + color: var(--nutui-elevator-list-item-code-current-color, #ffffff); } -.nut-indicator-vertical .nut-indicator-dot { - margin: 0; - margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); +.nut-elevator-bars { + position: absolute; + right: var(--nutui-elevator-bars-right, 16rpx); + top: var(--nutui-elevator-bars-top, 50%); + transform: var(--nutui-elevator-bars-transform, translateY(-50%)); + z-index: var(--nutui-elevator-bars-z-index, 1); } -.nut-indicator-vertical .nut-indicator-dot-active, -.nut-indicator-vertical.nut-indicator-track .nut-indicator-line { - width: var(--nutui-indicator-dot-size, 3rpx); - height: var(--nutui-indicator-dot-active-size, 6rpx); +.nut-elevator-bars-inner { + display: flex; + flex-direction: column; } -[dir='rtl'] .nut-indicator-dot-0, -.nut-rtl .nut-indicator-dot-0 { - margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); - margin-left: 0; +.nut-elevator-bars-inner-item { + display: flex; + display: inline-flex; + align-items: center; + justify-content: center; + height: 16rpx; + width: 16rpx; + border-radius: 50%; + margin: 1rpx 0; + color: var(--nutui-elevator-bars-color, var(--nutui-color-text-help, #888b94)); + font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-size-xxs, 10rpx)); + cursor: pointer; } -.nut-imagepreview-index { - position: fixed; - z-index: 2002; - top: 50rpx; - text-align: center; - left: 0; - right: 0; - background: transparent; - color: #fff; +.nut-elevator-bars-inner-item-active { + font-weight: var(--nutui-font-weight-bold, 600); + color: var(--nutui-elevator-bars-active-color, #ffffff); + background: linear-gradient(to right, #ff475d, #ff0f23); + background: #ff0f23; } -.nut-imagepreview-index .arrow { - position: absolute; - left: 15rpx; - -ms-transform: rotate(180deg); - transform: rotate(180deg); +.nut-elevator-horizontal .nut-elevator-list-item-code { + width: var(--nutui-elevator-list-item-code-width, 34rpx); + justify-content: center; +} +.nut-elevator-vertical .nut-elevator-list-item { + flex-direction: column; +} +.nut-elevator-vertical .nut-elevator-list-item-code { + border-bottom: var(--nutui-elevator-list-item-code-border-bottom, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +} +.nut-elevator-vertical .nut-elevator-list-item-name, +.nut-elevator-vertical .nut-elevator-list-item-code { + padding: var(--nutui-elevator-list-item-padding, 0 36rpx 0 20rpx); +} +[dir='rtl'] .nut-elevator-list-fixed, +.nut-rtl .nut-elevator-list-fixed { + left: auto; + right: 0; } -.nut-imagepreview-close.top-right { - top: 50rpx; - right: 20rpx; +[dir='rtl'] .nut-elevator-code-current, +.nut-rtl .nut-elevator-code-current { + right: auto; + left: var(--nutui-elevator-list-item-code-current-right, 60rpx); } -.nut-imagepreview-close.top-left { - top: 50rpx; - left: 20rpx; +[dir='rtl'] .nut-elevator-bars, +.nut-rtl .nut-elevator-bars { + right: auto; + left: var(--nutui-elevator-bars-right, 16rpx); } -.nut-imagepreview-close.bottom { - bottom: 50rpx; - left: 0; - right: 0; - text-align: center; +.nut-drag { + position: fixed; + z-index: 9997 !important; + width: 0; + height: 0; + touch-action: none; + user-select: none; + font-size: 0; } -.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-video .h5-video, -.nut-imagepreview-swiper .nut-swiper-item .nut-video .h5-video { - -o-object-fit: contain; - object-fit: contain; +.nut-drag-inner { + display: flex; + display: inline-flex; + width: fit-content; + height: fit-content; + touch-action: none; } -[dir='rtl'] .nut-imagepreview-index .arrow, -.nut-rtl .nut-imagepreview-index .arrow { - left: auto; - right: 15rpx; - -ms-transform: rotate(-180deg); - transform: rotate(-180deg); +.nut-empty { + box-sizing: border-box; + width: 100%; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + padding: var(--nutui-empty-padding, 32rpx 40rpx); + background-color: var(--nutui-empty-background-color, var(--nutui-color-background-overlay, #ffffff)); } -[dir='rtl'] .nut-imagepreview-close.top-right, -.nut-rtl .nut-imagepreview-close.top-right { - right: auto; - left: 20rpx; +.nut-empty-base { + width: var(--nutui-empty-image-size, 160rpx); + height: var(--nutui-empty-image-size, 160rpx); } -[dir='rtl'] .nut-imagepreview-close.top-left, -.nut-rtl .nut-imagepreview-close.top-left { - left: auto; - right: 20rpx; +.nut-empty-base .h5-img, +.nut-empty-base image { + width: 100%; + height: 100%; } -.nut-hoverbutton-item-container { - width: var(--nutui-hoverbutton-item-size, 40rpx); - height: var(--nutui-hoverbutton-item-size, 40rpx); - border-radius: var(--nutui-hoverbutton-item-size, 40rpx); - border: 1rpx solid var(--nutui-hoverbutton-item-border-color, rgba(0, 0, 0, 0.12)); - background-color: var(--nutui-hoverbutton-item-background, var(--nutui-white-12)); +.nut-empty-small { + width: var(--nutui-empty-image-small-size, 120rpx); + height: var(--nutui-empty-image-small-size, 120rpx); } -.nut-hoverbutton-item-container-active { - background-color: var(--nutui-hoverbutton-item-background-active, rgba(247, 248, 252, 0.9)); +.nut-empty-small .h5-img, +.nut-empty-small image { + width: 100%; + height: 100%; } -.nut-hoverbutton-item-container-harmony { - margin-bottom: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8rpx)); +.nut-empty-title { + margin-top: var(--nutui-empty-title-margin-top, 0rpx); + font-weight: var(--nutui-font-weight-bold, 600); + margin-bottom: var(--nutui-empty-title-margin-bottom, 12rpx); + color: var(--nutui-color-title, #1a1a1a); + font-size: var(--nutui-font-size-l, 15rpx); + line-height: var(--nutui-empty-title-line-height, var(--nutui-font-size-l, 15rpx)); } -.nut-hoverbutton-item-container-icontext .nut-icon { - display: block; - width: 14rpx; - height: 14rpx; - font-size: 14rpx; +.nut-empty-description { + color: var(--nutui-color-text, #505259); + font-size: var(--nutui-font-size-s, 12rpx); + line-height: var(--nutui-empty-description-line-height, 1); } -.nut-hoverbutton-item-icon { - width: 20rpx; - height: 20rpx; - margin: 9rpx; - color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a)); - fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a)); +.nut-empty-actions-base { + display: flex; + flex-direction: row; + margin-top: 24rpx; } -.nut-hoverbutton-item-icon .nut-icon { - display: block; - width: 20rpx; - height: 20rpx; - font-size: 20rpx; +.nut-empty-actions-small { + display: flex; + flex-direction: row; + margin-top: 16rpx; } -.nut-hoverbutton-item-text-icon { - width: 14rpx; - height: 5rpx; +.nut-empty-action { + margin-right: 6rpx; + margin-left: 6rpx; } -.nut-hoverbutton-item-text { - font-size: 10rpx; - margin-top: 5rpx; - line-height: 9rpx; +.nut-divider { + display: flex; + align-items: center; + flex-direction: row; + font-size: var(--nutui-divider-text-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-divider-text-color, var(--nutui-color-text, #505259)); + margin: var(--nutui-divider-margin, 16rpx 0); + width: 100%; + border: 0 solid var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-hoverbutton { - display: -ms-flexbox; +.nut-divider-before, +.nut-divider-after { display: flex; - -ms-flex-direction: column; - flex-direction: column; - gap: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8rpx)); + border-style: solid; + border-color: var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + border-width: var(--nutui-divider-line-height, 1rpx) 0 0; + height: var(--nutui-divider-line-height, 1rpx); + flex: 1; } -.nut-hoverbutton-container { - position: fixed; - right: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, 8rpx)); - bottom: var(--nutui-hoverbutton-position-bottom, 60rpx); - z-index: 10; +.nut-divider-center-before, +.nut-divider-left-before, +.nut-divider-right-before { + margin-right: var(--nutui-divider-spacing, 8rpx); } -[dir='rtl'] .nut-hoverbutton-container, -.nut-hoverbutton-container-rtl { - right: auto; - left: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, 8rpx)); +.nut-divider-center-after, +.nut-divider-left-after, +.nut-divider-right-after { + margin-left: var(--nutui-divider-spacing, 8rpx); } -.nut-grid-item-text { - color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-grid-item-text-font-size, var(--nutui-font-size-s, 12rpx)); - word-break: break-all; - margin: var(--nutui-grid-item-text-margin, 8rpx) 0 0 0; +.nut-divider-left-before, +.nut-divider-right-after { + width: var(--nutui-divider-side-width, 10%); + flex: none; } -.nut-grid-item-text-reverse { - margin: 0 0 var(--nutui-grid-item-text-margin, 8rpx) 0; +.nut-divider-vertical { + display: flex; + display: inline-flex; + width: 0rpx; + height: var(--nutui-divider-vertical-height, 12rpx); + border-left: 1rpx solid var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + margin: var(--nutui-divider-vertical-margin, 0 8rpx); + vertical-align: middle; } -.nut-grid-item-text-horizontal { - margin: 0 0 0 var(--nutui-grid-item-text-margin, 8rpx); +.nut-divider-rtl-before { + margin-right: 0; + margin-left: var(--nutui-divider-spacing, 8rpx); } -.nut-grid-item-text-horizontal-reverse { - margin: 0 var(--nutui-grid-item-text-margin, 8rpx) 0 0; +.nut-divider-rtl-after { + margin-left: 0; + margin-right: var(--nutui-divider-spacing, 8rpx); } -.nut-grid-item-content { - display: -ms-flexbox; +.nut-datepickerview { display: flex; - box-sizing: border-box; - -ms-flex: 1; - flex: 1; - -ms-flex-direction: column; - flex-direction: column; width: 100%; - padding: var(--nutui-grid-item-content-padding, 16rpx 8rpx); - background: var(--nutui-grid-item-content-bg-color, var(--nutui-gray-1)); - border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); -} -.nut-grid-item-content-border { - border-right-width: var(--nutui-grid-border-width, 0rpx); - border-bottom-width: var(--nutui-grid-border-width, 0rpx); } -.nut-grid-item-content-surround { - border-top-width: var(--nutui-grid-border-width, 0rpx); - border-left-width: var(--nutui-grid-border-width, 0rpx); - border-radius: var(--nutui-grid-item-border-radius, var(--nutui-radius-l, 8rpx)); +.nut-dialog { + display: flex; + flex-direction: column; + align-items: center; + width: var(--nutui-dialog-width, 295rpx); + min-width: var(--nutui-dialog-min-width, 240rpx); + max-height: 67%; + min-height: var(--nutui-dialog-min-height, 124rpx); + padding: var(--nutui-dialog-padding, 24rpx); + box-sizing: border-box; } -.nut-grid-item-content-clickable::before { - position: absolute; +.nut-dialog-outer { + position: fixed; + max-height: 100%; + background-color: var(--nutui-dialog-background, var(--nutui-color-background-overlay, #ffffff)); + transition: transform 0.2s; + -webkit-overflow-scrolling: touch; top: 50%; left: 50%; - width: 100%; - height: 100%; - background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); - border: inherit; - border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); - border-radius: inherit; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); - opacity: 0; - content: ' '; -} -[dir='rtl'] .nut-grid-item-content-border, -.nut-rtl .nut-grid-item-content-border { - border-right-width: 0; - border-left-width: 1rpx; + border-radius: var(--nutui-dialog-border-radius, var(--nutui-radius-xl, 12rpx)); + animation-duration: 0.3s; } -[dir='rtl'] .nut-grid-item-content-surround, -.nut-rtl .nut-grid-item-content-surround { - border-left-width: 0; - border-right-width: 1rpx; +.nut-dialog-close { + position: absolute !important; + z-index: 1; + cursor: pointer; + width: var(--nutui-dialog-close-width, 16rpx); + height: var(--nutui-dialog-close-height, 16rpx); + display: flex; + justify-content: center; + align-items: center; + color: var(--nutui-dialog-close-color, #ffffff); } -[dir='rtl'] .nut-grid-item-content-horizontal .nut-grid-item-text, -.nut-rtl .nut-grid-item-content-horizontal .nut-grid-item-text { - margin: 0 var(--nutui-grid-item-text-margin, 8rpx) 0 0; +.nut-dialog-close .nut-icon { + font-size: var(--nutui-dialog-close-width, 16rpx); + width: var(--nutui-dialog-close-width, 16rpx); + height: var(--nutui-dialog-close-height, 16rpx); } -[dir='rtl'] .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text, -.nut-rtl .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text { - margin: 0 0 0 var(--nutui-grid-item-text-margin, 8rpx); +.nut-dialog-close-top-right { + top: var(--nutui-dialog-close-top, 16rpx); + right: var(--nutui-dialog-close-right, 16rpx); } -[dir='rtl'] .nut-grid-item-content-clickable::before, -.nut-rtl .nut-grid-item-content-clickable::before { - left: auto; - right: 50%; - -ms-transform: translate(50%, -50%); - transform: translate(50%, -50%); +.nut-dialog-close-top-left { + top: var(--nutui-dialog-close-top, 16rpx); + left: var(--nutui-dialog-close-left, 16rpx); } -.nut-grid-border { - border-top-width: var(--nutui-grid-border-width, 0rpx); - border-left-width: var(--nutui-grid-border-width, 0rpx); +.nut-dialog-close-bottom { + bottom: -64rpx; + width: var(--nutui-dialog-bottom-close-icon-size, 24rpx); + height: var(--nutui-dialog-bottom-close-icon-size, 24rpx); + left: 50%; + transform: translate(-50%); } -[dir='rtl'] .nut-grid-border, -.nut-rtl .nut-grid-border { - border-left-width: 0; - border-right-width: 1rpx; +.nut-dialog-close-bottom .nut-icon { + color: var(--nutui-color-text-disabled, #c2c4cc); + background-color: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)); + border-radius: 50%; + width: var(--nutui-dialog-bottom-close-icon-size, 24rpx); + height: var(--nutui-dialog-bottom-close-icon-size, 24rpx); } -.nut-form-item { - display: -ms-flexbox; - display: flex; - line-height: inherit; +.nut-dialog-header { + display: block; + text-align: center; + font-size: var(--nutui-dialog-header-font-size, var(--nutui-font-size-xl, 18rpx)); + font-weight: var(--nutui-dialog-header-font-weight, var(--nutui-font-weight-bold, 600)); + color: var(--nutui-color-title, #1a1a1a); + margin-bottom: var(--nutui-dialog-title-margin-bottom, 8rpx); + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -.nut-form-item-label { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, 12rpx)); - font-weight: 400; - width: var(--nutui-form-item-label-width, 90rpx); - margin-right: var(--nutui-form-item-label-margin-right, 10rpx); - -ms-flex: 0 0 auto; - flex: 0 0 auto; +.nut-dialog-content { + width: 100%; + margin: var(--nutui-dialog-content-margin, 0 0 20rpx 0); + max-height: var(--nutui-dialog-content-max-height, 268rpx); + line-height: var(--nutui-dialog-content-line-height, 20rpx); + font-size: var(--nutui-font-size-base, 14rpx); + color: var(--nutui-color-title, #1a1a1a); word-wrap: break-word; - text-align: var(--nutui-form-item-label-text-align, left); - line-height: inherit; + word-break: break-all; + white-space: pre-wrap; + text-align: var(--nutui-dialog-content-text-align, left); + overflow-y: auto; } -.nut-form-item-label-left-required { - color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23)); - margin-right: var(--nutui-form-item-required-margin-right, 4rpx); - position: absolute; - left: -10rpx; +.nut-dialog-footer { + display: flex; + align-items: center; + width: 100%; + justify-content: space-around; } -.nut-form-item-label-right-required { - color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23)); - margin-left: var(--nutui-form-item-required-margin-right, 4rpx); - position: absolute; - right: -10rpx; +.nut-dialog-footer.vertical { + flex-direction: column; } -.nut-form-item .nut-form-item-labeltxt { - position: relative; - font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, 12rpx)); +.nut-dialog-footer.vertical .nut-button { + min-width: 100%; } -.nut-form-item-body-slots .nut-input-text { - font-size: var(--nutui-form-item-body-font-size, var(--nutui-font-size-base, 14rpx)); - text-align: var(--nutui-form-item-body-input-text-align, left); - color: var(--nutui-color-title, #1a1a1a); - width: 100%; - outline: 0 none; - border: 0; - text-decoration: none; +.nut-dialog-footer.vertical .nut-dialog-footer-cancel { + margin: 0; + color: var(--nutui-color-text, #505259); + font-size: var(--nutui-font-size-base, 14rpx); + display: flex; + justify-content: center; + margin-top: var(--nutui-dialog-vertical-footer-ok-margin-top, 16rpx); background: transparent; } -.nut-form-item-body-slots .nut-range-container { - min-height: 24rpx; +.nut-dialog-footer .nut-button { + min-width: var(--nutui-dialog-footer-button-min-width, 117rpx); + border-radius: var(--nutui-dialog-footer-button-border, 6rpx); + padding: var(--nutui-button-large-padding, 0 12rpx); } -.nut-form-item-body-tips { - text-align: var(--nutui-form-item-tip-text-align, left); - font-size: var(--nutui-form-item-tip-font-size, var(--nutui-font-size-xs, 11rpx)); - color: var(--nutui-form-item-error-message-color, var(--nutui-color-primary, #ff0f23)); +.nut-dialog-footer-cancel.nut-dialog-footer-cancel { + margin-right: var(--nutui-dialog-footer-cancel-margin-right, 12rpx); + background: var(--nutui-dialog-footer-cancel-bg, var(--nutui-color-background-sunken, #f7f8fc)); + color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a)); + border-color: var(--nutui-button-default-border-color, transparent); } -[dir='rtl'] .nut-form-item-label, -.nut-rtl .nut-form-item-label { - text-align: right; - margin-right: 0; - margin-left: var(--nutui-form-item-label-margin-right, 10rpx); +.nut-dialog-footer-cancel.nut-dialog-footer-cancel .nut-button-children { + color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a)); } -[dir='rtl'] .nut-form-item-label .required::before, -.nut-rtl .nut-form-item-label .required::before { - margin-right: 0; - margin-left: var(--nutui-form-item-required-margin-right, 4rpx); +.nut-dialog-footer-ok-container { + position: relative; + display: flex; + align-items: center; + width: 100%; + justify-content: space-around; } -[dir='rtl'] .nut-form-item-body-slots .nut-icon-ArrowRight, -[dir='rtl'] .nut-form-item-body-slots .nut-icon-ArrowLeft, -.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowRight, -.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowLeft { - transform: rotateY(180deg); +.nut-dialog-footer-ok-container .nut-dialog-footer-ok-badge { + position: absolute; + right: 0; + top: var(--nutui-dialog-footer-badge-top, -8rpx); + display: flex; + align-items: center; + height: var(--nutui-dialog-footer-badge-height, 14rpx); + padding: var(--nutui-dialog-footer-badge-padding, 0 3rpx); + background: var(--nutui-dialog-footer-badge-bg-ok, var(--nutui-color-danger-light, #ffebef)); + border-radius: var(--nutui-dialog-footer-badge-border-radius, 2rpx 2rpx 0rpx 2rpx); + font-size: var(--nutui-dialog-footer-badge-fontsize, 10rpx); + color: var(--nutui-dialog-footer-badge-color-ok, var(--nutui-color-primary, #ff0f23)); } -.nut-form-item-label-right { - -ms-flex-pack: end; - justify-content: flex-end; - padding-right: 24rpx; - white-space: nowrap; +.nut-dialog-footer-ok { + max-width: var(--nutui-dialog-footer-ok-max-width, 128rpx); + font-weight: var(--nutui-font-weight-medium, 500); } -.nut-form-item-label-left { - position: relative; - padding-left: 12rpx; - white-space: nowrap; +.nut-dialog-footer-ok .nut-button-children { + font-weight: var(--nutui-font-weight-medium, 500); } -.nut-form-item-label-top { - display: block; - padding-bottom: 4rpx; - padding-right: 24rpx; +.nut-dialog-footer-block.nut-button { + min-width: 100%; } -[dir='rtl'] .form-layout-right .nut-form-item-label, -.nut-rtl .form-layout-right .nut-form-item-label { - text-align: left; - padding-right: 0; - padding-left: 24rpx; +.nut-dialog-footer-cancel-container { + position: relative; + display: flex; + align-items: center; + width: 100%; + justify-content: space-around; } -[dir='rtl'] .form-layout-left .nut-form-item-label, -.nut-rtl .form-layout-left .nut-form-item-label { - text-align: right; - padding-left: 0; - padding-right: 12rpx; +.nut-dialog-footer-cancel-container .nut-dialog-footer-cancel-badge { + position: absolute; + right: var(--nutui-dialog-footer-cancel-margin-right, 12rpx); + top: var(--nutui-dialog-footer-badge-top, -8rpx); + display: flex; + align-items: center; + height: var(--nutui-dialog-footer-badge-height, 14rpx); + padding: var(--nutui-dialog-footer-badge-padding, 0 3rpx); + background: var(--nutui-dialog-footer-badge-bg-cancel, var(--nutui-color-danger-light, #ffebef)); + border-radius: var(--nutui-dialog-footer-badge-border-radius, 2rpx 2rpx 0rpx 2rpx); + font-size: var(--nutui-dialog-footer-badge-fontsize, 10rpx); + color: var(--nutui-dialog-footer-badge-color-cancel, var(--nutui-color-primary, #ff0f23)); } -[dir='rtl'] .form-layout-top .nut-form-item-label, -.nut-rtl .form-layout-top .nut-form-item-label { - padding-right: 0; - padding-left: 24rpx; +[dir='rtl'] .nut-dialog-outer, +.nut-rtl .nut-dialog-outer { + left: auto; + right: 50%; + transform: translate(50%, -50%); } -.nut-fixednav { - position: fixed; - z-index: var(--nutui-fixednav-index, 900); - display: inline-block; - height: 50rpx; +[dir='rtl'] .nut-dialog-close-top-right, +.nut-rtl .nut-dialog-close-top-right { + right: auto; + left: var(--nutui-dialog-close-right, 16rpx); } -.nut-fixednav.active .nut-fixednav-btn .nut-icon { - -ms-transform: rotate(180deg); - transform: rotate(180deg); +[dir='rtl'] .nut-dialog-close-top-left, +.nut-rtl .nut-dialog-close-top-left { + left: auto; + right: var(--nutui-dialog-close-left, 16rpx); } -.nut-fixednav.active .nut-fixednav-list { - -ms-transform: translate(0) !important; - transform: translate(0) !important; +[dir='rtl'] .nut-dialog-footer-cancel.nut-dialog-footer-cancel, +.nut-rtl .nut-dialog-footer-cancel.nut-dialog-footer-cancel { + margin-right: 0; + margin-left: var(--nutui-dialog-footer-cancel-margin-right, 12rpx); } -.nut-fixednav.active.nut-fixednav-left .nut-icon { - -ms-transform: rotate(0); - transform: rotate(0); +[dir='rtl'] .nut-dialog-content, +.nut-rtl .nut-dialog-content { + text-align: var(--nutui-dialog-content-text-align, right); } -.nut-fixednav-btn { - box-sizing: border-box; - position: absolute; - z-index: var(--nutui-fixednav-index, 900); - width: 70rpx; - height: 100%; - background: var(--nutui-fixednav-button-background, var(--nutui-color-primary, #ff0f23)); - box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); - display: -ms-flexbox; +.nut-countup-list { display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; + display: inline-flex; + height: var(--nutui-countup-height, 32rpx); + overflow: hidden; + direction: ltr; } -.nut-fixednav-btn .text { - width: 24rpx; - line-height: 13rpx; - font-size: var(--nutui-font-size-s, 12rpx); - color: #fff; - -ms-flex-negative: 0; - flex-shrink: 0; +.nut-countup-listitem { + height: var(--nutui-countup-height, 32rpx); + overflow: hidden; + user-select: none; } -.nut-fixednav-list { - position: absolute; - transition: all 0.5s; - z-index: var(--nutui-fixednav-index, 900); - -ms-flex-negative: 0; - flex-shrink: 0; - height: 100%; - background: var(--nutui-fixednav-background-color, #ffffff); - display: -ms-flexbox; +.nut-countup-listitem-number { + margin: 0 var(--nutui-countup-lr-margin, 0); + border-radius: var(--nutui-countup-border-radius, 4rpx); + color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a)); + background-color: var(--nutui-countup-bg-color, inherit); +} +.nut-countup-separator { display: flex; - -ms-flex-pack: justify; - justify-content: space-between; - box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.2); + height: 80%; + align-items: flex-end; + color: var(--nutui-countup-separator-color, var(--nutui-color-title, #1a1a1a)); + font-size: var(--nutui-countup-base-size, 18rpx); + font-weight: var(--nutui-font-weight-bold, 600); } -.nut-fixednav-list-item { - position: relative; - -ms-flex: 1; - flex: 1; - height: 100%; - display: -ms-flexbox; +.nut-countup-number { display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; align-items: center; - min-width: 50rpx; - -ms-flex-negative: 0; - flex-shrink: 0; - color: var(--nutui-fixednav-color, #1a1a1a); + width: var(--nutui-countup-width, auto); + transition: transform 1s ease-in-out; + transform: translate(0); } -.nut-fixednav-list-item .nut-fixednav-list-text { - font-size: 10rpx; +.nut-countup-number-text { + height: var(--nutui-countup-height, 32rpx); + line-height: var(--nutui-countup-height, 32rpx); + color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a)); + font-size: var(--nutui-countup-base-size, 18rpx); + font-weight: var(--nutui-font-weight-bold, 600); } -.nut-fixednav-list-image { - width: 20rpx; - height: 20rpx; - margin-bottom: 2rpx; +.nut-countdown { + display: var(--nutui-countdown-display, flex); + flex-direction: row; + align-items: center; + color: var(--nutui-countdown-color, var(--nutui-color-primary, #ff0f23)); + font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11rpx)); } -.nut-fixednav-right .nut-fixednav-btn { - right: 0; - border-radius: 45rpx 0 0 45rpx; +.nut-countdown-number-primary, +.nut-countdown-number, +.nut-countdown-number-text, +.nut-countdown-unit { + display: flex; + align-items: center; + justify-content: center; + height: var(--nutui-countdown-height, 16rpx); + box-sizing: border-box; + font-weight: var(--nutui-countdown-font-weight, var(--nutui-font-weight, 400)); + font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11rpx)); + line-height: calc(var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11rpx)) + 2rpx); + font-family: JDZH-Regular; } -.nut-fixednav-right .nut-fixednav-btn .nut-icon { - margin-right: 5rpx; - -ms-transform: rotate(0); - transform: rotate(0); +.nut-countdown-number, +.nut-countdown-number-primary { + position: relative; + min-width: var(--nutui-countdown-width, 16rpx); + padding: var(--nutui-countdown-number-padding, 0 0); + border-radius: var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2rpx)); + margin: var(--nutui-countdown-number-margin, 0 1rpx); + text-align: center; } -.nut-fixednav-right .nut-fixednav-list { - right: 0; - -ms-transform: translate(100%); - transform: translate(100%); - border-radius: 25rpx 0 0 25rpx; - padding-left: 20rpx; - padding-right: 80rpx; +.nut-countdown-number::after, +.nut-countdown-number-primary::after { + content: ''; + position: absolute; + top: -50%; + right: -50%; + bottom: -50%; + left: -50%; + transform: scale(0.5); + border-radius: calc(var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2rpx)) * 2); } -.nut-fixednav-left .nut-fixednav-btn { - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; - left: 0; - border-radius: 0 45rpx 45rpx 0; +.nut-countdown-number { + background-color: var(--nutui-countdown-number-background-color, var(--nutui-color-background-overlay, #ffffff)); + color: var(--nutui-countdown-number-color, var(--nutui-color-primary, #ff0f23)); } -.nut-fixednav-left .nut-fixednav-btn .nut-icon { - margin-left: 5rpx; - -ms-transform: rotate(180deg); - transform: rotate(180deg); +.nut-countdown-number::after { + border: 1rpx solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-specialdisabled, #ffadbe)); } -.nut-fixednav-left .nut-fixednav-list { - -ms-transform: translate(-100%); - transform: translate(-100%); - left: 0; - border-radius: 0 25rpx 25rpx 0; - padding-left: 80rpx; - padding-right: 20rpx; +.nut-countdown-number-primary { + background-color: var(--nutui-countdown-number-primary-background-color, var(--nutui-color-primary, #ff0f23)); + color: var(--nutui-countdown-number-primary-color, #ffffff); } -[dir='rtl'] .nut-fixednav.active .nut-icon, -.nut-rtl .nut-fixednav.active .nut-icon { - -ms-transform: rotate(0); - transform: rotate(0); +.nut-countdown-number-primary::after { + border: 1rpx solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary, #ff0f23)); } -[dir='rtl'] .nut-fixednav.active.nut-fixednav-left .nut-icon, -.nut-rtl .nut-fixednav.active.nut-fixednav-left .nut-icon { - -ms-transform: rotate(-180deg); - transform: rotate(-180deg); +.nut-countdown-number-text { + border: 0; + background-color: transparent; + color: var(--nutui-countdown-number-color, var(--nutui-color-primary, #ff0f23)); } -[dir='rtl'] .nut-fixednav-btn, -.nut-rtl .nut-fixednav-btn { - right: auto; - left: 0; - border-radius: 0 45rpx 45rpx 0; +.nut-countdown-unit { + color: var(--nutui-countdown-color, var(--nutui-color-primary, #ff0f23)); } -[dir='rtl'] .nut-fixednav-btn .nut-icon, -.nut-rtl .nut-fixednav-btn .nut-icon { - margin-right: 0; - margin-left: 5rpx; - -ms-transform: rotate(180deg); - transform: rotate(180deg); +.nut-col { + box-sizing: border-box; + word-break: break-all; + margin-bottom: var(--nutui-col-default-margin-bottom, 15rpx); } -[dir='rtl'] .nut-fixednav-list, -.nut-rtl .nut-fixednav-list { - right: auto; - left: 0; - -ms-transform: translate(-100%); - transform: translate(-100%); - border-radius: 0 25rpx 25rpx 0; - box-shadow: -2rpx 2rpx 8rpx rgba(0, 0, 0, 0.2); - padding-right: 20rpx; - padding-left: 80rpx; +[dir='rtl'] .nut-col, +.nut-rtl .nut-col { + float: right; } -[dir='rtl'] .nut-fixednav-left .nut-fixednav-btn, -.nut-rtl .nut-fixednav-left .nut-fixednav-btn { - left: auto; - right: 0; - border-radius: 45rpx 0 0 45rpx; +[dir='rtl'] .nut-col.nut-col-gutter:last-child, +.nut-rtl .nut-col.nut-col-gutter:last-child { + padding-right: 0 !important; + padding-left: 0 !important; } -[dir='rtl'] .nut-fixednav-left .nut-fixednav-btn .nut-icon, -.nut-rtl .nut-fixednav-left .nut-fixednav-btn .nut-icon { - -ms-transform: rotate(0); - transform: rotate(0); - margin-right: 5rpx; +[dir='rtl'] .nut-col.nut-col-gutter:first-child, +.nut-rtl .nut-col.nut-col-gutter:first-child { + padding-left: 0 !important; + padding-right: 0 !important; +} +.nut-col-offset-1 { + margin-left: 4.166666666%; +} +[dir='rtl'] .nut-col-offset-1, +.nut-rtl .nut-col-offset-1 { margin-left: 0; + margin-right: 4.166666666%; } -[dir='rtl'] .nut-fixednav-left .nut-fixednav-list, -.nut-rtl .nut-fixednav-left .nut-fixednav-list { - -ms-transform: translate(100%); - transform: translate(100%); - right: auto; - left: auto; - border-radius: 25rpx 0 0 25rpx; - padding-right: 80rpx; - padding-left: 20rpx; +.nut-col-1 { + width: 4.166666666%; } -.nut-ellipsis-copy { - position: absolute; - top: -999999rpx; +.nut-col-offset-2 { + margin-left: 8.333333332%; +} +[dir='rtl'] .nut-col-offset-2, +.nut-rtl .nut-col-offset-2 { + margin-left: 0; + margin-right: 8.333333332%; +} +.nut-col-2 { + width: 8.333333332%; } -.nut-ellipsis-width { - width: -moz-fit-content; - width: fit-content; +.nut-col-offset-3 { + margin-left: 12.499999998%; } -.nut-elevator-list-item-code { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-elevator-list-item-code-height, 34rpx); - font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-elevator-list-item-code-color, var(--nutui-color-text-help, #888b94)); - font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600)); +[dir='rtl'] .nut-col-offset-3, +.nut-rtl .nut-col-offset-3 { + margin-left: 0; + margin-right: 12.499999998%; } -.nut-elevator-list-item-name { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-elevator-list-item-name-height, 34rpx); - font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-elevator-list-color, var(--nutui-color-title, #1a1a1a)); +.nut-col-3 { + width: 12.499999998%; } -.nut-elevator-list-fixed { - position: absolute; - top: 0; - left: 0; - z-index: 1; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - width: 100%; - padding: var(--nutui-elevator-list-item-padding, 0 36rpx 0 20rpx); - height: var(--nutui-elevator-list-item-code-height, 34rpx); - box-sizing: border-box; - box-shadow: var(--nutui-elevator-list-fixed-box-shadow, 0 0 10rpx #eee); - background-color: var(--nutui-elevator-list-fixed-bg-color, #ffffff); +.nut-col-offset-4 { + margin-left: 16.666666664%; } -.nut-elevator-list-fixed-title { - font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-elevator-list-fixed-color, var(--nutui-color-primary, #ff0f23)); - font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600)); +[dir='rtl'] .nut-col-offset-4, +.nut-rtl .nut-col-offset-4 { + margin-left: 0; + margin-right: 16.666666664%; } -.nut-elevator-code-current { - position: absolute; - right: var(--nutui-elevator-list-item-code-current-right, 60rpx); - top: var(--nutui-elevator-list-item-code-current-top, 50%); - -ms-transform: var(--nutui-elevator-bars-transform, translateY(-50%)); - transform: var(--nutui-elevator-bars-transform, translateY(-50%)); - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - width: var(--nutui-elevator-list-item-code-current-width, 45rpx); - height: var(--nutui-elevator-list-item-code-current-height, 45rpx); - border-radius: var(--nutui-elevator-list-item-code-current-border-radius, 50%); - background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-text-disabled, #c2c4cc)); - box-shadow: 0 3rpx 3rpx 1rpx #f0f0f0; - color: var(--nutui-elevator-list-item-code-current-color, #ffffff); +.nut-col-4 { + width: 16.666666664%; } -.nut-elevator-bars { - position: absolute; - right: var(--nutui-elevator-bars-right, 16rpx); - top: var(--nutui-elevator-bars-top, 50%); - -ms-transform: var(--nutui-elevator-bars-transform, translateY(-50%)); - transform: var(--nutui-elevator-bars-transform, translateY(-50%)); - z-index: var(--nutui-elevator-bars-z-index, 1); +.nut-col-offset-5 { + margin-left: 20.83333333%; } -.nut-elevator-bars-inner-item { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - height: 16rpx; - width: 16rpx; - border-radius: 50%; - margin: 1rpx 0; - color: var(--nutui-elevator-bars-color, var(--nutui-color-text-help, #888b94)); - font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-size-xxs, 10rpx)); - cursor: pointer; +[dir='rtl'] .nut-col-offset-5, +.nut-rtl .nut-col-offset-5 { + margin-left: 0; + margin-right: 20.83333333%; } -.nut-elevator-horizontal .nut-elevator-list-item-code { - width: var(--nutui-elevator-list-item-code-width, 34rpx); - -ms-flex-pack: center; - justify-content: center; +.nut-col-5 { + width: 20.83333333%; } -.nut-elevator-vertical .nut-elevator-list-item-code { - border-bottom: var(--nutui-elevator-list-item-code-border-bottom, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +.nut-col-offset-6 { + margin-left: 24.999999996%; } -.nut-elevator-vertical .nut-elevator-list-item-name, -.nut-elevator-vertical .nut-elevator-list-item-code { - padding: var(--nutui-elevator-list-item-padding, 0 36rpx 0 20rpx); +[dir='rtl'] .nut-col-offset-6, +.nut-rtl .nut-col-offset-6 { + margin-left: 0; + margin-right: 24.999999996%; } -[dir='rtl'] .nut-elevator-code-current, -.nut-rtl .nut-elevator-code-current { - right: auto; - left: var(--nutui-elevator-list-item-code-current-right, 60rpx); +.nut-col-6 { + width: 24.999999996%; } -[dir='rtl'] .nut-elevator-bars, -.nut-rtl .nut-elevator-bars { - right: auto; - left: var(--nutui-elevator-bars-right, 16rpx); +.nut-col-offset-7 { + margin-left: 29.166666662%; } -.nut-drag { - position: fixed; - z-index: 9997 !important; - width: 0; - height: 0; - -ms-touch-action: none; - touch-action: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - font-size: 0; +[dir='rtl'] .nut-col-offset-7, +.nut-rtl .nut-col-offset-7 { + margin-left: 0; + margin-right: 29.166666662%; } -.nut-drag-inner { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - width: -moz-fit-content; - width: fit-content; - height: -moz-fit-content; - height: fit-content; - -ms-touch-action: none; - touch-action: none; +.nut-col-7 { + width: 29.166666662%; } -.nut-empty { - box-sizing: border-box; - width: 100%; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: center; - justify-content: center; - padding: var(--nutui-empty-padding, 32rpx 40rpx); - background-color: var(--nutui-empty-background-color, var(--nutui-color-background-overlay, #ffffff)); +.nut-col-offset-8 { + margin-left: 33.333333328%; } -.nut-empty-base { - width: var(--nutui-empty-image-size, 160rpx); - height: var(--nutui-empty-image-size, 160rpx); +[dir='rtl'] .nut-col-offset-8, +.nut-rtl .nut-col-offset-8 { + margin-left: 0; + margin-right: 33.333333328%; } -.nut-empty-base .h5-img, -.nut-empty-base image { - width: 100%; - height: 100%; +.nut-col-8 { + width: 33.333333328%; } -.nut-empty-small { - width: var(--nutui-empty-image-small-size, 120rpx); - height: var(--nutui-empty-image-small-size, 120rpx); +.nut-col-offset-9 { + margin-left: 37.499999994%; } -.nut-empty-small .h5-img, -.nut-empty-small image { - width: 100%; - height: 100%; +[dir='rtl'] .nut-col-offset-9, +.nut-rtl .nut-col-offset-9 { + margin-left: 0; + margin-right: 37.499999994%; } -.nut-empty-title { - margin-top: var(--nutui-empty-title-margin-top, 0rpx); - font-weight: var(--nutui-font-weight-bold, 600); - margin-bottom: var(--nutui-empty-title-margin-bottom, 12rpx); - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-font-size-l, 15rpx); - line-height: var(--nutui-empty-title-line-height, var(--nutui-font-size-l, 15rpx)); +.nut-col-9 { + width: 37.499999994%; } -.nut-empty-description { - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-font-size-s, 12rpx); - line-height: var(--nutui-empty-description-line-height, 1); +.nut-col-offset-10 { + margin-left: 41.66666666%; } -.nut-empty-actions-base { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - margin-top: 24rpx; +[dir='rtl'] .nut-col-offset-10, +.nut-rtl .nut-col-offset-10 { + margin-left: 0; + margin-right: 41.66666666%; } -.nut-empty-actions-small { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - margin-top: 16rpx; +.nut-col-10 { + width: 41.66666666%; } -.nut-empty-action { - margin-right: 6rpx; - margin-left: 6rpx; +.nut-col-offset-11 { + margin-left: 45.833333326%; } -.nut-divider { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-direction: row; - flex-direction: row; - font-size: var(--nutui-divider-text-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-divider-text-color, var(--nutui-color-text, #505259)); - margin: var(--nutui-divider-margin, 16rpx 0); - width: 100%; - border: 0 solid var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +[dir='rtl'] .nut-col-offset-11, +.nut-rtl .nut-col-offset-11 { + margin-left: 0; + margin-right: 45.833333326%; +} +.nut-col-11 { + width: 45.833333326%; } -.nut-divider-before, -.nut-divider-after { - display: -ms-flexbox; - display: flex; - border-style: solid; - border-color: var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - border-width: var(--nutui-divider-line-height, 1rpx) 0 0; - height: var(--nutui-divider-line-height, 1rpx); - -ms-flex: 1; - flex: 1; +.nut-col-offset-12 { + margin-left: 49.999999992%; } -.nut-divider-center-before, -.nut-divider-left-before, -.nut-divider-right-before { - margin-right: var(--nutui-divider-spacing, 8rpx); +[dir='rtl'] .nut-col-offset-12, +.nut-rtl .nut-col-offset-12 { + margin-left: 0; + margin-right: 49.999999992%; } -.nut-divider-center-after, -.nut-divider-left-after, -.nut-divider-right-after { - margin-left: var(--nutui-divider-spacing, 8rpx); +.nut-col-12 { + width: 49.999999992%; } -.nut-divider-vertical { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - width: 0rpx; - height: var(--nutui-divider-vertical-height, 12rpx); - border-left: 1rpx solid var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - margin: var(--nutui-divider-vertical-margin, 0 8rpx); - vertical-align: middle; +.nut-col-offset-13 { + margin-left: 54.166666658%; } -.nut-divider-rtl-before { - margin-right: 0; - margin-left: var(--nutui-divider-spacing, 8rpx); +[dir='rtl'] .nut-col-offset-13, +.nut-rtl .nut-col-offset-13 { + margin-left: 0; + margin-right: 54.166666658%; } -.nut-divider-rtl-after { +.nut-col-13 { + width: 54.166666658%; +} +.nut-col-offset-14 { + margin-left: 58.333333324%; +} +[dir='rtl'] .nut-col-offset-14, +.nut-rtl .nut-col-offset-14 { margin-left: 0; - margin-right: var(--nutui-divider-spacing, 8rpx); + margin-right: 58.333333324%; } -.nut-dialog { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-align: center; - align-items: center; - width: var(--nutui-dialog-width, 295rpx); - min-width: var(--nutui-dialog-min-width, 240rpx); - max-height: 67%; - min-height: var(--nutui-dialog-min-height, 124rpx); - padding: var(--nutui-dialog-padding, 24rpx); - box-sizing: border-box; +.nut-col-14 { + width: 58.333333324%; } -.nut-dialog-outer { - position: fixed; - max-height: 100%; - background-color: var(--nutui-dialog-background, var(--nutui-color-background-overlay, #ffffff)); - transition: transform 0.2s; - -webkit-overflow-scrolling: touch; - top: 50%; - left: 50%; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - border-radius: var(--nutui-dialog-border-radius, var(--nutui-radius-xl, 12rpx)); - animation-duration: 0.3s; +.nut-col-offset-15 { + margin-left: 62.49999999%; } -.nut-dialog-close { - position: absolute !important; - z-index: 1; - cursor: pointer; - width: var(--nutui-dialog-close-width, 16rpx); - height: var(--nutui-dialog-close-height, 16rpx); - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - color: var(--nutui-dialog-close-color, #ffffff); +[dir='rtl'] .nut-col-offset-15, +.nut-rtl .nut-col-offset-15 { + margin-left: 0; + margin-right: 62.49999999%; } -.nut-dialog-close .nut-icon { - font-size: var(--nutui-dialog-close-width, 16rpx); - width: var(--nutui-dialog-close-width, 16rpx); - height: var(--nutui-dialog-close-height, 16rpx); +.nut-col-15 { + width: 62.49999999%; } -.nut-dialog-close-top-right { - top: var(--nutui-dialog-close-top, 16rpx); - right: var(--nutui-dialog-close-right, 16rpx); +.nut-col-offset-16 { + margin-left: 66.666666656%; } -.nut-dialog-close-top-left { - top: var(--nutui-dialog-close-top, 16rpx); - left: var(--nutui-dialog-close-left, 16rpx); +[dir='rtl'] .nut-col-offset-16, +.nut-rtl .nut-col-offset-16 { + margin-left: 0; + margin-right: 66.666666656%; } -.nut-dialog-close-bottom { - bottom: -64rpx; - width: var(--nutui-dialog-bottom-close-icon-size, 24rpx); - height: var(--nutui-dialog-bottom-close-icon-size, 24rpx); - left: 50%; - -ms-transform: translate(-50%); - transform: translate(-50%); +.nut-col-16 { + width: 66.666666656%; } -.nut-dialog-close-bottom .nut-icon { - color: var(--nutui-color-text-disabled, #c2c4cc); - background-color: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)); - border-radius: 50%; - width: var(--nutui-dialog-bottom-close-icon-size, 24rpx); - height: var(--nutui-dialog-bottom-close-icon-size, 24rpx); +.nut-col-offset-17 { + margin-left: 70.833333322%; } -.nut-dialog-header { - display: block; - text-align: center; - font-size: var(--nutui-dialog-header-font-size, var(--nutui-font-size-xl, 18rpx)); - font-weight: var(--nutui-dialog-header-font-weight, var(--nutui-font-weight-bold, 600)); - color: var(--nutui-color-title, #1a1a1a); - margin-bottom: var(--nutui-dialog-title-margin-bottom, 8rpx); - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +[dir='rtl'] .nut-col-offset-17, +.nut-rtl .nut-col-offset-17 { + margin-left: 0; + margin-right: 70.833333322%; } -.nut-dialog-content { - width: 100%; - margin: var(--nutui-dialog-content-margin, 0 0 20rpx 0); - max-height: var(--nutui-dialog-content-max-height, 268rpx); - line-height: var(--nutui-dialog-content-line-height, 20rpx); - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-color-title, #1a1a1a); - word-wrap: break-word; - word-break: break-all; - white-space: pre-wrap; - text-align: var(--nutui-dialog-content-text-align, left); - overflow-y: auto; +.nut-col-17 { + width: 70.833333322%; } -.nut-dialog-footer.vertical .nut-dialog-footer-cancel { - margin: 0; - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-font-size-base, 14rpx); - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - margin-top: var(--nutui-dialog-vertical-footer-ok-margin-top, 16rpx); - background: transparent; +.nut-col-offset-18 { + margin-left: 74.999999988%; } -.nut-dialog-footer .nut-button { - min-width: var(--nutui-dialog-footer-button-min-width, 117rpx); - border-radius: var(--nutui-dialog-footer-button-border, 6rpx); - padding: var(--nutui-button-large-padding, 0 12rpx); +[dir='rtl'] .nut-col-offset-18, +.nut-rtl .nut-col-offset-18 { + margin-left: 0; + margin-right: 74.999999988%; } -.nut-dialog-footer-cancel.nut-dialog-footer-cancel { - margin-right: var(--nutui-dialog-footer-cancel-margin-right, 12rpx); - background: var(--nutui-dialog-footer-cancel-bg, var(--nutui-color-background-sunken, #f7f8fc)); - color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a)); - border-color: var(--nutui-button-default-border-color, transparent); +.nut-col-18 { + width: 74.999999988%; } -.nut-dialog-footer-ok-container .nut-dialog-footer-ok-badge { - position: absolute; - right: 0; - top: var(--nutui-dialog-footer-badge-top, -8rpx); - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-dialog-footer-badge-height, 14rpx); - padding: var(--nutui-dialog-footer-badge-padding, 0 3rpx); - background: var(--nutui-dialog-footer-badge-bg-ok, var(--nutui-color-danger-light, #ffebef)); - border-radius: var(--nutui-dialog-footer-badge-border-radius, 2rpx 2rpx 0rpx 2rpx); - font-size: var(--nutui-dialog-footer-badge-fontsize, 10rpx); - color: var(--nutui-dialog-footer-badge-color-ok, var(--nutui-color-primary, #ff0f23)); +.nut-col-offset-19 { + margin-left: 79.166666654%; } -.nut-dialog-footer-ok { - max-width: var(--nutui-dialog-footer-ok-max-width, 128rpx); - font-weight: var(--nutui-font-weight-medium, 500); +[dir='rtl'] .nut-col-offset-19, +.nut-rtl .nut-col-offset-19 { + margin-left: 0; + margin-right: 79.166666654%; } -.nut-dialog-footer-cancel-container .nut-dialog-footer-cancel-badge { - position: absolute; - right: var(--nutui-dialog-footer-cancel-margin-right, 12rpx); - top: var(--nutui-dialog-footer-badge-top, -8rpx); - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-dialog-footer-badge-height, 14rpx); - padding: var(--nutui-dialog-footer-badge-padding, 0 3rpx); - background: var(--nutui-dialog-footer-badge-bg-cancel, var(--nutui-color-danger-light, #ffebef)); - border-radius: var(--nutui-dialog-footer-badge-border-radius, 2rpx 2rpx 0rpx 2rpx); - font-size: var(--nutui-dialog-footer-badge-fontsize, 10rpx); - color: var(--nutui-dialog-footer-badge-color-cancel, var(--nutui-color-primary, #ff0f23)); +.nut-col-19 { + width: 79.166666654%; } -[dir='rtl'] .nut-dialog-outer, -.nut-rtl .nut-dialog-outer { - left: auto; - right: 50%; - -ms-transform: translate(50%, -50%); - transform: translate(50%, -50%); +.nut-col-offset-20 { + margin-left: 83.33333332%; } -[dir='rtl'] .nut-dialog-close-top-right, -.nut-rtl .nut-dialog-close-top-right { - right: auto; - left: var(--nutui-dialog-close-right, 16rpx); +[dir='rtl'] .nut-col-offset-20, +.nut-rtl .nut-col-offset-20 { + margin-left: 0; + margin-right: 83.33333332%; } -[dir='rtl'] .nut-dialog-close-top-left, -.nut-rtl .nut-dialog-close-top-left { - left: auto; - right: var(--nutui-dialog-close-left, 16rpx); +.nut-col-20 { + width: 83.33333332%; } -[dir='rtl'] .nut-dialog-footer-cancel.nut-dialog-footer-cancel, -.nut-rtl .nut-dialog-footer-cancel.nut-dialog-footer-cancel { - margin-right: 0; - margin-left: var(--nutui-dialog-footer-cancel-margin-right, 12rpx); +.nut-col-offset-21 { + margin-left: 87.499999986%; } -.nut-countup-list { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - height: var(--nutui-countup-height, 32rpx); - overflow: hidden; - direction: ltr; +[dir='rtl'] .nut-col-offset-21, +.nut-rtl .nut-col-offset-21 { + margin-left: 0; + margin-right: 87.499999986%; } -.nut-countup-listitem { - height: var(--nutui-countup-height, 32rpx); - overflow: hidden; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +.nut-col-21 { + width: 87.499999986%; } -.nut-countup-listitem-number { - margin: 0 var(--nutui-countup-lr-margin, 0); - border-radius: var(--nutui-countup-border-radius, 4rpx); - color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a)); - background-color: var(--nutui-countup-bg-color, inherit); +.nut-col-offset-22 { + margin-left: 91.666666652%; } -.nut-countup-separator { - display: -ms-flexbox; - display: flex; - height: 80%; - -ms-flex-align: end; - align-items: flex-end; - color: var(--nutui-countup-separator-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-countup-base-size, 18rpx); - font-weight: var(--nutui-font-weight-bold, 600); +[dir='rtl'] .nut-col-offset-22, +.nut-rtl .nut-col-offset-22 { + margin-left: 0; + margin-right: 91.666666652%; } -.nut-countup-number { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-align: center; - align-items: center; - width: var(--nutui-countup-width, auto); - transition: transform 1s ease-in-out; - -ms-transform: translate(0); - transform: translate(0); +.nut-col-22 { + width: 91.666666652%; } -.nut-countup-number-text { - height: var(--nutui-countup-height, 32rpx); - line-height: var(--nutui-countup-height, 32rpx); - color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-countup-base-size, 18rpx); - font-weight: var(--nutui-font-weight-bold, 600); +.nut-col-offset-23 { + margin-left: 95.833333318%; } -.nut-countdown { - display: var(--nutui-countdown-display, flex); - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - color: var(--nutui-countdown-color, var(--nutui-color-primary, #ff0f23)); - font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11rpx)); +[dir='rtl'] .nut-col-offset-23, +.nut-rtl .nut-col-offset-23 { + margin-left: 0; + margin-right: 95.833333318%; } -.nut-countdown-number-primary, -.nut-countdown-number, -.nut-countdown-number-text, -.nut-countdown-unit { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - height: var(--nutui-countdown-height, 16rpx); - box-sizing: border-box; - font-weight: var(--nutui-countdown-font-weight, var(--nutui-font-weight, 400)); - font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11rpx)); - line-height: calc(var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11rpx)) + 2rpx); - font-family: JDZH-Regular; +.nut-col-23 { + width: 95.833333318%; } -.nut-countdown-number, -.nut-countdown-number-primary { - position: relative; - min-width: var(--nutui-countdown-width, 16rpx); - padding: var(--nutui-countdown-number-padding, 0 0); - border-radius: var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2rpx)); - margin: var(--nutui-countdown-number-margin, 0 1rpx); - text-align: center; +.nut-col-offset-24 { + margin-left: 99.999999984%; } -.nut-countdown-number::after, -.nut-countdown-number-primary::after { - content: ''; - position: absolute; - top: -50%; - right: -50%; - bottom: -50%; - left: -50%; - -ms-transform: scale(0.5); - transform: scale(0.5); - border-radius: calc(var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2rpx)) * 2); +[dir='rtl'] .nut-col-offset-24, +.nut-rtl .nut-col-offset-24 { + margin-left: 0; + margin-right: 99.999999984%; } -.nut-countdown-number::after { - border: 1rpx solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-specialdisabled, #ffadbe)); +.nut-col-24 { + width: 99.999999984%; } -.nut-countdown-number-primary::after { - border: 1rpx solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary, #ff0f23)); +.nut-circleprogress { + position: relative; } -.nut-col { - box-sizing: border-box; - word-break: break-all; - margin-bottom: var(--nutui-col-default-margin-bottom, 15rpx); +.nut-circleprogress-hover { + stroke: var(--nutui-circleprogress-primary-color, var(--nutui-color-primary, #ff0f23)); + transition: + stroke-dasharray 0.2s ease-in-out 0s, + stroke 0.2s ease 0s; +} +.nut-circleprogress-path { + stroke: var(--nutui-circleprogress-path-color, var(--nutui-color-background, #f2f3f5)); } .nut-circleprogress-text { position: absolute; @@ -15879,12 +11984,19 @@ wx-button { left: 0; box-sizing: border-box; width: 100%; - -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; color: var(--nutui-circleprogress-text-color, var(--nutui-color-title, #1a1a1a)); font-size: var(--nutui-circleprogress-text-size, var(--nutui-font-size-l, 15rpx)); } +[dir='rtl'] .nut-circleprogress-text, +.nut-rtl .nut-circleprogress-text { + left: auto; + right: 0; +} +.nut-collapse-item { + position: relative; +} .nut-collapse-item::after { position: absolute; box-sizing: border-box; @@ -15894,12 +12006,13 @@ wx-button { left: 16rpx; bottom: 0; border-bottom: var(--nutui-collapse-item-border-bottom, none); - -ms-transform: scaleY(0.5); transform: scaleY(0.5); } +.nut-collapse-item:last-child::after { + display: none; +} .nut-collapse-item-header { position: relative; - display: -ms-flexbox; display: flex; width: 100%; overflow: hidden; @@ -15918,17 +12031,17 @@ wx-button { left: 16rpx; bottom: 0; border-bottom: var(--nutui-collapse-item-header-border-bottom, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - -ms-transform: scale(1); transform: scale(1); - -ms-transform: scaleY(0.5); transform: scaleY(0.5); } +.nut-collapse-item-title { + color: var(--nutui-collapse-item-color, var(--nutui-color-title, #1a1a1a)); + display: flex; + align-items: center; +} .nut-collapse-item-extra { - -ms-flex: 1; flex: 1; - display: -ms-flexbox; display: flex; - -ms-flex-pack: end; justify-content: flex-end; padding: 0 20rpx; overflow: hidden; @@ -15937,26 +12050,35 @@ wx-button { color: var(--nutui-collapse-item-extra-color, var(--nutui-color-text, #505259)); } .nut-collapse-item-icon-box { - display: -ms-flexbox; display: flex; width: 24rpx; position: relative; color: var(--nutui-color-text, #505259); } .nut-collapse-item-icon { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; position: absolute; top: 50%; left: 5rpx; - -ms-transform: translateY(-50%); transform: translateY(-50%); - -ms-transform-origin: center; transform-origin: center; transition: transform 0.3s; } +.nut-collapse-item-header-disabled, +.nut-collapse-item-header-disabled .nut-collapse-item-title, +.nut-collapse-item-header-disabled .nut-collapse-item-icon { + color: var(--nutui-collapse-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc)); +} +.nut-collapse-item-content-wrapper { + width: 100%; + position: relative; + box-sizing: border-box; + overflow: hidden; +} +.nut-collapse-item-content-wrapper-tran { + transition: all 0.3s linear; +} .nut-collapse-item-content { display: block; position: absolute; @@ -15977,19 +12099,32 @@ wx-button { left: auto; right: 5rpx; } +.nut-checkboxgroup .nut-checkbox-button { + background-color: var(--nutui-color-background, #f2f3f5); +} +.nut-checkboxgroup-vertical { + display: flex; + flex-direction: column; +} .nut-checkboxgroup-vertical .nut-checkbox { margin-bottom: 5rpx; } +.nut-checkboxgroup-vertical .nut-checkbox.nut-checkbox-reverse { + width: 100%; + justify-content: space-between; +} .nut-checkboxgroup-vertical .nut-checkbox-button-active { border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); background-color: var(--nutui-color-primary-light-pressed, #ffebf1); } +.nut-checkboxgroup-horizontal { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} .nut-checkboxgroup-horizontal .nut-checkbox { - display: -ms-flexbox; display: flex; - display: -ms-inline-flexbox; display: inline-flex; - -ms-flex: 1; flex: 1; margin-right: 20rpx; } @@ -15998,7 +12133,6 @@ wx-button { background-color: var(--nutui-color-primary-light-pressed, #ffebf1); } .nut-checkboxgroup-list { - -ms-flex-positive: 1; flex-grow: 1; border-bottom: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); border-top: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); @@ -16009,6 +12143,14 @@ wx-button { .nut-checkboxgroup-list .nut-checkbox { margin-bottom: 5rpx; } +.nut-checkboxgroup-list .nut-checkbox.nut-checkbox-reverse { + width: auto; + flex-grow: 1; + justify-content: space-between; +} +.nut-checkboxgroup-list .nut-checkbox-list-item:first-child { + border-top: none; +} [dir='rtl'] .nut-checkboxgroup .nut-checkbox-label, .nut-rtl .nut-checkboxgroup .nut-checkbox-label, [dir='rtl'] .nut-checkboxgroup-vertical .nut-checkbox-label, @@ -16020,10 +12162,13 @@ wx-button { margin-right: 0; margin-left: 20rpx; } +.nut-checkbox { + display: flex; + align-items: center; +} .nut-checkbox-icon { color: var(--nutui-color-text-disabled, #c2c4cc); font-size: var(--nutui-checkbox-icon-font-size, var(--nutui-font-size-icon, 16rpx)); - -ms-flex-negative: 0; flex-shrink: 0; } .nut-checkbox-icon-wrap { @@ -16032,30 +12177,51 @@ wx-button { border-radius: 50%; box-shadow: 0 2rpx 4rpx rgba(255, 15, 35, 0.2); } +.nut-checkbox-icon-checked { + color: var(--nutui-color-primary, #ff0f23); + background-color: #fff; + transition-duration: 0.3s; + transition-property: color, border-color, background-color; + border-radius: 50%; +} +.nut-checkbox-icon-checked.nut-checkbox-icon-disabled { + color: var(--nutui-color-primary-disabled-special, #ffadbe); +} .nut-checkbox-label { margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4rpx)); font-size: var(--nutui-checkbox-label-font-size, var(--nutui-font-size-s, 12rpx)); color: var(--nutui-checkbox-label-color, var(--nutui-color-title, #1a1a1a)); - -ms-flex-negative: 0; flex-shrink: 0; } +.nut-checkbox-label-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc); +} .nut-checkbox-icon-indeterminate { color: var(--nutui-color-primary, #ff0f23); background-color: #fff; box-shadow: 0 2rpx 4rpx rgba(255, 15, 35, 0.2); border-radius: 50%; } +.nut-checkbox-icon-indeterminate.nut-checkbox-icon-disabled { + color: var(--nutui-color-primary-disabled-special, #ffadbe); +} +.nut-checkbox-icon-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc); + background-color: #fff; + border-radius: 50%; + box-shadow: none; +} +.nut-checkbox-reverse { + flex-direction: row-reverse; +} .nut-checkbox-reverse .nut-checkbox-label { margin-right: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4rpx)); margin-left: 0; } .nut-checkbox-button { position: relative; - display: -ms-flexbox; display: flex; - display: -ms-inline-flexbox; display: inline-flex; - -ms-flex-align: center; align-items: center; min-height: 32rpx; padding: var(--nutui-checkbox-button-padding, 5rpx 18rpx); @@ -16086,11 +12252,8 @@ wx-button { border-left: 10rpx solid transparent; border-bottom: 10rpx solid var(--nutui-color-primary, #ff0f23); border-right: 10rpx solid var(--nutui-color-primary, #ff0f23); - display: -ms-flexbox; display: flex; - -ms-flex-align: end; align-items: flex-end; - -ms-flex-pack: end; justify-content: flex-end; } .nut-checkbox-button .nut-checkbox-button-icon-checked { @@ -16100,7 +12263,6 @@ wx-button { color: #fff; right: 0; bottom: 0; - -ms-transform: translate(-1rpx, -2rpx); transform: translate(-1rpx, -2rpx); } .nut-checkbox-button .nut-icon { @@ -16120,13 +12282,15 @@ wx-button { border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); } .nut-checkbox-list-item { - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; padding: var(--nutui-checkbox-list-item-padding, 12rpx 12rpx 12rpx 0); border-top: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } +.nut-checkbox-list-item .nut-checkbox-label, +.nut-checkbox-list-item .nut-icon { + flex: none; +} [dir='rtl'] .nut-checkbox-label, .nut-rtl .nut-checkbox-label { margin-left: 0; @@ -16148,7 +12312,6 @@ wx-button { .nut-rtl .nut-checkbox-button-icon-checked { left: auto; right: 50%; - -ms-transform: translate(3rpx, -3rpx); transform: translate(3rpx, -3rpx); } [dir='rtl'] .nut-checkbox-button-icon .nut-icon::before, @@ -16156,6 +12319,9 @@ wx-button { margin-left: 0; margin-right: 6rpx; } +.nut-cell-group { + display: block; +} .nut-cell-group-title { display: inherit; padding: var(--nutui-cell-group-title-padding, 0 10rpx); @@ -16182,9 +12348,7 @@ wx-button { } .nut-cell { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex-direction: row; flex-direction: row; width: 100%; line-height: var(--nutui-cell-line-height, 20rpx); @@ -16197,6 +12361,17 @@ wx-button { margin-bottom: 10rpx; box-sizing: border-box; } +.nut-cell-group-item { + border-radius: 0; + box-shadow: 0 0 transparent; + margin: 0; +} +.nut-cell-left { + display: flex; + flex-direction: column; + align-items: flex-start; + flex: 1; +} .nut-cell-title, .nut-cell-description, .nut-cell-extra { @@ -16207,23 +12382,20 @@ wx-button { color: var(--nutui-cell-description-color, var(--nutui-color-text, #505259)); } .nut-cell-extra { - display: -ms-flexbox; display: flex; - -ms-flex-direction: row; flex-direction: row; - -ms-flex-pack: end; justify-content: flex-end; - -ms-flex-align: center; align-items: center; - -ms-flex: 1; flex: 1; - -ms-flex-negative: 0; flex-shrink: 0; min-width: 0; word-break: break-all; font-size: var(--nutui-cell-extra-font-size, var(--nutui-font-size-base, 14rpx)); color: var(--nutui-cell-extra-color, var(--nutui-color-text, #505259)); } +.nut-cell-clickable { + cursor: pointer; +} .nut-cell-clickable::before { position: absolute; top: 50%; @@ -16234,20 +12406,17 @@ wx-button { border: inherit; border-color: #000; border-radius: inherit; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; content: ' '; } .nut-cell-divider { - display: -ms-flexbox; display: flex; min-height: 1rpx; padding-left: var(--nutui-cell-divider-left, 16rpx); padding-right: var(--nutui-cell-divider-right, 16rpx); } .nut-cell-divider-inner { - display: -ms-flexbox; display: flex; height: 1rpx; width: 100%; @@ -16266,13 +12435,16 @@ wx-button { background: var(--nutui-color-background-overlay, #ffffff); } .nut-cascader .nut-tabs-titles-item { - -ms-flex: initial; flex: initial; min-width: auto; width: auto; padding: var(--nutui-cascader-tabs-item-padding, 0 10rpx); white-space: nowrap; } +.nut-cascader .nut-tabpane { + padding: 0; + background: var(--nutui-color-background-overlay, #ffffff); +} .nut-cascader-pane { display: block; width: 100%; @@ -16282,11 +12454,8 @@ wx-button { -webkit-overflow-scrolling: touch; } .nut-cascader-item { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; padding: var(--nutui-cascader-item-padding, 10rpx 20rpx); margin: var(--nutui-cascader-item-margin, 0rpx); @@ -16295,6 +12464,20 @@ wx-button { color: var(--nutui-cascader-item-color, var(--nutui-color-title, #1a1a1a)); cursor: pointer; } +.nut-cascader-item.disabled { + opacity: 0.6; + cursor: not-allowed; +} +.nut-cascader-item.active:not(.disabled) { + color: var(--nutui-cascader-item-active-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-cascader-item.active .nut-cascader-item-icon-check { + visibility: visible; + color: inherit; +} +.nut-cascader-item-title { + flex: 1; +} .nut-cascader .nut-icon-checklist { margin-left: var(--nutui-cascader-icon-checklist-marginLeft, 10rpx); visibility: hidden; @@ -16306,7 +12489,6 @@ wx-button { } .nut-card { width: 100%; - display: -ms-flexbox; display: flex; background-color: inherit; border-radius: var(--nutui-card-border-radius, 4rpx); @@ -16314,7 +12496,6 @@ wx-button { .nut-card-left { width: 120rpx; height: 120rpx; - -ms-flex-negative: 0; flex-shrink: 0; } .nut-card-left > .h5-img { @@ -16324,7 +12505,6 @@ wx-button { border-radius: var(--nutui-card-border-radius, 4rpx); } .nut-card-right { - -ms-flex: 1; flex: 1; padding: 0 10rpx 8rpx; } @@ -16339,9 +12519,7 @@ wx-button { color: var(--nutui-color-title, #1a1a1a); } .nut-card-right-price { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; height: 18rpx; line-height: 18rpx; @@ -16350,10 +12528,13 @@ wx-button { .nut-card-right-price-origin.nut-price { margin-left: 2rpx; } +.nut-card-right-price-origin.nut-price .nut-price-symbol, +.nut-card-right-price-origin.nut-price .nut-price-integer, +.nut-card-right-price-origin.nut-price .nut-price-decimal { + color: #d2a448; +} .nut-card-right-other { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; padding: 5rpx 0 2rpx; } @@ -16362,6 +12543,11 @@ wx-button { margin-right: 5rpx; font-size: var(--nutui-font-size-xs, 11rpx); } +.nut-card-right-shop { + display: flex; + justify-content: space-between; + align-items: center; +} .nut-card-right-shop-name { line-height: 1.5; color: var(--nutui-color-text, #505259); @@ -16385,11 +12571,16 @@ wx-button { font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15rpx)); color: var(--nutui-color-title, #1a1a1a); } +.nut-calendarcard-header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + font-weight: 400; +} .nut-calendarcard-header-left, .nut-calendarcard-header-right { - display: -ms-flexbox; display: flex; - -ms-flex-direction: row; flex-direction: row; cursor: pointer; margin: 16rpx; @@ -16403,14 +12594,16 @@ wx-button { .nut-calendarcard-header-right .right { margin-right: 8rpx; } +.nut-calendarcard-days { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; +} .nut-calendarcard-day { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - -ms-flex-direction: column; flex-direction: column; position: relative; width: var(--nutui-calendar-day-width, 14.28%); @@ -16419,23 +12612,43 @@ wx-button { margin-bottom: 4rpx; text-align: center; } +.nut-calendarcard-day.header { + cursor: auto; +} .nut-calendarcard-day-top, .nut-calendarcard-day-bottom { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; width: 100%; height: 12rpx; font-size: 12rpx; line-height: 12rpx; } +.nut-calendarcard-day.weekend { + color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23)); +} .nut-calendarcard-day.active { background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23)); border-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); } +.nut-calendarcard-day.active .nut-calendarcard-day-top, +.nut-calendarcard-day.active .nut-calendarcard-day-inner, +.nut-calendarcard-day.active .nut-calendarcard-day-bottom { + color: #fff; +} +.nut-calendarcard-day.start, +.nut-calendarcard-day.end { + background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-calendarcard-day.start .nut-calendarcard-day-top, +.nut-calendarcard-day.start .nut-calendarcard-day-inner, +.nut-calendarcard-day.start .nut-calendarcard-day-bottom, +.nut-calendarcard-day.end .nut-calendarcard-day-top, +.nut-calendarcard-day.end .nut-calendarcard-day-inner, +.nut-calendarcard-day.end .nut-calendarcard-day-bottom { + color: #fff; +} .nut-calendarcard-day.start { border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); @@ -16444,6 +12657,33 @@ wx-button { border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); } +.nut-calendarcard-day.mid { + background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); +} +.nut-calendarcard-day.mid .nut-calendarcard-day-top, +.nut-calendarcard-day.mid .nut-calendarcard-day-inner, +.nut-calendarcard-day.mid .nut-calendarcard-day-bottom { + color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-calendarcard-day .nut-calendar-day-info { + color: #fff; +} +.nut-calendarcard-day.prev, +.nut-calendarcard-day.next, +.nut-calendarcard-day.disabled { + cursor: not-allowed; +} +.nut-calendarcard-day.prev .nut-calendarcard-day-top, +.nut-calendarcard-day.prev .nut-calendarcard-day-inner, +.nut-calendarcard-day.prev .nut-calendarcard-day-bottom, +.nut-calendarcard-day.next .nut-calendarcard-day-top, +.nut-calendarcard-day.next .nut-calendarcard-day-inner, +.nut-calendarcard-day.next .nut-calendarcard-day-bottom, +.nut-calendarcard-day.disabled .nut-calendarcard-day-top, +.nut-calendarcard-day.disabled .nut-calendarcard-day-inner, +.nut-calendarcard-day.disabled .nut-calendarcard-day-bottom { + color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc)); +} [dir='rtl'] .nut-calendarcard-header-left .left, [dir='rtl'] .nut-calendarcard-header-right .left, .nut-rtl .nut-calendarcard-header-left .left, @@ -16470,10 +12710,15 @@ wx-button { .nut-rtl .nut-calendarcard-header-right .nut-icon-ArrowLeft, .nut-rtl .nut-calendarcard-header-right .nut-icon-ArrowRight, .nut-rtl .nut-calendarcard-header-right .h5-svg { - -ms-transform: rotate(180deg); transform: rotate(180deg); } [dir='rtl'] .nut-calendarcard-day.start, +[dir='rtl'] .nut-calendarcard-day.end, +.nut-rtl .nut-calendarcard-day.start, +.nut-rtl .nut-calendarcard-day.end { + border-radius: 0; +} +[dir='rtl'] .nut-calendarcard-day.start, .nut-rtl .nut-calendarcard-day.start { border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); @@ -16485,11 +12730,8 @@ wx-button { } .nut-calendar { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex: 1; flex: 1; font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15rpx)); background-color: var(--nutui-color-background-overlay, #ffffff); @@ -16500,6 +12742,20 @@ wx-button { .nut-calendar.nut-calendar-title .nut-calendar-header .calendar-title { font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15rpx)); } +.nut-calendar .nut-calendar-taro { + height: 60vh; +} +.nut-calendar .popup-box { + height: 100%; +} +.nut-calendar ::-webkit-scrollbar { + display: none; +} +.nut-calendar-header { + display: flex; + flex-direction: column; + text-align: center; +} .nut-calendar-header-buttons { height: var(--nutui-calendar-header-height, 24rpx); } @@ -16515,16 +12771,30 @@ wx-button { font-size: var(--nutui-calendar-sub-title-font-size, var(--nutui-font-size-base, 14rpx)); } .nut-calendar-weeks { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: distribute; justify-content: space-around; height: 36rpx; border-radius: 0 0 12rpx 12rpx; box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05882); } +.nut-calendar-week-item:first-of-type, +.nut-calendar-week-item:last-of-type { + color: var(--nutui-color-primary, #ff0f23); +} +.nut-calendar-content { + flex: 1; + width: 100%; + display: block; + overflow-y: auto; +} +.nut-calendar-pannel { + position: relative; + width: 100%; + height: auto; + display: block; + box-sizing: border-box; +} .nut-calendar-pannel .calendar-loading-tip { height: 50rpx; line-height: 50rpx; @@ -16536,19 +12806,23 @@ wx-button { font-size: var(--nutui-font-size-s, 12rpx); color: var(--nutui-color-text, #505259); } +.nut-calendar-month { + display: flex; + flex-direction: column; + text-align: center; +} .nut-calendar-month-title { height: 23rpx; line-height: 23rpx; margin: 8rpx 0; } +.nut-calendar-days { + overflow: hidden; +} .nut-calendar-day { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - -ms-flex-direction: column; flex-direction: column; position: relative; float: left; @@ -16557,6 +12831,10 @@ wx-button { font-weight: var(--nutui-calendar-day-font-weight, var(--nutui-font-weight-bold, 600)); margin-bottom: 4rpx; } +.nut-calendar-day:nth-child(7n), +.nut-calendar-day:nth-child(7n + 1) { + color: var(--nutui-color-primary, #ff0f23); +} .nut-calendar-day-info, .nut-calendar-day-info-curr { position: absolute; @@ -16590,13 +12868,38 @@ wx-button { border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); } +.nut-calendar-day-active .nut-calendar-day-info { + color: #fff; +} +.nut-calendar-day-disabled { + color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc)) !important; +} +.nut-calendar-day-disabled .nut-calendar-day-info-curr { + display: none; +} +.nut-calendar-day-choose { + background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); + color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-calendar-day-choose-disabled { + background-color: var(--nutui-calendar-choose-disable-background-color, rgba(191, 191, 191, 0.09)); + color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc)) !important; +} +.nut-calendar-day-choose-disabled .nut-calendar-day-info-curr { + display: none; +} +.nut-calendar-footer { + display: flex; + width: 100%; + flex-direction: column; + background-color: #fff; +} .nut-calendar-footer .calendar-confirm-btn { height: 40rpx; line-height: 40rpx; margin: 6rpx 16rpx; text-align: center; border-radius: var(--nutui-radius-base, 8rpx); - background: -webkit-linear-gradient(left, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); color: #fff; font-weight: var(--nutui-font-weight-bold, 600); @@ -16604,6 +12907,10 @@ wx-button { .nut-calendar-popup .nut-popup-title-right { top: 7rpx !important; } +[dir='rtl'] .nut-calendar-day, +.nut-rtl .nut-calendar-day { + float: right; +} [dir='rtl'] .nut-calendar-day-active.active-start, .nut-rtl .nut-calendar-day-active.active-start { border-top-left-radius: 0; @@ -16620,18 +12927,13 @@ wx-button { } .nut-button { position: relative; - display: -ms-flexbox; display: flex; display: inline-block; width: 80rpx; width: auto; - -ms-flex-direction: row; flex-direction: row; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; - -ms-flex-negative: 0; flex-shrink: 0; box-sizing: border-box; margin: 0; @@ -16642,10 +12944,7 @@ wx-button { text-align: center; cursor: pointer; transition: opacity 0.2s; - -moz-user-select: none; - -ms-user-select: none; user-select: none; - -ms-touch-action: manipulation; touch-action: manipulation; color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a)); background: var(--nutui-button-default-background-color, transparent); @@ -16657,6 +12956,11 @@ wx-button { .nut-button-text-right { margin-right: var(--nutui-button-text-icon-margin, 4rpx); } +.nut-button-children { + display: flex; + flex-direction: row; + background: transparent; +} .nut-button::before { position: absolute; top: 50%; @@ -16667,23 +12971,21 @@ wx-button { border: inherit; border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); border-radius: inherit; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; content: ' '; pointer-events: none; pointer-events: auto; } +.nut-button::after { + border: none; +} .nut-button-wrap { height: 100%; width: 100%; - display: -ms-flexbox; display: flex; - -ms-flex-direction: row; flex-direction: row; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; background: initial; @@ -16693,6 +12995,14 @@ wx-button { width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14rpx)); height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14rpx)); } +.nut-button-loading::before, +.nut-button-disabled::before { + display: none; +} +.nut-button-disabled { + cursor: not-allowed; + color: #fff; +} .nut-button.nut-button-icononly { width: var(--nutui-button-default-height, 32rpx); padding: 0; @@ -16705,6 +13015,21 @@ wx-button { border-style: solid; border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #c2c4cc)); } +.nut-button-default-disabled, +.nut-button-default-solid-disabled { + color: var(--nutui-button-primary-color, #ffffff); + background: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc)); + border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc)); +} +.nut-button-default-none-disabled { + color: var(--nutui-button-default-disabled-color, var(--nutui-color-text-help, #888b94)); +} +.nut-button-default-outline-disabled, +.nut-button-default-dashed-disabled { + background: transparent; + color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc)); + border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc)); +} .nut-button-normal { padding: var(--nutui-button-normal-padding, 0rpx 12rpx); } @@ -16776,6 +13101,200 @@ wx-button { .nut-button-mini-children { font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11rpx)); } +.nut-button-primary { + color: var(--nutui-button-primary-color, #ffffff); + background-origin: border-box; + border-color: transparent; +} +.nut-button-primary-children { + color: var(--nutui-button-primary-color, #ffffff); +} +.nut-button-primary-solid { + background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); + color: var(--nutui-button-primary-color, #ffffff); + border-color: transparent; + font-weight: var(--nutui-font-weight-bold, 600); +} +.nut-button-primary-solid.nut-button-small, +.nut-button-primary-solid.nut-button-mini { + font-weight: var(--nutui-font-weight, 400); +} +.nut-button-primary-disabled, +.nut-button-primary-disabled.nut-button-icononly, +.nut-button-primary-solid-disabled { + color: var(--nutui-button-primary-color, #ffffff); + background: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); + border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +} +.nut-button-primary-none { + color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-button-primary-none-disabled { + color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +} +.nut-button-primary-outline { + color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); + border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-button-primary-outline-disabled { + color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); + border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +} +.nut-button-primary-dashed { + color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); + border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-button-primary-dashed-disabled { + color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); + border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +} +.nut-button-primary.nut-button-solid.nut-button-normal { + font-weight: var(--nutui-font-weight-bold, 600); +} +.nut-button-success { + color: var(--nutui-button-success-color, #ffffff); + background: var(--nutui-button-success-background-color, var(--nutui-color-success, #00d900)); + background-origin: border-box; + border-color: transparent; +} +.nut-button-success-children { + color: var(--nutui-button-success-color, #ffffff); +} +.nut-button-success-disabled, +.nut-button-success-solid-disabled { + background: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae)); + border-color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae)); +} +.nut-button-success-outline, +.nut-button-success-dashed { + color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900)); + border-color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900)); +} +.nut-button-success-outline-disabled, +.nut-button-success-dashed-disabled { + color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); + border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +} +.nut-button-success-none { + color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900)); +} +.nut-button-success-none-disabled { + color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae)); +} +.nut-button-info { + color: var(--nutui-button-info-color, #ffffff); + background: var(--nutui-button-info-background-color, var(--nutui-color-info-background, #0073ff)); + background-origin: border-box; + border-color: transparent; +} +.nut-button-info-children { + color: var(--nutui-button-info-color, #ffffff); +} +.nut-button-info-disabled, +.nut-button-info-solid-disabled { + background: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); + border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); +} +.nut-button-info-outline, +.nut-button-info-dashed { + color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff)); + border-color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff)); +} +.nut-button-info-outline-disabled, +.nut-button-info-dashed-disabled { + color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); + border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); +} +.nut-button-info-none { + color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff)); +} +.nut-button-info-none-disabled { + color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); +} +.nut-button-danger { + color: var(--nutui-button-danger-color, #ffffff); + background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23)); + background-origin: border-box; + border-color: transparent; +} +.nut-button-danger-children { + color: var(--nutui-button-danger-color, #ffffff); +} +.nut-button-danger-disabled, +.nut-button-danger-solid-disabled { + background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); + border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); +} +.nut-button-danger-outline, +.nut-button-danger-dashed { + color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23)); + border-color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23)); +} +.nut-button-danger-outline-disabled, +.nut-button-danger-dashed-disabled { + color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); + border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); +} +.nut-button-danger-none { + color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23)); +} +.nut-button-danger-none-disabled { + color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); +} +.nut-button-warning { + color: var(--nutui-button-warning-color, #ffffff); + background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #ffbf00)); + background-origin: border-box; + border-color: transparent; +} +.nut-button-warning-children { + color: var(--nutui-button-warning-color, #ffffff); +} +.nut-button-warning-disabled, +.nut-button-warning-solid-disabled { + color: var(--nutui-button-warning-color, #ffffff); + background: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); + border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); +} +.nut-button-warning-outline, +.nut-button-warning-dashed { + color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00)); + border-color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00)); +} +.nut-button-warning-outline-disabled, +.nut-button-warning-dashed-disabled { + color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); + border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); +} +.nut-button-warning-none { + color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00)); +} +.nut-button-warning-none-disabled { + color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); +} +.nut-button-block { + display: block; + width: 100%; +} +.nut-button-outline { + background: transparent; + border-style: solid; +} +.nut-button-dashed { + background: transparent; + border-style: dashed; +} +.nut-button-none { + background: transparent; + border-color: transparent; +} +.nut-button-loading { + cursor: default; + opacity: 0.9; +} +.nut-button-square { + border-radius: var(--nutui-button-square-border-radius, 0); +} [dir='rtl'] .nut-button-text, .nut-rtl .nut-button-text { margin-left: 0; @@ -16789,9 +13308,19 @@ wx-button { .nut-rtl .nut-button::before { left: auto; right: 50%; - -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } +.nut-barrage { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + box-sizing: border-box; + background-color: var(--nutui-color-background, #f2f3f5); + color: var(--nutui-color-title, #1a1a1a); +} .nut-barrage .barrage-item { display: block; position: absolute; @@ -16801,9 +13330,7 @@ wx-button { font-size: var(--nutui-font-size-s, 12rpx); text-align: center; white-space: pre; - -ms-transform: translate(100%); transform: translate(100%); - background: -webkit-linear-gradient(left, var(--nutui-black-3), var(--nutui-black-1)); background: linear-gradient(to right, var(--nutui-black-3), var(--nutui-black-1)); box-sizing: border-box; } @@ -16821,11 +13348,14 @@ wx-button { transform: translate(var(--move-distance)); } } +[dir='rtl'] .nut-barrage, +.nut-rtl .nut-barrage { + left: auto; + right: 0; +} [dir='rtl'] .nut-barrage .barrage-item, .nut-rtl .nut-barrage .barrage-item { - -ms-transform: translate(-100%); transform: translate(-100%); - background: -webkit-linear-gradient(right, var(--nutui-black-3), var(--nutui-black-1)); background: linear-gradient(to left, var(--nutui-black-3), var(--nutui-black-1)); } [dir='rtl'] .nut-barrage .barrage-item.move, @@ -16840,12 +13370,17 @@ wx-button { transform: translate(100%); } } +.nut-badge { + position: relative; + display: flex; + display: inline-flex; + box-sizing: content-box; + vertical-align: middle; + width: auto; +} .nut-badge-icon { - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23)); padding: var(--nutui-badge-icon-padding, 2rpx); @@ -16869,15 +13404,12 @@ wx-button { right: -50%; bottom: -50%; left: -50%; - -ms-transform: scale(0.5); transform: scale(0.5); border: var(--nutui-badge-border, 1rpx solid #ffffff); border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14rpx)); } .nut-badge-sup { - display: -ms-flexbox; display: flex; - display: -ms-inline-flexbox; display: inline-flex; text-align: center; min-width: var(--nutui-badge-min-width, 6rpx); @@ -16892,15 +13424,24 @@ wx-button { background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23)); z-index: 1; } +.nut-badge-disabled { + background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc)); +} +.nut-badge-number { + font-family: JDZH-Regular; +} .nut-badge-one { height: var(--nutui-badge-height, 14rpx); width: var(--nutui-badge-height, 14rpx); } .nut-badge-content { position: absolute; - -ms-transform: var(--nutui-badge-content-transform, translate(50%, -50%)); transform: var(--nutui-badge-content-transform, translate(50%, -50%)); } +.nut-badge-dot { + padding: 0; + border-radius: 50%; +} .nut-badge-dot::after { border: var(--nutui-badge-dot-border, 1rpx solid #ffffff); border-radius: 50%; @@ -16920,20 +13461,34 @@ wx-button { width: var(--nutui-badge-dot-large-width, 8rpx); height: var(--nutui-badge-dot-large-width, 8rpx); } +.nut-badge-outline { + background: #fff; + color: var(--nutui-badge-outline-color, var(--nutui-color-primary, #ff0f23)); +} .nut-badge-outline::after { border: var(--nutui-badge-outline-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); } +.nut-backtop { + display: none; +} .nut-backtop-show { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; width: var(--nutui-hoverbutton-item-size, 40rpx); height: var(--nutui-hoverbutton-item-size, 40rpx); transition: all 0.2s ease-in-out; } +.nut-backtop-show .nut-hoverbutton-item-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.nut-avatar-cropper { + position: relative; + display: flex; +} .nut-avatar-cropper-edit-text { position: absolute; top: 0; @@ -16943,38 +13498,115 @@ wx-button { background-color: rgba(0, 0, 0, 0.30196); z-index: 1; color: #fff; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; } +.nut-avatar-cropper-input { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; + z-index: 2; +} +.nut-avatar-cropper-popup { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: var(--nut-overlay-bg-color, rgba(0, 0, 0, 0.7)); + z-index: 1000; +} +.nut-avatar-cropper-popup-canvas, +.nut-avatar-cropper-popup-cut-canvas { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} +.nut-avatar-cropper-popup-cut-canvas { + z-index: 0; +} +.nut-avatar-cropper-popup-toolbar { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + z-index: 2; +} +.nut-avatar-cropper-popup-toolbar.top { + top: 0; + bottom: inherit; +} +.nut-avatar-cropper-popup-toolbar-flex { + width: 100%; + display: flex; + justify-content: space-between; +} .nut-avatar-cropper-popup-toolbar-item { color: #fff; padding: 15rpx; cursor: pointer; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; } +.nut-avatar-cropper-popup-toolbar-item .nut-button { + color: #fff; +} +.nut-avatar-cropper-popup-highlight { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 1; + background-color: transparent; +} .nut-avatar-cropper-popup-highlight .highlight { position: absolute; left: 50%; top: 50%; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: transparent; box-shadow: 0 0 1000rpx 1000rpx rgba(0, 0, 0, 0.6); } +.nut-avatar-cropper.round .nut-avatar-cropper-edit-text { + border-radius: 50%; +} +[dir='rtl'] .nut-avatar-cropper-edit-text, +.nut-rtl .nut-avatar-cropper-edit-text, +[dir='rtl'] .nut-avatar-cropper-input, +.nut-rtl .nut-avatar-cropper-input, +[dir='rtl'] .nut-avatar-cropper-popup, +.nut-rtl .nut-avatar-cropper-popup, +[dir='rtl'] .nut-avatar-cropper-popup-canvas, +[dir='rtl'] .nut-avatar-cropper-popup-cut-canvas, +.nut-rtl .nut-avatar-cropper-popup-canvas, +.nut-rtl .nut-avatar-cropper-popup-cut-canvas, +[dir='rtl'] .nut-avatar-cropper-popup-toolbar, +.nut-rtl .nut-avatar-cropper-popup-toolbar, +[dir='rtl'] .nut-avatar-cropper-popup-highlight, +.nut-rtl .nut-avatar-cropper-popup-highlight { + left: auto; + right: 0; +} [dir='rtl'] .nut-avatar-cropper-popup-highlight .highlight, .nut-rtl .nut-avatar-cropper-popup-highlight .highlight { left: auto; right: 50%; - -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } +.nut-avatar-group { + display: flex; + flex-direction: row; + flex: 0 0 auto; +} .nut-avatar-group-avatar, .nut-avatar-group .nut-avatar { border: 1rpx solid #fff; @@ -16991,13 +13623,9 @@ wx-button { } .nut-avatar { position: relative; - -ms-flex: 0 0 auto; flex: 0 0 auto; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; width: var(--nutui-avatar-normal-width, 40rpx); height: var(--nutui-avatar-normal-height, 40rpx); @@ -17009,6 +13637,26 @@ wx-button { .nut-avatar-square { border-radius: var(--nutui-avatar-square, 5rpx); } +.nut-avatar-first-child { + margin-left: 0; + margin-right: 0; +} +.nut-avatar-img { + width: 100%; + height: 100%; + flex-shrink: 0; + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center center; +} +.nut-avatar-icon { + background-size: 100% 100%; +} +.nut-avatar-text { + display: flex; + justify-content: center; + align-items: center; +} .nut-avatar-large, .nut-avatar-large-img, .nut-avatar-large-icon, @@ -17021,12 +13669,13 @@ wx-button { width: var(--nutui-avatar-small-width, 32rpx); height: var(--nutui-avatar-small-height, 32rpx); } +.nut-audio-icon { + position: relative; + display: inline-block; +} .nut-audio-icon-box { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; width: 30rpx; height: 30rpx; @@ -17034,32 +13683,29 @@ wx-button { border-radius: 50%; box-shadow: 0 0 8rpx var(--nutui-color-text-disabled, #c2c4cc); } +.nut-audio-icon .nut-audio-icon-stop { + position: relative; +} .nut-audio-icon .nut-audio-icon-stop::after { position: absolute; left: 50%; top: 50%; - -ms-transform: translate(-50%); transform: translate(-50%); content: ''; height: 2rpx; width: 30rpx; background: var(--nutui-color-text-disabled, #c2c4cc); - -ms-transform: rotate(45deg); transform: rotate(45deg); - -ms-transform-origin: 8rpx -18rpx; transform-origin: 8rpx -18rpx; } .nut-audio-progress { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; width: 100%; margin: 0 auto; padding: 10rpx 0; } .nut-audio-progress-bar-wrapper { - -ms-flex: 1; flex: 1; margin: 0 10rpx; } @@ -17079,18 +13725,18 @@ wx-button { margin: 0 5rpx; pointer-events: none; } +.nut-audio .disable { + color: #00f; +} .nut-audio .nut-audio-none-container .nut-voice { border: 1rpx solid var(--nutui-color-title, #1a1a1a); - -ms-flex-align: center; align-items: center; } [dir='rtl'] .nut-audio-icon .nut-audio-icon-stop::after, .nut-rtl .nut-audio-icon .nut-audio-icon-stop::after { left: auto; right: 50%; - -ms-transform: rotate(-45deg); transform: rotate(-45deg); - -ms-transform-origin: 20rpx -18rpx; transform-origin: 20rpx -18rpx; } .nut-animate [class*='nut-animate-'] { @@ -17212,6 +13858,9 @@ wx-button { animation-timing-function: ease-in-out; animation-direction: alternate; } +.nut-animate .nut-animate-twinkle { + position: relative; +} .nut-animate .nut-animate-twinkle::after, .nut-animate .nut-animate-twinkle::before { width: 60rpx; @@ -17225,7 +13874,6 @@ wx-button { margin-top: -30rpx; margin-right: -30rpx; z-index: 1; - -ms-transform: scale(0); transform: scale(0); animation: twinkle 2s ease-out infinite; } @@ -17236,12 +13884,19 @@ wx-button { 0% { transform: scale(0); } + 20% { + opacity: 1; + } 50%, to { transform: scale(1.4); opacity: 0; } } +.nut-animate .nut-animate-flicker { + position: relative; + overflow: hidden; +} .nut-animate .nut-animate-flicker::after { width: 100rpx; height: 60rpx; @@ -17250,10 +13905,8 @@ wx-button { top: 0; opacity: 0.73; content: ''; - background-image: -webkit-linear-gradient(344deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%); - background-image: linear-gradient(106deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%); + background-image: linear-gradient(106deg, #e8e0ff00 24%, #e8e0ff 91%); animation: flicker 1.5s linear infinite; - -ms-transform: skew(-20deg); transform: skew(-20deg); filter: blur(3rpx); } @@ -17284,11 +13937,13 @@ wx-button { } } .nut-animate .nut-animate-jump { - -ms-transform-origin: center center; transform-origin: center center; animation: jump 0.7s linear; } @keyframes float-pop { + 0% { + top: 0; + } 25% { top: 1rpx; } @@ -17298,6 +13953,9 @@ wx-button { 75% { top: 1rpx; } + to { + top: 0; + } } .nut-animate .nut-animate-float { position: relative; @@ -17306,9 +13964,23 @@ wx-button { .nut-animate .loop { animation-iteration-count: infinite; } +.nut-actionsheet { + text-align: center; +} +.nut-actionsheet.nut-popup { + min-height: 10%; + background-color: var(--nutui-actionsheet-background-color, var(--nutui-color-background-overlay, #ffffff)); +} .nut-actionsheet .nut-popup-title { border-bottom: 1rpx solid var(--nutui-actionsheet-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } +.nut-actionsheet-list { + display: block; + list-style: none; + padding: 0; + margin: 0; + border-radius: var(--nutui-actionsheet-border-radius, 0); +} .nut-actionsheet-cancel, .nut-actionsheet-item { display: block; @@ -17334,11 +14006,26 @@ wx-button { text-align: var(--nutui-actionsheet-item-text-align, center); line-height: var(--nutui-actionsheet-item-line-height, 24rpx); } +.nut-actionsheet-cancel-danger, +.nut-actionsheet-item-danger { + color: var(--nutui-actionsheet-item-danger, var(--nutui-color-danger, #ff0f23)); +} +.nut-actionsheet-cancel-disabled, +.nut-actionsheet-item-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc) !important; + cursor: not-allowed; +} .nut-actionsheet-cancel { margin-top: 5rpx; border-top: 1rpx solid var(--nutui-actionsheet-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); border-radius: var(--nutui-actionsheet-border-radius, 0); } +.nut-actionsheet-safe-area { + display: block; + width: 100%; + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); +} .nut-address-exist { display: block; padding: 15rpx 20rpx 0; @@ -17347,15 +14034,16 @@ wx-button { box-sizing: border-box; } .nut-address-exist-item { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; margin-bottom: 20rpx; font-size: var(--nutui-font-size-s, 12rpx); line-height: var(--nutui-font-size-base, 14rpx); color: var(--nutui-color-title, #1a1a1a); } +.nut-address-exist-item.active { + font-weight: var(--nutui-font-weight-bold, 600); +} .nut-address-exist-item-info { margin-left: 9rpx; } @@ -17371,7 +14059,6 @@ wx-button { line-height: 42rpx; margin: auto; text-align: center; - background: -webkit-linear-gradient(left, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); border-radius: 21rpx; font-size: 15rpx; @@ -17384,19 +14071,13 @@ wx-button { } .nut-address-hotlist { padding: 0 16rpx; - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; flex-wrap: wrap; - -ms-flex-align: start; align-items: flex-start; } .nut-address-hotlist-item { - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; width: 63rpx; height: 28rpx; @@ -17407,6 +14088,9 @@ wx-button { background-color: var(--nutui-color-background-sunken, #f7f8fc); color: var(--nutui-color-title, #1a1a1a); } +.nut-address-hotlist-item:nth-child(5n) { + margin-right: 0; +} .nut-address-hotlist.hotlist-more .nut-address-hotlist-item { width: auto; padding: 0 16rpx; @@ -17416,9 +14100,7 @@ wx-button { width: 100%; height: 60rpx; padding: 0 16rpx; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; border-bottom: 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)); } @@ -17440,6 +14122,9 @@ wx-button { margin: 0 2rpx; color: var(--nutui-color-text-disabled, #c2c4cc); } +.nut-address-elevator { + margin-top: 0; +} .nut-address-elevator .nut-elevator-list-item { position: relative; padding-left: 20rpx; @@ -17455,12 +14140,14 @@ wx-button { color: var(--nutui-color-text-help, #888b94); font-weight: 500; } +.nut-address-elevator .nut-elevator-bars { + top: 40%; + padding: 0; + background: none; +} .nut-address-elevator .nut-elevator-bars-inner-item { - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; width: 16rpx; height: 16rpx; @@ -17469,6 +14156,11 @@ wx-button { margin-bottom: 2rpx; color: var(--nutui-color-text-help, #888b94); } +.nut-address-elevator .nut-elevator-bars-inner-item-active { + background-color: var(--nutui-color-primary, #ff0f23); + color: var(--nutui-color-background-overlay, #ffffff); + font-weight: 400; +} [dir='rtl'] .nut-address-exist-item-info, .nut-rtl .nut-address-exist-item-info { margin-left: 0; @@ -17480,6 +14172,9 @@ wx-button::after { border: none; content: ''; } +wx-button { + background: #000; +} wx-button { background: #444; } @@ -17487,9 +14182,7 @@ abc { background: #222; } .weapp-tw-user-ui-card { - display: -ms-inline-flexbox; display: inline-flex; - -ms-flex-align: center; align-items: center; gap: 8rpx; color: var(--weapp-tw-user-ui-color, #175e75); @@ -17512,7 +14205,6 @@ abc { transform: scale(0.96); } } -@charset "UTF-8"; @font-face { font-family: JDZH-Regular; src: url(data:font/ttf;base64,) format('truetype'); @@ -17527,9 +14219,3 @@ abc { font-style: normal; font-display: swap; } -@keyframes nutBounce { - 80% { - transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - transform: translateZ(0) scaleY(0.95); - } -} diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/README.md index 62c2f9737..fd476cc5a 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: taro-vite-vue3-tailwindcss-v4/dist/app.wxss | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 434303 | 1693 | false | false | false | true | true | false | true | +| 338549 | 1693 | false | false | false | true | true | false | true | ## Generator CSS Files @@ -24,7 +24,7 @@ Entry: taro-vite-vue3-tailwindcss-v4/dist/app.wxss | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | | `app.wxss` | [artifacts/app.wxss](artifacts/app.wxss) | 29 | 0 | false | false | false | false | false | false | false | -| `app-origin.wxss` | [artifacts/app-origin.wxss](artifacts/app-origin.wxss) | 414696 | 1541 | false | false | false | true | true | false | true | +| `app-origin.wxss` | [artifacts/app-origin.wxss](artifacts/app-origin.wxss) | 318942 | 1541 | false | false | false | true | true | false | true | | `sub-independent/pages/index.wxss` | [artifacts/sub-independent__pages__index.wxss](artifacts/sub-independent__pages__index.wxss) | 1900 | 8 | false | false | false | false | false | false | true | | `sub-normal/pages/index.wxss` | [artifacts/sub-normal__pages__index.wxss](artifacts/sub-normal__pages__index.wxss) | 1865 | 8 | false | false | false | false | false | false | true | | `vendors.wxss` | [artifacts/vendors.wxss](artifacts/vendors.wxss) | 15813 | 161 | false | false | false | false | false | false | false | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/artifacts/app-origin.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/artifacts/app-origin.wxss index 25d4bfea7..37761d3c6 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/artifacts/app-origin.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-vite-vue3-tailwindcss-v4/artifacts/app-origin.wxss @@ -1269,14 +1269,6 @@ wx-button { border: var(--nut-pagination-item-border-width, 1rpx) solid var(--nut-pagination-item-border-color, #e4e7eb); cursor: pointer; } -.nut-pagination-prev, -.nut-pagination-item { - border-right: none; -} -.nut-pagination-prev, -.nut-pagination-next { - padding: var(--nut-pagination-prev-next-padding, 0 11rpx); -} .nut-pagination .simple-border { border-right: var(--nut-pagination-item-border-width, 1rpx) solid var(--nut-pagination-item-border-color, #e4e7eb); } @@ -1623,22 +1615,6 @@ wx-button { justify-content: center; color: var(--nut-tabs-titles-item-color, var(--nut-title-color, #1a1a1a)); } -.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__text { - text-align: center; -} -.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__text.ellipsis { - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon { - position: absolute; - font-size: 12rpx; - width: 100%; - height: 100%; - color: var(--nut-tabs-tab-smile-color, var(--nut-primary-color, #fa2c19)); -} .nut-tabs .nut-tabs__titles .nut-tabs__titles-item__smile, .nut-tabs .nut-tabs__titles .nut-tabs__titles-item__line { position: absolute; @@ -1654,19 +1630,6 @@ wx-button { border-radius: var(--nut-tabs-titles-item-line-border-radius, 0); opacity: var(--nut-tabs-titles-item-line-opacity, 1); } -.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.active { - font-weight: 700; - color: var(--nut-tabs-titles-item-active-color, var(--nut-title-color, #1a1a1a)); -} -.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__line { - content: ' '; - width: var(--nut-tabs-horizontal-titles-item-active-line-width, 40rpx); - height: 3rpx; - background: var(--nut-tabs-horizontal-tab-line-color, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); -} -.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.disabled { - color: var(--nut-disable-color, #cccccc); -} .nut-tabs .nut-tabs__titles-left { -ms-flex-pack: start; justify-content: flex-start; @@ -1681,15 +1644,6 @@ wx-button { flex-direction: row; height: var(--nut-tabs-horizontal-titles-height, 46rpx); } -.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__list, -.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__list { - height: 100%; -} -.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles.scrollable, -.nut-tabs.horizontal > .nut-tabs__titles.scrollable { - overflow-x: auto; - overflow-y: hidden; -} .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item, .nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item { -ms-flex: 1 0 auto; @@ -1697,14 +1651,6 @@ wx-button { min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50rpx); width: 0; } -.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon, -.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon { - position: absolute; - font-size: 12rpx; - width: 100%; - height: 100%; - color: var(--nut-tabs-tab-smile-color, var(--nut-primary-color, #fa2c19)); -} .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item-left, .nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item-left { -ms-flex: 0 0 auto; @@ -1726,14 +1672,6 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-tabs.vertical > .nut-tabs__titles.scrollable { - overflow-x: hidden; - overflow-y: auto; - height: auto; -} -.nut-tabs.vertical > .nut-tabs__titles.scrollable .nut-tabs__titles-placeholder { - height: 22rpx; -} .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item { min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50rpx); width: 100%; @@ -1749,15 +1687,6 @@ wx-button { width: 0; height: 0; } -.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.active { - background-color: #fff; -} -.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__line { - left: 10rpx; - width: 3rpx; - background: var(--nut-tabs-vertical-tab-line-color, linear-gradient(180deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); - height: var(--nut-tabs-vertical-titles-item-active-line-height, 14rpx); -} .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__smile { position: absolute; right: -8rpx; @@ -1774,47 +1703,11 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-tabs.vertical .nut-tabs__content .nut-tab-pane { - height: 100%; -} -.nut-tabs__titles.large .nut-tabs__titles-item { - font-size: var(--nut-tabs-titles-item-large-font-size, var(--nut-font-size-3, 16rpx)); -} -.nut-tabs__titles.normal .nut-tabs__titles-item { - font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 14rpx)); -} -.nut-tabs__titles.small .nut-tabs__titles-item { - font-size: var(--nut-tabs-titles-item-small-font-size, var(--nut-font-size-1, 12rpx)); -} -.nut-tabs__titles::-webkit-scrollbar { - display: none; - width: 0; - background: transparent; -} -.nut-tabs__titles.smile .nut-tabs__titles-item .nut-tabs__titles-item__smile { - display: none; -} -.nut-tabs__titles.smile .nut-tabs__titles-item.active .nut-tabs__titles-item__smile { - width: 36rpx; - height: 10rpx; - display: block; -} .nut-tabs__content { display: -ms-flexbox; display: flex; box-sizing: border-box; } -.nut-tabs .nut-tabs__titles-item .taro { - height: 46rpx; - line-height: 46rpx; -} -.nut-tabs .nut-tabs__titles-placeholder { - width: auto; - min-width: 10rpx; -} -.nut-theme-dark .nut-tab-pane { - background: var(--nut-dark-background2, #1b1b1b); -} .nut-tab-pane { width: 100%; -ms-flex-negative: 0; @@ -1827,17 +1720,6 @@ wx-button { height: 100%; word-break: break-all; } -.nut-tab-pane.inactive { - overflow: visible; - height: 0; -} -.nut-theme-dark .nut-cascader__bar { - background: var(--nut-dark-background2, #1b1b1b); - color: var(--nut-dark-color, var(--nut-white, #fff)); -} -.nut-theme-dark .nut-tabs__titles { - background: var(--nut-dark-background3, #141414) !important; -} .nut-theme-dark .nut-cascader-item { color: var(--nut-dark-color-gray, var(--nut-text-color, #808080)); } @@ -1963,19 +1845,6 @@ wx-button { padding-top: 1rpx; background-color: var(--nut-white, #fff); } -.nut-calendar .nut-calendar__header .nut-calendar__header-title { - font-size: var(--nut-calendar-title-font, var(--nut-font-size-4, 18rpx)); - font-weight: var(--nut-calendar-title-font-weight, 500); - line-height: 44rpx; -} -.nut-calendar .nut-calendar__header .nut-calendar__header-slot { - min-height: 24rpx; -} -.nut-calendar .nut-calendar__header .nut-calendar__header-subtitle { - padding: 7rpx 0; - line-height: 22rpx; - font-size: var(--nut-calendar-sub-title-font, var(--nut-font-size-2, 14rpx)); -} .nut-calendar .nut-calendar__header .nut-calendar__weekdays { display: -ms-flexbox; display: flex; @@ -1987,9 +1856,6 @@ wx-button { border-radius: 0 0 12rpx 12rpx; box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05882); } -.nut-calendar .nut-calendar__header .nut-calendar__weekdays .nut-calendar__weekday.weekend { - color: var(--nut-calendar-day67-font-color, var(--nut-primary-color, #fa2c19)); -} .nut-calendar .nut-calendar__content { -ms-flex: 1; flex: 1; @@ -2360,9 +2226,6 @@ wx-button { -ms-flex: 1; flex: 1; } -.nut-input .input-text { - font-size: var(--nut-input-font-size, var(--nut-font-size-2, 14rpx)); -} .nut-input__label { width: 80rpx; overflow: hidden; @@ -2413,12 +2276,6 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-input-right-box { - margin-left: 4rpx; -} -.nut-input-left-box { - margin-right: 4rpx; -} .nut-input-clear-box { height: 100%; display: -ms-flexbox; @@ -4313,15 +4170,6 @@ wx-button { justify-content: center; margin-bottom: 12rpx; } -.nut-step-line { - position: absolute; - top: 11rpx; - left: 50%; - right: -50%; - display: inline-block; - height: 1rpx; - background: var(--nut-steps-base-line-color, #909ca4); -} .nut-step-icon { position: relative; display: -ms-flexbox; @@ -4344,255 +4192,62 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-step-icon .nut-icon { - width: var(--nut-steps-base-icon-font-size, 13rpx); - height: var(--nut-steps-base-icon-font-size, 13rpx); -} -.nut-step-icon.is-icon { - border-radius: 50%; - border-width: 1rpx; - border-style: solid; -} -.nut-step-main { - display: inline-block; - padding-left: 10%; - padding-right: 10%; - text-align: center; -} -.nut-step-title { - display: block; - margin-bottom: var(--nut-steps-base-title-margin-bottom, 10rpx); - font-size: var(--nut-steps-base-title-font-size, 14rpx); - color: var(--nut-steps-base-title-color, #909ca4); -} -.nut-step-content { - display: block; - font-size: var(--nut-steps-base-content-font-size, 14rpx); - color: var(--nut-steps-base-content-color, #666); -} -.nut-step:last-child .nut-step-line { - display: none; -} -.nut-step.nut-step-finish .nut-step-head { - color: var(--nut-steps-finish-head-color, var(--nut-primary-color, #fa2c19)); - border-color: var(--nut-steps-finish-head-border-color, var(--nut-primary-color, #fa2c19)); -} -.nut-step.nut-step-finish .nut-step-icon.is-icon { - background-color: var(--nut-steps-finish-icon-text-color, var(--nut-white, #fff)); -} -.nut-step.nut-step-finish .nut-step-line { - background: var(--nut-steps-finish-line-background, var(--nut-primary-color, #fa2c19)); +.nut-steps-vertical .nut-step { + display: -ms-flexbox; + display: flex; + height: 33.34%; } -.nut-step.nut-step-finish .nut-step-title { - color: var(--nut-steps-finish-title-color, var(--nut-primary-color, #fa2c19)); +.nut-swiper { + position: relative; + display: -ms-flexbox; + display: flex; + transition-property: transform; + box-sizing: content-box; + overflow: hidden; + cursor: grab; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } -.nut-step.nut-step-process .nut-step-head { - color: var(--nut-steps-process-head-color, var(--nut-white, #fff)); - border-color: var(--nut-steps-process-head-border-color, var(--nut-primary-color, #fa2c19)); +.nut-swiper-inner { + display: -ms-flexbox; + display: flex; + height: 100%; } -.nut-step.nut-step-process .nut-step-icon.is-icon { - background-color: var(--nut-steps-process-icon-text-color, var(--nut-primary-color, #fa2c19)); +.nut-swiper-vertical { + -ms-flex-direction: column; + flex-direction: column; } -.nut-step.nut-step-process .nut-step-title { - color: var(--nut-steps-process-title-color, var(--nut-primary-color, #fa2c19)); +.nut-swiper-pagination { + display: -ms-flexbox; + display: flex; + position: absolute; + left: 50%; + bottom: 12rpx; + -ms-transform: translate(-50%); + transform: translate(-50%); } -.nut-step.nut-step-wait .nut-step-head { - color: var(--nut-steps-wait-head-color, #909ca4); - border-color: var(--nut-steps-wait-head-border-color, #909ca4); +.nut-swiper-pagination-vertical { + top: 50%; + left: 12rpx; + bottom: auto; + -ms-flex-direction: column; + flex-direction: column; + -ms-transform: translateY(-50%); + transform: translateY(-50%); } -.nut-step.nut-step-wait .nut-step-icon.is-icon { - background-color: var(--nut-steps-wait-icon-bg-color, #959fb1); - color: var(--nut-steps-wait-icon-text-color, #ffffff); +.nut-video { + width: 100%; + height: 100%; + position: relative; + display: -ms-flexbox; + display: flex; } -.nut-step.nut-step-wait .nut-step-icon.is-icon .nut-icon { - color: var(--nut-steps-wait-icon-color, var(--nut-white, #fff)); -} -.nut-step.nut-step-wait .nut-step-content { - color: var(--nut-steps-wait-content-color, #909ca4); -} -.nut-steps-horizontal.nut-steps-dot .nut-step-head { - margin-top: 7rpx; - margin-bottom: 0; -} -.nut-steps-horizontal.nut-steps-dot .nut-step-line { - top: 50%; - bottom: -50%; -} -.nut-steps-horizontal.nut-steps-dot .nut-step-icon { - width: 8rpx; - height: 8rpx; - background: var(--nut-primary-color, #fa2c19); - border-radius: 50%; - box-sizing: content-box; -} -.nut-steps-horizontal.nut-steps-dot .nut-step-wait .nut-step-icon { - background-color: var(--nut-steps-wait-icon-bg-color, #959fb1); -} -.nut-steps-horizontal.nut-steps-dot .nut-step-wait .nut-step-content { - color: var(--nut-steps-wait-content-color, #909ca4); -} -.nut-steps-horizontal.nut-steps-dot .nut-step-finish .nut-step-icon { - background-color: var(--nut-primary-color, #fa2c19); -} -.nut-steps-horizontal.nut-steps-dot .nut-step-process .nut-step-icon { - position: relative; - background-color: var(--nut-primary-color, #fa2c19); -} -.nut-steps-horizontal.nut-steps-dot .nut-step-process .nut-step-icon::before { - content: ''; - display: inline-block; - position: absolute; - left: 50%; - top: 50%; - margin-left: -7rpx; - margin-top: -7rpx; - width: 14rpx; - height: 14rpx; - background-color: var(--nut-primary-color-end, #fa6419); - border-radius: 50%; - opacity: 0.23; -} -.nut-steps-vertical .nut-step { - display: -ms-flexbox; - display: flex; - height: 33.34%; -} -.nut-steps-vertical .nut-step-line { - position: absolute; - display: inline-block; - width: 1rpx; - height: 100%; - background: #909ca4; -} -.nut-steps-vertical .nut-step-main { - display: inline-block; - padding-left: 6%; - text-align: left; -} -.nut-steps-vertical.nut-steps-dot .nut-step-head { - margin-top: 7rpx; - margin-bottom: 0; -} -.nut-steps-vertical.nut-steps-dot .nut-step-line { - top: 7rpx; - left: 50%; - right: -50%; -} -.nut-steps-vertical.nut-steps-dot .nut-step-icon { - width: 8rpx; - height: 8rpx; - background: var(--nut-primary-color, #fa2c19); - border-radius: 50%; - box-sizing: content-box; -} -.nut-steps-vertical.nut-steps-dot .nut-step-wait .nut-step-icon { - background-color: var(--nut-steps-wait-icon-bg-color, #959fb1); -} -.nut-steps-vertical.nut-steps-dot .nut-step-wait .nut-step-content { - color: var(--nut-steps-wait-content-color, #909ca4); -} -.nut-steps-vertical.nut-steps-dot .nut-step-finish .nut-step-icon { - background-color: var(--nut-primary-color, #fa2c19); -} -.nut-steps-vertical.nut-steps-dot .nut-step-process .nut-step-icon { - position: relative; - background-color: var(--nut-primary-color, #fa2c19); -} -.nut-steps-vertical.nut-steps-dot .nut-step-process .nut-step-icon::before { - content: ''; - display: inline-block; - position: absolute; - left: 50%; - top: 50%; - margin-left: -7rpx; - margin-top: -7rpx; - width: 14rpx; - height: 14rpx; - background-color: var(--nut-primary-color-end, #fa6419); - border-radius: 50%; - opacity: 0.23; -} -.nut-swiper { - position: relative; - display: -ms-flexbox; - display: flex; - transition-property: transform; - box-sizing: content-box; - overflow: hidden; - cursor: grab; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.nut-swiper-inner { - display: -ms-flexbox; - display: flex; - height: 100%; -} -.nut-swiper-vertical { - -ms-flex-direction: column; - flex-direction: column; -} -.nut-swiper-pagination { - display: -ms-flexbox; - display: flex; - position: absolute; - left: 50%; - bottom: 12rpx; - -ms-transform: translate(-50%); - transform: translate(-50%); -} -.nut-swiper-pagination .h5-i { - width: var(--nut-swiper-pagination-item-width, 8rpx); - height: var(--nut-swiper-pagination-item-height, 3rpx); - margin-right: var(--nut-swiper-pagination-item-margin-right, 7rpx); - border-radius: var(--nut-swiper-pagination-item-border-radius, 2rpx); -} -.nut-swiper-pagination .h5-i:last-child { - margin-right: 0; -} -.nut-swiper-pagination-vertical { - top: 50%; - left: 12rpx; - bottom: auto; - -ms-flex-direction: column; - flex-direction: column; - -ms-transform: translateY(-50%); - transform: translateY(-50%); -} -.nut-swiper-pagination-vertical .h5-i { - margin-bottom: 5rpx; -} -.nut-swiper-item { - height: 100%; -} -.nut-video { - width: 100%; - height: 100%; - position: relative; - display: -ms-flexbox; - display: flex; -} -.nut-video-player { - width: 100%; - background: #000; -} -.nut-video .nut-video-mask { - width: 100%; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 60rpx; -} -.nut-video .nut-video-mask.custom-touch { - bottom: 0; -} -.nut-video .h5-video { - width: 100%; - height: 100%; - -o-object-fit: fill; - object-fit: fill; +.nut-video .h5-video { + width: 100%; + height: 100%; + -o-object-fit: fill; + object-fit: fill; } .nut-video-play-btn { width: 80rpx; @@ -4622,15 +4277,6 @@ wx-button { font-size: 30rpx; border-radius: 20%; } -.nut-video-play-btn::before { - content: ''; - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA+CAMAAABTPci/AAAAb1BMVEUAAAACAgL///////////////////////////////////+urq4uLi7+/v6zs7OLi4v9/f3Hx8dubm79/f39/f3z8/P5+fn9/f38/Pz4+Pipqans7Oz8/Pz29vbx8fHi4uLX19fq6urg4ODT09P5+flRzniSAAAAJXRSTlMAA6GcmZWlno+RjBYHixgNhRsJgn9PbYh7XhNBdFlHMyc6LCNmyQGEbAAAAdlJREFUSMe11tly4jAQRuHgDdnBYBazw8xk8v7POMI/1Jm0iORUKs31Vy0dMOWX78xk8nWi+SKZrVYzqfHo9Xo4nOZiY83yvW2a9vxnwRmTZta3fhq3O/xlWQodzwNqGre/HlmWuNFeyKtm+7aSSqNG4/x0/VJnTKENxtWOICkkI9YQJIEwdV2uFSSOjPEfBYkjh7kpP+3FBrEIMuzR7AmSRN5oivpdQeJI13mYsig6G8Qi1sgMU55/KUiI1uZCoCJ3BDGo9iYgQnm+IYhBWsN1MPm0VJAADYbBDGra9gQBsccYoSxXEIuCNRiPsqxUkE8Q5IGksvXpFgRkiRBkmCrf/vbLHqgryWYXyUhVrvfLLIobr7KL7/ERPT8axk/xBrImRNV9riBdKG1CNMJwvHlnjAimuiOFABURw6Ka5PNdYfc8JVO+3AEhMPZoO/2MQJE9d1Qc+MGCME9ItufRAMXv4/rXCQYkYvYQQMQi2wDVnRasAbVk+9+YADHEGhMgRKGxAUIkYp44AqSRDAE+RxAhAiQQhAARNDWpHX/DccSenAAR1HzIRoCxqCoJkEDZwxAghY6buyBAGs0uMgQYo5bnW4A1AcapfrvtCTD2FXuxEPm5l3nYyw/PP4V4LkWCqx4LAAAAAElFTkSuQmCC) - no-repeat center; - width: 30rpx; - height: 30rpx; - display: inline-block; - background-size: contain; -} .nut-video-controller { position: absolute; display: -ms-flexbox; @@ -4646,39 +4292,6 @@ wx-button { opacity: 0; transition: all 1s; } -.nut-video-controller.nut-video-controller--show { - opacity: 1; -} -.nut-video-controller.nut-video-controller--hide { - opacity: 0; -} -.nut-video-controller .nut-video-controller__playbtn { - width: 18rpx; - height: 18rpx; - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) - 1x - ); - background-repeat: no-repeat; - background-position: center; - margin: 0 10rpx; -} -.nut-video-controller .nut-video-controller__playbtn.puase { - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik02IDE5aDRWNUg2djE0em04LTE0djE0aDRWNWgtNHoiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik02IDE5aDRWNUg2djE0em04LTE0djE0aDRWNWgtNHoiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-controller .nut-video-controller__total, -.nut-video-controller .nut-video-controller__now { - color: #fff; - padding: 0 5rpx; - font-size: 10rpx; -} .nut-video-controller .nut-video-controller__progress { position: relative; display: inline-block; @@ -4689,89 +4302,21 @@ wx-button { -ms-flex: 1; flex: 1; } -.nut-video-controller .nut-video-controller__progress .nut-video-controller__progress-value { +.nut-video-error { position: absolute; - top: 50%; width: 100%; - height: 2rpx; - margin-top: -1.6rpx; - background: rgba(255, 255, 255, 0.50196); + height: 100%; + z-index: 111111; + background: #000; + color: #fff; + text-align: center; } -.nut-video-controller .nut-video-controller__progress .buffered { - background: rgba(255, 255, 255, 0.8); - height: 2rpx; +.nut-video-error .h5-p { + color: #fff; } -.nut-video-controller .nut-video-controller__progress .nut-video-controller__ball { - width: 10rpx; - height: 10rpx; - position: absolute; - top: 50%; - left: 0; - border-radius: 50%; -} -.nut-video-controller .nut-video-controller__progress .nut-video-controller__ball .h5-div { - width: 10rpx; - height: 10rpx; - background: #fff; - box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.2); - margin: 0 -5rpx; - border-radius: 50%; -} -.nut-video-controller .nut-video-controller__full { - width: 40rpx; - height: 35rpx; - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik03IDE0SDV2NWg1di0ySDd2LTN6bS0yLTRoMlY3aDNWNUg1djV6bTEyIDdoLTN2Mmg1di01aC0ydjN6TTE0IDV2MmgzdjNoMlY1aC01eiIvPgo8L3N2Zz4K); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik03IDE0SDV2NWg1di0ySDd2LTN6bS0yLTRoMlY3aDNWNUg1djV6bTEyIDdoLTN2Mmg1di01aC0ydjN6TTE0IDV2MmgzdjNoMlY1aC01eiIvPgo8L3N2Zz4K) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-controller .nut-video-controller__full.full2 { - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik01IDE2aDN2M2gydi01SDV2MnptMy04SDV2Mmg1VjVIOHYzem02IDExaDJ2LTNoM3YtMmgtNXY1em0yLTExVjVoLTJ2NWg1VjhoLTN6Ii8+Cjwvc3ZnPgo=); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik01IDE2aDN2M2gydi01SDV2MnptMy04SDV2Mmg1VjVIOHYzem02IDExaDJ2LTNoM3YtMmgtNXY1em0yLTExVjVoLTJ2NWg1VjhoLTN6Ii8+Cjwvc3ZnPgo=) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-controller .nut-video-controller__volume { - width: 30rpx; - height: 30rpx; - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-controller .nut-video-controller__volume.muted { - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNi41IDEyYzAtMS43Ny0xLjAyLTMuMjktMi41LTQuMDN2Mi4yMWwyLjQ1IDIuNDVjLjAzLS4yLjA1LS40MS4wNS0uNjN6bTIuNSAwYzAgLjk0LS4yIDEuODItLjU0IDIuNjRsMS41MSAxLjUxQzIwLjYzIDE0LjkxIDIxIDEzLjUgMjEgMTJjMC00LjI4LTIuOTktNy44Ni03LTguNzd2Mi4wNmMyLjg5Ljg2IDUgMy41NCA1IDYuNzF6TTQuMjcgM0wzIDQuMjcgNy43MyA5SDN2Nmg0bDUgNXYtNi43M2w0LjI1IDQuMjVjLS42Ny41Mi0xLjQyLjkzLTIuMjUgMS4xOHYyLjA2YzEuMzgtLjMxIDIuNjMtLjk1IDMuNjktMS44MUwxOS43MyAyMSAyMSAxOS43M2wtOS05TDQuMjcgM3pNMTIgNEw5LjkxIDYuMDkgMTIgOC4xOFY0eiIvPgogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4K); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNi41IDEyYzAtMS43Ny0xLjAyLTMuMjktMi41LTQuMDN2Mi4yMWwyLjQ1IDIuNDVjLjAzLS4yLjA1LS40MS4wNS0uNjN6bTIuNSAwYzAgLjk0LS4yIDEuODItLjU0IDIuNjRsMS41MSAxLjUxQzIwLjYzIDE0LjkxIDIxIDEzLjUgMjEgMTJjMC00LjI4LTIuOTktNy44Ni03LTguNzd2Mi4wNmMyLjg5Ljg2IDUgMy41NCA1IDYuNzF6TTQuMjcgM0wzIDQuMjcgNy43MyA5SDN2Nmg0bDUgNXYtNi43M2w0LjI1IDQuMjVjLS42Ny41Mi0xLjQyLjkzLTIuMjUgMS4xOHYyLjA2YzEuMzgtLjMxIDIuNjMtLjk1IDMuNjktMS44MUwxOS43MyAyMSAyMSAxOS43M2wtOS05TDQuMjcgM3pNMTIgNEw5LjkxIDYuMDkgMTIgOC4xOFY0eiIvPgogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4K) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-error { - position: absolute; - width: 100%; - height: 100%; - z-index: 111111; - background: #000; - color: #fff; - text-align: center; -} -.nut-video-error .h5-p { - color: #fff; -} -.nut-image-preview { - height: 100%; - width: 100%; +.nut-image-preview { + height: 100%; + width: 100%; } .nut-image-preview-swiper { height: 100%; @@ -5489,9 +5034,6 @@ wx-button { transform: scale(0); animation: twinkle 2s ease-out infinite; } -.nut-animate .nut-animate-twinkle::after { - animation-delay: 0.4s; -} @keyframes twinkle { 0% { transform: scale(0); @@ -5777,12 +5319,6 @@ wx-button { transform: scale(0.8); opacity: 0; } -.nut-popover-enter-active { - transition-timing-function: ease-out; -} -.nut-popover-leave-active { - transition-timing-function: ease-in; -} .nut-popover-content-bg { position: fixed; height: 100%; @@ -7204,16 +6740,6 @@ wx-button { align-items: center; box-sizing: border-box; } -.nut-address-list-swipe__mask-set, -.nut-address-list-general__mask-set { - color: var(--nut-white, #fff); - background-color: var(--nut-addresslist-set-bg, #f5a623); -} -.nut-address-list-swipe__mask-del, -.nut-address-list-general__mask-del { - color: var(--nut-white, #fff); - background-color: var(--nut-addresslist-del-bg, #e1251b); -} .nut-address-list-general:last-child { border-bottom: none; } @@ -7326,12 +6852,6 @@ wx-button { align-items: center; transition: all 0.3s; } -.nut-category__cateListItemChecked { - background: var(--nut-category-list-item-checked-color, rgb(255, 255, 255)); - font-weight: 500; - transition: all 0.3s; - position: relative; -} .nut-category__cateListItemChecked::before { position: absolute; content: ''; @@ -8478,10 +7998,58 @@ wx-button { .nut-cropper-popup__highlight .highlight__round { border-radius: 50%; } +.nut-image .nut-img-loading, +.nut-image .nut-img-error { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: #f7f8fa; +} +.nut-row-flex { + display: flex; +} +.nut-row-justify-center { + justify-content: center; +} +.nut-row-justify-end { + justify-content: flex-end; +} +.nut-row-justify-space-between { + justify-content: space-between; + align-items: center; +} +.nut-row-justify-space-around { + justify-content: space-around; +} +.nut-row-justify-space-evenly { + justify-content: space-evenly; +} +.nut-row-align-flex-start { + align-items: flex-start; +} +.nut-row-align-center { + align-items: center; +} +.nut-row-align-flex-end { + align-items: flex-end; +} +.nut-row-flex-wrap { + flex-wrap: wrap; +} +.nut-row-flex-nowrap { + flex-wrap: nowrap; +} +.nut-row-flex-reverse { + flex-wrap: wrap-reverse; +} .nut-divider { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; font-size: var(--nut-divider-text-font-size, var(--nut-font-size-2, 14rpx)); color: var(--nut-divider-text-color, #909ca4); @@ -8493,47 +8061,19 @@ wx-button { border: var(--nut-divider-line-height, 2rpx) solid currentColor; border-width: var(--nut-divider-line-height, 2rpx) 0 0; height: var(--nut-divider-line-height, 2rpx); - -ms-flex: 1; flex: 1; } -.nut-divider.nut-divider-center::before, -.nut-divider.nut-divider-left::before, -.nut-divider.nut-divider-right::before { - margin-right: var(--nut-divider-before-margin-right, 16rpx); -} -.nut-divider.nut-divider-center::after, -.nut-divider.nut-divider-left::after, -.nut-divider.nut-divider-right::after { - margin-left: var(--nut-divider-after-margin-left, 16rpx); -} .nut-divider.nut-divider-hairline::before, .nut-divider.nut-divider-hairline::after { - -ms-transform: scaleY(0.5); transform: scaleY(0.5); } -.nut-divider.nut-divider-vertical { - position: relative; - top: var(--nut-divider-vertical-top, 2rpx); - display: inline-block; - height: var(--nut-divider-vertical-height, 12rpx); - border-left: 1rpx solid var(--nut-divider-vertical-border-left, rgba(0, 0, 0, 0.06)); - margin: var(--nut-divider-vertical-margin, 0 8rpx); -} -.nut-grid--border { - border-top-width: 1rpx; - border-left-width: 1rpx; -} -.nut-grid-item__text { - color: var(--nut-grid-item-text-color, var(--nut-title-color2, #666666)); - font-size: var(--nut-grid-item-text-font-size, var(--nut-font-size-1, 12rpx)); - line-height: 1.5; - word-break: break-all; - margin: var(--nut-grid-item-text-margin, 8rpx) 0 0 0; +.nut-grid { + display: flex; + flex-wrap: wrap; + border: 0 solid var(--nut-grid-border-color, #f5f6f7); } .nut-grid-item__content { - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; box-sizing: border-box; height: 100%; @@ -8541,22 +8081,18 @@ wx-button { background: var(--nut-grid-item-content-bg-color, var(--nut-white, #fff)); border: 0 solid var(--nut-grid-border-color, #f5f6f7); } -.nut-grid-item__content--border { - border-right-width: 1rpx; - border-bottom-width: 1rpx; -} -.nut-grid-item__content--surround { - border-top-width: 1rpx; - border-left-width: 1rpx; +.nut-grid-item__content--center { + align-items: center; + justify-content: center; } -.nut-grid-item__content--reverse .nut-grid-item__text { - margin: 0 0 var(--nut-grid-item-text-margin, 8rpx); +.nut-grid-item__content--reverse { + flex-direction: column-reverse; } -.nut-grid-item__content--horizontal .nut-grid-item__text { - margin: 0 0 0 var(--nut-grid-item-text-margin, 8rpx); +.nut-grid-item__content--horizontal { + flex-direction: row; } -.nut-grid-item__content--horizontal.nut-grid-item__content--reverse .nut-grid-item__text { - margin: 0 var(--nut-grid-item-text-margin, 8rpx) 0 0; +.nut-grid-item__content--horizontal.nut-grid-item__content--reverse { + flex-direction: row-reverse; } .nut-grid-item__content--clickable::before { position: absolute; @@ -8568,30 +8104,66 @@ wx-button { border: inherit; border-color: var(--nut-black, #000); border-radius: inherit; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; content: ' '; } -.nut-space-vertical > .nut-space-item:not(:last-child) { - margin-bottom: var(--nut-space-gap, 8rpx); +.nut-space { + display: inline-flex; } -.nut-space-horizontal > .nut-space-item:not(:last-child) { - margin-right: var(--nut-space-gap, 8rpx); +.nut-space-item { + flex: none; +} +.nut-space-vertical { + flex-direction: column; +} +.nut-space-horizontal { + flex-direction: row; } .nut-space-horizontal.nut-space-wrap { - -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: calc(var(--nut-space-gap, 8rpx) * -1); } -.nut-space-horizontal.nut-space-wrap > .nut-space-item { - padding-bottom: var(--nut-space-gap, 8rpx); +.nut-space-align-center { + align-items: center; +} +.nut-space-align-start { + align-items: flex-start; +} +.nut-space-align-end { + align-items: flex-end; +} +.nut-space-align-baseline { + align-items: baseline; +} +.nut-space-justify-center { + justify-content: center; +} +.nut-space-justify-start { + justify-content: flex-start; +} +.nut-space-justify-end { + justify-content: flex-end; +} +.nut-space-justify-between { + justify-content: space-between; +} +.nut-space-justify-around { + justify-content: space-around; +} +.nut-space-justify-evenly { + justify-content: space-evenly; +} +.nut-space-justify-stretch { + justify-content: stretch; +} +.nut-space-fill { + display: flex; + width: 100%; } .nut-navbar { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; height: var(--nut-navbar-height, 44rpx); box-sizing: border-box; @@ -8602,13 +8174,6 @@ wx-button { color: var(--nut-navbar-color, var(--nut-title-color2, #666666)); overflow: hidden; } -.nut-navbar--border { - border-bottom: 1rpx solid #eee; -} -.nut-navbar--fixed.nut-navbar--safe-area-inset-top { - height: calc(var(--nut-navbar-height, 44rpx) + constant(safe-area-inset-top)); - height: calc(var(--nut-navbar-height, 44rpx) + env(safe-area-inset-top)); -} .nut-navbar--clickable::before { position: absolute; content: ' '; @@ -8620,34 +8185,23 @@ wx-button { border: inherit; border-color: var(--nut-black, #000); border-radius: inherit; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } -.nut-navbar__title .title { - min-width: var(--nut-navbar-title-width, 100rpx); - font-size: var(--nut-navbar-title-font, var(--nut-font-size-2, 14rpx)); - font-weight: var(--nut-navbar-title-font-weight, 0); - color: var(--nut-navbar-title-font-color, var(--nut-navbar-color, var(--nut-title-color2, #666666))); - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 1; - overflow: hidden; -} -.nut-navbar__title.icon .icon { - margin: var(--nut-navbar-title-icon-margin, 0 0 0 13rpx); -} -.nut-navbar__title-desc { - font-size: var(--nut-cell-title-desc-font, var(--nut-font-size-1, 12rpx)); +.nut-navbar__title { + max-width: 60%; + margin: 0 auto; + text-align: center; + display: flex; + justify-content: center; + align-items: center; } .nut-navbar__left { position: absolute; left: 0; font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 14rpx)); color: var(--nut-cell-desc-color, var(--nut-disable-color, #cccccc)); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; cursor: pointer; padding: 0 16rpx; @@ -8657,30 +8211,18 @@ wx-button { right: 0; font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 14rpx)); color: var(--nut-cell-desc-color, var(--nut-disable-color, #cccccc)); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; padding: 0 16rpx; cursor: pointer; } -.nut-fixed-nav { - position: fixed; - z-index: var(--nut-fixednav-index, 201); - display: inline-block; - height: 50rpx; - right: 0; -} .nut-fixed-nav.active .nut-icon { - -ms-transform: rotate(180deg); transform: rotate(180deg); } .nut-fixed-nav.active .nut-fixed-nav__list { - -ms-transform: translate(0) !important; transform: translate(0) !important; } .nut-fixed-nav.active.left .nut-icon { - -ms-transform: rotate(0) !important; transform: rotate(0) !important; } .nut-fixed-nav__btn { @@ -8694,11 +8236,8 @@ wx-button { background: var(--nut-fixednav-btn-bg, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); border-radius: 45rpx 0 0 45rpx; box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; } .nut-fixed-nav__btn > .text { @@ -8706,31 +8245,25 @@ wx-button { line-height: 13rpx; font-size: 10rpx; color: var(--nut-fixednav-bg-color, var(--nut-white, #fff)); - -ms-flex-negative: 0; flex-shrink: 0; } .nut-fixed-nav__btn .nut-icon { margin-right: 5rpx; - -ms-transform: rotate(0); transform: rotate(0); transition: all 0.3s; } .nut-fixed-nav__list { position: absolute; right: 0; - -ms-transform: translate(100%); transform: translate(100%); transition: all 0.5s; box-sizing: border-box; margin: 0; z-index: var(--nut-fixednav-index, 201); - -ms-flex-negative: 0; flex-shrink: 0; height: 100%; background: var(--nut-fixednav-bg-color, var(--nut-white, #fff)); - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; border-radius: 25rpx 0 0 25rpx; box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.2); @@ -8741,57 +8274,25 @@ wx-button { padding: 0; margin: 0; position: relative; - -ms-flex: 1; flex: 1; height: 100%; - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; min-width: 50rpx; - -ms-flex-negative: 0; flex-shrink: 0; } -.nut-fixed-nav__list-item > .h5-img { - width: 20rpx; - height: 20rpx; - margin-bottom: 2rpx; -} -.nut-fixed-nav__list-item > .span { - font-size: 10rpx; - color: var(--nut-fixednav-font-color, var(--nut-black, #000)); -} -.nut-fixed-nav__list-item > .b { - position: absolute; - right: 0; - top: 1rpx; - height: 14rpx; - line-height: 14rpx; - font-size: 10rpx; - padding: 0 3rpx; - color: #fff; - background: var(--nut-primary-color, #fa2c19); - border-radius: 7rpx; - text-align: center; - min-width: 12rpx; -} .nut-fixed-nav.left .nut-fixed-nav__btn { - -ms-flex-direction: row-reverse; flex-direction: row-reverse; right: auto; left: 0; border-radius: 0 45rpx 45rpx 0; } .nut-fixed-nav.left .nut-fixed-nav__btn .nut-icon { - -ms-transform: rotate(180deg); transform: rotate(180deg); } .nut-fixed-nav.left .nut-fixed-nav__list { - -ms-transform: translate(-100%); transform: translate(-100%); right: auto; border-radius: 0 25rpx 25rpx 0; @@ -8800,38 +8301,35 @@ wx-button { } .nut-menu .nut-menu__bar { position: relative; - display: -ms-flexbox; display: flex; line-height: var(--nut-menu-bar-line-height, 48rpx); background-color: var(--nut-white, #fff); box-shadow: var(--nut-menu-bar-box-shadow, 0 2rpx 12rpx rgba(89, 89, 89, 0.12)); } .nut-menu .nut-menu__bar .nut-menu__item { - -ms-flex: 1; flex: 1; text-align: center; font-size: var(--nut-menu-item-font-size, var(--nut-font-size-2, 14rpx)); color: var(--nut-menu-item-text-color, var(--nut-title-color, #1a1a1a)); min-width: 0; } -.nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title .nut-menu__title-text { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: block; - padding-left: var(--nut-menu-title-text-padding-left, 8rpx); - padding-right: var(--nut-menu-title-text-padding-right, 8rpx); +.nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title-icon { + transition: all 0.2s linear; + display: flex; +} +.nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title { + display: flex; + align-items: center; + justify-content: center; + max-width: 100%; } .nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title.active .nut-menu__title-icon { - -ms-transform: rotate(180deg); transform: rotate(180deg); } .nut-menu-item__content { padding: var(--nut-menu-item-content-padding, 12rpx 24rpx); max-height: var(--nut-menu-item-content-max-height, 214rpx); - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; flex-wrap: wrap; } .nut-menu-item__content .nut-menu-item__option { @@ -8839,15 +8337,11 @@ wx-button { font-size: var(--nut-font-size-2, 14rpx); padding-top: var(--nut-menu-item-option-padding-top, 12rpx); padding-bottom: var(--nut-menu-item-option-padding-bottom, 12rpx); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; } .nut-menu-item__content .nut-menu-item__option .nut-menu-item__span { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; margin-right: var(--nut-menu-item-option-i-margin-right, 6rpx); } @@ -8857,85 +8351,47 @@ wx-button { border-bottom: var(--nut-tabbar-border-bottom, 1rpx solid #eee); border-top: var(--nut-tabbar-border-top, 1rpx solid #eee); width: 100%; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; box-sizing: content-box; background: var(--nut-white, #fff); height: var(--nut-tabbar-height, 50rpx); } .nut-tabbar-item { - -ms-flex: 1; flex: 1; text-align: center; text-decoration: none; color: var(--nut-primary-color, #fa2c19); height: 100%; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; } -.nut-tabbar-item_icon-box .nut-icon { - width: 20rpx; - height: 20rpx; - font-size: 20rpx; -} -.nut-tabbar-item_icon-box_tips { - position: absolute; - background: var(--nut-tabbar-active-color, var(--nut-primary-color, #fa2c19)); - border: 1rpx solid var(--nut-white, #fff); - border-radius: 7rpx; - text-align: center; - top: -2rpx; - right: -7rpx; - box-shadow: 0 0 0 1rpx var(--nut-white, #fff); - font-size: var(--nut-font-size-1, 12rpx); - color: var(--nut-white, #fff); - z-index: 1; -} -.nut-tabbar-item_icon-box_icon .h5-img { - width: 20rpx; - height: 20rpx; -} -.nut-tabbar-item_icon-box_nav-word { - font-size: var(--nut-tabbar-item-text-font-size, var(--nut-font-size-0, 10rpx)); - line-height: var(--nut-tabbar-item-text-line-height, initial); - margin-top: var(--nut-tabbar-word-margin-top, auto); - display: block; -} -.nut-tabbar-item_icon-box_big-word { - font-size: var(--nut-font-size-large, var(--nut-font-size-3, 16rpx)); +.nut-tabbar-item_icon-box { + padding: 0; line-height: 1; + display: flex; + flex-direction: column; + align-items: center; + position: relative; } .nut-pagination { - display: -ms-flexbox; display: flex; font-size: var(--nut-pagination-font-size, var(--nut-font-size-2, 14rpx)); color: var(--nut-pagination-color, var(--nut-primary-color, #fa2c19)); } -.nut-pagination-simple { - height: 39rpx; - width: 124rpx; - line-height: 39rpx; - text-align: center; +.nut-pagination-contain { + display: flex; } .nut-pagination-prev, .nut-pagination-item, .nut-pagination-next { height: 39rpx; min-width: 39rpx; - -ms-flex-negative: 0; flex-shrink: 0; box-sizing: border-box; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; background: var(--nut-white, #fff); border-radius: var(--nut-pagination-item-border-radius, 2rpx); @@ -8943,77 +8399,21 @@ wx-button { cursor: pointer; } .nut-pagination-prev, +.nut-pagination-item { + border-right: none; +} +.nut-pagination-prev, .nut-pagination-next { padding: var(--nut-pagination-prev-next-padding, 0 11rpx); } -.nut-pagination .simple-border { - border-right: var(--nut-pagination-item-border-width, 1rpx) solid var(--nut-pagination-item-border-color, #e4e7eb); -} -.nut-indicator--dot, -.nut-indicator--number { - margin: 0 4rpx; -} -.nut-indicator--dot { - display: inline-block; - vertical-align: middle; - width: var(--nut-indicator-dot-size, calc(var(--nut-indicator-size, 18rpx) / 3)); - height: var(--nut-indicator-dot-size, calc(var(--nut-indicator-size, 18rpx) / 3)); - border-radius: 50%; - background-color: var(--nut-indicator-dot-color, var(--nut-disable-color, #cccccc)); -} -.nut-indicator--number { - display: inline-block; - position: relative; - width: var(--nut-indicator-size, 18rpx); - height: var(--nut-indicator-size, 18rpx); - text-align: center; - font-size: var(--nut-indicator-number-font-size, 10rpx); - line-height: var(--nut-indicator-size, 18rpx); - color: var(--nut-indicator-color, var(--nut-white, #fff)); - vertical-align: middle; - border: 1rpx solid var(--nut-indicator-color, var(--nut-white, #fff)); - border-radius: 50%; - background-color: var(--nut-indicator-bg-color, var(--nut-primary-color, #fa2c19)); - box-shadow: 0 0 1rpx 1rpx var(--nut-indicator-bg-color, var(--nut-primary-color, #fa2c19)); -} -.nut-side-navbar-item { - height: var(--nut-sidenavbar-item-height, 40rpx); - line-height: var(--nut-sidenavbar-item-line-height, 40rpx); - display: block; - font-size: var(--nut-sidenavbar-item-font-size, 16rpx); - background-color: var(--nut-sidenavbar-item-title-bg-color, var(--nut-white, #fff)); -} -.nut-sub-side-navbar__title { - display: block; - width: var(--nut-sidenavbar-sub-title-width, 100%); - height: var(--nut-sidenavbar-sub-title-height, 40rpx); - position: relative; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - box-sizing: border-box; - border-bottom: 1rpx solid var(--nut-sidenavbar-sub-title-border-color, #f6f6f6); - color: var(--nut-sidenavbar-sub-title-text-color, var(--nut-title-color, #1a1a1a)); - font-size: var(--nut-sidenavbar-sub-title-font-size, var(--nut-font-size-large, var(--nut-font-size-3, 16rpx))); - background-color: var(--nut-sidenavbar-sub-title-bg-color, #f6f6f6); - border-radius: var(--nut-sidenavbar-sub-title-radius, 0); - border: var(--nut-sidenavbar-sub-title-border, 0); -} -.nut-sub-side-navbar__title__text { - line-height: var(--nut-sidenavbar-sub-title-text-line-height, 40rpx); - color: var(--nut-sidenavbar-sub-title-text-color, var(--nut-title-color, #1a1a1a)); -} .nut-sub-side-navbar__title__icon { position: absolute; top: 50%; right: 20rpx; - -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-searchbar { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; width: var(--nut-searchbar-width, 100%); padding: var(--nut-searchbar-padding, 9rpx 16rpx); @@ -9021,21 +8421,11 @@ wx-button { box-sizing: border-box; color: var(--nut-searchbar-input-bar-color, inherit); } -.nut-searchbar::-webkit-input-placeholder { - color: var(--nut-searchbar-input-bar-placeholder-color, inherit); -} -.nut-searchbar__search-label { - padding: 0 5rpx; - color: #323233; -} .nut-searchbar__search-input { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; width: var(--nut-searchbar-input-width, 100%); height: var(--nut-searchbar-input-height, 32rpx); - -ms-flex: 1; flex: 1; padding: var(--nut-searchbar-input-padding, 0 0 0 13rpx); border-radius: var(--nut-searchbar-input-border-radius, 16rpx); @@ -9043,41 +8433,26 @@ wx-button { background: var(--nut-searchbar-input-background, #f7f7f7); box-sizing: border-box; } -.nut-searchbar__search-input .nut-searchbar__input-inner .h5-input { - width: 100%; - height: 100%; - padding-left: 4rpx; +.nut-searchbar__search-input .nut-searchbar__input-inner { + display: flex; + position: relative; + flex: 1; + align-items: center; + overflow: hidden; +} +.nut-searchbar__search-input .nut-searchbar__input-inner .nut-searchbar__input-form { + flex: 1; + overflow: hidden; } .nut-searchbar__search-input .nut-searchbar__input-inner-icon { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; position: relative; padding: 0 7rpx; } -.nut-searchbar__search-input .nut-searchbar__input-clear { - position: relative; - z-index: 10; - padding: 0 5rpx; -} -.nut-searchbar__search-input .nut-searchbar__input-inner-icon-absolute .nut-searchbar__input-clear { - position: absolute; - z-index: 10; - left: -20rpx; -} -.nut-searchbar__search-input .nut-searchbar__iptleft-search-icon { - margin-right: 6rpx; - width: 14rpx; - height: 14rpx; -} -.nut-searchbar__search-input .nut-searchbar__iptright-search-icon { - margin-left: 5rpx; -} .nut-searchbar__search-input .nut-searchbar__input-bar { width: 100%; height: 36rpx; - -ms-flex: 1; flex: 1; padding: 0; margin: 0; @@ -9086,44 +8461,45 @@ wx-button { outline: none; font-size: 14rpx; } -.nut-searchbar__search-input .nut-searchbar__input-bar_clear { - max-width: 290rpx; -} -.nut-searchbar__search-input .nut-searchbar__input-inner-absolute .nut-searchbar__input-bar { - box-sizing: border-box; - padding-right: 20rpx; -} -.nut-searchbar__left-search-icon { - margin-right: 8rpx; +.nut-searchbar__search-icon { + display: flex; + justify-content: center; + align-items: center; } -.nut-searchbar__right-search-icon { - margin-left: 16rpx; - font-size: 14rpx; - color: var(--nut-searchbar-right-out-color, var(--nut-black, #000)); +.nut-tabs { + display: flex; + overflow: hidden; } .nut-tabs .nut-tabs__titles { - display: -ms-flexbox; display: flex; - -moz-user-select: none; - -ms-user-select: none; user-select: none; white-space: nowrap; - -ms-flex-negative: 0; flex-shrink: 0; background: var(--nut-tabs-titles-background-color, var(--nut-help-color, #f5f5f5)); border-radius: var(--nut-tabs-titles-border-radius, 0); } +.nut-tabs .nut-tabs__titles .nut-tabs__list { + width: 100%; + display: flex; + flex-shrink: 0; +} .nut-tabs .nut-tabs__titles .nut-tabs__titles-item { position: relative; font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 14rpx)); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; color: var(--nut-tabs-titles-item-color, var(--nut-title-color, #1a1a1a)); } +.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__text { + text-align: center; +} +.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__text.ellipsis { + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} .nut-tabs .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon { position: absolute; font-size: 12rpx; @@ -9140,27 +8516,46 @@ wx-button { content: ' '; bottom: 15%; left: 50%; - -ms-transform: translate(-50%); transform: translate(-50%); overflow: hidden; border-radius: var(--nut-tabs-titles-item-line-border-radius, 0); opacity: var(--nut-tabs-titles-item-line-opacity, 1); } +.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.active { + font-weight: 700; + color: var(--nut-tabs-titles-item-active-color, var(--nut-title-color, #1a1a1a)); +} .nut-tabs .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__line { content: ' '; width: var(--nut-tabs-horizontal-titles-item-active-line-width, 40rpx); height: 3rpx; background: var(--nut-tabs-horizontal-tab-line-color, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); } +.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.disabled { + color: var(--nut-disable-color, #cccccc); +} +.nut-tabs .nut-tabs__titles-left { + justify-content: flex-start; +} +.nut-tabs.horizontal { + flex-direction: column; +} .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles, .nut-tabs.horizontal > .nut-tabs__titles { - -ms-flex-direction: row; flex-direction: row; height: var(--nut-tabs-horizontal-titles-height, 46rpx); } +.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__list, +.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__list { + height: 100%; +} +.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles.scrollable, +.nut-tabs.horizontal > .nut-tabs__titles.scrollable { + overflow-x: auto; + overflow-y: hidden; +} .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item, .nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item { - -ms-flex: 1 0 auto; flex: 1 0 auto; min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50rpx); width: 0; @@ -9173,13 +8568,28 @@ wx-button { height: 100%; color: var(--nut-tabs-tab-smile-color, var(--nut-primary-color, #fa2c19)); } +.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item-left, +.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item-left { + flex: 0 0 auto; +} +.nut-tabs.vertical { + flex-direction: row; + width: 100%; +} .nut-tabs.vertical > .nut-tabs__titles { - -ms-flex-direction: column; flex-direction: column; height: auto; padding: 10rpx 0; width: var(--nut-tabs-vertical-titles-width, 100rpx); } +.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__list { + flex-direction: column; +} +.nut-tabs.vertical > .nut-tabs__titles.scrollable { + overflow-x: hidden; + overflow-y: auto; + height: auto; +} .nut-tabs.vertical > .nut-tabs__titles.scrollable .nut-tabs__titles-placeholder { height: 22rpx; } @@ -9187,17 +8597,18 @@ wx-button { min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50rpx); width: 100%; height: var(--nut-tabs-vertical-titles-item-height, 40rpx); - -ms-flex: none; flex: none; } .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item__line { bottom: none; - -ms-transform: translateY(-50%); transform: translateY(-50%); transition: height 0.3s ease; width: 0; height: 0; } +.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.active { + background-color: #fff; +} .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__line { left: 10rpx; width: 3rpx; @@ -9210,10 +8621,16 @@ wx-button { bottom: 2rpx; left: auto; width: 36rpx; - -ms-transform: rotate(320deg); transform: rotate(320deg); height: var(--nut-tabs-vertical-titles-item-active-line-height, 14rpx); } +.nut-tabs.vertical .nut-tabs__content { + flex: 1; + flex-direction: column; +} +.nut-tabs.vertical .nut-tabs__content .nut-tab-pane { + height: 100%; +} .nut-tabs__titles.large .nut-tabs__titles-item { font-size: var(--nut-tabs-titles-item-large-font-size, var(--nut-font-size-3, 16rpx)); } @@ -9223,11 +8640,23 @@ wx-button { .nut-tabs__titles.small .nut-tabs__titles-item { font-size: var(--nut-tabs-titles-item-small-font-size, var(--nut-font-size-1, 12rpx)); } +.nut-tabs__titles::-webkit-scrollbar { + display: none; + width: 0; + background: transparent; +} +.nut-tabs__titles.smile .nut-tabs__titles-item .nut-tabs__titles-item__smile { + display: none; +} .nut-tabs__titles.smile .nut-tabs__titles-item.active .nut-tabs__titles-item__smile { width: 36rpx; height: 10rpx; display: block; } +.nut-tabs__content { + display: flex; + box-sizing: border-box; +} .nut-tabs .nut-tabs__titles-item .taro { height: 46rpx; line-height: 46rpx; @@ -9236,9 +8665,11 @@ wx-button { width: auto; min-width: 10rpx; } +.nut-theme-dark .nut-tab-pane { + background: var(--nut-dark-background2, #1b1b1b); +} .nut-tab-pane { width: 100%; - -ms-flex-negative: 0; flex-shrink: 0; display: block; background-color: #fff; @@ -9248,27 +8679,25 @@ wx-button { height: 100%; word-break: break-all; } -.nut-cascader { - width: 100%; - font-size: var(--nut-cascader-font-size, var(--nut-font-size-2, 14rpx)); - line-height: var(--nut-cascader-line-height, 22rpx); +.nut-tab-pane.inactive { + overflow: visible; + height: 0; +} +.nut-theme-dark .nut-cascader__bar { + background: var(--nut-dark-background2, #1b1b1b); + color: var(--nut-dark-color, var(--nut-white, #fff)); +} +.nut-theme-dark .nut-tabs__titles { + background: var(--nut-dark-background3, #141414) !important; } .nut-cascader.nut-tabs.horizontal .nut-tabs__titles .nut-tabs__titles-item { - -ms-flex: initial; flex: initial; padding: var(--nut-cascader-tabs-item-padding, 0 10rpx); white-space: nowrap; } -.nut-cascader .nut-tabs__titles { - padding: var(--nut-cascader-tabs-item-padding, 0 10rpx); - background: #fff; -} .nut-cascader__bar { - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; padding: var(--nut-cascader-bar-padding, 24rpx 20rpx 17rpx); text-align: center; @@ -9277,19 +8706,8 @@ wx-button { color: var(--nut-cascader-bar-color, var(--nut-title-color, #1a1a1a)); font-size: var(--nut-cascader-bar-font-size, var(--nut-font-size-4, 18rpx)); } -.nut-cascader-pane { - display: block; - padding: 10rpx 0 0; - margin: 0; - width: 100%; - height: 342rpx; - overflow-y: auto; - -webkit-overflow-scrolling: touch; -} .nut-cascader-item { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; padding: var(--nut-cascader-item-padding, 10rpx 20rpx); margin: 0; @@ -9297,34 +8715,22 @@ wx-button { font-size: var(--nut-cascader-item-font-size, var(--nut-font-size-2, 14rpx)); color: var(--nut-cascader-item-color, var(--nut-title-color, #1a1a1a)); } -.nut-cascader-item__icon-check { - margin-left: 10rpx; - visibility: hidden; -} -.nut-cascader-item__icon-loading { - margin-left: 10rpx; +.nut-cascader-item__title { + flex: 1; } .nut-calendar { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex: 1; flex: 1; color: #333; font-size: 16rpx; background-color: var(--nut-white, #fff); overflow: hidden; height: 100%; - -ms-flex-direction: column; flex-direction: column; } -.nut-calendar.nut-calendar--nopop .nut-calendar__header .nut-calendar__header-title { - font-size: var(--nut-calendar-base-font, var(--nut-font-size-3, 16rpx)); -} .nut-calendar .nut-calendar__header { - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; text-align: center; padding-top: 1rpx; @@ -9344,134 +8750,68 @@ wx-button { font-size: var(--nut-calendar-sub-title-font, var(--nut-font-size-2, 14rpx)); } .nut-calendar .nut-calendar__header .nut-calendar__weekdays { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: distribute; justify-content: space-around; height: 36rpx; border-radius: 0 0 12rpx 12rpx; box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05882); } -.nut-calendar .nut-calendar__content .nut-calendar__panel .h5-div:nth-of-type(2) .nut-calendar__month-title { - padding-top: 0; +.nut-calendar .nut-calendar__header .nut-calendar__weekdays .nut-calendar__weekday.weekend { + color: var(--nut-calendar-day67-font-color, var(--nut-primary-color, #fa2c19)); } -.nut-calendar .nut-calendar__content .nut-calendar__panel .calendar-loading-tip { - height: 50rpx; - line-height: 50rpx; - text-align: center; - position: absolute; - top: -50rpx; - left: 0; - right: 0; - font-size: var(--nut-calendar-text-font, var(--nut-font-size-1, 12rpx)); - color: var(--nut-text-color, #808080); +.nut-calendar .nut-calendar__content { + flex: 1; + width: 100%; + display: block; } -.nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__month-title { - height: 23rpx; - line-height: 23rpx; - margin: 8rpx 0; - font-size: var(--nut-calendar-month-title-font-size, inherit); +.nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__month { + display: flex; + flex-direction: column; + text-align: center; } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day { float: left; width: 14.28%; height: 64rpx; font-weight: var(--nut-calendar-day-font-weight, 500); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - -ms-flex-direction: column; flex-direction: column; position: relative; } -.nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-tips--curr { - position: absolute; - bottom: 6rpx; - width: 100%; - font-size: 12rpx; - line-height: 14rpx; -} -.nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-tip { - position: absolute; - bottom: 6rpx; - width: 100%; - font-size: 12rpx; - line-height: 14rpx; - color: var(--nut-calendar-primary-color, var(--nut-primary-color, #fa2c19)); -} -.nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-tips--top { - top: 6rpx; -} -.nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-tips--bottom { - bottom: 6rpx; -} -.nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day--active { - background-color: var(--nut-calendar-primary-color, var(--nut-primary-color, #fa2c19)); - color: var(--nut-white, #fff) !important; - border-radius: var(--nut-calendar-day-active-border-radius, 0rpx); -} -.nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-value { - padding: 2rpx 0; - font-size: var(--nut-calendar-day-font, 16rpx); -} .nut-calendar .nut-calendar__footer { - display: -ms-flexbox; display: flex; height: 62rpx; width: 100%; background-color: var(--nut-white, #fff); } -.nut-calendar .nut-calendar__footer .nut-calendar__confirm { - height: 44rpx; - width: 100%; - margin: 10rpx 18rpx; - border-radius: 22rpx; - background: var( - --nut-button-primary-background-color, - linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%) - ); - color: var(--nut-white, #fff); - text-align: center; - line-height: 44rpx; -} -.nut-calendarcard { - background: var(--nut-white, #fff); - border-radius: 12rpx; - overflow: hidden; - font-size: var(--nut-calendar-base-font, var(--nut-font-size-3, 16rpx)); - color: var(--nut-black, #000); +.nut-calendarcard-header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + font-weight: 400; } .nut-calendarcard-header-left, .nut-calendarcard-header-right { - display: -ms-flexbox; display: flex; - -ms-flex-direction: row; flex-direction: row; cursor: pointer; margin: 16rpx; line-height: 1; } -.nut-calendarcard-header-left .left, -.nut-calendarcard-header-right .left { - margin-left: 8rpx; -} -.nut-calendarcard-header-left .right, -.nut-calendarcard-header-right .right { - margin-right: 8rpx; +.nut-calendarcard-days { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; } .nut-calendarcard-day { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - -ms-flex-direction: column; flex-direction: column; position: relative; width: 14.28%; @@ -9479,36 +8819,19 @@ wx-button { cursor: pointer; margin-bottom: 4rpx; text-align: center; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } -.nut-calendarcard-day-top, -.nut-calendarcard-day-bottom { - width: 100%; - height: 12rpx; - font-size: 12rpx; - line-height: 12rpx; -} -.nut-theme-dark .nut-checkbox__button--disabled { - color: var(--nut-checkbox-label-disable-color, #999); - border: 1rpx solid var(--nut-checkbox-label-disable-color, #999); -} .nut-checkbox { display: var(--nut-checkbox-display, inline-flex); vertical-align: bottom; - -ms-flex-align: center; align-items: center; margin-right: var(--nut-checkbox-margin-right, 20rpx); } -.nut-checkbox--reverse .nut-checkbox__label { - margin-right: var(--nut-checkbox-label-margin-left, 15rpx); - margin-left: 0; +.nut-checkbox--reverse { + flex-direction: row-reverse; } .nut-checkbox__button { - display: -ms-inline-flexbox; display: inline-flex; - -ms-flex-align: center; align-items: center; padding: var(--nut-checkbox-button-padding, 5rpx 18rpx); font-size: var(--nut-checkbox-button-font-size, 12rpx); @@ -9518,37 +8841,12 @@ wx-button { box-sizing: border-box; border: 1rpx solid var(--nut-checkbox-button-border-color, #f6f7f9); } -.nut-checkbox__button--active { - background: transparent; - color: var(--nut-checkbox-button-font-color-active, var(--nut-primary-color, #fa2c19)); - border: 1rpx solid var(--nut-checkbox-button-border-color-active, var(--nut-primary-color, #fa2c19)); - position: relative; -} .nut-checkbox__label { - -ms-flex: 1; flex: 1; margin-left: var(--nut-checkbox-label-margin-left, 15rpx); font-size: var(--nut-checkbox-label-font-size, 14rpx); color: var(--nut-checkbox-label-color, #1d1e1e); } -.nut-checkbox__icon { - color: var(--nut-primary-color, #fa2c19); - font-size: var(--nut-checkbox-icon-font-size, 18rpx); - transition-duration: 0.3s; - transition-property: color, border-color, background-color; -} -.nut-checkbox__icon--unchecked { - color: var(--nut-checkbox-icon-disable-color, #d6d6d6); - font-size: var(--nut-checkbox-icon-font-size, 18rpx); -} -.nut-checkbox__icon--indeterminate { - color: var(--nut-primary-color, #fa2c19); - font-size: var(--nut-checkbox-icon-font-size, 18rpx); -} -.nut-checkbox__icon--disable { - color: var(--nut-checkbox-icon-disable-color2, var(--nut-help-color, #f5f5f5)); - font-size: var(--nut-checkbox-icon-font-size, 18rpx); -} .h5-input, .h5-textarea { font: inherit; @@ -9557,15 +8855,14 @@ wx-button { position: relative; width: 100%; padding: 10rpx 25rpx; - display: -ms-flexbox; display: flex; line-height: 20rpx; background: var(--nut-white, #fff); font-size: var(--nut-input-font-size, var(--nut-font-size-2, 14rpx)); box-sizing: border-box; } -.nut-input--border { - border-bottom: 1rpx solid var(--nut-input-border-bottom, #eaf0fb); +.nut-input.center { + align-items: center; } .nut-input .input-text, .nut-input__text--readonly { @@ -9578,72 +8875,66 @@ wx-button { text-decoration: none; background: transparent; resize: none; - -ms-flex: 1; flex: 1; } .nut-input .input-text { font-size: var(--nut-input-font-size, var(--nut-font-size-2, 14rpx)); } -.nut-input__label { - width: 80rpx; - overflow: hidden; - margin-right: 6rpx; - text-align: left; +.nut-input-value { + flex: 1; + vertical-align: middle; +} +.nut-input-inner { + position: relative; + display: flex; + align-items: center; +} +.nut-input-box { + position: relative; + width: 100%; + display: flex; + flex: 1; } .nut-input-word-limit { - display: -ms-flexbox; display: flex; - -ms-flex-pack: end; justify-content: flex-end; color: gray; font-size: 12rpx; padding: 0 10rpx; } +.nut-input-left-box, +.nut-input-right-box { + display: flex; + align-items: center; +} .nut-input-right-box { margin-left: 4rpx; } .nut-input-left-box { margin-right: 4rpx; } -.nut-input-clear { - width: 16rpx; - height: 16rpx; - color: #c8c9cc; - cursor: pointer; - margin: 0 4rpx; -} -.nut-input--required::before { - position: absolute; - left: 14rpx; - color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); - content: '*'; -} -.nut-input--error::-webkit-input-placeholder { - color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); - -webkit-text-fill-color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); +.nut-input-clear-box { + height: 100%; + display: flex; + align-items: center; } -.nut-picker { - position: relative; - background: #fff; - border-radius: 5rpx; +.nut-theme-dark .nut-picker-roller-mask { + background-image: linear-gradient(180deg, #1b1b1be6, #1b1b1b66), linear-gradient(0deg, #1b1b1be6, #1b1b1b66); + background-repeat: no-repeat; + background-position: top, bottom; + z-index: 1; } .nut-picker__bar { - display: -ms-flexbox; display: flex; height: 46rpx; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: justify; justify-content: space-between; } .nut-picker__left { cursor: pointer; padding: var(--nut-picker-bar-button-padding, 0 15rpx); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; min-width: 50rpx; height: 100%; @@ -9653,17 +8944,18 @@ wx-button { .nut-picker__right { cursor: pointer; padding: var(--nut-picker-bar-button-padding, 0 15rpx); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; min-width: 50rpx; height: 100%; color: var(--nut-picker-ok-color, var(--nut-primary-color, #fa2c19)); font-size: var(--nut-picker-bar-ok-font-size, 14rpx); } +.nut-picker__column { + display: flex; + position: relative; +} .nut-picker__column::before { content: ''; position: absolute; @@ -9673,23 +8965,17 @@ wx-button { border: var(--nut-picker-item-active-line-border, 1rpx solid #eae7e7); border-left: 0; border-right: 0; - -ms-transform: scale(0.9); transform: scale(0.9); - -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-picker__columnitem { width: 0; - -ms-flex-positive: 1; flex-grow: 1; height: 100%; - -moz-user-select: none; - -ms-user-select: none; user-select: none; cursor: grab; } .nut-picker__title { - -ms-flex: 1; flex: 1; width: 100%; overflow: hidden; @@ -9708,47 +8994,14 @@ wx-button { height: var(--lineHeight); z-index: 1; transform-style: preserve-3d; - -ms-transform: translateY(-50%); transform: translateY(-50%); } -.nut-picker-roller-item { - display: block; - backface-visibility: hidden; - -moz-backface-visibility: hidden; - position: absolute; - top: 0; - width: 100%; - height: var(--nut-picker-item-height, 36rpx); - line-height: var(--nut-picker-item-height, 36rpx); - color: var(--nut-picker-item-text-color, var(--nut-title-color, #1a1a1a)); - font-size: var(--nut-picker-item-text-font-size, 14rpx); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.nut-picker-roller-item-tile, -.nut-picker-roller-item-tarotile { - display: block; - text-align: center; - width: 100%; - color: var(--nut-picker-item-text-color, var(--nut-title-color, #1a1a1a)); - font-size: var(--nut-picker-item-text-font-size, 14rpx); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} .nut-picker-roller-mask { position: absolute; width: 100%; display: block; height: 100%; - background-image: - -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.90196)), to(rgba(255, 255, 255, 0.4))), - -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.90196)), to(rgba(255, 255, 255, 0.4))); - background-image: - -webkit-linear-gradient(top, rgba(255, 255, 255, 0.90196), rgba(255, 255, 255, 0.4)), - -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.90196), rgba(255, 255, 255, 0.4)); - background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.90196), rgba(255, 255, 255, 0.4)), linear-gradient(0deg, rgba(255, 255, 255, 0.90196), rgba(255, 255, 255, 0.4)); + background-image: linear-gradient(180deg, #ffffffe6, #fff6), linear-gradient(0deg, #ffffffe6, #fff6); background-repeat: no-repeat; background-position: top, bottom; transform: translateZ(0); @@ -9764,26 +9017,8 @@ wx-button { bottom: -50%; left: -50%; outline: 1rpx solid #3a3a3c; - -ms-transform: scale(0.5); transform: scale(0.5); } -.nut-short-password-title { - line-height: 1; - font-size: var(--nut-font-size-3, 16rpx); - color: var(--nut-title-color, #1a1a1a); -} -.nut-short-password-subtitle { - display: block; - margin-top: 12rpx; - line-height: 1; - font-size: var(--nut-font-size-1, 12rpx); - color: var(--nut-text-color, #808080); -} -.nut-short-password-wrapper { - padding: 12rpx 0 10rpx; - text-align: center; - position: relative; -} .nut-short-password__list { width: 100%; height: 41rpx; @@ -9791,108 +9026,53 @@ wx-button { background: var(--nut-shortpassword-background-color, rgb(245, 245, 245)); border-radius: 4rpx; border: 1rpx solid var(--nut-shortpassword-border-color, #ddd); - display: -ms-flexbox; display: flex; z-index: 10; } -.nut-short-password__item-icon { - height: 6rpx; - width: 6rpx; - border-radius: 50%; - background: #000; - display: inline-block; +.nut-short-password__item { + flex: 1; + display: flex; + justify-content: center; + align-items: center; } .nut-short-password__message { margin-top: 9rpx; - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; width: 247rpx; } -.nut-short-password__message .nut-short-password--error { - line-height: 1; - font-size: var(--nut-font-size-0, 10rpx); - color: var(--nut-shortpassword-error, var(--nut-primary-color, #fa2c19)); -} .nut-short-password__message .nut-short-password--forget { line-height: 1; font-size: var(--nut-font-size-1, 12rpx); color: var(--nut-shortpassword-forget, rgb(128, 128, 128)); - display: -ms-flexbox; display: flex; } .nut-textarea { position: relative; width: 100%; box-sizing: border-box; - display: -ms-flexbox; display: flex; background: var(--nut-white, #fff); font-size: var(--nut-textarea-font, var(--nut-font-size-2, 14rpx)); padding: 10rpx 25rpx; } -.nut-textarea__limit { - position: absolute; - right: 15rpx; - bottom: 12rpx; - font-size: var(--nut-textarea-font, var(--nut-font-size-2, 14rpx)); - color: var(--nut-textarea-limit-color, var(--nut-text-color, #808080)); -} -.nut-textarea__textarea { - outline: none; - display: block; - box-sizing: border-box; - width: 100%; - min-width: 0; - margin: 0; - padding: 0; - font-size: var(--nut-textarea-font, var(--nut-font-size-2, 14rpx)); - color: var(--nut-textarea-text-color, var(--nut-title-color, #1a1a1a)); - text-align: left; - background-color: transparent; - border: none; - resize: none; - line-height: 20rpx; -} -.nut-textarea__textarea .taro-textarea { - font-size: 14rpx; - resize: none; -} -.nut-textarea__textarea__readonly { - padding: 5rpx 10rpx; -} -.nut-textarea__ali { - line-height: 17rpx; -} -.nut-textarea .nut-textarea__cpoyText { - position: absolute; - top: -999999rpx; - left: -999999rpx; - font-size: 14rpx; - line-height: 1.5; +.nut-uploader { + position: relative; + display: flex; + flex-wrap: wrap; } .nut-uploader__upload { position: relative; background: var(--nut-uploader-background, #f7f8fa); width: var(--nut-uploader-picture-width, 100rpx); height: var(--nut-uploader-picture-height, 100rpx); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; } -.nut-uploader__input.disabled { - cursor: not-allowed !important; -} .nut-uploader__preview { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; margin-right: 10rpx; margin-bottom: 10rpx; @@ -9905,73 +9085,30 @@ wx-button { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; } -.nut-uploader__preview__progress__msg { - color: var(--nut-white, #fff); - font-size: 12rpx; - margin-top: 6rpx; -} -.nut-uploader__preview.list { - width: 100%; - margin-right: 0; - margin-bottom: 0; - margin-top: 10rpx; -} .nut-uploader__preview-list { width: 100%; height: 32rpx; - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; position: relative; } .nut-uploader__preview-list .nut-uploader__preview-img__file__name { padding: 2rpx 4rpx; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; height: 100%; } -.nut-uploader__preview-list .nut-uploader__preview-img__file__name .file__name_tips { - margin-left: 4rpx; - padding: 0 20rpx; - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.nut-uploader__preview-list .nut-uploader__preview-img__file__del { - position: absolute; - right: 6rpx; - top: 6rpx; -} -.nut-uploader__preview-list .nut-uploader__preview-img__file__link { - position: absolute; - left: 6rpx; - top: 8rpx; -} -.nut-uploader__preview-list .nut-progress .nut-progress-outer { - height: 2rpx !important; -} .nut-uploader__preview-img { position: relative; width: var(--nut-uploader-picture-width, 100rpx); height: var(--nut-uploader-picture-height, 100rpx); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; border-radius: 6rpx; } @@ -9980,7 +9117,6 @@ wx-button { right: 0; top: 0; color: rgba(0, 0, 0, 0.6); - -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } .nut-uploader__preview-img .tips { @@ -9989,11 +9125,8 @@ wx-button { left: 0; right: 0; text-align: center; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; font-size: 12rpx; color: var(--nut-white, #fff); @@ -10005,13 +9138,15 @@ wx-button { text-overflow: ellipsis; white-space: nowrap; } -.nut-uploader__preview-img__c { - max-width: 100%; - max-height: 100%; - border-radius: 6rpx; +.nut-uploader__preview-img__file { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s; } .nut-uploader__preview-img__file__name { - display: -ms-flexbox; display: flex; width: 100%; font-size: 12rpx; @@ -10020,24 +9155,18 @@ wx-button { height: 100%; overflow: hidden; box-sizing: border-box; - -ms-flex-align: center; align-items: center; } .nut-number-keyboard { width: var(--nut-numberkeyboard-width, 100%); padding: var(--nut-numberkeyboard-padding, 0 0 22rpx 0); background-color: var(--nut-numberkeyboard-background-color, #f2f3f5); - -moz-user-select: none; - -ms-user-select: none; user-select: none; } .nut-number-keyboard .nut-number-keyboard__header { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; box-sizing: content-box; height: var(--nut-numberkeyboard-header-height, 34rpx); @@ -10045,50 +9174,33 @@ wx-button { color: var(--nut-numberkeyboard-header-color, #646566); font-size: var(--nut-numberkeyboard-header-font-size, 16rpx); } -.nut-number-keyboard .nut-number-keyboard__header .nut-number-keyboard__close { - position: absolute; - display: block; - right: 0; - padding: var(--nut-numberkeyboard-header-close-padding, 0 16rpx); - color: var(--nut-numberkeyboard-header-close-color, #576b95); - font-size: var(--nut-numberkeyboard-header-close-font-size, 14rpx); - background-color: var(--nut-numberkeyboard-header-close-background-color, transparent); - border: none; - cursor: pointer; -} .nut-number-keyboard .nut-number-keyboard__body { - display: -ms-flexbox; display: flex; padding: 6rpx 0 0 6rpx; } -.nut-number-keyboard .nut-number-keyboard__body .nut-number-keyboard__sidebar .nut-key__wrapper .nut-key { - position: absolute; - top: 0; - right: 6rpx; - bottom: 6rpx; - left: 0; - height: auto; +.nut-number-keyboard .nut-number-keyboard__body .nut-number-keyboard__keys { + display: flex; + flex: 3; + flex-wrap: wrap; } -.nut-number-keyboard .nut-number-keyboard__body .nut-number-keyboard__sidebar .nut-key__wrapper .nut-key--finish { - font-size: var(--nut-numberkeyboard-key-finish-font-size, 16rpx); - color: var(--nut-numberkeyboard-key-finish-font-size-color, #fff); - background-color: var(--nut-numberkeyboard-key-finish-background-color, #1989fa); +.nut-number-keyboard .nut-number-keyboard__body .nut-number-keyboard__sidebar { + display: flex; + flex: 1; + flex-direction: column; } .nut-key__wrapper { position: relative; - -ms-flex: 1; flex: 1; - -ms-flex-preferred-size: 33%; flex-basis: 33%; box-sizing: border-box; padding: 0 6rpx 6rpx 0; } +.nut-key__wrapper.nut-key__wrapper--wider { + flex-basis: 66%; +} .nut-key__wrapper .nut-key { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; height: var(--nut-numberkeyboard-key-height, 48rpx); font-size: var(--nut-numberkeyboard-key-font-size, 28rpx); @@ -10098,113 +9210,41 @@ wx-button { border-radius: var(--nut-numberkeyboard-key-border-radius, 8rpx); cursor: pointer; } -.nut-key__wrapper .h5-img { - width: 30rpx; - height: 24rpx; -} -.nut-number-keyboard-overlay { - background-color: rgba(0, 0, 0, 0) !important; -} -.nut-theme-dark .nut-action-sheet .nut-action-sheet__cancel { - border-top: 1rpx solid var(--nut-dark-background2, #1b1b1b); -} -.nut-theme-dark .nut-action-sheet .nut-action-sheet__title { - border-bottom: 1rpx solid var(--nut-dark-background2, #1b1b1b); -} -.nut-action-sheet .nut-action-sheet__title { - display: block; - padding: 10rpx; - margin: 0; - text-align: center; - background-color: var(--nut-white, #fff); - border-bottom: 1rpx solid var(--nut-actionsheet-light-color, #f6f6f6); - font-size: var(--nut-font-size-base, var(--nut-font-size-2, 14rpx)); - color: var(--nut-title-color, #1a1a1a); -} -.nut-action-sheet .nut-action-sheet__cancel, -.nut-action-sheet .nut-action-sheet__item { - display: block; - padding: 10rpx; - line-height: var(--nut-actionsheet-item-line-height, 24rpx); - font-size: var(--nut-actionsheet-item-font-size, var(--nut-font-size-2, 14rpx)); - color: var(--nut-actionsheet-item-font-color, var(--nut-title-color, #1a1a1a)); - text-align: center; - background-color: #fff; - border-bottom: var(--nut-actionsheet-item-border-bottom, none); - cursor: pointer; -} -.nut-action-sheet .nut-action-sheet__desc { - font-size: var(--nut-actionsheet-item-font-size, var(--nut-font-size-2, 14rpx)); - color: #999; - cursor: default; -} -.nut-action-sheet .nut-action-sheet__subdesc { - display: block; - font-size: var(--nut-actionsheet-item-subdesc-font-size, var(--nut-font-size-1, 12rpx)); - color: #999; -} -.nut-action-sheet .nut-action-sheet__cancel { - margin-top: 5rpx; - border-top: var(--nut-actionsheet-item-cancel-border-top, 1rpx solid var(--nut-actionsheet-light-color, #f6f6f6)); -} .nut-backtop.show { width: 40rpx; height: 40rpx; background: var(--nut-white, #fff); border: 1rpx solid var(--nut-backtop-border-color, #e0e0e0); border-radius: 50%; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; } .nut-drag { position: fixed; display: inline-block; z-index: 9997 !important; - width: -moz-fit-content; width: fit-content; - height: -moz-fit-content; height: fit-content; } .nut-taro-drag { display: inline-block; z-index: 9997 !important; - width: -moz-fit-content; width: fit-content; - height: -moz-fit-content; height: fit-content; } .nut-dialog { - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex-align: center; align-items: center; width: var(--nut-dialog-width, 296rpx); min-height: 156rpx; padding: 28rpx 24rpx 16rpx; box-sizing: border-box; } -.nut-dialog__header { - display: block; - text-align: center; - height: 20rpx; - font-size: 16rpx; - color: var(--nut-dialog-header-color, rgb(38, 38, 38)); - font-weight: var(--nut-dialog-header-font-weight, normal); - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} .nut-dialog__content { width: 100%; overflow: auto; - -ms-flex: 1; flex: 1; margin: 20rpx 0; max-height: 268rpx; @@ -10215,260 +9255,108 @@ wx-button { word-break: break-all; white-space: pre-wrap; } -.nut-dialog__footer.vertical .nut-button.nut-dialog__footer-ok { - margin-top: 10rpx; -} -.nut-dialog__footer .nut-button { - min-width: 100rpx; - overflow: hidden; -} -.nut-dialog__footer-ok { - max-width: 128rpx; -} -.nut-infinite-loading .nut-infinite__bottom { - display: block; +.nut-dialog__footer { + display: flex; + align-items: center; width: 100%; - height: 50rpx; - line-height: 50rpx; - font-size: var(--nut-font-size-small, var(--nut-font-size-1, 12rpx)); - color: var(--nut-infiniteloading-bottom-color, #c8c8c8); - text-align: center; + justify-content: var(--nut-dialog-footer-justify-content, space-around); } -.nut-infinite-loading .nut-infinite__bottom .nut-infinite__bottom-box__img { - margin-right: 5rpx; - width: 15rpx; - height: 15rpx; +.nut-dialog__footer.vertical { + flex-direction: column; } -.nut-infinite-loading .nut-infinite__bottom .nut-infinite__bottom-box__text { - font-size: 12rpx; - color: var(--nut-text-color, #808080); +.nut-infinite-loading .nut-infinite__bottom .nut-infinite__bottom-box { + display: flex; + align-items: center; + justify-content: center; } .nut-pull-refresh-container-topbox { position: absolute; left: 0; width: 100%; height: 50rpx; - -ms-transform: translateY(-100%); transform: translateY(-100%); text-align: center; font-size: 14rpx; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; } -.nut-pull-refresh-container-topbox-icon { - margin-right: 4rpx; - width: 16rpx; - height: 16rpx; -} -.nut-pull-refresh-container-topbox-text { - font-size: var(--nut-font-size-2, 14rpx); - color: var(--nut-text-color, #808080); -} -.nut-notify { - display: block; - width: 100%; - box-sizing: border-box; - padding: var(--nut-notify-padding, 12rpx 0); - color: var(--nut-notify-text-color, var(--nut-white, #fff)); - font-size: var(--nut-notify-font-size, 14rpx); - white-space: pre-wrap; - text-align: center; - word-wrap: break-word; - height: var(--nut-notify-height, 44rpx); - line-height: var(--nut-notify-line-height, auto); -} -.nut-switch { - cursor: pointer; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - background-color: var(--nut-primary-color, #fa2c19); - border-radius: var(--nut-switch-border-radius, 21rpx); - background-size: 100% 100%; - background-repeat: no-repeat; - background-position: center center; - -ms-flex: 0 0 auto; - flex: 0 0 auto; -} -.nut-switch .nut-icon-loading1 { - width: 12rpx; - height: 12rpx; - font-size: 12rpx; +.nut-switch { + cursor: pointer; + display: inline-flex; + align-items: center; + background-color: var(--nut-primary-color, #fa2c19); + border-radius: var(--nut-switch-border-radius, 21rpx); + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center center; + flex: 0 0 auto; } .nut-switch .nut-switch-button { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; border-radius: 50%; background: var(--nut-white, #fff); transition: transform 0.3s; } -.nut-switch .nut-switch-button .nut-switch-label { - color: var(--nut-white, #fff); - font-size: var(--nut-font-size-1, 12rpx); -} .nut-switch .nut-switch-button .nut-switch-label.open { - -ms-transform: translate(-16rpx); transform: translate(-16rpx); } .nut-switch .nut-switch-button .nut-switch-label.close { - -ms-transform: translate(16rpx); transform: translate(16rpx); } -.nut-switch.nut-switch-base { - min-width: var(--nut-switch-width, 36rpx); - height: var(--nut-switch-height, 21rpx); - line-height: var(--nut-switch-line-height, 21rpx); - overflow: hidden; -} .nut-switch.nut-switch-base .nut-switch-button { height: var(--nut-switch-inside-height, 13rpx); width: var(--nut-switch-inside-width, 13rpx); - -ms-transform: var(--nut-switch-inside-close-transform, translateX(30%)); transform: var(--nut-switch-inside-close-transform, translateX(30%)); } .nut-switch.nut-switch-base.nut-switch-open .nut-switch-button { - -ms-transform: var(--nut-switch-inside-open-transform, translateX(146%)); transform: var(--nut-switch-inside-open-transform, translateX(146%)); } -@keyframes rotation { - 0% { - } - to { - } -} -.nut-toast { - position: fixed; - left: 0; - bottom: 150rpx; - width: 100%; - text-align: center; - pointer-events: none; - z-index: 9999; - font-family: var(--nut-font-family, PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif); -} -.nut-toast-small .nut-toast-inner { - font-size: var(--nut-font-size-small, var(--nut-font-size-1, 12rpx)); -} -.nut-toast-large .nut-toast-inner { - font-size: var(--nut-font-size-large, var(--nut-font-size-3, 16rpx)); -} -.nut-toast-inner { - display: inline-block; - font-size: var(--nut-toast-text-font-size, 14rpx); - min-width: 40%; - max-width: 65%; - text-align: center; - padding: var(--nut-toast-inner-padding, 24rpx 30rpx); - word-break: break-all; - background: var(--nut-toast-inner-bg-color, rgba(0, 0, 0, 0.8)); - border-radius: var(--nut-toast-inner-border-radius, 12rpx); - color: var(--nut-toast-font-color, var(--nut-white, #fff)); -} -.nut-toast-text { - font-size: var(--nut-toast-text-font-size, 14rpx); -} -.nut-toast-text:empty { - margin-bottom: -8rpx; -} -.nut-toast-title { - font-size: var(--nut-toast-title-font-size, 16rpx); -} -.nut-toast-title:empty { - margin-bottom: -8rpx; +.nut-toast-cover { + display: flex; + align-items: center; + justify-content: center; + pointer-events: auto; + height: 100%; + background: var(--nut-toast-cover-bg-color, rgba(0, 0, 0, 0)); } .nut-toast-has-icon .nut-toast-icon-wrapper { width: 100%; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; margin-bottom: 8rpx; } .nut-toast-center { top: 50%; - -ms-transform: translateY(-50%); transform: translateY(-50%); } -.nut-toast-loading .nut-toast-icon-wrapper { - animation: rotation 2s linear infinite; -} -.nut-toast-loading .nut-toast-icon-no-animation { - animation: none; +.nut-toast-loading .nut-toast-inner { + display: inline-flex; + flex-direction: column; + justify-content: center; + align-items: center; } .nut-range-container { - display: -ms-flexbox; display: flex; position: relative; width: 100%; height: 4rpx; - -ms-flex-align: center; align-items: center; } .nut-range-container .nut-range-min, .nut-range-container .nut-range-max { font-size: var(--nut-font-size-1, 12rpx); color: var(--nut-range-tip-font-color, #333333); - -moz-user-select: none; - -ms-user-select: none; user-select: none; } .nut-range-container-vertical { height: 100%; - -ms-flex-direction: column; flex-direction: column; padding: 0 15rpx; } -.nut-range-container-vertical .nut-range { - width: 4rpx; - height: 100%; -} -.nut-range-container-vertical .nut-range-button-wrapper, -.nut-range-container-vertical .nut-range-button-wrapper-right { - position: absolute; - top: auto; - top: initial; - bottom: 0; - left: 50%; - right: auto; - right: initial; - transform: translate3d(-50%, 50%, 0); -} -.nut-range-container-vertical .nut-range-button-wrapper-left { - top: 0; - left: 50%; - right: auto; - right: initial; - transform: translate3d(-50%, -50%, 0); -} -.nut-range-container-vertical .nut-range .number { - transform: translate3d(100%, 0, 0); -} -.nut-range-container-vertical .nut-range-vertical { - margin: 10rpx 0; -} -.nut-range-container-vertical .nut-range-mark { - position: absolute; - width: 100%; - right: 50%; - overflow: visible; - font-size: 12rpx; - height: 100%; - top: auto; - top: initial; - width: 36rpx; - padding: 0; -} .nut-range-container-vertical .nut-range-mark-text { width: 20rpx; position: absolute; @@ -10477,84 +9365,20 @@ wx-button { color: #999; text-align: center; word-break: keep-all; - -moz-user-select: none; - -ms-user-select: none; user-select: none; - -ms-transform: translateY(-50%); transform: translateY(-50%); } -.nut-range-container-vertical .nut-range-tick { - position: absolute; - top: 0; - left: 30rpx; - width: 11rpx; - height: 11rpx; - margin-left: 0; - border-radius: 50%; - background-color: var(--nut-range-bg-color-tick, #fa958c); -} -.nut-range { - display: block; - position: relative; - width: 100%; - height: 4rpx; - border-radius: 2rpx; - cursor: pointer; -} -.nut-range-button { - display: block; - width: var(--nut-range-bar-btn-width, 24rpx); - height: var(--nut-range-bar-btn-height, 24rpx); - background-color: var(--nut-range-bar-btn-bg-color, var(--nut-white, #fff)); - border-radius: 50%; - box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.14902); - border: var(--nut-range-bar-btn-border, 1rpx solid var(--nut-primary-color, #fa2c19)); - outline: none; -} -.nut-range-button-wrapper, -.nut-range-button-wrapper-right { - position: absolute; - top: 50%; - right: 0; - transform: translate3d(50%, -50%, 0); - cursor: grab; - outline: none; -} -.nut-range-button-wrapper-left { - position: absolute; - top: 50%; - left: 0; - transform: translate3d(-50%, -50%, 0); - cursor: grab; - outline: none; -} .nut-range-button .number { width: 100%; height: 100%; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - -moz-user-select: none; - -ms-user-select: none; user-select: none; font-size: var(--nut-font-size-1, 12rpx); color: var(--nut-range-tip-font-color, #333333); transform: translate3d(0, -100%, 0); } -.nut-range-show-number { - margin: 0 15rpx; -} -.nut-range-mark { - position: absolute; - width: 100%; - overflow: visible; - top: 50%; - font-size: 12rpx; - padding-top: 14rpx; -} .nut-range-mark-text { position: absolute; display: inline-block; @@ -10562,46 +9386,23 @@ wx-button { color: #999; text-align: center; word-break: keep-all; - -moz-user-select: none; - -ms-user-select: none; user-select: none; - -ms-transform: translate(-50%); transform: translate(-50%); } -.nut-range-tick { - position: absolute; - top: -20rpx; - width: 11rpx; - height: 11rpx; - left: 0; - border-radius: 50%; - background-color: var(--nut-range-bg-color-tick, #fa958c); -} .nut-audio .nut-audio__progress { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; width: 100%; margin: 0 auto; padding: 10rpx 0; } .nut-audio .nut-audio__progress .nut-audio__bar { - -ms-flex: 1; flex: 1; margin: 0 10rpx; } -.nut-audio .nut-audio__progress .nut-audio__time { - min-width: 50rpx; - font-size: 12rpx; - text-align: center; -} .nut-audio .nut-audio__icon .nut-audio__icon--box { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; width: 30rpx; height: 30rpx; @@ -10613,58 +9414,50 @@ wx-button { position: absolute; left: 50%; top: 50%; - -ms-transform: translate(-15rpx); transform: translate(-15rpx); content: ''; height: 2rpx; width: 30rpx; background: var(--nut-disable-color, #cccccc); - -ms-transform: rotate(45deg); transform: rotate(45deg); - -ms-transform-origin: 8rpx -18rpx; transform-origin: 8rpx -18rpx; } -.nut-audio .audioMain { - margin-top: 30rpx; +.nut-audio-operate-group { + display: flex; + align-items: center; + justify-content: center; + margin-top: 10rpx; } -.nut-audio .nut-audio__button--custom { - width: 8rpx; - height: 8rpx; - color: #fff; - font-size: 10rpx; - line-height: 18rpx; - text-align: center; - background-color: #ee0a24; - border-radius: 100rpx; +.nut-avatar-group { + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center center; + display: flex; + position: relative; + flex: 0 0 auto; } -.nut-audio-operate-group { - display: -ms-flexbox; +.nut-progress { + width: 100%; + position: relative; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; - justify-content: center; - margin-top: 10rpx; -} -.nut-audio-operate-group .nut-audio-operate .nut-audio-operate-item { - margin: 0 5rpx; -} -.nut-avatar-group .nut-avatar { - border: 1rpx solid #fff; } .nut-progress .nut-progress-outer { - -ms-flex: 1; flex: 1; background-color: var(--nut-progress-outer-background-color, #f3f3f3); border-radius: var(--nut-progress-outer-border-radius, 12rpx); height: 10rpx; } -.nut-progress .nut-progress-outer .nut-progress-inner { - width: 30%; - height: 100%; - border-radius: var(--nut-progress-outer-border-radius, 12rpx); - background: var(--nut-progress-inner-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); - transition: all 0.4s; +.nut-progress .nut-progress-outer .nut-progress-text { + display: flex; + flex-direction: column; + justify-content: center; + color: #fff; +} +.nut-progress .nut-progress-outer .nut-progress-slot { + display: flex; + justify-content: center; + align-items: center; } .nut-progress .nut-progress-outer .nut-active::before { content: ''; @@ -10676,163 +9469,58 @@ wx-button { border-radius: var(--nut-progress-outer-border-radius, 12rpx); animation: progressActive 2s ease-in-out infinite; } -@keyframes progressActive { - 0% { - background: rgba(255, 255, 255, 0.10196); - width: 0; - } - 20% { - background: rgba(255, 255, 255, 0.50196); - width: 0; - } - to { - background: rgba(255, 255, 255, 0); - width: 100%; - } -} -.nut-progress .nut-progress-outer.nut-progress-small { - height: var(--nut-progress-small-height, 5rpx); -} -.nut-progress .nut-progress-outer.nut-progress-small .nut-progress-text { - font-size: var(--nut-progress-small-text-font-size, 7rpx); - line-height: var(--nut-progress-small-text-line-height, 10rpx); - padding: var(--nut-progress-small-text-padding, 2rpx 4rpx); - top: 50%; -} -.nut-progress .nut-progress-outer.nut-progress-base { - height: var(--nut-progress-base-height, 10rpx); -} -.nut-progress .nut-progress-outer.nut-progress-base .nut-progress-text { - font-size: var(--nut-progress-base-text-font-size, 9rpx); - line-height: var(--nut-progress-base-text-line-height, 13rpx); - padding: var(--nut-progress-base-text-padding, var(--nut-progress-insidetext-padding, 3rpx 5rpx 3rpx 6rpx)); - top: 50%; -} -.nut-progress .nut-progress-outer.nut-progress-large { - height: var(--nut-progress-large-height, 15rpx); -} -.nut-progress .nut-progress-outer.nut-progress-large .nut-progress-text { - font-size: var(--nut-progress-large-text-font-size, 13rpx); - line-height: var(--nut-progress-large-text-line-height, 18rpx); - padding: var(--nut-progress-large-text-padding, var(--nut-progress-insidetext-padding, 3rpx 5rpx 3rpx 6rpx)); - top: 50%; -} .nut-progress .nut-progress-text { padding: 0 5rpx; font-size: 13rpx; line-height: 1; min-width: 35rpx; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; } -.nut-progress .nut-progress-insidetext { - padding: var(--nut-progress-insidetext-padding, 3rpx 5rpx 3rpx 6rpx); - background: var( - --nut-progress-insidetext-background, - var(--nut-progress-inner-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)) - ); - border-radius: var(--nut-progress-insidetext-border-radius, 5rpx); - position: absolute; - transition: all 0.4s; - top: 50%; - min-width: 0rpx; -} -.nut-progress .nut-icon-success, -.nut-progress .nut-icon-fail { - width: 10rpx; - height: 10rpx; - display: inline-block; -} .nut-circle-progress__text { position: absolute; top: 50%; left: 0; box-sizing: border-box; width: 100%; - -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; color: var(--nut-circleprogress-text-color, #000000); font-size: var(--nut-circleprogress-text-size, var(--nut-font-size-3, 16rpx)); } .nut-noticebar__page { - display: -ms-flexbox; display: flex; padding: var(--nut-noticebar-box-padding, 0 16rpx); height: var(--nut-noticebar-across-height, 40rpx); font-size: var(--nut-noticebar-font-size, 14rpx); position: relative; - -ms-flex-align: center; align-items: center; background: var(--nut-noticebar-background, rgb(251, 248, 220)); color: var(--nut-noticebar-color, #d9500b); } -.nut-noticebar__page--wrapable { - height: auto; - padding: var(--nut-noticebar-wrapable-padding, 16rpx); -} -.nut-noticebar__page .nut-noticebar__page--withicon { - position: relative; - padding-right: 40rpx; -} .nut-noticebar__page .nut-noticebar__page-lefticon { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; margin: var(--nut-noticebar-lefticon-margin, 0rpx 10rpx); background-size: 100% 100%; } .nut-noticebar__page .nut-noticebar__page-righticon { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; margin: var(--nut-noticebar-righticon-margin, 0rpx 10rpx); } .nut-noticebar__page .nut-noticebar__page-wrap { - display: -ms-flexbox; display: flex; - -ms-flex: 1; flex: 1; height: var(--nut-noticebar-across-line-height, 24rpx); line-height: var(--nut-noticebar-across-line-height, 24rpx); overflow: hidden; position: relative; } -.nut-noticebar__page .play { - animation: nut-notice-bar-play linear both running; -} -.nut-noticebar__page .play-infinite { - animation: nut-notice-bar-play-infinite linear infinite both running; -} -.nut-noticebar__page .play-vertical { - animation: nut-notice-bar-play-vertical linear infinite both running; -} -@keyframes nut-notice-bar-play { - to { - transform: translate3d(-100%, 0, 0); - } -} -@keyframes nut-notice-bar-play-infinite { - to { - transform: translate(-100%); - } -} -@keyframes nut-notice-bar-play-vertical { - to { - transform: translateY(var(--nut-noticebar-across-height, 40rpx)); - } -} .nut-noticebar__vertical { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; height: var(--nut-noticebar-across-height, 40rpx); font-size: var(--nut-noticebar-font-size, 14rpx); @@ -10841,152 +9529,71 @@ wx-button { background: var(--nut-noticebar-background, rgb(251, 248, 220)); color: var(--nut-noticebar-color, #d9500b); } -.nut-noticebar__vertical .nut-noticebar__vertical-list .nut-noticebar__vertical-item { - height: var(--nut-noticebar-across-height, 40rpx); +.nut-noticebar__vertical .nut-noticebar__vertical-list { width: 100%; - text-overflow: ellipsis; - white-space: nowrap; + margin: 0; + padding: 0; + display: block; + flex: 1; overflow: hidden; } -.nut-noticebar__vertical .nut-noticebar-custom-item { - position: absolute; - top: 999999rpx; -} .nut-noticebar__vertical .go { margin: var(--nut-noticebar-righticon-margin, 0rpx 10rpx); - -ms-flex-item-align: center; align-self: center; - display: -ms-flexbox; display: flex; } .nut-empty { box-sizing: border-box; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-direction: column; flex-direction: column; - -ms-flex-pack: center; justify-content: center; padding: var(--nut-empty-padding, 32rpx 0); } -.nut-empty__box { - width: var(--nut-empty-image-size, 170rpx); - height: var(--nut-empty-image-size, 170rpx); +.nut-steps { + display: flex; } -.nut-empty__box .h5-img, -.nut-empty__box image { - width: 100%; +.nut-steps-vertical { height: 100%; + flex-flow: column; } -.nut-empty__description { - margin-top: var(--nut-empty-description-margin-top, 4rpx); - padding: var(--nut-empty-description-padding, 0 40rpx); - color: var(--nut-empty-description-color, #666666); - font-size: var(--nut-empty-description-font-size, 14rpx); - line-height: var(--nut-empty-description-line-height, 20rpx); +.nut-step { + flex-grow: 0; + flex-shrink: 0; + flex: 1; + text-align: center; + font-size: 0; } -.nut-video-play-btn::before { - content: ''; - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA+CAMAAABTPci/AAAAb1BMVEUAAAACAgL///////////////////////////////////+urq4uLi7+/v6zs7OLi4v9/f3Hx8dubm79/f39/f3z8/P5+fn9/f38/Pz4+Pipqans7Oz8/Pz29vbx8fHi4uLX19fq6urg4ODT09P5+flRzniSAAAAJXRSTlMAA6GcmZWlno+RjBYHixgNhRsJgn9PbYh7XhNBdFlHMyc6LCNmyQGEbAAAAdlJREFUSMe11tly4jAQRuHgDdnBYBazw8xk8v7POMI/1Jm0iORUKs31Vy0dMOWX78xk8nWi+SKZrVYzqfHo9Xo4nOZiY83yvW2a9vxnwRmTZta3fhq3O/xlWQodzwNqGre/HlmWuNFeyKtm+7aSSqNG4/x0/VJnTKENxtWOICkkI9YQJIEwdV2uFSSOjPEfBYkjh7kpP+3FBrEIMuzR7AmSRN5oivpdQeJI13mYsig6G8Qi1sgMU55/KUiI1uZCoCJ3BDGo9iYgQnm+IYhBWsN1MPm0VJAADYbBDGra9gQBsccYoSxXEIuCNRiPsqxUkE8Q5IGksvXpFgRkiRBkmCrf/vbLHqgryWYXyUhVrvfLLIobr7KL7/ERPT8axk/xBrImRNV9riBdKG1CNMJwvHlnjAimuiOFABURw6Ka5PNdYfc8JVO+3AEhMPZoO/2MQJE9d1Qc+MGCME9ItufRAMXv4/rXCQYkYvYQQMQi2wDVnRasAbVk+9+YADHEGhMgRKGxAUIkYp44AqSRDAE+RxAhAiQQhAARNDWpHX/DccSenAAR1HzIRoCxqCoJkEDZwxAghY6buyBAGs0uMgQYo5bnW4A1AcapfrvtCTD2FXuxEPm5l3nYyw/PP4V4LkWCqx4LAAAAAElFTkSuQmCC) - no-repeat center; - width: 30rpx; - height: 30rpx; +.nut-step-head { + position: relative; + display: flex; + justify-content: center; + margin-bottom: 12rpx; +} +.nut-step-line { + position: absolute; + top: 11rpx; + left: 50%; + right: -50%; display: inline-block; - background-size: contain; + height: 1rpx; + background: var(--nut-steps-base-line-color, #909ca4); } -.nut-video-controller .nut-video-controller__playbtn { - width: 18rpx; - height: 18rpx; - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) - 1x - ); - background-repeat: no-repeat; - background-position: center; - margin: 0 10rpx; +.nut-step-icon { + position: relative; + display: flex; + width: var(--nut-steps-base-icon-width, 25rpx); + height: var(--nut-steps-base-icon-height, 25rpx); + line-height: var(--nut-steps-base-icon-line-height, 25rpx); + font-size: var(--nut-steps-base-icon-font-size, 13rpx); + align-items: center; + justify-content: center; + z-index: 1; } -.nut-video-controller .nut-video-controller__playbtn.puase { - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik02IDE5aDRWNUg2djE0em04LTE0djE0aDRWNWgtNHoiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik02IDE5aDRWNUg2djE0em04LTE0djE0aDRWNWgtNHoiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-controller .nut-video-controller__full { - width: 40rpx; - height: 35rpx; - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik03IDE0SDV2NWg1di0ySDd2LTN6bS0yLTRoMlY3aDNWNUg1djV6bTEyIDdoLTN2Mmg1di01aC0ydjN6TTE0IDV2MmgzdjNoMlY1aC01eiIvPgo8L3N2Zz4K); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik03IDE0SDV2NWg1di0ySDd2LTN6bS0yLTRoMlY3aDNWNUg1djV6bTEyIDdoLTN2Mmg1di01aC0ydjN6TTE0IDV2MmgzdjNoMlY1aC01eiIvPgo8L3N2Zz4K) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-controller .nut-video-controller__full.full2 { - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik01IDE2aDN2M2gydi01SDV2MnptMy04SDV2Mmg1VjVIOHYzem02IDExaDJ2LTNoM3YtMmgtNXY1em0yLTExVjVoLTJ2NWg1VjhoLTN6Ii8+Cjwvc3ZnPgo=); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik01IDE2aDN2M2gydi01SDV2MnptMy04SDV2Mmg1VjVIOHYzem02IDExaDJ2LTNoM3YtMmgtNXY1em0yLTExVjVoLTJ2NWg1VjhoLTN6Ii8+Cjwvc3ZnPgo=) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-controller .nut-video-controller__volume { - width: 30rpx; - height: 30rpx; - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-controller .nut-video-controller__volume.muted { - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNi41IDEyYzAtMS43Ny0xLjAyLTMuMjktMi41LTQuMDN2Mi4yMWwyLjQ1IDIuNDVjLjAzLS4yLjA1LS40MS4wNS0uNjN6bTIuNSAwYzAgLjk0LS4yIDEuODItLjU0IDIuNjRsMS41MSAxLjUxQzIwLjYzIDE0LjkxIDIxIDEzLjUgMjEgMTJjMC00LjI4LTIuOTktNy44Ni03LTguNzd2Mi4wNmMyLjg5Ljg2IDUgMy41NCA1IDYuNzF6TTQuMjcgM0wzIDQuMjcgNy43MyA5SDN2Nmg0bDUgNXYtNi43M2w0LjI1IDQuMjVjLS42Ny41Mi0xLjQyLjkzLTIuMjUgMS4xOHYyLjA2YzEuMzgtLjMxIDIuNjMtLjk1IDMuNjktMS44MUwxOS43MyAyMSAyMSAxOS43M2wtOS05TDQuMjcgM3pNMTIgNEw5LjkxIDYuMDkgMTIgOC4xOFY0eiIvPgogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4K); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNi41IDEyYzAtMS43Ny0xLjAyLTMuMjktMi41LTQuMDN2Mi4yMWwyLjQ1IDIuNDVjLjAzLS4yLjA1LS40MS4wNS0uNjN6bTIuNSAwYzAgLjk0LS4yIDEuODItLjU0IDIuNjRsMS41MSAxLjUxQzIwLjYzIDE0LjkxIDIxIDEzLjUgMjEgMTJjMC00LjI4LTIuOTktNy44Ni03LTguNzd2Mi4wNmMyLjg5Ljg2IDUgMy41NCA1IDYuNzF6TTQuMjcgM0wzIDQuMjcgNy43MyA5SDN2Nmg0bDUgNXYtNi43M2w0LjI1IDQuMjVjLS42Ny41Mi0xLjQyLjkzLTIuMjUgMS4xOHYyLjA2YzEuMzgtLjMxIDIuNjMtLjk1IDMuNjktMS44MUwxOS43MyAyMSAyMSAxOS43M2wtOS05TDQuMjcgM3pNMTIgNEw5LjkxIDYuMDkgMTIgOC4xOFY0eiIvPgogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4K) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-step-head { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - margin-bottom: 12rpx; -} -.nut-step-line { - position: absolute; - top: 11rpx; - left: 50%; - right: -50%; - display: inline-block; - height: 1rpx; - background: var(--nut-steps-base-line-color, #909ca4); -} -.nut-step-icon { - position: relative; - display: -ms-flexbox; - display: flex; - width: var(--nut-steps-base-icon-width, 25rpx); - height: var(--nut-steps-base-icon-height, 25rpx); - line-height: var(--nut-steps-base-icon-line-height, 25rpx); - font-size: var(--nut-steps-base-icon-font-size, 13rpx); - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - z-index: 1; +.nut-step-icon-inner { + display: flex; + justify-content: center; + align-items: center; } .nut-step-icon .nut-icon { width: var(--nut-steps-base-icon-font-size, 13rpx); @@ -10997,6 +9604,12 @@ wx-button { border-width: 1rpx; border-style: solid; } +.nut-step-main { + display: inline-block; + padding-left: 10%; + padding-right: 10%; + text-align: center; +} .nut-step-title { display: block; margin-bottom: var(--nut-steps-base-title-margin-bottom, 10rpx); @@ -11008,10 +9621,54 @@ wx-button { font-size: var(--nut-steps-base-content-font-size, 14rpx); color: var(--nut-steps-base-content-color, #666); } +.nut-step:last-child .nut-step-line { + display: none; +} +.nut-step.nut-step-finish .nut-step-head { + color: var(--nut-steps-finish-head-color, var(--nut-primary-color, #fa2c19)); + border-color: var(--nut-steps-finish-head-border-color, var(--nut-primary-color, #fa2c19)); +} +.nut-step.nut-step-finish .nut-step-icon.is-icon { + background-color: var(--nut-steps-finish-icon-text-color, var(--nut-white, #fff)); +} +.nut-step.nut-step-finish .nut-step-line { + background: var(--nut-steps-finish-line-background, var(--nut-primary-color, #fa2c19)); +} +.nut-step.nut-step-finish .nut-step-title { + color: var(--nut-steps-finish-title-color, var(--nut-primary-color, #fa2c19)); +} +.nut-step.nut-step-process .nut-step-head { + color: var(--nut-steps-process-head-color, var(--nut-white, #fff)); + border-color: var(--nut-steps-process-head-border-color, var(--nut-primary-color, #fa2c19)); +} +.nut-step.nut-step-process .nut-step-icon.is-icon { + background-color: var(--nut-steps-process-icon-text-color, var(--nut-primary-color, #fa2c19)); +} +.nut-step.nut-step-process .nut-step-title { + color: var(--nut-steps-process-title-color, var(--nut-primary-color, #fa2c19)); +} +.nut-step.nut-step-wait .nut-step-head { + color: var(--nut-steps-wait-head-color, #909ca4); + border-color: var(--nut-steps-wait-head-border-color, #909ca4); +} +.nut-step.nut-step-wait .nut-step-icon.is-icon { + background-color: var(--nut-steps-wait-icon-bg-color, #959fb1); + color: var(--nut-steps-wait-icon-text-color, #ffffff); +} +.nut-step.nut-step-wait .nut-step-icon.is-icon .nut-icon { + color: var(--nut-steps-wait-icon-color, var(--nut-white, #fff)); +} +.nut-step.nut-step-wait .nut-step-content { + color: var(--nut-steps-wait-content-color, #909ca4); +} .nut-steps-horizontal.nut-steps-dot .nut-step-head { margin-top: 7rpx; margin-bottom: 0; } +.nut-steps-horizontal.nut-steps-dot .nut-step-line { + top: 50%; + bottom: -50%; +} .nut-steps-horizontal.nut-steps-dot .nut-step-icon { width: 8rpx; height: 8rpx; @@ -11019,6 +9676,19 @@ wx-button { border-radius: 50%; box-sizing: content-box; } +.nut-steps-horizontal.nut-steps-dot .nut-step-wait .nut-step-icon { + background-color: var(--nut-steps-wait-icon-bg-color, #959fb1); +} +.nut-steps-horizontal.nut-steps-dot .nut-step-wait .nut-step-content { + color: var(--nut-steps-wait-content-color, #909ca4); +} +.nut-steps-horizontal.nut-steps-dot .nut-step-finish .nut-step-icon { + background-color: var(--nut-primary-color, #fa2c19); +} +.nut-steps-horizontal.nut-steps-dot .nut-step-process .nut-step-icon { + position: relative; + background-color: var(--nut-primary-color, #fa2c19); +} .nut-steps-horizontal.nut-steps-dot .nut-step-process .nut-step-icon::before { content: ''; display: inline-block; @@ -11033,6 +9703,10 @@ wx-button { border-radius: 50%; opacity: 0.23; } +.nut-steps-vertical .nut-step { + display: flex; + height: 33.34%; +} .nut-steps-vertical .nut-step-line { position: absolute; display: inline-block; @@ -11040,6 +9714,11 @@ wx-button { height: 100%; background: #909ca4; } +.nut-steps-vertical .nut-step-main { + display: inline-block; + padding-left: 6%; + text-align: left; +} .nut-steps-vertical.nut-steps-dot .nut-step-head { margin-top: 7rpx; margin-bottom: 0; @@ -11056,6 +9735,19 @@ wx-button { border-radius: 50%; box-sizing: content-box; } +.nut-steps-vertical.nut-steps-dot .nut-step-wait .nut-step-icon { + background-color: var(--nut-steps-wait-icon-bg-color, #959fb1); +} +.nut-steps-vertical.nut-steps-dot .nut-step-wait .nut-step-content { + color: var(--nut-steps-wait-content-color, #909ca4); +} +.nut-steps-vertical.nut-steps-dot .nut-step-finish .nut-step-icon { + background-color: var(--nut-primary-color, #fa2c19); +} +.nut-steps-vertical.nut-steps-dot .nut-step-process .nut-step-icon { + position: relative; + background-color: var(--nut-primary-color, #fa2c19); +} .nut-steps-vertical.nut-steps-dot .nut-step-process .nut-step-icon::before { content: ''; display: inline-block; @@ -11072,23 +9764,25 @@ wx-button { } .nut-swiper { position: relative; - display: -ms-flexbox; display: flex; transition-property: transform; box-sizing: content-box; overflow: hidden; cursor: grab; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } +.nut-swiper-inner { + display: flex; + height: 100%; +} +.nut-swiper-vertical { + flex-direction: column; +} .nut-swiper-pagination { - display: -ms-flexbox; display: flex; position: absolute; left: 50%; bottom: 12rpx; - -ms-transform: translate(-50%); transform: translate(-50%); } .nut-swiper-pagination .h5-i { @@ -11104,14 +9798,25 @@ wx-button { top: 50%; left: 12rpx; bottom: auto; - -ms-flex-direction: column; flex-direction: column; - -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-swiper-pagination-vertical .h5-i { margin-bottom: 5rpx; } +.nut-swiper-item { + height: 100%; +} +.nut-video { + width: 100%; + height: 100%; + position: relative; + display: flex; +} +.nut-video-player { + width: 100%; + background: #000; +} .nut-video .nut-video-mask { width: 100%; position: absolute; @@ -11120,21 +9825,20 @@ wx-button { right: 0; bottom: 60rpx; } +.nut-video .nut-video-mask.custom-touch { + bottom: 0; +} .nut-video .h5-video { width: 100%; height: 100%; - -o-object-fit: fill; object-fit: fill; } .nut-video-play-btn { width: 80rpx; height: 50rpx; margin-top: -25rpx; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; border: 0; background-color: rgba(0, 0, 0, 0.45098); @@ -11165,7 +9869,6 @@ wx-button { } .nut-video-controller { position: absolute; - display: -ms-flexbox; display: flex; left: 0; bottom: 0; @@ -11173,11 +9876,16 @@ wx-button { height: 35rpx; width: 100%; z-index: 11111111; - -ms-flex-align: center; align-items: center; opacity: 0; transition: all 1s; } +.nut-video-controller.nut-video-controller--show { + opacity: 1; +} +.nut-video-controller.nut-video-controller--hide { + opacity: 0; +} .nut-video-controller .nut-video-controller__playbtn { width: 18rpx; height: 18rpx; @@ -11212,7 +9920,6 @@ wx-button { width: 100%; margin: 0 5rpx; transition: all 0.2s ease-in; - -ms-flex: 1; flex: 1; } .nut-video-controller .nut-video-controller__progress .nut-video-controller__progress-value { @@ -11283,57 +9990,36 @@ wx-button { background-repeat: no-repeat; background-position: center; } -.nut-video-error .h5-p { - color: #fff; -} -.nut-image-preview-index { - position: fixed; - z-index: 2002; - top: 50rpx; - text-align: center; - left: 0; - right: 0; - background: transparent; - color: #fff; +.nut-image-preview-img { + width: 100%; + height: 100%; + object-fit: contain; } .nut-image-preview-index .arrow { position: absolute; left: 15rpx; - -ms-transform: rotate(180deg); transform: rotate(180deg); } -.nut-image-preview-close-icon { - position: fixed; - z-index: 2002; - top: 50rpx; - right: 15rpx; -} -.nut-image-preview-close-icon-right { - right: 10rpx; -} -.nut-image-preview-close-icon-left { - left: 10rpx; +.nut-image-preview-custom-pop { + height: 100%; + background: transparent !important; + display: flex; + align-items: center; + width: 100%; } -.nut-image-preview .popup-bg { - background: rgba(0, 0, 0, 0.90196); +.nut-image-preview-swiper .nut-swiper-item { + display: flex; + align-items: center; + justify-content: center; + height: 100%; } .nut-image-preview-swiper .nut-swiper-item .nut-video .h5-video { - -o-object-fit: contain; object-fit: contain; } -.nut-countup { - display: block; - padding: 5rpx 20rpx; - color: #000; - font-weight: 700; -} .nut-badge .nut-badge__icon { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; line-height: normal; - -ms-transform: var(--nut-badge-content-transform, translate(50%, -50%)); transform: var(--nut-badge-content-transform, translate(50%, -50%)); position: absolute; background: var(--nut-badge-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); @@ -11343,92 +10029,33 @@ wx-button { z-index: var(--nut-badge-z-index, 1); } .nut-badge .nut-badge__content { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-transform: var(--nut-badge-content-transform, translate(50%, -50%)); transform: var(--nut-badge-content-transform, translate(50%, -50%)); } -.nut-badge .nut-badge__content--sup { - position: absolute; - background: var(--nut-badge-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); - padding: var(--nut-badge-padding, 0 5rpx); +.nut-avatar { + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center center; + display: inline-block; + position: relative; + flex: 0 0 auto; text-align: center; - border-radius: var(--nut-badge-border-radius, 14rpx); - font-size: var(--nut-badge-font-size, var(--nut-font-size-1, 12rpx)); - font-weight: 400; - color: var(--nut-badge-color, #fff); -} -.nut-badge .nut-badge__content--dot { - width: var(--nut-badge-dot-width, 7rpx); - height: var(--nut-badge-dot-height, 7rpx); - border-radius: var(--nut-badge-dot-border-radius, 7rpx); - padding: var(--nut-badge-dot-padding, 0rpx); -} -.nut-avatar .h5-img { - display: block; - width: 100%; - height: 100%; + vertical-align: top; } .nut-avatar .nut-icon { background-size: 100% 100%; position: absolute; top: 50%; left: 50%; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } -.nut-avatar-large { - width: var(--nut-avatar-large-width, 60rpx); - height: var(--nut-avatar-large-height, 60rpx); - line-height: var(--nut-avatar-large-height, 60rpx); -} -.nut-avatar-small { - width: var(--nut-avatar-small-width, 32rpx); - height: var(--nut-avatar-small-height, 32rpx); - line-height: var(--nut-avatar-small-height, 32rpx); -} -.nut-avatar-normal { - width: var(--nut-avatar-normal-width, 40rpx); - height: var(--nut-avatar-normal-height, 40rpx); - line-height: var(--nut-avatar-normal-height, 40rpx); -} -.nut-avatar-square { - border-radius: var(--nut-avatar-square, 5rpx); -} -.nut-skeleton .nut-skeleton-content .avatarClass { - margin-right: 20rpx; - background-color: var(--nut-skeleton-content-avatar-background-color, #efefef); -} -.nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockTitle, -.nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockLine { - width: 100%; - margin-bottom: 10rpx; - background-color: var(--nut-skeleton-content-line-background-color, #efefef); -} -.nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockTitle--round, -.nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockLine--round { - border-radius: 10rpx; -} -.nut-skeleton .nut-skeleton-animation { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1; - background: var(--nut-skeleton-animation-background-color, linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%)); - background-repeat: no-repeat; - animation: backpos 2s ease-in-out 0s infinite; +.nut-skeleton .nut-skeleton-content { + display: flex; } -@keyframes backpos { - 0% { - background-position-x: -500rpx; - } - to { - background-position-x: calc(500rpx + 100%); - } +.nut-skeleton .nut-skeleton-content .nut-skeleton-content__line { + display: flex; + flex-direction: column; } .nut-collapse-item__border .nut-collapse-item__title::after { position: absolute; @@ -11439,16 +10066,12 @@ wx-button { bottom: 0; left: 16rpx; border-bottom: 1rpx solid #ebedf0; - -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .nut-collapse-item .nut-collapse-item__title { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; - -ms-flex-align: center; align-items: center; width: 100%; overflow: hidden; @@ -11459,261 +10082,48 @@ wx-button { background-color: #fff; box-sizing: border-box; } -.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-main-value .nut-collapse-item__title-main-icon { - top: 2rpx; +.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-main { + flex: 1; } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-icon { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; color: var(--nut-collapse-item-icon-color, #666666); transition: transform 0.3s; } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-icon--expanded { - -ms-transform: rotate(-180deg); transform: rotate(-180deg); } -.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-sub { - position: absolute; - top: 50%; - right: 65rpx; - margin-top: -12rpx; - color: var(--nut-collapse-item-sub-title-color, #666666); -} -.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-label { - display: block; - color: #969799; - font-size: 12rpx; -} -.nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-wrapper__content, -.nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-extraWrapper__extraRender, -.nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-wrapper__content, -.nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-extraWrapper__extraRender { - display: block; - padding: var(--nut-collapse-wrapper-content-padding, 12rpx 26rpx); - color: var(--nut-collapse-wrapper-content-color, #666666); - font-size: var(--nut-collapse-wrapper-content-font-size, var(--nut-font-size-2, 14rpx)); - line-height: var(--nut-collapse-wrapper-content-line-height, 1.5); - background-color: var(--nut-collapse-wrapper-content-background-color, var(--nut-white, #fff)); -} -.nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-wrapper__content--empty, -.nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-wrapper__content--empty { - padding: var(--nut-collapse-wrapper-empty-content-padding, 0 26rpx); -} .nut-table { - display: -ms-flexbox; display: flex; width: 100%; - -ms-flex-direction: column; flex-direction: column; font-size: var(--nut-font-size-2, 14rpx); } -.nut-table__main__head__tr__th, -.nut-table__main__body__tr__th, -.nut-table__main__head__tr__td, -.nut-table__main__body__tr__td { - display: table-cell; - padding: var(--nut-table-cols-padding, 10rpx); -} .nut-table__main__head__tr__td__nodata, .nut-table__main__body__tr__td__nodata { - display: -ms-flexbox; display: flex; height: 50rpx; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; } -.nut-table__main__head__tr--border, -.nut-table__main__body__tr--border { - border: 1rpx solid var(--nut-table-border-color, #ececec); -} .nut-table__summary { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; height: 30rpx; padding: var(--nut-table-cols-padding, 10rpx); } .nut-table__nodata { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; height: 30rpx; padding: var(--nut-table-cols-padding, 10rpx); } -.nut-animate [class*='nut-animate-'] { - animation-duration: 0.5s; - animation-timing-function: ease-out; - animation-fill-mode: both; -} -.nut-animate .nut-animate-shake { - animation-name: shake; -} -.nut-animate .nut-animate-ripple { - animation-name: ripple; -} -.nut-animate .nut-animate-float { - position: relative; - animation-name: float-pop; -} -.nut-animate .nut-animate-breath { - animation-name: breath; - animation-duration: 2.7s; - animation-timing-function: ease-in-out; - animation-direction: alternate; -} -.nut-animate .nut-animate-slide-right { - animation-name: slide-right; -} -.nut-animate .nut-animate-slide-left { - animation-name: slide-left; -} -.nut-animate .nut-animate-slide-top { - animation-name: slide-top; -} -.nut-animate .nut-animate-slide-bottom { - animation-name: slide-bottom; -} .nut-animate .nut-animate-jump { - -ms-transform-origin: center center; transform-origin: center center; animation: jump 0.7s linear; } -.nut-animate .loop { - animation-iteration-count: infinite; -} -@keyframes shake { - 0%, - to { - transform: translate(0); - } - 10% { - transform: translate(-9rpx); - } - 20% { - transform: translate(8rpx); - } - 30% { - transform: translate(-7rpx); - } - 40% { - transform: translate(6rpx); - } - 50% { - transform: translate(-5rpx); - } - 60% { - transform: translate(4rpx); - } - 70% { - transform: translate(-3rpx); - } - 80% { - transform: translate(2rpx); - } - 90% { - transform: translate(-1rpx); - } -} -@keyframes ripple { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.1); - } -} -@keyframes breath { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.1); - } - to { - transform: scale(1); - } -} -@keyframes slide-right { - 0% { - opacity: 0; - transform: translate(100%); - } - to { - opacity: 1; - transform: translate(0); - } -} -@keyframes slide-left { - 0% { - opacity: 0; - transform: translate(-100%); - } - to { - opacity: 1; - transform: translate(0); - } -} -@keyframes slide-top { - 0% { - opacity: 0; - transform: translateY(-100%); - } - to { - opacity: 1; - transform: translateY(0); - } -} -@keyframes slide-bottom { - 0% { - opacity: 0; - transform: translateY(100%); - } - to { - opacity: 1; - transform: translateY(0); - } -} -@keyframes float-pop { - 25% { - top: 1rpx; - } - 50% { - top: 4rpx; - } - 75% { - top: 1rpx; - } -} -@keyframes jump { - 0% { - animation-timing-function: ease-in; - transform: rotate(0) translateY(0); - } - 25% { - animation-timing-function: ease-out; - transform: rotate(10deg) translateY(20rpx); - } - 50% { - animation-timing-function: ease-in; - transform: rotate(0) translateY(-10rpx); - } - 75% { - animation-timing-function: ease-out; - transform: rotate(-10deg) translateY(20rpx); - } - to { - animation-timing-function: ease-in; - transform: rotate(0) translateY(0); - } -} .nut-animate .nut-animate-twinkle::after, .nut-animate .nut-animate-twinkle::before { width: 60rpx; @@ -11727,242 +10137,113 @@ wx-button { margin-top: -15rpx; margin-right: -30rpx; z-index: 1; - -ms-transform: scale(0); transform: scale(0); animation: twinkle 2s ease-out infinite; } .nut-animate .nut-animate-twinkle::after { animation-delay: 0.4s; } -@keyframes twinkle { - 0% { - transform: scale(0); - } - 50%, - to { - transform: scale(1.4); - opacity: 0; - } -} .nut-animate .nut-animate-flicker::after { width: 100rpx; height: 60rpx; position: absolute; - left: 0; - top: 0; - opacity: 0.73; - content: ''; - background-image: -webkit-linear-gradient(344deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%); - background-image: linear-gradient(106deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%); - animation: flicker 1.5s linear infinite; - -ms-transform: skew(-20deg); - transform: skew(-20deg); - filter: blur(3rpx); -} -@keyframes flicker { - 0% { - transform: translate(-100rpx) skew(-20deg); - } - 40%, - to { - transform: translate(150rpx) skew(-20deg); - } -} -.nut-ellipsis__copy { - position: absolute; - top: -999999rpx; -} -.nut-trend-arrow { - display: inline-block; - font-size: var(--nut-trendarrow-font-size, 14rpx); -} -.nut-trend-arrow-icon-before { - margin-right: var(--nut-trendarrow-before-icon-margin, 4rpx); -} -.nut-trend-arrow-icon-after { - margin-left: var(--nut-trendarrow-before-icon-margin, 4rpx); -} -.nut-popover .nut-popover-arrow { - position: absolute; - width: 0; - height: 0; - border: 8rpx solid transparent; + left: 0; + top: 0; + opacity: 0.73; + content: ''; + background-image: linear-gradient(106deg, #e8e0ff00 24%, #e8e0ff 91%); + animation: flicker 1.5s linear infinite; + transform: skew(-20deg); + filter: blur(3rpx); } -.nut-popover .nut-popover-arrow-top { - bottom: 0; - border-top-color: var(--nut-popover-white-background-color, rgb(255, 255, 255)); - border-bottom-width: 0; - margin-bottom: -8rpx; +.nut-ellipsis { + display: flex; } -.nut-popover .nut-popover-arrow-bottom { +.nut-watermark { + position: absolute; + z-index: var(--nut-watermark-z-index, 2000); top: 0; - border-bottom-color: var(--nut-popover-white-background-color, rgb(255, 255, 255)); - border-top-width: 0; - margin-top: -8rpx; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + background-repeat: repeat; } .nut-popover .nut-popover-arrow-bottom.nut-popover-arrow--bottom { left: 50%; - -ms-transform: translate(-50%); transform: translate(-50%); } .nut-popover .nut-popover-arrow-bottom.nut-popover-arrow--bottom-start { left: 16rpx; - -ms-transform: translate(0); transform: translate(0); } .nut-popover .nut-popover-arrow-bottom.nut-popover-arrow--bottom-end { right: 16rpx; - -ms-transform: translate(0); transform: translate(0); } -.nut-popover .nut-popover-arrow-left { - right: 0; - border-left-color: var(--nut-popover-white-background-color, rgb(255, 255, 255)); - border-right-width: 0; - margin-right: -8rpx; -} .nut-popover .nut-popover-arrow-left.nut-popover-arrow--left { top: 50%; - -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-popover .nut-popover-arrow-left.nut-popover-arrow--left-start { top: 16rpx; - -ms-transform: translateY(0); transform: translateY(0); } .nut-popover .nut-popover-arrow-left.nut-popover-arrow--left-end { bottom: 16rpx; - -ms-transform: translateY(0); transform: translateY(0); } -.nut-popover .nut-popover-arrow-right { - left: 0; - border-right-color: var(--nut-popover-white-background-color, rgb(255, 255, 255)); - border-left-width: 0; - margin-left: -8rpx; -} .nut-popover .nut-popover-arrow-right.nut-popover-arrow--right { top: 50%; - -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-popover .nut-popover-arrow-right.nut-popover-arrow--right-start { top: 16rpx; - -ms-transform: translateY(0); transform: translateY(0); } .nut-popover .nut-popover-arrow-right.nut-popover-arrow--right-end { bottom: 16rpx; - -ms-transform: translateY(0); transform: translateY(0); } -.nut-popover .nut-popover-content { - position: absolute; - z-index: 9999; - background: #fff; - border-radius: 5rpx; - font-size: 14rpx; - font-weight: 400; - color: #333; - box-shadow: 0 2rpx 12rpx rgba(50, 50, 51, 0.12157); - opacity: 1; - transition: opacity 0.15s; - transition: - opacity 0.15s, - transform 0.15s; - max-height: none; - max-height: initial; - overflow-y: visible; - overflow-y: initial; -} .nut-popover .nut-popover-content .nut-popover-menu-item { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; padding: 8rpx; border-bottom: 1rpx solid var(--nut-popover-border-bottom-color, rgb(229, 229, 229)); } -.nut-popover .nut-popover-content .nut-popover-menu-item:first-child { - margin-top: 15rpx; -} -.nut-popover .nut-popover-content .nut-popover-menu-item:last-child { - margin-bottom: 2rpx; - border-bottom: none; -} -.nut-popover .nut-popover-content .nut-popover-menu-item .nut-popover-item-img { - vertical-align: top; - margin-right: 3rpx; -} .nut-popover .nut-popover-content--top .nut-popover-arrow--top { left: 50%; - -ms-transform: translate(-50%); transform: translate(-50%); } .nut-popover .nut-popover-content--top-end .nut-popover-arrow--top-end { right: 16rpx; - -ms-transform: translate(0); transform: translate(0); } .nut-popover .nut-popover-content--top-start .nut-popover-arrow--top-start { left: 16rpx; - -ms-transform: translate(0); transform: translate(0); } .nut-popover-enter-from, .nut-popover-leave-active { - -ms-transform: scale(0.8); transform: scale(0.8); opacity: 0; } -.nut-tour-mask { - position: fixed; - width: 100rpx; - height: 50rpx; - box-shadow: 0 0 0 150vh rgba(0, 0, 0, 0.50196); - border-radius: 10rpx; - z-index: 1002; -} -.nut-tour-content { - display: block; - padding: 10rpx 12rpx; - min-width: 200rpx; -} -.nut-tour-content-top-close { - width: 10rpx; - height: 10rpx; +.nut-popover-enter-active { + transition-timing-function: ease-out; } -.nut-tour-content-inner { - margin: 10rpx 0; - font-size: 14rpx; +.nut-popover-leave-active { + transition-timing-function: ease-in; } .nut-tour-content-bottom { margin-top: 10rpx; - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; } -.nut-tour-content-bottom-init { - margin-left: 10rpx; -} -.nut-tour-content-bottom-operate-btn { - display: inline-block; - border: 1rpx solid var(--nut-disable-color, #cccccc); - margin-left: 4rpx; - padding: 2rpx 4rpx; - font-size: 12rpx; - border-radius: 4rpx; - color: var(--nut-text-color, #808080); -} -.nut-elevator__list__item { - display: block; - font-size: var(--nut-elevator-list-item-font-size, 12rpx); - color: var(--nut-elevator-list-item-font-color, #333333); +.nut-tour-content-bottom-operate { + display: flex; + justify-content: flex-end; } .nut-elevator__list__item__code { - display: -ms-flexbox; display: flex; position: relative; height: var(--nut-elevator-list-item-code-height, 35rpx); @@ -11973,229 +10254,81 @@ wx-button { font-weight: var(--nut-elevator-list-item-code-font-weight, 500); box-sizing: border-box; } -.nut-elevator__list__item__code::after { - content: ' '; - width: var(--nut-elevator-list-item-code-after-width, 100%); - height: var(--nut-elevator-list-item-code-after-height, 1rpx); - position: absolute; - left: 0; - bottom: 0; - background-color: var(--nut-elevator-list-item-code-after-bg-color, #f5f5f5); -} .nut-elevator__list__item__name { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; padding: var(--nut-elevator-list-item-name-padding, 0 20rpx); height: var(--nut-elevator-list-item-name-height, 30rpx); line-height: var(--nut-elevator-list-item-name-line-height, 30rpx); } -.nut-elevator__list__fixed { - width: 100%; - position: absolute; - top: 0; - left: 0; - padding: var(--nut-elevator-list-item-code-padding, 0 20rpx); - height: var(--nut-elevator-list-item-code-height, 35rpx); - line-height: var(--nut-elevator-list-item-code-line-height, 35rpx); - font-size: var(--nut-elevator-list-item-code-font-size, 14rpx); - color: var(--nut-elevator-list-fixed-color, var(--nut-primary-color, #fa2c19)); - font-weight: var(--nut-elevator-list-item-code-font-weight, 500); - background-color: var(--nut-elevator-list-fixed-bg-color, var(--nut-white, #fff)); - box-sizing: border-box; - box-shadow: var(--nut-elevator-list-fixed-box-shadow, 0 0 10rpx #eee); - z-index: 1; -} .nut-elevator__code--current { position: var(--nut-elevator-list-item-code-current-position, absolute); right: var(--nut-elevator-list-item-code-current-right, 60rpx); top: var(--nut-elevator-list-item-code-current-top, 50%); - -ms-transform: var(--nut-elevator-list-item-code-current-transform, translateY(-50%)); transform: var(--nut-elevator-list-item-code-current-transform, translateY(-50%)); width: var(--nut-elevator-list-item-code-current-width, 45rpx); height: var(--nut-elevator-list-item-code-current-height, 45rpx); line-height: var(--nut-elevator-list-item-code-current-line-height, 45rpx); border-radius: var(--nut-elevator-list-item-code-current-border-radius, 50%); - background: var(--nut-elevator-list-item-code-current-bg-color, #fff); - box-shadow: var(--nut-elevator-list-item-code-current-box-shadow, 0 3rpx 3rpx 1rpx rgb(240, 240, 240)); - text-align: var(--nut-elevator-list-item-code-current-text-align, center); -} -.nut-elevator__bars { - position: var(--nut-elevator-list-item-bars-position, absolute); - right: var(--nut-elevator-list-item-bars-right, 8rpx); - top: var(--nut-elevator-list-item-bars-top, 50%); - -ms-transform: var(--nut-elevator-list-item-bars-transform, translateY(-50%)); - transform: var(--nut-elevator-list-item-bars-transform, translateY(-50%)); - padding: var(--nut-elevator-list-item-bars-padding, 15rpx 0); - background-color: var(--nut-elevator-list-item-bars-background-color, #eeeff2); - border-radius: var(--nut-elevator-list-item-bars-border-radius, 6rpx); - text-align: var(--nut-elevator-list-item-bars-text-align, center); - z-index: var(--nut-elevator-list-item-bars-z-index, 1); -} -.nut-elevator__bars__inner__item { - display: block; - padding: var(--nut-elevator-list-item-bars-inner-item-padding, 3rpx); - font-size: var(--nut-elevator-list-item-bars-inner-item-font-size, 10rpx); -} -.nut-theme-dark .nut-address .nut-address__exist .nut-address__exist-choose, -.nut-theme-dark .nut-address-custom-buttom { - border-top: 1rpx solid var(--nut-dark-background, #131313); -} -.nut-address__header { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - justify-content: space-between; - -ms-flex-align: center; - align-items: center; - height: 68rpx; - padding: 0 20rpx; - text-align: center; - font-weight: 700; - color: #333; -} -.nut-address__header__title { - display: block; - color: var(--nut-address-header-title-color, #262626); - font-size: var(--nut-address-header-title-font-size, 18rpx); -} -.nut-address .nut-address__custom .nut-address__region { - position: relative; - padding: 0 20rpx; - display: -ms-flexbox; - display: flex; - font-size: var(--nut-address-region-tab-font-size, 13rpx); - color: var(--nut-address-region-tab-color, #1d1e1e); -} -.nut-address .nut-address__custom .nut-address__region .nut-address__region-item { - position: relative; - min-width: 2rpx; - margin-right: 30rpx; - display: block; -} -.nut-address .nut-address__custom .nut-address__region .nut-address__region-item view { - display: block; - max-width: 100rpx; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.nut-address .nut-address__custom .nut-address__region .nut-address__region-item .h5-span { - display: inline-block; - max-width: 100rpx; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.nut-address .nut-address__custom .nut-address__region .nut-address__region-item .nut-address__region-line--mini { - position: absolute; - bottom: -10rpx; - left: 0; - display: inline-block; - margin-top: 5rpx; - width: 0; - height: 3rpx; - background: var(--nut-address-region-tab-line, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); - transition: 0.2s all linear; -} -.nut-address .nut-address__custom .nut-address__region .nut-address__region-item .nut-address__region-line--mini.active { - width: 26rpx; -} -.nut-address .nut-address__custom .nut-address__region .nut-address__region-line { - position: absolute; - bottom: -10rpx; - left: 20rpx; - display: inline-block; - margin-top: 5rpx; - width: 26rpx; - height: 3rpx; - background: var(--nut-address-region-tab-line, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); - transition: 0.2s all linear; - border-radius: var(--nut-address-region-tab-line-border-radius, 0); - opacity: var(--nut-address-region-tab-line-opacity, 1); + background: var(--nut-elevator-list-item-code-current-bg-color, #fff); + box-shadow: var(--nut-elevator-list-item-code-current-box-shadow, 0 3rpx 3rpx 1rpx rgb(240, 240, 240)); + text-align: var(--nut-elevator-list-item-code-current-text-align, center); } -.nut-address .nut-address__custom .nut-address__detail { - display: block; - margin: 20rpx 20rpx 0; +.nut-elevator__bars { + position: var(--nut-elevator-list-item-bars-position, absolute); + right: var(--nut-elevator-list-item-bars-right, 8rpx); + top: var(--nut-elevator-list-item-bars-top, 50%); + transform: var(--nut-elevator-list-item-bars-transform, translateY(-50%)); + padding: var(--nut-elevator-list-item-bars-padding, 15rpx 0); + background-color: var(--nut-elevator-list-item-bars-background-color, #eeeff2); + border-radius: var(--nut-elevator-list-item-bars-border-radius, 6rpx); + text-align: var(--nut-elevator-list-item-bars-text-align, center); + z-index: var(--nut-elevator-list-item-bars-z-index, 1); } -.nut-address .nut-address__custom .nut-address__detail .nut-address__detail-list { - height: 270rpx; - box-sizing: border-box; - padding: 0; +.nut-address__header { + display: flex; + justify-content: space-between; + align-items: center; + height: 68rpx; + padding: 0 20rpx; + text-align: center; + font-weight: 700; + color: #333; +} +.nut-address .nut-address__custom .nut-address__region { + position: relative; + padding: 0 20rpx; + display: flex; + font-size: var(--nut-address-region-tab-font-size, 13rpx); + color: var(--nut-address-region-tab-color, #1d1e1e); } .nut-address .nut-address__custom .nut-address__detail .nut-address__detail-list .nut-address__detail-item { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; font-size: var(--nut-address-region-item-font-size, var(--nut-font-size-1, 12rpx)); color: var(--nut-address-region-item-color, #333); } .nut-address .nut-address__custom .nut-address__detail .nut-address__detail-list .nut-address__detail-item > .h5-div { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; margin: 10rpx 0; } .nut-address .nut-address__custom .nut-address__elevator-group { - display: -ms-flexbox; display: flex; margin-top: 20rpx; } -.nut-address .nut-address__exist { - display: block; - margin-top: 15rpx; -} -.nut-address .nut-address__exist .nut-address__exist-group { - padding: 15rpx 20rpx 0; - height: 279rpx; - overflow-y: scroll; -} .nut-address .nut-address__exist .nut-address__exist-group .nut-address__exist-group-list .nut-address__exist-group-item { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; margin-bottom: 20rpx; font-size: var(--nut-font-size-1, 12rpx); line-height: 14rpx; color: #333; } -.nut-address .nut-address__exist .nut-address__exist-group .nut-address__exist-group-list .nut-address__exist-group-item .exist-item-icon { - margin-right: var(--nut-address-item-margin-right, 9rpx); - color: var(--nut-address-icon-color, var(--nut-primary-color, #fa2c19)) !important; -} .nut-address .nut-address__exist .nut-address__exist-group .nut-address__exist-group-list .nut-address__exist-group-item .h5-span { display: inline-block; - -ms-flex: 1; flex: 1; } -.nut-address .nut-address__exist .nut-address__exist-choose { - width: 100%; - height: 54rpx; - padding: 6rpx 0 0; - border-top: 1rpx solid #f2f2f2; -} -.nut-address .nut-address__exist .nut-address__exist-choose .nut-address__exist-choose-btn { - width: 90%; - height: 42rpx; - line-height: 42rpx; - margin: auto; - text-align: center; - background: var( - --nut-button-primary-background-color, - linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%) - ); - border-radius: 21rpx; - font-size: 15rpx; - color: var(--nut-white, #fff); -} -.nut-address-select-icon { - margin-right: var(--nut-address-item-margin-right, 9rpx); - color: var(--nut-address-icon-color, var(--nut-primary-color, #fa2c19)) !important; -} .nut-barrage__item { width: 100rpx; display: block; @@ -12206,42 +10339,18 @@ wx-button { font-size: 12rpx; text-align: center; white-space: pre; - -ms-transform: translate(100%); transform: translate(100%); - background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.14902)), to(rgba(0, 0, 0, 0))); - background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.14902), rgba(0, 0, 0, 0)); - background: linear-gradient(to right, rgba(0, 0, 0, 0.14902), rgba(0, 0, 0, 0)); -} -.nut-barrage__item.move { - will-change: transform; - animation-name: moving; - animation-timing-function: linear; - animation-play-state: running; -} -@keyframes moving { - 0% { - transform: translate(100%); - } - to { - transform: translate(var(--move-distance)); - } + background: linear-gradient(to right, #00000026, #0000); } .nut-signature .nut-signature-inner { height: 256rpx; margin-bottom: 32rpx; border: 1rpx solid #dadada; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; } -.nut-signature .nut-signature-btn { - margin-right: 15rpx; -} .nut-time-select__title { - display: -ms-flexbox; display: flex; width: var(--nut-timeselect-title-width, 100%); height: var(--nut-timeselect-title-height, 50rpx); @@ -12251,145 +10360,58 @@ wx-button { color: var(--nut-timeselect-title-color, var(--nut-title-color, #1a1a1a)); text-align: center; } -.nut-time-select__title__fixed { - width: 100%; - height: 50rpx; -} .nut-time-select__content { width: 100%; height: calc(100% - var(--nut-timeselect-title-height, 50rpx) - 10rpx); - display: -ms-flexbox; display: flex; } -.nut-time-select__content__pannel { - width: 140rpx; - height: 100%; - overflow: auto; - background-color: var(--nut-timeselect-pannel-bg-color, #f6f7f9); -} -.nut-time-select__content__detail { - width: calc(100% - 140rpx); - height: 100%; - overflow-y: auto; - overflow-x: hidden; -} .nut-time-pannel { - display: -ms-flexbox; display: flex; width: var(--nut-timeselect-timepannel-width, 140rpx); height: var(--nut-timeselect-timepannel-height, 40rpx); padding: var(--nut-timeselect-timepannel-padding, 15rpx); - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; color: var(--nut-timeselect-timepannel-text-color, var(--nut-title-color2, #666666)); font-size: var(--nut-timeselect-timepannel-font-size, var(--nut-font-size-2, 14rpx)); box-sizing: border-box; } .nut-time-detail { - display: -ms-flexbox; display: flex; width: 100%; padding: var(--nut-timeselect-timedetail-padding, 0 5rpx 50rpx 13rpx); } -.nut-time-detail__detail__list__item { - display: inline-block; - width: var(--nut-timeselect-timedetail-item-width, 100rpx); - height: var(--nut-timeselect-timedetail-item-height, 50rpx); - line-height: var(--nut-timeselect-timedetail-item-line-height, 50rpx); - text-align: center; - margin-right: 10rpx; - margin-bottom: 10rpx; - background-color: var(--nut-timeselect-timedetail-item-bg-color, #f6f7f9); - border-radius: var(--nut-timeselect-timedetail-item-border-radius, 5rpx); - color: var(--nut-timeselect-timedetail-item-text-color, #333333); - font-size: var(--nut-timeselect-timedetail-item-text-font-size, var(--nut-font-size-2, 14rpx)); - border: 1rpx solid transparent; - font-weight: 700; -} -.nut-time-detail__detail__list__item--curr { - background-color: transparent; - border: 1rpx solid var(--nut-timeselect-timedetail-item-cur-border, var(--nut-primary-color, #fa2c19)); - color: var(--nut-timeselect-timedetail-item-cur-text-color, var(--nut-primary-color, #fa2c19)); - position: relative; -} -.nut-time-detail__detail--afternoon { - margin-top: 30rpx; -} .nut-popup-slide-top-enter-from, .nut-popup-slide-top-leave-active { - -ms-transform: translateY(-100%); transform: translateY(-100%); } .nut-popup-slide-right-enter-from, .nut-popup-slide-right-leave-active { - -ms-transform: translate(100%); transform: translate(100%); } .nut-popup-slide-bottom-enter-from, .nut-popup-slide-bottom-leave-active { - -ms-transform: translateY(100%); transform: translateY(100%); } .nut-popup-slide-left-enter-from, .nut-popup-slide-left-leave-active { - -ms-transform: translate(-100%); transform: translate(-100%); } .nut-popup--center { top: 50%; left: 50%; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } -.nut-popup--center.round { - border-radius: var(--nut-popup-border-radius, 20rpx); -} -.nut-popup--bottom.round { - border-radius: var(--nut-popup-border-radius, 20rpx) var(--nut-popup-border-radius, 20rpx) 0 0; -} -.nut-popup--right.round { - border-radius: var(--nut-popup-border-radius, 20rpx) 0 0 var(--nut-popup-border-radius, 20rpx); -} -.nut-popup--left.round { - border-radius: 0 var(--nut-popup-border-radius, 20rpx) var(--nut-popup-border-radius, 20rpx) 0; -} -.nut-popup--top.round { - border-radius: 0 0 var(--nut-popup-border-radius, 20rpx) var(--nut-popup-border-radius, 20rpx); -} -.nut-popup__close-icon { - position: absolute !important; - z-index: 1; - color: #969799; - font-size: 18rpx; - cursor: pointer; - width: 30rpx; - height: 30rpx; - line-height: 30rpx; - text-align: center; -} -.nut-popup__close-icon--top-left { - top: var(--nut-popup-close-icon-margin, 16rpx); - left: var(--nut-popup-close-icon-margin, 16rpx); -} -.nut-popup__close-icon--top-right { - top: var(--nut-popup-close-icon-margin, 16rpx); - right: var(--nut-popup-close-icon-margin, 16rpx); -} -.nut-popup__close-icon--bottom-left { - bottom: var(--nut-popup-close-icon-margin, 16rpx); - left: var(--nut-popup-close-icon-margin, 16rpx); -} -.nut-popup__close-icon--bottom-right { - right: var(--nut-popup-close-icon-margin, 16rpx); - bottom: var(--nut-popup-close-icon-margin, 16rpx); +.nut-sku { + height: 100%; + display: flex; + flex-direction: column; + padding: 0; + background: var(--nut-white, #fff); } .nut-sku-header { height: 100rpx; - display: -ms-flexbox; display: flex; - -ms-flex-negative: 0; flex-shrink: 0; margin-top: 18rpx; padding: 0 18rpx; @@ -12397,29 +10419,30 @@ wx-button { .nut-sku-header .nut-sku-header-img { width: var(--nut-sku-product-img-width, 100rpx); height: var(--nut-sku-product-img-height, var(--nut-sku-product-img-width, 100rpx)); - -ms-flex-negative: 0; flex-shrink: 0; margin-right: 12rpx; border-radius: var(--nut-sku-product-img-border-radius, 0); } -.nut-sku-header-right-extra { - font-size: 12rpx; - color: var(--nut-text-color, #808080); +.nut-sku-header-right { + flex: 1; + display: flex; + flex-direction: column; + justify-content: flex-end; } .nut-sku-content { - -ms-flex: 1; flex: 1; overflow-y: auto; overflow-x: hidden; margin-top: 24rpx; padding: 0 18rpx; } -.nut-sku-select-item-title { - height: 13rpx; - font-weight: var(--nut-sku-spec-title-font-weight, bold); - font-size: var(--nut-sku-spec-title-font-size, 13rpx); - color: var(--nut-sku-spec-title-color, var(--nut-black, #000)); - margin-bottom: var(--nut-sku-spec-title-margin-bottom, 18rpx); +.nut-sku-select-item { + display: flex; + flex-direction: column; +} +.nut-sku-select-item-skus { + display: flex; + flex-wrap: wrap; } .nut-sku-select-item-skus-sku { margin-right: var(--nut-sku-spec-margin-right, 12rpx); @@ -12429,79 +10452,32 @@ wx-button { border-radius: 15rpx; font-size: var(--nut-sku-spec-font-size, 11rpx); color: var(--nut-sku-spec-color, var(--nut-black, #000)); - -ms-flex-negative: 0; - flex-shrink: 0; - margin-bottom: 12rpx; - background: var(--nut-sku-spec-background, rgb(242, 242, 242)); - border: 1rpx solid rgb(242, 242, 242); -} -.nut-sku-select-item-skus-sku.active { - background: transparent; - border: var(--nut-sku-item-border, 1rpx solid var(--nut-primary-color, #fa2c19)); - color: var(--nut-primary-color, #fa2c19); - position: relative; -} -.nut-sku-select-item-skus-sku.active::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 15rpx; - background-color: var(--nut-sku-item-active-bg, var(--nut-primary-color, #fa2c19)); - opacity: 0.15; - content: ''; -} -.nut-sku-select-item-skus-sku.disable { - color: var(--nut-text-color, #808080); - text-decoration: var(--nut-sku-item-disable-line, line-through); + flex-shrink: 0; + margin-bottom: 12rpx; + background: var(--nut-sku-spec-background, rgb(242, 242, 242)); + border: 1rpx solid rgb(242, 242, 242); } .nut-sku-stepper { - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; margin: 10rpx 0 30rpx; } -.nut-sku-stepper-title { - font-weight: 700; - font-size: 13rpx; - color: var(--nut-black, #000); - margin-right: 12rpx; -} .nut-sku-stepper-limit { - -ms-flex: 1; flex: 1; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; font-size: 12rpx; color: var(--nut-text-color, #808080); } -.nut-sku-stepper-count-lowestBuy { - font-size: 12rpx; - color: var(--nut-primary-color, #fa2c19); -} -.nut-sku-operate-desc { - display: block; - width: 100%; - padding: 10rpx 0; - text-align: center; - background: #fbf9da; - color: #de6a1c; - font-size: 12rpx; +.nut-sku-stepper-count { + display: flex; + align-items: center; } .nut-sku-operate-btn { height: var(--nut-sku-operate-btn-height, 54rpx); width: 100%; - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; - -ms-flex-align: center; align-items: center; background: var(--nut-white, #fff); text-align: center; @@ -12509,227 +10485,61 @@ wx-button { box-sizing: border-box; border-top: var(--nut-sku-operate-btn-border-top, 0); } -.nut-sku-operate-btn-item { - width: 100%; - height: var(--nut-sku-operate-btn-item-height, 40rpx); - line-height: var(--nut-sku-operate-btn-item-line-height, var(--nut-sku-operate-btn-item-height, 40rpx)); - margin-right: 18rpx; - background: var(--nut-sku-opetate-bg-default, linear-gradient(90deg, var(--nut-primary-color, #fa2c19), var(--nut-primary-color-end, #fa6419) 100%)); - border-radius: 21rpx; - font-size: var(--nut-sku-operate-btn-item-font-size, 15rpx); - font-weight: var(--nut-sku-operate-btn-item-font-weight, normal); - color: var(--nut-white, #fff); -} -.nut-price--strike [class*='nut-price'] { - text-decoration: line-through; -} -.nut-price--symbol { - display: inline-block; - font-size: var(--nut-font-size-3, 16rpx); -} -.nut-price--large, -.nut-price--point { - display: inline-block; - font-size: var(--nut-price-big-size, 24rpx); -} -.nut-price--decimal-large { - display: inline-block; - font-size: var(--nut-price-decimal-big-size, 18rpx); -} -.nut-price--symbol-large { - display: inline-block; - font-size: var(--nut-price-symbol-big-size, 18rpx); -} -.nut-price--normal { - display: inline-block; - font-size: var(--nut-price-medium-size, 16rpx); -} -.nut-price--decimal-normal { - display: inline-block; - font-size: var(--nut-price-decimal-medium-size, 14rpx); -} -.nut-price--symbol-normal { - display: inline-block; - font-size: var(--nut-price-symbol-medium-size, 14rpx); -} -.nut-price--small { - display: inline-block; - font-size: var(--nut-price-small-size, 12rpx); -} -.nut-price--decimal-small { - display: inline-block; - font-size: var(--nut-price-decimal-small-size, 10rpx); -} -.nut-price--symbol-small { - display: inline-block; - font-size: var(--nut-price-symbol-small-size, 10rpx); -} .nut-tag { padding: 0 4rpx; - display: -ms-inline-flexbox; display: inline-flex; - -ms-flex-align: center; align-items: center; font-size: var(--nut-tag-font-size, 12rpx); border-radius: var(--nut-tag-default-border-radius, 4rpx); height: var(--nut-tag-height, auto); } -.nut-tag--default { - color: var(--nut-tag-default-color, #ffffff); - background: var(--nut-tag-default-background-color, #000000); - border: var(--nut-tag-border-width, 1rpx) solid transparent; -} -.nut-tag--default.nut-tag--plain { - color: var(--nut-tag-default-background-color, #000000); - border: var(--nut-tag-border-width, 1rpx) solid var(--nut-tag-default-background-color, #000000); -} -.nut-tag--primary { - color: var(--nut-tag-default-color, #ffffff); - background: var(--nut-tag-primary-background-color, #3460fa); - border: var(--nut-tag-border-width, 1rpx) solid transparent; -} -.nut-tag--primary.nut-tag--plain { - color: var(--nut-tag-primary-background-color, #3460fa); - border: var(--nut-tag-border-width, 1rpx) solid var(--nut-tag-primary-background-color, #3460fa); -} -.nut-tag--success { - color: var(--nut-tag-default-color, #ffffff); - background: var(--nut-tag-success-background-color, #4fc08d); - border: var(--nut-tag-border-width, 1rpx) solid transparent; -} -.nut-tag--success.nut-tag--plain { - color: var(--nut-tag-success-background-color, #4fc08d); - border: var(--nut-tag-border-width, 1rpx) solid var(--nut-tag-success-background-color, #4fc08d); -} -.nut-tag--danger { - color: var(--nut-tag-default-color, #ffffff); - background: var(--nut-tag-danger-background-color, linear-gradient(135deg, rgb(242, 20, 12) 0%, rgb(232, 34, 14) 70%, rgb(242, 77, 12) 100%)); - border: var(--nut-tag-border-width, 1rpx) solid transparent; -} -.nut-tag--danger.nut-tag--plain { - color: var(--nut-tag-danger-background-color-plain, #df3526); - border: var(--nut-tag-border-width, 1rpx) solid var(--nut-tag-danger-background-color-plain, #df3526); -} -.nut-tag--warning { - color: var(--nut-tag-default-color, #ffffff); - background: var(--nut-tag-warning-background-color, #f3812e); - border: var(--nut-tag-border-width, 1rpx) solid transparent; -} -.nut-tag--warning.nut-tag--plain { - color: var(--nut-tag-warning-background-color, #f3812e); - border: var(--nut-tag-border-width, 1rpx) solid var(--nut-tag-warning-background-color, #f3812e); -} -.nut-tag--round { - border-radius: var(--nut-tag-round-border-radius, 8rpx); -} -.nut-tag--mark { - border-radius: 0 12rpx 12rpx 0; -} -.nut-tag--close { - margin-left: 4rpx; - cursor: pointer; +.nut-card { + width: 100%; + display: flex; } .nut-card .nut-card__left { width: 120rpx; height: 120rpx; - -ms-flex-negative: 0; flex-shrink: 0; background-color: var(--nut-card-left-background-color, inherit); border-radius: var(--nut-card-left-border-radius, 0); } -.nut-card .nut-card__left > .h5-img { - display: block; - width: 100%; - height: 100%; -} .nut-card .nut-card__right { - -ms-flex: 1; flex: 1; padding: 0 10rpx 8rpx; } -.nut-card .nut-card__right .nut-card__right__title { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - word-break: break-all; - line-height: 1.5; - font-size: 14rpx; -} .nut-card .nut-card__right .nut-card__right__price { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; height: 18rpx; line-height: 18rpx; margin-top: 9rpx; } -.nut-card .nut-card__right .nut-card__right__price .nut-price .nut-price--symbol-large { - font-size: 12rpx; -} -.nut-card .nut-card__right .nut-card__right__price .nut-price .nut-price--large { - font-size: 18rpx; -} -.nut-card .nut-card__right .nut-card__right__price .nut-price .nut-price--decimal-large { - font-size: 12rpx; -} -.nut-card .nut-card__right .nut-card__right__price .nut-card__right__price__origin.nut-price { - margin-left: 2rpx; - color: #d2a448; -} -.nut-card .nut-card__right .nut-card__right__price .nut-card__right__price__origin.nut-price .nut-price--symbol-large, -.nut-card .nut-card__right .nut-card__right__price .nut-card__right__price__origin.nut-price .nut-price--large, -.nut-card .nut-card__right .nut-card__right__price .nut-card__right__price__origin.nut-price .nut-price--decimal-large { - font-size: 12rpx; -} .nut-card .nut-card__right .nut-card__right__other { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; padding: 5rpx 0 2rpx; } -.nut-card .nut-card__right .nut-card__right__other .nut-tag { - border: none; - padding: 0 2rpx; - margin-right: 5rpx; - font-size: var(--nut-card-font-size-0, var(--nut-font-size-0, 10rpx)); -} .nut-card .nut-card__right .nut-card__right__shop { - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; - -ms-flex-align: center; align-items: center; margin-top: 4rpx; } -.nut-card .nut-card__right .nut-card__right__shop .nut-card__right__shop__name { - line-height: 1.5; - color: #999; - font-size: 12rpx; -} -.nut-theme-dark .nut-input-number .h5-input, -.nut-theme-dark .nut-input-number__text--readonly { - background-color: var(--nut-dark-background, #131313); - color: var(--nut-dark-color, var(--nut-white, #fff)); - border: 1rpx solid var(--nut-dark-color-gray, var(--nut-text-color, #808080)); -} -.nut-theme-dark .nut-input-number--disabled .h5-input { - color: var(--nut-dark-color-gray, var(--nut-text-color, #808080)); -} -.nut-input-number--disabled .h5-input { - color: var(--nut-inputnumber-icon-void-color, var(--nut-disable-color, #cccccc)); -} -.nut-input-number__icon .nut-icon { - width: var(--nut-inputnumber-icon-size, 20rpx); - height: var(--nut-inputnumber-icon-size, 20rpx); - font-size: var(--nut-inputnumber-icon-size, 20rpx); +.nut-input-number { + display: var(--nut-inputnumber-display, inline-flex); + align-items: center; + border: var(--nut-inputnumber-border, 0); + border-radius: var(--nut-inputnumber-border-radius, 0); + height: var(--nut-inputnumber-height, auto); + line-height: var(--nut-inputnumber-line-height, normal); + box-sizing: var(--nut-inputnumber-border-box, content-box); } -.nut-input-number .h5-input { - border-top: 0 !important; - border-bottom: 0 !important; +.nut-input-number__icon { + display: flex; + align-items: center; + color: var(--nut-inputnumber-icon-color, var(--nut-title-color, #1a1a1a)); + cursor: pointer; } .nut-input-number .h5-input, .nut-input-number__text--readonly, @@ -12737,11 +10547,8 @@ wx-button { width: var(--nut-inputnumber-input-width, 40rpx); height: 100%; text-align: center; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; outline: none; border: var(--nut-inputnumber-input-border, 0); @@ -12752,35 +10559,12 @@ wx-button { border-radius: var(--nut-inputnumber-input-border-radius, 4rpx); } .nut-input-number .h5-input::-webkit-outer-spin-button, -.nut-input-number .h5-input::-webkit-inner-spin-button { - appearance: none; -} -.nut-theme-dark .nut-ecard ::-webkit-input-placeholder { - color: #1d1f20; -} -.nut-theme-dark .nut-ecard .nut-ecard__list__item.active { - background: var(--nut-dark-background6, #380e08); - outline: 1rpx solid var(--nut-dark-color2, #f2270c); - color: var(--nut-dark-color2, #f2270c); -} -.nut-theme-dark .nut-ecard .nut-ecard__list__input.active > view > .h5-input { - background: var(--nut-dark-background7, #707070); -} -.nut-theme-dark .nut-ecard .nut-ecard__list__input .nut-ecard__list__input--con > .h5-input { - background-color: transparent; - color: var(--nut-dark-color3, rgba(232, 230, 227, 0.8)); -} -.nut-ecard__title { - line-height: 1; - font-size: 15rpx; - font-weight: 400; +.nut-input-number .h5-input::-webkit-inner-spin-button { + appearance: none; } .nut-ecard__list { - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; - -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 15rpx; } @@ -12790,78 +10574,36 @@ wx-button { background: var(--nut-ecard-bg-color, #f0f2f5); border-radius: 4rpx; margin-bottom: 12rpx; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; } -.nut-ecard__list__item.active { - background: var(--nut-white, #fff); - outline: 1rpx solid var(--nut-primary-color, #fa2c19); - border-radius: 4rpx; -} .nut-ecard__list__input { width: 100%; height: 46rpx; background: var(--nut-ecard-bg-color, #f0f2f5); color: rgba(0, 0, 0, 0.8); border-radius: 4rpx; - display: -ms-flexbox; display: flex; padding: 0 15rpx 0 20rpx; font-size: 14rpx; - -ms-flex-pack: justify; justify-content: space-between; - -ms-flex-align: center; align-items: center; } -.nut-ecard__list__input--con .h5-input, -.nut-ecard__list__input--con .nut-ecard-input { - caret-color: var(--nut-primary-color, #fa2c19); - text-align: right; - background: transparent; - margin-right: 10rpx; - outline: 0 none; - border: 0; - text-decoration: none; -} -.nut-ecard__list__input.active { - background: var(--nut-white, #fff); - outline: 1rpx solid var(--nut-primary-color, #fa2c19); -} -.nut-ecard__list__input.active > view > .h5-input { - background: var(--nut-white, #fff); +.nut-ecard__list__input--con { + flex: 1; + display: flex; + justify-content: flex-end; } .nut-ecard__list__step { width: 100%; margin-top: 17rpx; - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; font-size: 20rpx; font-weight: 400; color: var(--nut-primary-color, #fa2c19); } -.nut-swipe__left { - left: 0; - transform: translate3d(-100%, 0, 0); -} -.nut-swipe__right { - right: 0; - transform: translate3d(100%, 0, 0); -} -.nut-theme-dark .nut-address-list-swipe, -.nut-theme-dark .nut-address-list-general { - background-color: var(--nut-dark-background2, #1b1b1b); - border-bottom: 1rpx solid var(--nut-dark-color-gray, var(--nut-text-color, #808080)); - color: var(--nut-dark-color, var(--nut-white, #fff)); -} -.nut-address-list:last-child { - padding-bottom: 84rpx; -} .nut-address-list-swipe, .nut-address-list-general { min-height: 76rpx; @@ -12870,9 +10612,7 @@ wx-button { border-bottom: 1rpx solid var(--nut-addresslist-border, #f0f0f0); color: var(--nut-addresslist-font-color, #333333); font-size: var(--nut-addresslist-font-size, 16rpx); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; position: relative; } @@ -12884,11 +10624,8 @@ wx-button { bottom: 0; left: 0; background-color: var(--nut-addresslist-mask-bg, rgba(0, 0, 0, 0.4)); - display: -ms-flexbox; display: flex; - -ms-flex-pack: distribute; justify-content: space-around; - -ms-flex-align: center; align-items: center; padding: 0 40rpx; z-index: 2001; @@ -12906,53 +10643,43 @@ wx-button { text-align: center; background-color: var(--nut-white, #fff); font-size: 14rpx; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; box-sizing: border-box; } -.nut-address-list-item__info-contact-name { - max-width: 145rpx; - word-wrap: break-word; -} -.nut-address-list-item__info-contact-tel { - margin-left: 8rpx; - max-width: 110rpx; - word-wrap: break-word; +.nut-address-list-swipe__mask-set, +.nut-address-list-general__mask-set { + color: var(--nut-white, #fff); + background-color: var(--nut-addresslist-set-bg, #f5a623); } -.nut-address-list-item__info-contact-default { - margin-left: 5rpx; - padding: 0 6rpx; - height: 16rpx; - line-height: 16rpx; - background: var(--nut-addresslist-contnts-contact-default, var(--nut-primary-color, #fa2c19)); - border-radius: 2rpx; - font-size: 12rpx; - color: var(--nut-addresslist-contnts-contact-color, var(--nut-white, #fff)); +.nut-address-list-swipe__mask-del, +.nut-address-list-general__mask-del { + color: var(--nut-white, #fff); + background-color: var(--nut-addresslist-del-bg, #e1251b); } -.nut-address-list-item__info-handle-edit { - margin-left: 15rpx; +.nut-address-list-item__info { + display: flex; + justify-content: space-between; } -.nut-address-list-item__addr { - color: var(--nut-addresslist-addr-font-color, #666666); - font-size: var(--nut-addresslist-addr-font-size, 12rpx); - margin-top: 5rpx; +.nut-address-list-item__info-contact { + display: flex; + justify-content: flex-start; + font-weight: 700; + align-items: center; } -.nut-address-list__bottom { +.nut-address-list .nut-address-list__mask-bottom { position: fixed; - left: 0; + top: 0; right: 0; bottom: 0; - bottom: constant(safe-area-inset-bottom); - bottom: env(safe-area-inset-bottom); - width: 100%; - padding: 12rpx 18rpx 24rpx; - z-index: 100000; - background-color: var(--nut-addresslist-bg, #fff); - box-sizing: border-box; + left: 0; + z-index: 2000; + background-color: transparent; +} +.nut-category__cateList { + display: flex; + background: var(--nut-category-bg-color, rgb(255, 255, 255)); } .nut-category__cateListItemChecked, .nut-category__cateListItem { @@ -12961,40 +10688,20 @@ wx-button { font-size: 13rpx; font-weight: 400; color: var(--nut-category-list-item-color, var(--nut-title-color, #1a1a1a)); - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; transition: all 0.3s; } -.nut-category__cateListItemChecked::before { - position: absolute; - content: ''; - left: 0; - width: 5rpx; - height: 18rpx; - background: var(--nut-category-list-item-checked-img-bg-color, var(--nut-primary-color, #fa2c19)); -} -.nut-category-pane__cateListRight { - padding-left: 15rpx; - background: var(--nut-category-bg-color, rgb(255, 255, 255)); -} -.nut-category-pane__childTitle { - margin-top: 15rpx; - margin-bottom: 15rpx; - font-size: 13rpx; +.nut-category__cateListItemChecked { + background: var(--nut-category-list-item-checked-color, rgb(255, 255, 255)); font-weight: 500; - color: var(--nut-category-pane-title-color, rgb(51, 51, 51)); -} -.nut-category-pane__childItem { - margin-right: 10rpx; + transition: all 0.3s; + position: relative; } -.nut-category-pane__childImg { - width: 75rpx; - height: 75rpx; - border-radius: 5rpx; +.nut-category-pane__childItemList { + display: flex; + flex-wrap: wrap; } .nut-category-pane__skuName { margin-left: 15rpx; @@ -13007,79 +10714,54 @@ wx-button { font-size: 12rpx; font-weight: 400; color: var(--nut-category-pane-gray-color, #666); - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; } -.nut-category-pane__skuName:nth-child(n + 4) { - margin-top: 15rpx; +.nut-category-pane__selfItemList { + display: flex; + flex-wrap: wrap; } -.nut-category-pane__skuImg { - font-size: 12rpx; - font-weight: 400; - color: var(--nut-category-pane-gray-color, #666); - margin-top: 10rpx; - margin-bottom: 10rpx; - text-align: center; +.nut-rate { + display: inline-flex; } .nut-rate-item { - display: -ms-flexbox; display: flex; - -ms-flex-negative: 0; flex-shrink: 0; position: relative; margin-right: 14rpx; } -.nut-theme-dark .nut-comment-header__user-name, -.nut-theme-dark .nut-comment-header__user-default-name, -.nut-theme-dark .nut-comment__follow-title, -.nut-theme-dark .nut-comment-bottom__cpx, -.nut-theme-dark .nut-comment-bottom__cpx-item .h5-span { - color: var(--nut-dark-color, var(--nut-white, #fff)); +.nut-rate-item__icon { + color: var(--nut-rate-icon-color, var(--nut-primary-color, #fa2c19)); + flex-shrink: 0; + cursor: pointer; } -.nut-theme-dark .nut-comment .nut-comment-shop { - border-top: 1rpx solid var(--nut-dark-color, var(--nut-white, #fff)); +.nut-rate-item__icon--full { + display: flex; } -.nut-comment { - width: 100%; - font-size: 12rpx; +.nut-rate-item__icon--half { + display: flex; + position: absolute; + width: 50%; + left: 0; + top: 0; + overflow: hidden; } .nut-comment-header { margin-bottom: 10rpx; - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; } -.nut-comment-header__user-avter { - width: 20rpx; - height: 20rpx; - border-radius: 50%; - margin-right: 10rpx; - overflow: hidden; -} -.nut-comment-header__user-avter .h5-img { - width: 20rpx; - height: 20rpx; +.nut-comment-header__user { + flex: 1; + display: flex; + align-items: center; } -.nut-comment-header__user-name { - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin-right: 5rpx; - font-size: 12rpx; - color: var(--nut-comment-header-user-name-color, rgb(51, 51, 51)); - width: auto; - max-width: 80rpx; +.nut-comment-header__user-default { + flex: 1; } .nut-comment-header__user-default-name { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; margin-bottom: 3rpx; width: 100%; @@ -13089,63 +10771,17 @@ wx-button { font-size: 12rpx; color: var(--nut-comment-header-user-name-color, rgb(51, 51, 51)); } -.nut-comment-header__user-default-name > .h5-span { - margin-right: 8rpx; -} -.nut-comment-header__user-complex-name { - margin-right: 10rpx; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 80rpx; -} -.nut-comment-header__user-complex image { - max-width: 50rpx; - height: 16rpx; -} -.nut-comment-header__user-score .nut-rate-item { - display: block !important; - line-height: 10rpx; -} -.nut-comment-header__user-score .nut-rate-item .nut-icon { - line-height: 10rpx; -} -.nut-comment-header__time { - width: 100rpx; - text-align: right; - font-size: 12rpx; - color: var(--nut-comment-header-time-color, rgb(153, 153, 153)); +.nut-comment-header__user-complex { + display: flex; + align-items: center; + color: var(--nut-comment-header-user-name-color, rgb(51, 51, 51)); } .nut-comment-header__complex-score { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; margin-bottom: 10rpx; } -.nut-comment-header__complex-score .nut-rate-item { - display: block !important; - line-height: 12rpx; -} -.nut-comment-header__complex-score .nut-rate-item .nut-icon { - line-height: 12rpx; -} -.nut-comment-header__complex-score-i { - margin: 0 8rpx 0 6rpx; - display: inline-block; - width: 1rpx; - height: 6rpx; - background: var(--nut-text-color, #808080); - opacity: 0.4; - font-style: inherit; -} -.nut-comment-header__labels--item { - display: inline-block; - height: 16rpx; - margin-right: 4rpx; -} .nut-comment-images { - display: -ms-flexbox; display: flex; margin: 10rpx 0 12rpx; overflow-x: auto; @@ -13158,29 +10794,20 @@ wx-button { margin-right: 5rpx; border-radius: 6rpx; overflow: hidden; - -ms-flex-negative: 0; flex-shrink: 0; } -.nut-comment-images__item .h5-img { - width: 80rpx; - height: 80rpx; -} .nut-comment-images__item--video .h5-img { position: absolute; top: 50%; left: 50%; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .nut-comment-images__mask { position: absolute; top: 0; left: 0; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; width: 100%; height: 90rpx; @@ -13190,73 +10817,32 @@ wx-button { color: #fff; } .nut-comment-images--multi { - -ms-flex-wrap: wrap; flex-wrap: wrap; - -ms-flex-pack: justify; justify-content: space-between; overflow: hidden; width: 100%; margin: 10rpx auto 15rpx; } -.nut-comment-images--multi .nut-comment-images__item { - margin: 8rpx 8rpx 0 0; - width: calc(34% - 8rpx); - height: 90rpx; -} -.nut-comment-images--multi .nut-comment-images__item .h5-img { - width: 100%; - height: 100%; -} -.nut-comment-images--multi .nut-comment-images__item .svg-demo { - width: 40rpx; - height: 40rpx; -} -.nut-comment-images--multi::after { - content: ''; - display: block; - width: 105rpx; -} -.nut-comment__follow-title { - position: relative; - font-size: 14rpx; - font-weight: 700; - color: var(--nut-black, #000); - padding-left: 8rpx; -} .nut-comment__follow-title .h5-svg { position: absolute; left: 0; top: 13%; color: var(--nut-primary-color, #fa2c19); - -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0.4; } -.nut-comment__follow-com { - margin: 8rpx 0 8rpx 8rpx; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 6; - overflow: hidden; - word-break: break-all; -} .nut-comment__follow-img { margin: 0 0 8rpx 8rpx; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; } .nut-comment-bottom { - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; color: var(--nut-comment-bottom-label-color, rgb(153, 153, 153)); margin-right: 5rpx; } .nut-comment-bottom__lable { - -ms-flex: 1; flex: 1; margin-right: 10rpx; width: 100%; @@ -13264,222 +10850,94 @@ wx-button { text-overflow: ellipsis; white-space: nowrap; } -.nut-comment-bottom__cpx-item { - position: relative; - margin-right: 18rpx; - display: -ms-flexbox; +.nut-comment-bottom__cpx { display: flex; - -ms-flex-align: center; align-items: center; -} -.nut-comment-bottom__cpx-item .h5-span { + justify-content: flex-end; color: var(--nut-black, #000); - margin-right: 5rpx; -} -.nut-comment-bottom__cpx-item-popover { - position: absolute; - top: 35rpx; - right: 18rpx; - width: -moz-max-content; - width: max-content; - background: var(--nut-white, #fff); - padding: 10rpx; - box-shadow: 0 0 6rpx var(--nut-disable-color, #cccccc); - border-radius: 5rpx 0 5rpx 5rpx; -} -.nut-comment-bottom__cpx-item-popover::after { - content: ''; - position: absolute; - top: -20rpx; - right: 0; - width: 0; - height: 0; - border-left: 14rpx solid transparent; - border-right: 0rpx solid transparent; - border-top: 10rpx solid transparent; - border-bottom: 10rpx solid var(--nut-white, #fff); -} -.nut-comment-bottom__cpx-item-popover::before { - content: ''; - position: absolute; - top: -22rpx; - right: -1rpx; - width: 0; - height: 0; - border-left: 14rpx solid transparent; - border-right: 0rpx solid transparent; - border-top: 10rpx solid transparent; - border-bottom: 10rpx solid rgba(114, 113, 113, 0.1); -} -.nut-comment-images__play { - width: 40rpx; - height: 40rpx; - position: absolute; - left: 50%; - top: 50%; - -ms-transform: translate(-50%); - transform: translate(-50%); - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - background: rgba(0, 0, 0, 0.50196); - border-radius: 50%; -} -.nut-comment-images__play::after { - display: block; - content: ''; - position: absolute; - left: 15rpx; - top: 11rpx; - border-top: 9rpx solid transparent; - border-bottom: 9rpx solid transparent; - border-left: 15rpx solid #fff; -} -.nut-comment .nut-comment-shop { - width: 100%; - margin-top: 20rpx; - padding-top: 10rpx; - border-top: 1rpx solid rgba(0, 0, 0, 0.1); - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 6; - overflow: hidden; - word-break: break-all; -} -.nut-comment .nut-comment-shop .h5-span { - color: var(--nut-comment-shop-color, var(--nut-primary-color, #fa2c19)); } -.nut-button { +.nut-comment-bottom__cpx-item { position: relative; - display: inline-block; - width: auto; - -ms-flex-negative: 0; - flex-shrink: 0; - height: var(--nut-button-default-height, 38rpx); - box-sizing: border-box; - margin: 0; - padding: 0; - line-height: var(--nut-button-default-line-height, 36rpx); - font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 14rpx)); - text-align: center; - cursor: pointer; - transition: opacity 0.2s; - -moz-appearance: none; - appearance: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -ms-touch-action: manipulation; - touch-action: manipulation; - vertical-align: bottom; -} -.nut-button .nut-button__text { - margin-left: 5rpx; -} -.nut-button::before { - position: absolute; - top: 50%; - left: 50%; - width: 100%; - height: 100%; - background-color: var(--nut-black, #000); - border: inherit; - border-color: var(--nut-black, #000); - border-radius: inherit; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - opacity: 0; - content: ' '; -} -.nut-button--default { - color: var(--nut-button-default-color, rgb(102, 102, 102)); - background: var(--nut-button-default-bg-color, var(--nut-white, #fff)); - background-origin: border-box; - border: var(--nut-button-border-width, 1rpx) solid var(--nut-button-default-border-color, rgb(204, 204, 204)); -} -.nut-button--primary { - color: var(--nut-button-primary-color, var(--nut-white, #fff)); - background: var( - --nut-button-primary-background-color, - linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%) - ); - background-origin: border-box; - border: var(--nut-button-border-width, 1rpx) solid transparent; -} -.nut-button--info { - color: var(--nut-button-info-color, var(--nut-white, #fff)); - background: var(--nut-button-info-background-color, linear-gradient(315deg, rgb(73, 143, 242) 0%, rgb(73, 101, 242) 100%)); - background-origin: border-box; - border: var(--nut-button-border-width, 1rpx) solid transparent; -} -.nut-button--success { - color: var(--nut-button-success-color, var(--nut-white, #fff)); - background: var(--nut-button-success-background-color, linear-gradient(135deg, rgb(38, 191, 38) 0%, rgb(39, 197, 48) 45%, rgb(40, 207, 63) 83%, rgb(41, 212, 70) 100%)); - background-origin: border-box; - border: var(--nut-button-border-width, 1rpx) solid transparent; -} -.nut-button--danger { - color: var(--nut-button-danger-color, var(--nut-white, #fff)); - background: var(--nut-button-danger-background-color, rgb(250, 44, 25)); - background-origin: border-box; - border: var(--nut-button-border-width, 1rpx) solid transparent; -} -.nut-button--warning { - color: var(--nut-button-warning-color, var(--nut-white, #fff)); - background: var(--nut-button-warning-background-color, linear-gradient(135deg, rgb(255, 158, 13) 0%, rgb(255, 167, 13) 45%, rgb(255, 182, 13) 83%, rgb(255, 190, 13) 100%)); - background-origin: border-box; - border: var(--nut-button-border-width, 1rpx) solid transparent; -} -.nut-button--large { - width: 100%; - height: var(--nut-button-large-height, 48rpx); - line-height: var(--nut-button-large-line-height, 46rpx); - font-size: var(--nut-button-large-font-size, var(--nut-button-default-font-size, var(--nut-font-size-2, 14rpx))); -} -.nut-button--normal { - padding: var(--nut-button-default-padding, 0 18rpx); - font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 14rpx)); -} -.nut-button--small { - height: var(--nut-button-small-height, 28rpx); - line-height: var(--nut-button-small-line-height, 26rpx); - padding: var(--nut-button-small-padding, 0 12rpx); - font-size: var(--nut-button-small-font-size, var(--nut-font-size-1, 12rpx)); + margin-right: 18rpx; + display: flex; + align-items: center; } -.nut-button--small.nut-button--round { - border-radius: var(--nut-button-small-round-border-radius, var(--nut-button-border-radius, 25rpx)); +.nut-comment-bottom__cpx-item-popover { + position: absolute; + top: 35rpx; + right: 18rpx; + width: max-content; + background: var(--nut-white, #fff); + padding: 10rpx; + box-shadow: 0 0 6rpx var(--nut-disable-color, #cccccc); + border-radius: 5rpx 0 5rpx 5rpx; } -.nut-button--mini { - height: var(--nut-button-mini-height, 24rpx); - line-height: var(--nut-button-mini-line-height, 1.2); - padding: var(--nut-button-mini-padding, 0 12rpx); - font-size: var(--nut-button-mini-font-size, var(--nut-font-size-1, 12rpx)); +.nut-comment-images__play { + width: 40rpx; + height: 40rpx; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%); + transform: translate(-50%, -50%); + background: rgba(0, 0, 0, 0.50196); + border-radius: 50%; } -.nut-button--round { - border-radius: var(--nut-button-border-radius, 25rpx); +.nut-button { + position: relative; + display: inline-block; + width: auto; + flex-shrink: 0; + height: var(--nut-button-default-height, 38rpx); + box-sizing: border-box; + margin: 0; + padding: 0; + line-height: var(--nut-button-default-line-height, 36rpx); + font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 14rpx)); + text-align: center; + cursor: pointer; + transition: opacity 0.2s; + appearance: none; + user-select: none; + touch-action: manipulation; + vertical-align: bottom; } -.nut-radio-group .nut-radio { - margin-bottom: 5rpx; +.nut-button::before { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + background-color: var(--nut-black, #000); + border: inherit; + border-color: var(--nut-black, #000); + border-radius: inherit; + transform: translate(-50%, -50%); + opacity: 0; + content: ' '; +} +.nut-button__wrap { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; } .nut-radio-group--horizontal .nut-radio { - display: -ms-inline-flexbox; display: inline-flex; margin-right: 10rpx; } -.nut-radio-group--horizontal .nut-radio--round .nut-radio__label { - margin: 0 6rpx; -} -.nut-theme-dark .nut-radio__button--disabled { - color: var(--nut-radio-label-disable-color, #999); - border: 1rpx solid var(--nut-radio-label-disable-color, #999); +.nut-radio { + display: flex; + align-items: center; + flex-shrink: 0; + cursor: pointer; } -.nut-radio--reverse .nut-radio__label { - margin-right: var(--nut-radio-label-margin-left, 15rpx); - margin-left: 0; +.nut-radio--reverse { + flex-direction: row-reverse; } .nut-radio__button { - display: -ms-inline-flexbox; display: inline-flex; - -ms-flex-align: center; align-items: center; padding: var(--nut-radio-button-padding, 5rpx 18rpx); font-size: var(--nut-radio-button-font-size, 12rpx); @@ -13489,81 +10947,14 @@ wx-button { box-sizing: border-box; border: 1rpx solid #f6f7f9; } -.nut-radio__button--active { - background: transparent; - color: var(--nut-radio-label-font-active-color, var(--nut-primary-color, #fa2c19)); - border: 1rpx solid var(--nut-radio-label-button-border-color, var(--nut-primary-color, #fa2c19)); - position: relative; -} -.nut-radio__button--active::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--nut-radio-label-button-background, var(--nut-primary-color, #fa2c19)); - border-radius: var(--nut-radio-button-border-radius, 15rpx); - opacity: 0.05; - content: ''; -} -.nut-radio__button--large { - height: var(--nut-button-large-height, 48rpx); - line-height: var(--nut-button-large-line-height, 46rpx); - font-size: var(--nut-button-large-font-size, var(--nut-button-default-font-size, var(--nut-font-size-2, 14rpx))); -} -.nut-radio__button--small { - height: var(--nut-button-small-height, 28rpx); - line-height: var(--nut-button-small-line-height, 26rpx); - padding: var(--nut-button-small-padding, 0 12rpx); - font-size: var(--nut-button-small-font-size, var(--nut-font-size-1, 12rpx)); -} -.nut-radio__button--mini { - height: var(--nut-button-mini-height, 24rpx); - line-height: var(--nut-button-mini-line-height, 1.2); - padding: var(--nut-button-mini-padding, 0 12rpx); - font-size: var(--nut-button-mini-font-size, var(--nut-font-size-1, 12rpx)); -} .nut-radio__label { - -ms-flex: 1; flex: 1; margin-left: var(--nut-radio-label-margin-left, 15rpx); font-size: var(--nut-radio-label-font-size, 14rpx); color: var(--nut-radio-label-font-color, #1d1e1e); } -.nut-cell-group__title { - display: inherit; - padding: var(--nut-cell-group-title-padding, 0 10rpx); - color: var(--nut-cell-group-title-color, #909ca4); - font-size: var(--nut-cell-group-title-font-size, var(--nut-font-size-2, 14rpx)); - line-height: var(--nut-cell-group-title-line-height, 20rpx); - margin-top: 30rpx; - margin-bottom: 10rpx; -} -.nut-cell-group__desc { - display: inherit; - padding: var(--nut-cell-group-desc-padding, 0 10rpx); - color: var(--nut-cell-group-desc-color, #909ca4); - font-size: var(--nut-cell-group-desc-font-size, var(--nut-font-size-1, 12rpx)); - line-height: var(--nut-cell-group-desc-line-height, 16rpx); - margin-top: 10rpx; - margin-bottom: 10rpx; -} -.nut-cell-group__wrap { - display: inherit; - border-radius: var(--nut-cell-border-radius, 6rpx); - box-shadow: var(--nut-cell-box-shadow, 0rpx 1rpx 7rpx 0rpx rgb(237, 238, 241)); - overflow: hidden; - background-color: var(--nut-cell-group-background-color, var(--nut-white, #fff)); - margin: 10rpx 0; -} -.nut-cell-group .nut-cell::after { - border-bottom: var(--nut-cell-after-border-bottom, 1rpx solid #f5f6f7); -} .nut-cell { position: relative; - display: -ms-flexbox; display: flex; width: 100%; line-height: var(--nut-cell-line-height, 20rpx); @@ -13576,12 +10967,8 @@ wx-button { margin: 10rpx 0; box-sizing: border-box; } -.nut-cell--large { - font-size: var(--nut-cell-large-title-font, var(--nut-font-size-large, var(--nut-font-size-3, 16rpx))); - padding: var(--nut-cell-large-padding, 15rpx 16rpx); -} -.nut-cell--large .nut-cell__title-desc { - font-size: var(--nut-cell-large-title-desc-font, var(--nut-font-size-base, var(--nut-font-size-2, 14rpx))); +.nut-cell--center { + align-items: center; } .nut-cell::after { position: absolute; @@ -13591,7 +10978,6 @@ wx-button { right: var(--nut-cell-after-right, 16rpx); bottom: 0; left: 16rpx; - -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .nut-cell--clickable::before { @@ -13604,40 +10990,36 @@ wx-button { border: inherit; border-color: var(--nut-black, #000); border-radius: inherit; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; content: ' '; } .nut-cell__icon { - display: -ms-flexbox; display: flex; - -ms-flex-direction: row; flex-direction: row; margin: var(--nut-cell-default-icon-margin, 0 4rpx 0 0rpx); - -ms-flex-align: center; align-items: center; } .nut-cell__title { - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex: 1; flex: 1; min-width: 80rpx; } -.nut-cell__title-desc { - font-size: var(--nut-cell-title-desc-font, var(--nut-font-size-1, 12rpx)); -} .nut-cell__value { display: inline-block; text-align: right; - -ms-flex: 1; flex: 1; font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 14rpx)); color: var(--nut-cell-desc-color, var(--nut-disable-color, #cccccc)); } +.nut-cell__link { + color: #979797; + align-self: center; +} +.nut-form-item { + display: flex; +} .nut-form-item::before { position: absolute; box-sizing: border-box; @@ -13646,12 +11028,10 @@ wx-button { right: 16rpx; bottom: 0; left: 16rpx; - -ms-transform: scaleX(0); transform: scaleX(0); } .nut-form-item.error.line::before { border-bottom: 1rpx solid var(--nut-form-item-error-line-color, var(--nut-required-color, #fa2c19)); - -ms-transform: scaleX(1); transform: scaleX(1); transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; } @@ -13660,68 +11040,35 @@ wx-button { font-weight: 400; width: var(--nut-form-item-label-width, 90rpx); margin-right: var(--nut-form-item-label-margin-right, 10rpx); - -ms-flex: none !important; flex: none !important; display: inline-block !important; word-wrap: break-word; text-align: var(--nut-form-item-label-text-align, left); } -.nut-form-item__label.required::before { - content: '*'; - color: var(--nut-form-item-required-color, var(--nut-required-color, #fa2c19)); - margin-right: var(--nut-form-item-required-margin-right, 4rpx); -} -.nut-form-item__label.required.nut-form-item__star-right::after { - content: '*'; - color: var(--nut-form-item-required-color, var(--nut-required-color, #fa2c19)); - margin-left: var(--nut-form-item-required-margin-right, 4rpx); -} -.nut-form-item__body__slots .nut-input { - font-size: var(--nut-form-item-body-font-size, 14rpx); - text-align: var(--nut-form-item-body-input-text-align, left); - color: var(--nut-black, #000); - width: 100%; - outline: 0 none; - border: 0; - text-decoration: none; - background: transparent; -} -.nut-form-item__body__slots .nut-range-container { - min-height: 24rpx; +.nut-form-item__body { + flex: 1; + display: flex !important; + flex-direction: column; } -.nut-form-item__body__tips { - text-align: var(--nut-form-item-tip-text-align, left); - font-size: var(--nut-form-item-tip-font-size, 10rpx); - color: var(--nut-form-item-error-message-color, var(--nut-required-color, #fa2c19)); +.nut-form-item__top { + flex-direction: column; } -.nut-form-item__top .nut-form-item__label { - padding-bottom: 5rpx; - width: 100%; - box-sizing: border-box; - display: block; - padding-right: 24rpx; +.nut-invoice .nut-cell { + align-items: baseline; } .nut-invoice__submit { position: fixed; bottom: 0; width: 100%; padding: var(--nut-invoice-padding, 10rpx 10rpx 20rpx); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; background: #fff; box-sizing: border-box; bottom: constant(safe-area-inset-bottom); bottom: env(safe-area-inset-bottom); } -.nut-invoice .nut-radio { - display: inline-block; - margin-right: 6rpx; - margin-bottom: 0; -} .nut-avatar-cropper::after, .nut-avatar-cropper__edit-text { content: attr(data-edit-text); @@ -13733,20 +11080,20 @@ wx-button { background-color: rgba(0, 0, 0, 0.30196); z-index: 1; color: #fff; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; } +.nut-cropper-popup__toolbar .flex-sb { + width: 100%; + display: flex; + justify-content: space-between; +} .nut-cropper-popup__toolbar-item { color: #fff; padding: 15rpx; cursor: pointer; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; } .nut-cropper-popup__highlight .highlight { @@ -13755,18 +11102,11 @@ wx-button { height: 365rpx; left: 50%; top: 50%; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; background-color: transparent; box-shadow: 0 0 1000rpx 1000rpx rgba(0, 0, 0, 0.6); } -.h5-button::after, -wx-button::after { - display: none; - border: none; - content: ''; -} wx-button { background: #444; } @@ -13774,9 +11114,7 @@ abc { background: #222; } .weapp-tw-user-ui-card { - display: -ms-inline-flexbox; display: inline-flex; - -ms-flex-align: center; align-items: center; gap: 8rpx; color: var(--weapp-tw-user-ui-color, #175e75); @@ -13799,3 +11137,12 @@ abc { transform: scale(0.96); } } +:host, +page, +.tw-root, +wx-root-portal-content { + --font-sans: 'inter', 'inter Fallback', system-ui; + --text-base: 1rem; + --radius-lg: 0.5rem; + --default-font-family: var(--font-inter), system-ui; +} diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-webpack-react-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-webpack-react-tailwindcss-v4/README.md index 5ca61f52d..e4c9af55f 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-webpack-react-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-webpack-react-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: taro-webpack-react-tailwindcss-v4/dist/app.wxss | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 320801 | 2218 | false | false | false | true | true | false | true | +| 322016 | 2222 | false | false | false | true | true | false | true | ## Generator CSS Files @@ -23,8 +23,8 @@ Entry: taro-webpack-react-tailwindcss-v4/dist/app.wxss | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| `app.wxss` | [artifacts/app.wxss](artifacts/app.wxss) | 295562 | 2195 | false | false | false | true | true | false | true | +| `app.wxss` | [artifacts/app.wxss](artifacts/app.wxss) | 296156 | 2199 | false | false | false | true | true | false | true | | `pages/index/index.wxss` | [artifacts/pages__index__index.wxss](artifacts/pages__index__index.wxss) | 3938 | 38 | false | false | false | false | false | false | false | -| `pages/issue-998/index.wxss` | [artifacts/pages__issue-998__index.wxss](artifacts/pages__issue-998__index.wxss) | 18212 | 84 | false | false | false | false | true | false | true | +| `pages/issue-998/index.wxss` | [artifacts/pages__issue-998__index.wxss](artifacts/pages__issue-998__index.wxss) | 18833 | 88 | false | false | false | false | true | false | true | | `sub-independent/pages/index.wxss` | [artifacts/sub-independent__pages__index.wxss](artifacts/sub-independent__pages__index.wxss) | 2052 | 9 | false | false | false | false | false | false | true | | `sub-normal/pages/index.wxss` | [artifacts/sub-normal__pages__index.wxss](artifacts/sub-normal__pages__index.wxss) | 1037 | 6 | false | false | false | false | false | false | true | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-webpack-react-tailwindcss-v4/artifacts/app.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-webpack-react-tailwindcss-v4/artifacts/app.wxss index 328e82398..58c0e4054 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-webpack-react-tailwindcss-v4/artifacts/app.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-webpack-react-tailwindcss-v4/artifacts/app.wxss @@ -266,10 +266,12 @@ wx-root-portal-content { --nutui-radius-xxxl: var(--nutui-radius-16); --font-sans: 'inter', 'inter Fallback', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; --font-mono: var(--font-plex-mono), monospace; + --color-blue-500: #3080ff; --color-slate-900: #0f172b; --color-white: #fff; --color-purple-800: #6e11b0; --color-pink-200: #fccee8; + --color-blue-200: #bedbff; --color-zinc-50: rgb(250, 250, 250); --color-zinc-900: rgb(24, 24, 27); --color-yellow-300: #ffe02e; @@ -9518,11 +9520,21 @@ wx-root-portal-content { } /* tokens: rounded-full <= src/pages/index/index.tsx */ .rounded-full { - border-radius: 9999px; + border-radius: 9999rpx; } /* tokens: rounded-full! <= src/pages/index/index.tsx */ .rounded-full_e { - border-radius: 9999px !important; + border-radius: 9999rpx !important; +} + /* tokens: rounded-s-full <= src/pages/index/index.tsx */ +.rounded-s-full { + border-bottom-left-radius: 9999rpx; + border-top-left-radius: 9999rpx; +} + /* tokens: rounded-t-full <= src/pages/index/index.tsx */ +.rounded-t-full { + border-top-left-radius: 9999rpx; + border-top-right-radius: 9999rpx; } /* tokens: bg-[#0977ee] <= src/pages/index/index.tsx */ .bg-_b_h0977ee_B { @@ -9531,6 +9543,14 @@ wx-root-portal-content { /* tokens: bg-[#534312] <= src/pages/index/index.tsx */ .bg-_b_h534312_B { background-color: #534312; +} + /* tokens: bg-blue-200 <= src/pages/index/index.tsx */ +.bg-blue-200 { + background-color: var(--color-blue-200); +} + /* tokens: bg-blue-500 <= src/pages/index/index.tsx */ +.bg-blue-500 { + background-color: var(--color-blue-500); } /* tokens: bg-purple-800 <= src/pages/index/index.tsx */ .bg-purple-800 { diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-webpack-react-tailwindcss-v4/artifacts/pages__issue-998__index.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-webpack-react-tailwindcss-v4/artifacts/pages__issue-998__index.wxss index bdf346927..cc448e1a4 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-webpack-react-tailwindcss-v4/artifacts/pages__issue-998__index.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/taro-webpack-react-tailwindcss-v4/artifacts/pages__issue-998__index.wxss @@ -30,6 +30,8 @@ wx-root-portal-content { --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --color-yellow-300: rgb(255, 224, 46); --color-emerald-400: rgb(0, 210, 148); + --color-blue-200: rgb(190, 219, 255); + --color-blue-500: rgb(50, 128, 255); --color-purple-500: rgb(171, 78, 255); --color-purple-800: rgb(110, 17, 176); --color-pink-200: rgb(252, 206, 232); @@ -109,11 +111,21 @@ wx-root-portal-content { } /* tokens: rounded-full <= src/pages/index/index.tsx */ .rounded-full { - border-radius: 9999px; + border-radius: 19998rpx; } /* tokens: rounded-full! <= src/pages/index/index.tsx */ .rounded-full_e { - border-radius: 9999px !important; + border-radius: 19998rpx !important; +} + /* tokens: rounded-s-full <= src/pages/index/index.tsx */ +.rounded-s-full { + border-top-left-radius: 19998rpx; + border-bottom-left-radius: 19998rpx; +} + /* tokens: rounded-t-full <= src/pages/index/index.tsx */ +.rounded-t-full { + border-top-left-radius: 19998rpx; + border-top-right-radius: 19998rpx; } /* tokens: bg-[#0977ee] <= src/pages/index/index.tsx */ .bg-_b_h0977ee_B { @@ -122,6 +134,14 @@ wx-root-portal-content { /* tokens: bg-[#534312] <= src/pages/index/index.tsx */ .bg-_b_h534312_B { background-color: #534312; +} + /* tokens: bg-blue-200 <= src/pages/index/index.tsx */ +.bg-blue-200 { + background-color: var(--color-blue-200); +} + /* tokens: bg-blue-500 <= src/pages/index/index.tsx */ +.bg-blue-500 { + background-color: var(--color-blue-500); } /* tokens: bg-purple-800 <= src/pages/index/index.tsx */ .bg-purple-800 { diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/weapp-vite-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/weapp-vite-tailwindcss-v4/README.md index ec33c2562..72e5b60e6 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/weapp-vite-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/weapp-vite-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: weapp-vite-tailwindcss-v4/dist/app.wxss | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 15985 | 100 | false | false | false | true | true | false | true | +| 20003 | 123 | false | false | false | true | true | false | true | ## Generator CSS Files @@ -22,7 +22,7 @@ Entry: weapp-vite-tailwindcss-v4/dist/app.wxss | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| `app.wxss` | [artifacts/app.wxss](artifacts/app.wxss) | 14207 | 94 | false | false | false | true | true | false | true | +| `app.wxss` | [artifacts/app.wxss](artifacts/app.wxss) | 14993 | 116 | false | false | false | true | true | false | true | | `pages/index/index.wxss` | [artifacts/pages__index__index.wxss](artifacts/pages__index__index.wxss) | 115 | 2 | false | false | false | false | false | false | false | -| `sub-independent/pages/index.wxss` | [artifacts/sub-independent__pages__index.wxss](artifacts/sub-independent__pages__index.wxss) | 839 | 6 | false | false | false | false | false | false | true | -| `sub-normal/pages/index.wxss` | [artifacts/sub-normal__pages__index.wxss](artifacts/sub-normal__pages__index.wxss) | 824 | 6 | false | false | false | false | false | false | true | +| `sub-independent/pages/index.wxss` | [artifacts/sub-independent__pages__index.wxss](artifacts/sub-independent__pages__index.wxss) | 2455 | 29 | false | false | false | false | false | false | true | +| `sub-normal/pages/index.wxss` | [artifacts/sub-normal__pages__index.wxss](artifacts/sub-normal__pages__index.wxss) | 2440 | 29 | false | false | false | false | false | false | true | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/weapp-vite-tailwindcss-v4/artifacts/app.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/weapp-vite-tailwindcss-v4/artifacts/app.wxss index 487ea1892..d95734ff7 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/weapp-vite-tailwindcss-v4/artifacts/app.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/weapp-vite-tailwindcss-v4/artifacts/app.wxss @@ -54,6 +54,102 @@ wx-root-portal-content { --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } +:host { + line-height: 1.5; + tab-size: 4; + font-family: var( + --default-font-family, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + 'Noto Sans', + Arial, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji' + ); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); +} +.hr { + height: 0; + color: inherit; + border-top-width: 1px; +} +abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; +} +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-size: inherit; + font-weight: inherit; +} +.a { + color: inherit; + text-decoration: inherit; +} +.b, +.strong { + font-weight: bolder; +} +.code, +.pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; +} +.small { + font-size: 80%; +} +.table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; +} +:-moz-focusring:not(iframe) { + outline: auto; +} +.ol, +.ul { + list-style: none; +} +.img, +video, +canvas, +audio { + display: block; + vertical-align: middle; +} +.img, +video { + max-width: 100%; + height: auto; +} +button, +input[type='button'], +input[type='reset'], +input[type='submit'] { + appearance: button; +} +button::after, +wx-button::after { + display: none; + border: none; + content: ''; +} +wx-button { + background: #000; +} .mt-2 { margin-top: calc(var(--spacing) * 2); } @@ -409,28 +505,6 @@ wx-root-portal-content { transform: scale(0.96); } } -.from-_b_h2f73f1_B { - --tw-gradient-from: #2f73f1; - --tw-gradient-stops: var(--tw-gradient-via-stops, initial), var(--tw-gradient-from) var(--tw-gradient-from-position, ), var(--tw-gradient-to) var(--tw-gradient-to-position, ); -} -.to-_b_h4bcefd_B { - --tw-gradient-to: #4bcefd; - --tw-gradient-stops: var(--tw-gradient-via-stops, initial), var(--tw-gradient-from) var(--tw-gradient-from-position, ), var(--tw-gradient-to) var(--tw-gradient-to-position, ); -} -.transition-colors { - transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; - transition-timing-function: var(--tw-ease, initial); - transition-duration: var(--tw-duration, initial); -} -button::after, -wx-button::after { - display: none; - border: none; - content: ''; -} -wx-button { - background: #000; -} wx-button { background: #444; } diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/weapp-vite-tailwindcss-v4/artifacts/sub-independent__pages__index.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/weapp-vite-tailwindcss-v4/artifacts/sub-independent__pages__index.wxss index 58658f0f6..dee82c065 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/weapp-vite-tailwindcss-v4/artifacts/sub-independent__pages__index.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/weapp-vite-tailwindcss-v4/artifacts/sub-independent__pages__index.wxss @@ -19,6 +19,96 @@ wx-root-portal-content { --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } +:host { + line-height: 1.5; + tab-size: 4; + font-family: var( + --default-font-family, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + 'Noto Sans', + Arial, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji' + ); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); +} +.hr { + height: 0; + color: inherit; + border-top-width: 1px; +} +abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; +} +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-size: inherit; + font-weight: inherit; +} +.a { + color: inherit; + text-decoration: inherit; +} +.b, +.strong { + font-weight: bolder; +} +.code, +.pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; +} +.small { + font-size: 80%; +} +.table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; +} +:-moz-focusring:not(iframe) { + outline: auto; +} +.ol, +.ul { + list-style: none; +} +.img, +video, +canvas, +audio { + display: block; + vertical-align: middle; +} +.img, +video { + max-width: 100%; + height: auto; +} +button, +input[type='button'], +input[type='reset'], +input[type='submit'] { + appearance: button; +} +[hidden]:not([hidden='until-found']) { + display: none !important; +} .before_ccontent-_b_aindependent_subpackage_weapp-vite-tailwindcss-v4_a_B::before { --tw-content: 'independent subpackage weapp-vite-tailwindcss-v4'; content: var(--tw-content); diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/weapp-vite-tailwindcss-v4/artifacts/sub-normal__pages__index.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/weapp-vite-tailwindcss-v4/artifacts/sub-normal__pages__index.wxss index 4f6d4b4ee..e8cf483fe 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/weapp/weapp-vite-tailwindcss-v4/artifacts/sub-normal__pages__index.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/weapp/weapp-vite-tailwindcss-v4/artifacts/sub-normal__pages__index.wxss @@ -19,6 +19,96 @@ wx-root-portal-content { --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } +:host { + line-height: 1.5; + tab-size: 4; + font-family: var( + --default-font-family, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + 'Noto Sans', + Arial, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji' + ); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); +} +.hr { + height: 0; + color: inherit; + border-top-width: 1px; +} +abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; +} +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-size: inherit; + font-weight: inherit; +} +.a { + color: inherit; + text-decoration: inherit; +} +.b, +.strong { + font-weight: bolder; +} +.code, +.pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; +} +.small { + font-size: 80%; +} +.table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; +} +:-moz-focusring:not(iframe) { + outline: auto; +} +.ol, +.ul { + list-style: none; +} +.img, +video, +canvas, +audio { + display: block; + vertical-align: middle; +} +.img, +video { + max-width: 100%; + height: auto; +} +button, +input[type='button'], +input[type='reset'], +input[type='submit'] { + appearance: button; +} +[hidden]:not([hidden='until-found']) { + display: none !important; +} .before_ccontent-_b_anormal_subpackage_weapp-vite-tailwindcss-v4_a_B::before { --tw-content: 'normal subpackage weapp-vite-tailwindcss-v4'; content: var(--tw-content); diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-react-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-react-tailwindcss-v4/README.md index a901da723..8d3ac38b8 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-react-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-react-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: taro-webpack-react-tailwindcss-v4/dist | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 441337 | 2301 | true | false | true | true | true | true | false | +| 442372 | 2305 | true | false | true | true | true | true | false | ## Generator CSS Files @@ -23,8 +23,8 @@ Entry: taro-webpack-react-tailwindcss-v4/dist | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| `css/app.css` | [artifacts/css__app.css](artifacts/css__app.css) | 397264 | 2278 | true | false | true | true | true | true | false | -| `css/chunk.1.css` | [artifacts/css__chunk.1.css](artifacts/css__chunk.1.css) | 21870 | 96 | true | false | true | false | true | true | false | +| `css/app.css` | [artifacts/css__app.css](artifacts/css__app.css) | 397779 | 2282 | true | false | true | true | true | true | false | +| `css/chunk.1.css` | [artifacts/css__chunk.1.css](artifacts/css__chunk.1.css) | 22390 | 100 | true | false | true | false | true | true | false | | `css/chunk.2.css` | [artifacts/css__chunk.2.css](artifacts/css__chunk.2.css) | 6638 | 18 | true | false | true | false | false | true | false | | `css/chunk.3.css` | [artifacts/css__chunk.3.css](artifacts/css__chunk.3.css) | 6613 | 18 | true | false | true | false | false | true | false | | `css/chunk.4.css` | [artifacts/css__chunk.4.css](artifacts/css__chunk.4.css) | 8952 | 36 | false | false | false | false | false | false | false | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-react-tailwindcss-v4/artifacts/css__app.css b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-react-tailwindcss-v4/artifacts/css__app.css index 77fba54de..96b3e6e17 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-react-tailwindcss-v4/artifacts/css__app.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-react-tailwindcss-v4/artifacts/css__app.css @@ -13051,6 +13051,16 @@ wx-button { } .rounded-full\! { border-radius: 249.975rem !important; +} + /*tokens: rounded-s-full <= src/pages/index/index.tsx */ +.rounded-s-full { + border-end-start-radius: 249.975rem; + border-start-start-radius: 249.975rem; +} + /*tokens: rounded-t-full <= src/pages/index/index.tsx */ +.rounded-t-full { + border-top-left-radius: 249.975rem; + border-top-right-radius: 249.975rem; } .border { border-style: var(--tw-border-style); @@ -13061,6 +13071,14 @@ wx-button { } .bg-\[\#534312\] { background-color: #534312; +} + /*tokens: bg-blue-200 <= src/pages/index/index.tsx */ +.bg-blue-200 { + background-color: #bedbff; +} + /*tokens: bg-blue-500 <= src/pages/index/index.tsx */ +.bg-blue-500 { + background-color: #3280ff; } /*tokens: bg-purple-800 <= src/pages/index/index.tsx */ .bg-purple-800 { diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-react-tailwindcss-v4/artifacts/css__chunk.1.css b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-react-tailwindcss-v4/artifacts/css__chunk.1.css index c9d619b58..173a2d196 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-react-tailwindcss-v4/artifacts/css__chunk.1.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-react-tailwindcss-v4/artifacts/css__chunk.1.css @@ -306,12 +306,30 @@ input:where([type='button'], [type='reset'], [type='submit']), } .rounded-full\! { border-radius: 9999px !important; +} + /*tokens: rounded-s-full <= src/pages/index/index.tsx */ +.rounded-s-full { + border-start-start-radius: 9999px; + border-end-start-radius: 9999px; +} + /*tokens: rounded-t-full <= src/pages/index/index.tsx */ +.rounded-t-full { + border-top-left-radius: 9999px; + border-top-right-radius: 9999px; } .bg-\[\#0977ee\] { background-color: #0977ee; } .bg-\[\#534312\] { background-color: #534312; +} + /*tokens: bg-blue-200 <= src/pages/index/index.tsx */ +.bg-blue-200 { + background-color: rgb(190, 219, 255); +} + /*tokens: bg-blue-500 <= src/pages/index/index.tsx */ +.bg-blue-500 { + background-color: rgb(50, 128, 255); } /*tokens: bg-purple-800 <= src/pages/index/index.tsx */ .bg-purple-800 { diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-vue3-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-vue3-tailwindcss-v4/README.md index 0d36d244c..26bf46638 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-vue3-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-vue3-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: taro-webpack-vue3-tailwindcss-v4/dist | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 567631 | 1799 | true | true | true | true | true | true | false | +| 568017 | 1799 | true | true | true | true | true | true | false | ## Generator CSS Files @@ -22,7 +22,7 @@ Entry: taro-webpack-vue3-tailwindcss-v4/dist | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| `css/app.css` | [artifacts/css__app.css](artifacts/css__app.css) | 315065 | 1790 | true | true | true | true | true | true | false | +| `css/app.css` | [artifacts/css__app.css](artifacts/css__app.css) | 315451 | 1792 | true | true | true | true | true | true | false | | `css/chunk.1.css` | [artifacts/css__chunk.1.css](artifacts/css__chunk.1.css) | 239319 | 1602 | true | true | true | true | true | true | false | | `css/chunk.2.css` | [artifacts/css__chunk.2.css](artifacts/css__chunk.2.css) | 6636 | 18 | true | false | true | false | false | true | false | | `css/chunk.3.css` | [artifacts/css__chunk.3.css](artifacts/css__chunk.3.css) | 6611 | 18 | true | false | true | false | false | true | false | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-vue3-tailwindcss-v4/artifacts/css__app.css b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-vue3-tailwindcss-v4/artifacts/css__app.css index 5a47bcd49..b17acebdd 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-vue3-tailwindcss-v4/artifacts/css__app.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web-compact/taro-webpack-vue3-tailwindcss-v4/artifacts/css__app.css @@ -1683,6 +1683,14 @@ wx-button { -webkit-transition-timing-function: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } +.before\:content-\[\'independent_subpackage_taro-webpack-vue3-tailwindcss-v4\'\]::before { + --tw-content: 'independent subpackage taro-webpack-vue3-tailwindcss-v4'; + content: var(--tw-content); +} +.before\:content-\[\'normal_subpackage_taro-webpack-vue3-tailwindcss-v4\'\]::before { + --tw-content: 'normal subpackage taro-webpack-vue3-tailwindcss-v4'; + content: var(--tw-content); +} .before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]::before { --tw-content: '现在，让我们开始神奇的 tailwindcss 开发之旅吧！'; content: var(--tw-content); diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-react-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-react-tailwindcss-v4/README.md index 34b5ed5c7..19434c245 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-react-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-react-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: taro-webpack-react-tailwindcss-v4/dist | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 458512 | 2301 | true | false | true | true | true | true | false | +| 460183 | 2305 | true | false | true | true | true | true | false | ## Generator CSS Files @@ -23,8 +23,8 @@ Entry: taro-webpack-react-tailwindcss-v4/dist | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| `css/app.css` | [artifacts/css__app.css](artifacts/css__app.css) | 404812 | 2278 | true | false | true | true | true | true | false | -| `css/chunk.1.css` | [artifacts/css__chunk.1.css](artifacts/css__chunk.1.css) | 28645 | 96 | true | false | true | false | true | true | false | +| `css/app.css` | [artifacts/css__app.css](artifacts/css__app.css) | 405672 | 2282 | true | false | true | true | true | true | false | +| `css/chunk.1.css` | [artifacts/css__chunk.1.css](artifacts/css__chunk.1.css) | 29456 | 100 | true | false | true | false | true | true | false | | `css/chunk.2.css` | [artifacts/css__chunk.2.css](artifacts/css__chunk.2.css) | 8064 | 18 | true | false | true | false | false | true | false | | `css/chunk.3.css` | [artifacts/css__chunk.3.css](artifacts/css__chunk.3.css) | 8039 | 18 | true | false | true | false | false | true | false | | `css/chunk.4.css` | [artifacts/css__chunk.4.css](artifacts/css__chunk.4.css) | 8952 | 36 | false | false | false | false | false | false | false | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-react-tailwindcss-v4/artifacts/css__app.css b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-react-tailwindcss-v4/artifacts/css__app.css index daf2faf29..53c55d794 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-react-tailwindcss-v4/artifacts/css__app.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-react-tailwindcss-v4/artifacts/css__app.css @@ -313,6 +313,8 @@ page { --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --color-yellow-300: oklch(90.5% 0.182 98.111); --color-emerald-400: oklch(76.5% 0.177 163.223); + --color-blue-200: oklch(88.2% 0.059 254.128); + --color-blue-500: oklch(62.3% 0.214 259.815); --color-purple-500: oklch(62.7% 0.265 303.9); --color-purple-800: oklch(43.8% 0.218 303.724); --color-pink-200: oklch(89.9% 0.061 343.231); @@ -347,6 +349,7 @@ page { --font-sans: 'inter', 'inter Fallback', system-ui; --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; --font-mono: var(--font-plex-mono), monospace; + --color-blue-500: #3080ff; --color-slate-900: #0f172b; --color-white: #fff; --color-zinc-900: rgb(24, 24, 27); @@ -12659,6 +12662,8 @@ page { --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --color-yellow-300: oklch(90.5% 0.182 98.111); --color-emerald-400: oklch(76.5% 0.177 163.223); + --color-blue-200: oklch(88.2% 0.059 254.128); + --color-blue-500: oklch(62.3% 0.214 259.815); --color-purple-500: oklch(62.7% 0.265 303.9); --color-purple-800: oklch(43.8% 0.218 303.724); --color-pink-200: oklch(89.9% 0.061 343.231); @@ -13086,6 +13091,16 @@ page { .rounded-full\! { border-radius: calc(infinity * 0.025rem) !important; } + /*tokens: rounded-s-full <= src/pages/index/index.tsx */ + .rounded-s-full { + border-end-start-radius: calc(infinity * 0.025rem); + border-start-start-radius: calc(infinity * 0.025rem); + } + /*tokens: rounded-t-full <= src/pages/index/index.tsx */ + .rounded-t-full { + border-top-left-radius: calc(infinity * 0.025rem); + border-top-right-radius: calc(infinity * 0.025rem); + } .border { border-style: var(--tw-border-style); border-width: 0.025rem; @@ -13096,6 +13111,14 @@ page { .bg-\[\#534312\] { background-color: #534312; } + /*tokens: bg-blue-200 <= src/pages/index/index.tsx */ + .bg-blue-200 { + background-color: var(--color-blue-200); + } + /*tokens: bg-blue-500 <= src/pages/index/index.tsx */ + .bg-blue-500 { + background-color: var(--color-blue-500); + } /*tokens: bg-purple-800 <= src/pages/index/index.tsx */ .bg-purple-800 { background-color: var(--color-purple-800); diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-react-tailwindcss-v4/artifacts/css__chunk.1.css b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-react-tailwindcss-v4/artifacts/css__chunk.1.css index 5d071a3c9..ce5bc5d14 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-react-tailwindcss-v4/artifacts/css__chunk.1.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-react-tailwindcss-v4/artifacts/css__chunk.1.css @@ -7,6 +7,8 @@ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --color-yellow-300: oklch(90.5% 0.182 98.111); --color-emerald-400: oklch(76.5% 0.177 163.223); + --color-blue-200: oklch(88.2% 0.059 254.128); + --color-blue-500: oklch(62.3% 0.214 259.815); --color-purple-500: oklch(62.7% 0.265 303.9); --color-purple-800: oklch(43.8% 0.218 303.724); --color-pink-200: oklch(89.9% 0.061 343.231); @@ -296,12 +298,30 @@ .rounded-full\! { border-radius: calc(infinity * 1px) !important; } + /*tokens: rounded-s-full <= src/pages/index/index.tsx */ + .rounded-s-full { + border-start-start-radius: calc(infinity * 1px); + border-end-start-radius: calc(infinity * 1px); + } + /*tokens: rounded-t-full <= src/pages/index/index.tsx */ + .rounded-t-full { + border-top-left-radius: calc(infinity * 1px); + border-top-right-radius: calc(infinity * 1px); + } .bg-\[\#0977ee\] { background-color: #0977ee; } .bg-\[\#534312\] { background-color: #534312; } + /*tokens: bg-blue-200 <= src/pages/index/index.tsx */ + .bg-blue-200 { + background-color: var(--color-blue-200); + } + /*tokens: bg-blue-500 <= src/pages/index/index.tsx */ + .bg-blue-500 { + background-color: var(--color-blue-500); + } /*tokens: bg-purple-800 <= src/pages/index/index.tsx */ .bg-purple-800 { background-color: var(--color-purple-800); @@ -744,6 +764,8 @@ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --color-yellow-300: oklch(90.5% 0.182 98.111); --color-emerald-400: oklch(76.5% 0.177 163.223); + --color-blue-200: oklch(88.2% 0.059 254.128); + --color-blue-500: oklch(62.3% 0.214 259.815); --color-purple-500: oklch(62.7% 0.265 303.9); --color-purple-800: oklch(43.8% 0.218 303.724); --color-pink-200: oklch(89.9% 0.061 343.231); diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-vue3-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-vue3-tailwindcss-v4/README.md index a9334ab9c..16ef5e373 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-vue3-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-vue3-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: taro-webpack-vue3-tailwindcss-v4/dist | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 584311 | 1799 | true | true | true | true | true | true | false | +| 584713 | 1799 | true | true | true | true | true | true | false | ## Generator CSS Files @@ -22,7 +22,7 @@ Entry: taro-webpack-vue3-tailwindcss-v4/dist | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| `css/app.css` | [artifacts/css__app.css](artifacts/css__app.css) | 323937 | 1790 | true | true | true | true | true | true | false | +| `css/app.css` | [artifacts/css__app.css](artifacts/css__app.css) | 324339 | 1792 | true | true | true | true | true | true | false | | `css/chunk.1.css` | [artifacts/css__chunk.1.css](artifacts/css__chunk.1.css) | 244077 | 1602 | true | true | false | true | true | true | false | | `css/chunk.2.css` | [artifacts/css__chunk.2.css](artifacts/css__chunk.2.css) | 8062 | 18 | true | false | true | false | false | true | false | | `css/chunk.3.css` | [artifacts/css__chunk.3.css](artifacts/css__chunk.3.css) | 8037 | 18 | true | false | true | false | false | true | false | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-vue3-tailwindcss-v4/artifacts/css__app.css b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-vue3-tailwindcss-v4/artifacts/css__app.css index e99ebe961..8c34a48bc 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-vue3-tailwindcss-v4/artifacts/css__app.css +++ b/e2e/__snapshots__/apps-generator-mode/css-output/web/taro-webpack-vue3-tailwindcss-v4/artifacts/css__app.css @@ -1933,6 +1933,14 @@ page { -webkit-transition-timing-function: var(--ease-in-out); transition-timing-function: var(--ease-in-out); } + .before\:content-\[\'independent_subpackage_taro-webpack-vue3-tailwindcss-v4\'\]::before { + --tw-content: 'independent subpackage taro-webpack-vue3-tailwindcss-v4'; + content: var(--tw-content); + } + .before\:content-\[\'normal_subpackage_taro-webpack-vue3-tailwindcss-v4\'\]::before { + --tw-content: 'normal subpackage taro-webpack-vue3-tailwindcss-v4'; + content: var(--tw-content); + } .before\:content-\[\'现在，让我们开始神奇的_tailwindcss_开发之旅吧！\'\]::before { --tw-content: '现在，让我们开始神奇的 tailwindcss 开发之旅吧！'; content: var(--tw-content); diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/wx/mpx-tailwindcss-v4/README.md b/e2e/__snapshots__/apps-generator-mode/css-output/wx/mpx-tailwindcss-v4/README.md index 43c1f5bc5..afdee2670 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/wx/mpx-tailwindcss-v4/README.md +++ b/e2e/__snapshots__/apps-generator-mode/css-output/wx/mpx-tailwindcss-v4/README.md @@ -7,7 +7,7 @@ Entry: mpx-tailwindcss-v4/dist/wx/app.wxss | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | -| 31599 | 183 | false | false | false | true | true | false | true | +| 30217 | 183 | false | false | false | true | true | false | true | ## Generator CSS Files @@ -29,7 +29,7 @@ Entry: mpx-tailwindcss-v4/dist/wx/app.wxss | File | Artifact | Bytes | Selectors | @supports | :hover | Tailwind banner | System dark media | Manual dark selector | Raw arbitrary selector | Weapp escaped arbitrary selector | | --- | --- | ---: | ---: | --- | --- | --- | --- | --- | --- | --- | | `app.wxss` | [artifacts/app.wxss](artifacts/app.wxss) | 69 | 0 | false | false | false | false | false | false | false | -| `styles/app.wxss` | [artifacts/styles__app.wxss](artifacts/styles__app.wxss) | 26660 | 174 | false | false | false | true | true | false | true | +| `styles/app.wxss` | [artifacts/styles__app.wxss](artifacts/styles__app.wxss) | 25278 | 174 | false | false | false | true | true | false | true | | `styles/third-party-ui.wxss` | [artifacts/styles__third-party-ui.wxss](artifacts/styles__third-party-ui.wxss) | 513 | 4 | false | false | false | false | false | false | false | | `pages/component/index.wxss` | [artifacts/pages__component__index.wxss](artifacts/pages__component__index.wxss) | 35 | 1 | false | false | false | false | false | false | false | | `sub-independent/pages/index.wxss` | [artifacts/sub-independent__pages__index.wxss](artifacts/sub-independent__pages__index.wxss) | 32 | 0 | false | false | false | false | false | false | false | diff --git a/e2e/__snapshots__/apps-generator-mode/css-output/wx/mpx-tailwindcss-v4/artifacts/styles__app.wxss b/e2e/__snapshots__/apps-generator-mode/css-output/wx/mpx-tailwindcss-v4/artifacts/styles__app.wxss index 4285726bb..b61c27ad9 100644 --- a/e2e/__snapshots__/apps-generator-mode/css-output/wx/mpx-tailwindcss-v4/artifacts/styles__app.wxss +++ b/e2e/__snapshots__/apps-generator-mode/css-output/wx/mpx-tailwindcss-v4/artifacts/styles__app.wxss @@ -781,46 +781,6 @@ wx-button { } abc { background: #222; -} - /* tokens: tw-root <= src/custom-tab-bar/index.mpx */ -:host, -page, -.tw-root, -wx-root-portal-content { - --font-sans: 'inter', 'inter Fallback', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; - --spacing: 0.25rem; - --text-base: 1rem; - --radius-lg: 0.5rem; - --default-font-family: var(--font-inter), system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; - --test-color: #006241; - --color-test: #006241; - --font-test: 'Issue 978', sans-serif; - --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; - --font-mono: var(--font-plex-mono), monospace; - --color-red-500: #fb2c36; - --color-green-500: #00c758; - --color-blue-500: #3080ff; - --color-slate-900: #0f172b; - --color-white: #fff; - --color-zinc-900: rgb(24, 24, 27); - --color-red-50: #fef2f2; - --color-red-950: #460809; - --color-orange-500: #fe6e00; - --color-amber-500: #f99c00; - --color-yellow-500: #edb200; - --color-lime-500: #80cd00; - --color-teal-500: #00baa7; - --color-sky-500: #00a5ef; - --color-indigo-500: #625fff; - --color-violet-500: #8d54ff; - --color-purple-500: #ac4bff; - --color-pink-500: #f6339a; - --color-gray-900: #101828; - --color-neutral-900: #171717; - --color-stone-900: #1c1917; - --color-black: #000; - --font-weight-bold: 700; - --default-mono-font-family: var(--font-plex-mono), monospace; } button::after, wx-button::after { diff --git a/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-ali.json b/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-ali.json index 75777a36f..895c58771 100644 --- a/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-ali.json +++ b/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-ali.json @@ -29,7 +29,6 @@ ] }, "spacing": [ - ".25rem", "8rpx" ], "platform": "ali" diff --git a/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-dd.json b/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-dd.json index a4c8fa90a..68742745d 100644 --- a/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-dd.json +++ b/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-dd.json @@ -29,8 +29,6 @@ ] }, "spacing": [ - ".25rem", - "0.25rem", "8rpx" ], "platform": "dd" diff --git a/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-swan.json b/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-swan.json index 9b379d97d..0f32789c2 100644 --- a/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-swan.json +++ b/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-swan.json @@ -29,7 +29,6 @@ ] }, "spacing": [ - ".25rem", "8rpx" ], "platform": "swan" diff --git a/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-tt.json b/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-tt.json index ed1900893..0862860ff 100644 --- a/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-tt.json +++ b/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-tt.json @@ -29,7 +29,6 @@ ] }, "spacing": [ - ".25rem", "8rpx" ], "platform": "tt" diff --git a/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-wx.json b/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-wx.json index c62bfc207..730866ea1 100644 --- a/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-wx.json +++ b/e2e/__snapshots__/demo-matrix/mpx-tailwindcss-v4-wx.json @@ -29,7 +29,6 @@ ] }, "spacing": [ - ".25rem", "8rpx" ], "platform": "wx" diff --git a/e2e/__snapshots__/e2e/mpx-tailwindcss-v4/styles/app.wxss b/e2e/__snapshots__/e2e/mpx-tailwindcss-v4/styles/app.wxss index f13e5db3f..917b96542 100644 --- a/e2e/__snapshots__/e2e/mpx-tailwindcss-v4/styles/app.wxss +++ b/e2e/__snapshots__/e2e/mpx-tailwindcss-v4/styles/app.wxss @@ -793,50 +793,6 @@ wx-button { abc { background: #222; } -/* tokens: tw-root <= src/custom-tab-bar/index.mpx */ -:host, -page, -.tw-root, -wx-root-portal-content { - --font-sans: 'inter', 'inter Fallback', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; - --spacing: 0.25rem; - --text-base: 1rem; - --radius-lg: 0.5rem; - --default-font-family: var(--font-inter), system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; - --test-color: #006241; - --color-test: #006241; - --font-test: 'Issue 978', sans-serif; - --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; - --font-mono: var(--font-plex-mono), monospace; - --color-red-50: #fef2f2; - --color-red-500: #fb2c36; - --color-red-950: #460809; - --color-orange-500: #fe6e00; - --color-amber-500: #f99c00; - --color-yellow-500: #edb200; - --color-lime-500: #80cd00; - --color-green-500: #00c758; - --color-emerald-500: #00bb7f; - --color-teal-500: #00baa7; - --color-cyan-500: #00b7d7; - --color-sky-500: #00a5ef; - --color-blue-500: #3080ff; - --color-indigo-500: #625fff; - --color-violet-500: #8d54ff; - --color-purple-500: #ac4bff; - --color-fuchsia-500: #e12afb; - --color-pink-500: #f6339a; - --color-rose-500: #ff2357; - --color-slate-900: #0f172b; - --color-gray-900: #101828; - --color-zinc-900: #18181b; - --color-neutral-900: #171717; - --color-stone-900: #1c1917; - --color-black: #000; - --color-white: #fff; - --font-weight-bold: 700; - --default-mono-font-family: var(--font-plex-mono), monospace; -} button::after, wx-button::after { display: none; diff --git a/e2e/__snapshots__/e2e/subpackage-uni-app-vite-tailwindcss-v4/main.wxss b/e2e/__snapshots__/e2e/subpackage-uni-app-vite-tailwindcss-v4/main.wxss index f080c592f..e3ee6149d 100644 --- a/e2e/__snapshots__/e2e/subpackage-uni-app-vite-tailwindcss-v4/main.wxss +++ b/e2e/__snapshots__/e2e/subpackage-uni-app-vite-tailwindcss-v4/main.wxss @@ -50,13 +50,6 @@ wx-root-portal-content { --text-base: 32rpx; --font-weight-bold: 700; --radius-lg: 16rpx; - --status-bar-height: 25px; - --top-window-height: 0px; - --window-top: 0px; - --window-bottom: 0px; - --window-left: 0px; - --window-right: 0px; - --window-magin: 0px; } /* tokens: i-[mdi--github-circle] <= */ .i-_bmdi--github-circle_B { @@ -137,6 +130,18 @@ wx-root-portal-content { background-color: var(--color-zinc-950); } } +:host, +page, +.tw-root, +wx-root-portal-content { + --status-bar-height: 25px; + --top-window-height: 0px; + --window-top: 0px; + --window-bottom: 0px; + --window-left: 0px; + --window-right: 0px; + --window-magin: 0px; +} [data-c-h='true'] { display: none !important; } diff --git a/e2e/__snapshots__/e2e/taro-vite-react-tailwindcss-v4/app-origin.wxss b/e2e/__snapshots__/e2e/taro-vite-react-tailwindcss-v4/app-origin.wxss index 3d95b2103..8f6abf21a 100644 --- a/e2e/__snapshots__/e2e/taro-vite-react-tailwindcss-v4/app-origin.wxss +++ b/e2e/__snapshots__/e2e/taro-vite-react-tailwindcss-v4/app-origin.wxss @@ -1,3 +1,4 @@ +@charset "UTF-8"; view, text, ::after, @@ -301,15 +302,6 @@ wx-root-portal-content { --font-weight-bold: 700; --radius-lg: 16rpx; } -.h5-button::after, -wx-button::after { - display: none; - border: none; - content: ''; -} -wx-button { - background: #000; -} /* tokens: mt-2 <= src/pages/index/index.tsx */ .mt-2 { margin-top: calc(var(--spacing) * 2); @@ -965,75 +957,6 @@ wx-button { pointer-events: none; background-repeat: repeat; } -.nut-watermark-full-page { - position: fixed; -} -.nut-horizontal-items { - float: left; -} -.nut-horizontal-items .h5-li { - display: block; - float: left; - color: var(--nutui-color-title, #1a1a1a); - background: var(--nutui-color-background-overlay, #ffffff); - padding: 10rpx; - margin-right: 20rpx; -} -.nut-horizontal-items::after { - content: ''; - display: block; - visibility: hidden; - clear: both; -} -.nut-vertical-items .h5-li { - display: block; - color: var(--nutui-color-title, #1a1a1a); - background: var(--nutui-color-background-overlay, #ffffff); - border-radius: 7rpx; - box-shadow: 0 1rpx 6rpx #edeef1; - margin-top: 20rpx; - padding: 14rpx 15rpx; - font-size: 13rpx; - line-height: 18rpx; - font-family: PingFangSC; - font-weight: 500; -} -.nut-virtualList-box { - overflow: auto; -} -.nut-virtuallist { - width: 100%; - overflow: scroll; - position: relative; - -webkit-overflow-scrolling: touch; -} -.nut-virtuallist-phantom { - position: absolute; - left: 0; - top: 0; - right: 0; - z-index: -1; -} -.nut-virtuallist-container { - position: absolute; - left: 0; - right: 0; - top: 0; -} -.nut-virtuallist-item { - overflow: hidden; - margin: var(--nutui-list-item-margin, 0 0 10rpx 0); -} -[dir='rtl'] .nut-horizontal-items, -.nut-rtl .nut-horizontal-items { - float: right; -} -[dir='rtl'] .nut-horizontal-items .h5-li, -.nut-rtl .nut-horizontal-items .h5-li { - float: right; - margin-right: 0; - margin-left: 20rpx; -} .nut-uploader { position: relative; display: -ms-flexbox; @@ -1041,9 +964,6 @@ wx-button { -ms-flex-wrap: wrap; flex-wrap: wrap; } -.nut-uploader-slot { - position: relative; -} .nut-uploader-upload { position: relative; display: -ms-flexbox; @@ -1069,40 +989,6 @@ wx-button { align-items: center; color: var(--nutui-uploader-image-color, var(--nutui-color-text-help, #888b94)); } -.nut-uploader-icon .h5-i, -.nut-uploader-icon .nut-icon { - color: var(--nutui-uploader-image-color, var(--nutui-color-text-help, #888b94)); - margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); -} -.nut-uploader-icon-tip { - font-size: var(--nutui-uploader-image-icon-tip-font-size, 12rpx); -} -.nut-uploader-input { - position: absolute !important; - top: 0; - left: 0; - width: 100% !important; - height: 100% !important; - overflow: hidden; - cursor: pointer; - opacity: 0; -} -.nut-uploader-upload-disabled { - background: var(--nutui-uploader-background-disabled, var(--nutui-color-background, #f2f3f5)); - color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled, #c2c4cc)); -} -.nut-uploader-upload-disabled .nut-uploader-icon .h5-i, -.nut-uploader-upload-disabled .nut-uploader-icon .nut-icon { - color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled, #c2c4cc)); - margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); -} -.nut-uploader-preview { - position: relative; - margin-right: var(--nutui-uploader-preview-margin-right, 10rpx); - margin-bottom: var(--nutui-uploader-preview-margin-bottom, 10rpx); - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); - box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); -} .nut-uploader-preview-progress { position: absolute; left: 0; @@ -1121,20 +1007,6 @@ wx-button { border-radius: var(--nutui-uploader-image-border-radius, 4rpx); z-index: 10; } -.nut-uploader-preview-progress .h5-i { - margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); -} -.nut-uploader-preview-progress-msg { - color: var(--nutui-color-text-help, #888b94); - font-size: 12rpx; -} -.nut-uploader-preview.list { - width: 100%; - margin-right: 0; - margin-bottom: 0; - margin-top: 10rpx; - box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.01176); -} .nut-uploader-preview-list { width: 100%; height: 32rpx; @@ -1160,15 +1032,6 @@ wx-button { overflow: hidden; text-overflow: ellipsis; } -.nut-uploader-preview-list .nut-progress { - position: absolute; - left: 0; - right: 0; - bottom: 0; -} -.nut-uploader-preview-list .nut-progress .nut-progress-outer { - height: 2rpx !important; -} .nut-uploader-preview .close { position: absolute; right: var(--nutui-uploader-preview-close-right, 0rpx); @@ -1177,36 +1040,6 @@ wx-button { transform: translate(50%, -50%); z-index: 1; } -.nut-uploader-preview-img { - position: relative; - width: var(--nutui-uploader-image-width, 100rpx); - height: var(--nutui-uploader-image-height, 100rpx); - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); - overflow: hidden; -} -.nut-uploader-preview-img .h5-i { - color: var(--nutui-color-title, #1a1a1a); -} -.nut-uploader-preview-img .tips { - position: absolute; - bottom: 0; - left: 0; - font-size: 12rpx; - color: #fff; - text-align: center; - box-sizing: border-box; - height: var(--nutui-uploader-preview-tips-height, 24rpx); - line-height: var(--nutui-uploader-preview-tips-height, 24rpx); - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); - border-top-left-radius: 0; - border-top-right-radius: 0; - padding: var(--nutui-uploader-preview-tips-padding, 0 5rpx); - background: var(--nutui-uploader-preview-tips-background, var(--nutui-black-7)); - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} .nut-uploader-preview-img-c { display: -ms-flexbox; display: flex; @@ -1242,36 +1075,10 @@ wx-button { overflow: hidden; word-break: break-all; } -.nut-uploader-preview-img-file-name.error { - color: red !important; -} -.nut-uploader-preview-img-file-name.success { - color: #1890ff !important; -} .nut-uploader-preview-img-file-name .nut-icon-Link { -ms-flex-negative: 0; flex-shrink: 0; } -[dir='rtl'] .nut-uploader-input, -.nut-rtl .nut-uploader-input { - left: auto; - right: 0; -} -[dir='rtl'] .nut-uploader-preview, -.nut-rtl .nut-uploader-preview { - margin-right: 0; - margin-left: var(--nutui-uploader-preview-margin-right, 10rpx); -} -[dir='rtl'] .nut-uploader-preview-progress, -.nut-rtl .nut-uploader-preview-progress { - left: auto; - right: 0; -} -[dir='rtl'] .nut-uploader-preview.list, -.nut-rtl .nut-uploader-preview.list { - margin-right: 0; - margin-left: 0; -} [dir='rtl'] .nut-uploader-preview .close, .nut-rtl .nut-uploader-preview .close { right: auto; @@ -1279,11 +1086,6 @@ wx-button { -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } -[dir='rtl'] .nut-uploader-preview-img .tips, -.nut-rtl .nut-uploader-preview-img .tips { - left: auto; - right: 0; -} .nut-video { width: 100%; height: 100%; @@ -1291,47 +1093,12 @@ wx-button { display: -ms-flexbox; display: flex; } -.nut-video-player { - width: 100%; - background: #000; -} .nut-video .h5-video { width: 100%; height: 100%; -o-object-fit: fill; object-fit: fill; } -.nut-tour-mask { - position: fixed; - box-shadow: 0 0 0 150vh var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); - border-radius: var(--nutui-tour-mask-border-radius, 10rpx); - z-index: 999; -} -.nut-tour-mask-none { - box-shadow: none; -} -.nut-tour-mask-hidden { - opacity: 0; -} -.nut-tour-content { - display: block; - padding: var(--nutui-tour-content-padding, 10rpx 12rpx); - min-width: var(--nutui-tour-content-min-width, 200rpx); - box-sizing: content-box; -} -.nut-tour-content-top { - display: block; - text-align: right; -} -.nut-tour-content-top-close { - --nut-icon-width: 10rpx; - --nut-icon-height: 10rpx; -} -.nut-tour-content-inner { - margin: var(--nutui-tour-content-inner-margin, 10rpx 0rpx); - font-size: var(--nutui-tour-content-inner-font-size, 14rpx); - white-space: nowrap; -} .nut-tour-content-bottom { margin-top: var(--nutui-tour-content-bottom-margin-top, 10rpx); display: -ms-flexbox; @@ -1345,81 +1112,15 @@ wx-button { -ms-flex-pack: end; justify-content: flex-end; } -.nut-tour-content-bottom-operate-btn { - display: inline-block; - border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); - margin-left: var(--nutui-tour-content-bottom-btn-margin-left, 4rpx); - padding: var(--nutui-tour-content-bottom-btn-padding, 2rpx 4rpx); - font-size: var(--nutui-tour-content-bottom-btn-font-size, 12rpx); - border-radius: var(--nutui-tour-content-bottom-btn-border-radius, 4rpx); - color: var(--nutui-color-text, #505259); - cursor: pointer; -} -.nut-tour-content-bottom-operate-btn.active { - color: #fff; - border: 0; - background: var(--nutui-color-primary, #ff0f23); -} -.nut-tour-content-tile .nut-tour-content-inner { - margin: 0; -} -.nut-tour-masked { - position: fixed; - width: 100vh; - height: 100vh; - z-index: 1000; - top: 0; - left: 0; - background: transparent; -} -[dir='rtl'] .nut-tour-content-bottom-operate-btn, -.nut-rtl .nut-tour-content-bottom-operate-btn { - margin-left: 0; - margin-right: var(--nutui-tour-content-bottom-btn-margin-left, 4rpx); -} -[dir='rtl'] .nut-tour-masked, -.nut-rtl .nut-tour-masked { - left: auto; - right: 0; -} -.nut-trendarrow { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-trendarrow-font-size, 14rpx); -} -.nut-trendarrow-icon-before { - margin-right: var(--nutui-trendarrow-icon-margin, 4rpx); -} -.nut-trendarrow-icon-after { - margin-left: var(--nutui-trendarrow-icon-margin, 4rpx); -} -.nut-trendarrow-rate { - vertical-align: middle; - display: inline; -} -.nut-trendarrow .nut-icon { - vertical-align: middle; -} -[dir='rtl'] .nut-trendarrow-icon-before, -.nut-rtl .nut-trendarrow-icon-before { - margin-right: 0; - margin-left: var(--nutui-trendarrow-icon-margin, 4rpx); -} -[dir='rtl'] .nut-trendarrow-icon-after, -.nut-rtl .nut-trendarrow-icon-after { - margin-left: 0; - margin-right: var(--nutui-trendarrow-icon-margin, 4rpx); -} -@keyframes rotation { - 0% { - } - to { - } +.nut-trendarrow { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + align-items: center; + color: var(--nutui-color-title, #1a1a1a); + font-size: var(--nutui-trendarrow-font-size, 14rpx); } .nut-toast { position: fixed; @@ -1438,13 +1139,6 @@ wx-button { pointer-events: none; z-index: 1300; } -.nut-toast-overlay-default { - --nutui-overlay-bg-color: rgba(0, 0, 0, 0); -} -.nut-toast-overlay-default-taro { - background-color: rgba(0, 0, 0, 0); - --nutui-overlay-bg-color: rgba(0, 0, 0, 0); -} .nut-toast-inner { position: absolute; top: var(--nutui-toast-inner-top, 50%); @@ -1469,52 +1163,6 @@ wx-button { border-radius: var(--nutui-toast-inner-border-radius, var(--nutui-radius-xl, 12rpx)); color: var(--nutui-toast-font-color, #ffffff); } -.nut-toast-inner-descrption { - max-width: 68.2%; -} -.nut-toast-inner-normal { - word-break: normal; - word-wrap: normal; -} -.nut-toast-inner-break-word { - word-break: normal; - word-wrap: break-word; -} -.nut-toast-inner-small { - font-size: var(--nutui-font-size-s, 12rpx); -} -.nut-toast-inner-large { - font-size: var(--nutui-font-size-l, 15rpx); -} -.nut-toast-center { - top: var(--nutui-toast-inner-top, 48%); -} -.nut-toast-bottom { - top: var(--nutui-toast-inner-top, 80%); -} -.nut-toast-top { - top: var(--nutui-toast-inner-top, 20%); -} -.nut-toast-text { - color: #fff; - text-align: var(--nutui-toast-inner-text-align, center); - line-height: normal; - line-height: 20rpx; - height: auto; -} -.nut-toast-title { - color: #fff; - font-size: var(--nutui-toast-title-font-size, 16rpx); - font-weight: 600; - text-align: var(--nutui-toast-inner-text-align, center); - line-height: normal; - line-height: 22rpx; -} -.nut-toast .nut-icon { - width: 24rpx; - height: 24rpx; - color: #fff; -} .nut-toast-icon-wrapper { width: 100%; display: -ms-flexbox; @@ -1526,36 +1174,6 @@ wx-button { margin: 3rpx 0 5rpx; color: #fff; } -.nut-toast-icon-wrapper-icon { - width: 24rpx; - height: 24rpx; -} -.nut-toast-rtl { - left: auto; - right: 0; -} -.nut-toast-rtl-inner { - left: auto; - right: 50%; -} -[dir='rtl'] .nut-toast, -.nut-rtl .nut-toast { - left: auto; - right: 0; -} -[dir='rtl'] .nut-toast-inner, -.nut-rtl .nut-toast-inner { - left: auto; - right: 50%; -} -.toast-fade-enter-active, -.toast-fade-leave-active { - transition: opacity 0.3s; -} -.toast-fade-enter-from, -.toast-fade-leave-to { - opacity: 0; -} .nut-timeselect { background-color: var(--nutui-color-background-overlay, #ffffff); display: -ms-flexbox; @@ -1570,26 +1188,6 @@ wx-button { -ms-flex: 1; flex: 1; } -.nut-timeselect-content-left { - width: var(--nutui-timeselect-date-width, 140rpx); - min-width: var(--nutui-timeselect-date-width, 140rpx); - height: 100%; - overflow: auto; - background: var(--nutui-color-background-sunken, #f7f8fc); -} -.nut-timepannel { - padding: 0 16rpx; - height: var(--nutui-timeselect-date-height, 40rpx); - line-height: var(--nutui-timeselect-date-height, 40rpx); - text-align: left; - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-font-size-base, 14rpx); -} -.nut-timepannel.active { - background: var(--nutui-color-background-overlay, #ffffff); - color: var(--nutui-timeselect-date-active-color, var(--nutui-color-title, #1a1a1a)); - font-weight: var(--nutui-font-weight-bold, 600); -} .nut-timedetail { display: -ms-flexbox; display: flex; @@ -1602,27 +1200,6 @@ wx-button { flex-wrap: wrap; padding: 0 0 50rpx 12rpx; } -.nut-timedetail-item { - width: var(--nutui-timeselect-time-width, 100rpx); - height: var(--nutui-timeselect-time-height, 50rpx); - line-height: var(--nutui-timeselect-time-height, 50rpx); - text-align: center; - margin: var(--nutui-timeselect-time-margin, 0 10rpx 10rpx 0); - background: var(--nutui-timeselect-time-background, var(--nutui-color-background, #f2f3f5)); - border-radius: 5rpx; - font-size: var(--nutui-font-size-base, 14rpx); - border: 1rpx solid transparent; -} -.nut-timedetail-item.active { - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); - border: 1rpx solid var(--nutui-color-primary, #ff0f23); - color: var(--nutui-color-primary, #ff0f23); - font-weight: var(--nutui-font-weight-bold, 600); -} -[dir='rtl'] .nut-timedetail, -.nut-rtl .nut-timedetail { - padding: 0 12rpx 50rpx 0; -} .nut-tag { padding: var(--nutui-tag-padding, 0rpx 2rpx); display: -ms-flexbox; @@ -1639,45 +1216,6 @@ wx-button { color: var(--nutui-tag-color, #ffffff); border: var(--nutui-tag-border-width, 1rpx) solid transparent; } -.nut-tag .nut-icon { - vertical-align: middle; - margin-left: 4rpx; - color: var(--nutui-tag-color, #ffffff); -} -.nut-tag-text { - font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10rpx)); - color: var(--nutui-tag-color, #ffffff); -} -.nut-tag-text-plain { - color: var(--nutui-color-title, #1a1a1a); -} -.nut-tag-default { - background: var(--nutui-tag-background-color, var(--nutui-color-title, #1a1a1a)); -} -.nut-tag-primary { - background: var(--nutui-tag-primary-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%)); -} -.nut-tag-info { - background: var(--nutui-tag-info-background-color, var(--nutui-color-info, #0073ff)); -} -.nut-tag-success { - background: var(--nutui-tag-success-background-color, #4fc08d); -} -.nut-tag-danger { - background: var(--nutui-tag-danger-background-color, var(--nutui-color-danger, #ff0f23)); -} -.nut-tag-warning { - background: var(--nutui-tag-warning-background-color, var(--nutui-color-warning, #ffbf00)); -} -.nut-tag-round { - border-radius: var(--nutui-tag-round-border-radius, 8rpx); -} -.nut-tag-mark { - border-radius: var(--nutui-tag-mark-border-radius, 0 8rpx 8rpx 0); -} -.nut-tag-close { - cursor: pointer; -} .nut-tag-custom-icon { display: -ms-flexbox; display: flex; @@ -1691,15 +1229,6 @@ wx-button { color: var(--nutui-tag-color, #ffffff); margin-left: 4rpx; } -.nut-tag-plain { - background-color: #fff; - border: var(--nutui-tag-border-width, 1rpx) solid var(--nutui-color-title, #1a1a1a); -} -[dir='rtl'] .nut-tag .nut-icon, -.nut-rtl .nut-tag .nut-icon { - margin-left: 0; - margin-right: 4rpx; -} .nut-textarea { display: -ms-flexbox; display: flex; @@ -1711,70 +1240,20 @@ wx-button { font-size: var(--nutui-font-size-base, 14rpx); border-radius: var(--nutui-radius-s, 6rpx); } -.nut-textarea-container { - padding: var(--nutui-textarea-padding, 12rpx); - background-color: var(--nutui-color-background-overlay, #ffffff); -} .nut-textarea-error { border: 0.5rpx solid var(--nutui-color-danger, #ff0f23); background-color: var(--nutui-color-danger-light, #ffebef); } -.nut-textarea-limit { - text-align: right; - font-size: var(--nutui-font-size-base, 14rpx); - line-height: var(--nutui-font-size-base, 14rpx); - margin-top: var(--nutui-spacing-base, 8rpx); +.nut-textarea-textarea::-moz-placeholder { color: var(--nutui-color-text-help, #888b94); } -.nut-textarea-limit-disabled { - cursor: not-allowed; - color: var(--nutui-color-text-disabled, #c2c4cc); -} -.nut-textarea-textarea { - outline: none; - display: block; - box-sizing: border-box; - width: 100%; - height: 40rpx; - min-width: 0; - margin: 0; - padding: 0; - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-textarea-text-color, var(--nutui-color-title, #1a1a1a)); - caret-color: var(--nutui-textarea-text-curror-color, var(--nutui-color-primary, #ff0f23)); - text-align: left; - background-color: transparent; - border: 0; - resize: none; -} -.nut-textarea-textarea .taro-textarea { - color: var(--nutui-textarea-text-color, var(--nutui-color-title, #1a1a1a)); - background-color: transparent; - resize: none; -} -.nut-textarea-textarea::-webkit-input-placeholder { - color: var(--nutui-color-text-help, #888b94); -} -.nut-textarea-textarea::-moz-placeholder { - color: var(--nutui-color-text-help, #888b94); -} -.nut-textarea-textarea:-ms-input-placeholder { - color: var(--nutui-color-text-help, #888b94); -} -.nut-textarea-textarea::-ms-input-placeholder { - color: var(--nutui-color-text-help, #888b94); -} -.nut-textarea-textarea::placeholder { - color: var(--nutui-color-text-help, #888b94); -} -.nut-textarea-textarea-disabled { - cursor: not-allowed; - color: var(--nutui-color-text-disabled, #c2c4cc); -} -.nut-textarea-textarea-disabled::-webkit-input-placeholder { - color: var(--nutui-color-text-disabled, #c2c4cc); -} -.nut-textarea-textarea-disabled::-moz-placeholder { +.nut-textarea-textarea:-ms-input-placeholder { + color: var(--nutui-color-text-help, #888b94); +} +.nut-textarea-textarea::-ms-input-placeholder { + color: var(--nutui-color-text-help, #888b94); +} +.nut-textarea-textarea-disabled::-moz-placeholder { color: var(--nutui-color-text-disabled, #c2c4cc); } .nut-textarea-textarea-disabled:-ms-input-placeholder { @@ -1783,15 +1262,6 @@ wx-button { .nut-textarea-textarea-disabled::-ms-input-placeholder { color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-textarea-textarea-disabled::placeholder { - color: var(--nutui-color-text-disabled, #c2c4cc); -} -.nut-textarea-textarea-disabled .taro-textarea { - color: var(--nutui-color-text-disabled, #c2c4cc); -} -.nut-textarea-textarea-disabled .taro-textarea::-webkit-input-placeholder { - color: var(--nutui-color-text-disabled, #c2c4cc); -} .nut-textarea-textarea-disabled .taro-textarea::-moz-placeholder { color: var(--nutui-color-text-disabled, #c2c4cc); } @@ -1801,17 +1271,6 @@ wx-button { .nut-textarea-textarea-disabled .taro-textarea::-ms-input-placeholder { color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-textarea-textarea-disabled .taro-textarea::placeholder { - color: var(--nutui-color-text-disabled, #c2c4cc); -} -.nut-textarea.nut-textarea-rtl-limit { - right: auto; - left: 15rpx; -} -.taro-textarea { - background-color: transparent; - resize: none; -} .nut-tabs { display: -ms-flexbox; display: flex; @@ -1833,11 +1292,6 @@ wx-button { background: var(--nutui-tabs-titles-background-color, var(--nutui-color-background, #f2f3f5)); scrollbar-width: none; } -.nut-tabs-titles::-webkit-scrollbar { - display: none; - width: 0; - background: transparent; -} .nut-tabs-titles .nut-tabs-list { width: 100%; display: -ms-flexbox; @@ -1849,16 +1303,10 @@ wx-button { -ms-flex-pack: start; justify-content: flex-start; } -.nut-tabs-titles-left .nut-tabs-titles-item { - padding: 0 22rpx; -} .nut-tabs-titles-right { -ms-flex-pack: end; justify-content: flex-end; } -.nut-tabs-titles-right .nut-tabs-titles-item { - padding: 0 22rpx; -} .nut-tabs-titles-item { position: relative; display: -ms-flexbox; @@ -1878,17 +1326,11 @@ wx-button { text-overflow: ellipsis; white-space: nowrap; } -.nut-tabs-titles-item .nut-icon { - color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a)); -} .nut-tabs-titles-item-left, .nut-tabs-titles-item-right { -ms-flex: none; flex: none; } -.nut-tabs-titles-item-text { - color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a)); -} .nut-tabs-titles-item-smile, .nut-tabs-titles-item-line { position: absolute; @@ -1904,57 +1346,6 @@ wx-button { opacity: var(--nutui-tabs-tab-line-opacity, 1); overflow: hidden; } -.nut-tabs-titles-item-smile { - bottom: var(--nutui-tabs-titles-item-smile-bottom, -10%); -} -.nut-tabs-titles-item-smile .nut-icon { - position: absolute; - font-size: 20rpx; - width: 100%; - height: 100%; -} -.nut-tabs-titles-item-active .nut-icon { - color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-tabs-titles-item-active .nut-tabs-titles-item-text { - color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); - font-weight: var(--nutui-tabs-titles-item-active-font-weight, var(--nutui-font-weight-bold, 600)); -} -.nut-tabs-titles-item-active .nut-tabs-titles-item-line { - overflow: visible; - overflow: initial; - content: ' '; - width: var(--nutui-tabs-tab-line-width, 12rpx); - height: var(--nutui-tabs-tab-line-height, 2rpx); - background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-tabs-titles-item-active .nut-tabs-titles-item-smile { - overflow: visible; - overflow: initial; - width: 40rpx; - height: 20rpx; -} -.nut-tabs-titles-item-active .nut-tabs-titles-item-smile .nut-icon { - color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-tabs-titles-item-disabled, -.nut-tabs-titles-item-disabled .nut-icon, -.nut-tabs-titles-item-disabled .nut-tabs-titles-item-text { - color: var(--nutui-color-text-disabled, #c2c4cc); -} -.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-tabs-titles-item-text, -.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-icon { - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-l, 15rpx)); -} -.nut-tabs-titles-card .nut-tabs-titles-item-active { - font-weight: var(--nutui-font-weight-bold, 600); - background-color: #fff; - border-radius: var(--nutui-radius-base, 8rpx) var(--nutui-radius-base, 8rpx) 0 0; -} -.nut-tabs-titles-button .nut-tabs-titles-item { - padding: 0 10rpx; -} .nut-tabs-titles-button .nut-tabs-titles-item .nut-tabs-titles-item-text { -ms-flex: 1; flex: 1; @@ -1967,20 +1358,6 @@ wx-button { justify-content: center; padding: 0 8rpx; } -.nut-tabs-titles-button .nut-tabs-titles-item-active .nut-tabs-titles-item-text { - background: var(--nutui-color-default-light); - color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); - border-radius: var(--nutui-tabs-button-border-radius, 50rpx); - font-weight: var(--nutui-font-weight-bold, 600); - background-color: var(--nutui-tabs-button-active-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); - border: var(--nutui-tabs-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); -} -.nut-tabs-titles-divider { - border-bottom: 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)); -} -.nut-tabs-titles-divider .nut-tabs-titles-item { - position: relative; -} .nut-tabs-titles-divider .nut-tabs-titles-item::after { content: ''; position: absolute; @@ -1992,15 +1369,6 @@ wx-button { -ms-transform: translateY(-50%); transform: translateY(-50%); } -.nut-tabs-titles-divider .nut-tabs-titles-item:last-child::after { - display: none; -} -.nut-tabs-vertical .nut-tabs-ellipsis { - white-space: break-spaces; - padding-left: 6rpx; - width: 90rpx; - line-height: var(--nutui-font-size-base, 14rpx); -} .nut-tabs-vertical .nut-tabs-titles { -ms-flex-direction: column; flex-direction: column; @@ -2018,30 +1386,11 @@ wx-button { -ms-flex: none; flex: none; } -.nut-tabs-vertical .nut-tabs-titles-item-smile { - overflow: hidden; - transition: width 0.3s ease; -} .nut-tabs-vertical .nut-tabs-titles-item-line { -ms-transform: translateY(-50%); transform: translateY(-50%); transition: height 0.3s ease; } -.nut-tabs-vertical .nut-tabs-titles-item-line-vertical { - top: 50%; -} -.nut-tabs-vertical .nut-tabs-titles-item-active { - background-color: var(--nutui-tabs-titles-item-active-background-color, var(--nutui-color-background-overlay, #ffffff)); -} -.nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line { - left: 10rpx; - width: var(--nutui-tabs-vertical-tab-line-width, 3rpx); - height: var(--nutui-tabs-vertical-tab-line-height, 12rpx); - background: var( - --nutui-tabs-vertical-tab-line-color, - linear-gradient(180deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-light-pressed, #ffebf1) 100%) - ); -} .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { right: -12rpx; bottom: -2%; @@ -2065,10 +1414,6 @@ wx-button { -ms-flex-direction: row; flex-direction: row; } -.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active { - background-color: transparent; - background-color: initial; -} .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line { left: 50%; -ms-transform: translate(-50%); @@ -2093,17 +1438,11 @@ wx-button { -ms-flex: 1; flex: 1; } -.nut-tabs-vertical .nut-tabs-content .nut-tabpane { - height: 100%; -} .nut-tabs-content { display: -ms-flexbox; display: flex; box-sizing: border-box; } -.nut-tabs-content-wrap { - overflow: hidden; -} [dir='rtl'] .nut-tabs-titles-item-smile, [dir='rtl'] .nut-tabs-titles-item-line, .nut-rtl .nut-tabs-titles-item-smile, @@ -2113,21 +1452,6 @@ wx-button { -ms-transform: translate(50%); transform: translate(50%); } -[dir='rtl'] .nut-tabs-titles-divider .nut-tabs-titles-item::after, -.nut-rtl .nut-tabs-titles-divider .nut-tabs-titles-item::after { - right: auto; - left: 0; -} -[dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item, -.nut-rtl .nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item { - padding-left: 0; - padding-right: 14rpx; -} -[dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line, -.nut-rtl .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line { - left: auto; - right: 10rpx; -} [dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile, .nut-rtl .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { left: -12rpx; @@ -2160,16 +1484,6 @@ wx-button { box-sizing: border-box; overflow: auto; } -.nut-tabpane.inactive { - overflow: visible; - height: 0; -} -.nut-table { - overflow: hidden; - position: relative; - word-wrap: break-word; - word-break: break-all; -} .nut-table-wrapper { display: -ms-flexbox; display: flex; @@ -2183,9 +1497,6 @@ wx-button { position: relative; border: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-table-wrapper-sticky { - overflow-x: auto; -} .nut-table-main { display: table; width: -moz-max-content; @@ -2197,195 +1508,44 @@ wx-button { min-width: 100%; position: relative; } -.nut-table-main-striped .nut-table-main-head-tr { - background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f2f3f5)); +.nut-table-main-head-tr-td-nodata, +.nut-table-main-body-tr-td-nodata { + display: -ms-flexbox; + display: flex; + height: 50rpx; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; } -.nut-table-main-striped .nut-table-main-body-tr:nth-child(odd) { - background-color: var(--nutui-table-tr-odd-bg-color, #ffffff); +.nut-table-sticky-left, +.nut-table-sticky-right { + position: absolute; + top: 0; + width: 8rpx; + bottom: -1rpx; + overflow-x: hidden; + overflow-y: hidden; + box-shadow: none; + -ms-touch-action: none; + touch-action: none; + pointer-events: none; + z-index: 3; + background: transparent; } -.nut-table-main-striped .nut-table-main-body-tr:nth-child(2n) { - background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f2f3f5)); -} -.nut-table-main-head, -.nut-table-main-body { - background: inherit; -} -.nut-table-main-head-tr, -.nut-table-main-body-tr { - display: table-row; - background: inherit; -} -.nut-table-main-head-tr:last-child .nut-table-main-body-tr-td, -.nut-table-main-body-tr:last-child .nut-table-main-body-tr-td { - border-bottom: none; -} -.nut-table-main-head-tr-th, -.nut-table-main-body-tr-th { - display: table-cell; - padding: var(--nutui-table-cols-padding, 10rpx); - table-layout: fixed; - background: inherit; - position: sticky; - top: 0; -} -.nut-table-main-head-tr-th.nut-table-fixed-left, -.nut-table-main-head-tr-th.nut-table-fixed-right, -.nut-table-main-body-tr-th.nut-table-fixed-left, -.nut-table-main-body-tr-th.nut-table-fixed-right { - z-index: 4; -} -.nut-table-main-head-tr-th:last-child, -.nut-table-main-body-tr-th:last-child { - border-right: none; -} -.nut-table-main-head-tr-td, -.nut-table-main-body-tr-td { - display: table-cell; - padding: var(--nutui-table-cols-padding, 10rpx); - table-layout: fixed; - background: inherit; -} -.nut-table-main-head-tr-td:last-child, -.nut-table-main-body-tr-td:last-child { - border-right: none; -} -.nut-table-main-head-tr-td-nodata, -.nut-table-main-body-tr-td-nodata { - display: -ms-flexbox; - display: flex; - height: 50rpx; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; -} -.nut-table-main-head-tr-border, -.nut-table-main-body-tr-border { - border-right: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - border-bottom: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); -} -.nut-table-main-head-tr-alignleft, -.nut-table-main-head-tr-align, -.nut-table-main-body-tr-alignleft, -.nut-table-main-body-tr-align { - text-align: left; -} -.nut-table-main-head-tr-aligncenter, -.nut-table-main-body-tr-aligncenter { - text-align: center; -} -.nut-table-main-head-tr-alignright, -.nut-table-main-body-tr-alignright { - text-align: right; -} -.nut-table-main-head { - display: table-header-group; -} -.nut-table-main-body { - display: table-row-group; -} -.nut-table-sticky-left, -.nut-table-sticky-right { - position: absolute; - top: 0; - width: 8rpx; - bottom: -1rpx; - overflow-x: hidden; - overflow-y: hidden; - box-shadow: none; - -ms-touch-action: none; - touch-action: none; - pointer-events: none; - z-index: 3; - background: transparent; -} -.nut-table-sticky-left { - left: 1rpx; - box-shadow: var(--nutui-table-sticky-left-shadow, 4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); -} -.nut-table-sticky-right { - right: 1rpx; - box-shadow: var(--nutui-table-sticky-right-shadow, -4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); -} -.nut-table-fixed-left, -.nut-table-fixed-right { - position: sticky; - z-index: 2; -} -.nut-table-fixed-left.h5-div, -.nut-table-fixed-right.h5-div { - padding: var(--nutui-table-cols-padding, 10rpx) 0; -} -.nut-table-fixed-left-last { - border-right: none; -} -.nut-table-summary { - color: var(--nutui-color-title, #1a1a1a); - background-color: var(--nutui-color-background-overlay, #ffffff); - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - height: 30rpx; - padding: var(--nutui-table-cols-padding, 10rpx); - position: relative; - z-index: 5; -} -[dir='rtl'] .nut-table-main-head-tr-th:last-child, -[dir='rtl'] .nut-table-main-body-tr-th:last-child, -.nut-rtl .nut-table-main-head-tr-th:last-child, -.nut-rtl .nut-table-main-body-tr-th:last-child { - border-right: none; - border-left: none; -} -[dir='rtl'] .nut-table-main-head-tr-td:last-child, -[dir='rtl'] .nut-table-main-body-tr-td:last-child, -.nut-rtl .nut-table-main-head-tr-td:last-child, -.nut-rtl .nut-table-main-body-tr-td:last-child { - border-right: none; - border-left: none; -} -[dir='rtl'] .nut-table-main-head-tr-border, -[dir='rtl'] .nut-table-main-body-tr-border, -.nut-rtl .nut-table-main-head-tr-border, -.nut-rtl .nut-table-main-body-tr-border { - border-right: none; - border-left: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); -} -[dir='rtl'] .nut-table-main-head-tr-alignleft, -[dir='rtl'] .nut-table-main-head-tr-align, -[dir='rtl'] .nut-table-main-body-tr-alignleft, -[dir='rtl'] .nut-table-main-body-tr-align, -.nut-rtl .nut-table-main-head-tr-alignleft, -.nut-rtl .nut-table-main-head-tr-align, -.nut-rtl .nut-table-main-body-tr-alignleft, -.nut-rtl .nut-table-main-body-tr-align { - text-align: right; -} -[dir='rtl'] .nut-table-main-head-tr-alignright, -[dir='rtl'] .nut-table-main-body-tr-alignright, -.nut-rtl .nut-table-main-head-tr-alignright, -.nut-rtl .nut-table-main-body-tr-alignright { - text-align: left; -} -[dir='rtl'] .nut-table-sticky-left, -.nut-rtl .nut-table-sticky-left { - left: auto; - right: 1rpx; - box-shadow: var(--nutui-table-sticky-right-shadow, -4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); -} -[dir='rtl'] .nut-table-sticky-right, -.nut-rtl .nut-table-sticky-right { - right: auto; - left: 1rpx; - box-shadow: var(--nutui-table-sticky-left-shadow, 4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); -} -[dir='rtl'] .nut-table-fixed-left-last, -.nut-rtl .nut-table-fixed-left-last { - border-right: none; - border-left: none; +.nut-table-summary { + color: var(--nutui-color-title, #1a1a1a); + background-color: var(--nutui-color-background-overlay, #ffffff); + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + height: 30rpx; + padding: var(--nutui-table-cols-padding, 10rpx); + position: relative; + z-index: 5; } .nut-tabbar-item { display: -ms-flexbox; @@ -2400,63 +1560,16 @@ wx-button { color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a)); height: 100%; } -.nut-tabbar-item .nut-icon { - width: 24rpx; - height: 24rpx; - font-size: 24rpx; - color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a)); - color: inherit; -} -.nut-tabbar-item-text { - display: block; - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10rpx)); - line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10rpx)); - margin-top: var(--nutui-tabbar-text-margin-top, 4rpx); -} -.nut-tabbar-item .nut-image-default { - width: 38rpx; - height: 38rpx; - border-radius: 38rpx; -} .nut-tabbar-item-large { -ms-flex-pack: center; justify-content: center; padding: 0; } -.nut-tabbar-item-large .nut-tabbar-item-text { - font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 15rpx)); - margin-top: 0; - line-height: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 15rpx)); - font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400)); -} -.nut-tabbar-item-active { - color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-tabbar-item-active .nut-tabbar-item-text, -.nut-tabbar-item-active .nut-icon { - color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23)); - color: inherit; -} -.nut-tabbar { - border: 0rpx; - box-shadow: var(--nutui-tabbar-box-shadow, none); - border-bottom: var(--nutui-tabbar-border-bottom, 0); - border-top: var(--nutui-tabbar-border-top, 0); - width: 100%; - background: var(--nutui-color-background-overlay, #ffffff); -} .nut-tabbar-wrap { height: var(--nutui-tabbar-height, 46rpx); display: -ms-flexbox; display: flex; } -.nut-tabbar-wrap-3 { - padding: 0 16rpx; -} -.nut-tabbar-wrap-2 { - padding: 0 32rpx; -} .nut-tabbar-wrap-horizontal { -ms-flex-align: center; align-items: center; @@ -2467,32 +1580,6 @@ wx-button { -ms-flex-pack: center; justify-content: center; } -.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-icon { - width: 20rpx; - height: 20rpx; -} -.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-tabbar-item-text { - margin: 0 4rpx 0 6rpx; - font-size: 14rpx; -} -.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-badge-sup::after { - border: 0; -} -.nut-tabbar-fixed { - position: fixed; - bottom: 0; - left: 0; -} -[dir='rtl'] .nut-tabbar:last-child, -.nut-rtl .nut-tabbar:last-child { - border-right: none; - border-left: 0; -} -[dir='rtl'] .nut-tabbar-fixed, -.nut-rtl .nut-tabbar-fixed { - left: auto; - right: 0; -} .nut-switch { cursor: pointer; position: relative; @@ -2535,30 +1622,6 @@ wx-button { transition: left 0.3s linear; box-shadow: var(--nutui-switch-inside-box-shadow, 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1)); } -.nut-switch-button-open { - left: calc(100% - var(--nutui-switch-height, 28rpx) + var(--nutui-switch-border-width, 2rpx)); -} -.nut-switch-button-open-rtl, -.nut-switch-button-close { - left: var(--nutui-switch-border-width, 2rpx); -} -.nut-switch-button-close-rtl { - left: calc(100% - var(--nutui-switch-height, 28rpx) + var(--nutui-switch-border-width, 2rpx)); -} -.nut-switch-button .nut-icon { - width: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); - height: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); - color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe)); -} -.nut-switch-close { - background-color: var(--nutui-switch-inactive-background-color, var(--nutui-color-text-disabled, #c2c4cc)); -} -.nut-switch-close-line { - width: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); - height: 2rpx; - background: var(--nutui-switch-inactive-line-background-color, #ffffff); - border-radius: 2rpx; -} .nut-switch-label { display: -ms-flexbox; display: flex; @@ -2571,38 +1634,6 @@ wx-button { color: var(--nutui-switch-label-text-color, #ffffff); font-size: var(--nutui-switch-label-font-size, var(--nutui-font-size-s, 12rpx)); } -.nut-switch-label .nut-icon { - color: var(--nutui-switch-label-text-color, #ffffff); -} -.nut-switch-label-open { - margin: 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx) 0 7rpx; -} -.nut-switch-label-open-rtl, -.nut-switch-label-close { - margin: 0 7rpx 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx); -} -.nut-switch-label-close-rtl { - margin: 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx) 0 7rpx; -} -.nut-switch-label-close-disabled, -.nut-switch-label-close-disabled .nut-icon { - color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc)); -} -.nut-switch-disabled { - background-color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe)); -} -.nut-switch-disabled-close { - background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-color-background, #f2f3f5)); -} -.nut-swiper-item { - height: 100%; -} -.nut-swiper { - width: 100%; - height: 100%; - overflow: hidden; - position: relative; -} .nut-swiper-canmove-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; @@ -2653,20 +1684,6 @@ wx-button { -ms-flex-negative: 0; flex-shrink: 0; } -.nut-swiper-item { - width: 100%; - height: 100%; -} -[dir='rtl'] .nut-swiper-indicator, -.nut-rtl .nut-swiper-indicator { - left: auto; - right: 50%; -} -[dir='rtl'] .nut-swiper-indicator-vertical, -.nut-rtl .nut-swiper-indicator-vertical { - left: auto; - right: 12rpx; -} .nut-swipe { display: -ms-flexbox; display: flex; @@ -2690,11 +1707,6 @@ wx-button { transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); transition-property: transform; } -.nut-swipe-left, -.nut-swipe-right { - position: absolute; - top: 0; -} .nut-swipe-left { left: 0; -ms-transform: translate(-100%); @@ -2705,9 +1717,6 @@ wx-button { -ms-transform: translate(100%); transform: translate(100%); } -.nut-sticky-fixed { - position: fixed; -} .nut-steps { display: -ms-flexbox; display: flex; @@ -2716,65 +1725,11 @@ wx-button { -ms-flex-flow: row; flex-flow: row; } -.nut-steps-horizontal .nut-step-head { - background-color: var(--nutui-steps-background-color, #ffffff); -} -.nut-steps-horizontal .nut-step-head-icon .nut-icon { - height: 10rpx; - width: 10rpx; -} -.nut-steps-horizontal .nut-step-head-icon .nut-image { - width: 100%; - height: 100%; - background-color: var(--nutui-steps-background-color, #ffffff); -} -.nut-steps-horizontal .nut-step-head-icon .nut-image .h5-img { - vertical-align: top; -} -.nut-steps-horizontal .nut-step.nut-step-process .nut-step-title { - color: var(--nutui-steps-process-title-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-steps-horizontal .nut-step.nut-step-process .nut-step-description { - color: var(--nutui-steps-process-description-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-steps-horizontal .nut-step.nut-step-wait .nut-step-title { - color: var(--nutui-steps-wait-title-color, var(--nutui-color-title, #1a1a1a)); -} -.nut-steps-horizontal .nut-step.nut-step-wait .nut-step-description { - color: var(--nutui-steps-wait-description-color, var(--nutui-color-text, #505259)); -} -.nut-steps-horizontal-single .nut-step { - padding-right: var(--nutui-steps-horizontal-item-padding-right, 28rpx); -} -.nut-steps-horizontal-single .nut-step-last { - padding-right: 0 !important; -} -.nut-steps-horizontal-single .nut-step-line { - top: 0; - right: 0; - height: var(--nutui-steps-base-head-height, 14rpx); - width: var(--nutui-steps-horizontal-item-padding-right, 28rpx); - padding: var(--nutui-steps-horizontal-item-line-padding, 0 8rpx); - box-sizing: border-box; -} -.nut-steps-horizontal-single .nut-step-title, -.nut-steps-horizontal-single .nut-step-description { - padding-left: 4rpx; -} -.nut-steps-horizontal-single .nut-step-special { - padding-right: var(--nutui-steps-horizontal-item-special-padding-right, 22rpx); -} -.nut-steps-horizontal-single .nut-step-special .nut-step-line { - width: 100%; -} .nut-steps-horizontal-single .nut-step-special .nut-step-title { padding-right: 8rpx; width: -moz-fit-content; width: fit-content; } -.nut-steps-horizontal-single.nut-steps-horizontal-count-3 .nut-step-special { - padding-right: var(--nutui-steps-horizontal-item-special-3-padding-right, 9rpx); -} .nut-steps-horizontal-double { width: 100%; -ms-flex-pack: justify; @@ -2788,12 +1743,6 @@ wx-button { -ms-flex: 1; flex: 1; } -.nut-steps-horizontal-double .nut-step-line { - top: 0; - right: -50%; - height: var(--nutui-steps-base-head-height, 14rpx); - width: 100%; -} .nut-steps-horizontal-double .nut-step-line-inner { display: -ms-flexbox; display: flex; @@ -2808,38 +1757,12 @@ wx-button { justify-content: center; margin-bottom: 6rpx; } -.nut-steps-horizontal-double .nut-step-head-dot-wrap, -.nut-steps-horizontal-double .nut-step-head-icon-wrap, -.nut-steps-horizontal-double .nut-step-head-text-wrap { - background-color: var(--nutui-steps-background-color, #ffffff); - padding: var(--nutui-steps-horizontal-item-line-padding, 0 8rpx); -} -.nut-steps-horizontal-double .nut-step-head-icon { - height: var(--nutui-steps-base-head-icon-size-right, 20rpx); - width: var(--nutui-steps-base-head-icon-size-right, 20rpx); -} -.nut-steps-horizontal-double .nut-step-head-icon .nut-icon { - height: 12rpx; - width: 12rpx; -} .nut-steps-horizontal-double .nut-step-main { -ms-flex-align: center; align-items: center; margin-left: 0; margin-top: 2rpx; } -.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-head, -.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-line { - height: var(--nutui-steps-base-head-icon-size-right, 20rpx); -} -.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-head, -.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-line { - height: var(--nutui-steps-base-head-dot-size, 6rpx); -} -.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-head, -.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-line { - height: var(--nutui-steps-base-head-text-size, 12rpx); -} .nut-steps-vertical { -ms-flex: 1; flex: 1; @@ -2847,20 +1770,6 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-steps-vertical .nut-step { - padding-bottom: var(--nutui-steps-vertical-item-padding-bottom, 13rpx); -} -.nut-steps-vertical .nut-step-last { - padding-bottom: 0 !important; -} -.nut-steps-vertical .nut-step-line { - height: calc(100% - 4rpx); - width: 1rpx; - bottom: 0; -} -.nut-steps-vertical .nut-step-line-inner { - height: 100%; -} .nut-steps-vertical .nut-step-head { -ms-flex-align: center; align-items: center; @@ -2868,14 +1777,6 @@ wx-button { justify-content: center; height: 18rpx; } -.nut-steps-vertical .nut-step-head-icon { - width: var(--nutui-steps-vertical-item-icon-size, 20rpx); - height: var(--nutui-steps-vertical-item-icon-size, 20rpx); -} -.nut-steps-vertical .nut-step-head-icon .nut-icon { - height: 12rpx; - width: 12rpx; -} .nut-steps-vertical .nut-step-main { -ms-flex: 1; flex: 1; @@ -2894,14 +1795,6 @@ wx-button { font-weight: 500; margin-bottom: var(--nutui-steps-vertical-title-margin-bottom, 4rpx); } -.nut-steps-vertical .nut-step-description { - margin: var(--nutui-steps-vertical-description-margin, 0 0 1rpx); - height: auto; - line-height: var(--nutui-steps-vertical-line-height, 18rpx); - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-steps-vertical-description-font-size, var(--nutui-font-size-base, 14rpx)); - box-sizing: border-box; -} .nut-steps-vertical .nut-step-head-dot-wrap, .nut-steps-vertical .nut-step-head-icon-wrap, .nut-steps-vertical .nut-step-head-text-wrap { @@ -2916,63 +1809,11 @@ wx-button { position: relative; z-index: 1; } -.nut-steps-vertical .nut-step-head-dot-wrap { - height: calc(var(--nutui-steps-base-head-dot-size, 6rpx) + 8rpx); -} -.nut-steps-vertical .nut-step-head-icon-wrap { - height: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 8rpx); -} -.nut-steps-vertical .nut-step-head-text-wrap { - height: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 8rpx); -} -.nut-steps-vertical-icon .nut-step-head { - width: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 1rpx); - min-width: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 1rpx); -} -.nut-steps-vertical-icon .nut-step-line { - left: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) / 2); -} -.nut-steps-vertical-dot .nut-step-head { - width: calc(var(--nutui-steps-base-head-dot-size, 6rpx) + 1rpx); -} -.nut-steps-vertical-dot .nut-step-line { - left: calc(var(--nutui-steps-base-head-dot-size, 6rpx) / 2); -} -.nut-steps-vertical-text .nut-step-head { - width: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 1rpx); - min-width: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 1rpx); -} -.nut-steps-vertical-text .nut-step-line { - left: calc(var(--nutui-steps-base-head-text-size, 12rpx) / 2); -} -.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon, -.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text, -.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon, -.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text { - background-color: var(--nutui-steps-enhanced-finish-head-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); -} -.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon .nut-icon, -.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text .nut-icon, -.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon .nut-icon, -.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text .nut-icon { - color: var(--nutui-steps-enhanced-finish-head-icon-color, var(--nutui-color-primary-stop-1, #ff475d)); -} -.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text, -.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text { - color: var(--nutui-steps-enhanced-finish-head-text-color, var(--nutui-color-primary-stop-1, #ff475d)); -} -.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-dot, -.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-dot { - background-color: var(--nutui-steps-enhanced-finish-head-dot-background-color, var(--nutui-color-primary-disabled-special, #ffadbe)); -} .nut-step { position: relative; display: -ms-flexbox; display: flex; } -.nut-step-last .nut-step-line { - display: none; -} .nut-step-head { display: -ms-flexbox; display: flex; @@ -2982,28 +1823,8 @@ wx-button { position: relative; z-index: 1; } -.nut-step-head-text { - height: var(--nutui-steps-base-head-text-size, 12rpx); - width: var(--nutui-steps-base-head-text-size, 12rpx); - background-color: var(--nutui-steps-base-head-background-color, var(--nutui-color-background, #f2f3f5)); - color: var(--nutui-steps-base-head-color, var(--nutui-color-text, #505259)); - font-size: var(--nutui-steps-base-icon-size, var(--nutui-font-size-xxs, 10rpx)); -} -.nut-step-head-icon { - height: var(--nutui-steps-base-head-icon-size, 16rpx); - width: var(--nutui-steps-base-head-icon-size, 16rpx); - background-color: var(--nutui-steps-base-head-background-color, var(--nutui-color-background, #f2f3f5)); -} -.nut-step-head-icon .nut-icon { - color: #fff; -} -.nut-step-head-dot { - height: var(--nutui-steps-base-head-dot-size, 6rpx); - width: var(--nutui-steps-base-head-dot-size, 6rpx); - background-color: var(--nutui-steps-base-head-dot-background-color, var(--nutui-color-text-disabled, #c2c4cc)); -} -.nut-step-head-dot, -.nut-step-head-icon, +.nut-step-head-dot, +.nut-step-head-icon, .nut-step-head-text { display: -ms-flexbox; display: flex; @@ -3043,10 +1864,6 @@ wx-button { justify-content: center; min-height: var(--nutui-steps-base-head-height, 14rpx); } -.nut-step-line, -.nut-step-title { - background-color: #fff; -} .nut-step-title { position: relative; z-index: 1; @@ -3057,47 +1874,6 @@ wx-button { overflow: hidden; white-space: nowrap; } -.nut-step-description { - height: 16rpx; - line-height: 16rpx; - margin-top: var(--nutui-steps-base-title-margin-bottom, 2rpx); - font-size: var(--nutui-steps-base-description-font-size, var(--nutui-font-size-xxs, 10rpx)); - color: var(--nutui-steps-base-description-color, var(--nutui-color-text-help, #888b94)); - overflow: hidden; -} -.nut-step.nut-step-process .nut-step-head-icon, -.nut-step.nut-step-process .nut-step-head-text, -.nut-step.nut-step-process .nut-step-head-dot { - background-color: var(--nutui-steps-process-head-background-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-step.nut-step-process .nut-step-head-text { - color: var(--nutui-steps-process-color, #ffffff); -} -.nut-step.nut-step-wait .nut-step-head-icon .nut-icon { - color: var(--nutui-steps-wait-icon-color, var(--nutui-color-text-help, #888b94)); -} -.nut-step.nut-step-finish .nut-step-head-icon .nut-icon { - color: var(--nutui-steps-finish-icon-color, var(--nutui-color-text-help, #888b94)); -} -.nut-step.nut-step-business .nut-step-head-text { - color: var(--nutui-steps-business-head-text-color, var(--nutui-color-service-pressed)); -} -.nut-step.nut-step-business .nut-step-title { - color: var(--nutui-steps-business-title-color, var(--nutui-color-service-pressed)); -} -.nut-step.nut-step-business .nut-step-description { - color: var(--nutui-steps-business-description-color, var(--nutui-color-service-pressed)); -} -.nut-step.nut-step-business .nut-step-head-dot { - background-color: var(--nutui-steps-business-head-dot-background-color, var(--nutui-color-service-pressed)); -} -.nut-step.nut-step-business .nut-step-head-icon, -.nut-step.nut-step-business .nut-step-head-text { - background-color: var(--nutui-steps-business-head-background-color, var(--nutui-color-service)); -} -.nut-step.nut-step-business .nut-step-head-icon .nut-icon { - color: var(--nutui-steps-business-head-icon-color, var(--nutui-color-service-pressed)); -} .nut-space { display: -ms-flexbox; display: flex; @@ -3110,30 +1886,15 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-space-vertical-item { - margin-bottom: var(--nutui-space-gap, 8rpx); -} -.nut-space-vertical-item-last { - margin-bottom: 0; -} .nut-space-horizontal { -ms-flex-direction: row; flex-direction: row; } -.nut-space-horizontal-item { - margin-right: var(--nutui-space-gap, 8rpx); -} -.nut-space-horizontal-item-last { - margin-right: 0; -} .nut-space-horizontal-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: calc(var(--nutui-space-gap, 8rpx) * -1); } -.nut-space-horizontal-wrap-item { - padding-bottom: var(--nutui-space-gap, 8rpx); -} .nut-space-align-center { -ms-flex-align: center; align-items: center; @@ -3178,20 +1939,6 @@ wx-button { -ms-flex-pack: stretch; justify-content: stretch; } -[dir='rtl'] .nut-space-horizontal > .nut-space-item, -.nut-rtl .nut-space-horizontal > .nut-space-item { - margin-right: 0; - margin-left: var(--nutui-space-gap, 8rpx); -} -[dir='rtl'] .nut-space-horizontal > .nut-space-item:last-child, -.nut-rtl .nut-space-horizontal > .nut-space-item:last-child { - margin-right: 0; - margin-left: 0; -} -.nut-skeleton { - line-height: 0rpx; - font-size: 0rpx; -} .nut-skeleton-content { position: relative; display: -ms-flexbox; @@ -3203,19 +1950,6 @@ wx-button { border-radius: var(--nutui-skeleton-line-border-radius, var(--nutui-radius-xs, 4rpx)); overflow: hidden; } -.nut-skeleton-content-normal { - height: var(--nutui-skeleton-line-normal-height, 24rpx); -} -.nut-skeleton-content-large { - height: var(--nutui-skeleton-line-large-height, 32rpx); -} -.nut-skeleton-content-small { - height: var(--nutui-skeleton-line-small-height, 16rpx); - margin-top: 8rpx; -} -.nut-skeleton-content-small-0 { - margin-top: 0; -} .nut-skeleton-animation { position: absolute; top: 0; @@ -3235,35 +1969,6 @@ wx-button { animation-iteration-count: 1; animation-timing-function: linear; } -@keyframes nut-skeleton { - 0% { - transform: translate(-100%); - } - to { - transform: translate(100%); - } -} -[dir='rtl'] .nut-skeleton-animation, -.nut-rtl .nut-skeleton-animation { - left: auto; - right: 0; - animation: nut-skeleton-rtl 2s linear 0s infinite; -} -@keyframes nut-skeleton-rtl { - 0% { - transform: translate(100%); - } - to { - transform: translate(-100%); - } -} -.nut-signature .spcanvas_WEAPP { - width: 100%; - height: 100%; -} -.nut-signature .spcanvas_WEAPP Canvas { - width: 100%; -} .nut-signature-inner { display: -ms-flexbox; display: flex; @@ -3275,9 +1980,6 @@ wx-button { border: var(--nutui-signature-border-width, 1rpx) solid var(--nutui-signature-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); background-color: var(--nutui-signature-background-color, var(--nutui-color-background-overlay, #ffffff)); } -.nut-signature-unsupport { - font-size: var(--nutui-signature-font-size, var(--nutui-font-size-base, 14rpx)); -} .nut-sidebaritem { width: 100%; height: 100%; @@ -3290,10 +1992,6 @@ wx-button { box-sizing: border-box; overflow: auto; } -.nut-sidebaritem.inactive { - overflow: visible; - height: 0; -} .nut-sidebar { display: -ms-flexbox; display: flex; @@ -3319,11 +2017,6 @@ wx-button { -ms-flex-negative: 0; flex-shrink: 0; } -.nut-sidebar-titles::-webkit-scrollbar { - display: none; - width: 0; - background: transparent; -} .nut-sidebar-titles .nut-sidebar-list { width: 100%; display: -ms-flexbox; @@ -3333,10 +2026,6 @@ wx-button { -ms-flex-negative: 0; flex-shrink: 0; } -.nut-sidebar-titles-scrollable { - overflow-x: hidden; - overflow-y: auto; -} .nut-sidebar-titles-item { cursor: pointer; display: -ms-flexbox; @@ -3349,26 +2038,6 @@ wx-button { font-size: var(--nutui-sidebar-inactive-font-size, var(--nutui-font-size-base, 14rpx)); color: var(--nutui-color-text, #505259); } -.nut-sidebar-titles-item-text { - text-align: center; - white-space: normal; - width: var(--nutui-sidebar-width, 104rpx); -} -.nut-sidebar-titles-item-active .nut-sidebar-titles-item-text { - font-family: PingFangSC-Semibold; - color: var(--nutui-sidebar-active-color, var(--nutui-color-primary, #ff0f23)); - font-weight: var(--nutui-sidebar-active-font-weight, var(--nutui-font-weight-bold, 600)); - font-size: var(--nutui-sidebar-active-font-size, var(--nutui-font-size-l, 15rpx)); -} -.nut-sidebar-titles-item-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); - cursor: not-allowed; -} -.nut-shortpassword-popup { - padding: 32rpx 24rpx 28rpx; - border-radius: 12rpx; - text-align: center; -} .nut-shortpassword-title { display: -ms-flexbox; display: flex; @@ -3389,27 +2058,6 @@ wx-button { font-size: var(--nutui-font-size-s, 12rpx); color: var(--nutui-color-text, #505259); } -.nut-shortpassword-input { - padding: 0 0 10rpx; - text-align: center; - position: relative; - overflow: hidden; -} -.nut-shortpassword-input-real { - position: absolute; - right: 0; - width: 247rpx; - height: 41rpx; - outline: 0 none; - border: 0; - text-decoration: none; - z-index: -99; -} -.nut-shortpassword-input-site { - width: 247rpx; - height: 41rpx; - border-radius: 4rpx; -} .nut-shortpassword-input-fake { top: 5%; width: 100%; @@ -3434,13 +2082,6 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-shortpassword-input-fake-li-icon { - height: 6rpx; - width: 6rpx; - border-radius: 50%; - background: #000; - display: inline-block; -} .nut-shortpassword-message { margin-top: 9rpx; display: -ms-flexbox; @@ -3449,11 +2090,6 @@ wx-button { justify-content: space-between; width: 247rpx; } -.nut-shortpassword-message-error { - line-height: 1; - font-size: var(--nutui-font-size-xs, 11rpx); - color: var(--nutui-shortpassword-error, var(--nutui-color-primary, #ff0f23)); -} .nut-shortpassword-message-forget { line-height: 1; font-size: var(--nutui-font-size-s, 12rpx); @@ -3463,9 +2099,6 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-shortpassword-message-forget .nut-icon { - margin-right: 3rpx; -} .nut-shortpassword-footer { display: -ms-flexbox; display: flex; @@ -3473,15 +2106,6 @@ wx-button { justify-content: space-between; margin-top: 20rpx; } -.nut-shortpassword-footer-cancel { - background: #fff; - border: 1rpx solid var(--nutui-color-primary, #ff0f23); - border-radius: 15rpx; - padding: 8rpx 38rpx; - line-height: 1; - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-color-primary, #ff0f23); -} .nut-shortpassword-footer-sure { background: -webkit-linear-gradient(315deg, var(--nutui-color-primary, #ff0f23) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); background: linear-gradient(135deg, var(--nutui-color-primary, #ff0f23) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); @@ -3491,16 +2115,6 @@ wx-button { font-size: var(--nutui-font-size-base, 14rpx); color: #fff; } -[dir='rtl'] .nut-shortpassword-input-real, -.nut-rtl .nut-shortpassword-input-real { - right: auto; - left: 0; -} -[dir='rtl'] .nut-shortpassword-input-fake, -.nut-rtl .nut-shortpassword-input-fake { - left: auto; - right: 0; -} [dir='rtl'] .nut-shortpassword-footer-sure, .nut-rtl .nut-shortpassword-footer-sure { background: -webkit-linear-gradient(225deg, var(--nutui-color-primary, #ff0f23) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); @@ -3535,19 +2149,6 @@ wx-button { line-height: 1; box-sizing: border-box; } -.nut-segmented-item-active { - background: var(--nutui-segmented-active-background, var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4))); -} -.nut-segmented-icon { - height: 10rpx; - width: 10rpx; - margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs, 2rpx)); -} -.nut-segmented-icon .nut-icon { - height: 10rpx; - width: 10rpx; - font-size: 10rpx; -} .nut-searchbar { display: -ms-flexbox; display: flex; @@ -3562,11 +2163,6 @@ wx-button { -ms-flex-pack: center; justify-content: center; } -.nut-searchbar .nut-icon { - width: var(--nutui-searchbar-icon-size, 20rpx); - height: var(--nutui-searchbar-icon-size, 20rpx); - font-size: var(--nutui-searchbar-icon-size, 20rpx); -} .nut-searchbar-content { position: relative; -ms-flex: 1; @@ -3592,17 +2188,6 @@ wx-button { align-items: center; color: var(--nutui-color-primary, #ff0f23); } -.nut-searchbar-leftin { - margin-right: var(--nutui-searchbar-inner-gap, 8rpx); -} -.nut-searchbar-rightin { - font-size: 15rpx; - font-weight: 500; - color: var(--nutui-color-primary, #ff0f23); -} -.nut-searchbar-rightin.nut-searchbar-icon { - color: var(--nutui-black-5); -} .nut-searchbar-input-box, .nut-searchbar-input { display: -ms-flexbox; @@ -3612,35 +2197,6 @@ wx-button { -ms-flex: 1; flex: 1; } -.nut-searchbar-input { - border: 0; - outline: 0; - box-sizing: border-box; - width: 100%; - padding: 0; - margin: 0; - font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a)); - caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-primary, #ff0f23)); - background: transparent; - text-align: var(--nutui-searchbar-input-text-align, left); -} -.nut-searchbar-clear.nut-searchbar-icon { - position: relative; -} -.nut-searchbar-clear.nut-searchbar-icon .nut-icon { - width: 12rpx; - height: 12rpx; - color: var(--nutui-black-5); - margin-right: var(--nutui-searchbar-inner-gap, 8rpx); -} -.nut-searchbar-clear.nut-searchbar-icon::after { - content: ''; - position: absolute; - width: 100%; - height: 200%; - left: -20%; -} .nut-searchbar-values { position: absolute; display: -ms-flexbox; @@ -3666,13 +2222,6 @@ wx-button { border-radius: 4rpx; margin-right: 2rpx; } -.nut-searchbar-values .nut-icon { - width: 6rpx; - height: 6rpx; - font-size: 6rpx; - color: #c2c4cc; - margin-left: 4rpx; -} .nut-searchbar-left, .nut-searchbar-right { display: -ms-flexbox; @@ -3682,87 +2231,9 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-searchbar-left.nut-icon, -.nut-searchbar-right.nut-icon { - width: 20rpx; - height: 20rpx; -} -.nut-searchbar-left { - margin-right: var(--nutui-searchbar-gap, 12rpx); -} -.nut-searchbar-left > .h5-div, -.nut-searchbar-left > .h5-span, -.nut-searchbar-left > .h5-i, -.nut-searchbar-left > .h5-svg, -.nut-searchbar-left .nut-icon { - margin-right: var(--nutui-searchbar-gap, 12rpx); -} -.nut-searchbar-left > .h5-div:last-child, -.nut-searchbar-left > .h5-span:last-child, -.nut-searchbar-left > .h5-i:last-child, -.nut-searchbar-left > .h5-svg:last-child, -.nut-searchbar-left .nut-icon:last-child { - margin-right: 0; -} -.nut-searchbar-right { - margin-left: var(--nutui-searchbar-gap, 12rpx); -} -.nut-searchbar-right > .h5-div, -.nut-searchbar-right > .h5-span, -.nut-searchbar-right > .h5-i, -.nut-searchbar-right > .h5-svg, -.nut-searchbar-right .nut-icon { - margin-left: var(--nutui-searchbar-gap, 12rpx); -} -.nut-searchbar-right > .h5-div:first-child, -.nut-searchbar-right > .h5-span:first-child, -.nut-searchbar-right > .h5-i:first-child, -.nut-searchbar-right > .h5-svg:first-child, -.nut-searchbar-right .nut-icon:first-child { - margin-left: 0; -} -.nut-searchbar-left > text, -.nut-searchbar-left > view { - margin-right: var(--nutui-searchbar-gap, 12rpx); -} -.nut-searchbar-left > text:last-child, -.nut-searchbar-left > view:last-child { - margin-right: 0; -} -.nut-searchbar-right > text, -.nut-searchbar-right > view { - margin-left: var(--nutui-searchbar-gap, 12rpx); -} -.nut-searchbar-right > text:first-child, -.nut-searchbar-right > view:first-child { - margin-left: 0; -} -.nut-searchbar-round { - border-radius: var(--nutui-searchbar-content-round-border-radius, 19rpx); -} -.nut-searchbar-disabled { - cursor: not-allowed; -} -.nut-searchbar-focus { - padding: 5rpx var(--nutui-searchbar-gap, 12rpx); -} .nut-searchbar-focus .nut-searchbar-content { border: 0.5rpx solid #ff5c67; } -[dir='rtl'] .nut-searchbar-left, -.nut-rtl .nut-searchbar-left { - margin-right: 0; - margin-left: var(--nutui-searchbar-gap, 12rpx); -} -[dir='rtl'] .nut-searchbar-left > .h5-div, -[dir='rtl'] .nut-searchbar-left > .h5-span, -[dir='rtl'] .nut-searchbar-left > .h5-svg, -.nut-rtl .nut-searchbar-left > .h5-div, -.nut-rtl .nut-searchbar-left > .h5-span, -.nut-rtl .nut-searchbar-left > .h5-svg { - margin-right: 0; - margin-left: var(--nutui-searchbar-gap, 12rpx); -} [dir='rtl'] .nut-searchbar-left > .h5-div.nut-icon, [dir='rtl'] .nut-searchbar-left > .h5-span.nut-icon, [dir='rtl'] .nut-searchbar-left > .h5-svg.nut-icon, @@ -3772,83 +2243,11 @@ wx-button { -ms-transform: rotate(180deg); transform: rotate(180deg); } -[dir='rtl'] .nut-searchbar-left > .h5-div:last-child, -[dir='rtl'] .nut-searchbar-left > .h5-span:last-child, -[dir='rtl'] .nut-searchbar-left > .h5-svg:last-child, -.nut-rtl .nut-searchbar-left > .h5-div:last-child, -.nut-rtl .nut-searchbar-left > .h5-span:last-child, -.nut-rtl .nut-searchbar-left > .h5-svg:last-child { - margin-right: 0; - margin-left: 0; -} -[dir='rtl'] .nut-searchbar-right, -.nut-rtl .nut-searchbar-right { - margin-left: 0; - margin-right: var(--nutui-searchbar-gap, 12rpx); -} -[dir='rtl'] .nut-searchbar-right > .h5-div, -[dir='rtl'] .nut-searchbar-right > .h5-span, -[dir='rtl'] .nut-searchbar-right > .h5-svg, -.nut-rtl .nut-searchbar-right > .h5-div, -.nut-rtl .nut-searchbar-right > .h5-span, -.nut-rtl .nut-searchbar-right > .h5-svg { - margin-left: 0; - margin-right: var(--nutui-searchbar-gap, 12rpx); -} -[dir='rtl'] .nut-searchbar-right > .h5-div:first-child, -[dir='rtl'] .nut-searchbar-right > .h5-span:first-child, -[dir='rtl'] .nut-searchbar-right > .h5-svg:first-child, -.nut-rtl .nut-searchbar-right > .h5-div:first-child, -.nut-rtl .nut-searchbar-right > .h5-span:first-child, -.nut-rtl .nut-searchbar-right > .h5-svg:first-child { - margin-left: 0; - margin-right: 0; -} -[dir='rtl'] .nut-searchbar-left > text, -[dir='rtl'] .nut-searchbar-left > view, -.nut-rtl .nut-searchbar-left > text, -.nut-rtl .nut-searchbar-left > view { - margin-right: 0; - margin-left: var(--nutui-searchbar-gap, 12rpx); -} -[dir='rtl'] .nut-searchbar-left > text:last-child, -[dir='rtl'] .nut-searchbar-left > view:last-child, -.nut-rtl .nut-searchbar-left > text:last-child, -.nut-rtl .nut-searchbar-left > view:last-child { - margin-right: 0; - margin-left: 0; -} -[dir='rtl'] .nut-searchbar-right > text, -[dir='rtl'] .nut-searchbar-right > view, -.nut-rtl .nut-searchbar-right > text, -.nut-rtl .nut-searchbar-right > view { - margin-left: 0; - margin-right: var(--nutui-searchbar-gap, 12rpx); -} -[dir='rtl'] .nut-searchbar-right > text:first-child, -[dir='rtl'] .nut-searchbar-right > view:first-child, -.nut-rtl .nut-searchbar-right > text:first-child, -.nut-rtl .nut-searchbar-right > view:first-child { - margin-left: 0; - margin-right: 0; -} -[dir='rtl'] .nut-searchbar-input, -.nut-rtl .nut-searchbar-input { - text-align: var(--nutui-searchbar-input-text-align, right); -} .nut-safe-area { display: -ms-flexbox; display: flex; width: 100%; } -.nut-safe-area-position-top { - padding-top: calc(constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)); - padding-top: calc(env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)); -} -.nut-safe-area-position-bottom { - padding-bottom: calc(constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)); - padding-bottom: calc(env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)); -} .nut-resultpage { width: 100%; display: -ms-flexbox; @@ -3866,29 +2265,6 @@ wx-button { display: inline-flex; margin-bottom: var(--nutui-resultpage-icon-margin-bottom, 12rpx); } -.nut-resultpage-icon .nut-icon { - height: var(--nutui-resultpage-icon-size, 36rpx); - width: var(--nutui-resultpage-icon-size, 36rpx); -} -.nut-resultpage-title { - width: var(--nutui-resultpage-width, 240rpx); - margin-bottom: var(--nutui-resultpage-title-margin-bottom, 12rpx); - font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, 18rpx)); - color: var(--nutui-resultpage-title-color, var(--nutui-color-title, #1a1a1a)); - font-weight: var(--nutui-font-weight-bold, 600); - text-align: center; -} -.nut-resultpage-description { - width: var(--nutui-resultpage-width, 240rpx); - line-height: var(--nutui-resultpage-description-line-height, 20rpx); - font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-resultpage-description-color, var(--nutui-color-text, #505259)); - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - word-break: break-all; -} .nut-resultpage-actions { display: -ms-flexbox; display: flex; @@ -3896,13 +2272,6 @@ wx-button { flex-direction: row; margin-top: var(--nutui-resultpage-actions-margin-top, 16rpx); } -.nut-resultpage-actions .nut-button-children { - white-space: nowrap; -} -.nut-resultpage-action { - margin-left: 6rpx; - margin-right: 6rpx; -} .nut-row { display: -ms-flexbox; display: flex; @@ -3911,20 +2280,10 @@ wx-button { width: 100%; overflow: hidden; } -.nut-row::after { - display: block; - height: 0; - clear: both; - visibility: hidden; - content: ''; -} .nut-row-flex { display: -ms-flexbox; display: flex; } -.nut-row-flex::after { - display: none; -} .nut-row-justify-center { -ms-flex-pack: center; justify-content: center; @@ -3980,9 +2339,6 @@ wx-button { -ms-flex-pack: justify; justify-content: space-between; } -.nut-range-container-native { - height: auto; -} .nut-range { display: block; position: relative; @@ -3994,14 +2350,6 @@ wx-button { flex: 1; cursor: pointer; } -.nut-range::before { - position: absolute; - top: -8rpx; - bottom: -8rpx; - left: 0; - right: 0; - content: ''; -} .nut-range-min, .nut-range-max { font-size: var(--nutui-font-size-s, 12rpx); @@ -4010,19 +2358,6 @@ wx-button { -ms-user-select: none; user-select: none; } -.nut-range-bar { - display: block; - position: relative; - width: 100%; - height: 100%; - max-width: 100%; - max-height: 100%; - background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23)); - border-radius: 2rpx; -} -.nut-range-bar-animate { - transition: all 0.2s; -} .nut-range-button { position: absolute; display: -ms-flexbox; @@ -4040,12 +2375,6 @@ wx-button { left: 50%; } .nut-range-button-wrapper, -.nut-range-button-wrapper-right, -.nut-range-button-wrapper-left { - width: var(--nutui-range-button-width, 24rpx); - height: var(--nutui-range-button-height, 24rpx); -} -.nut-range-button-wrapper, .nut-range-button-wrapper-right { -ms-touch-action: none; touch-action: none; @@ -4086,22 +2415,6 @@ wx-button { vertical-align: center; box-sizing: border-box; } -.nut-range-disabled { - cursor: not-allowed; - opacity: 0.54; -} -.nut-range-disabled .nut-range-button-wrapper, -.nut-range-disabled .nut-range-button-wrapper-left, -.nut-range-disabled .nut-range-button-wrapper-right { - cursor: not-allowed; -} -.nut-range-mark { - position: absolute; - width: 100%; - height: 14rpx; - overflow: visible; - top: 50%; -} .nut-range-mark-text-wrapper { position: absolute; height: 100%; @@ -4121,61 +2434,12 @@ wx-button { -ms-user-select: none; user-select: none; } -.nut-range-tick { - position: absolute; - top: -20rpx; - width: 11rpx; - height: 11rpx; - left: 0; - border-radius: 6rpx; - background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1)); -} -.nut-range-tick-active { - background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23)); -} .nut-range-vertical-container { height: 100%; -ms-flex-direction: column; flex-direction: column; padding: 0 15rpx; } -.nut-range-vertical { - width: var(--nutui-range-height, 4rpx); - margin: var(--nutui-range-margin, 15rpx) 0rpx; -} -.nut-range-vertical-button-wrapper, -.nut-range-vertical-button-wrapper-right { - position: absolute; - top: auto; - top: initial; - right: auto; - right: initial; - top: 100%; - left: 50%; -} -.nut-range-vertical-button-wrapper-left { - top: 0; - left: 50%; - right: auto; - right: initial; -} -.nut-range-vertical-button-number { - left: 0; - top: 50%; -} -.nut-range-vertical-mark { - position: absolute; - width: 36rpx; - height: 100%; - top: 0; - right: 50%; - overflow: visible; - font-size: 12rpx; - padding: 0; -} -.nut-range-vertical-mark-hm { - left: -34rpx; -} .nut-range-vertical-mark-text-wrapper { height: 16rpx; position: absolute; @@ -4186,68 +2450,11 @@ wx-button { -ms-transform: translateY(-11rpx); transform: translateY(-11rpx); } -.nut-range-vertical-mark-text { - height: 100%; - line-height: 16rpx; - color: #999; - text-align: center; - word-break: keep-all; -} -.nut-range-vertical-tick { - position: absolute; - top: 2rpx; - left: 31rpx; - width: 10rpx; - height: 10rpx; - border-radius: 5rpx; - background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1)); -} -.nut-range-vertical-tick-active { - background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23)); -} -[dir='rtl'] .nut-range-button-wrapper, -[dir='rtl'] .nut-range-button-wrapper-right, -.rtl-nut-range-button-wrapper, -.rtl-nut-range-button-wrapper-right { - left: 0; - right: auto; - right: initial; -} -[dir='rtl'] .nut-range-button-wrapper-left, -.rtl-nut-range-button-wrapper-left, -[dir='rtl'] .nut-range-tick, -.rtl-nut-range-tick { - right: 0; - left: auto; - left: initial; -} [dir='rtl'] .nut-range-mark-text, .rtl-nut-range-mark-text { -ms-transform: translate(10rpx); transform: translate(10rpx); } -[dir='rtl'] .nut-range-vertical-button-wrapper, -[dir='rtl'] .nut-range-vertical-button-wrapper-right, -.rtl-nut-range-vertical-button-wrapper, -.rtl-nut-range-vertical-button-wrapper-right, -[dir='rtl'] .nut-range-vertical-button-wrapper-left, -.rtl-nut-range-vertical-button-wrapper-left { - right: 50%; - left: auto; - left: initial; -} -[dir='rtl'] .nut-range-vertical-mark, -.rtl-nut-range-vertical-mark { - right: auto; - left: 50%; -} -[dir='rtl'] .nut-range-vertical-tick, -.rtl-nut-range-vertical-tick { - left: auto; - right: 30rpx; - margin-left: 0; - margin-right: 0; -} [dir='rtl'] .nut-range-vertical-mark-text-wrapper, .rtl-nut-range-vertical-mark-text-wrapper { -ms-transform: translateY(-11rpx); @@ -4259,12 +2466,6 @@ wx-button { -ms-touch-action: pan-x; touch-action: pan-x; } -.nut-rate.disabled .nut-rate-item-icon { - cursor: not-allowed; -} -.nut-rate.readonly .nut-rate-item-icon { - cursor: default; -} .nut-rate-item { display: -ms-flexbox; display: flex; @@ -4274,44 +2475,10 @@ wx-button { flex-shrink: 0; position: relative; } -.nut-rate-item-half { - position: absolute; - height: 100%; - width: 50% !important; - left: 0; - top: 0; - overflow: hidden; -} .nut-rate-item-half .nut-icon { -ms-flex-negative: 0; flex-shrink: 0; } -.nut-rate-item-normal { - margin-left: var(--nutui-rate-item-margin, 4rpx); -} -.nut-rate-item-normal .nut-icon { - height: var(--nutui-rate-icon-size, 12rpx); - width: var(--nutui-rate-icon-size, 12rpx); -} -.nut-rate-item-large { - margin-left: calc(var(--nutui-rate-item-margin, 4rpx) * 2); -} -.nut-rate-item-large .nut-icon { - height: calc(var(--nutui-rate-icon-size, 12rpx) + 8rpx); - width: calc(var(--nutui-rate-icon-size, 12rpx) + 8rpx); -} -.nut-rate-item-small { - margin-left: calc(var(--nutui-rate-item-margin, 4rpx) / 2); -} -.nut-rate-item-small .nut-icon { - height: calc(var(--nutui-rate-icon-size, 12rpx) - 4rpx); - width: calc(var(--nutui-rate-icon-size, 12rpx) - 4rpx); -} -.nut-rate-item-normal:first-child, -.nut-rate-item-large:first-child, -.nut-rate-item-small:first-child { - margin-left: 0; -} .nut-rate-item-icon { display: -ms-flexbox; display: flex; @@ -4319,18 +2486,6 @@ wx-button { align-items: center; cursor: pointer; } -.nut-rate-item-icon .nut-icon { - color: var(--nutui-rate-icon-color, var(--nutui-color-primary-icon, #ff3333)); -} -.nut-rate-item-icon-disabled .nut-icon { - color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0)); -} -.nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half { - position: absolute; - left: 0; - top: 0; - overflow: hidden; -} .nut-rate-item-icon.nut-rate-item-icon::before { position: relative; top: auto; @@ -4349,121 +2504,15 @@ wx-button { font-family: JDZH-Regular; line-height: 1; } -.nut-rate-score-normal { - padding-left: var(--nutui-rate-item-margin, 4rpx); - font-size: var(--nutui-rate-font-size, 12rpx); -} -.nut-rate-score-large { - font-size: calc(var(--nutui-rate-font-size, 12rpx) + 6rpx); - padding-left: calc(var(--nutui-rate-item-margin, 4rpx) * 2); -} -.nut-rate-score-small { - font-size: calc(var(--nutui-rate-font-size, 12rpx) - 2rpx); - padding-left: calc(var(--nutui-rate-item-margin, 4rpx) / 2); -} -.nut-rate-score-disabled { - color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0)); -} -[dir='rtl'] .nut-rate-item, -.nut-rtl .nut-rate-item { - margin-left: 0; -} -[dir='rtl'] .nut-rate-item:first-child, -.nut-rtl .nut-rate-item:first-child { - margin-right: 0; -} -[dir='rtl'] .nut-rate-item-normal, -.nut-rtl .nut-rate-item-normal { - margin-right: var(--nutui-rate-item-margin, 4rpx); -} -[dir='rtl'] .nut-rate-item-large, -.nut-rtl .nut-rate-item-large { - margin-right: calc(var(--nutui-rate-item-margin, 4rpx) * 2); -} -[dir='rtl'] .nut-rate-item-small, -.nut-rtl .nut-rate-item-small { - margin-right: calc(var(--nutui-rate-item-margin, 4rpx) - 2rpx); -} -[dir='rtl'] .nut-rate-item:last-child, -.nut-rtl .nut-rate-item:last-child { - margin-left: 0; -} -[dir='rtl'] .nut-rate-item-half, -.nut-rtl .nut-rate-item-half, -[dir='rtl'] .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half, -.nut-rtl .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half { - left: auto; - right: 0; -} -[dir='rtl'] .nut-rate-item-icon.nut-rate-item-icon::before, -.nut-rtl .nut-rate-item-icon.nut-rate-item-icon::before { - left: auto; - right: auto; -} -[dir='rtl'] .nut-rate-score, -.nut-rtl .nut-rate-score { - padding-left: 0; -} -[dir='rtl'] .nut-rate-score-large, -.nut-rtl .nut-rate-score-large { - padding-right: calc(var(--nutui-rate-item-margin, 4rpx) * 2); -} -[dir='rtl'] .nut-rate-score-normal, -.nut-rtl .nut-rate-score-normal { - padding-right: var(--nutui-rate-item-margin, 4rpx); -} -[dir='rtl'] .nut-rate-score-small, -.nut-rtl .nut-rate-score-small { - padding-right: calc(var(--nutui-rate-item-margin, 4rpx) - 2rpx); -} -.nut-radiogroup .nut-radio { - margin: 0 var(--nutui-radiogroup-radio-margin, 20rpx) var(--nutui-radiogroup-radio-margin-bottom, 5rpx) 0; -} -.nut-radiogroup .nut-radio-label { - margin: var(--nutui-radiogroup-radio-label-margin, 0 5rpx); -} -.nut-radiogroup .nut-radio-button { - background-color: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); -} -.nut-radiogroup .nut-radio:last-child { - margin: 0; -} .nut-radiogroup-vertical .nut-radio.nut-radio-reverse { width: 100%; -ms-flex-pack: justify; justify-content: space-between; } -.nut-radiogroup-vertical .nut-radio-button { - border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); -} -.nut-radiogroup-vertical .nut-radio-button-active { - border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); -} .nut-radiogroup-horizontal { display: -ms-flexbox; display: flex; } -.nut-radiogroup-horizontal .nut-radio-button { - border: 1rpx solid #ffffff; -} -.nut-radiogroup-horizontal .nut-radio-button-active { - border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); -} -.nut-radiogroup-horizontal .nut-radio:last-child { - margin: 0 var(--nutui-radiogroup-radio-margin, 20rpx) var(--nutui-radiogroup-radio-margin-bottom, 5rpx) 0; -} -.nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled { - background: var(--nutui-color-text-disabled, #c2c4cc); - color: #fff; - border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); -} -[dir='rtl'] .nut-radiogroup .nut-radio, -.nut-rtl .nut-radiogroup .nut-radio { - margin-left: var(--nutui-radiogroup-radio-margin, 20rpx); - margin-right: 0; -} .nut-radio { display: -ms-flexbox; display: flex; @@ -4476,41 +2525,6 @@ wx-button { -ms-flex-direction: row-reverse; flex-direction: row-reverse; } -.nut-radio.nut-radio-reverse .nut-radio-label { - margin-right: var(--nutui-radio-label-margin-left, 4rpx); - margin-left: 0; -} -.nut-radio-label { - margin-left: var(--nutui-radio-label-margin-left, 4rpx); - font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-s, 12rpx)); - color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a)); -} -.nut-radio-label-disabled { - color: var(--nutui-radio-label-disable-color, var(--nutui-color-text-disabled, #c2c4cc)); -} -.nut-radio-icon { - color: var(--nutui-color-text-disabled, #c2c4cc); - background-color: #fff; - transition-duration: 0.3s; - transition-property: color, border-color, background-color; - font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-icon, 16rpx)); - border-radius: 50%; -} -.nut-radio-icon-checked { - color: var(--nutui-color-primary, #ff0f23); - background-color: #fff; - box-shadow: 0 2rpx 4rpx rgba(255, 15, 35, 0.2); - border-radius: 50%; -} -.nut-radio-icon-checked.nut-radio-icon-disabled { - color: var(--nutui-color-primary-disabled-special, #ffadbe); - background-color: #fff; - box-shadow: none; - border-radius: 50%; -} -.nut-radio-icon-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); -} .nut-radio-button { display: -ms-flexbox; display: flex; @@ -4527,40 +2541,6 @@ wx-button { box-sizing: border-box; border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); } -.nut-radio-button-active { - background: var(--nutui-color-primary-light-pressed, #ffebf1); - color: var(--nutui-color-primary, #ff0f23); - border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); -} -.nut-radio-button-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); - border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); -} -.nut-radio .nut-radio-button-active.nut-radio-button-disabled { - background: var(--nutui-color-text-disabled, #c2c4cc); - color: #fff; - border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); -} -[dir='rtl'] .nut-radio:last-child, -.nut-rtl .nut-radio:last-child { - margin-right: 0 !important; - margin-left: 0 !important; -} -[dir='rtl'] .nut-radio.nut-radio-reverse .nut-radio-label, -.nut-rtl .nut-radio.nut-radio-reverse .nut-radio-label { - margin-left: var(--nutui-radio-label-margin-left, 4rpx); - margin-right: 0; -} -[dir='rtl'] .nut-radio-label, -.nut-rtl .nut-radio-label { - margin-left: 0; - margin-right: var(--nutui-radio-label-margin-left, 4rpx); -} -.nut-pulltorefresh-head { - overflow: hidden; - position: relative; - font-size: 12rpx; -} .nut-pulltorefresh-head-content { position: absolute; bottom: 0; @@ -4576,26 +2556,6 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-pulltorefresh-head-content-icons { - width: var(--nutui-pulltorefresh-icon-width, 36rpx); - height: var(--nutui-pulltorefresh-icon-height, 26rpx); - margin-bottom: 4rpx; -} -.nut-pulltorefresh-primary { - background: var(--nutui-pulltorefresh-color-primary, var(--nutui-color-primary, #ff0f23)); -} -.nut-pulltorefresh-primary-content, -.nut-pulltorefresh-primary-head-content { - color: var(--nutui-color-text-dark, rgba(255, 255, 255, 0.9)); -} -.nut-pulltorefresh-primary-status-text { - color: #fff; -} -[dir='rtl'] .nut-pulltorefresh-head-content, -.nut-rtl .nut-pulltorefresh-head-content { - left: auto; - right: 0; -} .nut-progress { display: -ms-flexbox; display: flex; @@ -4644,20 +2604,6 @@ wx-button { font-family: PingFang SC; font-size: var(--nutui-progress-text-font-size, 13rpx); } -@keyframes progressActive { - 0% { - background: rgba(255, 255, 255, 0.10196); - width: 0; - } - 20% { - background: rgba(255, 255, 255, 0.50196); - width: 0; - } - to { - background: rgba(255, 255, 255, 0); - width: 100%; - } -} [dir='rtl'] .nut-progress-text, .nut-rtl .nut-progress-text { -ms-transform: translate(50%); @@ -4673,82 +2619,6 @@ wx-button { -ms-flex-align: baseline; align-items: baseline; } -.nut-price-symbol, -.nut-price-integer, -.nut-price-decimal { - color: var(--nutui-price-color, var(--nutui-color-text-help)); - font-family: JDZH-Bold; - line-height: 1; -} -.nut-price-darkgray .nut-price-symbol, -.nut-price-darkgray .nut-price-integer, -.nut-price-darkgray .nut-price-decimal { - font-family: JDZH-Bold; - color: var(--nutui-price-darkgray-color, var(--nutui-gray-7)); -} -.nut-price-primary .nut-price-symbol, -.nut-price-primary .nut-price-integer, -.nut-price-primary .nut-price-decimal { - font-family: JDZH-Bold; - color: var(--nutui-price-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-price-symbol { - padding-right: var(--nutui-price-symbol-padding-right, 0rpx); -} -.nut-price-symbol-xlarge { - font-size: var(--nutui-price-symbol-xlarge-size, 12rpx); -} -.nut-price-symbol-large { - font-size: var(--nutui-price-symbol-large-size, 12rpx); -} -.nut-price-symbol-normal { - font-size: var(--nutui-price-symbol-normal-size, 12rpx); -} -.nut-price-symbol-small { - font-size: var(--nutui-price-symbol-small-size, 12rpx); -} -.nut-price-symbol-rtl { - padding-right: 0; - padding-left: var(--nutui-price-symbol-padding-right, 0rpx); -} -.nut-price-integer-xlarge { - font-size: var(--nutui-price-integer-xlarge-size, 24rpx); - line-height: var(--nutui-price-integer-xlarge-size, 24rpx); -} -.nut-price-integer-large { - font-size: var(--nutui-price-integer-large-size, 18rpx); - line-height: var(--nutui-price-integer-large-size, 18rpx); -} -.nut-price-integer-normal { - font-size: var(--nutui-price-integer-normal-size, 16rpx); - line-height: var(--nutui-price-integer-normal-size, 16rpx); -} -.nut-price-integer-small { - font-size: var(--nutui-price-integer-small-size, 12rpx); -} -.nut-price-decimal-xlarge { - font-size: var(--nutui-price-decimal-xlarge-size, 12rpx); -} -.nut-price-decimal-large { - font-size: var(--nutui-price-decimal-large-size, 12rpx); -} -.nut-price-decimal-normal { - font-size: var(--nutui-price-decimal-normal-size, 12rpx); -} -.nut-price-decimal-small { - font-size: var(--nutui-price-decimal-small-size, 12rpx); -} -.nut-price-line { - text-decoration: line-through var(--nutui-price-line-color, var(--nutui-color-text-help)); -} -.nut-popup { - position: fixed; - min-height: 26%; - max-height: 100%; - background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff)); - -webkit-overflow-scrolling: touch; - font-size: var(--nutui-font-size-base, 14rpx); -} .nut-popup-title { display: -ms-flexbox; display: flex; @@ -4772,47 +2642,6 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-popup-title-title { - color: var(--nutui-color-title, #1a1a1a); - font-weight: var(--nutui-font-weight-bold, 600); - font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); - line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); -} -.nut-popup-title-description { - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14rpx)); - font-weight: var(--nutui-font-weight, 400); -} -.nut-popup-title-description-gap { - margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base, 8rpx)); -} -.nut-popup-title-left { - position: absolute; - top: var(--nutui-popup-title-padding, 16rpx); - left: var(--nutui-popup-title-padding, 16rpx); -} -.nut-popup-title-right { - position: absolute; - top: var(--nutui-popup-title-padding, 16rpx); - right: var(--nutui-popup-title-padding, 16rpx); - z-index: 1; - width: var(--nutui-popup-icon-size, 20rpx); - height: var(--nutui-popup-icon-size, 20rpx); - color: var(--nutui-color-title, #1a1a1a); - cursor: pointer; -} -.nut-popup-title-right-top-left { - top: var(--nutui-popup-title-padding, 16rpx); - left: var(--nutui-popup-title-padding, 16rpx); -} -.nut-popup-title-right-bottom-left { - bottom: var(--nutui-popup-title-padding, 16rpx); - left: var(--nutui-popup-title-padding, 16rpx); -} -.nut-popup-title-right-bottom-right { - right: var(--nutui-popup-title-padding, 16rpx); - bottom: var(--nutui-popup-title-padding, 16rpx); -} .nut-popup-center { top: 50%; left: 50%; @@ -4821,237 +2650,21 @@ wx-button { -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } -.nut-popup-center.nut-popup-round { - border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); +.nut-popup-slide-bottom-enter-active, +.nut-popup-slide-bottom-appear-active { + -ms-transform: translate(0); + transform: translate(0); + animation-fill-mode: both; + animation-name: popup-slide-bottom-enter; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-popup-bottom { - bottom: 0; - left: 0; - width: 100%; -} -.nut-popup-bottom.nut-popup-round { - border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0 0; -} -.nut-popup-bottom-top { - position: absolute; -} -.nut-popup-right { - top: 0; - right: 0; - width: 100rpx; - height: 100%; -} -.nut-popup-right.nut-popup-round { - border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); -} -.nut-popup-left { - top: 0; - left: 0; - width: 100rpx; - height: 100%; -} -.nut-popup-left.nut-popup-round { - border-radius: 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0; -} -.nut-popup-top { - top: 0; - left: 0; - width: 100%; -} -.nut-popup-top.nut-popup-round { - border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); -} -@keyframes popup-scale-fade-in { - 0% { - opacity: 0; - transform: scale(0.8); - } - to { - opacity: 1; - transform: scale(1); - } -} -@keyframes popup-scale-fade-out { - 0% { - opacity: 1; - transform: scale(1); - } - to { - opacity: 0; - transform: scale(0.8); - } -} -.nut-popup-slide-none-enter-active { - animation-fill-mode: both; - animation-name: popup-scale-fade-in; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -.nut-popup-slide-none-exit-active { - animation-fill-mode: both; - animation-name: popup-scale-fade-out; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -@keyframes popup-fade-in { - 0% { - opacity: 0; - } - to { - opacity: 1; - } -} -@keyframes popup-fade-out { - 0% { - opacity: 1; - } - to { - opacity: 0; - } -} -.nut-popup-slide-center-enter-active { - animation-fill-mode: both; - animation-name: popup-fade-in; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -.nut-popup-slide-center-exit-active { - animation-fill-mode: both; - animation-name: popup-fade-out; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -@keyframes popup-slide-top-enter { - 0% { - transform: translate3d(0, -100%, 0); - } - to { - transform: translateZ(0); - } -} -@keyframes popup-slide-top-exit { - to { - transform: translate3d(0, -100%, 0); - } -} -.nut-popup-slide-top-enter-active, -.nut-popup-slide-top-appear-active { - transform: translateZ(0); - animation-fill-mode: both; - animation-name: popup-slide-top-enter; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -.nut-popup-slide-top-exit-active { - animation-fill-mode: both; - animation-name: popup-slide-top-exit; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -@keyframes popup-slide-right-enter { - 0% { - transform: translate3d(100%, 0, 0); - } - to { - transform: translateZ(0); - } -} -@keyframes popup-slide-right-exit { - to { - transform: translate3d(100%, 0, 0); - } -} -.nut-popup-slide-right-enter-active, -.nut-popup-slide-right-appear-active { - transform: translateZ(0); - animation-fill-mode: both; - animation-name: popup-slide-right-enter; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -.nut-popup-slide-right-exit { - animation-fill-mode: both; - animation-name: popup-slide-right-exit; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -@keyframes popup-slide-bottom-enter { - 0% { - transform: translate3d(0, 100%, 0); - } - to { - transform: translateZ(0); - } -} -@keyframes slide-bottom-exit { - to { - transform: translate3d(0, 100%, 0); - } -} -.nut-popup-slide-bottom-enter-active, -.nut-popup-slide-bottom-appear-active { - -ms-transform: translate(0); - transform: translate(0); - animation-fill-mode: both; - animation-name: popup-slide-bottom-enter; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -.nut-popup-slide-bottom-exit { - animation-fill-mode: both; - animation-name: slide-bottom-exit; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -@keyframes popup-slide-left-enter { - 0% { - transform: translate3d(-100%, 0, 0); - } - to { - transform: translateZ(0); - } -} -@keyframes popup-slide-left-exit { - to { - transform: translate3d(-100%, 0, 0); - } -} -.nut-popup-slide-left-enter-active, -.nut-popup-slide-left-appear-active { - -ms-transform: translate(0); - transform: translate(0); - animation-fill-mode: both; - animation-name: popup-slide-left-enter; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -.nut-popup-slide-left-exit-active, -.nut-popup-slide-left-exit-done { - animation-fill-mode: both; - animation-name: popup-slide-left-exit; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); -} -.nut-popup-slide-none-exit-done.nut-popup, -.nut-popup-slide-center-exit-done.nut-popup, -.nut-popup-slide-left-exit-done.nut-popup, -.nut-popup-slide-right-exit-done.nut-popup, -.nut-popup-slide-top-exit-done.nut-popup, -.nut-popup-slide-bottom-exit-done.nut-popup { - display: none; -} -.nut-popup .nut-overflow-hidden { - overflow: hidden; -} -[dir='rtl'] .nut-popup-title-left, -.nut-rtl .nut-popup-title-left { - left: auto; - right: var(--nutui-popup-title-padding, 16rpx); -} -[dir='rtl'] .nut-popup-title-right, -.nut-rtl .nut-popup-title-right { - right: auto; - left: var(--nutui-popup-title-padding, 16rpx); -} -[dir='rtl'] .nut-popup-title-right-top-left, -.nut-rtl .nut-popup-title-right-top-left, -[dir='rtl'] .nut-popup-title-right-bottom-left, -.nut-rtl .nut-popup-title-right-bottom-left { - left: auto; - right: var(--nutui-popup-title-padding, 16rpx); -} -[dir='rtl'] .nut-popup-title-right-bottom-right, -.nut-rtl .nut-popup-title-right-bottom-right { - right: auto; - left: var(--nutui-popup-title-padding, 16rpx); +.nut-popup-slide-left-enter-active, +.nut-popup-slide-left-appear-active { + -ms-transform: translate(0); + transform: translate(0); + animation-fill-mode: both; + animation-name: popup-slide-left-enter; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } [dir='rtl'] .nut-popup-title .nut-icon-ArrowLeft, .nut-rtl .nut-popup-title .nut-icon-ArrowLeft { @@ -5065,33 +2678,6 @@ wx-button { -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } -[dir='rtl'] .nut-popup-bottom, -.nut-rtl .nut-popup-bottom, -[dir='rtl'] .nut-popup-top, -.nut-rtl .nut-popup-top { - left: auto; - right: 0; -} -.nut-popover { - position: absolute; - display: inline-block; - word-break: normal; -} -.nut-popover-arrow { - position: absolute; - width: 8rpx; - height: 4rpx; -} -.nut-popover-arrow .nut-icon-ArrowRadius { - position: absolute; - color: var(--nutui-popover-content-background-color, #ffffff); -} -.nut-popover-arrow-top { - bottom: -4rpx; -} -.nut-popover-arrow-bottom { - top: -4rpx; -} .nut-popover-arrow-left { right: -6rpx; -ms-transform-origin: center top; @@ -5137,21 +2723,6 @@ wx-button { -ms-transform: rotate(-90deg) translateY(0); transform: rotate(-90deg) translateY(0); } -.nut-popover .nut-popover-content { - position: absolute; - background: var(--nutui-popover-content-background-color, #ffffff); - border-radius: var(--nutui-popover-border-radius, var(--nutui-radius-xs, 4rpx)); - font-size: var(--nutui-popover-font-size, var(--nutui-font-size-s, 12rpx)); - color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); - line-height: 28rpx; - max-height: none; - max-height: initial; - overflow-y: visible; - overflow-y: initial; -} -.nut-popover .nut-popover-content-group { - padding: 0 var(--nutui-popover-padding, 8rpx); -} .nut-popover .nut-popover-content .nut-popover-item { display: -ms-flexbox; display: flex; @@ -5163,10 +2734,6 @@ wx-button { max-width: var(--nutui-popover-item-width, 160rpx); word-wrap: break-word; } -.nut-popover .nut-popover-content .nut-popover-item:last-child { - margin-bottom: 0; - border-bottom: none; -} .nut-popover .nut-popover-content .nut-popover-item-icon, .nut-popover .nut-popover-content .nut-popover-item-action-icon { display: -ms-flexbox; @@ -5179,29 +2746,12 @@ wx-button { height: var(--nutui-font-size-s, 12rpx); font-size: var(--nutui-font-size-s, 12rpx); } -.nut-popover .nut-popover-content .nut-popover-item-icon .nut-icon, -.nut-popover .nut-popover-content .nut-popover-item-action-icon .nut-icon { - width: var(--nutui-font-size-s, 12rpx); - height: var(--nutui-font-size-s, 12rpx); - font-size: var(--nutui-font-size-s, 12rpx); -} -.nut-popover .nut-popover-content .nut-popover-item-icon { - margin-right: var(--nutui-spacing-xxs, 4rpx); -} .nut-popover .nut-popover-content .nut-popover-item-name { width: calc(100% - 34rpx); word-break: keep-all; -ms-flex: 1; flex: 1; } -.nut-popover .nut-popover-content .nut-popover-item-action-icon { - color: var(--nutui-color-text, #505259); - margin-left: var(--nutui-spacing-base, 8rpx); -} -.nut-popover .nut-popover-content .nut-popover-item.nut-popover-item-disabled { - color: var(--nutui-popover-disable-color, var(--nutui-color-text-disabled, #c2c4cc)); - cursor: not-allowed; -} .nut-popover .nut-popover-content .nut-popover-item.nut-popover-taroitem { display: -ms-flexbox; display: flex; @@ -5213,18 +2763,12 @@ wx-button { -ms-transform: rotate(180deg) translate(-50%); transform: rotate(180deg) translate(-50%); } -.nut-popover .nut-popover-content-top-right { - right: 0; -} .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right { right: 16rpx; bottom: -3.5rpx; -ms-transform: rotate(180deg) translate(0); transform: rotate(180deg) translate(0); } -.nut-popover .nut-popover-content-top-left { - left: 0; -} .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left { left: 16rpx; bottom: -3.5rpx; @@ -5236,57 +2780,16 @@ wx-button { -ms-transform: translate(-50%); transform: translate(-50%); } -.nut-popover .nut-popover-content-bottom-right { - right: 0; -} .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right { right: 16rpx; -ms-transform: translate(0); transform: translate(0); } -.nut-popover .nut-popover-content-bottom-left { - left: 0; -} .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left { left: 16rpx; -ms-transform: translate(0); transform: translate(0); } -.nut-popover .nut-popover-content-left-bottom { - bottom: 0; -} -.nut-popover .nut-popover-content-left-top { - top: 0; -} -.nut-popover .nut-popover-content-right-bottom { - bottom: 0; -} -.nut-popover .nut-popover-content-right-top { - top: 0; -} -.nut-popover-dark { - background: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); - color: var(--nutui-popover-content-background-color, #ffffff); -} -.nut-popover-dark .nut-popover-arrow .nut-icon-ArrowRadius { - color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); -} -.nut-popover-dark .nut-popover-content { - background: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))) !important; - color: var(--nutui-popover-content-background-color, #ffffff) !important; -} -.nut-popover-dark .nut-popover-content .nut-popover-item-action-icon { - color: rgba(255, 255, 255, 0.8); -} -[dir='rtl'] .nut-popover .nut-popover-content .nut-popover-item-name, -.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-name { - margin-left: 0; - margin-right: 4rpx; -} -[dir='rtl'] .nut-popover .nut-popover-content .nut-popover-item-action-icon, -.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-action-icon { - right: auto; -} [dir='rtl'] .nut-popover .nut-popover-content-top .nut-popover-arrow-top, .nut-rtl .nut-popover .nut-popover-content-top .nut-popover-arrow-top { left: auto; @@ -5294,26 +2797,6 @@ wx-button { -ms-transform: translate(50%); transform: translate(50%); } -[dir='rtl'] .nut-popover .nut-popover-content-top-right, -.nut-rtl .nut-popover .nut-popover-content-top-right { - right: auto; - left: 0; -} -[dir='rtl'] .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right, -.nut-rtl .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right { - right: auto; - left: 16rpx; -} -[dir='rtl'] .nut-popover .nut-popover-content-top-left, -.nut-rtl .nut-popover .nut-popover-content-top-left { - left: auto; - right: 0; -} -[dir='rtl'] .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left, -.nut-rtl .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left { - left: auto; - right: 16rpx; -} [dir='rtl'] .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom, .nut-rtl .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom { left: auto; @@ -5321,59 +2804,12 @@ wx-button { -ms-transform: translate(50%); transform: translate(50%); } -[dir='rtl'] .nut-popover .nut-popover-content-bottom-right, -.nut-rtl .nut-popover .nut-popover-content-bottom-right { - right: auto; - left: 0; -} -[dir='rtl'] .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right, -.nut-rtl .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right { - right: auto; - left: 16rpx; -} -[dir='rtl'] .nut-popover .nut-popover-content-bottom-left, -.nut-rtl .nut-popover .nut-popover-content-bottom-left { - left: auto; - right: 0; -} -[dir='rtl'] .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left, -.nut-rtl .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left { - left: auto; - right: 16rpx; -} .nut-popover-enter-from, .nut-popover-leave-active { -ms-transform: scale(0.8); transform: scale(0.8); opacity: 0; } -.nut-popover-enter-active { - transition-timing-function: ease-out; -} -.nut-popover-leave-active { - transition-timing-function: ease-in; -} -.nut-popover-content-bg { - position: fixed; - height: 100%; - width: 100%; - top: 0; - left: 0; - background: transparent; - z-index: 999; -} -[dir='rtl'] .nut-popover-content-bg, -.nut-rtl .nut-popover-content-bg { - left: auto; - right: 0; -} -.nut-popover-wrapper { - display: inline-block; -} -.nut-popover-content-copy { - position: absolute; - top: -99999rpx; -} .nut-pickerview { position: relative; display: -ms-flexbox; @@ -5382,35 +2818,6 @@ wx-button { height: calc(var(--nutui-picker-item-height, 36rpx) * 7); overflow: hidden; } -.nut-pickerview-mask, -.nut-pickerview-indicator { - position: absolute; - left: 0; - right: 0; - z-index: 3; - pointer-events: none; -} -.nut-pickerview-mask { - top: 0; - bottom: 0; - background-image: var( - --picker-mask-background, - linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), - linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)) - ); - background-position: top, bottom; - background-size: 100% calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); - background-repeat: no-repeat; - transform: translateZ(0); -} -.nut-pickerview-indicator { - top: calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); - height: var(--nutui-picker-item-height, 36rpx); - border: var(--nutui-picker-item-active-line-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - border-left: 0; - border-right: 0; - box-sizing: border-box; -} .nut-pickerview-list { position: relative; -ms-flex: 1; @@ -5420,42 +2827,6 @@ wx-button { -ms-touch-action: none; touch-action: none; } -.nut-pickerview-roller { - position: absolute; - top: calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); - width: 100%; - height: var(--nutui-picker-item-height, 36rpx); - z-index: 1; - transform-style: preserve-3d; -} -.nut-pickerview-roller-placeholder { - height: var(--nutui-picker-item-height, 36rpx); -} -.nut-pickerview-roller-item { - position: absolute; - top: 0; - backface-visibility: hidden; - -moz-backface-visibility: hidden; -} -.nut-pickerview-roller-item-hidden { - visibility: hidden; - opacity: 0; -} -.nut-pickerview-roller-item, -.nut-pickerview-roller-item-tiled { - width: 100%; - height: var(--nutui-picker-item-height, 36rpx); - line-height: var(--nutui-picker-item-height, 36rpx); - color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14rpx)); - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.nut-picker { - width: 100%; -} .nut-picker-control { display: -ms-flexbox; display: flex; @@ -5468,14 +2839,6 @@ wx-button { box-sizing: border-box; font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); } -.nut-picker-cancel-btn { - color: var(--nutui-picker-title-cancel-color, var(--nutui-color-text, #505259)); - font-size: var(--nutui-picker-title-cancel-font-size, var(--nutui-font-size-base, 14rpx)); -} -.nut-picker-confirm-btn { - color: var(--nutui-picker-title-ok-color, var(--nutui-color-primary, #ff0f23)); - font-size: var(--nutui-picker-title-ok-font-size, var(--nutui-font-size-base, 14rpx)); -} .nut-picker-title { -ms-flex: 1; flex: 1; @@ -5520,43 +2883,12 @@ wx-button { border: var(--nutui-pagination-item-border-width, 1rpx) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); cursor: pointer; } -.nut-pagination-prev, -.nut-pagination-item { - border-right-width: 0; -} -.nut-pagination-prev, -.nut-pagination-next { - padding: var(--nutui-pagination-prev-next-padding, 0 12rpx); -} .nut-pagination-contain { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } -.nut-pagination-item-active { - color: #fff; - border-width: 0; - background-color: var(--nutui-color-primary, #ff0f23); -} -.nut-pagination-item-disabled, -.nut-pagination-next-disabled, -.nut-pagination-prev-disabled { - color: var(--nutui-pagination-disable-color, var(--nutui-color-text-disabled, #c2c4cc)); - background-color: var(--nutui-pagination-disable-background-color, #f7f8fa); - cursor: not-allowed; -} -.nut-pagination-simple { - height: 39rpx; - width: 124rpx; - line-height: 39rpx; - text-align: center; - font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-pagination-simple-border { - border-right: var(--nutui-pagination-item-border-width, 1rpx) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); -} .nut-pagination-lite { height: var(--nutui-pagination-lite-height, 20rpx); padding: 0 var(--nutui-spacing-xs, 6rpx); @@ -5570,12 +2902,6 @@ wx-button { background-color: var(--nutui-pagination-lite-background-color, rgba(0, 0, 0, 0.45)); border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, 4rpx)); } -.nut-pagination-lite-active, -.nut-pagination-lite-default, -.nut-pagination-lite-spliterator { - font-size: var(--nutui-font-size-xs, 11rpx); - color: var(--nutui-pagination-lite-color, #ffffff); -} .nut-overlay { position: fixed; top: 0; @@ -5586,47 +2912,6 @@ wx-button { height: 100%; background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); } -.nut-overflow-hidden { - overflow: hidden !important; -} -@keyframes nut-fade-in { - 0% { - opacity: 0; - } - 1% { - opacity: 0; - } - to { - opacity: 1; - } -} -@keyframes nut-fade-out { - 0% { - opacity: 1; - } - 1% { - opacity: 1; - } - to { - opacity: 0; - } -} -.nut-overlay-slide-enter-active, -.nut-overlay-slide-appear-active { - animation-fill-mode: both; - animation-name: nut-fade-in; - animation-duration: var(--nutui-overlay-animation-duration, 0.3s); -} -.nut-overlay-slide-exit-active { - animation-fill-mode: both; - animation-name: nut-fade-out; - animation-duration: var(--nutui-overlay-animation-duration, 0.3s); -} -[dir='rtl'] .nut-overlay, -.nut-rtl .nut-overlay { - left: auto; - right: 0; -} .nut-numberkeyboard { width: 100%; padding: var(--nutui-numberkeyboard-padding, 0 0 22rpx 0); @@ -5648,11 +2933,6 @@ wx-button { color: var(--nutui-color-title, #1a1a1a); font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); } -.nut-numberkeyboard-header-title { - color: var(--nutui-color-title, #1a1a1a); - display: inline-block; - font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); -} .nut-numberkeyboard-header-close { position: absolute; display: block; @@ -5708,9 +2988,6 @@ wx-button { font-weight: var(--nutui-font-weight-bold, 600); cursor: pointer; } -.nut-numberkeyboard-body-wrapper .key.active { - background-color: var(--nutui-numberkeyboard-key-active-background-color, #ebedf0); -} .nut-numberkeyboard-sidebar { display: -ms-flexbox; display: flex; @@ -5721,76 +2998,16 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper { - width: 100%; -} -.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key { - position: absolute; - top: 0; - right: 6rpx; - bottom: 6rpx; - left: 0; - height: auto; -} -.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm { - font-size: var(--nutui-numberkeyboard-key-confirm-font-size, var(--nutui-font-size-l, 15rpx)); - color: var(--nutui-numberkeyboard-key-confirm-color, #fff); - background-color: var(--nutui-numberkeyboard-key-confirm-background-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm.active { - background-color: rgba(255, 0, 0, 0.70196); -} -[dir='rtl'] .nut-popup .nut-numberkeyboard-header-close, -.nut-rtl .nut-popup .nut-numberkeyboard-header-close { - right: auto; - left: 0; -} -[dir='rtl'] .nut-popup .nut-numberkeyboard-body, -.nut-rtl .nut-popup .nut-numberkeyboard-body { - padding: 6rpx 6rpx 0 0; -} -[dir='rtl'] .nut-popup .nut-numberkeyboard-body-wrapper, -.nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper { - padding: 0 0 6rpx 6rpx; -} [dir='rtl'] .nut-popup .nut-numberkeyboard-body-wrapper .delete, .nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper .delete { -ms-transform: rotate(-180deg); transform: rotate(-180deg); } -[dir='rtl'] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key, -.nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key { - left: 6rpx; - right: 0; -} [dir='rtl'] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete, .nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete { -ms-transform: rotate(-180deg); transform: rotate(-180deg); } -.fade-enter { - opacity: 0; -} -.fade-enter-active { - opacity: 1; - transition: opacity 0.3s ease-in; -} -.fade-enter-done, -.fade-exit { - opacity: 1; -} -.fade-exit-active { - opacity: 0; - transition: opacity 0.3s ease-out; -} -.fade-exit-done, -.fade-appear { - opacity: 0; -} -.fade-appear-active { - opacity: 1; - transition: opacity 0.3s; -} .nut-notify { position: fixed; left: 8rpx; @@ -5817,12 +3034,6 @@ wx-button { white-space: nowrap; overflow: hidden; } -.nut-notify-ellipsis { - text-overflow: ellipsis; -} -.nut-notify-layout-left { - text-align: left; -} .nut-notify-left-icon, .nut-notify-right-icon { display: -ms-flexbox; @@ -5830,23 +3041,6 @@ wx-button { display: -ms-inline-flexbox; display: inline-flex; } -.nut-notify-left-icon { - margin-right: 6rpx; -} -.nut-notify-left-icon .nut-icon { - height: 16rpx; - width: 16rpx; -} -.nut-notify-right-icon { - margin-left: 6rpx; -} -.nut-notify-right-icon .nut-icon { - height: 12rpx; - width: 12rpx; -} -.nut-noticebar { - width: 100%; -} .nut-noticebar .nut-noticebar-box { position: relative; display: -ms-flexbox; @@ -5860,20 +3054,6 @@ wx-button { color: var(--nutui-noticebar-color, #d9500b); border-radius: var(--nutui-noticebar-border-radius, 0); } -.nut-noticebar .nut-noticebar-box-wrapable, -.nut-noticebar .nut-noticebar-box-center { - height: auto; - padding: var(--nutui-noticebar-wrapable-padding, 8rpx 16rpx); -} -.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap, -.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap { - height: auto; -} -.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content { - position: relative; - white-space: normal; - word-wrap: break-word; -} .nut-noticebar .nut-noticebar-box-center { -ms-flex-pack: center; justify-content: center; @@ -5882,11 +3062,6 @@ wx-button { -ms-flex: initial; flex: initial; } -.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content { - position: relative; - display: inline; - display: initial; -} .nut-noticebar .nut-noticebar-box-left-icon { display: -ms-flexbox; display: flex; @@ -5895,9 +3070,6 @@ wx-button { margin-right: var(--nutui-noticebar-icon-gap, 4rpx); background-size: 100% 100%; } -.nut-noticebar .nut-noticebar-box-left-icon .nut-icon { - color: var(--nutui-noticebar-color, #d9500b); -} .nut-noticebar .nut-noticebar-box-right-icon { display: -ms-flexbox; display: flex; @@ -5908,11 +3080,6 @@ wx-button { width: var(--nutui-noticebar-right-icon-width, 16rpx); margin-left: var(--nutui-noticebar-icon-gap, 4rpx); } -.nut-noticebar .nut-noticebar-box-right-icon .nut-icon { - width: 12rpx; - height: 12rpx; - color: var(--nutui-noticebar-color, #d9500b); -} .nut-noticebar .nut-noticebar-box-wrap { display: -ms-flexbox; display: flex; @@ -5925,26 +3092,6 @@ wx-button { overflow: hidden; position: relative; } -.nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content { - position: absolute; - white-space: nowrap; - color: var(--nutui-noticebar-color, #d9500b); -} -.nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content.nut-ellipsis { - max-width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.nut-noticebar .nut-noticebar-box .play { - animation: nut-notice-bar-play linear both running; -} -.nut-noticebar .nut-noticebar-box .play-infinite { - animation: nut-notice-bar-play-infinite linear infinite both running; -} -.nut-noticebar .nut-noticebar-box .play-vertical { - animation: nut-notice-bar-play-vertical linear infinite both running; -} .nut-noticebar .nut-noticebar-vertical { position: relative; display: -ms-flexbox; @@ -6001,54 +3148,6 @@ wx-button { width: var(--nutui-noticebar-right-icon-width, 16rpx); margin-left: var(--nutui-noticebar-icon-gap, 4rpx); } -@keyframes nut-notice-bar-play { - to { - transform: translate3d(-100%, 0, 0); - } -} -@keyframes nut-notice-bar-play-infinite { - to { - transform: translate3d(-100%, 0, 0); - } -} -@keyframes nut-notice-bar-play-vertical { - to { - transform: translateY(var(--nutui-noticebar-height, 36rpx)); - } -} -[dir='rtl'] .nut-noticebar .nut-noticebar-box-left-icon, -.nut-rtl .nut-noticebar .nut-noticebar-box-left-icon { - margin-right: 0; - margin-left: var(--nutui-noticebar-icon-gap, 4rpx); -} -[dir='rtl'] .nut-noticebar .nut-noticebar-box-right-icon, -.nut-rtl .nut-noticebar .nut-noticebar-box-right-icon { - margin-left: 0; - margin-right: var(--nutui-noticebar-icon-gap, 4rpx); -} -[dir='rtl'] .nut-noticebar .nut-noticebar-box .play, -.nut-rtl .nut-noticebar .nut-noticebar-box .play { - animation: nut-notice-bar-play-rtl linear both running; -} -[dir='rtl'] .nut-noticebar .nut-noticebar-box .play-infinite, -.nut-rtl .nut-noticebar .nut-noticebar-box .play-infinite { - animation: nut-notice-bar-play-infinite-rtl linear infinite both running; -} -@keyframes nut-notice-bar-play-rtl { - to { - transform: translate3d(100%, 0, 0); - } -} -@keyframes nut-notice-bar-play-infinite-rtl { - to { - transform: translate3d(100%, 0, 0); - } -} -[dir='rtl'] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon, -.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon { - margin-left: 0; - margin-right: var(--nutui-noticebar-icon-gap, 4rpx); -} .nut-navbar { width: var(--nutui-navbar-width, 100%); position: relative; @@ -6069,21 +3168,6 @@ wx-button { overflow: hidden; padding: 0 16rpx; } -.nut-navbar-fixed { - position: fixed; - top: 0; - left: 0; - right: 0; - width: 100%; -} -.nut-navbar-placeholder { - display: inline-block; - width: 100%; -} -.nut-navbar-safe-area-inset-top { - padding-top: constant(safe-area-inset-top); - padding-top: env(safe-area-inset-top); -} .nut-navbar-title-wrapper { -ms-flex-pack: justify; justify-content: space-between; @@ -6108,9 +3192,6 @@ wx-button { -ms-flex-pack: center; justify-content: center; } -.nut-navbar-title ::-webkit-scrollbar { - display: none; -} .nut-navbar-left, .nut-navbar-right { display: -ms-flexbox; @@ -6123,27 +3204,6 @@ wx-button { height: 100%; cursor: pointer; } -.nut-navbar-left .nut-icon, -.nut-navbar-left .nutui-iconfont, -.nut-navbar-right .nut-icon, -.nut-navbar-right .nutui-iconfont { - width: 20rpx; - height: 20rpx; - font-size: 20rpx; -} -.nut-navbar-left-maxwidth, -.nut-navbar-right-maxwidth { - box-sizing: border-box; - width: 108rpx; -} -.nut-navbar-left { - padding-right: 16rpx; - gap: 16rpx; -} -.nut-navbar-left-rtl { - padding-right: 0; - padding-left: 16rpx; -} .nut-navbar-left-back { display: -ms-flexbox; display: flex; @@ -6155,23 +3215,12 @@ wx-button { justify-content: center; gap: 16rpx; } -.nut-navbar-left-hidden { - padding-left: 0; - padding-right: 0; -} .nut-navbar-right { padding-left: 16rpx; -ms-flex-pack: end; justify-content: flex-end; gap: 16rpx; } -.nut-navbar-right-rtl { - padding-right: 16rpx; - padding-left: 0; -} -.nut-navbar-rtl .nut-icon-ArrowLeft { - transform: rotateY(180deg); -} .nut-menu-container-content { padding: var(--nutui-menu-content-padding, 12rpx 24rpx); max-height: var(--nutui-menu-content-max-height, 214rpx); @@ -6182,11 +3231,6 @@ wx-button { flex-wrap: wrap; background: var(--nutui-menu-content-background-color, var(--nutui-color-background-overlay, #ffffff)); } -.nut-menu-container-content_fixed { - width: 100%; - opacity: 0; - position: fixed; -} .nut-menu-container-item { display: -ms-flexbox; display: flex; @@ -6196,10 +3240,6 @@ wx-button { font-size: var(--nutui-font-size-base, 14rpx); padding: var(--nutui-menu-item-padding, 12rpx 0); } -.nut-menu-container-item.active { - font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600)); - color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23)); -} .nut-menu-container-item .nut-icon { display: -ms-flexbox; display: flex; @@ -6211,31 +3251,6 @@ wx-button { -ms-flex-negative: 0; flex-shrink: 0; } -.nut-menu-container-wrap, -.nut-menu-container-wrap-up { - position: absolute; - width: 100%; - z-index: var(--nutui-menu-container-z-index, 1000); - overflow: hidden; -} -.nut-menu-container-wrap-up { - bottom: var(--nutui-menu-bar-line-height, 48rpx); -} -.overlay-fade-enter-active.nut-menu-container-overlay { - top: auto; - z-index: var(--nutui-menu-container-z-index, 1000); -} -.nut-menu-placeholder-element { - position: fixed; - top: calc(-1 * var(--menu-bar-line-height)); - left: 0; - right: 0; - z-index: var(--nutui-menu-bar-opened-z-index, 1000); - background-color: transparent; -} -.nut-menu-placeholder-element.up { - bottom: calc(-1 * var(--menu-bar-line-height)); -} .nut-menu-container-down-enter { opacity: 0; -ms-transform: translateY(-30rpx); @@ -6247,14 +3262,6 @@ wx-button { transform: translate(0); transition: all 0.1s; } -.nut-menu-container-down-exit { - opacity: 1; - transition: all 0.1s; -} -.nut-menu-container-down-exit-done { - opacity: 0; - transition: all 0.1s; -} .nut-menu-container-up-enter { opacity: 0; -ms-transform: translateY(30rpx); @@ -6266,32 +3273,6 @@ wx-button { transform: translate(0); transition: all 0.1s; } -.nut-menu-container-up-exit { - opacity: 1; - transition: all 0.1s; -} -.nut-menu-container-up-exit-done { - opacity: 0; - transition: all 0.1s; -} -[dir='rtl'] .nut-menu-container-item .nut-icon, -.nut-rtl .nut-menu-container-item .nut-icon { - margin-right: 0; - margin-left: var(--nutui-menu-item-icon-margin, 8rpx); -} -[dir='rtl'] .nut-menu-container .nut-icon, -.nut-rtl .nut-menu-container .nut-icon { - transform: rotateY(180deg); -} -.nut-menu { - position: relative; -} -.nut-menu.scroll-fixed { - position: fixed; - top: var(--nutui-menu-scroll-fixed-top, 0); - z-index: var(--nutui-menu-scroll-fixed-z-index, 1000); - width: 100%; -} .nut-menu-bar { position: relative; display: -ms-flexbox; @@ -6300,9 +3281,6 @@ wx-button { background-color: var(--nutui-color-background-overlay, #ffffff); box-shadow: var(--nutui-menu-bar-box-shadow, 0 2rpx 12rpx rgba(89, 89, 89, 0.12)); } -.nut-menu-bar.opened { - z-index: var(--nutui-menu-bar-opened-z-index, 1000); -} .nut-menu-title { -ms-flex: 1; flex: 1; @@ -6318,24 +3296,11 @@ wx-button { justify-content: center; max-width: 100%; } -.nut-menu-title-text { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: block; - padding: var(--nutui-menu-title-padding, 0 8rpx); -} .nut-menu-title-icon { -ms-flex-negative: 0; flex-shrink: 0; transition: all 0.2s linear; } -.nut-menu-title.active { - color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-menu-title.disabled { - color: var(--nutui-menu-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc)); -} .nut-menu-title.active .nut-menu-title-icon { -ms-transform: rotate(180deg); transform: rotate(180deg); @@ -6356,31 +3321,6 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-loading .nut-loading-icon-box { - display: inline-block; - font-size: 0; - line-height: 0; - animation: nut-loading-rotation 1s infinite linear; -} -.nut-loading .nut-loading-icon-box .nut-loading-icon { - color: var(--nutui-loading-icon-color, var(--nutui-color-text-help, #888b94)); - width: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); - height: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); - font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); -} -.nut-loading .nut-loading-text { - color: var(--nutui-loading-color, var(--nutui-color-text-help, #888b94)); - font-size: var(--nutui-loading-font-size, var(--nutui-font-size-s, 12rpx)); -} -.nut-loading-vertical .nut-loading-text { - padding-top: var(--nutui-spacing-base, 8rpx); -} -@keyframes nut-loading-rotation { - 0% { - } - to { - } -} .nut-inputnumber { display: -ms-flexbox; display: flex; @@ -6407,19 +3347,6 @@ wx-button { height: var(--nutui-inputnumber-button-height, 20rpx); background-color: var(--nutui-inputnumber-button-background-color, transparent); } -.nut-inputnumber-minus .nut-icon, -.nut-inputnumber-add .nut-icon { - --nut-icon-width: 10rpx; - --nut-icon-height: 10rpx; -} -.nut-inputnumber-icon { - color: var(--nutui-color-text, #505259); - cursor: pointer; -} -.nut-inputnumber-icon-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); - cursor: not-allowed; -} .nut-inputnumber-input { display: -ms-flexbox; display: flex; @@ -6443,18 +3370,6 @@ wx-button { -moz-appearance: none; appearance: none; } -.nut-inputnumber-input-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); -} -.nut-inputnumber-icon-minus, -.nut-inputnumber-icon-plus { - --nut-icon-width: 16rpx; - --nut-icon-height: 16rpx; -} -.nut-infiniteloading { - display: block; - width: 100%; -} .nut-infiniteloading .nut-infinite-top { display: -ms-flexbox; display: flex; @@ -6508,21 +3423,6 @@ wx-button { align-items: center; font-size: var(--nutui-font-size-xxs, 10rpx); } -.nut-infiniteloading .nut-infinite-bottom-tips-icons { - margin-right: 8rpx; -} -.nut-infiniteloading-primary { - background-color: var(--nutui-color-primary, #ff0f23); -} -.nut-infiniteloading-primary .nut-infinite-bottom, -.nut-infiniteloading-primary .nut-infinite-top { - color: var(--nutui-color-text-dark, rgba(255, 255, 255, 0.9)); -} -[dir='rtl'] .nut-infiniteloading .nut-infinite-bottom-tips-icons, -.nut-rtl .nut-infiniteloading .nut-infinite-bottom-tips-icons { - margin-right: 0; - margin-left: 8rpx; -} .nut-input { position: relative; display: -ms-flexbox; @@ -6538,10 +3438,6 @@ wx-button { font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); box-sizing: border-box; } -.nut-input .nut-input-native .weui-input::-webkit-input-placeholder { - color: #757575; - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); -} .nut-input .nut-input-native .weui-input::-moz-placeholder { color: #757575; font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); @@ -6554,24 +3450,6 @@ wx-button { color: #757575; font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); } -.nut-input .nut-input-native .weui-input::placeholder, -.nut-input-placeholder { - color: #757575; - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); -} -.nut-input .nut-icon { - color: var(--nutui-color-text-disabled, #c2c4cc); - width: 14rpx; - height: 14rpx; - font-size: 14rpx; -} -.nut-input-container { - height: 38rpx; - padding: var(--nutui-input-padding, 12rpx); - background-color: var(--nutui-input-background-color, var(--nutui-color-background-overlay, #ffffff)); - border-radius: var(--nutui-input-border-radius, var(--nutui-radius-s, 6rpx)); - border-bottom: var(--nutui-input-border-bottom-width, 0rpx) solid var(--nutui-input-border-bottom, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); -} .nut-input-native { -ms-flex: 1; flex: 1; @@ -6583,12 +3461,6 @@ wx-button { text-decoration: none; background-color: transparent; } -.nut-input-readonly .nut-input-native { - color: var(--nutui-color-text-help, #888b94); -} -.nut-input-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc) !important; -} .nut-indicator { display: -ms-flexbox; display: flex; @@ -6600,149 +3472,27 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-indicator-fixed-width { - width: 21rpx; -} -.nut-indicator-dot, -.nut-indicator-line { - display: inline-block; - vertical-align: middle; - width: var(--nutui-indicator-dot-size, 3rpx); - height: var(--nutui-indicator-dot-size, 3rpx); - border-radius: 50%; - background-color: var(--nutui-color-border-disabled, #c2c4cc); - margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); - opacity: 0.4; -} -.nut-indicator-dot-0, -.nut-indicator-line-0 { - margin-left: 0; -} -.nut-indicator-dot-active, -.nut-indicator-line-active { - width: var(--nutui-indicator-dot-active-size, 6rpx); - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); - background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23)); - opacity: 1; -} -.nut-indicator-fixed-width .nut-indicator-dot { - width: 12rpx; - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); -} -.nut-indicator-fixed-width .nut-indicator-dot-active { - width: 6rpx; -} .nut-indicator-vertical.nut-indicator-fixed-width { -ms-flex-pack: start; justify-content: flex-start; height: 21rpx; width: auto; } -.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot { - width: 3rpx; - height: 12rpx; - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); -} -.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active, -.nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active { - height: 6rpx; +.nut-indicator-vertical { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; } -.nut-indicator-line { - width: var(--nutui-indicator-dot-active-size, 6rpx); - margin: 0; - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); - background-color: transparent; -} -.nut-indicator-line-active { - transition: transform 0.3s ease-in-out; - background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-indicator-track { - position: relative; -} -.nut-indicator-track::after { - display: block; - content: ' '; - position: absolute; - width: 100%; - height: 100%; - box-sizing: border-box; - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); - background-color: var(--nutui-color-border-disabled, #c2c4cc); - opacity: 0.4; -} -.nut-indicator-white .nut-indicator-dot, -.nut-indicator-white .nut-indicator-line { - position: relative; - box-sizing: content-box; - background: rgba(255, 255, 255, 0.4); - opacity: 1; -} -.nut-indicator-white .nut-indicator-line { - opacity: 0; -} -.nut-indicator-white .nut-indicator-line-active { - opacity: 1; - background: #fff; -} -.nut-indicator-white .nut-indicator-dot-active { - background: #fff; -} -.nut-indicator-track.nut-indicator-white::after { - border: 1rpx solid rgba(0, 0, 0, 0.06); - background: rgba(255, 255, 255, 0.4); -} -.nut-indicator-vertical { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; -} -.nut-indicator-vertical .nut-indicator-dot { - margin: 0; - margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); -} -.nut-indicator-vertical .nut-indicator-dot-0 { - margin-top: 0; -} -.nut-indicator-vertical .nut-indicator-dot-active, -.nut-indicator-vertical.nut-indicator-track .nut-indicator-line { - width: var(--nutui-indicator-dot-size, 3rpx); - height: var(--nutui-indicator-dot-active-size, 6rpx); -} -[dir='rtl'] .nut-indicator-dot-0, -.nut-rtl .nut-indicator-dot-0 { - margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); - margin-left: 0; -} -.nut-imagepreview { - width: 100%; - height: 100%; -} -.nut-imagepreview-swiper { - height: 100%; - width: 100vw; - background-color: transparent; -} -.nut-imagepreview-index { - position: fixed; - z-index: 2002; - top: 50rpx; - text-align: center; - left: 0; - right: 0; - background: transparent; - color: #fff; -} -.nut-imagepreview-index .arrow { - position: absolute; - left: 15rpx; - -ms-transform: rotate(180deg); - transform: rotate(180deg); +.nut-imagepreview-index .arrow { + position: absolute; + left: 15rpx; + -ms-transform: rotate(180deg); + transform: rotate(180deg); } .nut-imagepreview-close { position: fixed; @@ -6756,23 +3506,6 @@ wx-button { background: transparent; color: #fff; } -.nut-imagepreview-close .nut-icon { - color: #fff; -} -.nut-imagepreview-close.top-right { - top: 50rpx; - right: 20rpx; -} -.nut-imagepreview-close.top-left { - top: 50rpx; - left: 20rpx; -} -.nut-imagepreview-close.bottom { - bottom: 50rpx; - left: 0; - right: 0; - text-align: center; -} .nut-imagepreview-pop { width: 100%; height: 100%; @@ -6804,10 +3537,6 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-image-preview-box, -.nut-imagepreview-swiper .nut-swiper-item .nut-image-preview-box { - width: 100%; -} .nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-video .h5-video, .nut-imagepreview-swiper .nut-swiper-item .nut-video .h5-video { -o-object-fit: contain; @@ -6820,32 +3549,6 @@ wx-button { -ms-transform: rotate(-180deg); transform: rotate(-180deg); } -[dir='rtl'] .nut-imagepreview-close.top-right, -.nut-rtl .nut-imagepreview-close.top-right { - right: auto; - left: 20rpx; -} -[dir='rtl'] .nut-imagepreview-close.top-left, -.nut-rtl .nut-imagepreview-close.top-left { - left: auto; - right: 20rpx; -} -.nut-hoverbutton-item-container { - width: var(--nutui-hoverbutton-item-size, 40rpx); - height: var(--nutui-hoverbutton-item-size, 40rpx); - border-radius: var(--nutui-hoverbutton-item-size, 40rpx); - border: 1rpx solid var(--nutui-hoverbutton-item-border-color, rgba(0, 0, 0, 0.12)); - background-color: var(--nutui-hoverbutton-item-background, var(--nutui-white-12)); -} -.nut-hoverbutton-item-container-active { - background-color: var(--nutui-hoverbutton-item-background-active, rgba(247, 248, 252, 0.9)); -} -.nut-hoverbutton-item-container-harmony { - margin-bottom: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8rpx)); -} -.nut-hoverbutton-item-container-harmony:last-child { - margin-bottom: 0; -} .nut-hoverbutton-item-container-icontext { display: -ms-flexbox; display: flex; @@ -6854,34 +3557,6 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-hoverbutton-item-container-icontext .nut-icon { - display: block; - width: 14rpx; - height: 14rpx; - font-size: 14rpx; -} -.nut-hoverbutton-item-icon { - width: 20rpx; - height: 20rpx; - margin: 9rpx; - color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a)); - fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a)); -} -.nut-hoverbutton-item-icon .nut-icon { - display: block; - width: 20rpx; - height: 20rpx; - font-size: 20rpx; -} -.nut-hoverbutton-item-text-icon { - width: 14rpx; - height: 5rpx; -} -.nut-hoverbutton-item-text { - font-size: 10rpx; - margin-top: 5rpx; - line-height: 9rpx; -} .nut-hoverbutton { display: -ms-flexbox; display: flex; @@ -6889,34 +3564,6 @@ wx-button { flex-direction: column; gap: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8rpx)); } -.nut-hoverbutton-container { - position: fixed; - right: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, 8rpx)); - bottom: var(--nutui-hoverbutton-position-bottom, 60rpx); - z-index: 10; -} -[dir='rtl'] .nut-hoverbutton-container, -.nut-hoverbutton-container-rtl { - right: auto; - left: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, 8rpx)); -} -.nut-image { - display: block; - position: relative; -} -.nut-image-default { - display: block; - width: 100%; - height: 100%; -} -.nut-image.nut-image-round { - border-radius: 50%; - overflow: hidden; -} -.nut-image-basic { - width: 100%; - height: 100%; -} .nut-image-loading, .nut-image-error { width: 100%; @@ -6935,13 +3582,6 @@ wx-button { background: var(--nutui-color-background, #f2f3f5); background-size: 100% 100%; } -[dir='rtl'] .nut-image .nut-img-loading, -.nut-rtl .nut-image .nut-img-loading, -[dir='rtl'] .nut-image .nut-img-error, -.nut-rtl .nut-image .nut-img-error { - left: auto; - right: 0; -} .nut-grid-item { display: -ms-flexbox; display: flex; @@ -6952,21 +3592,6 @@ wx-button { color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a)); overflow: hidden; } -.nut-grid-item-text { - color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-grid-item-text-font-size, var(--nutui-font-size-s, 12rpx)); - word-break: break-all; - margin: var(--nutui-grid-item-text-margin, 8rpx) 0 0 0; -} -.nut-grid-item-text-reverse { - margin: 0 0 var(--nutui-grid-item-text-margin, 8rpx) 0; -} -.nut-grid-item-text-horizontal { - margin: 0 0 0 var(--nutui-grid-item-text-margin, 8rpx); -} -.nut-grid-item-text-horizontal-reverse { - margin: 0 var(--nutui-grid-item-text-margin, 8rpx) 0 0; -} .nut-grid-item-content { display: -ms-flexbox; display: flex; @@ -6980,24 +3605,12 @@ wx-button { background: var(--nutui-grid-item-content-bg-color, var(--nutui-gray-1)); border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-grid-item-content-border { - border-right-width: var(--nutui-grid-border-width, 0rpx); - border-bottom-width: var(--nutui-grid-border-width, 0rpx); -} -.nut-grid-item-content-surround { - border-top-width: var(--nutui-grid-border-width, 0rpx); - border-left-width: var(--nutui-grid-border-width, 0rpx); - border-radius: var(--nutui-grid-item-border-radius, var(--nutui-radius-l, 8rpx)); -} .nut-grid-item-content-center { -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; } -.nut-grid-item-content-square { - margin-top: -100%; -} .nut-grid-item-content-reverse { -ms-flex-direction: column-reverse; flex-direction: column-reverse; @@ -7010,9 +3623,6 @@ wx-button { -ms-flex-direction: row-reverse; flex-direction: row-reverse; } -.nut-grid-item-content-clickable { - cursor: pointer; -} .nut-grid-item-content-clickable::before { position: absolute; top: 50%; @@ -7028,24 +3638,6 @@ wx-button { opacity: 0; content: ' '; } -[dir='rtl'] .nut-grid-item-content-border, -.nut-rtl .nut-grid-item-content-border { - border-right-width: 0; - border-left-width: 1rpx; -} -[dir='rtl'] .nut-grid-item-content-surround, -.nut-rtl .nut-grid-item-content-surround { - border-left-width: 0; - border-right-width: 1rpx; -} -[dir='rtl'] .nut-grid-item-content-horizontal .nut-grid-item-text, -.nut-rtl .nut-grid-item-content-horizontal .nut-grid-item-text { - margin: 0 var(--nutui-grid-item-text-margin, 8rpx) 0 0; -} -[dir='rtl'] .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text, -.nut-rtl .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text { - margin: 0 0 0 var(--nutui-grid-item-text-margin, 8rpx); -} [dir='rtl'] .nut-grid-item-content-clickable::before, .nut-rtl .nut-grid-item-content-clickable::before { left: auto; @@ -7064,23 +3656,10 @@ wx-button { flex-wrap: wrap; border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-grid-border { - border-top-width: var(--nutui-grid-border-width, 0rpx); - border-left-width: var(--nutui-grid-border-width, 0rpx); -} -[dir='rtl'] .nut-grid-border, -.nut-rtl .nut-grid-border { - border-left-width: 0; - border-right-width: 1rpx; -} -.nut-form-item { - display: -ms-flexbox; - display: flex; - line-height: inherit; -} -.nut-form-item-disabled { - opacity: 0.4; - pointer-events: none; +.nut-form-item { + display: -ms-flexbox; + display: flex; + line-height: inherit; } .nut-form-item-label { display: -ms-flexbox; @@ -7097,22 +3676,6 @@ wx-button { text-align: var(--nutui-form-item-label-text-align, left); line-height: inherit; } -.nut-form-item-label-left-required { - color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23)); - margin-right: var(--nutui-form-item-required-margin-right, 4rpx); - position: absolute; - left: -10rpx; -} -.nut-form-item-label-right-required { - color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23)); - margin-left: var(--nutui-form-item-required-margin-right, 4rpx); - position: absolute; - right: -10rpx; -} -.nut-form-item .nut-form-item-labeltxt { - position: relative; - font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, 12rpx)); -} .nut-form-item-body { -ms-flex: 1; flex: 1; @@ -7121,81 +3684,12 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-form-item-body-slots { - text-align: var(--nutui-form-item-body-slots-text-align, left); -} -.nut-form-item-body-slots .nut-input { - padding: 0; - border: 0; -} -.nut-form-item-body-slots .nut-input-container { - height: auto; -} -.nut-form-item-body-slots .nut-input-text { - font-size: var(--nutui-form-item-body-font-size, var(--nutui-font-size-base, 14rpx)); - text-align: var(--nutui-form-item-body-input-text-align, left); - color: var(--nutui-color-title, #1a1a1a); - width: 100%; - outline: 0 none; - border: 0; - text-decoration: none; - background: transparent; -} -.nut-form-item-body-slots .nut-range-container { - min-height: 24rpx; -} -.nut-form-item-body-slots .nut-textarea { - padding: 0; -} -.nut-form-item-body-slots .nut-textarea .nut-textarea-textarea { - font: inherit; - text-align: var(--nutui-form-item-body-input-text-align, left); -} -.nut-form-item-body-tips { - text-align: var(--nutui-form-item-tip-text-align, left); - font-size: var(--nutui-form-item-tip-font-size, var(--nutui-font-size-xs, 11rpx)); - color: var(--nutui-form-item-error-message-color, var(--nutui-color-primary, #ff0f23)); -} -[dir='rtl'] .nut-form-item-label, -.nut-rtl .nut-form-item-label { - text-align: right; - margin-right: 0; - margin-left: var(--nutui-form-item-label-margin-right, 10rpx); -} -[dir='rtl'] .nut-form-item-label .required::before, -.nut-rtl .nut-form-item-label .required::before { - margin-right: 0; - margin-left: var(--nutui-form-item-required-margin-right, 4rpx); -} -[dir='rtl'] .nut-form-item-body-slots, -.nut-rtl .nut-form-item-body-slots { - text-align: right; -} -[dir='rtl'] .nut-form-item-body-slots .nut-icon-ArrowRight, -[dir='rtl'] .nut-form-item-body-slots .nut-icon-ArrowLeft, -.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowRight, -.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowLeft { - transform: rotateY(180deg); -} -[dir='rtl'] .nut-form-item-body-slots .nut-input-text, -.nut-rtl .nut-form-item-body-slots .nut-input-text, -[dir='rtl'] .nut-form-item-body-slots .nut-textarea-textarea, -.nut-rtl .nut-form-item-body-slots .nut-textarea-textarea, -[dir='rtl'] .nut-form-item-tips, -.nut-rtl .nut-form-item-tips { - text-align: right; -} .nut-form-item-label-right { -ms-flex-pack: end; justify-content: flex-end; padding-right: 24rpx; white-space: nowrap; } -.nut-form-item-label-left { - position: relative; - padding-left: 12rpx; - white-space: nowrap; -} .nut-form-item-top { -ms-flex-direction: column; flex-direction: column; @@ -7203,48 +3697,6 @@ wx-button { align-items: flex-start; white-space: nowrap; } -.nut-form-item-label-top { - display: block; - padding-bottom: 4rpx; - padding-right: 24rpx; -} -.nut-form-item-body-top { - margin-left: 0; - width: 100%; -} -[dir='rtl'] .form-layout-right .nut-form-item-label, -.nut-rtl .form-layout-right .nut-form-item-label { - text-align: left; - padding-right: 0; - padding-left: 24rpx; -} -[dir='rtl'] .form-layout-left .nut-form-item-label, -.nut-rtl .form-layout-left .nut-form-item-label { - text-align: right; - padding-left: 0; - padding-right: 12rpx; -} -[dir='rtl'] .form-layout-left .nut-form-item-label .required, -.nut-rtl .form-layout-left .nut-form-item-label .required { - left: auto; - right: 0.1em; -} -[dir='rtl'] .form-layout-top .nut-form-item-label, -.nut-rtl .form-layout-top .nut-form-item-label { - padding-right: 0; - padding-left: 24rpx; -} -[dir='rtl'] .form-layout-top .nut-form-item-body, -.nut-rtl .form-layout-top .nut-form-item-body { - margin-left: 0; - margin-right: 0; -} -.nut-fixednav { - position: fixed; - z-index: var(--nutui-fixednav-index, 900); - display: inline-block; - height: 50rpx; -} .nut-fixednav.active .nut-fixednav-btn .nut-icon { -ms-transform: rotate(180deg); transform: rotate(180deg); @@ -7280,9 +3732,6 @@ wx-button { -ms-flex-negative: 0; flex-shrink: 0; } -.nut-fixednav-btn .nut-icon { - transition: all 0.3s; -} .nut-fixednav-list { position: absolute; transition: all 0.5s; @@ -7315,21 +3764,6 @@ wx-button { flex-shrink: 0; color: var(--nutui-fixednav-color, #1a1a1a); } -.nut-fixednav-list-item .nut-fixednav-list-text { - font-size: 10rpx; -} -.nut-fixednav-list-image { - width: 20rpx; - height: 20rpx; - margin-bottom: 2rpx; -} -.nut-fixednav-right { - right: 0; -} -.nut-fixednav-right .nut-fixednav-btn { - right: 0; - border-radius: 45rpx 0 0 45rpx; -} .nut-fixednav-right .nut-fixednav-btn .nut-icon { margin-right: 5rpx; -ms-transform: rotate(0); @@ -7343,9 +3777,6 @@ wx-button { padding-left: 20rpx; padding-right: 80rpx; } -.nut-fixednav-left { - left: 0; -} .nut-fixednav-left .nut-fixednav-btn { -ms-flex-direction: row-reverse; flex-direction: row-reverse; @@ -7365,11 +3796,6 @@ wx-button { padding-left: 80rpx; padding-right: 20rpx; } -[dir='rtl'] .nut-fixednav-right, -.nut-rtl .nut-fixednav-right { - right: auto; - left: 0; -} [dir='rtl'] .nut-fixednav.active .nut-icon, .nut-rtl .nut-fixednav.active .nut-icon { -ms-transform: rotate(0); @@ -7380,12 +3806,6 @@ wx-button { -ms-transform: rotate(-180deg); transform: rotate(-180deg); } -[dir='rtl'] .nut-fixednav-btn, -.nut-rtl .nut-fixednav-btn { - right: auto; - left: 0; - border-radius: 0 45rpx 45rpx 0; -} [dir='rtl'] .nut-fixednav-btn .nut-icon, .nut-rtl .nut-fixednav-btn .nut-icon { margin-right: 0; @@ -7404,22 +3824,6 @@ wx-button { padding-right: 20rpx; padding-left: 80rpx; } -[dir='rtl'] .nut-fixednav-list-item .b, -.nut-rtl .nut-fixednav-list-item .b { - right: auto; - left: 0; -} -[dir='rtl'] .nut-fixednav-left, -.nut-rtl .nut-fixednav-left { - left: auto; - right: 0; -} -[dir='rtl'] .nut-fixednav-left .nut-fixednav-btn, -.nut-rtl .nut-fixednav-left .nut-fixednav-btn { - left: auto; - right: 0; - border-radius: 45rpx 0 0 45rpx; -} [dir='rtl'] .nut-fixednav-left .nut-fixednav-btn .nut-icon, .nut-rtl .nut-fixednav-left .nut-fixednav-btn .nut-icon { -ms-transform: rotate(0); @@ -7437,25 +3841,10 @@ wx-button { padding-right: 80rpx; padding-left: 20rpx; } -.nut-drag .nut-fixednav { - position: relative; -} .nut-ellipsis { display: -ms-flexbox; display: flex; } -.nut-ellipsis .nut-ellipsis-text { - cursor: pointer; - color: var(--nutui-ellipsis-expand-collapse-color, var(--nutui-color-info, #0073ff)); - display: inline-block; -} -.nut-ellipsis .nut-ellipsis-wordbreak { - word-break: break-all; -} -.nut-ellipsis-copy { - position: absolute; - top: -999999rpx; -} .nut-ellipsis-width { width: -moz-fit-content; width: fit-content; @@ -7513,10 +3902,6 @@ wx-button { font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-size-base, 14rpx)); color: var(--nutui-elevator-list-color, var(--nutui-color-title, #1a1a1a)); } -.nut-elevator-list-item-name-highcolor { - color: var(--nutui-color-primary, #ff0f23); - font-weight: 600; -} .nut-elevator-list-fixed { position: absolute; top: 0; @@ -7533,11 +3918,6 @@ wx-button { box-shadow: var(--nutui-elevator-list-fixed-box-shadow, 0 0 10rpx #eee); background-color: var(--nutui-elevator-list-fixed-bg-color, #ffffff); } -.nut-elevator-list-fixed-title { - font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-elevator-list-fixed-color, var(--nutui-color-primary, #ff0f23)); - font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600)); -} .nut-elevator-code-current { position: absolute; right: var(--nutui-elevator-list-item-code-current-right, 60rpx); @@ -7605,28 +3985,6 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-elevator-vertical .nut-elevator-list-item-code { - border-bottom: var(--nutui-elevator-list-item-code-border-bottom, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); -} -.nut-elevator-vertical .nut-elevator-list-item-name, -.nut-elevator-vertical .nut-elevator-list-item-code { - padding: var(--nutui-elevator-list-item-padding, 0 36rpx 0 20rpx); -} -[dir='rtl'] .nut-elevator-list-fixed, -.nut-rtl .nut-elevator-list-fixed { - left: auto; - right: 0; -} -[dir='rtl'] .nut-elevator-code-current, -.nut-rtl .nut-elevator-code-current { - right: auto; - left: var(--nutui-elevator-list-item-code-current-right, 60rpx); -} -[dir='rtl'] .nut-elevator-bars, -.nut-rtl .nut-elevator-bars { - right: auto; - left: var(--nutui-elevator-bars-right, 16rpx); -} .nut-drag { position: fixed; z-index: 9997 !important; @@ -7665,54 +4023,19 @@ wx-button { padding: var(--nutui-empty-padding, 32rpx 40rpx); background-color: var(--nutui-empty-background-color, var(--nutui-color-background-overlay, #ffffff)); } -.nut-empty-base { - width: var(--nutui-empty-image-size, 160rpx); - height: var(--nutui-empty-image-size, 160rpx); +.nut-empty-actions-base { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + margin-top: 24rpx; } -.nut-empty-base .h5-img, -.nut-empty-base image { - width: 100%; - height: 100%; -} -.nut-empty-small { - width: var(--nutui-empty-image-small-size, 120rpx); - height: var(--nutui-empty-image-small-size, 120rpx); -} -.nut-empty-small .h5-img, -.nut-empty-small image { - width: 100%; - height: 100%; -} -.nut-empty-title { - margin-top: var(--nutui-empty-title-margin-top, 0rpx); - font-weight: var(--nutui-font-weight-bold, 600); - margin-bottom: var(--nutui-empty-title-margin-bottom, 12rpx); - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-font-size-l, 15rpx); - line-height: var(--nutui-empty-title-line-height, var(--nutui-font-size-l, 15rpx)); -} -.nut-empty-description { - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-font-size-s, 12rpx); - line-height: var(--nutui-empty-description-line-height, 1); -} -.nut-empty-actions-base { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - margin-top: 24rpx; -} -.nut-empty-actions-small { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - margin-top: 16rpx; -} -.nut-empty-action { - margin-right: 6rpx; - margin-left: 6rpx; +.nut-empty-actions-small { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + margin-top: 16rpx; } .nut-divider { display: -ms-flexbox; @@ -7738,16 +4061,6 @@ wx-button { -ms-flex: 1; flex: 1; } -.nut-divider-center-before, -.nut-divider-left-before, -.nut-divider-right-before { - margin-right: var(--nutui-divider-spacing, 8rpx); -} -.nut-divider-center-after, -.nut-divider-left-after, -.nut-divider-right-after { - margin-left: var(--nutui-divider-spacing, 8rpx); -} .nut-divider-left-before, .nut-divider-right-after { width: var(--nutui-divider-side-width, 10%); @@ -7765,14 +4078,6 @@ wx-button { margin: var(--nutui-divider-vertical-margin, 0 8rpx); vertical-align: middle; } -.nut-divider-rtl-before { - margin-right: 0; - margin-left: var(--nutui-divider-spacing, 8rpx); -} -.nut-divider-rtl-after { - margin-left: 0; - margin-right: var(--nutui-divider-spacing, 8rpx); -} .nut-datepickerview { display: -ms-flexbox; display: flex; @@ -7819,19 +4124,6 @@ wx-button { align-items: center; color: var(--nutui-dialog-close-color, #ffffff); } -.nut-dialog-close .nut-icon { - font-size: var(--nutui-dialog-close-width, 16rpx); - width: var(--nutui-dialog-close-width, 16rpx); - height: var(--nutui-dialog-close-height, 16rpx); -} -.nut-dialog-close-top-right { - top: var(--nutui-dialog-close-top, 16rpx); - right: var(--nutui-dialog-close-right, 16rpx); -} -.nut-dialog-close-top-left { - top: var(--nutui-dialog-close-top, 16rpx); - left: var(--nutui-dialog-close-left, 16rpx); -} .nut-dialog-close-bottom { bottom: -64rpx; width: var(--nutui-dialog-bottom-close-icon-size, 24rpx); @@ -7840,38 +4132,6 @@ wx-button { -ms-transform: translate(-50%); transform: translate(-50%); } -.nut-dialog-close-bottom .nut-icon { - color: var(--nutui-color-text-disabled, #c2c4cc); - background-color: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)); - border-radius: 50%; - width: var(--nutui-dialog-bottom-close-icon-size, 24rpx); - height: var(--nutui-dialog-bottom-close-icon-size, 24rpx); -} -.nut-dialog-header { - display: block; - text-align: center; - font-size: var(--nutui-dialog-header-font-size, var(--nutui-font-size-xl, 18rpx)); - font-weight: var(--nutui-dialog-header-font-weight, var(--nutui-font-weight-bold, 600)); - color: var(--nutui-color-title, #1a1a1a); - margin-bottom: var(--nutui-dialog-title-margin-bottom, 8rpx); - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.nut-dialog-content { - width: 100%; - margin: var(--nutui-dialog-content-margin, 0 0 20rpx 0); - max-height: var(--nutui-dialog-content-max-height, 268rpx); - line-height: var(--nutui-dialog-content-line-height, 20rpx); - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-color-title, #1a1a1a); - word-wrap: break-word; - word-break: break-all; - white-space: pre-wrap; - text-align: var(--nutui-dialog-content-text-align, left); - overflow-y: auto; -} .nut-dialog-footer { display: -ms-flexbox; display: flex; @@ -7885,9 +4145,6 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-dialog-footer.vertical .nut-button { - min-width: 100%; -} .nut-dialog-footer.vertical .nut-dialog-footer-cancel { margin: 0; color: var(--nutui-color-text, #505259); @@ -7899,20 +4156,6 @@ wx-button { margin-top: var(--nutui-dialog-vertical-footer-ok-margin-top, 16rpx); background: transparent; } -.nut-dialog-footer .nut-button { - min-width: var(--nutui-dialog-footer-button-min-width, 117rpx); - border-radius: var(--nutui-dialog-footer-button-border, 6rpx); - padding: var(--nutui-button-large-padding, 0 12rpx); -} -.nut-dialog-footer-cancel.nut-dialog-footer-cancel { - margin-right: var(--nutui-dialog-footer-cancel-margin-right, 12rpx); - background: var(--nutui-dialog-footer-cancel-bg, var(--nutui-color-background-sunken, #f7f8fc)); - color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a)); - border-color: var(--nutui-button-default-border-color, transparent); -} -.nut-dialog-footer-cancel.nut-dialog-footer-cancel .nut-button-children { - color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a)); -} .nut-dialog-footer-ok-container { position: relative; display: -ms-flexbox; @@ -7938,16 +4181,6 @@ wx-button { font-size: var(--nutui-dialog-footer-badge-fontsize, 10rpx); color: var(--nutui-dialog-footer-badge-color-ok, var(--nutui-color-primary, #ff0f23)); } -.nut-dialog-footer-ok { - max-width: var(--nutui-dialog-footer-ok-max-width, 128rpx); - font-weight: var(--nutui-font-weight-medium, 500); -} -.nut-dialog-footer-ok .nut-button-children { - font-weight: var(--nutui-font-weight-medium, 500); -} -.nut-dialog-footer-block.nut-button { - min-width: 100%; -} .nut-dialog-footer-cancel-container { position: relative; display: -ms-flexbox; @@ -7980,25 +4213,6 @@ wx-button { -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } -[dir='rtl'] .nut-dialog-close-top-right, -.nut-rtl .nut-dialog-close-top-right { - right: auto; - left: var(--nutui-dialog-close-right, 16rpx); -} -[dir='rtl'] .nut-dialog-close-top-left, -.nut-rtl .nut-dialog-close-top-left { - left: auto; - right: var(--nutui-dialog-close-left, 16rpx); -} -[dir='rtl'] .nut-dialog-footer-cancel.nut-dialog-footer-cancel, -.nut-rtl .nut-dialog-footer-cancel.nut-dialog-footer-cancel { - margin-right: 0; - margin-left: var(--nutui-dialog-footer-cancel-margin-right, 12rpx); -} -[dir='rtl'] .nut-dialog-content, -.nut-rtl .nut-dialog-content { - text-align: var(--nutui-dialog-content-text-align, right); -} .nut-countup-list { display: -ms-flexbox; display: flex; @@ -8015,12 +4229,6 @@ wx-button { -ms-user-select: none; user-select: none; } -.nut-countup-listitem-number { - margin: 0 var(--nutui-countup-lr-margin, 0); - border-radius: var(--nutui-countup-border-radius, 4rpx); - color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a)); - background-color: var(--nutui-countup-bg-color, inherit); -} .nut-countup-separator { display: -ms-flexbox; display: flex; @@ -8043,13 +4251,6 @@ wx-button { -ms-transform: translate(0); transform: translate(0); } -.nut-countup-number-text { - height: var(--nutui-countup-height, 32rpx); - line-height: var(--nutui-countup-height, 32rpx); - color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-countup-base-size, 18rpx); - font-weight: var(--nutui-font-weight-bold, 600); -} .nut-countdown { display: var(--nutui-countdown-display, flex); -ms-flex-direction: row; @@ -8076,15 +4277,6 @@ wx-button { line-height: calc(var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11rpx)) + 2rpx); font-family: JDZH-Regular; } -.nut-countdown-number, -.nut-countdown-number-primary { - position: relative; - min-width: var(--nutui-countdown-width, 16rpx); - padding: var(--nutui-countdown-number-padding, 0 0); - border-radius: var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2rpx)); - margin: var(--nutui-countdown-number-margin, 0 1rpx); - text-align: center; -} .nut-countdown-number::after, .nut-countdown-number-primary::after { content: ''; @@ -8097,7781 +4289,7694 @@ wx-button { transform: scale(0.5); border-radius: calc(var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2rpx)) * 2); } -.nut-countdown-number { - background-color: var(--nutui-countdown-number-background-color, var(--nutui-color-background-overlay, #ffffff)); - color: var(--nutui-countdown-number-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-countdown-number::after { - border: 1rpx solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-specialdisabled, #ffadbe)); -} -.nut-countdown-number-primary { - background-color: var(--nutui-countdown-number-primary-background-color, var(--nutui-color-primary, #ff0f23)); - color: var(--nutui-countdown-number-primary-color, #ffffff); -} -.nut-countdown-number-primary::after { - border: 1rpx solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-countdown-number-text { - border: 0; - background-color: transparent; - color: var(--nutui-countdown-number-color, var(--nutui-color-primary, #ff0f23)); -} -.nut-countdown-unit { - color: var(--nutui-countdown-color, var(--nutui-color-primary, #ff0f23)); +.nut-circleprogress-text { + position: absolute; + top: 50%; + left: 0; + box-sizing: border-box; + width: 100%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + text-align: center; + color: var(--nutui-circleprogress-text-color, var(--nutui-color-title, #1a1a1a)); + font-size: var(--nutui-circleprogress-text-size, var(--nutui-font-size-l, 15rpx)); } -.nut-col { +.nut-collapse-item::after { + position: absolute; box-sizing: border-box; - word-break: break-all; - margin-bottom: var(--nutui-col-default-margin-bottom, 15rpx); + content: ' '; + pointer-events: none; + right: 16rpx; + left: 16rpx; + bottom: 0; + border-bottom: var(--nutui-collapse-item-border-bottom, none); + -ms-transform: scaleY(0.5); + transform: scaleY(0.5); } -[dir='rtl'] .nut-col, -.nut-rtl .nut-col { - float: right; +.nut-collapse-item-header { + position: relative; + display: -ms-flexbox; + display: flex; + width: 100%; + overflow: hidden; + padding: var(--nutui-collapse-item-padding, 13rpx 26rpx); + font-size: var(--nutui-collapse-item-font-size, var(--nutui-font-size-base, 14rpx)); + line-height: var(--nutui-collapse-item-line-height, 24rpx); + background-color: var(--nutui-color-background-overlay, #ffffff); + box-sizing: border-box; } -[dir='rtl'] .nut-col.nut-col-gutter:last-child, -.nut-rtl .nut-col.nut-col-gutter:last-child { - padding-right: 0 !important; - padding-left: 0 !important; +.nut-collapse-item-header::after { + position: absolute; + box-sizing: border-box; + content: ' '; + pointer-events: none; + right: 16rpx; + left: 16rpx; + bottom: 0; + border-bottom: var(--nutui-collapse-item-header-border-bottom, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + -ms-transform: scale(1); + transform: scale(1); + -ms-transform: scaleY(0.5); + transform: scaleY(0.5); } -[dir='rtl'] .nut-col.nut-col-gutter:first-child, -.nut-rtl .nut-col.nut-col-gutter:first-child { - padding-left: 0 !important; - padding-right: 0 !important; +.nut-collapse-item-title { + color: var(--nutui-collapse-item-color, var(--nutui-color-title, #1a1a1a)); + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; } -.nut-col-offset-1 { - margin-left: 4.166666666%; +.nut-collapse-item-extra { + -ms-flex: 1; + flex: 1; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: end; + justify-content: flex-end; + padding: 0 20rpx; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--nutui-collapse-item-extra-color, var(--nutui-color-text, #505259)); +} +.nut-collapse-item-icon-box { + display: -ms-flexbox; + display: flex; + width: 24rpx; + position: relative; + color: var(--nutui-color-text, #505259); +} +.nut-collapse-item-icon { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + position: absolute; + top: 50%; + left: 5rpx; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + -ms-transform-origin: center; + transform-origin: center; + transition: transform 0.3s; +} +.nut-checkboxgroup-vertical { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; +} +.nut-checkboxgroup-vertical .nut-checkbox.nut-checkbox-reverse { + width: 100%; + -ms-flex-pack: justify; + justify-content: space-between; +} +.nut-checkboxgroup-horizontal { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.nut-checkboxgroup-horizontal .nut-checkbox { + display: -ms-flexbox; + display: flex; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex: 1; + flex: 1; + margin-right: 20rpx; +} +.nut-checkboxgroup-list { + -ms-flex-positive: 1; + flex-grow: 1; + border-bottom: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + border-top: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + padding: var(--nutui-checkbox-list-padding, 0 0 0 12rpx); + background: var(--nutui-checkbox-list-background-color, #ffffff); + box-sizing: border-box; +} +.nut-checkboxgroup-list .nut-checkbox.nut-checkbox-reverse { + width: auto; + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-pack: justify; + justify-content: space-between; +} +.nut-checkbox { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; +} +.nut-checkbox-icon { + color: var(--nutui-color-text-disabled, #c2c4cc); + font-size: var(--nutui-checkbox-icon-font-size, var(--nutui-font-size-icon, 16rpx)); + -ms-flex-negative: 0; + flex-shrink: 0; +} +.nut-checkbox-label { + margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4rpx)); + font-size: var(--nutui-checkbox-label-font-size, var(--nutui-font-size-s, 12rpx)); + color: var(--nutui-checkbox-label-color, var(--nutui-color-title, #1a1a1a)); + -ms-flex-negative: 0; + flex-shrink: 0; +} +.nut-checkbox-reverse { + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; +} +.nut-checkbox-button { + position: relative; + display: -ms-flexbox; + display: flex; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-align: center; + align-items: center; + min-height: 32rpx; + padding: var(--nutui-checkbox-button-padding, 5rpx 18rpx); + font-size: var(--nutui-checkbox-button-font-size, var(--nutui-font-size-s, 12rpx)); + background: var(--nutui-color-background, #f2f3f5); + border-radius: var(--nutui-checkbox-button-border-radius, 15rpx); + color: var(--nutui-checkbox-label-color, var(--nutui-color-title, #1a1a1a)); + box-sizing: border-box; + border: 1rpx solid var(--nutui-color-background, #f2f3f5); + overflow: hidden; +} +.nut-checkbox-button-icon { + position: absolute; + right: 0; + bottom: 0; + width: 0; + height: 0; + border-top: 10rpx solid transparent; + border-left: 10rpx solid transparent; + border-bottom: 10rpx solid var(--nutui-color-primary, #ff0f23); + border-right: 10rpx solid var(--nutui-color-primary, #ff0f23); + display: -ms-flexbox; + display: flex; + -ms-flex-align: end; + align-items: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; +} +.nut-checkbox-button .nut-checkbox-button-icon-checked { + width: 12rpx; + height: 12rpx; + position: absolute; + color: #fff; + right: 0; + bottom: 0; + -ms-transform: translate(-1rpx, -2rpx); + transform: translate(-1rpx, -2rpx); +} +.nut-checkbox-list-item { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: justify; + justify-content: space-between; + padding: var(--nutui-checkbox-list-item-padding, 12rpx 12rpx 12rpx 0); + border-top: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +} +.nut-checkbox-list-item .nut-checkbox-label, +.nut-checkbox-list-item .nut-icon { + -ms-flex: none; + flex: none; +} +[dir='rtl'] .nut-checkbox-button-icon-checked, +.nut-rtl .nut-checkbox-button-icon-checked { + left: auto; + right: 50%; + -ms-transform: translate(3rpx, -3rpx); + transform: translate(3rpx, -3rpx); +} +.nut-cell { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + width: 100%; + line-height: var(--nutui-cell-line-height, 20rpx); + padding: var(--nutui-cell-padding, 13rpx 16rpx); + background-color: var(--nutui-cell-background-color, var(--nutui-color-background-overlay, #ffffff)); + border-radius: var(--nutui-cell-border-radius, 6rpx); + box-shadow: var(--nutui-cell-box-shadow, 0rpx 1rpx 7rpx 0rpx rgb(237, 238, 241)); + font-size: var(--nutui-cell-title-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-cell-title-color, var(--nutui-color-title, #1a1a1a)); + margin-bottom: 10rpx; + box-sizing: border-box; +} +.nut-cell-left { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-align: start; + align-items: flex-start; + -ms-flex: 1; + flex: 1; +} +.nut-cell-extra { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-pack: end; + justify-content: flex-end; + -ms-flex-align: center; + align-items: center; + -ms-flex: 1; + flex: 1; + -ms-flex-negative: 0; + flex-shrink: 0; + min-width: 0; + word-break: break-all; + font-size: var(--nutui-cell-extra-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-cell-extra-color, var(--nutui-color-text, #505259)); +} +.nut-cell-clickable::before { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + background-color: #000; + border: inherit; + border-color: #000; + border-radius: inherit; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + opacity: 0; + content: ' '; +} +.nut-cell-divider { + display: -ms-flexbox; + display: flex; + min-height: 1rpx; + padding-left: var(--nutui-cell-divider-left, 16rpx); + padding-right: var(--nutui-cell-divider-right, 16rpx); +} +.nut-cell-divider-inner { + display: -ms-flexbox; + display: flex; + height: 1rpx; + width: 100%; + border-top: var(--nutui-cell-divider-border-bottom, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +} +.nut-cascader .nut-tabs-titles-item { + -ms-flex: initial; + flex: initial; + min-width: auto; + width: auto; + padding: var(--nutui-cascader-tabs-item-padding, 0 10rpx); + white-space: nowrap; +} +.nut-cascader-item { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + padding: var(--nutui-cascader-item-padding, 10rpx 20rpx); + margin: var(--nutui-cascader-item-margin, 0rpx); + border-bottom: var(--nutui-cascader-item-border-bottom, 0rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + font-size: var(--nutui-cascader-item-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-cascader-item-color, var(--nutui-color-title, #1a1a1a)); + cursor: pointer; +} +.nut-cascader-item-title { + -ms-flex: 1; + flex: 1; +} +.nut-card { + width: 100%; + display: -ms-flexbox; + display: flex; + background-color: inherit; + border-radius: var(--nutui-card-border-radius, 4rpx); +} +.nut-card-left { + width: 120rpx; + height: 120rpx; + -ms-flex-negative: 0; + flex-shrink: 0; +} +.nut-card-right { + -ms-flex: 1; + flex: 1; + padding: 0 10rpx 8rpx; +} +.nut-card-right-price { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + height: 18rpx; + line-height: 18rpx; + margin-top: 9rpx; +} +.nut-card-right-other { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + padding: 5rpx 0 2rpx; +} +.nut-card-right-shop { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-align: center; + align-items: center; +} +.nut-calendarcard-header { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: justify; + justify-content: space-between; + font-weight: 400; +} +.nut-calendarcard-header-left, +.nut-calendarcard-header-right { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + cursor: pointer; + margin: 16rpx; + line-height: 1; +} +.nut-calendarcard-days { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-align: center; + align-items: center; +} +.nut-calendarcard-day { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + width: var(--nutui-calendar-day-width, 14.28%); + height: 48rpx; + cursor: pointer; + margin-bottom: 4rpx; + text-align: center; +} +.nut-calendarcard-day-top, +.nut-calendarcard-day-bottom { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + width: 100%; + height: 12rpx; + font-size: 12rpx; + line-height: 12rpx; +} +[dir='rtl'] .nut-calendarcard-header-left .nut-icon-ArrowLeft, +[dir='rtl'] .nut-calendarcard-header-left .nut-icon-ArrowRight, +[dir='rtl'] .nut-calendarcard-header-left .h5-svg, +[dir='rtl'] .nut-calendarcard-header-right .nut-icon-ArrowLeft, +[dir='rtl'] .nut-calendarcard-header-right .nut-icon-ArrowRight, +[dir='rtl'] .nut-calendarcard-header-right .h5-svg, +.nut-rtl .nut-calendarcard-header-left .nut-icon-ArrowLeft, +.nut-rtl .nut-calendarcard-header-left .nut-icon-ArrowRight, +.nut-rtl .nut-calendarcard-header-left .h5-svg, +.nut-rtl .nut-calendarcard-header-right .nut-icon-ArrowLeft, +.nut-rtl .nut-calendarcard-header-right .nut-icon-ArrowRight, +.nut-rtl .nut-calendarcard-header-right .h5-svg { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.nut-calendar { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex: 1; + flex: 1; + font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15rpx)); + background-color: var(--nutui-color-background-overlay, #ffffff); + color: var(--nutui-color-title, #1a1a1a); + overflow: hidden; + height: 100%; +} +.nut-calendar-header { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + text-align: center; +} +.nut-calendar-weeks { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: distribute; + justify-content: space-around; + height: 36rpx; + border-radius: 0 0 12rpx 12rpx; + box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05882); +} +.nut-calendar-content { + -ms-flex: 1; + flex: 1; + width: 100%; + display: block; + overflow-y: auto; +} +.nut-calendar-month { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + text-align: center; +} +.nut-calendar-day { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-direction: column; + flex-direction: column; + position: relative; + float: left; + width: var(--nutui-calendar-day-width, 14.28%); + height: var(--nutui-calendar-day-height, 60rpx); + font-weight: var(--nutui-calendar-day-font-weight, var(--nutui-font-weight-bold, 600)); + margin-bottom: 4rpx; +} +.nut-calendar-footer { + display: -ms-flexbox; + display: flex; + width: 100%; + -ms-flex-direction: column; + flex-direction: column; + background-color: #fff; +} +.nut-calendar-footer .calendar-confirm-btn { + height: 40rpx; + line-height: 40rpx; + margin: 6rpx 16rpx; + text-align: center; + border-radius: var(--nutui-radius-base, 8rpx); + background: -webkit-linear-gradient(left, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); + background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); + color: #fff; + font-weight: var(--nutui-font-weight-bold, 600); +} +.nut-button { + position: relative; + display: -ms-flexbox; + display: flex; + display: inline-block; + width: 80rpx; + width: auto; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-negative: 0; + flex-shrink: 0; + box-sizing: border-box; + margin: 0; + padding: 0; + height: var(--nutui-button-default-height, 32rpx); + font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14rpx)); + font-weight: var(--nutui-font-weight, 400); + text-align: center; + cursor: pointer; + transition: opacity 0.2s; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: manipulation; + touch-action: manipulation; + color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a)); + background: var(--nutui-button-default-background-color, transparent); + border-width: var(--nutui-button-border-width, 0.5rpx); +} +.nut-button-children { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + background: transparent; +} +.nut-button::before { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); + border: inherit; + border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); + border-radius: inherit; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + opacity: 0; + content: ' '; + pointer-events: none; + pointer-events: auto; +} +.nut-button-wrap { + height: 100%; + width: 100%; + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; + background: initial; +} +.nut-button-primary-solid { + background: -webkit-linear-gradient(left, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); + background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); + color: var(--nutui-button-primary-color, #ffffff); + border-color: transparent; + font-weight: var(--nutui-font-weight-bold, 600); +} +[dir='rtl'] .nut-button::before, +.nut-rtl .nut-button::before { + left: auto; + right: 50%; + -ms-transform: translate(50%, -50%); + transform: translate(50%, -50%); +} +.nut-barrage .barrage-item { + display: block; + position: absolute; + right: 0; + padding: 4rpx 16rpx; + border-radius: 16rpx; + font-size: var(--nutui-font-size-s, 12rpx); + text-align: center; + white-space: pre; + -ms-transform: translate(100%); + transform: translate(100%); + background: -webkit-linear-gradient(left, var(--nutui-black-3), var(--nutui-black-1)); + background: linear-gradient(to right, var(--nutui-black-3), var(--nutui-black-1)); + box-sizing: border-box; +} +[dir='rtl'] .nut-barrage .barrage-item, +.nut-rtl .nut-barrage .barrage-item { + -ms-transform: translate(-100%); + transform: translate(-100%); + background: -webkit-linear-gradient(right, var(--nutui-black-3), var(--nutui-black-1)); + background: linear-gradient(to left, var(--nutui-black-3), var(--nutui-black-1)); +} +.nut-badge { + position: relative; + display: -ms-flexbox; + display: flex; + display: -ms-inline-flexbox; + display: inline-flex; + box-sizing: content-box; + vertical-align: middle; + width: auto; +} +.nut-badge-icon { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23)); + padding: var(--nutui-badge-icon-padding, 2rpx); + text-align: center; + z-index: var(--nutui-badge-z-index, 1); +} +.nut-badge-sup::after, +.nut-badge-icon::after { + content: ''; + position: absolute; + top: -50%; + bottom: -50%; + left: -50%; + right: -50%; + -ms-transform: scale(0.5); + transform: scale(0.5); + border: var(--nutui-badge-border, 1rpx solid #ffffff); + border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14rpx)); +} +.nut-badge-sup { + display: -ms-flexbox; + display: flex; + display: -ms-inline-flexbox; + display: inline-flex; + text-align: center; + min-width: var(--nutui-badge-min-width, 6rpx); + padding: var(--nutui-badge-padding, 1rpx 4rpx); + box-sizing: border-box; + color: var(--nutui-badge-color, #ffffff); + font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9rpx)); + line-height: 12rpx; + white-space: nowrap; + font-weight: 400; + vertical-align: middle; + background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23)); + z-index: 1; +} +.nut-badge-content { + position: absolute; + -ms-transform: var(--nutui-badge-content-transform, translate(50%, -50%)); + transform: var(--nutui-badge-content-transform, translate(50%, -50%)); +} +.nut-backtop-show { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + width: var(--nutui-hoverbutton-item-size, 40rpx); + height: var(--nutui-hoverbutton-item-size, 40rpx); + transition: all 0.2s ease-in-out; +} +.nut-backtop-show .nut-hoverbutton-item-container { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; +} +.nut-avatar-cropper { + position: relative; + display: -ms-flexbox; + display: flex; } -[dir='rtl'] .nut-col-offset-1, -.nut-rtl .nut-col-offset-1 { - margin-left: 0; - margin-right: 4.166666666%; +.nut-avatar-cropper-edit-text { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.30196); + z-index: 1; + color: #fff; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; } -.nut-col-1 { - width: 4.166666666%; +.nut-avatar-cropper-popup-toolbar-flex { + width: 100%; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: justify; + justify-content: space-between; } -.nut-col-offset-2 { - margin-left: 8.333333332%; +.nut-avatar-cropper-popup-toolbar-item { + color: #fff; + padding: 15rpx; + cursor: pointer; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; } -[dir='rtl'] .nut-col-offset-2, -.nut-rtl .nut-col-offset-2 { - margin-left: 0; - margin-right: 8.333333332%; +.nut-avatar-cropper-popup-highlight .highlight { + position: absolute; + left: 50%; + top: 50%; + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + background-color: transparent; + box-shadow: 0 0 1000rpx 1000rpx rgba(0, 0, 0, 0.6); } -.nut-col-2 { - width: 8.333333332%; +[dir='rtl'] .nut-avatar-cropper-popup-highlight .highlight, +.nut-rtl .nut-avatar-cropper-popup-highlight .highlight { + left: auto; + right: 50%; + -ms-transform: translate(50%, -50%); + transform: translate(50%, -50%); } -.nut-col-offset-3 { - margin-left: 12.499999998%; +.nut-avatar-group { + display: -ms-flexbox; + display: flex; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex: 0 0 auto; + flex: 0 0 auto; } -[dir='rtl'] .nut-col-offset-3, -.nut-rtl .nut-col-offset-3 { - margin-left: 0; - margin-right: 12.499999998%; +.nut-avatar { + position: relative; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + width: var(--nutui-avatar-normal-width, 40rpx); + height: var(--nutui-avatar-normal-height, 40rpx); } -.nut-col-3 { - width: 12.499999998%; +.nut-avatar-img { + width: 100%; + height: 100%; + -ms-flex-negative: 0; + flex-shrink: 0; + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center center; } -.nut-col-offset-4 { - margin-left: 16.666666664%; +.nut-avatar-text { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; } -[dir='rtl'] .nut-col-offset-4, -.nut-rtl .nut-col-offset-4 { - margin-left: 0; - margin-right: 16.666666664%; +.nut-audio-icon-box { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + width: 30rpx; + height: 30rpx; + background: #fff; + border-radius: 50%; + box-shadow: 0 0 8rpx var(--nutui-color-text-disabled, #c2c4cc); } -.nut-col-4 { - width: 16.666666664%; +.nut-audio-icon .nut-audio-icon-stop::after { + position: absolute; + left: 50%; + top: 50%; + -ms-transform: translate(-50%); + transform: translate(-50%); + content: ''; + height: 2rpx; + width: 30rpx; + background: var(--nutui-color-text-disabled, #c2c4cc); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -ms-transform-origin: 8rpx -18rpx; + transform-origin: 8rpx -18rpx; } -.nut-col-offset-5 { - margin-left: 20.83333333%; +.nut-audio-progress { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + width: 100%; + margin: 0 auto; + padding: 10rpx 0; } -[dir='rtl'] .nut-col-offset-5, -.nut-rtl .nut-col-offset-5 { - margin-left: 0; - margin-right: 20.83333333%; +.nut-audio-progress-bar-wrapper { + -ms-flex: 1; + flex: 1; + margin: 0 10rpx; } -.nut-col-5 { - width: 20.83333333%; +.nut-audio .nut-audio-none-container .nut-voice { + border: 1rpx solid var(--nutui-color-title, #1a1a1a); + -ms-flex-align: center; + align-items: center; } -.nut-col-offset-6 { - margin-left: 24.999999996%; +[dir='rtl'] .nut-audio-icon .nut-audio-icon-stop::after, +.nut-rtl .nut-audio-icon .nut-audio-icon-stop::after { + left: auto; + right: 50%; + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + -ms-transform-origin: 20rpx -18rpx; + transform-origin: 20rpx -18rpx; } -[dir='rtl'] .nut-col-offset-6, -.nut-rtl .nut-col-offset-6 { - margin-left: 0; - margin-right: 24.999999996%; +.nut-animate .nut-animate-twinkle::after, +.nut-animate .nut-animate-twinkle::before { + width: 60rpx; + height: 60rpx; + content: ''; + box-sizing: border-box; + border: 4rpx solid rgba(255, 255, 255, 0.6); + position: absolute; + border-radius: 30rpx; + right: 50%; + margin-top: -30rpx; + margin-right: -30rpx; + z-index: 1; + -ms-transform: scale(0); + transform: scale(0); + animation: twinkle 2s ease-out infinite; } -.nut-col-6 { - width: 24.999999996%; +.nut-animate .nut-animate-flicker::after { + width: 100rpx; + height: 60rpx; + position: absolute; + left: 0; + top: 0; + opacity: 0.73; + content: ''; + background-image: -webkit-linear-gradient(344deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%); + background-image: linear-gradient(106deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%); + animation: flicker 1.5s linear infinite; + -ms-transform: skew(-20deg); + transform: skew(-20deg); + filter: blur(3rpx); } -.nut-col-offset-7 { - margin-left: 29.166666662%; +.nut-animate .nut-animate-jump { + -ms-transform-origin: center center; + transform-origin: center center; + animation: jump 0.7s linear; } -[dir='rtl'] .nut-col-offset-7, -.nut-rtl .nut-col-offset-7 { - margin-left: 0; - margin-right: 29.166666662%; +.nut-address-exist-item { + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + margin-bottom: 20rpx; + font-size: var(--nutui-font-size-s, 12rpx); + line-height: var(--nutui-font-size-base, 14rpx); + color: var(--nutui-color-title, #1a1a1a); } -.nut-col-7 { - width: 29.166666662%; +.nut-address-footer-btn { + width: 90%; + height: 42rpx; + line-height: 42rpx; + margin: auto; + text-align: center; + background: -webkit-linear-gradient(left, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); + background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); + border-radius: 21rpx; + font-size: 15rpx; + color: #fff; } -.nut-col-offset-8 { - margin-left: 33.333333328%; +.nut-address-hotlist { + padding: 0 16rpx; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -ms-flex-align: start; + align-items: flex-start; } -[dir='rtl'] .nut-col-offset-8, -.nut-rtl .nut-col-offset-8 { - margin-left: 0; - margin-right: 33.333333328%; +.nut-address-hotlist-item { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + width: 63rpx; + height: 28rpx; + font-size: 12rpx; + border-radius: 4rpx; + margin-bottom: 7rpx; + margin-right: 7rpx; + background-color: var(--nutui-color-background-sunken, #f7f8fc); + color: var(--nutui-color-title, #1a1a1a); } -.nut-col-8 { - width: 33.333333328%; +.nut-address-selected { + width: 100%; + height: 60rpx; + padding: 0 16rpx; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + border-bottom: 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)); } -.nut-col-offset-9 { - margin-left: 37.499999994%; +.nut-address-elevator .nut-elevator-bars-inner-item { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + width: 16rpx; + height: 16rpx; + font-size: 10rpx; + border-radius: 16rpx; + margin-bottom: 2rpx; + color: var(--nutui-color-text-help, #888b94); } -[dir='rtl'] .nut-col-offset-9, -.nut-rtl .nut-col-offset-9 { - margin-left: 0; - margin-right: 37.499999994%; +/* tokens: template-corpus-apply <= src/pages/index/index.tsx */ +.template-corpus-apply { + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-align: center; + align-items: center; + gap: calc(var(--spacing) * 2); + border-radius: 20rpx; + --tw-gradient-position: to right; + background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); + background-image: linear-gradient(var(--tw-gradient-stops)); + --tw-gradient-from: #9e58e9; + --tw-gradient-to: var(--color-blue-500); + --tw-gradient-stops: + var(--tw-gradient-via-stops, var(--tw-gradient-position)), var(--tw-gradient-from) var(--tw-gradient-from-position,), var(--tw-gradient-to) var(--tw-gradient-to-position,); + padding-left: 18rpx; + padding-right: 18rpx; + padding-top: 10rpx; + padding-bottom: 10rpx; + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + font-size: 26rpx; + color: var(--color-white); } -.nut-col-9 { - width: 37.499999994%; +.nut-watermark { + position: absolute; + z-index: var(--nutui-watermark-z-index, 1200); + top: 0; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + background-repeat: repeat; } -.nut-col-offset-10 { - margin-left: 41.66666666%; +.nut-watermark-full-page { + position: fixed; } -[dir='rtl'] .nut-col-offset-10, -.nut-rtl .nut-col-offset-10 { - margin-left: 0; - margin-right: 41.66666666%; +.nut-horizontal-items { + float: left; } -.nut-col-10 { - width: 41.66666666%; +.nut-horizontal-items .h5-li { + display: block; + float: left; + color: var(--nutui-color-title, #1a1a1a); + background: var(--nutui-color-background-overlay, #ffffff); + padding: 10rpx; + margin-right: 20rpx; } -.nut-col-offset-11 { - margin-left: 45.833333326%; +.nut-horizontal-items::after { + content: ''; + display: block; + visibility: hidden; + clear: both; } -[dir='rtl'] .nut-col-offset-11, -.nut-rtl .nut-col-offset-11 { - margin-left: 0; - margin-right: 45.833333326%; +.nut-vertical-items .h5-li { + display: block; + color: var(--nutui-color-title, #1a1a1a); + background: var(--nutui-color-background-overlay, #ffffff); + border-radius: 7rpx; + box-shadow: 0 1rpx 6rpx #edeef1; + margin-top: 20rpx; + padding: 14rpx 15rpx; + font-size: 13rpx; + line-height: 18rpx; + font-family: PingFangSC; + font-weight: 500; } -.nut-col-11 { - width: 45.833333326%; +.nut-virtualList-box { + overflow: auto; } -.nut-col-offset-12 { - margin-left: 49.999999992%; +.nut-virtuallist { + width: 100%; + overflow: scroll; + position: relative; + -webkit-overflow-scrolling: touch; } -[dir='rtl'] .nut-col-offset-12, -.nut-rtl .nut-col-offset-12 { - margin-left: 0; - margin-right: 49.999999992%; +.nut-virtuallist-phantom { + position: absolute; + left: 0; + top: 0; + right: 0; + z-index: -1; } -.nut-col-12 { - width: 49.999999992%; +.nut-virtuallist-container { + position: absolute; + left: 0; + right: 0; + top: 0; } -.nut-col-offset-13 { - margin-left: 54.166666658%; +.nut-virtuallist-item { + overflow: hidden; + margin: var(--nutui-list-item-margin, 0 0 10rpx 0); } -[dir='rtl'] .nut-col-offset-13, -.nut-rtl .nut-col-offset-13 { - margin-left: 0; - margin-right: 54.166666658%; +[dir='rtl'] .nut-horizontal-items, +.nut-rtl .nut-horizontal-items { + float: right; } -.nut-col-13 { - width: 54.166666658%; +[dir='rtl'] .nut-horizontal-items .h5-li, +.nut-rtl .nut-horizontal-items .h5-li { + float: right; + margin-right: 0; + margin-left: 20rpx; } -.nut-col-offset-14 { - margin-left: 58.333333324%; +.nut-uploader { + position: relative; + display: flex; + flex-wrap: wrap; } -[dir='rtl'] .nut-col-offset-14, -.nut-rtl .nut-col-offset-14 { - margin-left: 0; - margin-right: 58.333333324%; +.nut-uploader-slot { + position: relative; } -.nut-col-14 { - width: 58.333333324%; +.nut-uploader-upload { + position: relative; + display: flex; + align-items: center; + justify-content: center; + background: var(--nutui-uploader-background, var(--nutui-color-background, #f2f3f5)); + width: var(--nutui-uploader-image-width, 100rpx); + height: var(--nutui-uploader-image-height, 100rpx); + border: var(--nutui-uploader-image-border, 0rpx); + border-radius: var(--nutui-uploader-image-border-radius, 4rpx); } -.nut-col-offset-15 { - margin-left: 62.49999999%; +.nut-uploader-icon { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: var(--nutui-uploader-image-color, var(--nutui-color-text-help, #888b94)); } -[dir='rtl'] .nut-col-offset-15, -.nut-rtl .nut-col-offset-15 { - margin-left: 0; - margin-right: 62.49999999%; +.nut-uploader-icon .h5-i, +.nut-uploader-icon .nut-icon { + color: var(--nutui-uploader-image-color, var(--nutui-color-text-help, #888b94)); + margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); } -.nut-col-15 { - width: 62.49999999%; +.nut-uploader-icon-tip { + font-size: var(--nutui-uploader-image-icon-tip-font-size, 12rpx); } -.nut-col-offset-16 { - margin-left: 66.666666656%; +.nut-uploader-input { + position: absolute !important; + top: 0; + left: 0; + width: 100% !important; + height: 100% !important; + overflow: hidden; + cursor: pointer; + opacity: 0; } -[dir='rtl'] .nut-col-offset-16, -.nut-rtl .nut-col-offset-16 { - margin-left: 0; - margin-right: 66.666666656%; +.nut-uploader-upload-disabled { + background: var(--nutui-uploader-background-disabled, var(--nutui-color-background, #f2f3f5)); + color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled, #c2c4cc)); } -.nut-col-16 { - width: 66.666666656%; +.nut-uploader-upload-disabled .nut-uploader-icon .h5-i, +.nut-uploader-upload-disabled .nut-uploader-icon .nut-icon { + color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled, #c2c4cc)); + margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); } -.nut-col-offset-17 { - margin-left: 70.833333322%; +.nut-uploader-preview { + position: relative; + margin-right: var(--nutui-uploader-preview-margin-right, 10rpx); + margin-bottom: var(--nutui-uploader-preview-margin-bottom, 10rpx); + border-radius: var(--nutui-uploader-image-border-radius, 4rpx); + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); } -[dir='rtl'] .nut-col-offset-17, -.nut-rtl .nut-col-offset-17 { - margin-left: 0; - margin-right: 70.833333322%; +.nut-uploader-preview-progress { + position: absolute; + left: 0; + top: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + background: var(--nutui-uploader-preview-progress-background, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); + border-radius: var(--nutui-uploader-image-border-radius, 4rpx); + z-index: 10; } -.nut-col-17 { - width: 70.833333322%; +.nut-uploader-preview-progress .h5-i { + margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); } -.nut-col-offset-18 { - margin-left: 74.999999988%; +.nut-uploader-preview-progress-msg { + color: var(--nutui-color-text-help, #888b94); + font-size: 12rpx; } -[dir='rtl'] .nut-col-offset-18, -.nut-rtl .nut-col-offset-18 { - margin-left: 0; - margin-right: 74.999999988%; +.nut-uploader-preview.list { + width: 100%; + margin-right: 0; + margin-bottom: 0; + margin-top: 10rpx; + box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.01176); } -.nut-col-18 { - width: 74.999999988%; +.nut-uploader-preview-list { + width: 100%; + height: 32rpx; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 10rpx; + background-color: var(--nutui-color-background-sunken, #f7f8fc); } -.nut-col-offset-19 { - margin-left: 79.166666654%; +.nut-uploader-preview-list .nut-uploader-preview-img-file-name { + display: flex; + align-items: center; + -webkit-line-clamp: 1; + padding: 2rpx; + height: 24rpx; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -[dir='rtl'] .nut-col-offset-19, -.nut-rtl .nut-col-offset-19 { - margin-left: 0; - margin-right: 79.166666654%; +.nut-uploader-preview-list .nut-progress { + position: absolute; + left: 0; + right: 0; + bottom: 0; } -.nut-col-19 { - width: 79.166666654%; +.nut-uploader-preview-list .nut-progress .nut-progress-outer { + height: 2rpx !important; } -.nut-col-offset-20 { - margin-left: 83.33333332%; +.nut-uploader-preview .close { + position: absolute; + right: var(--nutui-uploader-preview-close-right, 0rpx); + top: var(--nutui-uploader-preview-close-top, 0rpx); + transform: translate(50%, -50%); + z-index: 1; } -[dir='rtl'] .nut-col-offset-20, -.nut-rtl .nut-col-offset-20 { - margin-left: 0; - margin-right: 83.33333332%; +.nut-uploader-preview-img { + position: relative; + width: var(--nutui-uploader-image-width, 100rpx); + height: var(--nutui-uploader-image-height, 100rpx); + border-radius: var(--nutui-uploader-image-border-radius, 4rpx); + overflow: hidden; } -.nut-col-20 { - width: 83.33333332%; +.nut-uploader-preview-img .h5-i { + color: var(--nutui-color-title, #1a1a1a); } -.nut-col-offset-21 { - margin-left: 87.499999986%; +.nut-uploader-preview-img .tips { + position: absolute; + bottom: 0; + left: 0; + font-size: 12rpx; + color: #fff; + text-align: center; + box-sizing: border-box; + height: var(--nutui-uploader-preview-tips-height, 24rpx); + line-height: var(--nutui-uploader-preview-tips-height, 24rpx); + border-radius: var(--nutui-uploader-image-border-radius, 4rpx); + border-top-left-radius: 0; + border-top-right-radius: 0; + padding: var(--nutui-uploader-preview-tips-padding, 0 5rpx); + background: var(--nutui-uploader-preview-tips-background, var(--nutui-black-7)); + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -[dir='rtl'] .nut-col-offset-21, -.nut-rtl .nut-col-offset-21 { - margin-left: 0; - margin-right: 87.499999986%; +.nut-uploader-preview-img-c { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + position: static; + position: initial; + border-radius: var(--nutui-uploader-image-border-radius, 4rpx); } -.nut-col-21 { - width: 87.499999986%; +.nut-uploader-preview-img-file { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s; } -.nut-col-offset-22 { - margin-left: 91.666666652%; +.nut-uploader-preview-img-file-name { + display: flex; + width: 90%; + font-size: 12rpx; + color: var(--nutui-color-text, #505259); + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + word-break: break-all; } -[dir='rtl'] .nut-col-offset-22, -.nut-rtl .nut-col-offset-22 { - margin-left: 0; - margin-right: 91.666666652%; +.nut-uploader-preview-img-file-name.error { + color: red !important; } -.nut-col-22 { - width: 91.666666652%; +.nut-uploader-preview-img-file-name.success { + color: #1890ff !important; } -.nut-col-offset-23 { - margin-left: 95.833333318%; +.nut-uploader-preview-img-file-name .nut-icon-Link { + flex-shrink: 0; } -[dir='rtl'] .nut-col-offset-23, -.nut-rtl .nut-col-offset-23 { - margin-left: 0; - margin-right: 95.833333318%; +[dir='rtl'] .nut-uploader-input, +.nut-rtl .nut-uploader-input { + left: auto; + right: 0; } -.nut-col-23 { - width: 95.833333318%; +[dir='rtl'] .nut-uploader-preview, +.nut-rtl .nut-uploader-preview { + margin-right: 0; + margin-left: var(--nutui-uploader-preview-margin-right, 10rpx); } -.nut-col-offset-24 { - margin-left: 99.999999984%; +[dir='rtl'] .nut-uploader-preview-progress, +.nut-rtl .nut-uploader-preview-progress { + left: auto; + right: 0; } -[dir='rtl'] .nut-col-offset-24, -.nut-rtl .nut-col-offset-24 { +[dir='rtl'] .nut-uploader-preview.list, +.nut-rtl .nut-uploader-preview.list { + margin-right: 0; margin-left: 0; - margin-right: 99.999999984%; } -.nut-col-24 { - width: 99.999999984%; +[dir='rtl'] .nut-uploader-preview .close, +.nut-rtl .nut-uploader-preview .close { + right: auto; + left: var(--nutui-uploader-preview-close-right, 0rpx); + transform: translate(-50%, -50%); } -.nut-circleprogress { - position: relative; +[dir='rtl'] .nut-uploader-preview-img .tips, +.nut-rtl .nut-uploader-preview-img .tips { + left: auto; + right: 0; } -.nut-circleprogress-hover { - stroke: var(--nutui-circleprogress-primary-color, var(--nutui-color-primary, #ff0f23)); - transition: - stroke-dasharray 0.2s ease-in-out 0s, - stroke 0.2s ease 0s; +.nut-video { + width: 100%; + height: 100%; + position: relative; + display: flex; } -.nut-circleprogress-path { - stroke: var(--nutui-circleprogress-path-color, var(--nutui-color-background, #f2f3f5)); +.nut-video-player { + width: 100%; + background: #000; } -.nut-circleprogress-text { - position: absolute; - top: 50%; - left: 0; - box-sizing: border-box; +.nut-video .h5-video { width: 100%; - -ms-transform: translateY(-50%); - transform: translateY(-50%); - text-align: center; - color: var(--nutui-circleprogress-text-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-circleprogress-text-size, var(--nutui-font-size-l, 15rpx)); + height: 100%; + object-fit: fill; } -[dir='rtl'] .nut-circleprogress-text, -.nut-rtl .nut-circleprogress-text { - left: auto; - right: 0; +.nut-tour-mask { + position: fixed; + box-shadow: 0 0 0 150vh var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); + border-radius: var(--nutui-tour-mask-border-radius, 10rpx); + z-index: 999; } -.nut-collapse-item { - position: relative; +.nut-tour-mask-none { + box-shadow: none; } -.nut-collapse-item::after { - position: absolute; - box-sizing: border-box; - content: ' '; - pointer-events: none; - right: 16rpx; - left: 16rpx; - bottom: 0; - border-bottom: var(--nutui-collapse-item-border-bottom, none); - -ms-transform: scaleY(0.5); - transform: scaleY(0.5); +.nut-tour-mask-hidden { + opacity: 0; } -.nut-collapse-item:last-child::after { - display: none; +.nut-tour-content { + display: block; + padding: var(--nutui-tour-content-padding, 10rpx 12rpx); + min-width: var(--nutui-tour-content-min-width, 200rpx); + box-sizing: content-box; } -.nut-collapse-item-header { - position: relative; - display: -ms-flexbox; - display: flex; - width: 100%; - overflow: hidden; - padding: var(--nutui-collapse-item-padding, 13rpx 26rpx); - font-size: var(--nutui-collapse-item-font-size, var(--nutui-font-size-base, 14rpx)); - line-height: var(--nutui-collapse-item-line-height, 24rpx); - background-color: var(--nutui-color-background-overlay, #ffffff); - box-sizing: border-box; +.nut-tour-content-top { + display: block; + text-align: right; } -.nut-collapse-item-header::after { - position: absolute; - box-sizing: border-box; - content: ' '; - pointer-events: none; - right: 16rpx; - left: 16rpx; - bottom: 0; - border-bottom: var(--nutui-collapse-item-header-border-bottom, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - -ms-transform: scale(1); - transform: scale(1); - -ms-transform: scaleY(0.5); - transform: scaleY(0.5); +.nut-tour-content-top-close { + --nut-icon-width: 10rpx; + --nut-icon-height: 10rpx; } -.nut-collapse-item-title { - color: var(--nutui-collapse-item-color, var(--nutui-color-title, #1a1a1a)); - display: -ms-flexbox; +.nut-tour-content-inner { + margin: var(--nutui-tour-content-inner-margin, 10rpx 0rpx); + font-size: var(--nutui-tour-content-inner-font-size, 14rpx); + white-space: nowrap; +} +.nut-tour-content-bottom { + margin-top: var(--nutui-tour-content-bottom-margin-top, 10rpx); display: flex; - -ms-flex-align: center; - align-items: center; + justify-content: space-between; } -.nut-collapse-item-extra { - -ms-flex: 1; - flex: 1; - display: -ms-flexbox; +.nut-tour-content-bottom-operate { display: flex; - -ms-flex-pack: end; justify-content: flex-end; - padding: 0 20rpx; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: var(--nutui-collapse-item-extra-color, var(--nutui-color-text, #505259)); } -.nut-collapse-item-icon-box { - display: -ms-flexbox; - display: flex; - width: 24rpx; - position: relative; +.nut-tour-content-bottom-operate-btn { + display: inline-block; + border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); + margin-left: var(--nutui-tour-content-bottom-btn-margin-left, 4rpx); + padding: var(--nutui-tour-content-bottom-btn-padding, 2rpx 4rpx); + font-size: var(--nutui-tour-content-bottom-btn-font-size, 12rpx); + border-radius: var(--nutui-tour-content-bottom-btn-border-radius, 4rpx); color: var(--nutui-color-text, #505259); + cursor: pointer; } -.nut-collapse-item-icon { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - position: absolute; - top: 50%; - left: 5rpx; - -ms-transform: translateY(-50%); - transform: translateY(-50%); - -ms-transform-origin: center; - transform-origin: center; - transition: transform 0.3s; +.nut-tour-content-bottom-operate-btn.active { + color: #fff; + border: 0; + background: var(--nutui-color-primary, #ff0f23); } -.nut-collapse-item-header-disabled, -.nut-collapse-item-header-disabled .nut-collapse-item-title, -.nut-collapse-item-header-disabled .nut-collapse-item-icon { - color: var(--nutui-collapse-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc)); +.nut-tour-content-tile .nut-tour-content-inner { + margin: 0; } -.nut-collapse-item-content-wrapper { - width: 100%; - position: relative; - box-sizing: border-box; - overflow: hidden; +.nut-tour-masked { + position: fixed; + width: 100vh; + height: 100vh; + z-index: 1000; + top: 0; + left: 0; + background: transparent; } -.nut-collapse-item-content-wrapper-tran { - transition: all 0.3s linear; +[dir='rtl'] .nut-tour-content-bottom-operate-btn, +.nut-rtl .nut-tour-content-bottom-operate-btn { + margin-left: 0; + margin-right: var(--nutui-tour-content-bottom-btn-margin-left, 4rpx); } -.nut-collapse-item-content { - display: block; - position: absolute; - height: auto; - width: 100%; - box-sizing: border-box; - color: var(--nutui-collapse-wrapper-content-color, var(--nutui-color-text, #505259)); - font-size: var(--nutui-collapse-wrapper-content-font-size, var(--nutui-font-size-base, 14rpx)); - line-height: var(--nutui-collapse-wrapper-content-line-height, 1.5); - background-color: var(--nutui-collapse-wrapper-content-background-color, var(--nutui-color-background-overlay, #ffffff)); +[dir='rtl'] .nut-tour-masked, +.nut-rtl .nut-tour-masked { + left: auto; + right: 0; } -.nut-collapse-item-content-text { - color: var(--nutui-collapse-wrapper-content-color, var(--nutui-color-text, #505259)); - padding: var(--nutui-collapse-wrapper-content-padding, 12rpx 26rpx); +.nut-trendarrow { + display: flex; + flex-direction: row; + align-items: center; + color: var(--nutui-color-title, #1a1a1a); + font-size: var(--nutui-trendarrow-font-size, 14rpx); } -[dir='rtl'] .nut-collapse-item-icon, -.nut-rtl .nut-collapse-item-icon { - left: auto; - right: 5rpx; +.nut-trendarrow-icon-before { + margin-right: var(--nutui-trendarrow-icon-margin, 4rpx); } -.nut-checkboxgroup .nut-checkbox-button { - background-color: var(--nutui-color-background, #f2f3f5); +.nut-trendarrow-icon-after { + margin-left: var(--nutui-trendarrow-icon-margin, 4rpx); } -.nut-checkboxgroup-vertical { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; +.nut-trendarrow-rate { + vertical-align: middle; + display: inline; } -.nut-checkboxgroup-vertical .nut-checkbox { - margin-bottom: 5rpx; +.nut-trendarrow .nut-icon { + vertical-align: middle; } -.nut-checkboxgroup-vertical .nut-checkbox.nut-checkbox-reverse { - width: 100%; - -ms-flex-pack: justify; - justify-content: space-between; +[dir='rtl'] .nut-trendarrow-icon-before, +.nut-rtl .nut-trendarrow-icon-before { + margin-right: 0; + margin-left: var(--nutui-trendarrow-icon-margin, 4rpx); } -.nut-checkboxgroup-vertical .nut-checkbox-button-active { - border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); +[dir='rtl'] .nut-trendarrow-icon-after, +.nut-rtl .nut-trendarrow-icon-after { + margin-left: 0; + margin-right: var(--nutui-trendarrow-icon-margin, 4rpx); } -.nut-checkboxgroup-horizontal { - display: -ms-flexbox; +@keyframes rotation { + 0% { + } + to { + } +} +.nut-toast { + position: fixed; + left: 0; + top: 0; display: flex; - -ms-flex-direction: row; flex-direction: row; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 1300; } -.nut-checkboxgroup-horizontal .nut-checkbox { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex: 1; - flex: 1; - margin-right: 20rpx; +.nut-toast-overlay-default { + --nutui-overlay-bg-color: rgba(0, 0, 0, 0); } -.nut-checkboxgroup-horizontal .nut-checkbox-button-active { - border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); +.nut-toast-overlay-default-taro { + background-color: rgba(0, 0, 0, 0); + --nutui-overlay-bg-color: rgba(0, 0, 0, 0); } -.nut-checkboxgroup-list { - -ms-flex-positive: 1; - flex-grow: 1; - border-bottom: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - border-top: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - padding: var(--nutui-checkbox-list-padding, 0 0 0 12rpx); - background: var(--nutui-checkbox-list-background-color, #ffffff); +.nut-toast-inner { + position: absolute; + top: var(--nutui-toast-inner-top, 50%); + transform: translateY(-50%); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-width: 96rpx; + max-width: 60%; box-sizing: border-box; + font-size: var(--nutui-toast-text-font-size, 14rpx); + text-align: var(--nutui-toast-inner-text-align, center); + padding: var(--nutui-toast-inner-padding, 13rpx 16rpx); + word-break: break-all; + background: var(--nutui-toast-inner-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); + border-radius: var(--nutui-toast-inner-border-radius, var(--nutui-radius-xl, 12rpx)); + color: var(--nutui-toast-font-color, #ffffff); } -.nut-checkboxgroup-list .nut-checkbox { - margin-bottom: 5rpx; +.nut-toast-inner-descrption { + max-width: 68.2%; } -.nut-checkboxgroup-list .nut-checkbox.nut-checkbox-reverse { - width: auto; - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-pack: justify; - justify-content: space-between; +.nut-toast-inner-normal { + word-break: normal; + word-wrap: normal; } -.nut-checkboxgroup-list .nut-checkbox-list-item:first-child { - border-top: none; +.nut-toast-inner-break-word { + word-break: normal; + word-wrap: break-word; +} +.nut-toast-inner-small { + font-size: var(--nutui-font-size-s, 12rpx); +} +.nut-toast-inner-large { + font-size: var(--nutui-font-size-l, 15rpx); +} +.nut-toast-center { + top: var(--nutui-toast-inner-top, 48%); +} +.nut-toast-bottom { + top: var(--nutui-toast-inner-top, 80%); +} +.nut-toast-top { + top: var(--nutui-toast-inner-top, 20%); +} +.nut-toast-text { + color: #fff; + text-align: var(--nutui-toast-inner-text-align, center); + line-height: normal; + line-height: 20rpx; + height: auto; } -[dir='rtl'] .nut-checkboxgroup .nut-checkbox-label, -.nut-rtl .nut-checkboxgroup .nut-checkbox-label, -[dir='rtl'] .nut-checkboxgroup-vertical .nut-checkbox-label, -.nut-rtl .nut-checkboxgroup-vertical .nut-checkbox-label { - margin-right: 5rpx; +.nut-toast-title { + color: #fff; + font-size: var(--nutui-toast-title-font-size, 16rpx); + font-weight: 600; + text-align: var(--nutui-toast-inner-text-align, center); + line-height: normal; + line-height: 22rpx; } -[dir='rtl'] .nut-checkboxgroup-horizontal .nut-checkbox, -.nut-rtl .nut-checkboxgroup-horizontal .nut-checkbox { - margin-right: 0; - margin-left: 20rpx; +.nut-toast .nut-icon { + width: 24rpx; + height: 24rpx; + color: #fff; } -.nut-checkbox { - display: -ms-flexbox; +.nut-toast-icon-wrapper { + width: 100%; display: flex; - -ms-flex-align: center; align-items: center; + justify-content: center; + margin: 3rpx 0 5rpx; + color: #fff; } -.nut-checkbox-icon { - color: var(--nutui-color-text-disabled, #c2c4cc); - font-size: var(--nutui-checkbox-icon-font-size, var(--nutui-font-size-icon, 16rpx)); - -ms-flex-negative: 0; - flex-shrink: 0; -} -.nut-checkbox-icon-wrap { - font-size: 0rpx; - line-height: 0rpx; - border-radius: 50%; - box-shadow: 0 2rpx 4rpx rgba(255, 15, 35, 0.2); -} -.nut-checkbox-icon-checked { - color: var(--nutui-color-primary, #ff0f23); - background-color: #fff; - transition-duration: 0.3s; - transition-property: color, border-color, background-color; - border-radius: 50%; -} -.nut-checkbox-icon-checked.nut-checkbox-icon-disabled { - color: var(--nutui-color-primary-disabled-special, #ffadbe); +.nut-toast-icon-wrapper-icon { + width: 24rpx; + height: 24rpx; } -.nut-checkbox-label { - margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4rpx)); - font-size: var(--nutui-checkbox-label-font-size, var(--nutui-font-size-s, 12rpx)); - color: var(--nutui-checkbox-label-color, var(--nutui-color-title, #1a1a1a)); - -ms-flex-negative: 0; - flex-shrink: 0; +.nut-toast-rtl { + left: auto; + right: 0; } -.nut-checkbox-label-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); +.nut-toast-rtl-inner { + left: auto; + right: 50%; } -.nut-checkbox-icon-indeterminate { - color: var(--nutui-color-primary, #ff0f23); - background-color: #fff; - box-shadow: 0 2rpx 4rpx rgba(255, 15, 35, 0.2); - border-radius: 50%; +[dir='rtl'] .nut-toast, +.nut-rtl .nut-toast { + left: auto; + right: 0; } -.nut-checkbox-icon-indeterminate.nut-checkbox-icon-disabled { - color: var(--nutui-color-primary-disabled-special, #ffadbe); +[dir='rtl'] .nut-toast-inner, +.nut-rtl .nut-toast-inner { + left: auto; + right: 50%; } -.nut-checkbox-icon-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); - background-color: #fff; - border-radius: 50%; - box-shadow: none; +.toast-fade-enter-active, +.toast-fade-leave-active { + transition: opacity 0.3s; } -.nut-checkbox-reverse { - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; +.toast-fade-enter-from, +.toast-fade-leave-to { + opacity: 0; } -.nut-checkbox-reverse .nut-checkbox-label { - margin-right: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4rpx)); - margin-left: 0; +.nut-timeselect { + background-color: var(--nutui-color-background-overlay, #ffffff); + display: flex; + flex-direction: column; + height: calc(100% - 50rpx); } -.nut-checkbox-button { - position: relative; - display: -ms-flexbox; +.nut-timeselect-content { display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - min-height: 32rpx; - padding: var(--nutui-checkbox-button-padding, 5rpx 18rpx); - font-size: var(--nutui-checkbox-button-font-size, var(--nutui-font-size-s, 12rpx)); - background: var(--nutui-color-background, #f2f3f5); - border-radius: var(--nutui-checkbox-button-border-radius, 15rpx); - color: var(--nutui-checkbox-label-color, var(--nutui-color-title, #1a1a1a)); - box-sizing: border-box; - border: 1rpx solid var(--nutui-color-background, #f2f3f5); - overflow: hidden; + flex: 1; } -.nut-checkbox-button-active { - background: var(--nutui-color-primary-light-pressed, #ffebf1); - color: var(--nutui-color-primary, #ff0f23); - border: var(--nutui-checkbox-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); +.nut-timeselect-content-left { + width: var(--nutui-timeselect-date-width, 140rpx); + min-width: var(--nutui-timeselect-date-width, 140rpx); + height: 100%; + overflow: auto; + background: var(--nutui-color-background-sunken, #f7f8fc); } -.nut-checkbox-button-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); - border: 1rpx solid var(--nutui-color-background, #f2f3f5); +.nut-timepannel { + padding: 0 16rpx; + height: var(--nutui-timeselect-date-height, 40rpx); + line-height: var(--nutui-timeselect-date-height, 40rpx); + text-align: left; + color: var(--nutui-color-text, #505259); + font-size: var(--nutui-font-size-base, 14rpx); } -.nut-checkbox-button-icon { - position: absolute; - right: 0; - bottom: 0; - width: 0; - height: 0; - border-top: 10rpx solid transparent; - border-left: 10rpx solid transparent; - border-bottom: 10rpx solid var(--nutui-color-primary, #ff0f23); - border-right: 10rpx solid var(--nutui-color-primary, #ff0f23); - display: -ms-flexbox; - display: flex; - -ms-flex-align: end; - align-items: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; +.nut-timepannel.active { + background: var(--nutui-color-background-overlay, #ffffff); + color: var(--nutui-timeselect-date-active-color, var(--nutui-color-title, #1a1a1a)); + font-weight: var(--nutui-font-weight-bold, 600); } -.nut-checkbox-button .nut-checkbox-button-icon-checked { - width: 12rpx; - height: 12rpx; - position: absolute; - color: #fff; - right: 0; - bottom: 0; - -ms-transform: translate(-1rpx, -2rpx); - transform: translate(-1rpx, -2rpx); +.nut-timedetail { + display: flex; + align-content: flex-start; + flex: 1; + min-width: 0; + flex-wrap: wrap; + padding: 0 0 50rpx 12rpx; } -.nut-checkbox-button .nut-icon { - position: absolute; - font-size: 12rpx; - width: 12rpx; - height: 12rpx; +.nut-timedetail-item { + width: var(--nutui-timeselect-time-width, 100rpx); + height: var(--nutui-timeselect-time-height, 50rpx); + line-height: var(--nutui-timeselect-time-height, 50rpx); + text-align: center; + margin: var(--nutui-timeselect-time-margin, 0 10rpx 10rpx 0); + background: var(--nutui-timeselect-time-background, var(--nutui-color-background, #f2f3f5)); + border-radius: 5rpx; + font-size: var(--nutui-font-size-base, 14rpx); + border: 1rpx solid transparent; } -.nut-checkbox-button .nut-icon::before { - top: auto; - bottom: -22rpx; - margin-left: 6rpx; +.nut-timedetail-item.active { + background-color: var(--nutui-color-primary-light-pressed, #ffebf1); + border: 1rpx solid var(--nutui-color-primary, #ff0f23); + color: var(--nutui-color-primary, #ff0f23); + font-weight: var(--nutui-font-weight-bold, 600); } -.nut-checkbox .nut-checkbox-button-active.nut-checkbox-button-disabled { - background: var(--nutui-color-text-disabled, #c2c4cc); - color: #fff; - border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); +[dir='rtl'] .nut-timedetail, +.nut-rtl .nut-timedetail { + padding: 0 12rpx 50rpx 0; } -.nut-checkbox-list-item { - display: -ms-flexbox; +.nut-tag { + padding: var(--nutui-tag-padding, 0rpx 2rpx); display: flex; - -ms-flex-pack: justify; - justify-content: space-between; - padding: var(--nutui-checkbox-list-item-padding, 12rpx 12rpx 12rpx 0); - border-top: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + flex-direction: row; + justify-content: center; + align-items: center; + font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10rpx)); + border-radius: var(--nutui-tag-border-radius, 2rpx); + height: var(--nutui-tag-height, 14rpx); + color: var(--nutui-tag-color, #ffffff); + border: var(--nutui-tag-border-width, 1rpx) solid transparent; } -.nut-checkbox-list-item .nut-checkbox-label, -.nut-checkbox-list-item .nut-icon { - -ms-flex: none; - flex: none; +.nut-tag .nut-icon { + vertical-align: middle; + margin-left: 4rpx; + color: var(--nutui-tag-color, #ffffff); } -[dir='rtl'] .nut-checkbox-label, -.nut-rtl .nut-checkbox-label { - margin-left: 0; - margin-right: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4rpx)); +.nut-tag-text { + font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10rpx)); + color: var(--nutui-tag-color, #ffffff); } -[dir='rtl'] .nut-checkbox-reverse .nut-checkbox-label, -.nut-rtl .nut-checkbox-reverse .nut-checkbox-label { - margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4rpx)); - margin-right: 0; +.nut-tag-text-plain { + color: var(--nutui-color-title, #1a1a1a); } -[dir='rtl'] .nut-checkbox-button-icon, -.nut-rtl .nut-checkbox-button-icon { - right: auto; - left: 0; - border-right: 10rpx solid transparent; - border-left: 10rpx solid var(--nutui-color-primary, #ff0f23); +.nut-tag-default { + background: var(--nutui-tag-background-color, var(--nutui-color-title, #1a1a1a)); +} +.nut-tag-primary { + background: var(--nutui-tag-primary-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%)); } -[dir='rtl'] .nut-checkbox-button-icon-checked, -.nut-rtl .nut-checkbox-button-icon-checked { - left: auto; - right: 50%; - -ms-transform: translate(3rpx, -3rpx); - transform: translate(3rpx, -3rpx); +.nut-tag-info { + background: var(--nutui-tag-info-background-color, var(--nutui-color-info, #0073ff)); } -[dir='rtl'] .nut-checkbox-button-icon .nut-icon::before, -.nut-rtl .nut-checkbox-button-icon .nut-icon::before { - margin-left: 0; - margin-right: 6rpx; +.nut-tag-success { + background: var(--nutui-tag-success-background-color, #4fc08d); } -.nut-cell-group { - display: block; +.nut-tag-danger { + background: var(--nutui-tag-danger-background-color, var(--nutui-color-danger, #ff0f23)); } -.nut-cell-group-title { - display: inherit; - padding: var(--nutui-cell-group-title-padding, 0 10rpx); - color: var(--nutui-cell-group-title-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-cell-group-title-font-size, var(--nutui-font-size-base, 14rpx)); - line-height: var(--nutui-cell-group-title-line-height, 20rpx); - margin-top: 30rpx; - margin-bottom: 10rpx; +.nut-tag-warning { + background: var(--nutui-tag-warning-background-color, var(--nutui-color-warning, #ffbf00)); } -.nut-cell-group-description { - display: inherit; - padding: var(--nutui-cell-group-description-padding, 0 10rpx); - color: var(--nutui-cell-group-description-color, var(--nutui-color-text, #505259)); - font-size: var(--nutui-cell-group-description-font-size, var(--nutui-font-size-s, 12rpx)); - line-height: var(--nutui-cell-group-description-line-height, 16rpx); - margin-top: 10rpx; - margin-bottom: 10rpx; +.nut-tag-round { + border-radius: var(--nutui-tag-round-border-radius, 8rpx); } -.nut-cell-group-wrap { - border-radius: var(--nutui-cell-border-radius, 6rpx); - overflow: hidden; - background-color: var(--nutui-cell-group-background-color, var(--nutui-color-background-overlay, #ffffff)); - margin-bottom: var(--nutui-cell-group-wrap-margin, 10rpx); +.nut-tag-mark { + border-radius: var(--nutui-tag-mark-border-radius, 0 8rpx 8rpx 0); } -.nut-cell { - position: relative; - display: -ms-flexbox; +.nut-tag-close { + cursor: pointer; +} +.nut-tag-custom-icon { display: flex; - -ms-flex-direction: row; - flex-direction: row; - width: 100%; - line-height: var(--nutui-cell-line-height, 20rpx); - padding: var(--nutui-cell-padding, 13rpx 16rpx); - background-color: var(--nutui-cell-background-color, var(--nutui-color-background-overlay, #ffffff)); - border-radius: var(--nutui-cell-border-radius, 6rpx); - box-shadow: var(--nutui-cell-box-shadow, 0rpx 1rpx 7rpx 0rpx rgb(237, 238, 241)); - font-size: var(--nutui-cell-title-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-cell-title-color, var(--nutui-color-title, #1a1a1a)); - margin-bottom: 10rpx; - box-sizing: border-box; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10rpx)); + color: var(--nutui-tag-color, #ffffff); + margin-left: 4rpx; } -.nut-cell-group-item { - border-radius: 0; - box-shadow: 0 0 transparent; - margin: 0; +.nut-tag-plain { + background-color: #fff; + border: var(--nutui-tag-border-width, 1rpx) solid var(--nutui-color-title, #1a1a1a); } -.nut-cell-left { - display: -ms-flexbox; +[dir='rtl'] .nut-tag .nut-icon, +.nut-rtl .nut-tag .nut-icon { + margin-left: 0; + margin-right: 4rpx; +} +.nut-textarea { display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex-align: start; - align-items: flex-start; - -ms-flex: 1; - flex: 1; + position: relative; + width: 100%; + box-sizing: border-box; + font-size: var(--nutui-font-size-base, 14rpx); + border-radius: var(--nutui-radius-s, 6rpx); } -.nut-cell-title, -.nut-cell-description, -.nut-cell-extra { - line-height: var(--nutui-cell-line-height, 20rpx); +.nut-textarea-container { + padding: var(--nutui-textarea-padding, 12rpx); + background-color: var(--nutui-color-background-overlay, #ffffff); } -.nut-cell-description { - font-size: var(--nutui-cell-description-font-size, var(--nutui-font-size-s, 12rpx)); - color: var(--nutui-cell-description-color, var(--nutui-color-text, #505259)); +.nut-textarea-error { + border: 0.5rpx solid var(--nutui-color-danger, #ff0f23); + background-color: var(--nutui-color-danger-light, #ffebef); } -.nut-cell-extra { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-pack: end; - justify-content: flex-end; - -ms-flex-align: center; - align-items: center; - -ms-flex: 1; - flex: 1; - -ms-flex-negative: 0; - flex-shrink: 0; - min-width: 0; - word-break: break-all; - font-size: var(--nutui-cell-extra-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-cell-extra-color, var(--nutui-color-text, #505259)); +.nut-textarea-limit { + text-align: right; + font-size: var(--nutui-font-size-base, 14rpx); + line-height: var(--nutui-font-size-base, 14rpx); + margin-top: var(--nutui-spacing-base, 8rpx); + color: var(--nutui-color-text-help, #888b94); } -.nut-cell-clickable { - cursor: pointer; +.nut-textarea-limit-disabled { + cursor: not-allowed; + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-cell-clickable::before { - position: absolute; - top: 50%; - left: 50%; +.nut-textarea-textarea { + outline: none; + display: block; + box-sizing: border-box; width: 100%; - height: 100%; - background-color: #000; - border: inherit; - border-color: #000; - border-radius: inherit; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - opacity: 0; - content: ' '; + height: 40rpx; + min-width: 0; + margin: 0; + padding: 0; + font-size: var(--nutui-font-size-base, 14rpx); + color: var(--nutui-textarea-text-color, var(--nutui-color-title, #1a1a1a)); + caret-color: var(--nutui-textarea-text-curror-color, var(--nutui-color-primary, #ff0f23)); + text-align: left; + background-color: transparent; + border: 0; + resize: none; } -.nut-cell-divider { - display: -ms-flexbox; - display: flex; - min-height: 1rpx; - padding-left: var(--nutui-cell-divider-left, 16rpx); - padding-right: var(--nutui-cell-divider-right, 16rpx); +.nut-textarea-textarea .taro-textarea { + color: var(--nutui-textarea-text-color, var(--nutui-color-title, #1a1a1a)); + background-color: transparent; + resize: none; } -.nut-cell-divider-inner { - display: -ms-flexbox; - display: flex; - height: 1rpx; - width: 100%; - border-top: var(--nutui-cell-divider-border-bottom, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +.nut-textarea-textarea::-webkit-input-placeholder { + color: var(--nutui-color-text-help, #888b94); } -.nut-cell-divider-rtl { - padding-left: var(--nutui-cell-divider-right, 16rpx); - padding-right: var(--nutui-cell-divider-left, 16rpx); +.nut-textarea-textarea::placeholder { + color: var(--nutui-color-text-help, #888b94); } -.nut-cascader { - width: 100%; - font-size: var(--nutui-cascader-font-size, var(--nutui-font-size-base, 14rpx)); +.nut-textarea-textarea-disabled { + cursor: not-allowed; + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-cascader .nut-tabs-titles { - padding: var(--nutui-cascader-tabs-item-padding, 0 10rpx); - background: var(--nutui-color-background-overlay, #ffffff); +.nut-textarea-textarea-disabled::-webkit-input-placeholder { + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-cascader .nut-tabs-titles-item { - -ms-flex: initial; - flex: initial; - min-width: auto; - width: auto; - padding: var(--nutui-cascader-tabs-item-padding, 0 10rpx); - white-space: nowrap; +.nut-textarea-textarea-disabled::placeholder { + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-cascader .nut-tabpane { - padding: 0; - background: var(--nutui-color-background-overlay, #ffffff); +.nut-textarea-textarea-disabled .taro-textarea { + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-cascader-pane { - display: block; - width: 100%; - padding-top: var(--nutui-cascader-pane-paddingTop, 10rpx); - height: var(--nutui-cascader-pane-height, 342rpx); - overflow-y: auto; - -webkit-overflow-scrolling: touch; +.nut-textarea-textarea-disabled .taro-textarea::-webkit-input-placeholder { + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-cascader-item { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - padding: var(--nutui-cascader-item-padding, 10rpx 20rpx); - margin: var(--nutui-cascader-item-margin, 0rpx); - border-bottom: var(--nutui-cascader-item-border-bottom, 0rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - font-size: var(--nutui-cascader-item-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-cascader-item-color, var(--nutui-color-title, #1a1a1a)); - cursor: pointer; +.nut-textarea-textarea-disabled .taro-textarea::placeholder { + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-cascader-item.disabled { - opacity: 0.6; - cursor: not-allowed; +.nut-textarea.nut-textarea-rtl-limit { + right: auto; + left: 15rpx; } -.nut-cascader-item.active:not(.disabled) { - color: var(--nutui-cascader-item-active-color, var(--nutui-color-primary, #ff0f23)); +.taro-textarea { + background-color: transparent; + resize: none; } -.nut-cascader-item.active .nut-cascader-item-icon-check { - visibility: visible; - color: inherit; +.nut-tabs { + display: flex; } -.nut-cascader-item-title { - -ms-flex: 1; - flex: 1; +.nut-tabs-horizontal { + flex-direction: column; } -.nut-cascader .nut-icon-checklist { - margin-left: var(--nutui-cascader-icon-checklist-marginLeft, 10rpx); - visibility: hidden; +.nut-tabs-titles { + display: flex; + box-sizing: border-box; + height: var(--nutui-tabs-titles-height, 44rpx); + user-select: none; + overflow-x: auto; + overflow-y: hidden; + background: var(--nutui-tabs-titles-background-color, var(--nutui-color-background, #f2f3f5)); + scrollbar-width: none; } -[dir='rtl'] .nut-cascader .nut-icon-checklist, -.nut-rtl .nut-cascader .nut-icon-checklist { - margin-left: 0; - margin-right: var(--nutui-cascader-icon-checklist-marginLeft, 10rpx); +.nut-tabs-titles::-webkit-scrollbar { + display: none; + width: 0; + background: transparent; } -.nut-card { +.nut-tabs-titles .nut-tabs-list { width: 100%; - display: -ms-flexbox; display: flex; - background-color: inherit; - border-radius: var(--nutui-card-border-radius, 4rpx); -} -.nut-card-left { - width: 120rpx; - height: 120rpx; - -ms-flex-negative: 0; flex-shrink: 0; } -.nut-card-left > .h5-img { - display: block; - width: 100%; - height: 100%; - border-radius: var(--nutui-card-border-radius, 4rpx); +.nut-tabs-titles-left { + justify-content: flex-start; } -.nut-card-right { - -ms-flex: 1; - flex: 1; - padding: 0 10rpx 8rpx; +.nut-tabs-titles-left .nut-tabs-titles-item { + padding: 0 22rpx; } -.nut-card-right-title { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - word-break: break-all; - line-height: 1.5; - font-size: 14rpx; - color: var(--nutui-color-title, #1a1a1a); +.nut-tabs-titles-right { + justify-content: flex-end; } -.nut-card-right-price { - display: -ms-flexbox; +.nut-tabs-titles-right .nut-tabs-titles-item { + padding: 0 22rpx; +} +.nut-tabs-titles-item { + position: relative; display: flex; - -ms-flex-align: center; align-items: center; - height: 18rpx; - line-height: 18rpx; - margin-top: 9rpx; + justify-content: center; + flex: 1 0 auto; + padding: 0 var(--nutui-tabs-titles-gap, 12rpx); + height: var(--nutui-tabs-titles-height, 44rpx); + line-height: var(--nutui-tabs-titles-height, 44rpx); + min-width: var(--nutui-tabs-titles-item-min-width, 50rpx); + font-size: var(--nutui-tabs-titles-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a)); + text-overflow: ellipsis; + white-space: nowrap; } -.nut-card-right-price-origin.nut-price { - margin-left: 2rpx; +.nut-tabs-titles-item .nut-icon { + color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a)); } -.nut-card-right-price-origin.nut-price .nut-price-symbol, -.nut-card-right-price-origin.nut-price .nut-price-integer, -.nut-card-right-price-origin.nut-price .nut-price-decimal { - color: #d2a448; +.nut-tabs-titles-item-left, +.nut-tabs-titles-item-right { + flex: none; } -.nut-card-right-other { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - padding: 5rpx 0 2rpx; +.nut-tabs-titles-item-text { + color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a)); } -.nut-card-right-other .nut-tag { - padding: 0 2rpx; - margin-right: 5rpx; - font-size: var(--nutui-font-size-xs, 11rpx); +.nut-tabs-titles-item-smile, +.nut-tabs-titles-item-line { + position: absolute; + transition: width 0.3s ease; + width: 0; + height: 0; + content: ' '; + left: 50%; + transform: translate(-50%); + bottom: var(--nutui-tabs-line-bottom, 15%); + border-radius: var(--nutui-tabs-line-border-radius, 2rpx); + opacity: var(--nutui-tabs-tab-line-opacity, 1); + overflow: hidden; } -.nut-card-right-shop { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - justify-content: space-between; - -ms-flex-align: center; - align-items: center; +.nut-tabs-titles-item-smile { + bottom: var(--nutui-tabs-titles-item-smile-bottom, -10%); } -.nut-card-right-shop-name { - line-height: 1.5; - color: var(--nutui-color-text, #505259); - font-size: 12rpx; - padding-top: 4rpx; +.nut-tabs-titles-item-smile .nut-icon { + position: absolute; + font-size: 20rpx; + width: 100%; + height: 100%; } -[dir='rtl'] .nut-card-right-price-origin.nut-price, -.nut-rtl .nut-card-right-price-origin.nut-price { - margin-left: 0; - margin-right: 2rpx; +.nut-tabs-titles-item-active .nut-icon { + color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); } -[dir='rtl'] .nut-card-right-other .nut-tag, -.nut-rtl .nut-card-right-other .nut-tag { - margin-right: 0; - margin-left: 5rpx; +.nut-tabs-titles-item-active .nut-tabs-titles-item-text { + color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); + font-weight: var(--nutui-tabs-titles-item-active-font-weight, var(--nutui-font-weight-bold, 600)); } -.nut-calendarcard { - background: var(--nutui-color-background-overlay, #ffffff); - border-radius: 12rpx; - overflow: hidden; - font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15rpx)); - color: var(--nutui-color-title, #1a1a1a); +.nut-tabs-titles-item-active .nut-tabs-titles-item-line { + overflow: visible; + overflow: initial; + content: ' '; + width: var(--nutui-tabs-tab-line-width, 12rpx); + height: var(--nutui-tabs-tab-line-height, 2rpx); + background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23)); } -.nut-calendarcard-header { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: justify; - justify-content: space-between; - font-weight: 400; +.nut-tabs-titles-item-active .nut-tabs-titles-item-smile { + overflow: visible; + overflow: initial; + width: 40rpx; + height: 20rpx; } -.nut-calendarcard-header-left, -.nut-calendarcard-header-right { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - cursor: pointer; - margin: 16rpx; - line-height: 1; +.nut-tabs-titles-item-active .nut-tabs-titles-item-smile .nut-icon { + color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); } -.nut-calendarcard-header-left .left, -.nut-calendarcard-header-right .left { - margin-left: 8rpx; +.nut-tabs-titles-item-disabled, +.nut-tabs-titles-item-disabled .nut-icon, +.nut-tabs-titles-item-disabled .nut-tabs-titles-item-text { + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-calendarcard-header-left .right, -.nut-calendarcard-header-right .right { - margin-right: 8rpx; +.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-tabs-titles-item-text, +.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-icon { + color: var(--nutui-color-title, #1a1a1a); + font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-l, 15rpx)); } -.nut-calendarcard-days { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-align: center; - align-items: center; +.nut-tabs-titles-card .nut-tabs-titles-item-active { + font-weight: var(--nutui-font-weight-bold, 600); + background-color: #fff; + border-radius: var(--nutui-radius-base, 8rpx) var(--nutui-radius-base, 8rpx) 0 0; } -.nut-calendarcard-day { - display: -ms-flexbox; +.nut-tabs-titles-button .nut-tabs-titles-item { + padding: 0 10rpx; +} +.nut-tabs-titles-button .nut-tabs-titles-item .nut-tabs-titles-item-text { + flex: 1; + height: 28rpx; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - -ms-flex-direction: column; - flex-direction: column; - position: relative; - width: var(--nutui-calendar-day-width, 14.28%); - height: 48rpx; - cursor: pointer; - margin-bottom: 4rpx; - text-align: center; + padding: 0 8rpx; } -.nut-calendarcard-day.header { - cursor: auto; +.nut-tabs-titles-button .nut-tabs-titles-item-active .nut-tabs-titles-item-text { + background: var(--nutui-color-default-light); + color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); + border-radius: var(--nutui-tabs-button-border-radius, 50rpx); + font-weight: var(--nutui-font-weight-bold, 600); + background-color: var(--nutui-tabs-button-active-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); + border: var(--nutui-tabs-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); } -.nut-calendarcard-day-top, -.nut-calendarcard-day-bottom { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - height: 12rpx; - font-size: 12rpx; - line-height: 12rpx; +.nut-tabs-titles-divider { + border-bottom: 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)); } -.nut-calendarcard-day.weekend { - color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23)); +.nut-tabs-titles-divider .nut-tabs-titles-item { + position: relative; } -.nut-calendarcard-day.active { - background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23)); - border-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-tabs-titles-divider .nut-tabs-titles-item::after { + content: ''; + position: absolute; + right: 0; + top: 50%; + height: 50%; + width: 1rpx; + background: var(--nutui-color-border, rgba(0, 0, 0, 0.06)); + transform: translateY(-50%); } -.nut-calendarcard-day.active .nut-calendarcard-day-top, -.nut-calendarcard-day.active .nut-calendarcard-day-inner, -.nut-calendarcard-day.active .nut-calendarcard-day-bottom { - color: #fff; +.nut-tabs-titles-divider .nut-tabs-titles-item:last-child::after { + display: none; } -.nut-calendarcard-day.start, -.nut-calendarcard-day.end { - background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23)); +.nut-tabs-vertical .nut-tabs-ellipsis { + white-space: break-spaces; + padding-left: 6rpx; + width: 90rpx; + line-height: var(--nutui-font-size-base, 14rpx); } -.nut-calendarcard-day.start .nut-calendarcard-day-top, -.nut-calendarcard-day.start .nut-calendarcard-day-inner, -.nut-calendarcard-day.start .nut-calendarcard-day-bottom, -.nut-calendarcard-day.end .nut-calendarcard-day-top, -.nut-calendarcard-day.end .nut-calendarcard-day-inner, -.nut-calendarcard-day.end .nut-calendarcard-day-bottom { - color: #fff; +.nut-tabs-vertical .nut-tabs-titles { + flex-direction: column; + height: 100%; + width: var(--nutui-tabs-vertical-titles-width, 100rpx); + flex-shrink: 0; } -.nut-calendarcard-day.start { - border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); - border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-tabs-vertical .nut-tabs-titles .nut-tabs-list { + flex-direction: column; } -.nut-calendarcard-day.end { - border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); - border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-tabs-vertical .nut-tabs-titles-item { + height: var(--nutui-tabs-vertical-titles-item-height, 40rpx); + flex: none; } -.nut-calendarcard-day.mid { - background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); +.nut-tabs-vertical .nut-tabs-titles-item-smile { + overflow: hidden; + transition: width 0.3s ease; } -.nut-calendarcard-day.mid .nut-calendarcard-day-top, -.nut-calendarcard-day.mid .nut-calendarcard-day-inner, -.nut-calendarcard-day.mid .nut-calendarcard-day-bottom { - color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23)); +.nut-tabs-vertical .nut-tabs-titles-item-line { + transform: translateY(-50%); + transition: height 0.3s ease; } -.nut-calendarcard-day .nut-calendar-day-info { - color: #fff; +.nut-tabs-vertical .nut-tabs-titles-item-line-vertical { + top: 50%; } -.nut-calendarcard-day.prev, -.nut-calendarcard-day.next, -.nut-calendarcard-day.disabled { - cursor: not-allowed; +.nut-tabs-vertical .nut-tabs-titles-item-active { + background-color: var(--nutui-tabs-titles-item-active-background-color, var(--nutui-color-background-overlay, #ffffff)); } -.nut-calendarcard-day.prev .nut-calendarcard-day-top, -.nut-calendarcard-day.prev .nut-calendarcard-day-inner, -.nut-calendarcard-day.prev .nut-calendarcard-day-bottom, -.nut-calendarcard-day.next .nut-calendarcard-day-top, -.nut-calendarcard-day.next .nut-calendarcard-day-inner, -.nut-calendarcard-day.next .nut-calendarcard-day-bottom, -.nut-calendarcard-day.disabled .nut-calendarcard-day-top, -.nut-calendarcard-day.disabled .nut-calendarcard-day-inner, -.nut-calendarcard-day.disabled .nut-calendarcard-day-bottom { - color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc)); +.nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line { + left: 10rpx; + width: var(--nutui-tabs-vertical-tab-line-width, 3rpx); + height: var(--nutui-tabs-vertical-tab-line-height, 12rpx); + background: var( + --nutui-tabs-vertical-tab-line-color, + linear-gradient(180deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-light-pressed, #ffebf1) 100%) + ); } -[dir='rtl'] .nut-calendarcard-header-left .left, -[dir='rtl'] .nut-calendarcard-header-right .left, -.nut-rtl .nut-calendarcard-header-left .left, -.nut-rtl .nut-calendarcard-header-right .left { - margin-left: 0; - margin-right: 8rpx; +.nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { + right: -12rpx; + bottom: -2%; + left: auto; + transform: rotate(320deg); } -[dir='rtl'] .nut-calendarcard-header-left .right, -[dir='rtl'] .nut-calendarcard-header-right .right, -.nut-rtl .nut-calendarcard-header-left .right, -.nut-rtl .nut-calendarcard-header-right .right { - margin-right: 0; - margin-left: 8rpx; +.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles { + flex-direction: row; + height: var(--nutui-tabs-titles-height, 44rpx); + width: 100%; + padding: 0 !important; } -[dir='rtl'] .nut-calendarcard-header-left .nut-icon-ArrowLeft, -[dir='rtl'] .nut-calendarcard-header-left .nut-icon-ArrowRight, -[dir='rtl'] .nut-calendarcard-header-left .h5-svg, -[dir='rtl'] .nut-calendarcard-header-right .nut-icon-ArrowLeft, -[dir='rtl'] .nut-calendarcard-header-right .nut-icon-ArrowRight, -[dir='rtl'] .nut-calendarcard-header-right .h5-svg, -.nut-rtl .nut-calendarcard-header-left .nut-icon-ArrowLeft, -.nut-rtl .nut-calendarcard-header-left .nut-icon-ArrowRight, -.nut-rtl .nut-calendarcard-header-left .h5-svg, -.nut-rtl .nut-calendarcard-header-right .nut-icon-ArrowLeft, -.nut-rtl .nut-calendarcard-header-right .nut-icon-ArrowRight, -.nut-rtl .nut-calendarcard-header-right .h5-svg { - -ms-transform: rotate(180deg); - transform: rotate(180deg); +.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles .nut-tabs-list { + flex-direction: row; + height: auto; } -[dir='rtl'] .nut-calendarcard-day.start, -[dir='rtl'] .nut-calendarcard-day.end, -.nut-rtl .nut-calendarcard-day.start, -.nut-rtl .nut-calendarcard-day.end { - border-radius: 0; +.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-content { + flex-direction: row; } -[dir='rtl'] .nut-calendarcard-day.start, -.nut-rtl .nut-calendarcard-day.start { - border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); - border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active { + background-color: transparent; + background-color: initial; } -[dir='rtl'] .nut-calendarcard-day.end, -.nut-rtl .nut-calendarcard-day.end { - border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); - border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line { + left: 50%; + transform: translate(-50%); + width: var(--nutui-tabs-tab-line-width, 12rpx); + height: var(--nutui-tabs-tab-line-height, 2rpx); + background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23)); } -.nut-calendar { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; +.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { + left: 50%; + right: auto; + bottom: -3rpx; + transform: translate(-50%) rotate(0); +} +.nut-tabs-vertical .nut-tabs-content { flex-direction: column; - -ms-flex: 1; - flex: 1; - font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15rpx)); - background-color: var(--nutui-color-background-overlay, #ffffff); - color: var(--nutui-color-title, #1a1a1a); - overflow: hidden; height: 100%; } -.nut-calendar.nut-calendar-title .nut-calendar-header .calendar-title { - font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15rpx)); -} -.nut-calendar .nut-calendar-taro { - height: 60vh; +.nut-tabs-vertical .nut-tabs-content-wrap { + flex: 1; } -.nut-calendar .popup-box { +.nut-tabs-vertical .nut-tabs-content .nut-tabpane { height: 100%; } -.nut-calendar ::-webkit-scrollbar { - display: none; -} -.nut-calendar-header { - display: -ms-flexbox; +.nut-tabs-content { display: flex; - -ms-flex-direction: column; - flex-direction: column; - text-align: center; + box-sizing: border-box; } -.nut-calendar-header-buttons { - height: var(--nutui-calendar-header-height, 24rpx); +.nut-tabs-content-wrap { + overflow: hidden; } -.nut-calendar-title { - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-calendar-title-font-size, var(--nutui-font-size-xl, 18rpx)); - font-weight: var(--nutui-calendar-title-font-weight, var(--nutui-font-weight-bold, 600)); - line-height: 50rpx; +[dir='rtl'] .nut-tabs-titles-item-smile, +[dir='rtl'] .nut-tabs-titles-item-line, +.nut-rtl .nut-tabs-titles-item-smile, +.nut-rtl .nut-tabs-titles-item-line { + left: auto; + right: 50%; + transform: translate(50%); } -.nut-calendar-sub-title { - padding: 7rpx 0; - line-height: 22rpx; - font-size: var(--nutui-calendar-sub-title-font-size, var(--nutui-font-size-base, 14rpx)); +[dir='rtl'] .nut-tabs-titles-divider .nut-tabs-titles-item::after, +.nut-rtl .nut-tabs-titles-divider .nut-tabs-titles-item::after { + right: auto; + left: 0; } -.nut-calendar-weeks { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: distribute; - justify-content: space-around; - height: 36rpx; - border-radius: 0 0 12rpx 12rpx; - box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05882); +[dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item, +.nut-rtl .nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item { + padding-left: 0; + padding-right: 14rpx; } -.nut-calendar-week-item:first-of-type, -.nut-calendar-week-item:last-of-type { - color: var(--nutui-color-primary, #ff0f23); +[dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line, +.nut-rtl .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line { + left: auto; + right: 10rpx; } -.nut-calendar-content { - -ms-flex: 1; - flex: 1; - width: 100%; - display: block; - overflow-y: auto; +[dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile, +.nut-rtl .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { + left: -12rpx; + right: auto; + transform: rotate(-320deg); +} +[dir='rtl'] .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line, +.nut-rtl .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line { + left: auto; + right: 50%; + transform: translate(50%); +} +[dir='rtl'] .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-smile, +.nut-rtl .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { + right: 50%; + left: auto; + transform: translate(50%) rotate(0); } -.nut-calendar-pannel { - position: relative; +.nut-tabpane { width: 100%; - height: auto; + flex-shrink: 0; display: block; + background-color: var(--nutui-tabs-tabpane-background-color, #fff); + color: var(--nutui-color-title, #1a1a1a); + padding: var(--nutui-tabs-tabpane-padding, 24rpx 20rpx); box-sizing: border-box; + overflow: auto; } -.nut-calendar-pannel .calendar-loading-tip { - height: 50rpx; - line-height: 50rpx; - text-align: center; - position: absolute; - top: -50rpx; - left: 0; - right: 0; - font-size: var(--nutui-font-size-s, 12rpx); - color: var(--nutui-color-text, #505259); -} -.nut-calendar-month { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - text-align: center; -} -.nut-calendar-month-title { - height: 23rpx; - line-height: 23rpx; - margin: 8rpx 0; +.nut-tabpane.inactive { + overflow: visible; + height: 0; } -.nut-calendar-days { +.nut-table { overflow: hidden; + position: relative; + word-wrap: break-word; + word-break: break-all; } -.nut-calendar-day { - display: -ms-flexbox; +.nut-table-wrapper { display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-direction: column; + width: 100%; flex-direction: column; + font-size: var(--nutui-font-size-base, 14rpx); + color: var(--nutui-color-title, #1a1a1a); + overflow-y: auto; + overflow-x: hidden; position: relative; - float: left; - width: var(--nutui-calendar-day-width, 14.28%); - height: var(--nutui-calendar-day-height, 60rpx); - font-weight: var(--nutui-calendar-day-font-weight, var(--nutui-font-weight-bold, 600)); - margin-bottom: 4rpx; + border: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-calendar-day:nth-child(7n), -.nut-calendar-day:nth-child(7n + 1) { - color: var(--nutui-color-primary, #ff0f23); +.nut-table-wrapper-sticky { + overflow-x: auto; } -.nut-calendar-day-info, -.nut-calendar-day-info-curr { - position: absolute; - bottom: 5rpx; - width: 100%; - font-size: 12rpx; - line-height: 14rpx; +.nut-table-main { + display: table; + width: max-content; + overflow-x: auto; + color: var(--nutui-color-title, #1a1a1a); + background-color: var(--nutui-color-background-overlay, #ffffff); + table-layout: fixed; + min-width: 100%; + position: relative; } -.nut-calendar-day-info-top { - position: absolute; - width: 100%; - top: 5rpx; +.nut-table-main-striped .nut-table-main-head-tr { + background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f2f3f5)); } -.nut-calendar-day-info-bottom { - position: absolute; - width: 100%; - bottom: 5rpx; +.nut-table-main-striped .nut-table-main-body-tr:nth-child(odd) { + background-color: var(--nutui-table-tr-odd-bg-color, #ffffff); } -.nut-calendar-day-active { - background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23)); - color: #fff !important; - border-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-table-main-striped .nut-table-main-body-tr:nth-child(2n) { + background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-color-background, #f2f3f5)); } -.nut-calendar-day-active.active-start { - border-radius: 0; - border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); - border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-table-main-head, +.nut-table-main-body { + background: inherit; } -.nut-calendar-day-active.active-end { - border-radius: 0; - border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); - border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-table-main-head-tr, +.nut-table-main-body-tr { + display: table-row; + background: inherit; } -.nut-calendar-day-active .nut-calendar-day-info { - color: #fff; +.nut-table-main-head-tr:last-child .nut-table-main-body-tr-td, +.nut-table-main-body-tr:last-child .nut-table-main-body-tr-td { + border-bottom: none; } -.nut-calendar-day-disabled { - color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc)) !important; +.nut-table-main-head-tr-th, +.nut-table-main-body-tr-th { + display: table-cell; + padding: var(--nutui-table-cols-padding, 10rpx); + table-layout: fixed; + background: inherit; + position: sticky; + top: 0; } -.nut-calendar-day-disabled .nut-calendar-day-info-curr { - display: none; +.nut-table-main-head-tr-th.nut-table-fixed-left, +.nut-table-main-head-tr-th.nut-table-fixed-right, +.nut-table-main-body-tr-th.nut-table-fixed-left, +.nut-table-main-body-tr-th.nut-table-fixed-right { + z-index: 4; } -.nut-calendar-day-choose { - background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); - color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23)); +.nut-table-main-head-tr-th:last-child, +.nut-table-main-body-tr-th:last-child { + border-right: none; } -.nut-calendar-day-choose-disabled { - background-color: var(--nutui-calendar-choose-disable-background-color, rgba(191, 191, 191, 0.09)); - color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc)) !important; +.nut-table-main-head-tr-td, +.nut-table-main-body-tr-td { + display: table-cell; + padding: var(--nutui-table-cols-padding, 10rpx); + table-layout: fixed; + background: inherit; } -.nut-calendar-day-choose-disabled .nut-calendar-day-info-curr { - display: none; +.nut-table-main-head-tr-td:last-child, +.nut-table-main-body-tr-td:last-child { + border-right: none; } -.nut-calendar-footer { - display: -ms-flexbox; +.nut-table-main-head-tr-td-nodata, +.nut-table-main-body-tr-td-nodata { display: flex; - width: 100%; - -ms-flex-direction: column; - flex-direction: column; - background-color: #fff; + height: 50rpx; + align-items: center; + justify-content: center; } -.nut-calendar-footer .calendar-confirm-btn { - height: 40rpx; - line-height: 40rpx; - margin: 6rpx 16rpx; - text-align: center; - border-radius: var(--nutui-radius-base, 8rpx); - background: -webkit-linear-gradient(left, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); - background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); - color: #fff; - font-weight: var(--nutui-font-weight-bold, 600); +.nut-table-main-head-tr-border, +.nut-table-main-body-tr-border { + border-right: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + border-bottom: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-calendar-popup .nut-popup-title-right { - top: 7rpx !important; +.nut-table-main-head-tr-alignleft, +.nut-table-main-head-tr-align, +.nut-table-main-body-tr-alignleft, +.nut-table-main-body-tr-align { + text-align: left; } -[dir='rtl'] .nut-calendar-day, -.nut-rtl .nut-calendar-day { - float: right; +.nut-table-main-head-tr-aligncenter, +.nut-table-main-body-tr-aligncenter { + text-align: center; } -[dir='rtl'] .nut-calendar-day-active.active-start, -.nut-rtl .nut-calendar-day-active.active-start { - border-top-left-radius: 0; - border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); - border-bottom-left-radius: 0; - border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-table-main-head-tr-alignright, +.nut-table-main-body-tr-alignright { + text-align: right; } -[dir='rtl'] .nut-calendar-day-active.active-end, -.nut-rtl .nut-calendar-day-active.active-end { - border-top-right-radius: 0; - border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); - border-bottom-right-radius: 0; - border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); +.nut-table-main-head { + display: table-header-group; } -.nut-button { - position: relative; - display: -ms-flexbox; - display: flex; - display: inline-block; - width: 80rpx; - width: auto; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - -ms-flex-negative: 0; - flex-shrink: 0; - box-sizing: border-box; - margin: 0; - padding: 0; - height: var(--nutui-button-default-height, 32rpx); - font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14rpx)); - font-weight: var(--nutui-font-weight, 400); - text-align: center; - cursor: pointer; - transition: opacity 0.2s; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -ms-touch-action: manipulation; - touch-action: manipulation; - color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a)); - background: var(--nutui-button-default-background-color, transparent); - border-width: var(--nutui-button-border-width, 0.5rpx); +.nut-table-main-body { + display: table-row-group; +} +.nut-table-sticky-left, +.nut-table-sticky-right { + position: absolute; + top: 0; + width: 8rpx; + bottom: -1rpx; + overflow-x: hidden; + overflow-y: hidden; + box-shadow: none; + touch-action: none; + pointer-events: none; + z-index: 3; + background: transparent; } -.nut-button-text { - margin-left: var(--nutui-button-text-icon-margin, 4rpx); +.nut-table-sticky-left { + left: 1rpx; + box-shadow: var(--nutui-table-sticky-left-shadow, 4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); } -.nut-button-text-right { - margin-right: var(--nutui-button-text-icon-margin, 4rpx); +.nut-table-sticky-right { + right: 1rpx; + box-shadow: var(--nutui-table-sticky-right-shadow, -4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); } -.nut-button-children { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - background: transparent; +.nut-table-fixed-left, +.nut-table-fixed-right { + position: sticky; + z-index: 2; } -.nut-button::before { - position: absolute; - top: 50%; - left: 50%; - width: 100%; - height: 100%; - background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); - border: inherit; - border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); - border-radius: inherit; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - opacity: 0; - content: ' '; - pointer-events: none; - pointer-events: auto; +.nut-table-fixed-left.h5-div, +.nut-table-fixed-right.h5-div { + padding: var(--nutui-table-cols-padding, 10rpx) 0; } -.nut-button::after { - border: none; +.nut-table-fixed-left-last { + border-right: none; } -.nut-button-wrap { - height: 100%; - width: 100%; - display: -ms-flexbox; +.nut-table-summary { + color: var(--nutui-color-title, #1a1a1a); + background-color: var(--nutui-color-background-overlay, #ffffff); display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; - background: initial; + height: 30rpx; + padding: var(--nutui-table-cols-padding, 10rpx); + position: relative; + z-index: 5; } -.nut-button-wrap .nut-icon { - font-size: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14rpx)); - width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14rpx)); - height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14rpx)); +[dir='rtl'] .nut-table-main-head-tr-th:last-child, +[dir='rtl'] .nut-table-main-body-tr-th:last-child, +.nut-rtl .nut-table-main-head-tr-th:last-child, +.nut-rtl .nut-table-main-body-tr-th:last-child { + border-right: none; + border-left: none; } -.nut-button-loading::before, -.nut-button-disabled::before { - display: none; +[dir='rtl'] .nut-table-main-head-tr-td:last-child, +[dir='rtl'] .nut-table-main-body-tr-td:last-child, +.nut-rtl .nut-table-main-head-tr-td:last-child, +.nut-rtl .nut-table-main-body-tr-td:last-child { + border-right: none; + border-left: none; } -.nut-button-disabled { - cursor: not-allowed; - color: #fff; +[dir='rtl'] .nut-table-main-head-tr-border, +[dir='rtl'] .nut-table-main-body-tr-border, +.nut-rtl .nut-table-main-head-tr-border, +.nut-rtl .nut-table-main-body-tr-border { + border-right: none; + border-left: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-button.nut-button-icononly { - width: var(--nutui-button-default-height, 32rpx); - padding: 0; +[dir='rtl'] .nut-table-main-head-tr-alignleft, +[dir='rtl'] .nut-table-main-head-tr-align, +[dir='rtl'] .nut-table-main-body-tr-alignleft, +[dir='rtl'] .nut-table-main-body-tr-align, +.nut-rtl .nut-table-main-head-tr-alignleft, +.nut-rtl .nut-table-main-head-tr-align, +.nut-rtl .nut-table-main-body-tr-alignleft, +.nut-rtl .nut-table-main-body-tr-align { + text-align: right; } -.nut-button-round { - border-radius: var(--nutui-button-border-radius, var(--nutui-radius-s, 6rpx)); +[dir='rtl'] .nut-table-main-head-tr-alignright, +[dir='rtl'] .nut-table-main-body-tr-alignright, +.nut-rtl .nut-table-main-head-tr-alignright, +.nut-rtl .nut-table-main-body-tr-alignright { + text-align: left; } -.nut-button-default { - padding: var(--nutui-button-default-padding, 0rpx 12rpx); - border-style: solid; - border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #c2c4cc)); +[dir='rtl'] .nut-table-sticky-left, +.nut-rtl .nut-table-sticky-left { + left: auto; + right: 1rpx; + box-shadow: var(--nutui-table-sticky-right-shadow, -4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); } -.nut-button-default-disabled, -.nut-button-default-solid-disabled { - color: var(--nutui-button-primary-color, #ffffff); - background: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc)); - border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc)); +[dir='rtl'] .nut-table-sticky-right, +.nut-rtl .nut-table-sticky-right { + right: auto; + left: 1rpx; + box-shadow: var(--nutui-table-sticky-left-shadow, 4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); } -.nut-button-default-none-disabled { - color: var(--nutui-button-default-disabled-color, var(--nutui-color-text-help, #888b94)); +[dir='rtl'] .nut-table-fixed-left-last, +.nut-rtl .nut-table-fixed-left-last { + border-right: none; + border-left: none; } -.nut-button-default-outline-disabled, -.nut-button-default-dashed-disabled { - background: transparent; - color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc)); - border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc)); +.nut-tabbar-item { + display: flex; + flex-direction: column; + align-items: center; + flex: 1; + padding: 6rpx 0 2rpx; + color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a)); + height: 100%; } -.nut-button-normal { - padding: var(--nutui-button-normal-padding, 0rpx 12rpx); +.nut-tabbar-item .nut-icon { + width: 24rpx; + height: 24rpx; + font-size: 24rpx; + color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a)); + color: inherit; } -.nut-button-xlarge { - height: var(--nutui-button-xlarge-height, 48rpx); - padding: var(--nutui-button-xlarge-padding, 0rpx 24rpx); - font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18rpx)); - border-radius: var(--nutui-button-xlarge-border-radius, var(--nutui-radius-base, 8rpx)); +.nut-tabbar-item-text { + display: block; + color: var(--nutui-color-text, #505259); + font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10rpx)); + line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10rpx)); + margin-top: var(--nutui-tabbar-text-margin-top, 4rpx); } -.nut-button-xlarge .nut-button-text { - margin-left: var(--nutui-button-xlarge-text-icon-margin, 6rpx); +.nut-tabbar-item .nut-image-default { + width: 38rpx; + height: 38rpx; + border-radius: 38rpx; } -.nut-button-xlarge .nut-button-text-right { - margin-right: var(--nutui-button-xlarge-text-icon-margin, 6rpx); +.nut-tabbar-item-large { + justify-content: center; + padding: 0; } -.nut-button-xlarge .nut-icon { - font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18rpx)); - width: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18rpx)); - height: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18rpx)); +.nut-tabbar-item-large .nut-tabbar-item-text { + font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 15rpx)); + margin-top: 0; + line-height: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 15rpx)); + font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400)); } -.nut-button-xlarge-children { - font-size: var(--nutui-button-xlarge-font-size, var(--nutui-font-size-xl, 18rpx)); +.nut-tabbar-item-active { + color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23)); } -.nut-button-large { - height: var(--nutui-button-large-height, 40rpx); - padding: var(--nutui-button-large-padding, 0rpx 16rpx); - font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15rpx)); - border-radius: var(--nutui-button-large-border-radius, var(--nutui-radius-base, 8rpx)); +.nut-tabbar-item-active .nut-tabbar-item-text, +.nut-tabbar-item-active .nut-icon { + color: var(--nutui-tabbar-active-color, var(--nutui-color-primary, #ff0f23)); + color: inherit; } -.nut-button-large .nut-button-text { - margin-left: var(--nutui-button-xlarge-text-icon-margin, 6rpx); +.nut-tabbar { + border: 0rpx; + box-shadow: var(--nutui-tabbar-box-shadow, none); + border-bottom: var(--nutui-tabbar-border-bottom, 0); + border-top: var(--nutui-tabbar-border-top, 0); + width: 100%; + background: var(--nutui-color-background-overlay, #ffffff); } -.nut-button-large .nut-button-text-right { - margin-right: var(--nutui-button-xlarge-text-icon-margin, 6rpx); +.nut-tabbar-wrap { + height: var(--nutui-tabbar-height, 46rpx); + display: flex; } -.nut-button-large .nut-icon { - font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15rpx)); - width: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15rpx)); - height: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15rpx)); +.nut-tabbar-wrap-3 { + padding: 0 16rpx; } -.nut-button-large-children { - font-size: var(--nutui-button-large-font-size, var(--nutui-font-size-l, 15rpx)); +.nut-tabbar-wrap-2 { + padding: 0 32rpx; } -.nut-button-small { - height: var(--nutui-button-small-height, 28rpx); - padding: var(--nutui-button-small-padding, 0rpx 8rpx); - font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12rpx)); - border-radius: var(--nutui-button-small-border-radius, var(--nutui-radius-s, 6rpx)); +.nut-tabbar-wrap-horizontal { + align-items: center; } -.nut-button-small .nut-icon { - font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12rpx)); - width: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12rpx)); - height: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12rpx)); +.nut-tabbar-wrap-horizontal .nut-tabbar-item { + flex-direction: row; + justify-content: center; } -.nut-button-small-children { - font-size: var(--nutui-button-small-font-size, var(--nutui-font-size-s, 12rpx)); +.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-icon { + width: 20rpx; + height: 20rpx; } -.nut-button-mini { - height: var(--nutui-button-mini-height, 24rpx); - padding: var(--nutui-button-mini-padding, 0rpx 8rpx); - font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11rpx)); - border-radius: var(--nutui-button-mini-border-radius, var(--nutui-radius-xs, 4rpx)); +.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-tabbar-item-text { + margin: 0 4rpx 0 6rpx; + font-size: 14rpx; } -.nut-button-mini .nut-icon { - font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11rpx)); - width: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11rpx)); - height: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11rpx)); +.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-badge-sup::after { + border: 0; } -.nut-button-mini-children { - font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11rpx)); +.nut-tabbar-fixed { + position: fixed; + bottom: 0; + left: 0; } -.nut-button-primary { - color: var(--nutui-button-primary-color, #ffffff); - background-origin: border-box; - border-color: transparent; +[dir='rtl'] .nut-tabbar:last-child, +.nut-rtl .nut-tabbar:last-child { + border-right: none; + border-left: 0; } -.nut-button-primary-children { - color: var(--nutui-button-primary-color, #ffffff); +[dir='rtl'] .nut-tabbar-fixed, +.nut-rtl .nut-tabbar-fixed { + left: auto; + right: 0; } -.nut-button-primary-solid { - background: -webkit-linear-gradient(left, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); - background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); - color: var(--nutui-button-primary-color, #ffffff); - border-color: transparent; - font-weight: var(--nutui-font-weight-bold, 600); +.nut-switch { + cursor: pointer; + position: relative; + display: flex; + display: inline-flex; + flex-direction: row; + align-items: center; + min-width: var(--nutui-switch-width, 46rpx); + height: var(--nutui-switch-height, 28rpx); + line-height: var(--nutui-switch-line-height, 28rpx); + background-color: var(--nutui-switch-active-background-color, var(--nutui-color-primary, #ff0f23)); + border-radius: var(--nutui-switch-border-radius, 50rpx); + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center center; + flex: 0 0 auto; } -.nut-button-primary-solid.nut-button-small, -.nut-button-primary-solid.nut-button-mini { - font-weight: var(--nutui-font-weight, 400); +.nut-switch-button { + position: absolute; + top: 50%; + transform: translateY(-50%); + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + height: calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2); + width: calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2); + border-radius: var(--nutui-switch-inside-border-radius, 50%); + background: #fff; + transition: left 0.3s linear; + box-shadow: var(--nutui-switch-inside-box-shadow, 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1)); } -.nut-button-primary-disabled, -.nut-button-primary-disabled.nut-button-icononly, -.nut-button-primary-solid-disabled { - color: var(--nutui-button-primary-color, #ffffff); - background: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); - border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +.nut-switch-button-open { + left: calc(100% - var(--nutui-switch-height, 28rpx) + var(--nutui-switch-border-width, 2rpx)); } -.nut-button-primary-none { - color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); +.nut-switch-button-open-rtl, +.nut-switch-button-close { + left: var(--nutui-switch-border-width, 2rpx); } -.nut-button-primary-none-disabled { - color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +.nut-switch-button-close-rtl { + left: calc(100% - var(--nutui-switch-height, 28rpx) + var(--nutui-switch-border-width, 2rpx)); } -.nut-button-primary-outline { - color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); - border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); +.nut-switch-button .nut-icon { + width: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); + height: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); + color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe)); } -.nut-button-primary-outline-disabled { - color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); - border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +.nut-switch-close { + background-color: var(--nutui-switch-inactive-background-color, var(--nutui-color-text-disabled, #c2c4cc)); } -.nut-button-primary-dashed { - color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); - border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); +.nut-switch-close-line { + width: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); + height: 2rpx; + background: var(--nutui-switch-inactive-line-background-color, #ffffff); + border-radius: 2rpx; } -.nut-button-primary-dashed-disabled { - color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); - border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +.nut-switch-label { + display: flex; + display: inline-flex; + align-items: center; + height: 100%; + white-space: nowrap; + color: var(--nutui-switch-label-text-color, #ffffff); + font-size: var(--nutui-switch-label-font-size, var(--nutui-font-size-s, 12rpx)); } -.nut-button-primary.nut-button-solid.nut-button-normal { - font-weight: var(--nutui-font-weight-bold, 600); +.nut-switch-label .nut-icon { + color: var(--nutui-switch-label-text-color, #ffffff); } -.nut-button-success { - color: var(--nutui-button-success-color, #ffffff); - background: var(--nutui-button-success-background-color, var(--nutui-color-success, #00d900)); - background-origin: border-box; - border-color: transparent; +.nut-switch-label-open { + margin: 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx) 0 7rpx; } -.nut-button-success-children { - color: var(--nutui-button-success-color, #ffffff); +.nut-switch-label-open-rtl, +.nut-switch-label-close { + margin: 0 7rpx 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx); } -.nut-button-success-disabled, -.nut-button-success-solid-disabled { - background: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae)); - border-color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae)); +.nut-switch-label-close-rtl { + margin: 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx) 0 7rpx; } -.nut-button-success-outline, -.nut-button-success-dashed { - color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900)); - border-color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900)); +.nut-switch-label-close-disabled, +.nut-switch-label-close-disabled .nut-icon { + color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc)); } -.nut-button-success-outline-disabled, -.nut-button-success-dashed-disabled { - color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); - border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +.nut-switch-disabled { + background-color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe)); } -.nut-button-success-none { - color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900)); +.nut-switch-disabled-close { + background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-color-background, #f2f3f5)); } -.nut-button-success-none-disabled { - color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae)); +.nut-swiper-item { + height: 100%; } -.nut-button-info { - color: var(--nutui-button-info-color, #ffffff); - background: var(--nutui-button-info-background-color, var(--nutui-color-info-background, #0073ff)); - background-origin: border-box; - border-color: transparent; +.nut-swiper { + width: 100%; + height: 100%; + overflow: hidden; + position: relative; } -.nut-button-info-children { - color: var(--nutui-button-info-color, #ffffff); +.nut-swiper-canmove-horizontal { + touch-action: pan-y; } -.nut-button-info-disabled, -.nut-button-info-solid-disabled { - background: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); - border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); +.nut-swiper-canmove-vertical { + touch-action: pan-x; } -.nut-button-info-outline, -.nut-button-info-dashed { - color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff)); - border-color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff)); +.nut-swiper-indicator { + display: flex; + flex-direction: row; + justify-content: center; + position: absolute; + height: 4rpx; + width: 100%; + top: 89.33%; + z-index: 10; } -.nut-button-info-outline-disabled, -.nut-button-info-dashed-disabled { - color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); - border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); +.nut-swiper-indicator-vertical { + width: 8rpx; + height: 100%; + top: 0; + left: 12rpx; + flex-direction: column; + justify-content: center; + z-index: 1; } -.nut-button-info-none { - color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff)); +.nut-swiper-inner { + width: 100%; + height: 100%; + display: flex; + position: relative; } -.nut-button-info-none-disabled { - color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); +.nut-swiper-inner-vertical { + flex-direction: column; } -.nut-button-danger { - color: var(--nutui-button-danger-color, #ffffff); - background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23)); - background-origin: border-box; - border-color: transparent; +.nut-swiper-slide { + width: 100%; + height: 100%; + position: relative; + flex-shrink: 0; } -.nut-button-danger-children { - color: var(--nutui-button-danger-color, #ffffff); +.nut-swiper-item { + width: 100%; + height: 100%; } -.nut-button-danger-disabled, -.nut-button-danger-solid-disabled { - background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); - border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); +[dir='rtl'] .nut-swiper-indicator, +.nut-rtl .nut-swiper-indicator { + left: auto; + right: 50%; } -.nut-button-danger-outline, -.nut-button-danger-dashed { - color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23)); - border-color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23)); +[dir='rtl'] .nut-swiper-indicator-vertical, +.nut-rtl .nut-swiper-indicator-vertical { + left: auto; + right: 12rpx; } -.nut-button-danger-outline-disabled, -.nut-button-danger-dashed-disabled { - color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); - border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); +.nut-swipe { + display: flex; + flex-direction: row; + position: relative; + overflow: hidden; + cursor: grab; + background-color: #fff; } -.nut-button-danger-none { - color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23)); +.nut-swipe-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-self: stretch; + width: 100%; + transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); + transition-property: transform; } -.nut-button-danger-none-disabled { - color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); +.nut-swipe-left, +.nut-swipe-right { + position: absolute; + top: 0; } -.nut-button-warning { - color: var(--nutui-button-warning-color, #ffffff); - background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #ffbf00)); - background-origin: border-box; - border-color: transparent; +.nut-swipe-left { + left: 0; + transform: translate(-100%); } -.nut-button-warning-children { - color: var(--nutui-button-warning-color, #ffffff); +.nut-swipe-right { + right: 0; + transform: translate(100%); } -.nut-button-warning-disabled, -.nut-button-warning-solid-disabled { - color: var(--nutui-button-warning-color, #ffffff); - background: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); - border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); +.nut-sticky-fixed { + position: fixed; } -.nut-button-warning-outline, -.nut-button-warning-dashed { - color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00)); - border-color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00)); +.nut-steps { + display: flex; } -.nut-button-warning-outline-disabled, -.nut-button-warning-dashed-disabled { - color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); - border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); +.nut-steps-horizontal { + flex-flow: row; } -.nut-button-warning-none { - color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00)); +.nut-steps-horizontal .nut-step-head { + background-color: var(--nutui-steps-background-color, #ffffff); } -.nut-button-warning-none-disabled { - color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); +.nut-steps-horizontal .nut-step-head-icon .nut-icon { + height: 10rpx; + width: 10rpx; } -.nut-button-block { - display: block; +.nut-steps-horizontal .nut-step-head-icon .nut-image { width: 100%; + height: 100%; + background-color: var(--nutui-steps-background-color, #ffffff); } -.nut-button-outline { - background: transparent; - border-style: solid; -} -.nut-button-dashed { - background: transparent; - border-style: dashed; +.nut-steps-horizontal .nut-step-head-icon .nut-image .h5-img { + vertical-align: top; } -.nut-button-none { - background: transparent; - border-color: transparent; +.nut-steps-horizontal .nut-step.nut-step-process .nut-step-title { + color: var(--nutui-steps-process-title-color, var(--nutui-color-primary, #ff0f23)); } -.nut-button-loading { - cursor: default; - opacity: 0.9; +.nut-steps-horizontal .nut-step.nut-step-process .nut-step-description { + color: var(--nutui-steps-process-description-color, var(--nutui-color-primary, #ff0f23)); } -.nut-button-square { - border-radius: var(--nutui-button-square-border-radius, 0); +.nut-steps-horizontal .nut-step.nut-step-wait .nut-step-title { + color: var(--nutui-steps-wait-title-color, var(--nutui-color-title, #1a1a1a)); } -[dir='rtl'] .nut-button-text, -.nut-rtl .nut-button-text { - margin-left: 0; - margin-right: var(--nutui-button-text-icon-margin, 4rpx); +.nut-steps-horizontal .nut-step.nut-step-wait .nut-step-description { + color: var(--nutui-steps-wait-description-color, var(--nutui-color-text, #505259)); } -[dir='rtl'] .nut-button-text.right, -.nut-rtl .nut-button-text.right { - margin-left: var(--nutui-button-text-icon-margin, 4rpx); +.nut-steps-horizontal-single .nut-step { + padding-right: var(--nutui-steps-horizontal-item-padding-right, 28rpx); } -[dir='rtl'] .nut-button::before, -.nut-rtl .nut-button::before { - left: auto; - right: 50%; - -ms-transform: translate(50%, -50%); - transform: translate(50%, -50%); +.nut-steps-horizontal-single .nut-step-last { + padding-right: 0 !important; } -.nut-barrage { - position: absolute; - left: 0; +.nut-steps-horizontal-single .nut-step-line { top: 0; - width: 100%; - height: 100%; - overflow: hidden; - box-sizing: border-box; - background-color: var(--nutui-color-background, #f2f3f5); - color: var(--nutui-color-title, #1a1a1a); -} -.nut-barrage .barrage-item { - display: block; - position: absolute; right: 0; - padding: 4rpx 16rpx; - border-radius: 16rpx; - font-size: var(--nutui-font-size-s, 12rpx); - text-align: center; - white-space: pre; - -ms-transform: translate(100%); - transform: translate(100%); - background: -webkit-linear-gradient(left, var(--nutui-black-3), var(--nutui-black-1)); - background: linear-gradient(to right, var(--nutui-black-3), var(--nutui-black-1)); + height: var(--nutui-steps-base-head-height, 14rpx); + width: var(--nutui-steps-horizontal-item-padding-right, 28rpx); + padding: var(--nutui-steps-horizontal-item-line-padding, 0 8rpx); box-sizing: border-box; } -.nut-barrage .barrage-item.move { - will-change: transform; - animation-name: moving; - animation-timing-function: linear; - animation-play-state: running; -} -@keyframes moving { - 0% { - transform: translate(100%); - } - to { - transform: translate(var(--move-distance)); - } +.nut-steps-horizontal-single .nut-step-title, +.nut-steps-horizontal-single .nut-step-description { + padding-left: 4rpx; } -[dir='rtl'] .nut-barrage, -.nut-rtl .nut-barrage { - left: auto; - right: 0; +.nut-steps-horizontal-single .nut-step-special { + padding-right: var(--nutui-steps-horizontal-item-special-padding-right, 22rpx); } -[dir='rtl'] .nut-barrage .barrage-item, -.nut-rtl .nut-barrage .barrage-item { - -ms-transform: translate(-100%); - transform: translate(-100%); - background: -webkit-linear-gradient(right, var(--nutui-black-3), var(--nutui-black-1)); - background: linear-gradient(to left, var(--nutui-black-3), var(--nutui-black-1)); +.nut-steps-horizontal-single .nut-step-special .nut-step-line { + width: 100%; } -[dir='rtl'] .nut-barrage .barrage-item.move, -.nut-rtl .nut-barrage .barrage-item.move { - animation-name: moving-rtl; +.nut-steps-horizontal-single .nut-step-special .nut-step-title { + padding-right: 8rpx; + width: fit-content; } -@keyframes moving-rtl { - 0% { - transform: translate(var(--move-distance)); - } - to { - transform: translate(100%); - } +.nut-steps-horizontal-single.nut-steps-horizontal-count-3 .nut-step-special { + padding-right: var(--nutui-steps-horizontal-item-special-3-padding-right, 9rpx); } -.nut-badge { - position: relative; - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - box-sizing: content-box; - vertical-align: middle; - width: auto; +.nut-steps-horizontal-double { + width: 100%; + justify-content: space-between; } -.nut-badge-icon { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; +.nut-steps-horizontal-double .nut-step { + flex-direction: column; align-items: center; - background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23)); - padding: var(--nutui-badge-icon-padding, 2rpx); - text-align: center; - z-index: var(--nutui-badge-z-index, 1); -} -.nut-badge-icon .nut-icon { - width: var(--nutui-badge-icon-size, 10rpx); - height: var(--nutui-badge-icon-size, 10rpx); - font-size: var(--nutui-badge-icon-size, 10rpx); -} -.nut-badge-sup, -.nut-badge-icon { - border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14rpx)); + flex: 1; } -.nut-badge-sup::after, -.nut-badge-icon::after { - content: ''; - position: absolute; - top: -50%; - bottom: -50%; - left: -50%; +.nut-steps-horizontal-double .nut-step-line { + top: 0; right: -50%; - -ms-transform: scale(0.5); - transform: scale(0.5); - border: var(--nutui-badge-border, 1rpx solid #ffffff); - border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14rpx)); + height: var(--nutui-steps-base-head-height, 14rpx); + width: 100%; } -.nut-badge-sup { - display: -ms-flexbox; +.nut-steps-horizontal-double .nut-step-line-inner { display: flex; - display: -ms-inline-flexbox; display: inline-flex; - text-align: center; - min-width: var(--nutui-badge-min-width, 6rpx); - padding: var(--nutui-badge-padding, 1rpx 4rpx); - box-sizing: border-box; - color: var(--nutui-badge-color, #ffffff); - font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxxs, 9rpx)); - line-height: 12rpx; - white-space: nowrap; - font-weight: 400; - vertical-align: middle; - background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23)); - z-index: 1; + height: var(--nutui-steps-base-line-height, 1rpx); + width: 100%; + background: var(--nutui-steps-base-line-background, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-badge-disabled { - background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc)); +.nut-steps-horizontal-double .nut-step-head { + justify-content: center; + margin-bottom: 6rpx; } -.nut-badge-number { - font-family: JDZH-Regular; +.nut-steps-horizontal-double .nut-step-head-dot-wrap, +.nut-steps-horizontal-double .nut-step-head-icon-wrap, +.nut-steps-horizontal-double .nut-step-head-text-wrap { + background-color: var(--nutui-steps-background-color, #ffffff); + padding: var(--nutui-steps-horizontal-item-line-padding, 0 8rpx); } -.nut-badge-one { - height: var(--nutui-badge-height, 14rpx); - width: var(--nutui-badge-height, 14rpx); +.nut-steps-horizontal-double .nut-step-head-icon { + height: var(--nutui-steps-base-head-icon-size-right, 20rpx); + width: var(--nutui-steps-base-head-icon-size-right, 20rpx); +} +.nut-steps-horizontal-double .nut-step-head-icon .nut-icon { + height: 12rpx; + width: 12rpx; } -.nut-badge-content { - position: absolute; - -ms-transform: var(--nutui-badge-content-transform, translate(50%, -50%)); - transform: var(--nutui-badge-content-transform, translate(50%, -50%)); +.nut-steps-horizontal-double .nut-step-main { + align-items: center; + margin-left: 0; + margin-top: 2rpx; } -.nut-badge-dot { - padding: 0; - border-radius: 50%; +.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-head, +.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-line { + height: var(--nutui-steps-base-head-icon-size-right, 20rpx); } -.nut-badge-dot::after { - border: var(--nutui-badge-dot-border, 1rpx solid #ffffff); - border-radius: 50%; +.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-head, +.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-line { + height: var(--nutui-steps-base-head-dot-size, 6rpx); } -.nut-badge-dot-normal { - min-width: var(--nutui-badge-dot-width, 6rpx); - width: var(--nutui-badge-dot-width, 6rpx); - height: var(--nutui-badge-dot-width, 6rpx); +.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-head, +.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-line { + height: var(--nutui-steps-base-head-text-size, 12rpx); } -.nut-badge-dot-small { - min-width: var(--nutui-badge-dot-small-width, 4rpx); - width: var(--nutui-badge-dot-small-width, 4rpx); - height: var(--nutui-badge-dot-small-width, 4rpx); +.nut-steps-vertical { + flex: 1; + min-width: 0; + flex-direction: column; } -.nut-badge-dot-large { - min-width: var(--nutui-badge-dot-large-width, 8rpx); - width: var(--nutui-badge-dot-large-width, 8rpx); - height: var(--nutui-badge-dot-large-width, 8rpx); +.nut-steps-vertical .nut-step { + padding-bottom: var(--nutui-steps-vertical-item-padding-bottom, 13rpx); } -.nut-badge-outline { - background: #fff; - color: var(--nutui-badge-outline-color, var(--nutui-color-primary, #ff0f23)); +.nut-steps-vertical .nut-step-last { + padding-bottom: 0 !important; } -.nut-badge-outline::after { - border: var(--nutui-badge-outline-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); +.nut-steps-vertical .nut-step-line { + height: calc(100% - 4rpx); + width: 1rpx; + bottom: 0; } -.nut-backtop { - display: none; +.nut-steps-vertical .nut-step-line-inner { + height: 100%; } -.nut-backtop-show { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; +.nut-steps-vertical .nut-step-head { align-items: center; - -ms-flex-pack: center; justify-content: center; - width: var(--nutui-hoverbutton-item-size, 40rpx); - height: var(--nutui-hoverbutton-item-size, 40rpx); - transition: all 0.2s ease-in-out; + height: 18rpx; } -.nut-backtop-show .nut-hoverbutton-item-container { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; +.nut-steps-vertical .nut-step-head-icon { + width: var(--nutui-steps-vertical-item-icon-size, 20rpx); + height: var(--nutui-steps-vertical-item-icon-size, 20rpx); } -.nut-avatar-cropper { - position: relative; - display: -ms-flexbox; - display: flex; +.nut-steps-vertical .nut-step-head-icon .nut-icon { + height: 12rpx; + width: 12rpx; } -.nut-avatar-cropper-edit-text { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.30196); - z-index: 1; - color: #fff; - display: -ms-flexbox; +.nut-steps-vertical .nut-step-main { + flex: 1; + min-width: 0; + height: auto; + margin-left: 8rpx; +} +.nut-steps-vertical .nut-step-title { display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; align-items: center; + height: var(--nutui-steps-vertical-line-height, 18rpx); + font-size: var(--nutui-steps-vertical-title-font-size, var(--nutui-font-size-l, 15rpx)); + overflow: auto; + font-weight: 500; + margin-bottom: var(--nutui-steps-vertical-title-margin-bottom, 4rpx); } -.nut-avatar-cropper-input { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0; - cursor: pointer; - z-index: 2; -} -.nut-avatar-cropper-popup { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: var(--nut-overlay-bg-color, rgba(0, 0, 0, 0.7)); - z-index: 1000; +.nut-steps-vertical .nut-step-description { + margin: var(--nutui-steps-vertical-description-margin, 0 0 1rpx); + height: auto; + line-height: var(--nutui-steps-vertical-line-height, 18rpx); + color: var(--nutui-color-title, #1a1a1a); + font-size: var(--nutui-steps-vertical-description-font-size, var(--nutui-font-size-base, 14rpx)); + box-sizing: border-box; } -.nut-avatar-cropper-popup-canvas, -.nut-avatar-cropper-popup-cut-canvas { - position: absolute; - bottom: 0; - left: 0; +.nut-steps-vertical .nut-step-head-dot-wrap, +.nut-steps-vertical .nut-step-head-icon-wrap, +.nut-steps-vertical .nut-step-head-text-wrap { + display: flex; + align-items: center; + justify-content: center; width: 100%; - height: 100%; + background-color: #fff; + position: relative; z-index: 1; } -.nut-avatar-cropper-popup-cut-canvas { - z-index: 0; -} -.nut-avatar-cropper-popup-toolbar { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - z-index: 2; -} -.nut-avatar-cropper-popup-toolbar.top { - top: 0; - bottom: inherit; +.nut-steps-vertical .nut-step-head-dot-wrap { + height: calc(var(--nutui-steps-base-head-dot-size, 6rpx) + 8rpx); } -.nut-avatar-cropper-popup-toolbar-flex { - width: 100%; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - justify-content: space-between; +.nut-steps-vertical .nut-step-head-icon-wrap { + height: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 8rpx); } -.nut-avatar-cropper-popup-toolbar-item { - color: #fff; - padding: 15rpx; - cursor: pointer; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; +.nut-steps-vertical .nut-step-head-text-wrap { + height: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 8rpx); } -.nut-avatar-cropper-popup-toolbar-item .nut-button { - color: #fff; +.nut-steps-vertical-icon .nut-step-head { + width: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 1rpx); + min-width: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 1rpx); } -.nut-avatar-cropper-popup-highlight { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - z-index: 1; - background-color: transparent; +.nut-steps-vertical-icon .nut-step-line { + left: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) / 2); } -.nut-avatar-cropper-popup-highlight .highlight { - position: absolute; - left: 50%; - top: 50%; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - background-color: transparent; - box-shadow: 0 0 1000rpx 1000rpx rgba(0, 0, 0, 0.6); +.nut-steps-vertical-dot .nut-step-head { + width: calc(var(--nutui-steps-base-head-dot-size, 6rpx) + 1rpx); } -.nut-avatar-cropper.round .nut-avatar-cropper-edit-text { - border-radius: 50%; +.nut-steps-vertical-dot .nut-step-line { + left: calc(var(--nutui-steps-base-head-dot-size, 6rpx) / 2); } -[dir='rtl'] .nut-avatar-cropper-edit-text, -.nut-rtl .nut-avatar-cropper-edit-text, -[dir='rtl'] .nut-avatar-cropper-input, -.nut-rtl .nut-avatar-cropper-input, -[dir='rtl'] .nut-avatar-cropper-popup, -.nut-rtl .nut-avatar-cropper-popup, -[dir='rtl'] .nut-avatar-cropper-popup-canvas, -[dir='rtl'] .nut-avatar-cropper-popup-cut-canvas, -.nut-rtl .nut-avatar-cropper-popup-canvas, -.nut-rtl .nut-avatar-cropper-popup-cut-canvas, -[dir='rtl'] .nut-avatar-cropper-popup-toolbar, -.nut-rtl .nut-avatar-cropper-popup-toolbar, -[dir='rtl'] .nut-avatar-cropper-popup-highlight, -.nut-rtl .nut-avatar-cropper-popup-highlight { - left: auto; - right: 0; +.nut-steps-vertical-text .nut-step-head { + width: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 1rpx); + min-width: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 1rpx); } -[dir='rtl'] .nut-avatar-cropper-popup-highlight .highlight, -.nut-rtl .nut-avatar-cropper-popup-highlight .highlight { - left: auto; - right: 50%; - -ms-transform: translate(50%, -50%); - transform: translate(50%, -50%); +.nut-steps-vertical-text .nut-step-line { + left: calc(var(--nutui-steps-base-head-text-size, 12rpx) / 2); } -.nut-avatar-group { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex: 0 0 auto; - flex: 0 0 auto; +.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon, +.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text, +.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon, +.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text { + background-color: var(--nutui-steps-enhanced-finish-head-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); } -.nut-avatar-group-avatar, -.nut-avatar-group .nut-avatar { - border: 1rpx solid #fff; - margin-left: -8rpx; +.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-icon .nut-icon, +.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text .nut-icon, +.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-icon .nut-icon, +.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text .nut-icon { + color: var(--nutui-steps-enhanced-finish-head-icon-color, var(--nutui-color-primary-stop-1, #ff475d)); } -.nut-avatar-group-avatar:not(:first-of-type), -.nut-avatar-group .nut-avatar:not(:first-of-type) { - margin-left: -8rpx; +.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-text, +.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-text { + color: var(--nutui-steps-enhanced-finish-head-text-color, var(--nutui-color-primary-stop-1, #ff475d)); } -[dir='rtl'] .nut-avatar-group .nut-avatar:not(:first-of-type), -.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) { - margin-left: 0; - margin-right: -8rpx; +.nut-steps-horizontal-enhanced .nut-step-finish .nut-step-head-dot, +.nut-steps-vertical-enhanced .nut-step-finish .nut-step-head-dot { + background-color: var(--nutui-steps-enhanced-finish-head-dot-background-color, var(--nutui-color-primary-disabled-special, #ffadbe)); } -.nut-avatar { +.nut-step { position: relative; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - width: var(--nutui-avatar-normal-width, 40rpx); - height: var(--nutui-avatar-normal-height, 40rpx); } -.nut-avatar-round { - border-radius: 999rpx; - overflow: hidden; +.nut-step-last .nut-step-line { + display: none; } -.nut-avatar-square { - border-radius: var(--nutui-avatar-square, 5rpx); +.nut-step-head { + display: flex; + align-items: center; + height: var(--nutui-steps-base-head-height, 14rpx); + position: relative; + z-index: 1; } -.nut-avatar-first-child { - margin-left: 0; - margin-right: 0; +.nut-step-head-text { + height: var(--nutui-steps-base-head-text-size, 12rpx); + width: var(--nutui-steps-base-head-text-size, 12rpx); + background-color: var(--nutui-steps-base-head-background-color, var(--nutui-color-background, #f2f3f5)); + color: var(--nutui-steps-base-head-color, var(--nutui-color-text, #505259)); + font-size: var(--nutui-steps-base-icon-size, var(--nutui-font-size-xxs, 10rpx)); } -.nut-avatar-img { - width: 100%; - height: 100%; - -ms-flex-negative: 0; - flex-shrink: 0; - background-size: 100% 100%; - background-repeat: no-repeat; - background-position: center center; +.nut-step-head-icon { + height: var(--nutui-steps-base-head-icon-size, 16rpx); + width: var(--nutui-steps-base-head-icon-size, 16rpx); + background-color: var(--nutui-steps-base-head-background-color, var(--nutui-color-background, #f2f3f5)); } -.nut-avatar-icon { - background-size: 100% 100%; +.nut-step-head-icon .nut-icon { + color: #fff; } -.nut-avatar-text { - display: -ms-flexbox; +.nut-step-head-dot { + height: var(--nutui-steps-base-head-dot-size, 6rpx); + width: var(--nutui-steps-base-head-dot-size, 6rpx); + background-color: var(--nutui-steps-base-head-dot-background-color, var(--nutui-color-text-disabled, #c2c4cc)); +} +.nut-step-head-dot, +.nut-step-head-icon, +.nut-step-head-text { display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; align-items: center; + justify-content: center; + border-radius: 50%; + box-sizing: border-box; + border: var(--nutui-steps-base-head-border, none); } -.nut-avatar-large, -.nut-avatar-large-img, -.nut-avatar-large-icon, -.nut-avatar-large-text { - width: var(--nutui-avatar-large-width, 60rpx); - height: var(--nutui-avatar-large-height, 60rpx); +.nut-step-line { + position: absolute; + z-index: 0; + display: flex; + align-items: center; + justify-content: center; } -.nut-avatar-small, -.nut-avatar-small-text { - width: var(--nutui-avatar-small-width, 32rpx); - height: var(--nutui-avatar-small-height, 32rpx); +.nut-step-line-inner { + display: flex; + flex: 1; + height: var(--nutui-steps-base-line-height, 1rpx); + background: var(--nutui-steps-base-line-background, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-audio-icon { +.nut-step-main { position: relative; - display: inline-block; -} -.nut-audio-icon-box { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; + flex-direction: column; justify-content: center; - width: 30rpx; - height: 30rpx; - background: #fff; - border-radius: 50%; - box-shadow: 0 0 8rpx var(--nutui-color-text-disabled, #c2c4cc); + min-height: var(--nutui-steps-base-head-height, 14rpx); } -.nut-audio-icon .nut-audio-icon-stop { +.nut-step-line, +.nut-step-title { + background-color: #fff; +} +.nut-step-title { position: relative; + z-index: 1; } -.nut-audio-icon .nut-audio-icon-stop::after { - position: absolute; - left: 50%; - top: 50%; - -ms-transform: translate(-50%); - transform: translate(-50%); - content: ''; - height: 2rpx; - width: 30rpx; - background: var(--nutui-color-text-disabled, #c2c4cc); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - -ms-transform-origin: 8rpx -18rpx; - transform-origin: 8rpx -18rpx; +.nut-step-title { + height: 14rpx; + line-height: 14rpx; + font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-size-s, 12rpx)); + color: var(--nutui-steps-base-title-color, var(--nutui-color-title, #1a1a1a)); + overflow: hidden; + white-space: nowrap; } -.nut-audio-progress { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - width: 100%; - margin: 0 auto; - padding: 10rpx 0; +.nut-step-description { + height: 16rpx; + line-height: 16rpx; + margin-top: var(--nutui-steps-base-title-margin-bottom, 2rpx); + font-size: var(--nutui-steps-base-description-font-size, var(--nutui-font-size-xxs, 10rpx)); + color: var(--nutui-steps-base-description-color, var(--nutui-color-text-help, #888b94)); + overflow: hidden; } -.nut-audio-progress-bar-wrapper { - -ms-flex: 1; - flex: 1; - margin: 0 10rpx; +.nut-step.nut-step-process .nut-step-head-icon, +.nut-step.nut-step-process .nut-step-head-text, +.nut-step.nut-step-process .nut-step-head-dot { + background-color: var(--nutui-steps-process-head-background-color, var(--nutui-color-primary, #ff0f23)); } -.nut-audio-progress .time { - min-width: 50rpx; - font-size: 12rpx; - text-align: center; +.nut-step.nut-step-process .nut-step-head-text { + color: var(--nutui-steps-process-color, #ffffff); } -.nut-audio-progress .nut-range-button { - width: 8rpx; - height: 8rpx; +.nut-step.nut-step-wait .nut-step-head-icon .nut-icon { + color: var(--nutui-steps-wait-icon-color, var(--nutui-color-text-help, #888b94)); } -.nut-audio .custom-button-group .nut-button-primary { - margin: 0 5rpx; +.nut-step.nut-step-finish .nut-step-head-icon .nut-icon { + color: var(--nutui-steps-finish-icon-color, var(--nutui-color-text-help, #888b94)); } -.nut-audio .custom-button-group-disable .nut-button-primary { - margin: 0 5rpx; - pointer-events: none; +.nut-step.nut-step-business .nut-step-head-text { + color: var(--nutui-steps-business-head-text-color, var(--nutui-color-service-pressed)); } -.nut-audio .disable { - color: #00f; +.nut-step.nut-step-business .nut-step-title { + color: var(--nutui-steps-business-title-color, var(--nutui-color-service-pressed)); } -.nut-audio .nut-audio-none-container .nut-voice { - border: 1rpx solid var(--nutui-color-title, #1a1a1a); - -ms-flex-align: center; - align-items: center; +.nut-step.nut-step-business .nut-step-description { + color: var(--nutui-steps-business-description-color, var(--nutui-color-service-pressed)); } -[dir='rtl'] .nut-audio-icon .nut-audio-icon-stop::after, -.nut-rtl .nut-audio-icon .nut-audio-icon-stop::after { - left: auto; - right: 50%; - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - -ms-transform-origin: 20rpx -18rpx; - transform-origin: 20rpx -18rpx; +.nut-step.nut-step-business .nut-step-head-dot { + background-color: var(--nutui-steps-business-head-dot-background-color, var(--nutui-color-service-pressed)); } -.nut-animate [class*='nut-animate-'] { - animation-duration: 0.5s; - animation-timing-function: ease-out; - animation-fill-mode: both; +.nut-step.nut-step-business .nut-step-head-icon, +.nut-step.nut-step-business .nut-step-head-text { + background-color: var(--nutui-steps-business-head-background-color, var(--nutui-color-service)); } -@keyframes slide-right { - 0% { - opacity: 0; - transform: translate(100%); - } - to { - opacity: 1; - transform: translate(0); - } +.nut-step.nut-step-business .nut-step-head-icon .nut-icon { + color: var(--nutui-steps-business-head-icon-color, var(--nutui-color-service-pressed)); } -@keyframes slide-left { - 0% { - opacity: 0; - transform: translate(-100%); - } - to { - opacity: 1; - transform: translate(0); - } +.nut-space { + display: flex; +} +.nut-space-item { + flex: none; +} +.nut-space-vertical { + flex-direction: column; +} +.nut-space-vertical-item { + margin-bottom: var(--nutui-space-gap, 8rpx); +} +.nut-space-vertical-item-last { + margin-bottom: 0; +} +.nut-space-horizontal { + flex-direction: row; +} +.nut-space-horizontal-item { + margin-right: var(--nutui-space-gap, 8rpx); } -@keyframes slide-top { - 0% { - opacity: 0; - transform: translateY(-100%); - } - to { - opacity: 1; - transform: translateY(0); - } +.nut-space-horizontal-item-last { + margin-right: 0; } -@keyframes slide-bottom { - 0% { - opacity: 0; - transform: translateY(100%); - } - to { - opacity: 1; - transform: translateY(0); - } +.nut-space-horizontal-wrap { + flex-wrap: wrap; + margin-bottom: calc(var(--nutui-space-gap, 8rpx) * -1); } -.nut-animate .nut-animate-slide-right { - animation-name: slide-right; +.nut-space-horizontal-wrap-item { + padding-bottom: var(--nutui-space-gap, 8rpx); } -.nut-animate .nut-animate-slide-left { - animation-name: slide-left; +.nut-space-align-center { + align-items: center; } -.nut-animate .nut-animate-slide-top { - animation-name: slide-top; +.nut-space-align-start { + align-items: flex-start; } -.nut-animate .nut-animate-slide-bottom { - animation-name: slide-bottom; +.nut-space-align-end { + align-items: flex-end; } -@keyframes shake { - 0%, - to { - transform: translate(0); - } - 10% { - transform: translate(-9rpx); - } - 20% { - transform: translate(8rpx); - } - 30% { - transform: translate(-7rpx); - } - 40% { - transform: translate(6rpx); - } - 50% { - transform: translate(-5rpx); - } - 60% { - transform: translate(4rpx); - } - 70% { - transform: translate(-3rpx); - } - 80% { - transform: translate(2rpx); - } - 90% { - transform: translate(-1rpx); - } +.nut-space-align-baseline { + align-items: baseline; } -.nut-animate .nut-animate-shake { - animation-name: shake; +.nut-space-justify-center { + justify-content: center; } -@keyframes ripple { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.1); - } +.nut-space-justify-start { + justify-content: flex-start; } -.nut-animate .nut-animate-ripple { - animation-name: ripple; +.nut-space-justify-end { + justify-content: flex-end; } -@keyframes breath { - 0%, - to { - transform: scale(1); - } - 50% { - transform: scale(1.1); - } +.nut-space-justify-between { + justify-content: space-between; } -.nut-animate .nut-animate-breath { - animation-name: breath; - animation-duration: 2.7s; - animation-timing-function: ease-in-out; - animation-direction: alternate; +.nut-space-justify-around { + justify-content: space-around; } -.nut-animate .nut-animate-twinkle { - position: relative; +.nut-space-justify-evenly { + justify-content: space-evenly; } -.nut-animate .nut-animate-twinkle::after, -.nut-animate .nut-animate-twinkle::before { - width: 60rpx; - height: 60rpx; - content: ''; - box-sizing: border-box; - border: 4rpx solid rgba(255, 255, 255, 0.6); - position: absolute; - border-radius: 30rpx; - right: 50%; - margin-top: -30rpx; - margin-right: -30rpx; - z-index: 1; - -ms-transform: scale(0); - transform: scale(0); - animation: twinkle 2s ease-out infinite; +.nut-space-justify-stretch { + justify-content: stretch; } -.nut-animate .nut-animate-twinkle::after { - animation-delay: 0.4s; +[dir='rtl'] .nut-space-horizontal > .nut-space-item, +.nut-rtl .nut-space-horizontal > .nut-space-item { + margin-right: 0; + margin-left: var(--nutui-space-gap, 8rpx); } -@keyframes twinkle { - 0% { - transform: scale(0); - } - 20% { - opacity: 1; - } - 50%, - to { - transform: scale(1.4); - opacity: 0; - } +[dir='rtl'] .nut-space-horizontal > .nut-space-item:last-child, +.nut-rtl .nut-space-horizontal > .nut-space-item:last-child { + margin-right: 0; + margin-left: 0; } -.nut-animate .nut-animate-flicker { +.nut-skeleton { + line-height: 0rpx; + font-size: 0rpx; +} +.nut-skeleton-content { position: relative; + display: flex; + display: inline-flex; + width: var(--nutui-skeleton-line-width, 100%); + background: var(--nutui-skeleton-background, var(--nutui-color-background-sunken, #f7f8fc)); + border-radius: var(--nutui-skeleton-line-border-radius, var(--nutui-radius-xs, 4rpx)); overflow: hidden; } -.nut-animate .nut-animate-flicker::after { - width: 100rpx; - height: 60rpx; +.nut-skeleton-content-normal { + height: var(--nutui-skeleton-line-normal-height, 24rpx); +} +.nut-skeleton-content-large { + height: var(--nutui-skeleton-line-large-height, 32rpx); +} +.nut-skeleton-content-small { + height: var(--nutui-skeleton-line-small-height, 16rpx); + margin-top: 8rpx; +} +.nut-skeleton-content-small-0 { + margin-top: 0; +} +.nut-skeleton-animation { position: absolute; - left: 0; top: 0; - opacity: 0.73; - content: ''; - background-image: -webkit-linear-gradient(344deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%); - background-image: linear-gradient(106deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%); - animation: flicker 1.5s linear infinite; - -ms-transform: skew(-20deg); - transform: skew(-20deg); - filter: blur(3rpx); -} -@keyframes flicker { - 0% { - transform: translate(-100rpx) skew(-20deg); - } - 40%, - to { - transform: translate(150rpx) skew(-20deg); - } + left: 0; + width: 100%; + height: 100%; + z-index: 1; + background: linear-gradient(90deg, #0000, #00000005, #0000); + animation-name: nut-skeleton; + animation-delay: 0s; + animation-duration: 0.6s; + animation-direction: normal; + animation-fill-mode: both; + animation-play-state: running; + animation-iteration-count: 1; + animation-timing-function: linear; } -@keyframes jump { +@keyframes nut-skeleton { 0% { - transform: rotate(0) translateY(0); - } - 25% { - transform: rotate(10deg) translateY(20rpx); - } - 50% { - transform: rotate(0) translateY(-10rpx); - } - 75% { - transform: rotate(-10deg) translateY(20rpx); + transform: translate(-100%); } to { - transform: rotate(0) translateY(0); + transform: translate(100%); } } -.nut-animate .nut-animate-jump { - -ms-transform-origin: center center; - transform-origin: center center; - animation: jump 0.7s linear; +[dir='rtl'] .nut-skeleton-animation, +.nut-rtl .nut-skeleton-animation { + left: auto; + right: 0; + animation: nut-skeleton-rtl 2s linear 0s infinite; } -@keyframes float-pop { +@keyframes nut-skeleton-rtl { 0% { - top: 0; - } - 25% { - top: 1rpx; - } - 50% { - top: 4rpx; - } - 75% { - top: 1rpx; + transform: translate(100%); } to { - top: 0; + transform: translate(-100%); } } -.nut-animate .nut-animate-float { - position: relative; - animation-name: float-pop; -} -.nut-animate .loop { - animation-iteration-count: infinite; +.nut-signature .spcanvas_WEAPP { + width: 100%; + height: 100%; } -.nut-actionsheet { - text-align: center; +.nut-signature .spcanvas_WEAPP Canvas { + width: 100%; } -.nut-actionsheet.nut-popup { - min-height: 10%; - background-color: var(--nutui-actionsheet-background-color, var(--nutui-color-background-overlay, #ffffff)); +.nut-signature-inner { + display: flex; + justify-content: center; + align-items: center; + height: var(--nutui-signature-height, 10rem); + border: var(--nutui-signature-border-width, 1rpx) solid var(--nutui-signature-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + background-color: var(--nutui-signature-background-color, var(--nutui-color-background-overlay, #ffffff)); } -.nut-actionsheet .nut-popup-title { - border-bottom: 1rpx solid var(--nutui-actionsheet-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +.nut-signature-unsupport { + font-size: var(--nutui-signature-font-size, var(--nutui-font-size-base, 14rpx)); } -.nut-actionsheet-list { +.nut-sidebaritem { + width: 100%; + height: 100%; + flex-shrink: 0; display: block; - list-style: none; - padding: 0; - margin: 0; - border-radius: var(--nutui-actionsheet-border-radius, 0); + background-color: var(--nutui-sidebar-item-background, #ffffff); + color: var(--nutui-color-title, #1a1a1a); + padding: var(--nutui-sidebar-item-padding, 24rpx 20rpx); + box-sizing: border-box; + overflow: auto; } -.nut-actionsheet-cancel, -.nut-actionsheet-item { - display: block; - padding: 10rpx; - text-align: var(--nutui-actionsheet-item-text-align, center); - line-height: var(--nutui-actionsheet-item-line-height, 24rpx); - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-actionsheet-item-color, var(--nutui-color-title, #1a1a1a)); - cursor: pointer; +.nut-sidebaritem.inactive { + overflow: visible; + height: 0; } -.nut-actionsheet-cancel-name, -.nut-actionsheet-item-name { - text-align: var(--nutui-actionsheet-item-text-align, center); - line-height: var(--nutui-actionsheet-item-line-height, 24rpx); - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-actionsheet-item-color, var(--nutui-color-title, #1a1a1a)); +.nut-sidebar { + display: flex; } -.nut-actionsheet-cancel-description, -.nut-actionsheet-item-description { - display: block; - font-size: var(--nutui-font-size-s, 12rpx); - color: var(--nutui-color-text, #505259); - text-align: var(--nutui-actionsheet-item-text-align, center); - line-height: var(--nutui-actionsheet-item-line-height, 24rpx); +.nut-sidebar-content { + flex-direction: column; + height: 100%; } -.nut-actionsheet-cancel-danger, -.nut-actionsheet-item-danger { - color: var(--nutui-actionsheet-item-danger, var(--nutui-color-danger, #ff0f23)); +.nut-sidebar-content-wrap { + flex: 1; + overflow: hidden; } -.nut-actionsheet-cancel-disabled, -.nut-actionsheet-item-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc) !important; - cursor: not-allowed; +.nut-sidebar-titles { + background: var(--nutui-sidebar-background-color, var(--nutui-color-background, #f2f3f5)); + flex-direction: column; + border-radius: var(--nutui-sidebar-border-radius, 0); + height: 100%; + width: var(--nutui-sidebar-width, 104rpx); + max-width: var(--nutui-sidebar-max-width, 128rpx); + flex-shrink: 0; } -.nut-actionsheet-cancel { - margin-top: 5rpx; - border-top: 1rpx solid var(--nutui-actionsheet-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - border-radius: var(--nutui-actionsheet-border-radius, 0); +.nut-sidebar-titles::-webkit-scrollbar { + display: none; + width: 0; + background: transparent; } -.nut-actionsheet-safe-area { - display: block; +.nut-sidebar-titles .nut-sidebar-list { width: 100%; - padding-bottom: constant(safe-area-inset-bottom); - padding-bottom: env(safe-area-inset-bottom); + display: flex; + flex-direction: column; + flex-shrink: 0; } -.nut-address-exist { - display: block; - padding: 15rpx 20rpx 0; - height: 279rpx; +.nut-sidebar-titles-scrollable { + overflow-x: hidden; overflow-y: auto; - box-sizing: border-box; } -.nut-address-exist-item { - display: -ms-flexbox; +.nut-sidebar-titles-item { + cursor: pointer; display: flex; - -ms-flex-align: center; align-items: center; - margin-bottom: 20rpx; - font-size: var(--nutui-font-size-s, 12rpx); - line-height: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-color-title, #1a1a1a); + justify-content: center; + height: var(--nutui-sidebar-title-height, 52rpx); + font-size: var(--nutui-sidebar-inactive-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-color-text, #505259); } -.nut-address-exist-item.active { - font-weight: var(--nutui-font-weight-bold, 600); +.nut-sidebar-titles-item-text { + text-align: center; + white-space: normal; + width: var(--nutui-sidebar-width, 104rpx); } -.nut-address-exist-item-info { - margin-left: 9rpx; +.nut-sidebar-titles-item-active .nut-sidebar-titles-item-text { + font-family: PingFangSC-Semibold; + color: var(--nutui-sidebar-active-color, var(--nutui-color-primary, #ff0f23)); + font-weight: var(--nutui-sidebar-active-font-weight, var(--nutui-font-weight-bold, 600)); + font-size: var(--nutui-sidebar-active-font-size, var(--nutui-font-size-l, 15rpx)); } -.nut-address-footer { - width: 100%; - height: 54rpx; - padding: 6rpx 0 0; - border-top: 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)); +.nut-sidebar-titles-item-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc); + cursor: not-allowed; } -.nut-address-footer-btn { - width: 90%; - height: 42rpx; - line-height: 42rpx; - margin: auto; +.nut-shortpassword-popup { + padding: 32rpx 24rpx 28rpx; + border-radius: 12rpx; text-align: center; - background: -webkit-linear-gradient(left, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); - background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); - border-radius: 21rpx; - font-size: 15rpx; - color: #fff; } -.nut-address-title { - font-size: 14rpx; - font-weight: 500; - padding: 16rpx 16rpx 12rpx; +.nut-shortpassword-title { + display: flex; + justify-content: center; + line-height: 1; + font-size: var(--nutui-font-size-l, 15rpx); + color: var(--nutui-color-title, #1a1a1a); } -.nut-address-hotlist { - padding: 0 16rpx; - display: -ms-flexbox; +.nut-shortpassword-description { display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-align: start; - align-items: flex-start; + justify-content: center; + margin-top: 12rpx; + margin-bottom: 24rpx; + line-height: 1; + font-size: var(--nutui-font-size-s, 12rpx); + color: var(--nutui-color-text, #505259); } -.nut-address-hotlist-item { - display: -ms-flexbox; +.nut-shortpassword-input { + padding: 0 0 10rpx; + text-align: center; + position: relative; + overflow: hidden; +} +.nut-shortpassword-input-real { + position: absolute; + right: 0; + width: 247rpx; + height: 41rpx; + outline: 0 none; + border: 0; + text-decoration: none; + z-index: -99; +} +.nut-shortpassword-input-site { + width: 247rpx; + height: 41rpx; + border-radius: 4rpx; +} +.nut-shortpassword-input-fake { + top: 5%; + width: 100%; + height: 41rpx; + margin: 0 auto; + box-sizing: border-box; + background: var(--nutui-shortpassword-background-color, var(--nutui-color-background, #f2f3f5)); + border-radius: 4rpx; + border: 1rpx solid var(--nutui-shortpassword-border-color, var(--nutui-color-background, #f2f3f5)); + display: flex; + position: absolute; + left: 0; +} +.nut-shortpassword-input-fake-li { + flex: 1; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; - width: 63rpx; - height: 28rpx; - font-size: 12rpx; - border-radius: 4rpx; - margin-bottom: 7rpx; - margin-right: 7rpx; - background-color: var(--nutui-color-background-sunken, #f7f8fc); - color: var(--nutui-color-title, #1a1a1a); } -.nut-address-hotlist-item:nth-child(5n) { - margin-right: 0; +.nut-shortpassword-input-fake-li-icon { + height: 6rpx; + width: 6rpx; + border-radius: 50%; + background: #000; + display: inline-block; } -.nut-address-hotlist.hotlist-more .nut-address-hotlist-item { - width: auto; - padding: 0 16rpx; - margin-right: 7rpx; +.nut-shortpassword-message { + margin-top: 9rpx; + display: flex; + justify-content: space-between; + width: 247rpx; } -.nut-address-selected { - width: 100%; - height: 60rpx; - padding: 0 16rpx; - display: -ms-flexbox; +.nut-shortpassword-message-error { + line-height: 1; + font-size: var(--nutui-font-size-xs, 11rpx); + color: var(--nutui-shortpassword-error, var(--nutui-color-primary, #ff0f23)); +} +.nut-shortpassword-message-forget { + line-height: 1; + font-size: var(--nutui-font-size-s, 12rpx); + color: var(--nutui-shortpassword-forget, var(--nutui-color-text-help, #888b94)); display: flex; - -ms-flex-align: center; align-items: center; - border-bottom: 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)); } -.nut-address-selected-item { - font-size: 12rpx; - display: inline-block; - height: 28rpx; - line-height: 28rpx; - padding: 0 12rpx; - border-radius: 4rpx; - background-color: var(--nutui-color-background-sunken, #f7f8fc); +.nut-shortpassword-message-forget .nut-icon { + margin-right: 3rpx; } -.nut-address-selected-item.active { +.nut-shortpassword-footer { + display: flex; + justify-content: space-between; + margin-top: 20rpx; +} +.nut-shortpassword-footer-cancel { + background: #fff; border: 1rpx solid var(--nutui-color-primary, #ff0f23); - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); + border-radius: 15rpx; + padding: 8rpx 38rpx; + line-height: 1; + font-size: var(--nutui-font-size-base, 14rpx); color: var(--nutui-color-primary, #ff0f23); } -.nut-address-selected-border { - margin: 0 2rpx; - color: var(--nutui-color-text-disabled, #c2c4cc); +.nut-shortpassword-footer-sure { + background: linear-gradient(135deg, var(--nutui-color-primary, #ff0f23) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); + border-radius: 15rpx; + padding: 8rpx 38rpx; + line-height: 1; + font-size: var(--nutui-font-size-base, 14rpx); + color: #fff; } -.nut-address-elevator { - margin-top: 0; +[dir='rtl'] .nut-shortpassword-input-real, +.nut-rtl .nut-shortpassword-input-real { + right: auto; + left: 0; } -.nut-address-elevator .nut-elevator-list-item { - position: relative; - padding-left: 20rpx; +[dir='rtl'] .nut-shortpassword-input-fake, +.nut-rtl .nut-shortpassword-input-fake { + left: auto; + right: 0; } -.nut-address-elevator .nut-elevator-list-item-code { - display: inline; - position: absolute; - left: 0; - top: 0; - height: 30rpx; - line-height: 30rpx; - border-bottom: 0; - color: var(--nutui-color-text-help, #888b94); - font-weight: 500; +[dir='rtl'] .nut-shortpassword-footer-sure, +.nut-rtl .nut-shortpassword-footer-sure { + background: linear-gradient(-135deg, var(--nutui-color-primary, #ff0f23) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); } -.nut-address-elevator .nut-elevator-bars { - top: 40%; - padding: 0; - background: none; +.nut-segmented { + display: flex; + display: inline-flex; + height: var(--nutui-segmented-height, 24rpx); + min-width: 24rpx; + padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, 2rpx)); + align-items: center; + border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs, 4rpx)); + background: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)); + box-sizing: border-box; } -.nut-address-elevator .nut-elevator-bars-inner-item { - display: -ms-flexbox; +.nut-segmented-item { display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; + height: var(--nutui-segmented-height, 20rpx); align-items: center; - width: 16rpx; - height: 16rpx; + justify-content: center; + padding: var(--nutui-segmented-item-padding, 0 var(--nutui-spacing-xs, 6rpx)); + border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs, 4rpx)); + color: var(--nutui-segmented-item-color, #ffffff); + font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-size-s, 12rpx)); + line-height: 1; + box-sizing: border-box; +} +.nut-segmented-item-active { + background: var(--nutui-segmented-active-background, var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4))); +} +.nut-segmented-icon { + height: 10rpx; + width: 10rpx; + margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs, 2rpx)); +} +.nut-segmented-icon .nut-icon { + height: 10rpx; + width: 10rpx; font-size: 10rpx; - border-radius: 16rpx; - margin-bottom: 2rpx; - color: var(--nutui-color-text-help, #888b94); } -.nut-address-elevator .nut-elevator-bars-inner-item-active { - background-color: var(--nutui-color-primary, #ff0f23); - color: var(--nutui-color-background-overlay, #ffffff); - font-weight: 400; +.nut-searchbar { + display: flex; + align-items: center; + width: var(--nutui-searchbar-width, 100%); + padding: var(--nutui-searchbar-padding, 1rpx 8rpx); + background: var(--nutui-searchbar-background, var(--nutui-color-background-sunken, #f7f8fc)); + color: var(--nutui-searchbar-color, var(--nutui-color-title, #1a1a1a)); + font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14rpx)); + box-sizing: border-box; + justify-content: center; } -[dir='rtl'] .nut-address-exist-item-info, -.nut-rtl .nut-address-exist-item-info { - margin-left: 0; - margin-right: 9rpx; +.nut-searchbar .nut-icon { + width: var(--nutui-searchbar-icon-size, 20rpx); + height: var(--nutui-searchbar-icon-size, 20rpx); + font-size: var(--nutui-searchbar-icon-size, 20rpx); } -/* tokens: template-corpus-apply <= src/pages/index/index.tsx */ -.template-corpus-apply { - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; +.nut-searchbar-content { + position: relative; + flex: 1; + display: flex; align-items: center; - gap: calc(var(--spacing) * 2); - border-radius: 20rpx; - --tw-gradient-position: to right; - background-image: -webkit-linear-gradient(var(--tw-gradient-stops)); - background-image: linear-gradient(var(--tw-gradient-stops)); - --tw-gradient-from: #9e58e9; - --tw-gradient-to: var(--color-blue-500); - --tw-gradient-stops: - var(--tw-gradient-via-stops, var(--tw-gradient-position)), var(--tw-gradient-from) var(--tw-gradient-from-position,), var(--tw-gradient-to) var(--tw-gradient-to-position,); - padding-left: 18rpx; - padding-right: 18rpx; - padding-top: 10rpx; - padding-bottom: 10rpx; - --tw-font-weight: var(--font-weight-semibold); - font-weight: var(--font-weight-semibold); - font-size: 26rpx; - color: var(--color-white); + justify-content: center; + padding: 0 var(--nutui-searchbar-gap, 12rpx); + height: var(--nutui-searchbar-input-height, 38rpx); + background: var(--nutui-searchbar-content-background, var(--nutui-color-background-overlay, #ffffff)); + border-radius: var(--nutui-searchbar-content-border-radius, 8rpx); + border: 1rpx solid var(--nutui-color-primary, #ff0f23); } -@charset "UTF-8"; -@font-face { - font-family: JDZH-Regular; - src: url(data:font/ttf;base64,) format('truetype'); - font-weight: 400; - font-style: normal; - font-display: swap; +.nut-searchbar-icon { + display: flex; + justify-content: center; + align-items: center; + color: var(--nutui-color-primary, #ff0f23); } -@font-face { - font-family: JDZH-Bold; - src: url(data:font/ttf;base64,) format('truetype'); - font-weight: 700; - font-style: normal; - font-display: swap; +.nut-searchbar-leftin { + margin-right: var(--nutui-searchbar-inner-gap, 8rpx); } -.nutFade-enter-active, -.nutFadeIn, -.nutFade-leave-active, -.nutFadeOut { - animation-duration: 0.25s; - animation-fill-mode: both; - animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); +.nut-searchbar-rightin { + font-size: 15rpx; + font-weight: 500; + color: var(--nutui-color-primary, #ff0f23); } -.nutFade-enter-active, -.nutFadeIn { - animation-name: nutFadeIn; +.nut-searchbar-rightin.nut-searchbar-icon { + color: var(--nutui-black-5); } -.nutFade-leave-active, -.nutFadeOut { - animation-name: nutFadeOut; +.nut-searchbar-input-box, +.nut-searchbar-input { + display: flex; + align-items: center; + flex: 1; } -@keyframes nutZoomIn { - 0% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); - } +.nut-searchbar-input { + border: 0; + outline: 0; + box-sizing: border-box; + width: 100%; + padding: 0; + margin: 0; + font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a)); + caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-primary, #ff0f23)); + background: transparent; + text-align: var(--nutui-searchbar-input-text-align, left); } -@keyframes nutZoomOut { - 50% { - opacity: 0; - transform: scale3d(0.3, 0.3, 0.3); - } +.nut-searchbar-clear.nut-searchbar-icon { + position: relative; } -.nutZoom-enter-active, -.nutZoomIn, -.nutZoom-leave-active, -.nutZoomOut { - animation-duration: 0.25s; - animation-fill-mode: both; - animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); +.nut-searchbar-clear.nut-searchbar-icon .nut-icon { + width: 12rpx; + height: 12rpx; + color: var(--nutui-black-5); + margin-right: var(--nutui-searchbar-inner-gap, 8rpx); +} +.nut-searchbar-clear.nut-searchbar-icon::after { + content: ''; + position: absolute; + width: 100%; + height: 200%; + left: -20%; +} +.nut-searchbar-values { + position: absolute; + display: flex; + flex-direction: row; + z-index: 2; + background-color: #fff; + top: 9rpx; + left: 6rpx; + font-size: 12rpx; + line-height: 12rpx; } -.nutZoom-enter-active, -.nutZoomIn { - animation-name: nutZoomIn; +.nut-searchbar-values .nut-searchbar-value { + display: flex; + flex-direction: row; + align-items: center; + padding: 4rpx 8rpx; + background-color: #f7f8fc; + border-radius: 4rpx; + margin-right: 2rpx; } -.nutZoom-leave-active, -.nutZoomOut { - animation-name: nutZoomOut; +.nut-searchbar-values .nut-icon { + width: 6rpx; + height: 6rpx; + font-size: 6rpx; + color: #c2c4cc; + margin-left: 4rpx; } -@keyframes nutEaseIn { - 0% { - opacity: 0; - transform: scale(0.9); - } - to { - opacity: 1; - transform: scale(1); - } +.nut-searchbar-left, +.nut-searchbar-right { + display: flex; + display: inline-flex; + align-items: center; } -@keyframes nutEaseOut { - 0% { - opacity: 1; - transform: scale(1); - } - to { - opacity: 0; - transform: scale(0.9); - } +.nut-searchbar-left.nut-icon, +.nut-searchbar-right.nut-icon { + width: 20rpx; + height: 20rpx; } -.nutEase-enter-active, -.nutEaseIn, -.nutEase-leave-active, -.nutEaseOut { - animation-duration: 0.25s; - animation-fill-mode: both; - animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); +.nut-searchbar-left { + margin-right: var(--nutui-searchbar-gap, 12rpx); } -.nutEase-enter-active, -.nutEaseIn { - animation-name: nutEaseIn; +.nut-searchbar-left > .h5-div, +.nut-searchbar-left > .h5-span, +.nut-searchbar-left > .h5-i, +.nut-searchbar-left > .h5-svg, +.nut-searchbar-left .nut-icon { + margin-right: var(--nutui-searchbar-gap, 12rpx); } -.nutEase-leave-active, -.nutEaseOut { - animation-name: nutEaseOut; +.nut-searchbar-left > .h5-div:last-child, +.nut-searchbar-left > .h5-span:last-child, +.nut-searchbar-left > .h5-i:last-child, +.nut-searchbar-left > .h5-svg:last-child, +.nut-searchbar-left .nut-icon:last-child { + margin-right: 0; } -@keyframes nutDropIn { - 0% { - opacity: 0; - transform: scaleY(0.8); - } - to { - opacity: 1; - transform: scaleY(1); - } +.nut-searchbar-right { + margin-left: var(--nutui-searchbar-gap, 12rpx); } -@keyframes nutDropOut { - 0% { - opacity: 1; - transform: scaleY(1); - } - to { - opacity: 0; - transform: scaleY(0.8); - } +.nut-searchbar-right > .h5-div, +.nut-searchbar-right > .h5-span, +.nut-searchbar-right > .h5-i, +.nut-searchbar-right > .h5-svg, +.nut-searchbar-right .nut-icon { + margin-left: var(--nutui-searchbar-gap, 12rpx); } -.nutDrop-enter-active, -.nutDropIn, -.nutDrop-leave-active, -.nutDropOut { - animation-duration: 0.25s; - animation-fill-mode: both; - animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); +.nut-searchbar-right > .h5-div:first-child, +.nut-searchbar-right > .h5-span:first-child, +.nut-searchbar-right > .h5-i:first-child, +.nut-searchbar-right > .h5-svg:first-child, +.nut-searchbar-right .nut-icon:first-child { + margin-left: 0; } -.nutDrop-enter-active, -.nutDropIn { - animation-name: nutDropIn; +.nut-searchbar-left > text, +.nut-searchbar-left > view { + margin-right: var(--nutui-searchbar-gap, 12rpx); } -.nutDrop-leave-active, -.nutDropOut { - animation-name: nutDropOut; +.nut-searchbar-left > text:last-child, +.nut-searchbar-left > view:last-child { + margin-right: 0; } -.nutRotate-enter-active, -.nutRotateIn, -.nutRotate-leave-active, -.nutRotateOut { - animation-duration: 0.25s; - animation-fill-mode: both; - animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); +.nut-searchbar-right > text, +.nut-searchbar-right > view { + margin-left: var(--nutui-searchbar-gap, 12rpx); } -.nutRotate-enter-active, -.nutRotateIn { - animation-name: nutRotateIn; +.nut-searchbar-right > text:first-child, +.nut-searchbar-right > view:first-child { + margin-left: 0; } -.nutRotate-leave-active, -.nutRotateOut { - animation-name: nutRotateOut; +.nut-searchbar-round { + border-radius: var(--nutui-searchbar-content-round-border-radius, 19rpx); } -@keyframes nutJump { - to { - transform: scale3d(0.8, 1, 0.9) translateY(-10rpx); - } +.nut-searchbar-disabled { + cursor: not-allowed; } -@keyframes nutJumpOne { - 50% { - transform: scale3d(0.8, 1, 0.9) translateY(-10rpx); - } - to { - transform: scaleZ(1) translateY(0); - } +.nut-searchbar-focus { + padding: 5rpx var(--nutui-searchbar-gap, 12rpx); } -@keyframes nutBreathe { - 0%, - to { - transform: scale(1); - } - 50% { - transform: scale(1.2); - } +.nut-searchbar-focus .nut-searchbar-content { + border: 0.5rpx solid #ff5c67; } -@keyframes nutBounce { - 0%, - 20%, - 53%, - to { - animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - transform: translateZ(0); - } - 40%, - 43% { - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - transform: translate3d(0, -30rpx, 0) scaleY(1.1); - } - 70% { - animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); - transform: translate3d(0, -15rpx, 0) scaleY(1.05); - } - 80% { - transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - transform: translateZ(0) scaleY(0.95); - } - 90% { - transform: translate3d(0, -4rpx, 0) scaleY(1.02); - } +[dir='rtl'] .nut-searchbar-left, +.nut-rtl .nut-searchbar-left { + margin-right: 0; + margin-left: var(--nutui-searchbar-gap, 12rpx); } -@keyframes nutShake { - 0% { - transform: translate(0); - } - 6.5% { - transform: translate(-6rpx) rotateY(-9deg); - } - 18.5% { - transform: translate(5rpx) rotateY(7deg); - } - 31.5% { - transform: translate(-3rpx) rotateY(-5deg); - } - 43.5% { - transform: translate(2rpx) rotateY(3deg); - } - 50% { - transform: translate(0); - } +[dir='rtl'] .nut-searchbar-left > .h5-div, +[dir='rtl'] .nut-searchbar-left > .h5-span, +[dir='rtl'] .nut-searchbar-left > .h5-svg, +.nut-rtl .nut-searchbar-left > .h5-div, +.nut-rtl .nut-searchbar-left > .h5-span, +.nut-rtl .nut-searchbar-left > .h5-svg { + margin-right: 0; + margin-left: var(--nutui-searchbar-gap, 12rpx); } -.nut-horizontal-items .h5-li { - display: block; - float: left; - color: var(--nutui-color-title, #1a1a1a); - background: var(--nutui-color-background-overlay, #ffffff); - padding: 10rpx; - margin-right: 20rpx; +[dir='rtl'] .nut-searchbar-left > .h5-div.nut-icon, +[dir='rtl'] .nut-searchbar-left > .h5-span.nut-icon, +[dir='rtl'] .nut-searchbar-left > .h5-svg.nut-icon, +.nut-rtl .nut-searchbar-left > .h5-div.nut-icon, +.nut-rtl .nut-searchbar-left > .h5-span.nut-icon, +.nut-rtl .nut-searchbar-left > .h5-svg.nut-icon { + transform: rotate(180deg); } -.nut-vertical-items .h5-li { - display: block; - color: var(--nutui-color-title, #1a1a1a); - background: var(--nutui-color-background-overlay, #ffffff); - border-radius: 7rpx; - box-shadow: 0 1rpx 6rpx #edeef1; - margin-top: 20rpx; - padding: 14rpx 15rpx; - font-size: 13rpx; - line-height: 18rpx; - font-family: PingFangSC; - font-weight: 500; +[dir='rtl'] .nut-searchbar-left > .h5-div:last-child, +[dir='rtl'] .nut-searchbar-left > .h5-span:last-child, +[dir='rtl'] .nut-searchbar-left > .h5-svg:last-child, +.nut-rtl .nut-searchbar-left > .h5-div:last-child, +.nut-rtl .nut-searchbar-left > .h5-span:last-child, +.nut-rtl .nut-searchbar-left > .h5-svg:last-child { + margin-right: 0; + margin-left: 0; } -.nut-virtuallist-item { - overflow: hidden; - margin: var(--nutui-list-item-margin, 0 0 10rpx 0); +[dir='rtl'] .nut-searchbar-right, +.nut-rtl .nut-searchbar-right { + margin-left: 0; + margin-right: var(--nutui-searchbar-gap, 12rpx); } -[dir='rtl'] .nut-horizontal-items .h5-li, -.nut-rtl .nut-horizontal-items .h5-li { - float: right; +[dir='rtl'] .nut-searchbar-right > .h5-div, +[dir='rtl'] .nut-searchbar-right > .h5-span, +[dir='rtl'] .nut-searchbar-right > .h5-svg, +.nut-rtl .nut-searchbar-right > .h5-div, +.nut-rtl .nut-searchbar-right > .h5-span, +.nut-rtl .nut-searchbar-right > .h5-svg { + margin-left: 0; + margin-right: var(--nutui-searchbar-gap, 12rpx); +} +[dir='rtl'] .nut-searchbar-right > .h5-div:first-child, +[dir='rtl'] .nut-searchbar-right > .h5-span:first-child, +[dir='rtl'] .nut-searchbar-right > .h5-svg:first-child, +.nut-rtl .nut-searchbar-right > .h5-div:first-child, +.nut-rtl .nut-searchbar-right > .h5-span:first-child, +.nut-rtl .nut-searchbar-right > .h5-svg:first-child { + margin-left: 0; margin-right: 0; - margin-left: 20rpx; } -.nut-uploader-upload { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - background: var(--nutui-uploader-background, var(--nutui-color-background, #f2f3f5)); - width: var(--nutui-uploader-image-width, 100rpx); - height: var(--nutui-uploader-image-height, 100rpx); - border: var(--nutui-uploader-image-border, 0rpx); - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); +[dir='rtl'] .nut-searchbar-left > text, +[dir='rtl'] .nut-searchbar-left > view, +.nut-rtl .nut-searchbar-left > text, +.nut-rtl .nut-searchbar-left > view { + margin-right: 0; + margin-left: var(--nutui-searchbar-gap, 12rpx); } -.nut-uploader-icon .h5-i, -.nut-uploader-icon .nut-icon { - color: var(--nutui-uploader-image-color, var(--nutui-color-text-help, #888b94)); - margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); +[dir='rtl'] .nut-searchbar-left > text:last-child, +[dir='rtl'] .nut-searchbar-left > view:last-child, +.nut-rtl .nut-searchbar-left > text:last-child, +.nut-rtl .nut-searchbar-left > view:last-child { + margin-right: 0; + margin-left: 0; } -.nut-uploader-icon-tip { - font-size: var(--nutui-uploader-image-icon-tip-font-size, 12rpx); +[dir='rtl'] .nut-searchbar-right > text, +[dir='rtl'] .nut-searchbar-right > view, +.nut-rtl .nut-searchbar-right > text, +.nut-rtl .nut-searchbar-right > view { + margin-left: 0; + margin-right: var(--nutui-searchbar-gap, 12rpx); } -.nut-uploader-upload-disabled .nut-uploader-icon .h5-i, -.nut-uploader-upload-disabled .nut-uploader-icon .nut-icon { - color: var(--nutui-uploader-image-disabled, var(--nutui-color-text-disabled, #c2c4cc)); - margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); +[dir='rtl'] .nut-searchbar-right > text:first-child, +[dir='rtl'] .nut-searchbar-right > view:first-child, +.nut-rtl .nut-searchbar-right > text:first-child, +.nut-rtl .nut-searchbar-right > view:first-child { + margin-left: 0; + margin-right: 0; } -.nut-uploader-preview { - position: relative; - margin-right: var(--nutui-uploader-preview-margin-right, 10rpx); - margin-bottom: var(--nutui-uploader-preview-margin-bottom, 10rpx); - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); - box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); +[dir='rtl'] .nut-searchbar-input, +.nut-rtl .nut-searchbar-input { + text-align: var(--nutui-searchbar-input-text-align, right); } -.nut-uploader-preview-progress { - position: absolute; - left: 0; - top: 0; - display: -ms-flexbox; +.nut-safe-area { display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; width: 100%; - height: 100%; - background: var(--nutui-uploader-preview-progress-background, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); - z-index: 10; -} -.nut-uploader-preview-progress .h5-i { - margin-bottom: var(--nutui-uploader-image-icon-margin-bottom, 6rpx); } -.nut-uploader-preview-progress-msg { - color: var(--nutui-color-text-help, #888b94); - font-size: 12rpx; +.nut-safe-area-position-top { + padding-top: calc(constant(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)); + padding-top: calc(env(safe-area-inset-top) * var(--nutui-safe-area-multiple, 1)); } -.nut-uploader-preview.list { - width: 100%; - margin-right: 0; - margin-bottom: 0; - margin-top: 10rpx; - box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.01176); +.nut-safe-area-position-bottom { + padding-bottom: calc(constant(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)); + padding-bottom: calc(env(safe-area-inset-bottom) * var(--nutui-safe-area-multiple, 1)); } -.nut-uploader-preview-list { +.nut-resultpage { width: 100%; - height: 32rpx; - box-sizing: border-box; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; + flex-direction: column; align-items: center; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 0 10rpx; - background-color: var(--nutui-color-background-sunken, #f7f8fc); + margin: 0 auto; } -.nut-uploader-preview-list .nut-uploader-preview-img-file-name { - display: -ms-flexbox; +.nut-resultpage-icon { display: flex; - -ms-flex-align: center; - align-items: center; - -webkit-line-clamp: 1; - padding: 2rpx; - height: 24rpx; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + display: inline-flex; + margin-bottom: var(--nutui-resultpage-icon-margin-bottom, 12rpx); } -.nut-uploader-preview-list .nut-progress .nut-progress-outer { - height: 2rpx !important; +.nut-resultpage-icon .nut-icon { + height: var(--nutui-resultpage-icon-size, 36rpx); + width: var(--nutui-resultpage-icon-size, 36rpx); } -.nut-uploader-preview .close { - position: absolute; - right: var(--nutui-uploader-preview-close-right, 0rpx); - top: var(--nutui-uploader-preview-close-top, 0rpx); - -ms-transform: translate(50%, -50%); - transform: translate(50%, -50%); - z-index: 1; +.nut-resultpage-title { + width: var(--nutui-resultpage-width, 240rpx); + margin-bottom: var(--nutui-resultpage-title-margin-bottom, 12rpx); + font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, 18rpx)); + color: var(--nutui-resultpage-title-color, var(--nutui-color-title, #1a1a1a)); + font-weight: var(--nutui-font-weight-bold, 600); + text-align: center; } -.nut-uploader-preview-img { - position: relative; - width: var(--nutui-uploader-image-width, 100rpx); - height: var(--nutui-uploader-image-height, 100rpx); - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); +.nut-resultpage-description { + width: var(--nutui-resultpage-width, 240rpx); + line-height: var(--nutui-resultpage-description-line-height, 20rpx); + font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-resultpage-description-color, var(--nutui-color-text, #505259)); + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; overflow: hidden; + word-break: break-all; } -.nut-uploader-preview-img .h5-i { - color: var(--nutui-color-title, #1a1a1a); +.nut-resultpage-actions { + display: flex; + flex-direction: row; + margin-top: var(--nutui-resultpage-actions-margin-top, 16rpx); } -.nut-uploader-preview-img .tips { - position: absolute; - bottom: 0; - left: 0; - font-size: 12rpx; - color: #fff; - text-align: center; - box-sizing: border-box; - height: var(--nutui-uploader-preview-tips-height, 24rpx); - line-height: var(--nutui-uploader-preview-tips-height, 24rpx); - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); - border-top-left-radius: 0; - border-top-right-radius: 0; - padding: var(--nutui-uploader-preview-tips-padding, 0 5rpx); - background: var(--nutui-uploader-preview-tips-background, var(--nutui-black-7)); - width: 100%; - overflow: hidden; - text-overflow: ellipsis; +.nut-resultpage-actions .nut-button-children { white-space: nowrap; } -.nut-uploader-preview-img-c { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - height: 100%; - position: static; - position: initial; - border-radius: var(--nutui-uploader-image-border-radius, 4rpx); +.nut-resultpage-action { + margin-left: 6rpx; + margin-right: 6rpx; } -.nut-uploader-preview-img-file-name { - display: -ms-flexbox; +.nut-row { display: flex; - width: 90%; - font-size: 12rpx; - color: var(--nutui-color-text, #505259); - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; + flex-direction: row; + width: 100%; overflow: hidden; - word-break: break-all; } -[dir='rtl'] .nut-uploader-preview, -.nut-rtl .nut-uploader-preview { - margin-right: 0; - margin-left: var(--nutui-uploader-preview-margin-right, 10rpx); +.nut-row::after { + display: block; + height: 0; + clear: both; + visibility: hidden; + content: ''; } -[dir='rtl'] .nut-uploader-preview .close, -.nut-rtl .nut-uploader-preview .close { - right: auto; - left: var(--nutui-uploader-preview-close-right, 0rpx); - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); +.nut-row-flex { + display: flex; +} +.nut-row-flex::after { + display: none; +} +.nut-row-justify-center { + justify-content: center; } -.nut-video .h5-video { - width: 100%; - height: 100%; - -o-object-fit: fill; - object-fit: fill; +.nut-row-justify-end { + justify-content: flex-end; } -.nut-tour-mask { - position: fixed; - box-shadow: 0 0 0 150vh var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); - border-radius: var(--nutui-tour-mask-border-radius, 10rpx); - z-index: 999; +.nut-row-justify-space-between { + justify-content: space-between; + align-items: center; } -.nut-tour-content { - display: block; - padding: var(--nutui-tour-content-padding, 10rpx 12rpx); - min-width: var(--nutui-tour-content-min-width, 200rpx); - box-sizing: content-box; +.nut-row-justify-space-around { + justify-content: space-around; } -.nut-tour-content-top { - display: block; - text-align: right; +.nut-row-align-flex-start { + align-items: flex-start; } -.nut-tour-content-top-close { - --nut-icon-width: 10rpx; - --nut-icon-height: 10rpx; +.nut-row-align-center { + align-items: center; } -.nut-tour-content-inner { - margin: var(--nutui-tour-content-inner-margin, 10rpx 0rpx); - font-size: var(--nutui-tour-content-inner-font-size, 14rpx); - white-space: nowrap; +.nut-row-align-flex-end { + align-items: flex-end; } -.nut-tour-content-bottom { - margin-top: var(--nutui-tour-content-bottom-margin-top, 10rpx); - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - justify-content: space-between; +.nut-row-flex-wrap { + flex-wrap: wrap; } -.nut-tour-content-bottom-operate-btn { - display: inline-block; - border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); - margin-left: var(--nutui-tour-content-bottom-btn-margin-left, 4rpx); - padding: var(--nutui-tour-content-bottom-btn-padding, 2rpx 4rpx); - font-size: var(--nutui-tour-content-bottom-btn-font-size, 12rpx); - border-radius: var(--nutui-tour-content-bottom-btn-border-radius, 4rpx); - color: var(--nutui-color-text, #505259); - cursor: pointer; +.nut-row-flex-nowrap { + flex-wrap: nowrap; } -[dir='rtl'] .nut-tour-content-bottom-operate-btn, -.nut-rtl .nut-tour-content-bottom-operate-btn { - margin-left: 0; - margin-right: var(--nutui-tour-content-bottom-btn-margin-left, 4rpx); +.nut-row-flex-reverse { + flex-wrap: wrap-reverse; } -.nut-trendarrow { - display: -ms-flexbox; +.nut-range-container { display: flex; - -ms-flex-direction: row; flex-direction: row; - -ms-flex-align: center; + position: relative; + width: 100%; + height: var(--nutui-range-height, 4rpx); align-items: center; - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-trendarrow-font-size, 14rpx); + justify-content: space-between; } -.nut-trendarrow-icon-before { - margin-right: var(--nutui-trendarrow-icon-margin, 4rpx); +.nut-range-container-native { + height: auto; } -.nut-trendarrow-icon-after { - margin-left: var(--nutui-trendarrow-icon-margin, 4rpx); +.nut-range { + display: block; + position: relative; + height: var(--nutui-range-height, 4rpx); + margin: 0 var(--nutui-range-margin, 15rpx); + background-color: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1)); + border-radius: 2rpx; + flex: 1; + cursor: pointer; } -[dir='rtl'] .nut-trendarrow-icon-before, -.nut-rtl .nut-trendarrow-icon-before { - margin-right: 0; - margin-left: var(--nutui-trendarrow-icon-margin, 4rpx); +.nut-range::before { + position: absolute; + top: -8rpx; + bottom: -8rpx; + left: 0; + right: 0; + content: ''; } -[dir='rtl'] .nut-trendarrow-icon-after, -.nut-rtl .nut-trendarrow-icon-after { - margin-left: 0; - margin-right: var(--nutui-trendarrow-icon-margin, 4rpx); +.nut-range-min, +.nut-range-max { + font-size: var(--nutui-font-size-s, 12rpx); + color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a)); + user-select: none; } -@keyframes rotation { - 0% { - } - to { - } +.nut-range-bar { + display: block; + position: relative; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23)); + border-radius: 2rpx; } -.nut-toast-overlay-default-taro { - background-color: rgba(0, 0, 0, 0); - --nutui-overlay-bg-color: rgba(0, 0, 0, 0); +.nut-range-bar-animate { + transition: all 0.2s; } -.nut-toast-inner { +.nut-range-button { position: absolute; - top: var(--nutui-toast-inner-top, 50%); - -ms-transform: translateY(-50%); - transform: translateY(-50%); - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; + width: var(--nutui-range-button-width, 24rpx); + height: var(--nutui-range-button-height, 24rpx); + background: var(--nutui-range-button-background, #ffffff); + border-radius: 50%; + box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.14902); + border: var(--nutui-range-button-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); + outline: none; align-items: center; - min-width: 96rpx; - max-width: 60%; - box-sizing: border-box; - font-size: var(--nutui-toast-text-font-size, 14rpx); - text-align: var(--nutui-toast-inner-text-align, center); - padding: var(--nutui-toast-inner-padding, 13rpx 16rpx); - word-break: break-all; - background: var(--nutui-toast-inner-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); - border-radius: var(--nutui-toast-inner-border-radius, var(--nutui-radius-xl, 12rpx)); - color: var(--nutui-toast-font-color, #ffffff); + top: 50%; + left: 50%; } -.nut-toast-inner-small { +.nut-range-button-wrapper, +.nut-range-button-wrapper-right, +.nut-range-button-wrapper-left { + width: var(--nutui-range-button-width, 24rpx); + height: var(--nutui-range-button-height, 24rpx); +} +.nut-range-button-wrapper, +.nut-range-button-wrapper-right { + touch-action: none; + position: absolute; + top: 50%; + left: 100%; + cursor: grab; + outline: none; +} +.nut-range-button-wrapper-left { + position: absolute; + top: 50%; + left: 0; + cursor: grab; + outline: none; + touch-action: none; +} +.nut-range-button-number { + position: relative; + width: 200%; + height: 24rpx; + line-height: 14rpx; + padding: 5rpx 0; + left: 50%; + display: flex; + align-items: center; + justify-content: center; + user-select: none; font-size: var(--nutui-font-size-s, 12rpx); + color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a)); + text-align: center; + vertical-align: center; + box-sizing: border-box; } -.nut-toast-inner-large { - font-size: var(--nutui-font-size-l, 15rpx); +.nut-range-disabled { + cursor: not-allowed; + opacity: 0.54; } -.nut-toast-text { - color: #fff; - text-align: var(--nutui-toast-inner-text-align, center); - line-height: normal; - line-height: 20rpx; - height: auto; +.nut-range-disabled .nut-range-button-wrapper, +.nut-range-disabled .nut-range-button-wrapper-left, +.nut-range-disabled .nut-range-button-wrapper-right { + cursor: not-allowed; } -.nut-toast-title { - color: #fff; - font-size: var(--nutui-toast-title-font-size, 16rpx); - font-weight: 600; - text-align: var(--nutui-toast-inner-text-align, center); - line-height: normal; - line-height: 22rpx; +.nut-range-mark { + position: absolute; + width: 100%; + height: 14rpx; + overflow: visible; + top: 50%; +} +.nut-range-mark-text-wrapper { + position: absolute; + height: 100%; + top: 14rpx; + display: inline-block; + transform: translate(-10rpx); +} +.nut-range-mark-text { + position: absolute; + line-height: 16rpx; + font-size: 12rpx; + color: #999; + text-align: center; + word-break: keep-all; + user-select: none; +} +.nut-range-tick { + position: absolute; + top: -20rpx; + width: 11rpx; + height: 11rpx; + left: 0; + border-radius: 6rpx; + background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1)); +} +.nut-range-tick-active { + background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-range-vertical-container { + height: 100%; + flex-direction: column; + padding: 0 15rpx; } -.nut-toast .nut-icon { - width: 24rpx; - height: 24rpx; - color: #fff; +.nut-range-vertical { + width: var(--nutui-range-height, 4rpx); + margin: var(--nutui-range-margin, 15rpx) 0rpx; } -.nut-toast-icon-wrapper { - width: 100%; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - margin: 3rpx 0 5rpx; - color: #fff; +.nut-range-vertical-button-wrapper, +.nut-range-vertical-button-wrapper-right { + position: absolute; + top: auto; + top: initial; + right: auto; + right: initial; + top: 100%; + left: 50%; } -.nut-toast-icon-wrapper-icon { - width: 24rpx; - height: 24rpx; +.nut-range-vertical-button-wrapper-left { + top: 0; + left: 50%; + right: auto; + right: initial; } -.nut-timeselect { - background-color: var(--nutui-color-background-overlay, #ffffff); - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - height: calc(100% - 50rpx); +.nut-range-vertical-button-number { + left: 0; + top: 50%; } -.nut-timeselect-content-left { - width: var(--nutui-timeselect-date-width, 140rpx); - min-width: var(--nutui-timeselect-date-width, 140rpx); +.nut-range-vertical-mark { + position: absolute; + width: 36rpx; height: 100%; - overflow: auto; - background: var(--nutui-color-background-sunken, #f7f8fc); + top: 0; + right: 50%; + overflow: visible; + font-size: 12rpx; + padding: 0; } -.nut-timepannel { - padding: 0 16rpx; - height: var(--nutui-timeselect-date-height, 40rpx); - line-height: var(--nutui-timeselect-date-height, 40rpx); - text-align: left; - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-font-size-base, 14rpx); +.nut-range-vertical-mark-hm { + left: -34rpx; } -.nut-timedetail { - display: -ms-flexbox; - display: flex; - -ms-flex-line-pack: start; - align-content: flex-start; - -ms-flex: 1; - flex: 1; - min-width: 0; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - padding: 0 0 50rpx 12rpx; +.nut-range-vertical-mark-text-wrapper { + height: 16rpx; + position: absolute; + display: inline-block; + user-select: none; + transform: translateY(-11rpx); } -.nut-timedetail-item { - width: var(--nutui-timeselect-time-width, 100rpx); - height: var(--nutui-timeselect-time-height, 50rpx); - line-height: var(--nutui-timeselect-time-height, 50rpx); +.nut-range-vertical-mark-text { + height: 100%; + line-height: 16rpx; + color: #999; text-align: center; - margin: var(--nutui-timeselect-time-margin, 0 10rpx 10rpx 0); - background: var(--nutui-timeselect-time-background, var(--nutui-color-background, #f2f3f5)); + word-break: keep-all; +} +.nut-range-vertical-tick { + position: absolute; + top: 2rpx; + left: 31rpx; + width: 10rpx; + height: 10rpx; border-radius: 5rpx; - font-size: var(--nutui-font-size-base, 14rpx); - border: 1rpx solid transparent; + background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1)); } -.nut-timedetail-item.active { - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); - border: 1rpx solid var(--nutui-color-primary, #ff0f23); - color: var(--nutui-color-primary, #ff0f23); - font-weight: var(--nutui-font-weight-bold, 600); +.nut-range-vertical-tick-active { + background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23)); } -[dir='rtl'] .nut-timedetail, -.nut-rtl .nut-timedetail { - padding: 0 12rpx 50rpx 0; +[dir='rtl'] .nut-range-button-wrapper, +[dir='rtl'] .nut-range-button-wrapper-right, +.rtl-nut-range-button-wrapper, +.rtl-nut-range-button-wrapper-right { + left: 0; + right: auto; + right: initial; } -.nut-tag { - padding: var(--nutui-tag-padding, 0rpx 2rpx); - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10rpx)); - border-radius: var(--nutui-tag-border-radius, 2rpx); - height: var(--nutui-tag-height, 14rpx); - color: var(--nutui-tag-color, #ffffff); - border: var(--nutui-tag-border-width, 1rpx) solid transparent; +[dir='rtl'] .nut-range-button-wrapper-left, +.rtl-nut-range-button-wrapper-left, +[dir='rtl'] .nut-range-tick, +.rtl-nut-range-tick { + right: 0; + left: auto; + left: initial; } -.nut-tag .nut-icon { - vertical-align: middle; - margin-left: 4rpx; - color: var(--nutui-tag-color, #ffffff); +[dir='rtl'] .nut-range-mark-text, +.rtl-nut-range-mark-text { + transform: translate(10rpx); } -.nut-tag-text { - font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10rpx)); - color: var(--nutui-tag-color, #ffffff); +[dir='rtl'] .nut-range-vertical-button-wrapper, +[dir='rtl'] .nut-range-vertical-button-wrapper-right, +.rtl-nut-range-vertical-button-wrapper, +.rtl-nut-range-vertical-button-wrapper-right, +[dir='rtl'] .nut-range-vertical-button-wrapper-left, +.rtl-nut-range-vertical-button-wrapper-left { + right: 50%; + left: auto; + left: initial; } -.nut-tag-round { - border-radius: var(--nutui-tag-round-border-radius, 8rpx); +[dir='rtl'] .nut-range-vertical-mark, +.rtl-nut-range-vertical-mark { + right: auto; + left: 50%; } -.nut-tag-mark { - border-radius: var(--nutui-tag-mark-border-radius, 0 8rpx 8rpx 0); +[dir='rtl'] .nut-range-vertical-tick, +.rtl-nut-range-vertical-tick { + left: auto; + right: 30rpx; + margin-left: 0; + margin-right: 0; } -.nut-tag-custom-icon { - display: -ms-flexbox; +[dir='rtl'] .nut-range-vertical-mark-text-wrapper, +.rtl-nut-range-vertical-mark-text-wrapper { + transform: translateY(-11rpx); +} +.nut-rate { display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - font-size: var(--nutui-tag-font-size, var(--nutui-font-size-xxs, 10rpx)); - color: var(--nutui-tag-color, #ffffff); - margin-left: 4rpx; + touch-action: pan-x; } -.nut-tag-plain { - background-color: #fff; - border: var(--nutui-tag-border-width, 1rpx) solid var(--nutui-color-title, #1a1a1a); +.nut-rate.disabled .nut-rate-item-icon { + cursor: not-allowed; } -[dir='rtl'] .nut-tag .nut-icon, -.nut-rtl .nut-tag .nut-icon { - margin-left: 0; - margin-right: 4rpx; +.nut-rate.readonly .nut-rate-item-icon { + cursor: default; } -.nut-textarea { - display: -ms-flexbox; +.nut-rate-item { display: flex; - -ms-flex-direction: column; - flex-direction: column; + align-items: center; + flex-shrink: 0; position: relative; - width: 100%; - box-sizing: border-box; - font-size: var(--nutui-font-size-base, 14rpx); - border-radius: var(--nutui-radius-s, 6rpx); } -.nut-textarea-container { - padding: var(--nutui-textarea-padding, 12rpx); - background-color: var(--nutui-color-background-overlay, #ffffff); +.nut-rate-item-half { + position: absolute; + height: 100%; + width: 50% !important; + left: 0; + top: 0; + overflow: hidden; } -.nut-textarea-error { - border: 0.5rpx solid var(--nutui-color-danger, #ff0f23); - background-color: var(--nutui-color-danger-light, #ffebef); +.nut-rate-item-half .nut-icon { + flex-shrink: 0; } -.nut-textarea-limit { - text-align: right; - font-size: var(--nutui-font-size-base, 14rpx); - line-height: var(--nutui-font-size-base, 14rpx); - margin-top: var(--nutui-spacing-base, 8rpx); - color: var(--nutui-color-text-help, #888b94); +.nut-rate-item-normal { + margin-left: var(--nutui-rate-item-margin, 4rpx); } -.nut-textarea-textarea { - outline: none; - display: block; - box-sizing: border-box; - width: 100%; - height: 40rpx; - min-width: 0; - margin: 0; - padding: 0; - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-textarea-text-color, var(--nutui-color-title, #1a1a1a)); - caret-color: var(--nutui-textarea-text-curror-color, var(--nutui-color-primary, #ff0f23)); - text-align: left; - background-color: transparent; - border: 0; - resize: none; +.nut-rate-item-normal .nut-icon { + height: var(--nutui-rate-icon-size, 12rpx); + width: var(--nutui-rate-icon-size, 12rpx); } -.nut-textarea-textarea::-webkit-input-placeholder { - color: var(--nutui-color-text-help, #888b94); +.nut-rate-item-large { + margin-left: calc(var(--nutui-rate-item-margin, 4rpx) * 2); } -.nut-textarea-textarea-disabled::-webkit-input-placeholder { - color: var(--nutui-color-text-disabled, #c2c4cc); +.nut-rate-item-large .nut-icon { + height: calc(var(--nutui-rate-icon-size, 12rpx) + 8rpx); + width: calc(var(--nutui-rate-icon-size, 12rpx) + 8rpx); } -.nut-textarea-textarea-disabled .taro-textarea::-webkit-input-placeholder { - color: var(--nutui-color-text-disabled, #c2c4cc); +.nut-rate-item-small { + margin-left: calc(var(--nutui-rate-item-margin, 4rpx) / 2); } -.nut-textarea.nut-textarea-rtl-limit { - right: auto; - left: 15rpx; +.nut-rate-item-small .nut-icon { + height: calc(var(--nutui-rate-icon-size, 12rpx) - 4rpx); + width: calc(var(--nutui-rate-icon-size, 12rpx) - 4rpx); } -.nut-tabs-titles { - display: -ms-flexbox; +.nut-rate-item-normal:first-child, +.nut-rate-item-large:first-child, +.nut-rate-item-small:first-child { + margin-left: 0; +} +.nut-rate-item-icon { display: flex; - box-sizing: border-box; - height: var(--nutui-tabs-titles-height, 44rpx); - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - overflow-x: auto; - overflow-y: hidden; - background: var(--nutui-tabs-titles-background-color, var(--nutui-color-background, #f2f3f5)); - scrollbar-width: none; + align-items: center; + cursor: pointer; } -.nut-tabs-titles-left .nut-tabs-titles-item { - padding: 0 22rpx; +.nut-rate-item-icon .nut-icon { + color: var(--nutui-rate-icon-color, var(--nutui-color-primary-icon, #ff3333)); } -.nut-tabs-titles-right .nut-tabs-titles-item { - padding: 0 22rpx; +.nut-rate-item-icon-disabled .nut-icon { + color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0)); } -.nut-tabs-titles-item { +.nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half { + position: absolute; + left: 0; + top: 0; + overflow: hidden; +} +.nut-rate-item-icon.nut-rate-item-icon::before { position: relative; - display: -ms-flexbox; + top: auto; + left: auto; + transform: none; +} +.nut-rate-score { display: flex; - -ms-flex-align: center; + display: inline-flex; align-items: center; - -ms-flex-pack: center; - justify-content: center; - -ms-flex: 1 0 auto; - flex: 1 0 auto; - padding: 0 var(--nutui-tabs-titles-gap, 12rpx); - height: var(--nutui-tabs-titles-height, 44rpx); - line-height: var(--nutui-tabs-titles-height, 44rpx); - min-width: var(--nutui-tabs-titles-item-min-width, 50rpx); - font-size: var(--nutui-tabs-titles-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-tabs-titles-item-color, var(--nutui-color-title, #1a1a1a)); - text-overflow: ellipsis; - white-space: nowrap; + color: var(--nutui-rate-font-color, var(--nutui-color-primary-icon, #ff3333)); + font-family: JDZH-Regular; + line-height: 1; } -.nut-tabs-titles-item-smile, -.nut-tabs-titles-item-line { - position: absolute; - transition: width 0.3s ease; - width: 0; - height: 0; - content: ' '; - left: 50%; - -ms-transform: translate(-50%); - transform: translate(-50%); - bottom: var(--nutui-tabs-line-bottom, 15%); - border-radius: var(--nutui-tabs-line-border-radius, 2rpx); - opacity: var(--nutui-tabs-tab-line-opacity, 1); - overflow: hidden; +.nut-rate-score-normal { + padding-left: var(--nutui-rate-item-margin, 4rpx); + font-size: var(--nutui-rate-font-size, 12rpx); } -.nut-tabs-titles-item-smile .nut-icon { - position: absolute; - font-size: 20rpx; - width: 100%; - height: 100%; +.nut-rate-score-large { + font-size: calc(var(--nutui-rate-font-size, 12rpx) + 6rpx); + padding-left: calc(var(--nutui-rate-item-margin, 4rpx) * 2); } -.nut-tabs-titles-item-active .nut-tabs-titles-item-line { - overflow: visible; - overflow: initial; - content: ' '; - width: var(--nutui-tabs-tab-line-width, 12rpx); - height: var(--nutui-tabs-tab-line-height, 2rpx); - background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23)); +.nut-rate-score-small { + font-size: calc(var(--nutui-rate-font-size, 12rpx) - 2rpx); + padding-left: calc(var(--nutui-rate-item-margin, 4rpx) / 2); } -.nut-tabs-titles-item-active .nut-tabs-titles-item-smile { - overflow: visible; - overflow: initial; - width: 40rpx; - height: 20rpx; +.nut-rate-score-disabled { + color: var(--nutui-rate-icon-inactive-color, var(--nutui-color-primary-icon-disabled, #dadce0)); } -.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-tabs-titles-item-text, -.nut-tabs-titles-simple .nut-tabs-titles-item-active .nut-icon { - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-tabs-titles-item-active-font-size, var(--nutui-font-size-l, 15rpx)); +[dir='rtl'] .nut-rate-item, +.nut-rtl .nut-rate-item { + margin-left: 0; } -.nut-tabs-titles-card .nut-tabs-titles-item-active { - font-weight: var(--nutui-font-weight-bold, 600); - background-color: #fff; - border-radius: var(--nutui-radius-base, 8rpx) var(--nutui-radius-base, 8rpx) 0 0; +[dir='rtl'] .nut-rate-item:first-child, +.nut-rtl .nut-rate-item:first-child { + margin-right: 0; } -.nut-tabs-titles-button .nut-tabs-titles-item { - padding: 0 10rpx; +[dir='rtl'] .nut-rate-item-normal, +.nut-rtl .nut-rate-item-normal { + margin-right: var(--nutui-rate-item-margin, 4rpx); } -.nut-tabs-titles-button .nut-tabs-titles-item .nut-tabs-titles-item-text { - -ms-flex: 1; - flex: 1; - height: 28rpx; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - padding: 0 8rpx; +[dir='rtl'] .nut-rate-item-large, +.nut-rtl .nut-rate-item-large { + margin-right: calc(var(--nutui-rate-item-margin, 4rpx) * 2); } -.nut-tabs-titles-button .nut-tabs-titles-item-active .nut-tabs-titles-item-text { - background: var(--nutui-color-default-light); - color: var(--nutui-tabs-titles-item-active-color, var(--nutui-color-primary, #ff0f23)); - border-radius: var(--nutui-tabs-button-border-radius, 50rpx); - font-weight: var(--nutui-font-weight-bold, 600); - background-color: var(--nutui-tabs-button-active-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); - border: var(--nutui-tabs-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); +[dir='rtl'] .nut-rate-item-small, +.nut-rtl .nut-rate-item-small { + margin-right: calc(var(--nutui-rate-item-margin, 4rpx) - 2rpx); } -.nut-tabs-titles-divider { - border-bottom: 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)); +[dir='rtl'] .nut-rate-item:last-child, +.nut-rtl .nut-rate-item:last-child { + margin-left: 0; } -.nut-tabs-titles-divider .nut-tabs-titles-item::after { - content: ''; - position: absolute; +[dir='rtl'] .nut-rate-item-half, +.nut-rtl .nut-rate-item-half, +[dir='rtl'] .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half, +.nut-rtl .nut-rate-item-icon.nut-rate-item-icon.nut-rate-item-icon-half { + left: auto; right: 0; - top: 50%; - height: 50%; - width: 1rpx; - background: var(--nutui-color-border, rgba(0, 0, 0, 0.06)); - -ms-transform: translateY(-50%); - transform: translateY(-50%); } -.nut-tabs-vertical .nut-tabs-ellipsis { - white-space: break-spaces; - padding-left: 6rpx; - width: 90rpx; - line-height: var(--nutui-font-size-base, 14rpx); +[dir='rtl'] .nut-rate-item-icon.nut-rate-item-icon::before, +.nut-rtl .nut-rate-item-icon.nut-rate-item-icon::before { + left: auto; + right: auto; } -.nut-tabs-vertical .nut-tabs-titles { - -ms-flex-direction: column; - flex-direction: column; - height: 100%; - width: var(--nutui-tabs-vertical-titles-width, 100rpx); - -ms-flex-negative: 0; - flex-shrink: 0; +[dir='rtl'] .nut-rate-score, +.nut-rtl .nut-rate-score { + padding-left: 0; } -.nut-tabs-vertical .nut-tabs-titles-item { - height: var(--nutui-tabs-vertical-titles-item-height, 40rpx); - -ms-flex: none; - flex: none; +[dir='rtl'] .nut-rate-score-large, +.nut-rtl .nut-rate-score-large { + padding-right: calc(var(--nutui-rate-item-margin, 4rpx) * 2); } -.nut-tabs-vertical .nut-tabs-titles-item-line { - -ms-transform: translateY(-50%); - transform: translateY(-50%); - transition: height 0.3s ease; +[dir='rtl'] .nut-rate-score-normal, +.nut-rtl .nut-rate-score-normal { + padding-right: var(--nutui-rate-item-margin, 4rpx); } -.nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line { - left: 10rpx; - width: var(--nutui-tabs-vertical-tab-line-width, 3rpx); - height: var(--nutui-tabs-vertical-tab-line-height, 12rpx); - background: var( - --nutui-tabs-vertical-tab-line-color, - linear-gradient(180deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-light-pressed, #ffebf1) 100%) - ); +[dir='rtl'] .nut-rate-score-small, +.nut-rtl .nut-rate-score-small { + padding-right: calc(var(--nutui-rate-item-margin, 4rpx) - 2rpx); } -.nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { - right: -12rpx; - bottom: -2%; - left: auto; - -ms-transform: rotate(320deg); - transform: rotate(320deg); +.nut-radiogroup .nut-radio { + margin: 0 var(--nutui-radiogroup-radio-margin, 20rpx) var(--nutui-radiogroup-radio-margin-bottom, 5rpx) 0; +} +.nut-radiogroup .nut-radio-label { + margin: var(--nutui-radiogroup-radio-label-margin, 0 5rpx); +} +.nut-radiogroup .nut-radio-button { + background-color: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); +} +.nut-radiogroup .nut-radio:last-child { + margin: 0; +} +.nut-radiogroup-vertical .nut-radio.nut-radio-reverse { + width: 100%; + justify-content: space-between; +} +.nut-radiogroup-vertical .nut-radio-button { + border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); +} +.nut-radiogroup-vertical .nut-radio-button-active { + border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); + background-color: var(--nutui-color-primary-light-pressed, #ffebf1); } -.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles { - -ms-flex-direction: row; - flex-direction: row; - height: var(--nutui-tabs-titles-height, 44rpx); - width: 100%; - padding: 0 !important; +.nut-radiogroup-horizontal { + display: flex; } -.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active { - background-color: transparent; - background-color: initial; +.nut-radiogroup-horizontal .nut-radio-button { + border: 1rpx solid #ffffff; } -.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line { - left: 50%; - -ms-transform: translate(-50%); - transform: translate(-50%); - width: var(--nutui-tabs-tab-line-width, 12rpx); - height: var(--nutui-tabs-tab-line-height, 2rpx); - background: var(--nutui-tabs-tab-line-color, var(--nutui-color-primary, #ff0f23)); +.nut-radiogroup-horizontal .nut-radio-button-active { + border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); + background-color: var(--nutui-color-primary-light-pressed, #ffebf1); } -.nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { - left: 50%; - right: auto; - bottom: -3rpx; - -ms-transform: translate(-50%) rotate(0); - transform: translate(-50%) rotate(0); +.nut-radiogroup-horizontal .nut-radio:last-child { + margin: 0 var(--nutui-radiogroup-radio-margin, 20rpx) var(--nutui-radiogroup-radio-margin-bottom, 5rpx) 0; } -[dir='rtl'] .nut-tabs-titles-item-smile, -[dir='rtl'] .nut-tabs-titles-item-line, -.nut-rtl .nut-tabs-titles-item-smile, -.nut-rtl .nut-tabs-titles-item-line { - left: auto; - right: 50%; - -ms-transform: translate(50%); - transform: translate(50%); +.nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled { + background: var(--nutui-color-text-disabled, #c2c4cc); + color: #fff; + border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); } -[dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item, -.nut-rtl .nut-tabs-vertical .nut-tabs-titles-line .nut-tabs-titles-item { - padding-left: 0; - padding-right: 14rpx; +[dir='rtl'] .nut-radiogroup .nut-radio, +.nut-rtl .nut-radiogroup .nut-radio { + margin-left: var(--nutui-radiogroup-radio-margin, 20rpx); + margin-right: 0; } -[dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line, -.nut-rtl .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-line { - left: auto; - right: 10rpx; +.nut-radio { + display: flex; + align-items: center; + flex-shrink: 0; } -[dir='rtl'] .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile, -.nut-rtl .nut-tabs-vertical .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { - left: -12rpx; - right: auto; - -ms-transform: rotate(-320deg); - transform: rotate(-320deg); +.nut-radio.nut-radio-reverse { + flex-direction: row-reverse; } -[dir='rtl'] .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line, -.nut-rtl .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-line { - left: auto; - right: 50%; - -ms-transform: translate(50%); - transform: translate(50%); +.nut-radio.nut-radio-reverse .nut-radio-label { + margin-right: var(--nutui-radio-label-margin-left, 4rpx); + margin-left: 0; } -[dir='rtl'] .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-smile, -.nut-rtl .nut-tabs-vertical .nut-tabs-horizontal .nut-tabs-titles-item-active .nut-tabs-titles-item-smile { - right: 50%; - left: auto; - -ms-transform: translate(50%) rotate(0); - transform: translate(50%) rotate(0); +.nut-radio-label { + margin-left: var(--nutui-radio-label-margin-left, 4rpx); + font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-s, 12rpx)); + color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a)); } -.nut-tabpane { - width: 100%; - -ms-flex-negative: 0; - flex-shrink: 0; - display: block; - background-color: var(--nutui-tabs-tabpane-background-color, #fff); - color: var(--nutui-color-title, #1a1a1a); - padding: var(--nutui-tabs-tabpane-padding, 24rpx 20rpx); - box-sizing: border-box; - overflow: auto; +.nut-radio-label-disabled { + color: var(--nutui-radio-label-disable-color, var(--nutui-color-text-disabled, #c2c4cc)); } -.nut-table-wrapper { - display: -ms-flexbox; - display: flex; - width: 100%; - -ms-flex-direction: column; - flex-direction: column; - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-color-title, #1a1a1a); - overflow-y: auto; - overflow-x: hidden; - position: relative; - border: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +.nut-radio-icon { + color: var(--nutui-color-text-disabled, #c2c4cc); + background-color: #fff; + transition-duration: 0.3s; + transition-property: color, border-color, background-color; + font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-icon, 16rpx)); + border-radius: 50%; } -.nut-table-main { - display: table; - width: -moz-max-content; - width: max-content; - overflow-x: auto; - color: var(--nutui-color-title, #1a1a1a); - background-color: var(--nutui-color-background-overlay, #ffffff); - table-layout: fixed; - min-width: 100%; - position: relative; +.nut-radio-icon-checked { + color: var(--nutui-color-primary, #ff0f23); + background-color: #fff; + box-shadow: 0 2rpx 4rpx rgba(255, 15, 35, 0.2); + border-radius: 50%; } -.nut-table-main-head-tr-th, -.nut-table-main-body-tr-th { - display: table-cell; - padding: var(--nutui-table-cols-padding, 10rpx); - table-layout: fixed; - background: inherit; - position: sticky; - top: 0; +.nut-radio-icon-checked.nut-radio-icon-disabled { + color: var(--nutui-color-primary-disabled-special, #ffadbe); + background-color: #fff; + box-shadow: none; + border-radius: 50%; } -.nut-table-main-head-tr-td, -.nut-table-main-body-tr-td { - display: table-cell; - padding: var(--nutui-table-cols-padding, 10rpx); - table-layout: fixed; - background: inherit; +.nut-radio-icon-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-table-main-head-tr-td-nodata, -.nut-table-main-body-tr-td-nodata { - display: -ms-flexbox; +.nut-radio-button { display: flex; - height: 50rpx; - -ms-flex-align: center; + display: inline-flex; align-items: center; - -ms-flex-pack: center; - justify-content: center; + min-height: 30rpx; + padding: var(--nutui-radio-button-padding, 5rpx 18rpx); + font-size: var(--nutui-radio-button-font-size, var(--nutui-font-size-s, 12rpx)); + background: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); + border-radius: var(--nutui-radio-button-border-radius, 15rpx); + color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a)); + box-sizing: border-box; + border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); } -.nut-table-main-head-tr-border, -.nut-table-main-body-tr-border { - border-right: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - border-bottom: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +.nut-radio-button-active { + background: var(--nutui-color-primary-light-pressed, #ffebf1); + color: var(--nutui-color-primary, #ff0f23); + border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); } -.nut-table-main-head-tr-alignleft, -.nut-table-main-head-tr-align, -.nut-table-main-body-tr-alignleft, -.nut-table-main-body-tr-align { - text-align: left; +.nut-radio-button-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc); + border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); } -.nut-table-main-head-tr-alignright, -.nut-table-main-body-tr-alignright { - text-align: right; +.nut-radio .nut-radio-button-active.nut-radio-button-disabled { + background: var(--nutui-color-text-disabled, #c2c4cc); + color: #fff; + border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); } -.nut-table-sticky-left, -.nut-table-sticky-right { +[dir='rtl'] .nut-radio:last-child, +.nut-rtl .nut-radio:last-child { + margin-right: 0 !important; + margin-left: 0 !important; +} +[dir='rtl'] .nut-radio.nut-radio-reverse .nut-radio-label, +.nut-rtl .nut-radio.nut-radio-reverse .nut-radio-label { + margin-left: var(--nutui-radio-label-margin-left, 4rpx); + margin-right: 0; +} +[dir='rtl'] .nut-radio-label, +.nut-rtl .nut-radio-label { + margin-left: 0; + margin-right: var(--nutui-radio-label-margin-left, 4rpx); +} +.nut-pulltorefresh-head { + overflow: hidden; + position: relative; + font-size: 12rpx; +} +.nut-pulltorefresh-head-content { position: absolute; - top: 0; - width: 8rpx; - bottom: -1rpx; - overflow-x: hidden; - overflow-y: hidden; - box-shadow: none; - -ms-touch-action: none; - touch-action: none; - pointer-events: none; - z-index: 3; - background: transparent; + bottom: 0; + left: 0; + width: 100%; + color: var(--nutui-color-text-help, #888b94); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } -.nut-table-sticky-left { - left: 1rpx; - box-shadow: var(--nutui-table-sticky-left-shadow, 4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); +.nut-pulltorefresh-head-content-icons { + width: var(--nutui-pulltorefresh-icon-width, 36rpx); + height: var(--nutui-pulltorefresh-icon-height, 26rpx); + margin-bottom: 4rpx; } -.nut-table-sticky-right { - right: 1rpx; - box-shadow: var(--nutui-table-sticky-right-shadow, -4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); +.nut-pulltorefresh-primary { + background: var(--nutui-pulltorefresh-color-primary, var(--nutui-color-primary, #ff0f23)); } -.nut-table-fixed-left, -.nut-table-fixed-right { - position: sticky; - z-index: 2; +.nut-pulltorefresh-primary-content, +.nut-pulltorefresh-primary-head-content { + color: var(--nutui-color-text-dark, rgba(255, 255, 255, 0.9)); +} +.nut-pulltorefresh-primary-status-text { + color: #fff; } -.nut-table-fixed-left.h5-div, -.nut-table-fixed-right.h5-div { - padding: var(--nutui-table-cols-padding, 10rpx) 0; +[dir='rtl'] .nut-pulltorefresh-head-content, +.nut-rtl .nut-pulltorefresh-head-content { + left: auto; + right: 0; } -.nut-table-summary { - color: var(--nutui-color-title, #1a1a1a); - background-color: var(--nutui-color-background-overlay, #ffffff); - display: -ms-flexbox; +.nut-progress { display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; - justify-content: center; - height: 30rpx; - padding: var(--nutui-table-cols-padding, 10rpx); position: relative; - z-index: 5; -} -[dir='rtl'] .nut-table-main-head-tr-border, -[dir='rtl'] .nut-table-main-body-tr-border, -.nut-rtl .nut-table-main-head-tr-border, -.nut-rtl .nut-table-main-body-tr-border { - border-right: none; - border-left: 1rpx solid var(--nutui-table-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + width: 100%; } -[dir='rtl'] .nut-table-sticky-left, -.nut-rtl .nut-table-sticky-left { - left: auto; - right: 1rpx; - box-shadow: var(--nutui-table-sticky-right-shadow, -4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); +.nut-progress-outer { + flex: 1; + border-radius: var(--nutui-progress-border-radius, 12rpx); + height: var(--nutui-progress-height, 10rpx); + background: var(--nutui-progress-background, var(--nutui-color-background, #f2f3f5)); } -[dir='rtl'] .nut-table-sticky-right, -.nut-rtl .nut-table-sticky-right { - right: auto; - left: 1rpx; - box-shadow: var(--nutui-table-sticky-left-shadow, 4rpx 0 8rpx 0 rgba(0, 0, 0, 0.1)); +.nut-progress-outer .nut-progress-active::before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: var(--nutui-progress-border-radius, 12rpx); + animation: progressActive 2s ease-in-out infinite; } -.nut-tabbar-item { - display: -ms-flexbox; +.nut-progress-inner { + height: 100%; display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex-align: center; + justify-content: center; + transition: all 0.4s; + border-radius: var(--nutui-progress-border-radius, 12rpx); + background: var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%)); +} +.nut-progress-text { + display: flex; align-items: center; - -ms-flex: 1; - flex: 1; - padding: 6rpx 0 2rpx; - color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a)); - height: 100%; + transition: all 0.4s; + margin-left: 12rpx; + color: var(--nutui-color-text-help, #888b94); + font-family: PingFang SC; + font-size: var(--nutui-progress-text-font-size, 13rpx); } -.nut-tabbar-item .nut-icon { - width: 24rpx; - height: 24rpx; - font-size: 24rpx; - color: var(--nutui-tabbar-inactive-color, var(--nutui-color-title, #1a1a1a)); - color: inherit; +@keyframes progressActive { + 0% { + background: rgba(255, 255, 255, 0.10196); + width: 0; + } + 20% { + background: rgba(255, 255, 255, 0.50196); + width: 0; + } + to { + background: rgba(255, 255, 255, 0); + width: 100%; + } } -.nut-tabbar-item-text { - display: block; - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10rpx)); - line-height: var(--nutui-tabbar-text-font-size, var(--nutui-font-size-xxs, 10rpx)); - margin-top: var(--nutui-tabbar-text-margin-top, 4rpx); +[dir='rtl'] .nut-progress-text, +.nut-rtl .nut-progress-text { + transform: translate(50%); } -.nut-tabbar-item .nut-image-default { - width: 38rpx; - height: 38rpx; - border-radius: 38rpx; +.nut-price { + direction: ltr; + font-size: var(--nutui-font-size-l, 15rpx); + display: flex; + flex-direction: row; + align-items: baseline; } -.nut-tabbar-item-large .nut-tabbar-item-text { - font-size: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 15rpx)); - margin-top: 0; - line-height: var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-l, 15rpx)); - font-weight: var(--nutui-tabbar-text-large-font-weight, var(--nutui-font-weight, 400)); +.nut-price-symbol, +.nut-price-integer, +.nut-price-decimal { + color: var(--nutui-price-color, var(--nutui-color-text-help)); + font-family: JDZH-Bold; + line-height: 1; } -.nut-tabbar { - border: 0rpx; - box-shadow: var(--nutui-tabbar-box-shadow, none); - border-bottom: var(--nutui-tabbar-border-bottom, 0); - border-top: var(--nutui-tabbar-border-top, 0); - width: 100%; - background: var(--nutui-color-background-overlay, #ffffff); +.nut-price-darkgray .nut-price-symbol, +.nut-price-darkgray .nut-price-integer, +.nut-price-darkgray .nut-price-decimal { + font-family: JDZH-Bold; + color: var(--nutui-price-darkgray-color, var(--nutui-gray-7)); } -.nut-tabbar-wrap { - height: var(--nutui-tabbar-height, 46rpx); - display: -ms-flexbox; - display: flex; +.nut-price-primary .nut-price-symbol, +.nut-price-primary .nut-price-integer, +.nut-price-primary .nut-price-decimal { + font-family: JDZH-Bold; + color: var(--nutui-price-color, var(--nutui-color-primary, #ff0f23)); } -.nut-tabbar-wrap-3 { - padding: 0 16rpx; +.nut-price-symbol { + padding-right: var(--nutui-price-symbol-padding-right, 0rpx); } -.nut-tabbar-wrap-2 { - padding: 0 32rpx; +.nut-price-symbol-xlarge { + font-size: var(--nutui-price-symbol-xlarge-size, 12rpx); } -.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-icon { - width: 20rpx; - height: 20rpx; +.nut-price-symbol-large { + font-size: var(--nutui-price-symbol-large-size, 12rpx); } -.nut-tabbar-wrap-horizontal .nut-tabbar-item .nut-tabbar-item-text { - margin: 0 4rpx 0 6rpx; - font-size: 14rpx; +.nut-price-symbol-normal { + font-size: var(--nutui-price-symbol-normal-size, 12rpx); } -.nut-switch { - cursor: pointer; - position: relative; - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - min-width: var(--nutui-switch-width, 46rpx); - height: var(--nutui-switch-height, 28rpx); - line-height: var(--nutui-switch-line-height, 28rpx); - background-color: var(--nutui-switch-active-background-color, var(--nutui-color-primary, #ff0f23)); - border-radius: var(--nutui-switch-border-radius, 50rpx); - background-size: 100% 100%; - background-repeat: no-repeat; - background-position: center center; - -ms-flex: 0 0 auto; - flex: 0 0 auto; +.nut-price-symbol-small { + font-size: var(--nutui-price-symbol-small-size, 12rpx); } -.nut-switch-button { - position: absolute; - top: 50%; - -ms-transform: translateY(-50%); - transform: translateY(-50%); - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - height: calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2); - width: calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2); - border-radius: var(--nutui-switch-inside-border-radius, 50%); - background: #fff; - transition: left 0.3s linear; - box-shadow: var(--nutui-switch-inside-box-shadow, 0rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.1)); +.nut-price-symbol-rtl { + padding-right: 0; + padding-left: var(--nutui-price-symbol-padding-right, 0rpx); } -.nut-switch-button-open { - left: calc(100% - var(--nutui-switch-height, 28rpx) + var(--nutui-switch-border-width, 2rpx)); +.nut-price-integer-xlarge { + font-size: var(--nutui-price-integer-xlarge-size, 24rpx); + line-height: var(--nutui-price-integer-xlarge-size, 24rpx); } -.nut-switch-button-open-rtl, -.nut-switch-button-close { - left: var(--nutui-switch-border-width, 2rpx); +.nut-price-integer-large { + font-size: var(--nutui-price-integer-large-size, 18rpx); + line-height: var(--nutui-price-integer-large-size, 18rpx); } -.nut-switch-button-close-rtl { - left: calc(100% - var(--nutui-switch-height, 28rpx) + var(--nutui-switch-border-width, 2rpx)); +.nut-price-integer-normal { + font-size: var(--nutui-price-integer-normal-size, 16rpx); + line-height: var(--nutui-price-integer-normal-size, 16rpx); } -.nut-switch-button .nut-icon { - width: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); - height: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); - color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ffadbe)); +.nut-price-integer-small { + font-size: var(--nutui-price-integer-small-size, 12rpx); } -.nut-switch-close-line { - width: calc((var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) * 2) / 2); - height: 2rpx; - background: var(--nutui-switch-inactive-line-background-color, #ffffff); - border-radius: 2rpx; +.nut-price-decimal-xlarge { + font-size: var(--nutui-price-decimal-xlarge-size, 12rpx); } -.nut-switch-label { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - height: 100%; - white-space: nowrap; - color: var(--nutui-switch-label-text-color, #ffffff); - font-size: var(--nutui-switch-label-font-size, var(--nutui-font-size-s, 12rpx)); +.nut-price-decimal-large { + font-size: var(--nutui-price-decimal-large-size, 12rpx); } -.nut-switch-label-open { - margin: 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx) 0 7rpx; +.nut-price-decimal-normal { + font-size: var(--nutui-price-decimal-normal-size, 12rpx); +} +.nut-price-decimal-small { + font-size: var(--nutui-price-decimal-small-size, 12rpx); } -.nut-switch-label-open-rtl, -.nut-switch-label-close { - margin: 0 7rpx 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx); +.nut-price-line { + text-decoration: line-through var(--nutui-price-line-color, var(--nutui-color-text-help)); } -.nut-switch-label-close-rtl { - margin: 0 calc(var(--nutui-switch-height, 28rpx) - var(--nutui-switch-border-width, 2rpx) + 3rpx) 0 7rpx; +.nut-popup { + position: fixed; + min-height: 26%; + max-height: 100%; + background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff)); + -webkit-overflow-scrolling: touch; + font-size: var(--nutui-font-size-base, 14rpx); } -.nut-swiper-indicator { - display: -ms-flexbox; +.nut-popup-title { display: flex; - -ms-flex-direction: row; flex-direction: row; - -ms-flex-pack: center; + align-items: center; justify-content: center; - position: absolute; - height: 4rpx; - width: 100%; - top: 89.33%; - z-index: 10; + border-bottom: var(--nutui-popup-title-border-bottom, 0); + padding: var(--nutui-popup-title-padding, 16rpx); + position: relative; } -.nut-swiper-indicator-vertical { - width: 8rpx; - height: 100%; - top: 0; - left: 12rpx; - -ms-flex-direction: column; +.nut-popup-title-wrapper { + display: flex; flex-direction: column; - -ms-flex-pack: center; justify-content: center; + align-items: center; +} +.nut-popup-title-title { + color: var(--nutui-color-title, #1a1a1a); + font-weight: var(--nutui-font-weight-bold, 600); + font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); + line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); +} +.nut-popup-title-description { + color: var(--nutui-color-text, #505259); + font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14rpx)); + font-weight: var(--nutui-font-weight, 400); +} +.nut-popup-title-description-gap { + margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base, 8rpx)); +} +.nut-popup-title-left { + position: absolute; + top: var(--nutui-popup-title-padding, 16rpx); + left: var(--nutui-popup-title-padding, 16rpx); +} +.nut-popup-title-right { + position: absolute; + top: var(--nutui-popup-title-padding, 16rpx); + right: var(--nutui-popup-title-padding, 16rpx); z-index: 1; + width: var(--nutui-popup-icon-size, 20rpx); + height: var(--nutui-popup-icon-size, 20rpx); + color: var(--nutui-color-title, #1a1a1a); + cursor: pointer; } -[dir='rtl'] .nut-swiper-indicator-vertical, -.nut-rtl .nut-swiper-indicator-vertical { - left: auto; - right: 12rpx; +.nut-popup-title-right-top-left { + top: var(--nutui-popup-title-padding, 16rpx); + left: var(--nutui-popup-title-padding, 16rpx); } -.nut-swipe-wrapper { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-pack: start; - justify-content: flex-start; - -ms-flex-item-align: stretch; - align-self: stretch; - width: 100%; - transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1); - transition-property: transform; +.nut-popup-title-right-bottom-left { + bottom: var(--nutui-popup-title-padding, 16rpx); + left: var(--nutui-popup-title-padding, 16rpx); } -.nut-swipe-left { - left: 0; - -ms-transform: translate(-100%); - transform: translate(-100%); +.nut-popup-title-right-bottom-right { + right: var(--nutui-popup-title-padding, 16rpx); + bottom: var(--nutui-popup-title-padding, 16rpx); } -.nut-swipe-right { - right: 0; - -ms-transform: translate(100%); - transform: translate(100%); +.nut-popup-center { + top: 50%; + left: 50%; + min-height: 10%; + max-width: 295rpx; + transform: translate(-50%, -50%); } -.nut-steps-horizontal .nut-step-head-icon .nut-icon { - height: 10rpx; - width: 10rpx; +.nut-popup-center.nut-popup-round { + border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); } -.nut-steps-horizontal .nut-step-head-icon .nut-image .h5-img { - vertical-align: top; +.nut-popup-bottom { + bottom: 0; + left: 0; + width: 100%; } -.nut-steps-horizontal-single .nut-step { - padding-right: var(--nutui-steps-horizontal-item-padding-right, 28rpx); +.nut-popup-bottom.nut-popup-round { + border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0 0; } -.nut-steps-horizontal-single .nut-step-line { +.nut-popup-bottom-top { + position: absolute; +} +.nut-popup-right { top: 0; right: 0; - height: var(--nutui-steps-base-head-height, 14rpx); - width: var(--nutui-steps-horizontal-item-padding-right, 28rpx); - padding: var(--nutui-steps-horizontal-item-line-padding, 0 8rpx); - box-sizing: border-box; -} -.nut-steps-horizontal-single .nut-step-title, -.nut-steps-horizontal-single .nut-step-description { - padding-left: 4rpx; + width: 100rpx; + height: 100%; } -.nut-steps-horizontal-single .nut-step-special { - padding-right: var(--nutui-steps-horizontal-item-special-padding-right, 22rpx); +.nut-popup-right.nut-popup-round { + border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); } -.nut-steps-horizontal-single .nut-step-special .nut-step-title { - padding-right: 8rpx; - width: -moz-fit-content; - width: fit-content; +.nut-popup-left { + top: 0; + left: 0; + width: 100rpx; + height: 100%; } -.nut-steps-horizontal-single.nut-steps-horizontal-count-3 .nut-step-special { - padding-right: var(--nutui-steps-horizontal-item-special-3-padding-right, 9rpx); +.nut-popup-left.nut-popup-round { + border-radius: 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0; } -.nut-steps-horizontal-double .nut-step-line { +.nut-popup-top { top: 0; - right: -50%; - height: var(--nutui-steps-base-head-height, 14rpx); + left: 0; width: 100%; } -.nut-steps-horizontal-double .nut-step-line-inner { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - height: var(--nutui-steps-base-line-height, 1rpx); - width: 100%; - background: var(--nutui-steps-base-line-background, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +.nut-popup-top.nut-popup-round { + border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); } -.nut-steps-horizontal-double .nut-step-head { - -ms-flex-pack: center; - justify-content: center; - margin-bottom: 6rpx; +@keyframes popup-scale-fade-in { + 0% { + opacity: 0; + transform: scale(0.8); + } + to { + opacity: 1; + transform: scale(1); + } } -.nut-steps-horizontal-double .nut-step-head-dot-wrap, -.nut-steps-horizontal-double .nut-step-head-icon-wrap, -.nut-steps-horizontal-double .nut-step-head-text-wrap { - background-color: var(--nutui-steps-background-color, #ffffff); - padding: var(--nutui-steps-horizontal-item-line-padding, 0 8rpx); +@keyframes popup-scale-fade-out { + 0% { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.8); + } } -.nut-steps-horizontal-double .nut-step-head-icon { - height: var(--nutui-steps-base-head-icon-size-right, 20rpx); - width: var(--nutui-steps-base-head-icon-size-right, 20rpx); +.nut-popup-slide-none-enter-active { + animation-fill-mode: both; + animation-name: popup-scale-fade-in; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-horizontal-double .nut-step-head-icon .nut-icon { - height: 12rpx; - width: 12rpx; +.nut-popup-slide-none-exit-active { + animation-fill-mode: both; + animation-name: popup-scale-fade-out; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-horizontal-double .nut-step-main { - -ms-flex-align: center; - align-items: center; - margin-left: 0; - margin-top: 2rpx; +@keyframes popup-fade-in { + 0% { + opacity: 0; + } + to { + opacity: 1; + } } -.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-head, -.nut-steps-horizontal-double.nut-steps-horizontal-icon .nut-step-line { - height: var(--nutui-steps-base-head-icon-size-right, 20rpx); +@keyframes popup-fade-out { + 0% { + opacity: 1; + } + to { + opacity: 0; + } } -.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-head, -.nut-steps-horizontal-double.nut-steps-horizontal-dot .nut-step-line { - height: var(--nutui-steps-base-head-dot-size, 6rpx); +.nut-popup-slide-center-enter-active { + animation-fill-mode: both; + animation-name: popup-fade-in; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-head, -.nut-steps-horizontal-double.nut-steps-horizontal-text .nut-step-line { - height: var(--nutui-steps-base-head-text-size, 12rpx); +.nut-popup-slide-center-exit-active { + animation-fill-mode: both; + animation-name: popup-fade-out; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); +} +@keyframes popup-slide-top-enter { + 0% { + transform: translate3d(0, -100%, 0); + } + to { + transform: translateZ(0); + } +} +@keyframes popup-slide-top-exit { + to { + transform: translate3d(0, -100%, 0); + } } -.nut-steps-vertical .nut-step { - padding-bottom: var(--nutui-steps-vertical-item-padding-bottom, 13rpx); +.nut-popup-slide-top-enter-active, +.nut-popup-slide-top-appear-active { + transform: translateZ(0); + animation-fill-mode: both; + animation-name: popup-slide-top-enter; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-vertical .nut-step-line { - height: calc(100% - 4rpx); - width: 1rpx; - bottom: 0; +.nut-popup-slide-top-exit-active { + animation-fill-mode: both; + animation-name: popup-slide-top-exit; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-vertical .nut-step-head { - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - height: 18rpx; +@keyframes popup-slide-right-enter { + 0% { + transform: translate3d(100%, 0, 0); + } + to { + transform: translateZ(0); + } } -.nut-steps-vertical .nut-step-head-icon { - width: var(--nutui-steps-vertical-item-icon-size, 20rpx); - height: var(--nutui-steps-vertical-item-icon-size, 20rpx); +@keyframes popup-slide-right-exit { + to { + transform: translate3d(100%, 0, 0); + } } -.nut-steps-vertical .nut-step-head-icon .nut-icon { - height: 12rpx; - width: 12rpx; +.nut-popup-slide-right-enter-active, +.nut-popup-slide-right-appear-active { + transform: translateZ(0); + animation-fill-mode: both; + animation-name: popup-slide-right-enter; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-vertical .nut-step-main { - -ms-flex: 1; - flex: 1; - min-width: 0; - height: auto; - margin-left: 8rpx; +.nut-popup-slide-right-exit { + animation-fill-mode: both; + animation-name: popup-slide-right-exit; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-vertical .nut-step-title { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-steps-vertical-line-height, 18rpx); - font-size: var(--nutui-steps-vertical-title-font-size, var(--nutui-font-size-l, 15rpx)); - overflow: auto; - font-weight: 500; - margin-bottom: var(--nutui-steps-vertical-title-margin-bottom, 4rpx); +@keyframes popup-slide-bottom-enter { + 0% { + transform: translate3d(0, 100%, 0); + } + to { + transform: translateZ(0); + } } -.nut-steps-vertical .nut-step-description { - margin: var(--nutui-steps-vertical-description-margin, 0 0 1rpx); - height: auto; - line-height: var(--nutui-steps-vertical-line-height, 18rpx); - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-steps-vertical-description-font-size, var(--nutui-font-size-base, 14rpx)); - box-sizing: border-box; +@keyframes slide-bottom-exit { + to { + transform: translate3d(0, 100%, 0); + } } -.nut-steps-vertical .nut-step-head-dot-wrap { - height: calc(var(--nutui-steps-base-head-dot-size, 6rpx) + 8rpx); +.nut-popup-slide-bottom-enter-active, +.nut-popup-slide-bottom-appear-active { + transform: translate(0); + animation-fill-mode: both; + animation-name: popup-slide-bottom-enter; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-vertical .nut-step-head-icon-wrap { - height: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 8rpx); +.nut-popup-slide-bottom-exit { + animation-fill-mode: both; + animation-name: slide-bottom-exit; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-vertical .nut-step-head-text-wrap { - height: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 8rpx); +@keyframes popup-slide-left-enter { + 0% { + transform: translate3d(-100%, 0, 0); + } + to { + transform: translateZ(0); + } } -.nut-steps-vertical-icon .nut-step-head { - width: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 1rpx); - min-width: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) + 1rpx); +@keyframes popup-slide-left-exit { + to { + transform: translate3d(-100%, 0, 0); + } } -.nut-steps-vertical-icon .nut-step-line { - left: calc(var(--nutui-steps-vertical-item-icon-size, 20rpx) / 2); +.nut-popup-slide-left-enter-active, +.nut-popup-slide-left-appear-active { + transform: translate(0); + animation-fill-mode: both; + animation-name: popup-slide-left-enter; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-vertical-dot .nut-step-head { - width: calc(var(--nutui-steps-base-head-dot-size, 6rpx) + 1rpx); +.nut-popup-slide-left-exit-active, +.nut-popup-slide-left-exit-done { + animation-fill-mode: both; + animation-name: popup-slide-left-exit; + animation-duration: var(--nutui-popup-animation-duration, 0.3s); } -.nut-steps-vertical-dot .nut-step-line { - left: calc(var(--nutui-steps-base-head-dot-size, 6rpx) / 2); +.nut-popup-slide-none-exit-done.nut-popup, +.nut-popup-slide-center-exit-done.nut-popup, +.nut-popup-slide-left-exit-done.nut-popup, +.nut-popup-slide-right-exit-done.nut-popup, +.nut-popup-slide-top-exit-done.nut-popup, +.nut-popup-slide-bottom-exit-done.nut-popup { + display: none; } -.nut-steps-vertical-text .nut-step-head { - width: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 1rpx); - min-width: calc(var(--nutui-steps-base-head-text-size, 12rpx) + 1rpx); +.nut-popup .nut-overflow-hidden { + overflow: hidden; } -.nut-steps-vertical-text .nut-step-line { - left: calc(var(--nutui-steps-base-head-text-size, 12rpx) / 2); +[dir='rtl'] .nut-popup-title-left, +.nut-rtl .nut-popup-title-left { + left: auto; + right: var(--nutui-popup-title-padding, 16rpx); } -.nut-step-head { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-steps-base-head-height, 14rpx); - position: relative; - z-index: 1; +[dir='rtl'] .nut-popup-title-right, +.nut-rtl .nut-popup-title-right { + right: auto; + left: var(--nutui-popup-title-padding, 16rpx); } -.nut-step-head-text { - height: var(--nutui-steps-base-head-text-size, 12rpx); - width: var(--nutui-steps-base-head-text-size, 12rpx); - background-color: var(--nutui-steps-base-head-background-color, var(--nutui-color-background, #f2f3f5)); - color: var(--nutui-steps-base-head-color, var(--nutui-color-text, #505259)); - font-size: var(--nutui-steps-base-icon-size, var(--nutui-font-size-xxs, 10rpx)); +[dir='rtl'] .nut-popup-title-right-top-left, +.nut-rtl .nut-popup-title-right-top-left, +[dir='rtl'] .nut-popup-title-right-bottom-left, +.nut-rtl .nut-popup-title-right-bottom-left { + left: auto; + right: var(--nutui-popup-title-padding, 16rpx); } -.nut-step-head-icon { - height: var(--nutui-steps-base-head-icon-size, 16rpx); - width: var(--nutui-steps-base-head-icon-size, 16rpx); - background-color: var(--nutui-steps-base-head-background-color, var(--nutui-color-background, #f2f3f5)); +[dir='rtl'] .nut-popup-title-right-bottom-right, +.nut-rtl .nut-popup-title-right-bottom-right { + right: auto; + left: var(--nutui-popup-title-padding, 16rpx); } -.nut-step-head-dot { - height: var(--nutui-steps-base-head-dot-size, 6rpx); - width: var(--nutui-steps-base-head-dot-size, 6rpx); - background-color: var(--nutui-steps-base-head-dot-background-color, var(--nutui-color-text-disabled, #c2c4cc)); +[dir='rtl'] .nut-popup-title .nut-icon-ArrowLeft, +.nut-rtl .nut-popup-title .nut-icon-ArrowLeft { + transform: rotate(180deg); } -.nut-step-line-inner { - display: -ms-flexbox; - display: flex; - -ms-flex: 1; - flex: 1; - height: var(--nutui-steps-base-line-height, 1rpx); - background: var(--nutui-steps-base-line-background, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +[dir='rtl'] .nut-popup-center, +.nut-rtl .nut-popup-center { + left: auto; + right: 50%; + transform: translate(50%, -50%); } -.nut-step-main { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: center; - justify-content: center; - min-height: var(--nutui-steps-base-head-height, 14rpx); +[dir='rtl'] .nut-popup-bottom, +.nut-rtl .nut-popup-bottom, +[dir='rtl'] .nut-popup-top, +.nut-rtl .nut-popup-top { + left: auto; + right: 0; } -.nut-step-title { - height: 14rpx; - line-height: 14rpx; - font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-size-s, 12rpx)); - color: var(--nutui-steps-base-title-color, var(--nutui-color-title, #1a1a1a)); - overflow: hidden; - white-space: nowrap; +.nut-popover { + position: absolute; + display: inline-block; + word-break: normal; } -.nut-step-description { - height: 16rpx; - line-height: 16rpx; - margin-top: var(--nutui-steps-base-title-margin-bottom, 2rpx); - font-size: var(--nutui-steps-base-description-font-size, var(--nutui-font-size-xxs, 10rpx)); - color: var(--nutui-steps-base-description-color, var(--nutui-color-text-help, #888b94)); - overflow: hidden; +.nut-popover-arrow { + position: absolute; + width: 8rpx; + height: 4rpx; } -.nut-space-vertical-item { - margin-bottom: var(--nutui-space-gap, 8rpx); +.nut-popover-arrow .nut-icon-ArrowRadius { + position: absolute; + color: var(--nutui-popover-content-background-color, #ffffff); } -.nut-space-horizontal-item { - margin-right: var(--nutui-space-gap, 8rpx); +.nut-popover-arrow-top { + bottom: -4rpx; } -.nut-space-horizontal-wrap { - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-bottom: calc(var(--nutui-space-gap, 8rpx) * -1); +.nut-popover-arrow-bottom { + top: -4rpx; +} +.nut-popover-arrow-left { + right: -6rpx; + transform-origin: center top; } -.nut-space-horizontal-wrap-item { - padding-bottom: var(--nutui-space-gap, 8rpx); +.nut-popover-arrow-left.nut-popover-arrow-left { + top: 50%; + transform: rotate(90deg) translateY(-50%); } -[dir='rtl'] .nut-space-horizontal > .nut-space-item, -.nut-rtl .nut-space-horizontal > .nut-space-item { - margin-right: 0; - margin-left: var(--nutui-space-gap, 8rpx); +.nut-popover-arrow-left.nut-popover-arrow-left-top { + top: 16rpx; + right: -8rpx; + transform: rotate(90deg) translateY(0); } -.nut-skeleton { - line-height: 0rpx; - font-size: 0rpx; +.nut-popover-arrow-left.nut-popover-arrow-left-bottom { + top: auto; + bottom: 16rpx; + right: -8rpx; + transform: rotate(90deg) translateY(0); } -.nut-skeleton-content { - position: relative; - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - width: var(--nutui-skeleton-line-width, 100%); - background: var(--nutui-skeleton-background, var(--nutui-color-background-sunken, #f7f8fc)); - border-radius: var(--nutui-skeleton-line-border-radius, var(--nutui-radius-xs, 4rpx)); - overflow: hidden; +.nut-popover-arrow-right { + transform-origin: center top; } -.nut-skeleton-content-normal { - height: var(--nutui-skeleton-line-normal-height, 24rpx); +.nut-popover-arrow-right.nut-popover-arrow-right { + top: 50%; + left: -6rpx; + transform: rotate(-90deg) translateY(-50%); } -.nut-skeleton-content-large { - height: var(--nutui-skeleton-line-large-height, 32rpx); +.nut-popover-arrow-right.nut-popover-arrow-right-top { + top: 16rpx; + left: -8rpx; + transform: rotate(-90deg) translateY(0); } -.nut-skeleton-content-small { - height: var(--nutui-skeleton-line-small-height, 16rpx); - margin-top: 8rpx; +.nut-popover-arrow-right.nut-popover-arrow-right-bottom { + bottom: 16rpx; + left: -8rpx; + transform: rotate(-90deg) translateY(0); } -.nut-skeleton-animation { +.nut-popover .nut-popover-content { position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1; - background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0.01961)), to(rgba(0, 0, 0, 0))); - background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.01961), rgba(0, 0, 0, 0)); - background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.01961), rgba(0, 0, 0, 0)); - animation-name: nut-skeleton; - animation-delay: 0s; - animation-duration: 0.6s; - animation-direction: normal; - animation-fill-mode: both; - animation-play-state: running; - animation-iteration-count: 1; - animation-timing-function: linear; + background: var(--nutui-popover-content-background-color, #ffffff); + border-radius: var(--nutui-popover-border-radius, var(--nutui-radius-xs, 4rpx)); + font-size: var(--nutui-popover-font-size, var(--nutui-font-size-s, 12rpx)); + color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); + line-height: 28rpx; + max-height: none; + max-height: initial; + overflow-y: visible; + overflow-y: initial; } -@keyframes nut-skeleton { - 0% { - transform: translate(-100%); - } - to { - transform: translate(100%); - } +.nut-popover .nut-popover-content-group { + padding: 0 var(--nutui-popover-padding, 8rpx); } -[dir='rtl'] .nut-skeleton-animation, -.nut-rtl .nut-skeleton-animation { - left: auto; - right: 0; - animation: nut-skeleton-rtl 2s linear 0s infinite; +.nut-popover .nut-popover-content .nut-popover-item { + display: flex; + align-items: center; + justify-content: center; + border-bottom: 1rpx solid var(--nutui-popover-divider-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + max-width: var(--nutui-popover-item-width, 160rpx); + word-wrap: break-word; } -@keyframes nut-skeleton-rtl { - 0% { - transform: translate(100%); - } - to { - transform: translate(-100%); - } +.nut-popover .nut-popover-content .nut-popover-item:last-child { + margin-bottom: 0; + border-bottom: none; } -.nut-signature-inner { - display: -ms-flexbox; +.nut-popover .nut-popover-content .nut-popover-item-icon, +.nut-popover .nut-popover-content .nut-popover-item-action-icon { display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; - height: var(--nutui-signature-height, 10rem); - border: var(--nutui-signature-border-width, 1rpx) solid var(--nutui-signature-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - background-color: var(--nutui-signature-background-color, var(--nutui-color-background-overlay, #ffffff)); + width: var(--nutui-font-size-s, 12rpx); + height: var(--nutui-font-size-s, 12rpx); + font-size: var(--nutui-font-size-s, 12rpx); } -.nut-signature-unsupport { - font-size: var(--nutui-signature-font-size, var(--nutui-font-size-base, 14rpx)); +.nut-popover .nut-popover-content .nut-popover-item-icon .nut-icon, +.nut-popover .nut-popover-content .nut-popover-item-action-icon .nut-icon { + width: var(--nutui-font-size-s, 12rpx); + height: var(--nutui-font-size-s, 12rpx); + font-size: var(--nutui-font-size-s, 12rpx); } -.nut-sidebaritem { - width: 100%; - height: 100%; - -ms-flex-negative: 0; - flex-shrink: 0; - display: block; - background-color: var(--nutui-sidebar-item-background, #ffffff); - color: var(--nutui-color-title, #1a1a1a); - padding: var(--nutui-sidebar-item-padding, 24rpx 20rpx); - box-sizing: border-box; - overflow: auto; +.nut-popover .nut-popover-content .nut-popover-item-icon { + margin-right: var(--nutui-spacing-xxs, 4rpx); } -.nut-sidebar-titles { - background: var(--nutui-sidebar-background-color, var(--nutui-color-background, #f2f3f5)); - -ms-flex-direction: column; - flex-direction: column; - border-radius: var(--nutui-sidebar-border-radius, 0); - height: 100%; - width: var(--nutui-sidebar-width, 104rpx); - max-width: var(--nutui-sidebar-max-width, 128rpx); - -ms-flex-negative: 0; - flex-shrink: 0; +.nut-popover .nut-popover-content .nut-popover-item-name { + width: calc(100% - 34rpx); + word-break: keep-all; + flex: 1; } -.nut-sidebar-titles-item { - cursor: pointer; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - height: var(--nutui-sidebar-title-height, 52rpx); - font-size: var(--nutui-sidebar-inactive-font-size, var(--nutui-font-size-base, 14rpx)); +.nut-popover .nut-popover-content .nut-popover-item-action-icon { color: var(--nutui-color-text, #505259); + margin-left: var(--nutui-spacing-base, 8rpx); } -.nut-sidebar-titles-item-text { - text-align: center; - white-space: normal; - width: var(--nutui-sidebar-width, 104rpx); +.nut-popover .nut-popover-content .nut-popover-item.nut-popover-item-disabled { + color: var(--nutui-popover-disable-color, var(--nutui-color-text-disabled, #c2c4cc)); + cursor: not-allowed; } -.nut-sidebar-titles-item-active .nut-sidebar-titles-item-text { - font-family: PingFangSC-Semibold; - color: var(--nutui-sidebar-active-color, var(--nutui-color-primary, #ff0f23)); - font-weight: var(--nutui-sidebar-active-font-weight, var(--nutui-font-weight-bold, 600)); - font-size: var(--nutui-sidebar-active-font-size, var(--nutui-font-size-l, 15rpx)); +.nut-popover .nut-popover-content .nut-popover-item.nut-popover-taroitem { + display: flex; } -.nut-shortpassword-popup { - padding: 32rpx 24rpx 28rpx; - border-radius: 12rpx; - text-align: center; +.nut-popover .nut-popover-content-top .nut-popover-arrow-top { + left: 50%; + transform-origin: center left; + transform: rotate(180deg) translate(-50%); } -.nut-shortpassword-title { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - line-height: 1; - font-size: var(--nutui-font-size-l, 15rpx); - color: var(--nutui-color-title, #1a1a1a); +.nut-popover .nut-popover-content-top-right { + right: 0; } -.nut-shortpassword-description { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - margin-top: 12rpx; - margin-bottom: 24rpx; - line-height: 1; - font-size: var(--nutui-font-size-s, 12rpx); - color: var(--nutui-color-text, #505259); +.nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right { + right: 16rpx; + bottom: -3.5rpx; + transform: rotate(180deg) translate(0); } -.nut-shortpassword-input { - padding: 0 0 10rpx; - text-align: center; - position: relative; - overflow: hidden; +.nut-popover .nut-popover-content-top-left { + left: 0; } -.nut-shortpassword-input-real { - position: absolute; - right: 0; - width: 247rpx; - height: 41rpx; - outline: 0 none; - border: 0; - text-decoration: none; - z-index: -99; +.nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left { + left: 16rpx; + bottom: -3.5rpx; + transform: rotate(180deg) translate(0); } -.nut-shortpassword-input-site { - width: 247rpx; - height: 41rpx; - border-radius: 4rpx; +.nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom { + left: 50%; + transform: translate(-50%); } -.nut-shortpassword-input-fake { - top: 5%; - width: 100%; - height: 41rpx; - margin: 0 auto; - box-sizing: border-box; - background: var(--nutui-shortpassword-background-color, var(--nutui-color-background, #f2f3f5)); - border-radius: 4rpx; - border: 1rpx solid var(--nutui-shortpassword-border-color, var(--nutui-color-background, #f2f3f5)); - display: -ms-flexbox; - display: flex; - position: absolute; +.nut-popover .nut-popover-content-bottom-right { + right: 0; +} +.nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right { + right: 16rpx; + transform: translate(0); +} +.nut-popover .nut-popover-content-bottom-left { left: 0; } -.nut-shortpassword-input-fake-li-icon { - height: 6rpx; - width: 6rpx; - border-radius: 50%; - background: #000; - display: inline-block; +.nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left { + left: 16rpx; + transform: translate(0); } -.nut-shortpassword-message { - margin-top: 9rpx; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - justify-content: space-between; - width: 247rpx; +.nut-popover .nut-popover-content-left-bottom { + bottom: 0; } -.nut-shortpassword-message-error { - line-height: 1; - font-size: var(--nutui-font-size-xs, 11rpx); - color: var(--nutui-shortpassword-error, var(--nutui-color-primary, #ff0f23)); +.nut-popover .nut-popover-content-left-top { + top: 0; } -.nut-shortpassword-message-forget { - line-height: 1; - font-size: var(--nutui-font-size-s, 12rpx); - color: var(--nutui-shortpassword-forget, var(--nutui-color-text-help, #888b94)); - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; +.nut-popover .nut-popover-content-right-bottom { + bottom: 0; } -.nut-shortpassword-message-forget .nut-icon { - margin-right: 3rpx; +.nut-popover .nut-popover-content-right-top { + top: 0; } -.nut-shortpassword-footer { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - justify-content: space-between; - margin-top: 20rpx; +.nut-popover-dark { + background: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); + color: var(--nutui-popover-content-background-color, #ffffff); } -.nut-shortpassword-footer-cancel { - background: #fff; - border: 1rpx solid var(--nutui-color-primary, #ff0f23); - border-radius: 15rpx; - padding: 8rpx 38rpx; - line-height: 1; - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-color-primary, #ff0f23); +.nut-popover-dark .nut-popover-arrow .nut-icon-ArrowRadius { + color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); } -.nut-shortpassword-footer-sure { - background: -webkit-linear-gradient(315deg, var(--nutui-color-primary, #ff0f23) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); - background: linear-gradient(135deg, var(--nutui-color-primary, #ff0f23) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); - border-radius: 15rpx; - padding: 8rpx 38rpx; - line-height: 1; - font-size: var(--nutui-font-size-base, 14rpx); - color: #fff; +.nut-popover-dark .nut-popover-content { + background: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))) !important; + color: var(--nutui-popover-content-background-color, #ffffff) !important; } -.nut-segmented { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - height: var(--nutui-segmented-height, 24rpx); - min-width: 24rpx; - padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, 2rpx)); - -ms-flex-align: center; - align-items: center; - border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs, 4rpx)); - background: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)); - box-sizing: border-box; +.nut-popover-dark .nut-popover-content .nut-popover-item-action-icon { + color: rgba(255, 255, 255, 0.8); } -.nut-segmented-item { - display: -ms-flexbox; - display: flex; - height: var(--nutui-segmented-height, 20rpx); - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - padding: var(--nutui-segmented-item-padding, 0 var(--nutui-spacing-xs, 6rpx)); - border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs, 4rpx)); - color: var(--nutui-segmented-item-color, #ffffff); - font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-size-s, 12rpx)); - line-height: 1; - box-sizing: border-box; +[dir='rtl'] .nut-popover .nut-popover-content .nut-popover-item-name, +.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-name { + margin-left: 0; + margin-right: 4rpx; } -.nut-segmented-icon { - height: 10rpx; - width: 10rpx; - margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs, 2rpx)); +[dir='rtl'] .nut-popover .nut-popover-content .nut-popover-item-action-icon, +.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-action-icon { + right: auto; } -.nut-segmented-icon .nut-icon { - height: 10rpx; - width: 10rpx; - font-size: 10rpx; +[dir='rtl'] .nut-popover .nut-popover-content-top .nut-popover-arrow-top, +.nut-rtl .nut-popover .nut-popover-content-top .nut-popover-arrow-top { + left: auto; + right: 50%; + transform: translate(50%); } -.nut-searchbar { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - width: var(--nutui-searchbar-width, 100%); - padding: var(--nutui-searchbar-padding, 1rpx 8rpx); - background: var(--nutui-searchbar-background, var(--nutui-color-background-sunken, #f7f8fc)); - color: var(--nutui-searchbar-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14rpx)); - box-sizing: border-box; - -ms-flex-pack: center; - justify-content: center; +[dir='rtl'] .nut-popover .nut-popover-content-top-right, +.nut-rtl .nut-popover .nut-popover-content-top-right { + right: auto; + left: 0; } -.nut-searchbar .nut-icon { - width: var(--nutui-searchbar-icon-size, 20rpx); - height: var(--nutui-searchbar-icon-size, 20rpx); - font-size: var(--nutui-searchbar-icon-size, 20rpx); +[dir='rtl'] .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right, +.nut-rtl .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right { + right: auto; + left: 16rpx; } -.nut-searchbar-content { - position: relative; - -ms-flex: 1; - flex: 1; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - padding: 0 var(--nutui-searchbar-gap, 12rpx); - height: var(--nutui-searchbar-input-height, 38rpx); - background: var(--nutui-searchbar-content-background, var(--nutui-color-background-overlay, #ffffff)); - border-radius: var(--nutui-searchbar-content-border-radius, 8rpx); - border: 1rpx solid var(--nutui-color-primary, #ff0f23); +[dir='rtl'] .nut-popover .nut-popover-content-top-left, +.nut-rtl .nut-popover .nut-popover-content-top-left { + left: auto; + right: 0; } -.nut-searchbar-leftin { - margin-right: var(--nutui-searchbar-inner-gap, 8rpx); +[dir='rtl'] .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left, +.nut-rtl .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left { + left: auto; + right: 16rpx; } -.nut-searchbar-rightin { - font-size: 15rpx; - font-weight: 500; - color: var(--nutui-color-primary, #ff0f23); +[dir='rtl'] .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom, +.nut-rtl .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom { + left: auto; + right: 50%; + transform: translate(50%); } -.nut-searchbar-input { - border: 0; - outline: 0; - box-sizing: border-box; - width: 100%; - padding: 0; - margin: 0; - font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-searchbar-input-text-color, var(--nutui-color-title, #1a1a1a)); - caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-color-primary, #ff0f23)); - background: transparent; - text-align: var(--nutui-searchbar-input-text-align, left); +[dir='rtl'] .nut-popover .nut-popover-content-bottom-right, +.nut-rtl .nut-popover .nut-popover-content-bottom-right { + right: auto; + left: 0; } -.nut-searchbar-clear.nut-searchbar-icon .nut-icon { - width: 12rpx; - height: 12rpx; - color: var(--nutui-black-5); - margin-right: var(--nutui-searchbar-inner-gap, 8rpx); +[dir='rtl'] .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right, +.nut-rtl .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right { + right: auto; + left: 16rpx; } -.nut-searchbar-values { - position: absolute; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - z-index: 2; - background-color: #fff; - top: 9rpx; - left: 6rpx; - font-size: 12rpx; - line-height: 12rpx; +[dir='rtl'] .nut-popover .nut-popover-content-bottom-left, +.nut-rtl .nut-popover .nut-popover-content-bottom-left { + left: auto; + right: 0; } -.nut-searchbar-values .nut-searchbar-value { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - padding: 4rpx 8rpx; - background-color: #f7f8fc; - border-radius: 4rpx; - margin-right: 2rpx; +[dir='rtl'] .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left, +.nut-rtl .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left { + left: auto; + right: 16rpx; } -.nut-searchbar-values .nut-icon { - width: 6rpx; - height: 6rpx; - font-size: 6rpx; - color: #c2c4cc; - margin-left: 4rpx; +.nut-popover-enter-from, +.nut-popover-leave-active { + transform: scale(0.8); + opacity: 0; } -.nut-searchbar-left.nut-icon, -.nut-searchbar-right.nut-icon { - width: 20rpx; - height: 20rpx; +.nut-popover-enter-active { + transition-timing-function: ease-out; } -.nut-searchbar-left { - margin-right: var(--nutui-searchbar-gap, 12rpx); +.nut-popover-leave-active { + transition-timing-function: ease-in; } -.nut-searchbar-left > .h5-div, -.nut-searchbar-left > .h5-span, -.nut-searchbar-left > .h5-i, -.nut-searchbar-left > .h5-svg, -.nut-searchbar-left .nut-icon { - margin-right: var(--nutui-searchbar-gap, 12rpx); +.nut-popover-content-bg { + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + background: transparent; + z-index: 999; } -.nut-searchbar-left > .h5-div:last-child, -.nut-searchbar-left > .h5-span:last-child, -.nut-searchbar-left > .h5-i:last-child, -.nut-searchbar-left > .h5-svg:last-child, -.nut-searchbar-left .nut-icon:last-child { - margin-right: 0; +[dir='rtl'] .nut-popover-content-bg, +.nut-rtl .nut-popover-content-bg { + left: auto; + right: 0; } -.nut-searchbar-right { - margin-left: var(--nutui-searchbar-gap, 12rpx); +.nut-popover-wrapper { + display: inline-block; } -.nut-searchbar-right > .h5-div, -.nut-searchbar-right > .h5-span, -.nut-searchbar-right > .h5-i, -.nut-searchbar-right > .h5-svg, -.nut-searchbar-right .nut-icon { - margin-left: var(--nutui-searchbar-gap, 12rpx); +.nut-popover-content-copy { + position: absolute; + top: -99999rpx; } -.nut-searchbar-right > .h5-div:first-child, -.nut-searchbar-right > .h5-span:first-child, -.nut-searchbar-right > .h5-i:first-child, -.nut-searchbar-right > .h5-svg:first-child, -.nut-searchbar-right .nut-icon:first-child { - margin-left: 0; +.nut-pickerview { + position: relative; + display: flex; + width: 100%; + height: calc(var(--nutui-picker-item-height, 36rpx) * 7); + overflow: hidden; } -.nut-searchbar-left > text, -.nut-searchbar-left > view { - margin-right: var(--nutui-searchbar-gap, 12rpx); +.nut-pickerview-mask, +.nut-pickerview-indicator { + position: absolute; + left: 0; + right: 0; + z-index: 3; + pointer-events: none; } -.nut-searchbar-right > text, -.nut-searchbar-right > view { - margin-left: var(--nutui-searchbar-gap, 12rpx); +.nut-pickerview-mask { + top: 0; + bottom: 0; + background-image: var( + --picker-mask-background, + linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), + linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)) + ); + background-position: top, bottom; + background-size: 100% calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); + background-repeat: no-repeat; + transform: translateZ(0); } -.nut-searchbar-round { - border-radius: var(--nutui-searchbar-content-round-border-radius, 19rpx); +.nut-pickerview-indicator { + top: calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); + height: var(--nutui-picker-item-height, 36rpx); + border: var(--nutui-picker-item-active-line-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + border-left: 0; + border-right: 0; + box-sizing: border-box; } -.nut-searchbar-focus { - padding: 5rpx var(--nutui-searchbar-gap, 12rpx); +.nut-pickerview-list { + position: relative; + flex: 1; + height: calc(var(--nutui-picker-item-height, 36rpx) * 7); + overflow: hidden; + touch-action: none; } -.nut-searchbar-focus .nut-searchbar-content { - border: 0.5rpx solid #ff5c67; +.nut-pickerview-roller { + position: absolute; + top: calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); + width: 100%; + height: var(--nutui-picker-item-height, 36rpx); + z-index: 1; + transform-style: preserve-3d; } -[dir='rtl'] .nut-searchbar-left, -.nut-rtl .nut-searchbar-left { - margin-right: 0; - margin-left: var(--nutui-searchbar-gap, 12rpx); +.nut-pickerview-roller-placeholder { + height: var(--nutui-picker-item-height, 36rpx); } -[dir='rtl'] .nut-searchbar-left > .h5-div, -[dir='rtl'] .nut-searchbar-left > .h5-span, -[dir='rtl'] .nut-searchbar-left > .h5-svg, -.nut-rtl .nut-searchbar-left > .h5-div, -.nut-rtl .nut-searchbar-left > .h5-span, -.nut-rtl .nut-searchbar-left > .h5-svg { - margin-right: 0; - margin-left: var(--nutui-searchbar-gap, 12rpx); +.nut-pickerview-roller-item { + position: absolute; + top: 0; + backface-visibility: hidden; + -moz-backface-visibility: hidden; } -[dir='rtl'] .nut-searchbar-left > .h5-div.nut-icon, -[dir='rtl'] .nut-searchbar-left > .h5-span.nut-icon, -[dir='rtl'] .nut-searchbar-left > .h5-svg.nut-icon, -.nut-rtl .nut-searchbar-left > .h5-div.nut-icon, -.nut-rtl .nut-searchbar-left > .h5-span.nut-icon, -.nut-rtl .nut-searchbar-left > .h5-svg.nut-icon { - -ms-transform: rotate(180deg); - transform: rotate(180deg); +.nut-pickerview-roller-item-hidden { + visibility: hidden; + opacity: 0; } -[dir='rtl'] .nut-searchbar-left > .h5-div:last-child, -[dir='rtl'] .nut-searchbar-left > .h5-span:last-child, -[dir='rtl'] .nut-searchbar-left > .h5-svg:last-child, -.nut-rtl .nut-searchbar-left > .h5-div:last-child, -.nut-rtl .nut-searchbar-left > .h5-span:last-child, -.nut-rtl .nut-searchbar-left > .h5-svg:last-child { - margin-right: 0; - margin-left: 0; +.nut-pickerview-roller-item, +.nut-pickerview-roller-item-tiled { + width: 100%; + height: var(--nutui-picker-item-height, 36rpx); + line-height: var(--nutui-picker-item-height, 36rpx); + color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a)); + font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14rpx)); + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -[dir='rtl'] .nut-searchbar-right, -.nut-rtl .nut-searchbar-right { - margin-left: 0; - margin-right: var(--nutui-searchbar-gap, 12rpx); +.nut-picker { + width: 100%; } -[dir='rtl'] .nut-searchbar-right > .h5-div, -[dir='rtl'] .nut-searchbar-right > .h5-span, -[dir='rtl'] .nut-searchbar-right > .h5-svg, -.nut-rtl .nut-searchbar-right > .h5-div, -.nut-rtl .nut-searchbar-right > .h5-span, -.nut-rtl .nut-searchbar-right > .h5-svg { - margin-left: 0; - margin-right: var(--nutui-searchbar-gap, 12rpx); +.nut-picker-control { + display: flex; + align-items: center; + justify-content: space-between; + height: var(--nutui-popup-title-height, 50rpx); + padding: var(--nutui-popup-title-padding, 16rpx); + box-sizing: border-box; + font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); } -[dir='rtl'] .nut-searchbar-right > .h5-div:first-child, -[dir='rtl'] .nut-searchbar-right > .h5-span:first-child, -[dir='rtl'] .nut-searchbar-right > .h5-svg:first-child, -.nut-rtl .nut-searchbar-right > .h5-div:first-child, -.nut-rtl .nut-searchbar-right > .h5-span:first-child, -.nut-rtl .nut-searchbar-right > .h5-svg:first-child { - margin-left: 0; - margin-right: 0; +.nut-picker-cancel-btn { + color: var(--nutui-picker-title-cancel-color, var(--nutui-color-text, #505259)); + font-size: var(--nutui-picker-title-cancel-font-size, var(--nutui-font-size-base, 14rpx)); } -[dir='rtl'] .nut-searchbar-left > text, -[dir='rtl'] .nut-searchbar-left > view, -.nut-rtl .nut-searchbar-left > text, -.nut-rtl .nut-searchbar-left > view { - margin-right: 0; - margin-left: var(--nutui-searchbar-gap, 12rpx); +.nut-picker-confirm-btn { + color: var(--nutui-picker-title-ok-color, var(--nutui-color-primary, #ff0f23)); + font-size: var(--nutui-picker-title-ok-font-size, var(--nutui-font-size-base, 14rpx)); } -[dir='rtl'] .nut-searchbar-right > text, -[dir='rtl'] .nut-searchbar-right > view, -.nut-rtl .nut-searchbar-right > text, -.nut-rtl .nut-searchbar-right > view { - margin-left: 0; - margin-right: var(--nutui-searchbar-gap, 12rpx); +.nut-picker-title { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-align: center; + color: var(--nutui-color-title, #1a1a1a); + font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); + font-weight: var(--nutui-popup-title-font-weight, var(--nutui-font-weight-bold, 600)); } -.nut-resultpage-icon { - display: -ms-flexbox; +.nut-picker-panel { display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - margin-bottom: var(--nutui-resultpage-icon-margin-bottom, 12rpx); } -.nut-resultpage-icon .nut-icon { - height: var(--nutui-resultpage-icon-size, 36rpx); - width: var(--nutui-resultpage-icon-size, 36rpx); +.nut-pagination { + display: flex; + flex-direction: row; + font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23)); } -.nut-resultpage-title { - width: var(--nutui-resultpage-width, 240rpx); - margin-bottom: var(--nutui-resultpage-title-margin-bottom, 12rpx); - font-size: var(--nutui-resultpage-title-font-size, var(--nutui-font-size-xl, 18rpx)); - color: var(--nutui-resultpage-title-color, var(--nutui-color-title, #1a1a1a)); - font-weight: var(--nutui-font-weight-bold, 600); - text-align: center; +.nut-pagination-prev, +.nut-pagination-item, +.nut-pagination-next { + height: 39rpx; + min-width: 39rpx; + flex-shrink: 0; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23)); + background: #fff; + border-radius: var(--nutui-pagination-item-border-radius, 2rpx); + border: var(--nutui-pagination-item-border-width, 1rpx) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + cursor: pointer; } -.nut-resultpage-description { - width: var(--nutui-resultpage-width, 240rpx); - line-height: var(--nutui-resultpage-description-line-height, 20rpx); - font-size: var(--nutui-resultpage-description-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-resultpage-description-color, var(--nutui-color-text, #505259)); - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - word-break: break-all; +.nut-pagination-prev, +.nut-pagination-item { + border-right-width: 0; } -.nut-resultpage-actions { - display: -ms-flexbox; +.nut-pagination-prev, +.nut-pagination-next { + padding: var(--nutui-pagination-prev-next-padding, 0 12rpx); +} +.nut-pagination-contain { display: flex; - -ms-flex-direction: row; flex-direction: row; - margin-top: var(--nutui-resultpage-actions-margin-top, 16rpx); } -.nut-resultpage-action { - margin-left: 6rpx; - margin-right: 6rpx; +.nut-pagination-item-active { + color: #fff; + border-width: 0; + background-color: var(--nutui-color-primary, #ff0f23); } -.nut-range-container { - display: -ms-flexbox; +.nut-pagination-item-disabled, +.nut-pagination-next-disabled, +.nut-pagination-prev-disabled { + color: var(--nutui-pagination-disable-color, var(--nutui-color-text-disabled, #c2c4cc)); + background-color: var(--nutui-pagination-disable-background-color, #f7f8fa); + cursor: not-allowed; +} +.nut-pagination-simple { + height: 39rpx; + width: 124rpx; + line-height: 39rpx; + text-align: center; + font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-pagination-simple-border { + border-right: var(--nutui-pagination-item-border-width, 1rpx) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +} +.nut-pagination-lite { + height: var(--nutui-pagination-lite-height, 20rpx); + padding: 0 var(--nutui-spacing-xs, 6rpx); display: flex; - -ms-flex-direction: row; flex-direction: row; - position: relative; - width: 100%; - height: var(--nutui-range-height, 4rpx); - -ms-flex-align: center; align-items: center; - -ms-flex-pack: justify; - justify-content: space-between; + color: #fff; + background-color: var(--nutui-pagination-lite-background-color, rgba(0, 0, 0, 0.45)); + border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, 4rpx)); } -.nut-range { - display: block; - position: relative; - height: var(--nutui-range-height, 4rpx); - margin: 0 var(--nutui-range-margin, 15rpx); - background-color: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1)); - border-radius: 2rpx; - -ms-flex: 1; - flex: 1; - cursor: pointer; +.nut-pagination-lite-active, +.nut-pagination-lite-default, +.nut-pagination-lite-spliterator { + font-size: var(--nutui-font-size-xs, 11rpx); + color: var(--nutui-pagination-lite-color, #ffffff); } -.nut-range::before { - position: absolute; - top: -8rpx; - bottom: -8rpx; - left: 0; +.nut-overlay { + position: fixed; + top: 0; right: 0; - content: ''; -} -.nut-range-min, -.nut-range-max { - font-size: var(--nutui-font-size-s, 12rpx); - color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a)); - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.nut-range-bar { - display: block; - position: relative; + bottom: 0; + left: 0; width: 100%; height: 100%; - max-width: 100%; - max-height: 100%; - background: var(--nutui-range-active-color, var(--nutui-color-primary, #ff0f23)); - border-radius: 2rpx; + background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); } -.nut-range-button { - position: absolute; - display: -ms-flexbox; - display: flex; - width: var(--nutui-range-button-width, 24rpx); - height: var(--nutui-range-button-height, 24rpx); - background: var(--nutui-range-button-background, #ffffff); - border-radius: 50%; - box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.14902); - border: var(--nutui-range-button-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); - outline: none; - -ms-flex-align: center; - align-items: center; - top: 50%; - left: 50%; +.nut-overflow-hidden { + overflow: hidden !important; } -.nut-range-button-wrapper, -.nut-range-button-wrapper-right, -.nut-range-button-wrapper-left { - width: var(--nutui-range-button-width, 24rpx); - height: var(--nutui-range-button-height, 24rpx); +@keyframes nut-fade-in { + 0% { + opacity: 0; + } + 1% { + opacity: 0; + } + to { + opacity: 1; + } } -.nut-range-button-number { +@keyframes nut-fade-out { + 0% { + opacity: 1; + } + 1% { + opacity: 1; + } + to { + opacity: 0; + } +} +.nut-overlay-slide-enter-active, +.nut-overlay-slide-appear-active { + animation-fill-mode: both; + animation-name: nut-fade-in; + animation-duration: var(--nutui-overlay-animation-duration, 0.3s); +} +.nut-overlay-slide-exit-active { + animation-fill-mode: both; + animation-name: nut-fade-out; + animation-duration: var(--nutui-overlay-animation-duration, 0.3s); +} +[dir='rtl'] .nut-overlay, +.nut-rtl .nut-overlay { + left: auto; + right: 0; +} +.nut-numberkeyboard { + width: 100%; + padding: var(--nutui-numberkeyboard-padding, 0 0 22rpx 0); + user-select: none; + background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-background, #f2f3f5)); +} +.nut-numberkeyboard-header { position: relative; - width: 200%; - height: 24rpx; - line-height: 14rpx; - padding: 5rpx 0; - left: 50%; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - font-size: var(--nutui-font-size-s, 12rpx); - color: var(--nutui-range-color, var(--nutui-color-title, #1a1a1a)); - text-align: center; - vertical-align: center; - box-sizing: border-box; + box-sizing: content-box; + padding: var(--nutui-popup-title-padding, 16rpx); + color: var(--nutui-color-title, #1a1a1a); + font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); } -.nut-range-mark { +.nut-numberkeyboard-header-title { + color: var(--nutui-color-title, #1a1a1a); + display: inline-block; + font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); +} +.nut-numberkeyboard-header-close { position: absolute; - width: 100%; - height: 14rpx; - overflow: visible; + display: block; + right: 0; top: 50%; + transform: translateY(-50%); + padding: var(--nutui-numberkeyboard-header-close-padding, 0 16rpx); + color: var(--nutui-numberkeyboard-header-close-color, var(--nutui-color-text, #505259)); + font-size: var(--nutui-numberkeyboard-header-close-font-size, 14rpx); + background-color: var(--nutui-numberkeyboard-header-close-background-color, transparent); + border: none; + cursor: pointer; } -.nut-range-mark-text-wrapper { - position: absolute; - height: 100%; - top: 14rpx; - display: inline-block; - -ms-transform: translate(-10rpx); - transform: translate(-10rpx); +.nut-numberkeyboard-body { + display: flex; + padding: 6rpx 0 0 6rpx; } -.nut-range-mark-text { - position: absolute; - line-height: 16rpx; - font-size: 12rpx; - color: #999; - text-align: center; - word-break: keep-all; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +.nut-numberkeyboard-body-keys { + display: flex; + flex: 3; + flex-wrap: wrap; } -.nut-range-tick { - position: absolute; - top: -20rpx; - width: 11rpx; - height: 11rpx; - left: 0; - border-radius: 6rpx; - background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1)); +.nut-numberkeyboard-body-wrapper { + position: relative; + flex: 1; + width: 33%; + flex-basis: 33%; + box-sizing: border-box; + padding: 0 6rpx 6rpx 0; + background-color: var(--nutui-numberkeyboard-wrapper-background-color, var(--nutui-color-background-sunken, #f7f8fc)); } -.nut-range-vertical-container { - height: 100%; - -ms-flex-direction: column; - flex-direction: column; - padding: 0 15rpx; +.nut-numberkeyboard-body-wrapper .key { + display: flex; + align-items: center; + justify-content: center; + height: var(--nutui-numberkeyboard-key-height, 48rpx); + font-size: var(--nutui-numberkeyboard-key-font-size, var(--nutui-font-size-xl, 18rpx)); + line-height: var(--nutui-numberkeyboard-key-line-height, 1.5); + background-color: var(--nutui-numberkeyboard-key-background-color, var(--nutui-color-background-overlay, #ffffff)); + color: var(--nutui-numberkeyboard-key-color, var(--nutui-color-text, #505259)); + border-radius: var(--nutui-numberkeyboard-key-border-radius, 8rpx); + border: var(--nutui-numberkeyboard-key-border, none); + font-weight: var(--nutui-font-weight-bold, 600); + cursor: pointer; } -.nut-range-vertical { - width: var(--nutui-range-height, 4rpx); - margin: var(--nutui-range-margin, 15rpx) 0rpx; +.nut-numberkeyboard-body-wrapper .key.active { + background-color: var(--nutui-numberkeyboard-key-active-background-color, #ebedf0); } -.nut-range-vertical-button-wrapper, -.nut-range-vertical-button-wrapper-right { - position: absolute; - top: auto; - top: initial; - right: auto; - right: initial; - top: 100%; - left: 50%; +.nut-numberkeyboard-sidebar { + display: flex; + flex: 1; + flex-basis: 33%; + flex-direction: column; } -.nut-range-vertical-button-wrapper-left { - top: 0; - left: 50%; - right: auto; - right: initial; +.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper { + width: 100%; } -.nut-range-vertical-mark { +.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key { position: absolute; - width: 36rpx; - height: 100%; top: 0; - right: 50%; - overflow: visible; - font-size: 12rpx; - padding: 0; -} -.nut-range-vertical-mark-hm { - left: -34rpx; -} -.nut-range-vertical-mark-text-wrapper { - height: 16rpx; - position: absolute; - display: inline-block; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -ms-transform: translateY(-11rpx); - transform: translateY(-11rpx); + right: 6rpx; + bottom: 6rpx; + left: 0; + height: auto; } -.nut-range-vertical-mark-text { - height: 100%; - line-height: 16rpx; - color: #999; - text-align: center; - word-break: keep-all; +.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm { + font-size: var(--nutui-numberkeyboard-key-confirm-font-size, var(--nutui-font-size-l, 15rpx)); + color: var(--nutui-numberkeyboard-key-confirm-color, #fff); + background-color: var(--nutui-numberkeyboard-key-confirm-background-color, var(--nutui-color-primary, #ff0f23)); } -.nut-range-vertical-tick { - position: absolute; - top: 2rpx; - left: 31rpx; - width: 10rpx; - height: 10rpx; - border-radius: 5rpx; - background: var(--nutui-range-inactive-color, var(--nutui-color-primary-light-pressed, #ffebf1)); +.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm.active { + background-color: rgba(255, 0, 0, 0.70196); } -[dir='rtl'] .nut-range-button-wrapper, -[dir='rtl'] .nut-range-button-wrapper-right, -.rtl-nut-range-button-wrapper, -.rtl-nut-range-button-wrapper-right { - left: 0; +[dir='rtl'] .nut-popup .nut-numberkeyboard-header-close, +.nut-rtl .nut-popup .nut-numberkeyboard-header-close { right: auto; - right: initial; -} -[dir='rtl'] .nut-range-button-wrapper-left, -.rtl-nut-range-button-wrapper-left, -[dir='rtl'] .nut-range-tick, -.rtl-nut-range-tick { - right: 0; - left: auto; - left: initial; -} -[dir='rtl'] .nut-range-mark-text, -.rtl-nut-range-mark-text { - -ms-transform: translate(10rpx); - transform: translate(10rpx); + left: 0; } -[dir='rtl'] .nut-range-vertical-button-wrapper, -[dir='rtl'] .nut-range-vertical-button-wrapper-right, -.rtl-nut-range-vertical-button-wrapper, -.rtl-nut-range-vertical-button-wrapper-right, -[dir='rtl'] .nut-range-vertical-button-wrapper-left, -.rtl-nut-range-vertical-button-wrapper-left { - right: 50%; - left: auto; - left: initial; +[dir='rtl'] .nut-popup .nut-numberkeyboard-body, +.nut-rtl .nut-popup .nut-numberkeyboard-body { + padding: 6rpx 6rpx 0 0; } -[dir='rtl'] .nut-range-vertical-tick, -.rtl-nut-range-vertical-tick { - left: auto; - right: 30rpx; - margin-left: 0; - margin-right: 0; +[dir='rtl'] .nut-popup .nut-numberkeyboard-body-wrapper, +.nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper { + padding: 0 0 6rpx 6rpx; } -[dir='rtl'] .nut-range-vertical-mark-text-wrapper, -.rtl-nut-range-vertical-mark-text-wrapper { - -ms-transform: translateY(-11rpx); - transform: translateY(-11rpx); +[dir='rtl'] .nut-popup .nut-numberkeyboard-body-wrapper .delete, +.nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper .delete { + transform: rotate(-180deg); } -.nut-rate-item-normal { - margin-left: var(--nutui-rate-item-margin, 4rpx); +[dir='rtl'] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key, +.nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key { + left: 6rpx; + right: 0; } -.nut-rate-item-normal .nut-icon { - height: var(--nutui-rate-icon-size, 12rpx); - width: var(--nutui-rate-icon-size, 12rpx); +[dir='rtl'] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete, +.nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete { + transform: rotate(-180deg); } -.nut-rate-item-large { - margin-left: calc(var(--nutui-rate-item-margin, 4rpx) * 2); +.fade-enter { + opacity: 0; } -.nut-rate-item-large .nut-icon { - height: calc(var(--nutui-rate-icon-size, 12rpx) + 8rpx); - width: calc(var(--nutui-rate-icon-size, 12rpx) + 8rpx); +.fade-enter-active { + opacity: 1; + transition: opacity 0.3s ease-in; } -.nut-rate-item-small { - margin-left: calc(var(--nutui-rate-item-margin, 4rpx) / 2); +.fade-enter-done, +.fade-exit { + opacity: 1; } -.nut-rate-item-small .nut-icon { - height: calc(var(--nutui-rate-icon-size, 12rpx) - 4rpx); - width: calc(var(--nutui-rate-icon-size, 12rpx) - 4rpx); +.fade-exit-active { + opacity: 0; + transition: opacity 0.3s ease-out; } -.nut-rate-item-icon.nut-rate-item-icon::before { - position: relative; - top: auto; - left: auto; - -ms-transform: none; - transform: none; +.fade-exit-done, +.fade-appear { + opacity: 0; } -.nut-rate-score-normal { - padding-left: var(--nutui-rate-item-margin, 4rpx); - font-size: var(--nutui-rate-font-size, 12rpx); +.fade-appear-active { + opacity: 1; + transition: opacity 0.3s; } -.nut-rate-score-large { - font-size: calc(var(--nutui-rate-font-size, 12rpx) + 6rpx); - padding-left: calc(var(--nutui-rate-item-margin, 4rpx) * 2); +.nut-notify { + position: fixed; + left: 8rpx; + right: 8rpx; + z-index: var(--nutui-notify-z-index, 1000); + display: flex; + align-items: center; + box-sizing: border-box; + height: var(--nutui-notify-height, 40rpx); + padding: var(--nutui-notify-padding, 0rpx 12rpx); + border-radius: var(--nutui-notify-border-radius, 8rpx); + box-shadow: var(--nutui-notify-box-shadow, 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.06)); + background-color: var(--nutui-notify-background-color, #ffffff); } -.nut-rate-score-small { - font-size: calc(var(--nutui-rate-font-size, 12rpx) - 2rpx); - padding-left: calc(var(--nutui-rate-item-margin, 4rpx) / 2); +.nut-notify-content { + flex: 1; + text-align: center; + min-width: 0; + font-size: var(--nutui-notify-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-notify-text-color, var(--nutui-color-title, #1a1a1a)); + white-space: nowrap; + overflow: hidden; } -[dir='rtl'] .nut-rate-item-normal, -.nut-rtl .nut-rate-item-normal { - margin-right: var(--nutui-rate-item-margin, 4rpx); +.nut-notify-ellipsis { + text-overflow: ellipsis; } -[dir='rtl'] .nut-rate-item-large, -.nut-rtl .nut-rate-item-large { - margin-right: calc(var(--nutui-rate-item-margin, 4rpx) * 2); +.nut-notify-layout-left { + text-align: left; } -[dir='rtl'] .nut-rate-item-small, -.nut-rtl .nut-rate-item-small { - margin-right: calc(var(--nutui-rate-item-margin, 4rpx) - 2rpx); +.nut-notify-left-icon, +.nut-notify-right-icon { + display: flex; + display: inline-flex; } -[dir='rtl'] .nut-rate-score-large, -.nut-rtl .nut-rate-score-large { - padding-right: calc(var(--nutui-rate-item-margin, 4rpx) * 2); +.nut-notify-left-icon { + margin-right: 6rpx; } -[dir='rtl'] .nut-rate-score-normal, -.nut-rtl .nut-rate-score-normal { - padding-right: var(--nutui-rate-item-margin, 4rpx); +.nut-notify-left-icon .nut-icon { + height: 16rpx; + width: 16rpx; } -[dir='rtl'] .nut-rate-score-small, -.nut-rtl .nut-rate-score-small { - padding-right: calc(var(--nutui-rate-item-margin, 4rpx) - 2rpx); +.nut-notify-right-icon { + margin-left: 6rpx; } -.nut-radiogroup .nut-radio { - margin: 0 var(--nutui-radiogroup-radio-margin, 20rpx) var(--nutui-radiogroup-radio-margin-bottom, 5rpx) 0; +.nut-notify-right-icon .nut-icon { + height: 12rpx; + width: 12rpx; } -.nut-radiogroup .nut-radio-label { - margin: var(--nutui-radiogroup-radio-label-margin, 0 5rpx); +.nut-noticebar { + width: 100%; } -.nut-radiogroup-vertical .nut-radio-button { - border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); +.nut-noticebar .nut-noticebar-box { + position: relative; + display: flex; + align-items: center; + height: var(--nutui-noticebar-height, 36rpx); + padding: var(--nutui-noticebar-box-padding, 0 16rpx); + font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, 12rpx)); + background: var(--nutui-noticebar-background, rgb(251, 248, 220)); + color: var(--nutui-noticebar-color, #d9500b); + border-radius: var(--nutui-noticebar-border-radius, 0); } -.nut-radiogroup-vertical .nut-radio-button-active { - border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); +.nut-noticebar .nut-noticebar-box-wrapable, +.nut-noticebar .nut-noticebar-box-center { + height: auto; + padding: var(--nutui-noticebar-wrapable-padding, 8rpx 16rpx); } -.nut-radiogroup-horizontal .nut-radio-button { - border: 1rpx solid #ffffff; +.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap, +.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap { + height: auto; } -.nut-radiogroup-horizontal .nut-radio-button-active { - border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); - background-color: var(--nutui-color-primary-light-pressed, #ffebf1); +.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content { + position: relative; + white-space: normal; + word-wrap: break-word; } -.nut-radiogroup-horizontal .nut-radio:last-child { - margin: 0 var(--nutui-radiogroup-radio-margin, 20rpx) var(--nutui-radiogroup-radio-margin-bottom, 5rpx) 0; +.nut-noticebar .nut-noticebar-box-center { + justify-content: center; } -.nut-radiogroup .nut-radio-button-active.nut-radio-button-disabled { - background: var(--nutui-color-text-disabled, #c2c4cc); - color: #fff; - border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); +.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap { + flex: initial; } -[dir='rtl'] .nut-radiogroup .nut-radio, -.nut-rtl .nut-radiogroup .nut-radio { - margin-left: var(--nutui-radiogroup-radio-margin, 20rpx); - margin-right: 0; +.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content { + position: relative; + display: inline; + display: initial; } -.nut-radio.nut-radio-reverse .nut-radio-label { - margin-right: var(--nutui-radio-label-margin-left, 4rpx); - margin-left: 0; +.nut-noticebar .nut-noticebar-box-left-icon { + display: flex; + height: var(--nutui-noticebar-left-icon-width, 16rpx); + min-width: var(--nutui-noticebar-left-icon-width, 16rpx); + margin-right: var(--nutui-noticebar-icon-gap, 4rpx); + background-size: 100% 100%; } -.nut-radio-label { - margin-left: var(--nutui-radio-label-margin-left, 4rpx); - font-size: var(--nutui-radio-label-font-size, var(--nutui-font-size-s, 12rpx)); - color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a)); +.nut-noticebar .nut-noticebar-box-left-icon .nut-icon { + color: var(--nutui-noticebar-color, #d9500b); } -.nut-radio-icon { - color: var(--nutui-color-text-disabled, #c2c4cc); - background-color: #fff; - transition-duration: 0.3s; - transition-property: color, border-color, background-color; - font-size: var(--nutui-radio-icon-font-size, var(--nutui-font-size-icon, 16rpx)); - border-radius: 50%; +.nut-noticebar .nut-noticebar-box-right-icon { + display: flex; + align-items: center; + justify-content: center; + width: var(--nutui-noticebar-right-icon-width, 16rpx); + margin-left: var(--nutui-noticebar-icon-gap, 4rpx); } -.nut-radio-icon-checked { - color: var(--nutui-color-primary, #ff0f23); - background-color: #fff; - box-shadow: 0 2rpx 4rpx rgba(255, 15, 35, 0.2); - border-radius: 50%; +.nut-noticebar .nut-noticebar-box-right-icon .nut-icon { + width: 12rpx; + height: 12rpx; + color: var(--nutui-noticebar-color, #d9500b); } -.nut-radio-button { - display: -ms-flexbox; +.nut-noticebar .nut-noticebar-box-wrap { display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; + flex: 1; align-items: center; - min-height: 30rpx; - padding: var(--nutui-radio-button-padding, 5rpx 18rpx); - font-size: var(--nutui-radio-button-font-size, var(--nutui-font-size-s, 12rpx)); - background: var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); - border-radius: var(--nutui-radio-button-border-radius, 15rpx); - color: var(--nutui-radio-label-color, var(--nutui-color-title, #1a1a1a)); - box-sizing: border-box; - border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); + height: var(--nutui-noticebar-line-height, 24rpx); + line-height: var(--nutui-noticebar-line-height, 24rpx); + overflow: hidden; + position: relative; } -.nut-radio-button-active { - background: var(--nutui-color-primary-light-pressed, #ffebf1); - color: var(--nutui-color-primary, #ff0f23); - border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); +.nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content { + position: absolute; + white-space: nowrap; + color: var(--nutui-noticebar-color, #d9500b); } -.nut-radio-button-disabled { - color: var(--nutui-color-text-disabled, #c2c4cc); - border: 1rpx solid var(--nutui-radio-button-background, rgba(250, 44, 25, 0.05)); +.nut-noticebar .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content.nut-ellipsis { + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -.nut-radio .nut-radio-button-active.nut-radio-button-disabled { - background: var(--nutui-color-text-disabled, #c2c4cc); - color: #fff; - border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); +.nut-noticebar .nut-noticebar-box .play { + animation: nut-notice-bar-play linear both running; } -[dir='rtl'] .nut-radio.nut-radio-reverse .nut-radio-label, -.nut-rtl .nut-radio.nut-radio-reverse .nut-radio-label { - margin-left: var(--nutui-radio-label-margin-left, 4rpx); - margin-right: 0; +.nut-noticebar .nut-noticebar-box .play-infinite { + animation: nut-notice-bar-play-infinite linear infinite both running; } -[dir='rtl'] .nut-radio-label, -.nut-rtl .nut-radio-label { - margin-left: 0; - margin-right: var(--nutui-radio-label-margin-left, 4rpx); +.nut-noticebar .nut-noticebar-box .play-vertical { + animation: nut-notice-bar-play-vertical linear infinite both running; } -.nut-pulltorefresh-head { - overflow: hidden; +.nut-noticebar .nut-noticebar-vertical { position: relative; - font-size: 12rpx; + display: flex; + justify-content: space-between; + height: var(--nutui-noticebar-height, 36rpx); + font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, 12rpx)); + overflow: hidden; + padding: var(--nutui-noticebar-box-padding, 0 16rpx); + background: var(--nutui-noticebar-background, rgb(251, 248, 220)); + color: var(--nutui-noticebar-color, #d9500b); } -.nut-pulltorefresh-head-content-icons { - width: var(--nutui-pulltorefresh-icon-width, 36rpx); - height: var(--nutui-pulltorefresh-icon-height, 26rpx); - margin-bottom: 4rpx; +.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-left-icon { + height: var(--nutui-noticebar-left-icon-width, 16rpx); + min-width: var(--nutui-noticebar-left-icon-width, 16rpx); + margin: var(--nutui-noticebar-icon-gap, 4rpx); + background-size: 100% 100%; + display: flex; + align-self: center; } -.nut-progress-outer { - -ms-flex: 1; +.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list { + margin: 0; + padding: 0; + display: block; flex: 1; - border-radius: var(--nutui-progress-border-radius, 12rpx); - height: var(--nutui-progress-height, 10rpx); - background: var(--nutui-progress-background, var(--nutui-color-background, #f2f3f5)); } -.nut-progress-outer .nut-progress-active::before { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - border-radius: var(--nutui-progress-border-radius, 12rpx); - animation: progressActive 2s ease-in-out infinite; +.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list-item { + display: flex; + align-items: center; + height: var(--nutui-noticebar-height, 36rpx); + width: 100%; } -.nut-progress-inner { - height: 100%; - display: -ms-flexbox; +.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-wrap { display: flex; - -ms-flex-direction: column; + height: 100%; + width: 100%; flex-direction: column; - -ms-flex-pack: center; - justify-content: center; - transition: all 0.4s; - border-radius: var(--nutui-progress-border-radius, 12rpx); - background: var(--nutui-progress-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%)); } -.nut-progress-text { - display: -ms-flexbox; +.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon { + align-self: center; display: flex; - -ms-flex-align: center; - align-items: center; - transition: all 0.4s; - margin-left: 12rpx; - color: var(--nutui-color-text-help, #888b94); - font-family: PingFang SC; - font-size: var(--nutui-progress-text-font-size, 13rpx); + justify-content: center; + width: var(--nutui-noticebar-right-icon-width, 16rpx); + margin-left: var(--nutui-noticebar-icon-gap, 4rpx); } -@keyframes progressActive { - 0% { - background: rgba(255, 255, 255, 0.10196); - width: 0; +@keyframes nut-notice-bar-play { + to { + transform: translate3d(-100%, 0, 0); } - 20% { - background: rgba(255, 255, 255, 0.50196); - width: 0; +} +@keyframes nut-notice-bar-play-infinite { + to { + transform: translate3d(-100%, 0, 0); } +} +@keyframes nut-notice-bar-play-vertical { to { - background: rgba(255, 255, 255, 0); - width: 100%; + transform: translateY(var(--nutui-noticebar-height, 36rpx)); } } -[dir='rtl'] .nut-progress-text, -.nut-rtl .nut-progress-text { - -ms-transform: translate(50%); - transform: translate(50%); +[dir='rtl'] .nut-noticebar .nut-noticebar-box-left-icon, +.nut-rtl .nut-noticebar .nut-noticebar-box-left-icon { + margin-right: 0; + margin-left: var(--nutui-noticebar-icon-gap, 4rpx); } -.nut-price { - direction: ltr; - font-size: var(--nutui-font-size-l, 15rpx); - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: baseline; - align-items: baseline; +[dir='rtl'] .nut-noticebar .nut-noticebar-box-right-icon, +.nut-rtl .nut-noticebar .nut-noticebar-box-right-icon { + margin-left: 0; + margin-right: var(--nutui-noticebar-icon-gap, 4rpx); } -.nut-price-symbol { - padding-right: var(--nutui-price-symbol-padding-right, 0rpx); +[dir='rtl'] .nut-noticebar .nut-noticebar-box .play, +.nut-rtl .nut-noticebar .nut-noticebar-box .play { + animation: nut-notice-bar-play-rtl linear both running; } -.nut-price-symbol-xlarge { - font-size: var(--nutui-price-symbol-xlarge-size, 12rpx); +[dir='rtl'] .nut-noticebar .nut-noticebar-box .play-infinite, +.nut-rtl .nut-noticebar .nut-noticebar-box .play-infinite { + animation: nut-notice-bar-play-infinite-rtl linear infinite both running; } -.nut-price-symbol-large { - font-size: var(--nutui-price-symbol-large-size, 12rpx); +@keyframes nut-notice-bar-play-rtl { + to { + transform: translate3d(100%, 0, 0); + } +} +@keyframes nut-notice-bar-play-infinite-rtl { + to { + transform: translate3d(100%, 0, 0); + } +} +[dir='rtl'] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon, +.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon { + margin-left: 0; + margin-right: var(--nutui-noticebar-icon-gap, 4rpx); } -.nut-price-symbol-normal { - font-size: var(--nutui-price-symbol-normal-size, 12rpx); +.nut-navbar { + width: var(--nutui-navbar-width, 100%); + position: relative; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: var(--nutui-navbar-height, 44rpx); + box-sizing: border-box; + background: var(--nutui-navbar-background, #ffffff); + box-shadow: var(--nutui-navbar-box-shadow, none); + font-size: var(--nutui-navbar-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-navbar-color, var(--nutui-color-title, #1a1a1a)); + overflow: hidden; + padding: 0 16rpx; } -.nut-price-symbol-small { - font-size: var(--nutui-price-symbol-small-size, 12rpx); +.nut-navbar-fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + width: 100%; } -.nut-price-symbol-rtl { - padding-right: 0; - padding-left: var(--nutui-price-symbol-padding-right, 0rpx); +.nut-navbar-placeholder { + display: inline-block; + width: 100%; } -.nut-price-integer-xlarge { - font-size: var(--nutui-price-integer-xlarge-size, 24rpx); - line-height: var(--nutui-price-integer-xlarge-size, 24rpx); +.nut-navbar-safe-area-inset-top { + padding-top: constant(safe-area-inset-top); + padding-top: env(safe-area-inset-top); } -.nut-price-integer-large { - font-size: var(--nutui-price-integer-large-size, 18rpx); - line-height: var(--nutui-price-integer-large-size, 18rpx); +.nut-navbar-title-wrapper { + justify-content: space-between; } -.nut-price-integer-normal { - font-size: var(--nutui-price-integer-normal-size, 16rpx); - line-height: var(--nutui-price-integer-normal-size, 16rpx); +.nut-navbar-title { + height: 100%; + text-align: center; + display: flex; + flex: 1; + flex-direction: row; + align-items: center; + font-size: var(--nutui-navbar-title-font-size, var(--nutui-font-size-xl, 18rpx)); + font-weight: var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold, 600)); + color: var(--nutui-navbar-title-font-color, var(--nutui-color-title, #1a1a1a)); } -.nut-price-integer-small { - font-size: var(--nutui-price-integer-small-size, 12rpx); +.nut-navbar-title-center { + max-width: 129rpx; + justify-content: center; } -.nut-price-decimal-xlarge { - font-size: var(--nutui-price-decimal-xlarge-size, 12rpx); +.nut-navbar-title ::-webkit-scrollbar { + display: none; } -.nut-price-decimal-large { - font-size: var(--nutui-price-decimal-large-size, 12rpx); +.nut-navbar-left, +.nut-navbar-right { + display: flex; + align-items: center; + flex-direction: row; + max-width: 124rpx; + height: 100%; + cursor: pointer; } -.nut-price-decimal-normal { - font-size: var(--nutui-price-decimal-normal-size, 12rpx); +.nut-navbar-left .nut-icon, +.nut-navbar-left .nutui-iconfont, +.nut-navbar-right .nut-icon, +.nut-navbar-right .nutui-iconfont { + width: 20rpx; + height: 20rpx; + font-size: 20rpx; } -.nut-price-decimal-small { - font-size: var(--nutui-price-decimal-small-size, 12rpx); +.nut-navbar-left-maxwidth, +.nut-navbar-right-maxwidth { + box-sizing: border-box; + width: 108rpx; } -.nut-price-line { - text-decoration: line-through var(--nutui-price-line-color, var(--nutui-color-text-help)); +.nut-navbar-left { + padding-right: 16rpx; + gap: 16rpx; } -.nut-popup { - position: fixed; - min-height: 26%; - max-height: 100%; - background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff)); - -webkit-overflow-scrolling: touch; - font-size: var(--nutui-font-size-base, 14rpx); +.nut-navbar-left-rtl { + padding-right: 0; + padding-left: 16rpx; } -.nut-popup-title { - display: -ms-flexbox; +.nut-navbar-left-back { display: flex; - -ms-flex-direction: row; flex-direction: row; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - border-bottom: var(--nutui-popup-title-border-bottom, 0); - padding: var(--nutui-popup-title-padding, 16rpx); - position: relative; -} -.nut-popup-title-title { - color: var(--nutui-color-title, #1a1a1a); - font-weight: var(--nutui-font-weight-bold, 600); - font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); - line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); + gap: 16rpx; } -.nut-popup-title-description { - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14rpx)); - font-weight: var(--nutui-font-weight, 400); +.nut-navbar-left-hidden { + padding-left: 0; + padding-right: 0; } -.nut-popup-title-description-gap { - margin-top: var(--nutui-popup-description-spacing, var(--nutui-spacing-base, 8rpx)); +.nut-navbar-right { + padding-left: 16rpx; + justify-content: flex-end; + gap: 16rpx; } -.nut-popup-title-left { - position: absolute; - top: var(--nutui-popup-title-padding, 16rpx); - left: var(--nutui-popup-title-padding, 16rpx); +.nut-navbar-right-rtl { + padding-right: 16rpx; + padding-left: 0; } -.nut-popup-title-right { - position: absolute; - top: var(--nutui-popup-title-padding, 16rpx); - right: var(--nutui-popup-title-padding, 16rpx); - z-index: 1; - width: var(--nutui-popup-icon-size, 20rpx); - height: var(--nutui-popup-icon-size, 20rpx); - color: var(--nutui-color-title, #1a1a1a); - cursor: pointer; +.nut-navbar-rtl .nut-icon-ArrowLeft { + transform: rotateY(180deg); } -.nut-popup-title-right-top-left { - top: var(--nutui-popup-title-padding, 16rpx); - left: var(--nutui-popup-title-padding, 16rpx); +.nut-menu-container-content { + padding: var(--nutui-menu-content-padding, 12rpx 24rpx); + max-height: var(--nutui-menu-content-max-height, 214rpx); + overflow-y: auto; + display: flex; + flex-wrap: wrap; + background: var(--nutui-menu-content-background-color, var(--nutui-color-background-overlay, #ffffff)); } -.nut-popup-title-right-bottom-left { - bottom: var(--nutui-popup-title-padding, 16rpx); - left: var(--nutui-popup-title-padding, 16rpx); +.nut-menu-container-content_fixed { + width: 100%; + opacity: 0; + position: fixed; } -.nut-popup-title-right-bottom-right { - right: var(--nutui-popup-title-padding, 16rpx); - bottom: var(--nutui-popup-title-padding, 16rpx); +.nut-menu-container-item { + display: flex; + align-items: center; + color: var(--nutui-color-title, #1a1a1a); + font-size: var(--nutui-font-size-base, 14rpx); + padding: var(--nutui-menu-item-padding, 12rpx 0); } -.nut-popup-center { - top: 50%; - left: 50%; - min-height: 10%; - max-width: 295rpx; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); +.nut-menu-container-item.active { + font-weight: var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 600)); + color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23)); } -.nut-popup-center.nut-popup-round { - border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); +.nut-menu-container-item .nut-icon { + display: flex; + display: inline-flex; + align-items: center; + margin-right: var(--nutui-menu-item-icon-margin, 8rpx); + flex-shrink: 0; } -.nut-popup-bottom.nut-popup-round { - border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0 0; +.nut-menu-container-wrap, +.nut-menu-container-wrap-up { + position: absolute; + width: 100%; + z-index: var(--nutui-menu-container-z-index, 1000); + overflow: hidden; } -.nut-popup-right { - top: 0; - right: 0; - width: 100rpx; - height: 100%; +.nut-menu-container-wrap-up { + bottom: var(--nutui-menu-bar-line-height, 48rpx); } -.nut-popup-right.nut-popup-round { - border-radius: var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); +.overlay-fade-enter-active.nut-menu-container-overlay { + top: auto; + z-index: var(--nutui-menu-container-z-index, 1000); } -.nut-popup-left { - top: 0; +.nut-menu-placeholder-element { + position: fixed; + top: calc(-1 * var(--menu-bar-line-height)); left: 0; - width: 100rpx; - height: 100%; -} -.nut-popup-left.nut-popup-round { - border-radius: 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) 0; -} -.nut-popup-top.nut-popup-round { - border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)) var(--nutui-popup-border-radius, var(--nutui-radius-xl, 12rpx)); + right: 0; + z-index: var(--nutui-menu-bar-opened-z-index, 1000); + background-color: transparent; } -@keyframes popup-scale-fade-in { - 0% { - opacity: 0; - transform: scale(0.8); - } - to { - opacity: 1; - transform: scale(1); - } +.nut-menu-placeholder-element.up { + bottom: calc(-1 * var(--menu-bar-line-height)); } -@keyframes popup-scale-fade-out { - 0% { - opacity: 1; - transform: scale(1); - } - to { - opacity: 0; - transform: scale(0.8); - } +.nut-menu-container-down-enter { + opacity: 0; + transform: translateY(-30rpx); } -.nut-popup-slide-none-enter-active { - animation-fill-mode: both; - animation-name: popup-scale-fade-in; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-container-down-enter-done { + opacity: 1; + transform: translate(0); + transition: all 0.1s; } -.nut-popup-slide-none-exit-active { - animation-fill-mode: both; - animation-name: popup-scale-fade-out; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-container-down-exit { + opacity: 1; + transition: all 0.1s; } -.nut-popup-slide-center-enter-active { - animation-fill-mode: both; - animation-name: popup-fade-in; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-container-down-exit-done { + opacity: 0; + transition: all 0.1s; } -.nut-popup-slide-center-exit-active { - animation-fill-mode: both; - animation-name: popup-fade-out; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-container-up-enter { + opacity: 0; + transform: translateY(30rpx); } -@keyframes popup-slide-top-enter { - 0% { - transform: translate3d(0, -100%, 0); - } - to { - transform: translateZ(0); - } +.nut-menu-container-up-enter-done { + opacity: 1; + transform: translate(0); + transition: all 0.1s; } -@keyframes popup-slide-top-exit { - to { - transform: translate3d(0, -100%, 0); - } +.nut-menu-container-up-exit { + opacity: 1; + transition: all 0.1s; } -.nut-popup-slide-top-enter-active, -.nut-popup-slide-top-appear-active { - transform: translateZ(0); - animation-fill-mode: both; - animation-name: popup-slide-top-enter; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-container-up-exit-done { + opacity: 0; + transition: all 0.1s; } -.nut-popup-slide-top-exit-active { - animation-fill-mode: both; - animation-name: popup-slide-top-exit; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +[dir='rtl'] .nut-menu-container-item .nut-icon, +.nut-rtl .nut-menu-container-item .nut-icon { + margin-right: 0; + margin-left: var(--nutui-menu-item-icon-margin, 8rpx); } -@keyframes popup-slide-right-enter { - 0% { - transform: translate3d(100%, 0, 0); - } - to { - transform: translateZ(0); - } +[dir='rtl'] .nut-menu-container .nut-icon, +.nut-rtl .nut-menu-container .nut-icon { + transform: rotateY(180deg); } -@keyframes popup-slide-right-exit { - to { - transform: translate3d(100%, 0, 0); - } +.nut-menu { + position: relative; } -.nut-popup-slide-right-enter-active, -.nut-popup-slide-right-appear-active { - transform: translateZ(0); - animation-fill-mode: both; - animation-name: popup-slide-right-enter; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu.scroll-fixed { + position: fixed; + top: var(--nutui-menu-scroll-fixed-top, 0); + z-index: var(--nutui-menu-scroll-fixed-z-index, 1000); + width: 100%; } -.nut-popup-slide-right-exit { - animation-fill-mode: both; - animation-name: popup-slide-right-exit; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-bar { + position: relative; + display: flex; + line-height: var(--nutui-menu-bar-line-height, 48rpx); + background-color: var(--nutui-color-background-overlay, #ffffff); + box-shadow: var(--nutui-menu-bar-box-shadow, 0 2rpx 12rpx rgba(89, 89, 89, 0.12)); } -@keyframes popup-slide-bottom-enter { - 0% { - transform: translate3d(0, 100%, 0); - } - to { - transform: translateZ(0); - } +.nut-menu-bar.opened { + z-index: var(--nutui-menu-bar-opened-z-index, 1000); } -@keyframes slide-bottom-exit { - to { - transform: translate3d(0, 100%, 0); - } +.nut-menu-title { + flex: 1; + text-align: center; + font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-menu-title-color, var(--nutui-color-title, #1a1a1a)); + min-width: 0; + display: flex; + align-items: center; + justify-content: center; + max-width: 100%; } -.nut-popup-slide-bottom-enter-active, -.nut-popup-slide-bottom-appear-active { - -ms-transform: translate(0); - transform: translate(0); - animation-fill-mode: both; - animation-name: popup-slide-bottom-enter; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-title-text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + padding: var(--nutui-menu-title-padding, 0 8rpx); } -.nut-popup-slide-bottom-exit { - animation-fill-mode: both; - animation-name: slide-bottom-exit; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-title-icon { + flex-shrink: 0; + transition: all 0.2s linear; } -@keyframes popup-slide-left-enter { - 0% { - transform: translate3d(-100%, 0, 0); - } - to { - transform: translateZ(0); - } +.nut-menu-title.active { + color: var(--nutui-menu-item-active-color, var(--nutui-color-primary, #ff0f23)); } -@keyframes popup-slide-left-exit { - to { - transform: translate3d(-100%, 0, 0); - } +.nut-menu-title.disabled { + color: var(--nutui-menu-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc)); } -.nut-popup-slide-left-enter-active, -.nut-popup-slide-left-appear-active { - -ms-transform: translate(0); - transform: translate(0); - animation-fill-mode: both; - animation-name: popup-slide-left-enter; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-menu-title.active .nut-menu-title-icon { + transform: rotate(180deg); } -.nut-popup-slide-left-exit-active, -.nut-popup-slide-left-exit-done { - animation-fill-mode: both; - animation-name: popup-slide-left-exit; - animation-duration: var(--nutui-popup-animation-duration, 0.3s); +.nut-loading { + display: flex; + display: inline-flex; + flex-direction: row; + align-items: center; + justify-content: center; } -[dir='rtl'] .nut-popup-title-left, -.nut-rtl .nut-popup-title-left { - left: auto; - right: var(--nutui-popup-title-padding, 16rpx); +.nut-loading-vertical { + flex-direction: column; } -[dir='rtl'] .nut-popup-title-right, -.nut-rtl .nut-popup-title-right { - right: auto; - left: var(--nutui-popup-title-padding, 16rpx); +.nut-loading .nut-loading-icon-box { + display: inline-block; + font-size: 0; + line-height: 0; + animation: nut-loading-rotation 1s infinite linear; } -[dir='rtl'] .nut-popup-title-right-top-left, -.nut-rtl .nut-popup-title-right-top-left, -[dir='rtl'] .nut-popup-title-right-bottom-left, -.nut-rtl .nut-popup-title-right-bottom-left { - left: auto; - right: var(--nutui-popup-title-padding, 16rpx); +.nut-loading .nut-loading-icon-box .nut-loading-icon { + color: var(--nutui-loading-icon-color, var(--nutui-color-text-help, #888b94)); + width: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); + height: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); + font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); } -[dir='rtl'] .nut-popup-title-right-bottom-right, -.nut-rtl .nut-popup-title-right-bottom-right { - right: auto; - left: var(--nutui-popup-title-padding, 16rpx); +.nut-loading .nut-loading-text { + color: var(--nutui-loading-color, var(--nutui-color-text-help, #888b94)); + font-size: var(--nutui-loading-font-size, var(--nutui-font-size-s, 12rpx)); } -[dir='rtl'] .nut-popup-title .nut-icon-ArrowLeft, -.nut-rtl .nut-popup-title .nut-icon-ArrowLeft { - -ms-transform: rotate(180deg); - transform: rotate(180deg); +.nut-loading-vertical .nut-loading-text { + padding-top: var(--nutui-spacing-base, 8rpx); } -[dir='rtl'] .nut-popup-center, -.nut-rtl .nut-popup-center { - left: auto; - right: 50%; - -ms-transform: translate(50%, -50%); - transform: translate(50%, -50%); +@keyframes nut-loading-rotation { + 0% { + } + to { + } } -.nut-popover-arrow { - position: absolute; - width: 8rpx; - height: 4rpx; +.nut-inputnumber { + display: flex; + display: inline-flex; + width: calc(2 * var(--nutui-inputnumber-input-margin, 0rpx) + 2 * var(--nutui-inputnumber-button-width, 20rpx) + var(--nutui-inputnumber-input-width, 26rpx)); + flex-direction: row; + align-items: center; + background-color: var(--nutui-color-background, #f2f3f5); + border-radius: var(--nutui-inputnumber-input-border-radius, 4rpx); + overflow: hidden; } -.nut-popover-arrow-top { - bottom: -4rpx; +.nut-inputnumber-minus, +.nut-inputnumber-add { + display: flex; + justify-content: center; + align-items: center; + width: var(--nutui-inputnumber-button-width, 20rpx); + height: var(--nutui-inputnumber-button-height, 20rpx); + background-color: var(--nutui-inputnumber-button-background-color, transparent); } -.nut-popover-arrow-bottom { - top: -4rpx; +.nut-inputnumber-minus .nut-icon, +.nut-inputnumber-add .nut-icon { + --nut-icon-width: 10rpx; + --nut-icon-height: 10rpx; } -.nut-popover-arrow-left { - right: -6rpx; - -ms-transform-origin: center top; - transform-origin: center top; +.nut-inputnumber-icon { + color: var(--nutui-color-text, #505259); + cursor: pointer; } -.nut-popover-arrow-left.nut-popover-arrow-left { - top: 50%; - -ms-transform: rotate(90deg) translateY(-50%); - transform: rotate(90deg) translateY(-50%); +.nut-inputnumber-icon-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc); + cursor: not-allowed; } -.nut-popover-arrow-left.nut-popover-arrow-left-top { - top: 16rpx; - right: -8rpx; - -ms-transform: rotate(90deg) translateY(0); - transform: rotate(90deg) translateY(0); +.nut-inputnumber-input { + display: flex; + justify-content: center; + align-items: center; + width: var(--nutui-inputnumber-input-width, 26rpx); + font-size: var(--nutui-inputnumber-input-font-size, var(--nutui-font-size-s, 12rpx)); + height: var(--nutui-inputnumber-input-height, 20rpx); + text-align: center; + outline: none; + border: var(--nutui-inputnumber-input-border, 0); + margin-left: var(--nutui-inputnumber-input-margin, 0rpx); + margin-right: var(--nutui-inputnumber-input-margin, 0rpx); + color: var(--nutui-color-text, #505259); + background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-color-background, #f2f3f5)); } -.nut-popover-arrow-left.nut-popover-arrow-left-bottom { - top: auto; - bottom: 16rpx; - right: -8rpx; - -ms-transform: rotate(90deg) translateY(0); - transform: rotate(90deg) translateY(0); +.nut-inputnumber-input::-webkit-outer-spin-button, +.nut-inputnumber-input::-webkit-inner-spin-button { + appearance: none; } -.nut-popover-arrow-right { - -ms-transform-origin: center top; - transform-origin: center top; +.nut-inputnumber-input-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc); } -.nut-popover-arrow-right.nut-popover-arrow-right { - top: 50%; - left: -6rpx; - -ms-transform: rotate(-90deg) translateY(-50%); - transform: rotate(-90deg) translateY(-50%); +.nut-inputnumber-icon-minus, +.nut-inputnumber-icon-plus { + --nut-icon-width: 16rpx; + --nut-icon-height: 16rpx; } -.nut-popover-arrow-right.nut-popover-arrow-right-top { - top: 16rpx; - left: -8rpx; - -ms-transform: rotate(-90deg) translateY(0); - transform: rotate(-90deg) translateY(0); +.nut-infiniteloading { + display: block; + width: 100%; } -.nut-popover-arrow-right.nut-popover-arrow-right-bottom { - bottom: 16rpx; - left: -8rpx; - -ms-transform: rotate(-90deg) translateY(0); - transform: rotate(-90deg) translateY(0); +.nut-infiniteloading .nut-infinite-top { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + overflow: hidden; + font-size: var(--nutui-font-size-s, 12rpx); + color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help, #888b94)); } -.nut-popover .nut-popover-content { - position: absolute; - background: var(--nutui-popover-content-background-color, #ffffff); - border-radius: var(--nutui-popover-border-radius, var(--nutui-radius-xs, 4rpx)); - font-size: var(--nutui-popover-font-size, var(--nutui-font-size-s, 12rpx)); - color: var(--nutui-popover-text-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7))); - line-height: 28rpx; - max-height: none; - max-height: initial; - overflow-y: visible; - overflow-y: initial; +.nut-infiniteloading .nut-infinite-top-tips { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } -.nut-popover .nut-popover-content-group { - padding: 0 var(--nutui-popover-padding, 8rpx); +.nut-infiniteloading .nut-infinite-top-tips-icons { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 4rpx; } -.nut-popover .nut-popover-content .nut-popover-item { - display: -ms-flexbox; +.nut-infiniteloading .nut-infinite-bottom { display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - border-bottom: 1rpx solid var(--nutui-popover-divider-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - max-width: var(--nutui-popover-item-width, 160rpx); - word-wrap: break-word; + width: 100%; + padding-top: 6rpx; + color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help, #888b94)); + text-align: center; } -.nut-popover .nut-popover-content .nut-popover-item-icon, -.nut-popover .nut-popover-content .nut-popover-item-action-icon { - display: -ms-flexbox; +.nut-infiniteloading .nut-infinite-bottom-tips { display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; - width: var(--nutui-font-size-s, 12rpx); - height: var(--nutui-font-size-s, 12rpx); - font-size: var(--nutui-font-size-s, 12rpx); + font-size: var(--nutui-font-size-xxs, 10rpx); } -.nut-popover .nut-popover-content .nut-popover-item-icon .nut-icon, -.nut-popover .nut-popover-content .nut-popover-item-action-icon .nut-icon { - width: var(--nutui-font-size-s, 12rpx); - height: var(--nutui-font-size-s, 12rpx); - font-size: var(--nutui-font-size-s, 12rpx); +.nut-infiniteloading .nut-infinite-bottom-tips-icons { + margin-right: 8rpx; } -.nut-popover .nut-popover-content .nut-popover-item-icon { - margin-right: var(--nutui-spacing-xxs, 4rpx); +.nut-infiniteloading-primary { + background-color: var(--nutui-color-primary, #ff0f23); } -.nut-popover .nut-popover-content .nut-popover-item-name { - width: calc(100% - 34rpx); - word-break: keep-all; - -ms-flex: 1; - flex: 1; +.nut-infiniteloading-primary .nut-infinite-bottom, +.nut-infiniteloading-primary .nut-infinite-top { + color: var(--nutui-color-text-dark, rgba(255, 255, 255, 0.9)); } -.nut-popover .nut-popover-content .nut-popover-item-action-icon { - color: var(--nutui-color-text, #505259); - margin-left: var(--nutui-spacing-base, 8rpx); +[dir='rtl'] .nut-infiniteloading .nut-infinite-bottom-tips-icons, +.nut-rtl .nut-infiniteloading .nut-infinite-bottom-tips-icons { + margin-right: 0; + margin-left: 8rpx; } -.nut-popover .nut-popover-content-top .nut-popover-arrow-top { - left: 50%; - -ms-transform-origin: center left; - transform-origin: center left; - -ms-transform: rotate(180deg) translate(-50%); - transform: rotate(180deg) translate(-50%); +.nut-input { + position: relative; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + flex: 1; + align-items: center; + font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); + box-sizing: border-box; } -.nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right { - right: 16rpx; - bottom: -3.5rpx; - -ms-transform: rotate(180deg) translate(0); - transform: rotate(180deg) translate(0); +.nut-input .nut-input-native .weui-input::-webkit-input-placeholder { + color: #757575; + font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); } -.nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left { - left: 16rpx; - bottom: -3.5rpx; - -ms-transform: rotate(180deg) translate(0); - transform: rotate(180deg) translate(0); +.nut-input .nut-input-native .weui-input::placeholder, +.nut-input-placeholder { + color: #757575; + font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); } -.nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom { - left: 50%; - -ms-transform: translate(-50%); - transform: translate(-50%); +.nut-input .nut-icon { + color: var(--nutui-color-text-disabled, #c2c4cc); + width: 14rpx; + height: 14rpx; + font-size: 14rpx; } -.nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right { - right: 16rpx; - -ms-transform: translate(0); - transform: translate(0); +.nut-input-container { + height: 38rpx; + padding: var(--nutui-input-padding, 12rpx); + background-color: var(--nutui-input-background-color, var(--nutui-color-background-overlay, #ffffff)); + border-radius: var(--nutui-input-border-radius, var(--nutui-radius-s, 6rpx)); + border-bottom: var(--nutui-input-border-bottom-width, 0rpx) solid var(--nutui-input-border-bottom, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left { - left: 16rpx; - -ms-transform: translate(0); - transform: translate(0); +.nut-input-native { + flex: 1; + color: var(--nutui-input-color, var(--nutui-color-title, #1a1a1a)); + font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); + padding: 0; + border: 0; + outline: 0 none; + text-decoration: none; + background-color: transparent; } -.nut-popover-dark .nut-popover-content .nut-popover-item-action-icon { - color: rgba(255, 255, 255, 0.8); +.nut-input-readonly .nut-input-native { + color: var(--nutui-color-text-help, #888b94); } -[dir='rtl'] .nut-popover .nut-popover-content .nut-popover-item-name, -.nut-rtl .nut-popover .nut-popover-content .nut-popover-item-name { - margin-left: 0; - margin-right: 4rpx; +.nut-input-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc) !important; } -[dir='rtl'] .nut-popover .nut-popover-content-top .nut-popover-arrow-top, -.nut-rtl .nut-popover .nut-popover-content-top .nut-popover-arrow-top { - left: auto; - right: 50%; - -ms-transform: translate(50%); - transform: translate(50%); +.nut-indicator { + display: flex; + width: auto; + flex-direction: row; + flex-wrap: nowrap; + align-items: center; } -[dir='rtl'] .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right, -.nut-rtl .nut-popover .nut-popover-content-top-right .nut-popover-arrow-top-right { - right: auto; - left: 16rpx; +.nut-indicator-fixed-width { + width: 21rpx; +} +.nut-indicator-dot, +.nut-indicator-line { + display: inline-block; + vertical-align: middle; + width: var(--nutui-indicator-dot-size, 3rpx); + height: var(--nutui-indicator-dot-size, 3rpx); + border-radius: 50%; + background-color: var(--nutui-color-border-disabled, #c2c4cc); + margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); + opacity: 0.4; } -[dir='rtl'] .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left, -.nut-rtl .nut-popover .nut-popover-content-top-left .nut-popover-arrow-top-left { - left: auto; - right: 16rpx; +.nut-indicator-dot-0, +.nut-indicator-line-0 { + margin-left: 0; } -[dir='rtl'] .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom, -.nut-rtl .nut-popover .nut-popover-content-bottom .nut-popover-arrow-bottom { - left: auto; - right: 50%; - -ms-transform: translate(50%); - transform: translate(50%); +.nut-indicator-dot-active, +.nut-indicator-line-active { + width: var(--nutui-indicator-dot-active-size, 6rpx); + border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); + background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23)); + opacity: 1; } -[dir='rtl'] .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right, -.nut-rtl .nut-popover .nut-popover-content-bottom-right .nut-popover-arrow-bottom-right { - right: auto; - left: 16rpx; +.nut-indicator-fixed-width .nut-indicator-dot { + width: 12rpx; + border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); } -[dir='rtl'] .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left, -.nut-rtl .nut-popover .nut-popover-content-bottom-left .nut-popover-arrow-bottom-left { - left: auto; - right: 16rpx; +.nut-indicator-fixed-width .nut-indicator-dot-active { + width: 6rpx; } -.nut-popover-enter-from, -.nut-popover-leave-active { - -ms-transform: scale(0.8); - transform: scale(0.8); - opacity: 0; +.nut-indicator-vertical.nut-indicator-fixed-width { + justify-content: flex-start; + height: 21rpx; + width: auto; } -.nut-popover-content-copy { - position: absolute; - top: -99999rpx; +.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot { + width: 3rpx; + height: 12rpx; + border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); } -.nut-pickerview { - position: relative; - display: -ms-flexbox; - display: flex; - width: 100%; - height: calc(var(--nutui-picker-item-height, 36rpx) * 7); - overflow: hidden; +.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active, +.nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active { + height: 6rpx; } -.nut-pickerview-mask { - top: 0; - bottom: 0; - background-image: var( - --picker-mask-background, - linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), - linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)) - ); - background-position: top, bottom; - background-size: 100% calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); - background-repeat: no-repeat; - transform: translateZ(0); +.nut-indicator-line { + width: var(--nutui-indicator-dot-active-size, 6rpx); + margin: 0; + border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); + background-color: transparent; } -.nut-pickerview-indicator { - top: calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); - height: var(--nutui-picker-item-height, 36rpx); - border: var(--nutui-picker-item-active-line-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - border-left: 0; - border-right: 0; - box-sizing: border-box; +.nut-indicator-line-active { + transition: transform 0.3s ease-in-out; + background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23)); } -.nut-pickerview-list { +.nut-indicator-track { position: relative; - -ms-flex: 1; - flex: 1; - height: calc(var(--nutui-picker-item-height, 36rpx) * 7); - overflow: hidden; - -ms-touch-action: none; - touch-action: none; -} -.nut-pickerview-roller { - position: absolute; - top: calc((var(--nutui-picker-item-height, 36rpx) * 7 - var(--nutui-picker-item-height, 36rpx)) / 2); - width: 100%; - height: var(--nutui-picker-item-height, 36rpx); - z-index: 1; - transform-style: preserve-3d; -} -.nut-pickerview-roller-placeholder { - height: var(--nutui-picker-item-height, 36rpx); } -.nut-pickerview-roller-item { +.nut-indicator-track::after { + display: block; + content: ' '; position: absolute; - top: 0; - backface-visibility: hidden; - -moz-backface-visibility: hidden; -} -.nut-pickerview-roller-item, -.nut-pickerview-roller-item-tiled { width: 100%; - height: var(--nutui-picker-item-height, 36rpx); - line-height: var(--nutui-picker-item-height, 36rpx); - color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14rpx)); - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.nut-picker-control { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: justify; - justify-content: space-between; - height: var(--nutui-popup-title-height, 50rpx); - padding: var(--nutui-popup-title-padding, 16rpx); + height: 100%; box-sizing: border-box; - font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); + border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); + background-color: var(--nutui-color-border-disabled, #c2c4cc); + opacity: 0.4; } -.nut-picker-cancel-btn { - color: var(--nutui-picker-title-cancel-color, var(--nutui-color-text, #505259)); - font-size: var(--nutui-picker-title-cancel-font-size, var(--nutui-font-size-base, 14rpx)); +.nut-indicator-white .nut-indicator-dot, +.nut-indicator-white .nut-indicator-line { + position: relative; + box-sizing: content-box; + background: rgba(255, 255, 255, 0.4); + opacity: 1; } -.nut-picker-confirm-btn { - color: var(--nutui-picker-title-ok-color, var(--nutui-color-primary, #ff0f23)); - font-size: var(--nutui-picker-title-ok-font-size, var(--nutui-font-size-base, 14rpx)); +.nut-indicator-white .nut-indicator-line { + opacity: 0; } -.nut-picker-title { - -ms-flex: 1; - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - text-align: center; - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); - font-weight: var(--nutui-popup-title-font-weight, var(--nutui-font-weight-bold, 600)); +.nut-indicator-white .nut-indicator-line-active { + opacity: 1; + background: #fff; } -.nut-pagination { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23)); +.nut-indicator-white .nut-indicator-dot-active { + background: #fff; } -.nut-pagination-prev, -.nut-pagination-item, -.nut-pagination-next { - height: 39rpx; - min-width: 39rpx; - -ms-flex-negative: 0; - flex-shrink: 0; - box-sizing: border-box; - display: -ms-flexbox; +.nut-indicator-track.nut-indicator-white::after { + border: 1rpx solid rgba(0, 0, 0, 0.06); + background: rgba(255, 255, 255, 0.4); +} +.nut-indicator-vertical { display: flex; - -ms-flex-align: center; + flex-direction: column; align-items: center; - -ms-flex-pack: center; justify-content: center; - font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23)); - background: #fff; - border-radius: var(--nutui-pagination-item-border-radius, 2rpx); - border: var(--nutui-pagination-item-border-width, 1rpx) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - cursor: pointer; } -.nut-pagination-prev, -.nut-pagination-next { - padding: var(--nutui-pagination-prev-next-padding, 0 12rpx); +.nut-indicator-vertical .nut-indicator-dot { + margin: 0; + margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); } -.nut-pagination-simple { - height: 39rpx; - width: 124rpx; - line-height: 39rpx; - text-align: center; - font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23)); +.nut-indicator-vertical .nut-indicator-dot-0 { + margin-top: 0; } -.nut-pagination-simple-border { - border-right: var(--nutui-pagination-item-border-width, 1rpx) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +.nut-indicator-vertical .nut-indicator-dot-active, +.nut-indicator-vertical.nut-indicator-track .nut-indicator-line { + width: var(--nutui-indicator-dot-size, 3rpx); + height: var(--nutui-indicator-dot-active-size, 6rpx); } -.nut-pagination-lite { - height: var(--nutui-pagination-lite-height, 20rpx); - padding: 0 var(--nutui-spacing-xs, 6rpx); - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - color: #fff; - background-color: var(--nutui-pagination-lite-background-color, rgba(0, 0, 0, 0.45)); - border-radius: var(--nutui-pagination-lite-radius, var(--nutui-radius-xs, 4rpx)); +[dir='rtl'] .nut-indicator-dot-0, +.nut-rtl .nut-indicator-dot-0 { + margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); + margin-left: 0; } -.nut-pagination-lite-active, -.nut-pagination-lite-default, -.nut-pagination-lite-spliterator { - font-size: var(--nutui-font-size-xs, 11rpx); - color: var(--nutui-pagination-lite-color, #ffffff); +.nut-imagepreview { + width: 100%; + height: 100%; } -.nut-overlay-slide-enter-active, -.nut-overlay-slide-appear-active { - animation-fill-mode: both; - animation-name: nut-fade-in; - animation-duration: var(--nutui-overlay-animation-duration, 0.3s); +.nut-imagepreview-swiper { + height: 100%; + width: 100vw; + background-color: transparent; } -.nut-overlay-slide-exit-active { - animation-fill-mode: both; - animation-name: nut-fade-out; - animation-duration: var(--nutui-overlay-animation-duration, 0.3s); +.nut-imagepreview-index { + position: fixed; + z-index: 2002; + top: 50rpx; + text-align: center; + left: 0; + right: 0; + background: transparent; + color: #fff; } -.nut-numberkeyboard { - width: 100%; - padding: var(--nutui-numberkeyboard-padding, 0 0 22rpx 0); - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-background, #f2f3f5)); +.nut-imagepreview-index .arrow { + position: absolute; + left: 15rpx; + transform: rotate(180deg); } -.nut-numberkeyboard-header { - position: relative; - display: -ms-flexbox; +.nut-imagepreview-close { + position: fixed; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - box-sizing: content-box; - padding: var(--nutui-popup-title-padding, 16rpx); - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); + z-index: 2002; + background: transparent; + color: #fff; } -.nut-numberkeyboard-header-title { - color: var(--nutui-color-title, #1a1a1a); - display: inline-block; - font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-xl, 18rpx)); +.nut-imagepreview-close .nut-icon { + color: #fff; } -.nut-numberkeyboard-header-close { - position: absolute; - display: block; +.nut-imagepreview-close.top-right { + top: 50rpx; + right: 20rpx; +} +.nut-imagepreview-close.top-left { + top: 50rpx; + left: 20rpx; +} +.nut-imagepreview-close.bottom { + bottom: 50rpx; + left: 0; right: 0; - top: 50%; - -ms-transform: translateY(-50%); - transform: translateY(-50%); - padding: var(--nutui-numberkeyboard-header-close-padding, 0 16rpx); - color: var(--nutui-numberkeyboard-header-close-color, var(--nutui-color-text, #505259)); - font-size: var(--nutui-numberkeyboard-header-close-font-size, 14rpx); - background-color: var(--nutui-numberkeyboard-header-close-background-color, transparent); - border: none; - cursor: pointer; + text-align: center; } -.nut-numberkeyboard-body { - display: -ms-flexbox; +.nut-imagepreview-pop { + width: 100%; + height: 100%; + max-width: 100% !important; + background: transparent !important; display: flex; - padding: 6rpx 0 0 6rpx; -} -.nut-numberkeyboard-body-wrapper { - position: relative; - -ms-flex: 1; - flex: 1; - width: 33%; - -ms-flex-preferred-size: 33%; - flex-basis: 33%; - box-sizing: border-box; - padding: 0 6rpx 6rpx 0; - background-color: var(--nutui-numberkeyboard-wrapper-background-color, var(--nutui-color-background-sunken, #f7f8fc)); + align-items: center; } -.nut-numberkeyboard-body-wrapper .key { - display: -ms-flexbox; +.nut-imagepreview-swiper .nut-imagepreview-swiper-item, +.nut-imagepreview-swiper .nut-swiper-item { display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - height: var(--nutui-numberkeyboard-key-height, 48rpx); - font-size: var(--nutui-numberkeyboard-key-font-size, var(--nutui-font-size-xl, 18rpx)); - line-height: var(--nutui-numberkeyboard-key-line-height, 1.5); - background-color: var(--nutui-numberkeyboard-key-background-color, var(--nutui-color-background-overlay, #ffffff)); - color: var(--nutui-numberkeyboard-key-color, var(--nutui-color-text, #505259)); - border-radius: var(--nutui-numberkeyboard-key-border-radius, 8rpx); - border: var(--nutui-numberkeyboard-key-border, none); - font-weight: var(--nutui-font-weight-bold, 600); - cursor: pointer; + height: 100%; } -.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key { - position: absolute; - top: 0; - right: 6rpx; - bottom: 6rpx; - left: 0; - height: auto; +.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-image, +.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-video, +.nut-imagepreview-swiper .nut-swiper-item .nut-image, +.nut-imagepreview-swiper .nut-swiper-item .nut-video { + display: flex; + justify-content: center; + align-items: center; } -.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm { - font-size: var(--nutui-numberkeyboard-key-confirm-font-size, var(--nutui-font-size-l, 15rpx)); - color: var(--nutui-numberkeyboard-key-confirm-color, #fff); - background-color: var(--nutui-numberkeyboard-key-confirm-background-color, var(--nutui-color-primary, #ff0f23)); +.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-image-preview-box, +.nut-imagepreview-swiper .nut-swiper-item .nut-image-preview-box { + width: 100%; } -.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm.active { - background-color: rgba(255, 0, 0, 0.70196); +.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-video .h5-video, +.nut-imagepreview-swiper .nut-swiper-item .nut-video .h5-video { + object-fit: contain; } -[dir='rtl'] .nut-popup .nut-numberkeyboard-body, -.nut-rtl .nut-popup .nut-numberkeyboard-body { - padding: 6rpx 6rpx 0 0; +[dir='rtl'] .nut-imagepreview-index .arrow, +.nut-rtl .nut-imagepreview-index .arrow { + left: auto; + right: 15rpx; + transform: rotate(-180deg); } -[dir='rtl'] .nut-popup .nut-numberkeyboard-body-wrapper, -.nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper { - padding: 0 0 6rpx 6rpx; +[dir='rtl'] .nut-imagepreview-close.top-right, +.nut-rtl .nut-imagepreview-close.top-right { + right: auto; + left: 20rpx; } -[dir='rtl'] .nut-popup .nut-numberkeyboard-body-wrapper .delete, -.nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper .delete { - -ms-transform: rotate(-180deg); - transform: rotate(-180deg); +[dir='rtl'] .nut-imagepreview-close.top-left, +.nut-rtl .nut-imagepreview-close.top-left { + left: auto; + right: 20rpx; } -[dir='rtl'] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key, -.nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key { - left: 6rpx; - right: 0; +.nut-hoverbutton-item-container { + width: var(--nutui-hoverbutton-item-size, 40rpx); + height: var(--nutui-hoverbutton-item-size, 40rpx); + border-radius: var(--nutui-hoverbutton-item-size, 40rpx); + border: 1rpx solid var(--nutui-hoverbutton-item-border-color, rgba(0, 0, 0, 0.12)); + background-color: var(--nutui-hoverbutton-item-background, var(--nutui-white-12)); } -[dir='rtl'] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete, -.nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete { - -ms-transform: rotate(-180deg); - transform: rotate(-180deg); +.nut-hoverbutton-item-container-active { + background-color: var(--nutui-hoverbutton-item-background-active, rgba(247, 248, 252, 0.9)); } -.nut-notify { - position: fixed; - left: 8rpx; - right: 8rpx; - z-index: var(--nutui-notify-z-index, 1000); - display: -ms-flexbox; +.nut-hoverbutton-item-container-harmony { + margin-bottom: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8rpx)); +} +.nut-hoverbutton-item-container-harmony:last-child { + margin-bottom: 0; +} +.nut-hoverbutton-item-container-icontext { display: flex; - -ms-flex-align: center; + flex-direction: column; align-items: center; - box-sizing: border-box; - height: var(--nutui-notify-height, 40rpx); - padding: var(--nutui-notify-padding, 0rpx 12rpx); - border-radius: var(--nutui-notify-border-radius, 8rpx); - box-shadow: var(--nutui-notify-box-shadow, 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.06)); - background-color: var(--nutui-notify-background-color, #ffffff); } -.nut-notify-content { - -ms-flex: 1; - flex: 1; - text-align: center; - min-width: 0; - font-size: var(--nutui-notify-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-notify-text-color, var(--nutui-color-title, #1a1a1a)); - white-space: nowrap; - overflow: hidden; +.nut-hoverbutton-item-container-icontext .nut-icon { + display: block; + width: 14rpx; + height: 14rpx; + font-size: 14rpx; } -.nut-notify-left-icon { - margin-right: 6rpx; +.nut-hoverbutton-item-icon { + width: 20rpx; + height: 20rpx; + margin: 9rpx; + color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a)); + fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a)); } -.nut-notify-left-icon .nut-icon { - height: 16rpx; - width: 16rpx; +.nut-hoverbutton-item-icon .nut-icon { + display: block; + width: 20rpx; + height: 20rpx; + font-size: 20rpx; } -.nut-notify-right-icon { - margin-left: 6rpx; +.nut-hoverbutton-item-text-icon { + width: 14rpx; + height: 5rpx; } -.nut-notify-right-icon .nut-icon { - height: 12rpx; - width: 12rpx; +.nut-hoverbutton-item-text { + font-size: 10rpx; + margin-top: 5rpx; + line-height: 9rpx; } -.nut-noticebar .nut-noticebar-box { - position: relative; - display: -ms-flexbox; +.nut-hoverbutton { display: flex; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-noticebar-height, 36rpx); - padding: var(--nutui-noticebar-box-padding, 0 16rpx); - font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, 12rpx)); - background: var(--nutui-noticebar-background, rgb(251, 248, 220)); - color: var(--nutui-noticebar-color, #d9500b); - border-radius: var(--nutui-noticebar-border-radius, 0); + flex-direction: column; + gap: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8rpx)); } -.nut-noticebar .nut-noticebar-box-wrapable, -.nut-noticebar .nut-noticebar-box-center { - height: auto; - padding: var(--nutui-noticebar-wrapable-padding, 8rpx 16rpx); +.nut-hoverbutton-container { + position: fixed; + right: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, 8rpx)); + bottom: var(--nutui-hoverbutton-position-bottom, 60rpx); + z-index: 10; } -.nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content { +[dir='rtl'] .nut-hoverbutton-container, +.nut-hoverbutton-container-rtl { + right: auto; + left: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, 8rpx)); +} +.nut-image { + display: block; position: relative; - display: inline; - display: initial; } -.nut-noticebar .nut-noticebar-box-left-icon { - display: -ms-flexbox; - display: flex; - height: var(--nutui-noticebar-left-icon-width, 16rpx); - min-width: var(--nutui-noticebar-left-icon-width, 16rpx); - margin-right: var(--nutui-noticebar-icon-gap, 4rpx); - background-size: 100% 100%; +.nut-image-default { + display: block; + width: 100%; + height: 100%; } -.nut-noticebar .nut-noticebar-box-right-icon { - display: -ms-flexbox; +.nut-image.nut-image-round { + border-radius: 50%; + overflow: hidden; +} +.nut-image-basic { + width: 100%; + height: 100%; +} +.nut-image-loading, +.nut-image-error { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; display: flex; - -ms-flex-align: center; + flex-direction: column; align-items: center; - -ms-flex-pack: center; justify-content: center; - width: var(--nutui-noticebar-right-icon-width, 16rpx); - margin-left: var(--nutui-noticebar-icon-gap, 4rpx); + background: var(--nutui-color-background, #f2f3f5); + background-size: 100% 100%; } -.nut-noticebar .nut-noticebar-box-right-icon .nut-icon { - width: 12rpx; - height: 12rpx; - color: var(--nutui-noticebar-color, #d9500b); +[dir='rtl'] .nut-image .nut-img-loading, +.nut-rtl .nut-image .nut-img-loading, +[dir='rtl'] .nut-image .nut-img-error, +.nut-rtl .nut-image .nut-img-error { + left: auto; + right: 0; } -.nut-noticebar .nut-noticebar-box-wrap { - display: -ms-flexbox; +.nut-grid-item { display: flex; - -ms-flex: 1; - flex: 1; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-noticebar-line-height, 24rpx); - line-height: var(--nutui-noticebar-line-height, 24rpx); - overflow: hidden; + flex-direction: column; position: relative; + box-sizing: border-box; + color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a)); + overflow: hidden; } -.nut-noticebar .nut-noticebar-box .play { - animation: nut-notice-bar-play linear both running; -} -.nut-noticebar .nut-noticebar-box .play-infinite { - animation: nut-notice-bar-play-infinite linear infinite both running; +.nut-grid-item-text { + color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a)); + font-size: var(--nutui-grid-item-text-font-size, var(--nutui-font-size-s, 12rpx)); + word-break: break-all; + margin: var(--nutui-grid-item-text-margin, 8rpx) 0 0 0; } -.nut-noticebar .nut-noticebar-box .play-vertical { - animation: nut-notice-bar-play-vertical linear infinite both running; +.nut-grid-item-text-reverse { + margin: 0 0 var(--nutui-grid-item-text-margin, 8rpx) 0; } -.nut-noticebar .nut-noticebar-vertical { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - justify-content: space-between; - height: var(--nutui-noticebar-height, 36rpx); - font-size: var(--nutui-noticebar-font-size, var(--nutui-font-size-s, 12rpx)); - overflow: hidden; - padding: var(--nutui-noticebar-box-padding, 0 16rpx); - background: var(--nutui-noticebar-background, rgb(251, 248, 220)); - color: var(--nutui-noticebar-color, #d9500b); +.nut-grid-item-text-horizontal { + margin: 0 0 0 var(--nutui-grid-item-text-margin, 8rpx); } -.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-left-icon { - height: var(--nutui-noticebar-left-icon-width, 16rpx); - min-width: var(--nutui-noticebar-left-icon-width, 16rpx); - margin: var(--nutui-noticebar-icon-gap, 4rpx); - background-size: 100% 100%; - display: -ms-flexbox; - display: flex; - -ms-flex-item-align: center; - align-self: center; +.nut-grid-item-text-horizontal-reverse { + margin: 0 var(--nutui-grid-item-text-margin, 8rpx) 0 0; } -.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-horseLamp-list-item { - display: -ms-flexbox; +.nut-grid-item-content { display: flex; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-noticebar-height, 36rpx); + box-sizing: border-box; + flex: 1; + flex-direction: column; width: 100%; + padding: var(--nutui-grid-item-content-padding, 16rpx 8rpx); + background: var(--nutui-grid-item-content-bg-color, var(--nutui-gray-1)); + border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon { - -ms-flex-item-align: center; - align-self: center; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - width: var(--nutui-noticebar-right-icon-width, 16rpx); - margin-left: var(--nutui-noticebar-icon-gap, 4rpx); +.nut-grid-item-content-border { + border-right-width: var(--nutui-grid-border-width, 0rpx); + border-bottom-width: var(--nutui-grid-border-width, 0rpx); } -@keyframes nut-notice-bar-play { - to { - transform: translate3d(-100%, 0, 0); - } +.nut-grid-item-content-surround { + border-top-width: var(--nutui-grid-border-width, 0rpx); + border-left-width: var(--nutui-grid-border-width, 0rpx); + border-radius: var(--nutui-grid-item-border-radius, var(--nutui-radius-l, 8rpx)); } -@keyframes nut-notice-bar-play-infinite { - to { - transform: translate3d(-100%, 0, 0); - } +.nut-grid-item-content-center { + align-items: center; + justify-content: center; } -@keyframes nut-notice-bar-play-vertical { - to { - transform: translateY(var(--nutui-noticebar-height, 36rpx)); - } +.nut-grid-item-content-square { + margin-top: -100%; } -[dir='rtl'] .nut-noticebar .nut-noticebar-box-left-icon, -.nut-rtl .nut-noticebar .nut-noticebar-box-left-icon { - margin-right: 0; - margin-left: var(--nutui-noticebar-icon-gap, 4rpx); +.nut-grid-item-content-reverse { + flex-direction: column-reverse; } -[dir='rtl'] .nut-noticebar .nut-noticebar-box-right-icon, -.nut-rtl .nut-noticebar .nut-noticebar-box-right-icon { - margin-left: 0; - margin-right: var(--nutui-noticebar-icon-gap, 4rpx); +.nut-grid-item-content-horizontal { + flex-direction: row; } -[dir='rtl'] .nut-noticebar .nut-noticebar-box .play, -.nut-rtl .nut-noticebar .nut-noticebar-box .play { - animation: nut-notice-bar-play-rtl linear both running; +.nut-grid-item-content-horizontal-reverse { + flex-direction: row-reverse; } -[dir='rtl'] .nut-noticebar .nut-noticebar-box .play-infinite, -.nut-rtl .nut-noticebar .nut-noticebar-box .play-infinite { - animation: nut-notice-bar-play-infinite-rtl linear infinite both running; +.nut-grid-item-content-clickable { + cursor: pointer; } -@keyframes nut-notice-bar-play-rtl { - to { - transform: translate3d(100%, 0, 0); - } +.nut-grid-item-content-clickable::before { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); + border: inherit; + border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); + border-radius: inherit; + transform: translate(-50%, -50%); + opacity: 0; + content: ' '; } -@keyframes nut-notice-bar-play-infinite-rtl { - to { - transform: translate3d(100%, 0, 0); - } +[dir='rtl'] .nut-grid-item-content-border, +.nut-rtl .nut-grid-item-content-border { + border-right-width: 0; + border-left-width: 1rpx; } -[dir='rtl'] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon, -.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon { - margin-left: 0; - margin-right: var(--nutui-noticebar-icon-gap, 4rpx); +[dir='rtl'] .nut-grid-item-content-surround, +.nut-rtl .nut-grid-item-content-surround { + border-left-width: 0; + border-right-width: 1rpx; } -.nut-navbar { - width: var(--nutui-navbar-width, 100%); - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-pack: justify; - justify-content: space-between; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-navbar-height, 44rpx); - box-sizing: border-box; - background: var(--nutui-navbar-background, #ffffff); - box-shadow: var(--nutui-navbar-box-shadow, none); - font-size: var(--nutui-navbar-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-navbar-color, var(--nutui-color-title, #1a1a1a)); - overflow: hidden; - padding: 0 16rpx; +[dir='rtl'] .nut-grid-item-content-horizontal .nut-grid-item-text, +.nut-rtl .nut-grid-item-content-horizontal .nut-grid-item-text { + margin: 0 var(--nutui-grid-item-text-margin, 8rpx) 0 0; } -.nut-navbar-title { - height: 100%; - text-align: center; - display: -ms-flexbox; - display: flex; - -ms-flex: 1; - flex: 1; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - font-size: var(--nutui-navbar-title-font-size, var(--nutui-font-size-xl, 18rpx)); - font-weight: var(--nutui-navbar-title-font-weight, var(--nutui-font-weight-bold, 600)); - color: var(--nutui-navbar-title-font-color, var(--nutui-color-title, #1a1a1a)); +[dir='rtl'] .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text, +.nut-rtl .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text { + margin: 0 0 0 var(--nutui-grid-item-text-margin, 8rpx); } -.nut-navbar-title-center { - max-width: 129rpx; - -ms-flex-pack: center; - justify-content: center; +[dir='rtl'] .nut-grid-item-content-clickable::before, +.nut-rtl .nut-grid-item-content-clickable::before { + left: auto; + right: 50%; + transform: translate(50%, -50%); } -.nut-navbar-left, -.nut-navbar-right { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-direction: row; +.nut-grid { + display: flex; flex-direction: row; - max-width: 124rpx; - height: 100%; - cursor: pointer; + align-items: stretch; + flex-wrap: wrap; + border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-navbar-left .nut-icon, -.nut-navbar-left .nutui-iconfont, -.nut-navbar-right .nut-icon, -.nut-navbar-right .nutui-iconfont { - width: 20rpx; - height: 20rpx; - font-size: 20rpx; +.nut-grid-border { + border-top-width: var(--nutui-grid-border-width, 0rpx); + border-left-width: var(--nutui-grid-border-width, 0rpx); } -.nut-navbar-left-maxwidth, -.nut-navbar-right-maxwidth { - box-sizing: border-box; - width: 108rpx; +[dir='rtl'] .nut-grid-border, +.nut-rtl .nut-grid-border { + border-left-width: 0; + border-right-width: 1rpx; } -.nut-navbar-left { - padding-right: 16rpx; - gap: 16rpx; +.nut-form-item { + display: flex; + line-height: inherit; } -.nut-navbar-left-rtl { - padding-right: 0; - padding-left: 16rpx; +.nut-form-item-disabled { + opacity: 0.4; + pointer-events: none; } -.nut-navbar-left-back { - display: -ms-flexbox; +.nut-form-item-label { display: flex; - -ms-flex-direction: row; flex-direction: row; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - gap: 16rpx; + font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, 12rpx)); + font-weight: 400; + width: var(--nutui-form-item-label-width, 90rpx); + margin-right: var(--nutui-form-item-label-margin-right, 10rpx); + flex: 0 0 auto; + word-wrap: break-word; + text-align: var(--nutui-form-item-label-text-align, left); + line-height: inherit; } -.nut-navbar-right { - padding-left: 16rpx; - -ms-flex-pack: end; - justify-content: flex-end; - gap: 16rpx; +.nut-form-item-label-left-required { + color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23)); + margin-right: var(--nutui-form-item-required-margin-right, 4rpx); + position: absolute; + left: -10rpx; } -.nut-navbar-right-rtl { - padding-right: 16rpx; - padding-left: 0; +.nut-form-item-label-right-required { + color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23)); + margin-left: var(--nutui-form-item-required-margin-right, 4rpx); + position: absolute; + right: -10rpx; } -.nut-navbar-rtl .nut-icon-ArrowLeft { - transform: rotateY(180deg); +.nut-form-item .nut-form-item-labeltxt { + position: relative; + font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, 12rpx)); } -.nut-menu-container-content { - padding: var(--nutui-menu-content-padding, 12rpx 24rpx); - max-height: var(--nutui-menu-content-max-height, 214rpx); - overflow-y: auto; - display: -ms-flexbox; +.nut-form-item-body { + flex: 1; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - background: var(--nutui-menu-content-background-color, var(--nutui-color-background-overlay, #ffffff)); + flex-direction: column; } -.nut-menu-container-item { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-font-size-base, 14rpx); - padding: var(--nutui-menu-item-padding, 12rpx 0); +.nut-form-item-body-slots { + text-align: var(--nutui-form-item-body-slots-text-align, left); } -.nut-menu-container-item .nut-icon { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - margin-right: var(--nutui-menu-item-icon-margin, 8rpx); - -ms-flex-negative: 0; - flex-shrink: 0; +.nut-form-item-body-slots .nut-input { + padding: 0; + border: 0; } -.nut-menu-container-wrap-up { - bottom: var(--nutui-menu-bar-line-height, 48rpx); +.nut-form-item-body-slots .nut-input-container { + height: auto; } -.nut-menu-container-down-enter { - opacity: 0; - -ms-transform: translateY(-30rpx); - transform: translateY(-30rpx); +.nut-form-item-body-slots .nut-input-text { + font-size: var(--nutui-form-item-body-font-size, var(--nutui-font-size-base, 14rpx)); + text-align: var(--nutui-form-item-body-input-text-align, left); + color: var(--nutui-color-title, #1a1a1a); + width: 100%; + outline: 0 none; + border: 0; + text-decoration: none; + background: transparent; } -.nut-menu-container-down-enter-done { - opacity: 1; - -ms-transform: translate(0); - transform: translate(0); - transition: all 0.1s; +.nut-form-item-body-slots .nut-range-container { + min-height: 24rpx; } -.nut-menu-container-up-enter { - opacity: 0; - -ms-transform: translateY(30rpx); - transform: translateY(30rpx); +.nut-form-item-body-slots .nut-textarea { + padding: 0; } -.nut-menu-container-up-enter-done { - opacity: 1; - -ms-transform: translate(0); - transform: translate(0); - transition: all 0.1s; +.nut-form-item-body-slots .nut-textarea .nut-textarea-textarea { + font: inherit; + text-align: var(--nutui-form-item-body-input-text-align, left); } -[dir='rtl'] .nut-menu-container-item .nut-icon, -.nut-rtl .nut-menu-container-item .nut-icon { +.nut-form-item-body-tips { + text-align: var(--nutui-form-item-tip-text-align, left); + font-size: var(--nutui-form-item-tip-font-size, var(--nutui-font-size-xs, 11rpx)); + color: var(--nutui-form-item-error-message-color, var(--nutui-color-primary, #ff0f23)); +} +[dir='rtl'] .nut-form-item-label, +.nut-rtl .nut-form-item-label { + text-align: right; margin-right: 0; - margin-left: var(--nutui-menu-item-icon-margin, 8rpx); + margin-left: var(--nutui-form-item-label-margin-right, 10rpx); } -[dir='rtl'] .nut-menu-container .nut-icon, -.nut-rtl .nut-menu-container .nut-icon { +[dir='rtl'] .nut-form-item-label .required::before, +.nut-rtl .nut-form-item-label .required::before { + margin-right: 0; + margin-left: var(--nutui-form-item-required-margin-right, 4rpx); +} +[dir='rtl'] .nut-form-item-body-slots, +.nut-rtl .nut-form-item-body-slots { + text-align: right; +} +[dir='rtl'] .nut-form-item-body-slots .nut-icon-ArrowRight, +[dir='rtl'] .nut-form-item-body-slots .nut-icon-ArrowLeft, +.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowRight, +.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowLeft { transform: rotateY(180deg); } -.nut-menu-bar { - position: relative; - display: -ms-flexbox; - display: flex; - line-height: var(--nutui-menu-bar-line-height, 48rpx); - background-color: var(--nutui-color-background-overlay, #ffffff); - box-shadow: var(--nutui-menu-bar-box-shadow, 0 2rpx 12rpx rgba(89, 89, 89, 0.12)); +[dir='rtl'] .nut-form-item-body-slots .nut-input-text, +.nut-rtl .nut-form-item-body-slots .nut-input-text, +[dir='rtl'] .nut-form-item-body-slots .nut-textarea-textarea, +.nut-rtl .nut-form-item-body-slots .nut-textarea-textarea, +[dir='rtl'] .nut-form-item-tips, +.nut-rtl .nut-form-item-tips { + text-align: right; } -.nut-menu-title { - -ms-flex: 1; - flex: 1; - text-align: center; - font-size: var(--nutui-menu-title-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-menu-title-color, var(--nutui-color-title, #1a1a1a)); - min-width: 0; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - max-width: 100%; +.nut-form-item-label-right { + justify-content: flex-end; + padding-right: 24rpx; + white-space: nowrap; } -.nut-menu-title-text { +.nut-form-item-label-left { + position: relative; + padding-left: 12rpx; white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; +} +.nut-form-item-top { + flex-direction: column; + align-items: flex-start; + white-space: nowrap; +} +.nut-form-item-label-top { display: block; - padding: var(--nutui-menu-title-padding, 0 8rpx); + padding-bottom: 4rpx; + padding-right: 24rpx; +} +.nut-form-item-body-top { + margin-left: 0; + width: 100%; +} +[dir='rtl'] .form-layout-right .nut-form-item-label, +.nut-rtl .form-layout-right .nut-form-item-label { + text-align: left; + padding-right: 0; + padding-left: 24rpx; +} +[dir='rtl'] .form-layout-left .nut-form-item-label, +.nut-rtl .form-layout-left .nut-form-item-label { + text-align: right; + padding-left: 0; + padding-right: 12rpx; +} +[dir='rtl'] .form-layout-left .nut-form-item-label .required, +.nut-rtl .form-layout-left .nut-form-item-label .required { + left: auto; + right: 0.1em; +} +[dir='rtl'] .form-layout-top .nut-form-item-label, +.nut-rtl .form-layout-top .nut-form-item-label { + padding-right: 0; + padding-left: 24rpx; +} +[dir='rtl'] .form-layout-top .nut-form-item-body, +.nut-rtl .form-layout-top .nut-form-item-body { + margin-left: 0; + margin-right: 0; } -.nut-menu-title.active .nut-menu-title-icon { - -ms-transform: rotate(180deg); +.nut-fixednav { + position: fixed; + z-index: var(--nutui-fixednav-index, 900); + display: inline-block; + height: 50rpx; +} +.nut-fixednav.active .nut-fixednav-btn .nut-icon { transform: rotate(180deg); } -.nut-loading .nut-loading-icon-box { - display: inline-block; - font-size: 0; - line-height: 0; - animation: nut-loading-rotation 1s infinite linear; +.nut-fixednav.active .nut-fixednav-list { + transform: translate(0) !important; } -.nut-loading .nut-loading-icon-box .nut-loading-icon { - color: var(--nutui-loading-icon-color, var(--nutui-color-text-help, #888b94)); - width: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); - height: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); - font-size: var(--nutui-loading-icon-size, var(--nutui-font-size-s, 12rpx)); +.nut-fixednav.active.nut-fixednav-left .nut-icon { + transform: rotate(0); } -.nut-loading .nut-loading-text { - color: var(--nutui-loading-color, var(--nutui-color-text-help, #888b94)); - font-size: var(--nutui-loading-font-size, var(--nutui-font-size-s, 12rpx)); +.nut-fixednav-btn { + box-sizing: border-box; + position: absolute; + z-index: var(--nutui-fixednav-index, 900); + width: 70rpx; + height: 100%; + background: var(--nutui-fixednav-button-background, var(--nutui-color-primary, #ff0f23)); + box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); + display: flex; + align-items: center; + justify-content: center; } -.nut-loading-vertical .nut-loading-text { - padding-top: var(--nutui-spacing-base, 8rpx); +.nut-fixednav-btn .text { + width: 24rpx; + line-height: 13rpx; + font-size: var(--nutui-font-size-s, 12rpx); + color: #fff; + flex-shrink: 0; } -@keyframes nut-loading-rotation { - 0% { - } - to { - } +.nut-fixednav-btn .nut-icon { + transition: all 0.3s; } -.nut-inputnumber { - display: -ms-flexbox; +.nut-fixednav-list { + position: absolute; + transition: all 0.5s; + z-index: var(--nutui-fixednav-index, 900); + flex-shrink: 0; + height: 100%; + background: var(--nutui-fixednav-background-color, #ffffff); display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - width: calc(2 * var(--nutui-inputnumber-input-margin, 0rpx) + 2 * var(--nutui-inputnumber-button-width, 20rpx) + var(--nutui-inputnumber-input-width, 26rpx)); - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - background-color: var(--nutui-color-background, #f2f3f5); - border-radius: var(--nutui-inputnumber-input-border-radius, 4rpx); - overflow: hidden; + justify-content: space-between; + box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.2); } -.nut-inputnumber-minus, -.nut-inputnumber-add { - display: -ms-flexbox; +.nut-fixednav-list-item { + position: relative; + flex: 1; + height: 100%; display: flex; - -ms-flex-pack: center; + flex-direction: column; justify-content: center; - -ms-flex-align: center; align-items: center; - width: var(--nutui-inputnumber-button-width, 20rpx); - height: var(--nutui-inputnumber-button-height, 20rpx); - background-color: var(--nutui-inputnumber-button-background-color, transparent); + min-width: 50rpx; + flex-shrink: 0; + color: var(--nutui-fixednav-color, #1a1a1a); } -.nut-inputnumber-minus .nut-icon, -.nut-inputnumber-add .nut-icon { - --nut-icon-width: 10rpx; - --nut-icon-height: 10rpx; +.nut-fixednav-list-item .nut-fixednav-list-text { + font-size: 10rpx; } -.nut-inputnumber-input { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - width: var(--nutui-inputnumber-input-width, 26rpx); - font-size: var(--nutui-inputnumber-input-font-size, var(--nutui-font-size-s, 12rpx)); - height: var(--nutui-inputnumber-input-height, 20rpx); - text-align: center; - outline: none; - border: var(--nutui-inputnumber-input-border, 0); - margin-left: var(--nutui-inputnumber-input-margin, 0rpx); - margin-right: var(--nutui-inputnumber-input-margin, 0rpx); - color: var(--nutui-color-text, #505259); - background-color: var(--nutui-inputnumber-input-background-color, var(--nutui-color-background, #f2f3f5)); +.nut-fixednav-list-image { + width: 20rpx; + height: 20rpx; + margin-bottom: 2rpx; } -.nut-inputnumber-input::-webkit-outer-spin-button, -.nut-inputnumber-input::-webkit-inner-spin-button { - appearance: none; +.nut-fixednav-right { + right: 0; } -.nut-inputnumber-icon-minus, -.nut-inputnumber-icon-plus { - --nut-icon-width: 16rpx; - --nut-icon-height: 16rpx; +.nut-fixednav-right .nut-fixednav-btn { + right: 0; + border-radius: 45rpx 0 0 45rpx; } -.nut-infiniteloading .nut-infinite-top { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - overflow: hidden; - font-size: var(--nutui-font-size-s, 12rpx); - color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help, #888b94)); +.nut-fixednav-right .nut-fixednav-btn .nut-icon { + margin-right: 5rpx; + transform: rotate(0); } -.nut-infiniteloading .nut-infinite-top-tips-icons { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - margin-bottom: 4rpx; +.nut-fixednav-right .nut-fixednav-list { + right: 0; + transform: translate(100%); + border-radius: 25rpx 0 0 25rpx; + padding-left: 20rpx; + padding-right: 80rpx; } -.nut-infiniteloading .nut-infinite-bottom { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - width: 100%; - padding-top: 6rpx; - color: var(--nutui-infiniteloading-color, var(--nutui-color-text-help, #888b94)); - text-align: center; +.nut-fixednav-left { + left: 0; } -.nut-infiniteloading .nut-infinite-bottom-tips { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - font-size: var(--nutui-font-size-xxs, 10rpx); +.nut-fixednav-left .nut-fixednav-btn { + flex-direction: row-reverse; + left: 0; + border-radius: 0 45rpx 45rpx 0; } -.nut-infiniteloading .nut-infinite-bottom-tips-icons { - margin-right: 8rpx; +.nut-fixednav-left .nut-fixednav-btn .nut-icon { + margin-left: 5rpx; + transform: rotate(180deg); } -[dir='rtl'] .nut-infiniteloading .nut-infinite-bottom-tips-icons, -.nut-rtl .nut-infiniteloading .nut-infinite-bottom-tips-icons { +.nut-fixednav-left .nut-fixednav-list { + transform: translate(-100%); + left: 0; + border-radius: 0 25rpx 25rpx 0; + padding-left: 80rpx; + padding-right: 20rpx; +} +[dir='rtl'] .nut-fixednav-right, +.nut-rtl .nut-fixednav-right { + right: auto; + left: 0; +} +[dir='rtl'] .nut-fixednav.active .nut-icon, +.nut-rtl .nut-fixednav.active .nut-icon { + transform: rotate(0); +} +[dir='rtl'] .nut-fixednav.active.nut-fixednav-left .nut-icon, +.nut-rtl .nut-fixednav.active.nut-fixednav-left .nut-icon { + transform: rotate(-180deg); +} +[dir='rtl'] .nut-fixednav-btn, +.nut-rtl .nut-fixednav-btn { + right: auto; + left: 0; + border-radius: 0 45rpx 45rpx 0; +} +[dir='rtl'] .nut-fixednav-btn .nut-icon, +.nut-rtl .nut-fixednav-btn .nut-icon { margin-right: 0; - margin-left: 8rpx; + margin-left: 5rpx; + transform: rotate(180deg); } -.nut-input { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - -ms-flex: 1; - flex: 1; - -ms-flex-align: center; - align-items: center; - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); - box-sizing: border-box; +[dir='rtl'] .nut-fixednav-list, +.nut-rtl .nut-fixednav-list { + right: auto; + left: 0; + transform: translate(-100%); + border-radius: 0 25rpx 25rpx 0; + box-shadow: -2rpx 2rpx 8rpx rgba(0, 0, 0, 0.2); + padding-right: 20rpx; + padding-left: 80rpx; } -.nut-input .nut-input-native .weui-input::-webkit-input-placeholder { - color: #757575; - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); +[dir='rtl'] .nut-fixednav-list-item .b, +.nut-rtl .nut-fixednav-list-item .b { + right: auto; + left: 0; } -.nut-input .nut-input-native .weui-input::-moz-placeholder { - color: #757575; - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); +[dir='rtl'] .nut-fixednav-left, +.nut-rtl .nut-fixednav-left { + left: auto; + right: 0; } -.nut-input .nut-input-native .weui-input:-ms-input-placeholder { - color: #757575; - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); +[dir='rtl'] .nut-fixednav-left .nut-fixednav-btn, +.nut-rtl .nut-fixednav-left .nut-fixednav-btn { + left: auto; + right: 0; + border-radius: 45rpx 0 0 45rpx; } -.nut-input .nut-input-native .weui-input::-ms-input-placeholder { - color: #757575; - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); +[dir='rtl'] .nut-fixednav-left .nut-fixednav-btn .nut-icon, +.nut-rtl .nut-fixednav-left .nut-fixednav-btn .nut-icon { + transform: rotate(0); + margin-right: 5rpx; + margin-left: 0; } -.nut-input .nut-input-native .weui-input::placeholder, -.nut-input-placeholder { - color: #757575; - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); +[dir='rtl'] .nut-fixednav-left .nut-fixednav-list, +.nut-rtl .nut-fixednav-left .nut-fixednav-list { + transform: translate(100%); + right: auto; + left: auto; + border-radius: 25rpx 0 0 25rpx; + padding-right: 80rpx; + padding-left: 20rpx; } -.nut-input .nut-icon { - color: var(--nutui-color-text-disabled, #c2c4cc); - width: 14rpx; - height: 14rpx; - font-size: 14rpx; +.nut-drag .nut-fixednav { + position: relative; } -.nut-input-container { - height: 38rpx; - padding: var(--nutui-input-padding, 12rpx); - background-color: var(--nutui-input-background-color, var(--nutui-color-background-overlay, #ffffff)); - border-radius: var(--nutui-input-border-radius, var(--nutui-radius-s, 6rpx)); - border-bottom: var(--nutui-input-border-bottom-width, 0rpx) solid var(--nutui-input-border-bottom, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +.nut-ellipsis { + display: flex; } -.nut-input-native { - -ms-flex: 1; - flex: 1; - color: var(--nutui-input-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-input-font-size, var(--nutui-font-size-base, 14rpx)); - padding: 0; - border: 0; - outline: 0 none; - text-decoration: none; - background-color: transparent; +.nut-ellipsis .nut-ellipsis-text { + cursor: pointer; + color: var(--nutui-ellipsis-expand-collapse-color, var(--nutui-color-info, #0073ff)); + display: inline-block; } -.nut-indicator-fixed-width { - width: 21rpx; +.nut-ellipsis .nut-ellipsis-wordbreak { + word-break: break-all; } -.nut-indicator-dot, -.nut-indicator-line { - display: inline-block; - vertical-align: middle; - width: var(--nutui-indicator-dot-size, 3rpx); - height: var(--nutui-indicator-dot-size, 3rpx); - border-radius: 50%; - background-color: var(--nutui-color-border-disabled, #c2c4cc); - margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); - opacity: 0.4; +.nut-ellipsis-copy { + position: absolute; + top: -999999rpx; } -.nut-indicator-dot-active, -.nut-indicator-line-active { - width: var(--nutui-indicator-dot-active-size, 6rpx); - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); - background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23)); - opacity: 1; +.nut-ellipsis-width { + width: fit-content; } -.nut-indicator-fixed-width .nut-indicator-dot { - width: 12rpx; - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); +.nut-elevator { + position: relative; + display: flex; + width: 100%; } -.nut-indicator-fixed-width .nut-indicator-dot-active { - width: 6rpx; +.nut-elevator-list { + position: relative; + top: 0; + display: flex; + width: 100%; + overflow: hidden; } -.nut-indicator-vertical.nut-indicator-fixed-width { - -ms-flex-pack: start; - justify-content: flex-start; - height: 21rpx; - width: auto; +.nut-elevator-list-inner { + display: flex; + flex-direction: column; + min-height: 100%; + width: 100%; + background-color: var(--nutui-elevator-list-bg-color, #ffffff); + overflow: auto; } -.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot { - width: 3rpx; - height: 12rpx; - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); +.nut-elevator-list-item { + display: flex; } -.nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active, -.nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active { - height: 6rpx; +.nut-elevator-list-item-sublist { + display: flex; + flex-direction: column; } -.nut-indicator-line { - width: var(--nutui-indicator-dot-active-size, 6rpx); - margin: 0; - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); - background-color: transparent; +.nut-elevator-list-item-code { + display: flex; + align-items: center; + height: var(--nutui-elevator-list-item-code-height, 34rpx); + font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-elevator-list-item-code-color, var(--nutui-color-text-help, #888b94)); + font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600)); } -.nut-indicator-line-active { - transition: transform 0.3s ease-in-out; - background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23)); +.nut-elevator-list-item-name { + display: flex; + align-items: center; + height: var(--nutui-elevator-list-item-name-height, 34rpx); + font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-elevator-list-color, var(--nutui-color-title, #1a1a1a)); } -.nut-indicator-track::after { - display: block; - content: ' '; +.nut-elevator-list-item-name-highcolor { + color: var(--nutui-color-primary, #ff0f23); + font-weight: 600; +} +.nut-elevator-list-fixed { position: absolute; + top: 0; + left: 0; + z-index: 1; + display: flex; + align-items: center; width: 100%; - height: 100%; + padding: var(--nutui-elevator-list-item-padding, 0 36rpx 0 20rpx); + height: var(--nutui-elevator-list-item-code-height, 34rpx); box-sizing: border-box; - border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, 2rpx)); - background-color: var(--nutui-color-border-disabled, #c2c4cc); - opacity: 0.4; + box-shadow: var(--nutui-elevator-list-fixed-box-shadow, 0 0 10rpx #eee); + background-color: var(--nutui-elevator-list-fixed-bg-color, #ffffff); } -.nut-indicator-white .nut-indicator-dot, -.nut-indicator-white .nut-indicator-line { - position: relative; - box-sizing: content-box; - background: rgba(255, 255, 255, 0.4); - opacity: 1; +.nut-elevator-list-fixed-title { + font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-elevator-list-fixed-color, var(--nutui-color-primary, #ff0f23)); + font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600)); } -.nut-indicator-track.nut-indicator-white::after { - border: 1rpx solid rgba(0, 0, 0, 0.06); - background: rgba(255, 255, 255, 0.4); +.nut-elevator-code-current { + position: absolute; + right: var(--nutui-elevator-list-item-code-current-right, 60rpx); + top: var(--nutui-elevator-list-item-code-current-top, 50%); + transform: var(--nutui-elevator-bars-transform, translateY(-50%)); + display: flex; + align-items: center; + justify-content: center; + width: var(--nutui-elevator-list-item-code-current-width, 45rpx); + height: var(--nutui-elevator-list-item-code-current-height, 45rpx); + border-radius: var(--nutui-elevator-list-item-code-current-border-radius, 50%); + background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-text-disabled, #c2c4cc)); + box-shadow: 0 3rpx 3rpx 1rpx #f0f0f0; + color: var(--nutui-elevator-list-item-code-current-color, #ffffff); } -.nut-indicator-vertical .nut-indicator-dot { - margin: 0; - margin-top: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); +.nut-elevator-bars { + position: absolute; + right: var(--nutui-elevator-bars-right, 16rpx); + top: var(--nutui-elevator-bars-top, 50%); + transform: var(--nutui-elevator-bars-transform, translateY(-50%)); + z-index: var(--nutui-elevator-bars-z-index, 1); } -.nut-indicator-vertical .nut-indicator-dot-active, -.nut-indicator-vertical.nut-indicator-track .nut-indicator-line { - width: var(--nutui-indicator-dot-size, 3rpx); - height: var(--nutui-indicator-dot-active-size, 6rpx); +.nut-elevator-bars-inner { + display: flex; + flex-direction: column; } -[dir='rtl'] .nut-indicator-dot-0, -.nut-rtl .nut-indicator-dot-0 { - margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, 4rpx)); - margin-left: 0; +.nut-elevator-bars-inner-item { + display: flex; + display: inline-flex; + align-items: center; + justify-content: center; + height: 16rpx; + width: 16rpx; + border-radius: 50%; + margin: 1rpx 0; + color: var(--nutui-elevator-bars-color, var(--nutui-color-text-help, #888b94)); + font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-size-xxs, 10rpx)); + cursor: pointer; } -.nut-imagepreview-index { - position: fixed; - z-index: 2002; - top: 50rpx; - text-align: center; - left: 0; - right: 0; - background: transparent; - color: #fff; +.nut-elevator-bars-inner-item-active { + font-weight: var(--nutui-font-weight-bold, 600); + color: var(--nutui-elevator-bars-active-color, #ffffff); + background: linear-gradient(to right, #ff475d, #ff0f23); + background: #ff0f23; } -.nut-imagepreview-index .arrow { - position: absolute; - left: 15rpx; - -ms-transform: rotate(180deg); - transform: rotate(180deg); +.nut-elevator-horizontal .nut-elevator-list-item-code { + width: var(--nutui-elevator-list-item-code-width, 34rpx); + justify-content: center; +} +.nut-elevator-vertical .nut-elevator-list-item { + flex-direction: column; +} +.nut-elevator-vertical .nut-elevator-list-item-code { + border-bottom: var(--nutui-elevator-list-item-code-border-bottom, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +} +.nut-elevator-vertical .nut-elevator-list-item-name, +.nut-elevator-vertical .nut-elevator-list-item-code { + padding: var(--nutui-elevator-list-item-padding, 0 36rpx 0 20rpx); +} +[dir='rtl'] .nut-elevator-list-fixed, +.nut-rtl .nut-elevator-list-fixed { + left: auto; + right: 0; } -.nut-imagepreview-close.top-right { - top: 50rpx; - right: 20rpx; +[dir='rtl'] .nut-elevator-code-current, +.nut-rtl .nut-elevator-code-current { + right: auto; + left: var(--nutui-elevator-list-item-code-current-right, 60rpx); } -.nut-imagepreview-close.top-left { - top: 50rpx; - left: 20rpx; +[dir='rtl'] .nut-elevator-bars, +.nut-rtl .nut-elevator-bars { + right: auto; + left: var(--nutui-elevator-bars-right, 16rpx); } -.nut-imagepreview-close.bottom { - bottom: 50rpx; - left: 0; - right: 0; - text-align: center; +.nut-drag { + position: fixed; + z-index: 9997 !important; + width: 0; + height: 0; + touch-action: none; + user-select: none; + font-size: 0; } -.nut-imagepreview-swiper .nut-imagepreview-swiper-item .nut-video .h5-video, -.nut-imagepreview-swiper .nut-swiper-item .nut-video .h5-video { - -o-object-fit: contain; - object-fit: contain; +.nut-drag-inner { + display: flex; + display: inline-flex; + width: fit-content; + height: fit-content; + touch-action: none; } -[dir='rtl'] .nut-imagepreview-index .arrow, -.nut-rtl .nut-imagepreview-index .arrow { - left: auto; - right: 15rpx; - -ms-transform: rotate(-180deg); - transform: rotate(-180deg); +.nut-empty { + box-sizing: border-box; + width: 100%; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + padding: var(--nutui-empty-padding, 32rpx 40rpx); + background-color: var(--nutui-empty-background-color, var(--nutui-color-background-overlay, #ffffff)); } -[dir='rtl'] .nut-imagepreview-close.top-right, -.nut-rtl .nut-imagepreview-close.top-right { - right: auto; - left: 20rpx; +.nut-empty-base { + width: var(--nutui-empty-image-size, 160rpx); + height: var(--nutui-empty-image-size, 160rpx); } -[dir='rtl'] .nut-imagepreview-close.top-left, -.nut-rtl .nut-imagepreview-close.top-left { - left: auto; - right: 20rpx; +.nut-empty-base .h5-img, +.nut-empty-base image { + width: 100%; + height: 100%; } -.nut-hoverbutton-item-container { - width: var(--nutui-hoverbutton-item-size, 40rpx); - height: var(--nutui-hoverbutton-item-size, 40rpx); - border-radius: var(--nutui-hoverbutton-item-size, 40rpx); - border: 1rpx solid var(--nutui-hoverbutton-item-border-color, rgba(0, 0, 0, 0.12)); - background-color: var(--nutui-hoverbutton-item-background, var(--nutui-white-12)); +.nut-empty-small { + width: var(--nutui-empty-image-small-size, 120rpx); + height: var(--nutui-empty-image-small-size, 120rpx); } -.nut-hoverbutton-item-container-active { - background-color: var(--nutui-hoverbutton-item-background-active, rgba(247, 248, 252, 0.9)); +.nut-empty-small .h5-img, +.nut-empty-small image { + width: 100%; + height: 100%; } -.nut-hoverbutton-item-container-harmony { - margin-bottom: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8rpx)); +.nut-empty-title { + margin-top: var(--nutui-empty-title-margin-top, 0rpx); + font-weight: var(--nutui-font-weight-bold, 600); + margin-bottom: var(--nutui-empty-title-margin-bottom, 12rpx); + color: var(--nutui-color-title, #1a1a1a); + font-size: var(--nutui-font-size-l, 15rpx); + line-height: var(--nutui-empty-title-line-height, var(--nutui-font-size-l, 15rpx)); } -.nut-hoverbutton-item-container-icontext .nut-icon { - display: block; - width: 14rpx; - height: 14rpx; - font-size: 14rpx; +.nut-empty-description { + color: var(--nutui-color-text, #505259); + font-size: var(--nutui-font-size-s, 12rpx); + line-height: var(--nutui-empty-description-line-height, 1); } -.nut-hoverbutton-item-icon { - width: 20rpx; - height: 20rpx; - margin: 9rpx; - color: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a)); - fill: var(--nutui-hoverbutton-item-icon-color, var(--nutui-color-title, #1a1a1a)); +.nut-empty-actions-base { + display: flex; + flex-direction: row; + margin-top: 24rpx; } -.nut-hoverbutton-item-icon .nut-icon { - display: block; - width: 20rpx; - height: 20rpx; - font-size: 20rpx; +.nut-empty-actions-small { + display: flex; + flex-direction: row; + margin-top: 16rpx; } -.nut-hoverbutton-item-text-icon { - width: 14rpx; - height: 5rpx; +.nut-empty-action { + margin-right: 6rpx; + margin-left: 6rpx; } -.nut-hoverbutton-item-text { - font-size: 10rpx; - margin-top: 5rpx; - line-height: 9rpx; +.nut-divider { + display: flex; + align-items: center; + flex-direction: row; + font-size: var(--nutui-divider-text-font-size, var(--nutui-font-size-base, 14rpx)); + color: var(--nutui-divider-text-color, var(--nutui-color-text, #505259)); + margin: var(--nutui-divider-margin, 16rpx 0); + width: 100%; + border: 0 solid var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } -.nut-hoverbutton { - display: -ms-flexbox; +.nut-divider-before, +.nut-divider-after { display: flex; - -ms-flex-direction: column; - flex-direction: column; - gap: var(--nutui-hoverbutton-spacing, var(--nutui-spacing-base, 8rpx)); + border-style: solid; + border-color: var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + border-width: var(--nutui-divider-line-height, 1rpx) 0 0; + height: var(--nutui-divider-line-height, 1rpx); + flex: 1; } -.nut-hoverbutton-container { - position: fixed; - right: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, 8rpx)); - bottom: var(--nutui-hoverbutton-position-bottom, 60rpx); - z-index: 10; +.nut-divider-center-before, +.nut-divider-left-before, +.nut-divider-right-before { + margin-right: var(--nutui-divider-spacing, 8rpx); } -[dir='rtl'] .nut-hoverbutton-container, -.nut-hoverbutton-container-rtl { - right: auto; - left: var(--nutui-hoverbutton-position-right, var(--nutui-spacing-base, 8rpx)); +.nut-divider-center-after, +.nut-divider-left-after, +.nut-divider-right-after { + margin-left: var(--nutui-divider-spacing, 8rpx); } -.nut-grid-item-text { - color: var(--nutui-grid-item-text-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-grid-item-text-font-size, var(--nutui-font-size-s, 12rpx)); - word-break: break-all; - margin: var(--nutui-grid-item-text-margin, 8rpx) 0 0 0; +.nut-divider-left-before, +.nut-divider-right-after { + width: var(--nutui-divider-side-width, 10%); + flex: none; } -.nut-grid-item-text-reverse { - margin: 0 0 var(--nutui-grid-item-text-margin, 8rpx) 0; +.nut-divider-vertical { + display: flex; + display: inline-flex; + width: 0rpx; + height: var(--nutui-divider-vertical-height, 12rpx); + border-left: 1rpx solid var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); + margin: var(--nutui-divider-vertical-margin, 0 8rpx); + vertical-align: middle; } -.nut-grid-item-text-horizontal { - margin: 0 0 0 var(--nutui-grid-item-text-margin, 8rpx); +.nut-divider-rtl-before { + margin-right: 0; + margin-left: var(--nutui-divider-spacing, 8rpx); } -.nut-grid-item-text-horizontal-reverse { - margin: 0 var(--nutui-grid-item-text-margin, 8rpx) 0 0; +.nut-divider-rtl-after { + margin-left: 0; + margin-right: var(--nutui-divider-spacing, 8rpx); } -.nut-grid-item-content { - display: -ms-flexbox; +.nut-datepickerview { display: flex; - box-sizing: border-box; - -ms-flex: 1; - flex: 1; - -ms-flex-direction: column; - flex-direction: column; width: 100%; - padding: var(--nutui-grid-item-content-padding, 16rpx 8rpx); - background: var(--nutui-grid-item-content-bg-color, var(--nutui-gray-1)); - border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); -} -.nut-grid-item-content-border { - border-right-width: var(--nutui-grid-border-width, 0rpx); - border-bottom-width: var(--nutui-grid-border-width, 0rpx); } -.nut-grid-item-content-surround { - border-top-width: var(--nutui-grid-border-width, 0rpx); - border-left-width: var(--nutui-grid-border-width, 0rpx); - border-radius: var(--nutui-grid-item-border-radius, var(--nutui-radius-l, 8rpx)); +.nut-dialog { + display: flex; + flex-direction: column; + align-items: center; + width: var(--nutui-dialog-width, 295rpx); + min-width: var(--nutui-dialog-min-width, 240rpx); + max-height: 67%; + min-height: var(--nutui-dialog-min-height, 124rpx); + padding: var(--nutui-dialog-padding, 24rpx); + box-sizing: border-box; } -.nut-grid-item-content-clickable::before { - position: absolute; +.nut-dialog-outer { + position: fixed; + max-height: 100%; + background-color: var(--nutui-dialog-background, var(--nutui-color-background-overlay, #ffffff)); + transition: transform 0.2s; + -webkit-overflow-scrolling: touch; top: 50%; left: 50%; - width: 100%; - height: 100%; - background-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); - border: inherit; - border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); - border-radius: inherit; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); - opacity: 0; - content: ' '; -} -[dir='rtl'] .nut-grid-item-content-border, -.nut-rtl .nut-grid-item-content-border { - border-right-width: 0; - border-left-width: 1rpx; + border-radius: var(--nutui-dialog-border-radius, var(--nutui-radius-xl, 12rpx)); + animation-duration: 0.3s; } -[dir='rtl'] .nut-grid-item-content-surround, -.nut-rtl .nut-grid-item-content-surround { - border-left-width: 0; - border-right-width: 1rpx; +.nut-dialog-close { + position: absolute !important; + z-index: 1; + cursor: pointer; + width: var(--nutui-dialog-close-width, 16rpx); + height: var(--nutui-dialog-close-height, 16rpx); + display: flex; + justify-content: center; + align-items: center; + color: var(--nutui-dialog-close-color, #ffffff); } -[dir='rtl'] .nut-grid-item-content-horizontal .nut-grid-item-text, -.nut-rtl .nut-grid-item-content-horizontal .nut-grid-item-text { - margin: 0 var(--nutui-grid-item-text-margin, 8rpx) 0 0; +.nut-dialog-close .nut-icon { + font-size: var(--nutui-dialog-close-width, 16rpx); + width: var(--nutui-dialog-close-width, 16rpx); + height: var(--nutui-dialog-close-height, 16rpx); } -[dir='rtl'] .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text, -.nut-rtl .nut-grid-item-content-horizontal.nut-grid-item-content-reverse .nut-grid-item-text { - margin: 0 0 0 var(--nutui-grid-item-text-margin, 8rpx); +.nut-dialog-close-top-right { + top: var(--nutui-dialog-close-top, 16rpx); + right: var(--nutui-dialog-close-right, 16rpx); } -[dir='rtl'] .nut-grid-item-content-clickable::before, -.nut-rtl .nut-grid-item-content-clickable::before { - left: auto; - right: 50%; - -ms-transform: translate(50%, -50%); - transform: translate(50%, -50%); +.nut-dialog-close-top-left { + top: var(--nutui-dialog-close-top, 16rpx); + left: var(--nutui-dialog-close-left, 16rpx); } -.nut-grid-border { - border-top-width: var(--nutui-grid-border-width, 0rpx); - border-left-width: var(--nutui-grid-border-width, 0rpx); +.nut-dialog-close-bottom { + bottom: -64rpx; + width: var(--nutui-dialog-bottom-close-icon-size, 24rpx); + height: var(--nutui-dialog-bottom-close-icon-size, 24rpx); + left: 50%; + transform: translate(-50%); } -[dir='rtl'] .nut-grid-border, -.nut-rtl .nut-grid-border { - border-left-width: 0; - border-right-width: 1rpx; +.nut-dialog-close-bottom .nut-icon { + color: var(--nutui-color-text-disabled, #c2c4cc); + background-color: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)); + border-radius: 50%; + width: var(--nutui-dialog-bottom-close-icon-size, 24rpx); + height: var(--nutui-dialog-bottom-close-icon-size, 24rpx); } -.nut-form-item { - display: -ms-flexbox; - display: flex; - line-height: inherit; +.nut-dialog-header { + display: block; + text-align: center; + font-size: var(--nutui-dialog-header-font-size, var(--nutui-font-size-xl, 18rpx)); + font-weight: var(--nutui-dialog-header-font-weight, var(--nutui-font-weight-bold, 600)); + color: var(--nutui-color-title, #1a1a1a); + margin-bottom: var(--nutui-dialog-title-margin-bottom, 8rpx); + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } -.nut-form-item-label { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, 12rpx)); - font-weight: 400; - width: var(--nutui-form-item-label-width, 90rpx); - margin-right: var(--nutui-form-item-label-margin-right, 10rpx); - -ms-flex: 0 0 auto; - flex: 0 0 auto; +.nut-dialog-content { + width: 100%; + margin: var(--nutui-dialog-content-margin, 0 0 20rpx 0); + max-height: var(--nutui-dialog-content-max-height, 268rpx); + line-height: var(--nutui-dialog-content-line-height, 20rpx); + font-size: var(--nutui-font-size-base, 14rpx); + color: var(--nutui-color-title, #1a1a1a); word-wrap: break-word; - text-align: var(--nutui-form-item-label-text-align, left); - line-height: inherit; + word-break: break-all; + white-space: pre-wrap; + text-align: var(--nutui-dialog-content-text-align, left); + overflow-y: auto; } -.nut-form-item-label-left-required { - color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23)); - margin-right: var(--nutui-form-item-required-margin-right, 4rpx); - position: absolute; - left: -10rpx; +.nut-dialog-footer { + display: flex; + align-items: center; + width: 100%; + justify-content: space-around; } -.nut-form-item-label-right-required { - color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23)); - margin-left: var(--nutui-form-item-required-margin-right, 4rpx); - position: absolute; - right: -10rpx; +.nut-dialog-footer.vertical { + flex-direction: column; } -.nut-form-item .nut-form-item-labeltxt { - position: relative; - font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-s, 12rpx)); +.nut-dialog-footer.vertical .nut-button { + min-width: 100%; } -.nut-form-item-body-slots .nut-input-text { - font-size: var(--nutui-form-item-body-font-size, var(--nutui-font-size-base, 14rpx)); - text-align: var(--nutui-form-item-body-input-text-align, left); - color: var(--nutui-color-title, #1a1a1a); - width: 100%; - outline: 0 none; - border: 0; - text-decoration: none; +.nut-dialog-footer.vertical .nut-dialog-footer-cancel { + margin: 0; + color: var(--nutui-color-text, #505259); + font-size: var(--nutui-font-size-base, 14rpx); + display: flex; + justify-content: center; + margin-top: var(--nutui-dialog-vertical-footer-ok-margin-top, 16rpx); background: transparent; } -.nut-form-item-body-slots .nut-range-container { - min-height: 24rpx; +.nut-dialog-footer .nut-button { + min-width: var(--nutui-dialog-footer-button-min-width, 117rpx); + border-radius: var(--nutui-dialog-footer-button-border, 6rpx); + padding: var(--nutui-button-large-padding, 0 12rpx); } -.nut-form-item-body-tips { - text-align: var(--nutui-form-item-tip-text-align, left); - font-size: var(--nutui-form-item-tip-font-size, var(--nutui-font-size-xs, 11rpx)); - color: var(--nutui-form-item-error-message-color, var(--nutui-color-primary, #ff0f23)); +.nut-dialog-footer-cancel.nut-dialog-footer-cancel { + margin-right: var(--nutui-dialog-footer-cancel-margin-right, 12rpx); + background: var(--nutui-dialog-footer-cancel-bg, var(--nutui-color-background-sunken, #f7f8fc)); + color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a)); + border-color: var(--nutui-button-default-border-color, transparent); } -[dir='rtl'] .nut-form-item-label, -.nut-rtl .nut-form-item-label { - text-align: right; - margin-right: 0; - margin-left: var(--nutui-form-item-label-margin-right, 10rpx); +.nut-dialog-footer-cancel.nut-dialog-footer-cancel .nut-button-children { + color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a)); } -[dir='rtl'] .nut-form-item-label .required::before, -.nut-rtl .nut-form-item-label .required::before { - margin-right: 0; - margin-left: var(--nutui-form-item-required-margin-right, 4rpx); +.nut-dialog-footer-ok-container { + position: relative; + display: flex; + align-items: center; + width: 100%; + justify-content: space-around; } -[dir='rtl'] .nut-form-item-body-slots .nut-icon-ArrowRight, -[dir='rtl'] .nut-form-item-body-slots .nut-icon-ArrowLeft, -.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowRight, -.nut-rtl .nut-form-item-body-slots .nut-icon-ArrowLeft { - transform: rotateY(180deg); +.nut-dialog-footer-ok-container .nut-dialog-footer-ok-badge { + position: absolute; + right: 0; + top: var(--nutui-dialog-footer-badge-top, -8rpx); + display: flex; + align-items: center; + height: var(--nutui-dialog-footer-badge-height, 14rpx); + padding: var(--nutui-dialog-footer-badge-padding, 0 3rpx); + background: var(--nutui-dialog-footer-badge-bg-ok, var(--nutui-color-danger-light, #ffebef)); + border-radius: var(--nutui-dialog-footer-badge-border-radius, 2rpx 2rpx 0rpx 2rpx); + font-size: var(--nutui-dialog-footer-badge-fontsize, 10rpx); + color: var(--nutui-dialog-footer-badge-color-ok, var(--nutui-color-primary, #ff0f23)); } -.nut-form-item-label-right { - -ms-flex-pack: end; - justify-content: flex-end; - padding-right: 24rpx; - white-space: nowrap; +.nut-dialog-footer-ok { + max-width: var(--nutui-dialog-footer-ok-max-width, 128rpx); + font-weight: var(--nutui-font-weight-medium, 500); } -.nut-form-item-label-left { - position: relative; - padding-left: 12rpx; - white-space: nowrap; +.nut-dialog-footer-ok .nut-button-children { + font-weight: var(--nutui-font-weight-medium, 500); } -.nut-form-item-label-top { - display: block; - padding-bottom: 4rpx; - padding-right: 24rpx; +.nut-dialog-footer-block.nut-button { + min-width: 100%; } -[dir='rtl'] .form-layout-right .nut-form-item-label, -.nut-rtl .form-layout-right .nut-form-item-label { - text-align: left; - padding-right: 0; - padding-left: 24rpx; +.nut-dialog-footer-cancel-container { + position: relative; + display: flex; + align-items: center; + width: 100%; + justify-content: space-around; } -[dir='rtl'] .form-layout-left .nut-form-item-label, -.nut-rtl .form-layout-left .nut-form-item-label { - text-align: right; - padding-left: 0; - padding-right: 12rpx; +.nut-dialog-footer-cancel-container .nut-dialog-footer-cancel-badge { + position: absolute; + right: var(--nutui-dialog-footer-cancel-margin-right, 12rpx); + top: var(--nutui-dialog-footer-badge-top, -8rpx); + display: flex; + align-items: center; + height: var(--nutui-dialog-footer-badge-height, 14rpx); + padding: var(--nutui-dialog-footer-badge-padding, 0 3rpx); + background: var(--nutui-dialog-footer-badge-bg-cancel, var(--nutui-color-danger-light, #ffebef)); + border-radius: var(--nutui-dialog-footer-badge-border-radius, 2rpx 2rpx 0rpx 2rpx); + font-size: var(--nutui-dialog-footer-badge-fontsize, 10rpx); + color: var(--nutui-dialog-footer-badge-color-cancel, var(--nutui-color-primary, #ff0f23)); } -[dir='rtl'] .form-layout-top .nut-form-item-label, -.nut-rtl .form-layout-top .nut-form-item-label { - padding-right: 0; - padding-left: 24rpx; +[dir='rtl'] .nut-dialog-outer, +.nut-rtl .nut-dialog-outer { + left: auto; + right: 50%; + transform: translate(50%, -50%); } -.nut-fixednav { - position: fixed; - z-index: var(--nutui-fixednav-index, 900); - display: inline-block; - height: 50rpx; +[dir='rtl'] .nut-dialog-close-top-right, +.nut-rtl .nut-dialog-close-top-right { + right: auto; + left: var(--nutui-dialog-close-right, 16rpx); } -.nut-fixednav.active .nut-fixednav-btn .nut-icon { - -ms-transform: rotate(180deg); - transform: rotate(180deg); +[dir='rtl'] .nut-dialog-close-top-left, +.nut-rtl .nut-dialog-close-top-left { + left: auto; + right: var(--nutui-dialog-close-left, 16rpx); } -.nut-fixednav.active .nut-fixednav-list { - -ms-transform: translate(0) !important; - transform: translate(0) !important; +[dir='rtl'] .nut-dialog-footer-cancel.nut-dialog-footer-cancel, +.nut-rtl .nut-dialog-footer-cancel.nut-dialog-footer-cancel { + margin-right: 0; + margin-left: var(--nutui-dialog-footer-cancel-margin-right, 12rpx); } -.nut-fixednav.active.nut-fixednav-left .nut-icon { - -ms-transform: rotate(0); - transform: rotate(0); +[dir='rtl'] .nut-dialog-content, +.nut-rtl .nut-dialog-content { + text-align: var(--nutui-dialog-content-text-align, right); } -.nut-fixednav-btn { - box-sizing: border-box; - position: absolute; - z-index: var(--nutui-fixednav-index, 900); - width: 70rpx; - height: 100%; - background: var(--nutui-fixednav-button-background, var(--nutui-color-primary, #ff0f23)); - box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); - display: -ms-flexbox; +.nut-countup-list { display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; + display: inline-flex; + height: var(--nutui-countup-height, 32rpx); + overflow: hidden; + direction: ltr; } -.nut-fixednav-btn .text { - width: 24rpx; - line-height: 13rpx; - font-size: var(--nutui-font-size-s, 12rpx); - color: #fff; - -ms-flex-negative: 0; - flex-shrink: 0; +.nut-countup-listitem { + height: var(--nutui-countup-height, 32rpx); + overflow: hidden; + user-select: none; } -.nut-fixednav-list { - position: absolute; - transition: all 0.5s; - z-index: var(--nutui-fixednav-index, 900); - -ms-flex-negative: 0; - flex-shrink: 0; - height: 100%; - background: var(--nutui-fixednav-background-color, #ffffff); - display: -ms-flexbox; +.nut-countup-listitem-number { + margin: 0 var(--nutui-countup-lr-margin, 0); + border-radius: var(--nutui-countup-border-radius, 4rpx); + color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a)); + background-color: var(--nutui-countup-bg-color, inherit); +} +.nut-countup-separator { display: flex; - -ms-flex-pack: justify; - justify-content: space-between; - box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.2); + height: 80%; + align-items: flex-end; + color: var(--nutui-countup-separator-color, var(--nutui-color-title, #1a1a1a)); + font-size: var(--nutui-countup-base-size, 18rpx); + font-weight: var(--nutui-font-weight-bold, 600); } -.nut-fixednav-list-item { - position: relative; - -ms-flex: 1; - flex: 1; - height: 100%; - display: -ms-flexbox; +.nut-countup-number { display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; align-items: center; - min-width: 50rpx; - -ms-flex-negative: 0; - flex-shrink: 0; - color: var(--nutui-fixednav-color, #1a1a1a); + width: var(--nutui-countup-width, auto); + transition: transform 1s ease-in-out; + transform: translate(0); } -.nut-fixednav-list-item .nut-fixednav-list-text { - font-size: 10rpx; +.nut-countup-number-text { + height: var(--nutui-countup-height, 32rpx); + line-height: var(--nutui-countup-height, 32rpx); + color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a)); + font-size: var(--nutui-countup-base-size, 18rpx); + font-weight: var(--nutui-font-weight-bold, 600); } -.nut-fixednav-list-image { - width: 20rpx; - height: 20rpx; - margin-bottom: 2rpx; +.nut-countdown { + display: var(--nutui-countdown-display, flex); + flex-direction: row; + align-items: center; + color: var(--nutui-countdown-color, var(--nutui-color-primary, #ff0f23)); + font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11rpx)); } -.nut-fixednav-right .nut-fixednav-btn { - right: 0; - border-radius: 45rpx 0 0 45rpx; +.nut-countdown-number-primary, +.nut-countdown-number, +.nut-countdown-number-text, +.nut-countdown-unit { + display: flex; + align-items: center; + justify-content: center; + height: var(--nutui-countdown-height, 16rpx); + box-sizing: border-box; + font-weight: var(--nutui-countdown-font-weight, var(--nutui-font-weight, 400)); + font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11rpx)); + line-height: calc(var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11rpx)) + 2rpx); + font-family: JDZH-Regular; } -.nut-fixednav-right .nut-fixednav-btn .nut-icon { - margin-right: 5rpx; - -ms-transform: rotate(0); - transform: rotate(0); +.nut-countdown-number, +.nut-countdown-number-primary { + position: relative; + min-width: var(--nutui-countdown-width, 16rpx); + padding: var(--nutui-countdown-number-padding, 0 0); + border-radius: var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2rpx)); + margin: var(--nutui-countdown-number-margin, 0 1rpx); + text-align: center; } -.nut-fixednav-right .nut-fixednav-list { - right: 0; - -ms-transform: translate(100%); - transform: translate(100%); - border-radius: 25rpx 0 0 25rpx; - padding-left: 20rpx; - padding-right: 80rpx; +.nut-countdown-number::after, +.nut-countdown-number-primary::after { + content: ''; + position: absolute; + top: -50%; + right: -50%; + bottom: -50%; + left: -50%; + transform: scale(0.5); + border-radius: calc(var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2rpx)) * 2); } -.nut-fixednav-left .nut-fixednav-btn { - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; - left: 0; - border-radius: 0 45rpx 45rpx 0; +.nut-countdown-number { + background-color: var(--nutui-countdown-number-background-color, var(--nutui-color-background-overlay, #ffffff)); + color: var(--nutui-countdown-number-color, var(--nutui-color-primary, #ff0f23)); } -.nut-fixednav-left .nut-fixednav-btn .nut-icon { - margin-left: 5rpx; - -ms-transform: rotate(180deg); - transform: rotate(180deg); +.nut-countdown-number::after { + border: 1rpx solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-specialdisabled, #ffadbe)); } -.nut-fixednav-left .nut-fixednav-list { - -ms-transform: translate(-100%); - transform: translate(-100%); - left: 0; - border-radius: 0 25rpx 25rpx 0; - padding-left: 80rpx; - padding-right: 20rpx; +.nut-countdown-number-primary { + background-color: var(--nutui-countdown-number-primary-background-color, var(--nutui-color-primary, #ff0f23)); + color: var(--nutui-countdown-number-primary-color, #ffffff); } -[dir='rtl'] .nut-fixednav.active .nut-icon, -.nut-rtl .nut-fixednav.active .nut-icon { - -ms-transform: rotate(0); - transform: rotate(0); +.nut-countdown-number-primary::after { + border: 1rpx solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary, #ff0f23)); } -[dir='rtl'] .nut-fixednav.active.nut-fixednav-left .nut-icon, -.nut-rtl .nut-fixednav.active.nut-fixednav-left .nut-icon { - -ms-transform: rotate(-180deg); - transform: rotate(-180deg); +.nut-countdown-number-text { + border: 0; + background-color: transparent; + color: var(--nutui-countdown-number-color, var(--nutui-color-primary, #ff0f23)); } -[dir='rtl'] .nut-fixednav-btn, -.nut-rtl .nut-fixednav-btn { - right: auto; - left: 0; - border-radius: 0 45rpx 45rpx 0; +.nut-countdown-unit { + color: var(--nutui-countdown-color, var(--nutui-color-primary, #ff0f23)); } -[dir='rtl'] .nut-fixednav-btn .nut-icon, -.nut-rtl .nut-fixednav-btn .nut-icon { - margin-right: 0; - margin-left: 5rpx; - -ms-transform: rotate(180deg); - transform: rotate(180deg); +.nut-col { + box-sizing: border-box; + word-break: break-all; + margin-bottom: var(--nutui-col-default-margin-bottom, 15rpx); } -[dir='rtl'] .nut-fixednav-list, -.nut-rtl .nut-fixednav-list { - right: auto; - left: 0; - -ms-transform: translate(-100%); - transform: translate(-100%); - border-radius: 0 25rpx 25rpx 0; - box-shadow: -2rpx 2rpx 8rpx rgba(0, 0, 0, 0.2); - padding-right: 20rpx; - padding-left: 80rpx; +[dir='rtl'] .nut-col, +.nut-rtl .nut-col { + float: right; } -[dir='rtl'] .nut-fixednav-left .nut-fixednav-btn, -.nut-rtl .nut-fixednav-left .nut-fixednav-btn { - left: auto; - right: 0; - border-radius: 45rpx 0 0 45rpx; +[dir='rtl'] .nut-col.nut-col-gutter:last-child, +.nut-rtl .nut-col.nut-col-gutter:last-child { + padding-right: 0 !important; + padding-left: 0 !important; } -[dir='rtl'] .nut-fixednav-left .nut-fixednav-btn .nut-icon, -.nut-rtl .nut-fixednav-left .nut-fixednav-btn .nut-icon { - -ms-transform: rotate(0); - transform: rotate(0); - margin-right: 5rpx; +[dir='rtl'] .nut-col.nut-col-gutter:first-child, +.nut-rtl .nut-col.nut-col-gutter:first-child { + padding-left: 0 !important; + padding-right: 0 !important; +} +.nut-col-offset-1 { + margin-left: 4.166666666%; +} +[dir='rtl'] .nut-col-offset-1, +.nut-rtl .nut-col-offset-1 { margin-left: 0; + margin-right: 4.166666666%; } -[dir='rtl'] .nut-fixednav-left .nut-fixednav-list, -.nut-rtl .nut-fixednav-left .nut-fixednav-list { - -ms-transform: translate(100%); - transform: translate(100%); - right: auto; - left: auto; - border-radius: 25rpx 0 0 25rpx; - padding-right: 80rpx; - padding-left: 20rpx; +.nut-col-1 { + width: 4.166666666%; } -.nut-ellipsis-copy { - position: absolute; - top: -999999rpx; +.nut-col-offset-2 { + margin-left: 8.333333332%; +} +[dir='rtl'] .nut-col-offset-2, +.nut-rtl .nut-col-offset-2 { + margin-left: 0; + margin-right: 8.333333332%; +} +.nut-col-2 { + width: 8.333333332%; } -.nut-ellipsis-width { - width: -moz-fit-content; - width: fit-content; +.nut-col-offset-3 { + margin-left: 12.499999998%; } -.nut-elevator-list-item-code { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-elevator-list-item-code-height, 34rpx); - font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-elevator-list-item-code-color, var(--nutui-color-text-help, #888b94)); - font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600)); +[dir='rtl'] .nut-col-offset-3, +.nut-rtl .nut-col-offset-3 { + margin-left: 0; + margin-right: 12.499999998%; } -.nut-elevator-list-item-name { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-elevator-list-item-name-height, 34rpx); - font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-elevator-list-color, var(--nutui-color-title, #1a1a1a)); +.nut-col-3 { + width: 12.499999998%; } -.nut-elevator-list-fixed { - position: absolute; - top: 0; - left: 0; - z-index: 1; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - width: 100%; - padding: var(--nutui-elevator-list-item-padding, 0 36rpx 0 20rpx); - height: var(--nutui-elevator-list-item-code-height, 34rpx); - box-sizing: border-box; - box-shadow: var(--nutui-elevator-list-fixed-box-shadow, 0 0 10rpx #eee); - background-color: var(--nutui-elevator-list-fixed-bg-color, #ffffff); +.nut-col-offset-4 { + margin-left: 16.666666664%; } -.nut-elevator-list-fixed-title { - font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-elevator-list-fixed-color, var(--nutui-color-primary, #ff0f23)); - font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600)); +[dir='rtl'] .nut-col-offset-4, +.nut-rtl .nut-col-offset-4 { + margin-left: 0; + margin-right: 16.666666664%; } -.nut-elevator-code-current { - position: absolute; - right: var(--nutui-elevator-list-item-code-current-right, 60rpx); - top: var(--nutui-elevator-list-item-code-current-top, 50%); - -ms-transform: var(--nutui-elevator-bars-transform, translateY(-50%)); - transform: var(--nutui-elevator-bars-transform, translateY(-50%)); - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - width: var(--nutui-elevator-list-item-code-current-width, 45rpx); - height: var(--nutui-elevator-list-item-code-current-height, 45rpx); - border-radius: var(--nutui-elevator-list-item-code-current-border-radius, 50%); - background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-text-disabled, #c2c4cc)); - box-shadow: 0 3rpx 3rpx 1rpx #f0f0f0; - color: var(--nutui-elevator-list-item-code-current-color, #ffffff); +.nut-col-4 { + width: 16.666666664%; } -.nut-elevator-bars { - position: absolute; - right: var(--nutui-elevator-bars-right, 16rpx); - top: var(--nutui-elevator-bars-top, 50%); - -ms-transform: var(--nutui-elevator-bars-transform, translateY(-50%)); - transform: var(--nutui-elevator-bars-transform, translateY(-50%)); - z-index: var(--nutui-elevator-bars-z-index, 1); +.nut-col-offset-5 { + margin-left: 20.83333333%; } -.nut-elevator-bars-inner-item { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - height: 16rpx; - width: 16rpx; - border-radius: 50%; - margin: 1rpx 0; - color: var(--nutui-elevator-bars-color, var(--nutui-color-text-help, #888b94)); - font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-size-xxs, 10rpx)); - cursor: pointer; +[dir='rtl'] .nut-col-offset-5, +.nut-rtl .nut-col-offset-5 { + margin-left: 0; + margin-right: 20.83333333%; } -.nut-elevator-horizontal .nut-elevator-list-item-code { - width: var(--nutui-elevator-list-item-code-width, 34rpx); - -ms-flex-pack: center; - justify-content: center; +.nut-col-5 { + width: 20.83333333%; } -.nut-elevator-vertical .nut-elevator-list-item-code { - border-bottom: var(--nutui-elevator-list-item-code-border-bottom, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +.nut-col-offset-6 { + margin-left: 24.999999996%; } -.nut-elevator-vertical .nut-elevator-list-item-name, -.nut-elevator-vertical .nut-elevator-list-item-code { - padding: var(--nutui-elevator-list-item-padding, 0 36rpx 0 20rpx); +[dir='rtl'] .nut-col-offset-6, +.nut-rtl .nut-col-offset-6 { + margin-left: 0; + margin-right: 24.999999996%; } -[dir='rtl'] .nut-elevator-code-current, -.nut-rtl .nut-elevator-code-current { - right: auto; - left: var(--nutui-elevator-list-item-code-current-right, 60rpx); +.nut-col-6 { + width: 24.999999996%; } -[dir='rtl'] .nut-elevator-bars, -.nut-rtl .nut-elevator-bars { - right: auto; - left: var(--nutui-elevator-bars-right, 16rpx); +.nut-col-offset-7 { + margin-left: 29.166666662%; } -.nut-drag { - position: fixed; - z-index: 9997 !important; - width: 0; - height: 0; - -ms-touch-action: none; - touch-action: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - font-size: 0; +[dir='rtl'] .nut-col-offset-7, +.nut-rtl .nut-col-offset-7 { + margin-left: 0; + margin-right: 29.166666662%; } -.nut-drag-inner { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - width: -moz-fit-content; - width: fit-content; - height: -moz-fit-content; - height: fit-content; - -ms-touch-action: none; - touch-action: none; +.nut-col-7 { + width: 29.166666662%; } -.nut-empty { - box-sizing: border-box; - width: 100%; - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-pack: center; - justify-content: center; - padding: var(--nutui-empty-padding, 32rpx 40rpx); - background-color: var(--nutui-empty-background-color, var(--nutui-color-background-overlay, #ffffff)); +.nut-col-offset-8 { + margin-left: 33.333333328%; } -.nut-empty-base { - width: var(--nutui-empty-image-size, 160rpx); - height: var(--nutui-empty-image-size, 160rpx); +[dir='rtl'] .nut-col-offset-8, +.nut-rtl .nut-col-offset-8 { + margin-left: 0; + margin-right: 33.333333328%; } -.nut-empty-base .h5-img, -.nut-empty-base image { - width: 100%; - height: 100%; +.nut-col-8 { + width: 33.333333328%; } -.nut-empty-small { - width: var(--nutui-empty-image-small-size, 120rpx); - height: var(--nutui-empty-image-small-size, 120rpx); +.nut-col-offset-9 { + margin-left: 37.499999994%; } -.nut-empty-small .h5-img, -.nut-empty-small image { - width: 100%; - height: 100%; +[dir='rtl'] .nut-col-offset-9, +.nut-rtl .nut-col-offset-9 { + margin-left: 0; + margin-right: 37.499999994%; } -.nut-empty-title { - margin-top: var(--nutui-empty-title-margin-top, 0rpx); - font-weight: var(--nutui-font-weight-bold, 600); - margin-bottom: var(--nutui-empty-title-margin-bottom, 12rpx); - color: var(--nutui-color-title, #1a1a1a); - font-size: var(--nutui-font-size-l, 15rpx); - line-height: var(--nutui-empty-title-line-height, var(--nutui-font-size-l, 15rpx)); +.nut-col-9 { + width: 37.499999994%; } -.nut-empty-description { - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-font-size-s, 12rpx); - line-height: var(--nutui-empty-description-line-height, 1); +.nut-col-offset-10 { + margin-left: 41.66666666%; } -.nut-empty-actions-base { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - margin-top: 24rpx; +[dir='rtl'] .nut-col-offset-10, +.nut-rtl .nut-col-offset-10 { + margin-left: 0; + margin-right: 41.66666666%; } -.nut-empty-actions-small { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: row; - flex-direction: row; - margin-top: 16rpx; +.nut-col-10 { + width: 41.66666666%; } -.nut-empty-action { - margin-right: 6rpx; - margin-left: 6rpx; +.nut-col-offset-11 { + margin-left: 45.833333326%; } -.nut-divider { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-direction: row; - flex-direction: row; - font-size: var(--nutui-divider-text-font-size, var(--nutui-font-size-base, 14rpx)); - color: var(--nutui-divider-text-color, var(--nutui-color-text, #505259)); - margin: var(--nutui-divider-margin, 16rpx 0); - width: 100%; - border: 0 solid var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); +[dir='rtl'] .nut-col-offset-11, +.nut-rtl .nut-col-offset-11 { + margin-left: 0; + margin-right: 45.833333326%; +} +.nut-col-11 { + width: 45.833333326%; } -.nut-divider-before, -.nut-divider-after { - display: -ms-flexbox; - display: flex; - border-style: solid; - border-color: var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - border-width: var(--nutui-divider-line-height, 1rpx) 0 0; - height: var(--nutui-divider-line-height, 1rpx); - -ms-flex: 1; - flex: 1; +.nut-col-offset-12 { + margin-left: 49.999999992%; } -.nut-divider-center-before, -.nut-divider-left-before, -.nut-divider-right-before { - margin-right: var(--nutui-divider-spacing, 8rpx); +[dir='rtl'] .nut-col-offset-12, +.nut-rtl .nut-col-offset-12 { + margin-left: 0; + margin-right: 49.999999992%; } -.nut-divider-center-after, -.nut-divider-left-after, -.nut-divider-right-after { - margin-left: var(--nutui-divider-spacing, 8rpx); +.nut-col-12 { + width: 49.999999992%; } -.nut-divider-vertical { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - width: 0rpx; - height: var(--nutui-divider-vertical-height, 12rpx); - border-left: 1rpx solid var(--nutui-divider-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - margin: var(--nutui-divider-vertical-margin, 0 8rpx); - vertical-align: middle; +.nut-col-offset-13 { + margin-left: 54.166666658%; } -.nut-divider-rtl-before { - margin-right: 0; - margin-left: var(--nutui-divider-spacing, 8rpx); +[dir='rtl'] .nut-col-offset-13, +.nut-rtl .nut-col-offset-13 { + margin-left: 0; + margin-right: 54.166666658%; } -.nut-divider-rtl-after { +.nut-col-13 { + width: 54.166666658%; +} +.nut-col-offset-14 { + margin-left: 58.333333324%; +} +[dir='rtl'] .nut-col-offset-14, +.nut-rtl .nut-col-offset-14 { margin-left: 0; - margin-right: var(--nutui-divider-spacing, 8rpx); + margin-right: 58.333333324%; } -.nut-dialog { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-align: center; - align-items: center; - width: var(--nutui-dialog-width, 295rpx); - min-width: var(--nutui-dialog-min-width, 240rpx); - max-height: 67%; - min-height: var(--nutui-dialog-min-height, 124rpx); - padding: var(--nutui-dialog-padding, 24rpx); - box-sizing: border-box; +.nut-col-14 { + width: 58.333333324%; } -.nut-dialog-outer { - position: fixed; - max-height: 100%; - background-color: var(--nutui-dialog-background, var(--nutui-color-background-overlay, #ffffff)); - transition: transform 0.2s; - -webkit-overflow-scrolling: touch; - top: 50%; - left: 50%; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - border-radius: var(--nutui-dialog-border-radius, var(--nutui-radius-xl, 12rpx)); - animation-duration: 0.3s; +.nut-col-offset-15 { + margin-left: 62.49999999%; } -.nut-dialog-close { - position: absolute !important; - z-index: 1; - cursor: pointer; - width: var(--nutui-dialog-close-width, 16rpx); - height: var(--nutui-dialog-close-height, 16rpx); - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - color: var(--nutui-dialog-close-color, #ffffff); +[dir='rtl'] .nut-col-offset-15, +.nut-rtl .nut-col-offset-15 { + margin-left: 0; + margin-right: 62.49999999%; } -.nut-dialog-close .nut-icon { - font-size: var(--nutui-dialog-close-width, 16rpx); - width: var(--nutui-dialog-close-width, 16rpx); - height: var(--nutui-dialog-close-height, 16rpx); +.nut-col-15 { + width: 62.49999999%; } -.nut-dialog-close-top-right { - top: var(--nutui-dialog-close-top, 16rpx); - right: var(--nutui-dialog-close-right, 16rpx); +.nut-col-offset-16 { + margin-left: 66.666666656%; } -.nut-dialog-close-top-left { - top: var(--nutui-dialog-close-top, 16rpx); - left: var(--nutui-dialog-close-left, 16rpx); +[dir='rtl'] .nut-col-offset-16, +.nut-rtl .nut-col-offset-16 { + margin-left: 0; + margin-right: 66.666666656%; } -.nut-dialog-close-bottom { - bottom: -64rpx; - width: var(--nutui-dialog-bottom-close-icon-size, 24rpx); - height: var(--nutui-dialog-bottom-close-icon-size, 24rpx); - left: 50%; - -ms-transform: translate(-50%); - transform: translate(-50%); +.nut-col-16 { + width: 66.666666656%; } -.nut-dialog-close-bottom .nut-icon { - color: var(--nutui-color-text-disabled, #c2c4cc); - background-color: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)); - border-radius: 50%; - width: var(--nutui-dialog-bottom-close-icon-size, 24rpx); - height: var(--nutui-dialog-bottom-close-icon-size, 24rpx); +.nut-col-offset-17 { + margin-left: 70.833333322%; } -.nut-dialog-header { - display: block; - text-align: center; - font-size: var(--nutui-dialog-header-font-size, var(--nutui-font-size-xl, 18rpx)); - font-weight: var(--nutui-dialog-header-font-weight, var(--nutui-font-weight-bold, 600)); - color: var(--nutui-color-title, #1a1a1a); - margin-bottom: var(--nutui-dialog-title-margin-bottom, 8rpx); - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; +[dir='rtl'] .nut-col-offset-17, +.nut-rtl .nut-col-offset-17 { + margin-left: 0; + margin-right: 70.833333322%; } -.nut-dialog-content { - width: 100%; - margin: var(--nutui-dialog-content-margin, 0 0 20rpx 0); - max-height: var(--nutui-dialog-content-max-height, 268rpx); - line-height: var(--nutui-dialog-content-line-height, 20rpx); - font-size: var(--nutui-font-size-base, 14rpx); - color: var(--nutui-color-title, #1a1a1a); - word-wrap: break-word; - word-break: break-all; - white-space: pre-wrap; - text-align: var(--nutui-dialog-content-text-align, left); - overflow-y: auto; +.nut-col-17 { + width: 70.833333322%; } -.nut-dialog-footer.vertical .nut-dialog-footer-cancel { - margin: 0; - color: var(--nutui-color-text, #505259); - font-size: var(--nutui-font-size-base, 14rpx); - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - margin-top: var(--nutui-dialog-vertical-footer-ok-margin-top, 16rpx); - background: transparent; +.nut-col-offset-18 { + margin-left: 74.999999988%; } -.nut-dialog-footer .nut-button { - min-width: var(--nutui-dialog-footer-button-min-width, 117rpx); - border-radius: var(--nutui-dialog-footer-button-border, 6rpx); - padding: var(--nutui-button-large-padding, 0 12rpx); +[dir='rtl'] .nut-col-offset-18, +.nut-rtl .nut-col-offset-18 { + margin-left: 0; + margin-right: 74.999999988%; } -.nut-dialog-footer-cancel.nut-dialog-footer-cancel { - margin-right: var(--nutui-dialog-footer-cancel-margin-right, 12rpx); - background: var(--nutui-dialog-footer-cancel-bg, var(--nutui-color-background-sunken, #f7f8fc)); - color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a)); - border-color: var(--nutui-button-default-border-color, transparent); +.nut-col-18 { + width: 74.999999988%; } -.nut-dialog-footer-ok-container .nut-dialog-footer-ok-badge { - position: absolute; - right: 0; - top: var(--nutui-dialog-footer-badge-top, -8rpx); - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-dialog-footer-badge-height, 14rpx); - padding: var(--nutui-dialog-footer-badge-padding, 0 3rpx); - background: var(--nutui-dialog-footer-badge-bg-ok, var(--nutui-color-danger-light, #ffebef)); - border-radius: var(--nutui-dialog-footer-badge-border-radius, 2rpx 2rpx 0rpx 2rpx); - font-size: var(--nutui-dialog-footer-badge-fontsize, 10rpx); - color: var(--nutui-dialog-footer-badge-color-ok, var(--nutui-color-primary, #ff0f23)); +.nut-col-offset-19 { + margin-left: 79.166666654%; } -.nut-dialog-footer-ok { - max-width: var(--nutui-dialog-footer-ok-max-width, 128rpx); - font-weight: var(--nutui-font-weight-medium, 500); +[dir='rtl'] .nut-col-offset-19, +.nut-rtl .nut-col-offset-19 { + margin-left: 0; + margin-right: 79.166666654%; } -.nut-dialog-footer-cancel-container .nut-dialog-footer-cancel-badge { - position: absolute; - right: var(--nutui-dialog-footer-cancel-margin-right, 12rpx); - top: var(--nutui-dialog-footer-badge-top, -8rpx); - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - height: var(--nutui-dialog-footer-badge-height, 14rpx); - padding: var(--nutui-dialog-footer-badge-padding, 0 3rpx); - background: var(--nutui-dialog-footer-badge-bg-cancel, var(--nutui-color-danger-light, #ffebef)); - border-radius: var(--nutui-dialog-footer-badge-border-radius, 2rpx 2rpx 0rpx 2rpx); - font-size: var(--nutui-dialog-footer-badge-fontsize, 10rpx); - color: var(--nutui-dialog-footer-badge-color-cancel, var(--nutui-color-primary, #ff0f23)); +.nut-col-19 { + width: 79.166666654%; } -[dir='rtl'] .nut-dialog-outer, -.nut-rtl .nut-dialog-outer { - left: auto; - right: 50%; - -ms-transform: translate(50%, -50%); - transform: translate(50%, -50%); +.nut-col-offset-20 { + margin-left: 83.33333332%; } -[dir='rtl'] .nut-dialog-close-top-right, -.nut-rtl .nut-dialog-close-top-right { - right: auto; - left: var(--nutui-dialog-close-right, 16rpx); +[dir='rtl'] .nut-col-offset-20, +.nut-rtl .nut-col-offset-20 { + margin-left: 0; + margin-right: 83.33333332%; } -[dir='rtl'] .nut-dialog-close-top-left, -.nut-rtl .nut-dialog-close-top-left { - left: auto; - right: var(--nutui-dialog-close-left, 16rpx); +.nut-col-20 { + width: 83.33333332%; } -[dir='rtl'] .nut-dialog-footer-cancel.nut-dialog-footer-cancel, -.nut-rtl .nut-dialog-footer-cancel.nut-dialog-footer-cancel { - margin-right: 0; - margin-left: var(--nutui-dialog-footer-cancel-margin-right, 12rpx); +.nut-col-offset-21 { + margin-left: 87.499999986%; } -.nut-countup-list { - display: -ms-flexbox; - display: flex; - display: -ms-inline-flexbox; - display: inline-flex; - height: var(--nutui-countup-height, 32rpx); - overflow: hidden; - direction: ltr; +[dir='rtl'] .nut-col-offset-21, +.nut-rtl .nut-col-offset-21 { + margin-left: 0; + margin-right: 87.499999986%; } -.nut-countup-listitem { - height: var(--nutui-countup-height, 32rpx); - overflow: hidden; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; +.nut-col-21 { + width: 87.499999986%; } -.nut-countup-listitem-number { - margin: 0 var(--nutui-countup-lr-margin, 0); - border-radius: var(--nutui-countup-border-radius, 4rpx); - color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a)); - background-color: var(--nutui-countup-bg-color, inherit); +.nut-col-offset-22 { + margin-left: 91.666666652%; } -.nut-countup-separator { - display: -ms-flexbox; - display: flex; - height: 80%; - -ms-flex-align: end; - align-items: flex-end; - color: var(--nutui-countup-separator-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-countup-base-size, 18rpx); - font-weight: var(--nutui-font-weight-bold, 600); +[dir='rtl'] .nut-col-offset-22, +.nut-rtl .nut-col-offset-22 { + margin-left: 0; + margin-right: 91.666666652%; } -.nut-countup-number { - display: -ms-flexbox; - display: flex; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-align: center; - align-items: center; - width: var(--nutui-countup-width, auto); - transition: transform 1s ease-in-out; - -ms-transform: translate(0); - transform: translate(0); +.nut-col-22 { + width: 91.666666652%; } -.nut-countup-number-text { - height: var(--nutui-countup-height, 32rpx); - line-height: var(--nutui-countup-height, 32rpx); - color: var(--nutui-countup-color, var(--nutui-color-title, #1a1a1a)); - font-size: var(--nutui-countup-base-size, 18rpx); - font-weight: var(--nutui-font-weight-bold, 600); +.nut-col-offset-23 { + margin-left: 95.833333318%; } -.nut-countdown { - display: var(--nutui-countdown-display, flex); - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-align: center; - align-items: center; - color: var(--nutui-countdown-color, var(--nutui-color-primary, #ff0f23)); - font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11rpx)); +[dir='rtl'] .nut-col-offset-23, +.nut-rtl .nut-col-offset-23 { + margin-left: 0; + margin-right: 95.833333318%; } -.nut-countdown-number-primary, -.nut-countdown-number, -.nut-countdown-number-text, -.nut-countdown-unit { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - height: var(--nutui-countdown-height, 16rpx); - box-sizing: border-box; - font-weight: var(--nutui-countdown-font-weight, var(--nutui-font-weight, 400)); - font-size: var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11rpx)); - line-height: calc(var(--nutui-countdown-font-size, var(--nutui-font-size-xs, 11rpx)) + 2rpx); - font-family: JDZH-Regular; +.nut-col-23 { + width: 95.833333318%; } -.nut-countdown-number, -.nut-countdown-number-primary { - position: relative; - min-width: var(--nutui-countdown-width, 16rpx); - padding: var(--nutui-countdown-number-padding, 0 0); - border-radius: var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2rpx)); - margin: var(--nutui-countdown-number-margin, 0 1rpx); - text-align: center; +.nut-col-offset-24 { + margin-left: 99.999999984%; } -.nut-countdown-number::after, -.nut-countdown-number-primary::after { - content: ''; - position: absolute; - top: -50%; - right: -50%; - bottom: -50%; - left: -50%; - -ms-transform: scale(0.5); - transform: scale(0.5); - border-radius: calc(var(--nutui-countdown-number-border-radius, var(--nutui-radius-xxs, 2rpx)) * 2); +[dir='rtl'] .nut-col-offset-24, +.nut-rtl .nut-col-offset-24 { + margin-left: 0; + margin-right: 99.999999984%; } -.nut-countdown-number::after { - border: 1rpx solid var(--nutui-countdown-number-border-color, var(--nutui-color-primary-specialdisabled, #ffadbe)); +.nut-col-24 { + width: 99.999999984%; } -.nut-countdown-number-primary::after { - border: 1rpx solid var(--nutui-countdown-number-primary-border-color, var(--nutui-color-primary, #ff0f23)); +.nut-circleprogress { + position: relative; } -.nut-col { - box-sizing: border-box; - word-break: break-all; - margin-bottom: var(--nutui-col-default-margin-bottom, 15rpx); +.nut-circleprogress-hover { + stroke: var(--nutui-circleprogress-primary-color, var(--nutui-color-primary, #ff0f23)); + transition: + stroke-dasharray 0.2s ease-in-out 0s, + stroke 0.2s ease 0s; +} +.nut-circleprogress-path { + stroke: var(--nutui-circleprogress-path-color, var(--nutui-color-background, #f2f3f5)); } .nut-circleprogress-text { position: absolute; @@ -15879,12 +11984,19 @@ wx-button { left: 0; box-sizing: border-box; width: 100%; - -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; color: var(--nutui-circleprogress-text-color, var(--nutui-color-title, #1a1a1a)); font-size: var(--nutui-circleprogress-text-size, var(--nutui-font-size-l, 15rpx)); } +[dir='rtl'] .nut-circleprogress-text, +.nut-rtl .nut-circleprogress-text { + left: auto; + right: 0; +} +.nut-collapse-item { + position: relative; +} .nut-collapse-item::after { position: absolute; box-sizing: border-box; @@ -15894,12 +12006,13 @@ wx-button { left: 16rpx; bottom: 0; border-bottom: var(--nutui-collapse-item-border-bottom, none); - -ms-transform: scaleY(0.5); transform: scaleY(0.5); } +.nut-collapse-item:last-child::after { + display: none; +} .nut-collapse-item-header { position: relative; - display: -ms-flexbox; display: flex; width: 100%; overflow: hidden; @@ -15918,17 +12031,17 @@ wx-button { left: 16rpx; bottom: 0; border-bottom: var(--nutui-collapse-item-header-border-bottom, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); - -ms-transform: scale(1); transform: scale(1); - -ms-transform: scaleY(0.5); transform: scaleY(0.5); } +.nut-collapse-item-title { + color: var(--nutui-collapse-item-color, var(--nutui-color-title, #1a1a1a)); + display: flex; + align-items: center; +} .nut-collapse-item-extra { - -ms-flex: 1; flex: 1; - display: -ms-flexbox; display: flex; - -ms-flex-pack: end; justify-content: flex-end; padding: 0 20rpx; overflow: hidden; @@ -15937,26 +12050,35 @@ wx-button { color: var(--nutui-collapse-item-extra-color, var(--nutui-color-text, #505259)); } .nut-collapse-item-icon-box { - display: -ms-flexbox; display: flex; width: 24rpx; position: relative; color: var(--nutui-color-text, #505259); } .nut-collapse-item-icon { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; position: absolute; top: 50%; left: 5rpx; - -ms-transform: translateY(-50%); transform: translateY(-50%); - -ms-transform-origin: center; transform-origin: center; transition: transform 0.3s; } +.nut-collapse-item-header-disabled, +.nut-collapse-item-header-disabled .nut-collapse-item-title, +.nut-collapse-item-header-disabled .nut-collapse-item-icon { + color: var(--nutui-collapse-item-disabled-color, var(--nutui-color-text-disabled, #c2c4cc)); +} +.nut-collapse-item-content-wrapper { + width: 100%; + position: relative; + box-sizing: border-box; + overflow: hidden; +} +.nut-collapse-item-content-wrapper-tran { + transition: all 0.3s linear; +} .nut-collapse-item-content { display: block; position: absolute; @@ -15977,19 +12099,32 @@ wx-button { left: auto; right: 5rpx; } +.nut-checkboxgroup .nut-checkbox-button { + background-color: var(--nutui-color-background, #f2f3f5); +} +.nut-checkboxgroup-vertical { + display: flex; + flex-direction: column; +} .nut-checkboxgroup-vertical .nut-checkbox { margin-bottom: 5rpx; } +.nut-checkboxgroup-vertical .nut-checkbox.nut-checkbox-reverse { + width: 100%; + justify-content: space-between; +} .nut-checkboxgroup-vertical .nut-checkbox-button-active { border: var(--nutui-radio-button-active-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); background-color: var(--nutui-color-primary-light-pressed, #ffebf1); } +.nut-checkboxgroup-horizontal { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} .nut-checkboxgroup-horizontal .nut-checkbox { - display: -ms-flexbox; display: flex; - display: -ms-inline-flexbox; display: inline-flex; - -ms-flex: 1; flex: 1; margin-right: 20rpx; } @@ -15998,7 +12133,6 @@ wx-button { background-color: var(--nutui-color-primary-light-pressed, #ffebf1); } .nut-checkboxgroup-list { - -ms-flex-positive: 1; flex-grow: 1; border-bottom: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); border-top: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); @@ -16009,6 +12143,14 @@ wx-button { .nut-checkboxgroup-list .nut-checkbox { margin-bottom: 5rpx; } +.nut-checkboxgroup-list .nut-checkbox.nut-checkbox-reverse { + width: auto; + flex-grow: 1; + justify-content: space-between; +} +.nut-checkboxgroup-list .nut-checkbox-list-item:first-child { + border-top: none; +} [dir='rtl'] .nut-checkboxgroup .nut-checkbox-label, .nut-rtl .nut-checkboxgroup .nut-checkbox-label, [dir='rtl'] .nut-checkboxgroup-vertical .nut-checkbox-label, @@ -16020,10 +12162,13 @@ wx-button { margin-right: 0; margin-left: 20rpx; } +.nut-checkbox { + display: flex; + align-items: center; +} .nut-checkbox-icon { color: var(--nutui-color-text-disabled, #c2c4cc); font-size: var(--nutui-checkbox-icon-font-size, var(--nutui-font-size-icon, 16rpx)); - -ms-flex-negative: 0; flex-shrink: 0; } .nut-checkbox-icon-wrap { @@ -16032,30 +12177,51 @@ wx-button { border-radius: 50%; box-shadow: 0 2rpx 4rpx rgba(255, 15, 35, 0.2); } +.nut-checkbox-icon-checked { + color: var(--nutui-color-primary, #ff0f23); + background-color: #fff; + transition-duration: 0.3s; + transition-property: color, border-color, background-color; + border-radius: 50%; +} +.nut-checkbox-icon-checked.nut-checkbox-icon-disabled { + color: var(--nutui-color-primary-disabled-special, #ffadbe); +} .nut-checkbox-label { margin-left: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4rpx)); font-size: var(--nutui-checkbox-label-font-size, var(--nutui-font-size-s, 12rpx)); color: var(--nutui-checkbox-label-color, var(--nutui-color-title, #1a1a1a)); - -ms-flex-negative: 0; flex-shrink: 0; } +.nut-checkbox-label-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc); +} .nut-checkbox-icon-indeterminate { color: var(--nutui-color-primary, #ff0f23); background-color: #fff; box-shadow: 0 2rpx 4rpx rgba(255, 15, 35, 0.2); border-radius: 50%; } +.nut-checkbox-icon-indeterminate.nut-checkbox-icon-disabled { + color: var(--nutui-color-primary-disabled-special, #ffadbe); +} +.nut-checkbox-icon-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc); + background-color: #fff; + border-radius: 50%; + box-shadow: none; +} +.nut-checkbox-reverse { + flex-direction: row-reverse; +} .nut-checkbox-reverse .nut-checkbox-label { margin-right: var(--nutui-checkbox-label-margin-left, var(--nutui-spacing-xxs, 4rpx)); margin-left: 0; } .nut-checkbox-button { position: relative; - display: -ms-flexbox; display: flex; - display: -ms-inline-flexbox; display: inline-flex; - -ms-flex-align: center; align-items: center; min-height: 32rpx; padding: var(--nutui-checkbox-button-padding, 5rpx 18rpx); @@ -16086,11 +12252,8 @@ wx-button { border-left: 10rpx solid transparent; border-bottom: 10rpx solid var(--nutui-color-primary, #ff0f23); border-right: 10rpx solid var(--nutui-color-primary, #ff0f23); - display: -ms-flexbox; display: flex; - -ms-flex-align: end; align-items: flex-end; - -ms-flex-pack: end; justify-content: flex-end; } .nut-checkbox-button .nut-checkbox-button-icon-checked { @@ -16100,7 +12263,6 @@ wx-button { color: #fff; right: 0; bottom: 0; - -ms-transform: translate(-1rpx, -2rpx); transform: translate(-1rpx, -2rpx); } .nut-checkbox-button .nut-icon { @@ -16120,13 +12282,15 @@ wx-button { border: 1rpx solid var(--nutui-color-text-disabled, #c2c4cc); } .nut-checkbox-list-item { - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; padding: var(--nutui-checkbox-list-item-padding, 12rpx 12rpx 12rpx 0); border-top: var(--nutui-checkbox-list-item-border, 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } +.nut-checkbox-list-item .nut-checkbox-label, +.nut-checkbox-list-item .nut-icon { + flex: none; +} [dir='rtl'] .nut-checkbox-label, .nut-rtl .nut-checkbox-label { margin-left: 0; @@ -16148,7 +12312,6 @@ wx-button { .nut-rtl .nut-checkbox-button-icon-checked { left: auto; right: 50%; - -ms-transform: translate(3rpx, -3rpx); transform: translate(3rpx, -3rpx); } [dir='rtl'] .nut-checkbox-button-icon .nut-icon::before, @@ -16156,6 +12319,9 @@ wx-button { margin-left: 0; margin-right: 6rpx; } +.nut-cell-group { + display: block; +} .nut-cell-group-title { display: inherit; padding: var(--nutui-cell-group-title-padding, 0 10rpx); @@ -16182,9 +12348,7 @@ wx-button { } .nut-cell { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex-direction: row; flex-direction: row; width: 100%; line-height: var(--nutui-cell-line-height, 20rpx); @@ -16197,6 +12361,17 @@ wx-button { margin-bottom: 10rpx; box-sizing: border-box; } +.nut-cell-group-item { + border-radius: 0; + box-shadow: 0 0 transparent; + margin: 0; +} +.nut-cell-left { + display: flex; + flex-direction: column; + align-items: flex-start; + flex: 1; +} .nut-cell-title, .nut-cell-description, .nut-cell-extra { @@ -16207,23 +12382,20 @@ wx-button { color: var(--nutui-cell-description-color, var(--nutui-color-text, #505259)); } .nut-cell-extra { - display: -ms-flexbox; display: flex; - -ms-flex-direction: row; flex-direction: row; - -ms-flex-pack: end; justify-content: flex-end; - -ms-flex-align: center; align-items: center; - -ms-flex: 1; flex: 1; - -ms-flex-negative: 0; flex-shrink: 0; min-width: 0; word-break: break-all; font-size: var(--nutui-cell-extra-font-size, var(--nutui-font-size-base, 14rpx)); color: var(--nutui-cell-extra-color, var(--nutui-color-text, #505259)); } +.nut-cell-clickable { + cursor: pointer; +} .nut-cell-clickable::before { position: absolute; top: 50%; @@ -16234,20 +12406,17 @@ wx-button { border: inherit; border-color: #000; border-radius: inherit; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; content: ' '; } .nut-cell-divider { - display: -ms-flexbox; display: flex; min-height: 1rpx; padding-left: var(--nutui-cell-divider-left, 16rpx); padding-right: var(--nutui-cell-divider-right, 16rpx); } .nut-cell-divider-inner { - display: -ms-flexbox; display: flex; height: 1rpx; width: 100%; @@ -16266,13 +12435,16 @@ wx-button { background: var(--nutui-color-background-overlay, #ffffff); } .nut-cascader .nut-tabs-titles-item { - -ms-flex: initial; flex: initial; min-width: auto; width: auto; padding: var(--nutui-cascader-tabs-item-padding, 0 10rpx); white-space: nowrap; } +.nut-cascader .nut-tabpane { + padding: 0; + background: var(--nutui-color-background-overlay, #ffffff); +} .nut-cascader-pane { display: block; width: 100%; @@ -16282,11 +12454,8 @@ wx-button { -webkit-overflow-scrolling: touch; } .nut-cascader-item { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; padding: var(--nutui-cascader-item-padding, 10rpx 20rpx); margin: var(--nutui-cascader-item-margin, 0rpx); @@ -16295,6 +12464,20 @@ wx-button { color: var(--nutui-cascader-item-color, var(--nutui-color-title, #1a1a1a)); cursor: pointer; } +.nut-cascader-item.disabled { + opacity: 0.6; + cursor: not-allowed; +} +.nut-cascader-item.active:not(.disabled) { + color: var(--nutui-cascader-item-active-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-cascader-item.active .nut-cascader-item-icon-check { + visibility: visible; + color: inherit; +} +.nut-cascader-item-title { + flex: 1; +} .nut-cascader .nut-icon-checklist { margin-left: var(--nutui-cascader-icon-checklist-marginLeft, 10rpx); visibility: hidden; @@ -16306,7 +12489,6 @@ wx-button { } .nut-card { width: 100%; - display: -ms-flexbox; display: flex; background-color: inherit; border-radius: var(--nutui-card-border-radius, 4rpx); @@ -16314,7 +12496,6 @@ wx-button { .nut-card-left { width: 120rpx; height: 120rpx; - -ms-flex-negative: 0; flex-shrink: 0; } .nut-card-left > .h5-img { @@ -16324,7 +12505,6 @@ wx-button { border-radius: var(--nutui-card-border-radius, 4rpx); } .nut-card-right { - -ms-flex: 1; flex: 1; padding: 0 10rpx 8rpx; } @@ -16339,9 +12519,7 @@ wx-button { color: var(--nutui-color-title, #1a1a1a); } .nut-card-right-price { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; height: 18rpx; line-height: 18rpx; @@ -16350,10 +12528,13 @@ wx-button { .nut-card-right-price-origin.nut-price { margin-left: 2rpx; } +.nut-card-right-price-origin.nut-price .nut-price-symbol, +.nut-card-right-price-origin.nut-price .nut-price-integer, +.nut-card-right-price-origin.nut-price .nut-price-decimal { + color: #d2a448; +} .nut-card-right-other { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; padding: 5rpx 0 2rpx; } @@ -16362,6 +12543,11 @@ wx-button { margin-right: 5rpx; font-size: var(--nutui-font-size-xs, 11rpx); } +.nut-card-right-shop { + display: flex; + justify-content: space-between; + align-items: center; +} .nut-card-right-shop-name { line-height: 1.5; color: var(--nutui-color-text, #505259); @@ -16385,11 +12571,16 @@ wx-button { font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15rpx)); color: var(--nutui-color-title, #1a1a1a); } +.nut-calendarcard-header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + font-weight: 400; +} .nut-calendarcard-header-left, .nut-calendarcard-header-right { - display: -ms-flexbox; display: flex; - -ms-flex-direction: row; flex-direction: row; cursor: pointer; margin: 16rpx; @@ -16403,14 +12594,16 @@ wx-button { .nut-calendarcard-header-right .right { margin-right: 8rpx; } +.nut-calendarcard-days { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; +} .nut-calendarcard-day { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - -ms-flex-direction: column; flex-direction: column; position: relative; width: var(--nutui-calendar-day-width, 14.28%); @@ -16419,23 +12612,43 @@ wx-button { margin-bottom: 4rpx; text-align: center; } +.nut-calendarcard-day.header { + cursor: auto; +} .nut-calendarcard-day-top, .nut-calendarcard-day-bottom { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; width: 100%; height: 12rpx; font-size: 12rpx; line-height: 12rpx; } +.nut-calendarcard-day.weekend { + color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23)); +} .nut-calendarcard-day.active { background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23)); border-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); } +.nut-calendarcard-day.active .nut-calendarcard-day-top, +.nut-calendarcard-day.active .nut-calendarcard-day-inner, +.nut-calendarcard-day.active .nut-calendarcard-day-bottom { + color: #fff; +} +.nut-calendarcard-day.start, +.nut-calendarcard-day.end { + background-color: var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-calendarcard-day.start .nut-calendarcard-day-top, +.nut-calendarcard-day.start .nut-calendarcard-day-inner, +.nut-calendarcard-day.start .nut-calendarcard-day-bottom, +.nut-calendarcard-day.end .nut-calendarcard-day-top, +.nut-calendarcard-day.end .nut-calendarcard-day-inner, +.nut-calendarcard-day.end .nut-calendarcard-day-bottom { + color: #fff; +} .nut-calendarcard-day.start { border-top-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); border-bottom-left-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); @@ -16444,6 +12657,33 @@ wx-button { border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); } +.nut-calendarcard-day.mid { + background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); +} +.nut-calendarcard-day.mid .nut-calendarcard-day-top, +.nut-calendarcard-day.mid .nut-calendarcard-day-inner, +.nut-calendarcard-day.mid .nut-calendarcard-day-bottom { + color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-calendarcard-day .nut-calendar-day-info { + color: #fff; +} +.nut-calendarcard-day.prev, +.nut-calendarcard-day.next, +.nut-calendarcard-day.disabled { + cursor: not-allowed; +} +.nut-calendarcard-day.prev .nut-calendarcard-day-top, +.nut-calendarcard-day.prev .nut-calendarcard-day-inner, +.nut-calendarcard-day.prev .nut-calendarcard-day-bottom, +.nut-calendarcard-day.next .nut-calendarcard-day-top, +.nut-calendarcard-day.next .nut-calendarcard-day-inner, +.nut-calendarcard-day.next .nut-calendarcard-day-bottom, +.nut-calendarcard-day.disabled .nut-calendarcard-day-top, +.nut-calendarcard-day.disabled .nut-calendarcard-day-inner, +.nut-calendarcard-day.disabled .nut-calendarcard-day-bottom { + color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc)); +} [dir='rtl'] .nut-calendarcard-header-left .left, [dir='rtl'] .nut-calendarcard-header-right .left, .nut-rtl .nut-calendarcard-header-left .left, @@ -16470,10 +12710,15 @@ wx-button { .nut-rtl .nut-calendarcard-header-right .nut-icon-ArrowLeft, .nut-rtl .nut-calendarcard-header-right .nut-icon-ArrowRight, .nut-rtl .nut-calendarcard-header-right .h5-svg { - -ms-transform: rotate(180deg); transform: rotate(180deg); } [dir='rtl'] .nut-calendarcard-day.start, +[dir='rtl'] .nut-calendarcard-day.end, +.nut-rtl .nut-calendarcard-day.start, +.nut-rtl .nut-calendarcard-day.end { + border-radius: 0; +} +[dir='rtl'] .nut-calendarcard-day.start, .nut-rtl .nut-calendarcard-day.start { border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); @@ -16485,11 +12730,8 @@ wx-button { } .nut-calendar { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex: 1; flex: 1; font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15rpx)); background-color: var(--nutui-color-background-overlay, #ffffff); @@ -16500,6 +12742,20 @@ wx-button { .nut-calendar.nut-calendar-title .nut-calendar-header .calendar-title { font-size: var(--nutui-calendar-base-font-size, var(--nutui-font-size-l, 15rpx)); } +.nut-calendar .nut-calendar-taro { + height: 60vh; +} +.nut-calendar .popup-box { + height: 100%; +} +.nut-calendar ::-webkit-scrollbar { + display: none; +} +.nut-calendar-header { + display: flex; + flex-direction: column; + text-align: center; +} .nut-calendar-header-buttons { height: var(--nutui-calendar-header-height, 24rpx); } @@ -16515,16 +12771,30 @@ wx-button { font-size: var(--nutui-calendar-sub-title-font-size, var(--nutui-font-size-base, 14rpx)); } .nut-calendar-weeks { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: distribute; justify-content: space-around; height: 36rpx; border-radius: 0 0 12rpx 12rpx; box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05882); } +.nut-calendar-week-item:first-of-type, +.nut-calendar-week-item:last-of-type { + color: var(--nutui-color-primary, #ff0f23); +} +.nut-calendar-content { + flex: 1; + width: 100%; + display: block; + overflow-y: auto; +} +.nut-calendar-pannel { + position: relative; + width: 100%; + height: auto; + display: block; + box-sizing: border-box; +} .nut-calendar-pannel .calendar-loading-tip { height: 50rpx; line-height: 50rpx; @@ -16536,19 +12806,23 @@ wx-button { font-size: var(--nutui-font-size-s, 12rpx); color: var(--nutui-color-text, #505259); } +.nut-calendar-month { + display: flex; + flex-direction: column; + text-align: center; +} .nut-calendar-month-title { height: 23rpx; line-height: 23rpx; margin: 8rpx 0; } +.nut-calendar-days { + overflow: hidden; +} .nut-calendar-day { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - -ms-flex-direction: column; flex-direction: column; position: relative; float: left; @@ -16557,6 +12831,10 @@ wx-button { font-weight: var(--nutui-calendar-day-font-weight, var(--nutui-font-weight-bold, 600)); margin-bottom: 4rpx; } +.nut-calendar-day:nth-child(7n), +.nut-calendar-day:nth-child(7n + 1) { + color: var(--nutui-color-primary, #ff0f23); +} .nut-calendar-day-info, .nut-calendar-day-info-curr { position: absolute; @@ -16590,13 +12868,38 @@ wx-button { border-top-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); border-bottom-right-radius: var(--nutui-calendar-day-active-border-radius, 4rpx); } +.nut-calendar-day-active .nut-calendar-day-info { + color: #fff; +} +.nut-calendar-day-disabled { + color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc)) !important; +} +.nut-calendar-day-disabled .nut-calendar-day-info-curr { + display: none; +} +.nut-calendar-day-choose { + background-color: var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light-pressed, #ffebf1)); + color: var(--nutui-calendar-choose-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-calendar-day-choose-disabled { + background-color: var(--nutui-calendar-choose-disable-background-color, rgba(191, 191, 191, 0.09)); + color: var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #c2c4cc)) !important; +} +.nut-calendar-day-choose-disabled .nut-calendar-day-info-curr { + display: none; +} +.nut-calendar-footer { + display: flex; + width: 100%; + flex-direction: column; + background-color: #fff; +} .nut-calendar-footer .calendar-confirm-btn { height: 40rpx; line-height: 40rpx; margin: 6rpx 16rpx; text-align: center; border-radius: var(--nutui-radius-base, 8rpx); - background: -webkit-linear-gradient(left, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); color: #fff; font-weight: var(--nutui-font-weight-bold, 600); @@ -16604,6 +12907,10 @@ wx-button { .nut-calendar-popup .nut-popup-title-right { top: 7rpx !important; } +[dir='rtl'] .nut-calendar-day, +.nut-rtl .nut-calendar-day { + float: right; +} [dir='rtl'] .nut-calendar-day-active.active-start, .nut-rtl .nut-calendar-day-active.active-start { border-top-left-radius: 0; @@ -16620,18 +12927,13 @@ wx-button { } .nut-button { position: relative; - display: -ms-flexbox; display: flex; display: inline-block; width: 80rpx; width: auto; - -ms-flex-direction: row; flex-direction: row; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; - -ms-flex-negative: 0; flex-shrink: 0; box-sizing: border-box; margin: 0; @@ -16642,10 +12944,7 @@ wx-button { text-align: center; cursor: pointer; transition: opacity 0.2s; - -moz-user-select: none; - -ms-user-select: none; user-select: none; - -ms-touch-action: manipulation; touch-action: manipulation; color: var(--nutui-button-default-color, var(--nutui-color-title, #1a1a1a)); background: var(--nutui-button-default-background-color, transparent); @@ -16657,6 +12956,11 @@ wx-button { .nut-button-text-right { margin-right: var(--nutui-button-text-icon-margin, 4rpx); } +.nut-button-children { + display: flex; + flex-direction: row; + background: transparent; +} .nut-button::before { position: absolute; top: 50%; @@ -16667,23 +12971,21 @@ wx-button { border: inherit; border-color: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)); border-radius: inherit; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; content: ' '; pointer-events: none; pointer-events: auto; } +.nut-button::after { + border: none; +} .nut-button-wrap { height: 100%; width: 100%; - display: -ms-flexbox; display: flex; - -ms-flex-direction: row; flex-direction: row; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; background: initial; @@ -16693,6 +12995,14 @@ wx-button { width: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14rpx)); height: var(--nutui-button-default-font-size, var(--nutui-font-size-base, 14rpx)); } +.nut-button-loading::before, +.nut-button-disabled::before { + display: none; +} +.nut-button-disabled { + cursor: not-allowed; + color: #fff; +} .nut-button.nut-button-icononly { width: var(--nutui-button-default-height, 32rpx); padding: 0; @@ -16705,6 +13015,21 @@ wx-button { border-style: solid; border-color: var(--nutui-button-default-border-color, var(--nutui-color-text-disabled, #c2c4cc)); } +.nut-button-default-disabled, +.nut-button-default-solid-disabled { + color: var(--nutui-button-primary-color, #ffffff); + background: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc)); + border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc)); +} +.nut-button-default-none-disabled { + color: var(--nutui-button-default-disabled-color, var(--nutui-color-text-help, #888b94)); +} +.nut-button-default-outline-disabled, +.nut-button-default-dashed-disabled { + background: transparent; + color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc)); + border-color: var(--nutui-button-default-disabled, var(--nutui-color-text-disabled, #c2c4cc)); +} .nut-button-normal { padding: var(--nutui-button-normal-padding, 0rpx 12rpx); } @@ -16776,6 +13101,200 @@ wx-button { .nut-button-mini-children { font-size: var(--nutui-button-mini-font-size, var(--nutui-font-size-xs, 11rpx)); } +.nut-button-primary { + color: var(--nutui-button-primary-color, #ffffff); + background-origin: border-box; + border-color: transparent; +} +.nut-button-primary-children { + color: var(--nutui-button-primary-color, #ffffff); +} +.nut-button-primary-solid { + background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); + color: var(--nutui-button-primary-color, #ffffff); + border-color: transparent; + font-weight: var(--nutui-font-weight-bold, 600); +} +.nut-button-primary-solid.nut-button-small, +.nut-button-primary-solid.nut-button-mini { + font-weight: var(--nutui-font-weight, 400); +} +.nut-button-primary-disabled, +.nut-button-primary-disabled.nut-button-icononly, +.nut-button-primary-solid-disabled { + color: var(--nutui-button-primary-color, #ffffff); + background: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); + border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +} +.nut-button-primary-none { + color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-button-primary-none-disabled { + color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +} +.nut-button-primary-outline { + color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); + border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-button-primary-outline-disabled { + color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); + border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +} +.nut-button-primary-dashed { + color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); + border-color: var(--nutui-button-primary-border-color, var(--nutui-color-primary, #ff0f23)); +} +.nut-button-primary-dashed-disabled { + color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); + border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +} +.nut-button-primary.nut-button-solid.nut-button-normal { + font-weight: var(--nutui-font-weight-bold, 600); +} +.nut-button-success { + color: var(--nutui-button-success-color, #ffffff); + background: var(--nutui-button-success-background-color, var(--nutui-color-success, #00d900)); + background-origin: border-box; + border-color: transparent; +} +.nut-button-success-children { + color: var(--nutui-button-success-color, #ffffff); +} +.nut-button-success-disabled, +.nut-button-success-solid-disabled { + background: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae)); + border-color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae)); +} +.nut-button-success-outline, +.nut-button-success-dashed { + color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900)); + border-color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900)); +} +.nut-button-success-outline-disabled, +.nut-button-success-dashed-disabled { + color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); + border-color: var(--nutui-button-primary-disabled, var(--nutui-color-primary-disabled-special, #ffadbe)); +} +.nut-button-success-none { + color: var(--nutui-button-success-border-color, var(--nutui-color-success, #00d900)); +} +.nut-button-success-none-disabled { + color: var(--nutui-button-success-disabled, var(--nutui-color-success-disabled, #b2f0ae)); +} +.nut-button-info { + color: var(--nutui-button-info-color, #ffffff); + background: var(--nutui-button-info-background-color, var(--nutui-color-info-background, #0073ff)); + background-origin: border-box; + border-color: transparent; +} +.nut-button-info-children { + color: var(--nutui-button-info-color, #ffffff); +} +.nut-button-info-disabled, +.nut-button-info-solid-disabled { + background: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); + border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); +} +.nut-button-info-outline, +.nut-button-info-dashed { + color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff)); + border-color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff)); +} +.nut-button-info-outline-disabled, +.nut-button-info-dashed-disabled { + color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); + border-color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); +} +.nut-button-info-none { + color: var(--nutui-button-info-border-color, var(--nutui-color-info, #0073ff)); +} +.nut-button-info-none-disabled { + color: var(--nutui-button-info-disabled, var(--nutui-color-info-disabled, #89a6f8)); +} +.nut-button-danger { + color: var(--nutui-button-danger-color, #ffffff); + background: var(--nutui-button-danger-background-color, var(--nutui-color-danger, #ff0f23)); + background-origin: border-box; + border-color: transparent; +} +.nut-button-danger-children { + color: var(--nutui-button-danger-color, #ffffff); +} +.nut-button-danger-disabled, +.nut-button-danger-solid-disabled { + background: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); + border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); +} +.nut-button-danger-outline, +.nut-button-danger-dashed { + color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23)); + border-color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23)); +} +.nut-button-danger-outline-disabled, +.nut-button-danger-dashed-disabled { + color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); + border-color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); +} +.nut-button-danger-none { + color: var(--nutui-button-danger-border-color, var(--nutui-color-danger, #ff0f23)); +} +.nut-button-danger-none-disabled { + color: var(--nutui-button-danger-disabled, var(--nutui-color-danger-disabled, var(--nutui-color-primary-disabled-special, #ffadbe))); +} +.nut-button-warning { + color: var(--nutui-button-warning-color, #ffffff); + background: var(--nutui-button-warning-background-color, var(--nutui-color-warning, #ffbf00)); + background-origin: border-box; + border-color: transparent; +} +.nut-button-warning-children { + color: var(--nutui-button-warning-color, #ffffff); +} +.nut-button-warning-disabled, +.nut-button-warning-solid-disabled { + color: var(--nutui-button-warning-color, #ffffff); + background: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); + border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); +} +.nut-button-warning-outline, +.nut-button-warning-dashed { + color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00)); + border-color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00)); +} +.nut-button-warning-outline-disabled, +.nut-button-warning-dashed-disabled { + color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); + border-color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); +} +.nut-button-warning-none { + color: var(--nutui-button-warning-border-color, var(--nutui-color-warning, #ffbf00)); +} +.nut-button-warning-none-disabled { + color: var(--nutui-button-warning-disabled, var(--nutui-color-warning-disabled, #fdd3b9)); +} +.nut-button-block { + display: block; + width: 100%; +} +.nut-button-outline { + background: transparent; + border-style: solid; +} +.nut-button-dashed { + background: transparent; + border-style: dashed; +} +.nut-button-none { + background: transparent; + border-color: transparent; +} +.nut-button-loading { + cursor: default; + opacity: 0.9; +} +.nut-button-square { + border-radius: var(--nutui-button-square-border-radius, 0); +} [dir='rtl'] .nut-button-text, .nut-rtl .nut-button-text { margin-left: 0; @@ -16789,9 +13308,19 @@ wx-button { .nut-rtl .nut-button::before { left: auto; right: 50%; - -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } +.nut-barrage { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: hidden; + box-sizing: border-box; + background-color: var(--nutui-color-background, #f2f3f5); + color: var(--nutui-color-title, #1a1a1a); +} .nut-barrage .barrage-item { display: block; position: absolute; @@ -16801,9 +13330,7 @@ wx-button { font-size: var(--nutui-font-size-s, 12rpx); text-align: center; white-space: pre; - -ms-transform: translate(100%); transform: translate(100%); - background: -webkit-linear-gradient(left, var(--nutui-black-3), var(--nutui-black-1)); background: linear-gradient(to right, var(--nutui-black-3), var(--nutui-black-1)); box-sizing: border-box; } @@ -16821,11 +13348,14 @@ wx-button { transform: translate(var(--move-distance)); } } +[dir='rtl'] .nut-barrage, +.nut-rtl .nut-barrage { + left: auto; + right: 0; +} [dir='rtl'] .nut-barrage .barrage-item, .nut-rtl .nut-barrage .barrage-item { - -ms-transform: translate(-100%); transform: translate(-100%); - background: -webkit-linear-gradient(right, var(--nutui-black-3), var(--nutui-black-1)); background: linear-gradient(to left, var(--nutui-black-3), var(--nutui-black-1)); } [dir='rtl'] .nut-barrage .barrage-item.move, @@ -16840,12 +13370,17 @@ wx-button { transform: translate(100%); } } +.nut-badge { + position: relative; + display: flex; + display: inline-flex; + box-sizing: content-box; + vertical-align: middle; + width: auto; +} .nut-badge-icon { - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23)); padding: var(--nutui-badge-icon-padding, 2rpx); @@ -16869,15 +13404,12 @@ wx-button { right: -50%; bottom: -50%; left: -50%; - -ms-transform: scale(0.5); transform: scale(0.5); border: var(--nutui-badge-border, 1rpx solid #ffffff); border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14rpx)); } .nut-badge-sup { - display: -ms-flexbox; display: flex; - display: -ms-inline-flexbox; display: inline-flex; text-align: center; min-width: var(--nutui-badge-min-width, 6rpx); @@ -16892,15 +13424,24 @@ wx-button { background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23)); z-index: 1; } +.nut-badge-disabled { + background: var(--nutui-badge-background-disabled-color, var(--nutui-color-text-disabled, #c2c4cc)); +} +.nut-badge-number { + font-family: JDZH-Regular; +} .nut-badge-one { height: var(--nutui-badge-height, 14rpx); width: var(--nutui-badge-height, 14rpx); } .nut-badge-content { position: absolute; - -ms-transform: var(--nutui-badge-content-transform, translate(50%, -50%)); transform: var(--nutui-badge-content-transform, translate(50%, -50%)); } +.nut-badge-dot { + padding: 0; + border-radius: 50%; +} .nut-badge-dot::after { border: var(--nutui-badge-dot-border, 1rpx solid #ffffff); border-radius: 50%; @@ -16920,20 +13461,34 @@ wx-button { width: var(--nutui-badge-dot-large-width, 8rpx); height: var(--nutui-badge-dot-large-width, 8rpx); } +.nut-badge-outline { + background: #fff; + color: var(--nutui-badge-outline-color, var(--nutui-color-primary, #ff0f23)); +} .nut-badge-outline::after { border: var(--nutui-badge-outline-border, 1rpx solid var(--nutui-color-primary, #ff0f23)); } +.nut-backtop { + display: none; +} .nut-backtop-show { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; width: var(--nutui-hoverbutton-item-size, 40rpx); height: var(--nutui-hoverbutton-item-size, 40rpx); transition: all 0.2s ease-in-out; } +.nut-backtop-show .nut-hoverbutton-item-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.nut-avatar-cropper { + position: relative; + display: flex; +} .nut-avatar-cropper-edit-text { position: absolute; top: 0; @@ -16943,38 +13498,115 @@ wx-button { background-color: rgba(0, 0, 0, 0.30196); z-index: 1; color: #fff; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; } +.nut-avatar-cropper-input { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + cursor: pointer; + z-index: 2; +} +.nut-avatar-cropper-popup { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: var(--nut-overlay-bg-color, rgba(0, 0, 0, 0.7)); + z-index: 1000; +} +.nut-avatar-cropper-popup-canvas, +.nut-avatar-cropper-popup-cut-canvas { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 1; +} +.nut-avatar-cropper-popup-cut-canvas { + z-index: 0; +} +.nut-avatar-cropper-popup-toolbar { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + z-index: 2; +} +.nut-avatar-cropper-popup-toolbar.top { + top: 0; + bottom: inherit; +} +.nut-avatar-cropper-popup-toolbar-flex { + width: 100%; + display: flex; + justify-content: space-between; +} .nut-avatar-cropper-popup-toolbar-item { color: #fff; padding: 15rpx; cursor: pointer; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; } +.nut-avatar-cropper-popup-toolbar-item .nut-button { + color: #fff; +} +.nut-avatar-cropper-popup-highlight { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 1; + background-color: transparent; +} .nut-avatar-cropper-popup-highlight .highlight { position: absolute; left: 50%; top: 50%; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: transparent; box-shadow: 0 0 1000rpx 1000rpx rgba(0, 0, 0, 0.6); } +.nut-avatar-cropper.round .nut-avatar-cropper-edit-text { + border-radius: 50%; +} +[dir='rtl'] .nut-avatar-cropper-edit-text, +.nut-rtl .nut-avatar-cropper-edit-text, +[dir='rtl'] .nut-avatar-cropper-input, +.nut-rtl .nut-avatar-cropper-input, +[dir='rtl'] .nut-avatar-cropper-popup, +.nut-rtl .nut-avatar-cropper-popup, +[dir='rtl'] .nut-avatar-cropper-popup-canvas, +[dir='rtl'] .nut-avatar-cropper-popup-cut-canvas, +.nut-rtl .nut-avatar-cropper-popup-canvas, +.nut-rtl .nut-avatar-cropper-popup-cut-canvas, +[dir='rtl'] .nut-avatar-cropper-popup-toolbar, +.nut-rtl .nut-avatar-cropper-popup-toolbar, +[dir='rtl'] .nut-avatar-cropper-popup-highlight, +.nut-rtl .nut-avatar-cropper-popup-highlight { + left: auto; + right: 0; +} [dir='rtl'] .nut-avatar-cropper-popup-highlight .highlight, .nut-rtl .nut-avatar-cropper-popup-highlight .highlight { left: auto; right: 50%; - -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } +.nut-avatar-group { + display: flex; + flex-direction: row; + flex: 0 0 auto; +} .nut-avatar-group-avatar, .nut-avatar-group .nut-avatar { border: 1rpx solid #fff; @@ -16991,13 +13623,9 @@ wx-button { } .nut-avatar { position: relative; - -ms-flex: 0 0 auto; flex: 0 0 auto; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; width: var(--nutui-avatar-normal-width, 40rpx); height: var(--nutui-avatar-normal-height, 40rpx); @@ -17009,6 +13637,26 @@ wx-button { .nut-avatar-square { border-radius: var(--nutui-avatar-square, 5rpx); } +.nut-avatar-first-child { + margin-left: 0; + margin-right: 0; +} +.nut-avatar-img { + width: 100%; + height: 100%; + flex-shrink: 0; + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center center; +} +.nut-avatar-icon { + background-size: 100% 100%; +} +.nut-avatar-text { + display: flex; + justify-content: center; + align-items: center; +} .nut-avatar-large, .nut-avatar-large-img, .nut-avatar-large-icon, @@ -17021,12 +13669,13 @@ wx-button { width: var(--nutui-avatar-small-width, 32rpx); height: var(--nutui-avatar-small-height, 32rpx); } +.nut-audio-icon { + position: relative; + display: inline-block; +} .nut-audio-icon-box { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; width: 30rpx; height: 30rpx; @@ -17034,32 +13683,29 @@ wx-button { border-radius: 50%; box-shadow: 0 0 8rpx var(--nutui-color-text-disabled, #c2c4cc); } +.nut-audio-icon .nut-audio-icon-stop { + position: relative; +} .nut-audio-icon .nut-audio-icon-stop::after { position: absolute; left: 50%; top: 50%; - -ms-transform: translate(-50%); transform: translate(-50%); content: ''; height: 2rpx; width: 30rpx; background: var(--nutui-color-text-disabled, #c2c4cc); - -ms-transform: rotate(45deg); transform: rotate(45deg); - -ms-transform-origin: 8rpx -18rpx; transform-origin: 8rpx -18rpx; } .nut-audio-progress { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; width: 100%; margin: 0 auto; padding: 10rpx 0; } .nut-audio-progress-bar-wrapper { - -ms-flex: 1; flex: 1; margin: 0 10rpx; } @@ -17079,18 +13725,18 @@ wx-button { margin: 0 5rpx; pointer-events: none; } +.nut-audio .disable { + color: #00f; +} .nut-audio .nut-audio-none-container .nut-voice { border: 1rpx solid var(--nutui-color-title, #1a1a1a); - -ms-flex-align: center; align-items: center; } [dir='rtl'] .nut-audio-icon .nut-audio-icon-stop::after, .nut-rtl .nut-audio-icon .nut-audio-icon-stop::after { left: auto; right: 50%; - -ms-transform: rotate(-45deg); transform: rotate(-45deg); - -ms-transform-origin: 20rpx -18rpx; transform-origin: 20rpx -18rpx; } .nut-animate [class*='nut-animate-'] { @@ -17212,6 +13858,9 @@ wx-button { animation-timing-function: ease-in-out; animation-direction: alternate; } +.nut-animate .nut-animate-twinkle { + position: relative; +} .nut-animate .nut-animate-twinkle::after, .nut-animate .nut-animate-twinkle::before { width: 60rpx; @@ -17225,7 +13874,6 @@ wx-button { margin-top: -30rpx; margin-right: -30rpx; z-index: 1; - -ms-transform: scale(0); transform: scale(0); animation: twinkle 2s ease-out infinite; } @@ -17236,12 +13884,19 @@ wx-button { 0% { transform: scale(0); } + 20% { + opacity: 1; + } 50%, to { transform: scale(1.4); opacity: 0; } } +.nut-animate .nut-animate-flicker { + position: relative; + overflow: hidden; +} .nut-animate .nut-animate-flicker::after { width: 100rpx; height: 60rpx; @@ -17250,10 +13905,8 @@ wx-button { top: 0; opacity: 0.73; content: ''; - background-image: -webkit-linear-gradient(344deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%); - background-image: linear-gradient(106deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%); + background-image: linear-gradient(106deg, #e8e0ff00 24%, #e8e0ff 91%); animation: flicker 1.5s linear infinite; - -ms-transform: skew(-20deg); transform: skew(-20deg); filter: blur(3rpx); } @@ -17284,11 +13937,13 @@ wx-button { } } .nut-animate .nut-animate-jump { - -ms-transform-origin: center center; transform-origin: center center; animation: jump 0.7s linear; } @keyframes float-pop { + 0% { + top: 0; + } 25% { top: 1rpx; } @@ -17298,6 +13953,9 @@ wx-button { 75% { top: 1rpx; } + to { + top: 0; + } } .nut-animate .nut-animate-float { position: relative; @@ -17306,9 +13964,23 @@ wx-button { .nut-animate .loop { animation-iteration-count: infinite; } +.nut-actionsheet { + text-align: center; +} +.nut-actionsheet.nut-popup { + min-height: 10%; + background-color: var(--nutui-actionsheet-background-color, var(--nutui-color-background-overlay, #ffffff)); +} .nut-actionsheet .nut-popup-title { border-bottom: 1rpx solid var(--nutui-actionsheet-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); } +.nut-actionsheet-list { + display: block; + list-style: none; + padding: 0; + margin: 0; + border-radius: var(--nutui-actionsheet-border-radius, 0); +} .nut-actionsheet-cancel, .nut-actionsheet-item { display: block; @@ -17334,11 +14006,26 @@ wx-button { text-align: var(--nutui-actionsheet-item-text-align, center); line-height: var(--nutui-actionsheet-item-line-height, 24rpx); } +.nut-actionsheet-cancel-danger, +.nut-actionsheet-item-danger { + color: var(--nutui-actionsheet-item-danger, var(--nutui-color-danger, #ff0f23)); +} +.nut-actionsheet-cancel-disabled, +.nut-actionsheet-item-disabled { + color: var(--nutui-color-text-disabled, #c2c4cc) !important; + cursor: not-allowed; +} .nut-actionsheet-cancel { margin-top: 5rpx; border-top: 1rpx solid var(--nutui-actionsheet-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06))); border-radius: var(--nutui-actionsheet-border-radius, 0); } +.nut-actionsheet-safe-area { + display: block; + width: 100%; + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); +} .nut-address-exist { display: block; padding: 15rpx 20rpx 0; @@ -17347,15 +14034,16 @@ wx-button { box-sizing: border-box; } .nut-address-exist-item { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; margin-bottom: 20rpx; font-size: var(--nutui-font-size-s, 12rpx); line-height: var(--nutui-font-size-base, 14rpx); color: var(--nutui-color-title, #1a1a1a); } +.nut-address-exist-item.active { + font-weight: var(--nutui-font-weight-bold, 600); +} .nut-address-exist-item-info { margin-left: 9rpx; } @@ -17371,7 +14059,6 @@ wx-button { line-height: 42rpx; margin: auto; text-align: center; - background: -webkit-linear-gradient(left, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); background: linear-gradient(90deg, var(--nutui-color-primary-stop-1, #ff475d) 0%, var(--nutui-color-primary-stop-2, #ff0f23) 100%); border-radius: 21rpx; font-size: 15rpx; @@ -17384,19 +14071,13 @@ wx-button { } .nut-address-hotlist { padding: 0 16rpx; - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; flex-wrap: wrap; - -ms-flex-align: start; align-items: flex-start; } .nut-address-hotlist-item { - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; width: 63rpx; height: 28rpx; @@ -17407,6 +14088,9 @@ wx-button { background-color: var(--nutui-color-background-sunken, #f7f8fc); color: var(--nutui-color-title, #1a1a1a); } +.nut-address-hotlist-item:nth-child(5n) { + margin-right: 0; +} .nut-address-hotlist.hotlist-more .nut-address-hotlist-item { width: auto; padding: 0 16rpx; @@ -17416,9 +14100,7 @@ wx-button { width: 100%; height: 60rpx; padding: 0 16rpx; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; border-bottom: 1rpx solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)); } @@ -17440,6 +14122,9 @@ wx-button { margin: 0 2rpx; color: var(--nutui-color-text-disabled, #c2c4cc); } +.nut-address-elevator { + margin-top: 0; +} .nut-address-elevator .nut-elevator-list-item { position: relative; padding-left: 20rpx; @@ -17455,12 +14140,14 @@ wx-button { color: var(--nutui-color-text-help, #888b94); font-weight: 500; } +.nut-address-elevator .nut-elevator-bars { + top: 40%; + padding: 0; + background: none; +} .nut-address-elevator .nut-elevator-bars-inner-item { - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; width: 16rpx; height: 16rpx; @@ -17469,6 +14156,11 @@ wx-button { margin-bottom: 2rpx; color: var(--nutui-color-text-help, #888b94); } +.nut-address-elevator .nut-elevator-bars-inner-item-active { + background-color: var(--nutui-color-primary, #ff0f23); + color: var(--nutui-color-background-overlay, #ffffff); + font-weight: 400; +} [dir='rtl'] .nut-address-exist-item-info, .nut-rtl .nut-address-exist-item-info { margin-left: 0; @@ -17480,6 +14172,9 @@ wx-button::after { border: none; content: ''; } +wx-button { + background: #000; +} wx-button { background: #444; } @@ -17487,9 +14182,7 @@ abc { background: #222; } .weapp-tw-user-ui-card { - display: -ms-inline-flexbox; display: inline-flex; - -ms-flex-align: center; align-items: center; gap: 8rpx; color: var(--weapp-tw-user-ui-color, #175e75); @@ -17512,7 +14205,6 @@ abc { transform: scale(0.96); } } -@charset "UTF-8"; @font-face { font-family: JDZH-Regular; src: url(data:font/ttf;base64,) format('truetype'); @@ -17527,9 +14219,3 @@ abc { font-style: normal; font-display: swap; } -@keyframes nutBounce { - 80% { - transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); - transform: translateZ(0) scaleY(0.95); - } -} diff --git a/e2e/__snapshots__/e2e/taro-vite-vue3-tailwindcss-v4/app-origin.wxss b/e2e/__snapshots__/e2e/taro-vite-vue3-tailwindcss-v4/app-origin.wxss index 88e423372..00f209951 100644 --- a/e2e/__snapshots__/e2e/taro-vite-vue3-tailwindcss-v4/app-origin.wxss +++ b/e2e/__snapshots__/e2e/taro-vite-vue3-tailwindcss-v4/app-origin.wxss @@ -1269,14 +1269,6 @@ wx-button { border: var(--nut-pagination-item-border-width, 1rpx) solid var(--nut-pagination-item-border-color, #e4e7eb); cursor: pointer; } -.nut-pagination-prev, -.nut-pagination-item { - border-right: none; -} -.nut-pagination-prev, -.nut-pagination-next { - padding: var(--nut-pagination-prev-next-padding, 0 11rpx); -} .nut-pagination .simple-border { border-right: var(--nut-pagination-item-border-width, 1rpx) solid var(--nut-pagination-item-border-color, #e4e7eb); } @@ -1623,22 +1615,6 @@ wx-button { justify-content: center; color: var(--nut-tabs-titles-item-color, var(--nut-title-color, #1a1a1a)); } -.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__text { - text-align: center; -} -.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__text.ellipsis { - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon { - position: absolute; - font-size: 12rpx; - width: 100%; - height: 100%; - color: var(--nut-tabs-tab-smile-color, var(--nut-primary-color, #fa2c19)); -} .nut-tabs .nut-tabs__titles .nut-tabs__titles-item__smile, .nut-tabs .nut-tabs__titles .nut-tabs__titles-item__line { position: absolute; @@ -1654,19 +1630,6 @@ wx-button { border-radius: var(--nut-tabs-titles-item-line-border-radius, 0); opacity: var(--nut-tabs-titles-item-line-opacity, 1); } -.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.active { - font-weight: 700; - color: var(--nut-tabs-titles-item-active-color, var(--nut-title-color, #1a1a1a)); -} -.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__line { - content: ' '; - width: var(--nut-tabs-horizontal-titles-item-active-line-width, 40rpx); - height: 3rpx; - background: var(--nut-tabs-horizontal-tab-line-color, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); -} -.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.disabled { - color: var(--nut-disable-color, #cccccc); -} .nut-tabs .nut-tabs__titles-left { -ms-flex-pack: start; justify-content: flex-start; @@ -1681,15 +1644,6 @@ wx-button { flex-direction: row; height: var(--nut-tabs-horizontal-titles-height, 46rpx); } -.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__list, -.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__list { - height: 100%; -} -.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles.scrollable, -.nut-tabs.horizontal > .nut-tabs__titles.scrollable { - overflow-x: auto; - overflow-y: hidden; -} .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item, .nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item { -ms-flex: 1 0 auto; @@ -1697,14 +1651,6 @@ wx-button { min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50rpx); width: 0; } -.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon, -.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon { - position: absolute; - font-size: 12rpx; - width: 100%; - height: 100%; - color: var(--nut-tabs-tab-smile-color, var(--nut-primary-color, #fa2c19)); -} .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item-left, .nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item-left { -ms-flex: 0 0 auto; @@ -1726,14 +1672,6 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-tabs.vertical > .nut-tabs__titles.scrollable { - overflow-x: hidden; - overflow-y: auto; - height: auto; -} -.nut-tabs.vertical > .nut-tabs__titles.scrollable .nut-tabs__titles-placeholder { - height: 22rpx; -} .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item { min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50rpx); width: 100%; @@ -1749,15 +1687,6 @@ wx-button { width: 0; height: 0; } -.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.active { - background-color: #fff; -} -.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__line { - left: 10rpx; - width: 3rpx; - background: var(--nut-tabs-vertical-tab-line-color, linear-gradient(180deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); - height: var(--nut-tabs-vertical-titles-item-active-line-height, 14rpx); -} .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__smile { position: absolute; right: -8rpx; @@ -1774,47 +1703,11 @@ wx-button { -ms-flex-direction: column; flex-direction: column; } -.nut-tabs.vertical .nut-tabs__content .nut-tab-pane { - height: 100%; -} -.nut-tabs__titles.large .nut-tabs__titles-item { - font-size: var(--nut-tabs-titles-item-large-font-size, var(--nut-font-size-3, 16rpx)); -} -.nut-tabs__titles.normal .nut-tabs__titles-item { - font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 14rpx)); -} -.nut-tabs__titles.small .nut-tabs__titles-item { - font-size: var(--nut-tabs-titles-item-small-font-size, var(--nut-font-size-1, 12rpx)); -} -.nut-tabs__titles::-webkit-scrollbar { - display: none; - width: 0; - background: transparent; -} -.nut-tabs__titles.smile .nut-tabs__titles-item .nut-tabs__titles-item__smile { - display: none; -} -.nut-tabs__titles.smile .nut-tabs__titles-item.active .nut-tabs__titles-item__smile { - width: 36rpx; - height: 10rpx; - display: block; -} .nut-tabs__content { display: -ms-flexbox; display: flex; box-sizing: border-box; } -.nut-tabs .nut-tabs__titles-item .taro { - height: 46rpx; - line-height: 46rpx; -} -.nut-tabs .nut-tabs__titles-placeholder { - width: auto; - min-width: 10rpx; -} -.nut-theme-dark .nut-tab-pane { - background: var(--nut-dark-background2, #1b1b1b); -} .nut-tab-pane { width: 100%; -ms-flex-negative: 0; @@ -1827,17 +1720,6 @@ wx-button { height: 100%; word-break: break-all; } -.nut-tab-pane.inactive { - overflow: visible; - height: 0; -} -.nut-theme-dark .nut-cascader__bar { - background: var(--nut-dark-background2, #1b1b1b); - color: var(--nut-dark-color, var(--nut-white, #fff)); -} -.nut-theme-dark .nut-tabs__titles { - background: var(--nut-dark-background3, #141414) !important; -} .nut-theme-dark .nut-cascader-item { color: var(--nut-dark-color-gray, var(--nut-text-color, #808080)); } @@ -1963,19 +1845,6 @@ wx-button { padding-top: 1rpx; background-color: var(--nut-white, #fff); } -.nut-calendar .nut-calendar__header .nut-calendar__header-title { - font-size: var(--nut-calendar-title-font, var(--nut-font-size-4, 18rpx)); - font-weight: var(--nut-calendar-title-font-weight, 500); - line-height: 44rpx; -} -.nut-calendar .nut-calendar__header .nut-calendar__header-slot { - min-height: 24rpx; -} -.nut-calendar .nut-calendar__header .nut-calendar__header-subtitle { - padding: 7rpx 0; - line-height: 22rpx; - font-size: var(--nut-calendar-sub-title-font, var(--nut-font-size-2, 14rpx)); -} .nut-calendar .nut-calendar__header .nut-calendar__weekdays { display: -ms-flexbox; display: flex; @@ -1987,9 +1856,6 @@ wx-button { border-radius: 0 0 12rpx 12rpx; box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05882); } -.nut-calendar .nut-calendar__header .nut-calendar__weekdays .nut-calendar__weekday.weekend { - color: var(--nut-calendar-day67-font-color, var(--nut-primary-color, #fa2c19)); -} .nut-calendar .nut-calendar__content { -ms-flex: 1; flex: 1; @@ -2360,9 +2226,6 @@ wx-button { -ms-flex: 1; flex: 1; } -.nut-input .input-text { - font-size: var(--nut-input-font-size, var(--nut-font-size-2, 14rpx)); -} .nut-input__label { width: 80rpx; overflow: hidden; @@ -2413,12 +2276,6 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-input-right-box { - margin-left: 4rpx; -} -.nut-input-left-box { - margin-right: 4rpx; -} .nut-input-clear-box { height: 100%; display: -ms-flexbox; @@ -4313,15 +4170,6 @@ wx-button { justify-content: center; margin-bottom: 12rpx; } -.nut-step-line { - position: absolute; - top: 11rpx; - left: 50%; - right: -50%; - display: inline-block; - height: 1rpx; - background: var(--nut-steps-base-line-color, #909ca4); -} .nut-step-icon { position: relative; display: -ms-flexbox; @@ -4344,255 +4192,62 @@ wx-button { -ms-flex-align: center; align-items: center; } -.nut-step-icon .nut-icon { - width: var(--nut-steps-base-icon-font-size, 13rpx); - height: var(--nut-steps-base-icon-font-size, 13rpx); -} -.nut-step-icon.is-icon { - border-radius: 50%; - border-width: 1rpx; - border-style: solid; -} -.nut-step-main { - display: inline-block; - padding-left: 10%; - padding-right: 10%; - text-align: center; -} -.nut-step-title { - display: block; - margin-bottom: var(--nut-steps-base-title-margin-bottom, 10rpx); - font-size: var(--nut-steps-base-title-font-size, 14rpx); - color: var(--nut-steps-base-title-color, #909ca4); -} -.nut-step-content { - display: block; - font-size: var(--nut-steps-base-content-font-size, 14rpx); - color: var(--nut-steps-base-content-color, #666); -} -.nut-step:last-child .nut-step-line { - display: none; -} -.nut-step.nut-step-finish .nut-step-head { - color: var(--nut-steps-finish-head-color, var(--nut-primary-color, #fa2c19)); - border-color: var(--nut-steps-finish-head-border-color, var(--nut-primary-color, #fa2c19)); -} -.nut-step.nut-step-finish .nut-step-icon.is-icon { - background-color: var(--nut-steps-finish-icon-text-color, var(--nut-white, #fff)); -} -.nut-step.nut-step-finish .nut-step-line { - background: var(--nut-steps-finish-line-background, var(--nut-primary-color, #fa2c19)); +.nut-steps-vertical .nut-step { + display: -ms-flexbox; + display: flex; + height: 33.34%; } -.nut-step.nut-step-finish .nut-step-title { - color: var(--nut-steps-finish-title-color, var(--nut-primary-color, #fa2c19)); +.nut-swiper { + position: relative; + display: -ms-flexbox; + display: flex; + transition-property: transform; + box-sizing: content-box; + overflow: hidden; + cursor: grab; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } -.nut-step.nut-step-process .nut-step-head { - color: var(--nut-steps-process-head-color, var(--nut-white, #fff)); - border-color: var(--nut-steps-process-head-border-color, var(--nut-primary-color, #fa2c19)); +.nut-swiper-inner { + display: -ms-flexbox; + display: flex; + height: 100%; } -.nut-step.nut-step-process .nut-step-icon.is-icon { - background-color: var(--nut-steps-process-icon-text-color, var(--nut-primary-color, #fa2c19)); +.nut-swiper-vertical { + -ms-flex-direction: column; + flex-direction: column; } -.nut-step.nut-step-process .nut-step-title { - color: var(--nut-steps-process-title-color, var(--nut-primary-color, #fa2c19)); +.nut-swiper-pagination { + display: -ms-flexbox; + display: flex; + position: absolute; + left: 50%; + bottom: 12rpx; + -ms-transform: translate(-50%); + transform: translate(-50%); } -.nut-step.nut-step-wait .nut-step-head { - color: var(--nut-steps-wait-head-color, #909ca4); - border-color: var(--nut-steps-wait-head-border-color, #909ca4); +.nut-swiper-pagination-vertical { + top: 50%; + left: 12rpx; + bottom: auto; + -ms-flex-direction: column; + flex-direction: column; + -ms-transform: translateY(-50%); + transform: translateY(-50%); } -.nut-step.nut-step-wait .nut-step-icon.is-icon { - background-color: var(--nut-steps-wait-icon-bg-color, #959fb1); - color: var(--nut-steps-wait-icon-text-color, #ffffff); +.nut-video { + width: 100%; + height: 100%; + position: relative; + display: -ms-flexbox; + display: flex; } -.nut-step.nut-step-wait .nut-step-icon.is-icon .nut-icon { - color: var(--nut-steps-wait-icon-color, var(--nut-white, #fff)); -} -.nut-step.nut-step-wait .nut-step-content { - color: var(--nut-steps-wait-content-color, #909ca4); -} -.nut-steps-horizontal.nut-steps-dot .nut-step-head { - margin-top: 7rpx; - margin-bottom: 0; -} -.nut-steps-horizontal.nut-steps-dot .nut-step-line { - top: 50%; - bottom: -50%; -} -.nut-steps-horizontal.nut-steps-dot .nut-step-icon { - width: 8rpx; - height: 8rpx; - background: var(--nut-primary-color, #fa2c19); - border-radius: 50%; - box-sizing: content-box; -} -.nut-steps-horizontal.nut-steps-dot .nut-step-wait .nut-step-icon { - background-color: var(--nut-steps-wait-icon-bg-color, #959fb1); -} -.nut-steps-horizontal.nut-steps-dot .nut-step-wait .nut-step-content { - color: var(--nut-steps-wait-content-color, #909ca4); -} -.nut-steps-horizontal.nut-steps-dot .nut-step-finish .nut-step-icon { - background-color: var(--nut-primary-color, #fa2c19); -} -.nut-steps-horizontal.nut-steps-dot .nut-step-process .nut-step-icon { - position: relative; - background-color: var(--nut-primary-color, #fa2c19); -} -.nut-steps-horizontal.nut-steps-dot .nut-step-process .nut-step-icon::before { - content: ''; - display: inline-block; - position: absolute; - left: 50%; - top: 50%; - margin-left: -7rpx; - margin-top: -7rpx; - width: 14rpx; - height: 14rpx; - background-color: var(--nut-primary-color-end, #fa6419); - border-radius: 50%; - opacity: 0.23; -} -.nut-steps-vertical .nut-step { - display: -ms-flexbox; - display: flex; - height: 33.34%; -} -.nut-steps-vertical .nut-step-line { - position: absolute; - display: inline-block; - width: 1rpx; - height: 100%; - background: #909ca4; -} -.nut-steps-vertical .nut-step-main { - display: inline-block; - padding-left: 6%; - text-align: left; -} -.nut-steps-vertical.nut-steps-dot .nut-step-head { - margin-top: 7rpx; - margin-bottom: 0; -} -.nut-steps-vertical.nut-steps-dot .nut-step-line { - top: 7rpx; - left: 50%; - right: -50%; -} -.nut-steps-vertical.nut-steps-dot .nut-step-icon { - width: 8rpx; - height: 8rpx; - background: var(--nut-primary-color, #fa2c19); - border-radius: 50%; - box-sizing: content-box; -} -.nut-steps-vertical.nut-steps-dot .nut-step-wait .nut-step-icon { - background-color: var(--nut-steps-wait-icon-bg-color, #959fb1); -} -.nut-steps-vertical.nut-steps-dot .nut-step-wait .nut-step-content { - color: var(--nut-steps-wait-content-color, #909ca4); -} -.nut-steps-vertical.nut-steps-dot .nut-step-finish .nut-step-icon { - background-color: var(--nut-primary-color, #fa2c19); -} -.nut-steps-vertical.nut-steps-dot .nut-step-process .nut-step-icon { - position: relative; - background-color: var(--nut-primary-color, #fa2c19); -} -.nut-steps-vertical.nut-steps-dot .nut-step-process .nut-step-icon::before { - content: ''; - display: inline-block; - position: absolute; - left: 50%; - top: 50%; - margin-left: -7rpx; - margin-top: -7rpx; - width: 14rpx; - height: 14rpx; - background-color: var(--nut-primary-color-end, #fa6419); - border-radius: 50%; - opacity: 0.23; -} -.nut-swiper { - position: relative; - display: -ms-flexbox; - display: flex; - transition-property: transform; - box-sizing: content-box; - overflow: hidden; - cursor: grab; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.nut-swiper-inner { - display: -ms-flexbox; - display: flex; - height: 100%; -} -.nut-swiper-vertical { - -ms-flex-direction: column; - flex-direction: column; -} -.nut-swiper-pagination { - display: -ms-flexbox; - display: flex; - position: absolute; - left: 50%; - bottom: 12rpx; - -ms-transform: translate(-50%); - transform: translate(-50%); -} -.nut-swiper-pagination .h5-i { - width: var(--nut-swiper-pagination-item-width, 8rpx); - height: var(--nut-swiper-pagination-item-height, 3rpx); - margin-right: var(--nut-swiper-pagination-item-margin-right, 7rpx); - border-radius: var(--nut-swiper-pagination-item-border-radius, 2rpx); -} -.nut-swiper-pagination .h5-i:last-child { - margin-right: 0; -} -.nut-swiper-pagination-vertical { - top: 50%; - left: 12rpx; - bottom: auto; - -ms-flex-direction: column; - flex-direction: column; - -ms-transform: translateY(-50%); - transform: translateY(-50%); -} -.nut-swiper-pagination-vertical .h5-i { - margin-bottom: 5rpx; -} -.nut-swiper-item { - height: 100%; -} -.nut-video { - width: 100%; - height: 100%; - position: relative; - display: -ms-flexbox; - display: flex; -} -.nut-video-player { - width: 100%; - background: #000; -} -.nut-video .nut-video-mask { - width: 100%; - position: absolute; - left: 0; - top: 0; - right: 0; - bottom: 60rpx; -} -.nut-video .nut-video-mask.custom-touch { - bottom: 0; -} -.nut-video .h5-video { - width: 100%; - height: 100%; - -o-object-fit: fill; - object-fit: fill; +.nut-video .h5-video { + width: 100%; + height: 100%; + -o-object-fit: fill; + object-fit: fill; } .nut-video-play-btn { width: 80rpx; @@ -4622,15 +4277,6 @@ wx-button { font-size: 30rpx; border-radius: 20%; } -.nut-video-play-btn::before { - content: ''; - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA+CAMAAABTPci/AAAAb1BMVEUAAAACAgL///////////////////////////////////+urq4uLi7+/v6zs7OLi4v9/f3Hx8dubm79/f39/f3z8/P5+fn9/f38/Pz4+Pipqans7Oz8/Pz29vbx8fHi4uLX19fq6urg4ODT09P5+flRzniSAAAAJXRSTlMAA6GcmZWlno+RjBYHixgNhRsJgn9PbYh7XhNBdFlHMyc6LCNmyQGEbAAAAdlJREFUSMe11tly4jAQRuHgDdnBYBazw8xk8v7POMI/1Jm0iORUKs31Vy0dMOWX78xk8nWi+SKZrVYzqfHo9Xo4nOZiY83yvW2a9vxnwRmTZta3fhq3O/xlWQodzwNqGre/HlmWuNFeyKtm+7aSSqNG4/x0/VJnTKENxtWOICkkI9YQJIEwdV2uFSSOjPEfBYkjh7kpP+3FBrEIMuzR7AmSRN5oivpdQeJI13mYsig6G8Qi1sgMU55/KUiI1uZCoCJ3BDGo9iYgQnm+IYhBWsN1MPm0VJAADYbBDGra9gQBsccYoSxXEIuCNRiPsqxUkE8Q5IGksvXpFgRkiRBkmCrf/vbLHqgryWYXyUhVrvfLLIobr7KL7/ERPT8axk/xBrImRNV9riBdKG1CNMJwvHlnjAimuiOFABURw6Ka5PNdYfc8JVO+3AEhMPZoO/2MQJE9d1Qc+MGCME9ItufRAMXv4/rXCQYkYvYQQMQi2wDVnRasAbVk+9+YADHEGhMgRKGxAUIkYp44AqSRDAE+RxAhAiQQhAARNDWpHX/DccSenAAR1HzIRoCxqCoJkEDZwxAghY6buyBAGs0uMgQYo5bnW4A1AcapfrvtCTD2FXuxEPm5l3nYyw/PP4V4LkWCqx4LAAAAAElFTkSuQmCC) - no-repeat center; - width: 30rpx; - height: 30rpx; - display: inline-block; - background-size: contain; -} .nut-video-controller { position: absolute; display: -ms-flexbox; @@ -4646,39 +4292,6 @@ wx-button { opacity: 0; transition: all 1s; } -.nut-video-controller.nut-video-controller--show { - opacity: 1; -} -.nut-video-controller.nut-video-controller--hide { - opacity: 0; -} -.nut-video-controller .nut-video-controller__playbtn { - width: 18rpx; - height: 18rpx; - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) - 1x - ); - background-repeat: no-repeat; - background-position: center; - margin: 0 10rpx; -} -.nut-video-controller .nut-video-controller__playbtn.puase { - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik02IDE5aDRWNUg2djE0em04LTE0djE0aDRWNWgtNHoiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik02IDE5aDRWNUg2djE0em04LTE0djE0aDRWNWgtNHoiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-controller .nut-video-controller__total, -.nut-video-controller .nut-video-controller__now { - color: #fff; - padding: 0 5rpx; - font-size: 10rpx; -} .nut-video-controller .nut-video-controller__progress { position: relative; display: inline-block; @@ -4689,89 +4302,21 @@ wx-button { -ms-flex: 1; flex: 1; } -.nut-video-controller .nut-video-controller__progress .nut-video-controller__progress-value { +.nut-video-error { position: absolute; - top: 50%; width: 100%; - height: 2rpx; - margin-top: -1.6rpx; - background: rgba(255, 255, 255, 0.50196); + height: 100%; + z-index: 111111; + background: #000; + color: #fff; + text-align: center; } -.nut-video-controller .nut-video-controller__progress .buffered { - background: rgba(255, 255, 255, 0.8); - height: 2rpx; +.nut-video-error .h5-p { + color: #fff; } -.nut-video-controller .nut-video-controller__progress .nut-video-controller__ball { - width: 10rpx; - height: 10rpx; - position: absolute; - top: 50%; - left: 0; - border-radius: 50%; -} -.nut-video-controller .nut-video-controller__progress .nut-video-controller__ball .h5-div { - width: 10rpx; - height: 10rpx; - background: #fff; - box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.2); - margin: 0 -5rpx; - border-radius: 50%; -} -.nut-video-controller .nut-video-controller__full { - width: 40rpx; - height: 35rpx; - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik03IDE0SDV2NWg1di0ySDd2LTN6bS0yLTRoMlY3aDNWNUg1djV6bTEyIDdoLTN2Mmg1di01aC0ydjN6TTE0IDV2MmgzdjNoMlY1aC01eiIvPgo8L3N2Zz4K); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik03IDE0SDV2NWg1di0ySDd2LTN6bS0yLTRoMlY3aDNWNUg1djV6bTEyIDdoLTN2Mmg1di01aC0ydjN6TTE0IDV2MmgzdjNoMlY1aC01eiIvPgo8L3N2Zz4K) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-controller .nut-video-controller__full.full2 { - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik01IDE2aDN2M2gydi01SDV2MnptMy04SDV2Mmg1VjVIOHYzem02IDExaDJ2LTNoM3YtMmgtNXY1em0yLTExVjVoLTJ2NWg1VjhoLTN6Ii8+Cjwvc3ZnPgo=); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik01IDE2aDN2M2gydi01SDV2MnptMy04SDV2Mmg1VjVIOHYzem02IDExaDJ2LTNoM3YtMmgtNXY1em0yLTExVjVoLTJ2NWg1VjhoLTN6Ii8+Cjwvc3ZnPgo=) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-controller .nut-video-controller__volume { - width: 30rpx; - height: 30rpx; - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-controller .nut-video-controller__volume.muted { - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNi41IDEyYzAtMS43Ny0xLjAyLTMuMjktMi41LTQuMDN2Mi4yMWwyLjQ1IDIuNDVjLjAzLS4yLjA1LS40MS4wNS0uNjN6bTIuNSAwYzAgLjk0LS4yIDEuODItLjU0IDIuNjRsMS41MSAxLjUxQzIwLjYzIDE0LjkxIDIxIDEzLjUgMjEgMTJjMC00LjI4LTIuOTktNy44Ni03LTguNzd2Mi4wNmMyLjg5Ljg2IDUgMy41NCA1IDYuNzF6TTQuMjcgM0wzIDQuMjcgNy43MyA5SDN2Nmg0bDUgNXYtNi43M2w0LjI1IDQuMjVjLS42Ny41Mi0xLjQyLjkzLTIuMjUgMS4xOHYyLjA2YzEuMzgtLjMxIDIuNjMtLjk1IDMuNjktMS44MUwxOS43MyAyMSAyMSAxOS43M2wtOS05TDQuMjcgM3pNMTIgNEw5LjkxIDYuMDkgMTIgOC4xOFY0eiIvPgogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4K); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNi41IDEyYzAtMS43Ny0xLjAyLTMuMjktMi41LTQuMDN2Mi4yMWwyLjQ1IDIuNDVjLjAzLS4yLjA1LS40MS4wNS0uNjN6bTIuNSAwYzAgLjk0LS4yIDEuODItLjU0IDIuNjRsMS41MSAxLjUxQzIwLjYzIDE0LjkxIDIxIDEzLjUgMjEgMTJjMC00LjI4LTIuOTktNy44Ni03LTguNzd2Mi4wNmMyLjg5Ljg2IDUgMy41NCA1IDYuNzF6TTQuMjcgM0wzIDQuMjcgNy43MyA5SDN2Nmg0bDUgNXYtNi43M2w0LjI1IDQuMjVjLS42Ny41Mi0xLjQyLjkzLTIuMjUgMS4xOHYyLjA2YzEuMzgtLjMxIDIuNjMtLjk1IDMuNjktMS44MUwxOS43MyAyMSAyMSAxOS43M2wtOS05TDQuMjcgM3pNMTIgNEw5LjkxIDYuMDkgMTIgOC4xOFY0eiIvPgogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4K) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-error { - position: absolute; - width: 100%; - height: 100%; - z-index: 111111; - background: #000; - color: #fff; - text-align: center; -} -.nut-video-error .h5-p { - color: #fff; -} -.nut-image-preview { - height: 100%; - width: 100%; +.nut-image-preview { + height: 100%; + width: 100%; } .nut-image-preview-swiper { height: 100%; @@ -5489,9 +5034,6 @@ wx-button { transform: scale(0); animation: twinkle 2s ease-out infinite; } -.nut-animate .nut-animate-twinkle::after { - animation-delay: 0.4s; -} @keyframes twinkle { 0% { transform: scale(0); @@ -5777,12 +5319,6 @@ wx-button { transform: scale(0.8); opacity: 0; } -.nut-popover-enter-active { - transition-timing-function: ease-out; -} -.nut-popover-leave-active { - transition-timing-function: ease-in; -} .nut-popover-content-bg { position: fixed; height: 100%; @@ -7204,16 +6740,6 @@ wx-button { align-items: center; box-sizing: border-box; } -.nut-address-list-swipe__mask-set, -.nut-address-list-general__mask-set { - color: var(--nut-white, #fff); - background-color: var(--nut-addresslist-set-bg, #f5a623); -} -.nut-address-list-swipe__mask-del, -.nut-address-list-general__mask-del { - color: var(--nut-white, #fff); - background-color: var(--nut-addresslist-del-bg, #e1251b); -} .nut-address-list-general:last-child { border-bottom: none; } @@ -7326,12 +6852,6 @@ wx-button { align-items: center; transition: all 0.3s; } -.nut-category__cateListItemChecked { - background: var(--nut-category-list-item-checked-color, rgb(255, 255, 255)); - font-weight: 500; - transition: all 0.3s; - position: relative; -} .nut-category__cateListItemChecked::before { position: absolute; content: ''; @@ -8478,10 +7998,58 @@ wx-button { .nut-cropper-popup__highlight .highlight__round { border-radius: 50%; } +.nut-image .nut-img-loading, +.nut-image .nut-img-error { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: #f7f8fa; +} +.nut-row-flex { + display: flex; +} +.nut-row-justify-center { + justify-content: center; +} +.nut-row-justify-end { + justify-content: flex-end; +} +.nut-row-justify-space-between { + justify-content: space-between; + align-items: center; +} +.nut-row-justify-space-around { + justify-content: space-around; +} +.nut-row-justify-space-evenly { + justify-content: space-evenly; +} +.nut-row-align-flex-start { + align-items: flex-start; +} +.nut-row-align-center { + align-items: center; +} +.nut-row-align-flex-end { + align-items: flex-end; +} +.nut-row-flex-wrap { + flex-wrap: wrap; +} +.nut-row-flex-nowrap { + flex-wrap: nowrap; +} +.nut-row-flex-reverse { + flex-wrap: wrap-reverse; +} .nut-divider { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; font-size: var(--nut-divider-text-font-size, var(--nut-font-size-2, 14rpx)); color: var(--nut-divider-text-color, #909ca4); @@ -8493,47 +8061,19 @@ wx-button { border: var(--nut-divider-line-height, 2rpx) solid currentColor; border-width: var(--nut-divider-line-height, 2rpx) 0 0; height: var(--nut-divider-line-height, 2rpx); - -ms-flex: 1; flex: 1; } -.nut-divider.nut-divider-center::before, -.nut-divider.nut-divider-left::before, -.nut-divider.nut-divider-right::before { - margin-right: var(--nut-divider-before-margin-right, 16rpx); -} -.nut-divider.nut-divider-center::after, -.nut-divider.nut-divider-left::after, -.nut-divider.nut-divider-right::after { - margin-left: var(--nut-divider-after-margin-left, 16rpx); -} .nut-divider.nut-divider-hairline::before, .nut-divider.nut-divider-hairline::after { - -ms-transform: scaleY(0.5); transform: scaleY(0.5); } -.nut-divider.nut-divider-vertical { - position: relative; - top: var(--nut-divider-vertical-top, 2rpx); - display: inline-block; - height: var(--nut-divider-vertical-height, 12rpx); - border-left: 1rpx solid var(--nut-divider-vertical-border-left, rgba(0, 0, 0, 0.06)); - margin: var(--nut-divider-vertical-margin, 0 8rpx); -} -.nut-grid--border { - border-top-width: 1rpx; - border-left-width: 1rpx; -} -.nut-grid-item__text { - color: var(--nut-grid-item-text-color, var(--nut-title-color2, #666666)); - font-size: var(--nut-grid-item-text-font-size, var(--nut-font-size-1, 12rpx)); - line-height: 1.5; - word-break: break-all; - margin: var(--nut-grid-item-text-margin, 8rpx) 0 0 0; +.nut-grid { + display: flex; + flex-wrap: wrap; + border: 0 solid var(--nut-grid-border-color, #f5f6f7); } .nut-grid-item__content { - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; box-sizing: border-box; height: 100%; @@ -8541,22 +8081,18 @@ wx-button { background: var(--nut-grid-item-content-bg-color, var(--nut-white, #fff)); border: 0 solid var(--nut-grid-border-color, #f5f6f7); } -.nut-grid-item__content--border { - border-right-width: 1rpx; - border-bottom-width: 1rpx; -} -.nut-grid-item__content--surround { - border-top-width: 1rpx; - border-left-width: 1rpx; +.nut-grid-item__content--center { + align-items: center; + justify-content: center; } -.nut-grid-item__content--reverse .nut-grid-item__text { - margin: 0 0 var(--nut-grid-item-text-margin, 8rpx); +.nut-grid-item__content--reverse { + flex-direction: column-reverse; } -.nut-grid-item__content--horizontal .nut-grid-item__text { - margin: 0 0 0 var(--nut-grid-item-text-margin, 8rpx); +.nut-grid-item__content--horizontal { + flex-direction: row; } -.nut-grid-item__content--horizontal.nut-grid-item__content--reverse .nut-grid-item__text { - margin: 0 var(--nut-grid-item-text-margin, 8rpx) 0 0; +.nut-grid-item__content--horizontal.nut-grid-item__content--reverse { + flex-direction: row-reverse; } .nut-grid-item__content--clickable::before { position: absolute; @@ -8568,30 +8104,66 @@ wx-button { border: inherit; border-color: var(--nut-black, #000); border-radius: inherit; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; content: ' '; } -.nut-space-vertical > .nut-space-item:not(:last-child) { - margin-bottom: var(--nut-space-gap, 8rpx); +.nut-space { + display: inline-flex; } -.nut-space-horizontal > .nut-space-item:not(:last-child) { - margin-right: var(--nut-space-gap, 8rpx); +.nut-space-item { + flex: none; +} +.nut-space-vertical { + flex-direction: column; +} +.nut-space-horizontal { + flex-direction: row; } .nut-space-horizontal.nut-space-wrap { - -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: calc(var(--nut-space-gap, 8rpx) * -1); } -.nut-space-horizontal.nut-space-wrap > .nut-space-item { - padding-bottom: var(--nut-space-gap, 8rpx); +.nut-space-align-center { + align-items: center; +} +.nut-space-align-start { + align-items: flex-start; +} +.nut-space-align-end { + align-items: flex-end; +} +.nut-space-align-baseline { + align-items: baseline; +} +.nut-space-justify-center { + justify-content: center; +} +.nut-space-justify-start { + justify-content: flex-start; +} +.nut-space-justify-end { + justify-content: flex-end; +} +.nut-space-justify-between { + justify-content: space-between; +} +.nut-space-justify-around { + justify-content: space-around; +} +.nut-space-justify-evenly { + justify-content: space-evenly; +} +.nut-space-justify-stretch { + justify-content: stretch; +} +.nut-space-fill { + display: flex; + width: 100%; } .nut-navbar { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; height: var(--nut-navbar-height, 44rpx); box-sizing: border-box; @@ -8602,13 +8174,6 @@ wx-button { color: var(--nut-navbar-color, var(--nut-title-color2, #666666)); overflow: hidden; } -.nut-navbar--border { - border-bottom: 1rpx solid #eee; -} -.nut-navbar--fixed.nut-navbar--safe-area-inset-top { - height: calc(var(--nut-navbar-height, 44rpx) + constant(safe-area-inset-top)); - height: calc(var(--nut-navbar-height, 44rpx) + env(safe-area-inset-top)); -} .nut-navbar--clickable::before { position: absolute; content: ' '; @@ -8620,34 +8185,23 @@ wx-button { border: inherit; border-color: var(--nut-black, #000); border-radius: inherit; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } -.nut-navbar__title .title { - min-width: var(--nut-navbar-title-width, 100rpx); - font-size: var(--nut-navbar-title-font, var(--nut-font-size-2, 14rpx)); - font-weight: var(--nut-navbar-title-font-weight, 0); - color: var(--nut-navbar-title-font-color, var(--nut-navbar-color, var(--nut-title-color2, #666666))); - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 1; - overflow: hidden; -} -.nut-navbar__title.icon .icon { - margin: var(--nut-navbar-title-icon-margin, 0 0 0 13rpx); -} -.nut-navbar__title-desc { - font-size: var(--nut-cell-title-desc-font, var(--nut-font-size-1, 12rpx)); +.nut-navbar__title { + max-width: 60%; + margin: 0 auto; + text-align: center; + display: flex; + justify-content: center; + align-items: center; } .nut-navbar__left { position: absolute; left: 0; font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 14rpx)); color: var(--nut-cell-desc-color, var(--nut-disable-color, #cccccc)); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; cursor: pointer; padding: 0 16rpx; @@ -8657,30 +8211,18 @@ wx-button { right: 0; font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 14rpx)); color: var(--nut-cell-desc-color, var(--nut-disable-color, #cccccc)); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; padding: 0 16rpx; cursor: pointer; } -.nut-fixed-nav { - position: fixed; - z-index: var(--nut-fixednav-index, 201); - display: inline-block; - height: 50rpx; - right: 0; -} .nut-fixed-nav.active .nut-icon { - -ms-transform: rotate(180deg); transform: rotate(180deg); } .nut-fixed-nav.active .nut-fixed-nav__list { - -ms-transform: translate(0) !important; transform: translate(0) !important; } .nut-fixed-nav.active.left .nut-icon { - -ms-transform: rotate(0) !important; transform: rotate(0) !important; } .nut-fixed-nav__btn { @@ -8694,11 +8236,8 @@ wx-button { background: var(--nut-fixednav-btn-bg, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); border-radius: 45rpx 0 0 45rpx; box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; } .nut-fixed-nav__btn > .text { @@ -8706,31 +8245,25 @@ wx-button { line-height: 13rpx; font-size: 10rpx; color: var(--nut-fixednav-bg-color, var(--nut-white, #fff)); - -ms-flex-negative: 0; flex-shrink: 0; } .nut-fixed-nav__btn .nut-icon { margin-right: 5rpx; - -ms-transform: rotate(0); transform: rotate(0); transition: all 0.3s; } .nut-fixed-nav__list { position: absolute; right: 0; - -ms-transform: translate(100%); transform: translate(100%); transition: all 0.5s; box-sizing: border-box; margin: 0; z-index: var(--nut-fixednav-index, 201); - -ms-flex-negative: 0; flex-shrink: 0; height: 100%; background: var(--nut-fixednav-bg-color, var(--nut-white, #fff)); - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; border-radius: 25rpx 0 0 25rpx; box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.2); @@ -8741,57 +8274,25 @@ wx-button { padding: 0; margin: 0; position: relative; - -ms-flex: 1; flex: 1; height: 100%; - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; min-width: 50rpx; - -ms-flex-negative: 0; flex-shrink: 0; } -.nut-fixed-nav__list-item > .h5-img { - width: 20rpx; - height: 20rpx; - margin-bottom: 2rpx; -} -.nut-fixed-nav__list-item > .span { - font-size: 10rpx; - color: var(--nut-fixednav-font-color, var(--nut-black, #000)); -} -.nut-fixed-nav__list-item > .b { - position: absolute; - right: 0; - top: 1rpx; - height: 14rpx; - line-height: 14rpx; - font-size: 10rpx; - padding: 0 3rpx; - color: #fff; - background: var(--nut-primary-color, #fa2c19); - border-radius: 7rpx; - text-align: center; - min-width: 12rpx; -} .nut-fixed-nav.left .nut-fixed-nav__btn { - -ms-flex-direction: row-reverse; flex-direction: row-reverse; right: auto; left: 0; border-radius: 0 45rpx 45rpx 0; } .nut-fixed-nav.left .nut-fixed-nav__btn .nut-icon { - -ms-transform: rotate(180deg); transform: rotate(180deg); } .nut-fixed-nav.left .nut-fixed-nav__list { - -ms-transform: translate(-100%); transform: translate(-100%); right: auto; border-radius: 0 25rpx 25rpx 0; @@ -8800,38 +8301,35 @@ wx-button { } .nut-menu .nut-menu__bar { position: relative; - display: -ms-flexbox; display: flex; line-height: var(--nut-menu-bar-line-height, 48rpx); background-color: var(--nut-white, #fff); box-shadow: var(--nut-menu-bar-box-shadow, 0 2rpx 12rpx rgba(89, 89, 89, 0.12)); } .nut-menu .nut-menu__bar .nut-menu__item { - -ms-flex: 1; flex: 1; text-align: center; font-size: var(--nut-menu-item-font-size, var(--nut-font-size-2, 14rpx)); color: var(--nut-menu-item-text-color, var(--nut-title-color, #1a1a1a)); min-width: 0; } -.nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title .nut-menu__title-text { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: block; - padding-left: var(--nut-menu-title-text-padding-left, 8rpx); - padding-right: var(--nut-menu-title-text-padding-right, 8rpx); +.nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title-icon { + transition: all 0.2s linear; + display: flex; +} +.nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title { + display: flex; + align-items: center; + justify-content: center; + max-width: 100%; } .nut-menu .nut-menu__bar .nut-menu__item .nut-menu__title.active .nut-menu__title-icon { - -ms-transform: rotate(180deg); transform: rotate(180deg); } .nut-menu-item__content { padding: var(--nut-menu-item-content-padding, 12rpx 24rpx); max-height: var(--nut-menu-item-content-max-height, 214rpx); - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; flex-wrap: wrap; } .nut-menu-item__content .nut-menu-item__option { @@ -8839,15 +8337,11 @@ wx-button { font-size: var(--nut-font-size-2, 14rpx); padding-top: var(--nut-menu-item-option-padding-top, 12rpx); padding-bottom: var(--nut-menu-item-option-padding-bottom, 12rpx); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; } .nut-menu-item__content .nut-menu-item__option .nut-menu-item__span { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; margin-right: var(--nut-menu-item-option-i-margin-right, 6rpx); } @@ -8857,85 +8351,47 @@ wx-button { border-bottom: var(--nut-tabbar-border-bottom, 1rpx solid #eee); border-top: var(--nut-tabbar-border-top, 1rpx solid #eee); width: 100%; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; box-sizing: content-box; background: var(--nut-white, #fff); height: var(--nut-tabbar-height, 50rpx); } .nut-tabbar-item { - -ms-flex: 1; flex: 1; text-align: center; text-decoration: none; color: var(--nut-primary-color, #fa2c19); height: 100%; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; } -.nut-tabbar-item_icon-box .nut-icon { - width: 20rpx; - height: 20rpx; - font-size: 20rpx; -} -.nut-tabbar-item_icon-box_tips { - position: absolute; - background: var(--nut-tabbar-active-color, var(--nut-primary-color, #fa2c19)); - border: 1rpx solid var(--nut-white, #fff); - border-radius: 7rpx; - text-align: center; - top: -2rpx; - right: -7rpx; - box-shadow: 0 0 0 1rpx var(--nut-white, #fff); - font-size: var(--nut-font-size-1, 12rpx); - color: var(--nut-white, #fff); - z-index: 1; -} -.nut-tabbar-item_icon-box_icon .h5-img { - width: 20rpx; - height: 20rpx; -} -.nut-tabbar-item_icon-box_nav-word { - font-size: var(--nut-tabbar-item-text-font-size, var(--nut-font-size-0, 10rpx)); - line-height: var(--nut-tabbar-item-text-line-height, initial); - margin-top: var(--nut-tabbar-word-margin-top, auto); - display: block; -} -.nut-tabbar-item_icon-box_big-word { - font-size: var(--nut-font-size-large, var(--nut-font-size-3, 16rpx)); +.nut-tabbar-item_icon-box { + padding: 0; line-height: 1; + display: flex; + flex-direction: column; + align-items: center; + position: relative; } .nut-pagination { - display: -ms-flexbox; display: flex; font-size: var(--nut-pagination-font-size, var(--nut-font-size-2, 14rpx)); color: var(--nut-pagination-color, var(--nut-primary-color, #fa2c19)); } -.nut-pagination-simple { - height: 39rpx; - width: 124rpx; - line-height: 39rpx; - text-align: center; +.nut-pagination-contain { + display: flex; } .nut-pagination-prev, .nut-pagination-item, .nut-pagination-next { height: 39rpx; min-width: 39rpx; - -ms-flex-negative: 0; flex-shrink: 0; box-sizing: border-box; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; background: var(--nut-white, #fff); border-radius: var(--nut-pagination-item-border-radius, 2rpx); @@ -8943,77 +8399,21 @@ wx-button { cursor: pointer; } .nut-pagination-prev, +.nut-pagination-item { + border-right: none; +} +.nut-pagination-prev, .nut-pagination-next { padding: var(--nut-pagination-prev-next-padding, 0 11rpx); } -.nut-pagination .simple-border { - border-right: var(--nut-pagination-item-border-width, 1rpx) solid var(--nut-pagination-item-border-color, #e4e7eb); -} -.nut-indicator--dot, -.nut-indicator--number { - margin: 0 4rpx; -} -.nut-indicator--dot { - display: inline-block; - vertical-align: middle; - width: var(--nut-indicator-dot-size, calc(var(--nut-indicator-size, 18rpx) / 3)); - height: var(--nut-indicator-dot-size, calc(var(--nut-indicator-size, 18rpx) / 3)); - border-radius: 50%; - background-color: var(--nut-indicator-dot-color, var(--nut-disable-color, #cccccc)); -} -.nut-indicator--number { - display: inline-block; - position: relative; - width: var(--nut-indicator-size, 18rpx); - height: var(--nut-indicator-size, 18rpx); - text-align: center; - font-size: var(--nut-indicator-number-font-size, 10rpx); - line-height: var(--nut-indicator-size, 18rpx); - color: var(--nut-indicator-color, var(--nut-white, #fff)); - vertical-align: middle; - border: 1rpx solid var(--nut-indicator-color, var(--nut-white, #fff)); - border-radius: 50%; - background-color: var(--nut-indicator-bg-color, var(--nut-primary-color, #fa2c19)); - box-shadow: 0 0 1rpx 1rpx var(--nut-indicator-bg-color, var(--nut-primary-color, #fa2c19)); -} -.nut-side-navbar-item { - height: var(--nut-sidenavbar-item-height, 40rpx); - line-height: var(--nut-sidenavbar-item-line-height, 40rpx); - display: block; - font-size: var(--nut-sidenavbar-item-font-size, 16rpx); - background-color: var(--nut-sidenavbar-item-title-bg-color, var(--nut-white, #fff)); -} -.nut-sub-side-navbar__title { - display: block; - width: var(--nut-sidenavbar-sub-title-width, 100%); - height: var(--nut-sidenavbar-sub-title-height, 40rpx); - position: relative; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - box-sizing: border-box; - border-bottom: 1rpx solid var(--nut-sidenavbar-sub-title-border-color, #f6f6f6); - color: var(--nut-sidenavbar-sub-title-text-color, var(--nut-title-color, #1a1a1a)); - font-size: var(--nut-sidenavbar-sub-title-font-size, var(--nut-font-size-large, var(--nut-font-size-3, 16rpx))); - background-color: var(--nut-sidenavbar-sub-title-bg-color, #f6f6f6); - border-radius: var(--nut-sidenavbar-sub-title-radius, 0); - border: var(--nut-sidenavbar-sub-title-border, 0); -} -.nut-sub-side-navbar__title__text { - line-height: var(--nut-sidenavbar-sub-title-text-line-height, 40rpx); - color: var(--nut-sidenavbar-sub-title-text-color, var(--nut-title-color, #1a1a1a)); -} .nut-sub-side-navbar__title__icon { position: absolute; top: 50%; right: 20rpx; - -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-searchbar { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; width: var(--nut-searchbar-width, 100%); padding: var(--nut-searchbar-padding, 9rpx 16rpx); @@ -9021,21 +8421,11 @@ wx-button { box-sizing: border-box; color: var(--nut-searchbar-input-bar-color, inherit); } -.nut-searchbar::-webkit-input-placeholder { - color: var(--nut-searchbar-input-bar-placeholder-color, inherit); -} -.nut-searchbar__search-label { - padding: 0 5rpx; - color: #323233; -} .nut-searchbar__search-input { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; width: var(--nut-searchbar-input-width, 100%); height: var(--nut-searchbar-input-height, 32rpx); - -ms-flex: 1; flex: 1; padding: var(--nut-searchbar-input-padding, 0 0 0 13rpx); border-radius: var(--nut-searchbar-input-border-radius, 16rpx); @@ -9043,41 +8433,26 @@ wx-button { background: var(--nut-searchbar-input-background, #f7f7f7); box-sizing: border-box; } -.nut-searchbar__search-input .nut-searchbar__input-inner .h5-input { - width: 100%; - height: 100%; - padding-left: 4rpx; +.nut-searchbar__search-input .nut-searchbar__input-inner { + display: flex; + position: relative; + flex: 1; + align-items: center; + overflow: hidden; +} +.nut-searchbar__search-input .nut-searchbar__input-inner .nut-searchbar__input-form { + flex: 1; + overflow: hidden; } .nut-searchbar__search-input .nut-searchbar__input-inner-icon { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; position: relative; padding: 0 7rpx; } -.nut-searchbar__search-input .nut-searchbar__input-clear { - position: relative; - z-index: 10; - padding: 0 5rpx; -} -.nut-searchbar__search-input .nut-searchbar__input-inner-icon-absolute .nut-searchbar__input-clear { - position: absolute; - z-index: 10; - left: -20rpx; -} -.nut-searchbar__search-input .nut-searchbar__iptleft-search-icon { - margin-right: 6rpx; - width: 14rpx; - height: 14rpx; -} -.nut-searchbar__search-input .nut-searchbar__iptright-search-icon { - margin-left: 5rpx; -} .nut-searchbar__search-input .nut-searchbar__input-bar { width: 100%; height: 36rpx; - -ms-flex: 1; flex: 1; padding: 0; margin: 0; @@ -9086,44 +8461,45 @@ wx-button { outline: none; font-size: 14rpx; } -.nut-searchbar__search-input .nut-searchbar__input-bar_clear { - max-width: 290rpx; -} -.nut-searchbar__search-input .nut-searchbar__input-inner-absolute .nut-searchbar__input-bar { - box-sizing: border-box; - padding-right: 20rpx; -} -.nut-searchbar__left-search-icon { - margin-right: 8rpx; +.nut-searchbar__search-icon { + display: flex; + justify-content: center; + align-items: center; } -.nut-searchbar__right-search-icon { - margin-left: 16rpx; - font-size: 14rpx; - color: var(--nut-searchbar-right-out-color, var(--nut-black, #000)); +.nut-tabs { + display: flex; + overflow: hidden; } .nut-tabs .nut-tabs__titles { - display: -ms-flexbox; display: flex; - -moz-user-select: none; - -ms-user-select: none; user-select: none; white-space: nowrap; - -ms-flex-negative: 0; flex-shrink: 0; background: var(--nut-tabs-titles-background-color, var(--nut-help-color, #f5f5f5)); border-radius: var(--nut-tabs-titles-border-radius, 0); } +.nut-tabs .nut-tabs__titles .nut-tabs__list { + width: 100%; + display: flex; + flex-shrink: 0; +} .nut-tabs .nut-tabs__titles .nut-tabs__titles-item { position: relative; font-size: var(--nut-tabs-titles-item-font-size, var(--nut-font-size-2, 14rpx)); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; color: var(--nut-tabs-titles-item-color, var(--nut-title-color, #1a1a1a)); } +.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__text { + text-align: center; +} +.nut-tabs .nut-tabs__titles .nut-tabs__titles-item__text.ellipsis { + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} .nut-tabs .nut-tabs__titles .nut-tabs__titles-item__smile .nut-icon { position: absolute; font-size: 12rpx; @@ -9140,27 +8516,46 @@ wx-button { content: ' '; bottom: 15%; left: 50%; - -ms-transform: translate(-50%); transform: translate(-50%); overflow: hidden; border-radius: var(--nut-tabs-titles-item-line-border-radius, 0); opacity: var(--nut-tabs-titles-item-line-opacity, 1); } +.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.active { + font-weight: 700; + color: var(--nut-tabs-titles-item-active-color, var(--nut-title-color, #1a1a1a)); +} .nut-tabs .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__line { content: ' '; width: var(--nut-tabs-horizontal-titles-item-active-line-width, 40rpx); height: 3rpx; background: var(--nut-tabs-horizontal-tab-line-color, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); } +.nut-tabs .nut-tabs__titles .nut-tabs__titles-item.disabled { + color: var(--nut-disable-color, #cccccc); +} +.nut-tabs .nut-tabs__titles-left { + justify-content: flex-start; +} +.nut-tabs.horizontal { + flex-direction: column; +} .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles, .nut-tabs.horizontal > .nut-tabs__titles { - -ms-flex-direction: row; flex-direction: row; height: var(--nut-tabs-horizontal-titles-height, 46rpx); } +.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__list, +.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__list { + height: 100%; +} +.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles.scrollable, +.nut-tabs.horizontal > .nut-tabs__titles.scrollable { + overflow-x: auto; + overflow-y: hidden; +} .nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item, .nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item { - -ms-flex: 1 0 auto; flex: 1 0 auto; min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50rpx); width: 0; @@ -9173,13 +8568,28 @@ wx-button { height: 100%; color: var(--nut-tabs-tab-smile-color, var(--nut-primary-color, #fa2c19)); } +.nut-tabs.horizontal .nut-sticky__box > .nut-tabs__titles .nut-tabs__titles-item-left, +.nut-tabs.horizontal > .nut-tabs__titles .nut-tabs__titles-item-left { + flex: 0 0 auto; +} +.nut-tabs.vertical { + flex-direction: row; + width: 100%; +} .nut-tabs.vertical > .nut-tabs__titles { - -ms-flex-direction: column; flex-direction: column; height: auto; padding: 10rpx 0; width: var(--nut-tabs-vertical-titles-width, 100rpx); } +.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__list { + flex-direction: column; +} +.nut-tabs.vertical > .nut-tabs__titles.scrollable { + overflow-x: hidden; + overflow-y: auto; + height: auto; +} .nut-tabs.vertical > .nut-tabs__titles.scrollable .nut-tabs__titles-placeholder { height: 22rpx; } @@ -9187,17 +8597,18 @@ wx-button { min-width: var(--nut-tabs-horizontal-titles-item-min-width, 50rpx); width: 100%; height: var(--nut-tabs-vertical-titles-item-height, 40rpx); - -ms-flex: none; flex: none; } .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item__line { bottom: none; - -ms-transform: translateY(-50%); transform: translateY(-50%); transition: height 0.3s ease; width: 0; height: 0; } +.nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.active { + background-color: #fff; +} .nut-tabs.vertical > .nut-tabs__titles .nut-tabs__titles-item.active .nut-tabs__titles-item__line { left: 10rpx; width: 3rpx; @@ -9210,10 +8621,16 @@ wx-button { bottom: 2rpx; left: auto; width: 36rpx; - -ms-transform: rotate(320deg); transform: rotate(320deg); height: var(--nut-tabs-vertical-titles-item-active-line-height, 14rpx); } +.nut-tabs.vertical .nut-tabs__content { + flex: 1; + flex-direction: column; +} +.nut-tabs.vertical .nut-tabs__content .nut-tab-pane { + height: 100%; +} .nut-tabs__titles.large .nut-tabs__titles-item { font-size: var(--nut-tabs-titles-item-large-font-size, var(--nut-font-size-3, 16rpx)); } @@ -9223,11 +8640,23 @@ wx-button { .nut-tabs__titles.small .nut-tabs__titles-item { font-size: var(--nut-tabs-titles-item-small-font-size, var(--nut-font-size-1, 12rpx)); } +.nut-tabs__titles::-webkit-scrollbar { + display: none; + width: 0; + background: transparent; +} +.nut-tabs__titles.smile .nut-tabs__titles-item .nut-tabs__titles-item__smile { + display: none; +} .nut-tabs__titles.smile .nut-tabs__titles-item.active .nut-tabs__titles-item__smile { width: 36rpx; height: 10rpx; display: block; } +.nut-tabs__content { + display: flex; + box-sizing: border-box; +} .nut-tabs .nut-tabs__titles-item .taro { height: 46rpx; line-height: 46rpx; @@ -9236,9 +8665,11 @@ wx-button { width: auto; min-width: 10rpx; } +.nut-theme-dark .nut-tab-pane { + background: var(--nut-dark-background2, #1b1b1b); +} .nut-tab-pane { width: 100%; - -ms-flex-negative: 0; flex-shrink: 0; display: block; background-color: #fff; @@ -9248,27 +8679,25 @@ wx-button { height: 100%; word-break: break-all; } -.nut-cascader { - width: 100%; - font-size: var(--nut-cascader-font-size, var(--nut-font-size-2, 14rpx)); - line-height: var(--nut-cascader-line-height, 22rpx); +.nut-tab-pane.inactive { + overflow: visible; + height: 0; +} +.nut-theme-dark .nut-cascader__bar { + background: var(--nut-dark-background2, #1b1b1b); + color: var(--nut-dark-color, var(--nut-white, #fff)); +} +.nut-theme-dark .nut-tabs__titles { + background: var(--nut-dark-background3, #141414) !important; } .nut-cascader.nut-tabs.horizontal .nut-tabs__titles .nut-tabs__titles-item { - -ms-flex: initial; flex: initial; padding: var(--nut-cascader-tabs-item-padding, 0 10rpx); white-space: nowrap; } -.nut-cascader .nut-tabs__titles { - padding: var(--nut-cascader-tabs-item-padding, 0 10rpx); - background: #fff; -} .nut-cascader__bar { - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; padding: var(--nut-cascader-bar-padding, 24rpx 20rpx 17rpx); text-align: center; @@ -9277,19 +8706,8 @@ wx-button { color: var(--nut-cascader-bar-color, var(--nut-title-color, #1a1a1a)); font-size: var(--nut-cascader-bar-font-size, var(--nut-font-size-4, 18rpx)); } -.nut-cascader-pane { - display: block; - padding: 10rpx 0 0; - margin: 0; - width: 100%; - height: 342rpx; - overflow-y: auto; - -webkit-overflow-scrolling: touch; -} .nut-cascader-item { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; padding: var(--nut-cascader-item-padding, 10rpx 20rpx); margin: 0; @@ -9297,34 +8715,22 @@ wx-button { font-size: var(--nut-cascader-item-font-size, var(--nut-font-size-2, 14rpx)); color: var(--nut-cascader-item-color, var(--nut-title-color, #1a1a1a)); } -.nut-cascader-item__icon-check { - margin-left: 10rpx; - visibility: hidden; -} -.nut-cascader-item__icon-loading { - margin-left: 10rpx; +.nut-cascader-item__title { + flex: 1; } .nut-calendar { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex: 1; flex: 1; color: #333; font-size: 16rpx; background-color: var(--nut-white, #fff); overflow: hidden; height: 100%; - -ms-flex-direction: column; flex-direction: column; } -.nut-calendar.nut-calendar--nopop .nut-calendar__header .nut-calendar__header-title { - font-size: var(--nut-calendar-base-font, var(--nut-font-size-3, 16rpx)); -} .nut-calendar .nut-calendar__header { - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; text-align: center; padding-top: 1rpx; @@ -9344,134 +8750,68 @@ wx-button { font-size: var(--nut-calendar-sub-title-font, var(--nut-font-size-2, 14rpx)); } .nut-calendar .nut-calendar__header .nut-calendar__weekdays { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: distribute; justify-content: space-around; height: 36rpx; border-radius: 0 0 12rpx 12rpx; box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05882); } -.nut-calendar .nut-calendar__content .nut-calendar__panel .h5-div:nth-of-type(2) .nut-calendar__month-title { - padding-top: 0; +.nut-calendar .nut-calendar__header .nut-calendar__weekdays .nut-calendar__weekday.weekend { + color: var(--nut-calendar-day67-font-color, var(--nut-primary-color, #fa2c19)); } -.nut-calendar .nut-calendar__content .nut-calendar__panel .calendar-loading-tip { - height: 50rpx; - line-height: 50rpx; - text-align: center; - position: absolute; - top: -50rpx; - left: 0; - right: 0; - font-size: var(--nut-calendar-text-font, var(--nut-font-size-1, 12rpx)); - color: var(--nut-text-color, #808080); +.nut-calendar .nut-calendar__content { + flex: 1; + width: 100%; + display: block; } -.nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__month-title { - height: 23rpx; - line-height: 23rpx; - margin: 8rpx 0; - font-size: var(--nut-calendar-month-title-font-size, inherit); +.nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__month { + display: flex; + flex-direction: column; + text-align: center; } .nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day { float: left; width: 14.28%; height: 64rpx; font-weight: var(--nut-calendar-day-font-weight, 500); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - -ms-flex-direction: column; flex-direction: column; position: relative; } -.nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-tips--curr { - position: absolute; - bottom: 6rpx; - width: 100%; - font-size: 12rpx; - line-height: 14rpx; -} -.nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-tip { - position: absolute; - bottom: 6rpx; - width: 100%; - font-size: 12rpx; - line-height: 14rpx; - color: var(--nut-calendar-primary-color, var(--nut-primary-color, #fa2c19)); -} -.nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-tips--top { - top: 6rpx; -} -.nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-tips--bottom { - bottom: 6rpx; -} -.nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day--active { - background-color: var(--nut-calendar-primary-color, var(--nut-primary-color, #fa2c19)); - color: var(--nut-white, #fff) !important; - border-radius: var(--nut-calendar-day-active-border-radius, 0rpx); -} -.nut-calendar .nut-calendar__content .nut-calendar__panel .nut-calendar__days .nut-calendar__day .nut-calendar__day-value { - padding: 2rpx 0; - font-size: var(--nut-calendar-day-font, 16rpx); -} .nut-calendar .nut-calendar__footer { - display: -ms-flexbox; display: flex; height: 62rpx; width: 100%; background-color: var(--nut-white, #fff); } -.nut-calendar .nut-calendar__footer .nut-calendar__confirm { - height: 44rpx; - width: 100%; - margin: 10rpx 18rpx; - border-radius: 22rpx; - background: var( - --nut-button-primary-background-color, - linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%) - ); - color: var(--nut-white, #fff); - text-align: center; - line-height: 44rpx; -} -.nut-calendarcard { - background: var(--nut-white, #fff); - border-radius: 12rpx; - overflow: hidden; - font-size: var(--nut-calendar-base-font, var(--nut-font-size-3, 16rpx)); - color: var(--nut-black, #000); +.nut-calendarcard-header { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + font-weight: 400; } .nut-calendarcard-header-left, .nut-calendarcard-header-right { - display: -ms-flexbox; display: flex; - -ms-flex-direction: row; flex-direction: row; cursor: pointer; margin: 16rpx; line-height: 1; } -.nut-calendarcard-header-left .left, -.nut-calendarcard-header-right .left { - margin-left: 8rpx; -} -.nut-calendarcard-header-left .right, -.nut-calendarcard-header-right .right { - margin-right: 8rpx; +.nut-calendarcard-days { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; } .nut-calendarcard-day { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - -ms-flex-direction: column; flex-direction: column; position: relative; width: 14.28%; @@ -9479,36 +8819,19 @@ wx-button { cursor: pointer; margin-bottom: 4rpx; text-align: center; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } -.nut-calendarcard-day-top, -.nut-calendarcard-day-bottom { - width: 100%; - height: 12rpx; - font-size: 12rpx; - line-height: 12rpx; -} -.nut-theme-dark .nut-checkbox__button--disabled { - color: var(--nut-checkbox-label-disable-color, #999); - border: 1rpx solid var(--nut-checkbox-label-disable-color, #999); -} .nut-checkbox { display: var(--nut-checkbox-display, inline-flex); vertical-align: bottom; - -ms-flex-align: center; align-items: center; margin-right: var(--nut-checkbox-margin-right, 20rpx); } -.nut-checkbox--reverse .nut-checkbox__label { - margin-right: var(--nut-checkbox-label-margin-left, 15rpx); - margin-left: 0; +.nut-checkbox--reverse { + flex-direction: row-reverse; } .nut-checkbox__button { - display: -ms-inline-flexbox; display: inline-flex; - -ms-flex-align: center; align-items: center; padding: var(--nut-checkbox-button-padding, 5rpx 18rpx); font-size: var(--nut-checkbox-button-font-size, 12rpx); @@ -9518,37 +8841,12 @@ wx-button { box-sizing: border-box; border: 1rpx solid var(--nut-checkbox-button-border-color, #f6f7f9); } -.nut-checkbox__button--active { - background: transparent; - color: var(--nut-checkbox-button-font-color-active, var(--nut-primary-color, #fa2c19)); - border: 1rpx solid var(--nut-checkbox-button-border-color-active, var(--nut-primary-color, #fa2c19)); - position: relative; -} .nut-checkbox__label { - -ms-flex: 1; flex: 1; margin-left: var(--nut-checkbox-label-margin-left, 15rpx); font-size: var(--nut-checkbox-label-font-size, 14rpx); color: var(--nut-checkbox-label-color, #1d1e1e); } -.nut-checkbox__icon { - color: var(--nut-primary-color, #fa2c19); - font-size: var(--nut-checkbox-icon-font-size, 18rpx); - transition-duration: 0.3s; - transition-property: color, border-color, background-color; -} -.nut-checkbox__icon--unchecked { - color: var(--nut-checkbox-icon-disable-color, #d6d6d6); - font-size: var(--nut-checkbox-icon-font-size, 18rpx); -} -.nut-checkbox__icon--indeterminate { - color: var(--nut-primary-color, #fa2c19); - font-size: var(--nut-checkbox-icon-font-size, 18rpx); -} -.nut-checkbox__icon--disable { - color: var(--nut-checkbox-icon-disable-color2, var(--nut-help-color, #f5f5f5)); - font-size: var(--nut-checkbox-icon-font-size, 18rpx); -} .h5-input, .h5-textarea { font: inherit; @@ -9557,15 +8855,14 @@ wx-button { position: relative; width: 100%; padding: 10rpx 25rpx; - display: -ms-flexbox; display: flex; line-height: 20rpx; background: var(--nut-white, #fff); font-size: var(--nut-input-font-size, var(--nut-font-size-2, 14rpx)); box-sizing: border-box; } -.nut-input--border { - border-bottom: 1rpx solid var(--nut-input-border-bottom, #eaf0fb); +.nut-input.center { + align-items: center; } .nut-input .input-text, .nut-input__text--readonly { @@ -9578,72 +8875,66 @@ wx-button { text-decoration: none; background: transparent; resize: none; - -ms-flex: 1; flex: 1; } .nut-input .input-text { font-size: var(--nut-input-font-size, var(--nut-font-size-2, 14rpx)); } -.nut-input__label { - width: 80rpx; - overflow: hidden; - margin-right: 6rpx; - text-align: left; +.nut-input-value { + flex: 1; + vertical-align: middle; +} +.nut-input-inner { + position: relative; + display: flex; + align-items: center; +} +.nut-input-box { + position: relative; + width: 100%; + display: flex; + flex: 1; } .nut-input-word-limit { - display: -ms-flexbox; display: flex; - -ms-flex-pack: end; justify-content: flex-end; color: gray; font-size: 12rpx; padding: 0 10rpx; } +.nut-input-left-box, +.nut-input-right-box { + display: flex; + align-items: center; +} .nut-input-right-box { margin-left: 4rpx; } .nut-input-left-box { margin-right: 4rpx; } -.nut-input-clear { - width: 16rpx; - height: 16rpx; - color: #c8c9cc; - cursor: pointer; - margin: 0 4rpx; -} -.nut-input--required::before { - position: absolute; - left: 14rpx; - color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); - content: '*'; -} -.nut-input--error::-webkit-input-placeholder { - color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); - -webkit-text-fill-color: var(--nut-input-required-color, var(--nut-required-color, #fa2c19)); +.nut-input-clear-box { + height: 100%; + display: flex; + align-items: center; } -.nut-picker { - position: relative; - background: #fff; - border-radius: 5rpx; +.nut-theme-dark .nut-picker-roller-mask { + background-image: linear-gradient(180deg, #1b1b1be6, #1b1b1b66), linear-gradient(0deg, #1b1b1be6, #1b1b1b66); + background-repeat: no-repeat; + background-position: top, bottom; + z-index: 1; } .nut-picker__bar { - display: -ms-flexbox; display: flex; height: 46rpx; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: justify; justify-content: space-between; } .nut-picker__left { cursor: pointer; padding: var(--nut-picker-bar-button-padding, 0 15rpx); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; min-width: 50rpx; height: 100%; @@ -9653,17 +8944,18 @@ wx-button { .nut-picker__right { cursor: pointer; padding: var(--nut-picker-bar-button-padding, 0 15rpx); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; min-width: 50rpx; height: 100%; color: var(--nut-picker-ok-color, var(--nut-primary-color, #fa2c19)); font-size: var(--nut-picker-bar-ok-font-size, 14rpx); } +.nut-picker__column { + display: flex; + position: relative; +} .nut-picker__column::before { content: ''; position: absolute; @@ -9673,23 +8965,17 @@ wx-button { border: var(--nut-picker-item-active-line-border, 1rpx solid #eae7e7); border-left: 0; border-right: 0; - -ms-transform: scale(0.9); transform: scale(0.9); - -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-picker__columnitem { width: 0; - -ms-flex-positive: 1; flex-grow: 1; height: 100%; - -moz-user-select: none; - -ms-user-select: none; user-select: none; cursor: grab; } .nut-picker__title { - -ms-flex: 1; flex: 1; width: 100%; overflow: hidden; @@ -9708,47 +8994,14 @@ wx-button { height: var(--lineHeight); z-index: 1; transform-style: preserve-3d; - -ms-transform: translateY(-50%); transform: translateY(-50%); } -.nut-picker-roller-item { - display: block; - backface-visibility: hidden; - -moz-backface-visibility: hidden; - position: absolute; - top: 0; - width: 100%; - height: var(--nut-picker-item-height, 36rpx); - line-height: var(--nut-picker-item-height, 36rpx); - color: var(--nut-picker-item-text-color, var(--nut-title-color, #1a1a1a)); - font-size: var(--nut-picker-item-text-font-size, 14rpx); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.nut-picker-roller-item-tile, -.nut-picker-roller-item-tarotile { - display: block; - text-align: center; - width: 100%; - color: var(--nut-picker-item-text-color, var(--nut-title-color, #1a1a1a)); - font-size: var(--nut-picker-item-text-font-size, 14rpx); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} .nut-picker-roller-mask { position: absolute; width: 100%; display: block; height: 100%; - background-image: - -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.90196)), to(rgba(255, 255, 255, 0.4))), - -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.90196)), to(rgba(255, 255, 255, 0.4))); - background-image: - -webkit-linear-gradient(top, rgba(255, 255, 255, 0.90196), rgba(255, 255, 255, 0.4)), - -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.90196), rgba(255, 255, 255, 0.4)); - background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.90196), rgba(255, 255, 255, 0.4)), linear-gradient(0deg, rgba(255, 255, 255, 0.90196), rgba(255, 255, 255, 0.4)); + background-image: linear-gradient(180deg, #ffffffe6, #fff6), linear-gradient(0deg, #ffffffe6, #fff6); background-repeat: no-repeat; background-position: top, bottom; transform: translateZ(0); @@ -9764,26 +9017,8 @@ wx-button { bottom: -50%; left: -50%; outline: 1rpx solid #3a3a3c; - -ms-transform: scale(0.5); transform: scale(0.5); } -.nut-short-password-title { - line-height: 1; - font-size: var(--nut-font-size-3, 16rpx); - color: var(--nut-title-color, #1a1a1a); -} -.nut-short-password-subtitle { - display: block; - margin-top: 12rpx; - line-height: 1; - font-size: var(--nut-font-size-1, 12rpx); - color: var(--nut-text-color, #808080); -} -.nut-short-password-wrapper { - padding: 12rpx 0 10rpx; - text-align: center; - position: relative; -} .nut-short-password__list { width: 100%; height: 41rpx; @@ -9791,108 +9026,53 @@ wx-button { background: var(--nut-shortpassword-background-color, rgb(245, 245, 245)); border-radius: 4rpx; border: 1rpx solid var(--nut-shortpassword-border-color, #ddd); - display: -ms-flexbox; display: flex; z-index: 10; } -.nut-short-password__item-icon { - height: 6rpx; - width: 6rpx; - border-radius: 50%; - background: #000; - display: inline-block; +.nut-short-password__item { + flex: 1; + display: flex; + justify-content: center; + align-items: center; } .nut-short-password__message { margin-top: 9rpx; - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; width: 247rpx; } -.nut-short-password__message .nut-short-password--error { - line-height: 1; - font-size: var(--nut-font-size-0, 10rpx); - color: var(--nut-shortpassword-error, var(--nut-primary-color, #fa2c19)); -} .nut-short-password__message .nut-short-password--forget { line-height: 1; font-size: var(--nut-font-size-1, 12rpx); color: var(--nut-shortpassword-forget, rgb(128, 128, 128)); - display: -ms-flexbox; display: flex; } .nut-textarea { position: relative; width: 100%; box-sizing: border-box; - display: -ms-flexbox; display: flex; background: var(--nut-white, #fff); font-size: var(--nut-textarea-font, var(--nut-font-size-2, 14rpx)); padding: 10rpx 25rpx; } -.nut-textarea__limit { - position: absolute; - right: 15rpx; - bottom: 12rpx; - font-size: var(--nut-textarea-font, var(--nut-font-size-2, 14rpx)); - color: var(--nut-textarea-limit-color, var(--nut-text-color, #808080)); -} -.nut-textarea__textarea { - outline: none; - display: block; - box-sizing: border-box; - width: 100%; - min-width: 0; - margin: 0; - padding: 0; - font-size: var(--nut-textarea-font, var(--nut-font-size-2, 14rpx)); - color: var(--nut-textarea-text-color, var(--nut-title-color, #1a1a1a)); - text-align: left; - background-color: transparent; - border: none; - resize: none; - line-height: 20rpx; -} -.nut-textarea__textarea .taro-textarea { - font-size: 14rpx; - resize: none; -} -.nut-textarea__textarea__readonly { - padding: 5rpx 10rpx; -} -.nut-textarea__ali { - line-height: 17rpx; -} -.nut-textarea .nut-textarea__cpoyText { - position: absolute; - top: -999999rpx; - left: -999999rpx; - font-size: 14rpx; - line-height: 1.5; +.nut-uploader { + position: relative; + display: flex; + flex-wrap: wrap; } .nut-uploader__upload { position: relative; background: var(--nut-uploader-background, #f7f8fa); width: var(--nut-uploader-picture-width, 100rpx); height: var(--nut-uploader-picture-height, 100rpx); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; } -.nut-uploader__input.disabled { - cursor: not-allowed !important; -} .nut-uploader__preview { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; margin-right: 10rpx; margin-bottom: 10rpx; @@ -9905,73 +9085,30 @@ wx-button { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; } -.nut-uploader__preview__progress__msg { - color: var(--nut-white, #fff); - font-size: 12rpx; - margin-top: 6rpx; -} -.nut-uploader__preview.list { - width: 100%; - margin-right: 0; - margin-bottom: 0; - margin-top: 10rpx; -} .nut-uploader__preview-list { width: 100%; height: 32rpx; - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; position: relative; } .nut-uploader__preview-list .nut-uploader__preview-img__file__name { padding: 2rpx 4rpx; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; height: 100%; } -.nut-uploader__preview-list .nut-uploader__preview-img__file__name .file__name_tips { - margin-left: 4rpx; - padding: 0 20rpx; - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.nut-uploader__preview-list .nut-uploader__preview-img__file__del { - position: absolute; - right: 6rpx; - top: 6rpx; -} -.nut-uploader__preview-list .nut-uploader__preview-img__file__link { - position: absolute; - left: 6rpx; - top: 8rpx; -} -.nut-uploader__preview-list .nut-progress .nut-progress-outer { - height: 2rpx !important; -} .nut-uploader__preview-img { position: relative; width: var(--nut-uploader-picture-width, 100rpx); height: var(--nut-uploader-picture-height, 100rpx); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; border-radius: 6rpx; } @@ -9980,7 +9117,6 @@ wx-button { right: 0; top: 0; color: rgba(0, 0, 0, 0.6); - -ms-transform: translate(50%, -50%); transform: translate(50%, -50%); } .nut-uploader__preview-img .tips { @@ -9989,11 +9125,8 @@ wx-button { left: 0; right: 0; text-align: center; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; font-size: 12rpx; color: var(--nut-white, #fff); @@ -10005,13 +9138,15 @@ wx-button { text-overflow: ellipsis; white-space: nowrap; } -.nut-uploader__preview-img__c { - max-width: 100%; - max-height: 100%; - border-radius: 6rpx; +.nut-uploader__preview-img__file { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s; } .nut-uploader__preview-img__file__name { - display: -ms-flexbox; display: flex; width: 100%; font-size: 12rpx; @@ -10020,24 +9155,18 @@ wx-button { height: 100%; overflow: hidden; box-sizing: border-box; - -ms-flex-align: center; align-items: center; } .nut-number-keyboard { width: var(--nut-numberkeyboard-width, 100%); padding: var(--nut-numberkeyboard-padding, 0 0 22rpx 0); background-color: var(--nut-numberkeyboard-background-color, #f2f3f5); - -moz-user-select: none; - -ms-user-select: none; user-select: none; } .nut-number-keyboard .nut-number-keyboard__header { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; box-sizing: content-box; height: var(--nut-numberkeyboard-header-height, 34rpx); @@ -10045,50 +9174,33 @@ wx-button { color: var(--nut-numberkeyboard-header-color, #646566); font-size: var(--nut-numberkeyboard-header-font-size, 16rpx); } -.nut-number-keyboard .nut-number-keyboard__header .nut-number-keyboard__close { - position: absolute; - display: block; - right: 0; - padding: var(--nut-numberkeyboard-header-close-padding, 0 16rpx); - color: var(--nut-numberkeyboard-header-close-color, #576b95); - font-size: var(--nut-numberkeyboard-header-close-font-size, 14rpx); - background-color: var(--nut-numberkeyboard-header-close-background-color, transparent); - border: none; - cursor: pointer; -} .nut-number-keyboard .nut-number-keyboard__body { - display: -ms-flexbox; display: flex; padding: 6rpx 0 0 6rpx; } -.nut-number-keyboard .nut-number-keyboard__body .nut-number-keyboard__sidebar .nut-key__wrapper .nut-key { - position: absolute; - top: 0; - right: 6rpx; - bottom: 6rpx; - left: 0; - height: auto; +.nut-number-keyboard .nut-number-keyboard__body .nut-number-keyboard__keys { + display: flex; + flex: 3; + flex-wrap: wrap; } -.nut-number-keyboard .nut-number-keyboard__body .nut-number-keyboard__sidebar .nut-key__wrapper .nut-key--finish { - font-size: var(--nut-numberkeyboard-key-finish-font-size, 16rpx); - color: var(--nut-numberkeyboard-key-finish-font-size-color, #fff); - background-color: var(--nut-numberkeyboard-key-finish-background-color, #1989fa); +.nut-number-keyboard .nut-number-keyboard__body .nut-number-keyboard__sidebar { + display: flex; + flex: 1; + flex-direction: column; } .nut-key__wrapper { position: relative; - -ms-flex: 1; flex: 1; - -ms-flex-preferred-size: 33%; flex-basis: 33%; box-sizing: border-box; padding: 0 6rpx 6rpx 0; } +.nut-key__wrapper.nut-key__wrapper--wider { + flex-basis: 66%; +} .nut-key__wrapper .nut-key { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; height: var(--nut-numberkeyboard-key-height, 48rpx); font-size: var(--nut-numberkeyboard-key-font-size, 28rpx); @@ -10098,113 +9210,41 @@ wx-button { border-radius: var(--nut-numberkeyboard-key-border-radius, 8rpx); cursor: pointer; } -.nut-key__wrapper .h5-img { - width: 30rpx; - height: 24rpx; -} -.nut-number-keyboard-overlay { - background-color: rgba(0, 0, 0, 0) !important; -} -.nut-theme-dark .nut-action-sheet .nut-action-sheet__cancel { - border-top: 1rpx solid var(--nut-dark-background2, #1b1b1b); -} -.nut-theme-dark .nut-action-sheet .nut-action-sheet__title { - border-bottom: 1rpx solid var(--nut-dark-background2, #1b1b1b); -} -.nut-action-sheet .nut-action-sheet__title { - display: block; - padding: 10rpx; - margin: 0; - text-align: center; - background-color: var(--nut-white, #fff); - border-bottom: 1rpx solid var(--nut-actionsheet-light-color, #f6f6f6); - font-size: var(--nut-font-size-base, var(--nut-font-size-2, 14rpx)); - color: var(--nut-title-color, #1a1a1a); -} -.nut-action-sheet .nut-action-sheet__cancel, -.nut-action-sheet .nut-action-sheet__item { - display: block; - padding: 10rpx; - line-height: var(--nut-actionsheet-item-line-height, 24rpx); - font-size: var(--nut-actionsheet-item-font-size, var(--nut-font-size-2, 14rpx)); - color: var(--nut-actionsheet-item-font-color, var(--nut-title-color, #1a1a1a)); - text-align: center; - background-color: #fff; - border-bottom: var(--nut-actionsheet-item-border-bottom, none); - cursor: pointer; -} -.nut-action-sheet .nut-action-sheet__desc { - font-size: var(--nut-actionsheet-item-font-size, var(--nut-font-size-2, 14rpx)); - color: #999; - cursor: default; -} -.nut-action-sheet .nut-action-sheet__subdesc { - display: block; - font-size: var(--nut-actionsheet-item-subdesc-font-size, var(--nut-font-size-1, 12rpx)); - color: #999; -} -.nut-action-sheet .nut-action-sheet__cancel { - margin-top: 5rpx; - border-top: var(--nut-actionsheet-item-cancel-border-top, 1rpx solid var(--nut-actionsheet-light-color, #f6f6f6)); -} .nut-backtop.show { width: 40rpx; height: 40rpx; background: var(--nut-white, #fff); border: 1rpx solid var(--nut-backtop-border-color, #e0e0e0); border-radius: 50%; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; } .nut-drag { position: fixed; display: inline-block; z-index: 9997 !important; - width: -moz-fit-content; width: fit-content; - height: -moz-fit-content; height: fit-content; } .nut-taro-drag { display: inline-block; z-index: 9997 !important; - width: -moz-fit-content; width: fit-content; - height: -moz-fit-content; height: fit-content; } .nut-dialog { - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex-align: center; align-items: center; width: var(--nut-dialog-width, 296rpx); min-height: 156rpx; padding: 28rpx 24rpx 16rpx; box-sizing: border-box; } -.nut-dialog__header { - display: block; - text-align: center; - height: 20rpx; - font-size: 16rpx; - color: var(--nut-dialog-header-color, rgb(38, 38, 38)); - font-weight: var(--nut-dialog-header-font-weight, normal); - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} .nut-dialog__content { width: 100%; overflow: auto; - -ms-flex: 1; flex: 1; margin: 20rpx 0; max-height: 268rpx; @@ -10215,260 +9255,108 @@ wx-button { word-break: break-all; white-space: pre-wrap; } -.nut-dialog__footer.vertical .nut-button.nut-dialog__footer-ok { - margin-top: 10rpx; -} -.nut-dialog__footer .nut-button { - min-width: 100rpx; - overflow: hidden; -} -.nut-dialog__footer-ok { - max-width: 128rpx; -} -.nut-infinite-loading .nut-infinite__bottom { - display: block; +.nut-dialog__footer { + display: flex; + align-items: center; width: 100%; - height: 50rpx; - line-height: 50rpx; - font-size: var(--nut-font-size-small, var(--nut-font-size-1, 12rpx)); - color: var(--nut-infiniteloading-bottom-color, #c8c8c8); - text-align: center; + justify-content: var(--nut-dialog-footer-justify-content, space-around); } -.nut-infinite-loading .nut-infinite__bottom .nut-infinite__bottom-box__img { - margin-right: 5rpx; - width: 15rpx; - height: 15rpx; +.nut-dialog__footer.vertical { + flex-direction: column; } -.nut-infinite-loading .nut-infinite__bottom .nut-infinite__bottom-box__text { - font-size: 12rpx; - color: var(--nut-text-color, #808080); +.nut-infinite-loading .nut-infinite__bottom .nut-infinite__bottom-box { + display: flex; + align-items: center; + justify-content: center; } .nut-pull-refresh-container-topbox { position: absolute; left: 0; width: 100%; height: 50rpx; - -ms-transform: translateY(-100%); transform: translateY(-100%); text-align: center; font-size: 14rpx; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; } -.nut-pull-refresh-container-topbox-icon { - margin-right: 4rpx; - width: 16rpx; - height: 16rpx; -} -.nut-pull-refresh-container-topbox-text { - font-size: var(--nut-font-size-2, 14rpx); - color: var(--nut-text-color, #808080); -} -.nut-notify { - display: block; - width: 100%; - box-sizing: border-box; - padding: var(--nut-notify-padding, 12rpx 0); - color: var(--nut-notify-text-color, var(--nut-white, #fff)); - font-size: var(--nut-notify-font-size, 14rpx); - white-space: pre-wrap; - text-align: center; - word-wrap: break-word; - height: var(--nut-notify-height, 44rpx); - line-height: var(--nut-notify-line-height, auto); -} -.nut-switch { - cursor: pointer; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-align: center; - align-items: center; - background-color: var(--nut-primary-color, #fa2c19); - border-radius: var(--nut-switch-border-radius, 21rpx); - background-size: 100% 100%; - background-repeat: no-repeat; - background-position: center center; - -ms-flex: 0 0 auto; - flex: 0 0 auto; -} -.nut-switch .nut-icon-loading1 { - width: 12rpx; - height: 12rpx; - font-size: 12rpx; +.nut-switch { + cursor: pointer; + display: inline-flex; + align-items: center; + background-color: var(--nut-primary-color, #fa2c19); + border-radius: var(--nut-switch-border-radius, 21rpx); + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center center; + flex: 0 0 auto; } .nut-switch .nut-switch-button { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; border-radius: 50%; background: var(--nut-white, #fff); transition: transform 0.3s; } -.nut-switch .nut-switch-button .nut-switch-label { - color: var(--nut-white, #fff); - font-size: var(--nut-font-size-1, 12rpx); -} .nut-switch .nut-switch-button .nut-switch-label.open { - -ms-transform: translate(-16rpx); transform: translate(-16rpx); } .nut-switch .nut-switch-button .nut-switch-label.close { - -ms-transform: translate(16rpx); transform: translate(16rpx); } -.nut-switch.nut-switch-base { - min-width: var(--nut-switch-width, 36rpx); - height: var(--nut-switch-height, 21rpx); - line-height: var(--nut-switch-line-height, 21rpx); - overflow: hidden; -} .nut-switch.nut-switch-base .nut-switch-button { height: var(--nut-switch-inside-height, 13rpx); width: var(--nut-switch-inside-width, 13rpx); - -ms-transform: var(--nut-switch-inside-close-transform, translateX(30%)); transform: var(--nut-switch-inside-close-transform, translateX(30%)); } .nut-switch.nut-switch-base.nut-switch-open .nut-switch-button { - -ms-transform: var(--nut-switch-inside-open-transform, translateX(146%)); transform: var(--nut-switch-inside-open-transform, translateX(146%)); } -@keyframes rotation { - 0% { - } - to { - } -} -.nut-toast { - position: fixed; - left: 0; - bottom: 150rpx; - width: 100%; - text-align: center; - pointer-events: none; - z-index: 9999; - font-family: var(--nut-font-family, PingFang SC, Microsoft YaHei, Helvetica, Hiragino Sans GB, SimSun, sans-serif); -} -.nut-toast-small .nut-toast-inner { - font-size: var(--nut-font-size-small, var(--nut-font-size-1, 12rpx)); -} -.nut-toast-large .nut-toast-inner { - font-size: var(--nut-font-size-large, var(--nut-font-size-3, 16rpx)); -} -.nut-toast-inner { - display: inline-block; - font-size: var(--nut-toast-text-font-size, 14rpx); - min-width: 40%; - max-width: 65%; - text-align: center; - padding: var(--nut-toast-inner-padding, 24rpx 30rpx); - word-break: break-all; - background: var(--nut-toast-inner-bg-color, rgba(0, 0, 0, 0.8)); - border-radius: var(--nut-toast-inner-border-radius, 12rpx); - color: var(--nut-toast-font-color, var(--nut-white, #fff)); -} -.nut-toast-text { - font-size: var(--nut-toast-text-font-size, 14rpx); -} -.nut-toast-text:empty { - margin-bottom: -8rpx; -} -.nut-toast-title { - font-size: var(--nut-toast-title-font-size, 16rpx); -} -.nut-toast-title:empty { - margin-bottom: -8rpx; +.nut-toast-cover { + display: flex; + align-items: center; + justify-content: center; + pointer-events: auto; + height: 100%; + background: var(--nut-toast-cover-bg-color, rgba(0, 0, 0, 0)); } .nut-toast-has-icon .nut-toast-icon-wrapper { width: 100%; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; margin-bottom: 8rpx; } .nut-toast-center { top: 50%; - -ms-transform: translateY(-50%); transform: translateY(-50%); } -.nut-toast-loading .nut-toast-icon-wrapper { - animation: rotation 2s linear infinite; -} -.nut-toast-loading .nut-toast-icon-no-animation { - animation: none; +.nut-toast-loading .nut-toast-inner { + display: inline-flex; + flex-direction: column; + justify-content: center; + align-items: center; } .nut-range-container { - display: -ms-flexbox; display: flex; position: relative; width: 100%; height: 4rpx; - -ms-flex-align: center; align-items: center; } .nut-range-container .nut-range-min, .nut-range-container .nut-range-max { font-size: var(--nut-font-size-1, 12rpx); color: var(--nut-range-tip-font-color, #333333); - -moz-user-select: none; - -ms-user-select: none; user-select: none; } .nut-range-container-vertical { height: 100%; - -ms-flex-direction: column; flex-direction: column; padding: 0 15rpx; } -.nut-range-container-vertical .nut-range { - width: 4rpx; - height: 100%; -} -.nut-range-container-vertical .nut-range-button-wrapper, -.nut-range-container-vertical .nut-range-button-wrapper-right { - position: absolute; - top: auto; - top: initial; - bottom: 0; - left: 50%; - right: auto; - right: initial; - transform: translate3d(-50%, 50%, 0); -} -.nut-range-container-vertical .nut-range-button-wrapper-left { - top: 0; - left: 50%; - right: auto; - right: initial; - transform: translate3d(-50%, -50%, 0); -} -.nut-range-container-vertical .nut-range .number { - transform: translate3d(100%, 0, 0); -} -.nut-range-container-vertical .nut-range-vertical { - margin: 10rpx 0; -} -.nut-range-container-vertical .nut-range-mark { - position: absolute; - width: 100%; - right: 50%; - overflow: visible; - font-size: 12rpx; - height: 100%; - top: auto; - top: initial; - width: 36rpx; - padding: 0; -} .nut-range-container-vertical .nut-range-mark-text { width: 20rpx; position: absolute; @@ -10477,84 +9365,20 @@ wx-button { color: #999; text-align: center; word-break: keep-all; - -moz-user-select: none; - -ms-user-select: none; user-select: none; - -ms-transform: translateY(-50%); transform: translateY(-50%); } -.nut-range-container-vertical .nut-range-tick { - position: absolute; - top: 0; - left: 30rpx; - width: 11rpx; - height: 11rpx; - margin-left: 0; - border-radius: 50%; - background-color: var(--nut-range-bg-color-tick, #fa958c); -} -.nut-range { - display: block; - position: relative; - width: 100%; - height: 4rpx; - border-radius: 2rpx; - cursor: pointer; -} -.nut-range-button { - display: block; - width: var(--nut-range-bar-btn-width, 24rpx); - height: var(--nut-range-bar-btn-height, 24rpx); - background-color: var(--nut-range-bar-btn-bg-color, var(--nut-white, #fff)); - border-radius: 50%; - box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.14902); - border: var(--nut-range-bar-btn-border, 1rpx solid var(--nut-primary-color, #fa2c19)); - outline: none; -} -.nut-range-button-wrapper, -.nut-range-button-wrapper-right { - position: absolute; - top: 50%; - right: 0; - transform: translate3d(50%, -50%, 0); - cursor: grab; - outline: none; -} -.nut-range-button-wrapper-left { - position: absolute; - top: 50%; - left: 0; - transform: translate3d(-50%, -50%, 0); - cursor: grab; - outline: none; -} .nut-range-button .number { width: 100%; height: 100%; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; - -moz-user-select: none; - -ms-user-select: none; user-select: none; font-size: var(--nut-font-size-1, 12rpx); color: var(--nut-range-tip-font-color, #333333); transform: translate3d(0, -100%, 0); } -.nut-range-show-number { - margin: 0 15rpx; -} -.nut-range-mark { - position: absolute; - width: 100%; - overflow: visible; - top: 50%; - font-size: 12rpx; - padding-top: 14rpx; -} .nut-range-mark-text { position: absolute; display: inline-block; @@ -10562,46 +9386,23 @@ wx-button { color: #999; text-align: center; word-break: keep-all; - -moz-user-select: none; - -ms-user-select: none; user-select: none; - -ms-transform: translate(-50%); transform: translate(-50%); } -.nut-range-tick { - position: absolute; - top: -20rpx; - width: 11rpx; - height: 11rpx; - left: 0; - border-radius: 50%; - background-color: var(--nut-range-bg-color-tick, #fa958c); -} .nut-audio .nut-audio__progress { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; width: 100%; margin: 0 auto; padding: 10rpx 0; } .nut-audio .nut-audio__progress .nut-audio__bar { - -ms-flex: 1; flex: 1; margin: 0 10rpx; } -.nut-audio .nut-audio__progress .nut-audio__time { - min-width: 50rpx; - font-size: 12rpx; - text-align: center; -} .nut-audio .nut-audio__icon .nut-audio__icon--box { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; width: 30rpx; height: 30rpx; @@ -10613,58 +9414,50 @@ wx-button { position: absolute; left: 50%; top: 50%; - -ms-transform: translate(-15rpx); transform: translate(-15rpx); content: ''; height: 2rpx; width: 30rpx; background: var(--nut-disable-color, #cccccc); - -ms-transform: rotate(45deg); transform: rotate(45deg); - -ms-transform-origin: 8rpx -18rpx; transform-origin: 8rpx -18rpx; } -.nut-audio .audioMain { - margin-top: 30rpx; +.nut-audio-operate-group { + display: flex; + align-items: center; + justify-content: center; + margin-top: 10rpx; } -.nut-audio .nut-audio__button--custom { - width: 8rpx; - height: 8rpx; - color: #fff; - font-size: 10rpx; - line-height: 18rpx; - text-align: center; - background-color: #ee0a24; - border-radius: 100rpx; +.nut-avatar-group { + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center center; + display: flex; + position: relative; + flex: 0 0 auto; } -.nut-audio-operate-group { - display: -ms-flexbox; +.nut-progress { + width: 100%; + position: relative; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; - justify-content: center; - margin-top: 10rpx; -} -.nut-audio-operate-group .nut-audio-operate .nut-audio-operate-item { - margin: 0 5rpx; -} -.nut-avatar-group .nut-avatar { - border: 1rpx solid #fff; } .nut-progress .nut-progress-outer { - -ms-flex: 1; flex: 1; background-color: var(--nut-progress-outer-background-color, #f3f3f3); border-radius: var(--nut-progress-outer-border-radius, 12rpx); height: 10rpx; } -.nut-progress .nut-progress-outer .nut-progress-inner { - width: 30%; - height: 100%; - border-radius: var(--nut-progress-outer-border-radius, 12rpx); - background: var(--nut-progress-inner-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); - transition: all 0.4s; +.nut-progress .nut-progress-outer .nut-progress-text { + display: flex; + flex-direction: column; + justify-content: center; + color: #fff; +} +.nut-progress .nut-progress-outer .nut-progress-slot { + display: flex; + justify-content: center; + align-items: center; } .nut-progress .nut-progress-outer .nut-active::before { content: ''; @@ -10676,163 +9469,58 @@ wx-button { border-radius: var(--nut-progress-outer-border-radius, 12rpx); animation: progressActive 2s ease-in-out infinite; } -@keyframes progressActive { - 0% { - background: rgba(255, 255, 255, 0.10196); - width: 0; - } - 20% { - background: rgba(255, 255, 255, 0.50196); - width: 0; - } - to { - background: rgba(255, 255, 255, 0); - width: 100%; - } -} -.nut-progress .nut-progress-outer.nut-progress-small { - height: var(--nut-progress-small-height, 5rpx); -} -.nut-progress .nut-progress-outer.nut-progress-small .nut-progress-text { - font-size: var(--nut-progress-small-text-font-size, 7rpx); - line-height: var(--nut-progress-small-text-line-height, 10rpx); - padding: var(--nut-progress-small-text-padding, 2rpx 4rpx); - top: 50%; -} -.nut-progress .nut-progress-outer.nut-progress-base { - height: var(--nut-progress-base-height, 10rpx); -} -.nut-progress .nut-progress-outer.nut-progress-base .nut-progress-text { - font-size: var(--nut-progress-base-text-font-size, 9rpx); - line-height: var(--nut-progress-base-text-line-height, 13rpx); - padding: var(--nut-progress-base-text-padding, var(--nut-progress-insidetext-padding, 3rpx 5rpx 3rpx 6rpx)); - top: 50%; -} -.nut-progress .nut-progress-outer.nut-progress-large { - height: var(--nut-progress-large-height, 15rpx); -} -.nut-progress .nut-progress-outer.nut-progress-large .nut-progress-text { - font-size: var(--nut-progress-large-text-font-size, 13rpx); - line-height: var(--nut-progress-large-text-line-height, 18rpx); - padding: var(--nut-progress-large-text-padding, var(--nut-progress-insidetext-padding, 3rpx 5rpx 3rpx 6rpx)); - top: 50%; -} .nut-progress .nut-progress-text { padding: 0 5rpx; font-size: 13rpx; line-height: 1; min-width: 35rpx; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; } -.nut-progress .nut-progress-insidetext { - padding: var(--nut-progress-insidetext-padding, 3rpx 5rpx 3rpx 6rpx); - background: var( - --nut-progress-insidetext-background, - var(--nut-progress-inner-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)) - ); - border-radius: var(--nut-progress-insidetext-border-radius, 5rpx); - position: absolute; - transition: all 0.4s; - top: 50%; - min-width: 0rpx; -} -.nut-progress .nut-icon-success, -.nut-progress .nut-icon-fail { - width: 10rpx; - height: 10rpx; - display: inline-block; -} .nut-circle-progress__text { position: absolute; top: 50%; left: 0; box-sizing: border-box; width: 100%; - -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; color: var(--nut-circleprogress-text-color, #000000); font-size: var(--nut-circleprogress-text-size, var(--nut-font-size-3, 16rpx)); } .nut-noticebar__page { - display: -ms-flexbox; display: flex; padding: var(--nut-noticebar-box-padding, 0 16rpx); height: var(--nut-noticebar-across-height, 40rpx); font-size: var(--nut-noticebar-font-size, 14rpx); position: relative; - -ms-flex-align: center; align-items: center; background: var(--nut-noticebar-background, rgb(251, 248, 220)); color: var(--nut-noticebar-color, #d9500b); } -.nut-noticebar__page--wrapable { - height: auto; - padding: var(--nut-noticebar-wrapable-padding, 16rpx); -} -.nut-noticebar__page .nut-noticebar__page--withicon { - position: relative; - padding-right: 40rpx; -} .nut-noticebar__page .nut-noticebar__page-lefticon { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; margin: var(--nut-noticebar-lefticon-margin, 0rpx 10rpx); background-size: 100% 100%; } .nut-noticebar__page .nut-noticebar__page-righticon { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; margin: var(--nut-noticebar-righticon-margin, 0rpx 10rpx); } .nut-noticebar__page .nut-noticebar__page-wrap { - display: -ms-flexbox; display: flex; - -ms-flex: 1; flex: 1; height: var(--nut-noticebar-across-line-height, 24rpx); line-height: var(--nut-noticebar-across-line-height, 24rpx); overflow: hidden; position: relative; } -.nut-noticebar__page .play { - animation: nut-notice-bar-play linear both running; -} -.nut-noticebar__page .play-infinite { - animation: nut-notice-bar-play-infinite linear infinite both running; -} -.nut-noticebar__page .play-vertical { - animation: nut-notice-bar-play-vertical linear infinite both running; -} -@keyframes nut-notice-bar-play { - to { - transform: translate3d(-100%, 0, 0); - } -} -@keyframes nut-notice-bar-play-infinite { - to { - transform: translate(-100%); - } -} -@keyframes nut-notice-bar-play-vertical { - to { - transform: translateY(var(--nut-noticebar-across-height, 40rpx)); - } -} .nut-noticebar__vertical { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; height: var(--nut-noticebar-across-height, 40rpx); font-size: var(--nut-noticebar-font-size, 14rpx); @@ -10841,152 +9529,71 @@ wx-button { background: var(--nut-noticebar-background, rgb(251, 248, 220)); color: var(--nut-noticebar-color, #d9500b); } -.nut-noticebar__vertical .nut-noticebar__vertical-list .nut-noticebar__vertical-item { - height: var(--nut-noticebar-across-height, 40rpx); +.nut-noticebar__vertical .nut-noticebar__vertical-list { width: 100%; - text-overflow: ellipsis; - white-space: nowrap; + margin: 0; + padding: 0; + display: block; + flex: 1; overflow: hidden; } -.nut-noticebar__vertical .nut-noticebar-custom-item { - position: absolute; - top: 999999rpx; -} .nut-noticebar__vertical .go { margin: var(--nut-noticebar-righticon-margin, 0rpx 10rpx); - -ms-flex-item-align: center; align-self: center; - display: -ms-flexbox; display: flex; } .nut-empty { box-sizing: border-box; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-direction: column; flex-direction: column; - -ms-flex-pack: center; justify-content: center; padding: var(--nut-empty-padding, 32rpx 0); } -.nut-empty__box { - width: var(--nut-empty-image-size, 170rpx); - height: var(--nut-empty-image-size, 170rpx); +.nut-steps { + display: flex; } -.nut-empty__box .h5-img, -.nut-empty__box image { - width: 100%; +.nut-steps-vertical { height: 100%; + flex-flow: column; } -.nut-empty__description { - margin-top: var(--nut-empty-description-margin-top, 4rpx); - padding: var(--nut-empty-description-padding, 0 40rpx); - color: var(--nut-empty-description-color, #666666); - font-size: var(--nut-empty-description-font-size, 14rpx); - line-height: var(--nut-empty-description-line-height, 20rpx); +.nut-step { + flex-grow: 0; + flex-shrink: 0; + flex: 1; + text-align: center; + font-size: 0; } -.nut-video-play-btn::before { - content: ''; - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAA+CAMAAABTPci/AAAAb1BMVEUAAAACAgL///////////////////////////////////+urq4uLi7+/v6zs7OLi4v9/f3Hx8dubm79/f39/f3z8/P5+fn9/f38/Pz4+Pipqans7Oz8/Pz29vbx8fHi4uLX19fq6urg4ODT09P5+flRzniSAAAAJXRSTlMAA6GcmZWlno+RjBYHixgNhRsJgn9PbYh7XhNBdFlHMyc6LCNmyQGEbAAAAdlJREFUSMe11tly4jAQRuHgDdnBYBazw8xk8v7POMI/1Jm0iORUKs31Vy0dMOWX78xk8nWi+SKZrVYzqfHo9Xo4nOZiY83yvW2a9vxnwRmTZta3fhq3O/xlWQodzwNqGre/HlmWuNFeyKtm+7aSSqNG4/x0/VJnTKENxtWOICkkI9YQJIEwdV2uFSSOjPEfBYkjh7kpP+3FBrEIMuzR7AmSRN5oivpdQeJI13mYsig6G8Qi1sgMU55/KUiI1uZCoCJ3BDGo9iYgQnm+IYhBWsN1MPm0VJAADYbBDGra9gQBsccYoSxXEIuCNRiPsqxUkE8Q5IGksvXpFgRkiRBkmCrf/vbLHqgryWYXyUhVrvfLLIobr7KL7/ERPT8axk/xBrImRNV9riBdKG1CNMJwvHlnjAimuiOFABURw6Ka5PNdYfc8JVO+3AEhMPZoO/2MQJE9d1Qc+MGCME9ItufRAMXv4/rXCQYkYvYQQMQi2wDVnRasAbVk+9+YADHEGhMgRKGxAUIkYp44AqSRDAE+RxAhAiQQhAARNDWpHX/DccSenAAR1HzIRoCxqCoJkEDZwxAghY6buyBAGs0uMgQYo5bnW4A1AcapfrvtCTD2FXuxEPm5l3nYyw/PP4V4LkWCqx4LAAAAAElFTkSuQmCC) - no-repeat center; - width: 30rpx; - height: 30rpx; +.nut-step-head { + position: relative; + display: flex; + justify-content: center; + margin-bottom: 12rpx; +} +.nut-step-line { + position: absolute; + top: 11rpx; + left: 50%; + right: -50%; display: inline-block; - background-size: contain; + height: 1rpx; + background: var(--nut-steps-base-line-color, #909ca4); } -.nut-video-controller .nut-video-controller__playbtn { - width: 18rpx; - height: 18rpx; - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) - 1x - ); - background-repeat: no-repeat; - background-position: center; - margin: 0 10rpx; +.nut-step-icon { + position: relative; + display: flex; + width: var(--nut-steps-base-icon-width, 25rpx); + height: var(--nut-steps-base-icon-height, 25rpx); + line-height: var(--nut-steps-base-icon-line-height, 25rpx); + font-size: var(--nut-steps-base-icon-font-size, 13rpx); + align-items: center; + justify-content: center; + z-index: 1; } -.nut-video-controller .nut-video-controller__playbtn.puase { - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik02IDE5aDRWNUg2djE0em04LTE0djE0aDRWNWgtNHoiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik02IDE5aDRWNUg2djE0em04LTE0djE0aDRWNWgtNHoiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-controller .nut-video-controller__full { - width: 40rpx; - height: 35rpx; - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik03IDE0SDV2NWg1di0ySDd2LTN6bS0yLTRoMlY3aDNWNUg1djV6bTEyIDdoLTN2Mmg1di01aC0ydjN6TTE0IDV2MmgzdjNoMlY1aC01eiIvPgo8L3N2Zz4K); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik03IDE0SDV2NWg1di0ySDd2LTN6bS0yLTRoMlY3aDNWNUg1djV6bTEyIDdoLTN2Mmg1di01aC0ydjN6TTE0IDV2MmgzdjNoMlY1aC01eiIvPgo8L3N2Zz4K) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-controller .nut-video-controller__full.full2 { - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik01IDE2aDN2M2gydi01SDV2MnptMy04SDV2Mmg1VjVIOHYzem02IDExaDJ2LTNoM3YtMmgtNXY1em0yLTExVjVoLTJ2NWg1VjhoLTN6Ii8+Cjwvc3ZnPgo=); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KICAgIDxwYXRoIGQ9Ik01IDE2aDN2M2gydi01SDV2MnptMy04SDV2Mmg1VjVIOHYzem02IDExaDJ2LTNoM3YtMmgtNXY1em0yLTExVjVoLTJ2NWg1VjhoLTN6Ii8+Cjwvc3ZnPgo=) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-controller .nut-video-controller__volume { - width: 30rpx; - height: 30rpx; - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg==) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-video-controller .nut-video-controller__volume.muted { - background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNi41IDEyYzAtMS43Ny0xLjAyLTMuMjktMi41LTQuMDN2Mi4yMWwyLjQ1IDIuNDVjLjAzLS4yLjA1LS40MS4wNS0uNjN6bTIuNSAwYzAgLjk0LS4yIDEuODItLjU0IDIuNjRsMS41MSAxLjUxQzIwLjYzIDE0LjkxIDIxIDEzLjUgMjEgMTJjMC00LjI4LTIuOTktNy44Ni03LTguNzd2Mi4wNmMyLjg5Ljg2IDUgMy41NCA1IDYuNzF6TTQuMjcgM0wzIDQuMjcgNy43MyA5SDN2Nmg0bDUgNXYtNi43M2w0LjI1IDQuMjVjLS42Ny41Mi0xLjQyLjkzLTIuMjUgMS4xOHYyLjA2YzEuMzgtLjMxIDIuNjMtLjk1IDMuNjktMS44MUwxOS43MyAyMSAyMSAxOS43M2wtOS05TDQuMjcgM3pNMTIgNEw5LjkxIDYuMDkgMTIgOC4xOFY0eiIvPgogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4K); - background-image: -webkit-image-set( - url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNi41IDEyYzAtMS43Ny0xLjAyLTMuMjktMi41LTQuMDN2Mi4yMWwyLjQ1IDIuNDVjLjAzLS4yLjA1LS40MS4wNS0uNjN6bTIuNSAwYzAgLjk0LS4yIDEuODItLjU0IDIuNjRsMS41MSAxLjUxQzIwLjYzIDE0LjkxIDIxIDEzLjUgMjEgMTJjMC00LjI4LTIuOTktNy44Ni03LTguNzd2Mi4wNmMyLjg5Ljg2IDUgMy41NCA1IDYuNzF6TTQuMjcgM0wzIDQuMjcgNy43MyA5SDN2Nmg0bDUgNXYtNi43M2w0LjI1IDQuMjVjLS42Ny41Mi0xLjQyLjkzLTIuMjUgMS4xOHYyLjA2YzEuMzgtLjMxIDIuNjMtLjk1IDMuNjktMS44MUwxOS43MyAyMSAyMSAxOS43M2wtOS05TDQuMjcgM3pNMTIgNEw5LjkxIDYuMDkgMTIgOC4xOFY0eiIvPgogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4K) - 1x - ); - background-repeat: no-repeat; - background-position: center; -} -.nut-step-head { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - margin-bottom: 12rpx; -} -.nut-step-line { - position: absolute; - top: 11rpx; - left: 50%; - right: -50%; - display: inline-block; - height: 1rpx; - background: var(--nut-steps-base-line-color, #909ca4); -} -.nut-step-icon { - position: relative; - display: -ms-flexbox; - display: flex; - width: var(--nut-steps-base-icon-width, 25rpx); - height: var(--nut-steps-base-icon-height, 25rpx); - line-height: var(--nut-steps-base-icon-line-height, 25rpx); - font-size: var(--nut-steps-base-icon-font-size, 13rpx); - -ms-flex-align: center; - align-items: center; - -ms-flex-pack: center; - justify-content: center; - z-index: 1; +.nut-step-icon-inner { + display: flex; + justify-content: center; + align-items: center; } .nut-step-icon .nut-icon { width: var(--nut-steps-base-icon-font-size, 13rpx); @@ -10997,6 +9604,12 @@ wx-button { border-width: 1rpx; border-style: solid; } +.nut-step-main { + display: inline-block; + padding-left: 10%; + padding-right: 10%; + text-align: center; +} .nut-step-title { display: block; margin-bottom: var(--nut-steps-base-title-margin-bottom, 10rpx); @@ -11008,10 +9621,54 @@ wx-button { font-size: var(--nut-steps-base-content-font-size, 14rpx); color: var(--nut-steps-base-content-color, #666); } +.nut-step:last-child .nut-step-line { + display: none; +} +.nut-step.nut-step-finish .nut-step-head { + color: var(--nut-steps-finish-head-color, var(--nut-primary-color, #fa2c19)); + border-color: var(--nut-steps-finish-head-border-color, var(--nut-primary-color, #fa2c19)); +} +.nut-step.nut-step-finish .nut-step-icon.is-icon { + background-color: var(--nut-steps-finish-icon-text-color, var(--nut-white, #fff)); +} +.nut-step.nut-step-finish .nut-step-line { + background: var(--nut-steps-finish-line-background, var(--nut-primary-color, #fa2c19)); +} +.nut-step.nut-step-finish .nut-step-title { + color: var(--nut-steps-finish-title-color, var(--nut-primary-color, #fa2c19)); +} +.nut-step.nut-step-process .nut-step-head { + color: var(--nut-steps-process-head-color, var(--nut-white, #fff)); + border-color: var(--nut-steps-process-head-border-color, var(--nut-primary-color, #fa2c19)); +} +.nut-step.nut-step-process .nut-step-icon.is-icon { + background-color: var(--nut-steps-process-icon-text-color, var(--nut-primary-color, #fa2c19)); +} +.nut-step.nut-step-process .nut-step-title { + color: var(--nut-steps-process-title-color, var(--nut-primary-color, #fa2c19)); +} +.nut-step.nut-step-wait .nut-step-head { + color: var(--nut-steps-wait-head-color, #909ca4); + border-color: var(--nut-steps-wait-head-border-color, #909ca4); +} +.nut-step.nut-step-wait .nut-step-icon.is-icon { + background-color: var(--nut-steps-wait-icon-bg-color, #959fb1); + color: var(--nut-steps-wait-icon-text-color, #ffffff); +} +.nut-step.nut-step-wait .nut-step-icon.is-icon .nut-icon { + color: var(--nut-steps-wait-icon-color, var(--nut-white, #fff)); +} +.nut-step.nut-step-wait .nut-step-content { + color: var(--nut-steps-wait-content-color, #909ca4); +} .nut-steps-horizontal.nut-steps-dot .nut-step-head { margin-top: 7rpx; margin-bottom: 0; } +.nut-steps-horizontal.nut-steps-dot .nut-step-line { + top: 50%; + bottom: -50%; +} .nut-steps-horizontal.nut-steps-dot .nut-step-icon { width: 8rpx; height: 8rpx; @@ -11019,6 +9676,19 @@ wx-button { border-radius: 50%; box-sizing: content-box; } +.nut-steps-horizontal.nut-steps-dot .nut-step-wait .nut-step-icon { + background-color: var(--nut-steps-wait-icon-bg-color, #959fb1); +} +.nut-steps-horizontal.nut-steps-dot .nut-step-wait .nut-step-content { + color: var(--nut-steps-wait-content-color, #909ca4); +} +.nut-steps-horizontal.nut-steps-dot .nut-step-finish .nut-step-icon { + background-color: var(--nut-primary-color, #fa2c19); +} +.nut-steps-horizontal.nut-steps-dot .nut-step-process .nut-step-icon { + position: relative; + background-color: var(--nut-primary-color, #fa2c19); +} .nut-steps-horizontal.nut-steps-dot .nut-step-process .nut-step-icon::before { content: ''; display: inline-block; @@ -11033,6 +9703,10 @@ wx-button { border-radius: 50%; opacity: 0.23; } +.nut-steps-vertical .nut-step { + display: flex; + height: 33.34%; +} .nut-steps-vertical .nut-step-line { position: absolute; display: inline-block; @@ -11040,6 +9714,11 @@ wx-button { height: 100%; background: #909ca4; } +.nut-steps-vertical .nut-step-main { + display: inline-block; + padding-left: 6%; + text-align: left; +} .nut-steps-vertical.nut-steps-dot .nut-step-head { margin-top: 7rpx; margin-bottom: 0; @@ -11056,6 +9735,19 @@ wx-button { border-radius: 50%; box-sizing: content-box; } +.nut-steps-vertical.nut-steps-dot .nut-step-wait .nut-step-icon { + background-color: var(--nut-steps-wait-icon-bg-color, #959fb1); +} +.nut-steps-vertical.nut-steps-dot .nut-step-wait .nut-step-content { + color: var(--nut-steps-wait-content-color, #909ca4); +} +.nut-steps-vertical.nut-steps-dot .nut-step-finish .nut-step-icon { + background-color: var(--nut-primary-color, #fa2c19); +} +.nut-steps-vertical.nut-steps-dot .nut-step-process .nut-step-icon { + position: relative; + background-color: var(--nut-primary-color, #fa2c19); +} .nut-steps-vertical.nut-steps-dot .nut-step-process .nut-step-icon::before { content: ''; display: inline-block; @@ -11072,23 +9764,25 @@ wx-button { } .nut-swiper { position: relative; - display: -ms-flexbox; display: flex; transition-property: transform; box-sizing: content-box; overflow: hidden; cursor: grab; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } +.nut-swiper-inner { + display: flex; + height: 100%; +} +.nut-swiper-vertical { + flex-direction: column; +} .nut-swiper-pagination { - display: -ms-flexbox; display: flex; position: absolute; left: 50%; bottom: 12rpx; - -ms-transform: translate(-50%); transform: translate(-50%); } .nut-swiper-pagination .h5-i { @@ -11104,14 +9798,25 @@ wx-button { top: 50%; left: 12rpx; bottom: auto; - -ms-flex-direction: column; flex-direction: column; - -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-swiper-pagination-vertical .h5-i { margin-bottom: 5rpx; } +.nut-swiper-item { + height: 100%; +} +.nut-video { + width: 100%; + height: 100%; + position: relative; + display: flex; +} +.nut-video-player { + width: 100%; + background: #000; +} .nut-video .nut-video-mask { width: 100%; position: absolute; @@ -11120,21 +9825,20 @@ wx-button { right: 0; bottom: 60rpx; } +.nut-video .nut-video-mask.custom-touch { + bottom: 0; +} .nut-video .h5-video { width: 100%; height: 100%; - -o-object-fit: fill; object-fit: fill; } .nut-video-play-btn { width: 80rpx; height: 50rpx; margin-top: -25rpx; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; border: 0; background-color: rgba(0, 0, 0, 0.45098); @@ -11165,7 +9869,6 @@ wx-button { } .nut-video-controller { position: absolute; - display: -ms-flexbox; display: flex; left: 0; bottom: 0; @@ -11173,11 +9876,16 @@ wx-button { height: 35rpx; width: 100%; z-index: 11111111; - -ms-flex-align: center; align-items: center; opacity: 0; transition: all 1s; } +.nut-video-controller.nut-video-controller--show { + opacity: 1; +} +.nut-video-controller.nut-video-controller--hide { + opacity: 0; +} .nut-video-controller .nut-video-controller__playbtn { width: 18rpx; height: 18rpx; @@ -11212,7 +9920,6 @@ wx-button { width: 100%; margin: 0 5rpx; transition: all 0.2s ease-in; - -ms-flex: 1; flex: 1; } .nut-video-controller .nut-video-controller__progress .nut-video-controller__progress-value { @@ -11283,57 +9990,36 @@ wx-button { background-repeat: no-repeat; background-position: center; } -.nut-video-error .h5-p { - color: #fff; -} -.nut-image-preview-index { - position: fixed; - z-index: 2002; - top: 50rpx; - text-align: center; - left: 0; - right: 0; - background: transparent; - color: #fff; +.nut-image-preview-img { + width: 100%; + height: 100%; + object-fit: contain; } .nut-image-preview-index .arrow { position: absolute; left: 15rpx; - -ms-transform: rotate(180deg); transform: rotate(180deg); } -.nut-image-preview-close-icon { - position: fixed; - z-index: 2002; - top: 50rpx; - right: 15rpx; -} -.nut-image-preview-close-icon-right { - right: 10rpx; -} -.nut-image-preview-close-icon-left { - left: 10rpx; +.nut-image-preview-custom-pop { + height: 100%; + background: transparent !important; + display: flex; + align-items: center; + width: 100%; } -.nut-image-preview .popup-bg { - background: rgba(0, 0, 0, 0.90196); +.nut-image-preview-swiper .nut-swiper-item { + display: flex; + align-items: center; + justify-content: center; + height: 100%; } .nut-image-preview-swiper .nut-swiper-item .nut-video .h5-video { - -o-object-fit: contain; object-fit: contain; } -.nut-countup { - display: block; - padding: 5rpx 20rpx; - color: #000; - font-weight: 700; -} .nut-badge .nut-badge__icon { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; line-height: normal; - -ms-transform: var(--nut-badge-content-transform, translate(50%, -50%)); transform: var(--nut-badge-content-transform, translate(50%, -50%)); position: absolute; background: var(--nut-badge-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); @@ -11343,92 +10029,33 @@ wx-button { z-index: var(--nut-badge-z-index, 1); } .nut-badge .nut-badge__content { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-transform: var(--nut-badge-content-transform, translate(50%, -50%)); transform: var(--nut-badge-content-transform, translate(50%, -50%)); } -.nut-badge .nut-badge__content--sup { - position: absolute; - background: var(--nut-badge-background-color, linear-gradient(135deg, var(--nut-primary-color, #fa2c19) 0%, var(--nut-primary-color-end, #fa6419) 100%)); - padding: var(--nut-badge-padding, 0 5rpx); +.nut-avatar { + background-size: 100% 100%; + background-repeat: no-repeat; + background-position: center center; + display: inline-block; + position: relative; + flex: 0 0 auto; text-align: center; - border-radius: var(--nut-badge-border-radius, 14rpx); - font-size: var(--nut-badge-font-size, var(--nut-font-size-1, 12rpx)); - font-weight: 400; - color: var(--nut-badge-color, #fff); -} -.nut-badge .nut-badge__content--dot { - width: var(--nut-badge-dot-width, 7rpx); - height: var(--nut-badge-dot-height, 7rpx); - border-radius: var(--nut-badge-dot-border-radius, 7rpx); - padding: var(--nut-badge-dot-padding, 0rpx); -} -.nut-avatar .h5-img { - display: block; - width: 100%; - height: 100%; + vertical-align: top; } .nut-avatar .nut-icon { background-size: 100% 100%; position: absolute; top: 50%; left: 50%; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } -.nut-avatar-large { - width: var(--nut-avatar-large-width, 60rpx); - height: var(--nut-avatar-large-height, 60rpx); - line-height: var(--nut-avatar-large-height, 60rpx); -} -.nut-avatar-small { - width: var(--nut-avatar-small-width, 32rpx); - height: var(--nut-avatar-small-height, 32rpx); - line-height: var(--nut-avatar-small-height, 32rpx); -} -.nut-avatar-normal { - width: var(--nut-avatar-normal-width, 40rpx); - height: var(--nut-avatar-normal-height, 40rpx); - line-height: var(--nut-avatar-normal-height, 40rpx); -} -.nut-avatar-square { - border-radius: var(--nut-avatar-square, 5rpx); -} -.nut-skeleton .nut-skeleton-content .avatarClass { - margin-right: 20rpx; - background-color: var(--nut-skeleton-content-avatar-background-color, #efefef); -} -.nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockTitle, -.nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockLine { - width: 100%; - margin-bottom: 10rpx; - background-color: var(--nut-skeleton-content-line-background-color, #efefef); -} -.nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockTitle--round, -.nut-skeleton .nut-skeleton-content .nut-skeleton-content__line .nut-skeleton-blockLine--round { - border-radius: 10rpx; -} -.nut-skeleton .nut-skeleton-animation { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1; - background: var(--nut-skeleton-animation-background-color, linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.5) 50%, hsla(0, 0%, 100%, 0) 80%)); - background-repeat: no-repeat; - animation: backpos 2s ease-in-out 0s infinite; +.nut-skeleton .nut-skeleton-content { + display: flex; } -@keyframes backpos { - 0% { - background-position-x: -500rpx; - } - to { - background-position-x: calc(500rpx + 100%); - } +.nut-skeleton .nut-skeleton-content .nut-skeleton-content__line { + display: flex; + flex-direction: column; } .nut-collapse-item__border .nut-collapse-item__title::after { position: absolute; @@ -11439,16 +10066,12 @@ wx-button { bottom: 0; left: 16rpx; border-bottom: 1rpx solid #ebedf0; - -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .nut-collapse-item .nut-collapse-item__title { position: relative; - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; - -ms-flex-align: center; align-items: center; width: 100%; overflow: hidden; @@ -11459,261 +10082,48 @@ wx-button { background-color: #fff; box-sizing: border-box; } -.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-main-value .nut-collapse-item__title-main-icon { - top: 2rpx; +.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-main { + flex: 1; } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-icon { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; color: var(--nut-collapse-item-icon-color, #666666); transition: transform 0.3s; } .nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-icon--expanded { - -ms-transform: rotate(-180deg); transform: rotate(-180deg); } -.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-sub { - position: absolute; - top: 50%; - right: 65rpx; - margin-top: -12rpx; - color: var(--nut-collapse-item-sub-title-color, #666666); -} -.nut-collapse-item .nut-collapse-item__title .nut-collapse-item__title-label { - display: block; - color: #969799; - font-size: 12rpx; -} -.nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-wrapper__content, -.nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-extraWrapper__extraRender, -.nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-wrapper__content, -.nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-extraWrapper__extraRender { - display: block; - padding: var(--nut-collapse-wrapper-content-padding, 12rpx 26rpx); - color: var(--nut-collapse-wrapper-content-color, #666666); - font-size: var(--nut-collapse-wrapper-content-font-size, var(--nut-font-size-2, 14rpx)); - line-height: var(--nut-collapse-wrapper-content-line-height, 1.5); - background-color: var(--nut-collapse-wrapper-content-background-color, var(--nut-white, #fff)); -} -.nut-collapse-item .nut-collapse__item-wrapper .nut-collapse__item-wrapper__content--empty, -.nut-collapse-item .nut-collapse__item-extraWrapper .nut-collapse__item-wrapper__content--empty { - padding: var(--nut-collapse-wrapper-empty-content-padding, 0 26rpx); -} .nut-table { - display: -ms-flexbox; display: flex; width: 100%; - -ms-flex-direction: column; flex-direction: column; font-size: var(--nut-font-size-2, 14rpx); } -.nut-table__main__head__tr__th, -.nut-table__main__body__tr__th, -.nut-table__main__head__tr__td, -.nut-table__main__body__tr__td { - display: table-cell; - padding: var(--nut-table-cols-padding, 10rpx); -} .nut-table__main__head__tr__td__nodata, .nut-table__main__body__tr__td__nodata { - display: -ms-flexbox; display: flex; height: 50rpx; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; } -.nut-table__main__head__tr--border, -.nut-table__main__body__tr--border { - border: 1rpx solid var(--nut-table-border-color, #ececec); -} .nut-table__summary { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; height: 30rpx; padding: var(--nut-table-cols-padding, 10rpx); } .nut-table__nodata { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; height: 30rpx; padding: var(--nut-table-cols-padding, 10rpx); } -.nut-animate [class*='nut-animate-'] { - animation-duration: 0.5s; - animation-timing-function: ease-out; - animation-fill-mode: both; -} -.nut-animate .nut-animate-shake { - animation-name: shake; -} -.nut-animate .nut-animate-ripple { - animation-name: ripple; -} -.nut-animate .nut-animate-float { - position: relative; - animation-name: float-pop; -} -.nut-animate .nut-animate-breath { - animation-name: breath; - animation-duration: 2.7s; - animation-timing-function: ease-in-out; - animation-direction: alternate; -} -.nut-animate .nut-animate-slide-right { - animation-name: slide-right; -} -.nut-animate .nut-animate-slide-left { - animation-name: slide-left; -} -.nut-animate .nut-animate-slide-top { - animation-name: slide-top; -} -.nut-animate .nut-animate-slide-bottom { - animation-name: slide-bottom; -} .nut-animate .nut-animate-jump { - -ms-transform-origin: center center; transform-origin: center center; animation: jump 0.7s linear; } -.nut-animate .loop { - animation-iteration-count: infinite; -} -@keyframes shake { - 0%, - to { - transform: translate(0); - } - 10% { - transform: translate(-9rpx); - } - 20% { - transform: translate(8rpx); - } - 30% { - transform: translate(-7rpx); - } - 40% { - transform: translate(6rpx); - } - 50% { - transform: translate(-5rpx); - } - 60% { - transform: translate(4rpx); - } - 70% { - transform: translate(-3rpx); - } - 80% { - transform: translate(2rpx); - } - 90% { - transform: translate(-1rpx); - } -} -@keyframes ripple { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.1); - } -} -@keyframes breath { - 0% { - transform: scale(1); - } - 50% { - transform: scale(1.1); - } - to { - transform: scale(1); - } -} -@keyframes slide-right { - 0% { - opacity: 0; - transform: translate(100%); - } - to { - opacity: 1; - transform: translate(0); - } -} -@keyframes slide-left { - 0% { - opacity: 0; - transform: translate(-100%); - } - to { - opacity: 1; - transform: translate(0); - } -} -@keyframes slide-top { - 0% { - opacity: 0; - transform: translateY(-100%); - } - to { - opacity: 1; - transform: translateY(0); - } -} -@keyframes slide-bottom { - 0% { - opacity: 0; - transform: translateY(100%); - } - to { - opacity: 1; - transform: translateY(0); - } -} -@keyframes float-pop { - 25% { - top: 1rpx; - } - 50% { - top: 4rpx; - } - 75% { - top: 1rpx; - } -} -@keyframes jump { - 0% { - animation-timing-function: ease-in; - transform: rotate(0) translateY(0); - } - 25% { - animation-timing-function: ease-out; - transform: rotate(10deg) translateY(20rpx); - } - 50% { - animation-timing-function: ease-in; - transform: rotate(0) translateY(-10rpx); - } - 75% { - animation-timing-function: ease-out; - transform: rotate(-10deg) translateY(20rpx); - } - to { - animation-timing-function: ease-in; - transform: rotate(0) translateY(0); - } -} .nut-animate .nut-animate-twinkle::after, .nut-animate .nut-animate-twinkle::before { width: 60rpx; @@ -11727,242 +10137,113 @@ wx-button { margin-top: -15rpx; margin-right: -30rpx; z-index: 1; - -ms-transform: scale(0); transform: scale(0); animation: twinkle 2s ease-out infinite; } .nut-animate .nut-animate-twinkle::after { animation-delay: 0.4s; } -@keyframes twinkle { - 0% { - transform: scale(0); - } - 50%, - to { - transform: scale(1.4); - opacity: 0; - } -} .nut-animate .nut-animate-flicker::after { width: 100rpx; height: 60rpx; position: absolute; - left: 0; - top: 0; - opacity: 0.73; - content: ''; - background-image: -webkit-linear-gradient(344deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%); - background-image: linear-gradient(106deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%); - animation: flicker 1.5s linear infinite; - -ms-transform: skew(-20deg); - transform: skew(-20deg); - filter: blur(3rpx); -} -@keyframes flicker { - 0% { - transform: translate(-100rpx) skew(-20deg); - } - 40%, - to { - transform: translate(150rpx) skew(-20deg); - } -} -.nut-ellipsis__copy { - position: absolute; - top: -999999rpx; -} -.nut-trend-arrow { - display: inline-block; - font-size: var(--nut-trendarrow-font-size, 14rpx); -} -.nut-trend-arrow-icon-before { - margin-right: var(--nut-trendarrow-before-icon-margin, 4rpx); -} -.nut-trend-arrow-icon-after { - margin-left: var(--nut-trendarrow-before-icon-margin, 4rpx); -} -.nut-popover .nut-popover-arrow { - position: absolute; - width: 0; - height: 0; - border: 8rpx solid transparent; + left: 0; + top: 0; + opacity: 0.73; + content: ''; + background-image: linear-gradient(106deg, #e8e0ff00 24%, #e8e0ff 91%); + animation: flicker 1.5s linear infinite; + transform: skew(-20deg); + filter: blur(3rpx); } -.nut-popover .nut-popover-arrow-top { - bottom: 0; - border-top-color: var(--nut-popover-white-background-color, rgb(255, 255, 255)); - border-bottom-width: 0; - margin-bottom: -8rpx; +.nut-ellipsis { + display: flex; } -.nut-popover .nut-popover-arrow-bottom { +.nut-watermark { + position: absolute; + z-index: var(--nut-watermark-z-index, 2000); top: 0; - border-bottom-color: var(--nut-popover-white-background-color, rgb(255, 255, 255)); - border-top-width: 0; - margin-top: -8rpx; + right: 0; + bottom: 0; + left: 0; + pointer-events: none; + background-repeat: repeat; } .nut-popover .nut-popover-arrow-bottom.nut-popover-arrow--bottom { left: 50%; - -ms-transform: translate(-50%); transform: translate(-50%); } .nut-popover .nut-popover-arrow-bottom.nut-popover-arrow--bottom-start { left: 16rpx; - -ms-transform: translate(0); transform: translate(0); } .nut-popover .nut-popover-arrow-bottom.nut-popover-arrow--bottom-end { right: 16rpx; - -ms-transform: translate(0); transform: translate(0); } -.nut-popover .nut-popover-arrow-left { - right: 0; - border-left-color: var(--nut-popover-white-background-color, rgb(255, 255, 255)); - border-right-width: 0; - margin-right: -8rpx; -} .nut-popover .nut-popover-arrow-left.nut-popover-arrow--left { top: 50%; - -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-popover .nut-popover-arrow-left.nut-popover-arrow--left-start { top: 16rpx; - -ms-transform: translateY(0); transform: translateY(0); } .nut-popover .nut-popover-arrow-left.nut-popover-arrow--left-end { bottom: 16rpx; - -ms-transform: translateY(0); transform: translateY(0); } -.nut-popover .nut-popover-arrow-right { - left: 0; - border-right-color: var(--nut-popover-white-background-color, rgb(255, 255, 255)); - border-left-width: 0; - margin-left: -8rpx; -} .nut-popover .nut-popover-arrow-right.nut-popover-arrow--right { top: 50%; - -ms-transform: translateY(-50%); transform: translateY(-50%); } .nut-popover .nut-popover-arrow-right.nut-popover-arrow--right-start { top: 16rpx; - -ms-transform: translateY(0); transform: translateY(0); } .nut-popover .nut-popover-arrow-right.nut-popover-arrow--right-end { bottom: 16rpx; - -ms-transform: translateY(0); transform: translateY(0); } -.nut-popover .nut-popover-content { - position: absolute; - z-index: 9999; - background: #fff; - border-radius: 5rpx; - font-size: 14rpx; - font-weight: 400; - color: #333; - box-shadow: 0 2rpx 12rpx rgba(50, 50, 51, 0.12157); - opacity: 1; - transition: opacity 0.15s; - transition: - opacity 0.15s, - transform 0.15s; - max-height: none; - max-height: initial; - overflow-y: visible; - overflow-y: initial; -} .nut-popover .nut-popover-content .nut-popover-menu-item { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; padding: 8rpx; border-bottom: 1rpx solid var(--nut-popover-border-bottom-color, rgb(229, 229, 229)); } -.nut-popover .nut-popover-content .nut-popover-menu-item:first-child { - margin-top: 15rpx; -} -.nut-popover .nut-popover-content .nut-popover-menu-item:last-child { - margin-bottom: 2rpx; - border-bottom: none; -} -.nut-popover .nut-popover-content .nut-popover-menu-item .nut-popover-item-img { - vertical-align: top; - margin-right: 3rpx; -} .nut-popover .nut-popover-content--top .nut-popover-arrow--top { left: 50%; - -ms-transform: translate(-50%); transform: translate(-50%); } .nut-popover .nut-popover-content--top-end .nut-popover-arrow--top-end { right: 16rpx; - -ms-transform: translate(0); transform: translate(0); } .nut-popover .nut-popover-content--top-start .nut-popover-arrow--top-start { left: 16rpx; - -ms-transform: translate(0); transform: translate(0); } .nut-popover-enter-from, .nut-popover-leave-active { - -ms-transform: scale(0.8); transform: scale(0.8); opacity: 0; } -.nut-tour-mask { - position: fixed; - width: 100rpx; - height: 50rpx; - box-shadow: 0 0 0 150vh rgba(0, 0, 0, 0.50196); - border-radius: 10rpx; - z-index: 1002; -} -.nut-tour-content { - display: block; - padding: 10rpx 12rpx; - min-width: 200rpx; -} -.nut-tour-content-top-close { - width: 10rpx; - height: 10rpx; +.nut-popover-enter-active { + transition-timing-function: ease-out; } -.nut-tour-content-inner { - margin: 10rpx 0; - font-size: 14rpx; +.nut-popover-leave-active { + transition-timing-function: ease-in; } .nut-tour-content-bottom { margin-top: 10rpx; - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; } -.nut-tour-content-bottom-init { - margin-left: 10rpx; -} -.nut-tour-content-bottom-operate-btn { - display: inline-block; - border: 1rpx solid var(--nut-disable-color, #cccccc); - margin-left: 4rpx; - padding: 2rpx 4rpx; - font-size: 12rpx; - border-radius: 4rpx; - color: var(--nut-text-color, #808080); -} -.nut-elevator__list__item { - display: block; - font-size: var(--nut-elevator-list-item-font-size, 12rpx); - color: var(--nut-elevator-list-item-font-color, #333333); +.nut-tour-content-bottom-operate { + display: flex; + justify-content: flex-end; } .nut-elevator__list__item__code { - display: -ms-flexbox; display: flex; position: relative; height: var(--nut-elevator-list-item-code-height, 35rpx); @@ -11973,229 +10254,81 @@ wx-button { font-weight: var(--nut-elevator-list-item-code-font-weight, 500); box-sizing: border-box; } -.nut-elevator__list__item__code::after { - content: ' '; - width: var(--nut-elevator-list-item-code-after-width, 100%); - height: var(--nut-elevator-list-item-code-after-height, 1rpx); - position: absolute; - left: 0; - bottom: 0; - background-color: var(--nut-elevator-list-item-code-after-bg-color, #f5f5f5); -} .nut-elevator__list__item__name { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; padding: var(--nut-elevator-list-item-name-padding, 0 20rpx); height: var(--nut-elevator-list-item-name-height, 30rpx); line-height: var(--nut-elevator-list-item-name-line-height, 30rpx); } -.nut-elevator__list__fixed { - width: 100%; - position: absolute; - top: 0; - left: 0; - padding: var(--nut-elevator-list-item-code-padding, 0 20rpx); - height: var(--nut-elevator-list-item-code-height, 35rpx); - line-height: var(--nut-elevator-list-item-code-line-height, 35rpx); - font-size: var(--nut-elevator-list-item-code-font-size, 14rpx); - color: var(--nut-elevator-list-fixed-color, var(--nut-primary-color, #fa2c19)); - font-weight: var(--nut-elevator-list-item-code-font-weight, 500); - background-color: var(--nut-elevator-list-fixed-bg-color, var(--nut-white, #fff)); - box-sizing: border-box; - box-shadow: var(--nut-elevator-list-fixed-box-shadow, 0 0 10rpx #eee); - z-index: 1; -} .nut-elevator__code--current { position: var(--nut-elevator-list-item-code-current-position, absolute); right: var(--nut-elevator-list-item-code-current-right, 60rpx); top: var(--nut-elevator-list-item-code-current-top, 50%); - -ms-transform: var(--nut-elevator-list-item-code-current-transform, translateY(-50%)); transform: var(--nut-elevator-list-item-code-current-transform, translateY(-50%)); width: var(--nut-elevator-list-item-code-current-width, 45rpx); height: var(--nut-elevator-list-item-code-current-height, 45rpx); line-height: var(--nut-elevator-list-item-code-current-line-height, 45rpx); border-radius: var(--nut-elevator-list-item-code-current-border-radius, 50%); - background: var(--nut-elevator-list-item-code-current-bg-color, #fff); - box-shadow: var(--nut-elevator-list-item-code-current-box-shadow, 0 3rpx 3rpx 1rpx rgb(240, 240, 240)); - text-align: var(--nut-elevator-list-item-code-current-text-align, center); -} -.nut-elevator__bars { - position: var(--nut-elevator-list-item-bars-position, absolute); - right: var(--nut-elevator-list-item-bars-right, 8rpx); - top: var(--nut-elevator-list-item-bars-top, 50%); - -ms-transform: var(--nut-elevator-list-item-bars-transform, translateY(-50%)); - transform: var(--nut-elevator-list-item-bars-transform, translateY(-50%)); - padding: var(--nut-elevator-list-item-bars-padding, 15rpx 0); - background-color: var(--nut-elevator-list-item-bars-background-color, #eeeff2); - border-radius: var(--nut-elevator-list-item-bars-border-radius, 6rpx); - text-align: var(--nut-elevator-list-item-bars-text-align, center); - z-index: var(--nut-elevator-list-item-bars-z-index, 1); -} -.nut-elevator__bars__inner__item { - display: block; - padding: var(--nut-elevator-list-item-bars-inner-item-padding, 3rpx); - font-size: var(--nut-elevator-list-item-bars-inner-item-font-size, 10rpx); -} -.nut-theme-dark .nut-address .nut-address__exist .nut-address__exist-choose, -.nut-theme-dark .nut-address-custom-buttom { - border-top: 1rpx solid var(--nut-dark-background, #131313); -} -.nut-address__header { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - justify-content: space-between; - -ms-flex-align: center; - align-items: center; - height: 68rpx; - padding: 0 20rpx; - text-align: center; - font-weight: 700; - color: #333; -} -.nut-address__header__title { - display: block; - color: var(--nut-address-header-title-color, #262626); - font-size: var(--nut-address-header-title-font-size, 18rpx); -} -.nut-address .nut-address__custom .nut-address__region { - position: relative; - padding: 0 20rpx; - display: -ms-flexbox; - display: flex; - font-size: var(--nut-address-region-tab-font-size, 13rpx); - color: var(--nut-address-region-tab-color, #1d1e1e); -} -.nut-address .nut-address__custom .nut-address__region .nut-address__region-item { - position: relative; - min-width: 2rpx; - margin-right: 30rpx; - display: block; -} -.nut-address .nut-address__custom .nut-address__region .nut-address__region-item view { - display: block; - max-width: 100rpx; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.nut-address .nut-address__custom .nut-address__region .nut-address__region-item .h5-span { - display: inline-block; - max-width: 100rpx; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.nut-address .nut-address__custom .nut-address__region .nut-address__region-item .nut-address__region-line--mini { - position: absolute; - bottom: -10rpx; - left: 0; - display: inline-block; - margin-top: 5rpx; - width: 0; - height: 3rpx; - background: var(--nut-address-region-tab-line, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); - transition: 0.2s all linear; -} -.nut-address .nut-address__custom .nut-address__region .nut-address__region-item .nut-address__region-line--mini.active { - width: 26rpx; -} -.nut-address .nut-address__custom .nut-address__region .nut-address__region-line { - position: absolute; - bottom: -10rpx; - left: 20rpx; - display: inline-block; - margin-top: 5rpx; - width: 26rpx; - height: 3rpx; - background: var(--nut-address-region-tab-line, linear-gradient(90deg, var(--nut-primary-color, #fa2c19) 0%, rgba(250, 44, 25, 0.15) 100%)); - transition: 0.2s all linear; - border-radius: var(--nut-address-region-tab-line-border-radius, 0); - opacity: var(--nut-address-region-tab-line-opacity, 1); + background: var(--nut-elevator-list-item-code-current-bg-color, #fff); + box-shadow: var(--nut-elevator-list-item-code-current-box-shadow, 0 3rpx 3rpx 1rpx rgb(240, 240, 240)); + text-align: var(--nut-elevator-list-item-code-current-text-align, center); } -.nut-address .nut-address__custom .nut-address__detail { - display: block; - margin: 20rpx 20rpx 0; +.nut-elevator__bars { + position: var(--nut-elevator-list-item-bars-position, absolute); + right: var(--nut-elevator-list-item-bars-right, 8rpx); + top: var(--nut-elevator-list-item-bars-top, 50%); + transform: var(--nut-elevator-list-item-bars-transform, translateY(-50%)); + padding: var(--nut-elevator-list-item-bars-padding, 15rpx 0); + background-color: var(--nut-elevator-list-item-bars-background-color, #eeeff2); + border-radius: var(--nut-elevator-list-item-bars-border-radius, 6rpx); + text-align: var(--nut-elevator-list-item-bars-text-align, center); + z-index: var(--nut-elevator-list-item-bars-z-index, 1); } -.nut-address .nut-address__custom .nut-address__detail .nut-address__detail-list { - height: 270rpx; - box-sizing: border-box; - padding: 0; +.nut-address__header { + display: flex; + justify-content: space-between; + align-items: center; + height: 68rpx; + padding: 0 20rpx; + text-align: center; + font-weight: 700; + color: #333; +} +.nut-address .nut-address__custom .nut-address__region { + position: relative; + padding: 0 20rpx; + display: flex; + font-size: var(--nut-address-region-tab-font-size, 13rpx); + color: var(--nut-address-region-tab-color, #1d1e1e); } .nut-address .nut-address__custom .nut-address__detail .nut-address__detail-list .nut-address__detail-item { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; font-size: var(--nut-address-region-item-font-size, var(--nut-font-size-1, 12rpx)); color: var(--nut-address-region-item-color, #333); } .nut-address .nut-address__custom .nut-address__detail .nut-address__detail-list .nut-address__detail-item > .h5-div { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; margin: 10rpx 0; } .nut-address .nut-address__custom .nut-address__elevator-group { - display: -ms-flexbox; display: flex; margin-top: 20rpx; } -.nut-address .nut-address__exist { - display: block; - margin-top: 15rpx; -} -.nut-address .nut-address__exist .nut-address__exist-group { - padding: 15rpx 20rpx 0; - height: 279rpx; - overflow-y: scroll; -} .nut-address .nut-address__exist .nut-address__exist-group .nut-address__exist-group-list .nut-address__exist-group-item { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; margin-bottom: 20rpx; font-size: var(--nut-font-size-1, 12rpx); line-height: 14rpx; color: #333; } -.nut-address .nut-address__exist .nut-address__exist-group .nut-address__exist-group-list .nut-address__exist-group-item .exist-item-icon { - margin-right: var(--nut-address-item-margin-right, 9rpx); - color: var(--nut-address-icon-color, var(--nut-primary-color, #fa2c19)) !important; -} .nut-address .nut-address__exist .nut-address__exist-group .nut-address__exist-group-list .nut-address__exist-group-item .h5-span { display: inline-block; - -ms-flex: 1; flex: 1; } -.nut-address .nut-address__exist .nut-address__exist-choose { - width: 100%; - height: 54rpx; - padding: 6rpx 0 0; - border-top: 1rpx solid #f2f2f2; -} -.nut-address .nut-address__exist .nut-address__exist-choose .nut-address__exist-choose-btn { - width: 90%; - height: 42rpx; - line-height: 42rpx; - margin: auto; - text-align: center; - background: var( - --nut-button-primary-background-color, - linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%) - ); - border-radius: 21rpx; - font-size: 15rpx; - color: var(--nut-white, #fff); -} -.nut-address-select-icon { - margin-right: var(--nut-address-item-margin-right, 9rpx); - color: var(--nut-address-icon-color, var(--nut-primary-color, #fa2c19)) !important; -} .nut-barrage__item { width: 100rpx; display: block; @@ -12206,42 +10339,18 @@ wx-button { font-size: 12rpx; text-align: center; white-space: pre; - -ms-transform: translate(100%); transform: translate(100%); - background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.14902)), to(rgba(0, 0, 0, 0))); - background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.14902), rgba(0, 0, 0, 0)); - background: linear-gradient(to right, rgba(0, 0, 0, 0.14902), rgba(0, 0, 0, 0)); -} -.nut-barrage__item.move { - will-change: transform; - animation-name: moving; - animation-timing-function: linear; - animation-play-state: running; -} -@keyframes moving { - 0% { - transform: translate(100%); - } - to { - transform: translate(var(--move-distance)); - } + background: linear-gradient(to right, #00000026, #0000); } .nut-signature .nut-signature-inner { height: 256rpx; margin-bottom: 32rpx; border: 1rpx solid #dadada; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; } -.nut-signature .nut-signature-btn { - margin-right: 15rpx; -} .nut-time-select__title { - display: -ms-flexbox; display: flex; width: var(--nut-timeselect-title-width, 100%); height: var(--nut-timeselect-title-height, 50rpx); @@ -12251,145 +10360,58 @@ wx-button { color: var(--nut-timeselect-title-color, var(--nut-title-color, #1a1a1a)); text-align: center; } -.nut-time-select__title__fixed { - width: 100%; - height: 50rpx; -} .nut-time-select__content { width: 100%; height: calc(100% - var(--nut-timeselect-title-height, 50rpx) - 10rpx); - display: -ms-flexbox; display: flex; } -.nut-time-select__content__pannel { - width: 140rpx; - height: 100%; - overflow: auto; - background-color: var(--nut-timeselect-pannel-bg-color, #f6f7f9); -} -.nut-time-select__content__detail { - width: calc(100% - 140rpx); - height: 100%; - overflow-y: auto; - overflow-x: hidden; -} .nut-time-pannel { - display: -ms-flexbox; display: flex; width: var(--nut-timeselect-timepannel-width, 140rpx); height: var(--nut-timeselect-timepannel-height, 40rpx); padding: var(--nut-timeselect-timepannel-padding, 15rpx); - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; color: var(--nut-timeselect-timepannel-text-color, var(--nut-title-color2, #666666)); font-size: var(--nut-timeselect-timepannel-font-size, var(--nut-font-size-2, 14rpx)); box-sizing: border-box; } .nut-time-detail { - display: -ms-flexbox; display: flex; width: 100%; padding: var(--nut-timeselect-timedetail-padding, 0 5rpx 50rpx 13rpx); } -.nut-time-detail__detail__list__item { - display: inline-block; - width: var(--nut-timeselect-timedetail-item-width, 100rpx); - height: var(--nut-timeselect-timedetail-item-height, 50rpx); - line-height: var(--nut-timeselect-timedetail-item-line-height, 50rpx); - text-align: center; - margin-right: 10rpx; - margin-bottom: 10rpx; - background-color: var(--nut-timeselect-timedetail-item-bg-color, #f6f7f9); - border-radius: var(--nut-timeselect-timedetail-item-border-radius, 5rpx); - color: var(--nut-timeselect-timedetail-item-text-color, #333333); - font-size: var(--nut-timeselect-timedetail-item-text-font-size, var(--nut-font-size-2, 14rpx)); - border: 1rpx solid transparent; - font-weight: 700; -} -.nut-time-detail__detail__list__item--curr { - background-color: transparent; - border: 1rpx solid var(--nut-timeselect-timedetail-item-cur-border, var(--nut-primary-color, #fa2c19)); - color: var(--nut-timeselect-timedetail-item-cur-text-color, var(--nut-primary-color, #fa2c19)); - position: relative; -} -.nut-time-detail__detail--afternoon { - margin-top: 30rpx; -} .nut-popup-slide-top-enter-from, .nut-popup-slide-top-leave-active { - -ms-transform: translateY(-100%); transform: translateY(-100%); } .nut-popup-slide-right-enter-from, .nut-popup-slide-right-leave-active { - -ms-transform: translate(100%); transform: translate(100%); } .nut-popup-slide-bottom-enter-from, .nut-popup-slide-bottom-leave-active { - -ms-transform: translateY(100%); transform: translateY(100%); } .nut-popup-slide-left-enter-from, .nut-popup-slide-left-leave-active { - -ms-transform: translate(-100%); transform: translate(-100%); } .nut-popup--center { top: 50%; left: 50%; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } -.nut-popup--center.round { - border-radius: var(--nut-popup-border-radius, 20rpx); -} -.nut-popup--bottom.round { - border-radius: var(--nut-popup-border-radius, 20rpx) var(--nut-popup-border-radius, 20rpx) 0 0; -} -.nut-popup--right.round { - border-radius: var(--nut-popup-border-radius, 20rpx) 0 0 var(--nut-popup-border-radius, 20rpx); -} -.nut-popup--left.round { - border-radius: 0 var(--nut-popup-border-radius, 20rpx) var(--nut-popup-border-radius, 20rpx) 0; -} -.nut-popup--top.round { - border-radius: 0 0 var(--nut-popup-border-radius, 20rpx) var(--nut-popup-border-radius, 20rpx); -} -.nut-popup__close-icon { - position: absolute !important; - z-index: 1; - color: #969799; - font-size: 18rpx; - cursor: pointer; - width: 30rpx; - height: 30rpx; - line-height: 30rpx; - text-align: center; -} -.nut-popup__close-icon--top-left { - top: var(--nut-popup-close-icon-margin, 16rpx); - left: var(--nut-popup-close-icon-margin, 16rpx); -} -.nut-popup__close-icon--top-right { - top: var(--nut-popup-close-icon-margin, 16rpx); - right: var(--nut-popup-close-icon-margin, 16rpx); -} -.nut-popup__close-icon--bottom-left { - bottom: var(--nut-popup-close-icon-margin, 16rpx); - left: var(--nut-popup-close-icon-margin, 16rpx); -} -.nut-popup__close-icon--bottom-right { - right: var(--nut-popup-close-icon-margin, 16rpx); - bottom: var(--nut-popup-close-icon-margin, 16rpx); +.nut-sku { + height: 100%; + display: flex; + flex-direction: column; + padding: 0; + background: var(--nut-white, #fff); } .nut-sku-header { height: 100rpx; - display: -ms-flexbox; display: flex; - -ms-flex-negative: 0; flex-shrink: 0; margin-top: 18rpx; padding: 0 18rpx; @@ -12397,29 +10419,30 @@ wx-button { .nut-sku-header .nut-sku-header-img { width: var(--nut-sku-product-img-width, 100rpx); height: var(--nut-sku-product-img-height, var(--nut-sku-product-img-width, 100rpx)); - -ms-flex-negative: 0; flex-shrink: 0; margin-right: 12rpx; border-radius: var(--nut-sku-product-img-border-radius, 0); } -.nut-sku-header-right-extra { - font-size: 12rpx; - color: var(--nut-text-color, #808080); +.nut-sku-header-right { + flex: 1; + display: flex; + flex-direction: column; + justify-content: flex-end; } .nut-sku-content { - -ms-flex: 1; flex: 1; overflow-y: auto; overflow-x: hidden; margin-top: 24rpx; padding: 0 18rpx; } -.nut-sku-select-item-title { - height: 13rpx; - font-weight: var(--nut-sku-spec-title-font-weight, bold); - font-size: var(--nut-sku-spec-title-font-size, 13rpx); - color: var(--nut-sku-spec-title-color, var(--nut-black, #000)); - margin-bottom: var(--nut-sku-spec-title-margin-bottom, 18rpx); +.nut-sku-select-item { + display: flex; + flex-direction: column; +} +.nut-sku-select-item-skus { + display: flex; + flex-wrap: wrap; } .nut-sku-select-item-skus-sku { margin-right: var(--nut-sku-spec-margin-right, 12rpx); @@ -12429,79 +10452,32 @@ wx-button { border-radius: 15rpx; font-size: var(--nut-sku-spec-font-size, 11rpx); color: var(--nut-sku-spec-color, var(--nut-black, #000)); - -ms-flex-negative: 0; - flex-shrink: 0; - margin-bottom: 12rpx; - background: var(--nut-sku-spec-background, rgb(242, 242, 242)); - border: 1rpx solid rgb(242, 242, 242); -} -.nut-sku-select-item-skus-sku.active { - background: transparent; - border: var(--nut-sku-item-border, 1rpx solid var(--nut-primary-color, #fa2c19)); - color: var(--nut-primary-color, #fa2c19); - position: relative; -} -.nut-sku-select-item-skus-sku.active::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 15rpx; - background-color: var(--nut-sku-item-active-bg, var(--nut-primary-color, #fa2c19)); - opacity: 0.15; - content: ''; -} -.nut-sku-select-item-skus-sku.disable { - color: var(--nut-text-color, #808080); - text-decoration: var(--nut-sku-item-disable-line, line-through); + flex-shrink: 0; + margin-bottom: 12rpx; + background: var(--nut-sku-spec-background, rgb(242, 242, 242)); + border: 1rpx solid rgb(242, 242, 242); } .nut-sku-stepper { - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; margin: 10rpx 0 30rpx; } -.nut-sku-stepper-title { - font-weight: 700; - font-size: 13rpx; - color: var(--nut-black, #000); - margin-right: 12rpx; -} .nut-sku-stepper-limit { - -ms-flex: 1; flex: 1; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; font-size: 12rpx; color: var(--nut-text-color, #808080); } -.nut-sku-stepper-count-lowestBuy { - font-size: 12rpx; - color: var(--nut-primary-color, #fa2c19); -} -.nut-sku-operate-desc { - display: block; - width: 100%; - padding: 10rpx 0; - text-align: center; - background: #fbf9da; - color: #de6a1c; - font-size: 12rpx; +.nut-sku-stepper-count { + display: flex; + align-items: center; } .nut-sku-operate-btn { height: var(--nut-sku-operate-btn-height, 54rpx); width: 100%; - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; - -ms-flex-align: center; align-items: center; background: var(--nut-white, #fff); text-align: center; @@ -12509,227 +10485,61 @@ wx-button { box-sizing: border-box; border-top: var(--nut-sku-operate-btn-border-top, 0); } -.nut-sku-operate-btn-item { - width: 100%; - height: var(--nut-sku-operate-btn-item-height, 40rpx); - line-height: var(--nut-sku-operate-btn-item-line-height, var(--nut-sku-operate-btn-item-height, 40rpx)); - margin-right: 18rpx; - background: var(--nut-sku-opetate-bg-default, linear-gradient(90deg, var(--nut-primary-color, #fa2c19), var(--nut-primary-color-end, #fa6419) 100%)); - border-radius: 21rpx; - font-size: var(--nut-sku-operate-btn-item-font-size, 15rpx); - font-weight: var(--nut-sku-operate-btn-item-font-weight, normal); - color: var(--nut-white, #fff); -} -.nut-price--strike [class*='nut-price'] { - text-decoration: line-through; -} -.nut-price--symbol { - display: inline-block; - font-size: var(--nut-font-size-3, 16rpx); -} -.nut-price--large, -.nut-price--point { - display: inline-block; - font-size: var(--nut-price-big-size, 24rpx); -} -.nut-price--decimal-large { - display: inline-block; - font-size: var(--nut-price-decimal-big-size, 18rpx); -} -.nut-price--symbol-large { - display: inline-block; - font-size: var(--nut-price-symbol-big-size, 18rpx); -} -.nut-price--normal { - display: inline-block; - font-size: var(--nut-price-medium-size, 16rpx); -} -.nut-price--decimal-normal { - display: inline-block; - font-size: var(--nut-price-decimal-medium-size, 14rpx); -} -.nut-price--symbol-normal { - display: inline-block; - font-size: var(--nut-price-symbol-medium-size, 14rpx); -} -.nut-price--small { - display: inline-block; - font-size: var(--nut-price-small-size, 12rpx); -} -.nut-price--decimal-small { - display: inline-block; - font-size: var(--nut-price-decimal-small-size, 10rpx); -} -.nut-price--symbol-small { - display: inline-block; - font-size: var(--nut-price-symbol-small-size, 10rpx); -} .nut-tag { padding: 0 4rpx; - display: -ms-inline-flexbox; display: inline-flex; - -ms-flex-align: center; align-items: center; font-size: var(--nut-tag-font-size, 12rpx); border-radius: var(--nut-tag-default-border-radius, 4rpx); height: var(--nut-tag-height, auto); } -.nut-tag--default { - color: var(--nut-tag-default-color, #ffffff); - background: var(--nut-tag-default-background-color, #000000); - border: var(--nut-tag-border-width, 1rpx) solid transparent; -} -.nut-tag--default.nut-tag--plain { - color: var(--nut-tag-default-background-color, #000000); - border: var(--nut-tag-border-width, 1rpx) solid var(--nut-tag-default-background-color, #000000); -} -.nut-tag--primary { - color: var(--nut-tag-default-color, #ffffff); - background: var(--nut-tag-primary-background-color, #3460fa); - border: var(--nut-tag-border-width, 1rpx) solid transparent; -} -.nut-tag--primary.nut-tag--plain { - color: var(--nut-tag-primary-background-color, #3460fa); - border: var(--nut-tag-border-width, 1rpx) solid var(--nut-tag-primary-background-color, #3460fa); -} -.nut-tag--success { - color: var(--nut-tag-default-color, #ffffff); - background: var(--nut-tag-success-background-color, #4fc08d); - border: var(--nut-tag-border-width, 1rpx) solid transparent; -} -.nut-tag--success.nut-tag--plain { - color: var(--nut-tag-success-background-color, #4fc08d); - border: var(--nut-tag-border-width, 1rpx) solid var(--nut-tag-success-background-color, #4fc08d); -} -.nut-tag--danger { - color: var(--nut-tag-default-color, #ffffff); - background: var(--nut-tag-danger-background-color, linear-gradient(135deg, rgb(242, 20, 12) 0%, rgb(232, 34, 14) 70%, rgb(242, 77, 12) 100%)); - border: var(--nut-tag-border-width, 1rpx) solid transparent; -} -.nut-tag--danger.nut-tag--plain { - color: var(--nut-tag-danger-background-color-plain, #df3526); - border: var(--nut-tag-border-width, 1rpx) solid var(--nut-tag-danger-background-color-plain, #df3526); -} -.nut-tag--warning { - color: var(--nut-tag-default-color, #ffffff); - background: var(--nut-tag-warning-background-color, #f3812e); - border: var(--nut-tag-border-width, 1rpx) solid transparent; -} -.nut-tag--warning.nut-tag--plain { - color: var(--nut-tag-warning-background-color, #f3812e); - border: var(--nut-tag-border-width, 1rpx) solid var(--nut-tag-warning-background-color, #f3812e); -} -.nut-tag--round { - border-radius: var(--nut-tag-round-border-radius, 8rpx); -} -.nut-tag--mark { - border-radius: 0 12rpx 12rpx 0; -} -.nut-tag--close { - margin-left: 4rpx; - cursor: pointer; +.nut-card { + width: 100%; + display: flex; } .nut-card .nut-card__left { width: 120rpx; height: 120rpx; - -ms-flex-negative: 0; flex-shrink: 0; background-color: var(--nut-card-left-background-color, inherit); border-radius: var(--nut-card-left-border-radius, 0); } -.nut-card .nut-card__left > .h5-img { - display: block; - width: 100%; - height: 100%; -} .nut-card .nut-card__right { - -ms-flex: 1; flex: 1; padding: 0 10rpx 8rpx; } -.nut-card .nut-card__right .nut-card__right__title { - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - word-break: break-all; - line-height: 1.5; - font-size: 14rpx; -} .nut-card .nut-card__right .nut-card__right__price { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; height: 18rpx; line-height: 18rpx; margin-top: 9rpx; } -.nut-card .nut-card__right .nut-card__right__price .nut-price .nut-price--symbol-large { - font-size: 12rpx; -} -.nut-card .nut-card__right .nut-card__right__price .nut-price .nut-price--large { - font-size: 18rpx; -} -.nut-card .nut-card__right .nut-card__right__price .nut-price .nut-price--decimal-large { - font-size: 12rpx; -} -.nut-card .nut-card__right .nut-card__right__price .nut-card__right__price__origin.nut-price { - margin-left: 2rpx; - color: #d2a448; -} -.nut-card .nut-card__right .nut-card__right__price .nut-card__right__price__origin.nut-price .nut-price--symbol-large, -.nut-card .nut-card__right .nut-card__right__price .nut-card__right__price__origin.nut-price .nut-price--large, -.nut-card .nut-card__right .nut-card__right__price .nut-card__right__price__origin.nut-price .nut-price--decimal-large { - font-size: 12rpx; -} .nut-card .nut-card__right .nut-card__right__other { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; padding: 5rpx 0 2rpx; } -.nut-card .nut-card__right .nut-card__right__other .nut-tag { - border: none; - padding: 0 2rpx; - margin-right: 5rpx; - font-size: var(--nut-card-font-size-0, var(--nut-font-size-0, 10rpx)); -} .nut-card .nut-card__right .nut-card__right__shop { - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; - -ms-flex-align: center; align-items: center; margin-top: 4rpx; } -.nut-card .nut-card__right .nut-card__right__shop .nut-card__right__shop__name { - line-height: 1.5; - color: #999; - font-size: 12rpx; -} -.nut-theme-dark .nut-input-number .h5-input, -.nut-theme-dark .nut-input-number__text--readonly { - background-color: var(--nut-dark-background, #131313); - color: var(--nut-dark-color, var(--nut-white, #fff)); - border: 1rpx solid var(--nut-dark-color-gray, var(--nut-text-color, #808080)); -} -.nut-theme-dark .nut-input-number--disabled .h5-input { - color: var(--nut-dark-color-gray, var(--nut-text-color, #808080)); -} -.nut-input-number--disabled .h5-input { - color: var(--nut-inputnumber-icon-void-color, var(--nut-disable-color, #cccccc)); -} -.nut-input-number__icon .nut-icon { - width: var(--nut-inputnumber-icon-size, 20rpx); - height: var(--nut-inputnumber-icon-size, 20rpx); - font-size: var(--nut-inputnumber-icon-size, 20rpx); +.nut-input-number { + display: var(--nut-inputnumber-display, inline-flex); + align-items: center; + border: var(--nut-inputnumber-border, 0); + border-radius: var(--nut-inputnumber-border-radius, 0); + height: var(--nut-inputnumber-height, auto); + line-height: var(--nut-inputnumber-line-height, normal); + box-sizing: var(--nut-inputnumber-border-box, content-box); } -.nut-input-number .h5-input { - border-top: 0 !important; - border-bottom: 0 !important; +.nut-input-number__icon { + display: flex; + align-items: center; + color: var(--nut-inputnumber-icon-color, var(--nut-title-color, #1a1a1a)); + cursor: pointer; } .nut-input-number .h5-input, .nut-input-number__text--readonly, @@ -12737,11 +10547,8 @@ wx-button { width: var(--nut-inputnumber-input-width, 40rpx); height: 100%; text-align: center; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; outline: none; border: var(--nut-inputnumber-input-border, 0); @@ -12752,35 +10559,12 @@ wx-button { border-radius: var(--nut-inputnumber-input-border-radius, 4rpx); } .nut-input-number .h5-input::-webkit-outer-spin-button, -.nut-input-number .h5-input::-webkit-inner-spin-button { - appearance: none; -} -.nut-theme-dark .nut-ecard ::-webkit-input-placeholder { - color: #1d1f20; -} -.nut-theme-dark .nut-ecard .nut-ecard__list__item.active { - background: var(--nut-dark-background6, #380e08); - outline: 1rpx solid var(--nut-dark-color2, #f2270c); - color: var(--nut-dark-color2, #f2270c); -} -.nut-theme-dark .nut-ecard .nut-ecard__list__input.active > view > .h5-input { - background: var(--nut-dark-background7, #707070); -} -.nut-theme-dark .nut-ecard .nut-ecard__list__input .nut-ecard__list__input--con > .h5-input { - background-color: transparent; - color: var(--nut-dark-color3, rgba(232, 230, 227, 0.8)); -} -.nut-ecard__title { - line-height: 1; - font-size: 15rpx; - font-weight: 400; +.nut-input-number .h5-input::-webkit-inner-spin-button { + appearance: none; } .nut-ecard__list { - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; - -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 15rpx; } @@ -12790,78 +10574,36 @@ wx-button { background: var(--nut-ecard-bg-color, #f0f2f5); border-radius: 4rpx; margin-bottom: 12rpx; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; } -.nut-ecard__list__item.active { - background: var(--nut-white, #fff); - outline: 1rpx solid var(--nut-primary-color, #fa2c19); - border-radius: 4rpx; -} .nut-ecard__list__input { width: 100%; height: 46rpx; background: var(--nut-ecard-bg-color, #f0f2f5); color: rgba(0, 0, 0, 0.8); border-radius: 4rpx; - display: -ms-flexbox; display: flex; padding: 0 15rpx 0 20rpx; font-size: 14rpx; - -ms-flex-pack: justify; justify-content: space-between; - -ms-flex-align: center; align-items: center; } -.nut-ecard__list__input--con .h5-input, -.nut-ecard__list__input--con .nut-ecard-input { - caret-color: var(--nut-primary-color, #fa2c19); - text-align: right; - background: transparent; - margin-right: 10rpx; - outline: 0 none; - border: 0; - text-decoration: none; -} -.nut-ecard__list__input.active { - background: var(--nut-white, #fff); - outline: 1rpx solid var(--nut-primary-color, #fa2c19); -} -.nut-ecard__list__input.active > view > .h5-input { - background: var(--nut-white, #fff); +.nut-ecard__list__input--con { + flex: 1; + display: flex; + justify-content: flex-end; } .nut-ecard__list__step { width: 100%; margin-top: 17rpx; - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; font-size: 20rpx; font-weight: 400; color: var(--nut-primary-color, #fa2c19); } -.nut-swipe__left { - left: 0; - transform: translate3d(-100%, 0, 0); -} -.nut-swipe__right { - right: 0; - transform: translate3d(100%, 0, 0); -} -.nut-theme-dark .nut-address-list-swipe, -.nut-theme-dark .nut-address-list-general { - background-color: var(--nut-dark-background2, #1b1b1b); - border-bottom: 1rpx solid var(--nut-dark-color-gray, var(--nut-text-color, #808080)); - color: var(--nut-dark-color, var(--nut-white, #fff)); -} -.nut-address-list:last-child { - padding-bottom: 84rpx; -} .nut-address-list-swipe, .nut-address-list-general { min-height: 76rpx; @@ -12870,9 +10612,7 @@ wx-button { border-bottom: 1rpx solid var(--nut-addresslist-border, #f0f0f0); color: var(--nut-addresslist-font-color, #333333); font-size: var(--nut-addresslist-font-size, 16rpx); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; position: relative; } @@ -12884,11 +10624,8 @@ wx-button { bottom: 0; left: 0; background-color: var(--nut-addresslist-mask-bg, rgba(0, 0, 0, 0.4)); - display: -ms-flexbox; display: flex; - -ms-flex-pack: distribute; justify-content: space-around; - -ms-flex-align: center; align-items: center; padding: 0 40rpx; z-index: 2001; @@ -12906,53 +10643,43 @@ wx-button { text-align: center; background-color: var(--nut-white, #fff); font-size: 14rpx; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; box-sizing: border-box; } -.nut-address-list-item__info-contact-name { - max-width: 145rpx; - word-wrap: break-word; -} -.nut-address-list-item__info-contact-tel { - margin-left: 8rpx; - max-width: 110rpx; - word-wrap: break-word; +.nut-address-list-swipe__mask-set, +.nut-address-list-general__mask-set { + color: var(--nut-white, #fff); + background-color: var(--nut-addresslist-set-bg, #f5a623); } -.nut-address-list-item__info-contact-default { - margin-left: 5rpx; - padding: 0 6rpx; - height: 16rpx; - line-height: 16rpx; - background: var(--nut-addresslist-contnts-contact-default, var(--nut-primary-color, #fa2c19)); - border-radius: 2rpx; - font-size: 12rpx; - color: var(--nut-addresslist-contnts-contact-color, var(--nut-white, #fff)); +.nut-address-list-swipe__mask-del, +.nut-address-list-general__mask-del { + color: var(--nut-white, #fff); + background-color: var(--nut-addresslist-del-bg, #e1251b); } -.nut-address-list-item__info-handle-edit { - margin-left: 15rpx; +.nut-address-list-item__info { + display: flex; + justify-content: space-between; } -.nut-address-list-item__addr { - color: var(--nut-addresslist-addr-font-color, #666666); - font-size: var(--nut-addresslist-addr-font-size, 12rpx); - margin-top: 5rpx; +.nut-address-list-item__info-contact { + display: flex; + justify-content: flex-start; + font-weight: 700; + align-items: center; } -.nut-address-list__bottom { +.nut-address-list .nut-address-list__mask-bottom { position: fixed; - left: 0; + top: 0; right: 0; bottom: 0; - bottom: constant(safe-area-inset-bottom); - bottom: env(safe-area-inset-bottom); - width: 100%; - padding: 12rpx 18rpx 24rpx; - z-index: 100000; - background-color: var(--nut-addresslist-bg, #fff); - box-sizing: border-box; + left: 0; + z-index: 2000; + background-color: transparent; +} +.nut-category__cateList { + display: flex; + background: var(--nut-category-bg-color, rgb(255, 255, 255)); } .nut-category__cateListItemChecked, .nut-category__cateListItem { @@ -12961,40 +10688,20 @@ wx-button { font-size: 13rpx; font-weight: 400; color: var(--nut-category-list-item-color, var(--nut-title-color, #1a1a1a)); - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; transition: all 0.3s; } -.nut-category__cateListItemChecked::before { - position: absolute; - content: ''; - left: 0; - width: 5rpx; - height: 18rpx; - background: var(--nut-category-list-item-checked-img-bg-color, var(--nut-primary-color, #fa2c19)); -} -.nut-category-pane__cateListRight { - padding-left: 15rpx; - background: var(--nut-category-bg-color, rgb(255, 255, 255)); -} -.nut-category-pane__childTitle { - margin-top: 15rpx; - margin-bottom: 15rpx; - font-size: 13rpx; +.nut-category__cateListItemChecked { + background: var(--nut-category-list-item-checked-color, rgb(255, 255, 255)); font-weight: 500; - color: var(--nut-category-pane-title-color, rgb(51, 51, 51)); -} -.nut-category-pane__childItem { - margin-right: 10rpx; + transition: all 0.3s; + position: relative; } -.nut-category-pane__childImg { - width: 75rpx; - height: 75rpx; - border-radius: 5rpx; +.nut-category-pane__childItemList { + display: flex; + flex-wrap: wrap; } .nut-category-pane__skuName { margin-left: 15rpx; @@ -13007,79 +10714,54 @@ wx-button { font-size: 12rpx; font-weight: 400; color: var(--nut-category-pane-gray-color, #666); - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; } -.nut-category-pane__skuName:nth-child(n + 4) { - margin-top: 15rpx; +.nut-category-pane__selfItemList { + display: flex; + flex-wrap: wrap; } -.nut-category-pane__skuImg { - font-size: 12rpx; - font-weight: 400; - color: var(--nut-category-pane-gray-color, #666); - margin-top: 10rpx; - margin-bottom: 10rpx; - text-align: center; +.nut-rate { + display: inline-flex; } .nut-rate-item { - display: -ms-flexbox; display: flex; - -ms-flex-negative: 0; flex-shrink: 0; position: relative; margin-right: 14rpx; } -.nut-theme-dark .nut-comment-header__user-name, -.nut-theme-dark .nut-comment-header__user-default-name, -.nut-theme-dark .nut-comment__follow-title, -.nut-theme-dark .nut-comment-bottom__cpx, -.nut-theme-dark .nut-comment-bottom__cpx-item .h5-span { - color: var(--nut-dark-color, var(--nut-white, #fff)); +.nut-rate-item__icon { + color: var(--nut-rate-icon-color, var(--nut-primary-color, #fa2c19)); + flex-shrink: 0; + cursor: pointer; } -.nut-theme-dark .nut-comment .nut-comment-shop { - border-top: 1rpx solid var(--nut-dark-color, var(--nut-white, #fff)); +.nut-rate-item__icon--full { + display: flex; } -.nut-comment { - width: 100%; - font-size: 12rpx; +.nut-rate-item__icon--half { + display: flex; + position: absolute; + width: 50%; + left: 0; + top: 0; + overflow: hidden; } .nut-comment-header { margin-bottom: 10rpx; - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; } -.nut-comment-header__user-avter { - width: 20rpx; - height: 20rpx; - border-radius: 50%; - margin-right: 10rpx; - overflow: hidden; -} -.nut-comment-header__user-avter .h5-img { - width: 20rpx; - height: 20rpx; +.nut-comment-header__user { + flex: 1; + display: flex; + align-items: center; } -.nut-comment-header__user-name { - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - margin-right: 5rpx; - font-size: 12rpx; - color: var(--nut-comment-header-user-name-color, rgb(51, 51, 51)); - width: auto; - max-width: 80rpx; +.nut-comment-header__user-default { + flex: 1; } .nut-comment-header__user-default-name { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; margin-bottom: 3rpx; width: 100%; @@ -13089,63 +10771,17 @@ wx-button { font-size: 12rpx; color: var(--nut-comment-header-user-name-color, rgb(51, 51, 51)); } -.nut-comment-header__user-default-name > .h5-span { - margin-right: 8rpx; -} -.nut-comment-header__user-complex-name { - margin-right: 10rpx; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 80rpx; -} -.nut-comment-header__user-complex image { - max-width: 50rpx; - height: 16rpx; -} -.nut-comment-header__user-score .nut-rate-item { - display: block !important; - line-height: 10rpx; -} -.nut-comment-header__user-score .nut-rate-item .nut-icon { - line-height: 10rpx; -} -.nut-comment-header__time { - width: 100rpx; - text-align: right; - font-size: 12rpx; - color: var(--nut-comment-header-time-color, rgb(153, 153, 153)); +.nut-comment-header__user-complex { + display: flex; + align-items: center; + color: var(--nut-comment-header-user-name-color, rgb(51, 51, 51)); } .nut-comment-header__complex-score { - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; margin-bottom: 10rpx; } -.nut-comment-header__complex-score .nut-rate-item { - display: block !important; - line-height: 12rpx; -} -.nut-comment-header__complex-score .nut-rate-item .nut-icon { - line-height: 12rpx; -} -.nut-comment-header__complex-score-i { - margin: 0 8rpx 0 6rpx; - display: inline-block; - width: 1rpx; - height: 6rpx; - background: var(--nut-text-color, #808080); - opacity: 0.4; - font-style: inherit; -} -.nut-comment-header__labels--item { - display: inline-block; - height: 16rpx; - margin-right: 4rpx; -} .nut-comment-images { - display: -ms-flexbox; display: flex; margin: 10rpx 0 12rpx; overflow-x: auto; @@ -13158,29 +10794,20 @@ wx-button { margin-right: 5rpx; border-radius: 6rpx; overflow: hidden; - -ms-flex-negative: 0; flex-shrink: 0; } -.nut-comment-images__item .h5-img { - width: 80rpx; - height: 80rpx; -} .nut-comment-images__item--video .h5-img { position: absolute; top: 50%; left: 50%; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .nut-comment-images__mask { position: absolute; top: 0; left: 0; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; width: 100%; height: 90rpx; @@ -13190,73 +10817,32 @@ wx-button { color: #fff; } .nut-comment-images--multi { - -ms-flex-wrap: wrap; flex-wrap: wrap; - -ms-flex-pack: justify; justify-content: space-between; overflow: hidden; width: 100%; margin: 10rpx auto 15rpx; } -.nut-comment-images--multi .nut-comment-images__item { - margin: 8rpx 8rpx 0 0; - width: calc(34% - 8rpx); - height: 90rpx; -} -.nut-comment-images--multi .nut-comment-images__item .h5-img { - width: 100%; - height: 100%; -} -.nut-comment-images--multi .nut-comment-images__item .svg-demo { - width: 40rpx; - height: 40rpx; -} -.nut-comment-images--multi::after { - content: ''; - display: block; - width: 105rpx; -} -.nut-comment__follow-title { - position: relative; - font-size: 14rpx; - font-weight: 700; - color: var(--nut-black, #000); - padding-left: 8rpx; -} .nut-comment__follow-title .h5-svg { position: absolute; left: 0; top: 13%; color: var(--nut-primary-color, #fa2c19); - -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0.4; } -.nut-comment__follow-com { - margin: 8rpx 0 8rpx 8rpx; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 6; - overflow: hidden; - word-break: break-all; -} .nut-comment__follow-img { margin: 0 0 8rpx 8rpx; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; } .nut-comment-bottom { - display: -ms-flexbox; display: flex; - -ms-flex-pack: justify; justify-content: space-between; color: var(--nut-comment-bottom-label-color, rgb(153, 153, 153)); margin-right: 5rpx; } .nut-comment-bottom__lable { - -ms-flex: 1; flex: 1; margin-right: 10rpx; width: 100%; @@ -13264,222 +10850,94 @@ wx-button { text-overflow: ellipsis; white-space: nowrap; } -.nut-comment-bottom__cpx-item { - position: relative; - margin-right: 18rpx; - display: -ms-flexbox; +.nut-comment-bottom__cpx { display: flex; - -ms-flex-align: center; align-items: center; -} -.nut-comment-bottom__cpx-item .h5-span { + justify-content: flex-end; color: var(--nut-black, #000); - margin-right: 5rpx; -} -.nut-comment-bottom__cpx-item-popover { - position: absolute; - top: 35rpx; - right: 18rpx; - width: -moz-max-content; - width: max-content; - background: var(--nut-white, #fff); - padding: 10rpx; - box-shadow: 0 0 6rpx var(--nut-disable-color, #cccccc); - border-radius: 5rpx 0 5rpx 5rpx; -} -.nut-comment-bottom__cpx-item-popover::after { - content: ''; - position: absolute; - top: -20rpx; - right: 0; - width: 0; - height: 0; - border-left: 14rpx solid transparent; - border-right: 0rpx solid transparent; - border-top: 10rpx solid transparent; - border-bottom: 10rpx solid var(--nut-white, #fff); -} -.nut-comment-bottom__cpx-item-popover::before { - content: ''; - position: absolute; - top: -22rpx; - right: -1rpx; - width: 0; - height: 0; - border-left: 14rpx solid transparent; - border-right: 0rpx solid transparent; - border-top: 10rpx solid transparent; - border-bottom: 10rpx solid rgba(114, 113, 113, 0.1); -} -.nut-comment-images__play { - width: 40rpx; - height: 40rpx; - position: absolute; - left: 50%; - top: 50%; - -ms-transform: translate(-50%); - transform: translate(-50%); - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - background: rgba(0, 0, 0, 0.50196); - border-radius: 50%; -} -.nut-comment-images__play::after { - display: block; - content: ''; - position: absolute; - left: 15rpx; - top: 11rpx; - border-top: 9rpx solid transparent; - border-bottom: 9rpx solid transparent; - border-left: 15rpx solid #fff; -} -.nut-comment .nut-comment-shop { - width: 100%; - margin-top: 20rpx; - padding-top: 10rpx; - border-top: 1rpx solid rgba(0, 0, 0, 0.1); - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 6; - overflow: hidden; - word-break: break-all; -} -.nut-comment .nut-comment-shop .h5-span { - color: var(--nut-comment-shop-color, var(--nut-primary-color, #fa2c19)); } -.nut-button { +.nut-comment-bottom__cpx-item { position: relative; - display: inline-block; - width: auto; - -ms-flex-negative: 0; - flex-shrink: 0; - height: var(--nut-button-default-height, 38rpx); - box-sizing: border-box; - margin: 0; - padding: 0; - line-height: var(--nut-button-default-line-height, 36rpx); - font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 14rpx)); - text-align: center; - cursor: pointer; - transition: opacity 0.2s; - -moz-appearance: none; - appearance: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -ms-touch-action: manipulation; - touch-action: manipulation; - vertical-align: bottom; -} -.nut-button .nut-button__text { - margin-left: 5rpx; -} -.nut-button::before { - position: absolute; - top: 50%; - left: 50%; - width: 100%; - height: 100%; - background-color: var(--nut-black, #000); - border: inherit; - border-color: var(--nut-black, #000); - border-radius: inherit; - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - opacity: 0; - content: ' '; -} -.nut-button--default { - color: var(--nut-button-default-color, rgb(102, 102, 102)); - background: var(--nut-button-default-bg-color, var(--nut-white, #fff)); - background-origin: border-box; - border: var(--nut-button-border-width, 1rpx) solid var(--nut-button-default-border-color, rgb(204, 204, 204)); -} -.nut-button--primary { - color: var(--nut-button-primary-color, var(--nut-white, #fff)); - background: var( - --nut-button-primary-background-color, - linear-gradient(135deg, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 0%, var(--nut-primary-color, var(--nut-primary-color, #fa2c19)) 100%) - ); - background-origin: border-box; - border: var(--nut-button-border-width, 1rpx) solid transparent; -} -.nut-button--info { - color: var(--nut-button-info-color, var(--nut-white, #fff)); - background: var(--nut-button-info-background-color, linear-gradient(315deg, rgb(73, 143, 242) 0%, rgb(73, 101, 242) 100%)); - background-origin: border-box; - border: var(--nut-button-border-width, 1rpx) solid transparent; -} -.nut-button--success { - color: var(--nut-button-success-color, var(--nut-white, #fff)); - background: var(--nut-button-success-background-color, linear-gradient(135deg, rgb(38, 191, 38) 0%, rgb(39, 197, 48) 45%, rgb(40, 207, 63) 83%, rgb(41, 212, 70) 100%)); - background-origin: border-box; - border: var(--nut-button-border-width, 1rpx) solid transparent; -} -.nut-button--danger { - color: var(--nut-button-danger-color, var(--nut-white, #fff)); - background: var(--nut-button-danger-background-color, rgb(250, 44, 25)); - background-origin: border-box; - border: var(--nut-button-border-width, 1rpx) solid transparent; -} -.nut-button--warning { - color: var(--nut-button-warning-color, var(--nut-white, #fff)); - background: var(--nut-button-warning-background-color, linear-gradient(135deg, rgb(255, 158, 13) 0%, rgb(255, 167, 13) 45%, rgb(255, 182, 13) 83%, rgb(255, 190, 13) 100%)); - background-origin: border-box; - border: var(--nut-button-border-width, 1rpx) solid transparent; -} -.nut-button--large { - width: 100%; - height: var(--nut-button-large-height, 48rpx); - line-height: var(--nut-button-large-line-height, 46rpx); - font-size: var(--nut-button-large-font-size, var(--nut-button-default-font-size, var(--nut-font-size-2, 14rpx))); -} -.nut-button--normal { - padding: var(--nut-button-default-padding, 0 18rpx); - font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 14rpx)); -} -.nut-button--small { - height: var(--nut-button-small-height, 28rpx); - line-height: var(--nut-button-small-line-height, 26rpx); - padding: var(--nut-button-small-padding, 0 12rpx); - font-size: var(--nut-button-small-font-size, var(--nut-font-size-1, 12rpx)); + margin-right: 18rpx; + display: flex; + align-items: center; } -.nut-button--small.nut-button--round { - border-radius: var(--nut-button-small-round-border-radius, var(--nut-button-border-radius, 25rpx)); +.nut-comment-bottom__cpx-item-popover { + position: absolute; + top: 35rpx; + right: 18rpx; + width: max-content; + background: var(--nut-white, #fff); + padding: 10rpx; + box-shadow: 0 0 6rpx var(--nut-disable-color, #cccccc); + border-radius: 5rpx 0 5rpx 5rpx; } -.nut-button--mini { - height: var(--nut-button-mini-height, 24rpx); - line-height: var(--nut-button-mini-line-height, 1.2); - padding: var(--nut-button-mini-padding, 0 12rpx); - font-size: var(--nut-button-mini-font-size, var(--nut-font-size-1, 12rpx)); +.nut-comment-images__play { + width: 40rpx; + height: 40rpx; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%); + transform: translate(-50%, -50%); + background: rgba(0, 0, 0, 0.50196); + border-radius: 50%; } -.nut-button--round { - border-radius: var(--nut-button-border-radius, 25rpx); +.nut-button { + position: relative; + display: inline-block; + width: auto; + flex-shrink: 0; + height: var(--nut-button-default-height, 38rpx); + box-sizing: border-box; + margin: 0; + padding: 0; + line-height: var(--nut-button-default-line-height, 36rpx); + font-size: var(--nut-button-default-font-size, var(--nut-font-size-2, 14rpx)); + text-align: center; + cursor: pointer; + transition: opacity 0.2s; + appearance: none; + user-select: none; + touch-action: manipulation; + vertical-align: bottom; } -.nut-radio-group .nut-radio { - margin-bottom: 5rpx; +.nut-button::before { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + height: 100%; + background-color: var(--nut-black, #000); + border: inherit; + border-color: var(--nut-black, #000); + border-radius: inherit; + transform: translate(-50%, -50%); + opacity: 0; + content: ' '; +} +.nut-button__wrap { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; } .nut-radio-group--horizontal .nut-radio { - display: -ms-inline-flexbox; display: inline-flex; margin-right: 10rpx; } -.nut-radio-group--horizontal .nut-radio--round .nut-radio__label { - margin: 0 6rpx; -} -.nut-theme-dark .nut-radio__button--disabled { - color: var(--nut-radio-label-disable-color, #999); - border: 1rpx solid var(--nut-radio-label-disable-color, #999); +.nut-radio { + display: flex; + align-items: center; + flex-shrink: 0; + cursor: pointer; } -.nut-radio--reverse .nut-radio__label { - margin-right: var(--nut-radio-label-margin-left, 15rpx); - margin-left: 0; +.nut-radio--reverse { + flex-direction: row-reverse; } .nut-radio__button { - display: -ms-inline-flexbox; display: inline-flex; - -ms-flex-align: center; align-items: center; padding: var(--nut-radio-button-padding, 5rpx 18rpx); font-size: var(--nut-radio-button-font-size, 12rpx); @@ -13489,81 +10947,14 @@ wx-button { box-sizing: border-box; border: 1rpx solid #f6f7f9; } -.nut-radio__button--active { - background: transparent; - color: var(--nut-radio-label-font-active-color, var(--nut-primary-color, #fa2c19)); - border: 1rpx solid var(--nut-radio-label-button-border-color, var(--nut-primary-color, #fa2c19)); - position: relative; -} -.nut-radio__button--active::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - background-color: var(--nut-radio-label-button-background, var(--nut-primary-color, #fa2c19)); - border-radius: var(--nut-radio-button-border-radius, 15rpx); - opacity: 0.05; - content: ''; -} -.nut-radio__button--large { - height: var(--nut-button-large-height, 48rpx); - line-height: var(--nut-button-large-line-height, 46rpx); - font-size: var(--nut-button-large-font-size, var(--nut-button-default-font-size, var(--nut-font-size-2, 14rpx))); -} -.nut-radio__button--small { - height: var(--nut-button-small-height, 28rpx); - line-height: var(--nut-button-small-line-height, 26rpx); - padding: var(--nut-button-small-padding, 0 12rpx); - font-size: var(--nut-button-small-font-size, var(--nut-font-size-1, 12rpx)); -} -.nut-radio__button--mini { - height: var(--nut-button-mini-height, 24rpx); - line-height: var(--nut-button-mini-line-height, 1.2); - padding: var(--nut-button-mini-padding, 0 12rpx); - font-size: var(--nut-button-mini-font-size, var(--nut-font-size-1, 12rpx)); -} .nut-radio__label { - -ms-flex: 1; flex: 1; margin-left: var(--nut-radio-label-margin-left, 15rpx); font-size: var(--nut-radio-label-font-size, 14rpx); color: var(--nut-radio-label-font-color, #1d1e1e); } -.nut-cell-group__title { - display: inherit; - padding: var(--nut-cell-group-title-padding, 0 10rpx); - color: var(--nut-cell-group-title-color, #909ca4); - font-size: var(--nut-cell-group-title-font-size, var(--nut-font-size-2, 14rpx)); - line-height: var(--nut-cell-group-title-line-height, 20rpx); - margin-top: 30rpx; - margin-bottom: 10rpx; -} -.nut-cell-group__desc { - display: inherit; - padding: var(--nut-cell-group-desc-padding, 0 10rpx); - color: var(--nut-cell-group-desc-color, #909ca4); - font-size: var(--nut-cell-group-desc-font-size, var(--nut-font-size-1, 12rpx)); - line-height: var(--nut-cell-group-desc-line-height, 16rpx); - margin-top: 10rpx; - margin-bottom: 10rpx; -} -.nut-cell-group__wrap { - display: inherit; - border-radius: var(--nut-cell-border-radius, 6rpx); - box-shadow: var(--nut-cell-box-shadow, 0rpx 1rpx 7rpx 0rpx rgb(237, 238, 241)); - overflow: hidden; - background-color: var(--nut-cell-group-background-color, var(--nut-white, #fff)); - margin: 10rpx 0; -} -.nut-cell-group .nut-cell::after { - border-bottom: var(--nut-cell-after-border-bottom, 1rpx solid #f5f6f7); -} .nut-cell { position: relative; - display: -ms-flexbox; display: flex; width: 100%; line-height: var(--nut-cell-line-height, 20rpx); @@ -13576,12 +10967,8 @@ wx-button { margin: 10rpx 0; box-sizing: border-box; } -.nut-cell--large { - font-size: var(--nut-cell-large-title-font, var(--nut-font-size-large, var(--nut-font-size-3, 16rpx))); - padding: var(--nut-cell-large-padding, 15rpx 16rpx); -} -.nut-cell--large .nut-cell__title-desc { - font-size: var(--nut-cell-large-title-desc-font, var(--nut-font-size-base, var(--nut-font-size-2, 14rpx))); +.nut-cell--center { + align-items: center; } .nut-cell::after { position: absolute; @@ -13591,7 +10978,6 @@ wx-button { right: var(--nut-cell-after-right, 16rpx); bottom: 0; left: 16rpx; - -ms-transform: scaleY(0.5); transform: scaleY(0.5); } .nut-cell--clickable::before { @@ -13604,40 +10990,36 @@ wx-button { border: inherit; border-color: var(--nut-black, #000); border-radius: inherit; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; content: ' '; } .nut-cell__icon { - display: -ms-flexbox; display: flex; - -ms-flex-direction: row; flex-direction: row; margin: var(--nut-cell-default-icon-margin, 0 4rpx 0 0rpx); - -ms-flex-align: center; align-items: center; } .nut-cell__title { - display: -ms-flexbox; display: flex; - -ms-flex-direction: column; flex-direction: column; - -ms-flex: 1; flex: 1; min-width: 80rpx; } -.nut-cell__title-desc { - font-size: var(--nut-cell-title-desc-font, var(--nut-font-size-1, 12rpx)); -} .nut-cell__value { display: inline-block; text-align: right; - -ms-flex: 1; flex: 1; font-size: var(--nut-cell-desc-font, var(--nut-font-size-2, 14rpx)); color: var(--nut-cell-desc-color, var(--nut-disable-color, #cccccc)); } +.nut-cell__link { + color: #979797; + align-self: center; +} +.nut-form-item { + display: flex; +} .nut-form-item::before { position: absolute; box-sizing: border-box; @@ -13646,12 +11028,10 @@ wx-button { right: 16rpx; bottom: 0; left: 16rpx; - -ms-transform: scaleX(0); transform: scaleX(0); } .nut-form-item.error.line::before { border-bottom: 1rpx solid var(--nut-form-item-error-line-color, var(--nut-required-color, #fa2c19)); - -ms-transform: scaleX(1); transform: scaleX(1); transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0ms; } @@ -13660,68 +11040,35 @@ wx-button { font-weight: 400; width: var(--nut-form-item-label-width, 90rpx); margin-right: var(--nut-form-item-label-margin-right, 10rpx); - -ms-flex: none !important; flex: none !important; display: inline-block !important; word-wrap: break-word; text-align: var(--nut-form-item-label-text-align, left); } -.nut-form-item__label.required::before { - content: '*'; - color: var(--nut-form-item-required-color, var(--nut-required-color, #fa2c19)); - margin-right: var(--nut-form-item-required-margin-right, 4rpx); -} -.nut-form-item__label.required.nut-form-item__star-right::after { - content: '*'; - color: var(--nut-form-item-required-color, var(--nut-required-color, #fa2c19)); - margin-left: var(--nut-form-item-required-margin-right, 4rpx); -} -.nut-form-item__body__slots .nut-input { - font-size: var(--nut-form-item-body-font-size, 14rpx); - text-align: var(--nut-form-item-body-input-text-align, left); - color: var(--nut-black, #000); - width: 100%; - outline: 0 none; - border: 0; - text-decoration: none; - background: transparent; -} -.nut-form-item__body__slots .nut-range-container { - min-height: 24rpx; +.nut-form-item__body { + flex: 1; + display: flex !important; + flex-direction: column; } -.nut-form-item__body__tips { - text-align: var(--nut-form-item-tip-text-align, left); - font-size: var(--nut-form-item-tip-font-size, 10rpx); - color: var(--nut-form-item-error-message-color, var(--nut-required-color, #fa2c19)); +.nut-form-item__top { + flex-direction: column; } -.nut-form-item__top .nut-form-item__label { - padding-bottom: 5rpx; - width: 100%; - box-sizing: border-box; - display: block; - padding-right: 24rpx; +.nut-invoice .nut-cell { + align-items: baseline; } .nut-invoice__submit { position: fixed; bottom: 0; width: 100%; padding: var(--nut-invoice-padding, 10rpx 10rpx 20rpx); - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; - -ms-flex-pack: center; justify-content: center; background: #fff; box-sizing: border-box; bottom: constant(safe-area-inset-bottom); bottom: env(safe-area-inset-bottom); } -.nut-invoice .nut-radio { - display: inline-block; - margin-right: 6rpx; - margin-bottom: 0; -} .nut-avatar-cropper::after, .nut-avatar-cropper__edit-text { content: attr(data-edit-text); @@ -13733,20 +11080,20 @@ wx-button { background-color: rgba(0, 0, 0, 0.30196); z-index: 1; color: #fff; - display: -ms-flexbox; display: flex; - -ms-flex-pack: center; justify-content: center; - -ms-flex-align: center; align-items: center; } +.nut-cropper-popup__toolbar .flex-sb { + width: 100%; + display: flex; + justify-content: space-between; +} .nut-cropper-popup__toolbar-item { color: #fff; padding: 15rpx; cursor: pointer; - display: -ms-flexbox; display: flex; - -ms-flex-align: center; align-items: center; } .nut-cropper-popup__highlight .highlight { @@ -13755,18 +11102,11 @@ wx-button { height: 365rpx; left: 50%; top: 50%; - -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; background-color: transparent; box-shadow: 0 0 1000rpx 1000rpx rgba(0, 0, 0, 0.6); } -.h5-button::after, -wx-button::after { - display: none; - border: none; - content: ''; -} wx-button { background: #444; } @@ -13774,9 +11114,7 @@ abc { background: #222; } .weapp-tw-user-ui-card { - display: -ms-inline-flexbox; display: inline-flex; - -ms-flex-align: center; align-items: center; gap: 8rpx; color: var(--weapp-tw-user-ui-color, #175e75); @@ -13799,3 +11137,12 @@ abc { transform: scale(0.96); } } +:host, +page, +.tw-root, +wx-root-portal-content { + --font-sans: 'inter', 'inter Fallback', system-ui; + --text-base: 1rem; + --radius-lg: 0.5rem; + --default-font-family: var(--font-inter), system-ui; +} diff --git a/e2e/__snapshots__/e2e/uni-app-vite-tailwindcss-v4/main.wxss b/e2e/__snapshots__/e2e/uni-app-vite-tailwindcss-v4/main.wxss index 89d30da7f..39f95cdaf 100644 --- a/e2e/__snapshots__/e2e/uni-app-vite-tailwindcss-v4/main.wxss +++ b/e2e/__snapshots__/e2e/uni-app-vite-tailwindcss-v4/main.wxss @@ -40,25 +40,27 @@ text, page, .tw-root, wx-root-portal-content { - --font-sans: 'inter', 'inter Fallback', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; - --font-mono: var(--font-plex-mono), monospace; + --font-sans: + -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --color-red-300: rgb(255, 163, 164); - --color-red-500: #fb2c36; + --color-red-500: rgb(251, 44, 54); --color-green-200: rgb(185, 248, 207); --color-emerald-50: rgb(236, 253, 245); --color-emerald-200: rgb(164, 244, 207); - --color-emerald-500: #00bb7f; + --color-emerald-500: rgb(0, 185, 129); --color-emerald-600: rgb(0, 150, 105); --color-emerald-700: rgb(0, 120, 87); - --color-blue-500: #3080ff; + --color-blue-500: rgb(50, 128, 255); --color-slate-100: rgb(241, 245, 249); --color-slate-200: rgb(226, 232, 240); --color-slate-500: rgb(98, 116, 142); --color-slate-700: rgb(49, 65, 88); --color-slate-800: rgb(29, 41, 61); - --color-slate-900: #0f172b; + --color-slate-900: rgb(15, 23, 43); --color-zinc-50: rgb(250, 250, 250); - --color-zinc-900: #18181b; + --color-zinc-900: rgb(24, 24, 27); --color-zinc-950: rgb(9, 9, 11); --color-white: #fff; --spacing: 8rpx; @@ -70,45 +72,13 @@ wx-root-portal-content { --text-base--line-height: calc(1.5 / 1); --font-weight-semibold: 600; --font-weight-bold: 700; - --default-font-family: var(--font-inter), system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; - --default-mono-font-family: var(--font-plex-mono), monospace; + --default-font-family: var(--font-sans); + --default-mono-font-family: var(--font-mono); --color-neutral-1B: #1b1b1b; --color-neutral-66: #666; --color-midnight: #121063; --color-tahiti: #3ab7bf; --color-bermuda: #78dcca; - --test-color: #006241; - --color-test: #006241; - --font-test: 'Issue 978', sans-serif; - --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; - --color-red-50: #fef2f2; - --color-red-950: #460809; - --color-orange-500: #fe6e00; - --color-amber-500: #f99c00; - --color-yellow-500: #edb200; - --color-lime-500: #80cd00; - --color-green-500: #00c758; - --color-teal-500: #00baa7; - --color-cyan-500: #00b7d7; - --color-sky-500: #00a5ef; - --color-indigo-500: #625fff; - --color-violet-500: #8d54ff; - --color-purple-500: #ac4bff; - --color-fuchsia-500: #e12afb; - --color-pink-500: #f6339a; - --color-rose-500: #ff2357; - --color-gray-900: #101828; - --color-neutral-900: #171717; - --color-stone-900: #1c1917; - --color-black: #000; - --radius-lg: 16rpx; - --status-bar-height: 25px; - --top-window-height: 0px; - --window-top: 0px; - --window-bottom: 0px; - --window-left: 0px; - --window-right: 0px; - --window-magin: 0px; } button::after, wx-button::after { @@ -847,6 +817,52 @@ abc { .reset-button { display: block; } +:host, +page, +.tw-root, +wx-root-portal-content { + --test-color: #006241; + --color-test: #006241; + --font-test: 'Issue 978', sans-serif; + --font-sans: 'inter', 'inter Fallback', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; + --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; + --font-mono: var(--font-plex-mono), monospace; + --color-red-50: #fef2f2; + --color-red-500: #fb2c36; + --color-red-950: #460809; + --color-orange-500: #fe6e00; + --color-amber-500: #f99c00; + --color-yellow-500: #edb200; + --color-lime-500: #80cd00; + --color-green-500: #00c758; + --color-emerald-500: #00bb7f; + --color-teal-500: #00baa7; + --color-cyan-500: #00b7d7; + --color-sky-500: #00a5ef; + --color-blue-500: #3080ff; + --color-indigo-500: #625fff; + --color-violet-500: #8d54ff; + --color-purple-500: #ac4bff; + --color-fuchsia-500: #e12afb; + --color-pink-500: #f6339a; + --color-rose-500: #ff2357; + --color-slate-900: #0f172b; + --color-gray-900: #101828; + --color-zinc-900: #18181b; + --color-neutral-900: #171717; + --color-stone-900: #1c1917; + --color-black: #000; + --radius-lg: 16rpx; + --default-font-family: var(--font-inter), system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; + --default-mono-font-family: var(--font-plex-mono), monospace; + --status-bar-height: 25px; + --top-window-height: 0px; + --window-top: 0px; + --window-bottom: 0px; + --window-left: 0px; + --window-right: 0px; + --window-magin: 0px; +} [data-c-h='true'] { display: none !important; } diff --git a/e2e/__snapshots__/e2e/uni-app-x-vdom-tailwindcss-v4/app.wxss b/e2e/__snapshots__/e2e/uni-app-x-vdom-tailwindcss-v4/app.wxss index 1ab853277..44c5f622b 100644 --- a/e2e/__snapshots__/e2e/uni-app-x-vdom-tailwindcss-v4/app.wxss +++ b/e2e/__snapshots__/e2e/uni-app-x-vdom-tailwindcss-v4/app.wxss @@ -3,6 +3,44 @@ page, .tw-root, wx-root-portal-content { + --test-color: #006241; + --color-test: #006241; + --font-test: 'Issue 978', sans-serif; + --font-sans: 'inter', 'inter Fallback', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; + --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; + --font-mono: var(--font-plex-mono), monospace; + --color-red-50: #fef2f2; + --color-red-500: #fb2c36; + --color-red-950: #460809; + --color-orange-500: #fe6e00; + --color-amber-500: #f99c00; + --color-yellow-500: #edb200; + --color-lime-500: #80cd00; + --color-green-500: #00c758; + --color-emerald-500: #00bb7f; + --color-teal-500: #00baa7; + --color-cyan-500: #00b7d7; + --color-sky-500: #00a5ef; + --color-blue-500: #3080ff; + --color-indigo-500: #625fff; + --color-violet-500: #8d54ff; + --color-purple-500: #ac4bff; + --color-fuchsia-500: #e12afb; + --color-pink-500: #f6339a; + --color-rose-500: #ff2357; + --color-slate-900: #0f172b; + --color-gray-900: #101828; + --color-zinc-900: #18181b; + --color-neutral-900: #171717; + --color-stone-900: #1c1917; + --color-black: #000; + --color-white: #fff; + --spacing: 8rpx; + --text-base: 32rpx; + --font-weight-bold: 700; + --radius-lg: 16rpx; + --default-font-family: var(--font-inter), system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; + --default-mono-font-family: var(--font-plex-mono), monospace; --top-window-height: 0px; --window-top: 0px; --window-bottom: 0px; diff --git a/e2e/__snapshots__/e2e/uni-app-x-vdom-tailwindcss-v4/main.wxss b/e2e/__snapshots__/e2e/uni-app-x-vdom-tailwindcss-v4/main.wxss index 142b85b34..79916e71a 100644 --- a/e2e/__snapshots__/e2e/uni-app-x-vdom-tailwindcss-v4/main.wxss +++ b/e2e/__snapshots__/e2e/uni-app-x-vdom-tailwindcss-v4/main.wxss @@ -84,18 +84,6 @@ wx-root-portal-content { color: #fff; font-size: 26px; } -.template-corpus-apply { - display: flex; - align-items: center; - border-radius: 20px; - background-color: #9e58e9; - padding-left: 18px; - padding-right: 18px; - padding-top: 10px; - padding-bottom: 10px; - color: #fff; - font-size: 26px; -} .my-3 { margin-top: calc(var(--spacing) * 3); margin-bottom: calc(var(--spacing) * 3); @@ -659,6 +647,7 @@ wx-root-portal-content { } page { height: 100%; + display: flex; flex-direction: column; } @@ -671,11 +660,14 @@ ad-rewarded-video, ad, animation-view, audio, -button, camera, canvas, checkbox-group, +button, checkbox, +picker-view, +radio, +slider, cover-image, cover-view, custom-tab-bar, @@ -697,13 +689,10 @@ navigation-bar, navigator, open-data, page-meta, -picker-view, picker, radio-group, -radio, rich-text, scroll-view, -slider, sticky-header, sticky-section, swiper-item, diff --git a/e2e/__snapshots__/e2e/weapp-vite-tailwindcss-v4/app.wxss b/e2e/__snapshots__/e2e/weapp-vite-tailwindcss-v4/app.wxss index f089b967e..1b32a12f4 100644 --- a/e2e/__snapshots__/e2e/weapp-vite-tailwindcss-v4/app.wxss +++ b/e2e/__snapshots__/e2e/weapp-vite-tailwindcss-v4/app.wxss @@ -56,6 +56,103 @@ wx-root-portal-content { --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } +:host { + line-height: 1.5; + tab-size: 4; + font-family: var( + --default-font-family, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + 'Noto Sans', + Arial, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji' + ); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); +} +.hr { + height: 0; + color: inherit; + border-top-width: 1px; +} +abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; +} +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-size: inherit; + font-weight: inherit; +} +.a { + color: inherit; + text-decoration: inherit; +} +.b, +.strong { + font-weight: bolder; +} +.code, +.pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; +} +.small { + font-size: 80%; +} +.table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; +} +:-moz-focusring:not(iframe) { + outline: auto; +} +.ol, +.ul { + list-style: none; +} +.img, +video, +canvas, +audio { + display: block; + vertical-align: middle; +} +.img, +video { + max-width: 100%; + height: auto; +} +button, +input[type='button'], +input[type='reset'], +input[type='submit'] { + appearance: button; +} +button::after, +wx-button::after { + display: none; + border: none; + content: ''; +} + +wx-button { + background: #000; +} .mt-2 { margin-top: calc(var(--spacing) * 2); } @@ -248,22 +345,16 @@ wx-root-portal-content { background-color: var(--color-zinc-50); } .bg-gradient-to-b { - --tw-gradient-position: to bottom; --tw-gradient-position: to bottom; background-image: linear-gradient(var(--tw-gradient-stops)); - background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-t { - --tw-gradient-position: to top; --tw-gradient-position: to top; background-image: linear-gradient(var(--tw-gradient-stops)); - background-image: linear-gradient(var(--tw-gradient-stops)); } .bg-gradient-to-tr { - --tw-gradient-position: to top right; --tw-gradient-position: to top right; background-image: linear-gradient(var(--tw-gradient-stops)); - background-image: linear-gradient(var(--tw-gradient-stops)); } .from-_b_h2f73f1_B { --tw-gradient-from: #2f73f1; @@ -417,29 +508,6 @@ wx-root-portal-content { transform: scale(0.96); } } -.from-_b_h2f73f1_B { - --tw-gradient-from: #2f73f1; - --tw-gradient-stops: var(--tw-gradient-via-stops, initial), var(--tw-gradient-from) var(--tw-gradient-from-position,), var(--tw-gradient-to) var(--tw-gradient-to-position,); -} -.to-_b_h4bcefd_B { - --tw-gradient-to: #4bcefd; - --tw-gradient-stops: var(--tw-gradient-via-stops, initial), var(--tw-gradient-from) var(--tw-gradient-from-position,), var(--tw-gradient-to) var(--tw-gradient-to-position,); -} -.transition-colors { - transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; - transition-timing-function: var(--tw-ease, initial); - transition-duration: var(--tw-duration, initial); -} -button::after, -wx-button::after { - display: none; - border: none; - content: ''; -} - -wx-button { - background: #000; -} wx-button { background: #444; @@ -448,4 +516,3 @@ wx-button { abc { background: #222; } -/*$vite$:1*/ diff --git a/e2e/__snapshots__/e2e/weapp-vite-tailwindcss-v4/sub-independent/pages/index.wxss b/e2e/__snapshots__/e2e/weapp-vite-tailwindcss-v4/sub-independent/pages/index.wxss index c28d71932..93f1244d9 100644 --- a/e2e/__snapshots__/e2e/weapp-vite-tailwindcss-v4/sub-independent/pages/index.wxss +++ b/e2e/__snapshots__/e2e/weapp-vite-tailwindcss-v4/sub-independent/pages/index.wxss @@ -19,6 +19,96 @@ wx-root-portal-content { --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } +:host { + line-height: 1.5; + tab-size: 4; + font-family: var( + --default-font-family, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + 'Noto Sans', + Arial, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji' + ); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); +} +.hr { + height: 0; + color: inherit; + border-top-width: 1px; +} +abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; +} +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-size: inherit; + font-weight: inherit; +} +.a { + color: inherit; + text-decoration: inherit; +} +.b, +.strong { + font-weight: bolder; +} +.code, +.pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; +} +.small { + font-size: 80%; +} +.table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; +} +:-moz-focusring:not(iframe) { + outline: auto; +} +.ol, +.ul { + list-style: none; +} +.img, +video, +canvas, +audio { + display: block; + vertical-align: middle; +} +.img, +video { + max-width: 100%; + height: auto; +} +button, +input[type='button'], +input[type='reset'], +input[type='submit'] { + appearance: button; +} +[hidden]:not([hidden='until-found']) { + display: none !important; +} .bg-independent-subpackage-marker { background-color: #dc2626; } @@ -26,4 +116,3 @@ wx-root-portal-content { --tw-content: 'independent subpackage weapp-vite-tailwindcss-v4'; content: var(--tw-content); } -/*$vite$:1*/ diff --git a/e2e/__snapshots__/e2e/weapp-vite-tailwindcss-v4/sub-normal/pages/index.wxss b/e2e/__snapshots__/e2e/weapp-vite-tailwindcss-v4/sub-normal/pages/index.wxss index 4440c4a38..879a187c6 100644 --- a/e2e/__snapshots__/e2e/weapp-vite-tailwindcss-v4/sub-normal/pages/index.wxss +++ b/e2e/__snapshots__/e2e/weapp-vite-tailwindcss-v4/sub-normal/pages/index.wxss @@ -19,6 +19,96 @@ wx-root-portal-content { --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } +:host { + line-height: 1.5; + tab-size: 4; + font-family: var( + --default-font-family, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + 'Helvetica Neue', + 'Noto Sans', + Arial, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji', + 'Segoe UI Symbol', + 'Noto Color Emoji' + ); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); +} +.hr { + height: 0; + color: inherit; + border-top-width: 1px; +} +abbr[title] { + text-decoration: underline; + text-decoration: underline dotted; +} +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-size: inherit; + font-weight: inherit; +} +.a { + color: inherit; + text-decoration: inherit; +} +.b, +.strong { + font-weight: bolder; +} +.code, +.pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; +} +.small { + font-size: 80%; +} +.table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; +} +:-moz-focusring:not(iframe) { + outline: auto; +} +.ol, +.ul { + list-style: none; +} +.img, +video, +canvas, +audio { + display: block; + vertical-align: middle; +} +.img, +video { + max-width: 100%; + height: auto; +} +button, +input[type='button'], +input[type='reset'], +input[type='submit'] { + appearance: button; +} +[hidden]:not([hidden='until-found']) { + display: none !important; +} .bg-normal-subpackage-marker { background-color: #2563eb; } @@ -26,4 +116,3 @@ wx-root-portal-content { --tw-content: 'normal subpackage weapp-vite-tailwindcss-v4'; content: var(--tw-content); } -/*$vite$:1*/ diff --git a/e2e/canonical-template-build-smoke.test.ts b/e2e/canonical-template-build-smoke.test.ts index ed0794186..337227fec 100644 --- a/e2e/canonical-template-build-smoke.test.ts +++ b/e2e/canonical-template-build-smoke.test.ts @@ -4,7 +4,7 @@ import fg from 'fast-glob' import path from 'pathe' import { describe, expect, it } from 'vitest' import { CANONICAL_TEMPLATE_CASES } from './canonicalTemplateMatrix' -import { TEMPLATE_PACKAGE_MANAGER, TEMPLATE_WEAPP_TAILWINDCSS_RANGE } from './templateContract' +import { isTemplateVersionCompatible, TEMPLATE_PACKAGE_MANAGER } from './templateContract' const repoRoot = path.resolve(__dirname, '..') const templatesRoot = path.resolve(repoRoot, 'templates') @@ -90,7 +90,7 @@ describe('canonical template build smoke', () => { const deps = { ...pkg.dependencies, ...pkg.devDependencies } expect(pkg.packageManager, `${item.name} should pin pnpm`).toBe(TEMPLATE_PACKAGE_MANAGER) expect(deps.tailwindcss, `${item.name} should use Tailwind CSS v4`).toMatch(/^\^4\./) - expect(deps['weapp-tailwindcss'], `${item.name} should use the current v5 template range`).toBe(TEMPLATE_WEAPP_TAILWINDCSS_RANGE) + expect(isTemplateVersionCompatible(deps['weapp-tailwindcss']), `${item.name} should accept the current stable version`).toBe(true) expect(deps['@tailwindcss/postcss'], `${item.name} must not register the official PostCSS generator`).toBeUndefined() expect(deps['@tailwindcss/vite'], `${item.name} must not register the official Vite generator`).toBeUndefined() const cssEntry = await fs.readFile(path.resolve(root, item.cssEntry), 'utf8') diff --git a/e2e/subpackage-uni-app-vite-tailwindcss-v4.test.ts b/e2e/subpackage-uni-app-vite-tailwindcss-v4.test.ts index 884bcd6e5..dd189116e 100644 --- a/e2e/subpackage-uni-app-vite-tailwindcss-v4.test.ts +++ b/e2e/subpackage-uni-app-vite-tailwindcss-v4.test.ts @@ -1,5 +1,9 @@ import type { ProjectEntry } from './shared' -import { defineProjectTest } from './projectTest' +import fs from 'node:fs/promises' +import path from 'node:path' +import postcss from 'postcss' +import { expect, it } from 'vitest' +import { defineProjectTest, ensureProjectBuilt } from './projectTest' const project = { name: 'subpackage-uni-app-vite-tailwindcss-v4', @@ -18,3 +22,23 @@ defineProjectTest(project, { suite: 'e2e', fixturesDir: '../demo', }) + +it('保留 uni-app runtime 的原始单位和用户变量', async () => { + await ensureProjectBuilt(path.resolve(__dirname, '../demo', project.name)) + const css = postcss.parse(await fs.readFile(path.resolve(__dirname, '../demo', project.projectPath, project.cssFile), 'utf8')) + for (const [property, value] of [ + ['--test-color', '#006241'], + ['--status-bar-height', '25px'], + ['--top-window-height', '0px'], + ['--window-top', '0px'], + ['--window-bottom', '0px'], + ['--window-left', '0px'], + ['--window-right', '0px'], + ]) { + const values: string[] = [] + css.walkDecls(property, (declaration) => { + values.push(declaration.value) + }) + expect(values, property).toEqual([value]) + } +}) diff --git a/e2e/taro-ci-coverage-matrix.test.ts b/e2e/taro-ci-coverage-matrix.test.ts index 563fe86e3..fbe2a679c 100644 --- a/e2e/taro-ci-coverage-matrix.test.ts +++ b/e2e/taro-ci-coverage-matrix.test.ts @@ -1,5 +1,8 @@ import fs from 'node:fs' +import { posix, win32 } from 'node:path' +import { runInNewContext } from 'node:vm' import path from 'pathe' +import ts from 'typescript' import { describe, expect, it } from 'vitest' import { DEMO_COVERAGE_MATRIX } from './demoCoverageMatrix' import { E2E_PROJECTS } from './projectEntries' @@ -138,12 +141,32 @@ describe('Taro CI coverage matrix', () => { } }) - it('keeps H5 designWidth numeric while issue 998 uses file-aware mini-program sizing', () => { - for (const name of ['taro-vite-react-tailwindcss-v4', 'taro-webpack-react-tailwindcss-v4']) { - const config = configFiles(name).map(readText).join('\n') - expect(config, `${name} should preserve numeric designWidth for H5`).toContain('designWidth: taroPlatform.isWeb') - expect(config, `${name} should preserve the original H5 design width`).toContain('? 750') - expect(config, `${name} should retain the issue 998 file-aware mini-program branch`).toContain('file.includes(\'/pages/issue-998/\')') + it.each(['taro-vite-react-tailwindcss-v4', 'taro-webpack-react-tailwindcss-v4'])('验证 %s 的跨平台 designWidth 行为', (name) => { + const file = path.join(repoRoot, 'demo', name, 'config', 'index.ts') + const ast = ts.createSourceFile(file, readText(file), ts.ScriptTarget.Latest, true) + let expression: string | undefined + const visit = (node: ts.Node) => { + if (ts.isPropertyAssignment(node) && node.name.getText(ast) === 'designWidth') { + expression = node.initializer.getText(ast) + } + ts.forEachChild(node, visit) + } + visit(ast) + expect(expression).toBeDefined() + const evaluate = (isWeb: boolean, projectRoot: string) => runInNewContext(`(${expression})`, { taroPlatform: { isWeb }, win32, projectRoot }) as number | ((input?: { file?: string }) => number) + for (const root of ['/workspace/project', 'C:\\workspace\\project']) { + expect(evaluate(true, root)).toBe(750) + const width = evaluate(false, root) as (input?: { file?: string }) => number + expect(width({ file: win32.join(root, 'src', 'pages', 'issue-998', 'index.css') })).toBe(375) + if (root.startsWith('/')) { + expect(width({ file: posix.join(root, 'src', 'pages', 'issue-998', 'index.css') })).toBe(375) + } + expect(width({ file: 'src/pages/issue-998/index.css' })).toBe(375) + expect(width({ file: 'src\\pages\\issue-998\\index.css' })).toBe(375) + expect(width({ file: 'src/pages/issue-998-other/index.css' })).toBe(750) + expect(width({ file: 'src/pages/issue-998/child/index.css' })).toBe(750) + expect(width({ file: 'D:\\elsewhere\\src\\pages\\issue-998\\index.css' })).toBe(750) + expect(width()).toBe(750) } }) diff --git a/e2e/taro-vite-react-tailwindcss-v4.test.ts b/e2e/taro-vite-react-tailwindcss-v4.test.ts index c54b981f3..340d5e589 100644 --- a/e2e/taro-vite-react-tailwindcss-v4.test.ts +++ b/e2e/taro-vite-react-tailwindcss-v4.test.ts @@ -1,9 +1,11 @@ import fs from 'node:fs/promises' import process from 'node:process' import path from 'pathe' +import postcss from 'postcss' import { describe, expect, it } from 'vitest' import { getE2EProject } from './projectEntries' import { defineProjectTest, ensureProjectBuilt } from './projectTest' +import { getProjectCssFiles } from './shared' import { defineTaroBareSelectorRegression } from './taroBareSelectorRegression' const project = getE2EProject('taro-vite-react-tailwindcss-v4') @@ -47,6 +49,33 @@ async function readCssWithLocalImports(projectPath: string, file: string, seen = } describe('e2e', () => { + it('保留 NutUI 多选择器规则之后的单选择器覆盖', async () => { + const root = path.resolve(__dirname, '../demo', project.projectPath) + if (process.env.E2E_SKIP_BUILD !== '1') { + await ensureProjectBuilt(root) + } + const css = (await Promise.all(getProjectCssFiles(project).map(file => readCssWithLocalImports(root, file)))).join('\n') + const parsed = postcss.parse(css) + const values = (selector: string, property: string) => { + const result: string[] = [] + parsed.walkRules((rule) => { + if (rule.selectors.includes(selector)) { + rule.walkDecls(property, (decl) => { + result.push(decl.value.replace(/\s*,\s*/g, ',')) + }) + } + }) + return result + } + // NutUI 原始 CSS 先声明组合选择器，再对其中一个选择器覆盖；覆盖必须继续生效。 + expect(values('.nut-tabs-titles-item-smile', 'bottom').at(-1)) + .toBe('var(--nutui-tabs-titles-item-smile-bottom,-10%)') + expect(values('.nut-tabs-titles-item-line', 'bottom').at(-1)) + .toBe('var(--nutui-tabs-line-bottom,15%)') + expect(values('.nut-indicator-white .nut-indicator-line', 'opacity').at(-1)).toBe('0') + expect(values('.nut-indicator-white .nut-indicator-dot', 'opacity').at(-1)).toBe('1') + }) + it('converts Tailwind v4 spacing variables with Taro designWidth in issue 998 page CSS', async () => { const projectBase = path.resolve(__dirname, '../demo') const root = path.resolve(projectBase, project.name) diff --git a/e2e/template-contract.test.ts b/e2e/template-contract.test.ts new file mode 100644 index 000000000..7856d36c3 --- /dev/null +++ b/e2e/template-contract.test.ts @@ -0,0 +1,15 @@ +import { describe, expect, it } from 'vitest' +import manifest from '../packages/weapp-tailwindcss/package.json' +import { isTemplateVersionCompatible } from './templateContract' + +const major = Number(manifest.version.split('.')[0]) + +describe('模板稳定版兼容范围', () => { + it.each([`^${major}.0.0`, `^${manifest.version}`, manifest.version])('接受兼容范围 %s', (range) => { + expect(isTemplateVersionCompatible(range)).toBe(true) + }) + + it.each([`>=${major + 1}.0.0`, `<${major}.0.0`, 'invalid', 'workspace:*', undefined, null])('拒绝不兼容或无效范围 %s', (range) => { + expect(isTemplateVersionCompatible(range)).toBe(false) + }) +}) diff --git a/e2e/templateContract.ts b/e2e/templateContract.ts index 0bb60b12f..0d7e29b6c 100644 --- a/e2e/templateContract.ts +++ b/e2e/templateContract.ts @@ -1,5 +1,9 @@ +import semver from 'semver' import packageManifest from '../packages/weapp-tailwindcss/package.json' import { repositoryManifest } from '../scripts/ci/version-contract.mjs' export const TEMPLATE_PACKAGE_MANAGER = repositoryManifest.packageManager -export const TEMPLATE_WEAPP_TAILWINDCSS_RANGE = `^${packageManifest.version}` + +export function isTemplateVersionCompatible(range: unknown) { + return typeof range === 'string' && semver.validRange(range) !== null && semver.satisfies(packageManifest.version, range) +} diff --git a/e2e/templates-build-smoke.test.ts b/e2e/templates-build-smoke.test.ts index da9173252..6ab431cd9 100644 --- a/e2e/templates-build-smoke.test.ts +++ b/e2e/templates-build-smoke.test.ts @@ -5,7 +5,7 @@ import fg from 'fast-glob' import path from 'pathe' import { describe, expect, it } from 'vitest' import { CANONICAL_TEMPLATE_CASES } from './canonicalTemplateMatrix' -import { TEMPLATE_PACKAGE_MANAGER, TEMPLATE_WEAPP_TAILWINDCSS_RANGE } from './templateContract' +import { isTemplateVersionCompatible, TEMPLATE_PACKAGE_MANAGER } from './templateContract' interface TemplateCase { name: string @@ -501,7 +501,7 @@ describe('templates build smoke', () => { expect(workspace).toContain('- .') expect(await fs.readFile(path.resolve(root, '.npmrc'), 'utf8')).toContain('registry=https://registry.npmjs.org/') - expect(deps['weapp-tailwindcss']).toBe(TEMPLATE_WEAPP_TAILWINDCSS_RANGE) + expect(isTemplateVersionCompatible(deps['weapp-tailwindcss'])).toBe(true) expect(deps['@tailwindcss/postcss'], `${item.name} should not register the official PostCSS generator`).toBeUndefined() expect(deps['@tailwindcss/vite'], `${item.name} should not register the official Vite generator`).toBeUndefined() expect(pkg.scripts?.postinstall ?? '', `${item.name} should not patch Tailwind CSS`).not.toMatch(/weapp-tw\s+patch/u) diff --git a/e2e/uni-app-vite-tailwindcss-v4-layer-output.test.ts b/e2e/uni-app-vite-tailwindcss-v4-layer-output.test.ts index bbc26d89a..6d013f5e3 100644 --- a/e2e/uni-app-vite-tailwindcss-v4-layer-output.test.ts +++ b/e2e/uni-app-vite-tailwindcss-v4-layer-output.test.ts @@ -66,6 +66,7 @@ describe('uni-app vite vue3 Tailwind v4 cascade layer output', () => { expect(css.match(/(?:^|[\n,{])\s*button::after/g), 'mp-weixin css should not replay base layer rules').toHaveLength(1) expect(css.match(/\.layer-card-v4/g), 'mp-weixin css should not replay component layer rules').toHaveLength(1) expect(css.match(/wx-button\s*\{\s*background:\s*#000/g), 'mp-weixin css should not replay layer declarations').toHaveLength(1) + expect(css.search(/wx-button\s*\{\s*background:\s*#000/), 'base background should precede utilities').toBeLessThan(utilityIndex) expect(css.match(/wx-button\s*\{\s*background:\s*#444/g), 'mp-weixin css should preserve the unlayered override').toHaveLength(1) }, 600_000) diff --git a/packages/weapp-tailwindcss/src/bundlers/shared/framework-css-composition.ts b/packages/weapp-tailwindcss/src/bundlers/shared/framework-css-composition.ts new file mode 100644 index 000000000..11ed5ff0e --- /dev/null +++ b/packages/weapp-tailwindcss/src/bundlers/shared/framework-css-composition.ts @@ -0,0 +1,203 @@ +import { postcss } from '@weapp-tailwindcss/postcss' + +function nodeContent(node: postcss.ChildNode): string { + switch (node.type) { + case 'decl': + return `decl\u0000${node.prop}\u0000${node.value}\u0000${node.important ? '1' : '0'}` + case 'rule': + return `rule\u0000${node.selectors.map(selector => selector.trim()).join('\u0001')}\u0000${node.nodes.reduce((parts, child) => { + if (child.type !== 'comment') { + parts.push(nodeContent(child)) + } + return parts + }, []).join('\u0002')}` + case 'atrule': + return `atrule\u0000${node.name}\u0000${node.params}\u0000${node.nodes?.reduce((parts, child) => { + if (child.type !== 'comment') { + parts.push(nodeContent(child)) + } + return parts + }, []).join('\u0002') ?? ''}` + default: + return `comment\u0000${node.text}` + } +} + +function visitRules( + container: postcss.Container, + context: string, + visit: (node: postcss.Rule | postcss.AtRule, key: string, context: string) => void, +) { + container.each((node) => { + if (node.type === 'rule' || (node.type === 'atrule' && /^(?:font-face|(?:-\w+-)?keyframes)$/.test(node.name))) { + visit(node, `${context}\u0000${nodeContent(node)}`, context) + } + else if (node.type === 'atrule' && node.nodes && !(node.name === 'layer' && !node.params.trim())) { + // 匿名层每次出现都建立独立层身份，不能跨输入匹配其中的规则。 + visitRules(node, `${context}\u0000${node.name}\u0000${node.params}`, visit) + } + }) +} + +interface RuleRecord { + node: postcss.Rule | postcss.AtRule + key: string + context: string +} + +function collectRules(root: postcss.Root) { + const rules: RuleRecord[] = [] + visitRules(root, '', (node, key, context) => rules.push({ node, key, context })) + return rules +} + +function removeRules(container: postcss.Container, removed: Set, ruleKeys: Map) { + const nodes = container.nodes ?? [] + const retained: postcss.ChildNode[] = [] + for (const node of nodes) { + if (removed.has(node)) { + continue + } + const key = ruleKeys.get(node) + const previous = retained.at(-1) + // 相邻且完全相同的规则没有中间覆盖；复用已有索引，避免新增解析或逐条删除。 + if (key && previous && key === ruleKeys.get(previous)) { + continue + } + if (node.type === 'atrule' && node.nodes?.length) { + removeRules(node, removed, ruleKeys) + // 空的命名层仍声明级联顺序，清理规则时必须保留这个位置。 + if (node.nodes.length === 0 && node.name !== 'layer') { + continue + } + } + retained.push(node) + } + if (retained.length !== nodes.length) { + // 一次重建子节点数组，避免逐条 remove 导致大产物反复移动数组内容。 + container.removeAll() + container.append(retained) + } +} + +function matchOrderedPrefix(rules: RuleRecord[], positions: Map) { + const prefix: number[] = [] + let previous = -1 + for (const rule of rules) { + const matches = positions.get(rule.key) ?? [] + let left = 0 + let right = matches.length + while (left < right) { + const middle = (left + right) >>> 1 + if (matches[middle]! <= previous) { + left = middle + 1 + } + else { + right = middle + } + } + if (left === matches.length) { + break + } + previous = matches[left]! + prefix.push(previous) + } + return prefix +} + +/** 保留生成侧已确定的层位置；框架侧重复选择器及其间的覆盖区间按原顺序恢复。 */ +export function composeFrameworkProcessedCss(before: string, generated: string, after: string) { + // 常见的纯生成路径无需解析 AST；框架样式为空时直接返回，避免构建插件额外分配大量节点。 + if (!before.trim() && !after.trim()) { + return generated + } + const inputs = [before, generated, after] + try { + const roots = inputs.map(css => postcss.parse(css)) + const generatedRules = collectRules(roots[1]!) + const generatedKeys = new Set(generatedRules.map(rule => rule.key)) + const positions = new Map() + generatedRules.forEach((rule, index) => { + const matches = positions.get(rule.key) ?? [] + matches.push(index) + positions.set(rule.key, matches) + }) + const frameworkRules = [...collectRules(roots[0]!), ...collectRules(roots[2]!)] + const ruleKeys = new Map([...generatedRules, ...frameworkRules].map(record => [record.node, record.key])) + const scopes = new Map() + for (const record of frameworkRules) { + const rules = scopes.get(record.context) ?? [] + rules.push(record) + scopes.set(record.context, rules) + } + const preserve = new Set() + const generatedPrefix = new Set() + for (const rules of scopes.values()) { + const ranges = new Map() + rules.forEach(({ node }, index) => { + const selectors = node.type === 'rule' ? node.selectors : [JSON.stringify([node.name, node.params])] + // 组合选择器中的每一项都参与覆盖区间，防止漏掉后续单选择器覆盖。 + for (const selector of selectors) { + const range = ranges.get(selector) + if (range) { + range[1] = index + } + else { + ranges.set(selector, [index, index]) + } + } + }) + const boundaries = new Int32Array(rules.length + 1) + for (const [first, last] of ranges.values()) { + if (first !== last) { + boundaries[first]! += 1 + boundaries[last + 1]! -= 1 + } + } + let depth = 0 + let start = 0 + for (let index = 0; index < rules.length; index++) { + const previousDepth = depth + depth += boundaries[index]! + if (previousDepth === 0 && depth > 0) { + start = index + } + if (depth > 0 && depth + boundaries[index + 1]! === 0) { + const group = rules.slice(start, index + 1) + // 已有前缀保留层位置；从首次缺失处恢复后缀，避免将 base 规则移到 utilities 后面。 + const prefix = matchOrderedPrefix(group, positions) + if (prefix.length !== group.length) { + prefix.forEach(position => generatedPrefix.add(generatedRules[position]!.node)) + group.slice(prefix.length).forEach(record => preserve.add(record)) + } + } + } + } + const restoredKeys = new Set([...preserve].map(record => record.key)) + const removed = new Set() + for (const record of frameworkRules) { + if (!preserve.has(record) && generatedKeys.has(record.key)) { + removed.add(record.node) + } + } + for (const record of generatedRules) { + if (restoredKeys.has(record.key) && !generatedPrefix.has(record.node)) { + removed.add(record.node) + } + } + let charset: postcss.AtRule | undefined + for (const root of roots) { + removeRules(root, removed, ruleKeys) + root.walkAtRules('charset', (rule) => { + charset ??= rule.clone({ raws: { before: '', afterName: ' ' } }) + rule.remove() + }) + } + const css = roots.map(root => root.toString()).filter(value => value.trim()).join('\n') + return charset ? `${charset.toString()};\n${css}` : css + } + catch { + // 不完整输入不做集合清理，避免解析失败时损失用户内容。 + return inputs.filter(value => value.trim()).join('\n') + } +} diff --git a/packages/weapp-tailwindcss/src/bundlers/shared/framework-user-css.ts b/packages/weapp-tailwindcss/src/bundlers/shared/framework-user-css.ts index 1371b66f8..50fc82aa9 100644 --- a/packages/weapp-tailwindcss/src/bundlers/shared/framework-user-css.ts +++ b/packages/weapp-tailwindcss/src/bundlers/shared/framework-user-css.ts @@ -1,8 +1,11 @@ import type { GenerateCssByGeneratorOptions, GenerateCssByGeneratorResult } from './generator-css' import type { NormalizedWeappTailwindcssGeneratorOptions } from '@/generator' -import { filterExistingCssRules, postcss } from '@weapp-tailwindcss/postcss' +import { postcss } from '@weapp-tailwindcss/postcss' +import { composeFrameworkProcessedCss } from './framework-css-composition' import { createCssSourceOrderAppend, finalizeMiniProgramGeneratorCss, resolveGeneratorStyleOptions, splitRawSourceByGeneratedCssOrder } from './generator-css/generation-helpers' +import { stripTailwindBanners } from './generator-css/markers' import { removeTailwindV4GeneratedUserCssArtifacts, splitUserCssLayerBlocks, stripTailwindSourceMediaFragments, stripUnmatchedTailwindSourceMediaCloseFragments, transformGeneratorUserCss } from './generator-css/user-css' +import { createGeneratedThemeDeclarationResolver } from './generator-css/user-css/generated-cleanup' import { reorderMarkedUserLayerComponentsCss, wrapUserLayerComponentsCss } from './generator-css/user-layer-order' function normalizeUserSource(source: string) { @@ -27,8 +30,10 @@ export async function restoreFrameworkProcessedUserCss( options: GenerateCssByGeneratorOptions, generatorOptions: NormalizedWeappTailwindcssGeneratorOptions, ) { + const generatedSource = createGeneratedThemeDeclarationResolver([generated.metadata?.rawCss, css].filter(Boolean).join('\n')) const userCssOptions = { generatorTarget: generated.target, + generatedSource, generatorStyleOptions: resolveGeneratorStyleOptions(options.opts, options.cssHandlerOptions, generatorOptions.styleOptions), cssUserHandlerOptions: options.cssUserHandlerOptions, styleHandler: options.styleHandler, @@ -44,14 +49,13 @@ export async function restoreFrameworkProcessedUserCss( options.runtimeState.tailwindRuntime.majorVersion, options.opts.cssPreflight, { injectPreflight: false, preservePreflight: generated.metadata?.preflightMode?.preserve, styleOptions: options.cssHandlerOptions }, - )) + ), generatedSource) } const userSource = normalizeUserSource(source) const ordered = splitRawSourceByGeneratedCssOrder(userSource, generated.metadata?.rawCss ?? '') ?? { before: '', after: userSource } // 已经过框架转换的 CSS 不再重放框架插件；双方完成小程序适配后再比较和合并。 - const before = filterExistingCssRules(css, await transform(ordered.before)) - const withBefore = createCssSourceOrderAppend(before, css) - const after = filterExistingCssRules(withBefore, await transform(ordered.after)) - return reorderMarkedUserLayerComponentsCss(createCssSourceOrderAppend(withBefore, after)) + const before = await transform(ordered.before) + const after = await transform(ordered.after) + return stripTailwindBanners(reorderMarkedUserLayerComponentsCss(composeFrameworkProcessedCss(before, css, after))) } diff --git a/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/legacy-compat.ts b/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/legacy-compat.ts index 03ad9bb9e..45880d608 100644 --- a/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/legacy-compat.ts +++ b/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/legacy-compat.ts @@ -273,7 +273,7 @@ export async function appendLegacyCompatCss( styleHandler: InternalUserDefinedOptions['styleHandler'], cssHandlerOptions: IStyleHandlerOptions, generatorStyleOptions: Partial | undefined, - options: { preserveSelectorOverrides?: boolean | undefined } = {}, + options: { preserveSelectorOverrides?: boolean | undefined, generatedSource?: string | undefined } = {}, ) { const resolvedCompatSource = resolveLegacyCompatCssSource(rawSource) const normalizedCompatSource = generatorTarget === 'weapp' @@ -302,6 +302,7 @@ export async function appendLegacyCompatCss( } const transformedCompatCss = removeTailwindV4GeneratedUserCssArtifacts( removeDuplicatedViteMarkers(removeUnsupportedMiniProgramAtRules(compatCss), css), + options.generatedSource ?? css, ) const cleanedCompatCss = options.preserveSelectorOverrides ? filterExistingCssRules(css, transformedCompatCss) diff --git a/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/pipeline/deferred-output.ts b/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/pipeline/deferred-output.ts index 14c48062a..b8f2712b8 100644 --- a/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/pipeline/deferred-output.ts +++ b/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/pipeline/deferred-output.ts @@ -35,6 +35,7 @@ export async function finalizeDeferredGeneratorCss( const userCssOptions = { generatorTarget: generated.target, + generatedSource: generated.rawCss, generatorStyleOptions, cssUserHandlerOptions, styleHandler, diff --git a/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/pipeline/fallback-output.ts b/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/pipeline/fallback-output.ts index 95639cad4..313acf625 100644 --- a/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/pipeline/fallback-output.ts +++ b/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/pipeline/fallback-output.ts @@ -30,6 +30,7 @@ export async function finalizeFallbackGeneratorCss( ) { const userCss = await transformGeneratorUserCss(generatedUserCssRawSource, { generatorTarget: generated.target, + generatedSource: generated.rawCss, generatorStyleOptions, cssUserHandlerOptions, styleHandler, @@ -44,6 +45,7 @@ export async function finalizeFallbackGeneratorCss( const layerParts = splitUserCssLayerBlocks(generatorRawSource) const layerUserCss = await transformGeneratorUserCss(layerParts.layer, { generatorTarget: generated.target, + generatedSource: generated.rawCss, generatorStyleOptions, cssUserHandlerOptions, styleHandler, @@ -71,6 +73,7 @@ export async function finalizeFallbackGeneratorCss( distinctUserLayerParts.layer, { generatorTarget: generated.target, + generatedSource: generated.rawCss, generatorStyleOptions, cssUserHandlerOptions, styleHandler, @@ -99,6 +102,7 @@ export async function finalizeFallbackGeneratorCss( : generatedUserCssRawSource const userCss = await transformGeneratorUserCss(distinctUserCssRawSource, { generatorTarget: generated.target, + generatedSource: generated.rawCss, generatorStyleOptions, cssUserHandlerOptions, styleHandler, @@ -116,12 +120,13 @@ export async function finalizeFallbackGeneratorCss( && hasGeneratedMarkers && !hasGeneratedCss ) { - const cleanedUserCssRawSource = removeTailwindV4GeneratedUserCssArtifacts(userCssRawSource) + const cleanedUserCssRawSource = removeTailwindV4GeneratedUserCssArtifacts(userCssRawSource, generated.rawCss) const cleanedUserCssRestSource = restoredDistinctUserLayerCss && hasUserCssLayerBlocks(cleanedUserCssRawSource) ? splitUserCssLayerBlocks(cleanedUserCssRawSource).rest : cleanedUserCssRawSource const userCss = await transformGeneratorUserCss(cleanedUserCssRestSource, { generatorTarget: generated.target, + generatedSource: generated.rawCss, generatorStyleOptions, cssUserHandlerOptions, styleHandler, @@ -134,6 +139,7 @@ export async function finalizeFallbackGeneratorCss( else if (hasMatchedCssSourceFile && generated.target === 'weapp' && hasUserCssLayerBlocks(generatedUserCssRawSource)) { const layerUserCss = await transformGeneratorUserCss(splitUserCssLayerBlocks(generatedUserCssRawSource).layer, { generatorTarget: generated.target, + generatedSource: generated.rawCss, generatorStyleOptions, cssUserHandlerOptions, styleHandler, @@ -177,6 +183,7 @@ export async function finalizeFallbackGeneratorCss( ) { const userCss = await transformGeneratorUserCss(generatedUserCssRawSource, { generatorTarget: generated.target, + generatedSource: generated.rawCss, generatorStyleOptions, cssUserHandlerOptions, styleHandler, @@ -217,7 +224,7 @@ export async function finalizeFallbackGeneratorCss( styleHandler, cssHandlerOptions, generatorStyleOptions, - { preserveSelectorOverrides: shouldPreserveLegacyCompatSelectorOverrides }, + { preserveSelectorOverrides: shouldPreserveLegacyCompatSelectorOverrides, generatedSource: generated.rawCss }, ) css = await appendLegacyContainerCompatCss( css, @@ -243,6 +250,7 @@ export async function finalizeFallbackGeneratorCss( : generatedUserCssRawSource const userCss = await transformGeneratorUserCss(distinctUserCssRawSource, { generatorTarget: generated.target, + generatedSource: generated.rawCss, generatorStyleOptions, cssUserHandlerOptions, styleHandler, diff --git a/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/pipeline/ordered-output.ts b/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/pipeline/ordered-output.ts index 9a9eea958..c9df4e4d8 100644 --- a/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/pipeline/ordered-output.ts +++ b/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/pipeline/ordered-output.ts @@ -58,6 +58,7 @@ export async function finalizeOrderedGeneratorCss( } const userCssOptions = { generatorTarget: generated.target, + generatedSource: generated.rawCss, generatorStyleOptions, cssUserHandlerOptions, styleHandler, @@ -137,7 +138,7 @@ export async function finalizeOrderedGeneratorCss( styleHandler, cssHandlerOptions, generatorStyleOptions, - { preserveSelectorOverrides: shouldPreserveLegacyCompatSelectorOverrides }, + { preserveSelectorOverrides: shouldPreserveLegacyCompatSelectorOverrides, generatedSource: generated.rawCss }, ) if (!isolateCurrentCssCandidates) { css = await appendLegacyContainerCompatCss( diff --git a/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/user-css/generated-cleanup.ts b/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/user-css/generated-cleanup.ts index fd1cbb632..34d95448c 100644 --- a/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/user-css/generated-cleanup.ts +++ b/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/user-css/generated-cleanup.ts @@ -132,11 +132,50 @@ function isTailwindGeneratedThemeScopeSelector(selector: string) { ) } -function isTailwindGeneratedThemeRule(selector: string, node: { nodes?: any[] | undefined }) { - if (!isTailwindGeneratedThemeScopeSelector(selector)) { - return false +function themeDeclarationContext(declaration: postcss.Declaration) { + const context: string[] = [] + let parent = declaration.parent?.parent + while (parent && parent.type !== 'root') { + if (parent.type === 'atrule' && parent.name !== 'layer') { + context.unshift(`@${parent.name} ${parent.params}`) + } + parent = parent.parent } - return node.nodes?.some(child => child.type === 'decl' && /^--(?:color|spacing|text|font|default|radius|tw-)/.test(child.prop)) ?? false + return context +} + +function themeDeclarationKey(declaration: postcss.Declaration) { + // 压缩器可能省略小数前的零；只规范化完整数值，避免改动字符串或 URL。 + const value = declaration.value.trim().replace(/^(-?)0\.(\d+(?:[a-z]+|%)?)$/i, '$1.$2') + return JSON.stringify([themeDeclarationContext(declaration), declaration.prop, value, Boolean(declaration.important)]) +} + +function collectGeneratedThemeDeclarations(source: string) { + const declarations = new Set() + try { + const root = postcss.parse(source) + root.walkRules((rule) => { + const selector = rule.selector.replace(/\s+/g, ' ').replace(/\s*,\s*/g, ',').trim() + if (!isTailwindGeneratedThemeScopeSelector(selector)) { + return + } + for (const child of rule.nodes ?? []) { + if (child.type === 'decl') { + declarations.add(themeDeclarationKey(child)) + } + } + }) + } + catch {} + return declarations +} + +export type GeneratedThemeDeclarationResolver = () => ReadonlySet + +/** 同一轮框架恢复共享声明索引；只有遇到根变量时才解析生成产物。 */ +export function createGeneratedThemeDeclarationResolver(source: string): GeneratedThemeDeclarationResolver { + let declarations: ReadonlySet | undefined + return () => declarations ??= collectGeneratedThemeDeclarations(source) } function isTailwindGeneratedPreflightRule(selector: string, node: { nodes?: any[] | undefined }) { @@ -166,7 +205,7 @@ function isTailwindGeneratedPreflightRule(selector: string, node: { nodes?: any[ return false } -export function removeTailwindV4GeneratedUserCssArtifacts(source: string) { +export function removeTailwindV4GeneratedUserCssArtifacts(source: string, generatedSource?: string | GeneratedThemeDeclarationResolver) { try { const root = postcss.parse(source) let changed = false @@ -177,12 +216,36 @@ export function removeTailwindV4GeneratedUserCssArtifacts(source: string) { comment.remove() changed = true }) + let generatedDeclarations: ReadonlySet | undefined + const overriddenProperties = new Set() root.walkRules((rule) => { - const selector = rule.selector.replace(/\s+/g, ' ').trim() - if ( - isTailwindGeneratedThemeRule(selector, rule) - || isTailwindGeneratedPreflightRule(selector, rule) - ) { + const selector = rule.selector.replace(/\s+/g, ' ').replace(/\s*,\s*/g, ',').trim() + if (isTailwindGeneratedThemeScopeSelector(selector) + || (TAILWIND_GENERATED_THEME_SCOPE_SELECTORS.has(selector) && rule.nodes.some(child => child.type === 'decl' && child.prop.startsWith('--')))) { + generatedDeclarations ??= typeof generatedSource === 'function' + ? generatedSource() + : generatedSource ? collectGeneratedThemeDeclarations(generatedSource) : new Set() + // 只有生成阶段提供的精确声明能作为删除依据，未知来源的变量必须保留。 + for (const child of [...rule.nodes]) { + if (child.type !== 'decl') { + continue + } + const propertyKey = JSON.stringify([themeDeclarationContext(child), child.prop]) + if (generatedDeclarations?.has(themeDeclarationKey(child)) && !overriddenProperties.has(propertyKey)) { + child.remove() + changed = true + } + else { + overriddenProperties.add(propertyKey) + } + } + if (rule.nodes.length === 0) { + rule.remove() + changed = true + } + return + } + if (isTailwindGeneratedPreflightRule(selector, rule)) { rule.remove() changed = true } diff --git a/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/user-css/source-fragments.ts b/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/user-css/source-fragments.ts index f166d4420..31024ffb7 100644 --- a/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/user-css/source-fragments.ts +++ b/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/user-css/source-fragments.ts @@ -131,9 +131,29 @@ function hasClassSelector(selector: string) { return /(?:^|[^\w-])\.[_a-z\u00A0-\uFFFF\\-]/i.test(selector) } -export function collectBareSelectorUserCss(source: string) { +export function collectBareSelectorUserCss(source: string, transformedCss?: string) { try { const root = postcss.parse(source) + const representedSelectors = new Set() + const rootSelectors = new Set([':root', ':host', 'page', '.tw-root', 'wx-root-portal-content']) + const selectorKey = (rule: postcss.Rule, selector: string) => { + const context: string[] = [] + let parent = rule.parent + while (parent && parent.type !== 'root') { + if (parent.type === 'atrule') { + context.unshift(`@${parent.name} ${parent.params}`) + } + parent = parent.parent + } + return JSON.stringify([...context, rootSelectors.has(selector.trim()) ? ':root' : selector.trim()]) + } + if (transformedCss !== undefined) { + postcss.parse(transformedCss).walkRules((rule) => { + for (const selector of rule.selectors) { + representedSelectors.add(selectorKey(rule, selector)) + } + }) + } let changed = false root.walkAtRules('import', (rule) => { rule.remove() @@ -141,7 +161,8 @@ export function collectBareSelectorUserCss(source: string) { }) root.walkRules((rule) => { const selectors = rule.selectors?.length ? rule.selectors : [rule.selector] - if (selectors.some(selector => hasClassSelector(selector))) { + if (selectors.some(selector => hasClassSelector(selector)) + || selectors.every(selector => representedSelectors.has(selectorKey(rule, selector)))) { rule.remove() changed = true } diff --git a/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/user-css/transform.ts b/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/user-css/transform.ts index 5476c6efc..9a3dc28a6 100644 --- a/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/user-css/transform.ts +++ b/packages/weapp-tailwindcss/src/bundlers/shared/generator-css/user-css/transform.ts @@ -1,8 +1,10 @@ import type { IStyleHandlerOptions } from '@weapp-tailwindcss/postcss/types' +import type { GeneratedThemeDeclarationResolver } from './generated-cleanup' import type { InternalUserDefinedOptions } from '@/types' import { filterExistingCssRules } from '@weapp-tailwindcss/postcss' import { removeUnsupportedMiniProgramAtRules } from '../../css-cleanup' import { removeTailwindSourceDirectives } from '../directives' +import { stripTailwindBanners } from '../markers' import { removeTailwindApplyAtRules } from './at-rules' import { removeTailwindV4GeneratedUserCssArtifacts } from './generated-cleanup' import { collectBareSelectorUserCss, isCommentOnlyCss, removeProcessedMiniProgramUnsupportedCss, removeTailwindV4GeneratorAtRules, stripTailwindSourceMediaFragments, stripUnmatchedTailwindSourceMediaCloseFragments, unwrapMiniProgramCascadeLayers } from './source-fragments' @@ -15,6 +17,7 @@ export async function transformGeneratorUserCss( cssUserHandlerOptions: IStyleHandlerOptions styleHandler: InternalUserDefinedOptions['styleHandler'] importFallback: boolean + generatedSource?: string | GeneratedThemeDeclarationResolver | undefined processed?: boolean | undefined }, ) { @@ -30,6 +33,7 @@ export async function transformGeneratorUserCss( ...options.cssUserHandlerOptions, }), ), + options.generatedSource, ) : source return stripUnmatchedTailwindSourceMediaCloseFragments( @@ -54,7 +58,7 @@ export async function transformGeneratorUserCss( stripUnmatchedTailwindSourceMediaCloseFragments( stripTailwindSourceMediaFragments( options.generatorTarget === 'weapp' - ? removeTailwindV4GeneratedUserCssArtifacts(removeUnsupportedMiniProgramAtRules(unwrapMiniProgramCascadeLayers(cleanedSource))) + ? removeTailwindV4GeneratedUserCssArtifacts(removeUnsupportedMiniProgramAtRules(unwrapMiniProgramCascadeLayers(stripTailwindBanners(cleanedSource))), options.generatedSource) : cleanedSource, ), ), @@ -76,8 +80,8 @@ export async function transformGeneratorUserCss( ...options.generatorStyleOptions, ...options.cssUserHandlerOptions, }) - const transformedCss = removeTailwindV4GeneratedUserCssArtifacts(removeUnsupportedMiniProgramAtRules(css)) - const bareSelectorUserCss = collectBareSelectorUserCss(userSource) + const transformedCss = removeTailwindV4GeneratedUserCssArtifacts(removeUnsupportedMiniProgramAtRules(stripTailwindBanners(css)), options.generatedSource) + const bareSelectorUserCss = collectBareSelectorUserCss(userSource, transformedCss) const missingBareSelectorUserCss = bareSelectorUserCss.trim().length > 0 ? filterExistingCssRules(transformedCss, bareSelectorUserCss) : '' diff --git a/packages/weapp-tailwindcss/src/core/compiler/transforms.ts b/packages/weapp-tailwindcss/src/core/compiler/transforms.ts index e9e114c0a..5728fd98e 100644 --- a/packages/weapp-tailwindcss/src/core/compiler/transforms.ts +++ b/packages/weapp-tailwindcss/src/core/compiler/transforms.ts @@ -34,12 +34,22 @@ function resolveCssTransformOptions(options?: CompilerCssTransformOptions) { } function finalizeResultRoot(result: Awaited>, snapshot: CompilerSnapshot, shouldFinalize: boolean) { - if (!shouldFinalize || result.root.type !== 'root') { + if (!shouldFinalize) { return } - finalizeMiniProgramCssRoot(result.root, { - isTailwindcssV4: snapshot.target === 'weapp', - }) + if (result.root.type === 'root') { + finalizeMiniProgramCssRoot(result.root, { + isTailwindcssV4: snapshot.target === 'weapp', + }) + } + if (snapshot.target === 'weapp') { + // 公开 core 入口也遵循小程序产物约定；保留其它版权注释和声明中的字面量。 + result.root.walkComments((comment) => { + if (/^!\s*tailwindcss v/i.test(comment.text)) { + comment.remove() + } + }) + } result.css = result.root.toString() } diff --git a/packages/weapp-tailwindcss/src/defaults.ts b/packages/weapp-tailwindcss/src/defaults.ts index 6003b787a..ecdfb7429 100644 --- a/packages/weapp-tailwindcss/src/defaults.ts +++ b/packages/weapp-tailwindcss/src/defaults.ts @@ -3,8 +3,8 @@ import { isAllowedClassName, MappingChars2String } from '@weapp-core/escape' import { DEFAULT_PARSE_CACHE_MAX_ENTRIES, DEFAULT_PARSE_CACHE_MAX_SOURCE_LENGTH } from './js/babel/cache-options' import { noop } from './utils' -const CSS_FILE_PATTERN = /.+\.(?:wx|ac|jx|tt|q|c|ty)ss$/ -const HTML_FILE_PATTERN = /.+\.(?:(?:wx|ax|jx|ks|tt|q|qx|ty|xhs)ml|swan)$/ +const CSS_FILE_PATTERN = /.+\.(?:wx|ac|jx|tt|q|c|ty|dd)ss$/ +const HTML_FILE_PATTERN = /.+\.(?:(?:wx|ax|jx|ks|tt|q|qx|ty|xhs|dd)ml|swan)$/ const JS_FILE_PATTERN = /.+\.[cm]?js?$/ const alwaysFalse = () => false @@ -45,6 +45,7 @@ export function getDefaultOptions(): UserDefinedOptions { * qss QQ小程序 * css 最正常的样式文件 * tyss 涂鸦小程序 + * ddss 钉钉小程序 */ cssMatcher: file => CSS_FILE_PATTERN.test(file), /** @@ -57,6 +58,7 @@ export function getDefaultOptions(): UserDefinedOptions { * tyml 涂鸦小程序 * xhsml 小红书小程序 * swan 百度小程序 + * ddml 钉钉小程序 */ htmlMatcher: file => HTML_FILE_PATTERN.test(file), jsMatcher: (file) => { diff --git a/packages/weapp-tailwindcss/test/bundlers/framework-css-composition.test.ts b/packages/weapp-tailwindcss/test/bundlers/framework-css-composition.test.ts index c716ed2a5..ae6561953 100644 --- a/packages/weapp-tailwindcss/test/bundlers/framework-css-composition.test.ts +++ b/packages/weapp-tailwindcss/test/bundlers/framework-css-composition.test.ts @@ -8,19 +8,26 @@ import { generateTailwindV4Css } from '@/bundlers/shared/v4-generation-core' import { getCompilerContext } from '@/context' describe('framework CSS composition', () => { - it.each(['legacy', 'graph'] as const)('merges imported and bundled CSS only after framework conversion (%s)', async (mode) => { + it.each([ + ['legacy', 0], + ['graph', 0], + ['legacy', 8_000], + ['graph', 8_000], + ] as const)('merges imported and bundled CSS only after framework conversion (%s, %i padding rules)', async (mode, paddingRules) => { vi.stubEnv('WEAPP_TAILWINDCSS_COMPILER', mode) const directory = await mkdtemp(path.join(os.tmpdir(), 'weapp-tw-framework-css-')) try { const file = path.join(directory, 'entry.css') - const vendor = '.vendor{width:16px;--framework-pass:0}.vendor-alt{height:24px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}' - const source = '@import "./vendor.css";\n@tailwind utilities;' + const vendor = '@charset "UTF-8";.vendor{width:16px;--framework-pass:0}.vendor-alt{height:24px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}' + const padding = Array.from({ length: paddingRules }, (_, index) => `.padding-${index}{color:rgb(1,2,3);height:1px}`).join('\n') + const source = `@import "./vendor.css";\n@import "tailwindcss";\n${padding}` await writeFile(path.join(directory, 'vendor.css'), vendor) await writeFile(file, source) const opts = getCompilerContext({ tailwindcssBasedir: process.cwd(), generator: { target: 'weapp' }, cssPreflight: false, + rem2rpx: true, }) const framework = { postcssPlugin: 'test-framework-units', @@ -40,10 +47,10 @@ describe('framework CSS composition', () => { tailwindRuntime: opts.tailwindRuntime, readyPromise: Promise.resolve(), }, - runtime: new Set(['flex']), + runtime: new Set(['flex', 'gap-1']), rawSource: source, userRawSource: '.raw-user{height:10px}', - frameworkProcessedUserCss: `.before{width:1rpx}\n@media source(none){/*! weapp-tailwindcss generator-placeholder */}\n:root{--spacing:.25rem}${processedVendor}\n.vendor{width:32rpx}.bundle-only{height:8rpx;--framework-pass:1}`, + frameworkProcessedUserCss: `.before{width:1rpx}\n@media source(none){/*! weapp-tailwindcss generator-placeholder */}\n:root{--spacing:0.25rem;--test-color:#006241;--brand-color:#123456;--color-custom:purple;--radius-custom:.5rem}${processedVendor}\n.vendor{width:32rpx}.vendor{width:16rpx;--framework-pass:1}.bundle-only{height:8rpx;--framework-pass:1}`, file, cssStage: 'framework-processed', cssHandlerOptions: { majorVersion: 4, isMainChunk: false, sourceOptions: { cssEntries: [file], sourceFile: file } }, @@ -53,24 +60,57 @@ describe('framework CSS composition', () => { restoreLocalCssImports: false, }) expect(result).toBeDefined() + if (paddingRules > 0) { + expect(result!.css.length).toBeGreaterThan(250_000) + } const root = postcss.parse(result!.css) + const charsets: string[] = [] + root.walkAtRules('charset', (rule) => { + charsets.push(rule.params) + }) + expect(charsets).toEqual(['"UTF-8"']) + expect(root.first?.type).toBe('atrule') + expect(result!.css).toMatch(/^@charset "UTF-8";/) const widths: string[] = [] root.walkRules('.vendor', (rule) => { - rule.walkDecls('width', (declaration) => { widths.push(declaration.value) }) + rule.walkDecls('width', (declaration) => { + widths.push(declaration.value) + }) }) - expect(widths).toEqual(['16rpx', '32rpx']) + expect(widths).toEqual(['16rpx', '32rpx', '16rpx']) const alternatives: string[] = [] - root.walkRules('.vendor-alt', rule => { alternatives.push(rule.toString()) }) + root.walkRules('.vendor-alt', (rule) => { + alternatives.push(rule.toString()) + }) expect(alternatives).toHaveLength(1) expect(result!.css).toContain('.bundle-only') const passes: string[] = [] - root.walkDecls('--framework-pass', (declaration) => { passes.push(declaration.value) }) - expect(passes).toEqual(['1', '1']) + root.walkDecls('--framework-pass', (declaration) => { + passes.push(declaration.value) + }) + expect(passes).toEqual(['1', '1', '1']) expect(result!.css).toMatch(/\.raw-user\s*\{\s*height:\s*10rpx/) expect(result!.css.indexOf('.before')).toBeLessThan(result!.css.indexOf('.vendor')) expect(result!.css).toContain('.flex') expect(result!.css).not.toMatch(/(?<=\d)px\b/) - expect(result!.css).not.toContain('--spacing:.25rem') + const themeValues: string[] = [] + root.walkDecls('--spacing', (decl) => { + themeValues.push(decl.value) + }) + expect(themeValues).toEqual(['8rpx']) + const customRadius: string[] = [] + root.walkDecls('--radius-custom', (decl) => { + customRadius.push(decl.value) + }) + expect(customRadius).toEqual(['16rpx']) + expect(result!.css).not.toContain('--radius-custom:.5rem') + for (const [property, value] of [['--test-color', '#006241'], ['--brand-color', '#123456'], ['--color-custom', 'purple']]) { + const values: string[] = [] + root.walkDecls(property, (decl) => { + values.push(decl.value) + }) + expect(values).toEqual([value]) + } } finally { vi.unstubAllEnvs() diff --git a/packages/weapp-tailwindcss/test/bundlers/framework-css-composition.unit.test.ts b/packages/weapp-tailwindcss/test/bundlers/framework-css-composition.unit.test.ts new file mode 100644 index 000000000..151707002 --- /dev/null +++ b/packages/weapp-tailwindcss/test/bundlers/framework-css-composition.unit.test.ts @@ -0,0 +1,127 @@ +import { postcss } from '@weapp-tailwindcss/postcss' +import { describe, expect, it } from 'vitest' +import { composeFrameworkProcessedCss } from '@/bundlers/shared/framework-css-composition' + +describe('framework CSS rule composition', () => { + it('preserves generated output verbatim when framework inputs are empty', () => { + const generated = '@charset "UTF-8";\n.vendor { color: red }\n.vendor { color: blue }' + expect(composeFrameworkProcessedCss(' \n', generated, '\t')).toBe(generated) + }) + + it('normalizes charset while preserving framework overrides when generated CSS is empty', () => { + const before = '@charset "UTF-8";.vendor{color:red}' + const after = '@charset "UTF-8";.vendor{color:blue}.vendor{color:red}' + const css = composeFrameworkProcessedCss(before, '', after) + expect(css.match(/@charset/g)).toHaveLength(1) + expect(css.startsWith('@charset "UTF-8";')).toBe(true) + const values: string[] = [] + postcss.parse(css).walkDecls('color', (decl) => { + values.push(decl.value) + }) + expect(values).toEqual(['red', 'blue', 'red']) + }) + + it('keeps existing layer positions when the generated output contains the full override sequence', () => { + const generated = '.base{color:red}.utility{color:green}.base{color:blue}' + const source = '.base { color:red }.base { color:blue }' + expect(composeFrameworkProcessedCss('', generated, source).trim()).toBe(generated) + }) + + it('coalesces adjacent identical generated rules without removing later overrides', () => { + const generated = '.component{color:red}.component{color:red}.component{color:blue}.component{color:red}' + const css = composeFrameworkProcessedCss('', generated, '.component{color:red}') + const values: string[] = [] + postcss.parse(css).walkDecls('color', (decl) => { + values.push(decl.value) + }) + expect(values).toEqual(['red', 'blue', 'red']) + }) + + it('keeps user overrides across other selectors and repeated declarations', () => { + const source = '.a{color:red}.b{color:blue}.a{color:red}.a{color:green}.a{color:red}' + const css = composeFrameworkProcessedCss('', '.a { color: red }.b{color:blue}.utility{display:flex}', source) + expect(postcss.parse(css).nodes.filter(node => node.type === 'rule').map(node => node.selector)) + .toEqual(['.a', '.b', '.utility', '.a', '.a', '.a']) + const values: string[] = [] + postcss.parse(css).walkDecls('color', (decl) => { + values.push(decl.value) + }) + expect(values).toEqual(['red', 'blue', 'red', 'green', 'red']) + }) + + it('preserves overrides shared by a selector list and a single selector', () => { + const css = composeFrameworkProcessedCss('', '.a,.b{color:red}.a{color:blue}', '.a{color:blue}.a,.b{color:red}') + const declarations: string[] = [] + postcss.parse(css).walkRules((rule) => { + if (rule.selectors.includes('.a')) { + rule.walkDecls('color', (decl) => { + declarations.push(decl.value) + }) + } + }) + expect(declarations).toEqual(['blue', 'red']) + }) + + it('matches full declarations and conditional context without crossing layers', () => { + const source = '@media (min-width:1px){.vendor{color:red!important}}' + const generated = '.vendor{color:red!important}@media (min-width:2px){.vendor{color:red!important}}' + + '@media (min-width:1px){.vendor{color:red}.vendor{color:red!important}}' + + '@layer theme{.vendor{color:red!important}}' + const css = composeFrameworkProcessedCss('', generated, source) + const root = postcss.parse(css) + const rules: string[] = [] + root.walkRules('.vendor', (rule) => { + rules.push(rule.toString()) + }) + expect(rules).toHaveLength(5) + expect(css).toContain('@layer theme') + expect(css).toContain('@media (min-width:2px)') + expect(css).toContain('.vendor{color:red}') + expect(css.match(/@media \(min-width:1px\)/g)).toHaveLength(1) + }) + + it('preserves anonymous layer identity and the first named layer declaration', () => { + const before = '@layer first{.a{color:red}}@layer second{.b{color:blue}}' + const generated = '@layer second{.b{color:blue}}@layer first{.a{color:red}}' + const css = composeFrameworkProcessedCss(before, generated, '') + expect(css.indexOf('@layer first')).toBeLessThan(css.indexOf('@layer second')) + const anonymous = '@layer{.a{color:red}}' + expect(composeFrameworkProcessedCss(anonymous, anonymous, anonymous).match(/@layer/g)).toHaveLength(3) + }) + + it('preserves font and animation definitions with distinct declarations and conditions', () => { + const font = '@font-face{font-family:vendor;src:url(a.woff2)}' + const animation = '@keyframes fade{from{opacity:0}to{opacity:1}}' + const source = `${font}@font-face{font-family:vendor;src:url(b.woff2)}${animation}` + const css = composeFrameworkProcessedCss('', `${font}${animation}@media print{${animation}}`, source) + expect(css.match(/@font-face/g)).toHaveLength(2) + expect(css.match(/@keyframes/g)).toHaveLength(2) + expect(css).toContain('@media print') + expect(css.indexOf('url(a.woff2)')).toBeLessThan(css.indexOf('url(b.woff2)')) + }) + + it('does not conflate spaces in strings, descendant selectors or declaration order', () => { + const generated = '.label{content:"a b"}.a .b{color:red}.fallback{display:block;display:flex}' + const source = '.label{content:"ab"}.a.b{color:red}.fallback{display:flex;display:block}' + const css = composeFrameworkProcessedCss('', generated, source) + expect(css).toContain(generated) + expect(css).toContain(source) + }) + + it('preserves vendor rules and charset above the former size cutoff', () => { + const generated = Array.from({ length: 8_000 }, (_, index) => `.utility-${index}{color:rgb(1,2,3);height:1px}`).join('') + const source = '@charset "UTF-8";:root{--brand-color:purple}.vendor{width:16rpx}.vendor{width:32rpx}.vendor{width:16rpx}' + expect(generated.length).toBeGreaterThan(250_000) + const css = composeFrameworkProcessedCss('@charset "UTF-8";.before{display:block}', generated, source) + expect(css).toMatch(/^@charset "UTF-8";/) + expect(css.match(/@charset/g)).toHaveLength(1) + expect(css).toContain(source.slice(source.indexOf(':root'))) + expect(css.indexOf('.before')).toBeLessThan(css.indexOf('.utility-0')) + expect(css.indexOf('.utility-7999')).toBeLessThan(css.indexOf('.vendor')) + }) + + it('preserves incomplete source instead of dropping it on parse failure', () => { + expect(composeFrameworkProcessedCss('', '.generated{display:flex}', '.user{color:red')) + .toContain('.user{color:red') + }) +}) diff --git a/packages/weapp-tailwindcss/test/bundlers/generator-css.unit.test.ts b/packages/weapp-tailwindcss/test/bundlers/generator-css.unit.test.ts index 97f993a25..b8248d34e 100644 --- a/packages/weapp-tailwindcss/test/bundlers/generator-css.unit.test.ts +++ b/packages/weapp-tailwindcss/test/bundlers/generator-css.unit.test.ts @@ -875,6 +875,7 @@ describe('bundlers/shared generator css', () => { '@keyframes weappTwUserUiRotation{to{transform:rotate(360deg)}}', ].join('\n'), { generatorTarget: 'weapp', + generatedSource: ':root,:host{--color-slate-900:#0f172a;--font-sans:ui-sans-serif;--default-font-family:var(--font-sans)}', generatorStyleOptions: {}, cssUserHandlerOptions: {} as any, styleHandler, @@ -1022,6 +1023,7 @@ describe('bundlers/shared generator css', () => { styleHandler, {} as any, {}, + { generatedSource: ':root,:host{--font-sans:ui-sans-serif;--default-font-family:var(--font-sans)}' }, ) expect(css).toContain('.bg-page-marker') diff --git a/packages/weapp-tailwindcss/test/bundlers/shared/generator-css/generated-cleanup.test.ts b/packages/weapp-tailwindcss/test/bundlers/shared/generator-css/generated-cleanup.test.ts new file mode 100644 index 000000000..24490bf9d --- /dev/null +++ b/packages/weapp-tailwindcss/test/bundlers/shared/generator-css/generated-cleanup.test.ts @@ -0,0 +1,61 @@ +import { postcss } from '@weapp-tailwindcss/postcss' +import { describe, expect, it } from 'vitest' +import { removeTailwindV4GeneratedUserCssArtifacts as clean } from '@/bundlers/shared/generator-css/user-css' + +const generated = '@layer theme { :root, :host { --color-red-500: red; --spacing: 0.25rem; } }' +const selectors = [ + ':root,:host', + ':host,page,.tw-root,wx-root-portal-content', + 'page, .tw-root, :host, wx-root-portal-content', + ' :host ,\n page , .tw-root ,\n wx-root-portal-content ', + ':host', + 'page', + '.tw-root', + 'wx-root-portal-content', +] + +describe('生成主题声明清理', () => { + it.each(selectors)('清理 %s 的生成声明，同时保留用户变量与覆盖顺序', (selector) => { + const source = `${selector}{--color-red-500:red;--spacing:.25rem;--test-color:#006241;--brand-color:#123456;--color-custom:blue;--font-custom:serif;--color-red-500:purple;--test-color:green!important}` + const css = clean(source, generated) + const declarations: string[] = [] + postcss.parse(css).walkDecls((decl) => { + declarations.push(decl.toString()) + }) + expect(declarations).toEqual([ + '--test-color:#006241', + '--brand-color:#123456', + '--color-custom:blue', + '--font-custom:serif', + '--color-red-500:purple', + '--test-color:green!important', + ]) + expect(clean(css, generated)).toBe(css) + }) + + it.each(selectors)('删除仅包含已确认生成声明的 %s 规则', (selector) => { + expect(clean(`@layer theme { ${selector} { --color-red-500: red; --spacing: .25rem; } }`, generated).trim()).toBe('') + }) + + it.each(selectors)('没有生成来源或来源不可解析时保留 %s 的主题声明', (selector) => { + const source = `${selector}{--color-custom:blue;--spacing:2rem}` + expect(clean(source)).toBe(source) + expect(clean(source, '.broken{')).toBe(source) + }) + + it('保留不同优先级的声明以及主题范围之外的用户规则', () => { + const source = ':root,:host{--spacing:.25rem!important}.vendor{--spacing:.25rem;color:red}@media print{.vendor{color:blue}}' + expect(clean(source, generated)).toBe(source) + }) + it('保留用户覆盖后再次写回生成值的级联顺序', () => { + expect(clean(':root,:host{--color-red-500:red;--color-red-500:purple;--color-red-500:red}', generated)) + .toBe(':root,:host{--color-red-500:purple;--color-red-500:red}') + }) + + it('条件生成规则不会清理其他条件下的变量', () => { + const conditional = '@media screen{:root,:host{--spacing:.25rem}}' + const source = ':root,:host{--spacing:.25rem}@media print{:root,:host{--spacing:.25rem}}' + expect(clean(source, conditional)).toBe(source) + expect(clean(conditional, conditional)).toBe('') + }) +}) diff --git a/packages/weapp-tailwindcss/test/bundlers/shared/generator-css/user-css.test.ts b/packages/weapp-tailwindcss/test/bundlers/shared/generator-css/user-css.test.ts index e865b7467..b064e0e8d 100644 --- a/packages/weapp-tailwindcss/test/bundlers/shared/generator-css/user-css.test.ts +++ b/packages/weapp-tailwindcss/test/bundlers/shared/generator-css/user-css.test.ts @@ -211,7 +211,7 @@ describe('generator user css helpers', () => { 'abbr[title]{text-decoration:underline}', 'button,input[type="button"],input[type="reset"],input[type="submit"]{appearance:button}', '.keep{color:red}', - ].join('\n'))).toBe('.keep{color:red}') + ].join('\n'), ':root,:host{--color-red-500:red}')).toBe('.keep{color:red}') expect(removeTailwindV4GeneratedUserCssArtifacts([ 'page{', '--test-color:#006241;', diff --git a/packages/weapp-tailwindcss/test/ci/repoctl-release.test.ts b/packages/weapp-tailwindcss/test/ci/repoctl-release.test.ts new file mode 100644 index 000000000..d379c80c2 --- /dev/null +++ b/packages/weapp-tailwindcss/test/ci/repoctl-release.test.ts @@ -0,0 +1,208 @@ +import { mkdir, mkdtemp, rm, writeFile } from 'node:fs/promises' +import os from 'node:os' +import path from 'node:path' +import { GitHubClient, repairReleaseNotes } from 'repoctl' +import { afterEach, describe, expect, it, vi } from 'vitest' + +const tag = '@fixture/pkg@1.0.0' +const release = { id: 12, tag_name: tag, name: tag } +const request = { tag, target: 'a'.repeat(40), body: '发布说明' } +const response = (status: number, data: unknown, headers?: HeadersInit) => new Response(JSON.stringify(data), { status, headers }) + +afterEach(() => { + vi.useRealTimers() +}) + +describe('repoctl GitHub Release 恢复补丁', () => { + it.each([429, 500, 502, 'network'])('重试瞬时错误 %s，并在 POST 重试前按 tag 查询', async (failure) => { + vi.useFakeTimers() + const fetch = vi.fn() + .mockResolvedValueOnce(response(404, {})) + .mockImplementationOnce(() => failure === 'network' ? Promise.reject(new TypeError('connection reset')) : Promise.resolve(response(Number(failure), {}))) + .mockResolvedValueOnce(response(404, {})) + .mockResolvedValueOnce(response(201, release)) + const client = new GitHubClient({ token: 'test', repository: 'fixture/repo', fetch }) + const pending = client.ensureRelease(request) + const result = expect(pending).resolves.toMatchObject(release) + await vi.runAllTimersAsync() + await result + expect(fetch.mock.calls.map(call => call[1].method)).toEqual(['GET', 'POST', 'GET', 'POST']) + }) + + it('POST 响应丢失后发现 Release 已创建时直接恢复', async () => { + const fetch = vi.fn() + .mockResolvedValueOnce(response(404, {})) + .mockResolvedValueOnce(response(502, {})) + .mockResolvedValueOnce(response(200, release)) + expect(await new GitHubClient({ token: 'test', repository: 'fixture/repo', fetch }).ensureRelease(request)).toMatchObject(release) + expect(fetch.mock.calls.filter(call => call[1].method === 'POST')).toHaveLength(1) + }) + + it.each(['seconds', 'date', 'reset'])('遵守限流等待提示 %s，等待前不发送恢复查询', async (hint) => { + vi.useFakeTimers() + vi.setSystemTime(new Date('2026-09-13T00:00:00Z')) + const start = Date.now() + const headers = hint === 'seconds' + ? { 'retry-after': '5' } + : hint === 'date' + ? { 'retry-after': new Date(start + 5000).toUTCString() } + : { 'x-ratelimit-remaining': '0', 'x-ratelimit-reset': String((start + 5000) / 1000) } + const fetch = vi.fn() + .mockResolvedValueOnce(response(404, {})) + .mockResolvedValueOnce(response(429, {}, headers)) + .mockResolvedValueOnce(response(404, {})) + .mockResolvedValueOnce(response(201, release)) + const pending = new GitHubClient({ token: 'test', repository: 'fixture/repo', fetch }).ensureRelease(request) + const result = expect(pending).resolves.toMatchObject(release) + await vi.advanceTimersByTimeAsync(4999) + expect(fetch).toHaveBeenCalledTimes(2) + await vi.runAllTimersAsync() + await result + expect(Date.now() - start).toBe(5000) + }) + + it.each(['body-read', 'invalid-json'])('POST 的 %s 响应不确定时按 tag 恢复', async (failure) => { + const broken = failure === 'body-read' + ? { text: async () => { + throw new TypeError('socket closed') + } } + : new Response('truncated JSON', { status: 201 }) + const fetch = vi.fn().mockResolvedValueOnce(response(404, {})).mockResolvedValueOnce(broken).mockResolvedValueOnce(response(200, release)) + expect(await new GitHubClient({ token: 'test', repository: 'fixture/repo', fetch }).ensureRelease(request)).toMatchObject(release) + expect(fetch).toHaveBeenCalledTimes(3) + }) + + it('现有 Release 的 PATCH 操作也有界重试', async () => { + vi.useFakeTimers() + const fetch = vi.fn().mockResolvedValueOnce(response(200, release)).mockResolvedValueOnce(response(502, {})).mockResolvedValueOnce(response(200, release)) + const result = expect(new GitHubClient({ token: 'test', repository: 'fixture/repo', fetch }).ensureRelease(request)).resolves.toMatchObject(release) + await vi.runAllTimersAsync() + await result + expect(fetch.mock.calls.map(call => call[1].method)).toEqual(['GET', 'PATCH', 'PATCH']) + }) + + it.each(['list', 'update'])('说明修复入口的 %s 操作同样重试瞬时失败', async (operation) => { + vi.useFakeTimers() + const expected = operation === 'list' ? [release] : release + const fetch = vi.fn().mockResolvedValueOnce(response(502, {})).mockResolvedValueOnce(response(200, expected)) + const client = new GitHubClient({ token: 'test', repository: 'fixture/repo', fetch }) + const pending = operation === 'list' ? client.listReleases() : client.updateRelease({ id: release.id, name: tag, body: request.body }) + const result = expect(pending).resolves.toEqual(expected) + await vi.runAllTimersAsync() + await result + expect(fetch).toHaveBeenCalledTimes(2) + }) + + it('最多尝试四次 POST，并保留失败结果', async () => { + vi.useFakeTimers() + const fetch = vi.fn(async (_url, init) => response(init.method === 'GET' ? 404 : 502, {})) + const pending = new GitHubClient({ token: 'test', repository: 'fixture/repo', fetch }).ensureRelease(request) + const result = expect(pending).rejects.toMatchObject({ status: 502 }) + await vi.runAllTimersAsync() + await result + expect(fetch.mock.calls.filter(call => call[1].method === 'POST')).toHaveLength(4) + }) + + it.each([401, 403])('不重试永久权限错误 %s', async (status) => { + const fetch = vi.fn().mockResolvedValueOnce(response(404, {})).mockResolvedValueOnce(response(status, {})) + await expect(new GitHubClient({ token: 'test', repository: 'fixture/repo', fetch }).ensureRelease(request)).rejects.toMatchObject({ status }) + expect(fetch).toHaveBeenCalledTimes(2) + }) + + it('保留 422 并发创建恢复行为', async () => { + const fetch = vi.fn().mockResolvedValueOnce(response(404, {})).mockResolvedValueOnce(response(422, {})).mockResolvedValueOnce(response(200, release)) + expect(await new GitHubClient({ token: 'test', repository: 'fixture/repo', fetch }).ensureRelease(request)).toMatchObject(release) + }) + + it('普通 422 校验失败只查询一次，不再次创建', async () => { + const fetch = vi.fn().mockResolvedValueOnce(response(404, {})).mockResolvedValueOnce(response(422, {})).mockResolvedValueOnce(response(404, {})) + await expect(new GitHubClient({ token: 'test', repository: 'fixture/repo', fetch }).ensureRelease(request)).rejects.toThrow() + expect(fetch.mock.calls.filter(call => call[1].method === 'POST')).toHaveLength(1) + }) +}) + +describe('repoctl 缺失 Release 对账', () => { + it.each([true, false])('dryRun=%s 时只对账已发布版本，不执行 npm publish', async (dryRun) => { + const cwd = await mkdtemp(path.join(os.tmpdir(), 'repoctl-recovery-')) + try { + await mkdir(path.join(cwd, 'packages', 'fixture'), { recursive: true }) + await writeFile(path.join(cwd, 'package.json'), JSON.stringify({ name: 'recovery-workspace', private: true })) + await writeFile(path.join(cwd, 'pnpm-workspace.yaml'), 'packages:\n - packages/*\n') + await writeFile(path.join(cwd, 'packages', 'fixture', 'package.json'), JSON.stringify({ name: '@fixture/pkg', version: '1.0.0' })) + const calls: string[][] = [] + const spawn = vi.fn((command, args) => { + calls.push([command, ...args]) + let stdout = '' + if (command === 'pnpm' && args[0] === 'view') { + stdout = '1.0.0' + } + else if (command === 'git' && args[0] === 'rev-parse') { + stdout = request.target + } + else if (command === 'git' && args[0] === 'ls-remote') { + stdout = `${request.target}\trefs/tags/${tag}` + } + else if (command === 'git' && args[0] === 'show' && args[1].endsWith('package.json')) { + stdout = JSON.stringify({ name: '@fixture/pkg', version: '1.0.0' }) + } + else if (command === 'git' && args[0] === 'show') { + stdout = '# @fixture/pkg\n\n## 1.0.0\n\n### Patch Changes\n\n- 修复变量丢失。\n' + } + else { throw new Error(`Unexpected command: ${command} ${args.join(' ')}`) } + return { status: 0, stdout, stderr: '', pid: 1, output: [], signal: null } + }) + const ensureRelease = vi.fn(async (_options: { body?: string }) => release) + const github = { listReleases: vi.fn(async (): Promise> => []), updateRelease: vi.fn(), ensureRelease } + const result = await repairReleaseNotes({ cwd, tag, createMissing: true, dryRun, spawn: spawn as never, github }) + expect(result.repaired).toEqual([tag]) + expect(ensureRelease).toHaveBeenCalledTimes(dryRun ? 0 : 1) + expect(calls.some(call => call.includes('publish'))).toBe(false) + expect(calls).toContainEqual(['pnpm', 'view', tag, 'version', '--registry', 'https://registry.npmjs.org']) + expect(github.updateRelease).not.toHaveBeenCalled() + if (!dryRun) { + github.listReleases.mockResolvedValue([{ ...release, body: ensureRelease.mock.calls[0]![0].body }]) + await repairReleaseNotes({ cwd, tag, createMissing: true, spawn: spawn as never, github }) + expect(ensureRelease).toHaveBeenCalledTimes(1) + expect(github.updateRelease).not.toHaveBeenCalled() + } + } + finally { + await rm(cwd, { recursive: true, force: true }) + } + }) + + it.each(['npm', 'remote-tag', 'tagged-version'])('拒绝 %s 对账不一致，并且不写入 GitHub', async (mismatch) => { + const cwd = await mkdtemp(path.join(os.tmpdir(), 'repoctl-recovery-mismatch-')) + try { + await mkdir(path.join(cwd, 'packages', 'fixture'), { recursive: true }) + await writeFile(path.join(cwd, 'package.json'), JSON.stringify({ name: 'recovery-workspace', private: true })) + await writeFile(path.join(cwd, 'pnpm-workspace.yaml'), 'packages:\n - packages/*\n') + await writeFile(path.join(cwd, 'packages', 'fixture', 'package.json'), JSON.stringify({ name: '@fixture/pkg', version: '1.0.0' })) + const spawn = vi.fn((command, args) => { + let stdout = '' + if (command === 'pnpm' && args[0] === 'view') { + stdout = mismatch === 'npm' ? '0.9.0' : '1.0.0' + } + else if (command === 'git' && args[0] === 'rev-parse') { + stdout = request.target + } + else if (command === 'git' && args[0] === 'ls-remote') { + stdout = `${mismatch === 'remote-tag' ? 'b'.repeat(40) : request.target}\trefs/tags/${tag}` + } + else if (command === 'git' && args[0] === 'show') { + stdout = JSON.stringify({ name: '@fixture/pkg', version: '0.9.0' }) + } + else { throw new Error(`Unexpected command: ${command} ${args.join(' ')}`) } + return { status: 0, stdout, stderr: '', pid: 1, output: [], signal: null } + }) + const github = { listReleases: vi.fn(async () => []), updateRelease: vi.fn(), ensureRelease: vi.fn() } + await expect(repairReleaseNotes({ cwd, tag, createMissing: true, spawn: spawn as never, github })).rejects.toThrow(/Recovery requires/) + expect(github.ensureRelease).not.toHaveBeenCalled() + expect(github.updateRelease).not.toHaveBeenCalled() + expect(spawn.mock.calls.some(([command, args]) => command === 'pnpm' && args.includes('publish'))).toBe(false) + } + finally { + await rm(cwd, { recursive: true, force: true }) + } + }) +}) diff --git a/packages/weapp-tailwindcss/test/compiler/core-compiler-banner.test.ts b/packages/weapp-tailwindcss/test/compiler/core-compiler-banner.test.ts new file mode 100644 index 000000000..a2d9b2e05 --- /dev/null +++ b/packages/weapp-tailwindcss/test/compiler/core-compiler-banner.test.ts @@ -0,0 +1,41 @@ +import { postcss } from '@weapp-tailwindcss/postcss' +import { describe, expect, it } from 'vitest' +import { createCompiler } from '@/core/compiler' + +const banner = '/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */' +const vendor = '/*! Vendor styles | MIT */' +const source = `${banner}\n${vendor}\n.card{display:flex;content:"/*! tailwindcss v4.3.3 */"}` + +describe('core compiler banner finalization', () => { + it.each([ + ['weapp', undefined, false], + ['weapp', false, true], + ['web', undefined, true], + ['tailwind', undefined, true], + ] as const)('preserves target and explicit finalization semantics (%s, %s)', async (target, finalize, keepBanner) => { + const compiler = createCompiler({ cssPreflight: false }) + try { + const snapshot = compiler.createSnapshot({ id: `banner:${target}`, target, classSet: [] }) + const options = finalize === undefined ? undefined : { finalize } + const input = postcss.parse(source) + const results = [ + await compiler.transformCss(source, snapshot, options), + await compiler.transformCssRoot(input, snapshot, options), + ] + for (const result of results) { + const comments: string[] = [] + result.root.walkComments((comment) => { + comments.push(comment.text) + }) + expect(comments.some(text => text.startsWith('! tailwindcss v'))).toBe(keepBanner) + expect(result.css).toContain(vendor) + expect(result.css).toContain('content:"/*! tailwindcss v4.3.3 */"') + expect(result.css).toContain('display:flex') + } + expect(input.toString()).toBe(source) + } + finally { + await compiler.dispose() + } + }) +}) diff --git a/packages/weapp-tailwindcss/test/defaults.test.ts b/packages/weapp-tailwindcss/test/defaults.test.ts index 64fcea5ac..bc49e8d0a 100644 --- a/packages/weapp-tailwindcss/test/defaults.test.ts +++ b/packages/weapp-tailwindcss/test/defaults.test.ts @@ -1,6 +1,15 @@ import { describe, expect, it } from 'vitest' describe('defaults getDefaultOptions', () => { + it.each(['screens/card', '/screens/card', 'C:\\screens\\card', 'screens\\card'])('recognizes DingTalk output assets at %s', async (base) => { + const { getDefaultOptions } = await import('@/defaults') + const options = getDefaultOptions() + expect(typeof options.cssMatcher === 'function' && options.cssMatcher(`${base}.ddss`)).toBe(true) + expect(typeof options.htmlMatcher === 'function' && options.htmlMatcher(`${base}.ddml`)).toBe(true) + expect(typeof options.cssMatcher === 'function' && options.cssMatcher(`${base}.ddss.map`)).toBe(false) + expect(typeof options.htmlMatcher === 'function' && options.htmlMatcher(`${base}.ddml.js`)).toBe(false) + }) + it('ignores call expression identifiers by default', async () => { const { getDefaultOptions } = await import('@/defaults') const options = getDefaultOptions() diff --git a/packages/weapp-tailwindcss/test/vitest/__snapshots__/vite.test.ts.snap b/packages/weapp-tailwindcss/test/vitest/__snapshots__/vite.test.ts.snap index 6534ae2c7..b58e8e450 100644 --- a/packages/weapp-tailwindcss/test/vitest/__snapshots__/vite.test.ts.snap +++ b/packages/weapp-tailwindcss/test/vitest/__snapshots__/vite.test.ts.snap @@ -209,10 +209,7 @@ exports[`vite test > vite common build twice for cache 4`] = ` " `; -exports[`vite test > vite common build twice for cache 5`] = ` -"/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ -" -`; +exports[`vite test > vite common build twice for cache 5`] = `""`; exports[`vite test > vite common build twice for cache 6`] = ` " diff --git a/packages/weapp-tailwindcss/test/vitest/vite.test.ts b/packages/weapp-tailwindcss/test/vitest/vite.test.ts index 5ac0ff0d1..4714c4c07 100644 --- a/packages/weapp-tailwindcss/test/vitest/vite.test.ts +++ b/packages/weapp-tailwindcss/test/vitest/vite.test.ts @@ -14,6 +14,7 @@ async function assertSnap( plugin?: Plugin | Plugin[] | undefined, options?: InlineConfig, fn?: (result: RollupOutput) => void, + normalizeTailwindBanner = false, ) { // if (plugin === undefined) { // return @@ -67,7 +68,10 @@ async function assertSnap( const r = await prettier.format(output[1].source.toString(), { parser: 'css', }) - expect(r.replace(/[ \t]+$/gm, '')).toMatchSnapshot() + const normalizedCss = normalizeTailwindBanner + ? r.replace(/\/\*! tailwindcss v[^*]+\*\/\s*/g, '') + : r + expect(normalizedCss.replace(/[ \t]+$/gm, '')).toMatchSnapshot() } expect(/\.html$/.test(output[2].fileName)).toBe(true) expect(output[2].type).toBe('asset') @@ -142,6 +146,9 @@ describe('vite test', () => { void timeTaken }, }), + undefined, + undefined, + true, ) await assertSnap( weappTw({ @@ -155,6 +162,9 @@ describe('vite test', () => { void timeTaken }, }), + undefined, + undefined, + true, ) }) diff --git a/patches/@icebreakers__monorepo@5.5.0.patch b/patches/@icebreakers__monorepo@5.5.0.patch new file mode 100644 index 000000000..635169737 --- /dev/null +++ b/patches/@icebreakers__monorepo@5.5.0.patch @@ -0,0 +1,188 @@ +diff --git a/dist/cli.mjs b/dist/cli.mjs +index a8fadc815153f50aa4261c1d3c0d70ce6166ff10..acc18cfc6523baa1864ffe0f7ace330f532c01b5 100644 +--- a/dist/cli.mjs ++++ b/dist/cli.mjs +@@ -512,14 +512,15 @@ function registerReleaseCommands(program, cwd) { + logger.success(localize("Release CI finished.", "Release CI 完成。")); + }); + }); +- releaseCommand.command("notes").description(localize("Manage GitHub Release notes", "维护 GitHub Release 正文")).command("repair").description(localize("Rebuild GitHub Release notes from the changelog for each release tag", "按每个发布 tag 对应的 changelog 重建 GitHub Release 正文")).option("--all", localize("Repair every recognized GitHub Release", "修复所有可识别的 GitHub Release")).option("--tag ", localize("Repair only the specified package@version", "只修复指定 package@version")).option("--dry-run", localize("Generate and summarize without updating GitHub Releases", "只生成并统计，不更新 GitHub Release")).action(async (opts) => { ++ releaseCommand.command("notes").description(localize("Manage GitHub Release notes", "维护 GitHub Release 正文")).command("repair").description(localize("Rebuild GitHub Release notes from the changelog for each release tag", "按每个发布 tag 对应的 changelog 重建 GitHub Release 正文")).option("--all", localize("Repair every recognized GitHub Release", "修复所有可识别的 GitHub Release")).option("--tag ", localize("Repair only the specified package@version", "只修复指定 package@version")).option("--create-missing", "核验 npm 与 git tag 后补建指定 Release").option("--dry-run", localize("Generate and summarize without updating GitHub Releases", "只生成并统计，不更新 GitHub Release")).action(async (opts) => { + await runReleaseAction(async () => { + const { repairReleaseNotes } = await import("./commands-ByI13wrh.mjs").then((n) => n.t); + const result = await repairReleaseNotes({ + cwd, + ...opts.all ? { all: true } : {}, + ...opts.tag ? { tag: opts.tag } : {}, +- ...opts.dryRun ? { dryRun: true } : {} ++ ...opts.dryRun ? { dryRun: true } : {}, ++ ...opts.createMissing ? { createMissing: true } : {} + }); + logger.success(localize(`Release notes repaired: ${result.repaired.length}; skipped: ${result.skipped.length}`, `Release 正文已修复：${result.repaired.length}；已跳过：${result.skipped.length}`)); + }); +diff --git a/dist/commands-ByI13wrh.mjs b/dist/commands-ByI13wrh.mjs +index 7034ed11f67489b45b368e100eb0b4521cf33b57..10b77d630972d86449b6b47b076fd308d87a931e 100644 +--- a/dist/commands-ByI13wrh.mjs ++++ b/dist/commands-ByI13wrh.mjs +@@ -2998,16 +2998,22 @@ var GitHubClient = class { + } catch (error) { + throw new GitHubApiError(`GitHub API request ${method} ${endpoint} failed: ${error instanceof Error ? error.message : String(error)}. Check network access and GITHUB_API_URL.`, 0); + } +- const text = await response.text(); ++ let text; ++ try { text = await response.text(); } ++ catch (error) { throw new GitHubApiError(`GitHub API response ${method} ${endpoint} was interrupted: ${String(error)}`, 0); } ++ const retryAfter = response.headers.get("retry-after"); ++ const retryAfterMs = retryAfter === null ? 0 : /^\d+$/.test(retryAfter) ? Number(retryAfter) * 1000 : Math.max(0, Date.parse(retryAfter) - Date.now()); ++ const resetMs = response.headers.get("x-ratelimit-remaining") === "0" ? Math.max(0, Number(response.headers.get("x-ratelimit-reset")) * 1000 - Date.now()) : 0; ++ const rateLimitWaitMs = Math.max(Number.isFinite(retryAfterMs) ? retryAfterMs : 0, Number.isFinite(resetMs) ? resetMs : 0); + let data; + if (text) try { + data = JSON.parse(text); + } catch { +- throw new GitHubApiError(`GitHub API returned invalid JSON for ${method} ${endpoint}`, response.status, text); ++ throw Object.assign(new GitHubApiError(`GitHub API returned invalid JSON for ${method} ${endpoint}`, response.ok ? 0 : response.status, text), { retryAfterMs: rateLimitWaitMs }); + } + if (!response.ok) { + const message = typeof data === "object" && data !== null && "message" in data ? String(data.message) : text || response.statusText; +- throw new GitHubApiError(`GitHub API ${method} ${endpoint} failed (${response.status}): ${message}`, response.status, text); ++ throw Object.assign(new GitHubApiError(`GitHub API ${method} ${endpoint} failed (${response.status}): ${message}`, response.status, text), { retryAfterMs: rateLimitWaitMs }); + } + return { + status: response.status, +@@ -3063,15 +3069,40 @@ var GitHubClient = class { + const listed = await this.request("GET", `/pulls?${query.toString()}`); + for (const pullRequest of listed.data ?? []) if (pullRequest.head?.ref === options.head && (pullRequest.title === "Version Packages" || pullRequest.body?.includes("changesets/action") === true)) await this.request("PATCH", `/pulls/${pullRequest.number}`, { state: "closed" }); + } ++ async requestRelease(method, endpoint, body, recoveryTag) { ++ this.getRepository(); ++ for (let attempt = 0; attempt < 4; attempt++) { ++ try { ++ return await this.request(method, endpoint, body); ++ } catch (error) { ++ const transient = error instanceof GitHubApiError && (error.status === 0 || error.status === 429 || error.status >= 500 && error.status <= 599); ++ if (!transient) throw error; ++ // 限流提示适用于随后的查询请求，不能在等待前发起对账。 ++ const hintedWait = error.retryAfterMs || 0; ++ if (hintedWait > 0) await new Promise(resolve => setTimeout(resolve, Math.max(1000 * 2 ** attempt, hintedWait))); ++ // POST 可能已经成功；先按 tag 对账，避免重复创建。 ++ if (recoveryTag) { ++ try { ++ const recovered = await this.requestRelease("GET", `/releases/tags/${encodeURIComponent(recoveryTag)}`); ++ if (recovered.data) return recovered; ++ } catch (recoveryError) { ++ if (!(recoveryError instanceof GitHubApiError) || recoveryError.status !== 404) throw recoveryError; ++ } ++ } ++ if (attempt === 3) throw error; ++ if (hintedWait === 0) await new Promise(resolve => setTimeout(resolve, 1000 * 2 ** attempt)); ++ } ++ } ++ } + async ensureRelease(options) { + let existing; + try { +- existing = (await this.request("GET", `/releases/tags/${encodeURIComponent(options.tag)}`)).data; ++ existing = (await this.requestRelease("GET", `/releases/tags/${encodeURIComponent(options.tag)}`)).data; + } catch (error) { + if (!(error instanceof GitHubApiError) || error.status !== 404) throw error; + } + if (existing) { +- if (options.body !== void 0 || options.name !== void 0) return (await this.request("PATCH", `/releases/${existing.id}`, { ++ if (options.body !== void 0 || options.name !== void 0) return (await this.requestRelease("PATCH", `/releases/${existing.id}`, { + ...options.name === void 0 ? {} : { name: options.name }, + ...options.body === void 0 ? {} : { body: options.body }, + prerelease: options.prerelease ?? false +@@ -3079,18 +3110,18 @@ var GitHubClient = class { + return existing; + } + try { +- const created = await this.request("POST", "/releases", { ++ const created = await this.requestRelease("POST", "/releases", { + tag_name: options.tag, + target_commitish: options.target, + name: options.name ?? options.tag, + ...options.body === void 0 ? { generate_release_notes: true } : { body: options.body }, + prerelease: options.prerelease ?? false +- }); ++ }, options.tag); + if (!created.data) throw new GitHubApiError("GitHub did not return the created release", created.status); + return created.data; + } catch (error) { + if (!(error instanceof GitHubApiError) || error.status !== 422) throw error; +- const recovered = await this.request("GET", `/releases/tags/${encodeURIComponent(options.tag)}`); ++ const recovered = await this.requestRelease("GET", `/releases/tags/${encodeURIComponent(options.tag)}`); + if (!recovered.data) throw error; + return recovered.data; + } +@@ -3098,14 +3129,14 @@ var GitHubClient = class { + async listReleases() { + const releases = []; + for (let page = 1;; page++) { +- const pageReleases = (await this.request("GET", `/releases?per_page=100&page=${page}`)).data ?? []; ++ const pageReleases = (await this.requestRelease("GET", `/releases?per_page=100&page=${page}`)).data ?? []; + releases.push(...pageReleases); + if (pageReleases.length < 100) break; + } + return releases; + } + async updateRelease(options) { +- const response = await this.request("PATCH", `/releases/${options.id}`, { ++ const response = await this.requestRelease("PATCH", `/releases/${options.id}`, { + name: options.name, + body: options.body + }); +@@ -3858,6 +3889,23 @@ async function repairReleaseNotes(options) { + const releases = await github.listReleases(); + const selected = options.tag ? releases.filter((release) => release.tag_name === options.tag) : releases; + const packages = await getWorkspacePackages(options.cwd); ++ if (options.createMissing) { ++ if (!options.tag || options.all) throw new ReleaseCommandError("--create-missing requires exactly one --tag"); ++ if (selected.length === 0) { ++ const parsed = parseReleaseTag(options.tag); ++ if (!parsed || !packages.some(pkg => pkg.manifest.name === parsed.packageName && pkg.manifest.version === parsed.version)) throw new ReleaseCommandError("Recovery tag does not match a workspace package version"); ++ if (capture("pnpm", ["view", options.tag, "version", "--registry", "https://registry.npmjs.org"], options) !== parsed.version) throw new ReleaseCommandError("Recovery requires the exact version to be published on npm"); ++ const target = capture("git", ["rev-parse", `${options.tag}^{commit}`], options); ++ const remote = capture("git", ["ls-remote", "origin", `refs/tags/${options.tag}`, `refs/tags/${options.tag}^{}`], options).split(/\r?\n/).map(line => line.split(/\s+/)); ++ const remoteTarget = remote.find(row => row[1] === `refs/tags/${options.tag}^{}`) ?? remote.find(row => row[1] === `refs/tags/${options.tag}`); ++ if (!target || remoteTarget?.[0] !== target) throw new ReleaseCommandError("Recovery requires matching local and remote release tags"); ++ const pkg = packages.find(pkg => pkg.manifest.name === parsed.packageName); ++ const relativeDirectory = packagePath(await realpath(options.cwd), await realpath(pkg.rootDir)); ++ const taggedManifest = JSON.parse(capture("git", ["show", `${target}:${relativeDirectory ? relativeDirectory + "/" : ""}package.json`], options)); ++ if (taggedManifest.name !== parsed.packageName || taggedManifest.version !== parsed.version) throw new ReleaseCommandError("Recovery requires the tagged package manifest to match the published version"); ++ selected.push({ tag_name: options.tag, name: options.tag, target_commitish: target, missing: true }); ++ } ++ } + const workspaceRoot = await realpath(options.cwd); + const packageDirectories = new Map(await Promise.all(packages.filter((pkg) => typeof pkg.manifest.name === "string").map(async (pkg) => { + const rootDir = await realpath(pkg.rootDir); +@@ -3891,7 +3939,11 @@ async function repairReleaseNotes(options) { + }; + } catch {} + const body = buildGitHubReleaseBodyFromChangelog(parsed.packageName, parsed.version, changelog, releaseMetadataForBody); +- if (!options.dryRun && (release.name !== release.tag_name || release.body !== body)) await github.updateRelease({ ++ if (!options.dryRun && release.missing) { ++ if (!github.ensureRelease) throw new ReleaseCommandError("Missing release recovery requires ensureRelease"); ++ await github.ensureRelease({ tag: release.tag_name, target: release.target_commitish, name: release.tag_name, body, prerelease: parsed.version.includes("-") }); ++ } ++ else if (!options.dryRun && (release.name !== release.tag_name || release.body !== body)) await github.updateRelease({ + id: release.id, + name: release.tag_name, + body +diff --git a/dist/index.d.mts b/dist/index.d.mts +index 3442ab68b5f06115b1117cc4f7f4bc144c380f32..ebd7e194b0b424e22523ecfc11d132964c732e83 100644 +--- a/dist/index.d.mts ++++ b/dist/index.d.mts +@@ -403,10 +403,11 @@ export declare function exitPrerelease(options: ReleaseOptions): Promise; + //#endregion + //#region src/commands/release/repair.d.ts + interface RepairReleaseNotesOptions extends ReleaseOptions { ++ createMissing?: boolean; + tag?: string; + all?: boolean; + dryRun?: boolean; +- github?: Pick; ++ github?: Pick & Partial>; + } + export declare function repairReleaseNotes(options: RepairReleaseNotesOptions): Promise<{ + repaired: string[]; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 170253a59..33828ce75 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -779,10 +779,12 @@ catalogs: overrides: jiti: 2.7.0 + weapp-vite>weapp-tailwindcss: workspace:* pnpmfileChecksum: sha256-VIhHxkE3DlYGW4jpmh5YBZoirXpyRMuq7rJOkofCfW8= patchedDependencies: + '@icebreakers/monorepo@5.5.0': 68e78146e7d6d2bb10ffa11b462d5c221f9cef119d21f7858a7f7410ffcab1c6 rollup@4.63.0: 4f732dcaad5986ffbe82caa0236c5ece50738873705cb399aa2f0a4dd15ed375 rollup@4.63.1: c8c92d871ccf0418d1ba8b1f11a3371b706a1787f102194edb01d655e1ae84e0 @@ -3908,7 +3910,7 @@ importers: version: link:../../packages/weapp-tailwindcss weapp-vite: specifier: catalog:weappVite - version: 7.1.1(@babel/core@8.0.5)(@mpxjs/webpack-plugin@2.11.1(@mpxjs/core@2.11.1)(supports-color@10.2.2)(vue@2.7.16)(webpack@5.105.4))(@oxc-project/types@0.149.0)(@swc/helpers@0.5.23)(@types/node@26.5.1)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0)(supports-color@10.2.2))(hono@4.13.0)(jiti@2.7.0)(less@4.6.6)(miniprogram-api-typings@5.2.3)(oxc-resolver@11.21.2)(rollup@4.63.1(patch_hash=c8c92d871ccf0418d1ba8b1f11a3371b706a1787f102194edb01d655e1ae84e0))(sass-embedded@1.104.1)(sass@1.104.1)(stylus@0.63.0(supports-color@10.2.2))(supports-color@10.2.2)(tailwindcss@4.3.3)(terser@5.51.2)(tsx@4.23.13)(vitest@5.0.0)(yaml@2.9.1) + version: 7.1.1(@babel/core@8.0.5)(@swc/helpers@0.5.23)(@types/node@26.5.1)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0)(supports-color@10.2.2))(hono@4.13.0)(jiti@2.7.0)(less@4.6.6)(miniprogram-api-typings@5.2.3)(oxc-resolver@11.21.2)(rollup@4.63.1(patch_hash=c8c92d871ccf0418d1ba8b1f11a3371b706a1787f102194edb01d655e1ae84e0))(sass-embedded@1.104.1)(sass@1.104.1)(stylus@0.63.0(supports-color@10.2.2))(supports-color@10.2.2)(terser@5.51.2)(tsx@4.23.13)(vitest@5.0.0)(yaml@2.9.1) demo/web/nuxt-vite-tailwindcss-v4: dependencies: @@ -5433,7 +5435,7 @@ importers: version: link:../../packages/weapp-tailwindcss weapp-vite: specifier: catalog:weappVite - version: 7.1.1(@babel/core@8.0.1)(@mpxjs/webpack-plugin@2.11.1(@mpxjs/core@2.11.1)(supports-color@10.2.2)(vue@2.7.16)(webpack@5.105.4))(@oxc-project/types@0.149.0)(@swc/helpers@0.5.23)(@types/node@26.5.1)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0)(supports-color@10.2.2))(hono@4.13.0)(jiti@2.7.0)(less@4.6.6)(miniprogram-api-typings@5.2.3)(oxc-resolver@11.21.2)(rollup@4.63.1(patch_hash=c8c92d871ccf0418d1ba8b1f11a3371b706a1787f102194edb01d655e1ae84e0))(sass-embedded@1.104.1)(sass@1.104.1)(stylus@0.63.0(supports-color@10.2.2))(supports-color@10.2.2)(tailwindcss@4.3.3)(terser@5.51.2)(tsx@4.23.13)(vitest@5.0.0)(yaml@2.9.1) + version: 7.1.1(@babel/core@8.0.1)(@swc/helpers@0.5.23)(@types/node@26.5.1)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0)(supports-color@10.2.2))(hono@4.13.0)(jiti@2.7.0)(less@4.6.6)(miniprogram-api-typings@5.2.3)(oxc-resolver@11.21.2)(rollup@4.63.1(patch_hash=c8c92d871ccf0418d1ba8b1f11a3371b706a1787f102194edb01d655e1ae84e0))(sass-embedded@1.104.1)(sass@1.104.1)(stylus@0.63.0(supports-color@10.2.2))(supports-color@10.2.2)(terser@5.51.2)(tsx@4.23.13)(vitest@5.0.0)(yaml@2.9.1) tools/weapp-tailwindcss-scripts: dependencies: @@ -17639,26 +17641,6 @@ packages: resolution: {integrity: sha512-K435esdK9VN5AogLzGzOqOs9umoz1vrfesAhxxxHGGI3M23z48UDOBWs4h+Xj+KFTSBH3jJZ0uI14VkkxYgjjQ==} engines: {node: ^20.19.0 || >=22.12.0} - '@weapp-tailwindcss/logger@2.0.3': - resolution: {integrity: sha512-wksr6jNIE+Rwuq1PEDlu6tKorzzg1FhMV45SJob9C5Aj8AnQDjwRqIYsvCkRwrEu7mdzJkTldNGddG/ecSWmog==} - engines: {node: ^20.19.0 || >=22.12.0} - - '@weapp-tailwindcss/postcss-calc@1.0.6': - resolution: {integrity: sha512-cgDYqWc+cfr+YYyWWVTZIDZPamQFoXSzFqHAr6VwM25UmmuqebKuCiaS9z2myVysCRFnEWNgOoweJ/BmBSiS+g==} - engines: {node: ^20.19.0 || >=22.12.0} - peerDependencies: - postcss: ^8.4.38 - - '@weapp-tailwindcss/postcss@3.3.3': - resolution: {integrity: sha512-CQN4p32nyQ/Hx4Qq6vFfMa19odYu8loRz5dR8C3ZJy7pN2SuJyfzuSzuiXpY/HfcDDX0MyJLEOfY11zBTlpcFQ==} - engines: {node: ^20.19.0 || >=22.12.0} - - '@weapp-tailwindcss/reset@0.1.4': - resolution: {integrity: sha512-tNZck66VQ5ckSnoTA3vhdTQ5hYGnbIvFM7hohs3wEtBLmv6g2tWzi5Hi0OfLP1s/UYE3MnuZqsOsqVe822+q5Q==} - engines: {node: ^20.19.0 || >=22.12.0} - peerDependencies: - tailwindcss: ^3.0.0 || ^4.0.0 - '@weapp-tailwindcss/shared@2.0.3': resolution: {integrity: sha512-mvbXsYwsxQHjb1ow7QABm3cZcim3P5k3Ly+kX1GRB937WHKGmWVjEAuc2Jpy48s+e9CNsJiaS8BX4wmWCJKV/Q==} engines: {node: ^20.19.0 || >=22.12.0} @@ -34091,27 +34073,11 @@ packages: engines: {node: '>=22'} hasBin: true - weapp-style-injector@1.0.5: - resolution: {integrity: sha512-0ElanhsA9b0BASkAQRHYnnoEWtWwobWJnIVRCstom7dAU7XHbAVNhOu/pVf8mxbevmT5Drhlsc7zoTC0GvJyRQ==} - engines: {node: ^20.19.0 || >=22.12.0} - weapp-tailwindcss-children@0.1.0: resolution: {integrity: sha512-HuDT78u6RbXpJIHbJzw4zW98JByWCz4elhTAT9QR/JWJuQpiRNbnqa5tL+ZTVCcT4bHt9Ppf/E2MNTohPgBE3g==} peerDependencies: tailwindcss: ^3.0.0 - weapp-tailwindcss@5.5.4: - resolution: {integrity: sha512-+9qvSUAkfKOpZ//YOPJWULwFru7LHNwPV9J5GqADk44GZ8M0gSOCENs+1BYekG0GpozfVKiJpUzEwIP8jc2SdA==} - engines: {node: ^22.18.0 || >=24.11.0} - peerDependencies: - '@mpxjs/webpack-plugin': '>=2.0.0 <3.0.0' - vite: ^5.2.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 - peerDependenciesMeta: - '@mpxjs/webpack-plugin': - optional: true - vite: - optional: true - weapp-vite@7.1.1: resolution: {integrity: sha512-PwleBkZtoEI47Dhai7CwCjttKpu/dozSNYKKqRoC8v566jINM27QxwRGBTDBz0x0sv1/HUaM7Pjd53Qr8HPxLA==} engines: {node: ^20.19.0 || >=22.12.0} @@ -43460,7 +43426,7 @@ snapshots: transitivePeerDependencies: - '@types/node' - '@icebreakers/monorepo@5.5.0(e1f2fcdbbf8b150ff58377c25b466b73)': + '@icebreakers/monorepo@5.5.0(patch_hash=68e78146e7d6d2bb10ffa11b462d5c221f9cef119d21f7858a7f7410ffcab1c6)(e1f2fcdbbf8b150ff58377c25b466b73)': dependencies: '@icebreakers/commitlint-config': 4.1.0(conventional-changelog-conventionalcommits@10.4.0) '@icebreakers/eslint-config': 8.0.0(@next/eslint-plugin-next@16.2.4)(@unocss/eslint-plugin@66.6.8(eslint@10.10.0(jiti@2.7.0)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@6.0.3))(eslint-plugin-jsx-a11y@6.10.2(eslint@10.10.0(jiti@2.7.0)(supports-color@10.2.2)))(eslint-plugin-pnpm@1.9.1(eslint@10.10.0(jiti@2.7.0)(supports-color@10.2.2)))(eslint-plugin-vuejs-accessibility@2.5.0(eslint@10.10.0(jiti@2.7.0)(supports-color@10.2.2))(globals@17.11.0)(supports-color@10.2.2))(eslint@10.10.0(jiti@2.7.0)(supports-color@10.2.2))(postcss@8.5.28)(stylelint-config-html@2.0.0(postcss-html@2.0.0(postcss@8.5.28))(stylelint@17.15.0(supports-color@10.2.2)(typescript@6.0.3)))(stylelint@17.15.0(supports-color@10.2.2)(typescript@6.0.3))(supports-color@10.2.2)(tailwindcss@4.3.3)(ts-declaration-location@1.0.7(typescript@6.0.3))(typescript@6.0.3)(vitest@5.0.0) @@ -55136,50 +55102,6 @@ snapshots: '@weapp-core/types@1.1.0': {} - '@weapp-tailwindcss/logger@2.0.3': - dependencies: - consola: 3.4.2 - picocolors: 1.1.1 - - '@weapp-tailwindcss/postcss-calc@1.0.6(postcss@8.5.28)': - dependencies: - postcss: 8.5.28 - postcss-selector-parser: 7.1.6 - postcss-value-parser: 4.2.0 - - '@weapp-tailwindcss/postcss@3.3.3(jiti@2.7.0)(tailwindcss@4.3.3)(tsx@4.23.13)(yaml@2.9.1)': - dependencies: - '@csstools/css-color-parser': 4.2.2(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0) - '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0) - '@csstools/css-tokenizer': 4.0.0 - '@tailwindcss-mangle/engine': 0.2.0(tailwindcss@4.3.3) - '@weapp-core/escape': 8.0.0 - '@weapp-tailwindcss/postcss-calc': 1.0.6(postcss@8.5.28) - '@weapp-tailwindcss/shared': 2.0.3 - autoprefixer: 10.5.6(postcss@8.5.28) - es-toolkit: 1.52.0 - lru-cache: 11.5.2 - micromatch: 4.0.8 - postcss: 8.5.28 - postcss-load-config: 6.0.1(jiti@2.7.0)(postcss@8.5.28)(tsx@4.23.13)(yaml@2.9.1) - postcss-preset-env: 11.5.2(postcss@8.5.28) - postcss-pxtrans: 1.0.4(postcss@8.5.28) - postcss-rem-to-responsive-pixel: 7.0.5(postcss@8.5.28) - postcss-rule-unit-converter: 0.2.3(postcss@8.5.28) - postcss-scss: 4.0.9(postcss@8.5.28) - postcss-selector-parser: 7.1.6 - postcss-value-parser: 4.2.0 - tailwindcss-config: 2.0.4 - transitivePeerDependencies: - - jiti - - tailwindcss - - tsx - - yaml - - '@weapp-tailwindcss/reset@0.1.4(tailwindcss@4.3.3)': - dependencies: - tailwindcss: 4.3.3 - '@weapp-tailwindcss/shared@2.0.3': dependencies: defu: 6.1.7 @@ -71704,7 +71626,7 @@ snapshots: repoctl@5.5.0(72b7fd14b5b727a2ce27bf7b0e2edbc6): dependencies: - '@icebreakers/monorepo': 5.5.0(e1f2fcdbbf8b150ff58377c25b466b73) + '@icebreakers/monorepo': 5.5.0(patch_hash=68e78146e7d6d2bb10ffa11b462d5c221f9cef119d21f7858a7f7410ffcab1c6)(e1f2fcdbbf8b150ff58377c25b466b73) optionalDependencies: '@commitlint/cli': 21.2.2(@types/node@26.5.1)(conventional-commits-parser@7.1.2)(typescript@6.0.3) eslint: 10.10.0(jiti@2.7.0)(supports-color@10.2.2) @@ -76282,57 +76204,11 @@ snapshots: - bufferutil - utf-8-validate - weapp-style-injector@1.0.5: - dependencies: - '@weapp-tailwindcss/shared': 2.0.3 - micromatch: 4.0.8 - weapp-tailwindcss-children@0.1.0(tailwindcss@4.3.3): dependencies: tailwindcss: 4.3.3 - weapp-tailwindcss@5.5.4(@mpxjs/webpack-plugin@2.11.1(@mpxjs/core@2.11.1)(supports-color@10.2.2)(vue@2.7.16)(webpack@5.105.4))(@oxc-project/types@0.149.0)(jiti@2.7.0)(postcss@8.5.28)(rolldown@1.2.8)(supports-color@10.2.2)(tailwindcss@4.3.3)(tsx@4.23.13)(vite@8.3.0(@types/node@26.5.1)(esbuild@0.28.2)(jiti@2.7.0)(less@4.6.6)(sass-embedded@1.104.1)(sass@1.104.1)(stylus@0.63.0(supports-color@10.2.2))(terser@5.51.2)(tsx@4.23.13)(yaml@2.9.1)): - dependencies: - '@babel/parser': 8.0.4 - '@babel/traverse': 8.0.4 - '@babel/types': 8.0.4 - '@csstools/css-tokenizer': 4.0.0 - '@tailwindcss-mangle/engine': 0.2.0(tailwindcss@4.3.3) - '@vue/compiler-dom': 3.5.42 - '@weapp-core/escape': 8.0.0 - '@weapp-tailwindcss/logger': 2.0.3 - '@weapp-tailwindcss/postcss': 3.3.3(jiti@2.7.0)(tailwindcss@4.3.3)(tsx@4.23.13)(yaml@2.9.1) - '@weapp-tailwindcss/reset': 0.1.4(tailwindcss@4.3.3) - '@weapp-tailwindcss/shared': 2.0.3 - comment-json: 5.0.0 - debug: 4.4.3(supports-color@10.2.2) - fast-glob: 3.3.3 - htmlparser2: 12.0.0 - lightningcss: 1.33.0 - local-pkg: 1.2.1 - lru-cache: 11.5.2 - magic-string: 1.3.1 - micromatch: 4.0.8 - oxc-parser: 0.149.0 - oxc-walker: 1.1.1(@oxc-project/types@0.149.0)(oxc-parser@0.149.0)(rolldown@1.2.8) - postcss-scss: 4.0.9(postcss@8.5.28) - semver: 7.8.5 - tailwindcss-config: 2.0.4 - weapp-style-injector: 1.0.5 - yaml: 2.9.1 - optionalDependencies: - '@mpxjs/webpack-plugin': 2.11.1(@mpxjs/core@2.11.1)(supports-color@10.2.2)(vue@2.7.16)(webpack@5.105.4) - vite: 8.3.0(@types/node@26.5.1)(esbuild@0.28.2)(jiti@2.7.0)(less@4.6.6)(sass-embedded@1.104.1)(sass@1.104.1)(stylus@0.63.0(supports-color@10.2.2))(terser@5.51.2)(tsx@4.23.13)(yaml@2.9.1) - transitivePeerDependencies: - - '@oxc-project/types' - - jiti - - postcss - - rolldown - - supports-color - - tailwindcss - - tsx - - weapp-vite@7.1.1(@babel/core@8.0.1)(@mpxjs/webpack-plugin@2.11.1(@mpxjs/core@2.11.1)(supports-color@10.2.2)(vue@2.7.16)(webpack@5.105.4))(@oxc-project/types@0.149.0)(@swc/helpers@0.5.23)(@types/node@26.5.1)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0)(supports-color@10.2.2))(hono@4.13.0)(jiti@2.7.0)(less@4.6.6)(miniprogram-api-typings@5.2.3)(oxc-resolver@11.21.2)(rollup@4.63.1(patch_hash=c8c92d871ccf0418d1ba8b1f11a3371b706a1787f102194edb01d655e1ae84e0))(sass-embedded@1.104.1)(sass@1.104.1)(stylus@0.63.0(supports-color@10.2.2))(supports-color@10.2.2)(tailwindcss@4.3.3)(terser@5.51.2)(tsx@4.23.13)(vitest@5.0.0)(yaml@2.9.1): + weapp-vite@7.1.1(@babel/core@8.0.1)(@swc/helpers@0.5.23)(@types/node@26.5.1)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0)(supports-color@10.2.2))(hono@4.13.0)(jiti@2.7.0)(less@4.6.6)(miniprogram-api-typings@5.2.3)(oxc-resolver@11.21.2)(rollup@4.63.1(patch_hash=c8c92d871ccf0418d1ba8b1f11a3371b706a1787f102194edb01d655e1ae84e0))(sass-embedded@1.104.1)(sass@1.104.1)(stylus@0.63.0(supports-color@10.2.2))(supports-color@10.2.2)(terser@5.51.2)(tsx@4.23.13)(vitest@5.0.0)(yaml@2.9.1): dependencies: '@babel/preset-env': 8.0.5(@babel/core@8.0.1) '@babel/preset-typescript': 8.0.1(@babel/core@8.0.1) @@ -76381,14 +76257,12 @@ snapshots: vue: 3.5.42(typescript@6.0.3) vue-tsc: 3.3.11(typescript@6.0.3) weapp-ide-cli: 6.1.4(@types/node@26.5.1) - weapp-tailwindcss: 5.5.4(@mpxjs/webpack-plugin@2.11.1(@mpxjs/core@2.11.1)(supports-color@10.2.2)(vue@2.7.16)(webpack@5.105.4))(@oxc-project/types@0.149.0)(jiti@2.7.0)(postcss@8.5.28)(rolldown@1.2.8)(supports-color@10.2.2)(tailwindcss@4.3.3)(tsx@4.23.13)(vite@8.3.0(@types/node@26.5.1)(esbuild@0.28.2)(jiti@2.7.0)(less@4.6.6)(sass-embedded@1.104.1)(sass@1.104.1)(stylus@0.63.0(supports-color@10.2.2))(terser@5.51.2)(tsx@4.23.13)(yaml@2.9.1)) + weapp-tailwindcss: link:packages/weapp-tailwindcss wevu: 7.1.1(@babel/core@8.0.1)(miniprogram-api-typings@5.2.3)(rolldown@1.2.8)(rollup@4.63.1(patch_hash=c8c92d871ccf0418d1ba8b1f11a3371b706a1787f102194edb01d655e1ae84e0))(typescript@6.0.3)(vitest@5.0.0) optionalDependencies: '@swc/core': 1.16.2(@swc/helpers@0.5.23) transitivePeerDependencies: - '@babel/core' - - '@mpxjs/webpack-plugin' - - '@oxc-project/types' - '@swc/helpers' - '@types/node' - '@typescript/native-preview' @@ -76407,14 +76281,13 @@ snapshots: - stylus - sugarss - supports-color - - tailwindcss - terser - tsx - utf-8-validate - vitest - yaml - weapp-vite@7.1.1(@babel/core@8.0.5)(@mpxjs/webpack-plugin@2.11.1(@mpxjs/core@2.11.1)(supports-color@10.2.2)(vue@2.7.16)(webpack@5.105.4))(@oxc-project/types@0.149.0)(@swc/helpers@0.5.23)(@types/node@26.5.1)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0)(supports-color@10.2.2))(hono@4.13.0)(jiti@2.7.0)(less@4.6.6)(miniprogram-api-typings@5.2.3)(oxc-resolver@11.21.2)(rollup@4.63.1(patch_hash=c8c92d871ccf0418d1ba8b1f11a3371b706a1787f102194edb01d655e1ae84e0))(sass-embedded@1.104.1)(sass@1.104.1)(stylus@0.63.0(supports-color@10.2.2))(supports-color@10.2.2)(tailwindcss@4.3.3)(terser@5.51.2)(tsx@4.23.13)(vitest@5.0.0)(yaml@2.9.1): + weapp-vite@7.1.1(@babel/core@8.0.5)(@swc/helpers@0.5.23)(@types/node@26.5.1)(esbuild@0.28.2)(eslint@10.10.0(jiti@2.7.0)(supports-color@10.2.2))(hono@4.13.0)(jiti@2.7.0)(less@4.6.6)(miniprogram-api-typings@5.2.3)(oxc-resolver@11.21.2)(rollup@4.63.1(patch_hash=c8c92d871ccf0418d1ba8b1f11a3371b706a1787f102194edb01d655e1ae84e0))(sass-embedded@1.104.1)(sass@1.104.1)(stylus@0.63.0(supports-color@10.2.2))(supports-color@10.2.2)(terser@5.51.2)(tsx@4.23.13)(vitest@5.0.0)(yaml@2.9.1): dependencies: '@babel/preset-env': 8.0.5(@babel/core@8.0.5) '@babel/preset-typescript': 8.0.1(@babel/core@8.0.5) @@ -76463,14 +76336,12 @@ snapshots: vue: 3.5.42(typescript@6.0.3) vue-tsc: 3.3.11(typescript@6.0.3) weapp-ide-cli: 6.1.4(@types/node@26.5.1) - weapp-tailwindcss: 5.5.4(@mpxjs/webpack-plugin@2.11.1(@mpxjs/core@2.11.1)(supports-color@10.2.2)(vue@2.7.16)(webpack@5.105.4))(@oxc-project/types@0.149.0)(jiti@2.7.0)(postcss@8.5.28)(rolldown@1.2.8)(supports-color@10.2.2)(tailwindcss@4.3.3)(tsx@4.23.13)(vite@8.3.0(@types/node@26.5.1)(esbuild@0.28.2)(jiti@2.7.0)(less@4.6.6)(sass-embedded@1.104.1)(sass@1.104.1)(stylus@0.63.0(supports-color@10.2.2))(terser@5.51.2)(tsx@4.23.13)(yaml@2.9.1)) + weapp-tailwindcss: link:packages/weapp-tailwindcss wevu: 7.1.1(@babel/core@8.0.5)(miniprogram-api-typings@5.2.3)(rolldown@1.2.8)(rollup@4.63.1(patch_hash=c8c92d871ccf0418d1ba8b1f11a3371b706a1787f102194edb01d655e1ae84e0))(typescript@6.0.3)(vitest@5.0.0) optionalDependencies: '@swc/core': 1.16.2(@swc/helpers@0.5.23) transitivePeerDependencies: - '@babel/core' - - '@mpxjs/webpack-plugin' - - '@oxc-project/types' - '@swc/helpers' - '@types/node' - '@typescript/native-preview' @@ -76489,7 +76360,6 @@ snapshots: - stylus - sugarss - supports-color - - tailwindcss - terser - tsx - utf-8-validate diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 33b42c55d..e227605df 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -105,6 +105,7 @@ versioning: overrides: jiti: 2.7.0 + weapp-vite>weapp-tailwindcss: workspace:* catalogs: autoprefixer10: @@ -389,5 +390,6 @@ catalogs: wrangler: ^4.131.1 patchedDependencies: + '@icebreakers/monorepo@5.5.0': patches/@icebreakers__monorepo@5.5.0.patch rollup@4.63.0: patches/rollup@4.63.0.patch rollup@4.63.1: patches/rollup@4.63.1.patch