@finsemble/finsemble-ui 6.4.0-beta.1 → 6.5.0

package/react/assets/css/toolbar.css

@@ -1,413 +1,413 @@
-/*!
- * toolbar.css
- * Copyright 2017 - 2020 by ChartIQ, Inc.
- * All rights reserved.
- */
-
-.finsemble-toolbar-body {
-	height: 100%;
-	margin: 0px;
-	font-weight: var(--toolbar-font-weight);
-	font-size: var(--toolbar-font-size);
-	color: var(--toolbar-font-color);
-	line-height: 1.3em;
-	vertical-align: middle;
-	-webkit-user-select: none;
-	overflow: hidden;
-}
-
-.finsemble-toolbar {
-	display: flex;
-	align-items: stretch;
-	width: 100%;
-	background: var(--toolbar-background-color);
-	color: var(--toolbar-font-color);
-	align-content: center;
-	height: var(--toolbar-height);
-}
-
-.finsemble-toolbar svg path {
-	fill: var(--toolbar-icon-color);
-}
-
-.fullHeightFlex {
-	height: 100%;
-	display: flex;
-}
-
-.finsemble-toolbar.horizontal {
-	flex-direction: row;
-}
-
-.finsemble-toolbar.vertical {
-	flex-direction: column;
-}
-
-.finsemble-toolbar-section {
-	display: flex;
-	flex-direction: row;
-	align-content: center;
-	align-items: stretch;
-	overflow: hidden;
-}
-
-.finsemble-toolbar-section.right {
-	margin-left: auto;
-	margin-right: 8px;
-	justify-content: flex-end;
-	order: 2;
-	flex: 0 0 auto;
-}
-
-.finsemble-toolbar-section.left {
-	order: 0;
-	justify-content: flex-start;
-	flex: 0 0 auto;
-}
-
-.finsemble-toolbar-section.center {
-	justify-content: flex-start;
-	order: 1;
-	flex: 1 1 auto;
-}
-
-.finsemble-toolbar-button {
-	padding: 0px 8px 2px 8px;
-	margin: 5px 0px;
-	border: 1px solid var(--toolbar-background-color);
-	display: flex;
-	align-items: center;
-	border-radius: 30px;
-	transition: all 0.1s ease;
-	position: relative;
-}
-
-.finsemble-toolbar-button-label {
-	font-size: var(--toolbar-font-size);
-	font-weight: var(--toolbar-font-weight);
-	text-align: left;
-	letter-spacing: 0.25px;
-	align-content: center;
-	display: block;
-}
-
-.finsemble-toolbar-button:hover {
-	background: var(--toolbar-button-hover-color);
-	border: 1px solid transparent;
-	cursor: pointer;
-}
-
-.finsemble-toolbar-button.selected {
-	background-color: var(--accent-primary-1) !important;
-}
-
-.finsemble-toolbar .resize-area {
-	height: 100%;
-	width: 4px;
-	max-width: 4px;
-	min-width: 4px;
-	background-color: var(--toolbar-resize-area-color);
-	position: absolute;
-	right: 0;
-}
-
-@media screen and (max-width: 270px) {
-	#advanced-app-launcher {
-		display: none !important;
-	}
-
-	.finsemble-toolbar-section.left .divider {
-		display: none;
-	}
-}
-
-@media screen and (max-width: 385px) {
-	.finsemble-toolbar-section.left .divider:last-of-type {
-		display: none;
-	}
-}
-@media screen and (max-width: 390px) {
-	/* hide buttons on right. show overflow. */
-	.finsemble-toolbar-section.center {
-		display: none;
-	}
-}
-
-.finsemble-toolbar-section.left > .finsemble-toolbar-button-label {
-	padding-top: 1px;
-	margin-top: 2px;
-	overflow: hidden;
-	text-align: center;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.finsemble-toolbar-workspace-button-label.finsemble-toolbar-button[data-hover="true"] {
-	background: var(--toolbar-button-hover-color);
-	border: 1px solid transparent;
-	cursor: pointer;
-}
-
-.finsemble-toolbar-button-mover {
-	height: 100%;
-	display: table-cell;
-	vertical-align: middle;
-}
-
-.finsemble-toolbar-button-icon {
-	height: 100%;
-	display: table-cell;
-	vertical-align: middle;
-}
-
-.finsemble-toolbar-button-icon.left {
-	padding-right: 5px;
-}
-
-.finsemble-toolbar-button-icon.right {
-	padding-left: 5px;
-}
-
-.divider {
-	display: flex;
-	align-self: center;
-}
-
-.divider:before {
-	height: 24px;
-	border-right: var(--toolbar-separator);
-	content: "";
-	margin: 0em 0.25em;
-}
-
-img.pinned-icon {
-	padding-top: 1px;
-	width: 18px;
-	height: 18px;
-	margin-top: -1px;
-}
-
-.pinned-icon {
-	color: var(--toolbar-icon-app-color);
-	font-size: var(--toolbar-icon-font-size);
-	padding-right: 6px;
-	margin-top: 13px;
-}
-
-.pinned-workspace-icon {
-	color: var(--toolbar-icon-workspace-color) !important;
-}
-
-.toolbar-button-label-left {
-	order: -1;
-}
-
-.toolbar-button-label-right {
-	order: 1;
-}
-
-.finsemble-button-label {
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	max-width: 190px;
-}
-
-.finsemble-toolbar-brand-logo {
-	width: var(--toolbar-brand-logo-width);
-	height: var(--toolbar-brand-logo-height);
-}
-
-/* Special tweaks for pinned icons */
-.ff-document-2 {
-	padding-bottom: 2px;
-}
-
-.ff-chart-pie {
-	font-size: 24px;
-}
-
-.ff-insiders-2 {
-	padding-top: 3px;
-}
-
-.ff-company {
-	padding-bottom: 2px;
-}
-
-.ff-minimize-all {
-	padding-top: 4px;
-}
-
-.ff-caret-down {
-	margin-top: 14px;
-}
-
-.finsemble-toolbar-drag-handle > svg {
-	width: 23px;
-	margin-top: -7px;
-}
-
-.finsemble-toolbar-drag-handle {
-	margin-left: 3px;
-	padding-left: 2px;
-	padding-right: 0px;
-	padding-top: 15px;
-	cursor: grab;
-}
-
-.finsemble-toolbar-drag-handle-native-movement > svg {
-	width: 23px;
-	margin-top: -7px;
-}
-
-.finsemble-toolbar-drag-handle-native-movement {
-	margin-left: 3px;
-	padding-left: 2px;
-	padding-right: 0px;
-	padding-top: 15px;
-	-webkit-app-region: drag;
-	cursor: grab;
-}
-
-.fsbl-share-scrim {
-	display: none !important;
-}
-
-.first-pinned-component {
-	margin-left: 0px !important;
-}
-
-.icon-only > i {
-	height: 22px;
-	font-size: var(--toolbar-icon-font-size);
-	width: auto;
-}
-
-.auto-arranged {
-	background-color: var(--accent-primary-1);
-}
-
-.searchSection {
-	position: relative;
-	max-width: 107px;
-	overflow: visible;
-	max-height: var(--toolbar-height);
-	width: 14px;
-	margin-bottom: 4px;
-}
-
-.searchSection:hover {
-	background-color: var(--search-hover-background-color);
-}
-
-.left.finsemble-toolbar-section {
-	overflow: visible;
-}
-
-.searchContainer {
-	display: flex;
-	margin: 0px 2px;
-	margin-top: -1px;
-}
-
-.searchInput {
-	position: absolute;
-	display: inline;
-	text-indent: 8px;
-	width: 107px;
-	height: var(--toolbar-height);
-	line-height: var(--toolbar-height);
-	background-color: transparent;
-	border-color: transparent;
-	z-index: 2;
-	overflow: hidden;
-	white-space: nowrap;
-	transition-timing-function: ease-in-out -0.1;
-	transition: width 0.5s, background-color 0s 0s;
-}
-
-.searchInput.full[contenteditable="true"]:empty:before {
-	content: attr(placeholder);
-}
-
-.searchInput.compact {
-	content: "";
-	padding-left: 9px;
-	width: 31px;
-	cursor: pointer;
-	color: transparent; /* hide the text when in compact mode */
-	/*transition: width .5s,background-color 0s .5s;*/
-}
-
-.searchInput.compact::before {
-	content: "";
-}
-
-.searchInput.full {
-	content: "";
-	padding-left: 9px;
-	padding-right: 9px;
-	width: 23px;
-	color: var(--search-input-background-color);
-	cursor: pointer;
-	transition: width 0.5s, background-color 0s 0.5s;
-}
-
-[contenteditable="true"] br {
-	display: none;
-}
-
-[contenteditable="true"] div {
-	display: none;
-}
-
-.searchInput.active {
-	display: inline-block;
-	left: 0px;
-	width: 349px;
-	text-align: left;
-	background-color: var(--search-input-background-color);
-	color: var(--search-input-font-color);
-	cursor: initial;
-	z-index: 99;
-}
-
-img {
-	user-drag: none;
-	user-select: none;
-	-moz-user-select: none;
-	-webkit-user-drag: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-}
-
-.finsemble-toolbar .ff-chevron-down {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	order: 1;
-	padding-left: 6px;
-	font-size: 8px;
-	padding-top: 3px;
-	color: var(--font-color-1);
-}
-
-.overflow .ff-chevron-down {
-	padding-left: 0px;
-	padding-right: 1px;
-}
-
-.notification-alert-dot {
-	border-radius: 100%;
-	background: var(--notification-alert-dot-color);
-	padding: 2px;
-	content: " ";
-	width: 4px;
-	height: 4px;
-	position: absolute;
-	right: 7px;
-	bottom: 2px;
-	margin: 0;
-	text-align: center;
-}
+/*!
+ * toolbar.css
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+
+.finsemble-toolbar-body {
+	height: 100%;
+	margin: 0px;
+	font-weight: var(--toolbar-font-weight);
+	font-size: var(--toolbar-font-size);
+	color: var(--toolbar-font-color);
+	line-height: 1.3em;
+	vertical-align: middle;
+	-webkit-user-select: none;
+	overflow: hidden;
+}
+
+.finsemble-toolbar {
+	display: flex;
+	align-items: stretch;
+	width: 100%;
+	background: var(--toolbar-background-color);
+	color: var(--toolbar-font-color);
+	align-content: center;
+	height: var(--toolbar-height);
+}
+
+.finsemble-toolbar svg path {
+	fill: var(--toolbar-icon-color);
+}
+
+.fullHeightFlex {
+	height: 100%;
+	display: flex;
+}
+
+.finsemble-toolbar.horizontal {
+	flex-direction: row;
+}
+
+.finsemble-toolbar.vertical {
+	flex-direction: column;
+}
+
+.finsemble-toolbar-section {
+	display: flex;
+	flex-direction: row;
+	align-content: center;
+	align-items: stretch;
+	overflow: hidden;
+}
+
+.finsemble-toolbar-section.right {
+	margin-left: auto;
+	margin-right: 8px;
+	justify-content: flex-end;
+	order: 2;
+	flex: 0 0 auto;
+}
+
+.finsemble-toolbar-section.left {
+	order: 0;
+	justify-content: flex-start;
+	flex: 0 0 auto;
+}
+
+.finsemble-toolbar-section.center {
+	justify-content: flex-start;
+	order: 1;
+	flex: 1 1 auto;
+}
+
+.finsemble-toolbar-button {
+	padding: 0px 8px 2px 8px;
+	margin: 5px 0px;
+	border: 1px solid var(--toolbar-background-color);
+	display: flex;
+	align-items: center;
+	border-radius: 30px;
+	transition: all 0.1s ease;
+	position: relative;
+}
+
+.finsemble-toolbar-button-label {
+	font-size: var(--toolbar-font-size);
+	font-weight: var(--toolbar-font-weight);
+	text-align: left;
+	letter-spacing: 0.25px;
+	align-content: center;
+	display: block;
+}
+
+.finsemble-toolbar-button:hover {
+	background: var(--toolbar-button-hover-color);
+	border: 1px solid transparent;
+	cursor: pointer;
+}
+
+.finsemble-toolbar-button.selected {
+	background-color: var(--accent-primary-1) !important;
+}
+
+.finsemble-toolbar .resize-area {
+	height: 100%;
+	width: 4px;
+	max-width: 4px;
+	min-width: 4px;
+	background-color: var(--toolbar-resize-area-color);
+	position: absolute;
+	right: 0;
+}
+
+@media screen and (max-width: 270px) {
+	#advanced-app-launcher {
+		display: none !important;
+	}
+
+	.finsemble-toolbar-section.left .divider {
+		display: none;
+	}
+}
+
+@media screen and (max-width: 385px) {
+	.finsemble-toolbar-section.left .divider:last-of-type {
+		display: none;
+	}
+}
+@media screen and (max-width: 390px) {
+	/* hide buttons on right. show overflow. */
+	.finsemble-toolbar-section.center {
+		display: none;
+	}
+}
+
+.finsemble-toolbar-section.left > .finsemble-toolbar-button-label {
+	padding-top: 1px;
+	margin-top: 2px;
+	overflow: hidden;
+	text-align: center;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.finsemble-toolbar-workspace-button-label.finsemble-toolbar-button[data-hover="true"] {
+	background: var(--toolbar-button-hover-color);
+	border: 1px solid transparent;
+	cursor: pointer;
+}
+
+.finsemble-toolbar-button-mover {
+	height: 100%;
+	display: table-cell;
+	vertical-align: middle;
+}
+
+.finsemble-toolbar-button-icon {
+	height: 100%;
+	display: table-cell;
+	vertical-align: middle;
+}
+
+.finsemble-toolbar-button-icon.left {
+	padding-right: 5px;
+}
+
+.finsemble-toolbar-button-icon.right {
+	padding-left: 5px;
+}
+
+.divider {
+	display: flex;
+	align-self: center;
+}
+
+.divider:before {
+	height: 24px;
+	border-right: var(--toolbar-separator);
+	content: "";
+	margin: 0em 0.25em;
+}
+
+img.pinned-icon {
+	padding-top: 1px;
+	width: 18px;
+	height: 18px;
+	margin-top: -1px;
+}
+
+.pinned-icon {
+	color: var(--toolbar-icon-app-color);
+	font-size: var(--toolbar-icon-font-size);
+	padding-right: 6px;
+	margin-top: 13px;
+}
+
+.pinned-workspace-icon {
+	color: var(--toolbar-icon-workspace-color) !important;
+}
+
+.toolbar-button-label-left {
+	order: -1;
+}
+
+.toolbar-button-label-right {
+	order: 1;
+}
+
+.finsemble-button-label {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	max-width: 190px;
+}
+
+.finsemble-toolbar-brand-logo {
+	width: var(--toolbar-brand-logo-width);
+	height: var(--toolbar-brand-logo-height);
+}
+
+/* Special tweaks for pinned icons */
+.ff-document-2 {
+	padding-bottom: 2px;
+}
+
+.ff-chart-pie {
+	font-size: 24px;
+}
+
+.ff-insiders-2 {
+	padding-top: 3px;
+}
+
+.ff-company {
+	padding-bottom: 2px;
+}
+
+.ff-minimize-all {
+	padding-top: 4px;
+}
+
+.ff-caret-down {
+	margin-top: 14px;
+}
+
+.finsemble-toolbar-drag-handle > svg {
+	width: 23px;
+	margin-top: -7px;
+}
+
+.finsemble-toolbar-drag-handle {
+	margin-left: 3px;
+	padding-left: 2px;
+	padding-right: 0px;
+	padding-top: 15px;
+	cursor: grab;
+}
+
+.finsemble-toolbar-drag-handle-native-movement > svg {
+	width: 23px;
+	margin-top: -7px;
+}
+
+.finsemble-toolbar-drag-handle-native-movement {
+	margin-left: 3px;
+	padding-left: 2px;
+	padding-right: 0px;
+	padding-top: 15px;
+	-webkit-app-region: drag;
+	cursor: grab;
+}
+
+.fsbl-share-scrim {
+	display: none !important;
+}
+
+.first-pinned-component {
+	margin-left: 0px !important;
+}
+
+.icon-only > i {
+	height: 22px;
+	font-size: var(--toolbar-icon-font-size);
+	width: auto;
+}
+
+.auto-arranged {
+	background-color: var(--accent-primary-1);
+}
+
+.searchSection {
+	position: relative;
+	max-width: 107px;
+	overflow: visible;
+	max-height: var(--toolbar-height);
+	width: 14px;
+	margin-bottom: 4px;
+}
+
+.searchSection:hover {
+	background-color: var(--search-hover-background-color);
+}
+
+.left.finsemble-toolbar-section {
+	overflow: visible;
+}
+
+.searchContainer {
+	display: flex;
+	margin: 0px 2px;
+	margin-top: -1px;
+}
+
+.searchInput {
+	position: absolute;
+	display: inline;
+	text-indent: 8px;
+	width: 107px;
+	height: var(--toolbar-height);
+	line-height: var(--toolbar-height);
+	background-color: transparent;
+	border-color: transparent;
+	z-index: 2;
+	overflow: hidden;
+	white-space: nowrap;
+	transition-timing-function: ease-in-out -0.1;
+	transition: width 0.5s, background-color 0s 0s;
+}
+
+.searchInput.full[contenteditable="true"]:empty:before {
+	content: attr(placeholder);
+}
+
+.searchInput.compact {
+	content: "";
+	padding-left: 9px;
+	width: 31px;
+	cursor: pointer;
+	color: transparent; /* hide the text when in compact mode */
+	/*transition: width .5s,background-color 0s .5s;*/
+}
+
+.searchInput.compact::before {
+	content: "";
+}
+
+.searchInput.full {
+	content: "";
+	padding-left: 9px;
+	padding-right: 9px;
+	width: 23px;
+	color: var(--search-input-background-color);
+	cursor: pointer;
+	transition: width 0.5s, background-color 0s 0.5s;
+}
+
+[contenteditable="true"] br {
+	display: none;
+}
+
+[contenteditable="true"] div {
+	display: none;
+}
+
+.searchInput.active {
+	display: inline-block;
+	left: 0px;
+	width: 349px;
+	text-align: left;
+	background-color: var(--search-input-background-color);
+	color: var(--search-input-font-color);
+	cursor: initial;
+	z-index: 99;
+}
+
+img {
+	user-drag: none;
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-drag: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+.finsemble-toolbar .ff-chevron-down {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	order: 1;
+	padding-left: 6px;
+	font-size: 8px;
+	padding-top: 3px;
+	color: var(--font-color-1);
+}
+
+.overflow .ff-chevron-down {
+	padding-left: 0px;
+	padding-right: 1px;
+}
+
+.notification-alert-dot {
+	border-radius: 100%;
+	background: var(--notification-alert-dot-color);
+	padding: 2px;
+	content: " ";
+	width: 4px;
+	height: 4px;
+	position: absolute;
+	right: 7px;
+	bottom: 2px;
+	margin: 0;
+	text-align: center;
+}