react-filerobot-video-editor/lib/components/ToolsBar/ToolsBar.styled.js

React component version of filerobot video editor (FVE).

import styled,{css}from"styled-components";import Label from"@scaleflex/ui/core/label";import{Color as PC}from"@scaleflex/ui/utils/types/palette";import{FontVariant as FV}from"@scaleflex/ui/utils/types/typography";var StyledToolsBar=styled.div.withConfig({componentId:"sc-1rhyvbt-0"})(["width:",";margin:0 auto;max-width:99.5%;max-height:170px;[data-phone='true'] &{padding:0;margin-top:8px;max-height:initial;}"],function(a){var b=a.width;return b}),StyledToolsBarItems=styled.div.withConfig({componentId:"sc-1rhyvbt-1"})(["padding:16px;display:flex;gap:12px;align-items:center;overflow:hidden;",""],function(a){var b=a.isPhoneScreen;return b&&"\n    justify-content: space-between;\n    padding: 12px;\n    gap: 8px;\n  "}),StyledToolsBarItemButton=styled.div.withConfig({componentId:"sc-1rhyvbt-2"})(function(a){var b=a.theme,c=a.isPhoneScreen,d=a.disabled;return"\n    display: flex;\n    gap: 6px;\n    border-radius: 2px;\n    align-items: center;\n    justify-content: center;\n    padding: 8px 12px;\n\n    svg {\n      color: ".concat(b.palette[PC.IconsPrimary],";\n\n      ").concat(d&&"color: ".concat(b.palette[PC.IconsMuted],";"),"\n    }\n\n    &,\n    * {\n      cursor: ").concat(d?"not-allowed":"pointer",";\n    }\n\n    &:hover {\n      ").concat(!c&&"background: ".concat(b.palette["bg-primary-active"],";"),"\n\n      ").concat(d&&"background: transparent;","\n    }\n\n    &[aria-selected='true'] {\n      ").concat(!c&&"background: ".concat(b.palette["bg-primary-active"],";"),"\n      border-radius: 4px;\n\n      * {\n        color: ").concat(b.palette["accent-primary-active"],";\n      }\n    }\n\n    ").concat(c&&css(["display:flex;flex-direction:column;min-width:52px;min-height:52px;padding:8px;gap:4px;"]),"\n  ")}),StyledToolsBarItemButtonLabel=styled(Label).withConfig({componentId:"sc-1rhyvbt-3"})(function(a){var b=a.theme,c=a.isPhoneScreen,d=a.disabled;return css(["color:",";",";"],d?b.palette[PC.TextPlaceholder]:b.palette[PC.TextPrimary],c&&b.typography.font[FV.LabelExtraSmallUp])}),StyledToolsBarItemOptionsWrapper=styled.div.withConfig({componentId:"sc-1rhyvbt-4"})(["position:relative;width:100%;transition:max-height 100ms ease-in-out;display:flex;justify-content:center;align-items:center;gap:24px;",";",""],function(a){return"\n      max-height: ".concat(a.hasChildren?"56px":0,";\n      margin: ").concat(a.hasChildren?"0 auto 8px":0,";\n    ")},function(a){var b=a.isPhoneScreen;return b&&"\n    max-height: unset;\n    flex-direction: column;\n    padding: 0 12px 8px 12px;\n    gap: 8px;\n    margin: 0;\n  "});export{StyledToolsBar,StyledToolsBarItems,StyledToolsBarItemButton,StyledToolsBarItemButtonLabel,StyledToolsBarItemOptionsWrapper};