@finsemble/finsemble-ui 1.0.0-beta-1

package/react/assets/css/linkerWindow.css

@@ -0,0 +1,136 @@
+/*!
+ * linkerWindow.css
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+
+body .linkerContainer {
+	margin: 0;
+	border: 0;
+	font-size: var(--menu-font-size);
+	font-weight: var(--font-weight);
+	overflow: hidden;
+}
+
+#main {
+	padding: 5px;
+	background-color: var(--menu-background-color);
+}
+
+.linkerContainer {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.channel-wrapper {
+	display: flex;
+	justify-content: flex-end;
+	width: 100%;
+	flex-direction: row-reverse;
+	align-items: center;
+	cursor: pointer;
+	user-select: none;
+	background-color: transparent;
+	border-radius: 30px;
+}
+
+.channel-wrapper:hover,
+.channel-wrapper.focused {
+	background-color: var(--menu-content-hover-color);
+}
+
+.channel-label {
+	padding-left: 4px;
+	color: var(--menu-linker-selected-font-color);
+}
+
+/**
+.linkerGroup is deprecated - used with LinkerMenuDeprecated
+**/
+.linkerGroup,
+.linker-glyph {
+	height: 20px;
+	width: 20px;
+	margin: 4px 12px 4px 8px;
+	border-radius: 30px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.channel1 .linker-glyph,
+.linker-group.channel1 {
+	background-color: #8781bd;
+	border: 1px solid #797381;
+}
+
+.channel2 .linker-glyph,
+.linker-group.channel2 {
+	background-color: #ffe035;
+	border: 1px solid #ffd803;
+}
+
+.channel3 .linker-glyph,
+.linker-group.channel3 {
+	background-color: #89d803;
+	border: 1px solid #71ce47;
+}
+
+.channel4 .linker-glyph,
+.linker-group.channel4 {
+	background-color: #fe6262;
+	border: 1px solid #f83b3b;
+}
+
+.channel5 .linker-glyph,
+.linker-group.channel5 {
+	background-color: #2dacff;
+	border: 1px solid #039bff;
+}
+
+.channel6 .linker-glyph,
+.linker-group.channel6 {
+	background-color: #ffa200;
+	border: 1px solid #f29a01;
+}
+
+.channel7 .linker-glyph,
+.linker-group.channel7 {
+	background-color: #3c1d5f;
+	border: 1px solid #341853;
+}
+
+.channel8 .linker-glyph,
+.linker-group.channel8 {
+	background-color: #690f2d;
+	border: 1px solid #5c0d27;
+}
+
+/* To reduce the number of channels in the linker simply hide them with CSS!
+.channel6, .channel5 {
+	display: none;
+}
+*/
+
+/* If it's absolutely necessary to change the channel names, use this CSS pattern to do so.
+ * The value in `content` will overwrite the actual channel name.
+.channel4 .channel-label {
+	visibility: hidden;
+}
+
+
+.channel4 .channel-label:after {
+	content: "Red";
+    display: block;
+    visibility: visible;
+    top: -10px;
+    position: relative;
+}
+*/
+
+.active-linker-group {
+	color: var(--menu-linker-selected-font-color);
+	font-size: var(--menu-linker-selected-font-size);
+	margin: 2px 2px 0 0;
+}

package/react/assets/css/menus.css

@@ -0,0 +1,195 @@
+/*!
+ * menus.css
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+
+html.menu-portal ::-webkit-scrollbar-track {
+	border-radius: 3px;
+	background-color: transparent;
+}
+
+html.menu-portal ::-webkit-scrollbar {
+	width: 5px;
+	background-color: transparent;
+	border-radius: 3px;
+}
+
+html.menu-portal ::-webkit-scrollbar-thumb {
+	cursor: pointer;
+	border-radius: 9px;
+	background-color: var(--scrollbar-color);
+}
+
+/* In menu portals, the body will have attribute of `resizing` equal to true
+until the MenuAutoResizer has completed its first run. This is style entry is
+used to hide the scrollbar during initial load, which otherwise would cause a white flash.
+
+This attribute is never set for menus with a fixed height (e.g. <MenuShell height="100">)
+*/
+
+html.menu-portal body {
+	overflow-y: auto;
+	padding: 0;
+	margin: 0;
+	background: var(--toolbar-background-color);
+}
+
+html.menu-portal body[resizing="true"],
+html.menu-portal body.menu-no-scroll {
+	overflow-y: hidden;
+}
+
+[data-react-beautiful-dnd-drag-handle="0"] {
+	outline: none;
+}
+
+.menu-header {
+	display: flex;
+	flex-direction: row;
+}
+
+.menu {
+	background: var(--menu-content-background-color);
+	color: var(--menu-font-color);
+	padding: 10px 0;
+}
+
+.advancedAppLauncher .menu {
+	padding: 0;
+}
+
+.menu .menu-section {
+	overflow-x: hidden;
+	overflow-y: auto;
+	list-style-type: none;
+	width: 100%;
+	padding-left: 0;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.menu-secondary {
+	background: var(--menu-actions-background-color);
+	border-bottom: 4px solid;
+	border-color: var(--core-primary-3);
+	padding-bottom: 4px;
+}
+
+/**
+The "focused" attribute is set during keyboard navigation.
+*/
+
+.menu-item:focus,
+.menu-item-icon:focus,
+.menu-item:hover,
+.finsemble-toolbar-button:hover {
+	background: var(--menu-content-hover-color);
+	outline: none;
+}
+
+.menu-secondary .menu-item:hover {
+	background: var(--menu-actions-hover-color);
+}
+
+.menu-item {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding-left: 14px;
+	margin: 0 5px;
+	cursor: pointer;
+	position: relative;
+	border-radius: 20px;
+	height: 34px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	user-select: none;
+}
+
+.menu-item .ff-adp-hamburger {
+	color: var(--menu-dragHandle-color);
+	padding: 3px 7px 0 0;
+	cursor: grab;
+}
+
+.menu-item-icon {
+	width: 20px;
+	height: 20px;
+	border-radius: 20px;
+	vertical-align: middle;
+	text-align: center;
+	padding-top: 4px;
+}
+
+.workspace-list {
+	padding-top: 4px;
+}
+
+.menu-item .workspace-name {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	user-select: none;
+}
+
+/* Prevents star from turning orange */
+.ff-favorite {
+	color: var(--menu-action-icon-color);
+}
+
+.ff-favorite:hover {
+	color: var(--menu-favorite-hover-color);
+}
+
+.favorited > .ff-favorite {
+	color: var(--menu-favorite-hover-color);
+}
+
+.favorited > .ff-favorite:hover {
+	color: var(--menu-favorite-active-hover-color);
+}
+
+.menu-item-row {
+	display: flex;
+	height: 100%;
+	width: 100%;
+	align-items: center;
+}
+
+.menu-item-row .app-name {
+	text-overflow: ellipsis;
+}
+
+.menu-item-row-push-right {
+	display: inline-flex;
+	margin-left: auto;
+}
+
+/* padding for favorite makers and trashcans */
+.menu-item-row-push-right > * {
+	padding: 0 10px;
+}
+
+.ff-adp-trash-outline:hover {
+	color: var(--menu-delete-background-hover-color);
+}
+
+.menu-toggle-small {
+	display: none;
+}
+
+@media screen and (max-width: 333px) {
+	.menu-toggle-small {
+		display: inline-flex;
+	}
+
+	.menu-toggle-large {
+		display: none;
+	}
+}
+
+/* Remove border around system tray menu */
+.system-tray {
+	margin: 0;
+}