├── CEP_7_Extensions_Cookbook_Bridge.pdf
├── JSX Utility Scripts
    ├── ActionFileToJavascript.jsx
    ├── ActionFileToXML.jsx
    ├── ActionToJavascript.jsx
    ├── SLCFix.jsx
    ├── jamEngine Action to JSX
    │   ├── Convert Actions File.js
    │   ├── jamActions-min.jsxinc
    │   ├── jamEngine-min.jsxinc
    │   ├── jamJSON-min.jsxinc
    │   └── jamUtils-min.jsxinc
    └── jsh.jsx
├── README.md
├── ScriptingListener
    ├── Scripting_Plug_In_Release.dmg
    └── Win_Scripting_Plug-In.zip
├── Spectrum UI Library
    ├── CSS
    │   ├── styles-dark.css
    │   ├── styles-darker.css
    │   ├── styles-light.css
    │   └── styles-lighter.css
    └── JS
    │   └── themecolors.js
└── Topcoat UI Library
    ├── CSS
        ├── topcoat-desktop-dark.css
        ├── topcoat-desktop-dark.min.css
        ├── topcoat-desktop-light.css
        └── topcoat-desktop-light.min.css
    └── JS
        └── themeManager.js


/CEP_7_Extensions_Cookbook_Bridge.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hennamann/CEP-Toolkit/003ff3e562db1e8693461cac93f94c119ddad0b3/CEP_7_Extensions_Cookbook_Bridge.pdf


--------------------------------------------------------------------------------
/JSX Utility Scripts/jamEngine Action to JSX/Convert Actions File.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 | <javascriptresource>
  4 | <name>Convert Actions File...</name>
  5 | <about>"Convert Actions File" v2.1
  6 | 
  7 | Convert an actions file (.atn) into a folder of directly executable scripts (.js) which can be further edited.
  8 | 
  9 | Utility script using the "JSON Action Manager" scripting library.
 10 | © 2011-2015 Michel MARIANI.
 11 | </about>
 12 | <menu>automate</menu>
 13 | <category>JSON Action Manager Actions Files Utility</category>
 14 | </javascriptresource>
 15 | 
 16 | */
 17 | 
 18 | //------------------------------------------------------------------------------
 19 | // File: Convert Actions File.js
 20 | // Version: 2.1
 21 | // Release Date: 2015-11-22
 22 | // Copyright: © 2011-2015 Michel MARIANI <http://www.tonton-pixel.com/blog/>
 23 | // Licence: GPL <http://www.gnu.org/licenses/gpl.html>
 24 | //------------------------------------------------------------------------------
 25 | // This program is free software: you can redistribute it and/or modify
 26 | // it under the terms of the GNU General Public License as published by
 27 | // the Free Software Foundation, either version 3 of the License, or
 28 | // (at your option) any later version.
 29 | // 
 30 | // This program is distributed in the hope that it will be useful,
 31 | // but WITHOUT ANY WARRANTY; without even the implied warranty of
 32 | // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 33 | // GNU General Public License for more details.
 34 | // 
 35 | // You should have received a copy of the GNU General Public License
 36 | // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 37 | //------------------------------------------------------------------------------
 38 | // Version History:
 39 | //  2.1:
 40 | //  - Used new version 4.4.4 of jamEngine scripting library module.
 41 | //  2.0:
 42 | //  - Used new version 4.4.1 of scripting library modules.
 43 | //  1.9:
 44 | //  - Used new version 4.4 of scripting library modules.
 45 | //  1.8:
 46 | //  - Replaced decodeURI () with File.decode () for the sake of consistency.
 47 | //  - Used new version 4.1 of jamActions scripting library module.
 48 | //  - Added test for successful opening of output files.
 49 | //  1.7:
 50 | //  - Used new version 4.0 of scripting library modules.
 51 | //  1.6:
 52 | //  - Used new version of jamEngine module.
 53 | //  1.5:
 54 | //  - Replaced \r with \n in dialog text area.
 55 | //  1.4:
 56 | //  - Used new version of scripting library modules.
 57 | //  1.3:
 58 | //  - Used new version of scripting library modules.
 59 | //  1.2:
 60 | //  - Removed the choice of not using a UTF-8 BOM.
 61 | //  1.1:
 62 | //  - Added 'TEXT' Mac OS type to newly created JavaScript code files.
 63 | //  1.0:
 64 | //  - Initial release.
 65 | //------------------------------------------------------------------------------
 66 | 
 67 | //@include "./jamActions-min.jsxinc"
 68 | //@include "./jamEngine-min.jsxinc"
 69 | //@include "./jamJSON-min.jsxinc"
 70 | //@include "./jamUtils-min.jsxinc"
 71 | 
 72 | //------------------------------------------------------------------------------
 73 | 
 74 | var signature = "json-action-manager-convert-actions-file-options";
 75 | 
 76 | var defaultFolderName = "~/Desktop/";
 77 | 
 78 | var defaultOptions =
 79 | {
 80 | 	actionsFileName: null,
 81 | 	allCommands: false,
 82 | 	meaningfulIds: false,
 83 | 	parseFriendly: false,
 84 | 	expandTabs: false,
 85 | 	destinationName: defaultFolderName,
 86 | 	openFolder: false
 87 | };
 88 | 
 89 | var actionsFile = null;
 90 | var actionSet = null;
 91 | var destination = null;
 92 | 
 93 | //------------------------------------------------------------------------------
 94 | 
 95 | var playFunctionCall = 'jamEngine.jsonPlay';
 96 | var meaningfulIdsOption = 'jamEngine.meaningfulIds';
 97 | var parseFriendlyOption = 'jamEngine.parseFriendly';
 98 | 
 99 | //------------------------------------------------------------------------------
100 | 
101 | function ISODateString (d, fsSafe)
102 | {
103 | 	const dateSeparator = '-';
104 | 	const timeDesignator = (fsSafe) ? '-' : 'T';
105 | 	const timeSeparator = (fsSafe) ? '' : ':';
106 | 	function pad (n) { return (n < 10) ? '0' + n : n; }
107 | 	var minutesOff = -d.getTimezoneOffset ();
108 | 	var isMinus = (minutesOff < 0);
109 | 	if (isMinus)
110 | 	{
111 | 		minutesOff = -minutesOff;
112 | 	}
113 | 	var dateString =
114 | 		d.getFullYear () + dateSeparator + pad (d.getMonth () + 1) + dateSeparator + pad (d.getDate ()) +
115 | 		timeDesignator +
116 | 		pad (d.getHours ()) + timeSeparator + pad (d.getMinutes ()) + timeSeparator + pad (d.getSeconds ()) +
117 | 		((fsSafe) ? '' : ((isMinus) ? '-' : '+') + pad (minutesOff / 60) + timeSeparator + pad (minutesOff % 60));
118 | 	return dateString;
119 | }
120 | 
121 | //------------------------------------------------------------------------------
122 | 
123 | function embedIncludeFile (f, fileName)
124 | {
125 | 	var saveCurrent = Folder.current;
126 | 	Folder.current = (new File ($.fileName)).parent;
127 | 	var includeFile = new File (fileName);
128 | 	if (includeFile.open ("r"))
129 | 	{
130 | 		f.write (includeFile.read ());
131 | 		includeFile.close ();
132 | 	}
133 | 	Folder.current = saveCurrent;
134 | }
135 | 
136 | //------------------------------------------------------------------------------
137 | 
138 | function displayDialog ()
139 | {
140 | 	function updateDialog ()
141 | 	{
142 | 		if (actionSet === null)
143 | 		{
144 | 			dialog.fileName.text = "<None>";
145 | 			dialog.fileName.helpTip = "Click the Choose... button";
146 | 			dialog.fileName.enabled = false;
147 | 			dialog.actionSetName.text = "";
148 | 			dialog.actionNames.text = "";
149 | 			okButton.enabled = false;
150 | 		}
151 | 		else
152 | 		{
153 | 			dialog.fileName.enabled = true;
154 | 			dialog.fileName.text = File.decode (actionsFile.name);
155 | 			dialog.fileName.helpTip = actionsFile.fsName;
156 | 			dialog.actionSetName.text = actionSet.name;
157 | 			var actions = actionSet.actions;
158 | 			dialog.actionNames.text = "";
159 | 			for (var actionIndex = 0; actionIndex < actions.length; actionIndex++)
160 | 			{
161 | 				dialog.actionNames.text += (actionIndex > 0 ? "\n" : "") + actions[actionIndex].name;
162 | 			}
163 | 			okButton.enabled = true;
164 | 		}
165 | 	}
166 | 	var dialog = new Window ('dialog', "Convert Actions File");
167 | 	dialog.orientation = "column";
168 | 	var fileGroup = dialog.add ('group');
169 | 	fileGroup.alignment = "left";
170 | 	fileGroup.orientation = "row";
171 | 	fileGroup.alignChildren = [ "fill", "center" ];
172 | 	fileGroup.add ('statictext', undefined, "Actions File:");
173 | 	dialog.fileName = fileGroup.add ('edittext', undefined, "", { readonly: true });
174 | 	dialog.fileName.characters = 32;
175 | 	var chooseFileButton = fileGroup.add ('button', undefined, "Choose...");
176 | 	chooseFileButton.helpTip = "Choose an actions file";
177 | 	chooseFileButton.onClick = function ()
178 | 	{
179 | 		function actionsFileFilter (f)
180 | 		{
181 | 			return (f instanceof Folder) || jamActions.isActionsFile (f);
182 | 		}
183 | 		var select = (File.fs === "Macintosh") ? actionsFileFilter : "Actions Files:*.atn,All Files:*";
184 | 		var presetFile = (actionsFile !== null) ? actionsFile : new Folder (defaultFolderName);
185 | 		var inFile = presetFile.openDlg ("Choose an actions file:", select);
186 | 		if (inFile !== null)
187 | 		{
188 | 			var inFileData = jamActions.dataFromActionsFile (inFile);
189 | 			if (typeof inFileData === 'string')
190 | 			{
191 | 				alert (inFileData + "\n" + "Actions file: “" + File.decode (inFile.name) + "”");
192 | 			}
193 | 			else
194 | 			{
195 | 				actionsFile = inFile;
196 | 				actionSet = inFileData.actionSet;
197 | 				updateDialog ();
198 | 			}
199 | 		}
200 | 	};
201 | 	var actionSetGroup = dialog.add ('group');
202 | 	actionSetGroup.alignment = "fill";
203 | 	actionSetGroup.orientation = "row";
204 | 	actionSetGroup.add ('statictext', undefined, "Action Set:");
205 | 	dialog.actionSetName = actionSetGroup.add ('edittext', undefined, "", { readonly: true });
206 | 	dialog.actionSetName.alignment = [ "fill", "center" ];
207 | 	var actionGroup = dialog.add ('group');
208 | 	actionGroup.alignment = "fill";
209 | 	actionGroup.orientation = "row";
210 | 	actionGroup.alignChildren = [ "left", "center" ];
211 | 	actionGroup.add ('statictext', undefined, "Actions:");
212 | 	dialog.actionNames = actionGroup.add ('edittext', undefined, "", { readonly: true, multiline: true });
213 | 	dialog.actionNames.alignment = [ "fill", "center" ];
214 | 	dialog.actionNames.text = "\n\n\n\n\n\n\n\n";	// Placeholder (8 lines)
215 | 	var optionsGroup = dialog.add ('group');
216 | 	optionsGroup.orientation = "row";
217 | 	optionsGroup.alignment = [ "left", "center" ];
218 | 	dialog.allCommandsCheck = optionsGroup.add ('checkbox', undefined, 'All Commands');
219 | 	dialog.allCommandsCheck.helpTip = "Generate all commands, even when disabled (using a boolean test)";
220 | 	dialog.meaningfulIdsCheck = optionsGroup.add ('checkbox', undefined, 'Meaningful IDs');
221 | 	dialog.meaningfulIdsCheck.helpTip = "Generate as meaningful as possible IDs (instead of canonic IDs)";
222 | 	dialog.parseFriendlyCheck = optionsGroup.add ('checkbox', undefined, 'Parse-Friendly');
223 | 	dialog.parseFriendlyCheck.helpTip = "Generate parse-friendly JSON compact format (using ordered pairs made of arrays instead of objects)";
224 | 	dialog.expandTabsCheck = optionsGroup.add ('checkbox', undefined, 'Expand Tabs');
225 | 	dialog.expandTabsCheck.helpTip = "Use tab expansion (convert tabs to 4 spaces)";
226 | 	var destinationGroup = dialog.add ('group');
227 | 	destinationGroup.alignment = "left";
228 | 	destinationGroup.orientation = "row";
229 | 	destinationGroup.alignChildren = [ "fill", "center" ];
230 | 	destinationGroup.add ('statictext', undefined, "Destination:");
231 | 	dialog.destination = destinationGroup.add ('edittext', undefined, "", { readonly: true });
232 | 	dialog.destination.characters = 32;
233 | 	var chooseDestinationButton = destinationGroup.add ('button', undefined, "Choose...");
234 | 	chooseDestinationButton.helpTip = "Choose a destination folder";
235 | 	chooseDestinationButton.onClick = function ()
236 | 	{
237 | 		var presetFolder = destination.exists ? destination : ( destination.parent.exists ? destination.parent : new Folder (defaultFolderName));
238 | 		var inFolder = presetFolder.selectDlg ("Choose a destination folder:");
239 | 		if (inFolder !== null)
240 | 		{
241 | 			destination = inFolder;
242 | 			dialog.destination.text = File.decode (destination.name);
243 | 			dialog.destination.helpTip = destination.fsName;
244 | 		}
245 | 	};
246 | 	dialog.openFolderCheck = dialog.add ('checkbox', undefined, 'Open containing folder');
247 | 	dialog.openFolderCheck.helpTip = "Automatically open the resulting action set folder containing the converted actions";
248 | 	dialog.openFolderCheck.alignment = "right";
249 | 	var buttonsGroup = dialog.add ('group');
250 | 	buttonsGroup.alignment = [ "right", "bottom" ];
251 | 	buttonsGroup.orientation = "row";
252 | 	buttonsGroup.alignChildren = "fill";
253 | 	var cancelButton = buttonsGroup.add ('button', undefined, 'Cancel', { name: "cancel" });
254 | 	cancelButton.onClick = function ()
255 | 	{
256 | 		dialog.close (false);
257 | 	};
258 | 	var okButton = buttonsGroup.add ('button', undefined, 'Convert', { name: "ok" });
259 | 	okButton.onClick = function ()
260 | 	{
261 | 		if (!destination.exists)
262 | 		{
263 | 			alert ("Please choose a valid destination folder.");
264 | 		}
265 | 		else
266 | 		{
267 | 			customOptions.actionsFileName = (actionsFile !== null) ? actionsFile.fsName : null;
268 | 			customOptions.allCommands = dialog.allCommandsCheck.value;
269 | 			customOptions.meaningfulIds = dialog.meaningfulIdsCheck.value;
270 | 			customOptions.parseFriendly = dialog.parseFriendlyCheck.value;
271 | 			customOptions.expandTabs = dialog.expandTabsCheck.value;
272 | 			customOptions.destinationName = destination.fsName;
273 | 			customOptions.openFolder = dialog.openFolderCheck.value;
274 | 			dialog.close (true);
275 | 		}
276 | 	};
277 | 	dialog.onShow = function ()
278 | 	{
279 | 		if (customOptions.actionsFileName)
280 | 		{
281 | 			var inFile = new File (customOptions.actionsFileName);
282 | 			if (inFile.exists && jamActions.isActionsFile (inFile))
283 | 			{
284 | 				var inFileData = jamActions.dataFromActionsFile (inFile);
285 | 				if (typeof inFileData === 'string')
286 | 				{
287 | 					alert (inFileData + "\n" + "Actions file: “" + File.decode (inFile.name) + "”");
288 | 				}
289 | 				else
290 | 				{
291 | 					actionsFile = inFile;
292 | 					actionSet = inFileData.actionSet;
293 | 				}
294 | 			}
295 | 		}
296 | 		updateDialog ();
297 | 		dialog.allCommandsCheck.value = customOptions.allCommands;
298 | 		dialog.meaningfulIdsCheck.value = customOptions.meaningfulIds;
299 | 		dialog.parseFriendlyCheck.value = customOptions.parseFriendly;
300 | 		dialog.expandTabsCheck.value = customOptions.expandTabs;
301 | 		destination = Folder (customOptions.destinationName);	// *Not* new Folder, to check if it is an existing File
302 | 		if (destination.exists && (destination instanceof File))
303 | 		{
304 | 			alert ("Invalid destination!\nReverting to default folder...");
305 | 			destination = new Folder (defaultFolderName);
306 | 		}
307 | 		dialog.destination.text = File.decode (destination.name);
308 | 		dialog.destination.helpTip = destination.fsName;
309 | 		dialog.openFolderCheck.value = customOptions.openFolder;
310 | 	};
311 | 	return dialog.show ();
312 | }
313 | 
314 | //------------------------------------------------------------------------------
315 | 
316 | // Assume Folder.current is already set to a proper location
317 | function getUniqueNameFile (name, versionSeparator, extensionSuffix)
318 | {
319 | 	var fileName = name.replace (/^[\.\s]+|[\s]+$/g, '');	// Strip leading dot(s), and leading and trailing space(s)
320 | 	fileName = fileName.replace (/["\*\/:<>\?\\\|¨]/g, '-');	// Replace file-system-unsafe characters with a hyphen-minus
321 | 	var versionIndex = 0;
322 | 	do
323 | 	{
324 | 		if (extensionSuffix)
325 | 		{
326 | 			var file = new File (fileName + ((versionIndex > 0) ? versionSeparator + versionIndex : "") + extensionSuffix);
327 | 		}
328 | 		else
329 | 		{
330 | 			var file = new Folder (fileName + ((versionIndex > 0) ? versionSeparator + versionIndex : ""));
331 | 		}
332 | 		versionIndex++;
333 | 	}
334 | 	while (file.exists);
335 | 	return file;
336 | }
337 | 
338 | //------------------------------------------------------------------------------
339 | 
340 | var appVersion = parseInt (app.version);
341 | if (appVersion >= 10)	// CS3
342 | {
343 | 	var customOptions = jamUtils.getCustomOptions (signature, defaultOptions);
344 | 	if (displayDialog ())
345 | 	{
346 | 		jamUtils.putCustomOptions (signature, customOptions, true);
347 | 		var tab = (customOptions.expandTabs) ? '    ' : '\t';
348 | 		var indentLevel = 0;
349 | 		function tabs ()
350 | 		{
351 | 			var tabsString = "";
352 | 			for (var index = 0; index < indentLevel; index++)
353 | 			{
354 | 				tabsString += tab;
355 | 			}
356 | 			return tabsString;
357 | 		}
358 | 		Folder.current = destination;
359 | 		var actionSetFolder = getUniqueNameFile (actionSet.name, ' ');
360 | 		if (actionSetFolder.create ())
361 | 		{
362 | 			Folder.current = actionSetFolder;
363 | 			for (var actionIndex = 0; actionIndex < actionSet.actions.length; actionIndex++)
364 | 			{
365 | 				var action = actionSet.actions[actionIndex];
366 | 				var f = getUniqueNameFile (action.name, '-', '.js');
367 | 				if (f.open ('w', 'TEXT'))
368 | 				{
369 | 					f.encoding = 'UTF-8';
370 | 					f.lineFeed = 'unix';
371 | 					f.write ('\uFEFF');	// Byte Order Mark
372 | 					var appName = app.path.fsName;
373 | 					f.writeln ('// Application: ' + appName.substring (appName.lastIndexOf ('/') + 1) + ' (' + app.version + ')');
374 | 					f.writeln ('// Date: ' + ISODateString (new Date ()));
375 | 					f.writeln ('// Actions file: ' + actionsFile.fsName);
376 | 					f.writeln ('// Action set: ' + actionSet.name);
377 | 					f.writeln ();
378 | 					embedIncludeFile (f, "jamEngine-min.jsxinc");
379 | 					f.writeln ();
380 | 					jamEngine.meaningfulIds = customOptions.meaningfulIds;
381 | 					jamEngine.parseFriendly = customOptions.parseFriendly;
382 | 					f.writeln (meaningfulIdsOption + ' = ' + (jamEngine.meaningfulIds ? 'true' : 'false') + ';');
383 | 					f.writeln (parseFriendlyOption + ' = ' + (jamEngine.parseFriendly ? 'true' : 'false') + ';');
384 | 					f.writeln ();
385 | 					f.writeln ('// Action “' + action.name + '”');
386 | 					f.writeln ('try');
387 | 					f.writeln ('{');
388 | 					indentLevel++;
389 | 					function logCommand (command)
390 | 					{
391 | 						if (customOptions.allCommands || command.enabled)
392 | 						{
393 | 							var localPlayCommand = jamActions.isLocalPlayCommand (command, actionSet.name);
394 | 							if (localPlayCommand !== null)
395 | 							{
396 | 								if (customOptions.allCommands)
397 | 								{
398 | 									f.write (tabs () + '// ');
399 | 									if (typeof localPlayCommand[1] !== 'undefined')
400 | 									{
401 | 										f.write ('Command ' + localPlayCommand[1] + ' of ');
402 | 									}
403 | 									f.write ('Action “' + localPlayCommand[0] + '”');
404 | 									if (typeof localPlayCommand[2] !== 'undefined')
405 | 									{
406 | 										f.write ((localPlayCommand[2] ? ' with ' : ' without ') + 'Continue');
407 | 									}
408 | 									f.writeln ();
409 | 									f.writeln (tabs () + 'if (' + (command.enabled ? 'true' : 'false') + ')');
410 | 									f.writeln (tabs () + '{');
411 | 									indentLevel++;
412 | 								}
413 | 								jamActions.traverseAction (actionSet, localPlayCommand[0], localPlayCommand[1], localPlayCommand[2]);
414 | 								if (customOptions.allCommands)
415 | 								{
416 | 									indentLevel--;
417 | 									f.writeln (tabs () + '}');
418 | 								}
419 | 							}
420 | 							else
421 | 							{
422 | 								f.writeln (tabs () + ('// ' + command.dictionaryName));
423 | 								if (customOptions.allCommands)
424 | 								{
425 | 									f.writeln (tabs () + 'if (' + (command.enabled ? 'true' : 'false') + ')');
426 | 									f.writeln (tabs () + '{');
427 | 									indentLevel++;
428 | 								}
429 | 								var playObj = jamEngine.eventIdAndActionDescriptorToJson (command.eventId, command.actionDescriptor);
430 | 								f.writeln (tabs () + playFunctionCall);
431 | 								f.writeln (tabs () + '(');
432 | 								indentLevel++;
433 | 								f.writeln (jamJSON.stringify (playObj["<event>"], tab, tabs ()) + ',');
434 | 								f.writeln (jamJSON.stringify (playObj["<descriptor>"], tab, tabs ()) + ',');
435 | 								f.writeln (tabs () + jamActions.determineDialogMode (command));
436 | 								indentLevel--;
437 | 								f.writeln (tabs () + ');');
438 | 								if (customOptions.allCommands)
439 | 								{
440 | 									indentLevel--;
441 | 									f.writeln (tabs () + '}');
442 | 								}
443 | 							}
444 | 						}
445 | 					}
446 | 					jamActions.setCommandHandler (logCommand);
447 | 					jamActions.traverseAction (actionSet, actionIndex);
448 | 					indentLevel--;
449 | 					f.writeln ('}');
450 | 					f.writeln ('catch (e)');
451 | 					f.writeln ('{');
452 | 					indentLevel++;
453 | 					f.writeln (tabs () + 'if (e.number !== 8007)  // Not a user cancel error');
454 | 					f.writeln (tabs () + '{');
455 | 					indentLevel++;
456 | 					f.writeln (tabs () + 'try');
457 | 					f.writeln (tabs () + '{');
458 | 					indentLevel++;
459 | 					var desc = new ActionDescriptor ();
460 | 					desc.putString (app.stringIDToTypeID ("message"), "<<< PLACEHOLDER >>>");
461 | 					var playObj = jamEngine.eventIdAndActionDescriptorToJson (app.stringIDToTypeID ("stop"), desc);
462 | 					f.writeln (tabs () + playFunctionCall)
463 | 					f.writeln (tabs () + '(');
464 | 					indentLevel++;
465 | 					f.writeln (jamJSON.stringify (playObj["<event>"], tab, tabs ()) + ',');
466 | 					var jsonDesc = jamJSON.stringify (playObj["<descriptor>"], tab, tabs ());
467 | 					f.writeln (jsonDesc.replace (/"<<< PLACEHOLDER >>>"/, 'e.message.replace (/^.*\\n- /, "")') + ',');
468 | 					f.writeln (tabs () + 'DialogModes.ALL');
469 | 					indentLevel--;
470 | 					f.writeln (tabs () + ');');
471 | 					indentLevel--;
472 | 					f.writeln (tabs () + '}');
473 | 					f.writeln (tabs () + 'catch (e)');
474 | 					f.writeln (tabs () + '{');
475 | 					f.writeln (tabs () + '}');
476 | 					indentLevel--;
477 | 					f.writeln (tabs () + '}');
478 | 					indentLevel--;
479 | 					f.writeln ('}');
480 | 					f.close ();
481 | 				}
482 | 			}
483 | 			if (customOptions.openFolder)
484 | 			{
485 | 				actionSetFolder.execute ();
486 | 			}
487 | 		}
488 | 		else
489 | 		{
490 | 			alert ("Cannot create action set folder in destination:\n" + destination.fsName);
491 | 		}
492 | 	}
493 | }
494 | else
495 | {
496 | 	alert ("Sorry, this script requires Photoshop CS3 or later.");
497 | }
498 | 
499 | //------------------------------------------------------------------------------
500 | 
501 | 


--------------------------------------------------------------------------------
/JSX Utility Scripts/jamEngine Action to JSX/jamActions-min.jsxinc:
--------------------------------------------------------------------------------
1 | // jamActions.jsxinc v4.4 (minified)
2 | if(typeof jamActions!=='object') {var jamActions={};(function() {jamActions.isActionsFile=function(file) {return(file.type==='8BAC')||file.name.match(/\.atn$/i);};jamActions.isActionsPalette=function(file) {return((file.type==='8BPF')&&file.name.match(/^Actions Palette$/i))||file.name.match(/^Actions Palette.psp$/i);};function readBEInt(file,byteCount) {var bytes=file.read(byteCount);var intValue=0;for(var index=0;index<byteCount;index++) {intValue=(intValue<<8)+bytes.charCodeAt(index);} return intValue;} function readBytes(file,byteCount) {return file.read(byteCount);} function readByteString(file) {var stringLength=readBEInt(file,4);return readBytes(file,stringLength);} function readUnicodeString(file) {var unicodeString="";var unicodeLength=readBEInt(file,4);for(var index=0;index<unicodeLength;index++) {var unicodeChar=readBEInt(file,2);if(unicodeChar!==0) {unicodeString+=String.fromCharCode(unicodeChar);}} return unicodeString;} function readEventId(file) {var eventId=0;var eventType=readBytes(file,4);switch(eventType) {case'TEXT':eventId=app.stringIDToTypeID(readByteString(file));break;case'long':eventId=app.charIDToTypeID(readBytes(file,4));break;default:throw new Error("[jamActions readEventId] Unrecognized event type: '"+eventType+"'");break;} return eventId;} function skipDouble(file) {file.seek(8,1);} function skipDoubles(file,doubleCount) {file.seek(doubleCount*8,1);} function skipInt8(file) {file.seek(1,1);} function skipInt16(file) {file.seek(2,1);} function skipInt32(file) {file.seek(4,1);} function skipInt64(file) {file.seek(8,1);} function skipBytes(file,byteCount) {file.seek(byteCount,1);} function skipByteString(file) {var stringLength=readBEInt(file,4);skipBytes(file,stringLength);} function skipUnicodeString(file) {var unicodeLength=readBEInt(file,4);skipBytes(file,unicodeLength*2);} function skipId(file) {var idLength=readBEInt(file,4);if(idLength) {skipBytes(file,idLength);} else {skipBytes(file,4);}} function skipClass(file) {skipUnicodeString(file);skipId(file);} function skipObject(file) {skipClass(file);var itemCount=readBEInt(file,4);for(var itemIndex=0;itemIndex<itemCount;itemIndex++) {skipId(file);skipItem(file);}} function skipList(file) {var itemCount=readBEInt(file,4);for(var itemIndex=0;itemIndex<itemCount;itemIndex++) {skipItem(file);}} function skipItem(file) {var typeId=readBytes(file,4);switch(typeId) {case'obj ':skipReference(file);break;case'Objc':case'GlbO':skipObject(file);break;case'type':case'GlbC':skipClass(file);break;case'VlLs':skipList(file);break;case'doub':skipDouble(file);break;case'UntF':skipBytes(file,4);skipDouble(file);break;case'TEXT':skipUnicodeString(file);break;case'enum':skipId(file);skipId(file);break;case'long':skipInt32(file);break;case'comp':skipInt64(file);break;case'bool':skipInt8(file);break;case'alis':skipByteString(file);break;case'Pth ':skipByteString(file);break;case'tdta':skipByteString(file);break;case'ObAr':var objCount=readBEInt(file,4);skipClass(file);var itemCount=readBEInt(file,4);for(var itemIndex=0;itemIndex<itemCount;itemIndex++) {skipId(file);skipInt32(file);skipInt32(file);var doublesCount=readBEInt(file,4);skipDoubles(file,doublesCount);} break;default:throw new Error("[jamActions skipItem] Unrecognized item type: '"+typeId+"'");break;}} function skipReference(file) {var itemCount=readBEInt(file,4);for(var itemIndex=0;itemIndex<itemCount;itemIndex++) {var formId=readBytes(file,4);skipClass(file);switch(formId) {case'Clss':break;case'prop':skipId(file);break;case'Enmr':skipId(file);skipId(file);break;case'rele':skipInt32(file);break;case'Idnt':skipInt32(file);break;case'indx':skipInt32(file);break;case'name':skipUnicodeString(file);break;default:throw new Error("[jamActions skipReference] Unrecognized item form: '"+formId+"'");break;}}} jamActions.readActionDescriptor=function(file,insertVersionPrefix) {var versionPrefix="\x00\x00\x00\x10";var start=file.tell();if(!insertVersionPrefix) {if(file.read(4)===versionPrefix) {versionPrefix="";} else {throw new Error('[jamActions.readActionDescriptor] Unrecognized version prefix');}} skipObject(file);var end=file.tell();file.seek(start,0);var stream=versionPrefix+file.read(end-start);var actionDescriptor=new ActionDescriptor();actionDescriptor.fromStream(stream);return actionDescriptor;};jamActions.dataFromActionsFile=function(actionsFile,isPalette) {var that=this;function parseActionSet(file) {var actionSet={};actionSet.name=localize(readUnicodeString(file));actionSet.expanded=(readBEInt(file,1)!==0);var actionCount=readBEInt(file,4);actionSet.actions=[];for(var actionIndex=0;actionIndex<actionCount;actionIndex++) {var action={};action.functionKey=readBEInt(file,2);action.shiftKey=(readBEInt(file,1)!==0);action.commandKey=(readBEInt(file,1)!==0);action.colorIndex=readBEInt(file,2);action.name=localize(readUnicodeString(file));action.expanded=(readBEInt(file,1)!==0);var commandCount=readBEInt(file,4);action.commands=[];for(var commandIndex=0;commandIndex<commandCount;commandIndex++) {var command={};command.expanded=(readBEInt(file,1)!==0);command.enabled=(readBEInt(file,1)!==0);command.withDialog=(readBEInt(file,1)!==0);command.dialogOptions=readBEInt(file,1);command.eventId=readEventId(file);command.dictionaryName=readByteString(file);if(readBEInt(file,4)!==0) {command.actionDescriptor=that.readActionDescriptor(file,true);} action.commands.push(command);} actionSet.actions.push(action);} return actionSet;} var file;if(typeof actionsFile==='string') {file=new File(actionsFile);} else if(actionsFile instanceof File) {file=actionsFile;} else {throw new Error('[jamActions.dataFromActionsFile] Invalid argument');} var fileData;if(file.open("r")) {try {file.encoding='BINARY';var fileVersion=readBEInt(file,4);if(fileVersion===16) {fileData={};fileData.version=fileVersion;if(isPalette) {fileData.actionSets=[];var actionSetCount=readBEInt(file,4);for(var actionSetIndex=0;actionSetIndex<actionSetCount;actionSetIndex++) {fileData.actionSets.push(parseActionSet(file));}} else {fileData.actionSet=parseActionSet(file);}} else {fileData="Unsupported actions file version: "+fileVersion;}} catch(e) {fileData=e.message;} finally {file.close();}} else {fileData="Cannot open file";} return fileData;};jamActions.isLocalPlayCommand=function(command,actionSetName) {var localPlayCommand=null;if(command.eventId===app.stringIDToTypeID("play")) {var targetId=app.stringIDToTypeID("target");if(command.actionDescriptor.hasKey(targetId)) {var localReference=command.actionDescriptor.getReference(targetId);do {try{var desiredClassId=localReference.getDesiredClass();}catch(e){break;} switch(desiredClassId) {case app.stringIDToTypeID("command"):var localCommandIndex=localReference.getIndex()-1;break;case app.stringIDToTypeID("action"):var localActionName=localReference.getName();break;case app.stringIDToTypeID("actionSet"):var localActionSetName=localReference.getName();break;} localReference=localReference.getContainer();} while(localReference);} var continueId=app.stringIDToTypeID("continue");if(command.actionDescriptor.hasKey(continueId)) {var localContinue=command.actionDescriptor.getBoolean(continueId);} if((typeof localActionSetName!=='undefined')&&(localActionSetName===actionSetName)) {localPlayCommand=[localActionName,localCommandIndex,localContinue];}} return localPlayCommand;};jamActions.determineDialogMode=function(command) {var dialogMode;switch(command.dialogOptions) {case 0:dialogMode=command.withDialog?DialogModes.ALL:DialogModes.NO;break;case 2:dialogMode=DialogModes.NO;break;case 1:case 3:dialogMode=DialogModes.ALL;break;} return dialogMode;} var globalCommandHandler=null;jamActions.setCommandHandler=function(commandHandler) {globalCommandHandler=commandHandler;};jamActions.traverseAction=function(actionSet,actionLocator,fromCommandIndex,continuePlay) {function handleCommands(commands) {var commandMax=(continuePlay)?commands.length:fromCommandIndex+1;for(var commandIndex=fromCommandIndex;commandIndex<commandMax;commandIndex++) {if(globalCommandHandler!==null) {globalCommandHandler(commands[commandIndex]);}}} if(typeof fromCommandIndex==='undefined') {fromCommandIndex=0;continuePlay=true;} var actions=actionSet.actions;if(typeof actionLocator==='string') {var actionName=actionLocator;for(var actionIndex=0;actionIndex<actions.length;actionIndex++) {var action=actions[actionIndex];if(action.name===actionName) {handleCommands(action.commands);break;}}} else if(typeof actionLocator==='number') {var actionIndex=actionLocator;if((actionIndex>=0)&&(actionIndex<actions.length)) {handleCommands(actions[actionIndex].commands);}}};}());}
3 | 


--------------------------------------------------------------------------------
/JSX Utility Scripts/jamEngine Action to JSX/jamJSON-min.jsxinc:
--------------------------------------------------------------------------------
1 | // jamJSON.jsxinc v4.4 (minified)
2 | if(typeof jamJSON!=='object') {var jamJSON={};(function() {var state;var stack;var container;var key;var value;var escapes={'\\':'\\','"':'"','/':'/','t':'\t','n':'\n','r':'\r','f':'\f','b':'\b'};var action={'{':{go:function() {stack.push({state:'ok'});container={};state='firstokey';},ovalue:function() {stack.push({container:container,state:'ocomma',key:key});container={};state='firstokey';},firstavalue:function() {stack.push({container:container,state:'acomma'});container={};state='firstokey';},avalue:function() {stack.push({container:container,state:'acomma'});container={};state='firstokey';}},'}':{firstokey:function() {var pop=stack.pop();value=container;container=pop.container;key=pop.key;state=pop.state;},ocomma:function() {var pop=stack.pop();container[key]=value;value=container;container=pop.container;key=pop.key;state=pop.state;}},'[':{go:function() {stack.push({state:'ok'});container=[];state='firstavalue';},ovalue:function() {stack.push({container:container,state:'ocomma',key:key});container=[];state='firstavalue';},firstavalue:function() {stack.push({container:container,state:'acomma'});container=[];state='firstavalue';},avalue:function() {stack.push({container:container,state:'acomma'});container=[];state='firstavalue';}},']':{firstavalue:function() {var pop=stack.pop();value=container;container=pop.container;key=pop.key;state=pop.state;},acomma:function() {var pop=stack.pop();container.push(value);value=container;container=pop.container;key=pop.key;state=pop.state;}},':':{colon:function() {if(container.hasOwnProperty(key)) {throw new SyntaxError("[jamJSON.parse] Duplicate key: “"+key+"”");} state='ovalue';}},',':{ocomma:function() {container[key]=value;state='okey';},acomma:function() {container.push(value);state='avalue';}},'true':{go:function() {value=true;state='ok';},ovalue:function() {value=true;state='ocomma';},firstavalue:function() {value=true;state='acomma';},avalue:function() {value=true;state='acomma';}},'false':{go:function() {value=false;state='ok';},ovalue:function() {value=false;state='ocomma';},firstavalue:function() {value=false;state='acomma';},avalue:function() {value=false;state='acomma';}},'null':{go:function() {value=null;state='ok';},ovalue:function() {value=null;state='ocomma';},firstavalue:function() {value=null;state='acomma';},avalue:function() {value=null;state='acomma';}}};var number={go:function() {state='ok';},ovalue:function() {state='ocomma';},firstavalue:function() {state='acomma';},avalue:function() {state='acomma';}};var string={go:function() {state='ok';},firstokey:function() {key=value;state='colon';},okey:function() {key=value;state='colon';},ovalue:function() {state='ocomma';},firstavalue:function() {state='acomma';},avalue:function() {state='acomma';}};var commentFunc=function(){};function debackslashify(text) {return text.replace(/\\(?:u(.{4})|([^u]))/g,function(a,b,c){return(b)?String.fromCharCode(parseInt(b,16)):escapes[c];});} jamJSON.parse=function(text,validate,allowComments) {if(validate) {var tx=/^[\x20\t\n\r]*(?:([,:\[\]{}]|true|false|null)|(-?(?:0|[1-9][0-9]*)(?:\.[0-9]+)?(?:[eE][+\-]?[0-9]+)?)|"((?:[^\r\n\t\\\"]|\\(?:["\\\/trnfb]|u[0-9a-fA-F]{4}))*)")/;var txc=/^[\x20\t\n\r]*(?:(\/(?:\/.*|\*(?:.|[\r\n])*?\*\/))|([,:\[\]{}]|true|false|null)|(-?(?:0|[1-9][0-9]*)(?:\.[0-9]+)?(?:[eE][+\-]?[0-9]+)?)|"((?:[^\r\n\t\\\"]|\\(?:["\\\/trnfb]|u[0-9a-fA-F]{4}))*)")/;var r;var i;var actionFunc;state='go';stack=[];try {while(true) {i=(allowComments)?1:0;r=(allowComments)?txc.exec(text):tx.exec(text);if(!r) {break;} if(allowComments&&r[1]) {actionFunc=commentFunc;} else if(r[i+1]) {actionFunc=action[r[i+1]][state];} else if(r[i+2]) {value=+r[i+2];actionFunc=number[state];} else {value=debackslashify(r[i+3]);actionFunc=string[state];} if(actionFunc) {actionFunc();text=text.slice(r[0].length);} else {break;}}} catch(e) {state=e;} if(state!=='ok'||/[^\x20\t\n\r]/.test(text)) {throw state instanceof SyntaxError?state:new SyntaxError("[jamJSON.parse] Invalid JSON");} return value;} else {return eval('('+text+')');}};var escapable=/[\\\"\x00-\x1F\x7F-\x9F\u00AD\u0600-\u0604\u070F\u17B4\u17B5\u200C-\u200F\u2028-\u202F\u2060-\u206F\uFEFF\uFFF0-\uFFFF]/g;var meta={'\b':'\\b','\t':'\\t','\n':'\\n','\f':'\\f','\r':'\\r','"':'\\"','\\':'\\\\'};var gap;var indent;var prefixIndent;function quote(string) {escapable.lastIndex=0;return escapable.test(string)?'"'+string.replace(escapable,function(a){var c=meta[a];return(typeof c==='string')?c:'\\u'+('0000'+a.charCodeAt(0).toString(16).toUpperCase()).slice(-4);})+'"':'"'+string+'"';} function str(value) {var i;var k;var v;var mind=gap;var partial;switch(typeof value) {case'string':return quote(value);case'number':return isFinite(value)?String(value):'null';case'boolean':case'null':return String(value);case'object':if(!value) {return'null';} gap+=indent;partial=[];if(value.constructor===Array) {for(i=0;i<value.length;i++) {partial[i]=str(value[i]);} v=(partial.length===0)?(gap?'[\n'+prefixIndent+mind+']':'[ ]'):(gap?'[\n'+prefixIndent+gap+partial.join(',\n'+prefixIndent+gap)+'\n'+prefixIndent+mind+']':'[ '+partial.join(', ')+' ]');gap=mind;return v;} else {for(k in value) {if(value.hasOwnProperty(k)) {v=str(value[k]);if(v) {partial.push(quote(k)+(gap&&((v.charAt(0)==='{')||(v.charAt(0)==='['))?':\n'+prefixIndent+gap:': ')+v);}}} v=(partial.length===0)?(gap?'{\n'+prefixIndent+mind+'}':'{ }'):(gap?'{\n'+prefixIndent+gap+partial.join(',\n'+prefixIndent+gap)+'\n'+prefixIndent+mind+'}':'{ '+partial.join(', ')+' }');gap=mind;return v;} default:throw new SyntaxError("[jamJSON.stringify] Invalid JSON");}} jamJSON.stringify=function(value,space,prefix) {var i;gap='';indent='';prefixIndent='';if(typeof space==='number') {for(i=0;i<space;i++) {indent+=' ';}} else if(typeof space==='string') {indent=space;} if(typeof prefix==='number') {for(i=0;i<prefix;i++) {prefixIndent+=' ';}} else if(typeof prefix==='string') {prefixIndent=prefix;} return prefixIndent+str(value);};}());}
3 | 


--------------------------------------------------------------------------------
/JSX Utility Scripts/jamEngine Action to JSX/jamUtils-min.jsxinc:
--------------------------------------------------------------------------------
1 | // jamUtils.jsxinc v4.4 (minified)
2 | if(typeof jamUtils!=='object') {var jamUtils={};(function() {jamUtils.toDistanceUnit=function(amount,amountBasePerInch) {return(amount/amountBasePerInch)*72.0;};jamUtils.fromDistanceUnit=function(amount,amountBasePerInch) {return(amount/72.0)*amountBasePerInch;};jamUtils.fontExists=function(fontPostScriptName) {var useDOM=true;var found=false;if(useDOM) {for(var i=0;i<app.fonts.length;i++) {if(app.fonts[i].postScriptName===fontPostScriptName) {found=true;break;}}} else {var saveMeaningfulIds=jamEngine.meaningfulIds;var saveParseFriendly=jamEngine.parseFriendly;jamEngine.meaningfulIds=true;jamEngine.parseFriendly=true;var resultDescriptorObj=jamEngine.jsonGet ([["property",["<property>","fontList"]],["application",["<enumerated>",["ordinal","targetEnum"]]]]);var fontPostScriptNameArr=resultDescriptorObj["fontList"][1][1]["fontPostScriptName"][1];for(var i=0;i<fontPostScriptNameArr.length;i++) {if(fontPostScriptNameArr[i][1]===fontPostScriptName) {found=true;break;}} jamEngine.meaningfulIds=saveMeaningfulIds;jamEngine.parseFriendly=saveParseFriendly;} return found;};jamUtils.loadAction=function(action,actionSet,actionsFilePath) {try {jamEngine.jsonGet([["action",["<name>",action]],["actionSet",["<name>",actionSet]]]);var found=true;} catch(e) {var found=false;} if(!found) {jamEngine.jsonPlay("open",{"target":["<path>",actionsFilePath]});}};jamUtils.loadActionSet=function(actionSet,actionsFilePath) {try {jamEngine.jsonGet([["actionSet",["<name>",actionSet]]]);var found=true;} catch(e) {var found=false;} if(!found) {jamEngine.jsonPlay("open",{"target":["<path>",actionsFilePath]});}};jamUtils.loadPreset=function(presetProperty,presetName,presetFilePath) {var useDOM=false;var useOpen=true;var classes={"brush":"brush","colors":"color","gradientClassEvent":"gradientClassEvent","style":"styleClass","pattern":"'PttR'","shapingCurve":"shapingCurve","customShape":"customShape","toolPreset":"toolPreset"};var presetClass=classes[presetProperty];var saveMeaningfulIds=jamEngine.meaningfulIds;var saveParseFriendly=jamEngine.parseFriendly;jamEngine.meaningfulIds=true;jamEngine.parseFriendly=true;var found=false;var resultDescriptorObj=jamEngine.jsonGet ([["property",["<property>","presetManager"]],["application",["<enumerated>",["ordinal","targetEnum"]]]]);var presetManagerArr=resultDescriptorObj["presetManager"][1];for(var i=0;i<presetManagerArr.length;i++) {var presets=presetManagerArr[i][1];if(presets[0]===presetClass) {var presetsArr=presets[1]["name"][1];for(var j=0;j<presetsArr.length;j++) {if(presetsArr[j][1]===presetName) {found=true;break;}} break;}} if(!found) {if(useDOM) {app.load(new File(presetFilePath));} else if(useOpen) {jamEngine.jsonPlay("open",{"target":["<path>",presetFilePath]});} else {jamEngine.jsonPlay ("set",{"target":["<reference>",[["property",["<property>",presetProperty]],["application",["<enumerated>",["ordinal","targetEnum"]]]]],"to":["<path>",presetFilePath],"append":["<boolean>",true]});}} jamEngine.meaningfulIds=saveMeaningfulIds;jamEngine.parseFriendly=saveParseFriendly;};function getFileObject(file) {var fileObject;if(file instanceof File) {fileObject=file;} else if(typeof file==='string') {fileObject=new File(file);} else {throw new Error('[jamUtils getFileObject] Invalid argument');} return fileObject;} jamUtils.readTextFile=function(textFile) {var text=null;var file=getFileObject(textFile);if(file.open("r")) {text=file.read();file.close();} return text;};jamUtils.readJsonFile=function(jsonFile) {return jamJSON.parse(this.readTextFile(jsonFile),true);};jamUtils.writeTextFile=function(textFile,text) {var file=getFileObject(textFile);if(file.open('w','TEXT')) {file.encoding='UTF-8';file.lineFeed='unix';file.write('\uFEFF');file.write(text);file.close();}};jamUtils.writeJsonFile=function(jsonFile,data,space) {this.writeTextFile(jsonFile,jamJSON.stringify(data,space));};jamUtils.cloneData=function(data) {var clone;if(data===null) {clone=data;} else if(data.constructor===Object) {clone={};for(var k in data) {if(data.hasOwnProperty(k)) {clone[k]=this.cloneData(data[k]);}}} else if(data.constructor===Array) {clone=[];for(var i=0;i<data.length;i++) {clone.push(this.cloneData(data[i]));}} else {clone=data;} return clone;};jamUtils.mergeData=function(data,defaultData) {for(var k in defaultData) {if(defaultData.hasOwnProperty(k)) {if(k in data) {if((defaultData[k]!==null)&&(defaultData[k].constructor===Object)) {data[k]=this.mergeData(data[k],defaultData[k]);}} else {data[k]=this.cloneData(defaultData[k]);}}} return data;};var jsonCustomOptionsStringKey="jsonCustomOptions";jamUtils.getCustomOptions=function(signature,defaultOptions) {var saveMeaningfulIds=jamEngine.meaningfulIds;var saveParseFriendly=jamEngine.parseFriendly;jamEngine.meaningfulIds=true;jamEngine.parseFriendly=false;try {var resultObj=jamEngine.classIdAndActionDescriptorToJson(jamEngine.uniIdStrToId(signature),app.getCustomOptions(signature));var customOptions=jamJSON.parse(resultObj["<descriptor>"][jsonCustomOptionsStringKey]["<string>"],true)} catch(e) {var customOptions={};} jamEngine.meaningfulIds=saveMeaningfulIds;jamEngine.parseFriendly=saveParseFriendly;return this.mergeData(customOptions,defaultOptions);};jamUtils.putCustomOptions=function(signature,customOptions,persistent) {var descriptorObj={};descriptorObj[jsonCustomOptionsStringKey]=["<string>",jamJSON.stringify(customOptions)];app.putCustomOptions(signature,jamEngine.jsonToActionDescriptor(descriptorObj),persistent);};jamUtils.eraseCustomOptions=function(signature) {app.eraseCustomOptions(signature);};jamUtils.dataToHexaString=function(dataString,lowercase) {var hexaDigits=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];var hexaString="";var length=dataString.length;for(var index=0;index<length;index++) {var dataByte=dataString.charCodeAt(index);if((dataByte>=0x00)&&(dataByte<=0xFF)) {hexaString+=hexaDigits[(dataByte&0xF0)>>4]+hexaDigits[dataByte&0x0F];} else {throw new Error("[jamUtils.dataToHexaString] Invalid data string");}} if(lowercase) {hexaString=hexaString.toLowerCase();} return hexaString;};jamUtils.hexaToDataString=function(hexaString) {var dataString="";var length=hexaString.length;if(((length%2)===0)&&(/^[0-9A-Fa-f]*$/.test(hexaString))) {for(var index=0;index<length;index+=2) {var byteString=hexaString.slice(index,index+2);dataString+=String.fromCharCode(parseInt(byteString,16));}} else {throw new Error("[jamUtils.hexaToDataString] Invalid hexa string");} return dataString;};}());}
3 | 


--------------------------------------------------------------------------------
/JSX Utility Scripts/jsh.jsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hennamann/CEP-Toolkit/003ff3e562db1e8693461cac93f94c119ddad0b3/JSX Utility Scripts/jsh.jsx


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CEP-Toolkit
 2 | A repository for housing various tools useful for CEP extension development. This might include
 3 | - JSX Scripts
 4 | - Plugins
 5 | - UI Libraries
 6 | - Documentation
 7 | 
 8 | ## Useful Documentation
 9 | **Adobe CEP Guides and Resources**
10 | - Adobe Bridge CEP Cookbook: https://github.com/Hennamann/CEP-Toolkit/blob/master/CEP_7_Extensions_Cookbook_Bridge.pdf
11 | - Adobe Bridge CEP Samples Repo: https://github.com/siddharthsingh89/BridgeSamples
12 | - Adobe CEP-Resources: https://github.com/Adobe-CEP/CEP-Resources 
13 | - Adobe CEP-Samples https://github.com/Adobe-CEP/Samples
14 | - Getting started with HTML5 Panels for After Effects: http://victorianece.com/2015/12/getting-started-with-html5-cep-panels-for-after-effects/
15 | - Adobe After Effects CC 2015 Panel SDK Guide (PDF): http://download.macromedia.com/pub/developer/aftereffects/panelsdk/Adobe_After_Effects_CC_2015_Panel_SDK_Guide.pdf
16 | - Packaging and Signing ZXP Extensions Technote (PDF): http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/creativesuite/pdfs/SigningTechNote_CC.pdf
17 | - Extending Adobe CC 2014 Apps: https://medium.com/@HallgrimurTh/extending-adobe-cc-2014-apps-ba1d101e27da#.f2b9dev8s
18 | - A short guide to HTML5 Extensions: http://www.adobe.com/devnet/creativesuite/articles/a-short-guide-to-HTML5-extensions.html
19 | - Adobe Audition Panel Samples: https://github.com/Adobe-CEP/Samples/tree/master/Audition 
20 | **Extendscript Guides:**
21 | - Adobe Guide to Scripting (PDF): http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/scripting/pdfs/adobe_intro_to_scripting.pdf
22 | - Javascript Tools Guide CC (PDF): http://download.macromedia.com/pub/developer/aftereffects/scripting/JavaScript-Tools-Guide-CC.pdf
23 | - Adobe Photoshop CC 2015 Scripting Guide (PDF): http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/photoshop/pdfs/photoshop-cc-scripting-guide-2015.pdf
24 | - Adobe Illustrator CC 2015 Scripting Guide (PDF): http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/illustrator/sdk/CC2015_3/AI_ScriptGd.pdf
25 | - Adobe After Effects CS6 Scripting Guide (PDF):
26 | http://download.macromedia.com/pub/developer/aftereffects/scripting/After-Effects-CS6-Scripting-Guide.pdf 
27 | - Adobe InCopy CS6 Scripting Guide (PDF): http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/indesign/sdk/cs6/incopy-scripting/InCopy_ScriptingGuide_JS.pdf
28 | - Adobe InDesign CS6 Scripting Tutorial (PDF): http://wwwimages.adobe.com/content/dam/Adobe/en/devnet/indesign/sdk/cs6/scripting/InDesign_ScriptingTutorial.pdf
29 | 


--------------------------------------------------------------------------------
/ScriptingListener/Scripting_Plug_In_Release.dmg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hennamann/CEP-Toolkit/003ff3e562db1e8693461cac93f94c119ddad0b3/ScriptingListener/Scripting_Plug_In_Release.dmg


--------------------------------------------------------------------------------
/ScriptingListener/Win_Scripting_Plug-In.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Hennamann/CEP-Toolkit/003ff3e562db1e8693461cac93f94c119ddad0b3/ScriptingListener/Win_Scripting_Plug-In.zip


--------------------------------------------------------------------------------
/Spectrum UI Library/CSS/styles-dark.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Copyright (c) 2015 Adobe Systems Incorporated. All rights reserved.
  3 |  *
  4 |  * Permission is hereby granted, free of charge, to any person obtaining a
  5 |  * copy of this software and associated documentation files (the "Software"),
  6 |  * to deal in the Software without restriction, including without limitation
  7 |  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  8 |  * and/or sell copies of the Software, and to permit persons to whom the
  9 |  * Software is furnished to do so, subject to the following conditions:
 10 |  *
 11 |  * The above copyright notice and this permission notice shall be included in
 12 |  * all copies or substantial portions of the Software.
 13 |  *
 14 |  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 15 |  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 16 |  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 17 |  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 18 |  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 19 |  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 20 |  * DEALINGS IN THE SOFTWARE.
 21 |  *
 22 |  */
 23 | /* DO NOT EDIT THIS FILE.  It is generated from other sources */
 24 | 
 25 | /*Settings*/
 26 | :root {
 27 |     /* todo (jwyles): maybe we can scope things to their actual contents eg button {
 28 |         --border-color: #aabbcc;
 29 |     };
 30 |     and stuck to their bottom of their respective files.
 31 |     I am trying to respect the ITCSS way of life strictly for now.
 32 |     I am pretty sure it won't work out in a css4 world.
 33 |     Since this is my first dive into this world, lets see if a pattern emerges as we build.
 34 |     */
 35 | }
 36 | @font-face {
 37 |     font-family: AdobeClean;
 38 |     src: url("../fonts/AdobeClean-Regular.otf") format("opentype");
 39 | }
 40 | 
 41 | @font-face {
 42 |     font-family: AdobeClean;
 43 |     src: url("../fonts/AdobeClean-Bold.otf") format("opentype");
 44 |     font-weight: bold
 45 | }
 46 | 
 47 | @font-face {
 48 |     font-family: AdobeClean;
 49 |     src: url("../fonts/AdobeClean-Light.otf") format("opentype");
 50 |     font-weight: lighter
 51 | }
 52 | 
 53 | 
 54 | :root {
 55 |     /* you want this to go from newest to oldest in terms of os */
 56 | }
 57 | /*Tools*/
 58 | /*Generic*/
 59 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
 60 | 
 61 | /**
 62 |  * 1. Set default font family to sans-serif.
 63 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
 64 |  *    user zoom.
 65 |  */
 66 | 
 67 | html {
 68 |   font-family: sans-serif; /* 1 */
 69 |   -ms-text-size-adjust: 100%; /* 2 */
 70 |   -webkit-text-size-adjust: 100%; /* 2 */
 71 | }
 72 | 
 73 | /**
 74 |  * Remove default margin.
 75 |  */
 76 | 
 77 | body {
 78 |   margin: 0;
 79 | }
 80 | 
 81 | /* HTML5 display definitions
 82 |    ========================================================================== */
 83 | 
 84 | /**
 85 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 86 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 87 |  * and Firefox.
 88 |  * Correct `block` display not defined for `main` in IE 11.
 89 |  */
 90 | 
 91 | article,
 92 | aside,
 93 | details,
 94 | figcaption,
 95 | figure,
 96 | footer,
 97 | header,
 98 | hgroup,
 99 | main,
100 | menu,
101 | nav,
102 | section,
103 | summary {
104 |   display: block;
105 | }
106 | 
107 | /**
108 |  * 1. Correct `inline-block` display not defined in IE 8/9.
109 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
110 |  */
111 | 
112 | audio,
113 | canvas,
114 | progress,
115 | video {
116 |   display: inline-block; /* 1 */
117 |   vertical-align: baseline; /* 2 */
118 | }
119 | 
120 | /**
121 |  * Prevent modern browsers from displaying `audio` without controls.
122 |  * Remove excess height in iOS 5 devices.
123 |  */
124 | 
125 | audio:not([controls]) {
126 |   display: none;
127 |   height: 0;
128 | }
129 | 
130 | /**
131 |  * Address `[hidden]` styling not present in IE 8/9/10.
132 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
133 |  */
134 | 
135 | [hidden],
136 | template {
137 |   display: none;
138 | }
139 | 
140 | /* Links
141 |    ========================================================================== */
142 | 
143 | /**
144 |  * Remove the gray background color from active links in IE 10.
145 |  */
146 | 
147 | a {
148 |   background-color: transparent;
149 | }
150 | 
151 | /**
152 |  * Improve readability when focused and also mouse hovered in all browsers.
153 |  */
154 | 
155 | a:active,
156 | a:hover {
157 |   outline: 0;
158 | }
159 | 
160 | /* Text-level semantics
161 |    ========================================================================== */
162 | 
163 | /**
164 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
165 |  */
166 | 
167 | abbr[title] {
168 |   border-bottom: 1px dotted;
169 | }
170 | 
171 | /**
172 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
173 |  */
174 | 
175 | b,
176 | strong {
177 |   font-weight: bold;
178 | }
179 | 
180 | /**
181 |  * Address styling not present in Safari and Chrome.
182 |  */
183 | 
184 | dfn {
185 |   font-style: italic;
186 | }
187 | 
188 | /**
189 |  * Address variable `h1` font-size and margin within `section` and `article`
190 |  * contexts in Firefox 4+, Safari, and Chrome.
191 |  */
192 | 
193 | h1 {
194 |   font-size: 2em;
195 |   margin: 0.67em 0;
196 | }
197 | 
198 | /**
199 |  * Address styling not present in IE 8/9.
200 |  */
201 | 
202 | mark {
203 |   background: #ff0;
204 |   color: #000;
205 | }
206 | 
207 | /**
208 |  * Address inconsistent and variable font size in all browsers.
209 |  */
210 | 
211 | small {
212 |   font-size: 80%;
213 | }
214 | 
215 | /**
216 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
217 |  */
218 | 
219 | sub,
220 | sup {
221 |   font-size: 75%;
222 |   line-height: 0;
223 |   position: relative;
224 |   vertical-align: baseline;
225 | }
226 | 
227 | sup {
228 |   top: -0.5em;
229 | }
230 | 
231 | sub {
232 |   bottom: -0.25em;
233 | }
234 | 
235 | /* Embedded content
236 |    ========================================================================== */
237 | 
238 | /**
239 |  * Remove border when inside `a` element in IE 8/9/10.
240 |  */
241 | 
242 | img {
243 |   border: 0;
244 | }
245 | 
246 | /**
247 |  * Correct overflow not hidden in IE 9/10/11.
248 |  */
249 | 
250 | svg:not(:root) {
251 |   overflow: hidden;
252 | }
253 | 
254 | /* Grouping content
255 |    ========================================================================== */
256 | 
257 | /**
258 |  * Address margin not present in IE 8/9 and Safari.
259 |  */
260 | 
261 | figure {
262 |   margin: 1em 40px;
263 | }
264 | 
265 | /**
266 |  * Address differences between Firefox and other browsers.
267 |  */
268 | 
269 | hr {
270 |   box-sizing: content-box;
271 |   height: 0;
272 | }
273 | 
274 | /**
275 |  * Contain overflow in all browsers.
276 |  */
277 | 
278 | pre {
279 |   overflow: auto;
280 | }
281 | 
282 | /**
283 |  * Address odd `em`-unit font size rendering in all browsers.
284 |  */
285 | 
286 | code,
287 | kbd,
288 | pre,
289 | samp {
290 |   font-family: monospace, monospace;
291 |   font-size: 1em;
292 | }
293 | 
294 | /* Forms
295 |    ========================================================================== */
296 | 
297 | /**
298 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
299 |  * styling of `select`, unless a `border` property is set.
300 |  */
301 | 
302 | /**
303 |  * 1. Correct color not being inherited.
304 |  *    Known issue: affects color of disabled elements.
305 |  * 2. Correct font properties not being inherited.
306 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
307 |  */
308 | 
309 | button,
310 | input,
311 | optgroup,
312 | select,
313 | textarea {
314 |   color: inherit; /* 1 */
315 |   font: inherit; /* 2 */
316 |   margin: 0; /* 3 */
317 | }
318 | 
319 | /**
320 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
321 |  */
322 | 
323 | button {
324 |   overflow: visible;
325 | }
326 | 
327 | /**
328 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
329 |  * All other form control elements do not inherit `text-transform` values.
330 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
331 |  * Correct `select` style inheritance in Firefox.
332 |  */
333 | 
334 | button,
335 | select {
336 |   text-transform: none;
337 | }
338 | 
339 | /**
340 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
341 |  *    and `video` controls.
342 |  * 2. Correct inability to style clickable `input` types in iOS.
343 |  * 3. Improve usability and consistency of cursor style between image-type
344 |  *    `input` and others.
345 |  */
346 | 
347 | button,
348 | html input[type="button"], /* 1 */
349 | input[type="reset"],
350 | input[type="submit"] {
351 |   -webkit-appearance: button; /* 2 */
352 |   cursor: pointer; /* 3 */
353 | }
354 | 
355 | /**
356 |  * Re-set default cursor for disabled elements.
357 |  */
358 | 
359 | button[disabled],
360 | html input[disabled] {
361 |   cursor: default;
362 | }
363 | 
364 | /**
365 |  * Remove inner padding and border in Firefox 4+.
366 |  */
367 | 
368 | button::-moz-focus-inner,
369 | input::-moz-focus-inner {
370 |   border: 0;
371 |   padding: 0;
372 | }
373 | 
374 | /**
375 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
376 |  * the UA stylesheet.
377 |  */
378 | 
379 | input {
380 |   line-height: normal;
381 | }
382 | 
383 | /**
384 |  * It's recommended that you don't attempt to style these elements.
385 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
386 |  *
387 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
388 |  * 2. Remove excess padding in IE 8/9/10.
389 |  */
390 | 
391 | input[type="checkbox"],
392 | input[type="radio"] {
393 |   box-sizing: border-box; /* 1 */
394 |   padding: 0; /* 2 */
395 | }
396 | 
397 | /**
398 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
399 |  * `font-size` values of the `input`, it causes the cursor style of the
400 |  * decrement button to change from `default` to `text`.
401 |  */
402 | 
403 | input[type="number"]::-webkit-inner-spin-button,
404 | input[type="number"]::-webkit-outer-spin-button {
405 |   height: auto;
406 | }
407 | 
408 | /**
409 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
410 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
411 |  *    (include `-moz` to future-proof).
412 |  */
413 | 
414 | input[type="search"] {
415 |   -webkit-appearance: textfield; /* 1 */ /* 2 */
416 |   box-sizing: content-box;
417 | }
418 | 
419 | /**
420 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
421 |  * Safari (but not Chrome) clips the cancel button when the search input has
422 |  * padding (and `textfield` appearance).
423 |  */
424 | 
425 | input[type="search"]::-webkit-search-cancel-button,
426 | input[type="search"]::-webkit-search-decoration {
427 |   -webkit-appearance: none;
428 | }
429 | 
430 | /**
431 |  * Define consistent border, margin, and padding.
432 |  */
433 | 
434 | fieldset {
435 |   border: 1px solid #c0c0c0;
436 |   margin: 0 2px;
437 |   padding: 0.35em 0.625em 0.75em;
438 | }
439 | 
440 | /**
441 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
442 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
443 |  */
444 | 
445 | legend {
446 |   border: 0; /* 1 */
447 |   padding: 0; /* 2 */
448 | }
449 | 
450 | /**
451 |  * Remove default vertical scrollbar in IE 8/9/10/11.
452 |  */
453 | 
454 | textarea {
455 |   overflow: auto;
456 | }
457 | 
458 | /**
459 |  * Don't inherit the `font-weight` (applied by a rule above).
460 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
461 |  */
462 | 
463 | optgroup {
464 |   font-weight: bold;
465 | }
466 | 
467 | /* Tables
468 |    ========================================================================== */
469 | 
470 | /**
471 |  * Remove most spacing between table cells.
472 |  */
473 | 
474 | table {
475 |   border-collapse: collapse;
476 |   border-spacing: 0;
477 | }
478 | 
479 | td,
480 | th {
481 |   padding: 0;
482 | }
483 | html {
484 |   box-sizing: border-box;
485 | }
486 | 
487 | *, *:before, *:after {
488 |   box-sizing: inherit;
489 | }
490 | /*Base*/
491 | body {
492 |     background-color: rgb(83, 83, 83);
493 | }
494 | html {
495 |     font-size: 62.5%
496 | }
497 | 
498 | body {
499 |     font-size: 16px;
500 |     font-size: 1.6rem;
501 |     font-family: "San Francisco", "Helvetica Neue", "Lucida Grande", "Segoe UI";
502 |     color: rgb(240, 240, 240);
503 | }
504 | 
505 | 
506 | p,
507 | span,
508 | h1,
509 | h2,
510 | h3,
511 | h4,
512 | h5,
513 | h6,
514 | label {
515 |     font-weight: normal;
516 |     font-family: "San Francisco", "Helvetica Neue", "Lucida Grande", "Segoe UI";
517 |     font-size: 12px;
518 |     font-size: 1.2rem;
519 | }
520 | 
521 | h1 {
522 |     font-size: 14px;
523 |     font-size: 1.4rem;
524 | }
525 | 
526 | h2 {
527 |     font-size: 12px;
528 |     font-size: 1.2rem;
529 | }
530 | 
531 | h3 {
532 |     font-size: 12px;
533 |     font-size: 1.2rem;
534 | }
535 | 
536 | 
537 | p[disabled],
538 | span[disabled],
539 | h1[disabled],
540 | h2[disabled],
541 | h3[disabled],
542 | h4[disabled],
543 | h5[disabled],
544 | h6[disabled],
545 | label[disabled] {
546 |      color: rgb(117, 117, 117);
547 | }
548 | 
549 | p.is-active,
550 | span.is-active,
551 | h1.is-active,
552 | h2.is-active,
553 | h3.is-active,
554 | h4.is-active,
555 | h5.is-active,
556 | h6.is-active,
557 | label.is-active {
558 |     font-weight: bold;
559 | }
560 | 
561 | /* todo, think more about this api. It means that if you have tabs you would need to update every class rather than the active.
562 | this could probably be better done with some better selectors */
563 | 
564 | p.is-inactive,
565 | span.is-inactive,
566 | h1.is-inactive,
567 | h2.is-inactive,
568 | h3.is-inactive,
569 | h4.is-inactive,
570 | h5.is-inactive,
571 | h6.is-inactive,
572 | label.is-inactive {
573 |     color: rgb(135, 135, 135);
574 | }
575 | 
576 | p.label-small,
577 | span.label-small,
578 | label.label-small,
579 | div.label-small {
580 |     font-size: 12px;
581 |     font-size: 1.2rem;
582 | }
583 | 
584 | 
585 | p.label-medium,
586 | span.label-medium,
587 | label.label-medium,
588 | div.label-medium {
589 |     font-size: 12px;
590 |     font-size: 1.2rem;
591 | }
592 | 
593 | p.label-large,
594 | span.label-large,
595 | label.label-large,
596 | div.label-large {
597 |     font-size: 14px;
598 |     font-size: 1.4rem;
599 | }
600 | 
601 | 
602 | input[type="radio"],
603 | input[type="checkbox"] {
604 |     position: absolute;
605 |     left: -999999px;
606 | }
607 | 
608 | input[type="radio"]:disabled + label,
609 | input[type="checkbox"]:disabled + label {
610 |     color: rgb(117, 117, 117);
611 | }
612 | 
613 | 
614 | input[type="radio"] + label:before,
615 | input[type="checkbox"] + label:before {
616 |     position: relative;
617 |     content: "\00A0";
618 |     display: inline-block;
619 |     width: 14px;
620 |     height: 14px;
621 | 
622 |     margin-right: 6px;
623 |     left: 0;
624 |     top: 1px;
625 |     background-color: rgb(77, 77, 77);
626 |     border: 1px solid rgb(130, 130, 130);
627 |     border-radius: 2px;
628 | }
629 | 
630 | input[type=checkbox]:checked + label:before {
631 |     background: rgb(211, 211, 211) url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve"><polyline fill="none" stroke="rgb(77, 77, 77)" stroke-width="2.5" stroke-miterlimit="10" points="2.8,6.3 6.4,9.6 11.6,3.7 "/></svg>') no-repeat;
632 |     border: 1px solid rgb(211, 211, 211);
633 | }
634 | 
635 | input[type=radio]:checked + label:before {
636 |     background: rgb(211, 211, 211) url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve"><circle fill="rgb(77, 77, 77)" cx="7" cy="7" r="3.3"/></svg>') no-repeat;
637 |     border: 1px solid rgb(211, 211, 211);
638 | }
639 | 
640 | input[type=checkbox]:indeterminate + label:before {
641 |     background: rgb(211, 211, 211) url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve"><line fill="none" stroke="rgb(77, 77, 77)" stroke-width="2" stroke-miterlimit="10" x1="3.6" y1="7.2" x2="10.6" y2="7.2"/></svg>') no-repeat;
642 |     border: 1px solid rgb(211, 211, 211);
643 | }
644 | 
645 | input[type="radio"]:active + label:before,
646 | input[type="checkbox"]:active + label:before,
647 | input[type="radio"].is-pressed + label:before,
648 | input[type="checkbox"].is-pressed + label:before {
649 |     background-color: rgb(130, 130, 130);
650 |     border: 1px solid rgb(130, 130, 130);
651 | }
652 | 
653 | select:disabled,
654 | input[type="radio"]:disabled + label:before,
655 | input[type="checkbox"]:disabled + label:before {
656 |     border: 1px solid rgb(94, 94, 94);
657 |     background-color: rgb(77, 77, 77);
658 |     color: rgb(117, 117, 117);
659 |     opacity: 1;
660 | }
661 | 
662 | input[type="radio"]:disabled:checked + label:before,
663 | input[type="checkbox"]:disabled:checked + label:before {
664 |     border: 1px solid rgb(94, 94, 94);
665 |     background-color: rgb(94, 94, 94);
666 | }
667 | 
668 | input[type="radio"] + label:before {
669 |     border-radius: 7px;
670 | }
671 | 
672 | 
673 | input[type="radio"]:focus + label:before,
674 | input[type="checkbox"]:focus + label:before,
675 | input[type="radio"].is-focused + label:before,
676 | input[type="checkbox"].is-focused + label:before  {
677 |     border: 1px solid rgb(51, 108, 229);
678 | }
679 | 
680 | input[type=text] {
681 |     border: none;
682 |     background-color: transparent;
683 |     border-bottom: 1px solid rgb(173, 173, 173);
684 |     padding-left: 4px;
685 |     outline: none;
686 | }
687 | 
688 | input[type=text]::-moz-selection {
689 |   background: rgb(56, 134, 232);
690 | }
691 | 
692 | input[type=text]::selection {
693 |   background: rgb(56, 134, 232);
694 | }
695 | 
696 | input[type=text]:focus,
697 | input[type=text].is-focused {
698 |     border-bottom: 1px solid rgb(51, 108, 229);
699 | }
700 | 
701 | select {
702 |     border-radius: 3px;
703 |     outline: none;
704 |     padding: 5px 20px 5px 5px;
705 |     border: 1px solid rgb(99, 99, 99);
706 |     background: rgb(71, 71, 71) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="11" height="4" viewBox="0 0 11 4">	<polygon fill="rgb(214, 214, 214)" points="3.5,4 0.3,0.8 1,0.1 3.5,2.6 6,0 6.7,0.8 "/></svg>') no-repeat 100% 50%;
707 |     background-size: 11px 7px;
708 |     -webkit-appearance: none;
709 |        -moz-appearance: none;
710 |             appearance: none;
711 | }
712 | 
713 | select option {
714 |       background-color: rgb(206, 206, 206);
715 |       color: rgb(28, 28, 28);
716 | }
717 | 
718 | 
719 | select:active,
720 | select.is-pressed{
721 |     background-color: rgb(52, 52, 52);
722 |     border: 1px solid rgb(99, 99, 99);
723 | }
724 | 
725 | select:disabled {
726 |     border: 1px solid rgb(94, 94, 94);
727 |     background: rgb(71, 71, 71) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="11" height="4" viewBox="0 0 11 4">	<polygon fill="rgb(102, 102, 102)" points="3.5,4 0.3,0.8 1,0.1 3.5,2.6 6,0 6.7,0.8 "/></svg>') no-repeat 100% 50%;
728 | }
729 | 
730 | input[type=checkbox]:checked + label:before {
731 |     text-indent: 2px;
732 | }
733 | /*Objects*/
734 | .container {
735 |     display: -webkit-box;
736 |     display: -webkit-flex;
737 |     display: -ms-flexbox;
738 |     display: flex; /* or inline-flex */
739 | }
740 | /*Components*/
741 | /* bug in css selectors currently, so can't use this just yet*/
742 | 
743 | 
744 | button,
745 | .button {
746 |     border: 1px solid --button-main-color;
747 |     border: 1px solid rgb(240, 240, 240);
748 |     background-color: rgb(83, 83, 83);
749 |     border-radius: 50px;
750 |     color: rgb(240, 240, 240);
751 |     display: inline-block;
752 |     padding: 5px 20px 5px;
753 |     font-family: "San Francisco", "Helvetica Neue", "Lucida Grande", "Segoe UI";
754 |     font-size: 14px;
755 |     font-size: 1.4rem;
756 |     outline: none;
757 | }
758 | 
759 | .btn-icon {
760 |     width: 29px;
761 |     height: 26px;
762 |     border-radius: 0;
763 |     border: none;
764 |     padding: 0;
765 |     vertical-align: middle;
766 |     border: 1px solid rgb(83, 83, 83);
767 | }
768 | 
769 | .btn-small {
770 |     border: 1px solid rgb(99, 99, 99);
771 |     background-color: rgb(71, 71, 71);
772 |     border-radius: 4px;
773 |     padding: 5px 20px 5px;
774 |     font-size: 12px;
775 |     font-size: 1.2rem;
776 | }
777 | 
778 | button:disabled,
779 | .button:disabled,
780 | button.is-disabled,
781 | .button.is-disabled,
782 | .btn-secondary.is-disabled,
783 | .btn-secondary:disabled {
784 |     color: rgb(117, 117, 117);
785 |     border: 1px solid rgb(94, 94, 94);
786 | }
787 | 
788 | .btn-small.is-disabled,
789 | .btn-small:disabled {
790 |     background-color: rgb(77, 77, 77);
791 |     border: 1px solid rgb(94, 94, 94);
792 |     color: rgb(175, 175, 175);
793 | }
794 | 
795 | .btn-small.is-pressed,
796 | .btn-small:active {
797 |     color: rgb(240, 240, 240);
798 |     border: 1px solid rgb(99, 99, 99);
799 |     background-color: rgb(56, 56, 56);
800 | }
801 | 
802 | 
803 | .btn-icon .icons {
804 |     fill: rgb(218, 218, 218);
805 | }
806 | 
807 | .btn-icon.is-disabled .icons,
808 | .btn-icon:disabled .icons{
809 |     opacity: .5;
810 | }
811 | 
812 | 
813 | button:active,
814 | .button:active,
815 | button.is-pressed,
816 | .button.is-pressed {
817 |      background-color: rgb(225, 225, 225);
818 |      color: rgb(50, 50, 50);
819 | }
820 | 
821 | button.btn-secondary,
822 | .button.btn-secondary {
823 |     border: 1px solid rgb(125, 125, 125);
824 | }
825 | 
826 | .btn-secondary:hover,
827 | .btn-secondary.is-hovered {
828 |     border: 1px solid rgb(125, 125, 125);
829 | }
830 | 
831 | .btn-icon:hover,
832 | .btn-icon.is-hovered {
833 |     border: 1px solid rgb(94, 94, 94);
834 |     background-color: rgb(71, 71, 71);
835 | }
836 | 
837 | .btn-icon:active,
838 | .btn-icon.is-pressed {
839 |     background-color: rgb(66, 66, 66);
840 | }
841 | 
842 | .btn-secondary:active,
843 | .btn-secondary.is-pressed {
844 |     background-color: rgb(125, 125, 125);
845 | }
846 | 
847 | button.is-focused,
848 | .button.is-focused,
849 | button:focus,
850 | .button:focus,
851 | .btn-secondary:focus,
852 | .btn-secondary.is-focused  {
853 |      border: 1px solid rgb(51, 108, 229);
854 | }
855 | /* there is a bug in postcss where this is not seeming to expand a variable inside a variable */
856 | 
857 | label[aria-haspopup=true] {
858 |     position: relative;
859 | }
860 | 
861 | 
862 | label[aria-haspopup=true] input + button {
863 |     /* have to overwrite these styles manually as there is a bug in postcss
864 |     that throws an error if i use appearance here.
865 |     */
866 |     border: none;
867 |     display: block;
868 |     padding: 0px;
869 | 
870 |     text-indent: 99999px;
871 |     height: 18px;
872 |     width: 11px;
873 |     position: absolute;
874 |     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="11" height="4" viewBox="0 0 11 4">	<polygon fill="rgb(214, 214, 214)" points="3.5,4 0.3,0.8 1,0.1 3.5,2.6 6,0 6.7,0.8 "/></svg>') no-repeat -50% 50%;
875 |     bottom: 0px;
876 |     right: 3px;
877 | }
878 | 
879 | 
880 | label[aria-haspopup=true].is-open input + button{
881 |     border-radius: 3px;
882 |     border: 1px solid rgb(179, 179, 179);
883 |     background-color: rgb(191, 191, 191);
884 | }
885 | /*themes*/
886 | :root {
887 |     /* todo (jwyles): maybe we can scope things to their actual contents eg button {
888 |         --border-color: #aabbcc;
889 |     };
890 |     and stuck to their bottom of their respective files.
891 |     I am trying to respect the ITCSS way of life strictly for now.
892 |     I am pretty sure it won't work out in a css4 world.
893 |     Since this is my first dive into this world, lets see if a pattern emerges as we build.
894 |     */
895 | }
896 | 
897 | 
898 | /*buttons*/
899 | 
900 | /*fonts */
901 | 
902 | 
903 | /*Utilities*/
904 | 
905 | 


--------------------------------------------------------------------------------
/Spectrum UI Library/CSS/styles-darker.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Copyright (c) 2015 Adobe Systems Incorporated. All rights reserved.
  3 |  *
  4 |  * Permission is hereby granted, free of charge, to any person obtaining a
  5 |  * copy of this software and associated documentation files (the "Software"),
  6 |  * to deal in the Software without restriction, including without limitation
  7 |  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  8 |  * and/or sell copies of the Software, and to permit persons to whom the
  9 |  * Software is furnished to do so, subject to the following conditions:
 10 |  *
 11 |  * The above copyright notice and this permission notice shall be included in
 12 |  * all copies or substantial portions of the Software.
 13 |  *
 14 |  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 15 |  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 16 |  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 17 |  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 18 |  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 19 |  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 20 |  * DEALINGS IN THE SOFTWARE.
 21 |  *
 22 |  */
 23 | /* DO NOT EDIT THIS FILE.  It is generated from other sources */
 24 | 
 25 | /*Settings*/
 26 | :root {
 27 |     /* todo (jwyles): maybe we can scope things to their actual contents eg button {
 28 |         --border-color: #aabbcc;
 29 |     };
 30 |     and stuck to their bottom of their respective files.
 31 |     I am trying to respect the ITCSS way of life strictly for now.
 32 |     I am pretty sure it won't work out in a css4 world.
 33 |     Since this is my first dive into this world, lets see if a pattern emerges as we build.
 34 |     */
 35 | }
 36 | @font-face {
 37 |     font-family: AdobeClean;
 38 |     src: url("../fonts/AdobeClean-Regular.otf") format("opentype");
 39 | }
 40 | 
 41 | @font-face {
 42 |     font-family: AdobeClean;
 43 |     src: url("../fonts/AdobeClean-Bold.otf") format("opentype");
 44 |     font-weight: bold
 45 | }
 46 | 
 47 | @font-face {
 48 |     font-family: AdobeClean;
 49 |     src: url("../fonts/AdobeClean-Light.otf") format("opentype");
 50 |     font-weight: lighter
 51 | }
 52 | 
 53 | 
 54 | :root {
 55 |     /* you want this to go from newest to oldest in terms of os */
 56 | }
 57 | /*Tools*/
 58 | /*Generic*/
 59 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
 60 | 
 61 | /**
 62 |  * 1. Set default font family to sans-serif.
 63 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
 64 |  *    user zoom.
 65 |  */
 66 | 
 67 | html {
 68 |   font-family: sans-serif; /* 1 */
 69 |   -ms-text-size-adjust: 100%; /* 2 */
 70 |   -webkit-text-size-adjust: 100%; /* 2 */
 71 | }
 72 | 
 73 | /**
 74 |  * Remove default margin.
 75 |  */
 76 | 
 77 | body {
 78 |   margin: 0;
 79 | }
 80 | 
 81 | /* HTML5 display definitions
 82 |    ========================================================================== */
 83 | 
 84 | /**
 85 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 86 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 87 |  * and Firefox.
 88 |  * Correct `block` display not defined for `main` in IE 11.
 89 |  */
 90 | 
 91 | article,
 92 | aside,
 93 | details,
 94 | figcaption,
 95 | figure,
 96 | footer,
 97 | header,
 98 | hgroup,
 99 | main,
100 | menu,
101 | nav,
102 | section,
103 | summary {
104 |   display: block;
105 | }
106 | 
107 | /**
108 |  * 1. Correct `inline-block` display not defined in IE 8/9.
109 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
110 |  */
111 | 
112 | audio,
113 | canvas,
114 | progress,
115 | video {
116 |   display: inline-block; /* 1 */
117 |   vertical-align: baseline; /* 2 */
118 | }
119 | 
120 | /**
121 |  * Prevent modern browsers from displaying `audio` without controls.
122 |  * Remove excess height in iOS 5 devices.
123 |  */
124 | 
125 | audio:not([controls]) {
126 |   display: none;
127 |   height: 0;
128 | }
129 | 
130 | /**
131 |  * Address `[hidden]` styling not present in IE 8/9/10.
132 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
133 |  */
134 | 
135 | [hidden],
136 | template {
137 |   display: none;
138 | }
139 | 
140 | /* Links
141 |    ========================================================================== */
142 | 
143 | /**
144 |  * Remove the gray background color from active links in IE 10.
145 |  */
146 | 
147 | a {
148 |   background-color: transparent;
149 | }
150 | 
151 | /**
152 |  * Improve readability when focused and also mouse hovered in all browsers.
153 |  */
154 | 
155 | a:active,
156 | a:hover {
157 |   outline: 0;
158 | }
159 | 
160 | /* Text-level semantics
161 |    ========================================================================== */
162 | 
163 | /**
164 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
165 |  */
166 | 
167 | abbr[title] {
168 |   border-bottom: 1px dotted;
169 | }
170 | 
171 | /**
172 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
173 |  */
174 | 
175 | b,
176 | strong {
177 |   font-weight: bold;
178 | }
179 | 
180 | /**
181 |  * Address styling not present in Safari and Chrome.
182 |  */
183 | 
184 | dfn {
185 |   font-style: italic;
186 | }
187 | 
188 | /**
189 |  * Address variable `h1` font-size and margin within `section` and `article`
190 |  * contexts in Firefox 4+, Safari, and Chrome.
191 |  */
192 | 
193 | h1 {
194 |   font-size: 2em;
195 |   margin: 0.67em 0;
196 | }
197 | 
198 | /**
199 |  * Address styling not present in IE 8/9.
200 |  */
201 | 
202 | mark {
203 |   background: #ff0;
204 |   color: #000;
205 | }
206 | 
207 | /**
208 |  * Address inconsistent and variable font size in all browsers.
209 |  */
210 | 
211 | small {
212 |   font-size: 80%;
213 | }
214 | 
215 | /**
216 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
217 |  */
218 | 
219 | sub,
220 | sup {
221 |   font-size: 75%;
222 |   line-height: 0;
223 |   position: relative;
224 |   vertical-align: baseline;
225 | }
226 | 
227 | sup {
228 |   top: -0.5em;
229 | }
230 | 
231 | sub {
232 |   bottom: -0.25em;
233 | }
234 | 
235 | /* Embedded content
236 |    ========================================================================== */
237 | 
238 | /**
239 |  * Remove border when inside `a` element in IE 8/9/10.
240 |  */
241 | 
242 | img {
243 |   border: 0;
244 | }
245 | 
246 | /**
247 |  * Correct overflow not hidden in IE 9/10/11.
248 |  */
249 | 
250 | svg:not(:root) {
251 |   overflow: hidden;
252 | }
253 | 
254 | /* Grouping content
255 |    ========================================================================== */
256 | 
257 | /**
258 |  * Address margin not present in IE 8/9 and Safari.
259 |  */
260 | 
261 | figure {
262 |   margin: 1em 40px;
263 | }
264 | 
265 | /**
266 |  * Address differences between Firefox and other browsers.
267 |  */
268 | 
269 | hr {
270 |   box-sizing: content-box;
271 |   height: 0;
272 | }
273 | 
274 | /**
275 |  * Contain overflow in all browsers.
276 |  */
277 | 
278 | pre {
279 |   overflow: auto;
280 | }
281 | 
282 | /**
283 |  * Address odd `em`-unit font size rendering in all browsers.
284 |  */
285 | 
286 | code,
287 | kbd,
288 | pre,
289 | samp {
290 |   font-family: monospace, monospace;
291 |   font-size: 1em;
292 | }
293 | 
294 | /* Forms
295 |    ========================================================================== */
296 | 
297 | /**
298 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
299 |  * styling of `select`, unless a `border` property is set.
300 |  */
301 | 
302 | /**
303 |  * 1. Correct color not being inherited.
304 |  *    Known issue: affects color of disabled elements.
305 |  * 2. Correct font properties not being inherited.
306 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
307 |  */
308 | 
309 | button,
310 | input,
311 | optgroup,
312 | select,
313 | textarea {
314 |   color: inherit; /* 1 */
315 |   font: inherit; /* 2 */
316 |   margin: 0; /* 3 */
317 | }
318 | 
319 | /**
320 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
321 |  */
322 | 
323 | button {
324 |   overflow: visible;
325 | }
326 | 
327 | /**
328 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
329 |  * All other form control elements do not inherit `text-transform` values.
330 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
331 |  * Correct `select` style inheritance in Firefox.
332 |  */
333 | 
334 | button,
335 | select {
336 |   text-transform: none;
337 | }
338 | 
339 | /**
340 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
341 |  *    and `video` controls.
342 |  * 2. Correct inability to style clickable `input` types in iOS.
343 |  * 3. Improve usability and consistency of cursor style between image-type
344 |  *    `input` and others.
345 |  */
346 | 
347 | button,
348 | html input[type="button"], /* 1 */
349 | input[type="reset"],
350 | input[type="submit"] {
351 |   -webkit-appearance: button; /* 2 */
352 |   cursor: pointer; /* 3 */
353 | }
354 | 
355 | /**
356 |  * Re-set default cursor for disabled elements.
357 |  */
358 | 
359 | button[disabled],
360 | html input[disabled] {
361 |   cursor: default;
362 | }
363 | 
364 | /**
365 |  * Remove inner padding and border in Firefox 4+.
366 |  */
367 | 
368 | button::-moz-focus-inner,
369 | input::-moz-focus-inner {
370 |   border: 0;
371 |   padding: 0;
372 | }
373 | 
374 | /**
375 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
376 |  * the UA stylesheet.
377 |  */
378 | 
379 | input {
380 |   line-height: normal;
381 | }
382 | 
383 | /**
384 |  * It's recommended that you don't attempt to style these elements.
385 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
386 |  *
387 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
388 |  * 2. Remove excess padding in IE 8/9/10.
389 |  */
390 | 
391 | input[type="checkbox"],
392 | input[type="radio"] {
393 |   box-sizing: border-box; /* 1 */
394 |   padding: 0; /* 2 */
395 | }
396 | 
397 | /**
398 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
399 |  * `font-size` values of the `input`, it causes the cursor style of the
400 |  * decrement button to change from `default` to `text`.
401 |  */
402 | 
403 | input[type="number"]::-webkit-inner-spin-button,
404 | input[type="number"]::-webkit-outer-spin-button {
405 |   height: auto;
406 | }
407 | 
408 | /**
409 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
410 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
411 |  *    (include `-moz` to future-proof).
412 |  */
413 | 
414 | input[type="search"] {
415 |   -webkit-appearance: textfield; /* 1 */ /* 2 */
416 |   box-sizing: content-box;
417 | }
418 | 
419 | /**
420 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
421 |  * Safari (but not Chrome) clips the cancel button when the search input has
422 |  * padding (and `textfield` appearance).
423 |  */
424 | 
425 | input[type="search"]::-webkit-search-cancel-button,
426 | input[type="search"]::-webkit-search-decoration {
427 |   -webkit-appearance: none;
428 | }
429 | 
430 | /**
431 |  * Define consistent border, margin, and padding.
432 |  */
433 | 
434 | fieldset {
435 |   border: 1px solid #c0c0c0;
436 |   margin: 0 2px;
437 |   padding: 0.35em 0.625em 0.75em;
438 | }
439 | 
440 | /**
441 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
442 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
443 |  */
444 | 
445 | legend {
446 |   border: 0; /* 1 */
447 |   padding: 0; /* 2 */
448 | }
449 | 
450 | /**
451 |  * Remove default vertical scrollbar in IE 8/9/10/11.
452 |  */
453 | 
454 | textarea {
455 |   overflow: auto;
456 | }
457 | 
458 | /**
459 |  * Don't inherit the `font-weight` (applied by a rule above).
460 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
461 |  */
462 | 
463 | optgroup {
464 |   font-weight: bold;
465 | }
466 | 
467 | /* Tables
468 |    ========================================================================== */
469 | 
470 | /**
471 |  * Remove most spacing between table cells.
472 |  */
473 | 
474 | table {
475 |   border-collapse: collapse;
476 |   border-spacing: 0;
477 | }
478 | 
479 | td,
480 | th {
481 |   padding: 0;
482 | }
483 | html {
484 |   box-sizing: border-box;
485 | }
486 | 
487 | *, *:before, *:after {
488 |   box-sizing: inherit;
489 | }
490 | /*Base*/
491 | body {
492 |     background-color: rgb(50, 50, 50);
493 | }
494 | html {
495 |     font-size: 62.5%
496 | }
497 | 
498 | body {
499 |     font-size: 16px;
500 |     font-size: 1.6rem;
501 |     font-family: "San Francisco", "Helvetica Neue", "Lucida Grande", "Segoe UI";
502 |     color: rgb(225, 225, 225);
503 | }
504 | 
505 | 
506 | p,
507 | span,
508 | h1,
509 | h2,
510 | h3,
511 | h4,
512 | h5,
513 | h6,
514 | label {
515 |     font-weight: normal;
516 |     font-family: "San Francisco", "Helvetica Neue", "Lucida Grande", "Segoe UI";
517 |     font-size: 12px;
518 |     font-size: 1.2rem;
519 | }
520 | 
521 | h1 {
522 |     font-size: 14px;
523 |     font-size: 1.4rem;
524 | }
525 | 
526 | h2 {
527 |     font-size: 12px;
528 |     font-size: 1.2rem;
529 | }
530 | 
531 | h3 {
532 |     font-size: 12px;
533 |     font-size: 1.2rem;
534 | }
535 | 
536 | 
537 | p[disabled],
538 | span[disabled],
539 | h1[disabled],
540 | h2[disabled],
541 | h3[disabled],
542 | h4[disabled],
543 | h5[disabled],
544 | h6[disabled],
545 | label[disabled] {
546 |      color: rgb(102, 102, 102);
547 | }
548 | 
549 | p.is-active,
550 | span.is-active,
551 | h1.is-active,
552 | h2.is-active,
553 | h3.is-active,
554 | h4.is-active,
555 | h5.is-active,
556 | h6.is-active,
557 | label.is-active {
558 |     font-weight: bold;
559 | }
560 | 
561 | /* todo, think more about this api. It means that if you have tabs you would need to update every class rather than the active.
562 | this could probably be better done with some better selectors */
563 | 
564 | p.is-inactive,
565 | span.is-inactive,
566 | h1.is-inactive,
567 | h2.is-inactive,
568 | h3.is-inactive,
569 | h4.is-inactive,
570 | h5.is-inactive,
571 | h6.is-inactive,
572 | label.is-inactive {
573 |     color: rgb(135, 135, 135);
574 | }
575 | 
576 | p.label-small,
577 | span.label-small,
578 | label.label-small,
579 | div.label-small {
580 |     font-size: 12px;
581 |     font-size: 1.2rem;
582 | }
583 | 
584 | 
585 | p.label-medium,
586 | span.label-medium,
587 | label.label-medium,
588 | div.label-medium {
589 |     font-size: 12px;
590 |     font-size: 1.2rem;
591 | }
592 | 
593 | p.label-large,
594 | span.label-large,
595 | label.label-large,
596 | div.label-large {
597 |     font-size: 14px;
598 |     font-size: 1.4rem;
599 | }
600 | 
601 | 
602 | input[type="radio"],
603 | input[type="checkbox"] {
604 |     position: absolute;
605 |     left: -999999px;
606 | }
607 | 
608 | input[type="radio"]:disabled + label,
609 | input[type="checkbox"]:disabled + label {
610 |     color: rgb(102, 102, 102);
611 | }
612 | 
613 | 
614 | input[type="radio"] + label:before,
615 | input[type="checkbox"] + label:before {
616 |     position: relative;
617 |     content: "\00A0";
618 |     display: inline-block;
619 |     width: 14px;
620 |     height: 14px;
621 | 
622 |     margin-right: 6px;
623 |     left: 0;
624 |     top: 1px;
625 |     background-color: rgb(45, 45, 45);
626 |     border: 1px solid rgb(108, 108, 108);
627 |     border-radius: 2px;
628 | }
629 | 
630 | input[type=checkbox]:checked + label:before {
631 |     background: rgb(203, 203, 203) url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve"><polyline fill="none" stroke="rgb(45, 45, 45)" stroke-width="2.5" stroke-miterlimit="10" points="2.8,6.3 6.4,9.6 11.6,3.7 "/></svg>') no-repeat;
632 |     border: 1px solid rgb(203, 203, 203);
633 | }
634 | 
635 | input[type=radio]:checked + label:before {
636 |     background: rgb(203, 203, 203) url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve"><circle fill="rgb(45, 45, 45)" cx="7" cy="7" r="3.3"/></svg>') no-repeat;
637 |     border: 1px solid rgb(203, 203, 203);
638 | }
639 | 
640 | input[type=checkbox]:indeterminate + label:before {
641 |     background: rgb(203, 203, 203) url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve"><line fill="none" stroke="rgb(45, 45, 45)" stroke-width="2" stroke-miterlimit="10" x1="3.6" y1="7.2" x2="10.6" y2="7.2"/></svg>') no-repeat;
642 |     border: 1px solid rgb(203, 203, 203);
643 | }
644 | 
645 | input[type="radio"]:active + label:before,
646 | input[type="checkbox"]:active + label:before,
647 | input[type="radio"].is-pressed + label:before,
648 | input[type="checkbox"].is-pressed + label:before {
649 |     background-color: rgb(108, 108, 108);
650 |     border: 1px solid rgb(108, 108, 108);
651 | }
652 | 
653 | select:disabled,
654 | input[type="radio"]:disabled + label:before,
655 | input[type="checkbox"]:disabled + label:before {
656 |     border: 1px solid rgb(62, 62, 62);
657 |     background-color: rgb(41, 41, 41);
658 |     color: rgb(102, 102, 102);
659 |     opacity: 1;
660 | }
661 | 
662 | input[type="radio"]:disabled:checked + label:before,
663 | input[type="checkbox"]:disabled:checked + label:before {
664 |     border: 1px solid rgb(62, 62, 62);
665 |     background-color: rgb(62, 62, 62);
666 | }
667 | 
668 | input[type="radio"] + label:before {
669 |     border-radius: 7px;
670 | }
671 | 
672 | 
673 | input[type="radio"]:focus + label:before,
674 | input[type="checkbox"]:focus + label:before,
675 | input[type="radio"].is-focused + label:before,
676 | input[type="checkbox"].is-focused + label:before  {
677 |     border: 1px solid rgb(51, 108, 229);
678 | }
679 | 
680 | input[type=text] {
681 |     border: none;
682 |     background-color: transparent;
683 |     border-bottom: 1px solid rgb(173, 173, 173);
684 |     padding-left: 4px;
685 |     outline: none;
686 | }
687 | 
688 | input[type=text]::-moz-selection {
689 |   background: rgb(56, 134, 232);
690 | }
691 | 
692 | input[type=text]::selection {
693 |   background: rgb(56, 134, 232);
694 | }
695 | 
696 | input[type=text]:focus,
697 | input[type=text].is-focused {
698 |     border-bottom: 1px solid rgb(51, 108, 229);
699 | }
700 | 
701 | select {
702 |     border-radius: 3px;
703 |     outline: none;
704 |     padding: 5px 20px 5px 5px;
705 |     border: 1px solid rgb(71, 71, 71);
706 |     background: rgb(45, 45, 45) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="11" height="4" viewBox="0 0 11 4">	<polygon fill="rgb(204, 204, 204)" points="3.5,4 0.3,0.8 1,0.1 3.5,2.6 6,0 6.7,0.8 "/></svg>') no-repeat 100% 50%;
707 |     background-size: 11px 7px;
708 |     -webkit-appearance: none;
709 |        -moz-appearance: none;
710 |             appearance: none;
711 | }
712 | 
713 | select option {
714 |       background-color: rgb(186, 186, 186);
715 |       color: rgb(11, 11, 11);
716 | }
717 | 
718 | 
719 | select:active,
720 | select.is-pressed{
721 |     background-color: rgb(29, 29, 29);
722 |     border: 1px solid rgb(71, 71, 71);
723 | }
724 | 
725 | select:disabled {
726 |     border: 1px solid rgb(62, 62, 62);
727 |     background: rgb(45, 45, 45) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="11" height="4" viewBox="0 0 11 4">	<polygon fill="rgb(89, 89, 89)" points="3.5,4 0.3,0.8 1,0.1 3.5,2.6 6,0 6.7,0.8 "/></svg>') no-repeat 100% 50%;
728 | }
729 | 
730 | input[type=checkbox]:checked + label:before {
731 |     text-indent: 2px;
732 | }
733 | /*Objects*/
734 | .container {
735 |     display: -webkit-box;
736 |     display: -webkit-flex;
737 |     display: -ms-flexbox;
738 |     display: flex; /* or inline-flex */
739 | }
740 | /*Components*/
741 | /* bug in css selectors currently, so can't use this just yet*/
742 | 
743 | 
744 | button,
745 | .button {
746 |     border: 1px solid --button-main-color;
747 |     border: 1px solid rgb(225, 225, 225);
748 |     background-color: rgb(50, 50, 50);
749 |     border-radius: 50px;
750 |     color: rgb(225, 225, 225);
751 |     display: inline-block;
752 |     padding: 5px 20px 5px;
753 |     font-family: "San Francisco", "Helvetica Neue", "Lucida Grande", "Segoe UI";
754 |     font-size: 14px;
755 |     font-size: 1.4rem;
756 |     outline: none;
757 | }
758 | 
759 | .btn-icon {
760 |     width: 29px;
761 |     height: 26px;
762 |     border-radius: 0;
763 |     border: none;
764 |     padding: 0;
765 |     vertical-align: middle;
766 |     border: 1px solid rgb(50, 50, 50);
767 | }
768 | 
769 | .btn-small {
770 |     border: 1px solid rgb(71, 71, 71);
771 |     background-color: rgb(45, 45, 45);
772 |     border-radius: 4px;
773 |     padding: 5px 20px 5px;
774 |     font-size: 12px;
775 |     font-size: 1.2rem;
776 | }
777 | 
778 | button:disabled,
779 | .button:disabled,
780 | button.is-disabled,
781 | .button.is-disabled,
782 | .btn-secondary.is-disabled,
783 | .btn-secondary:disabled {
784 |     color: rgb(102, 102, 102);
785 |     border: 1px solid rgb(62, 62, 62);
786 | }
787 | 
788 | .btn-small.is-disabled,
789 | .btn-small:disabled {
790 |     background-color: rgb(41, 41, 41);
791 |     border: 1px solid rgb(62, 62, 62);
792 |     color: rgb(150, 150, 150);
793 | }
794 | 
795 | .btn-small.is-pressed,
796 | .btn-small:active {
797 |     color: rgb(225, 225, 225);
798 |     border: 1px solid rgb(62, 62, 62);
799 |     background-color: rgb(31, 31, 31);
800 | }
801 | 
802 | 
803 | .btn-icon .icons {
804 |     fill: rgb(214, 214, 214);
805 | }
806 | 
807 | .btn-icon.is-disabled .icons,
808 | .btn-icon:disabled .icons{
809 |     opacity: .5;
810 | }
811 | 
812 | 
813 | button:active,
814 | .button:active,
815 | button.is-pressed,
816 | .button.is-pressed {
817 |      background-color: rgb(225, 225, 225);
818 |      color: rgb(50, 50, 50);
819 | }
820 | 
821 | button.btn-secondary,
822 | .button.btn-secondary {
823 |     border: 1px solid rgb(125, 125, 125);
824 | }
825 | 
826 | .btn-secondary:hover,
827 | .btn-secondary.is-hovered {
828 |     border: 1px solid rgb(125, 125, 125);
829 | }
830 | 
831 | .btn-icon:hover,
832 | .btn-icon.is-hovered {
833 |     border: 1px solid rgb(71, 71, 71);
834 |     background-color: rgb(45, 45, 45);
835 | }
836 | 
837 | .btn-icon:active,
838 | .btn-icon.is-pressed {
839 |     background-color: rgb(66, 66, 66);
840 | }
841 | 
842 | .btn-secondary:active,
843 | .btn-secondary.is-pressed {
844 |     background-color: rgb(125, 125, 125);
845 | }
846 | 
847 | button.is-focused,
848 | .button.is-focused,
849 | button:focus,
850 | .button:focus,
851 | .btn-secondary:focus,
852 | .btn-secondary.is-focused  {
853 |      border: 1px solid rgb(51, 108, 229);
854 | }
855 | /* there is a bug in postcss where this is not seeming to expand a variable inside a variable */
856 | 
857 | label[aria-haspopup=true] {
858 |     position: relative;
859 | }
860 | 
861 | 
862 | label[aria-haspopup=true] input + button {
863 |     /* have to overwrite these styles manually as there is a bug in postcss
864 |     that throws an error if i use appearance here.
865 |     */
866 |     border: none;
867 |     display: block;
868 |     padding: 0px;
869 | 
870 |     text-indent: 99999px;
871 |     height: 18px;
872 |     width: 11px;
873 |     position: absolute;
874 |     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="11" height="4" viewBox="0 0 11 4">	<polygon fill="rgb(204, 204, 204)" points="3.5,4 0.3,0.8 1,0.1 3.5,2.6 6,0 6.7,0.8 "/></svg>') no-repeat -50% 50%;
875 |     bottom: 0px;
876 |     right: 3px;
877 | }
878 | 
879 | 
880 | label[aria-haspopup=true].is-open input + button{
881 |     border-radius: 3px;
882 |     border: 1px solid rgb(179, 179, 179);
883 |     background-color: rgb(191, 191, 191);
884 | }
885 | /*themes*/
886 | :root {
887 |     /* todo (jwyles): maybe we can scope things to their actual contents eg button {
888 |         --border-color: #aabbcc;
889 |     };
890 |     and stuck to their bottom of their respective files.
891 |     I am trying to respect the ITCSS way of life strictly for now.
892 |     I am pretty sure it won't work out in a css4 world.
893 |     Since this is my first dive into this world, lets see if a pattern emerges as we build.
894 |     */
895 | }
896 | 
897 | 
898 | /*buttons*/
899 | 
900 | /*fonts */
901 | 
902 | 
903 | /*Utilities*/
904 | 
905 | 


--------------------------------------------------------------------------------
/Spectrum UI Library/CSS/styles-light.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Copyright (c) 2015 Adobe Systems Incorporated. All rights reserved.
  3 |  *
  4 |  * Permission is hereby granted, free of charge, to any person obtaining a
  5 |  * copy of this software and associated documentation files (the "Software"),
  6 |  * to deal in the Software without restriction, including without limitation
  7 |  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  8 |  * and/or sell copies of the Software, and to permit persons to whom the
  9 |  * Software is furnished to do so, subject to the following conditions:
 10 |  *
 11 |  * The above copyright notice and this permission notice shall be included in
 12 |  * all copies or substantial portions of the Software.
 13 |  *
 14 |  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 15 |  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 16 |  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 17 |  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 18 |  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 19 |  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 20 |  * DEALINGS IN THE SOFTWARE.
 21 |  *
 22 |  */
 23 | /* DO NOT EDIT THIS FILE.  It is generated from other sources */
 24 | 
 25 | /*Settings*/
 26 | :root {
 27 |     /* todo (jwyles): maybe we can scope things to their actual contents eg button {
 28 |         --border-color: #aabbcc;
 29 |     };
 30 |     and stuck to their bottom of their respective files.
 31 |     I am trying to respect the ITCSS way of life strictly for now.
 32 |     I am pretty sure it won't work out in a css4 world.
 33 |     Since this is my first dive into this world, lets see if a pattern emerges as we build.
 34 |     */
 35 | }
 36 | @font-face {
 37 |     font-family: AdobeClean;
 38 |     src: url("../fonts/AdobeClean-Regular.otf") format("opentype");
 39 | }
 40 | 
 41 | @font-face {
 42 |     font-family: AdobeClean;
 43 |     src: url("../fonts/AdobeClean-Bold.otf") format("opentype");
 44 |     font-weight: bold
 45 | }
 46 | 
 47 | @font-face {
 48 |     font-family: AdobeClean;
 49 |     src: url("../fonts/AdobeClean-Light.otf") format("opentype");
 50 |     font-weight: lighter
 51 | }
 52 | 
 53 | 
 54 | :root {
 55 |     /* you want this to go from newest to oldest in terms of os */
 56 | }
 57 | /*Tools*/
 58 | /*Generic*/
 59 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
 60 | 
 61 | /**
 62 |  * 1. Set default font family to sans-serif.
 63 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
 64 |  *    user zoom.
 65 |  */
 66 | 
 67 | html {
 68 |   font-family: sans-serif; /* 1 */
 69 |   -ms-text-size-adjust: 100%; /* 2 */
 70 |   -webkit-text-size-adjust: 100%; /* 2 */
 71 | }
 72 | 
 73 | /**
 74 |  * Remove default margin.
 75 |  */
 76 | 
 77 | body {
 78 |   margin: 0;
 79 | }
 80 | 
 81 | /* HTML5 display definitions
 82 |    ========================================================================== */
 83 | 
 84 | /**
 85 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 86 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 87 |  * and Firefox.
 88 |  * Correct `block` display not defined for `main` in IE 11.
 89 |  */
 90 | 
 91 | article,
 92 | aside,
 93 | details,
 94 | figcaption,
 95 | figure,
 96 | footer,
 97 | header,
 98 | hgroup,
 99 | main,
100 | menu,
101 | nav,
102 | section,
103 | summary {
104 |   display: block;
105 | }
106 | 
107 | /**
108 |  * 1. Correct `inline-block` display not defined in IE 8/9.
109 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
110 |  */
111 | 
112 | audio,
113 | canvas,
114 | progress,
115 | video {
116 |   display: inline-block; /* 1 */
117 |   vertical-align: baseline; /* 2 */
118 | }
119 | 
120 | /**
121 |  * Prevent modern browsers from displaying `audio` without controls.
122 |  * Remove excess height in iOS 5 devices.
123 |  */
124 | 
125 | audio:not([controls]) {
126 |   display: none;
127 |   height: 0;
128 | }
129 | 
130 | /**
131 |  * Address `[hidden]` styling not present in IE 8/9/10.
132 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
133 |  */
134 | 
135 | [hidden],
136 | template {
137 |   display: none;
138 | }
139 | 
140 | /* Links
141 |    ========================================================================== */
142 | 
143 | /**
144 |  * Remove the gray background color from active links in IE 10.
145 |  */
146 | 
147 | a {
148 |   background-color: transparent;
149 | }
150 | 
151 | /**
152 |  * Improve readability when focused and also mouse hovered in all browsers.
153 |  */
154 | 
155 | a:active,
156 | a:hover {
157 |   outline: 0;
158 | }
159 | 
160 | /* Text-level semantics
161 |    ========================================================================== */
162 | 
163 | /**
164 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
165 |  */
166 | 
167 | abbr[title] {
168 |   border-bottom: 1px dotted;
169 | }
170 | 
171 | /**
172 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
173 |  */
174 | 
175 | b,
176 | strong {
177 |   font-weight: bold;
178 | }
179 | 
180 | /**
181 |  * Address styling not present in Safari and Chrome.
182 |  */
183 | 
184 | dfn {
185 |   font-style: italic;
186 | }
187 | 
188 | /**
189 |  * Address variable `h1` font-size and margin within `section` and `article`
190 |  * contexts in Firefox 4+, Safari, and Chrome.
191 |  */
192 | 
193 | h1 {
194 |   font-size: 2em;
195 |   margin: 0.67em 0;
196 | }
197 | 
198 | /**
199 |  * Address styling not present in IE 8/9.
200 |  */
201 | 
202 | mark {
203 |   background: #ff0;
204 |   color: #000;
205 | }
206 | 
207 | /**
208 |  * Address inconsistent and variable font size in all browsers.
209 |  */
210 | 
211 | small {
212 |   font-size: 80%;
213 | }
214 | 
215 | /**
216 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
217 |  */
218 | 
219 | sub,
220 | sup {
221 |   font-size: 75%;
222 |   line-height: 0;
223 |   position: relative;
224 |   vertical-align: baseline;
225 | }
226 | 
227 | sup {
228 |   top: -0.5em;
229 | }
230 | 
231 | sub {
232 |   bottom: -0.25em;
233 | }
234 | 
235 | /* Embedded content
236 |    ========================================================================== */
237 | 
238 | /**
239 |  * Remove border when inside `a` element in IE 8/9/10.
240 |  */
241 | 
242 | img {
243 |   border: 0;
244 | }
245 | 
246 | /**
247 |  * Correct overflow not hidden in IE 9/10/11.
248 |  */
249 | 
250 | svg:not(:root) {
251 |   overflow: hidden;
252 | }
253 | 
254 | /* Grouping content
255 |    ========================================================================== */
256 | 
257 | /**
258 |  * Address margin not present in IE 8/9 and Safari.
259 |  */
260 | 
261 | figure {
262 |   margin: 1em 40px;
263 | }
264 | 
265 | /**
266 |  * Address differences between Firefox and other browsers.
267 |  */
268 | 
269 | hr {
270 |   box-sizing: content-box;
271 |   height: 0;
272 | }
273 | 
274 | /**
275 |  * Contain overflow in all browsers.
276 |  */
277 | 
278 | pre {
279 |   overflow: auto;
280 | }
281 | 
282 | /**
283 |  * Address odd `em`-unit font size rendering in all browsers.
284 |  */
285 | 
286 | code,
287 | kbd,
288 | pre,
289 | samp {
290 |   font-family: monospace, monospace;
291 |   font-size: 1em;
292 | }
293 | 
294 | /* Forms
295 |    ========================================================================== */
296 | 
297 | /**
298 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
299 |  * styling of `select`, unless a `border` property is set.
300 |  */
301 | 
302 | /**
303 |  * 1. Correct color not being inherited.
304 |  *    Known issue: affects color of disabled elements.
305 |  * 2. Correct font properties not being inherited.
306 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
307 |  */
308 | 
309 | button,
310 | input,
311 | optgroup,
312 | select,
313 | textarea {
314 |   color: inherit; /* 1 */
315 |   font: inherit; /* 2 */
316 |   margin: 0; /* 3 */
317 | }
318 | 
319 | /**
320 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
321 |  */
322 | 
323 | button {
324 |   overflow: visible;
325 | }
326 | 
327 | /**
328 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
329 |  * All other form control elements do not inherit `text-transform` values.
330 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
331 |  * Correct `select` style inheritance in Firefox.
332 |  */
333 | 
334 | button,
335 | select {
336 |   text-transform: none;
337 | }
338 | 
339 | /**
340 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
341 |  *    and `video` controls.
342 |  * 2. Correct inability to style clickable `input` types in iOS.
343 |  * 3. Improve usability and consistency of cursor style between image-type
344 |  *    `input` and others.
345 |  */
346 | 
347 | button,
348 | html input[type="button"], /* 1 */
349 | input[type="reset"],
350 | input[type="submit"] {
351 |   -webkit-appearance: button; /* 2 */
352 |   cursor: pointer; /* 3 */
353 | }
354 | 
355 | /**
356 |  * Re-set default cursor for disabled elements.
357 |  */
358 | 
359 | button[disabled],
360 | html input[disabled] {
361 |   cursor: default;
362 | }
363 | 
364 | /**
365 |  * Remove inner padding and border in Firefox 4+.
366 |  */
367 | 
368 | button::-moz-focus-inner,
369 | input::-moz-focus-inner {
370 |   border: 0;
371 |   padding: 0;
372 | }
373 | 
374 | /**
375 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
376 |  * the UA stylesheet.
377 |  */
378 | 
379 | input {
380 |   line-height: normal;
381 | }
382 | 
383 | /**
384 |  * It's recommended that you don't attempt to style these elements.
385 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
386 |  *
387 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
388 |  * 2. Remove excess padding in IE 8/9/10.
389 |  */
390 | 
391 | input[type="checkbox"],
392 | input[type="radio"] {
393 |   box-sizing: border-box; /* 1 */
394 |   padding: 0; /* 2 */
395 | }
396 | 
397 | /**
398 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
399 |  * `font-size` values of the `input`, it causes the cursor style of the
400 |  * decrement button to change from `default` to `text`.
401 |  */
402 | 
403 | input[type="number"]::-webkit-inner-spin-button,
404 | input[type="number"]::-webkit-outer-spin-button {
405 |   height: auto;
406 | }
407 | 
408 | /**
409 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
410 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
411 |  *    (include `-moz` to future-proof).
412 |  */
413 | 
414 | input[type="search"] {
415 |   -webkit-appearance: textfield; /* 1 */ /* 2 */
416 |   box-sizing: content-box;
417 | }
418 | 
419 | /**
420 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
421 |  * Safari (but not Chrome) clips the cancel button when the search input has
422 |  * padding (and `textfield` appearance).
423 |  */
424 | 
425 | input[type="search"]::-webkit-search-cancel-button,
426 | input[type="search"]::-webkit-search-decoration {
427 |   -webkit-appearance: none;
428 | }
429 | 
430 | /**
431 |  * Define consistent border, margin, and padding.
432 |  */
433 | 
434 | fieldset {
435 |   border: 1px solid #c0c0c0;
436 |   margin: 0 2px;
437 |   padding: 0.35em 0.625em 0.75em;
438 | }
439 | 
440 | /**
441 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
442 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
443 |  */
444 | 
445 | legend {
446 |   border: 0; /* 1 */
447 |   padding: 0; /* 2 */
448 | }
449 | 
450 | /**
451 |  * Remove default vertical scrollbar in IE 8/9/10/11.
452 |  */
453 | 
454 | textarea {
455 |   overflow: auto;
456 | }
457 | 
458 | /**
459 |  * Don't inherit the `font-weight` (applied by a rule above).
460 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
461 |  */
462 | 
463 | optgroup {
464 |   font-weight: bold;
465 | }
466 | 
467 | /* Tables
468 |    ========================================================================== */
469 | 
470 | /**
471 |  * Remove most spacing between table cells.
472 |  */
473 | 
474 | table {
475 |   border-collapse: collapse;
476 |   border-spacing: 0;
477 | }
478 | 
479 | td,
480 | th {
481 |   padding: 0;
482 | }
483 | html {
484 |   box-sizing: border-box;
485 | }
486 | 
487 | *, *:before, *:after {
488 |   box-sizing: inherit;
489 | }
490 | /*Base*/
491 | body {
492 |     background-color: rgb(184, 184, 184);
493 | }
494 | html {
495 |     font-size: 62.5%
496 | }
497 | 
498 | body {
499 |     font-size: 16px;
500 |     font-size: 1.6rem;
501 |     font-family: "San Francisco", "Helvetica Neue", "Lucida Grande", "Segoe UI";
502 |     color: rgb(51, 51, 51);
503 | }
504 | 
505 | 
506 | p,
507 | span,
508 | h1,
509 | h2,
510 | h3,
511 | h4,
512 | h5,
513 | h6,
514 | label {
515 |     font-weight: normal;
516 |     font-family: "San Francisco", "Helvetica Neue", "Lucida Grande", "Segoe UI";
517 |     font-size: 12px;
518 |     font-size: 1.2rem;
519 | }
520 | 
521 | h1 {
522 |     font-size: 14px;
523 |     font-size: 1.4rem;
524 | }
525 | 
526 | h2 {
527 |     font-size: 12px;
528 |     font-size: 1.2rem;
529 | }
530 | 
531 | h3 {
532 |     font-size: 12px;
533 |     font-size: 1.2rem;
534 | }
535 | 
536 | 
537 | p[disabled],
538 | span[disabled],
539 | h1[disabled],
540 | h2[disabled],
541 | h3[disabled],
542 | h4[disabled],
543 | h5[disabled],
544 | h6[disabled],
545 | label[disabled] {
546 |      color: rgb(153,153,153);
547 | }
548 | 
549 | p.is-active,
550 | span.is-active,
551 | h1.is-active,
552 | h2.is-active,
553 | h3.is-active,
554 | h4.is-active,
555 | h5.is-active,
556 | h6.is-active,
557 | label.is-active {
558 |     font-weight: bold;
559 | }
560 | 
561 | /* todo, think more about this api. It means that if you have tabs you would need to update every class rather than the active.
562 | this could probably be better done with some better selectors */
563 | 
564 | p.is-inactive,
565 | span.is-inactive,
566 | h1.is-inactive,
567 | h2.is-inactive,
568 | h3.is-inactive,
569 | h4.is-inactive,
570 | h5.is-inactive,
571 | h6.is-inactive,
572 | label.is-inactive {
573 |     color: rgb(107, 107, 107);
574 | }
575 | 
576 | p.label-small,
577 | span.label-small,
578 | label.label-small,
579 | div.label-small {
580 |     font-size: 12px;
581 |     font-size: 1.2rem;
582 | }
583 | 
584 | 
585 | p.label-medium,
586 | span.label-medium,
587 | label.label-medium,
588 | div.label-medium {
589 |     font-size: 12px;
590 |     font-size: 1.2rem;
591 | }
592 | 
593 | p.label-large,
594 | span.label-large,
595 | label.label-large,
596 | div.label-large {
597 |     font-size: 14px;
598 |     font-size: 1.4rem;
599 | }
600 | 
601 | 
602 | input[type="radio"],
603 | input[type="checkbox"] {
604 |     position: absolute;
605 |     left: -999999px;
606 | }
607 | 
608 | input[type="radio"]:disabled + label,
609 | input[type="checkbox"]:disabled + label {
610 |     color: rgb(153,153,153);
611 | }
612 | 
613 | 
614 | input[type="radio"] + label:before,
615 | input[type="checkbox"] + label:before {
616 |     position: relative;
617 |     content: "\00A0";
618 |     display: inline-block;
619 |     width: 14px;
620 |     height: 14px;
621 | 
622 |     margin-right: 6px;
623 |     left: 0;
624 |     top: 1px;
625 |     background-color: rgb(204, 204, 204);
626 |     border: 1px solid rgb(147, 147, 147);
627 |     border-radius: 2px;
628 | }
629 | 
630 | input[type=checkbox]:checked + label:before {
631 |     background: rgb(82, 82, 82) url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve"><polyline fill="none" stroke="rgb(204, 204, 204)" stroke-width="2.5" stroke-miterlimit="10" points="2.8,6.3 6.4,9.6 11.6,3.7 "/></svg>') no-repeat;
632 |     border: 1px solid rgb(82, 82, 82);
633 | }
634 | 
635 | input[type=radio]:checked + label:before {
636 |     background: rgb(82, 82, 82) url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve"><circle fill="rgb(204, 204, 204)" cx="7" cy="7" r="3.3"/></svg>') no-repeat;
637 |     border: 1px solid rgb(82, 82, 82);
638 | }
639 | 
640 | input[type=checkbox]:indeterminate + label:before {
641 |     background: rgb(82, 82, 82) url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve"><line fill="none" stroke="rgb(204, 204, 204)" stroke-width="2" stroke-miterlimit="10" x1="3.6" y1="7.2" x2="10.6" y2="7.2"/></svg>') no-repeat;
642 |     border: 1px solid rgb(82, 82, 82);
643 | }
644 | 
645 | input[type="radio"]:active + label:before,
646 | input[type="checkbox"]:active + label:before,
647 | input[type="radio"].is-pressed + label:before,
648 | input[type="checkbox"].is-pressed + label:before {
649 |     background-color: rgb(147, 147, 147);
650 |     border: 1px solid rgb(147, 147, 147);
651 | }
652 | 
653 | select:disabled,
654 | input[type="radio"]:disabled + label:before,
655 | input[type="checkbox"]:disabled + label:before {
656 |     border: 1px solid rgb(173, 173, 173);
657 |     background-color: rgb(184, 184, 184);
658 |     color: rgb(153,153,153);
659 |     opacity: 1;
660 | }
661 | 
662 | input[type="radio"]:disabled:checked + label:before,
663 | input[type="checkbox"]:disabled:checked + label:before {
664 |     border: 1px solid rgb(173, 173, 173);
665 |     background-color: rgb(173, 173, 173);
666 | }
667 | 
668 | input[type="radio"] + label:before {
669 |     border-radius: 7px;
670 | }
671 | 
672 | 
673 | input[type="radio"]:focus + label:before,
674 | input[type="checkbox"]:focus + label:before,
675 | input[type="radio"].is-focused + label:before,
676 | input[type="checkbox"].is-focused + label:before  {
677 |     border: 1px solid rgb(49, 100, 203);
678 | }
679 | 
680 | input[type=text] {
681 |     border: none;
682 |     background-color: transparent;
683 |     border-bottom: 1px solid rgb(135, 135, 135);
684 |     padding-left: 4px;
685 |     outline: none;
686 | }
687 | 
688 | input[type=text]::-moz-selection {
689 |   background: rgb(185, 213, 240);
690 | }
691 | 
692 | input[type=text]::selection {
693 |   background: rgb(185, 213, 240);
694 | }
695 | 
696 | input[type=text]:focus,
697 | input[type=text].is-focused {
698 |     border-bottom: 1px solid rgb(49, 100, 203);
699 | }
700 | 
701 | select {
702 |     border-radius: 3px;
703 |     outline: none;
704 |     padding: 5px 20px 5px 5px;
705 |     border: 1px solid rgb(158, 158, 158);
706 |     background: rgb(204, 204, 204) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="11" height="4" viewBox="0 0 11 4">	<polygon fill="rgb(97, 97, 97)" points="3.5,4 0.3,0.8 1,0.1 3.5,2.6 6,0 6.7,0.8 "/></svg>') no-repeat 100% 50%;
707 |     background-size: 11px 7px;
708 |     -webkit-appearance: none;
709 |        -moz-appearance: none;
710 |             appearance: none;
711 | }
712 | 
713 | select option {
714 |       background-color: rgb(216, 216, 216);
715 |       color: rgb(39, 39, 39);
716 | }
717 | 
718 | 
719 | select:active,
720 | select.is-pressed{
721 |     background-color: rgb(120, 120, 120);
722 |     border: 1px solid rgb(179, 179, 179);
723 | }
724 | 
725 | select:disabled {
726 |     border: 1px solid rgb(173, 173, 173);
727 |     background: rgb(204, 204, 204) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="11" height="4" viewBox="0 0 11 4">	<polygon fill="rgb(143, 143, 143)" points="3.5,4 0.3,0.8 1,0.1 3.5,2.6 6,0 6.7,0.8 "/></svg>') no-repeat 100% 50%;
728 | }
729 | 
730 | input[type=checkbox]:checked + label:before {
731 |     text-indent: 2px;
732 | }
733 | /*Objects*/
734 | .container {
735 |     display: -webkit-box;
736 |     display: -webkit-flex;
737 |     display: -ms-flexbox;
738 |     display: flex; /* or inline-flex */
739 | }
740 | /*Components*/
741 | /* bug in css selectors currently, so can't use this just yet*/
742 | 
743 | 
744 | button,
745 | .button {
746 |     border: 1px solid --button-main-color;
747 |     border: 1px solid rgb(51, 51, 51);
748 |     background-color: rgb(184, 184, 184);
749 |     border-radius: 50px;
750 |     color: rgb(51, 51, 51);
751 |     display: inline-block;
752 |     padding: 5px 20px 5px;
753 |     font-family: "San Francisco", "Helvetica Neue", "Lucida Grande", "Segoe UI";
754 |     font-size: 14px;
755 |     font-size: 1.4rem;
756 |     outline: none;
757 | }
758 | 
759 | .btn-icon {
760 |     width: 29px;
761 |     height: 26px;
762 |     border-radius: 0;
763 |     border: none;
764 |     padding: 0;
765 |     vertical-align: middle;
766 |     border: 1px solid rgb(184, 184, 184);
767 | }
768 | 
769 | .btn-small {
770 |     border: 1px solid rgb(158, 158, 158);
771 |     background-color: rgb(204, 204, 204);
772 |     border-radius: 4px;
773 |     padding: 5px 20px 5px;
774 |     font-size: 12px;
775 |     font-size: 1.2rem;
776 | }
777 | 
778 | button:disabled,
779 | .button:disabled,
780 | button.is-disabled,
781 | .button.is-disabled,
782 | .btn-secondary.is-disabled,
783 | .btn-secondary:disabled {
784 |     color: rgb(153,153,153);
785 |     border: 1px solid rgb(173, 173, 173);
786 | }
787 | 
788 | .btn-small.is-disabled,
789 | .btn-small:disabled {
790 |     background-color: rgb(189, 189, 189);
791 |     border: 1px solid rgb(158, 158, 158);
792 |     color: rgb(100, 100, 100);
793 | }
794 | 
795 | .btn-small.is-pressed,
796 | .btn-small:active {
797 |     color: rgb(51, 51, 51);
798 |     border: 1px solid rgb(112, 112, 112);
799 |     background-color: rgb(128, 128, 128);
800 | }
801 | 
802 | 
803 | .btn-icon .icons {
804 |     fill: rgb(40, 40, 40);
805 | }
806 | 
807 | .btn-icon.is-disabled .icons,
808 | .btn-icon:disabled .icons{
809 |     opacity: .5;
810 | }
811 | 
812 | 
813 | button:active,
814 | .button:active,
815 | button.is-pressed,
816 | .button.is-pressed {
817 |      background-color: rgb(83, 83, 83);
818 |      color: rgb(220, 220, 220);
819 | }
820 | 
821 | button.btn-secondary,
822 | .button.btn-secondary {
823 |     border: 1px solid rgb(117, 117, 117);
824 | }
825 | 
826 | .btn-secondary:hover,
827 | .btn-secondary.is-hovered {
828 |     border: 1px solid rgb(117, 117, 117);
829 | }
830 | 
831 | .btn-icon:hover,
832 | .btn-icon.is-hovered {
833 |     border: 1px solid rgb(158, 158, 158);
834 |     background-color: rgb(199, 199, 199);
835 | }
836 | 
837 | .btn-icon:active,
838 | .btn-icon.is-pressed {
839 |     background-color: rgb(217, 217, 217);
840 | }
841 | 
842 | .btn-secondary:active,
843 | .btn-secondary.is-pressed {
844 |     background-color: rgb(135, 135, 135) ;
845 | }
846 | 
847 | button.is-focused,
848 | .button.is-focused,
849 | button:focus,
850 | .button:focus,
851 | .btn-secondary:focus,
852 | .btn-secondary.is-focused  {
853 |      border: 1px solid rgb(49, 100, 203);
854 | }
855 | /* there is a bug in postcss where this is not seeming to expand a variable inside a variable */
856 | 
857 | label[aria-haspopup=true] {
858 |     position: relative;
859 | }
860 | 
861 | 
862 | label[aria-haspopup=true] input + button {
863 |     /* have to overwrite these styles manually as there is a bug in postcss
864 |     that throws an error if i use appearance here.
865 |     */
866 |     border: none;
867 |     display: block;
868 |     padding: 0px;
869 | 
870 |     text-indent: 99999px;
871 |     height: 18px;
872 |     width: 11px;
873 |     position: absolute;
874 |     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="11" height="4" viewBox="0 0 11 4">	<polygon fill="rgb(97, 97, 97)" points="3.5,4 0.3,0.8 1,0.1 3.5,2.6 6,0 6.7,0.8 "/></svg>') no-repeat -50% 50%;
875 |     bottom: 0px;
876 |     right: 3px;
877 | }
878 | 
879 | 
880 | label[aria-haspopup=true].is-open input + button{
881 |     border-radius: 3px;
882 |     border: 1px solid rgb(179, 179, 179);
883 |     background-color: rgb(191, 191, 191);
884 | }
885 | /*themes*/
886 | :root {
887 |     /* todo (jwyles): maybe we can scope things to their actual contents eg button {
888 |         --border-color: #aabbcc;
889 |     };
890 |     and stuck to their bottom of their respective files.
891 |     I am trying to respect the ITCSS way of life strictly for now.
892 |     I am pretty sure it won't work out in a css4 world.
893 |     Since this is my first dive into this world, lets see if a pattern emerges as we build.
894 |     */
895 | }
896 | 
897 | 
898 | /*buttons*/
899 | 
900 | /*fonts */
901 | 
902 | 
903 | /*form elements */
904 | 
905 | 
906 | /*Utilities*/
907 | 
908 | 


--------------------------------------------------------------------------------
/Spectrum UI Library/CSS/styles-lighter.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Copyright (c) 2015 Adobe Systems Incorporated. All rights reserved.
  3 |  *
  4 |  * Permission is hereby granted, free of charge, to any person obtaining a
  5 |  * copy of this software and associated documentation files (the "Software"),
  6 |  * to deal in the Software without restriction, including without limitation
  7 |  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  8 |  * and/or sell copies of the Software, and to permit persons to whom the
  9 |  * Software is furnished to do so, subject to the following conditions:
 10 |  *
 11 |  * The above copyright notice and this permission notice shall be included in
 12 |  * all copies or substantial portions of the Software.
 13 |  *
 14 |  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 15 |  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 16 |  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 17 |  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 18 |  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 19 |  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 20 |  * DEALINGS IN THE SOFTWARE.
 21 |  *
 22 |  */
 23 | /* DO NOT EDIT THIS FILE.  It is generated from other sources */
 24 | 
 25 | /*Settings*/
 26 | :root {
 27 |     /* todo (jwyles): maybe we can scope things to their actual contents eg button {
 28 |         --border-color: #aabbcc;
 29 |     };
 30 |     and stuck to their bottom of their respective files.
 31 |     I am trying to respect the ITCSS way of life strictly for now.
 32 |     I am pretty sure it won't work out in a css4 world.
 33 |     Since this is my first dive into this world, lets see if a pattern emerges as we build.
 34 |     */
 35 | }
 36 | @font-face {
 37 |     font-family: AdobeClean;
 38 |     src: url("../fonts/AdobeClean-Regular.otf") format("opentype");
 39 | }
 40 | 
 41 | @font-face {
 42 |     font-family: AdobeClean;
 43 |     src: url("../fonts/AdobeClean-Bold.otf") format("opentype");
 44 |     font-weight: bold
 45 | }
 46 | 
 47 | @font-face {
 48 |     font-family: AdobeClean;
 49 |     src: url("../fonts/AdobeClean-Light.otf") format("opentype");
 50 |     font-weight: lighter
 51 | }
 52 | 
 53 | 
 54 | :root {
 55 |     /* you want this to go from newest to oldest in terms of os */
 56 | }
 57 | /*Tools*/
 58 | /*Generic*/
 59 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
 60 | 
 61 | /**
 62 |  * 1. Set default font family to sans-serif.
 63 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
 64 |  *    user zoom.
 65 |  */
 66 | 
 67 | html {
 68 |   font-family: sans-serif; /* 1 */
 69 |   -ms-text-size-adjust: 100%; /* 2 */
 70 |   -webkit-text-size-adjust: 100%; /* 2 */
 71 | }
 72 | 
 73 | /**
 74 |  * Remove default margin.
 75 |  */
 76 | 
 77 | body {
 78 |   margin: 0;
 79 | }
 80 | 
 81 | /* HTML5 display definitions
 82 |    ========================================================================== */
 83 | 
 84 | /**
 85 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 86 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11
 87 |  * and Firefox.
 88 |  * Correct `block` display not defined for `main` in IE 11.
 89 |  */
 90 | 
 91 | article,
 92 | aside,
 93 | details,
 94 | figcaption,
 95 | figure,
 96 | footer,
 97 | header,
 98 | hgroup,
 99 | main,
100 | menu,
101 | nav,
102 | section,
103 | summary {
104 |   display: block;
105 | }
106 | 
107 | /**
108 |  * 1. Correct `inline-block` display not defined in IE 8/9.
109 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
110 |  */
111 | 
112 | audio,
113 | canvas,
114 | progress,
115 | video {
116 |   display: inline-block; /* 1 */
117 |   vertical-align: baseline; /* 2 */
118 | }
119 | 
120 | /**
121 |  * Prevent modern browsers from displaying `audio` without controls.
122 |  * Remove excess height in iOS 5 devices.
123 |  */
124 | 
125 | audio:not([controls]) {
126 |   display: none;
127 |   height: 0;
128 | }
129 | 
130 | /**
131 |  * Address `[hidden]` styling not present in IE 8/9/10.
132 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
133 |  */
134 | 
135 | [hidden],
136 | template {
137 |   display: none;
138 | }
139 | 
140 | /* Links
141 |    ========================================================================== */
142 | 
143 | /**
144 |  * Remove the gray background color from active links in IE 10.
145 |  */
146 | 
147 | a {
148 |   background-color: transparent;
149 | }
150 | 
151 | /**
152 |  * Improve readability when focused and also mouse hovered in all browsers.
153 |  */
154 | 
155 | a:active,
156 | a:hover {
157 |   outline: 0;
158 | }
159 | 
160 | /* Text-level semantics
161 |    ========================================================================== */
162 | 
163 | /**
164 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
165 |  */
166 | 
167 | abbr[title] {
168 |   border-bottom: 1px dotted;
169 | }
170 | 
171 | /**
172 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
173 |  */
174 | 
175 | b,
176 | strong {
177 |   font-weight: bold;
178 | }
179 | 
180 | /**
181 |  * Address styling not present in Safari and Chrome.
182 |  */
183 | 
184 | dfn {
185 |   font-style: italic;
186 | }
187 | 
188 | /**
189 |  * Address variable `h1` font-size and margin within `section` and `article`
190 |  * contexts in Firefox 4+, Safari, and Chrome.
191 |  */
192 | 
193 | h1 {
194 |   font-size: 2em;
195 |   margin: 0.67em 0;
196 | }
197 | 
198 | /**
199 |  * Address styling not present in IE 8/9.
200 |  */
201 | 
202 | mark {
203 |   background: #ff0;
204 |   color: #000;
205 | }
206 | 
207 | /**
208 |  * Address inconsistent and variable font size in all browsers.
209 |  */
210 | 
211 | small {
212 |   font-size: 80%;
213 | }
214 | 
215 | /**
216 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
217 |  */
218 | 
219 | sub,
220 | sup {
221 |   font-size: 75%;
222 |   line-height: 0;
223 |   position: relative;
224 |   vertical-align: baseline;
225 | }
226 | 
227 | sup {
228 |   top: -0.5em;
229 | }
230 | 
231 | sub {
232 |   bottom: -0.25em;
233 | }
234 | 
235 | /* Embedded content
236 |    ========================================================================== */
237 | 
238 | /**
239 |  * Remove border when inside `a` element in IE 8/9/10.
240 |  */
241 | 
242 | img {
243 |   border: 0;
244 | }
245 | 
246 | /**
247 |  * Correct overflow not hidden in IE 9/10/11.
248 |  */
249 | 
250 | svg:not(:root) {
251 |   overflow: hidden;
252 | }
253 | 
254 | /* Grouping content
255 |    ========================================================================== */
256 | 
257 | /**
258 |  * Address margin not present in IE 8/9 and Safari.
259 |  */
260 | 
261 | figure {
262 |   margin: 1em 40px;
263 | }
264 | 
265 | /**
266 |  * Address differences between Firefox and other browsers.
267 |  */
268 | 
269 | hr {
270 |   box-sizing: content-box;
271 |   height: 0;
272 | }
273 | 
274 | /**
275 |  * Contain overflow in all browsers.
276 |  */
277 | 
278 | pre {
279 |   overflow: auto;
280 | }
281 | 
282 | /**
283 |  * Address odd `em`-unit font size rendering in all browsers.
284 |  */
285 | 
286 | code,
287 | kbd,
288 | pre,
289 | samp {
290 |   font-family: monospace, monospace;
291 |   font-size: 1em;
292 | }
293 | 
294 | /* Forms
295 |    ========================================================================== */
296 | 
297 | /**
298 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
299 |  * styling of `select`, unless a `border` property is set.
300 |  */
301 | 
302 | /**
303 |  * 1. Correct color not being inherited.
304 |  *    Known issue: affects color of disabled elements.
305 |  * 2. Correct font properties not being inherited.
306 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
307 |  */
308 | 
309 | button,
310 | input,
311 | optgroup,
312 | select,
313 | textarea {
314 |   color: inherit; /* 1 */
315 |   font: inherit; /* 2 */
316 |   margin: 0; /* 3 */
317 | }
318 | 
319 | /**
320 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
321 |  */
322 | 
323 | button {
324 |   overflow: visible;
325 | }
326 | 
327 | /**
328 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
329 |  * All other form control elements do not inherit `text-transform` values.
330 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
331 |  * Correct `select` style inheritance in Firefox.
332 |  */
333 | 
334 | button,
335 | select {
336 |   text-transform: none;
337 | }
338 | 
339 | /**
340 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
341 |  *    and `video` controls.
342 |  * 2. Correct inability to style clickable `input` types in iOS.
343 |  * 3. Improve usability and consistency of cursor style between image-type
344 |  *    `input` and others.
345 |  */
346 | 
347 | button,
348 | html input[type="button"], /* 1 */
349 | input[type="reset"],
350 | input[type="submit"] {
351 |   -webkit-appearance: button; /* 2 */
352 |   cursor: pointer; /* 3 */
353 | }
354 | 
355 | /**
356 |  * Re-set default cursor for disabled elements.
357 |  */
358 | 
359 | button[disabled],
360 | html input[disabled] {
361 |   cursor: default;
362 | }
363 | 
364 | /**
365 |  * Remove inner padding and border in Firefox 4+.
366 |  */
367 | 
368 | button::-moz-focus-inner,
369 | input::-moz-focus-inner {
370 |   border: 0;
371 |   padding: 0;
372 | }
373 | 
374 | /**
375 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
376 |  * the UA stylesheet.
377 |  */
378 | 
379 | input {
380 |   line-height: normal;
381 | }
382 | 
383 | /**
384 |  * It's recommended that you don't attempt to style these elements.
385 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
386 |  *
387 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
388 |  * 2. Remove excess padding in IE 8/9/10.
389 |  */
390 | 
391 | input[type="checkbox"],
392 | input[type="radio"] {
393 |   box-sizing: border-box; /* 1 */
394 |   padding: 0; /* 2 */
395 | }
396 | 
397 | /**
398 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
399 |  * `font-size` values of the `input`, it causes the cursor style of the
400 |  * decrement button to change from `default` to `text`.
401 |  */
402 | 
403 | input[type="number"]::-webkit-inner-spin-button,
404 | input[type="number"]::-webkit-outer-spin-button {
405 |   height: auto;
406 | }
407 | 
408 | /**
409 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
410 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
411 |  *    (include `-moz` to future-proof).
412 |  */
413 | 
414 | input[type="search"] {
415 |   -webkit-appearance: textfield; /* 1 */ /* 2 */
416 |   box-sizing: content-box;
417 | }
418 | 
419 | /**
420 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
421 |  * Safari (but not Chrome) clips the cancel button when the search input has
422 |  * padding (and `textfield` appearance).
423 |  */
424 | 
425 | input[type="search"]::-webkit-search-cancel-button,
426 | input[type="search"]::-webkit-search-decoration {
427 |   -webkit-appearance: none;
428 | }
429 | 
430 | /**
431 |  * Define consistent border, margin, and padding.
432 |  */
433 | 
434 | fieldset {
435 |   border: 1px solid #c0c0c0;
436 |   margin: 0 2px;
437 |   padding: 0.35em 0.625em 0.75em;
438 | }
439 | 
440 | /**
441 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
442 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
443 |  */
444 | 
445 | legend {
446 |   border: 0; /* 1 */
447 |   padding: 0; /* 2 */
448 | }
449 | 
450 | /**
451 |  * Remove default vertical scrollbar in IE 8/9/10/11.
452 |  */
453 | 
454 | textarea {
455 |   overflow: auto;
456 | }
457 | 
458 | /**
459 |  * Don't inherit the `font-weight` (applied by a rule above).
460 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
461 |  */
462 | 
463 | optgroup {
464 |   font-weight: bold;
465 | }
466 | 
467 | /* Tables
468 |    ========================================================================== */
469 | 
470 | /**
471 |  * Remove most spacing between table cells.
472 |  */
473 | 
474 | table {
475 |   border-collapse: collapse;
476 |   border-spacing: 0;
477 | }
478 | 
479 | td,
480 | th {
481 |   padding: 0;
482 | }
483 | html {
484 |   box-sizing: border-box;
485 | }
486 | 
487 | *, *:before, *:after {
488 |   box-sizing: inherit;
489 | }
490 | /*Base*/
491 | body {
492 |     background-color: rgb(240, 240, 240);
493 | }
494 | html {
495 |     font-size: 62.5%
496 | }
497 | 
498 | body {
499 |     font-size: 16px;
500 |     font-size: 1.6rem;
501 |     font-family: "San Francisco", "Helvetica Neue", "Lucida Grande", "Segoe UI";
502 |     color: rgb(75, 75, 75);
503 | }
504 | 
505 | 
506 | p,
507 | span,
508 | h1,
509 | h2,
510 | h3,
511 | h4,
512 | h5,
513 | h6,
514 | label {
515 |     font-weight: normal;
516 |     font-family: "San Francisco", "Helvetica Neue", "Lucida Grande", "Segoe UI";
517 |     font-size: 12px;
518 |     font-size: 1.2rem;
519 | }
520 | 
521 | h1 {
522 |     font-size: 14px;
523 |     font-size: 1.4rem;
524 | }
525 | 
526 | h2 {
527 |     font-size: 12px;
528 |     font-size: 1.2rem;
529 | }
530 | 
531 | h3 {
532 |     font-size: 12px;
533 |     font-size: 1.2rem;
534 | }
535 | 
536 | 
537 | p[disabled],
538 | span[disabled],
539 | h1[disabled],
540 | h2[disabled],
541 | h3[disabled],
542 | h4[disabled],
543 | h5[disabled],
544 | h6[disabled],
545 | label[disabled] {
546 |      color: rgb(181,181,181);
547 | }
548 | 
549 | p.is-active,
550 | span.is-active,
551 | h1.is-active,
552 | h2.is-active,
553 | h3.is-active,
554 | h4.is-active,
555 | h5.is-active,
556 | h6.is-active,
557 | label.is-active {
558 |     font-weight: bold;
559 | }
560 | 
561 | /* todo, think more about this api. It means that if you have tabs you would need to update every class rather than the active.
562 | this could probably be better done with some better selectors */
563 | 
564 | p.is-inactive,
565 | span.is-inactive,
566 | h1.is-inactive,
567 | h2.is-inactive,
568 | h3.is-inactive,
569 | h4.is-inactive,
570 | h5.is-inactive,
571 | h6.is-inactive,
572 | label.is-inactive {
573 |     color: rgb(160, 160, 160);
574 | }
575 | 
576 | p.label-small,
577 | span.label-small,
578 | label.label-small,
579 | div.label-small {
580 |     font-size: 12px;
581 |     font-size: 1.2rem;
582 | }
583 | 
584 | 
585 | p.label-medium,
586 | span.label-medium,
587 | label.label-medium,
588 | div.label-medium {
589 |     font-size: 12px;
590 |     font-size: 1.2rem;
591 | }
592 | 
593 | p.label-large,
594 | span.label-large,
595 | label.label-large,
596 | div.label-large {
597 |     font-size: 14px;
598 |     font-size: 1.4rem;
599 | }
600 | 
601 | 
602 | input[type="radio"],
603 | input[type="checkbox"] {
604 |     position: absolute;
605 |     left: -999999px;
606 | }
607 | 
608 | input[type="radio"]:disabled + label,
609 | input[type="checkbox"]:disabled + label {
610 |     color: rgb(181,181,181);
611 | }
612 | 
613 | 
614 | input[type="radio"] + label:before,
615 | input[type="checkbox"] + label:before {
616 |     position: relative;
617 |     content: "\00A0";
618 |     display: inline-block;
619 |     width: 14px;
620 |     height: 14px;
621 | 
622 |     margin-right: 6px;
623 |     left: 0;
624 |     top: 1px;
625 |     background-color: rgb(250, 250, 250);
626 |     border: 1px solid rgb(180, 180, 180);
627 |     border-radius: 2px;
628 | }
629 | 
630 | input[type=checkbox]:checked + label:before {
631 |     background: rgb(108, 108, 108) url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve"><polyline fill="none" stroke="rgb(250, 250, 250)" stroke-width="2.5" stroke-miterlimit="10" points="2.8,6.3 6.4,9.6 11.6,3.7 "/></svg>') no-repeat;
632 |     border: 1px solid rgb(108, 108, 108);
633 | }
634 | 
635 | input[type=radio]:checked + label:before {
636 |     background: rgb(108, 108, 108) url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve"><circle fill="rgb(250, 250, 250)" cx="7" cy="7" r="3.3"/></svg>') no-repeat;
637 |     border: 1px solid rgb(108, 108, 108);
638 | }
639 | 
640 | input[type=checkbox]:indeterminate + label:before {
641 |     background: rgb(108, 108, 108) url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve"><line fill="none" stroke="rgb(250, 250, 250)" stroke-width="2" stroke-miterlimit="10" x1="3.6" y1="7.2" x2="10.6" y2="7.2"/></svg>') no-repeat;
642 |     border: 1px solid rgb(108, 108, 108);
643 | }
644 | 
645 | input[type="radio"]:active + label:before,
646 | input[type="checkbox"]:active + label:before,
647 | input[type="radio"].is-pressed + label:before,
648 | input[type="checkbox"].is-pressed + label:before {
649 |     background-color: rgb(180, 180, 180);
650 |     border: 1px solid rgb(180, 180, 180);
651 | }
652 | 
653 | select:disabled,
654 | input[type="radio"]:disabled + label:before,
655 | input[type="checkbox"]:disabled + label:before {
656 |     border: 1px solid rgb(231, 231, 231);
657 |     background-color: rgb(250, 250, 250);
658 |     color: rgb(181,181,181);
659 |     opacity: 1;
660 | }
661 | 
662 | input[type="radio"]:disabled:checked + label:before,
663 | input[type="checkbox"]:disabled:checked + label:before {
664 |     border: 1px solid rgb(231, 231, 231);
665 |     background-color: rgb(231, 231, 231);
666 | }
667 | 
668 | input[type="radio"] + label:before {
669 |     border-radius: 7px;
670 | }
671 | 
672 | 
673 | input[type="radio"]:focus + label:before,
674 | input[type="checkbox"]:focus + label:before,
675 | input[type="radio"].is-focused + label:before,
676 | input[type="checkbox"].is-focused + label:before  {
677 |     border: 1px solid rgb(55, 111, 226);
678 | }
679 | 
680 | input[type=text] {
681 |     border: none;
682 |     background-color: transparent;
683 |     border-bottom: 1px solid rgb(173, 173, 173);
684 |     padding-left: 4px;
685 |     outline: none;
686 | }
687 | 
688 | input[type=text]::-moz-selection {
689 |   background: rgb(173, 198, 239);
690 | }
691 | 
692 | input[type=text]::selection {
693 |   background: rgb(173, 198, 239);
694 | }
695 | 
696 | input[type=text]:focus,
697 | input[type=text].is-focused {
698 |     border-bottom: 1px solid rgb(55, 111, 226);
699 | }
700 | 
701 | select {
702 |     border-radius: 3px;
703 |     outline: none;
704 |     padding: 5px 20px 5px 5px;
705 |     border: 1px solid rgb(219, 219, 219);
706 |     background: rgb(250, 250, 250) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="11" height="4" viewBox="0 0 11 4">	<polygon fill="rgb(120, 120, 120)" points="3.5,4 0.3,0.8 1,0.1 3.5,2.6 6,0 6.7,0.8 "/></svg>') no-repeat 100% 50%;
707 |     background-size: 11px 7px;
708 |     -webkit-appearance: none;
709 |        -moz-appearance: none;
710 |             appearance: none;
711 | }
712 | 
713 | select option {
714 |       background-color: rgb(232, 232, 232);
715 |       color: rgb(54, 54, 54);
716 | }
717 | 
718 | 
719 | select:active,
720 | select.is-pressed{
721 |     background-color: rgb(180, 180, 180);
722 |     border: 1px solid rgb(179, 179, 179);
723 | }
724 | 
725 | select:disabled {
726 |     border: 1px solid rgb(231, 231, 231);
727 |     background: rgb(250, 250, 250) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="11" height="4" viewBox="0 0 11 4">	<polygon fill="rgb(178, 178, 178)" points="3.5,4 0.3,0.8 1,0.1 3.5,2.6 6,0 6.7,0.8 "/></svg>') no-repeat 100% 50%;
728 | }
729 | 
730 | input[type=checkbox]:checked + label:before {
731 |     text-indent: 2px;
732 | }
733 | /*Objects*/
734 | .container {
735 |     display: -webkit-box;
736 |     display: -webkit-flex;
737 |     display: -ms-flexbox;
738 |     display: flex; /* or inline-flex */
739 | }
740 | /*Components*/
741 | /* bug in css selectors currently, so can't use this just yet*/
742 | 
743 | 
744 | button,
745 | .button {
746 |     border: 1px solid --button-main-color;
747 |     border: 1px solid rgb(75, 75, 75);
748 |     background-color: rgb(240, 240, 240);
749 |     border-radius: 50px;
750 |     color: rgb(75, 75, 75);
751 |     display: inline-block;
752 |     padding: 5px 20px 5px;
753 |     font-family: "San Francisco", "Helvetica Neue", "Lucida Grande", "Segoe UI";
754 |     font-size: 14px;
755 |     font-size: 1.4rem;
756 |     outline: none;
757 | }
758 | 
759 | .btn-icon {
760 |     width: 29px;
761 |     height: 26px;
762 |     border-radius: 0;
763 |     border: none;
764 |     padding: 0;
765 |     vertical-align: middle;
766 |     border: 1px solid rgb(240, 240, 240);
767 | }
768 | 
769 | .btn-small {
770 |     border: 1px solid rgb(219, 219, 219);
771 |     background-color: rgb(250, 250, 250);
772 |     border-radius: 4px;
773 |     padding: 5px 20px 5px;
774 |     font-size: 12px;
775 |     font-size: 1.2rem;
776 | }
777 | 
778 | button:disabled,
779 | .button:disabled,
780 | button.is-disabled,
781 | .button.is-disabled,
782 | .btn-secondary.is-disabled,
783 | .btn-secondary:disabled {
784 |     color: rgb(181,181,181);
785 |     border: 1px solid rgb(231, 231, 231);
786 | }
787 | 
788 | .btn-small.is-disabled,
789 | .btn-small:disabled {
790 |     background-color: rgb(250, 250, 250);
791 |     border: 1px solid rgb(231, 231, 231);
792 |     color: rgb(100, 100, 100);
793 | }
794 | 
795 | .btn-small.is-pressed,
796 | .btn-small:active {
797 |     color: rgb(75, 75, 75);
798 |     border: 1px solid rgb(168, 168, 168);
799 |     background-color: rgb(191, 191, 191);
800 | }
801 | 
802 | 
803 | .btn-icon .icons {
804 |     fill: rgb(50, 50, 50);
805 | }
806 | 
807 | .btn-icon.is-disabled .icons,
808 | .btn-icon:disabled .icons{
809 |     opacity: .5;
810 | }
811 | 
812 | 
813 | button:active,
814 | .button:active,
815 | button.is-pressed,
816 | .button.is-pressed {
817 |      background-color: rgb(75, 75, 75);
818 |      color: rgb(220, 220, 220);
819 | }
820 | 
821 | button.btn-secondary,
822 | .button.btn-secondary {
823 |     border: 1px solid rgb(173, 173, 173);
824 | }
825 | 
826 | .btn-secondary:hover,
827 | .btn-secondary.is-hovered {
828 |     border: 1px solid rgb(173, 173, 173);
829 | }
830 | 
831 | .btn-icon:hover,
832 | .btn-icon.is-hovered {
833 |     border: 1px solid rgb(224, 224, 224);
834 |     background-color: rgb(250, 250, 250);
835 | }
836 | 
837 | .btn-icon:active,
838 | .btn-icon.is-pressed {
839 |     background-color: rgb(217, 217, 217);
840 | }
841 | 
842 | .btn-secondary:active,
843 | .btn-secondary.is-pressed {
844 |     background-color: rgb(173, 173, 173);
845 | }
846 | 
847 | button.is-focused,
848 | .button.is-focused,
849 | button:focus,
850 | .button:focus,
851 | .btn-secondary:focus,
852 | .btn-secondary.is-focused  {
853 |      border: 1px solid rgb(55, 111, 226);
854 | }
855 | /* there is a bug in postcss where this is not seeming to expand a variable inside a variable */
856 | 
857 | label[aria-haspopup=true] {
858 |     position: relative;
859 | }
860 | 
861 | 
862 | label[aria-haspopup=true] input + button {
863 |     /* have to overwrite these styles manually as there is a bug in postcss
864 |     that throws an error if i use appearance here.
865 |     */
866 |     border: none;
867 |     display: block;
868 |     padding: 0px;
869 | 
870 |     text-indent: 99999px;
871 |     height: 18px;
872 |     width: 11px;
873 |     position: absolute;
874 |     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="11" height="4" viewBox="0 0 11 4">	<polygon fill="rgb(120, 120, 120)" points="3.5,4 0.3,0.8 1,0.1 3.5,2.6 6,0 6.7,0.8 "/></svg>') no-repeat -50% 50%;
875 |     bottom: 0px;
876 |     right: 3px;
877 | }
878 | 
879 | 
880 | label[aria-haspopup=true].is-open input + button{
881 |     border-radius: 3px;
882 |     border: 1px solid rgb(179, 179, 179);
883 |     background-color: rgb(191, 191, 191);
884 | }
885 | /*themes*/
886 | /*Utilities*/
887 | 
888 | 
889 | 


--------------------------------------------------------------------------------
/Spectrum UI Library/JS/themecolors.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Copyright (c) 2013-2015 Adobe Systems Incorporated. All rights reserved.
  3 |  *
  4 |  * Permission is hereby granted, free of charge, to any person obtaining a
  5 |  * copy of this software and associated documentation files (the "Software"),
  6 |  * to deal in the Software without restriction, including without limitation
  7 |  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  8 |  * and/or sell copies of the Software, and to permit persons to whom the
  9 |  * Software is furnished to do so, subject to the following conditions:
 10 |  *
 11 |  * The above copyright notice and this permission notice shall be included in
 12 |  * all copies or substantial portions of the Software.
 13 |  *
 14 |  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 15 |  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 16 |  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 17 |  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 18 |  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 19 |  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
 20 |  * DEALINGS IN THE SOFTWARE.
 21 |  *
 22 |  */
 23 | 
 24 | //
 25 | // Code to handle Photoshop theme color changes
 26 | //
 27 | // John Peterson - May 2014
 28 | //
 29 | 
 30 | // Get a reference to a CSInterface object
 31 | var csInterface = new CSInterface();
 32 | 
 33 | var themeColorSetupHook = null;
 34 | var debugPort = null;
 35 | 
 36 | function tohex(c) { return Math.round(c).toString(16); }
 37 | 
 38 | // Trying to make this a method of UIColor fails...why?
 39 | //UIColor.prototype.toHexString = function()
 40 | function colorToHex( uicolor )
 41 | {
 42 |     var result = "#";
 43 |     result += tohex( uicolor.color.red ) + tohex( uicolor.color.green ) + tohex( uicolor.color.blue );
 44 |     if (uicolor.color.alpha < 255)
 45 |         result += tohex( uicolor.color.alpha );
 46 |     return result.toUpperCase();
 47 | }
 48 | 
 49 | function grayToHex( gray )
 50 | {
 51 |     var hex = tohex(gray);
 52 |     return "#"+hex+hex+hex;
 53 | }
 54 | 
 55 | // UI item colors based on the four workspace brightness settings.  These are
 56 | // hand-lifted off of the PS UI, because the CEP host environment doesn't
 57 | // provide anything except for the background color.
 58 | var colorTable = {
 59 |     '#32':{ textfg:0xCE, textbg:0x22, cssfile:'darker' },
 60 |     '#34':{ textfg:0xCE, textbg:0x22, cssfile:'darker' }, // CC 2014
 61 |     '#53':{ textfg:0xE1, textbg:0x3A, cssfile:'dark' },
 62 |     '#B8':{ textfg:0x18, textbg:0xEE, cssfile:'light' },
 63 |     '#D6':{ textfg:0x21, textbg:0xFF, cssfile:'lighter' }, // CC 2014
 64 |     '#F0':{ textfg:0x21, textbg:0xFF, cssfile:'lighter' } };
 65 | 
 66 | 
 67 | // This swaps the light/dark stylesheets for the control widgets
 68 | // <link id="ccstyleTheme" href="css/ccstyle_D.css" rel="stylesheet" type="text/css" />
 69 | 
 70 | function swapCSS( cssfilename )
 71 | {
 72 |     var panelName = "config";
 73 |     var themeID = panelName + "Theme";
 74 | 
 75 |     if ($("#ccstyleTheme").length)
 76 |         $("#ccstyleTheme").remove();
 77 |     var link = document.createElement('link');
 78 |     $("head").append('<link id="ccstyleTheme" href="css/styles-'
 79 |                      + cssfilename +'.css" rel="stylesheet" type="text/css" />');
 80 | }
 81 | 
 82 | // Called by the theme color changed event.
 83 | function setupColors()
 84 | {
 85 |     // You need to reload the host environment; the csInterface object won't do it for you
 86 |     csInterface.hostEnvironment = JSON.parse(window.__adobe_cep__.getHostEnvironment());
 87 |     window.document.bgColor = colorToHex( csInterface.hostEnvironment.appSkinInfo.panelBackgroundColor );
 88 | 
 89 |     var bgcolorval = window.document.bgColor.slice(0,3);
 90 |     var colors = colorTable[bgcolorval];
 91 |     window.document.fgColor = grayToHex( colors.textfg );
 92 | 
 93 |     swapCSS(colorTable[bgcolorval].cssfile);
 94 | 
 95 |     if (themeColorSetupHook)
 96 |         themeColorSetupHook();
 97 | }
 98 | 
 99 | function initColors( setupHook )
100 | {
101 |     if (typeof setupHook !== "undefined")
102 |         themeColorSetupHook = setupHook;
103 |     setupColors();
104 | 
105 |     // Causes setupColors() to get called when them color changes
106 |     csInterface.addEventListener( CSInterface.THEME_COLOR_CHANGED_EVENT, setupColors, null );
107 |     csInterface.initResourceBundle();
108 | 
109 |     // Look for the debug control file, and if it exists,
110 |     // enable debugging controls
111 |     var path = require("path");
112 |     var fs = require("fs");
113 |     var debugPath = path.join(csInterface.getSystemPath( SystemPath.EXTENSION ), ".debug");
114 |     if (fs.existsSync(debugPath)) {
115 |         $(".debuglink").toggle( true );
116 |         var debugText = fs.readFileSync(debugPath, "utf8");
117 |         var m = debugText.match(/<Host.*Port="(\d+)"[/]>/m);
118 |         // Enable the debug link only if we know the port.
119 |         if (m)
120 |             debugPort = m[1];
121 |         else
122 |             $("#debug").toggle( false );
123 |     }
124 |     else
125 |         $(".debuglink").toggle( false );
126 | }
127 | 
128 | // These are just developer shortcuts; they shouldn't appear in non-debug panels
129 | $("#reload").click( function() { window.location.reload(true); } );
130 | $("#sources").click( function() { csInterface.openURLInDefaultBrowser(""); } );
131 | // This assumes CHROME is your default browser!
132 | $("#debug").click( function() { if (debugPort) csInterface.openURLInDefaultBrowser("http://localhost:"+debugPort); } );
133 | 


--------------------------------------------------------------------------------
/Topcoat UI Library/CSS/topcoat-desktop-dark.min.css:
--------------------------------------------------------------------------------
1 | .button-bar{display:table;table-layout:fixed;white-space:nowrap;margin:0;padding:0}.button-bar__item{display:table-cell;width:auto;border-radius:0}.button-bar__item>input{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.button-bar__button{border-radius:inherit}.button-bar__item:disabled{opacity:.3;cursor:default;pointer-events:none}.button,.topcoat-button,.topcoat-button--quiet,.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button--cta,.topcoat-button--large--cta,.topcoat-button-bar__button,.topcoat-button-bar__button--large{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.button--disabled,.topcoat-button:disabled,.topcoat-button--quiet:disabled,.topcoat-button--large:disabled,.topcoat-button--large--quiet:disabled,.topcoat-button--cta:disabled,.topcoat-button--large--cta:disabled,.topcoat-button-bar__button:disabled,.topcoat-button-bar__button--large:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-button,.topcoat-button--quiet,.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button--cta,.topcoat-button--large--cta,.topcoat-button-bar__button,.topcoat-button-bar__button--large{padding:0 .563rem;font-size:12px;line-height:1.313rem;letter-spacing:0;color:#c6c8c8;text-shadow:0 -1px rgba(0,0,0,.69);vertical-align:top;background-color:#595b5b;box-shadow:inset 0 1px #737373;border:1px solid #333434;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover,.topcoat-button-bar__button:hover,.topcoat-button-bar__button--large:hover{background-color:#626465}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--quiet:hover:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--large--quiet:hover:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1;outline:0}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{border:1px solid #333434;background-color:#3f4041;box-shadow:inset 0 1px rgba(0,0,0,.05)}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 -1px rgba(0,0,0,.69);border:1px solid #333434;box-shadow:inset 0 1px #737373}.topcoat-button--quiet:active,.topcoat-button--quiet:focus:active,.topcoat-button--large--quiet:active,.topcoat-button--large--quiet:focus:active{color:#c6c8c8;text-shadow:0 -1px rgba(0,0,0,.69);background-color:#3f4041;border:1px solid #333434;box-shadow:inset 0 1px rgba(0,0,0,.05)}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:.875rem;font-weight:600;line-height:1.688rem;padding:0 .875rem}.topcoat-button--large--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(0,0,0,.36)}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#4ca1e4}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#1e7dc8;box-shadow:inset 0 1px rgba(0,0,0,.12)}.topcoat-button--large--cta{font-size:.875rem;font-weight:600;line-height:1.688rem;padding:0 .875rem}.button-bar,.topcoat-button-bar{display:table;table-layout:fixed;white-space:nowrap;margin:0;padding:0}.button-bar__item,.topcoat-button-bar__item{display:table-cell;width:auto;border-radius:0}.button-bar__item>input,.topcoat-button-bar__item>input{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.button-bar__button{border-radius:inherit}.button-bar__item:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-button-bar>.topcoat-button-bar__item:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.topcoat-button-bar>.topcoat-button-bar__item:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.topcoat-button-bar__item:first-child>.topcoat-button-bar__button,.topcoat-button-bar__item:first-child>.topcoat-button-bar__button--large{border-right:0}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0}.topcoat-button-bar__button{border-radius:inherit}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1}.topcoat-button-bar__button--large{border-radius:inherit}.button{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.button--disabled{opacity:.3;cursor:default;pointer-events:none}.button,.topcoat-button,.topcoat-button--quiet,.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button--cta,.topcoat-button--large--cta{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.button--disabled,.topcoat-button:disabled,.topcoat-button--quiet:disabled,.topcoat-button--large:disabled,.topcoat-button--large--quiet:disabled,.topcoat-button--cta:disabled,.topcoat-button--large--cta:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-button,.topcoat-button--quiet,.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button--cta,.topcoat-button--large--cta{padding:0 .563rem;font-size:12px;line-height:1.313rem;letter-spacing:0;color:#c6c8c8;text-shadow:0 -1px rgba(0,0,0,.69);vertical-align:top;background-color:#595b5b;box-shadow:inset 0 1px #737373;border:1px solid #333434;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:#626465}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--quiet:hover:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--large--quiet:hover:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1;outline:0}.topcoat-button:active,.topcoat-button--large:active{border:1px solid #333434;background-color:#3f4041;box-shadow:inset 0 1px rgba(0,0,0,.05)}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 -1px rgba(0,0,0,.69);border:1px solid #333434;box-shadow:inset 0 1px #737373}.topcoat-button--quiet:active,.topcoat-button--quiet:focus:active,.topcoat-button--large--quiet:active,.topcoat-button--large--quiet:focus:active{color:#c6c8c8;text-shadow:0 -1px rgba(0,0,0,.69);background-color:#3f4041;border:1px solid #333434;box-shadow:inset 0 1px rgba(0,0,0,.05)}.topcoat-button--large,.topcoat-button--large--quiet{font-size:.875rem;font-weight:600;line-height:1.688rem;padding:0 .875rem}.topcoat-button--large--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(0,0,0,.36)}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#4ca1e4}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#1e7dc8;box-shadow:inset 0 1px rgba(0,0,0,.12)}.topcoat-button--large--cta{font-size:.875rem;font-weight:600;line-height:1.688rem;padding:0 .875rem}input[type=checkbox]{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.checkbox{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox__label{position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox--disabled{opacity:.3;cursor:default;pointer-events:none}.checkbox:before,.checkbox:after{content:'';position:absolute}.checkbox:before{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}input[type=checkbox]{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.checkbox,.topcoat-checkbox__checkmark{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox__label,.topcoat-checkbox{position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox--disabled,input[type=checkbox]:disabled+.topcoat-checkbox__checkmark{opacity:.3;cursor:default;pointer-events:none}.checkbox:before,.checkbox:after,.topcoat-checkbox__checkmark:before,.topcoat-checkbox__checkmark:after{content:'';position:absolute}.checkbox:before,.topcoat-checkbox__checkmark:before{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.topcoat-checkbox__checkmark{height:1rem}input[type=checkbox]{height:1rem;width:1rem;margin-top:0;margin-right:-1rem;margin-bottom:-1rem;margin-left:0}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:1rem}.topcoat-checkbox__checkmark:before{width:1rem;height:1rem;background:#595b5b;border:1px solid #333434;border-radius:3px;box-shadow:inset 0 1px #737373}.topcoat-checkbox__checkmark{width:1rem;height:1rem}.topcoat-checkbox__checkmark:after{top:2px;left:1px;opacity:0;width:14px;height:4px;background:transparent;border:7px solid #c6c8c8;border-width:3px;border-top:0;border-right:0;border-radius:1px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #333434;background-color:#3f4041;box-shadow:inset 0 1px rgba(0,0,0,.05)}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #333434;background:#595b5b;box-shadow:inset 0 1px #737373}.button,.topcoat-icon-button,.topcoat-icon-button--quiet,.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.button--disabled,.topcoat-icon-button:disabled,.topcoat-icon-button--quiet:disabled,.topcoat-icon-button--large:disabled,.topcoat-icon-button--large--quiet:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-icon-button,.topcoat-icon-button--quiet,.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{padding:0 .25rem;line-height:1.313rem;letter-spacing:0;color:#c6c8c8;text-shadow:0 -1px rgba(0,0,0,.69);vertical-align:baseline;background-color:#595b5b;box-shadow:inset 0 1px #737373;border:1px solid #333434;border-radius:4px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:#626465}.topcoat-icon-button:focus,.topcoat-icon-button--quiet:focus,.topcoat-icon-button--quiet:hover:focus,.topcoat-icon-button--large:focus,.topcoat-icon-button--large--quiet:focus,.topcoat-icon-button--large--quiet:hover:focus{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1;outline:0}.topcoat-icon-button:active,.topcoat-icon-button--large:active{border:1px solid #333434;background-color:#3f4041;box-shadow:inset 0 1px rgba(0,0,0,.05)}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 -1px rgba(0,0,0,.69);border:1px solid #333434;box-shadow:inset 0 1px #737373}.topcoat-icon-button--quiet:active,.topcoat-icon-button--quiet:focus:active,.topcoat-icon-button--large--quiet:active,.topcoat-icon-button--large--quiet:focus:active{color:#c6c8c8;text-shadow:0 -1px rgba(0,0,0,.69);background-color:#3f4041;border:1px solid #333434;box-shadow:inset 0 1px rgba(0,0,0,.05)}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:1.688rem;height:1.688rem;line-height:1.688rem}.topcoat-icon-button--large--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-icon,.topcoat-icon--large{position:relative;display:inline-block;vertical-align:top;overflow:hidden;width:.81406rem;height:.81406rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:1.06344rem;height:1.06344rem;top:-2px}.input{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0}.input:disabled{opacity:.3;cursor:default;pointer-events:none}.list{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:auto;-webkit-overflow-scrolling:touch}.list__header{margin:0}.list__container{padding:0;margin:0;list-style-type:none}.list__item{margin:0;padding:0}.navigation-bar{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;white-space:nowrap;overflow:hidden;word-spacing:0;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navigation-bar__item{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0}.navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.notification{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.notification,.topcoat-notification{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.topcoat-notification{padding:.15em .5em .2em;border-radius:2px;background-color:#ec514e;color:#fff}input[type=radio]{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.radio-button{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-button__label{position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-button:before,.radio-button:after{content:'';position:absolute;border-radius:100%}.radio-button:after{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.radio-button:before{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.radio-button--disabled{opacity:.3;cursor:default;pointer-events:none}input[type=radio]{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.radio-button,.topcoat-radio-button__checkmark{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-button__label,.topcoat-radio-button{position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-button:before,.radio-button:after,.topcoat-radio-button__checkmark:before,.topcoat-radio-button__checkmark:after{content:'';position:absolute;border-radius:100%}.radio-button:after,.topcoat-radio-button__checkmark:after{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.radio-button:before,.topcoat-radio-button__checkmark:before{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.radio-button--disabled,input[type=radio]:disabled+.topcoat-radio-button__checkmark{opacity:.3;cursor:default;pointer-events:none}input[type=radio]{height:1.063rem;width:1.063rem;margin-top:0;margin-right:-1.063rem;margin-bottom:-1.063rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#c6c8c8;line-height:1.063rem}.topcoat-radio-button__checkmark:before{width:1.063rem;height:1.063rem;background:#595b5b;border:1px solid #333434;box-shadow:inset 0 1px #737373}.topcoat-radio-button__checkmark{position:relative;width:1.063rem;height:1.063rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.313rem;height:.313rem;background:#c6c8c8;border:1px solid rgba(0,0,0,.05);box-shadow:0 1px rgba(255,255,255,.1);-webkit-transform:none;-ms-transform:none;transform:none;top:.313rem;left:.313rem}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #333434;background-color:#3f4041;box-shadow:inset 0 1px rgba(0,0,0,.05)}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #333434;background:#595b5b;box-shadow:inset 0 1px #737373}.range{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0;-webkit-appearance:none}.range__thumb{cursor:pointer}.range__thumb--webkit{cursor:pointer;-webkit-appearance:none}.range:disabled{opacity:.3;cursor:default;pointer-events:none}.range,.topcoat-range{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0;-webkit-appearance:none}.range__thumb,.topcoat-range::-moz-range-thumb{cursor:pointer}.range__thumb--webkit,.topcoat-range::-webkit-slider-thumb{cursor:pointer;-webkit-appearance:none}.range:disabled,.topcoat-range:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-range{border-radius:4px;border:1px solid #333434;background-color:#454646;height:.5rem;border-radius:15px}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #333434;background-color:#454646;height:.5rem;border-radius:15px}.topcoat-range::-webkit-slider-thumb{height:1.313rem;width:.75rem;background-color:#595b5b;border:1px solid #333434;border-radius:4px;box-shadow:inset 0 1px #737373}.topcoat-range::-moz-range-thumb{height:1.313rem;width:.75rem;background-color:#595b5b;border:1px solid #333434;border-radius:4px;box-shadow:inset 0 1px #737373}.topcoat-range:focus::-webkit-slider-thumb{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1}.topcoat-range:focus::-moz-range-thumb{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1}.topcoat-range:active::-webkit-slider-thumb{border:1px solid #333434;box-shadow:inset 0 1px #737373}.topcoat-range:active::-moz-range-thumb{border:1px solid #333434;box-shadow:inset 0 1px #737373}.search-input{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0;-webkit-appearance:none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.search-input:disabled{opacity:.3;cursor:default;pointer-events:none}.search-input,.topcoat-search-input,.topcoat-search-input--large{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0;-webkit-appearance:none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.search-input:disabled,.topcoat-search-input:disabled,.topcoat-search-input--large:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-search-input,.topcoat-search-input--large{line-height:1.313rem;height:1.313rem;font-size:12px;border:1px solid #333434;background-color:#454646;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#c6c8c8;padding:0 0 0 1.3rem;border-radius:15px;background-image:url(../img/search.svg);background-position:1rem center;background-repeat:no-repeat;background-size:12px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#595b5b;color:#fff;border:1px solid #0036ff;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),0 0 0 2px #6fb5f1}.topcoat-search-input::-webkit-search-cancel-button,.topcoat-search-input::-webkit-search-decoration,.topcoat-search-input--large::-webkit-search-cancel-button,.topcoat-search-input--large::-webkit-search-decoration{margin-right:5px}.topcoat-search-input:focus::-webkit-input-placeholder,.topcoat-search-input:focus::-webkit-input-placeholder{color:#c6c8c8}.topcoat-search-input:disabled::-webkit-input-placeholder{color:#fff}.topcoat-search-input:disabled::-moz-placeholder{color:#fff}.topcoat-search-input:disabled:-ms-input-placeholder{color:#fff}.topcoat-search-input--large{line-height:1.688rem;height:1.688rem;font-size:.875rem;font-weight:400;padding:0 0 0 1.8rem;border-radius:25px;background-position:1.2rem center;background-size:.875rem}.topcoat-search-input--large:disabled{color:#fff}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#fff}.topcoat-search-input--large:disabled::-moz-placeholder{color:#fff}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#fff}.switch{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.switch__input{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.switch__toggle{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.switch__toggle:before,.switch__toggle:after{content:'';position:absolute;z-index:-1;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.switch--disabled{opacity:.3;cursor:default;pointer-events:none}.switch,.topcoat-switch{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.switch__input,.topcoat-switch__input{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.switch__toggle,.topcoat-switch__toggle{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.switch__toggle:before,.switch__toggle:after,.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{content:'';position:absolute;z-index:-1;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.switch--disabled,.topcoat-switch__input:disabled+.topcoat-switch__toggle{opacity:.3;cursor:default;pointer-events:none}.topcoat-switch{font-size:12px;padding:0 .563rem;border-radius:4px;border:1px solid #333434;overflow:hidden;width:3.5rem}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:2.6rem}.topcoat-switch__toggle:before{content:'ON';color:#288edf;background-color:#3f4041;right:.8rem;padding-left:.75rem}.topcoat-switch__toggle{line-height:1.313rem;height:1.313rem;width:1rem;border-radius:4px;color:#c6c8c8;text-shadow:0 -1px rgba(0,0,0,.69);background-color:#595b5b;border:1px solid #333434;margin-left:-.6rem;margin-bottom:-1px;margin-top:-1px;box-shadow:inset 0 1px #737373;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'OFF';background-color:#3f4041;left:.8rem;padding-left:.6rem}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:1.85rem}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #333434;box-shadow:inset 0 1px #737373}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:1px solid #0036ff;box-shadow:0 0 0 2px #6fb5f1}.topcoat-switch__input:disabled+.topcoat-switch__toggle:after,.topcoat-switch__input:disabled+.topcoat-switch__toggle:before{background:transparent}.button,.topcoat-tab-bar__button{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.button--disabled,.topcoat-tab-bar__button:disabled{opacity:.3;cursor:default;pointer-events:none}.button-bar,.topcoat-tab-bar{display:table;table-layout:fixed;white-space:nowrap;margin:0;padding:0}.button-bar__item,.topcoat-tab-bar__item{display:table-cell;width:auto;border-radius:0}.button-bar__item>input,.topcoat-tab-bar__item>input{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.button-bar__button{border-radius:inherit}.button-bar__item:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-tab-bar__button{padding:0 .563rem;height:1.313rem;line-height:1.313rem;letter-spacing:0;color:#c6c8c8;text-shadow:0 -1px rgba(0,0,0,.69);vertical-align:top;background-color:#595b5b;box-shadow:inset 0 1px #737373;border-top:1px solid #333434}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#288edf;background-color:#3f4041;box-shadow:inset 0 0 1px rgba(0,0,0,.05)}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1;outline:0}.input,.topcoat-text-input,.topcoat-text-input--large{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0}.input:disabled,.topcoat-text-input:disabled,.topcoat-text-input--large:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-text-input,.topcoat-text-input--large{line-height:1.313rem;font-size:12px;letter-spacing:0;padding:0 .563rem;border:1px solid #333434;border-radius:4px;background-color:#454646;box-shadow:inset 0 1px rgba(0,0,0,.05);color:#c6c8c8;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#595b5b;color:#fff;border:1px solid #0036ff;box-shadow:0 0 0 2px #6fb5f1}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#fff}.topcoat-text-input:disabled::-moz-placeholder{color:#fff}.topcoat-text-input:disabled:-ms-input-placeholder{color:#fff}.topcoat-text-input:invalid{border:1px solid #ec514e}.topcoat-text-input--large{line-height:1.688rem;font-size:.875rem}.topcoat-text-input--large:disabled{color:#fff}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#fff}.topcoat-text-input--large:disabled::-moz-placeholder{color:#fff}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#fff}.topcoat-text-input--large:invalid{border:1px solid #ec514e}.textarea{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;vertical-align:top;resize:none;outline:0}.textarea:disabled{opacity:.3;cursor:default;pointer-events:none}.textarea,.topcoat-textarea,.topcoat-textarea--large{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;vertical-align:top;resize:none;outline:0}.textarea:disabled,.topcoat-textarea:disabled,.topcoat-textarea--large:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-textarea,.topcoat-textarea--large{padding:1rem;font-size:1rem;font-weight:400;border-radius:4px;line-height:1.313rem;border:1px solid #333434;background-color:#454646;box-shadow:inset 0 1px rgba(0,0,0,.05);color:#c6c8c8;letter-spacing:0}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#595b5b;color:#fff;border:1px solid #0036ff;box-shadow:0 0 0 2px #6fb5f1}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#fff}.topcoat-textarea:disabled::-moz-placeholder{color:#fff}.topcoat-textarea:disabled:-ms-input-placeholder{color:#fff}.topcoat-textarea--large{font-size:1.3rem;line-height:1.688rem}.topcoat-textarea--large:disabled{color:#fff}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#fff}.topcoat-textarea--large:disabled::-moz-placeholder{color:#fff}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#fff}@font-face{font-family:"Source Sans";src:url(../font/SourceSansPro-Regular.otf)}@font-face{font-family:"Source Sans";src:url(../font/SourceSansPro-Light.otf);font-weight:200}@font-face{font-family:"Source Sans";src:url(../font/SourceSansPro-Semibold.otf);font-weight:600}body{margin:0;padding:0;background:#4b4d4e;color:#000;font:16px "Source Sans",helvetica,arial,sans-serif;font-weight:400}:focus{outline-color:transparent;outline-style:none}.topcoat-icon--menu-stack{background:url(../img/hamburger_light.svg) no-repeat;background-size:cover}.quarter{width:25%}.half{width:50%}.three-quarters{width:75%}.third{width:33.333%}.two-thirds{width:66.666%}.full{width:100%}.left{text-align:left}.center{text-align:center}.right{text-align:right}.reset-ui{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}


--------------------------------------------------------------------------------
/Topcoat UI Library/CSS/topcoat-desktop-light.min.css:
--------------------------------------------------------------------------------
1 | .button-bar{display:table;table-layout:fixed;white-space:nowrap;margin:0;padding:0}.button-bar__item{display:table-cell;width:auto;border-radius:0}.button-bar__item>input{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.button-bar__button{border-radius:inherit}.button-bar__item:disabled{opacity:.3;cursor:default;pointer-events:none}.button,.topcoat-button,.topcoat-button--quiet,.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button--cta,.topcoat-button--large--cta,.topcoat-button-bar__button,.topcoat-button-bar__button--large{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.button--disabled,.topcoat-button:disabled,.topcoat-button--quiet:disabled,.topcoat-button--large:disabled,.topcoat-button--large--quiet:disabled,.topcoat-button--cta:disabled,.topcoat-button--large--cta:disabled,.topcoat-button-bar__button:disabled,.topcoat-button-bar__button--large:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-button,.topcoat-button--quiet,.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button--cta,.topcoat-button--large--cta,.topcoat-button-bar__button,.topcoat-button-bar__button--large{padding:0 .563rem;font-size:12px;line-height:1.313rem;letter-spacing:0;color:#454545;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;box-shadow:inset 0 1px #fff;border:1px solid #9daca9;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover,.topcoat-button-bar__button:hover,.topcoat-button-bar__button--large:hover{background-color:#eff1f1}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--quiet:hover:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--large--quiet:hover:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus,.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1;outline:0}.topcoat-button:active,.topcoat-button--large:active,.topcoat-button-bar__button:active,.topcoat-button-bar__button--large:active,:checked+.topcoat-button-bar__button{border:1px solid #9daca9;background-color:#d2d6d6;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px #fff;border:1px solid #9daca9;box-shadow:inset 0 1px #fff}.topcoat-button--quiet:active,.topcoat-button--quiet:focus:active,.topcoat-button--large--quiet:active,.topcoat-button--large--quiet:focus:active{color:#454545;text-shadow:0 1px #fff;background-color:#d2d6d6;border:1px solid #9daca9;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button-bar__button--large{font-size:.875rem;font-weight:600;line-height:1.688rem;padding:0 .875rem}.topcoat-button--large--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(0,0,0,.36)}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#4ca1e4}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#1e7dc8;box-shadow:inset 0 1px rgba(0,0,0,.12)}.topcoat-button--large--cta{font-size:.875rem;font-weight:600;line-height:1.688rem;padding:0 .875rem}.button-bar,.topcoat-button-bar{display:table;table-layout:fixed;white-space:nowrap;margin:0;padding:0}.button-bar__item,.topcoat-button-bar__item{display:table-cell;width:auto;border-radius:0}.button-bar__item>input,.topcoat-button-bar__item>input{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.button-bar__button{border-radius:inherit}.button-bar__item:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-button-bar>.topcoat-button-bar__item:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px}.topcoat-button-bar>.topcoat-button-bar__item:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.topcoat-button-bar__item:first-child>.topcoat-button-bar__button,.topcoat-button-bar__item:first-child>.topcoat-button-bar__button--large{border-right:0}.topcoat-button-bar__item:last-child>.topcoat-button-bar__button,.topcoat-button-bar__item:last-child>.topcoat-button-bar__button--large{border-left:0}.topcoat-button-bar__button{border-radius:inherit}.topcoat-button-bar__button:focus,.topcoat-button-bar__button--large:focus{z-index:1}.topcoat-button-bar__button--large{border-radius:inherit}.button{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.button--disabled{opacity:.3;cursor:default;pointer-events:none}.button,.topcoat-button,.topcoat-button--quiet,.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button--cta,.topcoat-button--large--cta{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.button--disabled,.topcoat-button:disabled,.topcoat-button--quiet:disabled,.topcoat-button--large:disabled,.topcoat-button--large--quiet:disabled,.topcoat-button--cta:disabled,.topcoat-button--large--cta:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-button,.topcoat-button--quiet,.topcoat-button--large,.topcoat-button--large--quiet,.topcoat-button--cta,.topcoat-button--large--cta{padding:0 .563rem;font-size:12px;line-height:1.313rem;letter-spacing:0;color:#454545;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;box-shadow:inset 0 1px #fff;border:1px solid #9daca9;border-radius:4px}.topcoat-button:hover,.topcoat-button--quiet:hover,.topcoat-button--large:hover,.topcoat-button--large--quiet:hover{background-color:#eff1f1}.topcoat-button:focus,.topcoat-button--quiet:focus,.topcoat-button--quiet:hover:focus,.topcoat-button--large:focus,.topcoat-button--large--quiet:focus,.topcoat-button--large--quiet:hover:focus,.topcoat-button--cta:focus,.topcoat-button--large--cta:focus{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1;outline:0}.topcoat-button:active,.topcoat-button--large:active{border:1px solid #9daca9;background-color:#d2d6d6;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--quiet:hover,.topcoat-button--large--quiet:hover{text-shadow:0 1px #fff;border:1px solid #9daca9;box-shadow:inset 0 1px #fff}.topcoat-button--quiet:active,.topcoat-button--quiet:focus:active,.topcoat-button--large--quiet:active,.topcoat-button--large--quiet:focus:active{color:#454545;text-shadow:0 1px #fff;background-color:#d2d6d6;border:1px solid #9daca9;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-button--large,.topcoat-button--large--quiet{font-size:.875rem;font-weight:600;line-height:1.688rem;padding:0 .875rem}.topcoat-button--large--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-button--cta,.topcoat-button--large--cta{border:1px solid #134f7f;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(0,0,0,.36)}.topcoat-button--cta:hover,.topcoat-button--large--cta:hover{background-color:#4ca1e4}.topcoat-button--cta:active,.topcoat-button--large--cta:active{background-color:#1e7dc8;box-shadow:inset 0 1px rgba(0,0,0,.12)}.topcoat-button--large--cta{font-size:.875rem;font-weight:600;line-height:1.688rem;padding:0 .875rem}input[type=checkbox]{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.checkbox{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox__label{position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox--disabled{opacity:.3;cursor:default;pointer-events:none}.checkbox:before,.checkbox:after{content:'';position:absolute}.checkbox:before{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}input[type=checkbox]{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.checkbox,.topcoat-checkbox__checkmark{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox__label,.topcoat-checkbox{position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox--disabled,input[type=checkbox]:disabled+.topcoat-checkbox__checkmark{opacity:.3;cursor:default;pointer-events:none}.checkbox:before,.checkbox:after,.topcoat-checkbox__checkmark:before,.topcoat-checkbox__checkmark:after{content:'';position:absolute}.checkbox:before,.topcoat-checkbox__checkmark:before{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.topcoat-checkbox__checkmark{height:1rem}input[type=checkbox]{height:1rem;width:1rem;margin-top:0;margin-right:-1rem;margin-bottom:-1rem;margin-left:0}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:1rem}.topcoat-checkbox__checkmark:before{width:1rem;height:1rem;background:#e5e9e8;border:1px solid #9daca9;border-radius:3px;box-shadow:inset 0 1px #fff}.topcoat-checkbox__checkmark{width:1rem;height:1rem}.topcoat-checkbox__checkmark:after{top:2px;left:1px;opacity:0;width:14px;height:4px;background:transparent;border:7px solid #454545;border-width:3px;border-top:0;border-right:0;border-radius:1px;-webkit-transform:rotate(-50deg);-ms-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid #9daca9;background-color:#d2d6d6;box-shadow:inset 0 1px rgba(0,0,0,.1)}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid #9daca9;background:#e5e9e8;box-shadow:inset 0 1px #fff}.button,.topcoat-icon-button,.topcoat-icon-button--quiet,.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.button--disabled,.topcoat-icon-button:disabled,.topcoat-icon-button--quiet:disabled,.topcoat-icon-button--large:disabled,.topcoat-icon-button--large--quiet:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-icon-button,.topcoat-icon-button--quiet,.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{padding:0 .25rem;line-height:1.313rem;letter-spacing:0;color:#454545;text-shadow:0 1px #fff;vertical-align:baseline;background-color:#e5e9e8;box-shadow:inset 0 1px #fff;border:1px solid #9daca9;border-radius:4px}.topcoat-icon-button:hover,.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large:hover,.topcoat-icon-button--large--quiet:hover{background-color:#eff1f1}.topcoat-icon-button:focus,.topcoat-icon-button--quiet:focus,.topcoat-icon-button--quiet:hover:focus,.topcoat-icon-button--large:focus,.topcoat-icon-button--large--quiet:focus,.topcoat-icon-button--large--quiet:hover:focus{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1;outline:0}.topcoat-icon-button:active,.topcoat-icon-button--large:active{border:1px solid #9daca9;background-color:#d2d6d6;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-icon-button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-icon-button--quiet:hover,.topcoat-icon-button--large--quiet:hover{text-shadow:0 1px #fff;border:1px solid #9daca9;box-shadow:inset 0 1px #fff}.topcoat-icon-button--quiet:active,.topcoat-icon-button--quiet:focus:active,.topcoat-icon-button--large--quiet:active,.topcoat-icon-button--large--quiet:focus:active{color:#454545;text-shadow:0 1px #fff;background-color:#d2d6d6;border:1px solid #9daca9;box-shadow:inset 0 1px rgba(0,0,0,.1)}.topcoat-icon-button--large,.topcoat-icon-button--large--quiet{width:1.688rem;height:1.688rem;line-height:1.688rem}.topcoat-icon-button--large--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.topcoat-icon,.topcoat-icon--large{position:relative;display:inline-block;vertical-align:top;overflow:hidden;width:.81406rem;height:.81406rem;vertical-align:middle;top:-1px}.topcoat-icon--large{width:1.06344rem;height:1.06344rem;top:-2px}.input{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0}.input:disabled{opacity:.3;cursor:default;pointer-events:none}.list{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:auto;-webkit-overflow-scrolling:touch}.list__header{margin:0}.list__container{padding:0;margin:0;list-style-type:none}.list__item{margin:0;padding:0}.navigation-bar{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;white-space:nowrap;overflow:hidden;word-spacing:0;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navigation-bar__item{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0}.navigation-bar__title{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.notification{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.notification,.topcoat-notification{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.topcoat-notification{padding:.15em .5em .2em;border-radius:2px;background-color:#ec514e;color:#fff}input[type=radio]{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.radio-button{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-button__label{position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-button:before,.radio-button:after{content:'';position:absolute;border-radius:100%}.radio-button:after{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.radio-button:before{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.radio-button--disabled{opacity:.3;cursor:default;pointer-events:none}input[type=radio]{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.radio-button,.topcoat-radio-button__checkmark{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-button__label,.topcoat-radio-button{position:relative;display:inline-block;vertical-align:top;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-button:before,.radio-button:after,.topcoat-radio-button__checkmark:before,.topcoat-radio-button__checkmark:after{content:'';position:absolute;border-radius:100%}.radio-button:after,.topcoat-radio-button__checkmark:after{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.radio-button:before,.topcoat-radio-button__checkmark:before{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.radio-button--disabled,input[type=radio]:disabled+.topcoat-radio-button__checkmark{opacity:.3;cursor:default;pointer-events:none}input[type=radio]{height:1.063rem;width:1.063rem;margin-top:0;margin-right:-1.063rem;margin-bottom:-1.063rem;margin-left:0}input[type=radio]:checked+.topcoat-radio-button__checkmark:after{opacity:1}.topcoat-radio-button{color:#454545;line-height:1.063rem}.topcoat-radio-button__checkmark:before{width:1.063rem;height:1.063rem;background:#e5e9e8;border:1px solid #9daca9;box-shadow:inset 0 1px #fff}.topcoat-radio-button__checkmark{position:relative;width:1.063rem;height:1.063rem}.topcoat-radio-button__checkmark:after{opacity:0;width:.313rem;height:.313rem;background:#454545;border:1px solid rgba(0,0,0,.1);box-shadow:0 1px rgba(255,255,255,.5);-webkit-transform:none;-ms-transform:none;transform:none;top:.313rem;left:.313rem}input[type=radio]:focus+.topcoat-radio-button__checkmark:before{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1}input[type=radio]:active+.topcoat-radio-button__checkmark:before{border:1px solid #9daca9;background-color:#d2d6d6;box-shadow:inset 0 1px rgba(0,0,0,.1)}input[type=radio]:disabled:active+.topcoat-radio-button__checkmark:before{border:1px solid #9daca9;background:#e5e9e8;box-shadow:inset 0 1px #fff}.range{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0;-webkit-appearance:none}.range__thumb{cursor:pointer}.range__thumb--webkit{cursor:pointer;-webkit-appearance:none}.range:disabled{opacity:.3;cursor:default;pointer-events:none}.range,.topcoat-range{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0;-webkit-appearance:none}.range__thumb,.topcoat-range::-moz-range-thumb{cursor:pointer}.range__thumb--webkit,.topcoat-range::-webkit-slider-thumb{cursor:pointer;-webkit-appearance:none}.range:disabled,.topcoat-range:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-range{border-radius:4px;border:1px solid #9daca9;background-color:#d6dcdb;height:.5rem;border-radius:15px}.topcoat-range::-moz-range-track{border-radius:4px;border:1px solid #9daca9;background-color:#d6dcdb;height:.5rem;border-radius:15px}.topcoat-range::-webkit-slider-thumb{height:1.313rem;width:.75rem;background-color:#e5e9e8;border:1px solid #9daca9;border-radius:4px;box-shadow:inset 0 1px #fff}.topcoat-range::-moz-range-thumb{height:1.313rem;width:.75rem;background-color:#e5e9e8;border:1px solid #9daca9;border-radius:4px;box-shadow:inset 0 1px #fff}.topcoat-range:focus::-webkit-slider-thumb{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1}.topcoat-range:focus::-moz-range-thumb{border:1px solid #0036ff;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1}.topcoat-range:active::-webkit-slider-thumb{border:1px solid #9daca9;box-shadow:inset 0 1px #fff}.topcoat-range:active::-moz-range-thumb{border:1px solid #9daca9;box-shadow:inset 0 1px #fff}.search-input{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0;-webkit-appearance:none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.search-input:disabled{opacity:.3;cursor:default;pointer-events:none}.search-input,.topcoat-search-input,.topcoat-search-input--large{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0;-webkit-appearance:none}input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}.search-input:disabled,.topcoat-search-input:disabled,.topcoat-search-input--large:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-search-input,.topcoat-search-input--large{line-height:1.313rem;height:1.313rem;font-size:12px;border:1px solid #9daca9;background-color:#fff;box-shadow:inset 0 1px 0 rgba(0,0,0,.23);color:#454545;padding:0 0 0 1.3rem;border-radius:15px;background-image:url(../img/search.svg);background-position:1rem center;background-repeat:no-repeat;background-size:12px}.topcoat-search-input:focus,.topcoat-search-input--large:focus{background-color:#fff;color:#454545;border:1px solid #0036ff;box-shadow:inset 0 1px 0 rgba(0,0,0,.23),0 0 0 2px #6fb5f1}.topcoat-search-input::-webkit-search-cancel-button,.topcoat-search-input::-webkit-search-decoration,.topcoat-search-input--large::-webkit-search-cancel-button,.topcoat-search-input--large::-webkit-search-decoration{margin-right:5px}.topcoat-search-input:focus::-webkit-input-placeholder,.topcoat-search-input:focus::-webkit-input-placeholder{color:#c6c8c8}.topcoat-search-input:disabled::-webkit-input-placeholder{color:#454545}.topcoat-search-input:disabled::-moz-placeholder{color:#454545}.topcoat-search-input:disabled:-ms-input-placeholder{color:#454545}.topcoat-search-input--large{line-height:1.688rem;height:1.688rem;font-size:.875rem;font-weight:400;padding:0 0 0 1.8rem;border-radius:25px;background-position:1.2rem center;background-size:.875rem}.topcoat-search-input--large:disabled{color:#454545}.topcoat-search-input--large:disabled::-webkit-input-placeholder{color:#454545}.topcoat-search-input--large:disabled::-moz-placeholder{color:#454545}.topcoat-search-input--large:disabled:-ms-input-placeholder{color:#454545}.switch{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.switch__input{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.switch__toggle{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.switch__toggle:before,.switch__toggle:after{content:'';position:absolute;z-index:-1;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.switch--disabled{opacity:.3;cursor:default;pointer-events:none}.switch,.topcoat-switch{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.switch__input,.topcoat-switch__input{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.switch__toggle,.topcoat-switch__toggle{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.switch__toggle:before,.switch__toggle:after,.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{content:'';position:absolute;z-index:-1;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.switch--disabled,.topcoat-switch__input:disabled+.topcoat-switch__toggle{opacity:.3;cursor:default;pointer-events:none}.topcoat-switch{font-size:12px;padding:0 .563rem;border-radius:4px;border:1px solid #9daca9;overflow:hidden;width:3.5rem}.topcoat-switch__toggle:before,.topcoat-switch__toggle:after{top:-1px;width:2.6rem}.topcoat-switch__toggle:before{content:'ON';color:#288edf;background-color:#e5f1fb;right:.8rem;padding-left:.75rem}.topcoat-switch__toggle{line-height:1.313rem;height:1.313rem;width:1rem;border-radius:4px;color:#454545;text-shadow:0 1px #fff;background-color:#e5e9e8;border:1px solid #9daca9;margin-left:-.6rem;margin-bottom:-1px;margin-top:-1px;box-shadow:inset 0 1px #fff;-webkit-transition:margin-left .05s ease-in-out;transition:margin-left .05s ease-in-out}.topcoat-switch__toggle:after{content:'OFF';background-color:#d2d6d6;left:.8rem;padding-left:.6rem}.topcoat-switch__input:checked+.topcoat-switch__toggle{margin-left:1.85rem}.topcoat-switch__input:active+.topcoat-switch__toggle{border:1px solid #9daca9;box-shadow:inset 0 1px #fff}.topcoat-switch__input:focus+.topcoat-switch__toggle{border:1px solid #0036ff;box-shadow:0 0 0 2px #6fb5f1}.topcoat-switch__input:disabled+.topcoat-switch__toggle:after,.topcoat-switch__input:disabled+.topcoat-switch__toggle:before{background:transparent}.button,.topcoat-tab-bar__button{position:relative;display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-decoration:none}.button--quiet{background:transparent;border:1px solid transparent;box-shadow:none}.button--disabled,.topcoat-tab-bar__button:disabled{opacity:.3;cursor:default;pointer-events:none}.button-bar,.topcoat-tab-bar{display:table;table-layout:fixed;white-space:nowrap;margin:0;padding:0}.button-bar__item,.topcoat-tab-bar__item{display:table-cell;width:auto;border-radius:0}.button-bar__item>input,.topcoat-tab-bar__item>input{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.button-bar__button{border-radius:inherit}.button-bar__item:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-tab-bar__button{padding:0 .563rem;height:1.313rem;line-height:1.313rem;letter-spacing:0;color:#454545;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;box-shadow:inset 0 1px #fff;border-top:1px solid #9daca9}.topcoat-tab-bar__button:active,.topcoat-tab-bar__button--large:active,:checked+.topcoat-tab-bar__button{color:#288edf;background-color:#e5f1fb;box-shadow:inset 0 0 1px rgba(0,0,0,.1)}.topcoat-tab-bar__button:focus,.topcoat-tab-bar__button--large:focus{z-index:1;box-shadow:inset 0 1px rgba(255,255,255,.36),0 0 0 2px #6fb5f1;outline:0}.input,.topcoat-text-input,.topcoat-text-input--large{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;vertical-align:top;outline:0}.input:disabled,.topcoat-text-input:disabled,.topcoat-text-input--large:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-text-input,.topcoat-text-input--large{line-height:1.313rem;font-size:12px;letter-spacing:0;padding:0 .563rem;border:1px solid #9daca9;border-radius:4px;background-color:#fff;box-shadow:inset 0 1px rgba(0,0,0,.1);color:#454545;vertical-align:top}.topcoat-text-input:focus,.topcoat-text-input--large:focus{background-color:#fff;color:#454545;border:1px solid #0036ff;box-shadow:0 0 0 2px #6fb5f1}.topcoat-text-input:disabled::-webkit-input-placeholder{color:#454545}.topcoat-text-input:disabled::-moz-placeholder{color:#454545}.topcoat-text-input:disabled:-ms-input-placeholder{color:#454545}.topcoat-text-input:invalid{border:1px solid #ec514e}.topcoat-text-input--large{line-height:1.688rem;font-size:.875rem}.topcoat-text-input--large:disabled{color:#454545}.topcoat-text-input--large:disabled::-webkit-input-placeholder{color:#454545}.topcoat-text-input--large:disabled::-moz-placeholder{color:#454545}.topcoat-text-input--large:disabled:-ms-input-placeholder{color:#454545}.topcoat-text-input--large:invalid{border:1px solid #ec514e}.textarea{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;vertical-align:top;resize:none;outline:0}.textarea:disabled{opacity:.3;cursor:default;pointer-events:none}.textarea,.topcoat-textarea,.topcoat-textarea--large{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;vertical-align:top;resize:none;outline:0}.textarea:disabled,.topcoat-textarea:disabled,.topcoat-textarea--large:disabled{opacity:.3;cursor:default;pointer-events:none}.topcoat-textarea,.topcoat-textarea--large{padding:1rem;font-size:1rem;font-weight:400;border-radius:4px;line-height:1.313rem;border:1px solid #9daca9;background-color:#fff;box-shadow:inset 0 1px rgba(0,0,0,.1);color:#454545;letter-spacing:0}.topcoat-textarea:focus,.topcoat-textarea--large:focus{background-color:#fff;color:#454545;border:1px solid #0036ff;box-shadow:0 0 0 2px #6fb5f1}.topcoat-textarea:disabled::-webkit-input-placeholder{color:#454545}.topcoat-textarea:disabled::-moz-placeholder{color:#454545}.topcoat-textarea:disabled:-ms-input-placeholder{color:#454545}.topcoat-textarea--large{font-size:1.3rem;line-height:1.688rem}.topcoat-textarea--large:disabled{color:#454545}.topcoat-textarea--large:disabled::-webkit-input-placeholder{color:#454545}.topcoat-textarea--large:disabled::-moz-placeholder{color:#454545}.topcoat-textarea--large:disabled:-ms-input-placeholder{color:#454545}@font-face{font-family:"Source Sans";src:url(../font/SourceSansPro-Regular.otf)}@font-face{font-family:"Source Sans";src:url(../font/SourceSansPro-Light.otf);font-weight:200}@font-face{font-family:"Source Sans";src:url(../font/SourceSansPro-Semibold.otf);font-weight:600}body{margin:0;padding:0;background:#dfe2e2;color:#000;font:16px "Source Sans",helvetica,arial,sans-serif;font-weight:400}:focus{outline-color:transparent;outline-style:none}.topcoat-icon--menu-stack{background:url(../img/hamburger_dark.svg) no-repeat;background-size:cover}.quarter{width:25%}.half{width:50%}.three-quarters{width:75%}.third{width:33.333%}.two-thirds{width:66.666%}.full{width:100%}.left{text-align:left}.center{text-align:center}.right{text-align:right}.reset-ui{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box;position:relative;display:inline-block;vertical-align:top;padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}


--------------------------------------------------------------------------------
/Topcoat UI Library/JS/themeManager.js:
--------------------------------------------------------------------------------
  1 | /*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
  2 | /*global window, document, CSInterface*/
  3 | 
  4 | 
  5 | /*
  6 | 
  7 |     Responsible for overwriting CSS at runtime according to CC app
  8 |     settings as defined by the end user.
  9 | 
 10 | */
 11 | 
 12 | var themeManager = (function () {
 13 |     'use strict';
 14 |      
 15 |     /**
 16 |      * Convert the Color object to string in hexadecimal format;
 17 |      */
 18 |     function toHex(color, delta) {
 19 |         
 20 |         function computeValue(value, delta) {
 21 |             var computedValue = !isNaN(delta) ? value + delta : value;
 22 |             if (computedValue < 0) {
 23 |                 computedValue = 0;
 24 |             } else if (computedValue > 255) {
 25 |                 computedValue = 255;
 26 |             }
 27 |             
 28 |             computedValue = Math.floor(computedValue);
 29 |     
 30 |             computedValue = computedValue.toString(16);
 31 |             return computedValue.length === 1 ? "0" + computedValue : computedValue;
 32 |         }
 33 |     
 34 |         var hex = "";
 35 |         if (color) {
 36 |             hex = computeValue(color.red, delta) + computeValue(color.green, delta) + computeValue(color.blue, delta);
 37 |         }
 38 |         return hex;
 39 |     }
 40 | 
 41 | 
 42 |     function reverseColor(color, delta) {
 43 |         return toHex({
 44 |             red: Math.abs(255 - color.red),
 45 |             green: Math.abs(255 - color.green),
 46 |             blue: Math.abs(255 - color.blue)
 47 |         },
 48 |             delta);
 49 |     }
 50 |             
 51 | 
 52 |     function addRule(stylesheetId, selector, rule) {
 53 |         var stylesheet = document.getElementById(stylesheetId);
 54 |         
 55 |         if (stylesheet) {
 56 |             stylesheet = stylesheet.sheet;
 57 |             if (stylesheet.addRule) {
 58 |                 stylesheet.addRule(selector, rule);
 59 |             } else if (stylesheet.insertRule) {
 60 |                 stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
 61 |             }
 62 |         }
 63 |     }
 64 |         
 65 |         
 66 |                 
 67 |     /**
 68 |      * Update the theme with the AppSkinInfo retrieved from the host product.
 69 |      */
 70 |     function updateThemeWithAppSkinInfo(appSkinInfo) {
 71 |         
 72 |         var panelBgColor = appSkinInfo.panelBackgroundColor.color;
 73 |         var bgdColor = toHex(panelBgColor);
 74 |        
 75 |         var darkBgdColor =  toHex(panelBgColor, 20);
 76 |         
 77 |         var fontColor = "F0F0F0";
 78 |         if (panelBgColor.red > 122) {
 79 |             fontColor = "000000";
 80 |         }
 81 |         var lightBgdColor = toHex(panelBgColor, -100);
 82 |                 
 83 |         var styleId = "hostStyle";
 84 |         
 85 |         addRule(styleId, ".hostElt", "background-color:" + "#" + bgdColor);
 86 |         addRule(styleId, ".hostElt", "font-size:" + appSkinInfo.baseFontSize + "px;");
 87 |         addRule(styleId, ".hostElt", "font-family:" + appSkinInfo.baseFontFamily);
 88 |         addRule(styleId, ".hostElt", "color:" + "#" + fontColor);
 89 | 
 90 |         addRule(styleId, ".hostBgd", "background-color:" + "#" + bgdColor);
 91 |         addRule(styleId, ".hostBgdDark", "background-color: " + "#" + darkBgdColor);
 92 |         addRule(styleId, ".hostBgdLight", "background-color: " + "#" + lightBgdColor);
 93 |         addRule(styleId, ".hostFontSize", "font-size:" + appSkinInfo.baseFontSize + "px;");
 94 |         addRule(styleId, ".hostFontFamily", "font-family:" + appSkinInfo.baseFontFamily);
 95 |         addRule(styleId, ".hostFontColor", "color:" + "#" + fontColor);
 96 |         
 97 |         addRule(styleId, ".hostFont", "font-size:" + appSkinInfo.baseFontSize + "px;");
 98 |         addRule(styleId, ".hostFont", "font-family:" + appSkinInfo.baseFontFamily);
 99 |         addRule(styleId, ".hostFont", "color:" + "#" + fontColor);
100 |         
101 |         addRule(styleId, ".hostButton", "background-color:" + "#" + darkBgdColor);
102 |         addRule(styleId, ".hostButton:hover", "background-color:" + "#" + bgdColor);
103 |         addRule(styleId, ".hostButton:active", "background-color:" + "#" + darkBgdColor);
104 |         addRule(styleId, ".hostButton", "border-color: " + "#" + lightBgdColor);        
105 | 
106 |     }
107 |     
108 |     
109 |     function onAppThemeColorChanged(event) {
110 |         var skinInfo = JSON.parse(window.__adobe_cep__.getHostEnvironment()).appSkinInfo;
111 |         updateThemeWithAppSkinInfo(skinInfo);
112 |     }
113 | 
114 | 
115 |     function init() {
116 |         
117 |         var csInterface = new CSInterface();
118 |     
119 |         updateThemeWithAppSkinInfo(csInterface.hostEnvironment.appSkinInfo);
120 |         
121 |         csInterface.addEventListener(CSInterface.THEME_COLOR_CHANGED_EVENT, onAppThemeColorChanged);
122 |     }
123 |     
124 |     return {
125 |         init: init
126 |     };
127 |     
128 | }());
129 | 


--------------------------------------------------------------------------------