@sk-web-gui/core 0.1.75 → 0.1.77

package/src/components/button.js

@@ -9,6 +9,8 @@ function buttonSolid(colors) {
       /* keyboard active */
       '&.active': {
         '@apply text-white bg-hover border-primary-active': {},
+        /* dark */
+        '@apply dark:border-hover dark:bg-neutral-600': {},
       },
       /* focus */
       '@apply focus-visible:z-base': {},
@@ -22,10 +24,6 @@ function buttonSolid(colors) {
       '@apply dark:text-neutral-100 dark:bg-neutral-700': {},
       /* dark hover */
       '@apply dark:hover:border-hover dark:hover:bg-neutral-600': {},
-      /* dark keyboard active */
-      '&.active': {
-        '@apply dark:border-hover dark:bg-neutral-600': {},
-      },
       /* dark focus */
       '@apply dark:focus-visible:border-primary-500': {},
       /* dark active */
@@ -97,6 +95,8 @@ function buttonOutline(colors) {
       /* keyboard active */
       '&.active': {
         '@apply text-white bg-primary-active border-primary-active': {},
+        /* dark keyboard active */
+        '@apply dark:border-neutral-300 dark:bg-neutral-700': {},
       },
       /* focus */
       '@apply focus-visible:z-base': {},
@@ -109,10 +109,6 @@ function buttonOutline(colors) {
       '@apply dark:text-neutral-100 dark:bg-transparent': {},
       /* dark hover */
       '@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700': {},
-      /* dark keyboard active */
-      '&.active': {
-        '@apply dark:border-neutral-300 dark:bg-neutral-700': {},
-      },
       /* dark focus */
       '@apply dark:focus-visible:border-primary-500': {},
       /* dark active */
@@ -129,6 +125,10 @@ function buttonOutline(colors) {
             /* keyboard active */
             '&.active': {
               [`@apply text-white bg-${color}-active border-${color}-active`]: {},
+
+              /* dark keyboard active */
+              [`@apply dark:bg-${color}-200`]: {},
+              [`@apply dark:bg-opacity-15`]: {},
             },
             /* focus */
             [`@apply focus-visible:border-${color}-500`]: {},
@@ -142,11 +142,6 @@ function buttonOutline(colors) {
             /* dark hover */
             [`@apply dark:hover:bg-${color}-200`]: {},
             [`@apply dark:hover:bg-opacity-15`]: {},
-            /* dark keyboard active */
-            '&.active': {
-              [`@apply dark:bg-${color}-200`]: {},
-              [`@apply dark:bg-opacity-15`]: {},
-            },
             /* dark focus */
             [`@apply dark:focus-visible:border-${color}-500`]: {},
             [`@apply dark:focus-visible:ring-${color}-500`]: {},
@@ -335,35 +330,6 @@ module.exports = Button = (colors) => ({
       fontSize: 'inherit',
     },
 
-    '&[data-icon=true]': {
-      '@apply p-0': {},
-      "&[data-rounded='true']": {
-        '@apply rounded-full': {},
-      },
-      '&.btn-sm': {
-        minWidth: '4rem',
-        maxWidth: '4rem',
-      },
-
-      '&.btn-md': {
-        minWidth: '4.4rem',
-        maxWidth: '4.4rem',
-      },
-
-      '&.btn-lg': {
-        minWidth: '4.8rem',
-        maxWidth: '4.8rem',
-      },
-      '.btn-has-icon': {
-        '&-left .MuiSvgIcon-root': {
-          '@apply mr-0': {},
-        },
-        '&-right .MuiSvgIcon-root': {
-          '@apply ml-0': {},
-        },
-      },
-    },
-
     // State
 
     '&-disabled': {
@@ -391,4 +357,32 @@ module.exports = Button = (colors) => ({
       '@apply ml-sm': {},
     },
   },
+  '[data-icon=true]': {
+    '@apply p-0': {},
+    "&[data-rounded='true']": {
+      '@apply rounded-full': {},
+    },
+    '&.btn-sm': {
+      minWidth: '4rem',
+      maxWidth: '4rem',
+    },
+
+    '&.btn-md': {
+      minWidth: '4.4rem',
+      maxWidth: '4.4rem',
+    },
+
+    '&.btn-lg': {
+      minWidth: '4.8rem',
+      maxWidth: '4.8rem',
+    },
+    '.btn-has-icon': {
+      '&-left .MuiSvgIcon-root': {
+        '@apply mr-0': {},
+      },
+      '&-right .MuiSvgIcon-root': {
+        '@apply ml-0': {},
+      },
+    },
+  },
 });

package/src/components/calendar.js

@@ -17,10 +17,6 @@ module.exports = Calendar = () => ({
     '@apply border-solid border border-transparent focus:text-transparent hover:text-transparent focus:bg-transparent hover:bg-transparent focus:border-primary hover:border-primary':
       {},
   },
-  '.MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root': {
-    '@apply border-solid border border-transparent focus:text-transparent hover:text-transparent focus:bg-transparent hover:bg-transparent focus:border-primary hover:border-primary':
-      {},
-  },
   // Arrow spacer
   '.MuiCalendarPicker-root .MuiPickersArrowSwitcher-spacer': {
     '@apply w-11': {},

package/src/components/checkbox.js

@@ -1,6 +1,6 @@
 const svgToDataUri = require('mini-svg-data-uri');
 
-module.exports = Checkbox = (colors, theme) => ({
+module.exports = Checkbox = (colors) => ({
   '.form-checkbox': {
     //"@apply rounded shadow-sm": {},
     backgroundColor: 'inherit',

package/src/components/switch.js

@@ -56,11 +56,11 @@ module.exports = Switch = (colors) => ({
         [`&[data-color="${color}"]`]: {
           [`@apply text-${color}`]: {},
 
-          'input[type=checkbox]:focus + &': {
-            borderColor: `theme('colors.${color}.DEFAULT')`,
-            boxShadow: `0 0 5px theme('colors.${color}.DEFAULT')`,
-            borderWidth: '0.1rem',
-          },
+          // 'input[type=checkbox]:focus + &': {
+          //   borderColor: `${theme(`colors.${color}.DEFAULT`)}`,
+          //   boxShadow: `0 0 5px ${theme(`colors.${color}.DEFAULT`)}`,
+          //   borderWidth: '0.1rem',
+          // },
         },
       }),
       {}

package/src/components/tab-menu.js

@@ -1,45 +1,58 @@
-module.exports = TabMenu = () => ({
-    ".TabMenu": {
-        
-        ".tab-wrapper": {
-            display: "flex",
-            flexDirection: "row",
-            margin: "auto",
-            maxWidth: "140rem",
-
-            "li" : {
-                all: "unset",
-                display: "flex"
-            }
-        },
-
-        ".TabItem": {
-            all: 'unset',
-            height: 65,
-            display: "flex",
-            padding: "0 1rem",
-            marginRight: "5rem",
-            alignItems: "center",
-            position: "relative",
-            cursor: "pointer",
-
-            "&.active::after": {
-                content: '""',
-                display: "block",
-                position: "absolute",
-                width: "100%",
-                height: 6,
-                background: "#005595",
-                top: "100%",
-                left: 0,
-            }
-        },
-
-        ".underline": {
-            width: "100%",
-            height: 6,
-            background: "#F4F4F4"
-        }
-    },
-});
-  
+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

@@ -0,0 +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,
+      },
+    },
+  },
+});