@fox-js/foxui-pad 4.1.5 → 4.1.7

package/dist/theme/components/actionsheet.scss

@@ -0,0 +1,58 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 动作面板 组件 Design Token
+$actionsheet: () !default;
+$actionsheet: map.deep-merge(
+  (
+    'width': 40%,
+    'height': null,
+    'padding': 0px 16px,
+    'row-gap': 10px,
+    'header-height': 60px,
+    'header-title-font-size': $font-size-large,
+    'header-title-font-weight': 500,
+    'header-title-color': $title-color,
+    'header-title-align': center,
+    'header-icon-color': $text-color-secondary,
+    'header-icon-size': $font-size-base,
+    'searchbar-height': 40px,
+    'searchbar-box-shadow': none,
+    'searchbar-border-radius': 12px,
+    'searchbar-background': $fill-color-base,
+    'tagbar-gap': 8px,
+    'tag-padding': 2px 6px,
+    'tag-color': $color-primary,
+    'tag-background-color': $color-primary-light-9,
+    'tag-border': 1px solid $color-primary-light-8,
+    'tag-border-radius': 4px,
+    'tag-font-size': $font-size-small,
+    'list-height': 380px,
+    'list-inner-height': 100%,
+    'list-item-height': auto,
+    'list-item-gutter': 28px,
+    'list-item-label-padding': 0 10px 0 0,
+    'list-item-text-font-size': $font-size-medium,
+    'list-item-text-font-weight': 400,
+    'list-item-text-line-height': 24px,
+    'list-item-text-color': $title-color,
+    'list-item-text-margin': 0,
+    'list-item-subtext-margin': 8px 0 0 0,
+    'list-item-subtext-font-size': $font-size-small,
+    'list-item-subtext-font-weight': 400,
+    'list-item-subtext-color': $text-color-secondary,
+    'list-item-icon-color': $disabled-color,
+    'list-item-icon-color-active': $color-primary,
+    'list-item-icon-color-disable': $disabled-color,
+    'list-item-icon-size': $font-size-medium,
+    'footer-height': 60px,
+    'footer-button-min-width': 100%,
+    'footer-button-height': 36px
+  ),
+  $actionsheet
+);

package/dist/theme/components/buttons-item.scss

@@ -0,0 +1,18 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 按钮组 组件 Design Token
+$buttons-item: () !default;
+$buttons-item: map.deep-merge(
+  (
+    'dropdown-link-icon-size': $font-size-medium,
+    'dropdown-link-icon-color': null,
+    'dropdown-link-text-font-size': $font-size-small
+  ),
+  $buttons-item
+);

package/dist/theme/components/calendar.scss

@@ -0,0 +1,35 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 日历 组件 Design Token
+$calendar: () !default;
+$calendar: map.deep-merge(
+  (
+    'width': 40%,
+    'primary-color': $color-primary,
+    'choose-color': $color-primary,
+    'choose-font-color': $color-primary,
+    'base-color': $title-color,
+    'disable-color': $disabled-color,
+    'base-font': $font-size-medium,
+    'title-font': $font-size-large,
+    'title-font-weight': 500,
+    'sub-title-font': $font-size-base,
+    'text-font': $font-size-small,
+    'day-font': $font-size-medium,
+    'day-active-border-radius': 0px,
+    'day-font-weight': 500,
+    'day67-font-color': $color-primary,
+    'month-title-font-size': inherit,
+    'popup-height': 85vh,
+    'footer-button-min-width': 100%,
+    'footer-button-height': 44px,
+    'footer-button-background-color': $color-primary
+  ),
+  $calendar
+);

package/dist/theme/components/cascader.scss

@@ -0,0 +1,37 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 级联选择器 组件 Design Token
+$cascader: () !default;
+$cascader: map.deep-merge(
+  (
+    'width': 40%,
+    'font-size': $font-size-base,
+    'line-height': 22px,
+    'tabs-titles-background-color': $white,
+    'tabs-titles-item-padding': 0 10px,
+    'bar-padding': 24px 20px 12px 20px,
+    'bar-title-align': center,
+    'bar-title-color': $title-color,
+    'bar-title-font-weight': bold,
+    'bar-title-font-size': $font-size-large,
+    'bar-title-line-height': 1.5,
+    'bar-title-icon-color': $text-color-secondary,
+    'bar-title-icon-size': $font-size-base,
+    'bar-searchbar-box-shadow': none,
+    'bar-searchbar-border-radius': 12px,
+    'bar-searchbar-background': $fill-color-base,
+    'bar-searchbar-icon-size': 16px,
+    'bar-searchbar-icon-color': $text-color-secondary,
+    'item-padding': 10px 20px,
+    'item-color': $title-color,
+    'item-font-size': $font-size-base,
+    'item-active-color': $color-primary
+  ),
+  $cascader
+);

package/dist/theme/components/content.scss

@@ -0,0 +1,21 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 页面内容区 组件 Design Token
+$content: () !default;
+$content: map.deep-merge(
+  (
+    'background': $white,
+    'height-inner': 100%,
+    'padding-top': null,
+    'padding-right': null,
+    'padding-bottom': null,
+    'padding-left': null,
+  ),
+  $content
+);

package/dist/theme/components/dialog.scss

@@ -0,0 +1,53 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 对话框 组件 Design Token
+$dialog: () !default;
+$dialog: map.deep-merge(
+  (
+    'popup-width': 80%,
+    'popup-height': auto,
+    'popup-border-radius': 20px,
+    'background': transparent,
+    'min-height': 156px,
+    'padding': 28px 24px 16px 24px,
+    'header-height': 20px,
+    'header-background': transparent,
+    'header-padding': 0px,
+    'header-layout': row nowrap,
+    'header-justify-content': center,
+    'header-align-items': center,
+    'header-font-size': $font-size-medium,
+    'header-font-weight': normal,
+    'header-color': $title-color,
+    'header-close-icon-color': $text-color-secondary,
+    'header-close-icon-size': $font-size-medium,
+    'body-background': transparent,
+    'body-margin': 20px 0px,
+    'body-padding': 0px,
+    'content-padding': 0px,
+    'content-text-align': center,
+    'content-font-size': $font-size-small,
+    'content-line-height': 16px,
+    'content-color': $text-color-regular,
+    'footer-border-top': 1px solid $border-color-lighter,
+    'footer-height': auto,
+    'footer-background': transparent,
+    'footer-padding': 0px,
+    'footer-layout': row nowrap,
+    'footer-justify-content': space-around,
+    'footer-align-items': center,
+    'footer-button-padding': 10px,
+    'footer-button-font-size': $font-size-medium,
+    'footer-button-color': $title-color-secondary,
+    'footer-button-color-primary': $color-danger,
+    'footer-button-font-weight': 400,
+    'footer-button-border-left': 1px solid $border-color-lighter
+  ),
+  $dialog
+);

package/dist/theme/components/floating-button.scss

@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 悬浮按钮 组件 Design Token
+$floating-button: () !default;
+$floating-button: map.deep-merge(
+  (
+    'position': absolute,
+    'z-index': 3600,
+    'width': 52px,
+    'height': 52px,
+    'opacity': 1,
+    'color': $white,
+    'border-radius': 50%,
+    'background': $color-primary,
+    'box-shadow': $box-shadow-light,
+    'icon-size': $font-size-extra-large
+  ),
+  $floating-button
+);

package/dist/theme/components/floating-window.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 悬浮窗 组件 Design Token
+$floating-window: () !default;
+$floating-window: map.deep-merge(
+  (
+    'header-height': 40px,
+    'header-background': $fill-color-base,
+    'header-padding': 0 25px,
+    'border-radius': 4px,
+    'width': 50dvw,
+    'top': 15dvh,
+    'left': 25dvw,
+    'background': $background-color,
+    'box-shadow': $box-shadow,
+    'title-font-size': $font-size-medium,
+    'content-font-size': $font-size-base,
+    'z-index': 2001,
+    'collapse-color': $color-primary,
+    'collapse-font-size': $font-size-base,
+    'close-color': inherit,
+    'close-hover-color': $color-primary,
+    'fixednav-z-index': 2000,
+    'fixednav-bg': $color-primary,
+    'fixednav-color': $white,
+    'fixednav-width': 80px,
+    'fixednav-height': 50px
+  ),
+  $floating-window
+);

package/dist/theme/components/footer-bar.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 页面底部导航 组件 Design Token
+$footer-bar: () !default;
+$footer-bar: map.deep-merge(
+  (
+    'fixed': absolute,
+    'min-height': 50px,
+    'padding': 7px 0,
+    'box-sizing': content-box,
+    'z-index': 10,
+    'background-color': $white,
+    'border-top': 1px solid $border-color-lighter,
+    'border-bottom': 1px solid $border-color-lighter,
+    'box-shadow': none,
+  ),
+  $footer-bar
+);

package/dist/theme/components/group.scss

@@ -0,0 +1,32 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 组布局 组件 Design Token
+$group: () !default;
+$group: map.deep-merge(
+  (
+    'padding': 0,
+    'header-padding': 0,
+    'header-margin': 0 0 10px 0,
+    'header-color': $title-color,
+    'header-font-size': $font-size-base,
+    'header-font-weight': 400,
+    'header-line-height': 1,
+    'header-mark-color': $color-primary,
+    'header-mark-width': 3px,
+    'header-mark-height': 15px,
+    'header-collapse-font-size': $font-size-base,
+    'header-collapse-color': $color-primary,
+    'header-collapse-gutter': 2px,
+    'header-collapse-icon-size': $font-size-small,
+    'background-color': inherit,
+    'flow-padding': 0,
+    'grid-padding': 0,
+  ),
+  $group
+);

package/dist/theme/components/header-bar.scss

@@ -0,0 +1,39 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 页面头部导航 组件 Design Token
+$header-bar: () !default;
+$header-bar: map.deep-merge(
+  (
+    'fixed': absolute,
+    'min-height': auto,
+    'z-index': 10,
+    'box-sizing': content-box,
+    'color': $title-color,
+    'background-color': $white,
+    'border-top': 0px solid $border-color-lighter,
+    'border-bottom': 1px solid $border-color-lighter,
+    'box-shadow': 0px 1px 7px 0px $border-color-lighter,
+    'left-font-size': $font-size-medium,
+    'left-icon-size': $font-size-large,
+    'left-padding': 0 16px,
+    'right-font-size': $font-size-medium,
+    'right-padding': 0 16px,
+    'right-icon-size': $font-size-large,
+    'title-font-size': $font-size-medium,
+    'title-icon-size': $font-size-large,
+    'inner-height': 44px,
+    'inner-background-color': unset,
+    'inner-padding': 0px,
+    'inner-box-sizing': content-box,
+    'bottom-height': auto,
+    'bottom-padding': 0px,
+    'bottom-box-sizing': border-box,
+  ),
+  $header-bar
+);

package/dist/theme/components/hint-text.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 提示文本 组件 Design Token
+$hint-text: () !default;
+$hint-text: map.deep-merge(
+  (
+    'font-size': $font-size-base,
+    'font-size-small': $font-size-small,
+    'font-size-large': $font-size-large,
+    'padding': 6px 8px,
+    'box-shadow': $box-shadow,
+    'color': $white,
+    'background-color': $overlay-text-bg-color,
+    'z-index': 3000,
+    'arrow-size': 6px
+  ),
+  $hint-text
+);

package/dist/theme/components/index.scss

@@ -0,0 +1,36 @@
+// 组件 Design Token 统一导出
+@forward 'actionsheet';
+@forward 'buttons-item';
+@forward 'calendar';
+@forward 'cascader';
+@forward 'content';
+@forward 'dialog';
+@forward 'floating-button';
+@forward 'floating-window';
+@forward 'footer-bar';
+@forward 'group';
+@forward 'header-bar';
+@forward 'hint-text';
+@forward 'infiniteloading';
+@forward 'input';
+@forward 'input-item';
+@forward 'input-number-item';
+@forward 'link-item';
+@forward 'messagebox';
+@forward 'numberkeyboard';
+@forward 'picker';
+@forward 'popover-dialog';
+@forward 'popup';
+@forward 'popup-wrapper';
+@forward 'price';
+@forward 'radio';
+@forward 'row-item';
+@forward 'searchbar';
+@forward 'shortpassword';
+@forward 'slot-item';
+@forward 'steps-bar';
+@forward 'switch-item';
+@forward 'tabs-bar';
+@forward 'tabs-frame';
+@forward 'text';
+@forward 'toast';

package/dist/theme/components/infiniteloading.scss

@@ -0,0 +1,16 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 无限加载 组件 Design Token
+$infiniteloading: () !default;
+$infiniteloading: map.deep-merge(
+  (
+    'bottom-color': $disabled-color
+  ),
+  $infiniteloading
+);

package/dist/theme/components/input-item.scss

@@ -0,0 +1,52 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 输入框 组件 Design Token
+$input-item: () !default;
+$input-item: map.deep-merge(
+  (
+    'width': null,
+    'min-width': 0,
+    'max-width': null,
+    'padding': null,
+    'margin': null,
+    'text-align': right,
+    'label-width': 30%,
+    'label-font-size': $font-size-base,
+    'label-font-weight': 400,
+    'label-line-height': auto,
+    'label-color': $black,
+    'label-padding-top': 0,
+    'label-padding-left': 0 10px 0 0,
+    'label-padding-right': 0 10px 0 0,
+    'append-width': 30px,
+    'append-font-size': $font-size-base,
+    'append-action-icon-size': $font-size-base,
+    'append-action-icon-color': $disabled-color,
+    'color': $black,
+    'background-color': null,
+    'border-bottom': 0px solid $border-color-light,
+    'disabled-color': $disabled-color,
+    'readonly-color': $black,
+    'placeholder-color': $disabled-color,
+    'require-color': $required-color,
+    'font-size': $font-size-base,
+    'height': 24px,
+    'tip-icon-margin': 0 4px 0 0,
+    'tip-icon-size': $font-size-extra-small,
+    'tip-font-size': $font-size-small,
+    'tip-height': 16px,
+    'tip-info-color': $color-info,
+    'tip-warn-color': $color-warning,
+    'tip-error-color': $color-danger,
+    'error-line-color': $color-danger,
+    'unit-color': $black,
+    'unit-font-size': $font-size-base
+  ),
+  $input-item
+);

package/dist/theme/components/input-number-item.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 数字输入框 组件 Design Token
+$input-number-item: () !default;
+$input-number-item: map.deep-merge(
+  (
+    'padding': 0 29px 0 0,
+    'input-width': 40px,
+    'input-color': $black,
+    'input-background': $fill-color-base,
+    'left-color': $black,
+    'left-background': $fill-color-base,
+    'right-color': $white,
+    'right-background': $color-primary
+  ),
+  $input-number-item
+);

package/dist/theme/components/input.scss

@@ -0,0 +1,20 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 输入框 组件 Design Token
+$input: () !default;
+$input: map.deep-merge(
+  (
+    'border-bottom': $border-color-light,
+    'color': $text-color-regular,
+    'disabled-color': $disabled-color,
+    'required-color': $required-color,
+    'font-size': $font-size-base
+  ),
+  $input
+);

package/dist/theme/components/link-item.scss

@@ -0,0 +1,19 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 链接 组件 Design Token
+$link-item: () !default;
+$link-item: map.deep-merge(
+  (
+    'padding': 0 5px 0 0,
+    'margin': 0,
+    'sub-font-size': $font-size-small,
+    'sub-color': $text-color-secondary
+  ),
+  $link-item
+);

package/dist/theme/components/messagebox.scss

@@ -0,0 +1,68 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+// 消息框 组件 Design Token
+$messagebox: () !default;
+$messagebox: map.deep-merge(
+  (
+    'z-index': 3000,
+    'width': 80%,
+    'height': auto,
+    'font-size': $font-size-base,
+    'font-weight': $font-weight-bold,
+    'line-height': 24px,
+    'color': $title-color,
+    'text-align': center,
+    'background': $white,
+    'background-info': linear-gradient(180deg, $color-info-light-9 0%, $white 100%),
+    'background-success': linear-gradient(180deg, $color-success-light-9 0%, $white 100%),
+    'background-warning': linear-gradient(180deg, $color-warning-light-9 0%, $white 100%),
+    'background-error': linear-gradient(180deg, $color-danger-light-9 0%, $white 100%),
+    'border-radius': 8px,
+    'box-shadow': $box-shadow-light,
+    'padding-top': 24px,
+    'padding-right': 16px,
+    'padding-bottom': 0px,
+    'padding-left': 16px,
+    'header-title-padding': 10px 0,
+    'header-title-font-size': $font-size-medium,
+    'header-title-font-weight': 600,
+    'header-title-color': $title-color,
+    'header-icon-color': $text-color-secondary,
+    'header-icon-size': 110px,
+    'header-close-icon-color': $text-color-secondary,
+    'header-close-icon-size': $font-size-medium,
+    'body-box-sizing': border-box,
+    'body-max-height': 60vh,
+    'group-title-padding': 10px 16px 10px 16px,
+    'group-title-font-size': $font-size-small,
+    'group-title-font-weight': 400,
+    'group-title-line-height': 1.5,
+    'group-title-color': $title-color-secondary,
+    'group-title-text-align': left,
+    'groups-rows-background-info': $color-info-light-9,
+    'groups-rows-background-success': $color-success-light-9,
+    'groups-rows-background-warning': $color-warning-light-9,
+    'groups-rows-background-error': $color-danger-light-9,
+    'group-row-padding': 10px 0,
+    'group-row-font-size': $font-size-base,
+    'group-row-font-weight': 400,
+    'group-row-line-height': 1.6,
+    'group-row-color': $title-color,
+    'group-row-text-align': left,
+    'footer-margin': 16px 0 0 0,
+    'footer-border-top': 1px solid $border-color-lighter,
+    'footer-width': 100%,
+    'footer-height': auto,
+    'footer-button-padding': 10px,
+    'footer-button-font-size': $font-size-medium,
+    'footer-button-font-weight': $font-weight-bold,
+    'footer-button-border-left': 1px solid $border-color-lighter
+  ),
+  $messagebox
+);