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 / ContextMenu / ContextMenu.styled.js
Size: Mime:
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import styled, { css } from 'styled-components';
import { PC, PSH, FV } from '@filerobot/common';
var ContextMenuWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  background-color: ", ";\n  border-radius: 4px;\n  z-index: ", ";\n  padding: ", ";\n  overflow-y: auto;\n  min-width: ", ";\n  width: max-content;\n  max-width: 250px;\n  height: max-content;\n  color: ", ";\n  box-shadow: ", ";\n\n  ", "\n\n  .filerobot-common-Checkbox {\n    margin-right: 0;\n  }\n\n"])), function (_ref) {
  var palette = _ref.theme.palette;
  return palette[PC.BackgroundStateless];
}, function (_ref2) {
  var $zIndex = _ref2.$zIndex;
  return $zIndex;
}, function (_ref3) {
  var isFileType = _ref3.isFileType;
  return isFileType ? '8px 0px' : '4px 0px';
}, function (_ref4) {
  var isFileType = _ref4.isFileType,
    isSubList = _ref4.isSubList;
  return !isFileType ? '180px' : isSubList ? '224px' : '250px';
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette[PC.TextPrimary];
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.shadows[PSH.ShadowLg];
}, function (_ref7) {
  var isHidden = _ref7.isHidden;
  return isHidden && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: none;\n  "])));
});
var OptionsList = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0;\n"])));
var optionWrapperBgColorsMixin = function optionWrapperBgColorsMixin() {
  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &:hover {\n    background-color: ", ";\n    ", ";\n\n    & > svg path {\n      ", ";\n    }\n  }\n\n  &:active {\n    background-color: ", ";\n    ", ";\n\n    & > svg path {\n      ", ";\n    }\n  }\n\n  &.active {\n    background-color: ", ";\n  }\n"])), function (_ref8) {
    var theme = _ref8.theme;
    return theme.palette[PC.BackgroundHover];
  }, function (_ref9) {
    var $hoverTheme = _ref9.$hoverTheme,
      theme = _ref9.theme;
    return $hoverTheme === 'danger' ? "background-color: ".concat(theme.palette[PC.Red_0_1_Overlay], ";\n      color: ").concat(theme.palette[PC.ErrorHover], ";") : '';
  }, function (_ref10) {
    var $hoverTheme = _ref10.$hoverTheme,
      theme = _ref10.theme;
    return $hoverTheme === 'danger' ? "fill: ".concat(theme.palette[PC.ErrorHover], "};") : '';
  }, function (_ref11) {
    var theme = _ref11.theme;
    return theme.palette[PC.BackgroundHover];
  }, function (_ref12) {
    var $hoverTheme = _ref12.$hoverTheme,
      theme = _ref12.theme;
    return $hoverTheme === 'danger' ? "background-color: ".concat(theme.palette[PC.Red_0_1_Overlay], ";\n    color: ").concat(theme.palette[PC.ErrorActive], ";") : '';
  }, function (_ref13) {
    var $hoverTheme = _ref13.$hoverTheme,
      theme = _ref13.theme;
    return $hoverTheme === 'danger' ? "fill: ".concat(theme.palette[PC.ErrorActive], "};") : '';
  }, function (_ref14) {
    var theme = _ref14.theme;
    return theme.palette[PC.BackgroundActive];
  });
};
var OptionWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  cursor: ", ";\n  user-select: none;\n  transition: all 100ms ease-out;\n  ", ";\n\n  [role=checkbox], [role=radiobox] {\n    height: 16px;\n    width: 16px;\n  }\n\n  ", "\n\n  ", "\n\n  &-option-prefix {\n    margin-right: 8px;\n  }\n"])), function (_ref15) {
  var $singleCustomMenuOption = _ref15.$singleCustomMenuOption;
  return $singleCustomMenuOption ? 'default' : 'pointer';
}, function (_ref16) {
  var isFileType = _ref16.isFileType,
    isLabelsContext = _ref16.isLabelsContext,
    isSubList = _ref16.isSubList,
    $singleCustomMenuOption = _ref16.$singleCustomMenuOption;
  return "\n    gap: ".concat(isFileType ? '10px' : '8px', ";\n    padding: ").concat($singleCustomMenuOption ? 0 : isFileType ? '9px 12px' : '8px 16px', ";\n    margin: ").concat(isFileType && (!isSubList || !isLabelsContext) ? '0 8px' : '0', ";\n    border-radius: ").concat(isFileType ? '4px' : '0', ";\n  ");
}, function (_ref17) {
  var $singleCustomMenuOption = _ref17.$singleCustomMenuOption;
  return $singleCustomMenuOption ? '' : optionWrapperBgColorsMixin();
}, function (_ref18) {
  var $disabled = _ref18.$disabled;
  return $disabled && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    cursor: default;\n    display: ", ";\n    background-color: transparent;\n    user-select: none;\n    color: ", ";\n\n    & > svg path {\n      fill: ", ";\n    }\n  "])), function (_ref19) {
    var $key = _ref19.$key;
    return $key.includes('SEPARATOR') ? '' : 'flex';
  }, function (_ref20) {
    var theme = _ref20.theme;
    return theme.palette[PC.BordersSecondary];
  }, function (_ref21) {
    var theme = _ref21.theme;
    return theme.palette[PC.BordersSecondary];
  });
});
var OptionContent = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n  flex-grow: 1;\n"])), function (_ref22) {
  var theme = _ref22.theme;
  return theme.typography.font[FV.InputMd];
});
var OptionContentDesc = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-left: 4px;\n"])));
var OptionSuffix = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin-left: 10px;\n"])));
var Styled = {
  ContextMenuWrapper: ContextMenuWrapper,
  OptionsList: OptionsList,
  OptionWrapper: OptionWrapper,
  OptionContent: OptionContent,
  OptionContentDesc: OptionContentDesc,
  OptionSuffix: OptionSuffix
};
export default Styled;