@sk-web-gui/core 0.1.38 → 0.1.40

package/src/components/switch.js

@@ -1,119 +1,119 @@
-module.exports = Switch = (colors) => ({
-  '.form-switch-label': {
-    '@apply inline-block align-middle': {},
-
-    "&[type='hidden']": {
-      '@apply hidden': {},
-
-      '.form-switch': {
-        '@apply hidden': {},
-      },
-    },
-  },
-  '.form-switch': {
-    '@apply rounded-full p-0.5 cursor-base focus:outline-none': {},
-    '@apply bg-gray-stroke dark:bg-neutral-700': {},
-    // Hover
-    //"@apply hover:bg-neutral-300 dark:hover:bg-neutral-600": {},
-
-    border: '0.1rem solid transparent',
-
-    'input[type=checkbox]:checked + &, input[type=checkbox][aria-checked=mixed] + &': {
-      backgroundColor: 'currentColor',
-      '.form-switch-box-sm': {
-        transform: 'translateX(1.42rem)',
-      },
-      '.form-switch-box-md': {
-        transform: 'translateX(1.6rem)',
-      },
-      '.form-switch-box-lg': {
-        transform: 'translateX(1.78rem)',
-      },
-    },
-
-    'input[type=checkbox]:focus-visible + &': {
-      '@apply z-base !important': {},
-      '@apply border-primary !important': {},
-      '@apply ring-4 ring-black !important': {},
-    },
-
-    'input[type=checkbox]:checked:focus-visible + &, input[type=checkbox][aria-checked=mixed]:focus-visible + &': {
-      '@apply ring-black !important': {},
-    },
-    '.dark input[type=checkbox]:checked:focus-visible + &,.dark input[type=checkbox][aria-checked=mixed]:focus-visible + &':
-      {
-        '@apply ring-black !important': {},
-      },
-    'input[type=checkbox]:checked:hover:not(:disabled) + &, input[type=checkbox][aria-checked=mixed]:hover:not(:disabled) + &':
-      {
-        '@apply cursor-base': {},
-      },
-
-    // colors
-    ...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-        [`&[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',
-          },
-        },
-      }),
-      {}
-    ),
-
-    // disabled
-    '&-disabled': {
-      '@apply cursor-not-allowed': {},
-
-      '&': {
-        backgroundColor: '#ECECEC',
-      },
-    },
-
-    'input[type=checkbox]:not(:checked) + &-disabled .form-switch-box': {
-      '@apply bg-gray-stroke': {},
-    },
-
-    // sizing
-    '&-sm': {
-      height: '2.16rem',
-      width: '3.6rem',
-    },
-
-    '&-md': {
-      height: '2.4rem',
-      width: '4rem',
-    },
-
-    '&-lg': {
-      height: '2.64rem',
-      width: '4.4rem',
-    },
-  },
-
-  // Knob
-  '.form-switch-box': {
-    '@apply transition-transform ease-in-out duration-150 transform bg-white rounded-full shadow translate-x-0': {},
-
-    // sizing
-    '&-sm': {
-      height: '1.6rem',
-      width: '1.7rem',
-    },
-
-    '&-md': {
-      height: '2rem',
-      width: '2rem',
-    },
-
-    '&-lg': {
-      height: '2.2rem',
-      width: '2.2rem',
-    },
-  },
-});
+module.exports = Switch = (colors) => ({
+  '.form-switch-label': {
+    '@apply inline-block align-middle': {},
+
+    "&[type='hidden']": {
+      '@apply hidden': {},
+
+      '.form-switch': {
+        '@apply hidden': {},
+      },
+    },
+  },
+  '.form-switch': {
+    '@apply rounded-full p-0.5 cursor-base focus:outline-none': {},
+    '@apply bg-gray-stroke dark:bg-neutral-700': {},
+    // Hover
+    //"@apply hover:bg-neutral-300 dark:hover:bg-neutral-600": {},
+
+    border: '0.1rem solid transparent',
+
+    'input[type=checkbox]:checked + &, input[type=checkbox][aria-checked=mixed] + &': {
+      backgroundColor: 'currentColor',
+      '.form-switch-box-sm': {
+        transform: 'translateX(1.42rem)',
+      },
+      '.form-switch-box-md': {
+        transform: 'translateX(1.6rem)',
+      },
+      '.form-switch-box-lg': {
+        transform: 'translateX(1.78rem)',
+      },
+    },
+
+    'input[type=checkbox]:focus-visible + &': {
+      '@apply z-base !important': {},
+      '@apply border-primary !important': {},
+      '@apply ring-4 ring-black !important': {},
+    },
+
+    'input[type=checkbox]:checked:focus-visible + &, input[type=checkbox][aria-checked=mixed]:focus-visible + &': {
+      '@apply ring-black !important': {},
+    },
+    '.dark input[type=checkbox]:checked:focus-visible + &,.dark input[type=checkbox][aria-checked=mixed]:focus-visible + &':
+      {
+        '@apply ring-black !important': {},
+      },
+    'input[type=checkbox]:checked:hover:not(:disabled) + &, input[type=checkbox][aria-checked=mixed]:hover:not(:disabled) + &':
+      {
+        '@apply cursor-base': {},
+      },
+
+    // colors
+    ...colors.reduce(
+      (styles, color) => ({
+        ...styles,
+        [`&[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',
+          },
+        },
+      }),
+      {}
+    ),
+
+    // disabled
+    '&-disabled': {
+      '@apply cursor-not-allowed': {},
+
+      '&': {
+        backgroundColor: '#ECECEC',
+      },
+    },
+
+    'input[type=checkbox]:not(:checked) + &-disabled .form-switch-box': {
+      '@apply bg-gray-stroke': {},
+    },
+
+    // sizing
+    '&-sm': {
+      height: '2.16rem',
+      width: '3.6rem',
+    },
+
+    '&-md': {
+      height: '2.4rem',
+      width: '4rem',
+    },
+
+    '&-lg': {
+      height: '2.64rem',
+      width: '4.4rem',
+    },
+  },
+
+  // Knob
+  '.form-switch-box': {
+    '@apply transition-transform ease-in-out duration-150 transform bg-white rounded-full shadow translate-x-0': {},
+
+    // sizing
+    '&-sm': {
+      height: '1.6rem',
+      width: '1.7rem',
+    },
+
+    '&-md': {
+      height: '2rem',
+      width: '2rem',
+    },
+
+    '&-lg': {
+      height: '2.2rem',
+      width: '2.2rem',
+    },
+  },
+});

package/src/components/tab-menu.js

@@ -1,37 +1,43 @@
-module.exports = TabMenu = () => ({
-    ".TabMenu": {
-        
-        ".tab-wrapper": {
-            display: "flex",
-            flexDirection: "row"
-        },
-
-        ".TabItem": {
-            all: 'unset',
-            height: 65,
-            display: "flex",
-            padding: "0 1rem",
-            marginRight: "5rem",
-            alignItems: "center",
-            position: "relative",
-
-            "&.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 = () => ({
+    ".TabMenu": {
+        
+        ".tab-wrapper": {
+            display: "flex",
+            flexDirection: "row",
+
+            "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"
+        }
+    },
+});
   

package/src/components/table.js

@@ -1,13 +1,13 @@
-module.exports = Table = () => ({
-  '.table': {
-    '@apply min-w-full border-collapse border-gray-stroke divide-gray-lighter table-auto': {},
-
-    '&-item': {
-      '@apply px-6 py-4 border border-gray-stroke whitespace-nowrap': {},
-
-      '&:nth-child(odd)': {
-        '@apply bg-gray-lighter': {},
-      },
-    },
-  },
-});
+module.exports = Table = () => ({
+  '.table': {
+    '@apply min-w-full border-collapse border-gray-stroke divide-gray-lighter table-auto': {},
+
+    '&-item': {
+      '@apply px-6 py-4 border border-gray-stroke whitespace-nowrap': {},
+
+      '&:nth-child(odd)': {
+        '@apply bg-gray-lighter': {},
+      },
+    },
+  },
+});

package/src/components/tag.js

@@ -1,97 +1,97 @@
-function tagOutline(colors) {
-  return {
-    '.tag-outline': {
-      '@apply border bg-transparent border-gray-stroke text-body': {},
-
-      '&[href]': {
-        [`@apply hover:border-hover hover:text-white hover:bg-hover`]: {},
-        [`@apply active:text-white active:bg-hover`]: {},
-        [`@apply focus-visible:text-white focus-visible:ring-4 focus-visible:ring-black focus-visible:bg-hover`]: {},
-      },
-    },
-  };
-}
-
-function tagSolid(colors) {
-  return {
-    '.tag-solid': {
-      '@apply border bg-gray-stroke border-transparent text-white': {},
-
-      '&[href]': {
-        [`@apply hover:text-white hover:bg-hover`]: {},
-        [`@apply active:text-white active:bg-hover`]: {},
-        [`@apply focus-visible:text-white focus-visible:ring-4 focus-visible:ring-black focus-visible:bg-hover`]: {},
-      },
-
-      '.tag-close-button': {
-        '@apply text-white hover:text-body': {},
-      },
-    },
-  };
-}
-
-function tagLight(colors) {
-  return {
-    '.tag-light': {
-      '@apply border border-transparent text-body': {},
-
-      '&[href]': {
-        [`@apply hover:border-hover`]: {},
-        [`@apply active:border-hover`]: {},
-        [`@apply focus-visible:border-hover focus-visible:ring-4 focus-visible:ring-black`]: {},
-      },
-    },
-  };
-}
-
-module.exports = Tag = (colors) => ({
-  '.tag': {
-    '@apply leading-none inline-flex items-center content-center max-h-full rounded-full font-normal outline-none whitespace-nowrap':
-      {},
-    width: 'fit-content',
-    height: 'fit-content',
-    padding: '0 1.145em 0 1.145em',
-    borderRadius: '3.2rem',
-
-    '&-text': {
-      padding: '0.5em 0',
-    },
-
-    '&-sm': {
-      '@apply text-xs': {},
-      minWidth: '1.25rem',
-    },
-
-    '&-md': {
-      '@apply text-sm': {},
-      minWidth: '1.5rem',
-    },
-
-    '&-lg': {
-      '@apply text-base': {},
-      minWidth: '1.75rem',
-    },
-  },
-
-  // variants
-  ...tagOutline(colors),
-  ...tagSolid(colors),
-  ...tagLight(colors),
-
-  '.tag-close-button': {
-    '@apply text-body border-transparent flex items-center justify-center transition-all duration-150 rounded-full outline-none cursor-base':
-      {},
-    fontSize: '1em',
-    padding: '0.36em',
-    marginLeft: '0.25em',
-    marginRight: '-0.55em',
-
-    '&-icon': {
-      fontSize: '1em !important',
-    },
-
-    '&-disabled': {
-      '@apply disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none': {},
-    },
-  },
-});
+function tagOutline(colors) {
+  return {
+    '.tag-outline': {
+      '@apply border bg-transparent border-gray-stroke text-body': {},
+
+      '&[href]': {
+        [`@apply hover:border-hover hover:text-white hover:bg-hover`]: {},
+        [`@apply active:text-white active:bg-hover`]: {},
+        [`@apply focus-visible:text-white focus-visible:ring-4 focus-visible:ring-black focus-visible:bg-hover`]: {},
+      },
+    },
+  };
+}
+
+function tagSolid(colors) {
+  return {
+    '.tag-solid': {
+      '@apply border bg-gray-stroke border-transparent text-white': {},
+
+      '&[href]': {
+        [`@apply hover:text-white hover:bg-hover`]: {},
+        [`@apply active:text-white active:bg-hover`]: {},
+        [`@apply focus-visible:text-white focus-visible:ring-4 focus-visible:ring-black focus-visible:bg-hover`]: {},
+      },
+
+      '.tag-close-button': {
+        '@apply text-white hover:text-body': {},
+      },
+    },
+  };
+}
+
+function tagLight(colors) {
+  return {
+    '.tag-light': {
+      '@apply border border-transparent text-body': {},
+
+      '&[href]': {
+        [`@apply hover:border-hover`]: {},
+        [`@apply active:border-hover`]: {},
+        [`@apply focus-visible:border-hover focus-visible:ring-4 focus-visible:ring-black`]: {},
+      },
+    },
+  };
+}
+
+module.exports = Tag = (colors) => ({
+  '.tag': {
+    '@apply leading-none inline-flex items-center content-center max-h-full rounded-full font-normal outline-none whitespace-nowrap':
+      {},
+    width: 'fit-content',
+    height: 'fit-content',
+    padding: '0 1.145em 0 1.145em',
+    borderRadius: '3.2rem',
+
+    '&-text': {
+      padding: '0.5em 0',
+    },
+
+    '&-sm': {
+      '@apply text-xs': {},
+      minWidth: '1.25rem',
+    },
+
+    '&-md': {
+      '@apply text-sm': {},
+      minWidth: '1.5rem',
+    },
+
+    '&-lg': {
+      '@apply text-base': {},
+      minWidth: '1.75rem',
+    },
+  },
+
+  // variants
+  ...tagOutline(colors),
+  ...tagSolid(colors),
+  ...tagLight(colors),
+
+  '.tag-close-button': {
+    '@apply text-body border-transparent flex items-center justify-center transition-all duration-150 rounded-full outline-none cursor-base':
+      {},
+    fontSize: '1em',
+    padding: '0.36em',
+    marginLeft: '0.25em',
+    marginRight: '-0.55em',
+
+    '&-icon': {
+      fontSize: '1em !important',
+    },
+
+    '&-disabled': {
+      '@apply disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none': {},
+    },
+  },
+});

package/src/components/user-menu.js

@@ -1,23 +1,23 @@
-module.exports = UserMenu = (colors) => ({
-  '.usermenu': {
-    // "@apply mx-sm mt-sm mb-0 px-md py-0 divide-y divide-y-2 divide-gray-300 bg-white border-2 border-white border-solid rounded":
-    '@apply text-body': {},
-    // "@apply ": {},
-    '&-is-open': {
-      // "@apply border-2 border-gray-300 border-solid rounded": {},
-      // "box-shadow": "0px 4px 12px rgba(27, 29, 31, 0.12)",
-    },
-
-    '&-header': {
-      '[aria-expanded="true"] &': {
-        '@apply bg-hover': {},
-      },
-    },
-    '&-item': {
-      '@apply block px-lg py-md lg:px-md lg:py-sm w-full cursor-pointer text-body no-underline': {},
-      '&.active': {
-        '@apply bg-hover text-white no-underline': {},
-      },
-    },
-  },
-});
+module.exports = UserMenu = (colors) => ({
+  '.usermenu': {
+    // "@apply mx-sm mt-sm mb-0 px-md py-0 divide-y divide-y-2 divide-gray-300 bg-white border-2 border-white border-solid rounded":
+    '@apply text-body': {},
+    // "@apply ": {},
+    '&-is-open': {
+      // "@apply border-2 border-gray-300 border-solid rounded": {},
+      // "box-shadow": "0px 4px 12px rgba(27, 29, 31, 0.12)",
+    },
+
+    '&-header': {
+      '[aria-expanded="true"] &': {
+        '@apply bg-hover': {},
+      },
+    },
+    '&-item': {
+      '@apply block px-lg py-md lg:px-md lg:py-sm w-full cursor-pointer text-body no-underline': {},
+      '&.active': {
+        '@apply bg-hover text-white no-underline': {},
+      },
+    },
+  },
+});