87 lines
1.4 KiB
JavaScript
87 lines
1.4 KiB
JavaScript
import styled from 'styled-components';
|
|
import {
|
|
colorWhite,
|
|
colorDanger,
|
|
colorWarning,
|
|
colorSuccess,
|
|
} from '/imports/ui/stylesheets/styled-components/palette';
|
|
|
|
const SignalBars = styled.div`
|
|
align-items: flex-end;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
${({ grayscale }) => grayscale && `
|
|
& > div {
|
|
background-color: ${colorWhite};
|
|
}
|
|
`}
|
|
|
|
${({ grayscale, level }) => !grayscale && level === 'critical' && `
|
|
& > div {
|
|
background-color: ${colorDanger};
|
|
}
|
|
`}
|
|
|
|
${({ grayscale, level }) => !grayscale && level === 'danger' && `
|
|
& > div {
|
|
background-color: ${colorWarning};
|
|
}
|
|
`}
|
|
|
|
${({ grayscale, level }) => !grayscale && level === 'warning' && `
|
|
& > div {
|
|
background-color: ${colorSuccess};
|
|
}
|
|
`}
|
|
|
|
${({ grayscale, level }) => !grayscale && level === 'normal' && `
|
|
& > div {
|
|
background-color: ${colorWhite};
|
|
}
|
|
`}
|
|
`;
|
|
|
|
const Bar = styled.div`
|
|
width: 20%;
|
|
border-radius: .46875em;
|
|
`;
|
|
|
|
const FirstBar = styled(Bar)`
|
|
height: 25%;
|
|
`;
|
|
|
|
const SecondBar = styled(Bar)`
|
|
height: 50%;
|
|
|
|
${({ active }) => !active && `
|
|
opacity: .5;
|
|
`}
|
|
`;
|
|
|
|
const ThirdBar = styled(Bar)`
|
|
height: 75%;
|
|
|
|
${({ active }) => !active && `
|
|
opacity: .5;
|
|
`}
|
|
`;
|
|
|
|
const FourthBar = styled(Bar)`
|
|
height: 100%;
|
|
|
|
${({ active }) => !active && `
|
|
opacity: .5;
|
|
`}
|
|
`;
|
|
|
|
export default {
|
|
SignalBars,
|
|
FirstBar,
|
|
SecondBar,
|
|
ThirdBar,
|
|
FourthBar,
|
|
};
|