@symbo.ls/preview 0.0.9

package/src/pages/ColorEditor/interactivity.js

@@ -0,0 +1,116 @@
+'use strict'
+
+import { Block, Grid, Text, SelectTool, CommonField } from '@symbo.ls/components'
+
+export const interactivity = {
+  h6: {
+    extend: [Text, Block],
+    props: { text: 'Interactivity', padding: '0 0 Z2 0', size: 'B' },
+    style: { fontWeight: 'normal', margin: 0 }
+  },
+  interactivitySet: {
+    extend: Grid,
+    props: {
+      columns: 'repeat(4, 1fr)',
+      rows: 'repear(2, 1fr)',
+      columnGap: 'C',
+      rowGap: 'A2'
+    },
+    style: { width: 'fit-content' },
+    childExtend: {
+      extend: CommonField,
+      props: { padding: 0 },
+      element: {
+        extend: SelectTool,
+        buttons: { ...[{ props: { icon: 'plus' } }] }
+      }
+    },
+    ...[
+      {
+        caption: { props: { text: ':hover' } },
+        element: {
+          title: {
+            props: { icon: 'hoverOutline', text: 'none' }
+          }
+        }
+      },
+      {
+        caption: { props: { text: ':focus' } },
+        element: {
+          title: {
+            props: { icon: 'focusOutline', text: 'none' }
+          }
+        }
+      },
+      {
+        caption: { props: { text: ':active' } },
+        element: {
+          title: {
+            props: { icon: 'clickOutline', text: 'none' }
+          }
+        }
+      },
+      {
+        caption: { props: { text: ':selection' } },
+        element: {
+          title: {
+            props: { icon: 'selection', text: 'none' }
+          }
+        }
+      },
+      {
+        caption: { props: { text: ':link' } },
+        element: {
+          title: {
+            props: { icon: 'clickOutline', text: 'none' }
+          }
+        }
+      },
+      {
+        caption: { props: { text: ':visited' } },
+        element: {
+          title: {
+            props: { icon: 'focusOutline', text: 'none' }
+          }
+        }
+      },
+      {
+        caption: { props: { text: ':disabled' } },
+        element: {
+          title: {
+            props: { icon: 'disabled', text: 'none' }
+          }
+        }
+      },
+
+      {
+        caption: null,
+        style: {
+          display: 'flex',
+          alignItems: 'flex-end'
+        },
+        element: {
+          title: {
+            props: { text: 'Add :pseudo' }
+          },
+          buttons: {
+            style: {
+              button: {
+                background: 'transparent',
+                borderRadius: 0,
+                '&:first-child': { borderRight: '.1px solid rgba(255, 255, 255, .1)' },
+                '&:hover': { background: 'transparent' }
+              }
+            },
+            ...[
+              { props: { icon: 'arrowAngleDown' } },
+              { props: { icon: 'plus' } }
+
+            ]
+          }
+        }
+      }
+    ]
+  }
+
+}