react-filerobot-image-editor/lib/components/Topbar/Topbar.styled.js

React component version of filerobot image editor (FIE).

import styled from"styled-components";import Button from"@scaleflex/ui/core/button";import IconButton from"@scaleflex/ui/core/icon-button";import Label from"@scaleflex/ui/core/label";import{CrossButton,InputGroup,SelectGroup}from"@scaleflex/ui/core";import{Color as PC}from"@scaleflex/ui/utils/types/palette";import{FontVariant as FV}from"@scaleflex/ui/utils/types/typography";var StyledTopbar=styled.div.withConfig({componentId:"sc-21g986-0"})(["padding:16px;box-sizing:border-box;position:relative;width:100%;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;border-bottom:1px solid ",";[data-phone='true'] &{padding:6px 6px 4px 6px;","}"],function(a){var b=a.theme.palette;return b[PC.BordersSecondary]},function(a){var b=a.isPhoneScreen;return b&&"\n      padding: 12px 12px 0px;\n      gap: 12px;\n    "}),StyledMainButtonsWrapper=styled.div.withConfig({componentId:"sc-21g986-1"})(["display:flex;align-items:center;order:1;"]),StyledControlButtonsWrapper=styled.div.withConfig({componentId:"sc-21g986-2"})(["display:flex;align-items:center;order:3;gap:4px;"]),StyledHistoryButton=styled(IconButton).withConfig({componentId:"sc-21g986-3"})(["margin:",";svg{color:",";}"],function(a){var b=a.margin;return null!==b&&void 0!==b?b:"0 4px"},function(a){var b=a.theme.palette,c=a.disabled;return c?b[PC.IconsMuted]:b[PC.IconsPrimary]}),StyledZoomingWrapper=styled.div.withConfig({componentId:"sc-21g986-4"})(["display:flex;align-items:center;gap:2px;"]),StyledDimensionsLabel=styled(Label).withConfig({componentId:"sc-21g986-5"})(["flex-shrink:0;color:",";",";"],function(a){var b=a.theme.palette;return b[PC.TextPlaceholder]},function(a){var b=a.theme.typography;return b.font[FV.LabelMedium]}),StyledSmallButton=styled(IconButton).withConfig({componentId:"sc-21g986-6"})(["padding:8px;svg{color:",";}"],function(a){var b=a.theme.palette,c=a.showBackButton;return c?b[PC.IconsPrimary]:b[PC.IconsMuted]}),StyledFlexCenterAlignedContainer=styled.div.withConfig({componentId:"sc-21g986-7"})(["width:",";height:32px;display:block;width:100%;order:4;",";@media (min-width:761px){display:flex;align-items:center;justify-content:center;width:fit-content;order:2;}"],function(a){var b=a.showBackButton;return b?"318px":"384px"},function(a){var b=a.reverseDirection;return b?"flex-direction: row-reverse":""}),StyledZoomPercentageLabel=styled(Label).withConfig({componentId:"sc-21g986-8"})(["cursor:pointer;color:",";",";"],function(a){var b=a.theme.palette;return b[PC.TextPrimary]},function(a){var b=a.theme.typography;return b.font[FV.InputMd]}),StyledBackButtonLabel=styled.span.withConfig({componentId:"sc-21g986-9"})(["",";"],function(a){var b=a.theme.typography;return b.font[FV.ButtonMdEmphasis]}),StyledCloseButton=styled(CrossButton).withConfig({componentId:"sc-21g986-10"})(["padding:8px;z-index:111;"]),StyledSaveButton=styled(Button).withConfig({componentId:"sc-21g986-11"})(["padding:4px 12px;"]),StyledFileNameInput=styled(InputGroup).withConfig({componentId:"sc-21g986-12"})([""]),StyledFileExtensionSelect=styled(SelectGroup).withConfig({componentId:"sc-21g986-13"})(["margin-top:16px;"]),StyledQualityWrapper=styled.div.withConfig({componentId:"sc-21g986-14"})(["width:100%;margin-top:16px;"]),StyledResizeOnSave=styled.div.withConfig({componentId:"sc-21g986-15"})(["margin-top:16px;width:100%;"]),StyledResizeOnSaveLabel=styled(Label).withConfig({componentId:"sc-21g986-16"})(["margin-bottom:4px;"]),StyledHistoryButtons=styled.div.withConfig({componentId:"sc-21g986-17"})(["display:flex;gap:6px;"]),StyledImageOptionsButtons=styled.div.withConfig({componentId:"sc-21g986-18"})(["display:flex;gap:12px;justify-content:",";"],function(a){var b=a.isPhoneScreen;return b?"space-between":"center"}),StyledMenuIconButton=styled(IconButton).withConfig({componentId:"sc-21g986-19"})(["@media (min-width:761px){display:none;}"]),StyledDimensionsButtons=styled.div.withConfig({componentId:"sc-21g986-20"})(["display:flex;gap:12px;align-items:center;"]);export{StyledTopbar,StyledFlexCenterAlignedContainer,StyledHistoryButton,StyledZoomingWrapper,StyledSmallButton,StyledZoomPercentageLabel,StyledBackButtonLabel,StyledCloseButton,StyledSaveButton,StyledFileNameInput,StyledFileExtensionSelect,StyledQualityWrapper,StyledResizeOnSave,StyledDimensionsLabel,StyledMainButtonsWrapper,StyledControlButtonsWrapper,StyledHistoryButtons,StyledImageOptionsButtons,StyledMenuIconButton,StyledDimensionsButtons,StyledResizeOnSaveLabel};