@fox-js/foxui 4.0.1-93 → 4.0.1-95

package/dist/theme/components/menu.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/base' as *;
+@use '../common/shadow' as *;
+
+$menu: () !default;
+$menu: map.deep-merge(
+  (
+    'active-item-font-weight': 500,
+    'bar-border-bottom-color': $border-color-light,
+    'bar-box-shadow': $box-shadow-light,
+    'bar-line-height': 48px,
+    'bar-opened-z-index': 2001,
+    'item-active-text-color': $color-primary,
+    'item-content-max-height': 214px,
+    'item-content-padding': 12px 24px,
+    'item-disabled-color': $text-color-secondary,
+    'item-font-size': $font-size-base,
+    'item-option-i-margin-right': 6px,
+    'item-option-padding-bottom': 12px,
+    'item-option-padding-top': 12px,
+    'item-text-color': $title-color,
+    'scroll-fixed-top': 0,
+    'scroll-fixed-z-index': 1000,
+    'title-text-padding-left': 8px,
+    'title-text-padding-right': 8px,
+  ),
+  $menu
+);

package/dist/theme/components/messagebox.scss

@@ -0,0 +1,55 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/base' as *;
+@use '../common/shadow' as *;
+
+$messagebox: () !default;
+$messagebox: map.deep-merge(
+  (
+    'text-align': center,
+    'background': $white,
+    'body-box-sizing': border-box,
+    'body-max-height': 60vh,
+    'border-radius': 8px,
+    'box-shadow': $box-shadow-light,
+    'color': $title-color,
+    'font-size': $font-size-base,
+    'footer-button-font-size': $font-size-medium,
+    'footer-button-font-weight': $font-weight-bold,
+    'footer-button-padding': 10px,
+    'footer-height': auto,
+    'footer-margin': 16px 0 0 0,
+    'footer-width': 100%,
+    'font-weight': $font-weight-bold,
+    'group-row-color': $title-color,
+    'group-row-font-size': $font-size-base,
+    'group-row-font-weight': $font-weight-bold,
+    'group-row-line-height': 1.6,
+    'group-row-padding': 10px 0,
+    'group-row-text-align': left,
+    'group-title-color': $title-color-secondary,
+    'group-title-font-size': $font-size-small,
+    'group-title-font-weight': $font-weight-bold,
+    'group-title-line-height': 1.5,
+    'group-title-text-align': left,
+    '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,
+    'width': 80%,
+    'height': auto,
+    'line-height': 24px,
+    'padding-bottom': 0px,
+    'padding-left': 16px,
+    'padding-right': 16px,
+    'padding-top': 24px,
+    'z-index': 3000
+  ),
+  $messagebox
+);

package/dist/theme/components/navbar.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/base' as *;
+
+$navbar: () !default;
+$navbar: map.deep-merge(
+  (
+    'background': $white,
+    'box-shadow': 0px 1px 7px 0px #{$border-color-lighter},
+    'color': $title-color-secondary,
+    'height': 44px,
+    'margin-bottom': 20px,
+    'padding': 0 16px,
+    'title-base-font': $font-size-base,
+    'title-font': $font-size-base,
+    'title-font-color': var(--fox-navbar-color),
+    'title-font-weight': 0,
+    'title-icon-margin': 0 0 0 13px,
+    'title-width': 100px,
+  ),
+  $navbar
+);

package/dist/theme/components/noticebar.scss

@@ -0,0 +1,20 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/base' as *;
+
+$noticebar: () !default;
+$noticebar: map.deep-merge(
+  (
+    'across-height': 40px,
+    'across-line-height': 24px,
+    'background': $color-warning-light-9,
+    'box-padding': 0 16px,
+    'color': $color-warning,
+    'font-size': $font-size-base,
+    'lefticon-margin': 0px 10px,
+    'righticon-margin': 0px 10px,
+    'wrapable-padding': 16px,
+  ),
+  $noticebar
+);

package/dist/theme/components/notify.scss

@@ -0,0 +1,21 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/base' as *;
+
+$notify: () !default;
+$notify: map.deep-merge(
+  (
+    'base-background-color': $color-primary,
+    'danger-background-color': $color-danger,
+    'font-size': $font-size-base,
+    'height': 44px,
+    'line-height': auto,
+    'padding': 12px 0,
+    'primary-background-color': $color-primary,
+    'success-background-color': $color-success,
+    'text-color': $white,
+    'warning-background-color': $color-warning,
+  ),
+  $notify
+);

package/dist/theme/components/numberkeyboard.scss

@@ -0,0 +1,30 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/fill' as *;
+@use '../common/base' as *;
+
+$numberkeyboard: () !default;
+$numberkeyboard: map.deep-merge(
+  (
+    'background-color': $fill-color-base,
+    'header-close-color': $text-color-secondary,
+    'header-close-font-size': $font-size-base,
+    'header-close-padding': 0 16px,
+    'header-color': $title-color-secondary,
+    'header-font-size': $font-size-medium,
+    'header-height': 34px,
+    'header-padding': 6px 0 0 0,
+    'key-background-color': $white,
+    'key-border-radius': 8px,
+    'key-finish-font-size': $font-size-medium,
+    'key-finish-font-size-color': $white,
+    'key-font-size': 28px,
+    'key-font-size-color': $title-color,
+    'key-height': 48px,
+    'key-line-height': $line-height-base,
+    'padding': 0 0 22px 0,
+    'width': 100%,
+  ),
+  $numberkeyboard
+);

package/dist/theme/components/pagination.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/base' as *;
+
+$pagination: () !default;
+$pagination: map.deep-merge(
+  (
+    'active-background-color': $color-primary,
+    'color': $color-primary,
+    'disable-background-color': $fill-color-base,
+    'disable-color': $disabled-color,
+    'font-size': $font-size-base,
+    'item-border-color': $border-color-light,
+    'item-border-radius': 2px,
+    'item-border-width': 1px,
+    'prev-next-padding': 0 11px
+  ),
+  $pagination
+);

package/dist/theme/components/picker.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/base' as *;
+
+$picker: () !default;
+$picker: map.deep-merge(
+  (
+    'bar-button-padding': 0 15px,
+    'bar-cancel-font-size': $font-size-base,
+    'bar-ok-font-size': $font-size-base,
+    'bar-title-color': $title-color,
+    'bar-title-font-size': $font-size-medium,
+    'bar-title-font-weight': normal,
+    'cancel-color': $text-color-regular,
+    'item-active-line-border': 1px solid $border-color-light,
+    'item-height': 36px,
+    'item-text-color': $title-color,
+    'item-text-font-size': $font-size-base,
+    'ok-color': $color-primary
+  ),
+  $picker
+);

package/dist/theme/components/popover-dialog.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/base' as *;
+
+$popover-dialog: () !default;
+$popover-dialog: map.deep-merge(
+  (
+    'arrow-size': $font-size-small,
+    'background-color': $white,
+    'background-color-dark': $title-color,
+    'border-radius': 4px,
+    'color': $title-color,
+    'color-dark': $white,
+    'min-width': 0px,
+    'overlay-background-color': transparent,
+    'padding': 12px,
+    'position': fixed,
+    'title-font-size': $font-size-medium,
+    'z-index': 2000
+  ),
+  $popover-dialog
+);

package/dist/theme/components/popover.scss

@@ -0,0 +1,20 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/border' as *;
+@use '../common/base' as *;
+@use '../common/typography' as *;
+
+$popover: () !default;
+$popover: map.deep-merge(
+  (
+    'border-bottom-color': $border-color-lighter,
+    'dark-background-color': $dark-background-5,
+    'disable-color': $text-color-secondary,
+    'menu-item-margin': 0 8px,
+    'menu-item-padding': 8px 0,
+    'menu-name-line-height': normal,
+    'primary-text-color': $title-color,
+    'white-background-color': $white,
+  ),
+  $popover
+);

package/dist/theme/components/popup-wrapper.scss

@@ -0,0 +1,40 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/base' as *;
+
+$popup-wrapper: () !default;
+$popup-wrapper: map.deep-merge(
+  (
+    'background': transparent,
+    'close-icon-color': $text-color-secondary,
+    'close-icon-size': $font-size-medium,
+    'close-inset': 16px 16px auto auto,
+    'footer-align-items': center,
+    'footer-background': transparent,
+    'footer-button-color': $title-color-secondary,
+    'footer-button-font-size': $font-size-medium,
+    'footer-button-font-weight': $font-weight-bold,
+    'footer-button-padding': 10px,
+    'footer-height': auto,
+    'footer-justify-content': space-around,
+    'footer-layout': row nowrap,
+    'footer-padding': 0px,
+    'header-align-items': center,
+    'header-background': transparent,
+    'header-color': $title-color,
+    'header-font-size': $font-size-medium,
+    'header-font-weight': normal,
+    'header-height': 20px,
+    'header-justify-content': center,
+    'header-layout': row nowrap,
+    'header-padding': 0px,
+    'min-height': 160px,
+    'padding': 0px,
+    'popup-border-radius': 20px,
+    'popup-height': auto,
+    'popup-position': fixed,
+    'popup-width': 80%,
+  ),
+  $popup-wrapper
+);

package/dist/theme/components/popup.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../common/typography' as *;
+@use '../common/base' as *;
+
+$popup: () !default;
+$popup: map.deep-merge(
+  (
+    'border-radius': 20px,
+    'close-icon-margin': 16px,
+    'close-icon-size': $font-size-small,
+  ),
+  $popup
+);

package/dist/theme/components/price.scss

@@ -0,0 +1,19 @@
+@use 'sass:map';
+@use '../common/typography' as *;
+@use '../common/base' as *;
+
+$price: () !default;
+$price: map.deep-merge(
+  (
+    'big-size': 24px,
+    'decimal-big-size': $font-size-large,
+    'decimal-medium-size': $font-size-base,
+    'decimal-small-size': $font-size-extra-small,
+    'medium-size': $font-size-medium,
+    'small-size': $font-size-small,
+    'symbol-big-size': $font-size-large,
+    'symbol-medium-size': $font-size-base,
+    'symbol-small-size': $font-size-extra-small,
+  ),
+  $price
+);

package/dist/theme/components/progress.scss

@@ -0,0 +1,32 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/fill' as *;
+
+$progress: () !default;
+$progress: map.deep-merge(
+  (
+    'base-height': 10px,
+    'base-text-font-size': 9px,
+    'base-text-line-height': 13px,
+    'base-text-padding': var(--fox-progress-insidetext-padding),
+    'base-text-top': var(--fox-progress-insidetext-top),
+    'inner-background-color': $color-primary,
+    'insidetext-background': var(--fox-progress-inner-background-color),
+    'insidetext-border-radius': 5px,
+    'insidetext-padding': 3px 5px 3px 6px,
+    'insidetext-top': -42%,
+    'large-height': 15px,
+    'large-text-font-size': 13px,
+    'large-text-line-height': 18px,
+    'large-text-padding': var(--fox-progress-insidetext-padding),
+    'large-text-top': var(--fox-progress-insidetext-top),
+    'outer-background-color': $fill-color-base,
+    'outer-border-radius': 12px,
+    'small-height': 5px,
+    'small-text-font-size': 7px,
+    'small-text-line-height': 10px,
+    'small-text-padding': 2px 4px,
+    'small-text-top': -100%,
+  ),
+  $progress
+);

package/dist/theme/components/radio.scss

@@ -0,0 +1,33 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/border' as *;
+@use '../common/base' as *;
+
+$radio: () !default;
+$radio: map.deep-merge(
+  (
+    'button-background': $white,
+    'button-background-active': $color-primary-light-9,
+    'button-border-color-active': $color-primary,
+    'button-border-radius': 4px,
+    'button-font-size': $font-size-small,
+    'button-min-width': 100px,
+    'button-padding': 5px 18px,
+    'icon-disable-color': $disabled-color,
+    'icon-font-size': $font-size-large,
+    'icon-readonly-color': $readonly-color,
+    'icon-unchecked-color': $disabled-color,
+    'label-active-color': $color-primary,
+    'label-button-border-color': $border-color-base,
+    'label-color': $title-color,
+    'label-disable-color': $disabled-color,
+    'label-font-size': $font-size-base,
+    'label-margin-left': 15px,
+    'label-readonly-color': $readonly-color,
+    'margin-horizontal': 0 8px 8px 0,
+    'margin-vertical': 0 0 8px 0,
+    'min-width': 0px
+  ),
+  $radio
+);

package/dist/theme/components/range.scss

@@ -0,0 +1,18 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+
+$range: () !default;
+$range: map.deep-merge(
+  (
+    'bar-bg-color': $color-primary,
+    'bar-btn-bg-color': $white,
+    'bar-btn-border': 1px solid $color-primary,
+    'bar-btn-height': 24px,
+    'bar-btn-width': 24px,
+    'bg-color': $color-primary,
+    'bg-color-tick': $color-primary-light-5,
+    'tip-font-color': $title-color,
+  ),
+  $range
+);

package/dist/theme/components/rate.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography.scss' as *;
+@use '../common/base' as *;
+
+$rate: () !default;
+$rate: map.deep-merge(
+  (
+    'icon-color': $color-primary,
+    'icon-void-color': $disabled-color
+  ),
+  $rate
+);

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

@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use '../common/border' as *;
+
+$row-item: () !default;
+$row-item: map.deep-merge(
+  (
+    'divide-color': $border-color-light,
+    'divide-height': 12px,
+    'divide-margin': 0 10px,
+    'divide-width': 1px,
+    'column-gap': 12px
+  ),
+  $row-item
+);

package/dist/theme/components/searchbar.scss

@@ -0,0 +1,28 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/shadow' as *;
+@use '../common/base' as *;
+
+$searchbar: () !default;
+$searchbar: map.deep-merge(
+  (
+    'background': $white,
+    'border-radius': 12px,
+    'input-background': $fill-color-base,
+    'input-bar-color': inherit,
+    'input-bar-placeholder-color': inherit,
+    'input-border-radius': 16px,
+    'input-box-shadow': $box-shadow-lighter,
+    'input-height': 32px,
+    'input-padding': 0 0 0 13px,
+    'input-width': 100%,
+    'input-inner-padding': 0 20px 0 10px,
+    'icon-size': $font-size-base,
+    'padding': 9px 16px,
+    'right-out-color': $black,
+    'width': 100%
+  ),
+  $searchbar
+);

package/dist/theme/components/shortpassword.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/border' as *;
+@use '../common/fill' as *;
+@use '../common/base' as *;
+@use '../common/typography' as *;
+
+$shortpassword: () !default;
+$shortpassword: map.deep-merge(
+  (
+    'background-color': $fill-color-base,
+    'border-color': $border-color-base,
+    'error': $color-primary,
+    'forget': $text-color-regular,
+  ),
+  $shortpassword
+);

package/dist/theme/components/sidenavbar.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/fill' as *;
+@use '../common/base' as *;
+
+$sidenavbar: () !default;
+$sidenavbar: map.deep-merge(
+  (
+    'content-bg-color': $white,
+    'item-font-size': $font-size-medium,
+    'item-height': 40px,
+    'item-line-height': 40px,
+    'item-title-bg-color': $white,
+    'item-title-color': $title-color,
+    'sub-title-bg-color': $fill-color-base,
+    'sub-title-border': 0,
+    'sub-title-border-color': $fill-color-base,
+    'sub-title-font-size': $font-size-large,
+    'sub-title-height': 40px,
+    'sub-title-radius': 0,
+    'sub-title-text-color': $title-color,
+    'sub-title-text-line-height': 40px,
+    'sub-title-width': 100%,
+  ),
+  $sidenavbar
+);

package/dist/theme/components/skeleton.scss

@@ -0,0 +1,10 @@
+@use 'sass:map';
+@use '../common/fill' as *;
+
+$skeleton: () !default;
+$skeleton: map.deep-merge(
+  (
+    'content-line-background-color': $fill-color-base,
+  ),
+  $skeleton
+);

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

@@ -0,0 +1,10 @@
+@use 'sass:map';
+
+$slot-item: () !default;
+$slot-item: map.deep-merge(
+  (
+    'margin': 0,
+    'padding': 0,
+  ),
+  $slot-item
+);

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

@@ -0,0 +1,55 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/base' as *;
+
+$steps-bar: () !default;
+$steps-bar: map.deep-merge(
+  (
+    'active-color': $white,
+    'disabled-color': $white,
+    'done-color': $white,
+    'error-color': $white,
+    'font-size': $font-size-base,
+    'half-color': $white,
+    'icon-active-color': $white,
+    'icon-bg-active-color': $color-primary,
+    'icon-bg-disabled-color': $disabled-color,
+    'icon-bg-done-color': $color-success,
+    'icon-bg-error-color': $color-danger,
+    'icon-bg-half-color': $color-warning,
+    'icon-bg-normal-color': $disabled-color,
+    'icon-border': none,
+    'icon-disabled-color': $white,
+    'icon-done-color': $white,
+    'icon-error-color': $white,
+    'icon-font-size': var(--fox-steps-bar-font-size),
+    'icon-half-color': $white,
+    'icon-normal-color': $white,
+    'icon-size': 28px,
+    'line-active-color': $color-primary,
+    'line-border-style': solid,
+    'line-border-width': 1px,
+    'line-normal-color': $disabled-color,
+    'main-height-horizontal': auto,
+    'main-height-vertical': auto,
+    'main-line-height-horizontal': auto,
+    'main-line-height-vertical': var(--fox-steps-bar-icon-size),
+    'main-margin-horizontal': 10px 0 0 0,
+    'main-margin-vertical': 0 0 0 0,
+    'main-width-horizontal': auto,
+    'main-width-vertical': 100px,
+    'mark-color': $color-primary,
+    'mark-height-vertical': var(--fox-steps-bar-icon-size),
+    'mark-width-vertical': var(--fox-steps-bar-icon-size),
+    'normal-color': $white,
+    'text-active-color': $black,
+    'text-disabled-color': $black,
+    'text-done-color': $black,
+    'text-error-color': $black,
+    'text-font-size': var(--fox-steps-bar-font-size),
+    'text-half-color': $black,
+    'text-normal-color': $disabled-color
+  ),
+  $steps-bar
+);

package/dist/theme/components/steps.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use '../common/color' as *;
+@use '../common/typography' as *;
+@use '../common/base' as *;
+
+$steps: () !default;
+$steps: map.deep-merge(
+  (
+    'base-content-color': $title-color-secondary,
+    'base-content-font-size': $font-size-base,
+    'base-icon-font-size': 13px,
+    'base-icon-height': 25px,
+    'base-icon-line-height': 25px,
+    'base-icon-width': 25px,
+    'base-line-color': $text-color-secondary,
+    'base-title-color': $text-color-secondary,
+    'base-title-font-size': $font-size-base,
+    'base-title-margin-bottom': 10px,
+    'finish-head-border-color': $color-primary,
+    'finish-head-color': $color-primary,
+    'finish-icon-text-color': $white,
+    'finish-line-background': $color-primary,
+    'finish-title-color': $color-primary,
+    'process-head-border-color': $color-primary,
+    'process-head-color': $white,
+    'process-icon-text-color': $color-primary,
+    'process-title-color': $color-primary,
+    'wait-content-color': $text-color-secondary,
+    'wait-head-border-color': $text-color-secondary,
+    'wait-head-color': $text-color-secondary,
+    'wait-icon-bg-color': $text-color-secondary,
+    'wait-icon-color': $white,
+    'wait-icon-text-color': $white
+  ),
+  $steps
+);