@finsemble/finsemble-ui 6.3.1 → 6.4.0

package/react/assets/css/authentication.css

@@ -1,78 +1,78 @@
-/*!
- * authentication.css
- * Copyright 2017 - 2020 by ChartIQ, Inc.
- * All rights reserved.
- */
-.fsbl-company-logo {
-	content: url("../img/cosaic-banner-100x20.png");
-	width: 100px;
-	height: 20px;
-}
-
-.fsbl-auth-logo {
-	content: url("../img/finsembleDarkBG_Solo@1.5x.png");
-	width: 154px;
-	height: 173px;
-	margin-top: 20px;
-	margin-bottom: 20px;
-}
-
-.fsbl-auth-wrapper {
-	padding-top: 10px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
-/* Override defaults from dialogs.css which assumes flex placement */
-.fsbl-button {
-	margin: 20px 0px;
-	display: block;
-	flex-direction: initial;
-}
-
-.fsbl-auth-top {
-	display: flex;
-	justify-content: space-between;
-	padding: 10px 10px 5px 0px;
-	width: 95%;
-}
-
-.fsbl-close {
-	cursor: pointer;
-	display: flex;
-	justify-content: flex-end;
-	align-items: flex-start;
-	flex-direction: column;
-	height: 100%;
-}
-
-.ff-close:hover {
-	color: var(--content-close-hover-color);
-}
-
-/* Override default body.dialog settings */
-body.authentication .fsbl-auth-input {
-	padding: 6px 0px;
-	margin-top: 3px;
-}
-
-body.authentication form {
-	width: 65%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
-.fsbl-input-error-message {
-	color: var(--dialog-input-border-error-color);
-	font-size: small;
-}
-
-body.authentication {
-	background: var(--dialog-background-color);
-}
-
-::-webkit-input-placeholder {
-	text-align: left;
-}
+/*!
+ * authentication.css
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+.fsbl-company-logo {
+	content: url("../img/cosaic-banner-100x20.png");
+	width: 100px;
+	height: 20px;
+}
+
+.fsbl-auth-logo {
+	content: url("../img/finsembleDarkBG_Solo@1.5x.png");
+	width: 154px;
+	height: 173px;
+	margin-top: 20px;
+	margin-bottom: 20px;
+}
+
+.fsbl-auth-wrapper {
+	padding-top: 10px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+/* Override defaults from dialogs.css which assumes flex placement */
+.fsbl-button {
+	margin: 20px 0px;
+	display: block;
+	flex-direction: initial;
+}
+
+.fsbl-auth-top {
+	display: flex;
+	justify-content: space-between;
+	padding: 10px 10px 5px 0px;
+	width: 95%;
+}
+
+.fsbl-close {
+	cursor: pointer;
+	display: flex;
+	justify-content: flex-end;
+	align-items: flex-start;
+	flex-direction: column;
+	height: 100%;
+}
+
+.ff-close:hover {
+	color: var(--content-close-hover-color);
+}
+
+/* Override default body.dialog settings */
+body.authentication .fsbl-auth-input {
+	padding: 6px 0px;
+	margin-top: 3px;
+}
+
+body.authentication form {
+	width: 65%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.fsbl-input-error-message {
+	color: var(--dialog-input-border-error-color);
+	font-size: small;
+}
+
+body.authentication {
+	background: var(--dialog-background-color);
+}
+
+::-webkit-input-placeholder {
+	text-align: left;
+}

package/react/assets/css/button.css

@@ -1,220 +1,220 @@
-/* Dropdown button */
-.finsemble-dropdown__btn {
-	background-color: var(--core-primary);
-	border-radius: 12px;
-	cursor: pointer;
-	display: flex;
-	flex-direction: row;
-	height: fit-content;
-	justify-content: flex-start;
-	min-width: 58px;
-	padding: 5px 8px;
-	position: relative;
-}
-
-.finsemble-dropdown__btn:hover,
-.finsemble-dropdown__btn.active {
-	background-color: var(--core-primary-2);
-}
-
-.finsemble-dropdown__btn .finsemble-dropdown__btn-options {
-	background-color: var(--core-primary);
-	border-radius: 4px;
-	display: flex;
-	flex-direction: column;
-	font-size: var(--font-size);
-	max-width: 120px;
-	min-width: 80px;
-	padding: 10px 5px;
-	position: absolute;
-	right: 3px;
-	text-align: right;
-	top: 28px;
-	white-space: nowrap;
-	z-index: 999;
-}
-
-.finsemble-dropdown__btn-options .finsemble-dropdown__btn-option {
-	padding: 5px;
-}
-
-.finsemble-dropdown__btn-options .finsemble-dropdown__btn-option:hover,
-.finsemble-dropdown__btn-options .finsemble-dropdown__btn-option[aria-selected="true"] {
-	background-color: var(--core-primary-2);
-	border-radius: 4px;
-}
-
-.finsemble-dropdown__btn.push-right i::before {
-	margin: 0 5px;
-}
-
-.finsemble-dropdown__btn.push-right i {
-	margin-left: auto;
-}
-
-.finsemble-dropdown__btn.push-right i.ff-caret-up::before {
-	vertical-align: bottom;
-}
-
-.finsemble-dropdown__btn.core-primary-2 {
-	background-color: var(--core-primary-2);
-}
-
-/* Dropdown Action Button */
-.finsemble-dropdown-action__btn-container {
-	align-items: flex-end;
-	display: flex;
-	flex-direction: column;
-	position: relative;
-}
-
-.finsemble-dropdown-action__btn {
-	align-items: center;
-	background-color: var(--core-primary-3);
-	border-radius: 5px;
-	cursor: pointer;
-	display: flex;
-	font-size: var(--font-size);
-	justify-content: center;
-	margin-bottom: 5px;
-	width: 76px;
-}
-
-.finsemble-dropdown-action__btn .expand-options {
-	justify-content: center;
-	display: flex;
-	height: 100%;
-	align-items: center;
-}
-
-.finsemble-dropdown-action__btn span.btn-label {
-	overflow: hidden;
-	text-align: center;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	width: 100%;
-	padding: 4px;
-	color: var(--font-color);
-}
-
-.finsemble-dropdown-action__btn {
-	background-color: var(--accent-primary);
-}
-
-.finsemble-dropdown-action__btn:hover {
-	background-color: var(--accent-primary-1);
-}
-
-.finsemble-dropdown-action__btn span.btn-label {
-	margin: auto;
-}
-
-.finsemble-dropdown-action__btn-options {
-	background-color: var(--accent-primary-1);
-	border-radius: 4px;
-	display: flex;
-	flex-direction: column;
-	font-size: var(--font-size);
-	max-width: 120px;
-	margin-top: 1px;
-	min-width: 80px;
-	position: absolute;
-	text-align: right;
-	top: 25px;
-	white-space: nowrap;
-}
-
-.finsemble-dropdown-action__btn-option {
-	cursor: pointer;
-	height: 26px;
-	border-radius: 4px;
-	line-height: 26px;
-	overflow: hidden;
-	padding: 0 10px;
-	text-overflow: ellipsis;
-	color: var(--font-color);
-}
-
-.finsemble-dropdown-action__btn-option:hover {
-	background-color: var(--accent-primary);
-}
-
-.caret {
-	border-left: 5px solid transparent;
-	border-right: 5px solid transparent;
-	border-top: 5px solid var(--font-color);
-	height: 0;
-	margin-right: 5px;
-	width: 0;
-}
-
-.separator {
-	background: var(--font-color);
-	content: "";
-	display: inline-block;
-	height: 19px;
-	margin: 0px 4px;
-	vertical-align: top;
-	width: 1px;
-}
-
-.finsemble-dropdown-action__btn.push-right {
-	margin-left: auto;
-}
-
-/* Navigation Button */
-.finsemble-navigation__btn {
-	align-items: center;
-	background-color: var(--core-primary-2);
-	border-radius: 12px;
-	cursor: pointer;
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-	width: 58px;
-	padding: 5px 5px 3px;
-	margin: 0 10px;
-}
-
-.finsemble-navigation__btn:hover {
-	background-color: var(--core-primary-3);
-}
-
-.finsemble-navigation__btn-label {
-	margin: 0 5px 2px;
-}
-
-/* Button */
-.finsemble__btn {
-	align-items: center;
-	background-color: var(--core-primary-3);
-	border-radius: 5px;
-	cursor: pointer;
-	display: flex;
-	font-size: var(--font-size);
-	justify-content: center;
-	margin-bottom: 5px;
-	width: 76px;
-}
-
-.finsemble__btn span.btn-label {
-	overflow: hidden;
-	text-align: center;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	width: 100%;
-	padding: 4px;
-	color: var(--font-color);
-}
-
-.finsemble__btn:hover {
-	background-color: var(--core-primary-2);
-}
-
-.finsemble__btn.accent-negative {
-	background-color: var(--accent-negative);
-}
-
-.finsemble__btn.accent-negative:hover {
-	background-color: var(--accent-negative-1);
-}
+/* Dropdown button */
+.finsemble-dropdown__btn {
+	background-color: var(--core-primary);
+	border-radius: 12px;
+	cursor: pointer;
+	display: flex;
+	flex-direction: row;
+	height: fit-content;
+	justify-content: flex-start;
+	min-width: 58px;
+	padding: 5px 8px;
+	position: relative;
+}
+
+.finsemble-dropdown__btn:hover,
+.finsemble-dropdown__btn.active {
+	background-color: var(--core-primary-2);
+}
+
+.finsemble-dropdown__btn .finsemble-dropdown__btn-options {
+	background-color: var(--core-primary);
+	border-radius: 4px;
+	display: flex;
+	flex-direction: column;
+	font-size: var(--font-size);
+	max-width: 120px;
+	min-width: 80px;
+	padding: 10px 5px;
+	position: absolute;
+	right: 3px;
+	text-align: right;
+	top: 28px;
+	white-space: nowrap;
+	z-index: 999;
+}
+
+.finsemble-dropdown__btn-options .finsemble-dropdown__btn-option {
+	padding: 5px;
+}
+
+.finsemble-dropdown__btn-options .finsemble-dropdown__btn-option:hover,
+.finsemble-dropdown__btn-options .finsemble-dropdown__btn-option[aria-selected="true"] {
+	background-color: var(--core-primary-2);
+	border-radius: 4px;
+}
+
+.finsemble-dropdown__btn.push-right i::before {
+	margin: 0 5px;
+}
+
+.finsemble-dropdown__btn.push-right i {
+	margin-left: auto;
+}
+
+.finsemble-dropdown__btn.push-right i.ff-caret-up::before {
+	vertical-align: bottom;
+}
+
+.finsemble-dropdown__btn.core-primary-2 {
+	background-color: var(--core-primary-2);
+}
+
+/* Dropdown Action Button */
+.finsemble-dropdown-action__btn-container {
+	align-items: flex-end;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+}
+
+.finsemble-dropdown-action__btn {
+	align-items: center;
+	background-color: var(--core-primary-3);
+	border-radius: 5px;
+	cursor: pointer;
+	display: flex;
+	font-size: var(--font-size);
+	justify-content: center;
+	margin-bottom: 5px;
+	width: 76px;
+}
+
+.finsemble-dropdown-action__btn .expand-options {
+	justify-content: center;
+	display: flex;
+	height: 100%;
+	align-items: center;
+}
+
+.finsemble-dropdown-action__btn span.btn-label {
+	overflow: hidden;
+	text-align: center;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 100%;
+	padding: 4px;
+	color: var(--font-color);
+}
+
+.finsemble-dropdown-action__btn {
+	background-color: var(--accent-primary);
+}
+
+.finsemble-dropdown-action__btn:hover {
+	background-color: var(--accent-primary-1);
+}
+
+.finsemble-dropdown-action__btn span.btn-label {
+	margin: auto;
+}
+
+.finsemble-dropdown-action__btn-options {
+	background-color: var(--accent-primary-1);
+	border-radius: 4px;
+	display: flex;
+	flex-direction: column;
+	font-size: var(--font-size);
+	max-width: 120px;
+	margin-top: 1px;
+	min-width: 80px;
+	position: absolute;
+	text-align: right;
+	top: 25px;
+	white-space: nowrap;
+}
+
+.finsemble-dropdown-action__btn-option {
+	cursor: pointer;
+	height: 26px;
+	border-radius: 4px;
+	line-height: 26px;
+	overflow: hidden;
+	padding: 0 10px;
+	text-overflow: ellipsis;
+	color: var(--font-color);
+}
+
+.finsemble-dropdown-action__btn-option:hover {
+	background-color: var(--accent-primary);
+}
+
+.caret {
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 5px solid var(--font-color);
+	height: 0;
+	margin-right: 5px;
+	width: 0;
+}
+
+.separator {
+	background: var(--font-color);
+	content: "";
+	display: inline-block;
+	height: 19px;
+	margin: 0px 4px;
+	vertical-align: top;
+	width: 1px;
+}
+
+.finsemble-dropdown-action__btn.push-right {
+	margin-left: auto;
+}
+
+/* Navigation Button */
+.finsemble-navigation__btn {
+	align-items: center;
+	background-color: var(--core-primary-2);
+	border-radius: 12px;
+	cursor: pointer;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	width: 58px;
+	padding: 5px 5px 3px;
+	margin: 0 10px;
+}
+
+.finsemble-navigation__btn:hover {
+	background-color: var(--core-primary-3);
+}
+
+.finsemble-navigation__btn-label {
+	margin: 0 5px 2px;
+}
+
+/* Button */
+.finsemble__btn {
+	align-items: center;
+	background-color: var(--core-primary-3);
+	border-radius: 5px;
+	cursor: pointer;
+	display: flex;
+	font-size: var(--font-size);
+	justify-content: center;
+	margin-bottom: 5px;
+	width: 76px;
+}
+
+.finsemble__btn span.btn-label {
+	overflow: hidden;
+	text-align: center;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 100%;
+	padding: 4px;
+	color: var(--font-color);
+}
+
+.finsemble__btn:hover {
+	background-color: var(--core-primary-2);
+}
+
+.finsemble__btn.accent-negative {
+	background-color: var(--accent-negative);
+}
+
+.finsemble__btn.accent-negative:hover {
+	background-color: var(--accent-negative-1);
+}

package/react/assets/css/core/formElements.css

@@ -1,23 +1,23 @@
-/*!
- * formElements.css
- * Copyright 2017 - 2020 by ChartIQ, Inc.
- * All rights reserved.
- */
-
-.form-group {
-	/* display: flex; */
-	flex-direction: row;
-	margin: 16px 0px;
-	padding-right: 5px;
-	justify-content: center;
-}
-
-.form-group label {
-	padding-top: 7px;
-	flex: 0.4;
-}
-
-.form-group input,
-.form-group select {
-	flex: 0.65;
-}
+/*!
+ * formElements.css
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+
+.form-group {
+	/* display: flex; */
+	flex-direction: row;
+	margin: 16px 0px;
+	padding-right: 5px;
+	justify-content: center;
+}
+
+.form-group label {
+	padding-top: 7px;
+	flex: 0.4;
+}
+
+.form-group input,
+.form-group select {
+	flex: 0.65;
+}