@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.5

package/lib/cjs/styles/variants/boxes.js

@@ -0,0 +1,320 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.chip = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _text = require("./text");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+var base = {
+  display: 'flex'
+};
+var card = {
+  boxShadow: 'standard',
+  p: 'lg',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: '1 1 0'
+}; // Used to give a border to radio elements
+
+var radioContainer = {
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderColor: 'active',
+  borderRadius: 3,
+  padding: 'md',
+  mb: 'md'
+}; // Used to add spacing for content shown when a radio is checked
+
+var radioCheckedContent = {
+  py: 'md'
+};
+
+var listItem = _objectSpread(_objectSpread({}, base), {}, {
+  flex: '1 1 0px',
+  cursor: 'pointer',
+  height: '64px',
+  pl: 'md',
+  pr: 'sm',
+  pt: 16,
+  pb: 16,
+  justifyContent: 'center',
+  bg: 'accent.99',
+  '&.is-selected': {
+    bg: 'white'
+  },
+  '&.is-hovered': {
+    bg: 'white'
+  }
+});
+
+var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
+  padding: '0px 15px 0px 25px',
+  flex: '1 1 0px',
+  cursor: 'pointer',
+  minHeight: '80px',
+  justifyContent: 'center',
+  bg: 'accent.99',
+  outline: 'none',
+  '&.is-selected': {
+    bg: 'white'
+  },
+  '&.is-hovered': {
+    bg: 'white'
+  },
+  '&.is-focused': {
+    boxShadow: 'inset 0 0 5px #5873bdbf'
+  },
+  '&.has-separator': {
+    borderBottom: '1px solid',
+    borderBottomColor: 'line.hairline'
+  }
+});
+
+var listBoxSectionTitle = {
+  fontSize: 'sm',
+  fontWeight: '3',
+  color: 'text.secondary',
+  height: '36px',
+  ml: 'sm',
+  justifyContent: 'center'
+};
+var chip = {
+  cursor: 'pointer',
+  p: '3px 5px 4px 5px',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: '50px',
+  alignSelf: 'flex-start',
+  display: 'inline-flex !important',
+  borderRadius: '5px',
+  fontWeight: 1,
+  '& button': {
+    backgroundColor: 'transparent',
+    marginLeft: 'xs',
+    marginTop: '1px',
+    padding: '0',
+    '&.is-hovered': {
+      backgroundColor: 'white'
+    },
+    '& .mdi-icon': {
+      marginLeft: '0',
+      padding: '2px'
+    }
+  }
+};
+exports.chip = chip;
+var inputInContainerSlot = {
+  position: 'absolute',
+  bg: 'transparent',
+  right: 'sm',
+  top: '50%',
+  transform: 'translateY(-50%)'
+};
+var copy = {
+  alignItems: 'center',
+  width: 'max-content',
+  cursor: 'pointer',
+  '& .is-focused': {
+    boxShadow: 'inset 0 0 5px #5873bdbf'
+  }
+};
+var topShadowScrollbox = {
+  '&.has-shadows.is-top-shadow-showing': {
+    position: 'relative',
+    zIndex: '10000',
+    boxShadow: '0px 4px 2px 1px rgb(37, 55, 70, 0.15)',
+    height: '4px',
+    marginBottom: '-4px',
+    backgroundColor: '#FFFFFF'
+  }
+};
+var bottomShadowScrollbox = {
+  '&.has-shadows.is-bottom-shadow-showing': {
+    position: 'relative',
+    zIndex: '10000',
+    boxShadow: '0px -4px 2px 1px rgb(37, 55, 70, 0.15)',
+    height: '4px',
+    marginTop: '-2px',
+    backgroundColor: '#FFFFFF'
+  }
+};
+var scrollbox = {
+  '&::-webkit-scrollbar': {
+    display: 'none',
+    width: '0px !important'
+  },
+  '&::-webkit-scrollbar-track': {
+    width: '0px',
+    display: 'none'
+  },
+  '&::-webkit-scrollbar-thumb': {
+    borderRadius: '0px',
+    display: 'none'
+  },
+  position: 'relative',
+  '& > *': {
+    overflow: 'hidden auto'
+  }
+};
+var expandableRow = {
+  titleWrapper: {
+    maxWidth: '50%'
+  },
+  lineChart: {
+    alignCellRightWrapper: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-end'
+    },
+    chart: {
+      width: '50px',
+      height: '18px'
+    },
+    chartWrapper: {
+      '&:hover': {
+        backgroundColor: '#4462ED1A'
+      }
+    },
+    divider: {
+      backgroundColor: 'neutral.80',
+      height: '35px',
+      width: '1px'
+    }
+  }
+};
+var navBar = {
+  height: '100%',
+  width: '230px',
+  position: 'absolute',
+  zIndex: '1',
+  top: '0',
+  left: '0',
+  backgroundColor: 'accent.20',
+  overflowY: 'hidden'
+};
+var navBarSectionContainer = {
+  height: '100%',
+  maxHeight: '100%',
+  overflowY: 'overlay !important'
+};
+var navBarItemHeaderContainer = {
+  flexGrow: 1,
+  alignItems: 'center',
+  maxWidth: '180px'
+};
+var datePicker = {
+  '.react-calendar': {
+    width: 280,
+    '& .react-calendar__month-view__days__day': {
+      width: 40,
+      height: 40,
+      color: 'neutral.10',
+      fontSize: 'sm',
+      fontWeight: 1
+    },
+    '& .react-calendar__navigation__label__labelText': _text.text.itemTitle,
+    '& .react-calendar__navigation__arrow, & .react-calendar__month-view__days__day--neighboringMonth': {
+      color: 'neutral.40'
+    },
+    '& .react-calendar__month-view__weekdays': {
+      borderBottom: '1px solid',
+      borderColor: 'neutral.80'
+    },
+    '& .react-calendar__month-view__weekdays__weekday abbr': {
+      textDecoration: 'none',
+      textTransform: 'capitalize'
+    },
+    '& .react-calendar__month-view__days__day--weekend': {
+      color: 'decorative.4'
+    },
+    '& .react-calendar__tile--active, & .react-calendar__tile--hasActive': {
+      backgroundColor: 'active',
+      color: 'white'
+    },
+    '& .react-calendar__year-view__months__month': {
+      padding: '19px 0'
+    },
+    '& .react-calendar__decade-view__years__year, & .react-calendar__month-view__days__day, & .react-calendar__year-view__months__month': {
+      '&:hover': {
+        backgroundColor: 'rgba(70, 96, 162, .1);',
+        color: 'neutral.10'
+      }
+    },
+    '& .react-calendar__navigation': {
+      marginBottom: 0
+    }
+  }
+};
+var fileInputFieldWrapper = {
+  display: 'flex',
+  border: '1px dashed',
+  borderColor: 'active',
+  padding: '10px 0',
+  '&.is-drag-active': {
+    backgroundColor: 'accent.95'
+  },
+  '&.is-error': {
+    borderColor: 'critical.dark'
+  },
+  '&.is-success': {
+    borderColor: 'success.dark'
+  },
+  '&.is-warning': {
+    borderColor: 'warning.dark'
+  },
+  '&.is-loading': {
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+};
+var _default = {
+  base: base,
+  card: card,
+  chip: chip,
+  copy: copy,
+  datePicker: datePicker,
+  expandableRow: expandableRow,
+  inputInContainerSlot: inputInContainerSlot,
+  fileInputFieldWrapper: fileInputFieldWrapper,
+  listItem: listItem,
+  listBoxSectionTitle: listBoxSectionTitle,
+  listViewItem: listViewItem,
+  radioCheckedContent: radioCheckedContent,
+  radioContainer: radioContainer,
+  scrollbox: scrollbox,
+  topShadowScrollbox: topShadowScrollbox,
+  bottomShadowScrollbox: bottomShadowScrollbox,
+  navBar: navBar,
+  navBarSectionContainer: navBarSectionContainer,
+  navBarItemHeaderContainer: navBarItemHeaderContainer
+};
+exports["default"] = _default;