@chayns-components/core/lib/esm/components/checkbox/Checkbox.styles.js

A set of beautiful React components for developing your own applications with chayns.

import styled, { css } from 'styled-components';
import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
export const StyledCheckbox = styled.div`
    align-items: center;
    display: flex;
    position: relative;
    width: 100%;
    min-height: 20px;
`;
export const StyledCheckboxInput = styled.input`
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    left: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 0;
    white-space: nowrap;
    width: 1px;

    ${({
  $shouldShowKeyboardHighlighting
}) => $shouldShowKeyboardHighlighting && css`
            &:focus-visible + div > label {
                transition: none;
                ${keyboardFocusHighlightingRingCss}
            }
        `}
`;
export const StyledCheckboxBoxWrapper = styled.div`
    display: flex;
    flex-shrink: 0;
    height: 16px;
    position: absolute;

    ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch && css`
            right: 42px;
        `}
`;
export const StyledCheckboxBox = styled.label`
    color: ${({
  theme
}) => theme.text};
    cursor: ${({
  $isDisabled
}) => $isDisabled ? 'default' : 'pointer'};
    opacity: ${({
  $isDisabled
}) => $isDisabled ? 0.5 : 1};
    position: relative;
    display: inline-block;
    width: ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? '44px' : '16px'};
    transition: opacity 0.2s ease;
    user-select: none;
    height: 16px;

    &:after {
        ${({
  $isChecked,
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? css`
                      background-color: white;
                      border-radius: 50%;
                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
                      height: 16px;
                      left: 7px;
                      top: 50%;
                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);
                      transition: transform 0.2s ease;
                      width: 16px;
                  ` : css`
                      border-right: 2px solid #fff;
                      border-bottom: 2px solid #fff;
                      height: 10px;
                      left: 2px;
                      opacity: ${$isChecked ? 1 : 0};
                      top: calc(50% - 2px);
                      transform: rotateZ(37deg) translateY(-50%);
                      transition: opacity 0.2s ease;
                      width: 5px;
                  `}

        content: ' ';
        position: absolute;
    }

    &:before {
        background-color: ${({
  $isChecked,
  $shouldShowAsSwitch,
  $checkedBackgroundColor,
  $uncheckedBackgroundColor,
  theme
}) => {
  const activeBackgroundColor = $checkedBackgroundColor ?? ($shouldShowAsSwitch ? theme.green : theme['408']);
  const inactiveBackgroundColor = $uncheckedBackgroundColor ?? ($shouldShowAsSwitch ? theme.red : theme['403']);
  if ($shouldShowAsSwitch) {
    return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;
  }
  return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;
}};

        border: ${({
  $borderColor,
  $shouldShowAsSwitch,
  theme
}) => {
  if ($shouldShowAsSwitch) {
    return 'none';
  }
  const fallbackBorderColor = theme['409-rgb'] ? `rgba(${theme['409-rgb']}, 0.5)` : theme.text;
  return `1px solid ${$borderColor ?? fallbackBorderColor}`;
}};

        border-radius: ${({
  $shouldShowAsSwitch,
  $borderRadius
}) => $borderRadius ?? ($shouldShowAsSwitch ? '100px' : 0)};
        content: ' ';
        height: ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? '13px' : '15px'};
        left: ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? '10px' : 0};
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition: background-color 0.2s ease;
        width: ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? '28px' : '15px'};
    }
}
`;
export const StyledCheckboxLabel = styled.label`
    color: ${({
  theme
}) => theme.text};
    cursor: ${({
  $shouldChangeOnLabelClick
}) => !$shouldChangeOnLabelClick ? 'default' : 'pointer'};
    opacity: ${({
  $isDisabled
}) => $isDisabled ? 0.5 : 1};
    transition: opacity 0.2s ease;
    user-select: none;
    ${({
  $shouldShowAsSwitch
}) => $shouldShowAsSwitch ? css`
                  padding-right: 48px;
              ` : css`
                  padding-left: 20px;
              `}
`;
//# sourceMappingURL=Checkbox.styles.js.map