@pingux/astro 1.17.0 → 1.19.1-alpha.0

package/lib/styles/variants/buttons.js

@@ -136,7 +136,7 @@ var collapsiblePanelToggle = _objectSpread(_objectSpread({}, square), {}, {
   bg: 'accent.99',
   height: '40px',
   minWidth: 'max-content',
-  pl: '0px',
+  pl: 'xs',
   ml: '10px',
   path: {
     fill: 'active'
@@ -144,7 +144,10 @@ var collapsiblePanelToggle = _objectSpread(_objectSpread({}, square), {}, {
   '&.is-hovered': {
     backgroundColor: 'accent.99'
   },
-  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
+    outlineOffset: '0',
+    zIndex: 1
+  }),
   '&.is-pressed': {
     backgroundColor: 'accent.99'
   }
@@ -368,6 +371,18 @@ var inline = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
 
+var inlinePrimary = _objectSpread(_objectSpread(_objectSpread({}, inline), defaultActive), {}, {
+  '&.is-hovered': _objectSpread(_objectSpread({}, defaultHover), {}, {
+    backgroundColor: 'accent.40',
+    color: 'white'
+  }),
+  '&.is-pressed': _objectSpread(_objectSpread({}, defaultActive), {}, {
+    backgroundColor: 'accent.20',
+    border: '1px solid',
+    borderColor: 'accent.20'
+  })
+});
+
 var text = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   bg: 'transparent',
@@ -420,7 +435,8 @@ var rocker = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'accent.95',
   '&.is-selected': {
     bg: 'active',
-    color: 'white'
+    color: 'white',
+    zIndex: '1'
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
 });
@@ -466,9 +482,7 @@ var colorField = {
   '&:focus-visible': {
     outline: 'none'
   },
-  '&.is-focused': {
-    borderColor: 'accent.80'
-  }
+  '&.is-focused': _objectSpread({}, defaultFocus)
 };
 
 var imageUpload = _objectSpread(_objectSpread({}, base), {}, {
@@ -693,6 +707,7 @@ export default {
   iconButton: iconButton,
   imageUpload: imageUpload,
   inline: inline,
+  inlinePrimary: inlinePrimary,
   inverted: inverted,
   link: link,
   primary: primary,

package/lib/styles/variants/collapsiblePanel.js

@@ -1,8 +1,15 @@
 var collapsiblePanelContainer = {
-  overflowX: 'hidden',
   pr: 'sm',
-  transition: 'right 500ms',
-  minHeight: '80vh'
+  minHeight: '80vh',
+  '>div': {
+    visibility: 'hidden',
+    width: 0,
+    transition: 'width .3s ease'
+  },
+  '&.is-open>div': {
+    visibility: 'visible',
+    width: '300px'
+  }
 };
 var collapsiblePanelContent = {
   bg: 'accent.99',
@@ -25,15 +32,17 @@ var collapsiblePanelContent = {
 };
 var collapsiblePanelContainerTitle = {
   alignContent: 'center',
-  bg: 'accent.99',
-  display: 'flex',
   fontWeight: '500',
   minHeight: '40px',
   alignItems: 'center',
   padding: '0 10px !important',
   flexWrap: 'wrap',
   maxWidth: 'max-content !important',
-  margin: '0'
+  margin: '0',
+  width: '0',
+  '.is-open &': {
+    width: '300px'
+  }
 };
 var collapsiblePanelBadge = {
   borderRadius: '5px',
@@ -46,7 +55,17 @@ var collapsiblePanelBadge = {
   pr: '3px !important',
   pl: '3px !important',
   alignItems: 'center',
-  fontWeight: 500
+  fontWeight: 500,
+  '.is-open &.title-badge': {
+    minWidth: '0',
+    display: 'flex',
+    transition: 'min-width .3s ease',
+    width: 'max-content'
+  },
+  '&.title-badge': {
+    display: 'none',
+    width: '0'
+  }
 };
 var collapsiblePanellItem = {
   minHeight: '45px',

package/lib/styles/variants/overlayPanel.js

@@ -1,7 +1,7 @@
 var overlayPanel = {
   position: 'fixed',
   overflowY: 'scroll',
-  zIndex: 1,
+  zIndex: 10,
   top: 0,
   bottom: 0,
   right: '-100%',
@@ -33,7 +33,7 @@ var overlayPanel = {
 };
 var overlayPanelInner = {
   position: 'absolute',
-  zIndex: 2,
+  zIndex: 9,
   bottom: 0,
   right: 0,
   background: 'white',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.17.0",
+  "version": "1.19.1-alpha.0",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",