├── .csscomb.json
├── .gitignore
├── README.md
├── build
├── js
│ ├── colors.js
│ └── switcher.js
└── sass
│ ├── colornip.sass
│ └── colornip
│ ├── _colors.sass
│ ├── _switcher.sass
│ └── _variables.sass
├── css
├── colornip.css
├── colornip.min.css
└── theme-color
│ ├── theme-blue.css
│ ├── theme-green.css
│ ├── theme-light.css
│ ├── theme-orange.css
│ └── theme-pink.css
├── gulpfile.js
├── index.html
├── js
├── colornip.js
└── colornip.min.js
└── package.json
/.csscomb.json:
--------------------------------------------------------------------------------
1 | {
2 | "exclude": [
3 | ".git/**",
4 | "node_modules/**",
5 | "bower_components/**"
6 | ],
7 |
8 | "remove-empty-rulesets": true,
9 | "always-semicolon": true,
10 | "color-case": "lower",
11 | "block-indent": " ",
12 | "color-shorthand": true,
13 | "eof-newline": true,
14 | "leading-zero": false,
15 | "quotes": "double",
16 | "sort-order-fallback": "abc",
17 | "space-before-colon": "",
18 | "space-after-colon": " ",
19 | "space-before-combinator": " ",
20 | "space-after-combinator": " ",
21 | "space-between-declarations": "\n",
22 | "space-before-opening-brace": " ",
23 | "space-after-opening-brace": "\n",
24 | "space-after-selector-delimiter": "\n",
25 | "space-before-selector-delimiter": "",
26 | "space-before-closing-brace": "\n",
27 | "strip-spaces": true,
28 | "tab-size": true,
29 | "unitless-zero": true,
30 | "vendor-prefix-align": true,
31 |
32 | "sort-order": [
33 | [
34 | "position",
35 | "z-index",
36 | "top",
37 | "right",
38 | "bottom",
39 | "left"
40 | ],
41 | [
42 | "display",
43 | "visibility",
44 | "float",
45 | "clear",
46 | "overflow",
47 | "overflow-x",
48 | "overflow-y",
49 | "-ms-overflow-x",
50 | "-ms-overflow-y",
51 | "-webkit-overflow-scrolling",
52 | "clip",
53 | "zoom",
54 | "flex-direction",
55 | "flex-order",
56 | "flex-pack",
57 | "flex-align",
58 | "flex"
59 | ],
60 | [
61 | "-webkit-box-sizing",
62 | "-moz-box-sizing",
63 | "box-sizing",
64 | "width",
65 | "min-width",
66 | "max-width",
67 | "height",
68 | "min-height",
69 | "max-height",
70 | "margin",
71 | "margin-top",
72 | "margin-right",
73 | "margin-bottom",
74 | "margin-left",
75 | "padding",
76 | "padding-top",
77 | "padding-right",
78 | "padding-bottom",
79 | "padding-left"
80 | ],
81 | [
82 | "table-layout",
83 | "empty-cells",
84 | "caption-side",
85 | "border-spacing",
86 | "border-collapse",
87 | "list-style",
88 | "list-style-position",
89 | "list-style-type",
90 | "list-style-image"
91 | ],
92 | [
93 | "content",
94 | "quotes",
95 | "counter-reset",
96 | "counter-increment",
97 | "resize",
98 | "cursor",
99 | "-webkit-user-select",
100 | "-moz-user-select",
101 | "-ms-user-select",
102 | "user-select",
103 | "nav-index",
104 | "nav-up",
105 | "nav-right",
106 | "nav-down",
107 | "nav-left",
108 | "-webkit-transition",
109 | "-moz-transition",
110 | "-ms-transition",
111 | "-o-transition",
112 | "transition",
113 | "-webkit-transition-delay",
114 | "-moz-transition-delay",
115 | "-ms-transition-delay",
116 | "-o-transition-delay",
117 | "transition-delay",
118 | "-webkit-transition-timing-function",
119 | "-moz-transition-timing-function",
120 | "-ms-transition-timing-function",
121 | "-o-transition-timing-function",
122 | "transition-timing-function",
123 | "-webkit-transition-duration",
124 | "-moz-transition-duration",
125 | "-ms-transition-duration",
126 | "-o-transition-duration",
127 | "transition-duration",
128 | "-webkit-transition-property",
129 | "-moz-transition-property",
130 | "-ms-transition-property",
131 | "-o-transition-property",
132 | "transition-property",
133 | "-webkit-transform",
134 | "-moz-transform",
135 | "-ms-transform",
136 | "-o-transform",
137 | "transform",
138 | "-webkit-transform-origin",
139 | "-moz-transform-origin",
140 | "-ms-transform-origin",
141 | "-o-transform-origin",
142 | "transform-origin",
143 | "-webkit-animation",
144 | "-moz-animation",
145 | "-ms-animation",
146 | "-o-animation",
147 | "animation",
148 | "-webkit-animation-name",
149 | "-moz-animation-name",
150 | "-ms-animation-name",
151 | "-o-animation-name",
152 | "animation-name",
153 | "-webkit-animation-duration",
154 | "-moz-animation-duration",
155 | "-ms-animation-duration",
156 | "-o-animation-duration",
157 | "animation-duration",
158 | "-webkit-animation-play-state",
159 | "-moz-animation-play-state",
160 | "-ms-animation-play-state",
161 | "-o-animation-play-state",
162 | "animation-play-state",
163 | "-webkit-animation-timing-function",
164 | "-moz-animation-timing-function",
165 | "-ms-animation-timing-function",
166 | "-o-animation-timing-function",
167 | "animation-timing-function",
168 | "-webkit-animation-delay",
169 | "-moz-animation-delay",
170 | "-ms-animation-delay",
171 | "-o-animation-delay",
172 | "animation-delay",
173 | "-webkit-animation-iteration-count",
174 | "-moz-animation-iteration-count",
175 | "-ms-animation-iteration-count",
176 | "-o-animation-iteration-count",
177 | "animation-iteration-count",
178 | "-webkit-animation-direction",
179 | "-moz-animation-direction",
180 | "-ms-animation-direction",
181 | "-o-animation-direction",
182 | "animation-direction",
183 | "text-align",
184 | "-webkit-text-align-last",
185 | "-moz-text-align-last",
186 | "-ms-text-align-last",
187 | "text-align-last",
188 | "vertical-align",
189 | "white-space",
190 | "text-decoration",
191 | "text-emphasis",
192 | "text-emphasis-color",
193 | "text-emphasis-style",
194 | "text-emphasis-position",
195 | "text-indent",
196 | "-ms-text-justify",
197 | "text-justify",
198 | "text-transform",
199 | "letter-spacing",
200 | "word-spacing",
201 | "-ms-writing-mode",
202 | "text-outline",
203 | "text-transform",
204 | "text-wrap",
205 | "text-overflow",
206 | "-ms-text-overflow",
207 | "text-overflow-ellipsis",
208 | "text-overflow-mode",
209 | "-ms-word-wrap",
210 | "word-wrap",
211 | "word-break",
212 | "-ms-word-break",
213 | "-moz-tab-size",
214 | "-o-tab-size",
215 | "tab-size",
216 | "-webkit-hyphens",
217 | "-moz-hyphens",
218 | "hyphens",
219 | "pointer-events"
220 | ],
221 | [
222 | "opacity",
223 | "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
224 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
225 | "-ms-interpolation-mode",
226 | "color",
227 | "border",
228 | "border-collapse",
229 | "border-width",
230 | "border-style",
231 | "border-color",
232 | "border-top",
233 | "border-top-width",
234 | "border-top-style",
235 | "border-top-color",
236 | "border-right",
237 | "border-right-width",
238 | "border-right-style",
239 | "border-right-color",
240 | "border-bottom",
241 | "border-bottom-width",
242 | "border-bottom-style",
243 | "border-bottom-color",
244 | "border-left",
245 | "border-left-width",
246 | "border-left-style",
247 | "border-left-color",
248 | "-webkit-border-radius",
249 | "-moz-border-radius",
250 | "border-radius",
251 | "-webkit-border-top-left-radius",
252 | "-moz-border-radius-topleft",
253 | "border-top-left-radius",
254 | "-webkit-border-top-right-radius",
255 | "-moz-border-radius-topright",
256 | "border-top-right-radius",
257 | "-webkit-border-bottom-right-radius",
258 | "-moz-border-radius-bottomright",
259 | "border-bottom-right-radius",
260 | "-webkit-border-bottom-left-radius",
261 | "-moz-border-radius-bottomleft",
262 | "border-bottom-left-radius",
263 | "-webkit-border-image",
264 | "-moz-border-image",
265 | "-o-border-image",
266 | "border-image",
267 | "-webkit-border-image-source",
268 | "-moz-border-image-source",
269 | "-o-border-image-source",
270 | "border-image-source",
271 | "-webkit-border-image-slice",
272 | "-moz-border-image-slice",
273 | "-o-border-image-slice",
274 | "border-image-slice",
275 | "-webkit-border-image-width",
276 | "-moz-border-image-width",
277 | "-o-border-image-width",
278 | "border-image-width",
279 | "-webkit-border-image-outset",
280 | "-moz-border-image-outset",
281 | "-o-border-image-outset",
282 | "border-image-outset",
283 | "-webkit-border-image-repeat",
284 | "-moz-border-image-repeat",
285 | "-o-border-image-repeat",
286 | "border-image-repeat",
287 | "outline",
288 | "outline-width",
289 | "outline-style",
290 | "outline-color",
291 | "outline-offset",
292 | "background",
293 | "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
294 | "background-color",
295 | "background-image",
296 | "background-repeat",
297 | "background-attachment",
298 | "background-position",
299 | "background-position-x",
300 | "-ms-background-position-x",
301 | "background-position-y",
302 | "-ms-background-position-y",
303 | "-webkit-background-clip",
304 | "-moz-background-clip",
305 | "background-clip",
306 | "background-origin",
307 | "-webkit-background-size",
308 | "-moz-background-size",
309 | "-o-background-size",
310 | "background-size",
311 | "box-decoration-break",
312 | "-webkit-box-shadow",
313 | "-moz-box-shadow",
314 | "box-shadow",
315 | "filter:progid:DXImageTransform.Microsoft.gradient",
316 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
317 | "text-shadow"
318 | ],
319 | [
320 | "font",
321 | "font-family",
322 | "font-size",
323 | "font-weight",
324 | "font-style",
325 | "font-variant",
326 | "font-size-adjust",
327 | "font-stretch",
328 | "font-effect",
329 | "font-emphasize",
330 | "font-emphasize-position",
331 | "font-emphasize-style",
332 | "font-smooth",
333 | "line-height"
334 | ]
335 | ]
336 | }
337 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Created by https://www.gitignore.io/api/node,sass,windows,osx,linux
2 |
3 | ### Node ###
4 | # Logs
5 | logs
6 | *.log
7 | npm-debug.log*
8 |
9 | # Runtime data
10 | pids
11 | *.pid
12 | *.seed
13 |
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 |
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 |
20 | # nyc test coverage
21 | .nyc_output
22 |
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 |
26 | # node-waf configuration
27 | .lock-wscript
28 |
29 | # Compiled binary addons (http://nodejs.org/api/addons.html)
30 | build/Release
31 |
32 | # Dependency directories
33 | node_modules
34 | jspm_packages
35 |
36 | # Optional npm cache directory
37 | .npm
38 |
39 | # Optional REPL history
40 | .node_repl_history
41 |
42 |
43 | ### Sass ###
44 | .sass-cache/
45 | *.css.map
46 |
47 |
48 | ### Windows ###
49 | # Windows image file caches
50 | Thumbs.db
51 | ehthumbs.db
52 |
53 | # Folder config file
54 | Desktop.ini
55 |
56 | # Recycle Bin used on file shares
57 | $RECYCLE.BIN/
58 |
59 | # Windows Installer files
60 | *.cab
61 | *.msi
62 | *.msm
63 | *.msp
64 |
65 | # Windows shortcuts
66 | *.lnk
67 |
68 |
69 | ### OSX ###
70 | *.DS_Store
71 | .AppleDouble
72 | .LSOverride
73 |
74 | # Icon must end with two \r
75 | Icon
76 |
77 |
78 | # Thumbnails
79 | ._*
80 |
81 | # Files that might appear in the root of a volume
82 | .DocumentRevisions-V100
83 | .fseventsd
84 | .Spotlight-V100
85 | .TemporaryItems
86 | .Trashes
87 | .VolumeIcon.icns
88 | .com.apple.timemachine.donotpresent
89 |
90 | # Directories potentially created on remote AFP share
91 | .AppleDB
92 | .AppleDesktop
93 | Network Trash Folder
94 | Temporary Items
95 | .apdisk
96 |
97 |
98 | ### Linux ###
99 | *~
100 |
101 | # temporary files which can be created if a process still has a handle open of a deleted file
102 | .fuse_hidden*
103 |
104 | # KDE directory preferences
105 | .directory
106 |
107 | # Linux trash folder which might appear on any partition or disk
108 | .Trash-*
109 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Colornip
2 |
3 | Colornip is an pukka-easiest color-switcher on planet. Simple, small, fast, pure JavaScript. Fun.
4 |
5 | ### Demo
6 | https://zafree.github.io/colornip
7 |
8 | ![Colornip Demo][demo]
9 |
10 | [demo]: https://d13yacurqjgara.cloudfront.net/users/449253/screenshots/2998048/colornip.gif
11 |
12 | ### How
13 |
14 | 1. Link css files. (Be careful about `id="theme"`. Don't change it)
15 |
16 | ```html
17 |
18 |
19 | ```
20 |
21 | 2. Add `
25 | ```
26 |
27 | 3. Set `data-dir` path of your theme directory for `id="colors"`
28 |
29 | ```html
30 |
33 | ```
34 |
35 | 4. Set `data-scheme` and `data-color` for each `li`
36 |
37 | ```html
38 |
39 |
40 |
41 |
42 |
43 |
44 | ...
45 |
46 | ```
47 |
48 | ### Why
49 |
50 | It's the best way to change theme-color. No dependencies. Pure JavaScript. Nice switcher animation effect. Better user experience. Happy client. Wow and wow.
51 |
52 |
53 | ### Where
54 |
55 | Colornip should (in theory) work in all relevant browsers (ie6+). If not, create an issue! Thanks!
56 |
57 |
58 | ### Who
59 |
60 | Written by Zafree, made better by you.
61 |
--------------------------------------------------------------------------------
/build/js/colors.js:
--------------------------------------------------------------------------------
1 | ;(function() {
2 | 'use strict';
3 |
4 |
5 | // take care
6 | // you can set theme/file extension.
7 | // e.g. ".css" or ".min.css"
8 | var extension = ".css";
9 |
10 |
11 | // get theme
12 | // get the individual color
13 | var theme = document.getElementById("theme"),
14 | href = theme.getAttribute("href"),
15 | ul = document.getElementById("colors"),
16 | lis = ul.children,
17 | dir = ul.dataset.dir;
18 |
19 |
20 | // Create new link
21 | // for smooth loading
22 | var createLinkForSmoothLoading;
23 | createLinkForSmoothLoading = document.createElement("link");
24 | createLinkForSmoothLoading.rel = "stylesheet";
25 | createLinkForSmoothLoading.id = "themeMain";
26 | createLinkForSmoothLoading.href = href;
27 | document.head.appendChild(createLinkForSmoothLoading);
28 |
29 |
30 | // here is the fun part
31 | // get data scheme and color from DOM
32 | // and set theme in new created link
33 | Array.prototype.forEach.call(lis, function(li){
34 | var scheme = li.dataset.scheme;
35 | var color = li.dataset.color;
36 | li.setAttribute('style', 'background-color:'+color);
37 | li.addEventListener('click', function(e){
38 | var color = this.dataset.color;
39 | var scheme = this.dataset.scheme;
40 | var cssPath = dir+scheme+extension;
41 | theme.setAttribute('href', cssPath);
42 | theme.onload = function(){
43 | themeMain.setAttribute('href', cssPath);
44 | };
45 | });
46 | });
47 |
48 | })();
49 |
--------------------------------------------------------------------------------
/build/js/switcher.js:
--------------------------------------------------------------------------------
1 | ;(function() {
2 | 'use strict';
3 |
4 |
5 | // get Switcher
6 | // add click event
7 | // toggle class Switcher--show
8 | var switcherControl = document.getElementById("Switcher__control"),
9 | switcherControlParent = switcherControl.parentNode;
10 |
11 | switcherControl.addEventListener('click', function(e){
12 | switcherControlParent.classList.toggle('Switcher--show');
13 | });
14 |
15 |
16 | // outside click event
17 | // click event to an element that is outside the content area
18 | // Then, inside the event, check whether the target is the content area
19 | // Or a direct or indirect child of the content area.
20 | document.body.addEventListener('click', function(e) {
21 | var target = e.target;
22 | if (target !== switcherControlParent && !isChildOff(target, switcherControlParent)) {
23 | switcherControlParent.classList.remove('Switcher--show');
24 | }
25 | });
26 |
27 | function isChildOff(child, parent) {
28 | if (child.parentNode === parent) {
29 | return true;
30 | } else if (child.parentNode === null) {
31 | return false;
32 | } else {
33 | return isChildOff(child.parentNode, parent);
34 | }
35 | }
36 |
37 | })();
38 |
--------------------------------------------------------------------------------
/build/sass/colornip.sass:
--------------------------------------------------------------------------------
1 | @import "colornip/variables"
2 | @import "colornip/colors"
3 | @import "colornip/switcher"
4 |
--------------------------------------------------------------------------------
/build/sass/colornip/_colors.sass:
--------------------------------------------------------------------------------
1 | #colors
2 | li
3 | display: inline-block
4 | height: 30px
5 | width: 30px
6 | cursor: pointer
7 | border: 1px solid rgba($black, .01)
8 |
--------------------------------------------------------------------------------
/build/sass/colornip/_switcher.sass:
--------------------------------------------------------------------------------
1 | .Switcher
2 | font-family: $family-sans-serif
3 | font-size: $size-base
4 | line-height: $line-height
5 | position: fixed
6 | top: 10%
7 | right: 0
8 | width: 208px
9 | margin-right: -208px
10 | padding: 20px
11 | background-color: $white
12 | border: 1px solid rgba(0, 0, 0, .02)
13 | box-shadow: 0 0 15px rgba(0, 0, 0, 0)
14 | z-index: 9999
15 | transition: none $speed*3 $easing
16 | transition-property: margin-right, box-shadow
17 | &--show
18 | margin-right: 0
19 | box-shadow: 0 0 15px rgba(0, 0, 0, .15)
20 |
21 | &::before
22 | content: ""
23 | position: absolute
24 | z-index: 9998
25 | height: 100%
26 | width: 15px
27 | left: 0
28 | top: 0
29 | margin-left: 0
30 | background-color: $white
31 | &__control
32 | cursor: pointer
33 | position: absolute
34 | height: 50px
35 | width: 50px
36 | left: 0
37 | margin-left: -50px
38 | background-color: $white
39 | border: 1px solid rgba(0, 0, 0, .02)
40 | box-shadow: 0 0 10px rgba(0, 0, 0, .15)
41 | border-radius: 3px 0 0 3px
42 | padding: 0
43 | border-right-color: transparent
44 | background-image: url(https://d13yacurqjgara.cloudfront.net/users/729829/screenshots/2340395/colorhunt.gif)
45 | background-repeat: no-repeat
46 | background-size: 96px 72px
47 | background-position: -24px -14px
48 | outline: none
49 | touch-action: manipulation
50 |
--------------------------------------------------------------------------------
/build/sass/colornip/_variables.sass:
--------------------------------------------------------------------------------
1 | // Colors
2 |
3 | $black: #000 !default
4 | $white: #fff !default
5 |
6 |
7 | // Typography
8 |
9 | $family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
10 | $size-base: 14px !default
11 | $line-height: 1.428571428571429
12 |
13 |
14 | // Miscellaneous
15 |
16 | $easing: ease-out !default
17 | $speed: 86ms !default
18 |
--------------------------------------------------------------------------------
/css/colornip.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Colornip v1.0.0 - Colornip is an pukka-easiest color-switcher on planet.
3 | * @link https://zafree.github.io/colornip
4 | * @copyright 2015-2016 Zafree
5 | * @license MIT
6 | */
7 | #colors li {
8 | display: inline-block;
9 |
10 | width: 30px;
11 | height: 30px;
12 |
13 | cursor: pointer;
14 |
15 | border: 1px solid rgba(0, 0, 0, .01);
16 | }
17 |
18 | .Switcher {
19 | position: fixed;
20 | z-index: 9999;
21 | top: 10%;
22 | right: 0;
23 |
24 | width: 208px;
25 | margin-right: -208px;
26 | padding: 20px;
27 |
28 | -webkit-transition: none 258ms ease-out;
29 | transition: none 258ms ease-out;
30 | -webkit-transition-property: margin-right, -webkit-box-shadow;
31 | transition-property: margin-right, -webkit-box-shadow;
32 | transition-property: margin-right, box-shadow;
33 | transition-property: margin-right, box-shadow, -webkit-box-shadow;
34 |
35 | border: 1px solid rgba(0, 0, 0, .02);
36 | background-color: #fff;
37 | -webkit-box-shadow: 0 0 15px transparent;
38 | box-shadow: 0 0 15px transparent;
39 |
40 | font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
41 | font-size: 14px;
42 | line-height: 1.42857;
43 | }
44 | .Switcher--show {
45 | margin-right: 0;
46 |
47 | -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .15);
48 | box-shadow: 0 0 15px rgba(0, 0, 0, .15);
49 | }
50 | .Switcher::before {
51 | position: absolute;
52 | z-index: 9998;
53 | top: 0;
54 | left: 0;
55 |
56 | width: 15px;
57 | height: 100%;
58 | margin-left: 0;
59 |
60 | content: "";
61 |
62 | background-color: #fff;
63 | }
64 | .Switcher__control {
65 | position: absolute;
66 | left: 0;
67 |
68 | width: 50px;
69 | height: 50px;
70 | margin-left: -50px;
71 | padding: 0;
72 |
73 | cursor: pointer;
74 |
75 | border: 1px solid rgba(0, 0, 0, .02);
76 | border-right-color: transparent;
77 | -webkit-border-radius: 3px 0 0 3px;
78 | border-radius: 3px 0 0 3px;
79 | outline: none;
80 | background-color: #fff;
81 | background-image: url(https://d13yacurqjgara.cloudfront.net/users/729829/screenshots/2340395/colorhunt.gif);
82 | background-repeat: no-repeat;
83 | background-position: -24px -14px;
84 | -webkit-background-size: 96px 72px;
85 | background-size: 96px 72px;
86 | -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .15);
87 | box-shadow: 0 0 10px rgba(0, 0, 0, .15);
88 |
89 | -ms-touch-action: manipulation;
90 | touch-action: manipulation;
91 | }
92 |
--------------------------------------------------------------------------------
/css/colornip.min.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Colornip v1.0.0 - Colornip is an pukka-easiest color-switcher on planet.
3 | * @link https://zafree.github.io/colornip
4 | * @copyright 2015-2016 Zafree
5 | * @license MIT
6 | */
7 | #colors li{display:inline-block;width:30px;height:30px;cursor:pointer;border:1px solid rgba(0,0,0,.01)}.Switcher{position:fixed;z-index:9999;top:10%;right:0;width:208px;margin-right:-208px;padding:20px;-webkit-transition:none 258ms ease-out;transition:none 258ms ease-out;-webkit-transition-property:margin-right,-webkit-box-shadow;transition-property:margin-right,box-shadow;transition-property:margin-right,box-shadow,-webkit-box-shadow;border:1px solid rgba(0,0,0,.02);background-color:#fff;-webkit-box-shadow:0 0 15px transparent;box-shadow:0 0 15px transparent;font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-size:14px;line-height:1.42857}.Switcher--show{margin-right:0;-webkit-box-shadow:0 0 15px rgba(0,0,0,.15);box-shadow:0 0 15px rgba(0,0,0,.15)}.Switcher::before,.Switcher__control{position:absolute;left:0;background-color:#fff}.Switcher::before{z-index:9998;top:0;content:"";width:15px;height:100%;margin-left:0}.Switcher__control{width:50px;height:50px;margin-left:-50px;padding:0;cursor:pointer;border:1px solid rgba(0,0,0,.02);border-right-color:transparent;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;outline:none;background-image:url(https://d13yacurqjgara.cloudfront.net/users/729829/screenshots/2340395/colorhunt.gif);background-repeat:no-repeat;background-position:-24px -14px;-webkit-background-size:96px 72px;background-size:96px 72px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.15);box-shadow:0 0 10px rgba(0,0,0,.15);-ms-touch-action:manipulation;touch-action:manipulation}
--------------------------------------------------------------------------------
/css/theme-color/theme-blue.css:
--------------------------------------------------------------------------------
1 | .Placeholder__avatar,
2 | .Placeholder__metaInline::before,
3 | .Placeholder__metaInline::after,
4 | .Placeholder__inline,
5 | .Placeholder__img {
6 | background-color: #d3f8ff;
7 | }
8 |
--------------------------------------------------------------------------------
/css/theme-color/theme-green.css:
--------------------------------------------------------------------------------
1 | .Placeholder__avatar,
2 | .Placeholder__metaInline::before,
3 | .Placeholder__metaInline::after,
4 | .Placeholder__inline,
5 | .Placeholder__img {
6 | background-color: #d3ffd2;
7 | }
8 |
--------------------------------------------------------------------------------
/css/theme-color/theme-light.css:
--------------------------------------------------------------------------------
1 | .Placeholder__avatar,
2 | .Placeholder__metaInline::before,
3 | .Placeholder__metaInline::after,
4 | .Placeholder__inline,
5 | .Placeholder__img {
6 | background-color: #f2f2f2;
7 | }
8 |
--------------------------------------------------------------------------------
/css/theme-color/theme-orange.css:
--------------------------------------------------------------------------------
1 | .Placeholder__avatar,
2 | .Placeholder__metaInline::before,
3 | .Placeholder__metaInline::after,
4 | .Placeholder__inline,
5 | .Placeholder__img {
6 | background-color: #fff4d3;
7 | }
8 |
--------------------------------------------------------------------------------
/css/theme-color/theme-pink.css:
--------------------------------------------------------------------------------
1 | .Placeholder__avatar,
2 | .Placeholder__metaInline::before,
3 | .Placeholder__metaInline::after,
4 | .Placeholder__inline,
5 | .Placeholder__img {
6 | background-color: #ffe4f7;
7 | }
8 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp'),
2 | autoprefixer = require('gulp-autoprefixer'),
3 | concat = require('gulp-concat'),
4 | csscomb = require('gulp-csscomb'),
5 | csso = require('gulp-csso'),
6 | header = require('gulp-header'),
7 | plumber = require('gulp-plumber'),
8 | rename = require('gulp-rename'),
9 | sass = require('gulp-ruby-sass'),
10 | uglify = require('gulp-uglify'),
11 | browserSync = require('browser-sync'),
12 | reload = browserSync.reload;
13 |
14 | var pkg = require('./package.json');
15 | var banner = ['/**',
16 | ' * Colornip v<%= pkg.version %> - <%= pkg.description %>',
17 | ' * @link <%= pkg.homepage %>',
18 | ' * @copyright 2015-<%= new Date().getFullYear() %> <%= pkg.author %>',
19 | ' * @license <%= pkg.license %>',
20 | ' */',
21 | ''].join('\n');
22 |
23 | var helpers = [ 'build/js/colors.js',
24 | 'build/js/switcher.js'];
25 |
26 | // js
27 | gulp.task('js', function(){
28 | gulp.src(helpers)
29 | .pipe(plumber())
30 | .pipe(concat(pkg.name+'.js'))
31 | .pipe(header(banner, { pkg : pkg } ))
32 | .pipe(gulp.dest('js'))
33 | .pipe(uglify())
34 | .pipe(rename({suffix: '.min'}))
35 | .pipe(header(banner, { pkg : pkg } ))
36 | .pipe(gulp.dest('js'))
37 | .pipe(browserSync.stream());
38 | });
39 |
40 | // sass
41 | gulp.task('sass', function(){
42 | return sass('build/sass/'+pkg.name+'.sass', { sourcemap: false })
43 | .pipe(plumber())
44 | .pipe(autoprefixer({
45 | browsers: ['Android >= 2.1',
46 | 'Chrome >= 21',
47 | 'Edge >= 12',
48 | 'Explorer >= 7',
49 | 'Firefox >= 17',
50 | 'Opera >= 12.1',
51 | 'Safari >= 6.0'],
52 | cascade: false}))
53 | .pipe(csscomb())
54 | .pipe(rename({basename: pkg.name}))
55 | .pipe(header(banner, { pkg : pkg } ))
56 | .pipe(gulp.dest('css'))
57 | .pipe(browserSync.stream())
58 | .pipe(csso())
59 | .pipe(rename({suffix: '.min'}))
60 | .pipe(header(banner, { pkg : pkg } ))
61 | .pipe(gulp.dest('css'))
62 | .pipe(browserSync.stream());
63 | });
64 |
65 | // serve
66 | gulp.task('serve', function () {
67 | browserSync.init({
68 | server: {
69 | baseDir: "."
70 | },
71 | notify: false
72 | });
73 | });
74 |
75 | // Watch
76 | gulp.task('watch', function(){
77 | gulp.watch('build/js/*.js', ['js']);
78 | gulp.watch('build/sass/**/*', ['sass']);
79 | gulp.watch("*.html").on("change", reload);
80 | });
81 |
82 | gulp.task('build', ['sass', 'js']);
83 | gulp.task('default', ['sass', 'js', 'serve', 'watch']);
84 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Colornip 2016
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
Change Color
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
35 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
51 |
55 |
59 |
65 |
70 |
73 |
78 |