Skip to content

Commit 9f5b40a

Browse files
khagwalkhagwal
committed
Hanged Distro
1 parent 0f9fd1e commit 9f5b40a

9 files changed

+284
-5
lines changed

‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ coolHue gradients palette is **rendered by JavaScript Object** which makes it ve
99

1010
# Installation
1111
You can create your very own personalized collection of Gradient Palette with coolHue -
12-
1. Download the latest [coolHue v1.2.1 release archive](http://bit.ly/coolhue-v121) from the repository's release section.
12+
1. Download the latest [coolHue release archive](http://bit.ly/coolhue-releases) from the repository's release section.
1313
2. Unpack the archive and drag `index.html` in the browser, to check out the default gradient palette.
1414
3. All the gradients which are visible in the browser by default are rendered by `colorData` Javascript Object.
1515
4. You just need to update the `colorData` Object (array) to create your very own gradient palette. So, Open `index.html` in the text editor and update the color codes.
@@ -27,10 +27,10 @@ You can grab the complete dev build using the **`bower`** package manager via fo
2727
:heavy_exclamation_mark: Installation command mentioned above needs bower to be pre installed on your local machine.
2828

2929
## Photoshop Gradient Palette
30-
You can download the [coolHue Gradient Palette for Photoshop](https://github.com/webkul/coolhue/blob/master/distro/ps_coolHue.grd).
30+
You can download the [coolHue Gradient Palette for Photoshop](http://bit.ly/coolhue-ps).
3131

3232
## Sketch App Gradient Palette
33-
You can download the [coolHue Gradient Palette for Sketch App](https://github.com/webkul/coolhue/blob/master/distro/coolHue.sketch).
33+
You can download the [coolHue Gradient Palette for Sketch App](http://bit.ly/coolhue-sketch).
3434

3535
# Credits
3636
Crafted with :heart: by [UVdesk App](https://www.uvdesk.com/)

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "coolhue",
3-
"version": "1.2.1",
3+
"version": "1.3.0",
44
"homepage": "https://webkul.github.io/coolhue/",
55
"authors": [
66
"Nitish Kumar <[email protected]>"

‎css/style.css

+108
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,114 @@ p.ch-copyright {
233233
;
234234
}
235235

236+
.ch-distro {
237+
position: fixed;
238+
right: 25px;
239+
bottom: 25px;
240+
min-width: 200px;
241+
max-width: 100%;
242+
}
243+
244+
.ch-distro-icon {
245+
width: 50px;
246+
height: 50px;
247+
border-radius: 50%;
248+
position: absolute;
249+
right: 0px;
250+
bottom: 0px;
251+
background-color: #FFFFFF;
252+
background-image: url("../images/icon-distro.svg");
253+
background-repeat: no-repeat;
254+
background-position: left center;
255+
box-shadow: 0px 10px 27px 3px rgba(0, 0, 0, 0.15), 0px 1px 4px 0px rgba(0, 0, 0, 0.03);
256+
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
257+
transform: translateY(0px);
258+
cursor: pointer;
259+
}
260+
261+
.ch-distro-icon-active,
262+
.ch-distro-icon:hover {
263+
box-shadow: 0px 25px 30px 5px rgba(0, 0, 0, 0.1), 0px 5px 20px 5px rgba(0, 0, 0, 0.03);
264+
transform: translateY(-6px);
265+
}
266+
267+
.ch-distro-icon-active{
268+
background-position: right center;
269+
}
270+
271+
.ch-distro-wrapper {
272+
left: 0px;
273+
right: 0px;
274+
bottom: 70px;
275+
position: absolute;
276+
background-color: #FFFFFF;
277+
box-shadow: 0px 0px 51px 0px rgba(0, 0, 0, 0.08), 0px 6px 18px 0px rgba(0, 0, 0, 0.05);
278+
border-radius: 8px;
279+
padding: 15px;
280+
display: none;
281+
}
282+
283+
.ch-distro-type {
284+
color: #2750C4;
285+
display: block;
286+
padding: 7px 0px;
287+
text-decoration: none;
288+
font-size: 17px;
289+
background-position: left center;
290+
background-repeat: no-repeat;
291+
padding-left: 32px;
292+
}
293+
294+
.ch-distro-type:hover {
295+
text-decoration: underline;
296+
}
297+
298+
.ch-distro-type:nth-child(1) {
299+
background-image: url("../images/icon-sketch.svg");
300+
}
301+
302+
.ch-distro-type:nth-child(2) {
303+
background-image: url("../images/icon-photoshop.svg");
304+
}
305+
306+
.ch-distro-type:nth-child(3) {
307+
background-image: url("../images/icon-customize.svg");
308+
}
309+
310+
.ch-distro-wrapper-flap-up {
311+
animation: flap-up 0.5s cubic-bezier(0.4, 0, 0.2, 1);
312+
}
313+
314+
.ch-distro-wrapper-flap-down{
315+
animation: flap-down 0.5s cubic-bezier(0.4, 0, 0.2, 1);
316+
}
317+
318+
.ch-distro-wrapper-visible{
319+
display: block;
320+
}
321+
322+
@keyframes flap-up {
323+
0% {
324+
opacity: 0;
325+
transform: translateY(25px);
326+
}
327+
100% {
328+
opacity: 1;
329+
transform: translateY(0px);
330+
}
331+
}
332+
333+
@keyframes flap-down {
334+
0% {
335+
opacity: 1;
336+
transform: translateY(0px);
337+
}
338+
100% {
339+
opacity: 0;
340+
transform: translateY(25px);
341+
}
342+
}
343+
236344
@keyframes notify-up {
237345
0% {
238346
opacity: 0;

‎images/icon-customize.svg

+22
Loading

‎images/icon-distro.svg

+13
Loading

‎images/icon-photoshop.svg

+64
Loading

‎images/icon-sketch.svg

+39
Loading

‎index.html

+12
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,18 @@ <h1 class="ch-logo" title="coolhue">coolHue - Color Swatch and Palette</h1>
6565
<div class="ch-separator ch-separator-bottom"></div>
6666
<p class="ch-copyright">&copy; Copyright 2017 Webkul Software, All rights reserved.</p>
6767
</div>
68+
69+
<!--Distro-->
70+
<div class="ch-distro">
71+
<div class="ch-distro-icon"></div>
72+
<div class="ch-distro-wrapper ch-distro-wrapper-flap-up">
73+
<a class="ch-distro-type" href="http://bit.ly/coolhue-sketch" target="_blank">Sketch Palette</a>
74+
<a class="ch-distro-type" href="http://bit.ly/coolhue-ps" target="_blank">Photoshop Palette</a>
75+
<a class="ch-distro-type" href="http://bit.ly/coolhue-dev" target="_blank">Customize Palette</a>
76+
</div>
77+
</div>
78+
<!--//Distro-->
79+
6880
<!--//Footer-->
6981

7082
<!--Notification-->

‎scripts/script.js

+22-1
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ document.addEventListener("DOMContentLoaded", function () {
107107
notifyPlank.removeChild(notify);
108108
}, 5000);
109109
}
110-
110+
111111
//Grab Palette
112112
if (event.target.matches(".ch-grab")) {
113113
var eventColorFrom = event.target.dataset.colorFrom;
@@ -124,4 +124,25 @@ document.addEventListener("DOMContentLoaded", function () {
124124
window.open(canvas.toDataURL());
125125
}
126126
}
127+
128+
//Distro
129+
var chDistroWrapper = document.querySelector(".ch-distro-wrapper");
130+
var chDistroIcon = document.querySelector(".ch-distro-icon");
131+
chDistroIcon.addEventListener("click", function () {
132+
if (this.classList.contains("ch-distro-icon-active")) {
133+
chDistroWrapper.classList.remove("ch-distro-wrapper-flap-up");
134+
chDistroWrapper.classList.add("ch-distro-wrapper-flap-down");
135+
setTimeout(function () {
136+
chDistroIcon.classList.remove("ch-distro-icon-active");
137+
chDistroWrapper.classList.remove("ch-distro-wrapper-visible");
138+
}, 400);
139+
} else {
140+
if (chDistroWrapper.classList.contains("ch-distro-wrapper-flap-down")) {
141+
chDistroWrapper.classList.remove("ch-distro-wrapper-flap-down");
142+
}
143+
chDistroWrapper.classList.add("ch-distro-wrapper-visible");
144+
chDistroWrapper.classList.add("ch-distro-wrapper-flap-up");
145+
this.classList.add("ch-distro-icon-active");
146+
}
147+
});
127148
});

0 commit comments

Comments
 (0)