@smashing/select-menu
Version:
Component used to select options
59 lines (58 loc) • 6.46 kB
JavaScript
"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
Object.defineProperty(exports, "__esModule", { value: true });
var styled_components_1 = require("styled-components");
var text_input_1 = require("@smashing/text-input");
var menu_1 = require("@smashing/menu");
var button_1 = require("@smashing/button");
var popover_1 = require("@smashing/popover");
var typography_1 = require("@smashing/typography");
exports.Popover = styled_components_1.default(popover_1.Popover)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: unset;\n\n ", " {\n padding: 0;\n }\n\n ", "\n"], ["\n height: unset;\n\n ", " {\n padding: 0;\n }\n\n ",
"\n"])), menu_1.MenuElements.Group, function (_) {
var border = "inset 0 0 0 1px " + _.theme.colors.border[_.invalid ? 'invalid' : 'active'];
if (_.buttonAppearance === 'outline') {
var _a = _.theme.colors.button.outline, borderWidth = _a.borderWidth, borderColor = _a.borderColor;
border = "inset " + borderWidth + "px -" + borderWidth + "px 0 0 " + borderColor[_.invalid ? 'invalid' : 'active'] + ", inset -" + borderWidth + "px -" + borderWidth + "px 0 0 " + borderColor[_.invalid ? 'invalid' : 'active'];
}
return _.appearance === 'accordion'
? styled_components_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: 0px;\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n box-shadow: ", ";\n padding: 0 1px;\n background-color: ", ";\n "], ["\n box-sizing: border-box;\n border-radius: 0px;\n border-bottom-left-radius: ", ";\n border-bottom-right-radius: ", ";\n box-shadow: ", ";\n padding: 0 1px;\n background-color: ", ";\n "])), _.theme.radius, _.theme.radius, border, _.theme.colors.background.default) : {};
});
exports.Title = styled_components_1.default(typography_1.Heading)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin: 0;\n"], ["\n margin: 0;\n"])));
exports.PlaceholderText = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n"], ["\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])));
exports.Button = styled_components_1.default(button_1.Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n\n &[aria-expanded='true'] {\n ", "\n ", "\n }\n"], ["\n ",
"\n\n &[aria-expanded='true'] {\n ",
"\n ",
"\n }\n"])), function (_) {
var _a;
return _.iconAfter && (_a = {
justifyContent: 'space-between'
},
_a[button_1.ButtonElements.IconWrapper] = {
transition: 'transform 0.12s linear'
},
_a);
}, function (_) {
var _a;
return _.iconAfter && (_a = {},
_a[button_1.ButtonElements.IconWrapper] = {
transform: 'rotate(180deg)'
},
_a);
}, function (_) {
return _.popoverAppearance === 'accordion' && {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
};
});
exports.FilterInput = styled_components_1.default(text_input_1.TextInput)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-shadow: none;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n width: 100%;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n"], ["\n box-shadow: none;\n background-color: ", ";\n border-bottom: 1px solid ", ";\n width: 100%;\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n"])), function (_) { return _.theme.colors.background.tint1; }, function (_) { return "" + _.theme.colors.border.default; }, function (_) { return _.theme.colors.text.muted; });
exports.PopoverHeader = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: ", ";\n padding-right: ", ";\n padding-left: ", ";\n min-height: 40px;\n box-sizing: border-box;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: ", ";\n padding-right: ", ";\n padding-left: ", ";\n min-height: 40px;\n box-sizing: border-box;\n"])), function (_) { return "1px solid " + _.theme.colors.border.default; }, function (_) { return _.theme.spacing.xxs; }, function (_) { return _.theme.spacing.sm; });
exports.MenuContainer = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n overflow-y: auto;\n position: relative;\n ", "\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background-color: rgba(0, 0, 0, 0.1);\n }\n"], ["\n overflow-y: auto;\n position: relative;\n ",
"\n\n &::-webkit-scrollbar {\n width: 4px;\n }\n &::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background-color: rgba(0, 0, 0, 0.1);\n }\n"])), function (_) { return ({
maxHeight: _.height
}); });
exports.CloseButton = styled_components_1.default(button_1.Button)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n padding-left: 6px;\n padding-right: 6px;\n svg {\n fill: ", ";\n width: 12px;\n height: 12px;\n }\n"], ["\n padding-left: 6px;\n padding-right: 6px;\n svg {\n fill: ", ";\n width: 12px;\n height: 12px;\n }\n"])), function (_) { return _.theme.colors.icon.default; });
exports.EmptyView = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n margin: ", " 0;\n display: flex;\n justify-content: center;\n text-align: center;\n"], ["\n margin: ", " 0;\n display: flex;\n justify-content: center;\n text-align: center;\n"])), function (_) { return _.theme.spacing.xs; });
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;