naive-ui 2.35.0 → 2.37.0

package/es/progress/src/styles/index.cssr.js

@@ -1,196 +0,0 @@
-import { c, cB, cM } from '../../../_utils/cssr';
-// vars
-// --n-bezier
-// --n-fill-color
-// --n-font-size
-// --n-font-size-circle
-// --n-font-weight-circle
-// --n-icon-color
-// --n-icon-size-circle
-// --n-icon-size-line
-// --n-line-bg-processing
-// --n-rail-color
-// --n-rail-height
-// --n-text-color-circle
-// --n-text-color-line-inner
-// --n-text-color-line-outer
-export default c([cB('progress', {
-  display: 'inline-block'
-}, [cB('progress-icon', `
- color: var(--n-icon-color);
- transition: color .3s var(--n-bezier);
- `), cM('line', `
- width: 100%;
- display: block;
- `, [cB('progress-content', `
- display: flex;
- align-items: center;
- `, [cB('progress-graph', {
-  flex: 1
-})]), cB('progress-custom-content', {
-  marginLeft: '14px'
-}), cB('progress-icon', `
- width: 30px;
- padding-left: 14px;
- height: var(--n-icon-size-line);
- line-height: var(--n-icon-size-line);
- font-size: var(--n-icon-size-line);
- `, [cM('as-text', `
- color: var(--n-text-color-line-outer);
- text-align: center;
- width: 40px;
- font-size: var(--n-font-size);
- padding-left: 4px;
- transition: color .3s var(--n-bezier);
- `)])]), cM('circle, dashboard', {
-  width: '120px'
-}, [cB('progress-custom-content', `
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translateX(-50%) translateY(-50%);
- display: flex;
- align-items: center;
- justify-content: center;
- `), cB('progress-text', `
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translateX(-50%) translateY(-50%);
- display: flex;
- align-items: center;
- color: inherit;
- font-size: var(--n-font-size-circle);
- color: var(--n-text-color-circle);
- font-weight: var(--n-font-weight-circle);
- transition: color .3s var(--n-bezier);
- white-space: nowrap;
- `), cB('progress-icon', `
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translateX(-50%) translateY(-50%);
- display: flex;
- align-items: center;
- color: var(--n-icon-color);
- font-size: var(--n-icon-size-circle);
- `)]), cM('multiple-circle', `
- width: 200px;
- color: inherit;
- `, [cB('progress-text', `
- font-weight: var(--n-font-weight-circle);
- color: var(--n-text-color-circle);
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translateX(-50%) translateY(-50%);
- display: flex;
- align-items: center;
- justify-content: center;
- transition: color .3s var(--n-bezier);
- `)]), cB('progress-content', {
-  position: 'relative'
-}), cB('progress-graph', {
-  position: 'relative'
-}, [cB('progress-graph-circle', [c('svg', {
-  verticalAlign: 'bottom'
-}), cB('progress-graph-circle-fill', `
- stroke: var(--n-fill-color);
- transition:
- opacity .3s var(--n-bezier),
- stroke .3s var(--n-bezier),
- stroke-dasharray .3s var(--n-bezier);
- `, [cM('empty', {
-  opacity: 0
-})]), cB('progress-graph-circle-rail', `
- transition: stroke .3s var(--n-bezier);
- overflow: hidden;
- stroke: var(--n-rail-color);
- `)]), cB('progress-graph-line', [cM('indicator-inside', [cB('progress-graph-line-rail', `
- height: 16px;
- line-height: 16px;
- border-radius: 10px;
- `, [cB('progress-graph-line-fill', `
- height: inherit;
- border-radius: 10px;
- `), cB('progress-graph-line-indicator', `
- background: #0000;
- white-space: nowrap;
- text-align: right;
- margin-left: 14px;
- margin-right: 14px;
- height: inherit;
- font-size: 12px;
- color: var(--n-text-color-line-inner);
- transition: color .3s var(--n-bezier);
- `)])]), cM('indicator-inside-label', `
- height: 16px;
- display: flex;
- align-items: center;
- `, [cB('progress-graph-line-rail', `
- flex: 1;
- transition: background-color .3s var(--n-bezier);
- `), cB('progress-graph-line-indicator', `
- background: var(--n-fill-color);
- font-size: 12px;
- transform: translateZ(0);
- display: flex;
- vertical-align: middle;
- height: 16px;
- line-height: 16px;
- padding: 0 10px;
- border-radius: 10px;
- position: absolute;
- white-space: nowrap;
- color: var(--n-text-color-line-inner);
- transition:
- right .2s var(--n-bezier),
- color .3s var(--n-bezier),
- background-color .3s var(--n-bezier);
- `)]), cB('progress-graph-line-rail', `
- position: relative;
- overflow: hidden;
- height: var(--n-rail-height);
- border-radius: 5px;
- background-color: var(--n-rail-color);
- transition: background-color .3s var(--n-bezier);
- `, [cB('progress-graph-line-fill', `
- background: var(--n-fill-color);
- position: relative;
- border-radius: 5px;
- height: inherit;
- width: 100%;
- max-width: 0%;
- transition:
- background-color .3s var(--n-bezier),
- max-width .2s var(--n-bezier);
- `, [cM('processing', [c('&::after', `
- content: "";
- background-image: var(--n-line-bg-processing);
- animation: progress-processing-animation 2s var(--n-bezier) infinite;
- `)])])])])])]), c('@keyframes progress-processing-animation', `
- 0% {
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 100%;
- opacity: 1;
- }
- 66% {
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- opacity: 0;
- }
- 100% {
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- right: 0;
- opacity: 0;
- }
- `)]);

package/es/progress/styles/dark.js

@@ -1,14 +0,0 @@
-import { commonDark } from '../../_styles/common';
-import { self } from './light';
-const progressDark = {
-    name: 'Progress',
-    common: commonDark,
-    self(vars) {
-        const commonSelf = self(vars);
-        commonSelf.textColorLineInner = 'rgb(0, 0, 0)';
-        commonSelf.lineBgProcessing =
-            'linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .5) 100%)';
-        return commonSelf;
-    }
-};
-export default progressDark;

package/es/progress/styles/index.js

@@ -1,2 +0,0 @@
-export { default as progressDark } from './dark';
-export { default as progressLight } from './light';

package/es/progress/styles/light.js

@@ -1,33 +0,0 @@
-import { commonLight } from '../../_styles/common';
-export const self = (vars) => {
-    const { infoColor, successColor, warningColor, errorColor, textColor2, progressRailColor, fontSize, fontWeight } = vars;
-    return {
-        fontSize,
-        fontSizeCircle: '28px',
-        fontWeightCircle: fontWeight,
-        railColor: progressRailColor,
-        railHeight: '8px',
-        iconSizeCircle: '36px',
-        iconSizeLine: '18px',
-        iconColor: infoColor,
-        iconColorInfo: infoColor,
-        iconColorSuccess: successColor,
-        iconColorWarning: warningColor,
-        iconColorError: errorColor,
-        textColorCircle: textColor2,
-        textColorLineInner: 'rgb(255, 255, 255)',
-        textColorLineOuter: textColor2,
-        fillColor: infoColor,
-        fillColorInfo: infoColor,
-        fillColorSuccess: successColor,
-        fillColorWarning: warningColor,
-        fillColorError: errorColor,
-        lineBgProcessing: 'linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .5) 100%)'
-    };
-};
-const progressLight = {
-    name: 'Progress',
-    common: commonLight,
-    self
-};
-export default progressLight;

package/es/radio/index.js

@@ -1,3 +0,0 @@
-export { default as NRadio, radioProps } from './src/Radio';
-export { default as NRadioGroup, radioGroupProps } from './src/RadioGroup';
-export { default as NRadioButton, radioButtonProps } from './src/RadioButton';

package/es/radio/src/Radio.js

@@ -1,77 +0,0 @@
-import { h, defineComponent, computed } from 'vue';
-import { useRtl } from '../../_mixins/use-rtl';
-import { useConfig, useTheme, useThemeClass } from '../../_mixins';
-import { createKey, resolveWrappedSlot } from '../../_utils';
-import { radioLight } from '../styles';
-import { setup, radioBaseProps } from './use-radio';
-import style from './styles/radio.cssr';
-export const radioProps = Object.assign(Object.assign({}, useTheme.props), radioBaseProps);
-export default defineComponent({
-    name: 'Radio',
-    props: radioProps,
-    setup(props) {
-        const radio = setup(props);
-        const themeRef = useTheme('Radio', '-radio', style, radioLight, props, radio.mergedClsPrefix);
-        const cssVarsRef = computed(() => {
-            const { mergedSize: { value: size } } = radio;
-            const { common: { cubicBezierEaseInOut }, self: { boxShadow, boxShadowActive, boxShadowDisabled, boxShadowFocus, boxShadowHover, color, colorDisabled, colorActive, textColor, textColorDisabled, dotColorActive, dotColorDisabled, labelPadding, labelLineHeight, labelFontWeight, [createKey('fontSize', size)]: fontSize, [createKey('radioSize', size)]: radioSize } } = themeRef.value;
-            return {
-                '--n-bezier': cubicBezierEaseInOut,
-                '--n-label-line-height': labelLineHeight,
-                '--n-label-font-weight': labelFontWeight,
-                '--n-box-shadow': boxShadow,
-                '--n-box-shadow-active': boxShadowActive,
-                '--n-box-shadow-disabled': boxShadowDisabled,
-                '--n-box-shadow-focus': boxShadowFocus,
-                '--n-box-shadow-hover': boxShadowHover,
-                '--n-color': color,
-                '--n-color-active': colorActive,
-                '--n-color-disabled': colorDisabled,
-                '--n-dot-color-active': dotColorActive,
-                '--n-dot-color-disabled': dotColorDisabled,
-                '--n-font-size': fontSize,
-                '--n-radio-size': radioSize,
-                '--n-text-color': textColor,
-                '--n-text-color-disabled': textColorDisabled,
-                '--n-label-padding': labelPadding
-            };
-        });
-        const { inlineThemeDisabled, mergedClsPrefixRef, mergedRtlRef } = useConfig(props);
-        const rtlEnabledRef = useRtl('Radio', mergedRtlRef, mergedClsPrefixRef);
-        const themeClassHandle = inlineThemeDisabled
-            ? useThemeClass('radio', computed(() => radio.mergedSize.value[0]), cssVarsRef, props)
-            : undefined;
-        return Object.assign(radio, {
-            rtlEnabled: rtlEnabledRef,
-            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
-            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
-            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
-        });
-    },
-    render() {
-        const { $slots, mergedClsPrefix, onRender, label } = this;
-        onRender === null || onRender === void 0 ? void 0 : onRender();
-        return (h("label", { class: [
-                `${mergedClsPrefix}-radio`,
-                this.themeClass,
-                {
-                    [`${mergedClsPrefix}-radio--rtl`]: this.rtlEnabled,
-                    [`${mergedClsPrefix}-radio--disabled`]: this.mergedDisabled,
-                    [`${mergedClsPrefix}-radio--checked`]: this.renderSafeChecked,
-                    [`${mergedClsPrefix}-radio--focus`]: this.focus
-                }
-            ], style: this.cssVars },
-            h("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
-            h("div", { class: `${mergedClsPrefix}-radio__dot-wrapper` },
-                "\u00A0",
-                h("div", { class: [
-                        `${mergedClsPrefix}-radio__dot`,
-                        this.renderSafeChecked && `${mergedClsPrefix}-radio__dot--checked`
-                    ] })),
-            resolveWrappedSlot($slots.default, (children) => {
-                if (!children && !label)
-                    return null;
-                return (h("div", { ref: "labelRef", class: `${mergedClsPrefix}-radio__label` }, children || label));
-            })));
-    }
-});

package/es/radio/src/RadioButton.js

@@ -1,25 +0,0 @@
-import { h, defineComponent } from 'vue';
-import { resolveWrappedSlot } from '../../_utils';
-import { setup, radioBaseProps } from './use-radio';
-export const radioButtonProps = radioBaseProps;
-export default defineComponent({
-    name: 'RadioButton',
-    props: radioBaseProps,
-    setup,
-    render() {
-        const { mergedClsPrefix } = this;
-        return (h("label", { class: [
-                `${mergedClsPrefix}-radio-button`,
-                this.mergedDisabled && `${mergedClsPrefix}-radio-button--disabled`,
-                this.renderSafeChecked && `${mergedClsPrefix}-radio-button--checked`,
-                this.focus && [`${mergedClsPrefix}-radio-button--focus`]
-            ] },
-            h("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
-            h("div", { class: `${mergedClsPrefix}-radio-button__state-border` }),
-            resolveWrappedSlot(this.$slots.default, (children) => {
-                if (!children && !this.label)
-                    return null;
-                return (h("div", { ref: "labelRef", class: `${mergedClsPrefix}-radio__label` }, children || this.label));
-            })));
-    }
-});

package/es/radio/src/RadioGroup.js

@@ -1,168 +0,0 @@
-import { h, defineComponent, computed, provide, ref, toRef } from 'vue';
-import { useMergedState } from 'vooks';
-import { useTheme, useFormItem, useConfig, useThemeClass } from '../../_mixins';
-import { getSlot, warn, createKey, call, flatten } from '../../_utils';
-import { radioLight } from '../styles';
-import { radioGroupInjectionKey } from './use-radio';
-import style from './styles/radio-group.cssr';
-import { useRtl } from '../../_mixins/use-rtl';
-function mapSlot(defaultSlot, value, clsPrefix) {
-    var _a;
-    const children = [];
-    let isButtonGroup = false;
-    for (let i = 0; i < defaultSlot.length; ++i) {
-        const wrappedInstance = defaultSlot[i];
-        const name = (_a = wrappedInstance.type) === null || _a === void 0 ? void 0 : _a.name;
-        if (name === 'RadioButton') {
-            isButtonGroup = true;
-        }
-        if (process.env.NODE_ENV !== 'production' && isButtonGroup && name !== 'RadioButton') {
-            warn('radio-group', '`n-radio-group` in button mode only takes `n-radio-button` as children.');
-            continue;
-        }
-        const instanceProps = wrappedInstance.props;
-        if (name !== 'RadioButton') {
-            children.push(wrappedInstance);
-            continue;
-        }
-        if (i === 0) {
-            children.push(wrappedInstance);
-        }
-        else {
-            const lastInstanceProps = children[children.length - 1]
-                .props;
-            const lastInstanceChecked = value === lastInstanceProps.value;
-            const lastInstanceDisabled = lastInstanceProps.disabled;
-            const currentInstanceChecked = value === instanceProps.value;
-            const currentInstanceDisabled = instanceProps.disabled;
-            /**
-             * Priority of button splitor:
-             * !disabled  checked >
-             *  disabled  checked >
-             * !disabled !checked >
-             *  disabled !checked
-             */
-            const lastInstancePriority = (lastInstanceChecked ? 2 : 0) + (!lastInstanceDisabled ? 1 : 0);
-            const currentInstancePriority = (currentInstanceChecked ? 2 : 0) + (!currentInstanceDisabled ? 1 : 0);
-            const lastInstanceClass = {
-                [`${clsPrefix}-radio-group__splitor--disabled`]: lastInstanceDisabled,
-                [`${clsPrefix}-radio-group__splitor--checked`]: lastInstanceChecked
-            };
-            const currentInstanceClass = {
-                [`${clsPrefix}-radio-group__splitor--disabled`]: currentInstanceDisabled,
-                [`${clsPrefix}-radio-group__splitor--checked`]: currentInstanceChecked
-            };
-            const splitorClass = lastInstancePriority < currentInstancePriority
-                ? currentInstanceClass
-                : lastInstanceClass;
-            children.push(h("div", { class: [`${clsPrefix}-radio-group__splitor`, splitorClass] }), wrappedInstance);
-        }
-    }
-    return {
-        children,
-        isButtonGroup
-    };
-}
-export const radioGroupProps = Object.assign(Object.assign({}, useTheme.props), { name: String, value: [String, Number, Boolean], defaultValue: {
-        type: [String, Number, Boolean],
-        default: null
-    }, size: String, disabled: {
-        type: Boolean,
-        default: undefined
-    }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
-export default defineComponent({
-    name: 'RadioGroup',
-    props: radioGroupProps,
-    setup(props) {
-        const selfElRef = ref(null);
-        const { mergedSizeRef, mergedDisabledRef, nTriggerFormChange, nTriggerFormInput, nTriggerFormBlur, nTriggerFormFocus } = useFormItem(props);
-        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
-        const themeRef = useTheme('Radio', '-radio-group', style, radioLight, props, mergedClsPrefixRef);
-        const uncontrolledValueRef = ref(props.defaultValue);
-        const controlledValueRef = toRef(props, 'value');
-        const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
-        function doUpdateValue(value) {
-            const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props;
-            if (onUpdateValue) {
-                call(onUpdateValue, value);
-            }
-            if (_onUpdateValue) {
-                call(_onUpdateValue, value);
-            }
-            uncontrolledValueRef.value = value;
-            nTriggerFormChange();
-            nTriggerFormInput();
-        }
-        function handleFocusin(e) {
-            const { value: selfEl } = selfElRef;
-            if (!selfEl)
-                return;
-            if (selfEl.contains(e.relatedTarget))
-                return;
-            nTriggerFormFocus();
-        }
-        function handleFocusout(e) {
-            const { value: selfEl } = selfElRef;
-            if (!selfEl)
-                return;
-            if (selfEl.contains(e.relatedTarget))
-                return;
-            nTriggerFormBlur();
-        }
-        provide(radioGroupInjectionKey, {
-            mergedClsPrefixRef,
-            nameRef: toRef(props, 'name'),
-            valueRef: mergedValueRef,
-            disabledRef: mergedDisabledRef,
-            mergedSizeRef,
-            doUpdateValue
-        });
-        const rtlEnabledRef = useRtl('Radio', mergedRtlRef, mergedClsPrefixRef);
-        const cssVarsRef = computed(() => {
-            const { value: size } = mergedSizeRef;
-            const { common: { cubicBezierEaseInOut }, self: { buttonBorderColor, buttonBorderColorActive, buttonBorderRadius, buttonBoxShadow, buttonBoxShadowFocus, buttonBoxShadowHover, buttonColorActive, buttonTextColor, buttonTextColorActive, buttonTextColorHover, opacityDisabled, [createKey('buttonHeight', size)]: height, [createKey('fontSize', size)]: fontSize } } = themeRef.value;
-            return {
-                '--n-font-size': fontSize,
-                '--n-bezier': cubicBezierEaseInOut,
-                '--n-button-border-color': buttonBorderColor,
-                '--n-button-border-color-active': buttonBorderColorActive,
-                '--n-button-border-radius': buttonBorderRadius,
-                '--n-button-box-shadow': buttonBoxShadow,
-                '--n-button-box-shadow-focus': buttonBoxShadowFocus,
-                '--n-button-box-shadow-hover': buttonBoxShadowHover,
-                '--n-button-color-active': buttonColorActive,
-                '--n-button-text-color': buttonTextColor,
-                '--n-button-text-color-hover': buttonTextColorHover,
-                '--n-button-text-color-active': buttonTextColorActive,
-                '--n-height': height,
-                '--n-opacity-disabled': opacityDisabled
-            };
-        });
-        const themeClassHandle = inlineThemeDisabled
-            ? useThemeClass('radio-group', computed(() => mergedSizeRef.value[0]), cssVarsRef, props)
-            : undefined;
-        return {
-            selfElRef,
-            rtlEnabled: rtlEnabledRef,
-            mergedClsPrefix: mergedClsPrefixRef,
-            mergedValue: mergedValueRef,
-            handleFocusout,
-            handleFocusin,
-            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
-            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
-            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
-        };
-    },
-    render() {
-        var _a;
-        const { mergedValue, mergedClsPrefix, handleFocusin, handleFocusout } = this;
-        const { children, isButtonGroup } = mapSlot(flatten(getSlot(this)), mergedValue, mergedClsPrefix);
-        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
-        return (h("div", { onFocusin: handleFocusin, onFocusout: handleFocusout, ref: "selfElRef", class: [
-                `${mergedClsPrefix}-radio-group`,
-                this.rtlEnabled && `${mergedClsPrefix}-radio-group--rtl`,
-                this.themeClass,
-                isButtonGroup && `${mergedClsPrefix}-radio-group--button-group`
-            ], style: this.cssVars }, children));
-    }
-});

package/es/radio/src/interface.js

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

package/es/radio/src/styles/radio-group.cssr.js

@@ -1,103 +0,0 @@
-import { cB, cE, cM, c, cNotM } from '../../../_utils/cssr';
-// vars:
-// --n-bezier
-// --n-button-border-color
-// --n-button-border-color-active
-// --n-height
-// --n-opacity-disabled
-// --n-font-size
-export default cB('radio-group', `
- display: inline-block;
- font-size: var(--n-font-size);
-`, [cE('splitor', `
- display: inline-block;
- vertical-align: bottom;
- width: 1px;
- transition:
- background-color .3s var(--n-bezier),
- opacity .3s var(--n-bezier);
- background: var(--n-button-border-color);
- `, [cM('checked', {
-  backgroundColor: 'var(--n-button-border-color-active)'
-}), cM('disabled', {
-  opacity: 'var(--n-opacity-disabled)'
-})]), cM('button-group', `
- white-space: nowrap;
- height: var(--n-height);
- line-height: var(--n-height);
- `, [cB('radio-button', {
-  height: 'var(--n-height)',
-  lineHeight: 'var(--n-height)'
-}), cE('splitor', {
-  height: 'var(--n-height)'
-})]), cB('radio-button', `
- vertical-align: bottom;
- outline: none;
- position: relative;
- user-select: none;
- -webkit-user-select: none;
- display: inline-block;
- box-sizing: border-box;
- padding-left: 14px;
- padding-right: 14px;
- white-space: nowrap;
- transition:
- background-color .3s var(--n-bezier),
- opacity .3s var(--n-bezier),
- border-color .3s var(--n-bezier),
- color .3s var(--n-bezier);
- color: var(--n-button-text-color);
- border-top: 1px solid var(--n-button-border-color);
- border-bottom: 1px solid var(--n-button-border-color);
- `, [cB('radio-input', `
- pointer-events: none;
- position: absolute;
- border: 0;
- border-radius: inherit;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- opacity: 0;
- z-index: 1;
- `), cE('state-border', `
- z-index: 1;
- pointer-events: none;
- position: absolute;
- box-shadow: var(--n-button-box-shadow);
- transition: box-shadow .3s var(--n-bezier);
- left: -1px;
- bottom: -1px;
- right: -1px;
- top: -1px;
- `), c('&:first-child', `
- border-top-left-radius: var(--n-button-border-radius);
- border-bottom-left-radius: var(--n-button-border-radius);
- border-left: 1px solid var(--n-button-border-color);
- `, [cE('state-border', `
- border-top-left-radius: var(--n-button-border-radius);
- border-bottom-left-radius: var(--n-button-border-radius);
- `)]), c('&:last-child', `
- border-top-right-radius: var(--n-button-border-radius);
- border-bottom-right-radius: var(--n-button-border-radius);
- border-right: 1px solid var(--n-button-border-color);
- `, [cE('state-border', `
- border-top-right-radius: var(--n-button-border-radius);
- border-bottom-right-radius: var(--n-button-border-radius);
- `)]), cNotM('disabled', `
- cursor: pointer;
- `, [c('&:hover', [cE('state-border', `
- transition: box-shadow .3s var(--n-bezier);
- box-shadow: var(--n-button-box-shadow-hover);
- `), cNotM('checked', {
-  color: 'var(--n-button-text-color-hover)'
-})]), cM('focus', [c('&:not(:active)', [cE('state-border', {
-  boxShadow: 'var(--n-button-box-shadow-focus)'
-})])])]), cM('checked', `
- background: var(--n-button-color-active);
- color: var(--n-button-text-color-active);
- border-color: var(--n-button-border-color-active);
- `), cM('disabled', `
- cursor: not-allowed;
- opacity: var(--n-opacity-disabled);
- `)])]);