logo

pleroma-fe

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

button_unstyled.style.js (1835B)

    

  1. export default {
  2.   name: 'ButtonUnstyled',
  3.   selector: '.button-unstyled',
  4.   states: {
  5.     toggled: '.toggled',
  6.     disabled: ':disabled',
  7.     hover: ':hover:not(:disabled)',
  8.     focused: ':focus-within'
  9.   },
  10.   validInnerComponents: [
  11.     'Text',
  12.     'Icon',
  13.     'Badge'
  14.   ],
  15.   defaultRules: [
  16.     {
  17.       directives: {
  18.         background: '#ffffff',
  19.         opacity: 0,
  20.         shadow: []
  21.       }
  22.     },
  23.     {
  24.       component: 'Icon',
  25.       parent: {
  26.         component: 'ButtonUnstyled',
  27.         state: ['hover']
  28.       },
  29.       directives: {
  30.         textColor: '--parent--text'
  31.       }
  32.     },
  33.     {
  34.       component: 'Icon',
  35.       parent: {
  36.         component: 'ButtonUnstyled',
  37.         state: ['toggled']
  38.       },
  39.       directives: {
  40.         textColor: '--parent--text'
  41.       }
  42.     },
  43.     {
  44.       component: 'Icon',
  45.       parent: {
  46.         component: 'ButtonUnstyled',
  47.         state: ['toggled', 'hover']
  48.       },
  49.       directives: {
  50.         textColor: '--parent--text'
  51.       }
  52.     },
  53.     {
  54.       component: 'Icon',
  55.       parent: {
  56.         component: 'ButtonUnstyled',
  57.         state: ['toggled', 'focused']
  58.       },
  59.       directives: {
  60.         textColor: '--parent--text'
  61.       }
  62.     },
  63.     {
  64.       component: 'Icon',
  65.       parent: {
  66.         component: 'ButtonUnstyled',
  67.         state: ['toggled', 'focused', 'hover']
  68.       },
  69.       directives: {
  70.         textColor: '--parent--text'
  71.       }
  72.     },
  73.     {
  74.       component: 'Text',
  75.       parent: {
  76.         component: 'ButtonUnstyled',
  77.         state: ['disabled']
  78.       },
  79.       directives: {
  80.         textOpacity: 0.25,
  81.         textOpacityMode: 'blend'
  82.       }
  83.     },
  84.     {
  85.       component: 'Icon',
  86.       parent: {
  87.         component: 'ButtonUnstyled',
  88.         state: ['disabled']
  89.       },
  90.       directives: {
  91.         textOpacity: 0.25,
  92.         textOpacityMode: 'blend'
  93.       }
  94.     }
  95.   ]
  96. }