@sk-web-gui/core 0.1.11 → 0.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.11",
+  "version": "0.1.14",
   "license": "MIT",
   "main": "src/index.js",
   "files": [
@@ -31,5 +31,5 @@
     "postcss-import": "^14.0.2",
     "tailwindcss": "^2.2.4"
   },
-  "gitHead": "2aea5f0eee07746231bea3ef99993620c0c0dc8f"
+  "gitHead": "ebb235c3ed87619909da8bd14417e1ccfb2bf594"
 }

package/src/components/accordion.js

@@ -1,9 +1,5 @@
 module.exports = Accordion = () => ({
-
     ".accordion": {
-        //"@apply": {},
-        //padding: "2.4rem",
-        
         "@apply border border-gray-stroke": {},
 
         "&-header": {
@@ -19,9 +15,10 @@ module.exports = Accordion = () => ({
         },
 
         "&-toggle": {
-            "@apply flex text-left text-lg m-4 inline-block": {},
+            "@apply flex inline-block text-lg leading-lg text-left text-lg mx-lg my-md": {},
+            fontWeight: "bold",
             //"@apply focus-visible:shadow shadow-lg": {},
-            "&:focus-visible, &:focus": {
+            "&:focus-visible": {
                 boxShadow: "0 0 0 0.4rem #fff!important",
                 outline: "0",
                 //"@apply border-4": {},
@@ -29,13 +26,17 @@ module.exports = Accordion = () => ({
         },
 
         "&-body": {
-            "@apply transition-all h-0 hidden overflow-hidden": {},
-            transitionProperty: "height",
+            "@apply h-0 overflow-hidden m-lg": {},
+            transitionProperty: "height, padding, margin",
             transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
-            transitionDuration: "150m",
+            transitionDuration: "180ms",
+
+            "&[aria-hidden=\"true\"], &[data-hidden=\"true\"]": {
+                "@apply my-0": {},
+            },
 
             "&[aria-hidden=\"false\"], &[data-hidden=\"false\"]": {
-                "@apply block h-auto p-lg": {},
+                "@apply block h-auto": {},
             },
         },
     },

package/src/components/table.js

@@ -10,4 +10,4 @@ module.exports = Table = () => ({
             }
         }
     },
-});
+});

package/src/components/zebratable.js

@@ -0,0 +1,59 @@
+module.exports = ZebraTable = () => ({
+    ".zebratable": {
+        "@apply w-full text-left table-auto": {},
+
+
+        "&-thead": {
+
+            "&-tr": {
+                "@apply text-sm hidden lg:table-row": {},
+            },
+
+            "&-th": {
+                "@apply py-sm first-of-type:pl-lg": {},
+
+                "&[data-isColumnSortable='true']": {
+                    "@apply py-sm cursor-pointer": {},
+                },
+            },
+        },
+
+        "&-icon": {
+            "&-sort": {
+                "@apply ml-2 text-black transform rotate-90": {},
+    
+                "&[data-sortmodeascending='false']": {
+                    "@apply -rotate-90": {},
+                },
+            },
+
+            "&-more": {
+                "@apply pl-sm text-gray-300": {},
+            },
+        },
+
+        "&-sortbutton": {
+            "@apply flex items-center": {},
+        },
+
+        ".material-icons-outlined": {
+            fontSize: "1.25em",
+        },
+
+        "&-tbody": {
+            "@apply lg:bg-white": {},
+
+            "&-tr": {
+                "@apply bg-white lg:even:bg-white lg:odd:bg-gray-100 px-md py-md md:px-lg md:py-lg my-lg first-of-type:mt-0 block shadow-md lg:shadow-none lg:table-row lg:my-0 lg:py-0 lg:px-lg": {},
+            },
+
+            "&-td": {
+                "@apply empty:hidden py-4 px-sm lg:px-0 first-of-type:pl-sm lg:first-of-type:pl-lg last-of-type:px-0 lg:last-of-type:pr-lg last-of-type:text-right block lg:table-cell even:bg-white odd:bg-gray-100 last-of-type:bg-transparent lg:even:bg-transparent lg:odd:bg-transparent": {},
+            },
+        },
+
+        "&-paginationwrapper": {
+            "@apply px-lg my-lg w-full text-lg flex justify-center lg:justify-start": {},
+        },
+    },
+});

package/src/index.js

@@ -22,6 +22,7 @@ const Button = require("./components/button");
 const Accordion = require("./components/accordion");
 const Card = require("./components/card");
 const Table = require("./components/table");
+const ZebraTable = require("./components/zebratable");
 
 const Modal = require("./components/modal");
 const CookieConsent = require("./components/cookie-consent");
@@ -49,6 +50,7 @@ const components = [
   Switch,
 
   Table,
+  ZebraTable,
   CookieConsent,
   Modal,
 
@@ -107,12 +109,15 @@ module.exports = plugin.withOptions(
           "h1,h2,h3,h4,h5,h6": {
             "@apply font-bold": {},
           },
-          h1: { "@apply text-5xl leading-5xl": {} },
-          h2: { "@apply text-4xl leading-4xl": {} },
-          h3: { "@apply text-3xl leading-3xl": {} },
-          h4: { "@apply text-2xl leading-2xl": {} },
-          h5: { "@apply text-xl leading-xl": {} },
-          h6: { "@apply text-lg leading-lg": {} },
+          small: {
+            fontSize: "1.4rem",
+          },
+          h1: { "@apply text-3xl leading-3xl": {} },
+          h2: { "@apply text-2xl leading-2xl": {} },
+          h3: { "@apply text-xl leading-xl": {} },
+          h4: { "@apply text-lg leading-lg": {} },
+          h5: { "@apply text-base leading-base": {} },
+          h6: { "@apply text-sm leading-sm": {} },
           p: { "@apply my-4": {} },
         });
       }
@@ -139,6 +144,7 @@ module.exports = plugin.withOptions(
             gray: {
               DEFAULT: "#4b4b4b",
               stroke: "#939393",
+              middle: "#ECECEC",
               light: "#F4F4F4",
               lighter: "#F9F9F9",
             },