All files / src/utils getHiddenInputStyles.ts

100% Statements 1/1
100% Branches 14/14
100% Functions 1/1
100% Lines 1/1

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102                              218x                                                                                                                                                                            
import { css, cssClass } from '../styled';
import { palette, theme } from '../utils';
 
export function getHiddenInputStyles({
  iconClassName,
  checkedCss,
  disabledCheckedCss,
  disabledCheckedIconCss,
  disabledUncheckedIconCss,
  checkedIconCss,
  uncheckedIconCss,
  styleProps,
  themeKey
}: any) {
  // @ts-ignore
  return cssClass`
    height: 1em;
    width: 1em;
    overflow: hidden;
    position: absolute;
    opacity: 0;
 
    &:focus {
      outline: none;
    }
 
    & + .${iconClassName} {
      ${styleProps.state &&
        css`
          border-color: ${palette(`${styleProps.state}`)(styleProps)};
        `}
 
      &::before {
        ${uncheckedIconCss};
 
        & {
          ${theme(themeKey, `unchecked`)(styleProps)};
        }
      }
    }
    &:not(:checked) + .${iconClassName} {
      ${styleProps.state &&
        css`
          box-shadow: ${palette(`${styleProps.state}Tint`)(styleProps)} 0px 0px 0px 3px !important;
        `}
    }
    &[disabled] + .${iconClassName} {
      background-color: ${palette('white700')(styleProps)};
      box-shadow: unset;
 
      &::before {
        ${disabledUncheckedIconCss};
        & {
          ${theme(themeKey, `uncheckedDisabled`)(styleProps)};
        }
      }
 
      & {
        ${theme(themeKey, `disabled`)(styleProps)};
      }
    }
    &:not([disabled]):hover + .${iconClassName} {
      box-shadow: ${palette(`${styleProps.state || 'primary'}Tint`)(styleProps)} 0px 0px 0px 2px !important;
      border-color: ${palette(`${styleProps.state || 'primary'}100`)(styleProps)};
    }
    &:focus + .${iconClassName} {
      border-color: ${palette(`${styleProps.palette || 'primary'}`)(styleProps)};
      box-shadow: ${palette(`${styleProps.palette || 'primary'}100`)(styleProps)} 0px 0px 0px 3px !important;
 
      & {
        ${theme(themeKey, `focusChecked`)(styleProps)};
      }
    }
    &:not([disabled]):checked + .${iconClassName} {
      border-color: ${palette(`${styleProps.palette || 'primary'}`)(styleProps)};
      ${checkedCss};
    }
    &:checked + .${iconClassName} {
      ${disabledCheckedCss};
 
      &::before {
        ${checkedIconCss};
      }
 
      & {
        ${theme(themeKey, `checked`)(styleProps)};
      }
    }
    &[disabled]:checked + .${iconClassName}::before {
      ${disabledCheckedIconCss};
 
      & {
        ${theme(themeKey, `checkedDisabled`)(styleProps)};
      }
    }
 
    & {
      ${theme(styleProps.themeKey, `css.root`)(styleProps)};
    }
  `;
}