@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 { getCheckBoxPosition } from '../../utils/checkBox';
export const StyledCheckbox = styled.div`
    align-items: center;
    display: flex;
    position: relative;
    width: 100%;
    min-height: 20px;
`;
export const StyledCheckboxInput = styled.input`
    display: none;
`;
export const StyledCheckboxBox = styled.label`
    color: ${_ref => {
  let {
    theme
  } = _ref;
  return theme.text;
}};
    cursor: ${_ref2 => {
  let {
    $isDisabled
  } = _ref2;
  return $isDisabled ? 'default' : 'pointer';
}};
    opacity: ${_ref3 => {
  let {
    $isDisabled
  } = _ref3;
  return $isDisabled ? 0.5 : 1;
}};
    padding-left: ${_ref4 => {
  let {
    $shouldShowAsSwitch
  } = _ref4;
  return $shouldShowAsSwitch ? '48px' : '20px';
}};
    transition: opacity 0.2s ease;
    user-select: none;
    height: 16px;

    &:after {
        ${_ref5 => {
  let {
    $isChecked,
    $shouldShowAsSwitch,
    $lineHeight,
    theme
  } = _ref5;
  return $shouldShowAsSwitch ? css`
                      background-color: white;
                      border-radius: 50%;
                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
                      height: 16px;
                      left: 7px;
                      top: ${$lineHeight ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 6}px` : '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: ${$lineHeight ? `${(getCheckBoxPosition(Number(theme.fontSize)) ?? 5) + 5}px` : 'calc(50% - 2px)'};
                      transform: rotateZ(37deg) translateY(-50%);
                      transition: opacity 0.2s ease;
                      width: 5.5px;
                  `;
}}

        content: ' ';
        position: absolute;
    }

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

        ${_ref7 => {
  let {
    $shouldShowAsSwitch,
    theme
  } = _ref7;
  return !$shouldShowAsSwitch && css`
                border: 1px solid rgba(${theme['409-rgb']}, 0.5);
            `;
}}

        border-radius: ${_ref8 => {
  let {
    $shouldShowAsSwitch
  } = _ref8;
  return $shouldShowAsSwitch ? '100px' : 0;
}};
        content: ' ';
        height: ${_ref9 => {
  let {
    $shouldShowAsSwitch
  } = _ref9;
  return $shouldShowAsSwitch ? '13px' : '15px';
}};
        left: ${_ref0 => {
  let {
    $shouldShowAsSwitch
  } = _ref0;
  return $shouldShowAsSwitch ? '10px' : 0;
}};
        position: absolute;
        transition: background-color 0.2s ease;
        width: ${_ref1 => {
  let {
    $shouldShowAsSwitch
  } = _ref1;
  return $shouldShowAsSwitch ? '28px' : '15px';
}};
        ${_ref10 => {
  let {
    $lineHeight,
    theme,
    $shouldShowAsSwitch
  } = _ref10;
  return $lineHeight ? css`
                      top: ${getCheckBoxPosition(Number(theme.fontSize)) ?? 5 + ($shouldShowAsSwitch ? 1 : 0)}px;
                  ` : css`
                      top: 50%;
                      transform: translateY(-50%);
                  `;
}}
    }
}
`;
export const StyledCheckboxLabel = styled.label`
    color: ${_ref11 => {
  let {
    theme
  } = _ref11;
  return theme.text;
}};
    cursor: ${_ref12 => {
  let {
    $shouldChangeOnLabelClick
  } = _ref12;
  return !$shouldChangeOnLabelClick ? 'default' : 'pointer';
}};
    opacity: ${_ref13 => {
  let {
    $isDisabled
  } = _ref13;
  return $isDisabled ? 0.5 : 1;
}};
    transition: opacity 0.2s ease;
    user-select: none;
`;
//# sourceMappingURL=Checkbox.styles.js.map