@sk-web-gui/core 0.1.25 → 0.1.26

package/package.json

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

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/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/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,