2020-03-15 14:50:25 +00:00
|
|
|
import styled from "styled-components";
|
|
|
|
|
2020-03-09 12:52:27 +00:00
|
|
|
export const editButtonStyle = {
|
|
|
|
position : "absolute",
|
|
|
|
top: "0",
|
|
|
|
right : "0",
|
|
|
|
backgroundColor : "#3e99ff",
|
|
|
|
borderRadius : "0 0 0 20px",
|
|
|
|
padding : ".4rem 1.2rem",
|
|
|
|
outline : "none",
|
|
|
|
color : "white",
|
|
|
|
fontFamily : "Lato",
|
|
|
|
textTransform : "uppercase"
|
|
|
|
};
|
|
|
|
|
|
|
|
export const panelStyle = {
|
2020-03-15 14:50:25 +00:00
|
|
|
position : "relative",
|
2020-03-09 12:52:27 +00:00
|
|
|
backgroundColor: "#fafafa",
|
2020-03-17 16:38:03 +00:00
|
|
|
height: "100vh",
|
2020-03-09 12:52:27 +00:00
|
|
|
width: "auto",
|
2020-03-17 16:38:03 +00:00
|
|
|
padding: "0rem 3rem",
|
2020-03-09 12:52:27 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export const editModeStyle = {
|
|
|
|
position : "absolute",
|
|
|
|
top: "15%",
|
|
|
|
right: "0",
|
|
|
|
width : "1.5rem",
|
|
|
|
height : "1.5rem",
|
|
|
|
backgroundColor : "black",
|
|
|
|
borderRadius: "100%",
|
|
|
|
zIndex : "100"
|
|
|
|
};
|
|
|
|
|
|
|
|
export const editModeIconStyle = {
|
|
|
|
position : "absolute",
|
|
|
|
top: "50%",
|
|
|
|
left: "50%",
|
|
|
|
transform : "translate(-50%, -50%)",
|
|
|
|
width: "0.75rem",
|
|
|
|
height : "0.75rem",
|
|
|
|
borderRadius : "20%",
|
|
|
|
zIndex : "101"
|
2020-03-15 14:50:25 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export const iconStyle = {
|
|
|
|
width: "4rem",
|
|
|
|
height: "auto",
|
|
|
|
position: "absolute",
|
|
|
|
top: "20%",
|
|
|
|
left: "50%",
|
|
|
|
transform: "translateX(-50%)",
|
|
|
|
filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))"
|
|
|
|
};
|
|
|
|
export const nameStyle = {
|
|
|
|
position: "absolute",
|
|
|
|
top: "50%",
|
|
|
|
left: "50%",
|
|
|
|
transform: "translateX(-50%)"
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
export const formStyle = {
|
|
|
|
position : "absolute",
|
|
|
|
zIndex: "1000",
|
|
|
|
width : "80rem",
|
|
|
|
height : "10rem",
|
|
|
|
padding : "1rem",
|
|
|
|
margin : "1rem",
|
|
|
|
borderRadius : "10%",
|
|
|
|
boxShadow : "1px 1px 5px 2px #5d5d5d",
|
|
|
|
backgroundColor: "#3e99ff",
|
|
|
|
};
|
|
|
|
|
|
|
|
export const addDeviceFormStyle = {
|
|
|
|
maxWidth : "400px",
|
|
|
|
background : "#3e99ff",
|
|
|
|
paddingRight : "5rem",
|
|
|
|
};
|
|
|
|
|
|
|
|
export const StyledDiv = styled.div`
|
|
|
|
background-color : white;
|
|
|
|
padding : 3rem;
|
|
|
|
width: 10rem;
|
|
|
|
height: 10rem;
|
|
|
|
border-radius : 100%;
|
|
|
|
border : none;
|
|
|
|
position : relative;
|
|
|
|
box-shadow: 3px 2px 10px 5px #ccc;
|
|
|
|
transition : all .3s ease-out;
|
|
|
|
:hover{
|
|
|
|
background-color : #f2f2f2;
|
|
|
|
}
|
|
|
|
:active{
|
|
|
|
transform : translate(0.3px, 0.8px);
|
|
|
|
box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
|
|
|
|
}
|
|
|
|
`;
|