@finsemble/finsemble-ui 6.3.1 → 6.4.0

package/react/components/common/css/button.css

@@ -1,164 +1,166 @@
-button {
-	border-radius: 3px;
-	font-family: OpenSans;
-	font-weight: 600;
-	padding: 0.5em 1em;
-	background-color: transparent;
-	border: 0px solid transparent;
-	color: #fff;
-	font-size: 0.9rem;
-	transition: all 0.2s ease-in;
-	cursor: pointer;
-}
-
-.button-container-secondary,
-.button-container-tile,
-.button-container-primary,
-.button-container-icon,
-.button-container-danger,
-.button-container-ghost,
-.button-container-danger-ghost {
-	display: inline-block;
-}
-
-.button-icon-after,
-.button-icon-before {
-	margin: 0px 0.46rem;
-}
-
-.button-icon-after {
-	margin-right: 0px;
-}
-
-.button-icon-before {
-	margin-left: 0px;
-}
-
-.button-container-icon button {
-	font-size: 1.1rem;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.button-container-icon .finsemble-icon-trash {
-	color: var(--core-primary-5);
-}
-.button-container-icon:hover .finsemble-icon-trash {
-	color: #f26666;
-}
-.button-container-icon .finsemble-icon-life-ring {
-	color: var(--core-primary-5);
-}
-.button-container-icon:hover .finsemble-icon-life-ring {
-	color: inherit;
-}
-.button-container-icon .finsemble-icon-copy {
-	color: var(--core-primary-5);
-}
-.button-container-icon:hover .finsemble-icon-copy {
-	color: inherit;
-}
-
-.button-container-icon span.finsemble-icon {
-	cursor: pointer;
-}
-
-/* Primary */
-
-.button-container-primary button {
-	border-radius: 2em;
-	background-color: #373b43;
-	padding: 1.2em 1.1em 1.2em 1em;
-	display: flex;
-	height: 1em;
-	font-size: 12px;
-	justify-content: space-around;
-	align-items: center;
-	z-index: 100;
-	transition: all 0.2s ease-in;
-}
-
-.button-container-primary button:hover {
-	background-color: #3d4455;
-}
-
-.button-container-primary button[disabled] {
-	color: #acb2c0;
-	background-color: #3d4455;
-	cursor: default;
-}
-
-/* Secondary */
-
-.button-container-secondary button {
-	color: #000;
-	background-color: #42a5ba;
-}
-
-.button-container-secondary button:hover {
-	background-color: #36788b;
-}
-
-.button-container-secondary button[disabled] {
-	color: #000000b3;
-	background-color: #3d4455;
-	cursor: default;
-}
-
-/* Tile */
-
-.button-container-tile button {
-	width: 13.6em;
-	height: 8.5em;
-	flex-grow: 0;
-	flex-shrink: 0;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	padding-top: 0.5em;
-	margin: 0.5em 0.5em;
-	background-color: #373b43;
-	border-radius: 0.5em;
-	font-size: 1.1em;
-	transition: all 0.25s;
-	border: 2px solid transparent;
-	max-width: 30em;
-	display: flex;
-}
-
-.button-container-tile button:hover {
-	border-color: #36788b;
-}
-
-.button-container-tile div {
-	margin-top: 0.5em;
-}
-
-.button-container-tile-icon {
-	font-size: 2.5em;
-}
-
-/* Danger */
-
-.button-container-danger button {
-	background-color: #f26666;
-	color: #000;
-}
-
-.button-container-danger button:hover {
-	background-color: #b54f4f;
-}
-
-/* Ghost */
-
-.button-container-ghost button:hover,
-.button-container-danger-ghost button:hover {
-	text-decoration: underline;
-}
-
-/* Danger Ghost */
-
-.button-container-danger-ghost button {
-	color: #f26666;
-}
+button {
+	border-radius: 3px;
+	font-family: OpenSans;
+	font-weight: 600;
+	padding: 0.5em 1em;
+	background-color: transparent;
+	border: 0px solid transparent;
+	color: #fff;
+	font-size: 0.9rem;
+	transition: all 0.2s ease-in;
+	cursor: pointer;
+}
+
+.button-container-secondary,
+.button-container-tile,
+.button-container-primary,
+.button-container-icon,
+.button-container-danger,
+.button-container-ghost,
+.button-container-danger-ghost {
+	display: inline-block;
+}
+
+.button-icon-after,
+.button-icon-before {
+	margin: 0px 0.46rem;
+}
+
+.button-icon-after {
+	margin-right: 0px;
+}
+
+.button-icon-before {
+	margin-left: 0px;
+}
+
+.button-container-icon button {
+	font-size: 1.1rem;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.button-container-icon .finsemble-icon-trash {
+	color: var(--core-primary-5);
+}
+.button-container-icon:hover .finsemble-icon-trash {
+	color: #f26666;
+}
+.button-container-icon .finsemble-icon-life-ring {
+	color: var(--core-primary-5);
+}
+.button-container-icon:hover .finsemble-icon-life-ring {
+	color: inherit;
+}
+.button-container-icon .finsemble-icon-copy {
+	color: var(--core-primary-5);
+}
+.button-container-icon:hover .finsemble-icon-copy {
+	color: inherit;
+}
+
+.button-container-icon span.finsemble-icon {
+	cursor: pointer;
+}
+
+/* Primary */
+
+.button-container-primary button {
+	border-radius: 2em;
+	background-color: #171a20;
+	padding: 1.2em 1.1em 1.2em 1em;
+	display: flex;
+	height: 1em;
+	font-size: 12px;
+	justify-content: space-around;
+	align-items: center;
+	z-index: 100;
+	transition: all 0.2s ease-in;
+}
+
+.button-container-primary button:hover {
+	background-color: #acb2c0;
+}
+
+.button-container-primary button[disabled] {
+	color: #acb2c0;
+	background-color: #acb2c0;
+	cursor: default;
+}
+
+/* Secondary */
+
+.button-container-secondary button {
+	color: #000;
+	background-color: #42a5ba;
+}
+
+.button-container-secondary button:hover {
+	background-color: #36788b;
+}
+
+.button-container-secondary button[disabled] {
+	color: #000000b3;
+	background-color: #acb2c0;
+	cursor: default;
+}
+
+/* Tile */
+
+.button-container-tile button {
+	width: 13.6em;
+	height: 8.5em;
+	flex-grow: 0;
+	flex-shrink: 0;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding-top: 0.5em;
+	margin: 0.5em 0.5em;
+	background-color: #171a20;
+	border-radius: 0.5em;
+	font-size: 1.1em;
+	transition: all 0.25s;
+	border: 2px solid transparent;
+	max-width: 30em;
+	display: flex;
+}
+
+.button-container-tile button:hover {
+	border-color: #36788b;
+}
+
+.button-container-tile div {
+	margin-top: 0.5em;
+}
+
+.button-container-tile-icon {
+	font-size: 2.5em;
+}
+
+/* Danger */
+
+.button-container-danger button {
+	background-color: transparent;
+	color: #f26666;
+	border-radius: 5px;
+	border: solid 1px #f26666;
+}
+
+.button-container-danger button:hover {
+	background-color: #b54f4f;
+}
+
+/* Ghost */
+
+.button-container-ghost button:hover,
+.button-container-danger-ghost button:hover {
+	text-decoration: underline;
+}
+
+/* Danger Ghost */
+
+.button-container-danger-ghost button {
+	color: #f26666;
+}

package/react/components/common/css/checkbox.css

@@ -0,0 +1,30 @@
+.complex-menu-checkbox-wrapper {
+	display: flex;
+	align-items: center;
+	margin-top: 8px;
+	margin-left: 12px;
+}
+
+.complex-menu-checkbox {
+	border-radius: 2px;
+	width: 14px;
+	height: 14px;
+	margin-right: 8px;
+	border: 1px solid var(--core-primary-4);
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.complex-menu-checkbox-label {
+	display: inline-block;
+}
+
+.complex-menu-checkbox.checked {
+	border: 1px solid var(--accent-primary);
+	font-size: 12px;
+}
+
+.complex-menu-checkbox.checked .finsemble-icon {
+	color: var(--accent-primary);
+}

package/react/components/common/css/color-picker.css

@@ -1,52 +1,52 @@
-input[type="color"] {
-	-webkit-appearance: none;
-	border: 1px solid black;
-	width: 36px;
-	height: 36px;
-	padding: 0;
-}
-
-/* https://stackoverflow.com/questions/51997640/how-to-set-border-radius-for-color-tags-color-picker */
-
-input[type="color"]::-webkit-color-swatch-wrapper {
-	padding: 0;
-	border: none;
-	border-radius: 5px;
-	background-clip: padding-box;
-}
-
-input[type="color"]:first-child {
-	padding: 0;
-	margin: 0;
-	border: 1px solid black;
-	box-shadow: none;
-	border-radius: 4px;
-	background: none;
-}
-
-input[type="color"]::-webkit-color-swatch {
-	border: none;
-	border-radius: 4px;
-}
-
-input[type="color"]:nth-child(2) {
-	padding: 0;
-	margin: 0;
-	border: 1px solid black;
-	box-shadow: none;
-	border-radius: 4px;
-	background: black;
-	outline: none;
-}
-
-input[type="color" i] {
-	border-radius: 4px;
-	border: none;
-}
-
-.color-picker {
-	padding: 0px;
-	margin: 0px;
-	display: flex;
-	align-items: center;
-}
+input[type="color"] {
+	-webkit-appearance: none;
+	border: 1px solid black;
+	width: 36px;
+	height: 36px;
+	padding: 0;
+}
+
+/* https://stackoverflow.com/questions/51997640/how-to-set-border-radius-for-color-tags-color-picker */
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+	padding: 0;
+	border: none;
+	border-radius: 5px;
+	background-clip: padding-box;
+}
+
+input[type="color"]:first-child {
+	padding: 0;
+	margin: 0;
+	border: 1px solid black;
+	box-shadow: none;
+	border-radius: 4px;
+	background: none;
+}
+
+input[type="color"]::-webkit-color-swatch {
+	border: none;
+	border-radius: 4px;
+}
+
+input[type="color"]:nth-child(2) {
+	padding: 0;
+	margin: 0;
+	border: 1px solid black;
+	box-shadow: none;
+	border-radius: 4px;
+	background: black;
+	outline: none;
+}
+
+input[type="color" i] {
+	border-radius: 4px;
+	border: none;
+}
+
+.color-picker {
+	padding: 0px;
+	margin: 0px;
+	display: flex;
+	align-items: center;
+}

package/react/components/common/css/drop-zone.css

@@ -1,17 +1,17 @@
-.dropZone.isDragging {
-	outline-width: 2px;
-	outline-style: dashed;
-	outline-color: #42a5ba;
-	cursor: grabbing;
-}
-
-.dropZone.isPotential {
-	outline-width: 2px;
-	outline-style: dashed;
-	outline-color: #3d4455;
-	cursor: grabbing;
-}
-
-.dropZone.isDragging * {
-	pointer-events: none;
-}
+.dropZone.isDragging {
+	outline-width: 2px;
+	outline-style: dashed;
+	outline-color: #42a5ba;
+	cursor: grabbing;
+}
+
+.dropZone.isPotential {
+	outline-width: 2px;
+	outline-style: dashed;
+	outline-color: #3d4455;
+	cursor: grabbing;
+}
+
+.dropZone.isDragging * {
+	pointer-events: none;
+}

package/react/components/common/css/file-input.css

@@ -1,49 +1,65 @@
-input[type="file"] {
-	font-family: OpenSans;
-	font-size: 1em;
-	font-weight: 600;
-}
-
-.file-input-container {
-	display: flex;
-	align-items: center;
-	flex-grow: 1;
-}
-
-.file-input-actions {
-	position: relative;
-}
-
-.file-input-actions button {
-	margin-right: 1em;
-	background-color: #373b43;
-}
-
-.file-input-actions input[type="file"] {
-	opacity: 0;
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	top: 0px;
-	left: 0px;
-	bottom: 0px;
-	right: 0px;
-	z-index: 1;
-}
-
-.file-input-value {
-	flex-grow: 1;
-}
-
-.file-input-value input {
-	width: 100%;
-	max-width: 33em;
-}
-
-.file-input-status {
-	margin-left: 1em;
-}
-
-.file-input-error {
-	color: #f26666;
-}
+input[type="file"] {
+	font-family: OpenSans;
+	font-size: 1em;
+	font-weight: 600;
+}
+
+.file-input-container {
+	display: flex;
+	align-items: center;
+	flex-grow: 1;
+}
+
+.file-input-actions {
+	position: relative;
+}
+
+.file-input-actions button {
+	margin-right: 1em;
+	background-color: #373b43;
+}
+
+.file-input-actions input[type="file"] {
+	opacity: 0;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0px;
+	left: 0px;
+	bottom: 0px;
+	right: 0px;
+	z-index: 1;
+}
+
+.file-input-value {
+	flex-grow: 1;
+}
+
+.file-input-value input {
+	width: 100%;
+	max-width: 33em;
+}
+
+.file-input-status {
+	margin-left: 1em;
+}
+
+.file-input-error {
+	color: #f26666;
+}
+
+.file-input-container .button-container-primary button {
+	background-color: var(--core-primary-4);
+}
+
+.file-input-container .button-container-primary button:disabled {
+	color: #aaaaaa;
+}
+
+.file-input-value-input {
+	color: #f5f6f7;
+}
+
+.file-input-value-input.invalid {
+	border-bottom: 2px solid #f26666;
+}

package/react/components/common/css/header.css

@@ -1,43 +1,30 @@
-.view-header {
-	display: flex;
-	margin: 2rem 0rem 1.4rem 2.1rem;
-}
-
-.view-header .button-container-icon button {
-	font-size: 1.8rem;
-	position: relative;
-	top: 5px;
-}
-
-.view-title {
-	width: 100%;
-	margin: 0px;
-	user-select: none;
-	position: relative;
-	font-size: 2.3rem;
-	box-sizing: border-box;
-	font-weight: bold;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.leftSide {
-	display: flex;
-	align-items: center;
-}
-
-.view-title button {
-	margin-right: 0.9rem;
-}
-
-.view-title::after {
-	content: " ";
-	display: block;
-	position: absolute;
-	top: 100%;
-	width: 100%;
-	height: 0.15rem;
-	margin-top: 0.5rem;
-	background-color: #42a5ba;
-}
+.view-header {
+	display: flex;
+	margin: 2rem 0rem 1.4rem 2.1rem;
+}
+
+.view-header .button-container-icon button {
+	font-size: 2.15rem;
+}
+
+.view-title {
+	width: 100%;
+	margin: 0px;
+	user-select: none;
+	position: relative;
+	font-size: 2.3rem;
+	box-sizing: border-box;
+	font-weight: bold;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.leftSide {
+	display: flex;
+	align-items: center;
+}
+
+.view-title button {
+	margin-right: 0.9rem;
+}