fui-fancyui/dist/src/components/atoms/RawCheckbox/RawCheckbox.style.js

FancyUI Libary

import { styled as e, css as r } from "styled-components";
import { getBackgroundColor as s } from "../../../design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.js";
const t = r`
  width: 20px;
  height: 20px;
  border-radius: 4px;
`, p = e.input`
  margin: 0;
  position: absolute;
  cursor: pointer;
  opacity: 1;
  background-color: transparent;
  z-index: 0;
  appearance: none;
  outline: none;
  ${t}
  margin: 1px;

  &:checked {
    background-color: transparent;
  }

  &:focus-visible {
    box-shadow: 0 0 0px 1px white;
  }
`, l = e.div`
  position: absolute;
  top: 0;
  left: 0;
  background-color: ${({ theme: o, $themeType: i, $layer: n }) => s({ theme: o, $themeType: i, $layer: n })};
  z-index: 1;
  ${t}
  box-sizing: border-box;
  width: 20px;
  height: 20px;

  &:focus-visible {
    outline: none; /* Remove default outline */
  }
  /* the checkmark svg */
  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    fill: ${({ theme: o }) => o.color.accent[0]};
    display: ${({ $checked: o }) => o ? "block" : "none"};
  }
`, x = e.div`
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
`;
export {
  l as FakeCheckbox,
  p as HidenCheckBox,
  x as InputContainer
};