@sk-web-gui/core 0.1.25 → 0.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.25",
+  "version": "0.1.28",
   "license": "MIT",
   "main": "src/index.js",
   "files": [
@@ -31,5 +31,5 @@
     "postcss-import": "^14.0.2",
     "tailwindcss": "^2.2.4"
   },
-  "gitHead": "98dc00be73bb80955d4b41dd19c98b8ee44fceb7"
+  "gitHead": "15182a6ef4eb5d75181591a9285bc7c475cd07c9"
 }

package/src/components/accordion.js

@@ -7,7 +7,11 @@ module.exports = Accordion = () => ({
 
             "[aria-expanded=\"true\"] &": {
                 "@apply bg-hover": {}
-            }
+            },
+
+            "&-icon": {
+                "@apply ml-auto !text-2xl": {},
+            },
         },
 
         "&-is-open &-header": {

package/src/components/button.js

@@ -2,10 +2,10 @@ function buttonSolid(colors) {
   return {
     "&-solid": {
       //"@apply text-": {},
-      "@apply border border-gray-stroke": {},
-      "@apply text-black bg-white": {},
+      "@apply font-semibold border border-gray-stroke": {},
+      "@apply text-body bg-white": {},
       /* hover */
-      "@apply hover:text-white hover:bg-hover": {},
+      "@apply hover:text-white hover:bg-hover hover:border-primary-active": {},
       /* focus */
       "@apply focus-visible:z-base": {},
       "@apply focus-visible:border-primary": {},
@@ -24,13 +24,6 @@ function buttonSolid(colors) {
       /* dark active */
       "@apply dark:active:bg-neutral-900 dark:active:border-neutral-600": {},
 
-      /* "&[data-color=\"primary\"]": {
-        "@apply text-white bg-primary": {},
-        "@apply hover:text-white hover:bg-hover": {},
-        "@apply active:text-white active:bg-hover": {},
-        "@apply focus-visible:ring-4 focus-visible:ring-black": {},
-      }, */
-
       ...colors.reduce(
         (styles, color) => ({
           ...styles,
@@ -65,6 +58,16 @@ function buttonSolid(colors) {
         {}
       ),
 
+      "&[data-color='primary']": {
+        "@apply border-primary hover:border-primary-active": {},
+      },
+
+      "&.btn": {
+        "&-disabled": {
+          "@apply disabled:border-gray-stroke hover:border-gray-stroke": {},
+        },
+      },
+
     },
   };
 }
@@ -72,10 +75,10 @@ function buttonSolid(colors) {
 function buttonOutline(colors) {
   return {
     "&-outline": {
-      "@apply border border-neutral-200": {},
+      "@apply font-semibold border border-gray-stroke": {},
       "@apply text-body bg-transparent": {},
       /* hover */
-      "@apply hover:bg-neutral-100 hover:border-neutral-300": {},
+      "@apply hover:text-white hover:bg-primary-active hover:border-primary-active": {},
       /* focus */
       "@apply focus-visible:z-base": {},
       "@apply focus-visible:border-primary-500": {},
@@ -99,7 +102,7 @@ function buttonOutline(colors) {
             [`@apply border-current`]: {},
             [`@apply text-${color}-600 bg-transparent`]: {},
             /* hover */
-            [`@apply hover:bg-${color}-50`]: {},
+            [`@apply hover:text-white hover:bg-${color}-active hover:border-${color}-active`]: {},
             /* focus */
             [`@apply focus-visible:border-${color}-500`]: {},
             [`@apply focus-visible:ring-${color}-500`]: {},
@@ -122,6 +125,13 @@ function buttonOutline(colors) {
         }),
         {}
       ),
+
+      "&.btn": {
+        "&-disabled": {
+          "@apply disabled:border-gray-stroke hover:border-gray-stroke": {},
+        },
+      },
+      
     },
   };
 }
@@ -252,7 +262,7 @@ module.exports = Button = (colors) => ({
   ".btn": {
     "@apply relative": {},
     "@apply m-0": {},
-    "@apply inline-flex items-center justify-center flex-shrink-0 align-middle": {},
+    "@apply rounded-lg inline-flex items-center justify-center flex-shrink-0 align-middle": {},
     "@apply font-medium leading-tight": {},
     transitionProperty: "background-color, border-color, color, fill, stroke, box-shadow",
     "@apply	duration-75 ease-out": {},
@@ -260,7 +270,10 @@ module.exports = Button = (colors) => ({
     "@apply focus-visible:outline-none": {},
 
     padding: "1.2rem 3.2rem",
-    borderRadius: "3.2rem",
+
+    "&[data-rounded='true']": {
+      borderRadius: "3.2rem"
+    },
 
     // sizing
     "&-sm": {
@@ -282,7 +295,7 @@ module.exports = Button = (colors) => ({
 
     "&-disabled": {
       "@apply disabled:shadow-none disabled:cursor-not-allowed": {},
-      "@apply disabled:text-black disabled:bg-gray-light !important": {},
+      "@apply disabled:text-gray disabled:bg-gray-light !important": {},
     },
 
     // variants

package/src/components/calendar.js

@@ -0,0 +1,81 @@
+module.exports = Calendar = () => ({
+
+    // Month row
+    ".MuiCalendarPicker-root > div:first-of-type": {
+        "@apply ml-2 -mr-2 px-10": {},
+    },
+
+    // Month
+    ".MuiCalendarPicker-root > div:first-of-type > div": {
+        "@apply font-bold text-base text-body": {},
+    },
+
+    // Arrow switchers
+    ".MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root .MuiSvgIcon-root": {
+        "@apply text-body text-lg": {},
+    },
+    ".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": {},
+    },
+    ".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": {},
+    },
+    // Disabled arrow
+    ".MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root[disabled] .MuiSvgIcon-root": {
+        "@apply text-gray-stroke": {},
+    },
+
+    // Weekdays
+    ".MuiCalendarPicker-root div > div:first-of-type > .MuiTypography-root": {
+        "@apply font-bold text-body text-base":{},
+    },
+
+    // Days-Grid
+    ".MuiCalendarPicker-root > div:last-of-type > div:last-of-type": {
+        "@apply min-h-min pb-6":{},
+    },
+
+    // Day picking
+    ".MuiCalendarPicker-root .MuiPickersDay-root": {
+        "@apply text-base":{},
+    },
+    ".MuiCalendarPicker-root .Mui-disabled": {
+        "@apply text-gray-stroke":{},
+    },
+
+    // Day picked
+    ".MuiCalendarPicker-root .MuiButtonBase-root.MuiPickersDay-root.Mui-selected": {
+        "@apply bg-background-one text-body focus-visible:bg-background-one hover:bg-background-one focus:bg-background-one": {},
+    },
+
+    // Day hovered
+    ".MuiCalendarPicker-root .MuiPickersDay-root, .MuiCalendarPicker-root .MuiPickersDay-root.MuiPickersDay-today": {
+        "@apply border-primary border-solid focus-visible:border hover:bg-transparent focus:bg-transparent hover:border": {},
+    },
+
+    // today
+    ".MuiCalendarPicker-root .MuiPickersDay-root.MuiPickersDay-today": {
+        "@apply border-0 hover:border":{},
+    },
+
+    ".calendar": {
+        // Input field
+        ".datepicker-input": {
+            "@apply relative": {},
+        },
+
+        ".datepicker-input input":  {
+            "@apply pl-20 cursor-pointer":{},
+        },
+
+        ".datepicker-input-icon": {
+            "@apply pointer-events-none absolute m-6 top-0 left-0 text-xl fill-body":{},
+        },
+    },
+
+    
+});

package/src/components/cookie-consent.js

@@ -4,6 +4,10 @@ module.exports = CookieConsent = () => ({
 
         "&-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": {

package/src/components/forms.js

@@ -242,7 +242,15 @@ module.exports = Forms = (colors) => ({
   },
 
   ".form-select": {
-    //"@apply pr-10": {},
+    // "@apply ":{}
+
+    "&-option": {
+        "@apply rounded-none cursor-default hover:text-white focus-visible:text-white hover:bg-primary focus-visible:bg-primary": {},
+    
+        "&.active": {
+          "@apply bg-primary text-white": {},
+        }
+    }
   },
 
   ...formInputGroup(),

package/src/components/link.js

@@ -6,16 +6,11 @@ module.exports = Link = () => ({
 
     "@apply hover:text-primary-active": {},
 
-    "&[target='_blank']": {
-      "&::after": {
-        fontFamily: "Material Icons Outlined",
-        display: "inline-block",
-        position: "relative",
-        content: "'launch'",
-        lineHeight: "1",
-        marginLeft: ".25em",
-        verticalAlign: "text-top",
-      },
+    "&-external-icon": {
+      fontSize: "0.875em !important",
+      lineHeight: "1",
+      marginLeft: ".25em",
+      verticalAlign: "text-top",
     },
 
     "&-disabled": {

package/src/components/message.js

@@ -4,8 +4,6 @@ module.exports = Message = () => ({
     "@apply text-body bg-white border-l-4": {},
     // dark
     "@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600": {},
-    "minWidth": "520px",
-    "width": "520px",
 
     "&-text": {
       "@apply text-left flex-grow": {},
@@ -54,7 +52,7 @@ module.exports = Message = () => ({
     marginRight: "-0.55em",
 
     "&-icon": {
-      fontSize: "1em"
+      "@apply !text-xl": {},
     },
 
     "&-disabled": {

package/src/components/pagination.js

@@ -57,8 +57,8 @@ module.exports = Pagination = () => ({
       "&-icon": {
         "@apply m-1 align-text-bottom leading-none flex items-center": {},
 
-        ".material-icons-outlined": {
-          fontSize: ".675em",
+        ".MuiSvgIcon-root": {
+          fontSize: "1em",
         },
       },
     },

package/src/components/switch.js

@@ -1,6 +1,16 @@
 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": {},

package/src/components/tag.js

@@ -85,7 +85,7 @@ module.exports = Tag = (colors) => ({
     marginRight: "-0.55em",
 
     "&-icon": {
-      fontSize: "1em"
+      fontSize: "1em !important"
     },
 
     "&-disabled": {

package/src/components/user-menu.js

@@ -1,7 +1,7 @@
 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 drop-shadow-none shadow-none filter-none": {},
+    "@apply text-body": {},
     // "@apply ": {},
     "&-is-open": {
       // "@apply border-2 border-gray-300 border-solid rounded": {},

package/src/components/zebratable.js

@@ -23,6 +23,10 @@ module.exports = ZebraTable = () => ({
 
             "&-icon": {
                 "@apply inline-flex pl-sm": {},
+
+                ".MuiSvgIcon-root": {
+                    "@apply !text-lg": {},
+                },
     
     
                 "&-sort": {

package/src/index.js

@@ -11,6 +11,7 @@ const ButtonGroup = require("./components/button-group");
 const Checkbox = require("./components/checkbox");
 const Dot = require("./components/dot");
 const Forms = require("./components/forms");
+const Calendar = require("./components/calendar");
 const IconButton = require("./components/icon-button");
 const Icon = require("./components/icon");
 const Link = require("./components/link");
@@ -42,6 +43,7 @@ const components = [
   Checkbox,
   Dot,
   Forms,
+  Calendar,
   IconButton,
   Icon,
   Link,