pcm-shared-components 0.0.91 → 0.0.94
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Dialogs/GenericAppBar/index.js +10 -9
- package/dist/components/Menus/ReusablePopupMenu/components/GenericSubMenu.js +128 -0
- package/dist/components/Menus/ReusablePopupMenu/components/ReusableMenu.js +92 -0
- package/dist/components/Menus/ReusablePopupMenu/index.js +94 -0
- package/dist/index.js +2 -1
- package/dist/styles/tailwind.css +1 -1
- package/package.json +1 -1
|
@@ -222,7 +222,7 @@ export const GenericAppBar = props => {
|
|
|
222
222
|
}, /*#__PURE__*/React.createElement("div", {
|
|
223
223
|
className: "flex flex-row",
|
|
224
224
|
key: `main_sub_items_${new Date()}`
|
|
225
|
-
},
|
|
225
|
+
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
226
226
|
title: menu.name
|
|
227
227
|
}, menu.isButton ? /*#__PURE__*/React.createElement(Button // className={classes.menuButton}
|
|
228
228
|
, {
|
|
@@ -280,18 +280,19 @@ export const GenericAppBar = props => {
|
|
|
280
280
|
//? ------------------------------------------------
|
|
281
281
|
|
|
282
282
|
const MainItems = () => {
|
|
283
|
-
return /*#__PURE__*/React.createElement(
|
|
283
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
284
|
+
className: "flex flex-row"
|
|
285
|
+
}, (appBarMenu.mainMenu || []).filter(mn => !(mn.hideMenu && mn.hideMenu === true)).map((menu, idx) => /*#__PURE__*/React.createElement(DesktopItemMenu, {
|
|
284
286
|
key: `desktop_item_menu_${idx}`,
|
|
285
287
|
menu: menu,
|
|
286
288
|
idx: idx
|
|
287
289
|
})));
|
|
288
|
-
};
|
|
290
|
+
}; // const MainItemMenu = () => (
|
|
291
|
+
// <div className='flex flex-row'>
|
|
292
|
+
// <MainItems key='main_item_id' />
|
|
293
|
+
// </div>
|
|
294
|
+
// );
|
|
289
295
|
|
|
290
|
-
const MainItemMenu = () => /*#__PURE__*/React.createElement("div", {
|
|
291
|
-
className: "flex flex-row"
|
|
292
|
-
}, /*#__PURE__*/React.createElement(MainItems, {
|
|
293
|
-
key: "main_item_id"
|
|
294
|
-
}));
|
|
295
296
|
|
|
296
297
|
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
297
298
|
theme: defaultTheme
|
|
@@ -305,7 +306,7 @@ export const GenericAppBar = props => {
|
|
|
305
306
|
className: classes.grow
|
|
306
307
|
}), /*#__PURE__*/React.createElement("div", {
|
|
307
308
|
className: classes.sectionDesktop
|
|
308
|
-
}, /*#__PURE__*/React.createElement(
|
|
309
|
+
}, /*#__PURE__*/React.createElement(MainItems, null)), /*#__PURE__*/React.createElement("div", {
|
|
309
310
|
className: classes.sectionMobile
|
|
310
311
|
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
311
312
|
"aria-haspopup": "true",
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
|
+
import { Tooltip, IconButton, MenuItem, Menu } from "@mui/material";
|
|
3
|
+
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
|
4
|
+
import { makeStyles } from '@mui/styles';
|
|
5
|
+
import ListItemIcon from "@mui/material/ListItemIcon";
|
|
6
|
+
import ListItemText from "@mui/material/ListItemText";
|
|
7
|
+
import Switch from "@mui/material/Switch";
|
|
8
|
+
|
|
9
|
+
const GenericSubMenu = ({
|
|
10
|
+
menu,
|
|
11
|
+
full_menu = true,
|
|
12
|
+
handleParentMenuClose = undefined
|
|
13
|
+
}) => {
|
|
14
|
+
const [anchorSubMenu, setAnchorSubMenu] = useState(false);
|
|
15
|
+
const [isSubMenuOpen, setSubMenuOpen] = useState(false);
|
|
16
|
+
const useStyles = makeStyles(theme => ({
|
|
17
|
+
root: {
|
|
18
|
+
flexGrow: 1
|
|
19
|
+
},
|
|
20
|
+
menuButton: {
|
|
21
|
+
marginLeft: -18,
|
|
22
|
+
fontSize: 20
|
|
23
|
+
},
|
|
24
|
+
appContextMenu: {
|
|
25
|
+
background: "#58524c"
|
|
26
|
+
},
|
|
27
|
+
grow: {
|
|
28
|
+
flexGrow: 1
|
|
29
|
+
},
|
|
30
|
+
divider: {
|
|
31
|
+
borderLeft: "0.1em solid #aeaeae",
|
|
32
|
+
padding: "0.5em",
|
|
33
|
+
margin: "10px 10px 10px 10px",
|
|
34
|
+
height: 5
|
|
35
|
+
},
|
|
36
|
+
mobile_divider: {
|
|
37
|
+
borderBottom: "0.1em solid #aeaeae",
|
|
38
|
+
width: "100%"
|
|
39
|
+
},
|
|
40
|
+
sectionDesktop: {
|
|
41
|
+
display: "none",
|
|
42
|
+
[theme.breakpoints.up("md")]: {
|
|
43
|
+
display: "flex"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
sectionMobile: {
|
|
47
|
+
display: "flex",
|
|
48
|
+
[theme.breakpoints.up("md")]: {
|
|
49
|
+
display: "none"
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}));
|
|
53
|
+
const classes = useStyles();
|
|
54
|
+
|
|
55
|
+
const openSubMenu = event => {
|
|
56
|
+
setAnchorSubMenu(event.currentTarget);
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
const handleSubMenuClose = () => {
|
|
60
|
+
setAnchorSubMenu(false); //Closes the previous parent menu too..
|
|
61
|
+
|
|
62
|
+
if (handleParentMenuClose) {
|
|
63
|
+
handleParentMenuClose();
|
|
64
|
+
} // handleMobileMenuClose();
|
|
65
|
+
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
useEffect(() => {
|
|
69
|
+
setSubMenuOpen(Boolean(anchorSubMenu));
|
|
70
|
+
}, [anchorSubMenu]);
|
|
71
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
72
|
+
key: `main_sub_menu_items_${menu.icon}`,
|
|
73
|
+
className: !full_menu ? "flex flex-row" : 'flex flex-col w-full'
|
|
74
|
+
}, full_menu ? /*#__PURE__*/React.createElement(MenuItem, {
|
|
75
|
+
onClick: openSubMenu
|
|
76
|
+
}, menu.icon && /*#__PURE__*/React.createElement(ListItemIcon, null, menu.icon), /*#__PURE__*/React.createElement("div", {
|
|
77
|
+
className: "flex flex-row justify-between w-full"
|
|
78
|
+
}, /*#__PURE__*/React.createElement(ListItemText, {
|
|
79
|
+
primary: menu.name
|
|
80
|
+
}), menu.subMenu && menu.subMenu.length > 0 && /*#__PURE__*/React.createElement("div", {
|
|
81
|
+
className: "flex flex-col mx-2 my-auto"
|
|
82
|
+
}, /*#__PURE__*/React.createElement(ChevronRightIcon, {
|
|
83
|
+
className: "text-gray-500 hover:text-gray-700"
|
|
84
|
+
})))) : /*#__PURE__*/React.createElement(Tooltip, {
|
|
85
|
+
title: menu.name
|
|
86
|
+
}, /*#__PURE__*/React.createElement(IconButton, {
|
|
87
|
+
className: classes.menuButton,
|
|
88
|
+
color: "inherit",
|
|
89
|
+
"aria-owns": "menu-appbar",
|
|
90
|
+
onClick: openSubMenu
|
|
91
|
+
}, menu.icon)), /*#__PURE__*/React.createElement(Menu, {
|
|
92
|
+
className: "",
|
|
93
|
+
style: {
|
|
94
|
+
display: anchorSubMenu ? 'block' : 'none'
|
|
95
|
+
} //Makes the disappearing menu smoother so I don't see it being jarred in a corner.
|
|
96
|
+
,
|
|
97
|
+
anchorEl: anchorSubMenu,
|
|
98
|
+
anchorOrigin: {
|
|
99
|
+
vertical: 'bottom',
|
|
100
|
+
horizontal: 'center'
|
|
101
|
+
},
|
|
102
|
+
transformOrigin: {
|
|
103
|
+
vertical: 'top',
|
|
104
|
+
horizontal: 'left'
|
|
105
|
+
},
|
|
106
|
+
open: isSubMenuOpen,
|
|
107
|
+
onClose: handleSubMenuClose,
|
|
108
|
+
onClick: menu.onClick
|
|
109
|
+
}, (menu.subMenu || []).filter(mn => !(mn.hideMenu && mn.hideMenu === true)).map((sub_menu, idx) => /*#__PURE__*/React.createElement(React.Fragment, null, sub_menu.subMenu ? /*#__PURE__*/React.createElement(GenericSubMenu, {
|
|
110
|
+
key: `common_grid_app_bar_sub_desktop_sub_${idx}`,
|
|
111
|
+
menu: sub_menu,
|
|
112
|
+
classes: classes,
|
|
113
|
+
full_menu: true,
|
|
114
|
+
handleParentMenuClose: handleSubMenuClose
|
|
115
|
+
}) : /*#__PURE__*/React.createElement(MenuItem, {
|
|
116
|
+
key: `sub_menu_items__${idx}}`,
|
|
117
|
+
onClick: () => {
|
|
118
|
+
handleSubMenuClose();
|
|
119
|
+
sub_menu.onClick();
|
|
120
|
+
}
|
|
121
|
+
}, sub_menu.icon && /*#__PURE__*/React.createElement(ListItemIcon, null, sub_menu.icon), /*#__PURE__*/React.createElement(ListItemText, {
|
|
122
|
+
primary: sub_menu.name
|
|
123
|
+
}), typeof sub_menu.isChecked === "boolean" && /*#__PURE__*/React.createElement(Switch, {
|
|
124
|
+
checked: sub_menu.isChecked
|
|
125
|
+
}))))));
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
export default GenericSubMenu;
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
+
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import withStyles from "@mui/styles/withStyles";
|
|
5
|
+
import Menu from "@mui/material/Menu";
|
|
6
|
+
import MenuItem from "@mui/material/MenuItem";
|
|
7
|
+
import ListItemIcon from "@mui/material/ListItemIcon";
|
|
8
|
+
import ListItemText from "@mui/material/ListItemText";
|
|
9
|
+
import Switch from "@mui/material/Switch";
|
|
10
|
+
import PropTypes from "prop-types";
|
|
11
|
+
import GenericSubMenu from './GenericSubMenu';
|
|
12
|
+
const StyledMenu = withStyles({
|
|
13
|
+
paper: {
|
|
14
|
+
border: "1px solid #d3d4d5"
|
|
15
|
+
}
|
|
16
|
+
})(props => /*#__PURE__*/React.createElement(Menu, _extends({
|
|
17
|
+
elevation: 0,
|
|
18
|
+
anchorOrigin: {
|
|
19
|
+
vertical: "bottom",
|
|
20
|
+
horizontal: "center"
|
|
21
|
+
},
|
|
22
|
+
transformOrigin: {
|
|
23
|
+
vertical: "top",
|
|
24
|
+
horizontal: "center"
|
|
25
|
+
}
|
|
26
|
+
}, props)));
|
|
27
|
+
const StyledMenuItem = withStyles(() => ({
|
|
28
|
+
root: {
|
|
29
|
+
"&:focus": {
|
|
30
|
+
backgroundColor: "primary",
|
|
31
|
+
"& .MuiListItemIcon-root, & .MuiListItemText-primary": {
|
|
32
|
+
color: "primary"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}))(MenuItem);
|
|
37
|
+
|
|
38
|
+
const ReusableMenu = props => {
|
|
39
|
+
const {
|
|
40
|
+
menuAnchor,
|
|
41
|
+
handleClose,
|
|
42
|
+
menuData,
|
|
43
|
+
keepMounted,
|
|
44
|
+
classes = undefined
|
|
45
|
+
} = props;
|
|
46
|
+
return /*#__PURE__*/React.createElement(StyledMenu, {
|
|
47
|
+
id: "customized-menu",
|
|
48
|
+
anchorEl: menuAnchor,
|
|
49
|
+
keepMounted: keepMounted,
|
|
50
|
+
open: Boolean(menuAnchor),
|
|
51
|
+
onClose: handleClose
|
|
52
|
+
}, menuData.map((menu, idx) => /*#__PURE__*/React.createElement("div", {
|
|
53
|
+
key: `ReusableMenu_${idx}`
|
|
54
|
+
}, menu.name && /*#__PURE__*/React.createElement(React.Fragment, null, menu.subMenu ? /*#__PURE__*/React.createElement("div", {
|
|
55
|
+
className: "flex flex-row",
|
|
56
|
+
key: `main_sub_items_${new Date()}`
|
|
57
|
+
}, /*#__PURE__*/React.createElement(GenericSubMenu, {
|
|
58
|
+
key: `common_grid_app_bar_sub_desktop_${idx}`,
|
|
59
|
+
menu: menu,
|
|
60
|
+
full_menu: true,
|
|
61
|
+
classes: classes
|
|
62
|
+
})) : /*#__PURE__*/React.createElement(StyledMenuItem, {
|
|
63
|
+
onClick: menu.onClick,
|
|
64
|
+
key: `reusable_menu_item_${idx}`
|
|
65
|
+
}, /*#__PURE__*/React.createElement(ListItemIcon, null, menu.icon), /*#__PURE__*/React.createElement(ListItemText, {
|
|
66
|
+
primary: menu.name
|
|
67
|
+
}), typeof menu.isChecked === "boolean" && /*#__PURE__*/React.createElement(Switch, {
|
|
68
|
+
checked: menu.isChecked
|
|
69
|
+
}))))));
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
export default ReusableMenu; // required props for component to work...
|
|
73
|
+
|
|
74
|
+
ReusableMenu.propTypes = {
|
|
75
|
+
menuAnchor: PropTypes.element.isRequired,
|
|
76
|
+
handleClose: PropTypes.element.isRequired,
|
|
77
|
+
menuData: PropTypes.element.isRequired
|
|
78
|
+
}; // Specifies the default values for the props:
|
|
79
|
+
|
|
80
|
+
ReusableMenu.defaultProps = {
|
|
81
|
+
menuAnchor: undefined,
|
|
82
|
+
handleClose: undefined,
|
|
83
|
+
menuData: [],
|
|
84
|
+
keepMounted: false
|
|
85
|
+
}; // Type of
|
|
86
|
+
|
|
87
|
+
ReusableMenu.propTypes = {
|
|
88
|
+
menuAnchor: PropTypes.object,
|
|
89
|
+
handleClose: PropTypes.func,
|
|
90
|
+
menuData: PropTypes.array,
|
|
91
|
+
keepMounted: PropTypes.bool
|
|
92
|
+
};
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import React, { useState, Children, isValidElement, cloneElement } from 'react';
|
|
2
|
+
import ReusableMenu from './components/ReusableMenu';
|
|
3
|
+
import Tooltip from '@mui/material/Tooltip';
|
|
4
|
+
import PropTypes from 'prop-types';
|
|
5
|
+
import { useTheme } from '@mui/material/styles';
|
|
6
|
+
import { createTheme, ThemeProvider } from "@mui/material/styles";
|
|
7
|
+
/**
|
|
8
|
+
* Wraps any simple component and generates a simple dropdown menu on the wrapped component.
|
|
9
|
+
*
|
|
10
|
+
*
|
|
11
|
+
* ### Importing the component
|
|
12
|
+
|
|
13
|
+
```//PitchCamp shared component
|
|
14
|
+
import {ReusablePopupMenu} from 'pcm-shared-components';
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
*
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
export const ReusablePopupMenu = props => {
|
|
21
|
+
const {
|
|
22
|
+
children,
|
|
23
|
+
menuData,
|
|
24
|
+
tooltipTitle,
|
|
25
|
+
keepMounted,
|
|
26
|
+
theme
|
|
27
|
+
} = props;
|
|
28
|
+
const [menuAnchor, setMenuAnchor] = useState(null);
|
|
29
|
+
const componentTheme = createTheme(theme ? theme : useTheme());
|
|
30
|
+
|
|
31
|
+
const onClick = event => {
|
|
32
|
+
setMenuAnchor(event.currentTarget);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const handleClose = () => {
|
|
36
|
+
setMenuAnchor(null);
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const hocProps = {
|
|
40
|
+
menuAnchor,
|
|
41
|
+
handleClose,
|
|
42
|
+
menuData,
|
|
43
|
+
keepMounted
|
|
44
|
+
};
|
|
45
|
+
const childrenWithProps = Children.map(children, child => {
|
|
46
|
+
// Checking isValidElement is the safe way and avoids a typescript
|
|
47
|
+
if ( /*#__PURE__*/isValidElement(child)) {
|
|
48
|
+
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
49
|
+
title: tooltipTitle.length > 0 ? tooltipTitle : ''
|
|
50
|
+
}, /*#__PURE__*/cloneElement(child, {
|
|
51
|
+
onClick
|
|
52
|
+
}));
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
return child;
|
|
56
|
+
});
|
|
57
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
58
|
+
theme: componentTheme
|
|
59
|
+
}, childrenWithProps, /*#__PURE__*/React.createElement(ReusableMenu, hocProps));
|
|
60
|
+
};
|
|
61
|
+
export default ReusablePopupMenu;
|
|
62
|
+
export const createReusablePopupMenuObject = (onClick = undefined, icon = undefined, name = undefined, isChecked = undefined) => {
|
|
63
|
+
return {
|
|
64
|
+
onClick: onClick,
|
|
65
|
+
icon: icon,
|
|
66
|
+
name: name,
|
|
67
|
+
isChecked: isChecked
|
|
68
|
+
};
|
|
69
|
+
}; // required props for component to work...
|
|
70
|
+
|
|
71
|
+
ReusableMenu.propTypes = {
|
|
72
|
+
children: PropTypes.element.isRequired,
|
|
73
|
+
menuData: PropTypes.element.isRequired
|
|
74
|
+
}; // Specifies the default values for the props:
|
|
75
|
+
|
|
76
|
+
ReusableMenu.defaultProps = {
|
|
77
|
+
children: undefined,
|
|
78
|
+
tooltipTitle: '',
|
|
79
|
+
menuData: [],
|
|
80
|
+
keepMounted: false,
|
|
81
|
+
theme: undefined
|
|
82
|
+
}; // Type of
|
|
83
|
+
|
|
84
|
+
ReusableMenu.propTypes = {
|
|
85
|
+
children: PropTypes.object,
|
|
86
|
+
tooltipTitle: PropTypes.string,
|
|
87
|
+
menuData: PropTypes.array,
|
|
88
|
+
keepMounted: PropTypes.bool,
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* The theme object to apply to this object, if no theme provided then the component will used the default theme passed down by the ThemeProvider
|
|
92
|
+
*/
|
|
93
|
+
theme: PropTypes.object
|
|
94
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -11,4 +11,5 @@ import TwoColumnDisplay from './components/Layout/TwoColumnDisplay';
|
|
|
11
11
|
import SimpleTab from './components/Layout/SimpleTab';
|
|
12
12
|
import HrefLink from './components/Links/HrefLink';
|
|
13
13
|
import GenericAppBar from './components/Dialogs/GenericAppBar';
|
|
14
|
-
|
|
14
|
+
import ReusablePopupMenu from './components/Menus/ReusablePopupMenu';
|
|
15
|
+
export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab, HrefLink, GenericAppBar, ReusablePopupMenu };
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.mx-2{margin-left:.2rem;margin-right:.2rem}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.mr-12{margin-right:1.2rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mt-12{margin-top:1.2rem}.mb-6{margin-bottom:.6rem}.ml-
|
|
1
|
+
*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.mx-2{margin-left:.2rem;margin-right:.2rem}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.mr-12{margin-right:1.2rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.mt-12{margin-top:1.2rem}.ml-6{margin-left:.6rem}.mb-6{margin-bottom:.6rem}.ml-12{margin-left:1.2rem}.mb-24{margin-bottom:2.4rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.contents{display:contents}.hidden{display:none}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.w-1\/2{width:50%}.grow{flex-grow:1}.cursor-pointer{cursor:pointer}.list-disc{list-style-type:disc}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{-ms-scroll-chaining:none;overscroll-behavior:none}.rounded-md{border-radius:.6rem}.border{border-width:1px}.border-2{border-width:2px}.border-transparent{border-color:#0000}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.p-6{padding:.6rem}.px-4{padding-left:.4rem;padding-right:.4rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.px-2{padding-left:.2rem;padding-right:.2rem}.pt-4{padding-top:.4rem}.pl-0{padding-left:0}.pr-0{padding-right:0}.pl-16{padding-left:1.6rem}.text-sm{font-size:1.4rem;line-height:2rem}.text-xl{font-size:2rem;line-height:2.8rem}.text-2xl{line-height:3.2rem}.text-24,.text-2xl{font-size:2.4rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity))}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.drop-shadow-none,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity))}.hover\:bg-gray-100\/75:hover{background-color:#f5f5f5bf}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(76 175 80/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}
|