@lobehub/ui/es/base-ui/Checkbox/style.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

import { createStaticStyles } from "antd-style";
//#region src/base-ui/Checkbox/style.ts
const styles = createStaticStyles(({ css, cssVar }) => ({
	indicator: css`
    display: flex;
    align-items: center;
    justify-content: center;
  `,
	label: css`
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;

    &:has([data-disabled]) {
      cursor: not-allowed;
    }
  `,
	root: css`
    cursor: pointer;

    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;
    border: 1px solid ${cssVar.colorBorderSecondary};

    color: ${cssVar.colorBgLayout};

    background: ${cssVar.colorBgContainer};
    outline: none;

    transition:
      background 150ms ${cssVar.motionEaseOut},
      border-color 150ms ${cssVar.motionEaseOut};

    &:hover:not([data-disabled], [data-checked], [data-indeterminate]) {
      border-color: ${cssVar.colorBorder};
    }

    &:focus-visible {
      outline: 2px solid ${cssVar.colorPrimaryBorder};
      outline-offset: 1px;
    }

    &[data-checked],
    &[data-indeterminate] {
      border-color: var(--lobe-checkbox-bg, ${cssVar.colorPrimary});
      background: var(--lobe-checkbox-bg, ${cssVar.colorPrimary});
    }

    &[data-disabled] {
      cursor: not-allowed;

      border-color: ${cssVar.colorFill};

      color: ${cssVar.colorText};

      opacity: 0.25;
      background: ${cssVar.colorFill};
    }
  `
}));
//#endregion
export { styles };

//# sourceMappingURL=style.mjs.map