@sk-web-gui/core 0.1.66 → 0.1.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.66",
+  "version": "0.1.68",
   "license": "MIT",
   "main": "src/index.js",
   "files": [
@@ -31,5 +31,5 @@
     "postcss-import": "^14.0.2",
     "tailwindcss": "^2.2.4"
   },
-  "gitHead": "41f489446f57e29402fdd710cd7203ea35f59b3e"
+  "gitHead": "b4d080f30347f482b696750c233c39f3f2a7da62"
 }

package/src/components/accordion.js

@@ -59,6 +59,17 @@ module.exports = Accordion = (colors) => ({
       },
     },
 
+    '&-alert': {
+      '@apply border border-warning': {},
+      '.accordion-header': {
+        '@apply bg-warning-light text-warning': {},
+
+        '[aria-expanded="true"] &': {
+          '@apply bg-warning-light': {},
+        },
+      },
+    },
+
     '&-is-open': {
       '@apply border border-gray-stroke': {},
       '& .accordion-header': {
@@ -66,7 +77,14 @@ module.exports = Accordion = (colors) => ({
       },
     },
 
-    '&-is-open &-body': {
+    '&-is-open-alert': {
+      '@apply border border-warning': {},
+      '& .accordion-header': {
+        '@apply border-b border-warning': {},
+      },
+    },
+
+    '&-is-open &-body &-is-open-alert': {
       '@apply overflow-visible animate-reset-overflow': {},
     },
 

package/src/components/button.js

@@ -330,6 +330,10 @@ module.exports = Button = (colors) => ({
       minHeight: '4.8rem',
       maxHeight: '4.8rem',
     },
+    '&-fit-content': {
+      '@apply p-0': {},
+      fontSize: 'inherit',
+    },
 
     // State
 

package/src/components/dropdown-filter.js

@@ -8,7 +8,7 @@ module.exports = DropdownFilter = () => ({
     borderRadius: 2,
 
     '.dropdown-button': {
-      '@apply flex justify-between items-center py-0 px-[1rem] grow': {},
+      '@apply flex justify-between items-center  grow': {},
       '.dropdown-button-icon': {
         '@apply justify-self-end grow-0': {},
       },
@@ -22,15 +22,11 @@ module.exports = DropdownFilter = () => ({
       width: 'calc(100% + 2px)',
       background: '#fff',
       border: '1px solid #939393',
-      padding: '1rem',
       borderRadius: 2,
 
       '.filter-controls': {
         display: 'flex',
         justifyContent: 'flex-end',
-        padding: '0 1rem',
-        paddingBottom: 12,
-
         button: {
           marginLeft: '1rem',
           textDecoration: 'underline',
@@ -38,12 +34,12 @@ module.exports = DropdownFilter = () => ({
       },
 
       '.filter-item': {
+        '@apply px-md': {},
         height: 48,
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
         borderBottom: '1px solid #939393',
-        padding: '0 1rem',
 
         '> label:first-child': {
           '@apply flex-grow': {},

package/src/components/forms.js

@@ -196,19 +196,25 @@ module.exports = Forms = (colors) => ({
     '&-sm': {
       '@apply text-sm leading-sm': {},
       borderRadius: '0.2rem',
-      padding: '1.08rem 1.44rem',
+      padding: '0 1.44rem',
+      minHeight: '4rem',
+      maxHeight: '4rem',
     },
 
     '&-md': {
       '@apply text-base leading-base': {},
       borderRadius: '0.2rem',
-      padding: '1.2rem 1.6rem',
+      padding: '0 1.6rem',
+      minHeight: '4.4rem',
+      maxHeight: '4.4rem',
     },
 
     '&-lg': {
       '@apply text-lg leading-lg': {},
       borderRadius: '0.2rem',
-      padding: '1.32rem 1.76rem',
+      padding: '0 1.76rem',
+      minHeight: '4.8rem',
+      maxHeight: '4.8rem',
     },
 
     '&-disabled, &&-disabled': {
@@ -250,7 +256,7 @@ module.exports = Forms = (colors) => ({
   },
 
   '.form-select': {
-    '@apply min-h-[50px] justify-between grow text-body bg-white caret-transparent select-none cursor-pointer border-gray-stroke':
+    '@apply justify-between items-center grow text-body bg-white caret-transparent select-none cursor-pointer border-gray-stroke':
       {},
     'background-image': 'none',
     '&-wrapper': {
@@ -262,9 +268,14 @@ module.exports = Forms = (colors) => ({
     '&-list': {
       '@apply z-10 absolute overflow-y-auto w-full bg-white mt-0 border border-gray-stroke border-t-0': {},
     },
-
+    '&-has-multiple-choices': {
+      '@apply flex w-full h-full justify-between items-center pr-md': {},
+    },
+    '&-multiple-chioces': {
+      '@apply truncate pr-md': {},
+    },
     '&-option': {
-      '@apply rounded-none cursor-default hover:text-white focus-visible:text-white hover:bg-primary focus-visible:bg-primary':
+      '@apply text-body rounded-none cursor-default hover:text-white focus-visible:text-white hover:bg-primary focus-visible:bg-primary flex items-center':
         {},
 
       '&.multiple.selected': {
@@ -276,6 +287,9 @@ module.exports = Forms = (colors) => ({
       '&.active.selected': {
         '@apply bg-primary text-white': {},
       },
+      '&.disabled': {
+        '@apply opacity-75 cursor-not-allowed hover:bg-white hover:text-black': {},
+      },
     },
   },
 

package/src/components/side-menu.js

@@ -3,7 +3,7 @@ module.exports = Menu = () => ({
     '@apply w-[440px]': {},
 
     '.menu-header': {
-      '@apply py-[2rem] px-[1.6rem] bg-primary rounded-t-sm': {},
+      '@apply py-[2rem] px-[1.6rem] bg-primary text-white rounded-t-sm': {},
 
       'label, .label': {
         '@apply text-xl font-bold text-white': {},

package/src/components/tag.js

@@ -79,8 +79,7 @@ module.exports = Tag = (colors) => ({
   ...tagLight(colors),
 
   '.tag-close-button': {
-    '@apply text-body border-transparent flex items-center justify-center transition-all duration-150 rounded-full outline-none cursor-base':
-      {},
+    '@apply border-transparent cursor-base': {},
     fontSize: '1em',
     padding: '0.36em',
     marginLeft: '0.25em',