logo

pleroma-fe

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

menu_item.style.js (1575B)

    

  1. export default {
  2.   name: 'MenuItem',
  3.   selector: '.menu-item',
  4.   validInnerComponents: [
  5.     'Text',
  6.     'Icon',
  7.     'Input',
  8.     'Border',
  9.     'ButtonUnstyled',
  10.     'Badge',
  11.     'Avatar'
  12.   ],
  13.   states: {
  14.     hover: ':hover',
  15.     active: '.-active'
  16.   },
  17.   defaultRules: [
  18.     {
  19.       directives: {
  20.         background: '--bg',
  21.         opacity: 0
  22.       }
  23.     },
  24.     {
  25.       state: ['hover'],
  26.       directives: {
  27.         background: '$mod(--bg, 5)',
  28.         opacity: 1
  29.       }
  30.     },
  31.     {
  32.       state: ['active'],
  33.       directives: {
  34.         background: '$mod(--bg, 10)',
  35.         opacity: 1
  36.       }
  37.     },
  38.     {
  39.       state: ['active', 'hover'],
  40.       directives: {
  41.         background: '$mod(--bg, 15)',
  42.         opacity: 1
  43.       }
  44.     },
  45.     {
  46.       component: 'Text',
  47.       parent: {
  48.         component: 'MenuItem',
  49.         state: ['hover']
  50.       },
  51.       directives: {
  52.         textColor: '--link',
  53.         textAuto: 'no-preserve'
  54.       }
  55.     },
  56.     {
  57.       component: 'Text',
  58.       parent: {
  59.         component: 'MenuItem',
  60.         state: ['active']
  61.       },
  62.       directives: {
  63.         textColor: '--link',
  64.         textAuto: 'no-preserve'
  65.       }
  66.     },
  67.     {
  68.       component: 'Icon',
  69.       parent: {
  70.         component: 'MenuItem',
  71.         state: ['active']
  72.       },
  73.       directives: {
  74.         textColor: '--link',
  75.         textAuto: 'no-preserve'
  76.       }
  77.     },
  78.     {
  79.       component: 'Icon',
  80.       parent: {
  81.         component: 'MenuItem',
  82.         state: ['hover']
  83.       },
  84.       directives: {
  85.         textColor: '--link',
  86.         textAuto: 'no-preserve'
  87.       }
  88.     }
  89.   ]
  90. }