Repository URL to install this package:
|
Version:
3.12.20 ▾
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { FV, PC } from '@filerobot/common';
import styled from 'styled-components';
var strTruncateMixin = "\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n";
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n min-width: 310px;\n ", "\n\n .SfxNotification-Notification {\n margin-right: 0;\n }\n .SfxNotification-Close {\n display: none;\n }\n\n .SfxNotification-root {\n margin-right: 0;\n width: 100%;\n }\n"])), function (_ref) {
var disabled = _ref.disabled;
return disabled && 'filter: grayscale(1);';
});
var Selector = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 60px;\n margin-top: 8px;\n margin-bottom: 24px;\n padding-left: ", ";\n padding-right: ", ";\n"])), function (_ref2) {
var _ref2$selectorPadding = _ref2.selectorPaddingX,
selectorPaddingX = _ref2$selectorPadding === void 0 ? 17 : _ref2$selectorPadding;
return "".concat(selectorPaddingX, "px");
}, function (_ref3) {
var _ref3$selectorPadding = _ref3.selectorPaddingX,
selectorPaddingX = _ref3$selectorPadding === void 0 ? 17 : _ref3$selectorPadding;
return "".concat(selectorPaddingX, "px");
});
var SelectorSeparator = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n height: 2px;\n background: ", ";\n flex: 1 1;\n margin: 0 2px;\n opacity: 0.55;\n ", "\n"])), function (_ref4) {
var active = _ref4.active,
theme = _ref4.theme;
return active ? theme.palette[PC.AccentPrimary] : theme.palette[PC.ButtonDisabledText];
}, function (_ref5) {
var disabled = _ref5.disabled;
return disabled && 'filter: grayscale(1);';
});
var SelectorDot = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: ", ";\n border: ", ";\n opacity: ", ";\n position: relative;\n ", "\n ", "\n\n ", "\n\n &:before {\n ", "\n content: '", "';\n position: absolute;\n left: 50%;\n max-width: ", ";\n transform: translate(-50%, 0);\n height: 40px;\n color: ", ";\n display: flex;\n ", "\n\n ", "\n }\n"])), function (_ref6) {
var active = _ref6.active,
theme = _ref6.theme;
return theme.palette[active ? PC.AccentPrimary : PC.BackgroundStateless];
}, function (_ref7) {
var active = _ref7.active,
theme = _ref7.theme;
return "1px solid ".concat(theme.palette[active ? PC.AccentPrimary : PC.BorderPrimaryStateless]);
}, function (_ref8) {
var active = _ref8.active,
selected = _ref8.selected;
return !active || selected ? 1 : 0.55;
}, function (_ref9) {
var readOnly = _ref9.readOnly;
return !readOnly && 'cursor: pointer;';
}, function (_ref10) {
var disabled = _ref10.disabled;
return disabled && 'filter: grayscale(1);';
}, function (_ref11) {
var selected = _ref11.selected,
theme = _ref11.theme,
readOnly = _ref11.readOnly;
return selected && "\n ".concat(Selector).concat(readOnly ? '' : ':not(:hover)', " && {\n background: #ffffff;\n border: 6px solid ").concat(theme.palette[PC.AccentPrimary], ";\n\n &:after {\n content: ' ';\n position: absolute;\n top: -6px;\n bottom: -6px;\n right: -6px;\n left: -6px;\n border-radius: 50px;\n }\n\n &:before {\n height: 35px;\n }\n }\n ");
}, function (_ref12) {
var theme = _ref12.theme,
selected = _ref12.selected;
return theme.typography.font[selected ? FV.LabelMediumEmphasis : FV.LabelMedium];
}, function (_ref13) {
var $label = _ref13.$label;
return $label;
}, function (_ref14) {
var _ref14$itemLabelWidth = _ref14.itemLabelWidth,
itemLabelWidth = _ref14$itemLabelWidth === void 0 ? 80 : _ref14$itemLabelWidth;
return "".concat(itemLabelWidth, "px");
}, function (_ref15) {
var active = _ref15.active,
theme = _ref15.theme;
return theme.palette[active ? PC.AccentPrimary : PC.ButtonDisabledText];
}, strTruncateMixin, function (_ref16) {
var odd = _ref16.odd;
return odd ? 'top: 0; align-items: end;' : 'bottom: 0; align-items: start;';
});
var Permissions = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n border-radius: 4px;\n margin-top: ", ";\n"])), function (_ref17) {
var noMarginTop = _ref17.noMarginTop;
return noMarginTop ? '0' : '40px';
});
var PermissionsLabel = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n ", "\n color: ", ";\n"])), function (_ref18) {
var theme = _ref18.theme;
return theme.typography.font[FV.LabelMedium];
}, function (_ref19) {
var theme = _ref19.theme;
return theme.palette[PC.TextSecondary];
});
var PermissionsContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n margin-top: 12px;\n flex-wrap: wrap;\n gap: 0 12px;\n"])));
var PermissionItem = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n padding: 4px 0;\n\n :not(:last-child) {\n margin-bottom: 4px;\n }\n"])));
var PermissionItemIcon = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n background: ", ";\n color: #ffffff;\n border-radius: 50%;\n width: 12px;\n height: 12px;\n margin-right: 4px;\n"])), function (_ref20) {
var active = _ref20.active,
theme = _ref20.theme;
return theme.palette[active ? PC.Success : PC.Error];
});
var PermissionItemLabel = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n ", "\n color: ", ";\n ", "\n"])), function (_ref21) {
var theme = _ref21.theme;
return theme.typography.font[FV.LabelSmall];
}, function (_ref22) {
var theme = _ref22.theme;
return theme.palette[PC.TextPrimary];
}, strTruncateMixin);
var Styled = {
Container: Container,
Selector: Selector,
SelectorSeparator: SelectorSeparator,
SelectorDot: SelectorDot,
Permissions: Permissions,
PermissionsLabel: PermissionsLabel,
PermissionsContainer: PermissionsContainer,
PermissionItem: PermissionItem,
PermissionItemIcon: PermissionItemIcon,
PermissionItemLabel: PermissionItemLabel
};
export default Styled;