@sk-web-gui/core 0.1.38 → 0.1.40

package/src/components/radio.js

@@ -1,104 +1,104 @@
-module.exports = Radio = (colors) => ({
-  '.form-radio': {
-    '@apply shadow-sm': {},
-    backgroundColor: 'inherit',
-    '@apply border-neutral-300': {},
-    '&[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))',
-    },
-    // dark colors
-    '@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))',
-    },
-
-    '@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))',
-      },
-    },
-
-    '&:checked': {
-      borderColor: 'transparent',
-    },
-
-    // colors
-    ...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-        [`&[data-color="${color}"]`]: {
-          [`@apply text-${color}-600`]: {},
-          [`@apply focus-visible:border-${color}-600 focus-visible:ring-${color}-600`]: {},
-          [`@apply dark:text-${color}-500`]: {},
-          [`@apply dark:focus-visible:border-${color}-400 dark:focus-visible:ring-${color}-400`]: {},
-        },
-      }),
-      {}
-    ),
-
-    '@apply dark:focus-visible:ring-offset-neutral-900': {},
-
-    // sizing
-    '&-sm': {
-      '@apply w-3 h-3': {},
-    },
-
-    '&-md': {
-      '@apply w-4 h-4': {},
-    },
-
-    '&-lg': {
-      '@apply w-5 h-5': {},
-    },
-
-    '&-xl': {
-      '@apply w-6 h-6': {},
-    },
-
-    // disabled
-    '&-disabled': {
-      '@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 ml-2 select-none text-sm': {},
-      '@apply text-body': {},
-      // dark colors
-      '@apply dark:text-neutral-100': {},
-
-      '&-sm': {
-        '@apply text-xs': {},
-      },
-
-      '&-md': {
-        '@apply text-sm': {},
-      },
-
-      '&-lg': {
-        '@apply text-base': {},
-      },
-
-      '&-xl': {
-        '@apply text-lg': {},
-      },
-    },
-  },
-});
+module.exports = Radio = (colors) => ({
+  '.form-radio': {
+    '@apply shadow-sm': {},
+    backgroundColor: 'inherit',
+    '@apply border-neutral-300': {},
+    '&[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))',
+    },
+    // dark colors
+    '@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))',
+    },
+
+    '@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))',
+      },
+    },
+
+    '&:checked': {
+      borderColor: 'transparent',
+    },
+
+    // colors
+    ...colors.reduce(
+      (styles, color) => ({
+        ...styles,
+        [`&[data-color="${color}"]`]: {
+          [`@apply text-${color}-600`]: {},
+          [`@apply focus-visible:border-${color}-600 focus-visible:ring-${color}-600`]: {},
+          [`@apply dark:text-${color}-500`]: {},
+          [`@apply dark:focus-visible:border-${color}-400 dark:focus-visible:ring-${color}-400`]: {},
+        },
+      }),
+      {}
+    ),
+
+    '@apply dark:focus-visible:ring-offset-neutral-900': {},
+
+    // sizing
+    '&-sm': {
+      '@apply w-3 h-3': {},
+    },
+
+    '&-md': {
+      '@apply w-4 h-4': {},
+    },
+
+    '&-lg': {
+      '@apply w-5 h-5': {},
+    },
+
+    '&-xl': {
+      '@apply w-6 h-6': {},
+    },
+
+    // disabled
+    '&-disabled': {
+      '@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 ml-2 select-none text-sm': {},
+      '@apply text-body': {},
+      // dark colors
+      '@apply dark:text-neutral-100': {},
+
+      '&-sm': {
+        '@apply text-xs': {},
+      },
+
+      '&-md': {
+        '@apply text-sm': {},
+      },
+
+      '&-lg': {
+        '@apply text-base': {},
+      },
+
+      '&-xl': {
+        '@apply text-lg': {},
+      },
+    },
+  },
+});

package/src/components/search-bar.js

@@ -1,45 +1,45 @@
-module.exports = SearchBar = () => ({
-    ".SearchBar": {
-        position: "relative",
-        border: "1px solid #939393",
-        borderRadius: 200,
-        overflow: "hidden",
-        height: 44,
-        
-        "input": {
-            border: "none",
-            position: "absolute",
-            top: 0,
-            left: 0,
-            flexGrow: 1,
-            width: "100%",
-            height: "inherit",
-            fontFamily: "Arial",
-            fontStyle: "normal",
-            fontWeight: 400,
-            fontSize: 14,
-            lineHeight: 20,
-            color: "#4B4B4B",
-            padding: "0px 44px 0px 16px"
-        },
-        
-        ".search-icon": {
-            border: "none",
-            display: "flex",
-            height: 42,
-            width: 44,
-            justifyContent: "center",
-            alignItems: "center",
-            position: "absolute",
-            top: 0,
-            right: 0,
-
-            "svg.small": {
-                height: 13,
-                width: 13
-            }
-        }
-
-    }
-})
+module.exports = SearchBar = () => ({
+    ".SearchBar": {
+        position: "relative",
+        border: "1px solid #939393",
+        borderRadius: 200,
+        overflow: "hidden",
+        height: 44,
+        
+        "input": {
+            border: "none",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            flexGrow: 1,
+            width: "100%",
+            height: "inherit",
+            fontFamily: "Arial",
+            fontStyle: "normal",
+            fontWeight: 400,
+            fontSize: 14,
+            lineHeight: 20,
+            color: "#4B4B4B",
+            padding: "0px 44px 0px 16px"
+        },
+        
+        ".search-icon": {
+            border: "none",
+            display: "flex",
+            height: 42,
+            width: 44,
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
+            top: 0,
+            right: 0,
+
+            "svg.small": {
+                height: 13,
+                width: 13
+            }
+        }
+
+    }
+})
   

package/src/components/side-menu.js

@@ -0,0 +1,186 @@
+module.exports = Menu = () => ({
+    ".SideMenu": {
+        width: "440px",
+        border: "1px solid #939393",
+        borderRadius: "2px",
+        overflow: "hidden",
+
+        ".menu-header": {
+            padding: "3rem 1rem 1.8rem", 
+            backgroundColor: "#005595",
+            padding: "2rem 1rem",
+
+            "label": {
+                fontSize: "20px",
+                fontWeight: 700,
+                color: "#fff" 
+            },
+
+            ".label-header": {
+                display: "flex",
+                alignItems: "center",
+
+
+                "span": {
+                    marginLeft: "auto"
+                }
+            },
+        },
+
+        
+        ".MenuItem": {
+            borderTop: "1px solid #939393",
+            transition: "500ms ease",
+            overflow: "hidden", 
+            
+            "&.active": {
+                "> .wrapper": {
+                    boxShadow: "inset 6px 0 0 0 #005595",
+                    
+                    "> div > a": {
+                        fontWeight: 600,
+                    }
+                } 
+            },
+
+            ".items": {
+                height: 0
+            }, 
+
+            ".wrapper": {
+                minHeight: "64px",
+                display: "flex",
+                alignItems: "center",
+                
+                "a, button": {
+                    all: "unset",
+                    cursor: "pointer",
+                    width: "100%",
+                    height: "100%",
+                    display: "flex",
+                    verticalAlign: "middle",
+                    alignItems: "center", 
+                    paddingRight: '15px'
+                },
+
+
+                "label": {
+                    
+                },
+                
+                ".expand": {
+                    width: "50px",
+                    height: "64px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    marginLeft: "auto",
+                    padding: 0,
+                    
+                    "span": {
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        borderLeft: "1px solid",
+                        height: '24px',
+                        width: '45px'
+                    }
+                }
+            },
+
+            "&.open": {
+                "> .wrapper": {
+                    boxShadow: "inset 6px 0 0 0 #005595"
+                },
+
+                "> .items": {
+                    height: "unset"
+                }
+            },
+
+            "&.lvl-1, &.lvl-2, &.lvl-3, &.lvl-4, &.lvl-5, &.lvl-6, &.lvl-7, &.lvl-8, &.lvl-9, &.lvl-10": {
+                minHeight: "56px",
+            },
+
+
+
+            "&.lvl-0": {
+                backgroundColor: "#fff",
+                "> .wrapper > div > a": {
+                    paddingLeft: "1rem"
+                }
+            },
+
+            "&.lvl-1": {
+                backgroundColor: "#F9F9F9",
+                "> .wrapper > div > a": {
+                    paddingLeft: "2rem"
+                }
+            },
+
+            "&.lvl-2": {
+                backgroundColor: "#ECECEC",
+                "> .wrapper > div > a": {
+                    paddingLeft: "3rem"
+                }
+            },
+
+            "&.lvl-3": {
+                backgroundColor: "#ECECEC",
+                "> .wrapper > div > a": {
+                    paddingLeft: "4rem"
+                }
+            },
+
+            "&.lvl-4": {
+                backgroundColor: "#ECECEC",
+                "> .wrapper > div > a": {
+                    paddingLeft: "5rem"
+                }
+            },
+
+            "&.lvl-5": {
+                backgroundColor: "#ECECEC",
+                "> .wrapper > div > a": {
+                    paddingLeft: "6rem"
+                }
+            },
+
+            "&.lvl-6": {
+                backgroundColor: "#ECECEC",
+                "> .wrapper > div > a": {
+                    paddingLeft: "7rem"
+                }
+            },
+
+            "&.lvl-7": {
+                backgroundColor: "#ECECEC",
+                "> .wrapper > div > a": {
+                    paddingLeft: "8rem"
+                }
+            },
+            
+            "&.lvl-8": {
+                backgroundColor: "#ECECEC",
+                "> .wrapper > div > a": {
+                    paddingLeft: "9rem"
+                }
+            },
+
+            "&.lvl-9": {
+                backgroundColor: "#ECECEC",
+                "> .wrapper > div > a": {
+                    paddingLeft: "10rem"
+                }
+            },
+
+            "&.lvl-10": {
+                backgroundColor: "#ECECEC",
+                "> .wrapper > div > a": {
+                    paddingLeft: "11rem"
+                }
+            }
+        }
+    },
+});
+