logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

input.style.js (1075B)

    

  1. const hoverGlow = {
  2.   x: 0,
  3.   y: 0,
  4.   blur: 4,
  5.   spread: 0,
  6.   color: '--text',
  7.   alpha: 1
  8. }
  10. export default {
  11.   name: 'Input',
  12.   selector: '.input',
  13.   variant: {
  14.     checkbox: '.-checkbox',
  15.     radio: '.-radio'
  16.   },
  17.   states: {
  18.     disabled: ':disabled',
  19.     hover: ':hover:not(:disabled)',
  20.     focused: ':focus-within'
  21.   },
  22.   validInnerComponents: [
  23.     'Text'
  24.   ],
  25.   defaultRules: [
  26.     {
  27.       component: 'Root',
  28.       directives: {
  29.         '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
  30.       }
  31.     },
  32.     {
  33.       variant: 'checkbox',
  34.       directives: {
  35.         roundness: 1
  36.       }
  37.     },
  38.     {
  39.       directives: {
  40.         '--font': 'generic | inherit',
  41.         background: '--fg, -5',
  42.         roundness: 3,
  43.         shadow: [{
  44.           x: 0,
  45.           y: 0,
  46.           blur: 2,
  47.           spread: 0,
  48.           color: '#000000',
  49.           alpha: 1
  50.         }, '--defaultInputBevel']
  51.       }
  52.     },
  53.     {
  54.       state: ['hover'],
  55.       directives: {
  56.         shadow: [hoverGlow, '--defaultInputBevel']
  57.       }
  58.     }
  59.   ]
  60. }