@finsemble/finsemble-ui 1.0.0-beta-1

package/react/assets/css/processMonitor.css

@@ -0,0 +1,216 @@
+/*!
+ * processMonitor.css
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+
+body.process-monitor {
+	margin: 0;
+	overflow: hidden;
+	font-size: var(--procMonitor-font-size);
+	font-weight: var(--procMonitor-font-weight);
+	color: var(--procMonitor-font-color);
+	background-color: var(--procMonitor-background-color);
+	user-select: none;
+}
+
+.high-usage {
+	background-color: var(--procMonitor-negative-background-color);
+	color: var(--procMonitor-font-color);
+}
+
+.moderate-usage {
+	background-color: var(--procMonitor-warning-background-color);
+	color: var(--procMonitor-font-color);
+}
+
+.terminate {
+	font-style: normal;
+	font-stretch: normal;
+	line-height: normal;
+	letter-spacing: normal;
+	text-align: right;
+	padding: 3px 4px;
+	cursor: pointer;
+	transition: all 0.25s ease;
+}
+
+.terminate:hover {
+	border-color: var(--procMonitor-negative-border-color);
+	background-color: var(--procMonitor-negative-background-color);
+	color: var(--procMonitor-font-color);
+}
+
+.process-list-wrapper {
+	margin: 1em;
+	border: 1px solid var(--procMonitor-list-border-color);
+}
+
+.process-list {
+	height: calc(100vh - 185px);
+	overflow-y: auto;
+}
+
+.process-row,
+.list-header {
+	display: flex;
+	flex-direction: row;
+}
+
+.process {
+	padding-top: 8px;
+	padding-bottom: 8px;
+	border-bottom: 1px solid var(--procMonitor-list-border-color);
+}
+
+.list-header {
+	border-bottom: 1px solid var(--procMonitor-list-border-color);
+	padding-right: 15px;
+	align-items: center;
+
+	/* Account for scrollbar. */
+}
+
+.process-name,
+.list-header-name {
+	width: 40%;
+}
+
+.process-name {
+	font-weight: var(--procMonitor-process-name-font-weight);
+	font-style: italic;
+	padding-left: 7px;
+}
+
+.process-statistics,
+.list-header-statistic-labels {
+	width: 60%;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+}
+
+.list-header-statistic-label {
+	flex: 1;
+	padding: 0.5em;
+	display: inline-flex;
+	justify-content: center;
+	cursor: pointer;
+}
+
+.list-header-name {
+	border-left: 0;
+}
+
+.statistic {
+	display: inline-flex;
+	justify-content: center;
+	align-content: center;
+	flex: 1;
+}
+
+.child-window {
+	display: flex;
+	align-content: center;
+	line-height: 24px;
+}
+
+.child-window-name {
+	font-weight: var(--procMonitor-component-name-font-weight);
+}
+
+.advanced .child-window-name {
+	cursor: pointer;
+}
+
+.child-window-actions {
+	width: 26px;
+	display: inline-flex;
+	align-content: center;
+}
+
+.summary-statistics-header {
+	font-weight: bold;
+	font-size: 15px;
+	display: flex;
+}
+
+.summary-statistics-wrapper,
+.summary-statistics,
+.summary-statistics-labels {
+	display: flex;
+}
+
+.summary-statistics {
+	width: 50%;
+}
+
+.summary-statistic {
+	margin-right: 40px;
+}
+
+.summary-statistics-wrapper {
+	margin-left: 19px;
+	margin-top: 6px;
+	flex-direction: column;
+}
+
+.close-window {
+	margin-left: 5px;
+	margin-right: 17px;
+	height: 8px;
+	width: 7px;
+	color: var(--procMonitor-close-component-font-color);
+}
+
+.close-window:hover {
+	cursor: pointer;
+	color: var(--procMonitor-close-hover-color);
+}
+
+.sort-direction {
+	font-size: 8px;
+	margin-left: 5px;
+	display: flex;
+	align-items: center;
+}
+
+.advanced-button-wrapper {
+	align-self: center;
+	display: flex;
+	align-content: center;
+	margin-right: 19px;
+}
+
+.advanced-button {
+	width: 110px;
+	height: 35px;
+	background-color: var(--button-neutral-background-color);
+	border: solid 1px var(--button-neutral-border-hover-color);
+	display: flex;
+	align-content: center;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+}
+
+.bottom-section {
+	display: flex;
+	justify-content: space-between;
+}
+
+.process-monitor ::-webkit-scrollbar-track {
+	border-radius: 3px;
+}
+
+.process-monitor ::-webkit-scrollbar {
+	width: 9px;
+	background-color: var(--scrollbar-color);
+	border-radius: 3px;
+}
+
+.process-monitor ::-webkit-scrollbar-thumb {
+	cursor: pointer;
+	border-radius: inherit;
+	background-color: rgb(0 0 0 / 20%);
+}

package/react/assets/css/search.css

@@ -0,0 +1,128 @@
+/*!
+ * search.css
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+
+.search-menu .menu .menu-item {
+	color: var(--search-result-font-color);
+}
+
+.search-menu .no-hover:hover,
+.search-menu .no-hover:focus {
+	background: transparent;
+	cursor: default;
+}
+
+.search-menu .informational-state {
+	justify-content: center;
+	font-style: italic;
+	padding-top: 10px;
+	margin-left: -17px;
+}
+
+.search-menu .search-icon-wrapper {
+	color: var(--menu-font-color);
+}
+
+.search-menu .search-input {
+	font-family: var(--font-family);
+	font-weight: var(--font-weight);
+	background: transparent;
+	border-top: none;
+	border-left: none;
+	border-right: none;
+	border-bottom: 1px solid var(--search-input-border-color);
+	margin-left: 11px;
+	width: calc(100% - 43px);
+	color: var(--search-menu-font-color);
+	transition: border-bottom 0.2 ease-in;
+}
+
+.search-menu .search-input:focus {
+	border-bottom: 1px solid var(--search-input-focused-border-color);
+	outline: none;
+}
+
+.search-menu .highlight {
+	text-decoration: underline;
+	color: var(--search-result-highlighter-color);
+}
+
+.search-title {
+	display: flex;
+	flex-direction: row;
+	position: relative;
+	padding: 10px 10px 10px 14px;
+	margin: 0 5px;
+	font-weight: var(--font-weight-2);
+	color: var(--search-menu-header-color);
+	background: transparent;
+	text-transform: uppercase;
+	user-select: none;
+}
+
+.search-title .provider-title {
+	font-size: var(--search-menu-font-size);
+	vertical-align: middle;
+	color: var(--menu-font-color);
+	text-transform: none;
+	position: right;
+	margin-left: 8px;
+}
+
+.arrow_right_grey {
+	width: 10px;
+	height: 9px;
+	object-fit: contain;
+	font-size: var(--search-menu-font-size);
+	margin-left: 4px;
+	color: var(--menu-font-color);
+	display: inline;
+}
+
+.search-actions {
+	display: flex;
+	margin-top: 8px;
+	margin-bottom: 8px;
+}
+
+.actionButton {
+	border: 1px solid var(--button-neutral-border-color);
+	padding: 3px;
+	display: inline-block;
+	text-align: center;
+	outline: none;
+	text-decoration: none;
+}
+
+.search-menu .clear-search {
+	font-size: 9px;
+	border-radius: 50%;
+	display: inline-flex;
+	color: var(--search-input-clear-search-color);
+}
+
+.search-menu .clear-search:hover {
+	color: var(--search-input-clear-search-hover-color);
+	cursor: pointer;
+}
+
+.search-menu .menu-item {
+	font-weight: var(--font-weight);
+}
+
+.search-menu .search-provider-results {
+	padding-bottom: 7px;
+}
+
+.finsemble-toolbar-button .ff-search,
+.finsemble-toolbar-button .menu-toggle-small > i {
+	position: relative;
+	top: 2px;
+	left: -2px;
+}
+
+.menu-active {
+	background-color: var(--toolbar-button-hover-color);
+}

package/react/assets/css/shared/animations.css

@@ -0,0 +1,105 @@
+/* ----------------------------------------------
+ * Generated by Animista on 2020-1-7 9:29:17
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+
+/**
+ * ----------------------------------------
+ * animation slide-in-fwd-bottom
+ * ----------------------------------------
+ */
+@keyframes slide-in-fwd-bottom {
+	0% {
+		transform: translateZ(-1400px) translateY(800px);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateZ(0) translateY(0);
+		opacity: 1;
+	}
+}
+
+.slide-in-fwd-bottom {
+	animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+/**
+ * ----------------------------------------
+ * animation slide-out-right
+ * ----------------------------------------
+ */
+@keyframes slide-out-right {
+	0% {
+		transform: translateX(0);
+		opacity: 1;
+	}
+
+	100% {
+		transform: translateX(1000px);
+		opacity: 0;
+	}
+}
+
+.slide-out-right {
+	animation: slide-out-right 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+}
+
+/**
+ * ----------------------------------------
+ * animation slide-in-right
+ * ----------------------------------------
+ */
+
+@keyframes slide-in-right {
+	0% {
+		transform: translateX(1000px);
+		transform: translateX(1000px);
+		opacity: 0;
+	}
+
+	100% {
+		transform: translateX(0);
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+.slide-in-right {
+	animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+/**
+ * ----------------------------------------
+ * animation slide-out-right-opaque
+ * ----------------------------------------
+ */
+@keyframes slide-out-right-opaque {
+	0% {
+		transform: translateX(0);
+	}
+
+	100% {
+		transform: translateX(1000px);
+	}
+}
+
+/**
+ * ----------------------------------------
+ * animation slide-in-right-opaque
+ * ----------------------------------------
+ */
+
+@keyframes slide-in-right-opaque {
+	0% {
+		transform: translateX(1000px);
+		transform: translateX(1000px);
+	}
+
+	100% {
+		transform: translateX(0);
+		transform: translateX(0);
+	}
+}

package/react/assets/css/shared/common.css

@@ -0,0 +1,40 @@
+/* chverons */
+.chevron-container {
+	display: flex;
+	align-items: center;
+}
+
+.ff-chevron-left::before {
+	padding-right: 2px;
+}
+
+.ff-chevron-right::before {
+	padding-left: 2px;
+}
+
+.scroll-button {
+	color: var(--toolbar-scroll-button-color);
+	margin: 8px 3px;
+	padding: 5px;
+	font-size: 10px;
+	border: 1px solid transparent;
+	border-radius: 50px;
+	height: 10px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.scroll-button:hover {
+	background: var(--toolbar-button-hover-color);
+	cursor: pointer;
+}
+
+.greyedOut {
+	opacity: 0.3;
+}
+
+.greyedOut:hover {
+	background: transparent;
+	cursor: default;
+}

package/react/assets/css/tags.css

@@ -0,0 +1,136 @@
+/*!
+ * tags.css
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+
+.tags-menu-wrapper {
+	height: 24px;
+	border-radius: 12px;
+	background: var(--tag-background-color);
+	color: var(--tag-font-color);
+	padding: 0 5px 0 9px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: absolute;
+	user-select: none;
+	font-size: var(--menu-font-size);
+	font-weight: var(--tag-font-weight);
+	transition: 0.2s background;
+}
+
+.tags-menu-wrapper:hover {
+	background-color: var(--tag-background-hover-color);
+}
+
+.filter-sort .tags-menu-wrapper {
+	position: fixed;
+	top: 13px;
+	right: 8px;
+}
+
+/* Different positioning for the catalog vs the launcher. */
+.app-catalog .tags-menu-wrapper {
+	top: 8px;
+	right: 22px;
+}
+
+.tags-menu-wrapper span {
+	line-height: 17px;
+	font-size: var(--tag-font-size);
+	cursor: pointer;
+}
+
+.tags-menu-wrapper span i {
+	padding: 0 5px;
+	font-size: 6px;
+}
+
+.tags-menu {
+	z-index: 11;
+	top: 22px;
+	position: absolute;
+	width: 130px;
+	max-height: 200px;
+	overflow-y: auto;
+	border-radius: 3px;
+	background-color: var(--tag-background-color);
+	padding: 5px 0;
+	margin-top: 5px;
+}
+
+.tags-menu ul {
+	padding: 0;
+	margin: 0;
+}
+
+.tags-menu li {
+	cursor: pointer;
+	line-height: 19px;
+	font-size: 11px;
+	list-style: none;
+	color: var(--tag-font-color);
+	padding: 0 6px;
+	display: flex;
+	align-items: center;
+}
+
+.tags-menu .ff-check-mark {
+	color: var(--tag-checkmark-icon-color);
+}
+
+.tags-checkmark-wrapper {
+	width: 10px;
+}
+
+.app-tag {
+	height: 20px;
+	border-radius: 12px;
+	background-color: var(--tag-background-color);
+	user-select: none;
+	margin: 0 4px 4px 0;
+	padding: 5px 7px 0 9px;
+}
+
+.app-tag .tag-content {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	font-size: var(--tag-font-size);
+	font-weight: var(--tag-font-weight);
+	font-style: normal;
+	font-stretch: normal;
+	line-height: normal;
+	letter-spacing: normal;
+	color: var(--tag-font-color);
+	cursor: default;
+}
+
+.tag-delete {
+	cursor: pointer;
+	padding: 0 2px;
+	font-size: 8px;
+}
+
+.tag-delete:hover {
+	color: var(--tag-close-icon-hover-color);
+}
+
+.tag-name {
+	margin-right: 2px;
+}
+
+.app-card .tag-name:hover {
+	text-decoration: underline;
+}
+
+.tag-content .ff-close {
+	padding-top: 0;
+}
+
+.label-bar .ff-close {
+	padding-top: 2px;
+	font-size: 8px;
+}