Merge pull request #1640 from ONLYOFFICE/feature/appearance-mobile-layout
Web: Files: Appearance: added mobile view
This commit is contained in:
GitHub
commit
c12b1c50ae
@ -1,4 +1,5 @@
|
||||
import PlusThemeSvgUrl from "PUBLIC_DIR/images/plus.theme.svg?url";
|
||||
import { smallTablet } from "@docspace/components/utils/device";
|
||||
import PlusThemeSvgUrl from "PUBLIC_DIR/images/plus.theme.svg?url";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
const StyledComponent = styled.div`
|
||||
@ -38,7 +39,7 @@ const StyledComponent = styled.div`
|
||||
.theme-add {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 12px;
|
||||
@ -48,14 +49,14 @@ const StyledComponent = styled.div`
|
||||
`}
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
background: ${props => (props.theme.isBase ? "#eceef1" : "#474747")}
|
||||
background: ${(props) => (props.theme.isBase ? "#eceef1" : "#474747")}
|
||||
url(${PlusThemeSvgUrl}) no-repeat center;
|
||||
}
|
||||
|
||||
.add-theme {
|
||||
background: #d0d5da;
|
||||
padding-top: 16px;
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-right: 16px;
|
||||
@ -67,22 +68,42 @@ const StyledComponent = styled.div`
|
||||
}
|
||||
|
||||
.buttons-container {
|
||||
display: flex;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.button:not(:last-child) {
|
||||
${props =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 8px;
|
||||
`}
|
||||
.button:not(:last-child) {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-right: 8px;
|
||||
`}
|
||||
}
|
||||
@media ${smallTablet} {
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
${({ isShowDeleteButton }) =>
|
||||
isShowDeleteButton &&
|
||||
css`
|
||||
@media ${smallTablet} {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin: 0;
|
||||
|
||||
.button:not(:last-child) {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
`}
|
||||
}
|
||||
|
||||
.check-img {
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 16px 15px 0 0;
|
||||
@ -91,7 +112,7 @@ const StyledComponent = styled.div`
|
||||
padding: 16px 0 0 15px;
|
||||
`}
|
||||
svg path {
|
||||
fill: ${props => props.colorCheckImg};
|
||||
fill: ${(props) => props.colorCheckImg};
|
||||
}
|
||||
}
|
||||
`;
|
||||
@ -99,7 +120,7 @@ const StyledComponent = styled.div`
|
||||
const StyledTheme = styled.div`
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-left: 12px;
|
||||
@ -116,7 +137,7 @@ const StyledTheme = styled.div`
|
||||
|
||||
&:hover {
|
||||
.check-hover {
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 16px 15px 0 0;
|
||||
@ -127,7 +148,7 @@ const StyledTheme = styled.div`
|
||||
visibility: visible;
|
||||
opacity: 0.5;
|
||||
svg path {
|
||||
fill: ${props => props.colorCheckImgHover};
|
||||
fill: ${(props) => props.colorCheckImgHover};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -436,6 +436,216 @@ const IconBox = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledMobilePreview = styled.div`
|
||||
height: 293px;
|
||||
border-radius: 16px;
|
||||
padding: 0px 16px;
|
||||
background: ${({ themePreview }) =>
|
||||
themePreview === "Light" ? "#FFFFFF" : "#333333"};
|
||||
|
||||
border: ${({ themePreview }) =>
|
||||
themePreview === "Light" ? "1px solid #d0d5da" : "1px solid transparent"};
|
||||
|
||||
.section-search {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.main-button-preview {
|
||||
cursor: auto;
|
||||
background-color: ${(props) => props.colorPreview};
|
||||
border-radius: 3px;
|
||||
|
||||
&:active {
|
||||
background-color: ${(props) => props.colorPreview} !important;
|
||||
opacity: none !important;
|
||||
filter: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.color-badge rect {
|
||||
fill: ${(props) =>
|
||||
props.themePreview === "Dark" && props.selectThemeId === 7
|
||||
? "#FFFFFF"
|
||||
: props.colorPreview} !important;
|
||||
}
|
||||
|
||||
.color-loaders rect {
|
||||
fill: ${(props) =>
|
||||
props.themePreview === "Light"
|
||||
? `${props.colorPreview} !important`
|
||||
: `#FFFFFF !important`};
|
||||
}
|
||||
|
||||
.menu-section {
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.loaders-theme {
|
||||
background-color: ${(props) =>
|
||||
props.themePreview === "Light" ? "#FFF" : "#545454"};
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.loaders-tile-theme {
|
||||
background: ${(props) =>
|
||||
props.themePreview === "Light" ? "#F1F1F1" : "#333333"};
|
||||
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.loaders-tile-text-theme {
|
||||
background: ${(props) =>
|
||||
props.themePreview === "Light" ? "#D0D5DA" : "#858585"};
|
||||
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.loaders-theme-avatar {
|
||||
background-color: ${(props) =>
|
||||
props.themePreview === "Light" ? "#FFF" : "#545454"};
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.border-color {
|
||||
border-color: ${(props) =>
|
||||
props.themePreview === "Light" ? "#d0d5da" : "#474747"};
|
||||
}
|
||||
|
||||
.tile {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 12px;
|
||||
width: ${(props) => props.isViewTablet && "64%"};
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.background {
|
||||
background: ${(props) =>
|
||||
props.themePreview === "Light" ? "#FFF" : "#292929"};
|
||||
}
|
||||
|
||||
.tile-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 16px 14px 16px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.tablet-tile-name {
|
||||
width: 44% !important;
|
||||
margin-left: 16px;
|
||||
border-right: none !important;
|
||||
border-radius: 12px 0 16px 0 !important;
|
||||
}
|
||||
|
||||
.only-tile-name {
|
||||
width: ${(props) => props.isViewTablet && "66%"};
|
||||
border-top-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-left-width: 1px;
|
||||
border-style: solid;
|
||||
border-bottom: none;
|
||||
border-radius: 12px 12px 0px 0px;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
width: 72px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tile-tag {
|
||||
display: flex;
|
||||
border-top-width: 1px;
|
||||
border-top-style: solid;
|
||||
padding: 16px 0px 16px 16px;
|
||||
}
|
||||
|
||||
.tile-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pin {
|
||||
padding-right: 14px;
|
||||
|
||||
path {
|
||||
fill: ${(props) =>
|
||||
props.themePreview === "Light"
|
||||
? `${props.colorPreview} !important`
|
||||
: `#FFFFFF !important`};
|
||||
}
|
||||
}
|
||||
|
||||
.menu-button > div {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.preview_mobile-header {
|
||||
height: 48px;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 34px 1fr 32px;
|
||||
gap: 16px;
|
||||
|
||||
margin: 0 -16px;
|
||||
padding: 0 16px;
|
||||
|
||||
background: ${({ themePreview }) =>
|
||||
themePreview === "Light" ? "#FFFFFF" : "#282828"};
|
||||
|
||||
border-radius: 16px 16px 0px 0px;
|
||||
}
|
||||
|
||||
.preview_mobile-navigation {
|
||||
height: 53px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.header {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
.color-badge rect {
|
||||
fill: ${({ themePreview, selectThemeId, colorPreview }) =>
|
||||
themePreview === "Dark" && selectThemeId === 7
|
||||
? "#FFFFFF"
|
||||
: colorPreview} !important;
|
||||
}
|
||||
.section-badge {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.tile-icon {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.floating-button {
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
right: 0px;
|
||||
bottom: 48px;
|
||||
}
|
||||
|
||||
.icon-button_svg {
|
||||
svg {
|
||||
path {
|
||||
fill: #a3a9ae;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
StyledComponent.defaultProps = { theme: Base };
|
||||
|
||||
export { StyledComponent, StyledFloatingButton, IconBox };
|
||||
export { StyledComponent, StyledFloatingButton, IconBox, StyledMobilePreview };
|
||||
|
||||
@ -7,10 +7,12 @@ import {
|
||||
StyledComponent,
|
||||
StyledFloatingButton,
|
||||
IconBox,
|
||||
StyledMobilePreview,
|
||||
} from "./StyledPreview";
|
||||
|
||||
import ButtonPlusIcon from "PUBLIC_DIR/images/actions.button.plus.react.svg";
|
||||
import { saveToSessionStorage, getFromSessionStorage } from "../../../utils";
|
||||
import { isMobileOnly, isDesktop } from "react-device-detect";
|
||||
|
||||
const Preview = (props) => {
|
||||
const {
|
||||
@ -25,11 +27,18 @@ const Preview = (props) => {
|
||||
} = props;
|
||||
const [colorPreview, setColorPreview] = useState(previewAccent);
|
||||
const [isViewTablet, setIsViewTablet] = useState(false);
|
||||
const [isSmallWindow, setIsSmallWindow] = useState(false);
|
||||
|
||||
const onCheckView = () => {
|
||||
const tablet =
|
||||
isTablet || (window.innerWidth > 600 && window.innerWidth <= 1024);
|
||||
setIsViewTablet(tablet);
|
||||
|
||||
if (isDesktop && window.innerWidth < 600) {
|
||||
setIsSmallWindow(true);
|
||||
} else {
|
||||
setIsSmallWindow(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getSettings = () => {
|
||||
@ -60,7 +69,129 @@ const Preview = (props) => {
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
return isSmallWindow || isMobileOnly ? (
|
||||
<StyledMobilePreview
|
||||
selectThemeId={selectThemeId}
|
||||
themePreview={themePreview}
|
||||
colorPreview={colorPreview}
|
||||
>
|
||||
<div className="preview_mobile-header">
|
||||
<Loaders.Rectangle
|
||||
animate={false}
|
||||
width="20"
|
||||
height="20"
|
||||
className="loaders-theme"
|
||||
/>
|
||||
<Loaders.Rectangle
|
||||
animate={false}
|
||||
height="24"
|
||||
className="loaders-theme"
|
||||
/>
|
||||
<Loaders.Rectangle
|
||||
animate={false}
|
||||
width="32"
|
||||
height="32"
|
||||
borderRadius="50"
|
||||
className="loaders-theme-avatar"
|
||||
/>
|
||||
</div>
|
||||
<div className="preview_mobile-navigation">
|
||||
<div className="header">
|
||||
<Loaders.Rectangle
|
||||
animate={false}
|
||||
height="24"
|
||||
className="loaders-theme"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="section-search background border-color">
|
||||
<Loaders.Rectangle
|
||||
animate={false}
|
||||
width="48"
|
||||
height="12"
|
||||
className="loaders-theme loader-search"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="tile background border-color">
|
||||
<div className="tile-name">
|
||||
<div className="tile-container">
|
||||
<div className="tile-icon">
|
||||
<Loaders.Rectangle
|
||||
animate={false}
|
||||
width="32"
|
||||
height="32"
|
||||
className="loaders-tile-theme"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Loaders.Rectangle
|
||||
animate={false}
|
||||
width="48"
|
||||
height="10"
|
||||
borderRadius="3"
|
||||
className="loaders-tile-text-theme"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{withTileActions && (
|
||||
<div className="action-button">
|
||||
<Loaders.Rectangle
|
||||
animate={false}
|
||||
width="16"
|
||||
height="16"
|
||||
borderRadius="50"
|
||||
className="section-badge color-badge"
|
||||
/>
|
||||
<svg
|
||||
className="pin"
|
||||
width="12"
|
||||
height="16"
|
||||
viewBox="0 0 12 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M9.5783 -0.000242493L2.41936 -0.000241966C2.1608 -0.000374392 1.95098 0.209442 1.95111 0.468004L1.95111 0.498338C1.95105 0.937244 2.12199 1.35006 2.43234 1.66041C2.63229 1.86036 2.87496 2.00143 3.13948 2.07719L2.60851 7.27556C2.06569 7.30602 1.55963 7.53167 1.17212 7.91918C0.754536 8.33676 0.524586 8.8919 0.524652 9.48234L0.524652 9.52725C0.524586 9.78587 0.73427 9.99556 0.992898 9.99549L4.99937 9.99549L4.9993 13.5101C5.0005 13.5949 5.17017 15.0259 5.19137 15.2188C5.21258 15.4118 5.36324 15.5487 5.36417 15.5624C5.38013 15.8082 5.75521 15.9992 6.00178 15.9998C6.13093 16 6.41664 15.9478 6.50187 15.8625C6.57956 15.7848 6.63029 15.6798 6.63818 15.5624C6.6389 15.5521 6.79437 15.3697 6.81097 15.2188C6.82757 15.068 7.00165 13.595 7.00284 13.5036V9.99562L11.0049 9.99562C11.1342 9.99569 11.2513 9.94324 11.336 9.85853C11.4207 9.77382 11.4733 9.65666 11.4731 9.52738V9.48247C11.4732 8.89203 11.2432 8.33683 10.8257 7.91931C10.4382 7.5318 9.93203 7.30622 9.38928 7.27569L8.85831 2.07733C9.12283 2.00156 9.3655 1.86049 9.56545 1.66054C9.87587 1.35012 10.0468 0.937442 10.0467 0.49847L10.0467 0.468136C10.0466 0.209376 9.83692 -0.000308579 9.5783 -0.000242493Z" />
|
||||
</svg>
|
||||
<ContextMenuButton
|
||||
getData={() => {}}
|
||||
directionX="right"
|
||||
className="menu-button"
|
||||
isDisabled
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="tile-tag border-color">
|
||||
<Loaders.Rectangle
|
||||
animate={false}
|
||||
width="63"
|
||||
height="24"
|
||||
className="loaders-tile-theme"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<StyledFloatingButton
|
||||
className={
|
||||
floatingButtonClass
|
||||
? `${floatingButtonClass} floating-button`
|
||||
: "floating-button"
|
||||
}
|
||||
colorPreview={colorPreview}
|
||||
themePreview={themePreview}
|
||||
selectThemeId={selectThemeId}
|
||||
>
|
||||
<IconBox
|
||||
colorPreview={colorPreview}
|
||||
themePreview={themePreview}
|
||||
selectThemeId={selectThemeId}
|
||||
colorCheckImg={colorCheckImg}
|
||||
>
|
||||
<ButtonPlusIcon />
|
||||
</IconBox>
|
||||
</StyledFloatingButton>
|
||||
</StyledMobilePreview>
|
||||
) : (
|
||||
<StyledComponent
|
||||
colorPreview={colorPreview}
|
||||
themePreview={themePreview}
|
||||
|
||||
@ -21,7 +21,6 @@ import Loader from "./sub-components/loaderAppearance";
|
||||
|
||||
import { StyledComponent, StyledTheme } from "./Appearance/StyledApperance.js";
|
||||
import { ReactSVG } from "react-svg";
|
||||
import BreakpointWarning from "../../../../components/BreakpointWarning/index";
|
||||
import ModalDialogDelete from "./sub-components/modalDialogDelete";
|
||||
import hexToRgba from "hex-to-rgba";
|
||||
|
||||
@ -630,13 +629,6 @@ const Appearance = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
if (isSmallWindow)
|
||||
return (
|
||||
<BreakpointWarning sectionName={t("Settings:Appearance")} isSmallWindow />
|
||||
);
|
||||
if (isMobileOnly)
|
||||
return <BreakpointWarning sectionName={t("Settings:Appearance")} />;
|
||||
|
||||
return !tReady ? (
|
||||
<Loader />
|
||||
) : (
|
||||
@ -647,7 +639,10 @@ const Appearance = (props) => {
|
||||
onClickDelete={onClickDeleteModal}
|
||||
/>
|
||||
|
||||
<StyledComponent colorCheckImg={colorCheckImg}>
|
||||
<StyledComponent
|
||||
colorCheckImg={colorCheckImg}
|
||||
isShowDeleteButton={isShowDeleteButton}
|
||||
>
|
||||
<div className="header">{t("Common:Color")}</div>
|
||||
|
||||
<div className="theme-standard-container">
|
||||
@ -730,7 +725,7 @@ const Appearance = (props) => {
|
||||
visible={showColorSchemeDialog}
|
||||
onClose={onCloseColorSchemeDialog}
|
||||
header={headerColorSchemeDialog}
|
||||
viewMobile={isMobileOnly}
|
||||
// viewMobile={isMobileOnly}
|
||||
openHexColorPickerButtons={openHexColorPickerButtons}
|
||||
openHexColorPickerAccent={openHexColorPickerAccent}
|
||||
showSaveButtonDialog={showSaveButtonDialog}
|
||||
|
||||
@ -4,6 +4,7 @@ import ModalDialog from "@docspace/components/modal-dialog";
|
||||
import styled, { css } from "styled-components";
|
||||
import Button from "@docspace/components/button";
|
||||
import { withTranslation } from "react-i18next";
|
||||
import { isMobileOnly } from "react-device-detect";
|
||||
|
||||
const StyledComponent = styled(ModalDialog)`
|
||||
.modal-dialog-aside-footer {
|
||||
@ -64,6 +65,24 @@ const StyledComponent = styled(ModalDialog)`
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.drop-down-container-hex {
|
||||
${isMobileOnly &&
|
||||
css`
|
||||
width: 100%;
|
||||
`}
|
||||
}
|
||||
|
||||
.drop-down-item-hex {
|
||||
${isMobileOnly &&
|
||||
css`
|
||||
width: calc(100vw - 32px);
|
||||
`}
|
||||
|
||||
:hover {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ColorSchemeDialog = props => {
|
||||
@ -96,7 +115,8 @@ const ColorSchemeDialog = props => {
|
||||
displayType="aside"
|
||||
currentColorAccent={currentColorAccent}
|
||||
currentColorButtons={currentColorButtons}
|
||||
withFooterBorder={showSaveButtonDialog}>
|
||||
withFooterBorder={showSaveButtonDialog}
|
||||
>
|
||||
<ModalDialog.Header>{header}</ModalDialog.Header>
|
||||
<ModalDialog.Body>
|
||||
<div>
|
||||
@ -125,25 +145,22 @@ const ColorSchemeDialog = props => {
|
||||
</ModalDialog.Body>
|
||||
|
||||
<ModalDialog.Footer>
|
||||
{showSaveButtonDialog && (
|
||||
<>
|
||||
<Button
|
||||
className="save"
|
||||
label={t("Common:SaveButton")}
|
||||
size="normal"
|
||||
primary
|
||||
scale
|
||||
onClick={onSaveColorSchemeDialog}
|
||||
/>
|
||||
<Button
|
||||
className="cancel-button"
|
||||
label={t("Common:CancelButton")}
|
||||
size="normal"
|
||||
scale
|
||||
onClick={onClose}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
className="save"
|
||||
label={t("Common:SaveButton")}
|
||||
size="normal"
|
||||
primary
|
||||
scale
|
||||
onClick={onSaveColorSchemeDialog}
|
||||
isDisabled={!showSaveButtonDialog}
|
||||
/>
|
||||
<Button
|
||||
className="cancel-button"
|
||||
label={t("Common:CancelButton")}
|
||||
size="normal"
|
||||
scale
|
||||
onClick={onClose}
|
||||
/>
|
||||
</ModalDialog.Footer>
|
||||
</StyledComponent>
|
||||
);
|
||||
|
||||
@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
|
||||
import styled, { css } from "styled-components";
|
||||
import Button from "@docspace/components/button";
|
||||
import { HexColorPicker, HexColorInput } from "react-colorful";
|
||||
import { isMobileOnly } from "react-device-detect";
|
||||
|
||||
const StyledComponent = styled.div`
|
||||
.save-button {
|
||||
@ -29,6 +30,11 @@ const StyledComponent = styled.div`
|
||||
|
||||
.hex-color-picker .react-colorful__interactive {
|
||||
width: 183px;
|
||||
|
||||
${isMobileOnly &&
|
||||
css`
|
||||
width: calc(100vw - 76px);
|
||||
`}
|
||||
}
|
||||
|
||||
.hex-color-picker .react-colorful__saturation-pointer {
|
||||
@ -85,6 +91,11 @@ const StyledComponent = styled.div`
|
||||
flex-direction: column;
|
||||
padding-bottom: 16px;
|
||||
width: 195px;
|
||||
|
||||
${isMobileOnly &&
|
||||
css`
|
||||
width: calc(100vw - 64px);
|
||||
`}
|
||||
}
|
||||
|
||||
.hex-value-container {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user