-
Notifications
You must be signed in to change notification settings - Fork 0
/
colorex.css
92 lines (79 loc) · 2.86 KB
/
colorex.css
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
.colorex {
--border-width: 2px;
--border-color: lightgrey;
--selector-border-color: white;
--space-between: 16px;
--gradient-selector-size: 30px;
--gradient-size: 300px;
--picker-selector-size: 14px;
--picker-size: 40px;
--alpha-background: #eeeeee;
display: flex;
}
.colorex, .colorex::after, .colorex::before,
.colorex *, .colorex *::after, .colorex *::before {
box-sizing: initial;
}
.colorex.column {
flex-direction: column;
}
.colorex:not(.column) {
flex-direction: row;
}
.colorex .rainbow, .colorex .gradient, .colorex .alpha {
position: relative;
border: var(--border-width) solid var(--border-color);
margin: calc(var(--space-between) / 2);
}
.colorex .selector {
position: absolute;
border: var(--border-width) solid var(--selector-border-color);
-webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
-moz-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
transition: left 0.2s ease, top 0.2s ease;
z-index: 1;
}
.colorex .gradient {
width: var(--gradient-size);
height: var(--gradient-size);
}
.colorex .gradient .selector {
width: var(--gradient-selector-size);
height: var(--gradient-selector-size);
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 2;
}
.colorex .rainbow:not(.horizontal),
.colorex .alpha:not(.horizontal) {
width: var(--picker-size);
height: var(--gradient-size);
}
.colorex .rainbow.horizontal,
.colorex .alpha.horizontal {
width: var(--gradient-size);
height: var(--picker-size);
}
.colorex .rainbow:not(.horizontal) .selector,
.colorex .alpha:not(.horizontal) .selector {
width: calc(100% + var(--border-width) + var(--border-width));
height: var(--picker-selector-size);
-webkit-transform: translate(calc(0px - var(--border-width) - var(--border-width)), -50%);
-moz-transform: translate(calc(0px - var(--border-width) - var(--border-width)), -50%);
transform: translate(calc(0px - var(--border-width) - var(--border-width)), -50%);
}
.colorex .rainbow.horizontal .selector,
.colorex .alpha.horizontal .selector {
height: calc(100% + var(--border-width) + var(--border-width));
width: var(--picker-selector-size);
top: 0;
-webkit-transform: translate(-50%, calc(0px - var(--border-width) - var(--border-width)));
-moz-transform: translate(-50%, calc(0px - var(--border-width) - var(--border-width)));
transform: translate(-50%, calc(0px - var(--border-width) - var(--border-width)));
}
.colorex .alpha canvas {
background-color: var(--alpha-background);
}