@pingux/astro 2.161.1-alpha.6 → 2.162.1-alpha.0

package/lib/components/TableBase/TableBase.styles.js

@@ -14,14 +14,55 @@ var defaultFocus = {
   outline: '1px',
   outlineStyle: 'solid',
   outlineColor: 'focus',
-  outlineOffset: '-1px'
+  outlineOffset: '-1px',
+  zIndex: 2
 };
 var container = {
   width: '100%',
   height: '100%',
   borderSpacing: '0',
   borderCollapse: 'collapse',
-  position: 'relative'
+  position: 'relative',
+  '&.is-last-column-sticky': {
+    'thead tr th:last-of-type': {
+      position: 'sticky',
+      right: 0,
+      backgroundColor: 'white',
+      zIndex: 2,
+      '&.is-focused': {
+        borderStyle: 'solid',
+        borderColor: 'transparent',
+        borderWidth: '2px'
+      }
+    },
+    'tbody tr': {
+      '&.is-focused td:last-of-type': {
+        borderStyle: 'solid',
+        borderColor: 'transparent',
+        borderWidth: '4px 2px'
+      },
+      '&:nth-of-type(odd) td:last-of-type': {
+        position: 'sticky',
+        right: 0,
+        backgroundColor: 'inherit',
+        '&.is-focused': {
+          borderStyle: 'solid',
+          borderColor: 'transparent',
+          borderWidth: '2px'
+        }
+      },
+      '&:nth-of-type(even) td:last-of-type': {
+        position: 'sticky',
+        right: 0,
+        backgroundColor: 'white',
+        '&.is-focused': {
+          borderStyle: 'solid',
+          borderColor: 'transparent',
+          borderWidth: '2px'
+        }
+      }
+    }
+  }
 };
 var caption = {
   fontFamily: 'standard',
@@ -37,7 +78,7 @@ var thead = {
   '&.is-sticky': {
     position: 'sticky',
     top: 0,
-    zIndex: 1,
+    zIndex: 2,
     boxShadow: '0 1px 0 #68747f'
   }
 };
@@ -58,8 +99,8 @@ var tbody = {
   scrollPaddingBottom: '20px'
 };
 var row = {
-  '&:nth-of-type(odd) ': {
-    bg: 'neutral.95'
+  '&:nth-of-type(odd)': {
+    backgroundColor: 'neutral.95'
   },
   '&:focus-visible': {
     outline: 'none'
@@ -74,7 +115,10 @@ var row = {
   '&.is-disabled': {
     bg: 'neutral.90',
     opacity: 0.5,
-    cursor: 'not-allowed'
+    cursor: 'not-allowed',
+    '& > td:last-of-type': {
+      backgroundColor: 'neutral.90'
+    }
   }
 };
 var data = _objectSpread(_objectSpread({}, text.tableData), {}, {

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -217,6 +217,18 @@ export default {
     }
   },
   tableBase: {
+    container: {
+      '&.is-last-column-sticky': {
+        'thead tr th:last-of-type': {
+          backgroundColor: 'backgroundBase'
+        },
+        'tbody tr': {
+          '&:nth-of-type(even) td:last-of-type': {
+            backgroundColor: 'backgroundBase'
+          }
+        }
+      }
+    },
     caption: {
       color: 'text.secondary'
     },

package/lib/styles/themes/next-gen/variants/tableBase.js

@@ -28,6 +28,10 @@ var container = {
     borderBottom: 'unset',
     borderBottomLeftRadius: borderRadius,
     borderBottomRightRadius: borderRadius,
+    '&.is-focused': {
+      borderBottomLeftRadius: '12px',
+      borderBottomRightRadius: '12px'
+    },
     '& > td:first-of-type': {
       borderBottomLeftRadius: borderRadius
     },
@@ -59,12 +63,18 @@ var row = {
   borderBottomColor: 'border.base',
   '&.is-focused': _objectSpread({}, defaultFocus),
   '&.is-hovered': {
-    bg: 'background.hover'
+    bg: 'background.hover',
+    '& > td:last-of-type': {
+      bg: 'background.hover'
+    }
   },
   '&:nth-of-type(odd)': {
     bg: 'backgroundBase',
     '&.is-hovered': {
       bg: 'background.hover'
+    },
+    '& > td:last-of-type': {
+      bg: 'backgroundBase'
     }
   }
 };
@@ -82,7 +92,10 @@ var head = {
   fontWeight: '2',
   color: 'text.primary',
   lineHeight: 'body',
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&:last-of-type': {
+    backgroundColor: 'backgroundBase'
+  }
 };
 var tbody = {
   borderTopColor: 'border.base',
@@ -93,7 +106,11 @@ var tbody = {
 };
 var data = _objectSpread(_objectSpread({}, head), {}, {
   py: 'md',
-  fontWeight: '1'
+  fontWeight: '1',
+  '&:last-of-type': {
+    backgroundColor: 'backgroundBase',
+    zIndex: 1
+  }
 });
 export var tableBase = {
   container: container,