add styling
This commit is contained in:
parent
085b62e98f
commit
707551af38
56
src/App.css
56
src/App.css
|
|
@ -1,38 +1,34 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
body {
|
||||
color: #fff;
|
||||
background-color: #202020;
|
||||
}
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
.article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
281
src/App.js
281
src/App.js
|
|
@ -1,4 +1,4 @@
|
|||
import palette from 'nice-color-palettes';
|
||||
import niceColorPalette from 'nice-color-palettes';
|
||||
import chroma from 'chroma-js';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
|
@ -7,48 +7,172 @@ import './App.css';
|
|||
// an object to hold our styled components
|
||||
const S = {};
|
||||
|
||||
class Shade extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className={this.props.className}>
|
||||
<span>{this.props.color}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
S.Shade = styled(Shade)`
|
||||
background-color: ${props => props.color};
|
||||
|
||||
span {
|
||||
S.Button = styled.button`
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: none;
|
||||
border: 0;
|
||||
font-weight: bold;
|
||||
color: ${props => chroma.contrast(props.color, '#000') < 4.5 ? '#fff' : '#000'};
|
||||
opacity: 0;
|
||||
}
|
||||
opacity: 0.6;
|
||||
min-height: 3em;
|
||||
|
||||
&:hover span {
|
||||
opacity: 0.9;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
S.ShadeBase = styled(S.Shade)`
|
||||
border-top: 3px solid rgba(0, 0, 0, 0.5);
|
||||
border-bottom: 3px solid rgba(0, 0, 0, 0.5);
|
||||
S.ShadeBG = styled.span.attrs(
|
||||
({ color }) => ({
|
||||
style: {
|
||||
backgroundColor: color,
|
||||
}
|
||||
})
|
||||
)`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
S.ShadeText = styled.span.attrs(
|
||||
({ color }) => ({
|
||||
style: {
|
||||
color: chroma.contrast(color, '#000') < 4.5 ? '#fff' : '#000'
|
||||
}
|
||||
})
|
||||
)`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
`;
|
||||
|
||||
function ShadeBox(props) {
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<S.ShadeBG color={props.color} />
|
||||
<S.ShadeText className="text" color={props.color}>{props.color}</S.ShadeText>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
S.ShadeBox = styled(ShadeBox)`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
S.ShadeBoxBase = styled(S.ShadeBox)`
|
||||
.text {
|
||||
opacity: 0.7;
|
||||
}
|
||||
`;
|
||||
|
||||
function IncDecButton(props) {
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<div>{props.children}</div>
|
||||
<button type="button" onClick={props.onDecrement}>-</button>
|
||||
<span>{props.children}</span>
|
||||
<button className="btn-l" type="button" onClick={props.onDecrement}>-</button>
|
||||
{props.value !== undefined &&
|
||||
<span>{props.value}</span>
|
||||
}
|
||||
<button type="button" onClick={props.onIncrement}>+</button>
|
||||
<button className="btn-r" type="button" onClick={props.onIncrement}>+</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
S.IncDecButton = styled(IncDecButton)`
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
min-height: 3em;
|
||||
|
||||
span {
|
||||
opacity: 0.6;
|
||||
font-weight: bold;
|
||||
padding: 0.25em 25%;
|
||||
|
||||
&:first-child {
|
||||
padding: 0.25em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
opacity: 0.5;
|
||||
padding: 0.25em 0.5em;
|
||||
|
||||
&.btn-l {
|
||||
left: 0;
|
||||
border-right-width: 0;
|
||||
padding-right: 25%;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-r {
|
||||
right: 0;
|
||||
border-left-width: 0;
|
||||
padding-left: 25%;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
S.GradientBG = styled.span`
|
||||
opacity: 0.3;
|
||||
background:
|
||||
linear-gradient(to bottom,
|
||||
rgba(0, 0, 0, 1),
|
||||
rgba(0, 0, 0, 0) 12rem
|
||||
),
|
||||
linear-gradient(to top,
|
||||
rgba(0, 0, 0, 1),
|
||||
rgba(0, 0, 0, 0) 10rem
|
||||
),
|
||||
linear-gradient(
|
||||
to right,
|
||||
${props => props.colorList.map((color, index) => {
|
||||
const lineEnd = props.colorList.length - 1 === index ? "" : ",";
|
||||
return color + lineEnd;
|
||||
})}
|
||||
);
|
||||
`;
|
||||
|
||||
class Color extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -125,44 +249,44 @@ class Color extends React.Component {
|
|||
return (
|
||||
<div className={this.props.className}>
|
||||
<header>
|
||||
<button type="button" onClick={this.handleClick}>Random</button>
|
||||
<IncDecButton
|
||||
<S.Button type="button" onClick={this.handleClick}>Random</S.Button>
|
||||
<S.IncDecButton
|
||||
onIncrement={() => { this.incState("brightenAmount", 0.25); }}
|
||||
onDecrement={() => { this.incState("brightenAmount", -0.25); }}
|
||||
value={this.state.brightenAmount}
|
||||
>
|
||||
<span>Brightness</span>
|
||||
</IncDecButton>
|
||||
<IncDecButton
|
||||
</S.IncDecButton>
|
||||
<S.IncDecButton
|
||||
onIncrement={() => { this.incState("scaleTintStepCount", 1); }}
|
||||
onDecrement={() => { this.incState("scaleTintStepCount", -1); }}
|
||||
>
|
||||
<span>Count</span>
|
||||
</IncDecButton>
|
||||
</S.IncDecButton>
|
||||
</header>
|
||||
<ul>
|
||||
{this.state.tints.map((shade, index) =>
|
||||
<li key={index}><S.Shade color={shade} /></li>
|
||||
<li key={"shade" + index}><S.ShadeBox color={shade}>{shade}</S.ShadeBox></li>
|
||||
)}
|
||||
<li><S.ShadeBase color={this.state.baseColor} isBase /></li>
|
||||
<li><S.ShadeBoxBase color={this.state.baseColor} isBase>{this.state.baseColor}</S.ShadeBoxBase></li>
|
||||
{this.state.shades.map((tint, index) =>
|
||||
<li key={index}><S.Shade color={tint} /></li>
|
||||
<li key={"tint" + index}><S.ShadeBox color={tint}>{tint}</S.ShadeBox></li>
|
||||
)}
|
||||
</ul>
|
||||
<footer>
|
||||
<IncDecButton
|
||||
<S.IncDecButton
|
||||
onIncrement={() => { this.incState("scaleShadeStepCount", 1); }}
|
||||
onDecrement={() => { this.incState("scaleShadeStepCount", -1); }}
|
||||
>
|
||||
<span>Count</span>
|
||||
</IncDecButton>
|
||||
<IncDecButton
|
||||
</S.IncDecButton>
|
||||
<S.IncDecButton
|
||||
onIncrement={() => { this.incState("darkenAmount", 0.25); }}
|
||||
onDecrement={() => { this.incState("darkenAmount", -0.25); }}
|
||||
value={this.state.darkenAmount}
|
||||
>
|
||||
<span>Darkness</span>
|
||||
</IncDecButton>
|
||||
</S.IncDecButton>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -175,7 +299,7 @@ Color.defaultProps = {
|
|||
scaleShadeStart: 0.2,
|
||||
scaleShadeEnd: 0.8,
|
||||
scaleShadeStepCount: 4,
|
||||
scaleTintStart: 0.2,
|
||||
scaleTintStart: 0.1,
|
||||
scaleTintEnd: 0.8,
|
||||
scaleTintStepCount: 4,
|
||||
}
|
||||
|
|
@ -186,6 +310,23 @@ S.Color = styled(Color)`
|
|||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
|
||||
header,
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header {
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -217,7 +358,7 @@ class Palette extends React.Component {
|
|||
}
|
||||
|
||||
randomFivePalette() {
|
||||
const newPalette = palette[Math.floor(Math.random() * palette.length)];
|
||||
const newPalette = niceColorPalette[Math.floor(Math.random() * niceColorPalette.length)];
|
||||
this.setState({palette: newPalette});
|
||||
}
|
||||
|
||||
|
|
@ -235,9 +376,14 @@ class Palette extends React.Component {
|
|||
</li>
|
||||
);
|
||||
return (
|
||||
<article>
|
||||
<button onClick={this.randomFivePalette}>Random Five Colour Palette</button>
|
||||
<ul className={this.props.className}>
|
||||
<article className={this.props.className}>
|
||||
<S.GradientBG className="gradient-bg" colorList={this.state.palette.map(color => {
|
||||
return chroma(color).darken(3);
|
||||
})}/>
|
||||
<ul className="button-list">
|
||||
<li><button onClick={this.randomFivePalette}>Random Five Colour Palette</button></li>
|
||||
</ul>
|
||||
<ul className="palette-item">
|
||||
{colors}
|
||||
</ul>
|
||||
</article>
|
||||
|
|
@ -246,7 +392,52 @@ class Palette extends React.Component {
|
|||
}
|
||||
|
||||
S.Palette = styled(Palette)`
|
||||
display: flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
flex: 1 1 100%;
|
||||
font-size: 0.8rem;
|
||||
|
||||
.gradient-bg {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.palette-item {
|
||||
flex: 1 1 100%;
|
||||
|
||||
> li {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
|
||||
li,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
> ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.color-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
|
||||
> ul {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
function App() {
|
||||
|
|
@ -260,4 +451,4 @@ function App() {
|
|||
export default App;
|
||||
|
||||
|
||||
// vim: set ft=javascriptreact:
|
||||
// vim: set ft=javascriptreact:auto
|
||||
|
|
|
|||
Reference in New Issue