IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shared: refactor rtl

Browse Source
This commit is contained in:
Aleksandr Lushkin 2024-07-09 15:32:11 +02:00
parent 9f9d2bdbb7
commit ce5fd3f835
118 changed files with 552 additions and 1856 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/shared/components/access-right-select/AccessRightSelect.styled.ts
View File

@ -24,7 +24,7 @@
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import styled, { css } from "styled-components";
import styled from "styled-components";
import { Base } from "../../themes";
import { mobile } from "../../utils";
@ -33,14 +33,7 @@ import { ComboBox } from "../combobox";
const StyledWrapper = styled(ComboBox)`
.combo-button {
padding-left: 8px;
padding-right: 8px;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
padding-left: 8px;
padding-right: 8px;
`}
padding-inline: 8px;
}
@media ${mobile} {
@ -85,7 +78,7 @@ const StyledItemDescription = styled.div`
StyledItemDescription.defaultProps = { theme: Base };
const StyledItemIcon = styled.img`
margin-right: 8px;
margin-inline-end: 8px;
`;
const StyledItemContent = styled.div`

13
packages/shared/components/alert/Alert.styled.ts
View File

@ -74,16 +74,9 @@ const StyledArrowRightIcon = styled(ArrowRightIcon)`
const StyledCrossIcon = styled(CrossReactSvg)`
position: absolute;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? css`
left: 0px;
margin-left: 8px;
`
: css`
right: 0px;
margin-right: 8px;
`}
inset-inline-end: 0px;
margin-inline-end: 8px;
margin-top: 8px;
cursor: pointer;

8
packages/shared/components/all/All.stories.tsx
View File

@ -270,7 +270,7 @@ const Template = () => (
</div>
<div style={{ padding: "8px 0" }}>
<div style={{ display: "flex" }}>
<div style={{ marginRight: 16 }}>
<div style={{ marginInlineEnd: 16 }}>
<Button
size={ButtonSize.normal}
isDisabled={false}
@ -449,7 +449,7 @@ const Template = () => (
{/* <BooleanValue>
{({ value, toggle }: any) => ( */}
<div style={{ display: "flex" }}>
<div style={{ marginRight: 24 }}>
<div style={{ marginInlineEnd: 24 }}>
<Checkbox
id="id"
name="name"
@ -529,7 +529,7 @@ const Template = () => (
label="Loading..."
/>
</div>
<div style={{ padding: "8px 0", marginLeft: 45 }}>
<div style={{ padding: "8px 0", marginInlineStart: 45 }}>
<Loader
type={LoaderTypes.oval}
color="black"
@ -537,7 +537,7 @@ const Template = () => (
label="Loading"
/>
</div>
<div style={{ padding: "8px 0", marginLeft: 45 }}>
<div style={{ padding: "8px 0", marginInlineStart: 45 }}>
<Loader
type={LoaderTypes.dualRing}
color="black"

2
packages/shared/components/app-loader/AppLoader.styled.ts
View File

@ -40,7 +40,7 @@ export const StyledContainer = styled.div`
z-index: 5000;
position: fixed;
top: 0;
left: 0;
inset-inline-start: 0;
.pageLoader {
position: fixed;

53
packages/shared/components/article-item/ArticleItem.styled.ts
View File

@ -36,13 +36,8 @@ const badgeWithoutText = css`
position: absolute;
top: ${(props) => props.theme.catalogItem.badgeWithoutText.position};
right: ${(props) => props.theme.catalogItem.badgeWithoutText.position};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
left: ${props.theme.catalogItem.badgeWithoutText.position};
right: auto;
`}
inset-inline-end: ${({ theme }) =>
theme.catalogItem.badgeWithoutText.position};
border-radius: 1000px;
background-color: ${(props) =>
@ -107,15 +102,10 @@ const StyledArticleItemHeaderContainer = styled.div<{
const StyledArticleItemBadgeWrapper = styled.div<{ showText?: boolean }>`
z-index: 3;
margin-left: ${(props) => props.theme.catalogItem.badgeWrapper.marginLeft};
margin-right: ${(props) => props.theme.catalogItem.badgeWrapper.marginRight};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-right: ${props.theme.catalogItem.badgeWrapper.marginLeft};
margin-left: ${props.theme.catalogItem.badgeWrapper.marginRight};
`}
margin-inline-start: ${(props) =>
props.theme.catalogItem.badgeWrapper.marginLeft};
margin-inline-end: ${(props) =>
props.theme.catalogItem.badgeWrapper.marginRight};
div {
display: flex;
@ -130,7 +120,7 @@ const StyledArticleItemBadgeWrapper = styled.div<{ showText?: boolean }>`
width: ${(props) => props.theme.catalogItem.badgeWrapper.tablet.width};
min-width: ${(props) => props.theme.catalogItem.badgeWrapper.tablet.width};
height: ${(props) => props.theme.catalogItem.badgeWrapper.tablet.height};
margin-right: ${(props) =>
margin-inline-end: ${(props) =>
props.theme.catalogItem.badgeWrapper.tablet.marginRight};
}
@ -169,13 +159,7 @@ StyledArticleItemBadgeWrapper.defaultProps = { theme: Base };
const StyledArticleItemInitialText = styled(Text)`
position: absolute;
top: 2px;
left: 0;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
left: auto;
right: 0;
`}
inset-inline-start: 0;
text-align: center;
width: ${(props) => props.theme.catalogItem.initialText.width};
line-height: ${(props) => props.theme.catalogItem.initialText.lineHeight};
@ -199,14 +183,7 @@ StyledArticleItemInitialText.defaultProps = { theme: Base };
const StyledArticleItemText = styled(Text)<{ isActive?: boolean }>`
width: ${(props) => props.theme.catalogItem.text.width};
margin-left: ${(props) => props.theme.catalogItem.text.marginLeft};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-left: 0;
margin-right: ${props.theme.catalogItem.text.marginLeft};
`}
margin-inline-start: ${(props) => props.theme.catalogItem.text.marginLeft};
line-height: ${(props) => props.theme.catalogItem.text.lineHeight};
@ -228,7 +205,8 @@ const StyledArticleItemText = styled(Text)<{ isActive?: boolean }>`
text-overflow: ellipsis;
@media ${tablet} {
margin-left: ${(props) => props.theme.catalogItem.text.tablet.marginLeft};
margin-inline-start: ${(props) =>
props.theme.catalogItem.text.tablet.marginLeft};
line-height: ${(props) => props.theme.catalogItem.text.tablet.lineHeight};
font-size: ${(props) => props.theme.catalogItem.text.tablet.fontSize};
font-weight: ${(props) => props.theme.catalogItem.text.tablet.fontWeight};
@ -295,14 +273,7 @@ const StyledArticleItemSibling = styled.div<{
}>`
position: absolute;
top: 0;
left: 0;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
left: auto;
right: 0;
`}
inset-inline-start: 0;
width: 100%;
height: 100%;

110
packages/shared/components/article/Article.styled.ts
View File

@ -24,17 +24,12 @@
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import styled, { css } from "styled-components";
import styled from "styled-components";
import MenuIcon from "PUBLIC_DIR/images/menu.react.svg";
import CrossIcon from "PUBLIC_DIR/images/icons/17/cross.react.svg";
import {
mobile,
tablet,
getCorrectFourValuesStyle,
desktop,
} from "../../utils";
import { mobile, tablet, desktop } from "../../utils";
import { Base, TColorScheme } from "../../themes";
@ -55,11 +50,7 @@ const StyledArticle = styled.article<{
box-sizing: border-box;
user-select: none;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `border-left: ${theme.catalog.verticalLine};`
: `border-right: ${theme.catalog.verticalLine};`}
border-inline-end: ${({ theme }) => theme.catalog.verticalLine};
@media ${tablet} {
min-width: ${(props) => (props.showText ? "243px" : "60px")};
@ -136,8 +127,8 @@ StyledArticle.defaultProps = { theme: Base };
const StyledArticleHeader = styled.div<{ showText?: boolean }>`
height: 24px;
padding: ${({ theme }) =>
getCorrectFourValuesStyle("23px 21px 22px 20px", theme.interfaceDirection)};
padding-block: 23px 22px;
padding-inline: 20px 21px;
margin: 0;
display: flex;
justify-content: flex-start;
@ -186,17 +177,11 @@ const StyledHeading = styled.div<{ showText?: boolean }>`
@media ${tablet} {
display: ${(props) => (props.showText ? "block" : "none")};
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: 9px;`
: `margin-left: 9px;`}
margin-inline-start: 9px;
}
@media ${mobile} {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: 0;`
: `margin-left: 0;`}
margin-inline-start: 0;
}
`;
@ -249,8 +234,7 @@ const StyledControlContainer = styled.div`
position: absolute;
top: 37px;
${({ theme }) =>
theme.interfaceDirection === "rtl" ? `left: 10px;` : `right: 10px;`}
inset-inline-end: 10px;
border-radius: 100px;
cursor: pointer;
display: flex;
@ -280,10 +264,7 @@ const StyledArticleProfile = styled.div`
border-top: ${(props) => props.theme.catalog.profile.borderTop};
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `border-left: ${theme.catalog.verticalLine};`
: `border-right: ${theme.catalog.verticalLine};`}
border-inline-end: ${({ theme }) => theme.catalog.verticalLine};
background-color: ${(props) => props.theme.catalog.profile.background};
@media ${tablet} {
@ -295,10 +276,7 @@ const StyledArticleProfile = styled.div`
}
.option-button {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: auto;`
: `margin-left: auto;`}
margin-inline-start: auto;
height: 32px;
width: 32px;
@ -322,14 +300,7 @@ const StyledUserName = styled.div`
flex-wrap: wrap;
max-width: 131px;
min-width: 131px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 12px;
`
: css`
padding-left: 12px;
`}
padding-inline-start: 12px;
cursor: pointer;
`;
@ -339,14 +310,7 @@ const StyledProfileWrapper = styled.div<{
z-index: 209;
position: absolute;
bottom: 0;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
right: 0;
`
: css`
left: 0;
`}
inset-inline-start: 0;
min-width: 251px;
max-width: 251px;
background-color: ${(props) => props.theme.catalog.profile.background};
@ -369,14 +333,7 @@ const StyledArticleApps = styled.div<{
margin-bottom: 16px;
@media ${tablet} {
${(props) =>
props.showText &&
css`
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: 8px;`
: `margin-left: 8px;`}
`}
${(props) => props.showText && "margin-inline-start: 8px;"}
}
@media ${mobile} {
@ -452,14 +409,7 @@ const StyledHideArticleMenuButton = styled.div<{
bottom: ${(props) => (props.hideProfileBlock ? "16px" : "89px")};
background: ${(props) => props.theme.catalog.background};
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
right: 0;
`
: css`
left: 0;
`}
inset-inline-start: 0;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@ -476,23 +426,9 @@ const StyledHideArticleMenuButton = styled.div<{
.article-hide-menu-container {
align-items: center;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 16px;
`
: css`
margin-left: 16px;
`}
margin-inline-start: 16px;
.article-hide-menu-text {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 8px;
`
: css`
margin-left: 8px;
`}
margin-inline-start: 8px;
color: ${({ currentColorScheme }) => currentColorScheme?.main?.accent};
}
@ -513,19 +449,13 @@ const StyledHideArticleMenuButton = styled.div<{
.article-hide-menu-icon_svg,
.article-show-menu-icon_svg {
height: 20px;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
transform: scaleX(-1);
`}
${({ theme }) =>
theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
}
.article-hide-menu-icon_svg {
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
transform: scaleX(-1);
`}
${({ theme }) =>
theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
svg {
path {
fill: ${({ currentColorScheme }) => currentColorScheme?.main?.accent};

60
packages/shared/components/aside/Aside.styled.tsx
View File

@ -25,7 +25,7 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import React from "react";
import styled, { css } from "styled-components";
import styled from "styled-components";
import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg";
@ -50,20 +50,15 @@ const StyledAside = styled(Container)`
position: fixed;
top: ${(props) => props.theme.aside.top};
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: ${props.theme.aside.right};
transform: translateX(
${props.visible ? "0" : props.scale ? "-100%" : "-480px"}
);
`
: css`
right: ${props.theme.aside.right};
transform: translateX(
${props.visible ? "0" : props.scale ? "100%" : "480px"}
);
`}
inset-inline-end: ${({ theme }) => theme.aside.right};
transform: translateX(
${({ visible, scale, theme }) => {
if (visible) return "0";
const value = scale ? "100%" : "480px";
return theme.interfaceDirection === "rtl" ? `-${value}` : value;
}}
);
transition: ${(props) => props.theme.aside.transition};
width: ${(props) => (props.scale ? "100%" : "480px")};
@ -72,19 +67,6 @@ const StyledAside = styled(Container)`
@media ${tablet} {
max-width: calc(100% - 69px);
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
transform: translateX(
${props.visible ? "0" : props.scale ? "-100%" : "-480px"}
);
`
: css`
transform: translateX(
${props.visible ? "0" : props.scale ? "100%" : "480px"}
);
`}
}
@media ${mobile} {
@ -129,37 +111,21 @@ const StyledControlContainer = styled.div`
top: 18px;
${(props) =>
props.theme.interfaceDirection === "rtl" ? `right: -27px;` : `left: -27px;`}
inset-inline-start: -27px;
@media ${tablet} {
display: flex;
top: 18px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? `right: -27px;`
: `left: -27px;`}
}
@media ${mobile} {
display: flex;
top: -27px;
right: 10px;
left: unset;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
right: unset;
left: 10px;
`
: css`
right: 10px;
left: unset;
`}
inset-inline-end: 10px;
inset-inline-start: unset;
}
`;

12
packages/shared/components/avatar/Avatar.styled.ts
View File

@ -42,10 +42,7 @@ const EditContainer = styled.div`
position: absolute;
display: flex;
${(props) =>
props.theme.interfaceDirection === "rtl"
? `left: ${props.theme.avatar.editContainer.right};`
: `right: ${props.theme.avatar.editContainer.right};`}
inset-inline-end: ${({ theme }) => theme.avatar.editContainer.right};
bottom: ${(props) => props.theme.avatar.editContainer.bottom};
background-color: ${(props) =>
@ -109,10 +106,7 @@ const RoleWrapper = styled.div<{
theme: TTheme;
}>`
position: absolute;
${(props) =>
props.theme.interfaceDirection === "rtl"
? `left: ${rightStyle(props)};`
: `right ${rightStyle(props)};`}
inset-inline-end: ${(props) => rightStyle(props)};
bottom: ${(props) => bottomStyle(props)};
@ -161,6 +155,8 @@ const NamedAvatar = styled.div<{ size: AvatarSize; isGroup: boolean }>`
props.isGroup
? props.theme.avatar.initialsContainer.groupColor
: props.theme.avatar.initialsContainer.color};
// doesn't require mirroring for rtl
left: ${(props) => props.theme.avatar.initialsContainer.left};
top: ${(props) => props.theme.avatar.initialsContainer.top};
transform: ${(props) => props.theme.avatar.initialsContainer.transform};

2
packages/shared/components/backdrop/Backdrop.styled.ts
View File

@ -45,6 +45,8 @@ const StyledBackdrop = styled.div<BackdropProps & { needBackground: boolean }>`
width: 100vw;
z-index: ${(props) => props.zIndex};
// doesn't require mirroring for RTL
left: 0;
top: 0;
cursor: ${(props) =>

13
packages/shared/components/button/Button.styled.tsx
View File

@ -139,12 +139,7 @@ const heightStyle = (props: { size?: ButtonSize; theme: TTheme }) =>
const fontSizeStyle = (props: { size?: ButtonSize; theme: TTheme }) =>
props.theme.button.fontSize[props.size || ButtonSize.normal];
const ButtonWrapper = React.forwardRef<
HTMLButtonElement,
ButtonProps & {
interfaceDirection?: boolean | string;
}
>(
const ButtonWrapper = React.forwardRef<HTMLButtonElement, ButtonProps>(
(
{
primary,
@ -172,7 +167,6 @@ const StyledButton = styled(ButtonWrapper).attrs((props: ButtonProps) => ({
tabIndex: props.tabIndex,
}))`
position: relative;
direction: ${(props) => props?.interfaceDirection && "rtl"};
height: ${(props) => heightStyle(props)};
font-size: ${(props) => fontSizeStyle(props)};
@ -255,10 +249,7 @@ const StyledButton = styled(ButtonWrapper).attrs((props: ButtonProps) => ({
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
inset: 0;
width: 100%;
height: 100%;

1
packages/shared/components/button/Button.types.ts
View File

@ -67,5 +67,4 @@ export interface ButtonProps {
export interface ButtonThemeProps extends ButtonProps {
ref: React.LegacyRef<HTMLButtonElement>;
$currentColorScheme?: TColorScheme;
interfaceDirection?: string;
}

7
packages/shared/components/button/button.stories.tsx
View File

@ -254,10 +254,6 @@ const HoveredTemplate = () => {
);
};
const InterfaceDirectionTemplate = () => {
return <Button label="أزرار" size={ButtonSize.normal} icon={<Icon />} />;
};
export const PrimaryButtons: Story = {
render: () => <PrimaryTemplate />,
};
@ -282,6 +278,3 @@ export const ClickedButtons: Story = {
export const HoveredButtons: Story = {
render: () => <HoveredTemplate />,
};
export const InterfaceDirection: Story = {
render: () => <InterfaceDirectionTemplate />,
};

3
packages/shared/components/calendar/sub-components/HeaderButtons.tsx
View File

@ -42,13 +42,12 @@ export const HeaderButtons = ({
isMobile,
}: HeaderButtonsProps) => {
const theme = useTheme();
const isRtl = theme?.interfaceDirection === "rtl";
const marginSize = isMobile ? "12px" : "8px";
return (
<ButtonsContainer>
<StyledRoundButtonTheme
className="arrow-previous"
style={isRtl ? { marginLeft: marginSize } : { marginRight: marginSize }}
style={{ marginInlineEnd: marginSize }}
onClick={onLeftClick}
disabled={isLeftDisabled}
isMobile={isMobile}

28
packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts
View File

@ -51,11 +51,8 @@ const BannerWrapper = styled.div<{
border-radius: 4px;
border: 1px solid ${(props) => props.borderColor};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
transform: scaleX(-1);
`}
${({ theme }) =>
theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
}
@media ${mobile} {
@ -65,14 +62,7 @@ const BannerWrapper = styled.div<{
.close-icon {
position: absolute;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: 14px;
`
: css`
right: 14px;
`}
inset-inline-end: 14px;
top: 18px;
@ -132,15 +122,9 @@ const BannerIcon = styled.div`
position: absolute;
bottom: 1px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: 1px;
transform: scaleX(-1);
`
: css`
right: 1px;
`}
inset-inline-end: 1px;
${({ theme }) =>
theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
@media ${mobile} {
width: 140px;

16
packages/shared/components/checkbox/Checkbox.styled.ts
View File

@ -44,13 +44,7 @@ const StyledLabel = styled.label<{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
.checkbox {
margin-right: 12px;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-right: 0;
margin-left: 12px;
`}
margin-inline-end: 12px;
overflow: visible;
outline: none;
}
@ -184,11 +178,7 @@ const StyledLabel = styled.label<{
.help-button {
display: inline-block;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: 4px;`
: `margin-left: 4px;`}
margin-inline-start: 4px;
}
`;
StyledLabel.defaultProps = { theme: Base };
@ -196,7 +186,7 @@ StyledLabel.defaultProps = { theme: Base };
const HiddenInput = styled.input`
opacity: 0.0001;
position: absolute;
right: 0;
inset-inline-end: 0;
z-index: -1;
`;

2
packages/shared/components/color-input/ColorInput.styled.tsx
View File

@ -65,7 +65,7 @@ InputWrapper.defaultProps = { theme: Base };
export const ColorBlock = styled.span<{ isDisabled?: boolean }>`
position: absolute;
right: 8px;
inset-inline-end: 8px;
cursor: pointer;
width: 20px;

20
packages/shared/components/color-picker/ColorPicker.styled.tsx
View File

@ -29,14 +29,7 @@ import { isMobileOnly } from "react-device-detect";
const Wrapper = styled.div`
.save-button {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 10px;
`
: css`
margin-right: 10px;
`}
inset-inline-end: 10px;
}
.hex-color-picker .react-colorful {
@ -46,7 +39,7 @@ const Wrapper = styled.div`
}
.react-colorful__saturation {
margin: 16px 0 26px 0;
margin-block: 16px 26px;
border-radius: 3px;
}
@ -97,14 +90,7 @@ const Wrapper = styled.div`
display: flex;
.apply-button {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 8px;
`
: css`
margin-right: 8px;
`}
inset-inline-end: 8px;
}
}

19
packages/shared/components/color-theme/sub-components/LoginContainer.ts
View File

@ -62,8 +62,7 @@ const LoginContainer = styled.div<{
}
@media ${mobile} {
margin-left: auto;
margin-right: auto;
margin-inline: auto;
max-width: 100%;
width: calc(100% - 32px);
}
@ -185,10 +184,7 @@ const LoginContainer = styled.div<{
align-items: flex-start;
svg {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: 8px !important;`
: `margin-right: 8px !important;`}
margin-inline-end: 8px !important;
rect {
fill: ${(props) => props.theme.checkbox.fillColor};
stroke: ${(props) => props.theme.checkbox.borderColor};
@ -224,11 +220,7 @@ const LoginContainer = styled.div<{
.login-link {
line-height: 18px;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: auto;`
: `margin-left: auto;`}
margin-inline-start: auto;
}
}
@ -237,10 +229,7 @@ const LoginContainer = styled.div<{
}
.login-button-dialog {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: 8px;`
: `margin-right: 8px;`}
margin-inline-end: 8px;
}
.login-bottom-border {

3
packages/shared/components/color-theme/sub-components/StyledIndicator.ts
View File

@ -35,8 +35,7 @@ const StyledIndicator = styled.div`
position: absolute;
top: 25px;
${({ theme }) =>
theme.interfaceDirection === "rtl" ? `right: 25px;` : `left: 25px;`}
inset-inline-start: 25px;
z-index: 10;
`;

5
packages/shared/components/color-theme/sub-components/StyledInfoPanelToggleWrapper.ts
View File

@ -40,10 +40,7 @@ const StyledInfoPanelToggleWrapper = styled.div<{
align-items: center;
justify-content: center;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `padding-left: 20px;`
: `padding-right: 20px;`}
padding-inline-end: 20px;
.info-panel-toggle-bg {
height: 32px;

5
packages/shared/components/color-theme/sub-components/StyledPreparationPortalProgress.ts
View File

@ -57,10 +57,7 @@ const StyledPreparationPortalProgress = styled.div<{ percent?: number }>`
? props.theme.preparationPortalProgress.colorPercentBig
: props.theme.preparationPortalProgress.colorPercentSmall};
top: 2px;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `right: calc(50% - 9px);`
: `left: calc(50% - 9px);`}
inset-inline-start: calc(50% - 9px);
}
}
`;

4
packages/shared/components/color-theme/sub-components/StyledWrapper.ts
View File

@ -34,9 +34,7 @@ const StyledWrapper = styled.div`
position: fixed;
z-index: 390;
top: 0;
${({ theme }) =>
theme.interfaceDirection === "rtl" ? `right: -6px;` : `left: -6px;`}
inset-inline-start: -6px;
width: 0%;
height: 3px;
-moz-border-radius: 1px;

93
packages/shared/components/combobox/Combobox.styled.ts
View File

@ -110,8 +110,7 @@ const StyledComboBox = styled.div<{
@media ${mobile} {
position: fixed;
top: unset !important;
right: 0;
left: 0;
inset-inline: 0;
bottom: 0 !important;
width: 100%;
width: -moz-available;
@ -197,12 +196,12 @@ const StyledComboButton = styled.div<{
${NoUserSelect};
padding-left: ${(props) =>
padding-inline-start: ${(props) =>
props.size === "content"
? props.theme.comboBox.button.paddingLeft
: props.theme.comboBox.button.selectPaddingLeft};
padding-right: ${(props) =>
padding-inline-end: ${(props) =>
props.size === "content"
? props.displayArrow
? props.theme.comboBox.button.paddingRight
@ -210,24 +209,6 @@ const StyledComboButton = styled.div<{
: props.displayArrow
? props.theme.comboBox.button.selectPaddingRight
: props.theme.comboBox.button.selectPaddingRightNoArrow};
${(props) => {
return (
props.theme.interfaceDirection === "rtl" &&
css`
padding-right: ${props.size === "content"
? props.theme.comboBox.button.paddingLeft
: props.theme.comboBox.button.selectPaddingLeft};
padding-left: ${props.size === "content"
? props.displayArrow
? props.theme.comboBox.button.paddingRight
: props.theme.comboBox.button.paddingRightNoArrow
: props.displayArrow
? props.theme.comboBox.button.selectPaddingRight
: props.theme.comboBox.button.selectPaddingRightNoArrow};
`
);
}}
background: ${(props) =>
!props.noBorder
@ -319,17 +300,12 @@ const StyledComboButton = styled.div<{
}
.combo-button-label {
visibility: ${(props) => (props.isLoading ? "hidden" : "visible")};
${({ theme, plusBadgeValue, noBorder }) => {
const property = `margin-${theme.interfaceDirection === "rtl" ? "left" : "right"}`;
const value = plusBadgeValue
margin-inline-end: ${({ theme, plusBadgeValue, noBorder }) =>
plusBadgeValue
? 0
: noBorder
? theme.comboBox.label.marginRight
: theme.comboBox.label.marginRightWithBorder;
return `${property}: ${value};`;
}}
: theme.comboBox.label.marginRightWithBorder};
color: ${(props) =>
props.isDisabled
? props.theme.comboBox.label.disabledColor
@ -377,13 +353,8 @@ const StyledOptionalItem = styled.div<{
defaultOption?: boolean;
isDisabled?: boolean;
}>`
margin-right: ${(props) => props.theme.comboBox.childrenButton.marginRight};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-right: 0;
margin-left: ${props.theme.comboBox.childrenButton.marginRight};
`}
margin-inline-end: ${(props) =>
props.theme.comboBox.childrenButton.marginRight};
visibility: ${(props) => (props.isLoading ? "hidden" : "visible")};
@ -409,22 +380,15 @@ const StyledIcon = styled.div<{
isDisabled?: boolean;
isSelected?: boolean;
}>`
margin-right: ${(props) => props.theme.comboBox.childrenButton.marginRight};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-right: 0;
margin-left: ${props.theme.comboBox.childrenButton.marginRight};
`}
margin-inline-end: ${(props) =>
props.theme.comboBox.childrenButton.marginRight};
width: ${(props) => props.theme.comboBox.childrenButton.width};
height: ${(props) => props.theme.comboBox.childrenButton.height};
visibility: ${(props) => (props.isLoading ? "hidden" : "visible")};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
transform: scaleX(-1);
`}
${({ theme }) =>
theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
.combo-button_selected-icon {
path {
fill: ${(props) =>
@ -494,41 +458,20 @@ const StyledArrowIcon = styled.div<{
props.displayArrow ? props.theme.comboBox.arrow.width : "0px"};
flex: ${(props) =>
props.displayArrow ? props.theme.comboBox.arrow.flex : "0px"};
margin-right: ${(props) =>
margin-inline-end: ${(props) =>
props.displayArrow ? props.theme.comboBox.arrow.marginRight : "0px"};
margin-left: ${(props) =>
margin-inline-start: ${(props) =>
props.displayArrow ? props.theme.comboBox.arrow.marginLeft : "0px"};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-right: ${props.displayArrow
? props.theme.comboBox.arrow.marginLeft
: "0px"};
margin-left: ${props.displayArrow
? props.theme.comboBox.arrow.marginRight
: "0px"};
`}
${(props) =>
props.isOpen &&
`
transform: scale(1, -1);
`}
${(props) => props.isOpen && `transform: scale(1, -1);`}
`;
StyledArrowIcon.defaultProps = { theme: Base };
const StyledLoader = styled(Loader)<{ displaySize?: ComboBoxSize }>`
position: absolute;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: ${props.displaySize === "content" ? "-16px" : "-8px"};
`
: css`
margin-left: ${props.displaySize === "content" ? "-16px" : "-8px"};
`}
margin-inline-start: ${({ displaySize }) =>
displaySize === "content" ? "-16px" : "-8px"};
margin-top: 2px;
`;

61
packages/shared/components/context-menu/ContextMenu.styled.ts
View File

@ -33,19 +33,11 @@ const styledTabletView = css<{ articleWidth: number }>`
width: ${(props) => props.theme.newContextMenu.devices.tabletWidth};
max-width: ${(props) => props.theme.newContextMenu.devices.tabletWidth};
max-height: ${(props) => props.theme.newContextMenu.devices.maxHeight};
left: ${(props) =>
inset-inline-start: ${(props) =>
props.articleWidth
? `${props.articleWidth}px`
: props.theme.newContextMenu.devices.left};
right: ${(props) => props.theme.newContextMenu.devices.right};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
left: ${props.theme.newContextMenu.devices.right};
right: ${props.articleWidth
? `${props.articleWidth}px`
: props.theme.newContextMenu.devices.left};
`}
inset-inline-end: ${(props) => props.theme.newContextMenu.devices.right};
bottom: ${(props) => props.theme.newContextMenu.devices.bottom};
margin: ${(props) => props.theme.newContextMenu.devices.margin};
`;
@ -55,13 +47,7 @@ const styledMobileView = css`
width: ${(props) => props.theme.newContextMenu.devices.mobileWidth};
max-width: ${(props) => props.theme.newContextMenu.devices.mobileWidth};
max-height: ${(props) => props.theme.newContextMenu.devices.maxHeight};
left: ${(props) => props.theme.newContextMenu.devices.left};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
left: 0;
right: ${props.theme.newContextMenu.devices.left};
`}
inset-inline-start: ${(props) => props.theme.newContextMenu.devices.left};
bottom: ${(props) => props.theme.newContextMenu.devices.bottom};
border-radius: ${(props) => props.theme.newContextMenu.mobileBorderRadius};
`;
@ -72,7 +58,7 @@ export const SubMenuItem = styled.li<{ noHover?: boolean }>`
justify-content: space-between;
& > div {
margin-right: 12px;
margin-inline-end: 12px;
}
& label {
@ -175,13 +161,7 @@ const StyledContextMenu = styled.div<{
.avatar-wrapper {
min-width: 32px;
box-sizing: border-box;
margin-right: 8px;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-right: 0px;
margin-left: 8px;
`}
margin-inline-end: 8px;
}
.text {
@ -199,6 +179,8 @@ const StyledContextMenu = styled.div<{
`}
color: ${(props) => props.theme.menuItem.text.color};
// logical property won't work because of "dir: auto"
text-align: ${({ theme }) =>
theme.interfaceDirection === "rtl" ? `right` : `left`};
text-transform: none;
@ -228,12 +210,10 @@ const StyledContextMenu = styled.div<{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 4px;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-left: -4px;
`}
// doesn't require margin-right in RTL
margin-left: ${({ theme }) =>
theme.interfaceDirection === "rtl" ? "-4px" : "4px"};
margin-top: -4px;
}
@ -352,24 +332,17 @@ const StyledContextMenu = styled.div<{
}
}
margin-right: 8px;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-right: 0px;
margin-left: 8px;
`}
margin-inline-end: 8px;
}
.p-submenu-icon {
margin-left: auto;
padding-left: 8px;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
margin-inline-start: auto;
padding-inline-start: 8px;
${({ theme }) =>
theme.interfaceDirection === "rtl" &&
css`
transform-box: content-box;
transform: scaleX(-1);
margin-right: auto;
margin-left: 0;
`}
path[fill] {
fill: ${(props) => props.theme.dropDownItem.icon.color};

13
packages/shared/components/date-picker/DatePicker.styled.ts
View File

@ -48,8 +48,7 @@ const DropDownStyle = styled.div`
@media ${mobile} {
position: fixed;
top: unset;
right: 0;
left: 0;
inset-inline: 0;
bottom: 0;
width: 100%;
width: -moz-available;
@ -120,13 +119,7 @@ const DateSelector = styled.div`
align-items: center;
.mr-8 {
margin-right: 8px;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-right: 0px;
margin-left: 8px;
`}
margin-inline-end: 8px;
}
`;
@ -141,7 +134,7 @@ const StyledCalendar = styled(Calendar)`
@media ${mobile} {
position: fixed;
bottom: 0;
left: 0;
inset-inline-start: 0;
}
`;

8
packages/shared/components/date-time-picker/DateTimerPicker.styled.ts
View File

@ -66,8 +66,7 @@ const TimeCell = styled.span<{ hasError?: boolean }>`
.clockIcon {
width: 12px;
height: 12px;
padding: ${({ theme }) =>
getCorrectFourValuesStyle("0 10px 0 2px", theme.interfaceDirection)};
padding-inline: 2px 10px;
path {
fill: ${(props) => props.theme.dateTimePicker.colorClockIcon};
@ -88,10 +87,7 @@ const TimeCell = styled.span<{ hasError?: boolean }>`
TimeCell.defaultProps = { theme: Base };
const TimeSelector = styled.span`
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: 4px;`
: `margin-left: 4px;`}
margin-inline-start: 4px;
display: inline-flex;
align-items: center;
`;

10
packages/shared/components/drag-and-drop/DragAndDrop.styled.ts
View File

@ -41,17 +41,11 @@ user-select: none;*/
height: ${(props) => props.theme.dragAndDrop.height};
border: ${(props) => props.theme.dragAndDrop.transparentBorder};
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: -2px;`
: `margin-left: -2px;`}
margin-inline-start: -2px;
position: relative;
@media ${tablet} {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: 0;`
: `margin-left: 0;`}
margin-inline-start: 0;
}
outline: none;
background: ${(props) =>

41
packages/shared/components/drop-down-item/DropDownItem.styled.ts
View File

@ -149,11 +149,10 @@ const StyledDropdownItem = styled.div<{
!props.isHeader &&
css`
background-color: ${props.theme.dropDownItem.hoverBackgroundColor};
text-align: left;
${props.theme.interfaceDirection === "rtl" &&
css`
text-align: right;
`}
// logical property won't work because of "dir: auto"
text-align: ${({ theme }) =>
theme.interfaceDirection === "rtl" ? "right" : "left"};
`}
}
@ -193,8 +192,8 @@ const StyledDropdownItem = styled.div<{
css`
align-items: center;
height: 48px;
padding: 13px 16px 18.2px 16px;
margin: 0 0 6px 0;
padding: 13px 16px 18.2px;
margin: 0 0 6px;
border-bottom: ${theme.dropDownItem.separator.borderBottom};
font-size: 15px;
font-weight: 600;
@ -227,11 +226,12 @@ const StyledDropdownItem = styled.div<{
.submenu-arrow {
${(props) =>
props.theme.interfaceDirection === "rtl"
? `margin-right: auto;
transform: scaleX(-1);
`
: `margin-left: auto;`}
props.theme.interfaceDirection === "rtl" &&
css`
transform-box: content-box;
transform: scaleX(-1);
`}
margin-inline-start: auto;
${(props) =>
props.isActive &&
css`
@ -257,13 +257,7 @@ const IconWrapper = styled.div`
display: flex;
align-items: center;
width: ${(props) => props.theme.dropDownItem.icon.width};
margin-right: ${(props) => props.theme.dropDownItem.icon.marginRight};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-right: 0;
margin-left: ${props.theme.dropDownItem.icon.marginRight};
`}
margin-inline-end: ${(props) => props.theme.dropDownItem.icon.marginRight};
height: 20px;
@ -289,14 +283,7 @@ IconWrapper.defaultProps = { theme: Base };
const ElementWrapper = styled.div`
display: flex;
align-items: center;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: auto;
`
: css`
margin-left: auto;
`}
margin-inline-start: auto;
`;
export {

23
packages/shared/components/drop-down/DropDown.styled.ts
View File

@ -70,24 +70,12 @@ const StyledDropdown = styled.div<{
${(props) =>
props.directionX === "right" &&
!props.directionXStylesDisabled &&
(props.theme.interfaceDirection === "rtl"
? css`
left: ${props.manualX || "0px"};
`
: css`
right: ${props.manualX || "0px"};
`)}
`inset-inline-end: ${props.manualX || "0px"};`}
${(props) =>
props.directionX === "left" &&
!props.directionXStylesDisabled &&
(props.theme.interfaceDirection === "rtl"
? css`
right: ${props.manualX || "0px"};
`
: css`
left: ${props.manualX || "0px"};
`)}
`inset-inline-start: ${props.manualX || "0px"};`}
z-index: ${(props) =>
props.zIndex ? props.zIndex : props.theme.dropDown.zIndex};
@ -122,10 +110,7 @@ const StyledDropdown = styled.div<{
.scroll-drop-down-item {
.scroll-body {
${(props) =>
props.theme.interfaceDirection === "rtl"
? `padding-left: 0 !important;`
: `padding-right: 0 !important;`}
padding-inline-end: 0 !important;
}
}
&.download-dialog-dropDown {
@ -138,7 +123,7 @@ const StyledDropdown = styled.div<{
css`
top: auto !important;
bottom: 0;
${props.theme.interfaceDirection === "rtl" ? `right: 0;` : `left: 0;`}
inset-inline-start: 0;
width: 100%;
`}
}

2
packages/shared/components/dropzone/Dropzone.styled.ts
View File

@ -43,6 +43,8 @@ const StyledDropzone = styled.div<{ $isLoading?: boolean }>`
.dropzone_loader {
position: absolute;
top: 50%;
// doesn't require mirroring for RTL
left: 50%;
transform: translate(-50%, -50%);
}

1
packages/shared/components/email-input/EmailInput.styled.ts
View File

@ -28,6 +28,7 @@ import styled from "styled-components";
import { StyledTextInput } from "../text-input";
const StyledEmailInput = styled(StyledTextInput)`
// logical property won't work because of "dir: auto"
text-align: ${({ theme }) =>
theme.interfaceDirection === "rtl" ? "right" : "left"};
`;

3
packages/shared/components/empty-screen-container/EmptyScreenContainer.styled.ts
View File

@ -128,8 +128,7 @@ const EmptyContentBody = styled.div<{
? "69px" // calculated without section body padding and without filter
: "31px"}; // calculated without section body padding, margin of filter
max-width: 343px;
padding-left: 28px;
padding-right: 28px;
padding-inline: 28px;
width: fit-content;
.ec-image {
height: 75px;

2
packages/shared/components/error-container/ErrorContainer.styled.ts
View File

@ -29,6 +29,8 @@ import styled, { css } from "styled-components";
import { Base } from "@docspace/shared/themes";
import { desktop, mobile } from "@docspace/shared/utils";
// doesn't require mirroring for RTL
const StyledErrorContainer = styled.div<{ isEditor: boolean }>`
background: ${(props) => props.theme.errorContainer.background};
cursor: default;

9
packages/shared/components/field-container/FieldContainer.styled.ts
View File

@ -55,15 +55,8 @@ const getHorizontalCss = css<{ removeMargin?: boolean; labelWidth?: string }>`
position: relative;
margin-top: ${(props) =>
props.theme.fieldContainer.horizontal.iconButton.marginTop};
margin-left: ${(props) =>
margin-inline-start: ${(props) =>
props.theme.fieldContainer.horizontal.iconButton.marginLeft};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-left: 0;
margin-right: ${props.theme.fieldContainer.horizontal.iconButton
.marginLeft};
`}
}
`;

18
packages/shared/components/file-input/FileInput.styled.ts
View File

@ -69,10 +69,11 @@ const StyledFileInput = styled.div<{
text-overflow: ellipsis;
${(props) =>
props.theme.interfaceDirection === "rtl"
? `padding-left: ${paddingRightStyle(props) || "40px"};`
: `padding-right: ${paddingRightStyle(props) || "40px"};`}
// logical property won't work here (dir: auto)
${(props) => {
const side = props.theme.interfaceDirection === "rtl" ? "left" : "right";
return `padding-${side}: ${paddingRightStyle(props) || "40px"};`;
}}
cursor: ${(props) => (props.isDisabled ? "default" : "pointer")};
margin: 0;
@ -130,14 +131,7 @@ const StyledFileInput = styled.div<{
theme.interfaceDirection,
)};
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: 0;
`
: css`
right: 0;
`}
inset-inline-end: 0;
}
.icon-button {

8
packages/shared/components/filling-role-selector/FillingRoleSelector.styled.ts
View File

@ -99,13 +99,7 @@ const StyledRole = styled.div`
`;
const StyledAssignedRole = styled.div`
padding-left: 4px;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
padding-right: 4px;
padding-left: auto;
`}
padding-inline-start: 4px;
color: rgba(170, 170, 170, 1);
::before {

28
packages/shared/components/filling-status-line/FillingStatusLine.styled.ts
View File

@ -59,10 +59,7 @@ const FillingStatusContainer = styled.div<{
.status-done-icon,
.status-interrupted-icon {
${(props) =>
props.theme.interfaceDirection === "rtl"
? `margin-left: 10px;`
: `margin-right: 10px;`}
margin-inline-end: 10px;
}
`;
@ -117,10 +114,7 @@ const AccordionItem = styled.div<{
align-items: center;
justify-content: space-between;
${(props) =>
props.theme.interfaceDirection === "rtl"
? `padding-right: 15px;`
: `padding-left: 15px;`}
padding-inline-start: 15px;
}
.accordion-item-wrapper {
@ -129,23 +123,18 @@ const AccordionItem = styled.div<{
min-height: 40px;
margin: ${(props) => (props.isDone || props.isInterrupted ? "0" : "2px 0")};
${(props) => {
border-inline-start: ${(props) => {
const borderValue = `2px ${
props.isDone || props.isInterrupted ? "solid" : "dashed"
} #A3A9AE;`;
return props.theme.interfaceDirection === "rtl"
? `border-right: ${borderValue}`
: `border-left: ${borderValue}`;
}}
return borderValue;
}};
border-color: ${(props) =>
(props.isDone && "#4781D1") || (props.isInterrupted && "#F2675A")};
.status-text {
${(props) =>
props.theme.interfaceDirection === "rtl"
? `margin-right: 15px;`
: `margin-left: 15px;`}
margin-inline-start: 15px;
color: ${(props) => (props.theme.isBase ? "#657077" : "#FFFFFF99")};
}
@ -154,10 +143,7 @@ const AccordionItem = styled.div<{
}
.filled-status-text {
${(props) =>
props.theme.interfaceDirection === "rtl"
? `margin-right: 15px;`
: `margin-left: 15px;`}
margin-inline-start: 15px;
color: ${(props) => (props.isDone ? "#4781D1" : "#657077")};
}
}

157
packages/shared/components/filter/Filter.styled.ts
View File

@ -69,14 +69,7 @@ const StyledFilterInput = styled.div`
margin-bottom: 8px;
.clear-all-link {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 12px;
`
: css`
margin-left: 12px;
`}
margin-inline-start: 12px;
}
}
`;
@ -104,14 +97,7 @@ const StyledButton = styled.div<{ isOpen: boolean }>`
margin: 0;
padding: 0;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 8px;
`
: css`
margin-left: 8px;
`}
margin-inline-start: 8px;
cursor: pointer;
@ -156,14 +142,7 @@ const StyledFilterBlock = styled.div`
position: fixed;
top: 0;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: 0;
`
: css`
right: 0;
`}
inset-inline-end: 0;
width: 480px;
height: 100%;
@ -239,14 +218,7 @@ const StyledFilterBlockHeader = styled.div<{ isSelector?: boolean }>`
}
.arrow-button {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 12px;
`
: css`
margin-right: 12px;
`}
margin-inline-end: 12px;
}
svg {
@ -261,15 +233,8 @@ const StyledFilterBlockItem = styled.div<{
isFirst?: boolean;
}>`
margin: ${(props) =>
props.withoutHeader ? "0" : props.isFirst ? "12px 0 0 0" : "16px 0 0 0"};
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding: 0 16px 0 24px;
`
: css`
padding: 0 24px 0 16px;
`}
props.withoutHeader ? "0" : props.isFirst ? "12px 0 0" : "16px 0 0"};
padding-inline: 16px 24px;
max-width: 100%;
box-sizing: border-box;
@ -281,14 +246,7 @@ const StyledFilterBlockItem = styled.div<{
const StyledFilterBlockItemHeader = styled.div`
height: 16px;
line-height: 16px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -16px;
`
: css`
margin-right: -16px;
`}
margin-inline-end: -16px;
display: flex;
align-items: center;
@ -298,20 +256,8 @@ const StyledFilterBlockItemContent = styled.div<{
withoutSeparator?: boolean;
withMultiItems?: boolean;
}>`
margin: ${(props) =>
props.withoutSeparator ? "12px -16px 0 0" : "12px -16px 16px 0"};
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin: ${props.withoutSeparator
? "12px 0 0 -16px"
: "12px 0 16px -16px"};
`
: css`
margin: ${props.withoutSeparator
? "12px -16px 0 0"
: "12px -16px 16px 0"};
`}
margin-block: ${(props) => (props.withoutSeparator ? "12px 0" : "12px 16px")};
margin-inline: 0 -16px;
height: fit-content;
display: flex;
@ -336,14 +282,7 @@ const StyledFilterBlockItemSelectorText = styled(Text)`
font-size: 13px;
line-height: 15px;
color: ${(props) => props.theme.filterInput.filter.color};
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 8px;
`
: css`
margin-left: 8px;
`}
margin-inline-start: 8px;
cursor: pointer;
`;
@ -374,14 +313,7 @@ const StyledFilterBlockItemTagText = styled(Text)<{ isSelected?: boolean }>`
StyledFilterBlockItemTagText.defaultProps = { theme: Base };
const StyledFilterBlockItemTagIcon = styled.div`
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 8px;
`
: css`
margin-left: 8px;
`}
margin-inline-start: 8px;
display: flex;
align-items: center;
@ -419,14 +351,7 @@ const StyledFilterBlockItemToggleButton = styled(ToggleButton)`
`;
const StyledFilterBlockItemCheckboxContainer = styled.div`
.checkbox {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 8px !important;
`
: css`
margin-right: 8px !important;
`}
margin-inline-end: 8px !important;
}
.checkbox-text {
@ -437,15 +362,7 @@ const StyledFilterBlockItemCheckboxContainer = styled.div`
const StyledFilterBlockItemSeparator = styled.div`
height: 1px;
width: calc(100% + 16px);
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 16px;
`
: css`
margin-right: 16px;
`}
margin-inline-end: 16px;
background: ${(props) => props.theme.filterInput.filter.separatorColor};
`;
@ -455,14 +372,7 @@ StyledFilterBlockItemToggleButton.defaultProps = { theme: Base };
const StyledFilterBlockFooter = styled.div`
position: fixed;
bottom: 0;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: 0;
`
: css`
right: 0;
`}
inset-inline-end: 0;
z-index: 401;
@ -505,28 +415,11 @@ const StyledControlContainer = styled.div`
z-index: 450;
top: 14px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
right: -34px;
`
: css`
left: -34px;
`}
inset-inline-start: -34px;
@media ${mobile} {
top: -34px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: 10px;
right: unset;
`
: css`
right: 10px;
left: unset;
`}
inset-inline: unset 10px;
}
`;
@ -582,14 +475,7 @@ const StyledSortButton = styled.div<{ viewAs: TViewAs; isDesc: boolean }>`
width: 32px;
height: 32px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 8px;
`
: css`
margin-left: 8px;
`}
margin-inline-start: 8px;
.dropdown-container {
top: 102%;
@ -687,14 +573,7 @@ const StyledSortButton = styled.div<{ viewAs: TViewAs; isDesc: boolean }>`
align-items: center;
justify-content: center;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 0;
`
: css`
margin-right: 0;
`}
margin-inline-end: 0;
}
.combo-buttons_arrow-icon {

8
packages/shared/components/filter/index.tsx
View File

@ -25,7 +25,6 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import React from "react";
import { useTheme } from "styled-components";
import { useTranslation } from "react-i18next";
import { isTablet, isIOS } from "react-device-detect";
@ -96,11 +95,6 @@ const FilterInput = React.memo(
const { t } = useTranslation(["Common"]);
const mountRef = React.useRef(true);
const { interfaceDirection } = useTheme();
const styleViewSelector =
interfaceDirection === "rtl"
? { marginRight: "8px" }
: { marginLeft: "8px" };
React.useEffect(() => {
const value = getViewSettingsData?.();
@ -251,7 +245,7 @@ const FilterInput = React.memo(
id={
viewAs === "tile" ? "view-switch--row" : "view-switch--tile"
}
style={styleViewSelector}
style={{ marginInlineStart: "8px" }}
viewAs={viewAs === "table" ? "row" : viewAs}
viewSettings={viewSettings}
onChangeView={onChangeViewAs}

18
packages/shared/components/floating-button/FloatingButton.styled.ts
View File

@ -50,14 +50,7 @@ const StyledFloatingButtonWrapper = styled.div<{ showTwoProgress?: boolean }>`
@media ${desktop} {
position: absolute;
z-index: 300;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: 0;
`
: css`
right: 0;
`}
inset-inline-end: 0;
bottom: ${(props) => (props.showTwoProgress ? "96px" : "0")};
@ -70,8 +63,7 @@ const StyledFloatingButtonWrapper = styled.div<{ showTwoProgress?: boolean }>`
position: absolute;
cursor: pointer;
${({ theme }) =>
theme.interfaceDirection === "rtl" ? `left: 77px;` : `right: 77px;`}
inset-inline-end: 77px;
bottom: 33px;
}
&:hover {
@ -109,9 +101,8 @@ const StyledCircle = styled.div<{ percent: number; displayProgress?: boolean }>`
position: absolute;
border-radius: 50%;
top: 0;
left: 0;
inset-inline: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
@ -199,8 +190,7 @@ const StyledAlertIcon = styled.div`
width: 12px;
height: 12px;
${({ theme }) =>
theme.interfaceDirection === "rtl" ? `right: 20px;` : `left: 20px;`}
inset-inline-start: 20px;
top: 0px;
svg {

4
packages/shared/components/help-button/HelpButton.stories.tsx
View File

@ -69,10 +69,10 @@ export const Default: Story = {
const AutoTemplate = (args: HelpButtonProps) => {
return (
<div style={{ marginTop: "20px", marginLeft: "100px" }}>
<div style={{ marginTop: "20px", marginInlineStart: "100px" }}>
<HelpButton
{...args}
style={{ left: "20px" }}
style={{ insetInlineStart: "20px" }}
tooltipContent={
<>
<p>You can put every thing here</p>

3
packages/shared/components/image-editor/ImageEditor.styled.ts
View File

@ -43,8 +43,7 @@ const StyledImageCropper = styled.div<{ disableImageRescaling?: boolean }>`
height: 216px;
top: 0;
bottom: 0;
left: 0;
right: 0;
inset-inline: 0;
svg {
opacity: 0.2;
path {

16
packages/shared/components/infinite-loader/InfiniteLoader.styled.ts
View File

@ -86,6 +86,7 @@ const rowStyles = css<{ width: number }>`
// !important styles override inline styles from react-virtualized
.row-list-item,
.row-loader {
// doesn't require mirroring for LTR
${({ theme }) =>
theme.interfaceDirection === "rtl" &&
`left: unset !important;
@ -106,10 +107,7 @@ const rowStyles = css<{ width: number }>`
`;
const tableStyles = css<{ width: number }>`
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: -20px;`
: `margin-left: -20px;`}
margin-inline-start: -20px;
width: ${({ width }) => `${width + 40}px !important`};
.ReactVirtualized__Grid__innerScrollContainer {
@ -122,14 +120,14 @@ const tableStyles = css<{ width: number }>`
// !important styles override inline styles from react-virtualized
.table-list-item,
.table-container_body-loader {
padding-inline-start: 20px;
// doesn't require mirroring for LTR
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `
padding-right: 20px;
theme.interfaceDirection === "rtl" &&
css`
left: unset !important;
right: 0 !important;
`
: `padding-left: 20px;`}
`}
}
`;

10
packages/shared/components/input-block/InputBlock.styled.tsx
View File

@ -40,14 +40,8 @@ const StyledIconBlock = styled.div<{
props.isDisabled || !props.isClickable ? "default" : "pointer"};
height: ${(props) => props.theme.inputBlock.height};
padding-right: ${(props) => props.theme.inputBlock.paddingRight};
padding-left: ${(props) => props.theme.inputBlock.paddingLeft};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
padding-left: ${props.theme.inputBlock.paddingRight};
padding-right: ${props.theme.inputBlock.paddingLeft};
`}
padding-inline-end: ${(props) => props.theme.inputBlock.paddingRight};
padding-inline-start: ${(props) => props.theme.inputBlock.paddingLeft};
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
`;
StyledIconBlock.defaultProps = { theme: Base };

2
packages/shared/components/language-combobox/LanguageCombobox.styled.ts
View File

@ -49,7 +49,7 @@ export const StyledComboBox = styled(ComboBox)<{ withBorder: boolean }>`
}
.combo-button_selected-icon-container {
margin-right: 0px;
margin-inline-end: 0px;
}
.combo-buttons_arrow-icon {
margin: 0;

23
packages/shared/components/link-with-dropdown/LinkWithDropdown.styled.tsx
View File

@ -75,22 +75,14 @@ const Caret = styled(ExpanderDownIconWrapper)<{ color?: string }>`
min-width: ${(props) => props.theme.linkWithDropdown.caret.minWidth};
height: ${(props) => props.theme.linkWithDropdown.caret.height};
min-height: ${(props) => props.theme.linkWithDropdown.caret.minHeight};
margin-left: ${(props) => props.theme.linkWithDropdown.caret.marginLeft};
margin-inline-start: ${(props) =>
props.theme.linkWithDropdown.caret.marginLeft};
margin-top: ${(props) => props.theme.linkWithDropdown.caret.marginTop};
right: ${(props) => props.theme.linkWithDropdown.caret.right};
inset-inline-end: ${(props) => props.theme.linkWithDropdown.caret.right};
top: ${(props) => props.theme.linkWithDropdown.caret.top};
bottom: ${(props) => props.theme.linkWithDropdown.caret.bottom};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-right: ${props.theme.linkWithDropdown.caret.marginLeft};
margin-left: 0;
left: ${props.theme.linkWithDropdown.caret.right};
right: 0;
`}
margin: ${(props) => props.theme.linkWithDropdown.caret.margin};
path {
@ -121,14 +113,7 @@ const StyledLinkWithDropdown = styled(SimpleLinkWithDropdown)`
display: flex;
align-items: center;
padding-right: ${(props) => props.theme.linkWithDropdown.paddingRight};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
padding-left: ${props.theme.linkWithDropdown.paddingRight};
padding-right: 0;
`}
padding-inline-end: ${(props) => props.theme.linkWithDropdown.paddingRight};
color: ${(props) =>
props.isDisabled ? props.theme.linkWithDropdown.disableColor : props.color};

4
packages/shared/components/loader/Loader.styled.ts
View File

@ -46,7 +46,7 @@ const Dot = styled.div<{ color?: string; size: number; delay: string }>`
width: ${(props) => props.size / 9}px;
height: ${(props) => props.size / 9}px;
margin-right: ${(props) => props.theme.loader.marginRight};
margin-inline-end: ${(props) => props.theme.loader.marginRight};
/* Animation */
animation: ${BounceAnimation} 0.5s linear infinite;
animation-delay: ${(props) => props.delay};
@ -64,7 +64,7 @@ const LoadingWrapper = styled.div<{ color?: string; size: string }>`
`;
const LoadingLabel = styled.span`
margin-right: ${(props) => props.theme.loader.marginRight};
margin-inline-end: ${(props) => props.theme.loader.marginRight};
`;
LoadingLabel.defaultProps = { theme: Base };

13
packages/shared/components/main-button-mobile/MainButtonMobile.stories.tsx
View File

@ -25,7 +25,7 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import React, { useEffect, useReducer, useState } from "react";
import styled, { css, useTheme } from "styled-components";
import styled, { css } from "styled-components";
import { Meta, StoryObj } from "@storybook/react";
import MobileActionsFolderReactSvgUrl from "PUBLIC_DIR/images/mobile.actions.folder.react.svg?url";
@ -60,7 +60,8 @@ const StyledWrapper = styled.div<{ isAutoDocs: boolean; isMobile?: boolean }>`
width: calc(100% + 40px);
height: 500px;
position: relative;
margin: 0 0 -20px -20px;
margin-block: 0 -20px;
margin-inline: -20px 0;
`}
`;
@ -174,8 +175,6 @@ const Template = ({ ...args }) => {
const isAutoDocs =
typeof window !== "undefined" && window?.location?.href.includes("docs");
const { interfaceDirection } = useTheme();
const actionOptions = [
{
key: "1",
@ -231,15 +230,13 @@ const Template = ({ ...args }) => {
style={{
position: "absolute",
bottom: "26px",
left: interfaceDirection === "rtl" ? "44px" : "unset",
right: interfaceDirection !== "rtl" ? "44px" : "unset",
insetInlineEnd: "44px",
}}
actionOptions={actionOptions}
dropdownStyle={{
position: "absolute",
bottom: "25px",
left: interfaceDirection === "rtl" ? "60px" : "unset",
right: interfaceDirection !== "rtl" ? "60px" : "unset",
insetInlineEnd: "60px",
}}
progressOptions={progressOptions}
buttonOptions={buttonOptions}

44
packages/shared/components/main-button-mobile/MainButtonMobile.styled.ts
View File

@ -90,13 +90,8 @@ const mobileDropDown = css`
width: ${(props) => props.theme.mainButtonMobile.dropDown.mobile.width};
}
right: ${(props) => props.theme.mainButtonMobile.dropDown.mobile.right};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
left: ${props.theme.mainButtonMobile.dropDown.mobile.right};
right: unset;
`}
inset-inline-end: ${(props) =>
props.theme.mainButtonMobile.dropDown.mobile.right};
bottom: ${(props) => props.theme.mainButtonMobile.dropDown.mobile.bottom};
.dialog-background-scroll {
@ -117,14 +112,7 @@ const StyledDropDown = styled(DropDown)<{ heightProp?: string }>`
width: ${(props) => props.theme.mainButtonMobile.dropDown.width};
max-width: calc(100vw - 48px);
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: ${props.theme.mainButtonMobile.dropDown.right};
`
: css`
right: ${props.theme.mainButtonMobile.dropDown.right};
`}
inset-inline-end: ${({ theme }) => theme.mainButtonMobile.dropDown.right};
bottom: ${(props) => props.theme.mainButtonMobile.dropDown.bottom};
z-index: ${(props) => props.theme.mainButtonMobile.dropDown.zIndex};
@ -146,10 +134,7 @@ const StyledDropDown = styled(DropDown)<{ heightProp?: string }>`
.section-scroll,
.scroll-body {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `padding-left: 0px !important;`
: `padding-right: 0px !important;`}
padding-inline-end: 0px !important;
}
.separator-wrapper {
@ -215,10 +200,7 @@ const StyledButtonOptions = styled.div<{ withoutButton?: boolean }>`
color: ${(props) => props.theme.mainButtonMobile.buttonOptions.color};
.sublevel {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `padding-right: 48px;`
: `padding-left: 48px;`}
padding-inline-start: 48px;
}
.main-button_drop-down {
color: ${(props) => props.theme.mainButtonMobile.dropDown.buttonColor};
@ -252,10 +234,7 @@ const StyledContainerAction = styled.div`
padding: 16px 0px;
.sublevel {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `padding-right: 48px;`
: `padding-left: 48px;`}
padding-inline-start: 48px;
}
`;
@ -337,13 +316,7 @@ const StyledProgressBarContainer = styled.div<{ isUploading?: boolean }>`
color: ${(props) => props.theme.mainButtonMobile.textColor};
text-align: right;
margin-right: 12px;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-left: 12px;
margin-right: 0px;
`}
margin-inline-end: 12px;
}
.progress_icon {
@ -382,8 +355,7 @@ const StyledAlertIcon = styled.div`
width: 12px;
height: 12px;
top: 10px;
${(props) =>
props.theme.interfaceDirection === "rtl" ? "left: 10px;" : "right: 10px;"}
inset-inline-end: 10px;
`;
StyledBar.defaultProps = { theme: Base };

52
packages/shared/components/media-viewer/MediaViewer.styled.ts
View File

@ -91,8 +91,7 @@ export const StyledMobileDetails = styled.div`
z-index: 307;
position: fixed;
top: 0;
left: 0;
right: 0;
inset-inline: 0;
height: 53px;
display: flex;
justify-content: center;
@ -111,13 +110,13 @@ export const StyledMobileDetails = styled.div`
.mobile-close {
position: fixed;
left: 21px;
inset-inline-start: 21px;
top: 22px;
}
.mobile-context {
position: fixed;
right: 22px;
inset-inline-end: 22px;
top: 22px;
}
@ -157,16 +156,8 @@ export const StyledViewerContainer = styled.div<StyledViewerContainerProps>`
overflow: hidden;
> span {
position: fixed;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: 0;
margin-left: 10px;
`
: css`
right: 0;
margin-right: 10px;
`}
inset-inline-end: 0;
margin-inline-end: 10px;
bottom: 5px;
z-index: 305;
}
@ -195,14 +186,8 @@ export const StyledViewerContainer = styled.div<StyledViewerContainerProps>`
);
position: fixed;
top: 0;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
right: 0;
`
: css`
left: 0;
`}
inset-inline-start: 0;
.title {
text-align: center;
white-space: nowrap;
@ -211,14 +196,7 @@ export const StyledViewerContainer = styled.div<StyledViewerContainerProps>`
font-weight: 600;
text-overflow: ellipsis;
width: calc(100% - 50px);
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 16px;
`
: css`
padding-left: 16px;
`}
padding-inline-start: 16px;
box-sizing: border-box;
color: ${(props) => props.theme.mediaViewer.titleColor};
}
@ -226,14 +204,7 @@ export const StyledViewerContainer = styled.div<StyledViewerContainerProps>`
.mediaPlayerClose {
position: fixed;
top: 13px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: 12px;
`
: css`
right: 12px;
`}
inset-inline-end: 12px;
height: 17px;
&:hover {
background-color: transparent;
@ -247,10 +218,7 @@ export const StyledViewerContainer = styled.div<StyledViewerContainerProps>`
.containerVideo {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
inset: 0;
}
`;

5
packages/shared/components/media-viewer/sub-components/DesktopDetails/DesktopDetails.styled.ts
View File

@ -50,10 +50,7 @@ export const DesktopDetailsContainer = styled.div`
text-overflow: ellipsis;
width: calc(100% - 50px);
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `padding-right: 16px;`
: `padding-left: 16px;`}
padding-inline-start: 16px;
box-sizing: border-box;
color: ${(props) => props.theme.mediaViewer.titleColor};
}

2
packages/shared/components/media-viewer/sub-components/MessageError/MessageError.styled.ts
View File

@ -30,6 +30,7 @@ export const StyledMediaError = styled.div`
position: fixed;
z-index: 1006;
// doesn't require mirroring for RTL
left: 50%;
top: 50%;
@ -49,6 +50,7 @@ export const StyledMediaError = styled.div`
export const StyledErrorToolbar = styled.div`
position: fixed;
bottom: 24px;
// doesn't require mirroring for RTL
left: 50%;
z-index: 1006;

18
packages/shared/components/media-viewer/sub-components/PDFViewer/PDFViewer.styled.ts
View File

@ -61,6 +61,8 @@ export const PDFViewerWrapper = styled.div`
}
#id_viewer {
background: none !important;
// doesn't require mirroring for LTR
${({ theme }) =>
theme.interfaceDirection === "rtl" &&
css`
@ -74,6 +76,7 @@ export const PDFViewerWrapper = styled.div`
margin: 0;
}
#id_vertical_scroll {
// doesn't require mirroring for LTR
${({ theme }) =>
theme.interfaceDirection === "rtl" && "left: 0 !important;"}
}
@ -100,21 +103,13 @@ export const ErrorMessage = styled.p`
export const DesktopTopBar = styled(DesktopDetails)<Panel>`
display: flex;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
right: ${props.isPanelOpen ? "306px" : 0};
`
: css`
left: ${props.isPanelOpen ? "306px" : 0};
`}
inset-inline-start: ${(props) => (props.isPanelOpen ? "306px" : 0)};
width: ${(props) => (props.isPanelOpen ? "calc(100% - 306px)" : "100%")};
.mediaPlayerClose {
position: fixed;
top: 13px;
${({ theme }) =>
theme.interfaceDirection === "rtl" ? `left: 12px;` : `right: 12px;`}
inset-inline-end: 12px;
height: 17px;
&:hover {
background-color: transparent;
@ -127,11 +122,12 @@ export const DesktopTopBar = styled(DesktopDetails)<Panel>`
}
.title {
padding-right: 16px;
padding-inline-end: 16px;
}
`;
export const PDFToolbar = styled(ViewerToolbar)<Panel>`
// logical property won't work correctly
left: ${({ theme, isPanelOpen }) => {
const value = isPanelOpen ? 306 / 2 : 0;
const operator = theme.interfaceDirection === "rtl" ? "-" : "+";

6
packages/shared/components/media-viewer/sub-components/PDFViewer/ui/Bookmarks/Bookmarks.styled.ts
View File

@ -27,8 +27,8 @@
import styled from "styled-components";
export const List = styled.ul`
padding-left: 16px;
padding-right: 30px;
padding-inline-start: 16px;
padding-inline-end: 30px;
list-style: none;
margin-top: 0px;
@ -39,7 +39,7 @@ export const List = styled.ul`
export const Item = styled.li`
color: #ffffff;
padding: 1px 16px 0 16px;
padding: 1px 16px 0;
font-weight: 400;
font-size: 13px;
line-height: 20px;

2
packages/shared/components/media-viewer/sub-components/PDFViewer/ui/MobileDrawer/MobileDrawer.styled.ts
View File

@ -68,6 +68,6 @@ export const MobileDrawerHeader = styled.div`
}
.mobile-drawer_cross-icon {
margin-left: auto;
margin-inline-start: auto;
}
`;

1
packages/shared/components/media-viewer/sub-components/PDFViewer/ui/PageCount/PageCount.styled.ts
View File

@ -34,6 +34,7 @@ export const PageCountWrapper = styled.div<{ isPanelOpen: boolean }>`
position: fixed;
bottom: ${isMobile ? "12px" : "108px"};
// logical property won't work correctly
left: ${({ theme, isPanelOpen }) => {
const value = isPanelOpen ? 306 / 2 : 0;
const operator = theme.interfaceDirection === "rtl" ? "-" : "+";

10
packages/shared/components/media-viewer/sub-components/PDFViewer/ui/SideBar/Sidebar.styled.ts
View File

@ -69,12 +69,6 @@ export const Thumbnails = styled.section<{ visible: boolean }>`
export const HideSidebarIcon = styled(ArticleShowMenuReactSvgUrl)`
${({ theme }) =>
theme.interfaceDirection === "rtl"
? css`
margin-right: auto;
`
: css`
transform: rotate(180deg);
margin-left: auto;
`}
theme.interfaceDirection !== "rtl" && "transform: rotate(180deg)"};
margin-inline-start: auto;
`;

1
packages/shared/components/media-viewer/sub-components/PlayerBigPlayButton/PlayerBigPlayButton.styled.ts
View File

@ -29,6 +29,7 @@ import styled from "styled-components";
const WrapperPlayerBigPlayButton = styled.div`
position: absolute;
top: 50%;
// doesn't require mirroring for RTL
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;

2
packages/shared/components/media-viewer/sub-components/PlayerDesktopContextMenu/PlayerDesktopContextMenu.styled.ts
View File

@ -39,7 +39,7 @@ export const PlayerDesktopContextMenuWrapper = styled.div`
}
& > svg {
padding-left: 19px;
padding-inline-start: 19px;
padding-bottom: 3px;
width: 18px;
height: 20px;

4
packages/shared/components/media-viewer/sub-components/PlayerDuration/inxed.tsx
View File

@ -37,10 +37,10 @@ const PlayerDurationWrapper = styled.div`
font-size: 12px;
font-weight: 700;
margin-left: 10px;
margin-inline-start: 10px;
@media ${mobile} {
margin-left: 0;
margin-inline-start: 0;
}
`;

2
packages/shared/components/media-viewer/sub-components/PlayerFullScreen/PlayerFullScreen.styled.ts
View File

@ -33,7 +33,7 @@ export const PlayerFullSceenWrapper = styled.div`
min-width: 48px;
height: 48px;
padding-left: 10px;
padding-inline-start: 10px;
&:hover {
cursor: pointer;

2
packages/shared/components/media-viewer/sub-components/PlayerPlayButton/PlayerPlayButton.styled.ts
View File

@ -32,7 +32,7 @@ export const WrapperPlayerPlayButton = styled.div`
align-items: center;
width: 48px;
height: 48px;
margin-left: -10px;
margin-inline-start: -10px;
cursor: pointer;
`;

1
packages/shared/components/media-viewer/sub-components/PlayerSpeedControl/PlayerSpeedControl.styled.ts
View File

@ -86,6 +86,7 @@ export const ToastSpeed = styled.div`
position: fixed;
top: 50%;
// doesn't require mirroring for RTL
left: 50%;
display: flex;

5
packages/shared/components/media-viewer/sub-components/PlayerTimeline/PlayerTimeline.styled.ts
View File

@ -32,7 +32,7 @@ import { tablet, desktop } from "@docspace/shared/utils";
export const HoverProgress = styled.div`
display: none;
position: absolute;
left: 0px;
inset-inline-start: 0px;
height: 6px;
@ -42,7 +42,7 @@ export const HoverProgress = styled.div`
export const Progress = styled.div`
position: absolute;
left: 0px;
inset-inline-start: 0px;
width: 0;
height: 4px;
@ -110,6 +110,7 @@ export const PlayerTimelineWrapper = styled.div`
time {
display: none;
position: absolute;
// doesn't require mirroring for RTL
left: 50%;
top: -25px;
font-size: 13px;

6
packages/shared/components/media-viewer/sub-components/PlayerVolumeControl/PlayerVolumeControl.styled.ts
View File

@ -31,7 +31,7 @@ import { tablet } from "@docspace/shared/utils";
export const PlayerVolumeControlWrapper = styled.div`
display: flex;
align-items: center;
margin-left: 10px;
margin-inline-start: 10px;
`;
export const IconWrapper = styled.div`
@ -86,10 +86,10 @@ export const VolumeWrapper = styled.div`
height: 28px;
display: flex;
align-items: center;
padding-left: 9px;
padding-inline-start: 9px;
input {
margin-right: 15px;
margin-inline-end: 15px;
width: 80%;
height: 4px;

5
packages/shared/components/media-viewer/sub-components/ViewerPlayer/ViewerPlayer.styled.ts
View File

@ -59,9 +59,8 @@ export const VideoWrapper = styled(animated.div)<{ $visible: boolean }>`
export const StyledPlayerControls = styled.div<{ $isShow: boolean }>`
position: fixed;
right: 0px;
inset-inline: 0;
bottom: 0px;
left: 0px;
z-index: 307;
display: flex;
@ -99,7 +98,7 @@ export const ControlContainer = styled.div`
@media ${tablet} {
margin-top: 8px;
.player_right-control {
margin-right: -8px;
margin-inline-end: -8px;
}
}
`;

1
packages/shared/components/media-viewer/sub-components/ViewerToolbar/ViewerToolbar.styled.ts
View File

@ -33,6 +33,7 @@ export const ImageViewerToolbarWrapper = styled.div`
position: fixed;
bottom: 24px;
// doesn't require mirroring for RTL
left: 50%;
z-index: 307;

42
packages/shared/components/modal-dialog/ModalDialog.styled.ts
View File

@ -129,15 +129,15 @@ const Content = styled.div.attrs((props: { modalSwipeOffset?: number }) => ({
top: 0;
bottom: 0;
${props.theme.interfaceDirection === "rtl"
? css<{ visible?: boolean }>`
left: 0;
transform: translateX(${props.visible ? "0" : "-100%"});
`
: css<{ visible?: boolean }>`
right: 0;
transform: translateX(${props.visible ? "0" : "100%"});
`}
inset-inline-end: 0;
transform: translateX(
${props.visible
? "0"
: props.theme.interfaceDirection === "rtl"
? "-100%"
: "100%"}
);
transition: transform 0.3s ease-in-out;
@ -145,10 +145,8 @@ const Content = styled.div.attrs((props: { modalSwipeOffset?: number }) => ({
transform: translateY(${props.visible ? "0" : "100%"});
height: calc(100% - 64px);
width: 100%;
left: 0;
inset-inline: 0;
top: ${props.embedded ? "0" : "auto"};
right: 0;
top: auto;
bottom: 0;
}
@ -186,23 +184,14 @@ const StyledBody = styled(Box)<{
white-space: pre-line;
#modal-scroll > .scroll-wrapper > .scroller > .scroll-body {
${(props) =>
isMobile && props.theme.interfaceDirection === "rtl"
? `margin-left: 0 !important;`
: `margin-right: 0 !important;`}
margin-inline-end: 0 !important;
${(props) =>
props.theme.interfaceDirection === "rtl"
? `padding-left: 16px !important;`
: `padding-right: 16px !important;`}
padding-inline-end: 16px !important;
${(props) =>
props.isScrollLocked &&
css`
${props.theme.interfaceDirection === "rtl"
? `margin-left: 0 !important;`
: `margin-right: 0 !important;`}
margin-inline-end: 0 !important;
overflow: hidden !important;
`}
}
@ -210,10 +199,7 @@ const StyledBody = styled(Box)<{
${(props) =>
props.currentDisplayType === "aside" &&
css<{ withBodyScroll?: boolean }>`
${props.theme.interfaceDirection === "rtl"
? `margin-left: ${props.withBodyScroll ? "-16px" : "0"};`
: `margin-right: ${props.withBodyScroll ? "-16px" : "0"};`}
margin-inline-end: ${props.withBodyScroll ? "-16px" : "0"};
padding-bottom: 8px;
height: 100%;
min-height: auto;

22
packages/shared/components/modal-dialog/sub-components/CloseButton.tsx
View File

@ -54,33 +54,19 @@ const StyledCloseButtonWrapper = styled.div<{
? css`
top: 18px;
${props.theme.interfaceDirection === "rtl"
? `left: -30px;`
: `right: -30px;`}
inset-inline-end: -30px;
@media ${mobile} {
${props.theme.interfaceDirection === "rtl"
? `left: 10px;`
: `right: 10px;`}
inset-inline-end: 10px;
top: -27px;
}
`
: css`
top: 18px;
${props.theme.interfaceDirection === "rtl"
? `right: -27px;`
: `left: -27px;`}
inset-inline-start: -27px;
@media ${mobile} {
top: -27px;
${props.theme.interfaceDirection === "rtl"
? css`
right: auto;
left: 10px;
`
: css`
left: auto;
right: 10px;
`}
inset-inline: auto 10px;
}
`}

1
packages/shared/components/modal-dialog/sub-components/ModalBackdrop.tsx
View File

@ -69,6 +69,7 @@ const StyledModalBackdrop = styled.div.attrs(
width: 100vw;
overflow: hidden;
position: fixed;
// doesn't require mirroring for RTL
left: 0;
top: 0;

11
packages/shared/components/more-login-modal/MoreLoginModal.styled.ts
View File

@ -24,7 +24,7 @@
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import styled, { css } from "styled-components";
import styled from "styled-components";
import { mobile } from "@docspace/shared/utils";
import { ModalDialog } from "@docspace/shared/components/modal-dialog";
@ -43,14 +43,7 @@ export const ProviderRow = styled.div`
svg {
height: 24px;
width: 24px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 4px;
`
: css`
padding-left: 4px;
`}
padding-inline-start: 4px;
path {
fill: ${(props) => !props.theme.isBase && "#fff"};

207
packages/shared/components/navigation/Navigation.styled.ts
View File

@ -78,14 +78,7 @@ const StyledContainer = styled.div<{
.navigation-logo {
display: flex;
height: 24px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 16px;
`
: css`
margin-right: 16px;
`}
margin-inline-end: 16px;
@media ${tablet} {
.logo-icon_svg {
@ -95,16 +88,10 @@ const StyledContainer = styled.div<{
.header_separator {
display: ${({ isRootFolder }) => (isRootFolder ? "block" : "none")};
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
border-right: 1px solid #dfe2e3;
margin: 0 15px 0 0;
`
: css`
border-left: 1px solid #dfe2e3;
margin: 0 0 0 15px;
`}
border-inline-start: 1px solid #dfe2e3;
margin-block: 0;
margin-inline: 15px 0;
height: 21px;
}
@ -175,16 +162,9 @@ const StyledContainer = styled.div<{
.navigation-header-separator {
display: block;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 16px;
border-left: ${`1px solid ${props.theme.navigation.icon.stroke}`};
`
: css`
padding-left: 16px;
border-right: ${`1px solid ${props.theme.navigation.icon.stroke}`};
`}
padding-inline-start: 16px;
border-inline-end: ${(props) =>
`1px solid ${props.theme.navigation.icon.stroke}`};
height: 21px;
@media ${mobile} {
@ -288,14 +268,7 @@ const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)<{
@media ${tablet} {
display: none;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: ${props.isRootFolder ? "auto" : "0"};
`
: css`
margin-left: ${props.isRootFolder ? "auto" : "0"};
`}
margin-inline-start: ${(props) => (props.isRootFolder ? "auto" : "0")};
}
`;
StyledInfoPanelToggleColorThemeWrapper.defaultProps = { theme: Base };
@ -304,15 +277,7 @@ const StyledControlButtonContainer = styled.div<{
isFrame?: boolean;
showTitle?: boolean;
}>`
${(props) =>
props.showTitle &&
(props.theme.interfaceDirection === "rtl"
? css`
margin-right: 16px;
`
: css`
margin-left: 16px;
`)}
${(props) => props.showTitle && "margin-inline-start: 16px;"}
display: flex;
align-items: center;
gap: 16px;
@ -336,37 +301,10 @@ const StyledControlButtonContainer = styled.div<{
.option-button {
min-width: 17px;
/* ${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 16px;
`
: css`
margin-right: 16px;
`} */
/* @media ${tablet} {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 9px;
`
: css`
margin-right: 9px;
`}
} */
}
.trash-button {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 16px;
`
: css`
margin-right: 16px;
`}
margin-inline-end: 16px;
min-width: 15px;
}
`;
@ -379,24 +317,10 @@ const StyledInfoPanelToggleWrapper = styled.div<{
align-items: center;
align-self: center;
justify-content: center;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: auto;
`
: css`
margin-left: auto;
`}
margin-inline-start: auto;
@media ${tablet} {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: ${props.isRootFolder ? "auto" : "0"};
`
: css`
margin-left: ${props.isRootFolder ? "auto" : "0"};
`}
margin-inline-start: ${(props) => (props.isRootFolder ? "auto" : "0")};
}
.info-panel-toggle-bg {
@ -428,8 +352,7 @@ const StyledTrashWarning = styled.div`
border-radius: 6px;
display: grid;
justify-content: ${({ theme }) =>
theme.interfaceDirection === "rtl" ? `right` : `left`};
justify-content: flex-start;
.warning-text {
color: ${({ theme }) => theme.section.header.trashErasureLabelText};
@ -469,11 +392,7 @@ const StyledTextContainer = styled.div<{
${(props) =>
!props.isRootFolder && !props.isRootFolderTitle && "cursor: pointer"};
${(props) =>
props.isRootFolderTitle &&
(props.theme.interfaceDirection === "rtl"
? "padding-left: 3px;"
: "padding-right: 3px;")};
${(props) => props.isRootFolderTitle && "padding-inline-end: 3px;"};
${(props) =>
!props.isRootFolderTitle &&
@ -510,14 +429,8 @@ const StyledExpanderDownIcon = styled(ExpanderDownIcon)`
min-width: 8px !important;
width: 8px !important;
min-height: 18px !important;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding: 0 4px 0 2px;
`
: css`
padding: 0 2px 0 4px;
`}
padding-block: 0;
padding-inline: 4px 2px;
path {
fill: ${(props) => props.theme.navigation.expanderColor};
}
@ -528,14 +441,7 @@ const StyledExpanderDownIcon = styled(ExpanderDownIcon)`
const StyledArrowIcon = styled(ArrowIcon)`
height: 12px;
min-width: 12px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 6px;
`
: css`
padding-left: 6px;
`}
padding-inline-start: 6px;
path {
fill: ${(props) => props.theme.navigation.rootFolderTitleColor};
}
@ -547,14 +453,8 @@ const StyledExpanderDownIconRotate = styled(ExpanderDownIcon)`
min-width: 8px !important;
width: 8px !important;
min-height: 18px !important;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding: 0 2px 0 4px;
`
: css`
padding: 0 4px 0 2px;
`}
padding-block: 0;
padding-inline: 2px 4px;
transform: rotate(-180deg);
path {
@ -575,45 +475,19 @@ const StyledItem = styled.div<{ isRoot: boolean; withLogo: boolean }>`
grid-template-columns: 17px auto;
cursor: pointer;
${({ theme }) =>
theme.interfaceDirection === "rtl" ? `margin-right: 0;` : `margin-left: 0;`}
margin-inline-start: 0;
@media ${tablet} {
${({ withLogo }) =>
withLogo &&
css`
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 44px;
`
: css`
margin-left: 44px;
`}
`};
${({ withLogo }) => withLogo && "margin-inline-start: 44px;"};
}
@media ${mobile} {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 0;
`
: css`
margin-left: 0;
`}
margin-inline-start: 0;
}
`;
const StyledText = styled(Text)<{ isRoot: boolean }>`
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 10px;
`
: css`
margin-left: 10px;
`}
margin-inline-start: 10px;
position: relative;
bottom: ${(props) => (props.isRoot ? "2px" : "-1px")};
`;
@ -625,17 +499,7 @@ const StyledBox = styled.div<{
}>`
position: absolute;
top: 0px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
right: -20px;
${props.withLogo && `right: 207px;`};
`
: css`
left: -20px;
${props.withLogo && `left: 207px;`};
`}
inset-inline-start: ${(props) => (props.withLogo ? "207px" : "-20px")};
padding: 0 20px;
padding-top: 18px;
@ -669,14 +533,7 @@ const StyledBox = styled.div<{
@media ${tablet} {
width: ${({ dropBoxWidth }) => `${dropBoxWidth}px`};
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
right: -16px;
`
: css`
left: -16px;
`}
inset-inline-start: -16px;
padding: 0 16px;
padding-top: 14px;
}
@ -694,16 +551,8 @@ const StyledTariffWrapper = styled.div`
display: flex;
align-items: center;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? css`
justify-content: left;
margin-right: auto;
`
: css`
justify-content: right;
margin-left: auto;
`}
justify-content: flex-end;
margin-inline-start: auto;
@media ${tablet} {
flex-direction: row-reverse;

34
packages/shared/components/paging/Paging.styled.ts
View File

@ -66,10 +66,7 @@ const StyledPaging = styled.div`
}
& > button {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: ${theme.paging.button.marginRight};`
: `margin-right: ${theme.paging.button.marginRight};`}
margin-inline-end: ${({ theme }) => theme.paging.button.marginRight};
}
`;
StyledPaging.defaultProps = { theme: Base };
@ -82,16 +79,8 @@ const StyledOnPage = styled.div`
height: 40px;
}
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `
margin-right: ${theme.paging.comboBox.marginLeft};
margin-left: ${theme.paging.comboBox.marginRight};
`
: `
margin-left: ${theme.paging.comboBox.marginLeft};
margin-right: ${theme.paging.comboBox.marginRight};
`}
margin-inline-start: ${({ theme }) => theme.paging.comboBox.marginLeft};
margin-inline-end: ${({ theme }) => theme.paging.comboBox.marginRight};
.hideDisabled {
padding: 0;
@ -103,14 +92,14 @@ const StyledOnPage = styled.div`
}
.combo-button {
padding-left: 14px;
padding-inline-start: 14px;
.combo-button-label {
margin-right: 0;
margin-inline-end: 0;
}
.combo-buttons_arrow-icon {
margin-right: 4px;
margin-inline-end: 4px;
}
@media ${tablet} {
@ -131,10 +120,7 @@ StyledOnPage.defaultProps = { theme: Base };
const StyledPage = styled.div`
width: 83px;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: ${theme.paging.page.marginRight};`
: `margin-right: ${theme.paging.page.marginRight};`}
margin-inline-end: ${({ theme }) => theme.paging.page.marginRight};
.manualWidth {
padding: 0;
@ -146,14 +132,14 @@ const StyledPage = styled.div`
}
.combo-button {
padding-left: 14px;
padding-inline-start: 14px;
.combo-button-label {
margin-right: 0;
margin-inline-end: 0;
}
.combo-buttons_arrow-icon {
margin-right: 4px;
margin-inline-end: 4px;
}
@media ${tablet} {

4
packages/shared/components/password-input/PasswordInput.styled.tsx
View File

@ -62,6 +62,7 @@ const StyledInput = styled(SimpleInput)<{
input {
flex: inherit;
width: calc(100% - 40px);
// logical property won't work because of dir: auto
text-align: ${({ theme }) =>
theme.interfaceDirection === "rtl" ? "right" : "left"};
&::-ms-reveal {
@ -104,6 +105,7 @@ const StyledInput = styled(SimpleInput)<{
top: 50%;
transform: translate(-50%, -50%);
// logical properties won't work correctly here
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
@ -113,7 +115,7 @@ const StyledInput = styled(SimpleInput)<{
: css`
padding-right: 2px;
right: -16px;
`}
`};
}
.prepend-children {

17
packages/shared/components/progress-bar/ProgressBar.styled.ts
View File

@ -46,15 +46,21 @@ const StyledProgressBarContainer = styled.div`
StyledProgressBarContainer.defaultProps = { theme: Base };
const loadingAnimation = keyframes`
const getLoadingAnimation = (dir: "ltr" | "rtl") => {
const isRtl = dir === "rtl";
const startValue = isRtl ? "50%" : "-50%";
const endValue = isRtl ? "-400%" : "400%";
return keyframes`
0% {
transform: translateX(-50%);
transform: translateX(${startValue});
}
100% {
transform: translateX(400%);
transform: translateX(${endValue});
}
`;
};
const StyledProgressBar = styled.div<{ percent: number }>`
width: 100%;
@ -65,7 +71,7 @@ const StyledProgressBar = styled.div<{ percent: number }>`
background-color: ${(props) => props.theme.progressBar.backgroundColor};
.progress-bar_percent {
float: left;
float: inline-start;
overflow: hidden;
max-height: 4px;
min-height: 4px;
@ -80,7 +86,8 @@ const StyledProgressBar = styled.div<{ percent: number }>`
width: 25%;
border-radius: 3px;
background: ${(props) => props.theme.progressBar.percent.background};
animation: ${loadingAnimation} 2s linear infinite;
animation: ${({ theme }) => getLoadingAnimation(theme.interfaceDirection)}
2s linear infinite;
}
`;

17
packages/shared/components/radio-button/RadioButton.styled.tsx
View File

@ -66,14 +66,7 @@ const Label = styled(ClearLabel)`
cursor: ${(props) => !props.isDisabled && "pointer"};
.radio-button {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: ${props.theme.radioButton.marginBeforeLabel};
`
: css`
margin-right: ${props.theme.radioButton.marginBeforeLabel};
`}
margin-inline-end: ${({ theme }) => theme.radioButton.marginBeforeLabel};
path {
fill: ${(props) =>
@ -123,13 +116,7 @@ const Label = styled(ClearLabel)`
&:not(:first-child) {
${(props) =>
props.orientation === "horizontal" &&
(props.theme.interfaceDirection === "rtl"
? css`
margin-right: ${props.spacing};
`
: css`
margin-left: ${props.spacing};
`)};
`margin-inline-start: ${props.spacing};`};
}
&:not(:last-child) {

10
packages/shared/components/room-logo/RoomLogo.styled.ts
View File

@ -38,19 +38,13 @@ const StyledContainer = styled.div`
align-items: center;
justify-content: center;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: 12px;`
: `margin-right: 12px;`}
margin-inline-end: 12px;
.room-logo_checkbox {
display: none;
.checkbox {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: 0;`
: `margin-right: 0;`}
margin-inline-end: 0;
}
}
`;

10
packages/shared/components/room-type/RoomType.styled.ts
View File

@ -43,14 +43,8 @@ const StyledRoomType = styled.div`
.choose_room-forward_btn {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: auto;
transform: scaleX(-1);
`
: css`
margin-left: auto;
`}
props.theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
margin-inline-start: auto;
max-width: 17px;
max-height: 17px;
min-width: 17px;

23
packages/shared/components/row-content/RowContent.styled.ts
View File

@ -52,11 +52,7 @@ const mainWrapperTabletStyle = css`
margin-top: ${(props) => props.theme.rowContent.mainWrapper.marginTop};
width: ${(props) => props.theme.rowContent.mainWrapper.width};
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: ${theme.rowContent.mainWrapper.marginRight};`
: `margin-right: ${theme.rowContent.mainWrapper.marginRight};`}
margin-inline-end: ${({ theme }) => theme.rowContent.mainWrapper.marginRight};
`;
const mainContainerTabletStyle = css`
@ -106,16 +102,8 @@ const MainContainerWrapper = styled.div<{
display: flex;
align-self: center;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `
margin-right: 0;
margin-left: auto;
`
: `
margin-left: 0;
margin-right: auto;
`}
margin-inline-start: 0;
margin-inline-end: auto;
width: ${(props) =>
props.mainContainerWidth ? props.mainContainerWidth : "140px"};
@ -147,10 +135,7 @@ const MainContainer = styled.div<{
max-width: 100%;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: 8px;`
: `margin-right: 8px;`}
margin-inline-end: 8px;
${(props) =>
(props.widthProp && props.widthProp <= size.desktop) || props.isMobile

66
packages/shared/components/row/Row.styled.ts
View File

@ -72,10 +72,7 @@ const StyledRow = styled.div<{
align-content: center;
.row-progress-loader {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: 9px;`
: `margin-left: 9px;`}
margin-inline-start: 9px;
padding: 0;
display: flex;
align-items: center;
@ -89,26 +86,12 @@ const StyledRow = styled.div<{
.checkbox {
display: ${props.checked ? "flex" : "none"};
padding: ${getCorrectFourValuesStyle(
"10px 1px 10px 8px",
props.theme.interfaceDirection,
)};
${props.theme.interfaceDirection === "rtl"
? css`
margin-right: -4px;
`
: css`
margin-left: -4px;
`}
padding-block: 10px;
padding-inline: 8px 1px;
margin-inline-start: -4px;
@media ${tablet} {
${props.theme.interfaceDirection === "rtl"
? css`
margin-right: -6px;
`
: css`
margin-left: -6px;
`}
margin-inline-start: -6px;
}
}
@ -164,16 +147,8 @@ const StyledCheckbox = styled.div<{ mode: TMode }>`
const StyledElement = styled.div`
flex: 0 0 auto;
display: flex;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `
margin-left: ${theme.row.element.marginRight};
margin-right: ${theme.row.element.marginLeft};
`
: `
margin-right: ${theme.row.element.marginRight};
margin-left: ${theme.row.element.marginLeft};
`}
margin-inline-end: ${({ theme }) => theme.row.element.marginRight};
margin-inline-start: ${({ theme }) => theme.row.element.marginLeft};
user-select: none;
.react-svg-icon svg {
@ -189,16 +164,10 @@ const StyledContentElement = styled.div`
margin-top: 0px;
user-select: none;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 24px;
`
: css`
margin-left: 24px;
`}
margin-inline-start: 24px;
:empty, :has(.badges__quickButtons:empty) {
:empty,
:has(.badges__quickButtons:empty) {
display: none;
}
`;
@ -217,22 +186,13 @@ const StyledOptionButton = styled.div<{ spacerWidth?: string }>`
theme.interfaceDirection,
)};
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: 0px;`
: `margin-right: 0px;`}
margin-inline-end: 0px;
@media ${desktop} {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: -1px;`
: `margin-right: -1px;`}
margin-inline-end: -1px;
}
@media ${mobile} {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `padding-right: 10px;`
: `padding-left: 10px;`}
padding-inline-start: 10px;
}
}

40
packages/shared/components/save-cancel-buttons/SaveCancelButton.styled.ts
View File

@ -74,14 +74,7 @@ const displaySettings = css<{
: "none"};
@media ${mobile} {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-right: 16px;
`
: css`
padding-left: 16px;
`}
padding-inline-start: 16px;
}
}
@ -93,15 +86,8 @@ const displaySettings = css<{
border-top: 1px solid #eceef1;
width: calc(100% - 16px);
${props.theme.interfaceDirection === "rtl"
? css`
right: 0;
padding-right: 16px;
`
: css`
left: 0;
padding-left: 16px;
`}
inset-inline-start: 0;
padding-inline-start: 16px;
}
`}
`;
@ -125,11 +111,7 @@ const tabletButtons = css`
position: static;
padding: 0;
margin-bottom: 0;
${(props) =>
props.theme.interfaceDirection === "rtl"
? "margin-right: 8px;"
: "margin-left: 8px;"}
margin-inline-start: 8px;
}
`;
@ -148,20 +130,10 @@ const StyledSaveCancelButtons = styled.div<{
width: ${(props) => props.theme.saveCancelButtons.width};
background-color: ${({ theme }) => theme.backgroundColor};
${(props) =>
props.theme.interfaceDirection === "rtl"
? `right: ${props.theme.saveCancelButtons.left};`
: `left: ${props.theme.saveCancelButtons.left};`}
inset-inline-start: ${({ theme }) => theme.saveCancelButtons.left};
.save-button {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: ${props.theme.saveCancelButtons.marginRight};
`
: css`
margin-right: ${props.theme.saveCancelButtons.marginRight};
`}
margin-inline-end: ${({ theme }) => theme.saveCancelButtons.marginRight};
}
.unsaved-changes {
color: ${(props) => props.theme.saveCancelButtons.unsavedColor};

1
packages/shared/components/scrollbar/Scrollbar.styled.ts
View File

@ -92,6 +92,7 @@ const StyledScrollbar = styled(Scrollbar)<{ $fixedSize?: boolean }>`
align-items: flex-end;
direction: ltr;
// doesn't require mirroring for LTR
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `left: unset !important; right: 0 !important;`

250
packages/shared/components/section/Section.styled.ts
View File

@ -51,28 +51,13 @@ const StyledScrollbar = styled(Scrollbar)<{ $isScrollLocked?: boolean }>`
css`
& .scroll-wrapper > .scroller {
overflow: hidden !important;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: -1px !important;
`
: css`
margin-right: -1px !important;
`}
margin-inline-end: -1px !important;
}
${isMobileOnly &&
css`
& .scroll-wrapper > .scroller {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 20px !important;
margin-left: -21px !important;
`
: css`
padding-right: 20px !important;
margin-right: -21px !important;
`}
padding-inline-end: 20px !important;
margin-inline-end: -21px !important;
}
`}
`}
@ -90,10 +75,7 @@ const StyledInfoPanelWrapper = styled.div.attrs(({ id }) => ({
@media ${tablet} {
z-index: 309;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
inset: 0;
}
`;
@ -101,14 +83,7 @@ const StyledInfoPanel = styled.div`
height: 100%;
width: ${INFO_PANEL_WIDTH}px;
background-color: ${(props) => props.theme.infoPanel.backgroundColor};
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
border-right: ${`1px solid ${props.theme.infoPanel.borderColor}`};
`
: css`
border-left: ${`1px solid ${props.theme.infoPanel.borderColor}`};
`}
border-inline-start: 1px solid ${({ theme }) => theme.infoPanel.borderColor};
display: flex;
flex-direction: column;
@ -119,14 +94,7 @@ const StyledInfoPanel = styled.div`
@media ${tablet} {
position: absolute;
border: none;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: 0;
`
: css`
right: 0;
`}
inset-inline-end: 0;
width: 480px;
max-width: calc(100vw - 69px);
}
@ -156,29 +124,15 @@ const StyledControlContainer = styled.div`
display: flex;
top: 18px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
right: -27px;
`
: css`
left: -27px;
`}
inset-inline-start: -27px;
}
@media ${mobile} {
display: flex;
top: -27px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
left: 10px;
`
: css`
right: 10px;
`}
left: unset;
inset-inline-end: 10px;
inset-inline-start: unset;
}
`;
@ -201,72 +155,34 @@ const settingsStudioStyles = css<{ settingsStudio?: boolean }>`
${({ settingsStudio }) =>
settingsStudio &&
css`
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding: 0 20px 16px 7px;
`
: css`
padding: 0 7px 16px 20px;
`}
padding-block: 0 16px;
padding-inline: 20px 7px;
@media ${tablet} {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding: 0 24px 16px 0;
`
: css`
padding: 0 0 16px 24px;
`}
padding-inline: 24px 0;
}
@media ${mobile} {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding: 0 24px 16px 0;
`
: css`
padding: 0 0 16px 24px;
`}
padding-inline: 24px 0;
}
`}
`;
const paddingStyles = css`
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding: 19px 20px 16px 3px;
`
: css`
padding: 19px 3px 16px 20px;
`}
padding-block: 19px 16px;
padding-inline: 20px 3px;
outline: none;
${settingsStudioStyles};
@media ${tablet} {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding: 0px 24px 16px 0;
`
: css`
padding: 0px 0 16px 24px;
`}
padding-block: 0 16px;
padding-inline: 24px 0;
}
@media ${mobile} {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding: 0px 24px 16px 8px;
`
: css`
padding: 0px 8px 16px 24px;
`}
padding-inline: 24px 8px;
}
`;
@ -282,8 +198,7 @@ const commonStyles = css<{
${(props) => (props.isDesktop ? "height: auto" : "height: 100%")};
${(props) => !props.withScroll && `height: 100%;`}
border-left: none;
border-right: none;
border-inline: none;
border-top: none;
.section-wrapper {
@ -303,17 +218,7 @@ const commonStyles = css<{
${paddingStyles}
flex: 1 0 auto;
outline: none;
${(props) =>
props.viewAs === "tile" &&
css`
${props.theme.interfaceDirection === "rtl"
? css`
padding-right: 20px;
`
: css`
padding-left: 20px;
`}
`}
${(props) => props.viewAs === "tile" && "padding-inline-start: 20px;"}
${(props) =>
(props.viewAs === "settings" || props.viewAs === "profile") &&
@ -326,23 +231,17 @@ const commonStyles = css<{
`};
@media ${`${mobileMore} and ${tablet}`} {
${({ isFormGallery, theme }) =>
${({ isFormGallery }) =>
isFormGallery &&
css`
padding: ${theme.interfaceDirection === "rtl"
? "0 16px 20px 0"
: "0 0 20px 16px"} !important;
padding-block: 0 20px !important;
padding-inline: 16px 0 !important;
`}
}
@media ${mobile} {
${({ isFormGallery, theme }) =>
isFormGallery &&
css`
padding: ${theme.interfaceDirection === "rtl"
? "0px 16px 16px 16px"
: "0px 16px 16px 16px"} !important;
`}
${({ isFormGallery }) =>
isFormGallery && "padding: 0px 16px 16px !important;"}
}
.section-wrapper {
@ -389,22 +288,10 @@ const StyledSectionBody = styled.div`
${(props) =>
props.withScroll &&
css`
${props.theme.interfaceDirection === "rtl"
? css`
margin-right: -20px;
`
: css`
margin-left: -20px;
`}
margin-inline-start: -20px;
@media ${tablet} {
${props.theme.interfaceDirection === "rtl"
? css`
margin-right: -24px;
`
: css`
margin-left: -24px;
`}
margin-inline-start: -24px;
}
`}
@ -412,13 +299,9 @@ const StyledSectionBody = styled.div`
isFormGallery &&
css`
@media ${tablet} {
margin: ${(props) =>
props.theme.interfaceDirection === "rtl"
? "0 -16px 0 0 "
: "0 0 0 -16px"};
padding: ${(props) =>
props.theme.interfaceDirection === "rtl" ? "0 0 0 0 " : "0 0 0 0"};
margin-block: 0;
margin-inline: -16px 0;
padding: 0;
}
`}
@ -444,22 +327,10 @@ const StyledDropZoneBody = styled(DragAndDrop)`
${(props) =>
props.withScroll &&
css`
${props.theme.interfaceDirection === "rtl"
? css`
margin-right: -20px;
`
: css`
margin-left: -20px;
`}
margin-inline-start: -20px;
@media ${tablet} {
${props.theme.interfaceDirection === "rtl"
? css`
margin-right: -24px;
`
: css`
margin-left: -24px;
`}
margin-inline-start: -24px;
}
`}
`;
@ -479,16 +350,9 @@ const tabletProps = css<{ viewAs?: TViewAs }>`
position: sticky;
top: 0;
background: ${(props) => props.theme.section.header.backgroundColor};
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 0;
`
: css`
padding-right: 0;
`}
padding-inline-end: 0;
z-index: 201;
@media ${mobile} {
min-width: 100vw;
margin-inline-start: -16px;
@ -586,9 +450,7 @@ const StyledSectionContainer = styled.section<SectionContainerProps>`
${(props) =>
props.showTwoProgress &&
css`
${props.theme.interfaceDirection === "rtl"
? `margin-right:calc(${closeIconSize} + ${sizeBetweenIcons}); `
: `margin-left:calc(${closeIconSize} + ${sizeBetweenIcons})`}
margin-inline-start: calc(${closeIconSize} + ${sizeBetweenIcons});
`}
}
@ -597,21 +459,12 @@ const StyledSectionContainer = styled.section<SectionContainerProps>`
width: ${closeIconSize};
height: ${closeIconSize};
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: ${sizeBetweenIcons};
`
: css`
margin-right: ${sizeBetweenIcons};
`}
margin-inline-end: ${sizeBetweenIcons};
${(props) =>
props.showTwoProgress &&
css`
${props.theme.interfaceDirection === "rtl"
? `margin-left:-${closeIconSize}`
: `margin-right:-${closeIconSize}`}
margin-inline-end: -${closeIconSize};
`}
}
}
@ -630,14 +483,7 @@ StyledSectionContainer.defaultProps = { theme: Base };
const StyledSectionFilter = styled.div`
@media ${tablet} {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: 16px;
`
: css`
margin-right: 16px;
`}
margin-inline-end: 16px;
}
`;
@ -703,24 +549,10 @@ StyledSectionHeader.defaultProps = { theme: Base };
const StyledSectionPaging = styled.div`
margin: 16px 0 0;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 3px;
`
: css`
padding-right: 3px;
`}
padding-inline-end: 3px;
@media ${tablet} {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 0px;
`
: css`
padding-right: 0px;
`}
padding-inline-end: 0;
}
`;

2
packages/shared/components/selected-item/SelectedItem.stories.tsx
View File

@ -63,7 +63,7 @@ const StyledContainerInline = styled.div`
margin-bottom: 10px;
> * {
margin-right: 10px;
margin-inline-end: 10px;
margin-bottom: 10px;
}
`;

10
packages/shared/components/selected-item/SelectedItem.styled.ts
View File

@ -46,10 +46,7 @@ const StyledSelectedItem = styled.div<{
padding: 6px 8px;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: 4px;`
: `margin-right: 4px;`}
margin-inline-end: 4px;
margin-bottom: 4px;
background: ${(props) => props.theme.filterInput.selectedItems.background};
@ -65,10 +62,7 @@ const StyledSelectedItem = styled.div<{
const StyledLabel = styled.div<{ isDisabled?: boolean; truncate?: boolean }>`
line-height: 20px;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: 10px;`
: `margin-right: 10px;`}
margin-inline-end: 10px;
max-width: 23ch;
color: ${(props) => props.isDisabled && props.theme.text.disableColor};

2
packages/shared/components/selection-area/SelectionArea.styled.ts
View File

@ -28,6 +28,8 @@ import styled from "styled-components";
const StyledSelectionArea = styled.div`
top: 0;
// doesn't require mirroring for RTL
left: 0;
position: fixed;
margin: 0;

50
packages/shared/components/selector/Selector.styled.ts
View File

@ -81,14 +81,12 @@ const StyledHeader = styled.div<{ withoutBorder: boolean }>`
.arrow-button {
cursor: pointer;
margin-right: 12px;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-left: 12px;
margin-right: 0px;
transform: scaleX(-1);
`}
margin-inline-end: 12px;
svg {
${({ theme }) =>
theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
}
}
.heading-text {
@ -118,7 +116,7 @@ const StyledBody = styled.div<{
? `calc(100% - 16px - ${props.headerHeight}px)`
: `calc(100% - 16px)`};
padding: ${({ withTabs }) => (withTabs ? "0" : "16px 0 0 0")};
padding: ${({ withTabs }) => (withTabs ? "0" : "16px 0 0")};
.search-input,
.search-loader {
@ -166,13 +164,7 @@ const StyledSelectAll = styled.div`
line-height: 16px;
margin-left: 8px;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-left: 0;
margin-right: 8px;
`}
margin-inline-start: 8px;
}
.checkbox {
@ -219,16 +211,9 @@ const StyledItem = styled.div<{
// width: 100%;
// max-width: 100%;
line-height: ${({ theme }) =>
theme.interfaceDirection === "rtl" ? `20px` : `18px`};
line-height: 18px;
margin-left: 8px;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-left: 0;
margin-right: 8px;
`}
margin-inline-start: 8px;
}
.clicked-label {
@ -359,7 +344,7 @@ const StyledBreadCrumbs = styled.div<{
width: 100%;
height: 38px;
padding: 0 16px 16px 16px;
padding: 0 16px 16px;
box-sizing: border-box;
@ -399,11 +384,9 @@ const StyledItemText = styled(Text)<{
StyledItemText.defaultProps = { theme: Base };
const StyledArrowRightSvg = styled(ArrowRightSvg)`
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
transform: scaleX(-1);
`}
${({ theme }) =>
theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
path {
fill: ${(props) => props.theme.selector.breadCrumbs.arrowRightColor};
}
@ -542,7 +525,7 @@ const StyledCreateDropDown = styled.div<{ isEmpty: boolean }>`
position: absolute;
top: ${(props) => (props.isEmpty ? "32px" : "48px")};
left: ${(props) => (props.isEmpty ? "-12px" : "16px")};
inset-inline-start: ${(props) => (props.isEmpty ? "-12px" : "16px")};
z-index: 453;
padding-top: 8px;
@ -568,8 +551,7 @@ const StyledCreateDropDown = styled.div<{ isEmpty: boolean }>`
position: fixed;
top: unset;
bottom: 0;
left: 0;
right: 0;
inset-inline: 0;
border-radius: 6px 6px 0 0;
}

2
packages/shared/components/share/sub-components/ShareCalendar.tsx
View File

@ -34,7 +34,7 @@ import { ShareCalendarProps } from "../Share.types";
const StyledCalendar = styled(Calendar)`
position: absolute;
right: 32px;
inset-inline-end: 32px;
${(props) =>
props.isMobile &&

13
packages/shared/components/snackbar/Snackbar.styled.ts
View File

@ -108,19 +108,14 @@ const StyledSnackBar = styled(Box)<{
border: none;
font-size: inherit;
color: "#333";
margin: 0px 4px 4px 24px;
margin-block: 0 4px;
margin-inline: 24px 4px;
padding: 0;
min-width: min-content;
cursor: pointer;
margin-left: 12px;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
margin-right: 12px;
margin-left: 4px;
`}
margin-inline-start: 12px;
text-decoration: underline;
}
@ -138,6 +133,7 @@ const StyledSnackBar = styled(Box)<{
const StyledAction = styled.div`
position: absolute;
// doesn't require mirroring for RTL
right: 8px;
top: 8px;
background: inherit;
@ -148,6 +144,7 @@ const StyledAction = styled.div`
cursor: pointer;
text-decoration: underline;
@media ${tablet} {
// doesn't require mirroring for RTL
right: 14px;
}
`;

9
packages/shared/components/social-button/SocialButton.styled.tsx
View File

@ -180,14 +180,7 @@ const StyledSocialButton = styled(ButtonWrapper).attrs((props) => ({
text-overflow: ${(props) => props.theme.socialButton.text.textOverflow};
white-space: ${(props) => props.theme.socialButton.text.whiteSpace};
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
padding-left: 16px;
`
: css`
padding-right: 16px;
`}
padding-inline-end: 16px;
}
svg {

113
packages/shared/components/table/Table.styled.ts
View File

@ -63,14 +63,10 @@ const StyledTableContainer = styled.div<{ useReactWindow?: boolean }>`
display: block;
cursor: ew-resize;
height: 10px;
margin: ${({ theme }) =>
getCorrectFourValuesStyle("14px 0px 0 auto", theme.interfaceDirection)};
margin-block: 14px 0;
margin-inline: auto 0;
z-index: 1;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `border-left: ${theme.tableContainer.borderRight};`
: `border-right: ${theme.tableContainer.borderRight};`}
border-inline-end: ${({ theme }) => theme.tableContainer.borderRight};
&:hover {
border-color: ${(props) => props.theme.tableContainer.hoverBorderColor};
@ -88,10 +84,7 @@ const StyledTableContainer = styled.div<{ useReactWindow?: boolean }>`
props.theme.tableContainer.header.borderImageSource};
border-top: 0;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `border-right: 0;`
: `border-left: 0;`}
border-inline-start: 0;
}
@media (hover: hover) {
@ -152,8 +145,8 @@ const StyledTableGroupMenu = styled.div<{ checkboxMargin?: string }>`
border-bottom: ${(props) =>
props.theme.tableContainer.groupMenu.borderBottom};
box-shadow: ${(props) => props.theme.tableContainer.groupMenu.boxShadow};
border-radius: ${({ theme }) =>
getCorrectBorderRadius("0px 0px 6px 6px", theme.interfaceDirection)};
border-end-end-radius: 6px;
border-end-start-radius: 6px;
display: flex;
flex-direction: row;
@ -167,38 +160,20 @@ const StyledTableGroupMenu = styled.div<{ checkboxMargin?: string }>`
margin: 0;
.table-container_group-menu-checkbox {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 28px;
${props.checkboxMargin && `margin-right: ${props.checkboxMargin};`}
`
: css`
margin-left: 28px;
${props.checkboxMargin && `margin-left: ${props.checkboxMargin};`}
`}
margin-inline-start: ${({ checkboxMargin }) => checkboxMargin ?? "28px"};
@media ${tablet} {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? css`
margin-right: 24px;
`
: css`
margin-left: 24px;
`}
margin-inline-start: 24px;
}
}
.table-container_group-menu-separator {
${(props) =>
props.theme.interfaceDirection === "rtl"
? `border-left: ${props.theme.tableContainer.groupMenu.borderRight};`
: `border-right: ${props.theme.tableContainer.groupMenu.borderRight};`}
border-inline-end: ${({ theme }) =>
theme.tableContainer.groupMenu.borderRight};
width: 1px;
height: 21px;
margin: ${({ theme }) =>
getCorrectFourValuesStyle("0 16px 0 20px", theme.interfaceDirection)};
margin-block: 0;
margin-inline: 20px 16px;
@media ${tablet} {
height: 36px;
@ -210,23 +185,20 @@ const StyledTableGroupMenu = styled.div<{ checkboxMargin?: string }>`
}
.table-container_group-menu_button {
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: 8px;`
: `margin-right: 8px;`}
margin-inline-end: 8px;
}
.table-container_group-menu-combobox {
height: 24px;
width: 16px;
margin: ${({ theme }) =>
getCorrectFourValuesStyle("7px 2px 0px 9px", theme.interfaceDirection)};
margin-block: 7px 0;
margin-inline: 9px 2px;
background: transparent;
.combo-button {
.combo-buttons_arrow-icon {
margin: ${({ theme }) =>
getCorrectFourValuesStyle("1px 16px 0 0", theme.interfaceDirection)};
margin-block: 1px 0;
margin-inline: 0 16px;
}
}
}
@ -246,8 +218,8 @@ const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)<{
align-items: center;
align-self: center;
justify-content: center;
margin: ${({ theme }) =>
getCorrectFourValuesStyle("0 20px 0 auto", theme.interfaceDirection)};
margin-block: 0;
margin-inline: auto 20px;
height: 100%;
width: auto;
@ -271,19 +243,13 @@ const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)<{
}
`}
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `
padding-right: 20px;
padding-left: 0;`
: `
padding-left: 20px;
padding-right: 0;`}
padding-inline-start: 20px;
padding-inline-end: 0;
@media ${tablet} {
display: none;
margin: ${({ theme }) =>
getCorrectFourValuesStyle("0 16px 0 auto", theme.interfaceDirection)};
margin-block: 0;
margin-inline: auto 16px;
}
margin-top: 1px;
@ -316,9 +282,7 @@ const StyledTableHeader = styled.div<{
.table-container_header-checkbox {
${(props) =>
props.checkboxMargin && props.interfaceDirection === "rtl"
? `margin-right: ${props.checkboxMargin}`
: `margin-left: ${props.checkboxMargin}`}
props.checkboxMargin && `margin-inline-start: ${props.checkboxMargin};`}
}
.table-container_header-cell {
@ -340,8 +304,8 @@ const StyledTableHeaderCell = styled.div<{
props.showIcon && props.sortingVisible ? "pointer" : "default"};
.header-container-text-icon {
padding: ${({ theme }) =>
getCorrectFourValuesStyle("13px 0 0 4px", theme.interfaceDirection)};
padding-block: 13px 0;
padding-inline: 4px 0;
display: ${(props) =>
props.isActive && props.showIcon ? "block" : "none"};
@ -349,10 +313,8 @@ const StyledTableHeaderCell = styled.div<{
!props.sorted &&
css`
transform: scale(1, -1);
padding: ${getCorrectFourValuesStyle(
"14px 0 14px 4px",
props.theme.interfaceDirection,
)};
padding-block: 14px;
padding-inline: 4px 0;
`}
svg {
@ -388,10 +350,7 @@ const StyledTableHeaderCell = styled.div<{
display: grid;
grid-template-columns: 1fr 22px;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-left: 8px;`
: `margin-right: 8px;`}
margin-inline-end: 8px;
user-select: none;
}
@ -482,11 +441,6 @@ const StyledTableCell = styled.div<{ hasAccess?: boolean; checked?: boolean }>`
display: flex;
align-items: center;
/* ${({ theme }) =>
theme.interfaceDirection === "rtl"
? `padding-left: 30px;`
: `padding-right: 30px;`} */
.react-svg-icon svg {
margin-top: 2px;
}
@ -498,10 +452,7 @@ const StyledTableCell = styled.div<{ hasAccess?: boolean; checked?: boolean }>`
display: ${(props) => (props.checked ? "flex" : "none")};
padding: 16px;
${({ theme }) =>
theme.interfaceDirection === "rtl"
? `margin-right: -4px;`
: `margin-left: -4px;`}
margin-inline-start: -4px;
}
${(props) =>
@ -523,8 +474,8 @@ StyledTableCell.defaultProps = {
};
const StyledTableSettings = styled.div`
margin: ${({ theme }) =>
getCorrectFourValuesStyle("14px 2px 0px 0px", theme.interfaceDirection)};
margin-block: 14px 0px;
margin-inline: 0 2px;
display: inline-block;
position: relative;
cursor: pointer;

2
packages/shared/components/table/sub-components/GroupMenuItem.tsx
View File

@ -100,7 +100,7 @@ const StyledButton = styled(Button)`
}
.btnIcon {
padding-right: 8px;
padding-inline-end: 8px;
}
.button-content {

13
packages/shared/components/tabs/Tabs.styled.ts
View File

@ -78,18 +78,9 @@ export const StyledTabs = styled.div<{
position: absolute;
height: 32px;
width: 60px;
inset-inline-end: 0;
pointer-events: none;
${(props) =>
props.theme.interfaceDirection === "ltr"
? css`
right: 0;
`
: css`
left: 0;
`}
background: ${(props) =>
props.theme.interfaceDirection === "ltr"
? `linear-gradient(
@ -187,7 +178,7 @@ export const Tab = styled.div<{
user-select: none;
padding: ${(props) =>
props.$type === TabsTypes.Primary ? "4px 0 0 0" : "4px 16px"};
props.$type === TabsTypes.Primary ? "4px 0 0" : "4px 16px"};
color: ${(props) =>

19
packages/shared/components/tag/Tag.styled.ts
View File

@ -49,15 +49,7 @@ const StyledTag = styled.div<{
box-sizing: border-box;
padding: 2px 10px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-left: ${props.isLast ? "0" : "4px"};
`
: css`
margin-right: ${props.isLast ? "0" : "4px"};
`}
margin-inline-end: ${({ isLast }) => (isLast ? "0" : "4px")};
background: ${(props) =>
props.isDisabled
@ -88,14 +80,7 @@ const StyledTag = styled.div<{
`}
.tag-icon {
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
margin-right: 12px;
`
: css`
margin-left: 12px;
`}
margin-inline-start: 12px;
cursor: pointer;
}

19
packages/shared/components/textarea/Textarea.styled.tsx
View File

@ -142,10 +142,7 @@ const StyledTextarea = styled(ClearTextareaAutosize).attrs(
overflow: ${(props) => (props.isJSONField ? "visible !important" : "hidden")};
padding: 5px 8px 2px;
${(props) =>
props.theme.interfaceDirection === "rtl"
? `padding-right: ${props.paddingLeftProp};`
: `padding-left: ${props.paddingLeftProp};`}
padding-inline-start: ${(props) => props.paddingLeftProp};
font-size: ${(props) => `${props.fontSize}px`};
font-family: ${(props) => props.theme.fontFamily};
@ -189,6 +186,7 @@ const StyledTextarea = styled(ClearTextareaAutosize).attrs(
user-select: none;
}
// doesn't require mirroring for LTR
${({ theme }) =>
theme.interfaceDirection === "rtl" &&
`
@ -223,10 +221,8 @@ const CopyIconWrapper = styled.div<{
height: 20px;
z-index: 2;
${(props) =>
props.theme.interfaceDirection === "rtl"
? `left: ${props.isJSONField && props.heightScale ? "18px" : "10px"};`
: `right: ${props.isJSONField && props.heightScale ? "18px" : "10px"};`}
inset-inline-end: ${(props) =>
props.isJSONField && props.heightScale ? "18px" : "10px"};
top: 6px;
display: flex;
@ -258,7 +254,7 @@ const Wrapper = styled.div<{
}};
.scroll-wrapper {
margin-right: ${(props) =>
margin-inline-end: ${(props) =>
props.enableCopy ? (props.isJSONField ? "36px" : "8px") : "0"};
}
`;
@ -271,10 +267,9 @@ const Numeration = styled.pre<{ fontSize: string }>`
line-height: 1.5;
margin: 0;
top: 6px;
text-align: right;
text-align: end;
${({ theme }) =>
theme.interfaceDirection === "rtl" ? `right: 18px;` : `left: 18px;`}
inset-inline-start: 18px;
color: ${(props) => props.theme.textArea.numerationColor};
-webkit-user-select: none; /* Safari */

3
packages/shared/components/time-picker/TimePicker.styled.tsx
View File

@ -59,8 +59,7 @@ const TimeInput = styled.div<{ hasError?: boolean; isFocused?: boolean }>`
input {
max-width: 22px;
padding: 0;
padding-left: 2.5px;
margin-right: -2.5px;
padding-inline: 2.5px -2.5px;
}
input[type="search"]::-webkit-search-decoration,

21
packages/shared/components/toast/Toast.styled.ts
View File

@ -45,13 +45,7 @@ const StyledToastContainer = styled(ToastContainer)<{ $topOffset: number }>`
color: ${(props) => props.theme.toast.color};
top: ${(props) =>
`${parseInt(props.theme.toast.top, 10) + props.$topOffset}px`};
right: ${(props) => props.theme.toast.right};
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
left: ${props.theme.toast.right};
right: auto;
`}
inset-inline-end: ${(props) => props.theme.toast.right};
margin-top: ${(props) => props.theme.toast.marginTop};
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@ -182,7 +176,7 @@ const StyledToastContainer = styled(ToastContainer)<{ $topOffset: number }>`
min-height: ${(props) => props.theme.toast.main.minHeight};
font: normal 12px ${(props) => props.theme.fontFamily};
width: ${(props) => props.theme.toast.main.width};
right: ${(props) => props.theme.toast.main.right};
inset-inline-end: ${(props) => props.theme.toast.main.right};
transition: ${(props) => props.theme.toast.main.transition};
@ -211,19 +205,12 @@ const StyledToastContainer = styled(ToastContainer)<{ $topOffset: number }>`
}
@media ${tablet} {
right: 16px;
${(props) =>
props.theme.interfaceDirection === "rtl" &&
css`
left: 16px;
right: auto;
`}
inset-inline-end: 16px;
}
@media only screen and (${mobile}) {
left: 0;
inset-inline: 0;
margin: auto;
right: 0;
width: 100%;
max-width: calc(100% - 32px);

2
packages/shared/components/toggle-button/ToggleButton.styled.ts
View File

@ -122,7 +122,7 @@ ToggleButtonContainer.defaultProps = { theme: Base };
const HiddenInput = styled.input`
opacity: 0.0001;
position: absolute;
right: 0;
inset-inline-end: 0;
z-index: -1;
`;

4
packages/shared/components/tooltip/Tooltip.styled.ts
View File

@ -65,11 +65,11 @@ const StyledTooltip = styled.div<{ maxWidthProp?: string; color?: string }>`
}
.__react_component_tooltip.place-left::after {
border-left: none !important;
border-inline-start: none !important;
}
.__react_component_tooltip.place-right::after {
border-right: none !important;
border-inline-end: none !important;
}
.__react_component_tooltip.place-top::after {

6
packages/shared/components/tooltip/tooltip.stories.tsx
View File

@ -49,7 +49,7 @@ type Story = StoryObj<typeof Tooltip>;
export default meta;
const bodyStyle = { marginTop: 100, marginLeft: 200 };
const bodyStyle = { marginTop: 100, marginInlineStart: 200 };
export const Default: Story = {
render: (args) => {
@ -122,7 +122,7 @@ export const AllTooltip: Story = {
return (
<div>
<div>
<h5 style={{ marginLeft: -5 }}>Hover on me</h5>
<h5 style={{ marginInlineStart: -5 }}>Hover on me</h5>
<Link data-tooltip-id="link" data-tooltip-content="Bob Johnston">
Bob Johnston
</Link>
@ -142,7 +142,7 @@ export const AllTooltip: Story = {
</Tooltip>
<div>
<h5 style={{ marginLeft: -5 }}>Hover group</h5>
<h5 style={{ marginInlineStart: -5 }}>Hover group</h5>
<Link data-tooltip-id="group" data-tooltip-content={0}>
Bob
</Link>

Some files were not shown because too many files have changed in this diff Show More