@symbo.ls/preview 0.0.49 → 0.0.50

package/package.json

@@ -2,7 +2,7 @@
   "name": "@symbo.ls/preview",
   "description": "",
   "author": "",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "repository": "https://github.com/rackai/editor",
   "main": "src/index.js",
   "scripts": {

package/src/pages/Spaces/buttons.js

@@ -24,7 +24,8 @@ const ChoosableButton = {
       color: 'gray7'
     },
     ':hover': {
-      theme: 'quaternary'
+      theme: 'quaternary',
+      '.active': { color: 'blue' }
     },
     '.active': {
       theme: null
@@ -97,10 +98,8 @@ const BUTTONS = {
   }
 }
 
-let keys
 const cachedKeys = state => {
-  if (!keys) keys = Object.keys(BUTTONS[state.value]).filter(v => v !== 'maxValue')
-  return keys
+  return Object.keys(BUTTONS[state.value]).filter(v => v !== 'maxValue')
 }
 
 export default {
@@ -114,9 +113,9 @@ export default {
     extend: [ChoosableButton, DropdownParent, WiderButton],
 
     props: ({ key, state, parent }) => ({
+      lazyLoad: true,
       active: state.parent.parent.props[state.value] === state.parent.key,
       icon: { name: state.value },
-      lazyLoad: true,
 
       '.active': {
         color: 'blue',
@@ -169,18 +168,21 @@ export default {
             return {
               lazyLoad: true,
               active,
-              icon: {
-                name: iconKey
-              },
+              icon: { name: iconKey },
               gridArea: keys.length > 3 && diffPropPosition(propState.value, state.value),
               theme: null,
-              background: 'transparent 0',
-              '.active': {
-                theme: null,
-                color: 'blue',
+              '@dark': {
+                background: 'transparent 0',
+                color: 'gray7',
                 ':hover': {
-                  color: 'blue'
+                  theme: 'quinary',
+                  color: 'gray8'
                 }
+              },
+              ':hover': null,
+              '.active': {
+                theme: null,
+                color: 'blue'
               }
             }
           },
@@ -244,6 +246,9 @@ export default {
           const tableState = rowState.parent
           const propKey = diffPropValue(propState.value, state.value)
           const active = tableState.props[propKey] === rowState.key
+
+          const isRadius = propState.value === 'borderRadius'
+
           return {
             position: 'absolute',
             round: '100%',
@@ -252,11 +257,21 @@ export default {
             lazyLoad: true,
 
             hide: !active,
+            isRadius,
+
+            '!isRadius': {
+              ':nth-child(1)': { left: '50%', top: 'W' },
+              ':nth-child(2)': { right: 'W', top: '50%' },
+              ':nth-child(3)': { left: '50%', bottom: 'W' },
+              ':nth-child(4)': { left: 'W', top: '50%' }
+            },
 
-            ':nth-child(1)': { left: '50%', top: 'W' },
-            ':nth-child(2)': { right: 'W', top: '50%' },
-            ':nth-child(3)': { left: '50%', bottom: 'W' },
-            ':nth-child(4)': { left: 'W', top: '50%' }
+            '.isRadius': {
+              ':nth-child(1)': { left: 'X2', top: 'X2' },
+              ':nth-child(2)': { right: 'X2', top: 'X2' },
+              ':nth-child(3)': { right: 'X2', bottom: 'X2' },
+              ':nth-child(4)': { left: 'X2', bottom: 'X2' }
+            }
           }
         }
       },

package/src/pages/Spaces/index.js

@@ -19,7 +19,3 @@ export const Spaces = {
 
   scale: SpacingScale
 }
-
-// preview,
-// sequence,
-// boxModel