code_sync 0.6.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (213) hide show
  1. data/.rvmrc +1 -0
  2. data/CNAME +1 -0
  3. data/Gemfile +24 -0
  4. data/Gemfile.lock +117 -0
  5. data/LICENSE.md +22 -0
  6. data/ROADMAP.md +20 -0
  7. data/TODO.md +14 -0
  8. data/bin/codesync +11 -0
  9. data/code_sync.gemspec +30 -0
  10. data/config/routes.rb +26 -0
  11. data/lib/assets/javascripts/canvas.coffee +12 -0
  12. data/lib/assets/javascripts/canvas/editors.coffee +48 -0
  13. data/lib/assets/javascripts/canvas/index.coffee +15 -0
  14. data/lib/assets/javascripts/canvas/layer_controller.coffee +47 -0
  15. data/lib/assets/javascripts/code_sync.coffee +3 -0
  16. data/lib/assets/javascripts/code_sync/backends/gist.coffee +78 -0
  17. data/lib/assets/javascripts/code_sync/client/index.coffee +104 -0
  18. data/lib/assets/javascripts/code_sync/client/util.coffee +61 -0
  19. data/lib/assets/javascripts/code_sync/codemirror.coffee +12 -0
  20. data/lib/assets/javascripts/code_sync/config.js.coffee.erb +38 -0
  21. data/lib/assets/javascripts/code_sync/console/index.coffee +54 -0
  22. data/lib/assets/javascripts/code_sync/console/templates/console.jst.skim +10 -0
  23. data/lib/assets/javascripts/code_sync/dependencies.coffee +6 -0
  24. data/lib/assets/javascripts/code_sync/editor/advanced.coffee +0 -0
  25. data/lib/assets/javascripts/code_sync/editor/datasources/document.coffee +212 -0
  26. data/lib/assets/javascripts/code_sync/editor/datasources/gist_loader.coffee +7 -0
  27. data/lib/assets/javascripts/code_sync/editor/datasources/modes.coffee +117 -0
  28. data/lib/assets/javascripts/code_sync/editor/datasources/project_assets.coffee +14 -0
  29. data/lib/assets/javascripts/code_sync/editor/index.coffee +415 -0
  30. data/lib/assets/javascripts/code_sync/editor/plugins/asset_selector.coffee +106 -0
  31. data/lib/assets/javascripts/code_sync/editor/plugins/color_picker.coffee +83 -0
  32. data/lib/assets/javascripts/code_sync/editor/plugins/document_manager.coffee +55 -0
  33. data/lib/assets/javascripts/code_sync/editor/plugins/document_tabs.coffee +178 -0
  34. data/lib/assets/javascripts/code_sync/editor/plugins/element_sync.coffee +111 -0
  35. data/lib/assets/javascripts/code_sync/editor/plugins/keymap_selector.coffee +44 -0
  36. data/lib/assets/javascripts/code_sync/editor/plugins/mode_selector.coffee +53 -0
  37. data/lib/assets/javascripts/code_sync/editor/plugins/name_input.coffee +44 -0
  38. data/lib/assets/javascripts/code_sync/editor/plugins/preferences.coffee +71 -0
  39. data/lib/assets/javascripts/code_sync/editor/templates/asset_editor.jst.skim +2 -0
  40. data/lib/assets/javascripts/code_sync/editor/templates/asset_selector.jst.skim +5 -0
  41. data/lib/assets/javascripts/code_sync/editor/templates/document_manager_tab.jst.skim +15 -0
  42. data/lib/assets/javascripts/code_sync/editor/templates/element_sync.jst.skim +19 -0
  43. data/lib/assets/javascripts/code_sync/editor/templates/preferences_panel.jst.skim +38 -0
  44. data/lib/assets/javascripts/code_sync/editor/views/asset_selector.coffee +106 -0
  45. data/lib/assets/javascripts/code_sync/editor/views/color_picker.coffee +76 -0
  46. data/lib/assets/javascripts/code_sync/editor/views/document_manager.coffee +176 -0
  47. data/lib/assets/javascripts/code_sync/editor/views/keymap_selector.coffee +37 -0
  48. data/lib/assets/javascripts/code_sync/editor/views/mode_selector.coffee +47 -0
  49. data/lib/assets/javascripts/code_sync/editor/views/name_input.coffee +44 -0
  50. data/lib/assets/javascripts/code_sync/editor/views/preferences.coffee +71 -0
  51. data/lib/assets/javascripts/code_sync/index.coffee +4 -0
  52. data/lib/assets/javascripts/code_sync/reloader.coffee +2 -0
  53. data/lib/assets/javascripts/code_sync_basic.coffee +1 -0
  54. data/lib/assets/javascripts/demos.coffee +48 -0
  55. data/lib/assets/javascripts/demos/default-content.coffee +72 -0
  56. data/lib/assets/javascripts/demos/layout_selector.coffee +19 -0
  57. data/lib/assets/javascripts/demos/tour.coffee +70 -0
  58. data/lib/assets/javascripts/demos/tour.jst.skim +29 -0
  59. data/lib/assets/javascripts/marketing.coffee +0 -0
  60. data/lib/assets/javascripts/vendor/.DS_Store +0 -0
  61. data/lib/assets/javascripts/vendor/backbone-events.js +160 -0
  62. data/lib/assets/javascripts/vendor/backbone-min.js +4 -0
  63. data/lib/assets/javascripts/vendor/codemirror-coffeescript.js +346 -0
  64. data/lib/assets/javascripts/vendor/codemirror-css.js +570 -0
  65. data/lib/assets/javascripts/vendor/codemirror-haml.js +153 -0
  66. data/lib/assets/javascripts/vendor/codemirror-htmlmixed.js +104 -0
  67. data/lib/assets/javascripts/vendor/codemirror-javascript.js +468 -0
  68. data/lib/assets/javascripts/vendor/codemirror-markdown.js +526 -0
  69. data/lib/assets/javascripts/vendor/codemirror-ruby.js +194 -0
  70. data/lib/assets/javascripts/vendor/codemirror-sass.js +330 -0
  71. data/lib/assets/javascripts/vendor/codemirror-skim.js +330 -0
  72. data/lib/assets/javascripts/vendor/codemirror-vim.js +3159 -0
  73. data/lib/assets/javascripts/vendor/codemirror-xml.js +328 -0
  74. data/lib/assets/javascripts/vendor/console.js +339 -0
  75. data/lib/assets/javascripts/vendor/gisted.js +27 -0
  76. data/lib/assets/javascripts/vendor/jquery-ui-resize-drag.min.js +6 -0
  77. data/lib/assets/javascripts/vendor/jquery.js +5 -0
  78. data/lib/assets/javascripts/vendor/keylauncher.js +4 -0
  79. data/lib/assets/javascripts/vendor/keymaster.min.js +4 -0
  80. data/lib/assets/javascripts/vendor/spectrum.js +1868 -0
  81. data/lib/assets/javascripts/vendor/underscore-min.js +1 -0
  82. data/lib/assets/javascripts/vendor/underscore.string.min.js +1 -0
  83. data/lib/assets/javascripts/vendor/vendored_codemirror.js +5558 -0
  84. data/lib/assets/javascripts/vendor/zepto.js +2 -0
  85. data/lib/assets/stylesheets/canvas.css.scss +101 -0
  86. data/lib/assets/stylesheets/code_sync.css.scss +4 -0
  87. data/lib/assets/stylesheets/code_sync/codemirror.css +7 -0
  88. data/lib/assets/stylesheets/code_sync/console.css +86 -0
  89. data/lib/assets/stylesheets/code_sync/editor/asset-name-input.css.scss +12 -0
  90. data/lib/assets/stylesheets/code_sync/editor/asset-selector.css.scss +58 -0
  91. data/lib/assets/stylesheets/code_sync/editor/codesync-color-picker.css.sass +5 -0
  92. data/lib/assets/stylesheets/code_sync/editor/document-tabs.css.scss +61 -0
  93. data/lib/assets/stylesheets/code_sync/editor/element-sync.css.scss +72 -0
  94. data/lib/assets/stylesheets/code_sync/editor/mode-selector.css.scss +0 -0
  95. data/lib/assets/stylesheets/code_sync/editor/preferences-panel.css.scss +26 -0
  96. data/lib/assets/stylesheets/code_sync/index.css.scss +141 -0
  97. data/lib/assets/stylesheets/demos.css.scss +96 -0
  98. data/lib/assets/stylesheets/marketing.css.sass +46 -0
  99. data/lib/assets/stylesheets/marketing/syntax.css.scss +1 -0
  100. data/lib/assets/stylesheets/vendor/animate.css +1 -0
  101. data/lib/assets/stylesheets/vendor/codemirror-ambiance.css +75 -0
  102. data/lib/assets/stylesheets/vendor/codemirror-lesserdark.css +44 -0
  103. data/lib/assets/stylesheets/vendor/codemirror-monokai.css +28 -0
  104. data/lib/assets/stylesheets/vendor/codemirror-xq-light.css +43 -0
  105. data/lib/assets/stylesheets/vendor/grid-layout.css +1406 -0
  106. data/lib/assets/stylesheets/vendor/spectrum.css +481 -0
  107. data/lib/assets/stylesheets/vendor/vendored_codemirror.css +246 -0
  108. data/lib/code_sync.rb +41 -0
  109. data/lib/code_sync/cli.rb +73 -0
  110. data/lib/code_sync/manager.rb +238 -0
  111. data/lib/code_sync/processors.rb +18 -0
  112. data/lib/code_sync/processors/basic.rb +9 -0
  113. data/lib/code_sync/processors/jst_processor.rb +17 -0
  114. data/lib/code_sync/pry_console.rb +132 -0
  115. data/lib/code_sync/rails.rb +7 -0
  116. data/lib/code_sync/rails/engine.rb +12 -0
  117. data/lib/code_sync/server.rb +225 -0
  118. data/lib/code_sync/sprockets_adapter.rb +145 -0
  119. data/lib/code_sync/temp_asset.rb +20 -0
  120. data/lib/code_sync/version.rb +3 -0
  121. data/lib/middleman_extension.rb +43 -0
  122. data/readme.md +26 -0
  123. data/site/.gitignore +14 -0
  124. data/site/Gemfile +13 -0
  125. data/site/Gemfile.lock +183 -0
  126. data/site/config.rb +26 -0
  127. data/site/source/canvas.html.slim +21 -0
  128. data/site/source/codepen-style-demo.html.slim +21 -0
  129. data/site/source/demo.html.slim +30 -0
  130. data/site/source/index.html.slim +128 -0
  131. data/site/source/layouts/layout.slim +18 -0
  132. data/site/source/samples/_client.html.md +13 -0
  133. data/site/source/samples/_editor.html.md +19 -0
  134. data/site/source/samples/_hooks.html.md +8 -0
  135. data/site/source/samples/_middleman.html.md +7 -0
  136. data/site/source/samples/_rails.html.md +8 -0
  137. data/site/source/samples/_standalone.html.md +36 -0
  138. data/spec/lib/code_sync/sprockets_adapter_spec.rb +44 -0
  139. data/spec/spec_helper.rb +21 -0
  140. data/spec/support/.DS_Store +0 -0
  141. data/spec/support/dummy_middleman/.gitignore +14 -0
  142. data/spec/support/dummy_middleman/Gemfile +5 -0
  143. data/spec/support/dummy_middleman/Gemfile.lock +100 -0
  144. data/spec/support/dummy_middleman/config.rb +77 -0
  145. data/spec/support/dummy_middleman/source/images/background.png +0 -0
  146. data/spec/support/dummy_middleman/source/images/middleman.png +0 -0
  147. data/spec/support/dummy_middleman/source/index.html.erb +10 -0
  148. data/spec/support/dummy_middleman/source/javascripts/all.js +1 -0
  149. data/spec/support/dummy_middleman/source/layouts/layout.erb +19 -0
  150. data/spec/support/dummy_middleman/source/stylesheets/all.css +55 -0
  151. data/spec/support/dummy_middleman/source/stylesheets/normalize.css +375 -0
  152. data/spec/support/dummy_rails/.gitignore +15 -0
  153. data/spec/support/dummy_rails/Gemfile +38 -0
  154. data/spec/support/dummy_rails/Gemfile.lock +112 -0
  155. data/spec/support/dummy_rails/README.rdoc +261 -0
  156. data/spec/support/dummy_rails/Rakefile +7 -0
  157. data/spec/support/dummy_rails/app/assets/images/rails.png +0 -0
  158. data/spec/support/dummy_rails/app/assets/javascripts/application.js +15 -0
  159. data/spec/support/dummy_rails/app/assets/stylesheets/application.css +13 -0
  160. data/spec/support/dummy_rails/app/controllers/application_controller.rb +3 -0
  161. data/spec/support/dummy_rails/app/helpers/application_helper.rb +2 -0
  162. data/spec/support/dummy_rails/app/mailers/.gitkeep +0 -0
  163. data/spec/support/dummy_rails/app/models/.gitkeep +0 -0
  164. data/spec/support/dummy_rails/app/views/layouts/application.html.erb +14 -0
  165. data/spec/support/dummy_rails/config.ru +4 -0
  166. data/spec/support/dummy_rails/config/application.rb +62 -0
  167. data/spec/support/dummy_rails/config/boot.rb +6 -0
  168. data/spec/support/dummy_rails/config/database.yml +25 -0
  169. data/spec/support/dummy_rails/config/environment.rb +5 -0
  170. data/spec/support/dummy_rails/config/environments/development.rb +37 -0
  171. data/spec/support/dummy_rails/config/environments/production.rb +67 -0
  172. data/spec/support/dummy_rails/config/environments/test.rb +37 -0
  173. data/spec/support/dummy_rails/config/initializers/backtrace_silencers.rb +7 -0
  174. data/spec/support/dummy_rails/config/initializers/inflections.rb +15 -0
  175. data/spec/support/dummy_rails/config/initializers/mime_types.rb +5 -0
  176. data/spec/support/dummy_rails/config/initializers/secret_token.rb +7 -0
  177. data/spec/support/dummy_rails/config/initializers/session_store.rb +8 -0
  178. data/spec/support/dummy_rails/config/initializers/wrap_parameters.rb +14 -0
  179. data/spec/support/dummy_rails/config/locales/en.yml +5 -0
  180. data/spec/support/dummy_rails/config/routes.rb +58 -0
  181. data/spec/support/dummy_rails/db/seeds.rb +7 -0
  182. data/spec/support/dummy_rails/doc/README_FOR_APP +2 -0
  183. data/spec/support/dummy_rails/lib/assets/.gitkeep +0 -0
  184. data/spec/support/dummy_rails/lib/tasks/.gitkeep +0 -0
  185. data/spec/support/dummy_rails/log/.gitkeep +0 -0
  186. data/spec/support/dummy_rails/public/404.html +26 -0
  187. data/spec/support/dummy_rails/public/422.html +26 -0
  188. data/spec/support/dummy_rails/public/500.html +25 -0
  189. data/spec/support/dummy_rails/public/favicon.ico +0 -0
  190. data/spec/support/dummy_rails/public/index.html +241 -0
  191. data/spec/support/dummy_rails/public/robots.txt +5 -0
  192. data/spec/support/dummy_rails/script/rails +6 -0
  193. data/spec/support/dummy_rails/test/fixtures/.gitkeep +0 -0
  194. data/spec/support/dummy_rails/test/functional/.gitkeep +0 -0
  195. data/spec/support/dummy_rails/test/integration/.gitkeep +0 -0
  196. data/spec/support/dummy_rails/test/performance/browsing_test.rb +12 -0
  197. data/spec/support/dummy_rails/test/test_helper.rb +13 -0
  198. data/spec/support/dummy_rails/test/unit/.gitkeep +0 -0
  199. data/spec/support/dummy_rails/vendor/assets/javascripts/.gitkeep +0 -0
  200. data/spec/support/dummy_rails/vendor/assets/stylesheets/.gitkeep +0 -0
  201. data/spec/support/dummy_rails/vendor/plugins/.gitkeep +0 -0
  202. data/spec/support/dummy_static/.DS_Store +0 -0
  203. data/spec/support/dummy_static/app/.DS_Store +0 -0
  204. data/spec/support/dummy_static/app/assets/.DS_Store +0 -0
  205. data/spec/support/dummy_static/app/assets/javascripts/manifest.coffee +4 -0
  206. data/spec/support/dummy_static/app/assets/javascripts/spec_application_javascript.coffee +4 -0
  207. data/spec/support/dummy_static/app/assets/stylesheets/spec_application_stylesheet.css.scss +5 -0
  208. data/spec/support/dummy_static/lib/assets/javascripts/spec_library_javascript.coffee +3 -0
  209. data/spec/support/dummy_static/lib/assets/stylesheets/spec_library_stylesheet.css.scss +5 -0
  210. data/spec/support/dummy_static/vendor/assets/javascripts/spec_vendor_javascript.js +5 -0
  211. data/spec/support/dummy_static/vendor/assets/stylesheets/spec_vendor_stylesheets.css +3 -0
  212. data/vendor/assets/stylesheets/code_sync.css +1 -0
  213. metadata +492 -0
@@ -0,0 +1,481 @@
1
+ /***
2
+ Spectrum Colorpicker v1.1.0
3
+ https://github.com/bgrins/spectrum
4
+ Author: Brian Grinstead
5
+ License: MIT
6
+ ***/
7
+
8
+ .sp-container {
9
+ position:absolute;
10
+ top:0;
11
+ left:0;
12
+ display:inline-block;
13
+ *display: inline;
14
+ *zoom: 1;
15
+ z-index: 2147483647;
16
+ overflow: hidden;
17
+ }
18
+ .sp-container.sp-flat {
19
+ position: relative;
20
+ }
21
+
22
+ /* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
23
+ .sp-top {
24
+ position:relative;
25
+ width: 100%;
26
+ display:inline-block;
27
+ }
28
+ .sp-top-inner {
29
+ position:absolute;
30
+ top:0;
31
+ left:0;
32
+ bottom:0;
33
+ right:0;
34
+ }
35
+ .sp-color {
36
+ position: absolute;
37
+ top:0;
38
+ left:0;
39
+ bottom:0;
40
+ right:20%;
41
+ }
42
+ .sp-hue {
43
+ position: absolute;
44
+ top:0;
45
+ right:0;
46
+ bottom:0;
47
+ left:84%;
48
+ height: 100%;
49
+ }
50
+ .sp-fill {
51
+ padding-top: 80%;
52
+ }
53
+ .sp-sat, .sp-val {
54
+ position: absolute;
55
+ top:0;
56
+ left:0;
57
+ right:0;
58
+ bottom:0;
59
+ }
60
+
61
+ .sp-alpha-enabled .sp-top
62
+ {
63
+ margin-bottom: 18px;
64
+ }
65
+ .sp-alpha-enabled .sp-alpha
66
+ {
67
+ display: block;
68
+ }
69
+
70
+ .sp-alpha-handle
71
+ {
72
+ position:absolute;
73
+ top:-4px;
74
+ bottom: -4px;
75
+ width: 6px;
76
+ left: 50%;
77
+ cursor: pointer;
78
+ border: 1px solid black;
79
+ background: white;
80
+ opacity: .8;
81
+ }
82
+
83
+ .sp-alpha
84
+ {
85
+ display: none;
86
+ position: absolute;
87
+ bottom: -14px;
88
+ right: 0;
89
+ left: 0;
90
+ height: 8px;
91
+ }
92
+ .sp-alpha-inner{
93
+ border: solid 1px #333;
94
+ }
95
+
96
+ /* Don't allow text selection */
97
+ .sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
98
+ -webkit-user-select:none;
99
+ -moz-user-select: -moz-none;
100
+ -o-user-select:none;
101
+ user-select: none;
102
+ }
103
+
104
+ .sp-container.sp-input-disabled .sp-input-container {
105
+ display: none;
106
+ }
107
+ .sp-container.sp-buttons-disabled .sp-button-container {
108
+ display: none;
109
+ }
110
+ .sp-palette-only .sp-picker-container {
111
+ display: none;
112
+ }
113
+ .sp-palette-disabled .sp-palette-container {
114
+ display: none;
115
+ }
116
+
117
+ .sp-initial-disabled .sp-initial {
118
+ display: none;
119
+ }
120
+
121
+
122
+ /* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
123
+ .sp-sat {
124
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
125
+ background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
126
+ background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
127
+ background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
128
+ background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
129
+ background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
130
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
131
+ filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
132
+ }
133
+ .sp-val {
134
+ background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
135
+ background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
136
+ background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
137
+ background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
138
+ background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
139
+ background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
140
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
141
+ filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
142
+ }
143
+
144
+ .sp-hue {
145
+ background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
146
+ background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
147
+ background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
148
+ background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
149
+ background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
150
+ }
151
+
152
+ /* IE filters do not support multiple color stops.
153
+ Generate 6 divs, line them up, and do two color gradients for each.
154
+ Yes, really.
155
+ */
156
+
157
+ .sp-1 {
158
+ height:17%;
159
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
160
+ }
161
+ .sp-2 {
162
+ height:16%;
163
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
164
+ }
165
+ .sp-3 {
166
+ height:17%;
167
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
168
+ }
169
+ .sp-4 {
170
+ height:17%;
171
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
172
+ }
173
+ .sp-5 {
174
+ height:16%;
175
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
176
+ }
177
+ .sp-6 {
178
+ height:17%;
179
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
180
+ }
181
+
182
+ .sp-hidden {
183
+ display: none !important;
184
+ }
185
+
186
+ /* Clearfix hack */
187
+ .sp-cf:before, .sp-cf:after { content: ""; display: table; }
188
+ .sp-cf:after { clear: both; }
189
+ .sp-cf { *zoom: 1; }
190
+
191
+ /* Mobile devices, make hue slider bigger so it is easier to slide */
192
+ @media (max-device-width: 480px) {
193
+ .sp-color { right: 40%; }
194
+ .sp-hue { left: 63%; }
195
+ .sp-fill { padding-top: 60%; }
196
+ }
197
+
198
+ .sp-dragger {
199
+ border-radius: 5px;
200
+ height: 5px;
201
+ width: 5px;
202
+ border: 1px solid #fff;
203
+ background: #000;
204
+ cursor: pointer;
205
+ position:absolute;
206
+ top:0;
207
+ left: 0;
208
+ }
209
+ .sp-slider {
210
+ position: absolute;
211
+ top:0;
212
+ cursor:pointer;
213
+ height: 3px;
214
+ left: -1px;
215
+ right: -1px;
216
+ border: 1px solid #000;
217
+ background: white;
218
+ opacity: .8;
219
+ }
220
+
221
+ /* Basic display options (colors, fonts, global widths) */
222
+ .sp-container {
223
+ border-radius: 0;
224
+ background-color: #ECECEC;
225
+ border: solid 1px #f0c49B;
226
+ padding: 0;
227
+ }
228
+ .sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue
229
+ {
230
+ font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
231
+ -webkit-box-sizing: border-box;
232
+ -moz-box-sizing: border-box;
233
+ -ms-box-sizing: border-box;
234
+ box-sizing: border-box;
235
+ }
236
+ .sp-top
237
+ {
238
+ margin-bottom: 3px;
239
+ }
240
+ .sp-color, .sp-hue
241
+ {
242
+ border: solid 1px #666;
243
+ }
244
+
245
+ /* Input */
246
+ .sp-input-container {
247
+ float:right;
248
+ width: 100px;
249
+ margin-bottom: 4px;
250
+ }
251
+ .sp-initial-disabled .sp-input-container {
252
+ width: 100%;
253
+ }
254
+ .sp-input {
255
+ font-size: 12px !important;
256
+ border: 1px inset;
257
+ padding: 4px 5px;
258
+ margin: 0;
259
+ width: 100%;
260
+ background:transparent;
261
+ border-radius: 3px;
262
+ color: #222;
263
+ }
264
+ .sp-input:focus {
265
+ border: 1px solid orange;
266
+ }
267
+ .sp-input.sp-validation-error
268
+ {
269
+ border: 1px solid red;
270
+ background: #fdd;
271
+ }
272
+ .sp-picker-container , .sp-palette-container
273
+ {
274
+ float:left;
275
+ position: relative;
276
+ padding: 10px;
277
+ padding-bottom: 300px;
278
+ margin-bottom: -290px;
279
+ }
280
+ .sp-picker-container
281
+ {
282
+ width: 172px;
283
+ border-left: solid 1px #fff;
284
+ }
285
+
286
+ /* Palettes */
287
+ .sp-palette-container
288
+ {
289
+ border-right: solid 1px #ccc;
290
+ }
291
+
292
+ .sp-palette .sp-thumb-el {
293
+ display: block;
294
+ position:relative;
295
+ float:left;
296
+ width: 24px;
297
+ height: 15px;
298
+ margin: 3px;
299
+ cursor: pointer;
300
+ border:solid 2px transparent;
301
+ }
302
+ .sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
303
+ border-color: orange;
304
+ }
305
+ .sp-thumb-el
306
+ {
307
+ position:relative;
308
+ }
309
+
310
+ /* Initial */
311
+ .sp-initial
312
+ {
313
+ float: left;
314
+ border: solid 1px #333;
315
+ }
316
+ .sp-initial span {
317
+ width: 30px;
318
+ height: 25px;
319
+ border:none;
320
+ display:block;
321
+ float:left;
322
+ margin:0;
323
+ }
324
+
325
+ /* Buttons */
326
+ .sp-button-container {
327
+ float: right;
328
+ }
329
+
330
+ /* Replacer (the little preview div that shows up instead of the <input>) */
331
+ .sp-replacer {
332
+ margin:0;
333
+ overflow:hidden;
334
+ cursor:pointer;
335
+ padding: 4px;
336
+ display:inline-block;
337
+ *zoom: 1;
338
+ *display: inline;
339
+ border: solid 1px #91765d;
340
+ background: #eee;
341
+ color: #333;
342
+ vertical-align: middle;
343
+ }
344
+ .sp-replacer:hover, .sp-replacer.sp-active {
345
+ border-color: #F0C49B;
346
+ color: #111;
347
+ }
348
+ .sp-replacer.sp-disabled {
349
+ cursor:default;
350
+ border-color: silver;
351
+ color: silver;
352
+ }
353
+ .sp-dd {
354
+ padding: 2px 0;
355
+ height: 16px;
356
+ line-height: 16px;
357
+ float:left;
358
+ font-size:10px;
359
+ }
360
+ .sp-preview
361
+ {
362
+ position:relative;
363
+ width:25px;
364
+ height: 20px;
365
+ border: solid 1px #222;
366
+ margin-right: 5px;
367
+ float:left;
368
+ z-index: 0;
369
+ }
370
+
371
+ .sp-palette
372
+ {
373
+ *width: 220px;
374
+ max-width: 220px;
375
+ }
376
+ .sp-palette .sp-thumb-el
377
+ {
378
+ width:16px;
379
+ height: 16px;
380
+ margin:2px 1px;
381
+ border: solid 1px #d0d0d0;
382
+ }
383
+
384
+ .sp-container
385
+ {
386
+ padding-bottom:0;
387
+ }
388
+
389
+
390
+ /* Buttons: http://hellohappy.org/css3-buttons/ */
391
+ .sp-container button {
392
+ background-color: #eeeeee;
393
+ background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
394
+ background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
395
+ background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
396
+ background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
397
+ background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
398
+ background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
399
+ border: 1px solid #ccc;
400
+ border-bottom: 1px solid #bbb;
401
+ border-radius: 3px;
402
+ color: #333;
403
+ font-size: 14px;
404
+ line-height: 1;
405
+ padding: 5px 4px;
406
+ text-align: center;
407
+ text-shadow: 0 1px 0 #eee;
408
+ vertical-align: middle;
409
+ }
410
+ .sp-container button:hover {
411
+ background-color: #dddddd;
412
+ background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
413
+ background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
414
+ background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
415
+ background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
416
+ background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
417
+ background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
418
+ border: 1px solid #bbb;
419
+ border-bottom: 1px solid #999;
420
+ cursor: pointer;
421
+ text-shadow: 0 1px 0 #ddd;
422
+ }
423
+ .sp-container button:active {
424
+ border: 1px solid #aaa;
425
+ border-bottom: 1px solid #888;
426
+ -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
427
+ -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
428
+ -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
429
+ -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
430
+ box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
431
+ }
432
+ .sp-cancel
433
+ {
434
+ font-size: 11px;
435
+ color: #d93f3f !important;
436
+ margin:0;
437
+ padding:2px;
438
+ margin-right: 5px;
439
+ vertical-align: middle;
440
+ text-decoration:none;
441
+
442
+ }
443
+ .sp-cancel:hover
444
+ {
445
+ color: #d93f3f !important;
446
+ text-decoration: underline;
447
+ }
448
+
449
+
450
+ .sp-palette span:hover, .sp-palette span.sp-thumb-active
451
+ {
452
+ border-color: #000;
453
+ }
454
+
455
+ .sp-preview, .sp-alpha, .sp-thumb-el
456
+ {
457
+ position:relative;
458
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
459
+ }
460
+ .sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner
461
+ {
462
+ display:block;
463
+ position:absolute;
464
+ top:0;left:0;bottom:0;right:0;
465
+ }
466
+
467
+ .sp-palette .sp-thumb-inner
468
+ {
469
+ background-position: 50% 50%;
470
+ background-repeat: no-repeat;
471
+ }
472
+
473
+ .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner
474
+ {
475
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
476
+ }
477
+
478
+ .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner
479
+ {
480
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
481
+ }