@finsemble/finsemble-ui 1.0.0-beta-1 → 1.0.0-beta-5

package/react/assets/css/windowTitleBar.css

@@ -1,699 +0,0 @@
-/*!
- * windowTitleBar.css
- * Copyright 2017 - 2020 by ChartIQ, Inc.
- * All rights reserved.
- */
-@import url("./linkerWindow.css");
-@import url("./defaultTheme.css");
-@import url("core/icons.css");
-@import url("core/windowFrame.css");
-@import url("core/formElements.css");
-@import url("./font-finance.css");
-@import url("./fonts/Open_Sans/OpenSans-Definition.css");
-@import url("./focus.css");
-
-.fsbl-drag-handle {
-	z-index: 2147483641;
-
-	/* use below with window scrollbar hack */
-	position: fixed;
-	/* stylelint-disable-next-line declaration-no-important */
-	top: 5px !important;
-	/* stylelint-disable-next-line declaration-no-important */
-	margin-top: 0 !important;
-
-	/* use below without window scrollbar hack */
-
-	/* position: absolute; */
-
-	/* top: 0px!important; */
-
-	/* background-color: red; */
-
-	/* prevent dragging any data when move window */
-	user-select: none;
-}
-
-.fsbl-drag-handle-native-movement {
-	z-index: 2147483641;
-
-	/* use below with window scrollbar hack */
-	position: fixed;
-	/* stylelint-disable-next-line declaration-no-important */
-	top: 5px !important;
-	/* stylelint-disable-next-line declaration-no-important */
-	margin-top: 0 !important;
-	-webkit-app-region: drag;
-
-	/* prevent dragging any data when move window */
-	user-select: none;
-}
-
-.fsbl-drag-handle.hidden {
-	display: none;
-}
-
-.fsbl-drag-handle-native-movement.hidden {
-	display: none;
-}
-
-.fsbl-tabs-multiple .fsbl-header-right {
-	padding-left: 80px; /* leave some space for a user to grab */
-}
-
-html::before,
-html::after,
-body::before,
-body::after {
-	content: "";
-	position: fixed;
-	display: block;
-	z-index: 2147483640;
-	background-color: var(--window-border-color);
-}
-
-/*
-* The next few items give the border of windows
-* thickness so that the user can see them
-*/
-html::before {
-	height: 1px;
-	left: 0;
-	right: 0;
-	top: 0;
-}
-
-html::after {
-	width: 1px;
-	top: 0;
-	right: 0;
-	bottom: 0;
-}
-
-body::before {
-	height: 1px;
-	right: 0;
-	bottom: 0;
-	left: 0;
-}
-
-body::after {
-	width: 1px;
-	top: 0;
-	bottom: 0;
-	left: 0;
-}
-
-.fsbl-header {
-	font-family: var(--font-family);
-	font-size: var(--titleBar-font-size);
-	font-weight: var(--titleBar-font-weight);
-	text-align: center;
-	display: flex;
-	height: var(--titleBar-height);
-	position: fixed;
-	align-items: flex-end;
-	flex-direction: row;
-	justify-content: space-between;
-	background: var(--titleBar-background-inactive-color);
-	width: 100%;
-	left: 0;
-	z-index: 2147483639;
-	top: 0;
-	color: var(--titleBar-inactive-font-color);
-}
-
-html.desktop-active .title-text {
-	background: transparent;
-	color: var(--titleBar-active-font-color);
-}
-
-.fsbl-header-title {
-	position: relative;
-	height: 100%;
-	padding-left: 8px;
-	overflow: hidden;
-	align-items: center;
-	display: flex;
-	padding-right: 14px;
-	transition: background-color 0.2s ease;
-	border-top-left-radius: 10px;
-	border-top-right-radius: 10px;
-	background-color: var(--titlebar-tab-inactive-background-color);
-}
-
-.fsbl-header-title[data-hover="true"] {
-	background-color: var(--core-primary-2);
-}
-
-html.desktop-active .fsbl-header-title .fsbl-tab-title {
-	color: var(--titlebar-tab-active-font-color);
-}
-
-html.desktop-active .fsbl-header-title[data-hover="true"] {
-	background-color: var(--titlebar-tab-active-background-color);
-	color: var(--titlebar-tab-active-font-color);
-}
-
-.fsbl-header-left {
-	height: calc(100% - 5px); /* leave some space for the resize cursor */
-	margin-left: 2px;
-	left: 0;
-	align-content: center;
-	align-items: center;
-	justify-content: flex-start;
-	display: flex;
-}
-
-.fsbl-header-center {
-	height: calc(100% - 10px);
-	align-content: center;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 80%;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-
-	--webkit-user-select: none;
-
-	user-select: none;
-	position: relative;
-	padding-bottom: 3px; /* This needs to be half of the thing subtracted from the height. e.g. height = 100% - 6px, then this is 3px) */
-}
-
-.fsbl-tabs-enabled .fsbl-header-center {
-	height: 100%;
-	width: 100%;
-	padding-bottom: 0;
-}
-
-html.desktop-active .fsbl-header-right {
-	background: var(--titleBar-background-active-color);
-}
-
-.fsbl-header-right {
-	margin-right: 2px;
-	height: calc(100% - 5px); /* leave some space for the resize cursor */
-	align-content: center;
-	display: flex;
-	justify-content: flex-end;
-	z-index: 5;
-}
-
-/* Offset the contents back up, to make up for half the resize cursor offset */
-.fsbl-header-right > * {
-	margin-top: -2px;
-}
-
-html.desktop-active .fsbl-tab-region-drag-area {
-	background-color: var(--titleBar-background-inactive-color);
-}
-
-.tab-drop-region {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 30000;
-}
-
-.fsbl-icon {
-	position: relative;
-	color: var(--titleBar-inactive-font-color);
-	font-size: var(--titleBar-icon-font-size);
-	width: 10px;
-	padding: 0 6px;
-	height: calc(100% + 1px);
-	margin-top: -3px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	transition: background 0.2s ease;
-	cursor: pointer;
-	/* stylelint-disable-next-line declaration-no-important */
-	box-sizing: content-box !important;
-}
-
-.fsbl-icon svg path {
-	fill: var(--titlebar-icon-color);
-}
-
-.fsbl-icon[data-hover="true"] {
-	color: var(--titlebar-icon-hover-color);
-}
-
-/* So it sits over the border */
-.fsbl-icon.fsbl-close {
-	margin-right: -1px;
-}
-
-.fsbl-icon.fsbl-close[data-hover="true"] {
-	color: var(--titleBar-button-hover-negative-color);
-}
-
-html.desktop-active .fsbl-icon.fsbl-close[data-hover="true"] {
-	color: var(--titleBar-button-hover-negative-color);
-}
-
-.fsbl-icon-highlighted {
-	transition: background-color 300ms ease-in-out;
-	background-color: var(--titleBar-button-highlight-inactive-color);
-	border-radius: 25px;
-	color: var(--titlebar-icon-hover-color);
-}
-
-html.desktop-active .fsbl-icon-highlighted {
-	background-color: var(--titleBar-button-highlight-active-color);
-}
-
-.fsbl-minimize {
-	align-items: center;
-	margin-top: -2px;
-	transition: 0.2s all;
-}
-
-.fsbl-ejector {
-	transition: background-color 300ms ease-in-out;
-	background-color: var(--titleBar-button-highlight-active-color);
-}
-
-.linkerSection {
-	display: flex;
-	height: 100%;
-	cursor: pointer;
-}
-
-.linker-groups {
-	height: 100%;
-	display: flex;
-	flex-direction: row;
-	align-items: flex-start;
-	margin-top: -2px;
-}
-
-.linker-group {
-	width: 3px;
-	height: 13px;
-	margin-left: 3px;
-	border-radius: 4px;
-	border: 1px solid transparent;
-	box-sizing: content-box; /* otherwise any box-sizing on the page can override how our linker appears */
-}
-
-.linker-group-accessible {
-	/* stylelint-disable-next-line declaration-no-important */
-	width: 1em !important;
-	padding-bottom: 4px;
-	margin-bottom: 4px;
-	color: var(--titleBar-linker-font-color);
-}
-
-.linkerContainer {
-	justify-content: center;
-	align-items: flex-start;
-}
-
-.linker-group:hover {
-	cursor: pointer;
-	border: 1px solid var(--content-button-neutral-hover-color);
-}
-
-.linker-group:nth-last-child(1) {
-	margin-right: 5px;
-}
-
-.fsbl-linker {
-	cursor: pointer;
-	display: flex;
-
-	/* So it sits over the border */
-	align-items: center;
-	justify-content: center;
-	align-content: center;
-	transition: background 0.3s ease;
-	position: relative;
-	width: 12px;
-	border-radius: 20px;
-	margin-right: 2px;
-}
-
-.fsbl-share {
-	cursor: pointer;
-	display: flex;
-
-	/* So it sits over the border */
-	align-items: center;
-	justify-content: center;
-	align-content: center;
-	transition: background 0.3s ease;
-	position: relative;
-	width: 14px;
-	border-radius: 20px;
-	margin-right: 2px;
-}
-
-.fsbl-share > svg {
-	margin-top: 1px;
-}
-
-.fsbl-linker svg #prefix__a {
-	fill: var(--titleBar-linker-font-color);
-}
-
-.fsbl-linker svg #prefix__b {
-	fill: var(--titleBar-linker-font-color-blur);
-}
-
-.fsbl-linker:hover,
-.fsbl-linker[data-hover="true"], /* deprecated */
-.fsbl-share[data-hover="true"] {
-	background-color: var(--titleBar-button-hover-active-color);
-}
-
-.ff-minimize {
-	padding-bottom: 3px;
-}
-
-.ff-linker::before {
-	padding-top: 3px;
-}
-
-.ff-share::before {
-	padding-top: 3px;
-}
-
-.ff-maximize,
-.ff-close,
-.ff-detached,
-.ff-attached {
-	padding-top: 2px;
-	transition: 0.2s all;
-}
-
-.ff-always-on-top {
-	padding-top: 3px;
-	font-size: 11px;
-}
-
-.ff-restore {
-	padding-top: 4px;
-}
-
-.fsbl-tab {
-	height: 100%;
-	padding-left: 8px;
-	position: relative;
-	display: inline-flex;
-	align-content: center;
-	align-items: center;
-	vertical-align: top;
-	background-color: var(--titlebar-tab-inactive-background-color);
-	color: var(--titlebar-tab-inactive-font-color);
-	border-top-right-radius: 10px;
-	border-top-left-radius: 10px;
-	user-select: none;
-	box-sizing: border-box;
-	justify-content: flex-start;
-	transition: color 0.2s ease;
-}
-
-.fsbl-active-tab {
-	background-color: var(--titlebar-tab-active-background-color);
-	color: var(--titlebar-tab-active-font-color);
-}
-
-.fsbl-tab[data-hover="true"] {
-	background-color: var(--titlebar-tab-hover-background-color);
-	color: var(--titlebar-tab-hover-font-color);
-}
-
-.tab-region-wrapper {
-	display: flex;
-	max-width: 90%;
-}
-
-/* When there are multiple tabs, no border for the last tab on the right side. */
-.fsbl-tabs-multiple .tab-region-wrapper > div:last-child {
-	border-right: none;
-}
-
-.fsbl-tab-area {
-	height: 100%;
-	display: flex;
-	width: 100%;
-	position: absolute;
-	left: 0;
-	overflow: scroll;
-}
-
-.fsbl-tab-area::-webkit-scrollbar {
-	display: none;
-}
-
-.fsbl-tab-editor {
-	position: relative;
-	z-index: 29999;
-	overflow: auto;
-}
-
-.fsbl-tab-title {
-	text-align: left;
-	padding-left: 1px;
-	min-width: 0;
-	color: var(--titlebar-tab-inactive-font-color);
-	display: flex;
-	align-items: center;
-}
-
-/* The block below allows for a flex-child to have text truncated with an ellipsis. */
-.fsbl-tab-title .title-text {
-	flex: 1;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-html.desktop-active .fsbl-active-tab .fsbl-tab-title {
-	color: var(--titlebar-tab-active-font-color);
-}
-
-.fsbl-tab-close {
-	font-size: 8px;
-	padding: 0 10px;
-	visibility: hidden;
-	cursor: pointer;
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	position: absolute;
-	right: 0;
-	z-index: 30001;
-}
-
-.fsbl-tab-close:hover {
-	-webkit-text-stroke: 1px;
-}
-
-.fsbl-tab:hover > .fsbl-tab-close {
-	visibility: visible;
-}
-
-.fsbl-tab-logo {
-	margin: 0 7px;
-	padding-top: 3px;
-	width: auto;
-	height: auto;
-	color: var(--titlebar-tab-icon-font-color);
-}
-
-.fsbl-tab-logo i {
-	font-size: 14px;
-}
-
-.fsbl-tab-logo img {
-	height: 18px;
-	width: 18px;
-}
-
-.fsbl-tab .fsbl-tab-style {
-	position: relative;
-	height: 100%;
-	left: 0;
-}
-
-.fsbl-tab-region-drag-area::before {
-	content: "a";
-	visibility: hidden;
-}
-
-/* Without content, the ghost-tab caused really strange sizing behaviors. */
-.ghost-tab::before {
-	content: "a";
-	visibility: hidden;
-}
-
-.ghost-tab {
-	background-color: var(--titlebar-tab-ghost-background-color);
-	border-right: 1px solid var(--titlebar-tab-ghost-border-colorcolor);
-	border-top: 1px solid var(--titlebar-tab-ghost-border-color);
-	width: 175px;
-	opacity: 0.7;
-	position: relative;
-	height: 100%;
-	left: 0;
-}
-
-/* Styles the zoom pop up */
-.fsbl-zoom-popup {
-	display: none;
-	position: absolute;
-	top: -15px;
-	right: 10px;
-	background-color: var(--tertiary-background-color);
-	padding: 5px;
-	color: var(--font-color);
-	opacity: 0.8;
-	font-size: 0.9em;
-}
-
-.fsbl-zoom-popup button {
-	width: unset;
-	font-size: unset;
-	padding: 1px 5px;
-	margin: 0 2px;
-}
-
-.fsbl-zoom-popup-text {
-	margin-left: 3px;
-}
-
-.fsbl-zoom-popup-title {
-	margin-left: 0;
-}
-
-.fsbl-zoom-popup-heading {
-	margin-left: 4px;
-	margin-bottom: 4px;
-}
-
-/* Responsive Sizing */
-
-/* At 345px, the Drag-to-Share icon will be removed. */
-@media screen and (min-width: 0) and (max-width: 345px) {
-	.fsbl-icon.ff-share {
-		/* stylelint-disable-next-line declaration-no-important */
-		display: none !important;
-	}
-
-	.fsbl-tabs-multiple .fsbl-header-right {
-		padding-left: 70px; /* leave some space for a user to grab */
-	}
-
-	.fsbl-header-title {
-		max-width: 50%;
-	}
-}
-
-/* At 310px, the left section of the header will be removed. */
-@media screen and (min-width: 0) and (max-width: 310px) {
-	.fsbl-header-left {
-		/* stylelint-disable-next-line declaration-no-important */
-		display: none !important;
-	}
-
-	.fsbl-tabs-multiple .fsbl-header-right {
-		padding-left: 60px; /* leave some space for a user to grab */
-	}
-}
-
-/* At 280px, the docking icon will be removed. */
-@media screen and (min-width: 0) and (max-width: 280px) {
-	.fsbl-icon.ff-detached,
-	.fsbl-icon.ff-attached {
-		/* stylelint-disable-next-line declaration-no-important */
-		display: none !important;
-	}
-
-	.fsbl-tabs-multiple .fsbl-header-right {
-		padding-left: 50px; /* this will leave some space for window dragging */
-	}
-}
-
-/* At 245px, the maximize icon will be removed. */
-@media screen and (min-width: 0) and (max-width: 245px) {
-	.fsbl-icon.fsbl-maximize {
-		/* stylelint-disable-next-line declaration-no-important */
-		display: none !important;
-	}
-
-	.fsbl-tabs-multiple .fsbl-header-right {
-		padding-left: 40px; /* this will leave some space for window dragging */
-	}
-}
-
-/* At 210px, all other icons icon will be removed. */
-@media screen and (min-width: 0) and (max-width: 210px) {
-	.fsbl-icon.fsbl-minimize {
-		/* stylelint-disable-next-line declaration-no-important */
-		display: none !important;
-	}
-
-	.fsbl-icon.fsbl-always-on-top {
-		/* stylelint-disable-next-line declaration-no-important */
-		display: none !important;
-	}
-
-	.icon-avatar-wrapper {
-		/* stylelint-disable-next-line declaration-no-important */
-		display: none !important;
-	}
-
-	.fsbl-tabs-multiple .fsbl-header-right {
-		padding-left: 30px; /* this will leave some space for window dragging */
-	}
-
-	.fsbl-header-title {
-		max-width: 25%;
-	}
-}
-
-.finsemble-toolbar .icon-avatar {
-	padding: 3px;
-	font-size: 7px;
-	position: relative;
-	top: -1px;
-}
-
-.finsemble-toolbar .icon-avatar > i {
-	position: relative;
-	top: 1px;
-}
-
-#title_editor_input {
-	font-size: 12px;
-	padding: 2px 10px;
-	width: 80%;
-	border: none;
-	border-bottom: 2px solid #73c3ff;
-	color: white;
-	transition: none;
-	background: transparent;
-}
-
-input.tab__input:focus {
-	outline: none;
-	animation: input-highlighter 0.3s ease;
-}
-
-@keyframes input-highlighter {
-	from {
-		background: #527bae;
-		width: 0;
-	}
-
-	to {
-		width: 80%;
-		background: transparent;
-	}
-}

package/react/assets/icons/always-on-top.svg

@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<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 12 11" style="enable-background:new 0 0 12 11;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-</style>
-<g>
-	<path class="st0" d="M6,10.9c0,0-0.1,0-0.1,0L0.1,8C0,8,0,7.9,0,7.8c0-0.1,0-0.2,0.1-0.2l2.6-1.2c0,0,0.1,0,0.2,0S3,6.4,3,6.5
-		c0,0,0,0.1,0,0.2S3,6.7,3,6.7l-2.2,1L6,10.4l5.3-2.6L9,6.7C8.9,6.6,8.9,6.5,8.9,6.4C9,6.3,9.1,6.2,9.2,6.3l2.7,1.3
-		C12,7.7,12,7.7,12,7.8S12,8,11.9,8L6,10.9C6.1,10.9,6,10.9,6,10.9z M7.6,3.6H7.3V2.1c0.2,0,0.4-0.1,0.5-0.3S8,1.4,8,1.2V1
-		c0-0.2-0.1-0.5-0.3-0.6S7.4,0.1,7.1,0.1H4.9c-0.2,0-0.5,0.1-0.6,0.2S4,0.8,4,1v0.2c0,0.2,0.1,0.4,0.2,0.6S4.5,2,4.7,2.1v1.5H4.4
-		c-0.2,0-0.5,0.1-0.6,0.3S3.5,4.3,3.5,4.5v0.1c0,0.2,0.1,0.5,0.3,0.6s0.4,0.3,0.6,0.3h1.4v2c0,0.2,0.1,0.2,0.2,0.2s0.2-0.1,0.2-0.2
-		v-2h1.4c0.2,0,0.5-0.1,0.6-0.3s0.3-0.4,0.3-0.6V4.5c0-0.2-0.1-0.5-0.2-0.6S7.9,3.6,7.6,3.6z M8.1,4.7c0,0.1,0,0.2-0.1,0.3
-		S7.7,5.1,7.6,5.1H4.5c-0.1,0-0.2,0-0.3-0.1S4,4.8,4,4.7V4.6c0-0.1,0-0.2,0.1-0.3s0.2-0.1,0.3-0.1H5c0.2,0,0.2-0.1,0.2-0.2v-2
-		c0-0.2-0.1-0.2-0.2-0.2H4.9c-0.1,0-0.2,0-0.3-0.1S4.5,1.3,4.5,1.2V1c0-0.1,0-0.2,0.1-0.3s0.2-0.1,0.3-0.1h2.2c0.1,0,0.2,0,0.3,0.1
-		S7.5,0.9,7.5,1v0.2c0,0.1,0,0.2-0.1,0.3S7.2,1.7,7.1,1.7h0c-0.2,0-0.2,0.1-0.2,0.2v2c0,0.2,0.1,0.2,0.2,0.2h0.5
-		c0.1,0,0.2,0,0.3,0.1s0.1,0.2,0.1,0.3V4.7z"/>
-</g>
-</svg>

package/react/assets/icons/caret.svg

@@ -1,7 +0,0 @@
-<svg width="10px" height="9px" viewBox="0 0 10 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="SDD-visual-2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="mm_Applications-Native-Open" transform="translate(-229.000000, -821.000000)" fill="#D8D8D8">
-            <polygon id="Triangle-Copy-5" transform="translate(234.000000, 825.500000) rotate(-180.000000) translate(-234.000000, -825.500000) " points="234 821 239 830 229 830 232.422175 823.840085"></polygon>
-        </g>
-    </g>
-</svg>