@sk-web-gui/core 0.1.33 → 0.1.35

package/src/components/card.js

@@ -1,55 +1,54 @@
 module.exports = Card = () => ({
-
-    ".avatar": {
-        "@apply bg-primary-light text-primary rounded-full p-4": {},
-    },
-
-    ".card-list": {
-        "@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10": {},
-        //"@apply text-center": {},
-        //"@apply justify-center items-center": {},
-    },
-
-    ".card": {
-        "@apply p-lg rounded shadow-lg bg-white relative": {},
-        "@apply p-0": {},
-        //padding: "2.4rem",
-
-        // clickable
-        "&-clickable": {
-            // Hover
-            "@apply hover:shadow-xl hover:cursor-pointer": {},
-        },
-
-        // "@apply bg-neutral-200 border border-neutral-100 text-body": {},
-        // dark
-        //"@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300": {},
-    },
-    ".card-outlined": {
-        "@apply border-2 border-gray-stroke": {},
-    },
-    ".card-border-top": {
-        "@apply border-t-4 border-t-primary": {},
-    },    
-
-    ".card-body": {
-        "@apply text-body p-8": {},
-    },
-
-    ".card-image": {
-        "@apply object-cover": {},
-        "width": "100%",
-        "height": "250px",
+  '.avatar': {
+    '@apply bg-primary-light text-primary rounded-full p-4': {},
+  },
+
+  '.card-list': {
+    '@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10': {},
+    //"@apply text-center": {},
+    //"@apply justify-center items-center": {},
+  },
+
+  '.card': {
+    '@apply p-lg rounded shadow-lg bg-white relative': {},
+    '@apply p-0': {},
+    //padding: "2.4rem",
+
+    // clickable
+    '&-clickable': {
+      // Hover
+      '@apply hover:shadow-xl hover:cursor-pointer': {},
     },
 
-    ".card-link": {
-        "&::after": {
-            "content": "''",
-            "position": "absolute",
-            "left": "0",
-            "top": "0",
-            "right": "0",
-            "bottom": "0",
-        },
+    // "@apply bg-neutral-200 border border-neutral-100 text-body": {},
+    // dark
+    //"@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300": {},
+  },
+  '.card-outlined': {
+    '@apply border-2 border-gray-stroke': {},
+  },
+  '.card-border-top': {
+    '@apply border-t-4 border-t-primary': {},
+  },
+
+  '.card-body': {
+    '@apply text-body p-8': {},
+  },
+
+  '.card-image': {
+    '@apply object-cover': {},
+    width: '100%',
+    height: '250px',
+  },
+
+  '.card-link': {
+    '&::after': {
+      content: "''",
+      position: 'absolute',
+      left: '0',
+      top: '0',
+      right: '0',
+      bottom: '0',
     },
+  },
 });

package/src/components/checkbox.js

@@ -1,43 +1,43 @@
 const svgToDataUri = require('mini-svg-data-uri');
 
 module.exports = Checkbox = (colors, theme) => ({
-  ".form-checkbox": {
+  '.form-checkbox': {
     //"@apply rounded shadow-sm": {},
-    backgroundColor: "inherit",
-    "@apply border-gray-stroke focus:bg-white": {},
+    backgroundColor: 'inherit',
+    '@apply border-gray-stroke focus:bg-white': {},
 
-    "&[aria-invalid=true]": {
-      "--tw-border-opacity": "1",
-      "borderColor": "rgba(220, 38, 38, var(--tw-border-opacity))",
+    '&[aria-invalid=true]': {
+      '--tw-border-opacity': '1',
+      borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',
     },
-    "&[aria-invalid=true]:hover": {
-      "--tw-border-opacity": "1",
-      "border-color": "rgba(220, 38, 38, var(--tw-border-opacity))",
+    '&[aria-invalid=true]:hover': {
+      '--tw-border-opacity': '1',
+      'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',
     },
     // dark colors
-    "@apply dark:border-neutral-400": {},
-    ".dark &[aria-invalid=true]": {
-      "--tw-border-opacity": "1",
-      "borderColor": "rgba(248, 113, 113, var(--tw-border-opacity))",
+    '@apply dark:border-neutral-400': {},
+    '.dark &[aria-invalid=true]': {
+      '--tw-border-opacity': '1',
+      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
     },
-    ".dark &[aria-invalid=true]:hover": {
-      "--tw-border-opacity": "1",
-      "borderColor": "rgba(248, 113, 113, var(--tw-border-opacity))",
+    '.dark &[aria-invalid=true]:hover': {
+      '--tw-border-opacity': '1',
+      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
     },
 
-    "@media (prefers-color-scheme: dark)": {
-      "&[aria-invalid=true]": {
-        "--tw-border-opacity": "1",
-        "borderColor": "rgba(220, 38, 38, var(--tw-border-opacity))",
+    '@media (prefers-color-scheme: dark)': {
+      '&[aria-invalid=true]': {
+        '--tw-border-opacity': '1',
+        borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',
       },
-      "&[aria-invalid=true]:hover": {
-        "--tw-border-opacity": "1",
-        "border-color": "rgba(220, 38, 38, var(--tw-border-opacity))",
+      '&[aria-invalid=true]:hover': {
+        '--tw-border-opacity': '1',
+        'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',
       },
     },
 
-    "&:checked": {
-      "@apply text-white bg-white border-primary": {},
+    '&:checked': {
+      '@apply text-white bg-white border-primary': {},
       [`@apply focus-visible:border-primary focus-visible:ring-primary`]: {},
 
       backgroundImage: `url("${svgToDataUri(
@@ -48,15 +48,14 @@ module.exports = Checkbox = (colors, theme) => ({
 
     [`&[data-color="primary"]`]: {
       //[`@apply text-primary`]: {},
-
       // dark
       //[`@apply dark:text-primary`]: {},
       //[`@apply dark:focus-visible:border-primary-400 dark:focus-visible:ring-primary-400`]: {},
     },
 
     // Fix focus stylign
-    "&:checked:hover, &:checked:focus": {
-      "@apply bg-white border-primary": {},
+    '&:checked:hover, &:checked:focus': {
+      '@apply bg-white border-primary': {},
     },
 
     // colors
@@ -77,51 +76,51 @@ module.exports = Checkbox = (colors, theme) => ({
       {}
     ),*/
 
-    "@apply dark:focus-visible:ring-offset-neutral-900": {},
+    '@apply dark:focus-visible:ring-offset-neutral-900': {},
 
     // sizing
-    "&-sm": {
-      width: "1.4rem",
-      height: "1.4rem",
+    '&-sm': {
+      width: '1.4rem',
+      height: '1.4rem',
     },
 
-    "&-md": {
-      width: "1.6rem",
-      height: "1.6rem",
+    '&-md': {
+      width: '1.6rem',
+      height: '1.6rem',
       //"@apply w-4 h-4": {},
     },
 
-    "&-lg": {
-      width: "1.8rem",
-      height: "1.8rem",
+    '&-lg': {
+      width: '1.8rem',
+      height: '1.8rem',
     },
 
     // disabled
-    "&-disabled": {
-      backgroundColor: "#ECECEC",
+    '&-disabled': {
+      backgroundColor: '#ECECEC',
       //"@apply disabled:bg-gray-stroke": {},
       //"@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300": {},
       //"@apply dark:disabled:border-transparent dark:disabled:bg-white/20 dark:disabled:hover:text-white/20": {},
     },
 
     // label
-    "&-label": {
-      "@apply text-body select-none text-sm": {},
-      marginLeft: "0.8rem",
+    '&-label': {
+      '@apply text-body select-none text-sm': {},
+      marginLeft: '0.8rem',
       //"@apply text-black": {},
       // dark colors
-      "@apply dark:text-neutral-100": {},
+      '@apply dark:text-neutral-100': {},
 
-      "&-sm": {
-        "@apply text-xs": {},
+      '&-sm': {
+        '@apply text-xs': {},
       },
 
-      "&-md": {
-        "@apply text-sm": {},
+      '&-md': {
+        '@apply text-sm': {},
       },
 
-      "&-lg": {
-        "@apply text-base": {},
+      '&-lg': {
+        '@apply text-base': {},
       },
     },
   },

package/src/components/code.js

@@ -1,9 +1,9 @@
 module.exports = Code = () => ({
-  ".code": {
-    "@apply inline-flex justify-center items-center capitalize text-xs rounded-sm font-mono break-all": {},
-    "@apply bg-neutral-200 border border-neutral-100 text-body": {},
+  '.code': {
+    '@apply inline-flex justify-center items-center capitalize text-xs rounded-sm font-mono break-all': {},
+    '@apply bg-neutral-200 border border-neutral-100 text-body': {},
     // dark
-    "@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300": {},
-    padding: "2px 3px 1px",
+    '@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300': {},
+    padding: '2px 3px 1px',
   },
 });

package/src/components/cookie-consent.js

@@ -1,30 +1,30 @@
 module.exports = CookieConsent = () => ({
-    ".cookie-consent": {
-        "@apply min-w-full fixed flex justify-center z-10 bottom-0 left-0 right-0 bg-white": {},
+  '.cookie-consent': {
+    '@apply min-w-full fixed flex justify-center z-10 bottom-0 left-0 right-0 bg-white': {},
 
-        "&-close-btn": {
-            "@apply cursor-pointer hover:text-primary-active absolute right-8 top-6 border border-transparent focus-visible:border-black flex self-center": {},
+    '&-close-btn': {
+      '@apply cursor-pointer hover:text-primary-active absolute right-8 top-6 border border-transparent focus-visible:border-black flex self-center':
+        {},
 
-            "&-icon": {
-                "@apply !text-2xl": {}
-            },
-        },
-
-        "&-content-wrapper": {
-            "@apply flex flex-col container py-12 px-4 bg-white relative": {},
-        },
+      '&-icon': {
+        '@apply !text-2xl': {},
+      },
+    },
 
-        "&-title": {
-            "@apply text-2xl leading-2xl mb-1 mt-4": {},
-        },
+    '&-content-wrapper': {
+      '@apply flex flex-col container py-12 px-4 bg-white relative': {},
+    },
 
-        "&-description": {
-            "@apply text-base leading-base mb-8": {},
-        },
+    '&-title': {
+      '@apply text-2xl leading-2xl mb-1 mt-4 break-words': {},
+    },
 
-        "&-btn-wrapper": {
-            "@apply flex flex-col space-y-4 lg:block lg:space-y-0 lg:space-x-4": {},
-        },
+    '&-description': {
+      '@apply text-base leading-base mb-8': {},
+    },
 
+    '&-btn-wrapper': {
+      '@apply flex flex-col space-y-4 lg:block lg:space-y-0 lg:space-x-4': {},
     },
+  },
 });

package/src/components/divider.js

@@ -1,12 +1,12 @@
 module.exports = Divider = () => ({
-  ".divider": {
-    "@apply border-0 border-gray-stroke": {},
+  '.divider': {
+    '@apply border-0 border-gray-stroke': {},
     //borderColor: "inherit",
-    "&-vertical": {
-      "@apply border-l border-solid h-auto mx-2": {},
+    '&-vertical': {
+      '@apply border-l border-solid h-auto mx-2': {},
     },
-    "&-horizontal": {
-      "@apply border-b border-solid w-auto my-2": {},
+    '&-horizontal': {
+      '@apply border-b border-solid w-auto my-2': {},
     },
   },
 });

package/src/components/dot.js

@@ -1,8 +1,8 @@
 module.exports = Dot = (colors) => ({
-  ".dot": {
-    "@apply relative inline-flex rounded-full": {},
-    "&-solid": {
-      "@apply bg-neutral-500": {},
+  '.dot': {
+    '@apply relative inline-flex rounded-full': {},
+    '&-solid': {
+      '@apply bg-neutral-500': {},
 
       ...colors.reduce(
         (styles, color) => ({
@@ -14,9 +14,9 @@ module.exports = Dot = (colors) => ({
         {}
       ),
 
-      "&.dot-bordered": {
-        "@apply border-2 border-white": {},
-        "@apply dark:border-neutral-800": {},
+      '&.dot-bordered': {
+        '@apply border-2 border-white': {},
+        '@apply dark:border-neutral-800': {},
       },
 
       ...colors.reduce(
@@ -31,9 +31,9 @@ module.exports = Dot = (colors) => ({
       ),
     },
 
-    "&-outline": {
-      "@apply bg-white border-2 border-neutral-500": {},
-      "@apply dark:bg-neutral-800": {},
+    '&-outline': {
+      '@apply bg-white border-2 border-neutral-500': {},
+      '@apply dark:bg-neutral-800': {},
       ...colors.reduce(
         (styles, color) => ({
           ...styles,
@@ -45,40 +45,40 @@ module.exports = Dot = (colors) => ({
       ),
     },
 
-    "&-3xs": {
-      "@apply w-1.5 h-1.5": {},
+    '&-3xs': {
+      '@apply w-1.5 h-1.5': {},
     },
 
-    "&-2xs": {
-      "@apply w-2 h-2": {},
+    '&-2xs': {
+      '@apply w-2 h-2': {},
     },
 
-    "&-xs": {
-      "@apply w-2.5 h-2.5": {},
+    '&-xs': {
+      '@apply w-2.5 h-2.5': {},
     },
 
-    "&-sm": {
-      "@apply w-3 h-3": {},
+    '&-sm': {
+      '@apply w-3 h-3': {},
     },
 
-    "&-md": {
-      "@apply w-3.5 h-3.5": {},
+    '&-md': {
+      '@apply w-3.5 h-3.5': {},
     },
 
-    "&-lg": {
-      "@apply w-4 h-4": {},
+    '&-lg': {
+      '@apply w-4 h-4': {},
     },
 
-    "&-xl": {
-      "@apply w-5 h-5": {},
+    '&-xl': {
+      '@apply w-5 h-5': {},
     },
 
-    "&-2xl": {
-      "@apply w-6 h-6": {},
+    '&-2xl': {
+      '@apply w-6 h-6': {},
     },
 
-    "&-3xl": {
-      "@apply w-8 h-8": {},
+    '&-3xl': {
+      '@apply w-8 h-8': {},
     },
   },
 });

package/src/components/footer.js

@@ -1,7 +1,7 @@
 module.exports = Footer = (colors) => ({
   '.footer': {
     '&-innerwrapper': {
-      '@apply bg-gray text-white py-12 px-2 sm:p-12': {},
+      '@apply bg-gray text-white py-12': {},
 
       ...colors.reduce(
         (styles, color) => ({
@@ -15,11 +15,11 @@ module.exports = Footer = (colors) => ({
     },
 
     '&-content': {
-      '@apply container md:flex items-center justify-center m-auto': {},
+      '@apply px-md md:flex items-center justify-center m-auto': {},
     },
 
     '&-bottomlinks': {
-      '@apply bg-gray-middle text-body py-12 px-2 sm:p-12': {},
+      '@apply bg-gray-middle text-body py-md': {},
 
       ...colors.reduce(
         (styles, color) => ({
@@ -32,7 +32,10 @@ module.exports = Footer = (colors) => ({
       ),
 
       '&-container': {
-        '@apply container flex items-start md:items-center justify-center m-auto md:space-x-10 flex-col md:flex-row': {},
+        '@apply px-md flex items-center items-center justify-center m-auto md:space-x-10 flex-col md:flex-row': {},
+        '> *': {
+          '@apply text-body text-sm leading-sm py-sm': {},
+        },
       },
     },
   },