react-filerobot-video-editor/lib/components/common/AnnotationOptions/AnnotationOptions.styled.js

React component version of filerobot video editor (FVE).

import styled from"styled-components";import Label from"@scaleflex/ui/core/label";import{Color as PC}from"@scaleflex/ui/utils/types/palette";import Menu from"@scaleflex/ui/core/menu";var StyledOptions=styled.div.withConfig({componentId:"sc-uuvquo-0"})(["display:flex;align-items:center;justify-content:center;padding:8px 16px;margin-top:4px;gap:8px;flex-wrap:wrap;"," svg{color:",";}"],function(a){var b=a.isPhoneScreen;return b&&"\n    max-width: 315px;\n    padding: 0;\n  "},function(a){var b=a.theme.palette;return b[PC.IconsPrimary]}),StyledOptionsWrapper=styled.div.withConfig({componentId:"sc-uuvquo-1"})(["display:flex;flex-wrap:wrap;margin-left:-4px;gap:4px;.FIE_annotation-option-triggerer{padding:6px;}"]),StyledOptionPopupContent=styled.div.withConfig({componentId:"sc-uuvquo-2"})(["background:",";border-radius:4px;display:flex;flex-direction:column;padding:8px 12px;overflow:visible;"," "," *{font-family:'Roboto',sans-serif;}"],function(a){var b=a.theme;return b.palette["bg-secondary"]},function(a){var b=a.position;return b&&"\n    display: grid;\n    grid-template-columns: repeat(4, auto);\n    padding: 0;\n    margin-top: 8px;\n    box-shadow: 0px 1px 2px ".concat(function(a){var b=a.theme;return b.palette["light-shadow"]},";\n    ")},function(a){var b=a.disablePadding;return b&&"\n      padding: 0;\n    "}),StyledSpacedOptionFields=styled.div.withConfig({componentId:"sc-uuvquo-3"})(["display:flex;align-items:center;gap:12px;",""],function(a){var b=a.preventFlex;return b&&"\n      display: block;\n\n      label {\n        margin-bottom: 8px;\n      }\n  "}),StyledTwoColumnsContainer=styled.div.withConfig({componentId:"sc-uuvquo-4"})(["display:flex;align-items:center;justify-content:space-between;"]),StyledColumn=styled.div.withConfig({componentId:"sc-uuvquo-5"})(["&:not(:first-child){margin-left:12px;}"]),StyledIconWrapper=styled.div.withConfig({componentId:"sc-uuvquo-6"})(function(a){var b=a.theme,c=a.addThinBorder,d=a.secondaryIconColor,e=a.active,f=a.watermarkTool;return"\n    cursor: pointer;\n    padding: ".concat(f?"6px":"8px 12px",";\n    border-radius: 2px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 6px;\n\n    svg {\n      vertical-align: middle;\n      margin: 0 auto;\n      color: ").concat(b.palette[PC.IconsPrimary],";\n    }\n\n    ").concat(c?"border: 0.5px solid ".concat(b.palette["borders-secondary"],";\n        padding: 8px 8px;"):"",";\n    color: ").concat(d?b.palette[PC.IconsSecondary]:"",";\n\n    ").concat(e&&"\n      border-radius: 4px;\n      border-color: ".concat(b.palette[PC.AccentStateless],";\n      background-color: ").concat(b.palette[PC.BackgroundActive],";\n\n        * {\n          color: ").concat(b.palette[PC.AccentStateless],";\n        }\n      "),"\n\n    :hover {\n      background: ").concat(b.palette["bg-primary-active"],";\n    }\n  ")}),StyledIconLabel=styled(Label).withConfig({componentId:"sc-uuvquo-7"})(["color:",";"],function(a){var b=a.theme.palette;return b[PC.TextPrimary]}),StyledOptionsPopUp=styled(Menu).withConfig({componentId:"sc-uuvquo-8"})(["width:auto;"]);export{StyledTwoColumnsContainer,StyledColumn,StyledIconWrapper,StyledSpacedOptionFields,StyledOptions,StyledOptionsWrapper,StyledOptionPopupContent,StyledIconLabel,StyledOptionsPopUp};