widenarrow-ui 0.1.2

package/src/styles/icons/style.css

@@ -0,0 +1,173 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?gzt0zz');
+  src:  url('fonts/icomoon.eot?gzt0zz#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?gzt0zz') format('truetype'),
+    url('fonts/icomoon.woff?gzt0zz') format('woff'),
+    url('fonts/icomoon.svg?gzt0zz#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-arrow:before {
+  content: "\e900";
+}
+.icon-block:before {
+  content: "\e901";
+}
+.icon-calender:before {
+  content: "\e902";
+}
+.icon-close:before {
+  content: "\e903";
+}
+.icon-color:before {
+  content: "\e904";
+}
+.icon-comment:before {
+  content: "\e905";
+}
+.icon-dotts-expand:before {
+  content: "\e906";
+}
+.icon-download:before {
+  content: "\e907";
+}
+.icon-dropdown:before {
+  content: "\e908";
+}
+.icon-edit-doc:before {
+  content: "\e909";
+}
+.icon-edit:before {
+  content: "\e90a";
+}
+.icon-expand:before {
+  content: "\e90b";
+}
+.icon-export-excel:before {
+  content: "\e90c";
+}
+.icon-export-pdf:before {
+  content: "\e90d";
+}
+.icon-help:before {
+  content: "\e90e";
+}
+.icon-menu-admin:before {
+  content: "\e90f";
+}
+.icon-menu-benchmark:before {
+  content: "\e910";
+}
+.icon-menu-cluster:before {
+  content: "\e911";
+}
+.icon-menu-dashboard:before {
+  content: "\e912";
+}
+.icon-menu-expand-plus:before {
+  content: "\e913";
+}
+.icon-menu-handle-large:before {
+  content: "\e914";
+}
+.icon-menu-handle-small:before {
+  content: "\e915";
+}
+.icon-menu-help:before {
+  content: "\e916";
+}
+.icon-menu-inbox:before {
+  content: "\e917";
+}
+.icon-menu-minimize:before {
+  content: "\e918";
+}
+.icon-menu-newsletter:before {
+  content: "\e919";
+}
+.icon-menu-pin:before {
+  content: "\e91a";
+}
+.icon-menu-report:before {
+  content: "\e91b";
+}
+.icon-menu-rerport-navigate:before {
+  content: "\e91c";
+}
+.icon-menu-search:before {
+  content: "\e91d";
+}
+.icon-menu-statistics:before {
+  content: "\e91e";
+}
+.icon-newsletter:before {
+  content: "\e91f";
+}
+.icon-notification:before {
+  content: "\e920";
+}
+.icon-open:before {
+  content: "\e921";
+}
+.icon-published-outline:before {
+  content: "\e922";
+}
+.icon-published:before {
+  content: "\e923";
+}
+.icon-report-large:before {
+  content: "\e924";
+}
+.icon-report-upploded:before {
+  content: "\e925";
+}
+.icon-report:before {
+  content: "\e926";
+}
+.icon-trash:before {
+  content: "\e927";
+}
+.icon-uppload:before {
+  content: "\e928";
+}
+.icon-view-cards:before {
+  content: "\e929";
+}
+.icon-view-filter .path1:before {
+  content: "\e92a";
+  color: rgb(0, 0, 0);
+}
+.icon-view-filter .path2:before {
+  content: "\e92b";
+  margin-left: -1em;
+  color: rgb(0, 0, 35);
+}
+.icon-view-filter .path3:before {
+  content: "\e92c";
+  margin-left: -1em;
+  color: rgb(0, 0, 35);
+}
+.icon-view-list:before {
+  content: "\e92d";
+}
+.icon-warning:before {
+  content: "\e92e";
+}

package/src/styles/keyframes.scss

@@ -0,0 +1,103 @@
+@keyframes fadeInAnimation {
+	from {
+		transform: scale(0.8) translateZ(1px);
+		opacity: 0;
+	}
+	to {
+		transform: scale(1) translateZ(1px);
+		opacity: 1;
+	}
+}
+
+@keyframes fadeOutAnimation {
+	from {
+		transform: scale(1) translateZ(1px);
+		opacity: 1;
+	}
+	to {
+		transform: scale(0.8) translateZ(1px);
+		opacity: 0;
+	}
+}
+
+/**
+* Visibility
+*/
+@keyframes visibilityHidden {
+	from {
+		transform: scaleX(1) translateZ(1px);
+	}
+	to {
+		transform: scaleX(0) translateZ(1px);
+	}
+}
+
+@keyframes visibilityVisible {
+	from {
+		transform: scaleX(0) translateZ(1px);
+	}
+	to {
+		transform: scaleX(1) translateZ(1px);
+	}
+}
+
+/**
+* Spin
+*/
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+/**
+* Pulse
+*/
+@keyframes pulse {
+	from {
+		transform: scale3d(1, 1, 1);
+	}
+
+	50% {
+		fill: $blue-active;
+		transform: scale3d(1.2, 1.2, 1.2);
+	}
+
+	to {
+		transform: scale3d(1, 1, 1);
+	}
+}
+
+@keyframes replaceIconPulse {
+	from {
+		transform: scale3d(1, 1, 1);
+		opacity: 0;
+	}
+
+	50% {
+		opacity: 1;
+		transform: scale3d(0.2, 0.2, 0.2);
+	}
+
+	to {
+		transform: scale3d(1, 1, 1);
+	}
+}
+
+@keyframes shake {
+	0%, 20%, 100% {transform: translateX(0) rotate(0deg) translateY(0);}
+	1.5%, 3.5%, 5.5%, 7.5%, 9.5% {transform: translateX(-1px) rotate(-2deg) ;}
+	2.5%, 4.5%, 6.5%, 8.5% {transform: translateX(1px) rotate(2deg); }
+	1%, 3%, 5%, 7%, 9% {transform: translateY(1px);}
+	2%, 4%, 6%, 8% {transform: translateY(-1px); }
+}
+
+@keyframes bellShake {
+	0%, 20%, 100% {transform: rotate(0deg);}
+	1.5%, 3.5%, 5.5%, 7.5%, 9.5% {transform: rotate(-4deg) ;}
+	2.5%, 4.5%, 6.5%, 8.5% {transform: rotate(4deg); }
+}
+

package/src/styles/libraryOverrides.scss

@@ -0,0 +1,62 @@
+// Tooltip class
+.show {
+	opacity: 1 !important;
+}
+
+// Super hide tooltips when not hovering because it messes up the Drag-N-Drop snapshot otherwise
+.__react_component_tooltip.__react_component_tooltip {
+	display: none;
+}
+
+// React mentions input
+.mentions__input:focus {
+	border-color: $blue !important;
+}
+
+.mention-name {
+	white-space: nowrap;
+}
+
+.mentions__suggestions__item--focused .mention-alias {
+	color: #ffffff;
+}
+
+.__mentions {
+	height: 100%;
+
+	.mention {
+		border: none;
+	}
+
+	.__mentions__control {
+		height: 100%;
+		min-height: 40px;
+	}
+
+	.mentions__input,
+	.mentions__input:focus {
+		outline: none;
+	}
+
+	> div {
+		border-radius: $border-radius;
+	}
+}
+
+.__mentions.__mentions--multiLine {
+	min-height: 60px;
+}
+
+// Lazyloading images
+.lazy-image {
+	transition: opacity 250ms ease;
+	opacity: 0;
+}
+
+.lazyloading {
+	opacity: 1;
+}
+
+.lazyloaded {
+	opacity: 1;
+}

package/src/styles/main.scss

@@ -0,0 +1,299 @@
+@import 'normalize';
+@import 'variables';
+@import 'colors';
+@import 'mixins';
+@import 'libraryOverrides';
+// @import 'print';
+
+/**
+	This sole purpose of this rule and its font size is to set a base for our rem values, which in turn ONLY should be used
+	in print views for correct pdf rendering. The value is a calculation for the print mockup's font-size of 10px, times the
+	difference between a 96PPI to a 72PPI A4 page (794 / 595 = 1.33445378).
+ */
+html {
+	font-size: 15px;
+}
+
+/**
+|--------------------------------------------------
+| <HTML> TAGS
+|--------------------------------------------------
+*/
+*,
+*::after,
+*::before {
+	box-sizing: border-box;
+}
+
+a {
+	text-decoration: none;
+	color: $blue;
+}
+
+p {
+	line-height: 1.45;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: 500;
+	line-height: 1.2;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: 'Assistant', sans-serif;
+	font-size: inherit;
+	line-height: inherit;
+}
+
+input:focus {
+	border: 1px solid $blue !important;
+
+	&:focus-visible {
+		box-shadow: 0 0 0 1px $blue;
+	}
+}
+
+*:focus-visible {
+	box-shadow: 0 0 0 2px $blue;
+}
+
+figure {
+	margin: 0;
+}
+
+hr {
+	margin-top: 20px;
+	margin-bottom: 20px;
+	border: 0;
+	border-top: 1px solid #eeeeee;
+}
+
+mark {
+	background: $text-color-highlight;
+}
+
+ul,
+ol {
+	margin-top: 0;
+	margin-bottom: 10px;
+}
+ul ul,
+ol ul,
+ul ol,
+ol ol {
+	margin-bottom: 0;
+}
+
+dl {
+	margin-top: 0;
+	margin-bottom: 20px;
+}
+
+dt,
+dd {
+	line-height: 1.42857143;
+}
+
+dt {
+	font-weight: bold;
+}
+
+dd {
+	margin-left: 0;
+}
+
+p {
+	margin: 0 0 $base-size;
+}
+
+button,
+a {
+	cursor: pointer;
+}
+
+abbr[title],
+abbr[data-original-title] {
+	cursor: help;
+	border-bottom: 1px dotted #777777;
+}
+
+blockquote {
+	padding: 10px 20px;
+	margin: 0 0 20px;
+	font-size: 17.5px;
+	border-left: 5px solid #eeeeee;
+}
+blockquote p:last-child,
+blockquote ul:last-child,
+blockquote ol:last-child {
+	margin-bottom: 0;
+}
+blockquote footer,
+blockquote small,
+blockquote .small {
+	display: block;
+	font-size: 80%;
+	line-height: 1.42857143;
+	color: #777777;
+}
+blockquote footer:before,
+blockquote small:before,
+blockquote :before {
+	content: '\2014 \00A0';
+}
+
+address {
+	margin-bottom: 20px;
+	font-style: normal;
+	line-height: 1.42857143;
+}
+
+code,
+kbd,
+pre,
+samp {
+	font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+code {
+	padding: 2px 4px;
+	font-size: 90%;
+	color: #c7254e;
+	background-color: #f9f2f4;
+	border-radius: 4px;
+}
+
+kbd {
+	padding: 2px 4px;
+	font-size: 90%;
+	color: #fff;
+	background-color: #333;
+	border-radius: 3px;
+	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
+kbd kbd {
+	padding: 0;
+	font-size: 100%;
+	font-weight: bold;
+	box-shadow: none;
+}
+
+pre {
+	display: block;
+	padding: 9.5px;
+	margin: 0 0 10px;
+	font-size: 13px;
+	line-height: 1.42857143;
+	word-break: break-all;
+	word-wrap: break-word;
+	color: #333333;
+	background-color: #f5f5f5;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+}
+
+pre code {
+	padding: 0;
+	font-size: inherit;
+	color: inherit;
+	white-space: pre-wrap;
+	background-color: transparent;
+	border-radius: 0;
+}
+
+@media screen and (max-width: 767px) {
+	input {
+		font-size: 16px !important;
+	}
+}
+
+/**
+|--------------------------------------------------
+| Scrollwheel (only chrome)
+|--------------------------------------------------
+*/
+/* width */
+// ::-webkit-scrollbar {
+// 	width: 8px;
+// }
+
+// /* Track */
+// ::-webkit-scrollbar-track {
+// 	background: $grey-1;
+// }
+
+// /* Handle */
+// ::-webkit-scrollbar-thumb {
+// 	border-radius: 4px;
+// 	background: $grey-4;
+// }
+
+// /* Handle on hover */
+// ::-webkit-scrollbar-thumb:hover {
+// 	background: $grey-5;
+// }
+
+/**
+|--------------------------------------------------
+| <App /> TAGS
+|--------------------------------------------------
+*/
+body {
+	overflow-x: hidden;
+	background: $application-background;
+	position: relative;
+	font-family: 'Assistant', sans-serif;
+	font-size: $font-size-m;
+	color: $text-grey;
+	letter-spacing: 0.2px;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+
+	// The white full strip that extends the page header
+	// &:after {
+	// 	content: '';
+	// 	position: absolute;
+	// 	top: 0;
+	// 	background: $white;
+	// 	left: 0;
+	// 	top: $app-header-height;
+	// 	width: 100%;
+	// 	height: $page-header-height;
+	// 	z-index: $z-index-negative;
+	// }
+
+	.app {
+		width: 100%;
+		max-width: $app-max-width; // NOTE. Remove this css rule if we want a "full-screen" app.
+		margin: 0 auto;
+		position: relative;
+	}
+
+	// E.g report page where we dont want a white strip
+	&.pagemode-full {
+		.app {
+			max-width: 100%;
+		}
+
+		&:after {
+			height: 0;
+		}
+	}
+}
+
+.u-semiBold {
+	font-weight: 600;
+}
+
+.u-error {
+	color: $red;
+}