logo

pleroma-fe

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

menu_item.style.js (2034B)

    

  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:not(.disabled)',
  15.     active: '.-active',
  16.     disabled: '.disabled'
  17.   },
  18.   defaultRules: [
  19.     {
  20.       directives: {
  21.         background: '--bg',
  22.         opacity: 0
  23.       }
  24.     },
  25.     {
  26.       state: ['hover'],
  27.       directives: {
  28.         background: '$mod(--bg 5)',
  29.         opacity: 1
  30.       }
  31.     },
  32.     {
  33.       state: ['active'],
  34.       directives: {
  35.         background: '$mod(--bg 10)',
  36.         opacity: 1
  37.       }
  38.     },
  39.     {
  40.       state: ['active', 'hover'],
  41.       directives: {
  42.         background: '$mod(--bg 15)',
  43.         opacity: 1
  44.       }
  45.     },
  46.     {
  47.       component: 'Text',
  48.       parent: {
  49.         component: 'MenuItem',
  50.         state: ['hover']
  51.       },
  52.       directives: {
  53.         textColor: '--link',
  54.         textAuto: 'no-preserve'
  55.       }
  56.     },
  57.     {
  58.       component: 'Text',
  59.       parent: {
  60.         component: 'MenuItem',
  61.         state: ['active']
  62.       },
  63.       directives: {
  64.         textColor: '--link',
  65.         textAuto: 'no-preserve'
  66.       }
  67.     },
  68.     {
  69.       component: 'Icon',
  70.       parent: {
  71.         component: 'MenuItem',
  72.         state: ['active']
  73.       },
  74.       directives: {
  75.         textColor: '--link',
  76.         textAuto: 'no-preserve'
  77.       }
  78.     },
  79.     {
  80.       component: 'Icon',
  81.       parent: {
  82.         component: 'MenuItem',
  83.         state: ['hover']
  84.       },
  85.       directives: {
  86.         textColor: '--link',
  87.         textAuto: 'no-preserve'
  88.       }
  89.     },
  90.     {
  91.       component: 'Text',
  92.       parent: {
  93.         component: 'MenuItem',
  94.         state: ['disabled']
  95.       },
  96.       directives: {
  97.         textOpacity: 0.25,
  98.         textOpacityMode: 'blend'
  99.       }
  100.     },
  101.     {
  102.       component: 'Icon',
  103.       parent: {
  104.         component: 'MenuItem',
  105.         state: ['disabled']
  106.       },
  107.       directives: {
  108.         textOpacity: 0.25,
  109.         textOpacityMode: 'blend'
  110.       }
  111.     }
  112.   ]
  113. }