nano-jsx/esm/ui/_config.js

SSR first, lightweight 1kB JSX library.

import { strToHash } from '../core.js';
export const boxShadow = `
  -webkit-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);
  -moz-box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);
  box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12);
`;
export const userSelect = `
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
`;
export const rippleEffect = (rippleClr, hoverClr) => {
    const rippleClass = `ripple-${strToHash(rippleClr + hoverClr)}`;
    const styles = `  
  .${rippleClass} {
    background-position: center;
    transition: background 0.8s;
  }
  
  .${rippleClass}:hover {
    background: ${hoverClr} radial-gradient(circle, transparent 1%, ${hoverClr} 1%) center/15000%;
  }

  .${rippleClass}:focus {
    background: ${hoverClr} radial-gradient(circle, transparent 1%, ${hoverClr} 1%) center/15000%;
  }
  
  .${rippleClass}:active {
    background-color: ${rippleClr};
    background-size: 100%;
    transition: background 0s;
  }`;
    return {
        styles,
        class: rippleClass
    };
};
export const zIndex = {
    button: 'unset;',
    banner: '50;',
    bar: '100;',
    navigation: '100;',
    fab: '200;',
    sheet: '300;',
    menu: '400;',
    snackbar: '500;',
    dialog: '600;'
};
//# sourceMappingURL=_config.js.map