1 | import styled from 'styled-components';
|
2 |
|
3 | import Sizes from '../Sizes';
|
4 | import Colors from '../Colors';
|
5 | import TextHelper from '../TextHelper';
|
6 | import { styledByMediaQuery } from '../utils/styles';
|
7 |
|
8 | export const ColorPicker = styled.div`
|
9 | background-color: white;
|
10 | border: 1px solid ${Colors.line};
|
11 | position: relative;
|
12 | width: 100%;
|
13 | margin-bottom: ${Sizes.s4}px;
|
14 | ${styledByMediaQuery(`width: 308px;`)}
|
15 |
|
16 | &:before {
|
17 | content: '';
|
18 | position: absolute;
|
19 | top: 128px;
|
20 | left: 50%;
|
21 | margin-left: -6px;
|
22 | border-left: 10px solid transparent;
|
23 | border-right: 10px solid transparent;
|
24 | border-bottom: 12px solid white;
|
25 | }
|
26 | `;
|
27 |
|
28 | export const BoxColor = styled.div<{color: string}>`
|
29 | height: 140px;
|
30 | background-color: ${({ color }) => color};
|
31 | transition: 0.6s;
|
32 | color: white;
|
33 | display: flex;
|
34 | align-items: center;
|
35 | justify-content: center;
|
36 | font-size: ${Sizes.s4}px;
|
37 | `;
|
38 |
|
39 | export const GridColors = styled.div`
|
40 | padding: ${Sizes.s3}px ${Sizes.s5}px;
|
41 | display: grid;
|
42 | grid-template-columns: repeat(5, 31px);
|
43 | grid-row-gap: ${Sizes.s3}px;
|
44 | justify-content: space-between;
|
45 | `;
|
46 |
|
47 | export const ColumnColor = styled.button.attrs({
|
48 | type: 'button',
|
49 | })<{color: string}>`
|
50 | width: 31px;
|
51 | height: 31px;
|
52 | background-color: ${({ color }) => color};
|
53 | border: 0 none;
|
54 | cursor: pointer;
|
55 | `;
|
56 |
|
57 | export const InputColor = styled.div`
|
58 | background-color: ${Colors.heaven};
|
59 | width: 130px;
|
60 | margin: 0 auto ${Sizes.s3}px;
|
61 | padding: ${Sizes.s2}px;
|
62 |
|
63 | .input {
|
64 | width: 100%;
|
65 | color: ${Colors.codGray};
|
66 | border: 0 none;
|
67 | border-bottom: 1px solid;
|
68 | background-color: inherit;
|
69 | outline: 0 none;
|
70 | font-family: ${TextHelper.fontVariant('medium')};
|
71 | }
|
72 | `;
|
73 |
|
74 | export const Check = styled.div`
|
75 | display: inline-block;
|
76 | &:after {
|
77 | content: '';
|
78 | display: block;
|
79 | width: 12px;
|
80 | height: 24px;
|
81 | border: solid white;
|
82 | border-width: 0 2px 2px 0;
|
83 | transform: rotate(45deg);
|
84 | }
|
85 | `;
|