zartui 0.1.111 → 3.0.1

package/README.md

@@ -14,8 +14,12 @@ Zart（读音 /zɑːt/）的命名，灵感源自数字政通秉承的理念：
 
 4）支持主题定制、按需引入；
 
-5）支持vue2.0、TypeScript；
+5）支持vue3.0、TypeScript；
 
 6）性能佳，组件平均体积小(min+gzip);
 
-7）单元测试覆盖率 90%+，提供稳定性保障。
+7）单元测试覆盖率 90%+，提供稳定性保障。
+
+## 浏览器支持
+
+ZartUI 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。

package/es/badge/Badge.d.ts

@@ -0,0 +1,66 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { Numeric } from '../utils';
+export declare type BadgePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+declare const badgeProps: {
+    dot: BooleanConstructor;
+    max: (NumberConstructor | StringConstructor)[];
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    color: StringConstructor;
+    offset: PropType<[Numeric, Numeric]>;
+    content: (NumberConstructor | StringConstructor)[];
+    showZero: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    position: {
+        type: PropType<BadgePosition>;
+        default: BadgePosition;
+    };
+};
+export declare type BadgeProps = ExtractPropTypes<typeof badgeProps>;
+declare const _default: import("vue").DefineComponent<{
+    dot: BooleanConstructor;
+    max: (NumberConstructor | StringConstructor)[];
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    color: StringConstructor;
+    offset: PropType<[Numeric, Numeric]>;
+    content: (NumberConstructor | StringConstructor)[];
+    showZero: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    position: {
+        type: PropType<BadgePosition>;
+        default: BadgePosition;
+    };
+}, () => JSX.Element | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    dot: BooleanConstructor;
+    max: (NumberConstructor | StringConstructor)[];
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    color: StringConstructor;
+    offset: PropType<[Numeric, Numeric]>;
+    content: (NumberConstructor | StringConstructor)[];
+    showZero: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    position: {
+        type: PropType<BadgePosition>;
+        default: BadgePosition;
+    };
+}>>, {
+    dot: boolean;
+    tag: keyof HTMLElementTagNameMap;
+    showZero: boolean;
+    position: BadgePosition;
+}>;
+export default _default;

package/es/badge/Badge.mjs

@@ -0,0 +1,95 @@
+import { createVNode as _createVNode } from "vue";
+import { computed, defineComponent } from "vue";
+import { isDef, addUnit, isNumeric, truthProp, numericProp, makeStringProp, createNamespace } from "../utils/index.mjs";
+const [name, bem] = createNamespace("badge");
+const badgeProps = {
+  dot: Boolean,
+  max: numericProp,
+  tag: makeStringProp("div"),
+  color: String,
+  offset: Array,
+  content: numericProp,
+  showZero: truthProp,
+  position: makeStringProp("top-right")
+};
+var stdin_default = defineComponent({
+  name,
+  props: badgeProps,
+  setup(props, {
+    slots
+  }) {
+    const hasContent = () => {
+      if (slots.content) {
+        return true;
+      }
+      const {
+        content,
+        showZero
+      } = props;
+      return isDef(content) && content !== "" && (showZero || content !== 0);
+    };
+    const renderContent = () => {
+      const {
+        dot,
+        max,
+        content
+      } = props;
+      if (!dot && hasContent()) {
+        if (slots.content) {
+          return slots.content();
+        }
+        if (isDef(max) && isNumeric(content) && +content > max) {
+          return `${max}+`;
+        }
+        return content;
+      }
+    };
+    const style = computed(() => {
+      const style2 = {
+        background: props.color
+      };
+      if (props.offset) {
+        const [x, y] = props.offset;
+        if (slots.default) {
+          style2.top = addUnit(y);
+          if (typeof x === "number") {
+            style2.right = addUnit(-x);
+          } else {
+            style2.right = x.startsWith("-") ? x.replace("-", "") : `-${x}`;
+          }
+        } else {
+          style2.marginTop = addUnit(y);
+          style2.marginLeft = addUnit(x);
+        }
+      }
+      return style2;
+    });
+    const renderBadge = () => {
+      if (hasContent() || props.dot) {
+        return _createVNode("div", {
+          "class": bem([props.position, {
+            dot: props.dot,
+            fixed: !!slots.default
+          }]),
+          "style": style.value
+        }, [renderContent()]);
+      }
+    };
+    return () => {
+      if (slots.default) {
+        const {
+          tag
+        } = props;
+        return _createVNode(tag, {
+          "class": bem("wrapper")
+        }, {
+          default: () => [slots.default(), renderBadge()]
+        });
+      }
+      return renderBadge();
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/badge/index.css

@@ -1 +1 @@
-.zt-badge{display:inline-block;box-sizing:border-box;min-width:16px;padding:0 3px;color:#fff;font-weight:700;font-size:12px;font-family:-apple-system-font,Helvetica Neue,Arial,sans-serif;line-height:1.2;text-align:center;background-color:#ff4b50;border:1px solid #fff;border-radius:999px}.zt-badge--fixed{position:absolute;top:0;right:0;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%);-webkit-transform-origin:100%;transform-origin:100%}.zt-badge--dot{width:8px;min-width:0;height:8px;background-color:#e62314;border-radius:100%}.zt-badge__wrapper{position:relative;display:inline-block}
+body{--zt-badge-size: 16px;--zt-badge-color: var(--zt-white);--zt-badge-padding: 0 3px;--zt-badge-font-size: var(--zt-font-size-sm);--zt-badge-font-weight: var(--zt-font-bold);--zt-badge-border-width: var(--zt-border-width);--zt-badge-background: var(--zt-danger-color);--zt-badge-dot-color: var(--zt-danger-color);--zt-badge-dot-size: 8px;--zt-badge-font: -apple-system-font, helvetica neue, arial, sans-serif}.zt-badge{display:inline-block;box-sizing:border-box;min-width:var(--zt-badge-size);padding:var(--zt-badge-padding);color:var(--zt-badge-color);font-weight:var(--zt-badge-font-weight);font-size:var(--zt-badge-font-size);font-family:var(--zt-badge-font);line-height:1.2;text-align:center;background:var(--zt-badge-background);border:var(--zt-badge-border-width) solid var(--zt-background-2);border-radius:var(--zt-radius-max)}.zt-badge--fixed{position:absolute;transform-origin:100%}.zt-badge--top-left{top:0;left:0;transform:translate(-50%,-50%)}.zt-badge--top-right{top:0;right:0;transform:translate(50%,-50%)}.zt-badge--bottom-left{bottom:0;left:0;transform:translate(-50%,50%)}.zt-badge--bottom-right{bottom:0;right:0;transform:translate(50%,50%)}.zt-badge--dot{width:var(--zt-badge-dot-size);min-width:0;height:var(--zt-badge-dot-size);background:var(--zt-badge-dot-color);border-radius:100%;border:none;padding:0}.zt-badge__wrapper{position:relative;display:inline-block}

package/es/badge/index.d.ts

@@ -0,0 +1,49 @@
+export declare const Badge: import("../utils").WithInstall<import("vue").DefineComponent<{
+    dot: BooleanConstructor;
+    max: (NumberConstructor | StringConstructor)[];
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    color: StringConstructor;
+    offset: import("vue").PropType<[import("../utils").Numeric, import("../utils").Numeric]>;
+    content: (NumberConstructor | StringConstructor)[];
+    showZero: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    position: {
+        type: import("vue").PropType<import("./Badge").BadgePosition>;
+        default: import("./Badge").BadgePosition;
+    };
+}, () => JSX.Element | undefined, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    dot: BooleanConstructor;
+    max: (NumberConstructor | StringConstructor)[];
+    tag: {
+        type: import("vue").PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    color: StringConstructor;
+    offset: import("vue").PropType<[import("../utils").Numeric, import("../utils").Numeric]>;
+    content: (NumberConstructor | StringConstructor)[];
+    showZero: {
+        type: BooleanConstructor;
+        default: true;
+    };
+    position: {
+        type: import("vue").PropType<import("./Badge").BadgePosition>;
+        default: import("./Badge").BadgePosition;
+    };
+}>>, {
+    dot: boolean;
+    tag: keyof HTMLElementTagNameMap;
+    showZero: boolean;
+    position: import("./Badge").BadgePosition;
+}>>;
+export default Badge;
+export type { BadgeProps, BadgePosition } from './Badge';
+declare module 'vue' {
+    interface GlobalComponents {
+        VanBadge: typeof Badge;
+    }
+}

package/es/badge/index.mjs

@@ -0,0 +1,8 @@
+import { withInstall } from "../utils/index.mjs";
+import _Badge from "./Badge.mjs";
+const Badge = withInstall(_Badge);
+var stdin_default = Badge;
+export {
+  Badge,
+  stdin_default as default
+};

package/es/badge/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/es/badge/style/index.mjs

@@ -0,0 +1,2 @@
+import "../../style/base.css";
+import "../index.css";

package/es/button/Button.d.ts

@@ -0,0 +1,154 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { LoadingType } from '../loading';
+import { ButtonSize, ButtonType, ButtonNativeType, ButtonIconPosition } from './types';
+declare const buttonProps: {
+    to: PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    text: StringConstructor;
+    icon: StringConstructor;
+    type: {
+        type: PropType<ButtonType>;
+        default: ButtonType;
+    };
+    size: {
+        type: PropType<ButtonSize>;
+        default: ButtonSize;
+    };
+    color: StringConstructor;
+    backgroundColor: StringConstructor;
+    borderLess: BooleanConstructor;
+    borderColor: StringConstructor;
+    block: BooleanConstructor;
+    blockInner: BooleanConstructor;
+    plain: BooleanConstructor;
+    round: BooleanConstructor;
+    square: BooleanConstructor;
+    loading: BooleanConstructor;
+    hairline: BooleanConstructor;
+    disabled: BooleanConstructor;
+    iconPrefix: StringConstructor;
+    nativeType: {
+        type: PropType<ButtonNativeType>;
+        default: ButtonNativeType;
+    };
+    loadingSize: (NumberConstructor | StringConstructor)[];
+    loadingText: StringConstructor;
+    loadingType: PropType<LoadingType>;
+    iconPosition: {
+        type: PropType<ButtonIconPosition>;
+        default: ButtonIconPosition;
+    };
+};
+export declare type ButtonProps = ExtractPropTypes<typeof buttonProps>;
+declare const _default: import("vue").DefineComponent<{
+    to: PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    text: StringConstructor;
+    icon: StringConstructor;
+    type: {
+        type: PropType<ButtonType>;
+        default: ButtonType;
+    };
+    size: {
+        type: PropType<ButtonSize>;
+        default: ButtonSize;
+    };
+    color: StringConstructor;
+    backgroundColor: StringConstructor;
+    borderLess: BooleanConstructor;
+    borderColor: StringConstructor;
+    block: BooleanConstructor;
+    blockInner: BooleanConstructor;
+    plain: BooleanConstructor;
+    round: BooleanConstructor;
+    square: BooleanConstructor;
+    loading: BooleanConstructor;
+    hairline: BooleanConstructor;
+    disabled: BooleanConstructor;
+    iconPrefix: StringConstructor;
+    nativeType: {
+        type: PropType<ButtonNativeType>;
+        default: ButtonNativeType;
+    };
+    loadingSize: (NumberConstructor | StringConstructor)[];
+    loadingText: StringConstructor;
+    loadingType: PropType<LoadingType>;
+    iconPosition: {
+        type: PropType<ButtonIconPosition>;
+        default: ButtonIconPosition;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    to: PropType<import("vue-router").RouteLocationRaw>;
+    url: StringConstructor;
+    replace: BooleanConstructor;
+} & {
+    tag: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: keyof HTMLElementTagNameMap;
+    };
+    text: StringConstructor;
+    icon: StringConstructor;
+    type: {
+        type: PropType<ButtonType>;
+        default: ButtonType;
+    };
+    size: {
+        type: PropType<ButtonSize>;
+        default: ButtonSize;
+    };
+    color: StringConstructor;
+    backgroundColor: StringConstructor;
+    borderLess: BooleanConstructor;
+    borderColor: StringConstructor;
+    block: BooleanConstructor;
+    blockInner: BooleanConstructor;
+    plain: BooleanConstructor;
+    round: BooleanConstructor;
+    square: BooleanConstructor;
+    loading: BooleanConstructor;
+    hairline: BooleanConstructor;
+    disabled: BooleanConstructor;
+    iconPrefix: StringConstructor;
+    nativeType: {
+        type: PropType<ButtonNativeType>;
+        default: ButtonNativeType;
+    };
+    loadingSize: (NumberConstructor | StringConstructor)[];
+    loadingText: StringConstructor;
+    loadingType: PropType<LoadingType>;
+    iconPosition: {
+        type: PropType<ButtonIconPosition>;
+        default: ButtonIconPosition;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    replace: boolean;
+    type: ButtonType;
+    tag: keyof HTMLElementTagNameMap;
+    round: boolean;
+    disabled: boolean;
+    size: ButtonSize;
+    loading: boolean;
+    block: boolean;
+    square: boolean;
+    borderLess: boolean;
+    blockInner: boolean;
+    plain: boolean;
+    hairline: boolean;
+    nativeType: ButtonNativeType;
+    iconPosition: ButtonIconPosition;
+}>;
+export default _default;

package/es/button/Button.mjs

@@ -0,0 +1,166 @@
+import { createVNode as _createVNode } from "vue";
+import { defineComponent } from "vue";
+import { extend, numericProp, preventDefault, makeStringProp, createNamespace, BORDER_SURROUND } from "../utils/index.mjs";
+import { useRoute, routeProps } from "../composables/use-route.mjs";
+import { Icon } from "../icon/index.mjs";
+import { Loading } from "../loading/index.mjs";
+const [name, bem] = createNamespace("button");
+const buttonProps = extend({}, routeProps, {
+  tag: makeStringProp("button"),
+  text: String,
+  icon: String,
+  type: makeStringProp("default"),
+  size: makeStringProp("normal"),
+  color: String,
+  backgroundColor: String,
+  borderLess: Boolean,
+  borderColor: String,
+  block: Boolean,
+  blockInner: Boolean,
+  plain: Boolean,
+  round: Boolean,
+  square: Boolean,
+  loading: Boolean,
+  hairline: Boolean,
+  disabled: Boolean,
+  iconPrefix: String,
+  nativeType: makeStringProp("button"),
+  loadingSize: numericProp,
+  loadingText: String,
+  loadingType: String,
+  iconPosition: makeStringProp("left")
+});
+var stdin_default = defineComponent({
+  name,
+  props: buttonProps,
+  emits: ["click"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const route = useRoute();
+    const renderLoadingIcon = () => {
+      if (slots.loading) {
+        return slots.loading();
+      }
+      return _createVNode(Loading, {
+        "size": props.loadingSize,
+        "type": props.loadingType,
+        "class": bem("loading")
+      }, null);
+    };
+    const renderIcon = () => {
+      if (props.loading) {
+        return renderLoadingIcon();
+      }
+      const {
+        size
+      } = props;
+      if (slots.icon) {
+        return _createVNode("div", {
+          "class": bem("icon", size)
+        }, [slots.icon()]);
+      }
+      if (props.icon) {
+        return _createVNode(Icon, {
+          "name": props.icon,
+          "class": bem("icon", size),
+          "classPrefix": props.iconPrefix
+        }, null);
+      }
+    };
+    const renderText = () => {
+      let text;
+      if (props.loading) {
+        text = props.loadingText;
+      } else {
+        text = slots.default ? slots.default() : props.text;
+      }
+      if (text) {
+        return _createVNode("span", {
+          "class": bem("text")
+        }, [text]);
+      }
+    };
+    const getStyle = () => {
+      const {
+        backgroundColor,
+        borderColor,
+        borderLess,
+        color
+      } = props;
+      const style = {};
+      if (backgroundColor) {
+        style.background = backgroundColor;
+        if (backgroundColor.includes("gradient")) {
+          style.border = 0;
+        } else {
+          style.borderColor = backgroundColor;
+        }
+      }
+      if (borderLess) {
+        style.border = 0;
+      }
+      if (color) {
+        style.color = color;
+      }
+      if (borderColor) {
+        style.borderColor = borderColor;
+      }
+      if (Object.keys(style).length > 0) {
+        return style;
+      }
+    };
+    const onClick = (event) => {
+      if (props.loading) {
+        preventDefault(event);
+      } else if (!props.disabled) {
+        emit("click", event);
+        route();
+      }
+    };
+    return () => {
+      const {
+        tag,
+        type,
+        size,
+        block,
+        blockInner,
+        round,
+        plain,
+        square,
+        loading,
+        disabled,
+        hairline,
+        nativeType,
+        iconPosition
+      } = props;
+      const classes = [bem([type, size, {
+        plain,
+        block,
+        "block-inner": blockInner ? "block-inner" : "",
+        round,
+        square,
+        loading,
+        disabled,
+        hairline
+      }]), {
+        [BORDER_SURROUND]: hairline
+      }];
+      return _createVNode(tag, {
+        "type": nativeType,
+        "class": classes,
+        "style": getStyle(),
+        "disabled": disabled,
+        "onClick": onClick
+      }, {
+        default: () => [_createVNode("div", {
+          "class": bem("content")
+        }, [iconPosition === "left" && renderIcon(), renderText(), iconPosition === "right" && renderIcon()])]
+      });
+    };
+  }
+});
+export {
+  stdin_default as default
+};

package/es/button/index.css

@@ -1 +1 @@
-.zt-button{position:relative;display:inline-block;box-sizing:border-box;height:44px;margin:0;padding:0;font-size:16px;line-height:1.2;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif;font-weight:700;text-align:center;border-radius:4px;border-color:rgba(0,0,0,.1);cursor:pointer;-webkit-transition:opacity .2s;transition:opacity .2s;-webkit-appearance:none}.zt-button::before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:#000;border:inherit;border-color:#000;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:' '}.zt-button:active::before{opacity:.1}.zt-button--disabled::before,.zt-button--loading::before{display:none}.zt-button--default{color:rgba(0,0,0,.6);background-color:#fff;border:1px solid rgba(0,0,0,.1)}.zt-button--primary{color:#fff;background-color:#0091fa;border:1px solid #0091fa}.zt-button--info{color:#fff;background-color:#00c8f0;border:1px solid #00c8f0}.zt-button--danger{color:#fff;background-color:#e62314;border:1px solid #e62314}.zt-button--warning{color:#fff;background-color:#ff9623;border:1px solid #ff9623}.zt-button--success{color:#fff;background-color:#28cd78;border:1px solid #28cd78}.zt-button--plain{background-color:#fff;font-weight:400}.zt-button--plain.zt-button--primary{color:#0091fa}.zt-button--plain.zt-button--info{color:#00c8f0}.zt-button--plain.zt-button--danger{color:#e62314}.zt-button--plain.zt-button--warning{color:#ff9623}.zt-button--plain.zt-button--success{color:#28cd78}.zt-button--large{width:100%;height:50px}.zt-button--normal{padding:0 16px;font-size:16px}.zt-button--small{height:32px;padding:0 8px;font-size:14px}.zt-button__loading{color:inherit;font-size:inherit}.zt-button--mini{height:28px;padding:0 8px;font-size:14px;font-weight:400;border-radius:2px}.zt-button--mini+.zt-button--mini{margin-left:4px}.zt-button--block{display:block;width:100%}.zt-button--disabled{cursor:not-allowed;opacity:.4}.zt-button--loading{cursor:default}.zt-button--round{border-radius:999px}.zt-button--square{border-radius:0}.zt-button__content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:100%}.zt-button__content::before{content:' '}.zt-button__icon{font-size:1.2em;line-height:inherit}.zt-button__icon+.zt-button__text,.zt-button__loading+.zt-button__text,.zt-button__text+.zt-button__icon,.zt-button__text+.zt-button__loading{margin-left:4px}.zt-button--hairline{border-width:0}.zt-button--hairline::after{border-color:inherit;border-radius:8px}.zt-button--hairline.zt-button--round::after{border-radius:999px}.zt-button--hairline.zt-button--square::after{border-radius:0}
+body{--zt-button-mini-height: 24px;--zt-button-mini-padding: 0 var(--zt-padding-sm);--zt-button-mini-font-size: var(--zt-font-size-sm);--zt-button-small-height: 28px;--zt-button-small-padding: 0 var(--zt-padding-sm);--zt-button-small-font-size: var(--zt-font-size-md);--zt-button-medium-height: 36px;--zt-button-medium-padding: 0 var(--zt-padding-md);--zt-button-medium-font-size: var(--zt-font-size-md);--zt-button-normal-padding: 0 var(--zt-padding-lg);--zt-button-normal-font-size: var(--zt-font-size-lg);--zt-button-large-height: 50px;--zt-button-default-height: 44px;--zt-button-default-line-height: calc(var(--zt-button-normal-font-size) * 2 - 8px);--zt-button-default-font-size: var(--zt-font-size-lg);--zt-button-default-color: var(--zt-text-color);--zt-button-default-background: var(--zt-background);--zt-button-default-border-color: rgba(45, 75, 115, .2);--zt-button-primary-color: var(--zt-white);--zt-button-primary-background: linear-gradient(-45deg, #3cafff 0%, var(--zt-primary-color) 100%);--zt-button-primary-light-background: rgba(1, 144, 250, .1);--zt-button-primary-border-color: var(--zt-blue-light);--zt-button-success-color: var(--zt-white);--zt-button-success-background: var(--zt-success-color);--zt-button-success-border-color: var(--zt-success-color);--zt-button-danger-color: var(--zt-white);--zt-button-danger-background: var(--zt-danger-color);--zt-button-danger-border-color: var(--zt-danger-color);--zt-button-warning-color: var(--zt-white);--zt-button-warning-background: var(--zt-warning-color);--zt-button-warning-border-color: var(--zt-warning-color);--zt-button-border-width: var(--zt-border-width);--zt-button-radius: 22px;--zt-button-round-radius: var(--zt-radius-max);--zt-button-plain-background: var(--zt-background);--zt-button-disabled-opacity: var(--zt-disabled-opacity);--zt-button-icon-mini-size: 16px;--zt-button-icon-small-size: 20px;--zt-button-icon-medium-size: 20px;--zt-button-icon-normal-size: 24px;--zt-button-loading-icon-size: 20px;--zt-button-inner-block-horizontal-margin: 16px}.zt-theme-dark{--zt-button-plain-background: transparent}.zt-button{position:relative;display:inline-block;box-sizing:border-box;height:var(--zt-button-default-height);margin:0;padding:0;font-size:var(--zt-button-default-font-size);line-height:var(--zt-button-default-line-height);text-align:center;border-radius:var(--zt-button-radius);cursor:pointer;transition:opacity var(--zt-duration-fast);-webkit-appearance:none;-webkit-font-smoothing:auto}.zt-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background:var(--zt-black);border:inherit;border-color:var(--zt-black);border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.zt-button:active:before{opacity:.1}.zt-button--loading:before,.zt-button--disabled:before{display:none}.zt-button--default{color:var(--zt-button-default-color);background:var(--zt-button-default-background);border:var(--zt-button-border-width) solid var(--zt-button-default-border-color)}.zt-button--primary{color:var(--zt-button-primary-color);background:var(--zt-button-primary-background);border:var(--zt-button-border-width) solid var(--zt-button-primary-border-color)}.zt-button--primary-light{color:var(--zt-blue);background:var(--zt-button-primary-light-background);border:none}.zt-button--success{color:var(--zt-button-success-color);background:var(--zt-button-success-background);border:var(--zt-button-border-width) solid var(--zt-button-success-border-color)}.zt-button--danger{color:var(--zt-button-danger-color);background:var(--zt-button-danger-background);border:var(--zt-button-border-width) solid var(--zt-button-danger-border-color)}.zt-button--warning{color:var(--zt-button-warning-color);background:var(--zt-button-warning-background);border:var(--zt-button-border-width) solid var(--zt-button-warning-border-color)}.zt-button--plain{background:var(--zt-button-plain-background)}.zt-button--plain.zt-button--primary{color:var(--zt-blue-light)}.zt-button--plain.zt-button--success{color:var(--zt-button-success-background)}.zt-button--plain.zt-button--danger{color:var(--zt-button-danger-background)}.zt-button--plain.zt-button--warning{color:var(--zt-button-warning-background)}.zt-button--large{width:100%;height:var(--zt-button-large-height)}.zt-button--normal{padding:var(--zt-button-normal-padding);font-size:var(--zt-button-normal-font-size)}.zt-button--medium{height:var(--zt-button-medium-height);padding:var(--zt-button-medium-padding);font-size:var(--zt-button-medium-font-size)}.zt-button--small{height:var(--zt-button-small-height);padding:var(--zt-button-small-padding);font-size:var(--zt-button-small-font-size)}.zt-button--mini{height:var(--zt-button-mini-height);padding:var(--zt-button-mini-padding);font-size:var(--zt-button-mini-font-size)}.zt-button--mini+.zt-button--mini{margin-left:var(--zt-padding-base)}.zt-button__loading{color:inherit;font-size:inherit}.zt-button__loading .zt-loading__spinner{color:currentColor;width:var(--zt-button-loading-icon-size);height:var(--zt-button-loading-icon-size)}.zt-button--block{display:block;width:100%}.zt-button--block-inner{display:block;width:calc(100% - 2 * var(--zt-button-inner-block-horizontal-margin));margin:0 var(--zt-button-inner-block-horizontal-margin)}.zt-button--disabled{cursor:not-allowed;opacity:var(--zt-button-disabled-opacity)}.zt-button--loading{cursor:default}.zt-button--round{border-radius:var(--zt-button-round-radius);padding:0}.zt-button--round.zt-button--mini{width:var(--zt-button-mini-height)}.zt-button--round.zt-button--small{width:var(--zt-button-small-height)}.zt-button--round.zt-button--medium{width:var(--zt-button-medium-height)}.zt-button--round.zt-button--normal{width:var(--zt-button-default-height)}.zt-button--square{border-radius:0}.zt-button__content{display:flex;align-items:center;justify-content:center;height:100%}.zt-button__content:before{content:" "}.zt-button__icon{font-size:var(--zt-button-icon-normal-size)}.zt-button__icon--mini{font-size:var(--zt-button-icon-mini-size)}.zt-button__icon--small{font-size:var(--zt-button-icon-small-size)}.zt-button__icon--medium{font-size:var(--zt-button-icon-medium-size)}.zt-button__icon+.zt-button__text,.zt-button__loading+.zt-button__text,.zt-button__text+.zt-button__icon,.zt-button__text+.zt-button__loading{margin-left:var(--zt-padding-xxs)}.zt-button--hairline{border-width:0}.zt-button--hairline:after{border-color:inherit;border-radius:calc(var(--zt-button-radius) * 2)}.zt-button--hairline.zt-button--round:after{border-radius:var(--zt-button-round-radius)}.zt-button--hairline.zt-button--square:after{border-radius:0}