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

Web: Components: backdrop: Added theme into styles, added commonStyles, moved styles to a separate file.

Browse Source
This commit is contained in:
TatianaLopaeva 2021-02-04 12:28:04 +03:00
parent 668c10ddd0
commit ec0d32df21
3 changed files with 29 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/asc-web-components/src/components/backdrop/index.js
View File

@ -1,19 +1,7 @@
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
const StyledBackdrop = styled.div`
background-color: ${(props) =>
props.needBackground ? "rgba(6, 22, 38, 0.1)" : "unset"};
display: ${(props) => (props.visible ? "block" : "none")};
height: 100vh;
position: fixed;
width: 100vw;
z-index: ${(props) => props.zIndex};
left: 0;
top: 0;
cursor: ${(props) => (props.needBackground ? "pointer" : "default")}; ;
`;
import StyledBackdrop from "./styled-backdrop";
class Backdrop extends React.Component {
constructor(props) {

24
packages/asc-web-components/src/components/backdrop/styled-backdrop.js Normal file
View File

@ -0,0 +1,24 @@
import styled from "styled-components";
import { Base } from "../../themes";
const StyledBackdrop = styled.div`
background-color: ${(props) =>
props.needBackground
? props.theme.backdrop.backgroundColor
: props.theme.backdrop.unsetBackgroundColor};
display: ${(props) => (props.visible ? "block" : "none")};
height: 100vh;
position: fixed;
width: 100vw;
z-index: ${(props) => props.zIndex};
left: 0;
top: 0;
cursor: ${(props) => (props.needBackground ? "pointer" : "default")}; ;
`;
StyledBackdrop.defaultProps = {
theme: Base,
};
export default StyledBackdrop;

6
packages/asc-web-components/src/themes/base.js
View File

@ -455,10 +455,12 @@ const Base = {
big: "82px",
max: "160px",
},
},
// backdrop: { backgroundColor: "rgba(0, 0, 0, 0.3)" },
backdrop: {
backgroundColor: "rgba(6, 22, 38, 0.1)",
unsetBackgroundColor: "unset",
},
// loader: {
// color: shuttleGrey,