Client: refactor RTL
This commit is contained in:
parent
3663185b66
commit
1c37431e5e
@ -23,18 +23,11 @@
|
||||
// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
|
||||
// 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 "@docspace/shared/themes/base";
|
||||
|
||||
const StyledAccessSelector = styled.div`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 16px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 16px;
|
||||
`}
|
||||
margin-inline-end: 16px;
|
||||
`;
|
||||
|
||||
StyledAccessSelector.defaultProps = { theme: Base };
|
||||
|
||||
@ -39,32 +39,16 @@ const StyledMainButtonMobile = styled(MainButtonMobile)`
|
||||
position: fixed;
|
||||
z-index: 200;
|
||||
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
left: ${isMobileOnly
|
||||
? "calc(16px + env(safe-area-inset-left))"
|
||||
: "24px"};
|
||||
`
|
||||
: css`
|
||||
right: ${isMobileOnly
|
||||
? "calc(16px + env(safe-area-inset-right))"
|
||||
: "24px"};
|
||||
`}
|
||||
inset-inline-end: ${({ theme }) => {
|
||||
const side = theme.interfaceDirection === "rtl" ? "left" : "right";
|
||||
return isMobileOnly ? `calc(16px + env(safe-area-inset-${side}))` : "24px";
|
||||
}};
|
||||
|
||||
bottom: 24px;
|
||||
|
||||
@media ${mobile} {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
left: 16px;
|
||||
`
|
||||
: css`
|
||||
right: 16px;
|
||||
`}
|
||||
inset-inline-end: 16px;
|
||||
bottom: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -115,8 +115,8 @@ const StyledButton = styled(Button)`
|
||||
justify-content: space-between;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
padding: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("5px 14px 5px 12px", theme.interfaceDirection)};
|
||||
padding-block: 5px;
|
||||
padding-inline: 12px 14px;
|
||||
line-height: 22px;
|
||||
border-radius: 3px;
|
||||
|
||||
|
||||
@ -28,8 +28,8 @@ import styled from "styled-components";
|
||||
import { getCorrectFourValuesStyle, mobileMore } from "@docspace/shared/utils";
|
||||
|
||||
const StyledBreakpointWarning = styled.div`
|
||||
padding: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("24px 44px 0 24px", theme.interfaceDirection)};
|
||||
padding-block: 24px 0;
|
||||
padding-inline: 24px 44px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -62,12 +62,12 @@ const StyledBreakpointWarning = styled.div`
|
||||
@media ${mobileMore} {
|
||||
flex-direction: row;
|
||||
|
||||
padding: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("65px 0 0 104px", theme.interfaceDirection)};
|
||||
padding-block: 65px 0;
|
||||
padding-inline: 104px 0;
|
||||
|
||||
.description {
|
||||
padding: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("0 0 0 32px", theme.interfaceDirection)};
|
||||
padding-block: 0;
|
||||
padding-inline: 32px 0;
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
@ -37,10 +37,7 @@ import {
|
||||
const StyledLoader = styled.div`
|
||||
padding-top: 25px;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-right: 32px;`
|
||||
: `padding-left: 32px;`}
|
||||
padding-inline-start: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -63,12 +60,12 @@ const StyledLoader = styled.div`
|
||||
|
||||
@media ${mobileMore} {
|
||||
flex-direction: row;
|
||||
padding: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("65px 0 0 104px", theme.interfaceDirection)};
|
||||
padding-block: 65px 0;
|
||||
padding-inline: 104px 0;
|
||||
|
||||
.loader-description {
|
||||
padding: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("0 0 0 32px", theme.interfaceDirection)};
|
||||
padding-block: 0;
|
||||
padding-inline: 32px 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -50,14 +50,7 @@ const StyledTooltip = styled.div`
|
||||
align-items: center;
|
||||
}
|
||||
.tooltip-moved-obj-icon {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 6px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 6px;
|
||||
`}
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
.tooltip-moved-obj-extension {
|
||||
color: ${(props) => props.theme.filesDragTooltip.color};
|
||||
|
||||
@ -98,9 +98,8 @@ const EditingWrapper = styled.div`
|
||||
|
||||
height: 43px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 9px 8px 9px 8px;
|
||||
inset-inline: 0;
|
||||
padding: 9px 8px;
|
||||
`}
|
||||
|
||||
|
||||
@ -120,8 +119,7 @@ const EditingWrapper = styled.div`
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
font-family: ${(props) => props.theme.fontFamily};
|
||||
text-align: ${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `right` : `left`};
|
||||
text-align: start;
|
||||
color: ${(props) => props.theme.filesEditingWrapper.color};
|
||||
background: ${(props) =>
|
||||
props.theme.filesEditingWrapper.row.itemBackground} !important;
|
||||
@ -129,14 +127,7 @@ const EditingWrapper = styled.div`
|
||||
${(props) =>
|
||||
props.viewAs === "tile" &&
|
||||
css`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 2px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 2px;
|
||||
`}
|
||||
margin-inline-end: 2px;
|
||||
border: none;
|
||||
background: none;
|
||||
`};
|
||||
@ -144,20 +135,13 @@ const EditingWrapper = styled.div`
|
||||
${(props) =>
|
||||
props.isUpdatingRowItem &&
|
||||
css`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 0;
|
||||
`
|
||||
: css`
|
||||
margin-left: 0;
|
||||
`}
|
||||
margin-inline-start: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: none !important;
|
||||
`}
|
||||
|
||||
${(props) => props.viewAs === "table" && `padding-left: 12px`}
|
||||
${(props) => props.viewAs === "table" && `padding-inline-start: 12px`}
|
||||
|
||||
${(props) =>
|
||||
props.viewAs === "tile" &&
|
||||
@ -178,28 +162,14 @@ const EditingWrapper = styled.div`
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 8px;
|
||||
`}
|
||||
margin-inline-start: 8px;
|
||||
height: 32px;
|
||||
padding: 0px 7px 0px 7px;
|
||||
padding: 0px 7px;
|
||||
|
||||
${(props) =>
|
||||
props.viewAs === "tile" &&
|
||||
css`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 0;
|
||||
`
|
||||
: css`
|
||||
margin-left: 0;
|
||||
`}
|
||||
margin-inline-start: 0;
|
||||
background: ${(props) =>
|
||||
props.theme.filesEditingWrapper.tile.itemBackground};
|
||||
border: ${(props) =>
|
||||
|
||||
@ -44,7 +44,7 @@ const EmptyFolderWrapper = styled.div`
|
||||
.first-button {
|
||||
display: flex;
|
||||
.empty-folder_container-icon {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -64,14 +64,8 @@ const EmptyFolderWrapper = styled.div`
|
||||
}
|
||||
|
||||
.empty-folder_container-icon {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin: 4px 0 0 4px;
|
||||
`
|
||||
: css`
|
||||
margin: 4px 4px 0 0;
|
||||
`}
|
||||
margin-block: 4px 0;
|
||||
margin-inline: 0 4px;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -41,14 +41,7 @@ export const EncryptedFileIcon = styled.div`
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
margin-top: 14px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 12px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 12px;
|
||||
`}
|
||||
margin-inline-start: 12px;
|
||||
`;
|
||||
|
||||
export const StyledFavoriteIcon = styled(FavoriteIcon)`
|
||||
|
||||
@ -41,10 +41,7 @@ const IconWrapper = styled.div`
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
inset: 0;
|
||||
border: 1px solid ${(props) => props.theme.itemIcon.borderColor};
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
@ -70,14 +67,7 @@ const EncryptedFileIcon = styled.div`
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
margin-top: 14px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 12px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 12px;
|
||||
`}
|
||||
margin-inline-start: 12px;
|
||||
`;
|
||||
|
||||
const ItemIcon = ({
|
||||
|
||||
@ -42,10 +42,7 @@ const StyledContainer = styled.div`
|
||||
max-width: calc(100% + 8px);
|
||||
}
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-left: -16px;`
|
||||
: `margin-right: -16px;`}
|
||||
margin-inline-end: -16px;
|
||||
|
||||
#bar-banner {
|
||||
margin-bottom: -3px;
|
||||
|
||||
@ -41,10 +41,7 @@ const StyledIconBox = styled.div`
|
||||
|
||||
align-items: center;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-right: 16px;`
|
||||
: `padding-left: 16px;`}
|
||||
padding-inline-start: 16px;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
`;
|
||||
|
||||
|
||||
@ -29,24 +29,19 @@ import PropTypes from "prop-types";
|
||||
import styled, { css } from "styled-components";
|
||||
import ProfileActions from "./profile-actions";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
mobile,
|
||||
tablet,
|
||||
getCorrectFourValuesStyle,
|
||||
} from "@docspace/shared/utils";
|
||||
import { mobile, tablet } from "@docspace/shared/utils";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
const StyledNav = styled.nav`
|
||||
display: flex;
|
||||
|
||||
padding: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("0 20px 0 16px", theme.interfaceDirection)};
|
||||
padding-block: 0;
|
||||
padding-inline: 16px 20px;
|
||||
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `left: 0;` : `right: 0;`}
|
||||
inset-inline-end: 0;
|
||||
height: 48px;
|
||||
z-index: 180 !important;
|
||||
|
||||
@ -57,8 +52,8 @@ const StyledNav = styled.nav`
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
padding: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("0 0px 0 16px", theme.interfaceDirection)};
|
||||
padding-block: 0;
|
||||
padding-inline: 16px 0;
|
||||
}
|
||||
.icon-profile-menu {
|
||||
cursor: pointer;
|
||||
|
||||
@ -40,10 +40,7 @@ const StyledContainer = styled.div`
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-left: 22px;`
|
||||
: `margin-right: 22px;`}
|
||||
margin-inline-end: 22px;
|
||||
|
||||
.navigation-item__svg {
|
||||
height: 20px;
|
||||
@ -70,8 +67,7 @@ const StyledContainer = styled.div`
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `left: -8px;` : `right: -8px;`}
|
||||
inset-inline-end: -8px;
|
||||
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
@ -38,7 +38,7 @@ import { setLanguageForUnauthorized } from "@docspace/shared/utils/common";
|
||||
import i18n from "../../../i18n";
|
||||
|
||||
const Header = styled.header`
|
||||
align-items: left;
|
||||
align-items: start;
|
||||
background-color: ${(props) => props.theme.header.backgroundColor};
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
@ -79,7 +79,7 @@ const Header = styled.header`
|
||||
//margin: auto;
|
||||
// margin-right: 8px;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
inset-inline-end: 8px;
|
||||
top: 6px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -66,7 +66,7 @@ const Header = styled.header`
|
||||
|
||||
.header-logo-icon {
|
||||
position: absolute;
|
||||
right: 50%; /* Just centering. Does not require rtl mirroring */
|
||||
right: 50%; /* Does not require rtl mirroring */
|
||||
transform: translateX(50%);
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
@ -83,11 +83,7 @@ const Header = styled.header`
|
||||
|
||||
.header-items-wrapper {
|
||||
display: flex;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-right: 82px;`
|
||||
: `margin-left: 82px;`}
|
||||
margin-inline-start: 82px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -121,17 +117,13 @@ const StyledNavigationIconsWrapper = styled.div`
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `right: ${isMobile ? "254px" : "275px"};`
|
||||
: `left: ${isMobile ? "254px" : "275px"};`}
|
||||
inset-inline-start: ${isMobile ? "254px" : "275px"};
|
||||
display: ${isMobileOnly ? "none" : "flex"};
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
@media ${tablet} {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `right: 254px;` : `left: 254px;`}
|
||||
inset-inline-start: 254px;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
|
||||
@ -54,8 +54,8 @@ const NavItemWrapper = styled(Link)`
|
||||
min-width: 48px;
|
||||
min-height: 50px;
|
||||
align-items: center;
|
||||
padding: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("0 16px 0 20px", theme.interfaceDirection)};
|
||||
padding-block: 0;
|
||||
padding-inline: 20px 16px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
@ -93,16 +93,16 @@ const NavItemWrapper = styled(Link)`
|
||||
`}
|
||||
|
||||
@media ${tablet} {
|
||||
padding: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("0 16px 0 16px", theme.interfaceDirection)};
|
||||
padding-block: 0;
|
||||
padding-inline: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
NavItemWrapper.defaultProps = { theme: Base };
|
||||
|
||||
const NavItemLabel = styled(Text)`
|
||||
margin: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("0 auto 0 16px", theme.interfaceDirection)};
|
||||
margin-block: 0;
|
||||
margin-inline: 16px auto;
|
||||
|
||||
display: ${(props) => (props.opened ? "block" : "none")};
|
||||
color: ${(props) =>
|
||||
@ -117,8 +117,8 @@ const badgeCss = css`
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `left: 4px;` : `right: 4px;`}
|
||||
inset-inline-end: 4px;
|
||||
|
||||
overflow: inherit;
|
||||
`;
|
||||
|
||||
@ -136,9 +136,7 @@ const VersionBadge = styled.div`
|
||||
padding: 3px 6px;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `right: 10px;` : `left: 10px;`}
|
||||
inset-inline-start: 10px;
|
||||
`;
|
||||
|
||||
const StyledMenuIcon = styled(MenuIcon)`
|
||||
|
||||
@ -35,8 +35,7 @@ const StyledNav = styled.nav`
|
||||
background-color: ${(props) => props.theme.nav.backgroundColor};
|
||||
height: 100%;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `right: 0;` : `left: 0;`}
|
||||
inset-inline-start: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
@ -63,8 +62,7 @@ const StyledNav = styled.nav`
|
||||
|
||||
bottom: 8px;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `right: 16px;` : `left: 16px;`}
|
||||
inset-inline-start: 16px;
|
||||
|
||||
white-space: nowrap;
|
||||
a:focus {
|
||||
|
||||
@ -47,24 +47,17 @@ const StyledDropDown = styled(DropDown)`
|
||||
top: ${(props) =>
|
||||
props.isBannerVisible && props.withPortal ? "134px" : "54px"} !important;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `left: 20px !important;`
|
||||
: `right: 20px !important;`}
|
||||
inset-inline-end: 20px !important;
|
||||
|
||||
@media ${tablet} {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `left: 16px !important;`
|
||||
: `right: 16px !important;`}
|
||||
inset-inline-end: 16px !important;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
position: fixed;
|
||||
|
||||
top: unset !important;
|
||||
right: 0 !important;
|
||||
left: 0 !important;
|
||||
inset-inline: 0 !important;
|
||||
bottom: 0 !important;
|
||||
width: 100vw;
|
||||
|
||||
@ -79,8 +72,7 @@ const StyledControlContainer = styled.div`
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
top: -34px;
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `left: 10px;` : `right: 10px;`}
|
||||
inset-inline-end: 10px;
|
||||
border-radius: 100px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
|
||||
@ -40,7 +40,7 @@ const StyledBody = styled.div`
|
||||
|
||||
.quota_checkbox {
|
||||
svg {
|
||||
margin-right: 8px;
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -48,8 +48,7 @@ const StyledBody = styled.div`
|
||||
}
|
||||
.conversion-input {
|
||||
width: 100%;
|
||||
text-align: ${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `right` : `left`};
|
||||
text-align: start;
|
||||
}
|
||||
`;
|
||||
const SimulatePassword = memo(
|
||||
|
||||
@ -31,7 +31,7 @@ const StyledBody = styled.div`
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: max-content;
|
||||
margin-left: 0px !important;
|
||||
margin-inline-start: 0px !important;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
@ -48,8 +48,7 @@ const StyledBody = styled.div`
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
.combo-button {
|
||||
padding-left: 8px;
|
||||
padding-right: 0px;
|
||||
padding-inline: 8px 0;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,14 +67,7 @@ const StyledContactComponent = styled.div`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
p {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 4px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 4px;
|
||||
`}
|
||||
margin-inline-end: 4px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
|
||||
@ -41,10 +41,7 @@ const StyledModal = styled(ModalDialogContainer)`
|
||||
.cancel-btn {
|
||||
display: inline-block;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-right: 8px;`
|
||||
: `margin-left: 8px;`}
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -51,10 +51,7 @@ const StyledAvatarCropper = styled.div`
|
||||
position: absolute;
|
||||
width: 216px;
|
||||
height: 216px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset: 0;
|
||||
svg {
|
||||
opacity: 0.2;
|
||||
path {
|
||||
|
||||
@ -49,10 +49,7 @@ const StyledModal = styled(ModalDialogContainer)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-right: 8px;`
|
||||
: `padding-left: 8px;`}
|
||||
padding-inline-start: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -36,10 +36,7 @@ const StyledOwnerInfo = styled.div`
|
||||
margin-bottom: 24px;
|
||||
|
||||
.info {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-right: 16px;`
|
||||
: `padding-left: 16px;`}
|
||||
padding-inline-start: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -94,10 +91,7 @@ const StyledPeopleSelector = styled.div`
|
||||
|
||||
color: ${(props) => props.theme.dialogs.disableText};
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-right: 8px;`
|
||||
: `margin-left: 8px;`}
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -32,10 +32,7 @@ const StyledComponent = styled.div`
|
||||
}
|
||||
|
||||
.convert-password-dialog_button-accept {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-left: 8px;`
|
||||
: `margin-right: 8px;`}
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.conversation-password-wrapper {
|
||||
@ -60,9 +57,7 @@ const StyledComponent = styled.div`
|
||||
`
|
||||
: css`
|
||||
#convert-password-dialog_button-accept {
|
||||
${theme.interfaceDirection === "rtl"
|
||||
? `margin-left: 8px;`
|
||||
: `margin-right: 8px;`}
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
@ -31,7 +31,7 @@ export const GroupNameParam = styled.div`
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
max-height: 54px;
|
||||
margin: 4px 0 20px 0;
|
||||
margin: 4px 0 20px;
|
||||
|
||||
.input-label {
|
||||
cursor: pointer;
|
||||
|
||||
@ -28,7 +28,7 @@ import styled from "styled-components";
|
||||
|
||||
export const Header = styled.div`
|
||||
width: 100%;
|
||||
padding: 8px 0 12px 0;
|
||||
padding: 8px 0 12px;
|
||||
|
||||
color: #a3a9ae;
|
||||
font-size: 14px;
|
||||
|
||||
@ -28,7 +28,7 @@ import styled from "styled-components";
|
||||
|
||||
export const Header = styled.div`
|
||||
width: 100%;
|
||||
padding: 8px 0 12px 0;
|
||||
padding: 8px 0 12px;
|
||||
|
||||
color: #a3a9ae;
|
||||
font-size: 14px;
|
||||
|
||||
@ -52,10 +52,7 @@ const StyledIconCropper = styled.div`
|
||||
position: absolute;
|
||||
width: 216px;
|
||||
height: 216px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset: 0;
|
||||
svg {
|
||||
opacity: 0.2;
|
||||
path {
|
||||
|
||||
@ -88,10 +88,7 @@ const StyledPermanentSetting = styled.div`
|
||||
}
|
||||
|
||||
.permanent_setting-help_button {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-right: auto;`
|
||||
: `margin-left: auto;`}
|
||||
margin-inline-start: auto;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
|
||||
@ -48,8 +48,7 @@ const StyledDropdownDesktop = styled.div`
|
||||
z-index: 400;
|
||||
top: 0;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `right: 0;` : `left: 0;`}
|
||||
inset-inline-start: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
|
||||
@ -40,10 +40,7 @@ const StyledDropdownMobile = styled.div`
|
||||
z-index: 500;
|
||||
padding-top: 6px;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-right: -16px;`
|
||||
: `margin-left: -16px;`}
|
||||
margin-inline-start: -16px;
|
||||
box-shadow: 0px -4px 60px rgba(4, 15, 27, 0.12);
|
||||
border-radius: 6px 6px 0px 0px;
|
||||
background: ${(props) =>
|
||||
|
||||
@ -42,10 +42,7 @@ const StyledTagList = styled.div`
|
||||
margin: 0;
|
||||
|
||||
.tag-icon {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-right: 10px;`
|
||||
: `margin-left: 10px;`}
|
||||
margin-inline-start: 10px;
|
||||
svg {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
@ -69,17 +69,14 @@ const StyledFolderInput = styled.div`
|
||||
.root_label,
|
||||
.path,
|
||||
.room_title {
|
||||
padding: 5px 0px 5px 0px;
|
||||
padding: 5px 0px;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.root_label {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-right: 8px;`
|
||||
: `padding-left: 8px;`}
|
||||
padding-inline-start: 8px;
|
||||
/* background-color: ${(props) =>
|
||||
props.theme.createEditRoomDialog.thirdpartyStorage.folderInput
|
||||
.background}; */
|
||||
@ -95,20 +92,14 @@ const StyledFolderInput = styled.div`
|
||||
}
|
||||
|
||||
.room_title {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-left: 8px;`
|
||||
: `padding-right: 8px;`}
|
||||
padding-inline-end: 8px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-right: auto;`
|
||||
: `margin-left: auto;`}
|
||||
margin-inline-start: auto;
|
||||
background-color: ${(props) =>
|
||||
props.theme.createEditRoomDialog.thirdpartyStorage.folderInput
|
||||
.background};
|
||||
@ -122,10 +113,7 @@ const StyledFolderInput = styled.div`
|
||||
transition: all 0.2s ease;
|
||||
border-top: none !important;
|
||||
border-bottom: none !important;
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `border-left: none !important;`
|
||||
: `border-right: none !important;`}
|
||||
border-inline-end: none !important;
|
||||
|
||||
&:hover {
|
||||
path {
|
||||
|
||||
@ -51,7 +51,7 @@ const StyledStorageLocation = styled.div`
|
||||
}
|
||||
|
||||
.combo-button {
|
||||
padding-left: 8px;
|
||||
padding-inline-start: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -38,7 +38,7 @@ const StyledCatalogSpamIcon = styled(CatalogSpamIcon)`
|
||||
path {
|
||||
fill: #f21c0e;
|
||||
}
|
||||
padding-left: 8px;
|
||||
padding-inline-start: 8px;
|
||||
`;
|
||||
|
||||
const AccountInfo = ({ user }) => {
|
||||
|
||||
@ -101,7 +101,7 @@ const StyledProgress = styled.div`
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
padding-left: 24px;
|
||||
padding-inline-start: 24px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
|
||||
@ -40,10 +40,10 @@ const StyledDeleteDialog = styled(ModalDialog)`
|
||||
}
|
||||
|
||||
.modal-dialog-aside-header {
|
||||
margin: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("0 -24px 0 -16px", theme.interfaceDirection)};
|
||||
padding: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("0 0 0 16px", theme.interfaceDirection)};
|
||||
margin-block: 0;
|
||||
margin-inline: -16px -24px;
|
||||
padding-block: 0;
|
||||
padding-inline: 16px 0;
|
||||
}
|
||||
|
||||
.delete_dialog-header-text {
|
||||
@ -70,10 +70,7 @@ const StyledDeleteDialog = styled(ModalDialog)`
|
||||
@media ${tablet} {
|
||||
width: 100%;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-left: 32px;`
|
||||
: `padding-right: 32px;`}
|
||||
padding-inline-end: 32px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,10 +39,10 @@ const StyledDeleteLinkDialog = styled(ModalDialog)`
|
||||
}
|
||||
|
||||
.modal-dialog-aside-header {
|
||||
margin: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("0 -24px 0 -16px", theme.interfaceDirection)};
|
||||
padding: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("0 0 0 16px", theme.interfaceDirection)};
|
||||
margin-block: 0;
|
||||
margin-inline: -16px -24px;
|
||||
padding-block: 0;
|
||||
padding-inline: 16px 0;
|
||||
}
|
||||
|
||||
.delete_dialog-header-text {
|
||||
@ -68,10 +68,7 @@ const StyledDeleteLinkDialog = styled(ModalDialog)`
|
||||
.modal-dialog-aside-footer {
|
||||
@media ${tablet} {
|
||||
width: 100%;
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-left: 32px;`
|
||||
: `padding-right: 32px;`}
|
||||
padding-inline-end: 32px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@ -118,10 +118,7 @@ const StyledDownloadContent = styled.div`
|
||||
.download-dialog-link {
|
||||
width: max-content;
|
||||
a {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-left: 0;`
|
||||
: `padding-right: 0;`}
|
||||
padding-inline-end: 0;
|
||||
text-underline-offset: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,8 +50,7 @@ export const GroupMember = styled.div<{ isExpect: boolean }>`
|
||||
.name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: ${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `20px` : `16px`};
|
||||
line-height: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -62,8 +61,7 @@ export const GroupMember = styled.div<{ isExpect: boolean }>`
|
||||
.me-label {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: ${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `20px` : `16px`};
|
||||
line-height: 16px;
|
||||
color: ${(props) => props.theme.infoPanel.members.meLabelColor};
|
||||
padding-inline-start: 8px;
|
||||
margin-inline-start: -8px;
|
||||
|
||||
@ -39,10 +39,7 @@ const StyledModal = styled(ModalDialogContainer)`
|
||||
.cancel-btn {
|
||||
display: inline-block;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-right: 8px;`
|
||||
: `margin-left: 8px;`}
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -68,10 +68,7 @@ const ModalDialogContainer = styled(ModalDialog)`
|
||||
}
|
||||
|
||||
.link-dialog {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-left: 12px;`
|
||||
: `margin-right: 12px;`}
|
||||
margin-inline-end: 12px;
|
||||
}
|
||||
|
||||
.error-label {
|
||||
@ -117,10 +114,7 @@ const ModalDialogContainer = styled(ModalDialog)`
|
||||
}
|
||||
|
||||
.convert_dialog-content {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-right: 16px;`
|
||||
: `padding-left: 16px;`}
|
||||
padding-inline-start: 16px;
|
||||
|
||||
@media ${tablet} {
|
||||
padding: 0;
|
||||
|
||||
@ -39,25 +39,16 @@ const StyledMoveToPublicRoomDialog = styled(ModalDialog)`
|
||||
}
|
||||
|
||||
.modal-dialog-aside-header {
|
||||
margin: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle(
|
||||
"0 -24px 0 -16px",
|
||||
theme.interfaceDirection === "rtl",
|
||||
)};
|
||||
padding: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle(
|
||||
"0 0 0 16px",
|
||||
theme.interfaceDirection === "rtl",
|
||||
)};
|
||||
margin-block: 0;
|
||||
margin-inline: -16px -24px;
|
||||
padding-block: 0;
|
||||
padding-inline: 16px 0;
|
||||
}
|
||||
|
||||
.modal-dialog-aside-footer {
|
||||
@media ${tablet} {
|
||||
width: 100%;
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-left: 32px;`
|
||||
: `padding-right: 32px;`}
|
||||
padding-inline-end: 32px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@ -39,6 +39,7 @@ import { messageActions } from "SRC_DIR/helpers/plugins/utils";
|
||||
const StyledFullScreen = styled.div`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
// doesn't require mirroring for RTL
|
||||
left: 0;
|
||||
z-index: 500;
|
||||
background: ${(props) => props.theme.backgroundColor};
|
||||
|
||||
@ -40,10 +40,7 @@ const StyledModal = styled(ModalDialogContainer)`
|
||||
.cancel-btn {
|
||||
display: inline-block;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-right: 8px;`
|
||||
: `margin-left: 8px;`}
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -40,10 +40,7 @@ const StyledModal = styled(ModalDialogContainer)`
|
||||
.cancel-btn {
|
||||
display: inline-block;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-right: 8px;`
|
||||
: `margin-left: 8px;`}
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -32,14 +32,7 @@ import { ModalDialog } from "@docspace/shared/components/modal-dialog";
|
||||
const StyledEditLinkPanel = styled(ModalDialog)`
|
||||
.edit-link-panel {
|
||||
.scroll-body {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-left: 0 !important;
|
||||
`
|
||||
: css`
|
||||
padding-right: 0 !important;
|
||||
`}
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,7 +48,7 @@ const StyledEditLinkPanel = styled(ModalDialog)`
|
||||
padding: 4px 0px 0px;
|
||||
|
||||
.edit-link_link-block {
|
||||
padding: 0px 16px 20px 16px;
|
||||
padding: 0px 16px 20px;
|
||||
|
||||
.edit-link-text {
|
||||
display: inline-flex;
|
||||
@ -64,14 +57,7 @@ const StyledEditLinkPanel = styled(ModalDialog)`
|
||||
|
||||
.edit-link_required-icon {
|
||||
display: inline-flex;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 2px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 2px;
|
||||
`}
|
||||
margin-inline-start: 2px;
|
||||
}
|
||||
|
||||
.edit-link_link-input {
|
||||
@ -81,15 +67,7 @@ const StyledEditLinkPanel = styled(ModalDialog)`
|
||||
}
|
||||
|
||||
.edit-link-toggle-block {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 0 20px 16px;
|
||||
`
|
||||
: css`
|
||||
padding: 0 16px 20px;
|
||||
`}
|
||||
|
||||
padding: 0 16px 20px;
|
||||
border-top: ${(props) => props.theme.filesPanels.sharing.borderBottom};
|
||||
|
||||
.edit-link-toggle-header {
|
||||
@ -99,16 +77,8 @@ const StyledEditLinkPanel = styled(ModalDialog)`
|
||||
gap: 8px;
|
||||
|
||||
.edit-link-toggle {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
margin-left: 28px;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
margin-right: 28px;
|
||||
`}
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: 28px;
|
||||
}
|
||||
}
|
||||
.edit-link_password-block {
|
||||
@ -137,14 +107,8 @@ const StyledEditLinkPanel = styled(ModalDialog)`
|
||||
}
|
||||
|
||||
.edit-link_generate-icon {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin: 16px 8px 0px 0px;
|
||||
`
|
||||
: css`
|
||||
margin: 16px 0px 0px 8px;
|
||||
`}
|
||||
margin-block: 16px 0;
|
||||
margin-inline: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -57,7 +57,7 @@ const StyledBody = styled.div`
|
||||
.embedding-panel_banner-close-icon {
|
||||
min-width: 12px;
|
||||
min-height: 12px;
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -103,19 +103,12 @@ const StyledBody = styled.div`
|
||||
.embedding-panel_size-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.embedding-panel_input {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 8px;
|
||||
`}
|
||||
width: 94px;
|
||||
}
|
||||
}
|
||||
@ -127,21 +120,14 @@ const StyledBody = styled.div`
|
||||
}
|
||||
|
||||
.embedding-panel_text {
|
||||
padding: 0px 0 4px 0;
|
||||
padding: 0px 0 4px;
|
||||
}
|
||||
|
||||
.embedding-panel_copy-icon {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
margin: 8px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
left: 32px;
|
||||
`
|
||||
: css`
|
||||
right: 32px;
|
||||
`}
|
||||
inset-inline-end: 32px;
|
||||
}
|
||||
|
||||
.embedding-panel_preview-button {
|
||||
|
||||
@ -32,14 +32,7 @@ import { tablet, mobile } from "@docspace/shared/utils";
|
||||
const StyledHotkeysPanel = styled.div`
|
||||
.hotkeys-panel {
|
||||
.scroll-body {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-left: 0 !important;
|
||||
`
|
||||
: css`
|
||||
padding-right: 0 !important;
|
||||
`}
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,15 +49,8 @@ const StyledHotkeysPanel = styled.div`
|
||||
.hotkeys_sub-header {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-right: 16px;
|
||||
`
|
||||
: css`
|
||||
padding-left: 16px;
|
||||
`}
|
||||
margin: 20px 0 6px 0;
|
||||
padding-inline-start: 16px;
|
||||
margin: 20px 0 6px;
|
||||
}
|
||||
|
||||
.hotkeys_row {
|
||||
@ -75,7 +61,7 @@ const StyledHotkeysPanel = styled.div`
|
||||
border-bottom: none;
|
||||
|
||||
.row_content {
|
||||
margin: 12px 0 12px 0px;
|
||||
margin: 12px 0 12px;
|
||||
|
||||
@media ${tablet} {
|
||||
height: unset;
|
||||
@ -99,24 +85,11 @@ const StyledHotkeysPanel = styled.div`
|
||||
}
|
||||
|
||||
.hotkeys-key {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin: 0 0 0 auto;
|
||||
`
|
||||
: css`
|
||||
margin: 0 auto 0 0;
|
||||
`}
|
||||
margin-block: 0;
|
||||
margin-inline: 0 auto;
|
||||
|
||||
@media ${mobile} {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin: 0 auto 0 0;
|
||||
`
|
||||
: css`
|
||||
margin: 0 0 0 auto;
|
||||
`}
|
||||
margin-inline: auto 0;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,18 +59,13 @@ const StyledInvitePanel = styled.div`
|
||||
backdrop-filter: blur(3px);
|
||||
z-index: 309;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset: 0;
|
||||
|
||||
.invite_panel {
|
||||
background-color: ${(props) => props.theme.infoPanel.backgroundColor};
|
||||
border-left: ${(props) =>
|
||||
`1px solid ${props.theme.infoPanel.borderColor}`};
|
||||
position: absolute;
|
||||
border: none;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
height: calc(100% - 64px);
|
||||
width: 100vw;
|
||||
@ -82,32 +77,13 @@ const StyledInvitePanel = styled.div`
|
||||
height: calc(100% - 55px - 73px);
|
||||
|
||||
.scroll-body {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-left: 0px !important;
|
||||
`
|
||||
: css`
|
||||
padding-right: 0px !important;
|
||||
`}
|
||||
padding-inline-end: 0 !important;
|
||||
|
||||
@media ${desktop} {
|
||||
width: 480px;
|
||||
min-width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
!props.addUsersPanelVisible &&
|
||||
isMobile() &&
|
||||
props.theme.interfaceDirection !== "rtl" &&
|
||||
css`
|
||||
.trackYVisible {
|
||||
.scroller {
|
||||
margin-right: -20px !important;
|
||||
}
|
||||
}
|
||||
`}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -147,9 +123,8 @@ const StyledHeading = styled(Heading)`
|
||||
const StyledSubHeader = styled(Heading)`
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
margin: 16px 0 8px 0;
|
||||
padding-inline: 16px;
|
||||
margin: 16px 0 8px;
|
||||
|
||||
${(props) =>
|
||||
props.inline &&
|
||||
@ -161,8 +136,7 @@ const StyledSubHeader = styled(Heading)`
|
||||
`;
|
||||
|
||||
const StyledDescription = styled(Text)`
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
padding-inline: 16px;
|
||||
color: ${(props) =>
|
||||
props.theme.createEditRoomDialog.commonParam.descriptionColor};
|
||||
margin-bottom: 16px;
|
||||
@ -214,19 +188,11 @@ const StyledRow = styled.div`
|
||||
|
||||
const StyledInviteInput = styled.div`
|
||||
${fillAvailableWidth}
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 16px;
|
||||
margin-left: ${(props) => (props.hideSelector ? "16px" : "8px")};
|
||||
`
|
||||
: css`
|
||||
margin-left: 16px;
|
||||
margin-right: ${(props) => (props.hideSelector ? "16px" : "8px")};
|
||||
`}
|
||||
|
||||
margin-inline-start: 16px;
|
||||
margin-inline-end: ${(props) => (props.hideSelector ? "16px" : "8px")};
|
||||
|
||||
.input-link {
|
||||
.input-link {
|
||||
height: 32px;
|
||||
border: 0px;
|
||||
|
||||
@ -264,7 +230,7 @@ const StyledInviteInput = styled.div`
|
||||
.append {
|
||||
display: ${(props) => (props.isShowCross ? "flex" : "none")};
|
||||
align-items: center;
|
||||
padding-right: 8px;
|
||||
padding-inline-end: 8px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@ -280,17 +246,10 @@ const StyledEditInput = styled(TextInput)`
|
||||
`;
|
||||
|
||||
const StyledComboBox = styled(ComboBox)`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
`}
|
||||
margin-inline-start: auto;
|
||||
|
||||
.combo-button-label,
|
||||
.combo-button-label:hover {
|
||||
.combo-button-label:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -299,14 +258,7 @@ const StyledComboBox = styled(ComboBox)`
|
||||
justify-content: center;
|
||||
|
||||
.combo-buttons_arrow-icon {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 2px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 2px;
|
||||
`}
|
||||
margin-inline-start: 2px;
|
||||
}
|
||||
|
||||
padding: 0px;
|
||||
@ -373,7 +325,7 @@ const StyledDropDown = styled(DropDown)`
|
||||
|
||||
.email-list_add-button {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
@ -381,6 +333,11 @@ const StyledDropDown = styled(DropDown)`
|
||||
color: #4781d1;
|
||||
}
|
||||
|
||||
svg {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" && "transform: scaleX(-1);"}
|
||||
}
|
||||
|
||||
svg path {
|
||||
fill: #4781d1;
|
||||
}
|
||||
@ -389,8 +346,7 @@ const StyledDropDown = styled(DropDown)`
|
||||
`;
|
||||
|
||||
const SearchItemText = styled(Text)`
|
||||
line-height: ${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `20px` : `16px`};
|
||||
line-height: 16px;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
@ -437,14 +393,7 @@ StyledCrossIcon.defaultProps = { theme: Base };
|
||||
|
||||
const StyledDeleteIcon = styled(DeleteIcon)`
|
||||
cursor: pointer;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
`}
|
||||
margin-inline-start: auto;
|
||||
|
||||
${iconStyles}
|
||||
`;
|
||||
@ -469,13 +418,11 @@ const StyledButtons = styled(Box)`
|
||||
`;
|
||||
|
||||
const StyledLink = styled(Link)`
|
||||
float: ${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `left` : `right`};
|
||||
float: inline-end;
|
||||
`;
|
||||
|
||||
const ResetLink = styled(Link)`
|
||||
float: ${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `right` : `left`};
|
||||
float: inline-start;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
@ -487,14 +434,7 @@ const ResetLink = styled(Link)`
|
||||
StyledButtons.defaultProps = { theme: Base };
|
||||
|
||||
const StyledToggleButton = styled(ToggleButton)`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
left: 8px;
|
||||
`
|
||||
: css`
|
||||
right: 8px;
|
||||
`}
|
||||
inset-inline-end: 8px;
|
||||
margin-top: -4px;
|
||||
`;
|
||||
|
||||
@ -513,13 +453,12 @@ const StyledControlContainer = styled.div`
|
||||
display: flex;
|
||||
|
||||
top: -27px;
|
||||
right: 10px;
|
||||
left: unset;
|
||||
inset-inline-end: 10px;
|
||||
inset-inline-start: unset;
|
||||
}
|
||||
`;
|
||||
const StyledInviteLanguage = styled.div`
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
padding-inline: 16px;
|
||||
margin-top: -12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -533,7 +472,7 @@ const StyledInviteLanguage = styled.div`
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
.list-link {
|
||||
margin-left: 4px;
|
||||
margin-inline-start: 4px;
|
||||
color: ${(props) => props.theme.createEditRoomDialog.commonParam.textColor};
|
||||
}
|
||||
|
||||
@ -543,12 +482,11 @@ const StyledInviteLanguage = styled.div`
|
||||
}
|
||||
.language-combo-box {
|
||||
.combo-button {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
padding-inline: 6px;
|
||||
}
|
||||
|
||||
.combo-buttons_arrow-icon {
|
||||
margin-left: 0px;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.combo-button_closed:not(:hover) .combo-button-label {
|
||||
|
||||
@ -70,7 +70,8 @@ const StyledInfoBar = styled.div`
|
||||
font-weight: 400;
|
||||
}
|
||||
.close-icon {
|
||||
margin: 3px 1px 0px 0px;
|
||||
margin-block: 3px 0;
|
||||
margin-inline: 0 1px;
|
||||
path {
|
||||
fill: ${({ theme }) => theme.iconButton.color};
|
||||
}
|
||||
|
||||
@ -33,24 +33,10 @@ import { Base } from "@docspace/shared/themes";
|
||||
|
||||
const PanelStyles = css`
|
||||
.panel_combo-box {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 10px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 10px;
|
||||
`}
|
||||
margin-inline-start: 10px;
|
||||
|
||||
.optionalBlock {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 4px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 4px;
|
||||
`}
|
||||
margin-inline-end: 4px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -68,8 +54,7 @@ const PanelStyles = css`
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -80,14 +65,7 @@ const StyledAsidePanel = styled.div`
|
||||
width: 100%;
|
||||
font-weight: 700;
|
||||
margin: 14px 0;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-left: 10px;
|
||||
`
|
||||
: css`
|
||||
padding-right: 10px;
|
||||
`}
|
||||
padding-inline-end: 10px;
|
||||
}
|
||||
|
||||
.modal-dialog-aside {
|
||||
@ -118,14 +96,7 @@ const StyledVersionHistoryPanel = styled.div`
|
||||
|
||||
.version-history-panel-header {
|
||||
height: 53px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 0px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 0px;
|
||||
`}
|
||||
margin-inline-start: 0;
|
||||
.version-history-panel-heading {
|
||||
font-weight: 700;
|
||||
margin-bottom: 13px;
|
||||
@ -135,38 +106,17 @@ const StyledVersionHistoryPanel = styled.div`
|
||||
|
||||
.version-history-panel-body {
|
||||
padding-bottom: ${(props) => (props.isLoading ? "0px" : null)};
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 16px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 16px;
|
||||
`}
|
||||
margin-inline-start: 16px;
|
||||
|
||||
height: calc(100% - 53px);
|
||||
box-sizing: border-box;
|
||||
|
||||
.version-comment-wrapper {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 85px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 85px;
|
||||
`}
|
||||
margin-inline-start: 85px;
|
||||
}
|
||||
|
||||
.version_edit-comment {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-right: 7px;
|
||||
`
|
||||
: css`
|
||||
padding-left: 7px;
|
||||
`}
|
||||
padding-inline-start: 7px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -186,14 +136,7 @@ const StyledContent = styled.div`
|
||||
props.theme.filesPanels.content.backgroundColor};
|
||||
|
||||
.header_aside-panel-plus-icon {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
`}
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.sharing-access-combo-box-icon {
|
||||
@ -215,37 +158,16 @@ const StyledContent = styled.div`
|
||||
|
||||
.panel-loader-wrapper {
|
||||
margin-top: 8px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-right: 32px;
|
||||
`
|
||||
: css`
|
||||
padding-left: 32px;
|
||||
`}
|
||||
padding-inline-start: 32px;
|
||||
}
|
||||
.panel-loader {
|
||||
display: inline;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 10px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 10px;
|
||||
`}
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.layout-progress-bar {
|
||||
position: fixed;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
left: 15px;
|
||||
`
|
||||
: css`
|
||||
right: 15px;
|
||||
`}
|
||||
inset-inline-end: 15px;
|
||||
bottom: 21px;
|
||||
|
||||
@media ${tablet} {
|
||||
@ -260,15 +182,7 @@ const StyledHeaderContent = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: -16px;
|
||||
`
|
||||
: css`
|
||||
margin-right: -16px;
|
||||
`}
|
||||
margin-inline-end: -16px;
|
||||
|
||||
border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom};
|
||||
|
||||
@ -291,27 +205,14 @@ StyledHeaderContent.defaultProps = { theme: Base };
|
||||
|
||||
const StyledBody = styled.div`
|
||||
&.files-operations-body {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 0 16px 0 0;
|
||||
`
|
||||
: css`
|
||||
padding: 0 0 0 16px;
|
||||
`}
|
||||
padding-block: 0;
|
||||
padding-inline: 16px 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: calc(100vh - 125px);
|
||||
|
||||
.styled-element {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: -2px;
|
||||
`
|
||||
: css`
|
||||
margin-left: -2px;
|
||||
`}
|
||||
margin-inline-start: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -386,8 +287,7 @@ const StyledFooter = styled.div`
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline: 0;
|
||||
background-color: ${(props) =>
|
||||
props.theme.filesPanels.footer.backgroundColor};
|
||||
border-top: ${(props) => props.theme.filesPanels.footer.borderTop};
|
||||
@ -400,37 +300,16 @@ const StyledFooter = styled.div`
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 6px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 6px;
|
||||
`}
|
||||
margin-inline-end: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.sharing_panel-button {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
`}
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.new_file_panel-first-button {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 8px;
|
||||
`}
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
.new_files_panel-button {
|
||||
width: 100%;
|
||||
@ -455,14 +334,7 @@ const StyledFooter = styled.div`
|
||||
StyledFooter.defaultProps = { theme: Base };
|
||||
|
||||
const StyledLinkRow = styled.div`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: -16px;
|
||||
`
|
||||
: css`
|
||||
margin-right: -16px;
|
||||
`}
|
||||
margin-inline-end: -16px;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
background-color: ${(props) =>
|
||||
@ -543,14 +415,7 @@ const StyledModalRowContainer = styled.div`
|
||||
}
|
||||
|
||||
.panel_combo-box {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 0px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 0px;
|
||||
`}
|
||||
margin-inline-start: 0;
|
||||
|
||||
.combo-button {
|
||||
height: 30px;
|
||||
@ -560,15 +425,7 @@ const StyledModalRowContainer = styled.div`
|
||||
}
|
||||
|
||||
.optionalBlock {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 4px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 4px;
|
||||
`}
|
||||
|
||||
margin-inline-end: 4px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -606,28 +463,14 @@ const StyledModalRowContainer = styled.div`
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
margin: 8px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
left: 0px;
|
||||
`
|
||||
: css`
|
||||
right: 0px;
|
||||
`}
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
.embedding-panel_links-container {
|
||||
display: flex;
|
||||
|
||||
.embedding-panel_link {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 8px;
|
||||
`}
|
||||
margin-inline-end: 8px;
|
||||
|
||||
border: 1px solid #eceef1;
|
||||
border-radius: 16px;
|
||||
@ -640,14 +483,7 @@ const StyledModalRowContainer = styled.div`
|
||||
display: flex;
|
||||
|
||||
.embedding-panel_input {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 8px;
|
||||
`}
|
||||
margin-inline-end: 8px;
|
||||
width: 94px;
|
||||
}
|
||||
}
|
||||
@ -664,37 +500,16 @@ const StyledModalRowContainer = styled.div`
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
margin: 8px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
left: 0;
|
||||
`
|
||||
: css`
|
||||
right: 0;
|
||||
`}
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
.panel-loader-wrapper {
|
||||
margin-top: 8px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-right: 32px;
|
||||
`
|
||||
: css`
|
||||
padding-left: 32px;
|
||||
`}
|
||||
padding-inline-start: 32px;
|
||||
}
|
||||
.panel-loader {
|
||||
display: inline;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 10px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 10px;
|
||||
`}
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
|
||||
@ -69,14 +69,7 @@ const StyledFileRow = styled(Row)`
|
||||
}
|
||||
|
||||
.styled-element {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 8px !important;
|
||||
`
|
||||
: css`
|
||||
margin-right: 8px !important;
|
||||
`}
|
||||
margin-inline-end: 8px !important;
|
||||
}
|
||||
|
||||
.upload-panel_file-name {
|
||||
@ -96,29 +89,14 @@ const StyledFileRow = styled(Row)`
|
||||
.password-input {
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
right: 16px;
|
||||
`
|
||||
: css`
|
||||
left: 16px;
|
||||
`}
|
||||
margin-inline-start: 16px;
|
||||
max-width: 470px;
|
||||
width: calc(100% - 16px);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#conversion-button {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 8px;
|
||||
`}
|
||||
|
||||
margin-inline-start: 8px;
|
||||
width: 100%;
|
||||
max-width: 78px;
|
||||
}
|
||||
@ -129,16 +107,8 @@ const StyledFileRow = styled(Row)`
|
||||
}
|
||||
|
||||
.upload_panel-icon {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
padding-right: 16px;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
padding-left: 16px;
|
||||
`}
|
||||
margin-inline-start: auto;
|
||||
padding-inline-start: 16px;
|
||||
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
@ -151,15 +121,7 @@ const StyledFileRow = styled(Row)`
|
||||
}
|
||||
|
||||
.enter-password {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 8px;
|
||||
`}
|
||||
|
||||
margin-inline-end: 8px;
|
||||
text-decoration: underline dashed;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -170,14 +132,7 @@ const StyledFileRow = styled(Row)`
|
||||
}
|
||||
|
||||
.convert_icon {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-left: 12px;
|
||||
`
|
||||
: css`
|
||||
padding-right: 12px;
|
||||
`}
|
||||
padding-inline-end: 12px;
|
||||
}
|
||||
|
||||
.upload-panel_file-row-link {
|
||||
|
||||
@ -40,22 +40,12 @@ const HeaderContainer = styled.div`
|
||||
max-width: calc(100vw - 32px);
|
||||
|
||||
.arrow-button {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-left: 12px;`
|
||||
: `margin-right: 12px;`}
|
||||
margin-inline-end: 12px;
|
||||
|
||||
@media ${tablet} {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 8px 8px 8px 0;
|
||||
margin-right: -8px;
|
||||
`
|
||||
: css`
|
||||
padding: 8px 0 8px 8px;
|
||||
margin-left: -8px;
|
||||
`}
|
||||
padding-block: 8px;
|
||||
padding-inline: 8px 0;
|
||||
margin-inline-start: -8px;
|
||||
}
|
||||
|
||||
svg {
|
||||
|
||||
@ -58,10 +58,7 @@ const ModalDialogContainer = styled(ModalDialog)`
|
||||
|
||||
.link-dialog {
|
||||
transition: opacity 0.2s;
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-left: 12px;`
|
||||
: `margin-right: 12px;`}
|
||||
margin-inline-end: 12px;
|
||||
opacity: ${(props) => (props.ChangeTextAnim ? 0 : 1)};
|
||||
}
|
||||
|
||||
|
||||
@ -59,10 +59,7 @@ const BgBlock = styled.div`
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
|
||||
@media ${mobile} {
|
||||
|
||||
@ -45,8 +45,8 @@ export const StyledPage = styled.div`
|
||||
|
||||
@media ${mobile} {
|
||||
width: 100%;
|
||||
padding: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("32px 8px 0 16px", theme.interfaceDirection)};
|
||||
padding-block: 32px 0;
|
||||
padding-inline: 16px 8px;
|
||||
|
||||
.language-combo-box {
|
||||
display: none;
|
||||
@ -68,7 +68,7 @@ export const StyledPage = styled.div`
|
||||
|
||||
.language-combo-box {
|
||||
position: absolute;
|
||||
right: 28px;
|
||||
inset-inline-end: 28px;
|
||||
top: 28px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -42,7 +42,6 @@ export const StyledCreateUserContent = styled.div`
|
||||
export const GreetingContainer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
height: 100%;
|
||||
width: ${DESKTOP_WIDTH}px;
|
||||
|
||||
@ -146,14 +145,7 @@ export const RegisterContainer = styled.div`
|
||||
max-width: 60px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
right: 0;
|
||||
`
|
||||
: css`
|
||||
left: 0;
|
||||
`};
|
||||
inset-inline-start: 0;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
|
||||
|
||||
@ -71,10 +71,7 @@ const StyledForm = styled(Box)`
|
||||
flex-direction: column;
|
||||
gap: 0px;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-left: 8px;`
|
||||
: `padding-right: 8px;`}
|
||||
padding-inline-end: 8px;
|
||||
}
|
||||
|
||||
.app-code-wrapper {
|
||||
|
||||
@ -49,7 +49,7 @@ const StyledModalDialog = styled(ModalDialog)`
|
||||
--color-border-muted: hsla(210, 18%, 87%, 1);
|
||||
|
||||
.modal-footer {
|
||||
padding-right: 4px;
|
||||
padding-inline-end: 4px;
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
@ -49,15 +49,15 @@ const StyledEmptyContainerLinks = styled.div`
|
||||
.icon {
|
||||
height: 20px;
|
||||
width: 12px;
|
||||
margin: ${({ theme }) =>
|
||||
theme.interfaceDirection !== "rtl" ? "4px 4px 0 0;" : "4px 0 0 4px;"};
|
||||
margin-block: 4px 0;
|
||||
margin-inline: 0 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: ${({ theme }) => theme.filesEmptyContainer.linkColor};
|
||||
margin: ${({ theme }) =>
|
||||
theme.interfaceDirection !== "rtl" ? "0 7px 0 0" : "0 0 0 7px;"};
|
||||
margin-block: 0;
|
||||
margin-inline: 0 7px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -75,6 +75,7 @@ export const CategoryFilterItem = styled(DropDownItem)`
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
// logical property won't work here (dir: auto)
|
||||
text-align: ${({ theme }) =>
|
||||
theme.interfaceDirection !== "rtl" ? `left` : `right`};
|
||||
}
|
||||
@ -95,14 +96,7 @@ export const CategoryFilterSubList = styled(DropDown)`
|
||||
margin-top: ${({ marginTop }) => marginTop};
|
||||
padding: 4px 0;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection !== "rtl"
|
||||
? css`
|
||||
left: calc(100% + 4px);
|
||||
`
|
||||
: css`
|
||||
right: calc(100% + 4px);
|
||||
`};
|
||||
inset-inline-start: calc(100% + 4px);
|
||||
|
||||
max-height: 296px;
|
||||
max-width: auto;
|
||||
@ -124,14 +118,7 @@ export const CategoryFilterSubList = styled(DropDown)`
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection !== "rtl"
|
||||
? css`
|
||||
left: -4px;
|
||||
`
|
||||
: css`
|
||||
right: -4px;
|
||||
`};
|
||||
inset-inline-start: -4px;
|
||||
|
||||
top: 0;
|
||||
width: 6px;
|
||||
|
||||
@ -54,7 +54,7 @@ export const CategoryFilterMobileWrapper = styled.div`
|
||||
export const CategoryFilterMobile = styled(DropDown)`
|
||||
position: fixed;
|
||||
top: 36px;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
|
||||
padding: 6px 0;
|
||||
@ -74,10 +74,7 @@ export const CategoryFilterMobile = styled(DropDown)`
|
||||
|
||||
.section-scroll,
|
||||
.scroll-body {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-left: 0px !important;`
|
||||
: `padding-right: 0px !important;`}
|
||||
padding-inline-end: 0 !important;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -99,8 +96,8 @@ export const CategoryFilterItemMobile = styled(DropDownItem)`
|
||||
`}
|
||||
|
||||
.submenu-arrow {
|
||||
margin: ${({ theme }) =>
|
||||
theme.interfaceDirection !== "rtl" ? `0 0 0 auto` : `0 auto 0 0`};
|
||||
margin-block: 0;
|
||||
margin-inline: auto 0;
|
||||
|
||||
svg {
|
||||
height: 12px;
|
||||
@ -118,5 +115,5 @@ export const CategoryFilterItemMobile = styled(DropDownItem)`
|
||||
CategoryFilterItemMobile.defaultProps = { theme: Base };
|
||||
|
||||
export const StyledSubItemMobile = styled(DropDownItem)`
|
||||
padding-left: 28px;
|
||||
padding-inline-start: 28px;
|
||||
`;
|
||||
|
||||
@ -56,10 +56,10 @@ export const SortButton = styled.div`
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-end: 0;
|
||||
top: auto;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -83,8 +83,8 @@ const StyledHeading = styled.div`
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
margin: ${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? "0 12px 0 0 " : "0 0 0 12px"};
|
||||
margin-block: 0;
|
||||
margin-inline: 12px 0;
|
||||
width: 100%;
|
||||
max-width: calc(100vw - 68px);
|
||||
}
|
||||
@ -110,14 +110,7 @@ const StyledHeadline = styled(Headline)`
|
||||
`;
|
||||
|
||||
const StyledSubmitToGalleryButton = styled(Button)`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
`}
|
||||
margin-inline-start: auto;
|
||||
|
||||
@media ${mobile} {
|
||||
display: none;
|
||||
@ -133,8 +126,8 @@ const StyledInfoPanelToggleWrapper = styled.div`
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
margin: ${({ theme }) =>
|
||||
theme.interfaceDirection !== "rtl" ? "0 8px 0 28px" : "0 28px 0 8px"};
|
||||
margin-block: 0;
|
||||
margin-inline: 28px 8px;
|
||||
|
||||
@media ${tablet} {
|
||||
display: none;
|
||||
|
||||
@ -82,16 +82,7 @@ const StyledTile = styled.div`
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 16px;
|
||||
margin-left: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 16px;
|
||||
margin-right: 8px;
|
||||
`}
|
||||
margin-inline: 16px 8px;
|
||||
}
|
||||
|
||||
.p-contextmenu {
|
||||
@ -102,7 +93,7 @@ const StyledTile = styled.div`
|
||||
width: 100%;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -162,11 +153,7 @@ const StyledFileTileBottom = styled.div`
|
||||
|
||||
.tile-file-loader {
|
||||
padding-top: 4px;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-right: 3px;`
|
||||
: `padding-left: 3px;`}
|
||||
padding-inline-start: 3px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -200,10 +187,7 @@ const StyledElement = styled.div`
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-left: 4px;`
|
||||
: `margin-right: 4px;`}
|
||||
margin-inline-end: 4px;
|
||||
user-select: none;
|
||||
margin-top: 3px;
|
||||
|
||||
@ -215,8 +199,8 @@ const StyledOptionButton = styled.div`
|
||||
display: block;
|
||||
|
||||
.expandButton > div:first-child {
|
||||
padding: ${({ theme }) =>
|
||||
getCorrectFourValuesStyle("8px 21px 8px 12px", theme.interfaceDirection)};
|
||||
padding-block: 8px;
|
||||
padding-inline: 12px 21px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -234,10 +218,7 @@ const SimpleFilesTileContent = styled(TileContent)`
|
||||
}
|
||||
|
||||
.badge {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-left: 8px;`
|
||||
: `margin-right: 8px;`}
|
||||
margin-inline-end: 8px;
|
||||
cursor: pointer;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
@ -245,9 +226,7 @@ const SimpleFilesTileContent = styled(TileContent)`
|
||||
|
||||
.new-items {
|
||||
position: absolute;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `left: 29px;` : `right: 29px;`}
|
||||
inset-inline-end: 29px;
|
||||
top: 19px;
|
||||
}
|
||||
|
||||
@ -258,11 +237,7 @@ const SimpleFilesTileContent = styled(TileContent)`
|
||||
|
||||
.share-icon {
|
||||
margin-top: -4px;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-left: 8px;`
|
||||
: `padding-right: 8px;`}
|
||||
padding-inline-end: 8px;
|
||||
}
|
||||
|
||||
.favorite,
|
||||
@ -286,10 +261,7 @@ const SimpleFilesTileContent = styled(TileContent)`
|
||||
|
||||
const paddingCss = css`
|
||||
@media ${desktop} {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `padding-left: 3px;`
|
||||
: `padding-right: 3px;`}
|
||||
padding-inline-end: 3px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -313,7 +285,7 @@ const StyledTileContainer = styled.div`
|
||||
height: 100%;
|
||||
|
||||
@media ${tablet} {
|
||||
margin-right: 0px !important;
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
|
||||
.tile-item-wrapper {
|
||||
@ -340,10 +312,7 @@ const StyledTileContainer = styled.div`
|
||||
cursor: pointer !important;
|
||||
|
||||
.sort-combo-box {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-left: 3px;`
|
||||
: `margin-right: 3px;`}
|
||||
margin-inline-end: 3px;
|
||||
.dropdown-container {
|
||||
top: 104%;
|
||||
bottom: auto;
|
||||
@ -405,10 +374,7 @@ const StyledTileContainer = styled.div`
|
||||
color: ${(props) => props.theme.filterInput.sort.tileSortColor};
|
||||
|
||||
.sort-icon {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-left: 8px;`
|
||||
: `margin-right: 8px;`}
|
||||
margin-inline-end: 8px;
|
||||
svg {
|
||||
path {
|
||||
fill: ${(props) => props.theme.filterInput.sort.tileSortFill};
|
||||
@ -425,10 +391,7 @@ const StyledTileContainer = styled.div`
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-left: -3px;`
|
||||
: `margin-right: -3px;`}
|
||||
margin-inline-end: -3px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -458,7 +421,7 @@ const StyledContextMenu = styled(ContextMenu)`
|
||||
height: min-content;
|
||||
top: auto !important;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -82,15 +82,7 @@ const StyledCloseIcon = styled(CrossIcon)`
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "ltr"
|
||||
? css`
|
||||
right: 10px;
|
||||
`
|
||||
: css`
|
||||
left: 10px;
|
||||
`}
|
||||
inset-inline-end: 10px;
|
||||
|
||||
path {
|
||||
fill: ${({ theme }) =>
|
||||
|
||||
@ -55,11 +55,7 @@ export const MainContainerWrapper = styled.div`
|
||||
|
||||
display: flex;
|
||||
align-self: center;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-left: auto;`
|
||||
: `margin-right: auto;`}
|
||||
margin-inline-end: auto;
|
||||
`;
|
||||
|
||||
export const StyledTileContent = styled.div`
|
||||
|
||||
@ -37,23 +37,16 @@ const StyledAccountsItemTitle = styled.div`
|
||||
justify-content: start;
|
||||
gap: 16px;
|
||||
position: fixed;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: -20px;
|
||||
padding: 24px 20px 24px 0;
|
||||
`
|
||||
: css`
|
||||
margin-left: -20px;
|
||||
padding: 24px 0 24px 20px;
|
||||
`}
|
||||
margin-inline-start: -20px;
|
||||
padding-block: 24px;
|
||||
padding-inline: 20px 0;
|
||||
width: calc(100% - 40px);
|
||||
background: ${(props) => props.theme.infoPanel.backgroundColor};
|
||||
z-index: 100;
|
||||
|
||||
@media ${tablet} {
|
||||
width: 440px;
|
||||
padding: 24px 20px 24px 20px;
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
@ -78,14 +71,7 @@ const StyledAccountsItemTitle = styled.div`
|
||||
|
||||
.badges {
|
||||
height: 22px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 8px;
|
||||
`}
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
|
||||
.info-text__name {
|
||||
@ -109,28 +95,15 @@ const StyledAccountsItemTitle = styled.div`
|
||||
}
|
||||
|
||||
.context-button {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
`}
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
StyledAccountsItemTitle.defaultProps = { theme: Base };
|
||||
|
||||
const StyledAccountContent = styled.div`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin: 0px 0 0 auto;
|
||||
`
|
||||
: css`
|
||||
margin: 0px auto 0 0;
|
||||
`}
|
||||
margin-block: 0;
|
||||
margin-inline: 0 auto;
|
||||
|
||||
padding-top: 128px;
|
||||
|
||||
@ -153,24 +126,10 @@ const StyledAccountContent = styled.div`
|
||||
align-items: center;
|
||||
|
||||
.type-combobox {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: -8px;
|
||||
`
|
||||
: css`
|
||||
margin-left: -8px;
|
||||
`}
|
||||
margin-inline-start: -8px;
|
||||
|
||||
.combo-button {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-right: 8px;
|
||||
`
|
||||
: css`
|
||||
padding-left: 8px;
|
||||
`}
|
||||
padding-inline-start: 8px;
|
||||
}
|
||||
|
||||
.backdrop-active {
|
||||
|
||||
@ -31,14 +31,8 @@ import { mobile, tablet, desktop } from "@docspace/shared/utils";
|
||||
|
||||
const StyledInfoPanelBody = styled.div`
|
||||
height: auto;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 0px 20px 24px 3px;
|
||||
`
|
||||
: css`
|
||||
padding: 0px 3px 24px 20px;
|
||||
`}
|
||||
padding-block: 0 24px;
|
||||
padding-inline: 20px 3px;
|
||||
color: ${(props) => props.theme.infoPanel.textColor};
|
||||
background-color: ${(props) => props.theme.infoPanel.backgroundColor};
|
||||
|
||||
@ -55,14 +49,8 @@ const StyledInfoPanelBody = styled.div`
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 0px 16px 0 8px;
|
||||
`
|
||||
: css`
|
||||
padding: 0px 8px 0 16px;
|
||||
`}
|
||||
padding-block: 0;
|
||||
padding-inline: 16px 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -70,16 +58,9 @@ const StyledTitle = styled.div`
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 24px 20px 24px 0px;
|
||||
margin-right: -20px;
|
||||
`
|
||||
: css`
|
||||
padding: 24px 0 24px 20px;
|
||||
margin-left: -20px;
|
||||
`}
|
||||
padding-block: 24px;
|
||||
padding-inline: 20px 0;
|
||||
margin-inline-start: -20px;
|
||||
|
||||
background: ${(props) => props.theme.infoPanel.backgroundColor};
|
||||
|
||||
@ -91,15 +72,7 @@ const StyledTitle = styled.div`
|
||||
|
||||
.info_title-icons {
|
||||
display: flex;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
`}
|
||||
/* theme.interfaceDirection */
|
||||
margin-inline-start: auto;
|
||||
gap: 14px;
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
@ -146,23 +119,17 @@ const StyledTitle = styled.div`
|
||||
font-weight: 600;
|
||||
line-height: 16px;
|
||||
|
||||
margin: ${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? "0 auto 0 0" : "0 0 0 auto"};
|
||||
margin-block: 0;
|
||||
margin-inline: auto 0;
|
||||
}
|
||||
|
||||
${(props) =>
|
||||
props.withBottomBorder &&
|
||||
css`
|
||||
width: calc(100% + 20px);
|
||||
margin: 0 -20px 0 -20px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 23px 23px 23px 0;
|
||||
`
|
||||
: css`
|
||||
padding: 23px 0 23px 20px;
|
||||
`}
|
||||
margin: 0 -20px;
|
||||
padding-block: 23px;
|
||||
padding-inline: 20px 0;
|
||||
border-bottom: ${(props) =>
|
||||
`solid 1px ${props.theme.infoPanel.borderColor}`};
|
||||
`}
|
||||
@ -173,33 +140,21 @@ const StyledTitle = styled.div`
|
||||
|
||||
@media ${tablet} {
|
||||
width: 440px;
|
||||
padding: 24px 20px 24px 20px;
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
width: calc(100vw - 24px);
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 24px 16px 24px 0;
|
||||
`
|
||||
: css`
|
||||
padding: 24px 0 24px 16px;
|
||||
`}
|
||||
padding-block: 24px;
|
||||
padding-inline: 16px 0;
|
||||
|
||||
${(props) =>
|
||||
props.withBottomBorder &&
|
||||
css`
|
||||
width: calc(100% + 16px);
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 23px 16px 23px 0;
|
||||
`
|
||||
: css`
|
||||
padding: 23px 0 23px 16px;
|
||||
`}
|
||||
margin: 0 -16px 0 -16px;
|
||||
padding-block: 23px;
|
||||
padding-inline: 16px 0;
|
||||
margin: 0 -16px;
|
||||
`}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -82,14 +82,7 @@ const StyledHistoryBlock = styled.div`
|
||||
.date {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
`}
|
||||
margin-inline-start: auto;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: ${(props) => props.theme.infoPanel.history.dateColor};
|
||||
@ -226,14 +219,7 @@ const StyledHistoryBlockFile = styled.div`
|
||||
}
|
||||
|
||||
.location-btn {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
`}
|
||||
margin-inline-start: auto;
|
||||
min-width: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -75,8 +75,7 @@ const StyledUser = styled.div`
|
||||
.name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: ${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `20px` : `16px`};
|
||||
line-height: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@ -87,26 +86,15 @@ const StyledUser = styled.div`
|
||||
.me-label {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: ${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? `20px` : `16px`};
|
||||
line-height: 16px;
|
||||
color: ${(props) => props.theme.infoPanel.members.meLabelColor};
|
||||
padding-inline-start: 8px;
|
||||
margin-inline-start: -8px;
|
||||
}
|
||||
|
||||
.role-wrapper {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: -12px;
|
||||
padding-right: 8px;
|
||||
margin-right: auto;
|
||||
`
|
||||
: css`
|
||||
margin-right: -12px;
|
||||
padding-left: 8px;
|
||||
margin-left: auto;
|
||||
`}
|
||||
margin-inline: auto -12px;
|
||||
padding-inline-start: 8px;
|
||||
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
|
||||
@ -24,17 +24,11 @@
|
||||
// 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";
|
||||
|
||||
const StyledNoItemContainer = styled.div`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin: 80px 0 0 auto;
|
||||
`
|
||||
: css`
|
||||
margin: 80px auto 0 0;
|
||||
`}
|
||||
margin-block: 80px 0;
|
||||
margin-inline: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@ -38,8 +38,8 @@ import styled from "styled-components";
|
||||
|
||||
const StyledGalleryContextOptions = styled.div`
|
||||
height: 16px;
|
||||
margin: ${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? "0 8px 0 0" : "0 0 0 8px"};
|
||||
margin-block: 0;
|
||||
margin-inline: 8px 0;
|
||||
`;
|
||||
|
||||
const GalleryItemTitle = ({
|
||||
|
||||
@ -34,14 +34,8 @@ import ContextHelper from "../../helpers/ContextHelper";
|
||||
|
||||
const StyledItemContextOptions = styled.div`
|
||||
height: 16px;
|
||||
margin: ${({ withLabel, theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? withLabel
|
||||
? "0 8px 0 0"
|
||||
: "0 auto 0 0"
|
||||
: withLabel
|
||||
? "0 0 0 8px"
|
||||
: "0 0 0 auto"};
|
||||
margin-block: 0;
|
||||
margin-inline: ${({ withLabel }) => (withLabel ? "8px 0" : "auto 0")};
|
||||
`;
|
||||
|
||||
const ItemContextOptions = ({
|
||||
|
||||
@ -33,8 +33,7 @@ import { ContextMenuButton } from "@docspace/shared/components/context-menu-butt
|
||||
|
||||
const StyledItemContextOptions = styled.div`
|
||||
height: 16px;
|
||||
margin: ${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl" ? "0 auto 0 0" : "0 0 0 auto"};
|
||||
margin-block: auto 0;
|
||||
`;
|
||||
|
||||
const RoomsContextBtn = ({
|
||||
|
||||
@ -61,6 +61,7 @@ const StyledList = styled(List)`
|
||||
margin-bottom: 24px;
|
||||
|
||||
.members-list-item {
|
||||
// doesn't require mirroring for RTL
|
||||
left: unset !important;
|
||||
inset-inline-start: 0;
|
||||
width: calc(100% - 20px) !important;
|
||||
|
||||
@ -101,7 +101,7 @@ const StyledLinkRow = styled.div`
|
||||
}
|
||||
|
||||
.external-row-icons {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
@ -120,7 +120,7 @@ const StyledLinkRow = styled.div`
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
inset-inline-start: 0px;
|
||||
}
|
||||
|
||||
width: 12px;
|
||||
|
||||
@ -32,7 +32,7 @@ const StyledGalleryEmptyScreen = styled.div`
|
||||
.info-panel_gallery-empty-screen-img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 80px 0 32px 0;
|
||||
padding: 80px 0 32px;
|
||||
}
|
||||
|
||||
.info-panel_gallery-empty-screen-text {
|
||||
|
||||
@ -67,26 +67,12 @@ const StyledInfoPanelHeader = styled.div`
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.header-text {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 20px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 20px;
|
||||
`}
|
||||
margin-inline-start: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-panel-toggle-bg {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 20px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 20px;
|
||||
`}
|
||||
margin-inline-end: 20px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
|
||||
@ -49,27 +49,13 @@ const StyledBadgesContainer = styled.div`
|
||||
props.infoPanelVisible &&
|
||||
css`
|
||||
.accounts-badge:last-child {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 12px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 12px;
|
||||
`}
|
||||
margin-inline-end: 12px;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
const StyledPaidBadge = styled(Badge)`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 8px;
|
||||
`}
|
||||
margin-inline-end: 8px;
|
||||
`;
|
||||
|
||||
const StyledSendClockIcon = styled(SendClockIcon)`
|
||||
|
||||
@ -44,29 +44,13 @@ const COLUMNS_SIZE = `insideGroupColumnsSize_ver-${TableVersions.InsideGroup}`;
|
||||
const INFO_PANEL_COLUMNS_SIZE = `infoPanelInsideGroupPeopleColumnsSize_ver-${TableVersions.InsideGroup}`;
|
||||
|
||||
const userNameCss = css`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: -24px;
|
||||
padding-right: 24px;
|
||||
`
|
||||
: css`
|
||||
margin-left: -24px;
|
||||
padding-left: 24px;
|
||||
`}
|
||||
margin-inline-start: -24px;
|
||||
padding-inline-start: 24px;
|
||||
`;
|
||||
|
||||
const contextCss = css`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
`
|
||||
: css`
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
`}
|
||||
margin-inline-end: -20px;
|
||||
padding-inline-end: 20px;
|
||||
`;
|
||||
|
||||
const StyledTableContainer = styled(TableContainer)`
|
||||
|
||||
@ -28,16 +28,12 @@ import { mobile, tablet } from "@docspace/shared/utils";
|
||||
import { css } from "styled-components";
|
||||
|
||||
const marginStyles = css`
|
||||
margin-left: -24px;
|
||||
margin-right: -24px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
margin-inline: -24px;
|
||||
padding-inline: 24px;
|
||||
|
||||
@media ${tablet} {
|
||||
margin-left: -16px;
|
||||
margin-right: -16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
margin-inline: -16px;
|
||||
padding-inline: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -57,14 +57,7 @@ const SimpleFilesRowContent = styled(RowContent)`
|
||||
width: 100%;
|
||||
max-width: min-content;
|
||||
min-width: inherit;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 0px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 0px;
|
||||
`}
|
||||
margin-inline-end: 0;
|
||||
|
||||
@media ${desktop} {
|
||||
margin-top: 0px;
|
||||
@ -79,30 +72,17 @@ const SimpleFilesRowContent = styled(RowContent)`
|
||||
.new-items {
|
||||
min-width: 12px;
|
||||
width: max-content;
|
||||
margin: 0 -2px -2px -2px;
|
||||
margin: 0 -2px -2px;
|
||||
}
|
||||
|
||||
.badge-version {
|
||||
width: max-content;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin: -2px -2px -2px 6px;
|
||||
`
|
||||
: css`
|
||||
margin: -2px 6px -2px -2px;
|
||||
`}
|
||||
margin-block: -2px;
|
||||
margin-inline: -2px 6px;
|
||||
}
|
||||
|
||||
.bagde_alert {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 8px;
|
||||
`}
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.badge-new-version {
|
||||
@ -110,16 +90,10 @@ const SimpleFilesRowContent = styled(RowContent)`
|
||||
}
|
||||
|
||||
.row-content-link {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 12px 0px 0px 12px;
|
||||
`
|
||||
: css`
|
||||
padding: 12px 12px 0px 0px;
|
||||
`}
|
||||
padding-block: 12px 0;
|
||||
padding-inline: 0 12px;
|
||||
margin-top: ${(props) =>
|
||||
props.theme.interfaceDirection === "rtl" ? "-14px" : "-12px"}
|
||||
props.theme.interfaceDirection === "rtl" ? "-14px" : "-12px"};
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
@ -140,37 +114,17 @@ const SimpleFilesRowContent = styled(RowContent)`
|
||||
.tablet-edit,
|
||||
.can-convert {
|
||||
margin-top: 6px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 24px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 24px;
|
||||
`}
|
||||
margin-inline-end: 24px;
|
||||
}
|
||||
|
||||
.badge-version {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 22px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 22px;
|
||||
`}
|
||||
margin-inline-end: 22px;
|
||||
}
|
||||
|
||||
.new-items {
|
||||
min-width: 16px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin: 5px 0 0 24px;
|
||||
`
|
||||
: css`
|
||||
margin: 5px 24px 0 0;
|
||||
`}
|
||||
margin-block: 5px 0;
|
||||
margin-inline: 0 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -194,7 +148,7 @@ const SimpleFilesRowContent = styled(RowContent)`
|
||||
}
|
||||
|
||||
.row-content-link {
|
||||
padding: 12px 0px 0px 0px;
|
||||
padding: 12px 0px 0px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -55,9 +55,8 @@ const checkedStyle = css`
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
.files-item {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
margin-left: 0;
|
||||
border-inline: none;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
height: 59px;
|
||||
box-sizing: border-box;
|
||||
@ -94,10 +93,8 @@ const StyledWrapper = styled.div`
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
|
||||
margin-left: -24px;
|
||||
margin-right: -24px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
margin-inline: -24px;
|
||||
padding-inline: 24px;
|
||||
`}
|
||||
|
||||
${(props) =>
|
||||
@ -149,14 +146,7 @@ const StyledSimpleFilesRow = styled(Row)`
|
||||
|
||||
.styled-element {
|
||||
height: 32px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 12px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 12px;
|
||||
`}
|
||||
margin-inline-end: 12px;
|
||||
}
|
||||
|
||||
.row_content {
|
||||
@ -241,31 +231,12 @@ const StyledSimpleFilesRow = styled(Row)`
|
||||
}
|
||||
|
||||
.expandButton {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: ${(props) =>
|
||||
!props.folderCategory ? "17px" : "24px"};
|
||||
`
|
||||
: css`
|
||||
margin-left: ${(props) =>
|
||||
!props.folderCategory ? "17px" : "24px"};
|
||||
`}
|
||||
margin-inline-start: ${(props) =>
|
||||
!props.folderCategory ? "17px" : "24px"};
|
||||
padding-top: 0px;
|
||||
}
|
||||
.expandButton > div:first-child {
|
||||
${(props) =>
|
||||
props.folderCategory &&
|
||||
css`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-right: 0 !important;
|
||||
`
|
||||
: css`
|
||||
padding-left: 0 !important;
|
||||
`}
|
||||
`}
|
||||
${(props) => props.folderCategory && `padding-inline-start: 0 !important;`}
|
||||
}
|
||||
|
||||
.badges {
|
||||
@ -280,8 +251,7 @@ const StyledSimpleFilesRow = styled(Row)`
|
||||
|
||||
> div {
|
||||
margin-top: 0px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-inline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -297,14 +267,7 @@ const StyledSimpleFilesRow = styled(Row)`
|
||||
}
|
||||
|
||||
/* .badges__quickButtons:not(:empty) {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 8px;
|
||||
`}
|
||||
margin-inline-start: 8px;
|
||||
} */
|
||||
.room__badges:empty,
|
||||
.file__badges:empty,
|
||||
@ -408,10 +371,8 @@ const SimpleFilesRow = (props) => {
|
||||
const dragStyles =
|
||||
dragging && isDragging
|
||||
? {
|
||||
marginLeft: "-16px",
|
||||
marginRight: "-16px",
|
||||
paddingLeft: "16px",
|
||||
paddingRight: "16px",
|
||||
marginInline: "-16px",
|
||||
paddingInline: "16px",
|
||||
}
|
||||
: {};
|
||||
|
||||
|
||||
@ -36,16 +36,8 @@ const hotkeyBorderStyle = css`
|
||||
`;
|
||||
|
||||
const rowCheckboxDraggingStyle = css`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
`
|
||||
: css`
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
`}
|
||||
margin-inline-start: -20px;
|
||||
padding-inline-start: 20px;
|
||||
|
||||
border-bottom: 1px solid;
|
||||
border-image-slice: 1;
|
||||
@ -54,16 +46,8 @@ const rowCheckboxDraggingStyle = css`
|
||||
`;
|
||||
|
||||
const contextMenuWrapperDraggingStyle = css`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
`
|
||||
: css`
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
`}
|
||||
margin-inline-end: -20px;
|
||||
padding-inline-end: 20px;
|
||||
|
||||
border-bottom: 1px solid;
|
||||
border-image-slice: 1;
|
||||
@ -76,8 +60,7 @@ const StyledTableRow = styled(TableRow)`
|
||||
border-top: ${(props) =>
|
||||
`1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
|
||||
margin-top: -1px;
|
||||
border-left: 0; //for Safari
|
||||
border-right: 0; //for Safari
|
||||
border-inline: 0; //for Safari
|
||||
}
|
||||
|
||||
.table-container_cell:not(.table-container_element-wrapper) {
|
||||
@ -115,28 +98,12 @@ const StyledTableRow = styled(TableRow)`
|
||||
`${props.theme.filesSection.tableView.row.backgroundActive} !important`};
|
||||
}
|
||||
.table-container_file-name-cell {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: -24px;
|
||||
padding-right: 24px;
|
||||
`
|
||||
: css`
|
||||
margin-left: -24px;
|
||||
padding-left: 24px;
|
||||
`}
|
||||
margin-inline-start: -24px;
|
||||
padding-inline-start: 24px;
|
||||
}
|
||||
.table-container_row-context-menu-wrapper {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
`
|
||||
: css`
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
`}
|
||||
margin-inline-end: -20px;
|
||||
padding-inline-end: 20px;
|
||||
}
|
||||
}
|
||||
`}
|
||||
@ -167,30 +134,15 @@ const StyledTableRow = styled(TableRow)`
|
||||
|
||||
.table-container_element-wrapper,
|
||||
.table-container_quick-buttons-wrapper {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-left: 0px;
|
||||
`
|
||||
: css`
|
||||
padding-right: 0px;
|
||||
`}
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
.table-container_element-wrapper,
|
||||
.table-container_row-loader {
|
||||
min-width: 40px;
|
||||
border-bottom: unset;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
`
|
||||
: css`
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
`}
|
||||
margin-inline-start: -20px;
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
|
||||
.table-container_element-container {
|
||||
@ -204,14 +156,7 @@ const StyledTableRow = styled(TableRow)`
|
||||
|
||||
.table-container_row-loader {
|
||||
svg {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 8px;
|
||||
`}
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -223,16 +168,8 @@ const StyledTableRow = styled(TableRow)`
|
||||
${(props) =>
|
||||
props.showHotkeyBorder &&
|
||||
css`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: -24px;
|
||||
padding-right: 24px;
|
||||
`
|
||||
: css`
|
||||
margin-left: -24px;
|
||||
padding-left: 24px;
|
||||
`}
|
||||
margin-inline-start: -24px;
|
||||
padding-inline-start: 24px;
|
||||
|
||||
${hotkeyBorderStyle}
|
||||
`};
|
||||
@ -240,30 +177,15 @@ const StyledTableRow = styled(TableRow)`
|
||||
}
|
||||
|
||||
.table-container_row-context-menu-wrapper {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-left: 0px;
|
||||
`
|
||||
: css`
|
||||
padding-right: 0px;
|
||||
`}
|
||||
justify-content:flex-end;
|
||||
padding-inline-end: 0;
|
||||
justify-content: flex-end;
|
||||
|
||||
${(props) => props.dragging && contextMenuWrapperDraggingStyle};
|
||||
${(props) =>
|
||||
props.showHotkeyBorder &&
|
||||
css`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
`
|
||||
: css`
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
`}
|
||||
margin-inline-end: -20px;
|
||||
padding-inline-end: 20px;
|
||||
|
||||
${hotkeyBorderStyle}
|
||||
`};
|
||||
@ -299,34 +221,18 @@ const StyledTableRow = styled(TableRow)`
|
||||
}
|
||||
|
||||
.table-container_file-name-cell {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: -24px;
|
||||
padding-right: 24px;
|
||||
`
|
||||
: css`
|
||||
margin-left: -24px;
|
||||
padding-left: 24px;
|
||||
`}
|
||||
margin-inline-start: -24px;
|
||||
padding-inline-start: 24px;
|
||||
}
|
||||
.table-container_row-context-menu-wrapper {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
`
|
||||
: css`
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
`}
|
||||
margin-inline-end: -20px;
|
||||
padding-inline-end: 20px;
|
||||
}
|
||||
`}
|
||||
|
||||
.no-extra-space {
|
||||
p {
|
||||
margin-right: 0px !important;
|
||||
margin-inline-end: 0 !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -342,43 +248,22 @@ const StyledBadgesContainer = styled.div`
|
||||
.badges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 12px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 12px;
|
||||
`}
|
||||
margin-inline-end: 12px;
|
||||
}
|
||||
|
||||
.badges:last-child {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 0px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 0px;
|
||||
`}
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
cursor: pointer;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 8px;
|
||||
`}
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
|
||||
.new-items {
|
||||
min-width: 12px;
|
||||
width: max-content;
|
||||
margin: 0 -2px -2px -2px;
|
||||
margin: 0 -2px -2px;
|
||||
}
|
||||
|
||||
.row-copy-link,
|
||||
@ -388,24 +273,12 @@ const StyledBadgesContainer = styled.div`
|
||||
|
||||
.badge-version {
|
||||
width: max-content;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin: 0 -2px -2px 5px;
|
||||
`
|
||||
: css`
|
||||
margin: 0 5px -2px -2px;
|
||||
`}
|
||||
margin-block: 0 -2px;
|
||||
margin-inline: -2px 5px;
|
||||
|
||||
> div {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 0 4px 0 3.3px;
|
||||
`
|
||||
: css`
|
||||
padding: 0 3.3px 0 4px;
|
||||
`}
|
||||
padding-block: 0;
|
||||
padding-inline: 4px 3.3px;
|
||||
p {
|
||||
letter-spacing: 0.5px;
|
||||
font-size: 9px;
|
||||
@ -419,14 +292,8 @@ const StyledBadgesContainer = styled.div`
|
||||
}
|
||||
|
||||
.bagde_alert {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin: 0 -2px -2px 5px;
|
||||
`
|
||||
: css`
|
||||
margin: 0 5px -2px -2px;
|
||||
`}
|
||||
margin-block: 0 -2px;
|
||||
margin-inline: -2px 5px;
|
||||
}
|
||||
|
||||
.badge-new-version {
|
||||
@ -448,14 +315,7 @@ const StyledQuickButtonsContainer = styled.div`
|
||||
}
|
||||
|
||||
.badge:last-child {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 3px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 3px;
|
||||
`}
|
||||
margin-inline-end: 3px;
|
||||
}
|
||||
|
||||
.lock-file {
|
||||
|
||||
@ -40,29 +40,13 @@ import TableRow from "./TableRow";
|
||||
import TableHeader from "./TableHeader";
|
||||
|
||||
const fileNameCss = css`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: -24px;
|
||||
padding-right: 24px;
|
||||
`
|
||||
: css`
|
||||
margin-left: -24px;
|
||||
padding-left: 24px;
|
||||
`}
|
||||
margin-inline-start: -24px;
|
||||
padding-inline-start: 24px;
|
||||
`;
|
||||
|
||||
const contextCss = css`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: -20px;
|
||||
padding-left: 20px;
|
||||
`
|
||||
: css`
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
`}
|
||||
margin-inline-end: -20px;
|
||||
padding-inline-end: 20px;
|
||||
`;
|
||||
|
||||
const StyledTableContainer = styled(TableContainer)`
|
||||
@ -84,8 +68,7 @@ const StyledTableContainer = styled(TableContainer)`
|
||||
}
|
||||
.table-container_file-name-cell {
|
||||
${fileNameCss}
|
||||
border-left: 0; //for Safari macOS
|
||||
border-right: 0; //for Safari macOS
|
||||
border-inline: 0; //for Safari macOS
|
||||
|
||||
border-image-source: ${(props) => `linear-gradient(to right,
|
||||
${props.theme.filesSection.tableView.row.borderColorTransition} 17px, ${props.theme.filesSection.tableView.row.borderColor} 31px)`};
|
||||
|
||||
@ -29,14 +29,7 @@ import { Text } from "@docspace/shared/components/text";
|
||||
|
||||
const StyledText = styled(Text)`
|
||||
display: inline-block;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 12px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 12px;
|
||||
`}
|
||||
margin-inline-end: 12px;
|
||||
`;
|
||||
|
||||
const StyledTypeCell = styled(StyledText)`
|
||||
@ -73,14 +66,7 @@ const StyledAuthorCell = styled.div`
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 8px;
|
||||
`}
|
||||
margin-inline-end: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -50,14 +50,7 @@ const SimpleFilesTileContent = styled(TileContent)`
|
||||
}
|
||||
|
||||
.badge {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 8px;
|
||||
`}
|
||||
margin-inline-end: 8px;
|
||||
cursor: pointer;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
@ -65,14 +58,7 @@ const SimpleFilesTileContent = styled(TileContent)`
|
||||
|
||||
.new-items {
|
||||
position: absolute;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
left: 29px;
|
||||
`
|
||||
: css`
|
||||
right: 29px;
|
||||
`}
|
||||
inset-inline-end: 29px;
|
||||
top: 19px;
|
||||
}
|
||||
|
||||
@ -83,14 +69,7 @@ const SimpleFilesTileContent = styled(TileContent)`
|
||||
|
||||
.share-icon {
|
||||
margin-top: -4px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-left: 8px;
|
||||
`
|
||||
: css`
|
||||
padding-right: 8px;
|
||||
`}
|
||||
padding-inline-end: 8px;
|
||||
}
|
||||
|
||||
.favorite,
|
||||
|
||||
@ -29,27 +29,12 @@ import { desktop, tablet } from "@docspace/shared/utils";
|
||||
|
||||
const paddingCss = css`
|
||||
@media ${desktop} {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 1px;
|
||||
padding-left: 0px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 1px;
|
||||
padding-right: 0px;
|
||||
`}
|
||||
margin-inline-start: 1px;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: -1px;
|
||||
`
|
||||
: css`
|
||||
margin-left: -1px;
|
||||
`}
|
||||
margin-inline-start: -1px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -156,7 +156,7 @@ const StyledTile = styled.div`
|
||||
: theme.filesSection.tilesView.tile.borderRadius};
|
||||
${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"};
|
||||
${(props) =>
|
||||
props.isFolder && !props.isRooms && "border-top-left-radius: 6px;"}
|
||||
props.isFolder && !props.isRooms && "border-start-start-radius: 6px;"}
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
${(props) => props.isFolder && (props.isRoom ? roomsStyles : FlexBoxStyles)};
|
||||
@ -223,14 +223,7 @@ const StyledTile = styled.div`
|
||||
display: ${(props) => (props.checked ? "flex" : "none")};
|
||||
flex: 0 0 16px;
|
||||
padding-top: 8px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-right: ${(props) => (props.isFolder ? "8px" : "7px")};
|
||||
`
|
||||
: css`
|
||||
padding-left: ${(props) => (props.isFolder ? "8px" : "7px")};
|
||||
`}
|
||||
padding-inline-start: ${(props) => (props.isFolder ? "8px" : "7px")};
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
@ -243,36 +236,17 @@ const StyledTile = styled.div`
|
||||
.file-icon_container {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: ${(props) =>
|
||||
props.isFolder ? (props.isRoom ? "16px" : "15px") : "16px"};
|
||||
margin-left: ${(props) =>
|
||||
props.isFolder ? (props.isRoom ? "12px" : "7px") : "8px"};
|
||||
`
|
||||
: css`
|
||||
margin-left: ${(props) =>
|
||||
props.isFolder ? (props.isRoom ? "16px" : "15px") : "16px"};
|
||||
margin-right: ${(props) =>
|
||||
props.isFolder ? (props.isRoom ? "12px" : "7px") : "8px"};
|
||||
`}
|
||||
margin-inline-start: ${(props) =>
|
||||
props.isFolder ? (props.isRoom ? "16px" : "15px") : "16px"};
|
||||
margin-inline-end: ${(props) =>
|
||||
props.isFolder ? (props.isRoom ? "12px" : "7px") : "8px"};
|
||||
}
|
||||
|
||||
.tile-folder-loader {
|
||||
padding-top: 16px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 21px;
|
||||
margin-left: 14px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 21px;
|
||||
margin-right: 14px;
|
||||
`}
|
||||
margin-inline: 21px 14px;
|
||||
}
|
||||
|
||||
.file-icon_container:hover {
|
||||
@ -367,16 +341,7 @@ const StyledFileTileBottom = styled.div`
|
||||
padding-top: 16px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 23px;
|
||||
margin-left: 14px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 23px;
|
||||
margin-right: 14px;
|
||||
`}
|
||||
margin-inline: 23px 14px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -402,7 +367,7 @@ const StyledContent = styled.div`
|
||||
}
|
||||
|
||||
.new-items {
|
||||
margin-left: 12px;
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
|
||||
.badges {
|
||||
@ -430,14 +395,7 @@ const StyledContent = styled.div`
|
||||
const StyledElement = styled.div`
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: ${(props) => (props.isRoom ? "8px" : "4px")};
|
||||
`
|
||||
: css`
|
||||
margin-right: ${(props) => (props.isRoom ? "8px" : "4px")};
|
||||
`}
|
||||
margin-inline-end: ${(props) => (props.isRoom ? "8px" : "4px")};
|
||||
user-select: none;
|
||||
margin-top: 3px;
|
||||
|
||||
@ -449,28 +407,15 @@ const StyledOptionButton = styled.div`
|
||||
display: block;
|
||||
|
||||
.expandButton > div:first-child {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 8px 12px 8px 21px;
|
||||
`
|
||||
: css`
|
||||
padding: 8px 21px 8px 12px;
|
||||
`}
|
||||
padding-block: 8px;
|
||||
padding-inline: 12px 21px;
|
||||
}
|
||||
`;
|
||||
|
||||
StyledOptionButton.defaultProps = { theme: Base };
|
||||
|
||||
const badgesPosition = css`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
right: 9px;
|
||||
`
|
||||
: css`
|
||||
left: 9px;
|
||||
`}
|
||||
inset-inline-start: 9px;
|
||||
|
||||
.badges {
|
||||
display: grid;
|
||||
@ -498,14 +443,7 @@ const badgesPosition = css`
|
||||
`;
|
||||
|
||||
const quickButtonsPosition = css`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
left: 9px;
|
||||
`
|
||||
: css`
|
||||
right: 9px;
|
||||
`}
|
||||
inset-inline-end: 9px;
|
||||
|
||||
.badges {
|
||||
display: grid;
|
||||
|
||||
@ -36,27 +36,12 @@ import InfiniteGrid from "./InfiniteGrid";
|
||||
|
||||
const paddingCss = css`
|
||||
@media ${desktop} {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 1px;
|
||||
padding-left: 0px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 1px;
|
||||
padding-right: 0px;
|
||||
`}
|
||||
margin-inline-start: 1px;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: -1px;
|
||||
`
|
||||
: css`
|
||||
margin-left: -1px;
|
||||
`}
|
||||
margin-inline-start: -1px;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -116,14 +101,7 @@ const StyledTileContainer = styled.div`
|
||||
cursor: pointer !important;
|
||||
|
||||
.sort-combo-box {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 3px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 3px;
|
||||
`}
|
||||
margin-inline-end: 3px;
|
||||
.dropdown-container {
|
||||
top: 104%;
|
||||
bottom: auto;
|
||||
@ -185,14 +163,7 @@ const StyledTileContainer = styled.div`
|
||||
color: ${(props) => props.theme.filterInput.sort.tileSortColor};
|
||||
|
||||
.sort-icon {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 8px;
|
||||
`}
|
||||
margin-inline-end: 8px;
|
||||
svg {
|
||||
path {
|
||||
fill: ${(props) => props.theme.filterInput.sort.tileSortFill};
|
||||
@ -208,16 +179,9 @@ const StyledTileContainer = styled.div`
|
||||
}
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
margin-top: 16px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: -3px;
|
||||
`
|
||||
: css`
|
||||
margin-right: -3px;
|
||||
`}
|
||||
@media ${tablet} {
|
||||
margin-top: 16px;
|
||||
margin-inline-end: -3px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -54,10 +54,7 @@ const MainContainerWrapper = styled.div`
|
||||
display: flex;
|
||||
align-self: center;
|
||||
|
||||
${({ theme }) =>
|
||||
theme.interfaceDirection === "rtl"
|
||||
? `margin-left: auto;`
|
||||
: `margin-right: auto;`}
|
||||
margin-inline-end: auto;
|
||||
`;
|
||||
|
||||
const MainContainer = styled.div`
|
||||
|
||||
@ -56,14 +56,8 @@ const StyledContainer = styled.div`
|
||||
min-height: 33px;
|
||||
|
||||
.table-container_group-menu {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin: 0 -20px 0 0;
|
||||
`
|
||||
: css`
|
||||
margin: 0 0 0 -20px;
|
||||
`}
|
||||
margin-block: 0;
|
||||
margin-inline: -20px 0;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
width: calc(100% + 40px);
|
||||
@ -71,28 +65,15 @@ const StyledContainer = styled.div`
|
||||
|
||||
@media ${tablet} {
|
||||
height: 61px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin: 0 -16px 0 0;
|
||||
`
|
||||
: css`
|
||||
margin: 0 0 0 -16px;
|
||||
`}
|
||||
margin-block: 0;
|
||||
margin-inline: -16px 0;
|
||||
width: calc(100% + 32px);
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
height: 52px !important;
|
||||
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin: 0 -16px 0 0;
|
||||
`
|
||||
: css`
|
||||
margin: 0 0 0 -16px;
|
||||
`}
|
||||
margin-block: 0;
|
||||
margin-inline: -16px 0;
|
||||
width: calc(100% + 32px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -58,14 +58,7 @@ const HeaderContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.settings-section_badge {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 8px;
|
||||
`}
|
||||
margin-inline-start: 8px;
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
@ -82,28 +75,13 @@ const HeaderContainer = styled.div`
|
||||
flex-grow: 1;
|
||||
|
||||
.action-button {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
`}
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-button {
|
||||
flex-shrink: 0;
|
||||
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 12px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 12px;
|
||||
`}
|
||||
margin-inline-end: 12px;
|
||||
|
||||
svg {
|
||||
${({ theme }) =>
|
||||
@ -111,16 +89,8 @@ const HeaderContainer = styled.div`
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 8px 8px 8px 0;
|
||||
margin-right: -8px;
|
||||
`
|
||||
: css`
|
||||
padding: 8px 0 8px 8px;
|
||||
margin-left: -8px;
|
||||
`}
|
||||
padding-block: 8px;
|
||||
padding-inline: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -146,14 +116,7 @@ const HeaderContainer = styled.div`
|
||||
}
|
||||
|
||||
.tariff-bar {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
`}
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -34,14 +34,7 @@ const StyledLoader = styled.div`
|
||||
align-items: center;
|
||||
|
||||
.arrow {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-left: 12px;
|
||||
`
|
||||
: css`
|
||||
padding-right: 12px;
|
||||
`}
|
||||
padding-inline-end: 12px;
|
||||
}
|
||||
|
||||
padding: ${(props) =>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user