widenarrow-ui 0.1.2

package/src/styles/colors.scss

@@ -0,0 +1,160 @@
+/**
+|--------------------------------------------------
+| Rainbow colors
+|--------------------------------------------------
+*/
+$yellow: #ffc107;
+$orange: #ff8f00;
+$green: #058736;
+$red: #d0341b;
+$lightest-blue: #f7fcff;
+$light-blue: #129dfa;
+$blue: #0069c1;
+$darker-blue: #151630;
+$darkest-blue: #000023;
+
+/**
+|--------------------------------------------------
+| Grey scale
+|--------------------------------------------------
+*/
+$black: #000;
+$grey-1: #f1f1f1; // Background of application and modals
+$grey-2: #dbdbdb; // Lines
+$grey-3: #a2a4a6; // Text on dark background
+$grey-4: #6a6a6a; // Meta text
+$grey-5: #464646; // Headline, body text
+$grey-6: #2b2f3e; // Menu, lines
+$grey-7: #19191a; // Darkest
+$grey-8: #f3f3f3;
+$white: #fff;
+
+/**
+|--------------------------------------------------
+| Text colors
+|--------------------------------------------------
+*/
+$dark-text: #010101;
+$text-grey: $grey-5;
+$meta-text-grey: $grey-4;
+$text-on-dark-background-grey: $grey-3;
+$text-disabled: #757575;
+$text-color-highlight: rgba(56, 173, 84, 0.25);
+$text-color-keyword: yellow;
+/**
+|--------------------------------------------------
+| Icon colors
+|--------------------------------------------------
+*/
+$icon-grey: $grey-4;
+$icon-light-grey: $grey-3;
+$info-icon-grey: #a2a4a6;
+
+/**
+|--------------------------------------------------
+| Interaction colors
+|--------------------------------------------------
+*/
+$grey-disabled: $grey-2;
+$grey-hover: $grey-1;
+$grey-active: $grey-2;
+
+$blue-disabled: #99bfde;
+$blue-hover: #1775c5;
+$blue-active: #0069c1;
+
+/**
+|--------------------------------------------------
+| Component colors
+|--------------------------------------------------
+*/
+$application-background: $grey-1;
+$dark-application-background: #eaeaea;
+$info-box-background: #eaeaea;
+$timeline-month-border: #d7d7d7;
+$timeline-ad-hoc-reports-container-bg: rgba(230, 230, 230, 0.5);
+$timeline-month-span-wrapper-bg: rgba(199, 197, 197, 0.2);
+$timeline-series-month-span-wrapper-bg: rgba(56, 113, 155, 0.2);
+$border-grey: $grey-3;
+$border-light-grey: $grey-2;
+$border-lightest-grey: $grey-1;
+$button-grey: $grey-3;
+$image-stack-first-bg: #d3d3d3;
+$image-stack-second-bg: #e3e3e3;
+$image-stack-border: #c6c6c6;
+$factiva-blue: #28ade6;
+$importIo-purple: #3138b0;
+$powerAutomate-blue: #0066ff;
+$visualPing-blue: #1882ff;
+$wideNarrowBlue: #0078c7;
+$label-background: $grey-1;
+$menu-background: $darker-blue;
+$menu-blue: $grey-6;
+$menu-dark-blue: $darker-blue;
+$menu-grey: $grey-5;
+$modal-background: $grey-1;
+$pocket-red: #ea3d55;
+$facet-red: #cb2020;
+$portal-color: #66c294;
+$postquery-yellow: #ffeba6;
+$report-tab-selected-background: $grey-1;
+$report-tab-background: #e6e6e6;
+$report-border-grey: #969696;
+$report-square-background: $grey-1;
+$rss-yellow: #f1b355;
+$skeleton-grey: $grey-2;
+$skeleton-nested-grey: #c1c1c1;
+$skeleton-nested-light-grey: #e6e6e6;
+$skeleton-light-grey: $grey-1;
+$pdf-text-color-2: $grey-4; //  This color is #373737 in print. Check the interface.css file
+$report-pdf-border-color: $grey-2;
+
+/**
+|--------------------------------------------------
+| Drag n drop colors
+|--------------------------------------------------
+*/
+$drag-n-drop-droppable-area: #d1e4f4;
+$drag-n-drop-hover: #a8ccea;
+$drag-n-drop-placeholder: #a8ccea;
+$drag-n-drop-on-dark-droppable-area: #5f616c;
+$drag-n-drop-on-dark-hover: #7cadd4;
+
+/**
+|--------------------------------------------------
+| Transparent colors
+|--------------------------------------------------
+*/
+$transparent-white-1: rgba(255, 255, 255, 0.85);
+$transparent-white-2: rgba(255, 255, 255, 0.75);
+$transparent-white-3: rgba(255, 255, 255, 0.5);
+$transparent-grey-1: rgba(55, 55, 55, 0.1);
+$transparent-grey-2: rgba(55, 55, 55, 0.15);
+$transparent-grey-3: rgba(55, 55, 55, 0.4);
+$transparent-grey-4: rgba(55, 55, 55, 0.7);
+$transparent-grey-5: rgba(20, 20, 20, 0.6);
+$transparent-grey-6: rgba(0, 0, 0, 0.65);
+$transparent-green: rgba(56, 173, 84, 0.7);
+$transparent-blue-1: rgba(0, 105, 193, 0.24);
+$transparent-blue-2: rgba(0, 105, 193, 0.3);
+$modal-overlay: rgba(20, 20, 20, 0.5);
+$disabled-opacity: 0.6;
+
+/**
+|--------------------------------------------------
+| Shadows
+|--------------------------------------------------
+*/
+$box-shadow-card: 0 1px 3px 1px rgba(0, 0, 0, 0.12);
+$box-shadow-tooltip: 0px 1px 5px 0px rgba(35, 35, 35, 0.3);
+$box-shadow-dropdown: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
+$box-shadow-button: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
+$box-shadow-rounded-button: 0 1px 2px rgba(0, 0, 0, 0.25);
+$box-shadow-notification: 0px 0px 10px 2px rgba(40, 40, 40, 0.25);
+$box-shadow-user-icon: 0px 0px 2px 1px rgba(0, 0, 0, 0.25);
+$inset-shadow-1: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+$inset-shadow-2: inset 0px 3px 15px 1px rgba(0, 0, 0, 0.25);
+$sticky-header-shadow: 0 5px 4px -4px rgba(112, 112, 112, 0.5);
+$sticky-footer-shadow: 0 4px 4px 4px rgba(219, 219, 219, 1);
+$statistics-header-shadow: 0 -8px 6px 10px rgba(112, 112, 112, 0.5);
+$card-hover-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);

package/src/styles/icons/Read Me.txt

@@ -0,0 +1,7 @@
+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts
+
+You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection.

package/src/styles/icons/demo-files/demo.css

@@ -0,0 +1,152 @@
+body {
+  padding: 0;
+  margin: 0;
+  font-family: sans-serif;
+  font-size: 1em;
+  line-height: 1.5;
+  color: #555;
+  background: #fff;
+}
+h1 {
+  font-size: 1.5em;
+  font-weight: normal;
+}
+small {
+  font-size: .66666667em;
+}
+a {
+  color: #e74c3c;
+  text-decoration: none;
+}
+a:hover, a:focus {
+  box-shadow: 0 1px #e74c3c;
+}
+.bshadow0, input {
+  box-shadow: inset 0 -2px #e7e7e7;
+}
+input:hover {
+  box-shadow: inset 0 -2px #ccc;
+}
+input, fieldset {
+  font-family: sans-serif;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+input {
+  color: inherit;
+  line-height: 1.5;
+  height: 1.5em;
+  padding: .25em 0;
+}
+input:focus {
+  outline: none;
+  box-shadow: inset 0 -2px #449fdb;
+}
+.glyph {
+  font-size: 16px;
+  width: 15em;
+  padding-bottom: 1em;
+  margin-right: 4em;
+  margin-bottom: 1em;
+  float: left;
+  overflow: hidden;
+}
+.liga {
+  width: 80%;
+  width: calc(100% - 2.5em);
+}
+.talign-right {
+  text-align: right;
+}
+.talign-center {
+  text-align: center;
+}
+.bgc1 {
+  background: #f1f1f1;
+}
+.fgc1 {
+  color: #999;
+}
+.fgc0 {
+  color: #000;
+}
+p {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+.mvm {
+  margin-top: .75em;
+  margin-bottom: .75em;
+}
+.mtn {
+  margin-top: 0;
+}
+.mtl, .mal {
+  margin-top: 1.5em;
+}
+.mbl, .mal {
+  margin-bottom: 1.5em;
+}
+.mal, .mhl {
+  margin-left: 1.5em;
+  margin-right: 1.5em;
+}
+.mhmm {
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.mls {
+  margin-left: .25em;
+}
+.ptl {
+  padding-top: 1.5em;
+}
+.pbs, .pvs {
+  padding-bottom: .25em;
+}
+.pvs, .pts {
+  padding-top: .25em;
+}
+.unit {
+  float: left;
+}
+.unitRight {
+  float: right;
+}
+.size1of2 {
+  width: 50%;
+}
+.size1of1 {
+  width: 100%;
+}
+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.hidden-true {
+  display: none;
+}
+.textbox0 {
+  width: 3em;
+  background: #f1f1f1;
+  padding: .25em .5em;
+  line-height: 1.5;
+  height: 1.5em;
+}
+#testDrive {
+  display: block;
+  padding-top: 24px;
+  line-height: 1.5;
+}
+.fs0 {
+  font-size: 16px;
+}
+.fs1 {
+  font-size: 32px;
+}
+

package/src/styles/icons/demo-files/demo.js

@@ -0,0 +1,29 @@
+if (!('boxShadow' in document.body.style)) {
+	document.body.setAttribute('class', 'noBoxShadow');
+}
+
+document.body.addEventListener('click', (e) => {
+	const { target } = e;
+	if (target.tagName === 'INPUT' && target.getAttribute('class').indexOf('liga') === -1) {
+		target.select();
+	}
+});
+
+(function() {
+	const fontSize = document.getElementById('fontSize');
+	const testDrive = document.getElementById('testDrive');
+	const testText = document.getElementById('testText');
+	function updateTest() {
+		testDrive.innerHTML = testText.value || String.fromCharCode(160);
+		if (window.icomoonLiga) {
+			window.icomoonLiga(testDrive);
+		}
+	}
+	function updateSize() {
+		testDrive.style.fontSize = `${fontSize.value}px`;
+	}
+	fontSize.addEventListener('change', updateSize, false);
+	testText.addEventListener('input', updateTest, false);
+	testText.addEventListener('change', updateTest, false);
+	updateSize();
+}());