Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
@filerobot/explorer / lib / components / GalleryRoleSelect / GalleryRoleSelect.styled.js
Size: Mime:
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;