Web: Components: save-cancel-buttons: Added theme support, moved styles to a separate file.
This commit is contained in:
parent
cca261bb5b
commit
a66047aeb4
@ -1,38 +1,9 @@
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import PropTypes from "prop-types";
|
||||
import Button from "../button";
|
||||
import Text from "../text";
|
||||
import { tablet } from "../../utils/device";
|
||||
|
||||
const StyledSaveCancelButtons = styled.div`
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
left: 0;
|
||||
padding: 8px 24px 8px 16px;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
|
||||
.save-button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.unsaved-changes {
|
||||
color: #a3a9ae;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
justify-content: flex-end;
|
||||
position: fixed;
|
||||
|
||||
.unsaved-changes {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
import StyledSaveCancelButtons from "./styled-save-cancel-buttons";
|
||||
|
||||
const ButtonKeys = Object.freeze({
|
||||
enter: 13,
|
||||
|
@ -0,0 +1,37 @@
|
||||
import styled from "styled-components";
|
||||
|
||||
import { Base } from "../../themes";
|
||||
import { tablet } from "../../utils/device";
|
||||
|
||||
const StyledSaveCancelButtons = styled.div`
|
||||
display: flex;
|
||||
position: absolute;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
|
||||
bottom: ${(props) => props.theme.saveCancelButtons.bottom};
|
||||
width: ${(props) => props.theme.saveCancelButtons.width};
|
||||
|
||||
left: ${(props) => props.theme.saveCancelButtons.left};
|
||||
padding: ${(props) => props.theme.saveCancelButtons.padding};
|
||||
|
||||
.save-button {
|
||||
margin-right: ${(props) => props.theme.saveCancelButtons.marginRight};
|
||||
}
|
||||
|
||||
.unsaved-changes {
|
||||
color: ${(props) => props.theme.saveCancelButtons.unsavedColor};
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
justify-content: flex-end;
|
||||
position: fixed;
|
||||
|
||||
.unsaved-changes {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
StyledSaveCancelButtons.defaultProps = { theme: Base };
|
||||
export default StyledSaveCancelButtons;
|
@ -200,6 +200,16 @@ const Base = {
|
||||
color: black,
|
||||
},
|
||||
|
||||
saveCancelButtons: {
|
||||
bottom: "0",
|
||||
width: "100%",
|
||||
left: "0",
|
||||
padding: "8px 24px 8px 16px",
|
||||
marginRight: "8px",
|
||||
|
||||
unsavedColor: gray,
|
||||
},
|
||||
|
||||
selectedItem: {
|
||||
background: grayLight,
|
||||
border: `1px solid ${globalColors.grayLightMid}`,
|
||||
|
Loading…
Reference in New Issue
Block a user