Shared: Themes: add rombs colors
This commit is contained in:
parent
5b9dccaa54
commit
499bfbf049
@ -27,6 +27,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import styled, { keyframes } from "styled-components";
|
import styled, { keyframes } from "styled-components";
|
||||||
|
import { globalColors } from "../../../themes";
|
||||||
|
|
||||||
export const keyFrameBlue = (props: {
|
export const keyFrameBlue = (props: {
|
||||||
colorStep_1: string;
|
colorStep_1: string;
|
||||||
@ -34,14 +35,14 @@ export const keyFrameBlue = (props: {
|
|||||||
colorStep_3: string;
|
colorStep_3: string;
|
||||||
colorStep_4: string;
|
colorStep_4: string;
|
||||||
}) => keyframes`
|
}) => keyframes`
|
||||||
0% { background: #de7a59; top: 120px; }
|
0% { background: ${globalColors.redRomb}; top: 120px; }
|
||||||
10% { background: ${props.colorStep_1}; top: 120px; }
|
10% { background: ${props.colorStep_1}; top: 120px; }
|
||||||
14% { background: ${props.colorStep_2}; top: 120px; }
|
14% { background: ${props.colorStep_2}; top: 120px; }
|
||||||
15% { background: ${props.colorStep_2}; top: 0; }
|
15% { background: ${props.colorStep_2}; top: 0; }
|
||||||
20% { background: ${props.colorStep_3}; }
|
20% { background: ${props.colorStep_3}; }
|
||||||
30% { background: ${props.colorStep_4}; }
|
30% { background: ${props.colorStep_4}; }
|
||||||
40% { top: 120px; }
|
40% { top: 120px; }
|
||||||
100% { background: #de7a59; top: 120px; }
|
100% { background: ${globalColors.redRomb}; top: 120px; }
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const keyFrameRed = (props: {
|
export const keyFrameRed = (props: {
|
||||||
@ -49,13 +50,13 @@ export const keyFrameRed = (props: {
|
|||||||
colorStep_2: string;
|
colorStep_2: string;
|
||||||
colorStep_3: string;
|
colorStep_3: string;
|
||||||
}) => keyframes`
|
}) => keyframes`
|
||||||
0% { background: #55bce6; top: 100px; opacity: 1; }
|
0% { background: ${globalColors.blueRomb}; top: 100px; opacity: 1; }
|
||||||
10% { background: ${props.colorStep_1}; top: 100px; opacity: 1; }
|
10% { background: ${props.colorStep_1}; top: 100px; opacity: 1; }
|
||||||
14% { background: ${props.colorStep_2}; top: 100px; opacity: 1; }
|
14% { background: ${props.colorStep_2}; top: 100px; opacity: 1; }
|
||||||
15% { background: ${props.colorStep_2}; top: 0; opacity: 1; }
|
15% { background: ${props.colorStep_2}; top: 0; opacity: 1; }
|
||||||
20% { background: ${props.colorStep_2}; top: 0; opacity: 0; }
|
20% { background: ${props.colorStep_2}; top: 0; opacity: 0; }
|
||||||
45% { background: ${props.colorStep_3}; top: 0; }
|
45% { background: ${props.colorStep_3}; top: 0; }
|
||||||
100% { background: #55bce6; top: 100px; }
|
100% { background: ${globalColors.blueRomb}; top: 100px; }
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const keyFrameGreen = (props: {
|
export const keyFrameGreen = (props: {
|
||||||
@ -64,7 +65,7 @@ export const keyFrameGreen = (props: {
|
|||||||
colorStep_3: string;
|
colorStep_3: string;
|
||||||
colorStep_4: string;
|
colorStep_4: string;
|
||||||
}) => keyframes`
|
}) => keyframes`
|
||||||
0% { background: #a1cb5c; top: 110px; opacity: 1; }
|
0% { background: ${globalColors.greenRomb}; top: 110px; opacity: 1; }
|
||||||
10% { background: ${props.colorStep_1}; top: 110px; opacity: 1; }
|
10% { background: ${props.colorStep_1}; top: 110px; opacity: 1; }
|
||||||
14% { background: ${props.colorStep_2}; top: 110px; opacity: 1; }
|
14% { background: ${props.colorStep_2}; top: 110px; opacity: 1; }
|
||||||
15% { background: ${props.colorStep_2}; top: 0; opacity: 1; }
|
15% { background: ${props.colorStep_2}; top: 0; opacity: 1; }
|
||||||
@ -72,7 +73,7 @@ export const keyFrameGreen = (props: {
|
|||||||
25% { background: ${props.colorStep_3}; top: 0; opacity: 1; }
|
25% { background: ${props.colorStep_3}; top: 0; opacity: 1; }
|
||||||
30% { background: ${props.colorStep_4}; }
|
30% { background: ${props.colorStep_4}; }
|
||||||
70% { top: 110px; }
|
70% { top: 110px; }
|
||||||
100% { background: #a1cb5c; top: 110px; }
|
100% { background: ${globalColors.greenRomb}; top: 110px; }
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Romb = styled.div<{ size: string }>`
|
const Romb = styled.div<{ size: string }>`
|
||||||
@ -92,9 +93,9 @@ const Romb = styled.div<{ size: string }>`
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
background: ${(props) =>
|
background: ${(props) =>
|
||||||
(props.color === "blue" && "#55bce6") ||
|
(props.color === "blue" && globalColors.blueRomb) ||
|
||||||
(props.color === "red" && "#de7a59") ||
|
(props.color === "red" && globalColors.redRomb) ||
|
||||||
(props.color === "green" && "#a1cb5c")};
|
(props.color === "green" && globalColors.greenRomb)};
|
||||||
|
|
||||||
z-index: ${(props) =>
|
z-index: ${(props) =>
|
||||||
(props.color === "blue" && "1") ||
|
(props.color === "blue" && "1") ||
|
||||||
|
@ -113,4 +113,7 @@ export const globalColors = {
|
|||||||
//
|
//
|
||||||
|
|
||||||
tickColor: "#20D21F",
|
tickColor: "#20D21F",
|
||||||
|
redRomb: "#de7a59",
|
||||||
|
blueRomb: "#55bce6",
|
||||||
|
greenRomb: "#a1cb5c",
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user