cygni-external-react-workshop/src/styles.js at 29291e2765047f7571feb34f0bd439ef74ff0a9a · cygni/cygni-external-react-workshop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import React from "react";
import styled, { withTheme, keyframes } from "styled-components";

export const MyApp = styled.div`
  * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
      "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
      "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  text-align: center;
`;

export const Code = styled.code`
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
`;

export const AppHeader = styled.header`
  background-color: #282c34;
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
  margin-bottom: 2em;
`;

export const AppLink = styled.a`
  color: #61dafb;
`;

export const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
  `;

export const AppLogo = styled.img`
  animation: ${rotate360} infinite 20s linear;
  height: 20vmin;
  pointer-events: none;
`;

export const Container = styled.div`
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
`;

export const Count = styled.span`
  color: ${props => props.color};
  font-size: 8em;
  flex-grow: 1;
  flex: 100%;
`;

const IconButton = ({ className, icon, children }) => (
  <button className={className}>
    {icon && <span>{icon}</span>}
    {children}
  </button>
);

export const Button = styled(IconButton)`
  background-color: white;
  border-radius: 3px;
  border: 2px solid ${props => props.color || "#a9a9a9"};
  color: ${props => props.color || "#a9a9a9"};
  margin: 1em;
  padding: 0.25em 1em;
  min-width: 25px;
  max-width: 50px;
  flex: auto;
`;

export const ResetButton = styled(Button)`
  flex: 100%;
  max-width: 150px;
`;

const TextContainer = styled(Container)`
  color: ${props => props.theme.color || "#000"};
  background-color: ${props => props.theme.bgColor || "#fff"};
`;

export const ThemedTextContainer = withTheme(TextContainer);

const StyledDate = styled.input.attrs({ type: "date" })`
  background-color: ${props => props.theme.bgColor || "#fff"};
  color: ${props => props.theme.dateColor || "#ff00ff"};
  outline: none;
`;

export const ThemedDateInput = withTheme(StyledDate);

export const theme = {
  color: "#f06292",
  dateColor: "#b19cd9",
  bgColor: "#fff"
};