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