react-image-editor-q/lib/components/ToolsBar/ToolsBar.styled.js

SSR-safe React wrapper around Filerobot Image Editor

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-1dqmjgr-0"})(["width:fit-content;margin:0 auto;max-width:99.5%;max-height:170px;[data-phone=\"true\"] &{padding:0;margin-top:8px;max-height:initial;}"]),StyledToolsBarItems=styled.div.withConfig({componentId:"sc-1dqmjgr-1"})(["padding:8px 16px 16px 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-1dqmjgr-2"})(function(a){var b=a.theme,c=a.isPhoneScreen;return"\n    display: flex;\n    flex: 1;\n    height: 100%;\n    gap: 6px;\n    border-radius: 2px;\n    align-items: center;\n    justify-content: center;\n    padding: 6px 12px;\n    border: 0.062rem solid white;\n    \n    svg {\n      color: black;\n      flex-shrink: 0;\n    }\n\n    &,\n    * {\n      cursor: pointer;\n    }\n\n    &:hover {\n      border-radius: 20px;\n      border: 0.062rem solid #a8a8a8;\n    }\n\n    &[aria-selected='true'] {\n      background-color: #dedede;\n      border-radius: 20px;\n      border: 0.062rem solid #a8a8a8;\n\n      * {\n        color: black;\n      }\n    }\n\n    ".concat(c&&css(["flex-direction:column;min-width:52px;min-height:52px;padding:8px;gap:4px;"]),"\n  ")}),StyledToolsBarItemButtonLabel=styled(Label).withConfig({componentId:"sc-1dqmjgr-3"})(function(a){var b=a.theme,c=a.isPhoneScreen;return css(["color:",";font-size:0.6875rem;line-height:14px;font-family:'Open Sans',sans-serif;letter-spacing:0.04rem;",";"],b.palette[PC.TextPrimary],c&&b.typography.font[FV.LabelExtraSmallUp])}),StyledToolsBarItemOptionsWrapper=styled.div.withConfig({componentId:"sc-1dqmjgr-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};