@braineet/ui
Version:
Braineet design system
44 lines (43 loc) • 2.25 kB
JavaScript
;
exports.__esModule = true;
exports.StyledMenuItem = exports.MenuStyled = exports.MenuButtonStyled = void 0;
var _menu = require("ariakit/menu");
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _styledSystem = require("styled-system");
var _button = _interopRequireDefault(require("../button"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var MenuButtonStyled = (0, _styledComponents.default)(_button.default).withConfig({
displayName: "scMenu__MenuButtonStyled",
componentId: "sc-fr30qm-0"
})(["justify-content:space-between !important;"]);
exports.MenuButtonStyled = MenuButtonStyled;
var StyledMenuItem = (0, _styledComponents.default)(_button.default).withConfig({
displayName: "scMenu__StyledMenuItem",
componentId: "sc-fr30qm-1"
})(["display:flex;justify-content:", ";border-radius:0.25rem;span{margin:0.5rem 0.5rem 0.5rem 0.75rem;}&:focus:not(:disabled),&.focus-visible{outline:none;}"], function (p) {
return p.$justifyContent || 'flex-end';
});
exports.StyledMenuItem = StyledMenuItem;
var MenuStyled = (0, _styledComponents.default)(_menu.Menu).withConfig({
displayName: "scMenu__MenuStyled",
componentId: "sc-fr30qm-2"
})(["position:relative;display:flex;max-height:min( var(--popover-available-height),", " );max-width:", ";min-width:", ";flex-direction:column;overflow:auto;overscroll-behavior:contain;padding:", ";border:1px solid ", ";border-radius:", ";box-shadow:0px 8px 16px -8px ", ";background:", ";z-index:", ";outline:none !important;", ""], function (p) {
return p.$maxHeight || '320px';
}, function (p) {
return p.$maxWidth || 'var(--popover-available-width)';
}, function (p) {
return p.$minWidth || '180px';
}, function (props) {
return props.theme.spaces.md;
}, function (p) {
return p.theme.colors.black10;
}, function (props) {
return props.theme.borderRadius.md;
}, function (props) {
return props.theme.utils.lighten('black', 0.32);
}, function (p) {
return p.theme.colors.background.white;
}, function (props) {
return props.$zIndex || (props.modal || props.portal ? props.theme.zIndex.overlay : props.theme.zIndex.dropdown);
}, _styledSystem.layout);
exports.MenuStyled = MenuStyled;