@sk-web-gui/core 0.1.72 → 0.1.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.72",
+  "version": "0.1.74",
   "license": "MIT",
   "main": "src/index.js",
   "files": [
@@ -31,5 +31,5 @@
     "postcss-import": "^14.0.2",
     "tailwindcss": "^2.2.4"
   },
-  "gitHead": "117ee0f6d06650b88bbece69606efdcd4d8be836"
+  "gitHead": "043082a334de566c85d49b320dacf5f87ba021cd"
 }

package/src/components/accordion.js

@@ -107,5 +107,17 @@ module.exports = Accordion = (colors) => ({
         },
       },
     },
+
+    '&-disabled, &-disabled button': {
+      '@apply disabled:cursor-not-allowed cursor-not-allowed': {},
+    },
+
+    '&-disabled &-header': {
+      '@apply bg-gray-lighter text-gray': {},
+    },
+
+    '&-disabled, &&-disabled': {
+      '@apply border-gray': {},
+    },
   },
 });

package/src/components/button.js

@@ -335,6 +335,35 @@ module.exports = Button = (colors) => ({
       fontSize: 'inherit',
     },
 
+    '&[data-icon=true]': {
+      '@apply p-0': {},
+      "&[data-rounded='true']": {
+        '@apply rounded-full': {},
+      },
+      '&.btn-sm': {
+        minWidth: '4rem',
+        maxWidth: '4rem',
+      },
+
+      '&.btn-md': {
+        minWidth: '4.4rem',
+        maxWidth: '4.4rem',
+      },
+
+      '&.btn-lg': {
+        minWidth: '4.8rem',
+        maxWidth: '4.8rem',
+      },
+      '.btn-has-icon': {
+        '&-left .MuiSvgIcon-root': {
+          '@apply mr-0': {},
+        },
+        '&-right .MuiSvgIcon-root': {
+          '@apply ml-0': {},
+        },
+      },
+    },
+
     // State
 
     '&-disabled': {

package/src/components/calendar.js

@@ -76,7 +76,7 @@ module.exports = Calendar = () => ({
     },
 
     '.datepicker-input-icon': {
-      '@apply pointer-events-none absolute m-6 top-0 left-0 text-xl fill-body': {},
+      '@apply pointer-events-none absolute my-auto top-0 bottom-0 left-md mr-md text-xl fill-body': {},
     },
   },
 });

package/src/components/forms.js

@@ -83,14 +83,14 @@ function formControl() {
 function formInputGroup() {
   return {
     '.form-input-group': {
-      '@apply flex relative h-fit w-full rounded-[0.2rem] border border-gray-stroke': {},
+      '@apply flex relative bg-white h-fit w-full rounded-[0.2rem] border border-gray-stroke': {},
 
       '&:focus-within': {
         '@apply border border-primary ring-primary ring-1': {},
       },
 
       '> *': {
-        '@apply border-0 ring-0': {},
+        '@apply border-0 ring-0 shadow-none': {},
 
         '&:focus': {
           '@apply ring-0': {},
@@ -278,6 +278,18 @@ module.exports = Forms = (colors) => ({
       '@apply mt-xs text-right': {},
     },
   },
+  '.dropdown-search': {
+    '@apply block w-full relative': {},
+    '&-results': {
+      '@apply w-full flex justify-between items-center': {},
+      '&-text': {
+        '@apply truncate text-left grow': {},
+      },
+      '&-counter': {
+        '@apply grow-0': {},
+      },
+    },
+  },
 
   '.form-select': {
     '@apply justify-between items-center grow text-body bg-white caret-transparent select-none cursor-pointer border-gray-stroke':
@@ -298,6 +310,7 @@ module.exports = Forms = (colors) => ({
     '&-multiple-chioces': {
       '@apply truncate pr-md': {},
     },
+
     '&-option': {
       '@apply text-body rounded-none cursor-default hover:text-white focus-visible:text-white hover:bg-primary focus-visible:bg-primary flex items-center':
         {},
@@ -309,11 +322,17 @@ module.exports = Forms = (colors) => ({
         '@apply bg-primary text-white': {},
       },
       '&.active.selected': {
-        '@apply bg-primary text-white': {},
+        '@apply bg-gray text-white': {},
       },
       '&.disabled': {
         '@apply opacity-75 cursor-not-allowed hover:bg-white hover:text-black': {},
       },
+      '&-remove-button': {
+        '@apply w-full flex justify-between items-center': {},
+        '&-text': {
+          '@apply truncate grow text-left': {},
+        },
+      },
     },
   },
 

package/src/components/message.js

@@ -46,8 +46,6 @@ module.exports = Message = () => ({
   '.message-close-button': {
     '@apply text-body border-transparent flex items-center justify-center transition-all duration-150 rounded-full outline-none cursor-base':
       {},
-    fontSize: '1.2em',
-    padding: '0.36em',
     marginLeft: '0.25em',
     marginRight: '-0.55em',
 

package/src/components/tag.js

@@ -83,7 +83,7 @@ module.exports = Tag = (colors) => ({
     fontSize: '1em',
     padding: '0.36em',
     marginLeft: '0.25em',
-    marginRight: '-0.55em',
+    marginRight: '-1em',
 
     '&-icon': {
       fontSize: '1em !important',

package/src/index.js

@@ -16,7 +16,6 @@ const Dialog = require('./components/dialog');
 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');
 const Message = require('./components/message');
@@ -63,7 +62,6 @@ const components = [
   Dot,
   Forms,
   Calendar,
-  IconButton,
   Icon,
   Link,
   Message,

package/src/components/icon-button.js

@@ -1,30 +0,0 @@
-module.exports = IconButton = () => ({
-  '.btn-icon, [data-icon="true"]': {
-    '@apply p-0': {},
-    "&[data-rounded='true']": {
-      '@apply rounded-full': {},
-    },
-    '&.btn-sm': {
-      minWidth: '4rem',
-      maxWidth: '4rem',
-    },
-
-    '&.btn-md': {
-      minWidth: '4.4rem',
-      maxWidth: '4.4rem',
-    },
-
-    '&.btn-lg': {
-      minWidth: '4.8rem',
-      maxWidth: '4.8rem',
-    },
-    '.btn-has-icon': {
-      '&-left .MuiSvgIcon-root': {
-        '@apply mr-0': {},
-      },
-      '&-right .MuiSvgIcon-root': {
-        '@apply ml-0': {},
-      },
-    },
-  },
-});