@sk-web-gui/core 0.1.91 → 0.1.92

package/src/components/comments.js

@@ -1,38 +1,38 @@
-module.exports = Comments = () => ({ 
-
-    '.comment-header': {
-        '@apply w-full flex items-center gap-8 p-16 border-b-4 border-gray-200': {},
-    },
-
-    '.comment-item':{
-        '@apply w-full': {},
-
-        '&-container': {
-            '@apply flex justify-between relative': {},
-
-            '&-textpic': {
-                '@apply flex gap-2': {},
-            },
-        },
-        '&-text': {
-            '@apply text-base font-bold mx-0 mb-0 mt-4': {},
-        },
-        '&-commentorpublished': {
-            '@apply float-right text-neutral-600 m-0': {},
-        },
-    },
-    '.comment-input':{
-        '@apply w-full flex gap-4 px-10 pt-8 pb-10': {},
-
-        '&-inactive': {
-            '@apply text-neutral-300 !text-3xl': {},
-        },
-
-        '&-active': {
-            '@apply text-primary !text-3xl': {},
-        }
-
-    },
-
-   
+module.exports = Comments = () => ({ 
+
+    '.comment-header': {
+        '@apply w-full flex items-center gap-8 p-16 border-b-4 border-gray-200': {},
+    },
+
+    '.comment-item':{
+        '@apply w-full': {},
+
+        '&-container': {
+            '@apply flex justify-between relative': {},
+
+            '&-textpic': {
+                '@apply flex gap-2': {},
+            },
+        },
+        '&-text': {
+            '@apply text-base font-bold mx-0 mb-0 mt-4': {},
+        },
+        '&-commentorpublished': {
+            '@apply float-right text-neutral-600 m-0': {},
+        },
+    },
+    '.comment-input':{
+        '@apply w-full flex gap-4 px-10 pt-8 pb-10': {},
+
+        '&-inactive': {
+            '@apply text-neutral-300 !text-3xl': {},
+        },
+
+        '&-active': {
+            '@apply text-primary !text-3xl': {},
+        }
+
+    },
+
+   
 });

package/src/components/context-menu.js

@@ -1,10 +1,48 @@
 module.exports = ContextMenu = () => ({
   '.context-menu-wrapper': {
+    '@apply relative inline': {},
+
+    '> a, > button': {
+      '@apply inline-flex': {},
+    },
+
     '.context-menu-items': {
-      '@apply absolute bg-white border border-body z-10 drop-shadow-md mt-sm flex flex-col space-y-4 justify-start items-start p-sm':
+      '@apply absolute rounded bg-white border border-body z-10 drop-shadow-md mt-sm flex flex-col justify-start items-start':
         {},
       '.context-menu-item': {
-        '@apply px-sm': {},
+        '@apply text-base text-body hover:text-white focus-within:text-white min-h-[3.5rem] w-full flex justify-start items-center':
+          {},
+
+        'a, button': {
+          '@apply text-base font-normal min-h-[3.5rem] py-[0.6rem] items-center w-full rounded-none border-transparent px-md flex justify-start':
+            {},
+
+          '&.active': {
+            '@apply bg-primary text-white': {},
+          },
+
+          '.MuiSvgIcon-root': {
+            '@apply text-base': {},
+          },
+        },
+
+        '&:first-child a,&:first-child button': {
+          '@apply pt-[0.675rem] pb-[0.525rem]': {},
+        },
+        '&:last-child a,&:last-child button': {
+          '@apply pt-[0.525rem] pb-[0.675rem]': {},
+        },
+        '&:only-child a,&:only-child button': {
+          '@apply py-[0.6rem]': {},
+        },
+      },
+
+      hr: {
+        '@apply mx-sm w-[calc(100%_-_16px)]': {},
+      },
+
+      '&.right': {
+        '@apply right-0': {},
       },
     },
   },

package/src/components/link.js

@@ -16,6 +16,10 @@ module.exports = Link = () => ({
       verticalAlign: 'text-top',
     },
 
+    '&[type="button"]': {
+      '@apply inline-flex items-center align-bottom': {},
+    },
+
     '&-disabled': {
       '@apply disabled:opacity-60 disabled:cursor-not-allowed disabled:no-underline': {},
     },

package/src/components/side-menu.js

@@ -54,23 +54,39 @@ module.exports = Menu = () => ({
         },
       },
 
-      '.expand path': {
-        '@apply fill-primary': {},
-      },
-
       '& .sk-sidemenu-wrapper': {
         '@apply min-h-[48px] max-h-[48px] relative flex flex-wrap items-center': {},
 
         '.sk-sidemenu-item-link': {
           '@apply flex-grow relative flex items-center text-base text-left justify-start pr-sm h-full': {},
           '@apply focus-visible:z-base': {},
+
+          '&[aria-disabled="true"]': {
+            '@apply text-neutral-600 cursor-not-allowed': {},
+
+            '.sk-sidemenu-item-label': {
+              '@apply text-neutral-600': {},
+            },
+          },
         },
 
         '.expand': {
           '@apply w-[50px] h-full flex justify-center items-center ml-auto p-0': {},
 
+          '&[aria-disabled="true"]': {
+            '@apply !text-gray-stroke cursor-not-allowed !bg-transparent': {},
+
+            path: {
+              '@apply fill-gray-stroke': {},
+            },
+          },
+
+          path: {
+            '@apply fill-primary': {},
+          },
+
           '&-button': {
-            '@apply flex justify-center items-center border-l border-gray-stroke h-[24px] w-[45px]': {},
+            '@apply fill-primary flex justify-center items-center border-l border-gray-stroke h-[24px] w-[45px]': {},
           },
         },
       },
@@ -106,14 +122,9 @@ module.exports = Menu = () => ({
           svg: {
             '@apply h-full': {},
           },
-          '&-label': {
-            '@apply text-[#B65A06]': {},
-          },
-        },
 
-        '&.moved-here': {
-          "[draggable='true']": {
-            '@apply text-warning': {},
+          '&[aria-disabled="true"]': {
+            '@apply !text-gray-stroke cursor-not-allowed !bg-transparent': {},
           },
         },
 

package/src/components/tab-menu.js

@@ -1,58 +1,58 @@
-module.exports = TabMenu = () => ({
-  '.sk-tab-menu': {
-    '&-wrapper': {
-      display: 'flex',
-      flexDirection: 'row',
-      margin: 'auto',
-    },
-    '&-right': {
-      '@apply justify-end': {},
-    },
-    '&-center': {
-      '@apply justify-center': {},
-    },
-    '&-list': {
-      all: 'unset',
-      display: 'flex',
-      '&-stretch': {
-        '@apply w-full justify-between': {},
-      },
-    },
-
-    '&-underline': {
-      width: '100%',
-      height: 6,
-      '@apply bg-gray-light': {},
-    },
-    '&-item': {
-      all: 'unset',
-      height: 65,
-      display: 'flex',
-      padding: '0 1rem',
-      marginRight: '5rem',
-      alignItems: 'center',
-      position: 'relative',
-      cursor: 'pointer',
-      '&-stretch': {
-        '@apply mr-0': {},
-      },
-      '&-right': {
-        '@apply mr-0 ml-[5rem]': {},
-      },
-      '&-center:last-of-type': {
-        '@apply mr-0': {},
-      },
-
-      '&.active::after': {
-        content: '""',
-        display: 'block',
-        position: 'absolute',
-        width: '100%',
-        height: 6,
-        top: '100%',
-        left: 0,
-        '@apply bg-primary': {},
-      },
-    },
-  },
-});
+module.exports = TabMenu = () => ({
+  '.sk-tab-menu': {
+    '&-wrapper': {
+      display: 'flex',
+      flexDirection: 'row',
+      margin: 'auto',
+    },
+    '&-right': {
+      '@apply justify-end': {},
+    },
+    '&-center': {
+      '@apply justify-center': {},
+    },
+    '&-list': {
+      all: 'unset',
+      display: 'flex',
+      '&-stretch': {
+        '@apply w-full justify-between': {},
+      },
+    },
+
+    '&-underline': {
+      width: '100%',
+      height: 6,
+      '@apply bg-gray-light': {},
+    },
+    '&-item': {
+      all: 'unset',
+      height: 65,
+      display: 'flex',
+      padding: '0 1rem',
+      marginRight: '5rem',
+      alignItems: 'center',
+      position: 'relative',
+      cursor: 'pointer',
+      '&-stretch': {
+        '@apply mr-0': {},
+      },
+      '&-right': {
+        '@apply mr-0 ml-[5rem]': {},
+      },
+      '&-center:last-of-type': {
+        '@apply mr-0': {},
+      },
+
+      '&.active::after': {
+        content: '""',
+        display: 'block',
+        position: 'absolute',
+        width: '100%',
+        height: 6,
+        top: '100%',
+        left: 0,
+        '@apply bg-primary': {},
+      },
+    },
+  },
+});

package/src/components/tabs.js

@@ -1,64 +1,64 @@
-module.exports = Tabs = () => ({
-  '.sk-tabs': {
-    '&-stretch': {
-      '@apply w-full': {},
-    },
-    '&-list': {
-      '@apply  block relative w-full h-[3rem]': {},
-      '&-stretch': {
-        '@apply flex justify-between': {},
-      },
-      '&-right': {
-        '@apply text-right': {},
-      },
-      '&-center': {
-        '@apply text-center': {},
-      },
-
-      '&-line::after': {
-        content: '""',
-        '@apply bg-gray-middle w-full h-[2px] absolute left-0 right-0 bottom-0': {},
-      },
-    },
-    '&-tab': {
-      '@apply relative mr-[3.2rem] text-base font-bold  p-0 relative h-[2.8rem] inline-block': {},
-      '@apply text-gray': {},
-      '@apply cursor-pointer': {},
-      '&.disabled': {
-        '@apply cursor-not-allowed': {},
-        '@apply text-gray-stroke': {},
-      },
-      '&.active': {
-        '@apply text-body': {},
-        '&::after': {
-          content: '""',
-          '@apply bg-primary w-full h-[2px] absolute left-0 right-0 top-[100%] z-[1]': {},
-        },
-      },
-      '&-stretch': {
-        '@apply mr-0': {},
-      },
-      '&-header': {
-        '@apply text-lg font-normal': {},
-      },
-      '&-right': {
-        '@apply mr-0 ml-lg': {},
-      },
-      '&:last-of-type': {
-        '@apply mr-0': {},
-      },
-      '&-icon': {
-        '&-with-label': {
-          '@apply mr-sm': {},
-        },
-      },
-    },
-    '&-panel': {
-      '@apply mt-lg': {},
-      '&:not(.active)': {
-        display: 'none',
-        hidden: true,
-      },
-    },
-  },
-});
+module.exports = Tabs = () => ({
+  '.sk-tabs': {
+    '&-stretch': {
+      '@apply w-full': {},
+    },
+    '&-list': {
+      '@apply  block relative w-full h-[3rem]': {},
+      '&-stretch': {
+        '@apply flex justify-between': {},
+      },
+      '&-right': {
+        '@apply text-right': {},
+      },
+      '&-center': {
+        '@apply text-center': {},
+      },
+
+      '&-line::after': {
+        content: '""',
+        '@apply bg-gray-middle w-full h-[2px] absolute left-0 right-0 bottom-0': {},
+      },
+    },
+    '&-tab': {
+      '@apply relative mr-[3.2rem] text-base font-bold  p-0 relative h-[2.8rem] inline-block': {},
+      '@apply text-gray': {},
+      '@apply cursor-pointer': {},
+      '&.disabled': {
+        '@apply cursor-not-allowed': {},
+        '@apply text-gray-stroke': {},
+      },
+      '&.active': {
+        '@apply text-body': {},
+        '&::after': {
+          content: '""',
+          '@apply bg-primary w-full h-[2px] absolute left-0 right-0 top-[100%] z-[1]': {},
+        },
+      },
+      '&-stretch': {
+        '@apply mr-0': {},
+      },
+      '&-header': {
+        '@apply text-lg font-normal': {},
+      },
+      '&-right': {
+        '@apply mr-0 ml-lg': {},
+      },
+      '&:last-of-type': {
+        '@apply mr-0': {},
+      },
+      '&-icon': {
+        '&-with-label': {
+          '@apply mr-sm': {},
+        },
+      },
+    },
+    '&-panel': {
+      '@apply mt-lg': {},
+      '&:not(.active)': {
+        display: 'none',
+        hidden: true,
+      },
+    },
+  },
+});

package/src/index.js

@@ -1,8 +1,8 @@
-const preset = require('./preset');
-const plugin = require('./plugin');
-
-module.exports = {
-  default: plugin,
-  plugin: plugin,
-  preset: preset,
-};
+const preset = require('./preset');
+const plugin = require('./plugin');
+
+module.exports = {
+  default: plugin,
+  plugin: plugin,
+  preset: preset,
+};